
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
    }

    .navbar {
		background-color: #062A4D;
		/* padding: 10px 20px; */
		height: 60px;
		display: flex;
		align-content: center;
		align-items: center;
		width: 100%;
    }

    .header-container {
      display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0 20px; /* Add some horizontal padding */

    }
    .logo {
        display: flex;
        align-items: center;
    }

    .logo-icon {
        width: 20px;
        margin-right: 8px;
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
    }

    .logo-text {
        color: #fff;
        font-size: 18px;
        font-weight: 500;
    }
	.nav-menu {
		margin-left: auto;
	}

    .nav-menu ul {
        list-style: none;
        display: flex;
        gap: 20px;
    }

    .nav-menu ul li a {
        text-decoration: none;
        color: #fff;
        font-weight: 500;
        transition: color 0.3s ease;
    }

    .nav-menu ul li a.active,
    .nav-menu ul li a:hover {
        color: #d4e157;
    }

    .menu-toggle {
        display: none;
        flex-direction: column;
        cursor: pointer;
    }

    .menu-toggle span {
        width: 25px;
        height: 3px;
        background-color: #fff;
        margin: 3px 0;
        transition: 0.3s;
    }

    /* Responsive Styles */
    @media (max-width: 768px) {
        .nav-menu {
            position: absolute;
            top: 60px;
            right: 0;
            background-color: #002544;
            width: 200px;
            height: 0;
            overflow: hidden;
            transition: height 0.3s ease;
            z-index: 99;
        }

        .nav-menu.active {
            height: 180px;
        }

        .nav-menu ul {
            flex-direction: column;
            padding: 10px 0;
        }

        .nav-menu ul li {
            text-align: center;
            padding: 10px 0;
        }

        .menu-toggle {
            display: flex;
        }

        .menu-toggle.active span:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
        }

        .menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle.active span:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
        }
    }

