.main-navbar-link {
  /*float: right!important;*/
}


.navbar {
  overflow: hidden;
  background-color: #fff;
  font-family: 'Beausite Classic Web';
  position: fixed;
  width: 100%;
  z-index: 999;
  left:0;
  padding: 10px 0;
}

.navbar a {
  float: left;
  font-size: 15px;
  color: #54223b;
  text-align: center;
  padding: 14px 10px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 15px!important;  
  border: none;
  outline: none;
  color: #54223b;
  padding: 14px 10px;
  background-color: inherit;
  font: inherit;
  margin: 0;
  cursor: pointer;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  /*background-color: red;*/
  transition: all .4s ease;
}

.dropdown-content {
  display: none;
  position: fixed;
  background-color: #433ea5;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  transition: all .4s ease;
  padding: 28px 0 20px;
}

.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;

}

/* Create three equal columns that floats next to each other */
.column-parent {
  float: left;
}
.column-1 {
  width: 29%;
  padding: 30px 0 0;
}
.column-2 {
  width: 39%;
  padding-right: 100px;
}
.column-parent.column-2 a:last-child {
  border-bottom: none!important;
}
.column-3 {
  width: 32%;
}
.column-parent.column-3 a:last-child {
  border-bottom: none!important;
}

.column-parent a {
  float: none;
  color: #fff;
  padding: 22px 0;
  text-decoration: none;
  display: block;
  text-align: left;
  border-bottom: 1px solid #6c68b9;
  font-size: 14px;
}

