.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
	padding-right: 20px;
}

.nav ul li {
    display: inline;
}

.nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    transition: color 0.3s ease;
}

.nav ul li a:hover {
    color: #27b7fe; /* Hover color */
}

/* Mobile Menu Icon */
.mobile-menu-icon {
    display: none;
    font-size: 2em;
    cursor: pointer;
    padding-right: 20px;
    position: relative;
}

/* Hamburger Icon */
.mobile-menu-icon span,
.mobile-menu-icon span::before,
.mobile-menu-icon span::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 3px;
    background-color: white;
    transition: transform 0.3s ease;
}

/* Positioning the hamburger lines */
.mobile-menu-icon span {
    top: 0;
}

.mobile-menu-icon span::before {
    top: -8px;
}

.mobile-menu-icon span::after {
    top: 8px;
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
    .nav ul {
        display: none; /* Hide menu items by default on mobile */
        flex-direction: column;
        gap: 15px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #333;
        padding: 50px 20px;
        width: 100%; /* Full width of the screen */
        height: 100vh; /* Full height of the screen */
        box-shadow: none;
        opacity: 0; /* Initially hidden */
        transform: translateX(-100%); /* Initially positioned off-screen */
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .nav.active ul {
        display: block; /* Show the menu when the "active" class is added */
        transform: translateX(0); /* Slide in from the left */
        opacity: 1; /* Make it visible */
    }

    .nav ul li {
        display: block;
        text-align: left; /* Align text to the left */
    }

    .nav ul li a {
        font-size: 1.5em;
        padding: 10px 0;
    }

    .mobile-menu-icon {
        display: block; /* Show the mobile menu icon on mobile */
    }

    /* Active State: Make the hamburger icon an "X" */
    .nav.active + .mobile-menu-icon span {
        background-color: transparent; /* Hide the middle line */
    }

    .nav.active + .mobile-menu-icon span::before {
        transform: rotate(45deg); /* Rotate the top line */
        top: 0;
    }

    .nav.active + .mobile-menu-icon span::after {
        transform: rotate(-45deg); /* Rotate the bottom line */
        top: 0;
    }
}