/* ==============================
   Gayatri Chemicals – Custom CSS
   ============================== */

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f8f9fa;
  color: #2d2d2d;
}

/* ---- Brand colours ---- */
:root {
  --saffron: #e87722;
  --green: #1a6b3c;
  --green-dark: #124d2b;
  --light-green: #e8f5ee;
}

.bg-saffron   { background-color: var(--saffron) !important; }
.bg-green     { background-color: var(--green) !important; }
.text-saffron { color: var(--saffron) !important; }
.text-green   { color: var(--green) !important; }

.btn-saffron {
  background-color: var(--saffron);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.4rem 1rem;
  font-weight: 600;
  transition: background-color 0.2s;
}
.btn-saffron:hover { background-color: #c4621a; color: #fff; }

/* ---- Topbar ---- */
.topbar { font-size: 0.82rem; background-color: var(--saffron); }

/* ---- Navbar ---- */
.brand-icon { font-size: 1.5rem; }
.brand-text { font-size: 1.2rem; letter-spacing: 0.5px; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.85); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active { color: #fff; }

/* ---- Hero ---- */
.hero-section {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  color: #fff;
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.hero-section::after {
  content: '';
  position: absolute;
  right: -60px; bottom: -80px;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}
.hero-badge {
  background-color: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  display: inline-block;
  padding: 0.3rem 1rem;
  font-size: 0.85rem;
  margin-bottom: 1.2rem;
}
.hero-title { font-size: 2.6rem; font-weight: 700; line-height: 1.2; }
.hero-subtitle { font-size: 1.1rem; opacity: 0.9; }
.hero-stats { margin-top: 2.5rem; }
.stat-box {
  background: rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}
.stat-box .stat-num { font-size: 1.8rem; font-weight: 700; color: var(--saffron); }
.stat-box .stat-label { font-size: 0.8rem; opacity: 0.85; }

/* ---- Section headings ---- */
.section-tag {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--saffron);
}
.section-title { font-size: 1.9rem; font-weight: 700; color: #1a1a1a; }
.section-divider {
  width: 50px; height: 3px;
  background: var(--saffron);
  border-radius: 2px;
  margin: 0.8rem 0 1.5rem;
}

/* ---- Product cards ---- */
.product-card {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 1.5rem;
  height: 100%;
  transition: box-shadow 0.25s, transform 0.25s;
  background: #fff;
}
.product-card:hover { box-shadow: 0 6px 24px rgba(26,107,60,0.12); transform: translateY(-3px); }
.product-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--light-green);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--green);
  margin-bottom: 1rem;
}
.product-card h5 { color: var(--green); font-weight: 700; }

/* ---- Why Us ---- */
.why-section { background: var(--light-green); padding: 4rem 0; }
.why-item { padding: 1rem; }
.why-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
}

/* ---- About page ---- */
.about-hero {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  color: #fff; padding: 3.5rem 0;
}
.info-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 1.5rem;
  height: 100%;
}
.timeline-item { padding-left: 1.5rem; border-left: 3px solid var(--saffron); margin-bottom: 1.5rem; }

/* ---- Contact page ---- */
.contact-hero {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  color: #fff; padding: 3rem 0;
}
.contact-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  padding: 2rem;
}
.contact-info-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid #f0f0f0;
}
.contact-info-item:last-child { border-bottom: none; }
.contact-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--light-green); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.form-control:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 0.2rem rgba(26,107,60,0.15);
}
.alert-success-custom {
  background: var(--light-green); border: 1px solid var(--green);
  color: var(--green); border-radius: 8px; padding: 1rem;
}

/* ---- Footer ---- */
.footer-main { background-color: #1a1a1a; }
.footer-link { color: rgba(255,255,255,0.65); text-decoration: none; }
.footer-link:hover { color: var(--saffron); }

/* ---- Utilities ---- */
.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(26,107,60,0.35);
}
.bg-light-green { background-color: var(--light-green); }