:root{
--bg:#ffffff;
--ink:#070A0F;
--muted:#56627A;
--green:#1E8C6A;
--green2:#0C6A55;
--gold:#D8B15A;
--gold2:#B78422;
--surface:#F6F8FB;
--surface2:#EEF4FF;
--line:#E2EAF6;
--shadow:0 22px 70px rgba(7,10,15,.12);
--shadow2:0 14px 35px rgba(7,10,15,.10);
--shadowInset:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(7,10,15,.06);
--radius:20px;
--radius2:26px;
--max:1180px;
--glowGreen:0 0 0 6px rgba(30,140,106,.10), 0 22px 60px rgba(30,140,106,.12);
--glowGold:0 0 0 6px rgba(216,177,90,.10), 0 22px 60px rgba(216,177,90,.14);
--arab:url('assets/arabesque.svg');
--bgGlow:url('assets/bg_glow.jpg');
--shimmer:url('assets/shimmer.svg');
}
*{box-sizing:border-box}html,body{
font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans Arabic",sans-serif;
color:var(--ink);
background:
  radial-gradient(900px 520px at 18% -10%, rgba(30,140,106,.14), transparent 60%),
  radial-gradient(900px 520px at 88% -5%, rgba(216,177,90,.14), transparent 55%),
  var(--bgGlow),
  var(--bg);
background-size:auto,auto,cover,auto;
background-attachment:scroll,scroll,fixed,scroll;
}
body{
font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans Arabic",sans-serif;
color:var(--ink);
background:
  radial-gradient(900px 520px at 18% -10%, rgba(30,140,106,.14), transparent 60%),
  radial-gradient(900px 520px at 88% -5%, rgba(216,177,90,.14), transparent 55%),
  var(--bgGlow),
  var(--bg);
background-size:auto,auto,cover,auto;
background-attachment:scroll,scroll,fixed,scroll;
}
a{color:inherit;text-decoration:none}.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
.topbar{background:linear-gradient(90deg, rgba(30,140,106,.10), rgba(216,177,90,.10));border-bottom:1px solid var(--line)}
.topbar .row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0;font-size:14px}
.badge{display:inline-flex;align-items:center;gap:10px;padding:7px 12px;border:1px solid rgba(30,140,106,.22);border-radius:999px;background:#fff}
.badge strong{color:var(--green)}.rtl{direction:rtl;text-align:right}
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.80);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand img{width:44px;height:44px;object-fit:contain;border-radius:12px;border:1px solid var(--line);background:#fff}
.brand .t{display:flex;flex-direction:column;line-height:1.05}
.brand .t b{letter-spacing:.6px}.brand .t small{color:var(--muted);font-weight:600}
.menu{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-weight:800;font-size:14px}
.menu a{padding:9px 10px;border-radius:12px}.menu a:hover{background:var(--surface);color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:14px;font-weight:900;
border:1px solid rgba(216,177,90,.42);background:linear-gradient(135deg, rgba(216,177,90,.18), rgba(30,140,106,.12));
box-shadow:0 12px 26px rgba(11,15,22,.08)}.btn:hover{transform:translateY(-1px)}
.btn.secondary{border:1px solid var(--line);background:#fff}
.hero{padding:34px 0 18px}.heroGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
@media(max-width:920px){.heroGrid{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.heroText{padding:22px}.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--green);font-weight:1000;letter-spacing:.9px;
text-transform:uppercase;font-size:12px}.kicker img{width:18px;height:18px}
h1{margin:10px 0 10px;font-size:42px;line-height:1.02}@media(max-width:520px){h1{font-size:34px}}
.sub{color:var(--muted);line-height:1.6;font-size:16px}
.bismi{margin-top:14px;padding:14px 16px;border-radius:16px;border:1px solid rgba(216,177,90,.30);
background:linear-gradient(135deg, rgba(216,177,90,.10), rgba(30,140,106,.08))}
.bismi .ar{font-weight:900;font-size:18px}.bismi .tr{color:var(--muted);margin-top:6px;font-size:13px}
.ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.heroArt{min-height:320px;background:radial-gradient(800px 400px at 10% 0%, rgba(30,140,106,.22), transparent 60%),
radial-gradient(800px 400px at 90% 10%, rgba(216,177,90,.18), transparent 55%), url("assets/hero.jpg");
background-size:cover;background-position:center;position:relative}
.heroArt .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.85))}
.heroArt .stamp{position:absolute;right:16px;top:16px;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;
background:rgba(255,255,255,.88);border:1px solid var(--line)}
.heroArt .stamp img{width:40px;height:40px}.heroArt .stamp b{display:block}.heroArt .stamp small{color:var(--muted);font-weight:700}
.section{padding:14px 0}.sectionTitle{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:12px 0}
.sectionTitle h2{margin:0;font-size:22px}.sectionTitle span{color:var(--muted);font-weight:800;font-size:13px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media(max-width:920px){.grid3{grid-template-columns:1fr}}
.padded{padding:18px}.pillRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pill{padding:9px 12px;border-radius:999px;font-weight:800;font-size:13px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.cities{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}@media(max-width:920px){.cities{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cities{grid-template-columns:1fr}}
.city{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 26px rgba(11,15,22,.06)}
.thumb{height:138px;background:#0b0f16;background-size:cover;background-position:center}
.cityIn{padding:12px 12px 14px}.cityIn b{display:block}.cityIn small{color:var(--muted);font-weight:700}
.cityIn a{display:inline-flex;gap:8px;align-items:center;margin-top:8px;color:var(--green);font-weight:900}
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:920px){.formGrid{grid-template-columns:1fr}}
label{display:block;margin:10px 0 6px;font-weight:900;color:var(--muted);font-size:12px}
input,select,textarea{width:100%;padding:12px 12px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--ink);outline:none}
textarea{min-height:120px;resize:vertical}
.footer{margin-top:18px;border-top:1px solid var(--line);padding:22px 0;color:var(--muted)}
.footer .row{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-weight:700}
.small{font-size:13px}
.notice{padding:12px 14px;border:1px dashed rgba(30,140,106,.35);border-radius:16px;background:rgba(30,140,106,.06);color:var(--muted);font-weight:700}

/* Premium */
.heroArt{background-image:
  radial-gradient(900px 450px at 10% 0%, rgba(30,140,106,.22), transparent 60%),
  radial-gradient(900px 450px at 90% 10%, rgba(216,177,90,.18), transparent 55%),
  linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.95)),
  var(--arab),
  url("assets/hero.jpg");
  background-blend-mode:normal,normal,normal,multiply,normal;
}
.card{transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 26px 75px rgba(11,15,22,.14)}
.btn{transition:transform .12s ease, filter .12s ease}
.btn:hover{filter:saturate(1.1)}
.fadeIn{animation:fadeIn .55s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}


