.hero {
    position: relative;
    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
            radial-gradient(
                    circle at 75% 45%,
                    #0B3470 0%,
                    #082653 24%,
                    #061A35 50%,
                    #06152D 75%,
                    #041126 100%
            );

    color: #ffffff;
}


/* ================================
   Background
================================ */

.hero-bg-glow {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;

    filter: blur(10px);
}

.hero-bg-glow-1 {
    width: 650px;
    height: 650px;

    right: -160px;
    top: -180px;

    background:
            radial-gradient(
                    circle,
                    rgba(0, 92, 216, 0.35) 0%,
                    rgba(0, 92, 216, 0.12) 35%,
                    rgba(0, 92, 216, 0) 70%
            );
}

.hero-bg-glow-2 {
    width: 500px;
    height: 500px;

    left: -300px;
    bottom: -300px;

    background:
            radial-gradient(
                    circle,
                    rgba(0, 92, 216, 0.18) 0%,
                    rgba(0, 92, 216, 0) 70%
            );
}


/* ================================
   Background grid
================================ */

.hero-grid {
    position: absolute;
    inset: 0;

    opacity: 0.18;

    background-image:
            linear-gradient(
                    rgba(255,255,255,0.05) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(255,255,255,0.05) 1px,
                    transparent 1px
            );

    background-size: 60px 60px;

    mask-image:
            radial-gradient(
                    ellipse at center,
                    black 0%,
                    transparent 75%
            );

    -webkit-mask-image:
            radial-gradient(
                    ellipse at center,
                    black 0%,
                    transparent 75%
            );
}


/* ================================
   Container
================================ */

.hero-container {
    position: relative;
    z-index: 2;

    width: 1200px;
    max-width: calc(100% - 48px);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    align-items: center;

    gap: 50px;
}


/* ================================
   Content
================================ */

.hero-content {
    position: relative;
    z-index: 3;
}

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

    margin-bottom: 26px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;

    color: #5EA2FF;
}

.hero-eyebrow::before {
    content: "";

    width: 30px;
    height: 2px;

    background: #1677FF;
}


/* ================================
   Title
================================ */

.hero-title {
    max-width: 700px;

    font-size: 46px;
    line-height: 1.32;

    font-weight: 700;

    letter-spacing: -2px;

    color: #ffffff;
}

.hero-title span {
    color: #5EA2FF;
}


/* ================================
   Subtitle
================================ */

.hero-subtitle {
    max-width: 620px;

    margin-top: 28px;

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

    color: #A9B9D0;
}


/* ================================
   Services
================================ */

.hero-services {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 26px;
}

.hero-services span {
    display: inline-flex;
    align-items: center;

    height: 34px;

    padding: 0 14px;

    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;

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

    color: #D7E2F2;

    font-size: 13px;

    backdrop-filter: blur(8px);
}


/* ================================
   Button
================================ */

.hero-actions {
    margin-top: 36px;
}

.hero-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    height: 52px;

    padding: 0 22px 0 26px;

    border-radius: 7px;

    background: #005CD8;

    color: #ffffff;

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

    text-decoration: none;

    box-shadow:
            0 10px 35px rgba(0, 92, 216, 0.35);

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

.hero-button svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;

    transition: transform .2s ease;
}

.hero-button:hover {
    transform: translateY(-2px);

    box-shadow:
            0 14px 40px rgba(0, 92, 216, 0.45);
}

.hero-button:hover svg {
    transform: translateX(3px);
}


/* ================================
   Visual
================================ */

.hero-visual {
    position: relative;

    width: 100%;
    height: 520px;
}


/* ================================
   Orbits
================================ */

.visual-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    border: 1px solid rgba(104, 167, 255, 0.12);
}

.orbit-1 {
    width: 430px;
    height: 430px;
}

.orbit-2 {
    width: 320px;
    height: 320px;

    border-style: dashed;

    border-color: rgba(104, 167, 255, 0.14);
}

.orbit-3 {
    width: 200px;
    height: 200px;

    border-color: rgba(104, 167, 255, 0.10);
}


/* ================================
   Connections
================================ */

.connection {
    position: absolute;

    height: 1px;

    transform-origin: left center;

    background:
            linear-gradient(
                    90deg,
                    rgba(22,119,255,0),
                    rgba(22,119,255,.55),
                    rgba(22,119,255,0)
            );
}

.connection-1 {
    width: 220px;

    left: 170px;
    top: 175px;

    transform: rotate(-28deg);
}

.connection-2 {
    width: 200px;

    left: 180px;
    top: 270px;

    transform: rotate(5deg);
}

.connection-3 {
    width: 210px;

    left: 210px;
    top: 330px;

    transform: rotate(-25deg);
}

.connection-4 {
    width: 170px;

    left: 305px;
    top: 250px;

    transform: rotate(150deg);
}

.connection-5 {
    width: 150px;

    left: 300px;
    top: 280px;

    transform: rotate(30deg);
}


/* ================================
   Nodes
================================ */

.node {
    position: absolute;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #5EA2FF;

    box-shadow:
            0 0 0 7px rgba(22,119,255,.10),
            0 0 25px rgba(22,119,255,.65);

    z-index: 3;
}

.node-china {
    left: 185px;
    top: 255px;
}

.node-na {
    left: 345px;
    top: 125px;
}

.node-eu {
    left: 430px;
    top: 205px;
}

.node-me {
    left: 390px;
    top: 350px;
}

.node-sea {
    left: 230px;
    top: 390px;
}


/* ================================
   Labels
================================ */

.node-label {
    position: absolute;

    padding: 7px 11px;

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

    border-radius: 6px;

    background: rgba(7, 29, 58, .70);

    color: #A9B9D0;

    font-size: 11px;

    backdrop-filter: blur(8px);

    z-index: 4;
}

.label-china {
    left: 140px;
    top: 275px;
}

.label-na {
    left: 320px;
    top: 95px;
}

.label-eu {
    left: 445px;
    top: 180px;
}

.label-me {
    left: 400px;
    top: 375px;
}


/* ================================
   Center
================================ */

