@font-face {
    font-family: Friz-Quadrata;
    src: url("./fonts/friz-quadrata-std-medium.otf") format("opentype");
}

@font-face {
    font-family: Friz-Quadrata;
    font-style: italic;
    src: url("./fonts/friz-quadrata-std-italic.otf") format("opentype");
}

@font-face {
    font-family: Friz-Quadrata;
    font-weight: bold;
    src: url("./fonts/friz-quadrata-std-bold.otf") format("opentype");
}

@font-face {
    font-family: Friz-Quadrata;
    font-style: italic;
    font-weight: bold;
    src: url("./fonts/friz-quadrata-std-bold-italic.otf") format("opentype");
}

@font-face {
    font-family: Futura;
    src: url("./fonts/futura-bk.ttf") format("truetype");
}

@font-face {
    font-family: Futura;
    font-style: italic;
    src: url("./fonts/futura-bk-italic.ttf") format("truetype");
}

@font-face {
    font-family: Futura;
    font-weight: bold;
    src: url("./fonts/futura-bold.ttf") format("truetype");
}

@font-face {
    font-family: Futura;
    font-style: italic;
    font-weight: bold;
    src: url("./fonts/futura-bold-italic.ttf") format("truetype");
}

@font-face {
    font-family: Futura-Bold;
    src: url("./fonts/futura-bold.ttf") format("truetype");
}

@font-face {
    font-family: Myriad-Pro;
    font-style: italic;
    src: url("./fonts/MYRIADPRO-IT.OTF") format("opentype");
}

@font-face {
    font-family: Myriad-Pro;
    font-style: italic;
    font-weight: bold;
    src: url("./fonts/MYRIADPRO-BOLDIT.OTF") format("opentype");
}

@font-face {
    font-family: Myriad-Pro;
    font-style: italic;
    font-weight: 600;
    src: url("./fonts/MYRIADPRO-SEMIBOLDIT.OTF") format("opentype");
}

@font-face {
    font-family: 'Apple Color Emoji';
    src: local('Apple Color Emoji'), local('AppleColorEmoji'), local('apple-color-emoji');
    src:
      /*url('fonts/AppleColorEmoji.woff2') format('woff2'),
      url('fonts/AppleColorEmoji.woff') format('woff'),
      url('fonts/AppleColorEmoji.svg') format('svg'),
      url('fonts/AppleColorEmoji.eot?'),
      url('fonts/AppleColorEmoji.eot?#iefix') format('embedded-opentype'),*/
      url('fonts/AppleColorEmoji.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

html {
  background-color: #0a314b;
}

.solid-bg {
    position: fixed;
    z-index: -15;
    background-color: #0a314b;
    width: 100%;
    height: 120%;
    top: -8em;
}

html {
    font-family: Futura, 'Apple Color Emoji';
}

body {
    font-family: Futura, 'Apple Color Emoji';
    background-color: transparent;
  }

section, .view-error {
    background-color: white;
}

.view-error  {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

footer {
    outline: 1px solid #0a314b;
    position: relative;
    z-index: 2;
}

h1, h2{
    font-family: Friz-Quadrata, 'Apple Color Emoji';
    font-weight: bold;
  }
  
nav, .nav-link, .dropdown-item {
    font-family: Friz-Quadrata, 'Apple Color Emoji' !important;
    text-transform: uppercase;
  }

.nav-link {
    color: #fff !important;
    opacity: 0.55;
    transition: opacity 100ms ease;
}

.nav-item:hover .nav-link {
    opacity: 1;
    transition: opacity 100ms ease;
}
  
input, textarea {
    font-family: Friz-Quadrata, 'Apple Color Emoji' !important;
  }
  
button {
    font-family: Futura, 'Apple Color Emoji';
    font-weight: bold !important;
}

figure {
    margin: 0px;
}

figure figcaption {
    font-family: Myriad-Pro, 'Apple Color Emoji';
    font-style: italic !important;
    font-weight: bold !important;
    font-size: 13pt;
    text-align: center;
    margin-top: 4px;
}
  
  #bdiv1 {
    transform: translateX(-50px);
    opacity: 0;
    filter: blur(19px);
    transition: all .75s ease;
  }
  
  #bdiv2{
    transform: translateX(50px);
    opacity: 0;
    filter: blur(19px);
    transition: all .75s ease;
  }
  
   #bdiv3 {
    transform: rotateY(45deg);
    opacity: 0;
    filter: blur(19px);
    transition: all 1.42s ease;
  }
  
    #desktop-mode-switch {
    filter: blur(19px);
  }
  
  #desktop-mode-switch, #mobile-mode-switch {
    transform: scale(1.4);
    opacity: 0;
    transition: all .75s ease;
  }
  
  #bdiv1.show, #bdiv2.show{
    transform: translateX(0px);
    filter: blur(0px);
    opacity: 1;
  }
  
  #bdiv3.show {
    transform: rotateY(0deg);
    filter: blur(0px);
    opacity: 1;
  }
  
  #desktop-mode-switch.show, #mobile-mode-switch.show {
    transform: scale(1);
    opacity: 1;
  }
  
    #desktop-mode-switch.show {
    filter: blur(0px);
  }
  
  .single-line-input {
      border-radius: 50px;
  }
  
  .multi-line-input {
      border-radius: 8px;
  }
  
    
    .brand-hmse text {
    font-family: Friz-Quadrata, 'Apple Color Emoji' !important;
    }
    

