.hero{

            position:relative;

            padding:140px 0 110px;

            background:
                radial-gradient(circle at top,#ddfff0 0%,#f8fffb 55%,#ffffff 100%);

        }

        .hero{

            background-image:
            url(images/doodles-white.png),
            radial-gradient(circle,#ddfff0,#ffffff);

            background-size:700px,cover;

        }

        .hero::before {

            content: "";

            position: absolute;

            inset: 0;

            background:
                radial-gradient(circle at top left, #dcf8c620 0%, transparent 45%),
                radial-gradient(circle at bottom right, #b7ffd620 0%, transparent 40%);

            pointer-events: none;

        }

        .hero-badge {

            display: inline-block;

            background: #EAFBF1;

            color: #19a15f;

            font-weight: 700;

            padding: 10px 18px;

            border-radius: 50px;

            font-size: 14px;

        }

        .hero-title {

            font-size: 40px;

            font-weight: 800;

            line-height: 1.15;

            color: #1d1d1f;

        }

        .hero-title span {

            display: block;

            color: #22b573;

        }

        .hero-desc {

            margin-top: 25px;

            color: #666;

            line-height: 1.9;

            max-width: 560px;

            font-size: 17px;

        }

        .hero-action {

            display: flex;

            gap: 15px;

            margin-top: 35px;

            flex-wrap: wrap;

        }

        .hero-feature {

            display: grid;

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

            gap: 15px;

            margin-top: 35px;

        }

        .hero-feature div {

            background: white;

            border-radius: 18px;

            padding: 15px;

            font-weight: 600;

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

        }

        .phone-card {

            background: #fff;

            border-radius: 35px;

            padding: 25px;

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

            max-width: 430px;

            margin: auto;

            position: relative;

        }

        .phone-header {

            display: flex;

            align-items: center;

            gap: 12px;

            margin-bottom: 25px;

            border-bottom: 1px solid #eee;

            padding-bottom: 15px;

        }

        .bubble {

            max-width: 82%;

            margin-bottom: 15px;

            padding: 15px 18px;

            border-radius: 18px;

            font-size: 15px;

            line-height: 1.6;

        }

        .left {

            background: #ffffff;

            border: 1px solid #ececec;

        }

        .right {

            background: #DCF8C6;

            margin-left: auto;

        }

        .green {

            background: #EAFBF1;

        }

        @media(max-width:992px) {

            .hero {

                padding-top: 110px;
                text-align: center;

            }

            .hero-title {

                font-size: 38px;

            }

            .hero-desc {

                margin: auto;

            }

            .hero-action {

                justify-content: center;

            }

            .hero-feature {

                grid-template-columns: 1fr;

            }

            .phone-card {

                margin-top: 50px;

            }

        }

        @media (max-width: 991px) {

            .hero {

                padding-top: 95px;
                padding-bottom: 50px;

            }

            .hero .row {

                flex-direction: column;

            }

            .hero-title {

                font-size: 30px;
                line-height: 1.2;
                text-align: center;

            }

            .hero-title span {

                display: block;

            }

            .hero-desc {

                font-size: 15px;
                line-height: 1.8;
                text-align: center;
                max-width: 100%;
                margin: auto;

            }

            .hero-badge {

                display: table;
                margin: auto;

            }

            .hero-action {

                justify-content: center;
                gap: 12px;

            }

            .hero-action .btn {

                width: 100%;
                max-width: 320px;
                border-radius: 18px;
                font-weight: 700;

            }


        }

        .phone-card {

            max-width: 320px;

            padding: 18px;

            margin: auto;

            border-radius: 30px;

        }

        .phone-header {

            margin-bottom: 18px;

        }

        .phone-header img {

            width: 34px;
            height: 34px;

        }

        .bubble {

            font-size: 13px;

            padding: 12px 14px;

            border-radius: 15px;

            margin-bottom: 10px;

        }

        .phone-card {

            max-width: 320px;

            padding: 18px;

            margin: auto;

            border-radius: 30px;

        }

        .phone-header {

            margin-bottom: 18px;

        }

        .phone-header img {

            width: 34px;

        }

        .bubble {

            font-size: 13px;

            padding: 12px 14px;

            border-radius: 15px;

            margin-bottom: 10px;

        }

        @media(max-width:768px) {

            .hero-action {

                display: flex;

                flex-direction: column;

            }

            .hero-action .btn {

                width: 100%;

            }

        }

        .hero {

            position: relative;

            overflow: hidden;

        }

        .hero::before {

            content: "";

            position: absolute;

            width: 280px;
            height: 280px;

            background: #dff7ea;

            border-radius: 50%;

            left: -120px;

            top: 80px;

            opacity: .6;

            filter: blur(40px);

        }

        .hero::after {

            content: "";

            position: absolute;

            width: 220px;
            height: 220px;

            background: #dff7ea;

            border-radius: 50%;

            right: -80px;

            bottom: 30px;

            opacity: .5;

            filter: blur(35px);

        }

        .phone-card {

            animation: floatPhone 4s ease-in-out infinite;

        }

        @keyframes floatPhone {

            0%,
            100% {

                transform: translateY(0);

            }

            50% {

                transform: translateY(-8px);

            }

        }