:root {
   /* Professional Palette Update */
   --primary-dark: #0a2a1a;
   /* Darker, richer green */
   --primary-light: #1b7551;
   /* Mature accent green */
   --background-cream: #fbf9f6;
   /* Softer, warmer cream */
   --accent-copper: #c18e5e;
   /* Sophisticated gold/ochre */
 }
/* Change selection color instead of disabling */
::selection {
  background: var(--primary-light); /* Your primary color */
  color: white;
  text-shadow: none;
}

::-moz-selection {
  background: #1f9d73; /* Your primary color */
  color: white;
  text-shadow: none;
}
 body {
   font-family: "Inter", sans-serif;
   scroll-behavior: smooth;
 }

 /* Backgrounds */
 .gradient-bg {
   background: linear-gradient(135deg,
       var(--background-cream) 0%,
       #e8f5e9 100%);
 }

 .hero-gradient {
   background: linear-gradient(135deg,
       var(--primary-dark) 0%,
       #1a4731 100%);
 }

 /* Dividers and Hover Effects */
 .section-divider {
   height: 1px;
   background: linear-gradient(90deg,
       transparent 0%,
       var(--primary-light) 50%,
       transparent 100%);
 }

 .card-hover {
   cursor: pointer;
   transition: all 0.3s ease;
 }

 .card-hover:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
   /* Slightly more prominent shadow */
 }

 .nav-link {
   position: relative;
   transition: all 0.3s ease;
 }

 .nav-link::after {
   content: "";
   position: absolute;
   bottom: -6px;
   left: 0;
   width: 0;
   height: 2px;
   background: #1b7551;
   transition: width 0.3s ease;
 }

 .nav-link:hover::after,
 .nav-link.active-nav::after {
   width: 100%;
 }

 .mobile-menu {
   position: fixed;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100vh;
   z-index: 1000;
   overflow-y: auto;

   transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .mobile-menu.open {
   left: 0;
 }

 .overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background: rgba(0, 0, 0, 0.077);
   z-index: 10;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
 }

 .overlay.open {
   opacity: 1;
   visibility: visible;
 }

 .mobile-nav-item {
   transition: all 0.3s ease;
 }

 .mobile-nav-item:hover {
   transform: translateX(8px);
 }

 /* Tailwind Customization */

 .fill-accent-copper {
   fill: var(--accent-copper);
 }

 .card-gradient-bg {
   background: linear-gradient(135deg,
       var(--primary-dark) 0%,
       var(--primary-light) 100%);
 }

 .faq-item {
   transition: all 0.3s ease;
 }

 .faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease-out;
 }

 .faq-item.active .faq-answer {
   max-height: 500px;
   transition: max-height 0.5s ease-in;
 }


 .faq-item.active .faq-icon {
   transform: scale(1.8), rotate(20deg);
 }

 .hidden-faq {
   display: none;
 }

 .show-faq .hidden-faq {
   display: block;
 }

 /*Contact Page*/

 /* Tabs */
 .tab-btn {
   border: 1px solid #e5e7eb;
   padding: 0.75rem 1.5rem;
   margin: 0 0.25rem;
 }

 .tab-btn[aria-selected="true"] {
   background: #0d3b2e;
   color: #fff;
   border-color: #0d3b2e;
 }

 /* Modal and Banner Styles */
 .modal-enter {
   opacity: 0;
   transform: scale(0.95);
 }

 .modal-enter-active {
   opacity: 1;
   transform: scale(1);
   transition: opacity 200ms ease-out, transform 200ms ease-out;
 }

 .banner-slide-down {
   animation: slideDown 0.3s ease-out;
 }

 @keyframes slideDown {
   from {
     transform: translate(-50%, -100%);
     opacity: 0;
   }

   to {
     transform: translate(-50%, 0);
     opacity: 1;
   }
 }


 /* Stepper */
 .step-dot {
   width: 26px;
   height: 26px;
   border-radius: 999px;
   display: grid;
   justify-content: center;
   place-items: center;
   font-weight: 700;
 }

 .step-active {
   text-align: center;
   background: rgba(31, 157, 115, 0.12);
   color: #0d3b2e;
   border: 2px solid #1f9d73;
 }

 .step-done {
   background: #1f9d73;
   color: #fff;
   border: 2px solid #1f9d73;
 }

 .step-next {
   background: #fff;
   color: #6b7280;
   border: 2px solid #e5e7eb;
 }

 /* Button spacing fixes */

 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.75rem 1.5rem;
   border-radius: 0.5rem;
   font-weight: 600;
   text-decoration: none;
   transition: all 0.2s ease;
   white-space: nowrap;
   min-height: 3rem;
 }

 .btn-primary {
   background: #0d3b2e;
   color: white;
   border: 1px solid #0d3b2e;
 }

 .btn-primary:hover {
   background: var(--primary-light);
   border-color: #1f9d73;
 }

 .btn-secondary {
   background: white;
   color: #0d3b2e;
   border: 1px solid #0d3b2e;
 }

 .btn-secondary:hover {
   background: var(--primary-dark);
   color: white;
 }

 .btn-full {
   width: 100%;
 }

 /* Form button spacing */
 .form-actions {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 1.5rem;
   padding-top: 1rem;
   gap: 1rem;
 }

 .form-actions .btn {
   flex: 0 0 auto;
 }

 .step-indicator {
   flex: 1;
   text-align: center;
   color: #6b7280;
   font-size: 0.875rem;
 }

 /* Validation Styles */
 .error-message {
   color: #dc2626;
   font-size: 0.75rem;
   margin-top: 0.25rem;
   display: block;
 }

 .error-field {
   border-color: #dc2626 !important;
   box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
 }

 .success-field {
   border-color: #16a34a !important;
 }

 /* Mobile responsive adjustments */
 @media (max-width: 640px) {
   .form-actions {
     flex-direction: column;
     gap: 0.75rem;
   }

   .form-actions .btn {
     width: 100%;
   }

   .step-indicator {
     order: -1;
   }

   .btn-container {
     flex-direction: column;
     align-items: center;
   }

   .btn-container .btn {
     width: 100%;
     max-width: 280px;
   }
 }

 @media (prefers-reduced-motion: reduce) {
   * {
     transition: none !important;
     animation: none !important;
   }
 }