/* ==========================================================
   AlZahrani & Partners Travel Agency — Main Stylesheet
   Mobile-First | Gold & Navy | Agadir, Morocco
   ========================================================== */

/* ─── Variables ─────────────────────────────────────────── */
:root {
  --gold:        #D4AF37;
  --gold-dark:   #B8941F;
  --gold-light:  #F4E4BC;
  --gold-pale:   #FDF8E7;
  --navy:        #0d1642;
  --navy-mid:    #1a237e;
  --navy-light:  #1e2d8a;
  --white:       #ffffff;
  --cream:       #FAFAF7;
  --text:        #2c3e50;
  --text-muted:  #6b7280;
  --border:      #e5e0d0;
  --shadow-sm:   0 2px 8px rgba(13,22,66,.08);
  --shadow-md:   0 8px 30px rgba(13,22,66,.14);
  --shadow-lg:   0 20px 60px rgba(13,22,66,.2);
  --radius:      12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --transition:  .3s ease;
  --navbar-h:    70px;
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'Tajawal', sans-serif;
  background:var(--cream);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
  min-height:100vh;
}
img { max-width:100%; height:auto; display:block; }
a  { text-decoration:none; color:inherit; }
button { font-family:'Tajawal', sans-serif; }
input, select, textarea { font-family:'Tajawal', sans-serif; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--navy); }
::-webkit-scrollbar-thumb { background:var(--gold); border-radius:3px; }

