/* =========================================================
   NOOVADEV
   COMPLETE PROFESSIONAL WEBSITE STYLE
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {

    --green: #5bd500;

    --green-hover: #69e70b;

    --green-dark: #43a900;

    --green-soft: #efffe5;

    --green-border: #c9f5ab;


    --dark: #07131c;

    --dark-2: #0b1923;

    --dark-3: #10232f;


    --text: #101820;

    --text-light: #667085;

    --text-muted: #98a2b3;


    --border: #e4e9ec;

    --section: #f7f9f8;

    --white: #ffffff;
}


html {

    scroll-behavior: smooth;

    scroll-padding-top: 80px;
}


body {

    font-family: "Inter", sans-serif;

    background: var(--white);

    color: var(--text);

    line-height: 1.6;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
}


a {

    text-decoration: none;

    color: inherit;
}


img {

    display: block;

    max-width: 100%;
}


button,
input {

    font-family: inherit;
}


button {

    cursor: pointer;
}


.container {

    width: min(1180px, 90%);

    margin: 0 auto;
}


.section {

    padding: 105px 0;
}



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

.header {

    width: 100%;

    height: 78px;


    display: flex;

    align-items: center;


    position: sticky;

    top: 0;

    z-index: 1000;


    background:

        rgba(
            255,
            255,
            255,
            0.94
        );


    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);


    border-bottom:

        1px solid

        rgba(
            228,
            233,
            236,
            0.8
        );


    transition:

        height 0.3s ease,

        box-shadow 0.3s ease;
}


.header.scrolled {

    height: 70px;


    box-shadow:

        0 10px 35px

        rgba(
            7,
            19,
            28,
            0.06
        );
}


.nav-container {

    display: flex;

    align-items: center;

    justify-content: space-between;
}



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

.text-logo {

    display: inline-flex;

    align-items: center;


    font-family:

        "Plus Jakarta Sans",

        sans-serif;


    font-size: 23px;

    font-weight: 800;


    letter-spacing: -1px;


    color: var(--dark);
}


.text-logo strong {

    color: var(--green-dark);
}



/* =========================================================
   NAVIGATION
========================================================= */

.nav {

    display: flex;

    align-items: center;


    gap: 30px;
}


.nav a {

    position: relative;


    color: #475467;


    font-size: 13px;

    font-weight: 500;


    transition:

        color 0.25s ease;
}


.nav a::after {

    content: "";


    position: absolute;


    left: 0;

    bottom: -8px;


    width: 0;

    height: 2px;


    border-radius: 20px;


    background: var(--green);


    transition:

        width 0.25s ease;
}


.nav a:hover {

    color: var(--dark);
}


.nav a:hover::after {

    width: 100%;
}



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

.nav-btn {

    min-height: 43px;


    display: inline-flex;

    align-items: center;

    justify-content: center;


    padding: 0 19px;


    border-radius: 8px;


    background: var(--dark);

    color: var(--white);


    font-size: 12px;

    font-weight: 600;


    transition:

        background 0.25s ease,

        color 0.25s ease,

        transform 0.25s ease;
}


.nav-btn:hover {

    background: var(--green);

    color: var(--dark);


    transform:

        translateY(-2px);
}



/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-btn {

    width: 34px;

    height: 34px;


    display: none;


    flex-direction: column;

    align-items: center;

    justify-content: center;


    gap: 5px;


    border: 0;


    background: transparent;
}


.menu-btn span {

    width: 21px;

    height: 2px;


    display: block;


    border-radius: 20px;


    background: var(--dark);


    transition:

        transform 0.25s ease,

        opacity 0.25s ease;
}


.menu-btn.active span:nth-child(1) {

    transform:

        translateY(7px)

        rotate(45deg);
}


.menu-btn.active span:nth-child(2) {

    opacity: 0;
}


.menu-btn.active span:nth-child(3) {

    transform:

        translateY(-7px)

        rotate(-45deg);
}



/* =========================================================
   HERO
========================================================= */

.hero {

    min-height: 700px;


    display: flex;

    align-items: center;


    position: relative;


    overflow: hidden;


    background:

        linear-gradient(

            180deg,

            #ffffff 0%,

            #f7faf7 100%

        );
}



/* =========================================================
   HERO GRID BACKGROUND
========================================================= */

.hero-grid-bg {

    position: absolute;

    inset: 0;


    pointer-events: none;


    opacity: 0.35;


    background-image:

        linear-gradient(

            rgba(
                7,
                19,
                28,
                0.025
            ) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(
                7,
                19,
                28,
                0.025
            ) 1px,

            transparent 1px

        );


    background-size:

        45px 45px;


    mask-image:

        linear-gradient(

            to bottom,

            black,

            transparent 90%

        );
}



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

.hero-container {

    display: grid;


    grid-template-columns:

        minmax(0, 1fr)

        minmax(0, 1fr);


    align-items: center;


    gap: 70px;


    position: relative;


    z-index: 3;
}


.hero-content {

    padding: 85px 0;
}



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

.hero-label {

    display: inline-flex;

    align-items: center;


    gap: 8px;


    padding: 8px 12px;


    margin-bottom: 22px;


    border:

        1px solid

        var(--green-border);


    border-radius: 7px;


    background:

        var(--green-soft);


    color: #399400;


    font-size: 10px;

    font-weight: 700;


    letter-spacing: 1.1px;
}


.label-dot {

    width: 6px;

    height: 6px;


    display: block;


    border-radius: 50%;


    background: var(--green);


    box-shadow:

        0 0 0 4px

        rgba(
            91,
            213,
            0,
            0.12
        );


    animation:

        statusPulse

        2s

        infinite;
}


@keyframes statusPulse {

    0%,
    100% {

        box-shadow:

            0 0 0 3px

            rgba(
                91,
                213,
                0,
                0.12
            );

    }


    50% {

        box-shadow:

            0 0 0 7px

            rgba(
                91,
                213,
                0,
                0.02
            );

    }

}



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

.hero h1 {

    max-width: 680px;


    margin-bottom: 24px;


    color: var(--dark);


    font-family:

        "Plus Jakarta Sans",

        sans-serif;


    font-size:

        clamp(
            42px,
            5vw,
            65px
        );


    font-weight: 800;


    line-height: 1.08;


    letter-spacing: -3px;
}


.hero h1 span {

    display: block;


    color: var(--green);
}


.hero-content > p {

    max-width: 580px;


    margin-bottom: 31px;


    color: var(--text-light);


    font-size: 16px;


    line-height: 1.8;
}



/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-buttons {

    display: flex;

    flex-wrap: wrap;


    gap: 12px;


    margin-bottom: 31px;
}


.primary-btn,
.secondary-btn {

    min-height: 50px;


    display: inline-flex;

    align-items: center;

    justify-content: center;


    gap: 14px;


    padding: 0 23px;


    border-radius: 8px;


    font-size: 13px;

    font-weight: 600;


    transition:

        0.25s ease;
}


.primary-btn {

    background: var(--green);

    color: var(--dark);


    box-shadow:

        0 12px 30px

        rgba(
            91,
            213,
            0,
            0.18
        );
}


.primary-btn:hover {

    background:

        var(--green-hover);


    transform:

        translateY(-2px);


    box-shadow:

        0 18px 38px

        rgba(
            91,
            213,
            0,
            0.22
        );
}


.primary-btn span {

    transition:

        transform 0.25s ease;
}


.primary-btn:hover span {

    transform:

        translateX(4px);
}


