/* Basic Reset & Body Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    color: #171a20;
    background-color: #fff;
    line-height: 1.5;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 10px;
    background: #171a20;
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    z-index: 1000;
}

.skip-link:focus {
    left: 10px;
}

/* Installation Process Specific Styles */
.placeholder-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 15px;
    transition: transform 0.3s ease;
}

.placeholder-image:hover {
    transform: scale(1.02);
}

.benefit-card .placeholder-image {
    height: 400px;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .benefit-card .placeholder-image {
        height: 200px;
        margin-top: 10px;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    .phone-number {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 15px;
        background-color: #0056b3;
        color: #ffffff !important;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.95em;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 86, 179, 0.35);
    }

    .phone-number:hover {
        background-color: #004a99;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 74, 153, 0.45);
        color: #ffffff !important;
    }

    .phone-number svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
    }

    .phone-text {
        font-weight: 600;
        letter-spacing: 0.4px;
        color: #ffffff !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .benefit-card .placeholder-image {
        height: 315px;
        margin-top: 10px;
    }
}

.help-image .placeholder-image {
    height: 350px;
    height: 100%;
    border-radius: 12px;
}

.cta-image .placeholder-image {
    height: 300px;
    border-radius: 15px;
}

/* Animation Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

a {
    text-decoration: none;
    color: inherit;
}

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

/* Header Styles */
header {
    display: flex;
    justify-content: space-between; /* Space out logo, center nav, right nav */
    align-items: center;
    padding: 15px 30px; /* Adjust padding as needed */
    position: relative; /* Or absolute/sticky depending on desired behavior */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 120;
    /* background-color: transparent; */ /* Was transparent */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
    color: #171a20; /* Default text color black/dark grey */
    box-sizing: border-box;
    transition: background-color 0.3s ease; /* Smooth transition if background changes */
    /* Add backdrop-filter for blur effect if desired */
    /* backdrop-filter: blur(10px); */
    /* -webkit-backdrop-filter: blur(10px); */
}

/* Optional: Darker header background on scroll */
/* header.scrolled {
    background-color: rgba(255, 255, 255, 0.9);
    color: #171a20;
} */

.logo {
    font-size: 1.5em; /* Adjust size */
    font-weight: bold;
    color: #171a20; /* Logo color */
    flex-shrink: 0; /* Prevent logo from shrinking */
}

.logo img {
    height: 50px; /* Set a fixed height for the logo */
    width: auto; /* Maintain aspect ratio */
    max-height: 50px; /* Prevent logo from being too large */
}

/* Desktop Navigation Styles (Hidden by default, shown on larger screens) */
.desktop-nav-container {
    display: none; /* Hide on mobile by default */
    flex-grow: 1; /* Allow it to take up space */
    justify-content: space-between; /* Space out center and right nav */
    align-items: center;
    margin: 0 40px; /* Add some space around the center nav */
}

.center-nav {
    display: flex;
    gap: 25px; /* Space between links */
    justify-content: center; /* Center the links */
    flex-grow: 1; /* Allow center nav to push right nav */
}

.center-nav a {
    text-decoration: none;
    color: inherit; /* Inherit color from header */
    font-weight: 500;
    font-size: 1.05em;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.center-nav a:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Subtle hover effect */
}

.right-nav {
    display: flex;
    gap: 15px; /* Space between icons */
    flex-shrink: 0; /* Prevent icons from shrinking */
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em; /* Adjust icon size */
    color: inherit; /* Inherit color */
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.icon-btn:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Subtle hover effect */
}

/* Mobile Navigation Styles (Shown by default, hidden on larger screens) */
.mobile-nav {
    display: block; /* Show mobile menu button by default */
}

.menu-btn { /* Style for the mobile menu button */
    background-color: rgba(0, 0, 0, 0.05);
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    color: #171a20;
}

/* Mobile Menu Overlay Styles */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 400px;
    height: 100%;
    background-color: #ffffff;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.mobile-menu-overlay.active .mobile-menu-content {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f8f8f8;
}

.mobile-menu-header .logo {
    font-size: 1.2em;
    font-weight: bold;
    color: #171a20;
}

.mobile-menu-header .logo img {
    height: 35px; /* Slightly smaller for mobile menu */
    width: auto;
    max-height: 40px;
}

.mobile-menu-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #171a20;
    padding: 5px;
    line-height: 1;
}

.mobile-menu-nav {
    flex: 1;
    padding: 0;
}

.mobile-nav-item {
    border-bottom: 1px solid #e0e0e0;
}

/* Mobile phone number styling */
.mobile-nav-item.mobile-phone {
    border-bottom: none;
    margin-top: 20px;
    text-align: center;
    padding: 0 20px;
}

.mobile-nav-link {
    display: block;
    padding: 15px 20px;
    color: #171a20;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.mobile-nav-link:hover {
    background-color: #f0f0f0;
}

.mobile-submenu {
    background-color: #f8f8f8;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.mobile-nav-item.active .mobile-submenu {
    max-height: 3000px;
    padding: 20px 40px;
}

.mobile-submenu-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mobile-vehicle-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.mobile-submenu-turf {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.mobile-submenu-turf:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.mobile-submenu-turf img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.mobile-submenu-turf:hover img {
    transform: scale(1.1);
}

.mobile-submenu-turf span {
    font-weight: 500;
    color: #171a20;
    flex: 1;
}

.mobile-sub-links {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
}

.mobile-sub-links a {
    color: #007bff;
    text-decoration: none;
}

.mobile-sub-links a:hover {
    text-decoration: underline;
}

.mobile-side-links {
    margin-top: 10px;
}

.mobile-side-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-side-links li {
    margin-bottom: 8px;
}

.mobile-side-links a {
    color: #666;
    text-decoration: none;
    font-size: 0.9em;
    padding: 5px 0;
    display: block;
}

.mobile-side-links a:hover {
    color: #007bff;
}

.mobile-menu-icons {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #f8f8f8;
}

.mobile-icon-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    color: #171a20;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.mobile-icon-btn:hover {
    background-color: #e0e0e0;
}

.mobile-icon-btn span {
    font-weight: 500;
}

/* --- Blur effect --- */
body.submenu-active main {
    filter: blur(4px);
    transition: filter 0.3s ease-out;
}
/* Ensure header and submenu are NOT blurred */
body.submenu-active header,
body.submenu-active .submenu {
    filter: none;
}
/* --- End Blur effect --- */


/* --- Media Query for Desktop --- */
@media (min-width: 992px) {
    .desktop-nav-container {
        display: flex;
        align-items: center; /* Align items vertically */
        justify-content: space-between; /* Space out logo, center nav, right nav */
        width: 100%; /* Ensure container takes full width */
    }

    .mobile-nav {
        display: none;
    }

    header {
        color: #080808; /* Light text for desktop header over image */
        /* background-color: rgba(255, 255, 255, 0.1); */ /* Keep header background subtle */
        background-color: #ffffff; /* Make header fully transparent when over hero */
        transition: background-color 0.3s ease, color 0.3s ease; /* Add color transition */
    }
    /* Style for header when scrolled or submenu active */
    header.scrolled,
    body.submenu-active header {
         background-color: rgba(255, 255, 255, 0.95); /* White background on scroll/submenu */
         color: #171a20; /* Dark text on scroll/submenu */
    }


    .logo {
        color: inherit; /* Inherit color from header */
    }
    /* Ensure logo color changes with header */
    header.scrolled .logo,
    body.submenu-active header .logo {
        color: #171a20;
    }

    .center-nav {
        display: flex;
        gap: 0; /* Remove gap, padding will handle spacing */
        justify-content: center;
        /* flex-grow: 1; Remove flex-grow to allow right-nav */
        height: 100%; /* Ensure nav takes full header height */
    }

    .nav-item {
        position: relative; /* Needed for absolute positioning of submenu */
        height: 100%; /* Make item take full header height */
        display: flex; /* Align link vertically */
        align-items: center;
    }

    .nav-link { /* Style the main link itself */
        text-decoration: none;
        color: inherit; /* Inherit color from header */
        font-weight: 500;
        font-size: 0.9em;
        padding: 5px 15px; /* Adjust padding */
        border-radius: 4px;
        transition: background-color 0.2s ease;
        display: inline-block;
        height: auto;
        line-height: normal;
        z-index: 111; /* Ensure link is above potential blur overlay */
        position: relative; /* Needed for z-index */
    }
    /* Hover effect depends on header state */
     header:not(.scrolled):not(.submenu-active-header) .nav-link:hover {
         background-color: rgba(255, 255, 255, 0.15); /* Light hover for transparent header */
     }
     header.scrolled .nav-link:hover,
     body.submenu-active header .nav-link:hover {
         background-color: rgba(0, 0, 0, 0.05); /* Dark hover for white header */
     }


    .submenu {
        /* display: none; */ /* REMOVE this line if present, or ensure it's not used for hiding */
        position: fixed;
        top: 80px; /* Position below header: 15px top padding + ~50px content + 15px bottom padding */
        left: 0;
        width: 100%;
        background-color: #fff;
        color: #171a20;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        padding-left: 50px;  /* Horizontal padding remains constant */
        padding-right: 50px;
        padding-top: 0;       /* Initial vertical padding for animation */
        padding-bottom: 0;    /* Initial vertical padding for animation */
        z-index: 100;

        opacity: 0;
        visibility: hidden;
        max-height: 0;        /* Initial max-height for animation */
        overflow: hidden;     /* Crucial for max-height animation */
        /* transform: translateY(10px); */ /* Remove transform if you were using it for appearance */

        /* Transitions for closing animation */
        transition: opacity 0.3s ease,
                    visibility 0s linear 0.3s, /* Becomes hidden after other transitions */
                    max-height 0.3s ease,
                    padding-top 0.3s ease,
                    padding-bottom 0.3s ease;
        box-sizing: border-box;
        pointer-events: none; /* Prevent interaction when hidden */
    }

    /* Comment out or remove the old CSS :hover rule if JavaScript is controlling visibility */
    /*
    .nav-item:hover .submenu,
    .nav-item:focus-within .submenu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    */

    /* This rule should be controlled by your JavaScript adding/removing 'submenu-is-open' */
    .nav-item.submenu-is-open > .submenu {
        opacity: 1;
        visibility: visible;
        max-height: 70vh; /* Adjust if needed: large enough for your tallest submenu content (e.g., 500px, 600px) */
        padding-top: 30px;    /* Target vertical padding */
        padding-bottom: 30px; /* Target vertical padding */
        /* transform: translateY(0); */ /* Remove transform if it was used here */

        /* Transitions for opening animation */
        transition: opacity 0.3s ease,
                    visibility 0s linear 0s, /* Becomes visible immediately */
                    max-height 0.3s ease,
                    padding-top 0.3s ease,
                    padding-bottom 0.3s ease;
        pointer-events: auto; /* Allow interaction when open */
    }

    /* Specific styles for Vehicles Submenu */
    .vehicles-submenu .submenu-content {
        display: flex;
        gap: 60px; /* Increased space between columns */
        max-width: 1200px; /* Limit content width */
        margin: 0 auto; /* Center content */
    }

    .vehicles-submenu .vehicle-links {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 columns for vehicles */
        gap: 20px 30px; /* Row and column gap */
        flex: 3; /* Make vehicle column wider */
    }

    .vehicles-submenu .side-links {
        flex: 1;
        border-left: 1px solid #e0e0e0; /* Separator line */
        padding-left: 40px; /* Space after separator */
    }


    .vehicles-submenu .submenu-turf {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-size: 0.9em;
        color: #393c41;
        cursor: pointer;
        transition: transform 0.2s ease;
        border-radius: 8px;
        padding: 10px;
    }
    
    .vehicles-submenu .submenu-turf:hover {
        transform: scale(1.05);
    }
     .vehicles-submenu .submenu-turf img {
         width: 100%;
         max-width: 180px; /* Adjust image size */
         height: auto;
         margin-bottom: 10px;
         transition: transform 0.2s ease;
         border-radius: 6px;
     }
     
     .vehicles-submenu .submenu-turf:hover img {
         transform: scale(1.1);
     }
     .vehicles-submenu .submenu-turf span {
         font-weight: 600; /* Bolder title */
         margin-bottom: 5px;
         font-size: 1em;
     }
     .vehicles-submenu .submenu-turf .sub-links {
         font-size: 0.85em;
         color: #5c5e62;
     }
      .vehicles-submenu .submenu-turf .sub-links a {
          color: #5c5e62;
          text-decoration: underline;
          padding: 0 3px;
      }
     .vehicles-submenu .submenu-turf .sub-links a:hover {
         color: #171a20;
         text-decoration: underline;
     }
     .vehicles-submenu .submenu-turf .sub-links span { /* Style the "|" separator */
        font-size: 0.85em;
        color: #d0d1d2;
        margin: 0;
        font-weight: normal;
     }


    .vehicles-submenu .side-links ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .vehicles-submenu .side-links li {
        margin-bottom: 12px;
    }

    .vehicles-submenu .side-links a {
        color: #393c41;
        font-size: 0.9em;
        text-decoration: none;
        font-weight: 500;
    }
     .vehicles-submenu .side-links a:hover {
         color: #171a20;
     }

    /* Blog Submenu Styles */
    .nav-item:has(.nav-link[href="blog.html"]) .submenu-content {
        display: flex;
        gap: 40px;
        max-width: 600px;
        margin: 0 auto;
    }

    .blog-categories, .blog-links {
        flex: 1;
    }

    .blog-categories h4, .blog-links h4 {
        margin: 0 0 15px 0;
        font-size: 1.1em;
        font-weight: 600;
        color: #171a20;
        border-bottom: 2px solid #2c5530;
        padding-bottom: 8px;
    }

    /* Category Filter List Styling */
    .category-filter-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .category-filter-list li {
        margin-bottom: 8px;
    }

    .category-filter-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        color: #495057;
        text-decoration: none;
        border-radius: 6px;
        transition: all 0.3s ease;
        border: 1px solid transparent;
        font-size: 0.9em;
        font-weight: 500;
    }

    .category-filter-item:hover {
        background: #f8f9fa;
        color: #4a7c59;
        border-color: #4a7c59;
    }

    .category-filter-item i {
        margin-right: 8px;
        color: #4a7c59;
        width: 16px;
        text-align: center;
    }

    .blog-links ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .blog-links li {
        margin-bottom: 8px;
    }

    .blog-links a {
        color: #393c41;
        font-size: 0.9em;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s ease;
    }

    .blog-links a:hover {
        color: #2c5530;
    }

    /* Mobile Blog Submenu Styles */
    .mobile-blog-categories, .mobile-blog-links {
        margin-bottom: 20px;
    }

    .mobile-blog-categories h4, .mobile-blog-links h4 {
        margin: 0 0 10px 0;
        font-size: 1em;
        font-weight: 600;
        color: #171a20;
        border-bottom: 1px solid #2c5530;
        padding-bottom: 5px;
    }

    /* Mobile Category Filter List Styling */
    .mobile-category-filter-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-category-filter-list li {
        margin-bottom: 6px;
    }

    .mobile-category-filter-item {
        display: flex;
        align-items: center;
        padding: 8px 10px;
        color: #495057;
        text-decoration: none;
        border-radius: 6px;
        transition: all 0.3s ease;
        border: 1px solid transparent;
        font-size: 0.85em;
        font-weight: 500;
    }

    .mobile-category-filter-item:hover {
        background: #f8f9fa;
        color: #4a7c59;
        border-color: #4a7c59;
    }

    .mobile-category-filter-item i {
        margin-right: 8px;
        color: #4a7c59;
        width: 14px;
        text-align: center;
    }

    .mobile-blog-links ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-blog-links li {
        margin-bottom: 6px;
    }

    .mobile-blog-links a {
        color: #393c41;
        font-size: 0.9em;
        text-decoration: none;
        font-weight: 500;
    }

    .mobile-blog-links a:hover {
        color: #2c5530;
    }

    /* --- Right Nav Icons --- */
    .right-nav {
        display: flex;
        align-items: center;
        gap: 5px; /* Adjust gap between icons */
        height: 100%;
    }

    .icon-btn {
        display: inline-flex; /* Use flex to center icon */
        align-items: center;
        justify-content: center;
        padding: 8px; /* Adjust padding */
        border-radius: 50%; /* Make it circular */
        background-color: transparent;
        border: none;
        cursor: pointer;
        color: inherit; /* Inherit color from header */
        transition: background-color 0.2s ease;
        z-index: 111; /* Ensure icons are clickable */
        position: relative;
    }

    .icon-btn svg {
        width: 20px; /* Adjust icon size */
        height: 20px;
    }

     /* Ensure icon color changes with header */
    header.scrolled .icon-btn,
    body.submenu-active header .icon-btn {
        color: #171a20;
    }
     /* Hover effect depends on header state */
     header:not(.scrolled):not(.submenu-active-header) .icon-btn:hover {
         background-color: #f0f0f0; /* Changed from rgba(255, 255, 255, 0.15) */
     }
     header.scrolled .icon-btn:hover,
     body.submenu-active header .icon-btn:hover {
         background-color: #f0f0f0; /* Changed from rgba(0, 0, 0, 0.05) */
     }

    /* --- Phone Number Styles --- */
    .phone-number {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 15px;
        background-color: #0056b3;
        color: #ffffff !important;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.95em;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
        z-index: 111;
        position: relative;
    }

    .phone-number:hover {
        background-color: #004a99;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
        color: #ffffff !important;
    }

    .phone-number svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
    }

    .phone-text {
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    /* Ensure phone number stays visible regardless of header state */
    header.scrolled .phone-number,
    body.submenu-active header .phone-number {
        background-color: #0056b3;
        color: #ffffff !important;
    }

    header.scrolled .phone-number:hover,
    body.submenu-active header .phone-number:hover {
        background-color: #004a99;
        color: #ffffff !important;
    }
     /* --- End Phone Number Styles --- */
     /* --- End Right Nav Icons --- */


} /* End of @media (min-width: 992px) */

/* Hero Section */
.hero-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    height: 80vh; /* Adjust height as needed */
    min-height: 500px;
    background-size: cover;
    background-position: center;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 20px;
}

.hero-text h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.hero-text p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* Specific Hero Backgrounds */
.lawn-hero {
    background-image: url('photos/landscape-turf/artificial-turf-backyard-brentwood.webp');
}

.cost-hero {
    background-image: url('photos/landscape-turf/cost-savings-artificial-turf.webp');
}

.cost-hero-new-style {
    background: url('photos/landscape-turf/cost-savings-artificial-turf.webp') no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    color: white;
    padding: 80px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cost-hero-new-style::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.cost-hero-new-style .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px;
    align-items: center;
}

.cost-hero-new-style .buttons {
    justify-content: center;
}

.cost-hero-new-style .hero-text {
    width: 100%;
}

.cost-hero-new-style .hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.cost-hero-new-style .hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.cost-hero-new-style .hero-text p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.repair-hero {
    background-image: url('photos/repair-turf/artificial-turf-repair.webp');
}

.cleaning-hero {
    background-image: url('photos/cleaning/artificial-turf-deep-cleaning.webp');
}


.hero {
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding-top: 100px; /* Adjust for fixed header */
    padding-bottom: 50px;
    background-size: cover;
    background-position: center;
    color: #ffffff; /* Default text color, override if needed */
}

/* Intro Text Section */
.intro-text-section {
    padding: 80px 20px;
    text-align: center;
    background-color: #ffffff;
}

.intro-text-section .intro-content {
    max-width: 800px;
    margin: 0 auto;
}

.intro-text-section p {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #393c41;
    margin-bottom: 24px;
    font-weight: 400;
}

.intro-text-section p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .intro-text-section {
        padding: 60px 20px;
    }
    
    .intro-text-section p {
        font-size: 1.1rem;
    }
}

.hero.main-page {
     /* You would add the background image here */
      background-image: url('photos/home/artificial-turf-installation-lawn.webp'); 
     background-color: #f0f0f0; /* Placeholder background */
     /*background-image: url('https://placehold.co/1920x1080/c0c0c0/666?text=Model+Y+Hero');  Placeholder Image */
}


.hero h1 {
    font-size: 2.5em;
    margin-bottom: 5px;
}

.hero p {
    font-size: 1.25em;
    margin-bottom: 40px;
    font-weight: 500;
    text-shadow: #000000 2px 1px 10px;
}

