@media screen and (max-width: 1200px){
        #hero p{ 
            font-size: 0.9rem;
        }

        #hero h1{ 
            font-size: 2.0rem;
        }

    
        
}


@media screen and (max-width: 995px) {
.sticky-wrapper img {
        /* 1. MENURUNKAN GAMBAR */
        /* Ubah -350px menjadi angka yang lebih kecil, misal -150px agar turun */
        top: -200px !important; 
        
        /* 2. MENYESUAIKAN UKURAN */
        /* Di layar lebih kecil, sebaiknya lebar juga dikecilkan sedikit agar tidak menabrak teks */
        width: 700px !important; 
        height: auto !important; /* Tetap auto agar tidak gepeng */
        
        /* 3. POSISI KANAN */
        right: -200px !important; 
    }
    
    .profil-column {
        height: 300px !important; /* Sesuaikan tinggi wadahnya */
    }

    #hero .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* 2. Memperkecil padding container agar teks lebih mepet ke pinggir layar */
    #hero .container, #hero .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 3. Atur ulang kolom agar tidak saling tindih tapi tetap lebar */
    .col-md-6 {
        padding-left: 5px !important;
        padding-right: 5px !important;
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* 4. Agar teks tidak terlalu rapat, kecilkan sedikit ukuran font jika perlu */
    #hero h1 {
        font-size: 1.8rem !important;
    }
}

/* Jika masih bandel, gunakan media query dengan batas yang lebih luas */
@media screen and (max-width: 767.98px) {
    
    /* 1. Paksa Container Teks & Gambar jadi satu kolom penuh */
    #hero .row, .hero .row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* 2. Tengahkan Teks Side */
    .text-side {
        flex: none !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Tengahkan konten secara horizontal */
        justify-content: center !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* 3. Paksa semua elemen teks di dalamnya ke tengah */
    .text-side h1, 
    .text-side h2, 
    .text-side p, 
    .text-side span,
    .text-side .btn {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }

    /* 4. Gambar tetap besar dan di tengah */
    .profil-column {
        position: relative;
        height: 350px !important; /* Beri ruang untuk gambar */
        display: block !important;
        overflow: visible !important;
    }

    .sticky-wrapper img {
        /* 1. POSISI TENGAH SEMPURNA */
        position: absolute !important;
        left: 50% !important; /* Geser titik awal ke tengah */
        transform: translateX(-50%) !important; /* Tarik balik ke tengah presisi */
        right: auto !important; /* Matikan paksaan kanan dari desktop */
        
        /* 2. KONTROL NAIK/TURUN */
        /* Sesuaikan angka ini jika ingin lebih turun atau naik */
        top: -300px !important; 

        /* 3. UKURAN (SESUAI PERMINTAANMU) */
        width: 700px !important; 
        height: auto !important; /* Anti Gepeng */
        
        /* 4. PROTEKSI */
        max-width: none !important; /* Biar bisa lebih lebar dari layar HP */
        object-fit: contain !important;
        display: block !important;
        z-index: 100;
    }

    #hero, .hero-section { 
        min-height: auto !important; /* Hapus paksaan tinggi layar penuh */
        height: auto !important;
        padding-top: 20px !important; /* Sesuaikan jarak dari navbar */
        padding-bottom: 40px !important;
    }


    /**nav **/
    #nav .container, 
    #nav .row, 
    #nav .col-10 {
        position: static !important; /* Menghilangkan batasan koordinat */
        display: block !important; 
        width: 100% !important;
        max-width: 100% !important;
    }

    .navbar {
        display: flex !important;
        justify-content: flex-start !important; /* Tombol di kiri */
        align-items: center !important;
        min-height: 60px;
    }

    /* Pastikan tidak ada overlay transparan yang menutupi tombol */
    .navbar-collapse {
        margin-top: 0 !important;
    }

   .navbar-collapse:not(.show) {
        display: none !important;
    }

    /* Pastikan saat dibuka (.show), dia muncul sebagai blok di atas konten */
    .navbar-collapse.show {
        display: block !important;
        position: absolute !important;
        top: 60px; /* Sesuaikan dengan tinggi navbar hitam kamu */
        left: 0;
        width: 100%;
        background-color: #1a1d2b !important;
        z-index: 999999 !important;
        padding: 20px !important;
    }

    .navbar-toggler {
        /* Beri area klik yang lebih jelas */
        padding: 10px !important;
        position: relative !important;
        z-index: 1000001 !important; /* Harus paling depan sendiri */
        cursor: pointer !important;
    }

