/* =========================================================
   MAXBLO — HOME / HERO CSS
   Light premium IT & Digital Marketing direction
   Theme: #18235F + #245DE8 + #7045E8
   Keeps existing HTML / JS class names
========================================================= */

/* =========================================================
   ROOT
========================================================= */

:root {
    --maxblo-navy: #18235F;
    --maxblo-blue: #245DE8;
    --maxblo-indigo: #3948D0;
    --maxblo-purple: #7045E8;
    --maxblo-violet: #8B5CF6;

    --maxblo-ink: #10152D;
    --maxblo-muted: #667085;
    --maxblo-soft: #F5F7FC;
    --maxblo-line: rgba(24, 35, 95, .10);
    --maxblo-white: #FFFFFF;

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

    --maxblo-shadow:
        0 24px 70px rgba(24, 35, 95, .16);

    --maxblo-ease: cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   HERO
========================================================= */

.mf-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 720px;
    overflow: hidden;

    background: #F7F9FD;
    color: var(--maxblo-ink);
}


/* =========================================================
   SLIDES
========================================================= */

.mf-slides {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.mf-slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    transform: scale(1.045);

    transition:
        opacity 1s ease,
        visibility 1s ease,
        transform 8s var(--maxblo-ease);
}

.mf-slide.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}


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

.mf-slide-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.01);

    transition:
        transform 8s var(--maxblo-ease),
        filter 1s ease;
}

.mf-slide.active .mf-slide-image {
    transform: scale(1);
}


/* =========================================================
   LIGHT PREMIUM IMAGE TREATMENT

   The image remains the visual hero.
   Text area receives a soft white gradient instead
   of the old dark green/cyan overlay.
========================================================= */

.mf-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

}

.mf-overlay::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 72% 25%,
            rgba(112, 69, 232, .16),
            transparent 27%),
        radial-gradient(circle at 82% 70%,
            rgba(36, 93, 232, .12),
            transparent 30%);

    pointer-events: none;
}



/* =========================================================
   CONTENT
========================================================= */

.mf-slide-content {
    position: relative;
    z-index: 5;

    width: min(90%, 1280px);
    height: 100%;

    margin: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding-top: 70px;
}


/* =========================================================
   EYEBROW
========================================================= */

.mf-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    width: fit-content;

    margin-bottom: 24px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.8px;

    color: var(--maxblo-navy);

    text-transform: uppercase;

    animation:
        mfTextUp .9s var(--maxblo-ease) both;
}

.mf-eyebrow span {
    width: 38px;
    height: 2px;

    border-radius: 10px;

    background: var(--maxblo-gradient);

    box-shadow:
        0 0 18px rgba(112, 69, 232, .25);
}


/* =========================================================
   HEADING
========================================================= */

.mf-slide h1 {
    max-width: 820px;

    margin: 0 0 24px;

    font-size: clamp(52px, 7vw, 98px);

    line-height: .92;

    letter-spacing: -5px;

    font-weight: 700;

    color: var(--maxblo-navy);

    animation:
        mfTextUp .9s .08s var(--maxblo-ease) both;
}

.mf-slide h1 strong {
    display: block;

    font-weight: 800;

    background:
        linear-gradient(90deg,
            #245DE8 0%,
            #3948D0 38%,
            #7045E8 72%,
            #8B5CF6 100%);

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    background-size: 220% auto;

    animation:
        mfGradient 5s ease infinite;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.mf-slide p {
    max-width: 540px;

    margin: 0 0 34px;

    font-size: 16px;

    line-height: 1.75;

    color: #505A73;

    animation:
        mfTextUp 1s .16s var(--maxblo-ease) both;
}


/* =========================================================
   BUTTONS
========================================================= */

.mf-buttons {
    display: flex;
    align-items: center;
    gap: 13px;

    animation:
        mfTextUp 1s .24s var(--maxblo-ease) both;
}

.mf-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 54px;

    padding: 0 26px;

    border-radius: 100px;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    overflow: hidden;

    transition:
        transform .35s var(--maxblo-ease),
        box-shadow .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease;
}

.mf-btn span {
    font-size: 18px;
    line-height: 1;

    transition:
        transform .35s var(--maxblo-ease);
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.mf-btn-primary {
    color: #fff;

    background: var(--maxblo-gradient);

    box-shadow:
        0 14px 32px rgba(57, 72, 208, .24);

    border: 1px solid transparent;
}

.mf-btn-primary::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(110deg,
            transparent 20%,
            rgba(255, 255, 255, .30) 48%,
            transparent 72%);

    transform: translateX(-120%);

    transition:
        transform .7s var(--maxblo-ease);
}

.mf-btn-primary:hover::before {
    transform: translateX(120%);
}

.mf-btn-primary:hover {
    color: #fff;

    transform: translateY(-4px);

    box-shadow:
        0 20px 42px rgba(57, 72, 208, .32);
}

.mf-btn-primary:hover span {
    transform: translate(3px, -3px);
}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.mf-btn-light {
    color: var(--maxblo-navy);

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

    background:
        rgba(255, 255, 255, .80);

    box-shadow:
        0 8px 24px rgba(24, 35, 95, .07);

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

.mf-btn-light:hover {
    color: #fff;

    border-color: transparent;

    background: var(--maxblo-navy);

    transform: translateY(-4px);

    box-shadow:
        0 16px 35px rgba(24, 35, 95, .18);
}


/* =========================================================
   SLIDE NUMBER
========================================================= */

.mf-slide-number {
    position: absolute;

    right: 5%;
    bottom: 145px;

    z-index: 10;

    display: flex;
    align-items: baseline;

    gap: 8px;

    font-size: 12px;

    color: rgba(24, 35, 95, .42);
}

.mf-slide-number strong {
    font-size: 34px;

    color: var(--maxblo-navy);

    font-weight: 800;
}

.mf-slide-number span {
    color: rgba(24, 35, 95, .40);
}


/* =========================================================
   SLIDER NAVIGATION
========================================================= */

.mf-slider-navigation {
    position: absolute;

    right: 5%;
    bottom: 55px;

    z-index: 20;

    display: flex;
    align-items: center;

    gap: 16px;
}


/* =========================================================
   ARROWS
========================================================= */

.mf-nav-btn {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

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

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .80);

    color: var(--maxblo-navy);

    cursor: pointer;

    font-size: 17px;

    box-shadow:
        0 8px 25px rgba(24, 35, 95, .09);

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

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s var(--maxblo-ease),
        box-shadow .3s ease;
}

.mf-nav-btn:hover {
    background: var(--maxblo-gradient);

    border-color: transparent;

    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(57, 72, 208, .22);
}


/* =========================================================
   DOTS
========================================================= */

.mf-dots {
    display: flex;
    align-items: center;

    gap: 7px;
}

.mf-dot {
    width: 26px;
    height: 3px;

    padding: 0;

    border: 0;

    border-radius: 20px;

    cursor: pointer;

    background:
        rgba(24, 35, 95, .18);

    transition:
        width .4s var(--maxblo-ease),
        background .4s ease,
        opacity .3s ease;
}

.mf-dot:hover {
    background: rgba(36, 93, 232, .45);
}

.mf-dot.active {
    width: 54px;

    background: var(--maxblo-gradient);
}


/* =========================================================
   PROGRESS
========================================================= */

.mf-progress {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    z-index: 30;

    background:
        rgba(24, 35, 95, .08);
}

.mf-progress span {
    display: block;

    width: 0;
    height: 100%;

    background: var(--maxblo-gradient);

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


/* =========================================================
   BOTTOM INFO
========================================================= */

.mf-bottom-info {
    position: absolute;

    left: 5%;
    right: 5%;

    bottom: 50px;

    z-index: 20;

    display: flex;
    align-items: center;

    justify-content: space-between;

    pointer-events: none;
}


/* =========================================================
   LOCATION
========================================================= */

.mf-location {
    display: flex;
    align-items: center;

    gap: 10px;
}

.mf-location-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

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

    border-radius: 50%;

    color: var(--maxblo-blue);

    font-size: 8px;

    background:
        rgba(255, 255, 255, .70);
}

.mf-location small {
    display: block;

    font-size: 8px;

    letter-spacing: 1.6px;

    color: rgba(24, 35, 95, .43);
}

.mf-location strong {
    display: block;

    margin-top: 2px;

    font-size: 10px;

    letter-spacing: 1px;

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


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

.mf-scroll {
    display: flex;
    align-items: center;

    gap: 10px;

    font-size: 8px;

    letter-spacing: 2px;

    color: rgba(24, 35, 95, .45);
}

.mf-scroll span {
    width: 30px;
    height: 1px;

    background:
        rgba(24, 35, 95, .25);
}


/* =========================================================
   TAGLINE
========================================================= */

.mf-tagline {
    font-size: 9px;

    letter-spacing: 2px;

    color: rgba(24, 35, 95, .40);
}


/* =========================================================
   OPTIONAL DIGITAL BACKGROUND
========================================================= */

.mf-slide-gradient {
    background:
        radial-gradient(circle at 80% 25%,
            rgba(112, 69, 232, .18),
            transparent 28%),
        radial-gradient(circle at 20% 80%,
            rgba(36, 93, 232, .15),
            transparent 30%),
        #F5F7FC;
}

.mf-pattern {
    position: absolute;
    inset: 0;

    opacity: .20;

    background-image:
        linear-gradient(rgba(24, 35, 95, .08) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(24, 35, 95, .08) 1px,
            transparent 1px);

    background-size: 65px 65px;

    mask-image:
        linear-gradient(135deg,
            black,
            transparent 80%);

    -webkit-mask-image:
        linear-gradient(135deg,
            black,
            transparent 80%);
}

.mf-shape {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(1px);
}

.mf-shape-1 {
    width: 450px;
    height: 450px;

    right: -120px;
    top: -120px;

    border:
        70px solid rgba(112, 69, 232, .10);

    animation:
        mfFloat 10s ease-in-out infinite;
}

.mf-shape-2 {
    width: 300px;
    height: 300px;

    right: 20%;
    bottom: -180px;

    border:
        50px solid rgba(36, 93, 232, .09);

    animation:
        mfFloat 12s 1s ease-in-out infinite reverse;
}

.mf-shape-3 {
    width: 120px;
    height: 120px;

    right: 35%;
    top: 22%;

    background:
        linear-gradient(135deg,
            rgba(36, 93, 232, .18),
            rgba(112, 69, 232, .12));

    animation:
        mfPulse 5s ease-in-out infinite;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes mfTextUp {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mfGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes mfFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(0, -18px, 0) rotate(4deg);
    }
}

@keyframes mfPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .55;
    }

    50% {
        transform: scale(1.15);
        opacity: .95;
    }
}