.buttons {
    display: flex;
    gap: 50px;
    justify-content: center;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

.btn {
    padding: 10px 40px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 500;
    min-width: 200px; /* Ensure buttons have some width */
    text-align: center;
}

.btn-primary {
    background-color: #3e6ae1;
    color: #fff;
}

.btn-primary {
    animation: buttonAttention 3s ease-in-out infinite, shimmerStripe 2.8s ease-in-out infinite;
    background-image: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
}

@keyframes buttonAttention {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(62, 106, 225, 0);
    }
    50% {
        transform: scale(1.07);
        box-shadow: 0 8px 16px rgba(62, 106, 225, 0.35);
    }
}

.btn-primary:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 20px rgba(62, 106, 225, 0.45);
}

.defer-section {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary {
        animation: none;
    }
}

.shimmer-btn {
    background-image: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: shimmerStripe 2.8s ease-in-out infinite, buttonAttention 3s ease-in-out infinite;
}

@keyframes shimmerStripe {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shimmer-btn {
        animation: none;
    }
}
.btn-secondary {
    background-color: rgba(255, 255, 255, 0.8); /* Dark grey, slightly transparent */
    color: #0c0c0c;
}

.btn-tertiary {
    background-color: #fff;
    color: #171a20;
    border: 2px solid #171a20;
}

.btn-dark {
    background-color: #171a20;
    color: #fff;
}

.btn-footer {
    background-color: #f4f4f4;
    color: #393c41;
    padding: 8px 15px;
    min-width: auto;
}

/* Disabled Button Styles for Coming Soon Page */
.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    background-color: #cccccc !important;
    color: #666666 !important;
    border-color: #cccccc !important;
}

.btn.disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Models Grid */
.models-grid, .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 20px;
    padding: 40px;
}
@media (max-width: 1024px) and (min-width: 769px) {.models-grid, .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 20px;
    padding: 0px;
}}

/* Products Grid Section Styles */
.products-grid-section {
    padding: 0 20px 40px 20px;
    background-color: #ffffff;
}

/* Products Grid - Responsive Grid Layout */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns for large screens */
    gap: 40px;
    max-width: 1800px;
    margin: 0 auto;
    padding: 40px;
}

/* Dynamic responsive grid layout for products */
@media (max-width: 1600px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for medium-large screens */
    }
}

@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for medium screens */
    }
}

/* iPad Portrait Mode Optimization */
@media (max-width: 1024px) and (min-width: 769px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for iPad portrait */
        gap: 30px;
        padding: 30px 20px;
        max-width: 100%;
    }
    
    .products-grid-section {
        padding: 0 15px 30px 15px;
    }
    
    .section-header {
        padding: 40px 0 20px 0; /* Reduced top padding for iPad */
    }
    
    .section-title {
        font-size: 2.2rem; /* Slightly smaller title for iPad */
    }
    
    .product-card {
        min-height: 400px;
    }
    
    .product-card img {
        height: 180px;
        object-fit: cover;
    }
    
    .card-content {
        padding: 20px;
    }
    
    .card-content h2 {
        font-size: 1.4em;
        margin-bottom: 12px;
    }
    
    .card-content p {
        font-size: 0.95em;
        line-height: 1.5;
        margin-bottom: 20px;
    }
    
    .buttons {
        gap: 10px;
    }
    
    .btn {
        padding: 10px 16px;
        font-size: 0.9em;
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr; /* 1 column for small screens */
        gap: 30px;
        padding: 20px;
    }
}

/* Product Cards - Specific styling for service cards */
.product-card {
    background-color: #181b21;
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2), 0 6px 15px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 450px;
    position: relative;
    cursor: pointer;
}

/* Adjust card height for different screen sizes */
@media (max-width: 1600px) {
    .product-card {
        height: 420px;
    }
}

@media (max-width: 1200px) {
    .product-card {
        height: 450px;
    }
}

@media (max-width: 768px) {
    .product-card {
        height: 480px;
    }
}

.product-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 12px 20px rgba(0, 0, 0, 0.2);
}

.product-card {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* --- Compact Scheduling Modal Styles --- */
#scheduling-modal .plan-modal {
    /* max-width: 50%; */
    max-height: 75%;
    margin: 0 auto;
}

#scheduling-modal .plan-modal-body {
    padding: 25px 0;
}

#scheduling-modal .plan-modal-inner {
    padding: 0 30px;
}

#scheduling-modal .plan-modal-header {
    margin-bottom: 20px;
}

#scheduling-modal .plan-modal-header h3 {
    margin-bottom: 5px;
    font-size: 1.6rem;
}

#scheduling-modal .plan-modal-header p {
    margin-bottom: 0;
    font-size: 0.95rem;
    color: #64748b;
}

#scheduling-modal .form-section {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f5f9;
}

#scheduling-modal .form-section:last-of-type {
    margin-bottom: 0;
    border-bottom: none;
}

#scheduling-modal .form-section h3 {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #334155;
}

#scheduling-modal .form-group {
    margin-bottom: 0; /* Let grid gap handle spacing in rows, or minimal margin */
}

#scheduling-modal .form-group input,
#scheduling-modal .form-group select,
#scheduling-modal .form-group textarea {
    padding: 8px 12px;
    font-size: 0.9rem;
    border-radius: 6px;
}

#scheduling-modal .form-group label {
    margin-bottom: 3px;
    font-size: 0.85rem;
    color: #475569;
}

#scheduling-modal .form-row {
    gap: 12px;
    margin-bottom: 12px;
}

/* Adjust full-width groups that are not in a row */
#scheduling-modal .form-section > .form-group {
    margin-bottom: 12px;
}

#scheduling-modal .plan-modal-actions {
    margin-top: 15px;
    padding-top: 20px;
}

#scheduling-modal .btn {
    padding: 10px 20px;
    font-size: 0.95rem;
}


.product-card:hover img {
    transform: scale(1.05);
}

.product-card .card-content {
    padding: 25px 20px 60px 20px;
    display: flex;
    flex-direction: column;
    text-align: left;
    position: absolute;
    bottom: -20px;

    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(24, 27, 33, 0.95) 0%, rgba(24, 27, 33, 0.8) 50%, transparent 100%);
    color: white;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    transition: padding 0.3s ease;
}

.product-card:hover .card-content {
    padding-bottom: 60px;
}

/* Responsive padding adjustments */
@media (max-width: 1600px) {
    .product-card .card-content {
        padding: 20px 18px 30px 18px;
    }
    
    .product-card:hover .card-content {
        padding-bottom: 30px;
    }
}

@media (max-width: 1200px) {
    .product-card .card-content {
        padding: 25px 20px;
    }
}

@media (max-width: 768px) {
    .product-card .card-content {
        padding: 30px 25px;
    }
}

.product-card .card-content h2 {
    font-size: 1.8em;
    font-weight: 600;
    color: white;
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.3;
    position: relative;
    transition: transform 0.3s ease;
}

/* Responsive font size adjustments */
@media (max-width: 1600px) {
    .product-card .card-content h2 {
        font-size: 1.7em;
    }
}

@media (max-width: 1200px) {
    .product-card .card-content h2 {
        font-size: 2em;
    }
}

@media (max-width: 768px) {
    .product-card .card-content h2 {
        font-size: 2.2em;
    }
}

.product-card:hover .card-content h2 {
    transform: translateY(-5px);
}

/* Add underline effect on hover */
.product-card .card-content h2::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #5a944d; /* Green color for product cards */
    transition: width 0.3s ease;
}

.product-card:hover .card-content h2::after {
    width: 60px;
}

.product-card .card-content p {
    color: #e0e0e0;
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 6px;
    transition: transform 0.3s ease;
}

/* Responsive paragraph font size adjustments */
@media (max-width: 1600px) {
    .product-card .card-content p {
        font-size: 0.9em;
        margin-bottom: 5px;
    }
}

@media (max-width: 1200px) {
    .product-card .card-content p {
        font-size: 1em;
        margin-bottom: 6px;
    }
}

@media (max-width: 768px) {
    .product-card .card-content p {
        font-size: 1.1em;
        margin-bottom: 8px;
    }
}

.product-card:hover .card-content p {
    transform: translateY(-3px);
}

.product-card .card-content .buttons {
    display: flex;
    gap: 12px;
    margin-top: auto;
    flex-wrap: wrap;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.product-card:hover .card-content .buttons {
    opacity: 1;
    transform: translateY(0);
}

.product-card .btn {
    flex: 1;
    min-width: 120px;
    padding: 12px 20px;
    font-size: 0.9em;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-align: center;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card .btn-primary {
    background-color: #5a944d;
    color: white;
}

.product-card .btn-primary:hover {
    background-color: #4a7d41;
    transform: translateY(-1px);
}

.product-card .btn-secondary {
    background-color: transparent;
    color: #5a944d;
    border: 2px solid #5a944d;
}

.product-card .btn-secondary:hover {
    background-color: #5a944d;
    color: white;
    transform: translateY(-1px);
}

/* Product Card Background Images */
.product-card.installation,
.product-card.maintenance,
.product-card.repair {
    background-image: none;
}




/* Models Grid - Updated for Slider & Image Style */
.models-grid.slider-container {
    position: relative;
    overflow: hidden;
    /* padding: 40px 60px; */ /* Adjust padding if arrows are outside content flow */
    padding: 40px 20px; /* Current padding */
    background-color: #ffffff; /* Light background for the section */
}

/* Models Grid - Block Layout Style */
.models-grid-section.block-container {
    padding: 20px 20px 40px 20px;
    background-color: #ffffff;
}

.models-grid.block-container {
    padding: 40px 20px;
    background-color: #ffffff;
}

.models-block-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns for large screens */
    gap: 40px;
    max-width: 1800px; /* Increased max-width to accommodate 4 columns */
    margin: 0 auto;
    padding: 40px;
}

/* Dynamic responsive grid layout */
@media (max-width: 1600px) {
    .models-block-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for medium-large screens */
    }
}

@media (max-width: 1200px) {
    .models-block-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
    }
}

@media (max-width: 768px) {
    .models-block-grid {
        grid-template-columns: 1fr; /* 1 column for small screens */
        gap: 30px;
        padding: 0px;
        margin: 0 -15px;
    }
}

/* Override slider-specific styles for model cards in block layout */
.models-block-grid .model-card {
    min-width: unset;
    flex-shrink: unset;
    width: 100%;
    height: 450px; /* Reduced height for better fit in 4-column layout */
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    /* box-shadow: 12px 17px 20px rgba(0.5, 0.5, 0.5, 0.5); */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2), 0 6px 15px rgba(0, 0, 0, 0.15);
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit text color */
}

/* Adjust card height for different screen sizes */
@media (max-width: 1600px) {
    .models-block-grid .model-card {
        height: 420px;
    }
}

@media (max-width: 1200px) {
    .models-block-grid .model-card {
        height: 450px;
    }
}

@media (max-width: 768px) {
    .models-block-grid .model-card {
        height: 480px;
    }
}

.models-block-grid .model-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.models-block-grid .model-card img {
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.models-block-grid .model-card:hover img {
    transform: scale(1.05);
}

.models-block-grid .model-card .card-content {
    position: absolute;
    bottom: -55px;
    left: 0;
    width: 100%;
    padding: 25px 20px; /* Reduced padding for 4-column layout */
    background: linear-gradient(to top, rgba(24, 27, 33, 0.95) 0%, rgba(24, 27, 33, 0.8) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    transition: padding 0.3s ease;
}

.models-block-grid .model-card:hover .card-content {
    padding-bottom: 70px;
}

/* Responsive padding adjustments */
@media (max-width: 1600px) {
    .models-block-grid .model-card .card-content {
        padding: 20px 18px;
    }
    
    .models-block-grid .model-card:hover .card-content {
        padding-bottom: 30px;
    }
}

@media (max-width: 1200px) {
    .models-block-grid .model-card .card-content {
        padding: 25px 20px;
    }
}

@media (max-width: 768px) {
    .models-block-grid .model-card .card-content {
        padding: 30px 25px;
    }
}

.models-block-grid .model-card .card-content h2 {
    font-size: 1.8em; /* Smaller font size for 4-column layout */
    margin-top: 0;
    margin-bottom: 8px;
    color: #fff;
    position: relative;
    transition: transform 0.3s ease;
}

/* Responsive font size adjustments */
@media (max-width: 1600px) {
    .models-block-grid .model-card .card-content h2 {
        font-size: 1.7em;
    }
}

@media (max-width: 1200px) {
    .models-block-grid .model-card .card-content h2 {
        font-size: 2em;
    }
}

@media (max-width: 768px) {
    .models-block-grid .model-card .card-content h2 {
        font-size: 2.2em;
    }
}

.models-block-grid .model-card:hover .card-content h2 {
    transform: translateY(-5px);
}

.models-block-grid .model-card .card-content h2::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #3E6AE1;
    transition: width 0.3s ease;
}

.models-block-grid .model-card:hover .card-content h2::after {
    width: 60px;
}

.models-block-grid .model-card .card-content p {
    margin-bottom: 6px;
    font-size: 0.95em; /* Smaller font size for 4-column layout */
    color: #e0e0e0;
    transition: transform 0.3s ease;
}

/* Responsive paragraph font size adjustments */
@media (max-width: 1600px) {
    .models-block-grid .model-card .card-content p {
        font-size: 0.9em;
        margin-bottom: 5px;
    }
}

@media (max-width: 1200px) {
    .models-block-grid .model-card .card-content p {
        font-size: 1em;
        margin-bottom: 6px;
    }
}

@media (max-width: 768px) {
    .models-block-grid .model-card .card-content p {
        font-size: 1.1em;
        margin-bottom: 8px;
    }
}

.models-block-grid .model-card:hover .card-content p {
    transform: translateY(-3px);
}

.models-block-grid .model-card .buttons {
    display: none;
}

.models-block-grid .model-card .card-content::after {
    content: 'View Details →';
    display: inline-block;
    margin-top: 12px; /* Reduced margin for 4-column layout */
    color: #ffffff;
    font-weight: 500;
    font-size: 0.9em; /* Smaller font size for 4-column layout */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    background-color: #3E6AE1;
    padding: 8px 16px;
    border-radius: 4px;
    text-align: center;
}

/* Responsive adjustments for View Details button */
@media (max-width: 1600px) {
    .models-block-grid .model-card .card-content::after {
        margin-top: 10px;
        font-size: 0.85em;
        padding: 7px 14px;
    }
}

@media (max-width: 1200px) {
    .models-block-grid .model-card .card-content::after {
        margin-top: 12px;
        font-size: 0.95em;
        padding: 8px 16px;
    }
}

@media (max-width: 768px) {
    .models-block-grid .model-card .card-content::after {
        margin-top: 15px;
        font-size: 1em;
        padding: 10px 18px;
    }
}

.models-block-grid .model-card:hover .card-content::after {
    opacity: 1;
    transform: translateY(0);
    background-color: #3559c7; /* Slightly darker blue on hover */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1366px), (hover: none), (pointer: coarse) {
    .models-block-grid .model-card .card-content::after {
        display: none !important;
    }
    .models-block-grid .model-card .card-content {
        padding-bottom: 70px !important;
    }
}

.slider-track {
    display: flex;
    gap: 20px; /* Ensure this matches JS calculation if used */
    transition: transform 0.5s ease-in-out;
}

.model-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    min-width: 300px; /* Minimum width for each card */
    flex-shrink: 0; /* Prevent cards from shrinking */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.slider-pagination {
    text-align: center;
    margin-top: 20px;
}

.slider-pagination .dot {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slider-pagination .dot.active {
    background-color: #333;
}

/* Slider Navigation Buttons - Glass Morphism Design */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    color: #2c3e50;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    line-height: 1;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.slider-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) translateY(-2px);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2);
    color: #1a252f;
}

.slider-btn:active {
    transform: translateY(-50%) translateY(1px);
    box-shadow: 0 4px 16px rgba(31, 38, 135, 0.1);
}

.slider-btn.prev-btn {
    left: 40px; /* Adjust as needed */
}

.slider-btn.next-btn {
    right: 40px; /* Adjust as needed */
}

/* Mobile responsive styles for glass morphism slider buttons */
@media (max-width: 480px) {
    .slider-btn {
        width: 44px;
        height: 44px;
        font-size: 16px;
        box-shadow: 0 6px 24px rgba(31, 38, 135, 0.12);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }
    .slider-btn.prev-btn {
        left: 5px;
    }
    .slider-btn.next-btn {
        right: 5px;
    }
    .slider-btn:hover {
        transform: translateY(-50%) translateY(-1px);
        box-shadow: 0 8px 28px rgba(31, 38, 135, 0.15);
    }
}

.model-card { /* Target only model cards, not product cards */
    border: none;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #181b21;
    color: #f4f4f4;
    flex-shrink: 0;
    /* width: 50%; */ /* Previous 50% width */
    /* Make width slightly less than 50% to account for the gap */
    width: calc(70% - 8px); /* Wider cards - increased from 44% to 70% */
    /* max-width: 400px; */ /* Remove or adjust max-width if needed */
    position: relative;
    box-sizing: border-box; /* Include padding/border in width */
    height: 580px; /* Define a height for the card - for slider layout */
    cursor: pointer; /* Show pointer cursor to indicate clickable */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.model-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Add overlay text like "Utility Truck" */
.model-card::before {
    /*content: attr(data-type); /* Get text from data-type attribute */
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 0.85em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
    z-index: 2;
}

.model-card img {
    width: 100%;
    /* height: 300px; */ /* Remove fixed height */
    height: 100%; /* Make image fill card height */
    object-fit: cover;
    display: block; /* Ensure block display */
    transition: transform 0.5s ease; /* Smooth zoom effect on hover */
}

.model-card:hover img {
    transform: scale(1.05); /* Subtle zoom effect on hover */
}

.model-card .card-content {
    /* padding: 20px; */ /* Adjust padding */
    padding: 25px 30px; /* Increased padding for better readability */
    text-align: left; /* Align text left */
    /* flex-grow: 1; */ /* Remove flex-grow */
    /* display: flex; */ /* Keep flex for internal alignment */
    /* flex-direction: column; */
    /* justify-content: flex-end; */ /* Align content towards the bottom */
    /* min-height: 150px; */ /* Remove min-height */
    position: absolute; /* Position over the image */
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box; /* Include padding in width */
    background: linear-gradient(to top, rgba(24, 27, 33, 0.95) 0%, rgba(24, 27, 33, 0.8) 50%, transparent 100%); /* Stronger gradient for better text readability */
    border-bottom-left-radius: 12px; /* Match card radius */
    border-bottom-right-radius: 12px; /* Match card radius */
    transition: padding 0.3s ease; /* Smooth padding transition on hover */
}

.model-card:hover .card-content {
    padding-bottom: 35px; /* Increase bottom padding on hover */
}

.model-card .card-content h2 {
    margin-bottom: 10px;
    font-size: 2.8em; /* Larger model name */
    color: #fff; /* Ensure white color */
    position: relative;
    transition: transform 0.3s ease;
}

.model-card:hover .card-content h2 {
    transform: translateY(-5px);
}

/* Add underline effect on hover */
.model-card .card-content h2::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #3E6AE1;
    transition: width 0.3s ease;
}

.model-card:hover .card-content h2::after {
    width: 60px;
}

.model-card .card-content p {
    margin-bottom: 8px;
    font-size: 1.1em; /* Larger text */
    color: #e0e0e0; /* Lighter grey */
    transition: transform 0.3s ease;
}

.model-card:hover .card-content p {
    transform: translateY(-3px);
}

/* Hide buttons section */
.model-card .card-content .buttons {
    display: none;
}

/* Add a "View More" text that appears on hover */
.model-card .card-content::after {
    content: 'View Details →';
    display: block;
    margin-top: 15px;
    color: #3E6AE1;
    font-weight: 500;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.model-card:hover .card-content::after {
    opacity: 1;
    transform: translateY(0);
}


/* Removed conflicting slider button styles - using modern design above */

/* .prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
} */

/* Slider Pagination Dots */
.slider-pagination {
    position: absolute;
    bottom: 15px; /* Position dots below the track */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.slider-pagination .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ccc; /* Inactive dot color */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slider-pagination .dot.active {
    background-color: #5c5e62; /* Active dot color */
}


/* Info Boxes */
.info-boxes {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 40px;
    background-color: #ffffff;
    flex-wrap: wrap;
}

.info-box {
    background-color: #f4f4f4;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    flex-basis: 400px; /* Give boxes a base width */
    flex-grow: 1; /* Allow them to grow */
    max-width: 500px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.12);
}

.info-box h2 {
    margin-bottom: 10px;
}

.info-box p {
    margin-bottom: 20px;
    color: #5c5e62;
}

/* Charging Map Section */
.service-map {
    position: relative;
    text-align: center;
    padding: 0; /* Remove padding as image might fill */
    background-color: #f8f8f8; /* Background if image doesn't load */
}

.map-image {
    width: 100%;
    height: auto;
    max-height: 60vh; /* Limit map height */
    object-fit: cover;
    margin-top: 30px;
}

.map-content {
    padding: 40px;
    background-color: #fff; /* White background for text area below map */
}

.map-content h2 {
    margin-bottom: 10px;
}

.map-content p {
    margin-bottom: 20px;
    color: #5c5e62;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.service-map .btn-secondary {
    background-color: #2c6e31;
    color: #ffffff;
}

.service-map .buttons .btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-map .buttons .btn:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    font-size: 1.1em;
}

.stats span strong {
    display: block; /* Make number appear above text */
    font-size: 1.5em;
    margin-bottom: 5px;
}

/* Footer */
footer {
    background-color: #111;
    padding: 60px 40px 40px; /* Added 40px bottom padding */
    text-align: center;
    font-size: 0.9em;
    color: #aaa;
    border-top: 1px solid #333;
}

.disclaimer {
    max-width: 900px;
    margin: 40px auto 40px auto;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 24px;
    border: 1px solid #e9ecef;
    border-left: 4px solid #f39c12;
    border-radius: 12px;
    background: #fff9e6;
}

.disclaimer-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.disclaimer p {
    margin: 0;
    line-height: 1.7;
    font-size: 1.02em;
    color: #444;
}

.disclaimer .warranty-footnote {
    font-size: 0.85rem;
    line-height: 1.6;
}

.disclaimer i {
    font-size: 1.4rem;
    line-height: 1;
    color: #f39c12;
}

.disclaimer a {
    text-decoration: underline;
}

/* Footer Content */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    gap: 60px;
}

