/* ============================================================
   ASKARI RABBIT FARMS — Global Stylesheet
   Brand Design System v1.0
   ============================================================ */

/* ---------- Google Fonts Import ---------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&family=Noto+Nastaliq+Urdu:wght@400;700&family=Noto+Naskh+Arabic:wght@400;500;700&family=Noto+Kufi+Arabic:wght@400;600;700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&display=swap');

/* ---------- CSS Custom Properties (Design Tokens) ---------- */
:root {
  /* Brand Colors */
  --color-forest-green:   #214D32;
  --color-dark-forest:    #163824;
  --color-warm-white:     #F8F7F3;
  --color-pure-white:     #FFFFFF;
  --color-wood-brown:     #7A5736;
  --color-golden-brown:   #A77A42;
  --color-rose-gold:      #B76E79;

  /* Text Colors */
  --color-text-primary:   #2E2E2E;
  --color-text-secondary: #6C6C6C;
  --color-text-light:     #9C9C9C;

  /* Border */
  --color-border:         #ECECEC;

  /* Typography */
  --font-heading:   'Playfair Display', Georgia, serif;
  --font-body:      'Inter', system-ui, sans-serif;
  --font-urdu:      'Noto Nastaliq Urdu', serif;
  --font-arabic-heading: 'Noto Kufi Arabic', sans-serif;
  --font-arabic-body:    'Noto Naskh Arabic', serif;
  --font-zh-heading: 'Noto Serif SC', serif;
  --font-zh-body:    'Noto Sans SC', sans-serif;

  /* Type Scale */
  --text-hero:      clamp(42px, 6vw, 72px);
  --text-page:      clamp(36px, 4.5vw, 52px);
  --text-section:   clamp(28px, 3.5vw, 42px);
  --text-sub:       26px;
  --text-card:      22px;
  --text-body:      18px;
  --text-small:     16px;
  --text-caption:   14px;

  /* Spacing (8-point system) */
  --sp-8:   8px;
  --sp-16:  16px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-64:  64px;
  --sp-80:  80px;
  --sp-96:  96px;
  --sp-120: 120px;
  --sp-160: 160px;

  /* Section Padding */
  --section-py:     var(--sp-120);

  /* Layout */
  --max-width:      1440px;
  --content-width:  1280px;

  /* Radii */
  --radius-btn:     8px;
  --radius-card:    12px;
  --radius-form:    10px;
  --radius-img:     16px;

  /* Shadows */
  --shadow-card:    0 10px 30px rgba(0,0,0,0.06);
  --shadow-nav:     0 2px 20px rgba(0,0,0,0.08);

  /* Transitions */
  --transition-btn: 250ms ease;
  --transition-nav: 300ms ease;
  --transition-hover: 200ms ease;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-text-primary);
  background-color: var(--color-warm-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-hero); font-weight: 700; }
h2 { font-size: var(--text-section); font-weight: 700; }
h3 { font-size: var(--text-card); font-weight: 600; }

p {
  max-width: 72ch;
  color: var(--color-text-secondary);
}

/* ---------- Layout Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--sp-80);
}

.section {
  padding: var(--section-py) 0;
}

.section--dark {
  background-color: var(--color-dark-forest);
  color: var(--color-pure-white);
}

.section--green {
  background-color: var(--color-forest-green);
  color: var(--color-pure-white);
}

.section--white {
  background-color: var(--color-pure-white);
}

.section__header {
  margin-bottom: var(--sp-64);
}

/* ---------- Export Pricing: Currency Toggle ---------- */
.price-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--sp-16);
}

.price-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  background: var(--color-pure-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 8px 6px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.price-toggle__label {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.price-toggle__btn {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.price-toggle__btn:hover {
  color: var(--color-forest-green);
}

.price-toggle__btn.is-active {
  background: var(--color-forest-green);
  color: #fff;
}

.price-rate-note {
  font-size: 12px;
  color: var(--color-text-light);
  white-space: nowrap;
  padding-left: var(--sp-8);
}

@media (max-width: 600px) {
  .price-toolbar { justify-content: center; }
  .price-toggle { padding: 6px 10px; }
}

.section__label {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-golden-brown);
  margin-bottom: var(--sp-16);
}

.section__title {
  font-size: var(--text-section);
  margin-bottom: var(--sp-16);
}

.section__subtitle {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-width: 60ch;
}

.section--dark .section__label,
.section--green .section__label {
  color: var(--color-golden-brown);
}

.section--dark .section__title,
.section--green .section__title {
  color: var(--color-pure-white);
}

.section--dark .section__subtitle,
.section--green .section__subtitle {
  color: rgba(255,255,255,0.75);
}

.text-center { text-align: center; }
.text-center p { margin: 0 auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 14px 32px;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all var(--transition-btn);
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary {
  background-color: var(--color-forest-green);
  color: var(--color-pure-white);
}
.btn--primary:hover {
  background-color: var(--color-golden-brown);
  transform: translateY(-1px);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-forest-green);
  border: 1.5px solid var(--color-forest-green);
}
.btn--secondary:hover {
  background-color: var(--color-forest-green);
  color: var(--color-pure-white);
}

.btn--white {
  background-color: var(--color-pure-white);
  color: var(--color-forest-green);
}
.btn--white:hover {
  background-color: var(--color-golden-brown);
  color: var(--color-pure-white);
}

.btn--outline-white {
  background-color: transparent;
  color: var(--color-pure-white);
  border: 1.5px solid rgba(255,255,255,0.6);
}
.btn--outline-white:hover {
  background-color: var(--color-pure-white);
  color: var(--color-forest-green);
}

/* ---------- Cards ---------- */
.card {
  background: var(--color-pure-white);
  border-radius: var(--radius-card);
  padding: var(--sp-32);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-hover), box-shadow var(--transition-hover);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.10);
}

