@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* =========================================================
                SERVICES INTRO V3
========================================================= */

.nx-service-intro {

    position: relative;

    overflow: hidden;

    padding:
        120px 0;

    background:
        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #edf4f7 100%
        );

    font-family:
        'Outfit',
        sans-serif;

}

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

.nx-service-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(rgba(4,69,105,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(4,69,105,0.03) 1px, transparent 1px);

    background-size: 70px 70px;

    z-index: 1;

}

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

.nx-service-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    z-index: 1;

}

.nx-service-glow-left {

    width: 420px;
    height: 420px;

    background:
        rgba(4,69,105,0.08);

    top: -180px;
    left: -180px;

}

.nx-service-glow-right {

    width: 520px;
    height: 520px;

    background:
        rgba(5,143,72,0.08);

    right: -220px;
    bottom: -260px;

}

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

.nx-service-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1380px;

    margin: auto;

    padding: 0 28px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 520px);

    gap: 70px;

    align-items: center;

}

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

.nx-service-left {

    position: relative;

}

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

.nx-service-top {

    margin-bottom: 38px;

}

/* =========================================================
                TAG
========================================================= */

.nx-service-tag {

    width: fit-content;

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        8px 14px;

    border-radius: 100px;

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

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

    margin-bottom: 24px;

    box-shadow:
        0 10px 30px rgba(4,69,105,0.04);

}

.nx-service-tag span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #058F48;

}

.nx-service-tag p {

    color:
        #044569;

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

    letter-spacing: 1px;

    text-transform: uppercase;

}

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

.nx-service-top h2 {

    color:
        #102131;

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

    line-height: 0.92;

    letter-spacing: -4px;

    font-weight: 900;

    max-width: 760px;

}

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

.nx-service-text {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 26px;

    margin-bottom: 42px;

}

.nx-service-text p {

    color:
        #647381;

    font-size: 16px;

    line-height: 1.95;

}

/* =========================================================
                BAR
========================================================= */

.nx-service-bar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    padding:
        28px 34px;

    border-radius: 30px;

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

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

    box-shadow:
        0 25px 70px rgba(4,69,105,0.05);

}

/* ITEM */

.nx-bar-item {

    flex: 1;

}

/* NUMBER */

.nx-bar-item h4 {

    color:
        #102131;

    font-size: 42px;
    font-weight: 900;

    line-height: 1;

    letter-spacing: -2px;

    margin-bottom: 10px;

}

/* TEXT */

.nx-bar-item p {

    color:
        #647381;

    font-size: 13px;

    line-height: 1.6;

}

/* DIVIDER */

.nx-bar-divider {

    width: 1px;
    height: 50px;

    background:
        rgba(4,69,105,0.08);

}

/* =========================================================
                RIGHT
========================================================= */

.nx-service-right {

    position: relative;

}

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

.nx-service-image {

    position: relative;

    overflow: hidden;

    border-radius: 38px;

    box-shadow:
        0 40px 100px rgba(4,69,105,0.12);

}

.nx-service-image img {

    width: 100%;

    height: 760px;

    object-fit: cover;

    display: block;

    transition: 0.7s ease;

}

.nx-service-image:hover img {

    transform: scale(1.05);

}

/* OVERLAY */

.nx-service-image::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(3,19,29,0.22),
            rgba(3,19,29,0.02)
        );

    z-index: 1;

}

/* =========================================================
                FLOATING CARD
========================================================= */

.nx-floating-card {

    position: absolute;

    left: -40px;
    bottom: 50px;

    max-width: 320px;

    padding:
        28px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #044569,
            #0b5c89
        );

    box-shadow:
        0 35px 80px rgba(4,69,105,0.22);

    z-index: 5;

}

/* LINE */

.nx-floating-line {

    width: 70px;
    height: 4px;

    border-radius: 100px;

    background:
        linear-gradient(
            90deg,
            #27ff81,
            #83ffd0
        );

    margin-bottom: 18px;

}

/* TEXT */

