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



/*
@-webkit-keyframes zoom {
    from {
    	-webkit-transform: scale(1,1);
    }
    to {
    	-webkit-transform: scale(1.5,1.5);
    }
}

/* Standard syntax */
/*
@keyframes zoom {
   from {
        transform: scale(1,1);
   }
   to {
        transform: scale(1.5,1.5);
   }
}
*/

img {
    -webkit-animation: zoom 50s; /* Chrome, Safari, Opera */
    animation: zoom 50s;
}

/*------------------------*/
.container {
  float:left;
  background:#09e;
  color: white;
  aspect-ratio: 1 / 1;
  width:49%;
  border:1px solid white;
  border-radius:20px;
  margin-left:0.5%;
  margin-right:0.5%;
  margin-top:0.5%;
  margin-bottom:0.5%;
}
/* 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 */
	background: #fff;
}

/* Styling for the title above the slider */
.slider-title {
	font-size: clamp(12px, 1.5vw, 22px); /* Large font size for the title */
	color:#FFFFC2;
	margin-bottom: 20px; /* Space below the title */
	font-weight: 600; /* Semi-bold font weight */
}

/* Main container for the slider - this holds the images and navigation buttons */
.slider-container {
	
	position: relative; /* Allows for absolute positioning of navigation buttons */
	width: 100%; /* Sets the slider width to 60% of the parent container */
	height:100%;
	object-fit:cover;
	/*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 */
}

/* 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 */

}

/* 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: 100%; /* Fixed height for each slide */

	transition: transform 1.0s ease-in-out; /* Smooth transition when slides are changed */
}

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

.slide img:hover {
	 transform: scale(1.3); /* Adjust scale value for zoom level */
}

/* Common styling for both previous and next navigation buttons */
.prev, .next {
	position: absolute; /* Absolute positioning within the slider container */
	top: 40%; /* Centers the button vertically */
	transform: translateY(-40%); /* Offsets the button position by half its height */
	background-color: rgba(0, 0, 0, 0.1); /* 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 */
}

/* Positioning the next button to the right */
.next {
	right: 10px; /* Positions the button 10px from the right edge */
}

/* 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: 10px; /* Space above the dots */
	display: flex; /* Enables flexbox layout for horizontal alignment */
	justify-content: center; /* Centers the dots horizontally */
	align-items: top; /* Centers the dots vertically */
	width:100%;
	overflow:scroll;
	/*border:1px solid white;*/
	border-radius:20px;
	padding-top:5px;
}

/* Common styling for each individual dot */
.dot {
	height: 2.5%; /* Fixed height for the dots */
	width: 3.0%;; /* Fixed width for the dots */
	color:white;
	margin: 0px 1.5px; /* Spacing between the dots */
	/* background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
	background-color: #3555ff;
	border-radius: 20%; /* Makes the dots round */
	display: inline-block; /* Ensures dots are inline */
	cursor: pointer; /* Changes cursor to pointer on hover */
	transition: background-color 1s ease; /* Smooth transition for background color on hover */
	font-size:clamp(6px, 1.2vw, 12px);
;}

/* 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 */
	background-color: #00ff00;
	color:darkblue;
}


/*------------------------*/
.container1 {
  float:right;
  background:#09e;
  color: white;
  aspect-ratio: 1 / 1;
  width:49%;
  border:1px solid white;
  border-radius:20px;
  margin-left:0.5%;
  margin-right:0.5%;
  margin-top:0.5%;
  margin-bottom:0.5%;
}
/* 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 */
.background1 {
	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 */
	background: #fff;
}

/* Styling for the title above the slider */
.slider-title1{
	font-size: clamp(10px, 1.5vw, 18px); /* Large font size for the title */
	color:#FFFFC2;
	margin-bottom: 20px; /* Space below the title */
	font-weight: 600; /* Semi-bold font weight */
}

/* Main container for the slider - this holds the images and navigation buttons */
.slider-container1 {
	
	position: relative; /* Allows for absolute positioning of navigation buttons */
	width: 100%; /* Sets the slider width to 60% of the parent container */
	height:100%;
	object-fit:cover;
	/*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 */
}

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

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

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

