<!-- HTML code -->
<section class="cm-item-14 hero-section">
    <div class="hero-container">
        <div class="bottom-shape">
            <img src="http://cdn.codemela.com/wp-content/uploads/2024/07/bottom.png" alt="">
        </div>
        <div class="parasuit-shape">
            <img src="http://cdn.codemela.com/wp-content/uploads/2024/07/parasuit.png" alt="">
        </div>
        <div class="left-shape">
            <img src="http://cdn.codemela.com/wp-content/uploads/2024/07/left.png" alt="">
        </div>
        <div class="book-shape">
            <img src="http://cdn.codemela.com/wp-content/uploads/2024/07/book.png" alt="">
        </div>
        <div class="right-shape">
            <img src="http://cdn.codemela.com/wp-content/uploads/2024/07/right.png" alt="">
        </div>
        <div class="bee-shape">
            <img src="http://cdn.codemela.com/wp-content/uploads/2024/07/bee.png" alt="">
        </div>
        <div class="star-shape">
            <img src="http://cdn.codemela.com/wp-content/uploads/2024/07/star.png" alt="">
        </div>
        <div class="content-wrapper">
            <div class="left-area">
                <h6>Kindergarten &amp; Baby Care</h6>
                <h1>Kids' Promising <span>Tomorrow</span> Ahead</h1>
                <p>Suspendisse non blandit sapien Nunc eleifend, enim et porta portaeros risus tincidunt diam, vel
                        sodales </p>
                <a class="cm-btn" href="#">Apply Today</a>
            </div>
            <div class="right-area">
                <div class="hero-img">
                    <img src="http://cdn.codemela.com/wp-content/uploads/2024/07/01.png" alt="">
                </div>
                <div class="hero-shape">
                    <img src="http://cdn.codemela.com/wp-content/uploads/2024/07/hero-shape.png" alt="">
                </div>
            </div>
        </div>
    </div>
