/* =========================================
   CHAVO APP DEVELOPMENT — HERO
========================================= */

:root {
    --chv-app-hero-bg: #0a0a0a;
    --chv-app-hero-surface: #111111;
    --chv-app-hero-surface-alt: #151515;

    --chv-app-hero-white: #ffffff;
    --chv-app-hero-soft: #b8b8b8;
    --chv-app-hero-muted: #707070;

    --chv-app-hero-gold: #F4B548;
    --chv-app-hero-gold-soft: rgba(244, 181, 72, 0.12);
    --chv-app-hero-gold-glow: rgba(244, 181, 72, 0.30);

    --chv-app-hero-border: rgba(255, 255, 255, 0.10);
    --chv-app-hero-border-gold: rgba(244, 181, 72, 0.35);

    --chv-app-hero-transition: 0.6s ease;
}


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

.chv-app-hero-section {
    position: relative;
    min-height: 100vh;
    padding: 45px 0 10px;

    background: var(--chv-app-hero-bg);

    overflow: hidden;
}


.chv-app-hero-container {
    width: min(1450px, 90%);
    min-height: 720px;

    margin: 0 auto;

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

    align-items: center;

    gap: 60px;
}


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

.chv-app-hero-content {
    position: relative;
    z-index: 10;

    max-width: 720px;
}


.chv-app-hero-label {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 32px;

    color: var(--chv-app-hero-gold);

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

    letter-spacing: 3px;
}


.chv-app-hero-label-line {
    width: 45px;
    height: 1px;

    background: var(--chv-app-hero-gold);
}


.chv-app-hero-title {
    margin: 0;

    color: var(--chv-app-hero-white);

    font-size: clamp(55px, 6.2vw, 76px);
    line-height: 0.91;

    font-weight: 800;

    letter-spacing: -4px;

    text-transform: uppercase;
}


.chv-app-hero-title span {
    display: block;

    color: var(--chv-app-hero-gold);
}


.chv-app-hero-description {
    max-width: 590px;

    margin: 38px 0 34px;

    color: var(--chv-app-hero-soft);

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


/* =========================================
   HIGHLIGHTS
========================================= */

.chv-app-hero-highlights {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 38px;
}


.chv-app-hero-highlight {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 14px;

    border: 1px solid var(--chv-app-hero-border);

    background: var(--chv-app-hero-surface);

    transition: var(--chv-app-hero-transition);
}


.chv-app-hero-highlight span {
    color: var(--chv-app-hero-gold);

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


.chv-app-hero-highlight strong {
    color: var(--chv-app-hero-soft);

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

    letter-spacing: 1px;
}


.chv-app-hero-highlight:hover {
    border-color: var(--chv-app-hero-border-gold);

    transform: translateY(-4px);
}


.chv-app-hero-highlight:hover strong {
    color: var(--chv-app-hero-white);
}


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

.chv-app-hero-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    padding: 7px 8px 7px 22px;

    border: 2px solid var(--chv-app-hero-border-gold);
    border-radius: 50px;

    color: var(--chv-app-hero-white);

    text-decoration: none;

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

    letter-spacing: 1.5px;

    transition: var(--chv-app-hero-transition);
}


.chv-app-hero-button i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: var(--chv-app-hero-gold);

    color: var(--chv-app-hero-bg);

    transition: var(--chv-app-hero-transition);
}


.chv-app-hero-button:hover {
    background: var(--chv-app-hero-gold);

    color: var(--chv-app-hero-bg);

    transform: translateY(-3px);
}


.chv-app-hero-button:hover i {
    background: var(--chv-app-hero-bg);

    color: var(--chv-app-hero-gold);

    transform: translateX(5px);
}


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

.chv-app-hero-visual {
    position: relative;

    width: 100%;
    height: 700px;

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


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

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

    opacity: 0.3;

    background-image:
        linear-gradient(
            var(--chv-app-hero-border) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--chv-app-hero-border) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

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

    animation: chvAppGridMove 18s linear infinite;
}


@keyframes chvAppGridMove {

    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(50px, 50px);
    }

}


/* =========================================
   ORBIT RINGS
========================================= */

.chv-app-hero-orbit {
    position: absolute;

    border: 1px solid var(--chv-app-hero-border);

    border-radius: 50%;

    pointer-events: none;
}


.chv-app-hero-orbit-one {
    width: 520px;
    height: 520px;

    animation: chvAppOrbitOne 18s linear infinite;
}


.chv-app-hero-orbit-two {
    width: 410px;
    height: 410px;

    border-color: var(--chv-app-hero-border-gold);

    transform: rotate(45deg);

    animation: chvAppOrbitTwo 14s linear infinite reverse;
}


.chv-app-hero-orbit-three {
    width: 620px;
    height: 300px;

    border-color: var(--chv-app-hero-border);

    transform: rotate(-28deg);

    animation: chvAppOrbitThree 20s linear infinite;
}


@keyframes chvAppOrbitOne {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes chvAppOrbitTwo {

    from {
        transform: rotate(45deg);
    }

    to {
        transform: rotate(405deg);
    }

}


@keyframes chvAppOrbitThree {

    from {
        transform: rotate(-28deg);
    }

    to {
        transform: rotate(332deg);
    }

}


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

.chv-app-hero-connect {
    position: absolute;

    width: 230px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--chv-app-hero-gold),
        transparent
    );

    opacity: 0.35;

    transform-origin: center;
}


.chv-app-hero-connect-one {
    transform: rotate(-35deg) translateX(140px);
}


