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-1.jpg') no-repeat center center / cover;
z-index: -1;
}
/* Larger screens */
@media (min-width: 768px) {
.hero-section::before {
background: url('../images/header-desktop-1.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 {
font-family: 'Playfair Display', serif;
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;
}
/* Reusable class for full-width white service sections */
.service-section-white {
background-color: #ffffff;
padding-top: 3rem;
padding-bottom: 3rem;
}
/* New reusable class for alternating gray sections */
.service-section-gray {
background-color: #f8f9fa;
padding-top: 3rem;
padding-bottom: 3rem;
}
/* Scoped styles for elements within any service section */
.service-section-white h2, .service-section-gray h2 {
color: #151845;
}
.service-section-white a.text-body, .service-section-gray a.text-body {
text-decoration: underline;
color: #151845;
}
.service-section-white a.text-body:hover, .service-section-gray a.text-body:hover {
color: #151845;
opacity: 0.85;
}
/* Custom styling for the list items */
.custom-list li {
padding-bottom: 0.25rem;
}
.custom-list li span {
color: #151845;
}
/* Class for creating two-column lists on larger screens */
@media (min-width: 576px) {
.two-col-list {
column-count: 2;
column-gap: 2rem;
}
}
.bg-custom-gold {
background-color: #c5a353;
}
.bg-custom-blue {
background-color: #19224d;
}
.service-card {
padding: 2.5rem;
height: 100%;
}
/* ============================================
Start Call to Action Area
============================================ */
.cta-section {
/* Set the background color to a dark grey */
/* Set the text color for this section */
color: white;
/* Replaced height with padding to make it a section */
padding: 6rem 0;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('path/to/your/image.jpg');
background-size: cover;       /* Cover the entire section */
background-position: center;  /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
color: white; /* Apply white text color only to this section */
}
/* Customize the Bootstrap button */
.btn-outline-light {
padding: 12px 32px; /* Make the button a bit larger */
border-width: 2px;
border-radius: 0;   /* Remove rounded corners to match the image */
font-weight: bold;
letter-spacing: 1px;
transition: all 0.3s ease-in-out;
}
/* Style the button's hover state */
.btn-outline-light:hover {
background-color: white;
color: #5d5d5d; /* Change text color to the background grey on hover */
}
/* ============================================
End Call to Action Area
============================================ */
/* 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
============================================ */