/* Apply for all screen sizes */  
html, body { overflow-x: hidden; margin: 0; padding: 0; width: 95vw; font-family: Arial, Helvetica, sans-serif; }  
* { box-sizing: border-box; }  
/* Specific styling for smaller screens */  
@media (max-width: 768px) { body { background-color: #fff; padding: 0; } }  
.container { width: 100%;  margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
div { margin-top: 10px; margin-bottom: 10px; }
p { font-weight: 500; }
#navcpu, .topnav { margin-top: 0; margin-bottom: 0; }
#navcpu { background: linear-gradient(to right, #09b011, #088d0f, #005a05, #004904, #042d00, #021e00); padding: 13px; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; width: 100vw; z-index: 1000; }
.nav-links { display: flex; gap: 15px; }
.nav-links a { text-decoration: none; color: rgb(255, 255, 255); font-size: 20px; font-weight: bold; padding: 8px 12px; transition: all 0.3s ease; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); }
.nav-links a:hover { color: #042d00; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); }
.nav-links a.active { color: #005a05; font-weight: bold; border-bottom: 2px solid #005a05; }
.logo img { width: 100px; height: auto; }
.social-icons { display: flex; gap: 3px; }
.social-icons a { text-decoration: none; font-size: 10px; color: black; padding: 8px; }
@media (max-width: 768px) { .topnav { display: flex; } }
@media (min-width: 769px) { .topnav { display: none; } }
.social-icons-mob { display: flex; gap: 3px; }
.social-icons-mob i { text-decoration: none; font-size: 16px; color: rgb(255, 255, 255); padding: 0px; }
.topnav { width: 100vw; margin-top: 0px; overflow: hidden; background: linear-gradient(to right, #09b011, #088d0f, #005a05, #004904, #042d00, #021e00); position: fixed; display: flex; justify-content: space-between; align-items: center; z-index: 900; top: 0%; }  
.topnav #myLinks { transform: translateX(-10%); display: none; }  
.topnav a { color: white; padding: 8px 12px; text-decoration: none; font-weight: bold; font-size: 24px; display: block; transition: all 0.3s ease; }  
.topnav a.icon { font-size: 40px; background: #032600; display: block; position: absolute; right: 0; top: 0; }  
.topnav a:hover { color: #9f9f9f; border-radius: 4px; }  
.active { color: #005a05; font-weight: bold; border-bottom: 2px solid #005a05; }  
@media (max-width: 768px) { .topnav { border: 2px solid #006400; } }  
@media (max-width: 768px) { #navcpu { display: none; z-index: 1000; } #topnav { display: flex; } #menu-checkbox { display: none; } .menu-toggle { display: block; } .hamburger-icon { display: flex; flex-direction: column; justify-content: space-between; width: 25px; height: 20px; } .hamburger-icon span { display: block; background-color: white; height: 3px; width: 100%; margin-left: 20px; } #menu-checkbox:checked ~ .mobile-menu { display: flex; flex-direction: column; } #menu-checkbox:checked ~ .mobile-menu a { margin-top: 10px; } }  
.home-container { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1200px; margin: auto; gap: 2px; z-index: 1; }  
.home-left, .home-right { border-radius: 8px; transition: box-shadow 0.3s ease; flex: 1; min-width: 300px; padding: 2px; background-color: #fff; display: flex; flex-direction: column; gap: 5px; }  
.accordion { width: 100%; max-width: 600px; margin: 0 auto; }  
.accordion-item { border-radius: 8px; margin-bottom: 10px; color: #006400; box-shadow: 6px 8px 16px rgba(0, 0, 0, 0.1); }  
.accordion-item:hover { background: linear-gradient(to right, #09b011, #088d0f, #005a05, #004904, #042d00, #021e00); box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.5); color: #fff; }  
.accordion-btn { background-color: white; color: #006400; font-size: 1.2rem; font-weight: 700; padding: 15px; width: 100%; text-align: left; cursor: pointer; border: none; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.3s ease, transform 0.3s ease; }  
.accordion-btn:hover { color: #fff; background: linear-gradient(to right, #09b011, #088d0f, #005a05, #004904, #042d00, #021e00); }  
.accordion-content { color: #000; background-color: #f9f9f9; padding: 15px; border-top: 1px solid #ddd; margin-top: 5px; border-radius: 5px; max-height: max-content; overflow: hidden; transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out; display: none; }  
@media screen and (min-width: 1024px) { .accordion { display: none; } }  
/* Container for the three divs */  
.homecpusize { display: flex; flex-direction: column; gap: 2px; width: 100%; max-width: 500px; margin: 0 auto; padding: 20px; }  
/* Styling for each of the three divs */  
.homecpusize-item { width: 100%; border-radius: 8px; margin-bottom: 0px; color: #006400; box-shadow: 6px 8px 16px rgba(0, 0, 0, 0.1); }  
/* Hover effect for the items */  
.homecpusize-item:hover { background: linear-gradient(to right, #09b011, #088d0f, #005a05, #004904, #042d00, #021e00); box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.5); color: #fff; }  
/* Button styles */  
.homecpusize-btn { background-color: white; color: #006400; font-size: 1.2rem; font-weight: 700; padding: 20px; width: 100%; text-align: left; cursor: pointer; border: none; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.3s ease, transform 0.3s ease; }  
/* Hover effect for the buttons */  
.homecpusize-btn:hover { color: #fff; background: linear-gradient(to right, #09b011, #088d0f, #005a05, #004904, #042d00, #021e00); }  
/* Media Query to hide on smaller devices */  
@media screen and (max-width: 1023px) { .homecpusize { display: none; } }  
.services-container { width: 100%; margin: 0 auto; padding: 20px; }
.gardening-services h2 { font-size: 2rem; margin-bottom: 2px; }
.gardening-services p { font-size: 1rem; line-height: 1.1; color: #333; margin-bottom: 20px; }
.service-item { display: flex; flex-wrap: wrap; margin-bottom: 4px; align-items: center; }
.service-img img { width: 100%; max-width: 400px; height: auto; border-radius: 8px; margin-right: 2px; }
.service-text { max-width: 650px; }
.service-text h3 { font-size: 1.5rem; margin-bottom: 10px; }
.service-text p { font-size: 1rem; margin-bottom: 15px; }
@media screen and (max-width: 768px) { .service-item { flex-direction: column; align-items: flex-start; } .service-img { margin-bottom: 20px; } .service-text { max-width: 100%; } }
@media screen and (max-width: 480px) { .gardening-services h2 { font-size: 1.5rem; } .service-text h3 { font-size: 1.2rem; } }
.accordion-btn::after { content: ' '; font-size: 1.5rem; transition: transform 0.3s ease; }
.accordion-btn.active::after { transform: rotate(180deg); }
.accordion-item.active .accordion-content { display: block; max-height: 500px; padding: 15px; }
.accordion-btn.active { background-color: #45a049; }
.homebutton { text-align: center; margin-top: 30px; }  
.homebutton a { background: linear-gradient(to right, #09b011, #088d0f, #005a05, #004904, #042d00, #021e00); color: white !important; padding: 15px 30px; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease; }  
.homebutton a:hover { background: linear-gradient(to right, #09b011, #088d0f, #005a05, #004904, #042d00, #021e00); color: white !important; }  
.homebutton button { text-decoration: none; overflow: visible; z-index: 1000; background-color: white; color: #006400; padding: 2px 5px; border: none; border-radius: 8px; cursor: pointer; box-shadow: 6px 8px 16px rgba(0, 0, 0, 0.5); transition: all 0.3s ease-in-out; margin-right: 1cm; position: relative; }  
.homebutton button:hover { color: #006400; box-shadow: 6px 8px 16px rgba(0, 0, 0, 0.5); }  
.homebutton a { text-decoration: none; display: inline-block; padding: 12px 30px; font-size: 1.1rem; font-weight: 600; text-align: center; background-color: white; color: #006400; border-radius: 8px; box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.3); transition: all 0.3s ease-in-out; }  
.homebutton a:hover { overflow: visible; transform: scale(1.05); box-shadow: 6px 8px 16px rgba(0, 0, 0, 0.5); }  
.homebutton a:focus, .homebutton a:active { overflow: visible; transform: scale(1.05); box-shadow: 6px 8px 16px rgba(0, 0, 0, 0.5); }

  .crow-container { display: flex; justify-content: space-between; gap: 1px; width: 100%; box-sizing: border-box; }
.crow-item { flex: 1; min-width: 200px; box-sizing: border-box; text-align: center; transition: all 0.3s ease; }
.crow-item:hover { transform: scale(1.1); }
@media (max-width: 768px) { .crow-container { flex-direction: column; } .crow-item { z-index: 0; } }
@media (max-width: 768px) { .home-container { flex-direction: column; } }
h1.logo, h1.logo2 { font-weight: 800; text-align: center; font-family: 'Poppins', sans-serif; animation: fadeIn 0.8s ease-in-out; margin: 0 auto; padding: 2px 0; line-height: 1.1; display: block; white-space: nowrap; overflow: hidden; }
h1.logo { font-size: 5.2rem; color: #1b9c19; letter-spacing: 1.5px; text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4); text-transform: none; transition: color 2s ease-in-out; }
h1.logo2 { font-size: 1.2rem; color: #084d02; letter-spacing: 1px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); text-transform: none; transition: color 2s ease-in-out; }
h1.logo:hover, h1.logo2:hover { transform: scale(1.02); text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5); transition: transform 0.2s ease-in-out, text-shadow 0.2s ease-in-out; animation: colorShift 5s infinite alternate; }
@keyframes colorShift { 0% { color: #1b9c19; } 25% { color: #228B22; } 50% { color: #2e8b57; } 75% { color: #4CAF50; } 100% { color: #084d02; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.homepics { border-radius: 8px;  max-width: 429px; width: 80vw; height: 300px; margin: 0 auto; overflow: hidden;  box-shadow: 4px 6px 12px rgba(0,0,0,.7); transition: box-shadow .5s ease-in-out; }
.homepics img { width: 100%; height: 100%; object-fit: cover; }
.homepics:hover { box-shadow: 4px 6px 12px rgba(0,0,0,.7); }
/* Mobile-specific adjustments - Ensures images scale properly on smaller screens */  
@media (max-width: 768px) { .homepics img { width: 100%; height: auto; object-fit: cover; } }  
/* Button Styling - Styled for better visibility and interaction */  
.homeright button { background-color: white; color: #006400; font-size: 1.2rem; font-weight: 700; padding: 15px; width: 100%; text-align: left; cursor: pointer; border: none; border-radius: 5%; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.3s ease, transform 0.3s ease; }  
.homeright button:hover { color: #fff; background: linear-gradient(to right, #09b011, #088d0f, #005a05, #004904, #042d00, #021e00); }  
.homeright div { border-radius: 8px; !important }  
/* Title Container - Centers the title image inside a flexible container */  
.titlecnd { width: 100vw; display: flex; justify-content: center; align-items: center; overflow: hidden; }  
.titlecnd img { max-width: 100%; height: auto; }  
@media (max-width: 768px) { .titlecnd { display: flex; } }  
/* Home Services Container - Defines spacing and maximum width for services section */  
.home-services-container { padding: 20px; font-family: Arial, Helvetica, sans-serif; max-width: 1200px; margin: 0 auto; }  
h2 { text-align: center; margin-bottom: 20px; }  
/* Service Blocks - Defines layout and spacing for individual service items */  
.service-block { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding: 10px; }  
.service-block.reverse { flex-direction: row-reverse; }  
.service-image { flex: 1; max-width: 45%; margin-right: 20px; }  
/* Service Image Styling - Ensures images are properly displayed with a hover effect */  
.service-image img { width: 100%; height: auto; border-radius: 8px; box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.7); transition: box-shadow 0.3s ease-in-out; }  
.service-image img:hover { box-shadow: 6px 8px 16px rgba(0, 0, 0, 0.7); }  
.service-text { flex: 1; max-width: 45%; }  
.service-text p { line-height: 1.6; }  
.highlight { font-weight: bold; color: #006400; }  
/* Mobile Responsiveness - Adjustments for smaller screens */  
@media (max-width: 768px) { .service-block { flex-direction: column; align-items: center; } .service-image, .service-text { max-width: 100%; margin-right: 0; margin-bottom: 2px; } .service-text { text-align: center; } }  
/* Carousel Container - Defines overflow behavior and layout */  
.carousel-container {border-radius: 8px; overflow: hidden; width: 100%; max-width: 400px; margin: auto; position: relative;   border-radius: 8px; 
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.3); background: #fff;}  
.carousel-track { display: flex; transition: transform 0.3s ease-in-out; cursor: grab;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); }  
.carousel-card { min-width: 100%; background: #ffffff; color: rgb(0, 0, 0); text-align: center; padding: 20px; font-size: 1.5rem; border-radius: 10px; user-select: none;   }  
/* Home Section - Defines margin for spacing */  
#home { margin-top: 100px; }  
/* Services Section - General layout and flex properties */  
#services { padding: 5px 0; }  
#services .services-container { width: 100%; margin: 0 auto; }  
#services .services-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }  
#services .service-item { background-color: #ffffff; padding: 2px; border-radius: 8px;  text-align: center; transition: transform 0.3s ease; margin: 1px; }  
/* Desktop (CPU) Styles - Adjust service item width for larger screens */  
@media (min-width: 1024px) { #services .service-item { flex: 1 1 33%; } #services .services-row > .service-item:nth-child(2) { flex: 0 0 20%; } }  
/* Mobile Styles - Ensures services take full width on smaller screens */  
@media (max-width: 1023px) { #services .service-item { flex: 0 0 100%; } }  
/* Random Container - Provides additional margin for layout consistency */  
.random-container { margin: 20px; }  
/* Toggle Button - Styles and focus behavior */  
.random-toggle-btn { background-color: white; color: #006400; padding: 10px 20px; border: none; width: 100%; text-align: left; font-size: 16px; cursor: pointer; border-radius: 8px; box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.3); transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; font-weight: bold; }  
.random-toggle-btn:focus { outline: none; }  
.random-toggle-btn:hover { background: linear-gradient(to right, #09b011, #088d0f, #005a05, #004904, #042d00, #021e00); color: white !important; box-shadow: 6px 8px 16px rgba(0, 0, 0, 0.5); }  
/* Random Content - Background and padding adjustments */  
.random-content { padding: 10px; background-color: #f1f1f1; margin-top: 1px; border: 1px solid #ddd; }  
/* Random Sections - Adds margin to separate different sections */  
.random-one, .random-two, .random-three, .random-four { margin-bottom: 20px; }  
/* Contact Section - Flexbox layout for responsiveness */  
#contact { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }  
/* Contact Items - Styled boxes for each contact method */  
.contact-item { background-color: #fff; padding: 20px; text-align: center; flex: 1 1 30%; box-sizing: border-box; margin-bottom: 20px; }  
/* Mobile View - Stack contact items vertically */  
@media screen and (max-width: 768px) { #contact { flex-direction: column; align-items: center; } .contact-item { flex: 1 1 100%; margin-bottom: 15px; } }  
/* Larger Screens - Ensure items are side by side */  
@media screen and (min-width: 769px) { #contact { flex-direction: row; } }  
/* Contact Section Heading */  
#contact h1 { text-align: center; font-size: 1.5em; margin-bottom: 15px; }  
/* Contact List - Remove default styling and format */  
.contact-list { list-style: none; padding: 0; margin: 0; }  
.contact-list li { display: flex; align-items: center; font-size: 1em; margin-bottom: 8px; }  
.contact-list li i { margin-right: 8px; font-size: 1.3em; color: #3b3b3b; }  
.contact-list li strong { margin-right: 4px; }  
.contact-list li a { text-decoration: none; color: #005a05; }  
/* Map Container - Fixed size and styling */  
.map-container { width: 500px; height: 300px; text-align: center; }  
/* Map Iframe - Ensures it fits container */  
.map-container iframe { width: 100%; height: 100%; border: none; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }  
/* Contact Form - Centered and styled form */  
.contact-form { display: flex; flex-direction: column; max-width: 400px; margin: auto; padding: 20px; border: 1px solid #ccc; border-radius: 8px; background-color: #f9f9f9; }  
.contact-form input, .contact-form textarea, .contact-form button { margin-bottom: 10px; padding: 10px; font-size: 16px; }  
/* Submit Button - Styled with hover effect */  
.contact-form button { background-color: #09b011; color: white; border: none; cursor: pointer; }  
.contact-form button:hover { background-color: #088d0f; }  
/* Previous Work Section - Full height */  
#previous-work { display: flex; flex-direction: column; gap: 10px; height: 100vh; }  
/* Top Section - Occupies 40% of height */  
.top-container { display: flex; gap: 10px; height: 40%; }  
.top-box { flex: 1; background: white; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold;  }  
.top-box a { font-weight: bold; color: #09b011; text-decoration: none; transition: color 0.3s ease-in-out; }  
.top-box a:hover { color: #077f0d; text-decoration: underline; }  
/* Bottom Section - Occupies 60% of height */  
.bottom-container { height: 60%; background: white; padding: 10px; border-radius: 8px; display: flex; justify-content: center; align-items: center; }  
.bottom-container img { transition: transform 0.3s ease-in-out;}
.bottom-container img:hover { transform: scale(1.1);}
/* Image Grid - Arranged in 4x3 layout */  
.grid { display: grid; width: 100%; height: 100%; gap: 10px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }  
.grid a { display: flex; align-items: center; justify-content: center; background: #f4f4f4; border-radius: 5px; overflow: hidden;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); }  
.grid img { width: 100%; height: 100%; object-fit: cover;  }  
/* Responsive Adjustments for Mobile */  
@media (max-width: 768px) { .top-container { flex-direction: column; height: auto; } .grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, 1fr); } }  
.smlnhv { font-size: 0.9em; font-weight: 600; color: #084d02; }
.service-item .homebutton { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }  
.service-item .homebutton a { text-align: center; text-decoration: none; color: inherit; }