.hero {
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/img/2.jpg);
}

.form-container {
   max-width: 1180px;
   margin: auto;
   padding: 3rem 1rem;
   display: flex;
   justify-content: center;
}

.form-container .form {
   max-width: 600px;
   width: 100%;
   padding: 2rem;
   box-shadow: var(--box-shadow);
   border-radius: 10px;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   align-items: center;
}

.form-container .form div {
   max-width: 400px;
   width: 100%;
}

.form-container .form label {
   text-transform: capitalize;
}

.form-container .form input {
   margin-top: 10px;
   width: 100%;
   padding: .3rem .7rem;
   border-radius: 5px;
}

.form-container .form button {
   background-color: var(--primary-color);
   border: none;
   padding: .8rem 1.6rem;
   border-radius: 40px;
   margin: 20px 0;
   font-weight: 600;
   transition: all ease-in-out .2s;
   border: 2px solid transparent;
}

.form-container .form button:hover {
   background-color: transparent;
   color: var(--primary-color);
   border: 2px solid var(--primary-color);
}