/*
Theme Name: UmrahPlans.pk New Theme Custom By Ahmed Raza
Theme URI: https://wpastra.com/
Template: astra
*/

/* ===== Universal box-sizing reset =====
   Nowhere in this theme was box-sizing ever set globally, so every element
   used the browser default (content-box): padding gets ADDED on top of a
   set width instead of being contained inside it. Any card/section that
   combines padding with a width (e.g. the About page profile card's
   padding:40px sitting in a minmax(320px,...) grid column) could then push
   past its container and cause horizontal overflow on narrow screens. This
   makes padding/border always count INSIDE the declared width everywhere,
   site-wide, which is standard practice and the real fix for that class of
   overflow bug — not just a patch for one page. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ============================================= */
/*   GLOBAL LIGHT / DARK MODE DESIGN TOKENS       */
/*   (paste this block right after the theme      */
/*    comment, before everything else in style.css)*/
/* ============================================= */

:root {
  --primary: #0d7a68;
  --primary-hover: #0a5f50;
  --primary-light: #f0faf7;
  --primary-glow: rgba(13, 122, 104, 0.15);
  --accent: #c5a880;
  --accent-hover: #b3966f;
  --dark: #0f172a;
  --dark-light: #1e293b;
  --light: #f8fafc;
  --text: #334155;
  --text-light: #64748b;
  --text-muted: #94a3b8;
  --white: #ffffff;
  --border: #e2e8f0;
  --shadow-md:
    0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.02);
  --shadow-premium:
    0 20px 40px -10px rgba(15, 23, 42, 0.08),
    0 10px 15px -3px rgba(13, 122, 104, 0.04);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Radius tokens — used by every page (page-home/about/services/community all
     reference var(--radius) / var(--radius-lg) but neither existed anywhere in
     the theme, so every card on those pages was rendering with square corners
     because an undefined custom property makes border-radius fall back to 0. */
  --radius: 14px;
  --radius-lg: 20px;
  /* Nav-only token, kept separate from --dark-bg so it never collides with
     content sections that also use --dark for text color */
  --nav-bg: rgba(6, 31, 27, 0.92);
}

[data-theme="dark"] {
  --primary: #129e87;
  --primary-hover: #0d7a68;
  --primary-light: rgba(18, 158, 135, 0.1);
  --primary-glow: rgba(18, 158, 135, 0.25);
  --accent: #d3b995;
  --accent-hover: #c5a880;
  --dark: #f8fafc;
  --dark-light: #e2e8f0;
  --light: #0b0f19;
  --text: #e2e8f0;
  --text-light: #94a3b8;
  --text-muted: #64748b;
  --white: #131a2a;
  --border: #1e293b;
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-premium:
    0 20px 40px -10px rgba(0, 0, 0, 0.5), 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

/* Site background/text follows the theme everywhere */
html {
  overflow-x: hidden;
  width: 100%;
}
body {
  background-color: var(--light);
  color: var(--text);
  transition:
    background-color 0.4s ease,
    color 0.4s ease;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}
/* Belt-and-suspenders: even if something on a page overflows and widens the
   layout viewport, these two stay pinned to the real screen edge. */
.mobile-menu-backdrop,
#mobileMenu,
.navbar-container {
  max-width: 100vw;
}

/* ===== Dark mode: navbar ===== */
[data-theme="dark"] .navbar-container {
  background: rgba(11, 15, 25, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ===== Dark mode: footer ===== */
[data-theme="dark"] .footer-container {
  background-color: #05070c;
}
[data-theme="dark"] .footer-bottom {
  background-color: rgba(0, 0, 0, 0.35);
}

/* ===== Dark mode toggle button (in navbar) ===== */
.theme-toggle-btn .icon-moon {
  display: none;
}
.theme-toggle-btn .icon-sun {
  display: flex;
}
[data-theme="dark"] .theme-toggle-btn .icon-moon {
  display: flex;
}
[data-theme="dark"] .theme-toggle-btn .icon-sun {
  display: none;
}

/* ===== Generic page/card helpers so every page reacts to theme ===== */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text);
  transition: var(--transition);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-premium);
}
[data-theme="dark"] .card:hover {
  box-shadow: var(--shadow-premium);
}

