* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  
  scroll-behavior: smooth;
}

.navbar{
    background-color: rgb(255, 171, 171);
    display: flex;
    flex-wrap: wrap;
    height: 60px;
    align-items: center;
    justify-content: space-around;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    padding: 1.5rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.navbar p {
  font-weight: 600;
}
body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  background-color: rgb(255, 194, 194);
  
}
.services-container h3{
  color: rgb(251, 121, 121);
}
.navbar a{
  text-decoration: none;
  color: black;
  font-weight: 600;

}

.navbar ul {
  display: flex;
  gap: 50px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* .burger {
  display: none;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
} */

#header{
  width: 100%;
  height: fit-content;
  min-height: 100vh;
  
}
.header-container{
  display: flex;
  justify-content: center;
  align-items: center;      
  height: 100vh;       
  text-align: center;       
  padding: 20px;

}
.header-card{
  display: flex;
  background-color: rgba(255, 255, 255, 0.305);
  border-radius: 20px;         
  width: 95%;
  height: 80vh;                
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  padding: 2rem;
}
.header-texte{
  font-size: large;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 50px;
}

.header-texte h2 {
  color: white;
}
.header-texte p {
  font-size: x-large;
  text-align: center;
  width: 80%;
}
.titre{
  background-color: rgba(255, 255, 255, 0.338);
  padding: 1rem;
  border-radius: 50px;
}

/* .akun{
  border-radius: 20px;  
  
}

.titi{
  max-height: 35vh;
  object-fit: cover;
  border-radius: 20px;
} */
.btn-contact{
  background-color: white;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  padding-left: 2em;
  padding-right: 2em;
  border-radius: 10px;

}
.btn-contact:hover{
    background-color: rgba(255, 255, 255, 0.445);
    transition-duration: 0.3s;
}

.btn-services{

}

.btn-services:hover{
    color: rgba(255, 255, 255, 0.445);
    transition-duration: 0.3s;
}

.btn-moi{

}

.btn-moi:hover{
    color: rgba(255, 255, 255, 0.445);
    transition-duration: 0.3s;
}

.btn-presentation{
  background-color: white;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  padding-left: 2em;
  padding-right: 2em;
  border-radius: 10px;
  text-decoration: none;
  color: black;
  font-weight: 600;
}

.btn-presentation:hover{
    background-color: rgba(255, 255, 255, 0.445);
    transition-duration: 0.3s;
}

#services{
  background-color: rgb(255, 171, 171);
  width: 100%;
  height: fit-content;
  min-height: 100vh;
  padding: 5em;
}
.services-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  box-sizing: border-box;
}

.services-container h1 {
  margin-top: 5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.services-card{
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: rgba(255, 255, 255, 0.362);
  width: 50%;
  max-width: 25rem;
  padding: 1rem;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.services-card-all{
  display: flex;
  justify-content: center;
  gap: 50px;
}




.services-image{
  border-radius: 20px;
  height: 300px;
  width: 100%;
  object-fit: cover;
}

.pablo{
  
  max-width: 100%;
  width: 25%;
  height: auto;
  border-radius: 20px;
  
}

#apropos{
  width: 100%;
  height: fit-content;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding-bottom: 5em;
}

.apropos-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}

