@charset "utf-8";
/* CSS Document */

/* Container for the entire slider section including the title and slider itself */
.slider-back {
    width: 100%; 
    height: 100%; 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; /* Centers content horizontally */
	}

/* Main container for the slider  */
.slider-container {
    position: relative; 
    width: 100%; 
    max-width: 800px; /* Maximum width for larger screens */
    overflow: hidden; 
    border-radius: 10px; 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); 
	}

/* Flexbox container holding slides */
.slider {
    display: flex; 
    transition: transform 0.4s ease-in-out; 
	}

/* Each individual slide - takes up full width  */

.slide {
    min-width: 100%; 
    height: auto; 
    transition: transform 0.5s ease-in-out; 
	}

/* Images fill slide area - maintaining aspect ratio */
.slide img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    border-radius: 10px; 
	}

/* Styling - previous and next nav 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 */
	}

.prev {
    left: 10px; /* Positions the button 10px from the left edge */
	}

.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); 
	}

/* Container for the dot indicators  */
.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: center; /* Centers the dots vertically */
	}

/* Individual dots */
.dot {
    height: 12px; /* Fixed height for the dots */
    width: 12px; /* Fixed width for the dots */
    margin: 0 5px; /* Spacing between the dots */
    background-color: rgba(0, 0, 0, 0.3); /* 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 */
.dot.active {
    background-color: rgba(49, 107, 83, 1); /* Solid white background for the active dot */
	}