</section>
<!-- CSS code -->

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        :root {
            --cm-item-14-primary-color: #F4EEE5;
            --cm-item-14-secondary-color: #F39F5F;
        }
        .cm-item-14.hero-section {
            background-color: var(--cm-item-14-primary-color);
            padding-top: 60px;
            position: relative;
            height: auto;
            overflow: hidden;
        }
        .cm-item-14.hero-section .hero-container {
            max-width: 85%;
            margin: 0 auto;
        }
        .cm-item-14.hero-section .hero-container .bottom-shape {
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 9999;
        }
        .cm-item-14.hero-section .hero-container .parasuit-shape {
            position: absolute;
            top: 20%;
            left: 4%;
            animation: vertical-animation 3s linear infinite;
        }
        @keyframes vertical-animation {
            0% {
                transform: translateY(-20px);
            }

            50% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(-20px);
            }
        }
        .cm-item-14.hero-section .hero-container .left-shape {
            position: absolute;
            bottom: 10%;
            left: 0;
        }
        .cm-item-14.hero-section .hero-container .right-shape {
            position: absolute;
            top: 17%;
            right: 0;
        }
        .cm-item-14.hero-section .hero-container .star-shape {
            position: absolute;
            bottom: 20%;
            left: 45%;
        }
        .cm-item-14.hero-section .hero-container .bee-shape {
            position: absolute;
            top: 20%;
            right: 5%;
            animation: vertical-animation 3s linear infinite;
        }
        .cm-item-14.hero-section .hero-container .book-shape {
            position: absolute;
            top: 12%;
            left: 50%;
            transform: translateX(-50%);
            animation: horizontal-animation 3s linear infinite;
        }
        @keyframes horizontal-animation {
            0% {
                transform: translateX(30px);
            }

            50% {
                transform: translateX(10px);
            }

            100% {
                transform: translateX(30px);
            }
        }
        .cm-item-14.hero-section .hero-container .content-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .left-area {
            width: 48%;
            position: relative;
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .left-area h6 {
            font-size: 18px;
            margin-bottom: 15px;
            color: var(--cm-item-14-secondary-color);
            font-weight: 700;
            letter-spacing: .9px;
            position: relative;
            display: inline-block;
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .left-area h6::after {
            content: "";
            position: absolute;
            right: -30px;
            top: 0;
            width: 20px;
            height: 20px;
            background-image: url(http://cdn.codemela.com/wp-content/uploads/2024/07/star.svg);
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .left-area h1 {
            color: #385469;
            font-size: 70px;
            font-weight: 700;
            line-height: 112%;
            margin: 10px 0 20px;
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .left-area h1 span {
            color: var(--cm-item-14-secondary-color);
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .left-area p {
            font-size: 20px;
            color: #385469;
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .left-area .cm-btn {
            display: inline-block;
            background-color: var(--cm-item-14-secondary-color);
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            padding: 22px 40px;
            transition: all 0.4s ease-in-out;
            border-radius: 22px;
            position: relative;
            overflow: hidden;
            text-align: center;
            z-index: 9;
            text-transform: uppercase;
            text-decoration: none;
            margin-top: 30px;
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .left-area .cm-btn::before,
        .cm-item-14.hero-section .hero-container .content-wrapper .left-area .cm-btn::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 20px;
            height: 20px;
            background-color: #385469;
            border-radius: 50%;
            z-index: -1;
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .left-area .cm-btn::before {
            left: -20px;
            transform: translate(-50%, -50%);
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .left-area .cm-btn::after {
            right: -20px;
            transform: translate(50%, -50%);
        }
        @keyframes btn-left-animation {
            0% {
                left: -20px;
            }

            50% {
                left: 50%;
                width: 20px;
                height: 20px;
            }

            100% {
                left: 50%;
                width: 375px;
                height: 375px;
            }
        }
        @keyframes btn-right-animation {
            0% {
                right: -20px;
            }
            50% {
                right: 50%;
                width: 20px;
                height: 20px;
            }
            100% {
                right: 50%;
                width: 375px;
                height: 375px;
            }
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .left-area .cm-btn:hover::before {
            animation: btn-left-animation 0.8s both;
            animation-direction: alternate;
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .left-area .cm-btn:hover::after {
            animation: btn-right-animation 0.8s both;
            animation-direction: alternate;
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .right-area {
            width: 48%;
            position: relative;
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .right-area .hero-img {
            position: relative;
            z-index: 11;
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .right-area .hero-img img {
            max-width: 100%;
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .right-area .hero-shape {
            position: absolute;
            bottom: 0;
            left: 25px;
            margin-right: -60px;
        }
        .cm-item-14.hero-section .hero-container .content-wrapper .right-area .hero-shape img {
            max-width: 100%;
        }
        @media (max-width: 768px) {
            .cm-item-14.hero-section .hero-container .parasuit-shape,
            .book-shape,
            .bee-shape,
            .star-shape {
                display: none;
            }
            .cm-item-14.hero-section .hero-container .content-wrapper {
                display: block;
            }
            .cm-item-14.hero-section .hero-container .content-wrapper .left-area {
                width: 100%;
                text-align: center;
            }
            .cm-item-14.hero-section .hero-container .content-wrapper .left-area h1 {
                font-size: 35px;
                margin: 10px 0;
            }
            .cm-item-14.hero-section .hero-container .content-wrapper .left-area p {
                font-size: 15px;
            }
            .cm-item-14.hero-section .hero-container .content-wrapper .left-area .cm-btn {
                margin-top: 20px;
                font-size: 14px;
            }
            .cm-item-14.hero-section .hero-container .content-wrapper .right-area {
                width: 100%;
                margin-top: 40px;
            }
            .cm-item-14.hero-section .hero-container .content-wrapper .right-area .hero-shape {
                margin-right: 0;
            }
        }
        @media (min-width: 768px) and (max-width: 1020px) {
            .cm-item-14.hero-section .hero-container .book-shape {
                display: none;
            }
            .cm-item-14.hero-section .hero-container .content-wrapper {
                display: block;
            }
            .cm-item-14.hero-section .hero-container .content-wrapper .left-area {
                width: 100%;
            }
            .cm-item-14.hero-section .hero-container .content-wrapper .right-area {
                width: 100%;
                margin-top: 40px;
            }
            .cm-item-14.hero-section .hero-container .content-wrapper .right-area .hero-shape {
                margin-right: 0;
            }
        }
        @media (min-width: 1020px) and (max-width: 1400px) {
            .cm-item-14.hero-section .hero-container .content-wrapper .left-area h1 {
                font-size: 45px;
                margin: 10px 0;
            }
        }
</style>