/* =========================================================
   MAXBLO NAVBAR
   Transparent over hero image
   → White after scrolling
========================================================= */


/* =========================================================
   MAXBLO BRAND COLORS
========================================================= */

:root {

    --maxblo-navy: #18235F;

    --maxblo-blue: #245DE8;

    --maxblo-royal: #3948D0;

    --maxblo-violet: #7045E8;

    --maxblo-purple: #8B5CF6;

    --maxblo-white: #FFFFFF;

    --maxblo-light: #F6F7FB;

    --maxblo-border: rgba(24, 35, 95, 0.10);

    --maxblo-gradient:
        linear-gradient(135deg,
            #245DE8 0%,
            #3948D0 48%,
            #7045E8 100%);
}


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

.mf-navbar,
.mf-navbar *,
.mf-navbar *::before,
.mf-navbar *::after {
    box-sizing: border-box;
}


.mf-navbar a {
    text-decoration: none;
}


.mf-navbar button {
    font-family: inherit;
}


/* =========================================================
   MAIN NAVBAR
   IMPORTANT:
   NO BACKGROUND
   Hero image behind this navbar remains visible.
========================================================= */

.mf-navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 99999;

    padding: 20px 0;

    /* Transparent */
    background: transparent;

    border-bottom:
        1px solid transparent;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    transition:
        background .45s ease,
        box-shadow .45s ease,
        padding .35s ease,
        border-color .45s ease,
        backdrop-filter .45s ease;
}


/* =========================================================
   SCROLLED NAVBAR
   WHITE / LIGHT
========================================================= */

.mf-navbar.scrolled {

    padding: 13px 0;

    background:
        rgba(255, 255, 255, 0.97);

    border-bottom:
        1px solid rgba(24, 35, 95, 0.08);

    box-shadow:
        0 10px 35px rgba(24, 35, 95, 0.10);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


/* =========================================================
   CONTAINER
========================================================= */

.mf-nav-container {

    width: min(92%, 1380px);

    min-height: 58px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


/* =========================================================
   MAIN LOGO
========================================================= */

.mf-logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    position: relative;

    z-index: 100001;
}


/* =========================================================
   LOGO IMAGE
========================================================= */

.mf-logo img {

    display: block;

    width: 185px;

    height: auto;

    transition:
        width .3s ease,
        opacity .25s ease,
        transform .25s ease;
}


/* =========================================================
   SCROLLED LOGO
========================================================= */

.mf-navbar.scrolled .mf-logo img {

    width: 175px;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.mf-nav-menu {

    display: flex;

    align-items: center;

    margin-left: auto;
}


/* =========================================================
   NAVIGATION LIST
========================================================= */

.mf-nav-links {

    display: flex;

    align-items: center;

    gap: 40px;

    margin: 0;

    padding: 0;

    list-style: none;
}


/* =========================================================
   NAVIGATION ITEMS
========================================================= */

.mf-nav-links>li {

    position: relative;
}


/* =========================================================
   NAVIGATION LINKS
   TOP:
   White because they sit over hero image
========================================================= */

.mf-nav-links>li>a,
.mf-services-toggle {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px 0;

    border: 0;

    background: transparent;

    color: #FFFFFF;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: .1px;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color .3s ease;
}


/* =========================================================
   TOP NAV HOVER
========================================================= */

.mf-nav-links>li>a:hover,
.mf-services-toggle:hover {

    color: var(--maxblo-purple);
}


/* =========================================================
   SCROLLED NAVIGATION
   Navy on white
========================================================= */

.mf-navbar.scrolled .mf-nav-links>li>a,

.mf-navbar.scrolled .mf-services-toggle {

    color: var(--maxblo-navy);
}


/* =========================================================
   SCROLLED NAV HOVER
========================================================= */

.mf-navbar.scrolled .mf-nav-links>li>a:hover,

.mf-navbar.scrolled .mf-services-toggle:hover {

    color: var(--maxblo-violet);
}


/* =========================================================
   NAVIGATION UNDERLINE
========================================================= */

.mf-nav-links>li>a:not(.mf-cta)::after,
.mf-services-toggle::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 1px;

    width: 0;

    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(90deg,
            var(--maxblo-blue),
            var(--maxblo-royal),
            var(--maxblo-violet));

    transition:
        width .3s ease;
}


.mf-nav-links>li>a:not(.mf-cta):hover::after,
.mf-services-toggle:hover::after {

    width: 100%;
}


/* =========================================================
   SERVICES ARROW
========================================================= */

.mf-arrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    line-height: 1;

    transition:
        transform .3s ease;
}