.footer-left {
    flex: 1;
    max-width: 300px;
}

.footer-brand h2 {
    color: #4CAF50;
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.footer-brand p {
    color: #cccccc;
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Footer Links Columns */
.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    flex: 2;
}

.footer-column h3 {
    color: #ffffff;
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

.footer-column li {
    margin-bottom: 8px;
}

.footer-column a {
    color: #cccccc;
    text-decoration: none;
    font-size: 0.85em;
    transition: color 0.3s ease;
    display: block;
}

.footer-column a:hover {
    color: #4CAF50;
}

/* Footer Bottom */
.footer-bottom {
    /* display: flex; */
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 40px auto 0;
    padding-top: 30px;
    border-top: 1px solid #444;
}

.footer-newsletter {
    flex: 1;
}

.footer-newsletter h4 {
    color: #4CAF50;
    font-size: 1.1em;
    margin-bottom: 5px;
}

.footer-newsletter p {
    color: #cccccc;
    font-size: 0.9em;
    margin-bottom: 15px;
}

.newsletter-form {
    display: flex;
    gap: 10px;
}

.newsletter-form input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #555;
    background-color: #333;
    color: #ffffff;
    border-radius: 4px;
    font-size: 0.9em;
}

.newsletter-form input::placeholder {
    color: #999;
}

.newsletter-form button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.newsletter-form button:hover {
    background-color: #45a049;
}

/* Responsive adjustments for footer columns */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .footer-links {
        display: none; /* Hide footer links on mobile */
    }
    
    .footer-column {
        text-align: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .footer-left {
    flex: 1;
    max-width: 100%;
}
}

@media (max-width: 480px) {
    .footer-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .footer-links {
        display: none; /* Hide footer links on mobile */
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .newsletter-form {
        flex-direction: column;
        gap: 10px;
    }
}

/* Footer Social Icons */
.footer-social-icons {
    text-align: center;
    margin-bottom: 20px; /* Space below icons before nav */
}

.footer-social-icons a {
    display: inline-block;
    margin: 0 10px;
    color: #ffffff; /* Icon color */
    transition: color 0.3s ease;
}

.footer-social-icons a svg {
    width: 28px; /* Icon size */
    height: 28px;
    vertical-align: middle;
}

.footer-social-icons a:hover {
    color: #007bff; /* Icon hover color - can be your primary blue */
}

/* Footer Navigation */
.footer-nav {
    margin-top: 40px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-nav a {
    color: #aaa;
    text-decoration: none;
    font-size: 0.9em;
    padding: 8px 15px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.footer-nav a:hover {
    background-color: #222;
    color: #fff;
}

/* Footer Legal */
.footer-legal {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 0.8em;
    color: #ccc; /* Lighter color for less emphasis */
}

.footer-legal p {
    margin: 5px 0;
}

/* Footer Actions */
.footer-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #222; /* Dark background for contrast */
    padding: 15px 0;
    display: flex;
    justify-content: center;
    gap: 20px; /* Increased gap for better spacing */
    z-index: 1000; /* Ensure it's above other content */
    border-top: 1px solid #444; /* Subtle top border */
}

.btn-footer {
    background-color:#d93434; /* Primary button color */
    color: white;
    border: none;
    padding: 12px 25px; /* Adjusted padding */
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-footer:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

.btn-primary-style {
    background-color: #007bff; /* Primary button color */
    color: white;
}

.btn-primary-style:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 10px 15px rgba(0, 123, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

.btn-pulse {
    animation: pulse 2s infinite;
}

/* Floating Action Panel Styles */
.floating-action-panel {
    position: fixed;
    left: -105px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    z-index: 1000;
}

.floating-buttons {
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

.floating-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: none;
    padding: 15px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease;
    min-width: 140px;
    justify-content: center;
}

.floating-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
    background: linear-gradient(135deg, #0056b3, #004494);
}

.floating-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.consultation-btn {
    background: linear-gradient(135deg, #28a745, #1e7e34) !important;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    animation: pulse-green 2s infinite;
}

.consultation-btn:hover {
    background: linear-gradient(135deg, #1e7e34, #155724) !important;
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

@keyframes pulse-green {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 6px 25px rgba(40, 167, 69, 0.5);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }
}

/* Floating Popup Styles */
.floating-popup {
    position: fixed !important;
    left: -450px;
    top: 50% !important;
    transform: translateY(-50%) rotate(-90deg) scale(0.9) !important;
    width: 380px;
    max-height: 80vh;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1001;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform-origin: left center;
}

.floating-popup.active {
    left: 1px;
    top: 50% !important;
    transform: translateY(-50%) translateX(50%) rotate(-90deg) scale(1) !important;
    opacity: 1;
    visibility: visible;
}

.floating-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.floating-overlay.active {
    opacity: 1;
    visibility: visible;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
}

.popup-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.popup-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.popup-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.popup-close svg {
    width: 20px;
    height: 20px;
}

.popup-body {
    padding: 15px;
    max-height: calc(80vh - 80px);
    overflow-y: auto;
}

.contact-form .form-group {
    margin-bottom: 12px;
}

.contact-form label {
    display: block;
    margin-bottom: 3px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    /* outline: none; */
    border-color: #007bff;
}

.contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.btn-submit {
    width: 100%;
    background: linear-gradient(135deg, #28a745, #1e7e34);
    color: white;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit:hover {
    background: linear-gradient(135deg, #1e7e34, #155724);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

/* iPad Responsive - Scale down */
@media (max-width: 1024px) and (min-width: 769px) {
    .floating-action-panel{
    display: none; 
        left: -85px;
        top: 50%;
        transform: translateY(-50%) rotate(90deg) scale(0.8);
    }
    
    .floating-btn {
        padding: 12px 16px;
        min-width: 110px;
        font-size: 13px;
    }
    
    .floating-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .floating-popup {
        width: 320px;
        transform: translateY(-50%) rotate(-90deg) scale(0.8) !important;
    }
    
    .floating-popup.active {
        transform: translateY(-50%) translateX(50%) rotate(-90deg) scale(0.8) !important;
    }
}

/* Mobile Responsive - Hide completely */
@media (max-width: 768px) {
    .floating-action-panel {
        display: none !important;
    }
}

/* All iPads (portrait + landscape, mini/Air/Pro) - hide panel */
@media screen and (min-device-width: 768px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1) {
    .floating-action-panel {
        display: none !important;
    }
}



.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.7);
    /* border: 3px solid #444343; */
    border-radius: 50%;
    width: 50px;  /* Reduced from 40px */
    height: 50px; /* Reduced from 40px */
    font-size: 2.2em; /* Reduced from 1.5em */
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Ensure no extra padding */
    line-height: 1; /* Adjust line height for better centering */
}

.prev-btn {
    left: 5px;
}

.next-btn {
    right: 5px;
}

@media (max-width: 768px) {
    header {
        padding: 15px 30px;
    }

    /* Mobile Phone Number Styles */
    .right-nav {
        display: flex;
        align-items: center;
    }

    .phone-number {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        background-color: #0056b3;
        color: #ffffff !important;
        border-radius: 20px;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.85em;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
    }

    .phone-number:hover {
        background-color: #004a99;
        color: #ffffff !important;
    }

    .phone-number svg {
        width: 16px;
        height: 16px;
    }

    .phone-text {
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    .hero h1 {
        font-size: 2em;
    }

    .btn {
        padding: 10px 20px;
        min-width: 150px;
    }

    .models-grid, .products-grid {
        padding: 20px;
        gap: 15px;
        grid-template-columns: 1fr; /* Single column on mobile */
    }

    .product-card .card-content {
        padding: 20px;
        margin: 0px -0px 20px 0;
    }

    .product-card .card-content h2 {
        font-size: 1.6em;
    }

    .product-card .card-content .buttons {
        flex-direction: row;
        gap: 8px;
        margin-top: 15px;
    }

    .product-card .btn {
        min-width: auto;
        width: 100%;
        padding: 8px 12px;
        font-size: 0.8em;
        border-radius: 4px;
    }

    /* Make buttons always visible on mobile */
    .product-card .card-content .buttons {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .info-boxes {
        padding: 20px;
        flex-direction: column;
        align-items: center;
    }

    .info-box {
        flex-basis: auto;
        width: 90%;
    }

    .map-content {
        padding: 20px;
    }

    .stats {
        flex-direction: column;
        gap: 15px;
    }

    footer {
        padding: 20px;
    }

    /* Footer Social Icons */
.footer-social-icons {
    text-align: center;
    margin-bottom: 20px; /* Space below icons before nav */
}

.footer-social-icons a {
    display: inline-block;
    margin: 0 10px;
    color: #ffffff; /* Icon color */
    transition: color 0.3s ease;
}

.footer-social-icons a svg {
    width: 28px; /* Icon size */
    height: 28px;
    vertical-align: middle;
}

.footer-social-icons a:hover {
    color: #007bff; /* Icon hover color - can be your primary blue */
}

/* Footer Navigation */
.footer-nav {
        gap: 10px;
    }

    .models-grid.slider-container {
        padding: 20px 10px; /* Adjust padding */
    }

    .model-card {
        width: 100%; /* Make card take full available width in the track on mobile */
        /* Adjust height if necessary for mobile aspect ratio, e.g., height: auto; or a specific mobile height */
    }

    .info-boxes {
        padding: 20px;
        flex-direction: column;
        align-items: center;
    }

    .info-box {
        flex-basis: auto;
        width: 90%;
    }

    .map-content {
        padding: 20px;
    }

    .stats {
        flex-direction: column;
        gap: 15px;
    }

    footer {
        padding: 20px;
    }

    /* Footer Social Icons */
.footer-social-icons {
    text-align: center;
    margin-bottom: 20px; /* Space below icons before nav */
}

.footer-social-icons a {
    display: inline-block;
    margin: 0 10px;
    color: #ffffff; /* Icon color */
    transition: color 0.3s ease;
}

.footer-social-icons a svg {
    width: 28px; /* Icon size */
    height: 28px;
    vertical-align: middle;
}

.footer-social-icons a:hover {
    color: #007bff; /* Icon hover color - can be your primary blue */
}

/* Footer Navigation */
.footer-nav {
        gap: 10px;
    }

    .models-grid.slider-container {
        padding: 20px 10px; /* Adjust padding */
    }

    .model-card {
        width: 280px; /* Keep fixed width for mobile */
        max-width: none; /* Remove max-width constraint for mobile if needed */
    }

    .model-card img {
        height: 250px; /* Adjust image height */
    }

    .model-card .card-content {
        min-height: 130px;
    }

     .model-card .btn {
        min-width: 100px;
    }

    .prev-btn {
        left: 5px;
    }

    .next-btn {
        right: 5px;
    }
}

@media (max-width: 480px) {
    .hero .buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 80%; /* Make buttons wider on small screens */
    }

     .service-map .buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* Make sure the .hero.main-page section has a defined height
   for the bottom alignment to be noticeable.
   Often, hero sections span the full viewport height. */
.hero.main-page {
    display: flex;
    flex-direction: column;
    min-height: 80vh; /* Adjust as needed, e.g., 80vh or a fixed pixel value */
    position: relative;
    overflow: hidden;
    /* margin-top: 80px; */
    /* any existing styles for .hero.main-page ... */
}

.hero.main-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(0px);
    z-index: 1;
}

.hero.main-page .content {
    margin-top: auto; /* This pushes the content to the bottom */
    /* You might want to add some padding at the bottom */
    padding-bottom: 40px; /* Adjust as needed */
    position: relative;
    z-index: 2;
    /* any existing styles for .hero.main-page .content ... */
    /* For example, if you want the text inside .content to be centered: */
    /* text-align: center; */
    /* width: 100%; */
}

.hero.main-page h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: #000000 2px 1px 10px;
}

/* If you want the .scroll-indicator to also be at the bottom,
   you might need to adjust its styling or ensure it's outside
   the main flow that pushes .content down, or position it absolutely.
   For now, this will place .content above .scroll-indicator if
   .scroll-indicator is also a direct child of .hero.main-page and
   comes after .content in the HTML.
   If .scroll-indicator is part of .content, it will move with it.
   If it's a sibling, it will be pushed down by margin-top: auto on .content.
*/
.hero.main-page .scroll-indicator {
    /* Example: center the scroll indicator horizontally at the very bottom */
    align-self: center;
    margin-bottom: 20px; /* Adjust as needed */
    position: relative;
    z-index: 2;
    /* any existing styles for .scroll-indicator ... */
}

/* Why Choose Turf Page Styles */
.hero.why-choose-hero {
    background: linear-gradient(135deg, rgba(26, 35, 126, 0.8) 0%, rgba(74, 124, 89, 0.8) 100%), url('photos/lawn.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 60vh;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: white;
    text-align: center;
    overflow: hidden;
}

.hero.why-choose-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 70%, rgba(74, 124, 89, 0.3) 0%, transparent 50%);
    z-index: 1;
}

.hero.why-choose-hero .content {
    max-width: 900px;
    padding: 0 20px;
    z-index: 2;
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 1.2s ease-out 0.3s forwards;
}

.hero.why-choose-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.hero.why-choose-hero p {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    margin-bottom: 2.5rem;
    opacity: 0.95;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    font-weight: 300;
    line-height: 1.6;
}

.hero.why-choose-hero .buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero.why-choose-hero .btn {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.hero.why-choose-hero .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s;
}

.hero.why-choose-hero .btn:hover::before {
    left: 100%;
}

.hero.why-choose-hero .btn-primary {
    background: linear-gradient(135deg, #4a7c59 0%, #5a944d 100%);
    color: white;
    border: none;
    box-shadow: 0 8px 25px rgba(74, 124, 89, 0.3);
}

.hero.why-choose-hero .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(74, 124, 89, 0.4);
}

.hero.why-choose-hero .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.hero.why-choose-hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
}

.container {
    /* max-width: 1200px; */
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}

.benefits-overview {
    padding: 120px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.benefits-overview::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 40%;
    height: 200%;
    background: radial-gradient(circle, rgba(74, 124, 89, 0.05) 0%, transparent 70%);
    transform: rotate(15deg);
}

.benefits-overview .container {
    position: relative;
    z-index: 2;
}

.benefits-overview h2 {
    text-align: center;
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 30px;
    color: #171a20;
    font-weight: 800;
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.section-intro {
    text-align: center;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: #555;
    max-width: 900px;
    margin: 0 auto 80px;
    line-height: 1.7;
    font-weight: 300;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 2fr));
    gap: 50px;
    margin-top: 80px;
    padding: 0 20px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.benefit-card {
    background: rgba(255, 255, 255, 0.9);
    padding: 50px 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.benefit-card:nth-child(1) { animation-delay: 0.6s; }
.benefit-card:nth-child(2) { animation-delay: 0.8s; }
.benefit-card:nth-child(3) { animation-delay: 1.0s; }
.benefit-card:nth-child(4) { animation-delay: 1.2s; }
.benefit-card:nth-child(5) { animation-delay: 1.4s; }
.benefit-card:nth-child(6) { animation-delay: 1.6s; }

.benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(74, 124, 89, 0.1), transparent);
    transition: left 0.6s;
}

.benefit-card:hover::before {
    left: 100%;
}

.benefit-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.benefit-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, #4a7c59 0%, #5a944d 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    box-shadow: 0 8px 25px rgba(74, 124, 89, 0.3);
    transition: all 0.3s ease;
}

.benefit-card:hover .benefit-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 35px rgba(74, 124, 89, 0.4);
}

.benefit-icon svg {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
}

.benefit-card:hover .benefit-icon svg {
    transform: scale(1.1);
}

.benefit-card h3 {
    font-size: 1.6em;
    margin-bottom: 20px;
    color: #171a20;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.benefit-card p {
    color: #666;
    line-height: 1.7;
    font-size: 1.05rem;
    font-weight: 300;
}

.detailed-benefits {
    padding: 120px 0;
    background: linear-gradient(180deg, white 0%, #f8f9fa 100%);
    position: relative;
    overflow: hidden;
}

.detailed-benefits::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10%;
    width: 30%;
    height: 100%;
    background: radial-gradient(ellipse, rgba(74, 124, 89, 0.03) 0%, transparent 70%);
    transform: skewX(-15deg);
}

.detailed-benefits .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.benefit-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    margin-bottom: 8rem;
    align-items: center;
    opacity: 0;
    transform: translateY(60px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.benefit-section:nth-child(1) { animation-delay: 0.2s; }
.benefit-section:nth-child(2) { animation-delay: 0.4s; }
.benefit-section:nth-child(3) { animation-delay: 0.6s; }

.benefit-section:nth-child(even) {
    direction: rtl;
}

.benefit-section:nth-child(even) > * {
    direction: ltr;
}

.benefit-content {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

.benefit-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.benefit-content h3 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin-bottom: 1.5rem;
    color: #2c5530;
    font-weight: 800;
    letter-spacing: -0.02em;
    position: relative;
}

.benefit-content h3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(135deg, #4a7c59 0%, #5a944d 100%);
    border-radius: 2px;
}

.benefit-content p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    font-weight: 300;
}

.benefit-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-content li {
    padding: 12px 0;
    color: #333;
    position: relative;
    padding-left: 35px;
    font-size: 1.05rem;
    line-height: 1.6;
    transition: all 0.3s ease;
}

.benefit-content li:hover {
    color: #2c5530;
    transform: translateX(5px);
}

.benefit-content li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 12px;
    color: #4a7c59;
    font-weight: bold;
    font-size: 1.2rem;
    width: 24px;
    height: 24px;
    background: rgba(74, 124, 89, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.benefit-content li:hover:before {
    background: rgba(74, 124, 89, 0.2);
    transform: scale(1.1);
}

.benefit-image {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    position: relative;
    transition: all 0.4s ease;
}

.benefit-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(74, 124, 89, 0.1) 0%, transparent 50%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.benefit-image:hover::before {
    opacity: 1;
}

.benefit-image:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
}

.benefit-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-image:hover img {
    transform: scale(1.08);
}

.comparison-section {
    /* padding: 120px 0; */
    padding-bottom: 50px;
    background: linear-gradient(135deg, #f1f3f4 0%, #e8eaed 100%);
    position: relative;
    overflow: hidden;
}

.comparison-section::before {
    content: '';
    position: absolute;
    top: -30%;
    left: 70%;
    width: 60%;
    height: 160%;
    background: radial-gradient(ellipse, rgba(74, 124, 89, 0.04) 0%, transparent 70%);
    transform: rotate(-20deg);
}

.comparison-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 0;
    position: relative;
    z-index: 2;
}

.comparison-section h2 {
    text-align: center;
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 1.5rem;
    color: #2c5530;
    font-weight: 800;
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.comparison-section .section-header {
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.comparison-table {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    max-width: 900px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th {
    background: linear-gradient(135deg, #4a7c59 0%, #5a944d 100%);
    color: white;
    padding: 2rem 1.5rem;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
}

.comparison-table th::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.3) 100%);
}

.comparison-table td {
    padding: 1.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.comparison-table td:first-child,
.comparison-table th:first-child {
    text-align: left;
    padding-left: 2.5rem;
}

.comparison-table tr:hover td {
    background: rgba(74, 124, 89, 0.02);
    transform: scale(1.01);
}

.comparison-table tr:nth-child(even) td {
    background: rgba(248, 249, 250, 0.5);
}

.comparison-table .check {
    color: #4a7c59;
    font-size: 1.8rem;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(74, 124, 89, 0.2);
    /* animation: pulse 2s infinite; */
}

.comparison-table .cross {
    color: #dc3545;
    font-size: 1.8rem;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.comparison-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: linear-gradient(135deg, #5a944d, #4a7c40);
    color: white;
    font-weight: bold;
    padding: 20px;
}

.comparison-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid #eee;
}

.comparison-row:last-child {
    border-bottom: none;
}

.comparison-row > div {
    padding: 20px;
    text-align: center;
}

.feature {
    font-weight: 600;
    background-color: #f8f9fa;
    color: #171a20;
}

.artificial {
    background-color: #e8f5e8;
    color: #2d5a2d;
}

.natural {
    background-color: #ffeaea;
    color: #8b2635;
}

.cta-section {
    background: linear-gradient(135deg, #1a237e 0%, #4a7c59 50%, #2c5530 100%);
    color: white;
    padding: 120px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: float 6s ease-in-out infinite;
}

.cta-section::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 40%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    transform: rotate(25deg);
    animation: float 8s ease-in-out infinite reverse;
}

.cta-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.cta-section h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.cta-section p {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    margin-bottom: 3rem;
    opacity: 0.95;
    font-weight: 300;
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

.cta-buttons {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out 0.6s forwards;
}

.cta-buttons .btn {
    padding: 1.2rem 3rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    min-width: 200px;
}

.cta-buttons .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s;
}

.cta-buttons .btn:hover::before {
    left: 100%;
}

.cta-buttons .btn-primary {
    background: rgba(255, 255, 255, 0.95);
    color: #2c5530;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
}

.cta-buttons .btn-primary:hover {
    background: white;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.cta-buttons .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
}

.cta-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: white;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.1);
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Intersection Observer for Lazy Loading */
.lazy-load {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

.lazy-load.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Animations for Benefit Sections */
.lazy-load.slide-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s ease-out;
}

.lazy-load.slide-left.loaded {
    opacity: 1;
    transform: translateX(0);
}

.lazy-load.slide-right {
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s ease-out;
}

.lazy-load.slide-right.loaded {
    opacity: 1;
    transform: translateX(0);
}

/* Enhanced Responsive Design for Why Choose Turf Page */
@media (max-width: 1200px) {
    .benefits-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 40px;
    }
    
    .benefit-section {
        gap: 4rem;
        margin-bottom: 6rem;
    }
}

@media (max-width: 768px) {
    .hero.why-choose-hero {
        background-attachment: scroll;
        min-height: 60vh;
    }
    
    .hero.why-choose-hero .content {
        padding: 0 15px;
    }
    
    .hero.why-choose-hero .buttons {
        gap: 1rem;
        flex-direction: column;
        align-items: center;
    }
    
    .hero.why-choose-hero .btn {
        width: 100%;
        max-width: 280px;
        padding: 1rem 2rem;
    }
    
    .benefits-overview {
        padding: 80px 0;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 60px;
    }
    
    .benefit-card {
        padding: 40px 30px;
    }
    
    .detailed-benefits {
        padding: 80px 0;
    }
    
    .benefit-section {
        grid-template-columns: 1fr;
        gap: 3rem;
        margin-bottom: 5rem;
        text-align: center;
    }
    
    .benefit-section:nth-child(even) {
        direction: ltr;
    }
    
    .benefit-content {
        padding: 1.5rem;
    }
    
    .benefit-image img {
        height: 250px;
    }
    
    .comparison-section {
        padding: 80px 0;
    }
    
    .comparison-table {
        border-radius: 16px;
        margin: 0 10px;
    }
    
    .comparison-table th {
        padding: 1.5rem 1rem;
        font-size: 1.1rem;
    }
    
    .comparison-table td {
        padding: 1rem;
        font-size: 1rem;
    }
    
    .cta-section {
        padding: 80px 0;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    
    .cta-buttons .btn {
        width: 90%;
        max-width: 300px;
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .hero.why-choose-hero .content {
        padding: 0 10px;
    }
    
    .benefits-overview,
    .detailed-benefits,
    .comparison-section,
    .cta-section {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .benefit-card {
        padding: 30px 20px;
    }
    
    .benefit-content {
        padding: 1rem;
    }
    
    .comparison-table {
        margin: 0 5px;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 0.8rem 0.5rem;
        font-size: 0.9rem;
    }
}

/* Performance Optimizations */
.benefit-card,
.benefit-image,
.comparison-table {
    will-change: transform;
}

.why-hero {
    background: url('photos/landscape-turf/family-friendly-artificial-lawn.webp') no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    color: white;
    padding: 80px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.why-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.why-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px;
    align-items: center;
}

.why-hero .hero-image {
    display: none;
}

.why-hero .buttons {
    justify-content: center;
}

.why-hero .hero-text {
    width: 100%;
}

.why-hero .hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.why-hero .hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.why-hero .hero-text p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Pet Turf Page Styles */
.pet-hero {
    background: url('photos/home/pet-turf-installation-artificial-turf.webp') no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    color: white;
    padding: 80px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pet-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.pet-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px;
    align-items: center;
}

.pet-hero .hero-image {
    display: none;
}

.pet-hero .buttons {
    justify-content: center;
}

.pet-hero .hero-text {
    width: 100%;
}

.pet-hero .hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.pet-hero .hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.pet-hero .hero-text p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Warranty Page Hero Styles */
.warranty-hero {
    background: url('photos/benefit/premium-materials-artificial-turf.webp') no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    color: white;
    padding: 80px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.warranty-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.warranty-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px;
    align-items: center;
}

.warranty-hero .hero-image {
    display: none;
}

.warranty-hero .buttons {
    justify-content: center;
}

.warranty-hero .hero-text {
    width: 100%;
}

.warranty-hero .hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.warranty-hero .hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.warranty-hero .hero-text p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.maintenance-hero {
    background: url('photos/maintanance.webp') no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    color: white;
    padding: 90px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maintenance-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.maintenance-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 26px;
    align-items: center;
}

.maintenance-hero .hero-image {
    display: none;
}

.maintenance-hero .buttons {
    justify-content: center;
}

.maintenance-hero .hero-text {
    width: 100%;
}

.maintenance-hero .hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    line-height: 1.15;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.maintenance-hero .hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.25rem;
    opacity: 0.95;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.maintenance-hero .hero-text p {
    font-size: 1.15rem;
    margin-bottom: 0;
    line-height: 1.6;
    opacity: 0.92;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* ____________+ */

.cleaning-hero {
    background: url('photos/maintanance.webp') no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    color: white;
    padding: 90px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cleaning-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.cleaning-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 26px;
    align-items: center;
}

.cleaning-hero .hero-image {
    display: none;
}

.cleaning-hero .buttons {
    justify-content: center;
}

.cleaning-hero .hero-text {
    width: 100%;
}

.cleaning-hero .hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    line-height: 1.15;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.cleaning-hero .hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.25rem;
    opacity: 0.95;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.cleaning-hero .hero-text p {
    font-size: 1.15rem;
    margin-bottom: 0;
    line-height: 1.6;
    opacity: 0.92;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ___________ */
.repair-hero {
    background: url('photos/repair-turf/artificial-turf-repair.webp') no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    color: white;
    padding: 90px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.repair-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.repair-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 26px;
    align-items: center;
}

.repair-hero .hero-image {
    display: none;
}

.repair-hero .buttons {
    justify-content: center;
}

.repair-hero .hero-text {
    width: 100%;
}

.repair-hero .hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    line-height: 1.15;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.repair-hero .hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.25rem;
    opacity: 0.95;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.repair-hero .hero-text p {
    font-size: 1.15rem;
    margin-bottom: 0;
    line-height: 1.6;
    opacity: 0.92;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}


/* ___________ */

@media (max-width: 768px) {
    .maintenance-hero {
        padding: 80px 0;
        min-height: 55vh;
    }

    .maintenance-hero .hero-text h1 {
        font-size: 2.4rem;
    }

    .maintenance-hero .hero-text h2 {
        font-size: 1.2rem;
    }

    .maintenance-hero .hero-text p {
        font-size: 1rem;
    }
}

/* Lawn Hero Section */
.lawn-hero {
    background: url('photos/landscape-turf/artificial-turf-backyard-brentwood.webp') no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    color: white;
    padding: 80px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lawn-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.lawn-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px;
    align-items: center;
}

.lawn-hero .hero-image {
    display: none;
}

.lawn-hero .buttons {
    justify-content: center;
}

.lawn-hero .hero-text {
    width: 100%;
}

.lawn-hero .hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.lawn-hero .hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.lawn-hero .hero-text p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.lawn-hero .hero-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* Putting Green Hero Section */
.putting-hero {
    background: url('photos/putting-green/artificial-turf-for-putting-green-pacific-palisades.webp') no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    color: white;
    padding: 80px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.putting-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.putting-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px;
    align-items: center;
}

.putting-hero .hero-image {
    display: none;
}

.putting-hero .buttons {
    justify-content: center;
}

.putting-hero .hero-text {
    width: 100%;
}

.putting-hero .hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.putting-hero .hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.putting-hero .hero-text p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Play Area Hero Section */
.play-hero {
    background: url('photos/home/artificial-turf-installation-for-playground.webp') no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    color: white;
    padding: 80px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.play-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px;
    align-items: center;
}

.play-hero .hero-image {
    display: none;
}

.play-hero .buttons {
    justify-content: center;
}

.play-hero .hero-text {
    width: 100%;
}

.play-hero .hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    .play-hero .hero-text h1 {
        font-size: 2.5rem;
    }
}

.play-hero .hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.play-hero .hero-text p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.balcony-hero {
    background: url('photos/home/artificial-turf-installation-for-balcony.webp') no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    color: white;
    padding: 80px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.balcony-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.balcony-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px;
    align-items: center;
}

.balcony-hero .hero-image {
    display: none;
}

.balcony-hero .buttons {
    justify-content: center;
}

.balcony-hero .hero-text {
    width: 100%;
}

.balcony-hero .hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.balcony-hero .hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.balcony-hero .hero-text p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Rooftop Hero Section */
.rooftop-hero {
    background: url('photos/rooftop-turf/artificial-turf-for-rooftops-los-angeles.webp') no-repeat bottom center/cover;
    position: relative;
    overflow: hidden;
    color: white;
    padding: 80px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rooftop-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1;
}

.rooftop-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px;
    align-items: center;
}

.rooftop-hero .hero-image {
    display: none;
}

.rooftop-hero .buttons {
    justify-content: center;
}

.rooftop-hero .hero-text {
    width: 100%;
}

.rooftop-hero .hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.rooftop-hero .hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.rooftop-hero .hero-text p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.gym-hero {
    background: url('photos/gym-turf/artificial-turf-gym-flooring-07.webp') no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    color: white;
    padding: 80px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gym-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1;
}

.gym-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px;
    align-items: center;
}

.gym-hero .hero-image {
    display: none;
}

.gym-hero .buttons {
    justify-content: center;
}

.gym-hero .hero-text {
    width: 100%;
}

.gym-hero .hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.gym-hero .hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.gym-hero .hero-text p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.about-hero {
    background: url('photos/benefit/artificial-grass-installation.webp') no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    color: white;
    padding: 80px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1;
}
.about-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px;
    align-items: center;
}
.about-hero .hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.about-hero .hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}
.about-hero .hero-text p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.about-hero .buttons {
    justify-content: center;
}
.about-hero .hero-image {
    display: none;
}
.about-hero .hero-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.service-areas-hero {
    background: linear-gradient(135deg, #2c5530 0%, #4a7c59 100%);
    color: white;
    padding: 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-areas-hero .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.service-areas-hero h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.service-areas-hero p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.service-areas-hero .search-bar {
    max-width: 700px;
    margin: 0 auto 20px auto;
    display: flex;
    gap: 12px;
    align-items: center;
    background: #ffffff;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}

.service-areas-hero #city-search {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #111827;
}

.service-areas-hero #city-search::placeholder {
    color: #6b7280;
}

.service-areas-hero #clear-search.btn,
.service-areas-hero .btn.btn-secondary {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: #fff;
    border: none;
}

.service-areas-hero .search-icon {
    color: #4CAF50;
    font-size: 1.2rem;
}

.service-areas-hero .search-bar:focus-within {
    box-shadow: 0 14px 36px rgba(0,0,0,0.2), 0 0 0 3px rgba(76,175,80,0.2);
}

.service-areas-hero #no-results {
    text-align: center;
    color: #e5e7eb;
    margin: 10px 0;
}

.stripes-hero {
    background: url('photos/stripes-turf/artificial-turf-for-stripes-los-angeles.webp') no-repeat center center/cover;
    position: relative;
    overflow: hidden;
    color: white;
    padding: 80px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stripes-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1;
}

.stripes-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px;
    align-items: center;
}

.stripes-hero .hero-image {
    display: none;
}

.stripes-hero .buttons {
    justify-content: center;
}

.stripes-hero .hero-text {
    width: 100%;
}

.stripes-hero .hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    .stripes-hero .hero-text h1 {
        font-size: 2.5rem;
    }
}

.stripes-hero .hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.stripes-hero .hero-text p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* Benefits Section */
.benefits-section {
    padding: 60px 0;
    background: #f8f9fa;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.benefit-card {
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.benefit-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #2c5530, #4a7c59);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
}

.benefit-icon i {
    font-size: 2rem;
    color: white;
}

.benefit-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #2c5530;
}

.benefit-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

.benefit-card img {
    width: 100%;
    height: 325px;
    object-fit: cover;
    border-radius: 10px;
    margin-top: 15px;
}

#plans .benefits-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

#plans .benefit-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    height: 100%;
}

