/*

Theme Name: Eagle Eye PM Custom Theme

Theme URI: https://www.eagleeyepm.co.uk

Author: Eagle Eye Group Ltd

Description: A custom theme for Eagle Eye Property Maintenance.

Version: 1.1.4 (FIXED: Syntax Error, Layout Restoration)

License: GNU General Public License v2 or later

Text Domain: eagle-eye-pm

*/



/* Import Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Roboto:wght@400;700&display=swap');



/* CSS Variables for Your Brand Colours */

:root {

  --deep-blue: #0056B3;

  --light-grey: #F0F0F0;

  --muted-gold: #B8860B;

  --background-dark: #121212;

  --text-dark: #333;

}



/* Basic Body Styling */

body {

    font-family: 'Roboto', sans-serif;

    margin: 0;

    padding: 0;

    background-color: var(--background-dark);

    color: var(--light-grey);

    overflow-x: hidden;

}



body.body-no-scroll { overflow: hidden; }



h1, h2, h3 { overflow-wrap: break-word; }



/* Global Container */

.container {

    width: 100%;

    max-width: 1100px;

    margin-left: auto;

    margin-right: auto;

    padding-left: 1.5rem;

    padding-right: 1.5rem;

    box-sizing: border-box;

}



/* Main Header Styling */

header {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 0;

    height: 100px;

    background-color: rgba(18, 18, 18, 0.8);

    backdrop-filter: blur(10px);

    width: 100%;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1000;

}



header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.header-left {

    display: flex;

    align-items: center;

    gap: 1.5rem;

}



.logo {

    max-height: 80px;

    width: auto;

}



.header-contact {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

}



.header-contact a {

    color: var(--light-grey);

    text-decoration: none;

    font-size: 0.9rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    transition: color 0.3s;

}



.header-contact a:hover {

    color: var(--muted-gold);

}



.header-contact svg {

    fill: var(--muted-gold);

}



/* =================================

   MOBILE NAVIGATION

   ================================= */

.nav-toggle { display: none; }



.hamburger {

    display: none;

    flex-direction: column;

    justify-content: space-around;

    width: 2rem;

    height: 2rem;

    background: transparent;

    border: none;

    cursor: pointer;

    padding: 0;

    z-index: 1001;

}



.hamburger span {

    width: 2rem;

    height: 3px;

    background: var(--muted-gold);

    border-radius: 10px;

    transition: all 0.3s linear;

    position: relative;

    transform-origin: 1px;

}



.nav-toggle:checked + .hamburger span:nth-child(1) { transform: rotate(45deg); }

.nav-toggle:checked + .hamburger span:nth-child(2) { opacity: 0; transform: translateX(20px); }

.nav-toggle:checked + .hamburger span:nth-child(3) { transform: rotate(-45deg); }



/* Default Nav state */

.main-nav { display: flex; }



/* =================================

   DESKTOP NAVIGATION

   ================================= */

@media (min-width: 768px) {

    .hamburger { display: none; }

    h1 { hyphens: none; }

    

    .main-nav {

        display: flex;

        align-items: center;

        gap: 1.5rem;

    }



    .main-nav a {

        color: var(--light-grey);

        text-decoration: none;

        font-weight: 700;

        transition: color 0.3s, text-shadow 0.3s;

        padding: 1.5rem 0;

        margin: 0;

    }



    .main-nav a:hover,

    .main-nav .active {

        color: var(--muted-gold);

        text-shadow: 0 0 8px hsla(43, 89%, 39%, 0.7);

    }



    .dropdown { position: relative; }



    .dropdown-content {

        display: none;

        position: absolute;

        top: 100%;

        left: 0;

        background-color: #1e1e1e;

        min-width: 240px;

        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

        z-index: 101;

        border-radius: 4px;

        border-top: 2px solid var(--muted-gold);

    }



    .dropdown-content a {

        color: var(--light-grey);

        padding: 12px 16px;

        text-decoration: none;

        display: block;

        text-align: left;

        transition: color 0.3s, text-shadow 0.3s, background-color 0.3s;

    }



    .dropdown-content a:hover {

        background-color: rgba(0,0,0,0.1);

        color: var(--muted-gold);

        text-shadow: 0 0 8px hsla(43, 89%, 39%, 0.7);

    }



    .dropdown:hover .dropdown-content { display: block; }

    .dropdown-arrow { display: none; }

    

    /* Gallery Desktop Fix */

    .gallery-item {

        height: 300px;

        overflow: hidden;

    }



    .gallery-item img {

        height: 100%;

        width: 100%;

        object-fit: cover;

    }

}



/* =================================

   TABLET & MOBILE STYLES (Max 767px)

   ================================= */

@media (max-width: 767px) {

    h1 {

        -webkit-hyphens: auto;

        -ms-hyphens: auto;

        hyphens: auto;

        word-break: break-word;

    }



    .header-contact { display: none; }

    header { height: 80px; }

    .logo, .footer-logo { max-height: 65px; }

    

    .hamburger { display: flex; }



    .nav-toggle:checked + .hamburger {

        position: fixed;

        right: 1.5rem;

        top: 28px;

    }



    .main-nav {

        position: fixed;

        top: 0;

        right: -100%;

        width: 70%;

        max-width: 320px;

        height: 100vh;

        background-color: rgba(30, 30, 30, 0.98);

        backdrop-filter: blur(10px);

        box-shadow: -10px 0 20px rgba(0,0,0,0.2);

        transition: right 0.4s ease-in-out;

        

        flex-direction: column;

        justify-content: center;

        align-items: stretch;

        gap: 0;

        text-align: center;

        padding: 1rem 0;

    }

    

    .nav-toggle:checked ~ .main-nav {

        right: 0;

    }

    

    .main-nav a {

        font-size: 1.2rem;

        padding: 1rem 1.5rem;

        color: var(--light-grey);

        text-decoration: none;

        transition: color 0.3s, text-shadow 0.3s;

        display: flex;

        justify-content: center;

        align-items: center;

    }



    .main-nav a:hover,

    .main-nav .active {

        color: var(--muted-gold);

        text-shadow: 0 0 8px hsla(43, 89%, 39%, 0.7);

    }

    

    .dropdown-toggle { position: relative; }

    .dropdown-arrow { display: none; } /* Simplified for mobile */



    .dropdown-content {

        background-color: rgba(0,0,0,0.2);

        display: block; /* Always show children on mobile for simplicity */

    }

    .dropdown-content a {

        font-size: 1rem;

        padding-left: 3rem;

        justify-content: flex-start;

        text-align: left;

    }



    .about-grid, .service-grid {

        display: block !important;

        grid-template-columns: none !important;

        gap: 0 !important;

    }



    .main-content,

    .sidebar-content {

        width: 100% !important;

        box-sizing: border-box !important;

        flex: none !important;

        float: none !important;

    }



    .sidebar-content { margin-top: 2rem; }

    .contact-container { flex-direction: column; }

    .footer-columns { flex-direction: column; }

    .footer-bottom { flex-direction: column; text-align: center; }

}



/* Hero Section (Homepage) */

.hero {

    position: relative;

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    overflow: hidden;

    padding-top: 100px;

    box-sizing: border-box;

}



#hero-video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: -1;

    filter: brightness(0.4);

}



.hero-content {

    position: relative;

    z-index: 2;

    padding: 20px;

    width: 100%;


}



.hero-content h1 {

    font-family: 'Orbitron', sans-serif;

    font-size: 3.2rem;

    margin-bottom: 0.5rem;

    color: #ffffff;

}



.page-intro {

    font-size: 1.25rem;

    max-width: 600px;

    margin: 0 auto 2rem auto;

    line-height: 1.6;

}



/* Services Section (Homepage) */

.services-section {

    padding: 4rem 0;

    text-align: center;

    background-color: var(--deep-blue);

}



.services-section h2 {

    font-family: 'Orbitron', sans-serif;

    font-size: 2.5rem;

    margin-bottom: 2rem;

    color: #ffffff;

}



.service-cards {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 2rem;

}



/* Service Card Styling */

.card-link {

    text-decoration: none;

    color: inherit;

    display: flex;

    flex-direction: column;

}



.card {

    background-color: rgba(0, 0, 0, 0.2);

    border: 1px solid var(--muted-gold);

    border-radius: 8px;

    width: 300px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

    opacity: 0;

    transform: translateY(50px);

    transition: opacity 0.6s ease-out, transform 0.3s ease-out, box-shadow 0.3s ease-out;

}



.card-link:hover .card {

    transform: translateY(-10px);

    box-shadow: 0 10px 20px rgba(184, 134, 11, 0.15);

}



.card img {

    width: 100%;

    height: 200px;

    object-fit: cover;

    flex-shrink: 0;

}



.card-content {

    padding: 0 1.5rem 1.5rem 1.5rem;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



.card h3 {

    font-family: 'Orbitron', sans-serif;

    margin-top: 1.5rem;

    margin-bottom: 0.5rem;

    color: var(--muted-gold);

}



.card p {

    margin-top: 0;

    flex-grow: 1;

}



.card.visible { opacity: 1; transform: translateY(0); }

.card:nth-child(2) { transition-delay: 0.1s; }

.card:nth-child(3) { transition-delay: 0.2s; }

.card:nth-child(4) { transition-delay: 0.3s; }

.card:nth-child(5) { transition-delay: 0.4s; }

.card:nth-child(6) { transition-delay: 0.5s; }





/* ========================================================== */

/* MASTER PAGE BANNER & SPACING (Clean & Standardised) */

/* ========================================================== */



/* 1. Reset Main Container */

/* Ensures no hidden margins interfere with spacing */

main, main#primary, .site-main {

    margin-top: 0 !important;

    padding-top: 0 !important;

    display: block;

}



/* 2. The Universal Blue Banner */

.page-header-banner {

    /* 140px is the "Goldilocks" size: Clears header + looks professional */

    padding-top: 140px !important; 

    padding-bottom: 3rem !important;

    padding-left: 1.5rem !important;

    padding-right: 1.5rem !important;

    

    background: linear-gradient(to bottom, #003366 0%, var(--deep-blue) 100%) !important;

    border-bottom: 5px solid var(--muted-gold) !important;

    margin-bottom: 0 !important;

    width: 100%;

    text-align: center;

    position: relative;

    z-index: 1;

}



/* 3. Banner Title */

.page-header-banner h1 {

    color: var(--muted-gold) !important;

    font-family: 'Orbitron', sans-serif;

    font-size: 3rem;

    margin-top: 0 !important;

    margin-bottom: 0.5rem !important;

    line-height: 1.2;

    text-shadow: 3px 3px 0px #000, 0px 0px 15px rgba(0,0,0,0.7) !important;

}



/* 4. Banner Subtitle */

.page-header-banner p.page-intro {

    color: #ffffff !important; 

    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);

    font-size: 1.2rem;

    max-width: 800px;

    margin: 0 auto;

}



