/* Quinn */
@font-face {
  font-family: 'Quinn';
  src: url(../fonts/Quinn/Regular.otf);
}
@font-face {
  font-family: 'QuinnSemiBold';
  src: url(../fonts/Quinn/SemiBold.otf);
}

/* Raleway */
@font-face {
  font-family: 'RalewayThin';
  src: url(../fonts/Raleway/Thin.ttf);
}
@font-face {
  font-family: 'RalewayLight';
  src: url(../fonts/Raleway/Light.ttf);
}
@font-face {
  font-family: 'Raleway';
  src: url(../fonts/Raleway/Regular.ttf);
}
@font-face {
  font-family: 'RalewayMedium';
  src: url(../fonts/Raleway/Medium.ttf);
}
@font-face {
  font-family: 'RalewaySemiBold';
  src: url(../fonts/Raleway/SemiBold.ttf);
}
@font-face {
  font-family: 'RalewayBold';
  src: url(../fonts/Raleway/Bold.ttf);
}
@font-face {
  font-family: 'RalewayHeavy';
  src: url(../fonts/Raleway/Heavy.ttf);
}
@font-face {
  font-family: 'RalewayBlack';
  src: url(../fonts/Raleway/Black.ttf);
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

body {
  color: #122744;
}

*::selection{
  /*background: #007B7F;*/ /*it's also used in other file, search for /*nagako-accent/; */
  /*color: #fff;*/
}


header{
  font-family: 'Quinn';
  position: fixed;
  width: 100vw;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid #E9DDCE77;
}


header .header-bg {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #18052b;
  transition: all 2s ease;
  z-index: 20;
}

header.scrolled .header-bg{
  transition: all 0.5s ease;
  opacity: 1 !important;
}

header:has(.menu-wrapper.active) .header-bg{
  transition: all 0.5s ease;
  opacity: 1 !important;
}

header .header-wraper{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  padding: 0.5rem 2rem;
  /* max-width: 1200px; */
  height: 7rem;
  overflow: hidden;
  transition: all 1s ease;
  position: relative;
  z-index: 30;
}

header.scrolled .header-wraper{
  height: 5rem;
}

header .header-wraper .custom-logo-link{
  height: 4.5rem;
  width: 4.5rem;
  display: block;
  position: relative;
  transition: all 1s ease;
  top: 0;
}

header.scrolled .header-wraper .custom-logo-link{
  height: 3.5rem;
  width: 3.5rem;
}

/* ---------------- menu --------------- */

header > .menu-wrapper{
  position: absolute;
  top: -200vh;
  left: 0;
  width: 100%;
  height: calc(100vh - 7rem);
  z-index: 10;
}

header.scrolled > .menu-wrapper{
  height: calc(100vh - 5rem);
}

@supports (height: 100dvh) {
  header > .menu-wrapper{
    height: calc(100dvh - 7rem);
  }

  header.scrolled > .menu-wrapper{
    height: calc(100dvh - 5rem);
  }
}

header > .menu-wrapper.active{
  top: 100%;
}


header > .menu-wrapper .menu{  
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

header > .menu-wrapper .menu > li{
  min-height: 25%;
  font-size: clamp(2rem,4vw,4rem);
  display: flex;
  align-items: center;
  padding-left: 20%;
  padding-right: 5%;
  font-family: quinn;
  border-bottom: solid #E9DDCE 1px;
}
header > .menu-wrapper .menu > li:hover{
  border-bottom: solid #18052B 4px;
  background: #e9ddce50;
}

header > .menu-wrapper .menu > li > a{
  position: relative;
  flex-grow: 1;
}

header > .menu-wrapper .menu > li > a > span{
  position: absolute;
  font-size: clamp(1rem, 1vw, 1.5rem);
  top: clamp(0.5rem, 1.1vw, 1.1rem);
  left: max(-15%, -5rem);
}

/*  ---------------------------------- */

header .header-wraper .button-group{
  display: flex;
  gap: 2rem;
}

header .header-wraper button{
  display: block;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  overflow: hidden;
}
header .header-wraper button .line-1,
header .header-wraper button .line-2,
header .header-wraper button .line-3{
  transition: all 1s ease-in-out;
}

header .header-wraper button .line-1{
  width: 3rem;
  height: 1px;
  position: absolute;
  top: 0%;
  left: -0.75rem; 
  transform-origin: 0.75rem 0;
  background-color: #E9DDCE;
}

header .header-wraper button .line-2{
  width: 3rem;
  height: 1px;
  position: absolute;
  top: 50%;
  left: -0.75rem; 
  background-color: #E9DDCE;
}

header .header-wraper button .line-3{
  width: 3rem;
  height: 1px;
  position: absolute;
  bottom: 0%;
  left: -0.75rem; 
  transform-origin: 0.75rem 0;
  background-color: #E9DDCE;
}


header:has(.menu-wrapper.active) .header-wraper button .line-1{
  rotate: 45deg;
}

header:has(.menu-wrapper.active) .header-wraper button .line-2{
  opacity: 0;
}

header:has(.menu-wrapper.active) .header-wraper button .line-3{
  rotate: -45deg;
}

header.scrolled .header-wraper button{
  color: black;
}


/* google recaptcha badge */
.grecaptcha-badge{
  z-index: 9999;
  opacity: 0.3;
  transition: opacity 0.5s;
}
.grecaptcha-badge:hover{
  opacity: 1;
}