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.jpg') no-repeat center center / cover;
z-index: -1;
}
/* Larger screens */
@media (min-width: 768px) {
.hero-section::before {
background: url('images/header-desktop.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;
}
.showcase-section {
background-color: #ffffff;
color: #333;
}
/* --- Cards --- */
.showcase-card {
position: relative;
overflow: hidden;
border-radius: 8px;
background-color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
}
.showcase-card img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
transition: transform 0.4s ease;
display: block;
}
.showcase-card:hover img {
transform: scale(1.05);
}
/* --- Middle Card (Gold Overlay) --- */
.content-card {
color: #fff;
text-align: center;
padding: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.content-card::before {
content: '';
position: absolute;
inset: 0;
background-color: rgba(180, 139, 52, 0.95);
z-index: 1;
border-radius: 8px;
}
.card-content {
position: relative;
z-index: 2;
}
.content-card h3 {
font-size: 1.8rem;
margin-bottom: 15px;
text-transform: uppercase;
}
.content-card p {
line-height: 1.6;
margin-bottom: 0;
}
.about-section {
background-color: #1a233a;
/* A new, larger geometric pattern */
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%232c3a5c' stroke-width='1' stroke-opacity='0.4' fill='none'%3E%3Cpath d='M50 0 L100 50 L50 100 L0 50 Z'/%3E%3Cpath d='M-50 50 L0 100 L50 50 L0 0 Z'/%3E%3Cpath d='M50 100 L100 150 L150 100 L100 50 Z'/%3E%3Cpath d='M50 0 L100 -50 L150 0 L100 50 Z'/%3E%3C/g%3E%3C/svg%3E");
color: #ffffff;
padding: 6rem 0;
}
.about-section h2 {
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 1.5rem;
}
.about-section p {
font-size: 1rem;
line-height: 1.6;
color: #e0e0e0;
}
/* Ensure the image is nicely rounded and fits well */
.about-image {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
/* Styling for the warning button text */
.btn-warning {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #000;
}
.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))
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 */
}
/* 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;
}
}
@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 --- */
.section-heading {
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 */
}
}