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

/* --- Variables & Base --- */
:root {
    --primary-dark: #2c3e50; /* Dark Blue/Grey */
    --primary-light-grey: #f8f9fa;
    --primary-medium-grey: #e9ecef;
    --primary-dark-grey: #343a40;
    --accent-blue: #3498db; /* A brighter, more modern blue */
    --accent-blue-darker: #2980b9;
    --text-light: #ffffff;
    --text-dark: #333333;
    --text-muted: #6c757d;

    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Roboto', sans-serif;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
    --border-radius: 6px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-secondary);
    line-height: 1.7;
    color: var(--text-dark);
    background-color: var(--text-light);
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.75rem;
    color: var(--primary-dark);
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
a:hover {
    color: var(--accent-blue-darker);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 90%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.section-padding {
    padding: 60px 0;
}
.section-padding-small {
    padding: 40px 0;
}

.bg-light {
    background-color: var(--primary-light-grey);
    border-top: 1px solid var(--primary-medium-grey);
    border-bottom: 1px solid var(--primary-medium-grey);
}
.bg-dark {
    background-color: var(--primary-dark);
}
.text-light {
    color: var(--text-light) !important;
}
.text-light h2, .text-light h3, .text-light p {
    color: var(--text-light) !important;
}

.section-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background-color: var(--accent-blue);
    border-radius: 2px;
}

.centered-heading {
    text-align: center;
    font-size: 2rem; 
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 20px; 
}


/* Shared style for section subheadings with short blue line (used on About, Contact, old Services) */
#about-content .about-section h2,
.contact-info h2,
.contact-form-container h2 {
    font-size: 1.8rem;
    color: var(--primary-dark);
    text-align: center;
    display: block;
    position: relative;
    margin-top: 20px; 
    margin-bottom: 40px;
    padding-bottom: 15px;
    border-bottom: none; 
}

#about-content .about-section h2::after,
.contact-info h2::after,
.contact-form-container h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background-color: var(--accent-blue);
    border-radius: 2px;
}

.lead-text {
    font-size: 1.15rem;
    color: var(--text-muted);
    text-align: center;
    max-width: 750px;
    margin: 0 auto 30px auto;
}

/* --- Header --- */
header {
    background-color: rgba(52, 152, 219, 0.75); 
    color: var(--text-light);
    padding: 10px 0;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#branding {
    display: flex;
    align-items: center;
}
#branding a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-light);
}
#branding a:hover {
    color: var(--accent-blue);
    text-decoration: none;
}
#branding a:hover h1 {
    color: var(--accent-blue);
}

.social-links {
    margin-left: 15px;
    display: flex;
    align-items: center;
}

.facebook-link {
    color: #fff;
    font-size: 1.5rem;
    transition: color 0.3s ease;
    margin-left: 10px;
}

.facebook-link:hover {
    color: #4267B2; /* Facebook blue */
}

#logo-image {
    height: 100px; 
    width: auto;
    margin-right: 12px;
}

#branding h1 {
    margin: 0;
    font-size: 0; 
    font-weight: 700;
    color: var(--text-light);
    transition: color 0.2s ease-in-out;
}

/* Navigation styles before media queries */
#main-nav {
    display: flex;
    align-items: center;
}

#main-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
#main-nav li {
    margin-left: 20px;
}
#main-nav li:first-child {
    margin-left: 0;
}

#main-nav a {
    color: var(--text-light);
    padding: 10px 15px;
    border-radius: var(--border-radius);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    display: block;
    white-space: nowrap;
}

.social-item {
    display: flex;
    align-items: center;
}

.facebook-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    color: var(--text-light);
    text-decoration: none;
    transition: all 0.3s ease;
}

.facebook-link i {
    font-size: 1.2rem;
}

/* Dropdown Menu */
.dropdown {
    position: relative; 
}
.dropdown .dropbtn {
    display: flex; 
    align-items: center;
    cursor: pointer;
}
.dropdown-content {
    display: none; 
    position: absolute; 
    background-color: var(--primary-dark); 
    min-width: 220px; 
    box-shadow: var(--shadow-lg); 
    z-index: 1001; 
    border-radius: 0 0 var(--border-radius) var(--border-radius); 
    top: 100%; 
    left: 0; 
    padding: 5px 0; 
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
}

