/* Common Navbar Styles for All Pages */

/* Compact header styles from index.php */
.main-header {
    padding: 0 !important;
    margin: 0 !important;
}
.header-sticky {
    padding: 0 !important;
    margin: 0 !important;
}
.main-header .navbar {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    margin: 0 !important;
    min-height: auto !important;
}
.navbar-brand {
    padding: 5px 0 !important;
    margin: 0 !important;
}
.navbar-brand img {
    max-height: 40px !important;
    margin: 0 !important;
}
.navbar-nav {
    margin: 0 !important;
}
.navbar-nav .nav-item {
    margin: 0 !important;
}
.navbar-nav .nav-link {
    padding: 8px 15px !important;
}
.navbar-toggler {
    padding: 4px 8px !important;
    margin: 0 !important;
}

/* Styles for the dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Adjust to align the menu correctly */
}

/* Additional styles for better appearance */
.dropdown-menu {
    transition: all 0.3s ease;
    min-width: 200px; /* Adjust width as needed */
}

/* Custom styles to maintain the navbar icon color */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* White hamburger icon */
    background-size: cover; /* Adjust the size as needed */
}

/* Align items to the left in the responsive menu */
@media (max-width: 991px) {
    /* Hide Bootstrap navbar toggler as we're using SlickNav */
    .navbar-toggler {
        display: none !important;
    }
    
    /* Show the responsive menu container */
    .responsive-menu {
        display: block !important;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    /* Hide desktop navigation */
    .navbar-collapse {
        display: none !important;
    }
    
    /* Adjust header layout for mobile */
    .main-header .navbar {
        position: relative;
    }
    
    /* Ensure logo stays visible and positioned correctly */
    .navbar-brand {
        z-index: 10;
        position: relative;
    }
    
    /* Style adjustments for mobile header */
    .header-sticky {
        background-color: #fff;
    }
    
    /* Ensure slicknav menu is properly positioned */
    .slicknav_menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 999;
    }
}