@import "tailwindcss";
/* ===============================
   CAROUSEL CARD POSITIONS
================================= */
.card{
position:absolute;
top:10%;
left:50%;
transform-origin:center;
transition:all 0.6s cubic-bezier(.22,.61,.36,1);
}
/* center */
.pos-center{
transform:translateX(-50%) scale(1.1);
opacity:1;
z-index:30;
}
/* left */
.pos-left{
transform:translateX(-180%) scale(.9);
opacity:.5;
z-index:20;
}
/* right */
.pos-right{
transform:translateX(80%) scale(.9);
opacity:.5;
z-index:20;
}
/* exit */
.pos-far-left{
transform:translateX(-300%) scale(.8);
opacity:0;
z-index:10;
}
/* enter */
.pos-far-right{
transform:translateX(200%) scale(.8);
opacity:0;
z-index:10;
}
.carousel-mask {
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,1) 15%,
    rgba(0,0,0,1) 85%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,1) 15%,
    rgba(0,0,0,1) 85%,
    transparent 100%
  );
}

/* ===============================
   WHY CHOOSE US — EDGE BLUR
================================= */
#why-bg-wrapper {
  -webkit-mask-image: radial-gradient(
    ellipse 75% 75% at 50% 50%,
    black 40%,
    rgba(0, 0, 0, 0.8) 55%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 0.1) 85%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 75% 75% at 50% 50%,
    black 40%,
    rgba(0, 0, 0, 0.8) 55%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 0.1) 85%,
    transparent 100%
  );
}