
/* Hamburger positioning */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 18px;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 25px;
  z-index: 1001; /* Above everything else */
}

.hamburger span {
  display: block;
  height: 3px;
  background: #c4baba;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Mobile nav hidden by default */
.mobile-nav {
  background: #181818;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease-in-out;
}
/* Morph into X */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}


/* Slide down when active */
.mobile-nav.active {
  max-height: 500px; /* adjust based on menu size */
}

/* Mobile nav items */
.mobile-nav .nav-item {
  padding: 1px;

  padding-right: 30px;
}

.mobile-nav .nav-item a {
  text-decoration: none;
  color: #e4e1e1;
  font-size: 12px;
}

/* Make sure mobile nav only shows on small screens */
@media (min-width: 768px) {
  .hamburger {
    display: none;
  }
  .mobile-nav {
    display: none;
  }
}


    section.product {
      display: none;
      padding: 30px 20px;
      border: 1px solid #ddd;
      border-radius: 10px;
      background-color: #f9f9f9;
      margin-bottom: 20px;
      animation: fadeIn 0.5s ease-in-out;
    }
@media (prefers-color-scheme: dark) {
 section.product{
      border: 1px solid #ffffff;

      background-color: #1b1b1b
}
}


    section.product img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
      margin-bottom: 15px;
    }

    section.product.active {
      display: block;
    }

    h2 {
      color: #333;
    }

    @media (prefers-color-scheme: dark) {
    h2 {
          color: #ffffff;

    }
   }


    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 768px) {
      .navbar a {
        font-size: 12px;
        padding: 8px 10px;
      }
    }


    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f8f8f8;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      max-width: 100%;
      margin: 60px auto;
      padding: 20px;
    }

    .text-box {
      flex: 1 1 300px;
      padding: 20px;
      max-width: 1000px;
     
    }

    .text-box h2 {
      font-size: 28px;
      margin-bottom: 10px;
    }

    .text-box p {
      font-size: 16px;
      color: #ffffff;
      line-height: 1.6;
    }

    .collage {
      flex: 1 1 800px;
      position: relative;
      max-width: 500px;
      height: 700px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }

    .photo {
      position: absolute;
      transition: all 0.4s ease;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 4px 30px rgba(0,0,0,0.2);
    }

    .photo:hover {
      z-index: 10;
      transform: scale(1.1);
    }

    .photo1 {
      width: 180px;
      height: 250px;
      top: 0;
      left: 100px;
    }

    .photo2 {
      width: 200px;
      height: 160px;
      top: 210px;
      left: 230px;
    }

    .photo3 {
      width: 230px;
      height: 250px;
      top: 190px;
      left: 20px;
    }

    .photo4 {
      width: 180px;
      height: 120px;
      top: 10px;
      left: 300px;
    }
    .photo5 {
      width: 180px;
      height: 140px;
      top: 380px;
      left: 270px;
    }
    .collage img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
    }

    @media (max-width: 768px) {
      .container {
        flex-direction: row-reverse;
      }
      .collage {
        margin-top: 30px;
        height: 300px;
      }
    }
    /* Hide horizontal scrollbar but allow horizontal scroll */
.carousel-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

.carousel-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

      a.button {
      display: inline-block;
      background-color: #28a745;
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      text-decoration: none;
      font-weight: bold;
    }
    .cta {
      text-align: center;
      padding: 2rem;
    }

    .features {
      background-color: #e9ecef;
      padding: 2rem;
      text-align: center;
    }
    
     
    
   
    .nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--bs-link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: var(--bs-secondary-color);
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.nav-link {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .nav-link {
        transition: none
    }
}

.nav-link:hover,.nav-link:focus {
    color: var(--bs-nav-link-hover-color);
    text-decoration: none
}

.nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(0,132,137,.25)
}

.nav-link.disabled,.nav-link:disabled {
    color: var(--bs-nav-link-disabled-color);
    pointer-events: none;
    cursor: default
}

