@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

.services-hero{

    padding:140px 80px 140px;

    background:#111;

    text-align:center;
}

.services-hero h1{

    font-size:clamp(60px,8vw,130px);

    line-height:0.95;

    font-weight:400;

    color:#fff;
}

.hero-subtitle{

    color:var(--primary-color);
}

.services-hero h3{

    color:#fff;

    margin-top:50px;

    font-size:30px;
}


/* =========================================
   SERVICES GRID
========================================= */

.services-grid{

    padding:40px 80px;

    background:#F5F1EA;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    row-gap:50px;
}


/* BOX */

.service-box{

    height:550px;

    overflow:hidden;

    position:relative;

    border-radius:28px;
}


/* IMAGE BOX */

.service-image-box img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:0.8s ease;
}

.service-image-box:hover img{

    transform:scale(1.05);
}


/* TEXT BOX */

.service-text-box{

    background:#F7F3EC;

    color:black;

    padding:70px;

    display:flex;

    flex-direction:column;
}

.service-text-box .section-tag{

    margin-bottom:25px;
}

.service-text-box h2{

    font-size:clamp(42px,5vw,70px);

    line-height:1;

    font-weight:400;

    margin-bottom:30px;
}

.service-text-box p{

    margin-bottom:40px;
}

.service-text-box p:last-child{

    font-size:17px;

    line-height:1.9;

    color:rgba(255,255,255,0.7);

    max-width:500px;
}

.service-text-box li{

    line-height:1;

    margin-bottom:25px;
}

.service-text-box li::marker{

    content:"⬩➤ ";

    color:var(--primary-color);
}


/* =========================================
   EDITORIAL
========================================= */

.services-editorial{

    padding:40px 80px;

    background:#111;

    color:#fff;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:100px;

    text-align:center;
}

.services-editorial-content h2{

    font-size:clamp(42px,5vw,80px);

    line-height:1.05;

    margin-bottom:35px;

    font-weight:400;

    text-align:left;

    color:rgba(255,255,255,0.7);
}

.services-editorial-content p{

    line-height:2;

    color:var(--primary-color);
}

.services-editorial-content h6{

    line-height:2;

    text-align:left;

    font-family:'Cormorant Garamond', serif;

    font-size:30px;
}

.services-editorial-image img{

    width:100%;

    height:550px;

    object-fit:cover;
}


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

.process-section{

    padding:180px 80px;

    background:#F5F1EA;

    text-align:center;
}

.process-section h2{

    font-size:clamp(45px,6vw,90px);

    line-height:1.05;

    margin-bottom:80px;

    font-weight:400;
}

.process-grid{

    display:grid;

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

.process-card{

    padding:50px;

    background:#fff;

    border:3px solid rgba(0,0,0,0.05);

    text-align:left;
}

.process-card span{

    font-size:60px;

    color:var(--primary-color);

    display:block;

    margin-bottom:15px;
}

.process-card h3{

    font-size:50px;

    font-weight:400;

    margin-bottom:15px;
}

.process-card p{

    font-size:20px;
}


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

@media(max-width:1100px){

    .services-grid,
    .services-editorial{

        grid-template-columns:1fr;
    }

    .services-editorial{

        gap:60px;
    }

    .process-grid{

        grid-template-columns:1fr 1fr;
    }

    .services-editorial-image img{

        height:500px;
    }
}



@media(max-width:768px){

    /* HERO */

    .services-hero{

        padding:120px 25px 90px;
    }

    .services-hero h1{

        line-height:1.05;
        font-size: 50px;
    }

    .services-hero h3{

        font-size:20px;

        margin-top:30px;

        line-height:1.6;
    }


    /* GRID */

    .services-grid{

        grid-template-columns:1fr;

        padding:25px;

        gap:25px;
    }

    .service-box{

        height:auto;
    }

    .service-image-box img{

        height:350px;
    }

    .service-text-box{

        padding:40px 25px;
    }

    .service-text-box .section-tag{
        font-size: 25px;
    }

    .service-text-box h2{

        line-height:1.1;
    }

    .service-text-box p{

        margin-bottom:25px;
    }

    .service-text-box li{

        margin-bottom:18px;
    }


    /* EDITORIAL */

    .services-editorial{

        grid-template-columns:1fr;

        padding:60px 25px;

        gap:40px;
    }

    .services-editorial-content h2{

        text-align:left;
    }

    .services-editorial-content h6{

        font-size:24px;
    }

    .services-editorial-image img{

        height:380px;
    }


    /* PROCESS */

    .process-section{

        padding:50px 25px;
        /* margin-bottom: 25px; */
    }

    .process-section h2{
        margin-bottom: 20px;
    }

    .process-grid{

        grid-template-columns:1fr;
    }

    .process-card{

        padding:35px 25px;
    }

    .process-card h3{

        font-size:36px;
    }

    .process-card p{

        font-size:17px;

        line-height:1.7;
    }
}