@use '../../../../src/scss/utilities.scss';
.counterCarousel{
    &_title{
        color: #004976;
        text-align: center;
    }
    &_container{
        position: relative;
        .swiper-button-prev{
            left: 0px;
            @media (max-width: 991.98px) {
                display: none;
            }

        }
        .swiper-button-next{
            right: 0px;
            @media (max-width: 991.98px) {
                display: none;
            }
        }
        .swiper-pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            bottom: -40px;
            display: none;
            @media (max-width: 991.98px) {
                display: flex;
            }
            .swiper-pagination-bullet {
              color:#004976;
              background-color: transparent;
              border: 1px solid #004976;
              height: 20px;
              width: 20px;
              font-size: 1rem;
              opacity: 1;
              display: flex;
              justify-content: center;
              align-items: center;
              &-active {
                border: 1px solid #991e66;
                background-color: #991e66;
                color: #fff;
              }
            }
        }
    }
    &_slide{
        max-width: 95%;
        &card{
            background: var(--img);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            min-height: 400px;
            width: 100%;
            aspect-ratio: 1/1;
            @supports not (aspect-ratio: 1 / 1) {
                height: auto;
            } 
            display: flex;
            justify-content: center;
            align-items: center;
            &--counter{
                @extend %VFSans-font;
                width: 300px;
                height: 300px;
                background-image: linear-gradient(to top, rgb(0 0 0 / 46%), rgba(0,0,0,0.1)) ,linear-gradient(to bottom, rgba(0, 146, 209, 0.9), rgba(0, 146, 209, 0.5));
                background-blend-mode: multiply;
                box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
                border: 20px solid rgba(255, 255, 255, 0.3);
                -webkit-background-clip: padding-box;
                background-clip: padding-box;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                color: var(--a-blanco);
                text-align: center;
                filter: contrast(1.25);
                .counters  , .counters-before{
                    color: var(--a-blanco);
                    font-size: 2rem;
                    font-weight: 800;
                    vertical-align: middle;
                }
                .additionalText{
                    width: 60%;
                    color: var(--a-blanco);
                    font-size: 1.1rem;
                    font-weight: 600;
                }
            }
        }
    }
}