@media (hover:hover) {

    .navbar {
    position: absolute;
    }
    
    .navbar::before {
        /*
        -webkit-transform: translate3d(0,0,0) !important;
        -moz-transform: translate3d(0,0,0) !important;
        -ms-transform: translate3d(0,0,0) !important;
        -o-transform: translate3d(0,0,0) !important;
        transform: translate3d(0,0,0) !important;
        */
    content: "";
    display: block;
    width: 100%;
    height: 56px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: brightness(2) blur(10px) saturate(.5);
    -webkit-backdrop-filter: brightness(2) blur(10px) saturate(.5);
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.4)!important;
    z-index: 1030;
    }
    
    .navbar::after {
        /*
        -webkit-transform: translate3d(0,0,0) !important;
        -moz-transform: translate3d(0,0,0) !important;
        -ms-transform: translate3d(0,0,0) !important;
        -o-transform: translate3d(0,0,0) !important;
        transform: translate3d(0,0,0) !important;
        */
    content: "";
    display: block;
    width: 100%;
    height: 56px;
    position: fixed;
    transform-origin: bottom;
    transform: scaleY(4);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, #214f6e 25%, #0098ff 0%); /*background-color: #214f6e;*/
    mix-blend-mode: multiply !important;
    z-index: 1031;
    }
    
    .brand-hmse {
        /*
        -webkit-transform: translate3d(0,0,0) !important;
        -moz-transform: translate3d(0,0,0) !important;
        -ms-transform: translate3d(0,0,0) !important;
        -o-transform: translate3d(0,0,0) !important;
        transform: translate3d(0,0,0) !important;
        */
        backdrop-filter: brightness(7);
        -webkit-backdrop-filter: brightness(18); /* Safari has weaker effect */
        clip-path: url(#svgBrand);
        transition: backdrop-filter 300ms ease, -webkit-backdrop-filter 300ms ease;
    }
    
    .brand-hmse:hover {
        backdrop-filter: brightness(100);
        -webkit-backdrop-filter: brightness(100);
        transition: backdrop-filter 600ms ease, -webkit-backdrop-filter 300ms ease;
    }
    
    @supports(-webkit-tap-highlight-color: black) {
        
    .navbar::before {
    mix-blend-mode: multiply !important;
    background-color: #fff;
    }
        
    }
    
    .nav-isolator {
        position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1032;
    margin-left: 69px;
    margin-right: 69px;
    max-width: 91%;
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
  isolation: isolate;
    }

    .dropdown-menu-s {
        display: block;
        list-style: none;
        padding-left: 0;
        padding-top: 4px;
        padding-bottom: 4px;
        pointer-events: none;
        visibility: hidden;
        position: absolute !important;
        border-radius: 8px;
        overflow: hidden;
        transform: translateY(-22px) scaleY(.2);
        transform-origin: top;
        transition: transform 300ms linear, box-shadow 300ms linear, visibility 250ms linear;
        font-family:Friz-Quadrata;
        text-transform: uppercase;
        box-shadow: 0px 2px 7px rgba(0, 0, 0, 0);
    }
    
    .dropdown-menu-s::before {
        /*
        -webkit-transform: translate3d(0,0,0) !important;
        -moz-transform: translate3d(0,0,0) !important;
        -ms-transform: translate3d(0,0,0) !important;
        -o-transform: translate3d(0,0,0) !important;
        transform: translate3d(0,0,0) !important;
        */
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        opacity: 0;
        filter: blur(19px);
        transition: opacity 300ms linear, filter 300ms linear;
    }
    
    .dropdown-background {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        left:0;
        top:0;
    }
    
    .dropdown-background-colour {
        background-color: #9ecfee80;
    }
    
    .dropdown-opacity-controller {
        opacity: 0;
        filter: blur(19px);
        transition: opacity 300ms linear, filter 300ms linear;
    }
    
      .navbar-nav li:hover > ul.dropdown-menu-s {
        pointer-events: auto;
        visibility: visible;
        transform:translateY(0px) scaleY(1);;
        box-shadow: 0px 2px 7px rgba(0, 0, 0, .4);
        transition: transform 500ms ease-out, box-shadow 500ms ease-out;
    }
    
      .navbar-nav li:hover > ul.dropdown-menu-s::before {
        opacity: 1;
        filter: blur(0px);
        transition: opacity 500ms ease-out, filter 500ms ease-out;
    }
    
      .navbar-nav li:hover .dropdown-opacity-controller {
        opacity:1;
        filter: blur(0px);
        transition: opacity 500ms ease-out, filter 500ms ease-out;
    }

    .dropdown-item {
        color: rgba(255, 255, 255, .6);
        /*mix-blend-mode: plus-lighter;*/
        opacity: 0;
        filter: blur(0px);
        transition: all 400ms ease-out;
    }
    
      .navbar-nav li:hover .dropdown-item {
        opacity:0.9;
        filter: blur(0px);
        transition: opacity 500ms ease-out, filter 500ms ease-out, backdrop-filter 250ms, -webkit-backdrop-filter 250ms;
    }

    .dropdown-item:hover {
        color:#fff;
        background-color: rgba(0,0,0,0);
        opacity: 1;
        backdrop-filter:brightness(2);
        -webkit-backdrop-filter:brightness(2);
        transition: all 250ms;
    }
  
  /* Add WA floating button CSS (Desktop) */
  .floating-firefox-safari-filter {
   position: fixed;
   width: 60px;
   height: 60px;
   bottom: 40px;
   border-radius: 50px;
   right: 40px;
   z-index: 98;
   background-color: rgba(0,0,0,0);
    backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
        /*
        -webkit-transform: translate3d(0,0,0) !important;
        -moz-transform: translate3d(0,0,0) !important;
        -ms-transform: translate3d(0,0,0) !important;
        -o-transform: translate3d(0,0,0) !important;
        transform: translate3d(0,0,0) !important;
        */
  }
  
  .floating {
        /*
        -webkit-transform: translate3d(0,0,0) !important;
        -moz-transform: translate3d(0,0,0) !important;
        -ms-transform: translate3d(0,0,0) !important;
        -o-transform: translate3d(0,0,0) !important;
        transform: translate3d(0,0,0) !important;
        */
   position: fixed;
   width: 60px;
   height: 60px;
   bottom: 40px;
   right: 40px;
   background-color: #25d366;
   color: #fff;
   border-radius: 50px;
   text-align: center;
   font-size: 30px;
    backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   box-shadow: 2px 2px 3px rgba(0, 0, 0, .4);
   z-index: 99;
   opacity: 100%;
   mix-blend-mode: multiply;
    transition: all 0.3s ease;
  }
  
  .floatingb {
        /*
        -webkit-transform: translate3d(0,0,0) !important;
        -moz-transform: translate3d(0,0,0) !important;
        -ms-transform: translate3d(0,0,0) !important;
        -o-transform: translate3d(0,0,0) !important;
        transform: translate3d(0,0,0) !important;
        */
   position: fixed;
   width: 60px;
   height: 60px;
   bottom: 40px;
   right: 40px;
   cursor: pointer;
   background-color: #25d366;
   color: #fff;
   border-radius: 50px;
   text-align: center;
   font-size: 30px;
   z-index: 100;
   opacity: 35%;
   mix-blend-mode: screen;
    transition: all 0.3s ease;
  }
  
  .fab-icon {
   margin-top: 16px;
  }

}

