/* =========================================================
   MAXBLO ABOUT HERO
   PREMIUM DIGITAL GROWTH THEME

   #18235F — Deep Navy
   #245DE8 — Electric Blue
   #3948D0 — Indigo
   #7045E8 — Violet
========================================================= */

.mf-about-hero {

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

    position: relative;

    min-height: 720px;

    height: 78vh;

    max-height: 850px;

    overflow: hidden;

    display: flex;

    align-items: center;

    background:
        #0a1238;

    color: #ffffff;

}


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

.mf-about-hero-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

}


.mf-about-hero-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: scale(1.07);

    animation:
        mfAboutHeroZoom 14s ease-out forwards;

}


@keyframes mfAboutHeroZoom {

    from {

        transform:
            scale(1.10);

    }

    to {

        transform:
            scale(1);

    }

}


/* =========================================================
   MAXBLO OVERLAY
========================================================= */

.mf-about-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(90deg,

            rgba(10, 18, 56, .98) 0%,

            rgba(15, 26, 75, .93) 28%,

            rgba(24, 35, 95, .72) 52%,

            rgba(57, 72, 208, .30) 75%,

            rgba(112, 69, 232, .12) 100%);

}


/* Additional lower gradient */

.mf-about-hero-overlay::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(0deg,
            rgba(7, 13, 43, .72) 0%,
            transparent 35%,
            transparent 75%,
            rgba(24, 35, 95, .25) 100%);

}


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

.mf-about-hero-grid {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    opacity: .20;

    background-image:

        linear-gradient(rgba(255, 255, 255, .035) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(255, 255, 255, .035) 1px,
            transparent 1px);

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(90deg,
            #000 0%,
            rgba(0, 0, 0, .5) 60%,
            transparent 100%);

}


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

.mf-about-hero .container {

    position: relative;

    z-index: 5;

    width: 100%;

}


.mf-about-hero-content {

    max-width: 820px;

    padding-top: 55px;

}


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

.mf-about-eyebrow {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 27px;

    color:
        #79a1ff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3.5px;

}


.mf-about-eyebrow span {

    display: block;

    width: 48px;

    height: 2px;

    background:

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

}


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

.mf-about-hero h1 {

    margin: 0;

    max-width: 900px;

    color:
        #ffffff !important;

    font-size:
        clamp(58px, 7.5vw, 108px);

    font-weight: 800;

    line-height: .90;

    letter-spacing: -5px;

}


/* Gradient heading */

.mf-about-hero h1 strong {

    display: block;

    margin-top: 4px;

    font-weight: 800;

    background:

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

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    color:
        transparent;

}


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

.mf-about-hero-content>p {

    max-width:
        610px;

    margin:
        32px 0 34px;

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

    font-size:
        15px;

    line-height:
        1.85;

}


/* =========================================================
   ACTIONS
========================================================= */

.mf-about-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

}


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

.mf-about-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    min-height:
        54px;

    padding:
        0 23px;

    border-radius:
        50px;

    font-size:
        12px;

    font-weight:
        800;

    text-decoration:
        none !important;

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

}


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

.mf-about-btn-primary {

    color:
        #ffffff !important;

    background:

        linear-gradient(135deg,
            #245DE8,
            #3948D0 52%,
            #7045E8);

    box-shadow:

        0 12px 32px rgba(36, 93, 232, .25);

}


.mf-about-btn-primary span {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    border-radius:
        50%;

    color:
        #ffffff;

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

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

    transition:
        transform .35s ease;

}


.mf-about-btn-primary:hover {

    color:
        #ffffff !important;

    transform:
        translateY(-4px);

    box-shadow:

        0 20px 45px rgba(112, 69, 232, .28);

}


.mf-about-btn-primary:hover span {

    transform:
        rotate(45deg);

}


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

.mf-about-btn-outline {

    color:
        #ffffff !important;

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

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

    backdrop-filter:
        blur(10px);

}


.mf-about-btn-outline:hover {

    color:
        #ffffff !important;

    border-color:
        rgba(111, 156, 255, .70);

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

    transform:
        translateY(-4px);

}


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

.mf-about-meta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    max-width:
        980px;

    margin-top:
        85px;

    padding-top:
        20px;

    border-top:
        1px solid rgba(255, 255, 255, .13);

}


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

