/* owl slider  */

    /* Owl Carousel Container */
    .owl-carousel {
        position: relative;
    }

    /* Navigation Buttons Positioned Over Image */
    .owl-nav {
        position: absolute;
        top: 50%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        transform: translateY(-50%);
        pointer-events: none;
        /* Ensures the buttons don't block image interactions */
    }

    .owl-nav button {
        pointer-events: all;
        /* Enables button interaction */
        background: rgba(0, 0, 0, 0.6);
        /* Dark semi-transparent background */
        color: #fff;
        border: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        /* Circular buttons */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.3s ease, transform 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }

    .owl-nav button i {
        font-size: 20px;
    }

    /* Hover Effect for Buttons */
    .owl-nav button:hover {
        background: rgba(0, 0, 0, 0.8);
        /* Darker background on hover */
        transform: scale(1.1);
        /* Slight scaling for emphasis */
    }

    .owl-nav button:focus {
        outline: none;
    }

    /* Previous Button Position */
    .owl-nav button.owl-prev {
        left: 10px;
    }

    /* Next Button Position */
    .owl-nav button.owl-next {
        right: 10px;
    }


    /* Dots Positioned at the Bottom */
    .owl-dots {
        text-align: center;
        padding-top: 15px;
    }

    .owl-dots button.owl-dot {
        width: 12px;
        height: 14px;
        border-radius: 50%;
        background: #fff;
        margin: 0 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .owl-dots button.owl-dot.active {
        background-color: #24456e;
    }

    .owl-dots button.owl-dot:focus {
        outline: none;
    }

    /* Carousel Item Styling */
    .owl-item {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .item {
        width: 100%;
    }
    .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
        /* background-color: black; */
        background: #24456e !important;
    }

    .owl-carousel .item img {
        width: 100%;  /* Ensure images stretch to fill the container */
        height: auto; /* Maintain aspect ratio */
    }
    .blu-outline{
        color: #24456e !important;
    }
    .blu-outline:hover{
        background-color: #24456e !important;
        color: #fff !important;
    }