.nx-floating-card p {

    color:
        rgba(255,255,255,0.88);

    font-size: 15px;

    line-height: 1.85;

}

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

@media(max-width:1100px){

    .nx-service-container{

        grid-template-columns: 1fr;

        gap: 60px;

    }

    .nx-floating-card{

        left: 30px;

    }

}

@media(max-width:768px){

    .nx-service-intro{

        padding:
            90px 0;

    }

    .nx-service-container{

        padding: 0 20px;

    }

    .nx-service-top h2{

        font-size: 56px;

        line-height: 1;

        letter-spacing: -2px;

    }

    .nx-service-text{

        grid-template-columns: 1fr;

        gap: 20px;

    }

    .nx-service-image img{

        height: 520px;

    }

    .nx-service-bar{

        padding:
            22px;

    }

}

@media(max-width:500px){

    .nx-service-intro{

        padding:
            80px 0;

    }

    .nx-service-container{

        padding: 0 16px;

    }

    .nx-service-top h2{

        font-size: 40px;

    }

    .nx-service-bar{

        flex-direction: column;

        /* align-items: flex-start; */

        gap: 18px;

        border-radius: 22px;

    }

    .nx-bar-divider{

        width: 100%;
        height: 1px;

    }

    .nx-service-image{

        border-radius: 24px;

    }

    .nx-service-image img{

        height: 420px;

    }

    .nx-floating-card{

        position: relative;

        left: unset;
        bottom: unset;

        max-width: 100%;

        margin-top: 18px;

        border-radius: 22px;

    }

}



@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* =========================================================
                NEXT LEVEL SERVICES
========================================================= */

.nxs-services {

    position: relative;

    overflow: hidden;

    padding:
        140px 0;

    background:
        linear-gradient(
            180deg,
            #f7fbfd 0%,
            #edf4f7 100%
        );

    font-family:
        'Outfit',
        sans-serif;

}

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

.nxs-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(rgba(4,69,105,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(4,69,105,0.03) 1px, transparent 1px);

    background-size: 70px 70px;

}

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

.nxs-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;

}

.nxs-glow-left {

    width: 500px;
    height: 500px;

    background:
        rgba(4,69,105,0.10);

    top: -220px;
    left: -200px;

}

.nxs-glow-right {

    width: 520px;
    height: 520px;

    background:
        rgba(5,143,72,0.08);

    right: -240px;
    bottom: -240px;

}

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

.nxs-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1450px;

    margin: auto;

    padding: 0 28px;

}

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

.nxs-top {

    margin-bottom: 90px;

    max-width: 900px;

}

/* TAG */

.nxs-tag {

    width: fit-content;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        8px 14px;

    border-radius: 100px;

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

    backdrop-filter: blur(12px);

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

    margin-bottom: 28px;

}

.nxs-tag span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #058F48;

}

.nxs-tag p {

    color:
        #044569;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}

/* HEADING */

.nxs-top h2 {

    color:
        #102131;

    font-size:
        clamp(52px, 4vw, 110px);

    line-height: 0.90;

    letter-spacing:1px;

    font-weight: 900;

}

/* =========================================================
                WRAP
========================================================= */

.nxs-wrap {

    display: flex;

    flex-direction: column;

    gap: 28px;

}

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

.nxs-card {

    position: relative;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        460px
        minmax(0, 1fr);

    border-radius: 40px;

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

    backdrop-filter: blur(18px);

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

    box-shadow:
        0 35px 100px rgba(4,69,105,0.07);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;

}

/* HOVER */

.nxs-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 50px 120px rgba(4,69,105,0.12);

}

/* PREMIUM LIGHT */

.nxs-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.45),
            transparent 55%
        );

}

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

.nxs-left {

    position: relative;

    padding:
        50px;

    background:
        linear-gradient(
            180deg,
            #044569,
            #0b5c89
        );

    overflow: hidden;

}

/* SIDE LIGHT */

.nxs-left::before {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(255,255,255,0.12),
            transparent);

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

}

/* NUMBER */

