/* Header Menu Fixes - Matching index-4 template exactly */
/* Suppression globale de toutes les bordures verticales du header */
.header-area .nh3-topber ul.ht3-list,
.header-area .nh3-navber nav .nav-brand,
.header-area .nh3-navber .nh3-nav-btn {
  border-left: none !important;
  border-right: none !important;
}

/* Top bar styles */
.h-style3 .nh3-topber {
  position: relative;
  overflow: visible;
}
.h-style3 .nh3-topber .row {
  margin: 0;
  margin-left: 0;
  margin-right: 0;
  justify-content: center;
}
.h-style3 .nh3-topber .col-md-6,
.h-style3 .nh3-topber .col-6,
.h-style3 .nh3-topber .col-md-4,
.h-style3 .nh3-topber .col-auto {
  padding: 0;
  padding-left: 0;
  padding-right: 0;
}
.h-style3 .nh3-topber ul.ht3-list {
  margin: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.h-style3 .nh3-topber ul.ht3-list li {
  display: inline-block;
  height: 100%;
}
.h-style3 .nh3-topber ul.ht3-list li a {
  color: #fff;
  font-size: 13px;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.h-style3 .nh3-topber ul.ht3-list li a:hover {
  opacity: 0.8;
}
.h-style3 .nh3-topber ul.ht3-list li a i {
  margin-right: 8px;
  font-size: 12px;
  opacity: 0.9;
}

/* h-style4 overrides */
.h-style4 .nh3-topber {
  border-bottom: 1px solid #fdfdfd;
}
.h-style4 .nh3-topber ul.ht3-list {
  justify-content: center;
}
.h-style4 .nh3-topber .row {
  justify-content: center;
}
.h-style3 .nh3-topber ul.ht3-list,
.h-style4 .nh3-topber ul.ht3-list {
  margin-bottom: 0;
  min-height: 100%;
}
/* Navigation bar styles */
.h-style3 .nh3-navber {
  height: 53.5px;
  position: relative;
  border: 1px solid #496a8f;
  border-left: 0;
  border-right: 0;
  overflow: visible;
  z-index: 100;
}
.h-style3 .nh3-navber nav {
  height: 100%;
  position: relative;
  overflow: visible;
}
.h-style3 .nh3-navber nav .nav-brand {
  max-width: 183px;
  height: 100%;
  margin: 0;
  padding: 0;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* h-style4 overrides for white borders */
.h-style4 .nh3-navber {
  border-top: 1px solid #fcfcfc !important;
  border-bottom: 1px solid #fcfcfc !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Adaptation pour h-style4 avec fond clair */
.header-area.header-light-bg.h-style4 .nh3-navber {
  border-top-color: rgba(0, 0, 0, 0.2) !important;
  border-bottom-color: rgba(0, 0, 0, 0.2) !important;
}

.header-area.header-light-bg.h-style4 .nh3-topber {
  border-bottom-color: rgba(0, 0, 0, 0.2) !important;
}

/* ===============================================
   LOGO - STYLES GLOBAUX POUR TOUTES LES PAGES
   Ne pas ajouter de styles inline dans les pages !
   =============================================== */
/* Container du logo */
.h-style3 h2.nav-brand {
  margin: 0;
  padding: 0;
  height: 100%;
  line-height: 53.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Lien du logo */
.h-style3 .nav-brand a {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

/* Image du logo - Taille unifiée pour toutes les pages */
.h-style3 h2.nav-brand img {
  max-height: 45px;
  width: auto;
  height: auto;
  padding: 0;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
@media (min-width: 992px) {
  /* Navigation bar - Desktop specific */
  .h-style3 .nh3-navber nav .nav-brand {
    max-width: 183px;
    float: left;
  }
  
  /* Hide hamburger on desktop */
  .h-style3 .nh3-navber .main-nav .main-menu-btn,
  .h-style3 .nh3-navber .main-nav #main-menu-state {
    display: none !important;
  }
  
  /* Always show menu on desktop (horizontal) */
  .h-style3 .nh3-navber .main-nav #main-menu,
  .h-style3 .nh3-navber .main-nav #main-menu.sm,
  .h-style3 .nh3-navber .main-nav #main-menu .sm-mint {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
  }
}
.h-style3 .sm-mint {
  height: 100%;
  margin: 0;
  padding: 0;
  float: right;
  display: flex;
  align-items: center;
  position: relative;
  overflow: visible;
  z-index: 1000;
}
.h-style3 .sm-mint > li {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  float: left !important;
  margin: 0 !important;
}
.h-style3 .sm-mint > li > a {
  padding: 18px 20px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #fff !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  margin: 0 !important;
  border: none !important;
}
.h-style3 .sm-mint > li > a.has-submenu {
  padding-right: 34px !important;
}


.h-style3 .sm-mint > li > a:hover {
  color: #56c2e2 !important;
}

/* Active page indicator in header menu */
.header-area .sm-mint > li > a.is-current-page,
.header-area .sm-mint > li > a.is-current-parent {
  position: relative;
  color: #56c2e2 !important;
  font-weight: 700;
}

.header-area .sm-mint > li > a.is-current-page::after,
.header-area .sm-mint > li > a.is-current-parent::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 8px;
  height: 3px;
  background: rgba(86, 194, 226, 0.95);
  border-radius: 999px;
  opacity: 0.95;
}

/* On light header backgrounds, use dark underline */
.header-area.header-light-bg .sm-mint > li > a.is-current-page::after,
.header-area.header-light-bg .sm-mint > li > a.is-current-parent::after {
  background: rgba(22, 155, 215, 0.95);
}

.header-area.header-light-bg .sm-mint > li > a.is-current-page,
.header-area.header-light-bg .sm-mint > li > a.is-current-parent {
  color: #169bd7 !important;
}

/* Also highlight current item inside dropdowns */
.h-style3 .sm-mint ul li a.is-current-page,
.h-style3 .sm-mint ul li a[aria-current="page"] {
  background: #169bd7 !important;
  color: #fff !important;
}
/* Sub-menu Styles from Template - Desktop */
@media (min-width: 768px) {
  /* Garantir la cohérence du positionnement du menu principal sur toutes les pages */
  .h-style3 .sm-mint {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  
  .h-style3 .sm-mint > li {
    position: relative !important;
    float: left !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
  }
  
  .h-style3 .sm-mint > li > a {
    padding: 18px 20px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
  
  .h-style3 .sm-mint > li.has-submenu {
    position: relative !important;
  }
  .h-style3 .sm-mint ul {
    position: absolute !important;
    width: 220px !important;
    background: #1a3a5c !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 8px 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 9999 !important;
    border-radius: 8px !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 4px !important;
    transform: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease !important;
    pointer-events: none !important;
  }
  .h-style3 .sm-mint > li:hover > ul,
  .h-style3 .sm-mint > li.highlighted > ul,
  .h-style3 .sm-mint > li > a:hover + ul,
  .h-style3 .sm-mint > li > a.highlighted + ul,
  .h-style3 .sm-mint > li:hover ul,
  .h-style3 .sm-mint ul:hover {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .h-style3 .sm-mint > li > ul {
    top: 100% !important;
    margin-top: 0 !important;
    left: 0 !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .h-style3 .sm-mint > li:hover > ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .h-style3 .sm-mint ul.sm-nowrap {
    width: auto;
    min-width: 220px;
  }
  .h-style3 .sm-mint ul li {
    float: none !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  
  .h-style3 .sm-mint ul li:first-child a {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  
  .h-style3 .sm-mint ul li:last-child a {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  
  .h-style3 .sm-mint ul li a {
    white-space: normal !important;
    padding: 12px 20px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: block !important;
    border-radius: 0 !important;
    border: 0 !important;
    text-align: left !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: all 0.2s ease !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    background: transparent !important;
  }
  
  .h-style3 .sm-mint ul li a:hover,
  .h-style3 .sm-mint ul li a:focus,
  .h-style3 .sm-mint ul li a:active,
  .h-style3 .sm-mint ul li a.highlighted {
    background: rgba(86, 194, 226, 0.2) !important;
    color: #ffffff !important;
    box-shadow: none;
    padding-left: 24px;
  }
  
  /* Active/current page in submenu */
  .h-style3 .sm-mint ul li a.is-current-page {
    background: rgba(86, 194, 226, 0.3) !important;
    color: #ffffff !important;
    font-weight: 600;
  }
  
  /* Garantir la cohérence du conteneur de navigation principal */
  .h-style3 .nh3-navber .main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
    height: 100% !important;
  }
  
  .h-style3 .nh3-navber nav {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}
/* ============================================
   TABLET RESPONSIVE (768px - 1199px)
   Desktop-like layout - Both sections visible
   ============================================ */
@media (min-width: 768px) and (max-width: 1199px) {
  html, body {
    overflow-x: hidden;
  }

  .h-style3.header-area,
  .header-area,
  #shared-header {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Topbar - Responsive text handling - ABSOLUTELY NO SCROLLBAR */
  .h-style3 .nh3-topber {
    width: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    display: block !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
    max-height: none !important;
    height: auto !important;
  }
  .h-style3 .nh3-topber::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }
  .h-style3 .nh3-topber .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    max-height: none !important;
    height: auto !important;
  }
  .h-style3 .nh3-topber .container::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }
  .h-style3 .nh3-topber ul.ht3-list {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    max-height: none !important;
    height: auto !important;
  }
  .h-style3 .nh3-topber ul.ht3-list::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .h-style3 .nh3-topber ul.ht3-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .h-style3 .nh3-topber ul.ht3-list li {
    flex: 0 0 auto;
    max-width: 100%;
  }
  .h-style3 .nh3-topber ul.ht3-list li a {
    padding: 8px 10px;
    font-size: 11px;
    white-space: normal;
    word-break: break-word;
    display: inline-flex;
    align-items: center;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
  }
  .h-style3 .nh3-topber ul.ht3-list li a i {
    margin-right: 4px;
    flex-shrink: 0;
  }

  /* Navbar */
  .h-style3 .nh3-navber {
    height: 60px;
    overflow-x: hidden;
  }
  
  /* FIX iOS: Forcer overflow visible sur tous les parents du menu quand il est actif */
  /* Sur iOS, overflow: hidden sur un parent peut cacher un enfant en position: fixed */
  .h-style3 .nh3-navber:has(#main-menu.active),
  .h-style3 .nh3-navber #main-menu.active {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  
  .h-style3 .nh3-navber .main-nav:has(#main-menu.active),
  .h-style3 .nh3-navber .main-nav #main-menu.active {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  .h-style3 .nh3-navber .main-nav {
    height: 60px;
    padding: 0 12px;
  }
  .h-style3 .nh3-navber .nav-brand {
    max-width: 160px;
  }
  .h-style3 .nh3-navber .nav-brand img {
    max-height: 42px;
  }

  /* Menu horizontal */
  .h-style3 .nh3-navber .main-nav #main-menu,
  .h-style3 .nh3-navber .main-nav .sm-mint {
    display: flex !important;
    flex-direction: row !important;
    position: static !important;
    background: transparent !important;
  }
  .h-style3 .nh3-navber .main-nav .sm-mint > li > a {
    padding: 12px 8px;
    font-size: 12px;
  }

  /* Hide hamburger on tablet */
  .h-style3 .nh3-navber .main-nav .main-menu-btn,
  .h-style3 .nh3-navber .main-nav #main-menu-state {
    display: none !important;
  }
  
  /* Always show menu on tablet (horizontal) */
  .h-style3 .nh3-navber .main-nav #main-menu,
  .h-style3 .nh3-navber .main-nav #main-menu.sm,
  .h-style3 .nh3-navber .main-nav #main-menu .sm-mint {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
  }
}
/* ============================================
   MOBILE RESPONSIVE (< 768px)
   Single bar design - Logo + Hamburger
   ============================================ */
@media (max-width: 767px) {
  /* GLOBAL OVERRIDE: Force white text on all submenu items in mobile menu */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul a,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  }
  
  html, body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  
  /* FIX iOS: S'assurer que html et body n'interfèrent pas avec position: fixed du header */
  html {
    position: relative !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  
  body {
    position: relative !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .header-area {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    /* FIX iOS: Ne pas mettre overflow-y: hidden car cela peut cacher le menu en position: fixed */
    overflow-y: visible !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Ensure header-area has no height from topbar */
    height: auto !important;
    min-height: 0 !important;
  }
  
  /* FIX iOS: #shared-header ne doit PAS avoir overflow: hidden car cela empêche position: fixed */
  #shared-header {
    width: 100%;
    max-width: 100vw;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
  }
  
  /* FIX iOS: S'assurer que le menu n'est pas affecté par l'overflow du header-area */
  .header-area #main-menu.active,
  #shared-header #main-menu.active {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
  }
  .header-area::-webkit-scrollbar,
  #shared-header::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  /* Ensure header-area only has navbar height on mobile (topbar is hidden) */
  /* FIX: Header toujours visible sur mobile avec position fixed et z-index très élevé */
  /* Surcharger position: absolute de style.css pour mobile */
  /* IMPORTANT: z-index très élevé pour rester au-dessus de TOUT lors du scroll */
  /* FIX iOS: Le header DOIT rester fixe même lors du scroll - surcharger TOUTES les règles */
  .header-area.h-style3,
  .header-area.h-style3.nav-fixed,
  #shared-header .header-area.h-style3,
  #shared-header .header-area.h-style3.nav-fixed,
  body .header-area.h-style3,
  body .header-area.h-style3.nav-fixed,
  html body .header-area.h-style3,
  html body .header-area.h-style3.nav-fixed {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 999999 !important; /* z-index très élevé pour rester au-dessus de tout */
    background: #1a3a5c !important;
    background-color: #1a3a5c !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    /* S'assurer que le header reste fixe même lors du scroll */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    /* FIX iOS: S'assurer que le header n'est pas affecté par le scroll */
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: none !important;
    /* FIX iOS: Forcer le header à rester fixe - surcharger position: absolute de style.css */
    position: fixed !important; /* Priorité maximale - surcharger TOUT */
  }
  
  /* FIX iOS: S'assurer que #shared-header n'interfère pas avec position: fixed */
  #shared-header {
    position: static !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  
  /* FIX iOS: S'assurer que le parent du header n'a pas overflow: hidden */
  body > #shared-header,
  html > body > #shared-header {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  
  /* FIX iOS: Surcharger la règle position: absolute de style.css qui peut interférer */
  /* Cette règle doit être APRÈS toutes les autres pour avoir la priorité */
  @supports (-webkit-touch-callout: none) {
    .header-area.h-style3,
    .header-area.h-style3.nav-fixed,
    #shared-header .header-area.h-style3,
    #shared-header .header-area.h-style3.nav-fixed {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      z-index: 999999 !important;
    }
  }
  
  /* S'assurer que tous les éléments de la page sont en dessous du header fixe sur mobile */
  body {
    padding-top: 64px !important;
  }
  
  /* S'assurer que le hero section commence après le header */
  section.hero-4,
  section.hero-3,
  section.hero-2,
  section.hero-1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* FIX: S'assurer que TOUS les éléments de la page sont en dessous du header lors du scroll */
  /* Sections, sliders, modals, etc. doivent avoir un z-index plus bas que le header */
  section,
  .section,
  .hero-4,
  .hero-3,
  .hero-2,
  .hero-1,
  .owl-carousel,
  .owl-stage-outer,
  .owl-stage,
  .owl-item,
  .slider,
  .modal,
  .popup,
  .overlay {
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* S'assurer que le scrollup button est en dessous du header */
  .scrollup {
    z-index: 999998 !important; /* Juste en dessous du header */
  }
  
  /* Sur desktop, retirer le padding-top car le header n'est pas fixe */
  @media (min-width: 768px) {
    body {
      padding-top: 0 !important;
    }
    
    .header-area.h-style3 {
      position: absolute !important;
    }
  }
  
  /* Hide topbar on mobile - Single bar only - NO SCROLLBAR, NO HEIGHT, NO SPACE */
  /* IMPORTANT: Keep hidden even when menu is open or after scroll - it should stay hidden on mobile */
  .h-style3 .nh3-topber,
  .h-style3.nav-fixed .nh3-topber,
  .header-area.h-style3 .nh3-topber,
  .header-area.h-style3.nav-fixed .nh3-topber {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 0 !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    max-width: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }
  
  /* Ensure topbar is visible on desktop (min-width: 768px) */
  @media (min-width: 768px) {
    .h-style3 .nh3-topber,
    .h-style3.nav-fixed .nh3-topber,
    .header-area.h-style3 .nh3-topber,
    .header-area.h-style3.nav-fixed .nh3-topber {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
      overflow: visible !important;
      position: relative !important;
      top: auto !important;
      left: auto !important;
      width: 100% !important;
      max-width: 100% !important;
      pointer-events: auto !important;
      z-index: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
      line-height: normal !important;
    }
    
    /* Show topbar children on desktop */
    .h-style3 .nh3-topber * {
      display: revert !important;
      visibility: visible !important;
      height: auto !important;
      margin: revert !important;
      padding: revert !important;
    }
  }
  
  .h-style3 .nh3-topber::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  
  /* Hide all topbar children on mobile */
  .h-style3 .nh3-topber * {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Ensure topbar children are visible on desktop */
  @media (min-width: 768px) {
    .h-style3 .nh3-topber * {
      display: revert !important;
      visibility: visible !important;
      height: auto !important;
      margin: revert !important;
      padding: revert !important;
    }
  }

  /* Single navbar bar - NO SCROLLBAR, NO MARGIN/PADDING, FIXED HEIGHT */
  /* IMPORTANT: Keep navbar visible even after scroll and when menu is open */
  /* FIX: z-index très élevé pour s'assurer que le header est toujours au-dessus */
  .h-style3 .nh3-navber,
  .h-style3.nav-fixed .nh3-navber,
  .header-area.h-style3 .nh3-navber,
  .header-area.h-style3.nav-fixed .nh3-navber {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    position: relative !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    /* Ensure navbar is exactly at top when topbar is hidden */
    top: 0 !important;
    z-index: 999999 !important; /* z-index très élevé pour rester au-dessus de tout */
  }
  .h-style3 .nh3-navber::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  /* Ensure no spacing from container/row/col */
  .h-style3 .nh3-navber .container,
  .h-style3 .nh3-navber .row,
  .h-style3 .nh3-navber .col-12,
  .h-style3 .nh3-navber .col-md-10 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .h-style3 .nh3-navber .main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 0 16px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    position: relative !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Mobile menu is now managed by mobile-menu-override.css */

  /* Logo - CENTERED in page (independent of hamburger button) */
  .h-style3 .nh3-navber .nav-brand {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
    width: auto !important;
    max-width: 183px !important;
  }
  .h-style3 .nh3-navber .nav-brand a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    width: 100%;
  }
  .h-style3 .nh3-navber .nav-brand img {
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
  }

  /* Hamburger button - Right */
  .h-style3 .nh3-navber .main-nav .main-menu-btn {
    display: flex !important;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100000 !important;
    flex-shrink: 0;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease;
    position: relative;
  }
  .h-style3 .nh3-navber .main-nav .main-menu-btn:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  .h-style3 .nh3-navber .main-nav .main-menu-btn:active {
    background: rgba(255, 255, 255, 0.12);
  }

  .h-style3 .nh3-navber .main-nav .main-menu-btn-icon,
  .h-style3 .nh3-navber .main-nav .main-menu-btn-icon:before,
  .h-style3 .nh3-navber .main-nav .main-menu-btn-icon:after {
    background: #fff;
    width: 24px;
    height: 2.5px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease;
    border-radius: 2px;
  }
  .h-style3 .nh3-navber .main-nav .main-menu-btn-icon {
    top: 50%;
    margin-top: -1.25px;
  }
  .h-style3 .nh3-navber .main-nav .main-menu-btn-icon:before {
    top: -8px;
  }
  .h-style3 .nh3-navber .main-nav .main-menu-btn-icon:after {
    top: 8px;
  }

  /* Hamburger to X - Support both checkbox and active class (like freshiceland_web) */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon,
  .h-style3 .nh3-navber .main-nav .main-menu-btn.active .main-menu-btn-icon {
    background: transparent;
  }
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before,
  .h-style3 .nh3-navber .main-nav .main-menu-btn.active .main-menu-btn-icon:before {
    top: 0;
    transform: translateX(-50%) rotate(45deg);
  }
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after,
  .h-style3 .nh3-navber .main-nav .main-menu-btn.active .main-menu-btn-icon:after {
    top: 0;
    transform: translateX(-50%) rotate(-45deg);
  }

  /* Menu checkbox */
  .h-style3 .nh3-navber .main-nav #main-menu-state {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
  }

  /* This rule is now inside @media (max-width: 767px) block above */

  /* Menu list - Force vertical layout - ONLY when position: fixed (in drawer) */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu[style*="position: fixed"],
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu.sm[style*="position: fixed"],
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint,
  .header-area .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu[style*="position: fixed"],
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu ul.sm-mint {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    padding-top: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    list-style: none !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    height: auto !important;
    align-items: stretch !important;
    position: static !important;
    overflow: visible !important;
    background: transparent !important;
    pointer-events: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    /* NO GAP - Menu starts immediately */
    border-top: none !important;
  }
  
  /* Override desktop .sm-mint styles (float: right, display: flex) - ONLY in drawer */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu[style*="position: fixed"] .sm-mint {
    float: none !important;
    display: block !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: auto !important;
    position: static !important;
    overflow: visible !important;
    padding: 0 !important;
    padding-top: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    /* NO GAP - Menu list starts immediately */
  }
  
  /* First menu item - NO margin-top to eliminate gap */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }

  /* Menu items - Force block display, no float - Override ALL desktop styles */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm > li,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu.sm > li,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu ul.sm-mint > li,
  .header-area .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-sizing: border-box !important;
    position: relative !important;
    align-items: stretch !important;
    flex-direction: column !important;
    background: transparent !important;
    flex: none !important;
  }
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li:last-child {
    border-bottom: none !important;
  }

  /* Menu links - Force full width, no float - Uniform styling */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > a,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm > li > a,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu.sm > li > a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 24px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    position: relative !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > a:hover,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > a:active,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm > li > a:hover,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm > li > a:active {
    background: rgba(255, 255, 255, 0.1) !important;
    padding-left: 32px !important;
    color: #ffffff !important;
  }
  
  /* Override any current page or active states to maintain consistency */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > a.is-current-page,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > a.is-current-parent,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li.current > a,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li.highlighted > a,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm > li > a.is-current-page,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm > li > a.is-current-parent {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > a.is-current-page::after,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > a.is-current-parent::after {
    display: none !important;
  }
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > a.is-current-page:hover,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > a.is-current-parent:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
  }

  /* Submenu arrow - RESPONSIVE */

  /* Submenus */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul {
    display: none !important;
    width: 100% !important;
    background: rgba(26, 58, 92, 0.95) !important;
    margin: 0 !important;
    padding: 10px 0 !important;
  }
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li.highlighted > ul,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li.current > ul,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > ul.submenu-open {
    display: block !important;
  }

  /* Submenu items - IMPROVED STYLING */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
    margin: 0 !important;
  }
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li:last-child {
    border-bottom: none !important;
  }

  /* Submenu links - IMPROVED with better spacing and visual hierarchy */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:link,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:visited,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:not(:hover):not(:active):not(:focus) {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 16px 20px 16px 40px !important;
    color: #ffffff !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    border-left: 3px solid transparent !important;
  }
  
  /* Improved hover state - smoother transition */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:hover,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:active,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:focus {
    background: rgba(86, 194, 226, 0.25) !important;
    color: #ffffff !important;
    padding-left: 44px !important;
    border-left-color: rgba(86, 194, 226, 0.6) !important;
  }
  
  /* Active/current page in submenu - Better indicator */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a.is-current-page {
    background: rgba(86, 194, 226, 0.3) !important;
    font-weight: 600 !important;
    border-left-color: rgba(86, 194, 226, 0.9) !important;
  }
  
  /* Override any vendor styles that might affect submenu text color - CRITICAL FOR VISIBILITY */
  /* Force white text on ALL submenu links, regardless of state */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul a,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul ul a,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul ul ul a,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul a:link,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul a:visited,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul a:hover,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul a:focus,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul a:active,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:link,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:visited,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:hover,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:focus,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:active {
    color: #ffffff !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
  }
  
  /* Ensure submenu background is dark enough for white text */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul ul {
    background: rgba(26, 58, 92, 0.95) !important;
  }
  
  /* FINAL OVERRIDE: Force white text on ALL submenu links - highest specificity */
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:link,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:visited,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:hover,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:active,
  .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint ul li a:focus {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* Body lock */
  body.menu-open {
    overflow: hidden !important;
    overscroll-behavior: contain;
  }

  /* Light mode */
  .header-area.header-light-bg .nh3-navber .main-menu-btn-icon,
  .header-area.header-light-bg .nh3-navber .main-menu-btn-icon:before,
  .header-area.header-light-bg .nh3-navber .main-menu-btn-icon:after {
    background: #000 !important;
  }
}


/* Styles pour adaptation automatique de la couleur du texte selon l'arrière-plan */
/* Par défaut: texte blanc (fond sombre) */
.header-area .nh3-topber ul.ht3-list li a,
.header-area .sm-mint > li > a,

/* Style par défaut: texte blanc (quand aucune classe n'est appliquée) */
.header-area:not(.header-light-bg):not(.header-dark-bg) .nh3-topber ul.ht3-list li a {
  color: #fff !important;
}
.header-area:not(.header-light-bg):not(.header-dark-bg) .sm-mint > li > a {
  color: #fff !important;
}

/* Quand l'arrière-plan est clair: texte noir */
.header-area.header-light-bg .nh3-topber ul.ht3-list li a {
  color: #000 !important;
}
.header-area.header-light-bg .nh3-topber ul.ht3-list li a i {
  color: #000 !important;
}
/* Bordures verticales supprimées pour .header-area.header-light-bg .nh3-navber nav .nav-brand */
.header-area.header-light-bg .sm-mint > li > a {
  color: #000 !important;
}
.header-area.header-light-bg .sm-mint > li > a:hover {
  color: #56c2e2 !important;
}
.header-area.header-light-bg .main-menu-btn-icon:after {
  background: #000 !important;
}

/* Quand l'arrière-plan est sombre: texte blanc (défaut) */
.header-area.header-dark-bg .nh3-topber ul.ht3-list li a {
  color: #fff !important;
}
.header-area.header-dark-bg .nh3-topber ul.ht3-list li a i {
  color: #fff !important;
}
.header-area.header-dark-bg .sm-mint > li > a {
  color: #fff !important;
}
  background: #fff !important;
}

/* Keep topbar background consistent in dark mode */
.header-area.header-dark-bg .nh3-topber {
  background: inherit !important;
}

/* Footer Logo Size */
section.footer-details .f-details img {
  max-width: 150px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  section.footer-details .f-details img {
    max-width: 120px;
    max-height: 50px;
  }
}

/* ================================================================
   SUBMENU ARROW - DESKTOP (>= 768px)
   ================================================================ */
@media (min-width: 768px) {
  /* Base styling for submenu arrow on desktop */
  html body .header-area.h-style3 .sm-mint > li > a .sub-arrow,
  html body .h-style3 .sm-mint > li > a .sub-arrow {
    position: absolute !important;
    top: 50% !important;
    margin-top: -3px !important;
    right: 20px !important;
    width: 0 !important;
    height: 0 !important;
    border-width: 6px 4.02px 0 4.02px !important;
    border-style: solid dashed dashed dashed !important;
    border-color: #ffffff transparent transparent transparent !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Hover state */
  html body .header-area.h-style3 .sm-mint > li > a:hover .sub-arrow,
  html body .header-area.h-style3 .sm-mint > li > a.highlighted .sub-arrow,
  html body .h-style3 .sm-mint > li > a:hover .sub-arrow,
  html body .h-style3 .sm-mint > li > a.highlighted .sub-arrow {
    border-color: #56c2e2 transparent transparent transparent !important;
  }
}

/* ================================================================
   OVERRIDE style.css line 5467 for range 992-1199px
   ================================================================ */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  /* Ultra high specificity to override .sm-mint a .sub-arrow { display: none; } */
  html body .header-area.h-style3 .sm-mint > li > a .sub-arrow,
  html body .h-style3 .sm-mint > li > a .sub-arrow,
  html body .h-style3 .sm-mint a .sub-arrow {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ================================================================
   SUBMENU ARROW - MOBILE (< 768px)
   ================================================================ */
@media (max-width: 767px) {
  /* Mobile menu - show arrow when menu is active (checked or .active class) */
  html body #main-menu-state:checked ~ #main-menu .sm-mint > li > a .sub-arrow,
  html body #main-menu.active .sm-mint > li > a .sub-arrow,
  html body .h-style3 #main-menu-state:checked ~ #main-menu .sm-mint > li > a .sub-arrow,
  html body .h-style3 #main-menu.active .sm-mint > li > a .sub-arrow,
  html body .h-style3 .sm-mint > li > a .sub-arrow {
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-width: 6px 5px 0 5px !important;
    border-style: solid !important;
    border-color: rgba(255, 255, 255, 0.9) transparent transparent transparent !important;
    transition: transform 0.3s ease !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
  }
  
  /* Rotate arrow when submenu is open */
  html body #main-menu-state:checked ~ #main-menu .sm-mint > li.highlighted > a .sub-arrow,
  html body #main-menu.active .sm-mint > li.highlighted > a .sub-arrow,
  html body #main-menu-state:checked ~ #main-menu .sm-mint > li:hover > a .sub-arrow,
  html body #main-menu.active .sm-mint > li:hover > a .sub-arrow {
    transform: translateY(-50%) rotate(180deg) !important;
  }
}


/* ================================================================
   FINAL OVERRIDE - MOBILE SUB-ARROW (ultra high specificity)
   Must be at the END to override mobile-menu-override.css
   Style: Use "+" icon like in mobile-menu-override.css
   ================================================================ */
@media (max-width: 767px) {
  /* Force display with maximum specificity - Use box style with "+" */
  html body .header-area.h-style3 #main-menu-state:checked ~ #main-menu .sm-mint > li > a .sub-arrow,
  html body .header-area.h-style3 #main-menu.active .sm-mint > li > a .sub-arrow,
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > a .sub-arrow,
  html body .h-style3 .nh3-navber .main-nav #main-menu.active .sm-mint > li > a .sub-arrow,
  html body #main-menu-state:checked ~ #main-menu .sm-mint > li > a .sub-arrow,
  html body #main-menu.active .sm-mint > li > a .sub-arrow,
  html body .h-style3 #main-menu-state:checked ~ #main-menu .sm-mint > li > a .sub-arrow,
  html body .h-style3 #main-menu.active .sm-mint > li > a .sub-arrow,
  html body .h-style3 .sm-mint > li > a .sub-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    margin-top: -16px !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px !important;
    border: none !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
  }
  
  /* "+" icon with ::before */
  html body .header-area.h-style3 #main-menu-state:checked ~ #main-menu .sm-mint > li > a .sub-arrow::before,
  html body .header-area.h-style3 #main-menu.active .sm-mint > li > a .sub-arrow::before,
  html body .h-style3 .nh3-navber .main-nav #main-menu-state:checked ~ #main-menu .sm-mint > li > a .sub-arrow::before,
  html body .h-style3 .nh3-navber .main-nav #main-menu.active .sm-mint > li > a .sub-arrow::before,
  html body #main-menu-state:checked ~ #main-menu .sm-mint > li > a .sub-arrow::before,
  html body #main-menu.active .sm-mint > li > a .sub-arrow::before,
  html body .h-style3 #main-menu-state:checked ~ #main-menu .sm-mint > li > a .sub-arrow::before,
  html body .h-style3 #main-menu.active .sm-mint > li > a .sub-arrow::before,
  html body .h-style3 .sm-mint > li > a .sub-arrow::before {
    content: '+' !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    line-height: 1 !important;
    display: block !important;
  }
  
  /* Change "+" to "−" when submenu is open */
  html body #main-menu-state:checked ~ #main-menu .sm-mint > li.highlighted > a .sub-arrow::before,
  html body #main-menu.active .sm-mint > li.highlighted > a .sub-arrow::before,
  html body .h-style3 #main-menu-state:checked ~ #main-menu .sm-mint > li.highlighted > a .sub-arrow::before,
  html body .h-style3 #main-menu.active .sm-mint > li.highlighted > a .sub-arrow::before,
  html body .h-style3 .sm-mint > li.highlighted > a .sub-arrow::before {
    content: '−' !important;
  }
  
  /* Hover effect */
  html body #main-menu-state:checked ~ #main-menu .sm-mint > li > a .sub-arrow:hover,
  html body #main-menu.active .sm-mint > li > a .sub-arrow:hover,
  html body .h-style3 .sm-mint > li > a .sub-arrow:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.05) !important;
  }
}

/* ================================================================
   ULTIMATE OVERRIDE - Force sub-arrow display on mobile
   Absolute final rule with ALL possible selectors
   ================================================================ */
@media (max-width: 767px) {
  /* Nuclear option: Force display on ANY sub-arrow in mobile */
  html body .sm-mint li > a .sub-arrow,
  html body #main-menu li > a .sub-arrow,
  html body .h-style3 .sm-mint li > a .sub-arrow,
  html body .h-style3 #main-menu li > a .sub-arrow {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure ::before content is always visible */
  html body .sm-mint li > a .sub-arrow::before,
  html body #main-menu li > a .sub-arrow::before,
  html body .h-style3 .sm-mint li > a .sub-arrow::before,
  html body .h-style3 #main-menu li > a .sub-arrow::before {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}