*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
        :root {
            --primary-green: #4CAF50;
            --dark-green: #2E7D32;
            --light-grey: #f4f4f4;
            --text-color: #333;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            color: var(--text-color);
            background-color: white;
        }
        /* Navigation */
        header {
            background-color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .top-bar {
            background-color: var(--dark-green);
            color: white;
            text-align: center;
            padding: 10px 50px;
            font-size: 0.9em;
        }
        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1100px;
            margin: 0 auto;
            padding: 15px 20px;
        }
        .logo {
            font-size: 2em;
            font-weight: bold;
            color: var(--dark-green);
            text-transform: uppercase;
            letter-spacing: -1px;
        }
        .logo span { color: var(--primary-green); }
        
        nav ul {
            list-style: none;
            display: flex;
            gap: 20px;
            padding: 0;
        }
        a{
            cursor: pointer;
        }
        nav a, .mobileNavi a {
            display: inline-block;
            text-decoration: none;
            color: #555;
            font-weight: 600;
            cursor: pointer;
            transition: color 0.3s;
        }
        nav a:hover, nav a.active, .mobileNavi a.active, .mobileNavi a:hover {
            color: var(--primary-green);
            text-decoration: underline;
            text-underline-offset: 4px;
            text-decoration-thickness: 2px;
        }
        .cta-button {
            background-color: var(--primary-green);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            cursor: pointer;
            width: 125px;
            text-align: center;
        }
        .cta-button:hover { background-color: var(--dark-green); }

        /* Content Sections */
        .page-section {
            display: none; /* Hidden by default */
            padding: 40px 20px;
            max-width: 1100px;
            margin: 0 auto;
            animation: fadeIn 0.5s;
        }
        .page-section.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .hero {
            position: relative;
            max-width: 100%;
            text-align: center;
            padding: 80px 20px;
            border-bottom: 5px solid var(--primary-green);
            background-image: url("mowing.avif");
            background-repeat: no-repeat;
            background-size: auto;
            background-position: center;
            background-color: rgba(255, 255, 255, 0.5); /* 50% white overlay */
            background-blend-mode: lighten;
        }
        .hero:before{
           
        }

        .hero h1 { font-size: 3em; color: var(--dark-green); margin-bottom: 10px; }
        .hero p { font-size: 1.2em; color: #666; max-width: 600px; margin: 0 auto 30px; }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        .service-card {
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 8px;
            border-top: 4px solid var(--primary-green);
            text-align: center;
        }
        .service-card h3 { color: var(--dark-green); }

        /* Form Styles */
        .form-container {
            max-width: 600px;
            margin: 0 auto;
            background: #f9f9f9;
            padding: 30px;
            border-radius: 8px;
            border: 1px solid #ddd;
        }
        .form-group{ 
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
           
         }
         .form-group label,
         .form-group h3{
             margin-bottom: 8px;
             font-weight: bold;
         }
         .form-group > div{
             display: flex;
             flex-direction: column;
             gap: 6px;
             padding-left: 20px;
         }
         .form-label{
             display: grid;
             grid-template-columns: 1fr 20px;
             align-items: center;
             gap: 6px;
             cursor: pointer;

         }
         .form-label input[type="radio"],
         .form-label input[type="checkbox"] {
              width: 16px;
              height: 16px;
              margin: 0;
              justify-self: end;
              }
         input[type="text"],
         input[type="email"],
         input[type="tel"],
         textarea{
             width: 100%;
             padding: 8px;
             box-sizing: border-box;
             }
        /*.form-group label { display: flex; margin-bottom: 5px; font-weight: bold; }
        .form-group input, .form-group select, .form-group textarea {
            width: 50%;
            padding: 1px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            align-items: left;
        }*/
        .submit-btn {
            width: 100%;
            padding: 15px;
            background-color: var(--dark-green);
            color: white;
            border: none;
            font-size: 1.1em;
            cursor: pointer;
        }
        
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 50px;
        }
        #logo {
            width: 150px;
        }
        .mobile-button{
            display: none;
            position: fixed;
            top: 8px;
            left: 10px;
            background: none;
            border: none;
            color: white;
            font-size: 2rem;
            cursor: pointer;
            z-index: 2000;
        }
        #mobileMenu{
            position: fixed;
            top: 0;
            left: -260px;

            width: 260px;
            height: 100vh;

            background: #1f3b2d;

            padding: 30px 20px;
            z-index: 1000;

            transition: left 0.3s ease;
            display: flex;
            flex-direction: column;
        }
        #mobileMenu.active{

            left: 0;

        }
        .closebutton{

            background: none;
            border: none;

            color: white;

            font-size: 2rem;

            cursor: pointer;

            align-self: flex-end;

            margin-bottom: 30px;
        }
        .mobileNavi {
            display: flex;
            flex-direction: column;
            gap: 20px;

        }

        .mobileNavi a{

            color: white;
            text-decoration: none;
            font-size: 1.2rem;


        }
        .mobileNavi a:hover{
            color: red;
        }

        .overlay{
            
            position: fixed;
            inset: 0;

            background: rgba(0,0,0,0.5);
            opacity: 0;
            visibility: hidden;
            transition:0.3s ease;
            z-index: 999;
        }
        .overlay.active{
            opacity: 1;
            visibility: visible;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            header nav{
                display: none;
            }
            .cta-button{
                display: none;
            }
            .mobile-button{
                display: block;
            
            }
            .nav-container { flex-direction: column; }
            nav ul { flex-direction: column; text-align: center; gap: 10px; margin-top: 15px;}
            .hero h1 { font-size: 2em; }
        }
    .phone {
        color: yellow;
        font-weight: bold;
    }
    .phone:hover {
        color: white;
        font-style: italic;
    }
    @media screen and (min-width: 768px) {
  #phone {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: white;
  }
}
    .phone:visited{
        color: purple;
    }