/* =========================================
   OUR SERVICE SECTION
========================================= */

.service-section {

    background: #F3F3F3;
    padding: 67px 0;

}


.service-container {

    width: 100%;
    max-width: 1350px;
    margin: auto;

    background: #F3F3F3;

    padding: 90px 90px;

}


/* ================= HEADER ================= */

.service-header {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 65px;

}


.service-title {

    font-size: 78px;
    font-weight: 800;

    letter-spacing: -2px;

    color: #10141c;

    line-height: 1;

}


.service-description {

    max-width: 390px;

    font-size: 15px;

    line-height: 1.5;

    color: #20242c;

    margin-top: 8px;

}



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

.service-grid {

    display: grid;

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

    gap: 34px;

}



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

.service-card {

    position: relative;

    height: 395px;

    overflow: hidden;

    border-radius: 30px;

    cursor: pointer;

    transform: translateY(40px);

    opacity:0;

    animation: serviceReveal .9s ease forwards;

}


.service-card:nth-child(2){

    animation-delay:.15s;

}


.service-card:nth-child(3){

    animation-delay:.3s;

}



@keyframes serviceReveal {


    to{

        opacity:1;

        transform:translateY(0);

    }


}




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


.service-image {

    position:absolute;

    inset:0;

}


.service-image img {

    width:100%;

    height:100%;

    object-fit:cover;

    filter: grayscale(100%) brightness(.8);

    transition:
        transform .8s ease,
        filter .6s ease;

}


.service-overlay {


    position:absolute;

    inset:0;


    background:

    linear-gradient(

    180deg,

    rgba(0,0,0,.45),

    rgba(0,0,0,.8)

    );


}



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


.service-content {


    position:absolute;

    inset:0;

    padding:28px 26px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    color:white;


}



.service-content h3 {


    font-size:42px;

    line-height:1;

    font-weight:600;

    letter-spacing:-.5px;


}



.service-content p {


    font-size:15px;

    line-height:1.35;

    max-width:330px;

    color:#f2f2f2;


}




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


.service-card:hover img {

    transform:scale(1.12);

    filter: grayscale(0%) brightness(1);

}


.service-card:hover {


    transform:translateY(-10px);

    transition:.5s ease;

}




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

/* Laptop Besar */
@media (max-width:1400px){

    .service-container{

        max-width:1200px;

        padding:80px 60px;

    }

    .service-title{

        font-size:68px;

    }

    .service-grid{

        gap:28px;

    }

    .service-card{

        height:380px;

    }

    .service-content h3{

        font-size:38px;

    }

}


/* Laptop */
@media (max-width:1200px){

    .service-container{

        padding:70px 50px;

    }

    .service-title{

        font-size:58px;

    }

    .service-description{

        max-width:340px;

    }

    .service-grid{

        gap:24px;

    }

    .service-card{

        height:350px;

    }

    .service-content{

        padding:24px;

    }

    .service-content h3{

        font-size:34px;

    }

}


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

    .service-container{

        padding:60px 40px;

    }

    .service-header{

        flex-direction:column;

        gap:24px;

        margin-bottom:45px;

    }

    .service-title{

        font-size:48px;

    }

    .service-description{

        max-width:100%;

    }

    .service-grid{

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

        gap:22px;

    }

    .service-card{

        height:340px;

    }

    .service-content h3{

        font-size:30px;

    }

    .service-content p{

        font-size:14px;

    }

}


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

    .service-section{

        padding:60px 0;

    }

    .service-container{

        width:92%;

        padding:40px 25px;

    }

    .service-header{

        margin-bottom:35px;

    }

    .service-title{

        font-size:36px;

    }

    .service-description{

        max-width:100%;

        font-size:14px;

    }

    .service-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .service-card{

        height:360px;

        border-radius:22px;

    }

    .service-content{

        padding:22px;

    }

    .service-content h3{

        font-size:30px;

    }

    .service-content p{

        max-width:100%;

        font-size:14px;

        line-height:1.5;

    }

}


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

    .service-container{

        width:94%;

        padding:30px 18px;

    }

    .service-title{

        font-size:30px;

    }

    .service-description{

        font-size:13px;

    }

    .service-card{

        height:320px;

        border-radius:18px;

    }

    .service-content{

        padding:18px;

    }

    .service-content h3{

        font-size:26px;

    }

    .service-content p{

        font-size:13px;

    }

}


/* iPhone SE */
@media (max-width:380px){

    .service-title{

        font-size:26px;

    }

    .service-card{

        height:290px;

    }

    .service-content h3{

        font-size:22px;

    }

    .service-content p{

        font-size:12px;

        line-height:1.45;

    }

}


/* =========================================
   SCROLL ANIMATION
========================================= */

.service-title,
.service-description,
.service-card{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}

.service-title.show,
.service-description.show,
.service-card.show{

    opacity:1;

    transform:translateY(0);

}