/* style.css */

body {
    font-family: 'Inter', sans-serif;
    background-color: #e2e4e5;
}

.carousel-inner h1 {
    font-family: 'Inter', sans-serif;
}

.carousel-container {
    min-height: auto; /* Altura ajustada a la mitad de la ventana */
}

.carousel-item {
    min-height: 80vh; /* Altura ajustada a la mitad de la ventana */
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
}

.carousel-item img,
.carousel-item video {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.carousel-caption-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.carousel-caption-title h1.display-2 {
    font-size: 8rem; /* Ajusta el tamaño del texto */
    color: #252525;
}

.carousel-caption h2 {
    font-weight: bold;
}

.other-section {
    background-color: #e2e4e5;
}
.hero-section {
    background-color: #dadbdc; /* Color de fondo ligero */
    padding: 60px 0;
}
.hero-content {
    max-width: 600px;
}
.btn-custom {
    padding: 10px 20px;
    font-size: 1rem;
}
.card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.card img {
    height: 200px;
    object-fit: cover;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.card-body {
    text-align: center;
}
.card-body h5 {
    margin-bottom: 15px;
}
.card-body p {
    color: #6c757d;
}
.lead.text-muted {
    color: #6c757d; /* Color más claro para el texto */
}
.full-width-image {
    background-image: url('/static/admin/img/fondo_tec.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    text-size-adjust: 100;
}

.full-width-image h1 {
    font-weight: bold;
}

.text-borde {
    color: black; /* Color de relleno */
    text-shadow: 
        1px 1px 0 white, 
        -1px -1px 0 white, 
        1px -1px 0 white, 
        -1px 1px 0 white;
}
/* Contenedor de la imagen */
.container-image {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Para que las imágenes se ajusten en varias filas si es necesario */
}

/* Imágenes */
.image-zoom {
    display: block;
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    /* Para asegurar que la imagen se ajuste bien dentro del contenedor si se le aplica un ancho máximo */
    object-fit: cover;
}

/* Efecto de zoom al pasar el cursor */
.image-zoom:hover {
    transform: scale(1.1); /* Ajusta el factor de escala según tus necesidades */
}


/* Media query para pantallas más pequeñas */
@media (max-width: 1200px) {
    .full-width-image h1 {
        font-size: 8em;
    }
    .carousel-caption-title h1.display-2 {
        font-size: 8em;
    }
}

@media (max-width: 992px) {
    .full-width-image h1 {
        font-size: 6em;
    }
    .carousel-caption-title h1.display-2 {
        font-size: 6em;
    }
}

@media (max-width: 768px) {
    .full-width-image h1 {
        font-size: 4em;
    }
    .carousel-caption-title h1.display-2 {
        font-size: 3em;
    }
    .carousel-item {
        min-height: max-content;
    }
    .carousel-item img,
    .carousel-item video {
        height: auto;
        width: 100%;
        object-fit: contain;
    }
    .carousel-control-prev, .carousel-control-next {
    bottom: 20px; /* Ajusta la posición de los botones */
    }

}

@media (max-width: 576px) {
    .full-width-image h1 {
        font-size: 3em;
    }
    .carousel-caption-title h1.display-2 {
        font-size: 2em;
    }
    .carousel-item {
        min-height: max-content; /* Reduce aún más la altura en pantallas más pequeñas */
    }
    .carousel-control-prev, .carousel-control-next {
        bottom: 15px; /* Ajusta aún más la posición de los botones */
    }
}