/* Global Design System & Aesthetics */

:root {
  --primary: #3a6a12;
  --primary-glow: rgba(58, 106, 18, 0.15);
  --glass: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.3);
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Floating Background Blobs */
.bg-blobs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  background: #fef8f6;
  pointer-events: none;
}

.blob {
  position: absolute;
  filter: blur(80px);
  border-radius: 50%;
  opacity: 0.4;
  animation: float 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
}

.blob-1 {
  width: 500px;
  height: 500px;
  background: #baf38b;
  top: -100px;
  right: -100px;
}

.blob-2 {
  width: 400px;
  height: 400px;
  background: #72aafe;
  bottom: -50px;
  left: -50px;
  animation-duration: 25s;
  animation-delay: -5s;
}

.blob-3 {
  width: 300px;
  height: 300px;
  background: #fbcfe8;
  top: 40%;
  left: 20%;
  animation-duration: 18s;
  animation-delay: -2s;
}

@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, 50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Enhanced Transitions */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Premium Card Hover */
.premium-card {
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.premium-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Glassmorphism Elements */
.glass-effect {
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
}

/* Text Selection */
::selection {
  background: var(--primary);
  color: white;
}

/* Magnetic Button Feel */
.btn-animate {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-animate:hover {
  transform: scale(1.05);
}

.btn-animate:active {
  transform: scale(0.95);
}
body {
  background: #ffffff !important;
}
.bg-blobs {
  display: none !important;
}
.bg-mesh {
  background-image: none !important;
  background-color: transparent !important;
}
#particles-canvas {
  display: none !important;
}
.bg-background {
  background-color: #ffffff !important;
}
html, body {
  overflow-x: hidden;
}
img, video {
  max-width: 100%;
  height: auto;
}
.bg-surface,
.bg-surface-bright,
.bg-surface-dim,
.bg-surface-variant,
.bg-surface-container-lowest,
.bg-surface-container-low,
.bg-surface-container,
.bg-surface-container-high,
.bg-surface-container-highest {
  background-color: #ffffff !important;
}
.bg-\[\#fef8f6\],
.bg-\[\#f8f2f0\],
.bg-\[\#f2edeb\],
.bg-\[\#ede7e5\],
.bg-\[\#e7e1df\] {
  background-color: #ffffff !important;
}
.bg-\[\#fef8f6\]\/80 {
  background-color: rgba(255, 255, 255, 0.8) !important;
}
footer {
  position: relative;
  background:
    radial-gradient(1200px 1200px at 20% -10%, rgba(186, 243, 139, 0.22), transparent 60%),
    radial-gradient(900px 900px at 110% 30%, rgba(109, 161, 68, 0.12), transparent 60%),
    linear-gradient(180deg, #f7faf7 0%, #ffffff 60%) !important;
  box-shadow: 0 -20px 40px rgba(58, 106, 18, 0.06);
  border-top: 1px solid rgba(115, 121, 106, 0.18);
  overflow: hidden;
}

/* Dynamic glowing border at the top of the footer */
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #baf38b, #3a6a12, transparent);
  background-size: 200% 100%;
  animation: shimmer 4s infinite linear;
  z-index: 10;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Beautiful hover transitions for footer links */
footer a {
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: 600 !important; /* Bold font for a striking look */
  color: rgba(29, 27, 26, 0.7); /* Deep gray for contrast */
}

/* The animated underline effect */
footer ul li a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #3a6a12;
  transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: 2px;
}

footer ul li a:hover {
  color: #3a6a12 !important;
  transform: translateX(4px);
}

footer ul li a:hover::after {
  width: 100%;
}

/* Footer Section Headers */
footer h6 {
  color: #3a6a12 !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem !important;
}

/* Add a subtle dot to headers */
footer h6::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #baf38b;
  box-shadow: 0 0 8px #6da144;
}

/* Social and Contact Icons */
footer .rounded-full {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

footer .rounded-full:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 10px 20px rgba(58, 106, 18, 0.2);
}

#mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background:
    radial-gradient(600px 600px at 20% -10%, rgba(186, 243, 139, 0.24), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.98) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(115, 121, 106, 0.18);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.06);
  z-index: 60;
}
#mobile-cta a {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 9999px;
  font-weight: 800;
  text-decoration: none;
  height: 48px;
}
#mobile-cta a.cta-primary {
  background: #3a6a12;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(58,106,18,0.25);
}
#mobile-cta a.cta-secondary {
  background: #ffffff;
  color: #3a6a12;
  border: 2px solid rgba(58,106,18,0.2);
}
#mobile-menu .mobile-cta-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0 8px;
}
#mobile-menu .mobile-pill {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 16px;
  border-radius: 9999px;
  font-weight: 800;
  color: #ffffff;
  background: #3a6a12;
  box-shadow: 0 10px 20px rgba(58,106,18,0.18);
  transition: transform 0.2s ease, filter 0.2s ease;
}
#mobile-menu .mobile-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
#mobile-menu.open {
  max-height: 80vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}
@media (min-width: 768px) {
  #mobile-cta { display: none !important; }
}
@media (max-width: 640px) {
  .text-7xl, .text-\[5rem\] { font-size: 2.25rem !important; line-height: 1.15; }
  .text-6xl { font-size: 2rem !important; line-height: 1.2; }
  .text-5xl { font-size: 1.75rem !important; line-height: 1.25; }
  .p-10 { padding: 1.25rem !important; }
  .px-10 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-32 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}