@charset "UTF-8";
/* CSS Document */
/* Base Responsive Style Changes ON Services June 2024 7:37am */
.header-disable-fixed {
    background-color: transparent;
}

/* Main Navigation Background */
#mainMenu {
    background-color: transparent; /* Set background color for main navigation to transparent */
}

/* Logo settings for responsive */
@media (max-width: 768px) {
    #logo img[src="https://www.onservices.com/images/logo.png"] {
        display: none; /* Hide default logo */
    }
    #logo img[src="https://www.onservices.com/images/logo-sticky-dark.png"] {
        display: block; /* Show sticky logo */
    }
}

/* Additional settings for responsive navigation */
@media (max-width: 1200px) {
    #header {
        background: transparent; /* Ensure header background is transparent */
    }
    #mainMenu-trigger .lines, #mainMenu-trigger .x .lines::before, #mainMenu-trigger .x .lines::after {
        background-color: #FFF; /* Ensure trigger lines are white */
    }
    #mainMenu .dropdown-menu {
        background-color: #1d3f5a; /* Set dropdown menu background color */
    }
    #mainMenu ul li a {
        font-size: 16px; /* Adjust font size for navigation items */
        padding-left: 10px; /* Add padding before navigation text */
    }
}

/* Responsive font size adjustments for various breakpoints */
@media (max-width: 991px) {
    #mainMenu ul li a {
        font-size: 15px; /* Adjust font size for smaller screens */
    }
}

@media (max-width: 767px) {
    #mainMenu ul li a {
        font-size: 14px; /* Adjust font size for smaller screens */
    }
}

@media (max-width: 575px) {
    #mainMenu ul li a {
        font-size: 13px; /* Adjust font size for smallest screens */
    }
}

/* Ensure trigger button is properly styled */
#mainMenu-trigger a.lines-button {
    background-color: transparent; /* Ensure button background is transparent */
}

#mainMenu-trigger a.lines-button.x {
    background-color: transparent; /* Ensure button background is transparent */
}

#mainMenu-trigger .lines, #mainMenu-trigger .x .lines::before, #mainMenu-trigger .x .lines::after {
    background-color: #FFF; /* Ensure trigger lines are white */
}

/* Menu hover background color */
.menu-hover-background {
    background-color: #1d3f5a; /* Set background color for menu hover */
}

/* Specific settings for various device sizes */
@media (min-width: 992px) and (max-width: 1199px) {
    #mainMenu ul li a {
        font-size: 16px; /* Adjust font size for navigation items */
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #mainMenu ul li a {
        font-size: 15px; /* Adjust font size for navigation items */
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    #mainMenu ul li a {
        font-size: 14px; /* Adjust font size for navigation items */
    }
}

@media (max-width: 575px) {
    #mainMenu ul li a {
        font-size: 13px; /* Adjust font size for navigation items */
    }
}

/* Specific styles for iPad and similar devices */
@media (min-width: 768px) and (max-width: 1024px) {
    #mainMenu ul li a {
        font-size: 15px; /* Adjust font size for navigation items */
    }
}

/* Remove side colors in responsive settings */
@media (max-width: 1200px) {
    #mainMenu {
        background-color: #1d3f5a; /* Set background color for main menu in responsive */
        border-left: none; /* Remove left border color */
        border-right: none; /* Remove right border color */
    }
    .dropdown-menu .dropdown-menu {
        border-left: none; /* Remove left border color in dropdown */
        border-right: none; /* Remove right border color in dropdown */
    }
}

/* Ensure dropdown arrows are white */
#mainMenu .dropdown-toggle::after {
    color: #FFF; /* Set dropdown arrows to white */
}

/* Always show sticky logo in scroll */
@media (min-width: 768px) {
    #header.header-disable-fixed.header-transparent:not(.header-scrolled) #logo img[src="https://www.onservices.com/images/logo.png"] {
        display: none; /* Hide default logo when not scrolled */
    }
    #header.header-disable-fixed.header-transparent:not(.header-scrolled) #logo img[src="https://www.onservices.com/images/logo-sticky-dark.png"] {
        display: block; /* Show sticky logo when not scrolled */
    }
}

/* Remove dark grey border color */
body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
}