.mf-dropdown:hover .mf-arrow {

    transform: rotate(180deg);
}


.mf-dropdown.active .mf-arrow {

    transform: rotate(180deg);
}


/* =========================================================
   DESKTOP DROPDOWN
========================================================= */

.mf-dropdown-menu {

    position: absolute;

    top: calc(100% + 20px);

    left: 50%;

    width: 330px;

    margin: 0;

    padding: 9px;

    list-style: none;

    background:
        rgba(255, 255, 255, 0.98);

    border:
        1px solid rgba(24, 35, 95, 0.08);

    border-radius: 17px;

    box-shadow:
        0 25px 70px rgba(24, 35, 95, 0.16);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    opacity: 0;

    visibility: hidden;

    transform:
        translate(-50%, 12px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;
}


/* =========================================================
   DESKTOP DROPDOWN SHOW
========================================================= */

@media (min-width: 901px) {

    .mf-dropdown::after {

        content: "";

        position: absolute;

        left: 50%;

        top: 100%;

        width: 330px;

        height: 20px;

        transform:
            translateX(-50%);
    }

    .mf-dropdown:hover .mf-dropdown-menu {

        opacity: 1;

        visibility: visible;

        transform:
            translate(-50%, 0);
    }
}


/* =========================================================
   DROPDOWN ITEMS
========================================================= */

.mf-dropdown-menu li {

    width: 100%;
}


.mf-dropdown-menu a {

    display: flex;

    align-items: center;

    min-height: 47px;

    padding: 11px 15px;

    border-radius: 10px;

    color: var(--maxblo-navy);

    font-size: 13px;

    font-weight: 700;

    line-height: 1.3;

    transition:
        background .25s ease,
        color .25s ease,
        padding-left .25s ease;
}


/* =========================================================
   DROPDOWN HOVER
========================================================= */

.mf-dropdown-menu a:hover {

    color: var(--maxblo-violet);

    padding-left: 21px;

    background:
        linear-gradient(90deg,
            rgba(36, 93, 232, 0.08),
            rgba(112, 69, 232, 0.08));
}


/* =========================================================
   LET'S TALK CTA
========================================================= */

.mf-cta {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    gap: 11px;

    min-height: 52px;

    padding: 0 27px !important;

    border-radius: 100px;

    color: #FFFFFF !important;

    background:
        linear-gradient(135deg,
            #245DE8 0%,
            #3948D0 48%,
            #7045E8 100%);

    box-shadow:
        0 10px 30px rgba(57, 72, 208, 0.25);

    font-size: 15px !important;

    font-weight: 800 !important;

    letter-spacing: .1px;

    white-space: nowrap;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


/* Remove navbar underline from CTA */

.mf-cta::after {

    display: none !important;
}


/* =========================================================
   CTA HOVER
========================================================= */

.mf-cta:hover {

    color: #FFFFFF !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 38px rgba(112, 69, 232, 0.35);
}


.mf-cta-arrow {

    font-size: 17px;

    line-height: 1;
}


/* =========================================================
   MOBILE MENU TOGGLE
========================================================= */

.mf-menu-toggle {

    display: none;

    width: 47px;

    height: 47px;

    flex-shrink: 0;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

    padding: 0;

    border:
        1px solid rgba(255, 255, 255, 0.35);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.12);

    color: #FFFFFF;

    cursor: pointer;

    position: relative;

    z-index: 100002;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;
}


/* =========================================================
   HAMBURGER LINES
========================================================= */

.mf-menu-toggle span {

    display: block;

    width: 19px;

    height: 2px;

    border-radius: 20px;

    background: currentColor;

    transition:
        transform .3s ease,
        opacity .3s ease;
}


/* =========================================================
   SCROLLED MOBILE TOGGLE
========================================================= */

.mf-navbar.scrolled .mf-menu-toggle {

    background:
        var(--maxblo-navy);

    border-color:
        var(--maxblo-navy);

    color:
        #FFFFFF;
}


/* =========================================================
   MOBILE DRAWER HEADER
========================================================= */

.mf-mobile-header {

    display: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .mf-nav-container {

        width: 94%;

        gap: 25px;
    }


    .mf-logo img {

        width: 170px;
    }


    .mf-navbar.scrolled .mf-logo img {

        width: 160px;
    }


    .mf-nav-links {

        gap: 27px;
    }


    .mf-nav-links>li>a,
    .mf-services-toggle {

        font-size: 15px;
    }


    .mf-cta {

        padding:
            0 22px !important;

        font-size:
            14px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {


    /* -----------------------------------------------------
       NAVBAR
    ----------------------------------------------------- */

    .mf-navbar {

        padding:
            12px 0;
    }


    .mf-navbar.scrolled {

        padding:
            10px 0;
    }


    /* -----------------------------------------------------
       CONTAINER
    ----------------------------------------------------- */

    .mf-nav-container {

        width:
            calc(100% - 32px);

        min-height:
            52px;

        gap:
            15px;
    }


    /* -----------------------------------------------------
       MAIN LOGO
    ----------------------------------------------------- */

    .mf-logo img {

        width:
            150px;
    }


    .mf-navbar.scrolled .mf-logo img {

        width:
            145px;
    }


    /* -----------------------------------------------------
       HAMBURGER
    ----------------------------------------------------- */

    .mf-menu-toggle {

        display:
            flex;
    }


    /* -----------------------------------------------------
       MOBILE NAV DRAWER
    ----------------------------------------------------- */

    .mf-nav-menu {

        position: fixed;

        top: 0;

        right: -100%;

        width:
            min(400px, 90vw);

        height: 100dvh;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        margin: 0;

        padding:
            0 28px 30px;

        background:
            rgba(255, 255, 255, 0.985);

        box-shadow:
            -20px 0 70px rgba(24, 35, 95, 0.18);

        backdrop-filter:
            blur(25px);

        -webkit-backdrop-filter:
            blur(25px);

        overflow-x: hidden;

        overflow-y: auto;

        transition:
            right .42s cubic-bezier(.77, 0, .18, 1);

        z-index: 100001;
    }


    .mf-nav-menu.active {

        right: 0;
    }


    /* -----------------------------------------------------
       MOBILE HEADER
    ----------------------------------------------------- */

    .mf-mobile-header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        width: 100%;

        min-height: 90px;

        flex-shrink: 0;

        border-bottom:
            1px solid rgba(24, 35, 95, 0.08);
    }


    /* -----------------------------------------------------
       MOBILE LOGO
    ----------------------------------------------------- */

    .mf-mobile-logo {

        display: flex;

        align-items: center;
    }


    .mf-mobile-logo img {

        display: block;

        width:
            150px;

        height: auto;
    }


    /* -----------------------------------------------------
       CLOSE BUTTON
    ----------------------------------------------------- */

    .mf-close {

        position: relative;

        width: 43px;

        height: 43px;

        flex-shrink: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 0;

        border:
            1px solid rgba(24, 35, 95, 0.12);

        border-radius: 50%;

        background:
            var(--maxblo-light);

        color:
            var(--maxblo-navy);

        cursor: pointer;

        transition:
            background .3s ease,
            transform .3s ease,
            border-color .3s ease;
    }


    .mf-close span {

        position: absolute;

        width: 18px;

        height: 2px;

        border-radius: 20px;

        background:
            currentColor;
    }


    .mf-close span:first-child {

        transform:
            rotate(45deg);
    }


    .mf-close span:last-child {

        transform:
            rotate(-45deg);
    }


    .mf-close:hover {

        color:
            #FFFFFF;

        background:
            var(--maxblo-gradient);

        border-color:
            transparent;

        transform:
            rotate(90deg);
    }


    /* -----------------------------------------------------
       MOBILE NAV LINKS
    ----------------------------------------------------- */

    .mf-nav-links {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        width: 100%;

        gap: 0;

        margin: 0;

        padding: 0;

        list-style: none;
    }


    .mf-nav-links>li {

        width: 100%;

        border-bottom:
            1px solid rgba(24, 35, 95, 0.08);
    }


    .mf-nav-links>li>a,
    .mf-services-toggle {

        width: 100%;

        min-height: 65px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 16px 0;

        color:
            var(--maxblo-navy) !important;

        font-size: 17px;

        font-weight: 700;

        line-height: 1.2;
    }


    .mf-nav-links>li>a:hover,
    .mf-services-toggle:hover {

        color:
            var(--maxblo-blue) !important;
    }


    /* Remove desktop underline */

    .mf-nav-links>li>a::after,
    .mf-services-toggle::after {

        display:
            none !important;
    }


    /* -----------------------------------------------------
       SERVICES ARROW
    ----------------------------------------------------- */

    .mf-arrow {

        font-size:
            12px;

        margin-left:
            auto;
    }


    /* -----------------------------------------------------
       MOBILE DROPDOWN
    ----------------------------------------------------- */

    .mf-dropdown-menu {

        position: static;

        width: 100%;

        display: none;

        margin:
            0 0 12px;

        padding:
            5px;

        background:
            var(--maxblo-light);

        border: 0;

        border-radius:
            13px;

        box-shadow:
            none;

        opacity: 1;

        visibility: visible;

        transform:
            none !important;
    }


    .mf-dropdown.active .mf-dropdown-menu {

        display:
            block;
    }


    .mf-dropdown-menu li {

        width: 100%;

        border: 0;
    }


    .mf-dropdown-menu a {

        display: flex;

        align-items: center;

        min-height: 47px;

        padding:
            10px 13px;

        color:
            var(--maxblo-navy);

        font-size:
            13px;

        font-weight:
            600;

        line-height:
            1.3;

        border-radius:
            9px;
    }


    .mf-dropdown-menu a:hover {

        color:
            var(--maxblo-violet);

        padding-left:
            18px;

        background:
            rgba(36, 93, 232, 0.08);
    }


    /* -----------------------------------------------------
       MOBILE CTA
    ----------------------------------------------------- */

    .mf-cta-item {

        border-bottom:
            0 !important;

        padding-top:
            18px;
    }


    .mf-nav-links .mf-cta {

        display:
            flex !important;

        align-items:
            center;

        justify-content:
            center;

        width:
            100%;

        min-height:
            56px;

        padding:
            0 22px !important;

        font-size:
            15px !important;

        border-radius:
            100px;
    }


    /* -----------------------------------------------------
       BODY LOCK
    ----------------------------------------------------- */

    body.mf-menu-open {

        overflow:
            hidden;
    }


    /* -----------------------------------------------------
       HIDE MAIN LOGO WHEN DRAWER OPEN
    ----------------------------------------------------- */

    .mf-navbar.menu-open>.mf-nav-container>.mf-logo {

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;
    }


    /* -----------------------------------------------------
       HIDE HAMBURGER WHEN DRAWER OPEN
    ----------------------------------------------------- */

    .mf-navbar.menu-open .mf-menu-toggle {

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

    .mf-nav-container {

        width:
            calc(100% - 26px);
    }


    .mf-logo img {

        width:
            140px;
    }


    .mf-navbar.scrolled .mf-logo img {

        width:
            135px;
    }


    .mf-nav-menu {

        width:
            92vw;

        padding-left:
            22px;

        padding-right:
            22px;
    }


    .mf-mobile-header {

        min-height:
            82px;
    }


    .mf-mobile-logo img {

        width:
            140px;
    }


    .mf-nav-links>li>a,
    .mf-services-toggle {

        min-height:
            62px;

        font-size:
            16px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .mf-nav-menu {

        width:
            94vw;
    }


    .mf-logo img {

        width:
            130px;
    }


    .mf-mobile-logo img {

        width:
            130px;
    }


    .mf-menu-toggle {

        width:
            43px;

        height:
            43px;
    }


    .mf-close {

        width:
            40px;

        height:
            40px;
    }


    .mf-nav-links>li>a,
    .mf-services-toggle {

        font-size:
            15px;
    }
}


/* =========================================================
   SCROLLED CTA
   MAXBLO BLUE → VIOLET
========================================================= */

.mf-navbar.scrolled .mf-nav-links>li>a.mf-cta {

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    min-height:
        52px;

    padding:
        0 27px !important;

    color:
        #FFFFFF !important;

    background:
        linear-gradient(135deg,
            #245DE8 0%,
            #3948D0 48%,
            #7045E8 100%) !important;

    border:
        0 !important;

    border-radius:
        100px;

    box-shadow:
        0 10px 30px rgba(57, 72, 208, 0.25);

    font-size:
        15px !important;

    font-weight:
        800 !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        none;
}


/* =========================================================
   REMOVE CTA UNDERLINE
========================================================= */

.mf-navbar.scrolled .mf-nav-links>li>a.mf-cta::after {

    display:
        none !important;
}


/* =========================================================
   SCROLLED CTA HOVER
========================================================= */

.mf-navbar.scrolled .mf-nav-links>li>a.mf-cta:hover {

    color:
        #FFFFFF !important;

    background:
        linear-gradient(135deg,
            #245DE8 0%,
            #3948D0 48%,
            #7045E8 100%) !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 38px rgba(112, 69, 232, 0.35);
}


/* =========================================================
   CTA ARROW
========================================================= */

.mf-navbar.scrolled .mf-nav-links>li>a.mf-cta .mf-cta-arrow {

    color:
        #FFFFFF !important;
}

/* =========================================================
   MAXBLO FINAL NAVBAR OVERRIDES
   IMPORTANT:
   This section must remain at the VERY END of the CSS file.
========================================================= */


/* =========================================================
   TOP STATE
   Transparent over hero image
========================================================= */

header.mf-navbar {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;

    z-index: 99999 !important;

    background: transparent !important;

    border-bottom: 1px solid transparent !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    transition:
        background 0.45s ease,
        box-shadow 0.45s ease,
        padding 0.35s ease,
        border-color 0.45s ease !important;
}


/* =========================================================
   TOP NAV TEXT
   White over hero image
========================================================= */

header.mf-navbar:not(.scrolled) .mf-nav-links>li>a,

header.mf-navbar:not(.scrolled) .mf-services-toggle {

    color: #FFFFFF !important;

    opacity: 1 !important;

    visibility: visible !important;
}


/* TOP HOVER */

header.mf-navbar:not(.scrolled) .mf-nav-links>li>a:hover,

header.mf-navbar:not(.scrolled) .mf-services-toggle:hover {

    color: #8B5CF6 !important;
}


/* =========================================================
   SCROLLED STATE
   WHITE NAVBAR
========================================================= */

header.mf-navbar.scrolled {

    background:
        rgba(255, 255, 255, 0.98) !important;

    border-bottom:
        1px solid rgba(24, 35, 95, 0.08) !important;

    box-shadow:
        0 10px 35px rgba(24, 35, 95, 0.10) !important;

    backdrop-filter:
        blur(20px) !important;

    -webkit-backdrop-filter:
        blur(20px) !important;
}


/* =========================================================
   SCROLLED NAVIGATION TEXT
========================================================= */

header.mf-navbar.scrolled .mf-nav-links>li>a,

header.mf-navbar.scrolled .mf-services-toggle {

    color: #18235F !important;

    opacity: 1 !important;

    visibility: visible !important;

    display: flex !important;
}


/* SCROLLED HOVER */

header.mf-navbar.scrolled .mf-nav-links>li>a:hover,

header.mf-navbar.scrolled .mf-services-toggle:hover {

    color: #7045E8 !important;
}


/* =========================================================
   NAVIGATION UNDERLINE
========================================================= */

header.mf-navbar .mf-nav-links>li>a:not(.mf-cta)::after,

header.mf-navbar .mf-services-toggle::after {

    background:
        linear-gradient(90deg,
            #245DE8 0%,
            #3948D0 50%,
            #7045E8 100%) !important;
}


/* =========================================================
   DROPDOWN
========================================================= */

header.mf-navbar .mf-dropdown-menu {

    background:
        rgba(255, 255, 255, 0.99) !important;

    border:
        1px solid rgba(24, 35, 95, 0.08) !important;

    box-shadow:
        0 25px 70px rgba(24, 35, 95, 0.16) !important;
}


/* Dropdown text */

header.mf-navbar .mf-dropdown-menu a {

    color: #18235F !important;

    opacity: 1 !important;

    visibility: visible !important;
}


/* Dropdown hover */

header.mf-navbar .mf-dropdown-menu a:hover {

    color: #7045E8 !important;

    background:
        linear-gradient(90deg,
            rgba(36, 93, 232, 0.08),
            rgba(112, 69, 232, 0.08)) !important;
}


/* =========================================================
   CTA
   FORCE MAXBLO GRADIENT
========================================================= */

header.mf-navbar .mf-nav-links>li>a.mf-cta,

header.mf-navbar .mf-nav-links .mf-cta {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 10px !important;

    min-height: 52px !important;

    padding:
        0 27px !important;

    border: 0 !important;

    border-radius: 100px !important;

    color: #FFFFFF !important;

    background:
        linear-gradient(135deg,
            #245DE8 0%,
            #3948D0 48%,
            #7045E8 100%) !important;

    box-shadow:
        0 10px 30px rgba(57, 72, 208, 0.25) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-size: 15px !important;

    font-weight: 800 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    transform: none !important;
}


/* =========================================================
   CTA TEXT
   Force it to remain visible
========================================================= */

header.mf-navbar .mf-nav-links>li>a.mf-cta span,

header.mf-navbar .mf-nav-links .mf-cta span {

    color: #FFFFFF !important;

    opacity: 1 !important;

    visibility: visible !important;
}


/* =========================================================
   CTA ARROW
========================================================= */

header.mf-navbar .mf-cta .mf-cta-arrow {

    color: #FFFFFF !important;

    opacity: 1 !important;

    visibility: visible !important;
}


/* =========================================================
   CTA HOVER
========================================================= */

header.mf-navbar .mf-nav-links>li>a.mf-cta:hover,

header.mf-navbar .mf-nav-links .mf-cta:hover {

    color: #FFFFFF !important;

    background:
        linear-gradient(135deg,
            #245DE8 0%,
            #3948D0 48%,
            #7045E8 100%) !important;

    transform:
        translateY(-2px) !important;

    box-shadow:
        0 15px 38px rgba(112, 69, 232, 0.35) !important;
}


/* =========================================================
   CTA REMOVE UNDERLINE
========================================================= */

header.mf-navbar .mf-nav-links>li>a.mf-cta::after {

    display: none !important;

    width: 0 !important;
}


/* =========================================================
   LOGO
========================================================= */

header.mf-navbar .mf-logo img {

    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;

    height: auto !important;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

header.mf-navbar:not(.scrolled) .mf-menu-toggle {

    color: #FFFFFF !important;

    border-color:
        rgba(255, 255, 255, 0.35) !important;

    background:
        rgba(255, 255, 255, 0.12) !important;
}


header.mf-navbar.scrolled .mf-menu-toggle {

    color: #FFFFFF !important;

    background:
        #18235F !important;

    border-color:
        #18235F !important;
}


/* =========================================================
   MOBILE DRAWER
========================================================= */

@media (max-width: 900px) {

    header.mf-navbar .mf-nav-menu {

        background:
            rgba(255, 255, 255, 0.99) !important;
    }


    header.mf-navbar .mf-nav-links>li>a,

    header.mf-navbar .mf-services-toggle {

        color:
            #18235F !important;
    }


    header.mf-navbar .mf-nav-links>li>a:hover,

    header.mf-navbar .mf-services-toggle:hover {

        color:
            #245DE8 !important;
    }


    header.mf-navbar .mf-dropdown-menu {

        background:
            #F6F7FB !important;
    }


    header.mf-navbar .mf-dropdown-menu a {

        color:
            #18235F !important;
    }


    header.mf-navbar .mf-dropdown-menu a:hover {

        color:
            #7045E8 !important;

        background:
            rgba(36, 93, 232, 0.08) !important;
    }


    header.mf-navbar .mf-nav-links .mf-cta {

        color:
            #FFFFFF !important;

        background:
            linear-gradient(135deg,
                #245DE8 0%,
                #3948D0 48%,
                #7045E8 100%) !important;
    }


    header.mf-navbar .mf-nav-links .mf-cta span {

        color:
            #FFFFFF !important;
    }

}

/* =========================================================
   MAXBLO — FINAL NAVIGATION VISIBILITY FIX
   MUST BE AT THE VERY END OF maxblo-ai.css
========================================================= */


/* =========================================================
   DESKTOP NAVIGATION CONTAINER
========================================================= */

@media (min-width: 901px) {

    header.mf-navbar .mf-nav-menu {

        display: flex !important;

        align-items: center !important;

        justify-content: flex-end !important;

        margin-left: auto !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        position: static !important;

        width: auto !important;

        height: auto !important;

        overflow: visible !important;
    }


    /* =====================================================
       NAVIGATION UL
    ===================================================== */

    header.mf-navbar .mf-nav-links {

        display: flex !important;

        align-items: center !important;

        justify-content: flex-end !important;

        gap: 34px !important;

        width: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        list-style: none !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;
    }


    /* =====================================================
       NAVIGATION LI
    ===================================================== */

    header.mf-navbar .mf-nav-links>li {

        display: block !important;

        position: relative !important;

        width: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;
    }


    /* =====================================================
       NAVIGATION LINKS
    ===================================================== */

    header.mf-navbar .mf-nav-links>li>a:not(.mf-cta),

    header.mf-navbar .mf-nav-links>li>button.mf-services-toggle {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: auto !important;

        height: auto !important;

        min-height: 42px !important;

        margin: 0 !important;

        padding: 10px 0 !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        text-indent: 0 !important;

        overflow: visible !important;

        color: #18235F !important;

        background: transparent !important;

        border: 0 !important;

        font-size: 15px !important;

        font-weight: 700 !important;

        line-height: 1.2 !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       TOP OF PAGE
       WHITE TEXT OVER HERO IMAGE
    ===================================================== */

    header.mf-navbar:not(.scrolled) .mf-nav-links>li>a:not(.mf-cta),

    header.mf-navbar:not(.scrolled) .mf-nav-links>li>button.mf-services-toggle {

        color: #FFFFFF !important;
    }


    /* =====================================================
       TOP HOVER
    ===================================================== */

    header.mf-navbar:not(.scrolled) .mf-nav-links>li>a:not(.mf-cta):hover,

    header.mf-navbar:not(.scrolled) .mf-nav-links>li>button.mf-services-toggle:hover {

        color: #8B5CF6 !important;
    }


    /* =====================================================
       SCROLLED STATE
       NAVY TEXT ON WHITE
    ===================================================== */

    header.mf-navbar.scrolled .mf-nav-links>li>a:not(.mf-cta),

    header.mf-navbar.scrolled .mf-nav-links>li>button.mf-services-toggle {

        color: #18235F !important;

        opacity: 1 !important;

        visibility: visible !important;
    }


    /* =====================================================
       SCROLLED HOVER
    ===================================================== */

    header.mf-navbar.scrolled .mf-nav-links>li>a:not(.mf-cta):hover,

    header.mf-navbar.scrolled .mf-nav-links>li>button.mf-services-toggle:hover {

        color: #7045E8 !important;
    }


    /* =====================================================
       CTA
    ===================================================== */

    header.mf-navbar .mf-nav-links>li.mf-cta-item {

        display: block !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        margin-left: 4px !important;
    }


    header.mf-navbar .mf-nav-links>li>a.mf-cta {

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: auto !important;

        min-width: 145px !important;

        min-height: 52px !important;

        padding: 0 25px !important;

        margin: 0 !important;

        color: #FFFFFF !important;

        background:
            linear-gradient(135deg,
                #245DE8 0%,
                #3948D0 48%,
                #7045E8 100%) !important;

        border: 0 !important;

        border-radius: 100px !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        font-size: 15px !important;

        font-weight: 800 !important;

        line-height: 1 !important;

        white-space: nowrap !important;

        box-shadow:
            0 10px 30px rgba(57, 72, 208, 0.25) !important;
    }


    /* =====================================================
       CTA TEXT
    ===================================================== */

    header.mf-navbar .mf-nav-links>li>a.mf-cta span {

        display: inline-block !important;

        color: #FFFFFF !important;

        opacity: 1 !important;

        visibility: visible !important;
    }


    /* =====================================================
       CTA ARROW
    ===================================================== */

    header.mf-navbar .mf-nav-links>li>a.mf-cta .mf-cta-arrow {

        display: inline-block !important;

        color: #FFFFFF !important;

        opacity: 1 !important;

        visibility: visible !important;
    }


    /* =====================================================
       REMOVE CTA UNDERLINE
    ===================================================== */

    header.mf-navbar .mf-nav-links>li>a.mf-cta::after {

        display: none !important;
    }

}

/* =========================================================
   MOBILE NAVIGATION
========================================================= */

@media (max-width: 900px) {

    header.mf-navbar .mf-nav-menu {

        opacity: 1 !important;

        visibility: visible !important;
    }


    header.mf-navbar .mf-nav-links {

        opacity: 1 !important;

        visibility: visible !important;
    }


    header.mf-navbar .mf-nav-links>li {

        opacity: 1 !important;

        visibility: visible !important;
    }


    header.mf-navbar .mf-nav-links>li>a,

    header.mf-navbar .mf-nav-links>li>button.mf-services-toggle {

        display: flex !important;

        opacity: 1 !important;

        visibility: visible !important;

        color: #18235F !important;
    }

}

/* =========================================================
   MAXBLO — FINAL NAVBAR FIX
   KEEP THIS AT THE VERY END
========================================================= */


/* =========================================================
   DESKTOP NAVBAR
========================================================= */

@media (min-width: 901px) {

    header.mf-navbar .mf-nav-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }


    header.mf-navbar .mf-logo {
        display: flex !important;
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }


    header.mf-navbar .mf-logo img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
    }


    /* NAVIGATION */

    header.mf-navbar .mf-nav-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        position: static !important;

        width: auto !important;
        height: auto !important;

        margin-left: auto !important;

        padding: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;

        overflow: visible !important;
    }


    header.mf-navbar .mf-nav-links {
        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;
        justify-content: flex-end !important;

        gap: 34px !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    header.mf-navbar .mf-nav-links>li {
        display: block !important;

        position: relative !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* =====================================================
       NAVIGATION TEXT
    ===================================================== */

    header.mf-navbar .mf-nav-links>li>a:not(.mf-cta),
    header.mf-navbar .mf-services-toggle {

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;

        min-height: 42px !important;

        margin: 0 !important;
        padding: 10px 0 !important;

        border: 0 !important;

        background: transparent !important;

        font-family: inherit !important;

        font-size: 16px !important;

        font-weight: 700 !important;

        line-height: 1.2 !important;

        letter-spacing: 0 !important;

        white-space: nowrap !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }


    /* =====================================================
       TOP OF PAGE
       WHITE TEXT
    ===================================================== */

    header.mf-navbar:not(.scrolled) .mf-nav-links>li>a:not(.mf-cta),

    header.mf-navbar:not(.scrolled) .mf-services-toggle {

        color: #FFFFFF !important;
    }


    /* =====================================================
       SCROLLED
       NAVY TEXT
    ===================================================== */

    header.mf-navbar.scrolled .mf-nav-links>li>a:not(.mf-cta),

    header.mf-navbar.scrolled .mf-services-toggle {

        color: #18235F !important;
    }


    /* =====================================================
       TOP HOVER
    ===================================================== */

    header.mf-navbar:not(.scrolled) .mf-nav-links>li>a:not(.mf-cta):hover,

    header.mf-navbar:not(.scrolled) .mf-services-toggle:hover {

        color: #8B5CF6 !important;
    }


    /* =====================================================
       SCROLL HOVER
    ===================================================== */

    header.mf-navbar.scrolled .mf-nav-links>li>a:not(.mf-cta):hover,

    header.mf-navbar.scrolled .mf-services-toggle:hover {

        color: #7045E8 !important;
    }


    /* =====================================================
       CTA
    ===================================================== */

    header.mf-navbar .mf-nav-links>li.mf-cta-item {

        display: block !important;

        margin-left: 4px !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    header.mf-navbar .mf-nav-links>li>a.mf-cta {

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        min-width: 145px !important;
        min-height: 52px !important;

        padding: 0 25px !important;

        margin: 0 !important;

        border: 0 !important;
        border-radius: 100px !important;

        background:
            linear-gradient(135deg,
                #245DE8 0%,
                #3948D0 48%,
                #7045E8 100%) !important;

        color: #FFFFFF !important;

        font-size: 15px !important;
        font-weight: 800 !important;

        line-height: 1 !important;

        white-space: nowrap !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;

        box-shadow:
            0 10px 30px rgba(57, 72, 208, 0.25) !important;
    }


    header.mf-navbar .mf-cta span,
    header.mf-navbar .mf-cta .mf-cta-arrow {

        color: #FFFFFF !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* CTA HOVER */

    header.mf-navbar .mf-cta:hover {

        color: #FFFFFF !important;

        transform:
            translateY(-2px) !important;

        box-shadow:
            0 15px 38px rgba(112, 69, 232, 0.35) !important;
    }


    /* REMOVE CTA UNDERLINE */

    header.mf-navbar .mf-nav-links>li>a.mf-cta::after {

        display: none !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    header.mf-navbar .mf-nav-menu {

        opacity: 1 !important;
        visibility: visible !important;
    }


    header.mf-navbar .mf-nav-links {

        opacity: 1 !important;
        visibility: visible !important;
    }


    header.mf-navbar .mf-nav-links>li {

        opacity: 1 !important;
        visibility: visible !important;
    }


    header.mf-navbar .mf-nav-links>li>a,
    header.mf-navbar .mf-services-toggle {

        opacity: 1 !important;
        visibility: visible !important;

        color: #18235F !important;
    }


    header.mf-navbar .mf-nav-links>li>a:hover,

    header.mf-navbar .mf-services-toggle:hover {

        color: #245DE8 !important;
    }

}