#plans .benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

#plans .plan-card-image {
    margin: 0;
    padding: 0;
    line-height: 0;
    height: 320px;
    position: relative;
}

#plans .plan-card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to top, #ffffff, transparent);
    z-index: 1;
}

#plans .plan-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin-top: 0;
    border-radius: 0;
}

#plans .benefit-icon {
    margin: -38px auto 16px;
    width: 76px;
    height: 76px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

#plans .benefit-icon i {
    font-size: 2rem;
    color: #3e6ae1;
}

#plans .benefit-card h3 {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 24px;
    padding: 0 24px;
    color: #1a1f2c;
    letter-spacing: -0.02em;
}

#plans .plan-badge {
   display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: #156407;
    color: #ffffff;
    margin-right: 8px;
    vertical-align: middle;
    line-height: 1;
    text-transform: uppercase;
}

#plans .benefit-card > p,
#plans .benefit-card > ul {
    padding: 0 32px;
}

#plans .benefit-card > p {
    margin-bottom: 16px;
    color: #4b5563;
    line-height: 1.6;
    font-size: 1.05rem;
}

#plans .benefit-card > p strong {
    color: #1f2937;
    font-weight: 600;
}

#plans .benefit-card > p.plan-goal {
    padding: 16px 20px;
    margin: 0 32px 24px;
    border-radius: 12px;
    border: 1px solid #dcfce7;
    background: #f0fdf4;
    color: #166534;
}

#plans .benefit-card > p.plan-bestfor {
    padding: 16px 20px;
    margin: 8px 32px 24px;
    border-radius: 12px;
    border: none;
    border-left: 4px solid #3e6ae1;
    background: #f8fafc;
    color: #334155;
}

#plans .benefit-card > p.plan-section-title {
    margin-top: 8px;
    margin-bottom: 12px;
    color: #1a1f2c;
}

#plans .benefit-card > p.plan-section-title strong {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}

#plans .benefit-card > ul {
    list-style: none;
    margin: 0 0 32px;
    padding: 0 32px;
}

#plans .benefit-card li {
    position: relative;
    padding-left: 36px;
    margin-bottom: 16px;
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.6;
}

#plans .benefit-card li strong {
    color: #111827;
    font-weight: 600;
}

#plans .benefit-card li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: #16a34a;
    font-size: 0.875rem;
    background: #dcfce7;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

#plans .benefit-card ul:last-of-type li::before {
    content: '\f067';
    color: #2563eb;
    background: #dbeafe;
}

#plans .benefit-card .buttons {
    margin-top: auto;
    padding: 0 32px 32px;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: row;
    gap: 12px;
}

#plans .benefit-card .btn {
    flex: 1;
    width: auto;
    margin: 0;
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    transition: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: none;
}

#plans .benefit-card .btn-secondary {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
}

#plans .benefit-card .btn:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#plans .benefit-card .btn-secondary:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (max-width: 640px) {
    #plans .benefits-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 40px;
    }

    #plans .benefit-card > p,
    #plans .benefit-card > ul,
    #plans .benefit-card .buttons {
        padding-left: 24px;
        padding-right: 24px;
    }

    #plans .benefit-card > p.plan-goal,
    #plans .benefit-card > p.plan-bestfor {
        margin-left: 24px;
        margin-right: 24px;
    }
}

.plan-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 0;
}

.plan-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.plan-modal {
    background: #ffffff;
    border-radius: 24px;
    width: 55%;
    height: 90%;
    max-height: 95vh;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.plan-modal-overlay.is-open .plan-modal {
    transform: translateY(0) scale(1);
}

@media (max-width: 900px) {
    .plan-modal {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
}

.plan-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    color: #1a1f2c;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2101;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.plan-modal-close:hover {
    background: #f3f4f6;
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.plan-modal-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 80px 0 60px;
    background-color: #0000002b;
}

.plan-modal-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}

.plan-modal-header {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 40px;
    text-align: center;
}

.plan-modal-body h3 {
    margin: 0 0 20px;
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1f2c;
    letter-spacing: -0.02em;
}

.plan-modal-goal {
    display: inline-block;
    margin: 0 auto;
    padding: 12px 24px;
    border-radius: 50px;
    background: #f0fdf4;
    border: 1px solid #dcfce7;
    color: #166534;
    font-size: 1.05rem;
    line-height: 1.5;
    font-weight: 500;
}

.plan-modal-section {
    margin-bottom: 40px;
}

.plan-modal-body h4 {
    margin: 50px 0 30px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1f2c;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
}

.plan-modal-bestfor {
    display: block;
    margin: 40px auto 0;
    padding: 24px 32px;
    max-width: 800px;
    border-radius: 16px;
    border: none;
    border-left: 6px solid #3e6ae1;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 1.1rem;
    line-height: 1.6;
    box-shadow: 0 4px 6px -1px rgba(62, 106, 225, 0.08);
}

.plan-stages-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.plan-stage {
    border: none;
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    display: grid;
    grid-template-columns: 380px 1fr;
    background: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plan-stage:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}

.plan-stage-media {
    background: #f3f4f6;
    height: 100%;
    min-height: 260px;
}

.plan-stage-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.plan-stage-content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.plan-stage-content h5 {
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1f2c;
}

.plan-stage-content p {
    margin: 0;
    color: #4b5563;
    line-height: 1.7;
    font-size: 1.05rem;
}

.plan-addons-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.plan-addon {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    background: #ffffff;
    transition: all 0.2s ease;
}

.plan-addon:hover {
    border-color: #3e6ae1;
    box-shadow: 0 4px 12px rgba(62, 106, 225, 0.08);
}

.plan-addon h5 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1f2c;
}

.plan-addon p {
    margin: 0;
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.6;
}

.plan-modal-actions {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #f3f4f6;
    justify-content: center;
}

