.navbar-area{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1030;
  isolation:isolate;
}

.navbar-area::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--white-color);
  box-shadow:0 0 1.25rem rgba(108,118,134,.1);
  opacity:0;
  pointer-events:none;
  will-change:opacity;
  transition:opacity .25s linear;
}

.main-navbar{
  padding:10px 0;
  
  border-bottom:1px solid var(--border-color);
  transition:border-color .25s linear;
}

.navbar{
  display:flex;
  align-items:center;
}

/*------------------------------------------------
  2. Brand
------------------------------------------------*/
.navbar-brand{padding:0 70px 0 0;display:flex;align-items:center;}

.navbar-brand img{height:42px;width:auto;display:block;}


.navbar-collapse{
  display:flex;
  flex:1 1 auto;
  min-width:0;
}

.navbar-collapse-inner{
  display:flex;
  align-items:center;
  flex:1 1 auto;
  min-width:0;
}

.navbar-nav{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  margin-right:auto;   /* pushes .others-options to the far edge */
}

.navbar-nav > .nav-item{position:relative;margin:0 15px;}
.navbar-nav > .nav-item:first-child{margin-left:0;}

.nav-link{
  display:flex;
  align-items:center;
  gap:4px;
  padding:25px 0;
  position:relative;
  cursor:pointer;
  color:var(--black-color);
  font-family:var(--heading-font-family);
  font-size:var(--font-size);
  font-weight:600;
}

/* underline sweeps in from the right */
.nav-link::after{
  content:"";
  position:absolute;
  bottom:20px;right:0;
  width:0;height:2px;
  background-color:var(--mainColor);
  transition:all ease .5s;
}

.nav-item:hover > .nav-link,
.nav-item.active > .nav-link,
.nav-link:focus-visible{color:var(--mainColor);}

.nav-item:hover > .nav-link::after,
.nav-item.active > .nav-link::after{width:100%;right:auto;left:0;}

.caret{width:14px;height:14px;flex:none;transition:transform .3s ease;}
.nav-item:hover > .nav-link .caret{transform:rotate(180deg);}


.submenu{
  position:absolute;
  top:70px;left:0;
  width:280px;
  margin-top:15px;
  border-radius:8px;
  background:var(--white-color);
  box-shadow:0 0 15px 0 rgba(0,0,0,.1);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease-in-out, visibility .2s, margin-top .2s ease-in-out;
  z-index:99;
}

.dropdown-menu{padding:10px 0;}

.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu{opacity:1;visibility:visible;margin-top:0;}

.dropdown-menu li{position:relative;}

.dropdown-item{
  display:block;
  padding:10px 20px;
  position:relative;
  color:var(--black-color);
  font-family:var(--heading-font-family);
  font-size:var(--font-size);
  font-weight:500;
}

/* arrow that slides in on hover (clip-path, no icon font) */
.dropdown-item::before{
  content:"";
  position:absolute;
  left:20px;top:50%;
  width:9px;height:9px;
  transform:translateY(-50%);
  background:currentColor;
  clip-path:polygon(0 0,100% 50%,0 100%,25% 50%);
  opacity:0;
  visibility:hidden;
  transition:var(--transition);
}

.dropdown-item:hover,
.dropdown-item:focus-visible,
.dropdown-menu li.active > .dropdown-item{
  color:var(--mainColor);
  padding-left:38px;
}

.dropdown-item:hover::before,
.dropdown-item:focus-visible::before,
.dropdown-menu li.active > .dropdown-item::before{opacity:1;visibility:visible;}

/* second level (Pages > Pricing / Shop) */
.dropdown-item .sub-caret{
  position:absolute;
  right:15px;top:50%;
  width:14px;height:14px;
  transform:translateY(-50%) rotate(-90deg);
}

.submenu .submenu{top:0;left:100%;margin-top:15px;}
.dropdown-menu li:hover > .submenu,
.dropdown-menu li:focus-within > .submenu{opacity:1;visibility:visible;margin-top:0;}

/*------------------------------------------------
  5. Right-hand options (desktop)
------------------------------------------------*/
.others-options{
  display:flex;
  align-items:center;
  flex:none;           /* never squeezed by the link row */
  margin-left:30px;
}

.option-item{position:relative;margin-right:30px;}

/* thin divider pipe */
.option-item::before{
  content:"";
  position:absolute;
  top:2px;right:-18px;
  width:1px;height:20px;
  background-color:var(--divider-color);
}

.option-item:last-child{margin-right:0;}
.option-item:last-child::before{display:none;}

.phone-number{
  font-family:var(--heading-font-family);
  font-size:18px;
  font-weight:700;
  color:var(--black-color);
  white-space:nowrap;
}
.phone-number:hover{color:var(--mainColor);}