.secondary-btn {

    border:

        1px solid

        #d8dfe3;


    background: var(--white);


    color: #344054;
}


.secondary-btn:hover {

    border-color:

        var(--green);


    color:

        var(--green-dark);


    transform:

        translateY(-2px);
}



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

.hero-features {

    display: flex;

    flex-wrap: wrap;


    gap: 20px;


    color: #667085;


    font-size: 11px;
}


.hero-features div {

    display: flex;

    align-items: center;
}


.feature-check {

    width: 19px;

    height: 19px;


    display: inline-flex;

    align-items: center;

    justify-content: center;


    margin-right: 6px;


    border-radius: 50%;


    background:

        var(--green-soft);


    color:

        var(--green-dark);


    font-size: 10px;

    font-weight: 700;
}



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

.hero-animate {

    opacity: 0;


    transform:

        translateY(20px);


    animation:

        heroFade

        0.7s

        ease

        forwards;
}


.delay-one {

    animation-delay:

        0.12s;
}


.delay-two {

    animation-delay:

        0.22s;
}


.delay-three {

    animation-delay:

        0.32s;
}


.delay-four {

    animation-delay:

        0.42s;
}


@keyframes heroFade {

    to {

        opacity: 1;


        transform:

            translateY(0);

    }

}



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

.hero-visual {

    position: relative;
}


.hero-visual-animation {

    opacity: 0;


    transform:

        translateX(30px);


    animation:

        heroVisual

        0.9s

        0.25s

        ease

        forwards;
}


@keyframes heroVisual {

    to {

        opacity: 1;


        transform:

            translateX(0);

    }

}



/* =========================================================
   DASHBOARD
========================================================= */

.dashboard {

    overflow: hidden;


    border:

        1px solid

        #e4e9ec;


    border-radius: 17px;


    background: var(--white);


    box-shadow:

        0 35px 80px

        rgba(
            7,
            19,
            28,
            0.14
        );


    transition:

        transform 0.4s ease,

        box-shadow 0.4s ease;
}


.hero-visual:hover .dashboard {

    transform:

        translateY(-5px);


    box-shadow:

        0 42px 90px

        rgba(
            7,
            19,
            28,
            0.17
        );
}



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

.dashboard-top {

    height: 48px;


    display: flex;

    align-items: center;


    gap: 28px;


    padding: 0 16px;


    background: #f8faf9;


    border-bottom:

        1px solid

        #e7ebed;
}


.browser-dots {

    display: flex;


    gap: 6px;
}


.browser-dots i {

    width: 8px;

    height: 8px;


    display: block;


    border-radius: 50%;


    background: #cfd5d8;
}


.browser-address {

    width: 230px;


    display: flex;

    align-items: center;


    gap: 7px;


    padding: 5px 15px;


    border:

        1px solid

        #e5e9eb;


    border-radius: 6px;


    background: var(--white);


    color: #98a2b3;


    font-size: 9px;
}


.browser-lock {

    color:

        var(--green-dark);


    font-size: 6px;
}



/* =========================================================
   DASHBOARD BODY
========================================================= */

.dashboard-body {

    min-height: 340px;


    display: flex;
}


.dashboard-sidebar {

    width: 60px;


    flex-shrink: 0;


    display: flex;

    flex-direction: column;

    align-items: center;


    gap: 22px;


    padding-top: 17px;


    background: var(--dark);
}


.dashboard-logo {

    width: 30px;

    height: 30px;


    display: flex;

    align-items: center;

    justify-content: center;


    margin-bottom: 10px;


    border-radius: 7px;


    background: var(--green);


    color: var(--dark);


    font-size: 9px;

    font-weight: 800;
}


.dashboard-sidebar > span {

    width: 17px;

    height: 17px;


    display: block;


    border-radius: 4px;


    background: #29404d;
}


.dashboard-sidebar .side-active {

    background: var(--green);
}



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

.dashboard-content {

    flex: 1;


    padding: 30px;
}


.dashboard-head-row {

    display: flex;

    align-items: center;

    justify-content: space-between;


    margin-bottom: 28px;
}


.dashboard-title {

    width: 135px;

    height: 13px;


    border-radius: 5px;


    background: #e5e9eb;
}


.dashboard-user {

    width: 28px;

    height: 28px;


    border-radius: 50%;


    background: #edf2ef;
}



/* =========================================================
   DASHBOARD STATS
========================================================= */

.dashboard-stats {

    display: grid;


    grid-template-columns:

        repeat(
            3,
            minmax(0, 1fr)
        );


    gap: 12px;


    margin-bottom: 23px;
}


.dashboard-stat {

    padding: 14px;


    border:

        1px solid

        #e7ebed;


    border-radius: 9px;


    transition:

        0.25s ease;
}


.dashboard-stat:hover {

    transform:

        translateY(-3px);


    border-color:

        var(--green-border);
}


.dashboard-stat small {

    display: block;


    margin-bottom: 5px;


    color: #98a2b3;


    font-size: 8px;
}


.dashboard-stat strong {

    color: var(--dark);


    font-size: 13px;
}


.dashboard-stat > span {

    width: 60%;

    height: 4px;


    display: block;


    margin-top: 12px;


    border-radius: 20px;


    background: #ddf8ca;
}



/* =========================================================
   DASHBOARD CHART
========================================================= */

.chart-container {

    padding: 16px 20px 20px;


    border:

        1px solid

        #e7ebed;


    border-radius: 10px;
}


.chart-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;


    margin-bottom: 15px;
}


.chart-heading span {

    color: var(--dark);


    font-size: 9px;

    font-weight: 600;
}


.chart-heading small {

    color: #98a2b3;


    font-size: 7px;
}


.dashboard-chart {

    height: 105px;


    display: flex;

    align-items: flex-end;


    gap: 9px;
}


.dashboard-chart span {

    flex: 1;


    height: 0;


    min-width: 5px;


    border-radius:

        4px 4px 1px 1px;


    background:

        linear-gradient(

            180deg,

            var(--green),

            #b5ef8c

        );


    animation:

        chartGrow

        1.1s

        0.9s

        ease

        forwards;
}


@keyframes chartGrow {

    to {

        height:

            var(--height);

    }

}



/* =========================================================
   FLOATING CARDS
========================================================= */

.floating-card {

    position: absolute;


    display: flex;

    align-items: center;


    gap: 10px;


    padding: 11px 15px;


    border:

        1px solid

        #e5e9eb;


    border-radius: 10px;


    background: var(--white);


    box-shadow:

        0 15px 40px

        rgba(
            7,
            19,
            28,
            0.14
        );


    animation:

        floating

        4s

        ease-in-out

        infinite;
}


.floating-icon {

    width: 31px;

    height: 31px;


    display: flex;

    align-items: center;

    justify-content: center;


    border-radius: 8px;


    background:

        var(--green-soft);


    color:

        var(--green-dark);


    font-weight: 700;
}


.floating-card small,
.floating-card strong {

    display: block;
}


.floating-card small {

    color: #98a2b3;


    font-size: 8px;
}


.floating-card strong {

    color: var(--dark);


    font-size: 10px;
}


.floating-one {

    left: -30px;

    bottom: 40px;
}


.floating-two {

    right: -20px;

    top: 65px;


    animation-delay:

        1s;
}


@keyframes floating {

    0%,
    100% {

        transform:

            translateY(0);

    }


    50% {

        transform:

            translateY(-7px);

    }

}



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