.chv-app-hero-connect-two {
    transform: rotate(35deg) translateX(140px);
}


.chv-app-hero-connect-three {
    transform: rotate(-75deg) translateX(150px);
}


.chv-app-hero-connect-four {
    transform: rotate(75deg) translateX(150px);
}


.chv-app-hero-connect-five {
    transform: rotate(-145deg) translateX(150px);
}


.chv-app-hero-connect-six {
    transform: rotate(145deg) translateX(150px);
}


/* =========================================
   PHONE
========================================= */

.chv-app-hero-phone {
    position: relative;

    z-index: 8;

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


@keyframes chvAppPhoneFloat {

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

    50% {
        transform: translateY(-14px) rotate(1deg);
    }

}


.chv-app-hero-phone-frame {
    position: relative;

    width: 270px;
    height: 540px;

    padding: 9px;

    border: 2px solid var(--chv-app-hero-border-gold);

    border-radius: 42px;

    background: var(--chv-app-hero-surface);

    box-shadow:
        0 0 60px var(--chv-app-hero-gold-soft),
        inset 0 0 30px var(--chv-app-hero-gold-soft);
}


.chv-app-hero-phone-frame::before {
    content: "";

    position: absolute;

    inset: 4px;

    border: 1px solid var(--chv-app-hero-border);

    border-radius: 37px;

    pointer-events: none;
}


.chv-app-hero-phone-speaker {
    position: absolute;

    top: 17px;
    left: 50%;

    width: 75px;
    height: 5px;

    transform: translateX(-50%);

    border-radius: 10px;

    background: var(--chv-app-hero-muted);

    z-index: 5;
}


.chv-app-hero-phone-screen {
    position: relative;

    width: 100%;
    height: 100%;

    padding: 25px 17px 15px;

    border-radius: 34px;

    background: var(--chv-app-hero-bg);

    overflow: hidden;
}


/* =========================================
   PHONE UI
========================================= */

.chv-app-hero-status {
    display: flex;
    justify-content: space-between;

    color: var(--chv-app-hero-white);

    font-size: 8px;
}


.chv-app-hero-status div {
    display: flex;
    gap: 5px;
}


.chv-app-hero-status i {
    font-size: 7px;
}


.chv-app-hero-app-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 35px;

    color: var(--chv-app-hero-white);

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

    letter-spacing: 1px;
}


.chv-app-hero-app-head i {
    color: var(--chv-app-hero-gold);
}


.chv-app-hero-welcome {
    display: flex;
    flex-direction: column;

    margin-top: 30px;
}


.chv-app-hero-welcome small {
    color: var(--chv-app-hero-muted);

    font-size: 7px;

    letter-spacing: 1.5px;
}


.chv-app-hero-welcome strong {
    margin-top: 5px;

    color: var(--chv-app-hero-white);

    font-size: 16px;
}


/* CHART */

.chv-app-hero-chart {
    margin-top: 20px;

    padding: 15px;

    border: 1px solid var(--chv-app-hero-border);

    border-radius: 14px;

    background: var(--chv-app-hero-surface);
}


.chv-app-hero-chart-top {
    display: flex;
    justify-content: space-between;

    color: var(--chv-app-hero-soft);

    font-size: 8px;
}


.chv-app-hero-chart-top strong {
    color: var(--chv-app-hero-gold);
}


.chv-app-hero-chart-line {
    position: relative;

    height: 75px;

    margin-top: 12px;

    display: flex;
    align-items: flex-end;

    gap: 7px;
}


.chv-app-hero-chart-line span {
    flex: 1;

    border-radius: 4px 4px 0 0;

    background: var(--chv-app-hero-gold);

    opacity: 0.35;

    animation: chvAppBars 2s ease-in-out infinite alternate;
}


.chv-app-hero-chart-line span:nth-child(1) {
    height: 25%;
}

.chv-app-hero-chart-line span:nth-child(2) {
    height: 42%;
}

.chv-app-hero-chart-line span:nth-child(3) {
    height: 35%;
}

.chv-app-hero-chart-line span:nth-child(4) {
    height: 55%;
}

.chv-app-hero-chart-line span:nth-child(5) {
    height: 48%;
}

.chv-app-hero-chart-line span:nth-child(6) {
    height: 72%;
}

.chv-app-hero-chart-line span:nth-child(7) {
    height: 90%;
}


@keyframes chvAppBars {

    from {
        opacity: 0.25;
    }

    to {
        opacity: 0.75;
    }

}


/* APP CARDS */

.chv-app-hero-app-cards {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-top: 10px;
}


.chv-app-hero-app-cards > div {
    display: flex;
    flex-direction: column;

    padding: 11px;

    border: 1px solid var(--chv-app-hero-border);

    border-radius: 12px;

    background: var(--chv-app-hero-surface);
}


.chv-app-hero-app-cards i {
    color: var(--chv-app-hero-gold);

    font-size: 10px;
}


.chv-app-hero-app-cards span {
    margin-top: 8px;

    color: var(--chv-app-hero-muted);

    font-size: 7px;
}


.chv-app-hero-app-cards strong {
    margin-top: 3px;

    color: var(--chv-app-hero-white);

    font-size: 11px;
}


/* PHONE NAV */

.chv-app-hero-nav {
    position: absolute;

    left: 17px;
    right: 17px;
    bottom: 14px;

    display: flex;
    justify-content: space-around;

    padding: 10px;

    border: 1px solid var(--chv-app-hero-border);

    border-radius: 15px;

    background: var(--chv-app-hero-surface);
}