.dropdown.open .dropdown-content {
    display: block;
    opacity: 1;
}

.dropdown-content a {
    color: var(--text-light); 
    padding: 10px 20px; 
    text-decoration: none; 
    display: block; 
    font-size: 0.85rem; 
    text-transform: none; 
    letter-spacing: 0; 
    white-space: nowrap; 
    transition: background-color 0.2s ease;
}

.dropdown-content a:hover {
    background-color: var(--accent-blue); 
    color: var(--text-light); 
}

.dropdown-content a.active {
    background-color: var(--accent-blue-darker);
    color: var(--text-light);
}

.dropdown.active-parent .dropbtn,
.dropdown .dropbtn.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
}

/* Show dropdown on hover for desktop only */
@media (min-width: 769px) {
    .dropdown:hover .dropdown-content { 
        display: block;
        opacity: 1;
    }

    .dropdown.active-parent:hover .dropbtn,
    .dropdown:hover .dropbtn.active {
        background-color: rgba(255, 255, 255, 0.2);
    }
}

/* Mobile dropdown styles */
@media (max-width: 768px) {
    .dropdown-content {
        position: static;
        width: 100%;
        box-shadow: none;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 0;
    }

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

    .dropdown-content a {
        padding: 15px 35px;
    }
}
}
.dropdown .dropbtn .fa-caret-down {
    margin-left: 8px; 
    font-size: 0.8em; 
    transition: transform 0.2s ease; 
}
.dropdown:hover .dropbtn .fa-caret-down { 
    transform: rotate(180deg);
}

/* Mobile Navigation Toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    z-index: 1002;
    margin-left: auto;
}

.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--text-light);
    position: relative;
    transition: all 0.3s ease-in-out;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 25px;
    height: 3px;
    background: var(--text-light);
    transition: all 0.3s ease-in-out;
}

.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

/* --- Buttons --- */
.text-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-blue);
    color: var(--text-light);
    padding: 14px 30px;
    border-radius: var(--border-radius);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    margin: 0 auto;
    width: fit-content;
    min-width: 200px;
}

/* Mobile-specific button styles */
@media (max-width: 768px) {
    .cta-button {
        width: fit-content;
        min-width: 200px;
        margin: 0 auto;
    }
}

/* --- Page Hero (General for About, Contact, etc.) --- */
.page-hero {
    color: var(--text-light);
    padding: 50px 0; /* This padding contributes to the overall space */
    text-align: center;
    position: relative; 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.page-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--text-light);
    position: relative; 
    z-index: 1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4); /* Added for better readability */
}
.page-hero .lead-text {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.85);
    max-width: 700px;
    margin: 0 auto;
    position: relative; 
    z-index: 1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Added for better readability */
}

/* Specific hero for About page */
#about-hero {
    background-image: url('stock photo.jpg'); 
    min-height: 32.5vh; 
    display: flex; 
    align-items: center;
    justify-content: center;
}
#about-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6); 
    z-index: 0; 
}

/* Specific hero for Contact page */
#contact-hero { 
    background-image: url('stock1 photo.jpg'); 
    min-height: 32.5vh; 
    display: flex; 
    align-items: center;
    justify-content: center;
}
#contact-hero::before { 
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6); 
    z-index: 0; 
}

/* Specific hero for Services page */
#services-hero {
    background-image: url('images/files-27.jpg')
    min-height: 32.5vh; 
    display: flex; 
    align-items: center;
    justify-content: center;
}
#services-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6); 
    z-index: 0; 
}