.card__icon {
  width: 48px;
  height: 48px;
  color: var(--color-forest-green);
  margin-bottom: var(--sp-24);
  stroke-width: 1.5;
}

.card__title {
  font-size: var(--text-card);
  margin-bottom: var(--sp-8);
  color: var(--color-text-primary);
}

.card__text {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: none;
}

/* ---------- Grid Systems ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-32);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-64);
  align-items: center;
}

.grid-2--55-45 {
  grid-template-columns: 55fr 45fr;
}

/* ---------- Navigation ---------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 80px;
  display: flex;
  align-items: center;
  transition: background var(--transition-nav), box-shadow var(--transition-nav);
}

.navbar.transparent {
  background: transparent;
}

.navbar.scrolled {
  background: var(--color-pure-white);
  box-shadow: var(--shadow-nav);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* Deliberately wider than the site's --content-width (1280px): with only
     the logo and the nav+lang+contact cluster as the two children, space-
     between needs real breathing room to leave the middle open, or the two
     groups just end up touching. */
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--sp-80);
}

.navbar__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.navbar__logo img {
  height: 48px;
  width: auto;
  flex-shrink: 0;
  background: var(--color-pure-white);
  border-radius: 8px;
  padding: 3px;
}

/* Euroasia logo is already transparent — no white backing box needed,
   and a touch smaller so the Askari logo stays the primary mark. */
.navbar__logo-euroasia {
  height: 40px !important;
  width: auto;
  flex-shrink: 0;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.navbar__logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navbar__logo-name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-pure-white);
  line-height: 1;
  transition: color var(--transition-nav);
}

.navbar__logo-sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  transition: color var(--transition-nav);
}

.navbar.scrolled .navbar__logo-name { color: var(--color-forest-green); }
.navbar.scrolled .navbar__logo-sub  { color: var(--color-text-light); }

/* Groups the nav links + language/contact button into one right-aligned
   cluster (see .navbar__menu below), while .navbar__inner's space-between
   keeps the logo pinned to the far left — leaving open space in the
   middle instead of the three items spreading evenly across the bar. */
.navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--sp-40);
}

.navbar__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-40);
}

.navbar__link {
  font-size: var(--text-small);
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  position: relative;
  transition: color var(--transition-hover);
}

.navbar__link::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1.5px;
  background: var(--color-golden-brown);
  transition: width var(--transition-btn);
}

.navbar__link:hover,
.navbar__link.active {
  color: var(--color-pure-white);
}

.navbar__link:hover::after,
.navbar__link.active::after {
  width: 100%;
}

.navbar.scrolled .navbar__link {
  color: var(--color-text-secondary);
}

.navbar.scrolled .navbar__link:hover,
.navbar.scrolled .navbar__link.active {
  color: var(--color-forest-green);
}

.navbar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  flex-shrink: 0;
}

.navbar__lang {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.8);
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  font-family: var(--font-body);
  transition: all var(--transition-hover);
}

.navbar__lang:hover {
  background: rgba(255,255,255,0.15);
  color: white;
}

.navbar.scrolled .navbar__lang {
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.navbar__contact-btn {
  padding: 10px 22px;
  font-size: var(--text-caption);
  font-weight: 600;
}

/* Mobile hamburger */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 2px;
}

.navbar__hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--color-pure-white);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.navbar.scrolled .navbar__hamburger span {
  background: var(--color-forest-green);
}

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-dark-forest);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-menu.open {
  display: flex;
  opacity: 1;
  pointer-events: all;
}

.mobile-menu__link {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-pure-white);
  transition: color var(--transition-hover);
}

.mobile-menu__link:hover { color: var(--color-golden-brown); }

.mobile-menu__close {
  position: absolute;
  top: 58px;
  right: 32px;
  color: white;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 125vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg video,
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(22, 56, 36, 0.72) 0%,
    rgba(22, 56, 36, 0.45) 60%,
    rgba(22, 56, 36, 0.25) 100%
  );
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--sp-80);
  width: 100%;
}

.hero__label {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-golden-brown);
  margin-bottom: var(--sp-24);
  display: block;
}

