body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

@font-face {
  font-family: 'raleway';
  src: url('../fonts/RalewayDots-Regular.ttf') format('truetype'), /* Cambia la ruta y el nombre del archivo según corresponda */       url('fonts/Inter-Regular.woff') format('woff'); /* Agrega formatos de fuentes adicionales si es necesario */
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'annie';
  src: url('../fonts/AnnieUseYourTelescope-Regular.ttf') format('truetype'), /* Cambia la ruta y el nombre del archivo según corresponda */       url('fonts/Inter-Regular.woff') format('woff'); /* Agrega formatos de fuentes adicionales si es necesario */
  font-weight: bold;
  font-style: normal;
}

#split-screen {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.left-panel, .right-panel {
    font-family: 'annie', sans-serif;
    font-weight: bold; /* Aplica negrita */
    width: 50%;
    height: 100%;
    background-color: #3dadd6;
    transition: transform 2s ease; /* Transición de transformación */
}

.right-panel {
    background-color: #e38a1c;
}

@keyframes changeColorleft {
    0% { background-color: #e3e8e4; } /* Color inicial */
    25% { background-color: #e3e8e4; } /* Color inicial */
    50% { background-color: #e3e8e4; } /* Color inicial */
    100% { background-color: #3dadd6; } /* Color final */
}

@keyframes changeColorright {
    0% { background-color: #e3e8e4; } /* Color inicial */
    25% { background-color: #e3e8e4; } /* Color inicial */
    50% { background-color: #e3e8e4; } /* Color inicial */
    100% { background-color: #e38a1c; } /* Color final */
}

/* Al pasar el mouse sobre los paneles, cambia su color */
.left-panel:hover, .right-panel:hover {
    background-color: #22ac67; /* Nuevo color al pasar el mouse */
}

.left-panel {
    animation: changeColorleft 6s; /* Aplica la animación de cambio de color */
    z-index: 3; /* Coloca el logo detrás de los paneles */

}

.left-panel .container .row div {
    padding-top: 90%;
    padding-left: 10%;
    color: #e3e8e4;
    text-align: left; /* Alinea el contenido del div a la derecha */
    transform: rotate(270deg); /* Rota el texto 180 grados */
}

.right-panel {
    animation: changeColorright 6s; /* Aplica la animación de cambio de color */
    z-index: 3; /* Coloca el logo detrás de los paneles */
    
}

.right-panel .container .row div {
    padding-bottom: 90%;
    padding-left: 10%;
    color: #e3e8e4;
    text-align: left; /* Alinea el contenido del div a la derecha */
    transform: rotate(270deg); /* Rota el texto 180 grados */
}

.logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; /* Coloca las esferas detrás del logo y los paneles */

}

.video1 {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 20%;
    left: 30%;
    transform: translate(-10%, -10%);
    z-index: 2; /* Coloca las esferas detrás del logo y los paneles */

}

.logo {
    width: 40%;
    height: 40%;
    position: relative;
    top: 20%;
    left: 30%;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2; /* Coloca las esferas detrás del logo y los paneles */

}

.container {
    position: relative;
    width: 100%;
    height: 100%;
}

.ball {
    position: absolute;
    width: 20px;
    height: 20px;
    /*background-color: #e3e8e4;*/
    border-radius: 50%;
    z-index: 1; /* Coloca las esferas detrás del logo y los paneles */
}

.ball.ball-1 {
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    width: 50px; /* Ajusta el tamaño según tus necesidades */
    height: 50px; /* Ajusta el tamaño según tus necesidades */
    background-image: url('../imagenes/pagina/apagada.png'); /* Reemplaza 'ruta/a/tu/imagen.jpg' con la ruta de tu imagen */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el fondo */
    border-radius: 50%;
    animation: orbit-clockwise 40s linear infinite; /* Asigna la animación orbit-clockwise */
    opacity: 0.2; /* Define la opacidad de la imagen (0 completamente transparente, 1 completamente opaco) */
}

.ball.ball-2 {
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    width: 50px; /* Ajusta el tamaño según tus necesidades */
    height: 50px; /* Ajusta el tamaño según tus necesidades */
    background-image: url('../imagenes/pagina/apagada.png'); /* Reemplaza 'ruta/a/tu/imagen.jpg' con la ruta de tu imagen */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el fondo */
    border-radius: 50%;
    animation: orbit-clockwise 30s linear infinite; /* Asigna la animación orbit-clockwise */
    opacity: 0.2; /* Define la opacidad de la imagen (0 completamente transparente, 1 completamente opaco) */
}

.ball.ball-3 {
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    width: 50px; /* Ajusta el tamaño según tus necesidades */
    height: 50px; /* Ajusta el tamaño según tus necesidades */
    background-image: url('../imagenes/pagina/apagada.png'); /* Reemplaza 'ruta/a/tu/imagen.jpg' con la ruta de tu imagen */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el fondo */
    border-radius: 50%;
    animation: orbit-clockwise 50s linear infinite; /* Asigna la animación orbit-clockwise */
    opacity: 0.2; /* Define la opacidad de la imagen (0 completamente transparente, 1 completamente opaco) */
}

.ball.ball-4 {
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    width: 50px; /* Ajusta el tamaño según tus necesidades */
    height: 50px; /* Ajusta el tamaño según tus necesidades */
    background-image: url('../imagenes/pagina/encendida.png'); /* Reemplaza 'ruta/a/tu/imagen.jpg' con la ruta de tu imagen */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el fondo */
    border-radius: 50%;
    animation: orbit-counter-clockwise 70s linear infinite; /* Asigna la animación orbit-clockwise */
    opacity: 1; /* Define la opacidad de la imagen (0 completamente transparente, 1 completamente opaco) */
}

.ball.ball-5 {
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    width: 50px; /* Ajusta el tamaño según tus necesidades */
    height: 50px; /* Ajusta el tamaño según tus necesidades */
    background-image: url('../imagenes/pagina/encendida.png'); /* Reemplaza 'ruta/a/tu/imagen.jpg' con la ruta de tu imagen */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el fondo */
    border-radius: 50%;
    animation: orbit-counter-clockwise 40s linear infinite; /* Asigna la animación orbit-clockwise */
    opacity: 1; /* Define la opacidad de la imagen (0 completamente transparente, 1 completamente opaco) */
}

.ball.ball-6 {
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    width: 50px; /* Ajusta el tamaño según tus necesidades */
    height: 50px; /* Ajusta el tamaño según tus necesidades */
    background-image: url('../imagenes/pagina/encendida.png'); /* Reemplaza 'ruta/a/tu/imagen.jpg' con la ruta de tu imagen */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el fondo */
    border-radius: 50%;
    animation: orbit-counter-clockwise 60s linear infinite; /* Asigna la animación orbit-clockwise */
    opacity: 1; /* Define la opacidad de la imagen (0 completamente transparente, 1 completamente opaco) */
}

/* Animación de orbita para la esfera 1 */
@keyframes orbit-clockwise {
    from { transform: translate(-0%, -0%) rotate(0deg) translateX(280px) rotate(0deg); }
    to { transform: translate(-0%, -0%) rotate(360deg) translateX(280px) rotate(-360deg); }
}

/* Animación de orbita para la esfera 2 (en sentido contrario) */
@keyframes orbit-counter-clockwise {
    from { transform: translate(-0%, -0%) rotate(0deg) translateX(15vw) rotate(0deg); }
    to { transform: translate(-0%, -0%) rotate(-360deg) translateX(15vw) rotate(360deg); }
}

@media (max-width: 768px) {
    /* Ajustes para dispositivos con un ancho máximo de 768px */
    @keyframes orbit-counter-clockwise {
        from { transform: translate(-0%, -0%) rotate(0deg) translateX(15vw) rotate(0deg); }
        to { transform: translate(-0%, -0%) rotate(-360deg) translateX(15vw) rotate(360deg); }
    }
}

/* Ajuste de posición de las esferas */
.ball.ball-1 { top: calc(50% - 20px); left: calc(50% - 20px); animation: orbit-clockwise 30s linear infinite; }
.ball.ball-2 { top: calc(50% - 20px); left: calc(50% - 20px); animation: orbit-counter-clockwise 20s linear infinite; }
.ball.ball-3 { top: calc(50% - 20px); left: calc(50% - 20px); animation: orbit-clockwise 40s linear infinite; }
.ball.ball-4 { top: calc(50% - 20px); left: calc(50% - 20px); animation: orbit-counter-clockwise 50s linear infinite; }
.ball.ball-5 { top: calc(50% - 20px); left: calc(50% - 20px); animation: orbit-clockwise 60s linear infinite; }
.ball.ball-6 { top: calc(50% - 20px); left: calc(50% - 20px); animation: orbit-counter-clockwise 70s linear infinite; }



        #video-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1; /* Coloca el video detrás del contenido */
        }

        #video-background {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ajusta el tamaño del video al contenedor */
            z-index: -1; /* Coloca el video detrás del contenido */
        }