.nav-tabs {
    --bs-nav-tabs-border-width: var(--bs-border-width);
    --bs-nav-tabs-border-color: var(--bs-border-color);
    --bs-nav-tabs-border-radius: var(--bs-border-radius);
    --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
    --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
    --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
    border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)
}

.nav-tabs .nav-link {
    margin-bottom: calc(-1*var(--bs-nav-tabs-border-width));
    border: var(--bs-nav-tabs-border-width) solid transparent;
    border-top-left-radius: var(--bs-nav-tabs-border-radius);
    border-top-right-radius: var(--bs-nav-tabs-border-radius)
}

.nav-tabs .nav-link:hover,.nav-tabs .nav-link:focus {
    isolation: isolate;
    border-color: var(--bs-nav-tabs-link-hover-border-color)
}

.nav-tabs .nav-link.active,.nav-tabs .nav-item.show .nav-link {
    color: var(--bs-nav-tabs-link-active-color);
    background-color: var(--bs-nav-tabs-link-active-bg);
    border-color: var(--bs-nav-tabs-link-active-border-color)
}

.nav-tabs .dropdown-menu {
    margin-top: calc(-1*var(--bs-nav-tabs-border-width));
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #008489
}

.nav-pills .nav-link {
    border-radius: var(--bs-nav-pills-border-radius)
}

.nav-pills .nav-link.active,.nav-pills .show>.nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: var(--bs-nav-pills-link-active-bg)
}

.nav-underline {
    --bs-nav-underline-gap: 1rem;
    --bs-nav-underline-border-width: 0.125rem;
    --bs-nav-underline-link-active-color: var(--bs-emphasis-color);
    gap: var(--bs-nav-underline-gap)
}

.nav-underline .nav-link {
    padding-right: 0;
    padding-left: 0;
    border-bottom: var(--bs-nav-underline-border-width) solid transparent
}

.nav-underline .nav-link:hover,.nav-underline .nav-link:focus {
    border-bottom-color: currentcolor
}

.nav-underline .nav-link.active,.nav-underline .show>.nav-link {
    font-weight: 700;
    color: var(--bs-nav-underline-link-active-color);
    border-bottom-color: currentcolor
}

.nav-fill>.nav-link,.nav-fill .nav-item {
    flex: 1 1 auto;
    text-align: center
}

.nav-justified>.nav-link,.nav-justified .nav-item {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center
}

.nav-fill .nav-item .nav-link,.nav-justified .nav-item .nav-link {
    width: 100%
}

.tab-content>.tab-pane {
    display: none
}

.tab-content>.active {
    display: block
}

.navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0.5rem;
    --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
    --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);
    --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
    --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-padding-y: 0.3125rem;
    --bs-navbar-brand-margin-end: 1rem;
    --bs-navbar-brand-font-size: 1.25rem;
    --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-nav-link-padding-x: 0.5rem;
    --bs-navbar-toggler-padding-y: 0.25rem;
    --bs-navbar-toggler-padding-x: 0.75rem;
    --bs-navbar-toggler-font-size: 1.25rem;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%2872, 72, 72, 0.75%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e");
    --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
    --bs-navbar-toggler-border-radius: var(--bs-border-radius);
    --bs-navbar-toggler-focus-width: 0.25rem;
    --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)
}

.navbar>.container,.navbar>.container-fluid,.navbar>.container-sm,.navbar>.container-md,.navbar>.container-lg,.navbar>.container-xl,.navbar>.container-xxl {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between
}

.navbar-brand {
    padding-top: var(--bs-navbar-brand-padding-y);
    padding-bottom: var(--bs-navbar-brand-padding-y);
    margin-right: var(--bs-navbar-brand-margin-end);
    font-size: var(--bs-navbar-brand-font-size);
    color: var(--bs-navbar-brand-color);
    white-space: nowrap
}

.navbar-brand:hover,.navbar-brand:focus {
    color: var(--bs-navbar-brand-hover-color);
    text-decoration: none
}

