/* styles.css */
/* CSS for the slider wrapper */
.slider-wrapper {
    position: relative;
    width: 100%;
    max-width: auto; /* Adjust the width as needed */
    margin: 0 auto;
    overflow: hidden;
}
/* CSS for the slider container */
.slider-container {
    position: relative;
    width: 100%;
    max-width: auto; /* Adjust the width as needed */
    margin: 0 auto;
    overflow: hidden;
    /* Add a higher z-index to the slider container to prevent overlap */
    z-index: 1;
}

/* CSS for the slider images */
.slider-image {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image covers the container */
    display: none;
}

/* CSS for the navigation arrows */
.slider-arrow {
    position: absolute;
    top: 50%; /* Vertically center the arrows */
    font-size: 30px;
    color: blue; /* Dark blue color */
    cursor: pointer;
    z-index: 2; /* Increase z-index value */
    /* Add some padding and background color to the arrows for visibility */
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.5); /* Adjust the background color as needed */
    border-radius: 50%; /* Make the arrows circular */
    transform: translateY(-50%); /* Center vertically */
}


.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Style the text content */
.slider-text {
    color: white;
    text-align: center;
    padding: 20px;
}

/* Additional CSS styles for your navigation bar can be added here */