/* Custom styles for the card to ensure responsiveness and aesthetics */
    .card-custom {
        width: 100%; /* Ensure card takes full width of swiper-slide */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Soft shadow */
        border-radius: 1rem; /* More rounded corners */
        overflow: hidden; /* Ensures image corners are rounded */
        background-color: #ffffff; /* White card background */
        transition: transform 0.3s ease-in-out; /* Smooth hover effect */
        border: none; /* Remove default Bootstrap card border */
    }

    .card-custom:hover {
        transform: translateY(-5px); /* Slight lift on hover */
    }

    .card-img-top-custom {
        width: 100%;
        height: 200px; /* Fixed height for consistency */
        object-fit: cover; /* Cover the area, crop if necessary */
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }

    .btn-primary-custom {
        background-color: var(--primary-blue); /* Bootstrap primary blue */
        border-color: var(--primary-blue);
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 600;
        color: #ffffff;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .btn-primary-custom:hover {
        background-color: var(--primary-blue-light); /* Darker blue on hover */
        border-color: var(--primary-blue-light);
    }

    .badge-custom {
        background-color: var(--charcoal-light); /* Bootstrap danger red */
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 0.5rem; /* Slightly rounded for consistency */
        font-size: 0.75rem;
        font-weight: 600;
    }

    .list-icon {
        color: var(--primary-blue); /* Bootstrap primary blue for icons */
        margin-right: 0.5rem;
    }

    /* Swiper container styling */
    .swiper-container {
        width: 85%;
        padding: 0 40px 50px 40px; /* Added horizontal padding for arrows and bottom for pagination */
        box-sizing: border-box; /* Include padding in the width calculation */
    }

    /* Swiper slide styling to center the card */
    .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Swiper navigation buttons */
    .swiper-button-next,
    .swiper-button-prev {
        color: var(--primary-blue) !important; /* Bootstrap primary blue */
        --swiper-navigation-size: 30px; /* Adjust size */
        top: 40%; /* Adjust vertical position */
    }

    .swiper-button-prev {
        left: 0; /* Align to the very left of the padded container */
    }

    .swiper-button-next {
        right: 0; /* Align to the very right of the padded container */
    }

    .swiper-pagination-bullet-active {
        background: var(--primary-blue) !important; /* Active pagination dot color */
    }