@font-face {
  font-family: 'fabrican';
  src: url('../police/fabrican.otf') format('opentype');
      
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'big';
  src: url('../police/east.otf') format('opentype');
      
  font-weight: normal;
  font-style: normal;
}
        
        /* Styles personnalisés pour correspondre à l'image */
        body {
            font-family: Arial, sans-serif;
        }
        .hero-section {
            position: relative;
            background: url('https://source.unsplash.com/1600x900/?nature,garden') no-repeat center center/cover;
            color: white;
            padding: 100px 0;
        }
        .overlay {
            background: rgba(0, 0, 0, 0.6);
            padding: 30px;
            border-radius: 10px;
        }
        .logo {
            background: #0a5724;
            padding: 10px;
            border-radius: 20px;
        }
        .gallery img {
            width: 100%;
            border-radius: 10px;
            margin-bottom: 10px;
        }
        .top-bar {
            background-color: #0a5724;
            color: white;
            padding: 10px 20px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            text-align: center;
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        .top-bar i {
            margin-right: 8px;
        } 
        .carousel-container {
            position: relative;
            width: 100%;
            height: 80vh;
            overflow: hidden;
        }
        .carousel-main {
            position: absolute;
            width: 100%;
            height: 100vh;
            z-index: 1;
        }
        .carousel-side {
            position: absolute;
            right: 5%;
            top: 50%;
            transform: translateY(-50%);
            width: 20%;
            height: 70vh;
            overflow: hidden;
            z-index: 2;
        }
        #div-stylé {
            position: absolute;
            left: 05%;
            top: 50%;
            transform: translateY(-50%);
            width: 55%;
            padding: 5px;
            overflow: hidden;
            z-index: 2;
            background-color: rgba(0, 0, 0, 0.7); /* Fond noir avec un peu de transparence */
            color: white; /* Texte en blanc */
            padding: 20px;
            border-radius: 10px; /* Coins arrondis */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Ombre douce autour du div */
          }

          #div-stylé {
            position: absolute;
            left: 05%;
            top: 50%;
            transform: translateY(-50%);
            width: 55%;
            padding: 5px;
            overflow: hidden;
            z-index: 2;
            background-color: rgba(0, 0, 0, 0.7); /* Fond noir avec un peu de transparence */
            color: white; /* Texte en blanc */
            padding: 20px;
            border-radius: 10px; /* Coins arrondis */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Ombre douce autour du div */
          }

          #div-stylés {
        
            width: 75%;
            padding: 5px;
            overflow: hidden;
            z-index: 2;
            background-color: rgba(0, 0, 0, 0.7); /* Fond noir avec un peu de transparence */
            color: white; /* Texte en blanc */
            padding: 20px;
            border-radius: 10px; /* Coins arrondis */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Ombre douce autour du div */
          }
      
          .titre-vert {
            color: #28a745; /* Vert pour le titre */
            font-weight: bold; /* Texte en gras */
          }
        .carousel-side .carousel-inner img {
            width: 100%;
            height: 480px;
            object-fit: cover;
            border-radius: 10px;
            margin-top : 20px;
           
        }
        #carbg img{
            filter: blur(3px);
            
            
        }
        .btn-en-savoir {
            background-color: #28a745; /* Fond vert */
            color: white; /* Texte blanc */
          }
      
          .btn-en-savoir:hover {
            background-color: #218838; /* Effet de survol plus sombre */
          }
      
          .btn-contacter {
            background-color: white; /* Fond blanc */
            color: #28a745; /* Texte vert */
          }
      
          .btn-contacter:hover {
            background-color: #28a745; /* Effet de survol plus clair */
            color: #f8f9fa;
          }
      
          .btn-container {
            display: flex;
            gap: 10px; /* Espacement entre les boutons */
          }

          #btn-sec{
            margin: auto;
          }
          #f-sec{
            font-family: 'fabrican', sans-serif;
            text-align : justify;

          }
          #t1{
            font-family: 'big', sans-serif;
            text-align : center;
          }
     /*Section principale */
     
     .project-title {
         text-align: center;
         margin-bottom: 20px;
     }
     .project-card {
         text-align: center;
         padding: 15px;
         border: 1px solid #ddd;
         border-radius: 8px;
         box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
     }
     .project-card img {
         width: 100%;
         height: 200px;
         object-fit: cover;
         border-radius: 5px;
     }
     .footer {
         background-color: #9b7922;
         color: white;
         padding: 40px 0;
         text-align: center;
     }
     .footer a {
         color: white;
         text-decoration: none;
     }
     .footer i {
         font-size: 24px;
         margin: 10px;
         color: white;
     }
     .footer-bottom {
         background-color: #0d3625;
         padding: 10px;
         font-size: 14px;
     }
    /* overlays */
    .project-card {
   
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s;
  }
  
  .project-card img {
      width: 100%;
      height: 200px;
      transition: transform 0.3s;
  }
  
  .project-card:hover {
      transform: scale(1.05);
  }

  .project-card:hover .cont{
   display: none;
}
  
  .project-card:hover img {
      transform: scale(1.1);
      height: 350px;
  }
  
  .project-card:hover .overlays {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(189, 158, 57, 0.7);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      opacity: 1;
      transition: opacity 0.3s;
  }
  
  .project-card:hover .overlays {
      opacity: 1;
  }

  .project-card:hover button {
    background-color: #463301;
    border: none;
}

