section.navigation-outer{
  position: relative;
  padding: 20px 15px 30px 15px;
  background-color:#233745;
  box-sizing: border-box;
  position:relative;
}
section.navigation-outer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://www.highgateseniorliving.com/themes/highgateseniorliving/assets/images/bg-pattern.png);
  width: 100%;
  height: 100%;
  opacity: .1;
}
section.navigation-outer h3 {
  text-align: center;
  width: 100%;
  color: #fff;
  font-family: Playfair Display,serif;
  font-weight: 500;
  margin: 0 0 20px 0px;
}
.sticky-section {
  position: relative; /* Make the sticky section relative so we can use absolute positioning */
}

section.navigation-outer.sticky {
  position: fixed;
  top: 0; /* Set the top position to 0 */
  width: 100%; /* Set the width of the sticky section to match the viewport */
  z-index:99999;
} 
section.navigation-outer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align:center;
  width:100%;
}
section.navigation-outer ul li {
  text-transform: uppercase;
  text-align: center;
  box-sizing: border-box;
  width: auto;
  padding: 0px 5px;
  margin-bottom: 5px;
  margin-top:5px;
  display: inline-block;
}
section.navigation-outer ul li:last-child{
  padding-bottom:0 !important;
}
section.navigation-outer ul li a {
  color:#fff;
  font-weight: 700;
  transition:0.4s ease-in-out;
}
.navigation-outer .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
  display: flex !important;
  justify-content:center !important;
  max-width: 100% !important;
  width: 100%;
  padding:0 !important;
  overflow: visible;
  white-space: pre-wrap;
}
.navigation-outer ul{
  margin:0 !important;
}



.latest-lp{
  position:relative;
}
.latest-lp #hs_cos_wrapper_module_167549264791247{
  position:relative;
}
.latest-lp .hs_cos_wrapper.hs_cos_wrapper_widget.hs_cos_wrapper_type_module.sticky{
  position: sticky;
  top: 145px;
  z-index: 9;
}



{# updated css #}

.navigation-outer .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a:before {
  content: "";
  position: absolute;
  top: -5px;
  left: -6px;
  height: calc(100% + 10px);
  width: calc(100% + 10px);
  border: 1px solid #7F9E60;
  transition: 0.4s ease-in-out;
  transform: scale(0.5);
  margin: auto;
  right: -5px;
  bottom: -5px;
}
.navigation-outer .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a:hover:before {
  transform: scale(1);
}
.navigation-outer .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
  padding: 10px 20px !important;
  background: #7F9E60;
  position: relative;
  transition: 0.4s ease-in-out;
  box-sizing: border-box;
  height: 100%;
  min-height: 100%;
  max-height: 100%;    
  align-items: center;
}
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1{
  float:none !important;
}
.toggle-btn{
  display:none;
}















@media (max-width:1300px){
  .latest-lp .hs_cos_wrapper.hs_cos_wrapper_widget.hs_cos_wrapper_type_module.sticky{
    top:143px;

  }
}

@media (max-width:1200px){
  .latest-lp .hs_cos_wrapper.hs_cos_wrapper_widget.hs_cos_wrapper_type_module.sticky{
    top:140px;

  }
}

@media (max-width:992px){
  .latest-lp .hs_cos_wrapper.hs_cos_wrapper_widget.hs_cos_wrapper_type_module.sticky {
    top: 114px;
  }
  section.navigation-outer{
    padding:15px;
    margin-top: 20px;
  }
  section.navigation-outer ul li{
    padding-left:10px;
    padding-right:10px;
  }


}
@media (max-width:767px){
  section.navigation-outer ul li {
    width:100%;
    padding:0;
  }
  .toggle-btn{
    display:block;
  }
  section.navigation-outer h3{
    text-align:left;
    margin:0;
    padding-right: 40px;
    box-sizing: border-box;
  }
  .toggle-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .toggle-btn:before {
    content: "";
    position: absolute;
    height: 25px;
    width: 3px;
    background: #fff;
    border-radius: 10px;
    transition:0.4s ease-in-out;
  }
  .toggle-btn:after {
    content: "";
    position: absolute;
    height: 25px;
    width: 3px;
    background: #fff;
    border-radius: 10px;
    transform: rotate(90deg);
  }
  section.navigation-outer ul {
    position:absolute;
    padding: 15px;
    background: #233745;
    left:0;
    top: 100%;
    box-sizing: border-box;
  }
  section.navigation-outer .hs-menu-wrapper.hs-menu-flow-horizontal>ul{
    display:none;
  }
  .toggle-btn.active:before {
    transform: rotate(90deg);
    transition:0.4s ease-in-out;
}