.hero-glow {

    position: absolute;


    border-radius: 50%;


    filter:

        blur(100px);


    opacity: 0.15;
}


.hero-glow-one {

    width: 370px;

    height: 370px;


    right: -120px;

    top: 30px;


    background:

        var(--green);
}


.hero-glow-two {

    width: 300px;

    height: 300px;


    left: -150px;

    bottom: -60px;


    background: #a9ee76;
}



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

.section-heading {

    max-width: 670px;


    margin:

        0 auto 55px;


    text-align: center;
}


.section-heading > span,
.section-tag {

    color:

        var(--green-dark);


    font-size: 10px;

    font-weight: 700;


    letter-spacing: 1.5px;
}


.section-heading h2,
.about-content h2 {

    margin:

        13px 0 17px;


    color: var(--dark);


    font-family:

        "Plus Jakarta Sans",

        sans-serif;


    font-size:

        clamp(
            32px,
            4vw,
            46px
        );


    font-weight: 800;


    line-height: 1.15;


    letter-spacing: -1.8px;
}


.section-heading p {

    color:

        var(--text-light);


    font-size: 14px;


    line-height: 1.8;
}



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

.services {

    background: var(--white);
}


.services-grid {

    display: grid;


    grid-template-columns:

        repeat(
            6,
            minmax(0, 1fr)
        );


    gap: 18px;
}



/* first three */

.service-card:nth-child(1),
.service-card:nth-child(2),
.service-card:nth-child(3) {

    grid-column:

        span 2;
}



/* bottom two */

.service-card:nth-child(4) {

    grid-column:

        2 / span 2;
}


.service-card:nth-child(5) {

    grid-column:

        4 / span 2;
}



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

.service-card {

    min-height: 330px;


    position: relative;


    overflow: hidden;


    padding: 28px;


    border:

        1px solid

        #e5e9eb;


    border-radius: 14px;


    background: var(--white);


    transition:

        transform 0.35s ease,

        border-color 0.35s ease,

        box-shadow 0.35s ease;
}


.service-card::before {

    content: "";


    position: absolute;


    width: 130px;

    height: 130px;


    right: -80px;

    bottom: -80px;


    border-radius: 50%;


    background:

        rgba(
            91,
            213,
            0,
            0.08
        );


    transition:

        0.4s ease;
}


.service-card:hover {

    transform:

        translateY(-8px);


    border-color:

        #bce89d;


    box-shadow:

        0 22px 50px

        rgba(
            7,
            19,
            28,
            0.09
        );
}


.service-card:hover::before {

    width: 200px;

    height: 200px;
}



/* =========================================================
   FEATURED SERVICE
========================================================= */

.service-featured {

    background: var(--dark);


    border-color: var(--dark);


    color: var(--white);
}


.service-featured::before {

    background:

        rgba(
            91,
            213,
            0,
            0.08
        );
}



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

.service-number {

    position: absolute;


    right: 22px;

    top: 20px;


    color: #cbd2d6;


    font-size: 10px;

    font-weight: 600;
}


.service-featured .service-number {

    color: #5d707c;
}



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

.service-icon {

    width: 48px;

    height: 48px;


    display: flex;

    align-items: center;

    justify-content: center;


    margin-bottom: 25px;


    border-radius: 10px;


    background:

        var(--green-soft);


    color:

        var(--green-dark);


    font-weight: 700;


    transition:

        transform 0.3s ease;
}


.service-card:hover .service-icon {

    transform:

        rotate(-4deg)

        scale(1.07);
}


.service-featured .service-icon {

    background:

        var(--green);


    color:

        var(--dark);
}



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

.service-card h3 {

    margin-bottom: 12px;


    position: relative;


    font-family:

        "Plus Jakarta Sans",

        sans-serif;


    font-size: 18px;
}


.service-card p {

    margin-bottom: 23px;


    position: relative;


    color:

        var(--text-light);


    font-size: 12px;


    line-height: 1.8;
}


.service-featured p {

    color: #9baab3;
}


.service-card a {

    position: relative;


    display: inline-flex;

    align-items: center;


    gap: 7px;


    color:

        var(--green-dark);


    font-size: 11px;

    font-weight: 600;
}


.service-card a span {

    transition:

        transform 0.25s ease;
}


.service-card a:hover span {

    transform:

        translateX(4px);
}


.service-featured a {

    color: var(--green);
}



/* =========================================================
   DIGITAL MARKETING CARD
========================================================= */

.digital-marketing-card {

    background:

        linear-gradient(

            145deg,

            #ffffff,

            #f8fff3

        );


    border-color:

        #d6f0c4;
}


.marketing-icon {

    background: var(--green);


    color: var(--dark);
}


.service-new {

    position: absolute;


    top: 22px;

    right: 45px;


    padding:

        4px 7px;


    border-radius: 4px;


    background:

        var(--green-soft);


    color:

        var(--green-dark);


    font-size: 7px;

    font-weight: 700;


    letter-spacing: 1px;
}



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

.about {

    background:

        var(--section);
}


.about-grid {

    display: grid;


    grid-template-columns:

        minmax(0, 0.9fr)

        minmax(0, 1.1fr);


    align-items: center;


    gap: 90px;
}



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

.founder-card {

    max-width: 440px;


    margin: 0 auto;


    overflow: hidden;


    border:

        1px solid

        #dfe7dc;


    border-radius: 22px;


    background: var(--white);


    box-shadow:

        0 30px 70px

        rgba(
            7,
            19,
            28,
            0.10
        );


    transition:

        transform 0.4s ease,

        box-shadow 0.4s ease;
}


.founder-card:hover {

    transform:

        translateY(-6px);


    box-shadow:

        0 38px 80px

        rgba(
            7,
            19,
            28,
            0.14
        );
}



/* =========================================================
   CROPPED FOUNDER PHOTO
========================================================= */

.founder-photo-wrap {

    height: 390px;


    position: relative;


    overflow: hidden;


    background: #eaf0e7;
}


.founder-photo {

    width: 100%;

    height: 100%;


    object-fit: cover;


    /*
        IMPORTANT

        This controls which area of
        your original photo is visible.

        Your full photo is NOT displayed.
    */

    object-position:

        center 18%;


    transition:

        transform 0.7s ease;
}


.founder-card:hover .founder-photo {

    transform:

        scale(1.04);
}


.photo-overlay {

    position: absolute;


    inset: 0;


    background:

        linear-gradient(

            to top,

            rgba(
                7,
                19,
                28,
                0.55
            ) 0%,

            rgba(
                7,
                19,
                28,
                0.04
            ) 45%,

            transparent 70%

        );


    pointer-events: none;
}



/* =========================================================
   FOUNDER BADGE
========================================================= */

.founder-badge {

    position: absolute;


    left: 20px;

    bottom: 20px;


    z-index: 2;


    display: inline-flex;

    align-items: center;


    gap: 8px;


    padding:

        9px 12px;


    border:

        1px solid

        rgba(
            255,
            255,
            255,
            0.22
        );


    border-radius: 8px;


    background:

        rgba(
            7,
            19,
            28,
            0.82
        );


    backdrop-filter:

        blur(10px);


    color: var(--white);


    font-size: 9px;

    font-weight: 700;


    letter-spacing: 1px;
}


.founder-badge span {

    width: 7px;

    height: 7px;


    display: block;


    border-radius: 50%;


    background: var(--green);


    box-shadow:

        0 0 0 4px

        rgba(
            91,
            213,
            0,
            0.15
        );
}



