:root{
  --sky: #38bdf8;
  --sky-hover: #5cd4ff;
  --navy: #0a1a44;
  --white: #ffffff;
  --gray-light: rgba(10,26,68,0.06);
  --panel-width: 90vw;
  --panel-max: 380px;
}

/* reset */
*{box-sizing:border-box;margin:0;padding:0;font-family:"Poppins",sans-serif}
a{color:inherit}

/* hide both sections by default; controlled with media queries */
.desktop-only{display:none}
.mobile-only{display:none}

/* Sticky Header Wrapper */
.site-header {
  position: sticky;
  top: 0;
  z-index: 2200;
  width: 100%;
}

/* header spacer - no longer needed with sticky header occupying space */
.header-spacer{display:none}

/* ---------------- DESKTOP (>=1025px) ---------------- */
@media (min-width:1025px){
  .desktop-only{display:block}
  
  .header-spacer { display: none; }

  .header-desktop{
    position:relative; top:auto; left:auto; right:auto; height:auto; min-height:76px;
    background:var(--white);border-bottom:1px solid var(--gray-light);
    z-index:1200;display:flex;align-items:center;padding:0 20px;
  }
}

/* ---------------- TOP BAR (Global) ---------------- */
.header-top {
  position: relative;
  background: var(--navy);
  color: var(--white);
  z-index: 1201; 
  display: flex;
  align-items: center;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 8px 0;
}
.header-top .top-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.header-top .top-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  opacity: 0.95;
  text-align: center;
}
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.header-top .contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.9;
}
.header-top .contact-item a {
  color: var(--white);
  text-decoration: none;
  transition: color 0.2s;
}
.header-top .contact-item a:hover {
  color: var(--sky);
}
.header-top i { color: var(--sky); }

/* Social Icons in Header */
.header-top .social-icons {
    gap: 15px;
}
.header-top .social-icons a {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

/* Mobile Adjustments for Top Bar */
@media (max-width: 1024px) {
  .header-top {
    display: none;
  }
}

/* ---------------- DESKTOP (>=1025px) continued ---------------- */
@media (min-width:1025px){
  .header-top {
    position: relative;
    top: auto; 
    left: auto; 
    right: auto;
    height: auto;
    min-height: 40px;
    padding: 0;
  }

  .container-desktop{width:100%;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}

  .logo img{height:54px;object-fit:contain}

  .menu-desktop{display:flex;gap:8px;list-style:none;align-items:center}
  .menu-desktop li{position:relative ; list-style:none !important;}
  .menu-desktop a{display:inline-block;position: relative; gap:8px;align-items:center;padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:500;color:var(--navy);transition:all .18s}
  .menu-desktop a::after {
  content: "";
  width: 0;
  height: 2px;
  margin-top: 4px;
  display: block;
  background: var(--sky);
  transition: width .28s ease;
}

/* expand underline on hover */
.menu-desktop a:hover::after {
  width: 100%;
}


  /* dropdown */
  .submenu{position:absolute;top:100%;left:0;min-width:220px;background:var(--white);padding:10px 0;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.08);opacity:0;visibility:hidden;transform:translateY(0px);transition:all .18s;z-index:1300}
  .menu-desktop li:hover > .submenu{opacity:1;visibility:visible;transform:translateY(0)}
  .submenu li a{display:block;padding:8px 18px;color:var(--navy)}
  .submenu li a:hover{color:var(--sky)}
  .submenu li:hover > .submenu{left:100%;top:0;opacity:1;visibility:visible;transform:none}
}

/* ---------------- MOBILE (<=1024px) ---------------- */
.mobile-inner{max-width:1200px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between}
@media (max-width:1024px){
  .mobile-only{display:block}
  .header-spacer{display:none}

  .header-mobile{position:sticky;top:0;left:0;right:0;width:100%;height:auto;min-height:64px;padding:0 14px;background:var(--white);border-bottom:1px solid var(--gray-light);z-index:2200;display:flex;align-items:center;justify-content:space-between}
  .logo-mobile img{height:52px;object-fit:contain}

  /* hamburger button */
  .menu-btn{background:var(--white);border:1px solid rgba(10,26,68,0.12);width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--navy);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.08)}
  .menu-btn:hover{transform:translateY(-2px)}

  /* panel */
  .mobile-panel{position:fixed;top:0;left:-100%;width:var(--panel-width);max-width:var(--panel-max);height:100vh;background:var(--white);box-shadow:6px 0 28px rgba(0,0,0,0.18);transition:left .28s;padding:84px 14px 28px;overflow:auto;z-index:2100}
  .mobile-panel.show,.mobile-panel[aria-hidden="false"]{left:0}

  .mobile-panel-header{position:absolute;top:12px;right:12px;z-index:2120}
  #mobile-close{background:var(--white);border:1px solid rgba(10,26,68,0.12);width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.08)}

  /* mobile menu reset and styles */
  .menu-mobile, .menu-mobile ul { list-style:none; margin:0; padding:0 }
  .menu-mobile > li { border-bottom:1px solid rgba(10,26,68,0.04) }
  .menu-mobile a{display:flex;align-items:center;gap:12px;padding:16px 12px;font-size:16px;font-weight:700;color:var(--navy);text-decoration:none}

  /* details/summary styles */
  details.mobile-details { background:transparent; margin:0; padding:0; }
  summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:16px 12px; font-weight:700; color:var(--navy); outline:none; }
 .nested summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:16px 28px; font-weight:700; color:var(--navy); outline:none; }
  summary::-webkit-details-marker { display:none } /* hide default marker */

  .caret, .inner-caret { margin-left:auto; transform:rotate(0deg); transition:transform .18s ease; color:var(--navy) }
  details[open] > summary .caret { transform:rotate(180deg) }
  details.nested[open] > summary .inner-caret { transform:rotate(90deg) }

  /* submenu inside details */
  .submenu-mobile { padding-left:0; margin:0; max-height:1000px; } /* we rely on details open/close */

  .submenu-mobile li a{ padding:12px 28px; font-weight:600; color:var(--navy); display:block }
  .nested .submenu-mobile li a{ padding:12px 45px; font-weight:600; color:var(--navy); display:block }
  .submenu-mobile li { border-bottom:1px solid rgba(10,26,68,0.04) }

  /* small screens full width */
  @media (max-width:420px){
    .mobile-panel{ width:100vw; max-width:100vw; left:-100% }
  }
}

/* Desktop: show submenu instantly without translate/slide */
@media (min-width:1025px) {
  /* Remove the initial translate transform & transition so it doesn't animate in */
  .submenu {
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* keep it hidden by default by using display none on parent hover instead */
    display: none;
  }

  /* Show submenu on hover immediately (no movement) */
  .menu-desktop li:hover > .submenu {
    display: block;
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Nested submenu: appear immediately to the right without sliding */
  .menu-desktop .submenu li:hover > .submenu {
    left: 100%;
    top: 0;
    display: block;
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}