@import url("https://use.typekit.net/lsq0flq.css");
@font-face {
   font-family: "Belluga";
   src: url('../webFonts/Belluga/font.woff2') format('woff2'),
   url('../webFonts/Belluga/font.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

:root {
   --darkturquoise: #006D82;
   --mediumzurquoise: #62BB95;
   font-size: 16px;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   scroll-behavior: smooth;
}

body {
   width: 100vw;
   font-size: 16px;
}

.navbar {
   top: 0;
   width: 100vw;
   height: 7vh;
   position: fixed;
   transition: all 0.3s ease;
   z-index: 1001;
   background-color: transparent;
}

.navlogo img {
   width: 180px;
   height: auto;
   margin-top: 35px;
}

.navlogo h4 {
   text-indent: -99999px;
}

nav .nav-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-style: normal;
   z-index: 1000;
   width: 80vw;
   margin: auto;
}

.nav-links {
   position: absolute;
   right: 0;
   height: 100vh;
   top: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background: rgba(98, 187, 149, 1);
   width: 100%;
   transform: translateX(100%);
   transition: transform 0.3s ease-in;
}


.nav-links li {
   list-style: none;
}

.nav-links li a {
   color: rgb(13, 129, 151);
   text-decoration: none;
   letter-spacing: 2px;
   font-size: 64px;
   font-family: "myriad-variable", sans-serif;
   font-variation-settings: "wdth" 70, "wght" 500;
   font-weight: 600;
   line-height: 56px;
   transition: all 0.5s ease;
   text-transform: uppercase;
}

.nav-links li a:hover {
   color: aquamarine;
}

.icons {
   display: flex;
}

.burger {
   display: block;
   cursor: pointer;
}

.burger div {
   width: 25px;
   height: 2px;
   background-color: rgb(236, 236, 236);
   margin: 5px 5px 5px 1.5rem;
   transition: all 0.3s ease;
}

.burger div.black {
   background-color: #111;
}

.search {
   color: #fff;
   font-size: 22px;
   margin-left: 1rem;
}

.search.black {
   color: #111;
}

/* ----- Content ----- */

.container.onTop {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   margin-top: -8vh;
}

.container {
   position: relative
}

.container-text {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      width: 100vw;
      height: 100vh;
      background: rgb(0, 109, 129);
      background: -moz-linear-gradient(45deg, rgb(13, 129, 151) 0%, rgba(0, 109, 129) 18%, rgba(98, 187, 149, 1) 55%, rgb(98, 187, 149, 1) 70%);
      background: -webkit-linear-gradient(45deg, rgb(13, 129, 151) 0%, rgba(0, 109, 129) 18%, rgba(98, 187, 149, 1) 55%, rgb(98, 187, 149, 1) 70%);
      background: linear-gradient(45deg, rgb(13, 129, 151) 0%, rgba(0, 109, 129) 18%, rgba(98, 187, 149, 1) 55%, rgb(98, 187, 149, 1) 70%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#02205b",endColorstr="#000612",GradientType=1);
      background-size: 200% 200%;
      animation: change 10s ease-in-out infinite;
}

h1 {
   font-family: "Belluga", sans-serif;
   font-weight: 400;
   font-size: 32vw;
   background: linear-gradient(45deg, rgb(13, 129, 151) 0%, rgba(0, 109, 129) 40%, rgba(98, 187, 149, 1) 80%, rgb(98, 187, 149, 1) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-align: center;
   animation: change 10s ease-in-out infinite;
   letter-spacing: -2px;
   overflow: hidden;
}

h2 {
   font-family: "myriad-variable", sans-serif;
   font-variation-settings: "wdth" 70, "wght" 500;
   position: absolute;
   text-align: left;
   color: #fff;
   top: 50%;
   right: 10%;
   transform: translateY(-50%);
   text-transform: uppercase;
   letter-spacing: -1px;
   font-size: 6rem;
   line-height: 5.35rem;
   font-weight: 600;
}

.wide {
   font-variation-settings: "wdth" 110, "wght" 900;
}

.nav-active {
   transform: translateX(0%);
}

@keyframes navLinkFade {
   from {
      opacity: 0;
      transform: translateX(50px);
   }
   to {
      opacity: 1;
      transform: translateX(0px);
   }
}

.toggle .line1 {
   transform: rotate(-45deg) translate(-4px, 6px);
}

.toggle .line2 {
   opacity: 0;
}

.toggle .line3 {
   transform: rotate(45deg) translate(-4px, -6px);
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {

   h2 {
      font-size: 4rem;
      line-height: 3.5rem;
   }

   .nav-links li a {
      font-size: 4rem;
      line-height: 3.5rem;
   }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {

   h2 {
      font-size: 3rem;
      line-height: 2.5rem;
   }

   .nav-links li a {
      font-size: 3rem;
      line-height: 2.75rem;
   }
}

@media screen and (min-width: 481px) and (max-width: 768px) {

   h2 {
      font-size: 2rem;
      line-height: 1.5rem;
   }

   .nav-links li a {
      font-size: 2rem;
      line-height: 1.75rem;
   }
}

@media screen and (max-width: 480px) {

  h1 {
     position: absolute;
     top: 0;
     left: 0;
     transform: rotate(-90deg);
     font-size: 12rem;
     margin-left: -30%;
     margin-top: 250px;

  }

   h2 {
      font-size: 2rem;
      line-height: 1.5rem;
   }

   .nav-links li a {
      font-size: 2rem;
      line-height: 1.75rem;
   }

}