/* =========================================
   SERVICES GRID
========================================= */

.ab-services-grid{
    display:flex;
    gap:30px;
    flex-wrap:wrap;
}

/* =========================================
   SERVICE CARD
========================================= */

.ab-service-card{
    position:relative;
    cursor:pointer;
    overflow:hidden;

    transform:translateY(40px);
}

/* active state */
.ab-service-card.show{
    opacity:1;
    transform:translateY(0);
    transition: all 0.8s cubic-bezier(.22,1,.36,1);
}

/* =========================================
   IMAGE
========================================= */

.ab-service-image{
    width:100%;
    height:403px;

    background-size:cover;
    background-position:center;

    position:relative;

    clip-path: polygon(0% 30%, 100% 0%, 100% 100%, 0% 100%);

    transition:
        clip-path 0.8s cubic-bezier(.25,.8,.25,1),
        transform 0.6s ease;
}

.ab-service-card:hover .ab-service-image{
    clip-path: polygon(0% 0%, 100% 31%, 100% 100%, 0% 100%);
}

/* =========================================
   IMAGE FADE
========================================= */

.ab-service-image::after{
    content:'';

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:60%;

    background:linear-gradient(
        to top,
        rgba(255,255,255,1),
        transparent
    );

    transition:0.6s;
}

/* =========================================
   CONTENT
========================================= */

.ab-service-content{
    text-align:center;
    padding-top:20px;
    transition:0.4s;
}

.ab-service-content h3{
    font-size:20px;
    font-weight:700;
    color:#3ba3cb;
}

.ab-service-content p{
    font-size:18px;
    color:#262626;
}

/* =========================================
   SWIPER NAVIGATION
========================================= */

.ab-services-slider-area{
    position:relative;
}

.ab-services-swiper{
    overflow:hidden;
}

.ab-services-prev,
.ab-services-next{
    position:absolute;
    top:40%;

    z-index:50;

    width:50px;
    height:50px;

    cursor:pointer;

    transform:translateY(-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    transition:0.3s ease;
}

.ab-services-prev:hover,
.ab-services-next:hover{
    opacity:0.7;
}

.ab-services-prev{
    left:-70px;
}

.ab-services-next{
    right:-70px;
}

.ab-services-prev img,
.ab-services-next img{
    width:100%;
    height:auto;
    display:block;
}

/* =========================================
   DOTS
========================================= */

.ab-services-swiper .swiper-pagination{
    position:relative;
    margin-top:40px;
}

.ab-services-swiper .swiper-pagination-bullet{
    width:10px;
    height:10px;
    background:#3ba3cb;
    opacity:0.3;
}

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

/* =========================================
   SERVICES GRID LAYOUT
========================================= */

.ab-services-layout{
    display:flex;
    flex-direction:column;
    gap:100px;
}

.ab-service-row{
    display:flex;
    justify-content:space-between;
    gap:60px;

    scroll-margin-top:120px;
}

.ab-service-row-reverse{
    flex-direction:row-reverse;
}

.ab-service-grid-image{
    width:30%;
    aspect-ratio: 16 / 12;
    overflow:hidden;
}

.ab-service-grid-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.ab-service-grid-content{
    width:70%;
}

.ab-service-grid-content h3{
    text-transform:uppercase;
    color:#16305f;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:1024px){

    .ab-service-row,
    .ab-service-row-reverse{
        flex-direction:column;
        gap:40px;
    }

    .ab-service-grid-image,
    .ab-service-grid-content{
        width:100%;
    }

}

/* =========================================
   MOBILE
========================================= */

@media(max-width:767px){

    .ab-service-image{
        height:320px;
    }

    .ab-service-content h3{
        font-size:18px;
    }

    .ab-service-content p{
        font-size:16px;
    }

    .ab-services-prev{
        left:-10px;
    }

    .ab-services-next{
        right:-10px;
    }

    .ab-services-layout{
        gap:20px;
    }

    .ab-service-grid-content h2{
        font-size:24px;
    }

    .ab-service-grid-text{
        font-size:16px;
    }

}