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

.cs-hero{

    padding:170px 7% 90px;

    background:#fff;

}

.cs-container{

    max-width:1450px;

    margin:auto;

}

.cs-breadcrumb{

    display:flex;

    gap:10px;

    font-size:14px;

    color:#777;

    margin-bottom:30px;

}

.cs-breadcrumb a{

    color:#777;

    text-decoration:none;

}

.cs-tag{

    display:block;

    color:#777;

    font-size:15px;

    margin-bottom:18px;

}

.cs-hero h1{

    font-size:58px;

    line-height:1.15;

    font-weight:700;

    color:#111;

    max-width:900px;

    margin-bottom:60px;

}

.cs-top-grid{

    display:grid;

    grid-template-columns:330px 1fr;

    gap:28px;

    align-items:center;

}

/*====================*/

.cs-stats{

    display:flex;

    flex-direction:column;

}

.cs-stat{

    border:1px solid #E8E8E8;

    padding:32px;

}

.cs-stat h2{

    font-size:44px;

    margin-bottom:10px;

}

.cs-stat p{

    color:#666;

    font-size:16px;

    line-height:1.7;

}

/*====================*/

.cs-main-image img{

    width:100%;

    display:block;

}

/*====================*/

.cs-showcase{

    padding:50px 7%;

}

.cs-showcase img{

    width:100%;

    display:block;

}

/*====================*/

.cs-gallery{

    padding:0 7% 90px;

}

.cs-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.cs-grid img{

    width:100%;

    display:block;

}/*=========================================
        OVERVIEW
=========================================*/

.cs-overview{

    padding:100px 7%;

}

.cs-overview-grid{

    display:grid;

    grid-template-columns:220px 1fr;

    gap:70px;

}

.cs-overview-title span{

    font-size:13px;

    letter-spacing:2px;

    color:#777;

}

.cs-overview-content p{

    font-size:20px;

    color:#444;

    line-height:2;

    margin-bottom:30px;

}

/*====================*/

.cs-info-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;

    margin-top:50px;

}

.cs-info span{

    display:block;

    color:#999;

    font-size:15px;

    margin-bottom:12px;

}

.cs-info h4{

    font-size:21px;

    color:#111;

}

/*====================*/

.cs-laptop{

    padding:0 7% 80px;

}

.cs-laptop img{

    width:100%;

    display:block;

}

/*====================*/

.cs-bottom-gallery{

    padding:0 7% 90px;

}

.cs-gallery-two{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.cs-gallery-two img{

    width:100%;

    display:block;

}

/*=========================================
        PROBLEM / SOLUTION
=========================================*/

.cs-problem,
.cs-solution{

    padding:120px 7%;

}

.cs-section-grid{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:80px;

}

.cs-side-title span{

    display:block;

    color:#888;

    font-size:14px;

    letter-spacing:2px;

    margin-bottom:18px;

}

.cs-side-title h2{

    font-size:48px;

    line-height:1.2;

    color:#111;

}

.cs-section-content>p{

    font-size:20px;

    color:#555;

    line-height:1.9;

    margin-bottom:50px;

}

.cs-feature-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

.cs-feature{

    border-top:2px solid #111;

    padding-top:20px;

}

.cs-feature h4{

    font-size:24px;

    margin-bottom:15px;

    color:#111;

}

.cs-feature p{

    font-size:17px;

    line-height:1.8;

    color:#666;

}