.navbar-nav {
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--bs-navbar-color);
    --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
    --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.navbar-nav .nav-link.active,.navbar-nav .nav-link.show {
    color: var(--bs-navbar-active-color)
}

.navbar-nav .dropdown-menu {
    position: static
}

.navbar-text {
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: var(--bs-navbar-color)
}

.navbar-text a,.navbar-text a:hover,.navbar-text a:focus {
    color: var(--bs-navbar-active-color)
}

.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center
}

.navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: var(--bs-navbar-color);
    background-color: transparent;
    border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition)
}

@media (prefers-reduced-motion:reduce) {
    .navbar-toggler {
        transition: none
    }
}

.navbar-toggler:hover {
    text-decoration: none
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width)
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: var(--bs-navbar-toggler-icon-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

.navbar-nav-scroll {
    max-height: var(--bs-scroll-height, 75vh);
    overflow-y: auto
}

@media (min-width: 576px) {
    .navbar-expand-sm {
        flex-wrap:nowrap;
        justify-content: flex-start
    }

    .navbar-expand-sm .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-sm .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-sm .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x)
    }

    .navbar-expand-sm .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-sm .navbar-collapse {
        display: flex!important;
        flex-basis: auto
    }

    .navbar-expand-sm .navbar-toggler {
        display: none
    }

    .navbar-expand-sm .offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto!important;
        height: auto!important;
        visibility: visible!important;
        background-color: transparent!important;
        border: 0!important;
        transform: none!important;
        transition: none
    }

    .navbar-expand-sm .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-sm .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

@media (min-width: 768px) {
    .navbar-expand-md {
        flex-wrap:nowrap;
        justify-content: flex-start
    }

    .navbar-expand-md .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-md .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-md .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x)
    }

    .navbar-expand-md .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-md .navbar-collapse {
        display: flex!important;
        flex-basis: auto
    }

    .navbar-expand-md .navbar-toggler {
        display: none
    }

    .navbar-expand-md .offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto!important;
        height: auto!important;
        visibility: visible!important;
        background-color: transparent!important;
        border: 0!important;
        transform: none!important;
        transition: none
    }

    .navbar-expand-md .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-md .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg {
        flex-wrap:nowrap;
        justify-content: flex-start
    }

    .navbar-expand-lg .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x)
    }

    .navbar-expand-lg .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-lg .navbar-collapse {
        display: flex!important;
        flex-basis: auto
    }

    .navbar-expand-lg .navbar-toggler {
        display: none
    }

    .navbar-expand-lg .offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto!important;
        height: auto!important;
        visibility: visible!important;
        background-color: transparent!important;
        border: 0!important;
        transform: none!important;
        transition: none
    }

    .navbar-expand-lg .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-lg .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

@media (min-width: 1200px) {
    .navbar-expand-xl {
        flex-wrap:nowrap;
        justify-content: flex-start
    }

    .navbar-expand-xl .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-xl .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-xl .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x)
    }

    .navbar-expand-xl .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-xl .navbar-collapse {
        display: flex!important;
        flex-basis: auto
    }

    .navbar-expand-xl .navbar-toggler {
        display: none
    }

    .navbar-expand-xl .offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto!important;
        height: auto!important;
        visibility: visible!important;
        background-color: transparent!important;
        border: 0!important;
        transform: none!important;
        transition: none
    }

    .navbar-expand-xl .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-xl .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

@media (min-width: 1400px) {
    .navbar-expand-xxl {
        flex-wrap:nowrap;
        justify-content: flex-start
    }

    .navbar-expand-xxl .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-xxl .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-xxl .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x)
    }

    .navbar-expand-xxl .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-xxl .navbar-collapse {
        display: flex!important;
        flex-basis: auto
    }

    .navbar-expand-xxl .navbar-toggler {
        display: none
    }

    .navbar-expand-xxl .offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto!important;
        height: auto!important;
        visibility: visible!important;
        background-color: transparent!important;
        border: 0!important;
        transform: none!important;
        transition: none
    }

    .navbar-expand-xxl .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-xxl .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

