.res-nav-link {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0px;
}
.res-nav-link img,
.res-nav-link svg {
  max-width: 52px;
  height: 46px;
  width: 100%;
}

header.scroll .res-nav-link img,
header.scroll .res-nav-link svg {
  max-width: 48px;
  height: 38px;
}

/* .res-nav-link.is-active {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
} */

/* menu icon start here */
.hamburger--slider .hamburger-inner{top:6px; left:0px;}
.hamburger--slider .hamburger-inner::before {
   top:18px;
   transition-property: opacity, -webkit-transform;
   transition-property: transform, opacity;
   transition-property: transform, opacity, -webkit-transform;
   transition-timing-function: ease;
   transition-duration: 0.2s;
   left:0px;
 }
.hamburger--slider .hamburger-inner::after {top:35px;}
.hamburger--slider.is-active .hamburger-inner {
  -webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
  transform: translate3d(0, 10px, 0) rotate(45deg);
  background-color: #08a0de;
}
.hamburger--slider.is-active .hamburger-inner::before {
  -webkit-transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
  transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
  opacity: 0;
  background-color: #08a0de;
}
.hamburger--slider.is-active .hamburger-inner::after {
  -webkit-transform: translate3d(0, -20px, 0) rotate(-90deg);
  transform: translate3d(0, -20px, 0) rotate(-90deg);
  background-color: #08a0de;
}

.hamburger--slider.is-active .hamburger-inner{ top:13px; left:0px;}
.hamburger--slider.is-active .hamburger-inner::after{ top:20px;}

.hamburger {
   display: inline-block;
   cursor: pointer;
   border-radius:4px;
   transition-property: opacity, -webkit-filter;
   transition-property: opacity, filter;
   transition-property: opacity, filter, -webkit-filter;
   transition-duration: 0.15s;
   transition-timing-function: linear;
   font: inherit;
   color: inherit;
   text-transform: none;
   border: 0;
   margin: 0;
   overflow: visible;
   width:52px; height:46px;
}
.hamburger:hover {/*opacity: 0.7;*/ }
.hamburger-box {width:52px; height:46px; display: inline-block;position: relative; border-radius: 4px;}

.hamburger-inner {display:block; top:50%; margin-top:-2px; width: 52px; height:46px;}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
   width:52px;
   height:3px;
   background-color: #08a0de;
   border-radius: 0px;
   position: absolute;
   transition-property: -webkit-transform;
   transition-property: transform;
   transition-property: transform, -webkit-transform;
   transition-duration: 0.15s;
   transition-timing-function: ease;
 }
.hamburger-inner::before, .hamburger-inner::after {content: ""; display: block; }
.hamburger-inner::before {top: -10px; }
.hamburger-inner::after {bottom: -10px; }
/* menu icon end here */

#nav-overlay {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  background: var(--blueColor);
  /* border-radius: 50%; */
  border-radius:4vw;
  transition: 1s;
  transform: scale3d(0, 0, 0);
  -webkit-animation:changeBgreverse 1s linear forwards;
  -moz-animation:changeBgreverse 1s linear forwards;
  -ms-animation:changeBgreverse 1s linear forwards;
  animation:changeBgreverse 1s linear forwards;
  opacity: 0;
  visibility: hidden;
}
body.open-menu #nav-overlay {
  transform: scale3d(1.1, 1.1, 1.1);
  -webkit-animation:changeBg 1s linear forwards;
  -moz-animation:changeBg 1s linear forwards;
  -ms-animation:changeBg 1s linear forwards;
  animation:changeBg 1s linear forwards;
  opacity: 1;
  visibility: visible;
}

