.hero-1 {
    background-color: $bg-color;
    padding-top: 30px;
    padding-bottom: 40px;
    position: relative;

    @include breakpoint (max-xl){
        padding-top: 90px;
        padding-bottom: 100px;
    }

    @include breakpoint (max-lg){
        padding-top: 130px;
        padding-bottom: 0;
    }

    @include breakpoint (max-md){
        padding-top: 100px;
    }

    @include breakpoint (max-sm){
        padding-top: 80px;
    }

    .bottom-shape {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
    }

    .parasuit-shape {
        position: absolute;
        top: 20%;
        left: 5%;

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

    .left-shape {
        position: absolute;
        bottom: 10%;
        left: 0;
    }

    .book-shape {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);

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

    .pencil-shape {
        position: absolute;
        bottom: 15%;
        right: 5%;
        animation: rounded 5s linear infinite;
    }

    .bee-shape {
        position: absolute;
        top: 20%;
        right: 5%;

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

    .right-shape {
        position: absolute;
        top: 17%;
        right: 0;
    }

    .star-shape {
        position: absolute;
        bottom: 20%;
        left: 45%;
        transform: translateX(-50%);
    }

    .hero-content {
        position: relative;
        z-index: 9;

        @include breakpoint (max-sm){
           text-align: center;
           margin: 0 auto;
        }

        h5 {
            margin-bottom: 15px;
            color: $theme-color;
            font-family: 'Pangolin';
            font-weight: 500;
            position: relative;
            display: inline-block;

            &::before {
                position: absolute;
                right: -30px;
                top: 0;
                width: 20px;
                height: 20px;
                content: "";
                background-image: url(../../assets/img/star.svg);
            }
        }

        h1 {
            margin-bottom: 20px;

            span {
                color: $theme-color;
            }

            @include breakpoint (max-xxl){
                font-size: 60px;
            }

            @include breakpoint (max-xl){
                font-size: 56px;
            }

            @include breakpoint (max-md){
                font-size: 42px;
            }

            @include breakpoint (max-sm){
                font-size: 34px;
            }
        }

        p {
            font-size: 20px;
        }

        .hero-button {
            @include flex;
            gap: 30px;
            margin-top: 50px;

            @include breakpoint (max-md){
                margin-top: 40px;
            }

            @include breakpoint (max-sm){
                margin-top: 25px;
                justify-content: center;
                flex-wrap: wrap;
            }

            .video-btn {
                background-color: $theme-color;
                color: $white;
                display: inline-block;
                font-size: 16px;
                height: 50px;
                width: 50px;
                line-height: 50px;
                border-radius: 50%;
                text-align: center;
                position: relative;

                &::before {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    right: 0;
                    bottom: 0;
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    border: 1px solid $theme-color;
                    content: "";
                    transform: translate(-50%,-50%);
                }
            }

            .button-text {
                span {
                    font-size: 16px;
                    color: $header-color;
                    font-weight: bold;
                }
            }
        }
    }

    .hero-image {
        position: relative;
        z-index: 9;

        img {
            @include imgw;
        }

        .hero-shape {
            position: absolute;
            bottom: 0;
            left: 30px;
            z-index: -1;
            margin-right: -60px;

            @include breakpoint (max-xxl){
                margin-right: 0;
            }
        }
    }
}

.hero-2 {
    background-color: $bg-color;
    padding-top: 280px;
    padding-bottom: 110px;

    .right-shape {
        position: absolute;
        top: 20%;
        right: 0;

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

    .line-shape {
        position: absolute;
        top: 60%;
        left: 52%;
        transform: translate(-50%,-50%);

        @include breakpoint (max-xxxl){
            top: 28%;
            left: 55%;
        }

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

    .circle-shape {
        position: absolute;
        top: 30%;
        right: 15%;
        z-index: 9;
        animation: cir36 10s linear infinite;

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

    .roket-shape {
        position: absolute;
        left: 30px;
        top: 30%;

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

    .compass-shape {
        position: absolute;
        left: 5%;
        bottom: 20%;
        animation: rounded 5s linear infinite;

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

    .bus-shape {
        position: absolute;
        left: 50%;
        bottom: 2%;
        transform: translateX(-50%);
        z-index: 9;

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

    .frame-shape {
        position: absolute;
        top: 10%;
        left: 56%;
        animation: rounded 5s linear infinite;

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

    .star-shape {
        position: absolute;
        bottom: 5%;
        left: 35%;
        transform: translateX(-50%);
        z-index: 9;

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

    .pencil-shape {
        position: absolute;
        top: 20%;
        right: 5%;
        animation: rounded 5s linear infinite;
    }

    .hero-content {
        position: relative;
        z-index: 9;

        @include breakpoint (max-sm){
           text-align: center;
           margin: 0 auto;
        }

        h5 {
            margin-bottom: 15px;
            color: $theme-color;
            font-family: 'Pangolin';
            font-weight: 500;
            position: relative;
            display: inline-block;
        }

        h1 {
            margin-bottom: 20px;

            span {
                color: $theme-color;
            }

            @include breakpoint (max-xxl){
                font-size: 60px;
            }

            @include breakpoint (max-xl){
                font-size: 56px;
            }

            @include breakpoint (max-md){
                font-size: 42px;
            }

            @include breakpoint (max-sm){
                font-size: 34px;
            }
        }

        p {
            font-size: 20px;
        }

        .hero-button {
            @include flex;
            gap: 30px;
            margin-top: 50px;

            @include breakpoint (max-md){
                margin-top: 40px;
            }

            @include breakpoint (max-sm){
                margin-top: 25px;
                justify-content: center;
                flex-wrap: wrap;
                gap: 20px;
            }

            .video-btn {
                background-color: $theme-color;
                color: $white;
                display: inline-block;
                font-size: 16px;
                height: 50px;
                width: 50px;
                line-height: 50px;
                border-radius: 50%;
                text-align: center;
                position: relative;

                &::before {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    right: 0;
                    bottom: 0;
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    border: 1px solid $theme-color;
                    content: "";
                    transform: translate(-50%,-50%);
                }
            }

            .button-text {
                span {
                    font-size: 16px;
                    color: $header-color;
                    font-weight: bold;
                }
            }
        }
    }

    .hero-image {
        max-width: 594px;
        position: relative;
        z-index: 9;
        margin-left: 100px;

        @include breakpoint (max-xl){
            margin-left: 50px;
        }

        @include breakpoint (max-lg){
            margin-left: 0;
            max-width: 750px;
        }

        img {
            @include imgw;
        }

        &::before {
            position: absolute;
            top: 10px;
            left: -25px;
            content: "";
            background: linear-gradient(0deg, #FFA41B, #FFA41B);
            width: 550px;
            height: 540px;
            border-radius: 50%;
            z-index: -1;

            @include breakpoint (max-xxl){
                top: 5px;
                left: -15px;
                width: 480px;
                height: 460px;
            }

            @include breakpoint (max-xl){
                top: 5px;
                left: -15px;
                width: 440px;
                height: 420px;
            }

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

.hero-3 {
    position: relative;

    .swiper-dot {
        position: absolute;
        top: 42%;
        left: 2%;
        z-index: 99;
        transform: translateY(-50%);
        transform: rotate(90deg);

        &::before {
            position: absolute;
            top: 58px;
            left: -105px;
            width: 85px;
            height: 2px;
            background: linear-gradient(90deg, #F39F5F 4.85%, rgba(255, 255, 255, 0.00) 96.39%);
            content: "";
        }

        &::after {
            position: absolute;
            bottom: 13px;
            right: -105px;
            width: 85px;
            height: 2px;
            background: linear-gradient(90deg, #F39F5F 4.85%, rgba(255, 255, 255, 0.00) 96.39%);
            content: "";
        }

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

    .slider-image {
        .parasuit-shape {
            position: absolute;
            top: 15%;
            left: 5%;
    
            @include breakpoint (max-md){
                display: none;
            }
        }

        .doll-shape {
            position: absolute;
            top: 10%;
            left: 41%;
            
            @include breakpoint (max-lg){
                display: none;
            }
        }

        .bus-shape {
            position: absolute;
            bottom: 10%;
            left: 10%;

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

        .bee-shape {
            position: absolute;
            bottom: 10%;
            left: 43%;

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

        .star-shape {
            position: absolute;
            top: 20%;
            left: 35%;
            transform: translateX(-50%);

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

    .hero-content {
        position: relative;
        z-index: 9;
        padding-bottom: 270px;
        padding-top: 200px;

        @include breakpoint (max-xxl){
            padding: 180px 0;
        }

        @include breakpoint (max-xl){
            padding: 160px 0;
        }

        @include breakpoint (max-lg){
            padding: 130px 0;
        }

        @include breakpoint (max-md){
            padding: 110px 0;
        }

        @include breakpoint (max-sm){
            text-align: center;
            margin: 0 auto;
            padding: 80px 0;
        }

        h5 {
            margin-bottom: 20px;
            position: relative;
            font-family: Pangolin;
            font-weight: 500;
            color: $theme-color;

            @include breakpoint (max-md){
                font-size: 18px;
            }

            @include breakpoint (max-sm){
                font-size: 16px;
            }
        }

        h1 {
            margin-bottom: 20px;

            span {
                color: $theme-color;
            }
            
            @include breakpoint (max-xxl){
                font-size: 70px;
            }

            @include breakpoint (max-xl){
                font-size: 62px;
            }

            @include breakpoint (max-lg){
                font-size: 52px;
            }

            @include breakpoint (max-md){
                font-size: 42px;
            }

            @include breakpoint (max-sm){
                font-size: 34px;
            }
        }

        p {
            //color: $white;
            font-size: 20px;
        }

        .hero-button {
            @include flex;
            gap: 20px;
            margin-top: 50px;

            @include breakpoint (max-md){
                margin-top: 30px;
            }

            @include breakpoint (max-sm){
                flex-wrap: wrap;
                margin-top: 20px;
                justify-content: center;
            }
        }
    }
}

.hero-4 {
    padding: 120px 0 30px;
    position: relative;
    background-color: $bg-color;
    

    .doll-shape {
        position: absolute;
        left: 10%;
        top: 15%;

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

    .line-shape {
        position: absolute;
        left: -5%;
        bottom: 0;

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

    .bee-shape {
        position: absolute;
        left: 25%;
        bottom: 5%;
    }

    .line-2 {
        position: absolute;
        bottom: 10%;
        left: 40%;
        animation: rounded 5s linear infinite;

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

    .star-shape {
        position: absolute;
        top: 20%;
        left: 35%;

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

    .frame-shape {
        position: absolute;
        top: 30%;
        right: 3%;
        animation: rounded 5s linear infinite;

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

    .hero-content {
        position: relative;
        z-index: 9;

        @include breakpoint (max-sm){
           text-align: center;
           margin: 0 auto;
        }

        h5 {
            margin-bottom: 15px;
            color: $theme-color;
            font-family: 'Pangolin';
            font-weight: 500;
            position: relative;
            display: inline-block;
        }

        h1 {
            margin-bottom: 20px;

            span {
                color: $theme-color;
            }

            @include breakpoint (max-xxl){
                font-size: 60px;
            }

            @include breakpoint (max-xl){
                font-size: 56px;
            }

            @include breakpoint (max-md){
                font-size: 42px;
            }

            @include breakpoint (max-sm){
                font-size: 34px;
            }
        }

        p {
            font-size: 20px;

            @include breakpoint (max-md){
                font-size: 18px;
            }

            @include breakpoint (max-sm){
                font-size: 16px;
            }
        }

        .hero-button {
            @include flex;
            gap: 30px;
            margin-top: 50px;

            @include breakpoint (max-md){
                margin-top: 40px;
            }

            @include breakpoint (max-sm){
                margin-top: 25px;
                justify-content: center;
                flex-wrap: wrap;
                gap: 20px;
            }

            .video-btn {
                background-color: $theme-color;
                color: $white;
                display: inline-block;
                font-size: 16px;
                height: 50px;
                width: 50px;
                line-height: 50px;
                border-radius: 50%;
                text-align: center;
                position: relative;

                &::before {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    right: 0;
                    bottom: 0;
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    border: 1px solid $theme-color;
                    content: "";
                    transform: translate(-50%,-50%);
                }
            }

            .button-text {
                span {
                    font-size: 16px;
                    color: $header-color;
                    font-weight: bold;
                }
            }
        }
    }

    .hero-image-area {
        position: relative;

        .hero-image {
            max-width: 555px;
            position: relative;
            z-index: 1;
            margin-bottom: -30px;

            img {
                @include imgw;
            }
        }

        .hero-bg {
            position: absolute;
            bottom: 0;
            left: 0;

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