/* Pengaturan Layout Dasar */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa; /* Warna background abu muda agar bersih */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Header / Hero Section */
.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url('https://images.unsplash.com/photo-1523050853063-913894d92177?q=80&w=1470&auto=format&fit=crop'); /* Gambar Placeholder sekolah */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 450px;
}

/* Gaya Card Informasi */
.card {
    transition: transform 0.3s ease;
    border-radius: 15px;
}

.card:hover {
    transform: translateY(-10px);
}

.icon-box {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Custom Button */
.btn-primary {
    background-color: #0d6efd;
    border: none;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #0b5ed7;
}

/* Responsivitas Navbar */
.navbar-brand {
    letter-spacing: 1px;
}
/* Styling Carousel Hero */
/* Container Utama Carousel */
#heroCarousel {
    position: relative;
    height: 550px; /* Tinggi hero section */
    background-color: #000; /* Warna dasar jika gambar gagal load */
}

/* Mengatur tinggi setiap item slide */
.carousel-item {
    height: 550px;
    width: 100%;
}

/* Perbaikan agar Gambar Tampil & Agak Gelap */
.overlay-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Efek Overlay Gelap (0.7 berarti 70% gelap) */
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                      inherit; /* Ini akan mengambil gambar dari style inline di HTML */
    
    /* Penting: Karena Anda menulis background-image di HTML secara inline, 
       kita harus memastikan linear-gradient menimpa gambar tersebut. */
}

/* Pengaturan Teks di Tengah Hero */
.carousel-caption-custom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 10;
    width: 100%;
    padding: 0 15px;
}

/* Responsif untuk HP */
@media (max-width: 768px) {
    #heroCarousel, .carousel-item {
        height: 450px;
    }
    .display-4 {
        font-size: 2.2rem;
    }
}

/* Tambahan: Warna Teal untuk Footer (karena tidak ada di Bootstrap bawaan) */
.bg-teal-900 {
    background-color: #0d4a46 !important;
}
.teal-900 {
    background-color: #0d4a46 !important;
}
/* Efek Card */
.card {
    transition: transform 0.3s;
}
.card:hover {
    transform: translateY(-5px);
}
/* Pastikan form pencarian terlihat rapi di mobile */
@media (max-width: 768px) {
    #heroCarousel, .carousel-item {
        height: 400px;
    }
    .carousel-caption-custom h1 {
        font-size: 1.8rem;
    }
}