html {
/* This forces the scrollbar track to always be present, preventing any layout shift */
overflow-y: scroll;
}
:root {
--gold-accent: #c7a44a;
--text-light: #f0f0f0;
--background-overlay: rgba(25, 25, 25, 0.65);
--primary-blue: #1A2342;
--deep-navy-blue: #0d2c54;
--gold-overlay: rgba(199, 164, 74, 0.85);
}
body {
font-family: 'Montserrat', Arial, sans-serif;
background-color: #191919;
color: var(--text-light);
}
/* --- Section Titles --- */
.section-title {
font-family: 'Times New Roman', Times, serif;
color: var(--deep-navy-blue);
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
}
.section-title-white {
font-family: 'Times New Roman', Times, serif;
color: var(--text-light);
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
}
/* ===== HERO SECTION ===== */
.hero-section {
position: relative;
height: 100vh;
color: #fff;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Flicker-free fixed background */
.hero-section::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Default (Mobile First) */
background: url('../images/header-desktop-7.jpg') no-repeat center center / cover;
z-index: -1;
}
/* Larger screens */
@media (min-width: 768px) {
.hero-section::before {
background: url('../images/header-desktop-7.jpg') no-repeat center center / cover;
}
}
.hero-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-content img.logo {
max-width: 180px;
margin-bottom: 20px;
}
/* This specifically targets the heading in the hero to give it a gold color */
.hero-content .section-heading {
color: #d4af37;
}
/* ===== NAVBAR ===== */
.navbar {
background: transparent !important;
transition: background-color 0.4s ease;
}
.navbar.scrolled {
background-color: #151845 !important;
}
/* Change hamburger icon to white */
.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(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Navbar links (desktop) */
.navbar .nav-link {
color: #fff !important;
font-weight: 500;
text-transform: uppercase;
margin: 0 10px;
position: relative;
transition: color 0.3s ease;
}
.navbar .nav-link:hover {
color: #d4af37 !important;
}
.navbar .nav-link.active {
color: #d4af37 !important;
}
.navbar .nav-link.active::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 2px;
background-color: #fff;
}
/* ===== OFFCANVAS MENU ===== */
#offcanvasNav {
background-color: #151845;
color: #fff;
}
#offcanvasNav .offcanvas-title {
color: #fff;
}
#offcanvasNav .btn-close {
filter: invert(1);
}
#offcanvasNav .nav-link {
color: #fff;
position: relative;
transition: color 0.3s ease;
text-transform: uppercase;
}
#offcanvasNav .nav-link:hover {
color: #d4af37;
}
#offcanvasNav .nav-link.active {
color: #d4af37;
}
/* ===== SOCIAL ICONS ===== */
.social-icons a {
color: #fff;
font-size: 1.5rem;
margin: 0 10px;
transition: color 0.3s;
}
.social-icons a:hover {
color: #d4af37;
}
/* Custom styles for the title area */
.construction-title-section {
background-color: #ffffff;
/* It's best practice to set the primary font-family on the body tag in your main stylesheet, for example:
body { font-family: 'Roboto', sans-serif; }
*/
}
.construction-title-section .custom-heading {
color: #0d2c54; /* A dark navy blue color */
font-weight: 700;
letter-spacing: 1px;
}
.construction-title-section .sub-text {
color: #555;
max-width: 800px; /* Limit width for better readability */
margin-left: auto;
margin-right: auto;
}
/* General Footer Layout */
.footer-column ul li {
margin-bottom: 0.5rem;
line-height: 1.6;
}
.footer-column ul li:last-child {
margin-bottom: 0;
}
.footer-column a {
text-decoration: none;
}
.footer-column a:hover {
text-decoration: underline;
}
/* Bottom Bar Styling */
.footer-bottom small,
.footer-bottom a {
font-size: 1rem; /* restore to normal size */
color: #ccc;
}
.footer-bottom a:hover {
color: #f8c146; /* subtle gold hover */
text-decoration: underline;
}
/* Optional: subtle spacing for smaller screens */
@media (max-width: 767px) {
.footer-bottom {
text-align: center;
}
.footer-bottom small,
.footer-bottom a {
display: block;
margin-bottom: 5px;
}
}
/* ============================================
Start Responsive Mobile Fixes
============================================ */
@media (max-width: 900px) {
/* --- Add this rule to fix jumpy backgrounds on mobile --- */
.hero-section,
.services-overview,
.about-section,
.cta-section {
background-attachment: scroll;
}
/* --- FINAL FIX for Mobile Footer Logo Alignment --- */
.footer-column.branding {
/* 1. Ensure the container itself is aligned to the left */
text-align: left;
}
.footer-logo {
/* 2. Remove any auto-centering margins on the image */
margin: 0;
}
/* --- Add this new rule for the H1 --- */
.hero-content h1 {
font-size: 2rem; /* Reduced from 2.8rem */
letter-spacing: 1px; /* Optional: Reduces spacing for a tighter fit */
}
/* --- Add these new rules for the logos --- */
.logo img {
height: 80px; /* Reduces the top navigation logo size */
}
.hero-logo {
max-width: 220px; /* Reduces the main hero logo size */
}
/* --- About Section Fix --- */
.about-grid {
grid-template-columns: 1fr; /* This stacks the two columns vertically */
text-align: center;
}
.about-content {
/* Ensures the text column comes before the image on mobile */
order: 1;
}
.social-embed {
order: 2; /* Ensures the image column comes after the text */
margin-top: 40px; /* Adds space between the text and the image */
}
/* This rule ensures your image shrinks correctly */
.social-embed img {
width: 100%; /* Makes the image take the full width of the screen */
height: auto; /* Adjusts height automatically to prevent stretching */
}
}
/* ============================================
End Responsive Mobile Fixes
============================================ */