/* styles.css */

/* --- Color Palette --- */
:root {
    --color-primary: #1e8449; /* Deep Forest Green (Main Brand Color) */
    --color-secondary: #5d4037; /* Brown/Bark Color (Accents) */
    --color-background: #f7f7f7; /* Light Gray Background */
    --color-text: #333333; /* Dark Gray Text */
    --color-light: #ffffff; /* White */
}

/* --- Global Styling and Reset --- */
body {
    font-family: 'Arial', sans-serif;
    color: var(--color-text);
    background-color: var(--color-background);
    margin: 0;
    line-height: 1.6;
}

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

/* --- Header & Navigation --- */
header {
    background-color: var(--color-primary);
    color: var(--color-light);
    padding: 10px 0;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    /* --- New Border Styles --- */
    border-top: 5px solid #ffeb3b; /* A light yellow color */
    border-bottom: 5px solid #ffeb3b; /* Matches the top border */
}
header h1 {
    margin: 0;
    padding: 10px 0;
    font-size: 2em;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav li {
    margin: 0 15px;
}

nav a {
    color: var(--color-light);
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    transition: background-color 0.3s;
}

nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- Phone Number Highlighting --- */

/* 1. Updated Style for Phone Number in the Header */
header .phone-number a {
    color: var(--color-text); /* Dark Gray text for contrast against yellow */
    background-color: #ffeb3b; /* BRIGHT YELLOW ACCENT */
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    /* Add a subtle shadow to make the button look slightly raised */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
    transition: background-color 0.3s, color 0.3s;
}

header .phone-number a:hover {
    background-color: var(--color-light); /* White/light background on hover */
    color: var(--color-primary); /* Deep Forest Green text on hover */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* 2. Corrected Style for Phone Number in the Contact CTA section */
.cta-inquire a {
    color: #ffeb3b; /* Yellow text for high visibility */
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s;
}

.cta-inquire a:hover {
    /* Change the color to a dark shade (like your primary green) 
       instead of white, since the background is white. */
    color: var(--color-primary); 
}
/* --- New Gallery/Slider Styling for Hero Section --- */

.hero-image {
    /* Keep existing flex properties */
    flex: 1;
    max-width: 350px; 
    border-radius: 8px;
    
       position: relative; 
}
.hero-image {
  /* This is the container that acts as the window for your slider */
  width: 100%;
  overflow: hidden; 
  
  /* Add the border and proper box-sizing here */
  border: 6px solid #6AA84F; 
  box-sizing: border-box;
  padding: 0; /* Adds space between the border and the images */
}.et_pb_gallery_items {
    /* Container for all images */
    display: flex;
    width: 800%; /* CRITICAL: Keep this for the slider functionality */
    transition: transform 0.5s ease-in-out; /* For sliding effect */
    
    /* REMOVED: border: 6px solid #6AA84F; */
    /* REMOVED: box-sizing: border-box; */
    /* REMOVED: width: 100% !important; */
}.et_pb_gallery_item {
    /* Each image wrapper takes up 1/8th of the total width */
    width: 12.5%; /* 100% / 8 images = 12.5% */
    flex-shrink: 0;
}

.et_pb_gallery_item img {
    width: 100%;
    height: auto;
    display: block;
}




/* --- Section Styling --- */
section {
    background-color: var(--color-light);
    padding: 30px;
    margin-bottom: 25px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* --- Headings --- */
h2 {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-secondary);
    padding-bottom: 10px;
    margin-top: 0;
    font-size: 1.8em;
}

h3 {
    color: var(--color-secondary);
    font-size: 1.4em;
    margin-bottom: 15px;
}

/* --- Lists and Emphasis --- */
ul {
    padding-left: 20px;
}

strong, em {
    color: var(--color-primary); /* Emphasize key text with green */
    font-weight: bold;
}

/* Specific styling for the list items in the "Get In Touch" section */
section:last-of-type ul li {
    margin-bottom: 5px;
}

/* --- Footer --- */
footer {
    background-color: var(--color-text);
    color: var(--color-background);
    text-align: center;
    padding: 15px 0;
    margin-top: 20px;
    font-size: 0.9em;
}
/* Add this to your styles.css */
.since-year {
    color: #ffeb3b; /* Uses your bright yellow accent color */
    font-weight: bold;
    margin: 0 5px; /* Adds a little space around it */
}

/* --- Horizontal Rule (Separator) --- */
hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 30px 0;
}

/* --- Global Styling and Reset (as before) --- */
/* ... */


/* --- Home Page Specific Styles (Add to styles.css) --- */

/* Hero Section */
.hero-section {
    display: flex;
    gap: 40px;
    align-items: center;
    padding: 50px 30px;
    background-color: var(--color-light);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.hero-text {
    flex: 2; /* Text takes up more space */
}

.hero-image {
    flex: 1;
    max-width: 350px;
    border-radius: 8px;
    overflow: hidden;
}

.hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Feature Grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.feature-item {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-align: center;
    background-color: #ffffff;
    transition: transform 0.2s;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.feature-item h3 {
    color: var(--color-secondary);
    font-size: 1.2em;
}

/* Buttons */
.button-primary {
    display: inline-block;
    background-color: var(--color-primary); /* Green */
    color: var(--color-light);
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
    border: 2px solid var(--color-primary);
}

.button-primary:hover {
    background-color: #1a6d38; /* Slightly darker green */
}

/* --- Updated Button-Secondary Style (Now Green) --- */
.button-secondary {
    display: inline-block;
    background-color: var(--color-primary); /* Changed from brown to GREEN */
    color: var(--color-light);
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.button-secondary:hover {
    /* Slightly darker green on hover */
    background-color: #1a6d38; 
}/* Responsive adjustment */
@media (max-width: 768px) {
    .hero-section {
        flex-direction: column;
        text-align: center;
    }
    .hero-image {
        order: -1; /* Move image to the top on mobile */
    }
}





/* --- SECTION 1: ABOUT HERO (Text on Left, Image on Right) --- */
.about-hero {
    display: flex;
    gap: 40px; /* Space between text and image */
    align-items: center;
    background-color: var(--color-light);
    padding: 30px;
    margin-bottom: 25px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.about-text {
    flex: 1; /* Allows the text to take up equal space */
}

.about-image {
    flex: 1; /* Allows the image container to take up equal space */
    border-radius: 8px;
    overflow: hidden; /* Ensures the image respects the border-radius */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- SECTION 3: EQUIPMENT (Reversed Layout) --- */
.equipment-section {
    display: flex;
    flex-direction: row-reverse; /* Flips the order: Image (left), Text (right) */
    gap: 40px; 
    align-items: center;
    background-color: var(--color-light);
    padding: 30px;
    margin-bottom: 25px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.equipment-text {
    flex: 1;
}

.equipment-image {
    flex: 1;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.equipment-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Responsive Adjustments for Smaller Screens --- */
@media (max-width: 768px) {
    .about-hero, .equipment-section {
        flex-direction: column; /* Stacks text and image vertically on small screens */
    }
}

/* --- CTA Styling (to look like the "Inquire Today!" button/text on the original site) --- */
.cta-inquire {
    font-size: 1.5em;
    font-style: italic;
    color: var(--color-secondary); /* Brown color */
    display: flex;
    align-items: center;
    margin-top: 30px;
}

.cta-inquire .tree-icon {
    font-size: 1.2em;
    color: var(--color-primary); /* Green icon */
    margin-right: 10px;
}

/* --- Other sections (as before) --- */
/* ... */

/* Add this to your existing styles.css */
.two-column-layout {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

.two-column-layout .column {
    flex: 1; /* Makes each column take up equal space */
}

/* Responsive adjustment for small screens */
@media (max-width: 600px) {
    .two-column-layout {
        flex-direction: column;
    }
}



table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 1em;
    text-align: left;
}

table thead tr {
    background-color: var(--color-primary); /* Deep Green Header */
    color: var(--color-light);
}

table th, table td {
    padding: 12px 15px;
    border: 1px solid #dddddd;
}

table tbody tr {
    border-bottom: 1px solid #dddddd;
}

table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3; /* Light gray stripe for readability */
}

table tbody tr:hover {
    background-color: #e0f2f1; /* Light hover effect (Pale green/blue) */
}

table td a {
    color: var(--color-secondary); /* Brown link color */
    font-weight: bold;
    text-decoration: none;
}

table td a:hover {
    text-decoration: underline;
}

/* --- Contact Form Styling --- */
.contact-form {
    max-width: 600px; /* Keeps the form from getting too wide */
    margin: 0 auto;
    padding: 20px;
    background-color: var(--color-light); /* White background */
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block; /* Makes the label take up its own line */
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--color-text);
}

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Ensures padding doesn't increase total width */
    font-size: 1em;
}

.contact-form textarea {
    resize: vertical; /* Allows users to resize vertically but not horizontally */
}

/* Re-use the existing button-primary style for the submit button */
.contact-form button[type="submit"] {
    width: 100%;
    cursor: pointer;
}

.disclaimer {
    text-align: center;
    font-size: 0.85em;
    color: #666;
    margin-top: 15px;
}




/* --- Logo Styling --- */

/* 1. Control the size and centering of the logo */
header img {
    /* The 800x450 image is too large, so we size it down */
    max-width: 250px; /* Adjust this value (e.g., 200px to 300px) as needed */
    height: auto; /* Keeps the aspect ratio correct */
    display: block; /* Makes it behave like a block element */
    margin: 0 auto; /* Centers the logo horizontally in the header */
    padding: 10px 0; /* Matches the old h1 padding */
}

/* 2. Style the hyperlink wrapper around the logo */
#logo-link {
    display: block; /* Ensures the link covers the full area and centers the image */
    text-decoration: none; /* Removes any default link styling */
}

/* 3. Cleanup: Remove the old h1 styling (if it were still present) */
/* (This rule is not needed if you removed the <h1> from the HTML, but good for completeness) */
/*
header h1 {
    display: none;
}


/* 1. The main container must be the reference point for absolute positioning */
.video-hero-section {
  position: relative; /* CRITICAL: Sets the coordinate system for the overlay */
  width: 100%;
  height: 60vh; /* Set a specific height so the container isn't just the height of the text below it */
  overflow: hidden; /* Optional, but good practice to hide parts of the video that might spill */
}

/* 2. The video needs to fill the container and sit behind the text */
.responsive-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* Puts the video *behind* the overlay content */
}

/* 3. The overlay content needs to be positioned absolutely and centered */
.video-overlay-content {
  position: absolute; /* CRITICAL: Takes the content out of the normal flow */
  top: 50%; /* Moves the content down 50% from the top of the container */
  left: 50%; /* Moves the content right 50% from the left of the container */
  transform: translate(-50%, -50%); /* CRITICAL: Adjusts the content back by 50% of its OWN width/height to perfectly center it */
  
  text-align: center;
  z-index: 10; /* Puts the content *in front* of the video */
  color: white; 
  /* Add your nice text styling here */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.call-to-action-button {
  /* Button Display and Size */
  display: inline-block; /* Makes it behave like a block element, allowing padding/margins */
  padding: 12px 25px; /* Adds space inside the button */
  
  /* Color and Background */
  background-color: #FFC000; /* Bright Yellow color for the button (you can adjust this hex code) */
  color: #121212; /* Dark text color for contrast */
  
  /* Text Styling */
  font-size: 1.1em;
  font-weight: bold;
  text-decoration: none; /* Removes the default underline from the link */
  text-transform: uppercase; /* Makes the text all caps */
  
  /* Border and Corners */
  border: none;
  border-radius: 5px; /* Slightly rounded corners */
  
  /* Spacing */
  margin-top: 15px; /* Adds space above the button, separating it from the text */
  
  /* Smooth Transition for Hover (Optional but nice) */
  transition: background-color 0.3s ease; 
}

/* Optional: Add a hover effect to make it interactive */
.call-to-action-button:hover {
  background-color: #E6A800; /* A slightly darker yellow on hover */
}

/* Media Query for devices with a screen width of 768px or less (typical tablet/phone size) */
@media (max-width: 768px) {
    .video-hero-section {
        /* Reduce the height for mobile view to make it less dominant */
        height: 35vh; /* Reduced from 60vh to 40vh, or even 35vh if you want it shorter */
    }
    
    /* Optional: Shrink the overlay text slightly so it fits better */
    .video-overlay-content h1 {
        font-size: 1.8em;
    }

    .video-overlay-content h3 {
        font-size: 1em;
    }
}

/* Media Query for very narrow screens (typical vertical phone width) */
@media (max-width: 480px) {
    .video-hero-section {
        /* Make the video even shorter for narrow phones */
        height: 30vh; /* Reduced to 30% of the viewport height */
    }
    
    /* Further shrink the text to fit better on a very narrow screen */
    .video-overlay-content h1 {
        font-size: 1.5em;
        line-height: 1.1; /* Tighter line spacing */
    }

    .video-overlay-content h3 {
        font-size: 0.9em;
    }
}

/* Media Query for very narrow screens */
@media (max-width: 480px) {
    /* 1. Target the main navigation container */
    nav { 
        display: flex; /* Assuming 'nav' is the container, or use a class if you have one */
        flex-direction: column; /* Force items to stack vertically */
        align-items: center; /* Center the links in the column */
        width: 100%;
    }

    /* 2. Target the individual list items or links */
    nav a { /* Or use the appropriate list item class if your links are inside <li> */
        display: block; /* Make each link take up its own full line */
        width: 100%;
        text-align: center;
        padding: 8px 0; /* Add vertical padding for easier tapping */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Optional: Adds a subtle separator line */
    }
    
    /* Remove bottom border from the last link */
    nav a:last-child {
        border-bottom: none;
    }
}