/*@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;1,100;1,200;1,300&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Roboto:ital,wght@0,100;0,300;0,400;0,500&family=Poppins:ital,wght@0,200;0,300;1,100;1,200;1,300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root{
   --purple:#873b7c;
   --peru:#cd853f;
   --black:#222;
   --white:#fff;
   --light-black:rgb(49, 46, 49);
   --light-white:#beb9b9;
   --light-bg:#f5f5f5;
   --dark-bg:rgba(44, 43, 43, 0.7);
   --border:.1rem solid rgb(201, 179, 179);
   --box-shadow: 0 .5 1rem rgba(0, 1, 0, .1);

}

*{
    font-family: "Open Sans" sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(.43,1.1,.62,1.08);
    text-transform: capitalize;
    /* scroll-behavior: smooth;*/
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    /*scroll-behavior: smooth;
    scroll-snap-type: y mandatory;*/
    scroll-padding-top: 9rem;
 }

/*************************************CONTACT*****************************/
 .contact{
    padding-top:10rem;
    /*box-shadow: 1px 0.2px 4px 3px rgba(197, 62, 62, 0.1) ;*/
    background: url("/images/bg-contact3.jpg")no-repeat center center fixed;
    background-size: cover;  
    position: relative   


    /*display: flex;*/
   /* align-items: center;*/
    /*flex-direction: column;*/
    /*justify-content: center;*/
    /*height:auto;*/
    /*padding-top: 10rem;*/
}
.heading span{
    margin-top: 2rem;
    font-family: "Montserrat",sans-serif;
    font-size: 4.2rem;
    font-weight: 300;
    color: var(--peru);
}
p{
    font-size: 1.8rem;
    padding: 0 5px;
}
.contact .row{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;   
}
.contact .row .content{
    flex: 1 1 30rem;
    padding: 4rem;
    padding-bottom: 0; 
}
.contact .row .content .info h3 {
   font-family: "Roboto", sans-serif;
    
}
.contact .row form{
    flex: 1 1 45rem; 
    padding: 2rem;
    margin: 2rem;
    margin-bottom: 4rem;
    
}
.contact .row form .box{
   padding: 1.5rem;
   margin: 1rem 0; 
   background-color: #fff;
   opacity: 0.7;
   color:  #333;
   border: 0.5px solid lightgrey;
   text-transform: none;
   font-size: 1.8rem;
   width: 100%;
}
.contact .row form .box::placeholder{
    text-transform: capitalize;
    color:  #333;
}
.contact .row form .message{
    height: 15rem;
   resize: none;
}
.contact .row .content .title{
    text-transform: uppercase;
    color: #bb2020;
    font-size: 3.2rem;
    font-family: "Dancing Script", sans-serif;
    padding-bottom: 2rem;
}
.contact .row .content .info h4{
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    color: rgb(244, 242, 242);
    padding: 1rem 0;
    font-weight: normal;
}
.contact .row .content .info h4 i{
   padding-right: 1rem;
   color:var(--peru);
}



/***********************************SECTION FAQS**************************************/
.faqs{
      padding-top: 4rem;
      background: repeating-linear-gradient(to right, rgba(255, 249, 237, 0.971), rgb(197, 186, 182));
      /*background: repeating-linear-gradient(to right, rgba(240, 237, 237, 0.8), rgba(243, 232, 224, 0.8));*/
      /* background: linear-gradient(to right, rgba(238, 178, 163, 0.8), rgba(254, 180, 123, 0.8));*/
      /*background: conic-gradient(from 0deg, red, yellow, green, red);*/
      height: auto;
}
.faqs .heading h3{
      font-size :4.2rem;
      font-weight: 300;
      color: var(--peru);
}
.faqs a{
      color: rgb(40, 41, 42);
      font-size: 1.3rem;
  }
.faqs a:hover{
      color: rgb(82, 158, 61);
      
  }
  .faqs #home a i{
      color: rgb(40, 41, 42);
      font-size: 1.5rem;
  }