/* ===== Dark-mode text safety net =====
   Every page's own <style> block sets headings/paragraphs with
   color: var(--dark) / var(--text) / var(--text-light), which already flips
   correctly in dark mode via the tokens above. This just catches any element
   that ends up unstyled (e.g. plain <h1>-<h6>/<p> inside page content) so
   nothing is ever left rendering dark-on-dark or light-on-light. */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--dark);
}
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span {
  color: inherit;
}

/* ===== Reveal animation (shared by every page) =====
   Premium fade + rise + soften-focus entrance. Every page template also
   carries its own copy of .reveal for safety, kept in sync with this one. */
.reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  filter: blur(4px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.in-view {
  opacity: 1;
  transform: scale(1);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.in-view {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Respect users who've asked the OS for less motion — overrides every
   animation/transition on the site (including page-local <style> blocks)
   because it's !important, regardless of source order. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible keyboard-focus ring site-wide (buttons, links, form fields) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Defensive baseline: no image should ever be able to force horizontal
   overflow, even if a future edit forgets to size it explicitly */
img {
  max-width: 100%;
  height: auto;
}
[class*="lightbox" i],
.pswp,
.uagb-lightbox,
.uag-lightbox-outer,
.wp-block-uagb-image .lightbox-container,
[class*="modal-image" i] {
  z-index: 999999 !important;
}
[class*="lightbox" i] [class*="close" i],
.pswp__button--close,
.uagb-lightbox-close {
  z-index: 1000000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* === NAVBAR STYLES FOR WORDPRESS ===
   NOTE: this used to redeclare a second :root block here with --accent,
   --primary and --transition hard-coded to nav-only values. That silently
   overrode the design tokens above for the ENTIRE site (every button, link,
   and card — not just the navbar), and had no [data-theme='dark'] variant,
   which is a big part of why colors weren't updating correctly in dark mode.
   The navbar now uses its own --nav-bg token (defined above) instead. */

/* Container Styling */
.navbar-container {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 110px;
  z-index: 9999;
  padding: 10px 0;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(197, 168, 128, 0.15);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  transition: var(--transition);
}

.navbar {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.navbar-logo img {
  max-height: 85px;
  width: auto;
  transition: var(--transition);
}
.navbar-logo:hover img {
  transform: scale(1.03);
}

/* Links (Desktop) */
.navbar-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navbar-links a {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  font-size: 19px;
  padding: 8px 4px;
  position: relative;
  text-decoration: none;
  transition: var(--transition);
}
.navbar-links a:hover {
  color: var(--accent);
}
.navbar-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent);
  transition: var(--transition);
}
.navbar-links a:hover::after,
.navbar-links a.active::after {
  width: 100%;
}
.navbar-links a.active {
  color: var(--accent);
  font-weight: 600;
}

/* Buttons (Theme & Hamburger) */
.theme-toggle-btn,
.navbar-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.theme-toggle-btn:hover,
.navbar-toggle:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #061f1b;
}
.theme-toggle-btn:active,
.navbar-toggle:active {
  transform: scale(0.9);
}

/* Theme toggle icon: smooth rotate/fade swap instead of an instant display flip */
.theme-toggle-btn .icon-sun,
.theme-toggle-btn .icon-moon {
  transition:
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== Animated hamburger (3 spans that morph into an X) =====
   Replaces the old JS innerHTML-swap approach — pure CSS transform means
   no layout flash and it animates smoothly instead of instantly swapping. */
.navbar-toggle {
  flex-direction: column;
  gap: 5px;
}
.navbar-toggle .bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease,
    width 0.35s ease;
}
.navbar-toggle[aria-expanded="true"] .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar-toggle[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0;
  width: 0;
}
.navbar-toggle[aria-expanded="true"] .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===== Backdrop shown behind the mobile menu ===== */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 12, 10, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
  z-index: 9998; /* just below the menu, above page content */
}
.mobile-menu-backdrop.open {
  opacity: 1;
  visibility: visible;
}

/* Locks background scroll while the mobile menu is open */
body.menu-open {
  overflow: hidden;
}

/* ============ RESPONSIVE (HAMBURGER) ============ */
.navbar-toggle {
  display: none;
}
.navbar-actions-mobile {
  display: none;
  align-items: center;
  gap: 12px;
}

/* THE FIX: #mobileMenu had no default (desktop) styling at all — it only
   got position:fixed / transform:hidden treatment INSIDE the mobile media
   query below. At desktop widths that left it as a plain visible in-flow
   div, so it rendered as a second, unstyled nav (duplicate links, duplicate
   dark-mode button, duplicate "Plan Your Journey" button) sitting right next
   to the real desktop menu — exactly what the screenshots show. It must be
   hidden by default and only revealed inside the mobile breakpoint. */
#mobileMenu {
  display: none;
}

