
.Style_Hero_Responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
}

.logo-container {
    width: 70px; /* Ajusta el tamaño */
    height: auto;
}

.gallery_container{
    margin-top:0;
}

.titles-container{
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    flex:1;
}

/*Estilos de los títulos*/
.hero-title {
    font-family: 'Lilita One';
    font-size: 2.8rem !important;
    color: #ffffff;
    text-align: left;
    text-shadow: 4px 4px 20px rgba(162, 82, 129, 0.9), 0 0 25px rgba(162, 82, 129, 0.6);
    display: inline-block;
    letter-spacing: 5px;
    line-height: 1.2;
    margin: 0px;
}

.hero-subtitle {
    font-family: "Oranienbaum", serif;
    /*font-weight: 400;*/
    font-style: normal;
    text-transform: uppercase;
    font-size: 2.4rem;
    text-align: center;
    letter-spacing: 1.2px;
    color: #ffffff;
}

.hero-description {
    font-family: 'Concert One';
    font-size: 1.5rem;
    color: #6FB0B4;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 6px;
    line-height: 1.2;
    margin: 5px 0px 10px 0px;
}

.button-subscription {
    background: #ffffff;
    color: #4B4B4B;
    border: solid 1px #1a2a40;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 9px 20px;
    font-size: 24px;
    font-weight: 500;
    font-family: Geist, sans-serif;
    border-radius: 8px; /* Borde redondeado */
    cursor: pointer;
    transition: background 0.3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Se adapta al ancho del contenedor */
    max-width: 500px; /* Evita que sea demasiado ancho */
    margin: 0px auto; /* Centrar */
    margin-top: 7px; /* Espacio arriba */
    box-sizing: border-box;
    overflow: hidden;
    word-break: break-word;
    text-decoration: none;
}

    .button-subscription:hover {
        background-color: #0750D2;
        color:#D9D9D9 ;
    }


/*Q&AsectionStyles*/
.Style_Section_QA {
    font-family: 'Poppins', sans-serif;
    background: radial-gradient(circle at 10% 20%, #072c57 10%, #020a13 80%);
    background-size: cover;
    background-position: center top;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    min-height: 100vh;
    overflow: visible;
    position: relative;
    z-index: 0;
    width: 100%;
    color: #ffffff;
    border-radius: 40% 40% 0% 0% / 2% 2% 0% 0%;
    margin-top: -2.2%;
}

.Title-Container-QA {
    max-width: 60%;
    justify-content: center;
    align-items: center;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.Style_Subtitle_QA {
    font-size: 1.5rem;
    font-weight: 100;
    font-style: normal;
    font-optical-sizing: auto;
    color: #ffffff;
    margin: 10px 0px 30px 0px;
}

.Style_Responsive_QA {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se ajusten a la line */
    gap: 80px;
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Centra los elementos verticalmente */
    padding: 20px;
    text-align: center;
}

/* Para tablets y pantallas más pequeñas (1024px) */
@media (max-width: 1024px) {
    .Style_Hero_Responsive {
        flex-direction: column-reverse;
    }

}

/* Para dispositivos medianos (768px) */
@media (max-width: 768px) {
    .Style_Hero_Responsive {
        gap: 15px;
        padding: 30px;
        flex-direction: column-reverse;
    }
    .Style_Section_QA {
        flex-direction: column;
        border-radius: 30% 30% 0% 0% / 0.5% 0.5% 0% 0%;
    }
}

/* Para teléfonos pequeños (480px) */
@media (max-width: 480px) {
    .Style_Hero_Responsive {
        padding: 5px;
        flex-direction: column-reverse; /* Mantener solo una dirección */
    }

    .gallery_container {
        margin-top: -200px;
    }

    .hero-title {
        font-size:2.4rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-description {
        font-size: 1.2rem;
    }

    .Style_Section_QA {
        flex-direction: column;
        border-radius: 30% 30% 0% 0% / 0.5% 0.5% 0% 0%;
    }
    .button-subscription {
        font-size: 20px;
        padding: 10px 35px;
        max-width: 500px;
    }
}