/* ============================= SECTION ONE ============================= */

.section-one {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    padding: 6.944vw 5.138vw 4.163vw 5.138vw; 
    background: #effaec;  
}
.section-one .title {
    font-family: var(--font-name);
    font-weight: 700;
    font-size: 3.33vw;
    line-height: 3.88vw;
    text-align: center;
    text-transform: capitalize;
    color: #0071BC;
}
.section-one .descr {
    width: 100%;
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.66vw;
    line-height: 2.22vw;
    text-align: center;
    text-transform: capitalize;
}
.section-one figure {
    width: 87.63vw;
    height: 47.77vw;
    margin-top: 3vw;
}
.section-one figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.section-one .list-avt {
    display: flex;
    gap: 3.33vw;
    justify-content: flex-start;
}
.section-one .list-avt hr {
    color: #999999;
    background-color: currentColor;
    border: 0;
    opacity: 1;
    font-size: 3vw;
    width: .1vw;
    height: 7vw;
    margin: 0;
}
.section-one .list-avt .one-avt {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    width: 20vw;
}
.section-one .list-avt .one-avt span.img {
    width: 3.46vw;
    height: 3.55vw;
}
.section-one .list-avt .one-avt span.img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.section-one .list-avt .one-avt span.name {
    font-family: var(--font-name);
    font-weight: 900;
    font-size: 1.82vw;
    line-height: 2.77vw;
    text-transform: capitalize;
    color: #2D2D2D;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.section-one .list-avt .one-avt span.name i {
    font-size: 1.3vw;
    margin-left: 1vw;
}
.section-one .list-avt .one-avt span.nameDescr {
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.11vw;
    line-height: 1.66vw;
    text-transform: capitalize;
    color: #2D2D2D;
}

/* ============================= SECTION TWO ============================= */

.section-two {
    padding: 4.944vw 5.138vw 4.163vw 5.138vw; 
    background: #FFF;
}
.section-two .content {
    background: linear-gradient(360deg, rgb(239 250 236) 0%, #ebffe6 100%);
    border-radius: 10px;
    padding: 3.58vw 6.45vw;
    display: flex;
    flex-direction: column;
    gap: 4.3vw;
}
.section-two .content .title {
    margin-top: 0vw;
    font-family: var(--font-name);
    font-weight: 800;
    font-size: 3.33vw;
    /* font-size: 4.444vw; */
    line-height: 4.86vw;
    text-align: center;
    text-transform: capitalize;
    color: #0071BC;
}
.section-two .content .title-sub {
    font-family: var(--font-name);
    font-weight: 300;
    font-size: 2.444vw;
    padding-left: 2.66vw;
    margin-bottom: -2vw;
    color: #0071BC;
}

.section-two .content .card-details {
    display: flex;
    gap: 2.638vw;
}
.section-two .content .card-details.reverse {
    flex-direction: row-reverse;
}

.section-two .content .card-details .left-ctn {
    display: flex;
    flex-direction: column;
    gap: 4.16vw;
    border-left: 1px solid #0071BC;
}
.section-two .content .card-details .left-ctn .one-avt {
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    position: relative;
    padding-left: 2.66vw;
}
.section-two .content .card-details .left-ctn .one-avt::after {
    position: absolute;
    content: "";
    top: 0;
    left: -1vw;
    border-radius: 50%;
    width: 2vw;
    height: 2vw;
    display: block;
    background: #999999;
}
.section-two .content .card-details .left-ctn .one-avt .descr {
    color: #676262;
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.11vw;
    line-height: 1.66vw;
    text-transform: capitalize;
}
.section-two .content .card-details .left-ctn .one-avt .name {
    font-family: var(--font-name);
    font-weight: 900;
    font-size: 2.22vw;
    line-height: 2.77vw;
    text-transform: capitalize;
    color: #000000;
}

.section-two .content .card-details .right-ctn {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}
.section-two .content .card-details .right-ctn figure {
    width: 38.61vw;
    height: 36.66vw;
    border-radius: 20px;
    position: relative;
}
.section-two .content .card-details .right-ctn figure::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0vw;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    display: block;
    background: #00000033;
}
.section-two .content .card-details .right-ctn figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section-two .content .card-details .right-ctn a {
    background: var(--secondary-color);
    color: white;
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.11vw;
    line-height: 1.52vw;
    text-align: center;
    text-transform: capitalize;
    border-radius: 5px;
    width: fit-content;
    text-decoration: none;
    padding: 1vw 2vw;
}

/*===================== RESPONSIVE OF HEADER__WEBSITE ===========================*/

@media (max-width:768px) {
   
    .section-one .title {
        font-weight: 700;
        font-size: 6.33vw;
        line-height: normal;
    }
    .section-one .descr {
        font-weight: 400;
        font-size: 4.66vw;
        line-height: normal;
    }
    .section-one figure img {
        object-fit: cover;
    }
    .section-one figure {
        width: 100%;
        height: 73.77vw;
        margin-top: 3vw;
    }
    .section-one .list-avt {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* deux colonnes */
        gap: 5vw 3vw; /* espace entre les blocs */
    }
    .section-one .list-avt .one-avt {
        width: 100%;
    }
    .section-one .list-avt .one-avt span.name i {
        font-size: 7.3vw;
        margin-left: 4vw;
        margin-bottom: 3vw;
    }
    .section-one .list-avt .one-avt span.img {
        width: 9.46vw;
        height: 9.55vw;
    }
    .section-one .list-avt .one-avt span.name {
        font-weight: 800;
        font-size: 5.22vw;
        line-height: normal;
    }
    .section-one .list-avt .one-avt span.nameDescr {
        font-weight: 200;
        font-size: 4.11vw;
        line-height: normal;
    }
    
    .section-two .content .card-details.reverse {
        flex-direction: column;   
    }
    .section-two .content {
        gap: 0;
    }
    .section-two .content .title {
        margin-top: 0vw;
        font-weight: 800;
        font-size: 6.444vw;
        line-height: normal;
        margin-bottom: 3vw;
    }
    .section-two .content .title-sub {
        font-size: 5.444vw;
        margin-top: 2vw;
    }
    .section-two .content .card-details .left-ctn .one-avt .name {
        padding-left: 4.66vw;    
    }
    .section-two .content .card-details .left-ctn .one-avt .name {
        font-weight: 900;
        font-size: 5.22vw;
        line-height: normal;
    }
    .section-two .content .card-details .left-ctn .one-avt .descr {
        font-family: var(--font-name);
        font-weight: 400;
        font-size: 4.11vw;
        line-height: normal;
        padding-left: 4.66vw;
    }
    .section-two .content .card-details .left-ctn .one-avt::after {
        left: -2vw;
        width: 4vw;
        height: 4vw;
    }
    .section-two .content .card-details .right-ctn a {
        font-weight: 400;
        font-size: 5.11vw;
        line-height: normal;
        width: fit-content;
        padding: 3vw 5vw;
    }

}