.chv-app-hero-nav i {
    color: var(--chv-app-hero-muted);

    font-size: 10px;
}


.chv-app-hero-nav i:first-child {
    color: var(--chv-app-hero-gold);
}


/* =========================================
   ECOSYSTEM NODES
========================================= */

.chv-app-hero-node {
    position: absolute;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 10px 14px;

    border: 1px solid var(--chv-app-hero-border);

    border-radius: 50px;

    background: rgba(17, 17, 17, 0.92);

    backdrop-filter: blur(10px);

    z-index: 10;

    animation: chvAppNodeFloat 4s ease-in-out infinite;
}


@keyframes chvAppNodeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


.chv-app-hero-node-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: var(--chv-app-hero-gold-soft);

    color: var(--chv-app-hero-gold);

    font-size: 22px;
}


.chv-app-hero-node div:last-child {
    display: flex;
    flex-direction: column;
}


.chv-app-hero-node small {
    color: var(--chv-app-hero-muted);

    font-size: 7px;
}


.chv-app-hero-node strong {
    margin-top: 2px;

    color: var(--chv-app-hero-white);

    font-size: 16px;

    letter-spacing: 1px;
}


.chv-app-hero-node:hover {
    border-color: var(--chv-app-hero-gold);

    box-shadow: 0 0 25px var(--chv-app-hero-gold-soft);

    transform: translateY(-5px) scale(1.04);
}


.chv-app-hero-node-users {
    top: 10%;
    left: 4%;

    animation-delay: 0s;
}


.chv-app-hero-node-business {
    top: 22%;
    right: 2%;

    animation-delay: 0.7s;
}


.chv-app-hero-node-payments {
    bottom: 20%;
    left: 1%;

    animation-delay: 1.2s;
}


.chv-app-hero-node-data {
    bottom: 10%;
    right: 6%;

    animation-delay: 1.8s;
}


.chv-app-hero-node-notifications {
    top: 45%;
    left: -2%;

    animation-delay: 2.2s;
}


.chv-app-hero-node-analytics {
    top: 53%;
    right: -3%;

    animation-delay: 2.8s;
}


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

.chv-app-hero-tag {
    position: absolute;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 8px 12px;

    border: 1px solid var(--chv-app-hero-border);

    border-radius: 4px;

    background: var(--chv-app-hero-surface);

    color: var(--chv-app-hero-soft);

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

    letter-spacing: 1px;

    z-index: 11;

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


.chv-app-hero-tag i {
    color: var(--chv-app-hero-gold);
}


@keyframes chvAppTagFloat {

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

    50% {
        transform: translateY(-10px) rotate(2deg);
    }

}


.chv-app-hero-tag-mobile {
    top: 5%;
    right: 24%;
}


.chv-app-hero-tag-cloud {
    bottom: 5%;
    left: 20%;

    animation-delay: 1s;
}


.chv-app-hero-tag-secure {
    top: 35%;
    right: -4%;

    animation-delay: 1.8s;
}


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

.chv-app-hero-orbit-dot {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--chv-app-hero-gold);

    box-shadow:
        0 0 15px var(--chv-app-hero-gold-glow);

    z-index: 4;
}


.chv-app-hero-dot-one {
    top: 15%;
    left: 25%;

    animation: chvAppDotOne 8s linear infinite;
}


.chv-app-hero-dot-two {
    top: 70%;
    right: 20%;

    animation: chvAppDotTwo 10s linear infinite;
}


.chv-app-hero-dot-three {
    bottom: 20%;
    left: 30%;

    animation: chvAppDotThree 12s linear infinite;
}


@keyframes chvAppDotOne {

    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(100px, 70px);
    }

    100% {
        transform: translate(0, 0);
    }

}


@keyframes chvAppDotTwo {

    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-80px, -90px);
    }

    100% {
        transform: translate(0, 0);
    }

}


@keyframes chvAppDotThree {

    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(90px, -60px);
    }

    100% {
        transform: translate(0, 0);
    }

}


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

@media (max-width: 1100px) {

    .chv-app-hero-container {
        grid-template-columns: 1fr;
        gap: 80px;
    }


    .chv-app-hero-content {
        max-width: 800px;
    }


    .chv-app-hero-visual {
        height: 650px;
    }

}


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

@media (max-width: 700px) {

    .chv-app-hero-section {
        padding: 90px 0 70px;
    }


    .chv-app-hero-container {
        width: 88%;
        min-height: auto;
        gap: 65px;
    }


    .chv-app-hero-label {
        font-size: 11px;
        letter-spacing: 2px;
    }


    .chv-app-hero-label-line {
        width: 30px;
    }


    .chv-app-hero-title {
        font-size: clamp(44px, 13vw, 68px);
        letter-spacing: -2.5px;
    }


    .chv-app-hero-description {
        font-size: 15px;
        line-height: 1.7;
    }


    .chv-app-hero-highlights {
        flex-direction: column;
        align-items: flex-start;
    }


    .chv-app-hero-visual {
        height: 570px;
    }


    .chv-app-hero-phone-frame {
        width: 220px;
        height: 440px;
    }


    .chv-app-hero-orbit-one {
        width: 430px;
        height: 430px;
    }


    .chv-app-hero-orbit-two {
        width: 350px;
        height: 350px;
    }


    .chv-app-hero-orbit-three {
        width: 480px;
        height: 230px;
    }


    .chv-app-hero-node {
        padding: 7px 10px;
        gap: 7px;
    }


    .chv-app-hero-node-icon {
        width: 28px;
        height: 28px;

        font-size: 10px;
    }


    .chv-app-hero-node strong {
        font-size: 7px;
    }


    .chv-app-hero-node small {
        font-size: 6px;
    }


    .chv-app-hero-node-users {
        top: 2%;
        left: 0;
    }


    .chv-app-hero-node-business {
        top: 15%;
        right: 0;
    }


    .chv-app-hero-node-payments {
        bottom: 15%;
        left: 0;
    }


    .chv-app-hero-node-data {
        bottom: 3%;
        right: 0;
    }


    .chv-app-hero-node-notifications {
        top: 48%;
        left: -4%;
    }


    .chv-app-hero-node-analytics {
        top: 55%;
        right: -4%;
    }


    .chv-app-hero-tag-mobile {
        top: 0;
        right: 20%;
    }


    .chv-app-hero-tag-cloud {
        bottom: 0;
        left: 18%;
    }


    .chv-app-hero-tag-secure {
        top: 32%;
        right: -5%;
    }


    .chv-app-hero-connect {
        width: 150px;
    }

}


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

