@font-face {
    font-family: "Guminert";
    src: url("/fonts/Century Gothic.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

.case-study-hero{

    padding:170px 3% 80px;

    background:#fff;

}

.case-container{

    max-width:1450px;

    margin:auto;

}

.case-breadcrumb{

    display:flex;

    gap:10px;

    font-size:14px;

    color:#777;

    margin-bottom:20px;

}

.case-breadcrumb a{

    text-decoration:none;

    color:#777;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

.case-category{

    display:inline-block;

    color:#01526d;

    font-size:14px;

    letter-spacing:2px;

    margin-bottom:18px;

}

.case-study-hero h1{

    font-size:58px;

    line-height:1.15;

    margin-bottom:60px;
    color: #01526d;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

.case-hero-grid{

    display:grid;

    grid-template-columns:330px 1fr;

    gap:25px;

}

.case-stats{

    display:flex;

    flex-direction:column;

}

.case-stat-card{

    border:1px solid #e8e8e8;

    padding:22px;

}

.case-stat-card h2{

    font-size:28px;

    margin-bottom:12px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

.case-stat-card p{

    font-size:16px;

    color:#666;

    line-height:1.8;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

.case-hero-image img{

    width:100%;

    display:block;

}


/*=========================================
        SHOWCASE
=========================================*/

.ts-showcase{

    padding:30px 7%;

}

.ts-container{

    max-width:1450px;

    margin:auto;

}

.ts-showcase-image{

    overflow:hidden;

    border-radius:18px;

}

.ts-showcase-image img{

    width:100%;

    display:block;

}

/*=========================================
        GALLERY
=========================================*/

.ts-gallery{

    padding:0 7% 90px;

}

.ts-gallery-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.ts-gallery-item{

    overflow:hidden;

    border-radius:18px;

}

.ts-gallery-item img{

    width:100%;

    display:block;

    transition:.45s;

}

.ts-gallery-item:hover img{

    transform:scale(1.05);

}

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

.ts-overview{

    padding:90px 7%;

}

.ts-overview-grid{

    display:grid;

    grid-template-columns:220px 1fr;

    gap:80px;

}

.ts-overview-title span{

    font-size:16px;

    letter-spacing:2px;

    color: #01526d;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

.ts-overview-content p{

    font-size:20px;

    line-height:2;

    color:#555;

    margin-bottom:28px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

.ts-info-grid{

    display:grid;

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

    gap:35px;

    margin-top:55px;

}

.ts-info span{

    display:block;

    color:#888;

    font-size:15px;

    margin-bottom:10px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

.ts-info h4{

    font-size:21px;

    color:#111;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

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

.ts-problem,
.ts-solution{

    padding:50px 7%;

}

.ts-section-grid{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:90px;

    align-items:start;

}

.ts-left span{

    display:block;

    font-size:16px;

    color: #01526d;

    letter-spacing:2px;

    margin-bottom:20px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

.ts-left h2{

    font-size:42px;

    line-height:1.15;

    color:#111;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

.ts-right>p{

    font-size:20px;

    line-height:2;

    color:#555;

    margin-bottom:50px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

.ts-feature-grid{

    display:grid;

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

    gap:35px;

}

.ts-feature{

    padding-top:22px;

    border-top:2px solid #111;

}

.ts-feature h4{

    font-size:24px;

    margin-bottom:15px;

    color:#111;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

.ts-feature p{

    font-size:17px;

    line-height:1.8;

    color:#666;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

/*=========================================
        RESPONSIVE
=========================================*/

/* Large Desktop */
@media screen and (max-width:1440px){

    .case-study-hero{
        padding:160px 4% 70px;
    }

    .case-study-hero h1{
        font-size:52px;
    }

    .ts-overview-content p,
    .ts-right>p{
        font-size:19px;
    }

}

/* Laptop */
@media screen and (max-width:1152px){

    .case-study-hero{
        padding:150px 4% 70px;
    }

    .case-study-hero h1{
        font-size:48px;
        margin-bottom:50px;
    }

    .case-hero-grid{
        grid-template-columns:280px 1fr;
        gap:20px;
    }

    .ts-overview-grid{
        grid-template-columns:200px 1fr;
        gap:60px;
    }

    .ts-section-grid{
        grid-template-columns:260px 1fr;
        gap:60px;
    }

    .ts-feature-grid{
        gap:25px;
    }

}

/* Tablets */
@media (max-width:992px){

    .case-study-hero{
        padding:140px 20px 60px;
    }

    .case-study-hero h1{
        font-size:42px;
        margin-bottom:40px;
    }

    .case-hero-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .case-stats{
        flex-direction:row;
        gap:15px;
    }

    .case-stat-card{
        flex:1;
    }

    .ts-showcase,
    .ts-gallery,
    .ts-overview,
    .ts-problem,
    .ts-solution{
        padding-left:20px;
        padding-right:20px;
    }

    .ts-gallery-grid{
        grid-template-columns:1fr;
    }

    .ts-overview-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .ts-info-grid{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

    .ts-section-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .ts-left h2{
        font-size:36px;
    }

    .ts-right>p{
        font-size:18px;
        line-height:1.8;
    }

    .ts-feature-grid{
        grid-template-columns:1fr;
    }

}

/* Large Phones */
@media (max-width:768px){

    .case-study-hero{
        padding:120px 18px 50px;
    }

    .case-breadcrumb{
        flex-wrap:wrap;
        font-size:13px;
    }

    .case-category{
        font-size:13px;
    }

    .case-study-hero h1{
        font-size:34px;
        line-height:1.25;
        margin-bottom:30px;
    }

    .case-stats{
        flex-direction:column;
    }

    .case-stat-card{
        padding:20px;
    }

    .case-stat-card h2{
        font-size:24px;
    }

    .case-stat-card p{
        font-size:15px;
    }

    .ts-showcase,
    .ts-gallery,
    .ts-overview,
    .ts-problem,
    .ts-solution{
        padding-left:18px;
        padding-right:18px;
    }

    .ts-overview-title span,
    .ts-left span{
        font-size:14px;
    }

    .ts-overview-content p,
    .ts-right>p{
        font-size:17px;
        line-height:1.8;
    }

    .ts-left h2{
        font-size:30px;
    }

    .ts-info-grid{
        grid-template-columns:1fr;
    }

    .ts-feature h4{
        font-size:22px;
    }

    .ts-feature p{
        font-size:15px;
    }

}

/* Medium Phones */
@media (max-width:576px){

    .case-study-hero{
        padding:110px 15px 45px;
    }

    .case-study-hero h1{
        font-size:30px;
    }

    .case-stat-card{
        padding:18px;
    }

    .case-stat-card h2{
        font-size:22px;
    }

    .case-stat-card p{
        font-size:14px;
    }

    .ts-showcase,
    .ts-gallery,
    .ts-overview,
    .ts-problem,
    .ts-solution{
        padding-left:15px;
        padding-right:15px;
    }

    .ts-gallery-grid{
        gap:15px;
    }

    .ts-gallery-item,
    .ts-showcase-image{
        border-radius:14px;
    }

    .ts-overview-content p,
    .ts-right>p{
        font-size:16px;
    }

    .ts-left h2{
        font-size:27px;
    }

    .ts-feature{
        padding-top:18px;
    }

    .ts-feature h4{
        font-size:20px;
    }

}

/* Small Phones */
@media (max-width:480px){

    .case-study-hero{
        padding:100px 12px 40px;
    }

    .case-study-hero h1{
        font-size:26px;
    }

    .case-breadcrumb{
        gap:6px;
        font-size:12px;
    }

    .case-category{
        font-size:12px;
    }

    .case-stat-card{
        padding:16px;
    }

    .case-stat-card h2{
        font-size:20px;
    }

    .case-stat-card p{
        font-size:13px;
        line-height:1.6;
    }

    .ts-showcase,
    .ts-gallery,
    .ts-overview,
    .ts-problem,
    .ts-solution{
        padding-left:12px;
        padding-right:12px;
    }

    .ts-overview-title span,
    .ts-left span{
        font-size:13px;
    }

    .ts-left h2{
        font-size:24px;
    }

    .ts-overview-content p,
    .ts-right>p{
        font-size:15px;
        line-height:1.7;
    }

    .ts-info h4{
        font-size:18px;
    }

    .ts-feature h4{
        font-size:18px;
    }

    .ts-feature p{
        font-size:14px;
        line-height:1.7;
    }

}

/* Extra Small Phones */
@media (max-width:320px){

    .case-study-hero{
        padding:95px 10px 35px;
    }

    .case-study-hero h1{
        font-size:22px;
        line-height:1.3;
    }

    .case-breadcrumb{
        font-size:11px;
    }

    .case-category{
        font-size:11px;
    }

    .case-stat-card{
        padding:14px;
    }

    .case-stat-card h2{
        font-size:18px;
    }

    .case-stat-card p{
        font-size:12px;
    }

    .ts-showcase,
    .ts-gallery,
    .ts-overview,
    .ts-problem,
    .ts-solution{
        padding-left:10px;
        padding-right:10px;
        margin-top: -60px;
    }

    .ts-left h2{
        font-size:21px;
    }

    .ts-overview-content p,
    .ts-right>p{
        font-size:14px;
    }

    .ts-info span{
        font-size:13px;
    }

    .ts-info h4{
        font-size:16px;
    }

    .ts-feature h4{
        font-size:16px;
    }

    .ts-feature p{
        font-size:13px;
    }

}

/*=========================================
        PROCESS
=========================================*/

.ts-process{

    padding:50px 7%;

    background:#fafafa;

}

.ts-process-head{

   

    margin-bottom:70px;

}

.ts-process-head span{

    color: #01526d;

    letter-spacing:2px;

    font-size:16px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

.ts-process-head h2{

    font-size:44px;

    margin:20px 0;

    color:#111;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

.ts-process-head p{

    font-size:20px;

    line-height:2;

    color:#666;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

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

.ts-process-grid{

    display:grid;

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

    gap:30px;

}

.ts-process-card{

    background:#fff;

    padding:25px;

    border-radius:20px;

    transition:.35s;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.ts-process-card:hover{

    transform:translateY(-8px);

}

.process-no{

    display:inline-flex;

    width:55px;

    height:55px;

    border-radius:50%;

    background: #01526d;

    color:#fff;

    justify-content:center;

    align-items:center;

    font-weight:700;

    margin-bottom:25px;

}

.ts-process-card h3{

    font-size:28px;

    margin-bottom:18px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

.ts-process-card p{

    font-size:17px;

    color:#666;

    line-height:1.8;

    margin-bottom:25px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

.ts-process-card ul{

    padding-left:18px;

}

.ts-process-card li{

    margin-bottom:24px;

    color:#555;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

/*=========================================
        RESEARCH
=========================================*/

.ts-research{

    padding:60px 7% 70px;

}

.ts-research h2{

    font-size:44px;

    margin-bottom:25px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

}

/*=========================================
        ARTIFACTS
=========================================*/

.ts-artifacts{

    padding:0 7% 120px;

}

.ts-artifacts-grid{

    display:grid;

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

    gap:20px;

}

.ts-artifacts-grid img{

    width:100%;

    border-radius:20px;

    display:block;

    transition:.4s;

}

.ts-artifacts-grid img:hover{

    transform:scale(1.03);

}

/*=========================================
            RESPONSIVE
=========================================*/

/* Large Desktop */
@media screen and (max-width:1440px){

    .ts-process,
    .ts-research,
    .ts-artifacts{
        padding-left:5%;
        padding-right:5%;
    }

    .ts-process-head h2,
    .ts-research h2{
        font-size:42px;
    }

}

/* Laptop */
@media screen and (max-width:1152px){

    .ts-process,
    .ts-research,
    .ts-artifacts{
        padding-left:4%;
        padding-right:4%;
    }

    .ts-process-grid{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

    .ts-process-head{
        margin-bottom:55px;
    }

    .ts-process-head h2,
    .ts-research h2{
        font-size:38px;
    }

    .ts-process-card h3{
        font-size:24px;
    }

}

/* Tablets */
@media (max-width:992px){

    .ts-process{
        padding:50px 20px;
    }

    .ts-research{
        padding:50px 20px 60px;
    }

    .ts-artifacts{
        padding:0 20px 80px;
    }

    .ts-process-head{
        margin-bottom:45px;
    }

    .ts-process-head span{
        font-size:14px;
    }

    .ts-process-head h2,
    .ts-research h2{
        font-size:34px;
    }

    .ts-process-head p{
        font-size:18px;
        line-height:1.8;
    }

    .ts-process-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .ts-artifacts-grid{
        grid-template-columns:1fr;
    }

}

/* Large Phones */
@media (max-width:768px){

    .ts-process{
        padding:45px 18px;
    }

    .ts-research{
        padding:45px 18px 50px;
    }

    .ts-artifacts{
        padding:0 18px 70px;
    }

    .ts-process-head{
        margin-bottom:35px;
    }

    .ts-process-head h2,
    .ts-research h2{
        font-size:30px;
        line-height:1.3;
    }

    .ts-process-head p{
        font-size:17px;
    }

    .ts-process-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .ts-process-card{
        padding:22px;
    }

    .ts-process-card h3{
        font-size:22px;
    }

    .ts-process-card p{
        font-size:15px;
    }

    .ts-process-card li{
        font-size:15px;
        margin-bottom:16px;
    }

    .process-no{
        width:50px;
        height:50px;
        font-size:16px;
    }

}

/* Medium Phones */
@media (max-width:576px){

    .ts-process{
        padding:40px 15px;
    }

    .ts-research{
        padding:40px 15px;
    }

    .ts-artifacts{
        padding:0 15px 60px;
    }

    .ts-process-head h2,
    .ts-research h2{
        font-size:27px;
    }

    .ts-process-head p{
        font-size:16px;
        line-height:1.7;
    }

    .ts-process-card{
        border-radius:16px;
        padding:20px;
    }

    .ts-process-card h3{
        font-size:20px;
    }

    .process-no{
        width:46px;
        height:46px;
        margin-bottom:18px;
    }

    .ts-artifacts-grid{
        gap:15px;
    }

    .ts-artifacts-grid img{
        border-radius:16px;
    }

}

/* Small Phones */
@media (max-width:480px){

    .ts-process{
        padding:35px 12px;
    }

    .ts-research{
        padding:35px 12px;
    }

    .ts-artifacts{
        padding:0 12px 50px;
    }

    .ts-process-head span{
        font-size:13px;
    }

    .ts-process-head h2,
    .ts-research h2{
        font-size:24px;
    }

    .ts-process-head p{
        font-size:15px;
    }

    .ts-process-card{
        padding:18px;
    }

    .ts-process-card h3{
        font-size:18px;
    }

    .ts-process-card p{
        font-size:14px;
        line-height:1.7;
    }

    .ts-process-card li{
        font-size:14px;
    }

    .process-no{
        width:42px;
        height:42px;
        font-size:15px;
    }

}

/* Extra Small Phones */
@media (max-width:320px){

    .ts-process{
        padding:30px 10px;
    }

    .ts-research{
        padding:30px 10px;
    }

    .ts-artifacts{
        padding:0 10px 40px;
    }

    .ts-process-head h2,
    .ts-research h2{
        font-size:20px;
        line-height:1.3;
    }

    .ts-process-head p{
        font-size:14px;
    }

    .ts-process-card{
        padding:15px;
    }

    .ts-process-card h3{
        font-size:16px;
    }

    .ts-process-card p{
        font-size:13px;
    }

    .ts-process-card li{
        font-size:13px;
        margin-bottom:12px;
    }

    .process-no{
        width:38px;
        height:38px;
        font-size:14px;
        margin-bottom:15px;
    }

    .ts-artifacts-grid img{
        border-radius:12px;
    }

}