/* ================================================================ VALUECAST – CONTACT US PAGE File: assets/css/contact-us.css IMPORTANT: valuecast.css is NOT re-imported here. It is already loaded by functions.php (valuecast_contact_enqueue_assets). The footer (.site-footer), CTA (.vc-cta), header (.vc-navbar) and all their children are already styled in valuecast.css under .vc-page — which is added to by the filter below in functions.php (see Section 4b). This file only contains styles UNIQUE to the contact page. ================================================================ */ /* ── HERO ─────────────────────────────────────────────────────── */ .vcc-hero { position: relative; width: 100%; min-height: 480px; background-color: #00051a; background-image: url('/wp-content/uploads/2026/04/Contact-Us_Hero.png'); background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 120px 48px 90px; } /* Decorative circle rings — pure CSS */ .vcc-hero-circles { position: absolute; left: 0; top: 0; width: 460px; height: 460px; pointer-events: none; } .vcc-circle { position: absolute; border-radius: 50%; border: 1.5px solid #0446f2; opacity: 0.25; top: 50%; left: 50%; transform: translate(-50%, -50%); } .vcc-circle-1 { width: 420px; height: 420px; top: 210px; left: 210px; } .vcc-circle-2 { width: 300px; height: 300px; top: 210px; left: 210px; } .vcc-circle-3 { width: 180px; height: 180px; top: 210px; left: 210px; } .vcc-node { position: absolute; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid #0446f2; background: #00051a; opacity: 0.65; } .vcc-nd-1 { left: 160px; top: 310px; } .vcc-nd-2 { left: 163px; top: 108px; } .vcc-nd-3 { left: 308px; top: 238px; } .vcc-nd-4 { left: 38px; top: 234px; } .vcc-nd-5 { left: 320px; top: 92px; } .vcc-nd-6 { left: 158px; top: 420px; } .vcc-nd-7 { left: 398px; top: 302px; } .vcc-hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; max-width: 1000px; } .vcc-hero-title { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: clamp(38px, 5vw, 68px); line-height: 1.1; color: #ffffff; margin: 0; } .vcc-hero-sub { font-size: clamp(15px, 1.4vw, 19px); line-height: 1.5; color: #ffffff; opacity: 0.8; max-width: 800px; margin: 0; font-family: 'Inter', sans-serif; } /* Bottom-right diagonal wave */ .vcc-hero-wave { display: none; } /* ── SHARED BADGE ─────────────────────────────────────────────── */ .vcc-badge { display: flex; align-items: center; gap: 8px; } .vcc-badge-dot { display: inline-block; width: 8px; height: 8px; background: #0446f2; flex-shrink: 0; } .vcc-badge-label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 13px; color: #00051a; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.2; } /* ── TICKER ───────────────────────────────────────────────────── */ .vcc-ticker-wrap { width: 100%; background: #ffffff; overflow: hidden; padding: 24px 0 8px; border-bottom: 1px solid rgba(188, 191, 204, 0.25); } .vcc-ticker-track { display: flex; align-items: center; gap: 36px; white-space: nowrap; width: max-content; animation: vcc-ticker 160s linear infinite; padding-bottom: 16px; } @keyframes vcc-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .vcc-t-gray { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: clamp(36px, 5vw, 48px); color: #bcbfcc; line-height: 1; opacity: 0.9; flex-shrink: 0; } .vcc-t-blue { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: clamp(36px, 5vw, 48px); color: #0446f2; line-height: 1; flex-shrink: 0; } /* ── INSIGHTS ─────────────────────────────────────────────────── */ .vcc-insights { width: 100%; background: #ffffff; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 60px 48px 50px; text-align: center; } .vcc-insights-title { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.15; color: #00051a; max-width: 680px; margin: 0; } .vcc-insights-sub { font-family: 'Inter', sans-serif; font-size: clamp(14px, 1.3vw, 18px); line-height: 1.55; color: #00051a; opacity: 0.75; max-width: 1080px; margin: 0; } /* ── FORM SECTION ─────────────────────────────────────────────── */ .vcc-form-section { width: 100%; background: #f6f7fb; padding: 0 48px 0px; } .vcc-form-inner { max-width: 1254px; margin: 0 auto; } /* ── TABS ─────────────────────────────────────────────────────── */ .vcc-tabs { display: flex; align-items: flex-end; gap: 16px; padding-top: 32px; border: none; background: transparent; padding-left: 72px; } .vcc-tab { padding: 14px 24px; border: none; background: #0446f2; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: clamp(12px, 1.1vw, 15px); text-transform: uppercase; color: #ffffff; cursor: pointer; white-space: nowrap; transition: all 0.2s; line-height: 1.2; border-radius: 8px; letter-spacing: 0.02em; margin-bottom: 16px; } /* Active Tab — attached white card */ .vcc-tab.vcc-tab--active { background: #ffffff !important; color: #0446f2 !important; border-radius: 20px 20px 0 0; padding: 24px 32px 18px; margin-bottom: 0; } .vcc-tab:not(.vcc-tab--active):hover { background: #0338cc; } .vcc-tab:focus-visible { outline: 2px solid #82ccf9; outline-offset: 2px; } /* ── FORM CARD ────────────────────────────────────────────────── */ .vcc-form-card { background: #ffffff; border-radius: 0 30px 30px 30px; padding: 44px 80px 50px; display: flex; flex-direction: column; gap: 20px; } .vcc-form-subtitle { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: clamp(20px, 2.3vw, 34px); line-height: 1.4; color: #6e7180; text-align: center; margin: 0 0 8px; } /* ── FORM LAYOUT ──────────────────────────────────────────────── */ .vcc-form-body { display: flex; gap: 56px; align-items: flex-start; } .vcc-form-left { flex: 0 0 380px; display: flex; flex-direction: column; gap: 16px; } .vcc-form-right { flex: 1; display: flex; flex-direction: column; gap: 18px; align-items: flex-end; } /* ── INPUTS ───────────────────────────────────────────────────── */ .vcc-input { width: 100%; height: 52px; border: 1px solid #bcbfcc; border-radius: 10px; padding: 0 16px 0 18px; font-family: 'Inter', sans-serif; font-size: 15px; color: #6e7180; background: #ffffff; outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; } .vcc-input:focus { border-color: #0446f2; box-shadow: 0 0 0 3px rgba(4, 70, 242, 0.1); } .vcc-input::placeholder { color: #6e7180; } /* ── SELECT ───────────────────────────────────────────────────── */ .vcc-select-wrap { position: relative; width: 100%; } .vcc-select { width: 100%; height: 52px; border: 1px solid #bcbfcc; border-radius: 10px; padding: 0 38px 0 18px; font-family: 'Inter', sans-serif; font-size: 15px; color: #6e7180; background: #edeff7; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color 0.2s; box-sizing: border-box; } .vcc-select:focus { border-color: #0446f2; box-shadow: 0 0 0 3px rgba(4, 70, 242, 0.1); } .vcc-select-chevron { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; display: flex; align-items: center; } /* ── TEXTAREA ─────────────────────────────────────────────────── */ .vcc-textarea { width: 100%; height: 260px; border: 1px solid #bcbfcc; border-radius: 10px; padding: 14px 16px; font-family: 'Inter', sans-serif; font-size: 15px; color: #6e7180; background: #ffffff; outline: none; resize: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; } .vcc-textarea:focus { border-color: #0446f2; box-shadow: 0 0 0 3px rgba(4, 70, 242, 0.1); } .vcc-textarea::placeholder { color: rgba(110, 113, 128, 0.5); } /* ── SUBMIT ───────────────────────────────────────────────────── */ .vcc-submit-btn { height: 52px; min-width: 124px; background: #0446f2; border: none; border-radius: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0 28px; cursor: pointer; transition: background 0.2s, transform 0.15s; } .vcc-submit-btn:hover { background: #0338cc; transform: translateY(-1px); } .vcc-submit-btn:active { transform: translateY(0); } .vcc-submit-btn span { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 15px; color: #ffffff; letter-spacing: 0.07em; text-transform: uppercase; } /* ── MESSAGES ─────────────────────────────────────────────────── */ .vcc-success-msg, .vcc-error-msg { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; margin-bottom: 8px; } .vcc-success-msg { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; } .vcc-error-msg { background: #fce4ec; color: #c62828; border: 1px solid #ef9a9a; } /* ════════════════════════════════════════════════════════════════ CTA SECTION — uses existing valuecast.css classes: .vc-cta, .vc-cta-inner, .vc-lbl, .buttonwhite, .explore-more, .arrowright-wrapper, .arrowright, .vector-icon.top-right, .vector-icon.bottom-left These are already in valuecast.css so NO re-definition needed. Only one override: remove the .vc-page scope so it works here. ═════════════════════════════════════════════════════════════════ */ /* The CTA section CSS in valuecast.css is NOT scoped under .vc-page so it already works on this page. No overrides needed. ✅ */ /* Match Contact CTA sizing to the broader portfolio CTA treatment */ /* .vc-contact-page .vc-cta { min-height: 588px; padding: clamp(60px, 8.3vw, 120px) clamp(48px, 15vw, 216px); display: flex; align-items: center; justify-content: center; } */ .vc-contact-page .vc-cta-inner { width: 100%; /* max-width: 1240px; */ gap: 44px; } .vc-contact-page .vc-cta h2 { margin: 0; font-family: "Outfit", Helvetica, sans-serif; font-weight: 400; font-size: clamp(32px, 3.6vw, 52px); line-height: 110%; } .vc-contact-page .vc-cta .buttonwhite { height: 54px; padding: 4px 8px 4px 32px; gap: 16px; } .vc-contact-page .vc-cta .explore-more { font-size: 18px; line-height: 1.2; } @media (max-width: 1024px) { .vc-contact-page .vc-cta { min-height: auto; padding: 80px 40px; } } @media (max-width: 640px) { .vc-contact-page .vc-cta { min-height: auto; padding: 80px 20px; } .vc-contact-page .vc-cta h2 { font-size: 28px; } } /* ════════════════════════════════════════════════════════════════ FOOTER — The footer CSS in valuecast.css IS scoped under .vc-page We unsrap it below so it works on the contact page too. The body gets .vc-contact-page class (added in functions.php Section 4b). We mirror all .vc-page footer rules here. ═════════════════════════════════════════════════════════════════ */ /* Mirror all .vc-page footer rules for .vc-contact-page */ .vc-contact-page .site-footer { background-color: #0b0f1a; color: #ffffff; width: 100%; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .vc-contact-page .site-footer a { text-decoration: none; color: inherit; } .vc-contact-page .footer-container { max-width: 1320px; margin: 0 auto; padding: 55px 50px 30px; } .vc-contact-page .footer-main { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 50px; } .vc-contact-page .footer-logo svg { height: 42px; width: auto; } .vc-contact-page .footer-right { display: flex; flex-direction: column; gap: 40px; } .vc-contact-page .footer-nav ul { display: flex; list-style: none; gap: 48px; margin: 0; padding: 0; } .vc-contact-page .footer-nav ul li a { font-size: 15px; font-weight: 400; color: #ffffff !important; transition: opacity 0.3s; text-decoration: none !important; } .vc-contact-page .footer-nav ul li a:hover { opacity: 0.65; } .vc-contact-page .footer-info { display: flex; gap: 120px; } .vc-contact-page .footer-contact, .vc-contact-page .footer-social { display: flex; flex-direction: column; gap: 18px; } .vc-contact-page .contact-item, .vc-contact-page .social-item { display: flex; align-items: center; gap: 14px; font-size: 15px; color: #ffffff !important; transition: opacity 0.3s; text-decoration: none !important; } .vc-contact-page .contact-item:hover, .vc-contact-page .social-item:hover { opacity: 0.65; } .vc-contact-page .contact-item svg, .vc-contact-page .social-item svg { flex-shrink: 0; width: 22px; height: 22px; } .vc-contact-page .footer-divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.12); margin-bottom: 25px; } .vc-contact-page .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; } .vc-contact-page .copyright { font-size: 14px; color: rgba(255, 255, 255, 0.5); margin: 0; } .vc-contact-page .footer-legal { display: flex; gap: 55px; } .vc-contact-page .footer-legal a { font-size: 14px; color: rgba(255, 255, 255, 0.5) !important; transition: color 0.3s; text-decoration: none !important; } .vc-contact-page .footer-legal a:hover { color: #ffffff !important; } /* Also suppress the Techbiz parent theme footer, breadcrumbs, and header info blocks on contact page */ .vc-contact-page .vs-footer, .vc-contact-page .footer-layout1, .vc-contact-page .footer-copyright, .vc-contact-page [data-elementor-type="footer"]:not(.site-footer), .vc-contact-page .breadcumb-wrapper, .vc-contact-page .header-info-area { display: none !important; } /* Legacy contact header block removed. Header parity is controlled by the unified "HOME HEADER PARITY — CONTACT PAGE" block below. */ /* ── RESPONSIVE ───────────────────────────────────────────────── */ /* ============================================= 1920x1080 DESKTOPS ============================================= */ @media (min-width: 1900px) and (max-width: 2200px) and (min-height: 1000px) { .vcc-hero { min-height: 620px; padding: 140px 80px 120px 80px; } .vcc-hero-content { max-width: 1100px; } .vcc-ticker-track { gap: 48px; } .vcc-insights { padding: 80px 100px 70px; gap: 32px; } .vcc-insights-title { max-width: 900px; } .vcc-form-section { padding: 60px 80px 80px; } .vcc-form-card { padding: 48px 60px; } .vcc-tabs { gap: 16px; padding: 0 60px; } /* CTA for Contact Page */ .vc-contact-page .vc-cta { padding: 140px 120px; } .vc-contact-page .vc-cta-inner { max-width: 1240px; margin: 0 auto; } } /* ============================================= TABLET & BELOW ============================================= */ @media (max-width: 1024px) { .vcc-hero-circles { display: none; } .vcc-form-section { padding: 0 24px 36px; } .vcc-form-card { padding: 36px 28px 40px; border-radius: 20px !important; } .vcc-form-body { flex-direction: column; gap: 18px; } .vcc-form-left { flex: none; width: 100%; } .vcc-form-right { width: 100%; align-items: flex-end; } .vcc-tabs { flex-wrap: wrap; padding-top: 20px; gap: 8px; padding-left: 0; } .vcc-tab { border-radius: 10px !important; padding: 12px 18px !important; margin-bottom: 0; } } @media (max-width: 992px) { .vc-contact-page .footer-main { flex-direction: column; gap: 30px; } .vc-contact-page .footer-nav ul { flex-wrap: wrap; gap: 22px; } .vc-contact-page .footer-info { gap: 60px; } } @media (max-width: 768px) { .vcc-hero { padding: 100px 24px 70px; } .vcc-insights { padding: 40px 24px 36px; } .vcc-t-gray, .vcc-t-blue { font-size: 34px; } .vcc-ticker-track { gap: 20px; } } @media (max-width: 640px) { .vcc-hero-wave { display: none; } .vcc-form-card { padding: 24px 18px 32px; } .vc-contact-page .footer-container { padding: 40px 24px 24px; } .vc-contact-page .footer-info { flex-direction: column; gap: 32px; } .vc-contact-page .footer-bottom { flex-direction: column; gap: 16px; text-align: center; } .vc-contact-page .footer-legal { gap: 30px; } } @media (max-width: 480px) { .vcc-hero { padding: 90px 16px 60px; min-height: 360px; } .vcc-hero-title { font-size: clamp(28px, 8vw, 40px); } .vcc-hero-sub { font-size: 14px; } .vcc-insights { padding: 32px 16px 28px; } .vcc-form-section { padding: 0 12px 28px; } .vcc-tabs { flex-direction: column; align-items: stretch; gap: 8px; padding-left: 0; } .vcc-tab { width: 100%; text-align: center; border-radius: 10px !important; padding: 12px 16px !important; margin-bottom: 0; } .vcc-tab.vcc-tab--active { border-radius: 10px !important; padding: 14px 16px !important; } .vcc-form-card { border-radius: 16px !important; padding: 20px 14px 28px; } .vcc-form-right { align-items: stretch; } } /* ================================================================ HOME HEADER PARITY — CONTACT PAGE ================================================================ */ .vc-contact-page #vc-nav-menu .mega-menu-wrap, .vc-contact-page #vc-nav-menu > div:not(.vc-menu-list) { display: contents !important; } .vc-contact-page #vc-nav-menu .mega-menu-wrap > ul { display: flex !important; } .vc-contact-page #vc-navbar .vc-nav-menu { background: transparent !important; border-radius: 0 !important; padding: 0 !important; height: auto !important; box-shadow: none !important; } .vc-contact-page #vc-navbar .vc-menu-list, .vc-contact-page #vc-nav-menu ul.vc-menu-list { background: transparent !important; border-radius: 0 !important; gap: 4px !important; padding: 0 !important; margin: 0 !important; } .vc-contact-page #vc-navbar .vc-menu-list > li > a, .vc-contact-page #vc-nav-menu ul.vc-menu-list > li > a, .vc-contact-page #vc-nav-menu .mega-menu-wrap > ul > li > a { display: inline-flex !important; align-items: center !important; padding: 8px 16px !important; border-radius: 999px !important; -webkit-border-radius: 999px !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; line-height: 1.2 !important; background-color: transparent !important; color: #ffffff !important; } .vc-contact-page #vc-navbar .vc-menu-list > li.current-menu-item > a, .vc-contact-page #vc-navbar .vc-menu-list > li.current_page_item > a, .vc-contact-page #vc-navbar .vc-menu-list > li.current_page_parent > a, .vc-contact-page #vc-navbar .vc-menu-list > li > a[href*='/contact-us'] { background-color: #0446f2 !important; color: #ffffff !important; border-radius: 999px !important; font-weight: 600 !important; } .vc-contact-page #vc-navbar .vc-nav-cta { display: inline-flex !important; align-items: center !important; /* background: #1A38F0 !important; */ color: #ffffff !important; border-radius: 50px !important; /* padding: 10px 22px !important; */ height: 41px !important; } /* Responsive heights matching menu button */ @media (max-width: 1024px) { .vc-contact-page #vc-navbar .vc-nav-cta { height: 37px !important; } } @media (max-width: 991px) { .vc-contact-page #vc-navbar .vc-nav-cta { height: 35px !important; } } .vc-contact-page #vc-navbar .vc-btn-label { background: transparent !important; color: #ffffff !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; padding: 0 !important; height: auto !important; border-radius: 0 !important; } .vc-contact-page #vc-navbar .vc-phone-ico { margin: 0 !important; width: 16px !important; height: 16px !important; } /* ════════════════════════════════════════════════════════════════ ADDITIONAL MOBILE RESPONSIVE ENHANCEMENTS ════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .vcc-hero-circles { width: 300px; height: 300px; } .vcc-hero-content { gap: 18px; } .vcc-ticker-wrap { padding: 20px 0 4px; } .vcc-insights-title { font-size: clamp(24px, 4vw, 40px); } .vcc-insights-sub { font-size: 14px; } .vcc-form-subtitle { font-size: clamp(18px, 2.5vw, 28px); } .vcc-input, .vcc-select, .vcc-textarea { font-size: 16px; padding: 12px 14px; } .vcc-input, .vcc-select { height: 48px; } .vcc-textarea { height: 200px; padding: 12px 14px; } .vcc-submit-btn { height: 48px; min-width: 110px; padding: 0 24px; } .vcc-submit-btn span { font-size: 14px; } } @media (max-width: 640px) { .vcc-hero-circles { width: 240px; height: 240px; } .vcc-hero-title { font-size: clamp(26px, 9vw, 36px); line-height: 1.1; } .vcc-hero-sub { font-size: 13px; line-height: 1.4; } .vcc-badge-label { font-size: 12px; } .vcc-ticker-track { gap: 16px; } .vcc-t-gray, .vcc-t-blue { font-size: 28px; } .vcc-insights-title { font-size: clamp(22px, 5vw, 32px); } .vcc-insights-sub { font-size: 13px; line-height: 1.4; } .vcc-form-subtitle { font-size: clamp(16px, 3vw, 24px); margin-bottom: 4px; } .vcc-form-body { gap: 12px; } .vcc-form-left { gap: 12px; } .vcc-form-right { gap: 14px; } .vcc-input, .vcc-select { height: 44px; padding: 10px 12px; font-size: 15px; border-radius: 8px; } .vcc-textarea { height: 160px; padding: 10px 12px; font-size: 15px; border-radius: 8px; } .vcc-select { padding-right: 32px; } .vcc-select-chevron { right: 10px; } .vcc-submit-btn { height: 44px; min-width: 100px; padding: 0 20px; font-size: 13px; border-radius: 24px; } .vcc-submit-btn span { font-size: 13px; } .vc-contact-page .footer-container { padding: 36px 20px 20px; } .vc-contact-page .footer-logo img { max-height: 24px; max-width: 140px; } .vc-contact-page .footer-nav ul { flex-direction: column; gap: 12px; } .vc-contact-page .footer-nav ul li a { font-size: 14px; } .vc-contact-page .footer-social { padding-left: 0; } } @media (max-width: 480px) { .vcc-hero-circles { width: 200px; height: 200px; } .vcc-hero { padding: 70px 14px 50px; min-height: 340px; } .vcc-hero-content { gap: 14px; } .vcc-hero-title { font-size: clamp(22px, 10vw, 32px); } .vcc-hero-sub { font-size: 13px; line-height: 1.4; max-width: 100%; } .vcc-insights { padding: 28px 14px 24px; gap: 16px; } .vcc-insights-title { font-size: clamp(20px, 6vw, 28px); line-height: 1.15; } .vcc-insights-sub { font-size: 12px; line-height: 1.4; } .vcc-ticker-wrap { padding: 16px 0 8px; } .vcc-ticker-track { gap: 12px; } .vcc-t-gray, .vcc-t-blue { font-size: 22px; } .vcc-form-section { padding: 0 10px; } .vcc-tabs { padding-left: 0; justify-content: center; } .vcc-tab { flex: 1; min-width: 80px; padding: 10px 12px !important; font-size: 12px; border-radius: 8px !important; } .vcc-tab.vcc-tab--active { padding: 12px 12px !important; border-radius: 8px !important; } .vcc-form-card { padding: 16px 12px 24px; border-radius: 12px !important; gap: 12px; } .vcc-form-subtitle { font-size: 16px; margin-bottom: 2px; } .vcc-form-body { flex-direction: column; gap: 10px; } .vcc-form-left, .vcc-form-right { width: 100%; flex: none; gap: 10px; } .vcc-form-right { align-items: stretch; } .vcc-input, .vcc-select { height: 40px; padding: 8px 10px; font-size: 14px; border-radius: 6px; } .vcc-input::placeholder { font-size: 13px; } .vcc-textarea { height: 140px; padding: 8px 10px; font-size: 14px; border-radius: 6px; } .vcc-textarea::placeholder { font-size: 13px; } .vcc-submit-btn { height: 40px; min-width: 90px; padding: 0 16px; width: 100%; border-radius: 20px; } .vcc-submit-btn span { font-size: 12px; letter-spacing: 0.05em; } .vc-contact-page .footer-container { padding: 32px 16px 18px; } .vc-contact-page .footer-main { gap: 24px; } .vc-contact-page .footer-logo { display: flex; justify-content: center; width: 100%; } .vc-contact-page .footer-logo img { max-height: 22px; max-width: 120px; } .vc-contact-page .footer-right { width: 100%; gap: 20px; } .vc-contact-page .footer-nav ul { flex-direction: column; gap: 10px; width: 100%; } .vc-contact-page .footer-nav ul li { width: 100%; } .vc-contact-page .footer-nav ul li a { font-size: 13px; } .vc-contact-page .footer-info { flex-direction: column; gap: 24px; width: 100%; } .vc-contact-page .footer-contact { gap: 12px; } .vc-contact-page .contact-item { font-size: 14px; gap: 10px; } .vc-contact-page .contact-item svg, .vc-contact-page .social-item svg { width: 18px; height: 18px; } .vc-contact-page .footer-social { gap: 12px; padding-left: 0; } .vc-contact-page .social-linkedin { gap: 8px; } .vc-contact-page .social-linkedin span { display: none; } .vc-contact-page .footer-divider { margin: 20px 0; } .vc-contact-page .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; } .vc-contact-page .copyright { font-size: 12px; order: 2; } .vc-contact-page .footer-legal { gap: 24px; order: 1; width: 100%; justify-content: space-between; } .vc-contact-page .footer-legal a { font-size: 12px; } } /* ════════════════════════════════════════════════════════════════ COMPREHENSIVE MOBILE BREAKPOINTS — CONTACT US PAGE Breakpoints: 576px Large phone landscape / small tablet 430px iPhone 14 Plus / 15 Plus / Pro Max 390px iPhone 14 / 15 / 14 Pro / 15 Pro 375px iPhone SE 2&3, 12 mini, 13 mini 360px Samsung Galaxy S-series / most Android 320px iPhone 5 / SE 1st gen / very small screens ════════════════════════════════════════════════════════════════ */ /* ── LARGE PHONE LANDSCAPE (≤ 576px) ────────────────────────── */ @media (max-width: 576px) { .vcc-hero { padding: 64px 18px 44px; min-height: 320px; } .vcc-hero-title { font-size: clamp(26px, 8vw, 36px); } .vcc-insights { padding: 32px 18px 28px; } .vcc-form-card { padding: 18px 14px 26px; } } /* ── iPHONE 14 PLUS / 15 PLUS / PRO MAX (≤ 430px) ─────────────── */ @media (max-width: 430px) { .vcc-hero { padding: 56px 14px 36px; } .vcc-hero-title { font-size: clamp(24px, 7vw, 32px); } .vcc-tab { min-width: 70px; padding: 9px 10px !important; font-size: 11px; } .vcc-form-card { padding: 16px 12px 20px; } .vcc-input, .vcc-select, .vcc-textarea { font-size: 13px; } .vc-contact-page .vc-cta { min-height: 300px; padding: 72px 18px 64px; display: flex; align-items: center; justify-content: center; } .vc-contact-page .vc-cta-inner { width: 100%; max-width: 340px; gap: 18px; align-items: center; text-align: center; } .vc-contact-page .vc-cta .vc-lbl { margin: 0 auto; justify-content: center; font-size: 12px; line-height: 1.2; } .vc-contact-page .vc-cta h2 { margin: 0; font-size: 24px; line-height: 1.18; text-align: center; } .vc-contact-page .vc-cta .buttonwhite { width: min(100%, 276px); height: 48px; margin: 0 auto; padding: 4px 6px 4px 24px; gap: 12px; justify-content: space-between; } .vc-contact-page .vc-cta .explore-more { font-size: 14px; line-height: 1.15; white-space: nowrap; } .vc-contact-page .vc-cta .arrowright-wrapper { width: 36px; height: 36px; flex: 0 0 36px; padding: 8px; } .vc-contact-page .vc-cta .vector-icon.top-right, .vc-contact-page .vc-cta .vector-icon.bottom-left { height: 72px; } } /* ── iPHONE 14 / 15 / 14 PRO / 15 PRO (≤ 390px) ──────────────── */ @media (max-width: 390px) { .vcc-hero { padding: 52px 12px 32px; min-height: 280px; } .vcc-hero-title { font-size: clamp(22px, 6.5vw, 28px); } .vcc-insights-title { font-size: clamp(18px, 5.5vw, 24px); } .vcc-form-card { padding: 14px 11px 18px; gap: 10px; } .vcc-submit-btn { height: 38px; } } /* ── iPHONE SE 2/3 / 12 MINI / 13 MINI (≤ 375px) ───────────── */ @media (max-width: 375px) { .vcc-hero { padding: 48px 10px 28px; } .vcc-hero-title { font-size: clamp(20px, 6vw, 26px); } .vcc-insights { padding: 24px 10px 20px; gap: 14px; } .vcc-tabs { gap: 6px; } .vcc-tab { min-width: 60px; padding: 8px 9px !important; font-size: 10px; } .vcc-form-card { padding: 12px 10px 16px; } } /* ── SAMSUNG GALAXY S / MOST ANDROID (≤ 360px) ──────────────── */ @media (max-width: 360px) { .vcc-hero { padding: 44px 9px 24px; } .vcc-hero-title { font-size: clamp(18px, 5.5vw, 24px); } .vcc-hero-sub { font-size: 12px; } .vcc-insights-title { font-size: clamp(16px, 5vw, 22px); } .vcc-form-card { padding: 12px 9px 14px; border-radius: 10px !important; } .vcc-input, .vcc-select, .vcc-textarea { font-size: 12px; height: 36px; padding: 6px 8px; } } /* ── iPHONE 5 / SE 1ST GEN / VERY SMALL (≤ 320px) ──────────── */ @media (max-width: 320px) { .vcc-hero { padding: 40px 8px 20px; min-height: 260px; } .vcc-hero-title { font-size: clamp(16px, 5vw, 20px); } .vcc-hero-sub { font-size: 11px; } .vcc-insights { padding: 20px 8px 16px; gap: 12px; } .vcc-insights-title { font-size: clamp(14px, 4.5vw, 18px); } .vcc-insights-sub { font-size: 11px; } .vcc-tab { min-width: 50px; padding: 7px 8px !important; font-size: 9px; } .vcc-form-subtitle { font-size: 14px; } .vcc-input, .vcc-select, .vcc-textarea { font-size: 11px; height: 34px; padding: 5px 6px; } .vcc-form-card { padding: 10px 8px 12px; } .vcc-submit-btn { height: 36px; padding: 0 12px; } } .vc-cta .vector-icon.top-right{ filter: brightness(0) saturate(100%) invert(97%) sepia(4%) saturate(376%) hue-rotate(182deg) brightness(101%) contrast(97%); }