/* General */

body {
	font-family: Arial, Helvetica, sans-serif;
}
main h2 {
	font-family: 'Time new Roman', serif;	
}

/* Header Styling */
header {
	background-color: #3db83b;
}

	.header {
		display: flex; /* Use flexbox for horizontal alignment */
		justify-content: space-between; /*  Distribute space between items  */
		align-items: center; /* Vertically align items in the center */
		padding: 50px 20px;
		background-color: #6b003e;
		border-bottom: 1px solid #ddd;
	}

	.header-title {
		font-size: 40px;
		font-weight: bold;
		color: White;
	}

	.social-links {
		display: flex;
		gap: 15px; /* Add some space between icons */
	}

	.social-links a {
		text-decoration: none; /* Remove underline from links */
		color: White;
		font-size: 30px;
	}

	.social-links a:hover {
		color: #007bff; /* Change color on hover */
	}

/* Navigation Styling */
nav ul {
  list-style-type: none;
  display: flex;
  margin: 15;
  padding: 0;
  justify-content: center;
}

nav li {

  display: inline; 
  padding: 10px;
}

nav a {
  text-decoration: none;
}
nav.horizontal ul {
	height: 40px;
	background-color: #3db83b;
}

nav a {
	text-decoration: none;
	color: black;
	display: block;
	padding: auto;
}

nav a:hover {
		color: red;
	}
	


/* Footer Styling */
footer {
	text-align: center;
	padding-top: 20px;
	text-decoration: none;
	height: 40px;
	background-color: #6b003e;
}

footer {
  color: white;
}

footer a {
  color: white;
}

/* Accueil seulement */
/* Section container100 Styling */
	.container100 {
		display: flex; /* Use flexbox for side-by-side layout */
		max-width: 1200px; /* Adjust as needed */
		margin: 20px auto; /* Center the container */
		border: 1px solid #ccc; /* Optional border */
		padding: 20px;
	}

	.left-content100 {
		flex: 1; /* Allows the left content to take up available space */
		padding-right: 20px;
	}

	.slideshow-container100 {
		flex: 1; /* Allows the slideshow to take up available space */
		max-width: 50%; /* Adjust as needed */
		position: relative; /* For positioning slideshow elements */
		margin-left: 20px; /* Space between paragraph and slideshow */
	}

	.mySlides100 {
		width: 100%; /* Ensure images fill the container */
		display: none;
	}

	/* Basic styling for images inside the slideshow */
	.mySlides100 img {
		width: 100%;
		height: auto;
		display: block; /* Remove extra space below images */
	}
	
	/* Next & previous buttons */
	.prev, .next {
		cursor: pointer;
		position: absolute;
		top: 50%;
		width: auto;
		padding: 16px;
		margin-top: -22px; /* Adjust based on your arrow size to perfectly center */
		color: white;
		font-weight: bold;
		font-size: 18px;
		transition: 0.6s ease;
		border-radius: 0 3px 3px 0;
		user-select: none;
		background-color: rgba(0,0,0,0.8); /* Added for better visibility */
	}

	/* Position the "next button" to the right */
	.next {
		right: 0;
		border-radius: 3px 0 0 3px;
	}

	/* On hover, add a black background color with a little bit see-through */
	.prev:hover, .next:hover {
		background-color: rgba(0,0,0,1);
		color: red;
	}

	/* Image styles */
	.mySlides100 img {
		width: 100%;
		height: auto;
	}

 
/* Section flex-container Styling */
	.flex-container200 {
		display: flex; /* Makes the container a flexbox container */
		justify-content: space-around; /* Distributes space evenly between items */
		align-items: stretch; /* Stretches items to fill the container's height */
		height: auto; /* Set a height for the container */
		background-color: #f0f0f0;
		padding: 20px;
	}

	.flex-item200 {
		flex: 1; /* Allows items to grow and shrink, taking equal space */
		margin: 10px;
		background-color: white;
		border: 1px solid #ccc;
		position: relative; /* Essential for absolute positioning of the paragraph */
		overflow: hidden; /* Ensure image overflow is hidden */
		display: flex; /* Make the item a flex container for image and text */
		flex-direction: column; /* Stack image and text vertically */
	}

	.flex-item200 img {
		width: 100%; /* Image fills the width of its container */
		height: auto; /* Image fills the height of its container */
		object-fit: cover; /* Crops the image to cover the container while maintaining aspect ratio */
		display: block; /* Removes any extra space below the image */
	}

	.flex-item200 .text-overlay200 {
		position: absolute;
		bottom: 10px;
		left: 0px;
		color: black;
		background-color: white;
		padding: 5px 10px;
		border-radius: 0px;
		font-size: 1.5em;
		border: 3px solid blue;
		transition: border-color 0.3s ease;
		box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
	}
	
	.text-overlay200:hover {
		border-color: green;
	}


