/*-----------------------------------------
    HERO
------------------------------------------*/
main{
    width: 100%;
    height: 100%;
    margin-top: 100px;
}

main .hero{
    height: 100vh;
    display: flex;
    /*gap: 500px;*/
    width: 100%;
    align-items: center;
    margin-top: -80px;
}
main .hero .hero-content{
    display: flex;
    flex-direction: column;
    left: 10%;
    position: relative;
}

main .hero .hero-content .hero-title{
    margin-bottom: 0;
}
main .hero .hero-content .hero-title{
    font-size: 70px;
}
main .hero .hero-content .hero-text{
    margin-top: 0;
}
main .hero .hero-content .hero-text p {
    font-size: 30px;
    color: white;
}
main .hero .hero-content .hero-button{
    margin-top: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
}

main .hero .hero-content .hero-button a{
    display: flex;
    background-color: white;
    color: #FF6F61;
    /*width: 270px; !*200*!*/
    padding: 12px 15px;
    border-radius: 15px;
    border: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    font-family: 'Source Sans 3', sans-serif;
    transition: 0.4s;
}

main .hero .hero-content .hero-button a:hover{
    background-color: #FF6F61;
    color: white;
}

main .hero .hero-img{
    display: flex;
    position: relative;
    right: -30%;
}

@keyframes subtlePulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.9;
    }
}