.mf-about-location {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.mf-meta-dot {

    width:
        8px;

    height:
        8px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        #245DE8;

    box-shadow:

        0 0 0 5px rgba(36, 93, 232, .12),

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

    animation:
        mfAboutDotPulse 2.2s ease-in-out infinite;

}


@keyframes mfAboutDotPulse {

    0%,
    100% {

        transform:
            scale(1);

        opacity:
            1;

    }

    50% {

        transform:
            scale(.75);

        opacity:
            .55;

    }

}


.mf-about-location small {

    display:
        block;

    margin-bottom:
        3px;

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

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.mf-about-location strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        10px;

    letter-spacing:
        1.3px;

}


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

.mf-about-scroll {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

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

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.mf-about-scroll span {

    width:
        35px;

    height:
        1px;

    background:

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

}


/* =========================================================
   PAGE NUMBER
========================================================= */

.mf-about-number {

    color:
        #ffffff;

    font-size:
        24px;

    font-weight:
        700;

    letter-spacing:
        -1px;

}


.mf-about-number span {

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

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        1px;

}


/* =========================================================
   DECORATIVE CORNER
========================================================= */

.mf-about-corner {

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    z-index:
        4;

    width:
        230px;

    height:
        230px;

    border-top-left-radius:
        100%;

    background:

        radial-gradient(circle at 100% 100%,
            rgba(112, 69, 232, .20),
            rgba(36, 93, 232, .08) 45%,
            transparent 72%);

    pointer-events:
        none;

}


/* =========================================================
   DECORATIVE CORNER LINE
========================================================= */

.mf-about-corner::after {

    content:
        "";

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    width:
        180px;

    height:
        180px;

    border-top:
        1px solid rgba(111, 156, 255, .18);

    border-left:
        1px solid rgba(111, 156, 255, .10);

    border-top-left-radius:
        100%;

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991px) {

    .mf-about-hero {

        min-height:
            680px;

        height:
            auto;

    }


    .mf-about-hero-content {

        padding:
            120px 0 60px;

    }


    .mf-about-meta {

        margin-top:
            65px;

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 767px) {

    .mf-about-hero {

        min-height:
            720px;

    }


    .mf-about-hero-overlay {

        background:

            linear-gradient(90deg,
                rgba(10, 18, 56, .97),
                rgba(15, 26, 75, .82));

    }


    .mf-about-hero-content {

        padding:
            115px 20px 55px;

    }


    .mf-about-eyebrow {

        margin-bottom:
            22px;

        font-size:
            8px;

        letter-spacing:
            2.4px;

    }


    .mf-about-eyebrow span {

        width:
            35px;

    }


    .mf-about-hero h1 {

        font-size:
            52px;

        line-height:
            .93;

        letter-spacing:
            -3px;

    }


    .mf-about-hero-content>p {

        margin:
            26px 0 30px;

        font-size:
            13px;

        line-height:
            1.75;

    }


    .mf-about-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .mf-about-btn {

        width:
            100%;

    }


    .mf-about-meta {

        margin-top:
            55px;

    }


    .mf-about-scroll,
    .mf-about-number {

        display:
            none;

    }


    .mf-about-corner {

        width:
            130px;

        height:
            130px;

    }

}


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

@media (max-width: 480px) {

    .mf-about-hero h1 {

        font-size:
            45px;

        letter-spacing:
            -2.5px;

    }


    .mf-about-hero-content {

        padding-left:
            15px;

        padding-right:
            15px;

    }

}


/* =========================================================
   ENTRANCE ANIMATION
========================================================= */

.mf-about-eyebrow,
.mf-about-hero h1,
.mf-about-hero-content>p,
.mf-about-actions,
.mf-about-meta {

    opacity:
        0;

    transform:
        translateY(30px);

}


.mf-about-loaded .mf-about-eyebrow {

    animation:
        mfAboutReveal .7s .15s ease forwards;

}


.mf-about-loaded h1 {

    animation:
        mfAboutReveal .8s .25s ease forwards;

}


.mf-about-loaded .mf-about-hero-content>p {

    animation:
        mfAboutReveal .7s .4s ease forwards;

}


.mf-about-loaded .mf-about-actions {

    animation:
        mfAboutReveal .7s .5s ease forwards;

}


.mf-about-loaded .mf-about-meta {

    animation:
        mfAboutReveal .7s .65s ease forwards;

}


@keyframes mfAboutReveal {

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   MAXBLO ABOUT SECTION
   BRAND COLORS

   #18235F = Deep Navy
   #245DE8 = Electric Blue
   #3948D0 = Indigo
   #7045E8 = Violet
========================================================= */


/* =========================================================
   ABOUT SECTION
========================================================= */

.studio-about-area {

    position: relative;

    background: #ffffff;

    color: #18235F;

}


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

.studio-about-area .tp-section-subtitle-clash {

    color:
        #3948D0 !important;

}


.studio-about-area .tp-section-subtitle-clash i svg rect {

    fill:
        #3948D0 !important;

}


.studio-about-area .tp-section-subtitle-clash i svg path {

    stroke:
        #3948D0 !important;

}


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

.studio-about-area .tp-section-title-clash {

    color:
        #18235F !important;

}


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

.studio-about-content p {

    color:
        #65708A !important;

    font-size:
        15px;

    line-height:
        1.85;

}


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

.mf-story-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        250px;

    height:
        58px;

    padding:
        0 30px;

    border:
        1.5px solid #245DE8 !important;

    border-radius:
        50px;

    background:
        #ffffff !important;

    color:
        #18235F !important;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        .4px;

    text-transform:
        uppercase;

    text-decoration:
        none;

    transition:
        all .35s ease;

}


.mf-story-btn:hover {

    color:
        #ffffff !important;

    border-color:
        transparent !important;

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

    transform:
        translateY(-4px);

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

}


/* =========================================================
   360° STAT CARD
========================================================= */

.mf-stat-box {

    position:
        relative;

    width:
        100%;

    max-width:
        390px;

    min-height:
        260px;

    padding:
        32px 34px;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid #e4e8f2;

    border-top:
        3px solid #245DE8;

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

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

}


/* Decorative gradient */

.mf-stat-box::after {

    content:
        "";

    position:
        absolute;

    right:
        -80px;

    bottom:
        -100px;

    width:
        240px;

    height:
        240px;

    border-radius:
        50%;

    background:
        radial-gradient(circle,
            rgba(112, 69, 232, .13),
            rgba(36, 93, 232, .07) 45%,
            transparent 72%);

    pointer-events:
        none;

}


/* Hover */

.mf-stat-box:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 28px 65px rgba(24, 35, 95, .12);

}


/* =========================================================
   STAT LABEL
========================================================= */

.mf-stat-label {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    margin-bottom:
        5px;

    color:
        #3948D0 !important;

    font-size:
        12px !important;

    font-weight:
        800 !important;

    line-height:
        1.3;

    letter-spacing:
        1.7px;

    text-transform:
        uppercase;

}


/* =========================================================
   STAT NUMBER
========================================================= */

.mf-stat-number {

    position:
        relative;

    z-index:
        2;

    margin:
        5px 0 0;

    font-size:
        clamp(80px, 8vw, 125px) !important;

    font-weight:
        800 !important;

    line-height:
        .85;

    letter-spacing:
        -6px;

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

    background-clip:
        text;

    -webkit-background-clip:
        text;

    color:
        transparent !important;

    -webkit-text-fill-color:
        transparent;

}


/* =========================================================
   STAT ACCENT LINE
========================================================= */

.mf-stat-line {

    position:
        relative;

    z-index:
        2;

    width:
        85px;

    height:
        3px;

    margin-top:
        20px;

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

}


/* =========================================================
   STAT BOTTOM TEXT
========================================================= */

.mf-stat-bottom {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    margin-top:
        12px;

    color:
        #7B8499;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;

}


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

.studio-about-thumb img {

    transition:
        transform .6s ease;

}


.studio-about-thumb:hover img {

    transform:
        scale(1.025);

}


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

@media (max-width: 767px) {

    .studio-about-area {

        padding-top:
            90px !important;

        padding-bottom:
            80px !important;

    }


    .studio-about-content p {

        font-size:
            14px;

        line-height:
            1.75;

    }


    .mf-story-btn {

        min-width:
            220px;

        height:
            54px;

        font-size:
            12px;

    }

}

/* =========================================================
   MAXBLO METHOD CARD
========================================================= */

.mf-stat-box {

    position: relative;

    width: 100%;
    max-width: 390px;
    min-height: 300px;

    padding: 30px 32px;

    overflow: hidden;

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #f8faff 58%,
            #f2f0ff 100%);

    border: 1px solid #e0e5f2;

    border-top: 3px solid #245DE8;

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

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

}


/* subtle violet glow */

.mf-stat-box::after {

    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: -90px;
    bottom: -100px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(112, 69, 232, .18),
            rgba(36, 93, 232, .05) 50%,
            transparent 72%);

    pointer-events: none;

}


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

.mf-method-top {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;

}


.mf-method-top span {

    color: #3948D0;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.mf-method-top small {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    color: #ffffff;

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

    font-size: 9px;

    font-weight: 800;

}


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

.mf-method-heading {

    position: relative;

    z-index: 3;

    color: #18235F;

    font-size: 25px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: -1px;

}


.mf-method-heading strong {

    display: block;

    margin-top: 4px;

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

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}


/* =========================================================
   NETWORK
========================================================= */

.mf-method-network {

    position: relative;

    width: 190px;

    height: 105px;

    margin: 20px auto 16px;

}


/* center */

.mf-network-center {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 50px;
    height: 50px;

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

    display: flex;

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

    border-radius: 50%;

    color: #ffffff;

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

    box-shadow:
        0 8px 25px rgba(57, 72, 208, .28);

    font-size: 12px;

    font-weight: 800;

}


/* nodes */

.mf-node {

    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #245DE8;

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

    animation:
        mfNodePulse 2.5s ease-in-out infinite;

}


.mf-node-1 {
    left: 18px;
    top: 20px;
}

.mf-node-2 {
    right: 18px;
    top: 20px;
    animation-delay: .4s;
}

.mf-node-3 {
    left: 18px;
    bottom: 20px;
    animation-delay: .8s;
}

.mf-node-4 {
    right: 18px;
    bottom: 20px;
    animation-delay: 1.2s;
}


@keyframes mfNodePulse {

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

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

}


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

.mf-line {

    position: absolute;

    height: 1px;

    background:
        linear-gradient(90deg,
            rgba(36, 93, 232, .12),
            rgba(57, 72, 208, .75),
            rgba(112, 69, 232, .12));

    transform-origin: left center;

}


.mf-line-1 {

    width: 72px;

    left: 27px;
    top: 25px;

    transform: rotate(22deg);

}


.mf-line-2 {

    width: 72px;

    left: 94px;
    top: 25px;

    transform: rotate(158deg);

}


.mf-line-3 {

    width: 72px;

    left: 27px;
    bottom: 25px;

    transform: rotate(-22deg);

}


.mf-line-4 {

    width: 72px;

    right: 27px;
    bottom: 25px;

    transform: rotate(202deg);

}


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

.mf-method-tags {

    position: relative;

    z-index: 3;

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    padding-top: 12px;

    border-top:
        1px solid #e3e7f1;

}


.mf-method-tags span {

    padding: 6px 9px;

    border-radius: 30px;

    color: #68738C;

    background: #f5f7fc;

    border: 1px solid #e4e8f2;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;

}


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

.mf-stat-box:hover {

    transform:
        translateY(-8px);

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

}


.mf-stat-box:hover .mf-network-center {

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

}


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

@media (max-width: 767px) {

    .mf-stat-box {

        max-width: 100%;

    }

}

/* =========================================================
   MAXBLO WORK AREA ("HOW WE WORK")
   Replace template orange (#FF5722) with brand gradient
   #245DE8 = Electric Blue
   #3948D0 = Indigo
   #7045E8 = Violet
========================================================= */

.tp-work-area .tp-section-subtitle.pre::before {

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

}

.tp-work-area .tp-work-number span {

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

}




/* =========================================================
                                 MAXBLO SERVICE  SECTION
                ========================================================= */

.studio-service-area {

    position: relative;

    overflow: hidden;

    background: #ffffff !important;

    color: #18235F;

}


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

.studio-service-area::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .45;

    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: 72px 72px;

}