/* 5. Content Spacing Below Banner */

/* THIS IS WHERE THE ERROR WAS - NOW FIXED */

.main-content, 

.gallery-content, 

.resources-content, 

.blog-content,

.contact-container,

.about-content,

.service-page-content {

    padding-top: 3rem !important; /* Consistent gap below the banner */

}



/* Mobile Adjustment for Banner */

@media (max-width: 767px) {

    .page-header-banner {

        /* 1. Prevent Horizontal Scroll */

        box-sizing: border-box !important; 

        width: 100% !important;

        overflow-x: hidden !important; 



        /* 2. Height Adjustment */

        padding-top: 130px !important; 

        padding-bottom: 2rem !important;

        padding-left: 1rem !important;

        padding-right: 1rem !important;

    }

    

    .page-header-banner h1 {

        font-size: 2rem !important;

    }

}





/* =================================

   INNER CONTENT STYLING

   ================================= */

/* 1. About & Service Pages (Remove Top Padding to stop the gap) */

.about-content, 

.service-content {

    padding-top: 0 !important;   

    padding-bottom: 2rem !important;

}



/* 2. Gallery Grid (Keep as is, since you said it looks fine) */

.gallery-grid-section {

    padding: 2rem 0;

}



.main-content h2 {

    font-family: 'Orbitron', sans-serif;

    font-size: 2rem;

    color: var(--muted-gold);

}



.main-content p, .main-content ul li {

    line-height: 1.7;

}


/* =================================
   MAIN CONTENT LISTS (Landlord & Maintenance)
   ================================= */

/* 1. CONTAINER POSITIONING */
/* Desktop: Slide Left */
@media only screen and (min-width: 768px) {
    .main-content ul {
        list-style: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        
        /* Desktop Shift: Pulls it left */
        position: relative !important;
        left: -20px !important; 
    }
}

/* Mobile: Reset Position (Fixes ticks falling off screen) */
@media only screen and (max-width: 767px) {
    .main-content ul {
        list-style: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        
        /* Mobile Reset: Sits safely on screen */
        position: relative !important;
        left: 0px !important; 
    }
}

/* 2. THE LIST ITEMS (Safety Zone) */
.main-content ul li {
    position: relative !important;
    padding-left: 35px !important; /* Space for the tick */
    margin-bottom: 0.75rem !important;
}

/* 3. THE TICKS (Restored) */
.main-content ul li::before {
    content: '\2714' !important;   /* The Tick Symbol */
    font-weight: bold !important;
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;           /* Adjust vertical height */
    width: 25px !important;
    
    /* Ensure color is correct (Blue by default for these pages) */
    color: #3399ff !important; 
}

/* 3. THE ITEMS (Safety Zone for Tick) */
.main-content ul li {
    position: relative !important;
    /* Keeps text 35px away from the edge so tick fits */
    padding-left: 35px !important; 
    margin-bottom: 0.75rem !important;
}



.sidebar-content,
.contact-info,
.contact-form {
    /* Midnight Glass Theme */
    background: linear-gradient(145deg, rgba(40, 40, 40, 0.9) 0%, rgba(10, 25, 40, 0.95) 100%) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(184, 134, 11, 0.3) !important; /* Gold Border */
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    padding: 2rem !important;

    /* Layout Safety */
    box-sizing: border-box !important;
    width: 100%;
    display: block;
    text-align: left !important; /* Ensures text stays left-aligned */
}



/* --- SIDEBAR IMAGE FIX (Stops the scrollbar) --- */
.sidebar-content img,
.contact-info img,
.sidebar-image {
    max-width: 100% !important;  /* Forces image to fit inside the box */
    height: auto !important;     /* Keeps the shape correct */
    display: block !important;
    object-fit: contain !important;
    border-radius: 8px !important; /* Adds rounded corners to match the box */
    margin-bottom: 1.5rem !important; /* Adds space below the picture */
}


.sidebar-content h3 {

    font-family: 'Orbitron', sans-serif;

    color: var(--muted-gold);

    margin-top: 0;

}



.sidebar-content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important; 
    text-align: left !important; /* Force Left Alignment */
    
    /* THE SHIFT: Uses relative positioning to ignore conflicts */
    position: relative !important; 
    left: -15px !important; /* Adjust this number: -20px moves it further left */
}

.sidebar-content ul li {

    margin-bottom: 0.5rem;

    padding-left: 25px;

    position: relative;

}



/* Sidebar Gold Checkmark */

.sidebar-content ul li::before {

    content: '✔';

    color: var(--muted-gold);

    position: absolute;

    left: 0;

    font-weight: bold;

}



/* Sidebar Blue Headings */

.sidebar-content ul li p strong {

    color: #3399ff !important;

    display: block;

    margin-bottom: 5px;

    font-size: 1.05rem;

}



.sidebar-content .cta-button {

    width: 100%;

    text-align: center;

    margin-top: 1.5rem;

    box-sizing: border-box;

}



.contact-container {

    display: flex;

    flex-wrap: wrap;

    gap: 2rem;

    padding-top: 2rem;

}



/* =================================

   Contact Form 7 Styling

   ================================= */

.contact-form {

    flex: 2;

    min-width: 300px;

    background-color: #1e1e1e;

    padding: 2rem;

    border-radius: 8px;

    border: 1px solid #333;

    box-sizing: border-box;

}



.contact-info {

    flex: 1;

    min-width: 300px;

    background-color: #1e1e1e;

    padding: 2rem;

    border-radius: 8px;

    border: 1px solid #333;

    box-sizing: border-box;

    /* FIXED: Changed from center to left to match your PHP */

    text-align: left !important; 

}



/* General styling for all form controls (input, textarea) */

.wpcf7-form-control {

    width: 100%;

    padding: 10px;

    background-color: #333;

    border: 1px solid #555;

    border-radius: 4px;

    color: var(--light-grey);

    font-size: 1rem;

    box-sizing: border-box;

    transition: border-color 0.3s, box-shadow 0.3s;

    margin-top: 10px !important;

    display: block !important;

}



.wpcf7-form-control.wpcf7-textarea { resize: vertical; }



.wpcf7-form-control:focus {

    outline: none;

    border-color: var(--muted-gold);

    box-shadow: 0 0 8px hsla(43, 89%, 39%, 0.3);

}



.wpcf7-submit {

    background-color: var(--muted-gold);

    color: #000;

    padding: 15px 30px;

    text-decoration: none;

    font-weight: 700;

    border-radius: 5px;

    transition: transform 0.3s, background-color 0.3s;

    display: inline-block;

    width: 100%;

    border: none;

    cursor: pointer;

    font-size: 1.1rem;

    text-align: center;

}



.wpcf7-submit:hover {

    background-color: #d4a012;

    transform: scale(1.05);

}



.wpcf7-form p { margin-bottom: 25px !important; }



.wpcf7-not-valid-tip {

    color: #FF0000;

    font-size: 0.85rem;

    display: block;

    margin-top: 5px;

}



.wpcf7-response-output {

    margin: 1em 0.5em;

    padding: 0.2em 1em;

    border: 2px solid #00a0d2;

    background-color: #fff;

    color: #000;

}



.contact-info p a {

    color: var(--light-grey);

    text-decoration: none;

    transition: color 0.3s;

}



.contact-info h3, .contact-info h4 {

    font-family: 'Orbitron', sans-serif;

    color: var(--muted-gold);

    border-bottom: 1px solid var(--muted-gold);

    padding-bottom: 0.5rem;

    margin-bottom: 1rem;

    /* FIXED: Changed from center to left */

    text-align: left !important;

}



.contact-info strong.text-blue { color: #3399ff !important; }

.contact-form h3, .contact-form h4 { color: var(--muted-gold) !important; }

.contact-form ul li strong, .contact-form p strong { color: #3399ff !important; }



.contact-info p { line-height: 1.6; margin-bottom: 1.2rem; }

.contact-info .hours { margin-top: 2rem; }



.contact-info .special-note {

    margin-top: 2rem;

    padding: 1rem;

    background-color: rgba(0, 86, 179, 0.2);

    border-left: 3px solid var(--deep-blue);

    border-radius: 4px;

}



.form-group { margin-bottom: 1.5rem; }

.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 700; color: var(--light-grey); }

.form-group input, .form-group textarea {

    width: calc(100% - 20px);

    padding: 10px;

    background-color: #333;

    border: 1px solid #555;

    border-radius: 4px;

    color: var(--light-grey);

    font-size: 1rem;

    box-sizing: border-box;

}



.whatsapp-button {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    background-color: #25D366;

    color: white;

    padding: 15px;

    border-radius: 8px;

    text-decoration: none !important;

    font-weight: 700;

    font-size: 1rem;

    margin-top: 1rem;

    margin-bottom: 1rem;

    transition: background-color 0.3s ease;

}

.whatsapp-button:hover { background-color: #1DA851; color: white; text-shadow: none; }



.remote-cta {

    background-color: #1e1e1e;

    padding: 3rem 2rem;

    margin: 3rem 0;

    border-radius: 8px;

    text-align: center;

}

.remote-cta h2 {

    font-family: 'Orbitron', sans-serif;

    color: var(--muted-gold);

    font-size: 2rem;

    margin-top: 0;

}

.remote-cta p { max-width: 650px; margin: 1rem auto 0; line-height: 1.7; }



.map-section {

    height: 450px;

    margin: 3rem 0;

    border-radius: 8px;

    overflow: hidden;

}

.map-section iframe {

    width: 100%;

    height: 100%;

    filter: invert(90%) grayscale(90%) brightness(1.1) contrast(0.9);

}



/* Gallery Page Specifics */

.gallery-intro { padding: 4rem 0 0 0; }

.gallery-intro .container { position: relative; }

.logo-animation-video { width: 100%; max-width: 800px; margin: 0 auto; display: block; border-radius: 8px; }

#volume-toggle {

    position: absolute; bottom: 1.5rem; right: 1.5rem;

    background: transparent; border: none; width: 44px; height: 44px;

    cursor: pointer; z-index: 10; padding: 0;

}

#volume-toggle svg { width: 28px; height: 28px; fill: #fff; filter: drop-shadow(0 0 4px rgba(0,0,0,0.7)); }

.hidden { display: none; }



.gallery-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 1.5rem;

    align-items: stretch;

    justify-items: center;

}

