/* Custom Swiper Navigation Styles for Homepage Services */

/* Custom Navigation Buttons */
.homepageServicesSwiper .swiper-button-next,
.homepageServicesSwiper .swiper-button-prev {
    color: #FDE047;
    background: rgba(253, 224, 71, 0.15);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(253, 224, 71, 0.3);
}

@media (min-width: 768px) {
    .homepageServicesSwiper .swiper-button-next,
    .homepageServicesSwiper .swiper-button-prev {
        width: 50px;
        height: 50px;
    }
}

.homepageServicesSwiper .swiper-button-next:after,
.homepageServicesSwiper .swiper-button-prev:after {
    font-size: 18px;
    font-weight: bold;
}

@media (min-width: 768px) {
    .homepageServicesSwiper .swiper-button-next:after,
    .homepageServicesSwiper .swiper-button-prev:after {
        font-size: 22px;
    }
}

/* Navigation Hover Effect */
.homepageServicesSwiper .swiper-button-next:hover,
.homepageServicesSwiper .swiper-button-prev:hover {
    background: rgba(253, 224, 71, 0.25);
    border-color: rgba(253, 224, 71, 0.6);
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(253, 224, 71, 0.4);
}

/* Active/Pressed Effect */
.homepageServicesSwiper .swiper-button-next:active,
.homepageServicesSwiper .swiper-button-prev:active {
    transform: scale(0.95);
}

/* Disabled State */
.homepageServicesSwiper .swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.homepageServicesSwiper .swiper-button-disabled:hover {
    background: rgba(253, 224, 71, 0.15);
    transform: scale(1);
    box-shadow: none;
}

/* Mobile Touch Optimizations */
@media (max-width: 767px) {
    .homepageServicesSwiper .swiper-button-next,
    .homepageServicesSwiper .swiper-button-prev {
        width: 36px;
        height: 36px;
    }

    .homepageServicesSwiper .swiper-button-next:after,
    .homepageServicesSwiper .swiper-button-prev:after {
        font-size: 16px;
    }

    /* Hide navigation on very small screens, rely on swipe */
    @media (max-width: 480px) {
        .homepageServicesSwiper .swiper-button-next,
        .homepageServicesSwiper .swiper-button-prev {
            display: none;
        }
    }
}