.hero-section {
    background-color: #faf5ee;
    /*background-image: url("../images/hero-section-queries/hero-section-bg-9-1280-592.png");*/
    background-size: cover;
    /*background-attachment: fixed;*/
    /*background-position: center;*/
    padding: 4.8rem 4.8rem 9.6rem 4.8rem;

    /*Make the hero image effect hidden when overflowing hero-section while absolutely positioned*/
    position: relative;
    overflow: hidden;

}

.hero {
    max-width: 130rem;
    /*margin: 0 auto;*/
    margin: 0 auto;
    padding: 0 1.2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4.8rem;
    align-items: center;

}

.hero-description {
    font-size: 2rem;
    font-weight: 400;
    color: #868e96;
    line-height: 1.6;
    margin-bottom: 3.2rem;
}

.hero-img {
    width: 100%;
    height: auto;
}

/*Hero Image Effects*/

/*FLOWERS*/
.hero-flower-effect-1 {
    height: 75%;
    position: absolute;
    top: 26rem;
    left: -12rem;

    animation: animateFlowerLeft 2s ease-out;
}

.hero-flower-effect-2 {
    height: 80%;
    position: absolute;
    top: 27.5rem;
    right: -15rem;
    z-index: 1;

    animation: animateFlowerRight 2s ease-out;
}

/*SPARKLES*/

.hero-sparkle-effect-1 {
    height: 50%;
    position: absolute;
    top: 6.4rem;
    left: -8.7rem;
}

.hero-sparkle-effect-2 {
    height: 50%;
    position: absolute;
    bottom: -11.5rem;
    left: 20rem;
}

.hero-sparkle-effect-3 {
    height: 50%;
    position: absolute;
    top: 14.5rem;
    right: -6.7rem;
}

.hero-sparkle-effect-4 {
    height: 50%;
    position: absolute;
    bottom: -11.5rem;
    right: 20rem;
}

/*Only shows on mobile view*/
.hero-mobile-border-effect-1 {
    display: none;
}

.hero-mobile-border-effect-2 {
    display: none;
}

.hero-mobile-border-effect-1 {
    display: none;
    height: 50%;
    position: absolute;
}

.hero-mobile-border-effect-2 {
    display: none;
    height: 50%;
    position: absolute;
}


@keyframes animateFlowerLeft {

    0% {
        opacity: 0;
        transform: translateX(-10rem);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes animateFlowerRight {

    0% {
        opacity: 0;
        transform: translateX(10rem);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}