/* Specific hero for Service Detail page (e.g., hydraulic-hoses.html) */
/* This ID should be used on the hero sections of all your service detail pages */
#service-detail-hero {
    /* background-image is typically set inline in the HTML for specific pages */
    min-height: 32.5vh; /* This is the primary property for consistent height */
    display: flex; 
    align-items: center;
    justify-content: center;
    position: relative; /* Ensure this is present for the ::before pseudo-element */
    /* The following background properties are good defaults if not overridden by inline styles */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#service-detail-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6); /* Dark overlay */
    z-index: 0; 
}
#forstery-hero {
    background-image: url('grinder.jpg'); 
    min-height: 32.5vh; 
    display: flex; 
    align-items: center;
    justify-content: center;
}
#forstery-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6); 
    z-index: 0; 
}

/* Ensure text within #service-detail-hero is styled correctly. */
/* If #service-detail-hero also has class="page-hero", these will be inherited. */
/* Otherwise, you might need to style h1 and p specifically for #service-detail-hero if class="page-hero" is missing. */
/* For example: */
#service-detail-hero h1 {
    font-size: 2.5rem; /* Consistent with .page-hero h1 */
    margin-bottom: 10px;
    color: var(--text-light);
    position: relative; 
    z-index: 1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}
#service-detail-hero .lead-text {
    font-size: 1.1rem; /* Consistent with .page-hero .lead-text */
    color: rgba(255,255,255,0.85);
    max-width: 700px;
    margin: 0 auto;
    position: relative; 
    z-index: 1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Specific hero for Chook Houses page */
#chook-houses-hero {
    /* background-image is set inline in chook-houses.html */
    min-height: 32.5vh; 
    display: flex; 
    align-items: center;
    justify-content: center;
}
#chook-houses-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6); 
    z-index: 0; 
}

/* Specific hero for Large Chook House page */
#large-chook-hero {
    /* background-image is set inline in large-chook-run.html */
    min-height: 32.5vh; 
    display: flex; 
    align-items: center;
    justify-content: center;
}
#large-chook-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6); 
    z-index: 0; 
}

/* Specific hero for Standard Chook House page */
#standard-chook-hero {
    /* background-image is set inline in standard-chook-house.html */
    min-height: 32.5vh; 
    display: flex; 
    align-items: center;
    justify-content: center;
}
#standard-chook-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6); 
    z-index: 0; 
}

/* --- Hero Section (Homepage with Slideshow) --- */
#hero {
    color: var(--text-light);
    min-height: 70vh;
    display: flex; /* Restored */
    align-items: center; /* Restored */
    justify-content: center; /* Restored */
    text-align: center;
    position: relative; /* This is crucial for an absolutely positioned child */
    overflow: hidden; 
}
.slideshow-container {
    position: absolute; /* Changed from relative */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;     /* This should now reliably take 100% height of #hero */
    z-index: 0;       /* Stays as base for its own stacking context */
}
.slideshow-container::before { 
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6); 
    z-index: 1; /* Overlay - sits behind slides and content */
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out; 
    z-index: 2; /* Slides are above the overlay */
}
.slide.active {
    opacity: 1;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}
.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0; /* Default z-index for inactive content. It will be invisible. */
    max-width: 700px; 
    width: 90%;
    text-align: center;
    color: var(--text-light); /* Ensures text is white */
    
    opacity: 0; /* Content is hidden by default */
    visibility: hidden; /* Default to hidden. Changes instantly with .active class. */
    pointer-events: none; /* Content is not interactive by default. Changes instantly with .active class. */

    /* Transition opacity and transform ONLY. Visibility and pointer-events will change instantly. */
    transition: opacity 0.5s ease-in-out, 
                transform 0.5s ease-in-out 0.3s; 
}

/* Styles for active hero content */
.hero-content.active {
    z-index: 3; /* Ensure active content is on top of slides, overlay, and inactive content */
    opacity: 1; /* Makes content (including text and button) visible */
    visibility: visible; /* Becomes visible instantly when .active is added */
    pointer-events: auto; /* Becomes interactive instantly when .active is added */
    /* Opacity and transform transitions are inherited from .hero-content */
}

