/* ========================= MODERN CONTACT SECTION ========================= */ .modern-contact-section{ position:relative; overflow:hidden; background:linear-gradient(180deg,#ffffff 0%,#f7f7f7 100%); padding:110px 0; } /* ========================= HEADING ========================= */ .contact-heading{ margin-bottom:40px; } .contact-tag{ display:block; color:#E53935; font-size:14px; font-weight:800; letter-spacing:3px; text-transform:uppercase; margin-bottom:14px; } .contact-main-title{ font-size:58px; font-weight:900; text-transform:uppercase; color:#111111; margin-bottom:20px; } .contact-divider{ width:70px; height:4px; margin:auto; border-radius:50px; background:#e53935; } /* ========================= LEFT INFO BOX ========================= */ .contact-info-wrapper{ background: linear-gradient( 180deg, #111111 0%, #1b1b1b 100% ); border-radius:28px; padding:45px 35px; height:auto; color:#fff; box-shadow: 0 20px 45px rgba(0,0,0,.15); } .contact-info-wrapper h3{ font-size:34px; font-weight:600; margin-bottom:35px; color:#fff; text-transform:uppercase; } .contact-info-wrapper h3 i{ color:#E53935; margin-right:10px; } /* INFO ITEM */ .contact-info-item{ display:flex; align-items:flex-start; gap:18px; margin-bottom:30px; } /* ICON */ .contact-info-icon{ width:55px; height:55px; min-width:55px; border-radius:16px; background:#e53935; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; } /* TEXT */ .contact-info-item p{ margin:0; font-size:16px; line-height:1.9; color: rgba(255,255,255,.85); } .contact-info-wrapper hr{ border-color: rgba(255,255,255,.12); margin:35px 0; } /* BUSINESS HOURS */ .business-hours h4{ font-size:26px; font-weight:800; margin-bottom:18px; color:#fff; } .business-hours h4 i{ color:#E53935; margin-right:10px; } .business-hours p{ margin-bottom:8px; color: rgba(255,255,255,.7); } .business-hours h5{ font-size:28px; font-weight:900; color:#fff; } /* ========================= FORM BOX ========================= */ .contact-form-wrapper{ background:#fff; border-radius:28px; padding:45px; height:100%; box-shadow: 0 20px 45px rgba(0,0,0,.06); } .contact-form-wrapper h3{ font-size:38px; font-weight:900; text-transform:uppercase; margin-bottom:35px; color:#111111; } /* LABEL */ .contact-form-wrapper label{ display:block; font-size:14px; font-weight:700; color:#111111; text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; } /* INPUT */ .contact-form-wrapper .form-control, .contact-form-wrapper .form-select{ height:60px; border-radius:16px; border:1px solid #ddd; padding:14px 20px; font-size:15px; transition:.3s ease; box-shadow:none; } /* TEXTAREA */ .contact-form-wrapper textarea.form-control{ height:auto; resize:none; padding-top:18px; } /* FOCUS */ .contact-form-wrapper .form-control:focus, .contact-form-wrapper .form-select:focus{ border-color:#E53935; box-shadow: 0 0 0 4px rgba(229,57,53,.08); } /* BUTTON */ .submit-btn{ width:100%; border:none; border-radius:18px; background:#e53935; color:#fff; height:64px; font-size:18px; font-weight:800; text-transform:uppercase; letter-spacing:1px; transition:.35s ease; box-shadow: 0 15px 35px rgba(229,57,53,.2); } .submit-btn i{ margin-right:10px; } .submit-btn:hover{ transform:translateY(-4px); box-shadow: 0 20px 40px rgba(229,57,53,.3); } /* ========================= RESPONSIVE ========================= */ /* LARGE DESKTOP */ @media (min-width:1600px){ .modern-contact-section{ padding:140px 0; } .contact-main-title{ font-size:70px; } .contact-form-wrapper h3{ font-size:42px; } } /* DESKTOP */ @media (max-width:1400px){ .contact-main-title{ font-size:52px; } } /* LAPTOP */ @media(max-width:1199px){ .contact-main-title{ font-size:48px; } .contact-form-wrapper h3{ font-size:34px; } .contact-info-wrapper h3{ font-size:30px; } } /* TABLET */ @media(max-width:991px){ .modern-contact-section{ padding:90px 0; } .contact-main-title{ font-size:40px; line-height:1.2; } .contact-info-wrapper, .contact-form-wrapper{ padding:35px 28px; } .contact-info-wrapper{ margin-bottom:30px; } .contact-info-wrapper h3{ font-size:28px; } .contact-form-wrapper h3{ font-size:30px; } .contact-info-item{ gap:14px; } } /* MOBILE */ @media(max-width:767px){ .modern-contact-section{ padding:70px 0; } .contact-tag{ font-size:12px; letter-spacing:2px; } .contact-main-title{ font-size:30px; line-height:1.25; } .contact-divider{ width:55px; } .contact-form-wrapper h3{ font-size:24px; margin-bottom:25px; } .contact-info-wrapper h3{ font-size:24px; margin-bottom:25px; } .contact-form-wrapper, .contact-info-wrapper{ padding:24px 20px; border-radius:22px; } .contact-info-item{ margin-bottom:22px; } .contact-info-icon{ width:48px; height:48px; min-width:48px; font-size:16px; border-radius:14px; } .contact-info-item p{ font-size:14px; line-height:1.8; } .business-hours h4{ font-size:22px; } .business-hours h5{ font-size:20px; } .contact-form-wrapper .form-control, .contact-form-wrapper .form-select{ height:54px; font-size:14px; padding:12px 16px; } .submit-btn{ height:56px; font-size:15px; } } /* SMALL MOBILE */ @media(max-width:575px){ .modern-contact-section{ padding:60px 0; } .contact-main-title{ font-size:26px; } .contact-info-wrapper, .contact-form-wrapper{ padding:20px 16px; } .contact-info-wrapper h3{ font-size:22px; } .contact-form-wrapper h3{ font-size:22px; } .contact-info-icon{ width:42px; height:42px; min-width:42px; font-size:14px; } .contact-info-item{ gap:12px; } .contact-info-item p{ font-size:13px; } .business-hours h4{ font-size:18px; } .business-hours h5{ font-size:18px; } .contact-form-wrapper label{ font-size:12px; } .submit-btn{ height:52px; font-size:14px; letter-spacing:.5px; } } /* EXTRA SMALL DEVICES */ @media(max-width:380px){ .contact-main-title{ font-size:22px; } .contact-tag{ font-size:11px; letter-spacing:1px; } .contact-info-wrapper h3, .contact-form-wrapper h3{ font-size:20px; } .contact-info-item{ flex-direction:column; align-items:flex-start; gap:10px; } .contact-info-icon{ margin-bottom:5px; } .submit-btn{ font-size:13px; } }