.header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav li {
    position: relative;
}

.header-nav a {
    text-decoration: none;
    padding: 15px 3px;
    display: block;
}

/* Submenu Styling */
.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    display: none; /* Hidden by default */
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.submenu-item {
    display: block;
}

.submenu-item a {
    padding: 7px 26px;
    color: #333;
}

.submenu-item a:hover {
    background-color: #f0f0f0;
	    border-radius: 15px;
}

/* Show submenu on hover (Desktop) */
.menu-item:hover .submenu {
    display: block;
}
.box-header-nav .main-menu .menu-item .submenu::after{
	border:0
}
/* Mobile Styling */
@media screen and (max-width: 768px) {
    /* Mobile Menu Styling */
    .main-menu {
         /* Hidden by default on mobile */
        flex-direction: column;
        background-color: #fff;
        width: 100%;
    }

    .main-menu.active {
        display: block; /* Show when toggled */
    }

    .menu-item {
        display: block;
		line-height: 50px;
    }

    .submenu {
        position: relative;
        display: none; /* Hidden by default on mobile */
        background-color: transparent;
        width: 100%;;
		box-shadow: none
    }

    .menu-item.active .submenu {
        display: block; /* Show submenu when clicked on mobile */
    }

    /* Menu toggle button */
    .menu-toggle {
        display: block;
        cursor: pointer;
        
        color: white;
        padding: 10px;
        text-align: center;
    }

    .menu-toggle span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: white;
        margin: 5px 0;
    }
	.submenu-item a{
		padding-left: 0;
	}
}

@media screen and (max-width: 768px) {
    .submenu {
        display: none; /* Hidden by default */
    }

    .menu-item.active .submenu {
        display: block; /* Show submenu when parent has 'active' class */
    }
}