/* navbar CTA inverts the global button: coral, ripples to teal */
.others-options .default-btn{
  background-color: #ff5b4a;
  color: #ffffff;
  transition: background-color 0.15s ease;
}
.others-options .default-btn::before{background:var(--mainColor);}
.others-options .default-btn:hover{background-color: #ec4636;}
.others-options .default-btn:active{background-color: #d93b2b;}

/*------------------------------------------------
  6. Sticky state (JS adds .is-sticky past 8px)
------------------------------------------------*/
.navbar-area.is-sticky::before{opacity:1;}
.navbar-area.is-sticky .main-navbar{border-bottom-color:transparent;}


.mobile-options{
  display:none;
  align-items:center;
  position:relative;
  margin-left:auto;
}

.dot-menu{
  display:flex;
  align-items:center;
  height:30px;
  padding:0 10px;
  border:0;
  background:none;
  cursor:pointer;
}

.dot-menu .circle{
  width:5px;height:5px;
  margin:0 2px;
  border-radius:100%;
  background-color:var(--mainColor);
  transition:background-color .3s ease;
}

.dot-menu:hover .circle,
.dot-menu[aria-expanded="true"] .circle{background-color:var(--black-color);}
.dot-menu:focus-visible{outline:2px solid var(--mainColor);outline-offset:4px;border-radius:4px;}

.nav-toggle{
  width:44px;height:44px;
  padding:10px;
  margin-left:14px;
  border:0;
  background:transparent;
  cursor:pointer;
}

.nav-toggle span{
  display:block;
  height:2px;
  margin:5px 0;
  border-radius:5px;
  background:var(--black-color);
  transition:transform .3s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.option-panel{
  position:absolute;
  right:0;
  top:calc(100% + 18px);
  width:210px;
  padding:20px 15px;
  border-radius:8px;
  text-align:center;
  background:var(--white-color);
  box-shadow:0 0 15px 0 rgba(0,0,0,.12);
  z-index:1010;

  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.96);
  transform-origin:top right;
  transition:opacity .24s ease,
             transform .24s cubic-bezier(.34,1.3,.64,1),
             visibility .24s;
}

.option-panel.active{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.option-panel .others-options{display:block;margin:0;}
.option-panel .option-item{margin:0 0 14px;}
.option-panel .option-item:last-child{margin-bottom:0;}
.option-panel .option-item::before{display:none;}
.option-panel .phone-number{font-size:16px;}
.option-panel .default-btn{width:100%;padding:14px 18px;}

/*================================================
  Responsive
=================================================*/

/* compress the desktop bar before it runs out of room */
@media (max-width:1399px){
  .navbar-brand{padding-right:40px;}
  .navbar-nav > .nav-item{margin:0 10px;}
  .nav-link{font-size:15px;}
  .option-item{margin-right:22px;}
  .phone-number{font-size:15px;}
  .others-options .default-btn{padding:15px 18px;font-size:15px;}
}

/* ---- collapse to dot menu + hamburger + accordion ---- */
@media (max-width:1199px){
  :root{--nav-height:74px;}

  .navbar-area::before{opacity:1;}          /* opaque from the start on mobile */
  .main-navbar{padding:12px 0;}
  .navbar{flex-wrap:wrap;}

  .mobile-options{display:flex;}

  /* the desktop copy of the options is replaced by .option-panel */
  .navbar-collapse-inner > .others-options{display:none;}

  /* --- sliding menu panel ---
     0fr -> 1fr on a single-row grid. The track is animatable,
     so this eases without any JS height measuring. --- */
  .navbar-collapse{
    display:grid;
    grid-template-rows:0fr;
    order:5;
    flex-basis:100%;
    margin-top:0;
    opacity:0;
    border-radius:8px;
    background:var(--white-color);
    transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1),
               opacity .28s ease,
               margin-top .4s cubic-bezier(.4,0,.2,1),
               box-shadow .28s ease;
  }
  .navbar-collapse.open{
    grid-template-rows:1fr;
    opacity:1;
    margin-top:12px;
    box-shadow:0 7px 13px 0 rgba(0,0,0,.1);
  }

  /* min-height:0 lets the child shrink below its content size */
  .navbar-collapse-inner{
    display:block;
    min-height:0;
    overflow:hidden;
  }
  .navbar-collapse.open .navbar-collapse-inner{
    max-height:70vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .navbar-nav{display:block;margin-right:0;}
  .navbar-nav > .nav-item{margin:0;border-bottom:1px solid #f0f2f0;}

  .nav-link{padding:14px 20px;justify-content:space-between;}
  .nav-link::after{display:none;}
  .nav-item.open > .nav-link{color:var(--mainColor);}
  .nav-item.open > .nav-link .caret{transform:rotate(180deg);}
  .nav-item:hover > .nav-link .caret{transform:none;}

  /* --- accordion submenus, same grid technique --- */
  .submenu{
    position:static;
    display:grid;
    grid-template-rows:0fr;
    width:auto;
    margin:0;
    opacity:1;
    visibility:visible;
    border-radius:0;
    box-shadow:none;
    background:#fbfcfb;
    transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1);
  }
  .submenu .submenu{margin:0;}

  .nav-item.open > .submenu,
  .dropdown-menu li.open > .submenu{grid-template-rows:1fr;}

  .nav-item:hover > .submenu,
  .dropdown-menu li:hover > .submenu,
  .nav-item:focus-within > .submenu,
  .dropdown-menu li:focus-within > .submenu{margin-top:0;}

  .dropdown-menu{
    min-height:0;
    overflow:hidden;
    padding:0;
  }

  .dropdown-item{padding:12px 30px;}
  .dropdown-item::before{display:none;}
  .dropdown-item:hover,
  .dropdown-menu li.active > .dropdown-item{padding-left:30px;}
  .submenu .submenu .dropdown-menu{padding-left:12px;}
  .dropdown-item .sub-caret{transform:translateY(-50%);transition:transform .3s ease;}
  .dropdown-menu li.open > .dropdown-item .sub-caret{transform:translateY(-50%) rotate(180deg);}
}

@media (max-width:575px){
  .navbar-brand img{height:34px;}
  .option-panel{width:190px;padding:18px 14px;}
}

/* Older engines can't interpolate grid tracks — fall back to
   an instant open rather than a broken one. */
@supports not (grid-template-rows:1fr){
  @media (max-width:1199px){
    .navbar-collapse{display:block;height:0;overflow:hidden;}
    .navbar-collapse.open{height:auto;}
    .submenu{display:none;}
    .nav-item.open > .submenu,
    .dropdown-menu li.open > .submenu{display:block;}
  }
}