:root { --accent: #ff5f13; --accent-soft: rgba(255, 95, 19, 0.07); --card-radius: 24px; --map-radius: 20px; } /* header active */ .header .navmenu ul li a.active, .header .navmenu ul li a:hover { color: var(--accent) !important; } /* This page doesn't have the custom header-scroll script that other pages use (which toggles a "scrolled" class directly on #header). Here, only the vendor main.js's own scroll handler runs, which toggles "scrolled" on instead - so every ".header.scrolled" rule from the shared stylesheet silently never applies here. This block mirrors all of them using "body.scrolled .header" instead, so the scrolled state (solid background, smaller logo, dropdown/menu colors) works correctly. */ body.scrolled .header { background-color: #0a1a3a !important; padding: 10px 0 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } body.scrolled .header .logo img { max-height: 50px; width: auto; } body.scrolled .header .navmenu .dropdown ul { background: #fff !important; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } body.scrolled .header .navmenu .dropdown ul li a { color: #0e1d34 !important; background: transparent !important; } body.scrolled .header .navmenu .dropdown ul li a:hover { color: #ff5f13 !important; background: rgba(255,95,19,0.05) !important; padding-left: 20px !important; } body.scrolled .header .navmenu .dropdown > a, body.scrolled .header .navmenu a { color: rgba(255,255,255,0.9); } body.scrolled .header .navmenu .dropdown .toggle-dropdown { color: rgba(255,255,255,0.7); } @media (max-width: 768px) { body.scrolled .header { padding: 8px 0 !important; } } @media (max-width: 1199px) { body.scrolled .header .navmenu ul { background: #fff !important; top: 60px !important; } body.scrolled .header .navmenu ul li a { color: #0e1d34 !important; } body.scrolled .header .navmenu ul li a:hover { color: #ff5f13 !important; } } .page-title h1 { font-weight: 700; letter-spacing: -0.01em; } .breadcrumbs .current { color: var(--accent); } /* ----- OFFICE CARDS (with inline map) ----- */ .office-card { background: #fff; border-radius: var(--card-radius); box-shadow: 0 18px 35px -12px rgba(0,0,0,0.08); padding: 1.6rem 1.4rem 1.6rem 1.4rem; height: 100%; transition: all 0.2s ease; border: 1px solid rgba(0,0,0,0.02); display: flex; flex-direction: column; } .office-card:hover { box-shadow: 0 25px 40px -16px rgba(255,95,19,0.15); border-color: var(--accent-soft); } .office-card .map-container { width: 100%; height: 300px; border-radius: 18px; overflow: hidden; margin: 1rem 0 1rem 0; border: 2px solid white; box-shadow: 0 10px 20px -8px rgba(0,0,0,0.15); } .office-card .map-container iframe { width: 100%; height: 100%; border: 0; pointer-events: auto; } .office-card .office-icon { color: var(--accent); font-size: 2rem; margin-right: 0.8rem; } .office-card h3 { font-weight: 600; margin-bottom: 0.2rem; font-size: 1.4rem; color: #1e293b; } .office-card .address { color: #2f3e58; font-weight: 400; line-height: 1.5; margin-bottom: 0.3rem; } .office-card .phone-small { color: #4b5a72; font-size: 0.95rem; } .office-card .phone-small i { color: var(--accent); margin-right: 4px; } .divider-light { border-top: 1px dashed rgba(0,0,0,0.08); margin: 0.8rem 0 0.6rem 0; } /* contact form (under maps) */ .php-email-form { background: #ffffff; padding: 2.5rem 2.2rem; border-radius: 30px; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12); margin-top: 2rem; border: 1px solid #f1f4fa; } .php-email-form .form-control, .php-email-form select { border-radius: 40px; padding: 0.8rem 1.6rem; border: 1px solid #e3eaf2; background: #fafdff; } .php-email-form .form-control:focus, .php-email-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,95,19,0.1); } .php-email-form button[type="submit"] { background: var(--accent); border-radius: 40px; padding: 0.8rem 3rem; font-weight: 600; border: none; transition: 0.2s; } .php-email-form button[type="submit"]:hover { background: #cf470a; transform: scale(1.02); box-shadow: 0 12px 24px -12px var(--accent); } /* Honeypot field - hidden from real users */ .honeypot-field { display: none !important; position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none !important; } .honeypot-field input { display: none !important; } /* additional contact meta (phone, fax, email) as icon row */ .quick-contact-row { background: #f8fbfe; border-radius: 50px; padding: 1rem 1.8rem; margin: 1.5rem 0 0 0; border: 1px solid #edf2f9; } .quick-contact-row .contact-icon-item { display: inline-flex; align-items: center; gap: 8px; margin-right: 32px; } .quick-contact-row .contact-icon-item i { color: var(--accent); font-size: 1.2rem; } .quick-contact-row .contact-icon-item strong { color: #0e1d34; } @media (max-width: 768px) { .quick-contact-row .contact-icon-item { margin-right: 20px; margin-bottom: 8px; } } /* Turnstile container */ .cf-turnstile { display: flex; justify-content: center; margin: 20px 0 15px; } /* footer small accent */ .footer a:hover, .footer-links ul li a:hover { color: var(--accent); } .scroll-top { background: var(--accent); }