.hero-content h2 {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--text-light); 
    margin-bottom: 1rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.hero-content p {
    font-size: 1.2rem;
    color: var(--text-light); 
    margin-bottom: 2rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.hero-content .cta-button {
    background-color: var(--accent-blue); 
    color: var(--text-light); 
    position: relative; /* Ensure it can have its own stacking context / z-index */
    z-index: 1;         /* Ensures it's above other non-positioned siblings within .hero-content */
    pointer-events: auto; /* Explicitly make the button interactive */
}

.hero-content .cta-button:hover {
    background-color: var(--accent-blue-darker); 
    color: var(--text-light); 
}
/* --- End of Hero Section Styles --- */

/* --- Services Overview --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* New styles for centering the last row items */
.last-row-center-wrapper {
    grid-column: 1 / -1; /* Makes this wrapper span all available columns of the parent grid */
    display: flex;
    justify-content: center; /* Centers the service items within this wrapper */
    flex-wrap: wrap; /* Allows items to wrap on very small screens if necessary */
    gap: 30px; /* Maintains the same gap as the parent grid */
}

.last-row-center-wrapper > .service-item {
    flex-basis: 350px; /* This sets the width of items in the centered last row. 
                           It matches the 'min' of minmax(300px, 1fr) from the main grid.
                           If main grid items grow larger due to '1fr', these will remain 300px.
                           Changing this to a larger fixed value (e.g., 310px) would make them
                           that fixed size, but not dynamically match the '1fr' behavior. */
    flex-grow: 0;     /* Prevent them from growing excessively to fill the wrapper. */
}

.service-item {
    background-color: var(--text-light);
    padding: 30px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; 
    flex-direction: column; 
}
.service-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.service-icon {
    color: var(--accent-blue);
    margin-bottom: 15px;
}
.service-item h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--primary-dark);
}
.service-item p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 15px; 
    flex-grow: 1; 
}

.service-item .cta-button {
    margin: auto;
    margin-top: auto;
    font-size: 0.9rem;
    padding: 10px 20px;
    display: block;
    width: fit-content;
}


/* --- Why Choose Us (Features) --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}
.feature-item {
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: var(--border-radius);
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.feature-icon {
    font-size: 2.5rem;
    color: var(--accent-blue);
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.feature-item:hover .feature-icon {
    transform: scale(1.1);
}
.feature-item h4 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--primary-dark);
}
.feature-item p {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* --- Call to Action Bar --- */
/* This rule centers the container if it's a child of the ID'd element */
#call-to-action-bar .container,
#call-to-action .container,
#about-contact-quick .container { /* For cases where .container is a child */
    text-align: center; 
}

/* This new rule centers direct paragraph children of section#about-contact-quick.container */
/* This is specifically for sections like in standard-chook-house.html */
/* Made selector more specific */
section#about-contact-quick.container.section-padding.bg-light > p {
    text-align: center;
}


#call-to-action-bar.bg-light .container h3,
#call-to-action-bar.bg-light .container p,
#call-to-action.bg-light .container h3, 
#call-to-action.bg-light .container p, 
#about-contact-quick.bg-light .container h3, 
#about-contact-quick.bg-light .container p, 
#about-contact-quick.bg-light .container .section-title, 
#about-contact-quick.bg-light .container .lead-text,
/* Added rules for when #about-contact-quick IS the container and has .bg-light */
#about-contact-quick.container.bg-light > h2, /* Catches .section-title */
#about-contact-quick.container.bg-light > h3,
#about-contact-quick.container.bg-light > p /* Catches p and p.lead-text */ { 
    color: var(--text-dark); 
}


/* --- About Us Page Specific Styles --- */
#about-content .about-section { 
    margin-bottom: 40px; 
}
#about-content .about-section p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-muted);
    text-align: center; 
}
#about-content .about-section p + p {
    margin-top: 1rem;
}
.about-intro-flex {
    display: flex;
    flex-wrap: wrap; 
    gap: 30px; 
    align-items: flex-start; 
}
.about-text {
    flex: 2; 
    min-width: 300px; 
}
.about-image {
    flex: 1; 
    min-width: 250px; 
    text-align: center; 
}
#brad-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    margin-top: 10px; 
}
.values-section h2 { 
    margin-bottom: 25px !important; 
}

