#hero-section {
    background: linear-gradient(0deg, #E1422880 0%, #E1422880 100%), url("../img/header.png"), lightgray 50% / cover no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 90px;
    padding-bottom: 90px;
}

@supports (background-image: image-set(url("../img/header.webp") type("image/webp") 1x)) {
    #hero-section {
        background-image: linear-gradient(0deg, #E1422880 0%, #E1422880 100%),
                          image-set(url("../img/header.webp") type("image/webp") 1x, url("../img/header.png") type("image/png") 1x);
    }
}

#hero-section h2 {
    font-size: 48px;
    line-height: 64px;
    font-weight: 800;
}

#hero-section span {
    font-size: 18px;
    line-height: 32px;
    font-weight: 400;
}

#join-us-section {
    padding-top: 30px;
    padding-bottom: 30px;
}

#join-us-section .section-subtitle {
    color: var(--brand-dark-gray);
}

#join-us-section .paragraph {
    font-size: 18px;
    line-height: 32px;
}

#form-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

#form-section form {
    color: #B8B9BA;
    border-radius: 20px;
    padding: 32px;
    background: linear-gradient(225deg, rgba(251, 108, 37, 0.90) 0%, rgba(251, 162, 37, 0.90) 100%);
    box-shadow: 0px 22px 46px -22px rgba(225, 66, 40, 0.58);
    position: relative;
    overflow: hidden;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

#form-section form::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255, 230, 210, 0.35), transparent 60%);
    opacity: 0;
    transition: opacity 0.45s var(--ease-out);
    pointer-events: none;
}

#form-section form:hover {
    transform: translateY(-6px);
    box-shadow: 0px 34px 60px -30px rgba(225, 66, 40, 0.50);
}

#form-section form:hover::after {
    opacity: 1;
}

#form-section form textarea, #form-section form input {
    background-color: #F6F7F9;
    border-color: #F6F7F9;
    box-shadow: none;
    margin-bottom: 16px;
}

#form-section form input:is(:focus, :hover, :active), #form-section form textarea:is(:focus, :hover, :active) {
    background-color: #F6F7F9;
    border-color: var(--brand-orange);
}

#form-section form label {
    color: #B8B9BA;
}

#form-section form label::after {
    background-color: transparent;
}

#form-section form input, #form-section form textarea {
    color: #B8B9BA;
}

#form-section form button {
    margin-top: 16px;
}

#form-section form .button-gradient:is(:focus, :hover, :active) {
    background: linear-gradient(137deg, #E14228 -1.7%, #FBA225 30.00%);
    color: #FFFFFF;
}

#form-section form .success-button {
    background: #06C258;

    color: #FFFFFF;
}

#form-section form .failure-button {
    background: #FF3B2F;
    color: #FFFFFF;
}

@media (max-width: 991px) {   
    #hero-section h2 {
        font-size: 42px;
        line-height: 54px;
    }
}

@media (max-width: 767px) {
    #form-section {
        padding-top: 30px;
        padding-bottom: 90px;
    }
}

@media (max-width: 575px) {
    #hero-section h2 {
        font-size: 36px;
        line-height: 48px;
    }
    #join-us-section img {
        max-width: 70%;
    }
    #form-section img {
        max-width: 70%;
    }
}