/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

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

/* Typography */
h1, h2, h3, h4 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background: #4CAF50;
    color: white;
}

.btn-primary:hover {
    background: #45a049;
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: #4CAF50;
    border: 2px solid #4CAF50;
}

.btn-secondary:hover {
    background: #4CAF50;
    color: white;
    transform: translateY(-2px);
}

.btn-white {
    background: rgba(255, 255, 255, 0.9);
    color: #4CAF50;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.btn-white:hover {
    background: white;
    color: #4CAF50;
    border: 2px solid white;
    transform: translateY(-2px);
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.nav {
    padding: 0.5rem 0;
}

.nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand h1 {
    color: #4CAF50;
    font-size: 1.5rem;
    margin-bottom: 0;
}

.nav-brand .tagline {
    font-size: 0.875rem;
    color: #666;
    font-weight: 400;
}

.nav-logo {
    height: 85px;
    width: auto;
    transition: transform 0.3s ease;
}

.nav-logo:hover {
    transform: scale(1.05);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: #4CAF50;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background: #333;
    transition: 0.3s;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), url('hero-grass.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
    text-align: center;
    position: relative;
    padding-top: 60px;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-logo {
    max-width: 800px;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    animation: fadeInUp 1s ease;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.hero h1 {
    /* font-size: 3.5rem; */
    /* margin-bottom: 0.5rem; */
    /* animation: fadeInUp 1s ease; */
}

.hero-tagline {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    opacity: 0.9;
    animation: fadeInUp 1s ease 0.2s both;
}

.hero-description {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    opacity: 0.95;
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease 0.6s both;
}

/* New styles for updated hero section */
.hero-main-title {
    font-size: 4.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.75rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 1s ease;
}

.hero-subtitle {
    font-size: 2rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 1rem;
    opacity: 0.9;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    animation: fadeInUp 1s ease 0.2s both;
}

.hero-text {
    font-size: 1.25rem;
    font-weight: 400;
    color: #f0f0f0;
    margin-bottom: 2rem;
    line-height: 1.7;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.95;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease 0.4s both;
}

/* Why Choose Us Section */
.why-choose-us {
    padding: 5rem 0;
    background: #f8f9fa;
}

.why-choose-us h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: #2c3e50;
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.reason-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.reason-card:hover {
    transform: translateY(-5px);
}

.reason-icon {
    width: 80px;
    height: 80px;
    background: #4CAF50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

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

/* Services Section */
.services {
    padding: 5rem 0;
}

.services h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: #2c3e50;
}

.service-section {
    margin-bottom: 4rem;
}

.service-section h3 {
    color: #4CAF50;
    margin-bottom: 1rem;
}

.service-description {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    color: #555;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.step-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #4CAF50;
    transition: transform 0.3s ease;
}

.step-card:hover {
    transform: translateY(-3px);
}

.step-number {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #4CAF50;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    margin-bottom: 1rem;
}

.additional-services {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 12px;
    margin-top: 3rem;
}

.additional-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.additional-service {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}

.additional-service h4 {
    color: #4CAF50;
    margin-bottom: 1rem;
}

/* Service Section Images */
.aeration-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.aeration-image {
    text-align: center;
}

.aeration-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.aeration-image img:hover {
    transform: translateY(-5px);
}

.weed-control-image {
    text-align: center;
    margin-top: 2rem;
}

.weed-control-image img {
    width: 100%;
    max-width: 600px;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.weed-control-image img:hover {
    transform: translateY(-5px);
}

.image-caption {
    margin-top: 1rem;
    font-style: italic;
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Gallery Section */
.gallery {
    padding: 5rem 0;
    background: #f8f9fa;
}

.gallery h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: #2c3e50;
}

.gallery-carousel {
    max-width: 800px;
    margin: 0 auto;
}

.carousel-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.carousel-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    display: none;
}

.slide.active {
    display: block;
}

.slide img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.25rem;
    color: #4CAF50;
    transition: all 0.3s ease;
}

.carousel-btn:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn.prev {
    left: 20px;
}

.carousel-btn.next {
    right: 20px;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: background 0.3s ease;
}

.dot.active {
    background: #4CAF50;
}

/* Newsletter Section */
.newsletter {
    padding: 4rem 0;
    background: #fff;
    color: #333;
    text-align: center;
}

.newsletter h2 {
    margin-bottom: 1rem;
}

.newsletter p {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.newsletter-placeholder {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 8px;
    margin: 0 auto;
    max-width: 500px;
}

.embed-note {
    font-size: 0.875rem;
    opacity: 0.7;
    font-style: italic;
}

/* Style for the div that directly wraps the Beehiiv iframe */
#beehiiv-embed {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Beehiiv Newsletter Form Responsive Styles */
.newsletter-container {
    max-width: 450px; /* Adjusted for better centering of fixed-width Beehiiv content on desktop */
    margin: 20px auto; /* Center the container and add some vertical spacing */
    padding: 0; /* Add some horizontal padding for smaller screens */
}

#beehiiv-embed iframe.beehiiv-embed,
.newsletter-container iframe.beehiiv-embed {
    width: 100% !important;
    max-width: 100%;
    /* Beehiiv's script should set the height. If not, you might need a fixed height or aspect-ratio. */
    /* For now, let's set a min-height and allow Beehiiv's script to adjust. */
    min-height: 250px; /* Adjust if the form content is taller/shorter */
    height: auto; /* Fallback if Beehiiv script doesn't manage it well */
    border: none !important; /* Remove any border */
    border-radius: 8px !important; /* Use a slight border-radius to match modern UIs, or 0 if you prefer sharp edges */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; Optional: add a subtle shadow for better integration */
    margin: 0 !important; /* Remove any default margins from the iframe itself */
    display: block; /* Ensures proper block-level behavior */
}

/* If the Beehiiv script sets an explicit height on the iframe that you can't override,
   you might need to adjust the container's height or use JavaScript.
   However, the above should handle most cases, especially the border-radius. */

/* Contact Section */
.contact {
    padding: 5rem 0;
}

.contact h2 {
    text-align: center;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.contact-intro {
    text-align: center;
    font-size: 1.125rem;
    color: #555;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1000px;
    margin: 0 auto;
}

.contact-info h3 {
    color: #4CAF50;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.contact-item i {
    color: #4CAF50;
    font-size: 1.25rem;
    width: 24px;
}

.contact-item a {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 500;
}

.contact-item a:hover {
    color: #4CAF50;
}

.service-areas {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #4CAF50;
}

.service-areas h4 {
    color: #4CAF50;
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

.service-areas p {
    color: #555;
    line-height: 1.6;
}

.contact-form {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 12px;
}

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

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #555;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #4CAF50;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Footer */
.footer {
    background: #2c3e50;
    color: white;
    padding: 3rem 0 1rem;
}

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

.footer-section h3,
.footer-section h4 {
    color: #4CAF50;
    margin-bottom: 1rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-bottom {
    border-top: 1px solid #34495e;
    padding-top: 1rem;
    text-align: center;
    color: #bbb;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }
    
    .hero h1 {
        font-size: 3rem;
    }
    
    .hero-tagline {
        font-size: 1.4rem;
    }
    
    .reasons-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    
    .steps-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    
    .contact-content {
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    /* Navigation */
    .nav-menu {
        display: none;
    }
    
    .nav-toggle {
        display: flex;
    }
    
    .nav .container {
        position: relative;
    }
    
    .nav-brand h1 {
        font-size: 1.25rem;
    }
    
    .nav-brand .tagline {
        font-size: 0.75rem;
    }
    
    .nav-logo {
        height: 75px;
    }
    
    /* Hero Section */
    .hero {
        min-height: 90vh;
        background-attachment: scroll;
        padding-top: 50px;
    }
    
    .hero-logo {
        max-width: 90%;
        margin-bottom: -1rem;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero-tagline {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .hero-description {
        font-size: 1rem;
        margin-top: -2rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .btn {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
    
    /* Sections */
    .why-choose-us,
    .services,
    .gallery,
    .contact {
        padding: 3rem 0;
    }
    
    .newsletter {
        padding: 3rem 0;
    }
    
    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.3rem; }
    h4 { font-size: 1.1rem; }
    
    /* Grids */
    .reasons-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .additional-services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* Contact Section */
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contact-intro {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    
    /* Carousel */
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .carousel-btn.prev {
        left: 10px;
    }
    
    .carousel-btn.next {
        right: 10px;
    }
    
    /* Service Images */
    .aeration-images {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .aeration-image img,
    .weed-control-image img {
        height: 300px;
    }
    
    /* Service Areas */
    .service-areas {
        margin-top: 1.5rem;
        padding: 1rem;
    }
    
    .service-areas p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .nav {
        padding: 0.4rem 0;
    }

    .newsletter-container {
        max-width: 100%;
        padding: 0;
    }

    #beehiiv-embed {
        max-width: 100%;
    }

    .beehiiv-embed {
        /* height removed */
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .hero {
        min-height: 80vh;
        padding-top: 40px;
    }
    
    .hero-logo {
        max-width: 95%;
        margin-bottom: -0.5rem;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero-tagline {
        font-size: 1.1rem;
    }
    
    .hero-description {
        font-size: 0.9rem;
        margin-top: -1rem;
    }
    
    /* Cards */
    .reason-card,
    .step-card,
    .additional-service {
        margin-bottom: 1rem;
        padding: 1.5rem;
    }
    
    .reason-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }
    
    .reason-icon i {
        font-size: 1.5rem;
    }
    
    .step-number {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 0.9rem;
    }
    
    /* Contact Form */
    .contact-form {
        padding: 1.5rem;
    }
    
    .form-group input,
    .form-group textarea {
        padding: 10px;
        font-size: 0.95rem;
    }
    
    /* Service Images */
    .aeration-image img,
    .weed-control-image img {
        height: 250px;
    }
    
    .image-caption {
        font-size: 0.85rem;
    }
    
    /* Carousel */
    .slide img {
        height: 250px;
    }
    
    .newsletter-container {
        padding: 0;
        max-width: 100%;
    }

    #beehiiv-embed {
        max-width: 100%;
    }

    .beehiiv-embed {
        /* height removed */
    }

    .nav {
        padding: 0.3rem 0;
    }

    .nav-logo {
        height: 65px;
    }
}

@media (max-width: 360px) {
    .hero h1 {
        font-size: 1.8rem;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .reason-card,
    .step-card {
        padding: 1rem;
    }
    
    .contact-form {
        padding: 1rem;
    }

    .nav-logo {
        height: 60px;
    }

    .newsletter-container {
        padding: 0;
        max-width: 100%;
    }

    .beehiiv-embed {
        /* height removed */
    }

    .hero-description {
        font-size: 0.9rem;
        margin-bottom: 0.3rem;
    }
}

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

/* Loading states and transitions */
.fade-in {
    animation: fadeInUp 0.6s ease forwards;
}

.slide-in-left {
    animation: slideInLeft 0.6s ease forwards;
}

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

/* Ensure the Beehiiv iframe itself is responsive if its content tries to overflow */
iframe.beehiiv-embed {
    max-width: 100% !important;
    box-sizing: border-box;
}