/* =========================================================
   FOUNDER INFO
========================================================= */

.founder-info {

    padding:

        26px 27px 29px;
}


.founder-info > span {

    color:

        var(--green-dark);


    font-size: 9px;

    font-weight: 700;


    letter-spacing: 1.3px;
}


.founder-info h3 {

    margin:

        8px 0 10px;


    color: var(--dark);


    font-family:

        "Plus Jakarta Sans",

        sans-serif;


    font-size: 22px;


    letter-spacing: -0.7px;
}


.founder-info p {

    margin-bottom: 17px;


    color:

        var(--text-light);


    font-size: 12px;


    line-height: 1.75;
}


.founder-info a {

    display: inline-flex;

    align-items: center;


    gap: 8px;


    color:

        var(--green-dark);


    font-size: 11px;

    font-weight: 700;
}


.founder-info a span {

    transition:

        transform 0.25s ease;
}


.founder-info a:hover span {

    transform:

        translateX(4px);
}



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

.about-content h2 span {

    color:

        var(--green-dark);
}


.about-content > p {

    margin-bottom: 14px;


    color:

        var(--text-light);


    font-size: 13px;


    line-height: 1.8;
}



/* =========================================================
   ABOUT POINTS
========================================================= */

.about-points {

    display: grid;


    grid-template-columns:

        repeat(
            2,
            minmax(0, 1fr)
        );


    gap: 22px;


    margin-top: 30px;
}


.about-point {

    display: flex;


    gap: 11px;
}


.about-check {

    width: 24px;

    height: 24px;


    min-width: 24px;


    display: flex;

    align-items: center;

    justify-content: center;


    border-radius: 50%;


    background:

        var(--green-soft);


    color:

        var(--green-dark);


    font-size: 10px;

    font-weight: 700;
}


.about-point > div {

    display: flex;

    flex-direction: column;
}


.about-point strong {

    color: var(--dark);


    font-size: 12px;
}


.about-point small {

    margin-top: 3px;


    color: #98a2b3;


    font-size: 10px;
}



/* =========================================================
   PORTFOLIO
========================================================= */

.portfolio {

    position: relative;


    overflow: hidden;


    background: var(--dark);
}


.portfolio-glow {

    position: absolute;


    width: 600px;

    height: 600px;


    top: -350px;

    right: -200px;


    border-radius: 50%;


    background:

        rgba(
            91,
            213,
            0,
            0.11
        );


    filter:

        blur(100px);
}



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

.portfolio-heading {

    max-width: 720px;


    margin:

        0 auto 58px;


    position: relative;


    z-index: 2;


    text-align: center;
}


.portfolio-heading > span {

    display: inline-flex;


    padding:

        7px 12px;


    margin-bottom: 18px;


    border:

        1px solid

        rgba(
            91,
            213,
            0,
            0.22
        );


    border-radius: 6px;


    background:

        rgba(
            91,
            213,
            0,
            0.07
        );


    color:

        var(--green);


    font-size: 10px;

    font-weight: 700;


    letter-spacing: 1.4px;
}


.portfolio-heading h2 {

    color: var(--white);


    font-family:

        "Plus Jakarta Sans",

        sans-serif;


    font-size:

        clamp(
            34px,
            4vw,
            49px
        );


    line-height: 1.14;


    letter-spacing: -2px;
}


.portfolio-heading h2 strong {

    display: block;


    color: var(--green);
}


.portfolio-heading p {

    max-width: 590px;


    margin:

        18px auto 0;


    color: #8fa0aa;


    font-size: 14px;


    line-height: 1.8;
}



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

.portfolio-grid {

    display: grid;


    grid-template-columns:

        repeat(
            3,
            minmax(0, 1fr)
        );


    gap: 20px;


    position: relative;


    z-index: 2;
}



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

.project-card {

    min-height: 440px;


    display: flex;

    flex-direction: column;


    position: relative;


    overflow: hidden;


    padding: 27px;


    border:

        1px solid

        #19303e;


    border-radius: 17px;


    background: #0b1923;


    transition:

        transform 0.35s ease,

        border-color 0.35s ease,

        box-shadow 0.35s ease;
}


.project-card-glow {

    position: absolute;


    width: 170px;

    height: 170px;


    right: -100px;

    top: -100px;


    border-radius: 50%;


    background:

        rgba(
            91,
            213,
            0,
            0.08
        );


    filter:

        blur(30px);


    transition:

        0.5s ease;
}


.project-card:hover {

    transform:

        translateY(-9px);


    border-color:

        rgba(
            91,
            213,
            0,
            0.5
        );


    box-shadow:

        0 30px 60px

        rgba(
            0,
            0,
            0,
            0.25
        );
}


.project-card:hover
.project-card-glow {

    width: 260px;

    height: 260px;
}



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

.project-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;


    margin-bottom: 45px;


    position: relative;


    z-index: 2;
}


.project-letter {

    width: 65px;

    height: 65px;


    display: flex;

    align-items: center;

    justify-content: center;


    border-radius: 14px;


    background:

        var(--green);


    color:

        var(--dark);


    font-family:

        "Plus Jakarta Sans",

        sans-serif;


    font-size: 16px;

    font-weight: 800;


    letter-spacing: -0.5px;


    transition:

        transform 0.3s ease;
}


.project-card:hover
.project-letter {

    transform:

        scale(1.05)

        rotate(-2deg);
}


.project-arrow {

    width: 39px;

    height: 39px;


    display: flex;

    align-items: center;

    justify-content: center;


    border:

        1px solid

        #27404e;


    border-radius: 50%;


    color: #8799a4;


    font-size: 16px;


    transition:

        0.25s ease;
}


.project-card:hover
.project-arrow {

    border-color:

        var(--green);


    background:

        var(--green);


    color:

        var(--dark);


    transform:

        rotate(8deg);
}



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

.project-content {

    flex: 1;


    position: relative;


    z-index: 2;
}


.project-category {

    display: inline-flex;

    align-items: center;


    gap: 7px;


    margin-bottom: 9px;


    padding:

        5px 8px;


    border:

        1px solid

        rgba(
            91,
            213,
            0,
            0.16
        );


    border-radius: 5px;


    background:

        rgba(
            91,
            213,
            0,
            0.06
        );


    color:

        var(--green);


    font-size: 7px;

    font-weight: 700;


    letter-spacing: 1px;
}


.connected-dot,
.saas-dot {

    width: 5px;

    height: 5px;


    display: block;


    border-radius: 50%;


    background:

        var(--green);
}


.saas-category {

    background:

        rgba(
            91,
            213,
            0,
            0.10
        );
}


.project-industry {

    display: block;


    margin-bottom: 8px;


    color: #728691;


    font-size: 8px;

    font-weight: 700;


    letter-spacing: 1.2px;
}


.project-content h3 {

    margin-bottom: 13px;


    color: var(--white);


    font-family:

        "Plus Jakarta Sans",

        sans-serif;


    font-size: 23px;


    letter-spacing: -0.6px;
}


.project-content p {

    color: #899aa5;


    font-size: 12px;


    line-height: 1.8;
}



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

.project-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;


    gap: 12px;


    margin-top: 30px;


    padding-top: 19px;


    position: relative;


    z-index: 2;


    border-top:

        1px solid

        #19303e;


    color: #c6d0d5;


    font-size: 10px;
}


.project-bottom > div {

    display: flex;

    align-items: center;


    gap: 7px;
}