.nxs-number {

    color:
        rgba(255,255,255,0.18);

    font-size: 110px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: -5px;

    /* margin-bottom: 40px; */

}

/* CONTENT */

.nxs-left-content {

    position: relative;

    z-index: 2;

}

/* LABEL */

.nxs-left-content span {

    display: inline-block;

    margin-bottom: 22px;

    color:
        rgba(255,255,255,0.72);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}

/* HEADING */

.nxs-left-content h3 {

    color:
        #ffffff;

    font-size: 32px;

    line-height: 0.94;

    letter-spacing: 1px;

    font-weight: 800;

}

/* =========================================================
                RIGHT
========================================================= */

.nxs-right {

    position: relative;

    z-index: 2;

    padding:
        50px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}

/* TEXT */

.nxs-right p {

    color:
        #647381;

    font-size: 16px;

    line-height: 2;

    margin-bottom: 20px;

    max-width: 720px;

}

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

.nxs-bottom {

    margin-top: 28px;

}

/* LINE */

.nxs-line {

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(4,69,105,0.12),
            transparent
        );

    margin-bottom: 24px;

}

/* BEST */

.nxs-best {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 30px;

}

/* LABEL */

.nxs-best span {

    min-width: 100px;

    color:
        #044569;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}

/* TEXT */

.nxs-best p {

    color:
        #102131;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.9;

    margin-bottom: 0;

}

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

@media(max-width:1200px){

    .nxs-card{

        grid-template-columns: 1fr;

    }

}

@media(max-width:768px){

    .nxs-services{

        padding:
            90px 0;

    }

    .nxs-container{

        padding: 0 20px;

    }

    .nxs-top{

        margin-bottom: 50px;

    }

    .nxs-top h2{

        font-size: 62px;

        line-height: 1;

        letter-spacing: -3px;

    }

    .nxs-left{

        padding: 34px;

    }

    .nxs-right{

        padding: 34px;

    }

    .nxs-number{

        font-size: 80px;

        margin-bottom: 12px;

    }

    .nxs-left-content h3{

        font-size: 42px;

    }

    .nxs-best{

        flex-direction: column;

        gap: 14px;

    }

}

@media(max-width:500px){

    .nxs-services{

        padding:
            80px 0;

    }

    .nxs-container{

        padding: 0 16px;

    }

    .nxs-top h2{

        font-size: 42px;

        line-height: 1;

        letter-spacing: -2px;

    }

    .nxs-card{

        border-radius: 24px;

    }

    .nxs-left{

        padding: 24px;

    }

    .nxs-right{

        padding: 24px;

    }

    .nxs-number{

        font-size: 58px;

    }

    .nxs-left-content h3{

        font-size: 28px;

        letter-spacing: -1px;

    }

    .nxs-right p{

        font-size: 14px;

        line-height: 1.9;

    }

    .nxs-best p{

        font-size: 14px;

    }

}



@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* =========================================================
                PREMIUM INDUSTRIES
========================================================= */

.pi-section {

    position: relative;

    overflow: hidden;

    padding:
        120px 0;

    background:
        linear-gradient(
            180deg,
            #f7fbfd 0%,
            #edf4f7 100%
        );

    font-family:
        'Outfit',
        sans-serif;

}

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

.pi-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(rgba(4,69,105,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(4,69,105,0.03) 1px, transparent 1px);

    background-size: 70px 70px;

}

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

.pi-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;

}

.pi-glow-1 {

    width: 500px;
    height: 500px;

    background:
        rgba(4,69,105,0.08);

    top: -220px;
    left: -220px;

}

.pi-glow-2 {

    width: 500px;
    height: 500px;

    background:
        rgba(5,143,72,0.08);

    right: -220px;
    bottom: -220px;

}

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

.pi-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1450px;

    margin: auto;

    padding: 0 28px;

}

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

.pi-top {

    margin-bottom: 70px;

}

/* TAG */

.pi-tag {

    width: fit-content;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        8px 14px;

    border-radius: 100px;

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

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

    margin-bottom: 28px;

}

.pi-tag span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #058F48;

}

