.case-studies{

    padding:100px 0;

    background:#19272B;

    overflow:hidden;

}


/* Swiper */

.caseSwiper{

    padding:60px 0;

    overflow:visible;

}


.swiper-slide{

    height:auto;

    display:flex;

}


/* Card */

.case-card{

    position:relative;

    width:100%;

    background:#243135;

    border-radius:24px;

    overflow:hidden;

    transition:.45s ease;

    border:1px solid rgba(255,255,255,.08);

    height:100%;

}


/* Active Center Card */

.case-card.active{

     transform:scale(1.08);

    z-index:5;

    box-shadow:

    0 0 35px rgba(0,229,255,.25),
    0 30px 80px rgba(0,0,0,.45);

}


/* Rotating Gradient Border */

.case-card.active::before{

     content:"";

    position:absolute;

    inset:-2px;

    border-radius:26px;


    background:

    conic-gradient(
        from 0deg,
        transparent,
        #00E5FF,
        #4F8CFF,
        transparent 40%
    );


    animation:

    rotateBorder 3s linear infinite;


    z-index:0;


    /*
    Creates border only
    */

    -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}

.case-card.active::after{

    content:"";

    position:absolute;

    inset:2px;

    background:#243135;

    border-radius:22px;

    z-index:1;

}

.case-card.active .case-image,
.case-card.active .case-content{

    position:relative;

    z-index:2;

}

@keyframes rotateBorder{


    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }

}


/* Inner Glow */

.case-card.active{

    isolation:isolate;

}


.case-card.active:hover{

    transform:scale(1.1);

}


/* Image */

.case-image{

    aspect-ratio:16/10;

    overflow:hidden;

    position:relative;

    z-index:2;

}

.case-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        180deg,
        transparent 40%,
        rgba(25,39,43,.85)
    );

    opacity:.7;

    z-index:1;

}


.case-image img{

    width:100%;
    
    height:100%;
    
    object-fit:cover;
    
    transition:.8s cubic-bezier(.2,.8,.2,1);
    
    display:block;

}


.case-card:hover .case-image img{

    transform:scale(1.08);

}

.case-card:hover{

    transform:translateY(-8px);

}


.case-card.active:hover{

    transform:scale(1.1) translateY(-8px);

}


/* Content */

.case-content{

    padding:28px;

    position:relative;

    z-index:2;

}


.case-tag{

    display:inline-block;

    padding:6px 14px;

    background:#314248;

    color:#00E5FF;

    border-radius:30px;

    font-size:13px;

    margin-bottom:18px;

}



.case-content h3{

    color:#fff;

    font-size:26px;

    margin-bottom:15px;

}



.case-content p{

    color:#B8C7CC;

    line-height:1.7;

    margin-bottom:25px;

}


/* Button */

.case-btn{

    position:relative;
    
    display:inline-flex;
    
    align-items:center;
    
    gap:8px;
    
    text-decoration:none;
    
    color:#fff;
    
    padding:12px 24px;
    
    border-radius:50px;
    
    border:1px solid rgba(255,255,255,.25);
    
    overflow:hidden;
    
    transition:.4s;
    
    z-index:1;

}


.case-btn::before{

    content:"";
    
    position:absolute;
    
    left:0;
    
    top:0;
    
    width:0%;
    
    height:100%;
    
    
    background:
    
    linear-gradient(
    90deg,
    #4F8CFF,
    #00E5FF
    );


    transition:.4s;
    
    z-index:-1;

}


.case-btn:hover::before{

    width:100%;

}


.case-btn:hover{

    border-color:transparent;
    
    color:#fff;
    
    transform:translateY(-4px);

}



/* Gradient Animation */

@keyframes borderRotate{


    0%{

        background-position:0% 50%;

    }


    50%{

        background-position:100% 50%;

    }


    100%{

        background-position:0% 50%;

    }


}



/* Navigation Arrows */

.swiper-button-next,
.swiper-button-prev{


    width:45px;

    height:45px;

    border-radius:50%;

    background:#243135;

    border:1px solid rgba(255,255,255,.15);

    transition:.3s;


}



.swiper-button-next:hover,
.swiper-button-prev:hover{

    border-color:#00E5FF;

    box-shadow:

    0 0 25px rgba(0,229,255,.4);

}



.swiper-button-next::after,
.swiper-button-prev::after{

    font-size:18px;

    color:#fff;

}



/* Mobile */

@media(max-width:768px){


    .case-studies{

        padding:60px 0;

    }


    .caseSwiper{

        padding:40px 0;

    }


    .case-card.active{

        transform:scale(1.03);

    }


    .case-content{

        padding:22px;

    }


    .case-content h3{

        font-size:22px;

    }


    .swiper-button-next,
    .swiper-button-prev{

        display:none;

    }


}