@tailwind base;
@tailwind components;
@tailwind utilities;

/* Swiper Slider */
/* SLIDER */


.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}



.swiper-button-next::after,
.swiper-button-prev::after {
    color: black;
    border-radius: 50%;
    font-size: 22px !important;
}

@media only screen and (max-width: 600px) {

    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }
}

/*other pagination*/
@media only screen and (min-width: 992px) {
    .swiper-pagination-bullets {
        padding-bottom: 10px;
    }
}

.swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 11px;
    display: inline-block;
    background: #fff;

    margin: 0 5px;
    border-radius: 20px;
    transition: opacity 0.5s, background-color 0.5s, width 0.5s;
    transition-delay: 0.5s, 0.5s, 0s;
}

.swiper-pagination-bullet-active {
    width: 40px !important;
    height: 11px;
    opacity: 1;
    background: #4da5ec;
    width: 100px;
    transition-delay: 0s;

    @media screen and (max-width: 576px) {
        width: 70px;
    }
}