/* =========================================================
   HOVER / POINTER DETAILS
========================================================= */

.mf-slide-content {
    transition:
        transform .6s var(--maxblo-ease);
}

.mf-slide.active .mf-slide-content {
    animation:
        mfHeroContent .9s var(--maxblo-ease) both;
}

@keyframes mfHeroContent {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .mf-slide-content {
        width: min(88%, 1400px);
    }

    .mf-slide h1 {
        font-size: clamp(70px, 6.5vw, 108px);
    }

    .mf-slide p {
        font-size: 17px;
    }

    .mf-bottom-info {
        left: 4%;
        right: 4%;
    }

    .mf-slider-navigation {
        right: 4%;
    }

    .mf-slide-number {
        right: 4%;
    }
}


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

@media (max-width: 900px) {

    .mf-hero {
        min-height: 680px;
    }

    .mf-slide-content {
        width: 90%;

        justify-content: center;

        padding-top: 40px;
    }

    .mf-slide h1 {
        font-size: clamp(48px, 9vw, 76px);

        letter-spacing: -3.5px;
    }

    .mf-slide p {
        max-width: 500px;

        font-size: 14px;

        line-height: 1.75;
    }

    .mf-bottom-info {
        bottom: 25px;
    }

    .mf-scroll,
    .mf-tagline {
        display: none;
    }

    .mf-slider-navigation {
        bottom: 22px;
    }

    .mf-slide-number {
        right: 5%;
        bottom: 100px;
    }
}


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

@media (max-width: 600px) {

    .mf-hero {
        height: 100svh;
        min-height: 650px;
    }


    .mf-slide-content {
        justify-content: flex-end;

        padding-bottom: 118px;
    }

    .mf-eyebrow {
        font-size: 9px;

        letter-spacing: 1.5px;

        margin-bottom: 18px;
    }

    .mf-slide h1 {
        font-size: 47px;

        letter-spacing: -2.5px;

        line-height: .96;

        margin-bottom: 18px;
    }

    .mf-slide p {
        font-size: 13px;

        line-height: 1.7;

        margin-bottom: 24px;
    }

    .mf-buttons {
        flex-direction: column;

        align-items: stretch;

        width: 100%;
    }

    .mf-btn {
        width: 100%;
    }

    .mf-slider-navigation {
        left: 5%;
        right: auto;

        bottom: 24px;
    }

    .mf-slide-number {
        right: 5%;

        bottom: 88px;
    }

    .mf-slide-number strong {
        font-size: 25px;
    }

    .mf-bottom-info {
        left: 5%;
        right: 5%;

        bottom: 24px;
    }

    .mf-location {
        display: none;
    }

    .mf-nav-btn {
        width: 42px;
        height: 42px;
    }

    .mf-dot {
        width: 22px;
    }

    .mf-dot.active {
        width: 42px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mf-slide,
    .mf-slide-image,
    .mf-slide-content,
    .mf-btn,
    .mf-nav-btn,
    .mf-dot {
        transition: none !important;
        animation: none !important;
    }

    .mf-shape-1,
    .mf-shape-2,
    .mf-shape-3 {
        animation: none !important;
    }
}


.trust-bar {
    position: relative;
    z-index: 10;

    margin-top: -1px;

    background: #202c3f;

    padding: 22px 0;
}

.trust-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}

.trust-item {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    color: #fff;

    border-right: 1px solid rgba(255, 255, 255, .10);
}

.trust-item:last-child {
    border-right: 0;
}

.trust-icon {
    font-size: 23px;
}

.trust-item strong {
    font-size: 13px;
}

.trust-item span {
    display: block;

    margin-top: 2px;

    font-size: 10px;

    color: rgba(255, 255, 255, .55);
}

/* =========================================================
   MAXBLO ABOUT BUTTON
========================================================= */

.maxblo-about-btn {
    position: relative;

    display: inline-flex;

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

    gap: 18px;

    min-height: 58px;

    padding: 0 28px 0 30px;

    border-radius: 100px;

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

    color: #FFFFFF;

    font-size: 15px;

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    overflow: hidden;

    box-shadow:
        0 14px 32px rgba(57, 72, 208, 0.22);

    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        box-shadow .35s ease,
        gap .35s ease;
}


/* SHINE EFFECT */

.maxblo-about-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(100deg,
            transparent,
            rgba(255, 255, 255, .28),
            transparent);

    transform: skewX(-20deg);

    transition:
        left .7s ease;
}


/* TEXT */

.maxblo-about-btn span {
    position: relative;

    z-index: 2;

    color: #FFFFFF;
}


/* ARROW */

.maxblo-about-btn i {
    position: relative;

    z-index: 2;

    display: flex;

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

    width: 28px;
    height: 28px;

    font-size: 22px;

    font-style: normal;

    color: #FFFFFF;

    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1);
}


/* HOVER */

.maxblo-about-btn:hover {

    color: #FFFFFF;

    gap: 23px;

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 42px rgba(57, 72, 208, 0.32);
}


.maxblo-about-btn:hover::before {

    left: 130%;
}


.maxblo-about-btn:hover i {

    transform:
        translate(3px, -3px);
}


/* ACTIVE */

.maxblo-about-btn:active {

    transform:
        translateY(-1px);
}


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

@media (max-width: 575px) {

    .maxblo-about-btn {

        min-height: 54px;

        padding:
            0 24px;

        font-size: 14px;

        gap: 14px;
    }

}

/* =========================================================
   MAXBLO DIGITAL ECOSYSTEM
========================================================= */

.maxblo-ecosystem {

    --maxblo-navy: #18235F;
    --maxblo-blue: #245DE8;
    --maxblo-indigo: #3948D0;
    --maxblo-violet: #7045E8;

    position: relative;

    width: 100%;

    padding:
        120px 0 100px;

    overflow: hidden;

    color: #ffffff !important;

    background:

        radial-gradient(circle at 50% 42%,
            rgba(36, 93, 232, .13),
            transparent 28%),

        radial-gradient(circle at 85% 15%,
            rgba(112, 69, 232, .10),
            transparent 28%),

        linear-gradient(135deg,
            #030716 0%,
            #060b25 48%,
            #090821 100%);

}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.maxblo-eco-grid {

    position: absolute;

    inset: 0;

    opacity: .18;

    pointer-events: none;

    background-image:

        linear-gradient(rgba(69, 103, 190, .10) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(69, 103, 190, .10) 1px,
            transparent 1px);

    background-size:
        75px 75px;

    mask-image:
        radial-gradient(ellipse at center,
            #000 0%,
            transparent 72%);

}


/* =========================================================
   BACKGROUND GLOWS
========================================================= */

.maxblo-eco-glow {

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(100px);

    opacity: .16;

}


.glow-left {

    left: -250px;
    top: 35%;

    background:
        #245DE8;

}


.glow-right {

    right: -250px;
    top: 20%;

    background:
        #7045E8;

}


/* =========================================================
   PARTICLES
========================================================= */

.maxblo-eco-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

}


