@import url('https://fonts.googleapis.com/css2?family=lato:wght@100;200;400;500&display=swap');
*{
   margin: 0;
   padding: 0;
   box-sizing:border-box ;
   font-family: 'lato', sans-serif;
}
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 9px;
}
::-webkit-scrollbar{
    width: 14px;
}
::-webkit-scrollbar-thumb{
    background-color: #222;
}
body{
    background-color: #1fabc0;
    font-size: 62.5%;
}
section{
    margin-top: 50px;
 
}
header{
    background-color: #222;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 5%;
}
header .logo a {
    font-size: 24px;
    color:hwb(188 12% 25%);
    text-decoration: 0;
}
header .logo a span {
    color:#ffffff; 
}
.menu {
    display: flex;
    align-items: center;
}

.menu li {
    margin: 0 19px;
    list-style-type: none;
}
.menu li a {
    color: #dcfffe;
    font-size: 13px;
    text-decoration: 0;
    display: inline-block;
    position: relative;
}
.menu li a:hover{
    color: #1fabc0;
}
.menu li a::after{
    content: '';
    position: absolute;
    width: 100%;
    transform:scaleX(0);
    height: 2px;
    bottom: -8px;
    left: 0;
    background-color: #ea70e0;
    transform-origin: bottom left;
    transition: 0.5s ease-out;
}
.menu li a:hover:after{
    transform:scaleX(1);
    transform-origin: bottom right;
}
.btn-search{
    color: #58b2c6;
    font-size: 12px;
    border: 2px solid #29d9d5 ;
    padding: 5px 20px;
    transition: 0.5s;
    text-decoration: 0;
    border-radius: 20px;
    font-weight: bold;
   
}
.btn-search:hover{
    background-color: #0a4856;
    color:hsl(0, 0%, 100%);
    transform: scale(1.1); 
}
#home{
    background-attachment: fixed ;
    background-image : url(images/img\ 3.png) ;
    background-position: center;
    background-size: cover;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position:relative;
}
#home h2{
    font-size: 27px; 
    margin-bottom: 10px;
    color: #2ccecb;
}
#home h2:hover{
    color:#b590b2; 
}

#home h4{
    font-size: 50px;
    color: rgb(198, 128, 199);
    margin-bottom: 10px;
    text-transform: capitalize; 
}
#home h1{
    color: #0a4856;
}
#home p{
    color: rgb(255, 255, 255);
    margin-bottom:  10px;
    font-size: 45px;
    text-align:center;
    padding: auto;
}
#home .box-container {
    border: 0.5px solid #278786;
    box-shadow: inset 0 0 1em #cbeded, 0 0 2em hsl(308, 44%, 51%) ;
    margin-top: 60%;
    border-radius: 30px;
    width: 40%;
}
#home .box-container:hover{
    transform: scale(1.1);
  
}
#home .box-container p{
    font-size: 20px;
    
   
}
#home .box-container p:hover{
    color:#e5dfdf;
    transform: scale(1.1);
    
}
#home .box-container h2{
    margin-top: 3%;
    font-size: 22px;
    margin-bottom: 3%;
    color: white;
}
#home .box-container h1{
    font-size: 20px;
    margin-bottom: 5%;
    color: white;
    text-align: center;
}
#home .box-container h1:hover{
    color: #c680c7;
    transform: scale(1.1);
}
#home .box-container h2:hover{
    color: #c680c7;
    transform: scale(1.1);
}
#home .btn-search-home-btn{ 
    margin-bottom: 60%;
    margin-top: 20px;
    padding-right: 25%;
    color: #dae7ea;
    background-color: #1e808f;
    font-size: 14px;
    border: 2px solid #29d9d5 ;
    padding: 5px 20px;
    transition: 0.4s;
    text-decoration: 0;
    border-radius: 20px;
    font-weight: bold;
}
#home .btn-search-home-btn:hover{
    transform: scale(1.4);
    background-color: #339bb2;
    color:#ffffff; 
}
.paiements h1{
    color: #ffffff;
    font-size: 30px;
    padding-left:20%;
    padding-bottom: 5%;
    padding-top: 15px;
    justify-content: space-between;
}
.paiements i{
    font-size: 40px;
    color: #ffffff;
    margin-left: 3%;
}
.find{
    background-color:transparent;
    padding: 20px;
    width: 50%;
    position: absolute;
    bottom: -50px;
}
.find form{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}
.find form div ,.find form input[type="submit"]{
    display: flex;
    flex-direction: column;
    width: 20%;
}
.find form label{
    color: #999;
    font-size: 15px;
    margin-bottom: 10px;
}
.find form input{
    padding: 5px 20px;
    background-color: transparent;
    border: 1px solid #29d9d5;
    outline: 0;
    width: 100%;
    font-size: 13px;
    color: beige;
}
.find form input[type="submit"]{
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: #29d9d5;
    cursor: pointer;
    transition: 0.5s;
}
.find form input[type="submit"]:hover{
    box-shadow: 0 0 10px #29d9d5;
}

.title {
    text-transform: capitalize;
    margin: 70px 0;
    font-weight: bold;
    color: #1b3131;
    position: relative ;
    margin: left 15px; 
    font-size: 18px;
}
.title::after{
    position: absolute;
    left: -15px;
    content: "";
    height: 100%;
    background-color:#c680c7;
    width: 5px;
}
.img-desc {
    display: flex;
    align-items: center;
    justify-content:space-between ;
    width: 100%;
 }

.img-desc ::after {
    position: absolute;
    bottom: -10px;
    right: 10px;
    content: "";
    height: 550px;
    width: 300px;
}

.img-desc  h3:hover{
    color:#b08bad; 
}

.img-desc  p {
    color: #d3ebe9;
    font-size: 17px;
    margin-bottom: 20px;
}

.img-desc  a {
    border: 1px solid #1a5c5b;
    color: #deecec;
    font-size: 12px;
    padding: 8px 25px;
    font-weight: bold;
    border-radius: 20px;
}
.img-desc  a:hover{
    transform: scale(1.1);
    background-color: #21889f;
    color:#ffffff;
}
#image{
    margin-top: 100px;
    padding: 0 10%;
    width: 100%;
}
.box-container{
    height:  600px;
    width: 1000px;
    border-radius: 20px;
    background: linear-gradient(rgba(0,0,0,0.3),#21889f);
    border-radius: 16px;
    padding: 10px;
    margin: 100px;
    text-align: center;
    justify-content: space-between;
    border: 2px solid #092726; 
    box-shadow: inset 0 0 1em #29d9d5, 0 0 2em hsl(308, 44%, 51%) ;    
}
.box-container:hover{
    color: #29d9d5;
}
i{
    flex-flow: row wrap;
    font-size: 3rem;
    color:rgb(210, 128, 166);
    margin: 12px;
}

.box-container h3{
    font-size: 20px;
    color:white;
}

.box-container p{
    padding:1rem 0;
    font-size: 1.4rem;
    color:lightseagreen;
    line-height: 1.5;
    padding: 10px;
    margin-left:  30px;
    text-align:center;
}
#services{
    border: 2px solid #010e0d;
    border-radius: 20px;
    padding-left: 7%;
    margin-left: 20%;
}
#services p {
    color:#ffffff ;
}

#services:hover{
    transform: scale(1.1);
}

#services .btn-search-home-btn{
    margin-left: 20%;
    background-color: #ffffff;
    color: #21889f;
}
#services .btn-search-home-btn:hover{
    color: #e5b5e6;
    background-color: #010b0d;
}

#nos-services{
    margin-top: 20px;
    padding: 0 10%;
    width: 100%;
    background: linear-gradient(45deg);
    padding: 15px 9%;
}

.column{
    float: left;
    width: 25%;
    padding: 0 5px;
}
.row{
    margin: 0 -5px;
}
.row:after{
    content: "";
    display: table;
    clear: both;
}

.box-conter{
    border-radius: 20px;
    background: linear-gradient(rgba(0,0,0,0.3),#21889f);
    box-shadow: 0 8px 32px 0 #b08bad;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    border: 2px solid #092726; 
    box-shadow: inset 0 0 1em #29d9d5, 0 0 2em hsl(308, 44%, 51%) ; 
    color: #010b0d;
}

.content .box-conter .counter{
    font-size: 40px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 10%;
}
.content .box-conter .text{
    font-size: 16px; 
    color: rgb(255, 255, 255);  
}
#nos-services .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(270px,1fr));
    gap: 12px;
    margin-left: 15%;
    margin-bottom: 5%;
}
#nos-services .box-container .box{
    box-shadow: 0 5px 10px rgba(0,0,0,0.2) ;
    border-radius: 5px;
    background: #0a4856;
    text-align: center;
    padding: 30px 20px;    
}
#nos-services .box-container .box:hover{
  transform: scale(1.1);
}
#nos-services .box-container .box:hover i{
    color: #29d9d5;
}
#nos-tarifs {
    padding: 0 0%;
    width: 100%;
    background: linear-gradient(45deg);
    padding: 15px 9%;
    padding-bottom: 100px;
}
#nos-tarifs .box-container h4{
    font-size: 20px;
    color:#2d808d;
}
#nos-tarifs .box-container .box p{
    padding: 1px ;
    font-size: 13px;
    color:#f8f8f8;
    line-height: 1.5;
    margin-left:  20px;
    text-align:center;
    margin-top: 9px;
}
#nos-tarifs .box-container .box span{
    padding:1px ;
    font: size 19px;;
    color:#fefefe;
    line-height: 1.5;
    padding: 1px;
    margin-left:  20px;
    text-align:center;
}
#nos-tarifs .box-container .box span:hover{
    color: #b08bad;
}
#nos-tarifs .box-container .box{
    box-shadow: 0 5px 10px rgba(0,0,0,0.2) ;
    border-radius: 5px;
    background: #0a4856;
    text-align: center;
    padding: 30px 20px; 
}
#nos-tarifs .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(270px,1fr));
    gap: 12px;
    margin-left: 13% ;
    margin-bottom: 20%;
    height: 45%;
}
#nos-tarifs .box-container .box:hover{
    transform: scale(1.1);
  }
#nos-tarifs .box-container .box p:hover{
    color: #b08bad;
  }
#fonctionnement{
    width: 100%;
    background: linear-gradient(45deg);
    padding-left: 7%;
    padding-top:10px ;
    padding-bottom: 50px;
}

#fonctionnement .box-container{
    display:inline-flex ;
    grid-template-columns: repeat(auto-fit,minmax(290px,1000px));
    gap: 5px;
    margin-bottom: 5%;
    height: 330px;
    width: 990px; 
    margin-left: 15%;
}
#fonctionnement h3{
    font-size: 25px;
    color: #1e808f;
    margin: auto;
    margin-bottom: 3%;
    padding-left: 10%;
}
#fonctionnement h3:hover{
    color: #e9b7e4;
}
#fonctionnement h5{
    font-size: 25px;
    color: #ffffff;
    margin: auto;
    margin-bottom: 3%;
    padding-left: 10%;
}
#fonctionnement h5:hover{
    color: #e9b7e4;
    transform: scale(1.1);
}
#fonctionnement .box-container .box{
    box-shadow: 0 5px 10px rgba(0,0,0,0.2) ;
    border-radius: 5px;
    background: #0a4856;
    text-align: center;
    padding: 30px 20px; 
    height: 310px;
    border-radius: 5%;
}
#fonctionnement .box-container p{
    font: size 14px;
    color: white;
    line-height: 1.5;
    text-align:center;
    justify-content: space-between;
    margin-right: 12%;
    margin: auto;
    padding: auto;
}
#fonctionnement .box-container  h3{
    font-size: 20px;
}
#fonctionnement h4{
    font-size: 30px;
    color: #181717;
}

