/* Estilos generales */

body {
    font-family: 'Poppins-400', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;

    display: flex;
    flex-direction: column;
    align-items: center;
}


h1 {
    line-height: 80%;
    text-align: center;
    margin: 0 calc(50 * var(--shrink40));
    margin-top: calc(150 * var(--shrink40));
    margin-bottom: calc(100 * var(--shrink40));
}

.gradient {
    background: linear-gradient(276deg, #007581 45.2%, #71C8B7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Estilos para el contenido principal */
.content {
    width: 100%;
    position: relative;
    display: flex;
    padding: 0 calc(150 * var(--shrink40));
    box-sizing: border-box;
}

/* Estilos para la columna izquierda */
.left-column-options {
    flex-shrink: 0;
    display: flex;
    width: 50%;
    flex-direction: column;
    /* gap: 50px; */
    /* gap: calc(50 * var(--shrink40)); */
    gap: var(--50px);
}

/* Estilos para las opciones de la columna de la izquierda */
.option-PracticeAreas {
    position: relative;
    padding: calc(50 * var(--shrink40)) calc(139 * var(--shrink40)) calc(50 * var(--shrink40)) calc(100 * var(--shrink40));
    box-sizing: border-box;
    border-radius: calc(30 * var(--shrink40));
    background: linear-gradient(110deg, #71C8B7 49.53%, #006B78 95.69%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: color 0.3s; /* Agrega una transicion suave para el cambio de color */
    cursor: pointer;
    z-index: 1;
}

.option-PracticeAreas h2 {
    line-height: 100%;
}

.option-PracticeAreas.active {
    background: radial-gradient(172.32% 151.79% at -14.2% 0%, #DFCAA2 0%, #71C8B7 54.5%, #007581 100%);
    -webkit-text-fill-color: #ffffff;
}

.icon { 
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    right: calc(50 * var(--shrink40));

    width: calc(64 * var(--shrink40)) !important; 
    height: calc(64 * var(--shrink40)) !important; 

}
.color-icons * {
    fill: white !important;
    stroke: white !important;
}
.icon path, .icon rect {
    fill: var(--turquoise);
    stroke: var(--turquoise);
}


.right-column-info {
    flex-grow: 1;
    margin-left: 100px;
}

.informacion-PracticeAreas {
    height: 0;
    display: block;
    padding-top: calc(100 * var(--shrink40));
    padding-bottom: calc(50 * var(--shrink40));
    border-radius: calc(30 * var(--shrink40));
    background: radial-gradient(142.65% 141.42% at 0% 0%, #71C8B7 0%, #007581 100%);
    box-shadow: 0px 40px 70px -30px rgba(0, 0, 0, 0.35);
    gap: calc(50 * var(--shrink40));
    position: sticky;
    top: var(--150px);

    transition: height 500ms ease-in-out;
}

.informacion-PracticeAreas p.service {
    color: white;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    margin-left: calc(100 * var(--shrink40));
    margin-bottom: calc(50 * var(--shrink40));
    padding-right: calc(50 * var(--shrink40));
}
.left-column-options .wrapper {
    border-radius: calc(30 * var(--shrink40));
    box-shadow: 0px 20px 70px -20px rgba(0, 0, 0, 0.35);
    overflow: clip;
}
.left-column-options .wrapper > .services {
    overflow: clip;
    box-sizing: border-box;
    background-color: white;
    translate: 0 calc(-30 * var(--shrink40));
    padding: 0;
    height: 0;

    transition: padding 1s ease, height 1s ease;
}
.left-column-options .wrapper > .services.active {
    padding: calc(80 * var(--shrink40)) 0 calc(30 * var(--shrink40)) 0;
    height: auto;

}
.left-column-options p.service {
    color: var(--gray);
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
    margin-left: calc(100 * var(--shrink40));
    margin-bottom: calc(50 * var(--shrink40));
    padding-right: calc(50 * var(--shrink40));
}
.left-column-options p.service:last-child {
    margin-bottom: 0;
}
article p {
    transition: opacity 500ms ease;
}
.disappear p {
    opacity: 0;
}
@media screen and (max-width: 1400px){
    .content {
        flex-direction: column;
        align-items: center;
    }
    .informacion-PracticeAreas {
        margin-top: calc(150 * var(--shrink40));

    }
    .content > * {
        width: 70%;
    }
    .right-column-info {
        display: none;
    }

}

@media screen and (max-width: 900px) {
    .content {
        padding: 0 calc(50 * var(--shrink40));
    }
    .content > * {
        width: 100%;
    }
    .content .option-PracticeAreas {
        padding-left: calc(50 * var(--shrink40));
    }
}


/* Credits by EmmanuelCerdasBrenes,_____y ______ . */