.hero-project{
    background-image:url("../assets/bgProject.png");
}

.partner-company,
.client-company,
.partner-highlight{

    width:95%;
    max-width:3500px;

    margin:0 auto;
}



/* ===========================
   CLIENT
=========================== */

.client-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;
}

.client-card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.3s;
}

.client-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 35px rgba(0,0,0,.12);
}

.client-card img{
    width: 100%;
    height: 250px;       /* Perbesar tinggi gambar */
    object-fit: cover;   /* Gambar memenuhi area tanpa gepeng */
    object-position: center;
    border-radius: 12px;
}

.client-card h3{

    margin-bottom:8px;

    font-size:24px;
}

.client-card span{

    color:#ff1e1e;

    font-weight:600;

    display:block;

    margin-bottom:25px;
}


/* LIST */

.client-card ul{

    list-style:none;

    padding:0;

    margin:0;
}

.client-card li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;
}

.client-card li::before{

    content:"✔";

    width:24px;

    height:24px;

    border-radius:50%;

    background:#ff1e1e;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:13px;

    flex-shrink:0;
}

.service-area{
    width:95%;
    max-width:3500px;
    margin:70px auto;
}

.service-area h2{
    text-align:center;
    margin-bottom:45px;

    font-size:28px;
    font-weight:700;
}

.service-list{
    display:flex;
    gap:25px;
    
}

.service-item{
    flex:1;

    display:flex;
    gap:15px;

    background:#fff;

    padding:25px;

    border-radius:15px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.3s;
}
.service-item:hover{
    transform:translateY(-8px);
}

.service-text h4{
    margin:0 0 8px;
    font-size:17px;
}

.service-text p{
    margin:0;

    color:#666;
    font-size:14px;
    line-height:1.6;
}

/* Responsif untuk Layar Ponsel di project.css */
@media (max-width: 768px) {
    /* 1. Bagian Client/Project Grid (Diubah jadi 1 kolom ke bawah) */
    .client-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 30px;
    }

    .client-card {
        padding: 20px;
    }

    .client-card img {
        height: 200px; /* Menyesuaikan tinggi gambar proyek di HP */
    }

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

    /* 2. Bagian Service Area / List dalam Proyek */
    .service-area {
        margin: 40px auto;
    }

    .service-area h2 {
        font-size: 22px;
        margin-bottom: 25px;
    }

    .service-list {
        flex-direction: column; /* Daftar layanan diubah menjadi bertumpuk ke bawah */
        gap: 15px;
    }

    .service-item {
        padding: 20px;
    }
}