@import url("https://fonts.googleapis.com/css2?family=Nunito&family=Roboto+Slab:wght@900&display=swap");

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

body {
   height: 100vh;
   display: grid;
   place-items: center;
   font-family: "Nunito", sans-serif;
   --primary: #fff;
   --blue: #14b0ee;
   background: transparent;
}

.video-wrapper:before {
    position: fixed;
    width: 100vw;
    left: 0;
    top: 0;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    content: " ";
    z-index: 1;
}

#videoBkg {
   position: fixed;
   z-index: -1;
}

.hero-section {
   position: absolute;
   top: 30%;
   left: 10%;
   max-width: 80%;
   transform: translateY(-30%);
   z-index: 10;
}

.hero-section.hero-section-images {
   top: 0;
   position: relative;
   left: 0;
   transform: none;
}

.hero-section>* {
   transform: translateY(80px);
   opacity: 0;
   animation: fadeUp 1s ease-out forwards;
}

.hero-section p {
   color: var(--primary);

}

.hero-section h1 {
   font-size: 5rem;
   font-family: "Roboto Slab", serif;
   color: var(--primary);
   animation-delay: 0.2s;
}

.hero-section h2 {
   font-size: 3rem;
   font-weight: 600;
   color: var(--primary);
   animation-delay: 0.5s;
}

.hero-section button {
   border: 2px solid var(--primary);
   padding: 1em 1.2em;
   outline: none;
   background-color: transparent;
   text-transform: uppercase;
   font-size: 0.8rem;
   font-weight: 600;
   letter-spacing: 1px;
   cursor: pointer;
   transition: background-color 0.3s;
   color: var(--primary);
   animation-delay: 0.8s;
}

.hero-section button:hover {
   background-color: var(--blue);
   color: var(--primary);
   border: 2px solid var(--blue);
}

.button-wrapper {
   margin-bottom: 50px;
}

.video-wrapper {
   background: #000000cc;
   width: 100%;
   height: auto;
   top: 0;
   left: 0;
   position: absolute;
}

/* MEDIA QUERIES for video background
 ----------------------------------------- */
@media (min-aspect-ratio: 16/9) {
   #videoBkg {
      width: 100%;
      height: auto;
   }
}

@media (max-aspect-ratio: 16/9) {
   #videoBkg {
      width: auto;
      height: 100%;
   }
}

@keyframes fadeUp {
   0% {
      transform: translateY(80px);
      opacity: 0;
   }

   100% {
      transform: translateY(0px);
      opacity: 1;
   }
}

@media(max-width:425px) {
   .hero-section h1 {
      margin-top: 70px !important;
      font-size: 3rem !important;
   }

   .hero-section h2 {
      font-size: 2rem !important;
   }

   .hero-section button {
      padding: 0.5em 1em !important;
   }

   .hubicon_logo {
      margin-top: 100px !important;
   }

   #hubicon_logo {
      max-width: 250px !important;
   }
}

@media(min-width:426px) and (max-width:768px) {
   .hubicon_logo {
      margin-top: 100px !important;
   }
}

@media(max-width:375px) {
   .hubicon_logo {
      margin-top: 200px !important;
   }
}

.gallery {
   display: flex;
   margin-bottom: 50px;
   flex-wrap: wrap;
   transform: none !important;
}

.image img {
   height: 25vw;
   width: 100%;
   object-fit: cover;
}

.image {
   padding: 15px;
   width: 33.33%;
}

@media screen and (max-width: 810px) {
   .image {
      width: 50%;
   }

   .image img {
      height: 50vw;
   }
}

@media screen and (max-width: 500px) {
   .image {
      width: 100%;
   }

   .image img {
      height: 80vw;
   }

}

.image-header {
   color: #fff;
   font-size: 40px;
   text-align: center;
   font-weight: 600;
}