/* Page Lubes contact page — built to share the existing site design system. */
.contact-page { background: #f5f6f8; color: #18202b; font-family: 'Poppins', 'Noto Sans Tamil', sans-serif; }
.contact-page .navbar { background: rgba(13,17,23,.97) !important; padding: 8px 0; }
.contact-page .navbar .container { min-height: 58px; }
.contact-page .navbar-brand-logo { width: 205px; height: 54px !important; object-fit: contain; }
.contact-page .navbar-nav .nav-link { padding: 15px 10px 12px !important; margin: 0 2px; }
.contact-page .navbar-toggler { border-color: rgba(255,255,255,.35); }
.contact-page .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,193,7,.22); }
.contact-page .navbar-toggler-icon { filter: invert(1); }
.contact-topbar { background: #090c10; color: #d8dce2; padding: 8px 0; font-size: .78rem; letter-spacing: .02em; }
.contact-topbar a { color: inherit; text-decoration: none; }
.contact-topbar a:hover { color: #ffc107; }
.contact-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 420px; padding: 168px 0 84px; color: #fff; background: radial-gradient(ellipse at 78% 42%, rgba(212,175,55,.17), transparent 34%), linear-gradient(120deg,#0b0f14 0%,#111923 55%,#20252b 100%); }
.contact-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg,black,transparent 90%); }
.contact-hero-glow { position: absolute; z-index: -1; width: 390px; height: 390px; border-radius: 50%; border: 1px solid rgba(255,193,7,.13); right: 8%; top: 85px; box-shadow: 0 0 0 40px rgba(255,193,7,.025),0 0 0 80px rgba(255,193,7,.018); }
.contact-hero-content { position: relative; }
.contact-eyebrow,.contact-kicker { display: inline-flex; align-items: center; gap: 9px; color: #b28c22; font-size: .75rem; font-weight: 700; letter-spacing: .17em; }
.contact-eyebrow { color: #f0d578; }
.contact-eyebrow span { width: 23px; height: 2px; background: #ffc107; display: inline-block; }
.contact-hero h1 { margin: 16px 0 18px; max-width: 800px; font-size: clamp(2.7rem,5.2vw,4.7rem); font-weight: 700; letter-spacing: -.055em; line-height: 1.08; }
.contact-hero h1 em { color: #ffc107; font-style: normal; }
.contact-hero p { max-width: 650px; color: #c2c8d0; font-size: 1.05rem; line-height: 1.8; }
.contact-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.contact-hero-actions .btn { border-radius: 8px; font-size: .92rem; font-weight: 600; padding: 13px 20px; }
.contact-hero-line { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,transparent,#ffc107 35%,#ffc107 65%,transparent); opacity: .7; }
.contact-main-section { padding: 82px 0 92px; }
.contact-section-heading { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.contact-section-heading h2 { margin: 10px 0 12px; color: #111923; font-size: clamp(2rem,3.2vw,2.8rem); font-weight: 700; letter-spacing: -.04em; }
.contact-section-heading h2 span { color: #b28c22; }
.contact-section-heading p { color: #687180; margin: 0; line-height: 1.75; }
.contact-info-panel,.contact-form-panel { height: 100%; border-radius: 18px; box-shadow: 0 18px 55px rgba(19,28,41,.07); }
.contact-info-panel { padding: 34px; background: #111923; color: #f7f8fa; }
.contact-info-heading { display: flex; align-items: center; gap: 15px; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.12); }
.contact-icon-large { width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; color: #111923; background: #ffc107; border-radius: 14px; font-size: 1.5rem; }
.contact-info-heading h3 { margin: 0 0 5px; font-size: 1.25rem; font-weight: 600; }
.contact-info-heading p { margin: 0; color: #aeb6c2; font-size: .83rem; }
.contact-detail { display: flex; gap: 15px; padding: 23px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.contact-detail-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px; background: rgba(255,193,7,.12); color: #ffc107; font-size: 1.1rem; }
.contact-detail-icon.whatsapp-icon { background: rgba(37,211,102,.12); color: #25d366; }
.contact-detail h4 { font-size: .93rem; font-weight: 600; margin: 1px 0 7px; }
.contact-detail p { color: #b8c0cb; font-size: .82rem; line-height: 1.7; margin: 0 0 8px; }
.contact-text-link { color: #f5ce59; text-decoration: none; font-size: .84rem; font-weight: 600; }
.contact-text-link:hover { color: #fff; }
.contact-note { margin-top: 22px; padding: 13px 14px; background: rgba(255,255,255,.055); border-radius: 10px; color: #bfc6d0; font-size: .76rem; line-height: 1.7; }
.contact-note i { color: #ffc107; }
.contact-form-panel { padding: 36px; background: #fff; border: 1px solid #e8ebef; }
.contact-form-heading { margin-bottom: 27px; }
.contact-form-heading h3 { margin: 8px 0 9px; font-size: 1.75rem; font-weight: 700; letter-spacing: -.035em; color: #111923; }
.contact-form-heading p { margin: 0; color: #6b7482; font-size: .87rem; line-height: 1.75; }
.contact-form-panel .form-label { color: #303947; font-size: .81rem; font-weight: 600; margin-bottom: 8px; }
.contact-form-panel .form-label span { color: #b28c22; }
.contact-form-panel .form-control,.contact-form-panel .form-select { min-height: 48px; border: 1px solid #dfe3e9; border-radius: 8px; background-color: #fbfcfd; color: #1c2531; font-size: .86rem; padding: 12px 13px; }
.contact-form-panel textarea.form-control { min-height: 125px; resize: vertical; }
.contact-form-panel .form-control:focus,.contact-form-panel .form-select:focus { border-color: #d0a92e; background: #fff; box-shadow: 0 0 0 .22rem rgba(212,175,55,.15); }
.contact-submit-btn { width: 100%; padding: 14px 18px; border-radius: 8px; font-weight: 700; color: #15191f; }
.contact-submit-btn:hover { background: #e6b000; border-color: #e6b000; }
.contact-privacy-note { margin: 12px 0 0; color: #7a8390; font-size: .72rem; line-height: 1.6; }
.contact-privacy-note i { color: #3b9465; }
.contact-form-status { color: #247349; font-size: .8rem; line-height: 1.6; margin-top: 9px; }
.contact-bottom-cta { padding: 50px 0; color: #fff; background: linear-gradient(110deg,#9d7915,#c5a02c 58%,#a98419); }
.contact-bottom-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.contact-bottom-cta .contact-kicker { color: #fff7d7; }
.contact-bottom-cta h2 { margin: 8px 0 8px; font-size: clamp(1.5rem,2.5vw,2.2rem); font-weight: 700; letter-spacing: -.035em; }
.contact-bottom-cta p { margin: 0; color: rgba(255,255,255,.85); font-size: .9rem; }
.contact-bottom-cta .btn { flex: 0 0 auto; border-radius: 8px; font-weight: 700; padding: 13px 19px; }
.contact-footer { background: #0b0f14; color: #b9c0ca; padding: 56px 0 26px; }
.contact-footer h5 { font-size: 1rem; font-weight: 600; margin-bottom: 18px; }
.contact-footer p { font-size: .82rem; line-height: 1.8; }
.contact-footer a:not(.btn) { color: #c5cbd4; text-decoration: none; }
.contact-footer a:not(.btn):hover { color: #ffc107; }
.contact-footer-links li { margin-bottom: 10px; font-size: .84rem; }
.contact-footer .footer-brand-logo { max-width: 210px; height: auto; }
.contact-footer hr { margin: 30px 0 22px; }
.contact-footer small { color: #8993a1; font-size: .74rem; }
.contact-page .whatsapp-float { right: 24px; bottom: 24px; }
@media (max-width: 991.98px) { .contact-page .navbar-brand-logo { width: 180px; height: 48px !important; } .contact-hero { padding-top: 145px; } .contact-bottom-cta-inner { align-items: flex-start; flex-direction: column; } }
@media (max-width: 767.98px) { .contact-topbar .container { justify-content: center !important; font-size: .73rem; } .contact-hero { min-height: 0; padding: 130px 0 64px; } .contact-hero-glow { right: -210px; top: 75px; } .contact-hero h1 { font-size: clamp(2.4rem,10vw,3.6rem); } .contact-hero p { font-size: .94rem; } .contact-hero-actions { flex-direction: column; align-items: stretch; max-width: 320px; } .contact-hero-actions .btn { width: 100%; } .contact-main-section { padding: 58px 0 65px; } .contact-section-heading { margin-bottom: 28px; } .contact-info-panel,.contact-form-panel { padding: 25px 22px; border-radius: 14px; } .contact-form-heading h3 { font-size: 1.55rem; } .contact-bottom-cta { padding: 40px 0; } .contact-page .whatsapp-float { right: 16px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .contact-page *, .contact-page *::before, .contact-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }