/* =====================================================
           ROOT
        ===================================================== */

        :root {

            --primary: #635bff;
            --primary-dark: #5148e8;
            --secondary: #ff4f81;
            --orange: #ff9f43;
            --green: #20bf6b;
            --cyan: #18b8d9;

            --dark: #14142b;
            --text: #62677a;
            --light: #f7f8fc;
            --white: #ffffff;

            --border: #ececf3;

            --radius: 22px;

        }


        /* =====================================================
           GENERAL
        ===================================================== */

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

        html {
            scroll-behavior: smooth;
        }

        body {

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

            color: var(--text);

            background: #ffffff;

            overflow-x: hidden;

        }

        a {
            text-decoration: none;
        }


        /* =====================================================
           NAVBAR
        ===================================================== */

        .navbar {

            position: fixed;

            top: 0;
            left: 0;
            right: 0;

            z-index: 9999;

            padding: 15px 0;

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

            backdrop-filter: blur(20px);

            border-bottom: 1px solid rgba(0,0,0,.05);

            transition: .3s;

        }

        .navbar.scrolled {

            box-shadow:
                0 10px 35px rgba(31,35,55,.10);

        }

        .brand {

            display: flex;

            align-items: center;

            gap: 10px;

            color: var(--dark);

            font-size: 21px;

            font-weight: 900;

        }

        .brand-icon {

            width: 42px;
            height: 42px;

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            border-radius: 13px;

            background:
                linear-gradient(
                    135deg,
                    #635bff,
                    #9b51e0
                );

            box-shadow:
                0 8px 20px rgba(99,91,255,.30);

        }

        .nav-link {

            color: #555a6d !important;

            font-weight: 600;

            margin: 0 8px;

        }

        .nav-link:hover {

            color: var(--primary) !important;

        }

        .nav-button {

            border: 0;

            padding: 11px 19px;

            border-radius: 12px;

            font-weight: 700;

            background: var(--primary);

            color: white;

            transition: .3s;

        }

        .nav-button:hover {

            background: var(--primary-dark);

            transform: translateY(-2px);

            color: white;

        }


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

        .hero {

            min-height: 780px;

            padding:
                150px 0
                100px;

            position: relative;

            overflow: hidden;

            background:

                radial-gradient(
                    circle at 10% 15%,
                    rgba(99,91,255,.14),
                    transparent 28%
                ),

                radial-gradient(
                    circle at 85% 10%,
                    rgba(255,79,129,.14),
                    transparent 25%
                ),

                radial-gradient(
                    circle at 80% 85%,
                    rgba(24,184,217,.13),
                    transparent 25%
                ),

                #fbfbff;

        }


        .hero-shape {

            position: absolute;

            border-radius: 50%;

            filter: blur(1px);

            pointer-events: none;

        }

        .shape-one {

            width: 250px;
            height: 250px;

            background: rgba(99,91,255,.07);

            top: 100px;
            left: -100px;

        }

        .shape-two {

            width: 350px;
            height: 350px;

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

            right: -150px;
            bottom: -100px;

        }


        .hero-badge {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding: 9px 15px;

            border-radius: 50px;

            background: white;

            color: var(--primary);

            font-size: 13px;

            font-weight: 800;

            box-shadow:
                0 8px 30px rgba(40,40,80,.08);

            margin-bottom: 22px;

        }

        .hero-badge span {

            width: 8px;
            height: 8px;

            border-radius: 50%;

            background: var(--green);

        }


        .hero h1 {

            font-size:
                clamp(44px, 6vw, 75px);

            line-height: 1.02;

            letter-spacing: -3px;

            color: var(--dark);

            font-weight: 900;

            max-width: 720px;

        }

        .hero h1 .gradient {

            background:
                linear-gradient(
                    90deg,
                    #635bff,
                    #9b51e0,
                    #ff4f81
                );

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

        }

        .hero-text {

            max-width: 620px;

            margin-top: 25px;

            font-size: 17px;

            line-height: 1.8;

        }


        .hero-buttons {

            display: flex;

            gap: 12px;

            margin-top: 30px;

            flex-wrap: wrap;

        }

        .btn-main {

            padding: 14px 22px;

            border-radius: 13px;

            border: 0;

            background:
                linear-gradient(
                    135deg,
                    #635bff,
                    #7c4dff
                );

            color: white;

            font-weight: 800;

            box-shadow:
                0 12px 30px rgba(99,91,255,.25);

            transition: .3s;

        }

        .btn-main:hover {

            color: white;

            transform: translateY(-3px);

            box-shadow:
                0 16px 35px rgba(99,91,255,.35);

        }

        .btn-light-custom {

            padding: 14px 22px;

            border-radius: 13px;

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

            background: white;

            color: var(--dark);

            font-weight: 800;

        }


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

        .hero-stats {

            display: flex;

            gap: 30px;

            margin-top: 42px;

        }

        .stat h4 {

            color: var(--dark);

            font-weight: 900;

            margin-bottom: 2px;

        }

        .stat small {

            font-size: 12px;

        }


        /* =====================================================
           APP MOCKUP
        ===================================================== */

        .hero-app-area {

            position: relative;

            min-height: 570px;

        }


        .phone {

            position: absolute;

            width: 295px;

            height: 590px;

            right: 55px;

            top: -5px;

            border-radius: 42px;

            background: #fff;

            border: 8px solid #18182d;

            box-shadow:
                0 35px 80px rgba(25,25,50,.25);

            overflow: hidden;

            z-index: 5;

        }


        .phone-notch {

            position: absolute;

            width: 100px;

            height: 24px;

            top: 0;

            left: 50%;

            transform: translateX(-50%);

            background: #18182d;

            border-radius:
                0 0 15px 15px;

            z-index: 20;

        }


        .app-screen {

            height: 100%;

            padding: 30px 15px 15px;

            background:
                linear-gradient(
                    180deg,
                    #f7f7ff,
                    #ffffff
                );

            overflow: hidden;

        }


        .app-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 15px;

        }

        .app-header small {

            font-size: 10px;

            color: #888ca0;

        }

        .app-header strong {

            display: block;

            font-size: 14px;

            color: var(--dark);

        }

        .profile-circle {

            width: 34px;
            height: 34px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

            background:
                linear-gradient(
                    135deg,
                    #635bff,
                    #ff4f81
                );

            color: white;

        }


        .location-card {

            padding: 12px;

            border-radius: 15px;

            color: white;

            background:
                linear-gradient(
                    135deg,
                    #635bff,
                    #8b5cf6
                );

            margin-bottom: 13px;

        }

        .location-card small {

            font-size: 9px;

            opacity: .8;

        }

        .location-card strong {

            font-size: 12px;

        }


        .mobile-search {

            height: 39px;

            display: flex;

            align-items: center;

            gap: 8px;

            padding: 0 12px;

            background: white;

            border: 1px solid #ededf3;

            border-radius: 12px;

            margin-bottom: 15px;

        }

        .mobile-search i {

            color: #999daf;

        }

        .mobile-search span {

            font-size: 10px;

            color: #a2a5b3;

        }


        .mobile-title {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 10px;

        }

        .mobile-title strong {

            font-size: 12px;

            color: var(--dark);

        }

        .mobile-title small {

            color: var(--primary);

            font-size: 9px;

        }


        .mobile-category {

            display: flex;

            gap: 8px;

            overflow: hidden;

            margin-bottom: 15px;

        }

        .category {

            min-width: 55px;

            text-align: center;

        }

        .category-icon {

            width: 45px;
            height: 45px;

            margin: auto;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 14px;

            font-size: 18px;

        }

        .category:nth-child(1)
        .category-icon {

            background: #eeeaff;
            color: #635bff;

        }

        .category:nth-child(2)
        .category-icon {

            background: #fff0f5;
            color: #ff4f81;

        }

        .category:nth-child(3)
        .category-icon {

            background: #e9fbf2;
            color: #20bf6b;

        }

        .category:nth-child(4)
        .category-icon {

            background: #fff5e8;
            color: #ff9f43;

        }

        .category small {

            display: block;

            font-size: 8px;

            margin-top: 5px;

            color: #666b7d;

        }


        .mobile-store {

            display: flex;

            gap: 10px;

            padding: 9px;

            background: white;

            border-radius: 15px;

            margin-bottom: 9px;

            box-shadow:
                0 5px 20px rgba(40,40,80,.06);

        }

        .store-thumb {

            width: 58px;
            height: 58px;

            min-width: 58px;

            border-radius: 12px;

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            font-size: 22px;

        }

        .store-one {

            background:
                linear-gradient(
                    135deg,
                    #635bff,
                    #9b51e0
                );

        }

        .store-two {

            background:
                linear-gradient(
                    135deg,
                    #ff4f81,
                    #ff7a59
                );

        }

        .store-three {

            background:
                linear-gradient(
                    135deg,
                    #20bf6b,
                    #18b8d9
                );

        }

        .mobile-store strong {

            color: var(--dark);

            font-size: 10px;

        }

        .mobile-store small {

            display: block;

            font-size: 8px;

            margin-top: 3px;

        }

        .rating {

            color: #ffab00;

            font-size: 8px;

        }


        .mobile-bottom {

            position: absolute;

            left: 0;
            right: 0;
            bottom: 0;

            height: 55px;

            display: flex;

            justify-content: space-around;

            align-items: center;

            background: white;

            border-top: 1px solid #eeeef4;

        }

        .mobile-bottom div {

            text-align: center;

            font-size: 8px;

            color: #9b9eae;

        }

        .mobile-bottom i {

            display: block;

            font-size: 15px;

            margin-bottom: 2px;

        }

        .mobile-bottom .active {

            color: var(--primary);

        }


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

        .float-card {

            position: absolute;

            display: flex;

            align-items: center;

            gap: 10px;

            padding: 13px 16px;

            background: white;

            border-radius: 15px;

            box-shadow:
                0 18px 40px rgba(30,30,70,.13);

            z-index: 10;

        }

        .float-card i {

            width: 35px;
            height: 35px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 10px;

            font-size: 17px;

        }

        .float-card strong {

            display: block;

            color: var(--dark);

            font-size: 11px;

        }

        .float-card small {

            font-size: 9px;

        }

        .float-one {

            top: 80px;

            left: 0;

        }

        .float-one i {

            background: #eeeaff;

            color: var(--primary);

        }

        .float-two {

            right: -5px;

            bottom: 100px;

        }

        .float-two i {

            background: #e9fbf2;

            color: var(--green);

        }


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

        section {

            padding: 100px 0;

        }

        .section-title {

            max-width: 720px;

            margin: 0 auto 55px;

            text-align: center;

        }

        .section-label {

            display: inline-block;

            padding: 7px 13px;

            border-radius: 50px;

            background: #eeeaff;

            color: var(--primary);

            font-size: 11px;

            font-weight: 800;

            text-transform: uppercase;

            letter-spacing: .8px;

        }

        .section-title h2 {

            margin-top: 14px;

            color: var(--dark);

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

            font-weight: 900;

            letter-spacing: -1.5px;

        }

        .section-title p {

            margin-top: 15px;

            line-height: 1.8;

        }


        /* =====================================================
           FEATURE CARDS
        ===================================================== */

        .feature-card {

            position: relative;

            height: 100%;

            padding: 30px;

            border-radius: 22px;

            background: white;

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

            transition: .35s;

            overflow: hidden;

        }

        .feature-card:hover {

            transform: translateY(-8px);

            border-color: transparent;

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

        }

        .feature-card::after {

            content: "";

            position: absolute;

            width: 90px;
            height: 90px;

            border-radius: 50%;

            right: -35px;
            top: -35px;

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

        }

        .feature-icon {

            width: 55px;
            height: 55px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 16px;

            font-size: 23px;

            margin-bottom: 22px;

        }

        .purple {

            color: #635bff;
            background: #eeeaff;

        }

        .pink {

            color: #ff4f81;
            background: #fff0f5;

        }

        .green {

            color: #20bf6b;
            background: #e9fbf2;

        }

        .orange {

            color: #ff9f43;
            background: #fff5e8;

        }

        .cyan {

            color: #18a9c8;
            background: #e8faff;

        }

        .feature-card h5 {

            color: var(--dark);

            font-weight: 800;

            margin-bottom: 10px;

        }

        .feature-card p {

            font-size: 13px;

            line-height: 1.8;

        }


        /* =====================================================
           APP EXPERIENCE
        ===================================================== */

        .app-section {

            background: #f7f7fc;

        }

        .experience-card {

            padding: 45px;

            border-radius: 30px;

            background:
                linear-gradient(
                    135deg,
                    #635bff,
                    #7c4dff 50%,
                    #9b51e0
                );

            color: white;

            overflow: hidden;

            position: relative;

        }

        .experience-card h2 {

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

            font-weight: 900;

            letter-spacing: -1px;

        }

        .experience-card p {

            color: rgba(255,255,255,.82);

            line-height: 1.8;

        }

        .check-list {

            padding: 0;

            list-style: none;

            margin-top: 25px;

        }

        .check-list li {

            margin: 13px 0;

            font-size: 14px;

        }

        .check-list i {

            margin-right: 8px;

        }


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

        .seller-section {

            background: white;

        }

        .seller-card {

            height: 100%;

            padding: 35px;

            border-radius: 25px;

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

            background: white;

        }

        .seller-card.highlight {

            color: white;

            border: none;

            background:
                linear-gradient(
                    135deg,
                    #14142b,
                    #29294a
                );

        }

        .seller-card.highlight h3 {

            color: white;

        }

        .seller-card h3 {

            color: var(--dark);

            font-weight: 900;

            margin-bottom: 12px;

        }

        .seller-feature {

            display: flex;

            gap: 15px;

            margin-top: 25px;

        }

        .seller-icon {

            min-width: 43px;

            width: 43px;
            height: 43px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 12px;

            background: #eeeaff;

            color: var(--primary);

        }

        .seller-feature h6 {

            color: var(--dark);

            font-weight: 800;

            margin-bottom: 5px;

        }

        .seller-card.highlight .seller-feature h6 {

            color: white;

        }

        .seller-feature p {

            font-size: 12px;

            line-height: 1.7;

            margin: 0;

        }


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

        .process-section {

            background: #f8f8fc;

        }

        .process-card {

            text-align: center;

            padding: 25px;

        }

        .process-number {

            width: 60px;
            height: 60px;

            display: flex;

            align-items: center;

            justify-content: center;

            margin: 0 auto 20px;

            border-radius: 20px;

            background:
                linear-gradient(
                    135deg,
                    #635bff,
                    #9b51e0
                );

            color: white;

            font-size: 20px;

            font-weight: 900;

            box-shadow:
                0 12px 25px rgba(99,91,255,.25);

        }

        .process-card h5 {

            color: var(--dark);

            font-weight: 800;

        }

        .process-card p {

            font-size: 13px;

            line-height: 1.7;

        }


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

        .accordion-item {

            margin-bottom: 10px;

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

            border-radius: 15px !important;

            overflow: hidden;

        }

        .accordion-button {

            padding: 20px;

            color: var(--dark);

            font-weight: 700;

            box-shadow: none !important;

        }

        .accordion-button:not(.collapsed) {

            color: var(--primary);

            background: #f8f7ff;

        }


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

        .cta-section {

            padding: 90px 0;

        }

        .cta {

            position: relative;

            overflow: hidden;

            padding: 75px 35px;

            text-align: center;

            border-radius: 30px;

            color: white;

            background:
                linear-gradient(
                    135deg,
                    #635bff,
                    #9b51e0,
                    #ff4f81
                );

        }

        .cta h2 {

            font-size:
                clamp(32px,5vw,55px);

            font-weight: 900;

        }

        .cta p {

            max-width: 650px;

            margin: 15px auto 30px;

            color: rgba(255,255,255,.85);

            line-height: 1.8;

        }

        .cta .btn {

            border-radius: 12px;

            font-weight: 800;

            padding: 13px 22px;

        }


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

        footer {

            background: #111124;

            color: #9699ae;

            padding: 70px 0 25px;

        }

        footer h5 {

            color: white;

            font-weight: 800;

            margin-bottom: 18px;

        }

        footer a {

            display: block;

            color: #9699ae;

            font-size: 13px;

            margin-bottom: 11px;

        }

        footer a:hover {

            color: white;

        }

        .footer-brand {

            color: white;

            font-size: 23px;

            font-weight: 900;

            margin-bottom: 15px;

        }

        .footer-social {

            display: flex;

            gap: 8px;

            margin-top: 20px;

        }

        .footer-social a {

            width: 38px;
            height: 38px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 10px;

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

            color: white;

        }

        .footer-bottom {

            margin-top: 50px;

            padding-top: 20px;

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

            font-size: 12px;

        }


        /* =====================================================
           MOBILE BOTTOM NAVIGATION
        ===================================================== */

        .mobile-bottom-nav {

            display: none;

        }


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

        .reveal {

            opacity: 0;

            transform: translateY(25px);

            transition: .7s ease;

        }

        .reveal.show {

            opacity: 1;

            transform: translateY(0);

        }


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

        @media(max-width: 991px) {

            .hero {

                padding-top: 130px;

            }

            .hero-app-area {

                margin-top: 70px;

            }

            .phone {

                position: relative;

                right: auto;

                margin: auto;

            }

            .float-one {

                left: 8%;

            }

            .float-two {

                right: 5%;

            }

        }


        /* =====================================================
           MOBILE APP DESIGN
        ===================================================== */

        @media(max-width: 767px) {

            body {

                background: #f7f7fc;

                padding-bottom: 70px;

            }


            /* Hide desktop navbar links */

            .navbar {

                padding: 10px 0;

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

            }

            .navbar-brand {

                font-size: 17px;

            }

            .brand-icon {

                width: 37px;
                height: 37px;

                border-radius: 11px;

            }

            .navbar .nav-button {

                display: none;

            }

            .navbar-toggler {

                border: none;

                box-shadow: none !important;

                font-size: 20px;

            }


            /* HERO */

            .hero {

                min-height: auto;

                padding:
                    105px
                    15px
                    40px;

                background:

                    radial-gradient(
                        circle at 0% 0%,
                        rgba(99,91,255,.16),
                        transparent 45%
                    ),

                    #f7f7fc;

            }

            .hero-badge {

                font-size: 10px;

                padding: 7px 12px;

                margin-bottom: 15px;

            }

            .hero h1 {

                font-size: 39px;

                line-height: 1.08;

                letter-spacing: -1.8px;

            }

            .hero-text {

                font-size: 13px;

                line-height: 1.7;

                margin-top: 17px;

            }

            .hero-buttons {

                margin-top: 20px;

                display: grid;

                grid-template-columns: 1fr 1fr;

            }

            .btn-main,
            .btn-light-custom {

                padding: 12px 10px;

                text-align: center;

                font-size: 12px;

            }

            .hero-stats {

                gap: 18px;

                margin-top: 25px;

            }

            .stat h4 {

                font-size: 17px;

            }

            .stat small {

                font-size: 9px;

            }


            /* APP PHONE */

            .hero-app-area {

                min-height: 570px;

                margin-top: 25px;

            }

            .phone {

                width: 270px;

                height: 550px;

                border-width: 7px;

                border-radius: 38px;

            }

            .float-card {

                padding: 9px 11px;

                border-radius: 12px;

            }

            .float-card i {

                width: 30px;
                height: 30px;

                font-size: 14px;

            }

            .float-card strong {

                font-size: 9px;

            }

            .float-card small {

                font-size: 7px;

            }

            .float-one {

                left: -4px;

                top: 70px;

            }

            .float-two {

                right: -4px;

                bottom: 80px;

            }


            /* SECTIONS */

            section {

                padding: 65px 15px;

            }

            .section-title {

                margin-bottom: 35px;

            }

            .section-label {

                font-size: 9px;

                padding: 6px 10px;

            }

            .section-title h2 {

                font-size: 29px;

                line-height: 1.15;

                letter-spacing: -.8px;

            }

            .section-title p {

                font-size: 12px;

                line-height: 1.7;

            }


            /* FEATURES */

            .feature-card {

                padding: 22px;

                border-radius: 20px;

            }

            .feature-icon {

                width: 48px;
                height: 48px;

                font-size: 20px;

                border-radius: 14px;

                margin-bottom: 16px;

            }

            .feature-card h5 {

                font-size: 15px;

            }

            .feature-card p {

                font-size: 11px;

            }


            /* EXPERIENCE */

            .experience-card {

                padding: 30px 22px;

                border-radius: 25px;

            }

            .experience-card h2 {

                font-size: 30px;

            }

            .experience-card p {

                font-size: 12px;

            }

            .check-list li {

                font-size: 11px;

            }


            /* SELLER */

            .seller-card {

                padding: 25px 20px;

                border-radius: 20px;

            }

            .seller-card h3 {

                font-size: 23px;

            }


            /* PROCESS */

            .process-card {

                padding: 15px 8px;

            }

            .process-number {

                width: 48px;
                height: 48px;

                border-radius: 15px;

                font-size: 16px;

            }

            .process-card h5 {

                font-size: 14px;

            }

            .process-card p {

                font-size: 10px;

            }


            /* CTA */

            .cta-section {

                padding:
                    60px
                    15px;

            }

            .cta {

                padding: 50px 20px;

                border-radius: 25px;

            }

            .cta h2 {

                font-size: 31px;

                line-height: 1.15;

            }

            .cta p {

                font-size: 12px;

            }


            /* FOOTER */

            footer {

                padding:
                    50px 20px
                    90px;

            }

            footer p {

                font-size: 12px;

                line-height: 1.8;

            }


            /* MOBILE BOTTOM NAV */

            .mobile-bottom-nav {

                position: fixed;

                display: flex;

                align-items: center;

                justify-content: space-around;

                left: 0;
                right: 0;
                bottom: 0;

                height: 67px;

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

                backdrop-filter: blur(15px);

                border-top:
                    1px solid #e8e8ef;

                z-index: 10000;

                box-shadow:
                    0 -8px 30px rgba(30,30,60,.08);

            }

            .mobile-bottom-nav a {

                min-width: 60px;

                text-align: center;

                color: #9295a5;

                font-size: 9px;

                font-weight: 600;

            }

            .mobile-bottom-nav i {

                display: block;

                font-size: 19px;

                margin-bottom: 3px;

            }

            .mobile-bottom-nav a.active {

                color: var(--primary);

            }

            .mobile-bottom-nav .center-button {

                width: 48px;
                height: 48px;

                display: flex;

                align-items: center;

                justify-content: center;

                margin-top: -25px;

                border-radius: 16px;

                color: white;

                background:
                    linear-gradient(
                        135deg,
                        #635bff,
                        #9b51e0
                    );

                border:
                    5px solid #f7f7fc;

                box-shadow:
                    0 8px 20px rgba(99,91,255,.35);

            }

            .mobile-bottom-nav .center-button i {

                margin: 0;

                font-size: 20px;

            }

        }


        /* =====================================================
           SMALL PHONES
        ===================================================== */

        @media(max-width: 380px) {

            .hero h1 {

                font-size: 35px;

            }

            .phone {

                width: 250px;

                height: 520px;

            }

            .hero-app-area {

                min-height: 540px;

            }

        }


