body {
  height: 100vh;
}

@font-face {
  font-family: Alata;
  src: url(fonts/Alata/Alata-Regular.ttf);
}

@font-face {
  font-family: Josefin_Sans;
  src: url(fonts/Josefin_Sans/JosefinSans-VariableFont_wght.ttf);
}

.hero-section {
  background-image: url(images/desktop/image-hero.jpg);
  height: 80vh;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 2% 10%;
  display: flex;
  flex-direction: column;
  gap: 30%;
}

/*Navigation Container*/
.nav-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  box-sizing: border-box;
}
.nav-box__title {
  width: 30%;
  color: white;
  font-size: 2.188rem;
  letter-spacing: 3px;
}
.nav-box__links {
  width: 40%;
  display: flex;
  align-items: center;
}
.nav-box ul {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0px;
}
.nav-box li,
.nav-box a {
  text-decoration: none;
  list-style: none;
  color: white;
  letter-spacing: 1.1px;
}

.hero-section__content {
  min-height: 40%;
  width: 53%;
  color: white;
  font-size: 3.125rem;
  box-sizing: border-box;
  letter-spacing: 5px;
  padding: 3%;
  display: flex;
  align-items: center;
  border: 2px solid white;
}

/*General Font for Titles*/
.Josefin_Sans-font {
  font-family: Josefin_Sans;
  font-weight: 200;
}
.hover {
  position: relative;
  display: inline-block;  /* Make sure the element behaves as a block-level element for positioning */
  padding-bottom: 10px;
  padding-top: 10px;
  box-sizing: border-box;

}

.hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  width: 0;  /* Initial length of the border */
  height: 2px;  /* Height of the border */
  background-color: white;  /* Color of the border */
  transition: width 0.3s ease;  /* Animate the width change */
}

.hover:hover::after {
  width: 80%;  /* Full width of the element on hover */

}
/* Interactive Leader Section*/
.interactive-leader {
  height: 80vh;
  padding: 30% 10%;
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
}
.interactive-image-container {
  width: 100%;
  position: relative;
}
.interactive-image {
  width: 70%;
  height: 100%;
}
.interactive-leader__overlay-box {
  width: 44%;
  height: 70%;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  z-index: 2000;
  bottom: 0%;
  right: 0%;
  box-sizing: border-box;

  padding-top: 5%;
  padding-left: 5%;
}
.overlay-box__title {
  color: black;
  font-size: 40px;
  letter-spacing: 1.9px;
  font-weight: 300;
  line-height: 120%;
}

.overlay-box__paragraph {
  line-height: 200%;
  color: #7e7e7ed0;
}

/*Our Creation Sction*/
.creation-section {
  min-height: 100vh;
  padding: 0px 10%;
  margin-bottom: 13%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.creations-section-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10%;
}

.creation-section__title {
  font-size: 2.5rem;
}

.creation-section__see-all-button {
  width: 15%;
  height: 40%;
  background-color: white;
  border: 1.4px solid black;
  letter-spacing: 3px;
}

.creation-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: 90%;
  gap: 2%;
  flex-grow: 1; /* This allows the grid to grow based on the content */
}

.show-media-icons {
display: none;
justify-content: space-between;
width: 20%;
height: 15%;
align-items: center;

}
/*Individual grid items*/
.deep-earth-grid {
  background-image: url(images/desktop/image-deep-earth.jpg);
  background-size: cover;
}
.night-arcade-grid {
  background-image: url(images/desktop/image-night-arcade.jpg);
  background-size: cover;
}

.soccer-team-vr-grid {
  background-image: url(images/desktop/image-soccer-team.jpg);
  background-size: cover;
}

.the-car-grid {
  background-image: url(images/desktop/image-grid.jpg);
  background-size: cover;
}

.from-up-above-vr-grid {
  background-image: url(images/desktop/image-from-above.jpg);
  background-size: cover;
}

.pocket-borealis-grid {
  background-image: url(images/desktop/image-pocket-borealis.jpg);
  background-size: cover;
}

.the-curiosity-grid {
  background-image: url(images/desktop/image-curiosity.jpg);
  background-size: cover;
}

.make-it-fisheye-grid {
  background-image: url(images/desktop/image-fisheye.jpg);
  background-size: cover;
}

.grid-general {
  font-size: 1.875rem;
  box-sizing: border-box;
  padding: 7% 10%;

  display: flex;
  flex-direction: column;
  justify-content: end;
  color: white;
}

