.custom_logo_bg {
    background-image: url('/images/your-image.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* #sp-logo {
	background-image: url('/images/blue.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
	height: 100px;
} */

#sp-header {
    background-color: rgba(0, 112, 182) !important;
    height: 150px !important;
	background-image: url('/images/logo-bg-pattern.png'); /* Replace with your image link */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;    /* Or "contain" depending on your image */
    padding: 15px 25px;        /* Spacing around the logo so the background is visible */
    display: inline-block;     /* Keeps the background confined strictly to the logo */
}
#sp-header.header-sticky {
    background-color: rgba(0, 112, 182) !important;
}

.sp-megamenu-parent > li > a {
    color: #ffffff !important;
}
.sp-megamenu-parent > li.active > a,  .sp-megamenu-parent > li:hover > a { color: #000000 !important; }

.sp-megamenu-parent .sp-dropdown .sp-menu-heading > a:hover {
    color: #000000 !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a { color: #000000 !important; } 
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover { color: #056fb7 !important; }

/* Target every type of element inside .sp-menu-heading */
.sp-megamenu-parent .sp-menu-heading,
.sp-megamenu-parent .sp-dropdown .sp-menu-heading,
span.sp-group-title.sp-menu-heading,
.sp-megamenu-parent .sp-dropdown li.sp-menu-heading > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-heading > span {
    color: #ffffff !important; /* Change to your preferred hex color */
}