:root {
   --blue-branding: #1892a4;
   --blue-light-branding: #1b9db1;
   --dark-blue: #344055;
   --white: #f7f6f3;
   --black: #161616;
   --dark-black: #0f0f0f;
   --red: #c61238;
 }

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

body{
   background-color: var(--black);
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
}

body.nav-open{
   height: 100vh;
   overflow-y: hidden;
   display: block;
   touch-action: none;
   -ms-touch-action: none;
}

button:focus{
   outline:none;
}
button::-moz-focus-inner {
   border: 0;
}

p, h1, h2, h3, h4, h5, h6{
   color: var(--white);
}

p{
   font-family: manrope_light;
}

h1{
   font-family: manrope_xbold;
}

h2{
   font-family: manrope_semibold;
}

h3{
   font-family: manrope_semibold;
}

a[href^=tel] {
    color: inherit;
}

header{
   width: 100%;
}

header .container{
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}

.banner{
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--dark-black);
}

.banner p{
   margin: 10px 1vw 10px 1vw;
   text-align: center;
}

.banner_btn{
   margin-left: 1vw;
   margin-right: 1vw;
   padding: 5px 30px 5px 20px;
   background-color: var(--blue-branding);
   border-radius: 4px;
   transition: background-color 0.2s;
}

.banner_btn:hover{
   background-color: var(--dark-blue);
}

.link{
   text-decoration: none;
   font-family: manrope_reg;
   color: var(--white);
}

.logo img{
   width: 100%;
}

.logo{
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 50vw;
  z-index: 98;
}

.logo h1{
   white-space: nowrap;
   font-size: 6vw;
}

.content-container{
   margin: 0;
   flex: 1;
}

.logo-container{
     width: 50%;
  }

.page-title h1{
    text-align: center;
    font-size: 60px;
}

.btn-rounded{
   display: inline-block;
   background-color: var(--blue-branding);
   padding: 10px 20px 10px 20px;
   transition: 0.4s;
   border-radius: 5px;
   text-align: center;
}

.btn-rounded:hover{
    background-color: var(--dark-blue);
    cursor: pointer;
}

.symbol:hover svg{
  fill: var(--dark-blue);
  cursor: pointer;
}

.symbol svg{
   fill: var(--blue-branding);
   transition: 0.5s;
}

.social-symbols{
   margin-left: auto;
   margin-right: auto;
   margin-top: 20px;
   margin-bottom: 20px;
   display: flex;
   justify-content: space-around;
   align-items: center;
}

footer{
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   margin-top: 5vh;
}

footer .container{
   width: 100%;
   height: min-content;
}

.footer-text{
   text-align: center;
   margin-bottom: 3vh;
}

 .header-link:hover{
      color: var(--blue-branding);
   }

.header-link{
   transition-duration: 0.3s;
}

.social-symbols{
      width: 40%;
   }

@media screen and (max-width:600px){
   .hamburger{
      z-index: 99;
   }

   /* Re-adjust banner */

   .banner{
      flex-direction: column;
   }

   .banner_btn{
      margin: 0 0 10px 0;
   }

   .banner p{
      margin: 10px 0 10px 0;
      width: 95%;
   }

   /* nav animation */

   .navigation {   
      display: none;
      height: 100%;
      width: 100%;
      position: fixed; /* Stay in place */
      z-index: 97; /* Sit on top */
      left: 0;
      top: 0;
      background-color: #1a1a1a;
      overflow-x: hidden; /* Disable horizontal scroll */
      -webkit-transform: translate3d(0,0,0);
      -moz-transform: translate3d(0,0,0);
      -ms-transform: translate3d(0,0,0);
      -o-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
   }

   .nav-inactive{
      display: flex;
      align-items: center;
      justify-content: center;
      animation-name: navInactive;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
      touch-action: none;
      -ms-touch-action: none;
   }

   .nav-active{
      display: flex;
      align-items: center;
      justify-content: center;
      animation-name: navActive;
      animation-duration: 0.5s;
      touch-action: none;
      -ms-touch-action: none;
   }

   .nav-link-inactive{
      animation-name: navLinkInactive;
      animation-duration: 0.5s;
      transition: visibility 0s linear;
   }

   .navigation nav{
      display: flex;
      flex-direction: column;
      text-align: center;
   }

   .navigation nav a{
      opacity: 0;
      margin: 1vh 0 1vh 0;
      font-size: 3vh;
   }

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

   @keyframes navLinkInactive{
      0%{
         opacity: 1;
      }
      100%{
         opacity: 0;
      }
   }

   @keyframes navInactive{
      0%{
         opacity: 1;
      }
      99%{
         opacity: 0;
      }
      100%{
         transform: translateX(-100%);
         visibility: hidden;
      }
   }

   @keyframes navActive{
      0%{
         opacity: 0;
         transform: translateX(-100%);
      }
      100%{
         opacity: 1;
         transform: translateX(0);
      }
   }
}

@media screen and (min-width:1000px){
   .symbol{
      width: 40px;
   }
}

@media screen and (max-width:1000px){
   .symbol{
      width: 35px;
   }
}

@media screen and (max-width:700px){
   .symbol{
      width: 35px;
   }

   .social-symbols{
      width: 90%;
   }

}

@media screen and (min-width:600px){
   
   .logo{
      width: 20%;
   }

   .logo h1{
      font-size: 2.5vw;
   }

   .navigation{
      display: block;
      margin-right: 1vw;
      height: auto;
      width: auto;
      position: static;
      z-index: 97;
      background-color: none;
      overflow-x: auto;
   }

   .header-nav{
      flex-direction: row;
   }

   .header-link{
      opacity: 1;
      margin: 0 1vw 0 1vw;
   }

  

   .hamburger{
      display: none;
   }
}

@font-face {
  font-family: manrope_xbold;
  src: url("../../assets/fonts/manrope/Manrope-ExtraBold.47e356f61dca.ttf")
}

@font-face {
  font-family: manrope_semibold;
  src: url("../../assets/fonts/manrope/Manrope-SemiBold.255d425d0966.ttf")
}

@font-face {
  font-family: manrope_light;
  src: url("../../assets/fonts/manrope/Manrope-ExtraLight.a4b068ee8a8b.ttf")
}

@font-face {
  font-family: manrope_reg;
  src: url("../../assets/fonts/manrope/Manrope-Regular.0b726174d2b7.ttf")
}