/* Fonts */
@font-face {
  font-family: 'Oswald';
  src: url('../assets/fonts/Oswald-VariableFont_wght.ttf');
}
@font-face {
  font-family: 'Roboto';
  src: url('../assets/fonts/Roboto-VariableFont_wdth\,wght.ttf');
}

/* General CSS */
:root{
    --primary: #131c31;
    --secondary: #f9efd2;
    --tertiary:#f5d163;
    --accent: #ef4c4e;

    --header1: Roboto, sans-serif;
    --paragraph: Roboto, sans-serif;
}
::selection {
  color: #000;
  background: #fff;
}
body{
  background-color: var(--primary);
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--primary);
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
}
#preloader:before,
#preloader:after {
  margin:auto;
  width:200px;
  height:200px;
  content: '';
  border-radius: 50%;
  position: absolute;
  inset: 0;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
}
#preloader:after {
  box-shadow: 0 2px 0 var(--accent) inset;
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  0% {  transform: rotate(0)}
  100% { transform: rotate(360deg)}
}

/* Header */
.header{
    background-color:var(--primary);
    padding:1.8vw 4vw;

    position: fixed;
    width:100%;
    top:0;
    z-index: 10;
    -webkit-transition: padding 0.2s ease-in-out;
    transition: padding 0.2s ease-in-out;
}
.header-shrink{
  padding:1vw 4vw;
}

