.contactUSWrapper { display: flex; flex-direction: column; margin: auto; } .contactUSHeader { background-color: var(--polar); margin: auto; width: 100%; display: flex; padding-top: 3rem; padding-bottom: 3rem; } .contactUSContent { display: flex; align-items: stretch; margin: 3rem auto; justify-content: center; } .contactUSLeft { display: flex; flex-direction: column; padding: 1.5rem; justify-content: start; align-items: start; max-width: 590px; box-sizing: border-box; flex: 1; } .contentTitle { color: var(--steel-blue); font-family: var(--font-family-roboto); font-size: var(--22To32); font-style: normal; font-weight: 800; text-align: left; width: 100%; text-wrap: wrap; } .contactUSFields { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: start; align-items: start; } .lableField { display: flex; flex-direction: column; margin: 0.5rem; min-width: 250px; width: 100%; } .contactUsLabel { display: flex; text-align: left; width: 100%; } .contactUsField { width: 100%; border-radius: 5px; height: auto; padding: 0.25rem; border: 1px solid var(--outer-space); text-align: left; } .combineTwoFields { display: flex; flex-direction: row; justify-content: start; align-items: start; width: 100%; } .lableMsgField { display: flex; flex-direction: column; margin: 0.5rem; width: 100%; } .contactUsMsgField { border-radius: 5px; border: 1px solid var(--outer-space); text-align: left; } .contactUSRight{ display: flex; flex-direction: column; background-image: url('/src/images/ContactUs/ContactUSBackground.jpg'); background-repeat: no-repeat; box-sizing: border-box; flex: 1; padding: 2rem; } .contactUSRightContentTitle { color: var(--zircon); font-family: var(--font-family-roboto); font-size: var(--22To32); font-style: normal; font-weight: 800; text-align: left; width: 100%; text-wrap: wrap; margin-bottom: 3rem; } .contactUSWhiteContentBlock{ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: start; justify-content: start; margin-bottom: 2rem; } .contactUSFlexColumn{ display: flex; flex-direction: column; margin-left: 1rem; } .contactUSSocialMediaImages{ display: flex; width: 100%; flex-direction: row; flex-wrap: nowrap; } @media only screen and (max-width: 849px) { .combineTwoFields { flex-wrap: wrap; } .contactUSRight{ width: 100%;; } .contactUSContent { display: flex; flex-direction: column; } } @media only screen and (min-width: 850px){ .combineTwoFields { flex-wrap: nowrap; } .contactUSRight{ max-width: 315px; } .contactUSContent { display: flex; flex-direction: row; flex-wrap: nowrap; } }