.column-parent  a:hover {
  /* background-color: #ddd;*/
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* ------------- CUSTOM --------- */
.desktop-links-container {
  width: 700px;
  margin: 0 auto;
}
.navbar-logo-container {
  float: left;
  padding-top: 10px;
  width: 100px;

}
.navbar-logo-img {
  width: 100%;
}
.navbar-logo-link {
  width: unset;
  padding: 0!important;
  margin: 0; 
}

.navbar-btn-container {
  float: right; padding-left:20px;
}

.navbar-login-btn {
  background: #f75338;
  border-radius: 2px;
  color: #fff!important;
  padding: 10px 5px!important;
  width: 120px;
  font-size: 15px!important;
  font-weight: 400;
  margin-right: 20px;
}
.navbar-register-btn {
  border: 1px solid #f75338;
  border-radius: 2px;
  color: #f75338!important;
  padding: 10px 5px!important;
  width: 120px;
  font-size: 15px!important;
  font-weight: 400;
  background: #fff;
}
.dropdown-column-title {
  color: #fff;
  font-weight: 200;
  font-size: 16px;
}
.dropdown-column-text {
  font-style: italic;    max-width: 200px; width:100%;
  color: #fff;
  line-height: 1.6;
  font-size: 15px;
}
.dropdown-column-custom-link-1 {
  font-size: 16px!important;
  font-weight: 200;
  border-bottom: none!important;
}

/* - BADGE BTN --- */
.badge-btn-item {
  position: relative;
}
.badge-btn-badge {
  position: absolute;
  background: #502955;
  border-radius: 10px;
  font-size: 11px;
  padding: 5px 10px;
  margin-top: -2px;
  right: 0;
  color: #d5d5d5;
}
/* - BADGE BTN --- */



/* ------------ RESET --- */
.wrap {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 1168px;
  position: relative;
}

/* ------------ RESET --- */



/* ---------------------- V2 MENU TWEAKS ----------------- */
.column-parent a {
  float: left;
  width: 45%;
}


.column-parent a:nth-child(1){
  width: 44%;
  margin-right: 2%;
}
.column-parent a:nth-child(2){
  width: 44%;
  margin-left: 2%;
}
.column-parent a:nth-child(3){
  width: 44%;
  margin-right: 2%;
}
.column-parent a:nth-child(4){
  width: 44%;
  margin-left: 2%;
}
.column-parent a:nth-child(5){
  width: 44%;
  margin-right: 2%;
}
.column-parent a:nth-child(6){
  width: 44%;
  margin-left:2%;
}
.column-parent a:nth-child(7){
  width: 44%;
  margin-right: 2%;
}
.column-parent a:nth-child(8){
  width: 44%;
  margin-left: 2%;
}




.column-left {
  width: 35%;
  padding: 30px 15px 0 0;
}
.column-right {
  width: 60%;
}
.wrap.headerNav { max-width: 1130px; width: 100%; }
.dropdown-bottom-border-on { 
  border-bottom: 1px solid #6c68b9;

}
.dropdown-bottom-border-off {
  border-bottom: none!important;

}

.dropdown-arrow {
  width: 20px;

}
.dropdown-arrow img {
  width: 12px!important;
  margin-left: 4px;

}
/* ---------------------- V2 MENU TWEAKS ----------------- */






/* ----- MOBILE MENU -------------------- */
/* ----- MOBILE MENU -------------------- */
/* ----- MOBILE MENU -------------------- */
.main-menu-container-outer {
  background: #fff;
  padding: 3px 0;
  width: 100%;
  position: relative;
  display: none;
}
.main-menu-logo-container {
  float: none;
  width: 110px;
  padding: 7px 0 0 0;
  margin: 0 auto;
}


.main-menu-logo-mobile {
  width: 100%;
}
.burger {
  display: none;
}

.main-menu-links-container-desktop {
  float: left;
  padding: 15px 0 0 50px;
  width: 550px;
}
.main-menu-links-container-desktop .hs-menu-wrapper ul {
  padding-top: 5px;
}
.main-menu-links-container-desktop .hs-menu-wrapper ul li {

}
.main-menu-links-container-desktop .hs-menu-wrapper ul li a {
  color: #fff!important;
  padding: 5px 0 0 0;
  margin: 0 35px 0 0; 
  display: inline-block;
}
.main-menu-links-container-desktop .hs-menu-wrapper ul li a:hover {
  border-bottom: 2px solid #d7a6b0;
}



.overlay-btn-container {
  bottom: 0;
  padding: 0 0 12px;
  position: absolute;
  text-align: center;
  width: 82%;
  margin:  0 auto;
  display:  inline-block;  
}

.overlay-btn-login {
  margin-right: 3px
}

.overlay-btn-login,.overlay-btn-signup {
  background: #54223b;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  line-height: 2;
  padding: 10px 15px;
  text-decoration: none;

}




/* ----- MOBILE MENU -------------------- */
/* ----- MOBILE MENU -------------------- */
/* ----- MOBILE MENU -------------------- */
.overlay-menu-details-container {
  padding: 12px 5px;
  text-align: center;
  width: 100%;
  top: 3px;
}
.overlay-menu-logo {
  margin: 3px auto 0;
  width: 60px;
}



/* ---------- NEW MOBILE MENU ----------------------- */
/* ---------------------- DIST ----------------------- */
/*!
* zeynepjs v2.2.0
* A light-weight multi-level jQuery side menu plugin.
* It's fully customizable and is compatible with modern browsers such as Google Chrome, Mozilla Firefox, Safari, Edge and Internet Explorer
* MIT License
* by Huseyin ELMAS
*/
.zeynep{
  bottom:0;
  overflow:hidden;
  -webkit-overflow-scrolling:touch;
  overflow-y:auto;
  pointer-events:none;
  position:fixed;
  top:0;
  transform:translateX(-100%) translateZ(0px);
  z-index:1011;
  padding: 0 26px 0 26px;
}

.zeynep:not(.no-transition),
.zeynep .submenu:not(.no-transition){
  transition:all 1000ms;
}

.zeynep-overlay{
  background-color:rgba(0, 0, 0, .42);
  bottom:0;
  display:none;
  left:0;
  position:fixed;
  right:0;
  top:0;
  z-index:1010;
}

.zeynep-opened .zeynep-overlay{
  display:block;
}

.zeynep.opened{
  pointer-events:auto;
  transform:translateX(0px) translateZ(0px);
}

.zeynep.submenu-opened{
  overflow:hidden;
}

.zeynep .submenu{
  bottom:0;
  min-height:100%;
  overflow:hidden;
  -webkit-overflow-scrolling:touch;
  overflow-y:auto;
  pointer-events:none;
  position:fixed;
  top:0;
  width:100%;
}

.zeynep .submenu.opened{
  left:0;
  pointer-events:auto;
}

.zeynep .submenu.opened:not(.current){
  overflow:hidden;
}

/* ---------------------- DIST ----------------------- */
/* ---------------------- BASE ----------------------- */



.btn-open {
  border: 0;
  border-radius: 27.5px;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .05);
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  min-width: 150px;
  outline: 0;
  padding-bottom: 15px;
  padding-top: 15px;
  cursor: pointer;
  margin: 0 6px;
}
.btn-open:active {
  box-shadow: inset 0 3px 5px 0px rgba(0, 0, 0, .1);
}

