/* ===========================
   HERO
=========================== */

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


/* ===========================
   SECTION
=========================== */

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

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

    margin:0 auto;
}

.partner-contact{
    width:95%;
    max-width:2500px;
    margin-left: 45px;
    margin-right: 25px;
}


/* ===========================
   PARTNER
=========================== */

.partner-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;
}

.partner-card{

    background:#fff;

    border-radius:18px;

    padding:40px 30px;

    text-align:center;

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

    transition:.3s;
}

.partner-card:hover{

    transform:translateY(-10px);

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

.partner-card img{

    width:80px;

    height:80px;

    object-fit:contain;

    margin-bottom:25px;
}

.partner-card h3{

    font-size:24px;

    margin-bottom:10px;
}

.partner-card span{

    color:#666;

    font-size:16px;
}



/* ===========================
   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;
}



/* ===========================
   HIGHLIGHT
=========================== */

.partner-highlight{

    display:grid;

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

    gap:30px;
}

.highlight-card{

    background:#fff;

    text-align:center;

    padding:45px 20px;

    border-radius:18px;

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

.highlight-card h2{

    color:#ff1e1e;

    font-size:48px;

    margin-bottom:10px;
}

.highlight-card p{

    color:#666;

    font-size:17px;
}



/* ===========================
   CTA
=========================== */

.partner-contact{

    width:95%;

    max-width:2600px;

    margin:0 auto;

    background:#111;

    color:white;

    border-radius:20px;

    padding:70px;

    text-align:center;
}

.partner-contact h2{

    font-size:40px;

    margin-bottom:20px;
}

.partner-contact p{

    width:70%;

    margin:0 auto 40px;

    line-height:1.8;

    color:#ddd;
}

.partner-contact button{

    background:#ff1e1e;

    color:white;

    border:none;

    padding:18px 45px;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;

    transition:.3s;
}

.partner-contact button:hover{

    background:#d60000;
}

/* Responsif untuk Layar Ponsel di partner.css */
@media (max-width: 768px) {
    /* 1. Margin khusus untuk bagian partner-contact di HP */
    .partner-contact {
        margin-left: auto;
        margin-right: auto;
        padding: 30px 20px;
        border-radius: 15px;
    }

    /* 2. Partner Grid (Diubah jadi 1 kolom) */
    .partner-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 30px;
    }

    .partner-card {
        padding: 30px 20px;
    }

    /* 3. Client Grid (Diubah jadi 1 kolom) */
    .client-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 30px;
    }

    .client-card {
        padding: 20px;
    }

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

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

    /* 4. Partner Highlight (Diubah jadi 2 kolom atau 1 kolom) */
    .partner-highlight {
        grid-template-columns: repeat(2, 1fr); /* Menggunakan 2 kolom agar pas di HP */
        gap: 15px;
    }

    .highlight-card {
        padding: 25px 15px;
    }

    .highlight-card h2 {
        font-size: 32px; /* Memperkecil angka statistik */
    }

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

    /* 5. Bagian Banner Kontak Partner di Bawah */
    .partner-contact h2 {
        font-size: 28px;
    }

    .partner-contact p {
        width: 100%; /* Paragraf selebar layar HP */
        font-size: 14px;
        margin-bottom: 25px;
    }

    .partner-contact button {
        width: 100%; /* Tombol jadi full-width agar mudah ditekan */
        padding: 14px;
    }
}