html {
    font-size: 16px;
    --sp-cointainer-padding: 10vw;
}
body {
    font-family: "Mulish", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
  }
  
  #header{
      position: sticky;
      top: 0;
      width: 100%;
      z-index: 999;
      
      left: 0px;
      background: #FFFFFF 0% 0% no-repeat padding-box;
      opacity: 1;
  }
  .header-top {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
  }
  .mobile-counsel{
    display: none !important;
  }
  .container {
    max-width: calc(100vw - ( 2 * var(--sp-cointainer-padding) ) - 0.5vw);
  }
  .logo{
      /* UI Properties */
      background: transparent  0% 0% no-repeat padding-box;
      opacity: 1;
  }
  .square-button{
      padding-top: 8px;
      padding-left: 2px;
      width: 40px;
      height: 40px;
      background: #F0F4F7 0% 0% no-repeat padding-box;
      border-radius: 50%;
  }
  .square-button:hover{
    background: #E5EAED 0% 0% no-repeat padding-box;
  }
  /* Apply transition */

  .collapse-card{
    position: absolute;
    z-index: 99;
    top: 10em;
    width: 125%;
    left: -11.9em;
    border: none;
    
  }
  .collapse-card {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    opacity: 0;
    transform: translateY(-15px); /* gentler motion */
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
    border-radius: unset;
    border-bottom: .3rem solid #BFFAFF;
  }
  
  .collapse.show .collapse-card {
    opacity: 1;
    transform: translateY(0);
  }

  .counsel-code{
    text-align: center;
    font: normal normal 900 1.5rem/1.625rem Mulish;
    color: #035EA5;
  }
  .collapse-text{
    font: normal normal 600 1.25rem/1.25rem Mulish;
    color: #1D2429;
  }
  .collapse-dot {
    height: 8px;
    width: 8px;
    background-color: #159bd7;
    border-radius: 50%;
    display: inline-block;
  }
  .vert-divider{
      height: 45px;
      border-right: 1px solid #CCD0D5;
      padding-left:2em;
      
  }
  .phone-number{
      padding-left: 2rem;
      padding-right: 2rem;
  }
  .phone-number a {
    font-weight:bold;
    font-size: 1.25rem;
    text-decoration: none; 
    color: #035EA5;
  }
  .top-phone-number{
      text-align: center;
      display: none;
  }
  .menu{
      /*margin-top: -2.5rem !important;*/
  }
  .buttons{
      top: 33px;
  }
  .img-logo{
    
   }
  .menus{
      margin-top: 39px;
      
  }
  .btn-counsel{
      border: unset;
  }
  .header-icon{
    /*  position: relative;
      top: 7px;
      left: 0px;
      opacity: 1;*/
  }



  /*Counsel code toggle button transitions*/
  /* Collapse content animation */
  .icon-open img{
    width: 16px;
    height: 16px;    
  }