.project-bottom i {

    width: 7px;

    height: 7px;


    display: block;


    border-radius: 50%;


    background:

        var(--green);


    box-shadow:

        0 0 0 4px

        rgba(
            91,
            213,
            0,
            0.08
        );
}


.project-bottom strong {

    display: flex;

    align-items: center;


    gap: 5px;


    color: var(--white);


    font-size: 9px;

    font-weight: 600;


    transition:

        color 0.25s ease;
}


.project-bottom strong span {

    transition:

        transform 0.25s ease;
}


.project-card:hover
.project-bottom strong {

    color: var(--green);
}


.project-card:hover
.project-bottom strong span {

    transform:

        translate(
            2px,
            -2px
        );
}



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

.saas-card {

    background:

        linear-gradient(

            145deg,

            #0b1923,

            #10242f

        );
}



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

.portfolio-cta {

    min-height: 160px;


    display: flex;

    align-items: center;

    justify-content: space-between;


    gap: 30px;


    margin-top: 22px;


    padding:

        35px 39px;


    position: relative;


    z-index: 2;


    overflow: hidden;


    border:

        1px solid

        #19303e;


    border-radius: 17px;


    background:

        linear-gradient(

            120deg,

            #0b1923,

            #102530

        );
}


.portfolio-cta::after {

    content: "";


    position: absolute;


    width: 230px;

    height: 230px;


    right: -90px;

    top: -100px;


    border-radius: 50%;


    background:

        rgba(
            91,
            213,
            0,
            0.07
        );
}


.portfolio-cta > div {

    position: relative;


    z-index: 2;
}


.portfolio-cta > div > span {

    display: block;


    margin-bottom: 9px;


    color:

        var(--green);


    font-size: 9px;

    font-weight: 700;


    letter-spacing: 1.4px;
}


.portfolio-cta h3 {

    max-width: 550px;


    color: var(--white);


    font-family:

        "Plus Jakarta Sans",

        sans-serif;


    font-size: 24px;


    line-height: 1.35;
}


.portfolio-cta > a {

    min-height: 50px;


    display: inline-flex;

    align-items: center;

    justify-content: center;


    gap: 14px;


    flex-shrink: 0;


    padding:

        0 22px;


    position: relative;


    z-index: 2;


    border-radius: 8px;


    background:

        var(--green);


    color:

        var(--dark);


    font-size: 12px;

    font-weight: 700;


    transition:

        0.25s ease;
}


.portfolio-cta > a:hover {

    background:

        var(--green-hover);


    transform:

        translateY(-2px);
}



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

.process {

    background: var(--white);
}


.process-grid {

    display: grid;


    grid-template-columns:

        repeat(
            4,
            minmax(0, 1fr)
        );


    gap: 18px;
}


.process-card {

    min-height: 225px;


    position: relative;


    padding: 28px;


    overflow: hidden;


    border:

        1px solid

        var(--border);


    border-radius: 14px;


    background:

        var(--white);


    transition:

        0.3s ease;
}


.process-card::after {

    content: "";


    position: absolute;


    width: 100px;

    height: 100px;


    right: -70px;

    bottom: -70px;


    border-radius: 50%;


    background:

        var(--green-soft);


    transition:

        0.4s ease;
}


.process-card:hover {

    transform:

        translateY(-6px);


    border-color:

        var(--green-border);


    box-shadow:

        0 20px 45px

        rgba(
            7,
            19,
            28,
            0.07
        );
}


.process-card:hover::after {

    width: 150px;

    height: 150px;
}


.process-number {

    width: 42px;

    height: 42px;


    display: flex;

    align-items: center;

    justify-content: center;


    margin-bottom: 27px;


    border-radius: 10px;


    background:

        var(--green-soft);


    color:

        var(--green-dark);


    font-size: 11px;

    font-weight: 700;
}


.process-card h3 {

    margin-bottom: 10px;


    color: var(--dark);


    font-family:

        "Plus Jakarta Sans",

        sans-serif;


    font-size: 18px;
}


.process-card p {

    color:

        var(--text-light);


    font-size: 12px;


    line-height: 1.8;
}



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

.cta {

    min-height: 480px;


    position: relative;


    overflow: hidden;


    display: flex;

    align-items: center;


    background:

        var(--green);
}


.cta-pattern {

    position: absolute;


    inset: 0;


    opacity: 0.12;


    background-image:

        radial-gradient(

            #07131c 1px,

            transparent 1px

        );


    background-size:

        25px 25px;
}


.cta-glow {

    position: absolute;


    width: 500px;

    height: 500px;


    right: -150px;

    top: -200px;


    border-radius: 50%;


    background:

        rgba(
            255,
            255,
            255,
            0.18
        );


    filter:

        blur(60px);
}


.cta-container {

    position: relative;


    z-index: 2;


    text-align: center;
}


.cta-container > span {

    display: block;


    margin-bottom: 15px;


    color: #245f00;


    font-size: 10px;

    font-weight: 700;


    letter-spacing: 1.5px;
}


.cta h2 {

    color: var(--dark);


    font-family:

        "Plus Jakarta Sans",

        sans-serif;


    font-size:

        clamp(
            38px,
            5vw,
            58px
        );


    font-weight: 800;


    line-height: 1.08;


    letter-spacing: -2.5px;
}


.cta p {

    max-width: 650px;


    margin:

        22px auto 28px;


    color: #315b19;


    font-size: 14px;


    line-height: 1.8;
}


.cta-buttons {

    display: flex;

    align-items: center;

    justify-content: center;


    flex-wrap: wrap;


    gap: 12px;
}


.light-btn {

    background: var(--dark);


    color: var(--white);
}


.light-btn:hover {

    background: #10232f;


    color: var(--white);
}


.whatsapp-btn {

    min-height: 50px;


    display: inline-flex;

    align-items: center;

    justify-content: center;


    gap: 9px;


    padding:

        0 23px;


    border:

        1px solid

        rgba(
            7,
            19,
            28,
            0.25
        );


    border-radius: 8px;


    color: var(--dark);


    font-size: 13px;

    font-weight: 600;


    transition:

        0.25s ease;
}


.whatsapp-btn:hover {

    background:

        rgba(
            255,
            255,
            255,
            0.3
        );


    transform:

        translateY(-2px);
}



/* =========================================================
   FOOTER
========================================================= */

footer {

    padding:

        75px 0 25px;


    background:

        var(--dark);


    color:

        var(--white);
}


.footer-grid {

    display: grid;


    grid-template-columns:

        1.5fr 1fr 1fr 1fr;


    gap: 60px;


    padding-bottom: 55px;
}



/* =========================================================
   FOOTER BRAND
========================================================= */

.footer-logo {

    display: inline-flex;


    margin-bottom: 18px;


    font-family:

        "Plus Jakarta Sans",

        sans-serif;


    font-size: 23px;

    font-weight: 800;


    letter-spacing: -1px;
}


.footer-logo span {

    color: var(--white);
}


.footer-logo strong {

    color: var(--green);
}


.footer-about p {

    max-width: 290px;


    margin-bottom: 20px;


    color: #82939d;


    font-size: 11px;


    line-height: 1.8;
}


.footer-contact-btn {

    display: inline-flex;

    align-items: center;


    gap: 8px;


    color:

        var(--green);


    font-size: 10px;

    font-weight: 600;
}



/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer-column {

    display: flex;

    flex-direction: column;


    align-items: flex-start;
}


.footer-column h4 {

    margin-bottom: 18px;


    font-size: 12px;
}