.maxblo-eco-particles span {

    position: absolute;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background: #6da0ff;

    box-shadow:
        0 0 8px rgba(36, 93, 232, .8);

    opacity: .5;

    animation:
        ecoParticle 8s ease-in-out infinite;

}


.maxblo-eco-particles span:nth-child(1) {
    left: 10%;
    top: 18%;
}

.maxblo-eco-particles span:nth-child(2) {
    left: 20%;
    top: 62%;
    animation-delay: -2s;
}

.maxblo-eco-particles span:nth-child(3) {
    left: 31%;
    top: 15%;
    animation-delay: -4s;
}

.maxblo-eco-particles span:nth-child(4) {
    left: 42%;
    top: 70%;
    animation-delay: -1s;
}

.maxblo-eco-particles span:nth-child(5) {
    left: 55%;
    top: 12%;
    animation-delay: -5s;
}

.maxblo-eco-particles span:nth-child(6) {
    left: 67%;
    top: 25%;
    animation-delay: -3s;
}

.maxblo-eco-particles span:nth-child(7) {
    left: 78%;
    top: 63%;
    animation-delay: -6s;
}

.maxblo-eco-particles span:nth-child(8) {
    left: 89%;
    top: 38%;
    animation-delay: -2s;
}

.maxblo-eco-particles span:nth-child(9) {
    left: 15%;
    top: 83%;
    animation-delay: -7s;
}

.maxblo-eco-particles span:nth-child(10) {
    left: 93%;
    top: 78%;
    animation-delay: -3s;
}

.maxblo-eco-particles span:nth-child(11) {
    left: 5%;
    top: 45%;
    animation-delay: -5s;
}

.maxblo-eco-particles span:nth-child(12) {
    left: 72%;
    top: 8%;
    animation-delay: -4s;
}


@keyframes ecoParticle {

    0%,
    100% {

        transform:
            translateY(0);

        opacity: .15;

    }

    50% {

        transform:
            translateY(-18px);

        opacity: .8;

    }

}


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

.maxblo-eco-container {

    position: relative;

    width:
        min(1380px,
            calc(100% - 60px));

    margin: auto;

}


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

.maxblo-eco-header {

    position: relative;

    z-index: 20;

    max-width: 850px;

    margin:
        0 auto 65px;

    text-align: center;

}


.maxblo-eco-eyebrow {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 13px;

    margin-bottom: 24px;

    color: #8eb0ff;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

}


.maxblo-eco-eyebrow span {

    display: block;

    width: 42px;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            #245DE8);

}


.maxblo-eco-eyebrow span:last-child {

    background:
        linear-gradient(90deg,
            #7045E8,
            transparent);

}


.maxblo-eco-header h2 {

    margin: 0;

    color: #ffffff !important;

    font-size:
        clamp(48px,
            5.3vw,
            76px);

    font-weight: 300;

    line-height: .98;

    letter-spacing: -3px;

}


.maxblo-eco-header h2 .heading-light {

    color:
        rgba(255, 255, 255, .92) !important;

}


.maxblo-eco-header h2 .heading-gradient {

    color: transparent !important;

    background:
        linear-gradient(90deg,
            #4b94ff,
            #7045E8);

    -webkit-background-clip: text;
    background-clip: text;

}


.maxblo-eco-header h2 strong {

    color:
        #ffffff !important;

    font-weight: 800;

}


.maxblo-eco-header p {

    max-width: 650px;

    margin:
        25px auto 0;

    color:
        rgba(255, 255, 255, .60) !important;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   STAGE
========================================================= */

.maxblo-ecosystem-stage {

    position: relative;

    width: 100%;

    height: 700px;

}


/* =========================================================
   CONNECTION LINES
========================================================= */

.maxblo-connection-lines {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    pointer-events: none;

}


.eco-connection {

    fill: none;

    stroke:
        url(#maxbloLineGradient);

    stroke-width: 1;

    stroke-dasharray:
        5 12;

    opacity: .38;

    animation:
        ecoLineMove 8s linear infinite;

}


@keyframes ecoLineMove {

    to {

        stroke-dashoffset:
            -100;

    }

}


/* =========================================================
   CENTER CORE
========================================================= */

.maxblo-growth-core {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 230px;
    height: 230px;

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

    z-index: 8;

}


.core-glow {

    position: absolute;

    inset: 20px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(36, 93, 232, .40),
            rgba(112, 69, 232, .18) 45%,
            transparent 70%);

    filter: blur(24px);

    animation:
        coreGlow 4s ease-in-out infinite;

}


@keyframes coreGlow {

    0%,
    100% {

        transform: scale(.86);

        opacity: .55;

    }

    50% {

        transform: scale(1.08);

        opacity: .9;

    }

}


/* =========================================================
   CORE RINGS
========================================================= */

.core-ring {

    position: absolute;

    inset: 15px;

    border-radius: 50%;

    border:
        1px solid rgba(82, 132, 255, .25);

}


.ring-one {

    transform:
        rotateX(67deg) rotateZ(18deg);

    animation:
        ringSpin 13s linear infinite;

}


.ring-two {

    transform:
        rotateY(65deg) rotateZ(-20deg);

    animation:
        ringSpinReverse 17s linear infinite;

}


.ring-three {

    inset: 28px;

    transform:
        rotateX(65deg) rotateY(20deg);

    animation:
        ringSpin 20s linear infinite;

}


@keyframes ringSpin {

    from {

        transform:
            rotateX(67deg) rotateZ(0deg);

    }

    to {

        transform:
            rotateX(67deg) rotateZ(360deg);

    }

}


@keyframes ringSpinReverse {

    from {

        transform:
            rotateY(65deg) rotateZ(360deg);

    }

    to {

        transform:
            rotateY(65deg) rotateZ(0deg);

    }

}


/* =========================================================
   CORE INNER
========================================================= */

.core-inner {

    position: absolute;

    inset: 50px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background:
        radial-gradient(circle at 35% 25%,
            rgba(80, 130, 255, .22),
            rgba(255, 255, 255, .04) 50%,
            rgba(4, 10, 35, .90));

    border:
        1px solid rgba(145, 170, 255, .28);

    box-shadow:

        inset 0 1px 1px rgba(255, 255, 255, .14),

        0 0 50px rgba(36, 93, 232, .18);

    backdrop-filter:
        blur(8px);

}


.core-eyebrow {

    color:
        #7599ef;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 2px;

}


.core-brand {

    margin-top: 8px;

    color:
        #ffffff;

    font-size: 24px;

    font-weight: 900;

    letter-spacing: -1.8px;

}


.core-brand span {

    color:
        #7045E8;

}


.core-subtitle {

    margin-top: 3px;

    color:
        rgba(255, 255, 255, .50);

    font-size: 8px;

}


.core-dots {

    display: flex;

    gap: 3px;

    margin-top: 13px;

}


.core-dots i {

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        #4f8dff;

    animation:
        coreDot 1.5s ease-in-out infinite;

}


.core-dots i:nth-child(2) {
    animation-delay: .15s;
}

.core-dots i:nth-child(3) {
    animation-delay: .3s;
}

.core-dots i:nth-child(4) {
    animation-delay: .45s;
}


@keyframes coreDot {

    0%,
    100% {

        transform: scale(.6);

        opacity: .3;

    }

    50% {

        transform: scale(1.5);

        opacity: 1;

    }

}


/* =========================================================
   SERVICE POSITIONING
========================================================= */

.maxblo-service {

    position: absolute;

    width: 250px;

    z-index: 5;

}


.service-01 {

    left: 2%;

    top: 70px;

}


.service-02 {

    right: 2%;

    top: 70px;

}


.service-03 {

    left: 3%;

    top: 370px;

}


.service-04 {

    right: 3%;

    top: 370px;

}


.service-05 {

    left: 50%;

    top: -15px;

    transform:
        translateX(-50%);

}


.service-06 {

    left: 50%;

    bottom: -5px;

    transform:
        translateX(-50%);

}


.service-07 {

    left: 17%;

    bottom: 15px;

}


.service-08 {

    right: 17%;

    bottom: 15px;

}


/* =========================================================
   SERVICE CARD
========================================================= */

.service-card {

    position: relative;

    min-height: 190px;

    padding:
        21px;

    border-radius:
        18px;

    overflow: hidden;

    background:
        linear-gradient(145deg,
            rgba(32, 46, 88, .72),
            rgba(11, 17, 46, .72));

    border:
        1px solid rgba(125, 154, 224, .20);

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, .08),

        0 18px 40px rgba(0, 0, 0, .25);

    transition:
        transform .45s cubic-bezier(.2, .8, .2, 1),
        border-color .35s ease,
        box-shadow .35s ease;

}


.service-card::before {

    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -70px;
    top: -70px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(36, 93, 232, .30),
            transparent 70%);

    pointer-events: none;

}


