/* ========== Why Choose Us (choosex) – theme aware, responsive ========== */
:root{
  --choosex-text:#e8eeff;
  --choosex-muted:#b8c4df;
  --choosex-surface:#0f1730;     /* section bg (dark) */
  --choosex-card:#0b1224;        /* media border bg (dark) */
  --choosex-accent:#fff;      /* red */
  --choosex-ring: var(--ring, rgba(255,255,255,.14));
}
body.light{
  --choosex-text:#0d1734;
  --choosex-muted:#495372;
  --choosex-surface:#f4f6fb;     /* section bg (light) */
  --choosex-card:#ffffff;
  --choosex-ring: var(--ring, rgba(13,23,52,.14));
}

.choosex{
  padding: clamp(56px,7vw,56px) 0;
 
}
.choosex .container{ width:min(1200px,92%); margin-inline:auto; } /* fallback */

.choosex__eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.14em;
  color:var(--choosex-accent); text-transform:uppercase; font-size:22px;
  margin:0 0 .4rem; text-decoration: underline;
}
.choosex__title{
   color:var(--choosex-text);
  font-size:26px; line-height:1.15; text-align:center;
}

/* Grid: left list – media – right list */
.choosex__grid{
  display:grid; gap:clamp(18px,2.8vw,28px);
  grid-template-columns: 1fr minmax(0,560px) 1fr;
  align-items:center;
}
@media (max-width: 980px){
  .choosex__grid{
    grid-template-columns: 1fr;
  }
  .choosex__features.left{ order:1 }
  .choosex__media{ order:2 }
  .choosex__features.right{ order:3 }
}

/* Features list */
.choosex__features{ list-style:none; padding:0; margin:0; display:grid; gap:22px }
.feat{ display:grid;  gap:14px; align-items:center; }
.feat h3{ margin:0 0 2px; color:var(--choosex-text); font-weight:800; font-size:1.02rem }
.feat p{ margin:0; color:var(--choosex-muted); font-size:.95rem }

/* Icon box (uses --icon url; tinted with accent) */
.feat__icon{
  width:56px; height:56px; border-radius:14px;
  border:2px solid #fff; display:grid; place-items:center;
  position:relative; background:transparent;
}
.feat__icon::before{
  content:""; width:28px; height:28px; display:block;
  background: var(--choosex-accent);
  -webkit-mask: var(--icon) center/contain no-repeat;
          mask: var(--icon) center/contain no-repeat;
}

/* Media (image/video) */
.choosex__media{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--choosex-ring);
  background: var(--choosex-card);
  box-shadow: 0 14px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  aspect-ratio: 16/10; /* responsive frame */
}
.choosex__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Play button */
.choosex__play{
  position:absolute; inset:auto; left:50%; top:50%; transform:translate(-50%,-50%);
  width:66px; height:66px; display:grid; place-items:center; text-decoration:none;
  color:#fff; font-size:1.35rem; line-height:1;
  background: radial-gradient(60% 60% at 50% 50%, #ff3b47, #b0101d);
  border-radius:50%;
  box-shadow: 0 16px 42px rgba(225,29,46,.35), 0 0 0 4px rgba(255,255,255,.18) inset;
  border:1px solid var(--choosex-ring);
  transition: transform .18s ease, box-shadow .18s ease;
}
.choosex__play:hover{ transform:translate(-50%,-50%) scale(1.05); }

/* Small screens spacing tweaks */
@media (max-width:560px){
  
  .feat__icon{ width:48px; height:48px; border-radius:12px; }
  .feat__icon::before{ width:24px; height:24px; }
}

/* Font Awesome icon setup (override old mask rules) */
.choosex .feat__icon::before{ content:none !important; display:none !important; } /* old mask off */
.choosex .feat__icon{
  /* aapke paas ye border/size pehle se hai; ensure center + color */
  display:grid; place-items:center; color:var(--choosex-accent);
}
.choosex .feat__icon i{
  font-size:26px; line-height:1;    /* icon size */
}
@media (max-width:560px){
  .choosex .feat__icon i{ font-size:22px; }
}

/* Theme-based icon color for WHY CHOOSE US */
:root{
  --choosex-icon: #fff;        /* dark mode icon color */
}
body.light{
  --choosex-icon: #1F4FE0;     /* light mode icon color (blue) */
}



/* Apply to Font Awesome icons */
.choosex .feat__icon{
  color: var(--choosex-icon) !important;  /* icon tint */
  /* border pehle se red (var(--choosex-accent)) hai; woh same rahega */
    border:2px solid #c52121; display:grid; place-items:center;
}

.choosex .feat__icon i{
  color: inherit;               /* FA icon takes the tint above */
}

/* Light mode: WHY CHOOSE US eyebrow text black */
body.light .choosex__eyebrow { color: #000; }

/* Make sure the icon picks the button color and is centered */
.choosex .choosex__play{ color:#fff; }       /* your red circle already set */
.choosex .choosex__play i{ color:inherit; font-size:22px; line-height:1; }
@media (max-width:560px){ .choosex .choosex__play i{ font-size:18px; } }


/* iPad Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  
  .choosex__title{
    color: var(--choosex-text);
  font-size: 26px;
  line-height: 1.15;
  text-align: center;
  }
  
}