@media (max-width: 900px) {
    .plan-modal-body {
        padding: 88px 0 48px;
    }

    .plan-modal-inner {
        padding: 0 20px;
    }

    .plan-modal-body h3 {
        font-size: 1.8rem;
    }

    .plan-stage {
        grid-template-columns: 1fr;
    }

    .plan-stage-media {
        height: 240px;
    }

    .plan-stage-content {
        padding: 24px;
    }

    .plan-addons-grid {
        grid-template-columns: 1fr;
    }
}

/* Help Section */
.help-section {
    padding: 60px 0;
    background: white;
}

.help-content {
    margin-top: 60px;
}

.help-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
}

.help-item.reverse {
    direction: rtl;
}

.help-item.reverse > * {
    direction: ltr;
}

.help-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.help-text h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 25px;
    color: #2c5530;
}

.help-text ul {
    list-style: none;
    padding: 0;
}

.help-text li {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    font-size: 1.1rem;
    line-height: 1.6;
}

.help-text li:last-child {
    border-bottom: none;
}

.help-text strong {
    color: #2c5530;
    font-weight: 600;
}

.cleaning-faq {
    padding: 60px 0 80px;
    background: #f8f9fa;
}

.cleaning-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 60px;
    margin-top: 40px;
}

.cleaning-faq-item h3 {
    font-size: 1.3rem;
    color: #1f2933;
    margin-bottom: 10px;
}

.cleaning-faq-item p {
    color: #4b5563;
    line-height: 1.7;
    font-size: 0.98rem;
}

@media (max-width: 768px) {
    .cleaning-faq-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Differences Section */
.differences-section {
    padding: 60px 0;
    background: #f8f9fa;
}

.comparison-table {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    margin-top: 60px;
}

.comparison-header {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    background: linear-gradient(135deg, #2c5530, #4a7c59);
    color: white;
    font-weight: 600;
    font-size: 1.2rem;
}

.comparison-header > div {
    padding: 25px 20px;
    text-align: center;
}

.comparison-row {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    border-bottom: 1px solid #eee;
}

.comparison-row:last-child {
    border-bottom: none;
}

.comparison-row > div {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Timeline icon styling - make icons round */
.comparison-row .comparison-item:first-child i {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f50101, #f70202);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(74, 124, 89, 0.3);
    min-width: 40px;
}

.feature {
    font-weight: 600;
    color: #2c5530;
    background: #f8f9fa;
}

.pet-turf i.fa-check-circle {
    color: #28a745;
    font-size: 1.2rem;
}

.pet-turf i.fa-info-circle {
    color: #17a2b8;
    font-size: 1.2rem;
}

.landscape-turf i.fa-times-circle {
    color: #dc3545;
    font-size: 1.2rem;
}

.landscape-turf i.fa-minus-circle {
    color: #ffc107;
    font-size: 1.2rem;
}

.comparison-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 60px;
    margin-bottom: 60px;
}

.comparison-image-item {
    text-align: center;
    position: relative;
    cursor: pointer;
}

.comparison-image-item:focus,
.comparison-image-item:focus-visible {
    outline: 3px solid #2a7fff;
    outline-offset: 6px;
}

.comparison-image-item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* .comparison-image-item:hover img {
    transform: scale(1.02);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
} */

.comparison-image-item::after {
    content: 'Click or press Enter/Space to view';
    position: absolute;
    bottom: 100px;
    left: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.9rem;
    opacity: 0.85;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.comparison-image-item:hover::after {
    opacity: 1;
    transform: translateY(0);
}

@media (hover: none) {
    .comparison-image-item::after {
        opacity: 0.85;
        transform: translateY(0);
    }
}

.comparison-image-item h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #2c5530;
}

/* Installation Section */
.installation-section {
    padding: 100px 0;
    background: white;
}

.installation-steps {
    margin-top: 60px;
}

.step {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 40px;
    margin-bottom: 60px;
    align-items: start;
}

.step-number {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #2c5530, #4a7c59);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(44, 85, 48, 0.3);
}

.step-content h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #2c5530;
}

.step-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

.step-content img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* CTA Section */
.cta-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #2c5530 0%, #4a7c59 100%);
    color: white;
}

.cta-section .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.cta-content h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.cta-content p {
    font-size: 1.3rem;
    margin-bottom: 30px;
    opacity: 0.9;
    line-height: 1.6;
}

.cta-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* Placeholder Image Styling */
.placeholder-image {
    background: #0d012e;
    /* background: linear-gradient(45deg, #e9ecef 25%, transparent 25%), 
                linear-gradient(-45deg, #e9ecef 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #e9ecef 75%), 
                linear-gradient(-45deg, transparent 75%, #e9ecef 75%); */
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    /* border: 2px dashed #adb5bd; */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.placeholder-image::after {
    content: "📷 Image Placeholder";
    position: absolute;
    background: rgba(255,255,255,0.9);
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: 500;
    color: #6c757d;
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero.main-page {
        background-image: url('photos/home/artificial-turf-installation-lawn-mobile.webp');
    }
    .lawn-hero {
        background: url('photos/landscape-turf/artificial-turf-backyard-brentwood-mobile.webp') no-repeat center center/cover;
    }
    .why-hero {
        background: url('photos/landscape-turf/family-friendly-artificial-lawn-mobile.webp') no-repeat center center/cover;
    }
    .gym-hero {
        background: url('photos/gym-turf/artificial-turf-gym-flooring-07-mobile.webp') no-repeat center center/cover;
    }
    .putting-hero {
        background: url('photos/putting-green/artificial-turf-for-putting-green-pacific-palisades-mobile.webp') no-repeat center center/cover;
    }
    .pet-hero {
        background: url('photos/home/pet-turf-installation-artificial-turf-mobile.webp') no-repeat center center/cover;
    }
    .play-hero {
        background: url('photos/home/artificial-turf-installation-for-playground-mobile.webp') no-repeat center center/cover;
    }
    .balcony-hero {
        background: url('photos/home/artificial-turf-installation-for-balcony-mobile.webp') no-repeat center center/cover;
    }
    .rooftop-hero {
        background: url('photos/rooftop-turf/artificial-turf-for-rooftops-los-angeles-mobile.webp') no-repeat center center/cover;
    }
    .stripes-hero {
        background: url('photos/stripes-turf/artificial-turf-for-stripes-los-angeles-mobile.webp') no-repeat center center/cover;
    }
    .about-hero {
        background: url('photos/benefit/artificial-grass-installation-mobile.webp') no-repeat center center/cover;
    }
    .warranty-hero {
        background: url('photos/benefit/premium-materials-artificial-turf-mobile.webp') no-repeat center center/cover;
    }
    .maintenance-hero {
        background: url('photos/maintanance-mobile.webp') no-repeat center center/cover;
    }
    .cleaning-hero {
        background: url('photos/maintanance-mobile.webp') no-repeat center center/cover;
    }
    .repair-hero {
        background: url('photos/repair-turf/artificial-turf-repair-mobile.webp') no-repeat center center/cover;
    }
    .gallery-hero {
        background: url('photos/home/artificial-turf-for-lawn-installation-mobile.webp') no-repeat center center/cover;
    }
    .blog-hero::before {
        background: url('photos/lawn-mobile.webp') center/cover;
    }
    .pet-hero .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .pet-hero .hero-text h1 {
        font-size: 2.5rem;
    }
    
    .lawn-hero .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .lawn-hero .hero-text h1 {
        font-size: 2.5rem;
    }
    
    .putting-hero .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .putting-hero .hero-text h1 {
        font-size: 2.5rem;
    }
    .hero.main-page h1,
    .balcony-hero .hero-text h1,
    .rooftop-hero .hero-text h1,
    .gym-hero .hero-text h1,
    .cleaning-hero .hero-text h1,
    .repair-hero .hero-text h1 {
        font-size: 2.5rem;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .help-item {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .help-item.reverse {
        direction: ltr;
    }
    
    .comparison-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: white;
    }

    .comparison-header,
    .comparison-row {
        grid-template-columns: 90px 120px 120px;
        width: max-content;
        min-width: 100%;
    }

    .comparison-header > div,
    .comparison-row > div {
        padding: 10px 5px;
        font-size: 0.7rem;
    }
    
    .comparison-images {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .comparison-image-item::after {
        bottom: auto;
        top: 340px;
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
    }
    
    .step {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }
    
    .cta-section .container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .cta-content h2 {
        font-size: 2.2rem;
    }
}

/* Section Header Styles */
.section-header {
    text-align: center;
    /* margin-bottom: 40px; */
    /* padding: 60px 0 0px 0; */
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #171a20;
    margin: 20px 0 0 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .section-title { 
        font-size: 1.5rem; 
        font-weight: 700; 
        color: #171a20; 
        margin: 0; 
        text-transform: uppercase; 
        letter-spacing: 1px; 
    }
}

/* Privacy Policy Page Styles */
.privacy-policy-section {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    min-height: 100vh;
}

.privacy-policy-section .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 30px;
}

.privacy-content {
    background: #ffffff;
    border-radius: 20px;
    padding: 60px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.8s ease-out;
}

.privacy-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: #171a20;
    margin-bottom: 20px;
    text-align: center;
    background: linear-gradient(135deg, #171a20 0%, #4a5568 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.privacy-content .last-updated {
    text-align: center;
    color: #6b7280;
    font-size: 1.1rem;
    margin-bottom: 50px;
    font-style: italic;
}

.privacy-section {
    margin-bottom: 40px;
    padding: 30px 0;
    border-bottom: 1px solid #e5e7eb;
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.privacy-section:last-child {
    border-bottom: none;
}

.privacy-section h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #171a20;
    margin-bottom: 20px;
    position: relative;
    padding-left: 20px;
}

.privacy-section h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 30px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 2px;
}

.privacy-section p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #374151;
    margin-bottom: 20px;
}

.privacy-section p strong {
    color: #171a20;
    font-weight: 600;
}

.privacy-section ul {
    margin: 20px 0;
    padding-left: 0;
    list-style: none;
}

.privacy-section li {
    position: relative;
    padding: 8px 0 8px 30px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #374151;
    transition: all 0.3s ease;
}

.privacy-section li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 8px;
    color: #3b82f6;
    font-weight: bold;
    font-size: 1.2rem;
}

.privacy-section li:hover {
    color: #171a20;
    transform: translateX(5px);
}

.contact-info {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 12px;
    border-left: 4px solid #3b82f6;
    margin: 20px 0;
}

.contact-info p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

.privacy-section a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.privacy-section a:hover {
    color: #1d4ed8;
    border-bottom-color: #1d4ed8;
}

/* Animation delays for staggered effect */
.privacy-section:nth-child(1) { animation-delay: 0.1s; }
.privacy-section:nth-child(2) { animation-delay: 0.2s; }
.privacy-section:nth-child(3) { animation-delay: 0.3s; }
.privacy-section:nth-child(4) { animation-delay: 0.4s; }
.privacy-section:nth-child(5) { animation-delay: 0.5s; }
.privacy-section:nth-child(6) { animation-delay: 0.6s; }
.privacy-section:nth-child(7) { animation-delay: 0.7s; }
.privacy-section:nth-child(8) { animation-delay: 0.8s; }
.privacy-section:nth-child(9) { animation-delay: 0.9s; }
.privacy-section:nth-child(10) { animation-delay: 1.0s; }
.privacy-section:nth-child(11) { animation-delay: 1.1s; }
.privacy-section:nth-child(12) { animation-delay: 1.2s; }
.privacy-section:nth-child(13) { animation-delay: 1.3s; }

/* Responsive Design for Privacy Policy */
@media (max-width: 768px) {
    .privacy-policy-section {
        padding: 100px 0 60px;
    }
    
    .privacy-policy-section .container {
        padding: 0 20px;
    }
    
    .privacy-content {
        padding: 40px 30px;
        border-radius: 15px;
    }
    
    .privacy-content h1 {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }
    
    .privacy-section h2 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    .privacy-section p,
    .privacy-section li {
        font-size: 1rem;
    }
    
    .contact-info {
        padding: 20px;
    }
}

/* Terms of Use Page Styles */
.terms-of-use-section {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    min-height: 100vh;
}

.terms-of-use-section .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 30px;
}

.terms-content {
    background: #ffffff;
    border-radius: 20px;
    padding: 60px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.8s ease-out;
}

.terms-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: #171a20;
    margin-bottom: 20px;
    text-align: center;
    background: linear-gradient(135deg, #171a20 0%, #4a5568 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.terms-content .last-updated {
    text-align: center;
    color: #6b7280;
    font-size: 1.1rem;
    margin-bottom: 50px;
    font-style: italic;
    padding-bottom: 30px;
    border-bottom: 2px solid #e5e7eb;
}

.terms-section {
    margin-bottom: 40px;
}

.terms-section h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #171a20;
    margin-bottom: 20px;
    padding-left: 25px;
    position: relative;
}

.terms-section h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 30px;
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    border-radius: 2px;
}

.terms-section p {
    color: #374151;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

.terms-section strong {
    color: #171a20;
    font-weight: 600;
}

.terms-section ul {
    margin: 20px 0;
    padding-left: 30px;
}

.terms-section li {
    color: #374151;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 10px;
}

.terms-section a {
    color: #4CAF50;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.terms-section a:hover {
    color: #45a049;
    border-bottom-color: #45a049;
}

.contact-info {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 30px;
    border-radius: 15px;
    border-left: 5px solid #4CAF50;
    margin-top: 20px;
}

.contact-info p {
    font-weight: 600;
    color: #171a20;
    margin-bottom: 20px;
}

.contact-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-info li {
    margin-bottom: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
}

.contact-info li:last-child {
    border-bottom: none;
}

/* Responsive Design for Terms of Use */
@media (max-width: 768px) {
    .terms-of-use-section {
        padding: 80px 0 60px;
    }
    
    .terms-of-use-section .container {
        padding: 0 20px;
    }
    
    .terms-content {
        padding: 40px 30px;
    }
    
    .terms-content h1 {
        font-size: 2.5rem;
    }
    
    .terms-section h2 {
        font-size: 1.5rem;
        padding-left: 20px;
    }
    
    .terms-section h2::before {
        width: 3px;
        height: 25px;
    }
}

@media (max-width: 480px) {
    .terms-content {
        padding: 30px 20px;
    }
    
    .terms-content h1 {
        font-size: 2rem;
    }
    
    .terms-section h2 {
        font-size: 1.3rem;
        padding-left: 15px;
    }
    
    .terms-section h2::before {
        width: 3px;
        height: 25px;
    }
}

/* Contact Page Styles */
.contact-hero {
    background: linear-gradient(135deg, #2c5530 0%, #4CAF50 100%);
    color: white;
    padding: 120px 0 80px;
    text-align: center;
}

.contact-hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.contact-hero p {
    font-size: 1.3rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.95;
}

.contact-info-section {
    padding: 80px 0;
    background: #f8fafc;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.contact-details h2 {
    font-size: 2.5rem;
    color: #171a20;
    margin-bottom: 20px;
    font-weight: 700;
}

.contact-details > p {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 40px;
    line-height: 1.6;
}

.contact-methods {
    display: grid;
    gap: 30px;
}

.email-topics {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-top: 30px;
}

.email-topics h3 {
    font-size: 1.4rem;
    color: #2c5530;
    margin-bottom: 20px;
    font-weight: 600;
}

.email-topics ul {
    list-style: none;
    padding: 0;
}

.email-topics li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    color: #666;
    line-height: 1.5;
}

.email-topics li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #4CAF50;
    font-weight: bold;
}

.contact-method {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.contact-method:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.contact-info h3 {
    font-size: 1.3rem;
    color: #171a20;
    margin-bottom: 8px;
    font-weight: 600;
}

.contact-info p {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.contact-info a {
    color: #4CAF50;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: #45a049;
}

.contact-info span {
    font-size: 0.95rem;
    color: #64748b;
}

.contact-form-container {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.contact-form-container h2 {
    font-size: 2.2rem;
    color: #171a20;
    margin-bottom: 15px;
    font-weight: 700;
}

.contact-form-container > p {
    color: #64748b;
    margin-bottom: 30px;
    line-height: 1.6;
}

.contact-form {
    display: grid;
    /* gap: 25px; */
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    color: #171a20;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 15px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f8fafc;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #4CAF50;
    background: white;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #475569;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
}

.contact-form-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0 6px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #f5c2c7;
    background: #fff5f5;
    color: #b42318;
    font-size: 0.95rem;
    line-height: 1.55;
    box-shadow: 0 8px 24px rgba(180, 35, 24, 0.08);
}

.contact-form-alert[hidden] {
    display: none !important;
}

.contact-form-alert::before {
    content: "!";
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #b42318;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.contact-form-alert.is-success {
    border-color: #b7ebc6;
    background: #f2fff5;
    color: #1f7a32;
    box-shadow: 0 8px 24px rgba(31, 122, 50, 0.08);
}

.contact-form-alert.is-success::before {
    content: "\2713";
    background: #1f7a32;
}

.submit-btn {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    padding: 18px 40px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
}

.submit-btn svg {
    width: 20px;
    height: 20px;
}

.service-areas-section {
    padding: 80px 0;
    background: white;
}

.service-areas-section h2 {
    font-size: 2.8rem;
    text-align: center;
    color: #171a20;
    margin-bottom: 20px;
    font-weight: 700;
}

.service-areas-section > .container > p {
    text-align: center;
    font-size: 1.2rem;
    color: #64748b;
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

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

.area-card {
    background: #f8fafc;
    padding: 30px;
    border-radius: 15px;
    border-left: 5px solid #4CAF50;
    transition: all 0.3s ease;
}

.area-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.area-card h3 {
    font-size: 1.4rem;
    color: #171a20;
    margin-bottom: 20px;
    font-weight: 600;
}

.area-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.area-card li {
    padding: 8px 0;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
    transition: color 0.3s ease;
}

.area-card li:last-child {
    border-bottom: none;
}

.area-card li:hover {
    color: #4CAF50;
}

.area-card .city-link {
    color: #475569;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
    padding: 2px 0;
}

.area-card .city-link:hover {
    color: #4CAF50;
    text-decoration: underline;
    transform: translateX(5px);
}

/* Quick Link Button Styling for Areas Grid */
.quick-link-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
}

.quick-link-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.quick-link-btn {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    margin-top: 15px;
    min-width: 120px;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
}

.quick-link-btn:hover {
    background: linear-gradient(135deg, #45a049, #4CAF50);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    color: white;
    text-decoration: none;
}

.quick-link-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
}

.service-note {
    text-align: center;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    padding: 30px;
    border-radius: 15px;
    margin-top: 20px;
}

.service-note p {
    margin: 0;
    font-size: 1.1rem;
}

.why-choose-contact {
    padding: 80px 0;
    background: #f8fafc;
}

.why-choose-contact h2 {
    font-size: 2.8rem;
    text-align: center;
    color: #171a20;
    margin-bottom: 50px;
    font-weight: 700;
}

.benefits-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(355px, 1fr)); */
     grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 30px;
}

.benefit-item {
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.benefit-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.benefit-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
}

.benefit-icon svg {
    width: 35px;
    height: 35px;
    color: white;
}

.benefit-item h3 {
    font-size: 1.4rem;
    color: #171a20;
    margin-bottom: 15px;
    font-weight: 600;
}

.benefit-item p {
    color: #64748b;
    line-height: 1.6;
}

/* Estimate Page Specific Styles */
.estimate-topics {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-top: 30px;
}

.estimate-topics h3 {
    font-size: 1.4rem;
    color: #2c5530;
    margin-bottom: 20px;
    font-weight: 600;
}

.estimate-topics ul {
    list-style: none;
    padding: 0;
}

.estimate-topics li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    color: #666;
    line-height: 1.5;
}

.estimate-topics li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #4CAF50;
    font-weight: bold;
}

.form-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e1e5e9;
}

.form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 20px;
}

.form-section h3 {
    font-size: 1.3rem;
    color: #2c5530;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-section h3::before {
    content: '';
    width: 4px;
    height: 20px;
    background: #4CAF50;
    border-radius: 2px;
}

