/*==================================================
                CASE STUDIES HERO
==================================================*/

.cs-hero{

    position:relative;

    overflow:hidden;

    padding:140px 0 70px;

    background:linear-gradient(
        135deg,
        #F8FCFF 0%,
        #EEF8FF 55%,
        #FFFFFF 100%
    );

}

.cs-hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-260px;

    left:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,180,216,.10),
        transparent 72%
    );

}

.cs-hero::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-220px;

    bottom:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(15,76,129,.08),
        transparent 72%
    );

}

.cs-hero .container{

    position:relative;

    z-index:2;

}

.cs-hero .row{

    min-height:680px;

    align-items:center;

}

/*==================================================
                BREADCRUMB
==================================================*/

.cs-breadcrumb{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:24px;

    font-size:16px;

    color:#64748B;

}

.cs-breadcrumb a{

    color:#00B4D8;

    text-decoration:none;

    font-weight:600;

}

.cs-breadcrumb span{

    color:#94A3B8;

}

/*==================================================
                TAG
==================================================*/

.cs-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:13px 28px;

    border-radius:50px;

    background:#EAF8FF;

    border:1px solid rgba(0,180,216,.20);

    margin-bottom:32px;

    color:#0F4C81;

    font-size:16px;

    font-weight:600;

}

.cs-tag i{

    color:#00B4D8;

    font-size:18px;

}

/*==================================================
                TITLE
==================================================*/

.cs-title{

    margin:0;

    font-size:68px;

    font-weight:800;

    line-height:1.08;

    color:#1F2937;

    letter-spacing:-1px;

}

.cs-title span{

    display:block;

    margin-top:8px;

    color:#00B4D8;

}

/*==================================================
                DESCRIPTION
==================================================*/

.cs-description{

    margin:34px 0 0;

    max-width:570px;

    font-size:18px;

    line-height:1.9;

    color:#64748B;

}

/*==================================================
                HERO BUTTONS
==================================================*/

.cs-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    margin:42px 0 55px;

}

.cs-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:220px;

    height:58px;

    padding:0 34px;

    border-radius:50px;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:.35s ease;

}

.cs-btn-primary{

    background:linear-gradient(90deg,#0F4C81,#00B4D8);

    color:#fff;

    border:none;

    box-shadow:0 18px 40px rgba(15,76,129,.18);

}

.cs-btn-primary:hover{

    color:#fff;

    transform:translateY(-4px);

    box-shadow:0 25px 45px rgba(15,76,129,.25);

}

.cs-btn-outline{

    background:#fff;

    color:#0F4C81;

    border:2px solid #0F4C81;

}

.cs-btn-outline:hover{

    background:#0F4C81;

    color:#fff;

    transform:translateY(-4px);

}

/*==================================================
                HERO STATS
==================================================*/

.cs-stats{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:35px;

    margin-top:15px;

    max-width:560px;

}

.cs-stat{

    flex:1;

}

.cs-counter{

    display:block;

    margin:0;

    font-size:52px;

    font-weight:800;

    line-height:1;

    color:#0F4C81;

}

.cs-stat p{

    margin:10px 0 0;

    font-size:16px;

    line-height:1.7;

    color:#64748B;

}

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

.cs-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.cs-image img{

    width:100%;

    max-width:600px;

    display:block;

    filter:drop-shadow(0 35px 60px rgba(15,76,129,.16));

    animation:csHeroFloat 5s ease-in-out infinite;

    transition:.35s ease;

}

.cs-image:hover img{

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

}

/*==================================================
                DECORATION
==================================================*/

.cs-image::before{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    top:60px;

    right:35px;

    border:2px dashed rgba(0,180,216,.18);

    border-radius:50%;

    animation:csRotate 18s linear infinite;

}

.cs-image::after{

    content:"";

    position:absolute;

    width:16px;

    height:16px;

    left:40px;

    bottom:70px;

    border-radius:50%;

    background:#22C55E;

    box-shadow:0 0 0 12px rgba(34,197,94,.12);

}

/*==================================================
                HERO ANIMATIONS
==================================================*/

@keyframes csHeroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-16px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes csRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
                HOVER EFFECTS
==================================================*/

.cs-tag{

    transition:.35s ease;

}

.cs-tag:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(15,76,129,.12);

}

.cs-stat{

    transition:.35s ease;

}

.cs-stat:hover{

    transform:translateY(-6px);

}

.cs-stat:hover .cs-counter{

    color:#00B4D8;

}

.cs-btn{

    position:relative;

    overflow:hidden;

    z-index:1;

}

.cs-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );

    transition:1s;

    z-index:-1;

}

.cs-btn:hover::before{

    left:150%;

}

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

.cs-image{

    transition:.4s ease;

}

.cs-image:hover{

    transform:translateY(-8px);

}

/*==================================================
                TITLE EFFECT
==================================================*/

.cs-title span{

    position:relative;

}

.cs-title span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:95px;

    height:4px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #0F4C81,
        #00B4D8
    );

}

