/* === General Homepage Fixes === */
 .osahan-home-page {
    overflow-x: hidden; /* Prevents horizontal scrollbars */
}
.osahan-home-page img {
    max-width: 100%; /* Ensures images are responsive */
    height: auto;
}

/* Desktop Styles */
.navbar-nav .nav-link {
    color: #000 !important;
    transition: color 0.2s;
    font-weight: 600; /* Bolder text */
    font-size: 17px;  /* Larger font size */
    padding: 0.5rem 1rem; /* Adds nice spacing around links */
}

/* Premium animated hamburger button */
.custom-toggler.navbar-toggler {
    border: none;
    background: transparent !important;
    padding: 0.25rem 0;
    z-index: 1100; /* Keep button on top */
}
.custom-toggler .bar {
    display: block;
    width: 28px;
    height: 3px;
    margin: 6px auto;
    background-color: #333; /* Default bar color (for desktop) */
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
}

/* Mobile-Specific Styles (max-width: 767.98px) */
@media (max-width: 767.98px) {
    /* === NEW STYLES FOR DROPDOWN MENU === */

    /* 1. The top header bar */
    .navbar {
        /* background-color:rgb(51, 220, 56) !important; Example Green from image */
        padding: 0.5rem 1rem;
    }

    /* 2. The dropdown menu container */
    .navbar-collapse {
        background-color: #424242 !important; /* Dark Grey from image */
        border-bottom-left-radius: 10px;  /* Rounded bottom-left corner */
        border-bottom-right-radius: 10px; /* Rounded bottom-right corner */
    }

    /* 3. The hamburger button */
    .custom-toggler {
        background-color: #333 !important; /* Black background for the button */
        padding: 0.5rem;
        border-radius: 4px;
    }
    .custom-toggler .bar {
        background-color: #fff !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* 4. The links inside the dropdown */
    .navbar-nav {
        padding: 0.5rem 1rem; /* Add some padding inside the menu */
    }
    .navbar-nav .nav-link {
        color: #fff !important;
        font-size: 1.1rem !important; /* Reset font size for this style */
        font-weight: 400 !important; /* Reset font weight */
        padding: 0.75rem 0 !important; /* More vertical space */
    }
}


@media (max-width: 767.98px) {
    body.page-privacy-policy #header-template .custom-toggler,
    body.page-privacy-policy .custom-toggler,
    body.page-career #header-template .custom-toggler,
    body.page-career .custom-toggler,
    body.page-error #header-template .custom-toggler,
    body.page-error .custom-toggler,
    body.page-customer-error #header-template .custom-toggler,
    body.page-customer-error .custom-toggler,
    body.page-driver-error #header-template .custom-toggler,
    body.page-driver-error .custom-toggler {
        background-color: #fff !important;
    }
    body.page-privacy-policy #header-template .custom-toggler .bar,
    body.page-privacy-policy .custom-toggler .bar,
    body.page-career #header-template .custom-toggler .bar,
    body.page-career .custom-toggler .bar,
    body.page-error #header-template .custom-toggler .bar,
    body.page-error .custom-toggler .bar,
    body.page-customer-error #header-template .custom-toggler .bar,
    body.page-customer-error .custom-toggler .bar,
    body.page-driver-error #header-template .custom-toggler .bar,
    body.page-driver-error .custom-toggler .bar {
        background-color: #000 !important;
    }
}