/* ============================= SECTION FIRST ============================= */

.section-first {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
}

.section-first .img-relative {
    width: 100%;
    height: 100vh;
    display: block;
    position: absolute;
    z-index: 2;
}
.section-first .img-relative::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 2;
    background: linear-gradient(215.4deg, rgba(106, 209, 67, 0.69) 16.68%, rgba(0, 173, 239, 0.69) 83.32%);
}
.section-first .img-relative img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0;
    transition: opacity 1s; 
}
.section-first .img-relative img.active {
    opacity: 1;
    transition: opacity 1s; 
}

.section-first .content-details ,
.section-first .btn-action {
    position: relative;
    z-index: 3;
}
.section-first .content-details  {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25vw;
    color: white;
    margin-bottom: 2.77vw;
}
.section-first .content-details .title {
    font-family: var(--font-name);
    font-weight: 800;
    font-size: 4.444vw;
    line-height: 4.861vw;
    letter-spacing: normal;
    text-align: center;
    text-transform: uppercase;
    width: 63.4027vw;
    color: white;
}
.section-first .content-details .descr {
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 2.77777vw;
    line-height: 3.333vw;
    letter-spacing: normal;
    text-align: center;
    /* text-transform: capitalize; */
    width: 76.458vw;
}

.section-first .btn-action {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.1111vw;
}
.section-first .btn-action a {

    width: 17.013vw;
    border-radius: 0.69vw;
    border: 1px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.0416vw;
    color: white;
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.51vw;
    line-height: 1.527vw;
    letter-spacing: normal;
    text-align: center;
    /* text-transform: capitalize; */
    text-decoration: none;
    /* padding: 1.9vw 0; */
    height: 4.5vw;
    transition: all .5s ease-in-out;
}
.section-first .btn-action a.one-action {
    background: #00ADEF;
    border: 1px solid #00ADEF;
}
.section-first .btn-action a.two-action {
    border-color: #CCCCCC;
}
.section-first .btn-action a.two-action:hover {
    transition: all .5s ease-in-out;
    background: #00ADEF;
}
.section-first .btn-action a.two-action .icon i {
    font-size: 2.15vw;
}

/* SECTION VIDEO */

.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    /* display: flex; */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    display: none;
}

.video-overlay video,
.video-overlay iframe {
    max-width: 100%;
    max-height: 100%;
}

.video-close {
    position: absolute;
    bottom: 20%;
    right: 0;
    left: 0;
    margin: 0 auto;
    color: white;
    font-size: 24px;
    cursor: pointer;
    background: transparent;
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    /* border: 3px solid var(--secondary-color); */
    border: 3px solid white;
    /* z-index: 10000; */
}
.video-close::after {
    content: "\f057"; 
    font-family: "Font Awesome 6 Free";
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 100%;
    height: 100%;
    color: rgb(190, 73, 73);
    font-size: 3vw;
    font-weight: 800;
    position: absolute;
    z-index: 10000;
}

/* ============================= SECTION SECUND ============================= */