/*sertifikat*/


/*button*/
.btn-custom1 {
        /* 1. Reset lebar agar tidak memenuhi layar */
        width: fit-content !important; 
        min-width: 180px; /* Sedikit lebih lebar agar teks tidak sesak */
        
        /* 2. Pastikan tinggi tetap proporsional */
        height: auto !important;
        min-height: 45px;
        padding: 10px 20px !important;

        /* 3. Cara paksa ke tengah */
        display: flex !important;
        margin: 0 auto !important; /* Margin auto kiri-kanan adalah kunci ke tengah */
        justify-content: center;
        align-items: center;

        /* 4. Perbaikan teks */
        font-size: 1rem !important; /* Perkecil sedikit agar pas di HP */
        border-radius: 8px !important;
    }

}


@media screen and (max-width: 399px){

     #hero h1 {
        font-size: 1rem !important;
    }
    
}

@media screen and (max-width: 577.98px){
  .img-pop {
        /* 1. Lebar box menyesuaikan (45% jika ingin 2 kolom, atau 90% jika ingin 1 kolom besar) */
        width: 46%; 
        
        /* 2. KUNCI: Reset tinggi agar tidak 610px lagi */
        height: auto !important; 
        
        /* 3. Beri aspek rasio agar box putih tetap proporsional (misal 3:4) */
        aspect-ratio: 3 / 4; 
        
        /* 4. Pastikan gambar di dalamnya tidak melar */
        object-fit: contain; 
        padding: 5px; /* Opsional: Jarak antara gambar dan pinggiran putih */
    }

    .certi-scroll {
        gap: 10px; /* Perkecil jarak antar box di HP */
        padding: 10px;
    }

    /* Sembunyikan tombol panah di HP jika dirasa mengganggu (karena bisa swipe) */
    .nav-btn {
        display: none !important;
    }

    /* 1. Atur container agar kotak portofolio turun ke bawah (stacking) */
    .d-flex.pt-5 {
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* 2. Reset tinggi dan lebar gambar agar pas di kotak putih */
    .card img {
        width: 100% !important; /* Gunakan 100%, jangan 200% */
        height: auto !important; /* Biarkan tinggi mengikuti asli gambar */
        max-height: 250px; /* Batas maksimal agar tidak terlalu panjang */
        object-fit: cover !important; /* Potong sedikit agar rapi memenuhi area */
    }

    /* 3. Perbaiki card agar tidak melar */
    .card {
        flex: none !important; /* Matikan lebar sama rata layar besar */
        width: 100% !important; /* Buat card selebar layar HP */
        height: auto !important; /* Box putih akan memendek mengikuti gambar */
        margin-bottom: 10px;
    }

    /* 4. Sesuaikan padding container agar tidak terlalu kosong */
    #portofolio.container {
        padding: 40px 15px !important;
    }
    
    
    .profil-column {
        position: relative;
        /* 1. Kurangi tinggi container agar tidak terlalu panjang ke bawah */
        height: 250px !important; 
        display: block !important;
        overflow: visible !important;
        /* Menghilangkan jarak berlebih di atas */
        margin-top: 0 !important; 
    }

    .sticky-wrapper img {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        
        /* 2. KONTROL JARAK NAVBAR */
        /* Jangan pakai -500px, coba -150px atau -200px saja */
        /* Semakin kecil minusnya (misal -100px), gambar semakin turun menjauhi navbar */
        top: -180px !important; 

        /* 3. UKURAN */
        width: 600px !important; /* Kecilkan sedikit agar lebih proporsional di HP */
        height: auto !important; 
        
        max-width: none !important;
        object-fit: contain !important;
        z-index: 100;
    }
    
}