/* ═══ MSHATTI — faithful port of m-shatti.com (CoreAims) ═══
   Light content, campaign banner header, purple nav/footer, Cairo, RTL. */

/* ── Cairo (self-hosted, variable 400–900) ── */
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(fonts/cairo-1.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(fonts/cairo-3.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(fonts/cairo-2.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --ink:#404040; --head:#434b51; --purple:#571666; --purple2:#7a2585; --pink:#e05aa8;
  --line:#e2e2e6; --wrap:980px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:15px/1.85 'Cairo','Segoe UI',Tahoma,sans-serif;background:#e9e9ea;color:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--purple);text-decoration:none}
h1,h2,h3,h4{line-height:1.4;font-weight:800;color:var(--head)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.wrap.narrow{max-width:760px}
.btn{display:inline-block;background:linear-gradient(180deg,var(--purple2),var(--purple));color:#fff;border:0;border-radius:24px;padding:9px 26px;font:inherit;font-weight:700;cursor:pointer;transition:filter .2s,transform .15s}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--purple);border:1px solid var(--purple)}

/* ── header: full-width campaign banner + purple nav bar ── */
.hd{background:#2a1420}
.hd-banner{display:block;width:100%;height:auto}
.hd-navbar{background:linear-gradient(180deg,#7a3288 0%,#5a1a68 55%,#4a1456 100%);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.hd-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:0;min-height:60px}
/* top-level cells: a direct link OR a dropdown parent (.hd-item) */
.hd-nav>a,.hd-item>a{display:flex;align-items:center;color:#fff;padding:19px 14px;font-size:13.5px;font-weight:700;white-space:nowrap;transition:background .2s,color .2s}
.hd-nav>a,.hd-item{border-inline-start:1px solid rgba(255,255,255,.12)}
.hd-nav>a:first-child{border-inline-start:0}
.hd-nav>a:hover,.hd-item:hover>a{background:rgba(0,0,0,.18)}
.hd-nav>a.on,.hd-item.on>a{color:#ffbfe8;background:rgba(0,0,0,.2)}
/* dropdown parent + panel */
.hd-item{position:relative;display:flex;align-items:center}
.hd-caret{font-size:9px;margin-inline-start:5px;opacity:.85;transition:transform .2s}
.hd-item:hover .hd-caret,.hd-item:focus-within .hd-caret{transform:translateY(1px)}
.hd-sub{position:absolute;top:100%;inset-inline-start:0;min-width:170px;background:#5a1a68;box-shadow:0 10px 22px rgba(0,0,0,.35);list-style:none;margin:0;padding:5px 0;z-index:70;opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .18s,transform .18s,visibility .18s}
.hd-item:hover .hd-sub,.hd-item:focus-within .hd-sub{opacity:1;visibility:visible;transform:translateY(0)}
.hd-sub li{margin:0}
.hd-sub a{display:block;padding:10px 18px;color:#f0e2f6;font-size:13.5px;font-weight:700;white-space:nowrap}
.hd-sub a:hover,.hd-sub a.on{background:rgba(0,0,0,.3);color:#ffbfe8}

/* ── main content box: white 980, on light-gray body ── */
main{max-width:var(--wrap);margin:0 auto;background:#fff;box-shadow:0 0 22px rgba(0,0,0,.08);min-height:340px}
main .wrap{max-width:none;padding:0 40px}
@media(max-width:640px){main .wrap{padding:0 20px}}

/* ── sections ── */
.sec{padding:38px 0}
.sec + .sec{border-top:1px solid var(--line)}
.sec-eyebrow{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--pink)}
.sec h2{margin:0 0 18px;font-size:22px;color:var(--head);position:relative;padding-bottom:10px}
.sec h2::after{content:'';position:absolute;bottom:0;inset-inline-start:0;width:100%;height:1px;background:repeating-linear-gradient(90deg,#cdbcd4 0 8px,transparent 8px 14px)}
.prose{color:var(--ink);font-size:15px;line-height:1.85}
.prose p{margin:0 0 .85em}
.prose br + br{display:none}
.prose :is(h2,h3,h4){color:var(--head);margin:1.3em 0 .5em}
.prose a{color:var(--purple);text-decoration:underline}
.prose img{border:6px solid #fff;box-shadow:0 0 4px rgba(0,0,0,.28);margin:8px 0;max-width:100%}
.prose ul,.prose ol{padding-inline-start:1.3em}
.prose li{margin:.35em 0}
.sec-cta{margin-top:20px}
.cols{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:center}
.col-img img{border:6px solid #fff;box-shadow:0 0 5px rgba(0,0,0,.28);width:100%;object-fit:cover}
@media(max-width:760px){.cols{grid-template-columns:1fr}}
.photo{margin:16px 0 0}
.photo img{border:6px solid #fff;box-shadow:0 0 5px rgba(0,0,0,.28);width:100%}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border:5px solid #fff;box-shadow:0 0 4px rgba(0,0,0,.25);transition:transform .2s}
.gallery a:hover img{transform:scale(1.03)}
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.vid{aspect-ratio:16/9;border:5px solid #fff;box-shadow:0 0 4px rgba(0,0,0,.25);overflow:hidden}
.vid iframe{width:100%;height:100%;border:0}

/* ── captioned photo grid (diwaniya visits/events) ── */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:6px}
.cap-grid figure{margin:0;background:#fff;border:1px solid var(--line);box-shadow:0 0 5px rgba(0,0,0,.12);display:flex;flex-direction:column}
.cap-grid a{display:block;overflow:hidden}
.cap-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .25s}
.cap-grid a:hover img{transform:scale(1.04)}
.cap-grid figcaption{padding:11px 13px;font-size:13.5px;font-weight:700;color:var(--head);line-height:1.6;text-align:center}

/* ── blog (news cards) ── */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.blog-card{display:flex;flex-direction:column;border:1px solid var(--line);background:#fff;color:var(--ink);transition:transform .18s,box-shadow .18s}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(87,22,102,.16)}
.bc-img img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.bc-b{display:flex;flex-direction:column;gap:7px;padding:14px 15px}
.bc-b b{font-size:15.5px;line-height:1.5;color:var(--purple)}
.bc-b span{color:var(--ink);font-size:13.5px}
.bc-b i{font-style:normal;color:#8a8f9a;font-size:12px;margin-top:auto}
.post h1{font-size:26px;margin:4px 0 16px;color:var(--head)}

/* ── contact form ── */
.cms-contact{max-width:620px}
.cms-contact .form-group{margin:0 0 13px}
.cms-contact label{display:block;margin:0 0 5px;font-size:14px;font-weight:700;color:var(--head)}
.cms-contact input,.cms-contact textarea,input[type=text],input[type=email],input[type=tel],textarea,select{
  width:100%;padding:11px 13px;border:1px solid #d3cad8;border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:14.5px;outline:none;transition:border-color .2s,box-shadow .2s}
.cms-contact input:focus,.cms-contact textarea:focus,input:focus,textarea:focus{border-color:var(--purple2);box-shadow:0 0 0 3px rgba(122,37,133,.14)}
.cms-contact textarea{min-height:130px;resize:vertical;line-height:1.7}
.form-captcha{margin:14px 0}
.hp-field{position:absolute;left:-9999px;opacity:0}
.field-error{display:none;color:#c0392b;font-size:12.5px;margin-top:4px}
.cform-msg{margin-top:12px;font-weight:700}

/* ── footer (purple, 4 columns — faithful to legacy m-shatti.com) ── */
.ft{background:#591668 url(theme/footer.png) repeat-x top;color:#cdb6d8;margin-top:26px;font-size:13px;line-height:1.75}
.ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:var(--wrap);margin:0 auto;padding:40px 40px 14px}
.ft-col h3{margin:0 0 12px;font-size:15px;font-weight:700;color:#fff;padding-bottom:9px;position:relative}
.ft-col h3::after{content:'';position:absolute;bottom:0;inset-inline-start:0;width:100%;height:1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 8px,transparent 8px 14px)}
.ft-col h3 a{color:#fff}
.ft-col h3 a:hover{color:#f3b7d8}
.ft-col p{margin:0;color:#cdb6d8}
.ft-col a{color:#e7d4ef}
.ft-col a:hover{color:#fff}
.ft-more{white-space:nowrap;color:#f3b7d8 !important;font-weight:700}
.ft-contact a{color:#e7d4ef}
.ft-soc{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.ft-soc a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.3) !important;color:#fff !important;transition:transform .2s,background .2s}
.ft-soc a:hover{transform:translateY(-3px);background:rgba(255,255,255,.14)}
.ft-soc svg,.ft-soc img{width:17px;height:17px}
.ft-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;max-width:var(--wrap);margin:6px auto 0;padding:14px 18px;border-top:1px solid rgba(255,255,255,.14)}
.ft-nav a{color:#e7d4ef;font-size:12px;font-weight:700;padding:3px 10px;white-space:nowrap;border-inline-start:1px solid rgba(255,255,255,.18)}
.ft-nav a:first-child{border-inline-start:0}
.ft-nav a:hover{color:#fff}
.ft-bar{text-align:center;margin:0;padding:14px 40px 22px;color:#b49ac2;font-size:12px;background:rgba(0,0,0,.18)}
.ft-bar a{color:#e0c6ec;font-weight:700}
.ft-bar a:hover{color:#fff}
@media(max-width:820px){.ft-cols{grid-template-columns:repeat(2,1fr);padding:34px 24px 12px}}
@media(max-width:520px){.ft-cols{grid-template-columns:1fr}.ft-nav{padding:12px 18px}.ft-nav a{padding:4px 9px}}

/* ── back to top ── */
#backTop{position:fixed;bottom:22px;left:22px;z-index:60;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--purple2),var(--purple));color:#fff;
  border:2px solid rgba(255,255,255,.35);box-shadow:0 6px 16px rgba(0,0,0,.3);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s}
#backTop.show{opacity:1;visibility:visible;transform:translateY(0)}
#backTop svg{width:22px;height:22px}

@media(max-width:640px){
  .hd-nav{min-height:0}
  .hd-nav>a,.hd-item>a{flex:1 1 44%;justify-content:center;text-align:center;border-block-start:1px solid rgba(255,255,255,.12)}
  /* no hover on touch: sub-menu shows inline under its parent, always visible */
  .hd-item{flex:1 1 100%;flex-wrap:wrap}
  .hd-caret{display:none}
  .hd-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;display:flex;width:100%;background:rgba(0,0,0,.16);padding:0}
  .hd-sub li{flex:1 1 44%}
  .hd-sub a{text-align:center;border-block-start:1px solid rgba(255,255,255,.1)}
  .sec{padding:28px 0}
}