@media (max-width: 430px) {

    .chv-app-hero-title {
        font-size: 41px;
    }


    .chv-app-hero-description {
        font-size: 14px;
    }


    .chv-app-hero-visual {
        height: 510px;
    }


    .chv-app-hero-phone-frame {
        width: 190px;
        height: 380px;
    }


    .chv-app-hero-phone-screen {
        padding: 20px 12px 10px;
    }


    .chv-app-hero-phone-speaker {
        width: 55px;
    }


    .chv-app-hero-orbit-one {
        width: 350px;
        height: 350px;
    }


    .chv-app-hero-orbit-two {
        width: 290px;
        height: 290px;
    }


    .chv-app-hero-orbit-three {
        width: 390px;
        height: 190px;
    }


    .chv-app-hero-node {
        transform: scale(0.85);
    }


    .chv-app-hero-tag {
        transform: scale(0.85);
    }

}





/* =========================================
   CHAVO APP DEVELOPMENT — SECTION 2
   APP SOLUTIONS
   ========================================= */

:root {

    --chv-app-solutions-bg: #0a0a0a;
    --chv-app-solutions-surface: #111111;
    --chv-app-solutions-surface-alt: #151515;

    --chv-app-solutions-white: #ffffff;
    --chv-app-solutions-soft: #b8b8b8;
    --chv-app-solutions-muted: #707070;

    --chv-app-solutions-gold: #F4B548;
    --chv-app-solutions-gold-soft: rgba(244, 181, 72, 0.10);
    --chv-app-solutions-gold-glow: rgba(244, 181, 72, 0.30);

    --chv-app-solutions-border: rgba(255, 255, 255, 0.10);
    --chv-app-solutions-border-hover: rgba(244, 181, 72, 0.45);

    --chv-app-solutions-transition: 0.5s ease;
}


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

.chv-app-solutions-section {

    position: relative;

    width: 100%;

    padding: 45px 0;

    background: var(--chv-app-solutions-bg);

    overflow: hidden;
}


/* Background glow */

.chv-app-solutions-section::before {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -300px;
    top: 30%;

    border-radius: 50%;

    background: var(--chv-app-solutions-gold-soft);

    filter: blur(120px);

    opacity: 0.45;

    pointer-events: none;
}


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

.chv-app-solutions-container {

    width: min(1400px, 90%);

    margin: 0 auto;

    position: relative;

    z-index: 2;
}


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

.chv-app-solutions-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--chv-app-solutions-border);
}


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

.chv-app-solutions-label {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 18px;

    color: var(--chv-app-solutions-gold);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.chv-app-solutions-label-line {

    width: 38px;

    height: 1px;

    background: var(--chv-app-solutions-gold);
}


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

.chv-app-solutions-title {

    margin: 0;

    color: var(--chv-app-solutions-white);

    font-size: 62px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -2.8px;

    white-space: nowrap;

    text-transform: uppercase;
}


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

.chv-app-solutions-contact {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    flex-shrink: 0;

    padding: 17px 24px;

    color: var(--chv-app-solutions-white);

    background: var(--chv-app-solutions-surface);

    border: 1px solid var(--chv-app-solutions-border);

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    transition:
        background var(--chv-app-solutions-transition),
        color var(--chv-app-solutions-transition),
        border-color var(--chv-app-solutions-transition),
        transform var(--chv-app-solutions-transition);
}


.chv-app-solutions-contact i {

    color: var(--chv-app-solutions-gold);

    font-size: 13px;

    transition:
        transform var(--chv-app-solutions-transition),
        color var(--chv-app-solutions-transition);
}


.chv-app-solutions-contact:hover {

    color: var(--chv-app-solutions-bg);

    background: var(--chv-app-solutions-gold);

    border-color: var(--chv-app-solutions-gold);

    transform: translateY(-3px);
}


.chv-app-solutions-contact:hover i {

    color: var(--chv-app-solutions-bg);

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


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

.chv-app-solutions-intro {

    display: flex;

    justify-content: flex-end;

    padding: 20px 0 45px;
}


.chv-app-solutions-intro p {

    width: 500px;

    margin: 0;

    color: var(--chv-app-solutions-soft);

    font-size: 16px;

    line-height: 1.75;
}


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

.chv-app-solutions-grid {

    display: grid;

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

    gap: 14px;
}


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

.chv-app-solutions-card {

    position: relative;

    min-height: 285px;

    padding: 27px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: var(--chv-app-solutions-surface);

    border: 1px solid var(--chv-app-solutions-border);

    transform: translateY(0);

    transition:
        transform var(--chv-app-solutions-transition),
        background var(--chv-app-solutions-transition),
        border-color var(--chv-app-solutions-transition),
        box-shadow var(--chv-app-solutions-transition);
}


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

.chv-app-solutions-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            var(--chv-app-solutions-border) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--chv-app-solutions-border) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    opacity: 0;

    transform: translate(20px, 20px);

    transition:
        opacity var(--chv-app-solutions-transition),
        transform 0.8s ease;

    pointer-events: none;
}