/* --- Contact Page Specific Styles --- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 40px;
}
@media (min-width: 768px) { 
    .contact-grid {
        grid-template-columns: 1fr 1.2fr; 
    }
}
.contact-info ul {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}
.contact-info li {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.contact-info li .fas {
    color: var(--accent-blue);
    margin-right: 15px;
    font-size: 1.2em;
    width: 25px; 
    text-align: center;
}
.contact-info li a {
    color: var(--accent-blue);
    text-decoration: none;
}
.contact-info li a:hover {
    text-decoration: underline;
}

/* Map section within contact info */
.contact-info .map-section {
    margin-top: 30px;
}
.contact-info .map-section h3 {
    font-size: 1.3rem;
    color: var(--accent-blue);
    margin-bottom: 15px;
    font-weight: 600;
}
.contact-info .map-placeholder {
    margin-top: 10px;
    padding: 15px;
}
.contact-info .map-placeholder iframe {
    border-radius: var(--border-radius);
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-dark);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-family: var(--font-secondary);
    transition: border-color 0.2s ease;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
.form-group textarea {
    resize: vertical;
    min-height: 120px;
}
#contact-form .cta-button {
    width: auto;
    cursor: pointer;
    border: none;
}
.map-placeholder {
    background-color: var(--primary-medium-grey);
    padding: 20px;
    text-align: center;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-muted);
}
.map-placeholder iframe {
    max-width: 100%;
    border-radius: var(--border-radius);
}

/* --- Footer --- */
footer {
    background-color: var(--accent-blue); 
    color: var(--text-light); 
    padding: 50px 0 20px;
    font-size: 0.9rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 20px;
}

.footer-column {
    text-align: center; 
}

.footer-column h4 {
    color: var(--text-light);
    font-size: 1.1rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-column p, 
.footer-column ul {
    margin-bottom: 10px;
    color: var(--text-light); 
}

.footer-column ul {
    list-style: none;
    padding-left: 0; 
}

.footer-column a {
    color: var(--text-light); 
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
}

.footer-column a:hover {
    color: var(--primary-light-grey); 
    transform: translateX(5px);
}

.footer-column .fas {
    margin-right: 8px;
    color: var(--text-light); 
}

.footer-logo-image {
    display: block; 
    height: 70px; 
    width: auto; 
    margin-bottom: 10px;
    margin-left: auto; 
    margin-right: auto; 
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.footer-bottom .copyright {
    margin-bottom: 12px;
}

.footer-credits {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    margin-top: 4px;
}

.footer-credits a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-credits a:hover {
    color: var(--text-light);
    text-decoration: underline;
}

/* --- Product Card (General for reuse) --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.product-card {
    background-color: var(--text-light);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.product-card img {
    width: 100%;
    height: 297px; 
    object-fit: cover;
}
.product-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.product-card h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}
.product-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 15px;
    flex-grow: 1;
}
.product-card .cta-button {
    margin: auto;
    margin-top: auto;
    font-size: 0.9rem;
    padding: 10px 20px;
    display: block;
    width: fit-content;
}

/* --- Product Detail Page Specific Styles (for chook house detail pages) --- */
.product-detail-layout {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 40px;
    align-items: flex-start;
}
@media (min-width: 768px) {
    .product-detail-layout {
        grid-template-columns: 1fr 1fr; 
    }
    .product-description { order: 1; }
    .product-gallery { order: 2; }
}
@media (min-width: 992px) {
    .product-detail-layout {
        grid-template-columns: 2fr 1fr; 
    }
}
.product-description ul {
    list-style: disc;
    margin-left: 20px;
    margin-bottom: 1rem;
}
.product-description ul li {
    margin-bottom: 0.5rem;
    color: var(--text-muted);
}
.image-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}
.image-gallery-grid img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    object-fit: cover;
    aspect-ratio: 1 / 1; 
    cursor: pointer; 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.image-gallery-grid img:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.trailer-image-scaled {
    max-width: 200px; 
    width: 100%;      
    height: auto;     
    aspect-ratio: auto; 
    margin-left: auto;  
    margin-right: auto; 
}

/* --- Service Detail Page Layout (e.g., hydraulic-hoses.html) --- */
.service-detail-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px; 
    align-items: flex-start;
}
@media (min-width: 992px) {
    .service-detail-layout {
        grid-template-columns: 1fr; 
    }
}
.service-description ul li {
    margin-bottom: 0.5rem;
    color: var(--text-muted);
}

