

<!--/*=========================== CONTACT-HERO SECTION ============================*/-->

.contact-hero__container{
    background: var(--color-shady_white);
    height: fit-content;
    padding: 2rem 0;

}

.contact-hero__wrapper{
    height: var(--container-width-small);
    width: var(--container-width-large);
    padding: 1rem 0;

}

.contact-hero__content{
    display: grid;
    grid-template-columns: 45% 1fr;
    justify-items: center;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0;

}

.contact-box__content-box{
    background-color: rgba(0, 0, 0, 0.24);
    /*background-image: linear-gradient(to right, var(--color-shady_white), var(--color-lighter_gray), var(--color-pure-white-primary-bg));*/
    height: var(--container-full);
    width: var(--container-full);

    border-radius: 1rem;
    box-shadow: 0 0 0.4rem var(--color-black-secondary-bg);

    display: flex;
    justify-content: center;
    align-content: center;
    padding: 1rem;
}

.contact-form__container{
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    max-width: 50rem;
}

.contact-form{
    height: var(--container-full);
    width: var(--container-full);

    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
}

.form-input-box{
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.form-input-box label{
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-tint_gray);
}

.contact-form__input-field{
    font-size: 1.4rem;
    padding: 1rem;
    border-radius: 1rem;
    width: var(--container-full);
    box-shadow: 0 0 0.5rem var(--color-black-secondary-bg);

}

textarea{
    display: flex;
    padding: 0;
    content: '';
    font-size: 4rem;
    max-height: 20rem;
    max-width: 44rem;

}

.contact-form__department-list{
    transition: var(--transition);
    width: var(--container-full);
}

.contact-form__department-list option{
    background: var(--color-light_gray);
    color: var(--color-pure-white-primary-bg);
    margin: 1rem;
    font-size: 1.2rem;
}

.contact-form__submit-btn{
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.form__submit-btn-icon{
    font-size: 2rem;
    font-weight: 600;
}

.contact-details__container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.contact-detail-box{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    color: var(--color-dark_gray);
    font-size: 1.4rem;
}

.contact-company-logo-box{
    background-color: var(--color-black-secondary-bg);
    height: 11rem;
    width: 11rem;
    border-radius: 50rem;
    margin-bottom: 1.4rem;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-company-logo{
    height: 10rem;
    width: 10rem;
}

.b-academy-logo{
    margin-top: 2rem;
    height: 12.5rem;
    width: 12.5rem;
}

.a-logo{
    height: 8rem;
    width: 8rem;
}

.title{
    font-size: 1.6rem;
    text-align: center;
    font-style: italic;
    margin-bottom: 1rem;

}

.details li a:link,
.details li a:visited{
    color: var(--color-tint_gray);
    transition: var(--transition);
}

.details li a:hover,
.details li a:active{
    color: var(--color-black-secondary-bg);
}

.contact-map-box{
    height: var(--container-full);
    width: var(--container-full);
}

.contact-map{
    height: var(--container-full);
    width: var(--container-full);
}