:root {
            --brand-color: #ffb600; 
            --dark-slate: #2d3436;
            --accent-blue: #0984e3;
            --light-gray: #f9f9f9;
            --white: #ffffff;
            --text-muted: #636e72;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

        body { color: var(--dark-slate); line-height: 1.6; background-color: var(--white); scroll-behavior: smooth; }

        /* Navigation */
        nav {
            background: var(--dark-slate);
            color: white;
            padding: 15px 8%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        .logo { font-size: 1.6rem; font-weight: 800; color: var(--brand-color); text-decoration: none; text-transform: uppercase; letter-spacing: 1px; }

        .nav-right { display: flex; align-items: center; gap: 20px; }

        .contact-btn {
            background: #ffb600;
            color: var(--dark-slate);
            padding: 10px 20px;
            text-decoration: none;
            font-weight: bold;
            border-radius: 4px;
            transition: 0.3s;
            text-transform: uppercase;
            font-size: 0.9rem;
        }
        .contact-btn:hover { background: #e6b800; }

        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('images/banner.jpg');
            background-size: cover;
            background-position: center 30%;
            padding: 120px 10%;
            text-align: center;
            color: white;
        }

        .hero h1 { font-size: 3.5rem; text-transform: uppercase; margin-bottom: 20px; font-weight: 900; }
        .hero p { font-size: 1.3rem; margin-bottom: 35px; max-width: 800px; margin-inline: auto; }

        p {
            margin-bottom: 20px;
            font-size: 1.3rem;
            color: var(--text-muted);
        }


        /* Trust Bar */
        .trust-bar {
                position: relative;

            background: var(--brand-color);
            padding: 30px 10%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            text-align: center;
            color: var(--dark-slate);
        }

        .trust-item { flex: 1; min-width: 250px; padding: 10px; font-weight: bold; font-size: 1.1rem; color: whitesmoke;}
        .trust-item i { margin-right: 10px; font-size: 1.4rem; }

        /* Services Grid */
        .services-section { padding: 80px 10%; background: var(--white); }
        
        .section-title { text-align: center; margin-bottom: 60px; }
        .section-title h2 { font-size: 2.5rem; color: var(--dark-slate); margin-bottom: 15px; text-transform: uppercase; }
        .section-title .underline { width: 80px; height: 5px; background: var(--brand-color); margin: 0 auto; }

        /* Ensure the bar is the reference point */
.trust-bar {
    /* position: relative; */
    /* Your existing styles... */
}

/* Hide by default (Mobile First) */
.fb-badge-overlay {
    display: none;
}

/* Desktop Only (992px and up) */
@media (min-width: 992px) {
    .fb-badge-overlay {
        display: block;
        position: absolute;
        right: 80px;   
        top: -25px;     /* Lifts it up above the top edge */
        z-index: 100;   /* Keeps it on top */
        transition: transform 0.2s ease;
    }

    .fb-badge-overlay img {
        width: 120px;    /* Adjust size as needed */
        height: auto;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
    }

    /* Subtle hover effect for the badge */
    .fb-badge-overlay:hover {
        transform: scale(1.1);
    }
}




        .service-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;
        }

        .service-card {
            border: 1px solid #eee;
            background: white;
            transition: 0.4s;
            display: flex;
            flex-direction: column;
            border-bottom: 4px solid transparent;
        }

        .service-card:hover { transform: translateY(-10px); border-bottom: 4px solid var(--brand-color); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }

        .card-img { height: 220px; background-size: cover; background-position: center; }

        .card-content { padding: 30px; flex-grow: 1; }
        .card-content h3 { margin-bottom: 15px; font-size: 1.5rem; color: var(--dark-slate); }
        .card-content p { color: var(--text-muted); }

        .card-link {
            padding: 15px 30px;
            background: var(--light-gray);
            color: var(--accent-blue);
            font-weight: bold;
            text-decoration: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* Contact Section */
        .contact-section { padding: 80px 10%; background-color: var(--dark-slate); color: white; }

        .contact-container { display: flex; flex-wrap: wrap; gap: 60px; }

        .contact-info { flex: 1; min-width: 300px; }
        .contact-info h2 { font-size: 2.5rem; color: var(--brand-color); margin-bottom: 25px; text-transform: uppercase; }

        .contact-method { display: flex; align-items: center; margin-bottom: 30px; }
        .contact-method i { font-size: 1.5rem; color: var(--brand-color); margin-right: 25px; width: 40px; height: 40px; border: 1px solid var(--brand-color); display: flex; align-items: center; justify-content: center; border-radius: 50%; }

        .contact-method h4 { margin: 0; font-size: 1.2rem; }
        .contact-method p { margin: 0; color: #ced4da; }

        .areas-tag { display: inline-block; background: rgba(255, 204, 0, 0.1); color: var(--brand-color); border: 1px solid var(--brand-color); padding: 6px 15px; border-radius: 20px; margin: 5px; font-size: 0.9rem; }

        /* The Quote Form */
        .contact-form { flex: 1.5; background: white; padding: 45px; border-radius: 8px; min-width: 350px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
        .contact-form h3 { color: var(--dark-slate); margin-bottom: 25px; font-size: 2rem; }

        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; color: #333; margin-bottom: 8px; font-weight: 600; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 14px; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; }

        .submit-btn { width: 100%; background: var(--accent-blue); color: white; padding: 18px; border: none; border-radius: 4px; font-weight: bold; font-size: 1.1rem; cursor: pointer; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px; }
        .submit-btn:hover { background: #0768b5; transform: scale(1.01); }

        footer { background: #1a1a1a; color: #888; text-align: center; padding: 15px; border-top: 1px solid #333; }

        nav {
        background-color: #1A1A1A; /* brand-charcoal */
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 5%;
        position: relative; /* Essential for the logo positioning */
        z-index: 100;
    }

    .logo-container {
        position: absolute;
        top: 10px; /* Distance from the top of the screen */
        left: 5%;  /* Aligns with your nav padding */
        z-index: 110;
    }

    .logo-container img {
        height: 150px; /* Larger than the nav height (80px) to make it spill */
        width: auto;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); /* Adds depth over the hero image */
    }

    .nav-right {
        margin-left: auto; /* Pushes the links to the right */
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .about-content {
    display: flex;
    align-items: stretch; /* Forces the text div to match the image height */
    gap: 40px;
    margin-top: 30px;
}

.about-image {
    width: 100%;
    max-width: 300px;
    height: auto; /* Maintains aspect ratio */
    display: block;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.about-text {
    flex: 1;
    display: flex;
    flex-direction: column;    /* Stack paragraphs vertically */
    justify-content: space-between; /* /* Spreads paragraphs to top and bottom */
    text-align: left;
    padding: 10px 0;           /* Optional: keeps text from touching the very edge */
}

.slider {
    opacity:0;
    transition-duration:550ms
}

.slide-up {
    transform:translateY(100%)
}

.slide-right{
    transform:translateX(-50%)
}

.slide-left{
    transform:translateX(+50%)
}

.slide-up.appear{
    transform:translateY(0);opacity:1
}

.slide-left.appear,.slide-right.appear{
    transform:translateX(0);opacity:1
}

    @media (max-width: 768px) {
            .hero h1 { font-size: 2.5rem; }
            nav { padding: 15px 5%; }
            .nav-right a:first-child { display: none; } /* Hide phone on mobile nav to save space */
            .contact-form { padding: 30px 20px; min-width: 100%; }
            .trust-bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

        .about-content {
        flex-direction: column;
        text-align: center;
    }
    .resp-icon {
        display: none; /* Hides the icons in the header on small screens */
    }

    .trust-item {
        width: 100%;
        padding: 12px 0; /* Adds space around the text */
        
        /* The Separator Line */
        border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
    }

    /* Remove the line from the very last item */
    .trust-item:last-child {
        border-bottom: none;
    }
        }