/*-- Responsive */


@media screen  and  (max-width: 1629px){

    section .left h2{
        font-size: 1.5rem;
    }

    section .left p{
        font-size: 1rem;
    }

    .right img{
        width: 480px;
        height: 480px
    }

    .cercle:nth-child(1){
        right: 0;
    }

    .cercle:nth-child(3){
        position: absolute;
        bottom: 81px;
    }

    .cercle:nth-child(4){
        left: 50px;
    }

    /* Mise en formation de la section information-1 */

    main .information-1 h1, .information-2 h1{
        font-size: 1.5rem;
    }

    main .information-1 p , .information-2 p{
        width: 75%;
        font-size: 1.2rem;
    }

    main .services{
        margin-top: 2rem;
    }

    /* Mise en page de la partie services */

    .services h1 ,.formations h1{
        font-size: 2.5rem;
    }

    .services .service-list{
        grid-template-columns: repeat(3 , 1fr);
        gap: 2.5rem;
    }

    .btn-Interested{
        transform: translateY(-25px);
    }

    /* mise en forme de la section formation */

    main .formations{
        width: 100%;
        margin: 2rem auto;
    }

    main .formations-list{
        display: grid;
        grid-template-columns: repeat(3 , 1fr);
        gap: 1.5rem;

    }

    /* Mise en forme de la partie Apropos */

    main .apropos{
        margin-top: 10rem;
        height: 100%;

    }

    .aprops-de-nous h1 , .contact h1{
        font-size: 2rem;
        font-weight: 900;
        margin-top: 100px;
    }

    .swiper-2{
        width: 1500px;
    }

    /* footer */

    footer{
        width: 100vw;
        height: 100%;
        color: white;
        background: linear-gradient(360deg ,var(--var-secondaryColor), rgba(0, 0, 0, .50)),
        url("./assets/agence-marketing-authentique-petite-jeune_23-2150167385.png") no-repeat center center fixed;
        background-size: cover;
    }

    .footer-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 2rem auto;

        h2{
            font-size: 1.5rem;
        }

        ul{
            margin-top: 1.5rem;

            li{
                list-style: none;
                margin: 0.5em 0;
                font-size: 1.2rem;
            }

        }

        i{
            margin-right: 0.5rem;
            font-size: 1.5rem;
            color: #ffffff;
        }
    }

    .footer-container .p-footer{
        width: 50%;
        margin-top: 2rem;

        p{
            font-size: 1.2rem;
        }
    }

    .footer-container .footer-navigation{
        background: white;
        width: 80%;
        border-radius: 0.5rem;
        margin: 2rem;

        h2{
            color: black;
        }

        ul{
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin: 1rem auto;

            li{
                margin:0 5rem;
            }
        }


    }

    .footer-container .footer-info-coordonner{
        width: 80%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        text-align: start;
        margin: 2rem;
        gap: 15px;
    }

    .footer-container .newlester{
        height: 150px;
        width: 80%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        margin: 2rem;
        border-radius: 0.5rem;

        div{
            width: 100%;

            p{
                font-size: 1.3rem;
                margin-bottom: 1.5rem;
            }

            input{
                width: 35%;
                padding: 0.8rem 1rem;
                margin-bottom: 1.5rem;
                outline: none;
                border: none;
                border-radius: 5px;

            }

            button{
                padding: 0.8rem 1.2rem;
                border-radius: 5px;
            }
        }
    }

}

@media screen and (max-width: 1565px){
    section .left h2{
        font-size: 1.5rem;
    }

    section .left p{
        font-size: 1rem;
    }

    .right img{
        width: 480px;
        height: 480px
    }

    .cercle:nth-child(1){
        right: 0;
    }


    .cercle:nth-child(3){
        position: absolute;
        bottom: 80px;
    }

    .cercle:nth-child(4){
        left: 50px;
    }

    /* Mise en formation de la section information-1 */

    main .information-1 h1, .information-2 h1{
        font-size: 1.5rem;
    }

    main .information-1 p , .information-2 p{
        width: 75%;
        font-size: 1.2rem;
    }

    main .services{
        margin-top: 2rem;
    }

    /* Mise en page de la partie services */

    .services h1 ,.formations h1{
        font-size: 2.5rem;
    }

    .services .service-list{
        grid-template-columns: repeat(3 , 1fr);
        gap: 2.5rem;
    }

    .btn-Interested{
        transform: translateY(-25px);
    }

    /* mise en forme de la section formation */

    main .formations{
        width: 100%;
        margin: 2rem auto;
    }

    main .formations-list{
        display: grid;
        grid-template-columns: repeat(3 , 1fr);
        gap: 1.5rem;

    }

    /* Mise en forme de la partie Apropos */

    main .apropos{
        margin-top: 10rem;
        height: 100vh;

    }

    .aprops-de-nous h1 , .contact h1{
        font-size: 2rem;
        font-weight: 900;
        margin-top: 100px;
    }

    .information-5 h1{
        font-size: 1.5rem;
    }

    .information-5 p{
        font-size: 1.2rem;
    }

    .information-5-image img{
        width: 500px;
        height: 300px;
    }

    .information-4{
        height: 70vh;
    }


    .information-4 h1{
        margin-top: 2rem;
    }

    .swiper-2 ,.swiper-wrapper{
        width: 900px;
    }

    .swiper-slide p {
        font-size: 1.2rem;
    }

    .info-banniere {
        width: 85%;
    }

    .tache-realiser{
        text-align: center;
    }

    .equipe{
        height: 85vh;
    }


    .equipe .p-equipe{
        font-size: 1.1rem;
        width: 60%;
    }

    .profil-card{
        position: relative;
        width: 180px;
        height: 180px;
    }

    .img-profils{
        position: relative;
        width: 100%;
        height: 120px;
    }

    .img-profils img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        transition: 0.3s;
    }

    .caption h3{
        font-size: 1rem;
    }

    .caption p{
        font-size: 0.9rem;
    }

    .slides{
        width: 100%;

    }

    .slide{
        left: calc(50% - 150px);

    }

    .aprops-de-nous{
        padding-bottom: 3rem;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {


    section .left h2{
        font-size: 1.5rem;
    }

    section .left p{
        font-size: 1rem;
    }

    .right img{
        width: 480px;
        height: 480px
    }

    .cercle:nth-child(1){
        right: 0;
    }


    .cercle:nth-child(3){
        position: absolute;
        bottom: 80px;
    }

    .cercle:nth-child(4){
        left: 50px;
    }

    /* Mise en formation de la section information-1 */

    main .information-1 h1, .information-2 h1{
        font-size: 1.5rem;
    }

    main .information-1 p , .information-2 p{
        width: 75%;
        font-size: 1.2rem;
    }

    main .services{
        margin-top: 2rem;
    }

    /* Mise en page de la partie services */

    .services h1 ,.formations h1{
        font-size: 2.5rem;
    }

    .services .service-list{
        grid-template-columns: repeat(3 , 1fr);
        gap: 2.5rem;
    }

    .btn-Interested{
        transform: translateY(-25px);
    }

    /* mise en forme de la section formation */

    main .formations{
        width: 100%;
        margin: 2rem auto;
    }

    main .formations-list{
        display: grid;
        grid-template-columns: repeat(3 , 1fr);
        gap: 1.5rem;

    }

    /* Mise en forme de la partie Apropos */

    main .apropos{
        margin-top: 10rem;
        height: 100%;

    }

    .aprops-de-nous h1 , .contact h1{
        font-size: 2rem;
        font-weight: 900;
        margin-top: 100px;
    }

    .information-5 h1{
        font-size: 1.5rem;
    }

    .information-5 p{
        font-size: 1.2rem;
    }

    .information-5-image img{
        width: 500px;
        height: 300px;
    }

    .information-4{
        height: 70vh;
    }


    .information-4 h1{
        margin-top: 2rem;
    }

    .swiper-2 ,.swiper-wrapper{
       width: 900px;
    }

    .swiper-slide p {
        font-size: 1.2rem;
    }

    .info-banniere {
        width: 85%;
    }

    .tache-realiser{
        text-align: center;
    }

    .equipe{
        height: 85vh;
    }


    .equipe .p-equipe{
        font-size: 1.1rem;
        width: 60%;
    }

    .profil-card{
        position: relative;
        width: 180px;
        height: 180px;
    }

    .img-profils{
        position: relative;
        width: 100%;
        height: 120px;
    }

    .img-profils img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: 0.3s;
    }

    .caption h3{
        font-size: 1rem;
    }

    .caption p{
        font-size: 0.9rem;
    }

    .slides{
        width: 100%;

    }

    .slide{
        left: calc(50% - 150px);

    }

    .aprops-de-nous{
        padding-bottom: 3rem;
    }

    .footer-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 2rem auto;

        h2{
            font-size: 1.1rem;
        }

        ul{
            margin-top: 1.5rem;

            li{
                list-style: none;
                margin: 0.5em 0;
                font-size: 1rem;
            }

        }

        i{
            margin-right: 0.5rem;
            font-size: 1.4rem;
            color: #ffffff;
        }
    }

    .footer-container .p-footer{
        width: 50%;
        margin-top: 2rem;

        p{
            font-size: 1.1rem;
        }
    }

    .footer-container .footer-navigation{

        ul{
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin: 1rem auto;

            li{
                margin:0 2rem;
            }
        }


    }

}