/* =========================================================
                   MAIN TITLE
                ========================================================= */

.studio-service-area .tp-section-title-clash {

    color:
        #18235F !important;

}


/* =========================================================
                   SUBTITLE
                ========================================================= */

.studio-service-area .tp-section-subtitle-clash {

    color:
        #3948D0 !important;

}


.studio-service-area .tp-section-subtitle-clash i {

    margin-left:
        12px;

}


.studio-service-area .tp-section-subtitle-clash svg path {

    stroke:
        #3948D0 !important;

}


/* =========================================================
                   SERVICE LIST
                ========================================================= */

.studio-service-item-wrap {

    position:
        relative;

}


/* =========================================================
                   SERVICE ITEM
                ========================================================= */

.studio-service-item-wrap .tp-award-item {

    position:
        relative;

    padding:
        28px 0;

    border-top:
        1px solid #e5e8f0;

    transition:
        border-color .35s ease;

}


/* Last border */

.studio-service-item-wrap .tp-award-item:last-child {

    border-bottom:
        1px solid #e5e8f0;

}


/* =========================================================
                   YEAR / NUMBER
                ========================================================= */

.studio-service-item-wrap .tp-award-year {

    display:
        inline-block;

    margin-right:
        28px;

    min-width:
        28px;

    color:
        #8790a5 !important;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        1px;

    transition:
        color .35s ease;

}


