/* Background image remains unchanged */
.carousel-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    height: 60vh;
    background-size: cover;
    background-position: center;
    opacity: 0.6;
}

/* Add white border around each slider item */
.slider-item {
    border: 4px solid white; /* White border around each slider */
    position: relative;
    transition: border-color 0.3s ease; /* Transition for hover effect */
    

}

/* Optional: Change border to orange on hover */
.slider-item:hover {
    border-color: #f4691d; /* Orange hover effect */
}

/* Make the image fill the entire slider */
.carousel-slide-image {
    width: 100%;
    height: 431px; /* Ensure height of all images */
    object-fit: cover; /* Makes the image cover the entire container */
    position: relative;

}

/* Positioning of the title overlay */
.slider-title-overlay {
    position: absolute;
    bottom: 0; /* Title at the bottom of the image */
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: white;
    padding: 10px;
    text-align: center;
}

/* First slide larger */
.first-slider img {
    width: 100%;
    height: 431px;
    object-fit: cover;
}

/* Normal slides smaller */
.normal-slider img {
    width: 100%;
    height: 431px;
    object-fit: cover;
}

/* Link styling inside titles */
.slider-link {
    text-decoration: none;
    color: inherit;
}

/* Carousel arrows inside the slider container */
.carousel-control-prev, .carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5%; /* Adjust the width of the arrow area */
}

/* Place the previous arrow on the left edge inside */
.carousel-control-prev {
    left: -80px; /* Adjusted to place outside slider */
}

/* Place the next arrow on the right edge inside */
.carousel-control-next {
    right: -80px; /* Adjusted to place outside slider */
}

/* Optional: Increase the size of the arrow icons */
.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 50px;
    height: 50px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    /* Smaller height for mobile */
    .carousel-slide-image,
    .first-slider img,
    .normal-slider img {
        height: 250px; /* Reduce height on mobile */
    }

    /* Show one slide per view on mobile */
    .carousel-inner {
        display: block; /* Ensure only one slide is shown */
    }

    .carousel-item {
        width: 100%; /* Each item takes full width on mobile */
    }

    /* Ensure one item per slide on mobile */
    .carousel-item-wrapper {
        width: 100%; /* Full width for mobile */
        padding: 0; /* No padding between items on mobile */
    }

    /* Adjust arrows for smaller devices */
    .carousel-control-prev, .carousel-control-next {
        width: 30px;
        height: 30px;
    }

    .carousel-control-prev {
        left: 10px; /* Adjust for mobile */
    }

    .carousel-control-next {
        right: 10px; /* Adjust for mobile */
    }

    /* Smaller title and padding */
    .slider-title-overlay {
        font-size: 14px;
        padding: 5px;
    }
}