/* Responsive Design for Contact Page */
@media (max-width: 1024px) {
    .contact-grid {
        gap: 40px;
    }
    
    .contact-form-container {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .contact-hero {
        padding: 100px 0 60px;
    }
    
    .contact-hero h1 {
        font-size: 2.8rem;
    }
    
    .contact-hero p {
        font-size: 1.1rem;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .contact-form-container {
        padding: 25px;
    }
    
    .areas-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }
    
    .benefits-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
        padding: 0;
    }
    
    .benefit-card {
        background: white;
        padding: 20px 20px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
}

@media (max-width: 480px) {
    .contact-hero {
        padding: 80px 0 50px;
    }
    
    .contact-hero h1 {
        font-size: 2.2rem;
    }
    
    .contact-info-section {
        padding: 60px 0;
    }
    
    .contact-method {
        padding: 20px;
        gap: 15px;
    }

    .email-topics {
        padding: 25px;
    }

    .email-topics h3 {
        font-size: 1.2rem;
    }

    .email-topics li {
        padding-left: 22px;
    }
    
    .contact-icon {
        width: 45px;
        height: 45px;
    }
    
    .contact-icon svg {
        width: 22px;
        height: 22px;
    }
    
    .contact-form-container {
        padding: 20px;
    }
    
    .service-areas-section,
    .why-choose-contact {
        padding: 60px 0;
    }
    
    .area-card,
    .benefit-item {
        padding: 25px 20px;
    }
}

/* Gallery Page Styles */

.gallery-hero {
    background: url(photos/home/artificial-turf-for-lawn-installation.webp) no-repeat center center / cover;
    position: relative;
    overflow: hidden;
    color: white;
    padding: 80px 0;
    /* min-height: 60vh; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.gallery-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px;
    align-items: center;
}

/* Gallery Filter Section */
.gallery-filter-section {
    padding: 60px 0 40px;
    background: #f8f9fa;
}

.filter-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 40px;
}

.filter-btn {
    padding: 12px 24px;
    border: 2px solid #2c5530;
    background: transparent;
    color: #2c5530;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-btn:hover,
.filter-btn.active {
    background: #2c5530;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(44, 85, 48, 0.3);
}

/* Gallery Grid Section */
.gallery-grid-section {
    padding: 40px 0 80px;
    background: white;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin: 40px 0 40px 0;
}

.gallery-item {
    opacity: 1;
    transform: scale(1);
    transition: all 0.3s ease;
}

.gallery-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    background: white;
}

.gallery-card::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 80px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.9);
    background-image: url('logo/logo.png');
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    opacity: 0.7;
    pointer-events: none;
    z-index: 2;
}

.gallery-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.gallery-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-card:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 40%,
        rgba(0, 0, 0, 0.7) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 25px;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

.gallery-info {
    color: white;
    margin-bottom: 15px;
}

.gallery-info h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.2;
}

.gallery-info p {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.gallery-category {
    display: inline-block;
    background: rgba(44, 85, 48, 0.9);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gallery-expand {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: #2c5530;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.gallery-card:hover .gallery-expand {
    opacity: 1;
    transform: scale(1);
}

.gallery-expand:hover {
    background: white;
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.gallery-toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10001;
    pointer-events: none;
}

.gallery-toast.visible {
    opacity: 1;
}

.lightbox-image-wrapper {
    position: relative;
}

.lightbox-watermark {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 150px;
    height: auto;
    opacity: 0.7;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    color: white;
    font-size: 30px;
    cursor: pointer;
    z-index: 10001;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

#lightbox-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-info {
    text-align: center;
    color: white;
    margin-top: 20px;
    max-width: 600px;
}

.lightbox-info h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.lightbox-info p {
    font-size: 16px;
    opacity: 0.9;
    line-height: 1.6;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.lightbox-nav-btn {
    width: 50px;
    height: 50px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
    pointer-events: all;
    backdrop-filter: blur(10px);
}

.lightbox-nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

#lightbox-prev {
    margin-left: -25px;
}

#lightbox-next {
    margin-right: -25px;
}

/* Responsive Design for Gallery */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 30px;
    }
    
    .gallery-card {
        border-radius: 12px;
    }
    
    .gallery-card img {
        height: 250px;
    }
    
    .filter-buttons {
        gap: 10px;
        margin-top: 30px;
    }
    
    .filter-btn {
        padding: 10px 18px;
        font-size: 13px;
    }
    
    .gallery-overlay {
        opacity: 1;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.8) 100%
        );
    }
    
    .gallery-expand {
        opacity: 1;
        transform: scale(1);
    }
    
    .lightbox-content {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    #lightbox-image {
        max-height: 60vh;
    }

    .lightbox-watermark {
        width: 90px;
    }
    
    .lightbox-close {
        position: fixed;
        top: 20px;
        right: 20px;
        font-size: 24px;
        width: 40px;
        height: 40px;
        z-index: 10002;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
    }
    
    .lightbox-nav {
        position: fixed;
        width: 100%;
        left: 0;
        top: 45%;
        padding: 0 20px;
    }

    #lightbox-prev {
        margin-left: 0;
    }

    #lightbox-next {
        margin-right: 0;
    }
    
    .lightbox-nav-btn {
        width: 45px;
        height: 45px;
        font-size: 16px;
        background: rgba(0, 0, 0, 0.5);
    }
    
    .lightbox-info h3 {
        font-size: 20px;
    }
    
    .lightbox-info p {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .gallery-filter-section {
        padding: 40px 0 30px;
    }
    
    .gallery-grid-section {
        padding: 30px 0 60px;
    }
    
    .gallery-card img {
        height: 220px;
    }
    
    .gallery-info h3 {
        font-size: 18px;
    }
    
    .gallery-info p {
        font-size: 13px;
    }
    
    .filter-btn {
        padding: 8px 16px;
        font-size: 12px;
    }
}

/* About Us Section Styles */
.about-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
    padding: 1rem;
}

.stat-item {
    text-align: center;
    padding: 1.1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2E7D32, #4CAF50);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.stat-item:hover::before {
    transform: scaleX(1);
}

.stat-number {
    font-size: 2.4rem;
    font-weight: 800;
    color: #2E7D32;
    margin-bottom: 0.3rem;
    background: linear-gradient(135deg, #2E7D32, #4CAF50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-label {
    font-size: 0.95rem;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Why Choose Section - Separated Design */
.why-choose-section {
    padding: 20px 0 40px 0;
    background: linear-gradient(135deg, #f8fffe 0%, #efefef 50%, #f0f9f5 100%);
    position: relative;
    margin-top: 30px;
}

.why-choose-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2E7D32, #4CAF50, #66BB6A);
    box-shadow: 0 2px 10px rgba(46, 125, 50, 0.3);
}

.why-choose-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.why-choose-section .section-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.why-choose-section .section-header::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #2E7D32, #4CAF50);
    border-radius: 2px;
}

/* Enhanced Why Choose Section for About Us */
.why-choose-section .section-header h2 {
    background: linear-gradient(135deg, #2E7D32, #4CAF50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2.1rem;
    margin-bottom: 0.75rem;
}

.why-choose-intro {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #555;
    text-align: center;
    max-width: 960px;
    margin: 0 auto 2rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    border-left: 4px solid #4CAF50;
}

/* Enhanced Highlight Cards */
.highlight-card {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.02), rgba(76, 175, 80, 0.02));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.highlight-card:hover::before {
    opacity: 1;
}

.highlight-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(46, 125, 50, 0.15);
}

.highlight-icon {
    background: linear-gradient(135deg, #2E7D32, #4CAF50);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(46, 125, 50, 0.25);
    transition: all 0.3s ease;
    margin-bottom: 0;
}

.highlight-card:hover .highlight-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 35px rgba(46, 125, 50, 0.4);
}

.highlight-icon i {
    font-size: 1.4rem;
    color: white;
}

.highlight-info {
    flex: 1;
}

.highlight-info h3 {
    color: #2E7D32;
    font-size: 1.15rem;
    margin-top: 0;
    margin-bottom: 0.6rem;
    font-weight: 700;
}

.highlight-info p {
    color: #666;
    line-height: 1.5;
    font-size: 0.95rem;
}

/* Highlights Grid - 2x3 Layout */
.highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 30px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive Design for Why Choose Section */
@media (max-width: 768px) {
    .why-choose-section {
        margin-top: 40px;
    }
    
    .why-choose-section .section-header {
        margin-bottom: 50px;
    }
    
    .why-choose-section .section-header h2 {
        font-size: 2rem;
    }
    
    .highlight-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
        padding: 25px;
    }
    
    .highlight-icon {
        margin-bottom: 15px;
    }
    
    .highlights-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 1fr);
        gap: 20px;
        max-width: 100%;
    }
    
    .about-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 1.5rem;
        margin-top: 2rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .stat-label {
        font-size: 0.9rem;
    }
    
    .why-choose-intro {
        font-size: 1.1rem;
        padding: 1.5rem;
    }
    
    .highlight-icon {
        width: 60px;
        height: 60px;
    }
    
    .highlight-icon i {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .about-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }
    
    .stat-item {
        padding: 1rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .why-choose-section .section-header h2 {
        font-size: 2rem;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .hero.why-choose-hero {
        background-attachment: scroll;
    }
}

/* Article Page Styles */
.article-hero {
    background: linear-gradient(135deg, #2c5530 0%, #4a7c59 100%);
    color: white;
    padding: 120px 0 80px;
    position: relative;
}

.article-breadcrumb {
    margin-bottom: 20px;
    font-size: 14px;
    opacity: 0.9;
}

.article-breadcrumb a {
    color: white;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.article-breadcrumb a:hover {
    opacity: 0.7;
}

.article-breadcrumb i {
    margin: 0 10px;
    font-size: 12px;
}

.article-header {
    max-width: 800px;
}

.article-category {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.article-header h1 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.article-meta {
    display: flex;
    gap: 30px;
    font-size: 14px;
    opacity: 0.9;
}

.article-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-main {
    padding: 80px 0;
    background: #f8f9fa;
}

.article-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.article-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.article-image {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.article-image:hover img {
    transform: scale(1.05);
}

.article-body {
    padding: 40px;
}

.article-intro {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #2c5530;
    font-weight: 500;
    margin-bottom: 30px;
    padding: 20px;
    background: #f0f8f0;
    border-left: 4px solid #4a7c59;
    border-radius: 0 8px 8px 0;
}

.article-body h2 {
    font-size: 2rem;
    color: #2c5530;
    margin: 40px 0 20px;
    font-weight: 700;
    line-height: 1.3;
}

.article-body h3 {
    font-size: 1.5rem;
    color: #4a7c59;
    margin: 30px 0 15px;
    font-weight: 600;
}

.article-body h4 {
    font-size: 1.2rem;
    color: #2c5530;
    margin: 25px 0 12px;
    font-weight: 600;
}

.article-body p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
}

.article-body ul, .article-body ol {
    margin: 20px 0;
    padding-left: 30px;
}

.article-body li {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 8px;
}

.article-body li strong {
    color: #2c5530;
    font-weight: 600;
}

.article-cta {
    background: linear-gradient(135deg, #2c5530 0%, #4a7c59 100%);
    color: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    margin: 40px 0;
}

.article-cta h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: white;
}

.article-cta p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    opacity: 0.9;
    color: white;
}

.article-cta .btn {
    background: white;
    color: #2c5530;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s ease;
}

.article-cta .btn:hover {
    background: #f0f8f0;
    transform: translateY(-2px);
}

.article-tags {
    padding: 30px 40px;
    border-top: 1px solid #eee;
}

.article-tags h4 {
    font-size: 1.1rem;
    color: #2c5530;
    margin-bottom: 15px;
    font-weight: 600;
}

.tag {
    display: inline-block;
    background: #f0f8f0;
    color: #2c5530;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    margin: 0 8px 8px 0;
    text-decoration: none;
    transition: all 0.3s ease;
}

.tag:hover {
    background: #2c5530;
    color: white;
}

.article-share {
    padding: 30px 40px;
    border-top: 1px solid #eee;
    background: #f8f9fa;
}

.article-share h4 {
    font-size: 1.1rem;
    color: #2c5530;
    margin-bottom: 15px;
    font-weight: 600;
}

.share-buttons {
    display: flex;
    gap: 15px;
}

.share-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
}

.share-btn.facebook {
    background: #1877f2;
}

.share-btn.twitter {
    background: #1da1f2;
}

.share-btn.linkedin {
    background: #0077b5;
}

.share-btn.email {
    background: #666;
}

.share-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Article Sidebar */
.article-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sidebar-widget {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.sidebar-widget h3 {
    font-size: 1.3rem;
    color: #2c5530;
    margin-bottom: 20px;
    font-weight: 700;
}

#price-idea-sidebar-widget,
.price-idea-sidebar-widget {
    padding: 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e5eadf;
}

#price-idea-sidebar-widget {
    max-height: 0;
    opacity: 0;
    transform: translateY(-24px);
    margin-top: -30px;
    pointer-events: none;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, transform 0.5s ease-in-out, margin-top 0.5s ease-in-out;
}

#price-idea-sidebar-widget.is-visible {
    max-height: 520px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 0;
    overflow: visible;
    pointer-events: auto;
}

#price-idea-sidebar-widget.is-sticky {
    position: sticky;
    top: 24px;
    z-index: 2;
}

.price-idea-sidebar-widget .price-idea-banner {
    margin: 0;
}

.price-idea-sidebar-widget .price-idea-content {
    flex-direction: column;
    height: auto;
    min-height: 0;
    border-radius: 18px;
}

.price-idea-sidebar-widget .price-idea-left,
.price-idea-sidebar-widget .price-idea-right {
    width: 100%;
}

.price-idea-sidebar-widget .price-idea-left {
    padding: 28px 24px;
}

.price-idea-sidebar-widget .price-idea-left::after {
    display: none;
}

.price-idea-sidebar-widget .price-idea-left h2,
.price-idea-sidebar-widget .price-idea-left h3 {
    text-align: center;
    padding-left: 0;
    font-size: 2.1rem;
}

.price-idea-sidebar-widget .price-idea-right {
    min-height: 220px;
    justify-content: center;
    padding: 28px 24px;
}

.price-idea-sidebar-widget .price-idea-right::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.price-idea-sidebar-widget .price-idea-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.price-idea-sidebar-widget .btn-calculate {
    font-size: 1.2rem;
    padding: 12px 28px;
}

@media (max-width: 768px) {
    #price-idea-sidebar-widget.is-sticky {
        top: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #price-idea-sidebar-widget {
        transition: none;
    }
}