.navbar-expand {
    flex-wrap: nowrap;
    justify-content: flex-start
}

.navbar-expand .navbar-nav {
    flex-direction: row
}

.navbar-expand .navbar-nav .dropdown-menu {
    position: absolute
}

.navbar-expand .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x)
}

.navbar-expand .navbar-nav-scroll {
    overflow: visible
}

.navbar-expand .navbar-collapse {
    display: flex!important;
    flex-basis: auto
}

.navbar-expand .navbar-toggler {
    display: none
}

.navbar-expand .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto!important;
    height: auto!important;
    visibility: visible!important;
    background-color: transparent!important;
    border: 0!important;
    transform: none!important;
    transition: none
}

.navbar-expand .offcanvas .offcanvas-header {
    display: none
}

.navbar-expand .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible
}

.navbar-dark,.navbar[data-bs-theme=dark] {
    --bs-navbar-color: rgba(255, 255, 255, 0.55);
    --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%28255, 255, 255, 0.55%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e")
}

[data-bs-theme=dark] .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%28255, 255, 255, 0.55%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e")
}
html {
    min-height: 100%;
    position: relative
}

:root {
    /*--navbar-primary-height: 64px;*/
    --navbar-banner-height: 0px;
    --navbar-z-index: 1
}

.navbar-primary {
    padding-top: 0;
    padding-bottom: 0;
    height: calc(var(--navbar-primary-height) + var(--navbar-banner-height));
    z-index: var(--navbar-z-index)
}

.navbar-primary .navbar-container {
    padding-left: 21px;
    padding-right: 24px
}

.navbar-default {
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.1)
}

body.has-notifications-permission-banner .navbar-primary {
    flex-direction: column
}

body.with-fixed-navbar {
    padding-top: calc(var(--navbar-primary-height) + var(--navbar-banner-height))
}

body.with-fixed-navbar .navbar-primary {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    --navbar-z-index: 200
}

.navbar-brand-desktop {
    align-items: center;
    height: var(--navbar-primary-height);
    --bs-navbar-brand-padding-y: 13px;
    --bs-navbar-brand-margin-end: 30px
}



.navbar-main-menu-desktop .nav-item-services {
    position: unset
}

.navbar-main-menu-desktop .services-menu {
    padding: 0;
    width: 100%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    --services-menu-height: unset;
    --services-menu-left-column-width: 210px
}

@media (min-width: 576px) {
    .navbar-main-menu-desktop .services-menu {
        width:540px
    }
}

@media (min-width: 768px) {
    .navbar-main-menu-desktop .services-menu {
        width:720px
    }
}

@media (min-width: 992px) {
    .navbar-main-menu-desktop .services-menu {
        width:960px
    }
}

@media (min-width: 1200px) {
    .navbar-main-menu-desktop .services-menu {
        width:1000px
    }
}

@media (min-width: 1400px) {
    .navbar-main-menu-desktop .services-menu {
        left:auto;
        top: auto;
        right: auto
    }
}

@media screen and (min-width: 1200px) {
    .navbar-main-menu-desktop .services-menu {
        --services-menu-left-column-width:234px
    }
}

.navbar-main-menu-desktop .services-menu .columns-wrap {
    display: flex
}

.navbar-main-menu-desktop .services-menu ul {
    list-style: none;
    padding: 8px 0
}

.navbar-main-menu-desktop .services-menu .left-column {
    width: var(--services-menu-left-column-width);
    min-width: var(--services-menu-left-column-width)
}

.navbar-main-menu-desktop .services-menu .left-column.open {
    border-right: 1px solid #e5e5e5
}

.navbar-main-menu-desktop .services-menu .left-column .dropdown-item {
    padding-right: 30px
}

.navbar-main-menu-desktop .services-menu .right-column {
    min-width: 0
}

.navbar-main-menu-desktop .services-menu .right-column .dropdown-item {
    overflow: hidden;
    text-overflow: ellipsis
}

.navbar-main-menu-desktop .services-menu .dropdown-item {
    position: relative
}

