.hero-banner {
    background: url("../media/hero/hero-bg.webp") no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    overflow: hidden;
    position: relative;
    @include media-query(1025px) {
        padding-bottom: 80px;
    }
    .hero-content {
        padding: clamp(42px, 9.375vw, 268px) clamp(22px, 5vw, 188px);
        position: relative;
        .vec-1 {
            width: clamp(40px, 2.5vw, 84px);
            height: clamp(40px, 2.5vw, 84px);
            position: absolute;
            left: 4.948vw;
            top: 73.001px;
            animation: floatWiggle 4s ease-in-out infinite;
            @include media-query(520px) {
                right: 22%;
                bottom: 19%;
                left: unset;
                top: unset;
            }
        }

        .vec-2 {
            width: clamp(40px, 2.2vw, 84px);
            height: clamp(40px, 2.887vw, 94px);
            position: absolute;
            left: 18.333vw;
            bottom: 166px;
            animation: bounceTwist 6s ease-in-out infinite;

            @include media-query(1025px) {
                display: none;
            }
        }

        .startsvg {
            width: clamp(24px, 1.771vw, 84px);
            height: clamp(24px, 1.771vw, 84px);
        }
    }
    @keyframes floatWiggle {
        0% {
            transform: scale(1) rotate(0deg) translateY(0px);
        }
        30% {
            transform: scale(1.05) rotate(5deg) translateY(-5px);
        }
        60% {
            transform: scale(1.03) rotate(-3deg) translateY(5px);
        }
        100% {
            transform: scale(1) rotate(0deg) translateY(0px);
        }
    }
    @keyframes bounceTwist {
        0% {
            transform: scale(1) rotate(5deg) translateX(0px);
        }
        40% {
            transform: rotate(12deg) translateX(10px);
        }
        70% {
            transform: rotate(-12deg) translateX(-8px);
        }
        100% {
            transform: scale(1) rotate(10deg) translateX(0px);
        }
    }
}

.cloud-bg {
    position: absolute;
    background-image: url(../media/images/cloud-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-repeat: repeat-x;
    width: 100%;
    height: 9.052vw;
    bottom: 0;
    left: 0;
    z-index: 10;
    margin-top: -172px;
    @include media-query(490px) {
        bottom: 0;
        height: 43.052vw;
    }
}
.cloud {
    position: absolute;
    background-image: url(../media/images/cloud.webp);
    background-repeat: repeat-x;
    background-size: cover;
    width: 150%;
    height: 11.773vw;
    z-index: 15;
    @include media-query(933px) {
        height: 23.773vw;
    }
    @include media-query(490px) {
        height: 52.773vw;
    }

    &.cloud1 {
        bottom: -89px;
        left: -11%;    
        z-index: 20;
        -webkit-animation: movingclouds 10s linear infinite;
        -moz-animation: movingclouds 10s linear infinite;
        -o-animation: movingclouds 10s linear infinite;
        -webkit-animation: simple-move 4s 4s linear infinite alternate;
        animation: simple-move 4s 4s linear infinite alternate;
    }

    &.cloud2 {
        bottom: -58px;
        left: -6%;
        background-image: url(../media/images/cloud-2.webp);
        z-index: 30;
        @include media-query(490px) {
            left: -44%;
        }
    }

    &.cloud3 {
        bottom: -60px;
        left: 0;
        -webkit-animation: movingclouds 25s linear infinite;
        -moz-animation: movingclouds 25s linear infinite;
        -o-animation: movingclouds 25s linear infinite;
    }

    &.cloud4 {
        bottom: -33px;
        left: 0;
        background-image: url(../media/images/cloud-2.webp);
        -webkit-animation: movingclouding 60s linear infinite;
        -moz-animation: movingclouding 60s linear infinite;
        -o-animation: movingclouding 60s linear infinite;
    }
}

@keyframes movingclouds {
    0% {
        margin-left: 0%;
    }

    100% {
        margin-left: -100%;
    }
}

@-webkit-keyframes movingclouds {
    0% {
        margin-left: 0%;
    }

    100% {
        margin-left: -100%;
    }
}

@-moz-keyframes movingclouds {
    0% {
        margin-left: 0%;
    }

    100% {
        margin-left: -100%;
    }
}

@keyframes movingcloud {
    0% {
        margin-left: 0%;
    }

    100% {
        margin-left: -100%;
    }
}

@-webkit-keyframes movingcloud {
    0% {
        margin-left: 0%;
    }

    100% {
        margin-left: -100%;
    }
}

@-moz-keyframes movingcloud {
    0% {
        margin-left: 0%;
    }

    100% {
        margin-left: -100%;
    }
}

@keyframes movingclouding {
    0% {
        margin-left: 0%;
    }

    100% {
        margin-left: -100%;
    }
}

@-webkit-keyframes movingclouding {
    0% {
        margin-left: 0%;
    }

    100% {
        margin-left: -100%;
    }
}

@-moz-keyframes movingclouding {
    0% {
        margin-left: 0%;
    }

    100% {
        margin-left: -100%;
    }
}
