/* ==========================================================================
   EMTELLE BIO TECH - Premium Template Stylesheet
   Fonts: Inter & Outfit
   ========================================================================== */

:root {
  /* Colors inspired by the premium template */
  --primary-dark: #072314;   /* Deepest Green (Footer) */
  --primary-main: #0B3B24;   /* Main Brand Green */
  --primary-light: #155E3D;  
  --accent-lime: #10B981;    /* Bright Green (Icons, buttons) */
  --accent-lime-hover: #059669;
  --white: #FFFFFF;
  --gray-bg: #F4F7F6;        /* Soft gray for sections */
  --gray-light: #E2E8F0;
  --gray-text: #475569;
  --dark-text: #0F172A;
  
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Outfit', sans-serif;

  --transition: all 0.3s ease;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--dark-text); background-color: var(--white); line-height: 1.6; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.2; font-weight: 700; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

.container { max-width: 1650px; margin: 0 auto; padding: 0 2rem; }
.nav-container { max-width: 1750px; margin: 0 auto; padding: 0 1.5rem; } /* Made wider to push logos left */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.8rem 1.75rem; font-family: var(--font-heading); font-weight: 600;
  border-radius: 50px; transition: var(--transition); cursor: pointer;
  border: 2px solid transparent; gap: 0.5rem;
}
.btn-primary { background: var(--primary-dark); color: var(--white); }
.btn-primary:hover { background: var(--primary-light); }
.btn-primary.dark-green { background: var(--primary-main); }
.btn-primary.dark-green:hover { background: var(--primary-dark); }
.btn-secondary { background: transparent; color: var(--white); border-color: var(--white); }
.btn-secondary:hover { background: var(--white); color: var(--primary-main); }
.btn-secondary.bg-white { background: var(--white); color: var(--primary-main); border:none;}
.btn-secondary.bg-white:hover { background: var(--gray-light); }
.btn-outline { border-color: var(--primary-main); color: var(--primary-main); background: transparent; }
.btn-outline:hover { background: var(--primary-main); color: var(--white); }
.btn-white { background: var(--white); color: var(--primary-main); }
.btn-white:hover { background: var(--gray-bg); }

.round-btn { border-radius: 50px; }
.text-green { color: var(--accent-lime) !important; }

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.top-bar { background: var(--primary-dark); color: var(--white); padding: 0.5rem 0; font-size: 0.85rem; }
.top-bar-container { display: flex; justify-content: space-between; align-items: center; }
.top-contact { display: flex; gap: 1.5rem; }
.top-contact i { color: var(--accent-lime); margin-right: 0.25rem; }
.top-socials { display: flex; gap: 1rem; align-items: center; }
.top-socials a:hover { color: var(--accent-lime); }
.lang-toggle { margin-left: 1rem; border-left: 1px solid rgba(255,255,255,0.2); padding-left: 1rem; cursor: pointer; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar { background: var(--primary-main); box-shadow: 0 4px 20px rgba(0,0,0,0.15); padding: 0.75rem 0; position: sticky; top: 0; z-index: 1000; border-bottom: 2px solid var(--accent-lime); }
.navbar .nav-container { display: flex; justify-content: space-between; align-items: center; }
.dual-brand { display: flex; gap: 1rem; align-items: center; }
.brand-logo { height: 95px; object-fit: contain; filter: brightness(1.2); mix-blend-mode: screen; }

.nav-links { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; }
.nav-link { font-size: 0.95rem; font-weight: 600; color: var(--white); opacity: 0.9; transition: var(--transition); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.nav-link:hover, .nav-link.active { color: var(--accent-lime); opacity: 1; }
.btn-whatsapp-header { background: var(--white); color: var(--primary-main); padding: 0.6rem 1.2rem; font-size: 0.95rem; box-shadow: 0 4px 12px rgba(0,0,0,0.2); white-space: nowrap; }
.btn-whatsapp-header:hover { background: var(--accent-lime); color: var(--white); }

.nav-dropdown { position: relative; }
.dropdown-menu { position: absolute; top: 100%; left: 0; background: var(--white); box-shadow: 0 10px 30px rgba(0,0,0,0.15); border-radius: var(--radius-sm); list-style: none; min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition); padding: 1rem 0; border-top: 3px solid var(--accent-lime); }
.nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu a { display: block; padding: 0.75rem 1.5rem; font-size: 0.9rem; font-weight: 600; color: var(--dark-text); }
.dropdown-menu a:hover { background: var(--gray-bg); color: var(--primary-main); padding-left: 2rem; }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.hamburger span { width: 25px; height: 2px; background: var(--white); transition: 0.3s; }

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section { position: relative; min-height: 85vh; display: flex; align-items: center; color: var(--white); overflow: hidden; padding-bottom: 50px; }
.hero-bg-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; z-index: 0; transition: opacity 0.5s; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,35,20,0.95) 0%, rgba(7,35,20,0.7) 40%, rgba(7,35,20,0.2) 100%); z-index: 1; }
.hero-container { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; width: 100%; }