/* =====================================================
   DESKTOP NAVIGATION BUTTONS
===================================================== */

.desktop-nav-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}


/* LOGIN */

.login-nav-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 11px 17px;

    border-radius: 12px;

    background: #ffffff;

    border: 1px solid #e5e5ef;

    color: #14142b;

    font-size: 13px;

    font-weight: 800;

    transition: all .3s ease;

}


.login-nav-btn:hover {

    color: #635bff;

    border-color: #635bff;

    background: #f8f7ff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(99,91,255,.10);

}


/* GET STARTED */

.register-nav-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 11px 18px;

    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #635bff,
            #7c4dff
        );

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(99,91,255,.20);

    transition: all .3s ease;

}


.register-nav-btn:hover {

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(99,91,255,.30);

}


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

@media(max-width: 991px) {

    .desktop-nav-actions {

        flex-direction: column;

        align-items: stretch;

        margin-top: 15px;

        padding-top: 15px;

        border-top: 1px solid #eeeeF4;

    }


    .login-nav-btn,
    .register-nav-btn {

        width: 100%;

        text-align: center;

    }

}


/* =====================================================
   PHONE APP MODE
===================================================== */

@media(max-width: 767px) {

    .desktop-nav-actions {

        /* display: none; */

        flex-direction: column;

        align-items: stretch;

        margin-top: 15px;

        padding-top: 15px;

        border-top: 1px solid #eeeeF4;

    }

}