/*====================================================* HOME CONTACT SECTION *====================================================*/ .home-contact { width: 100%; background: #e4eee3; padding: 90px 0 50px; box-sizing: border-box; overflow: hidden; } /*====================================================* CONTACT CONTAINER ====================================================*/ .home-contact-container { width: 90%; max-width: 1400px; margin: 0 auto; padding-left: 35px; display: grid; grid-template-columns: 42% 58%; align-items: center; box-sizing: border-box; } /*====================================================* LEFT CONTENT ====================================================*/ .home-contact-content { width: 100%; padding-right: 70px; box-sizing: border-box; } /*====================================================* INTRO ====================================================*/ .home-contact-intro { width: 100%; margin-bottom: 48px; } /*====================================================* TITLE ====================================================*/ .home-contact-title { margin: 0 0 12px; color: #080808; font-family: "Poppins", sans-serif; font-size: 48px; font-weight: 600; line-height: 1.15; letter-spacing: -1.5px; } /*====================================================* DESCRIPTION ====================================================*/ .home-contact-description { max-width: 620px; margin: 0; color: #747878; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.8; } /*====================================================* CONTACT INFORMATION ====================================================*/ .home-contact-info { width: 100%; display: flex; flex-direction: column; gap: 20px; } /*====================================================* CONTACT CARD ====================================================*/ .home-contact-card { width: 100%; min-height: 112px; display: flex; align-items: center; gap: 22px; padding: 18px; box-sizing: border-box; border: 1px solid #aebfaf; border-radius: 12px; background: transparent; } /*====================================================* CONTACT IMAGE BOX ====================================================*/ .home-contact-icon { width: 38px; height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; } /*====================================================* CONTACT IMAGE ====================================================*/ .home-contact-icon img { display: block; width: 32px; height: 32px; object-fit: contain; } /*====================================================* CONTACT CARD CONTENT ====================================================*/ .home-contact-card-content { min-width: 0; flex: 1; } /*====================================================* CONTACT CARD TITLE ====================================================*/ .home-contact-card-content h3 { margin: 0 0 7px; color: #111111; font-family: "Poppins", sans-serif; font-size: 17px; font-weight: 500; line-height: 1.3; } /*====================================================* CONTACT CARD TEXT ====================================================*/ .home-contact-card-content p { margin: 0; color: #747878; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 400; line-height: 1.8; } /*====================================================* RIGHT MAP ====================================================*/ .home-contact-map { width: 100%; height: 630px; overflow: hidden; box-sizing: border-box; } /*====================================================* MAP IFRAME ====================================================*/ .home-contact-map iframe { display: block; width: 100%; height: 100%; border: 0; } /*====================================================* LARGE DESKTOP ====================================================*/ @media (max-width: 1400px) { .home-contact-container { width: 90%; } .home-contact-content { padding-right: 60px; } .home-contact-map { height: 600px; } } /*====================================================* TABLET / SMALL DESKTOP ====================================================*/ @media (max-width: 1200px) { .home-contact { padding: 75px 0 85px; } .home-contact-container { grid-template-columns: 43% 57%; } .home-contact-content { padding-right: 45px; } .home-contact-title { font-size: 44px; } .home-contact-description { font-size: 14px; } .home-contact-intro { margin-bottom: 40px; } .home-contact-card { min-height: 105px; gap: 18px; padding: 16px; } .home-contact-card-content h3 { font-size: 16px; } .home-contact-card-content p { font-size: 12px; line-height: 1.7; } .home-contact-map { height: 560px; } } /*====================================================* TABLET ====================================================*/ @media (max-width: 992px) { .home-contact { padding: 70px 0 80px; } .home-contact-container { width: 90%; grid-template-columns: 1fr 1fr; } .home-contact-content { padding-right: 30px; } .home-contact-title { font-size: 40px; letter-spacing: -1px; } .home-contact-description { font-size: 13px; line-height: 1.8; } .home-contact-intro { margin-bottom: 35px; } .home-contact-info { gap: 16px; } .home-contact-card { min-height: 100px; gap: 15px; padding: 14px; border-radius: 10px; } .home-contact-icon { width: 34px; height: 34px; flex-basis: 34px; } .home-contact-icon img { width: 29px; height: 29px; } .home-contact-card-content h3 { margin-bottom: 5px; font-size: 15px; } .home-contact-card-content p { font-size: 11px; line-height: 1.7; } .home-contact-map { height: 500px; } } /*====================================================* MOBILE ====================================================*/ @media (max-width: 768px) { .home-contact { padding: 60px 0 70px; } .home-contact-container { width: 90%; display: flex; flex-direction: column; align-items: stretch; } /*================================================ LEFT CONTENT =================================================*/ .home-contact-content { width: 100%; padding-right: 0; } /*================================================ INTRO =================================================*/ .home-contact-intro { margin-bottom: 35px; } /*================================================ TITLE =================================================*/ .home-contact-title { font-size: 36px; letter-spacing: -1px; } /*================================================ DESCRIPTION =================================================*/ .home-contact-description { max-width: 100%; font-size: 13px; line-height: 1.8; } /*================================================ CONTACT INFORMATION =================================================*/ .home-contact-info { gap: 15px; } /*================================================ CONTACT CARD =================================================*/ .home-contact-card { width: 100%; min-height: 100px; gap: 17px; padding: 16px; border-radius: 11px; } /*================================================ IMAGE BOX =================================================*/ .home-contact-icon { width: 36px; height: 36px; flex: 0 0 36px; } /*================================================ IMAGE =================================================*/ .home-contact-icon img { width: 30px; height: 30px; } /*================================================ CARD TITLE =================================================*/ .home-contact-card-content h3 { margin-bottom: 5px; font-size: 16px; } /*================================================ CARD TEXT =================================================*/ .home-contact-card-content p { font-size: 12px; line-height: 1.7; } /*================================================ MAP =================================================*/ .home-contact-map { width: 100%; height: 400px; margin-top: 45px; } } /*====================================================* SMALL MOBILE ====================================================*/ @media (max-width: 480px) { .home-contact { padding: 50px 0 60px; } .home-contact-container { width: 92%; } /*================================================ TITLE =================================================*/ .home-contact-title { font-size: 31px; letter-spacing: -0.8px; } /*================================================ DESCRIPTION =================================================*/ .home-contact-description { font-size: 12px; line-height: 1.75; } /*================================================ INTRO =================================================*/ .home-contact-intro { margin-bottom: 30px; } /*================================================ CONTACT INFORMATION =================================================*/ .home-contact-info { gap: 13px; } /*================================================ CONTACT CARD =================================================*/ .home-contact-card { min-height: 94px; gap: 14px; padding: 14px; border-radius: 10px; } /*================================================ IMAGE BOX =================================================*/ .home-contact-icon { width: 34px; height: 34px; flex: 0 0 34px; } /*================================================ IMAGE =================================================*/ .home-contact-icon img { width: 28px; height: 28px; } /*================================================ CARD TITLE =================================================*/ .home-contact-card-content h3 { margin-bottom: 4px; font-size: 15px; } /*================================================ CARD TEXT =================================================*/ .home-contact-card-content p { font-size: 11px; line-height: 1.65; } /*================================================ MAP =================================================*/ .home-contact-map { height: 340px; margin-top: 35px; } } /*====================================================* VERY SMALL MOBILE ====================================================*/ @media (max-width: 360px) { .home-contact { padding: 45px 0 55px; } .home-contact-container { width: 92%; } .home-contact-title { font-size: 28px; } .home-contact-description { font-size: 11px; } .home-contact-card { min-height: 90px; gap: 12px; padding: 12px; } .home-contact-icon { width: 31px; height: 31px; flex-basis: 31px; } .home-contact-icon img { width: 26px; height: 26px; } .home-contact-card-content h3 { font-size: 14px; } .home-contact-card-content p { font-size: 10px; line-height: 1.6; } .home-contact-map { height: 300px; margin-top: 30px; } }