.container2{bottom: 0vh;
    position: fixed;
    right:0vh;
    left:0vh;
}    /* ----------------------Tableau---------------*/
/* Style pour les tableaux */
table {
  width: 80vw; /* Largeur relative à la taille de l'écran */
  max-width: 100%; /* Ne pas dépasser la largeur de l'écran */
  border-collapse: collapse;
  margin: 2vw 0; /* Espacement vertical basé sur la largeur de l'écran */
  box-shadow: 0 1.5vw 4vw rgba(0, 0, 0, 0.1); /* Slightly softer shadow */
  background-color: #fff;
  border-radius: 1vw; /* Coins arrondis en fonction de la taille de l'écran */
  overflow: hidden;
}

/* Style pour les en-têtes du tableau */
table th {
  background-color: #003d00; /* Dark green from website */
  color: #fff;
  padding: 1.5vh 2vw; /* Espacement basé sur la taille de l'écran */
  text-align: left;
  font-size: 1.2vw; /* Taille de texte relative à la largeur de l'écran */
  text-transform: uppercase;
  letter-spacing: 0.08vw; /* Reduced letter spacing for readability */
  font-weight: 600; /* Slightly bolder for clarity */
}

/* Style pour les lignes du tableau */
table td {
  padding: 1.5vh 2vw;
  border-bottom: 0.2vh solid #ddd;
  font-size: 1.1vw;
  color: #333; /* Darker text for better contrast */
}

/* Style pour les liens */
table a {
  color: #003d00; /* Dark green for links */
  text-decoration: none;
  font-weight: bold;
}

table a:hover {
  text-decoration: underline;
}

/* Style alterné pour les lignes */
table tr:nth-child(even) {
  background-color: #f9f9f9; /* Lighter shade for alternating rows */
}

/* Ajout de bordures arrondies pour la première et dernière ligne */
table tr:first-child th:first-child {
  border-top-left-radius: 1vw;
}

table tr:first-child th:last-child {
  border-top-right-radius: 1vw;
}

/* Style sur hover des lignes */
table tr:hover {
  background-color: #e6ffe6; /* Light green hover effect */
}



/* Style pour la ligne de séparation */
hr {
  border: 0.1vw solid #003d00; /* Dark green for dividers */
  margin: 6vh 0;
}

/* Style pour les emails */
table td a[href^="mailto:"] {
  color: #e74c3c; /* Bright red for mailto links */
}

/* Media Queries pour les petits écrans */
@media only screen and (max-width: 768px) {
  table {
    width: 95vw; /* Largeur maximale de 95% pour petits écrans */
  }
  table th, table td {
    font-size: 3.5vw; /* Texte plus grand sur les petits écrans */
    padding: 1.5vh 1.5vw; /* Réduction des espaces pour les petits écrans */
  }
}

@media only screen and (max-width: 480px) {
  table {
    width: 100vw; /* Utilise toute la largeur de l'écran sur mobile */
  }
  table th, table td {
    font-size: 4.5vw;
    padding: 1.2vh 1.2vw;
  }
  div {
    margin-bottom: 4vh;
  }
}
/*-------------------Caroussel---------------*/

.carousel-container {
  position: relative;
  display:flex;
  justify-content:center;
  width: 80%;
  height:auto;
	 margin: 0 auto;
}

.carousel {
  display: flex;
  overflow: hidden;
}

.carousel img {
  width: 100%;
  height: auto;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 2vh;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

/* ----------------------------Caroussel 2*-------------------------------------------*/
.sep2{
display:flex;
 align-items: center;
}
.article{
flex:1;
width:50%;
margin-right:2vh;
margin-left:1vh;
height:85vh}

.barriere{width:50%;
margin-right:1vh;}

.carousel-container2 {
  position: relative;
  display:flex;
  justify-content:center;
  width: 100%;
  height:auto;
	 margin: 0 auto;
	 flex:5;
}

.carousel2 {
  display: flex;
  overflow: hidden;
  width:100%;
}

.carousel2 img {
  width: 100%;
  height: auto;
}
.prev2, .next2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 2vh;
}

.prev2 {
  left: 0;
}

.next2 {
  right: 0;
}
.carousel4 {
  display: flex;
  overflow: hidden;
  width:100%;
}

.carousel4 img {
  width: 100%;
  height: auto;
}
.prev4, .next4 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 2vh;
}

.prev4 {
  left: 0;
}

.next4 {
  right: 0;
}

/*--------------------Container 3------------*/

.container3{display:flex;align-items:center ;justify-content:center;}
.article2{width:48%; height:135vh; flex:1; margin-left:1vh; margin-right:1vh}
.article3{width:48%; height:135vh; flex:1; margin-left:1vh; margin-right:1vh}

.carousel-container3 {
    width: 80%;
    max-width: 80vh;
    height: 60vh;
    overflow: hidden;
    position: flex;
    border: 1vh solid #ccc;
    border-radius: 1vh;
    background-color: #fff;
    justify-content: center;
        align-items: center;
        margin-left: auto;
    margin-right: auto;
}

.carousel3 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.slides3 {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.slide3 {
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.slide3 img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.prev3, .next3 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
}

.prev3 {
    left: 1vh;
}

.next3 {
    right: 1vh;
}

.prev3:hover, .next3:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/*--------------------video------------------*/
.container {
    display: flex;
    height: 100vh; /* Full viewport height */
}

.pdf, .videos2{
    flex: 1; /* Each section takes up 50% of the container's width */

    overflow: hidden; /* Ensure content fits within the section */
}

.pdf {
    margin-right: 1vh; /* Space between the PDF and the videos */    margin-left: 2vh; /* Space between the PDF and the videos */ height:100vh;
}
.videos2{    height: 100%; /* Full height */}
.videos {
    padding: 10px;
}
.videos p{text-align: left;
display:flex;
width:100%;}
.videos h2 {
width:100%;
display:flex;
    margin-bottom: 2vh;
}

.videos {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4 videos per row */
    gap: 10px; /* Space between videos */
}

.video {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.video h3 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 1rem;
}

.video video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure video covers the area while maintaining aspect ratio */
}
.video p {
    text-align: center;
    margin-top: 10px;
    font-size: 0.9rem;
    color: #555;
}