@media (hover:none), (hover:on-demand) {
    
    .navbar {
        background-color: rgb(10, 49, 75) !important;
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
        z-index: 1030;
    }
    
    .brand-hmse {
        background-color: #fff;
        clip-path: url(#svgBrand);
    }
  
    ul.dropdown-menu-s {
      display: none;
        list-style: none;
        padding-left: 0;
      position: absolute !important;
      background-color: #0a314b;
      border-radius: 8px;
      overflow: hidden;
  }
    
    .dropdown-background {
        display: none;
        width: 0;
        height: 0;
    }

    .navbar-nav li:hover > ul.dropdown-menu-s {
        display: block;
        background-color: #0a314b;
        border-color:#061e2e;
        width: 90vw;
        border-radius: 8px;
		z-index: 1;
    }

    .dropdown-item {
        color:#fff;
        opacity: initial;
        opacity: 0.6;
    }

    .dropdown-item:hover {
        color:#fff;
        background-color: #08293f;
        opacity: 0.8;
    }
  
  /* Add WA floating button CSS (Mobile) */
  .floating {
   position: fixed;
   width: 60px;
   height: 60px;
   bottom: 40px;
   right: 40px;
   background-color: #25d366;
   color: #fff;
   border-radius: 50px;
   text-align: center;
   font-size: 30px;
   box-shadow: 2px 2px 3px rgba(0, 0, 0, .4);
   z-index: 99;
   opacity: 75%;
   mix-blend-mode: normal;
    transition: 0.3s;
  }
  
  .floatingb {
   position: fixed;
   width: 60px;
   height: 60px;
   bottom: 40px;
   right: 40px;
   cursor: pointer;
   background-color: #25d344;
   color: #fff;
   border-radius: 50px;
   text-align: center;
   font-size: 30px;
   z-index: 100;
   opacity: 1%;
   mix-blend-mode: screen;
    transition: 0.3s;
  }
  
  .fab-icon {
   margin-top: 16px;
   mix-blend-mode: normal;
  }

}

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu > .dropdown-menu-s {
    top: 0;
    left: 100%;
    margin-top:-6px;
}

/* rotate caret on hover */
.dropdown-menu-s > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
} 