@media screen and (min-width: 901px) and (max-width: 1020px){


    header .menu-humberger{
        display: block;
    }

    .logo h1{
        font-size: 1.2rem;
    }

    .logo h2{
        font-size: 1.1rem;
    }

    nav{
        display: none;
    }

    header button{
        display: none;
    }

    main .banniere{
        padding: 1rem;
        width: 100%;
        height: 70vh;
        display: flex;
        flex-direction: column;
    }

    section .left h2{
        padding: 2rem;
        font-size: 1.5rem;
        font-weight: 900;
        color: white;
    }

    section .left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        transform: translateY(-90px);
    }

    section .left p{
        font-size:1.2rem;
        color: white;
    }

    section .right{
        position: absolute;
        bottom: 100px;
        right: 52px;
    }

    .right img{
        width: 300px;
        height: 300px;
    }

    .effets .cercle{
        height: 60px;
        width: 60px;
    }


    .cercle:nth-child(1){
        right: 150px;
        top: -60px;
    }

    .cercle:nth-child(2){
        left: -20px;
    }
    .cercle:nth-child(3){
        top: -25px;
        right: 0;
    }

    .cercle:nth-child(4){
        left: 50px;
    }

    /* Mise en formation de la section information-1 */

    main .information-1 h1, .information-2 h1{
        font-size: 2rem;
    }

    main .information-2 h1{
        margin-top: 12rem;
    }


    main .information-1 p , .information-2 p{
        width: 75%;
        font-size: 1.2rem;

    }


    /* Mise en page de la partie services */

    .services h1 ,.formations h1{
        font-size: 2.3rem;
    }

    .formations h1{
        margin-top: 10rem;
    }

    .services .service-list{
        grid-template-columns: repeat(2 , 1fr);
        gap: 2.5rem;
    }


    /* mise en forme de la section formation */

    main .formations{
        width: 100%;
        margin: 2.3rem auto;
    }

    main .formations-list{
        display: grid;
        grid-template-columns: repeat(2 , 1fr);
        gap: 2rem;

    }

    /* Mise en forme de la partie Apropos */

    main .apropos{
        margin-top: 10rem;
        height: 100%;

    }

    .aprops-de-nous h1 , .contact h1{
        font-size: 1.5rem;
        font-weight: 900;
        margin-top: 100px;
    }

    .aprops-de-nous p{
        font-weight: 500;
        font-size: 1rem;
        margin: 10px 10px;
        padding: 1.3rem 0;
    }

    .btn-Interested{
        transform: translateY(-40px);
    }

    .information-5{
        display: flex;
        flex-direction: column;
    }


    .information-5 h1{
        font-size: 2rem;
        margin-top: 2rem;
    }

    .information-5 p{
        font-size: 1.2rem;
    }

    .information-5-image img{
        width: 800px;
        height: 400px;
    }

    .information-4{
        height: 70vh;
    }


    .information-4 h1{
        margin-top: 3rem;
    }

    .swiper-2 ,.swiper-wrapper{
        width: 830px;
    }

    .swiper-slide h2{
        font-size: 1.2rem;
    }

    .swiper-slide p {
        font-size: 1rem;
    }

    .info-banniere {
        width: 100%;
    }

    .info-banniere h1{
        font-size: 1.7rem;
    }

    .info-banniere p{
        font-size: 1.1rem;
    }

    .tache-realiser{
        text-align: center;
    }

    .equipe{
        height: 88vh;
    }


    .equipe .p-equipe{
        font-size: 1.1rem;
        width: 60%;
    }

    .profil-card{
        position: relative;
        width: 180px;
        height: 180px;
    }

    .img-profils{
        position: relative;
        width: 100%;
        height: 120px;
    }

    .img-profils img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        transition: 0.3s;
    }

    .caption h3{
        font-size: 1rem;
    }

    .caption p{
        font-size: 0.9rem;
    }

    .aprops-de-nous{
        overflow: scroll;
        padding-bottom: 3rem;
    }

    .slides{
        width: 100%;

    }

    .slide{
        left: calc(50% - 150px);

    }

    .footer-container .footer-navigation{
        background: white;
        width: 80%;
        border-radius: 0.5rem;
        margin: 2rem;

        h2{
            color: black;
        }

        ul{
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin: 1rem auto;

            li{
                margin:0 0.5rem;
            }
        }
    }

}




@media screen and (min-width: 768px) and (max-width: 900px) {

    header .menu-humberger{
        display: block;
    }

    .logo h1{
        font-size: 1.2rem;
    }

    .logo h2{
        font-size: 1.1rem;
    }

    nav{
        display: none;
    }

    header button{
        display: none;
    }

    main .banniere{
        padding: 1rem;
        width: 100%;
        height: 70vh;
        display: flex;
        flex-direction: column;
    }

    section .left h2{
        padding: 2rem;
        font-size: 1.5rem;
        font-weight: 900;
        color: white;
    }

    section .left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        transform: translateY(-100px);
    }

    section .left p{
        font-size:1.2rem;
        color: white;
    }

    section .right{
        position: absolute;
        bottom: 100px;
        right: 52px;
    }

    .right img{
        width: 300px;
        height: 300px;
    }

    .effets .cercle{
        height: 60px;
        width: 60px;
    }


    .cercle:nth-child(1){
        right: 150px;
        top: -60px;
    }

    .cercle:nth-child(2){
        left: -20px;
    }
    .cercle:nth-child(3){
        top: -25px;
        right: 0;
    }

    .cercle:nth-child(4){
        left: 50px;
    }

    /* Mise en formation de la section information-1 */

    main .information-1 h1, .information-2 h1{
        font-size: 2rem;
    }

    main .information-2 h1{
        margin-top: 12rem;
    }


    main .information-1 p , .information-2 p{
        width: 75%;
        font-size: 1.2rem;

    }


    /* Mise en page de la partie services */

    .services h1 ,.formations h1{
        font-size: 2.3rem;
    }

    .formations h1{
        margin-top: 10rem;
    }

    .services .service-list{
        grid-template-columns: repeat(2 , 1fr);
        gap: 2.5rem;
    }


    /* mise en forme de la section formation */

    main .formations{
        width: 100%;
        margin: 2.3rem auto;
    }

    main .formations-list{
        display: grid;
        grid-template-columns: repeat(2 , 1fr);
        gap: 2rem;

    }

    /* Mise en forme de la partie Apropos */

    main .apropos{
        margin-top: 10rem;
        height: 100%;

    }

    .aprops-de-nous h1 , .contact h1{
        font-size: 1.5rem;
        font-weight: 900;
        margin-top: 100px;
    }

    .aprops-de-nous p{
        font-weight: 500;
        font-size: 1rem;
        margin: 10px 10px;
        padding: 1.3rem 0;
    }

    .btn-Interested{
        transform: translateY(-40px);
    }

    .swiper {
        margin-top: 2rem;
        width: 700px;
    }

    .information-5{
        display: flex;
        flex-direction: column;
    }


    .information-5 h1{
        font-size: 2rem;
        margin-top: 2rem;
    }

    .information-5 p{
        font-size: 1.2rem;
    }

    .information-5-image img{
        width: 700px;
        height: 380px;
    }

    .information-4{
        height: 70vh;
    }


    .information-4 h1{
        margin-top: 2rem;
        font-size: 1.5rem;
    }

    .swiper-2 ,.swiper-wrapper{
        width: 680px;
    }

    .swiper-slide h2{
        font-size: 1.2rem;
    }

    .swiper-slide p {
        font-size: 1rem;
    }

    .info-banniere {
        width: 100%;
    }

    .info-banniere h1{
        font-size: 1.7rem;
    }

    .info-banniere p{
        font-size: 1.1rem;
    }

    .tache-realiser{
        text-align: center;
    }

    .equipe{
        height: 88vh;
    }


    .equipe .p-equipe{
        font-size: 1.1rem;
        width: 70%;
    }

    .profil-card{
        width: 170px;
        height: 170px;
        margin: 15px auto;
    }

    .img-profils{
        width: 100%;
        height: 115px;
    }

    .img-profils img{
        width: 100%;
        height: 100%;
    }

    .caption h3{
        font-size: 1rem;
    }

    .caption p{
        font-size: 0.9rem;
    }

    .aprops-de-nous{
        overflow: scroll;
        padding: 10rem 0 3rem 0;
    }


    .slides{
        width: 100%;

    }

    .slide{
        left: calc(50% - 150px);

    }


}





