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-2.jpg') no-repeat center center / cover;
z-index: -1;
}
/* Larger screens */
@media (min-width: 768px) {
.hero-section::before {
background: url('../images/header-desktop-2.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;
}
/* FIX: Prevents layout shift when scrollbar disappears */
html {
overflow-y: scroll;
}
/* Styling for the gallery section */
.gallery-section {
overflow: hidden;
background-color: #fff;
}
/* Style for the filter buttons */
.gallery-section .nav-pills .nav-link {
background-color: #e9ecef;
color: #495057;
margin: 0 5px 10px;
border-radius: 50px;
transition: all 0.3s ease;
font-weight: 500;
}
/* Active and hover state for filter buttons */
.gallery-section .nav-pills .nav-link.active,
.gallery-section .nav-pills .nav-link:hover {
background-color: #0d6efd; /* Bootstrap Primary Blue */
color: #fff;
}
/* Container for each gallery item */
.gallery-item-inner {
position: relative;
overflow: hidden;
border-radius: 0.375rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Hover effect for clickable gallery items */
.gallery-lightbox {
display: block;
position: relative;
text-decoration: none;
}
.gallery-lightbox:hover .gallery-item-inner {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.gallery-item-inner .img-fluid {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-item-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 2.5rem;
pointer-events: none;
}
.gallery-lightbox:hover .gallery-item-overlay {
opacity: 1;
}
/* Styling for the modal */
#galleryModal .modal-content {
background-color: transparent;
border: none;
}
#galleryModal .modal-header {
border: none;
position: absolute;
top: 0;
right: 0;
z-index: 10;
}
#galleryModal .btn-close {
background-color: white;
border-radius: 50%;
padding: 0.5em;
opacity: 0.9;
}
#galleryModal .modal-body {
padding: 0;
}
/* NEW: Disable lightbox on mobile devices */
@media (max-width: 767px) {
.gallery-lightbox {
pointer-events: none; /* Makes the link unclickable */
}
.gallery-item-overlay {
display: none; /* Hides the zoom icon */
}
}
/* Prevent load-more button clicks from passing through to gallery links */
#load-more-btn {
position: relative;
z-index: 10;
pointer-events: auto;
}
#load-more-btn:focus,
#load-more-btn:active {
outline: none;
}
/* Make sure the row containing the button sits BELOW the grid, not on top */
#load-more-btn.parent-row,
.gallery-section .row.mt-5 {
position: relative;
z-index: 5;
background: #fff;
padding-top: 10px;
}
/* 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
============================================ */