.contactContainer { display: flex; flex-direction: column; margin-top: 20px; margin-left: auto; margin-right: auto; height: 600px; } .contactInner { display: flex; flex-direction: row; height: 350px; width: 100%; margin-top: 15px; background-color: #f5fcfc; } .contactLeftColumn { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%; height: 350px; border-radius: 40px 0px 40px 0px; border: 1px solid #1093ff; } .contactRightColumn { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 350px; width: 50%; border-radius: 40px 0px 40px 0px; border: 1px solid #2196f3; } .contact-link { font-size: 1rem; letter-spacing: 0.2rem; color: #fff; text-decoration: none; padding-right: 5px; } .contact-link-two { font-size: 0.95rem; letter-spacing: 0.3rem; color: #fff; text-decoration: none; padding-right: 25px; } .contact-link-twotwo { font-size: 0.95rem; letter-spacing: 0.92rem; color: #fff; text-decoration: none; padding-right: 25px; } .contactLinkThree { letter-spacing: 1rem; text-decoration: none; } .contactLinkFour { letter-spacing: 1rem; text-decoration: none; color: black; } .contactLinkFive { font-size: 0.95rem; letter-spacing: 0.45rem; color: #acacac; text-decoration: none; margin-left: 10px; padding-left: 35px; } .contactLinkSix { font-size: 0.95rem; letter-spacing: 0.1rem; color: #fff; text-decoration: none; } .contact-info-box { display: flex; flex-direction: column; justify-content: space-around; width: 60%; height: 80%; } .contact-detail-one { display: flex; flex-direction: row-reverse; height: 38px; margin: 12px 0px; background-color: rgb(56, 56, 233); } .contact-detail-two { display: flex; flex-direction: row-reverse; height: 38px; margin: 12px 0px; background-color: hsl(17, 100%, 61%); letter-spacing: 0.2rem; } .contact-detail-twotwo { display: flex; flex-direction: row-reverse; height: 38px; margin: 12px 0px; padding-right: 18px; background-color: hsl(17, 100%, 61%); } .contact-detail-three { display: flex; flex-direction: row-reverse; height: 40px; margin: 12px 0px; background-color: rgb(93, 206, 255); letter-spacing: 0.5rem; } .contact-detail-threethree { display: flex; flex-direction: row-reverse; height: 40px; margin: 12px 0px; background-color: rgb(93, 206, 255); letter-spacing: 0.5rem; } .contactDetailFour { width: 40%; background-color: orange; color: #000; } .contactDetailFive { display: flex; flex-direction: column; width: 100%; background-color: yellow; letter-spacing: 0.6rem; justify-content: center; align-items: center; width: 70%; } .contactDetailSix { background-color: #acacac; display: flex; flex-direction: column; align-items: flex-end; } .imgBox { display: flex; flex-direction: row; width: 100%; height: 100%; } .imgBoxOne { display: flex; width: 30%; } .imgBoxTwo { display: flex; width: 30%; } .imgBoxThree { display: flex; align-items: center; width: 40%; } .threeInner { display: flex; margin-left: 5px; height: 300px; width: 130px; border-radius: 0px; overflow: hidden; opacity: 0.7; background: linear-gradient(to left, rgba(245, 246, 252, 0.52), cyan); } @media only screen and (max-width: 430px) { .contactInner { display: flex; flex-direction: column; } .contactLeftColumn { width: 100%; } .contactRightColumn { width: 100%; height: 500px; margin-top: 25px; } .contactInfoBox { height: 400px; } .contactDetailTwo { align-items: flex-end; } .contactDetailThree { align-items: center; } .nav-link-three { color: black; letter-spacing: 1rem; text-decoration: none; letter-spacing: 1.2rem; padding-right: 20px; } .nav-link-threthree { color: black; letter-spacing: 1rem; text-decoration: none; padding-right: 24px; } .contact-linklink { font-size: 1rem; letter-spacing: 0.6rem; color: #fff; text-decoration: none; padding-right: 16px; } }