@media screen and (min-width: 719px) and (max-width: 767px){


    header .menu-humberger{
        display: block;
    }

    .logo h1{
        font-size: 1.2rem;
    }

    .logo h2{
        font-size: 1.1rem;
    }

    nav{
        display: none;
    }

    header button{
        display: none;
    }

    main .banniere{
        padding: 1rem;
        width: 100%;
        height: 70vh;
        display: block;
    }

    section .left h1{
        margin: 1rem auto;
        font-size: 1.6rem;

    }

    section .left h2{
        margin: 15px auto;
        font-size: 1.3rem;
        font-weight: 900;
        color: white;
    }

    section .btn-contact{
        margin: 0 auto;
    }

    section .left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        transform: translateY(10px);
    }

    section .left p{
        font-size:1.2rem;
        color: white;
    }

    section .right{
        bottom: -240px;
        right: 15px;
    }

    .right img{
        width: 320px;
        height: 320px;
    }

    .effets .cercle{
        height: 60px;
        width: 60px;
    }


    .cercle:nth-child(1){
        right: 150px;
        top: -60px;
    }

    .cercle:nth-child(2){
        left: -20px;
    }
    .cercle:nth-child(3){
        top: -25px;
        right: 0;
    }

    .cercle:nth-child(4){
        left: 50px;
    }

    /* Mise en formation de la section information-1 */

    main .information-1{
        margin-top: 20rem;
    }

    main .information-1 h1, .information-2 h1{
        font-size: 1.5rem;
    }

    main .information-2 h1{
        margin-top: 12rem;
    }


    main .information-1 p , .information-2 p{
        width: 75%;
        font-size: 1rem;

    }


    /* Mise en page de la partie services */

    .services h1 ,.formations h1{
        font-size: 2.3rem;
    }

    .formations h1{
        margin-top: 10rem;
    }

    .services .service-list{
        grid-template-columns: repeat(1 , 1fr);
        gap: 2.5rem;
    }

    .service-list .card-service , .card-formation{
        background: white;
        padding: 2rem;
        border-radius: 0.5rem;
        position: relative;
        transition: 0.3s ;
        height: 400px;
    }

    .card-service .btn-voir-plus{
        position: relative;
        top: -85px;
    }


    /* mise en forme de la section formation */

    main .formations{
        width: 100%;
        margin: 2.3rem auto;
    }

    main .formations-list{
        display: grid;
        grid-template-columns: repeat(1 , 1fr);
        gap: 2rem;

    }

    .card-formation {
        height: 500px;
    }

    .card-formation .btn-Interested{
        position: relative;
        top: 70px;
    }

    .card-formation ul{
        margin: 0 auto;
    }

    .card-formation ul li{
        padding-top: 5px;
    }

    /* Mise en forme de la partie Apropos */

    main .apropos{
        height: 100%;
        display: block;
        margin-bottom: 30rem;

    }

    .aprops-de-nous{
        overflow: scroll;
    }

    .aprops-de-nous h1 {
        font-size: 1.5rem;
        font-weight: 900;
        margin-top: 50px;
    }

    .aprops-de-nous p{
        font-weight: 500;
        font-size: 1rem;
    }

    .contact form{
        width: 90%;
        margin-bottom: auto;
        display: flex;
        flex-direction: column;
        margin-top: 50px;
    }

    .btn-Interested{
        transform: translateY(-40px);
    }

    .swiper {
        margin-top: 2rem;
        width: 650px;
    }

    .information-5{
        display: flex;
        flex-direction: column;
    }


    .information-5 h1{
        font-size: 2rem;
        margin-top: 2rem;
    }

    .information-5 p{
        font-size: 1.2rem;
    }

    .information-5-image img{
        width: 650px;
        height: 310px;
    }

    .information-4{
        height: 70vh;
    }


    .information-4 h1{
        margin-top: 2rem;
        font-size: 1.5rem;
    }

    .swiper-2 ,.swiper-wrapper{
        width: 640px;
    }

    .swiper-slide h2{
        font-size: 1.1rem;
    }

    .swiper-slide p {
        font-size: 1.0rem;
    }

    .info-banniere {
        width: 100%;
    }

    .info-banniere h1{
        font-size: 1.7rem;
    }

    .info-banniere p{
        font-size: 1.1rem;
    }

    .tache-realiser{
        text-align: center;
    }

    .equipe{
        height: 88vh;
    }


    .equipe .p-equipe{
        font-size: 1.1rem;
        width: 90%;
    }

    .profils{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .profil-card{
        width: 170px;
        height: 170px;
        margin: 18px auto;
    }

    .img-profils{
        width: 100%;
        height: 115px;
    }

    .img-profils img{
        width: 100%;
        height: 100%;
    }

    .caption h3{
        font-size: 1rem;
    }

    .caption p{
        font-size: 0.9rem;
    }

    .contact{
        transform: translateY(-100px);
    }

    .slides{
        width: 100%;

    }

    .slide{
        left: calc(50% - 150px);

    }

    .footer-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 2rem auto;

        h2{
            font-size: 1.1rem;
        }

        ul{
            margin-top: 1.5rem;

            li{
                list-style: none;
                margin: 0.5em 0;
                font-size: 1rem;
            }

        }

        i{
            margin-right: 0.5rem;
            font-size: 1.5rem;
            color: #ffffff;
        }
    }

    .footer-container .p-footer{
        width: 80%;
        margin-top: 2rem;

        p{
            font-size: 1rem;
        }
    }

    .footer-container .footer-navigation{
        background: white;
        width: 80%;
        border-radius: 0.5rem;
        margin: 2rem;

        h2{
            color: black;
        }

        ul{
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin: 1rem auto;

            li{
                margin:0 0.5rem;
            }
        }
    }

    .footer-container .footer-info-coordonner{
        width: 80%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        text-align: center;
        margin: 2rem;
        gap: 15px;
    }

    .footer-container .newlester{

        div{
            width: 100%;

            p{
                font-size: 1.1rem;
                margin-bottom: 1.5rem;
            }

            input{
                width: 35%;
                padding: 0.8rem 1rem;
                margin-bottom: 1.5rem;
                outline: none;
                border: none;
                border-radius: 5px;

            }

            button{
                padding: 0.8rem 1.2rem;
                border-radius: 5px;
            }
        }
    }

    .footer-container .copyright{
        height: 100px;
        width: 80%;
        margin-top: 2rem;

        p{
            margin-top: 2rem;
            align-items: center;
            text-align: center;
        }
    }


}



