.navbar {
  padding-top: clamp(0.75rem, 1.25vw, 1.5rem) !important;
  padding-bottom: clamp(0.75rem, 1.25vw, 1.5rem) !important;
  gap: 3.05vw;
  height: 3.5rem;
}

#navBar {
  justify-content: space-between;
  z-index: 20;
  box-shadow: 0px 5px 10px 0px rgba(88, 88, 88, 0.0705882353) !important;
}

#navBar.scrolled {
  background-color: #003A36 !important;
}

.navbar-brand {
  padding: 0px !important;
  margin-left: 0px !important;
  font-size: unset;
}

#navBar.scrolled #navbarNav .navbar-nav .dropdown-menu .items ul.sub-menu li a {
  display: flex;
  width: 100%;
  color: #202025;
  font-family: "Host Grotesk";
  margin-bottom: 0px !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.62px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.dropdown-menu {
  left: unset !important;
  right: 4%;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 10px 0px rgba(88, 88, 88, 0.1294117647);
  border: 0px solid #FFFFFF !important;
}

#navBar.scrolled .login-btn {
  color: #F2BC1B;
}

.wrapper-header {
  padding-left: 3% !important;
  padding-right: 3% !important;
}

#navBar.scrolled .try-btn {
  background-color: #F2BC1B !important;
  color: #FFFFFF;
}

.navbar-light .navbar-nav .nav-item a {
  color: #202025;
  font-size: clamp(15px, 1.04vw, 19px);
  font-family: "Host Grotesk";
  font-weight: 500;
  display: flex;
  width: 100%;
}

.custom-dropdown-toggle::after {
  display: none !important;
}

#right-menu {
  gap: 1.66vw;
}

.login-btn:hover {
  color: #027373;
}

.login-btn:focus {
  background-color: #8BBFBF;
}

#right-menu a {
  padding: clamp(8px, 0.83vw, 1.83vw) clamp(12px, 1.11vw, 2.11vw) !important;
  border-radius: clamp(20px, 1.4vw, 30px);
  text-decoration: none;
  text-decoration: none;
  padding: 0px;
  font-family: "Host Grotesk";
  font-size: clamp(12px, 0.97vw, 1rem);
  font-weight: 500;
  line-height: clamp(12px, 1.293vw, 1rem);
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  height: clamp(28px, 2.7777vw, 56px);
}

.navbar-light .navbar-toggler {
  color: #202025;
  border: none !important;
}

.wrapper-header {
  padding-left: 3% !important;
  padding-right: 3% !important;
}

@media screen and (min-width: 2400px) and (max-width: 2999px) {
  .wrapper-header {
    padding-left: 17.5% !important;
    padding-right: 17.5% !important;
  }
}
@media screen and (min-width: 3000px) {
  .wrapper-header {
    padding-left: 32.5% !important;
    padding-right: 32.5% !important;
  }
}
@media screen and (max-width: 768px) {
  #right-menu {
    flex-direction: column;
  }
  #right-menu .login-btn {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}
.login-btn {
  color: #027373;
}

.login-btn:hover {
  background-color: #E6F1F1;
}

#navBar.scrolled .login-btn:hover {
  background-color: #FEF8E8;
}

#navBar.scrolled .login-btn:focus {
  background-color: #FBEAB8;
}

#navBar.scrolled .try-btn:hover {
  background-color: #F5C949 !important;
}

#navBar.scrolled .try-btn:focus {
  background-color: #DCAB19 !important;
}

.items .sub-menu {
  list-style: none;
}

.items .sub-menu {
  padding: 0px;
}

.header-sub-menu .sub-menu li {
  padding: 0.625rem 0.5rem !important;
}

.header-sub-menu .sub-menu li:hover {
  background-color: #FBFBFD;
}

.header-sub-menu .sub-menu li:focus {
  background-color: #F7F7F9;
}

.header-sub-menu .sub-menu li:focus-visible {
  background-color: #F7F7F9;
  outline: none;
}

.header-sub-menu {
  padding: 0.25rem !important;
}

.items .sub-menu li a:hover {
  text-decoration: none;
  color: #027373;
}

.items .sub-menu li {
  padding: 0.75rem 1rem;
  width: 100%;
}

#navbarNav .dropdown-menu {
  border: none;
  box-shadow: 0px 0.5px 4px 0px rgba(177, 212, 212, 0.3098039216);
  width: 216px;
  min-width: 150px;
}

#navBar a.menu-item {
  display: flex !important;
  align-items: center;
  gap: 4px;
  color: #027373;
  font-weight: 500;
}

.sub-menu-item {
  display: flex;
  width: 100%;
  font-family: "Host Grotesk";
  font-weight: 400;
  color: #202025 !important;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

#kagoo-brand {
  color: #003A36;
}

#navBar.scrolled #kagoo-brand {
  color: #FFFFFF;
}

.menu-item:hover .icon_k {
  color: #027373;
  cursor: auto;
}

#navBar .navbar-nav .nav-item .menu-item:hover {
  color: #027373;
}

.icon_k {
  color: #027373;
}

#product-dropdown {
  padding: clamp(8px, 0.83vw, 1.83vw) clamp(12px, 1.11vw, 2.11vw) !important;
  border-radius: clamp(20px, 1.4vw, 30px);
  font-family: "Host Grotesk";
  font-size: clamp(12px, 0.97vw, 1rem);
  font-weight: 500;
  line-height: clamp(12px, 1.293vw, 1rem);
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  height: clamp(28px, 2.7777vw, 56px);
}

#product-dropdown:hover {
  background-color: #E6F1F1;
}

#product-dropdown:focus, #product-dropdown:active {
  background-color: #B1D4D4;
}

#navBar.scrolled #product-dropdown:hover {
  background-color: #F2BC1B !important;
  color: #FFFFFF;
}

#navBar.scrolled #product-dropdown:focus {
  background-color: #DCAB19 !important;
  color: #FFFFFF;
}

#navBar.scrolled #product-dropdown, #navBar.scrolled .icon_k {
  color: #FFFFFF;
}/*# sourceMappingURL=header.css.map */