.hero__title {
  font-size: var(--text-hero);
  color: var(--color-pure-white);
  max-width: 14ch;
  margin-bottom: var(--sp-24);
  line-height: 1.05;
}

.hero__subtitle {
  font-size: var(--text-body);
  color: rgba(255,255,255,0.85);
  max-width: 55ch;
  margin-bottom: var(--sp-40);
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  gap: var(--sp-16);
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  bottom: var(--sp-40);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  color: rgba(255,255,255,0.6);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__scroll-icon {
  width: 26px; height: 40px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 13px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
}

.hero__scroll-dot {
  width: 4px; height: 8px;
  background: rgba(255,255,255,0.7);
  border-radius: 2px;
  animation: scrollDot 2s ease-in-out infinite;
}

@keyframes scrollDot {
  0%   { transform: translateY(0); opacity: 1; }
  80%  { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---------- Page Hero Banner (inner pages) ---------- */
.page-hero {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  padding-top: 120px;
  padding-bottom: var(--sp-64, 4rem);
  overflow: hidden;
  box-sizing: border-box;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
}

.page-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(22,56,36,0.5) 0%, rgba(22,56,36,0.85) 100%);
}

.page-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--content-width, 1100px);
  margin: 0 auto;
  /* Use a fluid fallback for horizontal padding so it shrinks cleanly on smartphones */
  padding: 0 var(--sp-80, 5rem);
  width: 100%;
  box-sizing: border-box;
}

.page-hero__label {
  display: block;
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-golden-brown);
  margin-bottom: var(--sp-16, 1rem);
}

.page-hero__title {
  font-size: var(--text-page);
  color: var(--color-pure-white);
  margin-bottom: var(--sp-16, 1rem);
}

.page-hero__subtitle {
  font-size: var(--text-body);
  color: rgba(255,255,255,0.8);
  max-width: 55ch;
}


/* ---------- Two-Column Image + Text ---------- */
.split {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--sp-80);
  align-items: center;
}

.split--reverse {
  grid-template-columns: 45fr 55fr;
}

.split--reverse .split__image { order: 2; }
.split--reverse .split__text  { order: 1; }

.split__image img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: var(--radius-img);
}

.split__text .section__label { display: block; }

.split__text h2 {
  margin-bottom: var(--sp-24);
}

.split__text p {
  margin-bottom: var(--sp-24);
  max-width: none;
}

.split__text .btn { margin-top: var(--sp-8); }

/* ---------- Vision / Full-Width Banner ---------- */
.vision-banner {
  position: relative;
  padding: var(--sp-160) 0;
  text-align: center;
  overflow: hidden;
}

.vision-banner__bg {
  position: absolute;
  inset: 0;
}

.vision-banner__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.vision-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(22,56,36,0.82);
}

.vision-banner__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--sp-80);
}

.vision-banner__content h2 {
  color: var(--color-pure-white);
  font-size: var(--text-section);
  margin-bottom: var(--sp-32);
}

.vision-banner__content p {
  color: rgba(255,255,255,0.85);
  font-size: var(--text-body);
  line-height: 1.8;
  max-width: none;
  margin: 0 auto;
}

/* ---------- Testimonial Marquee ---------- */
.testimonials {
  background: var(--color-forest-green);
  padding: var(--sp-48) 0;
  overflow: hidden;
}

.testimonials__track {
  display: flex;
  gap: var(--sp-80);
  animation: marquee 55s linear infinite;
  width: max-content;
}

.testimonials__track:hover { animation-play-state: paused; }

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.testimonial-item {
  display: flex;
  align-items: center;
  gap: var(--sp-32);
  white-space: nowrap;
  flex-shrink: 0;
}

.testimonial-item__stars {
  color: var(--color-golden-brown);
  font-size: 14px;
  letter-spacing: 3px;
}

.testimonial-item__text {
  font-size: var(--text-small);
  color: rgba(255,255,255,0.9);
  font-style: italic;
  max-width: none;
}

.testimonial-item__sep {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}

/* ---------- CTA Banner ---------- */
.cta-banner {
  background: var(--color-warm-white);
  padding: var(--sp-96) 0;
  text-align: center;
  border-top: 1px solid var(--color-border);
}

.cta-banner h2 {
  font-size: var(--text-section);
  margin-bottom: var(--sp-16);
}

.cta-banner p {
  color: var(--color-text-secondary);
  margin: 0 auto var(--sp-40);
}

.cta-banner__actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-16);
  flex-wrap: wrap;
}

/* ---------- Stats Strip ---------- */
.stats-strip {
  background: var(--color-forest-green);
  padding: 35px;
}

.stats-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-32);
  text-align: center;
}

.stat__number {
  font-family: var(--font-heading);
  font-size: 52px;
  font-weight: 700;
  color: var(--color-pure-white);
  line-height: 1;
}

.stat__number span {
  color: var(--color-golden-brown);
}

.stat__label {
  font-size: var(--text-small);
  color: rgba(255,255,255,0.75);
  margin-top: var(--sp-8);
  letter-spacing: 0.04em;
}

