/* Home page additions on top of the design's `index` stylesheet */

/* Hero background rotation (admin slider images) — sits above .hero's own background, below its content */
.hero.has-slides{isolation:isolate}
.ht-hero-slides{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit}
.ht-hs{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity 1.2s ease}
.ht-hs.on{opacity:1}
.ht-hero-slides::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,26,38,.16),rgba(8,26,38,.40)),linear-gradient(to left,rgba(8,26,38,.88) 0%,rgba(8,26,38,.60) 28%,rgba(8,26,38,.18) 58%,rgba(8,26,38,.28) 100%)}
[dir="ltr"] .ht-hero-slides::after{background:linear-gradient(to bottom,rgba(8,26,38,.16),rgba(8,26,38,.40)),linear-gradient(to right,rgba(8,26,38,.88) 0%,rgba(8,26,38,.60) 28%,rgba(8,26,38,.18) 58%,rgba(8,26,38,.28) 100%)}
@media (prefers-reduced-motion:reduce){.ht-hs{transition:none}}

/* DB flags are images (country_flag / flagcdn) instead of the design's inline SVGs */
img.flag{border-radius:50%;object-fit:cover;background:#eef3f6}
.flag.ph{display:inline-block;border-radius:50%;background:linear-gradient(135deg,#cfe0e8,#9bbccb)}
.ccell img.flag,.ccell .flag.ph{width:30px;height:30px;flex:none}
.reqcard .fl img.flag,.reqcard .fl .flag.ph{width:42px;height:42px}
a.ccell{text-decoration:none}
[dir="ltr"] .ccell{text-align:left}

/* Visa picker: price pill next to each country + fee note */
.vmfees{margin:-4px 0 14px;font-size:13px;color:var(--muted);font-weight:500;text-align:center}
.ccell .ccprice{flex:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:13px;font-weight:800;color:var(--teal-d);background:rgba(24,174,151,.10);border-radius:20px;padding:4px 10px}
.sar{width:1em;height:1em;flex:none;fill:currentColor}
/* English pages: write the currency as "SAR 449" instead of the riyal sign */
body.is-en .ccprice .sar{display:none}
body.is-en .ccprice::before{content:"SAR"}
.ccell .ccallin{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:1px}

/* Consultation CTA (the index stylesheet has no .cta-box; same look as the site family) */
.cta-box{background:linear-gradient(110deg,#e9f5f3,#dbeef5);border-radius:16px;padding:34px 28px;text-align:center;margin:56px 0 10px}
.cta-box h2{font-size:26px;font-weight:900;color:var(--navy)}
.cta-box p{color:var(--navy-2);margin:6px 0 16px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-actions .btn-teal{padding:14px 28px;border-radius:40px;font-size:17px}
@media (max-width:640px){
  .cta-box{padding:26px 16px}
  .cta-box h2{font-size:21px}
}

/* English (LTR): the design pins the hero tagline to the left, on top of the heading — mirror it */
html[dir="ltr"] .hero .script{left:auto;right:6%;transform:rotate(8deg)}

/* ===== خدماتنا — premium, every card the same size ===== */
#services .svc-grid{--gap:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.svc{--w:calc((100% - 3 * var(--gap)) / 4);flex:0 0 var(--w);max-width:var(--w);position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  min-height:282px;padding:30px 22px 22px;border-radius:22px;background:#fff;border:1px solid #E6EEF1;color:inherit;text-decoration:none;
  box-shadow:0 1px 2px rgba(12,43,63,.04),0 10px 30px -18px rgba(12,43,63,.18);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.svc::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#2BC4AA,#18AE97 50%,#0F8F7B);opacity:0;transition:opacity .3s}
.svc::after{content:"";position:absolute;z-index:-1;inset:auto -40% -60% -40%;height:70%;background:radial-gradient(closest-side,rgba(43,196,170,.12),transparent);opacity:0;transition:opacity .3s}
.svc:hover{transform:translateY(-6px);border-color:rgba(24,174,151,.35);box-shadow:0 2px 4px rgba(12,43,63,.04),0 26px 48px -24px rgba(12,43,63,.32)}
.svc:hover::before,.svc:hover::after{opacity:1}
.svc:focus-visible{outline:3px solid var(--teal,#18AE97);outline-offset:3px}
.svc__ic{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;margin-bottom:6px;color:#0F8F7B;background:linear-gradient(160deg,#F1FAF8,#DDF2EE);box-shadow:inset 0 0 0 1px rgba(24,174,151,.14);transition:background .3s,color .3s,transform .3s,box-shadow .3s}
.svc__ic svg{width:32px;height:32px;stroke-width:1.7}
.svc:hover .svc__ic{color:#fff;background:linear-gradient(160deg,#2BC4AA,#0F8F7B);box-shadow:0 14px 26px -14px rgba(15,143,123,.9);transform:translateY(-2px) scale(1.04)}
.svc h3{font-size:18px;font-weight:800;color:var(--navy,#0c2b3f);line-height:1.4;margin:0}
.svc p{font-size:14px;line-height:1.75;color:var(--muted,#5d6f7c);margin:0;max-width:30ch;flex:1}
.svc .soon{display:inline-block;font-size:12px;font-weight:800;padding:2px 10px;border-radius:999px;background:#fdf1d8;color:#9a6b12}
.svc__cta{margin-top:6px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;border:1px solid #D7EBE7;color:#0F8F7B;font-weight:800;font-size:14px;transition:background .3s,color .3s,border-color .3s}
.svc__cta svg{width:16px;height:16px;transition:transform .3s}
.svc:hover .svc__cta{background:#0F8F7B;border-color:#0F8F7B;color:#fff}
.svc:hover .svc__cta svg{transform:translateX(-3px)}
body.is-en .svc:hover .svc__cta svg{transform:translateX(3px)}
.svc.is-soon{pointer-events:none;opacity:.75}
@media (max-width:1100px){.svc{--w:calc((100% - 2 * var(--gap)) / 3)}}
/* 6 or 9 cards: three per row on wide screens, so none is left alone on the last row */
@media (min-width:761px){.svc-grid--3 .svc{--w:calc((100% - 2 * var(--gap)) / 3)}}
@media (max-width:760px){.svc{--w:calc((100% - var(--gap)) / 2);min-height:300px;padding:24px 12px 18px}#services .svc-grid{--gap:12px}.svc h3{font-size:16px}.svc p{font-size:13px}.svc__ic{width:58px;height:58px;border-radius:17px}.svc__ic svg{width:28px;height:28px}.svc__cta{padding:7px 12px;font-size:12.5px;gap:6px}}
@media (prefers-reduced-motion:reduce){.svc,.svc__ic,.svc__cta,.svc__cta svg{transition:none}.svc:hover{transform:none}}