:root{ --brand:#F29E3A; /* orange accent */ --dark:#134E3A; /* deep green bar */ --text:#0f172a; /* slate-900 */ --muted:#64748b; /* slate-500 */ --bg:#ffffff; --soft:#e8faf3; --card:#ffffff; --shadow:0 12px 24px rgba(2, 6, 23, 0.08); } *{box-sizing:border-box} html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .container{max-width:1120px;margin:0 auto;padding:0 20px} /* Removed header, .nav, .brand, .brand-badge, .brand span, .navlinks, .navlinks a, .nav-cta */ /* Keep generic buttons used elsewhere */ .btn{ background:var(--brand);border:none;color:#111827;font-weight:700;padding:12px 18px;border-radius:14px;box-shadow:var(--shadow);cursor:pointer; } .btn:hover{filter:brightness(.95)} .icon-btn{background:#111827;color:#fff;border-radius:999px;width:44px;height:44px;border:none;display:grid;place-items:center;cursor:pointer} .hero{padding:56px 0 0; display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items:center} .hero h1{font-size:48px;line-height:1.1;margin:0 0 14px} .hero h1 .accent{color:var(--brand)} .hero p{color:var(--muted);max-width:48ch;margin:0 0 26px} .hero .cta{display:flex;gap:14px;flex-wrap:wrap} .hero-visual{ position:relative; } .hero-visual .leaf{ position:absolute;right:-14px;top:12px;background:transparent; } .hero-visual .fruit-ring{ position:absolute;right:-22px;bottom:-22px;width:120px;height:120px;border-radius:999px;border:10px solid #f59e0b22; box-shadow:inset 0 0 0 6px #f59e0b33; } .hero-img{ border-radius:22px;box-shadow:var(--shadow); } .newsletter{ margin-top:36px;background:var(--dark);color:#fff;padding:26px 0; } .newsletter .wrap{display:grid;grid-template-columns: 1fr 2fr;gap:18px;align-items:center} .newsletter h3{margin:0;font-size:22px} .form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px} .form input{ padding:12px 14px;border-radius:10px;border:none;outline:none; } .form button{border-radius:10px} .features{padding:56px 0} .features .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px} .card{ background:var(--card);border-radius:16px;padding:20px 18px;box-shadow:var(--shadow); } .card h4{margin:8px 0 10px} .card p{color:var(--muted);font-size:14px;line-height:1.5} .card a{font-weight:700;color:#0f766e} .products{background:#e9f8f3;padding:56px 0;border-radius:28px 28px 0 0} .products .head{display:flex;align-items:center;gap:18px;margin-bottom:22px} .products h2{margin:0} .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .product{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:12px} .product .thumb{background:#fff;border-radius:12px;overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center} .product .meta{padding:8px 6px} .price{font-weight:800;margin-top:6px} /* === Testimonials Section === */ .testimonials{padding:64px 0;background:#fff;position:relative} .testimonials h2{text-align:center;margin:0;font-size:32px} .testimonials h2 .accent{color:var(--brand)} .testimonials p.sub{color:var(--muted);text-align:center;margin:8px 0 32px} .testimonials .cards{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1120px;margin:0 auto; } .testimonial{ background:#fff;border-radius:16px;box-shadow:var(--shadow); padding:24px;display:flex;flex-direction:column;gap:16px } .testimonial .quote{font-size:40px;color:var(--brand);line-height:1} .testimonial p{color:var(--muted);font-size:15px;line-height:1.6;margin:0} .testimonial .author{display:flex;align-items:center;gap:12px} .testimonial .author img{width:48px;height:48px;border-radius:50%;object-fit:cover} .testimonial .author .info{font-size:14px} .testimonial .author .info strong{display:block;color:var(--text)} .testimonial .author .info small{color:var(--muted)} @media (max-width:960px){ .testimonials .cards{grid-template-columns:1fr} } /* === Testimonials (alt layout) === */ .testimonials{padding:56px 0; position:relative} .testimonials .head{ text-align:center; margin-bottom:22px} .testimonials .head h2{margin:0} .testimonials .head .accent{color:var(--brand)} .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .testi-card{ background:#fff;border-radius:16px;box-shadow:var(--shadow); padding:22px; position:relative; } .quote{font-size:28px; color:var(--brand); margin-bottom:8px} .testi-card p{color:var(--muted); line-height:1.7} .person{display:flex; align-items:center; gap:12px; margin-top:18px} .person img{width:48px; height:48px; border-radius:999px} .person .name{font-weight:800} .person .role{color:#94a3b8; font-size:12px} .dots{display:flex; justify-content:center; gap:8px; margin-top:16px} .dot{width:8px; height:8px; border-radius:999px; background:#e2e8f0; cursor:pointer} .dot.active{background:#111827} @media (max-width: 960px){ .testi-grid{grid-template-columns:1fr} } /* === Blog Section === */ .blogs{background:#e9f8f3;padding:56px 0;border-radius:28px} .blogs .head{text-align:center;margin-bottom:26px} .blogs .head h2{margin:0} .blogs .head .accent{color:var(--brand)} .blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .blog-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column} .blog-card img{width:100%;height:auto;display:block} .blog-card .meta{padding:14px} .blog-card .tags{font-size:12px;color:#0f766e;font-weight:700;margin-bottom:6px} .blog-card h4{margin:6px 0 12px;font-size:16px} .blog-card a{font-size:13px;font-weight:700;color:#0f766e} @media (max-width:960px){.blog-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.blog-grid{grid-template-columns:1fr}} /* === Blog Section (enhanced) === */ .blogs { background: #e9f8f3; padding: 56px 0; border-radius: 28px; } .blogs .head { text-align: center; margin-bottom: 26px; } .blogs .head h2 { margin: 0; font-size: 28px; } .blogs .head .accent { color: var(--brand); } .blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .blog-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; } .blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(2, 6, 23, 0.12); } .blog-card img { width: 100%; height: auto; display: block; } .blog-card .meta { padding: 14px; } .blog-card .tags { font-size: 12px; color: #0f766e; font-weight: 700; margin-bottom: 6px; } .blog-card h4 { margin: 6px 0 12px; font-size: 16px; font-weight: 700; color: var(--text); } .blog-card a { font-size: 13px; font-weight: 700; color: #0f766e; text-decoration: none; } .blog-card a:hover { text-decoration: underline; } /* Responsive */ @media (max-width: 960px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } } .hero-fullwidth { position: relative; width: 100vw; /* full viewport width */ left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; height: 100vh; /* or whatever height you prefer */ background: url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center center / cover no-repeat; display: flex; align-items: center; /* vertically center content */ /* optional: dark overlay for text readability */ } .hero-overlay { width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); /* dark overlay, adjust opacity */ display: flex; justify-content: center; align-items: center; } .hero-copy { color: white; /* so it stands out */ padding: 2rem; max-width: 600px; text-align: center; } .hero-copy h1, .hero-copy p { margin: 0.5rem 0; } .form input[type="email"], .form input[type="password"]
 { padding: 0.75rem 1rem; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; width: 100%; margin-bottom: 0.75rem; }