/* Navbar */
.navbar{
  width:100%;
}
.navbar .logo{
  width:180px;
  margin-right:20px;
}
.nav-link{
  text-align: center;
  color:var(--secondary);
  font-family: var(--header1);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1.5px;
  font-size: 14px;
}
.nav-link:hover{
  color:var(--accent);
}
.nav-link.active{
  color:var(--accent) !important;
}
.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}
.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.nav-underline .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
  color: #6c757d;
}
.nav-underline .nav-link:hover {
  color: #007bff;
}
.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}
.navbar-toggler{
  z-index: 99;
}
.dropdown-menu{
  border-radius: 0;
  background-color: var(--primary);
  border:1px #000 solid;
  padding:20px 0;

  transform-origin: top;
  transition-duration:1s;
  animation:fold-up 0.2s ease-in-out;
}
.dropdown-menu.show{
  animation:fold-down 0.2s ease-in-out;
}
.dropdown-item{
  color:var(--secondary);
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1.5px;
}
.dropdown-item:hover{
  color:var(--accent);
  background-color:var(--secondary);
}
/* Hero */
.hero{
  background-color: #c0c0c0;
  /* background-image: url('https://images.pexels.com/photos/19786212/pexels-photo-19786212.jpeg'); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  height:90vh;

  position: relative;
}
.hero p{
  margin:0;
}
.hero-container{
  height:100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 100px;
}
.hero-grain-bg{
  filter:opacity(0.2);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  width:100%;
  height:100%;
  position: absolute;
  left:0;
}
.dots-overlay{
  background-image: url('../assets/img/dots.webp');
  width:100%;
  height:8%;
  position: absolute;
  left:0;
  bottom:0;
  opacity: 0.8;
}

/* Sections Containers */
.section{
  padding:60px 0;
}
.section-light{
  background-color: var(--secondary);
}
.section-light .section-title > h1{
  color: var(--primary);
  font-family: Roboto;
  text-align: center;
}
.section-title > .highlighted-light{
  background-color: var(--tertiary);
  text-transform: uppercase;
  padding:0;
  display: inline;
  line-height:40px;
  word-wrap:break-word;
  font-weight: 700;
  font-size: 1.6rem;
}
.section-title > .highlighted-dark{
  background-color: var(--accent);
  text-transform: uppercase;
  padding:0;
  display: inline;
  line-height:40px;
  word-wrap:break-word;
  font-weight: 700;
  font-size: 1.6rem;
}
.section-dark{
  background-color: var(--primary);
}
.section-dark .section-title > h1{
  color: #fff;
}
.section-title{
  width:50%;
  margin: 0 auto;
}
.section-title > h1{
  padding:40px 0;
  font-weight: 600;
}
.space-bg{
  z-index: 0;
  position: relative;
  overflow: hidden;
}

/* Buttons */
.button-light{
  background-color: var(--accent);
  font-family: var(--header1);
  color:#fff;
  text-transform: uppercase;
  border:none;
  padding:10px 20px;
  width:140px;
  text-align: center;
  margin:18px;
  font-weight: 700;
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}
.button-light:hover{
  opacity: 0.9;
  color:#fff;
  background-color: #a32b2d;
}

/* Content */
.parallax-space{
  position: absolute;
  top:0;
  left:0;

  width:100%;
  height:100%;
  background-image: url('../assets/img/space.svg');
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

  z-index: -1;
}
/*ADD TO COMPONENTS*/
.rocket-container{
  position: relative;
  padding-top:50px;
}
.rocket-container hr{
  height: 2px;
  color: #0eaaaf;
  background: #0eaaaf;;
}
.rocket{
  width:100px;
  transform: rotate(45deg);
  position: absolute;
  top:24%;
}
.menu{
  position: relative;
  width:80%;
  margin: 0 auto;
  background-color: var(--secondary);
  border:1px solid var(--primary);
  box-shadow: 6px 6px 0px 0px var(--primary);
  padding:40px 40px;
  margin-top:80px;
}
.menu h1{
  color: var(--secondary);
  text-shadow: -1px -1px 0 var(--accent), 1px -1px 0 var(--accent), -1px 1px 0 var(--accent), 2px 2px 0 var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.menu h3{
  color:rgb(14, 170, 175);;
  text-transform: uppercase;
  font-size:0.9rem;
  letter-spacing: 1.5px;
  font-family: var(--header1);
  font-weight: 900;
}
.menu-item{
  padding:10px 10px;
  position: relative;
}
.menu-item h2{
  color:#000;
  text-transform: uppercase;
  font-style: italic;
  font-size:1.3rem;
  font-family: var(--header1);
  font-weight: 900;
}
.menu-item p{
  color:#000;
  font-family: var(--header1);
  font-weight: 400;
}
.menu-special{
  padding:20px 10px;
  border:2px solid rgb(14, 170, 175);
}
.menu-special i{
  color:var(--accent);
  font-size: 40px;
  background-color: var(--secondary);

  position: absolute;
  top:22%;
  left:95%;

  animation: float 5s ease-in-out infinite;
}

/* About Us */
.about{
  padding:60px 0;
}
.about p{
  font-family: var(--paragraph);
  color:#fff;
  font-weight: 400;
  text-align: left;
}
/* Carousel */
.carousel {
  background: var(--primary);
}
.carousel img {
  display: block;
  height: 200px;
}
@media screen and ( min-width: 768px ) {
  .carousel img {
    height: 400px;
  }
}

/*Location*/
.location img{
  width:100%;
  border:var(--primary) 1px solid;
  box-shadow: 6px 6px var(--primary);
}
.location .button-light{
  margin:0 !important;
}
.location-info{
  text-align: left;
  margin:30px 0;
}
.location-info p{
  padding:0;
  margin:0;
  font-family: var(--paragraph);
  font-weight:500;
}
.location-info strong{
  color:var(--accent)
}

/* Footer */
.footer{
  color:#fff;
  background-color: var(--primary);
  padding:20px 0;
}
.footer hr{
  margin:auto;
  width:60%;
  border-top: 2px solid #fff;
  height: 2px; /* Sets the thickness of the line */
}
.footer i{
  font-size: 24px;
}
.footer-top a{
  color:#fff;
  text-decoration: none;
  padding:0 5px;
}
.footer-top a:hover{
  color:var(--accent);
}
.footer-top, .copyright{
  padding:20px 0;
}
.footer-top{
  display: flex;
  justify-content: center;
  justify-content: space-around;
}
.terms{
  display: flex;
  align-items: center;
}
.copyright h1{
  font-size: 14px;
  margin:0;
}
/* Mobile */

/* X-Small devices (portrait phones, less than 576px)*/
/* No media query for `xs` since this is the default in Bootstrap*/
/* MIN WIDTH IS FOR MOBILE FIRST, MAX WIDTH IS FOR DESKTOP */
/*MAX Must be 1 pixel lower than MIN from bootstrap docs*/

/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 575px) {  }

/* // Medium devices (tablets, 768px and up) */
@media (max-width: 767px) {
  .section-title{
    width:100%;
  }
  .menu{
    width:100%;
  }

  .about p{
    text-align: center;
  }
  .location .section-title{
    width:50%;
  }
  .location .button-light{
    margin:20px;
  }
  .location-info{
    text-align: center;
  }
}

/* // Large devices (desktops, 992px and up) */
@media (max-width: 991px) {
  .navbar-nav{
    margin-top:50%;
  }
  .dropdown-item{
    text-align: center;
  }
  .offcanvas-collapse {
    position: fixed;
    top: 0; /* Height of navbar */
    bottom: 0;

    right:0;

    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: var(--primary);

    transform-origin: top;
    transform: translateY(-100%);
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
  }
  .offcanvas-collapse.open {
    visibility: visible;
    /*Top*/
    transform: translateY(0);
  }
}

/* // X-Large devices (large desktops, 1200px and up) */
@media (max-width: 1199px) {  }

/* // XX-Large devices (larger desktops, 1400px and up) */

@media (max-width: 1399px) {  }

/*Animations */

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes fold-down {
  from {
    transform: scaleY(0);
    opacity:0;
  }
  to {
    transform: scaleY(1);
    opacity:1;
  }
}
@keyframes fold-up {
  from {
    display: block;
    transform: scaleY(1);
    opacity:1;
  }
  to {
    display:none;
    transform: scaleY(0);
    opacity: 0;
  }
}