@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #4a7c3f;
  --primary-dark: #3a6231;
  --primary-light: #5e9e4f;
  --accent: #8db83a;
  --accent-light: #a8d44a;
  --dark: #1a2e12;
  --dark-bg: #0f1a0a;
  --text: #2c3e24;
  --text-light: #5a6e52;
  --light: #f4f7f2;
  --light-alt: #e8efe4;
  --white: #ffffff;
  --gold: #c9a84c;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
  --radius: 12px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--text);
  line-height: 1.7;
  background: var(--white);
  overflow-x: hidden;
}

h1,h2,h3,h4,h5 { font-family:'Playfair Display',serif; color:var(--dark); line-height:1.3; }
h1 { font-size: clamp(2.2rem,5vw,3.5rem); }
h2 { font-size: clamp(1.8rem,4vw,2.8rem); }
h3 { font-size: clamp(1.2rem,2.5vw,1.5rem); }

a { text-decoration:none; color:inherit; transition:var(--transition); }
img { max-width:100%; height:auto; display:block; }
ul { list-style:none; }

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

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px; border-radius:50px; font-weight:600;
  font-size:0.95rem; cursor:pointer; border:none;
  transition:var(--transition); font-family:'Inter',sans-serif;
}
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-secondary { background:transparent; color:var(--primary); border:2px solid var(--primary); }
.btn-secondary:hover { background:var(--primary); color:#fff; }
.btn-accent { background:var(--accent); color:#fff; }
.btn-accent:hover { background:var(--accent-light); transform:translateY(-2px); }
.btn-white { background:#fff; color:var(--primary); }
.btn-white:hover { background:var(--light); transform:translateY(-2px); }

/* ===== TOP BAR ===== */
.top-bar {
  background:var(--dark); color:#fff; padding:8px 0;
  font-size:0.85rem;
}
.top-bar .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.top-bar a { color:#ccc; }
.top-bar a:hover { color:var(--accent); }
.top-bar-left, .top-bar-right { display:flex; align-items:center; gap:20px; }
.top-bar i { color:var(--accent); margin-right:5px; }

/* ===== NAVBAR ===== */
.navbar {
  background:rgba(255,255,255,0.97); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:1000;
  box-shadow:0 2px 20px rgba(0,0,0,0.06);
  transition:var(--transition);
}
.nav-container { display:flex; align-items:center; justify-content:space-between; padding:4px 20px; max-width:1300px; margin:0 auto; }
.nav-logo img { height:72px; }
.nav-links { display:flex; align-items:center; gap:5px; }
.nav-links a {
  padding:10px 16px; font-weight:500; font-size:0.92rem;
  color:var(--text); border-radius:8px; position:relative;
}
.nav-links a:hover, .nav-links a.active { color:var(--primary); background:var(--light); }
.nav-links a.active::after { content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:20px; height:3px; background:var(--primary); border-radius:2px; }
.nav-cta .btn { padding:10px 24px; font-size:0.9rem; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:5px; background:none; border:none; }
.hamburger span { width:25px; height:2.5px; background:var(--dark); border-radius:2px; transition:var(--transition); }

/* ===== HERO ===== */
.hero {
  position:relative; min-height:92vh; display:flex; align-items:center;
  background-size:cover; background-position:center; background-attachment:fixed;
}
.hero::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(15,26,10,0.85),rgba(74,124,63,0.6)); }
.hero-content { position:relative; z-index:2; color:#fff; max-width:700px; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.15); backdrop-filter:blur(10px); padding:8px 20px; border-radius:50px; font-size:0.85rem; margin-bottom:24px; border:1px solid rgba(255,255,255,0.2); }
.hero h1 { color:#fff; margin-bottom:20px; }
.hero p { font-size:1.15rem; opacity:0.9; margin-bottom:32px; max-width:550px; }
.hero-buttons { display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats { display:flex; gap:40px; margin-top:48px; padding-top:32px; border-top:1px solid rgba(255,255,255,0.2); }
.hero-stat h3 { color:var(--accent); font-size:2rem; }
.hero-stat p { font-size:0.85rem; opacity:0.8; }

/* ===== PAGE HERO ===== */
.page-hero { position:relative; padding:120px 0 80px; background-size:cover; background-position:center; text-align:center; }
.page-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(15,26,10,0.88),rgba(74,124,63,0.7)); }
.page-hero .container { position:relative; z-index:2; color:#fff; }
.page-hero h1 { color:#fff; margin-bottom:16px; }
.page-hero p { opacity:0.9; font-size:1.1rem; max-width:600px; margin:0 auto; }
.breadcrumb { display:flex; justify-content:center; gap:8px; margin-top:20px; font-size:0.9rem; opacity:0.8; }
.breadcrumb a:hover { color:var(--accent); }

/* ===== SECTIONS ===== */
section { padding:80px 0; }
section:nth-child(even) { background:var(--light); }
.section-badge { display:inline-flex; align-items:center; gap:6px; color:var(--primary); font-weight:600; font-size:0.85rem; text-transform:uppercase; letter-spacing:2px; margin-bottom:12px; }
.section-badge i { color:var(--accent); }
.section-header { text-align:center; max-width:700px; margin:0 auto 50px; }
.section-header p { color:var(--text-light); margin-top:12px; font-size:1.05rem; }
.section-line { width:60px; height:4px; background:linear-gradient(90deg,var(--primary),var(--accent)); border-radius:2px; margin:16px auto 0; }

/* ===== CARDS ===== */
.card {
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:var(--transition);
}
.card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.card-img { height:240px; overflow:hidden; }
.card-img img { width:100%; height:100%; object-fit:cover; transition:var(--transition); }
.card:hover .card-img img { transform:scale(1.05); }
.card-body { padding:28px; }
.card-body h3 { margin-bottom:12px; }
.card-body p { color:var(--text-light); font-size:0.95rem; }

/* ===== SERVICE CARDS ===== */
.service-card {
  background:#fff; padding:36px 28px; border-radius:var(--radius);
  box-shadow:var(--shadow); transition:var(--transition);
  border:1px solid transparent; text-align:center;
}
.service-card:hover { transform:translateY(-8px); border-color:var(--primary); box-shadow:var(--shadow-lg); }
.service-icon { width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; color:#fff; font-size:1.6rem; }
.service-card h3 { margin-bottom:10px; }
.service-card p { color:var(--text-light); font-size:0.93rem; }
.service-card .learn-more { display:inline-flex; align-items:center; gap:6px; color:var(--primary); font-weight:600; margin-top:16px; font-size:0.9rem; }
.service-card:hover .learn-more { gap:10px; }

/* ===== GRID LAYOUTS ===== */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:30px; align-items:center; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

/* ===== ABOUT SPLIT ===== */
.about-split { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-img { position:relative; border-radius:var(--radius); overflow:hidden; }
.about-img img { width:100%; height:100%; object-fit:cover; border-radius:var(--radius); }
.about-img-badge { position:absolute; bottom:20px; right:20px; background:var(--primary); color:#fff; padding:16px 24px; border-radius:var(--radius); text-align:center; }
.about-img-badge h3 { color:#fff; font-size:2rem; }
.about-content .section-badge { margin-bottom:12px; }
.about-content h2 { margin-bottom:16px; }
.about-content > p { color:var(--text-light); margin-bottom:20px; }

/* ===== FEATURES LIST ===== */
.feature-list { display:flex; flex-direction:column; gap:16px; margin:24px 0; }
.feature-item { display:flex; align-items:flex-start; gap:12px; }
.feature-item i { color:var(--primary); font-size:1.2rem; margin-top:3px; flex-shrink:0; }
.feature-item p { font-size:0.95rem; }

/* ===== STATS BAR ===== */
.stats-bar { background:linear-gradient(135deg,var(--dark),var(--primary-dark)); padding:60px 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center; color:#fff; }
.stat-item h3 { color:var(--accent); font-size:2.5rem; margin-bottom:8px; }
.stat-item p { opacity:0.85; font-size:0.95rem; }

/* ===== TESTIMONIALS ===== */
.testimonial-card {
  background:#fff; padding:32px; border-radius:var(--radius);
  box-shadow:var(--shadow); position:relative;
}
.testimonial-card::before { content:'"'; font-family:'Playfair Display',serif; font-size:5rem; color:var(--accent); opacity:0.2; position:absolute; top:10px; left:20px; line-height:1; }
.testimonial-card p { font-style:italic; color:var(--text-light); margin-bottom:20px; position:relative; z-index:2; padding-top:20px; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-author .avatar { width:48px; height:48px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.testimonial-author h4 { font-size:0.95rem; }
.testimonial-author span { font-size:0.82rem; color:var(--text-light); }
.stars { color:var(--gold); margin-bottom:8px; }

/* ===== CTA SECTION ===== */
.cta-section { background:linear-gradient(135deg,var(--dark),var(--primary-dark)); padding:80px 0; text-align:center; color:#fff; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; top:-50%; right:-20%; width:500px; height:500px; background:radial-gradient(circle,rgba(141,184,58,0.15),transparent); border-radius:50%; }
.cta-section h2 { color:#000; margin-bottom:16px; }
.cta-section p { color:#000; opacity:0.9; margin-bottom:32px; max-width:600px; margin-left:auto; margin-right:auto; }

/* ===== PROCESS STEPS ===== */
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; counter-reset:step; }
.process-step { text-align:center; position:relative; counter-increment:step; }
.process-step::before { content:counter(step); width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:700; margin:0 auto 20px; font-family:'Playfair Display',serif; }
.process-step h3 { margin-bottom:8px; }
.process-step p { color:var(--text-light); font-size:0.93rem; }

/* ===== FAQ ===== */
.faq-item { background:#fff; border-radius:var(--radius); margin-bottom:12px; box-shadow:var(--shadow); overflow:hidden; }
.faq-question { padding:20px 24px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:1rem; }
.faq-question i { color:var(--primary); transition:var(--transition); }
.faq-answer { padding:0 24px 20px; color:var(--text-light); font-size:0.95rem; display:none; }
.faq-item.active .faq-answer { display:block; }
.faq-item.active .faq-question i { transform:rotate(180deg); }

/* ===== CONTACT FORM ===== */
.form-group { margin-bottom:20px; }
.form-group label { display:block; margin-bottom:6px; font-weight:500; font-size:0.92rem; color:var(--text); }
.form-group input, .form-group textarea, .form-group select {
  width:100%; padding:14px 18px; border:1.5px solid #dde5d8;
  border-radius:10px; font-family:'Inter',sans-serif; font-size:0.95rem;
  transition:var(--transition); background:#fff;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(74,124,63,0.1); }
.form-group textarea { resize:vertical; min-height:120px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* ===== CONTACT INFO ===== */
.contact-info-card { display:flex; align-items:flex-start; gap:16px; padding:24px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); transition:var(--transition); }
.contact-info-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.contact-info-card .icon { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.2rem; flex-shrink:0; }
.contact-info-card h4 { margin-bottom:4px; font-size:1rem; color:#000; }
.contact-info-card p { color:#000; font-size:0.9rem; }
.contact-info-card a { color:#000; }

/* ===== GALLERY ===== */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.gallery-item { border-radius:var(--radius); overflow:hidden; position:relative; cursor:pointer; aspect-ratio:4/3; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:var(--transition); }
.gallery-item:hover img { transform:scale(1.1); }
.gallery-overlay { position:absolute; inset:0; background:linear-gradient(transparent,rgba(15,26,10,0.7)); opacity:0; transition:var(--transition); display:flex; align-items:flex-end; padding:20px; }
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay p { color:#fff; font-weight:500; }

/* ===== MAP ===== */
.map-container { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.map-container iframe { width:100%; height:400px; border:none; }

/* ===== SERVICE AREAS ===== */
.area-card { background:#fff; padding:24px; border-radius:var(--radius); box-shadow:var(--shadow); transition:var(--transition); border-left:4px solid var(--primary); }
.area-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.area-card h3 { margin-bottom:8px; font-size:1.1rem; }
.area-card p { color:var(--text-light); font-size:0.9rem; }

/* ===== PRICING ===== */
.pricing-card { background:#fff; border-radius:var(--radius); padding:36px 28px; box-shadow:var(--shadow); text-align:center; transition:var(--transition); border:2px solid transparent; }
.pricing-card.featured { border-color:var(--primary); position:relative; }
.pricing-card.featured::before { content:'Popular'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--primary); color:#fff; padding:4px 20px; border-radius:50px; font-size:0.8rem; font-weight:600; }
.pricing-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.pricing-card h3 { margin-bottom:8px; }
.pricing-card .price { font-size:2.2rem; font-weight:700; color:var(--primary); margin:16px 0; font-family:'Playfair Display',serif; }
.pricing-card .price span { font-size:0.9rem; color:var(--text-light); font-weight:400; }
.pricing-card ul { text-align:left; margin:24px 0; }
.pricing-card ul li { padding:8px 0; border-bottom:1px solid var(--light-alt); display:flex; align-items:center; gap:8px; font-size:0.93rem; }
.pricing-card ul li i { color:var(--primary); }

/* ===== WHY US ===== */
.why-card { text-align:center; padding:32px 24px; }
.why-card i { font-size:2.5rem; color:var(--primary); margin-bottom:16px; }
.why-card h3 { margin-bottom:10px; }
.why-card p { color:var(--text-light); font-size:0.93rem; }

/* ===== TIMELINE ===== */
.timeline { position:relative; max-width:800px; margin:0 auto; }
.timeline::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:3px; background:linear-gradient(var(--primary),var(--accent)); transform:translateX(-50%); }
.timeline-item { display:flex; justify-content:flex-end; padding:20px 0; width:50%; position:relative; }
.timeline-item:nth-child(even) { align-self:flex-end; margin-left:50%; justify-content:flex-start; }
.timeline-content { background:#fff; padding:24px; border-radius:var(--radius); box-shadow:var(--shadow); max-width:350px; }
.timeline-content h3 { color:var(--primary); margin-bottom:8px; }
.timeline-content p { color:var(--text-light); font-size:0.93rem; }

/* ===== FOOTER ===== */
.footer { background:var(--dark-bg); color:#ccc; padding:80px 0 0; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:40px; }
.footer-about img { height:50px; margin-bottom:16px; }
.footer-about p { font-size:0.9rem; opacity:0.8; margin-bottom:20px; }
.footer h4 { color:#fff; margin-bottom:20px; font-size:1.05rem; }
.footer ul li { margin-bottom:10px; }
.footer ul li a { color:#aaa; font-size:0.9rem; transition:var(--transition); }
.footer ul li a:hover { color:var(--accent); padding-left:5px; }
.footer-contact li { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; font-size:0.9rem; }
.footer-contact li i { color:var(--accent); margin-top:3px; }
.social-links { display:flex; gap:12px; margin-top:20px; }
.social-links a { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; color:#fff; transition:var(--transition); }
.social-links a:hover { background:var(--primary); transform:translateY(-3px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding:24px 0; text-align:center; font-size:0.85rem; opacity:0.7; }

/* ===== SCROLL TOP ===== */
.scroll-top { position:fixed; bottom:30px; right:30px; width:48px; height:48px; border-radius:50%; background:var(--primary); color:#fff; border:none; cursor:pointer; display:none; align-items:center; justify-content:center; font-size:1.2rem; z-index:999; box-shadow:var(--shadow-lg); transition:var(--transition); }
.scroll-top:hover { background:var(--primary-dark); transform:translateY(-3px); }
.scroll-top.visible { display:flex; }

/* ===== ANIMATIONS ===== */
.fade-in { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease,transform 0.6s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }
.fade-in-left { opacity:0; transform:translateX(-30px); transition:opacity 0.6s ease,transform 0.6s ease; }
.fade-in-left.visible { opacity:1; transform:translateX(0); }
.fade-in-right { opacity:0; transform:translateX(30px); transition:opacity 0.6s ease,transform 0.6s ease; }
.fade-in-right.visible { opacity:1; transform:translateX(0); }

/* ===== RESPONSIVE ===== */
@media(max-width:1024px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:20px; }
}
@media(max-width:900px) {
  .nav-links, .nav-cta { display:none; }
  .hamburger { display:flex; }
  .nav-links.active {
    display:flex; flex-direction:column; position:absolute;
    top:100%; left:0; right:0; background:#fff;
    padding:20px; box-shadow:var(--shadow-lg); gap:0;
  }
  .nav-links.active a { padding:14px 20px; border-bottom:1px solid var(--light-alt); width:100%; }
  .nav-cta.active { display:block; position:absolute; top:calc(100% + 280px); left:0; right:0; background:#fff; padding:10px 20px 20px; box-shadow:var(--shadow-lg); }
  .about-split, .grid-2 { grid-template-columns:1fr; gap:30px; }
  .hero { min-height:80vh; }
  .hero-stats { gap:24px; flex-wrap:wrap; }
  section { padding:60px 0; }
}
@media(max-width:768px) {
  .grid-3, .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .timeline::before { left:20px; }
  .timeline-item, .timeline-item:nth-child(even) { width:100%; margin-left:40px; justify-content:flex-start; }
  .form-row { grid-template-columns:1fr; }
  .top-bar-right { display:none; }
  .footer-grid { grid-template-columns:1fr; }
}
@media(max-width:480px) {
  .grid-3, .grid-4, .gallery-grid { grid-template-columns:1fr; }
  .hero-buttons { flex-direction:column; }
  .hero-stats { flex-direction:column; gap:16px; }
  .btn { padding:12px 24px; font-size:0.9rem; width:100%; justify-content:center; }
  .process-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr; }
  h1 { font-size:1.8rem; }
  h2 { font-size:1.5rem; }
}