.service-card::after {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .07),
            transparent);

    transform:
        skewX(-20deg);

    transition:
        left .7s ease;

}


.service-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(91, 142, 255, .48);

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, .12),

        0 25px 55px rgba(36, 93, 232, .15);

}


.service-card:hover::after {

    left: 140%;

}


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

.service-card-head {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

}


.service-number {

    color:
        rgba(255, 255, 255, .28);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

}


.service-icon {

    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius:
        11px;

    background:
        linear-gradient(145deg,
            rgba(36, 93, 232, .18),
            rgba(112, 69, 232, .18));

    border:
        1px solid rgba(91, 132, 255, .25);

}


.service-icon svg {

    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        #70a0ff;

    stroke-width:
        1.5;

}


/* =========================================================
   CARD CONTENT
========================================================= */

.service-info {

    margin-top: 18px;

}


.service-info small {

    display: block;

    color:
        #7098ef;

    font-size: 7px;

    font-weight: 700;

    letter-spacing:
        1.5px;

}


.service-info h3 {

    margin:
        7px 0 8px;

    color:
        #ffffff !important;

    font-size:
        21px;

    font-weight:
        600;

    letter-spacing:
        -.7px;

}


.service-info p {

    max-width:
        205px;

    margin:
        0;

    color:
        rgba(255, 255, 255, .56) !important;

    font-size:
        10px;

    line-height:
        1.65;

}


/* =========================================================
   CARD ARROW
========================================================= */

.service-arrow {

    position: absolute;

    right: 18px;
    bottom: 17px;

    width: 25px;
    height: 25px;

    display: flex;

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

    border-radius: 50%;

    color:
        #ffffff !important;

    text-decoration:
        none;

    font-size:
        11px;

    background:
        linear-gradient(135deg,
            #245DE8,
            #7045E8);

    box-shadow:
        0 5px 15px rgba(36, 93, 232, .25);

    transition:
        transform .3s ease;

}


.service-card:hover .service-arrow {

    transform:
        rotate(45deg);

}


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

.maxblo-services-cta {

    position: relative;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 25px;

    width: 100%;

    margin-top: 20px;

    padding:
        22px 25px;

    border-radius:
        17px;

    background:
        linear-gradient(110deg,
            rgba(17, 28, 70, .90),
            rgba(12, 17, 53, .80));

    border:
        1px solid rgba(103, 132, 215, .20);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .18);

}


.cta-accent {

    width: 3px;
    height: 42px;

    flex-shrink: 0;

    border-radius:
        10px;

    background:
        linear-gradient(#245DE8,
            #7045E8);

    box-shadow:
        0 0 15px rgba(36, 93, 232, .6);

}


.cta-text {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.cta-text span {

    color:
        rgba(255, 255, 255, .40);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.8px;

}


.cta-text strong {

    color:
        #ffffff !important;

    font-size:
        17px;

    font-weight:
        800;

}


.maxblo-services-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 18px;

    border-radius:
        100px;

    color:
        #ffffff !important;

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        700;

    white-space:
        nowrap;

    background:
        linear-gradient(100deg,
            #245DE8,
            #7045E8);

    box-shadow:
        0 10px 25px rgba(36, 93, 232, .25);

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

}


.maxblo-services-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 35px rgba(112, 69, 232, .30);

}


.maxblo-services-button i {

    font-style:
        normal;

    transition:
        transform .3s ease;

}


.maxblo-services-button:hover i {

    transform:
        rotate(45deg);

}


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

@media (max-width: 1150px) {

    .maxblo-ecosystem-stage {

        height:
            760px;

    }


    .maxblo-service {

        width:
            225px;

    }


    .service-07 {

        left:
            13%;

    }


    .service-08 {

        right:
            13%;

    }

}


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

@media (max-width: 850px) {

    .maxblo-ecosystem {

        padding:
            90px 0;

    }


    .maxblo-eco-container {

        width:
            min(94%,
                650px);

    }


    .maxblo-eco-header {

        margin-bottom:
            45px;

    }


    .maxblo-eco-header h2 {

        font-size:
            clamp(40px,
                9vw,
                58px);

        letter-spacing:
            -2px;

    }


    .maxblo-eco-header p {

        font-size:
            13px;

    }


    .maxblo-ecosystem-stage {

        height:
            auto;

        display:
            grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            15px;

    }


    .maxblo-connection-lines {

        display:
            none;

    }


    .maxblo-growth-core {

        display:
            none;

    }


    .maxblo-service {

        position:
            relative;

        width:
            auto;

        left:
            auto !important;

        right:
            auto !important;

        top:
            auto !important;

        bottom:
            auto !important;

        transform:
            none !important;

    }


    .service-card {

        min-height:
            200px;

    }


    .maxblo-services-cta {

        margin-top:
            35px;

    }

}


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

@media (max-width: 560px) {

    .maxblo-ecosystem {

        padding:
            75px 0;

    }


    .maxblo-eco-container {

        width:
            calc(100% - 30px);

    }


    .maxblo-eco-eyebrow {

        font-size:
            8px;

        letter-spacing:
            2px;

    }


    .maxblo-eco-eyebrow span {

        width:
            25px;

    }


    .maxblo-eco-header h2 {

        font-size:
            39px;

    }


    .maxblo-eco-header p {

        font-size:
            12px;

        line-height:
            1.7;

    }


    .maxblo-ecosystem-stage {

        grid-template-columns:
            1fr;

        gap:
            14px;

    }


    .service-card {

        min-height:
            190px;

    }


    .service-info h3 {

        font-size:
            22px;

    }


    .maxblo-services-cta {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            22px;

    }


    .cta-accent {

        width:
            40px;

        height:
            3px;

    }


    .maxblo-services-button {

        width:
            100%;

        justify-content:
            center;

    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .maxblo-eco-particles span,
    .eco-connection,
    .core-glow,
    .core-ring,
    .core-dots i {

        animation:
            none !important;

    }

    .service-card,
    .maxblo-services-button,
    .service-arrow {

        transition:
            none !important;

    }

}

.maxblo-service {

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.16, 1, .3, 1);

    transition-delay:
        var(--service-delay, 0ms);

}


.maxblo-service.service-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* Preserve center positioning */

.service-05.service-visible,
.service-06.service-visible {

    transform:
        translateX(-50%);

}


@media (max-width: 850px) {

    .maxblo-service.service-visible,
    .service-05.service-visible,
    .service-06.service-visible {

        transform:
            translateY(0);

    }

}



/* =========================================================
   PROCESS SECTION
========================================================= */

.mf-process-section {

    position: relative;

    padding: 125px 0 110px;

    overflow: hidden;

    color: #101820;

    background:
        radial-gradient(circle at 50% 20%,
            rgba(73, 195, 78, .045),
            transparent 30%),

        radial-gradient(circle at 85% 70%,
            rgba(7, 153, 178, .045),
            transparent 28%),

        #ffffff;

}


/* =========================================================
   GRID
========================================================= */

.mf-process-grid {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .45;

    background-image:

        linear-gradient(rgba(16, 24, 32, .025) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(16, 24, 32, .025) 1px,
            transparent 1px);

    background-size: 70px 70px;

}


/* =========================================================
   AMBIENT ORBS
========================================================= */

.mf-process-orb {

    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(90px);

    opacity: .12;

}


.mf-orb-one {

    left: -180px;
    top: 35%;

    background: #49c34e;

}


.mf-orb-two {

    right: -180px;
    bottom: 10%;

    background: #0799b2;

}


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

.mf-process-header {

    position: relative;

    z-index: 2;

    max-width: 720px;

    margin: 0 auto 80px;

    text-align: center;

}


.mf-process-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 20px;

    color: #0799b2;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

}


.mf-process-eyebrow span {

    width: 35px;
    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            #49c34e);

}


.mf-process-eyebrow span:last-child {

    background:
        linear-gradient(90deg,
            #0799b2,
            transparent);

}


.mf-process-header h2 {

    margin: 0;

    color: #101820;

    font-size:
        clamp(48px,
            6vw,
            78px);

    line-height: .96;

    font-weight: 300;

    letter-spacing: -3px;

}


.mf-process-header h2 span {

    color: #49c34e;

}