.navbar-main-menu-desktop .services-menu .dropdown-item .caret {
    position: absolute;
    right: 10px;
    top: 11px
}

.navbar-main-menu-desktop .services-menu .subcategory-menu {
    min-width: 200px;
    max-height: var(--services-menu-height);
    -moz-column-fill: auto;
    column-fill: auto
}

.navbar-main-menu-desktop .services-menu .subcategory-menu.long {
    -moz-column-fill: balance;
    column-fill: balance;
    max-height: 80vh
}

.navbar-main-menu-desktop .services-menu .view-all {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e5e5
}

.navbar-main-menu-desktop .navbar-nav {
    height: var(--navbar-primary-height)
}

.navbar-main-menu-desktop .navbar-nav .nav-item,.navbar-main-menu-desktop .navbar-nav .nav-link,.navbar-main-menu-desktop .navbar-nav .menu-item-wrap {
    display: flex;
    align-items: center;
    height: 100%
}

.navbar-main-menu-desktop .navbar-nav .nav-link:focus-visible {
    box-shadow: none
}

.navbar-main-menu-desktop .navbar-nav .nav-item .nav-link {
    --bs-nav-link-font-weight: 600;
    line-height: 20px;
    padding: 0 15px;
    white-space: nowrap
}

.navbar-main-menu-desktop .navbar-nav .nav-item .nav-link .icon-dropdown {
    font-size: 12px;
    vertical-align: baseline;
    margin-left: 8px;
    margin-top: -1px
}

.navbar-main-menu-desktop .navbar-nav .nav-item .nav-link .menu-item-wrap {
    padding-top: 2px;
    border-bottom: 2px solid transparent
}

.navbar-main-menu-desktop .navbar-nav .nav-item .nav-link.show .menu-item-wrap,.navbar-main-menu-desktop .navbar-nav .nav-item .nav-link.active .menu-item-wrap,.navbar-main-menu-desktop .navbar-nav .nav-item:hover .menu-item-wrap,.navbar-main-menu-desktop .navbar-nav .nav-item:focus .menu-item-wrap {
    border-color: #008489
}

.navbar-main-menu-desktop .navbar-nav .nav-item .dropdown-menu {
    top: calc(2px + var(--navbar-primary-height));
    --bs-dropdown-spacer: 0
}

.navbar-main-menu-desktop .navbar-nav .nav-item .dropdown-menu .dropdown-item {
    --bs-dropdown-item-padding-y: 10px;
    --bs-dropdown-item-padding-x: 15px;
    padding-right: calc(2*var(--bs-dropdown-item-padding-x));
    min-width: 150px
}

.navbar-main-menu-desktop .navbar-nav .nav-item .dropdown-menu:before {
    position: absolute;
    display: block;
    width: 100%;
    height: 4px;
    top: -5px;
    content: ""
}

.navbar-main-menu-desktop .navbar-nav .nav-item .dropdown-menu strong {
    display: block;
    margin-bottom: 3px;
    font-weight: 600
}

.navbar-main-menu-desktop .navbar-nav .nav-item .dropdown-menu small {
    display: block;
    font-size: 90%;
    color: #666
}



#navbarNotificationsDropdown .alert-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    margin-left: 12px;
    margin-top: -15px;
    background-color: #fe595c
}

#navbarNotificationsDropdownMenu {
    right: -139px!important;
    left: auto;
    width: 350px;
    padding: 0
}

#navbarNotificationsDropdownMenu .loader-wrap {
    text-align: center
}

#navbarNotificationsDropdownMenu .dropdown-item {
    padding: 20px;
    white-space: normal
}

#navbarNotificationsDropdownMenu>li {
    border-top: 1px solid #ddd
}

#navbarNotificationsDropdownMenu>li:first-child {
    border-top: none
}

#navbarNotificationsDropdownMenu>li:first-child>.dropdown-item {
    border-top-left-radius: var(--bs-dropdown-border-radius);
    border-top-right-radius: var(--bs-dropdown-border-radius)
}

