<!-- HTML code -->
<section class="cm-item-4 hero-section">
    <div class="hero-container">
        <div class="content-wrapper">
            <div class="left-area">
                <h6>Be Invest</h6>
                <h1>Invest with confidence harvest the rewards</h1>
                <p>And In Order To Make A Business, Brand Advertising And Marketing Plays An Important <br> Role.
                    Similarly, In Making Cultivation Business A Brand, Good Slogans Are Necessary.</p>
                <div class="btn-wrapper">
                    <button class="hero-btn">Get Started <span><i class="fa-regular fa-plus"></i></span></button>
                    <button class="hero-call-btn">

                        <span>
                            <svg width="37" height="36" viewBox="0 0 37 36" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M29.6887 13.0168H25.1079C25.1079 13.0168 27.5332 8.62052 27.9335 8.12946C28.3382 7.63298 28.7214 7.94264 28.758 8.38069C28.7945 8.81866 28.7397 15.1698 28.7397 15.1698M22.9387 15.2699C22.9387 15.2699 19.4019 15.3144 19.2343 15.2585C19.0667 15.2027 19.503 14.9077 21.8218 11.5945C22.2549 10.9757 22.4932 10.4537 22.5947 10.0163L22.6306 9.73512C22.6306 8.70778 21.7978 7.875 20.7705 7.875C19.8665 7.875 19.1132 8.51977 18.9453 9.37455"
                                    stroke="url(#paint0_linear_3043_11)" stroke-width="2.10938"
                                    stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path
                                    d="M32.7861 26.6714L29.7163 23.6016C28.7645 22.6497 27.2212 22.6497 26.2694 23.6016L23.6842 26.1867C21.5426 28.3284 18.0577 27.4539 13.7745 23.1708C9.49123 18.8875 8.61683 15.4026 10.7585 13.2611L13.3436 10.6759C14.2954 9.72406 14.2954 8.18084 13.3436 7.22902L10.2737 4.15918C9.32192 3.20736 7.7787 3.20736 6.82688 4.15918L4.24177 6.74429C-0.279393 11.2655 2.32723 20.3406 9.46592 27.4793C16.6046 34.618 25.6798 37.2246 30.201 32.7035L32.7862 30.1183C33.7379 29.1665 33.7379 27.6233 32.7861 26.6714Z"
                                    stroke="url(#paint1_linear_3043_11)" stroke-width="2.10938"
                                    stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path
                                    d="M34.2298 21.7512C35.2892 19.7749 35.8906 17.5164 35.8906 15.1172C35.8906 7.35068 29.5946 1.05469 21.8281 1.05469C19.4289 1.05469 17.1704 1.65614 15.1941 2.71554M32.7861 26.6715L29.7163 23.6017C28.7645 22.6498 27.2212 22.6498 26.2694 23.6017L23.6842 26.1868C21.5426 28.3285 18.0577 27.454 13.7745 23.1709C9.49123 18.8876 8.61683 15.4027 10.7585 13.2611L13.3436 10.676C14.2954 9.72415 14.2954 8.18093 13.3436 7.22911L10.2737 4.15927C9.32192 3.20745 7.7787 3.20745 6.82688 4.15927L4.24177 6.74437C-0.279393 11.2655 2.32723 20.3407 9.46592 27.4794C16.6046 34.6181 25.6798 37.2247 30.201 32.7035L32.7862 30.1184C33.7379 29.1665 33.7379 27.6234 32.7861 26.6715Z"
                                    stroke="url(#paint2_linear_3043_11)" stroke-width="2.10938"
                                    stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                                <defs>
                                    <linearGradient id="paint0_linear_3043_11" x1="18.9453" y1="11.5808"
                                        x2="29.6887" y2="11.5808" gradientUnits="userSpaceOnUse">
                                        <stop stop-color="#004D6E"></stop>
                                        <stop offset="1" stop-color="#00ACCC"></stop>
                                    </linearGradient>
                                    <linearGradient id="paint1_linear_3043_11" x1="2" y1="19.1953" x2="33.5"
                                        y2="19.1953" gradientUnits="userSpaceOnUse">
                                        <stop stop-color="#004D6E"></stop>
                                        <stop offset="1" stop-color="#00ACCC"></stop>
                                    </linearGradient>
                                    <linearGradient id="paint2_linear_3043_11" x1="2" y1="18" x2="35.8906" y2="18"
                                        gradientUnits="userSpaceOnUse">
                                        <stop stop-color="#004D6E"></stop>
                                        <stop offset="1" stop-color="#00ACCC"></stop>
                                    </linearGradient>
                                </defs>
                            </svg>
                        </span>
                        <div class="tp-hero-call-inner">
                            <span>Need help?</span>
                            <a href="tel:5550111">(808) 555-0111</a>
                        </div>

                    </button>
                </div>
            </div>
            <div class="right-area">
                <div class="hero-shape">
                    <img class="shape-1" src="http://cdn.codemela.com/wp-content/uploads/2024/07/shape-2.png" alt="">
                    <img class="shape-2" src="http://cdn.codemela.com/wp-content/uploads/2024/07/shape-1.png" alt="">
                    <img class="shape-3" src="http://cdn.codemela.com/wp-content/uploads/2024/07/shape-1.png" alt="">
                </div>
                <img class="hero-img" src="http://cdn.codemela.com/wp-content/uploads/2024/07/img-1.jpg" alt="">
            </div>
        </div>
    </div>
</section>

