@import url('https://fonts.googleapis.com/css2?family=Anybody&display=swap');

* {
  zoom: 0.9;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}
/* Styles généraux */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  opacity: 0;
  animation: fadeIn 2s ease-in-out forwards;
}

@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}


.navbar {
  display: flex;
  justify-content: space-between;
  margin: 0;
}


.logo-container {
  position: absolute;
  display: flex;
  align-items: center;
}

.logo {
  width: 100%; /* Utilisation de pourcentage pour la largeur */
  height: auto;
  max-width: 15vw; /* Taille maximale du logo */
  padding: 1%;
}

svg {
  display: inline-block;
  position: absolute;
  left: 0;
  width: 100%;
  transform: scale(1, 0.75); /* Réduit la hauteur à 50% (ajustez le deuxième argument selon vos besoins) */
  top: 0; /* Positionne le SVG au sommet de son conteneur parent */
  transform-origin: top center; /* Définit le point d'origine de la transformation en haut du SVG */
}




.icon {
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-container a {
  margin: 30px; /* Espace entre les icônes */
  color: #FFFFFF; /* Couleur des icônes */
  font-size: 50px; /* Taille des icônes (ajustez la valeur selon vos besoins) */
}
/* Alignez les icônes à droite sur les écrans plus petits */
@media (max-width: 768px) {
  .icon {
    display: none;
  }}



/* Media query pour la taille du logo en mode responsive */
@media (max-width: 768px) {
  .logo {
    max-width: 60px; /* Ajustez la taille du logo pour les écrans plus petits */
  }
}

@media (max-width: 980px) {
  .cardresa {
    width: 120px;
  }
}



.main-container {
  display: grid;
  place-items: center;
  height: auto; /* Ajustez la hauteur en fonction de vos besoins */
}
.title {
  display: flex;
  color: #000;
  text-align: center;
  font-family: Anybody;
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 70px;
  /* 157.143% */
  letter-spacing: -1px;
}

.title2 {
  margin-top: 80px;
  font-size: 45px;
  font-style: normal;
  font-weight: 900;
  line-height: 110px;
  /* 244.444% */
  letter-spacing: -0.9px;
}

p {
  font-family: 'Anybody', cursive;
  font-size: 3.5rem;
}

.ligne-t {
  width: 600px;
  margin: -40px auto;
  border-radius: 15px;
  border: 8px solid #FDAD00;

}

.watermark-container {
  position: relative;
  margin-top: 15vh;
  height: 0;
  padding-top: 18%; /* Ajustez ce pourcentage pour la hauteur souhaitée */
  background-image: url(../img/cardestimation.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Cache le contenu dépassant de la div */
}

.watermark-container::before {
  content: "";
  background-image: url(../img/hover2.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* Définir l'opacité initiale à 0 */
  transition: opacity 0.5s ease-in-out; /* Ajouter une transition à l'opacité */
}

.watermark-container:hover::before {
  opacity: 1; /* Au survol, augmenter l'opacité à 1 */
}






.box{
align-items: center;
  width: 100vw;
  z-index: 1;
}



h2 {
  text-align: center;
}


.row {
  justify-content: center;
  max-width: 1648px;
  height: auto;
}

@media (max-width: 768px) {
  .h2 {
    width: 60%;
    left: 10%;
  }
}

@media (max-width: 480px) {
  .row {
    width: 65%;
    left: 2.5%;
  }
}



.cardresa-contenu {
  width: 100%;
  height: 100px;
  border-radius: 10px;
  padding: 10px;
}

/* Media query pour les écrans plus petits */
@media (max-width: 768px) {
  .cardresa {
    width: 80%;
    left: 10%;
  }
}

@media (max-width: 480px) {
  .cardresa {
    width: 95%;
    left: 2.5%;
  }
}


.card-container {
  margin-top: 5%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.card {
  padding: 10px;
  margin-right: 10px;
  cursor: pointer;
  height: 220px; /* Ajustez la hauteur souhaitée (par exemple, 220px) */
  justify-content: center;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.card1 {
  width: 700px; 
  height: 220px; /* Ajustez la hauteur ici aussi */
}

.card h2 {
  margin-left: 8%;
  font-size: 35px;
  color: #FDAD00;
}
.custom-card {
  background-color: #000000 !important;
  border-radius: 0 20px 20px 0px !important;
}

.description {
  margin-left: 8%;
  font-size: 25px;
  color: #fff;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}





.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Distribue les éléments sur toute la largeur */
  align-items: center; /* Centre les éléments verticalement */
  gap: 20px;
  margin-top: 5%;
  padding: 0;
}

.image-container .row {
  display: flex;
  justify-content: space-between;
  width: 100%; /* Utilisez la largeur totale */
}

.image-container .col {
  flex: 0 0 calc(20% - 20px); /* Ajustez ce pourcentage pour la largeur souhaitée */
  padding: 0 10px;
  box-sizing: border-box;
  text-align: center; /* Centre le contenu dans la colonne */
}


.image-container img {
  width: auto; /* Laissez la largeur auto pour conserver la taille d'origine */
  height: auto; /* Laissez la hauteur auto pour conserver les proportions */
  max-width: 110%; /* Ajustez la largeur maximale souhaitée (augmentée à 110%) */
  max-height: 100%; /* Ajustez la hauteur maximale souhaitée */
}



/* Media queries pour les écrans plus petits */
@media (max-width: 992px) {
  .image-container .col {
      flex: 0 0 calc(33.33% - 20px); /* 3 colonnes avec un espacement de 20px */
  }
}

@media (max-width: 768px) {
  .image-container .col {
      flex: 0 0 calc(50% - 20px); /* 2 colonnes avec un espacement de 20px */
  }
}


.pwidth {
  width: 55%;
}

.btncontact {
  border-radius: 8px;
  background-color: #FDAD00;
  color: white !important; /* Force la couleur du texte en blanc */
  padding: 15px 30px;
  border: none;
  cursor: pointer;
  font-size: 22px;
}

.footer {
  background-color: #000000;
  color: white;
  padding: 30px 0;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 20px;
}

.footer-col {
  flex: 1;
  padding: 0 20px;
}

.footer-logo {
  width: 210px;
  height: auto;
}

.footer-text {
  margin-top: 10px;
  font-size: 16px;
}

.footer-title {
  color: #FDAD00;
  font-size: 35px;
  font-family: 'Anybody', cursive;
}

.footer-form {
  margin-top: 10px;
  display: flex;
}

.footer-input {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 5px 0 0 5px;
}

.footer-button {
  background-color: #FDAD00;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

.footer-copyright {
  font-size: 1.5rem;
  text-align: center; /* Centrer le texte horizontalement */
}


.pbody{
  margin: 25px 0px 25px;
  font-size: 1.5rem;
}

.reviews-container {
  display: flex;
  justify-content: flex-start; /* Collé à gauche */
  align-items: flex-start;
  margin-top: 50px;
}

.rectangle-container {
  position: relative;
  margin-right: 20px; /* Espace entre le rectangle et le rectangle2 */
}

.rectangle {
  width: 554px;
  height: 149px;
  position: relative;
  left: 0;
  top: -10%;
  background: linear-gradient(90deg, #000000 0%, rgba(227, 249, 231, 0) 100%);
  border-radius: 15px;
  transform: rotate(-180deg);
}

.photo {
  width: 87px;
  height: 87px;
  position: relative;
  background: url(/img/logo.png);
}

.previews {
  font-size: 22px;
  line-height: 24px;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 120px;
}

.fleche {
  width: 12px;
  height: 24px;
  position: absolute;
  border: 4px solid #FDAD00;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
}

.rectangle2 {
  width: 80vw;
  height: 33vh;
  background: #000;
  border-radius: 15px;
  position: absolute; /* Utilisation de la position absolute */
  left: 100%; /* Collé à la fin du rectangle */
  top: 50%; /* Position verticale au centre */
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .reviews-container {
      flex-direction: column;
      align-items: center;
  }

  .rectangle-container {
      transform: none; /* Réinitialise la transformation */
      margin-right: 0; /* Réinitialise la marge */
  }

  .rectangle {
      width: 100%;
      max-width: 80vw;
      height: auto;
      margin-bottom: 20px;
      transform: rotate(0deg); /* Réinitialise la rotation */
  }

  .photo {
      width: 60px;
      height: 60px;
  }

  .previews {
      left: 80px;
      font-size: 18px;
  }

  .fleche {
      right: -20px;
  }

  .rectangle2 {
      width: 100%;
      max-width: 80vw;
      height: 30vh;
      position: relative; /* Réinitialise la propriété position */
      left: 0; /* Réinitialise la position */
      top: 0; /* Réinitialise la position */
      transform: none; /* Réinitialise la transformation */
  }
}