.vertipro-menu {
    position: relative;
    margin: 0px;
    width: 100%;
    border: 2px solid #eee;
}

.vertipro-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    transition: 0.2s linear;
}

.vertipro-menu ul li {
    position: relative;
    transition: 0.2s linear;
}

.vertipro-menu ul li a {
    display: flex; /* Flexbox for alignment */
    justify-content: space-between; /* Align text and icon on opposite sides */
    align-items: center; /* Center items vertically */
    background: var(--background-color); /* Background from params */
    padding: 10px 15px !important; /* Padding */
    color: var(--parent-color); /* Parent color */
    text-decoration: none; /* Remove underline */
    transition: 0.2s linear; /* Transition for hover effects */
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    font-size: 15px;
}

.vertipro-menu ul li a:hover {
    background: var(--parent-hover-bg); /* Background color on hover */
    color: var(--parent-hover-color); /* Text color on hover */
}
.vertipro-menu .active li a {
	padding-left: 15px !important;
}
/* Icon styles */
.vertipro-menu ul li a .fa {
    margin-left: 10px; /* Space between text and icon */
    width: 30px; /* Fixed width for icon */
    display: flex; /* Flexbox for icon alignment */
    justify-content: center; /* Center icon horizontally */
    align-items: center; /* Center icon vertically */
    transition: transform 0.3s ease-in-out; /* Smooth rotation effect */
}

/* Child menu styles */
.vertipro-menu ul ul {
    display: none; /* Initially hide submenus */
    background-color: var(--background-color); /* Background for child menus */
    transition: 0.2s linear;
}

.vertipro-menu ul ul li a {
    padding: 10px 20px 10px 30px !important; /* Padding for child links */
    color: var(--child-color); /* Child color */
}

/* Hover styles for child links */
.vertipro-menu ul ul li a:hover {
    background: var(--child-hover-bg); /* Background color on hover */
    color: var(--child-hover-color); /* Text color on hover */
}

/* Active state styles for the parent menu */
.vertipro-menu ul li.active > ul {
    display: block; /* Show submenu when active */
    transition: 0.2s linear;
}

/* Submenu toggle active state */
.vertipro-menu ul li.active > a .fa {
    transform: rotate(90deg); /* Rotate icon when submenu is open */
}
.vertipro-menu .toggle-children.open {
    transform: rotate(90deg); /* Rotate the icon when open */
}
/* Open submenu style */
.vertipro-menu ul ul.active {
    display: block;
    transition: 0.2s linear;
	padding-left: 10px !important;
}

/* Active parent background color when it has child items open */
.vertipro-menu ul li.active > a {
    background-color: var(--parent-hover-bg); /* Fixed background for active parent */
    color: var(--parent-hover-color); /* Fixed color for active parent */
    transition: 0.2s linear;
}

.parent-link.activv {
	background: var(--parent-hover-bg);
	color: var(--parent-hover-color);
}

/* Media Queries */
@media (min-width: 1024px) {
.vertipro-menu .close-sidebar,
.vertipro-menu .hamburger {
    display: none !important; /* Hide for larger screens */
}	
}

@media (max-width: 1023px) {
.vertipro-menu .hamburger i {
	font-size: 30px !important;
	color: #ffffff !important;
	padding: 10px;
}
.vertipro-menu .hamburger {
    display: none; /* Show hamburger on smaller screens */
    cursor: pointer;
    position: fixed;
    top: 0px; /* Position as needed */
    left: 0px; /* Position as needed */
    z-index: 99999; /* Make sure it's above other elements */
    background: #252525;
    padding: 5px;
    color: #ffffff; /* Hamburger icon color */
}

#sidebar-menul {
    position: fixed;
    top: 0;
    left: -350px; /* Initially hide the sidebar */
    width: 350px; /* Width of the sidebar */
    height: 100%;
    background-color: #fff; /* Background color */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5); /* Optional shadow */
    transition: left 0.3s ease; /* Animation for sliding */
    z-index: 99999; /* Make sure the sidebar is above other elements */
}

#sidebar-menul.visible {
    left: 0; /* Show the sidebar */
}

.vertipro-menu .close-sidebar {
    background: #252525;
    border: none;
    font-size: 25px; /* Adjust size as needed */
    color: #ffffff; /* Change color as needed */
    cursor: pointer;
    padding: 15px;
    text-align: left; /* Align text to the left */
    margin: 0px; /* Adjust margin as needed */
	display: none;
}
}

@media (max-width: 1023px) {
#sp-header nav.sp-megamenu-wrapper #offcanvas-toggler {
	display: block;
    cursor: pointer;
    z-index: 99999;
    background: #252525;
    padding: 15px;
	margin-right: -15px;
}
.burger-icon > span {
    background-color: #ffffff;  
    height: 4px; 
}
}