/*==================================================
                SMOOTH TRANSITIONS
==================================================*/

.cs-hero a,
.cs-hero img,
.cs-hero h1,
.cs-hero p,
.cs-tag,
.cs-stat{

    transition:.35s ease;

}

/*==================================================
                GPU FIX
==================================================*/

.cs-hero,
.cs-hero *,
.cs-image img{

    backface-visibility:hidden;

    transform:translateZ(0);

}

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

.cs-image img{

    user-select:none;

    -webkit-user-drag:none;

}

/*==================================================
                OVERFLOW FIX
==================================================*/

body{

    overflow-x:hidden;

}

/*==================================================
        FEATURED CASE STUDIES
==================================================*/

.cs-featured{

    position:relative;

    padding:90px 0;

    background:#F8FAFC;

    overflow:hidden;

}

.cs-featured::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(0,180,216,.06);

    top:-180px;

    right:-150px;

}

.cs-featured::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(15,76,129,.05);

    bottom:-150px;

    left:-120px;

}

.cs-featured .container{

    position:relative;

    z-index:2;

}

/*==================================================
        SECTION HEADING
==================================================*/

.cs-section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 24px;

    border-radius:50px;

    background:rgba(0,180,216,.10);

    color:#00B4D8;

    font-size:15px;

    font-weight:600;

    margin-bottom:18px;

}

.cs-section-title{

    font-size:48px;

    font-weight:800;

    line-height:1.2;

    color:#0F4C81;

    margin-bottom:20px;

}

.cs-section-description{

    max-width:760px;

    margin:auto;

    font-size:18px;

    line-height:1.8;

    color:#64748B;

}

/*==================================================
                CASE STUDY CARD
==================================================*/

.cs-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    height:100%;

    display:flex;

    flex-direction:column;

    border:1px solid rgba(15,76,129,.08);

    transition:.35s ease;

    box-shadow:0 15px 45px rgba(15,76,129,.06);

}

.cs-card:hover{

     transform:translateY(-10px);

    box-shadow:0 35px 70px rgba(15,76,129,.18);
}

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

.cs-card-image{

    position:relative;

    overflow:hidden;

    padding:18px;

    background:#F5FBFF;

}

.cs-card-image img{

    width:100%;

    height:220px;

    object-fit:contain;

    display:block;

    transition:.6s ease;

}

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

    transform:scale(1.04);

}

/*==================================================
                CATEGORY BADGE
==================================================*/

.cs-card-category{

    position:absolute;

    top:20px;

    left:20px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:50px;

    background:#0F4C81;

    color:#fff;

    font-size:14px;

    font-weight:600;

    letter-spacing:.3px;

    z-index:2;

}

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

.cs-card-content{

    padding:34px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.cs-card-content h3{

    font-size:24px;

    font-weight:700;

    line-height:1.4;

    color:#0F4C81;

    margin-bottom:18px;

}

.cs-card-content p{

    font-size:16px;

    line-height:1.75;

    color:#64748B;

    margin-bottom:24px;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

/*==================================================
                RESULTS LIST
==================================================*/

.cs-results{

    list-style:none;

    padding:0;

    margin:0 0 28px;

}

.cs-results li{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:15px;

    color:#475569;

    margin-bottom:12px;

    font-weight:500;

}

.cs-results li::before{

    content:"✓";

    width:24px;

    height:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#22C55E;

    color:#fff;

    font-size:13px;

    font-weight:700;

    flex-shrink:0;

}

/*==================================================
                READ MORE BUTTON
==================================================*/

.cs-read-more{

    display:inline-flex;

    align-items:center;

    gap:10px;

    letter-spacing:.3px;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    margin-top:auto;

    color:#0F4C81;

    transition:.35s ease;

}

.cs-read-more i{

    transition:transform .35s ease;

}

.cs-card:hover .cs-read-more{

    color:#00B4D8;

}

.cs-card:hover .cs-read-more i{

    transform:translateX(8px);

}

/*==================================================
                CARD EFFECTS
==================================================*/

.cs-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#0F4C81,#00B4D8);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s ease;

}

.cs-card:hover::before{

    transform:scaleX(1);

}

.cs-card:hover .cs-card-category{

    background:#00B4D8;

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:0 10px 25px rgba(15,76,129,.18);

    transition:.35s ease;

}

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

.cs-card-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(15,76,129,.22),
        rgba(15,76,129,0)
    );

    opacity:0;

    transition:.35s ease;

}

.cs-card:hover .cs-card-image::after{

    opacity:1;

}

/*==================================================
                GPU FIX
==================================================*/

.cs-card,
.cs-card *,
.cs-card img{

    backface-visibility:hidden;

    transform:translateZ(0);

}

/*==================================================
                SMOOTH TRANSITIONS
==================================================*/

.cs-card,
.cs-card img,
.cs-card h3,
.cs-card p,
.cs-card-category,
.cs-read-more{

    transition:.35s ease;

}