/* ─── Loader ─────────────────────────────────────────────── */
.loader {
  position:fixed; inset:0; background:var(--navy); z-index:9999;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
.loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner  { text-align:center; }
.loader-logo   { font-size:2.2rem; font-weight:900; color:var(--gold); margin-bottom:18px; letter-spacing:3px; }
.loader-bar    { width:180px; height:4px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden; margin:0 auto; }
.loader-progress { height:100%; width:0; background:var(--gold); animation:loadProg 1.4s ease forwards; }
@keyframes loadProg { to { width:100%; } }

/* ─── Navbar ─────────────────────────────────────────────── */
.navbar {
  position:fixed; top:0; width:100%; z-index:1000;
  padding:0; height:var(--navbar-h);
  transition:background var(--transition), box-shadow var(--transition);
  background:transparent;
}
.navbar.scrolled {
  background:rgba(13,22,66,.97);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow-md);
}
.nav-container {
  max-width:1400px; margin:0 auto; padding:0 20px;
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo {
  display:flex; align-items:center; gap:10px;
  color:var(--white); font-weight:900; font-size:1.25rem; flex-shrink:0;
}
.logo-icon {
  width:40px; height:40px; flex-shrink:0;
  background:linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; box-shadow:0 4px 15px rgba(212,175,55,.4);
}
.nav-links {
  display:flex; list-style:none; gap:28px; align-items:center;
}
.nav-links a {
  color:var(--white); font-weight:600; font-size:.97rem;
  position:relative; padding:4px 0; transition:color var(--transition);
  white-space:nowrap;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; right:0;
  width:0; height:2px; background:var(--gold); transition:width var(--transition);
}
.nav-links a:hover, .nav-links a.active { color:var(--gold); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-reserve-btn { white-space:nowrap; }
.mobile-menu-btn {
  display:none; background:none; border:none;
  color:var(--white); font-size:1.6rem; cursor:pointer; padding:8px 10px;
  line-height:1; border-radius:8px;
  transition:background .2s;
}
.mobile-menu-btn:hover,
.mobile-menu-btn:focus { background:rgba(255,255,255,.12); outline:none; }

/* Mobile Nav */
.nav-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:998;
}
.nav-overlay.active { display:block; }

@media(max-width:960px) {
  .mobile-menu-btn { display:block; }

  /* On mobile the navbar is never transparent — always has a dark backdrop
     so the hamburger icon is clearly visible on hero pages (page-hero is
     navy, hero slider is an image). Previously the navbar was transparent
     until the user scrolled, leaving a white-on-image hamburger that some
     users couldn't find. */
  .navbar {
    background: rgba(13,22,66,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .nav-links {
    position:fixed; top:0; right:-100%; width:82%; max-width:300px;
    height:100vh; background:var(--navy); z-index:999;
    flex-direction:column; justify-content:center; gap:6px;
    padding:80px 24px 40px;
    transition:right var(--transition);
    overflow-y:auto;
  }
  .nav-links.open { right:0; }
  .nav-links li { width:100%; }
  .nav-links a {
    font-size:1.1rem; padding:12px 0; display:block;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .nav-reserve-btn { display:none; }
}

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 26px; border-radius:50px;
  font-weight:700; font-size:.97rem; cursor:pointer;
  border:2px solid transparent; transition:all var(--transition);
  white-space:nowrap; text-align:center; justify-content:center;
}
.btn-gold {
  background:linear-gradient(135deg, var(--gold), var(--gold-dark));
  color:var(--navy);
}
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(212,175,55,.5); }
.btn-outline { background:transparent; border-color:var(--white); color:var(--white); }
.btn-outline:hover { background:var(--white); color:var(--navy); }
.btn-navy { background:var(--navy); color:var(--white); }
.btn-navy:hover { background:var(--navy-mid); transform:translateY(-2px); }
.btn-whatsapp { background:#25D366; color:var(--white); }
.btn-whatsapp:hover { background:#1ebe5d; }
.btn-facebook { background:#1877F2; color:var(--white); }
.btn-facebook:hover { background:#166fe5; }
.btn-sm { padding:8px 18px; font-size:.87rem; }
.btn-lg { padding:15px 36px; font-size:1.05rem; }
.btn-block { width:100%; }

/* ─── Flash Messages ─────────────────────────────────────── */
.site-flash {
  position:fixed; top:calc(var(--navbar-h) + 12px); right:16px; left:16px;
  z-index:2000; padding:13px 18px; border-radius:var(--radius);
  font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:10px;
  box-shadow:var(--shadow-md); animation:flashIn .35s ease;
  max-width:480px; margin:0 auto;
}
.site-flash button { background:none; border:none; cursor:pointer; font-size:1.2rem; flex-shrink:0; }
.alert-success { background:#d4edda; color:#155724; border-right:4px solid #28a745; }
.alert-error   { background:#f8d7da; color:#721c24; border-right:4px solid #dc3545; }
.alert-warning { background:#fff3cd; color:#856404; border-right:4px solid #ffc107; }
.alert-info    { background:#d1ecf1; color:#0c5460; border-right:4px solid #17a2b8; }
@keyframes flashIn { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }

/* ─── Hero ─────────────────────────────────────────────────── */
.hero {
  min-height:100vh; position:relative;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hero-slider { position:absolute; inset:0; z-index:0; }
.slide {
  position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center;
  transition:opacity 1.5s ease;
}
.slide.active { opacity:1; }
.slide::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(13,22,66,.3) 0%, rgba(13,22,66,.75) 100%);
}
.hero-content {
  position:relative; z-index:1; text-align:center;
  color:var(--white); padding:calc(var(--navbar-h) + 20px) 20px 80px;
  max-width:820px; animation:heroIn 1.2s ease; width:100%;
}
@keyframes heroIn { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
.hero-badge {
  display:inline-block; background:rgba(212,175,55,.2); border:1px solid var(--gold);
  color:var(--gold); padding:5px 18px; border-radius:50px; font-size:.88rem;
  font-weight:600; letter-spacing:1px; margin-bottom:18px;
}
.hero-title {
  font-size:clamp(1.9rem, 5.5vw, 4rem); font-weight:900;
  margin-bottom:18px; line-height:1.2; text-shadow:0 2px 20px rgba(0,0,0,.3);
}
.hero-title span { color:var(--gold); }
.hero-desc { font-size:clamp(.97rem, 2.5vw, 1.2rem); margin-bottom:28px; opacity:.9; }
.hero-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-dots {
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:1;
}
.dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:all var(--transition); }
.dot.active { background:var(--gold); width:28px; border-radius:5px; }

/* Hero Search */
.hero-search {
  background:rgba(255,255,255,.13); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-lg);
  padding:18px 20px; margin-top:30px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; align-items:end;
}
.search-field label { color:rgba(255,255,255,.85); font-size:.83rem; font-weight:600; display:block; margin-bottom:5px; }
.search-field select, .search-field input {
  width:100%; padding:10px 12px; border-radius:var(--radius);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  color:var(--white); font-size:.93rem; outline:none;
}
.search-field select option { color:var(--navy); background:var(--white); }
.search-field select:focus, .search-field input:focus { border-color:var(--gold); }

/* ─── Layout Helpers ─────────────────────────────────────── */
.section    { padding:75px 0; }
.section-sm { padding:50px 0; }
.container  { max-width:1400px; margin:0 auto; padding:0 20px; }
.section-header { text-align:center; margin-bottom:50px; }
.section-badge {
  display:inline-block; color:var(--gold); font-weight:700;
  font-size:.87rem; letter-spacing:3px; text-transform:uppercase; margin-bottom:10px;
}
.section-title { font-size:clamp(1.7rem, 3.5vw, 2.6rem); font-weight:900; color:var(--navy); margin-bottom:14px; line-height:1.3; }
.section-title span { color:var(--gold); }
.section-desc { color:var(--text-muted); font-size:1.05rem; max-width:580px; margin:0 auto; }
.divider { width:56px; height:4px; background:linear-gradient(to left, var(--gold), var(--gold-dark)); border-radius:2px; margin:14px auto 0; }

/* ─── Stats Strip ─────────────────────────────────────────── */
.stats-strip { background:linear-gradient(135deg, var(--navy), var(--navy-mid)); padding:38px 0; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:24px; text-align:center; }
.stat-item { color:var(--white); }
.stat-number { font-size:2.2rem; font-weight:900; color:var(--gold); line-height:1; }
.stat-label { font-size:.88rem; opacity:.8; margin-top:5px; }

/* ─── Package Cards ──────────────────────────────────────── */
.packages-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:24px; }
.package-card {
  background:var(--white); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:all var(--transition); display:flex; flex-direction:column;
}
.package-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.card-image { position:relative; height:210px; overflow:hidden; }
.card-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.package-card:hover .card-image img { transform:scale(1.07); }
.card-badge {
  position:absolute; top:12px; right:12px;
  background:var(--gold); color:var(--navy); padding:3px 12px;
  border-radius:50px; font-size:.78rem; font-weight:800;
}
.card-badge.vip { background:var(--navy); color:var(--gold); }
.card-body { padding:20px; flex:1; display:flex; flex-direction:column; }
.card-type { font-size:.78rem; color:var(--gold); font-weight:700; text-transform:uppercase; letter-spacing:2px; }
.card-title { font-size:1.15rem; font-weight:800; color:var(--navy); margin:7px 0 9px; }
.card-desc { color:var(--text-muted); font-size:.9rem; flex:1; margin-bottom:13px; }
.card-features { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.feature-tag { background:var(--gold-pale); color:var(--navy); padding:3px 10px; border-radius:20px; font-size:.78rem; font-weight:600; }
.card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--border); gap:8px; flex-wrap:wrap; }
.card-price { font-size:1.2rem; font-weight:900; color:var(--gold-dark); line-height:1.3; }
/* .price-sar removed — SAR display discontinued, MAD is sole currency */
.stars { color:var(--gold); font-size:.88rem; }

/* Share buttons on cards */
.card-share { display:flex; gap:6px; margin-top:10px; }
.card-share a {
  display:inline-flex; align-items:center; gap:4px; padding:5px 10px;
  border-radius:50px; font-size:.78rem; font-weight:700; transition:all var(--transition);
}

/* ─── Destinations Grid ──────────────────────────────────── */
.destinations-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:20px; }
.dest-card { position:relative; height:280px; border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; box-shadow:var(--shadow-sm); transition:all var(--transition); }
.dest-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.dest-card img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.dest-card:hover img { transform:scale(1.09); }
.dest-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,22,66,.85) 40%, transparent);
  display:flex; flex-direction:column; justify-content:flex-end; padding:20px;
}
.dest-badge { position:absolute; top:12px; left:12px; background:var(--gold); color:var(--navy); padding:3px 10px; border-radius:50px; font-size:.75rem; font-weight:800; }
.dest-name { font-size:1.25rem; font-weight:800; color:var(--white); margin-bottom:3px; }
.dest-price { color:var(--gold); font-weight:700; font-size:.9rem; }

/* ─── Features / Services ────────────────────────────────── */
.features-section { background:var(--navy); }
.features-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:24px; }
.feature-card {
  background:rgba(255,255,255,.05); border:1px solid rgba(212,175,55,.2);
  border-radius:var(--radius-lg); padding:28px 22px; text-align:center;
  transition:all var(--transition); color:var(--white);
}
.feature-card:hover { background:rgba(212,175,55,.1); border-color:var(--gold); transform:translateY(-4px); }
.feature-icon {
  width:62px; height:62px; border-radius:50%; margin:0 auto 16px;
  background:linear-gradient(135deg, var(--gold), var(--gold-dark));
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:var(--navy);
}
.feature-title { font-size:1.05rem; font-weight:800; margin-bottom:9px; }
.feature-desc  { font-size:.88rem; opacity:.75; }

/* ─── Testimonials ───────────────────────────────────────── */
.testimonials-section { background:var(--navy-mid); }
.testimonial-slider { position:relative; max-width:720px; margin:0 auto; }
.testimonial-card {
  background:rgba(255,255,255,.07); border:1px solid rgba(212,175,55,.25);
  border-radius:var(--radius-lg); padding:36px; color:var(--white);
}
.quote-icon { font-size:2.5rem; color:var(--gold); opacity:.4; }
.testimonial-text { font-size:1rem; line-height:1.9; margin:14px 0 20px; opacity:.9; }
.testimonial-author { display:flex; align-items:center; gap:14px; }
.author-avatar {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--gold), var(--gold-dark));
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:800; color:var(--navy);
}
.author-info h4 { font-weight:800; margin-bottom:3px; }
.author-info span { font-size:.83rem; opacity:.7; color:var(--gold); }
.testimonial-nav { display:flex; gap:10px; justify-content:center; margin-top:20px; }
.t-btn {
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.1);
  border:1px solid rgba(212,175,55,.3); color:var(--white); cursor:pointer;
  font-size:.97rem; transition:all var(--transition);
}
.t-btn:hover { background:var(--gold); color:var(--navy); border-color:var(--gold); }