.gallery-item img {

    width: 100%; height: auto; display: block;

    border-radius: 8px; border: 2px solid var(--muted-gold);

    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

}

.gallery-item img:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }



.gallery-page .cta-gallery, .gallery-page .cta-gallery h2, .gallery-page .cta-gallery p { text-align: center !important; }

.gallery-page .cta-gallery .cta-button { display: inline-block !important; margin-left: auto !important; margin-right: auto !important; }



/* =================================

   FOOTER (Centered)

   ================================= */

footer {

    background-color: #1e1e1e;

    color: #aaa;

    padding: 3rem 0;

}



.footer-columns {

    display: flex;

    flex-wrap: wrap;

    gap: 2rem;

    margin-bottom: 2rem;

}



.footer-col { 

    flex: 1; 

    min-width: 220px; 

    text-align: center !important; 

}



/* Ensure any paragraphs (address/phone) inside are also forced to center */

.footer-col p, .footer-col a {

    text-align: center !important;

}



.footer-col-logo { flex-grow: 1.5; text-align: center; }



/* Logo Styling */

.footer-logo {

    max-height: 80px;

    margin-bottom: 1rem;

    width: auto;

}

.footer-col-logo p { font-size: 0.9rem; line-height: 1.6; }



/* HEADERS -> ELECTRIC BLUE */

.footer-col h4, 

.footer-col h4 a {

    font-family: 'Orbitron', sans-serif;

    color: #3399ff !important; /* Electric Blue */

    margin-top: 0;

    margin-bottom: 1rem;

    border-bottom: 1px solid #444;

    padding-bottom: 0.75rem;

    position: relative;

    text-align: center;

    text-decoration: none;

}



/* UNDERLINE BAR -> GOLD */

.footer-col h4::after {

    content: ''; position: absolute; bottom: -1px; left: 50%;

    transform: translateX(-50%); width: 50px; height: 2px;

    background-color: var(--muted-gold);

}



.footer-col ul { list-style: none; padding: 0; margin: 0; text-align: center; }

.footer-col ul li { margin-bottom: 0.75rem; }



/* LINKS -> GREY (Default) */

.footer-col a {

    color: #aaa;

    text-decoration: none;

    transition: color 0.3s, text-shadow 0.3s;

}



/* HOVER -> GOLD */

.footer-col a:hover, .footer-col a.active {

    color: var(--muted-gold);

    text-shadow: 0 0 6px hsla(43, 89%, 39%, 0.5);

}



/* --- SPECIAL: CNC SERVICES LINK -> SOLID GOLD BAR --- */

a.footer-cnc-link {

    display: block;        

    margin-top: 15px;

    color: var(--muted-gold) !important; 

    font-weight: bold;

    font-size: 0.95rem;

    text-decoration: none;

    

    /* Solid Gold Bar */

    border-bottom: 2px solid var(--muted-gold); 

    padding-bottom: 4px;

    

    /* Centering */

    width: fit-content;

    margin-left: auto;

    margin-right: auto;

}



a.footer-cnc-link:hover {

    color: #ffffff !important; 

    text-shadow: 0 0 10px var(--muted-gold); 

    border-bottom-color: #ffffff; /* Bar turns white on hover */

}



/* Social Icons */

.social-icons {

    display: flex; gap: 1rem; margin-top: 1rem; justify-content: center;

}

