.about-section {
    position: relative;
    min-height: 100vh;
    align-items: center;
    overflow: visible;
}

.about-title {
    padding-top: 20%;
    padding-left: 49%;
    font-family: 'FrameHead-Roman', serif;
    font-size: clamp(2.2rem, 5.5vw, 7.75rem);
    font-weight: 400;
    color: rgb(0, 0, 0);
    opacity: 1;
    z-index: 5;
}

.about-box {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
        url('../images/about/about1.webp');
    background-size: cover;       /* gambar memenuhi box */
    background-position: center;  /* posisikan tengah gambar */
    background-repeat: no-repeat; /* jangan diulang */
    position: absolute;
    left: 10%;
    top: 32%;
    width: 35%;
    height: 60%;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
    z-index: 4;
    display: flex;                 /* aktifkan flexbox */
    flex-direction: column;        /* susun vertikal */
    justify-content: flex-end;     /* dorong isi ke bawah */
    color: white;
}

.about-box-text {
    padding-left: 10%;
    max-width: 90%;
}

.about-box-text2 {
    padding-left: 8%;
    max-width: 90%;
    padding-bottom: 3%;
}

.about-box-text h3,
.about-box-text2 h3 {
    font-size: clamp(1.3rem, 2.4vw, 2.2rem);
}

.about-box-text p,
.about-box-text2 p {
    font-size: clamp(1rem, 1.25vw, 3rem);
    line-height: 1.6;
}

.about-slice {
    position: absolute;
    left: 13%;
    top: 37%;
    width: 35%;
    height: 60%;
    border: 1px solid #000000;
    background: transparent;
    box-sizing: border-box;
    z-index: 4;
    padding: 10px; /* supaya isi tidak mepet */
}

/* styling tombol mini */
.about-slice button {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 0.8em 1.8em;
    font-size: clamp(0.5rem, 0.9vw, 1.1rem);
    background: linear-gradient(125deg, #0052cc, #263238);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
}

.about-slice button:hover {
    background-color: #003d80;
}

.about-top {
    background: linear-gradient(rgba(0, 0, 0, 0.308), rgba(0, 0, 0, 0.308)), 
            url('../images/about/about3.webp');
    background-size: cover;       /* gambar memenuhi box */
    background-position: center;  /* posisikan tengah gambar */
    background-repeat: no-repeat; /* jangan diulang */
    position: absolute;
    right: 5%;
    top: 10%;
    width: 12%;
    height: 35%;
    z-index: 5;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 0 80%);
}

.about-slice-top {
    position: absolute;
    right: 7%;
    top: 13%;
    width: 12%;
    height: 35%;
    border: 1px solid #000000;
    background: transparent;
    box-sizing: border-box;
    z-index: 4;
}

.about-down {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('../images/about/about2.webp');
    background-size: cover;       /* gambar memenuhi box */
    background-position: center;  /* posisikan tengah gambar */
    background-repeat: no-repeat; /* jangan diulang */
    position: absolute;
    left: 52%;
    top: 65%;
    width: 35%;
    height: 40%;
    clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 0 100%);
    z-index: 5;
    display: flex;                 /* aktifkan flexbox */
    flex-direction: column;        /* susun vertikal */
    justify-content: flex-end;     /* dorong isi ke bawah */
    color: white;
}

.about-slice-down {
    position: absolute;
    left: 54%;
    top: 61%;
    width: 35%;
    height: 40%;
    border: 1px solid #000000;
    background: transparent;
    box-sizing: border-box;
    z-index: 6;
    padding: 10px; /* supaya isi tidak mepet */
}

/* styling tombol mini */
.about-slice-down button {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 0.8em 1.8em;
    font-size: clamp(0.5rem, 0.7vw, 1.1rem);
    background: linear-gradient(135deg, #0052cc, #263238);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
}


.about-decor {
    z-index: 3;
    position: absolute;
    left: 0%;
    top: 10%;
    width: 35%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%230056b3' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 768px) {
    /* --- General Section Adjustments --- */
    .about-section {
        min-height: auto;   /* Biarkan konten menentukan tinggi */
        padding: 4rem 1rem; /* Tambahkan spasi vertikal & horizontal */
        display: flex;      /* 1. Jadikan section sebagai flex container */
        flex-direction: column; /* Susun item secara vertikal */
        align-items: center;    /* Pusatkan item secara horizontal */
    }

    /* --- Hide Decorative Elements --- */
    .about-slice,
    .about-slice-top,
    .about-slice-down,
    .about-top,
    .about-decor {
        display: none;
    }
    
    /* --- Reorder and Style Flex Items --- */

    /* 2. Atur urutan elemen: Judul akan menjadi yang pertama */
    .about-container {
        order: 1; /* Tampil pertama */
        width: 100%;
        margin-bottom: 2rem; /* Beri jarak ke elemen di bawahnya */
    }

    .about-box {
        order: 2; /* Tampil kedua */
    }

    .about-down {
        order: 3; /* Tampil ketiga */
    }

    /* --- Center The Main Title --- */
    .about-title {
        position: relative; 
        text-align: center;
        padding: 0;         /* Hapus padding lama */
        margin-bottom: 0;   /* Margin sekarang di .about-container */
    }

    /* --- Stack and Style Content Boxes --- */
    .about-box,
    .about-down {
        position: relative;   /* Kembali ke alur dokumen */
        width: 90%;           /* Lebar 90% dari parent */
        max-width: 500px;     /* Batas lebar maksimum agar tidak terlalu besar di tablet */
        height: 40vh;         /* Beri tinggi yang konsisten */
        left: auto;           /* Reset semua posisi absolut */
        top: auto;
        right: auto;
        margin: 1rem 0;       /* Ganti margin auto dengan margin vertikal */
        clip-path: none;      /* Hapus bentuk kompleks */
        border-radius: 10px;  /* Tambahkan sudut tumpul */
        justify-content: center; /* Pusatkan teks secara vertikal */
    }

    /* --- Adjust Text Padding Inside Boxes --- */
    .about-box-text,
    .about-box-text2 {
        padding: 1.5rem;      /* Beri ruang untuk teks */
        max-width: 100%;
        text-align: center;   /* Pusatkan teks di dalam box */
    }
}