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

/* =========================================================
                PREMIUM COMMITMENT V4
========================================================= */

.sx-commitment-section {

    position: relative;

    overflow: hidden;

    padding:
        120px 0;

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

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

}

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

.sx-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
========================================================= */

.sx-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    z-index: 1;

}

.sx-glow-left {

    width: 420px;
    height: 420px;

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

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

}

.sx-glow-right {

    width: 500px;
    height: 500px;

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

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

}

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

.sx-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, 540px);

    gap: 80px;

    align-items: start;

}

/* =========================================================
                STICKY
========================================================= */

.sx-sticky-wrap {

    position: sticky;

    top: 120px;

}

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

.sx-tag {

    width: fit-content;

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        8px 14px;

    border-radius: 100px;

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

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

    margin-bottom: 24px;

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

}

.sx-tag span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #058F48;

    box-shadow:
        0 0 10px #058F48;

}

.sx-tag p {

    color:
        #044569;

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

    letter-spacing: 1px;

    text-transform: uppercase;

}

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

.sx-sticky-wrap h2 {

    color:
        #102131;

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

    line-height: 0.92;

    letter-spacing: -4px;

    font-weight: 900;

    margin-bottom: 28px;

}

.sx-sticky-wrap h2 span {

    background:
        linear-gradient(90deg,
            #044569,
            #058F48);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

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

.sx-description {

    color:
        #647381;

    font-size: 17px;

    line-height: 1.9;

    margin-bottom: 22px;

    max-width: 660px;

}

.sx-description.second {

    margin-bottom: 40px;

}

/* =========================================================
                FEATURES
========================================================= */

.sx-feature-list {

    display: flex;

    flex-direction: column;

    gap: 22px;

}

/* ITEM */

.sx-feature-item {

    display: flex;

    gap: 22px;

    padding:
        26px;

    border-radius: 28px;

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

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

    backdrop-filter: blur(14px);

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

}

/* NUMBER */

.sx-feature-number {

    color:
        rgba(4, 69, 105, 0.16);

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

    line-height: 1;

}

/* CONTENT */

.sx-feature-content h4 {

    color:
        #102131;

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

    line-height: 1.2;

    margin-bottom: 10px;

}

.sx-feature-content p {

    color:
        #647381;

    font-size: 15px;

    line-height: 1.8;

}

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

.sx-image-box {

    position: relative;

    overflow: hidden;

    border-radius: 34px;

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

}

.sx-image-box img {

    width: 100%;

    height: 720px;

    object-fit: cover;

    object-position: 35%;

    display: block; 

}

/* OVERLAY */

.sx-image-box::before {

    content: "";

    position: absolute;

    inset: 0;

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

    z-index: 1;

}

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

@media(max-width:1100px) {

    .sx-container {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .sx-sticky-wrap {

        position: relative;

        top: unset;

    }

    .sx-image-box img {

        height: 520px;

    }

}

@media(max-width:768px) {

    .sx-commitment-section {

        padding:
            90px 0;

    }

    .sx-container {

        padding: 0 20px;

    }

    .sx-sticky-wrap h2 {

        font-size: 54px;

        line-height: 1;

        letter-spacing: -2px;

    }

    .sx-description {

        font-size: 15px;

        line-height: 1.8;

    }

    .sx-feature-item {

        padding: 22px;

        gap: 18px;

    }

}

@media(max-width:500px) {

    .sx-commitment-section {

        padding:
            80px 0;

    }

    .sx-container {

        padding: 0 16px;

    }

    .sx-sticky-wrap h2 {

        font-size: 40px;

    }

    .sx-image-box {

        border-radius: 24px;

    }

    .sx-image-box img {

        height: 380px;

    }

    .sx-feature-item {

        padding: 18px;

        border-radius: 22px;

    }

    .sx-feature-content h4 {

        font-size: 18px;

    }

    .sx-feature-content p {

        font-size: 14px;

    }

}



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

/* =========================================================
                CORE STRENGTHS
========================================================= */

.cs-strength-section {

    position: relative;

    overflow: hidden;

    padding:
        120px 0;

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

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

}

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

.cs-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
========================================================= */

.cs-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    z-index: 1;

}

.cs-glow-left {

    width: 420px;
    height: 420px;

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

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

}

.cs-glow-right {

    width: 500px;
    height: 500px;

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

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

}

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

.cs-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1380px;

    margin: auto;

    padding: 0 28px;

}

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

.cs-top {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 60px;

    margin-bottom: 70px;

}

/* LEFT */

.cs-top-left {

    max-width: 720px;

}

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

.cs-tag {

    width: fit-content;

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        8px 14px;

    border-radius: 100px;

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

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

    margin-bottom: 24px;

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

}

.cs-tag span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #058F48;

    box-shadow:
        0 0 10px #058F48;

}