.visual-center {
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 135px;
    height: 135px;

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

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    #123D79 0%,
                    #092956 60%,
                    #071D3B 100%
            );

    border: 1px solid rgba(125,180,255,.25);

    box-shadow:
            0 0 60px rgba(0,92,216,.25),
            inset 0 0 40px rgba(0,92,216,.12);

    z-index: 5;
}

.center-glow {
    position: absolute;

    width: 80px;
    height: 80px;

    border-radius: 50%;

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

    filter: blur(20px);
}

.visual-center-content {
    position: relative;

    text-align: center;
}

.visual-center-content strong {
    display: block;

    font-size: 18px;

    letter-spacing: 1px;

    color: #ffffff;
}

.visual-center-content span {
    display: block;

    margin-top: 5px;

    font-size: 9px;

    letter-spacing: 2px;

    color: #8FB8ED;
}


/* ================================
   Mobile
================================ */

@media (max-width: 900px) {

    .hero {
        padding: 120px 0 70px;
    }

    .hero-container {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .hero-title {
        font-size: 46px;
    }

    .hero-visual {
        height: 440px;
    }
}


@media (max-width: 600px) {

    .hero {
        padding: 100px 0 50px;
    }

    .hero-container {
        max-width: calc(100% - 32px);
    }

    .hero-title {
        font-size: 34px;

        line-height: 1.3;

        letter-spacing: -1px;
    }

    .hero-subtitle {
        font-size: 15px;

        line-height: 1.8;
    }

    .hero-button {
        width: 100%;
    }

    .hero-visual {
        height: 350px;

        transform: scale(.82);

        transform-origin: center top;
    }
}

/* =====================================================
   WHY US
===================================================== */

.why-us {
    position: relative;

    padding: 120px 0 130px;

    background: #ffffff;

    color: #101828;
}

.why-container {
    width: 1200px;
    max-width: calc(100% - 48px);

    margin: 0 auto;
}


/* =====================================================
   Heading
===================================================== */

.section-heading {
    max-width: 760px;

    margin: 0 auto 70px;

    text-align: center;
}

.section-eyebrow {
    margin-bottom: 18px;

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

    letter-spacing: 2px;

    color: #005CD8;
}

.section-heading h2 {
    margin: 0;

    font-size: 44px;
    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -1.5px;

    color: #101828;
}

.section-heading h2 span {
    color: #005CD8;
}

.section-heading p {
    margin-top: 20px;

    font-size: 16px;
    line-height: 1.8;

    color: #667085;
}


/* =====================================================
   Advantage Grid
===================================================== */

.advantage-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;
}

.advantage-item {
    position: relative;

    min-height: 330px;

    padding: 42px;

    border: 1px solid #E7ECF3;

    border-radius: 14px;

    background: #ffffff;

    overflow: hidden;

    transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease;
}

.advantage-item::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -110px;
    bottom: -110px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(0,92,216,.08),
                    rgba(0,92,216,0) 70%
            );

    pointer-events: none;
}

.advantage-item:hover {
    transform: translateY(-5px);

    border-color: #D5E3F7;

    box-shadow:
            0 20px 50px rgba(16,24,40,.07);
}


/* =====================================================
   Number
===================================================== */

.advantage-number {
    margin-bottom: 34px;

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

    letter-spacing: 1px;

    color: #005CD8;
}


/* =====================================================
   Content
===================================================== */

.advantage-content {
    position: relative;

    z-index: 2;
}

.advantage-content h3 {
    margin: 0;

    font-size: 26px;
    line-height: 1.4;

    font-weight: 700;

    color: #101828;
}

.advantage-content p {
    max-width: 480px;

    margin-top: 18px;

    font-size: 15px;
    line-height: 1.9;

    color: #667085;
}


/* =====================================================
   Tags
===================================================== */

.advantage-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 28px;
}

.advantage-tags span {
    padding: 7px 11px;

    border-radius: 5px;

    background: #F2F6FC;

    color: #667085;

    font-size: 11px;
}


/* =====================================================
   Languages
===================================================== */

.language-list {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 27px;
}

.language-list span {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 7px 10px;

    border: 1px solid #E7ECF3;

    border-radius: 6px;

    font-size: 12px;

    color: #475467;
}

.language-list b {
    font-size: 10px;

    color: #005CD8;
}


/* =====================================================
   Highlight
===================================================== */

.why-highlight {
    display: flex;
    align-items: center;

    max-width: 900px;

    margin: 70px auto 0;
}

.highlight-line {
    flex-shrink: 0;

    width: 3px;
    height: 42px;

    margin-right: 22px;

    border-radius: 3px;

    background: #005CD8;
}

.why-highlight p {
    margin: 0;

    font-size: 16px;
    line-height: 1.8;

    color: #667085;
}

.why-highlight strong {
    color: #101828;
}


/* =====================================================
   Responsive
===================================================== */

@media (max-width: 900px) {

    .why-us {
        padding: 90px 0;
    }

    .section-heading {
        margin-bottom: 50px;
    }

    .section-heading h2 {
        font-size: 36px;
    }

    .advantage-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .why-us {
        padding: 70px 0 80px;
    }

    .why-container {
        max-width: calc(100% - 32px);
    }

    .section-heading {
        text-align: left;
    }

    .section-heading h2 {
        font-size: 31px;
    }

    .section-heading p {
        font-size: 15px;
    }

    .advantage-item {
        min-height: auto;

        padding: 30px;
    }

    .advantage-content h3 {
        font-size: 23px;
    }

    .why-highlight {
        margin-top: 50px;
    }

    .why-highlight p {
        font-size: 14px;
    }
}

/* =====================================================
   PAIN POINTS
===================================================== */

.pain-points {
    position: relative;

    padding: 120px 0 130px;

    background: #F7F9FC;

    color: #101828;
}

.pain-container {
    width: 1200px;
    max-width: calc(100% - 48px);

    margin: 0 auto;
}


/* =====================================================
   Heading
===================================================== */

.pain-heading {
    max-width: 760px;

    margin: 0 auto 65px;

    text-align: center;
}

.pain-eyebrow {
    margin-bottom: 18px;

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

    letter-spacing: 2px;

    color: #005CD8;
}