/* ---------- 2x2 Feature Grid ---------- */ 
.feature-grid { 
  display: grid; 
  /* Force exactly 2 equal columns, allowing them to shrink if the screen gets smaller */
  grid-template-columns: repeat(2, 1fr); 
  gap: var(--sp-32, 2rem); 
  max-width: 1000px; 
  margin: 0 auto; 
  justify-content: center; 
  align-items: stretch; 
} 

.feature-grid .card { 
  height: 100%; 
  display: flex;
  flex-direction: column;
}

/* Only collapse to a single column on mobile devices (under 400px) */
@media (max-width: 400px) { 
  .feature-grid { 
    grid-template-columns: 1fr; 
  } 
}

/* ---------- 5x1 Horizontal Services Banner ---------- */
.services-banner-grid {
  display: grid;
  /* Use auto-fit with a smaller minimum size so they fit comfortably on mid-sized screens */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-16, 1rem);
  max-width: 1200px;
  margin: 0 auto 48px auto;
  justify-content: center;
  align-items: stretch;
}

.service-banner-card {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 1.5rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  
  /* Smooth animation transitions for the hover effect */
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
              box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              border-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Elegant Floating Hover Effect */
.service-banner-card:hover {
  transform: translateY(-4px); /* Gently lifts the card up */
  border-color: #1b4d3e; /* Highlights the border using your brand green */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); /* Soft drop shadow depth */
  cursor: pointer;
}

.service-banner-card__icon {
  color: #1b4d3e;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

/* Subtle icon pop on hover */
.service-banner-card:hover .service-banner-card__icon {
  transform: scale(1.1);
}

.service-banner-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.35rem;
  color: #333333;
}

.service-banner-card__subtitle {
  font-size: 0.75rem;
  color: #777777;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* ---------- Responsive Breakpoints ---------- */
@media (max-width: 600px) {
  /* Only stack them into rows on real mobile phone widths */
  .services-banner-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Gallery Grid ---------- */
.gallery-grid {
  columns: 3;
  column-gap: var(--sp-16);
}

.gallery-grid__item {
  break-inside: avoid;
  margin-bottom: var(--sp-16);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  cursor: pointer;
}

.gallery-grid__item img {
  width: 100%;
  transition: transform 0.5s ease;
  border-radius: var(--radius-card);
}

.gallery-grid__item:hover img {
  transform: scale(1.04);
}

.gallery-grid__item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(22,56,36,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  border-radius: var(--radius-card);
}

.gallery-grid__item:hover .gallery-grid__item__overlay {
  background: rgba(22,56,36,0.4);
}

.gallery-grid__item__overlay svg {
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-grid__item:hover .gallery-grid__item__overlay svg {
  opacity: 1;
}

/* Gallery Filters */
.gallery-filters {
  display: flex;
  gap: var(--sp-8);
  margin-bottom: var(--sp-48);
  flex-wrap: wrap;
}

.gallery-filter-btn {
  padding: 10px 24px;
  border-radius: 40px;
  font-size: var(--text-small);
  font-weight: 600;
  border: 1.5px solid var(--color-border);
  background: var(--color-pure-white);
  color: var(--color-text-secondary);
  transition: all var(--transition-btn);
  cursor: pointer;
  font-family: var(--font-body);
}

.gallery-filter-btn:hover,
.gallery-filter-btn.active {
  background: var(--color-forest-green);
  border-color: var(--color-forest-green);
  color: white;
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.lightbox.open { display: flex; }

.lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-card);
  object-fit: contain;
}

.lightbox__close {
  position: absolute;
  top: var(--sp-24);
  right: var(--sp-24);
  color: white;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 24px;
  transition: background var(--transition-hover);
}

.lightbox__close:hover { background: rgba(255,255,255,0.2); }

/* ---------- FAQ Accordion ---------- */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-24) 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text-primary);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  gap: var(--sp-24);
  transition: color var(--transition-hover);
}

.faq-item__question:hover { color: var(--color-forest-green); }

.faq-item__icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 1.5px solid var(--color-forest-green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-forest-green);
  font-size: 16px;
  transition: transform 0.3s ease;
}

.faq-item.open .faq-item__icon {
  transform: rotate(45deg);
  background: var(--color-forest-green);
  color: white;
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-item.open .faq-item__answer {
  max-height: 300px;
  padding-bottom: var(--sp-24);
}

.faq-item__answer p {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.7;
  max-width: none;
}

/* ---------- Contact Form ---------- */
.contact-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-80);
  align-items: start;
}

.contact-form {
  background: var(--color-pure-white);
  border-radius: var(--radius-card);
  padding: var(--sp-48);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
}

.contact-form h2 {
  font-size: 32px;
  margin-bottom: var(--sp-8);
}

.contact-form__subtitle {
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-40);
  font-size: var(--text-small);
  max-width: none;
}

.form-group {
  margin-bottom: var(--sp-24);
}