.footer-column a,
.footer-column p {

    margin-bottom: 10px;


    color: #82939d;


    font-size: 10px;


    transition:

        color 0.25s ease;
}


.footer-column a:hover {

    color:

        var(--green);
}



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

.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;


    padding-top: 24px;


    border-top:

        1px solid

        #172b37;


    color: #647680;


    font-size: 9px;
}



/* =========================================================
   IMPROVED CHATBOT
========================================================= */

.chatbot {

    position: fixed;


    right: 24px;

    bottom: 24px;


    z-index: 1500;
}



/* =========================================================
   CHAT TOGGLE
========================================================= */

.chat-toggle {

    min-height: 58px;


    display: flex;

    align-items: center;


    gap: 10px;


    position: relative;


    padding:

        7px 18px 7px 7px;


    border: 0;


    border-radius: 50px;


    background:

        var(--dark);


    color:

        var(--white);


    box-shadow:

        0 15px 45px

        rgba(
            7,
            19,
            28,
            0.24
        );


    transition:

        transform 0.25s ease,

        box-shadow 0.25s ease;
}


.chat-toggle:hover {

    transform:

        translateY(-3px);


    box-shadow:

        0 20px 55px

        rgba(
            7,
            19,
            28,
            0.30
        );
}


.chat-icon,
.chat-avatar {

    width: 42px;

    height: 42px;


    min-width: 42px;


    display: flex;

    align-items: center;

    justify-content: center;


    border-radius: 50%;


    background:

        var(--green);


    color:

        var(--dark);


    font-size: 10px;

    font-weight: 800;
}


.chat-toggle-content {

    display: flex;

    flex-direction: column;


    align-items: flex-start;
}


.chat-toggle-content strong {

    font-size: 10px;
}


.chat-toggle-content small {

    margin-top: 1px;


    color: #9baab3;


    font-size: 8px;
}


.chat-online-dot {

    width: 8px;

    height: 8px;


    position: absolute;


    left: 39px;

    top: 8px;


    border:

        2px solid

        var(--dark);


    border-radius: 50%;


    background:

        var(--green);
}



/* =========================================================
   CHAT WINDOW
========================================================= */

.chat-window {

    width: 370px;


    position: absolute;


    right: 0;

    bottom: 72px;


    overflow: hidden;


    visibility: hidden;


    opacity: 0;


    transform:

        translateY(15px)

        scale(0.98);


    transform-origin:

        bottom right;


    border:

        1px solid

        #dfe5e8;


    border-radius: 18px;


    background:

        var(--white);


    box-shadow:

        0 30px 80px

        rgba(
            7,
            19,
            28,
            0.22
        );


    transition:

        0.25s ease;
}


.chat-window.open {

    visibility: visible;


    opacity: 1;


    transform:

        translateY(0)

        scale(1);
}



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

.chat-header {

    min-height: 75px;


    display: flex;

    align-items: center;

    justify-content: space-between;


    padding:

        13px 15px;


    background:

        var(--dark);
}


.chat-agent {

    display: flex;

    align-items: center;


    gap: 10px;
}


.chat-avatar {

    width: 40px;

    height: 40px;


    min-width: 40px;
}


.chat-agent strong {

    display: block;


    color:

        var(--white);


    font-size: 11px;
}


.chat-agent small {

    display: flex;

    align-items: center;


    gap: 5px;


    margin-top: 2px;


    color: #8fa0aa;


    font-size: 8px;
}


.chat-agent small i {

    width: 6px;

    height: 6px;


    display: block;


    border-radius: 50%;


    background:

        var(--green);
}


.chat-close {

    width: 30px;

    height: 30px;


    display: flex;

    align-items: center;

    justify-content: center;


    border: 0;


    border-radius: 50%;


    background:

        rgba(
            255,
            255,
            255,
            0.04
        );


    color: #8fa0aa;


    font-size: 20px;


    transition:

        0.2s ease;
}


.chat-close:hover {

    background:

        rgba(
            255,
            255,
            255,
            0.08
        );


    color:

        var(--white);
}



/* =========================================================
   CHAT MESSAGES
========================================================= */

.chat-messages {

    height: 290px;


    overflow-y: auto;


    padding: 17px;


    background:

        #f7f9f8;


    scroll-behavior: smooth;
}


.chat-messages::-webkit-scrollbar {

    width: 4px;
}


.chat-messages::-webkit-scrollbar-thumb {

    border-radius: 20px;


    background: #d5dcdf;
}


.bot-message,
.user-message {

    max-width: 87%;


    margin-bottom: 11px;


    padding:

        11px 12px;


    border-radius: 11px;


    font-size: 10px;


    line-height: 1.6;


    animation:

        messageIn

        0.25s

        ease;
}


@keyframes messageIn {

    from {

        opacity: 0;


        transform:

            translateY(5px);

    }


    to {

        opacity: 1;


        transform:

            translateY(0);

    }

}


.bot-message {

    border:

        1px solid

        #e4e9ec;


    border-bottom-left-radius:

        3px;


    background:

        var(--white);


    color:

        #475467;
}


.bot-message > span {

    display: block;
}


.bot-name {

    display: block;


    margin-bottom: 4px;


    color:

        var(--dark);


    font-size: 8px;

    font-weight: 700;
}


.user-message {

    margin-left: auto;


    border-bottom-right-radius:

        3px;


    background:

        var(--dark);


    color:

        var(--white);
}



/* =========================================================
   WHATSAPP CHAT BUTTON
========================================================= */

.chat-whatsapp {

    display: inline-flex;

    align-items: center;


    gap: 7px;


    margin-bottom: 11px;


    padding:

        9px 12px;


    border-radius: 7px;


    background:

        var(--green);


    color:

        var(--dark);


    font-size: 9px;

    font-weight: 700;


    transition:

        0.2s ease;
}


.chat-whatsapp:hover {

    background:

        var(--green-hover);
}



/* =========================================================
   TYPING INDICATOR
========================================================= */

.typing-message {

    width: 55px;


    display: flex;

    align-items: center;

    justify-content: center;


    gap: 4px;


    margin-bottom: 10px;


    padding:

        12px 10px;


    border:

        1px solid

        #e4e9ec;


    border-radius:

        10px 10px 10px 3px;


    background:

        var(--white);
}


.typing-message span {

    width: 5px;

    height: 5px;


    border-radius: 50%;


    background:

        #98a2b3;


    animation:

        typing

        1s

        infinite;
}


.typing-message span:nth-child(2) {

    animation-delay:

        0.15s;
}


.typing-message span:nth-child(3) {

    animation-delay:

        0.30s;
}


@keyframes typing {

    0%,
    60%,
    100% {

        transform:

            translateY(0);

    }


    30% {

        transform:

            translateY(-4px);

    }

}



/* =========================================================
   QUICK QUESTIONS
========================================================= */

.quick-title {

    padding:

        10px 13px 0;


    color:

        #98a2b3;


    font-size: 7px;

    font-weight: 700;


    letter-spacing: 1px;
}


.quick-questions {

    display: flex;


    gap: 6px;


    padding:

        8px 12px 11px;


    overflow-x: auto;
}


.quick-questions::-webkit-scrollbar {

    display: none;
}


.quick-questions button {

    flex-shrink: 0;


    padding:

        6px 9px;


    border:

        1px solid

        #dfe5e8;


    border-radius: 20px;


    background:

        var(--white);


    color: #667085;


    font-size: 8px;


    transition:

        0.2s ease;
}