.cs-tag p {

    color:
        #044569;

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

    letter-spacing: 1px;

    text-transform: uppercase;

}

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

.cs-top-left h2 {

    color:
        #102131;

    font-size:
        clamp(46px, 6vw, 90px);

    line-height: 0.92;

    letter-spacing: -4px;

    font-weight: 900;

}

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

.cs-top-right {

    max-width: 420px;

}

.cs-top-right p {

    color:
        #647381;

    font-size: 16px;

    line-height: 1.9;

}

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

.cs-grid-layout {

    display: grid;

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

    gap: 26px;

}

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

.cs-card {

    position: relative;

    overflow: hidden;

    padding:
        34px;

    border-radius: 34px;

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

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

    backdrop-filter: blur(14px);

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

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

}

/* HOVER */

.cs-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 40px 90px rgba(4, 69, 105, 0.10);

}

/* TOP LINE */

.cs-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(90deg,
            #044569,
            #058F48);

}

/* NUMBER */

.cs-number {

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

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

    line-height: 1;

    margin-bottom: 28px;

}

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

.cs-content h3 {

    color:
        #102131;

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

    line-height: 1.1;

    letter-spacing: -1px;

    margin-bottom: 18px;

}

.cs-content p {

    color:
        #647381;

    font-size: 15px;

    line-height: 1.9;

    max-width: 95%;

}

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

@media(max-width:1100px) {

    .cs-top {

        flex-direction: column;

        align-items: flex-start;

        margin-bottom: 50px;

    }

    .cs-top-right {

        max-width: 100%;

    }

}

@media(max-width:768px) {

    .cs-strength-section {

        padding:
            90px 0;

    }

    .cs-container {

        padding: 0 20px;

    }

    .cs-grid-layout {

        grid-template-columns: 1fr;

    }

    .cs-top-left h2 {

        font-size: 54px;

        line-height: 1;

        letter-spacing: -2px;

    }

    .cs-content h3 {

        font-size: 26px;

    }

}

@media(max-width:500px) {

    .cs-strength-section {

        padding:
            80px 0;

    }

    .cs-container {

        padding: 0 16px;

    }

    .cs-top-left h2 {

        font-size: 40px;

    }

    .cs-card {

        padding: 26px;

        border-radius: 24px;

    }

    .cs-number {

        font-size: 50px;

        margin-bottom: 22px;

    }

    .cs-content h3 {

        font-size: 22px;

    }

    .cs-content p {

        font-size: 14px;

        max-width: 100%;

    }

}


/* =========================================================
        PREMIUM UPGRADE FOR CORE STRENGTHS
========================================================= */

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

.cs-grid-layout {

    display: grid;

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

    gap: 28px;

    position: relative;

}

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

.cs-card {

    position: relative;

    overflow: hidden;

    min-height: 320px;

    padding:
        38px;

    border-radius: 36px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.92),
            rgba(255, 255, 255, 0.72));

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

    backdrop-filter: blur(18px);

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

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

    isolation: isolate;

}

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

.cs-card:hover {

    transform:
        translateY(-10px);

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

    border-color:
        rgba(5, 143, 72, 0.18);

}

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