.form-group label {
  display: block;
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-8);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-form);
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-text-primary);
  background: var(--color-warm-white);
  transition: border-color var(--transition-hover), box-shadow var(--transition-hover);
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-forest-green);
  box-shadow: 0 0 0 3px rgba(33,77,50,0.08);
  background: var(--color-pure-white);
}

.form-group textarea {
  height: 140px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
}

.form-success {
  display: none;
  text-align: center;
  padding: var(--sp-40);
  color: var(--color-forest-green);
}

.form-success svg {
  width: 56px; height: 56px;
  margin: 0 auto var(--sp-16);
  color: var(--color-forest-green);
}

.form-success h3 { color: var(--color-forest-green); margin-bottom: var(--sp-8); }
.form-success p  { color: var(--color-text-secondary); max-width: none; }

/* ---------- Creative Dropdown Enhancements ---------- */
.form-group select.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Smooth Forest Green chevron background icon.
     NOTE: the xmlns must be the full "http://www.w3.org/2000/svg" URI —
     a shortened/incorrect xmlns makes the browser treat the whole data
     URI as invalid, so the background-image silently fails to render
     and the select is left with no arrow at all. */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23214D32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 16px;
  padding-right: 48px;
  cursor: pointer;
  transition: border-color var(--transition-hover), box-shadow var(--transition-hover), background-color var(--transition-hover);
}

.form-group select.custom-select:hover {
  border-color: var(--color-forest-green);
  background-color: var(--color-pure-white);
}

.form-group select.custom-select:focus {
  border-color: var(--color-forest-green);
  box-shadow: 0 0 0 3px rgba(33,77,50,0.08);
  background-color: var(--color-pure-white);
}

/* Fallback padding tweaks for dropdown list elements on supported browsers */
.form-group select.custom-select option {
  padding: 12px;
  background-color: var(--color-pure-white);
  color: var(--color-text-primary);
}

.form-group select.custom-select option:disabled {
  color: var(--color-text-secondary);
}

/* Mirror the chevron to the reading-start side (left) for Urdu, matching
   every other left/right-aware element on the page. */
html[dir="rtl"] .form-group select.custom-select {
  background-position: left 18px center;
  padding-right: 18px;
  padding-left: 48px;
}

/* Contact Info Side */
.contact-info {
  padding-top: var(--sp-16);
}

.contact-info h3 {
  font-size: 28px;
  margin-bottom: var(--sp-32);
}

.contact-info-item {
  display: flex;
  gap: var(--sp-16);
  margin-bottom: var(--sp-32);
  align-items: flex-start;
}

.contact-info-item__icon {
  width: 48px; height: 48px;
  background: rgba(33,77,50,0.08);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-forest-green);
  flex-shrink: 0;
}

.contact-info-item__label {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 4px;
}

.contact-info-item__value {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-primary);
}

.contact-info-item__value a {
  color: var(--color-forest-green);
  transition: color var(--transition-hover);
}

.contact-info-item__value a:hover { color: var(--color-golden-brown); }


/* ---------- Retained Original Clean Rounded Rabbit Head Map Styles ---------- */
.rabbit-map-wrapper {
  position: relative;
  width: 100%;
  height: 420px;
  background: #f4f6f4;
  overflow: hidden;

  -webkit-mask: url(#rabbit-head-mask);
  mask: url(#rabbit-head-mask);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.25));
}

/* Rabbit Head Framed Border */
.rabbit-map-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #7A5736;

  -webkit-mask: url(#rabbit-head-mask);
  mask: url(#rabbit-head-mask);
  z-index: 0;
}

/* Protected Embedded Inner Map Display */
.rabbit-map-wrapper iframe {
  position: absolute;
  inset: 4px; 
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border: none;

  -webkit-mask: url(#rabbit-head-mask);
  mask: url(#rabbit-head-mask);
  object-fit: cover;
  z-index: 1;
}


/* ---------- Timeline ---------- */
.timeline {
  position: relative;
  padding-left: var(--sp-40);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px; top: 0; bottom: 0;
  width: 2px;
  background: var(--color-border);
}

.timeline-item {
  position: relative;
  padding-bottom: var(--sp-48);
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: '';
  position: absolute;
  left: -36px; top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-forest-green);
  border: 3px solid var(--color-warm-white);
  box-shadow: 0 0 0 2px var(--color-forest-green);
}

.timeline-item__year {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-golden-brown);
  text-transform: uppercase;
  margin-bottom: var(--sp-8);
}

.timeline-item h3 {
  font-size: 20px;
  margin-bottom: var(--sp-8);
}

.timeline-item p {
  font-size: var(--text-small);
  max-width: none;
}

/* ---------- Alternating Sections (Farm Page) ---------- */
.alternating-section {
  padding: var(--sp-80) 0;
  border-bottom: 1px solid var(--color-border);
}

.alternating-section:last-child { border-bottom: none; }

/* ---------- Breeds / Services Detail ---------- */
.service-detail {
  background: var(--color-pure-white);
  border-radius: var(--radius-card);
  padding: var(--sp-48);
  border: 1px solid var(--color-border);
  margin-bottom: var(--sp-32);
}

.service-detail__header {
  display: flex;
  gap: var(--sp-24);
  align-items: flex-start;
  margin-bottom: var(--sp-24);
}

.service-detail__icon {
  width: 56px; height: 56px;
  background: rgba(33,77,50,0.08);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-forest-green);
  flex-shrink: 0;
}

.service-detail__title { font-size: 24px; margin-bottom: 4px; }
.service-detail__subtitle { font-size: var(--text-caption); color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Footer ---------- */
.footer {
  background: var(--color-dark-forest);
  padding: var(--sp-80) 0 0;
  color: rgba(255,255,255,0.75);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-64);
  padding-bottom: var(--sp-64);
}

.footer__brand h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--color-pure-white);
  margin-bottom: 4px;
}

