/* Reset some default styles */
* {
    background-color: transparent;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
}

/* styles untuk navigation bar */
.navbar {
    background-color: transparent;
    color: #fff;
    font-weight: normal;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
}

.navbar .logo {
    font-size: 16px;
    font-weight: bold;

}

.navbar .logo img {
    width: 100%;
    height: auto;
}

.

.navbar .menu {
    list-style: none;
    display: flex;
}

.navbar .menu li {
    margin: 0 15px;
}

.navbar .menu li a {
    text-decoration: none;
    color: #fff;
}

.navbar .menu li a:hover {
    text-decoration: underline;
    padding: 3px;
    color: #fff;
}

/* Style for the dropdown menu */
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: transparent;
    color:#fff;
    padding: 15px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    
}

.dropdown-menu li {
    display: block;
    padding: 10px;
}

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

/* Style for mobile menu (hamburger) */
.hamburger {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .navbar .menu {
        
        display: none;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        padding:10px;
        margin-top:20px;
        top: 120px;
        left: 0;
        background-color: #00008B;
        width: 100%;
    }

    .navbar .menu.active {
        display: flex;
    }

    .navbar .hamburger {
        display: block;
    }
}


/* CSS for the news section */
        .news-section {
            background-color: #fff; 
            padding: 20px; 
        }

        .news-container {
            max-width: 1200px; 
            margin: 0 auto; 
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .news-item {
            width: 100%; 
            height: auto;
            margin-bottom: 20px; 
            background-color: #fff; 
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
            padding:20px;
        }

        .news-item img {
            width: 100%;
            height: auto;
        }

        .news-item h1 {
            padding: 10px;
            font-size: 30px; 
            font-family: "Roboto", Helvetica, Arial, Sans-Serif;
            color:#000;
            
        }

        .news-item p {
            text-align: justify;
            margin-top:16px;
            font-size: 16px;
        }





footer {
    background-color: #111;;
    color: grey;
    padding: 20px;
    display: flex;
    justify-content: space-between;
}

.footer-column {
    flex: 0 0 48%;
}