.project-card:hover a {
  background-color: #463301;
  border: none;
}
.newsletter-container {
  margin: auto;
  background: white;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 100%;
  
}

/* Titre */
.newsletter-container h2 {
  color: #2E8B57; /* Vert forêt */
}

/* Texte */
.newsletter-container p {
  font-size: 14px;
  color: #555;
}

/* Champ d'email */
#email {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: 2px solid #2E8B57;
  border-radius: 5px;
  outline: none;
  transition: 0.3s;
}

/* Effet focus */
#email:focus {
  border-color: #228B22;
  box-shadow: 0px 0px 5px rgba(34, 139, 34, 0.5);
}

/* Bouton */
.newsletter-container button {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  background: #2E8B57;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}

/* Effet hover */
.newsletter-container button:hover {
  background: #228B22;
}

/* Message de succès caché */
.success-message {
  color: #2E8B57;
  font-weight: bold;
  margin-top: 10px;
  display: none;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px;
  background-color: #f8f9fa;
}
.hero-text {
  width: 68%;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  padding: 20px;
  border-radius: 10px;
  overflow: hidden;
}
.hero img {
  max-width: 30%;
}
.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}
.btn-secondary {
  background-color: #e9ecef;
  border-color: #ced4da;
}

.buttons-container a.active {
  background-color: green !important;
  color: white;
  border-color: green;
}

.gallery-container {
  margin-top: 30px;
  margin-top: 5px;
}

.gallery-item {
  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.gallery-item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 10px;
}

.gallery-item:hover .overlay {
  opacity: 1;
}

/* Modal */
.modal-content {
  background: #111;
  color: white;
  border-radius: 10px;
}

.modal-body img {
  width: 100%;
  border-radius: 10px;
}

.overlay p{
  font-size: larger;
  text-align: justify;
  color: :#0a5724;
}
body {
  height: 2000px; /* Juste pour la démonstration avec un long scroll */
  font-family: Arial, sans-serif;
}

#btnTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: green;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  display: none; /* Caché au début */
  transition: opacity 0.3s;
}

#btnTop:hover {
  background-color: darkgreen;
}

  .video-card {
      transition: transform 0.2s ease;
      cursor: pointer;
      height: 100%;
    }
    .video-card:hover {
      transform: scale(1.01);
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .video-thumb {
      height: 180px;
      object-fit: cover;
      width: 100%;
    }

@media screen and (max-width: 512px) {
  /* Styles spécifiques aux téléphones Samsung */
  body {
    font-size: 14px; /* Exemple d'ajustement de la taille de la police pour petits écrans */
  }
  .container {
    padding: 5px;
  }

  .top-bar {
   
    width: 100%;
    font-size: 9px; 

   
}
#carouselSide{
  display: none;
  padding: 0;
  height: 100vh;
}

#div-stylé{
  font-size: 6px;
  width: 90%;
  padding: 5px;
  font-size: 6px;
  margin-top: 0px;
  border-radius: 10px; /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Ombre douce autour du div */
  position: relative;
  margin-top: -4Opx;

}

#div-stylé a{
 margin: 5px;


}


.hero-text {
  width: 100%;
 
}
.hero img {
  display: none;
}

.mission a {
  margin: 5px;
}
 

}
/* Carousel section */