.header-top {
  /*background-color: #FFF2F4;*/
  font-size: 14px;
  padding: 3px 0;
  font-weight: 400;
}
.navbar-brand img {
  height: 45px;
}
/* .search-box {
  max-width: 250px;
} */
/* @media (max-width: 991px) {
  .search-box {
    width: 100%;
    margin-top: 10px;
  }
} */

.navbar .dropdown-menu {
  transition: all 0.2s ease-in-out;
}
.navbar .dropdown:hover > .dropdown-menu {
  display: block;
}

/* Submenu styling */
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: 0.5rem;
  display: none;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

/* The last several industries in the list sit near the bottom of the
   viewport, so their submenu (which opens with top:0, i.e. flush with the
   trigger's top edge) grows downward off the bottom of the screen and needs
   scrolling to see — instead they should open upward, flush with the
   trigger's bottom edge. */
.dropdown-submenu:nth-last-child(-n+7) > .dropdown-menu {
  top: auto;
  bottom: 0;
}

/* Optional: make icons and text aligned nicely */
.c-icon {
  height: 18px;
  width: 18px;
  object-fit: contain;
}

.nav-link:focus-visible {
    outline: 0 !important;
    box-shadow: unset !important;
}

.toggle-none::after {
    display: none;
}

.site-header {
    font-family: 'Poppins', sans-serif !important;
  }


.green_color {
    color: #17484a !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-400 {
  font-weight: 400 !important;
}

.gray_color2 {
    color: #555;
}

.right{
    text-align: end;
}

.fa-classic, .fa-regular, .fa-solid, .far, .fas {
    font-family: "Font Awesome 6 Free";
}

/* These two had no @media guard, so they applied at every screen width
   with !important — beating the desktop submenu positioning above
   (top:0; left:100%) and pushing the sub-category list to overlap/clip
   against its parent item instead of opening cleanly beside it. Scoped
   to the collapsed-navbar breakpoint so desktop keeps the side-opening
   submenu.
   The old top:60%/left:85% values were percentages of the submenu's own
   parent <li> (just the height/width of that one row), so the submenu
   floated off to a disconnected spot instead of sitting under its parent
   item. On mobile it should just flow inline under the row it belongs
   to, like an accordion section, so switch to position:static there. */
@media (max-width: 991px) {
    .navbar-nav .dropdown-submenu .dropdown-menu {
        position: static !important;
        width: 100%;
        margin-left: 0;
        box-shadow: none;
    }
}

/* newdesign/styles.css has a global `button { flex:1; padding:10px;
   box-shadow:...; font-size:16px; }` rule meant for CTA buttons — with
   nothing more specific to override it, the toggler (a plain <button>)
   inherited flex:1 and stretched to fill the whole navbar row (~216px wide)
   plus an unwanted shadow. Reset it back to a compact, fixed-size icon
   button.
   Scoped to max-width:991px (matching navbar-expand-lg's own collapse
   breakpoint) — an earlier version set "display: inline-flex" unconditionally,
   which ties in specificity with Bootstrap's own
   ".navbar-expand-lg .navbar-toggler { display: none }" rule that's supposed
   to hide the toggler on desktop; since this file loads after Bootstrap's
   CSS, the unconditional display won that tie and the button showed on every
   screen size instead of mobile only. */
@media (max-width: 991px) {
    .site-header .navbar-toggler {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        font-size: 1.1rem;
        box-shadow: none;
        border: 1px solid rgba(0, 0, 0, .15);
        border-radius: 6px;
        background: transparent;
    }
    .site-header .navbar-toggler:focus {
        box-shadow: 0 0 0 2px rgba(23, 72, 74, .25);
        outline: none;
    }
}

/* display:flex here used to carry !important with no @media guard, which
   forced #mainNavbar to always render expanded on every screen size — there
   was also no navbar-toggler button in the markup at all, so mobile visitors
   had no way to close the menu (it was permanently open). Scoped to the
   navbar-expand-lg desktop breakpoint now; below that, Bootstrap's own
   .collapse (not.show => display:none) governs visibility, toggled by the
   "3 line" button. */
@media (min-width: 992px) {
    .site-header .navbar-collapse {
        display: flex !important;
        flex-grow: 1;
        align-items: center;
    }
}

.site-header .navbar-nav {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.site-header .search-form {
    margin-left: auto;
}

@media (max-width: 991px) {
    .site-header .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    /* Only force flex (and thus visible) once Bootstrap has added .show —
       otherwise leave display alone so .collapse's own display:none applies
       and the menu starts closed. */
    .site-header .navbar-collapse.show {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .site-header .search-form {
        margin-left: 0;
        width: 100%;
        margin-top: 10px;
    }
}