/* Nature Green Theme */
* {margin: 0;padding: 0;box-sizing: border-box;touch-action: manipulation;}
html {touch-action: manipulation;}
body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;line-height: 1.6;color: #2c3e50;background: #f8fdf8;overflow-x: hidden;min-height: 100vh;display: flex;flex-direction: column;}
main {flex: 1;}
.header {position: fixed;top: 0;width: 100%;background: rgba(248, 253, 248, 0.95);backdrop-filter: blur(10px);box-shadow: 0 2px 10px rgba(0,0,0,0.1);z-index: 1000;padding: 20px 0;}
.header-container,.navbar,.nav-container {max-width: 1200px;margin: 0 auto;padding: 0 30px;display: flex;justify-content: space-between;align-items: center;gap: 20px;position: relative;z-index: 1001;}
.logo {font-size: 28px;font-weight: 800;background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-decoration: none;transition: transform 0.3s;min-width: max-content;flex-shrink: 0;}
.logo a {color: inherit;text-decoration: none;}
.logo:hover {transform: scale(1.05);}
.nav-links {display: flex;flex: 1;justify-content: center;}
.nav-links ul {display: flex;flex-direction: row;gap: 30px;list-style: none;margin: 0;padding: 0;}
.nav-links li {display: inline-block;position: relative;}
.nav-links a {color: #2c3e50;text-decoration: none;font-weight: 500;transition: color 0.3s;position: relative;white-space: nowrap;opacity: 0.7;}
.nav-links a:hover {color: #2ecc71;opacity: 1;}
.nav-links a::after {content: '';position: absolute;bottom: -5px;left: 0;width: 0;height: 2px;background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);transition: width 0.3s;}
.nav-links a:hover::after {width: 100%;}
.nav-links .dropdown-menu {display: none;position: absolute;top: 100%;left: 0;background: #f8fdf8;min-width: 200px;list-style: none;padding: 8px 0;margin: 0;box-shadow: 0 4px 12px rgba(0,0,0,0.15);border-radius: 8px;z-index: 1000;}
.nav-links li.has-dropdown {position: relative;}
.nav-links li.has-dropdown::before {content: '';position: absolute;top: 100%;left: 0;right: 0;height: 10px;background: transparent;z-index: 999;}
.nav-links li.has-dropdown > a::after {content: ' ▼';font-size: 10px;margin-left: 5px;}
.nav-links li.has-dropdown:hover > .dropdown-menu,.dropdown-menu:hover {display: block;}
.dropdown-menu li {padding: 0;display: block;}
.dropdown-menu a {display: block;padding: 10px 20px;color: #2c3e50 !important;text-decoration: none;white-space: nowrap;opacity: 1;}
.dropdown-menu a:hover {background: rgba(0,0,0,0.05);color: #2ecc71 !important;}
.dropdown-menu a::after {display: none !important;}
.hamburger {display: none;flex-direction: column;cursor: pointer;gap: 6px;padding: 10px;border-radius: 8px;transition: background 0.3s;z-index: 1002;position: relative;flex-shrink: 0;}
.hamburger:active {background: rgba(0,0,0,0.05);}
.hamburger span {width: 24px;height: 3px;background: #2ecc71;border-radius: 2px;transition: all 0.3s ease;display: block;}
.hamburger.active span:nth-child(1) {transform: rotate(45deg) translate(8px, 8px);}
.hamburger.active span:nth-child(2) {opacity: 0;}
.hamburger.active span:nth-child(3) {transform: rotate(-45deg) translate(7px, -7px);}
.mobile-menu {display: none;position: fixed;top: 70px;left: 0;width: 100%;height: calc(100vh - 70px);background: #f8fdf8;flex-direction: column;padding: 20px 0;max-height: 0;overflow: hidden;transition: max-height 0.3s ease;z-index: 999;box-shadow: 0 5px 15px rgba(0,0,0,0.1);}
.mobile-menu.active {max-height: calc(100vh - 70px);}
.mobile-menu nav {width: 100%;}
.mobile-menu ul {list-style: none;margin: 0;padding: 0;}
.mobile-menu li {display: block;}
.mobile-menu a {padding: 15px 30px;color: #2c3e50;text-decoration: none;font-weight: 500;border-bottom: 1px solid rgba(0,0,0,0.05);transition: all 0.3s;display: block;}
.mobile-menu a:hover,.mobile-menu a:active {background: rgba(0,0,0,0.05);color: #2ecc71;padding-left: 50px;}
.mobile-menu ul ul {padding-left: 20px;}
.mobile-menu ul ul a {font-size: 14px;padding: 12px 30px;}
.main-content {margin-top: 80px;min-height: calc(100vh - 80px);}
.container {max-width: 1200px;margin: 0 auto;padding: 0 30px;}
.hero-slider {position: relative;height: 100vh;margin-top: 80px;overflow: hidden;background: #0f172a;}
.slides-container {position: relative;height: 100%;}
.slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: opacity 1s ease-in-out;display: flex;align-items: center;justify-content: center;}
.slide.active {opacity: 1;}
.slide-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;z-index: 1;}
.slide-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, transparent 100%);z-index: 2;}
.slide-content {position: relative;z-index: 3;text-align: center;color: white;max-width: 800px;padding: 0 20px;}
.slide-title {font-size: 64px;font-weight: 800;margin-bottom: 20px;line-height: 1.1;text-shadow: 0 4px 20px rgba(0,0,0,0.3);}
.slide-subtitle {font-size: 24px;margin-bottom: 40px;opacity: 0.95;line-height: 1.5;}
.slide-button {display: inline-block;padding: 16px 40px;background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);color: white;text-decoration: none;border-radius: 12px;font-weight: 600;font-size: 18px;transition: all 0.3s;box-shadow: 0 10px 30px rgba(0,0,0,0.3);}
.slide-button:hover {transform: translateY(-3px);box-shadow: 0 15px 40px rgba(0,0,0,0.4);}
.slider-prev,.slider-next {width: 50px;height: 50px;background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);border: 2px solid rgba(255, 255, 255, 0.3);border-radius: 50%;color: white;font-size: 24px;cursor: pointer;transition: all 0.3s;display: flex;align-items: center;justify-content: center;}
.slider-dots {position: absolute;bottom: 110px;left: 50%;transform: translateX(-50%);display: flex;gap: 12px;z-index: 4;}
.dot {width: 12px;height: 12px;border-radius: 50%;background: rgba(255, 255, 255, 0.4);border: none;cursor: pointer;transition: all 0.3s;}
.dot.active {background: white;width: 40px;border-radius: 6px;}
.page-title {font-size: 48px;font-weight: 800;color: #2c3e50;margin: 60px 0 40px;text-align: center;}
.content {max-width: 900px;margin: 0 auto;padding: 40px 0;line-height: 1.8;}
.content h2 {font-size: 32px;font-weight: 700;color: #2c3e50;margin: 40px 0 20px;}
.content h3 {font-size: 24px;font-weight: 600;color: #2c3e50;margin: 30px 0 15px;opacity: 0.9;}
.content p {margin-bottom: 20px;color: #2c3e50;opacity: 0.8;}
.content ul,.content ol {margin: 20px 0;padding-left: 30px;}
.content li {margin-bottom: 10px;color: #2c3e50;opacity: 0.8;}
.content a {color: #2ecc71;text-decoration: none;transition: color 0.3s;}
.content a:hover {color: #27ae60;text-decoration: underline;}
.content img {max-width: 100%;height: auto;border-radius: 12px;margin: 30px 0;box-shadow: 0 10px 30px rgba(0,0,0,0.1);}
.features-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px;margin: 60px 0;}
.feature-card {padding: 30px;background: white;border-radius: 16px;box-shadow: 0 4px 20px rgba(0,0,0,0.08);transition: all 0.3s;border: 2px solid transparent;}
.feature-card:hover {transform: translateY(-5px);box-shadow: 0 8px 30px rgba(0,0,0,0.12);border-color: #2ecc71;}
.feature-icon {font-size: 40px;margin-bottom: 20px;display: block;}
.feature-card h3 {font-size: 20px;font-weight: 700;color: #2c3e50;margin-bottom: 15px;}
.feature-card p {color: #2c3e50;line-height: 1.6;opacity: 0.7;}
.footer {background: linear-gradient(135deg, #1e4620 0%, #27ae60 100%);color: white;padding: 60px 0 30px;margin-top: 80px;}
.footer-content {max-width: 1200px;margin: 0 auto;padding: 0 30px;}
.footer-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 40px;margin-bottom: 40px;}
.footer-col h3 {font-size: 18px;font-weight: 700;margin-bottom: 20px;color: white;}
.footer-col p {color: rgba(255,255,255,0.7);margin-bottom: 15px;line-height: 1.6;}
.footer-col ul {list-style: none;}
.footer-col li {margin-bottom: 12px;}
.footer-col a {color: rgba(255,255,255,0.7);text-decoration: none;transition: color 0.3s;}
.footer-col a:hover {color: #2ecc71;}
.social-links {display: flex;gap: 15px;}
.social-links a {font-size: 24px;transition: transform 0.3s;}
.social-links a:hover {transform: scale(1.2);}
.footer-bottom {padding-top: 30px;border-top: 1px solid rgba(255,255,255,0.1);text-align: center;color: rgba(255,255,255,0.7);}
.badge-container {margin-top: 20px;}
.made-with-badge {display: inline-flex;align-items: center;gap: 8px;padding: 8px 16px;background: rgba(255,255,255,0.1);border: 1px solid rgba(255,255,255,0.2);border-radius: 8px;transition: all 0.3s;}
.made-with-badge:hover {background: rgba(255,255,255,0.15);border-color: rgba(255,255,255,0.3);transform: translateY(-2px);}
.badge-icon {font-size: 18px;}
.badge-text {font-size: 14px;color: rgba(255,255,255,0.8);}

/* Hero Simple for Featured Images */
.hero-simple {position: relative;height: 60vh;min-height: 400px;margin-top: 80px;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.hero-simple .hero-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;z-index: 1;}
.hero-simple .hero-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%);z-index: 2;}
.hero-simple .hero-content {position: relative;z-index: 3;text-align: center;color: white;max-width: 800px;padding: 0 20px;}
.hero-simple .hero-content h1 {font-size: 48px;font-weight: 800;margin-bottom: 20px;text-shadow: 0 4px 20px rgba(0,0,0,0.5);}
.hero-simple .hero-subtitle {font-size: 20px;opacity: 0.95;text-shadow: 0 2px 10px rgba(0,0,0,0.5);}

@media (max-width: 992px) {.nav-links {display: none;}.hamburger {display: flex;}.mobile-menu {display: flex;}.footer-grid {grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 768px) {.header {padding: 15px 0;}.header-container,.nav-container {padding: 0 15px;}.logo {font-size: 24px;}.hero-slider {margin-top: 70px;height: 80vh;}.slide-title {font-size: 40px;}.slide-subtitle {font-size: 18px;}.page-title {font-size: 32px;margin: 40px 0 30px;}.content h2 {font-size: 28px;}.content h3 {font-size: 20px;}.features-grid {grid-template-columns: 1fr;gap: 20px;}.footer-grid {grid-template-columns: 1fr;gap: 30px;}.container {padding: 0 15px;
    .hero-simple {height: 50vh;min-height: 300px;margin-top: 70px;}
    .hero-simple .hero-content h1 {font-size: 32px;}
    .hero-simple .hero-subtitle {font-size: 16px;}
}}
@media (max-width: 480px) {.slide-title {font-size: 32px;}.slide-subtitle {font-size: 16px;}.slide-button {padding: 12px 30px;font-size: 16px;}}