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

.about-company{
    width:95%;
    max-width:3500px;

    margin:0 auto;

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

    gap:70px;
}
.about-text{

    flex:1;
}

.about-text h4{

    color:#ff1e1e;

    font-size:15px;

    text-transform:uppercase;

    margin-bottom:10px;
}

.about-text h2{

    font-size:44px;

    margin-bottom:20px;
}

.about-text p{

    color:#666;

    line-height:1.8;

    margin-bottom:40px;
}

.about-image{

    flex:1;
}

.about-image img{

    width:50%;

    border-radius:18px;

    display:block;

    object-fit:cover;
}

.about-feature{

    display:flex;

    gap:20px;
}

.feature-card{

    flex:1;

    background:white;

    padding:25px;

    border-radius:16px;

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

    transition:.3s;
}
.feature-card:hover{

    transform:translateY(-8px);
}
.feature-card img{

    width:55px;

    margin-bottom:15px;
}
.feature-card h3{

    margin-bottom:10px;

    font-size:20px;
}
.feature-card p{

    margin:0;

    color:#666;

    line-height:1.7;
}

.achievement{

    width:95%;

    max-width:3500px;

    margin:0 auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:70px;
}

.achievement-title{

    width:350px;
}

.achievement-title h4{

    color:#ff1e1e;

    margin-bottom:10px;
}

.achievement-title h2{

    font-size:42px;

    line-height:1.2;
}

.achievement-list{

    flex:1;

    display:grid;

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

    gap:25px;
}

.achievement-card{

    text-align:center;

    padding:30px 20px;
}

.achievement-card img{

    width:50px;

    margin-bottom:15px;
}

.achievement-card h3{

    color:#ff1e1e;

    font-size:42px;

    margin:10px 0;
}

.vision-mission{

    width:95%;

    max-width:2500px;

    margin:0 auto;

    display:flex;

    gap:35px;
}

.vision-card,
.mission-card{

    flex:1;

    background:#111;

    color:white;

    padding:40px;

    border-radius:18px;

    display:flex;

    gap:25px;

    align-items:flex-start;
}

.vision-icon,
.mission-icon{

    width:80px;
    height:80px;

    background:whitesmoke;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;
}

.vision-icon img,
.mission-icon img{

    width:40px;
}

/* Responsif untuk Layar Ponsel di about.css */
@media (max-width: 768px) {
    /* 1. Bagian Company Profile (Teks & Gambar jadi ke bawah) */
    .about-company {
        flex-direction: column;
        gap: 30px;
    }

    .about-text h2 {
        font-size: 28px; /* Memperkecil judul utama */
    }

    .about-image img {
        width: 100%; /* Gambar dibuat penuh agar proporsional di HP */
    }

    .about-feature {
        flex-direction: column; /* Fitur kartu dibuat bertumpuk ke bawah */
        gap: 15px;
    }

    /* 2. Bagian Achievement / Statistik */
    .achievement {
        flex-direction: column;
        gap: 30px;
    }

    .achievement-title {
        width: 100%;
        text-align: center;
    }

    .achievement-title h2 {
        font-size: 28px;
    }

    .achievement-list {
        grid-template-columns: repeat(2, 1fr); /* Diubah jadi 2 kolom agar muat di HP */
        gap: 15px;
        width: 100%;
    }

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

    /* 3. Bagian Visi & Misi */
    .vision-mission {
        flex-direction: column; /* Visi dan Misi bertumpuk ke bawah */
        gap: 20px;
    }

    .vision-card,
    .mission-card {
        padding: 20px; /* Mengurangi padding card di HP */
        flex-direction: column; /* Ikon dan teks di dalam card jadi bertumpuk */
        align-items: center;
        text-align: center;
    }
}