.footer__logos {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--sp-24);
}

.footer__logos img {
  height: 56px;
  width: auto;
  background: var(--color-pure-white);
  border-radius: 8px;
  padding: 4px;
}

.footer__brand-sub {
  font-size: var(--text-caption);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-16);
}

.footer__brand p {
  font-size: var(--text-small);
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  max-width: 34ch;
}

.footer__social {
  display: flex;
  gap: var(--sp-12);
  margin-top: var(--sp-24);
}

.footer__social a {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: all var(--transition-hover);
}

.footer__social a:hover {
  background: var(--color-forest-green);
  color: white;
}

.footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-pure-white);
  margin-bottom: var(--sp-24);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.footer__links a {
  font-size: var(--text-small);
  color: rgba(255,255,255,0.65);
  transition: color var(--transition-hover);
}

.footer__links a:hover { color: var(--color-golden-brown); }

.footer__contact-item {
  display: flex;
  gap: var(--sp-12);
  align-items: center;
  font-size: var(--text-small);
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--sp-12);
}

.footer__contact-item svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--color-golden-brown);
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: var(--sp-24) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-caption);
  color: rgba(255,255,255,0.4);
  flex-wrap: wrap;
  gap: var(--sp-16);
}

.footer__bottom a {
  color: rgba(255,255,255,0.4);
  transition: color var(--transition-hover);
}

.footer__bottom a:hover { color: rgba(255,255,255,0.7); }

/* ---------- Language Modal ---------- */
.lang-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.lang-modal.open { display: flex; }

.lang-modal__card {
  background: var(--color-pure-white);
  border-radius: 20px;
  padding: var(--sp-64);
  text-align: center;
  max-width: 440px;
  width: 90%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 40px 80px rgba(0,0,0,0.2);
}

.lang-modal__card h2 {
  font-size: 32px;
  margin-bottom: var(--sp-8);
}

.lang-modal__card p {
  color: var(--color-text-secondary);
  margin: 0 auto var(--sp-40);
  font-size: var(--text-small);
}

.lang-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
}

.lang-option {
  padding: var(--sp-16) var(--sp-24);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  cursor: pointer;
  transition: all var(--transition-btn);
  background: var(--color-warm-white);
  font-family: var(--font-body);
}

.lang-option:hover {
  border-color: var(--color-forest-green);
  background: rgba(33,77,50,0.06);
}

.lang-option__flag { font-size: 24px; }
.lang-option__name { font-size: var(--text-small); font-weight: 600; color: var(--color-text-primary); }
.lang-option__native { font-size: var(--text-caption); color: var(--color-text-light); }

/* ---------- 404 Page ---------- */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-80);
}

.error-page__rabbit {
  font-size: 80px;
  margin-bottom: var(--sp-32);
  line-height: 1;
}

.error-page h1 {
  font-size: 80px;
  color: var(--color-forest-green);
  line-height: 1;
  margin-bottom: var(--sp-16);
}

.error-page h2 {
  font-size: 28px;
  margin-bottom: var(--sp-16);
}

.error-page p {
  color: var(--color-text-secondary);
  margin: 0 auto var(--sp-40);
}

