/* Estilo para el contenedor de arriba */
.overlay-content {
    position: fixed;
}

/* Estilo para el contenedor de abajo */
.container-main {
    position: relative;
}

/* TEXT Titulo S1*/
/* Estilo responsivo para pantallas de 768px o menos */
@media (max-width: 768px) {
    #titulo_s1 {
        text-align: initial !important; /* Asegura que el texto no esté justificado */
        margin-top: -10rem; /* Ajusta el margen superior para mover el texto hacia arriba */
    }
}

/* botton */
/* Media query para centrar el botón solo a partir de 576px */
@media (max-width: 576px) {
    .button-container {
        font-size: 20px !important;
        display: flex;
        align-items: center; /* Centra verticalmente */
    }

    #button-text {
        font-size: 12px !important;
    }
}

/* Para pantallas con ancho máximo de 375px y altura máxima de 667px */
@media screen and (max-width: 375px) and (max-height: 667px) {
    .button-container {
        font-size: 20px !important; /* Tamaño del texto relativo al 4% del ancho de la ventana */
        width: 20vw; /* Ancho del contenedor relativo al 20% del ancho de la ventana */
        margin: auto; /* Centra horizontal y verticalmente */
        display: flex;
        justify-content: center; /* Centra horizontalmente */
        align-items: center; /* Centra verticalmente */
        margin-top: 40px;
    }
}

/* Para pantallas con ancho máximo de 320px */
@media (max-width: 320px) {
    .button-container {
        margin-left: 60px !important; /* Ajusta el margen izquierdo */
    }
}

/* Estilo responsivo para iPhone SE 2, 8, 7, 6 (375x667) */
@media (max-width: 375px) and (max-height: 667px) {
    #seccion1 .overlay-content h1#titulo_s1 {
        margin-top: -130px; /* Ajusta el margen superior */
        font-size: 25px !important; /* Tamaño de fuente */
        line-height: 25px !important; /* Altura de línea */
    }

    #titulo_s2 {
        margin-top: 30px; /* Ajusta el margen superior */
    }
    .button-container {
        margin-top: -10px; /* Ajusta el margen superior */
    }
}

/*s2*/
/*ajustes del contenedor*/
@media (max-width: 345px) {
    #icon-button img {
        width: 70%; /* Ajusta este valor según tus necesidades */
        height: auto;
    }
}

@media (max-width: 325px) {
    #icon-button img {
        width: 90%; /* Ajusta este valor según tus necesidades */
        height: auto;
    }
}

#seccion2 {
    padding: 0; /* Elimina padding en el contenedor */
}

.container-main-two {
    width: 100%;
    overflow-x: hidden; /* Asegura que no haya desbordamiento horizontal */
}

/* Para pantallas más pequeñas que 576px */
@media (max-width: 575.98px) {
    #carouselExampleSlidesOnly .carousel-item img {
        height: 140px;
        max-height: 140px;
    }
}

/* Para pantallas más pequeñas que 375px */
@media (max-width: 374.98px) {
    #carouselExampleSlidesOnly .carousel-item img {
        height: 170px;
        max-height: 170px; /* Establece el doble de altura para las imágenes en pantallas muy pequeñas */
    }
}

/*numeros*/
@media (max-width: 576px) {
    .container-main-two .row {
        display: flex;
        flex-direction: column-reverse;
    }

    .text-column {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
    }
    .text-column > .custom-style {
        flex: 1;
        padding: 0 10px;
        margin-right: 10px; /* Añadido para espaciado */
    }
    .text-column > .custom-style:last-child {
        margin-right: 0; /* Elimina el margen del último elemento */
    }
    .text1,
    .text3,
    .text5 {
        font-size: 16px;
    }
    .text2,
    .text4 {
        font-size: 35px;
    }
}

@media (max-width: 390px) {
    .text1,
    .text3,
    .text5 {
        font-size: 14px;
    }
    .text2,
    .text4 {
        font-size: 30px;
    }
}

@media (max-width: 320px) {
    .text1,
    .text3,
    .text5 {
        font-size: 12px;
    }
    .text2,
    .text4 {
        font-size: 23px;
    }
}

/*fin numeros*/

/*parrafo*/
/* Media query para pantallas menores a 576px */
@media (max-width: 576px) {
    .col-md-5.col-sm-12 {
        margin-left: 1rem !important; /* Ajusta este valor según tus necesidades */
        text-align: left !important; /* Alinea el texto a la izquierda */
        margin-top: -61px;
    }
}

@media (max-width: 414px) {
    .col-md-5.col-sm-12 {
        margin-left: 1rem !important; /* Ajusta este valor según tus necesidades */
        text-align: left !important; /* Alinea el texto a la izquierda */
        margin-top: -61px;
        width: 90% !important; /* Ajusta el ancho del contenedor */
    }
}

/* seccion 3 */
/* fin seccion 3 */

/* seccion 4 */
/*texto*/
@media (max-width: 576px) {
    .container-col-s4 {
        padding: 0.5rem;
    }

    .text1_s4 {
        line-height: 2rem;
        margin-top: 24px;
    }

    .text2_s4 {
        line-height: 20px;
    }

    .responsives {
        margin-top: 150px !important; /* Ajusta el valor según sea necesario */
    }
    .text-overlay {
        left: 43% !important;
        font-size: 15px;
    }
}

/*fin seccion 4*/

/*seccion 5*/
@media (max-width: 428px) {
    .text-center-2,
    .card-title5,
    .card-text5 {
        text-align: left !important;
    }
}
/*fin seccion 5*/

@media (max-width: 1280px) {
    body,
    html {
        overflow-x: hidden; /* Evita el desplazamiento horizontal */
    }

    /* Asegúrate de que todos los elementos se ajusten dentro del viewport */
    .container {
        width: 100%;
        padding: 0 15px; /* Ajusta el padding según tus necesidades */
        box-sizing: border-box;
    }

    /* Otros ajustes específicos para asegurar que los elementos no se salgan del viewport */
    /* Por ejemplo, imágenes, tablas, etc. */
    img,
    table {
        max-width: 100%;
        height: auto;
    }
}