.btn-open.first {
  background-color: #fd698d;
  color: #ffffff;
}
.btn-open.second {
  background-color: #ffffff;
  color: #fd698d;
}

/* zeynepjs menu styles */
.zeynep {
  background-color: #f75338;
  color: #fff;
  width: 295px;
}

.zeynep ul {
  list-style-type: none;
  padding: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  padding-top: 15px;
}
.zeynep ul > li {
  display: block;
}


.zeynep ul>li>a {
  color: inherit;
  display: block;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  transition: all .15s;
  padding: 10px 0 10px 0;
}

.zeynep ul > li > a:hover {
  /*background-color: #efefef;
  border-radius: 3px;*/
}

.zeynep ul > li:not(:last-child) > a {
  /*border-bottom: 1px solid #efefef;*/
}

.zeynep ul > li.has-submenu > a {
  background-image: url("https://sponsors.sanogenetics.com/hubfs/Hake/submenu-arrow.svg");
  background-position: right 0px center;
  background-repeat: no-repeat;
  background-size: 8px 14px;
}

.zeynep ul > li.has-submenu > a:hover {
  background-image: url("https://sponsors.sanogenetics.com/hubfs/Hake/submenu-arrow.svg");
}

/* zeynepjs submenu styles */
.zeynep .submenu {
  background-color: #433ea5;
  left: 295px;
  padding: 0 26px 0 26px;
}

/*.zeynep .submenu-header {
background-image: url("https://sponsors.sanogenetics.com/hubfs/Hake/menu-back.svg");
background-position: left 20px center;
background-repeat: no-repeat;
background-size: 8px 14px;
/*border-bottom: solid 1px #efefef;
cursor: pointer;
position: relative;
}*/

.zeynep .submenu-header > a {
  color: inherit;
  display: block;
  font-size: 15px;
  font-weight: 400;
  padding: 15px 20px 15px 00px;
  text-decoration: none;
  text-transform: uppercase;
  position: absolute;
}

/*.zeynep .submenu-header > a:before {
background-image: url("https://sponsors.sanogenetics.com/hubfs/Hake/submenu-arrow.svg");
background-position: right 20px center;
background-repeat: no-repeat;
background-size: 8px 14px;
content: "";
height: 100%;
left: 26px;
position: absolute;
top: 0;
transform: rotate(-180deg);
width: 20px;
}*/

.zeynep .submenu>label {
  color: #fff;
  display: block;
  font-size: 18px;
  font-weight: 400;
  margin-top: 20px;
  padding-left: 0px;
  text-transform: uppercase;
  width: 100%;
  border-bottom: 1px solid #6b66c1;
  padding-bottom: 18px;
}

/* ---------------------- BASE ----------------------- */
/* ---------------------- RIGHT ----------------------- */
/* right side menu specific styles */
body {
  right: 0;
}

.zeynep-opened body {
  overflow: hidden;
}

.zeynep.right {
  left: auto;
  right: 0;
}
.zeynep.right:not(.opened) {
  transform: translateX(100%);
}
/* ---------------------- RIGHT ----------------------- */
/* ------- HAMBURGER ------------------------- */
* {
  margin: 0;
  padding: 0; 
}

/* Icon 1 */

#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
  width: 20px;
  height: 20px;
  position: relative;
  margin: 0px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  background: #f75338;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
  top: 0px;
}

#nav-icon1 span:nth-child(2) {
  top: 10px;
}

#nav-icon1 span:nth-child(3) {
  top: 20px;
}

#nav-icon1.open span:nth-child(1) {
  top: 18px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#nav-icon1.open span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/* Icon 2 */

#nav-icon2 {
}

#nav-icon2 span {
  display: block;
  position: absolute;
  height: 9px;
  width: 50%;
  background: #d3531a;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon2 span:nth-child(even) {
  left: 50%;
  border-radius: 0 9px 9px 0;
}

#nav-icon2 span:nth-child(odd) {
  left:0px;
  border-radius: 9px 0 0 9px;
}

#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
  top: 0px;
}

#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
  top: 18px;
}

#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
  top: 36px;
}