#fonctionnement .box-container h2{
    font-size: 20px;
    color:#ffffff;
}
#fonctionnement .box-container img{
    height: 40%;
    width: 50%;
}
#fonctionnement .box-container .box:hover{
    transform: scale(1.1);
}
#location{
    width: 99%;
    background: linear-gradient(45deg);
    padding-left: 7%;
    padding-top:5px ;
    padding-bottom: 50px;
   
}

#location h2{
    font-size: 20px;
    color:#ffffff;
    padding-left: 35%;
    padding-top: 2%;
}
#location h2:hover{
    color: #9d6f99;
    transform: scale(1.1);
}
#location p{
    font-size: 19px;
    color:#ffffff;
    line-height: 1.5;
    text-align:center;
    padding-bottom: 5%;
    padding-left: 5%;
    padding-right: 5%;
}
#location p:hover{
    transform: scale(1.1); 
}

#location .btn-search{
    margin-top: 40%;
    margin-left: 42%;
    background-color: #ffffff;
    color: #21889f;
    font-size: 13px;
}


#location .left{
    box-shadow: inset 0 0 1em #29d9d5, 0 0 2em hsl(308, 44%, 51%) ;
    border: 2px solid #042424;
    color: transparent;
    border-radius: 20px;
    margin-left: 12%;
    margin-bottom: 2%;
    width: 80%;
    height: 100%; 
}

#location .left:hover{
    transform: scale(1.1);
}

#location .row{
    padding-left: 30%; 
    padding-bottom: 5%;
   
}

#location #galerie{
    margin-top: 0;
    padding: 0 ;
    width: 100%;
    height: 60%;
    margin-bottom: 50px;
}
#location .gallery img{
    width: 100%;
    height: 100%;
    border-radius: 15px;
}
#location .gallery iframe{
    width: 450px;
    height: 320px;
    border-radius: 15px;
    margin-bottom: 10%;
}
#location .gallery iframe:hover{
    transform: scale(1.1);
}

.calendly-inline-widget{
    min-width:420px;
    max-height:400px;
    border-radius:15px;
    margin-right:15%;
}

#ajouter  {
    width: 100%;
    background: linear-gradient(45deg);
    padding-left: 7%;
    padding-top:20px ;
    padding-bottom: 40%;
   
}
#ajouter h1{
    font-size: 17px;
}
#ajouter th{
    font-size: 17px;
    padding-right: 22%;
    padding-bottom: 10px;
    color: #012424;
}
#ajouter td{
    font-size: 14px;
    color:#ffffff;
   padding-left: 2%;
    justify-content: space-between ;
    padding-bottom:10px;
   
}
#ajouter form{
    background-color:#70c5d2;
    margin-top: 5%;
  
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;
    box-shadow: inset 0 0 1em #29d9d5, 0 0 2em hsl(308, 44%, 51%) ;
    width: 80%;
    height: 100%;
}

#ajouter a{
    font-size: 10px;
    width: fit-content;
    padding: 7px 18px  ;
    background-color:#222;
    border:1px solid #29d9d5;
    color:#29d9d5;
    cursor: pointer;
    transition: 0.5s;
    border-radius: 20px;
    text-decoration:none;
}
#ajouter a:hover{
    transform: scale(1.1);
}
#ajouter form label {
    font-size: 14px;
    padding: 10px 0;
    font-weight: 600;
    border-radius: 10px;
}

#ajouter form input{
    font-size: 14px;
    padding: 10px 0;
    outline: 0;
    border: 1px solid #0c6a68;
    border-radius: 10px;
}

#ajouter_tarif  {
    width: 100%;
    background: linear-gradient(45deg);
    padding-left: 7%;
    padding-top:20px ;
    padding-bottom: 50%;
   
}
#ajouter_tarif h1{
    font-size: 17px;
}
#ajouter_tarif th{
    font-size: 17px;
    padding-left: 8%;
    padding-bottom: 10px;
    box-shadow: inset 0 0 1em #29d9d5, 0 0 2em hsl(308, 44%, 51%) ;
    border: 2px solid #042424;
}
#ajouter_tarif td{
    font-size: 16px;
    padding-left: 10%;
    justify-content: space-between ;
    padding-bottom:10px;
    box-shadow: inset 0 0 1em #29d9d5, 0 0 2em hsl(308, 44%, 51%) ;
    border: 2px solid #042424;
}
#ajouter_tarif form{
    background-color:#70c5d2;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 18px;
    padding-right: 10%;
    padding-left: 5%;
    margin-right: 35%;
    border-radius: 10px;
    box-shadow: inset 0 0 1em #29d9d5, 0 0 2em hsl(308, 44%, 51%) ;
    width: 45%;
}
#ajouter_tarif form:hover{
    transform: scale(1.1);
}
#ajouter_tarif button{
    font-size: 10px;
    width: fit-content;
    padding: 8px 40px  ;
    background-color:#222;
    border:1px solid #29d9d5;
    color:#29d9d5;
    cursor: pointer;
    transition: 0.5s;
    border-radius: 20px;
    margin-left: 9%;
    margin-top: 3%;
}
#ajouter_tarif form label {
    font-size: 14px;
    padding: 10px 0;
    font-weight: 600;
    border-radius: 10px;
}

#ajouter_tarif form input{
    font-size: 14px;
    padding: 10px 0;
    outline: 0;
    border: 1px solid #0c6a68;
    border-radius: 10px;
}
#type_id{
    font-size: 14px;
    padding: 10px 0;
    outline: 0;
    border: 1px solid #0c6a68;
    border-radius: 10px;
}

#à-propos{
    width: 100%;
    background: linear-gradient(45deg);
    padding-left: 7%;
    padding-top:5px ;
}

#à-propos .box-container{
    display:flex;
    grid-template-columns: repeat(auto-fit,minmax(290px,1000px));
    gap: 15px;
    margin-bottom: 5%;
    height: 100%;
    width:50%; 
    margin-left: 25%;
}
#à-propos .box-container .box{
    box-shadow: 0 5px 10px rgba(0,0,0,0.2) ;
    border-radius: 5px;
    background: #0a4856;
    text-align: center;
    padding: 25px ; 
  
    width: 80%;
    border-radius: 5%;
}
#à-propos .box-container .box:hover{
    transform: scale(1.1);
    font-size: 12px;
}

#à-propos .box-container .box p{
   font-size: 14px;
    color: white;
    line-height: 1;
    text-align:center;
    margin-right: 10%;
    margin: auto;
    padding: auto;
}
#à-propos .box-container .box h2{
    font-size: 18px;
    color:#ffffff;
}
#à-propos .box-container .box h2:hover{
    color:#c680c7;
    transform: scale(1.1);
}
#à-propos .box-container .box p:hover{
    color:#c680c7;
    transform: scale(1.1);
}
#à-propos h3{
   font-size: 16px;
   color: #ffffff;
   padding-left:15%;
   margin-top: 3%;
   margin-bottom: 2%;
}
#à-propos h3:hover{
    color: #e5b5e6;
    transform: scale(1.1);
}

#à-propos iframe{
    height: 450px;
    width: 450px;
    margin-bottom: 20px;
    margin-left: 10%;
    border-radius: 15px;
}
#à-propos .left-right{
    box-shadow: inset 0 0 1em #29d9d5, 0 0 2em hsl(308, 44%, 51%) ;
    border: 2px solid #042424;
    color: transparent;
    border-radius: 20px;
}
#à-propos .left-right:hover{
    transform: scale(1.1);
}
#à-propos i{
    font-size: 20px;
}
#à-propos h4{
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    padding-top: 1%; 
}

#à-propos a{
    color: #feffff;
    text-decoration: none;
}
#à-propos h5{
    color: #ffffff;
    font-size: 13px;
}

#à-propos{
    margin-top: 100px;
    margin-bottom: 50px;
    padding: 0 10%;
    width: 100%;
}
#galerie{
    margin-top: 100px;
    padding: 0 10%;
    width: 100%;
    margin-bottom: 50px;
}
#galerie {
    font-size: 20px;
}
.container{
    width: 100%;
    height: 70%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 8%;
    border-radius: 10px;
}
.gallery{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    grid-gap: 4px;
    border: 2px solid #0c6a68;
    border-radius: 15px;
}
.gallery img{
    width: 100%;
    height: 100%;
    border-radius: 13px;
}
.gallery img:hover{
    transform: scale(1.1);
}
#contact{
    padding: 0 10%;
    margin-bottom: 10px;
    height: 120vh;
}
#contact form{
    background-color:#70c5d2;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;
    box-shadow: inset 0 0 1em #29d9d5, 0 0 2em hsl(308, 44%, 51%) ;
    transform: scale(0.9);
}

.left-right{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.left-right .left , .left-right .right{
    display: flex;
    flex-direction: column;
    width: 47%;
}

#contact form label {
    font-size: 14px;
    padding: 10px 0;
    font-weight: 600;
    border-radius: 10px;
}

#contact form input{
    font-size: 14px;
    padding: 10px 0;
    outline: 0;
    border: 1px solid #0c6a68;
    border-radius: 10px;
}
textarea{
    height: 155px;
    resize: none;
    outline: 0;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
}
#contact form iframe{
    height: 155px;
    resize: none;
    outline: 0;
    width: 100%;
    padding: 10px;
    border-radius: 20px;
    margin: 0%;
}
#contact form input:focus , textarea:focus, iframe:focus{
    border: 1px solid #07706e;
}
#contact{
    margin-top: 100px;
    padding: 0 10%;
    width: 100%;
}

#connexion{
    margin-top: 100px;
    padding: 0 10%;
    width: 100%;
   margin-bottom: 500px;
}
iframe {
    height: 250px;
    width: 60%;
    margin-top: 33px;
    margin-left: 20%;
    border-radius: 10px;
}
#contact button{
    width: fit-content;
    padding: 8px 40px  ;
    background-color:#222;
    border:1px solid #29d9d5;
    color:#29d9d5;
    cursor: pointer;
    transition: 0.5s;
    border-radius: 20px;
}
#contact button:hover{
    background-color:#065763;
    color:#0c0c0c;
    letter-spacing:1px ; 
}