.social-icons a svg { width: 32px; height: 32px; fill: #aaa; transition: fill 0.3s; }



/* Brand Specific Hover Colours */

.social-icons a.linkedin:hover svg { fill: #0077b5 !important; } /* LinkedIn Blue */

.social-icons a.facebook:hover svg { fill: #1877F2 !important; } /* Facebook Blue */

.social-icons a.instagram:hover svg { fill: #E1306C !important; } /* Instagram Pink */



.social-icons a { display: inline-block; transition: transform 0.3s; }

.social-icons a:hover { transform: scale(1.1); }



/* --- PAYMENT ICONS --- */

.payment-icon {

    display: inline-block !important; 

    width: 50px !important;           

    height: 32px !important;          

    background-repeat: no-repeat; 

    background-position: center;

    border-radius: 0; 

}



/* Footer Bottom Section */

.footer-bottom {

    border-top: 1px solid #444;

    padding-top: 1.5rem;

    margin-top: 2rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 1rem;

    text-align: center;

    font-size: 0.9rem;

}



/* =================================

   SERVICE PAGE STYLES

   ================================= */

.service-page-content .service-content { padding: 2rem 0; }

.benefit-item { margin-bottom: 2rem; }

.benefit-item h4 {

    display: flex; align-items: center; gap: 0.75rem;

    font-size: 1.2rem; color: var(--muted-gold); margin: 0 0 0.5rem 0;

}

.benefit-item h4 svg {

    stroke: var(--muted-gold); width: 24px; height: 24px; flex-shrink: 0;

}

.benefit-item p { margin: 0; color: #aaa; padding-left: calc(24px + 0.75rem); }



.applications-section {

    background-color: var(--deep-blue);

    padding: 3rem 0; text-align: center;

}

.applications-section h2 {

    font-family: 'Orbitron', sans-serif; color: #ffffff; margin-top: 0;

}

.applications-grid {

    display: flex; flex-wrap: wrap; justify-content: center;

    gap: 1rem; padding: 0 1.5rem;

}

.applications-grid span {

    background-color: rgba(0, 0, 0, 0.2);

    padding: 0.75rem 1.5rem; border-radius: 20px;

    border: 1px solid var(--muted-gold); font-weight: 700;

}



.service-cta { text-align: center; padding: 3rem 0; }

.service-cta h2 { font-family: 'Orbitron', sans-serif; font-size: 2.5rem; color: var(--muted-gold); }

.service-gallery-section { padding: 2rem 0; text-align: center; }

.service-gallery-section h2 {

    font-family: 'Orbitron', sans-serif; font-size: 2.5rem; margin-bottom: 2rem; color: var(--muted-gold);

}



/* =================================

   FAQ PAGE STYLING

   ================================= */

.faq-content { max-width: 900px; margin: 0 auto; }

.faq-list { margin-top: 2rem; }

.faq-category h2 {

    font-family: 'Orbitron', sans-serif; font-size: 1.8rem;

    color: var(--deep-blue); border-bottom: 2px solid var(--muted-gold);

    padding-bottom: 0.5rem; margin-top: 3rem; margin-bottom: 2rem;

    text-align: center !important;

}

.qa-item { padding: 1.5rem 0; border-bottom: 1px dashed #444444; }

.faq-category .qa-item:last-child { border-bottom: none; }

.question {

    display: block; font-weight: 700; font-size: 1.15rem;

    color: var(--muted-gold); margin-bottom: 0.5rem;

}

.answer {

    display: block; padding-left: 20px; font-size: 1rem;

    line-height: 1.6; color: var(--light-grey); margin-top: 0;

}

.cta-faq {

    background: #1e1e1e; padding: 2rem; margin-top: 4rem;

    text-align: center; border-left: 5px solid var(--muted-gold);

    border-radius: 4px;

}

.cta-faq h2 {

    margin-top: 0; font-size: 1.5rem; color: var(--muted-gold);

    font-family: 'Orbitron', sans-serif; text-align: center !important;

}

.faq-page .main-content h2, .faq-page .lead-in-text, .faq-page .cta-faq p {

    text-align: center !important; margin-left: auto; margin-right: auto;

}



/* =================================

   GUIDE PAGES (Customer, Inventory, Maintenance)

   ================================= */

.guide-content, .download-guide-content { max-width: 800px; margin: 0 auto; }

.guide-step {

    position: relative; padding: 2rem 0 2rem 80px;

    border-left: 5px ridge var(--muted-gold); margin-bottom: 3rem;

    text-align: left; transition: background-color 0.3s;

}

.step-number {

    position: absolute; left: 0; top: 2.2rem;

    height: 55px; width: 55px;

    background: linear-gradient(135deg, #FFD700, var(--muted-gold));

    border-radius: 50%; line-height: 55px; text-align: center;

    color: var(--background-dark); font-family: 'Orbitron', sans-serif;

    font-size: 0.95rem; font-weight: 700; transform: translateX(-50%);

    box-shadow: 0 0 3px rgba(255, 204, 0, 0.3);

    transition: transform 0.3s, box-shadow 0.3s;

}

.guide-step:hover .step-number {

    transform: translateX(-50%) scale(1.08);

    box-shadow: 0 0 25px 5px var(--deep-blue);

}

.guide-step h2 {

    font-family: 'Orbitron', sans-serif; color: var(--muted-gold);

    margin-top: 1.5rem; font-size: 1.6rem; text-align: left;

}

.guide-step .guide-sub-heading {

    font-family: 'Orbitron', sans-serif; color: var(--deep-blue) !important;

    margin-top: 1.2rem; font-size: 1.2rem; font-weight: 500;

}

#step-2 .step-number { top: 2.0rem; }

#step-3 .step-number { top: 2.5rem; }

#step-4 .step-number { top: 2.3rem; }

#step-5 .step-number { top: 2.3rem; }

.guide-step p { text-align: left; color: var(--light-grey); }

.guide-step strong { font-weight: bold; }

.guide-step ol, .guide-step ul {

    list-style-type: decimal; padding-left: 20px; color: var(--light-grey); margin-bottom: 1.5rem;

}

.guide-step ul { list-style-type: disc; }

.guide-step ul li, .guide-step ol li { line-height: 1.6; margin-bottom: 0.5rem; color: var(--light-grey); }

.cta-guide {

    background: #1e1e1e; padding: 3rem; text-align: center;

    border-radius: 8px; border: 1px solid var(--muted-gold); margin-top: 4rem;

}

.cta-guide h2 { color: var(--muted-gold); font-size: 1.8rem; margin-top: 0; }



@media (max-width: 767px) {

    .guide-step { padding-left: 20px; border-left: none; }

    .step-number { position: static; transform: none; margin: 0 0 1rem 0; float: none; line-height: 55px; }

}



/* =================================

   LANDLORD SOLUTIONS (Float Layout)

   ================================= */

/* FIXED: Removed top padding to prevent double-gap */

.content-wrapper { 

    overflow: auto; 

    padding-top: 0 !important; /* The Key Fix */

    padding-bottom: 2rem; 

}

.content-wrapper .main-content { overflow: hidden; width: auto; text-align: left; }

.main-content h2, .main-content h3 { text-align: left !important; }

.guide-sub-heading {

    font-family: 'Orbitron', sans-serif; color: var(--deep-blue) !important;

    font-size: 1.35rem; margin-top: 2.5rem; margin-bottom: 1rem;

    padding-bottom: 0.5rem; border-bottom: 1px solid rgba(184, 134, 11, 0.3);

}

.pricing-container { padding: 4rem 0; text-align: center; clear: both; }

.pricing-container h2 { font-family: 'Orbitron', sans-serif; color: var(--muted-gold); font-size: 2.5rem; margin-bottom: 1rem; }

.pricing-container h3 { color: var(--light-grey); font-size: 1.2rem; margin-top: 2rem; margin-bottom: 1rem; text-align: center !important; }

.pricing-table { margin-left: auto; margin-right: auto; }

.pricing-table td, .pricing-table th { text-align: center !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

/* FIXED: This restores the side-by-side layout on Desktop */

@media (min-width: 768px) {

    .content-wrapper .sidebar-content.float-right {

        float: right;

        width: 30%;

        margin-left: 2rem;

        margin-top: 0 !important; /* aligned with top of text */

    }

}



/* =================================

   ABOUT US PAGE (Grid)

   ================================= */

.main-content h3 {

    font-family: 'Orbitron', sans-serif; color: var(--deep-blue);

    font-size: 1.35rem; margin-top: 2.5rem; margin-bottom: 1rem;

    padding-bottom: 0.5rem; border-bottom: 1px solid var(--muted-gold);

    text-align: left;

}

.main-content p strong { color: var(--muted-gold); }

@media (min-width: 768px) {

    .about-grid {

        display: grid !important; grid-template-columns: 2fr 1fr !important;

        gap: 3rem !important; align-items: start !important; text-align: left !important;

    }

}

.about-grid .main-content, .about-grid .sidebar-content {

    width: auto !important; float: none !important; text-align: left !important; overflow: visible !important;

}

@media (max-width: 767px) {

    .about-grid { display: block !important; grid-template-columns: 1fr !important; }

}



/* =================================
   RESOURCES CONTENT & GLASS BOX FIX
   ================================= */
.resources-content h2 {
    text-align: center !important;
}

/* Force side-by-side layout */
.template-list, 
.link-group {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 2rem !important;
    margin-bottom: 3rem !important;
    width: 100% !important;
}

/* The Glass Boxes */
.template-item, 
.link-item {
    background: linear-gradient(145deg, rgba(40, 40, 40, 0.9) 0%, rgba(10, 25, 40, 0.95) 100%) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(184, 134, 11, 0.3) !important;
    border-radius: 4px !important;
    padding: 2.5rem 2rem !important;
    /* FIXED: Center everything inside the box */
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}


/* Header styling inside boxes - CENTERED */
.template-item h3, 
.link-item h3 {
    color: #3399ff !important;
    font-family: 'Orbitron', sans-serif !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1.5rem !important;
    
    /* THE FIX: Snaps the title to the centre */
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

/* Final Button Override for this specific page */
.resources-content .cta-button {
    color: #ffffff !important;
    border: 2px solid var(--muted-gold) !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* =================================

   INVENTORY & MAINTENANCE ALIGNMENT

   ================================= */

.inventory-guide-page .template-structure h2, .inventory-guide-page .template-structure h3,

.maintenance-guide-page .template-structure h2, .maintenance-guide-page .template-structure h3,

.inventory-guide-page .instructional-guide > h2, .maintenance-guide-page .instructional-guide > h2,

.inventory-guide-page .cta-guide h2, .maintenance-guide-page .cta-guide h2,

.inventory-guide-page .cta-guide, .maintenance-guide-page .cta-guide,

.inventory-guide-page .lead-in-text, .maintenance-guide-page .lead-in-text,

.inventory-guide-page .download-cta-section, .maintenance-guide-page .download-cta-section {

    text-align: center !important;

}

.inventory-guide-page .cta-guide .cta-button, .maintenance-guide-page .cta-guide .cta-button {

    margin-left: auto !important; margin-right: auto !important; display: inline-block !important;

}



/* =================================

   TERMS & PRIVACY

   ================================= */

.terms-conditions-page h2 {

    text-align: center !important; margin-top: 3rem !important;

    margin-bottom: 1.5rem !important; color: var(--muted-gold) !important;

}

.terms-conditions-page ol li { padding-left: 1rem; margin-bottom: 0.5rem; }

.privacy-policy-page .policy-navigation ul li::before { content: none !important; display: none !important; }

.privacy-policy-page .policy-navigation ul li { padding-left: 0 !important; margin-bottom: 1rem !important; list-style: none !important; }

.privacy-policy-page .policy-navigation ul li a {

    display: inline-block; padding: 12px 25px; border: 1px solid var(--muted-gold);

    border-radius: 5px; background-color: rgba(0,0,0,0.3);

    color: var(--muted-gold) !important; text-decoration: none; transition: all 0.3s ease;

}

.privacy-policy-page .policy-navigation ul li a:hover {

    background-color: var(--muted-gold); color: #000 !important; transform: translateY(-2px);

}

.privacy-policy-page .policy-navigation ul li span {

    display: block; font-size: 0.85rem; margin-top: 0.5rem; color: #999 !important;

}

.privacy-policy-page .policy-navigation h2 {

    text-align: center !important; width: 100% !important; display: block !important;

    margin-left: auto !important; margin-right: auto !important;

}



/* ========================================================== */

/* PROPERTY GUARDIAN PLANS - MASTER SECTION (CLEAN) */

/* ========================================================== */



/* 1. TOP SECTION (Centered) */

.intro-centered-wrapper {

    max-width: 800px;

    

    /* FIXED: Removed top margin because the Banner already provides spacing */

    margin: 0 auto 40px auto !important; 

    

    text-align: center;

    padding-top: 0 !important;

}



.intro-text h2 {

    color: var(--muted-gold) !important; 

    margin-bottom: 20px;

    font-family: 'Orbitron', sans-serif;

}



.intro-text p {

    color: #e0e0e0;

    font-size: 1.1rem;

}



/* CNC Technical Box */

.technical-box.centered-box {

    background: linear-gradient(135deg, #0a1f33 0%, #000000 100%);

    border: 1px solid #1e5687;

    padding: 25px;

    margin: 30px auto;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.5);

}

.technical-box h3 {

    color: #1e5687;

    margin-bottom: 10px;

    font-family: 'Orbitron', sans-serif;

}

.technical-box p {

    color: #cccccc;

    font-size: 0.95rem;

}



/* 2. DIRECTOR'S GUARANTEE (Master Alignment Fix) */
.directors-guarantee-row {
    margin-top: 30px;
    padding: 20px 0; /* Removed side padding to prevent shifting */
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    
    /* MATCH THE CARDS: Force the same width and centering */
    width: 100%;
    max-width: 1100px; 
    margin-left: auto !important;
    margin-right: auto !important;
}

.guarantee-items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    padding: 0;
    margin: 0 auto;
    width: fit-content; /* Centers the group of items perfectly */
}

/* MOBILE OVERRIDE: Switch to Vertical Column */
@media (max-width: 767px) {
    .guarantee-items {
        display: inline-flex !important; /* Shrinks the box to fit content */
        flex-direction: column !important; /* Stacks items vertically */
        align-items: flex-start !important; /* Forces ticks to line up on the LEFT */
        text-align: left !important; 
        gap: 15px !important;
    }
}

/* Item Styling */
.g-item {
    color: #ffffff !important; 
    font-weight: bold;
    font-size: 0.9rem;
    display: flex; 
    align-items: center; 
    justify-content: center;
}

/* Mobile Item Adjustment */
@media (max-width: 767px) {
    .g-item {
        justify-content: flex-start !important; /* Locks text to the start on mobile */
        width: 100%;
    }
}

/* The Gold Tick */
.g-item::before {
    content: '\2714';
    color: var(--muted-gold) !important; 
    font-size: 1.2rem;
    margin-right: 15px; 
    line-height: 1; 
    flex-shrink: 0; 
}


.section-divider {

    border: 0;

    border-top: 1px solid rgba(255,255,255,0.1);

    margin: 50px 0;

}


/* 3. CARD CONTAINER (Grid Fix) */
.plan-cards-section { padding: 2rem 0; }

.plan-cards-section h2 {
    color: var(--muted-gold) !important;
    font-family: 'Orbitron', sans-serif;
    text-shadow: 2px 2px 0px #000;
}

.plan-cards {
    display: grid;
    /* ADJUSTED: Increased gap to 30px to prevent card overlap */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; 
    margin-top: 40px;
}

/* 4. 3D FLIP CARDS (Compact) */
.plan-card {
    background-color: transparent;
    perspective: 1000px;
    height: 580px; 
    margin-bottom: 30px;
    cursor: pointer;
}

.plan-card-inner {
    position: relative; width: 100%; height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    border-radius: 15px;
}

.plan-card:hover .plan-card-inner { transform: rotateY(180deg); }

.plan-front, .plan-back {
    position: absolute; width: 100%; height: 100%;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    border-radius: 15px;
    border: 1px solid #2a5d8f;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
}

/* Front Face */
.plan-front {
    background: linear-gradient(160deg, #1e5687 0%, #0a1f33 100%);
    color: white;
    justify-content: center; align-items: center; padding: 20px;
    /* FIX: Ensures button is never clipped */
    overflow: visible !important; 
}

.plan-front h3 {
    font-size: 1.6rem;
    color: var(--muted-gold) !important;
    margin-top: 20px; margin-bottom: 10px;
    font-family: 'Orbitron', sans-serif;
    white-space: nowrap;
}

.plan-front p { color: #e0e0e0; font-size: 1.1rem; max-width: 80%; }

/* Front Face Button Fix */
.plan-front .tap-hint {
    display: inline-block !important;
    border: 1px solid var(--muted-gold) !important;
    padding: 10px 20px !important;
    border-radius: 20px !important;
    margin-top: 20px !important;
    color: var(--muted-gold) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover state for the new front button */
.plan-front .tap-hint:hover {
    background-color: var(--muted-gold) !important;
    color: #000 !important;
}

/* Back Face */
.plan-back {
    background: linear-gradient(160deg, #000000 0%, #0f2b46 100%);
    color: white;
    transform: rotateY(180deg);
    padding: 15px;
    border: 1px solid var(--muted-gold);
    justify-content: flex-start;
}

.plan-back-content {
    overflow-y: auto; height: 100%; 
    display: flex; flex-direction: column;
    justify-content: center;
    align-items: center; 
}

.plan-back-content::-webkit-scrollbar { width: 5px; }
.plan-back-content::-webkit-scrollbar-thumb { background: var(--muted-gold); border-radius: 10px; }

.back-title {
    font-family: 'Orbitron', sans-serif;
    color: var(--muted-gold) !important;
    font-size: 1.3rem; margin-bottom: 10px; padding-bottom: 5px;
    border-bottom: 1px solid rgba(184, 134, 11, 0.5);
    width: 100%;
}

.plan-back h4 { color: #fff; margin-bottom: 5px; font-size: 0.9rem; text-align: center; width: 100%; }

.feature-list { list-style: none; padding: 0; text-align: left; margin-bottom: 10px; display: inline-block; }
.feature-list li {
    padding-left: 20px; position: relative; margin-bottom: 5px;
    font-size: 0.85rem; line-height: 1.3;
}
.feature-list li::before {
    content: '✔'; color: var(--muted-gold);
    position: absolute; left: 0; font-size: 0.8rem;
}

/* RESTORED: Your original White Icons at 50px */

/* --- THE MISSING PRICING BOX FIX --- */
.pricing-summary {
    background: #0f2b46 !important;
    border: 1px solid var(--muted-gold) !important;
    /* Sharp professional corners as requested */
    border-radius: 4px !important; 
    margin: 15px auto !important; 
    padding: 0 !important;
    overflow: hidden;
    width: 95% !important;
    max-width: 270px; /* Locks the box proportions */
}

.price-row {
    display: flex !important;
    flex-direction: row !important; /* Forces side-by-side layout */
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid rgba(184, 134, 11, 0.2);
    background: rgba(0, 0, 0, 0.2);
}

.price-row span { 
    text-align: left !important; 
    font-size: 0.8rem !important; 
    color: #e0e0e0 !important; 
}

/* Restores vertical alignment of £ signs */
.price-row strong { 
    text-align: right !important; 
    min-width: 100px !important; 
    color: #fff !important; 
    font-weight: 700 !important; 
    font-size: 0.85rem !important; 
}
.plan-icon-svg { fill: #fff !important; width: 50px !important; height: 50px !important; margin-bottom: 10px; }

/* Pricing Grid */
.plan-front .tap-hint {
    display: inline-block !important;
    border: 1px solid var(--muted-gold) !important;
    padding: 10px 20px !important;
    /* FIXED: Slight rounding to match site aesthetic */
    border-radius: 4px !important; 
    margin-top: 20px !important;
    /* FIXED: White text for better contrast */
    color: #ffffff !important; 
    text-decoration: none !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.price-header {
    display: flex; justify-content: space-between;
    background-color: var(--muted-gold); color: #000;
    padding: 5px 8px; font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
}

.price-row {
    display: flex; justify-content: space-between;
    padding: 6px 8px !important;
    border-bottom: 1px solid rgba(184, 134, 11, 0.2);
    background: rgba(0, 0, 0, 0.2);
}

.price-row span { text-align: left; font-size: 0.8rem; color: #e0e0e0; }

.price-row strong { 
    text-align: left !important; 
    width: 110px !important; 
    color: #fff !important; 
    font-weight: 700; 
    font-size: 0.85rem; 
}

.plan-back .cta-button, .plan-back button {
    margin: 20px auto 0 auto !important;
    display: table !important;
}

/* MOBILE FIX: DATA VISIBILITY */
@media (max-width: 767px) {
    .plan-card {
        width: 96% !important; 
        max-width: 400px !important;
        /* INCREASE THIS if the 4-bedroom row is still cut off */
        height: 780px !important; 
        margin: 0 auto 30px auto !important;
    }

    .plan-front h3 {
        font-size: 1.45rem !important;
        white-space: normal !important; 
        line-height: 1.2 !important;
        padding: 0 10px !important;
    }

    .plan-back-content {
        justify-content: flex-start !important; 
        padding-top: 8px !important;
        /* REMOVED large padding that was pushing text out of view */
        padding-bottom: 0px !important; 
        overflow-y: hidden !important; 
    }

    .plan-icon-svg { 
        width: 36px !important; 
        height: 36px !important; 
        margin-bottom: 2px !important; 
    }

    .back-title {
        font-size: 1.1rem !important;
        margin-bottom: 2px !important;
        padding-bottom: 2px !important;
    }

    .plan-back h4 { 
        margin-bottom: 2px !important; 
        font-size: 0.8rem !important; 
    }

    .feature-list { 
        margin-bottom: 2px !important; 
    }

    .feature-list li {
        font-size: 0.76rem !important; 
        margin-bottom: 1px !important;
        line-height: 1.2 !important;
        padding-left: 18px !important;
    }

    .pricing-summary {
        max-width: 310px !important;
        margin-top: 2px !important;
    }

    .price-row {
        padding: 4px 8px !important;
    }

    .price-row strong {
        width: 100px !important;
        font-size: 0.78rem !important;
    }
}
/* 5. FINAL CTA BOX */

.final-cta {

    background: linear-gradient(160deg, #1e5687 0%, #0a1f33 100%);

    border: 1px solid var(--muted-gold);

    padding: 40px;

    margin-top: 60px;

    margin-bottom: 60px;

    border-radius: 12px;

    text-align: center;

    box-shadow: 0 10px 30px rgba(0,0,0,0.5);

}



.cta-heading {

    color: var(--muted-gold) !important;

    font-size: 2rem; margin-bottom: 15px;

    font-family: 'Orbitron', sans-serif;

    text-shadow: 2px 2px 0px #000;

}



.cta-text {

    color: #ffffff !important;

    font-size: 1.1rem; max-width: 700px; margin: 0 auto 30px; opacity: 0.9;

}



.cta-small { margin-top: 25px; font-size: 0.8rem; color: #cccccc !important; }



/* ========================================================== */

/* UNIVERSAL "PREMIUM" CTA BOX STYLING */

/* Applies the "Guardian Plans" Blue & Gold style to ALL bottom boxes */

/* ========================================================== */



/* 1. Target ALL known CTA box types */

.final-cta, 

.cta-box, 

.cta-guide, 

.cta-faq, 

.remote-cta, 

.service-cta,

.download-cta-section {

    /* The Premium Blue Gradient */

    background: linear-gradient(160deg, #1e5687 0%, #0a1f33 100%) !important;

    

    /* The Gold Border */

    border: 1px solid var(--muted-gold) !important;

    border-radius: 12px !important;

    

    /* The "Fade" (Shadow) */

    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;

    

    /* Spacing */

    padding: 40px !important;

    margin-top: 60px !important;

    margin-bottom: 60px !important;

    text-align: center !important; /* Forces centered content */

}



/* 2. Force Headings inside these boxes to be GOLD and CENTERED */

.final-cta h2, .cta-box h2, .cta-guide h2, .cta-faq h2, .remote-cta h2, .service-cta h2,

.final-cta h3, .cta-box h3, .cta-guide h3, .cta-faq h3, .remote-cta h3, .service-cta h3,

.cta-heading {

    color: var(--muted-gold) !important;

    font-family: 'Orbitron', sans-serif !important;

    text-shadow: 2px 2px 0px #000 !important;

    border-bottom: none !important; 

    margin-bottom: 20px !important;

    

    /* CRITICAL FIX: Force Centering to override .main-content defaults */

    text-align: center !important;

    width: 100% !important;

    margin-left: auto !important;

    margin-right: auto !important;

}



/* 3. Force Text inside these boxes to be WHITE and CENTERED */

.final-cta p, .cta-box p, .cta-guide p, .cta-faq p, .remote-cta p, .service-cta p, .cta-text {

    color: #ffffff !important;

    font-size: 1.1rem !important;

    opacity: 0.95;

    max-width: 800px;

    

    /* CRITICAL FIX: Force Centering */

    text-align: center !important;

    margin-left: auto !important;

    margin-right: auto !important;

    margin-bottom: 30px !important;

}



/* 4. Ensure Buttons stand out */

.final-cta .cta-button, .cta-box .cta-button, .cta-guide .cta-button, .remote-cta .cta-button {

    margin-top: 20px;

    display: inline-block;

}





/* ========================================================== */

/* REFINED TECHNICAL PRICING TABLE (Mobile Optimized) */

/* ========================================================== */



.table-scroll-wrapper {

    margin: 40px auto;

    max-width: 950px;

    background: rgba(10, 31, 51, 0.4); /* Transparent dark blue */

    border: 1px solid rgba(184, 134, 11, 0.5); /* Faded gold border */

    border-radius: 4px; 

    backdrop-filter: blur(10px);

    padding: 2px; /* The "Gap" for the double border effect */

    

    /* CRITICAL MOBILE FIXES */

    overflow-x: auto; /* Allows side-scrolling if table is wide */

    -webkit-overflow-scrolling: touch; /* Smooth scroll on iPhones */

    width: 100%;

}



.pricing-table {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    border: 1px solid var(--muted-gold);

}



/* Technical Header */

.pricing-table thead th {

    background: linear-gradient(180deg, #1e5687 0%, #0a1f33 100%);

    color: var(--muted-gold) !important;

    font-family: 'Orbitron', sans-serif;

    font-size: 0.9rem;

    letter-spacing: 2px;

    padding: 15px;

    text-transform: uppercase;

    border-bottom: 2px solid var(--muted-gold);

    border-right: 1px solid rgba(184, 134, 11, 0.2);

}



.pricing-table thead th:last-child { border-right: none; }



/* Table Body */

.pricing-table tbody td {

    padding: 20px;

    color: #ffffff;

    font-size: 1rem;

    border-bottom: 1px solid rgba(184, 134, 11, 0.1);

    border-right: 1px solid rgba(184, 134, 11, 0.1);

    background: rgba(0, 0, 0, 0.2);

}



.pricing-table tbody td:last-child { border-right: none; }



/* Subtle Highlight on Hover */

.pricing-table tbody tr:hover td {

    background: rgba(30, 86, 135, 0.2);

    color: var(--muted-gold);

    transition: all 0.3s ease;

}



/* Price Boldness */

.pricing-table tbody td:nth-child(2) {

    font-weight: bold;

    color: var(--muted-gold);

}



/* --- MOBILE SPECIFIC OVERRIDES --- */

@media (max-width: 767px) {

    /* 1. Remove the "Double Box" look */

    .table-scroll-wrapper {

        border: none !important; /* Removes outer border */

        padding: 0 !important;   /* Removes gap */

        background: transparent !important;

    }

    

    /* 2. Stop the table from squashing text */

    .pricing-table {

        min-width: 600px; /* Forces table to hold its shape */

        /* User can now scroll right to see the rest */

    }

    

    .pricing-table thead th, 

    .pricing-table tbody td {

        font-size: 0.85rem; /* Slightly smaller text for mobile */

        padding: 10px;      /* Tighter spacing */

    }

}



/* ========================================================== */

/* MASTER BUTTON OVERRIDE - GHOST GOLD STYLE */

/* Reverts to Transparent Background + Gold Border */

/* ========================================================== */

.cta-button, 
.wpcf7-submit,
.resources-content .cta-button,
.sidebar-content .cta-button {
    background: transparent !important;
    border: 2px solid var(--muted-gold) !important;
    /* FIXED: Forced White Text for all buttons */
    color: #ffffff !important; 
    text-decoration: none !important;
    font-weight: 700 !important;
    /* ... keep your other padding/radius rules here ... */


    

    /* 2. Sizing & Font */

    border-radius: 5px !important;

    padding: 15px 30px !important;

    font-size: 1rem !important;

    font-weight: 700 !important;

    text-transform: uppercase !important;

    letter-spacing: 1px !important;

    text-decoration: none !important;

    text-shadow: none !important;

    

    /* 3. Positioning */

    display: inline-block !important;

    transition: all 0.3s ease !important;

    box-shadow: none !important; /* No shadow by default for a clean look */

    margin-top: 20px;

}



/* HOVER STATE: Fills with Gold */

.cta-button:hover, 

.wpcf7-submit:hover,

.resources-page .cta-button:hover,

.gallery-page .cta-button:hover,

.sidebar-content .cta-button:hover {

    background-color: var(--muted-gold) !important;

    color: #000000 !important; /* Text turns black for contrast */

    border-color: var(--muted-gold) !important;

    transform: translateY(-2px); /* Subtle lift */

    box-shadow: 0 0 15px rgba(184, 134, 11, 0.4) !important; /* Soft Gold Glow */

}



/* ========================================================== */

/* MOBILE REFINEMENTS (Text Fixes, Spacing & Layout Order) */

/* ========================================================== */

@media (max-width: 767px) {

    

    /* 1. FIX HEADER SPLITTING & SIZING */

    h1, h2, .page-header-banner h1, .intro-text h2 {

        word-break: normal !important;

        overflow-wrap: normal !important;

        hyphens: none !important;

        font-size: 1.8rem !important; /* Slightly smaller for better fit */

        line-height: 1.3 !important;

        padding-left: 10px;

        padding-right: 10px;

    }

    /* REDUCE BLUE GAP (Homepage Services) */
    .services-section {
        padding-top: 1rem !important;    /* Shrinks the 4rem gap */
        padding-bottom: 2rem !important; /* Tights up the bottom */
    }
    
    .services-section h2 {
        margin-bottom: 1rem !important;  /* Pulls cards closer to title */
    }

    /* 2. MOBILE BANNER SPACING */

    .page-header-banner {

        box-sizing: border-box !important; 

        width: 100% !important;

        overflow-x: hidden !important; 

        padding-top: 130px !important; 

        padding-bottom: 2rem !important;

        padding-left: 1rem !important;

        padding-right: 1rem !important;

    }

    

    /* 3. CENTER HERO CONTENT (Homepage) */

    .hero {

        padding-top: 0 !important;

        height: 100vh !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

    }

    .hero-content {

        transform: translateY(-40px); /* Nudges text up slightly for balance */

        padding: 0 1rem !important;

    }

    

.hero-content h1 {
        font-size: 2.2rem !important;
        margin-bottom: 1.5rem !important;
        
        /* FORCE CENTER ALIGNMENT */
        text-align: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        
        /* Reset any conflicting padding */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Also center the subtitle below it */
    .hero-content p.page-intro {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
/* FORCE CTA GOLD TITLES TO CENTER (Remove the 10px shift) */
    .final-cta h2, 
    .cta-box h2, 
    .service-cta h2, 
    .remote-cta h2, 
    .cta-guide h2 {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        
        /* This is the key: Remove the padding that pushes it off-center */
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }


    /* 4. THE EQUALIZER (Fixes the uneven gaps) */

    /* Forces ALL content types to start at the exact same height */

    .main-content, 

    .sidebar-content, 

    .intro-centered-wrapper,

    .contact-container,

    .gallery-content,

    .service-page-content {

        margin-top: 1.5rem !important; /* Standard Gap (approx 24px) */

        padding-top: 0 !important;

    }



/* Landlord Page: Leaves this alone since it's correct */
    .content-wrapper {
        display: flex !important;
        flex-direction: column-reverse !important; 
    }

    /* About Page FIX: Forces Text First, Sidebar Second */
    .about-grid {
        display: flex !important;
        flex-direction: column !important; 
    }
    
    /* Contact Page: Sidebar (Details) First, Form Second */
    .contact-container {
        display: flex !important;
        /* column-reverse puts the Sidebar (last in HTML) up to the Top */
        flex-direction: column-reverse !important; 
    }

    

/* Add space between the text (now top) and the sidebar (now bottom) */
.sidebar-content {
    margin-top: 3rem !important; 
    margin-bottom: 2rem !important;
    padding-top: 2rem !important; /* <--- THIS RESTORES THE GAP */
}


/* 6. CARD CONTAINER STABILIZER (Compact Mobile Height) */
    .plan-cards-section {
        width: 100% !important;
        overflow: hidden !important; 
        padding: 2rem 0 !important;
    }

    .plan-cards {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center; 
    }

    .plan-card {
        width: 90% !important; 
        max-width: 340px !important; 
        /* HEIGHT REDUCED: Was 600px, now 520px to look proportionate */
        height: 520px !important; 
        margin: 0 auto 40px auto !important; 
    }

    /* 7. CARD FACES FIX (Compact Content) */
    .plan-front, .plan-back {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
        top: 0 !important;
        padding: 15px !important; /* Slightly tighter padding */
        box-sizing: border-box !important;
    }
    
    .plan-back-content {
        /* Align Top so pricing doesn't cut off */
        justify-content: flex-start !important; 
        padding-top: 5px !important;
    }

    /* Compact Text for Mobile so Pricing Fits */
    .plan-back h4 { margin-bottom: 5px !important; font-size: 0.85rem !important; }
    
    .feature-list li {
        font-size: 0.8rem !important;
        margin-bottom: 3px !important; 
        line-height: 1.25 !important;
    }
    
    .price-row { padding: 4px 8px !important; }
    .price-row strong { width: 100px !important; font-size: 0.8rem !important; }
    
    .plan-back-content .cta-button {
        margin-top: 10px !important;
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }
}

    /* 8. DIRECTOR SIGNATURE & INTRO SPACING */

    .intro-text p, .director-signature {

        margin-bottom: 2rem !important;

        padding: 0 10px;

    }

}



/* ========================================================== */

/* GUIDE STEP NUMBERS - MASTER BLUE GLOW */

/* ========================================================== */



/* 1. Disable the old "Hover/Touch" effect to stop conflicts */

.guide-step:hover .step-number {

    transform: translateX(-50%) !important; 

    box-shadow: 0 0 3px rgba(255, 204, 0, 0.3) !important; 

}



/* 2. The New Automatic Scroll Effect (BLUE) */

.step-number.active-glow {

    background: var(--deep-blue) !important; 

    color: #ffffff !important;

    box-shadow: 0 0 25px #3399ff !important; 

    transform: translateX(-50%) scale(1.15) !important;

    transition: all 0.5s ease;

    border: 2px solid #3399ff !important;}

    

    /* ========================================================== */

/* DESKTOP ALIGNMENT FIX (About Page & Grids) */

/* ========================================================== */



/* 1. Force the text column to start at the top on Desktop */

@media (min-width: 768px) {

    .about-grid .main-content {

        padding-top: 0 !important; /* Removes the 3rem gap */

        margin-top: 0 !important;  /* Snaps text to the top */

    }

}



/* 2. Ensure the Sidebar Image/Box also aligns perfectly */

.about-grid .sidebar-content {

    margin-top: 0 !important;

}

/* ========================================================== */

/* FINAL SPACING & ALIGNMENT FIX (SMART VERSION) */

/* ========================================================== */



/* 1. Fix the Sidebar/Text Alignment (Top) */

/* Removes the hidden default margin so text aligns with sidebar image */

.about-grid .main-content h2:first-child,

.content-wrapper .main-content h2:first-child,

.main-content h2 {

    margin-top: 0 !important; 

}



/* 2. Fix the "Big Gap" between Text and Pricing */

/* TIGHTEN: Reduced padding on the wrapper before the next section starts */

.content-wrapper, 

.about-grid {

    padding-bottom: 2rem !important; /* Was effectively doubling up */

    margin-bottom: 0 !important;

}



/* 3. TIGHTEN: Reduce top padding of the Pricing Section */

.pricing-container {

    padding-top: 2rem !important; /* Reduced from 4rem to pull it closer to text */

}



/* 4. Fix the Footer Gap (The "Breathing Room") */

/* ONLY apply this to the outermost container to prevent "stacking" */

/* This ensures exactly ONE 80px gap at the bottom of every page */

.service-page-content,

.about-content,

.gallery-content,

.blog-content {

    padding-bottom: 80px !important;

}



/* 5. Prevent Inner Containers from adding duplicate bottom space */

.service-page-content .main-content,

.about-content .main-content {

    padding-bottom: 0 !important;

    margin-bottom: 0 !important;

}



/* ========================================================== */

/* LIST STYLING: INVERTED MIRROR EFFECT */

/* ========================================================== */



/* 1. Turn Main Content Ticks to ELECTRIC BLUE (Left Side) */

.main-content ul li::before {

    color: #3399ff !important; /* Electric Blue to pop against dark background */

}



/* 2. Ensure Main Content Headings are GOLD (Left Side) */

.main-content ul li strong,

.main-content ul li p strong {

    color: var(--muted-gold) !important;

}



/* (The Sidebar is already set to Gold Ticks / Blue Text by your existing rules) */

/* ========================================================== */

/* REVIEWS: THE "OFFICIAL GOOGLE" LOOK (Dark Mode) */

/* ========================================================== */



.reviews-section {

    padding: 4rem 0 6rem 0;

    background-color: #121212; /* Site background stays black */

    border-top: 1px solid #333;

}



.reviews-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2rem;

}



.review-card {

    /* 1. THE GOOGLE LOOK */

    background-color: #202124; /* Official Google Dark Grey */

    border: none; /* Google doesn't use borders, they use shadows */

    border-radius: 8px; /* Standard Google rounding */

    

    /* 2. SPACING & ALIGNMENT */

    padding: 2rem;

    text-align: left;

    

    /* 3. GOOGLE ELEVATION SHADOW */

    box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.review-card:hover {

    transform: translateY(-5px);

    /* On hover, we add a subtle Blue/Gold glow to tie into your brand */

    box-shadow: 0 5px 15px rgba(51, 153, 255, 0.15);

}



/* 4. THE AUTHOR (Google Blue Link Style) */

.review-author {

    font-family: 'Orbitron', sans-serif;

    font-weight: 700 !important;

    font-size: 1.1rem !important;

    

    /* Google Blue (modified slightly to match your Electric Blue) */

    color: #8ab4f8 !important; 

    

    margin-bottom: 5px !important;

    margin-top: 0 !important;

    text-align: left;

}



/* 5. THE STARS (Official Google Yellow) */

.review-header {

    margin-bottom: 1rem !important;

    padding-bottom: 0 !important;

    border-bottom: none !important;

}



.review-stars {

    font-size: 1rem;

    color: #fbbc04; /* Official Google Star Yellow */

    letter-spacing: 2px;

}



/* 6. THE TEXT (Clean White/Grey) */

.review-text {

    font-size: 0.95rem;

    line-height: 1.6;

    color: #e8eaed; /* Official Google Text White */

    font-style: normal !important;

}

/* ========================================================== */

/* HERO IMAGE FIX (Forces it to be a Background) */

/* ========================================================== */

.hero-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover; /* Ensures it covers the screen without stretching */

    z-index: -1;       /* Puts it BEHIND the text */

    filter: brightness(0.4); /* Darkens it so text is readable */

}

/* ========================================================== */

/* HERO TEXT: "ELECTRIC GLOW" + ANIMATION */

/* ========================================================== */



/* 1. DEFINE THE ANIMATION (Slide Up & Fade In) */

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px); /* Starts slightly lower */

    }

    to {

        opacity: 1;

        transform: translateY(0); /* Lands in place */

    }

}



/* 2. THE MAIN TITLE (Animated & Glowing) */

.hero-content h1 {

    /* Pure White Text for maximum clarity */

    color: #ffffff !important;

    

    /* The "Electric" Effect: A sharp black shadow for reading, 

       plus a blue glow for style */

    text-shadow: 

        2px 2px 0px #000000,           /* Sharp Black Edge */

        0px 0px 15px rgba(51, 153, 255, 0.6), /* Electric Blue Glow (Inner) */

        0px 0px 30px rgba(51, 153, 255, 0.4) !important; /* Electric Blue Glow (Outer) */

    

    /* Animation: Runs once for 1.2 seconds when page loads */

    animation: fadeInUp 1.2s ease-out forwards;

    

    /* Clean up the font stroke */

    -webkit-text-stroke: 0px !important;

    letter-spacing: 2px !important;

    margin-bottom: 1.5rem !important;

}



/* 3. THE SUBTITLE (Clean & Readable) */

.hero-content p.page-intro {

    background-color: transparent !important;

    padding: 0 !important;

    color: #e0e0e0 !important; /* Soft Silver/White */

    

    /* Slight delay so it appears AFTER the title */

    animation: fadeInUp 1.2s ease-out forwards;

    animation-delay: 0.3s; /* Waits 0.3s before starting */

    opacity: 0; /* Hidden initially until animation starts */

    

    font-weight: 500 !important;

    font-size: 1.3rem !important;

    text-shadow: 0px 2px 5px rgba(0, 0, 0, 1) !important;

    

    max-width: 800px;

    margin: 0 auto !important;

    line-height: 1.6 !important;

}



/* 4. THE BUTTON (Also Animated) */

.hero-content .cta-button {

    margin-top: 3rem !important;

    

    /* Appears last */

    animation: fadeInUp 1.2s ease-out forwards;

    animation-delay: 0.6s;

    opacity: 0;

}

/* ========================================================== */

/* HERO BUTTON FIX (Forces it below the text) */

/* ========================================================== */

.hero-content .cta-button {

    display: table !important; /* Forces it to break onto a new line */

    margin: 2rem auto 0 auto !important; /* Adds 2rem gap above and centers it */

}

/* ========================================================== */

/* MASTER VISUALS: SMOOTH SCROLL, GLOW & PAGE FADES */

/* ========================================================== */



/* 1. GLOBAL PAGE TRANSITION (Premium App Feel) */

/* This fades EVERY page in smoothly when loaded. Zero speed cost. */

body {

    animation: pageFadeIn 0.8s ease-out forwards;

}



@keyframes pageFadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



/* 2. GLOBAL SMOOTH SCROLL */

html {

    scroll-behavior: smooth !important;

}



/* 3. FIX THE HOMEPAGE SCROLL LANDING */

/* Reduced from 150px to 100px so more of the cards show on screen */

#services {

    scroll-margin-top: 60px !important; 

}



/* 4. HERO TITLE: ELECTRIC BLUE & WHITE */

.hero-content h1 {

    color: #ffffff !important;

    font-weight: 700 !important;

    letter-spacing: 2px !important;

    

    /* Strong Electric Shadow */

    text-shadow: 

        2px 2px 0px #000000, 

        0px 0px 15px #3399ff,      

        0px 0px 30px rgba(51, 153, 255, 0.8) !important; 

        

    /* Note: We removed the slide animation from the TITLE 

       because the whole BODY is now animating. cleaner look. */

    margin-bottom: 1.5rem !important;

    -webkit-text-stroke: 0px !important;

}



/* 5. SUBTITLE: VISIBLE NEON GLOW */

.hero-content p.page-intro {

    background-color: transparent !important;

    padding: 0 !important;

    

    color: #ffffff !important;

    font-size: 1.35rem !important;

    font-weight: 600 !important;

    

    text-shadow: 

        1px 1px 2px #000000,               

        0px 0px 10px #3399ff !important;    

        

    max-width: 800px;

    margin: 0 auto !important;

    line-height: 1.6 !important;

}



/* 6. BUTTON POSITIONING */

.hero-content .cta-button {

    margin-top: 3rem !important;

}

/* ========================================================== */

/* MOBILE HERO: BALANCED SPACING (Final Adjustment) */

/* ========================================================== */



@media (max-width: 767px) {

    

    /* 1. SCROLL LANDING: The "Middle Ground" */

    /* adjusted to 80px so it doesn't cut off the cards, 

       but hides the gap. */

    #services {

        scroll-margin-top: 80px !important; 

    }



    /* 2. HIDE IMAGE */

    .hero-image {

        display: none !important;

    }



    /* 3. HERO CONTAINER: Taller & More Breathing Room */

    .hero {

        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;

        

        /* Taller minimum height to cover the screen & hide bottom elements */

        min-height: 85vh !important; 

        

        /* TOP: Increased to 160px so text is clear of the Nav Bar */

        padding-top: 160px !important;  

        

        /* BOTTOM: Increased to 100px to push button up & cover bottom edge */

        padding-bottom: 100px !important; 

        

        align-items: flex-start !important; 

        display: flex !important;

    }



    /* 4. TITLE */

    .hero-content h1 {

        font-size: 2rem !important;

        line-height: 1.3 !important;

        text-align: center !important;

        margin-top: 0 !important;

        margin-bottom: 1.5rem !important;

        width: 100% !important;

    }



    /* 5. SUBTITLE */

    .hero-content p.page-intro {

        font-size: 1.1rem !important;

        line-height: 1.6 !important;

        text-align: center !important;

        margin: 0 auto !important;

        max-width: 90% !important;

    }



    /* 6. BUTTON */

    .hero-content .cta-button {

        margin: 2.5rem auto 0 auto !important;

        display: table !important;

        width: auto !important;

        min-width: 220px;

    }

}

/* ============================================================

   ZONE 1: THE HOMEPAGE CARDS (Service Images)

   ============================================================ */

.services-section .card img {

    width: 100%;

    height: 250px;

    object-fit: cover;

    border-top-left-radius: 12px;

    border-top-right-radius: 12px;

}



/* Specific fix for the 3rd card (Property Maintenance) */

.services-section .service-cards .card-link:nth-child(3) .card img {

    object-position: 40% top;

}



/* ============================================================

   ZONE 2: THE MAIN CONTENT (Customer Guide, Terms, Blogs)

   ============================================================ */

/* A. The "Base" Rule: White, Bold, Underlined */

/* Targets the main content area, excluding Homepage */

body:not(.home) main a,

body:not(.home) main a:visited {

    color: #ffffff !important;             /* Force WHITE */

    text-decoration: underline !important; /* Force UNDERLINE */

    font-weight: bold !important;          /* Force BOLD */

    text-underline-offset: 4px;            /* Styling gap */

}



/* B. The Hover Effect: Eagle Eye Gold */

body:not(.home) main a:hover {

    color: #d4af37 !important;             /* Turn GOLD */

    text-decoration: none !important;      /* Remove underline on hover */

    cursor: pointer !important;

}



/* C. EXCEPTION: BUTTONS (The Precise Fix) */

/* This targets the specific class name found in your PHP template */

/* It ensures only the BUTTON gets cleaned up, leaving text links alone */


body:not(.home) main .cta-button,        /* Target your specific button */

body:not(.home) main .wp-block-button__link,

body:not(.home) main .btn,

body:not(.home) main .button {

    text-decoration: none !important;      /* No underline for buttons */

    font-weight: normal !important;        /* Normal text weight for buttons */

    /* Box border remains visible because we removed the border-bottom rule */

}


/* WhatsApp Fix: Overrides the global underline but keeps the text bold */
body:not(.home) main a.whatsapp-button {
    text-decoration: none !important;
    border-bottom: none !important;
}



/* ============================================================

   ZONE 3: THE FOOTER (Contact Info, Widgets)

   ============================================================ */

/* Keeps the footer sleek: White text, No bold, No underline */



footer a,

.site-footer a,

#colophon a {

    text-decoration: none !important;      /* NO underline */

    font-weight: normal !important;        /* Normal text weight */

    color: #ffffff !important;             /* White text */

    border: none !important;

}



/* The Hover Effect for Footer */

footer a:hover,

.site-footer a:hover,

#colophon a:hover {

    color: #d4af37 !important;             /* Turn Gold */

    text-decoration: none !important;

}

/* ============================================================

   EXCEPTION: CLEAN CONTACT DETAILS

   ============================================================ */

/* This removes the underline from Email and Phone links specifically */

/* It keeps your Contact Page looking clean while keeping text links underlined elsewhere */



body:not(.home) main a[href^="mailto:"], /* Targets Emails */

body:not(.home) main a[href^="tel:"]     /* Targets Phone Numbers */

{

    text-decoration: none !important;

    font-weight: bold !important;         /* Keeps them bold so they stand out */

}

/* TEMPORARY: Hide Gallery Link from Navigation */

/* Targets any link in the header that contains the word 'gallery' */

.site-header a[href*="gallery"],

.main-navigation a[href*="gallery"],

nav a[href*="gallery"] {

    display: none !important;

}

/* /* ============================================================

   MOBILE FIX: CONTACT PAGE LISTS (Aggressive Left Align)

   ============================================================ */

@media only screen and (max-width: 767px) {

    body:not(.home) main ul,

    body:not(.home) .entry-content ul {

        text-align: left !important;    /* Force text left */

        margin-left: 0 !important;      /* Remove ALL outer spacing */

        margin-right: 0 !important;

        padding-left: 15px !important;  /* Only leave 15px so the bullet point doesn't fall off screen */

    }



    /* Target the list items themselves to ensure they don't add extra gaps */

    body:not(.home) main li, 

    body:not(.home) .entry-content li {

        margin-bottom: 10px !important; /* Nice spacing between points */

        margin-left: 0 !important;

        padding-left: 35px !important;

    }

}

/* ============================================================

   DESKTOP FIX: CONTACT PAGE LISTS

   ============================================================ */

/* This pulls the bullet points to the left on Desktop so they align with the text above */



@media only screen and (min-width: 768px) {

    body:not(.home) main ul,

    body:not(.home) .entry-content ul {

        margin-left: 0 !important;      /* Removes the default large indentation */

        padding-left: 20px !important;  /* Keeps just enough space for the bullet dot */

    }

    

    /* Ensures the list items themselves don't add extra gaps */

    body:not(.home) main li, 

    body:not(.home) .entry-content li {

        margin-left: 0 !important;

        padding-left: 35 !important;

        margin-bottom: 10px !important; /* Keeps the nice spacing between points */

    }

}

/* ============================================================
   DIRECTOR'S FINAL CONTACT FIX (v1.6 - Position Shift)
   ============================================================ */

/* 1. SETUP THE LIST CONTAINER (Slide it Left) */
.contact-form ul, .wpcf7-form ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    
    /* FORCE LEFT ALIGNMENT */
    text-align: left !important;
    
    /* THE SLIDE FIX: Move the whole container left by pixels */
    position: relative !important; 
    left: -10px !important; /* <--- CHANGE THIS: -30px for more left, -10px for less */
}

/* 2. CREATE THE GOLD TICK */
.contact-form ul li::before, .wpcf7-form ul li::before {
    content: '\2714' !important;
    color: #d4af37 !important;     /* Bright Eagle Eye Gold */
    font-weight: bold !important;
    
    position: absolute !important;
    left: 0 !important; 
    top: 1px !important; 
    font-size: 1.1em !important;
    line-height: 1 !important;
}

/* 3. DESKTOP ITEM SPACING */
@media only screen and (min-width: 768px) {
    .contact-form ul li, .wpcf7-form ul li {
        position: relative !important;
        padding-left: 30px !important; /* Space for tick */
        margin-bottom: 8px !important;
    }
}

/* 4. MOBILE ITEM SPACING (Tighter Gap) */
@media only screen and (max-width: 767px) {
    .contact-form ul li, .wpcf7-form ul li {
        position: relative !important;
        
        /* Tighter gap between tick and text */
        padding-left: 22px !important; 
        
        margin-bottom: 8px !important;
    }
    
    /* Mobile Specific Slide (If you need it further left on phones) */
    .contact-form ul, .wpcf7-form ul {
        left: -10px !important; /* Adjust specific mobile position here */
    }
}
/* 1. EMERGENCY CALL BUTTON (Solid Gold, Centered & Big Icon) */
.call-now-btn {
    /* Layout & Centering */
    display: flex !important;
    align-items: center !important;   /* Vertically Centered */
    justify-content: center !important; /* Horizontally Centered */
    gap: 15px; /* Space between Icon and Text */
    
    width: 100%;
    box-sizing: border-box; 
    margin-top: 15px;
    margin-bottom: 25px;
    
    /* STYLE: Solid Gold */
    background-color: var(--muted-gold) !important;
    color: #000 !important; 
    border: 2px solid var(--muted-gold) !important;
    
    /* FONT */
    font-family: 'Orbitron', sans-serif; 
    font-size: 1.1rem; /* Slightly larger text to match the big icon */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* SHAPE */
    border-radius: 5px;
    padding: 15px 20px;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(184, 134, 11, 0.3);
    transition: all 0.3s ease;
}

/* ICON SIZING (Matches WhatsApp Size) */
.call-now-btn svg { 
    width: 32px !important; 
    height: 32px !important; 
    fill: #000; 
    transition: fill 0.3s ease;
    flex-shrink: 0; /* Prevents icon from getting squashed */
}

/* HOVER: Flashes White */
.call-now-btn:hover {
    background-color: #ffffff !important;
    color: var(--muted-gold) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.3);
}

.call-now-btn:hover svg {
    fill: var(--muted-gold); 
}

/* 2. WHATSAPP BUTTON STYLING & UNDERLINE FIX */
.whatsapp-marketing-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #25D366;
    padding: 12px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2);
    border: 1px solid #25D366;
}

/* Strong override to kill underlines everywhere */
body:not(.home) main a.whatsapp-marketing-btn,
body:not(.home) main a.whatsapp-marketing-btn:hover,
body:not(.home) main a.whatsapp-marketing-btn span,
body:not(.home) main a.whatsapp-marketing-btn .wa-title,
body:not(.home) main a.whatsapp-marketing-btn .wa-subtitle {
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
}

.wa-icon svg { width: 36px; height: 36px; fill: #ffffff; }

.wa-text { display: flex; flex-direction: column; text-align: left; }

.wa-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.wa-subtitle {
    color: #f0f0f0;
    font-size: 0.8rem;
    margin-top: 2px;
    opacity: 0.9;
}

.whatsapp-marketing-btn:hover {
    background-color: #1DA851;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.4);
}

/* --- INTERACTION DEMO (Final Polish) --- */
.interaction-demo {
    position: relative;
    width: 70px;
    height: 90px;
    margin: 60px auto 0px auto;
    perspective: 600px;
    z-index: 5;
}

/* The Mini Card Container */
.demo-card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    border-radius: 6px;
    animation: demoFlipSequence 4s infinite ease-in-out;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); 
}

/* Common Face Styling */
.demo-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box; 
}

/* FRONT FACE: Dark Blue Border (Matches Real Cards) */
.demo-front {
    background: linear-gradient(160deg, #1e5687 0%, #0a1f33 100%);
    border: 1px solid #2a5d8f; /* Dark Blue Border */
}

/* BACK FACE: Gold Border (Matches Real Cards) */
.demo-back {
    background: linear-gradient(160deg, #000000 0%, #0f2b46 100%);
    border: 1px solid #B8860B; /* Gold Border */
    transform: rotateY(180deg);
}

/* Text inside the mini card */
.demo-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 8px; 
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 700;
}
.demo-front .demo-text { color: #B8860B; /* Gold Text */ }
.demo-back .demo-text { color: #ffffff;  /* White Text */ }

/* THE HAND CURSOR */
.demo-cursor {
    position: absolute;
    width: 30px; 
    height: 30px;
    border: none !important;
    background: transparent !important;
    top: 100%; 
    left: 100%; 
    opacity: 0;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.8));
    animation: demoCursorSequence 4s infinite ease-in-out;
    pointer-events: none;
    z-index: 99;
}

/* SVG Styling */
.demo-cursor svg {
    width: 100%;
    height: 100%;
    fill: #ffffff;
    stroke: #000000;
    stroke-width: 1px;
    /* Rotation to make it look like a natural hand pointing */
    transform: rotate(-30deg); 
}

/* --- ANIMATION TIMELINES --- */

/* 1. Card Flip Loop */
@keyframes demoFlipSequence {
    0%, 30% { transform: rotateY(0deg); }   
    40%, 80% { transform: rotateY(180deg); } 
    90%, 100% { transform: rotateY(0deg); }  
}

/* 2. Hand Movement Loop */
@keyframes demoCursorSequence {
    0% {
        top: 100%; left: 100%; opacity: 0; 
    }
    15% {
        top: 65%; left: 65%; opacity: 1; /* Fly in */
    }
    25% {
        top: 60%; left: 60%; transform: scale(0.9); /* Tap press */
    }
    30% {
        top: 60%; left: 60%; transform: scale(1); /* Release */
    }
    75% {
        opacity: 1; /* Stay visible while reading */
    }
    90% {
        top: 100%; left: 100%; opacity: 0; /* Fly out */
    }
    100% { opacity: 0; }
}
}
    
/* Styling for the new personal contact intro */
.page-header-banner p.page-intro {
    max-width: 850px; /* Gives the text a bit more room to breathe */
    margin: 1.5rem auto 0 auto;
    font-weight: 400;
    line-height: 1.6;
    color: #ffffff;
    opacity: 0.95;
    /* Subtle glow to make the personal guarantee pop */
    text-shadow: 0px 2px 4px rgba(0,0,0,0.5);
}

@media (max-width: 767px) {
    .page-header-banner p.page-intro {
        font-size: 1.05rem !important; /* Slightly smaller for mobile readability */
        padding: 0 10px;
    }
}
/* --- CONTACT PAGE MAP FIX v2 --- */
.map-wrapper {
    position: relative;
    border-radius: 20px; /* Nicer rounded corners */
    overflow: hidden;
    border: 1px solid #333;
    line-height: 0;
    box-shadow: 0 15px 45px rgba(0,0,0,0.6); /* Deeper shadow for premium feel */
    margin-top: 25px;
    background-color: #121212; /* Prevents white flash while loading */
}

.map-wrapper iframe {
    width: 100% !important;
    min-height: 550px; /* Increased height so it's not "thin" */
    /* High-end Dark Mode filter */
    filter: invert(90%) hue-rotate(180deg) brightness(90%) contrast(90%) grayscale(0.3);
    display: block;
}

.map-section h3 {
    font-family: 'Orbitron', sans-serif;
    color: var(--muted-gold);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}