/* =========================================
   MOVING GOLD LIGHT
   ========================================= */

.chv-app-solutions-card::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    right: -90px;

    bottom: -90px;

    border-radius: 50%;

    background: var(--chv-app-solutions-gold-soft);

    filter: blur(25px);

    opacity: 0;

    transform: scale(0.5);

    transition:
        opacity var(--chv-app-solutions-transition),
        transform 0.8s ease;
}


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

.chv-app-solutions-card:hover {

    transform: translateY(-9px);

    background: var(--chv-app-solutions-surface-alt);

    border-color: var(--chv-app-solutions-border-hover);

    box-shadow:
        0 20px 55px var(--chv-app-solutions-gold-soft);
}


.chv-app-solutions-card:hover::before {

    opacity: 0.45;

    transform: translate(0, 0);

    animation: chvAppSolutionsGridMove 7s linear infinite;
}


.chv-app-solutions-card:hover::after {

    opacity: 1;

    transform: scale(1.4);
}


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

.chv-app-solutions-card-number {

    position: relative;

    z-index: 2;

    color: var(--chv-app-solutions-gold);

    font-size: 42px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: -2px;

    transition:
        transform var(--chv-app-solutions-transition),
        opacity var(--chv-app-solutions-transition);
}


.chv-app-solutions-card:hover .chv-app-solutions-card-number {

    transform: translateX(8px);

    opacity: 0.95;
}


/* =========================================
   ICON
   ========================================= */

.chv-app-solutions-icon {

    position: absolute;

    top: 28px;

    right: 28px;

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--chv-app-solutions-gold-soft);

    border: 1px solid var(--chv-app-solutions-border);

    z-index: 2;

    transition:
        transform var(--chv-app-solutions-transition),
        border-color var(--chv-app-solutions-transition),
        box-shadow var(--chv-app-solutions-transition);
}


.chv-app-solutions-icon i {

    color: var(--chv-app-solutions-gold);

    font-size: 32px;

    transition:
        transform var(--chv-app-solutions-transition),
        filter var(--chv-app-solutions-transition);
}


.chv-app-solutions-card:hover .chv-app-solutions-icon {

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

    border-color: var(--chv-app-solutions-gold);

    box-shadow:
        0 0 28px var(--chv-app-solutions-gold-soft);
}


.chv-app-solutions-card:hover .chv-app-solutions-icon i {

    transform: scale(1.12);

    filter:
        drop-shadow(
            0 0 9px var(--chv-app-solutions-gold-glow)
        );
}


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

.chv-app-solutions-content {

    position: relative;

    z-index: 2;

    margin-top: auto;

    padding-top: 55px;
}


.chv-app-solutions-content h3 {

    margin: 0 0 12px;

    color: var(--chv-app-solutions-white);

    font-size: 21px;

    line-height: 1.15;

    font-weight: 750;

    letter-spacing: -0.4px;

    transition:
        color var(--chv-app-solutions-transition),
        transform var(--chv-app-solutions-transition);
}


.chv-app-solutions-card:hover .chv-app-solutions-content h3 {

    color: var(--chv-app-solutions-gold);

    transform: translateX(4px);
}


.chv-app-solutions-content p {

    max-width: 390px;

    margin: 0;

    color: var(--chv-app-solutions-muted);

    font-size: 14px;

    line-height: 1.65;

    transition:
        color var(--chv-app-solutions-transition),
        transform var(--chv-app-solutions-transition);
}


.chv-app-solutions-card:hover .chv-app-solutions-content p {

    color: var(--chv-app-solutions-soft);

    transform: translateX(4px);
}


/* =========================================
   GOLD LINE
   ========================================= */

.chv-app-solutions-card-line {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 3px;

    background: var(--chv-app-solutions-gold);

    z-index: 4;

    transition: width 0.7s ease;
}


.chv-app-solutions-card:hover .chv-app-solutions-card-line {

    width: 100%;
}


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

.chv-app-solutions-corner {

    position: absolute;

    right: 27px;

    bottom: 22px;

    z-index: 3;

    opacity: 0;

    transform: translate(-8px, 8px);

    transition:
        opacity var(--chv-app-solutions-transition),
        transform var(--chv-app-solutions-transition);
}


.chv-app-solutions-corner i {

    color: var(--chv-app-solutions-gold);

    font-size: 14px;
}


.chv-app-solutions-card:hover .chv-app-solutions-corner {

    opacity: 1;

    transform: translate(0, 0);
}


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

@keyframes chvAppSolutionsGridMove {

    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 45px 45px;
    }

}


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

@media (max-width: 1150px) {

    .chv-app-solutions-title {

        font-size: 52px;

    }

    .chv-app-solutions-grid {

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

    }

}


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

