/* ===== Compatibility: text size adjustment across browsers ===== */ html { text-size-adjust: 100%; /* Standard: Chrome 54+, Edge 79+, Firefox, Safari */ -webkit-text-size-adjust: 100%; /* Legacy iOS/Safari fallback */ } /* ===== Page fade-in ===== Start with html.is-loading (set in ), then switch to .js.is-ready in JS. Reduce/disable motion for users who prefer less motion. */ html.is-loading body { opacity: 0; } html.js.is-ready body { opacity: 1; transition: opacity 2000ms ease-out; } @media (prefers-reduced-motion: reduce) { html.is-loading body, html.js.is-ready body { transition: none !important; opacity: 1 !important; } } /* ===== Core safety to prevent horizontal scroll ===== */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; /* hard stop for any accidental overflow */ } /* Media should never overflow */ img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; } /* Long strings won't blow out the layout */ * { box-sizing: border-box; overflow-wrap: anywhere; word-break: break-word; } /* ---------- Navbar height vars + anchor offset ---------- */ :root { --nav-h: 76px; /* adjust if your nav height changes */ --anchor-extra: 16px; /* extra breathing room below nav */ } @media (max-width: 768px) { :root { --nav-h: 70px; } /* Mobile: extra space under hero heading */ .hero-content h2 { margin-bottom: 2rem; /* larger than desktop for readability */ } .about-content { padding-left: 20px; padding-right: 20px; } } @media (max-width: 480px) { .hero-content h2 { margin-bottom: 2rem; } } /* Smooth scrolling and offset so fixed navbar doesn't cover anchors */ html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); } [id] { scroll-margin-top: calc(var(--nav-h) + var(--anchor-extra)); } /* ---------- Base Typography ---------- */ body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; } /* ---------- Header / Navbar ---------- */ .navbar { background-color: #1e3a8a !important; padding: 1rem 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 1000; width: 100%; left: 0; right: 0; } .navbar-brand { text-decoration: none; color: white !important; } .navbar-brand:hover { color: white !important; } .logo h1 { font-size: 2rem; font-weight: bold; margin-bottom: 0; color: white; } .logo span { font-size: 0.9rem; opacity: 0.9; color: white; display: block; } .navbar-nav .nav-link { color: white !important; font-weight: 500; margin: 0 0.5rem; transition: color 0.3s ease; } .navbar-nav .nav-link:hover { color: #60a5fa !important; } .navbar-nav .nav-link.active { color: #f59e0b !important; } /* Custom hamburger icon */ .navbar-toggler { border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; padding: 6px 8px; } .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); width: 18px; height: 18px; } /* Desktop navbar spacing */ @media (min-width: 992px) { .navbar-nav { align-items: center; } .navbar-nav .nav-link { padding: 0.5rem 1rem; margin: 0 0.25rem; border-radius: 4px; transition: all 0.3s ease; } .navbar-nav .nav-link:hover { background-color: rgba(255,255,255,0.1); } } /* ---------- Hero ---------- */ .hero { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: white; padding: 120px 0 80px 0; text-align: center; margin-top: var(--nav-h); } .hero-content h2 { font-size: 3rem; margin-bottom: 1rem; font-weight: bold; } .hero-content p { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9; } .hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 12px 30px; text-decoration: none; border-radius: 5px; font-weight: 600; text-align: center; transition: all 0.3s ease; border: none; cursor: pointer; } .btn-primary { background-color: #f59e0b; color: white; } .btn-primary:hover { background-color: #d97706; transform: translateY(-2px); } .btn-secondary { background-color: transparent; color: white; border: 2px solid white; } .btn-secondary:hover { background-color: white; color: #1e3a8a; } /* ---------- Services ---------- */ .services { padding: 80px 0; background-color: #f8fafc; } .services h2 { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: #1e3a8a; } .services-grid { display: grid; /* minmax(0,1fr) prevents overflow when content is wide */ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-top: 2rem; } /* Service card */ .service-card { background: white; padding: 2rem; border-radius: 10px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .service-card:hover { transform: translateY(-5px); } .service-card h3 { font-size: 1.5rem; color: #1e3a8a; margin-bottom: 1rem; } .service-card p { color: #64748b; line-height: 1.6; } /* ---------- About ---------- */ .about { padding: 80px 0; background-color: white; } .about h2 { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: #1e3a8a; } .about-content { max-width: 800px; margin: 0 auto; } .about-text p { font-size: 1.1rem; margin-bottom: 1.5rem; color: #4b5563; line-height: 1.7; } .about-text ul { list-style: none; padding-left: 0; margin-top: 2rem; } .about-text li { padding: 0.5rem 0; color: #1e3a8a; font-weight: 600; position: relative; padding-left: 1.5rem; } .about-text li:before { content: "✓"; position: absolute; left: 0; color: #f59e0b; font-weight: bold; } /* ---------- Contact ---------- */ .contact { padding: 80px 0; background-color: #f8fafc; } .contact h2 { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: #1e3a8a; } .contact-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* safe columns */ gap: 3rem; max-width: 1000px; margin: 0 auto; } .desktop-tablet-only { display: block; } .mobile-only { display: none; } .contact-info-card { background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .contact-info-card h3 { color: #1e3a8a; margin-bottom: 1.5rem; font-size: 1.5rem; text-align: center; } .contact-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .contact-detail h4 { color: #1e3a8a; margin-bottom: 0.5rem; font-size: 1.1rem; } .contact-detail p { color: #4b5563; margin: 0; } .contact-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .contact-item { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 10px; } .contact-item h4 { color: #1e3a8a; margin-bottom: 0.5rem; font-size: 1.1rem; } .contact-item p { color: #4b5563; margin: 0; } .contact-form { background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .contact-form h3 { color: #1e3a8a; margin-bottom: 1.5rem; font-size: 1.5rem; } .contact-form form { display: flex; flex-direction: column; gap: 1rem; } .contact-form input, .contact-form textarea { padding: 12px; border: 1px solid #d1d5db; border-radius: 5px; font-size: 1rem; transition: border-color 0.3s ease; width: 100%; } .contact-form textarea { resize: none; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: #3b82f6; } /* ---------- Footer ---------- */ footer { background-color: #1e3a8a; color: white; padding: 3rem 0 1rem 0; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .footer-section h4 { margin-bottom: 1rem; font-size: 1.2rem; } .footer-section ul { list-style: none; padding-left: 0; } .footer-section ul li { margin-bottom: 0.5rem; } .footer-section a { color: #cbd5e1; text-decoration: none; transition: color 0.3s ease; } .footer-section a:hover { color: white; } .footer-bottom { text-align: center; padding-top: 1rem; border-top: 1px solid #374151; color: #9ca3af; } /* ---------- Responsive ---------- */ @media (max-width: 991.98px) { .navbar-collapse { margin-top: 0.5rem; } .navbar-nav { text-align: left; padding-left: 0; } .navbar-nav .nav-link { padding: 0.5rem 0; font-size: 1rem; } .logo h1 { font-size: 1.75rem; } .logo span { font-size: 0.8rem; } } @media (max-width: 768px) { .hero-content h2 { font-size: 2rem; } .hero-buttons { flex-direction: column; align-items: center; } .services-grid { grid-template-columns: 1fr; } .contact-content { grid-template-columns: 1fr; gap: 2rem; max-width: 720px; /* keep well within viewport */ } .desktop-tablet-only { display: none; } .mobile-only { display: block; } .contact-info { grid-template-columns: 1fr; gap: 1rem; } .quote-heading { text-align: center; } .hero { padding: 100px 0 60px 0; margin-top: var(--nav-h); } .footer-content { gap: 1.5rem; text-align: center; } .about h2 { padding-left: 35px; padding-right: 35px; } } @media (max-width: 480px) { .hero-content h2 { font-size: 1.75rem; } .hero-content p { font-size: 1rem; } .services h2, .about h2, .contact h2 { font-size: 2rem; } }