.elementor-326 .elementor-element.elementor-element-533ffef{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-e10c35c *//* ==================================
        CASE STUDIES HERO SECTION
=================================== */

.case-hero{

    padding:90px 0;

    background:#f8fbff;

}

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

}

.hero-content{

    flex:1;

}

.hero-badge{

    display:inline-block;

    background:#eef2ff;

    color:#4f46e5;

    padding:8px 18px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.hero-content h1{

    font-size:52px;

    color:#111827;

    line-height:1.2;

    margin-bottom:20px;

}

.hero-content p{

    font-size:18px;

    color:#6b7280;

    line-height:1.8;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.btn-primary{

    background:#4f46e5;

    color:#fff;

    padding:15px 35px;

    text-decoration:none;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.btn-primary:hover{

    background:#3730a3;

}

.btn-secondary{

    border:2px solid #4f46e5;

    color:#4f46e5;

    padding:15px 35px;

    text-decoration:none;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.btn-secondary:hover{

    background:#4f46e5;

    color:#fff;

}

.hero-image{

    flex:1;

    text-align:center;

}

.hero-image img{

    width:100%;

    max-width:520px;

}/* End custom CSS */