.hero-1 {
    position: relative;
    background-color: $bg-color;


    .book-shape,
    .frame-shape1,
    .frame-shape2,
    .frame-shape3,
    .frame-shape4,
    .bg-shape1,
    .bg-shape2 {
        position: absolute;
    }

    .book-shape {
        left: 0;
        bottom: 0;
    }

    .frame-shape1 {
        top: 0px;
        left: 473px;
        z-index: 1;
    }

    .frame-shape2 {
        bottom: 0px;
        left: 40%;
        z-index: 1;
    }

    .frame-shape3 {
        top: 30%;
        left: 50%;
        animation: rounded 5s linear infinite;
        -webkit-animation: rounded 5s linear infinite;
    }

    .frame-shape4 {
        top: 40%;
        left: 50%;
        z-index: 1;
    }


    .bg-shape1 {
        right: 10px;
        top: 0;
        z-index: 1;
    }

    .bg-shape2 {
        right: 0;
        bottom: 0;
    }

    .hero-items {
        .hero-content {
            padding-top: 230px;
            padding-bottom: 260px;
            @include breakpoint(max-lg){
                padding-top: 220px;
                padding-bottom: 80px;
            }
        }
    }

    .girl-image {
        img {
            position: relative;
            z-index: 5;
            bottom: -50px;
        }
    }

    .hero-content {
        h6 {
            color: $theme-color-2;
            font-family: "Moon Dance";
            font-size: 32px;
            font-style: normal;
            font-weight: 400;
            line-height: 26px;
        }

        h1 {
            position: relative;
            color: $header-color;
            font-family: "Inter", sans-serif;
            font-size: 74px;
            font-style: normal;
            font-weight: 700;
            line-height: 90px;
            margin-bottom: 30px;
            z-index: 2;
        }
    }
}

.hero-2 {
    position: relative;
    background-image: url(../img/hero/hero2-bg.png);

 
    .frame-shape1,
    .frame-shape2  {
        position: absolute;
    }
 
    .frame-shape1 {
        top: 124px;
        left: 55%;
        z-index: 1;
    }

    .frame-shape2 {
        top: 87px;
        left: 40%;
        z-index: 1;
    }
 

    .hero-items {
        .hero-content {
            padding-top: 216px;
            padding-bottom: 216px;
        }
    }

    .book-image {
        img {
            position: absolute;
            z-index: 5;
            right: 9%;
            bottom: 0;

            @include breakpoint(max-xxl){
                display: none;
            }
        }
    }

    .hero-content {
        h6 {
            color: $theme-color-2;
            font-family: "Moon Dance";
            font-size: 32px;
            font-style: normal;
            font-weight: 400;
            line-height: 26px;
        }

        h1 {
            position: relative;
            color: $header-color;
            font-family: "Inter", sans-serif;
            font-size: 74px;
            font-style: normal;
            font-weight: 700;
            line-height: 90px;
            margin-bottom: 30px;
            z-index: 2;
        }
    }
 
}