/* =========================================================
           VARIÁVEIS
        ========================================================= */

        :root {

            --primary: #27b1ad;
            --primary-dark: #15908d;
            --primary-light: #dff7f4;

            --cream: #fff5f0;
            --cream-dark: #f9e8df;

            --orange: #ff9b67;
            --orange-dark: #ed7d46;

            --dark: #102b2c;
            --dark-2: #183d3e;

            --text: #385253;
            --muted: #718485;

            --white: #ffffff;

            --border: rgba(16, 43, 44, .09);

            --shadow: 0 20px 60px rgba(16, 43, 44, .10);

            --radius: 22px;

            --container: 1180px;

        }


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

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

        html {
            scroll-behavior: smooth;
        }

        body {

            font-family:
                Arial,
                Helvetica,
                sans-serif;

            color: var(--text);

            background: #fff;

            line-height: 1.6;

            overflow-x: hidden;

        }

        .fullFULL {position:absolute; top:0; right:0; width: 0 !important; height: 0 !important; visibility: hidden; font-size: 1.7rem; opacity: 0; overflow: hidden;}

        img {
            max-width: 100%;
            display: block;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        button {
            font-family: inherit;
        }

        .container {

            width:
                min(
                    var(--container),
                    calc(100% - 40px)
                );

            margin: auto;

        }


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

        header {

            position: fixed;

            top: 0;
            left: 0;

            width: 100%;

            z-index: 1000;

            padding: 18px 0;

            transition: .3s;

        }

        header.scrolled {

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

            backdrop-filter: blur(14px);

            box-shadow:
                0 5px 30px rgba(0,0,0,.06);

            padding: 12px 0;

        }

        .nav {

            display: flex;

            align-items: center;

            justify-content: space-between;

        }

        .logo {

            display: flex;

            align-items: center;

            gap: 12px;

        }

        .logo img {

            width: 200px;

            height: auto;

            object-fit: contain;

        }

        .nav-links {

            display: flex;

            align-items: center;

            gap: 32px;

        }

        .nav-links a {

            font-size: 14px;

            font-weight: 700;

            color: var(--dark);

            transition: .25s;

        }

        .nav-links a:hover {

            color: var(--primary);

        }

        .nav-button {

            padding: 13px 22px;

            background: var(--primary);

            color: #fff !important;

            border-radius: 50px;

            box-shadow:
                0 8px 20px
                rgba(39,177,173,.25);

        }

        .nav-button:hover {

            background: var(--primary-dark);

            transform: translateY(-2px);

        }

        .menu-btn {

            display: none;

            border: 0;

            background: transparent;

            font-size: 28px;

            color: var(--dark);

            cursor: pointer;

        }


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

        .hero {

            min-height: 760px;

            padding: 170px 0 100px;

            position: relative;

            overflow: hidden;

            background:

                radial-gradient(
                    circle at 80% 20%,
                    rgba(39,177,173,.13),
                    transparent 30%
                ),

                radial-gradient(
                    circle at 90% 80%,
                    rgba(255,155,103,.15),
                    transparent 25%
                ),

                var(--cream);

        }

        .hero::before {

            content: "";

            position: absolute;

            width: 420px;
            height: 420px;

            border-radius: 50%;

            border:
                1px solid
                rgba(39,177,173,.15);

            right: -180px;

            top: 80px;

        }

        .hero::after {

            content: "";

            position: absolute;

            width: 250px;
            height: 250px;

            border-radius: 50%;

            background:
                rgba(255,155,103,.12);

            right: 15%;

            bottom: -120px;

        }

        .hero-grid {

            display: grid;

            grid-template-columns:
                1.05fr .95fr;

            gap: 70px;

            align-items: center;

            position: relative;

            z-index: 2;

        }

        .badge {

            display: inline-flex;

            align-items: center;

            gap: 9px;

            padding: 8px 14px;

            background:
                rgba(39,177,173,.10);

            color: var(--primary-dark);

            border:
                1px solid
                rgba(39,177,173,.15);

            border-radius: 50px;

            font-size: 13px;

            font-weight: 800;

            margin-bottom: 22px;

        }

        .badge-dot {

            width: 8px;
            height: 8px;

            border-radius: 50%;

            background:
                var(--orange);

        }

        .hero h1 {

            font-size:
                clamp(42px, 5vw, 70px);

            line-height: 1.03;

            letter-spacing: -2.5px;

            color: var(--dark);

            margin-bottom: 24px;

        }

        .hero h1 span {

            color:
                var(--primary);

        }

        .hero-text {

            font-size: 19px;

            max-width: 620px;

            color: var(--text);

            margin-bottom: 32px;

        }

        .hero-buttons {

            display: flex;

            gap: 14px;

            flex-wrap: wrap;

        }

        .btn {

            display: inline-flex;

            justify-content: center;

            align-items: center;

            gap: 10px;

            padding: 16px 26px;

            border-radius: 12px;

            font-size: 15px;

            font-weight: 800;

            border: 0;

            cursor: pointer;

            transition: .3s;

        }

        .btn-primary {

            background:
                var(--primary);

            color: white;

            box-shadow:
                0 12px 28px
                rgba(39,177,173,.28);

        }

        .btn-primary:hover {

            background:
                var(--primary-dark);

            transform:
                translateY(-3px);

            box-shadow:
                0 18px 35px
                rgba(39,177,173,.30);

        }

        .btn-secondary {

            background: white;

            color: var(--dark);

            border:
                1px solid
                var(--border);

        }

        .btn-secondary:hover {

            border-color:
                var(--primary);

            color:
                var(--primary);

            transform:
                translateY(-3px);

        }

        .hero-note {

            margin-top: 20px;

            font-size: 13px;

            color: var(--muted);

        }


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

        .hero-visual {

            position: relative;

        }

        .dashboard {

            background: white;

            border-radius: 25px;

            padding: 14px;

            box-shadow:
                var(--shadow);

            transform:
                rotate(1.5deg);

            position: relative;

        }

        .dashboard-top {

            height: 38px;

            background:
                #f7fafa;

            border-radius:
                14px 14px 0 0;

            display: flex;

            align-items: center;

            padding: 0 14px;

            gap: 6px;

        }

        .browser-dot {

            width: 8px;
            height: 8px;

            border-radius: 50%;

            background:
                #d8e2e2;

        }

        .dashboard-body {

            padding: 35px;

            background:
                linear-gradient(
                    145deg,
                    #ffffff,
                    #f5fbfa
                );

            min-height: 360px;

            border-radius:
                0 0 18px 18px;

        }

        .mini-label {

            font-size: 11px;

            font-weight: 800;

            color:
                var(--primary);

            text-transform:
                uppercase;

            letter-spacing: 1px;

        }

        .dashboard-title {

            font-size: 34px;

            line-height: 1.1;

            color:
                var(--dark);

            font-weight: 900;

            margin:
                10px 0 25px;

        }

        .search-box {

            height: 52px;

            border:
                1px solid
                #e1eaea;

            background:
                white;

            border-radius: 12px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 0 15px;

            box-shadow:
                0 8px 20px
                rgba(0,0,0,.04);

        }

        .search-left {

            display: flex;

            align-items: center;

            gap: 10px;

            color:
                var(--muted);

            font-size: 13px;

        }

        .google-icon {

            width: 25px;
            height: 25px;

            border-radius: 50%;

            background:
                var(--cream);

            display: grid;

            place-items: center;

            color:
                var(--primary);

            font-weight: 900;

        }

        .position-card {

            margin-top: 20px;

            padding: 18px;

            background:
                var(--dark);

            border-radius: 16px;

            color: white;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

        .position-card small {

            display: block;

            color:
                #b5cbcc;

            font-size: 11px;

        }

        .position-number {

            font-size: 40px;

            font-weight: 900;

            color:
                var(--orange);

            line-height: 1;

        }

        .floating-card {

            position: absolute;

            background: white;

            border-radius: 15px;

            padding: 16px 18px;

            box-shadow:
                0 15px 40px
                rgba(16,43,44,.14);

            display: flex;

            align-items: center;

            gap: 12px;

        }

        .floating-card.one {

            left: -35px;

            bottom: 30px;

        }

        .floating-card.two {

            right: -35px;

            top: 40px;

        }

        .floating-icon {

            width: 42px;
            height: 42px;

            border-radius: 12px;

            display: grid;

            place-items: center;

            background:
                var(--primary-light);

            color:
                var(--primary);

            font-weight: 900;

        }

        .floating-card strong {

            color:
                var(--dark);

            font-size: 14px;

            display: block;

        }

        .floating-card span {

            color:
                var(--muted);

            font-size: 11px;

        }


        /* =========================================================
           TRUST
        ========================================================= */

        .trust {

            padding: 28px 0;

            border-bottom:
                1px solid
                var(--border);

            background:
                white;

        }

        .trust-content {

            display: flex;

            justify-content: center;

            align-items: center;

            gap: 35px;

            flex-wrap: wrap;

            color:
                var(--muted);

            font-size: 13px;

            font-weight: 700;

        }

        .trust-item {

            display: flex;

            align-items: center;

            gap: 8px;

        }

        .check {

            color:
                var(--primary);

            font-weight: 900;

        }


        /* =========================================================
           SEÇÕES
        ========================================================= */

        section {

            padding: 100px 0;

        }

        .section-heading {

            max-width: 720px;

            margin-bottom: 55px;

        }

        .section-heading.center {

            text-align: center;

            margin-left: auto;

            margin-right: auto;

        }

        .eyebrow {

            color:
                var(--primary);

            text-transform:
                uppercase;

            font-size: 12px;

            font-weight: 900;

            letter-spacing: 1.7px;

            margin-bottom: 12px;

        }

        .section-heading h2 {

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

            line-height: 1.08;

            color:
                var(--dark);

            letter-spacing: -1.5px;

            margin-bottom: 18px;

        }

        .section-heading p {

            color:
                var(--muted);

            font-size: 17px;

        }


        /* =========================================================
           SERVIÇOS
        ========================================================= */

        .services {

            background:
                white;

        }

        .services-grid {

            display: grid;

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

            gap: 20px;

        }

        .service-card {

            padding: 30px;

            border:
                1px solid
                var(--border);

            border-radius:
                var(--radius);

            transition: .3s;

            background:
                white;

        }

        .service-card:hover {

            transform:
                translateY(-8px);

            box-shadow:
                var(--shadow);

            border-color:
                rgba(39,177,173,.25);

        }

        .service-icon {

            width: 56px;
            height: 56px;

            border-radius: 16px;

            background:
                var(--primary-light);

            color:
                var(--primary);

            display: grid;

            place-items: center;

            font-size: 23px;

            font-weight: 900;

            margin-bottom: 24px;

        }

        .service-card:nth-child(3n+2)
        .service-icon {

            background:
                #fff0e9;

            color:
                var(--orange-dark);

        }

        .service-card h3 {

            color:
                var(--dark);

            font-size: 20px;

            margin-bottom: 10px;

        }

        .service-card p {

            color:
                var(--muted);

            font-size: 1rem;

        }


        /* =========================================================
           PORTFÓLIO
        ========================================================= */

        .portfolio {

            background:
                var(--cream);

            position: relative;

        }

        .portfolio-header {

            display: flex;

            justify-content: space-between;

            align-items: flex-end;

            gap: 30px;

            margin-bottom: 45px;

        }

        .portfolio-header
        .section-heading {

            margin-bottom: 0;

        }

        .portfolio-all {

            flex-shrink: 0;

        }

        .portfolio-grid {

            display: grid;

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

            gap: 24px;

        }

        .portfolio-card {

            background:
                white;

            border-radius:
                24px;

            overflow: hidden;

            border:
                1px solid
                rgba(16,43,44,.08);

            box-shadow:
                0 12px 35px
                rgba(16,43,44,.07);

            transition:
                .35s;

        }

        .portfolio-card:hover {

            transform:
                translateY(-10px);

            box-shadow:
                0 25px 60px
                rgba(16,43,44,.14);

        }

        .portfolio-image {

            position: relative;

            height: 245px;

            overflow: hidden;

            background:
                #edf3f2;

        }

        .portfolio-image img {

            width: 100%;

            height: 100%;

            object-fit: cover;

            object-position:
                top center;

            transition:
                transform .6s ease;

        }

        .portfolio-card:hover
        .portfolio-image img {

            transform:
                scale(1.05);

        }

        .portfolio-overlay {

            position: absolute;

            inset: 0;

            background:
                linear-gradient(
                    to top,
                    rgba(16,43,44,.75),
                    transparent 65%
                );

            opacity: 0;

            transition:
                .3s;

            display: flex;

            align-items: flex-end;

            padding: 20px;

        }

        .portfolio-card:hover
        .portfolio-overlay {

            opacity: 1;

        }

        .portfolio-overlay span {

            color:
                white;

            font-size: 13px;

            font-weight: 800;

        }

        .portfolio-content {

            padding: 25px;

        }

        .portfolio-tag {

            display: inline-block;

            font-size: 10px;

            font-weight: 900;

            text-transform:
                uppercase;

            letter-spacing: 1px;

            color:
                var(--primary);

            margin-bottom: 9px;

        }

        .portfolio-content h3 {

            font-size: 21px;

            color:
                var(--dark);

            margin-bottom: 8px;

        }

        .portfolio-content p {

            font-size: 1rem;

            color:
                var(--muted);

            margin-bottom: 20px;

        }

        .portfolio-link {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            color:
                var(--primary-dark);

            font-size: 13px;

            font-weight: 900;

            transition:
                .25s;

        }

        .portfolio-link:hover {

            gap: 12px;

            color:
                var(--dark);

        }

        .portfolio-bottom {

            text-align: center;

            margin-top: 40px;

        }


        /* =========================================================
           SEO
        ========================================================= */

        .seo-section {

            background:
                white;

        }

        .seo-grid {

            display: grid;

            grid-template-columns:
                .9fr 1.1fr;

            gap: 80px;

            align-items: center;

        }

        .seo-card {

            background:
                var(--dark);

            border-radius: 28px;

            padding: 35px;

            color: white;

            box-shadow:
                0 25px 60px
                rgba(16,43,44,.18);

        }

        .seo-card-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 30px;

        }

        .seo-card-header strong {

            font-size: 17px;

        }

        .status {

            padding: 7px 11px;

            border-radius: 50px;

            background:
                rgba(39,177,173,.15);

            color:
                #8be7e2;

            font-size: 11px;

            font-weight: 800;

        }

        .keyword {

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

            border-radius: 14px;

            padding: 16px;

            margin-bottom: 12px;

        }

        .keyword-top {

            display: flex;

            justify-content: space-between;

            margin-bottom: 10px;

            font-size: 13px;

        }

        .keyword-top span {

            color:
                #a9c0c1;

        }

        .progress {

            height: 7px;

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

            border-radius: 50px;

            overflow: hidden;

        }

        .progress-bar {

            height: 100%;

            width: 82%;

            background:
                var(--primary);

            border-radius: 50px;

        }

        .progress-bar.orange {

            width: 68%;

            background:
                var(--orange);

        }

        .progress-bar.small {

            width: 52%;

            background:
                #7bd9d5;

        }

        .seo-list {

            display: grid;

            gap: 18px;

            margin-top: 30px;

        }

        .seo-list-item {

            display: flex;

            gap: 14px;

        }

        .seo-list-icon {

            flex:
                0 0 38px;

            height: 38px;

            border-radius: 11px;

            background:
                var(--primary-light);

            display: grid;

            place-items: center;

            color:
                var(--primary);

            font-weight: 900;

        }

        .seo-list-item h3 {

            color:
                var(--dark);

            font-size: 1.2rem;

            margin-bottom: 4px;

        }

        .seo-list-item p {

            color:
                var(--muted);

            font-size: 1rem;

        }


        /* =========================================================
           NÚMEROS
        ========================================================= */

        .numbers {

            background:
                var(--dark);

            color: white;

        }

        .numbers-grid {

            display: grid;

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

            gap: 20px;

            text-align: center;

        }

        .number-card {

            padding: 25px;

        }

        .number {

            font-size: 45px;

            font-weight: 900;

            color:
                var(--orange);

            line-height: 1;

            margin-bottom: 10px;

        }

        .number-card p {

            color:
                #a9c0c1;

            font-size: 1rem;

        }


        /* =========================================================
           PROCESSO
        ========================================================= */

        .process {

            background:
                white;

        }

        .process-grid {

            display: grid;

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

            gap: 20px;

        }

        .process-card {

            position: relative;

            padding: 30px 25px;

            border:
                1px solid
                var(--border);

            border-radius: 20px;

        }

        .process-number {

            font-size: 12px;

            font-weight: 900;

            color:
                var(--primary);

            margin-bottom: 25px;

        }

        .process-card h3 {

            color:
                var(--dark);

            font-size: 1.4rem;

            margin-bottom: 10px;

        }

        .process-card p {

            color:
                var(--muted);

            font-size: 1rem;

        }


        /* =========================================================
           DIFERENCIAL
        ========================================================= */

        .difference {

            background:
                var(--cream);

        }

        .difference-grid {

            display: grid;

            grid-template-columns:
                1fr 1fr;

            gap: 20px;

        }

        .difference-box {

            padding: 35px;

            background:
                white;

            border-radius: 22px;

            border:
                1px solid
                var(--border);

        }

        .difference-box.featured {

            background:
                var(--primary);

            color: white;

        }

        .difference-box h3 {

            color:
                var(--dark);

            font-size: 2rem;

            margin-bottom: 20px;

        }

        .difference-box.featured h3 {

            color:
                white;

        }

        .difference-list {

            display: grid;

            gap: 13px;

        }

        .difference-list div {

            display: flex;

            gap: 10px;

            font-size: 1.1rem;

        }

        .difference-box:not(.featured)
        .difference-list div
        span:first-child {

            color:
                var(--primary);

            font-weight: 900;

        }

        .difference-box.featured
        .difference-list div
        span:first-child {

            color:
                #b9f2ef;

            font-weight: 900;

        }


        /* =========================================================
           FAQ
        ========================================================= */

        .faq {

            background:
                white;

        }

        .faq-container {

            max-width: 850px;

            margin: auto;

        }

        .faq-item {

            border-bottom:
                1px solid
                var(--border);

        }

        .faq-question {

            width: 100%;

            padding: 23px 0;

            background:
                transparent;

            border: 0;

            display: flex;

            justify-content: space-between;

            align-items: center;

            text-align: left;

            color:
                var(--dark);

            font-size: 16px;

            font-weight: 800;

            cursor: pointer;

        }

        .faq-question span:last-child {

            color:
                var(--primary);

            font-size: 24px;

            transition:
                .3s;

        }

        .faq-answer {

            max-height: 0;

            overflow: hidden;

            transition:
                .4s ease;

        }

        .faq-answer p {

            padding:
                0 0 22px;

            color:
                var(--muted);

            font-size: 1rem;

        }

        .faq-item.active
        .faq-answer {

            max-height:
                200px;

        }

        .faq-item.active
        .faq-question
        span:last-child {

            transform:
                rotate(45deg);

        }


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

        .cta {

            padding:
                40px 0 100px;

            background:
                white;

        }

        .cta-box {

            position: relative;

            overflow: hidden;

            background:
                var(--dark);

            border-radius: 30px;

            padding: 65px;

            text-align: center;

        }

        .cta-box::before {

            content: "";

            position: absolute;

            width: 300px;
            height: 300px;

            border-radius: 50%;

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

            top: -170px;

            left: -70px;

        }

        .cta-box::after {

            content: "";

            position: absolute;

            width: 250px;
            height: 250px;

            border-radius: 50%;

            background:
                rgba(39,177,173,.12);

            right: -100px;

            bottom: -130px;

        }

        .cta-content {

            position: relative;

            z-index: 2;

        }

        .cta-box h2 {

            color:
                white;

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

            line-height: 1.1;

            margin-bottom: 18px;

            letter-spacing: -1px;

        }

        .cta-box p {

            color:
                #b9caca;

            max-width: 650px;

            margin:
                0 auto 28px;

            font-size: 1.2rem;

        }


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

        footer {

            background:
                #0b2223;

            color:
                white;

            padding:
                55px 0 25px;

        }

        .footer-grid {

            display: grid;

            grid-template-columns:
                1.3fr 1fr 1fr;

            gap: 60px;

            padding-bottom: 45px;

        }

        .footer-brand img {

            width: 90px; height: 78px;

            margin-bottom: 18px;

       

        }

        .footer-brand p {

            color:
                #8ea7a8;

            max-width: 350px;

            font-size: 13px;

        }

        .footer-column h4 {

            margin-bottom: 18px;

            font-size: 14px;

        }

        .footer-column a {

            display: block;

            color:
                #8ea7a8;

            font-size: 13px;

            margin-bottom: 10px;

            transition:
                .2s;

        }

        .footer-column a:hover {

            color:
                var(--primary);

        }

        .footer-bottom {

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

            padding-top: 22px;

            display: flex;

            justify-content: space-between;

            gap: 20px;

            color:
                #718b8c;

            font-size: 12px;

        }


        /* =========================================================
           WHATSAPP
        ========================================================= */

        .whatsapp {

            position: fixed;

            right: 22px;

            bottom: 22px;

            width: 58px;
            height: 58px;

            border-radius: 50%;

            background:
                #25d366;

            color:
                white;

            display: grid;

            place-items: center;

            font-weight: 900;

            font-size: 14px;

            z-index: 900;

            box-shadow:
                0 10px 25px
                rgba(0,0,0,.18);

            transition:
                .3s;

        }

        .whatsapp:hover {

            transform:
                scale(1.08);

        }


        /* =========================================================
           ANIMAÇÃO
        ========================================================= */

        .reveal {

            opacity: 0;

            transform:
                translateY(30px);

            transition:
                .8s ease;

        }

        .reveal.visible {

            opacity: 1;

            transform:
                translateY(0);

        }


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

        @media(max-width:1000px) {

            .hero-grid {

                grid-template-columns:
                    1fr;

            }

            .hero {

                padding-top:
                    145px;

            }

            .hero-content {

                text-align:
                    center;

            }

            .hero-text {

                margin-left:
                    auto;

                margin-right:
                    auto;

            }

            .hero-buttons {

                justify-content:
                    center;

            }

            .hero-visual {

                max-width:
                    650px;

                width:
                    100%;

                margin:
                    auto;

            }

            .portfolio-grid {

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

            }

            .seo-grid {

                grid-template-columns:
                    1fr;

            }

            .services-grid {

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

            }

            .numbers-grid {

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

            }

            .process-grid {

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

            }

        }


        @media(max-width:750px) {

            .container {

                width:
                    min(
                        var(--container),
                        calc(100% - 28px)
                    );

            }

            .nav-links {

                position:
                    absolute;

                top:
                    75px;

                left:
                    14px;

                right:
                    14px;

                display:
                    none;

                flex-direction:
                    column;

                align-items:
                    stretch;

                gap:
                    0;

                background:
                    white;

                padding:
                    12px;

                border-radius:
                    18px;

                box-shadow:
                    0 20px 50px
                    rgba(0,0,0,.12);

            }

            .nav-links.active {

                display:
                    flex;

            }

            .nav-links a {

                padding:
                    13px 12px;

            }

            .nav-button {

                text-align:
                    center;

            }

            .menu-btn {

                display:
                    block;

            }

            .hero {

                min-height:
                    auto;

                padding-bottom:
                    70px;

            }

            .hero h1 {

                font-size:
                    43px;

                letter-spacing:
                    -1.7px;

            }

            .hero-text {

                font-size:
                    16px;

            }

            .dashboard {

                transform:
                    none;

            }

            .floating-card {

                display:
                    none;

            }

            section {

                padding:
                    75px 0;

            }

            .portfolio-header {

                display:
                    block;

            }

            .portfolio-all {

                margin-top:
                    25px;

            }

            .portfolio-grid,
            .services-grid,
            .difference-grid {

                grid-template-columns:
                    1fr;

            }

            .process-grid {

                grid-template-columns:
                    1fr;

            }

            .numbers-grid {

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

            }

            .number {

                font-size:
                    36px;

            }

            .cta-box {

                padding:
                    45px 22px;

            }

            .footer-grid {

                grid-template-columns:
                    1fr;

                gap:
                    35px;

            }

            .footer-bottom {

                flex-direction:
                    column;

            }

        }


        @media(max-width:480px) {

            .hero-buttons {

                flex-direction:
                    column;

            }

            .btn {

                width:
                    100%;

            }

            .numbers-grid {

                grid-template-columns:
                    1fr 1fr;

            }

            .dashboard-body {

                padding:
                    22px;

            }

            .dashboard-title {

                font-size:
                    27px;

            }

            .portfolio-image {

                height:
                    220px;

            }

        }