/* ================= HEADER ================== */

/* Header color */
.bg-header {
    background-color: #4481D1 !important;
    color: #fff !important;
}

/* Optionally center the header-center column (non-menu content) */
.bg-header .col.text-center {
    text-align: center;
}

/* Center the desktop menu (and ONLY on large screens) */
@media (min-width: 992px) {
    .bg-header .megamenu.level0 {
        display: flex !important;
        justify-content: center !important;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
        width: auto;
    }
}

/* Menu item hover/active state: standard blue background, light blue text */
.bg-header .megamenu.level0 > li > a:hover,
.bg-header .megamenu.level0 > li.active > a,
.bg-header .megamenu.level0 > li:hover > a,
.bg-header .megamenu.level0 > li.open > a {
    background: #4481D1 !important;
    color: #a2ffff !important;
    text-decoration: none !important;
}
.bg-header .megamenu.level0 > li > a:hover .menu-title,
.bg-header .megamenu.level0 > li.active > a .menu-title,
.bg-header .megamenu.level0 > li:hover > a .menu-title,
.bg-header .megamenu.level0 > li.open > a .menu-title {
    color: #a2ffff !important;
}

/* Optional: Submenu (dropdown) styling */
.bg-header .megamenu.level1 {
    background: #4481D1;
}
.bg-header .megamenu.level1 a {
    color: #fff !important;
}
.bg-header .megamenu.level1 a:hover {
    background: #a2ffff !important;
    color: #4481D1 !important;
}
body .bg-header .col {
    background: transparent !important;
}

/* ================ FOOTER TOP =================== */
.footer-top {
    background: #a2ffff;  /* Lighter blue or your choice */
    color: #244075;
    /* More padding, border, etc. as needed */
}


/* ================ FOOTER BOTTOM=================== */
.bg-footer {
    background-color: #4481D1 !important;
    color: #fff !important;
    text-decoration: none !important;
    width: 100%;
    padding: 0;
    border: 0;
}

/* Boxed content for footer (matches Bootstrap .container) */
.bg-footer > .container {
    max-width: 1200px !important;  /* Adjust to your site width */
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box;
}

/* Three columns, aligned left, center, right */
.bg-footer .row {
    display: flex;
    align-items: center;
    width: 100%;
}
.bg-footer .col {
    display: flex;
    align-items: center;
    min-height: 60px;    /* Adjust for footer height if needed */
    padding: 0.5rem 0;
}

/* Align columns */
.bg-footer .col:nth-child(1) { justify-content: flex-start; }
.bg-footer .col:nth-child(2) { justify-content: center;    }
.bg-footer .col:nth-child(3) { justify-content: flex-end;  }

/* Responsive stacking on small screens */
@media (max-width: 576px) {
    .bg-footer .row { flex-direction: column; text-align: center; }
    .bg-footer .col { justify-content: center !important; margin-bottom: 0.5rem; }
    .bg-footer .col:last-child { margin-bottom: 0; }
}

/* Footer link styling */
.bg-footer a {
    color: #fff !important;
    text-decoration: underline;
    transition: color 0.2s;
}
.bg-footer a:hover {
    color: #a2ffff !important;
    text-decoration: underline;
}

@media (min-width: 992px) {
    .bg-header .col.text-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* Optional: Prevent menu from stretching full width */
    .bg-header .col.text-center > * {
        width: auto !important;
        max-width: 100%;
    }
}