/* ─── Contact Section ────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.contact-info-card {
  background:var(--navy); color:var(--white);
  border-radius:var(--radius-lg); padding:36px;
}
.contact-info-card h3 { font-size:1.5rem; font-weight:900; margin-bottom:7px; }
.contact-info-card > p { opacity:.8; margin-bottom:26px; }
.contact-item { display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.contact-icon {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:rgba(212,175,55,.18); border:1px solid rgba(212,175,55,.4);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:.97rem;
}
.contact-item h5 { font-weight:700; margin-bottom:3px; }
.contact-item span, .contact-item a { font-size:.9rem; opacity:.8; color:inherit; }
.contact-item a:hover { color:var(--gold); opacity:1; }

/* ─── Forms ──────────────────────────────────────────────── */
/* .form-card — full styles in reservation block below */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-weight:700; margin-bottom:6px; color:var(--navy); font-size:.93rem; }
.form-group label .req { color:#dc3545; margin-right:2px; }
.form-control {
  width:100%; padding:11px 14px; border:2px solid var(--border);
  border-radius:var(--radius); font-size:.97rem; color:var(--text);
  background:var(--white); transition:border-color var(--transition); outline:none;
  -webkit-appearance:none;
  /* BUG FIX: native <input type="date"> has an intrinsic minimum width on
     Chromium (reserves space for the calendar icon + mm/dd/yyyy placeholder).
     Without min-width:0 it refuses to shrink below that minimum and overflows
     its parent grid/flex column. Setting min-width:0 lets it shrink to fit. */
  min-width: 0;
}
.form-control:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.13); }
.form-control.is-error { border-color:#dc3545; }

/* Tighter padding on date/time inputs so the native calendar icon doesn't
   push the placeholder text out of the visible area in narrow columns. */
input.form-control[type="date"],
input.form-control[type="time"],
input.form-control[type="datetime-local"] {
  padding-left: 8px;
  padding-right: 12px;
}
.form-error { color:#dc3545; font-size:.83rem; margin-top:4px; display:block; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
textarea.form-control { resize:vertical; min-height:110px; }

/* ─── Reservation Page (legacy stubs — full styles in new block below) ─── */

/* ─── Packages Page ──────────────────────────────────────── */
.filter-bar {
  background:var(--white); border-radius:var(--radius-lg);
  padding:20px 24px; box-shadow:var(--shadow-sm); margin-bottom:28px;
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
}
.filter-group { flex:1; min-width:140px; }
.filter-group label { font-size:.83rem; font-weight:700; color:var(--navy); display:block; margin-bottom:5px; }

/* ─── Page Hero (inner pages) ────────────────────────────── */
.page-hero {
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  padding:calc(var(--navbar-h) + 40px) 0 50px; text-align:center; color:var(--white);
}
.page-hero h1 { font-size:clamp(1.7rem, 4vw, 2.8rem); font-weight:900; margin-bottom:10px; }
.page-hero p { opacity:.8; font-size:1.05rem; }
.breadcrumb { display:flex; gap:8px; justify-content:center; margin-top:12px; font-size:.88rem; opacity:.7; flex-wrap:wrap; }
.breadcrumb a { color:var(--gold); }

/* ─── Footer ─────────────────────────────────────────────── */
.footer { background:var(--navy); color:var(--white); }
.footer-top { padding:55px 0 36px; }
.footer-grid { display:grid; grid-template-columns:1.8fr repeat(3, 1fr); gap:36px; }
.footer-logo { display:flex; align-items:center; gap:10px; font-size:1.3rem; font-weight:900; margin-bottom:14px; }
.footer-brand p { font-size:.88rem; opacity:.75; line-height:1.7; max-width:280px; }
.social-links { display:flex; gap:8px; margin-top:18px; }
.social-links a {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center;
  color:var(--white); transition:all var(--transition); font-size:.9rem;
}
.social-links a:hover { background:var(--gold); border-color:var(--gold); color:var(--navy); }
.footer-col h4 { font-size:.97rem; font-weight:800; color:var(--gold); margin-bottom:14px; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:9px; }
.footer-col ul a { color:rgba(255,255,255,.7); font-size:.88rem; display:flex; align-items:center; gap:7px; transition:color var(--transition); }
.footer-col ul a:hover { color:var(--gold); }
.contact-list { list-style:none; }
.contact-list li { display:flex; align-items:center; gap:9px; margin-bottom:9px; font-size:.88rem; opacity:.8; }
.contact-list i { color:var(--gold); width:16px; flex-shrink:0; }
.contact-list a { color:inherit; transition:color var(--transition); }
.contact-list a:hover { color:var(--gold); opacity:1; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:18px 0; }
.footer-bottom-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.83rem; opacity:.65; }
.footer-location i { color:var(--gold); margin-left:4px; }

/* ─── WhatsApp FAB ───────────────────────────────────────── */
/* Positioned bottom-LEFT so it does NOT overlap back-to-top (bottom-right) */
.whatsapp-fab {
  position:fixed; bottom:24px; left:16px; z-index:900;
  display:flex; align-items:center; gap:8px;
  background:#25D366; color:var(--white);
  border-radius:50px; padding:10px 16px 10px 14px;
  font-weight:700; font-size:.88rem;
  box-shadow:0 4px 20px rgba(37,211,102,.45);
  transition:all var(--transition);
}
.whatsapp-fab:hover { background:#1ebe5d; transform:translateY(-2px); }
.whatsapp-fab i { font-size:1.3rem; }
/* On very small screens hide label */
@media(max-width:380px) { .whatsapp-fab-label { display:none; } }

/* ─── Back to Top ────────────────────────────────────────── */
.back-to-top {
  position:fixed; bottom:24px; right:16px; z-index:900;
  width:42px; height:42px; border-radius:50%; background:var(--navy);
  border:2px solid var(--gold); color:var(--gold); font-size:.97rem;
  cursor:pointer; opacity:0; visibility:hidden; transition:all var(--transition);
}
.back-to-top.visible { opacity:1; visibility:visible; }
.back-to-top:hover { background:var(--gold); color:var(--navy); }

/* ─── Pagination ─────────────────────────────────────────── */
.pagination-nav { display:flex; justify-content:center; margin-top:44px; }
.pagination { display:flex; list-style:none; gap:7px; flex-wrap:wrap; justify-content:center; }
.pagination li a, .pagination li span {
  display:flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 8px; border-radius:var(--radius);
  background:var(--white); color:var(--navy); font-weight:700;
  border:1px solid var(--border); transition:all var(--transition); font-size:.9rem;
}
.pagination li.active a, .pagination li a:hover { background:var(--gold); color:var(--navy); border-color:var(--gold); }

/* ─── Animations ─────────────────────────────────────────── */
.fade-in { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity:1; transform:none; }

/* ─── Badges ─────────────────────────────────────────────── */
.badge { display:inline-block; padding:3px 10px; border-radius:50px; font-size:.75rem; font-weight:700; }
.badge-warning  { background:#fff3cd; color:#856404; }
.badge-success  { background:#d4edda; color:#155724; }
.badge-danger   { background:#f8d7da; color:#721c24; }
.badge-info     { background:#d1ecf1; color:#0c5460; }
.badge-gold     { background:var(--gold-pale); color:var(--gold-dark); }

/* ─── Utility ────────────────────────────────────────────── */
.text-gold   { color:var(--gold); }
.text-navy   { color:var(--navy); }
.text-center { text-align:center; }
.mt-2 { margin-top:8px; }  .mt-4 { margin-top:16px; } .mt-6 { margin-top:24px; }
.mb-2 { margin-bottom:8px; } .mb-4 { margin-bottom:16px; } .mb-6 { margin-bottom:24px; }
.hidden { display:none !important; }
.loading-spinner {
  display:inline-block; width:20px; height:20px;
  border:2px solid rgba(255,255,255,.3); border-top-color:var(--white);
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.empty-state { text-align:center; padding:55px 20px; color:var(--text-muted); }
.empty-state i { font-size:2.8rem; margin-bottom:14px; color:var(--gold); opacity:.5; }
.empty-state h3 { font-size:1.25rem; color:var(--navy); margin-bottom:7px; }

/* ─── Price Display (MAD — Moroccan Dirham) ──────────────── */
.price-mad { font-size:1.15rem; font-weight:900; color:var(--gold-dark); }
.price-sar { display:none; } /* SAR hidden — prices now displayed in MAD only */

/* ─── Responsive ─────────────────────────────────────────── */
@media(max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .contact-grid { grid-template-columns:1fr; }
}
@media(max-width:768px) {
  .section { padding:50px 0; }
  .hero-search { grid-template-columns:1fr 1fr; }
  .packages-grid { grid-template-columns:1fr; }
  .destinations-grid { grid-template-columns:1fr 1fr; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .filter-bar { padding:16px; }
}
@media(max-width:560px) {
  .destinations-grid, .features-grid, .hero-search { grid-template-columns:1fr; }
  .hero-btns { flex-direction:column; align-items:center; }
  .footer-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .btn { font-size:.93rem; padding:11px 20px; }
  .card-footer { flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ═══════════════════════════════════════════════════════════════
   RESERVATION PAGE — Mobile-First Redesign
   ═══════════════════════════════════════════════════════════════ */

/* ── Section wrapper ── */
.reservation-section { background: #f7f8fc; padding: 40px 0 60px; }

/* ── Program Selector ── */
.prog-selector-wrap {
  margin-bottom: 36px;
}
.prog-selector-title {
  text-align: center;
  color: var(--navy);
  font-weight: 900;
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  margin-bottom: 6px;
}
.prog-selector-sub {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 24px;
  font-size: .95rem;
}
.prog-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
}

/* ── Program Card ── */
.prog-card {
  border: 2px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  cursor: pointer;
  transition: border-color .22s, box-shadow .22s, transform .18s;
  background: var(--white);
  position: relative;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.prog-card:hover  { border-color: rgba(196,160,80,.55); transform: translateY(-2px); }
.prog-card.selected {
  border-color: var(--gold);
  box-shadow: 0 4px 22px rgba(196,160,80,.22);
}
.prog-card-radio {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: border-color .2s;
}
.prog-card.selected .prog-card-radio { border-color: var(--gold); }
.prog-radio-inner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: transparent;
  transition: background .2s;
}
.prog-card.selected .prog-radio-inner { background: var(--gold); }
.prog-card-header { text-align: center; margin-bottom: 14px; }
.prog-badge {
  background: var(--gold);
  color: #fff;
  border-radius: 20px;
  padding: 3px 14px;
  font-size: .78rem;
  font-weight: 700;
}
.prog-card-name {
  margin: 8px 0 0;
  color: var(--navy);
  font-weight: 800;
  font-size: 1rem;
}
.prog-hotel-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px;
  background: var(--bg);
  border-radius: 10px;
}
.prog-hotel-icon { color: var(--gold); margin-top: 2px; flex-shrink: 0; }
.prog-hotel-city { font-weight: 700; font-size: .8rem; color: var(--text-muted); }
.prog-hotel-name { color: var(--navy); font-weight: 600; font-size: .9rem; }
.prog-hotel-dist { color: var(--text-muted); font-size: .78rem; margin-top: 2px; }
.prog-prices {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.prog-prices-label {
  font-weight: 700;
  font-size: .78rem;
  margin-bottom: 8px;
  color: var(--text-muted);
}
.prog-prices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.prog-price-chip {
  background: var(--bg);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: .8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.prog-price-room { color: var(--text-muted); }
.prog-price-val  { color: var(--gold); font-weight: 800; }
.prog-notes {
  margin-top: 10px;
  font-size: .8rem;
  color: var(--text-muted);
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* ── Reservation Layout (2-col desktop, 1-col mobile) ── */
.reservation-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .reservation-layout {
    grid-template-columns: 320px 1fr;
    align-items: start;
  }
  .res-summary-col { order: 1; }
  .res-form-col    { order: 2; }
}
/* On mobile: form first, summary below */
.res-summary-col { order: 2; }
.res-form-col    { order: 1; }

/* ── Booking Summary ── */
.booking-summary {
  background: var(--navy);
  color: #fff;
  border-radius: 18px;
  overflow: hidden;
  position: sticky;
  top: calc(var(--navbar-h) + 12px);
}
.booking-summary-header {
  background: rgba(212,175,55,.12);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--gold);
  font-size: 1.05rem;
}
.summary-items { padding: 8px 0; }
.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 22px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .88rem;
}
.summary-item:last-child { border-bottom: none; }
.summary-item .summary-label {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: .75;
  white-space: nowrap;
}
.summary-item .summary-label i { color: var(--gold); font-size: .8rem; }
.summary-item .summary-value {
  font-weight: 700;
  text-align: left;
  max-width: 180px;
  word-break: break-word;
}
.summary-total {
  background: rgba(212,175,55,.08);
  margin-top: 4px;
  padding: 14px 22px !important;
}
.summary-total .summary-label { font-weight: 700; opacity: 1; font-size: .92rem; }
.summary-total .summary-value { color: var(--gold); font-size: 1.15rem; font-weight: 900; }
.summary-note {
  font-size: .8rem;
  padding: 14px 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  opacity: .72;
  line-height: 1.6;
}
.summary-wa-link {
  color: #25d366;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Form Card ── */
.form-card {
  background: var(--white);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 4px 24px rgba(13,22,66,.08);
}
.form-card-title {
  color: var(--navy);
  font-weight: 900;
  margin-bottom: 22px;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-card-title i { color: var(--gold); }

/* ── Room Type Section ── */
.room-type-section {
  background: linear-gradient(135deg, #f0f4ff 0%, #fdf8e7 100%);
  border: 2px solid rgba(212,175,55,.25);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
  animation: slideDown .25s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.room-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 480px) {
  .room-type-grid { grid-template-columns: 1fr; }
}

/* ── Room Type Button ── */
.room-type-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  text-align: right;
  font-family: 'Tajawal', sans-serif;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
}
.room-type-btn:hover {
  border-color: rgba(212,175,55,.6);
  transform: translateY(-1px);
}
.room-type-btn.selected {
  border-color: var(--gold);
  background: rgba(212,175,55,.07);
  box-shadow: 0 3px 12px rgba(212,175,55,.2);
}
.room-type-icon {
  font-size: 1.1rem;
  color: var(--gold);
  margin-bottom: 2px;
}
.room-type-label {
  font-weight: 700;
  color: var(--navy);
  font-size: .9rem;
  line-height: 1.3;
}
.room-type-price {
  font-weight: 900;
  color: var(--gold);
  font-size: 1rem;
}
.room-type-price small {
  font-weight: 400;
  color: var(--text-muted);
  font-size: .75rem;
}

/* ── Travelers input with +/- ── */
.travelers-input-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s;
}
.travelers-input-wrap:focus-within { border-color: var(--gold); }
.travelers-btn {
  width: 44px;
  height: 46px;
  flex-shrink: 0;
  border: none;
  background: var(--bg);
  color: var(--navy);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s;
  -webkit-tap-highlight-color: transparent;
}
.travelers-btn:hover { background: rgba(212,175,55,.15); color: var(--gold); }
.travelers-btn:active { background: rgba(212,175,55,.25); }
.travelers-num {
  /* BUG FIX: the input was invisible between the +/- buttons because it had no
     explicit width/flex rule. In a flex container, a child without flex-basis or
     a width falls back to its content width — and with `width: 100%` inherited
     from .form-control it collapses (width:100% of the remaining 0 space).
     flex:1 makes it expand to fill the gap between the two buttons; min-width:0
     is required so flex shrink works correctly; font-size ensures the typed
     number is readable. */
  flex: 1;
  min-width: 0;
  width: auto;
  border: none !important;
  border-radius: 0 !important;
  text-align: center;
  box-shadow: none !important;
  padding: 11px 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  background: transparent;
  -moz-appearance: textfield;
}
.travelers-num:focus { outline: none; }
.travelers-num::-webkit-outer-spin-button,
.travelers-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Misc form helpers ── */
.label-opt { color: var(--text-muted); font-weight: 400; font-size: .82rem; }
.res-submit-btn { margin-top: 10px; font-size: 1.05rem; padding: 15px 24px; }
.res-submit-note { text-align: center; margin-top: 10px; font-size: .82rem; color: var(--text-muted); }

/* ── Alert inline ── */
.alert-inline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: .9rem;
  margin-bottom: 18px;
}
.alert-inline.error {
  background: #fef2f2;
  color: #7f1d1d;
  border: 1px solid #fecaca;
  border-right: 4px solid #ef4444;
}
.alert-inline i { margin-top: 2px; flex-shrink: 0; }

/* ── Mobile-first form adjustments ── */
@media (max-width: 560px) {
  .form-card { padding: 20px 16px; }
  .form-card-title { font-size: 1.1rem; }
  .booking-summary-header { padding: 13px 16px; }
  .summary-item { padding: 9px 16px; }
  .room-type-section { padding: 14px; }
  .room-type-btn { padding: 12px 14px; }
}

/* ── Collapsible summary on mobile ── */
@media (max-width: 899px) {
  .booking-summary {
    position: static;
    border-radius: 14px;
  }
  .booking-summary-header {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }
  .booking-summary-header::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: auto;
    transition: transform .25s;
  }
  .booking-summary.collapsed .booking-summary-header::after {
    transform: rotate(-90deg);
  }
  .booking-summary.collapsed .summary-items,
  .booking-summary.collapsed .summary-note {
    display: none;
  }
}

/* ── Sticky mobile summary bar at bottom of viewport ── */
/* BUG FIX: hide by default at ALL widths. The mobile rule below flips it back on.
   Previously, the bar was visible by default (browser default: display: block) and
   relied on a `min-width: 900px { display: none }` rule to hide it on desktop.
   That rule could be skipped by a cached/stale stylesheet or by odd viewport widths
   at the breakpoint boundary, causing the bar to render floating in the middle of
   the desktop layout. Hiding by default is safer and more predictable. */
.res-sticky-total { display: none; }

@media (max-width: 899px) {
  .res-sticky-total {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--navy);
    color: #fff;
    padding: 10px 20px env(safe-area-inset-bottom, 10px);
    align-items: center;
    justify-content: space-between;
    z-index: 200;
    box-shadow: 0 -4px 20px rgba(13,22,66,.2);
  }
  .res-sticky-total-label { font-size: .82rem; opacity: .75; }
  .res-sticky-total-price { color: var(--gold); font-weight: 900; font-size: 1.1rem; }
  .reservation-section { padding-bottom: 80px; }
}

/* ── Room type grid: 2 cols on ≥400px, 1 col on smaller ── */
@media (min-width: 400px) and (max-width: 600px) {
  .room-type-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   ABOUT PAGE — responsive layout
   Previously the about.php sections used inline `grid-template-columns:
   1fr 1fr; gap:60px` which ignored media queries (inline styles have
   max specificity). On phones this rendered as cramped two-column
   grids with 60px gaps. All inline grids are now classes that stack
   to a single column below 768px.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shared two-column wrapper ── */
.about-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-two-col .about-h2 { text-align: right; }
.about-p {
  color: var(--text-muted);
  line-height: 2;
  margin-bottom: 16px;
  font-size: 1.02rem;
}
.about-p:last-of-type { margin-bottom: 0; }
.about-cta-row {
  margin-top: 32px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Intro section visual card ── */
.about-visual-wrap { position: relative; }

/* The CEO photo fills the card as a background image. A semi-transparent
   navy overlay (70% alpha) sits on top of the photo so the text stays
   readable, while the portrait is still clearly visible behind it.
   IMPORTANT: the URL here is relative to this CSS file's location, which
   is /assets/css/main.css — so the photo path from there is
   ../images/ceo/ceo.png. */
.about-visual-card {
  position: relative;
  background-image: url('../images/ceo/ceo.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: var(--radius-xl);
  padding: 48px 36px;
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  /* Minimum height so the portrait has room to breathe even when the
     card's content is short */
  min-height: 520px;
  isolation: isolate;
}
/* Semi-transparent navy overlay on top of the CEO photo.
   Opacity is ~0.72 so the photo shows through clearly, but the overlay
   is dark enough that white text above it is readable. A subtle gradient
   (darker at top/bottom, lighter in the middle) keeps the text-heavy
   edges crisp while letting the portrait's face shine through. */
.about-visual-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13,22,66,.88) 0%,
    rgba(13,22,66,.55) 35%,
    rgba(13,22,66,.55) 65%,
    rgba(13,22,66,.88) 100%
  );
  z-index: -1;
}
/* Ensure the card content sits above the overlay */
.about-visual-card > * { position: relative; z-index: 1; }

/* Site logo block inside the about-page visual card */
.about-logo-block {
  margin-bottom: 22px;
}
.about-logo-icon {
  width: 82px;
  height: 82px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  font-size: 2.1rem;
  box-shadow: 0 8px 24px rgba(212,175,55,.35);
}

/* CEO portrait in circular frame with a soft blue ambient glow.
   Rendered inside the navy visual card on about.php — the blue blur
   behind the photo creates depth and visually ties it to the site's
   navy palette. A thin gold ring outlines the photo to echo the brand. */
.about-ceo-photo {
  width: 132px;
  height: 132px;
  margin: 0 auto 18px;
  border-radius: 50%;
  position: relative;
  /* Outer blue glow */
  box-shadow:
    0 0 0 3px rgba(212,175,55,.35),         /* thin gold ring */
    0 0 28px 6px rgba(59,130,246,.55),       /* inner blue halo */
    0 0 60px 14px rgba(37,99,235,.35);       /* outer blue halo, softer */
  /* Blue backdrop behind the photo — visible if the PNG has transparency,
     and serves as a fallback tint if the image is slow to load */
  background: radial-gradient(
    circle at center,
    rgba(59,130,246,.45) 0%,
    rgba(13,22,66,.2) 70%
  );
}
.about-ceo-photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  /* Slight saturation boost so the portrait pops against the navy card */
  filter: saturate(1.05);
}
/* Optional decorative blurry blue halo ring behind the photo for extra depth */
.about-ceo-photo::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(59,130,246,.35) 0%,
    rgba(59,130,246,0)  70%
  );
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}

.about-logo-name {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1.2;
}
.about-logo-sub {
  font-size: .92rem;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
  letter-spacing: 1px;
}
.about-visual-emoji { font-size: 4.5rem; margin-bottom: 16px; line-height: 1; }
.about-visual-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 10px;
}
.about-visual-desc {
  opacity: .8;
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: 28px;
}
.about-visual-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.about-visual-stat {
  background: rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 16px 10px;
}
.about-visual-stat-num {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1.1;
}
.about-visual-stat-label {
  font-size: .82rem;
  opacity: .7;
  margin-top: 4px;
}
.about-float-badge {
  position: absolute;
  top: -18px;
  right: -18px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 50%;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(212,175,55,.5);
  font-size: .72rem;
  text-align: center;
  line-height: 1.3;
}
.about-float-badge i {
  font-size: 1.3rem;
  margin-bottom: 2px;
}

/* ── Why-choose-us section ── */
.about-why-visual  { order: 2; }
.about-why-text    { order: 1; }
.about-why-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.about-why-card {
  background: var(--cream);
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  border: 2px solid var(--border);
  transition: all .3s;
}
.about-why-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}
.about-why-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: #fff;
  font-size: 1.3rem;
}
.about-why-card h4 {
  color: var(--navy);
  font-weight: 800;
  margin-bottom: 6px;
  font-size: .95rem;
}
.about-why-card p {
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.5;
}

/* ── Advantages list ── */
.about-adv-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.about-adv-icon {
  color: var(--gold);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 3px;
}
.about-adv-text {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.7;
}

/* ── Mobile: stack everything, shrink visuals ── */
@media (max-width: 768px) {
  .about-two-col {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  /* On mobile, always show the text first (visual card second) regardless
     of the `order` values set for desktop layout. */
  .about-why-visual { order: 2; }
  .about-why-text   { order: 1; }

  .about-visual-card {
    padding: 32px 22px;
    border-radius: var(--radius-lg);
  }
  .about-logo-icon {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
    margin-bottom: 10px;
  }
  .about-ceo-photo {
    width: 104px;
    height: 104px;
    margin-bottom: 12px;
    /* Tighter blue glow radius on mobile so it doesn't overflow the card */
    box-shadow:
      0 0 0 2px rgba(212,175,55,.35),
      0 0 20px 4px rgba(59,130,246,.55),
      0 0 42px 10px rgba(37,99,235,.3);
  }
  .about-ceo-photo::before { inset: -10px; filter: blur(8px); }
  .about-logo-name { font-size: 1.15rem; }
  .about-logo-sub  { font-size: .82rem; }
  .about-logo-block { margin-bottom: 16px; }
  .about-visual-desc  { font-size: .92rem; margin-bottom: 20px; }
  .about-visual-stats { gap: 10px; }
  .about-visual-stat  { padding: 12px 8px; }
  .about-visual-stat-num   { font-size: 1.5rem; }
  .about-visual-stat-label { font-size: .75rem; }

  .about-float-badge {
    width: 58px;
    height: 58px;
    top: -14px;
    right: -8px;
    font-size: .68rem;
  }
  .about-float-badge i { font-size: 1rem; }

  .about-why-cards { gap: 10px; }
  .about-why-card  { padding: 20px 14px; }
  .about-why-card-icon {
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
  }

  .about-adv-row  { gap: 10px; margin-bottom: 14px; }
  .about-adv-text { font-size: .95rem; }

  /* CTA buttons stack nicely and take full width */
  .about-cta-row .btn { flex: 1 1 100%; justify-content: center; }
}

/* Extra-small phones: shrink the 2x2 stats grid & why-cards to still look good */
@media (max-width: 380px) {
  .about-visual-card        { padding: 24px 16px; }
  .about-visual-stat-num    { font-size: 1.3rem; }
  .about-why-card           { padding: 16px 10px; }
  .about-why-card h4        { font-size: .88rem; }
  .about-why-card p         { font-size: .76rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   PARTNERS / ACCREDITATIONS STRIP (about.php)
   ═══════════════════════════════════════════════════════════════════ */
.partners-strip {
  background: var(--navy);
}
.partners-strip-title {
  text-align: center;
  margin-bottom: 36px;
}
.partners-strip-title p {
  font-size: 1.35rem;
  letter-spacing: 1.5px;
  font-weight: 800;
  margin: 0;
}
.partners-word-gold  { color: var(--gold); }
.partners-word-white { color: #fff; }

/* Responsive grid: auto-fit lets the strip lay out 5-in-a-row on desktop,
   3 or 2 on tablets, 2 on phones, without media queries. */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px 40px;
  align-items: center;
  justify-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.partner-item {
  width: 100%;
  max-width: 200px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No background, no border, no padding — logo sits cleanly in the strip. */
  transition: transform .3s;
}
.partner-item:hover {
  transform: translateY(-3px);
}

/* Logos render grayscale+dim by default, full color on hover.
   This keeps the strip visually unified regardless of logo color palettes,
   and draws attention only to hovered items. */
/* All partner logos render at the same visual size. Previously each logo
   used its natural aspect ratio (max-width/max-height + auto), which made
   tall logos appear smaller than wide logos even though their containers
   were identical. By setting width and height to 100% with object-fit:
   contain, every logo now fills the same box and scales uniformly without
   distortion. */
.partner-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1) brightness(1.6);
  opacity: .75;
  transition: filter .3s, opacity .3s;
}
.partner-item:hover img {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

/* Graceful fallback shown when a logo file hasn't been uploaded yet.
   Hint text includes the expected filename so you know what to name it. */
.partner-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  border: 1px dashed rgba(255,255,255,.2);
  border-radius: 8px;
  text-align: center;
}
.partner-placeholder-name {
  color: rgba(255,255,255,.7);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
}
.partner-placeholder-hint {
  color: rgba(212,175,55,.75);
  font-size: .68rem;
  font-family: monospace;
  direction: ltr;
}

@media (max-width: 600px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .partner-item { height: 84px; max-width: 160px; }
  .partners-strip-title { margin-bottom: 24px; }
  .partners-strip-title p { font-size: 1.1rem; letter-spacing: 1px; }
}