:root {
    --primary-color: #43a3a3;
    --secondary-color: #cef0f0;
    --text-color: #4d4d4d;
    --white: #fff;
}


/* General Styles */
/* strong {
    display: inline;
    white-space: nowrap;
} */

.row {
    max-width: auto;
    padding: 0;
    margin: 0;
}

.col-12 {
    padding: 0;
}

.menu-option {
    padding: 1rem 0;
}

/* Section 1 */
.section_1 {
    height: 65vh;
    background:
        linear-gradient(0deg, rgba(69, 163, 163, 1) 0%, rgba(0, 212, 255, 0) 36%),
        url('/img/CLÍNICA DE LA MEMORIA B/intro.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.title {
    font-size: 6rem;
    font-weight: bold;
    color: var(--white);
    margin: 0;
    padding: 0;
}

/* Section 2 */
.section_2 {
    padding: 4rem 0;
    background-color: #f2f2f2;
}

.rows-container{
    width: 60%;
}

.card-body {
    background-color: #f2f2f2;
}

.title-section {
    font-weight: bolder;
    font-size: 3rem;
    color: var(--primary-color);
}

.section_title {
    font-weight: bold;
    font-size: 1.6rem;
}

.section_description {
    font-size: 1.2rem !important;
    text-align: justify;
    line-height: 2rem;
}

.section_description p {
    font-size: 1.2rem !important;
    letter-spacing: -1px;
}

/* Collapse and Cards */
.collapse-container {
    width: 100%;
    margin: 0;
}

.options, .nested-collapse-toggle, .collapse-toggle {
    width: 100%;
    padding: 1.5rem 1rem;
    font-size: 1.5rem;
    text-align: start;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--text-color);
    font-weight: bold;
    cursor: pointer;
}

.collapse-toggle.col-12.card.card-body{
    background-color: red;
}

.options:hover, .options:active {
    background-color: #aadbdb;
    border-color: #aadbdb;
}

.nested-collapse-toggle, .collapse-toggle {
    background-color: var(--primary-color);
    color: var(--white);
    transition: background-color 0.3s ease;
}

.nested-collapse-toggle.card.card-body{
    background-color: #fff;
}

.nested-collapse-toggle {
    border-radius: 8px 8px 0 0;
}

.nested-collapse-toggle-alternative.collapsed { 
    border-top: solid 1px var(--primary-color);
    padding: 1rem;
    color: var(--primary-color);
    cursor: pointer;
}

.nested-collapse-toggle-alternative { 
    border-top: solid 1px var(--primary-color);
    padding: 1rem;
    color: var(--primary-color);
    cursor: pointer;
}


.collapse-toggle.active {
    background-color: var(--primary-color);
}

.collapse-toggle h2 {
    font-size: 1.5rem;
    font-weight: bold;
}

.collapse-toggle h2, .nested-collapse-toggle h3 {
    font-size: 1.5rem;
}

.main {
    padding: 0;
    border: solid 1px #ffffff00;
    
}

.secondary {
    padding: 0 2rem 0 3rem;
    border: solid 1px #ffffff00;
    border-radius: 0 0 1rem 1rem;
}

.paddinged{
    padding: 0 0 0 3rem;
}

/* Estilo para el triángulo */
.nested-collapse-toggle::after,
.nested-collapse-toggle-alternative::after {
    content: "▼"; /* Puedes usar un ícono de triángulo o un carácter Unicode */
    float: right;
    margin-left: 10px;
    transition: transform 0.3s ease; /* Animación para rotar el triángulo */
    line-height: 1.5; /* Asegura que el triángulo esté alineado verticalmente con el texto */
    vertical-align: middle; /* Alinea verticalmente el triángulo con el texto */
}

/* Rotar el triángulo cuando el collapse está abierto */
.nested-collapse-toggle[aria-expanded="true"]::after,
.nested-collapse-toggle-alternative[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Asegurar que el título y el triángulo estén alineados */
.nested-collapse-toggle h3,
.nested-collapse-toggle-alternative h3 {
    display: inline-block; /* Permite que el título y el triángulo estén en la misma línea */
    margin: 0; /* Elimina el margen predeterminado del h3 */
    vertical-align: middle; /* Alinea verticalmente el título con el triángulo */
}

#information_wide {
    padding: 0 0 0 5rem;
}

#information_wide.card-body {
    padding: 0 !important;
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.1) !important; /* Negro con 50% de transparencia */
}


ul, li{
    font-size: 1.2rem;
}

/* Media Queries */
@media only screen and (max-width: 1400px) {
    .title {
        font-size: 6rem;
    }

    .nested-collapse-toggle, .collapse-toggle {
        padding: 1rem;
    }

    #information_wide {
        padding: 0 0 0 5rem;
    }

    .rows-container{
        width: 80%;
    }

    /* .main {
        padding: 1rem 2rem 0 5rem;
        border: solid 1px #ffffff00;
    } */

    .card-body {
        padding: 0;
    }

}

@media only screen and (max-width: 1200px) {
    .title {
        font-size: 4rem;
    }

    .section_2 {
        padding: 2rem 0;
    }

    .nested-collapse-toggle, .collapse-toggle {
        padding: 2rem;
    }

    .col.collapse-toggle.collapse {
        display: block !important;
    }

    #information_wide {
        padding: 0 0 0 0rem;
    }

    .rows-container{
        width: 80%;
    }

    .section_description {
        font-size: 1.1rem !important;
        text-align: justify;
        line-height: 2rem;
    }

    .title-section {
        font-weight: bolder;
        font-size: 2,5rem;
        color: var(--primary-color);
    }
}

@media only screen and (max-width: 993px) {
    .title {
        font-size: 4rem;
    }

    .section_2 {
        padding: 0rem 0;
    }

    .card-body {
        padding: 2rem 1rem;
        width: 100%;
    }

    .paddinged{
        padding: 0 2rem;
    }

    .rows-container{
        width: 100%;
    }

    .main {
        padding: 0 1rem;
        border: solid 1px #ffffff00;
        max-height: 70vh;
    overflow: auto;
    }

    .whatsapp-icon {
        width: 50px; /* Reduce el tamaño en pantallas pequeñas */
        bottom: 15px;
        right: 15px;
    }
}

@media only screen and (max-width: 768px) {
    .title {
        font-size: 2rem;
    }
}