/* 📱 Responsive Height & Width */
    .mySwiper {
        width: 90%;
        height: 150px;
        /* Default for mobile */
    }

    @media (min-width: 640px) {

        /* Tablet */
        .mySwiper {
            width: 80%;
            height: 200px;
        }
    }

    @media (min-width: 1024px) {

        /* Laptop/Desktop */
        .mySwiper {
            width: 70%;
            height: 300px;
        }
    }

    /* 🟢 Center images correctly */
    .swiper-slide {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* 🟦 Autoplay progress indicator */
    .autoplay-progress {
        position: absolute;
        right: 16px;
        bottom: 16px;
        z-index: 10;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .autoplay-progress svg {
        --progress: 0;
        transform: rotate(-90deg);
        width: 48px;
        height: 48px;
    }

    .autoplay-progress circle {
        fill: none;
        stroke: #3b82f6;
        stroke-width: 4;
        stroke-dasharray: 125.6;
        stroke-dashoffset: calc(125.6 * var(--progress));
        transition: stroke-dashoffset 0.25s linear;
    }

    .autoplay-progress span {
        position: absolute;
        font-size: 14px;
        font-weight: 600;
        color: #1f2937;
    }

    /* 🧭 Navigation buttons */
    .swiper-button-next,
    .swiper-button-prev {
        color: #3b82f6;
        transition: transform 0.2s ease;
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        transform: scale(1.1);
    }