@font-face {
    font-family: 'AkhandSoftBlack';
    src: url('fuentes/AkhandSoft-Black.otf') format('opentype'); /* Ruta relativa al archivo de la fuente */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AkhandSoftRegular';
    src: url('fuentes/AkhandSoft-Regular.otf') format('opentype'); /* Ruta relativa al archivo de la fuente */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('fuentes/Raleway-Regular.ttf') format('opentype'); /* Ruta relativa al archivo de la fuente */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('fuentes/Raleway-Bold.ttf') format('opentype'); /* Ruta relativa al archivo de la fuente */
    font-weight: bold;
}

.gif-container {
    position: relative;
    display: inline-block;
}

.videoplayable {
    width: 100%; /* Ajusta el ancho del video al 100% del contenedor */
    height: auto; /* Mantiene la relación de aspecto original */
    cursor: pointer; /* Cambia el cursor al pasar sobre el video */
}

/* Estilo para la barra de navegación */
.navbar {
    background-color: #000000; /* Color de fondo negro */
    width: 100%; /* Asegura que la barra no exceda el ancho */
}

/* Estilo para los enlaces de la barra de navegación */
.navbar-nav .nav-item .nav-link {
    color: #808080; /* Color gris para los enlaces */
    font-family: 'Bebas Neue', sans-serif; /* Tipo de fuente Bebas Neue */
    font-weight: 400; /* Peso de la fuente regular */
    transition: font-weight 0.5s; /* Transición suave para el cambio de peso de la fuente */
}

/* Estilo para los enlaces al pasar el mouse */
.navbar-nav .nav-item .nav-link:hover {
    font-weight: 500; /* Cambio al peso de la fuente bold al pasar el mouse */
}

/* Estilo para la clase "titulos" */
.navbar-nav .nav-item .nav-link.titulos {
    font-size: 130%; /* Tamaño de fuente 30% más grande */
}

/* Estilo para el contenedor del icono de flecha */
.down-arrow {
    position: absolute;
    bottom: 60px; /* Ajusta según la posición deseada */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%);
    z-index: 1; /* Asegura que esté por encima del video */
    text-align: center;
    width: 35px; /* Ajusta el tamaño de la flecha */
    height: auto;
}

/* Estilo para el icono de flecha */
.down-arrow i {
    font-size: 2em; /* Tamaño del icono */
    color: white; /* Color del icono */
}


.down-arrow img {
    width: 35px; /* Tamaño de la imagen de la flecha */
    height: auto;
    cursor: pointer;
    animation: bounce 1.5s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}


/*---------------------------- Configuracion del video inicial -----------------------------*/

/* Estilo para la fuente Akhand */
@font-face {
    font-family: 'Akhand';
    font-size: 130%; /* Tamaño de fuente 30% más grande */
    src: url('fuentes/Indian\ Type\ Foundry\ -\ AkhandSoft-Black.otf') format('opentype'); /* Ruta relativa al archivo de la fuente */
    font-weight: bold;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth!important;
}

/* Estilo para el contenedor del video */
.video-container {
    position: relative;
    width: 100%;
}

/* Estilo para el video */
.video-container video {
    width: 100%;
}




img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

.video-container, .image-container {
    max-width: 100%;
    overflow: hidden;
}

