.carousel-container {
    position: relative;
    width: 100%; /* Make it take full width */
    max-width: 100%; /* Ensure it doesn't exceed 100% (or remove if not needed) */
    /* Remove margin to make it flush with edges */
    margin: 0; /* Changed from 20px auto */
    
    overflow: hidden; /* Important to hide invisible slides */
    
    /* Optional: Remove border-radius and box-shadow if you want sharp full-width edges */
    border-radius: 0; /* Changed from 8px */
    box-shadow: none; /* Changed from 0 4px 8px rgba(0, 0, 0, 0.1) */
}

.carousel-track {
    display: flex; /* Makes slides arrange horizontally */
    transition: transform 0.5s ease-in-out; /* Transition effect between slides */
}

.carousel-slide {
    flex: 0 0 100%; /* Each slide takes 100% of the container's width */
    position: relative;
    text-align: center;
    min-width: 100%; /* Ensure each slide spans the full width */
}

.carousel-slide img {
    width: 100%;
    height: auto; /* To maintain aspect ratio */
    display: block;
    object-fit: cover; /* Ensures the image covers the available space */
    max-height: 600px; /* Set max height for the image, you can adjust it */
}

/* Styling for text inside the slide */
.slide-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Precise vertical and horizontal centering */
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Text shadow for better readability */
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background for text (optional) */
    border-radius: 5px;
    max-width: 80%; /* To prevent text from exceeding a certain width */
}

.slide-caption h1 {
    font-size: 2.5em; /* Heading font size */
    margin-bottom: 10px;
}

.slide-caption p {
    font-size: 1.2em; /* Text font size */
    margin-bottom: 0;
}

/* Navigation buttons */
.carousel-button {
    position: absolute;
    top: 65%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Transparent background */
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5em;
    z-index: 100; /* To ensure buttons appear above slides */
    border-radius: 5px;
    opacity: 0.7; /* Slight transparency */
    transition: opacity 0.3s ease;
}

.carousel-button:hover {
    opacity: 1; /* Increase transparency on hover */
}

.carousel-button.prev {
    left: 10px;
}

.carousel-button.next {
    right: 10px;
}

/* Responsiveness (Media Queries) */
@media (max-width: 768px) {
    .slide-caption h1 {
        font-size: 1.8em;
    }
    .slide-caption p {
        font-size: 1em;
    }
    .carousel-button {
        padding: 8px 12px;
        font-size: 1.2em;
    }
}

@media (max-width: 480px) {
    .slide-caption h1 {
        font-size: 1.5em;
    }
    .slide-caption p {
        font-size: 0.9em;
    }
    .slide-caption {
        padding: 10px;
    }
    .carousel-button {
        padding: 5px 8px;
        font-size: 1em;
    }
}

.our-values-list ul {
    display: flex;
    justify-content: space-between; /* To distribute items with equal space between them */
    padding: 0; /* Remove default list padding */
    margin: 0; /* Remove default list margins */
    list-style: none; /* Remove default list bullets or numbers */
    flex-wrap: wrap; /* Allows items to wrap to the next line if there's not enough space */
    margin-top: 25px; /* Add top margin to the list */
}

.our-values-list ul li { /* Assuming the children of <ul> are <li> elements */
    flex: 1; /* Makes each item take the same available width */
    margin: 0 5px; /* 5 pixels on each side, which results in 10 pixels between items */
    /* You can add any other styles for the items here, such as: */
    /* background-color: #f0f0f0; */
    /* padding: 20px; */
    text-align: center; /* Center align text within the list item */
}

/* To ensure no margin on the outer edges of the container */
.our-values-list ul li:first-child {
    margin-left: 0;
}

.our-values-list ul li:last-child {
    margin-right: 0;
}

@media (max-width: 768px) {
    .our-values-list ul li { 
        margin: 5px;
        flex-basis: 40%;
    }
}