.hero{
    margin-top: 2.5rem;    
    margin-bottom: 3.5rem;
}

h1{
    font-size: 3.2rem;
    font-weight: 600;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(45deg, #5d7253 0%, #5ab32e 100%);
    line-height: 1.5;
}

.general-instructions ul{
    list-style: none;
    line-height: 1.7rem;
    font-size: 1.0rem;
    font-weight: 400;
    background-color: var(--white);
    /* border:1px solid #ccc; */
    box-shadow: var(--box-shadow);
    border-radius: 5px;
    padding:40px 40px;
}

.general-instructions ul li:not(:last-child){
    margin-bottom: 1.25rem;
}

.general-instructions .form-link{
    text-decoration: none;
    border:1px solid #5ab32e;
    border-radius: 5px;
    background-color: #5ab32e;
    color: white;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 150px;
    text-align: center;
    margin-top: 40px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 0.087rem;
}

.general-instructions .form-link:hover{
    transform: translateY(-2px); /* Slide up */
}

/* Extra Large devices (large desktops, < 1400px) */
@media only screen and (max-width: 1399.98px) {
    .hero{

    }
}

/* Large devices (desktops, < 1200px) */
@media only screen and (max-width: 1199.98px) {
    h1{
        font-size: 3.3rem;
        line-height: 1.5;
    }
}

/* Medium devices (tablets, < 992px) */
@media only screen and (max-width: 991.98px) {
    h1{
        font-size: 2.5rem;
        line-height: 1.2;
    }
}

/* Small devices (landscape phones, < 768px) */
@media only screen and (max-width: 767.98px) {
    h1{
        font-size: 2.3rem;
        line-height: 1.2;
    }
}

/* Extra Small devices (portrait phones, < 576px) */
@media only screen and (max-width: 575.98px) {
    .hero{
        margin-top: 1.9rem;    
        margin-bottom: 2.0rem;
    }
    h1{
        font-size: 1.9rem;
        line-height: 1.2;
    }

    .general-instructions ul{
        line-height: 1.4rem;
        font-size: 0.9rem;
        padding: 15px;
    }
    
    .general-instructions ul li:not(:last-child){
        margin-bottom: 1.0rem;
    }
}

/* Ultra Small (tiny devices, like older phones < 480px) */
@media only screen and (max-width: 479.98px) {
    .hero{
        margin-top: 1.9rem;    
        margin-bottom: 2.0rem;
    }
    h1{
        font-size: 1.5rem;
        line-height: 1.2;
    }

    .general-instructions ul{
        line-height: 1.5rem;
        font-size: 0.8rem;
        padding: 20px;
    }
    
    .general-instructions ul li:not(:last-child){
        margin-bottom: 1.0rem;
    }
}