#navbarNotificationsDropdownMenu>li:last-child>.dropdown-item {
    border-bottom-left-radius: var(--bs-dropdown-border-radius);
    border-bottom-right-radius: var(--bs-dropdown-border-radius)
}



#navbarUserDropdownDesktopMenu {
    padding: 8px 0;
    right: 0!important;
    left: auto;
    min-width: 210px
}

#navbarUserDropdownDesktopMenu .dropdown-item {
    --bs-dropdown-item-padding-y: 12px!important
}

#navbarUserDropdownDesktopMenu .line-online {
    margin-bottom: 0
}

#navbarUserDropdownDesktopMenu .line-online.form-switch {
    padding-left: 0
}

#navbarUserDropdownDesktopMenu .line-online .form-check-label {
    cursor: pointer
}

#navbarUserDropdownDesktopMenu .line-online .form-check-input {
    float: right;
    margin-top: 3px;
    cursor: pointer
}

#navbarUserDropdownDesktopMenu .divider hr {
    margin: 4px 0
}

#navbarUserDropdownDesktopMenu .icon-right {
    float: right
}

.navbar-nav-user-desktop .navbar-user-menu-icon {
    font-size: 20px
}

.navbar-nav-user-desktop .navbar-user-menu-icon {
    font-size: 20px
}

.btn-quote[data-v-0c9a5cfa] {
    height: 35px;
    margin-left: 8px
}

.search-icon[data-v-0c9a5cfa] {
    font-size: 18px
}

#navbarUserDropdownDesktopMenu {
    padding: 8px 0;
    right: 0!important;
    left: auto;
    min-width: 210px
}

#navbarUserDropdownDesktopMenu .dropdown-item {
    --bs-dropdown-item-padding-y: 12px!important
}

#navbarUserDropdownDesktopMenu .line-online {
    margin-bottom: 0
}

#navbarUserDropdownDesktopMenu .line-online.form-switch {
    padding-left: 0
}

#navbarUserDropdownDesktopMenu .line-online .form-check-label {
    cursor: pointer
}

#navbarUserDropdownDesktopMenu .line-online .form-check-input {
    float: right;
    margin-top: 3px;
    cursor: pointer
}

#navbarUserDropdownDesktopMenu .divider hr {
    margin: 4px 0
}

#navbarUserDropdownDesktopMenu .icon-right {
    float: right
}

.navbar-right-menu-desktop .navbar-nav {
    height: var(--navbar-primary-height)
}

.navbar-right-menu-desktop .navbar-nav .nav-item,.navbar-right-menu-desktop .navbar-nav .nav-link,.navbar-right-menu-desktop .navbar-nav .menu-item-wrap {
    display: flex;
    align-items: center;
    height: 100%
}

.navbar-right-menu-desktop .navbar-nav .nav-link:focus-visible {
    box-shadow: none
}

.navbar-right-menu-desktop .navbar-nav .nav-item .nav-link {
    --bs-nav-link-font-weight: 600;
    line-height: 20px;
    padding: 0 15px;
    white-space: nowrap
}

.navbar-right-menu-desktop .navbar-nav .nav-item .nav-link .icon-dropdown {
    font-size: 12px;
    vertical-align: baseline;
    margin-left: 8px;
    margin-top: -1px
}

.navbar-right-menu-desktop .navbar-nav .nav-item .nav-link .menu-item-wrap {
    padding-top: 2px;
    border-bottom: 2px solid transparent
}

.navbar-right-menu-desktop .navbar-nav .nav-item .nav-link.show .menu-item-wrap,.navbar-right-menu-desktop .navbar-nav .nav-item .nav-link.active .menu-item-wrap,.navbar-right-menu-desktop .navbar-nav .nav-item:hover .menu-item-wrap,.navbar-right-menu-desktop .navbar-nav .nav-item:focus .menu-item-wrap {
    border-color: #008489
}

.navbar-right-menu-desktop .navbar-nav .nav-item .dropdown-menu {
    top: calc(2px + var(--navbar-primary-height));
    --bs-dropdown-spacer: 0
}

