/* Contact Us */ 
#contact-us {
    width: 100%;
    display: flex;
    padding-top: 20vh;
    position: relative;
}

#contact-us .focus {
    position: relative;
    padding: 3rem 7rem;
}

#contact-us .focus .green-star {
    position: absolute;
    bottom: -35%;
    right: 15%;
    z-index: -1;
}

#contact-us .focus .green-star__horizontal {
    position: absolute;
    right: 30%;
    top: 2.5%;
    transform: scale(0.95);
}

#contact-us .focus h2 {
    font-family: 'Anton';
    font-size: 5.25rem;
    line-height: 5.25rem;
    text-transform: uppercase;
    color: var(--black);
}

#contact-us .focus p {
    color: var(--black);
    font-size: 1.85rem;
    font-weight: 700;
    padding-top: 1.5rem;
}

#contact-us .focus p span {
    border: 1px solid black;
    border-radius: 3rem;
    padding: 0.125rem 1.15rem;
    padding-top: 0;
    margin-left: 0.5rem;
    background-color: #ffffff;
}

#contact-us .focus a {
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 800;
    border: 1px solid black;
    border-radius: 3rem;
    padding: 0.5rem 4rem;
    margin-top: 0.75rem;
    color: #212529;
    color: rgb(19 19 19);
    background-color: var(--green);
    box-shadow: 0px 15px 10px -15px #111;
    transition: all 0.7s ease;
}

#contact-us .focus a:hover {
    transform: scale(1.07);
}

#contact-us form {
    width: 100%;
    padding-left: 0rem;
    padding-right: 4rem;
    position: relative;
}

#contact-us input:-webkit-autofill,
#contact-us input:-webkit-autofill:hover, 
#contact-us input:-webkit-autofill:focus, 
#contact-us input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px var(--green) inset !important;
}

#contact-us form input, 
#contact-us form textarea {
    width: 100%;
    margin-bottom: 0.5rem;
    line-height: 2.2rem;
    background-color: var(--green);
    border: 0;
    padding-left: 1rem;
    border: 1px solid var(--dark-grey);
    border-radius: 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
}

#contact-us form textarea {
    border-radius: 1.5rem;
}

#contact-us form input::placeholder,
#contact-us form textarea::placeholder {
    color: #000000;
    font-weight: 700;
    font-size: 0.9rem;
}

#contact-us form button {
    position: absolute;
    bottom: 0;
    right: 4rem;
    padding: 0.5rem 0.7rem;
    border: 0;
    border-radius: 0.3rem;
    background-color: var(--black);
    color: #ffffff;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.7s ease;
    z-index: 1;
}

#contact-us form button:hover {
    color: var(--green);
}

#successMessage {
    padding: 3rem;
}

#successMessage h2 {
    font-family: 'Anton';
    font-size: 4rem;
    line-height: 4.5rem;
    text-transform: uppercase;
    color: var(--black);
    padding: 0 2rem;
}

#successMessage h3 {
    padding-top: 2rem;
}

#successMessage i {
    padding-top: 2rem;
    font-size: 3.5rem;
    color: var(--green);
}

/* Footer */
footer {
    margin-top: 2rem;
}


/* Mobile and smaller screen devices */
@media screen and (max-width:1700px) {
    #contact-us .focus {
        padding: 3rem 2rem 3rem 6rem;
    }
}

@media screen and (max-width: 1500px) {
    #contact-us .focus {
        padding: 2rem 1rem 3rem 4rem;
    }
    
    #contact-us .focus p {
        font-size: 1.65rem;
    }
    
    #contact-us .focus .green-star__horizontal {
        right: 20%;
        top: 0%;
    }

    #contact-us form input, 
    #contact-us form textarea {
        line-height: 2rem;
    }
}

@media screen and (max-width: 1399px) {
    /* Form */
    #contact-us {
        padding-top: 17vh;
    }
    
    #contact-us .focus {
        transform: scale(0.9);
        padding: 3rem 1rem 3rem 6rem;
    }

    #contact-us .focus p {
        font-size: 1.25rem;
    }

    #contact-us .focus .green-star {
        right: 20%;
        transform: scale(0.85);
        bottom: -15.5rem;
    }

    #contact-us .focus .green-star__horizontal {
        right: 15%;
        transform: scale(0.85);
        top: 3%;
    }
}

@media screen and (max-width: 1200px) {
    /* Focus */
    #contact-us .focus {
        padding: 3rem 1rem 3rem 3rem;
    }

    #focus img.green-star__upsidedown {
        right: 5rem;
    }

    #focus img.green-star {
        left: 10vw;
    }

    #contact-us .focus .green-star {
        right: 5%;
    }

    #contact-us .focus .green-star__horizontal {
        right: -5%;
    }

    #contact-us form button {
        bottom: -3rem;
    }

    #successMessage h2 {
        font-size: 3rem;
        line-height: 3.5rem;
    }
}

@media screen and (max-width: 991px) {
    /* Form */
    #contact-us {
        flex-direction: column;
        padding-top: 12vh;
    }

    #contact-us h2 {
        text-transform: uppercase;
        text-align: center;
        font-size: 3rem;
        font-weight: 700;
        font-family: 'Anton';
        letter-spacing: 0.2rem;
        padding-bottom: 1rem;
    }

    #contact-us form {
        padding-left: 4rem;
    }

    #contact-us form button {
        bottom: 0;
    }
}

@media screen and (max-width: 576px) {
    /* Form */
    #contact-us form {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #contact-us form button {
        right: 20%;
        bottom: -3rem;
    }

    #successMessage {
        padding: 3rem 1rem 0 1rem;
    }

    #successMessage h2 {
        font-size: 2.5rem;
        line-height: 3rem;
        padding: 0 1rem;
    }
}