.section-secund {
    display: flex;
    flex-direction: column;
    padding-top: 8.333vw;
    background: #f1fcee;
    /* height: 86vw; */
    position: relative;
}
.section-secund .title {
    font-family: var(--font-name);
    font-weight: 800;
    font-size: 4.444vw;
    line-height: 4.86vw;
    text-transform: uppercase;
    color: var(--secondary-color);
    padding: 1.25vw 5.138vw;   
    z-index: 5;
    position: relative;
}
.section-secund .descr {
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.666vw;
    line-height: 2.22vw;
    text-transform: capitalize;
    color: var(--black-color);
    padding: 1.25vw 5.138vw;   
    position: relative;
    z-index: 5;
}
.section-secund .describe-avt {
    width: 100%;
    padding: 1.25vw 5.138vw;   
    padding-top: 15vw;
    transition: all 0.6s ease-out;
}
.section-secund .describe-avt.hidden {
    opacity: 0;
    transform: translateY(5vw);
    transition: all 0.6s ease-out;
}
.section-secund .describe-avt.visible {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s ease-out;
}
.section-secund .describe-avt .img-motor {
    width: auto;
    height: 40vw;
    display: block;
    position: relative;
    transition: all 5s ease-in-out;
}
.section-secund .describe-avt.hidden .img-motor {
    height: 10vw;
    transition: all 5s ease-in-out;
}
.section-secund .describe-avt.visible .img-motor {
    height: 40vw;
    transition: all 5s ease-in-out;
}
.section-secund .describe-avt .img-motor::after {
    content: "";
    position: absolute;
    width: 50vw;
    height: 50vw;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    border-radius: 50%;
    z-index: 2;
    background: linear-gradient(180deg, #EDEDED 0%, #FFFEFE 100%);
    animation: pulseCircle 3s ease-in-out infinite;
}
.section-secund .describe-avt .img-motor::before {
    content: "";
    position: absolute;
    width: 60vw;
    height: 60vw;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    border-radius: 50%;
    z-index: 1;
    background: linear-gradient(180deg, rgba(237, 237, 237, 0.66) 0%, rgba(255, 254, 254, 0.66) 100%);
    animation: pulseCircle 4s ease-in-out infinite;
}

@keyframes pulseCircle {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

.section-secund .describe-avt .img-motor img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 5;
    position: relative;
}

.section-secund .describe-avt .img-motor a.visible {
    opacity: 1;
    animation: showText 5s linear;
}
.section-secund .describe-avt .img-motor .one-avt {
    position: absolute; 
    top: -20vw; 
    z-index: 3; 
    right: 13vw; 
    text-decoration: none;
    transition: all 0.6s ease-out;
}
/* .section-secund .describe-avt .img-motor .one-avt.hidden {
    opacity: 1;
    transition: all 0.6s ease-out;
} */
.section-secund .describe-avt .img-motor .one-avt span {
    bottom: -10vw; left: 6vw; display: block; position: relative; width: 13vw; font-size: 1.25vw; color: black;
}
.section-secund .describe-avt .img-motor .two-avt {
    position: absolute; top: -1vw; z-index: 3; left: 15vw; text-decoration: none;
}
.section-secund .describe-avt .img-motor .two-avt span {
    bottom: -10vw; left: -8vw; display: block; position: relative; width: 13vw; font-size: 1.25vw; color: black;
}
.section-secund .describe-avt .img-motor .three-avt {
    position: absolute; bottom: -4vw; z-index: 3; right: 35vw; text-decoration: none;
}
.section-secund .describe-avt .img-motor .three-avt span {
    bottom: -25vw; left: 12vw; display: block; position: relative; width: 11vw; font-size: 1.25vw; color: black;
}

.section-secund .marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    background: transparent;
    margin-top: 13vw;
    margin-bottom: 4vw;
}
.section-secund .marquee-container .list-avt {
    font-family: var(--font-name);
    font-weight: 800;
    font-size: 6.66vw;
    line-height: normal;
    /* line-height: 5.555vw; */
    text-transform: uppercase;
    color: #CCCCCC;

    display: inline-block;
    padding-left: 100%; /* Commence hors écran */
    animation: scroll-left 25s linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes showText {
    0% {
        opacity: 0;
    }
    75% { opacity: 0; }
    100% {
        opacity: 1;
    }
}


/* ============================= SECTION THIRD ============================= */

.section-third {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding-top: 4.163vw;
    padding: 4.163vw 5.138vw 4.163vw 5.138vw;   
    /* background: #2D2D2D;
     background: linear-gradient(0deg, black, #f1fcee); */
    background: linear-gradient(0deg, #ffffff, #f1fcee);
    
    
    /* height: 86vw; */
    position: relative;
}
.section-third .title {
    font-family: var(--font-name);
    font-weight: 700;
    font-size: 3.33vw;
    line-height: 3.88vw;
    text-transform: uppercase;
    color: var(--secondary-color);
    z-index: 5;
    margin-bottom: 0.972vw;
    position: relative;
}
.section-third .descr {
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.944vw;
    line-height: 2.5vw;
    text-transform: capitalize;
    color: var(--black-color);
    position: relative;
    z-index: 5;
    /* color: white; */
}

.section-third .list-model {
    display: flex;
    align-items: end;
    /* justify-content: center; */
    gap: 2.822vw;
    margin-top: 5.138vw;

    overflow: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    max-width: 100vw;
}

.section-third .list-model .one-model {
    display: flex;
    flex-direction: column;
    gap: 2.22vw;
    text-decoration: none;
    flex: 0 0 auto;
    scroll-snap-align: center;
    /* width: 60vw; */
    width: 26.25vw;
}
.section-third .list-model .one-model .titleModel {
    font-family: var(--font-name);
    font-weight: 800;
    font-size: 3.33vw;
    line-height: 3.88vw;
    text-align: center;
    text-transform: capitalize;
    /* color: white; */
    color: black;
    opacity: 0;
    transform: translateY(-10vw);
    transition: all .5s ease-in-out;    
}
.section-third .list-model .one-model.active .titleModel {
    opacity: 1;
    transform: translateY(0vw);
    transition: all .5s ease-in-out;    
}

.section-third .list-model .one-model .details-model {
    width: 26.25vw;
    height: 26.111vw;
    border-radius: 1.388vw;
    position: relative;
    background: linear-gradient(360deg, rgba(45, 45, 45, 0.74) 0%, #1A1A1A 100%);
}
.section-third .list-model .one-model.active .details-model {
    width: 27.54vw;
    height: 39.930vw;
    transition: all .5s ease-in-out;
    display: flex;
    flex-direction: column;
    gap: 2vw;
    padding: 0;
    position: relative;
    box-shadow: 4px 4px 28px 0px #00000026;
}
.section-third .list-model .one-model.active .details-model .img-moto {
    width: 27.54vw;
    height: 39.930vw;
    position: relative;
    display: block;
    border: 0px solid var(--secondary-color);
    border-radius: 0;
    transition: all .5s ease-in-out;
    background: transparent;
}
.section-third .list-model .one-model.active:hover .details-model .img-moto {
    height: 11.180vw;
    width: 100%;
    border: 1px solid var(--secondary-color);
    transition: all .5s ease-in-out;
    background: #f1fcee;
    border-radius: 1.388vw;
}
.section-third .list-model .one-model .details-model .img-moto img,
.section-third .list-model .one-model.active .details-model .img-moto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: all .5s ease-in-out;
}
.section-third .list-model .one-model.active:hover .details-model .img-moto img {
    object-fit: cover;
    transition: all .5s ease-in-out;
}
.section-third .list-model .one-model .details-model p {
    display: none;
}
.section-third .list-model .one-model.active .details-model p {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    opacity: 0;
    transform: translateY(-25vw);
    transition: all .5s ease-in-out;
    /* margin-bottom: 0.55vw; */
}
.section-third .list-model .one-model.active:hover .details-model p {
    opacity: 1;
    transform: translateY(0);
    transition: all .5s ease-in-out;
    /* margin-bottom: 0.55vw; */
}
.section-third .list-model .one-model.active .details-model p .name {
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.666vw;
    line-height: 2.222vw;
    text-transform: capitalize;
    color: #CCCCCC;
}
.section-third .list-model .one-model.active .details-model p .subname {
    font-family: var(--font-name);
    font-weight: 900;
    font-size: 2.222vw;
    line-height: 2.77vw;
    text-transform: capitalize;
    color: #2D2D2D;
}
.section-third .list-model .one-model.active:hover .details-model {
    background: white !important;
    padding: 1.52vw 1.73vw;
    transition: all .5s ease-in-out;
}

.section-third .list-direction {
    display: flex;
    justify-content: center;
    gap: 2.33vw;
    align-items: center;
    margin-top: 4vw;
}
.section-third .list-direction .btndirection {
    padding: 1vw 2vw;
    color: var(--secondary-color);
    border: 1px solid #CCCCCC;
    border-radius: 0.944vw 0.69vw 0.944vw 0.69vw;
    transition: all .5s ease-in-out;
    cursor: pointer;
}
.section-third .list-direction .btndirection:hover {
    background: white;
    color: black;
    transition: all .5s ease-in-out;
}
.section-third .list-direction a {
    background: var(--secondary-color);
    color: white;
    text-decoration: none;
    padding: 1vw 2vw;
    border: 1px solid white;
    border-radius: 0.944vw 0.69vw 0.944vw 0.69vw;
    transition: all .5s ease-in-out;
}
.section-third .list-direction a:hover {
    background: transparent;
    color: var(--secondary-color);
    transition: all .5s ease-in-out;
}

/* ============================= SECTION FOUR ============================= */

.section-four {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2vw;
    padding-top: 4.163vw;
    padding: 4.163vw 5.138vw 4.163vw 5.138vw;   
    background: #FFF;
    
    /* height: 86vw; */
    position: relative;
    transition: all .5s ease-in-out;

}
.section-four .title {
    font-family: var(--font-name);
    font-weight: 700;
    font-size: 3.33vw;
    line-height: 3.88vw;
    text-align: center;
    text-transform: capitalize;
    color: var(--secondary-color);
    margin-bottom: 2vw;
}
.section-four .list-avantages {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 3vw;
    box-shadow: 4px 4px 28px 0px #00000026;
    /* background: #2D2D2D; */
    background: white;
    padding: 2vw 1vw;
    border-radius: 1.38vw;
    transition: all .5s ease-in-out;
}
.section-four .list-avantages hr {
    color: #999999;
    background-color: currentColor;
    border: 0;
    opacity: 1;
    font-size: 3vw;
    width: .1vw;
    height: 10vw;
    margin: auto 0;
}
.section-four .list-avantages .one-avt {
    display: flex;
    flex-direction: column;
    align-items: center;   
    justify-content: flex-start;
    gap: 2vw;
    width: 20.83vw;
    height: -webkit-fill-available;
    padding: 2vw 0 1vw 0;
    border-radius: 1.38vw;
    /* background: linear-gradient(199.35deg, #2D2D2D, #2D2D2D); */
    background: linear-gradient(199.35deg, #f1fcee, #ffffff);
    transition: all 0.5s ease-in-out;
    animation: opacityBackGroundReverse .5s linear ;
}
.section-four .list-avantages .one-avt:hover {
    border-radius: 1.38vw;
    background: linear-gradient(199.35deg, rgba(0, 173, 239, 0.69) 8.34%, rgba(106, 209, 67, 0.69) 91.66%);
    transition: all 0.5s ease-in-out;
    animation: opacityBackGround .5s linear ;
}
@keyframes opacityBackGround {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes opacityBackGroundReverse {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

.section-four .list-avantages .one-avt .img {
    width: 8.333vw;
    height: 8.333vw;
    padding: 2vw;
    background: #0e4053;
    box-shadow: 0px 4px 14px 0px #000000E0;
    border-radius: 10px;
    /* transition: all .5s ease-in-out; */
}
.section-four .list-avantages .one-avt .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: invert(58%) sepia(36%) saturate(7364%) hue-rotate(165deg) brightness(101%) contrast(106%);
    /* transition: all .5s ease-in-out; */
}
.section-four .list-avantages .one-avt .subtitle {
    font-family: var(--font-name);
    font-weight: 300;
    font-size: 1.31vw;
    line-height: 2.222vw;
    text-align: center;
    text-transform: capitalize;
    color: black;
    width: 16.333vw;
    transition: all .5s ease-in-out;
}
.section-four .list-avantages .one-avt:nth-of-type(4) .subtitle {
    width :11.5vw;
    transition: all .5s ease-in-out;
}

/* ============================= SECTION FIVE ============================= */

.section-five {
    background: #2D2D2D;
    padding: 4.163vw 5.138vw 4.163vw 5.138vw; 
    position: relative;  
}
.section-five figure {
    position: relative;
    width: 100%;
    height: 70.79vw;
    z-index: 2;
    border-radius: 10px;
}
.section-five figure::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: radial-gradient(118.36% 118.36% at 50% -18.36%, #1A1A1A 0%, rgba(14, 14, 14, 0.24) 47.6%, #040404 100%);
}
.section-five figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.section-five .content-details {
    position: absolute;
    margin: 4.163vw 5.138vw 4.163vw 0vw;
    display: flex;
    z-index: 3;
    top: 0;
}
.section-five .content-details .left-ctn {
    padding: 9.93vw 0 0 4.375vw;
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
}
.section-five .content-details .left-ctn .title {
    font-family: var(--font-name);
    font-weight: 700;
    font-size: 3.33vw;
    line-height: 3.88vw;
    text-transform: capitalize;
    color: var(--secondary-color);
}
.section-five .content-details .left-ctn .descr {
    margin-bottom: 2vw;
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.944vw;
    line-height: 2.5vw;
    text-transform: capitalize;
    color: white;
}
.section-five .content-details .left-ctn a {
    background: var(--secondary-color);
    padding: .8vw 2vw;
    color: white;
    border-radius: 7px;
    width: fit-content;
    text-decoration: none;
}

.section-five .content-details .right-ctn {
    width: 46.25vw;
    margin-left: 5.138vw;
    margin-top: 9.93vw;
    background: linear-gradient(352.06deg, #040404 23.96%, #2D2D2D 93.88%);
    padding: 5.76vw 4.76vw;
    border-radius: 15px;
    color: white;
    height: 100%;
    line-height: 2.22vw;
}
.section-five .content-details .right-ctn p ,
.section-five .content-details .right-ctn p span {
    font-family: var(--font-name);
    font-weight: 300;
    font-size: 1.66vw;
    line-height: 3.22vw;
    text-transform: capitalize;
    background: none !important;
}

/* ============================= SECTION SIX ============================= */

.section-six {
    background: #2D2D2D;
    position: relative; 
    height: 51.11vw;
    /* height: 100vh; */
    overflow: hidden;
}
.section-six figure {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.section-six figure.fig::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(24.96deg, rgba(106, 209, 67, 0.69) 10.7%, rgba(0, 173, 239, 0.69) 86.57%);
}
.section-six figure.fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: all .5s ease-in-out;
}
.section-six:hover figure.fig img {
    transform: scale(1.2);
    transition: all .5s ease-in-out;
}

.section-six .content-details {
    padding: 4.163vw 5.138vw 4.163vw 5.138vw; 
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    top: 0;
    z-index: 3;
    gap: 7.430vw;
}

.section-six .content-details .left-ctn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5vw;
    width: 41.48vw;
}
.section-six .content-details .left-ctn .title {
    font-family: var(--font-name);
    font-weight: 800;
    font-size: 4.444vw;
    color: white;
    line-height: 4.86vw;
    text-transform: uppercase;
}
.section-six .content-details .left-ctn .descr {
    font-family: var(--font-name);
    font-weight: 300;
    font-size: 1.94vw;
    line-height: 2.5vw;
    color: white;
    text-transform: capitalize;
}
.section-six .content-details .left-ctn .details {
    font-family: var(--font-name);
    font-weight: 300;
    font-size: 1.11vw;
    line-height: 1.8vw;
    color: white;
    text-transform: capitalize;
    margin-bottom: 2vw;
}
.section-six .content-details .left-ctn a {
    padding: 1vw 3vw;
    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;
    width: fit-content;
    text-decoration: none;
    border-radius: 10px;
    text-transform: capitalize;
}

.section-six .content-details .right-ctn {
    width: 42.87vw;
    height: 40.103vw;
    display: flex;
    align-items: end;
    justify-content: center;
}
.section-six .content-details .right-ctn figure {
    width: 32.17vw;
    height: 32.08vw;
    position: relative;
    /* border: 2px solid white; */
    box-shadow: 4px 4px 28px 0px #00000026;
    transform: rotate(2.08deg);
    z-index: 5;
}
.section-six .content-details .right-ctn figure::after,
.section-six .content-details .right-ctn figure::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    box-shadow: 4px 4px 28px 0px #00000026;
}
.section-six .content-details .right-ctn figure::before {
    background: linear-gradient(360deg, #2D2D2D 0%, rgba(26, 26, 26, 0.74) 100%);
    transform: rotate(7.45deg);
    z-index: -1;
    border-radius: 10px;
    top: -2vw;
}
.section-six .content-details .right-ctn figure::after {
    background: linear-gradient(360deg, #2D2D2D 0%, rgba(26, 26, 26, 0.74) 100%);
    z-index: -1;
    transform: rotate(-17.03deg);
    border-radius: 10px;
    top: -4vw;
}
.section-six .content-details .right-ctn figure img {
    width: 100%;
    height: 100%;
    border: 2px solid #EDEDED;
    border-radius: 10px;
    transition: all .5s ease-in-out;
    object-fit: cover;   
}

/* ============================= SECTION SEVEN ============================= */

.section-seven {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    background: #2D2D2D;
    padding: 4.163vw 5.138vw 4.163vw 5.138vw; 
}

.section-seven .title {
    font-family: var(--font-name);
    font-weight: 800;
    font-size: 3.33vw;
    line-height: normal;
    letter-spacing: normal;
    text-transform: uppercase;
    width: 100%;
    margin-bottom: 1.5vw;
    color: var(--secondary-color);
}

.section-seven .list-blog {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    width: 100%;
}
.section-seven .list-blog .one-article {
    width: 100%;
    border: 1px solid #999999;
    padding: 1vw 2vw 1vw 1vw;
    border-radius: 5px;
    display: flex;
    gap: 4vw;
    text-decoration: none;
    transition: all .5s ease-in-out;
}
.section-seven .list-blog .one-article:hover {
    /* padding: 1vw 2vw 1vw 1vw; */
    transition: all .5s ease-in-out;
}
.section-seven .list-blog .one-article figure {
    width: 52.29vw;
    height: 29.44vw;
    transition: all .5s ease-in-out;
    position: relative;
}
.section-seven .list-blog .one-article figure::after {
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 5px;
    z-index: 3;
    background: linear-gradient(24.96deg, rgb(106 209 67 / 7%) 10.7%, rgb(0 173 239 / 33%) 86.57%);
}
.section-seven .list-blog .one-article:hover figure {
    width: 40vw;
    /* height: 25vw; */
    transition: all .5s ease-in-out;
}
.section-seven .list-blog .one-article figure img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    object-fit: cover;
}
.section-seven .list-blog .one-article .details {
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    position: relative;
}
.section-seven .list-blog .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%;
    color: white;
    transition: all .5s ease-in-out;
}
.section-seven .list-blog .one-article:hover .details .title {
    width: 100%;
    transition: all .5s ease-in-out;
}
.section-seven .list-blog .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;
    width: 80%;
}
.section-seven .list-blog .one-article .details .btns {
    display: flex;
    gap: 2vw;
    align-items: center;
    margin-bottom: 1.5vw;
    position: absolute;
    bottom: 0;
}
.section-seven .list-blog .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);
}
.section-seven .list-blog .one-article .details .btns p:nth-of-type(1) {
    background: #999999;
    color: black;
}
.section-seven .list-blog .one-article .details .btns p:nth-of-type(1) i {
    color: white;
    margin-right: 1vw;
}

