/* ===== Global Reset ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-green: #2e7d32; --light-green: #d0ffd0; --fade-speed: 0.7s; scroll-behavior: smooth; } body { font-family: Arial, sans-serif; background-color: #f9f9f9; color: #333; line-height: 1.6; padding-top: 120px; /* Matches header height for all pages */ } /* ===== Viewport Meta (Add to of your HTML) ===== */ /* */ /* ===== Header ===== */ header { background-color: var(--primary-green); color: white; padding: 10px 15px; position: fixed; top: 0; width: 100%; z-index: 1000; } /* ===== Hide Header on Scroll ===== */ header.hide { transform: translateY(-100%); transition: transform 0.4s ease-in-out; } .header-content { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; } .header-logo img { max-height: 70px; width: auto; max-width: 150px;/* Prevents oversized images */ } .header-title { flex: 2; text-align: center; font-size: 18px; font-weight: bold; margin-top: 5px; } .header-empty { flex: 1; } /* ===== Navigation ===== */ nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-top: 10px; } nav a { color: white; text-decoration: none; font-weight: bold; transition: color 0.3s; } nav a:hover { color: var(--light-green); } /* ===== Hamburger Menu (Mobile Only) ===== */ .hamburger { display: none; font-size: 30px; cursor: pointer; padding: 10px; color: white; position: absolute; top: 15px; right: 20px; z-index: 1001; } .nav-links { display: flex; gap: 15px; } .nav-links.show { display: flex; } /* ===== Carousel ===== */ .carousel-item img { width: 100%; height: 80vh; object-fit: cover; } .carousel-caption { top: 50%; transform: translateY(-50%); bottom: unset; } .carousel-caption h2 { background: rgba(0, 0, 0, 0.3); padding: 15px 25px; border-radius: 10px; font-weight: bold; display: inline-block; color: white; } /* ===== Sections ===== */ .section-title { background-color: var(--primary-green); color: white; padding: 20px; text-align: center; font-size: 26px; font-weight: bold; margin-top: 40px; border-radius: 5px; } .section-body { max-width: 1100px; margin: 20px auto; padding: 0 20px; font-size: 18px; animation: fadeIn var(--fade-speed) ease; } .read-more-btn { display: inline-block; margin: 20px auto 0; padding: 10px 20px; background-color: var(--primary-green); color: white; text-decoration: none; font-weight: bold; border-radius: 5px; transition: background-color 0.3s ease; } .read-more-btn:hover { background-color: #256428; } /* ===== Footer ===== */ footer { background-color: #333; color: white; text-align: center; padding: 20px; margin-top: 40px; font-size: 14px; } /* ========== OUR SERVICES PAGE SUPPORT ========== */ /* Global Headings EXCEPT inside gallery */ h2:not(#gallery h2), h3:not(#gallery h3), h4, h5, h6 { background-color: #2e7d32; color: white; padding: 10px; border-radius: 5px; margin-top: 30px; } /* Feature Lists */ .features-list { margin-top: 15px; margin-bottom: 20px; } .features-list ul { list-style-type: disc; padding-left: 20px; } /* Image Galleries */ .image, .image-gallery-3rows { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .image img, .image-gallery-3rows img { width: 30%; height: auto; border-radius: 5px; object-fit: cover; } /* Table Styling */ table { width: 100%; border-collapse: collapse; margin-top: 20px; text-align: center; } th, td { padding: 12px; border: 1px solid #ccc; } thead { background-color: #2e7d32; color: white; } /* Section Titles */ .section-title { background-color: #2e7d32; color: white; font-weight: bold; padding: 10px; margin-top: 30px; border-radius: 5px; text-align: center; } /* Section Body */ .section-body { margin-top: 10px; overflow-x: auto; } /* ===== About Page Specific Styles ===== */ .section-subtitle { background-color: white; color: #2e7d32; text-align: center; font-size: 22px; font-weight: bold; padding: 10px; margin: 15px 0 10px; border-radius: 5px; } .features-list { margin-bottom: 20px; background: #e8f5e9; padding: 15px; border-left: 5px solid #2e7d32; border-radius: 5px; } .features-list ul { list-style-type: "✓ "; padding-left: 25px; } .features-list li { margin-bottom: 8px; } .machinery-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; } .left-column, .right-column { flex: 1 1 45%; text-align: center; } .left-column img, .right-column img { width: 100%; max-width: 300px; margin-bottom: 15px; border-radius: 5px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); } .subheading { font-size: 18px; font-weight: bold; color: #2e7d32; margin-bottom: 10px; } /* ===== Tighten About Page Layout ===== */ .about-page { margin: 0; padding: 0; } /* Reduce space below sticky header */ .about-page main { padding-top: 60px; /* match header height on desktop */ } /* Reduce extra section spacing */ .about-page section { margin-top: 15px; margin-bottom: 15px; padding-top: 10px; padding-bottom: 10px; } /* Tighten heading spacing */ .about-page h1, .about-page h2, .about-page h3 { margin-top: 5px; margin-bottom: 5px; } /* ===== ABOUT PAGE IMAGE FIX ===== */ .about-page .tree-image-gallery, .about-page .stump-gallery { display: flex; flex-wrap: wrap; gap: 10px; /* space between images */ justify-content: center; /* center all images */ } .about-page .tree-image-gallery img, .about-page .stump-gallery img { flex: 1 1 calc(33.333% - 10px); /* 3 per row desktop */ max-width: calc(33.333% - 10px); border-radius: 5px; object-fit: cover; } /* Override section padding for About Us page (desktop) */ .about-page section { padding: 20px 20px 30px; /* Matches mobile-like tighter spacing */ } /* === OUR PRODUCT PAGE SUPPORT STYLES (FIXED for 3 horizontal images) === */ .image-gallery { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 20px auto; max-width: 1000px; } .image-gallery img { width: 32%; height: auto; border-radius: 8px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); object-fit: cover; } /* ===== FAQ PAGE STYLES ===== */ section { padding: 120px 20px 30px; max-width: 900px; margin: auto; animation: fadeIn 0.7s ease; } h2 { color: #2e7d32; font-size: 26px; margin-bottom: 20px; text-align: center; border-bottom: 2px solid #2e7d32; padding-bottom: 10px; } .faq-item { margin-bottom: 25px; } .faq-question { font-weight: bold; color: #2e7d32; margin-bottom: 8px; } .faq-answer { padding-left: 15px; } table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 15px; } table, th, td { border: 1px solid #ccc; } th, td { padding: 10px; text-align: center; } th { background-color: #2e7d32; color: white; } /* ========== GALLERY PAGE STYLES ========== */ #gallery { padding: 30px 20px; max-width: 1000px; margin: auto; animation: fadeIn 1s ease; } #gallery h2, #gallery h3 { color: #2e7d32; border-bottom: 2px solid #ccc; padding-bottom: 5px; margin-bottom: 10px; } #gallery h2 { font-size: 28px; } #gallery h3 { font-size: 24px; margin-top: 40px; text-align: center; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px; } .gallery-item { background-color: white; padding: 10px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); text-align: center; transition: transform 0.3s ease; } .gallery-item img { width: 100%; border-radius: 10px; transition: transform 0.3s ease; } .gallery-item:hover { transform: scale(1.03); } .completed-projects-images, .ongoing-projects-images { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; } .completed-projects-images img { width: 40%; height: auto; border-radius: 10px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); } .ongoing-projects-images img { width: 30%; height: auto; border-radius: 10px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); } /* ===== CONTACT PAGE STYLES ===== */ #contact { padding: 30px 20px; max-width: 900px; margin: auto; animation: fadeIn 0.7s ease; } #contact h2 { color: #2e7d32; font-size: 28px; margin-bottom: 15px; border-bottom: 2px solid #ccc; padding-bottom: 5px; text-align: center; } #contact form { max-width: 500px; margin: 0 auto; } #contact input, #contact textarea { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; } #contact .btn { padding: 10px 20px; background-color: #2e7d32; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; display: inline-block; text-align: center; } #contact .btn:hover { background-color: #1b5e20; } #contact .loading-spinner { display: none; text-align: center; margin-top: 20px; } #contact .loading-spinner div { border: 5px solid #f3f3f3; border-top: 5px solid #2e7d32; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto; } #contact p.contact-info { margin-top: 30px; text-align: center; } #contact .whatsapp-buttons, #contact .call-buttons { text-align: center; margin-top: 20px; } #contact .btn img { width: 20px; vertical-align: middle; margin-right: 8px; } /* ===== CONTACT PAGE STYLES ===== */ #contact { padding: 30px 20px; max-width: 900px; margin: auto; animation: fadeIn 0.7s ease; } #contact h2 { color: #2e7d32; font-size: 28px; margin-bottom: 15px; border-bottom: 2px solid #ccc; padding-bottom: 5px; text-align: center; } #contact form { max-width: 500px; margin: 0 auto; } #contact input, #contact textarea { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; } #contact .btn { padding: 10px 20px; background-color: #2e7d32; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; display: inline-block; text-align: center; } #contact .btn:hover { background-color: #1b5e20; } #contact .loading-spinner { display: none; text-align: center; margin-top: 20px; } #contact .loading-spinner div { border: 5px solid #f3f3f3; border-top: 5px solid #2e7d32; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto; } #contact p.contact-info { margin-top: 30px; text-align: center; } #contact .whatsapp-buttons, #contact .call-buttons { text-align: center; margin-top: 20px; } #contact .btn img { width: 20px; vertical-align: middle; margin-right: 8px; } .image-gallery { display: flex; flex-wrap: wrap; justify-content: space-between; } .image-gallery img { width: 30%; } /* ===== Animations ===== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ===== Mobile Styles ===== */ @media (max-width: 768px) { body { padding-top: 140px; /* Match increased header height */ } .header-content { flex-direction: column; align-items: center; gap: 5px; } .header-title { font-size: 16px; text-align: center; margin-top: 5px; padding: 0 10px; line-height: 1.2; } .header-logo img { max-height: 60px; max-width: 100px; } .hamburger { display: flex; } .nav-links { display: none; flex-direction: column; position: absolute; background-color: #357a38; top: 100px; right: 15px; width: 180px; padding: 15px; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 999; } .nav-links.show { display: flex; } .nav-links li { margin: 10px 0; } nav { flex-direction: column; gap: 10px; } .carousel-item img { height: 50vh; } .carousel-caption h2 { font-size: 16px; padding: 10px 15px; } .section-title { font-size: 22px; padding: 15px; } .section-body { font-size: 16px; padding: 0 15px; } /* ===== Carousel ===== */ .carousel-item img { width: 100%; height: 80vh; object-fit: cover; } .carousel-caption { top: 50%; transform: translateY(-50%); bottom: unset; } .carousel-caption h2 { background: rgba(0, 0, 0, 0.3); padding: 15px 25px; border-radius: 10px; font-weight: bold; display: inline-block; color: white; } /* ===== Sections ===== */ .section-title { background-color: #2e7d32; color: white; padding: 20px; text-align: center; font-size: 26px; font-weight: bold; margin-top: 40px; } .section-body { max-width: 1100px; margin: 20px auto; padding: 0 20px; font-size: 18px; animation: fadeIn 1s ease; } .read-more-btn { display: inline-block; margin: 20px auto 0; padding: 10px 20px; background-color: #2e7d32; color: white; text-decoration: none; font-size: 16px; font-weight: bold; border-radius: 5px; transition: background-color 0.3s ease; } .read-more-btn:hover { background-color: #256428; } .product-image { width: 100%; height: auto; max-height: 300px; object-fit: cover; border-radius: 8px; margin-bottom: 15px; } /* Mobile: Keep 3 per row in About page galleries */ .about-page .tree-image-gallery img, .about-page .stump-gallery img { flex: 1 1 calc(50% - 10px); max-width: calc(50% - 10px); } .completed-projects-images img, .ongoing-projects-images img { width: 60%; max-width: 100%; } /* ===== Tables ===== */ table { width: 100%; border-collapse: collapse; margin-top: 20px; text-align: center; } table, th, td { font-size: 14px; padding: 12px; border: 1px solid #ccc; } thead { background-color: #2e7d32; color: white; } nav { flex-direction: column; gap: 10px; } section { padding-top: 130px; padding-left: 10px; padding-right: 10px; } header h1 { font-size: 20px; } } .machinery-container { flex-direction: column; align-items: center; } .left-column, .right-column { flex: 1 1 100%; } .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; } .completed-projects-images img, .ongoing-projects-images img { width: 90%; max-width: 100%; } #contact h2 { font-size: 22px; } #contact form { padding: 0 10px; } #contact input, #contact textarea { font-size: 14px; } #contact .btn { font-size: 14px; padding: 8px 16px; } #contact .loading-spinner { margin-top: 15px; } /* ===== Universal Image Safety Rule ===== */ img { max-width: 100%; height: auto; display: block; } about-page main { padding-top: 50px; * match header height on desktop */ } .about-page section { margin-top: 10px; margin-bottom: 10px; padding-top: 8px; padding-bottom: 8px; } .about-page h1, .about-page h2, .about-page h3 { margin-top: 3px; margin-bottom: 3px; }