.faqs .row{
      display: flex;
      align-items: flex-start;
      gap: 3rem;
      flex-wrap: wrap;
    
}
/***faqs formulaire***/
.faqs .row form{
      flex: 1 1 40rem;
      border: var(--border);
      border-radius: .5rem; 
      padding: 2rem;
      text-align: center;
      background-color:var(--sub-color);
      background: #fff;
}
.faqs .row form h3{
      margin-bottom: 1rem;
      border-radius: .5rem;
      padding: 1.3rem;
      color: var(--light-black);
      background-color:var(--white);
      font-size: 2rem;
      text-transform: capitalize;
}
.faqs .row form .box{
      padding: 1rem 0;
      margin: 1rem 0.3rem;
      border-bottom: var(--border);
      font-size: 1.5rem;
      color: var(--font);
      background:var(--main-color);
      width: 100%;
}
.faqs .row form .box::placeholder{
      color: #b6a0a0;
      text-align: left;
      /*transform: translate(1%);*/
 
}
.faqs .row form textarea{
      height: 15rem;
      resize:none;

}

/****faqs questions******/
.faqs .row .faq {
      flex: 1 1 40rem;
      /*background-color: #eca865;*/
      background-color: #fff;
      /*background: linear-gradient(to right, rgba(238, 178, 163, 0.8), rgba(254, 180, 123, 0.8));*/
      padding: 1rem;

}
.faqs .row .faq .title{
      margin-bottom:.5rem;
      font-size: 2.2rem;
      color: var(--sub-color);
      text-transform: capitalize;
      text-align: center;
}
.faqs .row .faq .box{
      border-radius: .5rem;
      border: var(--border);
      margin-top: 1rem;
}
.faqs .row .faq .surbox{
      /*border-radius: .5rem;
      border: var(--border);*/
      margin-top: 1rem;
      margin-bottom: 1.5rem;
}
.faqs .row .faq .surbox h2{
      font-size: 2.2rem;
      /*color: #f8b7b7;*/
      color: #667;
      /*border:1px solid black;*/
      /*text-align: center;*/
      padding: 5px 0;
      /*background-color: rgb(225, 226, 227);*/
}
.faqs .row .faq .box h3{
      background-color: var(--main-color);
      color: var(--sub-color);
      padding: 1.5rem;
      font-size: 1.7rem;
      border-radius: .5rem;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
 
}
.faqs .row .faq .box i{
      margin-left: 10px;
      color: #cd853f;
      cursor: pointer;
      
}
.faqs .row .faq .box p{
      padding: 1.5 rem 2rem;
      list-style: none;
      line-height: 2;
      font-size: 1.7rem;
      display: none;
}
.faqs .row .faq .box a{
      margin-left: 1rem;
      font-size: 1.7rem;
      color: var(--peru);
      text-decoration: underline;
   }
.faqs .row .faq .box a:hover{

      color: var(--light-black);

 
}
.faqs .row .faq .box.active p{
      display:inline-block;

}
/************************************************/


/************************************************************************************/
/************************************************************************************/
/********************************RESPONSIVE********************************************/
/*************************MAX WIDTH 2560PX***********************/
/*@media(max-width:2560px){
     .contact{
        height:100vh;
       
    }
}*/
/*************************MAX WIDTH 1920PX***********************/
@media(max-width:1920px){
    /*.contact{
        height:100vh;
      
    }
    .heading span{
    font-family: "Montserrat",sans-serif;
    font-size: 5.4rem;
    font-weight: 300;
    color: var(--peru);
}
    p{
    font-size: 2rem;
    padding: 0 5px;
}
    .contact .row form{
    flex: 1 1 45rem; 
    padding: 2.5rem;
    margin: 2.5rem;
    margin-bottom: 4rem;
    
}
.contact .row form .box{
   padding: 1.7rem;
   margin: 1.3rem 0;
   font-size: 2.2rem;
   width: 100%;
}

.contact .row form .box .message{
    height: 15rem;
   resize: none;
}

.contact .row .content .title{
    
    color: #bb2020;
    font-size: 5.4rem;
    font-family: "Dancing Script", sans-serif;
    padding-bottom: 2.2rem;
}

.contact .row .content .info h3{   
    font-size: 2.4rem;
}*/

.contact .row .content .info h4 i{
   padding-right: 1rem;
   color:var(--peru);
}
}
/*************************MAX WIDTH 1024PX**************************/

    @media(max-width:1024px) {
       /* .contact{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-left: 0;
            padding-left: 0;
            height: 100vh;
        }*/
  .header-index .navbar{
    display:none;
  }
  
  #menu-btn{
    display:inline-block;
  }
}
.fa-times{
    transform: rotate(180deg);

  }
   