.cs-card::after {

    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    border-radius: 50%;

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

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

    z-index: -1;

    transition: 0.5s ease;

}

.cs-card:hover::after {

    transform:
        scale(1.2);

}

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

.cs-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(90deg,
            #044569,
            #058F48);

}

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

.cs-number {

    position: relative;

    width: fit-content;

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

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

    line-height: 1;

    margin-bottom: 34px;

    letter-spacing: -3px;

}

/* NUMBER SMALL DOT */

.cs-number::after {

    content: "";

    position: absolute;

    right: -14px;
    top: 10px;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        #058F48;

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

}

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

.cs-content {

    position: relative;

    z-index: 2;

}

.cs-content h3 {

    color:
        #102131;

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

    line-height: 1.08;

    letter-spacing: -1.4px;

    margin-bottom: 18px;

}

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

.cs-content p {

    color:
        #647381;

    font-size: 15px;

    line-height: 1.95;

    max-width: 95%;

}

/* =========================================================
                PREMIUM BORDER EFFECT
========================================================= */

.cs-card-border {

    position: absolute;

    inset: 0;

    border-radius: inherit;

    padding: 1px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.8),
            rgba(255, 255, 255, 0.1));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;

}

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

@media(max-width:992px) {

    .cs-grid-layout {

        gap: 22px;

    }

    .cs-card {

        min-height: auto;

    }

}

@media(max-width:768px) {

    .cs-grid-layout {

        grid-template-columns: 1fr;

    }

    .cs-card {

        padding: 30px;

        border-radius: 28px;

    }

    .cs-number {

        font-size: 58px;

        margin-bottom: 26px;

    }

    .cs-content h3 {

        font-size: 28px;

    }

}

@media(max-width:500px) {

    .cs-card {

        padding: 24px;

        border-radius: 22px;

    }

    .cs-number {

        font-size: 46px;

        margin-bottom: 20px;

    }

    .cs-number::after {

        width: 8px;
        height: 8px;

        right: -10px;

    }

    .cs-content h3 {

        font-size: 22px;

        margin-bottom: 14px;

    }

    .cs-content p {

        font-size: 14px;

        line-height: 1.8;

        max-width: 100%;

    }

}


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

/* =========================================================
                OUR STORY SECTION
========================================================= */

.os-story-section {

    position: relative;

    overflow: hidden;

    padding:
        130px 0;

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

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

}

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

.os-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
========================================================= */

.os-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    z-index: 1;

}

.os-glow-left {

    width: 420px;
    height: 420px;

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

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

}

.os-glow-right {

    width: 520px;
    height: 520px;

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

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

}

/* =========================================================
                WATERMARK
========================================================= */

.os-watermark {

    position: absolute;

    top: 50%;
    left: 50%;

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

    white-space: nowrap;

    font-size:
        clamp(80px, 10vw, 200px);

    font-weight: 900;

    letter-spacing: -6px;

    color:
        rgba(4, 69, 105, 0.03);

    z-index: 1;

    pointer-events: none;

    user-select: none;

}

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

.os-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1380px;

    margin: auto;

    padding: 0 28px;

    display: grid;

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

    gap: 90px;

    align-items: center;

}

/* =========================================================
                VISUAL SIDE
========================================================= */

.os-visual-side {

    position: relative;

}

/* IMAGE */

.os-image-wrap {

    position: relative;

    overflow: hidden;

    border-radius: 36px;

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

}

.os-image-wrap img {

    width: 100%;

    height: 720px;

    object-fit: cover;

    display: block;

    object-position: 70%;
    transition: 0.7s ease;

}

.os-image-wrap:hover img {

    transform: scale(1.05);

}

/* OVERLAY */

.os-image-wrap::before {

    content: "";

    position: absolute;

    inset: 0;

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

    z-index: 1;

}

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

.os-stats-bar {

    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 30px;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    padding:
        24px 28px;

    border-radius: 28px;

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

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

    backdrop-filter: blur(18px);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.16);

}

/* ITEM */

