/* ACCCUEIL RESPONSIVE */
@media screen and (max-width: 1300px){
    .contain-accueil{
        top: 300px;
        left: 50px;
    }
}          
@media screen and (max-width: 330px){
    .contain-accueil .bg-btn button{
        padding: 5px 20px 5px 20px;
    }
}


    /* CONTAIN ACCUEIL */

@media screen and (min-width: 961px) and (max-width: 1244px){
    .contain-accueil{
        grid-template-columns: 4fr 0fr !important;
    }
}
@media screen and (min-width: 1901px) and (max-width: 2100px){
    .contain-accueil-left h1{
        font-size: 3vw !important;
    }
    .contain-accueil-left h3{
        font-size: 2vw !important;
    }
}

@media screen and (min-width: 1801px) and (max-width: 1900px){
    .contain-accueil-left h1{
        font-size: 3vw !important;
    }
    .contain-accueil-left h3{
        font-size: 2vw !important;
    }
    .bg-text-contain-left{
        font-size: 2.5vw !important;
        height: 100% !important;
    }
    .contain-accueil-right h4{
        position: absolute;
        bottom: 18%;
        right: 0;
        width: 45%;
        font-size: 26px !important;
    }
    .contain-accueil-right .devis{
        position: absolute;
        bottom: 8%;
        right: 20px;
        column-gap: 10px;
    }
}

@media screen and (min-width: 1601px) and (max-width: 1800px){
    .contain-accueil-left h1{
        font-size: 3.2vw !important;
    }
    .contain-accueil-left h3{
        font-size: 2vw !important;
    }
    .bg-text-contain-left{
        font-size: 2.5vw !important;
        height: 100% !important;
    }
    .contain-accueil-right h4{
        position: absolute;
        bottom: 18%;
        right: 0;
        width: 45%;
        font-size: 26px !important;
    }
    .contain-accueil-right .devis{
        position: absolute;
        bottom: 8%;
        right: 20px;
        column-gap: 10px;
    }
}

@media screen and (min-width: 1401px) and (max-width: 1600px){
    .contain-accueil-left h1{
        font-size: 3.5vw !important;
    }
    .contain-accueil-left h3{
        font-size: 2vw !important;
    }
    .bg-text-contain-left{
        font-size: 2.5vw !important;
        height: 100% !important;
    }
    .contain-accueil-right h4{
        position: absolute;
        bottom: 18%;
        right: 0;
        width: 45%;
        font-size: 26px !important;
    }
    .contain-accueil-right .devis{
        position: absolute;
        bottom: 8%;
        right: 20px;
        column-gap: 10px;
    }
}

@media screen and (min-width: 1301px) and (max-width: 1400px){
    .contain-accueil-left h1{
        font-size: 4vw !important;
    }
    .contain-accueil-left h3{
        font-size: 2.8vw !important;
    }
    .bg-text-contain-left{
        font-size: 2.5vw !important;
        height: 100% !important;
    }
    .contain-accueil-right h4{
        position: absolute;
        bottom: 18%;
        right: 0;
        width: 45%;
        font-size: 26px !important;
    }
    .contain-accueil-right .devis{
        position: absolute;
        bottom: 8%;
        right: 20px;
        column-gap: 10px;
    }
}

@media screen and (min-width: 1101px) and (max-width: 1300px){
    .contain-accueil-left h1{
        font-size: 4.5vw !important;
    }
    .contain-accueil-left h3{
        font-size: 3vw !important;
    }
    .bg-text-contain-left{
        font-size: 2.6vw !important;
        height: 100% !important;
    }
    .contain-accueil-right h4{
        position: absolute;
        bottom: 18%;
        right: 0;
        width: 45%;
        font-size: 26px !important;
    }
    .contain-accueil-right .devis{
        position: absolute;
        bottom: 8%;
        right: 20px;
        column-gap: 10px;
    }
}

@media screen and (min-width: 961px) and (max-width: 1100px){
    .contain-accueil-left h1{
        font-size: 5.5vw !important;
    }
    .bg-text-contain-left{
        font-size: 3.3vw !important;
        height: 100% !important;
    }
    .contain-accueil-right h4{
        position: absolute;
        bottom: 18%;
        right: 0;
        width: 45%;
        font-size: 26px !important;
    }
    .contain-accueil-right .devis{
        position: absolute;
        bottom: 8%;
        right: 20px;
        column-gap: 10px;
    }
}

@media screen and (min-width: 960px){
    .h4-responsive{
        display: none;
    }
}