@media screen and (max-width: 720px) {

    header .menu-humberger{
        display: block;
    }

    .logo h1{
        font-size: 1.2rem;
    }

    .logo h2{
        font-size: 1.1rem;
    }

    nav{
        display: none;
    }

    header button{
        display: none;
    }

    main .banniere{
        padding: 1rem;
        width: 100%;
        height: 70vh;
        display: block;
    }

    section .left h1{
        margin: 1rem auto;
        font-size: 1.6rem;

    }

    section .left h2{
        margin: 15px auto;
        font-size: 1.3rem;
        font-weight: 900;
        color: white;
    }

    section .btn-contact{
        margin: 0 auto;
    }

    section .left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        transform: translateY(10px);
    }

    section .left p{
        font-size:1.2rem;
        color: white;
    }

    section .right{
        position: relative;
        right: 15px;
    }

    .right img{
        width: 300px;
        height: 300px;
    }

    .effets .cercle{
        height: 60px;
        width: 60px;
    }


    .cercle:nth-child(1){
        right: 150px;
        top: -60px;
    }

    .cercle:nth-child(2){
        left: -20px;
    }
    .cercle:nth-child(3){
        top: -25px;
        right: 0;
    }

    .cercle:nth-child(4){
        left: 50px;
    }

    /* Mise en formation de la section information-1 */

    main .information-1{
        margin-top: 20rem;
    }

    main .information-1 h1, .information-2 h1{
        font-size: 1.5rem;
    }

    main .information-2 h1{
        margin-top: 12rem;
    }


    main .information-1 p , .information-2 p{
        width: 75%;
        font-size: 1rem;

    }


    /* Mise en page de la partie services */

    .services h1 ,.formations h1{
        font-size: 2.3rem;
    }

    .formations h1{
        margin-top: 10rem;
    }

    .services .service-list{
        grid-template-columns: repeat(1 , 1fr);
        gap: 2.5rem;
    }

    .service-list .card-service , .card-formation{
        background: white;
        padding: 2rem;
        border-radius: 0.5rem;
        position: relative;
        transition: 0.3s ;
        height: 400px;
    }

    .card-service .btn-voir-plus{
        position: relative;
        top: -85px;
    }


    /* mise en forme de la section formation */

    main .formations{
        width: 100%;
        margin: 2.3rem auto;
    }

    main .formations-list{
        display: grid;
        grid-template-columns: repeat(1 , 1fr);
        gap: 2rem;

    }

    .card-formation {
        height: 500px;
    }

    .card-formation .btn-Interested{
        position: relative;
        top: 70px;
    }

    .card-formation ul{
        margin: 0 auto;
    }

    .card-formation ul li{
        padding-top: 5px;
    }

    /* Mise en forme de la partie Apropos */

    .apropos{
        height: 100%;
    }

    .aprops-de-nous h1 {
        font-size: 1.5rem;
        font-weight: 900;
        margin-top: 50px;
    }

    .aprops-de-nous p{
        font-weight: 500;
        font-size: 1rem;
    }

    .contact form{
        width: 90%;
        margin-bottom: auto;
        display: flex;
        flex-direction: column;
        margin-top: 50px;
    }

    .btn-Interested{
        transform: translateY(-40px);
    }

    .information-3 h1{
        font-size: 1.6rem;
    }

    .information-3 p{
        font-size: 1.1rem;
        width: 100%;
    }

    .swiper {
        margin-top: 2rem;
        width: 650px;
    }

    .swiper .swiper-wrapper p {
        width: 80%;
        font-size: 1.1rem;

    }

    .information-5{
        display: flex;
        flex-direction: column;
    }


    .information-5 h1{
        font-size: 1.5rem;
        margin-top: 2rem;
    }

    .information-5 p{
        font-size: 1.1rem;
        width: 100%;
    }

    .information-4{
        height: 70vh;
    }


    .information-4 h1{
        margin-top: 2rem;
        font-size: 1.5rem;
    }

    .swiper-2 ,.swiper-wrapper{
        width: 590px;
    }

    .swiper-slide h2{
        font-size: 1.3rem;
    }

    .swiper-slide p {
        font-size: 0.9rem;
    }

    .info-banniere {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 3rem;
    }

    .info-banniere h1{
        font-size: 1.4rem;
    }

    .info-banniere p{
        font-size: 1.1rem;
    }

    .tache-realiser{
        text-align: center;
    }

    .next{
        z-index: 1000;
        color: var(--var-bgcolor);
        left: unset;
        right: 10px;
    }

    .prev{
        z-index: 1000;
        color: var(--var-bgcolor);
    }

    .sliders h1{
        font-size: 1.8rem;
    }

    .equipe{
        height: 88vh;
    }


    .equipe .p-equipe{
        font-size: 1rem;
        width: 90%;
    }

    .profils{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .equipe h1{
        font-size: 1.8rem;
    }

    .profil-card{
        width: 170px;
        height: 170px;
        margin: 18px auto;
    }

    .img-profils{
        width: 100%;
        height: 115px;
    }

    .img-profils img{
        width: 100%;
        height: 100%;
    }

    .caption h3{
        font-size: 1rem;
    }

    .caption p{
        font-size: 0.9rem;
    }



    .slides{
        width: 100%;

    }

    .slide{
        left: calc(50% - 150px);

    }


}


@media screen and (max-device-width: 650px){

    header .menu-humberger{
        display: block;
    }

    .logo h1{
        font-size: 1.1rem;
    }

    .logo h2{
        font-size: 0.9rem;
    }

    nav{
        display: none;
    }

    header button{
        display: none;
    }

    main .banniere{
        padding: 1rem;
        width: 100%;
        height: 100vh;
    }

    section .left h1{
        margin: 0.5rem auto;
        font-size: 2.2rem;
        display: flex;
        align-items: center;
        text-align: center;

    }

    section .left h2{
        margin: 10px auto;
        font-size: 1.3rem;
        font-weight: 900;
        color: white;
    }

    section .btn-contact{
        margin: 0 auto;
    }

    section .left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    section .left p{
        font-size:1rem;
        color: white;
    }

    section .right{
        margin-top: 5rem;
    }

    .right img{
        width: 270px;
        height: 270px;
    }

    .effets .cercle{
        height: 55px;
        width: 55px;
    }


    .cercle:nth-child(1){
        right: 150px;
        top: -60px;
    }

    .cercle:nth-child(2){
        left: -20px;
    }
    .cercle:nth-child(3){
        top: -25px;
        right: 0;
    }

    .cercle:nth-child(4){
        left: 50px;
    }

    /* Mise en formation de la section information-1 */

    main .information-1{
        margin-top: -5px;
    }

    main .information-1 h1, .information-2 h1{
        font-size: 1.4rem;
    }


    main .information-1 p , .information-2 p{
        width: 100%;
        font-size: 1rem;

    }


    /* Mise en page de la partie services */

    .services h1 ,.formations h1{
        font-size: 2.2rem;
    }


    .services .service-list{
        grid-template-columns: repeat(1 , 1fr);
        gap: 2.5rem;
    }

    .service-list .card-service , .card-formation{
        background: white;
        padding: 2rem;
        border-radius: 0.5rem;
        position: relative;
        transition: 0.3s ;
        height: 400px;
    }

    .card-service h2{
        font-size: 1.2rem;
    }

    .card-service p, .card-formation p{
        font-size: 0.8rem;
    }

    .card-service .btn-voir-plus{
        position: relative;
        top: -80px;
    }


    /* mise en forme de la section formation */

    main .formations{
        width: 100%;
        margin: 0 auto;
    }

    main .formations-list{
        display: grid;
        grid-template-columns: repeat(1 , 1fr);
        gap: 2rem;

    }

    .card-formation {
        height: 500px;
    }

    .card-formation .btn-Interested{
        position: relative;
        top: 70px;
    }

    .card-formation ul{
        margin: 0 auto;
    }

    .card-formation ul li{
        padding-top: 5px;
        font-size: 0.8rem;
    }

    /* Mise en forme de la partie Apropos */

    main .apropos{
        display: block;
        margin-bottom: 40rem;
        height: 100%;

    }

    .aprops-de-nous{
        overflow: scroll;
    }

    .aprops-de-nous h1 {
        font-size: 1.3rem;
        font-weight: 900;
        margin-top: 20px;
    }

    .aprops-de-nous p{
        font-weight: 500;
        font-size: 0.9rem;
    }

    .contact form{
        width: 90%;
        margin-bottom: auto;
        display: flex;
        flex-direction: column;
        margin-top: 50px;
    }

    .btn-Interested{
        transform: translateY(-40px);
    }

    .information-3 h1{
        font-size: 1.6rem;
    }

    .information-3 p{
        font-size: 1.1rem;
        width: 100%;
    }

    .swiper {
        width: 400px;
    }

    .swiper .swiper-slide p{
        font-size: 1rem;
    }

    .swiper-button-prev ,.swiper-button-next{
        display: none;
    }

    .swiper p{
        width: 80%;
        font-size: 1.5rem;
    }

    .information-5{
        display: flex;
        flex-direction: column;
    }


    .information-5 h1{
        font-size: 1.5rem;
    }

    .information-5 p{
        font-size: 1.1rem;
        width: 100%;
    }

    .information-4{
        height: 70vh;
    }


    .information-4 h1{
        font-size: 1.7rem;
    }

    .swiper-2{
        width: 100%;
    }

    .swiper-2 .swiper-wrapper{
        width: 100%;
    }

    .swiper-slide h2{
        font-size: 1.1rem;
    }

    .swiper-slide p {
        font-size: 0.9rem;
    }

    .info-banniere {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 2rem;
    }

    .info-banniere h1{
        font-size: 1.4rem;
    }

    .info-banniere p{
        font-size: 1.1rem;
    }

    .tache-realiser{
        text-align: center;
    }


    .next{
        z-index: 1000;
        color: var(--var-bgcolor);
        left: unset;
        right: 10px;
    }

    .prev{
        z-index: 1000;
        color: var(--var-bgcolor);
    }

    .sliders h1{
        font-size: 1.8rem;
    }


    .sliders h1{
        font-size: 1.8rem;
    }

    .slide h2{
        font-size: 1.5rem;

    }

    .slide p{
        font-size: 1rem;
        padding: 0 5px;

    }



    .equipe .p-equipe{
        font-size: 1rem;
        width: 100%;
    }

    .profils{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        margin-top: 20px;
    }

    .equipe h1{
        font-size: 1.8rem;
    }

    .profil-card{
        width: 170px;
        height: 170px;
        margin: 10px auto;
    }

    .profil-card:hover{
        height: 300px;
    }


    .img-profils{
        width: 100%;
        height: 115px;
    }

    .img-profils img{
        width: 100%;
        height: 100%;
    }

    .caption{
        width: 100%;
    }

    .caption h3{
        font-size: 1rem;
    }

    .caption p{
        font-size: 0.9rem;
        width: 100%;
    }

    .apropos{
        position: relative;
        top: 50px;
    }

    .footer{
        margin-top: -500px;
    }

    .footer-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 2rem auto;

        h2{
            font-size: 1.1rem;
        }

        ul{
            margin-top: 1.5rem;

            li{
                list-style: none;
                margin: 0.5em 0;
                font-size: 1rem;
            }

        }

        i{
            margin-right: 0.5rem;
            font-size: 1.5rem;
            color: #ffffff;
        }
    }

    .footer-container .p-footer{
        width: 80%;
        margin-top: 2rem;

        p{
            font-size: 1rem;
        }
    }

    .footer-container .footer-navigation{
        background: white;
        width: 80%;
        border-radius: 0.5rem;
        margin: 2rem;

        h2{
            color: black;
        }

        ul{
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin: 1rem auto;

            li{
                margin:0 0.5rem;
            }
        }


    }

    .footer-container .footer-info-coordonner{
        width: 80%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        text-align: center;
        margin: 2rem;
        gap: 15px;
    }

    .footer-container .newlester{

        div{
            width: 100%;

            p{
                font-size: 1.1rem;
                margin-bottom: 1.5rem;
            }

            input{
                width: 35%;
                padding: 0.8rem 1rem;
                margin-bottom: 1.5rem;
                outline: none;
                border: none;
                border-radius: 5px;

            }

            button{
                padding: 0.8rem 1.2rem;
                border-radius: 5px;
            }
        }
    }

    .footer-container .copyright{
        height: 100px;
        width: 80%;
        margin-top: 2rem;

        p{
            margin-top: 2rem;
            align-items: center;
            text-align: center;
        }
    }


}

    .slides{
        width: 100%;

    }

    .slide{
        left: calc(50% - 150px);

    }



