/* =========================================================
   القرية — Alqariah  |  base.css  (shared across all pages)
   Brand: blue #1b75bc · green #8dc63f · orange #f7941e
   Variables, resets, buttons, preloader, nav, section
   heading, footer, generic reveals, reduced-motion.
   ========================================================= */

:root{
  --blue:#1b75bc;
  --blue-dark:#13568c;
  --navy:#0a2a47;
  --green:#8dc63f;
  --green-dark:#5fa12a;
  --teal:#14b8a6;
  --orange:#f7941e;
  --coral:#ff7a59;

  --ink:#13314c;
  --muted:#6a7d8e;
  --paper:#f3f8fd;     /* soft tinted base, not raw white */
  --mint:#eafaf3;
  --sky:#e8f3fc;
  --cream:#fff6e9;
  --white:#ffffff;
  --line:#e2edf6;

  --radius:26px;
  --radius-sm:16px;
  --shadow:0 26px 60px -28px rgba(10,42,71,.45);
  --shadow-soft:0 14px 36px -20px rgba(10,42,71,.32);
  --ease:cubic-bezier(.22,.61,.36,1);

  --font-ar:"Tajawal",system-ui,sans-serif;
  --font-en:"Poppins",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ar);color:var(--ink);line-height:1.75;
  background:var(--paper);overflow-x:hidden;
}
body.is-en{font-family:var(--font-en);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

body.lang-swap{animation:wipe .5s var(--ease)}
@keyframes wipe{from{opacity:.4;filter:blur(3px)}to{opacity:1;filter:none}}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.9em 1.9em;border-radius:999px;font-weight:800;font-size:1rem;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s;
  will-change:transform;position:relative;overflow:hidden;
}
.btn--primary{background:linear-gradient(120deg,var(--blue),var(--teal));color:#fff;box-shadow:0 16px 30px -12px var(--blue)}
.btn--primary:hover{box-shadow:0 22px 40px -12px var(--blue)}
.btn--ghost{background:rgba(255,255,255,.7);color:var(--blue);border:2px solid var(--line);backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:var(--blue);background:#fff}
.btn--cta{background:linear-gradient(120deg,var(--orange),var(--coral));color:#fff;box-shadow:0 16px 30px -12px var(--orange)}
.btn--cta::after{content:"";position:absolute;inset:0;transform:translateX(-130%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
.btn--cta:hover::after{animation:shine .8s var(--ease)}
@keyframes shine{to{transform:translateX(130%)}}

/* green "About" button — slightly darker shade of rgb(55,193,133) */
.btn--about{background:rgb(46,168,115);color:#fff;
  box-shadow:0 16px 30px -12px rgb(46,168,115)}
.btn--about:hover{box-shadow:0 22px 40px -12px rgb(46,168,115)}

/* pop + shine on hover — same behaviour as the nav pill buttons */
.btn--pop::after{content:"";position:absolute;inset:0;transform:translateX(-130%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}
.btn--pop:hover{transform:scale(1.09)}
.btn--pop:hover::after{animation:shine .8s var(--ease)}

/* =========================================================
   Preloader
   ========================================================= */
.preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 0%,var(--sky),var(--paper));
  transition:opacity .35s,visibility .35s}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__blob{position:absolute;width:160px;height:160px;border-radius:46% 54% 60% 40%/45% 45% 55% 55%;
  background:linear-gradient(120deg,var(--blue),var(--green));filter:blur(4px);opacity:.35;
  animation:morph 2.4s var(--ease) infinite,spin 6s linear infinite}
.preloader__logo{height:64px;position:relative;animation:pop .6s .2s var(--ease) both}
.preloader__txt{font-size:2.2rem;font-weight:900;color:var(--blue);position:relative;animation:pop .6s .2s var(--ease) both}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes morph{
  0%,100%{border-radius:46% 54% 60% 40%/45% 45% 55% 55%}
  50%{border-radius:60% 40% 45% 55%/55% 60% 40% 45%}}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================
   Nav
   ========================================================= */
/* --nav-pad drives the bar height; it inherits down so the mobile language
   toggle can line itself up with the bar in both the resting and scrolled state */
.nav{--nav-pad:16px;
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;padding:var(--nav-pad) 0;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);box-shadow:var(--shadow-soft);
  transition:background .3s,box-shadow .3s,padding .3s}
.nav.is-scrolled{--nav-pad:10px;background:rgba(255,255,255,.92)}
/* thin blue line at the bottom of the white bar */
.nav::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:2px;
  background:var(--blue);pointer-events:none}
.nav__inner{max-width:1260px;margin:0 auto;padding:0 24px;display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.nav__logo{flex-shrink:0}
.nav__logo img{height:46px;width:auto}
.nav__logo-txt{font-size:1.7rem;font-weight:900;color:var(--blue)}
/* margin-inline:auto splits the leftover space evenly on both sides,
   so the links sit in the middle of the bar instead of hugging the far edge */
.nav__menu{display:flex;align-items:center;gap:9px;margin-inline:auto}
.nav__link{font-weight:800;font-size:1rem;position:relative;overflow:hidden;white-space:nowrap;flex-shrink:0;
  padding:.6em 1.2em;border-radius:999px;border:2px solid var(--blue);
  background:var(--sky);color:var(--blue-dark);box-shadow:0 8px 18px -12px var(--blue);
  transition:transform .25s var(--ease),color .2s,background .25s var(--ease),box-shadow .25s var(--ease)}
.nav__link::after{content:"";position:absolute;inset:0;transform:translateX(-130%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}
/* gentler grow + hovered pill rises above its neighbours so long labels
   (e.g. "Complaints & Suggestions") never collide with the contact button */
.nav__link:hover{background:var(--blue);color:#fff;transform:scale(1.04);z-index:2;
  box-shadow:0 16px 32px -12px var(--blue)}
.nav__link:hover::after{animation:shine .8s var(--ease)}

/* standout Contact button — bright orange & bigger than the rest */
.nav__link--contact{background:#ff8a1e;
  color:#fff;border-color:transparent;font-size:1.05rem;padding:.7em 1.45em;
  box-shadow:0 14px 28px -10px rgba(255,138,30,.8)}
.nav__link--contact:hover{background:#ff7a08;
  color:#fff;transform:scale(1.06);z-index:2;box-shadow:0 20px 38px -10px rgba(255,138,30,.9)}

.lang{display:flex;align-items:center;background:var(--line);border-radius:999px;padding:3px;gap:2px;flex-shrink:0}
.lang__opt{font-size:.8rem;font-weight:800;border-radius:999px;color:var(--muted);
  min-width:2.6em;height:1.9em;display:inline-flex;align-items:center;justify-content:center;
  line-height:1;transition:background .25s,color .25s,box-shadow .25s}
/* each option keeps its own font no matter which language the page is in,
   so the "ع" and "EN" glyphs never change shape when the site switches */
.lang__opt[data-lang="ar"]{font-family:var(--font-ar)}
.lang__opt[data-lang="en"]{font-family:var(--font-en)}
.lang__opt.is-active{background:#fff;color:var(--blue);box-shadow:var(--shadow-soft)}

.nav__burger{display:none;flex-direction:column;gap:5px;padding:8px}
.nav__burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mid-size: keep the links on one row but shrink them before collapsing */
@media(max-width:1150px) and (min-width:981px){
  .nav__inner{gap:10px}
  .nav__menu{gap:6px}
  .nav__link{font-size:.82rem;padding:.48em .9em}
  .nav__link--contact{font-size:.86rem;padding:.5em 1em}
  .nav__logo img{height:40px}
}

@media(max-width:980px){
  .nav__burger{display:flex;z-index:10;position:relative}
  /* Overlay sits above the nav's blue underline so it never shows through.
     It slides in on inset-block-start rather than a transform: the language
     toggle below is a fixed-position child, and a transformed ancestor would
     become its containing block — chaining the toggle to the overlay's animated
     transform and letting the panel paint out of step with where it hit-tests. */
  .nav__menu{position:fixed;inset-inline:0;inset-block-start:-110vh;height:100vh;width:100vw;z-index:5;
    flex-direction:column;align-items:center;justify-content:center;gap:20px;
    background:linear-gradient(160deg,#fff,var(--sky));padding:44px;box-shadow:var(--shadow);
    transition:inset-block-start .4s var(--ease)}
  .nav__menu.is-open{inset-block-start:0}
  .nav__link{font-size:1.15rem;width:min(320px,80%);text-align:center;white-space:normal}
  .nav__menu .btn--cta{margin-top:6px}

  /* The AR/EN toggle stays the one and only #langToggle in the markup; on phones
     it is lifted out of the overlay's flow and pinned into the top bar so it is
     reachable without opening the burger. .nav has backdrop-filter, which makes
     it the containing block for fixed descendants, so these insets are measured
     from the header bar itself — the toggle tracks the bar as it shrinks on
     scroll, and the overlay (no longer an ancestor that positions it) keeps its
     plain flex layout. Logical insets mirror it for RTL and LTR. */
  #langToggle{position:fixed;z-index:6;
    inset-block-start:calc(var(--nav-pad) + 8px);   /* centred on the 46px bar row */
    inset-inline-end:74px;                          /* clears the 40px burger + gap */
    transition:inset-block-start .3s}
}

/* =========================================================
   Section heading
   ========================================================= */
.head{text-align:center;max-width:680px;margin:0 auto 54px;opacity:0;transform:translateY(24px);
  transition:.7s var(--ease)}
.head.in-view{opacity:1;transform:none}
.head__kicker{color:var(--green-dark);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem}
.head__title{font-size:clamp(2rem,4.6vw,3rem);font-weight:900;color:var(--navy);margin:8px 0}
.head__sub{color:var(--muted)}

/* =========================================================
   Footer
   ========================================================= */
.footer{background:var(--navy);color:#bcd6ec;padding:64px 24px 26px}
.footer__grid{max-width:1100px;margin:0 auto;display:grid;gap:36px;grid-template-columns:1.4fr 1fr 1fr}
.footer__logo{height:54px;margin-bottom:14px;background:#fff;padding:10px 14px;border-radius:14px}
.footer__logo-txt{font-size:1.8rem;font-weight:900;color:#fff;display:block;margin-bottom:12px}
.footer__col h4{color:#fff;margin-bottom:14px;font-size:1.05rem}
.footer__col a{display:block;padding:5px 0;color:#90b4d4;transition:color .2s}
.footer__col a:hover{color:var(--green)}
.footer__soc{display:flex;align-items:center;gap:10px}
.footer__soc svg{width:17px;height:17px;flex-shrink:0}
.footer__bottom{max-width:1100px;margin:42px auto 0;padding-top:20px;text-align:center;
  border-top:1px solid rgba(255,255,255,.12);font-size:.88rem;color:#7ea3c4}
@media(max-width:680px){.footer__grid{grid-template-columns:1fr;text-align:center}
  .footer__logo{margin-inline:auto}
  .footer__soc{justify-content:center}}

/* =========================================================
   Generic reveal-up
   ========================================================= */
.reveal-up{opacity:0;transform:translateY(34px);transition:.7s var(--ease)}
.reveal-up.in-view{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal>span{transform:none}
}