.quick-questions button:hover {

    border-color:

        var(--green);


    background:

        var(--green-soft);


    color:

        var(--green-dark);
}



/* =========================================================
   CHAT INPUT
========================================================= */

.chat-input {

    display: flex;


    border-top:

        1px solid

        #edf0f2;
}


.chat-input input {

    flex: 1;


    min-width: 0;


    padding: 14px;


    border: 0;


    outline: 0;


    color:

        var(--dark);


    font-size: 10px;
}


.chat-input input::placeholder {

    color: #a5afb6;
}


.chat-input button {

    width: 50px;


    border: 0;


    background:

        var(--green);


    color:

        var(--dark);


    font-size: 17px;


    transition:

        background 0.2s ease;
}


.chat-input button:hover {

    background:

        var(--green-hover);
}


.chat-footer-text {

    padding:

        6px;


    border-top:

        1px solid

        #f0f2f3;


    color: #b0b8bd;


    font-size: 7px;


    text-align: center;
}



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

.reveal {

    opacity: 0;


    transform:

        translateY(28px);


    transition:

        opacity 0.7s ease,

        transform 0.7s ease;
}


.reveal-left {

    transform:

        translateX(-35px);
}


.reveal-right {

    transform:

        translateX(35px);
}


.reveal-visible {

    opacity: 1;


    transform:

        translate(
            0,
            0
        );
}



/* stagger cards */

.services-grid
.service-card:nth-child(2) {

    transition-delay:

        0.08s;
}


.services-grid
.service-card:nth-child(3) {

    transition-delay:

        0.16s;
}


.services-grid
.service-card:nth-child(4) {

    transition-delay:

        0.08s;
}


.services-grid
.service-card:nth-child(5) {

    transition-delay:

        0.16s;
}


.portfolio-grid
.project-card:nth-child(2) {

    transition-delay:

        0.08s;
}


.portfolio-grid
.project-card:nth-child(3) {

    transition-delay:

        0.16s;
}


.process-grid
.process-card:nth-child(2) {

    transition-delay:

        0.07s;
}


.process-grid
.process-card:nth-child(3) {

    transition-delay:

        0.14s;
}


.process-grid
.process-card:nth-child(4) {

    transition-delay:

        0.21s;
}



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