/* =========================================================
                   SERVICE NAME
                ========================================================= */

.studio-service-item-wrap .tp-award-text {

    color:
        #18235F !important;

    font-size:
        clamp(25px, 3vw, 43px);

    font-weight:
        600;

    letter-spacing:
        -1.5px;

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

}


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

.studio-service-item-wrap .tp-award-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    border:
        1px solid #dfe4f0;

    border-radius:
        50%;

    color:
        #3948D0;

    background:
        #ffffff;

    transition:
        all .35s ease;

}


.studio-service-item-wrap .tp-award-icon svg {

    transition:
        transform .35s ease;

}


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

.studio-service-item-wrap .tp-award-item::after {

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

}


.studio-service-item-wrap .tp-award-item:hover {

    border-color:
        rgba(57, 72, 208, .35);

}


.studio-service-item-wrap .tp-award-item:hover .tp-award-year {

    color:
        #ffffff !important;

}


.studio-service-item-wrap .tp-award-item:hover .tp-award-text {

    color:
        #ffffff !important;

    transform:
        translateX(8px);

}


.studio-service-item-wrap .tp-award-item:hover .tp-award-icon {

    color:
        #ffffff;

    border-color:
        transparent;

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

    box-shadow:
        0 10px 25px rgba(57, 72, 208, .20);

}


