/* Instagram Swiper Styles */
.instagram-swiper {
    width: 100%;
    padding-bottom: 50px; /* Space for pagination */
}

.instagram-swiper .swiper-slide {
    height: 300px; /* Adjust this value as needed */
    overflow: hidden;
}

/* Custom Navigation Buttons */
.swiper-button-next,
.swiper-button-prev {
    width: 40px;
    height: 40px;
    @apply bg-primary;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Override Swiper's default arrow styles */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 18px !important; /* Smaller arrow size */
    color: #fff; /* White arrow color */
    font-weight: bold;
}

/* Optional: Add hover effects */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    @apply bg-primary;
    transform: scale(1.05);
    transition: all 0.3s ease;
}

/* Optional: Add active/pressed state */
.swiper-button-next:active,
.swiper-button-prev:active {
    transform: scale(0.95);
}

/* Pagination Bullets */
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #000; /* Customize the bullet color */
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

@import 'swiper/css';
@import 'swiper/css/navigation';
@import 'swiper/css/pagination';