@media screen and (max-device-width: 586px){

    header .menu-humberger{
        display: block;
    }

    .logo h1{
        font-size: 1.1rem;
    }

    .logo h2{
        font-size: 0.9rem;
    }

    nav{
        display: none;
    }

    header button{
        display: none;
    }

    main .banniere{
        padding: 1rem;
        width: 100%;
        height: 100vh;
    }

    section .left h1{
        margin: 0.5rem auto;
        font-size: 2.2rem;
        display: flex;
        align-items: center;
        text-align: center;

    }

    section .left h2{
        margin: 10px auto;
        font-size: 1.3rem;
        font-weight: 900;
        color: white;
    }

    section .btn-contact{
        margin: 0 auto;
    }

    section .left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    section .left p{
        font-size:1rem;
        color: white;
    }

    section .right{
        margin-top: 5rem;
    }

    .right img{
        width: 270px;
        height: 270px;
    }

    .effets .cercle{
        height: 55px;
        width: 55px;
    }


    .cercle:nth-child(1){
        right: 150px;
        top: -60px;
    }

    .cercle:nth-child(2){
        left: -20px;
    }
    .cercle:nth-child(3){
        top: -25px;
        right: 0;
    }

    .cercle:nth-child(4){
        left: 50px;
    }

    /* Mise en formation de la section information-1 */

    main .information-1{
        margin-top: -5px;
    }

    main .information-1 h1, .information-2 h1{
        font-size: 1.4rem;
    }


    main .information-1 p , .information-2 p{
        width: 100%;
        font-size: 1rem;

    }


    /* Mise en page de la partie services */

    .services h1 ,.formations h1{
        font-size: 2.2rem;
    }


    .services .service-list{
        grid-template-columns: repeat(1 , 1fr);
        gap: 2.5rem;
    }

    .service-list .card-service , .card-formation{
        background: white;
        padding: 2rem;
        border-radius: 0.5rem;
        position: relative;
        transition: 0.3s ;
        height: 400px;
    }

    .card-service h2{
        font-size: 1.2rem;
    }

    .card-service p, .card-formation p{
        font-size: 0.8rem;
    }

    .card-service .btn-voir-plus{
        position: relative;
        top: -80px;
    }


    /* mise en forme de la section formation */

    main .formations{
        width: 100%;
        margin: 0 auto;
    }

    main .formations-list{
        display: grid;
        grid-template-columns: repeat(1 , 1fr);
        gap: 2rem;

    }

    .card-formation {
        height: 500px;
    }

    .card-formation .btn-Interested{
        position: relative;
        top: 70px;
    }

    .card-formation ul{
        margin: 0 auto;
    }

    .card-formation ul li{
        padding-top: 5px;
        font-size: 0.8rem;
    }

    /* Mise en forme de la partie Apropos */

    main .apropos{
        display: block;
        margin-bottom: 40rem;
        height: 100%;

    }

    .aprops-de-nous h1 {
        font-size: 1.3rem;
        font-weight: 900;
        margin-top: 20px;
    }

    .aprops-de-nous p{
        font-weight: 500;
        font-size: 0.9rem;
    }

    .contact form{
        width: 90%;
        margin-bottom: auto;
        display: flex;
        flex-direction: column;
        margin-top: 50px;
    }

    .btn-Interested{
        transform: translateY(-40px);
    }

    .information-3 h1{
        font-size: 1.6rem;
    }

    .information-3 p{
        font-size: 1.1rem;
        width: 100%;
    }

    .swiper {
        width: 400px;
    }

    .swiper .swiper-slide p{
        font-size: 1rem;
    }

    .swiper-button-prev ,.swiper-button-next{
        display: none;
    }

    .swiper p{
        width: 80%;
        font-size: 1.5rem;
    }

    .information-5{
        display: flex;
        flex-direction: column;
    }


    .information-5 h1{
        font-size: 1.5rem;
    }

    .information-5 p{
        font-size: 1.1rem;
        width: 100%;
    }

    .information-4{
        height: 60vh;
    }


    .information-4 h1{
        font-size: 1.7rem;
    }

    .swiper-2{
        width: 100%;
    }

    .swiper-2 .swiper-wrapper{
        width: 100%;
    }

    .swiper-slide h2{
        font-size: 1.1rem;
    }

    .swiper-slide p {
        font-size: 0.7rem;
    }

    .info-banniere {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 2rem;
    }

    .info-banniere h1{
        font-size: 1.4rem;
    }

    .info-banniere p{
        font-size: 1.1rem;
    }

    .tache-realiser{
        text-align: center;
    }

    .next{
        z-index: 1000;
        color: var(--var-bgcolor);
        left: unset;
        right: 10px;
    }

    .prev{
        z-index: 1000;
        color: var(--var-bgcolor);
    }

    .sliders h1{
        font-size: 1.8rem;
    }


    .sliders h1{
        font-size: 1.8rem;
    }

    .slide h2{
        font-size: 1.5rem;

    }

    .slide p{
        font-size: 1rem;
        padding: 0 5px;

    }



    .equipe .p-equipe{
        font-size: 1rem;
        width: 100%;
    }

    .profils{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        margin-top: 20px;
    }

    .equipe h1{
        font-size: 1.8rem;
    }

    .profil-card{
        width: 170px;
        height: 170px;
        margin: 10px auto;
    }

    .profil-card:hover{
        height: 300px;
    }

    .img-profils{
        width: 100%;
        height: 115px;
    }

    .img-profils img{
        width: 100%;
        height: 100%;
    }

    .caption{
        width: 100%;
    }

    .caption h3{
        font-size: 1rem;
    }

    .caption p{
        font-size: 0.9rem;
        width: 100%;
    }

    .apropos{
        position: relative;
        top: 50px;
    }


    .slides{
        width: 100%;

    }

    .slide{
        left: calc(50% - 150px);

    }

}


