@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');
: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 San" sans-serif;
      text-transform: capitalize;
      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: 10rem;
   }*/
/* 
html::-webkit-scrollbar{
      width: 1.6rem;
 
   
 
 }
 html::-webkit-scrollbar-track{
  
      background: #222;
 
 }
 html::-webkit-scrollbar-thumb{
      background: var(--peru);
 }
/*********************************CONTACT*****************/
.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 :4rem;
      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 991PX**************************/

@media(max-width:768px){
     html{
      scroll-padding-top: 10rem;
   } 
}
@media(max-width:450px){
   html{
      scroll-padding-top: 12rem;
   }
   .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 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;
   }
}