#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon2.open span:nth-child(1) {

  left: 5px;
  top: 7px;
}

#nav-icon2.open span:nth-child(2) {

  left: calc(50% - 5px);
  top: 7px;
}

#nav-icon2.open span:nth-child(3) {

  left: -50%;
  opacity: 0;
}

#nav-icon2.open span:nth-child(4) {

  left: 100%;
  opacity: 0;
}

#nav-icon2.open span:nth-child(5) {
  left: 5px;
  top: 29px;
}

#nav-icon2.open span:nth-child(6) {
  left: calc(50% - 5px);
  top: 29px;
}

/* Icon 3 */

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 6px;
}

#nav-icon3 span:nth-child(4) {
  top: 12px;
}

#nav-icon3.open span:nth-child(1) {
  background: #fff!important;
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  background: #fff!important;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  background: #fff!important;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  background: #fff!important;
  top: 18px;
  width: 0%;
  left: 50%;
}

/* Icon 4 */

#nav-icon4 {
}

#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 18px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 36px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
}
.hamburger-container {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 15px;
  right: 10px;
  z-index: 999999;
}
/* ------- HAMBURGER ------------------------- */
/* ----- MOBILE MENU -------------------- */
/* ----- MOBILE MENU -------------------- */
/* ----- MOBILE MENU -------------------- */
/* ----- MOBILE MENU -------------------- */



/* ----------------------------------------------- RESPONSIVE ------------------- */



/* ---------------------------- 1200px-------------------- */
@media screen and (max-width:1200px) and (min-width:0) {
  .wrap {width:98%; margin: 0 auto; }


}
/* ------------------------------------- 1200px-------------------- */

/* ---------------------------- 11500px-------------------- */
@media screen and (max-width:1150px) and (min-width:0) {

  .navbar {
    display: none;
  }
  .main-menu-container-outer {
    position: fixed;
    z-index: 666;
    display: inline-block;
  }
  .burger {
    display: inline-block;
  }
  .custom-menu-padding {
    height: 50px!important;   
  }

}
/* ------------------------------------- 1150px-------------------- */



/* ---------------------------- 992px-------------------- */
@media screen and (max-width:992px) and (min-width:0) {


}
/* ------------------------------------- 992px-------------------- *//* ===================================================================
   SANO 2026 REDESIGN — everything below this line is ours.
   Nothing above it has been modified. Safe to delete as one block
   when the nav is rebuilt.
   =================================================================== */

.navbar {
  --sano-accent: #F4511E;          /* the nav still uses #f75338 elsewhere */
  --sano-ink: #0B1B2B;
  --sano-nav-hover: #000000;
  --sano-rule: rgba(11, 27, 43, .16);
  --sano-nav-pad: clamp(32px, 5vw, 64px);
}

/* ---- 1. FULL WIDTH, AND THE BAR BECOMES FLEX ---------------------
   The bar no longer sits in a 1168px container: it spans the
   viewport with a 64px gutter that eases off on narrower laptops.

   The original lays the row out with floats and a fixed 700px links
   box. Floats cannot hold a divider between two groups, so the row
   is switched to flex. DOM order is logo → buttons → links, and
   "order" puts them back in visual order without touching markup.

   The child combinator matters: ".navbar .wrap" would also match
   the <div class="wrap headerNav"> inside the dropdown panel and
   wreck its column layout. Only the top bar is a direct child.
------------------------------------------------------------------- */
.navbar > .wrap {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: var(--sano-nav-pad);
}

.navbar > .wrap > .navbar-logo-link       { order: 1; }
.navbar > .wrap > .desktop-links-container { order: 2; }
.navbar > .wrap > .navbar-btn-container   { order: 3; }

.navbar .navbar-logo-container { float: none; padding-top: 0; }

.navbar .desktop-links-container {
  display: flex;
  align-items: center;
  width: auto;
  margin: 0 0 0 auto;              /* pushes both groups to the right */
}

.navbar .desktop-links-container > div {
  float: none !important;
  display: flex;
  align-items: center;
}

.navbar .desktop-links-container .group { display: none; }

.navbar .main-navbar-link,
.navbar .dropdown { float: none !important; }

/* ---- 2. A LITTLE MORE AIR BETWEEN THE LINKS ---------------------- */
.navbar a.main-navbar-link,
.navbar .dropdown .dropbtn {
  padding: 14px 16px;              /* was 14px 10px */
}

