.contact-hero{
    min-height: 50vh;
    background: url('../Images/Landing-pages/contact-us-kingdom-lancing.webp') no-repeat center center/cover;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 2em 15%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    z-index: 1;
    background-color: rgba(38, 53, 65, 0.5);
}

.card{
    flex: 1 1 250px;
    justify-content: space-between;
    background: #fff;
    color: var(--text-color);
    text-align: left;
    border-radius: 10px;
    padding: 40px 30px;
    transition: var(--ve-trans);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.icon-box{
    width: 30px;
    height: 30px;
}

.icon-box i{
    font-size: 1rem
}

.form{
    max-width: 900px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
    margin: 5em auto;
    padding : 3em 2em;
}

.form-group{
    margin-top: 2em;
}

.form-group:not(:first-child){
    min-width: 400px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
}

.form-group legend{
    color: var(--text-color);
    font-size: 1.2rem;
    font-family: Lilita One, sans-serif;
    text-transform: capitalize;
    margin-bottom: 1em;
    letter-spacing: 0.03em;
}

.form-group div label{
    color: var(--text-color);
}

.form-group div input::placeholder{
    color: var(--text-color);
    opacity: 0.3;
}

.form-check{
    margin-left: 1.5em;
}

.form-check label{
    text-transform: capitalize;
}
textarea.form-control{
    margin-top: 2em;
    color: var(--text-color);
    border: 1px solid #86868640;
    border-radius: 10px;
    padding: 1em;
}

textarea.form-control::placeholder{
    color: var(--text-color);
    opacity: 0.3;
}

.submit-btn{
    margin-top: 2em;
}