@media screen and (max-device-width: 480px) {


    header .menu-humberger{
        display: block;
    }

    .logo h1{
        font-size: 1.1rem;
    }

    .logo h2{
        font-size: 0.9rem;
    }

    nav{
        display: none;
    }

    header button{
        display: none;
    }

    main .banniere{
        padding: 1rem;
        width: 100%;
        height: 100vh;
    }

    section .left h1{
        margin: 0.5rem auto;
        font-size: 2.2rem;
        display: flex;
        align-items: center;
        text-align: center;

    }

    section .left h2{
        margin: 10px auto;
        font-size: 1.3rem;
        font-weight: 900;
        color: white;
    }

    section .btn-contact{
        margin: 0 auto;
    }

    section .left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    section .left p{
        font-size:1rem;
        color: white;
    }

    section .right{
       margin-top: 5rem;
    }

    .right img{
        width: 270px;
        height: 270px;
    }

    .effets .cercle{
        height: 55px;
        width: 55px;
    }


    .cercle:nth-child(1){
        right: 150px;
        top: -60px;
    }

    .cercle:nth-child(2){
        left: -20px;
    }
    .cercle:nth-child(3){
        top: -25px;
        right: 0;
    }

    .cercle:nth-child(4){
        left: 50px;
    }

    /* Mise en formation de la section information-1 */

    main .information-1{
        margin-top: -5px;
    }

    main .information-1 h1, .information-2 h1{
        font-size: 1.4rem;
    }


    main .information-1 p , .information-2 p{
        width: 100%;
        font-size: 1rem;

    }


    /* Mise en page de la partie services */

    .services h1 ,.formations h1{
        font-size: 2.2rem;
    }


    .services .service-list{
        grid-template-columns: repeat(1 , 1fr);
        gap: 2.5rem;
    }

    .service-list .card-service , .card-formation{
        background: white;
        padding: 2rem;
        border-radius: 0.5rem;
        position: relative;
        transition: 0.3s ;
        height: 400px;
    }

    .card-service h2{
        font-size: 1.2rem;
    }

    .card-service p, .card-formation p{
        font-size: 0.8rem;
    }

    .card-service .btn-voir-plus{
        position: relative;
        top: -80px;
    }


    /* mise en forme de la section formation */

    main .formations{
        width: 100%;
        margin: 0 auto;
    }

    main .formations-list{
        display: grid;
        grid-template-columns: repeat(1 , 1fr);
        gap: 2rem;

    }

    .card-formation {
        height: 500px;
    }

    .card-formation .btn-Interested{
        position: relative;
        top: 70px;
    }

    .card-formation ul{
        margin: 0 auto;
    }

    .card-formation ul li{
        padding-top: 5px;
        font-size: 0.8rem;
    }

    /* Mise en forme de la partie Apropos */

    main .apropos{
        display: block;
        margin-bottom: 40rem;
        height: 100%;

    }

    .aprops-de-nous{
        overflow: scroll;
    }

    .aprops-de-nous h1 {
        font-size: 1.3rem;
        font-weight: 900;
        margin-top: 20px;
    }

    .aprops-de-nous p{
        font-weight: 500;
        font-size: 0.9rem;
    }

    .contact form{
        width: 90%;
        margin-bottom: auto;
        display: flex;
        flex-direction: column;
        margin-top: 50px;
    }

    .btn-Interested{
        transform: translateY(-40px);
    }

    .information-3 h1{
        font-size: 1.6rem;
    }

    .information-3 p{
        font-size: 1.1rem;
        width: 100%;
    }

    .swiper {
        width: 400px;
    }

    .swiper .swiper-slide p{
        font-size: 1rem;
    }

    .swiper-button-prev ,.swiper-button-next{
        display: none;
    }

    .swiper p{
        width: 80%;
        font-size: 1.5rem;
    }

    .information-5{
        display: flex;
        flex-direction: column;
    }


    .information-5 h1{
        font-size: 1.5rem;
    }

    .information-5 p{
        font-size: 1.1rem;
        width: 100%;
    }

    .information-4{
        height: 60vh;
    }


    .information-4 h1{
        font-size: 1.7rem;
    }

    .swiper-2{
        width: 100%;
    }

    .swiper-2 .swiper-wrapper{
        width: 100%;
    }

    .swiper-slide h2{
        font-size: 1.1rem;
    }

    .swiper-slide p {
        font-size: 0.7rem;
    }

    .info-banniere {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 2rem;
    }

    .info-banniere h1{
        font-size: 1.4rem;
    }

    .info-banniere p{
        font-size: 1.1rem;
    }

    .tache-realiser{
        text-align: center;
    }

    .next{
        z-index: 1000;
        color: var(--var-bgcolor);
        left: unset;
        right: 10px;
    }

    .prev{
        z-index: 1000;
        color: var(--var-bgcolor);
    }

    .sliders h1{
        font-size: 1.8rem;
    }


    .sliders h1{
        font-size: 1.8rem;
    }

    .slide h2{
        font-size: 1.5rem;

    }

    .slide p{
        font-size: 1rem;
        padding: 0 5px;

    }



    .equipe .p-equipe{
        font-size: 1rem;
        width: 100%;
    }

    .profils{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        margin-top: 20px;
    }

    .equipe h1{
        font-size: 1.8rem;
    }

    .profil-card{
        width: 170px;
        height: 170px;
        margin: 10px auto;
    }

    .profil-card:hover{
        height: 300px;
    }

    .img-profils{
        width: 100%;
        height: 115px;
    }

    .img-profils img{
        width: 100%;
        height: 100%;
    }

    .caption{
        width: 100%;
    }

    .caption h3{
        font-size: 1rem;
    }

    .caption p{
        font-size: 0.9rem;
        width: 100%;
    }

    .apropos{
        position: relative;
        top: 50px;
    }

    .slides{
        width: 100%;

    }

    .slide{
        left: calc(50% - 150px);

    }

    .footer-container .newlester{
        height: 350px;

        div{
            width: 100%;
            display: grid;
            grid-template-columns: repeat(1,1fr);

            p{
                font-size: 1rem;
                margin-bottom: 1.5rem;
            }

            input{
                width: 90%;
                padding: 0.8rem 1rem;
                margin-bottom: 1.5rem;
                outline: none;
                border: none;
                border-radius: 5px;

            }

            button{
                width: 90%;
                padding: 0.8rem 1.2rem;
                border-radius: 5px;
                margin: 0 auto;
            }
        }
    }

    .footer-container .copyright{
        height: 100px;
        width: 70%;
        margin-top: 2rem;

        p{
            font-size: 0.5rem;
        }

    }
}

