/* Mobile-First Header
  -------------------------------------------------------------- */
  @font-face {
      font-family: 'Gotham-Book-Regular';
      font-style: normal;
      font-display: swap;
      src: url(../fonts/ESPAlphaHeadlineTab-Bold.otf) format('opentype');
  }

  @font-face {
      font-family: 'Gotham-Book-Regular';
      font-style: normal;
      font-display: swap;
      src: url(../fonts/ESPAlphaHeadlineTab-Regular.otf) format('opentype');
  }

  header {
      width: 100%;
      height: 100px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
      color: #ffffff;
      background-color: #FCE46E;
      transition: 1s all ease;
  }

  .headerlogo {
      /* width: 140px; */
      transition: 1s all ease;
  }

  header #logo {
      color: white;
      height: 45px;
      font-size: 1.6em;
      font-weight: 200;
      line-height: 45px;
      display: inline-block;
      float: none;
      margin: 0 auto;
      text-align: left;
      font-weight: 200;
      position: relative;
      z-index: 999;
  }

  header .socialIcons {
      display: none;
  }

  header .socialIcon {
      padding: 10px 14px;
      border-radius: 25px;
      color: white;
      font-size: 15px;
  }

  header .socialIcon:hover {
      color: #FCE46E;
  }

  header nav {
      display: none;
      color: #ffffff;
      margin-right: 5%;
      font-family: 'Gotham-Book-Regular';
  }

  .headercontainer {
      max-width: 100%;
      padding-top: 2%;
  }

  .dropdown-menu {
      background-color: #003B6F;
      padding: 0.2rem 0;
  }

  .dropdown-item {
      color: white !important;
      margin-left: 0;
      text-align: left;
      /* padding: 0; */
  }

  .dropdown-item:hover {
      background-color: inherit;
      color: #FCE46E !important;
      margin-left: 0;
  }

  .searchButton {
      color: white;
      border-left: 2px solid white;
      padding: 12px;
      font-size: 16px;
      padding-left: 17px;
      margin-left: 10px;
  }

  .searchButton:hover {
      color: #FCE46E !important;
      cursor: pointer;
  }


  /* Mobile nav menu --hamburger menu
------------------------------------------------------- */
  .button_container:before {
      position: absolute;
      content: '';
      top: -10px;
      right: -15px;
      left: -15px;
      bottom: -10px;
      cursor: pointer;
  }

  .button_container {
      position: absolute;
      top: 55px;
      right: 5%;
      height: 21px;
      width: 30px;
      cursor: pointer;
      z-index: 999;
  }

  .button_container:hover {
      opacity: .7;
  }

  .button_container.active .top {
      -moz-transition: translateY(11px) translateX(0) rotate(45deg);
      -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
      transform: translateY(8px) translateX(0) rotate(45deg);
      background: #FFF;
  }

  .button_container.active .middle {
      opacity: 0;
      background: #FFF;
  }

  .button_container.active .bottom {
      -moz-transition: translateY(-11px) translateX(0) rotate(-45deg);
      -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
      transform: translateY(-8px) translateX(0) rotate(-45deg);
      background: #FFF;
  }

  .button_container span {
      background: #003B6F;
      border: none;
      height: 3px;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;

  }

  .button_container span:nth-of-type(2) {
      top: 8px;
  }

  .button_container span:nth-of-type(3) {
      top: 16px;
  }

  header {
      background-color: transparent;
      border-bottom: 0;
      position: absolute;
  }

  header nav a {
      color: white;
      font-size: 20px;
  }

  .hero.navBanner {
      border-bottom: 4px solid #003B6F;
      position: relative;
  }

  .navBanner img {
      height: 50vh;
  }

  .navBanner::before {
      content: "";
      background: color-mix(in srgb, #3a1f6ec7, transparent 50%);
      position: absolute;
      inset: 0;
      z-index: 2;
  }

  .navTitle {
      position: absolute;
      top: 60%;
      left: 5%;
      color: white;
      z-index: 9;
  }

  .dropdown-menu2 {
      display: block !important;
      position: absolute;
      /* width: 180px; */
      top: 42px;
      left: 15px;
      background-color: #003B6F;
      padding: 10px 0 10px;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      -webkit-box-shadow: 0px 12px 30px -2px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0px 12px 30px -2px rgba(0, 0, 0, 0.1);
      -o-box-shadow: 0px 12px 30px -2px rgba(0, 0, 0, 0.1);
      box-shadow: 0px 12px 30px -2px rgba(0, 0, 0, 0.1);
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      padding-bottom: 1px;
  }

  .dropdown:hover>.dropdown-menu2 {
      visibility: visible;
      opacity: 1;
      pointer-events: inherit;
  }

  .dropdown-menu2::before {
      width: 0;
      height: 0;
      border-left: 12px solid transparent;
      border-bottom: 12px solid #003B6F;
      content: '';
      position: absolute;
      top: -12px;
      left: 24px;
  }

  #home .homebanner img {
      user-select: none;
  }

  /* Mobile nav menu --fullscreen overlay menu
------------------------------------------------------- */

  #overlay {
      -webkit-backface-visibility: hidden;
      z-index: 13;
  }

  /* width */
  #overlay ::-webkit-scrollbar {
      width: 10px;
  }

  /* Track */
  #overlay ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(13, 6, 77, 0.493);
      border-radius: 10px;
  }

  /* Handle */
  #overlay ::-webkit-scrollbar-thumb {
      background: #003B6Fbd;
      border-radius: 10px;
  }

  /* Handle on hover */
  #overlay ::-webkit-scrollbar-thumb:hover {
      background: rgba(13, 6, 77, 0.493);
  }


  .nobtnstyle {
      background: none;
      color: inherit;
      border: none;
      padding: 0;
      font: inherit;
      cursor: pointer;
      outline: inherit;
      font-family: 'Gotham-Book-Regular';
      font-size: 20px;
      width: 100%;
      text-align: left;
  }

  .nobtnstyle i {
      float: right;
      padding-top: 4px;
  }

  .nobtnstyle:focus {
      outline: none;
  }


  .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 0%;
      opacity: 0;
      visibility: hidden;
      overflow-y: scroll;
      overflow-x: hidden;
  }



  .overlay.open {
      -webkit-backface-visibility: hidden;
      opacity: 1;
      transition: opacity .5s;
      visibility: visible;
      height: 100%;
      z-index: 10;
      background-color: #003B6F;
      transition: background .35s ease;
      color: white;
  }

  .overlay.open li {
      -webkit-animation: fadeInRight 0s ease forwards;
      animation: fadeInRight 0s ease forwards;


  }

  .overlay nav {
      position: relative;
      height: 100%;
      top: 68%;
      /* height: 70%;
      top: 60%; */
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      font-size: 15px;
      font-weight: 300;
      text-align: left;
      font-family: 'Gotham-Book-Regular';
  }

  .overlay ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      display: inline-block;
      position: relative;
      font-family: 'Gotham-Book-Regular';
      width: 100%;

  }

  .overlay ul li {
      display: block;
      height: 25%;
      height: calc(100% / 4);
      height: auto;
      position: relative;
      opacity: 0;
      width: 100%;
      font-family: 'Gotham-Book-Regular';
  }

  .overlay ul li a {
      display: block;
      position: relative;
      color: white;
      text-decoration: none;
      overflow: hidden;
      padding-bottom: .18em;
      font-family: 'Gotham-Book-Regular';
      font-size: 15px;

  }

  .overlay ul li a:hover {
      color: #FCE46E !important;
  }

  #whoweare-submenu,
  #ourbrands-submenu {
      display: none;
      margin: 2% 0% 0% 15% !important;
  }

  .mobileSearch {
      display: none;
  }

  @-webkit-keyframes fadeInRight {
      0% {
          opacity: 0;
          left: 20%;
      }

      100% {
          opacity: 1;
          left: 0;
      }
  }

  @keyframes fadeInRight {
      0% {
          opacity: 0;
          left: 20%;
      }

      100% {
          opacity: 1;
          left: 0;
      }
  }

  #search-addon {
      margin-right: 12%;
      color: #FCE46E !important;
      background-color: transparent;
  }

  @media (min-width: 1200px) {
      .button_container {
          display: none;
      }

      header {
          position: absolute;
          height: 135px;
          -webkit-transition: height 0s;
          -moz-transition: height 0s;
          -ms-transition: height 0s;
          -o-transition: height 0s;
          transition: height 0s;
      }

      header #logo {
          display: inline-block;
          height: 45px;
          font-weight: 300;
          line-height: 45px;
          text-align: left;
          width: auto;
          margin-left: 2%;
          bottom: 35px;
      }

      header .socialIcons {
          display: block;
      }

      header nav {
          display: inline-block;
          float: right;
          margin-right: 0%;
          padding-top: 0;
          margin-right: 30%;
      }

      header nav a {
          text-decoration: none;
          line-height: 45px;
          margin-left: 30px;
          color: white;
          font-weight: 900;
          font-size: 16px;
          -webkit-transition: all 0s;
          -moz-transition: all 0s;
          -ms-transition: all 0s;
          -o-transition: all 0s;
          transition: all 0s;
          padding-bottom: 1.2%;
          font-family: 'Gotham-Book-Regular';
      }

      header nav a:hover {
          border: none;
          outline: none;
          color: #003B6F;
          border-bottom: 1px solid #FCE46E;
          text-decoration: none;

      }

      #headerid.smaller {
          height: 45px;
          font-size: 1em;
          text-shadow: none;
          position: fixed;
      }

      #headerid.smaller nav a {
          line-height: 45px;

      }
  }

  @media (min-width:1400px) {
      header nav a {
          text-decoration: none;
          line-height: 45px;
          margin-left: 30px;
          color: #003B6F ;
          font-weight: 900;
          font-size: 18px;
          -webkit-transition: all 0s;
          -moz-transition: all 0s;
          -ms-transition: all 0s;
          -o-transition: all 0s;
          transition: all 0s;
          padding-bottom: 1.2%;
          font-family: 'Gotham-Book-Regular';
      }

  }

  @media (min-width:1200px) and (max-width:1370px) {
      header nav a {
          text-decoration: none;
          line-height: 45px;
          margin-left: 30px;
          color: #003B6F;
          font-weight: 900;
          font-size: 14px;
          -webkit-transition: all 0s;
          -moz-transition: all 0s;
          -ms-transition: all 0s;
          -o-transition: all 0s;
          transition: all 0s;
          padding-bottom: 1.2%;
          font-family: 'Gotham-Book-Regular';
      }
  }

  @-webkit-keyframes fadeInTop {
      0% {
          opacity: 0;
          left: 20px;
      }

      100% {
          opacity: 1;
          left: 20px;
      }
  }

  @keyframes fadeInTop {
      0% {
          opacity: 0;
          top: -5%;
      }

      100% {
          opacity: 1;
          left: 0;
      }
  }

  /*NAVBAR MOBILE MENU STYLE START*/
  @media (min-width:900px) and (max-width:1200px) {
      .nobtnstyle {
          background: none;
          color: inherit;
          border: none;
          padding: 0;
          font: inherit;
          cursor: pointer;
          outline: inherit;
          font-family: 'Gotham-Book-Regular';
          font-size: 15px;
      }

      #overlay .submenu-table-td-text {
          padding-left: 31%;

      }

      #overlay .submenu-table-td-text {
          padding-left: 2%;
          width: 100%;
      }

      #overlay .yellowline {
          width: 40%;
          height: 1px;
          background-color: #FCE46E;

      }

      #whoweare-submenu,
      #ourbrands-submenu {
          margin: 2% 0% 0% 32% !important;
      }

  }

  @media (min-width:700px) and (max-width:899px) {
      .nobtnstyle {
          background: none;
          color: inherit;
          border: none;
          padding: 0;
          font: inherit;
          cursor: pointer;
          outline: inherit;
          font-family: 'Gotham-Book-Regular';
          font-size: 15px;
      }

      #overlay .submenu-table-td-text {
          padding-left: 2%;
          width: 100%;
      }

      #overlay .yellowline {
          width: 50%;
          height: 1px;
          background-color: #FCE46E;

      }

      #whoweare-submenu,
      #ourbrands-submenu {
          margin: 2% 0% 0% 28% !important;
      }

  }


  @media (min-width:500px) and (max-width:699px) {
      .nobtnstyle {
          background: none;
          color: inherit;
          border: none;
          padding: 0;
          font: inherit;
          cursor: pointer;
          outline: inherit;
          font-family: 'Gotham-Book-Regular';
          font-size: 15px;
      }

      .overlay ul li a {
          display: block;
          position: relative;
          color: #ffffff;
          text-decoration: none;
          overflow: hidden;
          padding-bottom: 0.18em;
          font-family: 'Gotham-Book-Regular';
          font-size: 15px;
      }

      #overlay .submenu-table-td-text {
          padding-left: 2%;
          width: 100%;
      }

      #overlay .yellowline {
          width: 53%;
          height: 1px;
          background-color: #FCE46E;

      }

      #whoweare-submenu,
      #ourbrands-submenu {
          margin: 2% 0% 0% 28% !important;
      }

  }

  @media (min-width:400px) and (max-width:499px) {
      .nobtnstyle {
          background: none;
          color: inherit;
          border: none;
          padding: 0;
          font: inherit;
          cursor: pointer;
          outline: inherit;
          font-family: 'Gotham-Book-Regular';
          font-size: 13px;
      }

      .overlay ul li a {
          display: block;
          position: relative;
          color: white;
          text-decoration: none;
          overflow: hidden;
          padding-bottom: 0.18em;
          font-family: 'Gotham-Book-Regular';
          font-size: 13px;
      }

      #overlay .submenu-table-td-text {
          padding-left: 2%;
          width: 100%;
      }

      #overlay .yellowline {
          width: 80%;
          height: 1px;
          background-color: #FCE46E;

      }

  }

  @media (min-width:0px) and (max-width:399px) {
      .nobtnstyle {
          background: none;
          color: inherit;
          border: none;
          padding: 0;
          font: inherit;
          cursor: pointer;
          outline: inherit;
          font-family: 'Gotham-Book-Regular';
          font-size: 13px;
      }

      .overlay ul li a {
          display: block;
          position: relative;
          color: white;
          text-decoration: none;
          overflow: hidden;
          padding-bottom: 0.18em;
          font-family: 'Gotham-Book-Regular';
          font-size: 13px;
      }

      #overlay .submenu-table-td-text {
          padding-left: 2%;
          width: 100%;
      }

      #overlay .yellowline {
          width: 80%;
          height: 1px;
          background-color: #FCE46E;

      }

  }

  @media (max-width:1199px) {
      .searchButton {
          border: 0;
      }

      .headercontainer {
          padding-top: 0;
      }

      .mobileSearch {
          display: block;
          color: #003B6F;
          position: absolute;
          right: 10%;
          top: 30px;
          z-index: 999;
      }

      #whoweare-submenu,
      #ourbrands-submenu {
          margin: 2% 0% 0% 0% !important;
      }

      .overlay ul li {
          padding-left: 30%;
      }

      .nobtnstyle {
          padding-right: 43%;
      }

      .dropdown-item {
          padding: 0.25rem 0.5rem;
      }

      .searchButton {
          font-size: 20px !important;
          padding-top: 5px;
      }

      .mobileMenuBtn {
          font-size: 16px !important;
          color: #ffffffc2 !important;
      }

      .mobileBtn {
          color: white !important;
      }

      .mobileMenuLi {
          padding-bottom: 30px;
      }

  }

  @media (max-width:949px) {

      .overlay ul li {
          padding-left: 30%;
      }

      .nobtnstyle {
          padding-right: 43%;
      }
  }

  @media (max-width:899px) {
      .overlay ul li {
          padding-left: 25%;
      }

      .nobtnstyle {
          padding-right: 34%;
      }
  }

  @media (max-width:699px) {
      .overlay ul li {
          padding-left: 24%;
      }

      .nobtnstyle {
          padding-right: 32%;
      }
  }