/* ===== PREMIUM WOW LAYER ===== */
::selection{background:rgba(216,177,90,.28)}
a{transition:color .15s ease, background .15s ease, transform .15s ease}
.nav{background:rgba(255,255,255,.78);backdrop-filter:blur(14px);border-bottom:1px solid rgba(226,234,246,.9)}
.brand img{box-shadow:var(--shadow2)}
.menu a{position:relative}
.menu a:after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;border-radius:999px;transform:scaleX(0);transform-origin:left;
background:linear-gradient(90deg, rgba(30,140,106,.0), rgba(30,140,106,.55), rgba(216,177,90,.55), rgba(216,177,90,0));
transition:transform .18s ease}
.menu a:hover:after{transform:scaleX(1)}
.btn{
position:relative;
border:1px solid rgba(216,177,90,.55);
background:linear-gradient(135deg, rgba(216,177,90,.22), rgba(30,140,106,.14));
box-shadow:var(--shadow2), var(--shadowInset);
}
.btn:before{
content:"";position:absolute;inset:-2px;border-radius:16px;padding:2px;
background:linear-gradient(135deg, rgba(216,177,90,.65), rgba(30,140,106,.55));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
opacity:.55;pointer-events:none
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow), var(--glowGold)}
.btn.secondary{background:linear-gradient(180deg,#fff, #fff);border:1px solid rgba(226,234,246,1)}
.btn.secondary:hover{box-shadow:var(--shadow2), var(--glowGreen)}

.card{
background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86));
border:1px solid rgba(226,234,246,.95);
border-radius:var(--radius2);
box-shadow:var(--shadow), var(--shadowInset);
}
.card:hover{transform:translateY(-3px);box-shadow:0 30px 90px rgba(7,10,15,.14), var(--shadowInset)}
.kicker{letter-spacing:1.2px}

h1{
font-size:46px;
letter-spacing:-.8px;
background:linear-gradient(90deg, rgba(7,10,15,1), rgba(30,140,106,1));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
@media(max-width:520px){h1{font-size:36px}}
.sub{font-size:16px}

.heroArt{
background-image:
  radial-gradient(900px 450px at 10% 0%, rgba(30,140,106,.22), transparent 60%),
  radial-gradient(900px 450px at 90% 10%, rgba(216,177,90,.18), transparent 55%),
  linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.92)),
  var(--shimmer),
  var(--arab),
  url("assets/hero.jpg");
background-blend-mode:normal,normal,normal,screen,multiply,normal;
}
.heroArt .stamp{box-shadow:var(--shadow2);border:1px solid rgba(226,234,246,.9)}
.bismi{
box-shadow:var(--shadow2);
border:1px solid rgba(216,177,90,.32);
}
.bismi .ar{font-size:20px}
.bismi .tr{opacity:.95}

.city{box-shadow:var(--shadow2);border:1px solid rgba(226,234,246,.95)}
.thumb{position:relative}
.thumb:after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.22));
opacity:.55
}
.cityIn a{color:var(--green2)}
.cityIn a:hover{transform:translateX(2px)}

.notice{
background:linear-gradient(135deg, rgba(30,140,106,.07), rgba(216,177,90,.08));
border:1px dashed rgba(30,140,106,.35);
}

.fadeIn{animation:fadeIn .6s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}