.menuCard__title{
    font-weight: 700;
    font-size: 3.5rem;
    text-align: center;
    padding: 48px 0 48px 0; 
}

.menuCard__container{
    padding: 24px 80px 24px 80px;
    background-color: #f6f6f6;
    height: auto;
    margin-bottom: 50px;
}

.menuCard {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 24px;
    column-gap: 2.5rem;

}
.waza{
    background-color: #172b4d;
    border-radius: 24px;
    width: 60%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-self: center;
}

.waza img{
    margin: auto auto;
    max-width: 270px;
    max-height: 300px;
}


.menuCard__normal{
    height: 500px;
    width: 50%;
    border-radius: 30px;
}

.menuCard__content{
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: 60px 0 ;
    justify-content: center;


}

.menuCard__title-desc, .menuCard__desc{
    color: #98A2B3;
    font-size: 1.rem;
    
}

.menuCard__desc{
    padding-top: 18px;
}



.menuCard__title-content{
    font-size: 3.2rem !important;
    font-weight: 600;
    line-height: 1.2;
    padding-bottom: 24px;
}

.menuCard__info{
    text-align: center;
    line-height: 1.1;
}

.menuCard__info, .menuCard__info-desc-footer {
    font-size: 2.8rem;
    font-weight: 400;

}

.menuCard__info span{
    color: var(--color-primary);
    font-weight: 700;

}

.menuCard__info-desc{
    font-size: 1.3rem;
    padding-bottom: 40px;
    text-align: center;
}

.menuCard__img-info{
    height: 450px;
    width: 50%;
    border-radius: 30px;
}

.menuCard__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates two equal columns */
    gap: 20px; /* Adds a gap of 20px between items */
    padding-top: 30px;
}

.menuInfo__item:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }

.menuInfo__item{
    background-color: white;
    border-radius: 14px;
    padding: 40px;
}

.menuInfo__item span{
    color: black;
    font-weight: 600;
}

.menuInfo__item h3{
    color: #98A2B3;
    font-weight: 200;
}

/* --- Responsive Adjustments --- */

/* For screens smaller than 992px (typical tablet and smaller desktops) */
@media (max-width: 992px) {
    .menuCard__container {
        padding: 24px 40px; /* Adjust padding */
    }

    .menuCard {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center items when stacked */
    }

    .menuCard__normal,
    .menuCard__img-info {
        width: 80%; /* Adjust image width */
        height: auto; /* Allow height to adjust automatically */
        margin-bottom: 20px; /* Add space below image */
    }

    .menuCard__normal{
        max-height: 450px;
    }

    .menuCard__content {
        width: 90%; /* Adjust content width */
        margin: 20px 0; /* Adjust margins */
        text-align: center; /* Center text */
    }

    .menuCard__title {
        font-size: 2.5rem; /* Adjust title font size */
        padding: 30px 0;
    }

    .menuCard__title-content {
        font-size: 2.8rem !important; /* Adjust title content font size */
        text-align: center;
    }

    .menuCard__title-desc,
    .menuCard__info-desc,
    .menuCard__info-desc-footer {
        font-size: 1.1rem; /* Adjust description font size */
    }

    .menuCard__info {
        font-size: 2.2rem; /* Adjust info font size */
    }

    .menuCard__list {
        grid-template-columns: 1fr; /* Single column for list items */
        gap: 15px; /* Adjust gap */
    }

    .menuInfo__item {
        padding: 30px; /* Adjust padding */
    }

    .menuCard__desc{
        text-align: center;
    }


}

/* For screens smaller than 768px (typical mobile devices) */
@media (max-width: 768px) {
    .menuCard__container {
        padding: 20px; /* Further adjust padding */
    }

    .menuCard__normal,
    .menuCard__img-info {
        width: 90%; /* Further adjust image width */
    }

    .menuCard__content {
        width: 100%; /* Full width for content */
        margin: 15px 0; /* Further adjust margins */
    }

    .menuCard__title {
        font-size: 2rem; /* Further adjust title font size */
        padding: 20px 0;
    }

    .menuCard__title-content {
        font-size: 2.2rem !important; /* Further adjust title content font size */
    }

    .menuCard__title-desc,
    .menuCard__info-desc {
        font-size: 1rem; /* Further adjust description font size */
    }

    .menuCard__info {
        font-size: 1.8rem; /* Further adjust info font size */
    }

    .menuInfo__item {
        padding: 20px; /* Further adjust padding */
    }
}

/* For screens smaller than 480px (smaller mobile devices) */
@media (max-width: 480px) {
    .menuCard__title {
        font-size: 1.8rem; /* Adjust for very small screens */
    }

    .menuCard__title-content {
        font-size: 2rem !important; /* Adjust for very small screens */
    }
}