.apropos-card{
  display: flex;
  background-color: rgb(255, 171, 171);
  padding: 1rem;
  width: 85%;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.apropos-container h1{
  margin-top: 5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.apropos-container p{
  font-size: large;
  text-align: center;
  width: 75%;
}

.apropos-texte{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  gap: 25px;
}
.apropos-texte h2{
  font-weight: 600;
}

#tarifs{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 171, 171);
}
.tarifs-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
   width: 100%;
  height: fit-content;
  min-height: 100vh;
  padding-bottom: 5em;
  gap: 7rem;
}
.tarifs-container .titre{
  margin-top: 5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.tarifs-card{
  display: flex;
  justify-content: center;
  /* flex-wrap: wrap; */
  background-color: rgba(255, 255, 255, 0.362);
  min-width: none;
  padding: 1rem;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  
}
.tarifs-all{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
}
.nac{
  display: flex;
  text-align: center;
  gap: 5px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.chien{
  display: flex;
  gap: 5px;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.chat{
  display: flex;
  gap: 5px;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tarif-argent{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

.argent{
  display: flex;
  text-align: center;
  gap: 5px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.visite{
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5px;
}
.tarifs-texte{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;

}
.tarifs-texte h1{
  color: rgb(251, 121, 121);
}
.tarifs-texte p{
  font-weight: 600;
  font-size: larger;
}

#galerie{
  max-width: 100%;
  height: fit-content;
  min-height: 100vh;
  padding-bottom: 5em;
}
.galerie-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7rem;
}

.galerie-container .titre{
  margin-top: 5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.image-card{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-left: 2em;
  padding-right: 2em;
  gap: 60px;
}
.galerie-image{
  width: 30%;
  height: 50vh;
  object-fit: cover;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  
}





#section-map{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: fit-content;
  min-height: 100vh;
  padding-bottom: 5em;
  padding-top: 5em;
  gap: 30px;
  background-color: rgb(255, 171, 171);
}
.map-texte{
  font-size: large;
  text-align: center;
  
}
.map{
  width: 80%;
  height: 80vh;
  border-radius: 20px;
}
.map-card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  background-color: rgba(255, 255, 255, 0.362);
  border-radius: 20px;
  padding: 3em;
  width: 60%;
  height: fit-content;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}











  #footer{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3em;
    background-color: rgb(255, 171, 171);
    
  }

  #contact{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding-bottom: 5em;
  
}
#contact p{
  font-size: 1.5rem;
  text-align: center;
}

.contact-container .titre{
  margin-top: 5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.contact-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7rem;
}
.contact-p{
  width: 70%;
}
.contact-texte h1{
  text-align: center;
}
.contact-card{
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
  justify-content: center;
}
.contact-texte{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.362);
  max-width: 95%;
  padding: 1rem;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.contact-texte h1{
  color: rgb(251, 121, 121);
}


















@media (max-width: 1024px)  {
  .navbar ul {
    gap: 15px;
  }
  .navbar a{
    
    font-size: 0.9rem;
  }

  .titi{
    height: 50%;
  }

  .services-card{
    width: 90%;
  }


  /* #apropos{ 
    height: fit-content;
   padding-bottom: 3em;
  } */

  .apropos-card{
    width: 90%;
    padding: 0;
    padding-top: 1em;
    padding-bottom: 1em;
    gap: 20px;
    flex-direction: column; 
    align-items: center;
  }
  .apropos-texte h2{
    font-size: 1em;
  }
  #apropos p{
      font-size: 0.85em;
    }


  
  .pablo{
    width: 65%;
    object-fit: cover;
  }

 
 
  .services-card-all{
    flex-wrap: wrap;
    
  }
  .tarifs-all{
    flex-wrap: wrap;
  }
  .tarifs-card{
    width: 95%;
  }
  #tarifs{
    min-height: auto;
    padding-bottom: 3rem;
  }
  
  .galerie-image{
    width: 500px;
    height: 500px;
  }
  .map-card{
    width: 90%;
  }
  .map{
    width: 90%;
    height: 55vh;
  }
  .map-texte{
    font-size: x-large;
  }
  .contact-p{
  width: 90%;
}
  
}

@media (max-width: 767px) {
  .navbar{
    display: none;
  }

  .nav-links.active {
    display: flex;
  }
  .services-card{
    width: 350px;
  }

  /* .btn-burger {
    display: block;
  } */

  .galerie-image{
    width: 250px;
    height: 250px;
  }
  #contact p{
  font-size: 1.1rem;
  text-align: center;
}
h1{
  font-size: x-large;
}
.contact-texte{
  width: 95%;
}
.contact-p{
  width: 90%;
}
#contact{
  height: fit-content;
}
#tarifs{
  min-height: fit-content;
}
.map-card{
  width: 95%;  
  padding: 2em;
}
.map{
  width: 100%;
  height: 40vh;
}
.map-texte{
  font-size: larger;
}

  
  }