#hero-section {
    --hero-primary-color: #f6fcf0;
    --hero-before-color: #e6f5cd;
    --hero-after-color: #e6f5cd;
    background: var(--hero-primary-color) !important;
    position: relative;
    overflow: hidden;
    margin-bottom: -2rem;
    padding-bottom: 4rem;
}

    #hero-section:before {
        content: "";
        height: 860px;
        width: 860px;
        display: block;
        border-radius: 50%;
        position: absolute;
        bottom: -765px;
        background-repeat: no-repeat;
        background: linear-gradient(251deg, rgba(255, 255, 255, 1) 0%, var(--hero-before-color) 100%);
        left: -504px;
    }

    #hero-section:after {
        content: "";
        height: 860px;
        width: 860px;
        display: block;
        border-radius: 50%;
        position: absolute;
        top: -535px;
        background-repeat: no-repeat;
        background: linear-gradient(-59deg, rgba(255, 255, 255, 1) 0%, var(--hero-after-color) 100%);
        right: -519px;
    }

    #hero-section .container {
        position: relative;
        z-index: 1;
    }

    #hero-section .hero-content {
        width: 100%;
        text-align: center;
    }

        #hero-section .hero-content h1 {
            font-size: 34px !important;
            line-height: 42px !important;
            font-weight: 900 !important;
        }

            #hero-section .hero-content h1 sup {
                font-size: 17px !important;
                top: -13px !important;
            }

        #hero-section .hero-content h3 {
            font-size: 24px !important;
            line-height: 34px !important;
            font-weight: 400 !important;
        }

            #hero-section .hero-content h3 a {
                color: #333740;
            }

            #hero-section .hero-content h3 .green-text {
                font-weight: 700 !important;
            }

@media (min-width: 768px) {
    #hero-section {
        margin-bottom: 8rem;
        padding-bottom: 2rem;
    }

        #hero-section .hero-content h1 {
            font-size: 58px !important;
            line-height: 64px !important;
        }

            #hero-section .hero-content h1 sup {
                font-size: 26px !important;
                top: -22px !important;
            }

        #hero-section .hero-content h3 {
            font-size: 22px !important;
            line-height: 30px !important;
        }

        #hero-section:before {
            content: "";
            height: 860px;
            width: 860px;
            display: block;
            border-radius: 50%;
            position: absolute;
            bottom: -552px;
            background-repeat: no-repeat;
            background: linear-gradient(251deg, rgba(255, 255, 255, 1) 0%, var(--hero-before-color) 100%);
            left: -529px;
        }

        #hero-section:after {
            content: "";
            height: 860px;
            width: 860px;
            display: block;
            border-radius: 50%;
            position: absolute;
            top: -308px;
            background-repeat: no-repeat;
            background: linear-gradient(-59deg, rgba(255, 255, 255, 1) 0%, var(--hero-after-color) 100%);
            right: -529px;
        }
}

@media (min-width: 992px) {
    #hero-section {
        margin-bottom: -2rem;
        padding-bottom: 18rem;
    }

        #hero-section:before {
            content: "";
            height: 860px;
            width: 860px;
            display: block;
            border-radius: 50%;
            position: absolute;
            bottom: -622px;
            background-repeat: no-repeat;
            background: linear-gradient(251deg, rgba(255, 255, 255, 1) 0%, var(--hero-before-color) 100%);
            left: -563px;
        }

        #hero-section:after {
            content: "";
            height: 860px;
            width: 860px;
            display: block;
            border-radius: 50%;
            position: absolute;
            top: -461px;
            background-repeat: no-repeat;
            background: linear-gradient(-59deg, rgba(255, 255, 255, 1) 0%, var(--hero-after-color) 100%);
            right: -496px;
        }
}

@media (min-width: 1400px) {
    #hero-section {
        margin-bottom: -8rem;
        padding-bottom: 26rem;
    }

        #hero-section:before {
            content: "";
            height: 860px;
            width: 860px;
            display: block;
            border-radius: 50%;
            position: absolute;
            bottom: -614px;
            background-repeat: no-repeat;
            background: linear-gradient(251deg, rgba(255, 255, 255, 1) 0%, var(--hero-before-color) 100%);
            left: -240px;
        }

        #hero-section:after {
            content: "";
            height: 860px;
            width: 860px;
            display: block;
            border-radius: 50%;
            position: absolute;
            top: -287px;
            background-repeat: no-repeat;
            background: linear-gradient(-59deg, rgba(255, 255, 255, 1) 0%, var(--hero-after-color) 100%);
            right: -376px;
        }
}