.pain-heading h2 {
    margin: 0;

    font-size: 44px;
    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -1.5px;

    color: #101828;
}

.pain-heading h2 span {
    color: #005CD8;
}

.pain-heading p {
    margin-top: 20px;

    font-size: 16px;
    line-height: 1.8;

    color: #667085;
}


/* =====================================================
   Grid
===================================================== */

.pain-grid {
    display: grid;

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

    gap: 16px;
}


/* =====================================================
   Item
===================================================== */

.pain-item {
    position: relative;

    min-height: 250px;

    padding: 30px;

    border: 1px solid #E6EAF0;

    border-radius: 10px;

    background: #ffffff;

    overflow: hidden;

    transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease;
}

.pain-item:hover {
    transform: translateY(-4px);

    border-color: #D5E3F7;

    box-shadow:
            0 15px 40px rgba(16,24,40,.06);
}


/* =====================================================
   Number
===================================================== */

.pain-number {
    position: absolute;

    top: 26px;
    right: 28px;

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

    letter-spacing: 1px;

    color: #B7C2D1;
}


/* =====================================================
   Icon
===================================================== */

.pain-icon {
    width: 38px;
    height: 38px;

    margin-bottom: 26px;

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

    border-radius: 9px;

    background: #EDF4FF;
}

.pain-icon span {
    position: relative;

    width: 14px;
    height: 14px;

    border: 2px solid #005CD8;

    border-radius: 50%;
}

.pain-icon span::after {
    content: "";

    position: absolute;

    width: 6px;
    height: 2px;

    right: -5px;
    bottom: -2px;

    background: #005CD8;

    transform: rotate(45deg);
}


/* =====================================================
   Text
===================================================== */

.pain-item h3 {
    max-width: 280px;

    margin: 0;

    font-size: 18px;
    line-height: 1.6;

    font-weight: 650;

    color: #101828;
}

.pain-item p {
    margin-top: 13px;

    font-size: 13px;
    line-height: 1.8;

    color: #667085;
}


/* =====================================================
   Wide item
===================================================== */

.pain-item-wide {
    grid-column: span 3;

    min-height: 170px;

    display: flex;
    align-items: center;

    gap: 30px;

    padding: 30px 40px;
}

.pain-item-wide .pain-icon {
    flex-shrink: 0;

    margin: 0;
}

.pain-item-wide h3 {
    max-width: none;
}

.pain-item-wide p {
    margin: 0 0 0 auto;

    max-width: 390px;
}


/* =====================================================
   Bottom
===================================================== */

.pain-bottom {
    display: flex;
    align-items: center;

    max-width: 900px;

    margin: 65px auto 0;
}

.pain-bottom-line {
    flex-shrink: 0;

    width: 3px;
    height: 42px;

    margin-right: 22px;

    border-radius: 3px;

    background: #005CD8;
}

.pain-bottom p {
    margin: 0;

    font-size: 16px;
    line-height: 1.8;

    color: #667085;
}

.pain-bottom strong {
    color: #101828;
}


/* =====================================================
   Responsive
===================================================== */

@media (max-width: 900px) {

    .pain-points {
        padding: 90px 0;
    }

    .pain-heading {
        margin-bottom: 50px;
    }

    .pain-heading h2 {
        font-size: 36px;
    }

    .pain-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pain-item-wide {
        grid-column: span 2;
    }
}


@media (max-width: 600px) {

    .pain-points {
        padding: 70px 0 80px;
    }

    .pain-container {
        max-width: calc(100% - 32px);
    }

    .pain-heading {
        text-align: left;
    }

    .pain-heading h2 {
        font-size: 31px;
    }

    .pain-heading p {
        font-size: 15px;
    }

    .pain-grid {
        grid-template-columns: 1fr;
    }

    .pain-item {
        min-height: auto;

        padding: 28px;
    }

    .pain-item-wide {
        grid-column: span 1;

        display: block;

        min-height: auto;

        padding: 28px;
    }

    .pain-item-wide .pain-icon {
        margin-bottom: 24px;
    }

    .pain-item-wide p {
        margin-top: 13px;
    }

    .pain-bottom {
        margin-top: 50px;
    }

    .pain-bottom p {
        font-size: 14px;
    }
}

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

.services {
    position: relative;

    padding: 120px 0 130px;

    background: #ffffff;

    color: #101828;
}

.services-container {
    width: 1200px;
    max-width: calc(100% - 48px);

    margin: 0 auto;
}


/* =====================================================
   Heading
===================================================== */

.services-heading {
    max-width: 760px;

    margin: 0 auto 65px;

    text-align: center;
}

.services-eyebrow {
    margin-bottom: 18px;

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

    letter-spacing: 2px;

    color: #005CD8;
}

.services-heading h2 {
    margin: 0;

    font-size: 44px;
    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -1.5px;

    color: #101828;
}

.services-heading p {
    margin-top: 20px;

    font-size: 16px;
    line-height: 1.8;

    color: #667085;
}


/* =====================================================
   Feature Service
===================================================== */

.service-feature {
    position: relative;

    display: grid;

    grid-template-columns: 1fr 0.9fr;

    min-height: 410px;

    border-radius: 16px;

    overflow: hidden;

    background:
            linear-gradient(
                    135deg,
                    #071A35 0%,
                    #082653 55%,
                    #0B3470 100%
            );

    box-shadow:
            0 25px 60px rgba(16,24,40,.10);
}


/* =====================================================
   Feature Content
===================================================== */

.service-feature-content {
    position: relative;

    z-index: 2;

    padding: 48px 50px;
}

.service-number {
    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1px;

    color: #5EA2FF;
}

.service-label {
    display: inline-flex;

    margin-top: 18px;

    padding: 6px 9px;

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

    border-radius: 5px;

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

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

    letter-spacing: 1.5px;

    color: #8FB8ED;
}

.service-feature h3 {
    margin: 20px 0 0;

    font-size: 34px;
    line-height: 1.3;

    font-weight: 700;

    color: #ffffff;
}

.service-feature p {
    max-width: 500px;

    margin-top: 18px;

    font-size: 15px;
    line-height: 1.9;

    color: #A9B9D0;
}


