section {
    display: flex;
    justify-content: center;
    align-items: center;
}

section#form {
    height: 110vh;
}

.bg-image {
    position: relative;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('/assets/images/contact\ us\ banner.png');
    height: 110vh;
}

#title {
    position: absolute;
    top: 20%;
    left: 0;
    margin-left: 30px;
}

#desc {
    width: 70%;
    position: absolute;
    top: 30%;
    left: 0;
    margin-left: 30px;
}

#email {
    position: absolute;
    top: 45%;
    left: 0;
    margin-left: 15px;
}

#phone {
    position: absolute;
    top: 51%;
    left: 0;
    margin-left: 15px;
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    section#form {
        height: 200vh;
    }

    .bg-image {
        background-size: cover;
        background-position: center;
        background-image: url('/assets/images/mobile\ visuals/contact\ us.png');
        height: 110vh;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* XX-Large devices (larger desktops) */
/* No media query since the xxl breakpoint has no upper bound on its width */