/* ---- 3. THE DIVIDER ----------------------------------------------
   A pseudo-element on the button group, so no markup is needed.
------------------------------------------------------------------- */
.navbar .navbar-btn-container {
  float: none !important;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 0;
  margin-left: 10px;
}

.navbar .navbar-btn-container::before {
  content: "";
  flex: 0 0 1px;
  width: 1px;
  height: 24px;
  background: var(--sano-rule);
  margin-right: 8px;
}

/* ---- 4. FIRST BUTTON → PLAIN LINK WITH ICONS ---------------------
   Targeted by position, not by class: the class comes from the
   button_choice field and either value is possible. First in the
   repeater is "for patients".

   !important is needed because the colours are printed inline on
   the tag from the content fields. Clear those three colour fields
   in the global content and every !important here can go.
------------------------------------------------------------------- */
.navbar .navbar-btn-container a:nth-child(1) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto !important;
  min-width: 0;
  padding: 8px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--sano-ink) !important;
  font-size: 15px !important;
  font-weight: 400;
  line-height: 1.2;
  transition: opacity 240ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Both icons are masks, so they take the link's own colour and
   never need re-exporting if the colour changes. */
.navbar .navbar-btn-container a:nth-child(1)::before,
.navbar .navbar-btn-container a:nth-child(1)::after {
  content: "";
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* person */
.navbar .navbar-btn-container a:nth-child(1)::before {
  width: 16px;
  height: 16px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* diagonal arrow */
.navbar .navbar-btn-container a:nth-child(1)::after {
  width: 11px;
  height: 11px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
}

/* ---- 5. SECOND BUTTON → SMALLER FILLED PILL ---------------------- */
.navbar .navbar-btn-container a:nth-child(2) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  padding: 10px 20px !important;
  border: 1px solid var(--sano-accent) !important;
  border-radius: 999px !important;
  background: var(--sano-accent) !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.2;
  margin-right: 0;
  transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 180ms ease,
              border-color 180ms ease;
}

/* ---- 6. DROPDOWN ITEMS ON HOVER ----------------------------------
   Text goes black and the arrow flips to point up.

   The colour needs !important: the button carries an inline
   style="color:…" printed from the dropdown_item_text_colour field.

   The arrow is an <img> from a field, so it cannot be recoloured
   directly — brightness(0) forces any image to pure black, which
   keeps it in step with the text without re-exporting the SVG.

   Deliberately NOT behind @media (hover: hover): the panel itself
   opens on :hover in the agency's own CSS, ungated. Gating only
   these two would leave a large touch screen opening the panel
   while the item stayed inert.
------------------------------------------------------------------- */
.navbar .dropdown .dropbtn {
  transition: color 240ms cubic-bezier(0.23, 1, 0.32, 1);
}

.navbar .dropdown .dropdown-arrow img {
  display: inline-block;
  transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1),
              filter 240ms ease;
}

.navbar .dropdown:hover .dropbtn {
  color: var(--sano-nav-hover) !important;
}

.navbar .dropdown:hover .dropdown-arrow img {
  transform: rotate(180deg);
  filter: brightness(0);
}

/* ---- 7. BUTTON HOVER — gated so a tap does not leave it stuck ---- */
@media (hover: hover) and (pointer: fine) {
  .navbar .navbar-btn-container a:nth-child(1):hover { opacity: .7; }

  .navbar .navbar-btn-container a:nth-child(2):hover {
    transform: translateY(-1px) scale(1.04);
    background: color-mix(in srgb, var(--sano-accent) 88%, #000) !important;
    border-color: color-mix(in srgb, var(--sano-accent) 88%, #000) !important;
  }
}

.navbar .navbar-btn-container a:nth-child(2):active { transform: scale(.99); }

/* ---- 8. DROPDOWN PANEL, ALIGNED WITH THE FULL-WIDTH BAR ----------
   Without this the bar spans the viewport while the panel content
   stays in a centred 1130px column, and the panel's left column no
   longer falls under the logo. Delete this block to keep the panel
   centred as it was.
------------------------------------------------------------------- */
.navbar .dropdown-content .wrap.headerNav {
  max-width: none;
  width: 100%;
  padding-inline: var(--sano-nav-pad);
}

/* ===================================================================
   END SANO 2026 REDESIGN
   =================================================================== */