/* ===== Top Bar ===== */
#site-header .header-top {
    background-color: #222 !important; /* Dark top bar */
    padding: 5px 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #fff !important;
}

#site-header .header-top .header-top-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
}

#site-header .header-top .header-tagline {
    color: #fff !important;
}

#site-header .header-top .social-link i {
    font-size: 16px !important;
    color: #fff !important;
}


/* ===== Main Navigation ===== */
#site-header .header-main {
    background-color: #18191b !important;
    padding: 10px 0 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

#site-header .header-main .header-main-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#site-header #logo img {
    height: 60px !important;
    width: auto !important;
}

#site-header #mainmenu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 20px !important;
}

#site-header #mainmenu ul li a {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 16px !important;
    padding: 5px 10px !important;
    transition: color 0.3s ease !important;
}

#site-header #mainmenu ul li a:hover {
    color: #ffcc00 !important; /* Accent color on hover */
}

/* ===== Phone Info ===== */
#site-header .header-phone {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #fff !important;
    font-size: 16px !important;
}

#site-header .header-phone i {
    font-size: 24px !important;
    color: #ffcc00 !important; /* Accent color for the phone icon */
}

/* ===== Mobile Menu Button ===== */
#menu-btn {
    display: none !important;
    cursor: pointer !important;
    font-size: 24px !important;
    color: #fff !important;
}

/* ===== Desktop-Only Elements ===== */
.desktop-only {
    display: block !important;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
    
    /* Hide desktop-only items (logo and phone) on mobile */
    .desktop-only {
        display: none !important;
    }
    /* Show hamburger icon */
    #menu-btn {
        display: block !important;
    }
}