.pi-tag p {

    color:
        #044569;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}

/* FLEX */

.pi-heading-wrap {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        360px;

    gap: 70px;

    align-items: end;

}

/* HEADING */

.pi-heading-wrap h2 {

    color:
        #102131;

    font-size:
        clamp(50px, 4vw, 100px);

    line-height: 0.92;

    letter-spacing: 1px;

    font-weight: 900;

    max-width: 820px;

}

/* TEXT */

.pi-heading-wrap p {

    color:
        #647381;

    font-size: 16px;

    line-height: 1.95;

}

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

.pi-grid-layout {

    display: grid;

    grid-template-columns:
        repeat(12, 1fr);

    gap: 24px;

}

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

.pi-card {

    position: relative;

    overflow: hidden;

    grid-column:
        span 6;

    min-height: 380px;

    padding:
        32px;

    border-radius: 34px;

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

    backdrop-filter: blur(18px);

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

    box-shadow:
        0 30px 80px rgba(4,69,105,0.05);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}

/* WIDE */

.pi-wide-card {

    grid-column:
        span 12;

    min-height: 300px;

}

/* HOVER */

.pi-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 45px 120px rgba(4,69,105,0.10);

}

/* LIGHT */

.pi-card::before {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(5,143,72,0.08),
            transparent);

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

}

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

.pi-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 34px;

}

/* BADGE */

.pi-badge {

    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #044569,
            #0b5c89
        );

    color:
        #ffffff;

    font-size: 20px;

    font-weight: 800;

    box-shadow:
        0 20px 50px rgba(4,69,105,0.18);

}

/* DOT */

.pi-dot {

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background:
        #058F48;

    box-shadow:
        0 0 20px rgba(5,143,72,0.5);

}

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

.pi-content h3 {

    color:
        #102131;

    font-size: 38px;

    line-height: 1;

    letter-spacing: -2px;

    font-weight: 800;

    margin-bottom: 22px;

    max-width: 450px;

}

/* TEXT */

.pi-content p {

    color:
        #647381;

    font-size: 15px;

    line-height: 1.95;

    max-width: 580px;

}

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

.pi-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 36px;

    padding-top: 24px;

    border-top:
        1px solid rgba(4,69,105,0.08);

}

/* LABEL */

.pi-bottom span {

    color:
        #044569;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}

/* ARROW */

.pi-arrow {

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(4,69,105,0.05);

    color:
        #044569;

    font-size: 22px;

    transition:
        0.4s ease;

}

/* HOVER */

.pi-card:hover .pi-arrow {

    background:
        #044569;

    color:
        #ffffff;

    transform:
        rotate(45deg);

}

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

@media(max-width:1100px){

    .pi-heading-wrap{

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .pi-card{

        grid-column:
            span 12;

    }

}

@media(max-width:768px){

    .pi-section{

        padding:
            90px 0;

    }

    .pi-container{

        padding: 0 20px;

    }

    .pi-top{

        margin-bottom: 50px;

    }

    .pi-heading-wrap h2{

        font-size: 62px;

        line-height: 1;

        letter-spacing: -3px;

    }

    .pi-card{

        min-height: auto;

        padding: 28px;

        border-radius: 26px;

    }

    .pi-content h3{

        font-size: 30px;

    }

}

@media(max-width:500px){

    .pi-section{

        padding:
            80px 0;

    }

    .pi-container{

        padding: 0 16px;

    }

    .pi-heading-wrap h2{

        font-size: 42px;

        line-height: 1;

        letter-spacing: -2px;

    }

    .pi-card{

        padding: 22px;

        border-radius: 22px;

    }

    .pi-badge{

        width: 56px;
        height: 56px;

        border-radius: 18px;

        font-size: 16px;

    }

    .pi-content h3{

        font-size: 24px;

        letter-spacing: -1px;

    }

    .pi-content p{

        font-size: 14px;

        line-height: 1.85;

    }

    .pi-arrow{

        width: 50px;
        height: 50px;

        font-size: 18px;

    }

}