.quoterequest {
    padding: 0 2px;
}

.wall-container {
    padding-left: 5% !important;
    padding-right: 5% !important;
    width: 100%;
}
body { padding-top: 80px; font-family: 'Montserrat', sans-serif; overflow-x: hidden; }
/* Base Body Setup */
body {
    padding-top: 90px; /* Space for the fixed navbar */
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Aligning the Navbar content to our 'Invisible Wall' */
.navbar .container-fluid {
    padding-left: 5% !important;
    padding-right: 5% !important;
}

/* THE NAV LINKS */
.nav-link {
    color: var(--dark-blue) !important;
    font-weight: 600 !important;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

/* THE SLIDING AMBER UNDERLINE */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: var(--brand-amber);
    transition: width 0.3s ease-in-out;
}

.nav-link:hover::after, 
.nav-link.active::after {
    width: 100%;
}

/* THE NAVBAR BUTTON (8px Rounded) */
/* THE NAVBAR BUTTON - Forced Visibility */
.btn-nav-quote {
    background-color: #002D5B !important; /* Direct Dark Blue hex */
    color: #ffffff !important;
    padding: 12px 24px;
    border-radius: 8px; 
    font-size: 0.85rem;
    font-weight: bold;
    border: none;
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 999; /* Ensures it sits on top */
}

.btn-nav-quote i {
    color: #ffffff !important; /* Ensures the clipboard icon is white */
}


.btn-nav-quote:hover {
    background-color: var(--logo-blue);
    transform: translateY(-2px);
}

/* 1. BRAND VARIABLES */
:root {
    --dark-blue: #002D5B;      /* H1, Link, P, and Button color */
    --logo-blue: #004A99;      /* Active/Hover Link color */
    --brand-amber: #FFBF00;    /* Tagline & Underline Amber */
}

/* 2. GENERAL SETUP */
body {
    padding-top: 90px;
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, .hero-description {
    color: var(--dark-blue);
}

/* 3. NAVBAR PRECISION */
.navbar {
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
}
@media(max-width: 425px){
    .navbar{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    }
}

.navbar .container-fluid {
    padding-left: 5% !important;
    padding-right: 5% !important;
}

.logo { width: 25%; }

.nav-item { padding: 0 10px; }

.nav-link {
    color: var(--dark-blue) !important;
    font-weight: 600 !important;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

.nav-link:hover, .nav-link.active {
    color: var(--logo-blue) !important;
}

/* Amber Underline Transition */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0; height: 3px;
    bottom: 0; left: 0;
    background-color: var(--brand-amber);
    transition: width 0.3s ease-in-out;
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

/* Navbar Request Button */
.btn-nav-quote {
    background-color: var(--dark-blue) !important;
    color: #ffffff !important;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: bold;
    border: none;
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* ==========================================================================
   OFF-CANVAS MOBILE SIDEBAR EXTENSION MODULE
   ========================================================================== */

/* GLASS BACKDROP BLUR ENGINE: Fades a premium glass blur over the background when opened */
.offcanvas-backdrop.show {
    backdrop-filter: blur(4px) !important;
    background-color: rgba(0, 32, 96, 0.2) !important; /* Muted brand blue tone overlay */
}

/* CUSTOM STYLED HAMBURGER ICON CORE */
.custom-hamburger-btn:focus,
.custom-hamburger-btn:active {
    box-shadow: none !important; /* Strips ugly browser focus outline halos */
    outline: none !important;
}

.hamburger-box {
    width: 24px;
    height: 18px;
    display: inline-block;
    position: relative;
}

/* Draws the three clean horizontal bars using pure CSS */
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 24px;
    height: 3px;
    background-color: var(--dark-blue); /* Matches primary dark blue token */
    border-radius: 2px;
    position: absolute;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hamburger-inner {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-inner::before {
    content: '';
    top: -7px;
    left: 0;
}

.hamburger-inner::after {
    content: '';
    bottom: -7px;
    left: 0;
}

/* Micro-interaction touch hover: Changes the hamburger lines to Amber on interaction */
.custom-hamburger-btn:hover .hamburger-inner,
.custom-hamburger-btn:hover .hamburger-inner::before,
.custom-hamburger-btn:hover .hamburger-inner::after {
    background-color: var(--brand-amber);
}

/* ==========================================================================
   DYNAMIC RESPONSIVE MATRIX OVERRIDES
   ========================================================================== */

/* Mobile viewports system tuning matrix (Under 991px wide) */
@media (max-width: 991px) {
    /* Clamps mobile drawer side width to 62vw so the blurred home layout remains visible */
    .navbar .offcanvas {
        max-width: 62vw !important;
        background-color: #ffffff !important;
    }
    
    /* Forces link texts inside the drawer to left-align natively matching editorial balance */
    .custom-nav-spacing {
        width: 100% !important;
        text-align: left !important;
        padding-top: 1.5rem;
        padding-bottom: 1rem;
    }
    
    .custom-nav-spacing .nav-item {
        padding: 0px !important;
        margin-bottom: 1.2rem; /* Comfortable vertical spacing targets for thumb-clicking */
    }
    
    .custom-nav-spacing .nav-link {
        display: inline-block !important; /* Locks width limits to text metrics so amber line behaves */
        width: fit-content !important;
    }
    
    /* Aligns your 8px button container to center or scale neatly within mobile constraints */
    .custom-btn-container {
        width: 100% !important;
        justify-content: flex-start !important; /* Aligns button flush under the text links */
        margin-left: 0px !important;
        padding-top: 1rem;
        border-top: 1px solid #f0f4f8;
    }
    
    .btn-nav-quote {
        width: 100% !important; /* Maximizes phone touch targets for better conversion optimization */
        justify-content: center !important;
    }
}

/* Desktop environments recovery system (992px and above) */
@media (min-width: 992px) {
    /* Completely strips off-canvas panel positioning, transforming it back into a flat row layout */
    .navbar .offcanvas {
        position: static !important;
        visibility: visible !important;
        transform: none !important;
        max-width: 100% !important;
        width: 100% !important;
        background-color: transparent !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: row !important;
        flex-grow: 1 !important;
    }
    
    .navbar .offcanvas-body {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
    }
}


/* ==========================================
   GLOBAL CORE CONTAINERS (THE 25% ZOOM LOCK)
   ========================================== */
.inner-centering-box {
    max-width: 1407px !important; /* Edmund's verified master layout threshold */
}

/* ==========================================
   HERO CLEAN STYLING MODULE
   ========================================== */
.hero-section-clean {
    background: radial-gradient(circle at 10% 50%, #ffffff 0%, #f0f4f8 100%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    scroll-margin-top: 80px; 
}

.hero-unification-box {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
}

.hero-text-column {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 5% !important; /* Locks left content edge to your 5% Invisible Wall line */
    padding-right: 40px;
    padding-top: 80px;  
    padding-bottom: 80px; 
}

.hero-tagline-clean {
    color: var(--brand-amber);
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.hero-title-clean {
    color: var(--dark-blue);
    font-size: 3.2rem;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-title-clean strong { 
    font-weight: 800; 
}

.hero-para-clean {
    color: var(--dark-blue);
    line-height: 1.7;
    font-size: 1.05rem;
    max-width: 520px;
    margin-bottom: 35px;
}

.hero-button-track {
    display: flex;
    flex-direction: row;
    gap: 15px;
    flex-wrap: nowrap;
}

.btn-hero-solid {
    background-color: var(--dark-blue) !important;
    color: #ffffff !important;
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.btn-hero-solid:hover {
    background-color: var(--logo-blue) !important;
}

.btn-hero-outline {
    background-color: transparent !important;
    color: var(--dark-blue) !important;
    border: 2px solid var(--dark-blue) !important;
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    transition: all 0.2s ease;
}

.btn-hero-outline:hover {
    background-color: var(--dark-blue) !important;
    color: #ffffff !important;
}

.chevron-amber {
    color: var(--brand-amber) !important;
    margin-left: 15px;
    font-weight: 700;
}

.hero-image-column {
    flex: 0 0 50%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.hero-img-fluid {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

/* ==========================================
   GLOBAL MULTI-DEVICE MEDIA SYSTEM BREAKPOINTS
   ========================================== */

/* Target extreme wide resolutions to keep layout beautifully centered at 25% zoom */
@media (min-width: 1650px) {
    .hero-unification-box {
        max-width: 1407px;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-text-column { 
        padding-left: 0px !important; 
    }
}

@media (max-width: 1399px) {
    .hero-title-clean { font-size: 2.8rem; }
    .hero-text-column { padding-top: 60px; padding-bottom: 60px; }
}

@media (max-width: 1199px) {
    .hero-title-clean { font-size: 2.4rem; }
    .hero-para-clean { font-size: 1rem; margin-bottom: 25px; }
}

/* Tablets & Mobile Stack Configurations (< 991px down to 320px) */
@media (max-width: 991px) {
    .hero-unification-box {
        flex-direction: column; 
        gap: 20px;
    }
    .hero-text-column {
        flex: 0 0 100%;
        text-align: center;
        align-items: center;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 40px;
        padding-bottom: 15px;
    }
    .hero-button-track {
        justify-content: center;
        flex-wrap: wrap;
    }
    .hero-image-column {
        flex: 0 0 100%;
        width: 100%;
        height: 30vh; 
    }
    .hero-img-fluid{
        max-height: 40vh;
    }
    
}

/* Small Smartphone Tuning (iPhone / Android) */
@media (max-width: 768px) {
    .hero-title-clean { font-size: 2rem; }
    .hero-tagline-clean { font-size: 0.8rem; letter-spacing: 1px; }
    
    .hero-button-track {
        flex-direction: column;   
    }
    
}
/* ==========================================================================
   TARGETED PROFILE ENGINE: isolates ultra-short or landscape phone screens
   ========================================================================== */
@media (max-width:991px) and (max-height: 550px) {
    .hero-img-fluid {
        height: 65vh !important;    /* Forces vertical expansion space to show the workers */
        max-height: 65vh !important;
        object-fit: cover !important;
        object-position: center !important; /* Centers the focal frame naturally */
    }
    
    .hero-image-column {
        height: 65vh !important;     /* Opens up the parent box container framework */
    }
}

/* About Section */
#about .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#about .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    border-bottom: 3px solid var(--brand-amber) !important;
}

#about .card {
    border-top: 5px solid var(--dark-blue) !important; /* Makes it look structural */
    transition: all 0.3s ease;
    background: #ffffff;
}

#about .card:hover {
    border-top-color: var(--brand-amber) !important; /* Shifts to gold on hover */
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.175) !important;
}

.value-item i {
    transition: transform 0.3s ease;
}

.value-item:hover i {
    transform: scale(1.2); /* Subtle grow effect when user hovers */
    color: var(--brand-amber) !important;
}

.value-item p {
    font-size: 0.8rem; /* Slightly smaller for the long names */
    color: var(--dark-blue);
    margin-top: 8px;
    line-height: 1.2;
}

/* THE MESSAGE FROM THE MD SECTION */
/* --- GLOBAL CONTAINER CORE (THE 25% ZOOM LOCK) --- */
.inner-centering-box {
    max-width: 1407px !important; /* Edmund's verified master layout threshold */
}

.wall-container {
    padding-left: 5% !important;
    padding-right: 5% !important;
}

/* ==========================================
   LEADERSHIP CLEAN STYLING MODULE
   ========================================== */
.md-text-box {
    border-left: 3px solid var(--brand-amber);
    padding-left: 20px;
}

/* Precise Desktop 100% Text Compression to keep baseline flat */
.md-text-box p.md-p-text {
    font-size: 0.88rem !important; 
    line-height: 1.45 !important;
    margin-bottom: 8px;
}

/* Desktop baseline stretching engine: locks both top and bottom planes flat perfectly */
@media (min-width: 992px) {
    .md-portrait-dynamic {
        object-fit: cover;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-position: top center; /* Head-crop guardrail for large screens and 4K viewports */
    }
    
    .style-container-fixed {
        min-height: 100%;
    }
}

/* SURGICAL BREAKPOINT ENGINE: 
   Resolves the subpixel ratio gap between 992px and 1121px natively. 
   By compressing typography spacing slightly, it shortens the text column 
   to perfectly match the image baseline without relying on background color masks. */
@media (min-width: 992px) and (max-width: 1121px) {
    .md-text-box p.md-p-text {
        font-size: 0.85rem !important;
        line-height: 1.35 !important;
        margin-bottom: 4px !important;
    }
    .md-quote-header {
        font-size: 0.98rem !important;
        margin-bottom: 4px !important;
    }
    .md-title-header {
        font-size: 1.25rem !important;
        margin-bottom: 4px !important;
    }
}

/* Pinned overlay badge with zero vertical or horizontal blanks */
.md-badge-small {
    background: rgba(0, 45, 91, 0.9);
    color: white;
    text-align: center;
    padding: 6px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 0.75rem;
    z-index: 2;
}

/* ==========================================
   GLOBAL MULTI-DEVICE MEDIA SYSTEM BREAKPOINTS
   ========================================== */

/* Tablets & Mobile Stack Configurations (< 991px down to 320px) */
@media (max-width: 991px) {
    /* 80% EXECUTIVE PROFILE CARD ENGINE:
       Shrinks the entire parent column wrapper horizontally on phone viewports and tablets.
       This automatically forces the shadow container, image, and badge to compress together 
       proportionally as a single unified module, completely eliminating horizontal spaces. */
    .md-profile-card-center {
        max-width: 80% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Spacious mobile text formatting to match your target spacing look */
    .md-text-box p.md-p-text {
        font-size: 0.98rem !important;
        line-height: 1.65 !important;
        margin-bottom: 12px;
    }
    
    /* Fluid image properties: prevents vertical stretching or distortion inside the mobile frame */
    .md-portrait-dynamic {
        object-fit: cover;
        width: 100%;
        height: auto;
    }
    
    .md-text-box {
        border-left: none; 
        border-top: 3px solid var(--brand-amber); 
        padding-left: 0;
        padding-top: 15px;
    }
    
    .md-quote-header { font-size: 1rem !important; }
    .md-title-header { font-size: 1.25rem !important; }
}

/* Advanced Width Tuning: protects ultra-narrow phone screens from over-shrinking */
@media (max-width: 425px) {
    .md-profile-card-center {
        max-width: 92% !important; /* Expands to preserve inner grid text spacing on tiny viewports */
    }
}

/* ==========================================
   LEAD ENGINEERS CUSTOM BLUEPRINT MODULE
   ========================================== */
.engineer-avatar-wrapper {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #ffffff;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Micro-interaction hover engine that keeps the site feeling modern and premium */
.engineer-profile-card:hover .engineer-avatar-wrapper {
    transform: translateY(-5px);
    border-color: var(--brand-amber);
}

.engineer-img-fluid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.engineer-name-text {
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.engineer-dash-accent {
    width: 20px;
    height: 2px;
    background-color: var(--brand-amber);
    border-radius: 2px;
}

/* ==========================================
   RESPONSIVE ENGINEER LAYOUT BOUNDARIES
   ========================================== */

/* Tablets Viewport Check (991px down to 768px): 
   Forces the engineers to maintain a beautifully flat side-by-side horizontal line */
@media (max-width: 991px) and (min-width: 768px) {
    .engineer-avatar-wrapper {
        width: 120px;
        height: 120px;
    }
    .engineer-name-text {
        font-size: 1rem;
    }
    .engineer-title-text {
        font-size: 0.78rem !important;
        line-height: 1.3;
    }
}

/* Mobile Smartphones Viewport Check (< 767px down to 320px):
   Shrinks column card boundaries to 85% width and centers them natively to balance hierarchy */
@media (max-width: 767px) {
    .engineer-profile-card {
        max-width: 85% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 20px; /* Separates stacked profiles smoothly */
    }
    .engineer-title-text {
        font-size: 0.88rem !important; /* Matches our relaxed typography mobile target spacing */
        line-height: 1.4;
    }
}
abbr:hover{
    cursor:pointer !important;
}
/* ==========================================
   OUR CORE SERVICES MODULE (BLOCK C)
   ========================================== */
.service-card-wrapper {
    border: 1px solid rgba(0, 45, 91, 0.08);
    background-color: #ffffff;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

/* Operational hover animation matching premium agency standards */
.service-grid-card:hover .service-card-wrapper {
    transform: translateY(-6px);
    box-shadow: 0 1rem 2.5rem rgba(0, 32, 96, 0.15) !important;
}

/* Image bounding box layout rules */
.service-image-frame {
    width: 100%;
    aspect-ratio: 16 / 10; /* Forces matching top baselines across desktops and tablets */
    background-color: #f0f4f8;
    overflow: hidden;
}

.service-img-fluid {
    width: 100%;
    height: auto; /* Fluid height scaling completely prevents squishing and head crops */
    min-height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Subtle operational zoom effect on image hover */
.service-grid-card:hover .service-img-fluid {
    transform: scale(1.04);
}

/* Native browser tooltip indicator styles */
.wtp-abbr-token {
    color: var(--logo-blue);
    cursor: help;
}

/* Typography scale and spacing controls */
.service-title-text {
    font-size: 1.15rem;
    letter-spacing: 0.3px;
    font-weight: 700;
}

.service-desc-text {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
}

/* Pinned "Request a Quote" card action link */
.btn-services-action {
    background-color: transparent !important;
    color: var(--dark-blue) !important;
    border: 2px solid var(--dark-blue) !important;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 8px 16px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-services-action:hover {
    background-color: var(--dark-blue) !important;
    color: #ffffff !important;
}

/* MULTI-DEVICE BREAKPOINT OVERRIDES */
@media (max-width: 1199px) and (min-width: 768px) {
    .service-title-text { font-size: 1.05rem; }
    .service-desc-text { font-size: 0.82rem !important; line-height: 1.4 !important; }
}

@media (max-width: 991px) {
    /* Clamps card width to 85% and centers natively for visual balance */
    .service-grid-card {
        max-width: 85% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 12px;
    }
}

@media (max-width: 425px) {
    .service-grid-card { max-width: 92% !important; }
}

/* ==========================================================================
   COMPLETED PROJECTS BLUEPRINT MODULE (BLOCK D)
   ========================================================================== */
.project-card-wrapper {
    border: 1px solid rgba(0, 45, 91, 0.06);
    background-color: #ffffff;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

.project-title-text {
    font-size: 1.12rem;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

.project-location-text {
    font-size: 0.82rem !important;
}

/* NATIVE COLLAPSE RECOVERY FIX: Overrides collapse defaults to keep desktop flat */
@media (min-width: 992px) {
    .navbar-expand-lg .project-grid-card.collapse,
    .project-grid-card.collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }
}

/* MOBILE AND TABLET ALIGNMENT EQUALIZERS */
@media (max-width: 991px) {
    .project-grid-card {
        max-width: 85% !important; /* Forces 85% mobile width symmetry */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 12px;
    }
    .project-title-text {
        font-size: 1.15rem;
    }
}

@media (max-width: 425px) {
    .project-grid-card {
        max-width: 92% !important; /* Prevents narrow clipping on 360px viewports */
    }
}

/* ==========================================================================
   CORPORATE CONTACT MODULE - DYNAMIC SELECTION SLATE (BLOCK E)
   ========================================================================== */
.contact-form-card {
    border: 1px solid rgba(0, 45, 91, 0.06);
}

.custom-form-input {
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    font-size: 0.9rem !important;
    color: var(--dark-blue) !important;
    transition: all 0.2s ease-in-out !important;
}

.custom-form-input:focus {
    border-color: var(--logo-blue) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 74, 153, 0.15) !important;
    outline: none !important;
}

/* Dynamic State Buttons Matrix */
.btn-dynamic-submit {
    background-color: var(--dark-blue) !important;
    color: #ffffff !important;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    border: none;
    transition: all 0.2s ease-in-out;
}

.btn-dynamic-submit:hover {
    background-color: var(--logo-blue) !important;
    transform: translateY(-2px);
}

/* MULTI-DEVICE RESPONSIVE OVERRIDES */
@media (max-width: 991px) {
    /* Clamps mobile width to 85% for balanced card visual hierarchy */
    .contact-text-column,
    .contact-form-card {
        max-width: 85% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 425px) {
    .contact-text-column,
    .contact-form-card {
        max-width: 92% !important; /* Protects layout on 360px screen width sizes */
    }
}
.git:hover i{
    transform: scale(1.2); /* Subtle grow effect when user hovers */
    color: var(--brand-amber) !important;
}

.git i {
    transition: transform 0.3s ease;
}

/* ==========================================================================
   CORPORATE SLATE FOOTER MODULE (BLOCK F)
   ========================================================================== */
.harremah-slate-footer {
    background-color: #051423 !important; /* Rich heavy dark corporate slate backdrop */
    color: #ffffff !important;
}

.footer-brand-title {
    font-size: 1.5rem;
    letter-spacing: 1px;
}

.footer-subtitle-header {
    color: #ffffff;
    font-size: 1.1rem;
    position: relative;
    padding-bottom: 8px;
}

/* White-to-Amber hover text fade engine (Completely distinct from your header lines) */
.footer-links-list .footer-link-item,
.hover-amber-fade {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.88rem;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.footer-links-list .footer-link-item:hover,
.hover-amber-fade:hover {
    color: var(--brand-amber) !important;
}

.footer-text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Circular corporate social media icon tokens */
.footer-social-circle {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.footer-social-circle:hover {
    background-color: var(--brand-amber);
    color: var(--dark-blue) !important;
    transform: translateY(-2px);
}

.footer-divider-seam {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* MULTI-DEVICE FOOTER COMPRESSION OVERRIDES */
@media (max-width: 991px) {
    .harremah-slate-footer .row > div {
        max-width: 85% !important; /* Forces uniform 85% mobile width center columns */
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: left !important; /* Enforces clean left alignment on tablet blocks */
    }
}

@media (max-width: 425px) {
    .harremah-slate-footer .row > div {
        max-width: 92% !important;
    }
}



/* ==========================================================================
                            CORRECTIONS
   ========================================================================== */
@media (max-width: 1399px) {
    .contact-us-text{
        margin-bottom: 0 !important;
    }
}