@media (max-width: 750px) {

    .chv-app-solutions-section {

        padding: 85px 0;

    }


    .chv-app-solutions-container {

        width: 92%;

    }


    .chv-app-solutions-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 25px;

    }


    .chv-app-solutions-title {

        font-size: 43px;

        line-height: 0.98;

        letter-spacing: -2px;

        white-space: normal;

    }


    .chv-app-solutions-intro {

        justify-content: flex-start;

        padding: 20px 0 35px;

    }


    .chv-app-solutions-intro p {

        width: 100%;

        font-size: 15px;

    }


    .chv-app-solutions-grid {

        grid-template-columns: 1fr;

        gap: 12px;

    }


    .chv-app-solutions-card {

        min-height: 280px;

        padding: 24px;

    }


    .chv-app-solutions-icon {

        top: 24px;

        right: 24px;

    }

}


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

@media (max-width: 430px) {

    .chv-app-solutions-section {

        padding: 70px 0;

    }


    .chv-app-solutions-title {

        font-size: 39px;

    }


    .chv-app-solutions-card-number {

        font-size: 38px;

    }


    .chv-app-solutions-icon {

        width: 62px;

        height: 62px;

    }


    .chv-app-solutions-icon i {

        font-size: 30px;

    }


    .chv-app-solutions-content {

        padding-top: 65px;

    }

}

/* =========================================
   CHAVO APP DEVELOPMENT — SECTION 3
   APP FEATURES
   ========================================= */

:root {

    --chv-app-features-bg: #0a0a0a;
    --chv-app-features-surface: #111111;
    --chv-app-features-surface-alt: #151515;

    --chv-app-features-white: #ffffff;
    --chv-app-features-soft: #b8b8b8;
    --chv-app-features-muted: #707070;

    --chv-app-features-gold: #F4B548;
    --chv-app-features-gold-soft: rgba(244, 181, 72, 0.10);
    --chv-app-features-gold-glow: rgba(244, 181, 72, 0.30);

    --chv-app-features-border: rgba(255, 255, 255, 0.10);
    --chv-app-features-border-gold: rgba(244, 181, 72, 0.40);

    --chv-app-features-transition: 0.5s ease;
}


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

.chv-app-features-section {

    position: relative;

    width: 100%;

    min-height: 680px;

    padding: 20px 0;

    background: var(--chv-app-features-bg);

    overflow: hidden;
}


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

.chv-app-features-section::before {

    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    right: -250px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background: var(--chv-app-features-gold-soft);

    filter: blur(140px);

    opacity: 0.45;

    pointer-events: none;
}


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

.chv-app-features-container {

    width: min(1400px, 90%);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 70px;

    align-items: center;

    position: relative;

    z-index: 2;
}


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

.chv-app-features-content {

    position: relative;

    z-index: 5;
}


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

.chv-app-features-label {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 22px;

    color: var(--chv-app-features-gold);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.chv-app-features-label-line {

    width: 40px;

    height: 1px;

    background: var(--chv-app-features-gold);
}


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

.chv-app-features-title {

    margin: 0;

    color: var(--chv-app-features-white);

    font-size: clamp(55px, 6vw, 86px);

    line-height: 0.92;

    font-weight: 800;

    letter-spacing: -3px;

    text-transform: uppercase;
}


.chv-app-features-title span {

    display: block;

    color: var(--chv-app-features-gold);
}


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

.chv-app-features-description {

    max-width: 530px;

    margin: 35px 0 32px;

    color: var(--chv-app-features-soft);

    font-size: 16px;

    line-height: 1.8;
}


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

.chv-app-features-button {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 17px 24px;

    color: var(--chv-app-features-white);

    background: var(--chv-app-features-surface);

    border: 1px solid var(--chv-app-features-border);

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    transition:
        transform var(--chv-app-features-transition),
        background var(--chv-app-features-transition),
        color var(--chv-app-features-transition),
        border-color var(--chv-app-features-transition);
}


.chv-app-features-button i {

    color: var(--chv-app-features-gold);

    transition:
        transform var(--chv-app-features-transition),
        color var(--chv-app-features-transition);
}


.chv-app-features-button:hover {

    color: var(--chv-app-features-bg);

    background: var(--chv-app-features-gold);

    border-color: var(--chv-app-features-gold);

    transform: translateY(-3px);
}


.chv-app-features-button:hover i {

    color: var(--chv-app-features-bg);

    transform: translateX(5px);
}


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

.chv-app-features-visual {

    position: relative;

    width: 100%;

    height: 650px;

    display: flex;

    align-items: center;

    justify-content: center;
}


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

.chv-app-features-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            var(--chv-app-features-border) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--chv-app-features-border) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

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

    opacity: 0.25;

    animation: chvAppFeaturesGridMove 15s linear infinite;
}


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

.chv-app-features-ring {

    position: absolute;

    border-radius: 50%;

    border: 1px solid var(--chv-app-features-border);

    pointer-events: none;
}


.chv-app-features-ring-one {

    width: 470px;
    height: 470px;

    animation: chvAppFeaturesRingOne 18s linear infinite;
}


.chv-app-features-ring-two {

    width: 350px;
    height: 350px;

    border-color: var(--chv-app-features-border-gold);

    border-style: dashed;

    animation: chvAppFeaturesRingTwo 14s linear infinite reverse;
}


.chv-app-features-ring-three {

    width: 600px;
    height: 600px;

    border-style: dotted;

    opacity: 0.45;

    animation: chvAppFeaturesRingThree 25s linear infinite;
}


/* =========================================
   CENTRAL CORE
   ========================================= */

