

.carousel-item img {
    max-height: 700px;
    object-fit: cover;
}

 /* Set carousel height to half of the viewport height */
        .carousel-item {
            height: 50vh; /* Half of the viewport height */
        }

        .carousel-item img {
            object-fit: cover; /* Ensure the image covers the entire container */
            height: 100%; /* Ensure the image fills the height */
            width: 100%; /* Ensure the image fills the width */
        }

        /* Dark blur effect on the left and right of the image */
        .carousel-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* Dark overlay on the left */
            z-index: 1;
        }

        .carousel-item::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* Dark overlay on the right */
            z-index: 1;
        }

        .carousel-caption {
            position: absolute;
            top: 50%; /* Center the caption vertically */
            left: 50%; /* Center the caption horizontally */
            transform: translate(-50%, -50%); /* Center caption with transform */
            text-align: center;
            color: white;
            z-index: 2; /* Ensure the caption appears on top */
        }

        .carousel-caption h5 {
            font-size: 1.5rem; /* Adjust title size */
            font-weight: bold;
        }

        .carousel-caption p {
            font-size: 1rem; /* Adjust description size */
        }

        /* Custom Style for Navigation Buttons */
        .carousel-control-prev, .carousel-control-next {
            color: #fff;
        }

        /* Style for the dots */
        .carousel-indicators li {
            background-color: #fff;
        }

        .carousel-indicators .active {
            background-color: #007bff;
        }