.slide1 img:hover {
	 transform: scale(1.3); /* Adjust scale value for zoom level */
}

/* Common styling for both previous and next navigation buttons */
.prev1, .next1 {
	position: absolute; /* Absolute positioning within the slider container */
	top: 40%; /* Centers the button vertically */
	transform: translateY(-40%); /* Offsets the button position by half its height */
	background-color: rgba(0, 0, 0, 0.1); /* 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 */
.prev1 {
	left: 10px; /* Positions the button 10px from the left edge */
}

/* Positioning the next button to the right */
.next1 {
	right: 10px; /* Positions the button 10px from the right edge */
}

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

/* Container for the dot indicators below the slider */
.dots-container1 {
	margin-top: 10px; /* Space above the dots */
	display: flex; /* Enables flexbox layout for horizontal alignment */
	justify-content: center; /* Centers the dots horizontally */
	align-items: top; /* Centers the dots vertically */
	width:100%;
	overflow:scroll;
	/*border:1px solid white;*/
	border-radius:20px;
	padding-top:5px;
}

/* Common styling for each individual dot */
.dot1 {
	height: 2.5%; /* Fixed height for the dots */
	width: 3.0%; /* Fixed width for the dots */
	color:white;
	margin: 0px 1.5px; /* Spacing between the dots */
	# background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
	background-color: #3555ff;
	border-radius: 20%; /* 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 */
	font-size:clamp(6px, 1.2vw, 12px);
}

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



/*------------------------*/
.container2 {
  float:right;
  background:#09e;
  color: white;
  aspect-ratio: 1 / 1;
  width:100%;
  height:75%;
  border:1px solid white;
  border-radius:20px;
  margin-left:0.5%;
  margin-right:0.5%;
  margin-top:0.5%;
  margin-bottom:0.5%;
}
/* 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 */
.background2 {
	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 */
	background: #fff;
}

/* Styling for the title above the slider */
.slider-title2 {
	width: 100%;
	font-size: clamp(10px, 1.5vw, 18px); /* Large font size for the title */
	color:#FFFFC2;
	margin-bottom: 20px; /* Space below the title */
	font-weight: 600; /* Semi-bold font weight */
}

/* Main container for the slider - this holds the images and navigation buttons */
.slider-container2 {
	
	position: relative; /* Allows for absolute positioning of navigation buttons */
	width: 100%; /* Sets the slider width to 60% of the parent container */
	height:85%;
	object-fit:cover;
	/*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 */
}

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

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

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

.slide2 img:hover {
	 transform: scale(1.2); /* Adjust scale value for zoom level */
}

/* Common styling for both previous and next navigation buttons */
.prev2, .next2 {
	position: absolute; /* Absolute positioning within the slider container */
	top: 40%; /* Centers the button vertically */
	transform: translateY(-40%); /* Offsets the button position by half its height */
	background-color: rgba(0, 0, 0, 0.1); /* 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 */
.prev2 {
	left: 10px; /* Positions the button 10px from the left edge */
}

/* Positioning the next button to the right */
.next2 {
	right: 10px; /* Positions the button 10px from the right edge */
}

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

.dots-container2 {
	margin-top: 10px; /* Space above the dots */
	display: contents; /* Enables flexbox layout for horizontal alignment */
	justify-content: center; /* Centers the dots horizontally */
	align-items: top; /* Centers the dots vertically */
	width:100%;
	/*overflow:scroll;
	/*border:1px solid white;*/
	border-radius:20px;
	padding-top:5px;
	height:auto;
}

/* Common styling for each individual dot */
.dot2 {
	height: auto; /* Fixed height for the dots */
	width: 2.5%; /* Fixed width for the dots */
	color:white;
	margin: 0px 1px; /* Spacing between the dots */
	# background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
	background-color: #3555ff;
	border-radius: 20%; /* 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 */
	font-size:clamp(6px, 1.2vw, 12px);
	padding:1px;
}

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