.related-articles {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.related-article {
    display: flex;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.related-article:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.related-article img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.related-content h4 {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.related-content h4 a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-content h4 a:hover {
    color: #2c5530;
}

.related-date {
    font-size: 12px;
    color: #666;
}

.cta-widget {
    background: linear-gradient(135deg, #2c5530 0%, #4a7c59 100%);
    color: white;
}

.cta-widget h3 {
    color: white;
}

.cta-widget p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}

.cta-btn {
    background: white;
    color: #2c5530;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    background: #f0f8f0;
    transform: translateY(-2px);
}

.newsletter-widget {
    background: #f0f8f0;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.newsletter-input {
    padding: 12px 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.newsletter-input:focus {
    outline: none;
    border-color: #4a7c59;
}

.newsletter-btn {
    background: #2c5530;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.newsletter-btn:hover {
    background: #4a7c59;
    transform: translateY(-2px);
}

/* Responsive Design for Articles */
@media (max-width: 1024px) {
    .article-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .article-sidebar {
        order: -1;
    }
    
    .sidebar-widget {
        padding: 25px;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    .article-sidebar {
        order: 1;
    }
}

@media (max-width: 768px) {
    .article-hero {
        padding: 30px 0 60px;
    }
    
    .article-header h1 {
        font-size: 2.2rem;
    }
    
    .article-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .article-body {
        padding: 30px 20px;
    }
    
    .article-body h2 {
        font-size: 1.6rem;
    }
    
    .article-body h3 {
        font-size: 1.3rem;
    }
    
    .article-cta {
        padding: 30px 20px;
    }
    
    .article-tags,
    .article-share {
        padding: 20px;
    }
    
    .share-buttons {
        justify-content: center;
    }

    .article-sidebar {
        order: 1;
    }
}

@media (max-width: 480px) {
    .article-header h1 {
        font-size: 1.8rem;
    }
    
    .article-body p,
    .article-body li {
        font-size: 1rem;
    }
    
    .related-article {
        flex-direction: column;
        gap: 10px;
    }
    
    .related-article img {
        width: 100%;
        height: 120px;
    }
    
    .newsletter-form {
        gap: 12px;
    }
}

/* ===== BLOG PAGE STYLES ===== */

/* Blog Hero Section */
.blog-hero {
    background: linear-gradient(135deg, #2c5530 0%, #4a7c59 100%);
    color: white;
    padding: 120px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.blog-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('photos/lawn.webp') center/cover;
    opacity: 0.1;
    z-index: 1;
}

.blog-hero .container {
    position: relative;
    z-index: 2;
}

.blog-hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.blog-hero p {
    font-size: 1.3rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* Blog Main Layout */
.blog-main {
    padding: 80px 0;
    background: #f8f9fa;
}

.blog-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Blog Posts */
.blog-posts {
    display: flex;
    flex-direction: column;
    gap: 60px; /* Increased from 40px to 60px for better spacing */
}

.blog-post {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    margin: 0 0 35px 0;
}

.blog-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.featured-post {
    border: 2px solid #4a7c59;
    position: relative;
}

.featured-post::before {
    content: 'Featured';
    position: absolute;
    top: 20px;
    left: 20px;
    background: #4a7c59;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 3;
}

.post-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.featured-post .post-image {
    height: 300px;
}

.post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-post:hover .post-image img {
    transform: scale(1.05);
}

.post-category {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(74, 124, 89, 0.9);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}

.post-content {
    padding: 30px;
}

.post-content h2,
.post-content h3 {
    margin-bottom: 15px;
    line-height: 1.3;
}

.post-content h2 {
    font-size: 1.8rem;
    color: #2c5530;
}

.post-content h3 {
    font-size: 1.4rem;
    color: #2c5530;
}

.post-content h2 a,
.post-content h3 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-content h2 a:hover,
.post-content h3 a:hover {
    color: #4a7c59;
}

.post-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #6c757d;
    flex-wrap: wrap;
}

.post-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.post-meta i {
    color: #4a7c59;
}

.post-content p {
    color: #495057;
    line-height: 1.6;
    margin-bottom: 20px;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4a7c59;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 8px 16px;
    background: linear-gradient(135deg, #4a7c59, #2c5530);
    color: white;
    border-radius: 6px;
    margin-top: 0px;
    margin-bottom: 25px;
    box-shadow: 0 1px 6px rgba(74, 124, 89, 0.15);
    font-size: 14px;
}

.read-more:hover {
    background: linear-gradient(135deg, #2c5530, #1a3d1f);
    color: white;
    gap: 8px;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(74, 124, 89, 0.25);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.page-link {
    padding: 10px 15px;
    background: white;
    color: #4a7c59;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.page-link:hover,
.page-link.active {
    background: #4a7c59;
    color: white;
    border-color: #4a7c59;
}

/* Blog Sidebar */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.sidebar-widget {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
}

.sidebar-widget h3 {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #4a7c59;
}

/* Search Widget */
.search-form {
    display: flex;
    gap: 10px;
}

.search-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 0.9rem;
}

.search-input:focus {
    outline: none;
    border-color: #4a7c59;
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.1);
}

.search-btn {
    padding: 12px 15px;
    background: #4a7c59;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.search-btn:hover {
    background: #2c5530;
}

/* Categories Widget */
.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li {
    margin-bottom: 12px;
}

.category-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    color: #495057;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.category-list a:hover {
    background: #f8f9fa;
    color: #4a7c59;
    border-color: #4a7c59;
}

.category-list i {
    margin-right: 10px;
    color: #4a7c59;
}

.category-list span {
    background: #e9ecef;
    color: #6c757d;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
}

/* Recent Posts Widget */
.recent-posts {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.recent-post {
    display: flex;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}

.recent-post:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.recent-post img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.recent-post-content h4 {
    font-size: 0.9rem;
    margin-bottom: 5px;
    line-height: 1.3;
}

.recent-post-content a {
    color: #2c5530;
    text-decoration: none;
    transition: color 0.3s ease;
}

.recent-post-content a:hover {
    color: #4a7c59;
}

.recent-date {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Newsletter Widget */
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.newsletter-input {
    padding: 12px 15px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 0.9rem;
}

.newsletter-input:focus {
    outline: none;
    border-color: #4a7c59;
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.1);
}

.newsletter-btn {
    padding: 12px 20px;
    background: #4a7c59;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.newsletter-btn:hover {
    background: #2c5530;
}

/* CTA Widget */
.cta-widget {
    background: linear-gradient(135deg, #4a7c59 0%, #2c5530 100%);
    color: white;
    text-align: center;
}

.cta-widget h3 {
    color: white;
    border-bottom-color: rgba(255,255,255,0.3);
}

.cta-widget p {
    margin-bottom: 20px;
    opacity: 0.9;
}

.cta-btn {
    display: inline-block;
    padding: 12px 25px;
    background: white;
    color: #4a7c59;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Blog Responsive Design */
@media (max-width: 1024px) {
    .blog-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .blog-hero h1 {
        font-size: 3rem;
    }
}

@media (max-width: 768px) {
    .blog-hero {
        padding: 100px 0 60px;
    }
    
    .blog-hero h1 {
        font-size: 2.5rem;
    }
    
    .blog-hero p {
        font-size: 1.1rem;
    }
    
    .blog-main {
        padding: 60px 0;
    }
    
    .blog-layout {
        gap: 30px;
    }
    
    .blog-posts {
        gap: 30px;
    }
    
    .post-content {
        padding: 25px;
    }
    
    .post-content h2 {
        font-size: 1.5rem;
    }
    
    .post-content h3 {
        font-size: 1.2rem;
    }
    
    .post-meta {
        gap: 15px;
        font-size: 0.8rem;
    }
    
    .sidebar-widget {
        padding: 25px;
    }
    
    .pagination {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .page-link {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .blog-hero h1 {
        font-size: 2rem;
    }
    
    .blog-hero p {
        font-size: 1rem;
    }
    
    .post-image {
        height: 200px;
    }
    
    .featured-post .post-image {
        height: 220px;
    }
    
    .post-content {
        padding: 20px;
    }
    
    .post-meta {
        flex-direction: column;
        gap: 8px;
    }
    
    .sidebar-widget {
        padding: 20px;
    }
    
    .search-form {
        flex-direction: column;
    }
    
    .recent-post {
        flex-direction: column;
        gap: 10px;
    }
    
    .recent-post img {
        width: 100%;
        height: 120px;
    }
}

/* Blog Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .blog-post,
    .post-image img,
    .read-more,
    .page-link,
    .category-list a,
    .cta-btn {
        transition: none;
    }
    
    .blog-post:hover {
        transform: none;
    }
    
    .blog-post:hover .post-image img {
        transform: none;
    }
    
    .read-more:hover {
        gap: 8px;
    }
    
    .cta-btn:hover {
        transform: none;
    }
}

/* Dynamic Blog Functionality Styles - Simplified for restored layout */

/* Remove blog controls and results info styles since they're not used in restored layout */

.loading-state {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.loading-state i {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #2c5530;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.no-results {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.no-results i {
    font-size: 3rem;
    margin-bottom: 20px;
    color: #ccc;
}

.no-results h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 10px;
}

.no-results p {
    font-size: 16px;
    line-height: 1.6;
}

.error-message {
    text-align: center;
    padding: 60px 20px;
    color: #e74c3c;
    background: #fdf2f2;
    border-radius: 12px;
    border: 1px solid #fadbd8;
}

.error-message i {
    font-size: 3rem;
    margin-bottom: 20px;
}

.error-message p {
    font-size: 16px;
    margin: 0;
}

/* Enhanced Blog Post Styles for Dynamic Content */
.blog-post .post-stats {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    color: #666;
}

.blog-post .post-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog-post .post-stats i {
    font-size: 12px;
}

.featured-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(255, 107, 107, 0.3);
}

/* Pagination Styles */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 50px;
    padding: 30px 0;
}

.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0 15px;
    background: white;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 2px solid #e0e0e0;
    gap: 8px;
}

.pagination-btn:hover {
    background: #2c5530;
    color: white;
    border-color: #2c5530;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(44, 85, 48, 0.2);
}

.pagination-btn.active {
    background: #2c5530;
    color: white;
    border-color: #2c5530;
    box-shadow: 0 4px 15px rgba(44, 85, 48, 0.2);
}

.pagination-btn.prev,
.pagination-btn.next {
    padding: 0 20px;
    font-weight: 600;
}

.pagination-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    color: #666;
    font-weight: 500;
}

/* Enhanced Category Filter Styles */
.category-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.category-filter:hover {
    background: #f8f9fa;
    color: #2c5530;
    transform: translateX(5px);
}

.category-filter.active {
    background: linear-gradient(135deg, #2c5530, #4a7c59);
    color: white;
}

.category-filter.active:hover {
    transform: translateX(0);
}

.category-filter span {
    margin-left: auto;
    font-size: 12px;
    background: rgba(44, 85, 48, 0.1);
    color: #2c5530;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.category-filter.active span {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Responsive Design for Dynamic Elements */
@media (max-width: 768px) {
    .blog-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
    
    .filter-group {
        justify-content: space-between;
    }
    
    .filter-select {
        flex: 1;
        max-width: 200px;
    }
    
    .results-info {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .pagination {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .pagination-btn {
        min-width: 40px;
        height: 40px;
        font-size: 13px;
    }
    
    .pagination-btn.prev,
    .pagination-btn.next {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .blog-controls {
        padding: 15px;
    }
    
    .pagination-btn.prev .fas,
    .pagination-btn.next .fas {
        display: none;
    }
    
    .pagination-btn.prev::after {
        content: "Prev";
    }
    
    .pagination-btn.next::after {
        content: "Next";
    }
    
    .pagination-btn.prev,
    .pagination-btn.next {
        padding: 0 12px;
    }
}

/* Blog CTA Section - Separated from blog container */
.blog-cta {
    margin-top: 80px;
    padding: 60px 0;
    background: linear-gradient(135deg, #2c5530, #4a7c59);
    position: relative;
    overflow: hidden;
}

.blog-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grass" patternUnits="userSpaceOnUse" width="20" height="20"><path d="M10,20 Q5,10 10,0 Q15,10 10,20" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grass)"/></svg>');
    opacity: 0.1;
}

.blog-cta .cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.blog-cta h2 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 20px;
    font-weight: 700;
}

.blog-cta p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
    line-height: 1.6;
}

.blog-cta .cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.blog-cta .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.blog-cta .cta-btn.primary {
    background: white;
    color: #2c5530;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.blog-cta .cta-btn.primary:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.blog-cta .cta-btn.secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.blog-cta .cta-btn.secondary:hover {
    background: white;
    color: #2c5530;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .blog-cta {
        margin-top: 60px;
        padding: 40px 0;
    }
    
    .blog-cta h2 {
        font-size: 2rem;
    }
    
    .blog-cta .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .blog-cta .cta-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

/* Mobile: Disable hover button effects in services section */
@media (max-width: 768px) {
    .models-block-grid .model-card:hover .card-content::after,
    .model-card:hover .card-content::after {
        opacity: 0 !important;
        transform: translateY(10px) !important;
    }
}

/* Shimmer Animation for Get My Custom Quote Button */
/* @keyframes diagonal-shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    50% {
        transform: translateX(50%) translateY(50%) rotate(45deg);
    }
    100% {
        transform: translateX(200%) translateY(200%) rotate(45deg);
    }
} */

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(62, 106, 225, 0.3), 0 0 10px rgba(62, 106, 225, 0.2), 0 0 15px rgba(62, 106, 225, 0.1);
    }
    50% {
        box-shadow: 0 0 20px rgba(62, 106, 225, 0.6), 0 0 30px rgba(62, 106, 225, 0.4), 0 0 40px rgba(62, 106, 225, 0.2);
    }
}

@keyframes background-pulse {
    0%, 100% {
        background: linear-gradient(135deg, #3e6ae1, #4a73e4, #5a7ce8);
    }
    50% {
        background: linear-gradient(135deg, #2c5aa0, #3e6ae1, #4a73e4);
    }
}

.shimmer-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #3e6ae1, #4a73e4, #5a7ce8);
    /* animation: background-pulse 3s ease-in-out infinite, pulse-glow 2s ease-in-out infinite; */
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 15px rgba(62, 106, 225, 0.3);
}

/* .shimmer-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255, 255, 255, 0.8) 50%, 
        transparent 70%);
    animation: diagonal-shimmer 4s ease-in-out infinite;
    z-index: 1;
} */

.shimmer-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 25%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 255, 255, 0.1) 75%, 
        transparent 100%);
    animation: shimmer-wave 1.8s linear infinite;
    z-index: 2;
}

@keyframes shimmer-wave {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.shimmer-btn:hover {
    background: linear-gradient(135deg, #2c5aa0, #3e6ae1, #4a73e4);
    animation: background-pulse 1.5s ease-in-out infinite, pulse-glow 1s ease-in-out infinite;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(62, 106, 225, 0.5), 0 0 50px rgba(62, 106, 225, 0.3);
}

.shimmer-btn:hover::before {
    animation: diagonal-shimmer 1.2s ease-in-out infinite;
}

.shimmer-btn:hover::after {
    animation: shimmer-wave 0.8s linear infinite;
}

/* Installation Timeline Styles - removed timeline-progress component */

/* Enhanced Hero Section Styles */
.installation-hero {
    background: linear-gradient(135deg, #2c5530 0%, #4a7c59 50%, #3a6b4a 100%);
    color: white;
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}

.installation-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" patternUnits="userSpaceOnUse" width="40" height="40"><rect width="40" height="40" fill="none"/><path d="M0,40 L40,40 L40,0" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.1;
}

.hero-overlay {
    position: relative;
    z-index: 2;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-text h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-text h2 {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 25px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.hero-text .hero-subtitle {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.hero-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 35px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.hero-btn {
    padding: 18px 35px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.hero-btn.btn-primary {
    background: linear-gradient(135deg, #ff6b35, #ff8e53);
    border: none;
    color: white;
}

.hero-btn.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255, 107, 53, 0.3);
    background: linear-gradient(135deg, #ff8e53, #ff6b35);
}

.hero-btn.btn-secondary {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(10px);
}

.hero-btn.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
}

.hero-features {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
}

.hero-feature i {
    color: #4CAF50;
    font-size: 1.2em;
}

.hero-image {
    position: relative;
}

.hero-main-image {
    width: 100%;
    max-width: 750px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
    transition: transform 0.3s ease;
}

.hero-main-image:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

.hero-image-badge {
    position: absolute;
    bottom: 20px;
    right: -20px;
    background: linear-gradient(135deg, #ff6b35, #ff8e53);
    color: white;
    padding: 15px 20px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Responsive Hero */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .hero-text h1 {
        font-size: 2.8rem;
    }
    
    .hero-text h2 {
        font-size: 1.5rem;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .hero-features {
        align-items: center;
    }
    
    .hero-image-badge {
        right: 20px;
        bottom: -10px;
    }
}

@media (max-width: 768px) {
    .installation-hero {
        padding: 80px 0 60px;
    }
    
    .hero-text h1 {
        font-size: 2.2rem;
    }
    
    .hero-text h2 {
        font-size: 1.3rem;
    }
    
    .hero-text p {
        font-size: 1.1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-btn {
        padding: 16px 30px;
        font-size: 1rem;
    }
    
    .hero-image-badge {
        position: relative;
        right: 0;
        bottom: 0;
        margin-top: 20px;
        justify-content: center;
    }
}

/* Keep installation hero content fully visible on mobile */
.installation-hero.hero-section {
    height: auto;
    min-height: 0;
    display: block;
    text-align: left;
}

@media (max-width: 768px) {
    .installation-hero.hero-section {
        padding: 110px 0 56px;
    }

    .installation-hero .hero-content {
        gap: 28px;
        padding: 0 16px;
    }

    .installation-hero .hero-text p {
        max-width: 100%;
        margin-bottom: 24px;
    }

    .installation-hero .hero-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Interactive Step Styles */
.animated-step {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
    margin-bottom: 60px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background: white;
    border: 1px solid #e8f5e8;
}

.animated-step.visible {
    opacity: 1;
    transform: translateY(0);
}

.animated-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: #4CAF50;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 25px 25px 0;
}

.step-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5em;
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.animated-step h3 {
    color: #2c5530;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
}

.help-content {
    padding: 0 25px 25px;
}

.help-content p {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.help-content ul {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.help-content li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: #555;
    font-size: 1rem;
}

.help-content li i {
    color: #4CAF50;
    font-size: 1.1em;
}

.help-content li strong {
    color: #2c5530;
    font-weight: 600;
}

.step-progress {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 12px;
    margin-top: 20px;
}

.step-progress .progress-bar {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.step-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #45a049);
    border-radius: 4px;
    transition: width 0.6s ease;
}

.step-progress span {
    font-size: 0.9rem;
    color: #666;
    font-weight: 600;
}

.image-container {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.step-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(44, 85, 48, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-overlay-btn {
    border: 0;
    padding: 0;
    background: none;
    width: 100%;
    height: 100%;
    font: inherit;
    cursor: pointer;
}

.image-overlay i {
    font-size: 2rem;
    margin-bottom: 10px;
}

.image-overlay span {
    font-size: 1.1rem;
    font-weight: 600;
}

.image-container:hover .image-overlay {
    opacity: 1;
}

.image-container:focus-within .image-overlay {
    opacity: 1;
}

.image-container:hover .step-image {
    transform: scale(1.05);
}

/* Left Vertical Timeline Layout */
.help-layout {
    display: grid;
    grid-template-columns: 88px 1fr;
    column-gap: 24px;
    row-gap: 60px;
    position: relative;
}

.help-layout::before {
    content: "";
    position: absolute;
    left: 44px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #e8f5e8;
}

.timeline-col {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative; /* anchor for absolute-positioned step */
}

.timeline-step {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    position: absolute; /* place relative to the timeline-col */
    top: 50%; /* vertically halfway down parent */
    left: 50%; /* horizontally centered in the timeline column */
    transform: translate(-50%, -50%);
    z-index: 2; /* ensure above the vertical line */
}

.timeline-step .step-number {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2em;
    color: #666;
    background: #fff;
    border: 3px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.25s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    will-change: transform;
    position: relative;
}

.timeline-step .step-number::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    background: rgba(44, 85, 48, 0.3);
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    z-index: -1;
}

.timeline-step:focus .step-number {
    outline: 3px solid #a7dca7;
    outline-offset: 2px;
}

.timeline-step.completed .step-number {
    background: #4CAF50;
    border-color: #4CAF50;
    color: #fff;
    box-shadow: 0 6px 18px rgba(76, 175, 80, 0.3);
}

.timeline-step.active .step-number,
.timeline-step:hover .step-number {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    border-color: #4CAF50;
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.35);
}

.timeline-step.active .step-number::before {
    opacity: 1;
    transform: scale(1);
    animation: pulse 2s infinite;
}

/* Modern Help Item Cards */
.help-item {
    display: grid;
    grid-template-columns: 1.25fr 50%;
    gap: 40px;
    align-items: stretch;
    background: #ffffff;
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 320px;
}

.help-item.inactive {
    /* filter: blur(0.6px) brightness(0.9); */
    /* opacity: 0.85; */
    /* transition: filter 0.25s ease, opacity 0.25s ease; */
}

.help-item.active {
    filter: none;
    opacity: 1;
}

.help-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.help-item.reverse {
    grid-template-columns: 50% 1.25fr;
}

.help-item.reverse .help-content {
    order: 2;
}

.help-item.reverse .help-image {
    order: 1;
}

.help-content {
    /* padding: 40px; */
    z-index: 2;
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 0 20px 20px 0;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.help-item.reverse .help-content {
    border-radius: 20px 0 0 20px;
}

/* Pet page help text spacing */
.help-text {
    padding: 40px;
    z-index: 2;
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    border-radius: 0 20px 20px 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.help-item.reverse .help-text {
    border-radius: 20px 0 0 20px;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.step-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3);
    flex-shrink: 0;
}

.help-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2c5530;
    margin: 0;
    line-height: 1.3;
}

.help-content > p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 28px;
    font-weight: 400;
}

.step-details {
    background: #f8fff8;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border-left: 4px solid #4CAF50;
}

.step-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-details li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
}

.step-details li:last-child {
    margin-bottom: 0;
}

.step-details li i {
    color: #4CAF50;
    font-size: 1.1rem;
    margin-top: 4px;
    flex-shrink: 0;
}

.step-details li strong {
    color: #2c5530;
    font-weight: 600;
}

/* Hide the old progress bars */
.step-progress {
    display: none;
}

/* Modern Image Styling */
.help-image {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.image-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    transition: transform 0.3s ease;
}

.image-container:hover {
    transform: scale(1.03);
}

.step-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    filter: brightness(0.9) contrast(1.1);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(44, 85, 48, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(3px);
}

.image-overlay i {
    font-size: 2rem;
    margin-bottom: 8px;
}

.image-overlay span {
    font-size: 1rem;
    font-weight: 500;
}

.image-container:hover .image-overlay {
    opacity: 1;
}

/* Responsive timeline sizing */
@media (max-width: 992px) {
    .help-layout {
        grid-template-columns: 72px 1fr;
        row-gap: 32px;
    }
    .timeline-step .step-number {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        font-size: 1.05rem;
        border-width: 3px;
    }
    .help-layout::before {
        left: 36px;
        width: 2px;
    }
}

@media (max-width: 600px) {
    .help-layout {
        grid-template-columns: 56px 1fr;
        row-gap: 24px;
    }
    .timeline-step .step-number {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 0.95rem;
        border-width: 3px;
    }
    .help-layout::before {
        left: 28px;
    }
}

/* Screen-reader only text utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline: 3px solid #2a7fff;
    outline-offset: 2px;
}

/* Animation for step reveal */
@keyframes stepReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.3;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Responsive adjustments for steps */
@media (max-width: 768px) {
    .step-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .step-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2em;
    }
    
    .animated-step h3 {
        font-size: 1.5rem;
    }
    
    .help-content {
        padding: 20px;
    }
    
    .step-progress {
        padding: 12px;
    }
    
    .image-container {
        border-radius: 0;
    }
}

/* Responsive Design for Modern Help Items */
@media (max-width: 1024px) {
    .help-item,
    .help-item.reverse {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
        min-height: auto;
    }
    
    .help-item .help-image {
        order: 1;
    }
    .help-item .help-text,
    .help-item .help-content {
        order: 2;
    }
    .help-item.reverse .help-image {
        order: 1;
    }
    .help-item.reverse .help-text,
    .help-item.reverse .help-content {
        order: 2;
    }
    
    .help-content {
        padding: 30px;
        border-radius: 0 0 20px 20px;
    }
    
    .help-item.reverse .help-content {
        border-radius: 0 0 20px 20px;
    }

    /* Mirror spacing for pet help text */
    .help-text {
        padding: 30px;
        border-radius: 0 0 20px 20px;
    }
    .help-item.reverse .help-text {
        border-radius: 0 0 20px 20px;
    }
    
    .help-image {
        height: 300px;
        position: relative;
    }
    
    .help-content h3 {
        font-size: 1.6rem;
    }
    
    .step-details {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .help-item,
    .help-item.reverse {
        padding: 0;
        gap: 0;
        border-radius: 16px;
    }
    
    .step-header {
        gap: 16px;
        margin-bottom: 20px;
    }
    
    .step-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
    
    .help-content {
        padding: 24px;
    }

    .help-text {
        padding: 24px;
        max-width: 100%;
    }
    
    .help-content h3 {
        font-size: 1.4rem;
    }
    
    .help-content > p {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    
    .step-details {
        padding: 16px;
        margin-bottom: 20px;
    }
    
    .step-details li {
        font-size: 0.95rem;
        margin-bottom: 12px;
    }
    
    .help-image {
        height: 250px;
    }
    
    .step-image {
        height: 100%;
    }
    
    .help-layout {
        row-gap: 40px;
    }
    
    .help-content,
    .help-text {
        max-width: 100%;
    }
    .help-content p,
    .help-text p {
        overflow-wrap: anywhere;
        word-break: normal;
    }
}

@media (max-width: 480px) {
    .help-item,
    .help-item.reverse {
        padding: 0;
        gap: 0;
    }
    
    .step-icon {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
    
    .help-content {
        padding: 20px;
    }

    .help-text {
        padding: 20px;
    }
    
    .help-content h3 {
        font-size: 1.3rem;
    }
    
    .step-details {
        padding: 14px;
    }
    
    .step-details li {
        font-size: 0.9rem;
        gap: 10px;
    }
    
    .help-image {
        height: 200px;
    }
}

img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}


/* Modern UI Updates for Why Choose Page */

/* Modern Benefits Section */
.modern-benefits {
    padding: 100px 0;
    background: #f8fafc;
}

.modern-benefits .benefits-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 40px;
}

.modern-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    border: none;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    position: relative;
}

.modern-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
}

.card-image-wrapper {
    position: relative;
    height: 240px;
    width: 100%;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    margin: 0;
    border-radius: 0;
    display: block;
}

.modern-card:hover .card-image-wrapper img {
    transform: scale(1.08);
}

.modern-card .placeholder-image {
    margin-top: 0;
    border-radius: 0;
    height: 100%;
}

.card-icon-overlay {
    position: absolute;
    top: 208px;
    right: 30px;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.6rem;
    box-shadow: 0 8px 20px rgba(39, 174, 96, 0.3);
    border: 4px solid #ffffff;
    z-index: 20;
}

.card-content {
    padding: 40px 30px 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.modern-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1e293b;
    line-height: 1.3;
}

.modern-card p {
    font-size: 1rem;
    line-height: 1.65;
    color: #64748b;
    margin-bottom: 0;
}

/* Modern Help Section */
.modern-help {
    padding: 50px 0;
    background: #ffffff;
}

.modern-help .help-item {
    gap: 80px;
    margin-bottom: 100px;
}

.modern-help .help-image img {
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    transition: transform 0.3s ease;
}

.modern-help .help-item:hover .help-image img {
    transform: scale(1.02);
}

.modern-help .help-text h3 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}

.modern-help .help-text h3::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #27ae60;
    margin-top: 10px;
    border-radius: 2px;
}

.modern-help .help-text ul {
    margin-top: 25px;
}

.modern-help .help-text ul li {
    list-style: none;
    margin-bottom: 18px;
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.6;
}

.modern-help .help-text ul li strong {
    color: #1e293b;
    margin-right: 5px;
}

.modern-help .help-text ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #27ae60;
    font-size: 0.8rem;
    margin-right: 15px;
    margin-top: 5px;
    flex-shrink: 0;
    background: rgba(39, 174, 96, 0.1);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .modern-card {
        overflow: hidden;
    }
    .card-icon-overlay {
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        top: 215px;
    }
    .modern-help .help-item {
        gap: 40px;
    }
}


/* Modern Comparison Section */
.modern-comparison {
    padding: 100px 0;
    background: #f8fafc;
}

.modern-comparison .comparison-table {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    overflow: hidden;
    border: none;
}

.modern-comparison .comparison-header {
    background: #1e293b;
    color: #ffffff;
    padding: 25px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: none;
}

.modern-comparison .comparison-row {
    border-bottom: 1px solid #f1f5f9;
    padding: 25px;
    transition: background-color 0.2s ease;
}

.modern-comparison .comparison-row:last-child {
    border-bottom: none;
}

.modern-comparison .comparison-row:hover {
    background-color: #f8fafc;
}

.modern-comparison .feature {
    font-weight: 700;
    color: #334155;
    font-size: 1.1rem;
    background: transparent;
}

.modern-comparison .pet-turf {
    color: #176338;
    font-weight: 600;
}

.modern-comparison .pet-turf i {
    background: none;
    width: auto;
    height: auto;
    display: inline;
    border-radius: 0;
    margin-right: 8px;
}

.modern-comparison .landscape-turf {
    color: #B21010;
}

.modern-comparison .landscape-turf i {
    background: none;
    width: auto;
    height: auto;
    display: inline;
    border-radius: 0;
    margin-right: 8px;
}


/* Modern Hero Section */
.modern-hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    position: relative;
    background-attachment: fixed;
}

.modern-hero::before {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.4));
    backdrop-filter: blur(0px); /* Clean look */
}

.modern-hero .hero-content {
    max-width: 900px;
    padding: 0 40px;
}

.modern-hero .hero-text h1 {
    font-size: 4rem;
    letter-spacing: -1px;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.modern-hero .hero-text h2 {
    font-size: 1.8rem;
    font-weight: 300;
    color: #e2e8f0;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
}

.modern-hero .hero-text p {
    font-size: 1.25rem;
    color: #cbd5e1;
    max-width: 700px;
    margin: 0 auto 40px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
}

.modern-hero .buttons {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}

/* Modern CTA Section */
.modern-cta {
    background: white; /* Clean background instead of gradient */
    padding: 100px 0;
}

.modern-cta .cta-card {
    background: linear-gradient(120deg, #1e293b, #0f172a);
    border-radius: 30px;
    padding: 80px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px -12px rgba(15, 23, 42, 0.25);
}

.modern-cta .cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

.modern-cta .cta-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.modern-cta h2 {
    color: white;
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.modern-cta p {
    color: #94a3b8;
    font-size: 1.3rem;
    margin-bottom: 40px;
}

.modern-cta .buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Ensure product card buttons are visible on tablets and mobile devices (including iPad Pro landscape) */
@media (max-width: 1366px), (hover: none), (pointer: coarse) {
    .product-card .card-content .buttons {
        opacity: 1 !important;
        transform: translateY(0) !important;
        display: flex !important;
        margin-bottom: -10px; /* Add some spacing */
    }
    
    .product-card .card-content {
        padding-bottom: 30px !important;
        bottom: 0 !important; /* Reset position to ensure full visibility */
    }
}

.modern-cta .btn-secondary {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.2);
    color: white;
}

.modern-cta .btn-secondary:hover {
    background: white;
    color: #0f172a;
    border-color: white;
}

@media (max-width: 768px) {
    .modern-hero .hero-text h1 {
        font-size: 2.8rem;
    }
    .modern-cta .cta-card {
        padding: 50px 20px;
        border-radius: 20px;
    }
    .modern-cta h2 {
        font-size: 2rem;
    }
}


/* Modern Hero Section */
.modern-hero {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('photos/lawn.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */
    height: 80vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding-top: 80px;
}

.modern-hero .hero-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 900px;
    padding: 0 20px;
    flex-direction: column;
}

.modern-hero .hero-image {
    display: none; /* Hide image in hero as it's now background */
}

.modern-hero .hero-text {
    width: 100%;
    animation: fadeInUp 1s ease-out;
}

.modern-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.modern-hero h2 {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 30px;
    opacity: 0.95;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.modern-hero p {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

.modern-hero .buttons .btn {
    padding: 15px 40px;
    font-size: 1.1rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.modern-hero .btn-secondary {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 2px solid white;
    color: white;
}

.modern-hero .btn-secondary:hover {
    background: white;
    color: #1e293b;
}

/* Modern Section Headers */
.modern-header {
    text-align: center;
    margin-bottom: 60px;
    padding: 0 20px;
}

.modern-header h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.modern-header h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 5px;
    background: #27ae60;
    margin: 15px auto 0;
    border-radius: 3px;
}

.modern-header p {
    font-size: 1.2rem;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Modern CTA Section */
.modern-cta {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.modern-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(39, 174, 96, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.modern-cta .cta-content h2 {
    font-size: 3.2rem;
    margin-bottom: 25px;
    background: linear-gradient(to right, #ffffff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modern-cta .cta-content p {
    font-size: 1.2rem;
    color: #cbd5e1;
    margin-bottom: 40px;
}

.modern-cta .cta-image img {
    border-radius: 30px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
    transform: perspective(1000px) rotateY(-5deg);
    transition: transform 0.5s ease;
}

.modern-cta:hover .cta-image img {
    transform: perspective(1000px) rotateY(0deg) scale(1.02);
}

@media (max-width: 768px) {
    .modern-hero h1 { font-size: 2.5rem; }
    .modern-header h2 { font-size: 2.2rem; }
    .modern-cta .cta-content h2 { font-size: 2.4rem; }
    .modern-cta .container { grid-template-columns: 1fr; gap: 40px; }
    .modern-cta .cta-image img { transform: none; }
}



/* --- Price Idea Banner Styles --- */
.price-idea-banner {
    margin: 40px 0;
    width: 100%;
}

.price-idea-content {
    display: flex;
    border-radius: 15px;
    overflow: hidden;
    height: 300px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Softer, deeper shadow */
}

.price-idea-left {
    background: linear-gradient(135deg, #2c5530 0%, #1e3b23 100%); /* Dark Green Gradient */
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

/* The modern slant divider */
.price-idea-left::after {
    content: '';
    position: absolute;
    top: 0;
    right: -80px; /* Adjust to overlap correctly */
    width: 160px;
    height: 100%;
    background: #1e3b23; /* Match the end of the gradient */
    background: linear-gradient(135deg, #2c5530 0%, #1e3b23 100%); /* Or match gradient */
    transform: skewX(-20deg); /* Diagonal slant */
    z-index: 2;
    border-right: 2px solid rgba(255,255,255,0.1); /* Subtle edge highlight */
}

.price-idea-left h2 {
    color: white;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Softer shadow */
    z-index: 3;
    text-align: left;
    margin: 0;
    padding-left: 20px;
    font-family: 'Montserrat', sans-serif; /* Ensure brand font */
}

.price-idea-right {
    flex-grow: 1;
    background-image: url('photos/landscape-turf/artificial-turf-backyard-brentwood.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Align content to the right */
    position: relative;
    z-index: 1;
    padding-right: 80px; /* Space from right edge */
    width: 55%;
}

/* Dark overlay on the image to make text pop if needed, or just style */
.price-idea-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 50%);
    z-index: 1;
}

.price-idea-cta {
    text-align: center;
    z-index: 3;
    background: transparent;
}

/* New Animation for Button */
@keyframes pulse-strong {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(255, 158, 11, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 10px 25px rgba(255, 158, 11, 0.6);
    }
}

.btn-calculate {
    display: inline-block;
    background-color: #ff9e0b; /* Bright Orange */
    color: #ffffff; /* White text */
    font-size: 2.2rem;
    font-weight: 800;
    padding: 12px 50px;
    border-radius: 50px; /* Pill shape */
    border: 2px solid #ffffff; /* White border for contrast */
    text-decoration: none;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: pulse-strong 2s infinite ease-in-out; /* 1s in, 1s out = 2s cycle */
    text-shadow: #000000 2px 1px 10px;
}

.btn-calculate:hover {
    animation-play-state: paused; /* Pause animation on hover */
    background-color: #ff6600; /* Darker orange on hover */
    transform: scale(1.1); /* Keep it zoomed or adjust as needed */
    cursor: pointer;
}

.price-idea-cta p {
    color: white;
    font-size: 1.1rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    margin-top: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

@media (max-width: 992px) {
    .price-idea-left h2 {
        font-size: 2.5rem;
    }
    .btn-calculate {
        font-size: 1.8rem;
        padding: 10px 30px;
    }
}

@media (max-width: 768px) {
    .price-idea-content {
        flex-direction: column;
        height: auto;
        border-radius: 15px;
    }
    .price-idea-left {
        width: 100%;
        padding: 30px 20px;
        text-align: center;
        background: #2c5530; /* Solid color for mobile simplicity */
    }
    .price-idea-left::after {
        display: none;
    }
    .price-idea-left h2 {
        text-align: center;
        padding-left: 0;
        font-size: 2rem;
        margin-bottom: 0;
    }
    .price-idea-right {
        width: 100%;
        height: 220px;
        justify-content: center;
        padding-right: 0;
        padding: 20px;
        align-items: center;
    }
    .price-idea-right::before {
        background: rgba(0,0,0,0.4); /* Uniform overlay on mobile */
    }
    
    .btn-calculate {
        font-size: 1rem;
        padding: 12px 35px;
        width: auto;
        white-space: nowrap;
    }
    
    .price-idea-cta p {
        font-size: 0.95rem;
        margin-top: 8px;
    }
}


.price-idea-right.installation-bg {
    background-image: url('photos/landscape-turf/premium-lawn-turf-installation.webp');
}


/* FAQ Section Styles */
.faq-section {
    padding: 80px 0;
    background-color: #f9fbfd;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 40px;
}

.faq-item {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.faq-item h3 {
    font-size: 1.25rem;
    color: #2c5530;
    margin-bottom: 15px;
    font-weight: 700;
}

.faq-item p {
    color: #555;
    line-height: 1.6;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Cleaning Quote Banner Variant */
.cleaning-quote-banner .price-idea-left {
    background: linear-gradient(135deg, #ff9e0b 0%, #ff6600 100%); /* Orange Gradient */
}

.cleaning-quote-banner .price-idea-left::after {
    background: linear-gradient(135deg, #ff9e0b 0%, #ff6600 100%); /* Match Orange Gradient */
}

.cleaning-quote-banner .price-idea-right {
    background-image: url('photos/cleaning/artificial-turf-deep-cleaning.webp');
}

@media (max-width: 768px) {
    .cleaning-quote-banner .price-idea-left {
        background: #ff9e0b;
    }
}

/* Repair Quote Banner Variant */
.repair-quote-banner .price-idea-left {
    background: linear-gradient(135deg, #ff9e0b 0%, #ff6600 100%); /* Orange Gradient */
}

.repair-quote-banner .price-idea-left::after {
    background: linear-gradient(135deg, #ff9e0b 0%, #ff6600 100%); /* Match Orange Gradient */
}

.repair-quote-banner .price-idea-right {
    background-image: url('photos/repair-turf/artificial-turf-repair.webp');
}

@media (max-width: 768px) {
    .repair-quote-banner .price-idea-left {
        background: #ff9e0b;
    }
}


/* --- FAQ Accordion Styles (Overrides generic FAQ) --- */
.faq-grid.faq-accordion {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    gap: 20px;
    align-items: start;
}

.faq-accordion .faq-item {
    padding: 0;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    padding: 20px 25px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    color: #171a20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    font-family: inherit;
}

.faq-question:hover {
    background-color: #f8f9fa;
    color: #2c5530;
}

.faq-question.active {
    background-color: #f0f7f0;
    color: #2c5530;
}

.faq-question i {
    transition: transform 0.3s ease;
    font-size: 0.9em;
    color: #888;
}

.faq-question.active i {
    transform: rotate(180deg);
    color: #2c5530;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #fff;
}

.faq-answer.active {
    border-top: 1px solid #f0f0f0;
}

.faq-answer p {
    padding: 20px 25px;
    margin: 0;
    color: #555;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .faq-grid.faq-accordion {
        grid-template-columns: 1fr;
    }

    .faq-question {
        padding: 15px 20px;
        font-size: 1rem;
    }
    
    .faq-answer p {
        padding: 15px 20px;
    }
}

/* Cookie Consent Banner */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 15px 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: slideUp 0.5s ease-out;
}

.cookie-content {
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.cookie-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    flex: 1;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.cookie-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cookie-btn.accept {
    background-color: #146c2e;
    color: white;
}

.cookie-btn.accept:hover {
    background-color: #0f5724;
}

.cookie-btn.decline {
    background-color: transparent;
    border: 1px solid #fff;
    color: white;
}

.cookie-btn.decline:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cookie-buttons {
        width: 100%;
        justify-content: center;
    }
}

/* Intro Text Section */
.intro-text-section {
    padding: 60px 20px;
    background-color: #f8f9fa; /* Light background to make the card pop */
}

.intro-card {
    max-width: 1650px;
    margin: 0 auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 12px; /* Rounded corners */
    border-left: 6px solid #2e7d32; /* Green vertical accent line */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Soft shadow */
    text-align: center;
}

.intro-card p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 20px;
}

.intro-card p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .intro-card {
        padding: 30px 20px;
    }
    
    .intro-card p {
        font-size: 1.05rem;
    }
}
.warranty-footnote {
    font-size: 0.8rem;
    color: #666;
    margin-top: 20px;
}

.footnote-marker {
    font-size: 0.7em;
    vertical-align: super;
    line-height: 0;
}

/* City SEO Section */
.city-seo-section {
    padding: 72px 0 84px;
    /* background: linear-gradient(180deg, #f8fcf6 0%, #ffffff 100%); */
}

.city-seo-section .section-header {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

/* .city-seo-section .section-header::before {
    content: "City-Specific Planning";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid #dbead5;
    background: linear-gradient(180deg, #f1f9ed 0%, #e7f4e1 100%);
    box-shadow: 0 8px 22px rgba(58, 118, 62, 0.08);
    color: #2d6a35;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
} */

.city-seo-section .section-header h2 {
    margin-bottom: 12px;
    color: #143d1f;
}

.city-seo-section .section-header p {
    max-width: 680px;
    margin: 0 auto;
    color: #4a6351;
    line-height: 1.7;
}

.city-seo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 28px;
    margin-top: 34px;
    align-items: stretch;
}

.city-seo-card {
    background: linear-gradient(180deg, #ffffff 0%, #fcfefb 100%);
    border-radius: 24px;
    border: 1px solid #e4efe0;
    box-shadow: 0 14px 40px rgba(28, 62, 35, 0.07);
}

.city-seo-summary {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    overflow: hidden;
    min-height: 340px;
}

.city-seo-media {
    height: 100%;
    background: #e5f2df;
}

.city-seo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.city-seo-content {
    padding: 30px 32px;
    text-align: left;
}

.city-seo-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.45rem;
    line-height: 1.3;
    color: #1a5129;
    margin-bottom: 18px;
}

.city-seo-title-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    border: 1px solid #deebd9;
    background: linear-gradient(180deg, #f5fbf2 0%, #ebf6e6 100%);
    color: #1f6b39;
    box-shadow: 0 10px 24px rgba(61, 124, 66, 0.09);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.city-seo-content p {
    text-align: left;
    line-height: 1.8;
    color: #334a3a;
    margin: 0;
    font-size: 0.985rem;
}

.city-seo-content p + p {
    margin-top: 12px;
}

.city-seo-factors {
    padding: 30px 32px;
}

.city-seo-factor-list {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
}

.city-seo-factor-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 0;
    border-top: 1px solid #edf4ea;
}

.city-seo-factor-item:first-child {
    border-top: 0;
    padding-top: 4px;
}

.city-seo-factor-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    border: 1px solid #e0ecdb;
    background: linear-gradient(180deg, #f5fbf2 0%, #ebf6e6 100%);
    color: #1f6b39;
    box-shadow: 0 8px 20px rgba(61, 124, 66, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.city-seo-factor-text {
    text-align: left;
    line-height: 1.72;
    color: #334a3a;
    font-size: 0.985rem;
}

.city-seo-support {
    margin-top: 28px;
    padding: 28px 30px;
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.45fr);
    gap: 24px;
    align-items: center;
    background: linear-gradient(180deg, #ffffff 0%, #f9fcf7 100%);
}

/* .city-seo-support-header::before {
    content: "Quick Service Links";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #ecf7e8;
    border: 1px solid #dcebd6;
    color: #2d6a35;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
} */

.city-seo-support-header p {
    margin: 8px 0 0;
    color: #567060;
    line-height: 1.72;
    max-width: 34ch;
}

.city-seo-button-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 16px;
}

.city-seo-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 112px;
    padding: 18px 14px;
    border-radius: 20px;
    border: 1px solid #e0ecdb;
    background: linear-gradient(180deg, #ffffff 0%, #f5fbf2 100%);
    box-shadow: 0 8px 22px rgba(45, 106, 53, 0.06);
    color: #1d5b30;
    font-weight: 700;
    text-align: center;
    line-height: 1.35;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
}

.city-seo-btn i {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    border: 1px solid #dcead6;
    background: linear-gradient(180deg, #f4fbf1 0%, #e8f5e3 100%);
    box-shadow: 0 8px 20px rgba(61, 124, 66, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.city-seo-btn span {
    display: block;
    font-size: 0.98rem;
}

.city-seo-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(45, 106, 53, 0.12);
    border-color: #cfe2c8;
    background: linear-gradient(180deg, #ffffff 0%, #edf8e8 100%);
}

@media (max-width: 992px) {
    .city-seo-section {
        padding: 60px 0 72px;
    }

    .city-seo-grid {
        grid-template-columns: 1fr;
    }

    .city-seo-summary {
        grid-template-columns: 1fr;
    }

    .city-seo-media {
        height: 240px;
    }

    .city-seo-support {
        grid-template-columns: 1fr;
    }

    .city-seo-support-header p {
        max-width: none;
    }

    .city-seo-button-grid {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 640px) {
    .city-seo-section .section-header::before,
    .city-seo-support-header::before {
        letter-spacing: 0.04em;
    }

    .city-seo-content,
    .city-seo-factors,
    .city-seo-support {
        padding: 24px 22px;
    }

    .city-seo-title {
        font-size: 1.28rem;
    }

    .city-seo-button-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
        gap: 14px;
    }

    .city-seo-btn {
        min-height: 98px;
        padding: 16px 12px;
    }
}