.section-seven .list-blog .articles {
    display: flex;
    gap: 2vw;
    flex-wrap: nowrap;
    width: 100%;
}
.section-seven .list-blog .articles .one-article {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 57vw;
    position: relative;
}
.section-seven .list-blog .articles .one-article figure {
    width: 100%;
    height: 27vw;
    transition: all .5s ease-in-out;
}
.section-seven .list-blog .articles .one-article:hover figure {
    width: 85%;
    height: 27.91vw;
    transition: all .5s ease-in-out;
}
.section-seven .list-blog .articles .one-article .details {
    height: 100%;
}
.section-seven .list-blog .articles .one-article .details .btns {
    margin-bottom: 0;
}
.section-seven .list-blog .articles .one-article .details .btns p {
    margin-bottom: 0;
}

/* ============================= SECTION SEVEN ============================= */

.section-temoignages {
    display: flex;
    flex-direction: row;
    gap: 5vw;
    background: #f1fcee;
    padding: 4.163vw 5.138vw 4.163vw 5.138vw; 
    align-items: center;
}

.section-temoignages .left-content {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    width: 60vw;
}
.section-temoignages .title {
    font-family: var(--font-name);
    font-weight: 800;
    font-size: 3.33vw;
    line-height: normal;
    letter-spacing: normal;
    text-transform: uppercase;
    width: 100%;
    margin-bottom: 1.5vw;
    color: var(--secondary-color);
}

