.primary-hero {
    position: relative;
    overflow: hidden
}

.primary-hero--container {
    position: relative
}

.primary-hero--container .left-tree {
    position: absolute;
    height: clamp(140px, 24vw, 350px);
    left: -20px;
    bottom: clamp(0px, calc((1440px - 100vw) * 0.069), 60px)
}

.primary-hero--container .right-tree {
    position: absolute;
    height: clamp(70px, 24vw, 260px);
    left: clamp(0px, 4vw, 60px);
    bottom: clamp(0px, calc((1440px - 100vw) * 0.069), 80px)
}

@media screen and (min-width: 1280px) {
    .primary-hero--container .right-tree {
        bottom: clamp(80px, calc((1440px - 100vw) * 0.069), 80px)
    }
}

.primary-hero--container .right-right-tree {
    position: absolute;
    height: clamp(120px, 24vw, 220px);
    right: clamp(0px, 25vw, 360px);
    bottom: clamp(0px, calc((1440px - 100vw) * 0.069), 50px)
}

.primary-hero--container .build {
    position: absolute;
    height: clamp(145px, 40.28vw, 288px);
    max-height: 146px;
    bottom: clamp(20px, calc((1440px - 100vw) * 0.069), 40px);
    right: -60px
}

@media screen and (min-width: 768px) {
    .primary-hero--container .build {
        max-height: unset
    }
}

.primary-hero--container .left-cloud,
.primary-hero--container .right-cloud {
    display: none;
}

@media screen and (min-width: 768px) {
    .primary-hero--container .left-cloud {
        display: block;
        position: absolute;
        height: clamp(80px, 10.55vw, 150px);
        top: 36px;
        left: 0
    }

    .primary-hero--container .right-cloud {
        display: block;
        position: absolute;
        height: clamp(100px, 13.8vw, 200px);
        top: 40px;
        right: 0
    }
}

.primary-hero--container .sun {
    display: none;
}

@media screen and (min-width: 768px) {
    .primary-hero--container .sun {
        display: block;
        width: clamp(0px, 22.22vw, 136px);
        height: clamp(0px, 22.22vw, 136px);
        -webkit-filter: drop-shadow(4px 4px 19.8px rgba(0, 0, 0, 0.25));
        filter: drop-shadow(4px 4px 19.8px rgba(0, 0, 0, 0.25));
        background: #FFC83B;
        position: absolute;
        left: 0;
        top: 60px;
        border-radius: 50%;
        z-index: -1;
        -webkit-animation: sun-move 20s linear forwards;
        animation: sun-move 20s linear forwards
    }
}

.primary-hero--content {
    position: relative;
    z-index: 9;
    padding: 48px 16px 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    max-width: 632px;
    margin-inline: auto;
    z-index: 1
}

@media screen and (min-width: 664px) {
    .primary-hero--content {
        padding: 48px 0px 260px
    }
}

@media screen and (min-width: 992px) {
    .primary-hero--content {
        padding: 48px 0px 200px
    }
}


@media screen and (min-width: 1441px) {
    .primary-hero--content {
        gap: 32px;
        padding: clamp(60px, 6.33vw, 300px) 0 clamp(260px, 18.05vw, 600px)
    }
}

.primary-hero--content .buttons {
    display: flex;
    flex-direction: column;
    gap: 12px
}

@media screen and (min-width: 992px) {
    .primary-hero--content .buttons {
        flex-direction: row;
        align-items: center;
        gap: 24px;
        justify-content: center
    }
}

.primary-hero .grass {
    position: absolute;
    bottom: 0;
    left: 0;
    height: clamp(100px, 6.94vw, 120px);
    width: 100%;
    -webkit-mask: url("../images/grass.svg") no-repeat center top;
    mask: url("../images/grass.svg") no-repeat center top;
    -webkit-mask-size: cover;
    mask-size: cover;
    background: url("../images/noise.jpeg"), linear-gradient(180deg, #00814f 0%, #bce602 100%);
    background-blend-mode: multiply
}

.primary-hero svg {
    position: absolute;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    bottom: 0;
    width: 2560px
}

.primary-hero #lottie {
    width: clamp(100px, 33.33vw, 236px);
    height: 200px;
    position: absolute;
    left: 0;
    bottom: 0
}

@-webkit-keyframes sun-move {
    0% {
        transform: translate(0)
    }

    100% {
        transform: translate(200px, -20px)
    }
}

@keyframes sun-move {
    0% {
        transform: translate(0)
    }

    100% {
        transform: translate(200px, -20px)
    }
}