/* ============================= SECTION ARTICLES ============================= */

.list-articles {
    display: flex;
    gap: 2vw;
    flex-wrap: wrap;
    width: 100%;
    padding: 4.163vw 5.138vw 4.163vw 5.138vw;
    background: #1A1A1A;
}
.list-articles .one-article {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    width: 48%;
    height: 49vw;
    border-radius: 7px;
    position: relative;
    text-decoration: none;
    padding: 1vw 2vw 1vw 1vw;
    border: 1px solid #999999;
}
.list-articles .one-article figure {
    width: 100%;
    height: 20vw;
    position: relative;
    transition: all .5s ease-in-out;
    margin: 0 0 2vw 0;
}
.list-articles .one-article:hover figure {
    width: 85%;
    height: 20vw;
    transition: all .5s ease-in-out;
}
.list-articles .one-article figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
}

.list-articles .one-article .details .title {
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.66vw;
    line-height: 2.22vw;
    text-transform: capitalize;
    padding-bottom: 2vw;
    margin: 0;
    border-bottom: 1px solid var(--secondary-color);
    width: 60%;
    display: block;
    color: white;
    transition: all .5s ease-in-out;
}
.list-articles .one-article:hover .details .title {
    width: 100%;
    transition: all .5s ease-in-out;
}
.list-articles .one-article .details .subtitle {
    font-family: var(--font-name);
    font-weight: 900;
    font-size: 2.22vw;
    line-height: 2.77vw;
    text-transform: capitalize;
    color: white;
    display: block;
    width: 80%;
    margin-top: 2vw;
}
.list-articles .one-article .details .btns {
    display: flex;
    gap: 2vw;
    align-items: center;
    position: absolute;
    bottom: 1.5vw;
}
.list-articles .one-article .details .btns p {
    color: white;
    background: var(--secondary-color);
    padding: 1vw 2vw;
    width: fit-content;
    border-radius: 5px;
    font-size: var(--p-size);
    margin: 0;
}
.list-articles .one-article .details .btns p:nth-of-type(1) {
    background: #999999;
    color: black;
}
.list-articles .one-article .details .btns p:nth-of-type(1) i {
    color: white;
    margin-right: 1vw;
}

/* ============================= ARTICLES DETAILS ============================= */

.details-article {
    display: flex;
    flex-direction: column;
    gap: .5vw;
    background: #1A1A1A;
    padding: 10.163vw 5.138vw 0vw 5.138vw;
}
.details-article .subtitle {
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.667vw;
    line-height: 2.22vw;
    text-transform: capitalize;
    color: #FFF;
}
.details-article hr {
    color: white;
    width: 50%;
    transition: all .5s ease-in-out;
}
.details-article:hover hr {
    width: 100%;
    transition: all .5s ease-in-out;
}
.details-article .title {
    font-family: var(--font-name);
    font-weight: 900;
    font-size: 2.22vw;
    line-height: 1.666666666666667vw;
    text-transform: capitalize;
    color: #FFF;
    margin-bottom: 2.5vw;
}
.details-article .img-figure {
    margin: 0;
    width: 100%;
    height: 45.41vw;
    padding: 1.5vw;
    border: 1px solid rgba(255, 255, 255, 0.493);
    border-radius: 10px;
    position: relative;
}
.details-article .img-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: all .5s ease-in-out;
}
.details-article .img-figure:hover {
    transition: all .5s ease-in-out;
}

.details-article .details-content {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    padding: 2vw 2vw 0vw 2vw;
    color: white;
}

