/*--------------------------------------------------------------
   # General
   --------------------------------------------------------------*/

   .navbar a {
       color: #ffffffdb;
   }

   #header.header-scrolled {
       background: #f8b416;
   }

   .navbar .active,
   .navbar .active:focus,
   .navbar li:hover>a {
       background: #ffffff4f;
   }

   .navbar .dropdown:hover>ul {
       background: #000;
   }

   .navbar .dropdown ul a {
       color: #fff;
   }

   .mobile-nav-toggle {
       color: #fff;
   }

   .navbar-mobile ul {
       background-color: #000;
   }

   .navbar-mobile {
       background: #323233;
   }

   .logo img {
       /* Duración de la transición */
       transition: opacity 0.5s ease;
   }

   #features {
       position: relative;
       width: 100%;
       height: 400vh;
       overflow: hidden;
   }

   #backgroundVideo {
       position: fixed;
       /* Usamos fixed para que el video permanezca en su lugar durante el scroll */
       top: 0;
       left: 50%;
       width: 100%;
       height: 100%;
       object-fit: cover;
       transform: translateX(-50%);
       /* Centrar horizontalmente */
       z-index: -1;
   }

   #features::after {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: linear-gradient(rgb(33 37 41 / 44%), rgb(0 0 0 / 88%));
       background-position: top;
       background-repeat: no-repeat;
       background-size: cover;
       opacity: 0;
       transition: opacity 1s ease;
   }


   #features.blur::after {
       opacity: 1;
   }

   .text-container {
       position: relative;
       z-index: 1;
       padding-top: 180px;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       text-align: center;
   }

   .image-text {
       margin: 12rem 0;
       color: #fff;
       font-size: 1rem;
       line-height: 1.5;
       opacity: 0;
       transition: opacity 1s;
       z-index: 1;
   }

   .image-text h1 {
       font-size: calc(1.7rem + 4vw);
       text-transform: uppercase;
       color: #f9c802;
       /* Cambiado a un color amarillo más claro */
       text-shadow:
           0 1px 0 #e6b800,
           /* Cambiado a un tono más oscuro para un mejor contraste */
           0 2px 0 #d4a200,
           0 3px 0 #c48d00,
           0 4px 0 #b37800,
           0 5px 0 #a26200,
           0 6px 0 #915100,
           0 9px 0 #804100,
           0 10px 0 #6f3100,
           3px 10px 15px rgba(0, 0, 0, 0.2),
           /* Ajuste de sombras para mayor profundidad */
           3px 10px 5px rgba(0, 0, 0, 0.4);
       /* Aumento del contraste para el efecto 3D */
   }


   /* Media query para pantallas grandes */
   @media (min-width: 2000px) {
       #features {
           height: 440vh;
       }

       .image-text {
           margin: 15rem 0;
       }

       .image-text h2 {
           font-size: 3rem;
       }
   }

   /* Media query para pntallas medianas */
   @media (max-width: 1500px) {
       #features {
           min-height: 300vh;
           background-size: auto 100%;
       }
   }

   /* Media query para tablets */
   @media (max-width: 1023px) {
       #features {
           min-height: 300vh;
           background-size: auto 100%;
       }

       .text-container {
           padding-top: 170px;
       }

       .image-text {
           margin: 12rem 0;
       }

       .image-text h2 {
           font-size: 1.5rem;
       }
   }

   /* Media query para móviles */
   @media (max-width: 768px) {
       #features {
           height: 400vh;
           background-size: auto 100%;
       }

       .text-container {
           padding-top: 120px;
       }

       .image-text h2 {
           font-size: 1.2rem;
       }

       /* Mantener el video visible pero ajustar su tamaño */
       #backgroundVideo {
           top: 0;
           /* Asegurarse de que esté en la parte superior */
           left: 50%;
           width: 100%;
           height: 120%;
           object-fit: cover;
           transform: translateX(-50%);
           /* Centrado horizontal */
       }

       #features::after {
           background-attachment: scroll;
           /* Cambiar a scroll en móviles para mejorar rendimiento */
       }
   }

   /* Media query para pantallas muy pequeñas */
   @media (max-width: 425px) {
    #features {
           height: 470vh;
           background-size: auto 100%;
       }
       .image-text h2 {
           font-size: 1.5rem;
           margin: 0 10px 0 10px;
       }
   }