/* General */
body{
    font-family: 'Segoe UI', sans-serif;
    background:#f5f5f5;
    margin:0;
    padding:0;
    overflow-x:hidden;
}

/* Images responsive */
img{
    max-width:100%;
    height:auto;
}

/* Hero Section */
.hero{
    background:#198754;
    color:white;
    padding:100px 20px;
    text-align:center;
}

.hero h1{
    font-size:3rem;
    font-weight:700;
    margin-bottom:20px;
}

.hero p{
    font-size:1.2rem;
    margin-bottom:30px;
}

/* Button */
.btn-company{
    display:inline-block;
    background:white;
    color:#198754;
    padding:12px 30px;
    border-radius:30px;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

.btn-company:hover{
    background:#146c43;
    color:white;
}


/* ========================================
   PROJECT KAMI
======================================== */

.project-section{
    padding:40px 0;
}

.project-heading{
    text-align:center;
    margin-bottom:35px;
}

.project-heading h2{
    color:#198754;
    font-size:36px;
    font-weight:700;
    margin-bottom:10px;
}

.project-heading h2::after{
    content:"";
    display:block;
    width:70px;
    height:4px;
    background:#198754;
    border-radius:10px;
    margin:12px auto 0;
}


/* Project Image */

.project-image{
    border:4px solid #198754;
    border-radius:16px;
    overflow:hidden;
    background:#ffffff;
    box-shadow:0 5px 15px rgba(25,135,84,0.15);
    transition:all 0.3s ease;
}

.project-image:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(25,135,84,0.25);
    border-color:#146c43;
}

.project-image img{
    width:100%;
    height:270px;
    object-fit:cover;
    display:block;
    transition:transform 0.4s ease;
}

.project-image:hover img{
    transform:scale(1.05);
}


/* Footer */
footer{
    background:#198754;
    color:white;
    padding:25px;
    text-align:center;
}


/* ========================================
   TABLET
======================================== */

@media (max-width:992px){

    .hero{
        padding:80px 20px;
    }

    .hero h1{
        font-size:2.5rem;
    }

    .hero p{
        font-size:1.1rem;
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width:768px){

    .hero{
        padding:60px 15px;
    }

    .hero h1{
        font-size:2rem;
    }

    .hero p{
        font-size:1rem;
    }

    .btn-company{
        width:100%;
        max-width:250px;
        text-align:center;
        padding:12px;
    }

    footer{
        font-size:14px;
    }


    /* Project Kami */

    .project-section{
        padding:30px 0;
    }

    .project-heading{
        margin-bottom:25px;
    }

    .project-heading h2{
        font-size:30px;
    }

    .project-image img{
        height:230px;
    }

}


/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width:480px){

    .hero{
        padding:50px 15px;
    }

    .hero h1{
        font-size:1.6rem;
    }

    .hero p{
        font-size:.95rem;
    }


    /* Project Kami */

.project-section{
    padding:40px 0;
}

.project-heading{
    text-align:center;
    margin-bottom:35px;
}

.project-heading h2{
    color:#198754;
    font-size:36px;
    font-weight:700;
    margin-bottom:10px;
}

.project-heading h2::after{
    content:"";
    display:block;
    width:70px;
    height:4px;
    background:#198754;
    border-radius:10px;
    margin:12px auto 0;
}


/* Border dan ukuran gambar dibuat sama */

.project-image{
    width:100%;
    height:280px;
    border:4px solid #198754;
    border-radius:16px;
    overflow:hidden;
    background:#ffffff;
    box-shadow:0 5px 15px rgba(25,135,84,0.15);
    transition:all 0.3s ease;
}

.project-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    transition:transform 0.4s ease;
}


/* Efek hover */

.project-image:hover{
    transform:translateY(-5px);
    border-color:#146c43;
    box-shadow:0 10px 25px rgba(25,135,84,0.25);
}

.project-image:hover img{
    transform:scale(1.05);
}


/* Tablet */

@media(max-width:768px){

    .project-heading h2{
        font-size:30px;
    }

    .project-image{
        height:250px;
    }

}


/* HP kecil */

@media(max-width:480px){

    .project-heading h2{
        font-size:27px;
    }

    .project-image{
        height:220px;
        border-width:3px;
        border-radius:12px;
    }

}