.os-stat-item h4 {

    color: #ffffff;

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

    line-height: 1;

    letter-spacing: -2px;

    margin-bottom: 8px;

}

.os-stat-item p {

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

    font-size: 13px;

    line-height: 1.6;

}

/* DIVIDER */

.os-divider {

    width: 1px;
    height: 54px;

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

}

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

.os-content-side {

    max-width: 760px;

}

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

.os-tag {

    width: fit-content;

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        8px 14px;

    border-radius: 100px;

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

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

    margin-bottom: 24px;

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

}

.os-tag span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #058F48;

    box-shadow:
        0 0 10px #058F48;

}

.os-tag p {

    color:
        #044569;

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

    letter-spacing: 1px;

    text-transform: uppercase;

}

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

.os-content-side h2 {

    color:
        #102131;

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

    line-height: 0.92;

    letter-spacing: -4px;

    font-weight: 900;

    margin-bottom: 36px;

}

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

.os-story-content {

    display: flex;

    flex-direction: column;

    gap: 24px;

}

.os-story-content p {

    color:
        #647381;

    font-size: 17px;

    line-height: 1.95;

}

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

.os-bottom-strip {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 42px;

    padding-top: 28px;

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

}

.os-strip-line {

    width: 80px;
    height: 4px;

    border-radius: 100px;

    background:
        linear-gradient(90deg,
            #044569,
            #058F48);

}

.os-bottom-strip p {

    color:
        #102131;

    font-size: 16px;
    font-weight: 600;

    line-height: 1.8;

    max-width: 520px;

}

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

@media(max-width:1100px) {

    .os-container {

        grid-template-columns: 1fr;

        gap: 60px;

    }

}

@media(max-width:768px) {

    .os-story-section {

        padding:
            90px 0;

    }

    .os-container {

        padding: 0 20px;

    }

    .os-content-side h2 {

        font-size: 56px;

        line-height: 1;

        letter-spacing: -2px;

    }

    .os-story-content p {

        font-size: 15px;

        line-height: 1.9;

    }

    .os-image-wrap img {

        height: 520px;

    }

    .os-stats-bar {

        left: 20px;
        right: 20px;
        bottom: 20px;

        padding:
            20px 22px;

    }

    .os-stat-item h4 {

        font-size: 34px;

    }

}

@media(max-width:500px) {

    .os-story-section {

        padding:
            80px 0;

    }

    .os-container {

        padding: 0 16px;

    }

    .os-content-side h2 {

        font-size: 42px;

    }

    .os-image-wrap {

        border-radius: 24px;

    }

    .os-image-wrap img {

        height: 420px;

    }

    .os-stats-bar {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

        border-radius: 22px;

    }

    .os-divider {

        width: 100%;
        height: 1px;

    }

    .os-bottom-strip {

        align-items: flex-start;

        flex-direction: column;

    }

    .os-strip-line {

        width: 60px;

    }

}



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

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

.tv-section {

    position: relative;

    overflow: hidden;

    padding:
        120px 0;

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

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

}

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

.tv-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
========================================================= */

.tv-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    z-index: 1;

}

.tv-glow-left {

    width: 420px;
    height: 420px;

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

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

}

.tv-glow-right {

    width: 500px;
    height: 500px;

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

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

}

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

.tv-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1380px;

    margin: auto;

    padding: 0 28px;

    display: grid;

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

    gap: 70px;

    align-items: start;

}

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

.tv-left {
/* 
    position: sticky;

    top: 110px; */

}

/* TAG */

.tv-tag {

    width: fit-content;

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        8px 14px;

    border-radius: 100px;

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

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

    margin-bottom: 22px;

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

}

.tv-tag span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #058F48;

}

.tv-tag p {

    color:
        #044569;

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

    letter-spacing: 1px;

    text-transform: uppercase;

}

/* HEADING */

.tv-left h2 {

    color:
        #102131;

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

    line-height: 0.94;

    letter-spacing: 1px;

    font-weight: 900;

    margin-bottom: 24px;

}

/* DESCRIPTION */

