.img {
	min-width: 480px;
	max-width: 600px;
	height: auto;
	display: inline-block;
	border: 1px solid black;
	padding: 10px;
	text-align: center;
	font-size: 24px;
}

img {
	width: 100%;
}

/* Global reset for margins, padding, and box-sizing */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* General body styling - sets up the page's background, font, and center alignment*/
/* Container for the entire slider section including the title and slider itself */
.background {
	width: 100%; /* Sets the width to fill the available space */
	/*height: 100%; /* Sets the height to fill the available space */
	position: relative; /* Allows for absolute positioning of child elements */
	display: flex; /* Enables flexbox layout */
	flex-direction: column; /* Aligns items in a column (vertical stack) */
	justify-content: center; /* Centers content vertically */
	align-items: center; /* Centers content horizontally */
}

.title {
	text-align: center;
	font-size: clamp(24px, 2vw, 4rem);
}

/* Styling for the title above the slider */
.slider-title {
	/*font-size: 4rem; /* Large font size for the title */
	margin-bottom: 20px; /* Space below the title */
	font-weight: 600; /* Semi-bold font weight */
	font-size: 2vw;
	color: white;
}

/* Main container for the slider - this holds the images and navigation buttons */
.slider-container {
	position: relative; /* Allows for absolute positioning of navigation buttons */
	width: 95%; /* Sets the slider width to 60% of the parent container */
	/*max-width: 800px; /* Maximum width for larger screens */
	overflow: hidden; /* Hides the overflow content (only one image is visible at a time) */
	border-radius: 10px; /* Rounds the corners of the slider */
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for depth */
	height: 80vh;
}

/* Flexbox container that holds all the slides */
.slider {
	display: flex; /* Enables flexbox layout to line up slides horizontally */
	transition: transform 0.4s ease-in-out; /* Smooth transition when sliding between images */
	height: 100%;
}

/* Each individual slide - takes up full width of the container */
.slide {
	min-width: 100%; /* Each slide takes up 100% of the slider container's width */
	/*height: 450px; /* Fixed height for each slide */
	height: auto;
	transition: transform 0.5s ease-in-out; /* Smooth transition when slides are changed */
	text-align: center;
}

/* Ensures that images fill the slide area while maintaining aspect ratio */
.slide img {
	width: 100%; /* Image width matches the slide width */
	/*height: 100%; /* Image height matches the slide height */
	object-fit: cover; /* Images are scaled to cover the entire slide, cropping if necessary */
	border-radius: 10px; /* Rounds the corners of the images to match the slider */
	max-width: 80vw;
	height: 90%;
	width: auto;		
}

.slide p {
	display: block;
	color: white;
	font-size: 3vh;
	height:fit-content;
}

/* Common styling for both previous and next navigation buttons */
.prev, .next {
	position: absolute; /* Absolute positioning within the slider container */
	top: 50%; /* Centers the button vertically */
	transform: translateY(-50%); /* Offsets the button position by half its height */
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
	color: white; /* White color for the arrow icons */
	border: none; /* Removes default button borders */
	width: 40px; /* Fixed width for the buttons */
	height: 40px; /* Fixed height for the buttons */
	cursor: pointer; /* Changes the cursor to pointer on hover */
	z-index: 10; /* Ensures buttons appear above the slider content */
	border-radius: 50%; /* Makes the buttons round */
	transition: background-color 0.3s ease; /* Smooth transition for background color on hover */
	display: flex; /* Enables flexbox for centering the arrow inside the button */
	justify-content: center; /* Centers arrow horizontally */
	align-items: center; /* Centers arrow vertically */
	padding: 0; /* Removes any default padding */
}

/* Positioning the previous button to the left */
.prev {
	left: 10px; /* Positions the button 10px from the left edge */
	font-size: 2vw;
}

/* Positioning the next button to the right */
.next {
	right: 10px; /* Positions the button 10px from the right edge */
	font-size: 2vw;
}

/* Hover effect for navigation buttons */
.prev:hover, .next:hover {
	background-color: rgba(0, 0, 0, 0.8); /* Darkens the button background on hover */
}

/* Container for the dot indicators below the slider */
.dots-container {
	margin-top: 20px; /* Space above the dots */
	display: flex; /* Enables flexbox layout for horizontal alignment */
	justify-content: center; /* Centers the dots horizontally */
	align-items: center; /* Centers the dots vertically */
}

/* Common styling for each individual dot */
.dot {
	height: 15px; /* Fixed height for the dots */
	width: 15px; /* Fixed width for the dots */
	margin: 0 5px; /* Spacing between the dots */
	background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
	border-radius: 50%; /* Makes the dots round */
	display: inline-block; /* Ensures dots are inline */
	cursor: pointer; /* Changes cursor to pointer on hover */
	transition: background-color 0.3s ease; /* Smooth transition for background color on hover */
}

/* Styling for the active dot - indicates the current slide */
.dot.active {
	background-color: rgba(255, 255, 255, 1); /* Solid white background for the active dot */
}

.sliderOverlay {
	display: none;
}

.sliderOverlay.visible {
	display: block;
	position: fixed;
	inset: 0;
	width: 100%;
	background-color: black;
}

.closebtn {
	position: absolute;
	top: 1vw;
	right: 1vw;
	width: 2vw;
	height: 2vw;
	font-size: 2vw;
}