.chv-app-features-core {

    position: absolute;

    width: 205px;
    height: 205px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--chv-app-features-surface);

    border: 1px solid var(--chv-app-features-border-gold);

    box-shadow:
        0 0 50px var(--chv-app-features-gold-soft),
        inset 0 0 40px var(--chv-app-features-gold-soft);

    z-index: 5;

    animation: chvAppFeaturesCoreFloat 4s ease-in-out infinite;
}


.chv-app-features-core::before {

    content: "";

    position: absolute;

    inset: 13px;

    border-radius: 50%;

    border: 1px dashed var(--chv-app-features-border-gold);

    animation: chvAppFeaturesCoreRotate 10s linear infinite;
}


.chv-app-features-core-inner {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}


.chv-app-features-core-icon {

    width: 42px;
    height: 42px;

    margin-bottom: 8px;

    display: flex;

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

    background: var(--chv-app-features-gold-soft);
}


.chv-app-features-core-icon i {

    color: var(--chv-app-features-gold);

    font-size: 20px;
}


.chv-app-features-core-inner span {

    color: var(--chv-app-features-soft);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;
}


.chv-app-features-core-inner strong {

    color: var(--chv-app-features-white);

    font-size: 25px;

    letter-spacing: 2px;
}


.chv-app-features-core-inner small {

    margin-top: 7px;

    color: var(--chv-app-features-muted);

    font-size: 7px;

    letter-spacing: 1.5px;
}


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

.chv-app-features-line {

    position: absolute;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--chv-app-features-gold),
        transparent
    );

    transform-origin: left center;

    opacity: 0.55;

    z-index: 1;

    animation: chvAppFeaturesLinePulse 3s ease-in-out infinite;
}


/* Positions */

.chv-app-features-line-one {
    width: 170px;
    transform: rotate(-30deg);
    top: 31%;
    left: 37%;
}

.chv-app-features-line-two {
    width: 190px;
    transform: rotate(24deg);
    top: 33%;
    right: 30%;
}

.chv-app-features-line-three {
    width: 170px;
    transform: rotate(-8deg);
    top: 45%;
    left: 35%;
}

.chv-app-features-line-four {
    width: 180px;
    transform: rotate(8deg);
    top: 46%;
    right: 30%;
}

.chv-app-features-line-five {
    width: 185px;
    transform: rotate(30deg);
    bottom: 31%;
    left: 37%;
}

.chv-app-features-line-six {
    width: 190px;
    transform: rotate(-27deg);
    bottom: 32%;
    right: 30%;
}

.chv-app-features-line-seven {
    width: 150px;
    transform: rotate(55deg);
    top: 37%;
    left: 43%;
}

.chv-app-features-line-eight {
    width: 150px;
    transform: rotate(-55deg);
    bottom: 37%;
    right: 42%;
}


/* =========================================
   FEATURE NODES
   ========================================= */

.chv-app-features-node {

    position: absolute;

    min-width: 150px;

    padding: 13px 15px;

    display: flex;

    align-items: center;

    gap: 12px;

    background: var(--chv-app-features-surface);

    border: 1px solid var(--chv-app-features-border);

    z-index: 6;

    transition:
        transform var(--chv-app-features-transition),
        border-color var(--chv-app-features-transition),
        background var(--chv-app-features-transition),
        box-shadow var(--chv-app-features-transition);
}


.chv-app-features-node:hover {

    background: var(--chv-app-features-surface-alt);

    border-color: var(--chv-app-features-gold);

    box-shadow:
        0 0 30px var(--chv-app-features-gold-soft);

    transform: scale(1.06);
}


/* =========================================
   NODE ICON
   ========================================= */

.chv-app-features-node-icon {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

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

    background: var(--chv-app-features-gold-soft);

    border: 1px solid var(--chv-app-features-border);
}


.chv-app-features-node-icon i {

    color: var(--chv-app-features-gold);

    font-size: 26px;

    transition: transform var(--chv-app-features-transition);
}


.chv-app-features-node:hover
.chv-app-features-node-icon i {

    transform: rotate(10deg) scale(1.15);
}


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