.sidebar.open {
     right: 0;
} 
/***************************************MAX WIDTH 991PX**************************/
@media(max-width:991px)  {
  section{
      padding: 3rem 2rem;
    }

  html{
      font-size: 55%;
    }
}
/*@media(max-width:760px){
    .heading span{    
    font-size:3.6rem;
}

.heading p{
    font-size: 1.4rem;
}

.contact .row form .box{
    font-size: 1.4rem;
}



.contact .row form .box .message{
    height: 15rem;
   resize: none;
}

.contact .row .content .title{
    
    font-size: 2rem;
}

.contact .row .content .info h4{
    font-size:1.8rem ;

}



}*/


/******************************RESPONSIVE SURFACE DUO 540px*services*****************************/
@media(max-width:540px) {

.header-index .logo h1{
    font-size: 3.5rem;
    color: #6e3b66;
    font-family:"Dancing Script", sans-serif;     
 }

.header-index .logo h1 span1{
    font-size: 2.5rem;
    color: #6e3b66; 
    font-family:"Dancing Script", sans-serif;   
 }
.header-index .logo h1 span{
    font-size: 2rem;
    color: #6e3b66; 
    font-family:"Dancing Script", sans-serif;   
 }
 .header-index .coordo h1{
      color: #6e3b66;
      font-size: 1rem;
   
 }
  .header-index .coordo i{
      color: var(--peru);
      font-size: .8rem;
   
 }
.banner .content-banner .text p{
    font-size:1.7rem;
 }

}
/**********************MAX WIDTH 450PX*****************/

@media(max-width:450px){
  html{
      font-size: 50%;
     
  }
  .contact .heading{
    font-size:2.4rem;
  }
  .contact p{
    font-size:1.4rem;
  }
  /*********CONTACT****MIN MIN 480PX MAX 768PX**/

.heading span{    
    font-size:2.4rem;
}

.heading p{
    font-size: 1.2rem;
}

.contact .row form .box{
    font-size: 1.2rem;
}



.contact .row form .box .message{
    height: 15rem;
   /*resize: none;*/
}
.contact .row form .btn{
   font-size:1.4rem; 
}

.contact .row .content .title{
    
    font-size: 1.8rem;
}

.contact .row .content .info h4{
    font-size:1.4rem ;

}
.contact .row .content .info i{
    font-size:1.2rem ;
    color:var(--peru)

}
/************faqs*section*******/
.faqs{
      padding-top: 4rem;
   }
.faqs .heading h3{
    font-size:2.4rem;
    margin-bottom: 2rem;
  }
.faqs p{
    font-size:1.4rem;
  }


/***faqs formulaire***/
.faqs .row form h3{      
      font-size: 2rem;      
}
.faqs .row form .box{
      font-size: 1.2rem;
}
.faqs .row form .btn{
      font-size: 1.4rem;
}

/***faqs questions****/
.faqs .row .faq .title{
      margin-bottom:.5rem;
      font-size: 1.8rem;      
}

.faqs .row .faq .surbox h2{
      font-size: 1.8rem;
}
.faqs .row .faq .box h3{      
      font-size: 1.5rem;       
}
.faqs .row .faq .box p{
      font-size: 1.2rem;
      display: none;
}
.faqs .row .faq .box a{      
      font-size: 1.2rem;
   }
}






/***************I PHONE 14 PRO MAX 430px x 932px*********/
@media(max-width:430px){
  html{
    scroll-padding-top: 4rem;
}
.contact{
    padding-top: 16rem;
}
 .header-index  h1 span{
      display: none;
  }
  .header-index  h1 span1{
      display: none;
  }
  
}