/* width */
.w-50px{
  width: 50px;
}
.w-75px{
  width: 75px;
}
.w-100px{
  width: 100px;
}
.w-125px{
  width: 125px;
}
.w-150px{
  width: 125px;
}
.w-175px{
  width: 175px;
}
.w-200px{
  width: 500px;
}
.w-225px{
  width: 225px;
}
.w-250px{
  width: 250px;
}
.w-275px{
  width: 275px;
}
.w-300px{
  width: 300px;
}
/* end width */

/* height */
.h-50vh{
  min-height: 50vh;
}
.h-100vh{
  min-height: 100vh;
}

.h-50-px{
  min-height: 50px;
}
.h-75-px{
  min-height: 75px;
}
.h-100-px{
  min-height: 100px;
}
.h-125-px{
  min-height: 125px;
}
.h-150-px{
  min-height: 150px;
}
.h-175-px{
  min-height: 175px;
}
.h-200-px{
  min-height: 200px;
}
/* end height */

/* border radius */
.br-8{
  border-radius: 8px;
}
.br-12{
  border-radius: 12px;
}
.br-16{
  border-radius: 16px;
}
.br-20{
  border-radius: 20px;
}
.br-24{
  border-radius: 24px;
}
.br-28{
  border-radius: 28px;
}
.br-32{
  border-radius: 32px;
}
/* end border radius */

/* font size */
.fs-16{
  font-size: 16px !important;
}
.fs-20{
  font-size: 20px !important;
}
.fs-24{
  font-size: 24px !important;
}
.fs-28{
  font-size: 28px !important;
}
.fs-32{
  font-size: 32px !important;
}
.fs-36{
  font-size: 36px !important;
}
.fs-40{
  font-size: 40px !important;
}
.fs-50{
  font-size: 50px !important;
}
.fs-60 {
  font-size: 60px !important;
  line-height: 1.2 !important;
}
.fs-80{
  font-size: 80px !important;
}
/* end font size */

/* font weight */
.fw-3{
  font-weight: 300 !important;
}
.fw-4{
  font-weight: 400 !important;
}
.fw-5{
  font-weight: 500 !important;
}
.fw-6{
  font-weight: 600 !important;
}
.fw-7{
  font-weight: 700 !important;
}
.fw-8{
  font-weight: 800 !important;
}
.fw-9{
  font-weight: 900 !important;
}
/* end font weight */

/* padding */
.pt-6,
.py-6{
  padding-top: 6em !important ;
}
.pb-6,
.py-6{
  padding-bottom: 6em !important ;
}
.pt-7,
.py-7{
  padding-top: 7em !important ;
}
.pb-7,
.py-7{
  padding-bottom: 7em !important ;
}
.pt-8,
.py-8{
  padding-top: 8em !important ;
}
.pb-8,
.py-8{
  padding-bottom: 8em !important ;
}
.pt-9,
.py-9{
  padding-top: 9em !important ;
}
.pb-9,
.py-9{
  padding-bottom: 9em !important ;
}
.pt-10,
.py-10{
  padding-top: 10em !important ;
}
.pb-10,
.py-10{
  padding-bottom: 10em !important ;
}
/* end padding */

/* margin */
.mt-6,
.my-6{
  margin-top: 6em !important ;
}
.mb-6,
.my-6{
  margin-bottom: 6em !important ;
}
.mt-7,
.my-7{
  margin-top: 7em !important ;
}
.mb-7,
.my-7{
  margin-bottom: 7em !important ;
}
.mt-8,
.my-8{
  margin-top: 8em !important ;
}
.mb-8,
.my-8{
  margin-bottom: 8em !important ;
}
.mt-9,
.my-9{
  margin-top: 9em !important ;
}
.mb-9,
.my-9{
  margin-bottom: 9em !important ;
}
.mt-10,
.my-10{
  margin-top: 10em !important ;
}
.mb-10,
.my-10{
  margin-bottom: 10em !important ;
}
/* end padding */

/* letter spacing */
.ls-05{
  letter-spacing: 0.5px;
}
.ls-10{
  letter-spacing: 1px;
}
.ls-15{
  letter-spacing: 1.5px;
}
.ls-20{
  letter-spacing: 2px;
}
.ls-25{
  letter-spacing: 2.5px;
}
.ls-30{
  letter-spacing: 3px;
}
/* end letter spacing */




/* what i do horizontal slilder */

.what-i-do{
  /* background: var(--primary-10); */
  position: relative;
}
.what-i-do .swiper-container::after {
  content: "Services";
  color: var(--primary-10);
  bottom: -40%;
}

.what-i-do .title-sec {
  position: absolute;
  top: 5%;
  left: 5%;
}

.what-i-do .swiper-slide {
    width: unset;
}


.what-i-do-wrap-box{
  background: var(--white-50);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.03);
  border-radius: clamp(16px, 3vw, 28px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  will-change: transform;
  transition: 1s;
}
.what-i-do-wrap{
  width: 40vw;
  padding: 2rem;
  box-sizing: content-box;
  height: 500px;
  display: flex;
  display: -webkit-flex;
  align-items: flex-end;
  -webkit-align-items: flex-end;
  border-radius: 20px;
  /* overflow: hidden; */
  position: relative;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  cursor: pointer;
  position: relative;
}


.what-i-do-wrap-box .img-cards {
  position: relative;
  height: 500px;
}
.what-i-do-wrap-box .img-card {
  position: absolute;
  width: 320px;
  height: 420px;
  border-radius: 30px;
  bottom: 10%;
}
.what-i-do-wrap-box .img-card-one {
  width: 320px;
  height: 420px;
  border-radius: 30px;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, filter 0.35s ease;
  will-change: transform;
  background-color: var(--primary-30);
  transform: rotate(-12deg);
}
.what-i-do-wrap-box .img-card-two{
  transform-origin: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  background-color: var(--primary);
  transform: rotate(5deg);
}
.what-i-do-wrap-box:hover .img-card-one {
  transform: translateY(2px) scale(1.05) rotate(-4deg);
  filter: brightness(1.2) saturate(1.3);
  z-index: 10;  
}
.what-i-do-wrap-box:hover .img-card-two {
  transform: translateY(0px) scale(1) rotate(4deg);
  filter: brightness(1.2) saturate(1.3);
  z-index: 99;  
}


/* end what i do horizontal slilder */