@media (max-width: 1100px) {
  .navbar-toggle {
    display: flex;
  }
  .navbar-actions-mobile {
    display: flex;
  }
  .desktop-only {
    display: none !important;
  }

  /* Mobile Menu Wrapper — top offset matches the live navbar height at
     every breakpoint below via the --nav-h custom property, so the menu
     never overlaps or gaps under the navbar. Height now fits its content
     (a compact dropdown) instead of stretching all the way to the bottom
     of the screen — max-height + scroll is just a safety net for very
     short screens with the keyboard open, etc. */
  :root {
    --nav-h: 110px;
  }
  #mobileMenu,
  .navbar-menu-wrapper {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    height: auto;
    max-height: calc(100vh - var(--nav-h));
    background: rgba(6, 31, 27, 0.98);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 22px 24px 26px;
    gap: 14px;
    border-top: 1px solid rgba(197, 168, 128, 0.15);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: translateX(100%); /* Hidden by default via transform */
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    z-index: 9999;
    display: flex; /* Always flex, but hidden outside screen */
    -webkit-overflow-scrolling: touch;
  }
  /* Must match #mobileMenu's ID specificity from the base rule above,
     otherwise the "hidden" transform (set via the #mobileMenu ID selector)
     always wins over this .open class and the menu panel never visibly
     slides in — exactly the "links not visible" bug from the screenshot. */
  #mobileMenu.open,
  .navbar-menu-wrapper.open {
    transform: translateX(0);
  }

  .navbar-links {
    flex-direction: column;
    width: 100%;
    gap: 4px;
  }
  .navbar-links li {
    opacity: 0;
    transform: translateX(24px);
    transition:
      opacity 0.4s ease,
      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Staggered entrance — each link animates in a little after the previous one */
  .navbar-menu-wrapper.open .navbar-links li {
    opacity: 1;
    transform: translateX(0);
  }
  .navbar-menu-wrapper.open .navbar-links li:nth-child(1) {
    transition-delay: 0.06s;
  }
  .navbar-menu-wrapper.open .navbar-links li:nth-child(2) {
    transition-delay: 0.1s;
  }
  .navbar-menu-wrapper.open .navbar-links li:nth-child(3) {
    transition-delay: 0.14s;
  }
  .navbar-menu-wrapper.open .navbar-links li:nth-child(4) {
    transition-delay: 0.18s;
  }
  .navbar-menu-wrapper.open .navbar-links li:nth-child(5) {
    transition-delay: 0.22s;
  }
  .navbar-menu-wrapper.open .navbar-links li:nth-child(6) {
    transition-delay: 0.26s;
  }
  .navbar-menu-wrapper.open .navbar-links li:nth-child(7) {
    transition-delay: 0.3s;
  }

  .navbar-links a {
    font-size: 16px;
    width: 100%;
    text-align: center;
    padding: 8px 0;
    display: block;
    color: #fff;
  }
  .navbar-cta-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.4s ease 0.34s,
      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.34s;
  }
  .navbar-menu-wrapper.open .navbar-cta-group {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Global mobile typography scale-down =====
   Every page defines its own hero/section-title font-sizes locally (mostly
   via clamp(), which already scales somewhat) but several still render too
   large on narrow phones. These rules use !important specifically because
   they must win over every page's own more-specific local <style> block —
   scoped tightly to small screens only, so desktop/tablet sizing (already
   fine) is untouched. */
@media (max-width: 480px) {
  main h1 {
    font-size: 1.9rem !important;
    line-height: 1.2 !important;
  }
  main h2,
  main .section-title {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
  }
  main h3 {
    font-size: 1.05rem !important;
  }
  main .section-subtitle {
    font-size: 13px !important;
  }
  main .section-tag {
    font-size: 10.5px !important;
    letter-spacing: 1px !important;
  }
  main .section {
    padding: 50px 16px !important;
  }
  main p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  /* Cards across every page (including inline style="padding: 40px" ones,
     since !important beats a plain inline style) get a smaller, consistent
     padding on narrow phones instead of eating into the already-tight
     screen width. */
  main .card {
    padding: 18px !important;
  }
  main .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
@media (max-width: 360px) {
  main h1 {
    font-size: 1.65rem !important;
  }
  main h2,
  main .section-title {
    font-size: 1.25rem !important;
  }
}
/* Tablet & Mobile Adjustments */
@media (max-width: 820px) {
  .navbar-container {
    height: 86px;
    padding: 6px 0;
  }
  .navbar {
    height: 66px;
  }
  .navbar-logo img {
    max-height: 48px;
  }
  .navbar-toggle,
  .theme-toggle-btn {
    width: 38px;
    height: 38px;
  }
  :root {
    --nav-h: 86px;
  }
}
@media (max-width: 576px) {
  .navbar-container {
    height: 64px;
    padding: 4px 0;
  }
  .navbar {
    height: 56px;
  }
  .navbar-logo img {
    max-height: 34px;
  }
  .navbar-toggle,
  .theme-toggle-btn {
    width: 34px;
    height: 34px;
  }
  :root {
    --nav-h: 64px;
  }
}

/* ========================================== */
/*           FOOTER STYLES (React Match)        */
/* ========================================== */

.footer-container {
  background-color: #061f1b;
  color: #e2e8f0;
  padding: 80px 0 0;
  font-size: 15px;
  border-top: 1px solid rgba(197, 168, 128, 0.15);
  transition: 0.3s ease;
  width: 100%;
  box-sizing: border-box; /* Prevents padding breaking width */
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  padding-bottom: 60px;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- FIXED LOGO CSS HERE --- */
.footer-logo {
  display: inline-block;
  transition: 0.3s ease;
  width: fit-content;
}
.footer-logo:hover {
  transform: scale(1.05);
}
.footer-logo .logo-img {
  max-height: 65px;
  width: auto;
  display: block;
}

.footer-description {
  color: #94a3b8;
  line-height: 1.7;
}

.footer-socials {
  display: flex;
  gap: 12px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  transition: 0.3s ease;
  text-decoration: none;
}
.social-link:hover {
  background-color: #c5a880;
  border-color: #c5a880;
  color: #061f1b;
  transform: translateY(-3px);
}
.social-icon {
  font-size: 16px;
}

.footer-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 10px;
  letter-spacing: 0.5px;
}
.footer-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #c5a880;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links a {
  color: #94a3b8;
  transition: 0.3s ease;
  display: inline-block;
  text-decoration: none;
}
.footer-links a:hover {
  color: #c5a880;
  padding-left: 6px;
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-contact-info li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.footer-contact-info span {
  color: #94a3b8;
  line-height: 1.6;
  word-break: break-word;
}
.contact-icon {
  font-size: 18px;
  color: #c5a880;
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 30px 0;
  background-color: rgba(0, 0, 0, 0.2);
}
.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.copyright {
  color: #64748b;
  font-size: 14px;
  margin: 0;
}
.footer-bottom-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-bottom-links a {
  color: #64748b;
  font-size: 14px;
  transition: 0.3s ease;
  text-decoration: none;
}
.footer-bottom-links a:hover {
  color: #c5a880;
}

/* ============ FOOTER RESPONSIVE ============ */
@media (max-width: 1200px) {
  .footer-top {
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: 30px;
  }
}

@media (max-width: 992px) {
  .footer-container {
    padding-top: 64px;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
  .footer-brand-col {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
    padding-bottom: 44px;
  }
  .footer-title {
    font-size: 16px;
    margin-bottom: 18px;
  }
  .footer-container {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .footer-container {
    padding-top: 52px;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 0 16px 40px;
    text-align: center;
  }
  .footer-brand-col {
    align-items: center;
  }
  .footer-socials {
    justify-content: center;
  }
  .footer-links-col,
  .footer-contact-col {
    align-items: center;
  }
  .footer-links {
    align-items: center;
  }

  /* Centering the gold line for mobile */
  .footer-title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-contact-info li {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }
  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
}

@media (max-width: 380px) {
  .footer-container {
    padding-top: 44px;
    font-size: 13px;
  }
  .footer-top {
    gap: 30px;
    padding: 0 12px;
  }
  .footer-title {
    font-size: 15px;
  }
  .social-link {
    width: 36px;
    height: 36px;
  }
}

/* ===== Extra micro-interactions (buttons + footer + navbar) ===== */
.btn {
  transition: var(--transition);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}

.footer-logo .logo-img,
.social-link,
.footer-links a,
.footer-bottom-links a {
  transition: var(--transition);
}
.footer-title {
  transition: color 0.3s ease;
}

/* Section badges/tags used across every page — small pop on hover */
.section-tag {
  transition: letter-spacing 0.3s ease;
}

/* Ripple element injected by functions.php on .btn / button clicks */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleEffect 0.6s ease-out;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
@keyframes rippleEffect {
  to {
    transform: scale(3);
    opacity: 0;
  }
}
.btn,
button,
.navbar-toggle,
.theme-toggle-btn {
  position: relative;
  overflow: hidden;
}
/* =========================================================
   FINAL MOBILE / TABLET + THEME MENU CORRECTION
   ========================================================= */

:root {
  /* Light mode keeps the site's original signature green mobile menu. */
  --menu-bg: rgba(6, 31, 27, 0.98);
  --menu-surface: #061f1b;
  --menu-text: #ffffff;
  --menu-muted: rgba(255, 255, 255, 0.78);
  --menu-border: rgba(255, 255, 255, 0.12);
  --menu-cta-bg: #ffffff;
  --menu-cta-text: #061f1b;
}
[data-theme="dark"] {
  --menu-bg: rgba(5, 10, 18, 0.985);
  --menu-surface: #0b0f19;
  --menu-text: #f8fafc;
  --menu-muted: #cbd5e1;
  --menu-border: rgba(255, 255, 255, 0.09);
  --menu-cta-bg: #f8fafc;
  --menu-cta-text: #061f1b;
}

/* Keep the real navigation controls above the blur/backdrop at all times. */
.navbar-container {
  isolation: isolate;
  z-index: 10020;
}
.navbar {
  position: relative;
  z-index: 10024;
}
.navbar-actions-mobile,
.navbar-toggle,
.theme-toggle-btn {
  position: relative;
  z-index: 10030;
}
.mobile-menu-backdrop {
  z-index: 10021;
  pointer-events: none;
}
.mobile-menu-backdrop.open {
  pointer-events: auto;
}
#mobileMenu {
  z-index: 10025;
}

@media (max-width: 1100px) {
  /* Menu follows the selected site theme instead of being permanently green. */
  #mobileMenu,
  .navbar-menu-wrapper {
    background: var(--menu-bg) !important;
    color: var(--menu-text) !important;
    border-top-color: var(--menu-border) !important;
    border-bottom: 1px solid var(--menu-border);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  }
  #mobileMenu .navbar-links a,
  .navbar-menu-wrapper .navbar-links a {
    color: var(--menu-text) !important;
    font-size: clamp(15px, 3.8vw, 17px);
    font-weight: 600;
    line-height: 1.25;
    padding: 9px 12px;
    border-radius: 10px;
  }
  #mobileMenu .navbar-links a:hover,
  #mobileMenu .navbar-links a:focus-visible {
    color: var(--accent) !important;
    background: rgba(255, 255, 255, 0.08);
  }
  #mobileMenu .navbar-cta-group .theme-toggle-btn {
    background: var(--primary-light) !important;
    border-color: var(--menu-border) !important;
    color: var(--menu-text) !important;
  }
  #mobileMenu .navbar-cta-group .btn {
    background: var(--menu-cta-bg) !important;
    color: var(--menu-cta-text) !important;
    border-color: var(--menu-cta-bg) !important;
    max-width: 100%;
    text-align: center;
  }
  .navbar-toggle[aria-expanded="true"] {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 0 0 5px var(--primary-glow);
    opacity: 1 !important;
    filter: none !important;
    visibility: visible !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .navbar-toggle[aria-expanded="true"] .bar {
    opacity: 1;
    filter: none;
  }
  .navbar-toggle[aria-expanded="true"] .bar:nth-child(2) {
    opacity: 0;
  }
}

/* Medium tablet: compact without looking like a phone. */
@media (max-width: 820px) {
  .navbar {
    padding-left: 18px;
    padding-right: 18px;
  }
  main .section {
    padding: 58px 18px !important;
  }
  main .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  main h1 {
    font-size: clamp(1.9rem, 6vw, 2.5rem) !important;
    line-height: 1.18 !important;
  }
  main h2,
  main .section-title {
    font-size: clamp(1.45rem, 4.8vw, 2rem) !important;
    line-height: 1.25 !important;
  }
  main p {
    font-size: 14.5px !important;
    line-height: 1.68 !important;
  }
  main .card {
    min-width: 0;
  }
}

/* Normal Android/iPhone sizes. */
@media (max-width: 576px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  .navbar-container {
    height: 62px;
  }
  .navbar {
    height: 54px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .navbar-logo {
    display: flex;
    align-items: center;
    max-width: 52vw;
    overflow: hidden;
  }
  .navbar-logo img {
    max-height: 31px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain;
  }
  .navbar-actions-mobile {
    gap: 8px;
  }
  .navbar-toggle,
  .theme-toggle-btn {
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
  }
  :root {
    --nav-h: 62px;
  }

  #mobileMenu,
  .navbar-menu-wrapper {
    padding: 18px 16px 20px;
    gap: 8px;
    max-height: calc(100dvh - var(--nav-h));
  }
  #mobileMenu .navbar-links {
    gap: 2px;
  }
  #mobileMenu .navbar-links a {
    padding: 8px 10px;
  }
  #mobileMenu .navbar-cta-group {
    gap: 10px;
    margin-top: 2px;
  }

  main,
  .page-home,
  .page-about,
  .page-services,
  .page-community,
  .page-contact,
  .page-ceo,
  .page-umrah-guide {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  main .section {
    padding: 46px 14px !important;
  }
  main .container {
    width: 100%;
    max-width: 100%;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  main h1 {
    font-size: clamp(1.65rem, 7.5vw, 2rem) !important;
    line-height: 1.18 !important;
  }
  main h2,
  main .section-title {
    font-size: clamp(1.3rem, 6vw, 1.65rem) !important;
    line-height: 1.25 !important;
  }
  main h3,
  main h4 {
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }
  main p,
  main li {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }
  main .section-subtitle {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }
  main .section-tag {
    font-size: 10px !important;
    letter-spacing: 0.9px !important;
  }
  main .card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 16px !important;
  }

  /* Images/cards cannot dominate the narrow viewport. */
  main img {
    max-width: 100% !important;
    height: auto !important;
  }
  .ph-hero,
  .pa-hero,
  .pc-hero {
    min-height: 0;
    height: auto !important;
    padding: 70px 14px 58px !important;
  }
  .ug-hero {
    padding: 72px 14px 54px !important;
  }
  .ph-hero h1,
  .pa-hero h1,
  .pc-hero h1,
  .ug-hero h1 {
    max-width: 100%;
  }

  /* Auto-fit grids with large minimums are forced into one clean column. */
  .ph-roadmap-grid,
  .pa-stats-grid,
  .pc-grid,
  .pc-process-grid,
  .ug-prep-grid,
  .pillars-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  .ph-benefits-grid,
  .ph-review-grid,
  .ph-values-grid,
  .ph-gallery-grid,
  .pa-values-grid,
  .pa-gallery-grid,
  .ps-services-grid,
  .ps-gallery-grid,
  .pc-stats-grid,
  .pc-initiatives-grid,
  .pc-gallery-grid {
    min-width: 0;
  }

  /* Common inline/grid blocks that previously used a 320px minimum. */
  [style*="minmax(320px"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
}

/* Very small Android phones (320–380px). */
@media (max-width: 380px) {
  .navbar-logo img {
    max-height: 28px !important;
  }
  .navbar {
    padding-left: 11px;
    padding-right: 11px;
  }
  .navbar-actions-mobile {
    gap: 6px;
  }
  .navbar-toggle,
  .theme-toggle-btn {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }
  main .section {
    padding: 40px 12px !important;
  }
  main .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  main h1 {
    font-size: 1.55rem !important;
  }
  main h2,
  main .section-title {
    font-size: 1.24rem !important;
  }
  main p,
  main li {
    font-size: 13px !important;
  }
  main .card {
    padding: 14px !important;
  }
}