/* ══ /website-designing/ — "Why Delhi's Top Brands Choose OGEN…" (dark charcoal) ══ */
.wy { position: relative; overflow: hidden; padding: 80px 0; color: #fff; background: linear-gradient(160deg, #0c0c0e 0%, #141416 55%, #1b1b1e 100%); }
.wy::before { content: ''; position: absolute; width: 640px; height: 640px; top: -260px; right: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(242,102,41,.16), transparent 65%); pointer-events: none; }
.wy .container { position: relative; }
.wy-head { text-align: center; max-width: 920px; margin: 0 auto 40px; }
.wy .subtitle_text { display: block; font-size: 18px; font-weight: 600; color: #f26629; margin-bottom: 7px; }
.wy .wy-title { display: block; font-size: 38px !important; line-height: 1.3 !important; font-weight: 700 !important; color: #fff !important; margin: 0 0 14px; }
.wy-sub { font-size: 18px; line-height: 1.667em; color: rgba(255,255,255,.66); margin: 0; }
.wy p { font-size: 16px; line-height: 1.667em; color: rgba(255,255,255,.62); margin: 0; }
.wy h3 { font-size: 20px; line-height: 1.4; font-weight: 700; color: #fff; margin: 0 0 10px; }
.wy-ico { width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.wy-ico img { width: 32px; height: 32px; object-fit: contain; }
.wy-ico--lg { width: 72px; height: 72px; border-radius: 20px; } .wy-ico--lg img { width: 42px; height: 42px; }
[class$="-st"] .fa { color: #f26629; }
.wy b { font-weight: 800; }

/* selector: reason list left, detail panel right, stat strip below */
.wy3-box { display: grid; grid-template-columns: 400px 1fr; border-radius: 26px; background: #18181b; border: 1px solid rgba(255,255,255,.07); overflow: hidden; }
.wy3-nav { display: flex; flex-direction: column; padding: 14px; gap: 4px; border-right: 1px solid rgba(255,255,255,.07); }
.wy3-btn { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 0; border-radius: 14px; background: transparent; text-align: left; font-size: 16px; font-weight: 600; line-height: 1.4; color: rgba(255,255,255,.6); cursor: pointer; transition: all .25s; }
.wy3-btn span { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); transition: all .25s; }
.wy3-btn:hover { color: #fff; background: rgba(255,255,255,.04); }
.wy3-btn.is-on { color: #fff; background: rgba(242,102,41,.12); } .wy3-btn.is-on span { color: #fff; background: #f26629; }
.wy3-panels { position: relative; display: flex; align-items: center; padding: 44px 52px; background: radial-gradient(circle at 85% 15%, rgba(242,102,41,.14), transparent 55%); }
.wy3-pan { display: none; } .wy3-pan.is-on { display: block; animation: wyIn .45s ease both; }
@keyframes wyIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wy3-k { display: block; margin: 26px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #f26629; }
.wy3-pan h3 { font-size: 28px; line-height: 1.3; margin-bottom: 14px; }
.wy3-pan p { font-size: 17px; color: rgba(255,255,255,.7); max-width: 560px; }
.wy3-st { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.wy3-st-i { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-radius: 18px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); flex-wrap: wrap; }
.wy3-st-i b { font-size: 30px; line-height: 1; color: #fff; }
.wy3-st-i small { flex-basis: 100%; font-size: 14px; color: rgba(255,255,255,.55); }

@media (max-width: 991px) {
  .wy .wy-title { font-size: 30px !important; line-height: 40px !important; }
  .wy3-st { grid-template-columns: 1fr 1fr; } .wy3-box { grid-template-columns: 1fr; }
  .wy3-nav { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); } .wy3-panels { padding: 32px 28px; }
}
@media (max-width: 576px) {
  .wy { padding: 60px 0; } .wy-head { margin-bottom: 30px; } .wy .wy-title { font-size: 22px !important; line-height: 32px !important; }
  .wy-sub, .wy .subtitle_text { font-size: 16px; } .wy h3, .wy3-pan h3 { font-size: 19px; }
  .wy3-st-i b { font-size: 26px; } .wy3-st { gap: 10px; } .wy3-st-i { padding: 16px; }
  .wy3-btn { padding: 12px; font-size: 15px; } .wy3-panels { padding: 26px 20px; } .wy3-pan p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .wy3-pan.is-on { animation: none; } }