/* Search Button */
        .searchBoxTggler {
            background: transparent;
            
            padding: 5px 10px;
            border-radius: 5px;
        }
    
        .searchBoxTggler i {
            color: white;
        }
    
        /* Align navbar items properly */
        .vs-header .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
    
        .vs-header .d-flex {
            
            justify-content: space-between;
        }
    
        .main-menu {
            flex-grow: 1;
            text-align: center;
        }
    
        .main-menu ul {
            list-style: none;
            padding: 0;
            display: flex;
           
        }
    
        .main-menu ul li {
            white-space: nowrap; /* Prevents breaking into multiple lines */
        }
    
        .main-menu ul li a {
            text-decoration: none;
            color: white;
            font-weight: bold;
        }
    /* Default button styling */
/* Default button styling */
.custom-btn {
    background-color: white !important;
    color: black !important;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid transparent;
    position: relative;
    z-index: 2;
}

/* Hover effect - Force remove blue */
.custom-btn:hover, 
.custom-btn:focus, 
.custom-btn:active {
    background-color: #2c6b43 !important;  /* Set correct hover color */
    color: white !important;  /* Ensure text color changes */
    border-color: white !important; /* Ensures a clean border */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Remove any pseudo-element default styles */
.custom-btn::before, 
.custom-btn::after {
    background: none !important; /* Force remove any blue background */
}
/* Dropdown menu base */
.main-menu .sub-menu,
.main-menu .mega-menu {
    background-color: #fff; /* White background for dropdown */
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    flex-direction: column;
    min-width: 200px;
    padding: 10px 0;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Show on hover */
.main-menu li:hover > .sub-menu,
.main-menu li:hover > .mega-menu {
    display: flex;
}

/* Dropdown items */
.main-menu .sub-menu li,
.main-menu .mega-menu li ul li {
    width: 100%;
}

.main-menu .sub-menu li a,
.main-menu .mega-menu li ul li a {
    display: block;
    padding: 10px 20px;
    color: #2c6b43; /* Default text color */
    text-align: left;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Hover effect for dropdown links */
.main-menu .sub-menu li a:hover,
.main-menu .mega-menu li ul li a:hover {
    background-color: #2c6b43;
    color: #fff;
}

/* Mega menu columns layout */
.main-menu .mega-menu {
    flex-direction: row;
    gap: 20px;
    padding: 20px;
}

.main-menu .mega-menu > li > ul {
    flex-direction: column;
    display: flex;
    gap: 10px;
}
.vs-btn.style5 {
    border: 2px solid #2c6b43 !important; /* Green border */
    color: white !important; /* White text */
    position: relative;
    overflow: hidden;
    background-color: transparent; /* Keep original style if no background is used */
    display: inline-block;
}

/* Green outline for focus */
.vs-btn.style5:focus,
.vs-btn.style5:active {
    outline: 2px solid #2c6b43 !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

/* Fix pseudo-elements if used */
.vs-btn.style5::before,
.vs-btn.style5::after {
    background-color: #417b56 !important;
    border-color: #2c6b43 !important;
}

/* Green icon circle */
.vs-btn.style5 i {
    background-color: #2c6b43 !important;
    color: white !important;
    border-radius: 50%;
}

/* On hover */
.vs-btn.style5:hover {
    border-color: #245a39 !important;
}

/* Base button styling */
.vs-btn.style8 {
    background-color: #417b56 !important;  /* Green background */
    color: white !important;               /* White text */
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none !important;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid #2c6b43 !important;  /* Green border */
    position: relative;
    z-index: 2;
    transition: all 0.3s ease-in-out;
    width: 320px; 
}

/* Hover effect */
.vs-btn.style8:hover,
.vs-btn.style8:focus,
.vs-btn.style8:active {
    /* background-color: #245a39 !important;  Darker green on hover */
    /* color: white !important;
    border-color: #245a39 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); */
    background-color: antiquewhite;

}

/* Icon styling */
.vs-btn.style8 i {
    background-color: #2c6b43;
    color: white;
    border-radius: 50%;
    padding: 4px;
}

/* Remove any default outlines */
.vs-btn.style8:focus {
    outline: none !important;
}