@media screen and (max-width: 960px){
    .contain-accueil{
        grid-template-columns: 4fr 0fr !important;
      }
      .contain-accueil-left h1{
        font-size: 5.5vw !important;
      }
      .contain-accueil-left h3{
        font-size: 4vw !important;
      }
      .bg-text-contain-left{
        font-size: 5vw !important;
      }
      .contain-accueil-right h4{
        font-size: 20px !important;
      }
      .h4-ordi{
        display: none;
        bottom: 25px !important;
      }
    
      .contain-accueil-right h4{
        position: absolute;
        bottom: 40px !important;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100% !important;
      }
      .contain-accueil-right .devis{
        column-gap: 20px;
        position: absolute;
        width: 100% !important;
        left: 50%;
        bottom: 95px !important;
        transform: translate(-50%, -50%);
        justify-content: center !important;
    
      }
      /*.bg-img-arrow a{
        bottom: 2.5% !important;
      }*/
}

@media screen and (min-width: 650px) and (max-width: 960px){
    .bg-text-contain-left div{
        width: 100% !important;
        font-size: 30px !important;
    }
    .bg-text-contain-left{
        height: 100% !important;
    }
}

@media screen and (min-width: 603px) and (max-width: 790px){
    .contain-accueil{
        margin-top: 10% !important;
    }
}

@media screen and (max-width: 620px){
    .nav-li-img img{
        width: 25.5vw !important;
    }
    .contain-accueil{
        padding: 140px 40px 0px 80px;
    }
}

@media screen and (max-width: 602px){
    .contain-accueil{
        margin-top: 20% !important;
    }
    .contain-accueil-left h1{
        font-size: 6.8vw !important;
    }
    .contain-accueil-left h3{
        font-size: 4.5vw !important;
    }
    .bg-text-contain-left{
        font-size: 4.7vw !important;
    }
    .contain-accueil-right h4{
        bottom: 35px !important;
    }
    .bg-img-arrow img{
        width: 10% !important;
    }
    .contain-accueil .bg-btn button{
        padding: 10px 30px 10px 30px !important;
    }
    .contain-accueil-right .devis button span{
        font-size: 16px !important;
    }
}

@media screen and (max-width: 600px){
    .contain-accueil-right .devis{
        bottom: 115px !important;
    }
}

@media screen and (max-width: 530px){
    /*.contain-accueil{
        padding: 0px 40px 0px 40px !important;
    }*/
}
@media screen and (max-width: 500px){
    .nav-li-img img{
        width: 27vw !important;
    }
    .contain-accueil{
        margin-top: 0% !important;
        padding: 120px 40px 0px 40px !important;
    }
    .contain-accueil-left h1{
        font-size: 7.5vw !important;
    }
    .contain-accueil-left h3{
        font-size: 6vw !important;
    }
    .bg-text-contain-left{
        font-size: 6vw !important;
        margin-top: 30px;
    }
    .contain-accueil-right .devis button{
        padding: 10px 15px 10px 15px !important;
    }
    .contain-accueil-right h4{
        font-size: 23px !important;
    }
    .contain-accueil-right .devis{
        bottom: 18% !important;
    }
    /*.bg-img-arrow a{
        bottom: 4% !important;
    }*/
    .contain-accueil-right .devis button{
        padding: 10px 15px 10px 15px !important;
        font-size: 14px !important;
    }
    .bg-text-contain-left div{
        display: flex;
        justify-content: center;
    }
    .bg-text-contain-left div:last-of-type{
        display: flex;
        margin: 0px auto;
    }
    
    
}
@media screen and (max-width: 450px){
    .contain-accueil-right .devis button{
        padding: 10px 15px 10px 15px !important;
        font-size: 14px !important;
    }
    .contain-accueil-right .devis .btn-last-child span{
        font-size: 14px !important;
    }
}
@media screen and (max-width: 440px){
    /*.contain-accueil{
        padding: 0px 0px 0px 0px !important;
        margin-top: 20% !important;
    }*/
    .bg-text-contain-left{
        margin: 30px 0px 20px 0px;
    }
    .contain-accueil-left h1{
        font-size: 8vw !important;
    }
    .contain-accueil-left h3{
        font-size: 6vw !important;
    }
    .contain-accueil-right h4{
        padding: 0px 15px;
        bottom: 4% !important;
    }
    .contain-accueil-right .bi-geo{
        width: 18px !important;
    }
    .contain-accueil-right h4 span{
        font-size: 18px !important;
    }
    .contain-accueil-left{
        padding-left: 0px !important;
    }
    .bg-text-contain-left div{
        display: flex;
        justify-content: center;
    }
    .bg-text-contain-left div:last-of-type{
        display: flex;
        margin: 0px auto;
    }
}
@media screen and (max-width: 370px){
    .contain-accueil{
        padding: 90px 0px 0px 0px !important;
    }
    .nav-li-img img{
        width: 38vw !important;
    }
}

