/* ==============================
   Base Reset
============================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background-color: #fff;
  color: #1e2d64;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}


/* ==============================
   NAVBAR
============================== */
nav.navbar {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2rem;
  position: relative;
  border-bottom: 4px solid #c42e2e;
  flex-wrap: wrap;
  z-index: 999;
}

/* logo + brand */
.logo { display: flex; align-items: center; gap: 12px; }

.logo img {
  height: 60px; width: 60px;
  min-width: 60px; min-height: 60px;
  object-fit: cover; border-radius: 50%;
  border: 3px solid #c42e2e; background-color: #fff;
  flex-shrink: 0;
}

.brand h1 { font-size: 1.5rem; font-weight: 800; color: #2a3f8a; }
.brand p  { font-size: 0.95rem; color: #555; margin-top: 2px; }

/* --- Mobile Nav Toggle (icons) ---
     Toggle button sizing + morph animation */
.nav-toggle {
  position: relative;
  width: 38px; height: 38px;
  display: none;            /* shown on <=900px */
  align-items: center; justify-content: center;
  cursor: pointer;
}

.nav-toggle i{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 1.85rem;       /* slightly bigger icons */
  transition: opacity .18s ease, transform .18s ease;
}

/* default: show hamburger, hide X */
#iconOpen  { opacity: 1; transform: rotate(0deg)   scale(1); }
#iconClose { opacity: 0; transform: rotate(-90deg) scale(.85); }

/* when open: crossfade + rotate */
.nav-toggle.is-open #iconOpen  { opacity: 0; transform: rotate(90deg)  scale(.85); }
.nav-toggle.is-open #iconClose { opacity: 1; transform: rotate(0deg)   scale(1); }

@media (max-width: 900px){ .nav-toggle{ display:flex; } }

/* nav links (desktop) */
.nav-links {
  list-style: none;
  display: flex; align-items: center;
  /* ADDED: more space between logo and “Home” */
  margin-left: 18px;
  /* ADDED: slightly bigger gap between each link */
  gap: 1.6rem;
}

.nav-links a {
  color: #2a3f8a; text-decoration: none; font-weight: 700;
  /* ADDED: tiny padding bump for breathing room */
  padding: 0.6rem 1rem;
  border-radius: 10px;
  transition: 0.3s;
}

.nav-links a.active { background-color: #fceeee; color: #c42e2e; }
.nav-links a:hover  { background-color: #fceeee; color: #c42e2e; }

/* CTA button */
.order-btn {
  background-color: #c42e2e; color: #fff !important;
  padding: 0.6rem 1.3rem; border: none; border-radius: 8px;
  font-weight: 600 !important; font-size: 0.95rem;
  cursor: pointer; transition: all 0.2s ease; transform: scale(1);
}

.order-btn:hover {
  background: #a82020 !important;
  transform: scale(2); /* your original setting */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}


/* ==============================
   Mega Dropdown (Base)
============================== */
.dropdown { position: relative; }
.dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; }

.dropdown-megamenu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #fff; padding: 2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid #e7e7e7; border-radius: 12px;
  min-width: 510px; z-index: 10000;

  /* hidden by default; shown on desktop hover/focus */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.top-section {
  display: flex; gap: 4rem; justify-content: center; margin-bottom: 1.5rem;
}
.top-section h4   { font-size: 1.3rem !important; font-weight: 900; }

.bottom-section h4{
  font-size: 1.3rem !important; font-weight: 900; color: #1e2d64;
  margin-bottom: 1rem; text-align: center;
}

.quick-links { display: flex; justify-content: center; gap: 3rem; }

.menu-column { display: flex; flex-direction: column; gap: 0.5rem; min-width: 150px; }
.menu-column h4 { font-size: 1rem; font-weight: 700; color: #1e2d64; margin-bottom: 0.5rem; }
.menu-column a  { font-size: 0.95rem; color: #444; text-decoration: none; transition: color 0.2s ease; }
.menu-column a:hover { color: #c42e2e; }

.dropdown-megamenu a { pointer-events: auto; }

.dropdown-megamenu h4 a {
  color: inherit;
  text-decoration: none;
}

.dropdown-megamenu h4 a:hover {
  color: #c42e2e; /* same hover effect as your links */
}


hr { margin: 1.2rem 0; border: none; border-top: 1px solid #eee; }

/* Desktop hover reveal remains smooth */
@media (hover:hover) and (pointer:fine){
  .dropdown:hover .dropdown-megamenu,
  .dropdown:focus-within .dropdown-megamenu{
    opacity:1; visibility:visible; pointer-events:auto;
    transform: translateX(-50%) translateY(0);
  }
}

/* Mobile: shown only when the li has .open (toggled in JS) */
@media (max-width: 900px){
  .dropdown-megamenu{
    position: static; transform: none; width: 100%;
    margin: 8px 0 0; border-radius: 10px; border: 1px solid #eee; box-shadow: none;
    padding: 1rem; display: none; opacity: 1; visibility: visible; pointer-events: auto;
  }
  .dropdown.open .dropdown-megamenu{ display:block; }
}


/* ==============================
   Mobile / Tablet
============================== */
@media (max-width: 900px) {
  /* Show toggle */
  .nav-toggle { display: flex; }

  /* Mobile menu panel (closed by default) */
  .nav-links{
    position: fixed; left: 0; right: 0; top: 70px;
    background: #fff;
    /* no border to avoid hairline; add when open */
    border-bottom: 0;
    max-height: 0; overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    transition: max-height .25s ease;
    z-index: 999; display: block; padding: 0 12px;
    /* reset desktop margin so it centers nicely on mobile */
    margin-left: 0;
    /* a touch more vertical spacing between items on mobile */
    gap: 0;
  }
  .nav-links.open{
    border-bottom: 1px solid #eee;
    max-height: 92vh; overflow: auto; -webkit-overflow-scrolling: touch;
  }

  nav.navbar {
    padding: 0.5rem 2rem;
  }

  .nav-links > li { padding: 12px 6px; border-bottom: 1px solid #f3f3f3; }
  .nav-links > li:last-child { border-bottom: 0; }

  /* Full-width CTA on mobile (optional) */
  .nav-links .order-btn { display: inline-block; width: 100%; text-align: center; }

  /* Mobile link padding fine-tune */
  .nav-links a { padding: 0.40rem 0.85rem; transition: background-color .2s ease, color .2s ease; }

  /* Keep hover scale neutral on mobile to avoid jump */
  .order-btn:hover { transform: scale(1); }

  /* Logo size tweak */
  .logo img{
    height: 56px; width: 56px;
    min-width: 56px; min-height:56px;
  }

  .top-section, .quick-links { flex-direction: column; gap: 1.25rem; align-items: flex-start; }
  .bottom-section h4 { text-align: left; }
}

/* Extra tiny screens */
@media (max-width: 500px) {
  .logo img {
    height: 50px; width: 50px;
    min-width: 50px; min-height: 50px;
  }
  .brand h1 { font-size: 1.3rem; }
.brand p  { font-size: 0.75rem; }
}

@media (max-width: 370px) {
  .logo img {
    height: 40px; width: 40px;
    min-width: 40px; min-height: 40px;
  }
  .brand h1 { font-size: 1rem; }
.brand p  { font-size: 0.54rem; }
#iconOpen  { opacity: 1; transform: rotate(0deg)   scale(0.6); }
#iconClose { opacity: 0; transform: rotate(-90deg) scale(.3); }

}


@media (max-width: 900px){
  .dropdown-megamenu{ position: static; transform:none; width:100%;
    margin:8px 0 0; border-radius:10px; border:1px solid #eee; box-shadow:none;
    padding:1rem; display:none; opacity:1; visibility:visible; pointer-events:auto; }
  .dropdown.open .dropdown-megamenu{ display:block; }
}

/* Base dropdown menu (hidden by default) */
.dropdown-menu {
  list-style: none;
  margin: 0; padding: 0;
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

/* Show when .open */
.dropdown.open .dropdown-menu {
  display: flex;
}

/* Caret rotation */
.dropdown-toggle .caret {
  transition: transform 0.2s ease;
}
.dropdown.open .caret {
  transform: rotate(180deg); /* flips arrow */
}

/* Style the submenu links */
.dropdown-menu a {
  color: #2a3f8a;
  font-weight: 600;
  text-decoration: none;
}
.dropdown-menu a:hover {
  color: #c42e2e;
}

/* =========================================
   Mobile compact dropdown for "Info"
   Turns the mega into 3 simple links
========================================= */
@media (max-width: 900px) {
  /* Kill the big card look */
  .dropdown-megamenu{
    position: static;
    transform: none;
    width: 100%;
    margin: 8px 0 0;
    padding: 0;                 /* no big padding */
    border: 0;                  /* no border box */
    box-shadow: none;
    background: transparent;    /* no white slab */
    display: none;              /* default hidden; shown via .dropdown.open */
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .dropdown.open .dropdown-megamenu{ display:block; }

  /* Hide all the deep content; show only the 3 top-level links */
  .dropdown-megamenu hr,
  .dropdown-megamenu .quick-links,
  .dropdown-megamenu .menu-column > a {  /* sublinks under each column */
    display: none !important;
  }

  /* Stack headings as tappable rows */
  .dropdown-megamenu .top-section,
  .dropdown-megamenu .bottom-section {
    display: block;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;           /* nice rounded list */
  }

  .dropdown-megamenu .top-section { margin-bottom: 8px; }

  /* Make each H4 link look like a menu item */
  .dropdown-megamenu .top-section h4,
  .dropdown-megamenu .bottom-section h4 {
    margin: 0;
  }

  .dropdown-megamenu .top-section h4 a,
  .dropdown-megamenu .bottom-section h4 a {
    display: block;
    padding: 12px 14px;
    color: #2a3f8a;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid #f3f3f3;
  }
  /* Remove divider on the last item in each block */
  .dropdown-megamenu .top-section .menu-column:last-child h4 a,
  .dropdown-megamenu .bottom-section h4 a:last-child {
    border-bottom: 0;
  }

  /* Caret flip on open (you already have the class names) */
  .dropdown-toggle .caret { transition: transform .2s ease; }
  .dropdown.open .caret  { transform: rotate(180deg); }
}

@media (max-width: 900px) {
  .dropdown-megamenu{
    position: static;
    transform: none;
    width: 100%;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    display: none;
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .dropdown.open .dropdown-megamenu{ display:block; }

  /* Hide sub-links & extras, keep only the heading <h4><a> */
  .dropdown-megamenu hr,
  .dropdown-megamenu .quick-links,
  .dropdown-megamenu .menu-column > a {  
    display: none !important;
  }

  /* Show heading rows as the 3 menu items */
  .dropdown-megamenu .menu-column h4 {
    margin: 0;
  }
  .dropdown-megamenu .menu-column h4 a,
  .dropdown-megamenu .bottom-section h4 a {
    display: block;
    padding: 12px 14px;
    color: #2a3f8a;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid #f3f3f3;
    background: #fff;
  }
  /* Remove border on last one */
  .dropdown-megamenu .bottom-section h4 a {
    border-bottom: 0;
  }

  .dropdown-toggle .caret { transition: transform .2s ease; }
  .dropdown.open .caret  { transform: rotate(180deg); }
}


/* ==== MOBILE FIXES for Info dropdown ===== */
@media (max-width: 900px) {
  /* Neutralize desktop hover animation on the mega */
  .dropdown:hover .dropdown-megamenu {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
  }

  /* Ensure the compact list shows consistent text size/weight */
  .dropdown-megamenu .top-section h4,
  .dropdown-megamenu .bottom-section h4 {
    margin: 0;
    font-size: 1rem !important;      /* match menu-column size */
    font-weight: 700 !important;
    color: #2a3f8a;
  }

  /* Show only the three main links as tidy rows */
  .dropdown-megamenu hr,
  .dropdown-megamenu .quick-links,
  .dropdown-megamenu .menu-column > a {
    display: none !important;         /* hide sub-items */
  }

  /* Uniform row styling for all three items */
  .dropdown-megamenu .menu-column h4 a,
  .dropdown-megamenu .bottom-section h4 a {
    display: block;
    background: #fff;
    text-decoration: none;
    color: #2a3f8a;
    padding: 12px 14px;
    border: 1px solid #eee;
    border-radius: 10px;
    line-height: 1.25;
  }

  /* Even spacing between rows */
  .dropdown-megamenu .top-section .menu-column h4 a + a { display: none; } /* safety */
  .dropdown-megamenu .top-section .menu-column h4 { margin-bottom: 8px; }
  .dropdown-megamenu .top-section .menu-column:last-child h4 { margin-bottom: 0; }
  .dropdown-megamenu .bottom-section { margin-top: 8px; }

  /* Kill any leftover transforms/transitions on the container */
  .dropdown-megamenu {
    position: static;
    transform: none !important;
    transition: none !important;
  }
}

/* === FINAL mobile rows: show full borders + hover === */
@media (max-width: 900px) {
  /* Make sure containers don't clip borders */
  .dropdown-megamenu .top-section,
  .dropdown-megamenu .bottom-section {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible !important;   /* <- important */
  }

  /* Each main item is its own boxed row */
  .dropdown-megamenu .menu-column h4 a,
  .dropdown-megamenu .bottom-section h4 a {
    display: block;
    background: #fff;
    color: #2a3f8a;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 14px;
    border: 1px solid #eee;         /* full border all around */
    border-radius: 10px;
    margin: 0 0 8px 0;
    line-height: 1.2;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
  }

  /* If any earlier rules killed bottom borders, put them back */
  .dropdown-megamenu .menu-column h4 a,
  .dropdown-megamenu .bottom-section h4 a,
  .dropdown-megamenu .top-section .menu-column:last-child h4 a,
  .dropdown-megamenu .bottom-section h4 a:last-child {
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    border-bottom-color: #eee !important;
  }

  /* No extra space after the very last item */
  .dropdown-megamenu .bottom-section h4 a { margin-bottom: 0; }

  /* Hover / tap feedback */
  .dropdown-megamenu .menu-column h4 a:hover,
  .dropdown-megamenu .bottom-section h4 a:hover {
    background: #2a3f8a;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
  }
}


/* ===== Footer (scoped vars to avoid conflicts) ===== */
.sa-footer{
  --footer-bg:#273b9e;            /* deep blue like screenshot */
  --footer-text:#dbe5ff;          /* light text */
  --footer-muted:#cdd6ff;         /* lighter text for tag/copyright */
  --footer-peach:#f2a7a0;         /* section heading + icons */
  --footer-peach-strong:#f0948b;
  --footer-ring:#273b9e;          /* subtle borders */

  background:var(--footer-bg);
  color:var(--footer-text);
  padding:42px 20px 22px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* grid */
.sa-footer_grid{
  max-width:1200px;
  margin:0 auto 22px;
  display:grid;
  gap:32px;
  grid-template-columns:1.25fr 1fr 1.1fr;
}
@media (max-width:1000px){
  .sa-footer_grid{ grid-template-columns:1fr; gap:26px; }
}

/* brand + about */
.sa-footer_brand{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.sa-footer_logo{
  width:52px; height:52px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.15);
}
.sa-footer_tag{ color:#cfd7ff; margin:.25rem 0 0; }
.sa-footer_desc{ max-width:48ch; line-height:1.6; }

/* socials */
.sa-socials{ display:flex; gap:14px; margin-top:14px; }
.sa-socials a{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--footer-ring); border-radius:8px; color:var(--footer-text);
  text-decoration:none;
}
.sa-socials a:hover{ background:rgba(255,255,255,.06); color:#fff; }

/* headings */
.sa-footer_links h4,
.sa-footer_contact h4{
  color:var(--footer-peach);
  font-size:1.2rem;
  margin:0 0 12px;
}

/* quick links */
.sa-footer_links ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.sa-footer_links a{ color:var(--footer-text); text-decoration:none; }
.sa-footer_links a:hover{ color:#fff; }

/* contact */
.sa-footer_contact ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.sa-footer_contact li{ display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; }
.sa-footer_contact i{ color:var(--footer-peach); }
.sa-footer_contact a{ color:var(--footer-text); text-decoration:none; }
.sa-footer_contact a:hover{ color:#fff; }

/* rule + bottom bar */
.sa-footer_rule{
  max-width:1200px; margin:26px auto 14px; border:0; height:1px;
  background:rgba(255,255,255,.15);
}
.sa-footer_bar{
  max-width:1200px; margin:0 auto; color:var(--footer-muted);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.sa-footer_policies a{ color:var(--footer-muted); text-decoration:none; }
.sa-footer_policies a:hover{ color:#fff; }