.footer-section {
  padding: 0px 10%;
  color: white;
  width: 100%;
  height: 20%;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer-section__top-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1.9%;
}

.top-row__social-media-icons {
  display: flex;
  justify-content: space-between;
  width: 20%;
  height: 15%;
  align-items: center;
}

.top-row__footer-title {
  font-size: 1.563rem;
}

.footer-section__bottom-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.footer-section-links {
  width: 40%;
  display: flex;
}
.footer-section-links ul {
  display: flex;
  width: 100%;
  padding: 0px;
  justify-content: space-between;
}

.footer-section li,
.footer-section a {
  text-decoration: none;
  list-style: none;
  color: white;
  letter-spacing: 1.1px;
}

@media screen and (max-width: 1000px) {
  .hero-section {
    padding: 2% 3%;
  }
}

@media screen and (max-width: 856px) {
  /*Hero Section responsiveness*/
  .nav-box__links {
    display: none;
  }
  .nav-box::after {
    content: url(images/icon-hamburger.svg);
    display: flex;
    align-items: center;
  }
  .nav-box__title {
    width: 50%;
    font-size: 2rem;
  }
  .hero-section__content {
    width: 100%;
  }

  /*Interactive Leader Section responsiveness*/
  .interactive-leader {
    height: 80vh;
    padding: 6% 3%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    justify-content: space-around;
    align-items: center;
  }
  .interactive-image-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .interactive-leader__overlay-box {
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: center;
    position: relative;
  }
  .interactive-image {
    height: 50%;
    margin: 0 auto;
  }
  .overlay-box__title {
    width: 100%;
  }

  .overlay-box__paragraph {
    width: 100%;
  }
  /*Creation Grid*/
  .creation-section {
    min-height: 100vh;
    padding: 2% 3%;
    margin-bottom: 0%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .creation-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(120px, auto);
    height: 90%;
  }
  .grid-text {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: center;
    flex-wrap: wrap;
    width: 40%;
    padding: 2%;
  }

  .grid-general {
    font-size: 1.875rem;
    box-sizing: border-box;
    padding: 0% 4%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    color: white;
    height: 100%;
  }
  /*Individual grid items*/
  .deep-earth-grid {
    background-image: url(images/mobile/image-deep-earth.jpg);
    background-size: cover;
    height: 120px;
  }

  .night-arcade-grid {
    background-image: url(images/mobile/image-night-arcade.jpg);
    background-size: cover;
    height: 120px;
  }

  .soccer-team-vr-grid {
    background-image: url(images/mobile/image-soccer-team.jpg);
    background-size: cover;
  }

  .the-car-grid {
    background-image: url(images/mobile/image-grid.jpg);
    background-size: cover;
  }

  .from-up-above-vr-grid {
    background-image: url(images/mobile/image-from-above.jpg);
    background-size: cover;
  }

  .pocket-borealis-grid {
    background-image: url(images/mobile/image-pocket-borealis.jpg);
    background-size: cover;
  }

  .the-curiosity-grid {
    background-image: url(images/mobile/image-curiosity.jpg);
    background-size: cover;
  }

  .make-it-fisheye-grid {
    background-image: url(images/mobile/image-fisheye.jpg);
    background-size: cover;
  }

  .creation-section__see-all-button {
    display: none;
  }
  .creation-grid::after {
    content: "SEE ALL";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15%;
    height: 40%;
    background-color: white;
    border: 1.4px solid black;
    letter-spacing: 3px;
    margin: 0 auto;
    width: 40%;
  }
  .footer-section-links {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .footer-section-links ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0px;
    justify-content: center;
  }
  .footer-section__top-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1.9%;
  }

  .top-row__social-media-icons {
    display: none;
    justify-content: space-between;
    width: 20%;
    height: 15%;
    align-items: center;
  }

  .footer-section {
    margin-top: 30%;
    padding: 0px 10%;
    color: white;
    width: 100%;
    height: 60vh;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .footer-section__top-row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 5%;
    margin-bottom: 1.9%;
  }
  .footer-section__bottom-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .footer-section li,
  .footer-section a {
    text-decoration: none;
    list-style: none;
    color: white;
    letter-spacing: 1.1px;
    text-align: center;
    line-height: 50px;
  }
  .show-media-icons {
    
    margin-top: 5%;
    display: flex;

    width: 30%;
  }
  .copyright-info {
    margin-top: 4%;
    color: grey;
  }
}