.collapse-card {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    opacity: 0;
    transform: scale(0.95);
    border-radius: 0;
    border-bottom: .3rem solid #BFFAFF;
  }
  
  .collapse.show .collapse-card {
    opacity: 1;
    transform: scale(1);
  }
  
  /* Icons */
  .header-icon {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  .icon-close {
    transform: scale(0.95);
  }
  
  /* Button styles (optional) */
  .btn-counsel {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  
  
  /*Counsel code toggle button transitions ends*/



  .navbar {
    display: block;
  }
  .navbar-nav li{
    transition: 1s;
  }
  .navbar-nav li:hover, .navbar-nav .active {
      background: #DBF1FC 0% 0% no-repeat padding-box;
      transition:background-color 0.8s ease;
      border-radius: 17px;
      opacity: 1;
    }
  
  .dropdown-menu{
      padding-top: 0px;
      padding-bottom: 0px;
  }
  .dropdown-menu li:hover, .dropdown-menu li:active, .dropdown-item:hover, .dropdown-item:active {
      color: #000000 !important;
      text-decoration: none;
      background-color: #DBF1FC !important;    
      transition:background-color 1s ease;
   }
  .hamburger{
      display: none;
  }
  
  .navbar{
      background-color: none !important;
  }
  .dropdown-menu{
      border-radius: 0px;
  }
  .dropdown .dropdown-menu {
      transition: opacity 1s ease;
      opacity: 0;
      display: none;
      
  }
  .dropdown:hover .dropdown-menu {
      display:block;
      opacity: 1;
      height: auto;
      margin-top: 0;
  }
  .dropdown a{
      position:relative;
      
  }
.navbar-toggler{
    border: none;
    font-size: 1.25rem;
}
.navbar-toggler:focus{
    box-shadow: none;
}
.nav-item {
    /*padding: 0 1rem;*/
}
.navbar-nav {
    --bs-navbar-nav-link-padding-x : 1.5rem;
    /*font-family: sans-serif !important;*/
} 
.btn_1 {
    color: #ffffff;
    border-radius: 2em;
    padding: .6em 2.0em .6em 2.0em;
    opacity: 1;
    justify-content: center;
    align-items: center;
    transition: 0.6s ease-in;
    font-size: 1.05rem;
    margin-left: 1.9rem;
}
  
.green-btn {
    background: #039F9F 0% 0% no-repeat padding-box;
}
.green-btn:hover{
    background: #28C1C1 0% 0% no-repeat padding-box;    
}

.green-btn a, .blue-btn a{
    color: #ffffff;
    text-decoration: none;    
    font-family: Montserrat !important;
}
.blue-btn {
    background: #035EA5 0% 0% no-repeat padding-box;
}
.blue-btn:hover{
    background: #1B7CC7 0% 0% no-repeat padding-box;
}
.row-break{
    display: none;
}
.offcanvas-body {
    flex-grow: 0;
}
.scrollbar{
    background: #BFFAFF 0% 0% no-repeat padding-box;
    text-align: center;
}
.scrollbar span {
    font-size: 1.25rem;
    font-weight:300;
}
.carousel-control-next-icon {
    background: transparent url('../img/Icon-ion-arrow-back-circle.png') 0% 0% no-repeat padding-box !important;
    opacity: .8;
    transition: 0.6s;
}
.carousel-control-prev-icon {
    background: transparent url('../img/Icon-ion-arrow-back-circle.png') 0% 0% no-repeat padding-box !important;
    transform: rotate(180deg);
    opacity: .8 !important;
    transition: 0.6s;
}

.carousel-control-next, .carousel-control-prev {
    opacity: .8 !important;
}
.carousel-control-prev-icon:hover {
    opacity: 1 !important;
    margin-left: -1em;
}
.carousel-control-next-icon:hover {
    margin-right: -1em;
    opacity: 1 !important;
}

    @media only screen and (max-width: 1900px) {
        html {
            font-size: 15px;
            --sp-cointainer-padding: 2.5vw;
        }
    }

    @media only screen and (max-width: 1400px) {
        html {
            font-size: 14px;
            --sp-cointainer-padding: 2.5vw;
        }
    }

    @media only screen and (max-width: 768px) {
      /* For mobile phones: */
      
      .btn_1{
        padding: unset;
        padding: 1rem;
        border-radius: .8rem !important;
      }
      
      .phone-number, .vert-divider{
          display: none !important;
      }
      .top-phone-number{
          text-align: center;
          display: block;
          font-size: 1.5rem;
          /*margin-top: 1.2em !important;
          margin-bottom: .5em !important;*/
      }
      .offcanvas-header{
        margin-top: 2rem;
      }
      .btn_1{
        margin-left: unset;
      }
      .collapse-card {
        width: 100%;
        left: .0em;        
    }
    .counsel-lg{
        display: none;
    }
    .collapse-card{
        top: 9.1rem;
    }
      .header-buttons-col{
        justify-content: center;
      }
      .menu{
          margin-left: 0px;;
      }
      .navbar-nav li:hover, .navbar-nav .active {
        background: unset;
        transition: unset;
        border-radius: unset;
        opacity: 1;
      }
      .nav-link{
        color: #565656;
        font-size: 1.4rem;
        
      }
      .nav-item{
        border-bottom: 1px solid #D7D7D7;
        padding-bottom: .6rem;
        padding-top: .6rem;
      }
      .nav-item:last-child {
        border: none;
      }
      .dropdown .dropdown-menu {
        opacity: 1 !important;
        display: block !important;
        border: none !important;
    }
    .dropdown-toggle::after{
        display: none;
    }
    .dropdown-menu li {
        list-style: none; /* remove default bullet */
        position: relative;
    }
    
    .dropdown-menu li::before {
        content: "-";
        position: absolute;
        left: 0;
        font-size: 1.8em; /* make hyphen bigger */
        line-height: 1;
        color: inherit;
    }
      .row-break{
          display: inline;
      }
      #header {
        position: relative;
      }
      .header-top {
          padding-top: 0rem;
          padding-bottom: 0.0rem;
      }
      
      .mobile-counsel{
        display: block !important;
      }
      .navbar-brand {
          margin-top: 0rem !important;
      }
      .navbar {
        margin-top: 0rem !important;
        margin-bottom: 0rem !important;
      }
    }
  
    /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (max-width: 992px) {
       .phone-number, .vert-divider{
          display: none !important;
          margin-left: 0px !important;
      }
      .header-buttons {
          margin-left: 0px !important;
      }
      .navbar-toggler {
        text-align: end; 
        width: 20vw; 
        margin-right: 2vw;
      }
  }