.menuCard__info-desc-footer{
    text-align: center;
    padding: 12px 0;
}

.menuCard__info-desc-footer span{
    color: var(--color-primary);
    font-weight: 600;
}

.menuCard__info-desc-footer-small{
    text-align: center;
    font-size: 1rem;
}

.menuCard__img-contact, .menuCard__img-helpCenter{
    height: auto;
    width: 50%;
    min-width: 250px;
    min-height: 300px;
}




.contact-cards-container {
    display: flex;
    justify-content: center; /* Centra las tarjetas horizontalmente */
    gap: 20px; /* Espacio entre las tarjetas */
    margin-top: 40px; /* Espacio encima del contenedor de tarjetas */
    flex-wrap: wrap; /* Permite que las tarjetas se envuelvan en pantallas pequeñas */
}

.contact-card {
    display: flex;
    align-items: center; /* Centra verticalmente el ícono y el texto */
    background-color: white; /* Fondo claro similar al del contenedor principal */
    padding: 15px 30px; /* Relleno dentro de la tarjeta */
    border-radius: 30px; /* Bordes redondeados */
    min-width: 280px; /* Ancho mínimo para las tarjetas */
    flex-grow: 1; /* Permite que las tarjetas crezcan para llenar el espacio */
    max-width: 450px; /* Ancho máximo para las tarjetas */
    font-weight: 500;
}

.contact-card-icon {
    color: #1a237e; /* Color oscuro para el ícono (similar al de la imagen) */
    font-size: 1.5rem; /* Tamaño del ícono */
    margin-right: 15px; /* Espacio entre el ícono y el texto */
}

.contact-card-text {
    font-size: 1.1rem; /* Tamaño del texto */
    color: #333; /* Color oscuro para el texto */
    font-weight: bold;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    .contact-cards-container {
        flex-direction: column; /* Apila las tarjetas verticalmente en pantallas pequeñas */
        align-items: center; /* Centra las tarjetas apiladas */
        gap: 15px; /* Ajusta el espacio entre las tarjetas apiladas */
    }

    .contact-card {
        width: 90%; /* Las tarjetas ocupan casi todo el ancho en pantallas pequeñas */
        max-width: none; /* Elimina el ancho máximo */
    }
}


.general-inquiries-section {
    margin-top: 40px; /* Espacio encima de esta sección */
    margin-bottom: 40px; /* Espacio debajo de esta sección */
    max-width: 600px; /* Ancho máximo para centrar el contenido */
    margin-left: auto; /* Centrar el div */
    margin-right: auto; /* Centrar el div */
    padding: 0 20px; /* Relleno a los lados en pantallas pequeñas */
}

.general-inquiries-title {
    font-size: 2rem; /* Tamaño del título */
    font-weight: 700; /* Peso de la fuente del título */
    color: #333; /* Color oscuro para el título */
    margin-bottom: 25px; /* Espacio debajo del título */
}

.contact-info-item {
    display: flex;
    align-items: center; /* Centra verticalmente el ícono y el texto */
    margin-bottom: 25px; /* Espacio entre los ítems de contacto */
}

.contact-info-icon {
    color: #1a237e; /* Color oscuro para el ícono (similar al de la imagen) */
    font-size: 1.3rem; /* Tamaño del ícono */
    margin-right: 15px; /* Espacio entre el ícono y el texto */
    min-width: 30px; /* Ancho mínimo para alinear los íconos */
    text-align: center; /* Centra el ícono dentro de su contenedor */
    max-width: 45px;
    max-height: 45px;
}

.contact-info-text {
    font-size: 1.1rem; /* Tamaño del texto */
    font-weight: bold;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    .general-inquiries-title {
        font-size: 1.8rem; /* Ajustar tamaño del título en pantallas pequeñas */
    }

    .contact-info-text {
        font-size: 1rem; /* Ajustar tamaño del texto en pantallas pequeñas */
    }
}


.menuCard__img-helpCenter{
    width: 50%;
    margin: 0 auto;
}





/* Specific layout for the contact cards and hours within the form section */
.contact-cards-container {
    margin-top: 30px; /* Adjust space above the cards */
    margin-bottom: 20px; /* Space between the two rows of cards */
    justify-content: center; /* Center the cards */
    gap: 20px; /* Space between cards */
}

.hours-card-container {
     display: flex;
     justify-content: center; /* Center the hours card */
     margin-bottom: 30px; /* Space below the hours card */
}



.closing-text {
    text-align: center;
    font-size: 1.2rem;
    color: #555;
    margin-top: 30px;
    margin-bottom: 10px;
}

