.hero-container {
    /*background: linear-gradient( 0deg, rgba(232, 220, 5, 0.22) 0%, rgba(232, 220, 5, 0) 107.13% );
    background-image:url("/images/uaha-yellow-gradient.png");
    background-repeat: repeat-x;
    background-size: auto 100%;*/
    /*height: 100%;*/
    margin-top: 7rem;   
}

#heroDesktopSVG,
#heroTabletSVG {
    display: none;
}

#heroMobileSVG,
#heroDesktopSVG,
#heroTabletSVG {
    width: 100%;
    height: auto;
}

.hero-row {
    position: relative;
}

#heroCaptionDesktop {
    display: none;
}

.hero-caption {
    position: absolute;
    width: 100%;
    color: #304a21;
    font-family: Akshar;
    font-size: 3.7385rem;
    font-style: normal;
    font-weight: 600;
    line-height: 5rem; /* 108.333% */
    text-transform: uppercase;
    top: 2rem;
    text-align: center;
}

.getStartedButton-Hero {
    
    width: 17rem;
    height: 5rem;
    flex-shrink: 0;
    border-radius: 24.189px;
    padding-top: 1.1rem;
    background: #038406;    
    color: #fff;
    text-align: center;
    font-family: Akshar;
    font-size: 2rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

#hero-button-row {
    position: absolute;
    bottom: 7rem;
}

#hero-button-row div {
    margin-left: auto;
    margin-right: auto;
}


/* media queries */
@media (min-width: 480px) {
    .hero-caption {
        font-size: 4rem;
    }
}

@media (min-width: 576px) {
    .hero-caption {
        font-size: 4.5rem;
    }

    #hero-button-row {       
        bottom: 12rem;
    }
}

@media (min-width: 768px) {

    #heroMobileSVG {
        display: none;
    }

    #heroTabletSVG {
        display: block;
    }

    #hero-button-row {
        bottom: 10rem;
    }
}


/* @media (min-width: 768px) and (max-height: 450px) {

} */

@media (min-width: 992px) {
    .hero-caption {
        font-size: 5.5rem;
        line-height: 6.5rem;
    }
}

@media (min-width: 1200px) {
    #heroTabletSVG {
        display: none;
    }

    #heroDesktopSVG {
        display: block;
    }

    #heroCaptionMobile {
        display: none;
    }

    #heroCaptionDesktop {
        display: block;
    }

    .hero-container {        
        background-image: url("/images/uaha-yellow-gradient.png");
        background-repeat: repeat-x;
        background-size: auto 100%;        
    }

    .hero-caption-row {
        margin-bottom: 3rem;
    }

    .hero-caption {
        text-align: left;
        font-size: 6rem;
        line-height: 7rem;
        top: 18rem;
    }

    #hero-button-row {
        display: none;
    }

    .heroGetStartedButton {
        position: relative;        
    }
}

@media (min-width: 1400px) {

    .hero-caption {        
        font-size: 6rem;
        line-height: 7rem;
        top: 25rem;
    }
    

    
}

@media (min-width: 1600px) {

    .hero-caption {        
        font-size: 7rem;
        line-height: 8rem;       
    }


    .heroGetStartedButton {
        position: relative;
        right: 0;
    }
}