/* ---------- Fade-In Animation ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-up-delay-1 { transition-delay: 0.1s; }
.fade-up-delay-2 { transition-delay: 0.2s; }
.fade-up-delay-3 { transition-delay: 0.3s; }
.fade-up-delay-4 { transition-delay: 0.4s; }
.fade-up-delay-5 { transition-delay: 0.5s; }

/* ---------- Responsive (Unified Bottom Sections) ---------- */
@media (max-width: 1100px) {
  :root { --section-py: var(--sp-80); }

  .container { padding: 0 var(--sp-48); }
  .navbar__inner { padding: 0 var(--sp-48); }
  .hero__content { padding: 0 var(--sp-48); }
  .page-hero__content { padding: 0 var(--sp-48); }
  .vision-banner__content { padding: 0 var(--sp-48); }

  /* Tighten the nav's internal gaps in the narrow desktop/tablet range
     (just above the 900px hamburger breakpoint) so the logo + full link
     row + lang/contact button still fit without wrapping or overlapping. */
  .navbar__nav,
  .navbar__menu { gap: var(--sp-24); }
  .navbar__logo-text { display: none; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-48); }
  .stats-strip__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* Global mobile navbar standardization across ALL pages */
  .navbar__nav,
  .navbar__logo-text,
  .navbar__right .navbar__contact-btn { 
    display: none !important; 
  }

  .navbar__inner { 
    padding: 0 1.5rem !important; 
  }

  .navbar__logo-euroasia { height: 32px !important; }
  .navbar__logo { gap: 8px !important; }

  /* Groups EN + Hamburger tightly on the right across all inner pages */
  .navbar__inner,
  .navbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .navbar__right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    margin-left: auto !important; /* Forces the right-snap look onto inner pages */
  }

  .navbar__right .navbar__lang { 
    display: inline-block !important; 
  }
  
  .navbar__hamburger { 
    display: flex !important; 
  }

  /* Grid layouts */
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-2,
  .split,
  .split--reverse,
  .contact-section { grid-template-columns: 1fr; gap: var(--sp-40); }

  .split--reverse .split__image { order: 0; }
  .split--reverse .split__text  { order: 0; }

  .split__image img { height: 380px; }
  .gallery-grid { columns: 2; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Consolidated 768px inner page hero layout fixes */
@media (max-width: 768px) {
  .page-hero {
    min-height: 280px !important;
    padding-top: 100px !important;
    padding-bottom: 2rem !important;
    height: auto !important; /* Breaks the old fixed height limitation */
  }
  
  .page-hero__content {
    padding: 0 1.5rem !important;
  }
  
  .page-hero__title {
    font-size: 1.8rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .page-hero__subtitle {
    font-size: 0.95rem !important;
  }
}

@media (max-width: 600px) {
  :root { --section-py: var(--sp-64); }

  .container { padding: 0 1.5rem; }
  
  .grid-3 { grid-template-columns: 1fr; }
  .gallery-grid { columns: 1; }
  .form-row { grid-template-columns: 1fr; }
  .stats-strip__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .hero__actions { flex-direction: column; }
  .lang-options { grid-template-columns: 1fr; }
  .contact-form { padding: var(--sp-32); }
}

/* ---------- Print / Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   RTL SUPPORT (Urdu & Arabic)
   Activated automatically when the i18n engine (js/main.js) sets
   <html lang="ur|ar" dir="rtl">. Keeps the overall grid/flex structure
   intact but mirrors text flow, spacing, and icon/text ordering so
   Urdu/Arabic read naturally right-to-left. Fonts are language-specific
   (see below) rather than shared, since Nastaliq's calligraphic style
   is written for Urdu and isn't how standard Arabic is normally set.
   ============================================================ */
html[dir="rtl"] body {
  direction: rtl;
}

/* ---- Urdu font (Nastaliq) ---- */
html[lang="ur"] body {
  font-family: 'Noto Nastaliq Urdu', var(--font-body);
}

html[lang="ur"] h1,
html[lang="ur"] h2,
html[lang="ur"] h3,
html[lang="ur"] h4 {
  font-family: 'Noto Nastaliq Urdu', var(--font-heading);
  /* Nastaliq's diagonal, stacked letterforms need much more vertical room
     than the site's default 1.1 heading line-height, or the tops/tails of
     the script collide with whatever sits directly above or below it.
     Applied to every heading level so the fix carries through every
     section — hero, page banners, section titles, card titles, service
     titles — not just the homepage hero. */
  line-height: 1.9;
}

/* ---- Arabic font (Naskh body / Kufi headings) ---- */
html[lang="ar"] body {
  font-family: var(--font-arabic-body);
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
  font-family: var(--font-arabic-heading);
  line-height: 1.6;
}

/* ---- Chinese (Mandarin) font — left-to-right, no dir change needed ---- */
html[lang="zh"] body {
  font-family: var(--font-zh-body);
}

html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3,
html[lang="zh"] h4 {
  font-family: var(--font-zh-heading);
  line-height: 1.5;
}

/* Text alignment */
html[dir="rtl"] .hero__content,
html[dir="rtl"] .page-hero__content,
html[dir="rtl"] .section__header,
html[dir="rtl"] .card__text,
html[dir="rtl"] .card__title,
html[dir="rtl"] .contact-form,
html[dir="rtl"] .footer__brand,
html[dir="rtl"] .timeline-item__content {
  text-align: right;
}

/* Center-aligned sections should stay centered even in RTL */
html[dir="rtl"] .section__header.text-center,
html[dir="rtl"] .cta-banner,
html[dir="rtl"] .stats-strip {
  text-align: center;
}

/* Icon + text rows: reverse order so icons stay on the reading-start side */
html[dir="rtl"] .footer__contact-item,
html[dir="rtl"] .contact-info-item,
html[dir="rtl"] .navbar__logo,
html[dir="rtl"] .social-links,
html[dir="rtl"] .lang-option {
  flex-direction: row-reverse;
}

/* Navbar: mirror the link order and spacing */
html[dir="rtl"] .navbar__nav,
html[dir="rtl"] .navbar__right,
html[dir="rtl"] .hero__actions,
html[dir="rtl"] .cta-banner__actions,
html[dir="rtl"] .footer__bottom {
  flex-direction: row-reverse;
}

/* Mobile menu slides from the opposite side in RTL.
   NOTE: only the slide direction is mirrored here — `inset: 0` from the
   base .mobile-menu rule already pins all four edges (top/right/bottom/left)
   so the panel spans the full viewport. Do NOT override left/right below,
   or the panel loses its right (or left) edge and shrinks to fit its
   content instead of covering the whole screen. */
html[dir="rtl"] .mobile-menu {
  transform: translateX(-100%);
}
html[dir="rtl"] .mobile-menu.open {
  transform: translateX(0);
}

/* Nastaliq needs extra clearance not just on the line-height itself but
   on the gaps around it: eyebrow labels sitting above a heading, and
   subtitles/taglines sitting directly below one, both need a wider
   margin than the Latin-script default or the tall script still visually
   crowds its neighbour. Covers every label/title/subtitle pairing used
   across the site (hero, inner-page banners, section headers, service
   cards, service detail rows) so the fix is consistent everywhere, not
   just the homepage. */
html[dir="rtl"] .hero__label {
  margin-bottom: var(--sp-32);
}

html[dir="rtl"] .hero__title {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-32);
}

html[dir="rtl"] .page-hero__label {
  margin-bottom: var(--sp-24, 1.5rem);
}

html[dir="rtl"] .page-hero__title {
  margin-top: var(--sp-8);
}

html[dir="rtl"] .section__label {
  margin-bottom: var(--sp-24);
}

html[dir="rtl"] .section__title {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-24);
}