.section-temoignages .left-content .details {
    font-size: 1.15vw;
    line-height: 2vw;
    letter-spacing: normal;
}

.section-temoignages .right-content {
    display: flex;
    flex-direction: column;
    gap: 2.5vw;
    width: 100%;
}
.section-temoignages .right-content .one-temoignage {
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    width: 35vw;
    background: white;
    padding: 1.5vw 2vw;
    border-radius: .5vw;
    position: relative;
    border-left: 5px solid #7b7b7b;
    animation: testimonialPulse 9s ease-in-out infinite;
    transition: all 0.5s ease;
}
@keyframes testimonialPulse {
  0%, 80%, 100% {
    transform: scale(1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border-left-color: #7b7b7b; /* gris (inactif) */
  }
  30%, 50% {
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-left-color: #00ADEF; /* bleu (actif) */
  }
}
.section-temoignages .right-content .one-temoignage:nth-child(2) {
    animation-delay: 3s;
}
.section-temoignages .right-content .one-temoignage:nth-child(3) {
    animation-delay: 6s;
}


.section-temoignages .right-content .one-temoignage:nth-child(2) {
    left: 8vw;
}
.section-temoignages .right-content .one-temoignage .name-customer {
    font-weight: 700;
    color: #00ADEF;
    font-size: 1.7vw;
    width: 100%;
    position: relative;
    display: block;
}
.section-temoignages .right-content .one-temoignage .parole {
    font-size: 1.2vw;
}
.section-temoignages .right-content .one-temoignage .name-customer::before {
    position: absolute;
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    font-size: 3vw;
    right: 0;
    bottom: 4vw;
    height: -webkit-fill-available;
    color: #7b7b7b;
}

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

@media (max-width:768px) {

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

    .section-first .content-details {
        gap: 7.25vw;
    }
    .section-first .content-details .title {
        font-size: 5.444vw;
        line-height: normal;
        width: 98%;
        color: white;
    }
    .section-first .content-details .descr {
        font-size: 5.77777vw;
        line-height: normal;
        margin-bottom: 4vw;
    }
    
    .section-first .img-relative::after {
        z-index: 3;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        background: #00000040;
    }
   
    .section-first .btn-action {
        gap: 9.1111vw;
        flex-direction: column;
    }
    .section-first .btn-action a {
        width: 100%;
        gap: 3.0416vw;
        font-size: 5.51vw;
        line-height: normal;
        padding: 2.9vw 5vw;
        height: auto;
    }
    .section-first .btn-action a.two-action .icon i {
        font-size: 8.15vw;
    }

    .video-close {
        width: 11vw;
        height: 11vw;
    }
    .video-close::after {
        font-size: 8vw;
    }

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

    .section-secund .title {
        font-size: 6.444vw;
        line-height: normal;
    }
    .section-secund .descr {
        font-weight: 300;
        font-size: 4.666vw;
        line-height: normal;
    }
    .section-secund .describe-avt.visible .img-motor {
        height: 71vw;
    }
    .section-secund .describe-avt .img-motor svg {
        display: none;
    }
    .section-secund .describe-avt .img-motor .one-avt {
        right: inherit;
        display: flex;
        flex-direction: column;
        gap: 2vw;
        top: -32vw;
    }
    .section-secund .describe-avt .img-motor .one-avt span {
        width: 100%;
        font-size: 4.25vw;
        font-weight: 300;
        left: 0;
    }
    .section-secund .describe-avt {
        padding-top: 24vw;
    }
    .section-secund .marquee-container .list-avt {
        font-size: 9.66vw;
        line-height: normal;
    }
    
    /* ============================= SECTION THIRD ============================= */

    .section-third {
        padding: 8.163vw 5.138vw 9.163vw 5.138vw;
    }
    .section-third .title {
        font-size: 6.444vw;
        line-height: normal;
    }
    .section-third .descr {
        font-weight: 300;
        font-size: 4.666vw;
        text-align: center;
        line-height: normal;
    }
    .section-third .list-model .one-model .titleModel {
        font-weight: 500;
        font-size: 6.33vw;
        line-height: normal;
    }

    .section-third .list-model .one-model {
        width: 100%;
    }
    .section-third .list-model .one-model.active .details-model {
        width: 90%;
        height: 117.93vw;
        margin: 0 0vw 0 5vw;
    }
    .section-third .list-model .one-model.active .details-model .img-moto {
        width: 100%;
        height: 100%;
    }
    .section-third .list-model .one-model .details-model .img-moto img, .section-third .list-model .one-model.active .details-model .img-moto img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .section-third .list-model .one-model.active:hover .details-model .img-moto {
        height: 56.18vw;
    }
    .section-third .list-model .one-model.active .details-model p {
        gap: 3vw;
    }
    .section-third .list-model .one-model.active .details-model p .name {
        font-weight: 400;
        font-size: 5.666vw;
        line-height: normal;
        color: #918585;
    }
    .section-third .list-model .one-model.active .details-model p .subname {
        font-size: 4.222vw;
        line-height: normal;
    }
    .section-third .list-direction .btndirection {
        padding: 3vw 4vw;
    }
    .section-third .list-direction .btndirection i {
        font-size: 5vw;
    }
    .section-third .list-direction a {
        color: white;
        padding: 2vw 2vw;
        font-weight: 300;
        font-size: 5vw;
    }

    /* ============================= SECTION TEMOIGNAGES ============================= */
    

    .section-temoignages {
        display: flex;
        flex-direction: column;
        gap: 5vw;
        padding: 4.163vw 5.138vw;
        align-items: flex-start;
    }
    .section-temoignages .left-content {
        display: flex;
        flex-direction: column;
        gap: 2vw;
        width: 100%;
    }
    .section-temoignages .title {
        font-family: var(--font-name);
        font-weight: 800;
        font-size: 5.33vw;
    }
    .section-temoignages .left-content .details {
        display: none;
    }
    .section-temoignages .right-content .one-temoignage {
        display: flex;
        flex-direction: column;
        gap: 1.5vw;
        width: 87vw;
        background: white;
        padding: 4.5vw 4vw;
    }
    .section-temoignages .right-content .one-temoignage .name-customer {
        font-weight: 700;
        color: rgb(0, 173, 239);
        font-size: 5.7vw;
    }
    .section-temoignages .right-content .one-temoignage .parole {
    font-size: 4.2vw;
    }
    
    /* ============================= SECTION FOUR ============================= */

    .section-four {
        padding: 6.163vw 5.138vw 6.163vw 5.138vw;
    }

    .section-four .title {
        font-size: 6.444vw;
        line-height: normal;
        margin-bottom: 5vw;
    }
    .section-four .list-avantages {
        flex-wrap: wrap;  
        padding: 2vw;      
    }
    .section-four .list-avantages .one-avt {
        gap: 5vw;
        width: 100%;
        padding: 4vw 6px;
        height: 100%;
        align-items: center;
    }
    .section-four .list-avantages .one-avt .img {
        width: 20.333vw;
        height: 21.333vw;
        padding: 4vw;
    }
    .section-four .list-avantages .one-avt .subtitle {
        font-size: 5.66vw;
        line-height: 10vw;;
        width: 100%;
        margin-bottom: 2vw;
    }
    .section-four .list-avantages .one-avt:nth-of-type(4) .subtitle {
        width: 100%;
    }
    .section-four .list-avantages hr {
        width: 0vw;
    }
   
    /* ============================= SECTION FIVE ============================= */
   
    .section-five .content-details {
        position: relative;
        margin: 0;
        flex-direction: column;
    }
    
    .section-five .content-details .left-ctn {
        padding: 0;
    }
    .section-five .content-details .left-ctn .title {
        font-size: 6.444vw;
        line-height: normal;
    }
    .section-five .content-details .left-ctn .descr {
        font-size: 4.666vw;
        margin-bottom: 2vw;
        font-weight: 300;
        text-align: start;
        line-height: normal;
    }
    .section-five .content-details .left-ctn a {
        background: var(--secondary-color);
        padding: 1.8vw 5vw;
        font-size: 5vw;
        color: white;
        border-radius: 7px;
    }
    .section-five .content-details .right-ctn {
        width: 100%;
        background: linear-gradient(352.06deg, #040404 23.96%, #2D2D2D 93.88%);
        padding: 5.76vw 4.76vw;
        border-radius: 15px;
        color: white;
        height: 100%;
        line-height: normal;
        margin: 2vw 0;
    }
    .section-five .content-details .right-ctn p,
    .section-five .content-details .right-ctn p span {
        font-weight: 300;
        font-size: 4vw;
        line-height: normal;
    }

    /* ============================= SECTION SIX ============================= */

    /* .section-six {
        height: 90vw;
    }
    .section-six .content-details .left-ctn {
        width: 100%;
    }
    .section-six .content-details .left-ctn .title {
        font-size: 5.444vw;
    }
    .section-six .content-details .left-ctn .descr {
        font-weight: 300;
        font-size: 4.94vw;
        line-height: normal;
    }
    .section-six .content-details .left-ctn .details {
        font-weight: 300;
        font-size: 4.11vw;
        line-height: normal;
    }
    .section-six .content-details .left-ctn a {
        padding: 2vw 4vw;
        font-size: 4.11vw;
        line-height: normal;
        border-radius: 5px;
    } */

    /* ============================= SECTION SEVEN ============================= */

    .section-seven .title {
        font-size: 5vw;
        line-height: normal;
        margin-bottom: 5vw;
    }
    .section-seven .list-blog {
        gap: 4vw;
    }
    .section-seven .list-blog .one-article {
        flex-direction: column;    
    }
    .section-seven .list-blog .one-article figure {
        height: 49.44vw;
        width: 100%;
    }
    .section-seven .list-blog .one-article:hover figure {
        height: 100%;
        transition: all .5s ease-in-out;
    }
    .section-seven .list-blog .one-article .details .title {
        font-weight: 400;
        font-size: 4.66vw;
        line-height: normal;
        width: 90%;
    }
    .section-seven .list-blog .one-article .details .subtitle {
        font-weight: 100;
        font-size: 4.22vw;
        line-height: normal;
        width: 90%;
    } 
    .section-seven .list-blog .one-article .details .btns {
        position: relative;
    } 
    .section-seven .list-blog .one-article .details .btns p {
        padding: 2vw 4vw;
        font-size: 4vw;
    } 
    .section-seven .list-blog .one-article .details .btns p span {
        font-size: 4vw;
    } 
    .section-seven .list-blog .one-article .details .btns p:nth-of-type(1) i {
        font-size: 5vw;
    } 

}