.tv-description {

    color:
        #647381;

    font-size: 15px;

    line-height: 1.9;

}

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

.tv-right {

    width: 100%;

}

/* =========================================================
                TABS
========================================================= */

.tv-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 24px;

}

/* BUTTON */

.tv-tab-btn {

    border: none;

    outline: none;

    cursor: pointer;

    padding:
        13px 20px;

    border-radius: 100px;

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

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

    color:
        #647381;

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

    transition: 0.35s ease;

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

}

/* ACTIVE */

.tv-tab-btn.active {

    background:
        linear-gradient(135deg,
            #044569,
            #058F48);

    color: #ffffff;

    box-shadow:
        0 18px 40px rgba(4, 69, 105, 0.16);

}

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

.tv-content-box {

    position: relative;

    overflow: hidden;

    /* min-height: 450px; */

    padding:
        42px;

    border-radius: 34px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.92),
            rgba(255, 255, 255, 0.72));

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

    backdrop-filter: blur(18px);

    box-shadow:
        0 35px 90px rgba(4, 69, 105, 0.06);

}

/* GLOW */

.tv-content-box::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

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

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

}

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

.tv-content {

    display: none;

    position: relative;

    z-index: 2;

    animation:
        tvFade 0.4s ease;

}

.tv-content.active {

    display: block;

}

@keyframes tvFade {

    from {

        opacity: 0;

        transform:
            translateY(8px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

/* LABEL */

.tv-label {

    width: fit-content;

    display: inline-block;

    padding:
        8px 14px;

    border-radius: 100px;

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

    color:
        #044569;

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

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 22px;

}

/* TITLE */

.tv-content h3 {

    color:
        #102131;

    font-size: 34px;

    line-height: 1.1;

    /* letter-spacing: -1.5px; */

    font-weight: 800;

    margin-bottom: 22px;

    max-width: 700px;

}

/* TEXT */

.tv-content p {

    color:
        #647381;

    font-size: 15px;

    line-height: 1.95;

    max-width: 720px;

}

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

.tv-list {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

/* ITEM */

.tv-list-item {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding:
        18px 20px;

    border-radius: 20px;

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

    border:
        1px solid rgba(4, 69, 105, 0.04);

}

/* DOT */

.tv-list-item span {

    width: 9px;
    height: 9px;

    min-width: 9px;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            #044569,
            #058F48);

    margin-top: 9px;

}

/* =========================================================
                VALUES
========================================================= */

.tv-values {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

}

/* CARD */

.tv-value-card {

    padding:
        22px;

    border-radius: 22px;

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

    border:
        1px solid rgba(4, 69, 105, 0.04);

}

/* TITLE */

.tv-value-card h4 {

    color:
        #102131;

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

    margin-bottom: 10px;

}

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

@media(max-width:1100px) {

    .tv-container {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .tv-left {

        position: relative;

        top: unset;

    }

}

@media(max-width:768px) {

    .tv-section {

        padding:
            90px 0;

    }

    .tv-container {

        padding: 0 20px;

    }

    .tv-left h2 {

        font-size: 52px;

        line-height: 1;

        letter-spacing: -2px;

    }

    .tv-content-box {

        padding: 30px;

        border-radius: 28px;

        min-height: auto;

    }

    .tv-content h3 {

        font-size: 28px;

    }

    .tv-values {

        grid-template-columns: 1fr;

    }

}

@media(max-width:500px) {

    .tv-section {

        padding:
            80px 0;

    }

    .tv-container {

        padding: 0 16px;

    }

    .tv-left h2 {

        font-size: 38px;

    }

    .tv-tabs {

        gap: 10px;

    }

    .tv-tab-btn {

        width: 100%;

    }

    .tv-content-box {

        padding: 22px;

        border-radius: 22px;

    }

    .tv-content h3 {

        font-size: 24px;

    }

    .tv-content p {

        font-size: 14px;

        line-height: 1.85;

    }

    .tv-list-item {

        padding: 16px;

    }

    .tv-value-card {

        padding: 18px;

    }

}