.team-signature {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a237e; /* Color similar al de los íconos */
    margin-bottom: 0;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .contact-form-section {
        padding: 20px; /* Adjust padding for smaller screens */
    }

    .contact-form {
        grid-template-columns: 1fr; /* Single column layout for the form on small screens */
    }

    .form-group.full-width {
        grid-column: span 1; /* Full width no longer needed in single column */
    }

    .contact-cards-container {
        flex-direction: column; /* Stack contact cards vertically */
        align-items: center; /* Center stacked cards */
        gap: 15px; /* Adjust gap */
    }

    .hours-card-container {
         justify-content: center; /* Ensure centering in column layout */
    }

    .contact-card {
        width: 90%; /* Make cards take more width on small screens */
        max-width: none; /* Remove max-width constraint */
    }

     .general-inquiries-title {
        font-size: 1.8rem; /* Adjust title size */
    }

     .closing-text, .team-signature {
        font-size: 1.1rem; /* Adjust text size */
    }
}

@media (max-width: 480px) {
    .contact-form-title {
        font-size: 1.5rem; /* Further adjust title size */
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group textarea {
        padding: 10px; /* Adjust padding */
        font-size: 0.9rem; /* Adjust font size */
    }

    .send-button {
        width: 120px; /* Adjust button width */
        padding: 10px 20px; /* Adjust button padding */
        font-size: 1rem; /* Adjust button font size */
    }

    .contact-card {
        padding: 12px 20px; /* Adjust contact card padding */
    }

    .contact-card-icon {
        font-size: 1.3rem; /* Adjust icon size */
        margin-right: 10px; /* Adjust space */
    }

    .contact-card-text {
        font-size: 1rem; /* Adjust text size */
    }
}



.report-section {
    background-color: #f6f6f6; /* Fondo similar al de otras secciones */
    border-radius: 10px; /* Bordes ligeramente redondeados */
    margin-top: 40px; /* Espacio encima de la sección */
    margin-bottom: 40px; /* Espacio debajo de la sección */
}

.report-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px; /* Espacio debajo del título */
    text-align: left; /* Centra el título */
}

.report-form {
    display: flex;
    flex-direction: row; /* Apila el área de texto y el botón */
    align-items: center; /* Centra los elementos horizontalmente */
    gap: 20px;
}

@media (max-width: 768px) {
    .report-form {
        flex-direction: column; /* Further adjust title size */
        gap: 0px;
    }

    

}


.report-form .form-group {
    width: 100%; /* El form-group ocupa todo el ancho disponible */
    margin-bottom: 20px; /* Espacio debajo del área de texto */
}

.report-form textarea {
    min-height: 150px; /* Altura mínima para el área de texto del reporte */
    width: 100%; /* Asegura que el área de texto ocupe todo el ancho */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    resize: vertical; /* Permite redimensionar verticalmente */
}

.report-form .send-button {
    /* Reusing send-button styles from the contact form section */
    /* No need to redefine if the styles are already in styles.css */
    margin-top: 0; /* Remove the top margin from the previous button style */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .report-section {
        padding: 20px; /* Adjust padding for smaller screens */
    }

    .report-title {
        font-size: 1.8rem; /* Adjust title size */
    }

    .report-form textarea {
        min-height: 100px; /* Adjust minimum height for smaller screens */
        font-size: 0.9rem; /* Adjust font size */
    }
}

@media (max-width: 480px) {
     .report-title {
        font-size: 1.5rem; /* Further adjust title size */
    }

    .report-form textarea {
        padding: 10px; /* Adjust padding */
    }
}




/* Sección del formulario */
.contact-form {
    width: 100%;
}

.form-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: left;
}

/* Cuadrícula (grid) para los campos del formulario */
.form-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 columnas para mayor flexibilidad */
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

/* Asignación de columnas a cada campo */
.form-group.name,
.form-group.email,
.form-group.company {
    grid-column: span 2;
}

.form-group.message,
.form-group.subject {
    grid-column: span 6;
}