.details-article .details-content .content-social {
    display: flex;
    justify-content: space-between;
    gap: 1.5vw;
}
.details-article .details-content .content-social .description {
    width: 45.62vw;
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.667vw;
    line-height: 2.222vw;
    text-transform: capitalize;
}
.details-article .details-content .content-social .list-social {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    padding: 2vw;
    border-radius: 5px;
    background: linear-gradient(360deg, rgba(26, 26, 26, 0.74) 0%, #2D2D2D 100%);
}
.details-article .details-content .content-social .list-social .title {
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.66vw;
    line-height: 2.222vw;
    text-transform: capitalize;
    margin: 0;
}
.details-article .details-content .content-social .list-social p {
    display: flex;
    gap: 1.5vw;
    align-items: center;
    margin: 0;
}
.details-article .details-content .content-social .list-social p a {
    border: 1px solid rgba(255, 255, 255, 0.452);
    padding: .3511vw;
    border-radius: 5px;
    width: 2.5vw;
    height: 2.5vw;
    color: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.details-article .details-content .content-descriptif ,
.details-article .details-content .content-descriptif p{
    font-family: var(--font-name);
    font-weight: 200;
    font-size: 1.311vw;
    line-height: 2.667vw;
    text-transform: capitalize;
    color: white;
}

.other-articles {
    background: #1A1A1A;
    display: flex;
    flex-direction: column;
    color: white;
}
.other-articles .top-content {
    padding: 0vw 6.138vw 0vw 5.138vw;
    display: flex;
    justify-content: space-between;
}
.other-articles .top-content .title {
    font-family: var(--font-name);
    font-weight: 700;
    font-size: 3.33vw;
    line-height: 3.889vw;
    text-transform: capitalize;
}
.other-articles .top-content .btn-action {
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.11vw;
    line-height: 1.527vw;
    text-transform: capitalize;
    border: 1px solid white;
    padding: 1vw 2vw;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 1.5vw;
    text-decoration: none;
    color: white;
}

.x-info-contact1 {
    background: #1A1A1A; 
    padding: 4vw 13.138vw 4.163vw 13.138vw;
}
/*===================== RESPONSIVE OF HEADER__WEBSITE ===========================*/

@media (max-width:768px) {
   
    .mobile {
        padding: 7.25vw 5.138vw;
        color: white;
    }

    .list-articles {
        flex-direction: column;
        gap: 5vw;
    }
    .list-articles .one-article {
        width: 100%;
        padding: 2vw;
        height: auto;
    }
    .list-articles .one-article figure {
        width: 100%;
        height: 31vw;
    }

    .list-articles .one-article .details .title {
        font-size: 4.66vw;
        line-height: normal;
        width: 100%;
        border: 0;
    }
    .list-articles .one-article .details .btns {
        gap: 2vw;
        align-items: center;
        position: relative;
        bottom: 0;
    }
    .list-articles .one-article .details .subtitle {
        font-family: var(--font-name);
        font-weight: 100;
        font-size: 5.22vw;
        line-height: normal;
        margin-bottom: 3vw;
    }

    .list-articles .one-article .details .btns p {
        font-size: 18px;
        padding: 1vw 7vw;
    }
    .list-articles .one-article .details .btns p:nth-of-type(1) i {
        font-size: 5vw;
    }
    .list-articles .one-article .details .btns p:nth-of-type(1) span {
        font-size: 18px;
    }
    
    /*  */
    
    .details-article {
        padding : 28.163vw 5.138vw 0vw 5.138vw;
    }
    .details-article .subtitle {
        font-size: 6.667vw;
        line-height: normal;
    }
    .details-article .title {
        font-weight: 300;
        font-size: 5.22vw;
        line-height: normal;
    }
    .details-article .img-figure {
        margin: 0;
        height: 45.41vw;
        padding: 0;
    }
    .details-article .details-content .content-social {
        display: flex;
        flex-direction: column;
    }
    .details-article .details-content .content-social .description {
        font-family: var(--font-name);
        font-weight: 400;
        font-size: 4.311vw;
        line-height: normal;
        width: 100%;
    }
    .details-article .details-content .content-social .list-social {
        display: flex;
        flex-direction: column;
        gap: 3vw;
        padding: 3vw;
    }
    .details-article .details-content .content-social .list-social .title {
        font-size: 4.66vw;
        line-height: normal;
    }
    .details-article .details-content .content-social .list-social p {
        gap: 8.5vw;
        line-height: normal;
    }
    .details-article .details-content .content-social .list-social p a {
        border: none;
        width: auto;
        height: auto;
    }
    .details-article .details-content .content-social .list-social p a i {
        font-size: 7vw;
    }
    .details-article .details-content .content-descriptif, .details-article .details-content .content-descriptif p {
        font-size: 4.311vw;
        line-height: normal;
    }

    .other-articles .top-content {
        padding: 3vw 5.138vw 0vw 5.138vw;
    }
    .other-articles .top-content .title {
        font-weight: 700;
        font-size: 5.33vw;
        line-height: normal;
    }
    .other-articles .top-content .btn-action {
        font-weight: 400;
        font-size: 4.11vw;
        line-height: normal;
    }
    .other-articles .top-content .btn-action i {
        font-size: 3vw;
    }

    .x-info-contact1 {
        background: #1A1A1A; 
        padding: 5vw;
    }

}