/* =====================================================
   Tags
===================================================== */

.service-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 24px;
}

.service-tags span {
    padding: 7px 11px;

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

    border-radius: 5px;

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

    font-size: 11px;

    color: #D7E2F2;
}


/* =====================================================
   Link
===================================================== */

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 28px;

    color: #ffffff;

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

    text-decoration: none;
}

.service-link span {
    font-size: 18px;

    color: #5EA2FF;

    transition: transform .2s ease;
}

.service-link:hover span {
    transform: translateX(4px);
}


/* =====================================================
   Visual
===================================================== */

.service-feature-visual {
    position: relative;

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

    min-height: 410px;

    overflow: hidden;
}

.service-feature-visual::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(22,119,255,.25),
                    rgba(22,119,255,0) 70%
            );
}


/* =====================================================
   Google Mockup
===================================================== */

.google-card {
    position: relative;

    z-index: 2;

    width: 390px;

    padding: 20px;

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

    border-radius: 12px;

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

    box-shadow:
            0 30px 70px rgba(0,0,0,.25);

    transform: rotate(1deg);
}

.google-card-top {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 15px;

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

    color: #475467;
}

.google-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #005CD8;
}


/* Search */

.search-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 34px;

    padding: 0 11px;

    border: 1px solid #E4E7EC;

    border-radius: 5px;

    font-size: 10px;

    color: #98A2B3;
}

.search-box b {
    font-size: 16px;

    color: #667085;
}


/* Search Result */

.search-result {
    margin-top: 20px;
}

.result-label {
    font-size: 9px;

    color: #667085;
}

.result-title {
    margin-top: 5px;

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

    color: #175CD3;
}

.result-url {
    margin-top: 4px;

    font-size: 9px;

    color: #667085;
}

.result-description {
    margin-top: 8px;

    font-size: 10px;
    line-height: 1.6;

    color: #667085;
}

.result-line {
    height: 1px;

    margin: 18px 0;

    background: #EAECF0;
}

.result-small {
    width: 75%;

    height: 7px;

    border-radius: 3px;

    background: #EAECF0;
}

.result-small.short {
    width: 48%;

    margin-top: 8px;
}


/* =====================================================
   Other Services
===================================================== */

.services-grid {
    display: grid;

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

    gap: 16px;

    margin-top: 16px;
}

.service-card {
    position: relative;

    min-height: 280px;

    padding: 30px;

    border: 1px solid #E6EAF0;

    border-radius: 10px;

    background: #ffffff;

    overflow: hidden;

    transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease;
}

.service-card:hover {
    transform: translateY(-4px);

    border-color: #D5E3F7;

    box-shadow:
            0 18px 45px rgba(16,24,40,.07);
}


/* Number */

.service-card-number {
    position: absolute;

    top: 27px;
    right: 28px;

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

    letter-spacing: 1px;

    color: #B7C2D1;
}


/* Icon */

.service-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 28px;

    border-radius: 9px;

    background: #EDF4FF;

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

    letter-spacing: .5px;

    color: #005CD8;
}


/* Text */

.service-card h3 {
    margin: 0;

    font-size: 18px;
    line-height: 1.5;

    font-weight: 650;

    color: #101828;
}

.service-card p {
    margin-top: 14px;

    font-size: 13px;
    line-height: 1.8;

    color: #667085;
}


/* Arrow */

