*{
  font-family: sans-serif;
} 
 .hero-section {
     background: -webkit-gradient(linear, left top, left bottom, from(#F8CB46), to(#318616));
     color: white;
     padding: 100px 0;
     text-align: center;
 }

 .hero-section h1 {
     font-size: 2.8rem;
     font-weight: bold;
 }

 .hero-section p {
     font-size: 1.2rem;
     margin-top: 15px;
 }

 .hero-section .btn {
     margin: 10px;
     padding: 10px 25px;
     font-size: 1rem;
     border-radius: 30px;
 }

 .navbar-nav .nav-link {
     font-weight: 500;
 }

 @media (max-width: 768px) {
     .hero-section h1 {
         font-size: 2rem;
     }
 }

 .why-box {
     background-color: #ffffff;
     padding: 15px 20px;
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
     font-size: 1.05rem;
 }

 .why-box:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
     background-color: #fdfdfd;
 }

 .about-box {
     background-color: #f9f9f9;
     transition: all 0.3s ease;
 }

 .about-box:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 .step-box {
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
 }

 .step-box:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 .icon-box {
     font-size: 2.8rem;
     color: #28a745;
 }

 .state-box {
     background-color: #f0f8f5;
     color: #198754;
     border: 1px solid #d1e7dd;
     padding: 12px 30px;
     border-radius: 30px;
     font-weight: 600;
     transition: all 0.3s ease;
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
 }

 .state-box:hover {
     background-color: #198754;
     color: #fff;
     transform: translateY(-4px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }

 form input,
 form select {
     height: 50px;
     font-size: 1rem;
     border-radius: 8px;
 }

 form input:focus,
 form select:focus {
     border-color: #198754;
     box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
 }

 .zts-section .hover-shadow {
     transition: all 0.3s ease;
 }

 .zts-section .hover-shadow:hover {
     background-color: #e8f5e9;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }

 .animate-fade-in {
     animation: fadeIn 1s ease-in;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .breadcrumb-item+.breadcrumb-item::before {
     float: left;
     padding-right: var(--bs-breadcrumb-item-padding-x);
     color: #fff !important;
     content: var(--bs-breadcrumb-divider, "/");
 }

 .hover-box {
  transition: all 0.3s ease-in-out;
}
.hover-box:hover {
  background-color: #f1fdf7;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.animate-slide-up {
  animation: slideUp 0.8s ease forwards;
  opacity: 0;
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.benefit-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.benefit-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.animate-fade-in {
  animation: fadeInUp 0.8s ease both;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.expansion-box {
  transition: all 0.3s ease;
}
.expansion-box:hover {
  background-color: #fef3c7; /* light yellow */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
.faq-section .accordion-button {
  transition: all 0.3s ease;
  font-size: 1.1rem;
}

.faq-section .accordion-button:hover {
  background-color: #f2f2f2;
  color: #2c3e50;
}

.faq-section .accordion-body {
  background-color: #fff;
  border-top: 1px solid #ddd;
}
.store-form-section {
  position: relative;
  background: #f8f9fa;
}

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  background: #25d366;
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.whatsapp-float img {
  width: 48px;
  height: 48px;
}