@media screen and (max-width: 428px) {
    header .menu-humberger{
        display: block;
    }


    .logo h1{
        font-size: 1rem;
    }

    .logo h2{
        font-size: 0.8rem;
    }

    nav{
        display: none;
    }

    header button{
        display: none;
    }

    main .banniere{
        padding: 1rem;
        width: 100%;
        height: 100vh;
        display: block;
    }

    .banniere .btn-contact{
        font-size: 0.9rem;
        background: white;
        color: var(--var-secondaryColor);
    }

    section .left h1{
        margin: 0.5rem auto;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        text-align: center;

    }

    section .left h2{
        margin: 10px auto;
        font-size: 1.1rem;
        font-weight: 900;
        color: white;
    }

    section .btn-contact{
        margin: 1rem auto;
    }

    section .left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    section .left p{
        font-size:0.9rem;
        color: white;
    }

    section .right{
        margin-top: 5rem;
        left: 10px;

    }

    section .right img{
        width: 220px;
        height: 220px;
    }

    .aprops-de-nous h1{
        margin-top: 140px;
    }


    .formations h1{
        font-size: 1.8rem;
        margin-top: 90px;
    }

    .information-1 {
        height: 100vh;
        margin: 10rem 0;
    }

    .information-1 h1{
        margin-top: 10rem;
    }

    .information-2 {
        height: 100vh;
        margin-top: 2rem;
    }

    .information-3{
        height: 100vh;
    }

    .information-3 h1{
        font-size: 1.6rem;
    }

    .information-3 p{
        font-size: 1.1rem;
        width: 100%;
    }

    .swiper {
        width: 255px;
        height: 100vh;
    }

    .swiper-button-prev ,.swiper-button-next{
        display: none;
    }

    .swiper p{
        width: 90%;
    }

    .swiper .swiper-wrapper{
        margin: 15px 0;
    }

    .information-5{
        display: flex;
        flex-direction: column;
    }


    .information-5 h1{
        font-size: 1.5rem;
        margin-top: 2rem;
    }

    .information-5 p{
        font-size: 1.1rem;
    }

    .information-4{
        display: none;
        height: 60vh;
        width: 270px;
    }


    .information-4 h1{
        margin-top: 2rem;
        font-size: 1.3rem;
    }

    .swiper-2 ,.swiper-wrapper{
        width: 300px;
    }

    .swiper-slide h2{
        font-size: 1rem;
    }

    .swiper-slide p {
        font-size: 0.5rem;
    }

    .info-banniere {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 2rem;
    }

    .info-banniere h1{
        font-size: 1.4rem;
    }

    .info-banniere p{
        font-size: 1.1rem;
    }

    .tache-realiser{
        text-align: center;
    }

    .sliders{
        width: 100%;
    }

    .slides {
        width: 100%;
    }

    .sliders h1{
        font-size: 1.6rem;
    }

    .slide h2{
        font-size: 1.4rem;

    }

    .slide p{
        font-size: 1rem;
        padding: 0 5px;

    }

    .equipe{
        height: 100vh;
        margin: -150px 0 125px 0;
    }


    .equipe .p-equipe{
        font-size: 1rem;
        width: 90%;
    }

    .profils{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .equipe h1{
        font-size: 1.8rem;
    }

    .profil-card{
        width: 170px;
        height: 170px;
        margin: 10px auto;
    }

    .img-profils{
        width: 100%;
        height: 115px;
    }

    .img-profils img{
        width: 100%;
        height: 100%;
    }

    .caption h3{
        font-size: 1rem;
    }

    .caption p{
        font-size: 0.9rem;
    }



    .footer-coordonnées ul li{
        font-size: 1rem;
    }

    /* Mise en forme de la partie Apropos */
    .apropos{
        display: block;
        height: 100%;
    }

    .aprops-de-nous{
        margin-top: 680px;
    }

    .aprops-de-nous h1 {
        font-size: 1.2rem;
        font-weight: 900;
        margin-top: 50px;
    }

    .aprops-de-nous p{
        font-weight: 500;
        font-size: 0.9rem;
    }

    .contact form{
        width: 90%;
        display: flex;
        flex-direction: column;
        margin-top: 50px;
    }

    .contact h1{
        font-size: 1.3rem;
    }


    .next , .prev{
        display: none;
    }

    .footer-container .footer-navigation{
        background: white;
        width: 80%;
        height: 200px;
        border-radius: 0.5rem;
        margin: 2rem;

        h2{
            color: black;
        }

        ul{
            display: block;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin: 1rem auto;

            li{
                margin: 0.5rem;
            }
        }


    }


    .footer-container .newlester{
        height: 350px;

        div{
            width: 100%;
            display: grid;
            grid-template-columns: repeat(1,1fr);

            p{
                font-size: 1rem;
                padding: 0 1rem;
                margin-bottom: 1.5rem;
            }

            input{
                width: 90%;
                padding: 0.8rem 1rem;
                margin-bottom: 1.5rem;
                outline: none;
                border: none;
                border-radius: 5px;

            }

            button{
                width: 90%;
                padding: 0.8rem 1.2rem;
                border-radius: 5px;
                margin: 0 auto;
            }
        }
    }
}


@media screen and (max-width: 390px) {
    header .menu-humberger{
        display: block;
    }


    .logo h1{
        font-size: 1rem;
    }

    .logo h2{
        font-size: 0.8rem;
    }

    nav{
        display: none;
    }

    header button{
        display: none;
    }

    main .banniere{
        padding: 1rem;
        width: 100%;
        height: 100vh;
        display: block;
    }

    .banniere .btn-contact{
        font-size: 0.9rem;
        background: white;
        color: var(--var-secondaryColor);
    }

    section .left h1{
        margin: 0.5rem auto;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        text-align: center;

    }

    section .left h2{
        margin: 10px auto;
        font-size: 1.1rem;
        font-weight: 900;
        color: white;
    }

    section .btn-contact{
        margin: 1rem auto;
    }

    section .left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    section .left p{
        font-size:0.9rem;
        color: white;
    }

    section .right{
        margin-top: 5rem;
        left: 10px;

    }

    section .right img{
        width: 200px;
        height: 200px;
    }

    .aprops-de-nous h1{
        margin-top: 140px;
    }


    .formations h1{
        font-size: 1.8rem;
        margin-top: 90px;
    }

    .information-1 {
        height: 100vh;
        margin: 10rem 0;
    }

    .information-1 h1{
        margin-top: 10rem;
    }

    .information-2 {
        height: 100vh;
        margin-top: 2rem;
    }

    .information-3{
        height: 100vh;
    }

    .information-3 h1{
        font-size: 1.6rem;
    }

    .information-3 p{
        font-size: 1.1rem;
        width: 100%;
    }

    .information-3 .swiper {
        width: 255px;
        height: 100vh;
    }

    .swiper-button-prev ,.swiper-button-next{
        display: none;
    }

    .swiper p{
        width: 90%;
    }

    .swiper .swiper-wrapper{
        margin: 15px 0;
    }

    .information-5{
        display: flex;
        flex-direction: column;
    }


    .information-5 h1{
        font-size: 1.5rem;
        margin-top: 2rem;
    }

    .information-5 p{
        font-size: 1.1rem;
    }

    .information-4{
        display: none;
        height: 60vh;
        width: 270px;
    }


    .information-4 h1{
        margin-top: 2rem;
        font-size: 1.3rem;
    }

    .swiper-2 ,.swiper-wrapper{
        width: 300px;
    }

    .swiper-slide h2{
        font-size: 1rem;
    }

    .swiper-slide p {
        font-size: 0.5rem;
    }

    .info-banniere {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 2rem;
    }

    .info-banniere h1{
        font-size: 1.4rem;
    }

    .info-banniere p{
        font-size: 1.1rem;
    }

    .tache-realiser{
        text-align: center;
    }

    .sliders{
        width: 100%;
    }

    .slides {
        width: 100%;
    }

    .sliders h1{
        font-size: 1.6rem;
    }

    .slide h2{
        font-size: 1.4rem;

    }

    .slide p{
        font-size: 1rem;
        padding: 0 5px;

    }

    .equipe{
        height: 100vh;
        margin: -150px 0 125px 0;
    }


    .equipe .p-equipe{
        font-size: 1rem;
        width: 90%;
    }

    .profils{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .equipe h1{
        font-size: 1.8rem;
    }

    .profil-card{
        width: 170px;
        height: 170px;
        margin: 10px auto;
    }

    .img-profils{
        width: 100%;
        height: 115px;
    }

    .img-profils img{
        width: 100%;
        height: 100%;
    }

    .caption h3{
        font-size: 1rem;
    }

    .caption p{
        font-size: 0.9rem;
    }

    /* Mise en forme de la partie Apropos */
    .apropos{
        display: block;
        height: 100%;
    }

    .aprops-de-nous{
        margin-top: 680px;
    }

    .aprops-de-nous h1 {
        font-size: 1.2rem;
        font-weight: 900;
        margin-top: 50px;
    }

    .aprops-de-nous p{
        font-weight: 500;
        font-size: 0.9rem;
    }

    .contact form{
        width: 90%;
        display: flex;
        flex-direction: column;
        margin-top: 50px;
    }

    .contact h1{
        font-size: 1.3rem;
    }


    .next , .prev{
       display: none;
    }

}

@media screen and (max-width: 360px){

    header .menu-humberger{
        display: block;
    }


    .logo h1{
        font-size: 1rem;
    }

    .logo h2{
        font-size: 0.8rem;
    }

    nav{
        display: none;
    }

    header button{
        display: none;
    }

    main .banniere{
        padding: 1rem;
        width: 100%;
        height: 100vh;
        display: block;
    }

    section .left h1{
        margin: 0.5rem auto;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        text-align: center;

    }

    section .left h2{
        margin: 10px auto;
        font-size: 1.1rem;
        font-weight: 900;
        color: white;
    }

    section .btn-contact{
        margin: 0 auto;
    }

    section .left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    section .left p{
        font-size:0.9rem;
        color: white;
    }

    section .right{
        margin-top: 5rem;
    }

    .aprops-de-nous h1{
        margin-top: 140px;
    }


    .formations h1{
        font-size: 1.8rem;
        margin-top: 90px;
    }

    .information-1 {
        height: 100vh;
        margin-top: 10rem;
    }

    .information-2 {
        height: 100vh;
        margin-top: 5rem;
    }

    .information-3{
        height: 100vh;
    }

    .information-3 h1{
        font-size: 1.6rem;
    }

    .information-3 p{
        font-size: 1.1rem;
        width: 100%;
    }

    .swiper {
        width: 255px;
        height: 100vh;
    }

    .swiper-button-prev ,.swiper-button-next{
        display: none;
    }

    .swiper p{
        width: 100%;
    }

    .swiper .swiper-wrapper{
        margin: 15px 0;
    }

    .information-5{
        display: flex;
        flex-direction: column;
    }

    .info-5 .btn-info{
        display: flex;
        justify-content: space-around;
        width: 100%;
    }

    .btn-info button{
        width: 100%;
        font-size: 1rem;
    }


    .information-5 h1{
        font-size: 1.5rem;
        margin-top: 2rem;
    }

    .information-5 p{
        font-size: 1.1rem;
    }

    .information-4{
        display: none;
        height: 60vh;
        width: 270px;
    }


    .information-4 h1{
        margin-top: 2rem;
        font-size: 1.3rem;
    }

    .swiper-2 ,.swiper-wrapper{
        width: 300px;
    }

    .swiper-slide h2{
        font-size: 1rem;
    }

    .swiper-slide p {
        font-size: 0.5rem;
    }

    .info-banniere {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 2rem;
    }

    .info-banniere h1{
        font-size: 1.4rem;
    }

    .info-banniere p{
        font-size: 1.1rem;
    }

    .tache-realiser{
        text-align: center;
    }

    .equipe{
        height: 100vh;
        margin: -150px 0 125px 0;
    }

    .sliders{
        width: 100%;
        height: 70%;
        margin: 5rem auto;
        text-align: center;
        overflow: scroll;
    }

    .sliders h1{
        font-size: 2rem;
    }

    .sliders  .slides .slider-img{
        padding: 1rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-top: -1px;
    }

    .sliders  .slides img{
        width: 80px;
        height: 80px;
        border-radius: 50%;
    }


    .slides p{
        padding: 1.1rem;
        font-size: 1rem;
        color: white;
        margin-top: -3rem;
        font-style: italic;
    }

    .equipe .p-equipe{
        font-size: 1rem;
        width: 90%;
    }

    .profils{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .equipe h1{
        font-size: 1.8rem;
    }

    .profil-card{
        width: 170px;
        height: 170px;
        margin: 10px auto;
    }

    .img-profils{
        width: 100%;
        height: 115px;
    }

    .img-profils img{
        width: 100%;
        height: 100%;
    }

    .caption h3{
        font-size: 1rem;
    }

    .caption p{
        font-size: 0.9rem;
    }


    /* Mise en forme de la partie Apropos */
    .apropos{
        display: block;
        height: 100%;
    }

    .aprops-de-nous{
        margin-top: 680px;
    }

    .aprops-de-nous h1 {
        font-size: 1.2rem;
        font-weight: 900;
        margin-top: 50px;
    }

    .aprops-de-nous p{
        font-weight: 500;
        font-size: 0.9rem;
    }

    .contact form{
        width: 90%;
        display: flex;
        flex-direction: column;
        margin-top: 50px;
    }

    .contact h1{
        font-size: 1.3rem;
    }

}



@media screen and (min-width: 220px) and (max-width: 320px) {


    header .menu-humberger{
        display: block;
    }


    .logo h1{
        font-size: 1rem;
    }

    .logo h2{
        font-size: 0.8rem;
    }

    nav{
        display: none;
    }

    header button{
        display: none;
    }

    main .banniere{
        padding: 1rem;
        width: 100%;
        height: 100vh;
        display: block;
    }

    section .left h1{
        margin: 0.5rem auto;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        text-align: center;

    }

    section .left h2{
        margin: 10px auto;
        font-size: 1.1rem;
        font-weight: 900;
        color: white;
    }

    section .btn-contact{
        margin: 0 auto;
    }

    section .left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    section .left p{
        font-size:0.9rem;
        color: white;
    }

    section .right{
        margin-top: 2rem;
    }

    .formations h1{
        font-size: 1.8rem;
        margin-top: 90px;
    }

    .information-1 {
        height: 100vh;
        margin-top: 10rem;
    }

    .information-2 {
        height: 100vh;
        margin-top: 5rem;
    }

    .information-3{
        height: 90vh;
    }

    .information-3 h1{
        font-size: 1.6rem;
    }

    .information-3 p{
        font-size: 1.1rem;
        width: 100%;
    }

    .swiper {
        width: 255px;
        height: 100vh;
    }

    .swiper-button-prev ,.swiper-button-next{
        display: none;
    }

    .swiper p{
        width: 100%;
    }

    .swiper .swiper-wrapper{
        margin: 15px 0;
    }

    .information-5{
        display: flex;
        flex-direction: column;
    }

    .info-5 .btn-info{
        display: flex;
        justify-content: space-around;
        width: 100%;
    }

    .btn-info button{
        width: 100%;
        font-size: 1rem;
    }


    .information-5 h1{
        font-size: 1.5rem;
        margin-top: 2rem;
    }

    .information-5 p{
        font-size: 1.1rem;
    }

    .information-4{
        display: none;
        height: 60vh;
        width: 270px;
    }


    .information-4 h1{
        margin-top: 2rem;
        font-size: 1.3rem;
    }

    .information-3{
        height: 100vh;
    }

    .information-3 .swiper{
        height: 60vh;
    }

    .swiper-2 ,.swiper-wrapper{
        width: 300px;
    }

    .swiper-slide h2{
        font-size: 1rem;
    }

    .swiper-slide p {
        font-size: 0.5rem;
    }

    .info-banniere {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 2rem;
    }

    .info-banniere h1{
        font-size: 1.4rem;
    }

    .info-banniere p{
        font-size: 1.1rem;
    }

    .tache-realiser{
        text-align: center;
    }

    .equipe{
        height: 100vh;
        margin: -150px 0 125px 0;
    }

    .sliders{
        width: 100%;
        height: 70%;
        margin: 5rem auto;
        text-align: center;
        overflow: scroll;
    }

    .sliders h1{
        font-size: 1.5rem;
    }

    .sliders  .slides .slider-img{
        padding: 1rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-top: -1px;
    }

    .sliders  .slides img{
        width: 80px;
        height: 80px;
        border-radius: 50%;
    }

    .slides h2{
        font-size: 1.1rem;
    }


    .slides p{
        padding: 1rem;
        font-size: 1rem;
        color: white;
        margin-top: -2rem;
        font-style: italic;
    }

    .equipe .p-equipe{
        font-size: 1rem;
        width: 90%;
    }

    .profils{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .equipe h1{
        font-size: 1.8rem;
    }

    .profil-card{
        width: 170px;
        height: 170px;
        margin: 10px auto;
    }

    .img-profils{
        width: 100%;
        height: 115px;
    }

    .img-profils img{
        width: 100%;
        height: 100%;
    }

    .caption h3{
        font-size: 1rem;
    }

    .caption p{
        font-size: 0.9rem;
    }


    /* Mise en forme de la partie Apropos */
    .apropos{
        display: block;
        height: 100%;
    }

    .aprops-de-nous{
        margin-top: 680px;
    }

    .aprops-de-nous h1 {
        font-size: 1.2rem;
        font-weight: 900;
        margin-top: 50px;
    }

    .aprops-de-nous p{
        font-weight: 500;
        font-size: 0.9rem;
    }

    .contact form{
        width: 90%;
        display: flex;
        flex-direction: column;
        margin-top: 50px;
    }

    .contact h1{
        font-size: 1.3rem;
    }


    .next , .prev{
        display: none;
    }


}