#contact p{
    padding-left: 5%;
    color:#0a323c ;
    font-size: 20px;
    text-align: center; 
}
#contact i{
    font-size: 20px;
    
}
#contact h4{
    text-align: center;
    font-size: 16px;
    color: #0c1439;
    padding-top: 1%;
    padding-left: 5%;
}
#contact .btn-search{
    color: #034048;
    border: 2px solid #1e808f;
    margin-left: 36%;
}
#contact a{
    color: #316ba6;
    text-decoration: none;
   
}
#contact .btn-search:hover{
    color: #1d707b;
    border: 2px solid #010b0d;
    background-color: #5cc2d1;
    transform: scale(1.1);
}
.wrapper {
    background-color: #27819a;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset,
      rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
      rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    background-color: #0093E9;
    background-image: linear-gradient(62deg, #3485a7 0%, #82bedc 100%);
    height: 40vh;
    width: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20%;
     
  }
  .wrapper:hover{
    transform: scale(1.1);
  }
  .profile-top {
    margin-left: 5%;
    height: 70%;
    width:90%;
    background-image: url("./images/img\ 3.png");
    border-radius: 15px;
    background-position: center;
    background-size: cover;
    position: relative;
  }
  .main-infos {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
  }

  .profile-bottom {
    margin-top: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #contact h2{
    text-align: center;
    font-size: 20px;
    color: #324ab4;
    padding-bottom: 2%;
    padding-right: 15%;
}
footer{
    width: 100%;
    background-color: #333;
    padding: 30px 0;
    font-size: 12px;
    color: #fefefe;
}
.contenu-footer{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-size: 12px;
    padding: 50px 0 100px;
    text-decoration: none;
}
footer a{
    font-size: 13px;
    color: #fcffff;
    text-decoration: 0;
    text-align: center;
    padding-left: 37px;
}
footer a span{
   color :hwb(188 12% 25%);
   font-size: 20px;
}
footer i{
   font-size: 22px;
}
footer i:hover{
    color: #1fabc0;
}
footer .liens li {
    font-size: 15px;
    color:#333;
    text-align: center;
    padding-top: 5%;
    align-items: center;
    padding-right: 17%;
    text-decoration:underline;
   
}

footer .media li{
    font-size: 14px;
    color:#333;
    padding-top: 3%;
    display: inline-flex;
    justify-content: center;
}
footer li:hover{
    color: #1fabc0;
    list-style-type: none;
}

.bloc{
    width: 25%;
    margin: 0 30px;
    text-decoration:none ;
  
}
footer p{
    font-size:14px;
    color: #ffffff;
    padding-left: 37%;
}
footer h3{
    color: #f8f8f8;
    padding-left: 45%;
    font-size: 14px;
}
footer  h4{
   text-align: center;
   font: size 16px;
   color: #ffffff;
   padding-left: 25%;
   
}
footer  h5{
    color: hwb(188 12% 25%);
    padding-left:25%;
    font-size:16px;
}
footer span{
    padding-left:40%;
    font-size:19px;
}
.banniere{
    border: solid 1px #062f2f;
    background: #5d9dd1;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #0a50c1;
    display: flex;
    justify-content:space-around ;
    padding: 30px;
    font-family:'Franklin Gothic Medium';
}
.text-banniere p{
    font-size: 13px;
    color: #ffffff;
}
.button-banniere{
    padding-top: 15px;
}
.button-banniere a{
    border: solid 1px rgba(0,0,0,0.2);
    padding: 10px;
    background: #000000;
    border-radius: 9px;
    color: #1fabc0;
    font-size: 15px;
}
/*responsive*/
@media (max-width:1261px) {
    #home{
        height: auto;
    }
    header .menu{
        display: none;
    }
    .btn-search{
        display:block;
        font-size:12px;
        margin-right: 8%;
    }

    #home .box-container h2{
        font-size: 28px;
        text-align: center;
    }
    #home .box-container i{
        font-size: 17px;
        margin-left: 0;
       
    }
    #home .box-container h1{
        text-align: center;
        font-size: 13px;
        margin-left: 25%;
        padding-right:22% ;
    }
    #home .box-container .home-btn{
        display: block; 
    } 
    .home-btn{
        display: block;
    }
    #home h4{
        font-size: 18px;
    }
    #home .box-container p{
        text-align: center;
        font-size: 19px;
        margin-left: 1%;
    }
   
    .paiements i{
        font-size: 24px;
    }
    .paiements h1{
        font-size: 19px;
        justify-content: space-between;
    }
    #home .box-container{
        margin-top: 40%;
        height: 100%;
        width:60%;
     
    }

    #services{
        margin-left: 5%;
        font-size: 10px;
        width: 90%;
    }
    #services .btn-search-home-btn{
        display: block;
        font-size: 10px;
        text-align: center;
        margin-right:17%;
    }
    #services .btn-search-home-btn:hover{
        color: #e5b5e6;
        background-color: #010b0d;
        display: block;
    }
    #nos-services .box-container{
        margin: 65px;
        height:100% ;
        width:100% ;
        padding-left: 10px  ;
        display: block;
        gap: 5px;
        margin-bottom: 40px;
        padding-left: 10px;
        
    }
    #nos-services .box{
        text-align: center;
        padding:0 0 ;
    }
    #nos-services .box-container p{
        text-align: center;
        padding-right: 60px ;
        font-size: 15px;
    }
    #nos-services .box-container .box h3{
        font-size: 18px;
    }
    #nos-services .box-container .box i{
        font-size: 25px;
    }
    #nos-tarifs .box-container{
        margin: 65px;
        height:100% ;
        width:85% ;
        padding-left: 10px  ;
        margin-left: 3%;
        display: block;
        gap: 5px;
        margin-bottom: 40px;
        margin-left:20%;
    }
    #nos-tarifs .box{
        text-align: center;
    }
    #nos-tarifs .box-container p{
        text-align: center;
        padding-right: 60px ;
        font-size: 10px;
    }
    #contact{
        width: 100%;
        height: 100%;
    }
    #contact .btn-search{
        display: block;
        font-size: 13px;
        text-align: center;
        background-color: #33aaa8;
        padding-left: 20px;
        margin-left: 80px  ;
        margin-right: 60px  ;
    }
    #contact .btn-search:hover{
        transform: scale(0.9);
        color: #065763;
    }
    #contact.left-right{
        margin-bottom: 40%;
    }
    #contact h4{
        font-size: 12px;
    }
    #contact p{
        font-size: 12px;  
    }
  
   
    #à-propos .left-right h3{
        font-size: 11px;
        display: flex;
    }
    #à-propos .left-right h5{
        font-size: 12px;
    }
    #à-propos .left-right h4{
        font-size: 10px;
    }
    #à-propos .left-right a{
        font-size: 10px;
    }
    #à-propos .box{
        height:50% ;
        width:100% ;
        padding-left: 15px  ;
        display: block;
        gap: 5px;
       
    }
    #à-propos .box:hover{
        transform: scale(1.1);
    }
   
    #à-propos h4{
        font-size: 7px;
    }
    #à-propos  i{
        font-size: 10px;
    }
    #à-propos iframe{
          width: 90%;
    }
    #à-propos h3 {
        font-size: 7px;
        margin-right:50px ;
        text-align: center;
    }
    #à-propos form{
        width: 80%;
       
    }
    #à-propos .box-container .box h2{
        font-size: 13px;
    }
 
    #à-propos .box-container .box p{
        font-size: 14px;
    }
    #à-propos .box-container .box {
        height:100% ;
        width:100% ;
       
    }
    #à-propos .box-container{
        margin: 20%;
        height:100% ;
        width:70% ;
        display: block;
      
    }
    .contenu-footer a{
        padding-right:20%;
    }
    
    #fonctionnement{
        height: 100%;
        width: 100%;
    }
    #fonctionnement h4{
        font-size: 18px;
    }
    #fonctionnement h5{
        font-size: 17px;
    }
    #fonctionnement h3{
        font-size: 15px;
        padding-right: 10%;
        color: #1fabc0;
    }
    #fonctionnement .box-container {
        height:30% ;
        width:85% ;
        padding-left: 15px  ;
        display: block;
        gap: 5px;
        margin-bottom: 5px;
        font-size:12px;
        margin-left: 25%;
    }
    #fonctionnement .box-container p{
        font-size: 12px;
    }
    #fonctionnement  .box{
        height:100% ;
        width:100% ;
        padding-left: 15px  ;
        display: block;
        gap: 5px;
        margin-bottom: 5px;
        font-size:12px;
       
      
    }
    #fonctionnement .box img{
        height: 50%;
        width: 23%;
    }
    .box-container .btn-search{
        display: inline;
        padding-right: 20%;
    }
    .img-desc{
        flex-direction: column ;
        width: 100%;
    }
    .img-desc p{
      text-align: center ;
      font-size: 15px;
      width: 100%;
    }
    .img-desc a{
        display:inline;
    }
    #location .btn-search{
        display:inline;
    }
    #location #galerie iframe {
        height: 80%;
        width: 60%;
    }
    #location .left p{
        font-size: 15px;
    } 
    #location .left h2{
        font-size: 17px;
        text-align: center;
        margin-right: 35%;
    } 
    #ajouter th{
        font-size: 14px;
    }
    #ajouter td{
        font-size: 12px;
    }
    #ajouter form{
        width:80%;
    }
    #ajouter a{
        font-size: 8px;
    }
    .responsive-menu{
        width: 75px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
    }
    .responsive-menu::after{
        position: absolute;
        content: "";
        height: 3px;
        background-color: #29d9d5;
        width: 29px;
        box-shadow: 0 10px 0 #29d9d5;
        transform: translateY(-10px);
        transition: 0.5s;
    }
    .responsive-menu.active::after{
        box-shadow: #29d9d5;
        transform: rotate(45deg);
    }
    .responsive-menu::before{
        position: absolute;
        content: "";
        height: 3px;
        background-color: #29d9d5;
        width: 29px;
        transform: translateY(10px);
        transition: 0.5s;
    }
    .responsive-menu.active::before{
        transform: rotate(-45deg);
    }
    header .menu.responsive{
        display:flex ;
        position: absolute;
        top: 40px;
        right: 0;
        flex-direction: column;
        background-color: #222;
        align-items:start;
        animation: animate-menu 1s forwards;
        font-size: 5px;
    }
    header .menu.responsive li{
        margin: 10px;
        width:  140px;
        font-size: 5px;
    }
    
    .contenu-footer{
        width: 100%;
        font-size: 14px;
    }
    
    footer p{
        font-size: 12px; 
        padding-left:35%;
    }
    footer h5{
       font-size:12px; 
       padding-left:22%;
    }
    footer h4{
        
        font-size: 12px;
    }
    footer a{
        display:block ;
        font-size: 12px;
    }
    footer a span{
        font-size: 12px;
    }
    footer i{
        font-size: 12px;
    }
   
   .text-banniere p{
    font-size:1px;
   }
   .button-banniere{
    padding-top: 15px;
   }
    .button-banniere a{
    border: solid 1px rgba(0,0,0,0.2);
    padding: 10px;
    background: rgb(191, 98, 98);
    border-radius: 9px;
    color: white;
    font-size: 10px;
    display: block;
    text-align: center;
   }

    @keyframes animate-menu {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(10%);
        }
    }
}