.studio-service-item-wrap .tp-award-item:hover .tp-award-icon svg {

    transform:
        rotate(45deg);

}


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

.studio-service-reveal-img {

    position:
        absolute;

    z-index:
        1;

    width:
        280px;

    height:
        360px;

    overflow:
        hidden;

    border-radius:
        8px;

    background-position:
        center;

    background-size:
        cover;

    opacity:
        0;

    pointer-events:
        none;

    box-shadow:
        0 30px 80px rgba(24, 35, 95, .20);

    transform:
        scale(.92);

    transition:
        opacity .35s ease,
        transform .45s ease;

}


/*
                   The theme's existing hover-reveal
                   JavaScript will control positioning.
                */

.hover-reveal-item:hover .studio-service-reveal-img {

    opacity:
        1;

    transform:
        scale(1);

}


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

@media (max-width: 767px) {

    .studio-service-area {

        padding-top:
            50px !important;

    }


    .studio-service-area .tp-award-item {

        padding:
            22px 0;

    }


    .studio-service-area .tp-award-text {

        font-size:
            24px;

        letter-spacing:
            -.7px;

    }


    .studio-service-area .tp-award-year {

        margin-right:
            12px;

        font-size:
            9px;

    }


    .studio-service-area .tp-award-icon {

        width:
            38px;

        height:
            38px;

    }


    /* Avoid floating reveal images on mobile */

    .studio-service-reveal-img {

        display:
            none !important;

    }

}


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

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

    .studio-service-item-wrap .tp-award-item,
    .studio-service-item-wrap .tp-award-text,
    .studio-service-item-wrap .tp-award-icon,
    .studio-service-reveal-img {

        transition:
            none !important;

    }

}

/* =========================================
   MINEFLOW FINAL FORM
========================================= */

.mineflow-final-form-area {
    position: relative;
    padding: 150px 0;
    background: #ffffff;
    overflow: hidden;
}

/* subtle grid */
.mineflow-final-form-area::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;


    background-size: 60px 60px;
}


/* CONTAINER */

