/* ==========================================================
   Agriseeds Group — brand overrides on top of Orgaanic (hm6)
   Brand green from logo: #00A652 | dark green: #0B5A2E
   ========================================================== */
:root {
  --ag-green: #00A652;
  --ag-green-dark: #0B5A2E;
  --ag-green-deep: #06331B;
  --ag-yellow: #FFC726;
  --ag-cream: #F4F9F2;
  /* remap the template's hm6 palette to Agriseeds brand */
  --ztc-text-text-23: #0B5A2E;   /* hm6 deep green headings/buttons */
  --ztc-text-text-20: #00A652;   /* hm6 bright green accents */
  --ztc-text-text-28: #7ED957;   /* hm6 lime accent */
}

/* Logo sizing (old logo is a 222px square badge) */
.vl-logo img.site-logo { height: 64px; width: auto; }
.header-sticky .vl-logo img.site-logo { height: 52px; }
.vl-offcanvas-logo img { height: 56px; width: auto; }
.footer1-logo-area img.footer-logo { height: 70px; width: auto; }

/* Language switcher in the top bar */
.lang-switch { color:#fff; font-size:14px; font-weight:600; letter-spacing:.5px; }
.lang-switch a { color: rgba(255,255,255,.65); }
.lang-switch a.active, .lang-switch a:hover { color: var(--ag-yellow); }

/* WhatsApp click-to-chat floating button */
.whatsapp-float {
  position: fixed; right: 24px; bottom: 96px; z-index: 999;
  display: flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff; padding: 12px 18px 12px 14px;
  border-radius: 40px; font-weight: 600; font-size: 15px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2); text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float i { font-size: 26px; }
.whatsapp-float:hover { transform: translateY(-3px); color:#fff; box-shadow: 0 12px 28px rgba(0,0,0,.25); }
@media (max-width: 767px) { .whatsapp-float span { display:none; } .whatsapp-float { padding: 12px 14px; right: 16px; bottom: 84px; } }

/* Made in Rwanda badge */
.mir-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 2px solid var(--ag-green); color: var(--ag-green-dark);
  padding: 6px 14px; border-radius: 30px; font-weight: 700; font-size: 13px; letter-spacing: .5px; text-transform: uppercase;
}
.mir-badge .flag { width: 22px; height: 14px; border-radius: 2px; display:inline-block;
  background: linear-gradient(to bottom, #00A1DE 0 50%, #FAD201 50% 75%, #20603D 75% 100%); }

/* Generic helpers used across demo pages */
.ag-section-cream { background: var(--ag-cream); }
.ag-eyebrow { color: var(--ag-green); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; }
.ag-card { background:#fff; border-radius: 12px; padding: 32px 28px; box-shadow: 0 6px 24px rgba(11,90,46,.06); height: 100%; transition: transform .25s ease, box-shadow .25s ease; }
.ag-card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(11,90,46,.12); }
.ag-card .icon { width: 64px; height: 64px; border-radius: 14px; background: rgba(0,166,82,.1); color: var(--ag-green); display:flex; align-items:center; justify-content:center; font-size: 28px; margin-bottom: 20px; }
.ag-card h3 { font-size: 22px; margin-bottom: 12px; }
.ag-img-cover { width:100%; height:100%; object-fit: cover; border-radius: 12px; }
.ag-product-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px 12px 0 0; }
.ag-product-card { background:#fff; border-radius: 12px; overflow:hidden; box-shadow: 0 6px 24px rgba(11,90,46,.06); height:100%; }
.ag-product-card .body { padding: 22px 24px 26px; }
.ag-product-card .packs { font-size: 13px; color: var(--ag-green-dark); font-weight: 600; }
.ag-product-card .tag { display:inline-block; font-size: 11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color: var(--ag-green); background: rgba(0,166,82,.1); padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; }
.ag-stat h2 { color: var(--ag-green); font-size: 48px; font-weight: 800; }
.ag-gallery img { width:100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; transition: transform .3s ease; display:block; }
.ag-gallery a:hover img { transform: scale(1.04); }
.ag-cta { background: var(--ag-green-dark); color:#fff; border-radius: 20px; padding: 56px 48px; }
.ag-cta h2 { color:#fff; }
.ag-cta p { color: rgba(255,255,255,.8); }
.ag-testimonial { background:#fff; border-radius: 16px; padding: 36px 32px; box-shadow: 0 6px 24px rgba(11,90,46,.06); height:100%; }
.ag-testimonial .quote { font-size: 17px; line-height: 1.7; color:#334133; font-style: italic; }
.ag-testimonial .who { display:flex; align-items:center; gap: 14px; margin-top: 22px; }
.ag-testimonial .who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.ag-testimonial .who strong { display:block; color: var(--ag-green-dark); }
.ag-testimonial .who span { font-size: 13px; color:#5C6356; }
.ag-stars { color: var(--ag-yellow); margin-bottom: 14px; }
.ag-hero-inner { min-height: 380px; position: relative; }
.ag-hero-inner::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(6,51,27,.85), rgba(6,51,27,.35)); }
.ag-hero-inner .container { position: relative; z-index: 1; }
.ag-tab-nav .nav-link { border-radius: 30px; padding: 10px 22px; color: var(--ag-green-dark); font-weight: 600; border: 1px solid rgba(11,90,46,.2); margin: 4px; }
.ag-tab-nav .nav-link.active { background: var(--ag-green); color:#fff; border-color: var(--ag-green); }
.ag-form input, .ag-form select, .ag-form textarea { width:100%; border:1px solid #d9e5dc; border-radius: 8px; padding: 14px 16px; background:#fff; font-size: 15px; }
.ag-form input:focus, .ag-form select:focus, .ag-form textarea:focus { outline:none; border-color: var(--ag-green); box-shadow: 0 0 0 3px rgba(0,166,82,.12); }
.ag-form label { font-weight: 600; color: var(--ag-green-dark); margin-bottom: 6px; display:block; font-size: 14px; }
.ag-timeline { list-style:none; padding-left: 0; position: relative; }
.ag-timeline li { position: relative; padding-left: 44px; padding-bottom: 28px; }
.ag-timeline li::before { content: attr(data-step); position:absolute; left:0; top:0; width: 30px; height: 30px; border-radius: 50%; background: var(--ag-green); color:#fff; font-weight:700; font-size: 13px; display:flex; align-items:center; justify-content:center; }
.ag-timeline li::after { content:""; position:absolute; left: 14px; top: 32px; bottom: 0; width: 2px; background: rgba(0,166,82,.25); }
.ag-timeline li:last-child::after { display:none; }

/* Brand-green primary buttons (template default is lime) */
.btn-home6, .btn4-home6, .header6-btn a { background: var(--ag-green) !important; color: #fff !important; }
.btn-home6:hover, .btn4-home6:hover { background: var(--ag-green-dark) !important; color:#fff !important; }
.btn-home6 span, .btn4-home6 span { color:#fff !important; }
.vl-logo img.site-logo { height: 84px; }
.header-sticky .vl-logo img.site-logo { height: 60px; }

/* Home hero marquee: multi-word phrases must not wrap at 230px */
.hero6-bottom-text h2 { white-space: nowrap; font-size: 120px; line-height: 130px; }
.hero6-bg1 { padding-top: 200px; }
@media (max-width: 575px) { .hero6-bottom-text h2 { font-size: 48px; line-height: 56px; } }
html, body { overflow-x: hidden; }
.vl-logo img.site-logo { height: 84px !important; width: auto !important; max-width:none; }
.header-sticky .vl-logo img.site-logo { height: 60px !important; }

/* ===== CMS additions: news post page + shared button/link fallbacks ===== */
.ag-news-link { display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--ag-green-dark); }
.ag-news-link i { transition: transform .2s ease; }
.ag-news-link:hover { color:var(--ag-green); }
.ag-news-link:hover i { transform: translateX(4px); }
.ag-post-body p { margin-bottom: 20px; }
.ag-post-body h2, .ag-post-body h3 { margin: 28px 0 12px; color: var(--ag-green-dark); }
.ag-post-hero .ag-eyebrow { display:inline-block; }
/* Button fallbacks (pages define their own inline; these cover CMS-rendered pages) */
.ag-btn { display:inline-block; padding:14px 30px; border-radius:8px; font-weight:700; text-decoration:none; transition:all .2s ease; }
.ag-btn-primary { background:var(--ag-green); color:#fff; }
.ag-btn-primary:hover { background:var(--ag-green-dark); color:#fff; }