.hero-content { max-width: 650px; }
.hero-subtitle { font-family: var(--font-heading); font-weight: 700; letter-spacing: 2px; color: var(--accent-lime); margin-bottom: 1rem; display: block; text-transform: uppercase; }
.hero-title { font-size: 4.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; }
.hero-desc { font-size: 1.2rem; font-weight: 400; opacity: 0.9; margin-bottom: 2.5rem; line-height: 1.7; }
.hero-actions { display: flex; gap: 1rem; }

.hero-floating-quote { background: rgba(16, 185, 129, 0.9); padding: 2rem; border-radius: var(--radius-lg) 0 var(--radius-lg) 0; backdrop-filter: blur(10px); }
.hero-floating-quote h2 { font-size: 2rem; font-weight: 700; line-height: 1.4; color: var(--white); margin:0; }

/* Hero Badges */
.hero-badges-wrapper { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 3; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%); padding-bottom: 2rem; }
.hero-badges { display: flex; gap: 2rem; }
.badge-item { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; font-size: 1.1rem; }
.badge-item i { background: var(--white); color: var(--primary-main); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

/* ==========================================================================
   STATS BANNER
   ========================================================================== */
.stats-banner { background: var(--gray-bg); padding: 2rem 0; border-bottom: 1px solid var(--gray-light); }
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 1rem; }
.stat-item { display: flex; align-items: center; gap: 1rem; border-right: 1px solid #cbd5e1; padding-right: 1rem; }
.stat-item.no-border { border-right: none; padding-right: 0; }
.stat-item i { font-size: 2rem; color: var(--primary-main); }
.stat-item strong { display: block; font-size: 1.5rem; font-family: var(--font-heading); color: var(--dark-text); line-height: 1; }
.stat-item p { margin: 0; font-size: 0.9rem; color: var(--gray-text); font-weight: 500; }
.stat-highlight { color: var(--primary-main); font-weight: 700; font-size: 0.95rem; line-height: 1.4; text-align: left; }

/* ==========================================================================
   SECTIONS & TYPOGRAPHY
   ========================================================================== */
.section { padding: 80px 0; position: relative; }
.section-light { background: var(--white); }

/* Premium Smooth Gradients (No heavy textures) */
.bg-gray { 
  background: linear-gradient(135deg, #FAFAFA 0%, #F0F5F2 100%);
}

.stats-banner { 
  background: linear-gradient(to right, #ffffff, #F2FBF6); 
  padding: 3rem 0; 
  border-bottom: 1px solid rgba(16, 185, 129, 0.15); 
  box-shadow: inset 0 -4px 20px rgba(0,0,0,0.02);
}
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 1rem; }
.section-title { font-size: 2.75rem; font-weight: 800; margin-bottom: 1rem; color: var(--dark-text); line-height: 1.2; }
.section-header-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; }
.header-right { max-width: 500px; text-align: right; }
.header-right p { color: var(--gray-text); margin-bottom: 1rem; }

/* ==========================================================================
   PRODUCTS (Template Cards)
   ========================================================================== */
.template-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.tpl-card { border-radius: var(--radius-md); padding: 2rem; display: flex; flex-direction: column; transition: var(--transition); cursor: pointer; position: relative; overflow: hidden; }
.tpl-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }

.card-light { background: linear-gradient(145deg, #ffffff 0%, #F1F6F0 100%); border: 1px solid #E2E8DF; }
.card-green-light { background: linear-gradient(145deg, #ffffff 0%, #E9F3ED 100%); border: 1px solid #D1E5DA; }
.card-dark { background: linear-gradient(145deg, var(--primary-main) 0%, var(--primary-dark) 100%); color: var(--white); border: 1px solid var(--primary-dark); }
.card-tan { background: linear-gradient(145deg, #ffffff 0%, #F3ECE1 100%); border: 1px solid #E6D9C8; }

.tpl-img-box { flex: 1; min-height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.img-placeholder { font-family: var(--font-heading); font-weight: 600; opacity: 0.4; text-align: center; }
.tpl-info h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.tpl-info p { font-size: 0.9rem; opacity: 0.8; margin-bottom: 1rem; }
.arrow-btn { position: absolute; bottom: 2rem; right: 2rem; width: 40px; height: 40px; background: var(--primary-main); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.tpl-card:hover .arrow-btn { background: var(--accent-lime); }

/* ==========================================================================
   ABOUT (3-Column Layout)
   ========================================================================== */
.about-template-grid { display: grid; grid-template-columns: 1fr 1.2fr 0.8fr; gap: 2rem; }
.facility-card, .soil-card { border-radius: var(--radius-md); overflow: hidden; position: relative; }
.facility-bg { height: 100%; min-height: 400px; position: relative; }
.facility-brand { position: absolute; top: 20px; left: 20px; height: 40px; z-index: 3; background: white; padding:5px; border-radius: 4px; }
.play-btn { position: absolute; bottom: 30px; left: 30px; z-index: 3; color: var(--white); font-weight: 600; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.play-btn i { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--white); display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.play-btn:hover i { background: var(--white); color: var(--primary-main); }

.about-core { padding: 2rem 1rem; }
.about-desc { font-size: 1.1rem; color: var(--gray-text); margin-bottom: 2rem; }
.core-icon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
.c-icon { display: flex; align-items: center; gap: 1rem; }
.c-icon i { font-size: 1.5rem; color: var(--accent-lime); width: 40px; }
.c-icon span { font-weight: 600; font-size: 0.95rem; line-height: 1.3; }

.soil-card { background: url('images/1.JPG') center/cover; }
.soil-bg { height: 70%; min-height: 300px; background: rgba(0,0,0,0.1); }
.soil-text { padding: 2rem; background: var(--gray-bg); height: 30%; }
.soil-text h3 { font-size: 1.8rem; margin-bottom: 0.5rem; }

/* Philosophy Background override from older tasks */
.philosophy-bg { background: url('images/2.JPG') center/cover no-repeat; } /* Adjusted to use a facility-like photo if available */
.philosophy-overlay { position: absolute; inset: 0; background: rgba(10, 28, 16, 0.4); z-index: 1; }

/* ==========================================================================
   FARMER RESULTS
   ========================================================================== */
.farmer-header { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: center; }
.testimonial-carousel { display: flex; gap: 1.5rem; overflow-x: auto; padding-bottom: 1rem; }
.test-tpl-card { min-width: 300px; background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid var(--gray-light); }
.t-img { height: 160px; background: var(--gray-bg); display: flex; align-items: center; justify-content: center; }
.t-content { padding: 1.5rem; position: relative; }
.quote-icon { position: absolute; top: 1.5rem; left: 1.5rem; font-size: 1.5rem; color: var(--accent-lime); opacity: 0.2; }
.t-quote { font-weight: 600; font-size: 1.05rem; margin-bottom: 1rem; text-indent: 2rem; }
.t-name { color: var(--primary-main); font-size: 1rem; margin-bottom: 0.2rem; }
.t-loc { font-size: 0.85rem; color: var(--gray-text); display: block; margin-bottom: 1rem; }
.stars { color: #F59E0B; font-size: 0.85rem; display: flex; gap: 2px; }

/* ==========================================================================
   PRE-FOOTER ACTION GRID
   ========================================================================== */
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.action-card { border-radius: var(--radius-md); padding: 3rem; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 250px; }
.dark-green-bg { background: linear-gradient(145deg, var(--primary-main) 0%, var(--primary-dark) 100%); color: var(--white); }
.gray-bg { background: linear-gradient(145deg, #ffffff 0%, #F0F5F2 100%); border: 1px solid var(--gray-light); }
.lime-bg { background: linear-gradient(145deg, var(--accent-lime) 0%, #059669 100%); color: var(--white); }

.ac-icon { font-size: 3rem; margin-bottom: 1.5rem; opacity: 0.8; }
.action-card h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.action-card p { font-size: 0.95rem; opacity: 0.9; }
.ac-img { height: 100px; background: rgba(0,0,0,0.05); margin-top: 1.5rem; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }

/* ==========================================================================
   FOOTER TEMPLATE STYLE
   ========================================================================== */
.footer-tpl { background: var(--primary-dark); color: var(--white); padding: 4rem 0 0 0; }
.footer-tpl-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr 1fr; gap: 2rem; margin-bottom: 3rem; }
.footer-logos { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 1.5rem; align-items: center; width: max-content; }
.footer-logos img { height: 80px; object-fit: contain; filter: brightness(1.2); mix-blend-mode: screen; }
.f-brand p { font-size: 0.9rem; opacity: 0.7; }

.footer-tpl h4 { font-size: 1.1rem; margin-bottom: 1.5rem; color: var(--white); }
.f-links ul { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; }
.f-links a { color: rgba(255,255,255,0.7); font-size: 0.9rem; transition: var(--transition); }
.f-links a:hover { color: var(--accent-lime); padding-left: 5px; }

.f-contact p { color: rgba(255,255,255,0.7); font-size: 0.9rem; margin-bottom: 1rem; display: flex; gap: 0.75rem; align-items: flex-start; }
.f-contact i { color: var(--accent-lime); margin-top: 4px; }

.social-icons { display: flex; gap: 1rem; }
.social-icons a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.social-icons a:hover { background: var(--accent-lime); }
.f-seal { display: flex; align-items: flex-start; gap: 0.75rem; }
.f-seal i { font-size: 1.5rem; }
.text-lime { color: var(--accent-lime); }
.f-seal p { font-size: 0.85rem; font-weight: 600; line-height: 1.4; color: rgba(255,255,255,0.8); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 1.5rem 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: rgba(255,255,255,0.5); }
.fb-links a { color: rgba(255,255,255,0.5); transition: var(--transition); }
.fb-links a:hover { color: var(--white); }

/* ==========================================================================
   PRODUCTS PAGE SPECIFICS
   ========================================================================== */
.page-products { background: var(--gray-bg); }
.products-header { padding: 160px 0 60px; background: var(--primary-main); color: var(--white); }
.page-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 1rem; }
.page-subtitle { font-size: 1.2rem; color: rgba(255,255,255,0.8); max-width: 600px; margin: 0 auto; }
.product-nav { background: var(--white); border-bottom: 1px solid var(--gray-light); position: sticky; top: 66px; z-index: 900; }
.cat-filter { display: flex; justify-content: center; gap: 2rem; padding: 1rem 0; overflow-x: auto; }
.filter-btn { font-family: var(--font-heading); font-weight: 600; color: var(--gray-text); font-size: 0.95rem; white-space: nowrap; padding: 0.5rem 0; border-bottom: 2px solid transparent; transition: var(--transition); }
.filter-btn:hover, .filter-btn.active { color: var(--primary-main); border-color: var(--accent-lime); }

.products-main { padding: 60px 0; }
.product-category-section { margin-bottom: 80px; padding-top: 100px; margin-top: -100px; }
.category-title-wrap { margin-bottom: 3rem; border-bottom: 2px solid var(--gray-light); padding-bottom: 1rem; }
.category-title-wrap h2 { font-size: 2rem; color: var(--primary-main); margin-bottom: 0.5rem; }
.product-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; }
.prod-card { background: var(--white); border: 1px solid var(--gray-light); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.03); transition: var(--transition); display: flex; flex-direction: column; }
.prod-card:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); border-color: rgba(16, 185, 129, 0.3); }
.prod-img-box { aspect-ratio: 4/3; background: var(--gray-bg); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.prod-img-box img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.prod-info { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.prod-info h3 { font-size: 1.25rem; color: var(--dark-text); margin-bottom: 0.5rem; }
.marathi-name { font-size: 0.95rem; color: var(--gray-text); font-weight: 500; }
.prod-desc { font-size: 0.9rem; color: var(--primary-main); font-weight: 600; margin-bottom: 1rem; }
.prod-details { font-size: 0.85rem; color: var(--gray-text); margin-bottom: 1.5rem; flex: 1; }
.prod-details p { margin-bottom: 0.5rem; }
.prod-details strong { color: var(--dark-text); }

/* Responsive adjustments */
@media (max-width: 1200px) {
  .hero-title { font-size: 4rem; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .stat-item:nth-child(3) { border-right: none; padding-right: 0; }
  .template-product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .hero-title { font-size: 3.2rem; }
  .hero-badges-wrapper { display: none; } /* Hide badges on tablet to save space */
  .about-template-grid { grid-template-columns: 1fr; gap: 3rem; }
  .facility-bg { min-height: 300px; }
  .soil-card { display: none; } /* Hide right soil image on mobile to save scroll depth */
  .farmer-header { grid-template-columns: 1fr; gap: 2rem; }
  .action-grid { grid-template-columns: 1fr; }
  .footer-tpl-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
}

@media (max-width: 768px) {
  .container { padding: 0 1.2rem; }
  .nav-container { padding: 0 1.2rem; }
  .section { padding: 50px 0; }
  .section-title { font-size: 2rem; }
  
  .top-bar { display: none; }
  .brand-logo { height: 45px; } /* Shrink massive logos for mobile header */
  .dual-brand { gap: 0.5rem; }
  
  .nav-links { position: fixed; top: 66px; left: -100%; width: 100%; height: calc(100vh - 66px); background: var(--primary-main); flex-direction: column; align-items: center; padding-top: 3rem; transition: var(--transition); border-top: 1px solid rgba(255,255,255,0.1); }
  .nav-links.open { left: 0; }
  .nav-link { color: var(--white); font-size: 1.2rem; margin-bottom: 1rem; }
  .hamburger { display: flex; }
  
  .hero-title { font-size: 2.2rem; }
  .hero-desc { font-size: 1rem; margin-bottom: 1.5rem; }
  .hero-actions { flex-direction: column; width: 100%; }
  .btn { width: 100%; }
  .hero-floating-quote { display: none; }
  
  .section-header-row { flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; }
  .header-right { text-align: left; max-width: 100%; }
  
  .stats-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .stat-item { border-right: none; padding-right: 0; text-align: center; flex-direction: column; }
  .stat-highlight { text-align: center; }
  
  .template-product-grid { grid-template-columns: 1fr; }
  
  .products-header { padding: 120px 0 40px; }
  .page-title { font-size: 2.5rem; }
  .product-category-section { padding-top: 80px; margin-top: -80px; margin-bottom: 50px; }
  
  .footer-tpl-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-logos { justify-content: center; }
  .f-contact p { justify-content: center; }
  .f-seal { justify-content: center; }
  .social-icons { justify-content: center; margin-bottom: 1.5rem; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 1.8rem; }
  .page-title { font-size: 2rem; }
  .section-title { font-size: 1.8rem; }
  .btn { padding: 0.7rem 1.25rem; font-size: 0.9rem; }
}

/* ==========================================================================
   CROP GUIDANCE HUB
   ========================================================================== */
.crop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }
.crop-card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: var(--transition); text-align: center; border: 1px solid var(--gray-light); display: block; }
.crop-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); border-color: var(--accent-lime); }
.crop-icon-box { height: 180px; background: linear-gradient(145deg, #F0F5F2 0%, #E2E8DF 100%); display: flex; align-items: center; justify-content: center; font-size: 5rem; color: var(--primary-main); }
.crop-card h3 { padding: 1.5rem; font-size: 1.5rem; color: var(--dark-text); margin: 0; }
.crop-card h3 span { display: block; font-size: 0.9rem; color: var(--gray-text); font-weight: 500; margin-top: 0.2rem; }

/* ==========================================================================
   TIMELINE (BANANA SCHEDULE)
   ========================================================================== */
.timeline { position: relative; max-width: 900px; margin: 3rem auto; padding-left: 2rem; border-left: 3px solid var(--accent-lime); }
.timeline-item { position: relative; margin-bottom: 3rem; padding: 2rem; background: var(--white); border-radius: var(--radius-md); box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid var(--gray-light); }
.timeline-item::before { content: ''; position: absolute; left: -2.7rem; top: 2.5rem; width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 4px solid var(--accent-lime); z-index: 1; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2); }
.time-badge { display: inline-block; background: var(--primary-main); color: var(--white); padding: 0.4rem 1rem; border-radius: 50px; font-weight: 600; font-size: 0.9rem; margin-bottom: 1rem; }
.timeline-item h3 { font-size: 1.5rem; color: var(--dark-text); margin-bottom: 1rem; }
.stage-details { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.detail-box { background: var(--gray-bg); padding: 1rem; border-radius: var(--radius-sm); border-left: 4px solid #cbd5e1; }
.detail-box h4 { font-size: 0.95rem; margin-bottom: 0.3rem; color: var(--dark-text); display: flex; align-items: center; gap: 0.5rem; }
.detail-box p { margin: 0; font-size: 0.9rem; color: var(--gray-text); }
.detail-box.action { border-left-color: #3b82f6; }
.detail-box.action h4 i { color: #3b82f6; }
.detail-box.nutrition { border-left-color: #f59e0b; }
.detail-box.nutrition h4 i { color: #f59e0b; }
.detail-box.issue { border-left-color: #ef4444; }
.detail-box.issue h4 i { color: #ef4444; }
.emtelle-recommendation { background: linear-gradient(145deg, #F2FBF6 0%, #E9F3ED 100%); padding: 1.5rem; border-radius: var(--radius-sm); border: 1px solid var(--accent-lime); display: flex; flex-direction: column; gap: 1rem; }
.emtelle-recommendation h4 { color: var(--primary-main); font-size: 1.1rem; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.rec-products { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.prod-pill { background: var(--white); padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; color: var(--primary-main); border: 1px solid #D1E5DA; text-decoration: none; transition: var(--transition); }
.prod-pill:hover { background: var(--primary-main); color: var(--white); }

@media (max-width: 768px) {
  .timeline { padding-left: 1.5rem; margin: 2rem 0; }
  .timeline-item { padding: 1.5rem; }
  .timeline-item::before { left: -2.1rem; top: 1.5rem; }
}