@media (max-width:1006px){
    header .menu{
        display: none;
    }
    .btn-search{
        display:block;
        font-size:12px;
        margin-right: 5%;
    }
    #home .box-container{
        margin-top: 40%;
        height: 100%;
        width:40%;
     
    }
    #home{
        height:auto;
    }
    #home .box-container h2{
        font-size: 20px;
        text-align: center;
    }
   
    #home .box-container .home-btn{
        display: block; 
    } 

    .home-btn{
        display: block;
    }
   
    #home .box-container p{
        text-align: center;
        font-size: 18px;
    }
   
    #home .box-container h1{
        text-align: center;
        font-size: 13px;
        margin-left: 15%;
      
    }
    #home .box-container i{
        font-size: 15px;
    }
    .paiements i{
        font-size: 24px;
    }
    .paiements h1{
        font-size: 16px;
        justify-content: space-between;
    }
  
    #services{
        margin-left: 4%;
        font-size: 10px;
        width: 100%;
    }
    #services .btn-search-home-btn{
        display: block;
        font-size: 10px;
        text-align: center;
        margin-right:17%;
    }
    #services .btn-search-home-btn:hover{
        color: #e5b5e6;
        background-color: #010b0d;
        display: block;
    }
    #nos-services .box-container{
        margin: 65px;
        height:70% ;
        width:100% ;
        padding-left: 10px  ;
        display: block;
        gap: 5px;
        margin-bottom: 40px;
        margin-left: 3%;
    }
    #nos-services .box{
        text-align: center;
        padding:0 0 ;
    }
    #nos-services .box-container p{
        text-align: center;
        padding-right: 60px ;
        font-size: 15px;
    }
    #nos-services .box-container .box h3{
        font-size: 18px;
    }
    #nos-services .box-container .box i{
        font-size: 25px;
    }
    #nos-tarifs .box-container{
        margin: 65px;
        height:100% ;
        width:100% ;
        padding-left: 10px  ;
        margin-left: 3%;
        display: block;
        gap: 5px;
        margin-bottom: 40px;
    }
    #nos-tarifs .box{
        text-align: center;
    }
    #nos-tarifs .box-container p{
        text-align: center;
        padding-right: 60px ;
        font-size: 10px;
    }
    
    #contact .btn-search{
        display: block;
        font-size: 13px;
        text-align: center;
        background-color: #33aaa8;
        padding-left: 20px;
        margin-left: 80px  ;
        margin-right: 60px  ;
    }
    #contact .btn-search:hover{
        transform: scale(0.9);
        color: #065763;
    }
    #contact h4{
        font-size: 10px;
    }
    #contact p{
        font-size: 10px;  
    }
  
   
    #à-propos .left-right h3{
        font-size: 11px;
        display: flex;
    }
    #à-propos .left-right h5{
        font-size: 12px;
    }
    #à-propos .left-right h4{
        font-size: 10px;
    }
    #à-propos .left-right a{
        font-size: 10px;
    }
    #à-propos .box{
        height:50% ;
        width:100% ;
        padding-left: 15px  ;
        display: block;
        gap: 5px;
       
    }
    #à-propos .box:hover{
        transform: scale(1.1);
    }
   
    #à-propos h4{
        font-size: 7px;
    }
    #à-propos  i{
        font-size: 10px;
    }
    #à-propos iframe{
          width: 90%;
    }
    #à-propos h3 {
        font-size: 7px;
        margin-right:50px ;
        text-align: center;
    }
    #à-propos form{
        width: 80%;
       
    }
    #à-propos .box-container .box h2{
        font-size: 13px;
    }
 
    #à-propos .box-container .box p{
        font-size: 14px;
    }
    #à-propos .box-container .box {
        height:100% ;
        width:100% ;
       
    }
    #à-propos .box-container{
        margin: 20%;
        height:100% ;
        width:70% ;
        display: block;
      
    }
    .contenu-footer a{
        padding-right:20%;
    }
    
    #fonctionnement{
        height: 100%;
        width: 100%;
    }
    #fonctionnement h4{
        font-size: 18px;
    }
    #fonctionnement h5{
        font-size: 15px;
        margin-right:15%;
        margin-left: 0;
        padding-left:0;
    }
    #fonctionnement h3{
        font-size: 15px;
        padding-right: 10%;
        color: #1fabc0;
    }
    #fonctionnement .box-container {
        height:30% ;
        width:70% ;
        padding-left: 15px  ;
        display: block;
        gap: 5px;
        margin-bottom: 5px;
        font-size:12px;
        margin-left: 13%;
    }
    #fonctionnement .box-container p{
        font-size: 12px;
    }
    #fonctionnement  .box{
        height:100% ;
        width:100% ;
        padding-left: 15px  ;
        display: block;
        gap: 5px;
        margin-bottom: 5px;
        font-size:12px;
       
      
    }
    #fonctionnement .box img{
        height: 50%;
        width: 23%;
    }
    .box-container .btn-search{
        display: inline;
        padding-right: 20%;
    }
    .img-desc{
        flex-direction: column ;
        width: 100%;
    }
    .img-desc p{
      text-align: center ;
      font-size: 15px;
      width: 100%;
    }
    .img-desc a{
        display:inline;
    }
    #location .btn-search{
        display:inline;
    }
    #location #galerie iframe {
        height: 80%;
        width: 60%;
    }
    #location .left p{
        font-size: 15px;
    } 
    #location .left h2{
        font-size: 17px;
        text-align: start;
    } 
    #ajouter th{
        font-size: 14px;
    }
    #ajouter td{
        font-size: 12px;
    }
    #ajouter form{
        width:80%;
    }
    #ajouter a{
        font-size: 8px;
    }
    .responsive-menu{
        width: 75px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
    }
    .responsive-menu::after{
        position: absolute;
        content: "";
        height: 3px;
        background-color: #29d9d5;
        width: 29px;
        box-shadow: 0 10px 0 #29d9d5;
        transform: translateY(-10px);
        transition: 0.5s;
    }
    .responsive-menu.active::after{
        box-shadow: #29d9d5;
        transform: rotate(45deg);
    }
    .responsive-menu::before{
        position: absolute;
        content: "";
        height: 3px;
        background-color: #29d9d5;
        width: 29px;
        transform: translateY(10px);
        transition: 0.5s;
    }
    .responsive-menu.active::before{
        transform: rotate(-45deg);
    }
    header .menu.responsive{
        display:flex ;
        position: absolute;
        top: 20px;
        right: 0;
        flex-direction: column;
        background-color: #222;
        align-items:start;
        animation: animate-menu 1s forwards;
        width: 160px;
    }
    header .menu.responsive li{
        margin: 10px;
        font-size: 9px;
    }
    
    .contenu-footer{
        width: 100%;
        font-size: 14px;
    }
    footer .liens li{
        font-size: 10px;
        color:#333;
        
        padding-top: 5%;
        padding-right: 1%;
       
    }

    footer .media li{
        font-size: 13px;
        color:#333;
        padding-top: 3%;
        padding-left: 15%; 
        display: flex;
    }
    footer p{
        font-size: 10px; 
        padding-right:15%;
    }
    footer h5{
       font-size:10px; 
       padding-left:12%;
    }
    footer h4{
        
        font-size: 14px;
    }
    footer a{
        display:block ;
        font-size: 14px;
    }
    footer a span{
        font-size: 15px;
    }
    footer i{
        font-size: 14px;
    }
   
   .text-banniere p{
    font-size:15px;
   }
   .button-banniere{
    padding-top: 15px;
   }
    .button-banniere a{
    border: solid 1px rgba(0,0,0,0.2);
    padding: 10px;
    background: rgb(191, 98, 98);
    border-radius: 9px;
    color: white;
    font-size: 10px;
    display: block;
    text-align: center;
   }

    @keyframes animate-menu {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(10%);
        }
    }
    footer p{
        font-size: 12px; 
        padding-right:15%;
    }
    footer h5{
       font-size:13px; 
       padding-left:30%;
    }
    footer h4{
        
        font-size: 10px;
    }
    footer a{
        display:block ;
        font-size: 12px;
    }
    footer a span{
        font-size: 14px;
    }
    footer i{
        font-size: 10px;
        display: block;
    }
    #location .left h2{
        font-size: 17px;
        text-align:start;
    } 
   footer{
    padding-right: 10%;
   }
}