.form-group label {
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.form-group input, .form-group textarea {
    padding: 0.75rem 1rem;
    border: 1px solid #dfe1e6;
    border-radius: 6px;
    background-color: #fafbfc;
    font-size: 1rem;
}

.form-group input::placeholder, .form-group textarea::placeholder{
    color: #a5adba;
}

/* Contenedor del botón para centrarlo */
.button-container {
    display: flex;
    justify-items: start;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.send-button {
    background-color: #a8c42c; /* Color verde lima */
    color: #172b4d; /* Texto oscuro para mejor contraste */
    font-weight: 600;
    font-size: 1rem;
    border: none;
    padding: 0.8rem 2.5rem;
    border-radius: 50px; /* Bordes redondeados */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.send-button:hover {
    background-color: #97b027;
}

/* Cuadrícula para la información de contacto inferior */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    justify-items: center;
}

.info-box {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    justify-self: center; /* Centra el box en su celda de la cuadrícula */
}

.info-box span{
    font-weight: bold !important;
}

/* Estilo para el tercer box que ocupa todo el ancho */
.info-box.full-width {
    grid-column: 1 / -1; /* Ocupa desde la primera a la última columna */
    max-width: 450px; /* Ancho máximo para el box de las horas */
}

.info-box .icon {
    background-color: #e3e8f7; /* Fondo azul claro para el icono */
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.info-box .icon svg {
    width: 24px;
    height: 24px;
    fill: #092c74; /* Color azul oscuro del icono */
}

.info-box span {
    font-weight: 500;
}

/* --- Media Queries para Responsividad --- */
@media (max-width: 768px) {


    /* En tablets, los campos del formulario ocupan toda la fila */
    .form-group.name,
    .form-group.email,
    .form-group.company,
    .form-group.message,
    .form-group.subject {
        grid-column: span 6; /* Cada campo ocupa las 6 columnas */
    }

    /* En tablets, los recuadros de información se apilan */
    .info-grid {
        grid-template-columns: 1fr; /* Una sola columna */
        justify-items: center;
    }

    .info-box {
        width: 100%;
        max-width: 400px; /* Mantenemos un ancho máximo */
    }
}


.menuCard__content .btn--primary{
    display: flex;
    width: max-content;
    justify-self: center;
    padding-top: 18px;
    white-space: normal !important  ;
}



/*
============================================
ESTILOS MODERNOS Y REFINADOS PARA REQUISITOS
============================================
*/

/* --- Contenedor Principal de la Sección --- */
.requirements__container {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0; /* Un borde más suave */
    width: 100%;
}

/* --- Título de la Sección --- */
.requirements__title {
    font-size: 1.6rem;
    font-weight: 700; /* Más audaz para un mayor impacto */
    color: var(--color-primary);
    margin-bottom: 30px;
    text-align: left; /* Alineación estándar para títulos de sección */
}

/* --- Lista de Requisitos (UL) --- */
.requirements__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre las tarjetas */
}

/* --- Ítem de la Lista (LI) - Estilo de Tarjeta --- */
.requirements__item {
    background-color: #ffffff; /* Fondo blanco para el efecto tarjeta */
    border: 1px solid #eeeeee; /* Borde muy sutil */
    border-radius: 12px; /* Bordes más redondeados */
    padding: 20px 20px 20px 55px; /* Aumentamos el padding para dar espacio */
    position: relative;
    font-size: 1rem;
    color: var(--primary-color); /* Usando tu variable para el texto */
    line-height: 1.5;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
}

/* --- Efecto Hover Mejorado --- */
.requirements__item:hover {
    transform: translateY(-5px); /* Eleva la tarjeta al pasar el cursor */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); /* Sombra más pronunciada */
    color: var(--color-primary); /* Mantenemos o cambiamos el color de texto si quieres */
}

/* Cuando se hace hover en el ítem, el ícono también reacciona */
.requirements__item:hover::before {
    background-color: var(--color-secondary);
    color: #ffffff; /* El checkmark se vuelve blanco */
}

/* --- Viñeta Personalizada (Ícono de Check) --- */
.requirements__item::before {
    content: '✓';
    position: absolute;
    left: 15px; /* Posición del ícono dentro de la tarjeta */
    top: 50%;
    transform: translateY(-50%) scale(1); /* Centrado verticalmente y tamaño inicial */
    
    /* Diseño del círculo del ícono */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f0f0f0; /* Un fondo neutro para el ícono */
    color: var(--color-secondary); /* Color del checkmark */
    
    /* Estilo del texto del ícono */
    font-size: 1rem;
    font-weight: bold;
    
    /* Flexbox para centrar el checkmark perfectamente */
    display: flex;
    align-items: center;
    justify-content: center;
    
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

/*
============================================
ADAPTACIÓN PARA DISPOSITIVOS MÓVILES
============================================
*/
@media (max-width: 768px) {
    .requirements__title {
        font-size: 1.4rem;
    }

    .requirements__item {
        padding: 15px 15px 15px 50px; /* Reducimos el padding en móviles */
        font-size: 0.95rem;
    }

    .requirements__item::before {
        width: 25px;
        height: 25px;
        left: 15px; /* Mantenemos la alineación */
    }
}