/* Homepage */
header {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 10;
}

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

@media (max-width: 992px) {
   header nav ul {
      background-color: #333333;
      border-radius: 2%;
   }

   .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
   }

   .navbar-toggler {
      border-color: rgba(255, 255, 255, 0.5);
   }
}

.navbar-custom {
   --bs-navbar-color: #ffffff;
   --bs-navbar-hover-color: #71a4bf;
   --bs-navbar-active-color: #333333;
}

.hero {
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/hero-background.avif');
   background-size: cover;
   background-position: center;

   color: #ffffff;
   padding: 8rem 0;
   text-align: center;
   min-height: 110vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-top: 250px;
}

.hero-content {
   max-width: 1100px;
}

.hero h1 {
   font-size: 3.2rem;
   font-weight: 100;
   margin-bottom: 1rem;
   font-family: soho-w01-thin-condensed, soho-w02-thin-condensed, serif;
}

.hero p {

   font-size: 1.25rem;
   font-weight: 300;
   text-align: center;
}