@keyframes slideDown {
    0% {
        transform: translateY(-20%);
        opacity: 0;
    }
    100% {
        animation-name: slideDown;
        animation-duration: 1.7s;
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-delay: 1s;
        animation-iteration-count: 1s;
        animation-direction: normal;
        animation-fill-mode: forwards;
        animation-play-state: running;
        transform: translateY(-0%);
        
    }
}


.hero {
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__content {
    flex-direction: column-reverse;
}

.hero__container.start{
    animation: slideDown 1.7s cubic-bezier(.165,.84,.44,1) forwards;
    opacity: 1;
}

.hero__container {
    opacity: 0;
    flex-direction: row;
    width: 100%;
    display: flex;
    padding-top: 32px;
    transition: transform 1s ease, opacity 1s ease;
}

.block-editor-block-list__block.hero__container {
    opacity: 1;
}

.hero__box {
    margin-top: -17px;
    padding: 5px;
    width: 5%;
}
.hero__heading {
    width: 95%;
    margin-top: 0 !important;
}

.hero__heading--white {
    color: var(--wp--preset--color--white-text);
}

.hero .wp-block-buttons {
    gap: 16px;
    padding: 24px 0;
}

.hero .wp-block-buttons .wp-block-button,
.hero .wp-block-buttons .wp-block-button a {
    width: 100%;
}

.hero--green {

    .hero__heading  {
        margin-bottom: 24px !important;
    }

    .hero__text {
        .wp-block-button {
            width: fit-content !important;
        }
    }

    .hero__content {
        p {
            padding-left: 24px;
            margin-top: 0 !important;
            margin-bottom: 32px !important;
        }
    }


}


@media only screen and (max-width: 576px) {

    .hero--green {

        .wp-block-button__link {
            padding-left: 6px;
            padding-right: 6px;
        }
    }
}

@media only screen and (min-width: 768px) {
    .hero--green {

        .hero__content {
            p {
                padding-left: 36px;
            }
        }
    }
}

@media only screen and (min-width: 1200px) {
    .hero{
        padding-top: 90px;
        height: 100vh;
    }

    figure.hero__content-img.block-editor-block-list__block {
        width: 45%;

        & > div {
            width: 100% !important;
        }
    }

    .hero__text{
        width: 60%;
    }
    
    .hero__feature-img {
        width: 45%;

        img {
            border-radius: 28px;
        }
    }
    
    .hero__content {
        /* height: 85vh; */
        height: 100%;
        flex-direction: row;
        width: 87vw;
    }

    .hero__box{
        display: flex;
        align-items: start !important;
        justify-content: center !important;
        width: 20px;
        margin-top: 1vh;
    }

    .hero__box img{
        width: 40%;
        
    }

    .hero__heading {
        width: 90%;
    }

    .hero__content .wp-block-image{
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .hero__content .wp-block-image img{
        width: 80%;
    }

    .hero--green {
        .hero__content {
            p {
                padding-left: 48px;
            }
        }

        .is-style-outline {
            a:hover {
                background-color: #558b38 !important;
            }
        }

        .wp-block-button__link:hover {
            background-color: #558b38;
        }

    }

    .hero .wp-block-buttons {
        padding-top: 0;
        padding-left: 40px;
    }
    
}

@media only screen and (min-width: 1400px) {
    .hero .wp-block-buttons {
        .wp-block-button {
            width: fit-content;
        }
    }
}

@media only screen and (min-width: 1500px) {
    .hero{
        height: 100vh;
    }

    .hero .wp-block-buttons {
        gap: 24px;
        padding-left: 56px;
    }

    .hero__text{
        margin-left: -3vw !important;
        width: 60% !important;
    }
    .hero__box img{
        width: 50% !important;
    }
    .hero__box{
        width: 8%;
        padding-top: 1vh;
    }
    .hero__content .wp-block-image{
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .hero__content .wp-block-image img{
        width: 100%;
    }

    .hero--green {
    
        .hero__content {
            p {
                padding-left: 70px;
            }
        }

        .wp-block-buttons {
            .wp-block-button:nth-child(2) {
                width: fit-content;

                a {
                    padding-left: 24px;
                    padding-right: 24px;
                }

            }
        }
    }
    
}
@media only screen and (min-width: 1800px) {
    .hero__text{
        width: 60%;
    }
    .hero__box{
        width: 7%;
        padding-top: 9px;
    }
    .hero__box img{
        width: 60%;
    }
    .hero__heading {
        width: 95%;
    }

    .hero .wp-block-buttons {
        padding-left: 64px;
    }

    .hero .wp-block-button{
        width: 270px !important;
    }

    .hero--green {

        .hero__heading {
            margin-bottom: 32px;
        }

        .hero__content {
            p {
                margin-bottom: 40px !important;
            }
        }
    
        .wp-block-buttons {
            .wp-block-button:nth-child(2) {
                width: fit-content !important;
                
                a {
                    padding-left: 24px;
                    padding-right: 24px;
                }

            }
        }
    }
    
}