.mineflow-form-container {
    position: relative;
    z-index: 2;

    width: min(1450px, calc(100% - 80px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;

    align-items: start;
}


/* =========================================
   LEFT SIDE
========================================= */

.mineflow-form-intro {
    padding-top: 20px;
}

.mineflow-form-label {
    position: relative;

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

    margin-bottom: 28px;

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

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #245DE8;
}

.mineflow-form-label::before {
    content: "";

    width: 30px;
    height: 1px;

    margin-right: 12px;

    background: #7045E8;
}


.mineflow-form-intro h2 {
    margin: 0;

    max-width: 700px;

    font-size: clamp(52px, 5vw, 88px);
    line-height: 0.92;

    letter-spacing: -4px;
    font-weight: 800;

    color: #10152D;
}

.mineflow-form-intro h2 span {
    display: block;

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

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

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


.mineflow-form-intro>p {
    max-width: 530px;

    margin: 40px 0 55px;

    font-size: 17px;
    line-height: 1.7;

    color: #667085;
}


/* CONTACT DETAILS */

.mineflow-contact-info {
    display: flex;
    flex-direction: column;

    gap: 25px;

    padding-top: 30px;

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

.mineflow-contact-info div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mineflow-contact-info small {
    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;

    color: #245DE8;
}

.mineflow-contact-info strong {
    font-size: 15px;
    font-weight: 600;

    color: #10152D;
}


/* =========================================
   FORM BOX
========================================= */

.mineflow-form-box {
    position: relative;

    padding: 55px;

    background: #F5F7FC;

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


/* gradient top line */

.mineflow-form-box::before {
    content: "";

    position: absolute;

    top: -2px;
    left: 0;

    width: 100%;
    height: 4px;

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


/* FORM ROW */

.mineflow-form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;
}


/* FIELD */

.mineflow-field {
    margin-bottom: 28px;
}

.mineflow-field label {
    display: block;

    margin-bottom: 10px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;

    color: #10152D;
}


.mineflow-field input,
.mineflow-field select,
.mineflow-field textarea {

    width: 100%;

    padding: 16px 18px;

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

    background: #ffffff;

    outline: none;

    border-radius: 0;

    font-family: inherit;

    font-size: 14px;

    color: #10152D;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


.mineflow-field input {
    height: 58px;
}

.mineflow-field textarea {
    resize: vertical;
    min-height: 140px;
}


/* SELECT */

.mineflow-field select {
    height: 58px;

    cursor: pointer;
}


/* FOCUS */

.mineflow-field input:focus,
.mineflow-field select:focus,
.mineflow-field textarea:focus {

    border-color: #245DE8;

    box-shadow:
        0 0 0 3px rgba(36, 93, 232, 0.08);

    background: #ffffff;
}


/* PLACEHOLDER */

.mineflow-field input::placeholder,
.mineflow-field textarea::placeholder {
    color: #98a2b3;
}


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

.mineflow-submit-btn {

    display: inline-flex;

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

    gap: 30px;

    min-width: 205px;

    padding: 7px 8px 7px 24px;

    border: none;

    border-radius: 50px;

    background: #245DE8;

    color: #ffffff;

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

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


.mineflow-submit-arrow {

    display: flex;

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

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background: #7045E8;

    color: #ffffff;

    font-size: 20px;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.mineflow-submit-btn:hover {

    transform: translateY(-3px);

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

    background: #1c4bc4;
}


.mineflow-submit-btn:hover .mineflow-submit-arrow {

    transform: rotate(45deg);

    background: #10152D;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1199px) {

    .mineflow-form-container {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    .mineflow-form-box {
        padding: 40px;
    }

}


@media (max-width: 991px) {

    .mineflow-final-form-area {
        padding: 100px 0;
    }

    .mineflow-form-container {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .mineflow-form-intro h2 {
        max-width: 800px;
    }

}


@media (max-width: 767px) {

    .mineflow-final-form-area {
        padding: 80px 0;
    }

    .mineflow-form-container {
        width: calc(100% - 35px);
    }

    .mineflow-form-intro h2 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .mineflow-form-intro>p {
        font-size: 15px;
        margin: 30px 0 40px;
    }

    .mineflow-form-box {
        padding: 30px 22px;
    }

    .mineflow-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

}


@media (max-width: 480px) {

    .mineflow-form-intro h2 {
        font-size: 40px;
    }

    .mineflow-form-box {
        padding: 25px 18px;
    }

    .mineflow-submit-btn {
        width: 100%;
        justify-content: space-between;
    }

}