*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq',serif;line-height:2.2;color:#222;background:#fafaf7;direction:rtl;text-align:right;font-size:1.05rem}
.ar,.arabic{font-family:'Amiri','Scheherazade New','Noto Naskh Arabic',serif;line-height:1.8}
img{max-width:100%;height:auto;display:block}
a{color:#0a6b3a;text-decoration:none}
a:hover{color:#d4a017}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.topbar{background:#053823;color:#fff;font-size:.85rem;padding:8px 0}
.topbar .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.topbar a{color:#fff;margin-left:14px}
.topbar a:hover{color:#ffd54a}
header.main{background:#0a4d2e;color:#fff;position:sticky;top:0;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;max-width:1200px;margin:0 auto;gap:14px}
.logo{display:flex;align-items:center;gap:12px;color:#fff}
.logo img{height:60px;width:60px;border-radius:50%;background:#fff;padding:3px}
.logo .brand{font-weight:700;font-size:1.15rem;line-height:1.4}
.logo .brand small{display:block;font-weight:400;font-size:.78rem;color:#ffd54a}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px}
nav a{color:#fff;padding:8px 12px;border-radius:6px;font-size:.95rem;transition:.2s;display:block;line-height:1.4}
nav a:hover,nav a.active{background:#d4a017;color:#fff}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.8rem;cursor:pointer}
.cta-btn{background:#d4a017;color:#fff!important;padding:8px 18px!important;border-radius:30px;font-weight:600}
.cta-btn:hover{background:#fff;color:#0a4d2e!important}
.hero-banner{width:100%;background:#053823}
.hero-banner img{width:100%;max-height:480px;object-fit:cover;display:block}
section{padding:60px 0}
section h2{font-size:2rem;color:#0a4d2e;margin-bottom:12px;text-align:center;line-height:1.6}
section h2:after{content:"";display:block;width:70px;height:3px;background:#d4a017;margin:14px auto 24px}
section .lead{text-align:center;max-width:880px;margin:0 auto 36px;color:#555}
.alt{background:#f1f6f0}
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.07);transition:.3s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.card img{height:200px;object-fit:cover;width:100%}
.card-body{padding:20px;flex:1;display:flex;flex-direction:column}
.card-body h3{color:#0a4d2e;margin-bottom:10px;font-size:1.25rem;line-height:1.7}
.card-body p{color:#555;flex:1}
.card-body .btn{margin-top:16px;align-self:flex-start}
.icon-card{text-align:center;padding:30px 20px;background:#fff;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.07);transition:.3s}
.icon-card:hover{transform:translateY(-6px);background:#0a4d2e;color:#fff}
.icon-card:hover h3{color:#ffd54a}
.icon-card .icon{font-size:2.5rem;color:#d4a017;margin-bottom:14px}
.icon-card h3{color:#0a4d2e;margin-bottom:10px;line-height:1.7}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.two-col img{border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery a{display:block;overflow:hidden;border-radius:8px}
.gallery img{height:200px;object-fit:cover;width:100%;transition:.4s}
.gallery img:hover{transform:scale(1.07)}
.cta-strip{background:linear-gradient(135deg,#d4a017,#b8860b);color:#fff;padding:50px 20px;text-align:center}
.cta-strip h2{color:#fff}
.cta-strip h2:after{background:#fff}
.btn{display:inline-block;padding:10px 26px;border-radius:30px;font-weight:600;transition:.2s;border:0;cursor:pointer;font-size:1rem;font-family:inherit;line-height:1.8}
.btn-primary{background:#d4a017;color:#fff}
.btn-primary:hover{background:#fff;color:#0a4d2e}
.btn-outline{background:transparent;color:#fff;border:2px solid #fff}
.btn-outline:hover{background:#fff;color:#0a4d2e}
.btn-wa{background:#25d366;color:#fff}
.btn-wa:hover{background:#128c7e;color:#fff}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
form.contact{background:#fff;padding:30px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);max-width:680px;margin:0 auto}
form.contact input,form.contact select,form.contact textarea{width:100%;padding:12px 14px;margin-bottom:14px;border:1px solid #d0d7d3;border-radius:8px;font-size:1rem;font-family:inherit;direction:rtl;text-align:right}
form.contact textarea{min-height:130px;resize:vertical}
form.contact label{display:block;margin-bottom:6px;font-weight:600;color:#0a4d2e}
footer{background:#053823;color:#cfe1d6;padding:50px 0 0}
footer h4{color:#ffd54a;margin-bottom:14px;font-size:1.1rem;line-height:1.8}
footer .grid-4{gap:30px}
footer a{color:#cfe1d6;display:block;padding:4px 0}
footer a:hover{color:#ffd54a}
footer ul{list-style:none}
.socials a{display:inline-flex;width:38px;height:38px;border-radius:50%;background:#0a6b3a;color:#fff;align-items:center;justify-content:center;margin-left:8px;transition:.2s}
.socials a:hover{background:#d4a017;transform:translateY(-3px)}
.copy{border-top:1px solid #0a6b3a;margin-top:30px;padding:18px 0;text-align:center;font-size:.9rem}
.float-wa{position:fixed;bottom:24px;left:24px;width:60px;height:60px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:2rem;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:999;transition:.2s}
.float-wa:hover{transform:scale(1.1);color:#fff}
.page-head{background:linear-gradient(135deg,#053823,#0a6b3a);color:#fff;padding:70px 20px;text-align:center}
.page-head h1{font-size:2.4rem;margin-bottom:10px;line-height:1.7}
.crumb{opacity:.85;font-size:.95rem}
.crumb a{color:#ffd54a}
.verse{background:#0a4d2e;color:#fff;padding:30px;border-radius:12px;text-align:center;margin:30px 0;border-right:6px solid #d4a017}
.verse .ar{font-family:'Amiri','Scheherazade New',serif;font-size:1.9rem;color:#ffd54a;margin-bottom:12px;direction:rtl;line-height:1.8}
.verse .tr{opacity:.92}
@media(max-width:980px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .menu-toggle{display:block}
  nav{position:absolute;top:100%;right:0;left:0;background:#0a4d2e;display:none;padding:10px 16px;max-height:75vh;overflow-y:auto}
  nav.open{display:block}
  nav ul{flex-direction:column;align-items:stretch}
  nav a{padding:10px 12px;border-bottom:1px solid #0a6b3a}
  section{padding:40px 0}
  section h2{font-size:1.5rem}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .topbar{font-size:.8rem;text-align:center}
  .topbar .container{justify-content:center}
  .logo .brand{font-size:.95rem}
  .logo img{height:48px;width:48px}
  .float-wa{left:16px;bottom:16px;width:54px;height:54px;font-size:1.7rem}
}

/* DROPDOWN-NAV */

/* Dropdown menu RTL */
nav ul{position:relative}
nav li.has-sub{position:relative}
nav li.has-sub > a .fa-caret-down{font-size:.75rem;margin-right:4px;opacity:.85}
nav .submenu{display:none;position:absolute;top:100%;right:0;background:#0a4d2e;min-width:240px;box-shadow:0 8px 24px rgba(0,0,0,.25);border-radius:8px;padding:6px 0;z-index:1000;flex-direction:column;text-align:right}
nav li.has-sub:hover > .submenu,nav li.has-sub:focus-within > .submenu{display:flex}
nav .submenu li{width:100%}
nav .submenu a{padding:9px 16px;border-radius:0;font-size:1rem;white-space:nowrap;display:block;border-bottom:1px solid rgba(255,255,255,.05)}
nav .submenu a:hover{background:#d4a017}
@media(max-width:720px){
  nav li.has-sub > a .fa-caret-down{float:left}
  nav .submenu{position:static;display:none;box-shadow:none;background:#06371f;border-radius:0;min-width:0;padding:0}
  nav li.has-sub.open > .submenu{display:flex}
  nav .submenu a{padding-right:28px}
}
.logo{display:flex;align-items:center;gap:0}

/* LANG-SWITCH */

/* Language switcher */
.lang-switch{background:#d4a017;color:#fff !important;padding:2px 10px;border-radius:4px;font-weight:600}
.lang-switch:hover{background:#fff;color:#0a4d2e !important}

/* ============================================
   RTL ENHANCEMENTS — FULL LAYOUT POLISH
   ============================================ */
html{direction:rtl}
body{direction:rtl;text-align:right}

/* Topbar — use logical properties so spacing flips properly */
.topbar a{margin-left:0;margin-inline-start:14px}
.topbar .container{flex-direction:row}
.topbar .container > div:first-child{order:1}
.topbar .container > div:last-child{order:2;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.topbar i{margin-inline-end:4px}

/* Header — logo on right, nav on left for natural RTL flow */
.header-inner{flex-direction:row}
.logo{flex-direction:row;text-align:right;gap:10px}
.logo .brand{text-align:right}
.logo .brand small{text-align:right}

/* Nav — items flow RTL */
nav ul{flex-direction:row;justify-content:flex-end}
nav a{text-align:center}

/* Dropdown caret spacing in RTL */
nav li.has-sub > a .fa-caret-down{margin-left:0;margin-inline-start:4px}

/* Submenu opens aligned to right edge of parent in RTL */
nav .submenu{right:auto;inset-inline-start:0;text-align:right}

/* Icon cards — proper RTL text */
.icon-card{text-align:center}
.icon-card .icon{margin-inline:auto}

/* Card bodies left-align fix for RTL */
.card-body{text-align:right}
.card-body .btn{align-self:flex-end}

/* Two-column: image right, text left in RTL (reverse order) */
.two-col > *:first-child{order:2}
.two-col > *:last-child{order:1}
@media(max-width:980px){.two-col > *{order:0 !important}}

/* Page head */
.page-head{text-align:center}
.crumb i,.crumb .fa{margin-inline:4px}

/* Section text */
section .lead{text-align:center}
section p{text-align:right;line-height:2.1}
section ul,section ol{padding-right:24px;padding-left:0;text-align:right}
section ul li,section ol li{margin-bottom:6px;line-height:2}

/* Verse box border on the right (already set) reinforced */
.verse{border-right:6px solid #d4a017;border-left:0;text-align:center}

/* Forms - already RTL, reinforce */
form.contact{text-align:right}
form.contact label{text-align:right}
form.contact .btn{align-self:flex-end}

/* Footer - proper RTL */
footer{text-align:right}
footer h4{text-align:right}
footer ul{padding:0}
footer a{text-align:right}
footer .socials{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
footer .socials a{margin-left:0;margin-right:0}
.copy{text-align:center}

/* Floating WhatsApp on left for RTL (already) */
.float-wa{left:24px;right:auto}

/* Language switcher icon spacing */
.lang-switch i{margin-inline-end:4px}

/* CTA strip RTL */
.cta-strip{text-align:center}
.cta-strip p{text-align:center}

/* Headings and body line-height for Nastaliq */
h1,h2,h3,h4,h5,h6{line-height:1.9}
p{line-height:2.1}

/* Buttons icon spacing */
.btn i{margin-inline-end:6px}

/* Mobile header polish */
@media(max-width:720px){
  .header-inner{flex-wrap:nowrap}
  .logo{flex:1;min-width:0}
  .logo .brand{font-size:.95rem;overflow:hidden;text-overflow:ellipsis}
  nav{right:0;left:0;text-align:right}
  nav ul{flex-direction:column;align-items:stretch}
  nav a{text-align:right;padding:12px 16px}
  nav li.has-sub > a .fa-caret-down{float:left;margin-top:6px}
  .topbar{font-size:.78rem}
  .topbar .container{justify-content:center;gap:6px}
  .topbar a{margin-inline-start:8px}
  .lang-switch{padding:3px 10px;font-size:.85rem}
}

/* Tablet polish */
@media(max-width:980px) and (min-width:721px){
  nav ul{justify-content:flex-end;flex-wrap:wrap}
}

/* Scrollbar tracks RTL */
html{scrollbar-gutter:stable}