<!-- CSS code -->
<style>
    :root {
        --cm-item-4-color-primary: #2196F3;
        --cm-item-4-color-secondary: #64DD17;
    }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .cm-item-4.hero-section {
            background: url(http://cdn.codemela.com/wp-content/uploads/2024/07/shape-bg.png);
            height: auto;
            background-position: center;
            background-color: rgb(22, 36, 62);
            background-repeat: no-repeat;
        }

        .cm-item-4.hero-section .hero-container {
            max-width: 90%;
            margin: 0 auto;
            padding: 80px 0;
        }

        .cm-item-4.hero-section .hero-container .content-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .cm-item-4.hero-section .hero-container .content-wrapper .left-area {
            max-width: 58.33333333%;
        }

        .cm-item-4.hero-section .hero-container .content-wrapper .left-area h6 {
            font-size: 20px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 4px;
            color: #fff;
        }

        .cm-item-4.hero-section .hero-container .content-wrapper .left-area h1 {
            font-size: 75px;
            font-weight: 600;
            color: #fff;
            line-height: 1;
            letter-spacing: -3px;
            text-transform: capitalize;
            margin: 20px 0 30px;
        }

        .cm-item-4.hero-section .hero-container .content-wrapper .left-area p {
            font-size: 17px;
            font-weight: 400;
            color: #fff;
            line-height: 28px;
            margin-bottom: 35px;
        }

        .cm-item-4.hero-section .hero-container .content-wrapper .left-area .btn-wrapper {
            display: flex;
            align-items: center;
        }

        .cm-item-4.hero-section .hero-container .content-wrapper .left-area .btn-wrapper .hero-btn {
            display: inline-block;
            font-weight: 400;
            font-size: 16px;
            background-image: linear-gradient(90deg, #004D6E 0%, #00ACCC 100%);
            color: #fff;
            padding: 18px 44px;
            border-radius: 45px;
            transition: all 0.4s ease-in;
            background-size: 200% auto;
            overflow: hidden;
            border: none;
        }

        .cm-item-4.hero-section .hero-container .content-wrapper .left-area .btn-wrapper .hero-btn:hover {
            background-position: right center;
        }

        .cm-item-4.hero-section .hero-container .content-wrapper .left-area .btn-wrapper .hero-call-btn {
            display: flex;
            align-items: center;
            background-color: transparent;
            border: none;
            margin-left: 30px;
        }

        .cm-item-4.hero-section .hero-container .content-wrapper .left-area .btn-wrapper .hero-call-btn span {
            display: block;
            font-size: 17px;
            color: #fff;
            margin-bottom: 5px;
        }

        .cm-item-4.hero-section .hero-container .content-wrapper .left-area .btn-wrapper .hero-call-btn a {
            text-decoration: none;
            font-size: 17px;
            color: #fff;
            margin-left: 10px;
        }

        .cm-item-4.hero-section .hero-container .content-wrapper .right-area {
            padding-left: 75px;
            max-width: 41.66666667%;
            position: relative;
        }

        .cm-item-4.hero-section .hero-container .content-wrapper .right-area .hero-img {
            max-width: 100%;
            border-radius: 228px 228px 0 0;
        }

        .cm-item-4.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-1 {
            position: absolute;
            bottom: 55px;
            right: -50px;
        }

        .cm-item-4.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-2 {
            position: absolute;
            top: 2px;
            right: 15px;
            animation: cm-left-right-swing-animation 1s ease-in-out 0.1s forwards infinite alternate;
            transform-origin: bottom left;
        }

        .cm-item-4.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-3 {
            position: absolute;
            bottom: 55px;
            left: 50px;
            animation: cm-up-and-down-animation 2.6s linear 0s infinite alternate;
        }

        @keyframes cm-up-and-down-animation {
            0% {
                transform: translateY(-20px);
            }

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

        @keyframes cm-left-right-swing-animation {
            0% {
                transform: rotate(3deg);
            }

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

        @media (max-width: 530px) {
            .cm-item-4.hero-section .hero-container .content-wrapper{
                display: block;
            }
            .cm-item-4.hero-section .hero-container .content-wrapper .left-area{
                max-width: 100%;
            }
            .cm-item-4.hero-section .hero-container .content-wrapper .left-area h6{
                font-size: 17px;
            }
            .cm-item-4.hero-section .hero-container .content-wrapper .left-area h1{
                font-size: 40px;
            }
            .cm-item-4.hero-section .hero-container .content-wrapper .left-area .btn-wrapper{
                display: block;
            }
            .cm-item-4.hero-section .hero-container .content-wrapper .left-area .btn-wrapper .hero-call-btn{
                margin-left: 0;
                margin-top: 30px;
            }
            .cm-item-4.hero-section .hero-container .content-wrapper .right-area{
                max-width: 100%;
                padding-left: 0;
                margin-top: 50px;
            }
        }
        @media (min-width:530px) and (max-width: 1020px){
            .cm-item-4.hero-section .hero-container .content-wrapper{
                display: block;
            }
            .cm-item-4.hero-section .hero-container .content-wrapper .left-area{
                max-width: 100%;
            }
            .cm-item-4.hero-section .hero-container .content-wrapper .left-area h6{
                font-size: 17px;
            }
            .cm-item-4.hero-section .hero-container .content-wrapper .left-area h1{
                font-size: 60px;
            }
            .cm-item-4.hero-section .hero-container .content-wrapper .left-area .btn-wrapper{
                display: block;
            }
            .cm-item-4.hero-section .hero-container .content-wrapper .left-area .btn-wrapper .hero-call-btn{
                margin-left: 0;
                margin-top: 30px;
            }
            .cm-item-4.hero-section .hero-container .content-wrapper .right-area{
                max-width: 100%;
                padding-left: 0;
                margin-top: 50px;
                text-align: center;
            }
            .cm-item-4.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-2{
                right: 20%;
            }
            .cm-item-4.hero-section .hero-container .content-wrapper .right-area .hero-shape .shape-1{
                right: 60px;
            }
        }
</style>