@keyframes subtlePulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}
/*-----------------------VERSION MOBILE-----------------------*/
@media screen and (max-width: 768px) {
    main .hero{
        width: 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    main .hero .hero-content {
        left: 0;
    }

    main .hero .hero-img{
        display: none;
    }

    main .hero .hero-content .hero-title{
        font-size: 50px;
    }

    main .hero .hero-button{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20px;
        margin-right: 20px;
    }
}

/*-----------------------------------------
    SECTION DECOMPTE AVANT OUVERTURE
------------------------------------------*/
.countdown-before-opening {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 200px;
}

.countdown-before-opening .countdown-box {
    display: flex;
    gap: 20px;
    width: 70%;
    height: 150px;
    border-radius: 15px;
    justify-content: center;
    align-items: center;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 3px #FF6F61 solid;
    padding: 10px;
    border-radius: 10px;
}

.countdown-number {
    font-size: 3em;
    font-weight: bold;
    color: white;
}

.countdown-label {
    font-size: 1.2em;
    color: #FF6F61;
    text-transform: uppercase;
    font-weight: bold;
}

/*-----------------------VERSION MOBILE-----------------------*/
@media screen and (max-width: 768px) {
    .countdown-before-opening {
        display: flex;
        position: relative;
        padding-bottom: 400px;
    }
    .countdown-before-opening .countdown-box {
        display: flex;
        flex-wrap: wrap;
    }
}
/*-----------------------------------------
    SECTION VIDEO - PRESENTATION
------------------------------------------*/

.section-videPresentation{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
    padding-bottom: 150px;
}
.section-videPresentation .video-container{
    width: 90%;
    height: 700px;
    position: relative;
    border-radius: 15px;
}

.section-videPresentation .video-container video{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    border: 5px solid;
    border-radius: 15px;
    animation: borderColorAnimation 5s linear infinite;
}
@keyframes borderColorAnimation {
    0% {
        border-color: #FF6A3D;
    }
    25% {
        border-color: #FF8A3D;
    }
    50% {
        border-color: #6A4CFF;
    }
    75% {
        border-color: #FF3DA6;
    }
    100% {
        border-color: #FF6A3D;
    }
}

/*-----------------------VERSION MOBILE-----------------------*/
@media screen and (max-width: 768px) {
    .section-videPresentation{
        display: flex;
    }
    .section-videPresentation .video-container {
        width: 90%;
    }
}

/*-----------------------------------------
    SECTION - NOS PÄRTENAIRES
------------------------------------------*/
.our-partners .section-title h1 {
    background: linear-gradient(to left, #FF6F61 0%, #FFFFFF 150%);
    -webkit-background-clip: text;
}

.our-partners{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
    border-radius: 10px;
    padding-bottom: 180px;
    padding-top: 180px;
}

.our-partners .partners{
    width: 90%;
    height: 100%;
    background-color: white;
    padding-bottom: 50px;
    padding-top: 50px;
    border-radius: 10px;
}

.our-partners .partners-list{
    display: flex;
    width: 100%;
    gap: 20px;
    justify-content: center;
}

.our-partners .partners-list li a{
    display: flex;
    gap: 20px;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    align-items: center;
    color: #1B2559;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.our-partners .partners-list li .image{
    display: flex;
    width: 70px;
    height: 70px;
}

.our-partners .partners-list li .image img{
    border-radius: 15px;
}
.our-partners .partners-list li .partner{
    align-content: center;
}


/*-----------------------------------------
    SECTION - QUELQUES CHIFFRES
------------------------------------------*/
.section-quelquesChiffres{
    background: linear-gradient(to left, #FF6F61 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 45px;
    padding-bottom: 150px;
}
.section-quelquesChiffres .studentsNumber{
    display: flex;
    background: linear-gradient(to left, #FF6F61 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 45px;
    margin-left: 80px;
    justify-content: flex-start;
    animation: studentsNumberAnimation linear;
    animation-timeline: view();
    animation-range-start : cover 0%;
    animation-range-end : contain 50%;

}

@keyframes studentsNumberAnimation {
    from {
        margin-left: 0;
        opacity: 0;
    }
    to {
        margin-left: 80px;
        opacity: 1;
    }
}

.section-quelquesChiffres .professorsNumber{
    display: flex;
    background: linear-gradient(to left, #FF6F61 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 45px;
    margin-right: 80px;
    justify-content: flex-end;
    animation: professorsNumberAnimation linear;
    animation-timeline: view();
    animation-range-start : cover 0%;
    animation-range-end : contain 50%;

}

@keyframes professorsNumberAnimation {
    from {
        margin-right: 0;
        opacity: 0;
    }
    to {
        margin-right: 80px;
        opacity: 1;
    }
}

/*-----------------------VERSION MOBILE-----------------------*/
@media screen and (max-width: 768px) {
    .section-quelquesChiffres{
        display: flex;
        flex-direction: column;
    }

    .section-quelquesChiffres .studentsNumber{
        margin-left: 15px;
    }

    .section-quelquesChiffres .studentsNumber h1{
        font-size: 45px;

    }
    .section-quelquesChiffres .professorsNumber{
        margin-right: 15px;
    }
    .section-quelquesChiffres .professorsNumber h1{
        font-size: 45px;
    }
}

/*-----------------------------------------
    SECTION - LES MATIÈRES
------------------------------------------*/

.section-subjects{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 250px;
}

.section-subjects .subjects .subjects-list{
    display: flex;
    gap: 25px;
    max-width: 1500px;
    flex-wrap: wrap;
    justify-content: center;
}

.section-subjects .subjects .subjects-list  .subject-item{
    display: flex;
    background-color: white;
    width: 300px;
    height: 90px;
    border-radius: 15px;
    align-items: center;
}

.section-subjects .subjects .subjects-list  .subject-item .subject-icon{
    display: flex;
    background-color: #FF6F61;
    width: 50px;
    height: 50px;
    margin-left: 20px;
    border-radius: 15px;
    justify-content: center;
    align-items: center;
}

.section-subjects .subjects .subjects-list  .subject-item .subject-icon svg{
    width: 30px;
    height: 30px;
}

.section-subjects .subjects .subjects-list  .subject-item .subject-content{
    display: flex;
    color: #1B2559;
    margin-left: 20px;
    flex-direction: column;
}

.section-subjects .subjects .subjects-list  .subject-item .subject-content .subject-title{
    margin: 0;
}
.section-subjects .subjects .subjects-list  .subject-item .subject-content .subject-title h1{
    margin: 0;
}
.section-subjects .subjects .subjects-list  .subject-item .subject-content .subject-text{
    margin: 0;
}
.section-subjects .subjects .subjects-list  .subject-item .subject-content .subject-text p{
    margin: 0;
}
.section-subjects .andMore{
    display: flex;
    color: white;
}

/*-----------------------VERSION MOBILE-----------------------*/
@media screen and (max-width: 768px) {
    .section-subjects{
        display: flex;
    }
    .section-subjects .subjects{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        display: flex;
        flex-direction: row;
        width: 100%;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
    }

    .section-subjects .subjects .subjects-list{
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        max-width: none;
        justify-content: flex-start;
        padding-left:15px;
        padding-right: 15px;
    }

    .subject-item {
        min-width: 300px; /* Taille minimale des éléments pour éviter qu'ils ne se réduisent trop */
        scroll-snap-align: start;
    }
}

/*-----------------------------------------
    SECTION - IA
------------------------------------------*/

.section-IA{
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 250px;
}


/*-----------------------------------------
    SECTION - NOS COURS
------------------------------------------*/

.section-courses {
    display: flex;
    padding-bottom: 250px;
    justify-content: space-between;
}
.section-courses .section-title{
    max-width: 700px;
    margin-left: 50px
}

.section-courses .courses .courses-list {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
    margin-right: 100px;
    max-width: 900px;
}

.section-courses .courses .courses-list .course-item{
    display: flex;
    background-color: white;
    width: 420px;
    min-height: 200px;
    padding-bottom: 10px;
    border-radius: 15px;
    flex-direction: column;
    justify-content: space-between ;
}
.section-courses .courses .courses-list .course-item.loading .tag-list .skeleton,
.section-courses .courses .courses-list .course-item.loading .price.skeleton,
.section-courses .courses .courses-list .course-item.loading .course-title.skeleton,
.section-courses .courses .courses-list .course-item.loading .course-description.skeleton,
.section-courses .courses .courses-list .course-item.loading .lessons-count.skeleton,
.section-courses .courses .courses-list .course-item.loading .participants-count.skeleton {
    background-color: #e0e0e0;
    border-radius: 4px;
    animation: pulse 1.5s infinite ease-in-out;
}
.section-courses .courses .courses-list .course-item.loading .tag-item.skeleton {
    width: 60px;
    height: 20px;
    margin-right: 10px;
}

.section-courses .courses .courses-list .course-item.loading .price.skeleton {
    width: 50px;
    height: 20px;
}

.section-courses .courses .courses-list .course-item.loading .course-title.skeleton {
    width: 80%;
    height: 20px;
    margin-bottom: 10px;
}

.section-courses .courses .courses-list .course-item.loading .course-description.skeleton {
    width: 100%;
    height: 15px;
}

.section-courses .courses .courses-list .course-item.loading .lessons-count.skeleton,
.section-courses .courses .courses-list .course-item.loading .participants-count.skeleton {
    width: 70px;
    height: 15px;
}

/* Animation d'impulsion (pulse) */
@keyframes pulse {
    0% {
        background-color: #e0e0e0;
    }
    50% {
        background-color: #f0f0f0; /* Couleur plus claire pendant l'animation */
    }
    100% {
        background-color: #e0e0e0;
    }
}
.section-courses .courses .courses-list .course-item .course-head{
    display: flex;
    width: 100%;
    height: 50px;
    position: relative;
    justify-content: space-between;
    left: 0;
    text-align: center;
    align-items: center;
}

.section-courses .courses .courses-list .course-item .course-head .tag-list{
    display: flex;
    gap: 10px;
    padding-inline-start: unset;
    margin-left: 15px;
}

.section-courses .courses .courses-list .course-item .course-head .tag-list .tag-item{
    display: flex;
    padding-left: 15px;
    padding-right: 15px;
    height: 30px;
    background-color: #FF6F61;
    color: white;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
.section-courses .courses .courses-list .course-item .course-head .price{
    color: #6F6C90;
    margin-right: 15px;
}
.section-courses .courses .courses-list .course-item .course-head .price p{
    margin: 0;
}

.section-courses .courses .courses-list .course-item .course-content{
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}

.section-courses .courses .courses-list .course-item .course-content .course-title{
    color: #170F49;
}
.section-courses .courses .courses-list .course-item .course-content .course-title h1{
    margin: 0;
}

.section-courses .courses .courses-list .course-item .course-content .course-description{
    color: #170F49;
}
.section-courses .courses .courses-list .course-item .course-content .course-description p{
    margin: 0;
}

.section-courses .courses .courses-list .course-item .course-footer{
    display: flex;
    height: 50px;
    position: relative;
    justify-content: space-between;
    bottom: 0;
    text-align: center;
    align-items: center;
    margin-left: 15px;
    margin-right: 15px;
    color: #6F6C90;
}
.section-courses .courses .courses-list .course-item .course-footer .lessons-count{
    margin: 0;
    margin-block: unset;
}
.section-courses .courses .courses-list .course-item .course-footer .lessons-count p{
    margin: 0;
    margin-block: unset;
}
.section-courses .courses .courses-list .course-item .course-footer .participants-count{
    margin: 0;
    margin-block: unset;
}

.section-courses .courses .courses-list .course-item .course-footer .participants-count p{
    margin: 0;
    margin-block: unset;
}
.section-courses .courses .courses-button{
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
}
.section-courses .courses .courses-button a{
    display: flex;
    background-color: white;
    color: #FF6F61;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 15px;
    padding-top: 12px;
    padding-bottom: 12px;
    border: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    font-family: 'Source Sans 3', sans-serif;
    transition: 0.4s;
}

.section-courses .courses .courses-button a:hover{
    background-color: #FF6F61;
    color: white;
}

/*-----------------------VERSION MOBILE-----------------------*/
@media screen and (max-width: 768px) {
    .section-courses{
        display: flex;
        flex-direction: column;
        justify-content: center;

    }

    .section-courses .section-title{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        margin-bottom: 15px;
    }

    .section-courses .courses .courses-list{
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        margin: 0;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-left: 15px;
        padding-right: 15px;
    }

    .section-courses .courses .courses-button{
        order: 1; /* S'assure que le bouton est après la liste */
        align-self: center; /* Centre le bouton */
        margin-top: 20px; /* Espace avec la liste */
    }


}

/*-----------------------------------------
    SECTION - NOS EVENEMENTS
------------------------------------------*/

.section-events{
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 250px;
}

.section-events .section-title span{
    animation: starAnimation 1s infinite linear;
    -webkit-text-fill-color: yellow;
}

@keyframes starAnimation {
    0% {
        opacity: 0.5; /* Le span reste toujours partiellement visible */
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}

.section-events .events .events-list {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}

.section-events .events .events-list .event-item{
    display: flex;
    background-color: white;
    width: 450px;
    min-height: 400px;
    padding-bottom: 10px;
    border-radius: 15px;
    flex-direction: column;
    justify-content: space-between ;
}
.section-events .events .events-list .event-item.loading .event-banner.skeleton,
.section-events .events .events-list .event-item.loading .price.skeleton,
.section-events .events .events-list .event-item.loading .event-title.skeleton,
.section-events .events .events-list .event-item.loading .event-description.skeleton,
.section-events .events .events-list .event-item.loading .lessons-count.skeleton,
.section-events .events .events-list .event-item.loading .participants-count.skeleton {
    background-color: #e0e0e0;
    border-radius: 4px;
    animation: pulse 1.5s infinite ease-in-out;
}

.section-events .events .events-list .event-item.loading .price.skeleton {
    width: 50px;
    height: 20px;
}

.section-events .events .events-list .event-item.loading .event-title.skeleton {
    width: 80%;
    height: 20px;
    margin-bottom: 10px;
}

.section-events .events .events-list .event-item.loading .event-description.skeleton {
    width: 100%;
    height: 15px;
}

.section-events .events .events-list .event-item.loading .lessons-count.skeleton,
.section-events .events .events-list .event-item.loading .participants-count.skeleton {
    width: 70px;
    height: 15px;
}

/* Animation d'impulsion (pulse) */
@keyframes pulse {
    0% {
        background-color: #e0e0e0;
    }
    50% {
        background-color: #f0f0f0; /* Couleur plus claire pendant l'animation */
    }
    100% {
        background-color: #e0e0e0;
    }
}

.section-events .events .events-list .event-item .event-head{
    display: flex;
    width: 100%;
    position: relative;
    justify-content: center;
    left: 0;
    text-align: center;
    align-items: center;
}

.section-events .events .events-list .event-item .event-head .event-banner{
    width: 90%;
    height: 60px;
    border-radius: 10px;
    margin-top: 20px;
}

.section-events .events .events-list .event-item .event-head .price{
    color: #6F6C90;
    margin-right: 15px;
    position: absolute;
    right: 0;
}
.section-events .events .events-list .event-item .event-head .price p{
    margin: 0;
}

.section-events .events .events-list .event-item .event-content{
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}

.section-events .events .events-list .event-item .event-content .event-title{
    color: #170F49;
}
.section-events .events .events-list .event-item .event-content .event-title h1{
    margin: 0;
}

.section-events .events .events-list .event-item .event-content .event-description{
    color: #170F49;
}
.section-events .events .events-list .event-item .event-content .event-description p{
    margin: 0;
}

.section-events .events .events-list .event-item .event-footer{
    display: flex;
    height: 50px;
    position: relative;
    justify-content: space-between;
    bottom: 0;
    text-align: center;
    align-items: center;
    margin-left: 15px;
    margin-right: 15px;
    color: #6F6C90;
}
.section-events .events .events-list .event-item .event-footer .lessons-count{
    margin: 0;
    margin-block: unset;
}
.section-events .events .events-list .event-item .event-footer .lessons-count p{
    margin: 0;
    margin-block: unset;
}
.section-events .events .events-list .event-item .event-footer .participants-count{
    margin: 0;
    margin-block: unset;
}

.section-events .events .events-list .event-item .event-footer .participants-count p{
    margin: 0;
    margin-block: unset;
}
.section-events .events .events-button{
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
}
.section-events .events .events-button a{
    display: flex;
    background-color: white;
    color: #FF6F61;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 15px;
    padding-top: 12px;
    padding-bottom: 12px;
    border: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    font-family: 'Source Sans 3', sans-serif;
    transition: 0.4s;
}

.section-events .events .events-button a:hover{
    background-color: #FF6F61;
    color: white;
}


/*-----------------------VERSION MOBILE-----------------------*/
@media screen and (max-width: 768px) {
    .section-events{
        display: none;
    }
}

/*-----------------------------------------
    SECTION - NOS ABONNEMENTS
------------------------------------------*/
.section-pricing{
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-bottom: 250px;
}

.section-pricing .pricing-list{
    display: flex;
    gap: 45px;
}

.section-pricing .pricing-list .pricing-item{
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 650px;
    background-color: white;
    border-radius: 15px;
    margin-top: 50px;
    position: relative;
}

.section-pricing .pricing-list .pricing-item.popular{
    display: flex;
    flex-direction: column;
    width: 400px;
    background-color: #FF6F61;
    border-radius: 15px;
    position: relative;
    margin-top: 0;
}

.section-pricing .pricing-list .pricing-item.popular .popular-icon {
    display: flex;
    width: 90px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    position: absolute;
    right: 20px;
    top: 15px;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

.section-pricing .pricing-list .pricing-item .pricing-head {
    height: 150px;
    position: relative;
    margin-top: 40px;
    margin-left: 20px;
}

.section-pricing .pricing-list .pricing-item .pricing-head .pricing-title{
    display: flex;
    color: #170F49;
    align-items: center;
    gap: 15px;
}

.section-pricing .pricing-list .pricing-item.popular .pricing-head .pricing-title{
    color: white;
}


.section-pricing .pricing-list .pricing-item .pricing-head .icon{
    display: flex;
    width: 70px;
    height: 70px;
    border-radius: 15px;
    background-color: #1B2559;
}

.section-pricing .pricing-list .pricing-item.popular .pricing-head .icon{
    background-color: white;
}


.section-pricing .pricing-list .pricing-item .pricing-head .pricing-description{
    display: flex;
    color: #6F6C90;
    margin-top: 10px;
    justify-content: center;
    text-align: center;
    margin-right: 20px;
}

.section-pricing .pricing-list .pricing-item.popular .pricing-head .pricing-description{
    color: white;
}

.section-pricing .pricing-list .pricing-item .pricing-price{
    color: #170F49;
    font-size: 35px;
    margin-left: 35px;
}

.section-pricing .pricing-list .pricing-item.popular .pricing-price{
    color: white;
}

.section-pricing .pricing-list .pricing-item .pricing-price span{
    color: #6F6C90;
    font-size: 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

.section-pricing .pricing-list .pricing-item.popular .pricing-price span{
    color: white;
}


.section-pricing .pricing-list .pricing-item .pricing-advantages{
    display: flex;
    flex-direction: column;
    color: #170F49;
    position: relative;
}

.section-pricing .pricing-list .pricing-item .pricing-advantages h1{
    margin-bottom: 15px;
}

.section-pricing .pricing-list .pricing-item.popular .pricing-advantages h1{
    color: white;
}


.section-pricing .pricing-list .pricing-item .pricing-advantages .advantages-item{
    display: flex;
    gap: 10px;
    top: 15px;
    color: #170F49;
    margin-bottom: 5px;
}

.section-pricing .pricing-list .pricing-item.popular .pricing-advantages .advantages-item{
    color: white;
}


.section-pricing .pricing-list .pricing-item .pricing-advantages .advantages-item svg{
    width: 25px;
    height: 25px;
}

.section-pricing .pricing-list .pricing-item .pricing-button{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 30px;
    width: 100%;
}

.section-pricing .pricing-list .pricing-item .pricing-button button {
    width: 300px;
    height: 60px;
    background-color: #170F49;
    border-radius: 50px;
    color: white;
    border: none;
}

.section-pricing .pricing-list .pricing-item.popular .pricing-button button{
    background-color: white;
    color: #FF6F61;
}

/*-----------------------VERSION MOBILE-----------------------*/
@media screen and (max-width: 768px) {
    .section-pricing{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        overflow: hidden;
    }

    .section-pricing .pricing-list{
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        margin: 0;
        display: flex;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    .section-pricing .pricing-list .pricing-item{
        min-width: 400px;
    }
}

/*-----------------------------------------
    SECTION - NOTRE NEWSLETTER
------------------------------------------*/
.section-newsletter{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 400px;
}

.section-newsletter .newsletter-input{
    display: flex;
    width: 850px;
    height: 80px;
    background-color: #F8F8F8;
    border-radius: 15px;
    justify-content: space-between;
    align-items: center;
}

.section-newsletter .newsletter-input .icon{
    display: flex;
    width: 100px;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 15px;
}

.section-newsletter .newsletter-input .icon svg{
    width: 30px;
    height: 30px;
}

.section-newsletter .newsletter-input .input{
    display: flex;
    width: 100%;
    height: 100%;
    background-color: white;
}

.section-newsletter .newsletter-input .input input{
    outline: none;
    border: none;
    background-color: white;
    width: 100%;

}

.section-newsletter .newsletter-input .button-subscribe {
    display: flex;
    width: 200px;
    height: 50px;
    border-radius: 15px;
    justify-content: center;
    align-items: center;
    margin-right: 25px;
    background-color: white;
}
.section-newsletter .newsletter-input .button-subscribe button{
    background-color: #170F49;
    color: white;
    width: 200px;
    padding: 12px;
}

/*-----------------------VERSION MOBILE-----------------------*/
@media screen and (max-width: 768px) {
    .section-newsletter{
        display: none;
    }
}


/*-----------------------------------------
    FOOTER
------------------------------------------*/
footer{
    display: flex;
    background-color:  #0F172A;
    width: 90%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow-x: hidden;

}

footer .footer-content{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    height: 70%;
    justify-content: space-between;
    color: white;
    margin-right: 50px;
    margin-left: 50px;
    align-items: flex-start;
    padding: 50px 50px;
    border-bottom: 2px solid white;
}

footer .footer-logo{
    display: flex;
    width: 150px;
    height: 50px;
    align-items: center;
}

footer .footer-logo svg{
    width: 150px;
    height: 50px;
}

footer .footer-lists{
    display: flex;
    justify-content: space-around;
    width: 100%;
}

footer .footer-lists .footer-list{
    margin: 0;
    padding: 0;
}

footer .footer-bottom{
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 30%;
    color: white;
    justify-content: space-between;
}
footer .footer-bottom .footer-bottom-left{
    display: flex;
    gap: 15px
}

footer .footer-bottom .footer-social-media{
    display: flex;
    gap: 10px;
}

footer .footer-bottom .footer-social-media li{
    display: flex;
    width: 35px;
    height: 35px;
    background-color: white;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
footer .footer-bottom .footer-social-media li a{
    display: flex;
    justify-content: center;
    align-items: center;
}
footer .footer-bottom .footer-social-media li svg{
    color: #0F172A;
    transition: 0.2s;
}

footer .footer-bottom .footer-social-media li svg:hover{
    color: #FF6F61;
}

/*-----------------------VERSION MOBILE-----------------------*/
@media screen and (max-width: 768px) {
    footer {
        width: 100%;
        padding: 40px 20px;
        background-color: #0F172A;
    }

    footer .footer-content {
        flex-direction: column;
        align-items: center;
        padding: 0;
        gap: 40px;
    }

    footer .footer-logo {
        justify-content: center;
    }

    footer .footer-lists {
        width: 100%;
        flex-direction: column;
        gap: 30px;
    }

    footer .footer-list {
        text-align: center;
    }

    footer .footer-list h1 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 12px;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    footer .footer-list li {
        list-style: none;
        margin: 8px 0;
    }

    footer .footer-list li a {
        font-size: 14px;
        color: #cbd5e1;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    footer .footer-list li a:hover {
        color: #FF6F61;
    }

    footer .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
        padding-top: 40px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-bottom-left {
        flex-direction: column;
        gap: 10px;
        font-size: 13px;
        color: #94a3b8;
    }

    .footer-bottom-left a {
        color: #94a3b8;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .footer-bottom-left a:hover {
        color: #FF6F61;
    }

    .footer-social-media {
        display: flex;
        justify-content: center;
        gap: 16px;
    }

    .footer-social-media li {
        width: 44px;
        height: 44px;
        background-color: white;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 0.2s ease;
    }

    .footer-social-media li:hover {
        transform: scale(1.1);
    }

    .footer-social-media li svg {
        width: 22px;
        height: 22px;
        color: #0F172A;
    }

    .footer-social-media li svg:hover {
        color: #FF6F61;
    }
}