html[dir="rtl"] .card__title {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-16);
}

html[dir="rtl"] .service-banner-card__title {
  line-height: 1.9;
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-8);
}

html[dir="rtl"] .service-detail__title {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-16);
}

html[dir="rtl"] .service-detail__subtitle {
  margin-top: var(--sp-4, 4px);
}

html[dir="rtl"] .contact-form h2,
html[dir="rtl"] .contact-info h3 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-16);
}

html[dir="rtl"] .form-success h3 {
  margin-top: var(--sp-8);
}

/* FAQ / timeline markers */
html[dir="rtl"] .faq-item__question {
  text-align: right;
  flex-direction: row-reverse;
}
html[dir="rtl"] .timeline-item {
  text-align: right;
}

@media (max-width: 900px) {
  html[dir="rtl"] .navbar__nav,
  html[dir="rtl"] .navbar__right,
  html[dir="rtl"] .hero__actions,
  html[dir="rtl"] .cta-banner__actions,
  html[dir="rtl"] .footer__bottom {
    flex-direction: column;
  }

  /* The homepage hero is vertically centered (.hero uses
     align-items: center). Urdu's taller headings + wider line-height make
     the hero content noticeably taller, which pushes its top edge further
     up — on short mobile viewports that top edge lands underneath the
     fixed, transparent navbar, so the "ABBOTTABAD, KPK" label and the
     hamburger/logo bar overlap. Anchoring the content to the top with
     fixed clearance (instead of centering it) keeps it reliably below the
     navbar regardless of how tall the translated text ends up being. */
  /* Urdu's taller line-height (1.9, set above for Nastaliq) also makes the
     hero content taller overall than the fixed 125vh hero box can hold on
     short mobile viewports. Since .hero clips overflow (for the bg video/
     image), that extra height was getting cut off at the bottom, along
     with the "Contact Us" button and scroll indicator that sit below the
     visible edge. Switching to an auto/min height lets the box grow to
     fit however tall the Urdu content ends up being, and the added
     bottom padding keeps the scroll indicator clear of the content above
     it instead of stacking directly on top. This only changes the Urdu
     (RTL) hero on mobile — the English hero's fixed-height, vertically
     centered layout is untouched. */
  html[dir="rtl"] .hero {
    align-items: flex-start;
    height: auto;
    min-height: 750px;
    padding-bottom: 130px;
  }

  html[dir="rtl"] .hero__content {
    padding-top: 140px;
  }
}

/* Spanish and French hero titles/subtitles run noticeably longer than the
   English copy, so on mobile the vertically centered hero content
   (.hero uses align-items: center) grows tall enough that its top edge
   rises up underneath the fixed, transparent navbar — overlapping the
   "ABBOTTABAD, KPK" label and the language toggle. Anchoring the content
   to the top with fixed clearance (the same fix already used for Urdu
   above) keeps it reliably below the navbar. This targets only es/fr on
   mobile and leaves the English hero's centered layout untouched. */
@media (max-width: 900px) {
  html[lang="es"] .hero,
  html[lang="fr"] .hero {
    align-items: flex-start;
    height: auto;
    min-height: 950px;
    padding-bottom: 130px;
  }

  html[lang="es"] .hero__content,
  html[lang="fr"] .hero__content {
    padding-top: 140px;
  }
}