/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.why-hero { background:var(--clr-red); padding:40px 0 60px; }
.why-hero .container { position:relative; }
.why-hero-body { margin-top:32px; display:grid; grid-template-columns:1fr; gap:24px; }
.why-divider-left  { width:100%; height:1px; background:rgba(255,255,255,0.25); grid-column:1/-1; }
.why-desc { font-family:var(--ff-body); font-size:clamp(14px,1.6vw,16px); color:rgba(255,255,255,.88); line-height:1.75; max-width:640px; text-align:justify; justify-self:end; }
.why-desc strong { color:var(--clr-white); font-weight:600; }
.why-divider-right { width:60%; height:1px; background:rgba(255,255,255,0.25); grid-column:1/-1; justify-self:end; }
@media(min-width:768px){
  .why-hero-body { grid-template-columns:1fr 1fr; gap:20px 60px; }
  .why-divider-left  { grid-column:1/2; align-self:center; }
  .why-desc          { grid-column:2/3; justify-self:start; }
  .why-divider-right { grid-column:2/3; width:80%; justify-self:end; }
}

.why-features-wrap { background:var(--clr-white); padding:72px 0 96px; }
.why-features-list { display:flex; flex-direction:column; gap:56px; }

/* MODIFICATION: Longer delay for why-feature elements */
.why-feature {
  display:flex; align-items:center; gap:40px;
  opacity:0;
}
.why-feature--from-left  { transform:translateX(-60px); }
.why-feature--from-right { transform:translateX(60px); }
.why-feature.in-view {
  opacity:1; transform:translateX(0);
  transition:opacity 0.7s var(--ease-out-expo) 0.2s,
              transform 0.7s var(--ease-out-expo) 0.2s;
}
@media(max-width:640px){
  .why-feature { flex-direction:column; align-items:flex-start; gap:20px; }
  .why-feature--from-right { flex-direction:column-reverse; }
}

.why-feature-icon-wrap {
  flex-shrink:0; width:80px; height:80px; border-radius:50%;
  background:var(--clr-pink-bg); border:2px solid var(--clr-border);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s,transform .35s var(--ease-out-expo);
}
.why-feature:hover .why-feature-icon-wrap { background:var(--clr-red); transform:scale(1.08) rotate(-4deg); }
.why-feature:hover .why-feature-icon-wrap svg path,
.why-feature:hover .why-feature-icon-wrap svg circle { stroke:var(--clr-white); }

.why-icon { width:40px; height:40px; overflow:visible; }
.why-icon-path { stroke-dasharray:300; stroke-dashoffset:300; transition:stroke .3s; }
.why-feature.in-view .why-icon-path { animation:drawPath 1.4s var(--ease-out-expo) forwards; }
.why-feature:nth-child(1).in-view .why-icon-path { animation-delay:0.4s; }
.why-feature:nth-child(2).in-view .why-icon-path { animation-delay:0.5s; }
.why-feature:nth-child(3).in-view .why-icon-path { animation-delay:0.4s; }
.why-feature:nth-child(4).in-view .why-icon-path { animation-delay:0.5s; }
@keyframes drawPath { to{stroke-dashoffset:0;} }

.why-feature-title { font-family:var(--ff-display); font-weight:700; font-size:clamp(20px,2.5vw,28px); color:var(--clr-dark); margin-bottom:12px; letter-spacing:-0.01em; }
.why-feature-body  { font-family:var(--ff-body); font-size:15px; color:var(--clr-muted); line-height:1.7; max-width:520px; }
.why-feature-title::after { content:''; display:block; width:0; height:3px; background:var(--clr-red); border-radius:2px; margin-top:8px; transition:width .4s var(--ease-out-expo); }
.why-feature:hover .why-feature-title::after { width:48px; }