@media screen and (max-height: 634px){
    .contain-accueil-right h4{
        font-size: 20px !important;
    }
}
/* FIN CONTAIN ACUCEIL */




@media screen and (max-width: 530px){
    .slide-track h3{
        font-size: 18px !important;
    }

}
    /* FIN ACCUEIL RESPONSIVE */



          
    /* A PROPOS RESPONSIVE */

@media screen and (max-width: 600px){
    .about-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:"about-container-left"
                            "about-container-right";
    }
    .about-section {
        margin-bottom: 0px !important;
    }
    .about-container-left{
        grid-area: about-container-left;
        background-color: #f6f6f6;
        padding: 80px 50px 80px 50px !important;
    }
    .about-container-left-icons{
        margin-top: 60px;
        display: flex;
        justify-content: space-between;
        padding: 0px 0px 0px 0px !important;
    }
}
        /* FIN A PROPOS */
                           

@media screen and (max-width: 960px){
    
      /* ANIMATION PRESTATIONS */
    .section-animation-5 {
        opacity: 0;
    }
    .section-animation-5.visible {
        opacity: 1;
        animation: fadeIn 1s ease-out;
    }
    
    .section-animation-6 {
        opacity: 0;
    }
    .section-animation-6.visible {
        opacity: 1;
        animation: fadeIn 1s ease-out;
    }
    
    .section-animation-7 {
        opacity: 0;
    }
    .section-animation-7.visible {
        opacity: 1;
        animation: fadeIn 1s ease-out;
    }
    
    .section-animation-8 {
        opacity: 0;
    }
    .section-animation-8.visible {
        opacity: 1;
        animation: fadeIn 1s ease-out;
    }


    .about-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:"about-container-left"
                            "about-container-right";
        gap: 0px;
    }
   .about-section {
        margin-bottom: 0px !important;
    }
    .about-container-left{
        grid-area: about-container-left;
        background-color: #f6f6f6;
        padding: 80px 100px 100px 80px;
    }
    .about-container-left-icons{
        margin-top: 60px;
        display: flex;
        justify-content: space-between;
        padding: 0px 40px 0px 40px;
      }


    .about-container-right{
        grid-area: about-container-right;
        position: relative;
        height: 180px;
        background-color: rgba(255, 150, 6, 0.8);
    }
    .about-container-right-number{
        position: absolute;
        text-align: center !important;
        left: 30%;
        right: 30%;
        top: 10px;
        bottom: 0%;
    }
    .experience-count{
        position: absolute;
        bottom: 10px;
    }
      
    .about-container-right-number .number{
        font-size: 90px;
    }
    .about-container-right-number .text{
        font-size: 35px;
        color: white;
      }
}


            
            /* SERVICES RESPONSIVE */

@media screen and (max-width: 960px){
    .bg-services{
        padding: 100px 30px 0px 30px !important;
      }
    .contain-services{
        display: grid; 
        grid-template-columns: 1fr !important;
        grid-template-areas:"contain-services1"
                            "contain-services2"
                            "contain-services3"
                            "contain-services4" !important;
        gap: 0px !important;
        row-gap: 40px !important;
        column-gap: 0px !important;
        margin-top: 40px;
        transition: 1s;
      }

   
}

@media screen and (min-width: 961px) and (max-width: 1600px){
    .bg-services{
        padding: 100px 70px 0px 70px !important;
      }
      .contain-services{
        column-gap: 50px !important;
      }
}



            /* CONTACT RESPONSIVE */
@media screen and (max-width: 960px){
    #contact{
        padding: 0px 10px 0px 10px;
    }
    .bg-contain-contact{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:"contact-form"
                            "contact-details";
        column-gap: 0px !important;
        margin-top: 40px;
      }
      .contact-form{
        grid-area: contact-form;
        background-color: #f6f6f6;
        padding: 40px 20px 80px 20px;
        text-align: left;
        padding: 0px -10px 0px -10px !important;
      }
      .contact-details{
        display: none;
      }
}