@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;
    }
}

@media (max-width: 576px) {
    #button-text {
        font-size: 12px !important;
    }
}

@media (max-width: 576px) {
    .container-main {
        min-height: 35vh !important;
    }

    .background-animation {
        width: 100%;
        height: 30%;
    }
    .custom-text-style {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column; /* Asegura que el contenido se apile verticalmente */
        top: 40%; /* Resetea top ya que usamos flexbox para centrar */
        left: 0; /* Resetea left ya que usamos flexbox para centrar */
        transform: none; /* Resetea transform ya que usamos flexbox para centrar */

        margin-top: 0; /* Resetea margin-top */
    }

    
}