.service-card-arrow {
    position: absolute;

    right: 28px;
    bottom: 25px;

    font-size: 18px;

    color: #005CD8;

    opacity: 0;

    transform: translateX(-5px);

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

.service-card:hover .service-card-arrow {
    opacity: 1;

    transform: translateX(0);
}


/* =====================================================
   Responsive
===================================================== */

@media (max-width: 1000px) {

    .services-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


@media (max-width: 900px) {

    .services {
        padding: 90px 0;
    }

    .services-heading {
        margin-bottom: 50px;
    }

    .services-heading h2 {
        font-size: 36px;
    }

    .service-feature {
        grid-template-columns: 1fr;
    }

    .service-feature-visual {
        min-height: 360px;
    }
}


@media (max-width: 600px) {

    .services {
        padding: 70px 0 80px;
    }

    .services-container {
        max-width: calc(100% - 32px);
    }

    .services-heading {
        text-align: left;
    }

    .services-heading h2 {
        font-size: 31px;
    }

    .services-heading p {
        font-size: 15px;
    }

    .service-feature-content {
        padding: 35px 28px;
    }

    .service-feature h3 {
        font-size: 28px;
    }

    .service-feature-visual {
        min-height: 300px;
    }

    .google-card {
        width: calc(100% - 40px);
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: 240px;
    }
}

/* =====================================================
   GOOGLE SYSTEM
===================================================== */

.google-system {
    position: relative;

    padding: 120px 0 130px;

    background: #F7F9FC;

    color: #101828;
}

.google-container {
    width: 1200px;
    max-width: calc(100% - 48px);

    margin: 0 auto;
}


/* =====================================================
   Heading
===================================================== */

.google-heading {
    max-width: 760px;

    margin: 0 auto 65px;

    text-align: center;
}

.google-eyebrow {
    margin-bottom: 18px;

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

    letter-spacing: 2px;

    color: #005CD8;
}

.google-heading h2 {
    margin: 0;

    font-size: 44px;
    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -1.5px;

    color: #101828;
}

.google-heading p {
    margin-top: 20px;

    font-size: 16px;
    line-height: 1.8;

    color: #667085;
}


/* =====================================================
   Main
===================================================== */

.google-main {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}


/* =====================================================
   Google Types
===================================================== */

.google-types {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.google-type {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 125px;

    padding: 22px 25px;

    border: 1px solid #E4E8EF;

    border-radius: 10px;

    background: #ffffff;

    cursor: default;

    transition:
            border-color .2s ease,
            box-shadow .2s ease,
            transform .2s ease;
}

.google-type:hover,
.google-type.active {
    border-color: #BFD5F5;

    box-shadow:
            0 10px 30px rgba(16,24,40,.05);

    transform: translateX(3px);
}


/* Icon */

.google-type-icon {
    flex-shrink: 0;

    width: 44px;
    height: 44px;

    margin-right: 18px;

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

    border-radius: 9px;

    background: #EDF4FF;

    color: #005CD8;

    font-size: 15px;
    font-weight: 700;
}


/* Content */

.google-type-content {
    min-width: 0;
}

.google-type-title {
    font-size: 17px;
    font-weight: 650;

    color: #101828;
}

.google-type-title span {
    margin-left: 8px;

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

    color: #98A2B3;
}

.google-type-content p {
    max-width: 400px;

    margin: 8px 0 0;

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

    color: #667085;
}


/* Arrow */

.google-type-arrow {
    margin-left: auto;

    padding-left: 15px;

    font-size: 18px;

    color: #005CD8;

    opacity: .35;

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

.google-type:hover .google-type-arrow,
.google-type.active .google-type-arrow {
    opacity: 1;

    transform: translateX(3px);
}


/* =====================================================
   Process
===================================================== */

.google-process {
    position: relative;

    padding: 42px;

    border-radius: 14px;

    background:
            linear-gradient(
                    145deg,
                    #071A35 0%,
                    #082653 55%,
                    #0B3470 100%
            );

    overflow: hidden;
}

.google-process::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -160px;
    top: -140px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(22,119,255,.28),
                    rgba(22,119,255,0) 70%
            );
}

.google-process::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -160px;
    bottom: -170px;

    border-radius: 50%;

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


/* Header */

.process-label {
    position: relative;
    z-index: 2;

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

    letter-spacing: 1.5px;

    color: #5EA2FF;
}

.process-title {
    position: relative;
    z-index: 2;

    margin-top: 14px;

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

    color: #ffffff;
}

.process-desc {
    position: relative;
    z-index: 2;

    max-width: 430px;

    margin-top: 14px;

    font-size: 13px;
    line-height: 1.8;

    color: #A9B9D0;
}


/* =====================================================
   Process Flow
===================================================== */

.process-flow {
    position: relative;
    z-index: 2;

    margin-top: 30px;
}

.process-item {
    display: flex;
    align-items: center;

    gap: 15px;
}

.process-number {
    flex-shrink: 0;

    width: 32px;
    height: 32px;

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

    border: 1px solid rgba(94,162,255,.35);

    border-radius: 50%;

    background: rgba(22,119,255,.10);

    color: #5EA2FF;

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

.process-item strong {
    display: block;

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

    color: #ffffff;
}

.process-item span {
    display: block;

    margin-top: 3px;

    font-size: 11px;

    color: #8299B8;
}

.process-line {
    width: 1px;
    height: 18px;

    margin-left: 16px;

    background:
            rgba(94,162,255,.25);
}


/* =====================================================
   Responsive
===================================================== */

@media (max-width: 900px) {

    .google-system {
        padding: 90px 0;
    }

    .google-heading {
        margin-bottom: 50px;
    }

    .google-heading h2 {
        font-size: 36px;
    }

    .google-main {
        grid-template-columns: 1fr;
    }

    .google-process {
        min-height: auto;
    }
}


@media (max-width: 600px) {

    .google-system {
        padding: 70px 0 80px;
    }

    .google-container {
        max-width: calc(100% - 32px);
    }

    .google-heading {
        text-align: left;
    }

    .google-heading h2 {
        font-size: 31px;
    }

    .google-heading p {
        font-size: 15px;
    }

    .google-type {
        min-height: auto;

        padding: 20px;
    }

    .google-type-content p {
        display: none;
    }

    .google-process {
        padding: 30px 25px;
    }

    .process-title {
        font-size: 26px;
    }
}

/* =====================================================
   MARKETING MATRIX
===================================================== */

.marketing-matrix {
    position: relative;

    padding: 120px 0 130px;

    background: #ffffff;

    color: #101828;
}

.matrix-container {
    width: 1200px;
    max-width: calc(100% - 48px);

    margin: 0 auto;
}


/* =====================================================
   Heading
===================================================== */

.matrix-heading {
    max-width: 800px;

    margin: 0 auto 75px;

    text-align: center;
}

.matrix-eyebrow {
    margin-bottom: 18px;

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

    letter-spacing: 2px;

    color: #005CD8;
}

.matrix-heading h2 {
    margin: 0;

    font-size: 44px;
    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -1.5px;

    color: #101828;
}

.matrix-heading h2 span {
    color: #005CD8;
}

.matrix-heading p {
    max-width: 650px;

    margin: 20px auto 0;

    font-size: 16px;
    line-height: 1.8;

    color: #667085;
}


/* =====================================================
   Layout
===================================================== */

.matrix-layout {
    display: grid;

    grid-template-columns: 1fr 280px 1fr;

    align-items: center;

    gap: 35px;
}


/* =====================================================
   Side Columns
===================================================== */

.matrix-column {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


/* =====================================================
   Card
===================================================== */

.matrix-card {
    position: relative;

    min-height: 225px;

    padding: 28px;

    border: 1px solid #E6EAF0;

    border-radius: 12px;

    background: #ffffff;

    transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease;
}

.matrix-card:hover {
    transform: translateY(-4px);

    border-color: #D4E2F5;

    box-shadow:
            0 18px 45px rgba(16,24,40,.07);
}


/* =====================================================
   Card Top
===================================================== */

.matrix-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.matrix-icon {
    width: 42px;
    height: 42px;

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

    border-radius: 9px;

    background: #EDF4FF;

    color: #005CD8;

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

.matrix-number {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;

    color: #B7C2D1;
}


/* =====================================================
   Card Content
===================================================== */

.matrix-card h3 {
    margin: 24px 0 0;

    font-size: 19px;
    line-height: 1.5;

    font-weight: 650;

    color: #101828;
}

.matrix-card p {
    margin-top: 12px;

    font-size: 13px;
    line-height: 1.8;

    color: #667085;
}

.matrix-keyword {
    display: inline-flex;

    margin-top: 18px;

    padding: 5px 8px;

    border-radius: 4px;

    background: #F4F7FB;

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

    letter-spacing: .5px;

    color: #667085;
}


/* =====================================================
   Center
===================================================== */

.matrix-center {
    display: flex;
    flex-direction: column;

    align-items: center;

    justify-content: center;
}

.matrix-center-ring {
    position: relative;

    width: 210px;
    height: 210px;

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

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    #EDF4FF 0%,
                    #EDF4FF 48%,
                    rgba(237,244,255,.35) 49%,
                    rgba(237,244,255,0) 68%
            );

    border: 1px solid #D9E6F7;
}

.matrix-center-ring::before {
    content: "";

    position: absolute;

    inset: 18px;

    border: 1px dashed #BCD2EE;

    border-radius: 50%;
}

.matrix-center-ring::after {
    content: "";

    position: absolute;

    inset: -10px;

    border: 1px solid rgba(0,92,216,.08);

    border-radius: 50%;
}

.matrix-center-inner {
    position: relative;
    z-index: 2;

    width: 125px;
    height: 125px;

    display: flex;
    flex-direction: column;

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

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
            0 12px 35px rgba(16,24,40,.08);
}

.matrix-google {
    font-size: 25px;
    font-weight: 700;

    color: #005CD8;
}

.matrix-center-inner strong {
    margin-top: 6px;

    font-size: 13px;

    color: #101828;
}

.matrix-center-inner span {
    margin-top: 4px;

    font-size: 9px;

    color: #98A2B3;
}

.matrix-center-caption {
    margin-top: 22px;

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

    color: #667085;
}


/* =====================================================
   Bottom
===================================================== */

.matrix-bottom {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 65px;

    padding: 25px 35px;

    border: 1px solid #E6EAF0;

    border-radius: 10px;

    background: #F8FAFC;
}

.matrix-bottom-item {
    display: flex;
    align-items: center;

    gap: 10px;
}

.matrix-bottom-item span {
    font-size: 10px;
    font-weight: 700;

    color: #005CD8;
}

.matrix-bottom-item strong {
    font-size: 13px;
    font-weight: 600;

    color: #475467;
}

.matrix-bottom-line {
    width: 40px;
    height: 1px;

    margin: 0 20px;

    background: #D8E0EA;
}


/* =====================================================
   Responsive
===================================================== */

@media (max-width: 1000px) {

    .matrix-layout {
        grid-template-columns: 1fr 220px 1fr;

        gap: 20px;
    }

    .matrix-card {
        padding: 22px;
    }

    .matrix-center-ring {
        width: 180px;
        height: 180px;
    }
}


@media (max-width: 850px) {

    .marketing-matrix {
        padding: 90px 0;
    }

    .matrix-heading {
        margin-bottom: 55px;
    }

    .matrix-heading h2 {
        font-size: 36px;
    }

    .matrix-layout {
        grid-template-columns: 1fr 1fr;
    }

    .matrix-center {
        grid-column: span 2;

        grid-row: 1;

        margin-bottom: 25px;
    }

    .matrix-column {
        grid-row: 2;
    }
}


@media (max-width: 600px) {

    .marketing-matrix {
        padding: 70px 0 80px;
    }

    .matrix-container {
        max-width: calc(100% - 32px);
    }

    .matrix-heading {
        text-align: left;
    }

    .matrix-heading h2 {
        font-size: 31px;
    }

    .matrix-heading p {
        font-size: 15px;
    }

    .matrix-layout {
        display: flex;
        flex-direction: column;
    }

    .matrix-center {
        order: 1;

        margin-bottom: 10px;
    }

    .matrix-column {
        width: 100%;

        order: 2;
    }

    .matrix-center-ring {
        width: 180px;
        height: 180px;
    }

    .matrix-card {
        min-height: auto;
    }

    .matrix-bottom {
        flex-wrap: wrap;

        gap: 15px;

        justify-content: flex-start;

        padding: 20px;
    }

    .matrix-bottom-line {
        display: none;
    }
}

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

.process-section {
    position: relative;

    padding: 120px 0 130px;

    background: #F7F9FC;

    color: #101828;
}

.process-container {
    width: 1200px;
    max-width: calc(100% - 48px);

    margin: 0 auto;
}


/* =====================================================
   Heading
===================================================== */

.process-heading {
    max-width: 780px;

    margin: 0 auto 70px;

    text-align: center;
}

.process-eyebrow {
    margin-bottom: 18px;

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

    letter-spacing: 2px;

    color: #005CD8;
}

.process-heading h2 {
    margin: 0;

    font-size: 44px;
    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -1.5px;

    color: #101828;
}

.process-heading h2 span {
    color: #005CD8;
}

.process-heading p {
    max-width: 680px;

    margin: 20px auto 0;

    font-size: 16px;
    line-height: 1.8;

    color: #667085;
}


/* =====================================================
   Timeline
===================================================== */

.process-timeline {
    display: flex;
    align-items: stretch;

    width: 100%;
}

.process-timeline-bottom {
    margin-top: 16px;
}


/* =====================================================
   Step
===================================================== */

.process-step {
    position: relative;

    flex: 1;

    min-height: 220px;

    padding: 28px;

    border: 1px solid #E3E8EF;

    border-radius: 10px;

    background: #ffffff;

    transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease;
}

.process-step:hover {
    transform: translateY(-4px);

    border-color: #C9DCF4;

    box-shadow:
            0 15px 40px rgba(16,24,40,.06);
}


/* Number */

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #EDF4FF;

    color: #005CD8;

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

    letter-spacing: .5px;
}


/* Content */

.step-content h3 {
    margin: 25px 0 0;

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

    font-weight: 650;

    color: #101828;
}

.step-content p {
    margin: 11px 0 0;

    font-size: 12px;
    line-height: 1.8;

    color: #667085;
}


/* =====================================================
   Connector
===================================================== */

.step-connector {
    flex: 0 0 32px;

    position: relative;
}

.step-connector::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 5px;
    right: 5px;

    height: 1px;

    background: #CBD5E1;
}

.step-connector::after {
    content: "›";

    position: absolute;

    top: calc(50% - 16px);
    right: -1px;

    font-size: 18px;

    color: #98A2B3;
}


/* =====================================================
   Final Step
===================================================== */

.process-step-final {
    border-color: #C9DCF4;

    background:
            linear-gradient(
                    145deg,
                    #F8FBFF,
                    #EDF4FF
            );
}


/* =====================================================
   Bottom
===================================================== */

.process-bottom {
    display: flex;
    align-items: center;

    max-width: 650px;

    margin: 55px auto 0;

    padding: 20px 25px;

    border: 1px solid #DDE7F3;

    border-radius: 9px;

    background: #ffffff;
}

.process-bottom-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    margin-right: 15px;

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

    border-radius: 50%;

    background: #EDF4FF;

    color: #005CD8;

    font-size: 18px;
}

.process-bottom strong {
    display: block;

    font-size: 14px;

    color: #101828;
}

.process-bottom span {
    display: block;

    margin-top: 4px;

    font-size: 12px;

    color: #667085;
}


/* =====================================================
   Responsive
===================================================== */

@media (max-width: 1000px) {

    .process-timeline {
        flex-wrap: wrap;

        gap: 16px;
    }

    .process-step {
        flex: 0 0 calc(50% - 8px);
    }

    .step-connector {
        display: none;
    }

    .process-timeline-bottom {
        margin-top: 16px;
    }
}


@media (max-width: 700px) {

    .process-section {
        padding: 90px 0;
    }

    .process-heading {
        margin-bottom: 50px;
    }

    .process-heading h2 {
        font-size: 36px;
    }

    .process-step {
        flex: 0 0 100%;

        min-height: auto;
    }
}


@media (max-width: 600px) {

    .process-section {
        padding: 70px 0 80px;
    }

    .process-container {
        max-width: calc(100% - 32px);
    }

    .process-heading {
        text-align: left;
    }

    .process-heading h2 {
        font-size: 31px;
    }

    .process-heading p {
        font-size: 15px;
    }

    .process-step {
        padding: 25px;
    }

    .process-bottom {
        align-items: flex-start;

        margin-top: 40px;

        padding: 18px;
    }
}

/* =====================================================
   LOCAL EXPERIENCE
===================================================== */

.local-section {
    position: relative;

    padding: 120px 0 125px;

    background: #ffffff;

    color: #101828;
}

.local-container {
    width: 1200px;
    max-width: calc(100% - 48px);

    margin: 0 auto;
}


/* =====================================================
   Main Grid
===================================================== */

.local-grid {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    align-items: center;

    gap: 85px;
}


/* =====================================================
   Content
===================================================== */

.local-eyebrow {
    margin-bottom: 18px;

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

    letter-spacing: 2px;

    color: #005CD8;
}

.local-content h2 {
    margin: 0;

    font-size: 44px;
    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -1.5px;

    color: #101828;
}

.local-content h2 span {
    color: #005CD8;
}


/* Lead */

.local-lead {
    margin-top: 25px;

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

    color: #475467;
}

.local-lead strong {
    display: block;

    color: #101828;

    font-weight: 650;
}


/* Divider */

.local-divider {
    width: 45px;
    height: 2px;

    margin: 28px 0;

    background: #005CD8;
}


/* Paragraph */

.local-content p {
    max-width: 520px;

    margin: 0 0 15px;

    font-size: 14px;
    line-height: 1.9;

    color: #667085;
}


/* =====================================================
   Features
===================================================== */

.local-features {
    display: flex;

    gap: 35px;

    margin-top: 30px;
}

.local-feature {
    display: flex;
    align-items: center;

    gap: 12px;
}

.local-feature-icon {
    width: 34px;
    height: 34px;

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

    border-radius: 7px;

    background: #EDF4FF;

    color: #005CD8;

    font-size: 9px;
    font-weight: 700;
}

.local-feature strong {
    display: block;

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

    color: #344054;
}

.local-feature span {
    display: block;

    margin-top: 3px;

    font-size: 10px;

    color: #98A2B3;
}


/* =====================================================
   Visual
===================================================== */

.local-visual {
    position: relative;

    padding: 15px 15px 15px 0;
}

.team-photo-wrap {
    position: relative;

    z-index: 2;

    overflow: hidden;

    border-radius: 14px;

    background: #EAF1FA;

    box-shadow:
            0 25px 60px rgba(16,24,40,.12);
}

.team-photo {
    display: block;

    width: 100%;
    height: 500px;

    object-fit: cover;

    object-position: center;

    transition:
            transform .6s ease;
}

.team-photo-wrap:hover .team-photo {
    transform: scale(1.02);
}


/* =====================================================
   Photo Caption
===================================================== */

.team-caption {
    position: absolute;

    left: 25px;
    bottom: 25px;

    padding: 14px 18px;

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

    border-radius: 7px;

    background: rgba(7,26,53,.82);

    backdrop-filter: blur(10px);

    color: #ffffff;
}

.team-caption span {
    display: block;

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

    letter-spacing: 1.5px;

    color: #7EB3FF;
}

.team-caption strong {
    display: block;

    margin-top: 5px;

    font-size: 13px;
    font-weight: 600;
}


/* Decorative block */

.visual-decor {
    position: absolute;

    right: -5px;
    bottom: -10px;

    width: 180px;
    height: 180px;

    border-radius: 12px;

    background: #EDF4FF;

    z-index: 1;
}


/* =====================================================
   Bottom Statement
===================================================== */

.local-bottom {
    display: flex;
    align-items: center;

    max-width: 850px;

    margin: 75px auto 0;

    text-align: center;
}

.local-bottom-line {
    flex: 1;

    height: 1px;

    background: #E4E7EC;
}

.local-bottom p {
    padding: 0 30px;

    font-size: 15px;
    line-height: 1.8;

    color: #667085;
}

.local-bottom strong {
    color: #005CD8;

    font-weight: 650;
}


/* =====================================================
   Responsive
===================================================== */

@media (max-width: 950px) {

    .local-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .local-content {
        max-width: 700px;
    }

    .team-photo {
        height: 450px;
    }
}


@media (max-width: 600px) {

    .local-section {
        padding: 75px 0 80px;
    }

    .local-container {
        max-width: calc(100% - 32px);
    }

    .local-content h2 {
        font-size: 32px;
    }

    .local-lead {
        font-size: 17px;
    }

    .local-features {
        flex-direction: column;

        gap: 18px;
    }

    .team-photo {
        height: 350px;
    }

    .local-bottom {
        margin-top: 50px;
    }

    .local-bottom-line {
        display: none;
    }

    .local-bottom p {
        padding: 0;

        text-align: left;
    }

    .visual-decor {
        width: 100px;
        height: 100px;
    }
}

/* =====================================================
   ABOUT REWORLD
===================================================== */

.about-section {
    padding: 120px 0 130px;

    background:
            linear-gradient(
                    180deg,
                    #F8FAFC 0%,
                    #F1F5F9 100%
            );

    color: #101828;
}

.about-container {
    width: 900px;
    max-width: calc(100% - 48px);

    margin: 0 auto;

    text-align: center;
}


/* Eyebrow */

.about-eyebrow {
    margin-bottom: 25px;

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

    letter-spacing: 2px;

    color: #005CD8;
}


/* Logo */

.about-logo {
    display: flex;
    justify-content: center;

    margin-bottom: 30px;
}

.about-logo img {
    display: block;

    width: 210px;
    height: auto;
}


/* Heading */

.about-container h2 {
    margin: 0;

    font-size: 40px;
    line-height: 1.4;

    font-weight: 700;

    letter-spacing: -1px;

    color: #101828;
}


/* Content */

.about-content {
    max-width: 760px;

    margin: 30px auto 0;
}

.about-content p {
    margin: 0 0 15px;

    font-size: 14px;
    line-height: 2;

    color: #667085;
}

.about-content .about-intro {
    font-size: 17px;
    line-height: 1.8;

    font-weight: 500;

    color: #344054;
}


/* =====================================================
   Values
===================================================== */

.about-values {
    display: grid;

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

    gap: 16px;

    margin-top: 55px;
}

.about-value {
    padding: 25px 20px;

    border: 1px solid #E1E7EF;

    border-radius: 10px;

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

.about-value span {
    display: block;

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

    letter-spacing: 1px;

    color: #005CD8;
}

.about-value strong {
    display: block;

    margin-top: 10px;

    font-size: 15px;

    color: #101828;
}

.about-value p {
    margin: 7px 0 0;

    font-size: 11px;

    color: #98A2B3;
}


/* =====================================================
   Responsive
===================================================== */

@media (max-width: 700px) {

    .about-section {
        padding: 80px 0;
    }

    .about-container {
        max-width: calc(100% - 32px);
    }

    .about-container h2 {
        font-size: 32px;
    }

    .about-logo img {
        width: 180px;
    }

    .about-content .about-intro {
        font-size: 16px;
    }

    .about-values {
        grid-template-columns: 1fr;
    }
}

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

.cta-section {
    position: relative;

    padding: 110px 0;

    background:
            linear-gradient(
                    135deg,
                    #06172F 0%,
                    #082653 55%,
                    #0A3470 100%
            );

    overflow: hidden;

    color: #ffffff;
}

.cta-container {
    position: relative;

    width: 1200px;
    max-width: calc(100% - 48px);

    min-height: 330px;

    margin: 0 auto;

    display: flex;
    align-items: center;
}


/* =====================================================
   Content
===================================================== */

.cta-content {
    position: relative;

    z-index: 3;

    max-width: 700px;
}

.cta-eyebrow {
    margin-bottom: 18px;

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

    letter-spacing: 2px;

    color: #6EACFF;
}

.cta-content h2 {
    margin: 0;

    font-size: 48px;
    line-height: 1.25;

    font-weight: 700;

    letter-spacing: -1.8px;

    color: #ffffff;
}

.cta-content p {
    margin: 20px 0 0;

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

    color: #AFC0D8;
}


/* =====================================================
   Buttons
===================================================== */

.cta-actions {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 32px;
}

.cta-primary,
.cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 46px;

    padding: 0 20px;

    border-radius: 6px;

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

    text-decoration: none;

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


/* Primary */

.cta-primary {
    gap: 10px;

    background: #ffffff;

    color: #005CD8;
}

.cta-primary span {
    font-size: 17px;

    transition:
            transform .2s ease;
}

.cta-primary:hover {
    transform: translateY(-2px);

    background: #F4F8FF;
}

.cta-primary:hover span {
    transform: translateX(3px);
}


/* Secondary */

.cta-secondary {
    border: 1px solid rgba(255,255,255,.22);

    color: #DCE8F7;

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

.cta-secondary:hover {
    transform: translateY(-2px);

    border-color: rgba(255,255,255,.4);

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


/* =====================================================
   Decoration
===================================================== */

.cta-decoration {
    position: absolute;

    top: 0;
    right: -30px;

    width: 560px;
    height: 100%;

    pointer-events: none;
}


/* Circles */

.cta-circle {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(112,172,255,.16);
}

.circle-one {
    width: 460px;
    height: 460px;

    right: -80px;
    top: -65px;
}

.circle-two {
    width: 320px;
    height: 320px;

    right: 35px;
    top: 5px;

    border-color: rgba(112,172,255,.11);
}


/* Grid */

.cta-grid {
    position: absolute;

    width: 320px;
    height: 320px;

    right: 40px;
    top: 5px;

    opacity: .22;

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

    background-size: 32px 32px;

    mask-image:
            radial-gradient(
                    circle,
                    black 20%,
                    transparent 72%
            );

    -webkit-mask-image:
            radial-gradient(
                    circle,
                    black 20%,
                    transparent 72%
            );
}


/* =====================================================
   Responsive
===================================================== */

@media (max-width: 900px) {

    .cta-section {
        padding: 90px 0;
    }

    .cta-container {
        min-height: 300px;
    }

    .cta-content h2 {
        font-size: 40px;
    }

    .cta-decoration {
        opacity: .5;
    }
}


@media (max-width: 600px) {

    .cta-section {
        padding: 75px 0;
    }

    .cta-container {
        max-width: calc(100% - 32px);

        min-height: 330px;
    }

    .cta-content h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .cta-content p {
        font-size: 15px;
    }

    .cta-actions {
        align-items: stretch;

        flex-direction: column;

        width: 180px;
    }

    .cta-decoration {
        right: -220px;

        opacity: .35;
    }
}