.mf-process-header h2 strong {

    font-weight: 800;

    background:
        linear-gradient(90deg,
            #101820,
            #0799b2);

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

}


.mf-process-header p {

    max-width: 590px;

    margin: 25px auto 0;

    color: #667477;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   PROCESS WRAPPER
========================================================= */

.mf-process-wrapper {

    position: relative;

    z-index: 2;

}


/* =========================================================
   CONNECTION LINE
========================================================= */

.mf-process-line {

    position: absolute;

    left: 37.5%;

    right: 0;

    top: 53px;

    height: 1px;

    background:
        rgba(16, 24, 32, .10);

}


.mf-process-line-progress {

    width: 100%;

    height: 100%;

    background:
        linear-gradient(90deg,
            #49c34e,
            #0799b2);

    transform-origin: left;

    animation:
        mfProcessLine 5s ease-in-out infinite;

}


@keyframes mfProcessLine {

    0% {
        transform: scaleX(0);
    }

    50% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }

}


/* =========================================================
   INTRO CARD
========================================================= */

.mf-process-intro {

    padding-right: 35px;

}


.mf-process-intro-card {

    position: relative;

    padding: 35px;

    min-height: 335px;

    border-radius: 24px;

    background:
        linear-gradient(145deg,
            #f8fff8,
            #f1fafb);

    border:
        1px solid rgba(73, 195, 78, .18);

    box-shadow:
        0 25px 70px rgba(16, 24, 32, .07);

    overflow: hidden;

}


.mf-process-intro-card::after {

    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -80px;
    bottom: -80px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(73, 195, 78, .20),
            transparent 70%);

}


.mf-process-intro-label {

    color: #0799b2;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

}


.mf-process-intro-card h3 {

    margin: 22px 0 15px;

    color: #101820;

    font-size: 31px;

    line-height: 1.05;

    letter-spacing: -1.5px;

}


.mf-process-intro-card h3 span {

    color: #49c34e;

}


.mf-process-intro-card p {

    margin: 0;

    color: #667477;

    font-size: 12px;

    line-height: 1.75;

}


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

.mf-process-cta {

    position: absolute;

    left: 35px;
    bottom: 30px;

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 12px 16px;

    color: #101820;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    border-radius: 100px;

    background:
        linear-gradient(135deg,
            #b8f000,
            #49c34e 50%,
            #0799b2);

    box-shadow:
        0 10px 25px rgba(73, 195, 78, .18);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.mf-process-cta i {

    display: flex;

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

    width: 25px;
    height: 25px;

    border-radius: 50%;

    color: #fff;

    font-style: normal;

    background:
        rgba(16, 24, 32, .25);

}


.mf-process-cta:hover {

    color: #fff;

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 35px rgba(7, 153, 178, .22);

}


/* =========================================================
   STEP CARD
========================================================= */

.mf-process-step {

    position: relative;

    min-height: 335px;

    padding: 27px;

    margin-left: 10px;

    border-radius: 24px;

    background:
        rgba(255, 255, 255, .88);

    border:
        1px solid rgba(16, 24, 32, .09);

    box-shadow:
        0 20px 55px rgba(16, 24, 32, .06);

    transition:
        transform .45s cubic-bezier(.16, 1, .3, 1),
        box-shadow .45s ease,
        border-color .45s ease;

}


.mf-process-step:hover {

    transform:
        translateY(-10px);

    border-color:
        rgba(73, 195, 78, .30);

    box-shadow:
        0 30px 70px rgba(16, 24, 32, .11);

}


/* =========================================================
   STEP TOP
========================================================= */

.mf-step-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.mf-step-number {

    color:
        rgba(16, 24, 32, .18);

    font-size:
        30px;

    font-weight:
        800;

    letter-spacing:
        -1px;

}


.mf-step-icon {

    display: flex;

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

    width: 47px;
    height: 47px;

    border-radius: 14px;

    background:
        linear-gradient(135deg,
            rgba(73, 195, 78, .12),
            rgba(7, 153, 178, .10));

    border:
        1px solid rgba(73, 195, 78, .18);

    transition:
        transform .4s ease,
        background .4s ease;

}


.mf-process-step:hover .mf-step-icon {

    transform:
        rotate(-8deg) scale(1.08);

    background:
        linear-gradient(135deg,
            rgba(73, 195, 78, .22),
            rgba(7, 153, 178, .18));

}


.mf-step-icon svg {

    width: 21px;
    height: 21px;

    stroke:
        #0799b2;

    stroke-width:
        1.5;

}


/* =========================================================
   STEP DOT
========================================================= */

.mf-step-dot {

    position: relative;

    width: 12px;
    height: 12px;

    margin:
        26px 0 22px;

    border-radius: 50%;

    background:
        #ffffff;

    border:
        2px solid #49c34e;

    box-shadow:
        0 0 0 6px rgba(73, 195, 78, .08);

}


.mf-step-dot span {

    position: absolute;

    inset: 2px;

    border-radius: 50%;

    background:
        #49c34e;

    animation:
        mfStepPulse 2s ease-in-out infinite;

}


@keyframes mfStepPulse {

    0%,
    100% {
        transform: scale(.7);
        opacity: .5;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

}


/* =========================================================
   STEP CONTENT
========================================================= */

.mf-step-label {

    color:
        #0799b2;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.mf-step-content h3 {

    margin:
        9px 0 12px;

    color:
        #101820;

    font-size:
        27px;

    font-weight:
        700;

    letter-spacing:
        -1px;

}


.mf-step-content p {

    margin:
        0;

    color:
        #667477;

    font-size:
        12px;

    line-height:
        1.75;

}


/* =========================================================
   FOOTER
========================================================= */

.mf-step-footer {

    position: absolute;

    left: 27px;
    right: 27px;
    bottom: 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 15px;

    border-top:
        1px solid rgba(16, 24, 32, .07);

}


.mf-step-footer span {

    color:
        #8a9698;

    font-size:
        9px;

}


.mf-step-footer i {

    display: flex;

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

    width: 26px;
    height: 26px;

    border-radius: 50%;

    color:
        #ffffff;

    font-style:
        normal;

    font-size:
        8px;

    font-weight:
        700;

    background:
        linear-gradient(135deg,
            #49c34e,
            #0799b2);

}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.mf-process-bottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-top: 75px;

    text-align: center;

}


.mf-process-bottom>div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.mf-process-bottom small {

    color:
        #0799b2;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.mf-process-bottom strong {

    color:
        #101820;

    font-size:
        17px;

}


.mf-bottom-line {

    width:
        100px;

    height:
        1px;

    background:
        linear-gradient(90deg,
            transparent,
            #49c34e);

}


.mf-bottom-line:last-child {

    background:
        linear-gradient(90deg,
            #0799b2,
            transparent);

}


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

@media (max-width: 991px) {

    .mf-process-header {

        margin-bottom:
            55px;

    }


    .mf-process-line {

        display:
            none;

    }


    .mf-process-intro {

        padding-right:
            10px;

        margin-bottom:
            20px;

    }


    .mf-process-step {

        margin:
            10px 0;

    }

}


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

@media (max-width: 575px) {

    .mf-process-section {

        padding:
            80px 0;

    }


    .mf-process-header {

        margin-bottom:
            40px;

    }


    .mf-process-header h2 {

        font-size:
            43px;

        letter-spacing:
            -2px;

    }


    .mf-process-header p {

        font-size:
            12px;

    }


    .mf-process-intro-card {

        min-height:
            310px;

        padding:
            27px;

    }


    .mf-process-step {

        min-height:
            310px;

        padding:
            24px;

    }


    .mf-step-content h3 {

        font-size:
            25px;

    }


    .mf-process-bottom {

        margin-top:
            45px;

    }


    .mf-bottom-line {

        width:
            30px;

    }

}

/* =========================================================
   MAXBLO — GROWTH JOURNEY
   BRAND PALETTE
========================================================= */

.mf-growth-journey {

    --maxblo-navy: #18235F;
    --maxblo-blue: #245DE8;
    --maxblo-indigo: #3948D0;
    --maxblo-violet: #7045E8;

    position: relative;

    padding: 125px 0 115px;

    overflow: hidden;

    color: var(--maxblo-navy);

    background:
        radial-gradient(circle at 50% 42%,
            rgba(36, 93, 232, .055),
            transparent 34%),
        radial-gradient(circle at 82% 70%,
            rgba(112, 69, 232, .045),
            transparent 27%),
        #ffffff;

}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.mf-journey-grid {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .55;

    background-image:

        linear-gradient(rgba(24, 35, 95, .025) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(24, 35, 95, .025) 1px,
            transparent 1px);

    background-size: 70px 70px;

    mask-image:
        radial-gradient(ellipse at center,
            #000 0%,
            transparent 78%);

}


/* =========================================================
   AMBIENT GLOW
========================================================= */

.mf-journey-glow {

    position: absolute;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(110px);

    opacity: .08;

}


.mf-glow-left {

    left: -220px;
    top: 35%;

    background:
        var(--maxblo-blue);

}


.mf-glow-right {

    right: -220px;
    bottom: 10%;

    background:
        var(--maxblo-violet);

}


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

.mf-journey-header {

    position: relative;

    z-index: 2;

    max-width: 760px;

    margin:
        0 auto 90px;

    text-align: center;

}


.mf-journey-kicker {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 22px;

    color:
        var(--maxblo-blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

}


.mf-kicker-line {

    width: 42px;

    height: 1px;

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

}


.mf-kicker-line:last-child {

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

}


/* =========================================================
   MAIN HEADING
========================================================= */

.mf-journey-header h2 {

    margin: 0;

    color:
        var(--maxblo-navy);

    font-size:
        clamp(54px,
            7vw,
            88px);

    font-weight: 300;

    line-height: .92;

    letter-spacing: -4px;

}


.mf-journey-header h2 span {

    font-weight: 800;

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

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.mf-journey-header p {

    max-width: 610px;

    margin:
        28px auto 0;

    color:
        #68718a;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   JOURNEY
========================================================= */

.mf-journey {

    position: relative;

    display: grid;

    grid-template-columns:
        1.05fr 1fr 1fr 1fr 1fr;

    gap: 25px;

    align-items: start;

}


/* =========================================================
   JOURNEY TRACK
========================================================= */

.mf-journey-track {

    position: absolute;

    left: 9%;

    right: 9%;

    top: 34px;

    height: 2px;

    z-index: 1;

}


.mf-track-base {

    position: absolute;

    inset: 0;

    background:
        rgba(24, 35, 95, .10);

}


.mf-track-active {

    position: absolute;

    inset: 0;

    transform-origin: left;

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

    animation:
        maxbloJourneyProgress 6s ease-in-out infinite;

}


.mf-track-light {

    position: absolute;

    top: -2px;

    left: -30px;

    width: 55px;

    height: 6px;

    border-radius: 50%;

    background:
        #ffffff;

    box-shadow:
        0 0 10px rgba(36, 93, 232, .8),

        0 0 24px rgba(112, 69, 232, .55);

    animation:
        maxbloTrackLight 6s linear infinite;

}


@keyframes maxbloJourneyProgress {

    0% {
        transform: scaleX(0);
    }

    50% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }

}


@keyframes maxbloTrackLight {

    0% {
        left: -30px;
    }

    100% {
        left: calc(100% + 30px);
    }

}


/* =========================================================
   START AREA
========================================================= */

.mf-journey-start {

    position: relative;

    z-index: 3;

    padding:
        72px 25px 20px 0;

}


.mf-start-small {

    margin-bottom: 18px;

    color:
        var(--maxblo-blue);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

}


.mf-journey-start h3 {

    margin: 0;

    color:
        var(--maxblo-navy);

    font-size: 30px;

    line-height: 1.05;

    letter-spacing: -1.5px;

}


.mf-journey-start h3 span {

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

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.mf-journey-start p {

    max-width: 240px;

    margin:
        18px 0 28px;

    color:
        #69738c;

    font-size: 12px;

    line-height: 1.75;

}


/* =========================================================
   MAXBLO BUTTON
========================================================= */

.mf-start-button {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding:
        10px 11px 10px 18px;

    color:
        #ffffff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    border-radius: 100px;

    background:
        linear-gradient(100deg,
            var(--maxblo-blue),
            var(--maxblo-indigo),
            var(--maxblo-violet));

    box-shadow:
        0 12px 28px rgba(36, 93, 232, .20);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.mf-start-button i {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 27px;
    height: 27px;

    border-radius: 50%;

    color: #ffffff;

    font-style: normal;

    background:
        rgba(255, 255, 255, .16);

}


.mf-start-button:hover {

    color:
        #ffffff;

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 38px rgba(112, 69, 232, .25);

}


/* =========================================================
   STEP
========================================================= */

.mf-journey-step {

    position: relative;

    z-index: 3;

    min-height: 315px;

    padding:
        70px 22px 25px;

    border-left:
        1px solid rgba(24, 35, 95, .08);

    transition:
        transform .45s cubic-bezier(.16, 1, .3, 1);

}


.mf-journey-step:hover {

    transform:
        translateY(-8px);

}


/* =========================================================
   STEP NUMBER
========================================================= */

.mf-step-number {

    position: absolute;

    top: 0;

    left: 20px;

    color:
        rgba(24, 35, 95, .10);

    font-size: 64px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: -4px;

}


/* =========================================================
   STEP NODE
========================================================= */

.mf-step-node {

    position: absolute;

    top: 25px;

    left: 19px;

    width: 19px;
    height: 19px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        #ffffff;

    border:
        1px solid rgba(36, 93, 232, .35);

    box-shadow:
        0 0 0 6px rgba(36, 93, 232, .06);

}


.mf-step-node span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

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

    box-shadow:
        0 0 10px rgba(36, 93, 232, .55);

}


/* =========================================================
   STEP LABEL
========================================================= */

.mf-step-copy small {

    color:
        var(--maxblo-blue);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


/* =========================================================
   STEP TITLE
========================================================= */

.mf-step-copy h3 {

    margin:
        9px 0 13px;

    color:
        var(--maxblo-navy);

    font-size:
        27px;

    font-weight:
        700;

    letter-spacing:
        -1px;

}


/* =========================================================
   STEP DESCRIPTION
========================================================= */

.mf-step-copy p {

    max-width:
        220px;

    margin:
        0;

    color:
        #69738c;

    font-size:
        11px;

    line-height:
        1.8;

}


/* =========================================================
   META TAGS
========================================================= */

.mf-step-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top:
        25px;

}


.mf-step-meta span {

    padding:
        5px 8px;

    color:
        var(--maxblo-indigo);

    font-size:
        7px;

    font-weight:
        700;

    border-radius:
        50px;

    background:
        rgba(36, 93, 232, .045);

    border:
        1px solid rgba(36, 93, 232, .10);

}


/* =========================================================
   RESULT
========================================================= */

.mf-journey-result {

    position: relative;

    z-index: 3;

    padding:
        55px 0 20px 25px;

}


.mf-result-ring {

    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom:
        22px;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            var(--maxblo-blue),
            var(--maxblo-indigo),
            var(--maxblo-violet));

    box-shadow:
        0 12px 30px rgba(36, 93, 232, .22);

}


.mf-result-ring span {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color:
        #ffffff;

    font-size:
        18px;

    background:
        rgba(255, 255, 255, .14);

}


.mf-journey-result small {

    color:
        var(--maxblo-blue);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.mf-journey-result h3 {

    margin:
        9px 0 12px;

    color:
        var(--maxblo-navy);

    font-size:
        28px;

    line-height:
        1;

    letter-spacing:
        -1px;

}


.mf-journey-result h3 span {

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

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.mf-journey-result p {

    max-width:
        180px;

    margin:
        0;

    color:
        #69738c;

    font-size:
        11px;

    line-height:
        1.7;

}


/* =========================================================
   BOTTOM
========================================================= */

.mf-journey-bottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-top:
        65px;

}


.mf-journey-bottom>span {

    width:
        100px;

    height:
        1px;

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

}


.mf-journey-bottom>span:last-child {

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

}


.mf-journey-bottom strong {

    color:
        var(--maxblo-navy);

    font-size:
        13px;

    letter-spacing:
        1px;

}


.mf-journey-bottom em {

    color:
        var(--maxblo-blue);

    font-style:
        normal;

}


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

@media (max-width: 1100px) {

    .mf-journey {

        grid-template-columns:
            1fr 1fr;

        gap:
            35px;

    }

    .mf-journey-track {

        display:
            none;

    }

    .mf-journey-start {

        padding:
            30px;

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

        border-radius:
            20px;

        background:
            linear-gradient(145deg,
                rgba(36, 93, 232, .025),
                rgba(112, 69, 232, .025));

    }

    .mf-journey-step {

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

        border-radius:
            20px;

        padding:
            75px 25px 25px;

    }

    .mf-journey-result {

        padding:
            30px;

    }

}


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

@media (max-width: 650px) {

    .mf-growth-journey {

        padding:
            85px 0;

    }

    .mf-journey-header {

        margin-bottom:
            55px;

    }

    .mf-journey-header h2 {

        font-size:
            48px;

        letter-spacing:
            -2.5px;

    }

    .mf-journey-header p {

        font-size:
            12px;

    }

    .mf-journey {

        grid-template-columns:
            1fr;

        gap:
            15px;

    }

    .mf-journey-start {

        padding:
            30px;

    }

    .mf-journey-step {

        min-height:
            285px;

    }

    .mf-journey-result {

        padding:
            30px;

        border-radius:
            20px;

        background:
            linear-gradient(145deg,
                rgba(36, 93, 232, .035),
                rgba(112, 69, 232, .035));

    }

}



/* =========================================================
   MINEFLOW - FEATURED WORK LIGHT THEME
========================================================= */

.design-project-area.design-project-2-style {
    background: #ffffff !important;
    color: #101820;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.design-project-title-box .tp-section-title-dirtyline {
    color: #101820 !important;
}


/* Featured */

.design-project-title-box .tp-section-title-dirtyline .tp-text-right-scroll {
    color: #101820 !important;
}


/* Work */

.design-project-title-box .tp-section-title-dirtyline .tp_text_invert_2 {
    color: #101820 !important;
}


/* Gradient accent */

.design-project-title-box .tp-section-title-dirtyline span:last-child {
    background:
        linear-gradient(90deg,
            #49c34e 0%,
            #0799b2 55%,
            #0085c8 100%);

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.design-project-title-box p {
    color: #647477 !important;
}


/* =========================================================
   PROJECT TITLES
========================================================= */

.design-project-content .design-project-title {
    color: #101820 !important;
}


.design-project-content .design-project-title a {
    color: #101820 !important;

    transition:
        color .3s ease;
}


.design-project-content .design-project-title a:hover {
    color: #0799b2 !important;
}


/* =========================================================
   PROJECT CATEGORY
========================================================= */

.design-project-content>span {
    color: #607477 !important;
}


/* =========================================================
   BUTTONS
========================================================= */

.design-project-area .tp-btn-sky-border {

    color: #101820 !important;

    border-color: #b8c5c6 !important;

    background: transparent;

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


.design-project-area .tp-btn-sky-border:hover {

    color: #ffffff !important;

    border-color: transparent !important;

    background:
        linear-gradient(135deg,
            #49c34e,
            #0799b2,
            #0085c8);
}


/* =========================================================
   PROJECT IMAGES
========================================================= */

.design-project-thumb {
    position: relative;
}


.design-project-thumb::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(135deg,
            rgba(73, 195, 78, .03),
            rgba(7, 153, 178, .05));
}


/* =========================================================
   PROJECT SEPARATION
========================================================= */

.design-project-item {

    border-color:
        rgba(16, 24, 32, .10);

}


/* =========================================================
   SUBTLE LIGHT GRID
========================================================= */

.design-project-area.design-project-2-style {

    background-color: #ffffff !important;

    background-image:

        linear-gradient(rgba(16, 24, 32, .035) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(16, 24, 32, .035) 1px,
            transparent 1px);

    background-size:
        70px 70px;
}


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

@media (max-width: 767px) {

    .design-project-area.design-project-2-style {

        background-size:
            45px 45px;

    }

}

/* =========================================================
   MAXBLO — DIGITAL GROWTH SHOWCASE
   EXISTING CLASS NAMES PRESERVED
========================================================= */

/* =========================================================
   MAXBLO DIGITAL GROWTH SHOWCASE
   IMPORTANT:
   EXISTING TEMPLATE CLASS NAMES ARE PRESERVED
========================================================= */

.design-project-area.design-project-2-style {

    --maxblo-navy: #18235F;
    --maxblo-blue: #245DE8;
    --maxblo-indigo: #3948D0;
    --maxblo-violet: #7045E8;

    position: relative;

    overflow: hidden;

    background: #ffffff !important;

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

}


/* =========================================================
   BACKGROUND
========================================================= */

.design-project-area.design-project-2-style::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 0;

    opacity: .45;

    background-image:

        linear-gradient(rgba(24, 35, 95, .022) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(24, 35, 95, .022) 1px,
            transparent 1px);

    background-size: 70px 70px;

}


/* =========================================================
   ALL CONTENT ABOVE BACKGROUND
========================================================= */

.design-project-area.design-project-2-style .container {

    position: relative;

    z-index: 2;

}


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

.design-project-title-wrap {

    position: relative;

    z-index: 3;

    margin-bottom: 90px !important;

}


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

.design-project-title-box .tp-section-title-dirtyline {

    margin: 0 !important;

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

    opacity: 1 !important;

    visibility: visible !important;

    -webkit-text-fill-color: var(--maxblo-navy) !important;

    -webkit-text-stroke: 0 !important;

    text-shadow: none !important;

}


/* Remove unwanted theme effects */

.design-project-title-box .tp-section-title-dirtyline::before,

.design-project-title-box .tp-section-title-dirtyline::after {

    display: none !important;

}


/* First heading line */

.design-project-title-box .tp-section-title-dirtyline .tp-text-right-scroll {

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

    opacity: 1 !important;

    visibility: visible !important;

    -webkit-text-fill-color: var(--maxblo-navy) !important;

}


/* Second heading */

.design-project-title-box .tp-section-title-dirtyline .tp_text_invert_2 {

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

    opacity: 1 !important;

    visibility: visible !important;

    -webkit-text-fill-color: var(--maxblo-navy) !important;

}


/* Gradient only on highlighted text */

.design-project-title-box .tp-section-title-dirtyline span:last-child {

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

    -webkit-background-clip: text !important;

    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    color: transparent !important;

}


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

.design-project-title-box p {

    max-width: 620px;

    margin:
        25px 0 0 !important;

    color:
        #66718A !important;

    font-size:
        15px !important;

    line-height:
        1.75 !important;

}


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

.design-project-btn {

    position: relative;

    z-index: 5;

}


.design-project-btn .tp-btn-sky-border {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    min-width: 160px;

    height: 50px;

    padding: 0 23px;

    color:
        #18235F !important;

    background:
        #ffffff !important;

    border:
        1px solid rgba(36, 93, 232, .22) !important;

    border-radius:
        50px !important;

    transition:
        all .35s ease;

}


.design-project-btn .tp-btn-sky-border:hover {

    color:
        #ffffff !important;

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

    border-color:
        transparent !important;

    box-shadow:
        0 15px 35px rgba(36, 93, 232, .20);

    transform:
        translateY(-3px);

}


/* =========================================================
   PROJECT ITEM
========================================================= */

.design-project-item {

    position: relative;

    margin-bottom:
        95px !important;

    padding-bottom:
        95px !important;

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

}


/* Last item */

.design-project-item:last-child {

    margin-bottom:
        0 !important;

    padding-bottom:
        20px !important;

    border-bottom:
        0 !important;

}


/* =========================================================
   PROJECT CONTENT
========================================================= */

.design-project-content {

    position:
        relative;

    z-index:
        5;

}


/* Decorative gradient line */

.design-project-content::before {

    content:
        "";

    display:
        block;

    width:
        48px;

    height:
        3px;

    margin-bottom:
        22px;

    border-radius:
        10px;

    background:
        linear-gradient(90deg,
            #245DE8,
            #7045E8);

}


/* =========================================================
   PROJECT TITLE
========================================================= */

.design-project-content .design-project-title {

    margin:
        0 0 18px !important;

}


/*
   IMPORTANT:
   Prevent theme dirtyline styles from making
   SEARCH / PERFORMANCE / DIGITAL pale.
*/

.design-project-content .design-project-title a {

    display:
        inline-block;

    color:
        #18235F !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    text-decoration:
        none !important;

    font-size:
        clamp(46px,
            5vw,
            76px) !important;

    line-height:
        .9 !important;

    font-weight:
        700 !important;

    letter-spacing:
        -3px !important;

    -webkit-text-fill-color:
        #18235F !important;

    transition:
        transform .4s ease,
        color .4s ease;

}


/* Gradient highlighted word */

.design-project-content .design-project-title a span {

    color:
        #245DE8 !important;

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

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

    -webkit-text-fill-color:
        transparent !important;

}


/* Hover */

.design-project-content .design-project-title a:hover {

    transform:
        translateX(6px);

}


/* =========================================================
   CATEGORY
========================================================= */

.design-project-content>span {

    display:
        block;

    margin:
        0 0 18px !important;

    color:
        #245DE8 !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    letter-spacing:
        1.5px !important;

    text-transform:
        uppercase;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.design-project-content p {

    max-width:
        500px;

    margin:
        0 0 25px !important;

    color:
        #66718A !important;

    font-size:
        14px !important;

    line-height:
        1.8 !important;

}


/* =========================================================
   BUTTON
========================================================= */

.design-project-content .tp-btn-sky-border {

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        145px;

    height:
        48px;

    padding:
        0 20px;

    color:
        #18235F !important;

    background:
        #ffffff !important;

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

    border-radius:
        50px !important;

    transition:
        all .35s ease;

}


.design-project-content .tp-btn-sky-border:hover {

    color:
        #ffffff !important;

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

    border-color:
        transparent !important;

    box-shadow:
        0 12px 30px rgba(36, 93, 232, .22);

    transform:
        translateY(-3px);

}


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

.design-project-thumb {

    position:
        relative;

    width:
        100%;

    min-height:
        360px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-radius:
        24px;

    background:
        linear-gradient(135deg,
            rgba(36, 93, 232, .035),
            rgba(112, 69, 232, .045));

    border:
        1px solid rgba(36, 93, 232, .08);

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

}


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

.design-project-thumb img {

    display:
        block;

    width:
        100% !important;

    height:
        auto !important;

    max-width:
        100%;

    object-fit:
        cover;

    opacity:
        1 !important;

    visibility:
        visible !important;

    transition:
        transform .8s cubic-bezier(.16, 1, .3, 1);

}


/* Hover image */

.design-project-item:hover .design-project-thumb img {

    transform:
        scale(1.035);

}


/* =========================================================
   IMAGE GLOW
========================================================= */

.design-project-thumb::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(135deg,
            rgba(36, 93, 232, .025),
            transparent 45%,
            rgba(112, 69, 232, .055));

}


/* =========================================================
   IMAGE SHINE
========================================================= */

.design-project-thumb::before {

    content:
        "";

    position:
        absolute;

    top:
        -100%;

    left:
        -50%;

    width:
        35%;

    height:
        300%;

    z-index:
        2;

    pointer-events:
        none;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .20),
            transparent);

    transform:
        rotate(25deg);

    transition:
        left 1s ease;

}


.design-project-item:hover .design-project-thumb::before {

    left:
        130%;

}


/* =========================================================
   ALTERNATING IMAGE SHADOW
========================================================= */

.design-project-item:nth-child(odd) .design-project-thumb {

    box-shadow:
        20px 25px 70px rgba(36, 93, 232, .10);

}


.design-project-item:nth-child(even) .design-project-thumb {

    box-shadow:
        -20px 25px 70px rgba(112, 69, 232, .10);

}


/* =========================================================
   REMOVE OLD THEME COLOR EFFECTS
========================================================= */

.design-project-area.design-project-2-style .tp-section-title-dirtyline span {

    text-shadow:
        none !important;

}


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

@media (max-width: 1199px) {

    .design-project-title-box .tp-section-title-dirtyline {

        font-size:
            70px !important;

    }

    .design-project-content .design-project-title a {

        font-size:
            56px !important;

    }

    .design-project-thumb {

        min-height:
            300px;

    }

}


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

@media (max-width: 767px) {

    .design-project-area.design-project-2-style {

        padding-top:
            90px !important;

        padding-bottom:
            60px !important;

    }


    .design-project-title-wrap {

        margin-bottom:
            65px !important;

    }


    .design-project-title-box .tp-section-title-dirtyline {

        font-size:
            50px !important;

        line-height:
            .95 !important;

    }


    .design-project-title-box p {

        font-size:
            13px !important;

    }


    .design-project-btn {

        margin-top:
            25px;

        text-align:
            left !important;

    }


    .design-project-item {

        margin-bottom:
            65px !important;

        padding-bottom:
            65px !important;

    }


    .design-project-content {

        margin-top:
            30px;

    }


    .design-project-content.pl-200 {

        padding-left:
            0 !important;

    }


    .design-project-content .design-project-title a {

        font-size:
            44px !important;

        letter-spacing:
            -2px !important;

    }


    .design-project-content p {

        font-size:
            13px !important;

    }


    .design-project-thumb {

        min-height:
            230px;

        border-radius:
            16px;

    }

}


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

@media (max-width: 480px) {

    .design-project-title-box .tp-section-title-dirtyline {

        font-size:
            42px !important;

    }


    .design-project-content .design-project-title a {

        font-size:
            37px !important;

    }


    .design-project-thumb {

        min-height:
            200px;

    }

}

/* =========================================================
   MAXBLO — FINAL CTA
   EXISTING CLASS NAMES PRESERVED
========================================================= */

.mf-final-cta {

    --maxblo-navy: #18235F;
    --maxblo-blue: #245DE8;
    --maxblo-indigo: #3948D0;
    --maxblo-violet: #7045E8;

    position: relative;

    padding: 125px 0 105px;

    overflow: hidden;

    background:
        radial-gradient(circle at 82% 48%,
            rgba(112, 69, 232, .075),
            transparent 32%),
        radial-gradient(circle at 65% 20%,
            rgba(36, 93, 232, .055),
            transparent 28%),
        #ffffff;

    color: var(--maxblo-navy);

}


/* =========================================================
   CONTENT
========================================================= */

.mf-final-cta-inner {

    position: relative;

    z-index: 5;

    max-width: 1050px;

}


/* =========================================================
   EYEBROW
========================================================= */

.mf-final-cta-eyebrow {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 30px;

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

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3.5px;

}


.mf-final-cta-eyebrow span {

    display: block;

    width: 48px;

    height: 2px;

    flex-shrink: 0;

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

}


/* =========================================================
   MAIN HEADING
========================================================= */

.mf-final-cta h2 {

    margin: 0;

    max-width: 1100px;

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

    font-size:
        clamp(54px, 6.7vw, 100px);

    line-height: .94;

    font-weight: 800;

    letter-spacing: -5px;

}


/* =========================================================
   GRADIENT HEADLINE
========================================================= */

.mf-final-cta h2 strong {

    display: block;

    margin-top: 3px;

    background:
        linear-gradient(90deg,
            var(--maxblo-blue) 0%,
            var(--maxblo-indigo) 48%,
            var(--maxblo-violet) 100%);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.mf-final-cta p {

    max-width: 650px;

    margin: 34px 0 32px;

    color: #66718A !important;

    font-size: 15px;

    line-height: 1.8;

}


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

.mf-final-cta-btn {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 7px 8px 7px 25px;

    min-height: 62px;

    border-radius: 60px;

    color: #ffffff !important;

    text-decoration: none !important;

    background:
        linear-gradient(110deg,
            var(--maxblo-blue),
            var(--maxblo-indigo) 55%,
            var(--maxblo-violet));

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 14px 35px rgba(36, 93, 232, .20),

        0 5px 15px rgba(112, 69, 232, .10);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


/* Button arrow */

.mf-final-cta-btn i {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    border-radius: 50%;

    color: #ffffff;

    background:
        rgba(255, 255, 255, .16);

    border:
        1px solid rgba(255, 255, 255, .20);

    font-style: normal;

    font-size: 18px;

    transition:
        transform .35s ease,
        background .35s ease;

}


/* Button hover */

.mf-final-cta-btn:hover {

    color: #ffffff !important;

    transform:
        translateY(-5px);

    box-shadow:
        0 22px 45px rgba(36, 93, 232, .25),

        0 8px 25px rgba(112, 69, 232, .15);

}


.mf-final-cta-btn:hover i {

    transform:
        rotate(45deg);

    background:
        rgba(255, 255, 255, .25);

}


/* =========================================================
   BOTTOM META
========================================================= */

.mf-final-cta-location {

    margin-top: 60px;

    padding-top: 20px;

    border-top:
        1px solid rgba(24, 35, 95, .10);

    color:
        #7B8499;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;

}


/* =========================================================
   DECORATIVE GLOW
========================================================= */

.mf-final-cta-glow {

    position: absolute;

    right: -180px;

    top: 50%;

    width: 600px;

    height: 600px;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(36, 93, 232, .10) 0%,
            rgba(57, 72, 208, .065) 30%,
            rgba(112, 69, 232, .045) 48%,
            transparent 72%);

    filter:
        blur(35px);

    pointer-events:
        none;

    animation:
        maxbloCtaGlow 8s ease-in-out infinite alternate;

}


@keyframes maxbloCtaGlow {

    0% {

        transform:
            translateY(-50%) scale(.92);

        opacity: .65;

    }

    100% {

        transform:
            translateY(-50%) scale(1.08);

        opacity: 1;

    }

}


/* =========================================================
   SUBTLE GRID
========================================================= */

.mf-final-cta::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background-image:

        linear-gradient(rgba(24, 35, 95, .022) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(24, 35, 95, .022) 1px,
            transparent 1px);

    background-size:
        70px 70px;

    mask-image:
        radial-gradient(ellipse at center,
            #000 0%,
            transparent 82%);

}


/* =========================================================
   SUBTLE LIGHT ORB
========================================================= */

.mf-final-cta::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    left: 42%;

    top: 15%;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(36, 93, 232, .035),
            transparent 70%);

    filter:
        blur(25px);

    pointer-events:
        none;

}


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

@media (max-width: 767px) {

    .mf-final-cta {

        padding:
            90px 0 75px;

    }


    .mf-final-cta-inner {

        max-width:
            100%;

    }


    .mf-final-cta-eyebrow {

        margin-bottom:
            22px;

        font-size:
            9px;

        letter-spacing:
            2.5px;

    }


    .mf-final-cta h2 {

        font-size:
            50px;

        line-height:
            .96;

        letter-spacing:
            -3px;

    }


    .mf-final-cta p {

        margin:
            28px 0;

        font-size:
            14px;

        line-height:
            1.75;

    }


    .mf-final-cta-btn {

        width:
            auto;

        min-height:
            58px;

    }


    .mf-final-cta-location {

        margin-top:
            45px;

        font-size:
            8px;

        letter-spacing:
            1.5px;

    }


    .mf-final-cta-glow {

        width:
            350px;

        height:
            350px;

        right:
            -180px;

    }

}


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

@media (max-width: 480px) {

    .mf-final-cta h2 {

        font-size:
            42px;

        letter-spacing:
            -2.5px;

    }


    .mf-final-cta-btn {

        padding-left:
            20px;

        gap:
            12px;

    }


    .mf-final-cta-btn i {

        width:
            44px;

        height:
            44px;

    }

}