/* Section sponsors Styling */
	.sponsors-section {
		text-align: center;
		padding: 20px;
	}

	.sponsor-grid {
		display: flex; /* Use flexbox for layout */
		flex-wrap: wrap; /* Allow items to wrap to the next line */
		justify-content: center; /* Center the sponsors horizontally */
		gap: 20px; /* Space between sponsor items */
	}

	.sponsor-item {
		border: 1px solid #ddd;
		padding: 15px;
		text-align: center;
		border-radius: 5px;
		width: 200px; /* Adjust as needed */
	}

	.sponsor-item img {
		max-width: 100%;
		height: auto;
		margin-bottom: 10px;
		max-height: 100px; /* Optional: limit logo height */
	}

	.sponsor-item h3 {
		font-size: 1.2em;
		margin: 0;
		color: #333;
	}

/* Section Overlay Styling */
	.my-custom-heading {
	  color: blue; /* Sets the text color to blue */
	  font-size: 2em; /* Sets the font size to twice the default */
	  text-align: center; /* Centers the text */
	}

	.image-container5 {
	  position: relative; /* Establishes the positioning context */
	  display: flex; /* Enables Flexbox for centering */
	  border: 2px solid black;
	  justify-content: center; /* Horizontally centers content */
	  align-items: center; /* Vertically centers content */
	  margin: 10px 400px 200px 400px; /* Top: 10px, Right: 20px, Bottom: 15px, Left: 30px */
	  padding: 20px;	
	}

	.overlay-image1 {
	  width: 40%; /* Ensures image scales down within container */
	  height: auto; /* Maintains aspect ratio when scaling */
	  position: absolute;
	  bottom: -150px;  
	  left: -230px;
	  z-index: 1; 
	}

	.overlay-image2 {
	  width: 40%;
	  height: auto;
	  position: absolute;
	  bottom: -150px; 
	  right: -230px; 
	  z-index: 1; /* Ensure this image appears on top */
	}


/* For screens up to 768px wide (tablets and mobile) */
@media screen and (max-width: 768px) {
  .header {
    flex-direction: column; /* Stack header elements vertically */
    padding: 20px;
  }

  .header-title {
    font-size: 30px;
  }

  .social-links {
    margin-top: 15px;
  }
}

/* For screens up to 768px wide */
@media screen and (max-width: 768px) {
  nav ul {
    flex-direction: column; /* Stack navigation items vertically */
    text-align: center;
    height: auto; /* Remove fixed height */
  }

  nav li {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
  }
  
  nav li:last-child {
    border-bottom: none;
  }

/* For screens up to 768px wide */
@media screen and (max-width: 768px) {
  .container100 {
    flex-direction: column; /* Stack content vertically */
    padding: 10px;
  }

  .left-content100 {
    padding-right: 0;
    margin-bottom: 20px;
  }

  .slideshow-container100 {
    max-width: 100%; /* Image fills container width */
    margin-left: 0;
  }
}

/* For screens up to 768px wide */
@media screen and (max-width: 768px) {
  .flex-container200 {
    flex-direction: column; /* Stack items vertically */
    height: auto;
  }
}

/* For screens up to 768px wide */
@media screen and (max-width: 768px) {
  .sponsor-grid {
    flex-direction: column; /* Stack sponsor items vertically */
    align-items: center; /* Center them horizontally */
  }

  .sponsor-item {
    width: 80%; /* Adjust width for better fit */
  }
}

/* Basic styling for images inside the slideshow */
.mySlides100 img {
  max-width: 100%; /* Ensure images don't exceed original size */
  height: auto;
  display: block; /* Remove extra space below images */
}

.flex-item200 img {
  max-width: 100%; /* Image fills the width of its container, but not beyond its original size */
  height: auto; /* Image fills the height of its container */
  object-fit: cover; /* Crops the image to cover the container while maintaining aspect ratio */
  display: block; /* Removes any extra space below the image */
}