.video-container video {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Evitar margen extra en el contenedor de imágenes */
.image-container {
    border: 3px solid #808080;
    margin: 0; /* Elimina márgenes que pueden generar desbordamiento */
    padding: 0;
}


/* .image-container {
    border: 3px solid #808080; 
    margin: -3px;
}

.image-container img {
    width: calc(100% + 4px);
    height: auto;
} */

.row {
    margin: -0.5em; 
}

.col-sm-3 {
    padding: 0; /* Eliminar el relleno de las columnas */
}

.colcuadrado
{
    margin: -6.5px!important;
    padding : 0!important;
}
.colhorizontal{
    margin: -3.5px!important;
    padding : 0!important;
}

.colvertical{
    margin-left: -1em!important;
    margin-right: -1em!important;
    padding : 0!important;
}

.footer {
    background-color: #000000; /* Color de fondo negro */
    padding: 20px 0; /* Añade un poco de espacio alrededor del contenido del pie de página */
}

.footer-content {
    /* display: inline;
    align-items: center; */
    display: flexbox;
    align-items: center;
}

.footer-image {
    max-width: 100px; /* Ancho máximo de la imagen */
}

.footer-image-right {
    margin-right: 10px; /* Espacio entre la imagen y el texto */
}
.footer-image-left {
    margin-left: 10px; /* Espacio entre la imagen y el texto */
}

.footer-text {
    font-family: 'Raleway', sans-serif; /* Corregir el nombre de la fuente y agregar fallback */
    color: #808080;
    font-weight: normal;
    font-style: normal;
}
.footer-text:hover {
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
}
/* Estilo base para la flecha hacia abajo */
#flechaabajo {
    width: 50%; /* Tamaño inicial */
    height: auto;
    
    position: relative;
    display: inline-block;
    padding-bottom: 0em;

}

.container-personalize
{
    padding: 0px 10px 0px 10px;
}


/* Media query para pantallas pequeñas */
@media (min-width: 140px) and (max-width: 639.89px) {
/* Estilo para el contenedor del icono de flecha */
    .down-arrow {
        position: absolute;
        bottom: 0px; /* Ajusta según la posición deseada */
        left: 50%; /* Centra horizontalmente */
        transform: translate(-50%, -50%);
        z-index: 1; /* Asegura que esté por encima del video */
        text-align: center;
    }
    #flechaabajo {
        width: 20%; /* Ajuste de tamaño para pantallas pequeñas */
    }
    
}
/* Media query para pantallas pequeñas */
@media (min-width: 340px) and (max-width: 767.98px) {
/* Estilo para el contenedor del icono de flecha */
    .down-arrow {
        position: absolute;
        bottom: 0px; /* Ajusta según la posición deseada */
        left: 50%; /* Centra horizontalmente */
        transform: translate(-50%, -50%);
        z-index: 1; /* Asegura que esté por encima del video */
        text-align: center;
    }
    #flechaabajo {
        width: 10%; /* Ajuste de tamaño para pantallas pequeñas */
    }

  
}

/* Media query para pantallas medianas */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Estilo para el contenedor del icono de flecha */
    .down-arrow {
        position: absolute;
        bottom: 8px; /* Ajusta según la posición deseada */
        left: 50%; /* Centra horizontalmente */
        transform: translate(-50%, -50%);
        z-index: 1; /* Asegura que esté por encima del video */
        text-align: center;
    }
    #flechaabajo {
        width: 20%; /* Ajuste de tamaño para pantallas medianas */
    }
}

/* Media query para pantallas grandes */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Estilo para el contenedor del icono de flecha */
    .down-arrow {
        position: absolute;
        bottom: 30px; /* Ajusta según la posición deseada */
        left: 50%; /* Centra horizontalmente */
        transform: translate(-50%, -50%);
        z-index: 1; /* Asegura que esté por encima del video */
        text-align: center;
    }
    #flechaabajo {
        width: 30%; /* Ajuste de tamaño para pantallas grandes */
    }
}

/* Media query para pantallas extra grandes */
@media (min-width: 1200px) {
    /* Estilo para el contenedor del icono de flecha */
    .down-arrow {
        position: absolute;
        bottom: 30px; /* Ajusta según la posición deseada */
        left: 50%; /* Centra horizontalmente */
        transform: translate(-50%, -50%);
        z-index: 1; /* Asegura que esté por encima del video */
        text-align: center;
    }
    #flechaabajo {
        width: 40%; /* Ajuste de tamaño para pantallas extra grandes */
    }
}