/* css/style.css */

/* Brand colors if Tailwind isn't desired everywhere */
:root{
  --altex-green: #1EAD57;
  --altex-brown: #8B5E3C;
  --muted: #6B7280;
}

/* small global rules */
body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* Card hover effect used site-wide */
.card {
  transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s;
  will-change: transform;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(16,24,40,.12);
}

/* Fancy logo text (if you use text instead of image) */
.brand {
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--altex-green);
}

/* CTA button style fallback (works with plain CSS) */
.btn-primary {
  background: linear-gradient(90deg,var(--altex-green), #16a34a);
  color: white;
  padding: .65rem 1.1rem;
  border-radius: .6rem;
  display:inline-block;
  font-weight:600;
  box-shadow: 0 6px 18px rgba(30,173,87,.18);
  transition: transform .15s, box-shadow .15s;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(30,173,87,.22); }

/* Responsive hero */
.hero-sub {
  max-width: 76ch;
  margin: 0 auto;
}

/* Small utility for subtle fade-in when JS is enabled */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-in.visible { opacity: 1; transform: none; }

/* Footer */
.footer-link:hover { color: var(--altex-green); text-decoration: underline; }

/* Tiny responsive tweaks */
@media (max-width: 640px) {
  .hero-heading { font-size: 1.9rem; }
  .card-grid { gap: 1rem; }
}

/* style.css */
html {
  scroll-behavior: smooth;
}

.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.section-title {
  @apply text-4xl font-extrabold text-green-800 text-center mb-12;
}

.card {
  @apply bg-white rounded-2xl shadow-lg transition-transform transform hover:-translate-y-2 hover:shadow-2xl;
}