@keyframes changeBg {
0%{background-color:#4E98DA;}
40%{background-color:#4E98DA;}
100%{background-color:var(--blueColor);}
}
@-webkit-keyframes changeBg {
  0%{background-color:#4E98DA;}
  40%{background-color:#4E98DA;}
  100%{background-color:var(--blueColor);}
}


@keyframes changeBgreverse {
0%{background-color:var(--blueColor);}
20%{background-color:var(--blueColor);}
60%{background-color:#4E98DA;}
100%{background-color:#4E98DA;}
}
@-webkit-keyframes changeBgreverse {
  0%{background-color:var(--blueColor);}
20%{background-color:var(--blueColor);}
  60%{background-color:#4E98DA;}
  100%{background-color:#4E98DA;}
}

.menuBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  /* background-color: var(--blueColor); */
  padding: 80px 40px;
  /* background-image: url("../images/menu-image-vector.svg"); */
  background-repeat: no-repeat;
  background-position: right 14% bottom 12%;
  background-size: 14vw;
}
.menuBox::before{
  content: '';
  width: 15vw;
  height: 71%;
  position: absolute;
  right: 11.5%;
  bottom: 4%;
  background-image: url("../images/menu-image-vector.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  transform: translateX(100%);
  background-size: contain;
  opacity: 0;
  visibility: hidden;
}

body.open-menu .menuBox::before{
-webkit-animation:showimage 0.8s cubic-bezier(.25,.46,.45,.94) forwards;
-moz-animation:showimage 0.8s cubic-bezier(.25,.46,.45,.94) forwards;
-ms-animation:showimage 0.8s cubic-bezier(.25,.46,.45,.94) forwards;
animation:showimage 0.8s cubic-bezier(.25,.46,.45,.94) forwards;
animation-delay:1s;
}

@keyframes showimage {
0%{opacity:0; visibility:hidden;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);}

100%{opacity:1; visibility:visible;
  -webkit-transform: translateX(0);
  transform: translateX(0);}
}
@-webkit-keyframes showimage {
  0%{opacity:0; visibility:hidden;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);}

  100%{opacity:1; visibility:visible;
    -webkit-transform: translateX(0);
    transform: translateX(0);}
}

.menuBox .content_1840 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.menuBox .content_1840,
.menuBox .menu-main-menu-container,
.menuBox ul {
  /* height: 100%; */
  width: 100%;
}
.menuBox .content_1840 {
  overflow-y: auto;
}

body.open-menu .menuBox {
  opacity: 1;
  visibility: visible;
}

.menuBox ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  width: 100%;
  max-width: calc(100% - 260px);
}
.menuBox ul li {
  margin: 0;
  padding: 14px 0;
  border-bottom: 3px solid var(--cyanColor);
  opacity: 0;
}
.menuBox ul li a {
  text-decoration: none;
  color: var(--seaBlueColor);
  text-transform: uppercase;
  font-size: 4.2vw;
  line-height: 4.2vw;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 600;
  font-style: normal;
  display: block;
  position: relative;

overflow: hidden;
background: linear-gradient(to bottom, #ffffff, #ffffff 50%, var(--seaBlueColor) 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
background-position:0 100% ;
transition: background-position 800ms ease;
text-decoration: none;
}
.menuBox ul li.current-menu-item a,
body.no-device .menuBox ul li a:hover {
  color: #ffffff;
  background-position: 100% 0;
}

body.open-menu .menuBox ul li{
-webkit-animation:showMenu 0.3s ease-in-out forwards;
-moz-animation:showMenu 0.3s ease-in-out forwards;
-ms-animation:showMenu 0.3s ease-in-out forwards;
animation:showMenu 0.3s ease-in-out forwards;
}

@keyframes showMenu {
0%{opacity:0; visibility:hidden;
-webkit-transform: translate3d(0, 60px, 0);
transform: translate3d(0, 60px, 0);}
100%{opacity:1; visibility:visible;
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);}
}
@-webkit-keyframes showMenu {
0%{opacity:0; visibility:hidden;
-webkit-transform: translate3d(0, 60px, 0);
transform: translate3d(0, 60px, 0);}
100%{opacity:1; visibility:visible;
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);}
}
body.open-menu .menuBox ul li:first-child{animation-delay:0.50s;}
body.open-menu .menuBox ul li:nth-child(2){animation-delay:0.60s;}
body.open-menu .menuBox ul li:nth-child(3){animation-delay:0.70s;}
body.open-menu .menuBox ul li:nth-child(4){animation-delay:0.80s;}
body.open-menu .menuBox ul li:nth-child(5){animation-delay:0.90s;}
body.open-menu .menuBox ul li:nth-child(6){animation-delay:1s;}

@media screen and (min-width: 0px) and (max-width: 1800px) {
  .menuBox {background-position: right 40px bottom 12%;}
}

@media screen and (min-width: 0px) and (max-width: 900px) {
  .menuBox ul{max-width:100%;}
  .menuBox ul li a{font-size:48px; line-height:56px;}
  .res-nav-link{top:0;}

  .hamburger, .hamburger-box{width:42px; height:34px;}
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
    width:42px;
    height:2px;
  }
  .hamburger--slider .hamburger-inner{top:4px;}
  .hamburger--slider .hamburger-inner::after{top:28px;}
  .hamburger--slider .hamburger-inner::before{top:14px;}
  .hamburger--slider.is-active .hamburger-inner{top:8px;}
}

@media screen and (min-width: 0px) and (max-width: 767px) {
  .menuBox {
    padding-left: 28px;
    padding-right: 28px;
  }
  .menuBox .content_1840 {
    padding-left: 0;
    padding-right: 0;
  }
  .menuBox ul li a {
    font-size: 48px;
    line-height: 56px;
  }
}

@media screen and (min-width: 0px) and (max-width: 640px) {
  .menuBox ul li a {
    font-size: 38px;
    line-height: 46px;
  }
}

@media screen and (min-width: 0px) and (max-width: 610px) {
  /* .res-nav-link {top:-4px;} */
  .hamburger, .hamburger-box{width:36px; height:26px;}
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
    width:36px;
    height:2px;
  }
  .hamburger--slider .hamburger-inner{top:2px;}
  .hamburger--slider .hamburger-inner::after{top:24px;}
  .hamburger--slider .hamburger-inner::before{top:12px;}
  .hamburger--slider.is-active .hamburger-inner{top:4px;}
}

@media screen and (min-width: 0px) and (max-width: 550px) {
  .menuBox ul li {
    padding: 10px 0;
  }
  .menuBox ul li a {
    font-size: 30px;
    line-height: 38px;
  }
}

@media screen and (min-width: 0px) and (max-width: 375px) {
  .menuBox ul li a {
    font-size: 24px;
    line-height: 32px;
  }
}