.navbar-right-menu-desktop .navbar-nav .nav-item .dropdown-menu .dropdown-item {
    --bs-dropdown-item-padding-y: 10px;
    --bs-dropdown-item-padding-x: 15px;
    padding-right: calc(2*var(--bs-dropdown-item-padding-x));
    min-width: 150px
}

.navbar-right-menu-desktop .navbar-nav .nav-item .dropdown-menu:before {
    position: absolute;
    display: block;
    width: 100%;
    height: 4px;
    top: -5px;
    content: ""
}

.navbar-right-menu-desktop .navbar-nav .nav-item .dropdown-menu strong {
    display: block;
    margin-bottom: 3px;
    font-weight: 600
}

.navbar-right-menu-desktop .navbar-nav .nav-item .dropdown-menu small {
    display: block;
    font-size: 90%;
    color: #666
}

.navbar-brand-mobile[data-v-46ae8eb6] {
    align-items: center;
    height: var(--navbar-primary-height);
    --bs-navbar-brand-padding-y: 13px;
    --bs-navbar-brand-margin-end: 30px;
    margin-right: auto
}

.navbar-brand-mobile .brand-logo[data-v-46ae8eb6] {
    margin-right: 17px
}

.navbar-brand-mobile .brand-text[data-v-46ae8eb6] {
    display: none
}

@media (min-width: 390px) {
    .navbar.guest .navbar-brand-mobile .brand-text[data-v-46ae8eb6] {
        display:block!important
    }
}

@media (min-width: 350px) {
    .navbar.authenticated .navbar-brand-mobile .brand-text[data-v-46ae8eb6],.navbar.navbar-main-menu-mobile-kb .navbar-brand-mobile .brand-text[data-v-46ae8eb6] {
        display:block!important
    }
}



.subcategory-header .nav-link[data-v-522eed64] {
    padding: 8px 21px 4px 21px;
    font-weight: 600;
    font-size: 16px
}

.subcategory-list .nav-link[data-v-522eed64] {
    padding: 12px 21px;
    font-weight: 600;
    font-size: 16px
}

.dropdown-item .icon-expand[data-v-d2dee182] {
    float: right;
    margin-right: 6px
}

.navbar-toggler {
    border: 0;
    background: 0 0;
    border-radius: 0;
    padding: 7px 15px;
    margin-left: -15px
}

.navbar-toggler:focus {
    box-shadow: none
}

.navbar-toggler .icon-dropdown {
    font-size: 12px;
    margin-left: 7px;
    transform: rotate(-180deg);
    transition: transform 250ms;
    transition-timing-function: ease-in-out!important
}

.navbar-toggler.collapsed .icon-dropdown {
    transform: rotate(0deg)
}

.btn-quote[data-v-f0f1d562] {
    margin: 0 20px 0 8px
}

.btn-quote[data-v-a635f22e] {
    margin-left: 8px
}

#navbarRightMenuMobile .navbar-nav {
    flex-direction: row;
    height: var(--navbar-primary-height)
}

#navbarRightMenuMobile .navbar-nav .nav-item,#navbarRightMenuMobile .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    height: 100%
}

#navbarRightMenuMobile .navbar-nav .nav-link {
    --bs-nav-link-font-weight: 700;
    line-height: 20px;
    padding: 0 15px;
    white-space: nowrap
}

#navbarRightMenuMobile .navbar-nav .search-icon {
    font-size: 18px
}

.navbar-main-menu-mobile-kb .navbar-container {
    padding-left: 21px!important;
    padding-right: 24px!important
}

.navbar-main-menu-mobile {
    position: absolute;
    z-index: calc(var(--navbar-z-index) - 1);
    width: 100%;
    background: #fff;
    box-shadow: 0 5px 5px rgba(0,0,0,.1);
    --mobile-menu-font-size: 16px;
    --mobile-menu-item-height: 49px
}

.navbar-main-menu-mobile.kb {
    top: 0;
    z-index: 201;
    position: fixed;
    overflow-y: auto;
    max-height: 100vh
}