.subnav {
  position: relative;
  text-transform: uppercase;
  margin-left: 6%;
  text-decoration: none;
  background-color: #0A314B;
  padding: 10px 26px;
  color: white;
  border-radius: 500px;
}

.subnav-input {
  position: absolute;
  left:0;
  right:0;
  margin-left: 4%;
  margin-right: 3%;
  padding: 6px 22px;
      display: inline-block;
  box-shadow: 0px 0px 2px #000;
  border-radius: 500px;
  transition: 0.3s;
}

.subnav-input:focus-within {
  box-shadow: 0px 0px 5px #135D8F;
}

.subnav-input input {
  text-transform: uppercase;
  text-decoration: none;
  border-width: 0;
  padding-right: 30px;
  width: 100%;
}

.subnav-input input {
  outline: none;
}

.subnav-input svg {
  position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 16px; /* Adjust the right distance as needed */
      width: 16px; /* Adjust width */
      height: 16px;
  transition: 0.3s;
}

.subnav-input svg:hover {
  cursor: pointer;
  fill: #135D8F;
}
  
  .view-error {
    min-height: 40vh;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

.navbar-brand {
    font-weight: bold !important;
}


@media (hover:none), (hover:on-demand) /*, (max-width:767px) */ {

*, *:hover, *:focus, *:active, *::before, *::after, *::first-letter, *::first-line {
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}

}