/* css/style.css */
/* ===== RESET & BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
  background: #f9fbf8;
  color: #1d2f1a;
  line-height: 1.5;
  scroll-behavior: smooth;
}
/* inter font via fallback */
h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; }
a { text-decoration: none; }

/* ===== NAVIGATION (scroll effect + hover animations) ===== */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 5%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 20px rgba(0, 40, 0, 0.05);
  z-index: 999;
  transition: background 0.3s ease, box-shadow 0.3s, padding 0.2s;
}
.navbar.scrolled {
  background: #1a3b2e;
  box-shadow: 0 6px 18px rgba(0, 20, 0, 0.2);
}
.navbar.scrolled .logo a,
.navbar.scrolled .nav-links a {
  color: #f2ffe6;
}
.logo a {
  font-size: 1.9rem;
  font-weight: 700;
  color: #2b5e2b;
  letter-spacing: -0.02em;
  transition: color 0.2s;
}
.navbar.scrolled .logo a { color: #ffffff; }

.nav-links {
  display: flex;
  gap: 2.4rem;
  align-items: center;
}
.nav-links a {
  font-weight: 550;
  font-size: 1.1rem;
  color: #1f3b1a;
  padding: 0.5rem 1rem;
  border-radius: 40px;
  transition: all 0.2s ease-in-out;
}
/* hover animations: background + slight scale */
.nav-links a:hover {
  background: #cde8cf;
  color: #0f2a0c;
  padding: 0.5rem 1rem;
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(60, 100, 30, 0.15);
}
.navbar.scrolled .nav-links a:hover {
  background: #ecfae9;
  color: #1a4a1a;
}
/* active page mimic */
.nav-links a.active {
  background: #d9f0d4;
  color: #0f3b0f;
}
.navbar.scrolled .nav-links a.active {
  background: #f1ffe4;
  color: #124d1a;
}

/* main spacer (fixed header) */
.spacer { height: 90px; }

/* ===== HERO SECTION (coming soon) ===== */
.hero {
  background: linear-gradient(115deg, #eaffea 0%, #d4e6d4 100%);
  padding: 4rem 5%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-radius: 0 0 3rem 3rem;
  margin-bottom: 2rem;
}
.hero-content {
  flex: 1 1 300px;
}
.hero-content .badge {
  background: #226622;
  color: white;
  padding: 0.3rem 1.2rem;
  border-radius: 40px;
  font-size: 0.9rem;
  display: inline-block;
  margin-bottom: 1.2rem;
}
.hero-content h1 {
  font-size: 3.6rem;
  line-height: 1.2;
  color: #1b4c1b;
}
.hero-content h1 span {
  color: #f5a65b;
  display: block;
  font-size: 2.8rem;
  font-weight: 400;
}
.hero-desc {
  font-size: 1.3rem;
  margin: 1.5rem 0 2rem;
  max-width: 550px;
}
.hero-stats {
  display: flex;
  gap: 2rem;
}
.stat-item h3 { font-size: 2rem; color: #2c6e2c; margin-bottom: -5px; }
.hero-image {
  flex: 1 1 300px;
  background: #b8d9b0;
  border-radius: 3rem 3rem 3rem 3rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 30px 30px -10px rgba(60, 80, 20, 0.3);
  background-image: url("dohamart.jpeg");
  background-size: cover;
  background-blend-mode: overlay;
  min-height: 250px;
}
.hero-image p {
  background: rgba(255,255,240,0.8);
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 60px;
  font-weight: 600;
  font-size: 1.4rem;
}

/* ===== SECTIONS GENERAL ===== */
.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 3rem 5%;
}
.section-title {
  font-size: 2.5rem;
  color: #1d441d;
  margin-bottom: 2.5rem;
  border-left: 8px solid #7fb07f;
  padding-left: 1.5rem;
}

/* about app grid */
.about-grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.about-card {
  background: white;
  padding: 2rem;
  border-radius: 2.5rem;
  flex: 1 1 250px;
  box-shadow: 0 10px 30px #e0f0e0;
  transition: all 0.2s;
}
.about-card i { font-size: 2.8rem; color: #4d8c4d; margin-bottom: 1rem; }
.about-card h3 { font-size: 1.6rem; }

/* features / what we offer */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 2rem;
}
.feature-item {
  background: #eaf4e5;
  border-radius: 2rem;
  padding: 2rem 1rem;
  text-align: center;
  font-weight: 600;
  font-size: 1.3rem;
  border: 1px solid #bcd0b2;
}

/* banner placeholder */
.banner-placeholder {
  background: #c5d6b5;
  background-image: url("salebanner.jpeg");
  border-radius: 2rem;
  padding: 4rem 2rem;
  text-align: center;
  font-size: 2rem;
  color: #2a4d23;
  border: 3px dashed #809c77;
  margin: 3rem 0;
}
.banner-placeholder span { background: white; padding: 0.5rem 2rem; border-radius: 40px; }

/* ===== TESTIMONIALS / FEEDBACK slider (click popup style) ===== */
.testimonials-section {
  background: #f2f9f0;
  border-radius: 3rem;
  padding: 3rem 2rem;
}
.testi-slider {
  display: flex;
  overflow-x: auto;
  gap: 2rem;
  padding: 1.5rem 0.5rem;
  scroll-snap-type: x mandatory;
}
.testi-card {
  min-width: 300px;
  background: white;
  border-radius: 2rem;
  padding: 1.8rem;
  scroll-snap-align: start;
  box-shadow: 0 8px 20px #ccddcc;
  cursor: pointer;
  transition: 0.2s;
  border: 2px solid transparent;
}
.testi-card:hover {
  border-color: #73a573;
  transform: translateY(-5px);
}
.testi-card .popup-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 1.2rem;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.testi-card .popup-trigger i { color: #3f8d3f; transition: 0.2s; }
.testi-card .feedback-answer {
  display: none;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 2px solid #c0ddc0;
  color: #2c4d2c;
}
.testi-card.expanded .feedback-answer {
  display: block;
}
.testi-card.expanded .popup-trigger i {
  transform: rotate(90deg);
}
.see-all-feedback {
  margin: 2rem 0 1rem;
  text-align: right;
}
.see-all-feedback a {
  background: #326b32;
  color: white;
  padding: 0.8rem 2.2rem;
  border-radius: 40px;
  font-weight: 600;
  display: inline-block;
  transition: 0.2s;
}
.see-all-feedback a:hover { background: #164d16; }

/* ===== FAQ (click to expand) ===== */
.faq-list {
  max-width: 900px;
  margin: 2rem 0;
}
.faq-item {
  background: white;
  border-radius: 1.8rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px #cbdccb;
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  font-weight: 600;
  font-size: 1.2rem;
  cursor: pointer;
}
.faq-question i { transition: 0.2s; color: #226622; }
.faq-answer {
  display: none;
  padding: 0 2rem 1.5rem 2rem;
  color: #2a4f2a;
}
.faq-item.expanded .faq-answer {
  display: block;
}
.faq-item.expanded .faq-question i {
  transform: rotate(45deg);
}

/* ===== CONTACT CTA ===== */
.contact-cta {
  background: #284f28;
  color: white;
  border-radius: 3rem;
  padding: 3rem;
  text-align: center;
  margin: 3rem 0;
}
.contact-cta h2 { font-size: 2.5rem; }
.contact-cta .button {
  background: #f9c38b;
  color: #1d3b1d;
  padding: 1rem 2.8rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.3rem;
  display: inline-block;
  margin-top: 1.5rem;
}

/* ===== FOOTER (with all legal links) ===== */
footer {
  background: #102310;
  color: #cfdec6;
  padding: 3rem 5% 2rem;
  border-radius: 3rem 3rem 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 2.5rem;
}
.footer-col p, .footer-col a {
  color: #d0e2c8;
  font-size: 0.95rem;
  line-height: 2;
}
.footer-col a:hover { color: white; }
.footer-col h4 { color: #b5d6a5; margin-bottom: 1rem; }
.footer-bottom {
  border-top: 1px solid #395239;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.legal-links a { color: #adcaa5; text-decoration: underline; }

/* ===== separate pages dummy content (just to show structure) ===== */
.page-dummy {
  background: #e2eedb;
  border-radius: 2rem;
  padding: 3rem;
  text-align: center;
  margin: 2rem 0;
}

/* responsiveness */
@media (max-width: 700px) {
  .navbar { flex-direction: column; gap: 0.8rem; }
  .nav-links { flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
  .hero-content h1 { font-size: 2.5rem; }
}