@media (max-width:1374px) {
    
    #home{
        height:auto;
    }
        #home .box-container{
        margin-top: 10%;
        height: 100%;
        width:40%;
     
    }
    #home .box-container h2{
        font-size: 22px;
        text-align: center;
    }
    #home .box-container i{
        font-size: 17px;
        margin-left: 0;
       
    }
    #home .box-container h1{
        text-align: center;
        font-size: 13px;
        margin-left: 25%;
        padding-right:22% ;
    }
    #home .box-container .home-btn{
        display: block; 
    } 
    .home-btn{
        display: block;
    }
    #home h4{
        font-size: 18px;
    }
    #home .box-container p{
        text-align: center;
        font-size: 19px;
        margin-left: 1%;
    }
    #à-propos iframe{
        width: 90%;
        height: 100%;
    }
    
       #services{
        margin-left:15%;
        font-size: 10px;
        width: 70%;
    }
      
      #nos-services .box-container{
     
        margin-left: 5%;
    }
          #nos-tarifs .box-container{
     
        margin-left: 5%;
    }
      #location #galerie iframe {
        height: 80%;
        width: 60%;
        margin-left:20%;
    }
     #fonctionnement .box-container{
        
        margin-left:5%;
    }
      #fonctionnement .box-container{
        
        margin-left:5%;
    }
      #fonctionnement h5 {
        font-size:16px;
        margin-left:5%;
    }
}
@media (max-width:981px) {
    header .menu.responsive li{
        margin: 10px;
        width:120px;
        font-size: 11px;
    }
    #home{
        height: auto;
    }
    #home .box-container{
        width: 40%;
        height: 80%;
        margin-top: 100px;
    }
    .btn-search{
        font-size:9px;
        margin-left:0 ;  
    }
    #home .box-container p{
        text-align: center;
        font-size: 15px;
       
    }
    #home .box-container i{
        font-size: 15px;
    }
    #home .box-container h1{
        font-size: 10px;
        
    }
    #home .box-container h2{
        font-size: 16px;
    }
    #home .btn-search-home-btn{
        font-size:9px;
        margin-left:1% ; 
       
    }
    #ajouter th{
        font-size: 10px;
    }
    #ajouter td{
        font-size: 8px;
    }
    #ajouter form{
        width:80%;
    }
    #ajouter a{
        font-size: 5px;
        padding: 2px 6px  ;
    }
    #ajouter_tarif form label {
        font-size: 8px;
      
    }
    #location .left h2{
        font-size: 17px;
        text-align: center;
    } 
    #services{
        margin-left: 4%;
        font-size: 10px;
        width: 100%;
    }
    #ajouter_tarif form input{
        font-size: 8px;
      
    }
    #ajouter_tarif form  select{
        font-size:8px;
    }
    #ajouter_tarif form button{
        font-size: 8px;
    }
    .btn-search{
        display:block;
        font-size:9px;
        margin-right:2% ;
    }
    .content .box-conter .text{
        font-size: 9px; 
        color: rgb(255, 255, 255);  
    }
   
    #fonctionnement .box-container h3{
        font-size: 13px;
    }
    #fonctionnement h4{
        font-size: 13px;
        color: #ffffff;
    }
    #fonctionnement h3{
        font-size: 15px;
    }
    #fonctionnement h5{
        font-size: 15px;
        color: #ffffff;
        margin-bottom: 5%;
      text-align: center; 
    }
    #fonctionnement  img {
        height: 13%;
        width: 50%;
    }
    #fonctionnement .box-container .box{
        height: 40%;

    }
    .paiements i{
        font-size: 17px;
    }
    .paiements h1{
        font-size: 12px;
       justify-content: space-between;
       
    }
    #à-propos .box-container .box {
        height:100% ;
        width:100% ;
       
    }
    #à-propos .box-container .box h2{
        font-size: 14px;
    }
    #à-propos .box-container .box p{
        font-size: 12px;
       
    }
    #à-propos .box-container{
        height:100% ;
        width:80% ;
        display:block;
        margin: 10%;
    }
    #contact{
        width: 100%;
        height: 120%;
       }
    #contact .left-right label{
        font-size: 10px;
    }
    #contact .left-right input{
        font-size: 10px;
    }
    #contact .left-right button{
        font-size: 8px;
    }
    #contact .left-right i{
        font-size: 8px;
    }
    #contact form button{
        font-size: 10px;

    }
    #contact.left-right{
        margin-bottom: 40%;
    }
    
     #contact.left-right h4{
         font-size: 8px;
    }
     #contact.left-right p{
         font-size: 8px;
         text-align: center; 
         display : flex;
    }
    .contenu-footer{
        width: 100%;
       
    }
    footer .liens li{
        font-size: 12px;
        color:#333;
       
        padding-top: 5%;
        padding-right: 37%;
       
    }

    footer .media li{
        font-size: 13px;
        color:#333;
        padding-top: 3%;
        padding-left: 0;
        padding-right: 15%; 
        display: flex;
    }
    footer p{
        font-size: 9px; 
        padding-left: 35%;
    }
    footer h5{
       font-size:9px; 
       padding-left: 17%;
    }
    footer h4{
        font-size: 8px;
        margin-top: 2%;
        display: flex;
    }
    footer a{
        font-size: 10px;
       
    }
    footer a span{
        font-size: 12px;
    }
    footer i{
        font-size: 10px;
        padding-left:0 ;
    }
    header .menu.responsive li{
        margin: 10px;
        width:120px;
        font-size: 11px;
    }
}
@media  (max-width:500px){
    header .menu.responsive li{
        margin: 10px;
        width:120px;
        font-size: 11px;
    }
    #home .btn-search-home-btn{
        font-size: 10px;
        margin-left: 5%;
     }
    #home .box-container h2{
        font-size: 18px;
        text-align: center;
      
    }
    #home .box-container{
        margin-top: 30%;
        height: 100%;
        width: 60%;
    }
    #home{
        width: 120%;
    }
   
    #home .box-container .home-btn{
        display: block;
    } 
    .home-btn{
        display: block;
    }
    #home h4{
        font-size: 16px;
    }
    #home .box-container h1{
        font-size: 12px;
        text-align: center;
    }
    #home .box-container i{
        font-size: 12px;
        margin-left: 0;
    }
    #home .box-container h3{
        font-size: 8px;
        color:white;
    }
   
    #home .box-container p{
        text-align: center;
        font-size: 12px;
        color:rgb(255, 255, 255);
        line-height: 1.5;
        margin-left: 5%;
    }
    #home .box-container a{
        margin-left: 5%; 
    }

    #location {
         margin-right: 20%;
    }
    #location .left{
        width: 70%;
        height: 100%;
    }
    #location .left h2{
        font-size: 13px;
        text-align:center;
        margin-right: 15%;
    }
    .paiements h1{
        font-size: 10px;
        padding-left: 15%;
    }
   
    #prix .btn-search{
        margin-left: 1%;
    }
    .calendly-inline-widget{
        min-width:90%;
        max-height:60%;
        border-radius:15px;
        margin-left:10%;
    }
    #contact{
        width: 100%;
        height: 120%;
       }
    #contact h4{
        font-size: 8px;
      
       
    }
    #contact h2{
        font-size: 12px;
        padding-left: 30%;
    }
    #contact p{
        font-size: 8px;
        display: flex;
       
    }
    #contact i{
        font-size: 14px; 
    }
    #contact.left-right{
        margin-bottom: 40%;
    }
    .wrapper{
        height: 20%;
        width: 60%;
        margin-bottom: 50%;
        margin-left: 25%;
    }
    .profile-top{
        height: 80%;
        width: 50%;
    }
    #services p{
        font-size: 11px;
    }
    #à-propos .left-right{
        width: 100%;
        height: 100%;
    }
    #à-propos .left-right .right h3{
        font-size: 10px; 
        display: block;
        text-align:center;
    }
    #à-propos .left-right h4{
        font-size: 7px; 
        display:flex;
    }
    #à-propos  .left-right .left iframe{
        height: 100%;
    }
    #à-propos .left-right i{
        font-size: 16px;
        margin-left: 5%;
    }
    #à-propos .left-right .right h4{
        font-size: 10px; 
        display: block;  
    }
    #à-propos .left-right .right h5{
        font-size: 10px; 
        display: block;  
    }
    #à-propos .left-right .right a{
        font-size: 10px;   
    }
    #fonctionnement .box-container{
        width: 85%;
        height: 10%;
        margin-left: 7%;
        margin-bottom: 10%;
    }
    #prix .column .counter{
        font-size: 17px;
    }
    #prix .btn-search{
        margin-left: 5%;
    }
    #contact{
        width: 100%;
        height: 100%;
    }
    #ajouter th{
        font-size: 10px;
    }
    #ajouter td{
        font-size: 8px;
    }
    #ajouter form{
        width:120%;
    }
    #ajouter a{
        font-size: 4px;
        padding: 2px 5px;
    }
    footer{
        width: 120%;
        background-color: #333;
        padding: 30px 0;
        font-size: 12px;
        color: #fefefe;
    }
    .contenu-footer{
        width: 80%;
        height: 60%;
        margin: 0px;
        display: flex;
        justify-content: center;
        font-size: 12px;
        padding: 30px 0 px;
        text-decoration: none;
    }
   
    footer .media li{
        font-size: 10px;
        color:#333;
        padding-top: 3%;
        padding-left: 1%; 
        display: flex;
    }
   
    footer .liens li{
        font-size: 10px;
        color:#333;
        padding-top: 3%; 
    }
    footer p{
        font-size: 10px; 
        padding-left:15%;
    }
    footer h5{
       font-size:8px; 
       margin-left:40%;
    }
    footer h4{
        margin-top: 5px;
        line-height: 2;
        font-size: 8px;
        display: flex;
        text-align: center;
        margin-left:25%;
    }
    footer a{
        display:block ;
        font-size: 8px;
        margin-left: 45%;
    }
    footer i{
        font-size: 10px;
        margin-right: 11%;
    }
    footer  h3 {
        margin-right: 30%; 
    }
    footer span{
        font-size:12px ;
       
    }
    header .menu.responsive li{
        margin: 10px;
        width:120px;
        font-size: 11px;
    }
}
@media  (max-width:500px){
    header .menu.responsive li{
        margin: 10px;
        width:120px;
        font-size: 11px;
    }
    #home .btn-search-home-btn{
        font-size: 10px;
        margin-left: 5%;
     }
    #home .box-container h2{
        font-size: 11px;
        text-align: center;
      
    }
    #home .box-container{
        margin-top: 30%;
        height: 100%;
        width: 60%;
    }
    #home{
        width: 120%;
    }
   
    #home .box-container .home-btn{
        display: block;
    } 
    .home-btn{
        display: block;
    }
    #home h4{
        font-size: 16px;
    }
    #home .box-container h1{
        font-size: 12px;
        text-align: center;
    }
    #home .box-container i{
        font-size: 12px;
       margin-left: 0;
    }
    #home .box-container h3{
        font-size: 8px;
        color:white;
    }
   
    #home .box-container p{
        text-align: center;
        font-size: 12px;
        color:rgb(255, 255, 255);
        line-height: 1.5;
        margin-left: 5%;
    }
    #home .box-container a{
        margin-left: 5%; 
    }

    #location {
         margin-right: 20%;
    }
    #location .left{
        width: 70%;
        height: 100%;
    }
    #location .left h2{
        font-size: 13px;
        text-align:center;
        margin-right: 15%;
    }
    .paiements h1{
        font-size: 10px;
        padding-left: 15%;
    }
   services p{
        font-size: 11px;
    }
    #prix .btn-search{
        margin-left: 1%;
        font-size: 10px;
    }
    #prix.row{
        margin-left: 25%;
        width: 80%;
        height: 90%;
    }
    .calendly-inline-widget{
        min-width:90%;
        max-height:60%;
        border-radius:15px;
        margin-left:10%;
    }
    #contact{
        width: 100%;
        height: 120%;
       }
    #contact h4{
        font-size: 8px;
        display: inline;
       
    }
    #contact h2{
        font-size: 12px;
        padding-left: 30%;
    }
    #contact p{
        font-size: 8px;
        display: flex;
       
    }
    #contact i{
        font-size: 14px; 
    }
    #contact.left-right{
        margin-bottom: 40%;
    }
    .wrapper{
        height: 20%;
        width: 60%;
        margin-bottom: 50%;
        margin-left: 25%;
    }
    .profile-top{
        height: 80%;
        width: 50%;
    }
    #à-propos .left-right{
        width: 100%;
        height: 100%;
    }
    #à-propos .left-right .right h3{
        font-size: 10px; 
        display: block;
        text-align:center;
    }
    #à-propos .left-right h4{
        font-size: 7px; 
        display:flex;
    }
    #à-propos  .left-right .left iframe{
        height: 100%;
    }
    #à-propos .left-right i{
        font-size: 16px;
        margin-left: 5%;
    }
    #à-propos .left-right .right h4{
        font-size: 10px; 
        display: block;  
    }
    #à-propos .left-right .right h5{
        font-size: 10px; 
        display: block;  
    }
    #à-propos .left-right .right a{
        font-size: 10px;   
    }
    #fonctionnement .box-container{
        width: 85%;
        height: 10%;
        margin-left: 7%;
        margin-bottom: 10%;
    }
    #prix .column .counter{
        font-size: 17px;
    }
    #prix .btn-search{
        margin-left: 5%;
    }
    #contact{
        width: 100%;
        height: 100%;
       }
       #ajouter th{
        font-size: 10px;
    }
    #ajouter td{
        font-size: 8px;
    }
    #ajouter form{
        width:120%;
    }
    #ajouter a{
        font-size: 4px;
        padding: 2px 5px;
    }
    footer{
        width: 120%;
        background-color: #333;
        padding: 30px 0;
        font-size: 12px;
        color: #fefefe;
    }
    .contenu-footer{
        width: 80%;
        height: 60%;
        margin: 0px;
        display: flex;
        justify-content: center;
        font-size: 12px;
        padding: 30px 0 px;
        text-decoration: none;
    }
   
    footer .media li{
        font-size: 10px;
        color:#333;
        padding-top: 3%;
        padding-left: 1%; 
    }
   
    footer .media li{
        font-size: 10px;
        color:#333;
        padding-top: 3%; 
    }
    footer p{
        font-size: 10px; 
        padding-left:15%;
    }
    footer h5{
       font-size:10px; 
       margin-left:47%;
    }
    footer h4{
        margin-top: 5px;
        line-height: 2;
        font-size: 8px;
        display: flex;
        text-align: center;
        margin-left:25%;
    }
    footer a{
        display:block ;
        font-size: 8px;
        margin-left: 37%;
    }
    footer i{
        font-size: 10px;
        margin-right: 11%;
    }
    footer  h3 {
        margin-right: 30%; 
    }
    footer span{
        font-size:12px ;
       
    }
    header .menu.responsive li{
        margin: 10px;
        width:120px;
        font-size: 11px;
    }
}
@media  (max-width:570px){
    header .menu.responsive li{
        margin: 10px;
        width:120px;
        font-size: 11px;
    }
    #home .btn-search-home-btn{
        font-size: 10px;
        margin-left: 5%;
     }
    #home .box-container h2{
        font-size: 12px;
        text-align: center;
      
    }
    #home .box-container{
        margin-top: 30%;
        height: 100%;
        width: 60%;
    }
    #home{
        width: 120%;
    }
   
    #home .box-container .home-btn{
        display: block;
    } 
    .home-btn{
        display: block;
    }
    #home h4{
        font-size: 16px;
    }
    #home .box-container h1{
        font-size: 12px;
        text-align: center;
    }
    #home .box-container i{
        font-size: 12px;
        margin-left: 0;
    }
    #home .box-container h3{
        font-size: 8px;
        color:white;
    }
   
    #home .box-container p{
        text-align: center;
        font-size: 12px;
        color:rgb(255, 255, 255);
        line-height: 1.5;
        margin-left: 5%;
    }
    #home .box-container a{
        margin-left: 5%; 
    }
    #nos-services .box-container{
        width: 100%;
        margin-left: 15%;
    }
    #nos-tarifs .box-container{
        width: 100%;
        margin-left: 15%;
    }
    #services p{
        font-size: 11px;
    }
      #services {
        font-size: 11px;
        width: 80%;
        margin-left: 25%;
    }
    .content .box-conter .counter{
    font-size: 30px;
    font-weight: 350;
    color: #ffffff;
    margin-bottom: 10%;
    
}
    #prix.row{
    margin-left: 10%;
    width: 80%;
    height: 90%;
    }
    #prix .column{
        width: 80%;
        height: 100%;
        padding-right:0;
        margin-left:0;
        margin-right:35%;
    }
    
    #location #galerie {
         margin-left: 10%;
    }
    #location .left{
        width: 70%;
        height: 100%;
        margin-left:23%;
    }
    #location .left h2{
        font-size: 13px;
        text-align:center;
        margin-right: 30%;
    }
    .paiements h1{
        font-size: 10px;
        padding-left: 15%;
    }
   
    #prix .btn-search{
        font-size: 8px;
    }
    
    .calendly-inline-widget{
        min-width:90%;
        max-height:60%;
        border-radius:15px;
        margin-left:10%;
    }
    #contact{
        width: 100%;
        height: 120%;
       }
    #contact h4{
        font-size: 8px;
        
       
    }
    #contact h2{
        font-size: 12px;
        padding-left: 30%;
    }
    #contact p{
        font-size: 8px;
        display: flex;
       
    }
    #contact i{
        font-size: 14px; 
    }
    #contact.left-right{
        margin-bottom: 40%;
    }
    .wrapper{
        height: 20%;
        width: 60%;
        margin-bottom: 50%;
        margin-left: 25%;
    }
    .profile-top{
        height: 80%;
        width: 50%;
    }
    #à-propos .left-right{
        width: 100%;
        height: 100%;
    }
    #à-propos .left-right .right h3{
        font-size: 10px; 
        display: block;
        text-align:center;
    }
    #à-propos .left-right h4{
        font-size: 7px; 
        display:flex;
    }
    #à-propos  .left-right .left iframe{
        height: 100%;
    }
    #à-propos .left-right i{
        font-size: 16px;
        margin-left: 5%;
    }
    #à-propos .left-right .right h4{
        font-size: 10px; 
        display: block;  
    }
    #à-propos .left-right .right h5{
        font-size: 10px; 
        display: block;  
    }
    #à-propos .left-right .right a{
        font-size: 10px;   
    }
    #fonctionnement .box-container{
        width: 85%;
        height: 10%;
        margin-left: 7%;
        margin-bottom: 10%;
    }
    #prix .column .counter{
        font-size: 17px;
    }
    #prix .btn-search{
        margin-left: 5%;
    }
    #contact{
        width: 100%;
        height: 100%;
    }
    #ajouter th{
        font-size: 10px;
    }
    #ajouter td{
        font-size: 8px;
    }
    #ajouter form{
        width:120%;
    }
    #ajouter a{
        font-size: 4px;
        padding: 2px 5px;
    }
    footer{
        width: 120%;
        background-color: #333;
        padding: 30px 0;
        font-size: 12px;
        color: #fefefe;
    }
    .contenu-footer{
        width: 80%;
        height: 60%;
        margin: 0px;
        display: flex;
        justify-content: center;
        font-size: 12px;
        padding: 30px 0 px;
        text-decoration: none;
    }
   
    footer .media li{
        font-size: 10px;
        color:#333;
        padding-top: 3%;
        padding-left: 1%; 
    }
   
    footer .media li{
        font-size: 10px;
        color:#333;
        padding-top: 3%; 
    }
    footer p{
        font-size: 10px; 
        padding-left:25%;
    }
    footer h5{
       font-size:8px; 
       margin-left:40%;
    }
    footer h4{
        margin-top: 5px;
        line-height: 2;
        font-size: 8px;
        display: flex;
        text-align: center;
        margin-left:25%;
    }
    footer a{
        display:block ;
        font-size: 8px;
        margin-left: 40%;
    }
    footer i{
        font-size: 10px;
        margin-right: 11%;
    }
    footer  h3 {
        margin-right: 30%; 
    }
    footer span{
        font-size:12px ;
       
    }
}
@media (max-width:440px){
    header .menu.responsive li{
        margin: 10px;
        width: 100px;
        font-size: 8px;
    }
 
    .responsive-menu{
        width: 10%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
        font-size: 8px;
    }
    .responsive-menu::after{
        position: absolute;
        content: "";
        height: 3px;
        background-color: #29d9d5;
        width: 19px;
        box-shadow: 0 10px 0 #29d9d5;
        transform: translateY(-10px);
        transition: 0.5s;
    }
    .responsive-menu.active::after{
        box-shadow: #29d9d5;
        transform: rotate(45deg);
    }
    .responsive-menu::before{
        position: absolute;
        content: "";
        height: 3px;
        background-color: #29d9d5;
        width: 19px;
        transform: translateY(10px);
        transition: 0.5s;
    }
    .responsive-menu.active::before{
        transform: rotate(-45deg);
    }
  
    header .logo a {
        font-size: 15px;
        color: #29d9d5;
    }
    header .logo a span {
        color:#ffffff; 
        font-size: 15px;
    }
    .menu {
        display: flex;
        align-items: center;
       
    }
    .menu a{
        font-size: 10px;
    }
    header .menu{
        display: none;
        width: 30%;
        font-size: 10px;
    }
    .btn-search{
        display:block;
        font-size: 10px;
        margin-left: 3%;
    }
    #home .btn-search-home-btn{
        font-size: 12px;
        margin-left: 5%;
     }
    #home .box-container h2{
        font-size: 11px;
        text-align: center;
        margin:5%;
    }
    #home .box-container{
        margin-top: 30%;
        height: 100%;
        width: 60%;
    }
    #home{
        width: 120%;
    }
   
    #home .box-container .home-btn{
        display: block;
    } 
    .home-btn{
        display: block;
    }
  
    #home .box-container h1{
        font-size: 10px;
        text-align: center;
        display: flex;
    }
    #home .box-container i{
        font-size: 12px;
        margin-left: 0;
        padding-right: 0;
    }
    #home .box-container h3{
        font-size: 8px;
        color:white;
    }
   
    #home .box-container p{
        text-align: center;
        font-size: 15px;
        color:rgb(255, 255, 255);
        line-height: 1.5;
        margin-left: 5%;
    }
    #home .box-container a{
        margin-left: 5%; 
    }
    .paiements h1{
        font-size: 9px; 
        padding-left: 25%;
       
    }
    .paiements i{
        font-size: 10px;
        margin-left: 1%;
    }
    #services .btn-search-home-btn{
        display: block;
        margin-right:17%;
        font-size: 6px;
        text-align:center;
     }

    #services {
        margin-left: 15%;
        width: 100%; 
        padding-top: 5%; 
    }
    #services p{
        font-size: 11px;
    }
    #nos-services .box-container{
        width: 100%;
        margin-left: 15%;
    }
    #nos-services .box-container .box h3{
        font-size: 12px; 
    }
    #nos-services .box-container .box {
        height: 50%;
        width: 100%;
    }
    #nos-services .box-container i{
        font-size: 13px;
    }
    #nos-services .box-container p{
        text-align:center;
       
    }
    #nos-tarifs .box-container h4{
        font-size: 15px;
    }
    #nos-tarifs .box-container{
        width: 100%;
        margin-left: 15%;
    }
    #nos-services .row{
        width: 100%;
        height: 50%;
        margin-left: 5%;
    }
    #nos-tarifs .box-container p{
        font-size: 8px;
    }
    #nos-services .text{
        font-size: 14px;
    }
    #nos-services .column{
      width: 100%;
      margin-left: 10%;
    }
    #contact{
        width: 100%;
        height: 120%;
       }
    #contact form{
      height:max-content;
      width: 100%;
      margin-left: 60px  ;
    }
    #contact .btn-search{
        display: block;
        font-size: 13px;
        text-align: center;
        background-color: #33aaa8;
        padding-left: 20px;
        margin-left: 80px  ;
        margin-right: 60px  ;
    }
    #contact .btn-search:hover{
        transform: scale(0.9);
        color: #065763;
    }
    #contact .left-right h4{
        font-size: 7px;
     
    }
   
    #contact .left-right p{
        font-size: 7px;
        display: flex;
    }
    #contact .left-right.left{
        margin-bottom: 40%;
    }
  
    .wrapper{
        height: 50%;
        width: 650%;
        margin-bottom: 100%;
    }
    .profile-top{
        height: 80%;
        width: 50%;
    }
    iframe {
        height: 60%;
        width: 100%;
    }
    #fonctionnement .box-container{
        width: 100%;
        height: 100%;
        margin-left: 9%;
    }
    #fonctionnement .box-container h3{
        font-size: 10px;
    }
    #fonctionnement h4{
        font-size: 15px;
        color: #ffffff;
        margin-top: 10%;
    }
    #fonctionnement h3{
        font-size: 15px;
        padding-right: 10%;
        color: #1fabc0;
    }
    #fonctionnement h5{
        font-size: 12px;
        color: #ffffff;
        margin: auto;
        margin-bottom: 3%;
        padding-left: 10%;
    }
    #fonctionnement  img {
        height: 13%;
        width: 20%;
    }
    #fonctionnement .box-container .box{
        height: 40%;
    }
    #location .left p{
        font-size: 12px;
    }
    
    #location .left{
        width: 100%;
        height: 100%;
        margin-left: 10%;
    }
    #location .left h2{
        font-size: 13px;
        text-align: center;
       margin-right: 30%;
    }
    .calendly-inline-widget{
        width:100%;
        height:100%;
        border-radius:15px;
        padding-right: 30%;
       
     }
   
    #location {
         margin-right: 20%;
    }
    #location #galerie{
        width: 100%;
        height: 100%;
        padding-right: 25%;
    }
    .calendly-inline-widget{
        width:100%;
        height:100%;
        border-radius:15px;
        padding-right: 30%;
       
     }
  
    #prix .box-conter{
        width: 80%;
        height: 100%;
        padding-right:0;
        margin-left:0;
        margin-right:20%;
        
    }
    #prix a{
        margin-left: 25%;
        font-size: 10px;
      
     }
     #prix a:hover{
         margin-left: 35%;
         font-size: 10px;
      }
     #prix .btn-search{
         font-size: 8px;
         margin-left: 0;
      }
    #à-propos .box-container {
        height:100% ;
        width:100% ;
        gap: 5px;
        margin-bottom: 40px;
     
    }
    #à-propos .box{
        height:100% ;
        width:100% ;
        display:grid;
    }
    #à-propos .box  h2{
        font-size: 8px;
     
    }
    #à-propos .box p{
        font-size: 9px;
        
    }
    #à-propos .box-container:hover{
        transform: scale(1.1);
    }
    #à-propos .box-container .box {
        width: 100%;
        height: 100%;
        font-size: 8px;
      
    }
    #à-propos .box-container .box h2{
        font-size: 10px;
      
    }
  
    #à-propos .box-container .box i{
        font-size: 7px;
    }
    #à-propos h5{
        font-size: 5px;
    }
    #à-propos h4{
        font-size: 5px;
       ;
    }
    #à-propos iframe{
          width: 90%;
         
    }
    #à-propos h3 {
        font-size: 7px;
        margin-right:5px ;
    }
    #à-propos  i{
        font-size: 15px;
    }
    #à-propos form{
        width: 100%;
        margin-right: 30%; 
    }
    #à-propos .left-right{
        transform: scale(1.1);
        border: 2px solid #042424;
        color: transparent;
        border-radius: 20px;
        margin-left: 15%;
        width: 100%;
    }
   
    #à-propos .left-right .right i{
        font-size: 10px;
        margin-left: 0;
        padding-left: 0;
        margin-right: 0;
        
    }
    #à-propos .left-right .right h4 {
        font-size: 6px;
    }
    #à-propos .left-right .right a{
        font-size: 6px;
    }
    #prix .column{
        width: 100%;
        margin-right: 30%;
    }
    #prix .column .text{
        font-size: 14px;
    }

    #prix .column .counter{
        font-size: 12px;
         
    }

    #galerie .container{
        width: 100%;
        margin-left: 15%;
    }
    #ajouter tr{
        font-size: 10px;
    }
    #ajouter th{
        font-size: 7px;
    }
    #ajouter td{
        font-size: 7px;
    }
    #ajouter form{
        width:120%;
    }
    #ajouter a{
        font-size: 8px;
       
        margin: auto;
    }
    #ajouter_tarif .left{
        width: 100%;
        margin-left: 5%;
    }
    #ajouter_tarif .left-right{
        width: 100%;
    }
    #ajouter_tarif form{
        width: 100%;
        margin-left: 7%;
    }
    #ajouter_tarif .btn-search{
        margin-left: 35%;
    }
    .wrapper{
        height: 30%;
        width: 70%;
       margin-bottom: 100%;
    }
    .profile-top{
        height: 80%;
        width: 50%;
    }
    footer{
        width: 120%;
        background-color: #333;
        padding: 30px 0;
        font-size: 12px;
        color: #fefefe;
    }
    .contenu-footer{
        width: 80%;
        height: 60%;
        margin: 0px;
        display: flex;
        justify-content: center;
        font-size: 12px;
        padding: 30px 0 px;
        text-decoration: none;
    }
   
    footer .media li{
        font-size: 10px;
        color:#333;
        padding-top: 3%;
        padding-left: 1%; 
    }
   
    footer .media li{
        font-size: 10px;
        color:#333;
        padding-top: 3%; 
    }
    footer p{
        font-size: 10px; 
        padding-left:18%;
    }
    footer h5{
       font-size:7px; 
       margin-left:42%;
    }
    footer h4{
        margin-top: 5px;
        line-height: 2;
        font-size: 8px;
        display: flex;
        text-align: center;
        margin-left:20%;
    }
    footer a{
        display:block ;
        font-size: 8px;
        margin-left: 32%;
    }
    footer i{
        font-size: 10px;
        margin-right: 11%;
    }
    footer  h3 {
        margin-right: 30%; 
    }
    footer span{
        font-size:12px ;
       
    }
    .text-banniere p{
        font-size: 10px;
      
    }
    .button-banniere{
        padding-top: 15px;
    }
    .button-banniere a{
        border: solid 1px rgba(0,0,0,0.2);
        display: block;
        background: rgb(191, 98, 98);
        border-radius: 9px;
        color: white;
        font-size: 8px;
        
    }
    @keyframes animate-menu {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(10%);
        }
        
    }
    header .menu.responsive li{
        margin: 10px;
        width:120px;
        font-size: 11px;
    }
}   
    @media (max-width:360px){
        header .menu.responsive li{
            margin: 10px;
            width:120px;
            font-size: 11px;
        }
        .responsive-menu{
            width: 10%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
            font-size: 10px;
        }
        .responsive-menu::after{
            position: absolute;
            content: "";
            height: 3px;
            background-color: #29d9d5;
            width: 19px;
            box-shadow: 0 10px 0 #29d9d5;
            transform: translateY(-10px);
            transition: 0.5s;
        }
        .responsive-menu.active::after{
            box-shadow: #29d9d5;
            transform: rotate(45deg);
        }
        .responsive-menu::before{
            position: absolute;
            content: "";
            height: 3px;
            background-color: #29d9d5;
            width: 19px;
            transform: translateY(10px);
            transition: 0.5s;
        }
        .responsive-menu.active::before{
            transform: rotate(-45deg);
        }
        header .logo a {
            font-size: 15px;
            color: #29d9d5;
        }
        header .logo a span {
            color:#ffffff; 
            font-size: 15px;
        }
        .menu {
            display: flex;
            align-items: center;
           
        }
        .menu a{
            font-size: 10px;
        }
        header .menu{
            display: none;
            width: 30%;
            font-size: 10px;
        }
        .btn-search{
            display:block;
            font-size: 10px;
            margin-right: 7%;
        }
        #home .btn-search-home-btn{
            font-size: 10px;
            margin-left: 2%;
         }
        #home .box-container h2{
            font-size: 12px;
            text-align: center;
           
        }
        #home .box-container{
            margin-top: 30%;
            height: 80%;
            width: 60%;
        }
        #home{
            width: 120%;
        }
       
        #home .box-container .home-btn{
            display: block;
        } 
        .home-btn{
            display: block;
        }
        #home h4{
            font-size: 16px;
        }
        #home .box-container h1{
            font-size: 10px;
            text-align:center;
            margin-left: 7%;
        }
        #home .box-container i{
            font-size: 9px;
            margin-right:0;
            margin-left: 15%;
            text-align:start;
        }
        #home .box-container h3{
            font-size: 10px;
            color:white;
        }
        #home .box-container p{
            font-size: 10px;
            color:rgb(255, 255, 255);
            line-height: 1.5;
            margin-left: 5%;
        }
      
        
        .paiements h1{
            font-size: 8px; 
            text-align: center;
        }
        .paiements i{
            font-size: 8px; 
        }
        #services .btn-search-home-btn{
            display: block;
            margin-right:17%;
            font-size: 6px;
            text-align:center;
         }
         #nos-services{
            width: 120%;
         }
         #nos-services .row{
            width: 80%;
            height: 90%;
            margin-left:1%;
         }
        #services {
            padding-top: 5%;
            margin-left: 1%;
            width: 100%; 
            height: 90%; 
        }
        #services p{
            font-size: 11px;
        }
        #nos-services .box-container{
            width: 90%;
            margin-left: 5%;
        }
        #nos-services .box-container .box h3{
            font-size: 12px; 
        }
        #nos-services .box-container .box {
            height: 50%;
            width: 100%;
        }
        #nos-services .box-container i{
            font-size: 13px;
        }
        #nos-services .box-container p{
            text-align:center;
           
        }
        #nos-tarifs .box-container h4{
            font-size: 15px;
        }
        #nos-tarifs .box-container{
            width: 100%;
            margin-left: 15%;
        }
        #nos-tarifs .box-container p{
            font-size: 8px;
        }
        #nos-services .text{
            font-size: 14px;
        }
        #nos-services .column{
          width: 100%;
          margin-left: 10%;
        }
       #contact{
        width: 100%;
        height: 100%;
       }
        #contact form{
          height: 55%;
          width: 100%;
          margin-left: 10% ;
        }
        #contact .btn-search{
            display: block;
            font-size: 13px;
            text-align: center;
            background-color: #33aaa8;
            padding-left: 20px;
            margin-left: 80px  ;
            margin-right: 60px  ;
        }
        #contact .btn-search:hover{
            transform: scale(0.9);
            color: #065763;
        }
        #contact .left-right h4{
            font-size: 6px;
            
        }
        #contact .left-right p{
            font-size: 6px;
            display: flex;
        }
        #contact p{
            font-size: 14px;
            display: flex;
        }
        #contact iframe{
            margin-left: 12%;
            height: 60%;
            width: 100%;
        }
        #contact.left{
            margin-bottom: 40%;
        }
       
        #fonctionnement .box-container{
            width: 100%;
            height: 90%;
            margin-left: 7%;
        }
        #fonctionnement .box-container h3{
            font-size: 10px;
        }
        #fonctionnement h4{
            font-size: 15px;
            color: #ffffff;
            margin-top: 10%;
        }
        #fonctionnement h3{
            font-size: 15px;
            padding-right: 10%;
            color: #1fabc0;
        }
        #fonctionnement h5{
            font-size: 12px;
            color: #ffffff;
            margin: auto;
            margin-bottom: 3%;
            padding-left: 10%;
        }
        #fonctionnement  img {
            height: 13%;
            width: 20%;
        }
        #fonctionnement .box-container .box{
            height: 40%;
        }
        #location .left p{
            font-size: 12px;
        }
        
        #location .left{
            width: 70%;
            height: 100%;
            margin-left: 22%;
        }
        #location .left h2{
            font-size: 11px;
            text-align: center;
            padding-left: 28%;

        }
        #location #galerie{
            width: 90%;
            padding-right: 13%;
        }
        #prix .box-conter{
            margin-right: 50%;
            
        }
        #prix a{
           margin-left: 0;
           padding-left:2%;
           font-size: 8px;
        }
        #prix a:hover{
            margin-left: 35%;
            font-size: 10px;
         }
        #prix .btn-search{
            font-size: 8px;
            padding-left:5%;
            margin-left:0;
            padding-right:5%;
         }
        .calendly-inline-widget{
           width:100%;
           height:100%;
           border-radius:15px;
           padding-right: 30%;
          
        }
        #à-propos .box-container {
            height:100% ;
            width:100% ;
            gap: 5px;
            margin-bottom: 40px;
         
        }
        #à-propos .box{
            height:100% ;
            width:100% ;
            display:grid;
        }
        #à-propos .box  h2{
            font-size: 8px;
         
        }
        #à-propos .box p{
            font-size: 9px;
            
        }
        #à-propos .box-container:hover{
            transform: scale(1.1);
        }
        #à-propos .box-container .box {
            width: 100%;
            height: 100%;
            font-size: 8px;
           
        }
      
        #à-propos h5{
            font-size: 6px;
        }
        #à-propos h4{
            font-size: 5px;
           ;
        }
        #à-propos iframe{
            width: 90%;
             
        }
        #à-propos h3 {
            font-size: 7px;
            margin-right: 22px ;
            
        }
        #à-propos  i{
            font-size: 15px;
        }
        #à-propos form{
            width: 100%;
            margin-right: 27%; 
        }
        #à-propos .left-right{
            transform: scale(1.1);
            border: 2px solid #042424;
            color: transparent;
            border-radius: 20px;
            margin-left: 1%;
            width: 120%;
            height: 90%;
            font-size: 15px;
        }
        #à-propos .left-right .right i{
            font-size: 10px;
            margin-left: 0;
            padding-left: 0;
            margin-right: 0;
            
        }
        #à-propos .left-right .right h4 {
            font-size: 6px;
        }
        #à-propos .left-right .right h5 {
            font-size: 9px;
            text-align: center;
        }
        #à-propos .left-right .right h3 {
            font-size: 9px;
            margin-left: 0;
            padding-left: 0;
            padding-right: 0;
            margin-right: 0;
        }
        #à-propos .left-right .right a{
            font-size: 6px;
            margin-left: 2%;
        }
        #prix .column{
            width: 100%;
        }
        #prix .column .text{
            font-size: 14px;
        }
    
        #prix .column .counter{
            font-size: 12px;
        }
    
        #galerie .container{
            width: 100%;
            margin-left: 15%;
        }
        #ajouter th{
            font-size: 7px;
            padding-left: 0;
      
        }
        #ajouter tr{
            font-size: 6px;
        }
        #ajouter td{
            font-size: 6px;
        }
        #ajouter form{
            width:120%;
        }
        #ajouter a{
            font-size: 7px;
            margin: auto;
        }
        #galerie .container{
            width: 100%;
            margin-left: 15%;
        }

        #ajouter_tarif .left{
            width: 100%;
            margin-left: 5%;
        }
        #ajouter_tarif .left-right{
            width: 100%;
        }
        #ajouter_tarif form{
            width: 100%;
            margin-left: 7%;
        }
        #ajouter_tarif .btn-search{
            margin-left: 35%;
        }
        
        footer{
            width: 120%;
            background-color: #333;
            padding: 30px 0;
            font-size: 12px;
            color: #fefefe;
        }
        .contenu-footer{
            width: 80%;
            height: 60%;
            margin: 0px;
            display: flex;
            justify-content: center;
            font-size: 12px;
            padding: 30px 0 px;
            text-decoration: none;
        }
       
        footer .media li{
            font-size: 10px;
            color:#333;
            padding-top: 3%;
            padding-left: 1%; 
        }
       
        footer .liens li{
            font-size: 10px;
            color:#333;
            padding-top: 8%; 
        }
        footer p{
            font-size: 10px; 
            padding-left:15%;
        }
        footer h5{
           font-size:7px; 
           margin-left:%;
        }
        footer h4{
            margin-top: 5px;
            line-height: 2;
            font-size: 8px;
            display: flex;
            text-align: center;
            margin-left:25%;
        }
        footer a{
            display:block ;
            font-size: 8px;
            margin-left: 25%;
        }
        footer i{
            font-size: 10px;
            margin-right: 11%;
        }
        footer  h3 {
            margin-right: 30%; 
        }
        footer span{
            font-size:12px ;
           
        }
      
        .text-banniere p{
            font-size: 10px;
          
        }
        .button-banniere{
            padding-top: 15px;
        }
        .button-banniere a{
            border: solid 1px rgba(0,0,0,0.2);
            display: block;
            background: rgb(191, 98, 98);
            border-radius: 9px;
            color: white;
            font-size: 8px;
        }
        header .menu.responsive li{
            margin: 10px;
            width:12px;
            font-size: 11px;
        }
    }
    
    @media (max-width:320px){
        header .menu.responsive li{
            margin: 10px;
            width:120px;
            font-size: 11px;
        }
        .responsive-menu{
            width: 10%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
            font-size: 10px;
        }
        .responsive-menu::after{
            position: absolute;
            content: "";
            height: 3px;
            background-color: #29d9d5;
            width: 19px;
            box-shadow: 0 10px 0 #29d9d5;
            transform: translateY(-10px);
            transition: 0.5s;
        }
        .responsive-menu.active::after{
            box-shadow: #29d9d5;
            transform: rotate(45deg);
        }
        .responsive-menu::before{
            position: absolute;
            content: "";
            height: 3px;
            background-color: #29d9d5;
            width: 19px;
            transform: translateY(10px);
            transition: 0.5s;
        }
        .responsive-menu.active::before{
            transform: rotate(-45deg);
        }
        header .logo a {
            font-size: 15px;
            color: #29d9d5;
        }
        header .logo a span {
            color:#ffffff; 
            font-size: 15px;
        }
        .menu {
            display: flex;
            align-items: center;
           
        }
        .menu a{
            font-size: 10px;
        }
        header .menu{
            display: none;
            width: 30%;
            font-size: 10px;
        }
        .btn-search{
            display:block;
            font-size: 10px;
            margin-right: 7%;
        }
        #home .btn-search-home-btn{
            font-size: 10px;
         }
        #home .box-container h2{
            font-size: 10px;
            text-align: center;
           
        }
        #home .box-container p{
            text-align: center;
            font-size: 11px;
        }
       
        #home .box-container{
           margin-top: 30%;
            height: 80%;
            width: 60%;
        }
        #home{
            width: 120%;
        }
       
        #home .box-container .home-btn{
            display: block;
        } 
        .home-btn{
            display: block;
        }
        #home h4{
            font-size: 16px;
        }
        #home .box-container h1{
            font-size: 10px;
            text-align:center;
            margin-left: 7%;
            padding-right: 0;
        }
        #home .box-container i{
            font-size: 9px;
            margin-right: 5%;
            margin-left: 5%;
            text-align:center;
        }
        #home .box-container h3{
            font-size: 10px;
            color:white;
        }
      
        #home .box-container p{
            font-size: 10px;
            color:rgb(255, 255, 255);
            line-height: 1;
            text-align:center;
        }
        #home .box-container h2{
            font-size: 13px;
        }
        .paiements h1{
            font-size: 8px; 
            padding-left: 12%;
            margin-left: 0;
        }
        .paiements i{
            font-size: 9px; 
        }
        #services .btn-search-home-btn{
            display: block;
            margin-right:17%;
            font-size: 6px;
            text-align:center;
         }
    
        #services {
            margin-left: 15%;
            width: 70%;  
        }
        #services p{
            font-size: 11px;
        }
        #nos-services .box-container{
            width: 90%;
            margin-left: 5%;
        }
        #nos-services .box-container .box h3{
            font-size: 12px; 
        }
        #nos-services .box-container .box {
            height: 50%;
            width: 100%;
        }
        #nos-services .box-container i{
            font-size: 13px;
        }
        #nos-services .box-container p{
            text-align:center;
           
        }
        #nos-tarifs .box-container h4{
            font-size: 15px;
        }
        #nos-tarifs .box-container{
            width: 100%;
            margin-left: 15%;
        }
        #nos-tarifs .box-container p{
            font-size: 8px;
        }
        #nos-services .text{
            font-size: 14px;
        }
        #nos-services .column{
          width: 100%;
          margin-left: 10%;
        }
      
        #contact{
            width: 100%;
            height: 100%;
           }
            #contact form{
              height: 55%;
              width: 100%;
              margin-left: 10% ;
            }
            #contact .btn-search{
                display: block;
                font-size: 13px;
                text-align: center;
                background-color: #33aaa8;
                padding-left: 20px;
                margin-left: 80px  ;
                margin-right: 60px  ;
            }
            #contact .btn-search:hover{
                transform: scale(0.9);
                color: #065763;
            }
        
            #contact .left-right p{
                font-size: 7px;
                display: flex;
            }
            #contact .left-right h4{
                font-size: 7px;
                
            }
            #contact p{
                font-size: 14px;
                display: flex;
            }
            #contact iframe{
                margin-left: 12%;
                height: 60%;
                width: 100%;
            }
            #contact.left{
                margin-bottom: 40%;
            }
        #contact iframe {
            height: 60%;
            width: 100%;
            margin-left: 12%;
        }
        #fonctionnement .box-container{
            width: 90%;
            height: 90%;
            margin-left: 13%;
        }
        #fonctionnement .box-container h3{
            font-size: 10px;
        }
        #fonctionnement h4{
            font-size: 15px;
            color: #ffffff;
            margin-top: 10%;
        }
        #fonctionnement h3{
            font-size: 15px;
            padding-right: 10%;
            color: #1fabc0;
        }
        #fonctionnement h5{
            font-size: 12px;
            color: #ffffff;
            margin: auto;
            margin-bottom: 3%;
            padding-left: 10%;
        }
        #fonctionnement  img {
            height: 13%;
            width: 20%;
        }
        #fonctionnement .box-container .box{
            height: 40%;
        }
        #location .left p{
            font-size: 12px;
        }
       
        #location .left{
            width: 80%;
            height: 100%;
            margin-left:18%;
        }
        #location .left h2{
            font-size: 11px;
            text-align: center;
            padding-left: 30%;
        }
       
        #location .container{
            width: 100%;
            margin-right: 2%;
        }
        #location .left h{
            font-size: 12px;
            text-align: start;
            padding-left: 20%;
        }
    
        #prix .btn-search{
           font-size: 6px;
        }
       
        #à-propos .box-container {
            height:100% ;
            width:100% ;
            gap: 5px;
            margin-bottom: 40px;
            margin-left: 20%;
        }
        #à-propos .box{
            height:100% ;
            width:100% ;
            display:grid;
        }
        #à-propos .box  h2{
            font-size: 8px;
         
        }
        #à-propos .box p{
            font-size: 9px;
            
        }
        #à-propos .box-container:hover{
            transform: scale(1.1);
        }
        #à-propos .box-container .box {
            width: 100%;
            height: 100%;
            font-size: 8px;
          
        }
      
        #à-propos h5{
            font-size: 5px;
        }
        #à-propos h4{
            font-size: 5px;
           ;
        }
        #à-propos iframe{
              width: 90%;
             
        }
        #à-propos h3 {
            font-size: 6px;
            margin-right:20px ;
        }
        #à-propos  i{
            font-size: 15px;
        }
        #à-propos form{
            width: 100%;
            margin-right: 27%; 
        }
        #à-propos .left-right{
            transform: scale(1.1);
            border: 2px solid #042424;
            color: transparent;
            border-radius: 20px;
            margin-left: 15%;
            width: 120%;
        }
      
        #à-propos .left-right i{
            font-size: 5px;
            margin-left: 0;
            padding-left: 0;
            margin-right: 2px;
            padding-right: 0;
        }
        #à-propos .left-right .right h4 {
            font-size: 6px;
        }
        #à-propos .left-right .right h5 {
            font-size: 8px;
        }
        #à-propos .left-right .right a{
            font-size: 5px;
            margin-right: 14%;
        }
       
        #prix .column{
            width: 100%;
        }
        #prix .column .text{
            font-size: 14px;
        }
    
        #prix .column .counter{
            font-size: 12px;
        }
    
        #galerie .container{
            width: 100%;
            margin-left: 15%;
        }
        #ajouter th{
            font-size: 7px;
        }
        #ajouter tr{
            font-size: 6px;
        }
        #ajouter td{
            font-size: 5px;
        }
        #ajouter form{
            width:120%;
        }
        #ajouter a{
            font-size: 6px;
            padding: 2px 5px;
        }
        footer{
            width: 120%;
            background-color: #333;
            padding: 30px 0;
            font-size: 12px;
            color: #fefefe;
        }
        .contenu-footer{
            width: 80%;
            height: 60%;
            margin: 0px;
            display: flex;
            justify-content: center;
            font-size: 12px;
            padding: 30px 0 px;
            text-decoration: none;
        }
       
        footer .media li{
            font-size: 10px;
            color:#333;
            padding-top: 3%;
            padding-left: 1%; 
        }
       
      
        footer p{
            font-size: 10px; 
            padding-left:10%;
        }
        footer h5{
           font-size:7px; 
           margin-left:45%;
        }
        footer h4{
            margin-top: 5px;
            line-height: 2;
            font-size: 8px;
            display: flex;
            text-align: center;
            margin-left:20%;
        }
        footer a{
            display:block ;
            font-size: 8px;
            margin-left: 25%;
        }
        footer i{
            font-size: 10x;
            margin-right: 10%;
        }
        footer  h3 {
            margin-right: 30%; 
        }
        footer span{
            font-size:12px ;
           
        }
        .text-banniere p{
            font-size: 10px;
          
        }
        .button-banniere{
            padding-top: 15px;
        }
        .button-banniere a{
            border: solid 1px rgba(0,0,0,0.2);
            display: block;
            background: rgb(191, 98, 98);
            border-radius: 9px;
            color: white;
            font-size: 8px;
        }
        header .menu.responsive li{
            margin: 10px;
            width:120px;
            font-size: 11px;
        }
      
    }