.service-list-heading {
    font-size: 1.4rem; 
    color: var(--primary-dark);
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--primary-medium-grey);
}

.highlight-service-item {
    background-color: #e9f5fb; 
    padding: 10px 15px;
    border-radius: var(--border-radius);
    margin-left: -15px; 
    margin-right: -15px; 
    border: 1px solid var(--accent-blue-darker);
    color: var(--text-dark); 
}
.highlight-service-item strong {
    color: var(--primary-dark); 
}


/* --- FAQ Section --- */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background-color: var(--text-light);
    border: 1px solid var(--primary-medium-grey);
    border-radius: var(--border-radius);
    margin-bottom: 15px;
    box-shadow: var(--shadow-sm);
}

.faq-item[open] { 
    box-shadow: var(--shadow-md);
}

.faq-question {
    padding: 15px 20px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    list-style: none; 
    color: var(--primary-dark);
    font-size: 1.1rem;
}

.faq-question::-webkit-details-marker { 
    display: none;
}

.faq-question::after { 
    content: '\f078'; 
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.2s ease-in-out;
    color: var(--accent-blue);
}

.faq-item[open] .faq-question::after {
    transform: translateY(-50%) rotate(180deg); 
}

.faq-answer {
    padding: 0px 20px 20px 20px;
    color: var(--text-muted);
    line-height: 1.6;
}
.faq-answer p {
    margin-bottom: 0;
}
.faq-answer p + p {
    margin-top: 10px;
}

/* --- Lightbox Modal Styles --- */
.lightbox-modal {
    display: none; 
    position: fixed; 
    z-index: 1001; 
    padding-top: 60px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.9); 
}

.lightbox-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    max-height: 80vh; 
    object-fit: contain; 
}

#lightbox-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 50px; 
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.lightbox-content, #lightbox-caption {  
    animation-name: zoom;
    animation-duration: 0.4s;
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    header .container {}
    #main-nav li { margin-left: 15px; }
    #main-nav a { padding: 8px 10px; font-size: 0.8rem; }
    #logo-image { height: 55px; } 
    .hero-content h2 { font-size: 2.4rem; }
    .hero-content p { font-size: 1.1rem; }
    .section-title { font-size: 2rem; }
    .centered-heading { font-size: 1.8rem; } 
    .services-grid, .features-grid, .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    #about-content .about-section h2,
    .contact-info h2,
    .contact-form-container h2 {
        font-size: 1.6rem; 
    }
}

@media (max-width: 768px) {
    header .container {
        position: relative;
        padding: 15px;
    }

    .nav-toggle {
        display: block;
        margin-left: auto;
    }

    #main-nav ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        background-color: var(--primary-dark);
        padding: 0;
        box-shadow: var(--shadow-md);
        z-index: 1000;
    }

    #main-nav ul.nav-active {
        display: flex;
    }

    #main-nav li {
        margin: 0;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    #main-nav a {
        padding: 15px 20px;
        border-radius: 0;
        display: flex;
        align-items: center;
    }

    .dropdown .dropbtn {
        width: 100%;
        justify-content: space-between;
        padding: 15px 20px;
    }

    .dropdown-content {
        position: static;
        width: 100%;
        box-shadow: none;
        display: none;
        padding: 0;
        background-color: rgba(0,0,0,0.2);
    }

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

    .dropdown-content a {
        padding: 15px 35px;
    }

    .social-item {
        border-bottom: none !important;
    }

    .facebook-link {
        width: 100%;
        padding: 15px 20px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    }

    .facebook-link i {
        font-size: 1.2rem;
    }

    .facebook-link span {
        display: inline-block;
        margin-left: 8px;
        font-size: 1rem;
    }
}