.navbar-main-menu-mobile .container-fluid {
    padding-left: 0;
    padding-right: 0
}

.navbar-main-menu-mobile .menu-content {
    padding: 10px 0;
    font-size: var(--mobile-menu-font-size);
    min-height: calc(100vh - var(--navbar-primary-height))
}

.navbar-main-menu-mobile .menu-content .actions-wrap {
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
    gap: 16px
}

.navbar-main-menu-mobile .menu-content .actions-wrap .btn {
    font-size: var(--mobile-menu-font-size)
}

.navbar-main-menu-mobile .menu-content .navbar-nav .nav-item .nav-link {
    padding: 1px 21px 0;
    height: var(--mobile-menu-item-height);
    line-height: var(--mobile-menu-item-height);
    font-size: var(--mobile-menu-font-size);
    font-weight: 600
}

.navbar-main-menu-mobile .menu-content .navbar-nav .nav-item .nav-link .icon {
    margin-right: 16px;
    font-size: 20px;
    float: left;
    line-height: var(--mobile-menu-item-height);
    margin-top: -2px
}

.navbar-main-menu-mobile .menu-content .navbar-nav .nav-item .nav-link:hover,.navbar-main-menu-mobile .menu-content .navbar-nav .nav-item .nav-link:focus {
    background-color: #f8f9fa
}

.navbar-main-menu-mobile .menu-content .navbar-nav .nav-item .dropdown-toggle .icon-dropdown {
    float: right;
    padding: 0 4px;
    line-height: var(--mobile-menu-item-height);
    margin-top: -1px;
    transform: rotate(0deg);
    transition: transform 250ms;
    transition-timing-function: ease-in-out!important
}

.navbar-main-menu-mobile .menu-content .navbar-nav .nav-item .dropdown-toggle.show {
    background-color: #e7e7e7
}

.navbar-main-menu-mobile .menu-content .navbar-nav .nav-item .dropdown-toggle.show .icon-dropdown {
    transform: rotate(-180deg)
}

.navbar-main-menu-mobile .menu-content .navbar-nav .nav-item .dropdown-menu {
    box-shadow: none;
    border: 0;
    border-radius: unset;
    padding: 0;
    margin: 0
}

.navbar-main-menu-mobile .menu-content .navbar-nav .nav-item .dropdown-menu .dropdown-item {
    font-size: var(--mobile-menu-font-size);
    height: var(--mobile-menu-item-height);
    line-height: var(--mobile-menu-item-height);
    font-weight: 600;
    padding: 1px 21px 0 62px
}

.navbar-main-menu-mobile .menu-content .navbar-nav .nav-item .dropdown-menu .dropdown-item .icon-expand {
    line-height: var(--mobile-menu-item-height)
}

body.with-fixed-navbar .navbar-main-menu-mobile {
    position: fixed;
    overflow-y: auto;
    max-height: calc(100vh - var(--navbar-primary-height))
}
.d-none {
    display: none!important
}

    .d-lg-flex {
        display: flex!important
    }
        .d-lg-none {
        display: none!important
    }
    .mx-auto {
    margin-right: auto!important;
    margin-left: auto!important
}
.px-4 {
    padding-right: 1.5rem!important;
    padding-left: 1.5rem!important
}
.py-4 {
    padding-top: 1.5rem!important;
    padding-bottom: 1.5rem!important
}
.row-gap-4 {
    row-gap: 1.5rem!important
}
.column-gap-4 {
    -moz-column-gap: 1.5rem!important;
    column-gap: 1.5rem!important
}
.gap-4 {
    gap: 1.5rem!important
}
@media (min-width: 576px) {
      .text-sm-start {
        text-align: left!important
    }

    .text-sm-end {
        text-align: right!important
    }

    .text-sm-center {
        text-align: center!important
    }}
    .no-styles, 
.no-styles * {
  all: unset;   /* resets all inherited/global styles */
  display: revert; /* restores default browser display */
}