/* ===== ROOT VARIABLES ===== */
:root {
    --primary-blue: #0059FF;
    --primary-orange: #ff4800;
}

/* ===== FONTS ===== */
* {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

/* ===== NAVBAR ===== */
#navbar {
    background-color: var(--primary-blue);
}

#logo {
    width: 60px;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: transparent;
    color: white;
    cursor: pointer;
    border: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 180px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    padding: 10px 0;
    z-index: 100;
}

.dropdown-content a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: black;
    font-size: smaller;
}

.dropdown-content a:hover {
    background-color: var(--primary-blue);
    color: white;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Desktop dropdown */
.navbar-nav > .dropdown:hover > .dropdown-menu {
    display: block !important;
}

/* ===== ABOUT PAGE SPECIFIC ===== */
.col-md-9 {
    margin-top: 1.2rem;
    border-radius: 20px !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Main Content Section */
.main-content {
    background: linear-gradient(white, rgb(209, 209, 209));
    border-radius: 15px;
    padding: 2rem !important;
}

.main-content h1 {
    color: var(--primary-blue);
    font-weight: 700;
}

/* Profil Sekolah Section */
.profil-sekolah {
    background: white;
    border-radius: 15px;
    border-left: 3px solid var(--primary-orange);
    overflow: hidden;
}

.profil-header {
    background: white;
    padding: 1.5rem;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.profil-header h1 {
    color: var(--primary-blue);
    font-weight: 700;
    margin: 0;
    padding-left: 1rem;
}

.profil-image-container {
    width: 600px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 0 auto;
    padding: 1rem;
}

.profil-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.profil-description {
    background: white;
    padding: 2rem;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    line-height: 1.6;
}

.toggle-sidebar { display: none !important; }

    @media (min-width: 768px) {
        .col-md-9 { flex: 0 0 100% !important; max-width: 100% !important; }
    }
    @media (max-width: 767.98px) {
        .col-md-9 { flex: 0 0 100% !important; max-width: 100% !important; }
    }

    .col-md-9 { margin-top: 1.2rem; border-radius: 20px !important; }

    .m-2ImgContainer{ width: 600px; height: 400px; display: flex; justify-content: center; align-items: center; overflow: hidden; margin: 0 auto; }
    .m-2{ width: 100%; height: 100%; object-fit: cover;}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .profil-image-container {
        width: 100%;
        height: 300px;
        padding: 0.5rem;
    }
    
    .profil-image-container img {
        min-width: 100%;
    }
    
    .main-content,
    .profil-sekolah {
        padding: 1rem !important;
    }
    
    .profil-header h1 {
        font-size: 1.5rem;
    }
}