.chv-app-features-node-text {

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.chv-app-features-node-text span {

    color: var(--chv-app-features-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.chv-app-features-node-text strong {

    color: var(--chv-app-features-white);

    font-size: 14px;

    line-height: 1.2;

    letter-spacing: 0.7px;
}


/* =========================================
   NODE POSITIONS
   ========================================= */

.chv-app-features-node-one {
    top: 8%;
    left: 6%;
    animation: chvAppFeaturesNodeFloatOne 5s ease-in-out infinite;
}

.chv-app-features-node-two {
    top: 7%;
    right: 4%;
    animation: chvAppFeaturesNodeFloatTwo 5.5s ease-in-out infinite;
}

.chv-app-features-node-three {
    top: 39%;
    left: 0;
    animation: chvAppFeaturesNodeFloatThree 4.5s ease-in-out infinite;
}

.chv-app-features-node-four {
    top: 40%;
    right: 0;
    animation: chvAppFeaturesNodeFloatFour 5s ease-in-out infinite;
}

.chv-app-features-node-five {
    bottom: 8%;
    left: 5%;
    animation: chvAppFeaturesNodeFloatOne 5.5s ease-in-out infinite;
}

.chv-app-features-node-six {
    bottom: 8%;
    right: 4%;
    animation: chvAppFeaturesNodeFloatTwo 5s ease-in-out infinite;
}

.chv-app-features-node-seven {
    top: 20%;
    left: 23%;
    animation: chvAppFeaturesNodeFloatThree 6s ease-in-out infinite;
}

.chv-app-features-node-eight {
    bottom: 20%;
    right: 22%;
    animation: chvAppFeaturesNodeFloatFour 6s ease-in-out infinite;
}


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

.chv-app-features-dot {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--chv-app-features-gold);

    box-shadow:
        0 0 15px var(--chv-app-features-gold-glow);

    z-index: 4;
}


.chv-app-features-dot-one {

    animation:
        chvAppFeaturesDotOne 8s linear infinite;
}


.chv-app-features-dot-two {

    animation:
        chvAppFeaturesDotTwo 11s linear infinite;
}


.chv-app-features-dot-three {

    animation:
        chvAppFeaturesDotThree 14s linear infinite;
}


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

@keyframes chvAppFeaturesGridMove {

    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 45px 45px;
    }
}


@keyframes chvAppFeaturesRingOne {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@keyframes chvAppFeaturesRingTwo {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@keyframes chvAppFeaturesRingThree {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}


@keyframes chvAppFeaturesCoreFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


@keyframes chvAppFeaturesCoreRotate {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@keyframes chvAppFeaturesLinePulse {

    0%,
    100% {
        opacity: 0.25;
    }

    50% {
        opacity: 0.8;
    }
}


@keyframes chvAppFeaturesNodeFloatOne {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


@keyframes chvAppFeaturesNodeFloatTwo {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}


@keyframes chvAppFeaturesNodeFloatThree {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(7px);
    }
}


@keyframes chvAppFeaturesNodeFloatFour {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-7px);
    }
}


@keyframes chvAppFeaturesDotOne {

    0% {
        top: 20%;
        left: 42%;
    }

    25% {
        top: 35%;
        left: 75%;
    }

    50% {
        top: 75%;
        left: 62%;
    }

    75% {
        top: 68%;
        left: 25%;
    }

    100% {
        top: 20%;
        left: 42%;
    }
}


@keyframes chvAppFeaturesDotTwo {

    0% {
        top: 75%;
        left: 25%;
    }

    25% {
        top: 30%;
        left: 18%;
    }

    50% {
        top: 15%;
        left: 70%;
    }

    75% {
        top: 65%;
        left: 80%;
    }

    100% {
        top: 75%;
        left: 25%;
    }
}


@keyframes chvAppFeaturesDotThree {

    0% {
        top: 50%;
        left: 80%;
    }

    25% {
        top: 15%;
        left: 45%;
    }

    50% {
        top: 70%;
        left: 15%;
    }

    75% {
        top: 85%;
        left: 60%;
    }

    100% {
        top: 50%;
        left: 80%;
    }
}


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

@media (max-width: 1100px) {

    .chv-app-features-container {

        grid-template-columns: 1fr;

        gap: 70px;
    }


    .chv-app-features-content {

        max-width: 750px;
    }


    .chv-app-features-visual {

        height: 620px;
    }

}


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

@media (max-width: 700px) {

    .chv-app-features-section {

        padding: 85px 0;

        min-height: auto;
    }


    .chv-app-features-container {

        width: 92%;

        gap: 55px;
    }


    .chv-app-features-title {

        font-size: 47px;

        letter-spacing: -2px;
    }


    .chv-app-features-description {

        font-size: 15px;

        line-height: 1.7;

        margin-top: 28px;
    }


    .chv-app-features-visual {

        height: 500px;
    }


    .chv-app-features-ring-one {

        width: 340px;
        height: 340px;
    }


    .chv-app-features-ring-two {

        width: 260px;
        height: 260px;
    }


    .chv-app-features-ring-three {

        width: 440px;
        height: 440px;
    }


    .chv-app-features-core {

        width: 155px;
        height: 155px;
    }


    .chv-app-features-core-inner strong {

        font-size: 21px;
    }


    .chv-app-features-core-inner small {

        font-size: 6px;
    }


    .chv-app-features-node {

        min-width: 125px;

        padding: 9px 10px;

        gap: 8px;
    }


    .chv-app-features-node-icon {

        width: 34px;
        height: 34px;
    }


    .chv-app-features-node-icon i {

        font-size: 14px;
    }


    .chv-app-features-node-text strong {

        font-size: 8px;
    }


    .chv-app-features-node-seven,
    .chv-app-features-node-eight {

        display: none;
    }


    .chv-app-features-node-one {
        left: 0;
    }


    .chv-app-features-node-two {
        right: 0;
    }


    .chv-app-features-node-three {
        left: -5%;
    }


    .chv-app-features-node-four {
        right: -5%;
    }


    .chv-app-features-node-five {
        left: 0;
    }


    .chv-app-features-node-six {
        right: 0;
    }

}


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

@media (max-width: 430px) {

    .chv-app-features-title {

        font-size: 41px;
    }


    .chv-app-features-visual {

        height: 430px;
    }


    .chv-app-features-ring-one {

        width: 290px;
        height: 290px;
    }


    .chv-app-features-ring-two {

        width: 220px;
        height: 220px;
    }


    .chv-app-features-ring-three {

        width: 370px;
        height: 370px;
    }


    .chv-app-features-core {

        width: 135px;
        height: 135px;
    }


    .chv-app-features-core-icon {

        width: 34px;
        height: 34px;
    }


    .chv-app-features-core-inner strong {

        font-size: 18px;
    }


    .chv-app-features-core-inner span {

        font-size: 8px;
    }


    .chv-app-features-node {

        min-width: 110px;
    }

}