/* Tablet (768px and above) - Both fixes */
@media (min-width: 768px) {
    
    .hero.navBanner:not(.homebanner) img {
        height: 50vh !important;
        min-height: 500px !important;
        /* object-fit: cover !important; */
    }
}

/* Desktop (992px and above) - Larger banners */
@media (min-width: 992px) {
    .hero.navBanner:not(.homebanner) img {
        height: 50vh !important;
        min-height: 500px !important;
    }
}

/* Mobile (below 1200px) - Home visibility fix */
@media (max-width: 1199px) {
    .overlay.open ul li:first-child {
        display: block !important;
        opacity: 1 !important;
    }
    
    .overlay ul li.mobileMenuLi:first-child {
        display: block !important;
        margin-top: 30px !important;
        padding-top: 15px !important;
    }
}
  @media (max-width:768px) {
      .mobileSearch {
          right: 12%;
          color: #003B6F;
          position: fixed;
      }

      .button_container span {
          background: #003B6F;
      }

      .button_container {
          position: fixed;
      }

      header {
          height: initial;
          position: fixed;
      }

      header .headercontainer {
          height: 100%;
          background-color: white;
          padding-top: 0;
          border-bottom: 2px solid #003B6F;
      }

      .headercontainer.open {
          background-color: #003B6F !important;
      }

      header .headercontainer.open {
          border-bottom: 0;
      }

      header #logo {
          height: 100%;
      }

      header #logo img {
          height: 100%;
          padding: 10px 0 0 10px;
      }

      .hero.navBanner {
          margin-top: 9.6vh;
      }

      .headerlogo {
          width: 100px;
          transition: 1s all ease;
      }

      /* .headercontainer .row {
          padding-bottom: 0.5rem !important;
          padding-top: 0.5rem !important;
      } */

      #home .homebanner {
          margin-top: 13vh;
      }

      #aboutus .hero {
          margin-top: 9.6vh;
      }

      .navTitle {
          top: 60%;
      }

  }

  @media (max-width:499px) {
      .overlay ul li {
          padding-left: 10%;
      }

      .nobtnstyle {
          padding-right: 12%;
      }
  }

  @media (max-width:426px) {
      .navTitle h4 {
          font-size: 18px;
      }

      .mobileSearch {
          right: 15%;
      }
  }

  @media (min-width:2000px) {
    
       header nav a {
        font-size: clamp(30px, 1vw, 18px); 
    }   

    
      header .container {
        min-height: 180px;
    }

  }
 .navBanner {
    height: 50vh;
    min-height: 500px !important;
    position: relative;
    overflow: hidden;
}

 .navBanner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

  /*NAVBAR MOBILE MENU STYLE END*/

  /* Start Search Bar */
  .searchModal {
      background: #0c0935;
      position: fixed;
      width: 100%;
      height: 0;
      z-index: 9999;
      left: 0;
      bottom: 0;
      transition: 0.3s;
      display: flex;
      align-items: center;
      opacity: 0;
      visibility: hidden;
  }

  .searchModal.active {
      opacity: 1;
      visibility: visible;
      height: 100%;
  }

  .searchClose {
      position: absolute;
      top: 110px;
      right: 13%;
      padding: 5px;
      font-size: 24px;
      cursor: pointer;
      color: #FCE46E;
  }

  .searchBar {
      width: 70%;
      margin: 0 auto;
      position: relative;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
  }

  .searchBar input {
      width: 100%;
      background: none;
      height: 50px;
      font-size: 24px;
      font-weight: 300;
      padding: 0 35px 0 0px;
      margin-bottom: 0;
      color: white;
      border: 0;
  }

  .searchBar input::placeholder {
      color: rgba(255, 255, 255, 0.75);
  }

  .searchBar input:focus {
      border: 0 !important;
      outline: none;
  }

  .searchBar button {
      position: absolute;
      bottom: 11px;
      right: 0;
      border: 0;
      padding: 0;
      background: none;
      font-size: 20px;
      color: rgba(255, 255, 255, 0.5);
  }

  .searchBar button:focus {
      border: 0 !important;
      outline: none;
  }

  .searchbutton span:hover {
      color: #FCE46E;
  }

  /* End Search Bar */

  @media (max-width: 1199px) {
      .button_container.active span {
          background: #FCE46E !important;
      }

      .mobileSearch.active {
          color: #FCE46E;
      }

      .mobileSearch.active .searchButton:hover {
          color: #FCE46E !important;
      }

      .button_container.active span {
          background: #FCE46E !important;
      }

      .searchButton:hover {
          color: #003B6F !important;
      }
  }