@media (max-width: 1050px) {


    .nav {

        gap: 18px;

    }


    .hero-container {

        gap: 40px;

    }


    .services-grid {

        grid-template-columns:

            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .service-card:nth-child(1),
    .service-card:nth-child(2),
    .service-card:nth-child(3),
    .service-card:nth-child(4),
    .service-card:nth-child(5) {

        grid-column: auto;

    }


    .digital-marketing-card {

        grid-column:

            1 / -1 !important;

    }


    .about-grid {

        gap: 50px;

    }


    .portfolio-grid {

        grid-template-columns:

            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .project-card:last-child {

        grid-column:

            span 2;

    }


    .process-grid {

        grid-template-columns:

            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .footer-grid {

        grid-template-columns:

            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}



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

@media (max-width: 800px) {


    .section {

        padding:

            80px 0;

    }


    /* HEADER */

    .header {

        height: 70px;

    }


    .header.scrolled {

        height: 66px;

    }


    .nav-btn {

        display: none;

    }


    .menu-btn {

        display: flex;

    }


    .nav {

        position: absolute;


        left: 5%;

        right: 5%;

        top: 78px;


        display: flex;

        flex-direction: column;

        align-items: flex-start;


        gap: 0;


        padding: 10px;


        visibility: hidden;


        opacity: 0;


        transform:

            translateY(-8px);


        border:

            1px solid

            #e5e9eb;


        border-radius: 12px;


        background:

            var(--white);


        box-shadow:

            0 20px 50px

            rgba(
                7,
                19,
                28,
                0.12
            );


        transition:

            0.2s ease;

    }


    .nav.show {

        visibility: visible;


        opacity: 1;


        transform:

            translateY(0);

    }


    .nav a {

        width: 100%;


        padding:

            12px 10px;

    }


    .nav a::after {

        display: none;

    }



    /* HERO */

    .hero {

        min-height: auto;

    }


    .hero-container {

        grid-template-columns:

            1fr;


        gap: 10px;

    }


    .hero-content {

        padding:

            75px 0 35px;


        text-align: center;

    }


    .hero h1 {

        margin-left: auto;

        margin-right: auto;


        font-size:

            clamp(
                39px,
                11vw,
                55px
            );

    }


    .hero-content > p {

        margin-left: auto;

        margin-right: auto;


        font-size: 14px;

    }


    .hero-buttons,
    .hero-features {

        justify-content: center;

    }


    .hero-visual {

        width: 90%;


        margin:

            0 auto 80px;

    }


    .floating-one {

        left: -20px;

    }


    .floating-two {

        right: -20px;

    }



    /* SERVICES */

    .services-grid {

        grid-template-columns:

            repeat(
                2,
                minmax(0, 1fr)
            );

    }



    /* ABOUT */

    .about-grid {

        grid-template-columns:

            1fr;


        gap: 55px;

    }


    .about-content {

        text-align: center;

    }


    .about-points {

        text-align: left;

    }


    .founder-card {

        width:

            min(
                430px,
                100%
            );

    }


    .founder-photo-wrap {

        height: 360px;

    }


    .founder-photo {

        object-position:

            center 16%;

    }



    /* PORTFOLIO */

    .portfolio-grid {

        grid-template-columns:

            1fr;

    }


    .project-card:last-child {

        grid-column: auto;

    }


    .portfolio-cta {

        flex-direction: column;


        align-items: flex-start;

    }



    /* PROCESS */

    .process-grid {

        grid-template-columns:

            repeat(
                2,
                1fr
            );

    }



    /* FOOTER */

    .footer-grid {

        grid-template-columns:

            repeat(
                2,
                1fr
            );


        gap: 40px;

    }

}



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

@media (max-width: 560px) {


    .container {

        width: 91%;

    }


    .section {

        padding:

            70px 0;

    }


    .text-logo {

        font-size: 21px;

    }



    /* HERO */

    .hero-content {

        padding-top: 65px;

    }


    .hero-label {

        font-size: 8px;

    }


    .hero h1 {

        letter-spacing: -2px;

    }


    .hero-buttons {

        flex-direction: column;

    }


    .primary-btn,
    .secondary-btn {

        width: 100%;

    }


    .hero-features {

        gap:

            10px 15px;

    }


    .dashboard-content {

        padding: 18px;

    }


    .dashboard-sidebar {

        width: 48px;

    }


    .dashboard-stats {

        gap: 6px;

    }


    .dashboard-stat {

        padding: 8px;

    }


    .dashboard-stat small {

        font-size: 6px;

    }


    .dashboard-stat strong {

        font-size: 9px;

    }


    .chart-container {

        padding: 12px;

    }


    .dashboard-chart {

        height: 90px;


        gap: 5px;

    }


    .browser-address {

        width: 160px;

    }


    .floating-card {

        padding:

            8px 10px;

    }


    .floating-one {

        left: -10px;

        bottom: 25px;

    }


    .floating-two {

        right: -10px;

        top: 60px;

    }



    /* SERVICES */

    .services-grid {

        grid-template-columns:

            1fr;

    }


    .digital-marketing-card {

        grid-column:

            auto !important;

    }



    /* FOUNDER */

    .founder-photo-wrap {

        height: 320px;

    }


    .founder-photo {

        object-position:

            center 15%;

    }



    /* ABOUT */

    .about-points {

        grid-template-columns:

            1fr;

    }



    /* PORTFOLIO */

    .project-card {

        min-height: 400px;

    }


    .portfolio-cta {

        padding: 27px;

    }


    .portfolio-cta > a {

        width: 100%;

    }



    /* PROCESS */

    .process-grid {

        grid-template-columns:

            1fr;

    }



    /* CTA */

    .cta {

        min-height: 450px;

    }


    .cta-buttons {

        flex-direction: column;

    }


    .cta-buttons a {

        width: 100%;

    }



    /* FOOTER */

    .footer-grid {

        grid-template-columns:

            1fr;


        gap: 35px;

    }


    .footer-bottom {

        flex-direction: column;


        align-items: flex-start;


        gap: 7px;

    }



    /* CHATBOT */

    .chatbot {

        right: 15px;

        bottom: 15px;

    }


    .chat-window {

        width:

            min(
                370px,
                calc(
                    100vw - 30px
                )
            );

    }


    .chat-toggle {

        width: 55px;

        height: 55px;


        min-height: 55px;


        padding: 6px;


        justify-content: center;

    }


    .chat-toggle-content {

        display: none;

    }


    .chat-online-dot {

        left: 39px;

        top: 5px;

    }


    .chat-messages {

        height: 260px;

    }

}



/* =========================================================
   ACCESSIBILITY
   REDUCE ANIMATION IF USER REQUESTS IT
========================================================= */

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


    * {

        scroll-behavior: auto !important;


        animation-duration:

            0.01ms !important;


        animation-iteration-count:

            1 !important;


        transition-duration:

            0.01ms !important;

    }


    .reveal {

        opacity: 1;


        transform: none;

    }

}

/* =========================================================
   NOOVADEV
   WEBSITE MAINTENANCE RIBBON
   CONTINUOUS LOOPING ANIMATION
========================================================= */

.maintenance-ribbon {
    width: 100%;

    position: relative;

    z-index: 60;

    overflow: hidden;

    background: var(--dark);

    border-bottom:
        1px solid
        rgba(91, 213, 0, 0.18);

    box-shadow:
        inset 0 -1px 0
        rgba(255, 255, 255, 0.025);
}


/* =========================================================
   EDGE FADE
========================================================= */

.maintenance-ribbon::before,
.maintenance-ribbon::after {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    width: 70px;

    z-index: 2;

    pointer-events: none;
}


.maintenance-ribbon::before {

    left: 0;

    background:
        linear-gradient(
            90deg,
            var(--dark),
            transparent
        );
}


.maintenance-ribbon::after {

    right: 0;

    background:
        linear-gradient(
            270deg,
            var(--dark),
            transparent
        );
}


/* =========================================================
   MOVING TRACK
========================================================= */

.maintenance-ribbon-track {

    width: max-content;

    min-width: 100%;

    display: flex;

    align-items: center;

    animation:
        maintenanceTicker
        30s
        linear
        infinite;

    will-change: transform;
}


/* Pause when user hovers */

.maintenance-ribbon:hover
.maintenance-ribbon-track {

    animation-play-state: paused;
}


/* =========================================================
   RIBBON GROUP
========================================================= */

.maintenance-ribbon-group {

    flex-shrink: 0;

    min-height: 42px;

    display: flex;

    align-items: center;

    white-space: nowrap;
}


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

.maintenance-item {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        0 20px;

    color: #aebbc2;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 0.15px;
}


.maintenance-item strong {

    color: var(--green);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.15px;
}


/* =========================================================
   LIVE STATUS DOT
========================================================= */

.maintenance-dot {

    width: 7px;

    height: 7px;

    flex:
        0 0 7px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:
        0 0 0 4px
        rgba(91, 213, 0, 0.10);

    animation:
        maintenanceDotPulse
        1.8s
        ease-in-out
        infinite;
}


/* =========================================================
   SEPARATOR
========================================================= */

.maintenance-separator {

    color:
        rgba(
            91,
            213,
            0,
            0.45
        );

    font-size: 11px;
}


/* =========================================================
   INFINITE RIBBON ANIMATION
========================================================= */

@keyframes maintenanceTicker {

    from {

        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    to {

        transform:
            translate3d(
                -50%,
                0,
                0
            );
    }

}


/* =========================================================
   STATUS DOT ANIMATION
========================================================= */

@keyframes maintenanceDotPulse {

    0%,
    100% {

        opacity: 1;

        transform:
            scale(1);

        box-shadow:
            0 0 0 3px
            rgba(
                91,
                213,
                0,
                0.12
            );
    }


    50% {

        opacity: 0.72;

        transform:
            scale(0.86);

        box-shadow:
            0 0 0 8px
            rgba(
                91,
                213,
                0,
                0.015
            );
    }

}


/* =========================================================
   EXTRA WEBSITE MOTION POLISH
========================================================= */

.service-card,
.project-card,
.about-point {

    will-change:
        transform;
}


/* =========================================================
   SERVICE ICON ANIMATION
========================================================= */

.service-icon,
.project-letter,
.project-arrow,
.primary-btn span,
.service-card a span,
.project-bottom strong span {

    transition:

        transform 0.3s ease,

        background 0.3s ease,

        color 0.3s ease;
}


.service-card:hover
.service-icon {

    transform:

        translateY(-3px)

        rotate(-2deg)

        scale(1.04);
}


/* =========================================================
   PROJECT CARD ANIMATION
========================================================= */

.project-card:hover
.project-letter {

    transform:

        translateY(-3px)

        scale(1.04);
}


.project-card:hover
.project-arrow,

.project-card:hover
.project-bottom strong span,

.service-card:hover
a span {

    transform:

        translate(
            3px,
            -2px
        );
}


/* =========================================================
   PRIMARY BUTTON LIGHT SWEEP
========================================================= */

.primary-btn {

    position: relative;

    overflow: hidden;
}


.primary-btn::before {

    content: "";

    position: absolute;

    top: -50%;

    left: -80%;

    width: 45%;

    height: 200%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(
                255,
                255,
                255,
                0.32
            ),

            transparent
        );

    transform:
        rotate(18deg);

    transition:
        left 0.65s ease;
}


.primary-btn:hover::before {

    left: 135%;
}


/* =========================================================
   DASHBOARD SOFT FLOATING
========================================================= */

.dashboard {

    animation:

        dashboardBreath

        6s

        ease-in-out

        infinite;
}


@keyframes dashboardBreath {

    0%,
    100% {

        transform:
            translateY(0);
    }


    50% {

        transform:
            translateY(-4px);
    }

}


.hero-visual:hover
.dashboard {

    animation-play-state:
        paused;

    transform:
        translateY(-6px);
}


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

.project-card-glow {

    transition:

        opacity 0.4s ease,

        transform 0.5s ease;
}


.project-card:hover
.project-card-glow {

    opacity: 1;

    transform:
        scale(1.12);
}


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

@media (max-width: 700px) {

    .maintenance-ribbon-group {

        min-height: 40px;
    }


    .maintenance-item {

        padding:
            0 14px;

        gap: 7px;

        font-size: 8px;
    }


    .maintenance-item strong {

        font-size: 8px;
    }


    .maintenance-ribbon-track {

        animation-duration:
            24s;
    }


    .maintenance-ribbon::before,
    .maintenance-ribbon::after {

        width: 35px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .maintenance-ribbon-track,
    .maintenance-dot,
    .dashboard {

        animation:
            none !important;
    }

}