/* ======= HEADER STYLES ======= */
.main-header {
    background-color: #111;
    padding: 10px 0;
}

.header-container {
    max-width: 1200px; /* Keeps everything within 1200px */
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Aligns logo & nav correctly */
    align-items: center; /* Fixes vertical alignment */
    padding: 0 20px;
}

/* Logo Container */
.image-container {
    display: flex;
    align-items: center; /* Ensures logo aligns with menu */
}

.logo-icon {
    width: 50px; /* Smaller first image */
    height: auto;
    margin-right: 10px;
}

.logo-text {
    height: 25px; /* Second image */
    width: auto;
}

/* Navigation */
.main-nav {
    display: flex;
    align-items: center; /* Ensures text is perfectly in line with the logo */
}

    .main-nav ul {
        list-style: none;
        display: flex;
        gap: 10px;
        padding: 0;
        margin: 0;
        align-items: center; /* Ensures menu text aligns */
    }

        .main-nav ul li {
            display: flex;
            align-items: center; /* Vertical alignment fix */
        }

            .main-nav ul li a {
                color: white;
                text-decoration: none;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                display: block; /* Makes entire space clickable */
            }

                .main-nav ul li a:hover {
                    text-decoration: underline;
                }

/* Burger Menu */
.burger-menu {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: white;
}

/* Mobile Navigation */
@media (max-width: 768px) {
    .burger-menu {
        display: block;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 60px;
        right: 10px;
        background-color: #222;
        padding: 15px;
        border-radius: 5px;
        width: 200px;
        z-index: 1000;
    }

        .main-nav.active {
            display: block;
        }

        .main-nav ul {
            flex-direction: column;
            gap: 10px;
        }

            .main-nav ul li {
                display: block;
                text-align: center;
                padding: 10px;
            }
}