/* * Custom CSS untuk SMKN 1 Sukalarang 
 * Mengatur Gambar Agar Tidak Otomatis Mengecil Di Desktop
 */

/* 1. Mengatur Kontainer Utama agar Lebih Lebar (Optional, agar area gambar luas) */
@media (min-width: 1200px) {
    .container {
        max-width: 1320px; /* Standar Bootstrap 5 yang lebih luas */
    }
}

/* 2. Mengatur Gambar Slider (Background Image) */
.single-slider {
    /* Memastikan gambar background memenuhi tinggi area, tidak mengecil ke dalam */
    background-size: cover !important; 
    background-position: center center !important;
}

/* 3. Mengatur Gambar Banner "Tentang Kami" agar Tidak Otomatis Mengecil */
.about-img img {
    width: 80% !important; /* Paksa lebar gambar 80% dari area kontainer */
    height: auto !important; /* Tinggi menyesuaikan proporsi */
    margin: 0 auto; /* Tengah-tengah */
    display: block; /* Agar margin auto berfungsi */
    max-width: none !important; /* Matikan max-width bawaan template */
}

/* 4. Menyesuaikan Konten Slider agar Rata Tengah dan Sesuai Ukuran */
.slider-content {
    max-width: 700px; /* Batasi lebar teks agar tidak terlalu panjang */
    margin: 0 auto; /* Rata tengah */
    text-align: center; /* Teks rata tengah */
}

/* 5. MEMASTIKAN GAMBAR TETAP RESPONSIF DI MOBILE (Sangat Penting) */
/* Aturan ini akan mengembalikan gambar ke 100% pada layar kecil (smartphone) */
@media (max-width: 767px) {
    .about-img img {
        width: 100% !important; /* Kembali penuh di HP agar jelas */
        height: auto !important;
    }
    .slider-content {
        max-width: 100%;
        text-align: left; /* Teks rata kiri kembali di HP */
    }
}