.header-right-bg::after {content: ''; width: 100%; height: 72px; background-color: #DE392E; position: absolute; top: 0; right: -100%; }
.theme-icon {position: absolute;opacity: 0;visibility: hidden;transform: scale(0.001);transform-origin: center;transition: opacity 0.35s ease, transform 0.35s ease;will-change: transform, opacity;}
.theme-icon.is-active {opacity: 1;visibility: visible;transform: scale(1);}
header .themeht-btn {font-size: 0.875rem; padding: 8px 20px;}
.nav-dropdown {transform: translateY(15px) scale(0.95);filter: blur(6px);  transition: all 0.25s ease;pointer-events: none;}
.nav-item.active .nav-dropdown {opacity: 1;visibility: visible; transform: translateY(0) scale(1);filter: blur(0);pointer-events: auto;}
.nav-dropdown > div {transition: box-shadow 0.3s ease;}
.nav-item.active .nav-dropdown > div {box-shadow: 0 25px 60px rgba(0,0,0,0.2);}
/* ─── HAMBURGER BUTTON ─── */
.hamburger-btn {display: none;flex-direction: column;justify-content: center;gap: 5px;width: 40px;height: 40px;padding: 8px;background: transparent;border: none;cursor: pointer;position: absolute;top: 16px;right: 16px;z-index: 1100;transition: top 0.3s;}
.hamburger-btn span {display: block;width: 100%;height: 2px;background: #fff;border-radius: 2px;transition: transform 0.35s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.25s ease,width 0.3s ease;transform-origin: center;}
.hamburger-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.is-open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.h-link, .nav-dropdown a {font-size: 0.875rem;}
/* ─── OVERLAY ─── */
.mobile-overlay {display: none;position: fixed;inset: 0;background: rgba(0, 0, 0, 0.55);  backdrop-filter: blur(3px);z-index: 1090;opacity: 0;transition: opacity 0.35s ease;}
.mobile-overlay.is-visible {opacity: 1;}
/* ─── DRAWER ─── */
.mobile-drawer {position: fixed;top: 0;right: 0;height: 100dvh;width: min(360px, 90vw);  background: #111;color: #fff;z-index: 10001;display: flex;flex-direction: column;  transform: translateX(100%);transition: transform 0.42s cubic-bezier(0.77, 0, 0.175, 1);  overflow-y: auto;  overscroll-behavior: contain;}
.mobile-drawer.is-open {transform: translateX(0);}
/* ─── DRAWER HEADER ─── */
.mobile-drawer-header {display: flex;align-items: center;justify-content: end;padding: 20px 24px;flex-shrink: 0;}
.drawer-close {background: rgba(255,255,255,0.08);border: none;color: #fff;width: 36px;  height: 36px;border-radius: 50%;display: flex;align-items: center;justify-content: center;  cursor: pointer;transition: background 0.2s;position: absolute;right: 5px;top: 5px;}
.drawer-close:hover { background: rgba(255,255,255,0.18); }
/* ─── NAV LIST ─── */
.mobile-nav-list {list-style: none;margin: 0;padding: 12px 0;flex: 1;}
.mobile-nav-list li > a,.mobile-accordion-btn {display: flex;align-items: center;justify-content: space-between;  width: 100%;  padding: 14px 24px 14px 14px;font-size: 1.25rem;font-weight: 500;color: rgba(255,255,255,0.85);text-decoration: none;background: transparent;border: none;cursor: pointer;text-align: left;transition: color 0.2s, background 0.2s;  letter-spacing: 0.01em;}
.mobile-nav-list li > a:hover,.mobile-accordion-btn:hover {color: #fff;/*background: rgba(255,255,255,0.06);*/}
.mobile-accordion-btn{/*  background: rgba(255,255,255,0.06);*/}
/* ─── ACCORDION ─── */
.mobile-nav-list li {border-bottom:1px solid #ffffff2b;}
.accordion-arrow {flex-shrink: 0;transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.mobile-accordion-btn[aria-expanded="true"] .accordion-arrow {transform: rotate(180deg);}
.mobile-accordion-panel {list-style: none;margin: 0;padding: 0;overflow: hidden;max-height: 0;transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);background: rgba(255,255,255,0.04);}
.mobile-accordion-panel.is-open {max-height: 300px;}
.mobile-accordion-panel li a {display: block;padding: 12px 24px 12px 36px;font-size: 1rem;color: rgba(255,255,255,0.85); text-decoration: none;transition: color 0.2s;}
.mobile-accordion-panel li a:hover { color: #fff; }
/* ─── CTA BUTTONS ─── */
.mobile-cta-group {display: flex;flex-direction: column;gap: 10px;padding: 20px 24px;border-top: 1px solid rgba(255,255,255,0.08);flex-shrink: 0;}
.mobile-cta-btn {width: 100%;text-align: center;justify-content: center;}



/* ─── SHOW ONLY ON MOBILE ─── */
@media (max-width: 1023px) {
  .hamburger-btn { display: flex; }
  .darkmode-wrap { position: absolute;right: 70px;}
  .custom-skew::after {content: '';
  position: absolute;
  right: -1rem;
  top: 0;
  width: 38%;
  height: 72px;
  background-color: var(--color-primary);
  transform: skewX(-25deg);
}
.mobile-cta-group {background-color: #DE392E;}
header .themeht-btn {border: 0.5px solid #ffffff47; font-size: 1.125rem;}
.topbottom-bar p, .topbottom-bar a  {font-size: 0.75rem !important;}

}

/* Lock body scroll when drawer open */
body.drawer-open { overflow: hidden; }



/* ===============================
   DESKTOP ONLY
=============================== */
@media (min-width: 1024px) {

/* ===============================
   HEADER BASE
=============================== */
#mainHeader {
  transition: all 0.4s ease;
}

/* ===============================
   DESKTOP HAMBURGER
=============================== */
.hamburger-btn-desktop {
  width: 26px;
  height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.hamburger-btn-desktop span {
  height: 1px;
  width: 100%;
  background: #000;
  display: block;
  transition: all 0.3s ease;
}
.hamburger-btn-desktop span:nth-child(1) {width: 75px;}
.hamburger-btn-desktop span:nth-child(2) {width: 55px;}
.hamburger-btn-desktop span:nth-child(3) {width: 35px;}


  /* CENTER HAMBURGER */
  .scroll-hamburger-desktop {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    z-index: 20;
  }

  /* SHOW ON SCROLL */
  #mainHeader.scrolled .scroll-hamburger-desktop {
    display: flex;
  }

  /* TOP SHRINK */
  #mainHeader.scrolled .header-top-nav {
    padding: 6px 0;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
  }

  /* ===============================
     NAV ANIMATION
  =============================== */

  .header-bottom-nav {
    transition: all 0.4s ease;
  }

  /* HIDE NAV */
  #mainHeader.scrolled .header-bottom-nav {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  /* SHOW NAV ON HOVER */
  #mainHeader.scrolled.show-menu .header-bottom-nav {
    transform: translateY(0%);
    opacity: 1;
    pointer-events: auto;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    
  }

.header-top-nav .header-logo img {
  max-width: 235px;
  transition: max-width 0.35s ease;
}

.scrolled .header-top-nav .header-logo img {
  max-width: 150px;
}
.scrolled .header-top-nav { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);}
.header-top-nav {position: relative; z-index: 1;}

}


/* ── Footer base ── */
.footer-root {background: #110C0C;color: #c8c8c8;}
footer .nav-link {position: relative;display: inline-block;transition: color 0.2s;}
footer .nav-link::after {content: '';position: absolute;bottom: -2px; left: 0;width: 0; height: 1px;
background: var(--color-primary);transition: width 0.25s ease;}
footer .nav-link:hover { color: #fff; }
footer .nav-link:hover::after { width: 100%; }
.social-btn {width: 32px; height: 32px;border-radius: 50%;display: flex; align-items: center; justify-content: center;transition: background 0.2s, border-color 0.2s;}
.social-btn:hover {background: var(--color-white); border: 1px solid rgba(255,255,255);}
.g-badge {border: 1px solid rgba(255,255,255,0.12);border-radius: 8px;padding: 10px 14px; display: inline-flex;align-items: center; gap: 10px;  backdrop-filter: blur(4px);transition: border-color 0.2s;    }
.g-badge:hover { border-color: rgba(255,255,255,0.35); }
.g-badge p {margin-bottom: 0;}
.topbottom-bar {border-top: 1px solid var(--color-border);border-bottom: 1px solid var(--color-border);}
footer p {color: #BBC5CF; font-size: 1rem;}
.topbottom-bar p {font-size: var(--text-small);}


@media (min-width: 1280px) and (max-width: 1439px) {
/* .desktopNav-wrap {gap: 15px;} */
header .themeht-btn {font-size: 0.800rem; padding: 6px 12px;}
.skew-bar {left: -15px;}
.desktopNav-wrap {gap: 15px;}
body .hero-section {margin-top: 149px;}
#desktopCta {gap: 5px;}

}

@media (max-width: 1023px) {
.g-badge p {font-size: 0.875rem;}
  .g-badge {padding: 6px 8px;}
}

@media (max-width: 767px) {
  .logostrip .cta-logo {max-width: 70vw;}
  footer .nav-link {z-index: 100;}
  .g-badge p {font-size: 0.875rem;}
  .g-badge {padding: 6px 8px;}
}

@media screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio:1.5),screen and (min-width:1025px) and (min-resolution:144dpi) { 
  #desktopNav {gap: 15px;}
  .h-link, .nav-dropdown a {font-size: 0.805rem;}
  header .themeht-btn {padding: 8px 14px;}
  footer p, footer .nav-link {font-size: 0.875rem !important;}
  .topbottom-bar p, .topbottom-bar a {font-size: 0.75rem !important;}
  .cta-content {max-width: 41vw;}
  .g-badge {padding: 6px 8px;}

}