/* contact.css */
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap');

 :root {
   --green-primary: #2E8B57;
   --green-secondary: #3CB371;
   --green-light: #e6f7f2;
   --green-dark: #1e6b47;
   --neutral-light: #F8F9FA;
   --neutral-dark: #21a2529;
   --gray-medium: #cbd5e1;
   --gray-dark: #64748b;
 }

 body {
   background: #dcfce7;
   font-family: "Poppins", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   letter-spacing: 0.01em;
 }

 /* Header Styling */
 .header {
   background-color: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(10px);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
 }

 .header-solid {
   background-color: white;
 }

 .cta-sm {
   padding: 0.375rem 0.875rem;
   font-weight: 700;
   line-height: 1;
 }

 .cta {
   border-width: 4px;
   display: inline-flex;
   align-items: center;
   border-color: #14532d;
   border-radius: 10px;
   background: #22c55e;
   box-shadow: inset 4px 4px 0 #34d399, inset -4px -4px 0 #16a34a, 0 6px 0 #14532d, 0 10px 0 #00000022;
   transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, background-color 0.2s ease;
   color: #fff;
 }

 /* Contact Section */
 #contact {
   background: #dcfce7;
   border-top: none;
   position: relative;
   overflow: hidden;
   padding: 80px 0;
   flex-grow: 1;
 }


 #contact::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232E8B57' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   z-index: 0;
 }

 #contact>div {
   position: relative;
   z-index: 1;
 }

 /* Contact Info Card */
 #contact>div>div:first-child {
   background: white;
   border-radius: 16px;
   padding: 30px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
   border: 1px solid rgba(46, 139, 87, 0.1);
   position: relative;
   overflow: hidden;

 }

 #contact>div>div:first-child::after {
   content: '';
   position: absolute;
   bottom: -20px;
   right: -20px;
   width: 150px;
   height: 150px;
   background-color: #dcfce7;
   border-radius: 50%;
   z-index: -1;
   margin-bottom: 0;
   padding-bottom: 0;
 }

 #contact h2 {
   font-family: 'Montserrat', sans-serif;
   font-size: 2rem;
   font-weight: 700;
   color: var(--green-primary);
   margin-bottom: 16px;
   position: relative;
 }

 #contact h2::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: -8px;
   width: 60px;
   height: 3px;
   background-color: var(--green-secondary);
 }

 .main-content {
   flex-grow: 1;
 }

 button svg {
   color: #000;
 }

 #contact p {
   color: var(--gray-dark);
   line-height: 1.6;
   margin-bottom: 20px;
 }

 #contact .text-sm {
   margin-top: 24px;
 }

 #contact .text-sm p {
   display: flex;
   align-items: flex-start;
   margin-bottom: 12px;
 }

 #contact .text-sm strong {
   min-width: 100px;
   color: var(--neutral-dark);
   font-weight: 600;
 }

 #contact .text-sm a {
   color: var(--green-primary);
   text-decoration: none;
   font-weight: 600;
   transition: color 0.3s ease;
 }

 #contact .text-sm a:hover {
   color: var(--green-dark);
   text-decoration: underline;
 }

 /* Contact Form */
 #contact-form {
   background: white;
   border-radius: 16px;
   padding: 30px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
   border: 1px solid rgba(196, 237, 214, 0.1);
   position: relative;
   overflow: hidden;
 }

 #contact-form::before {
   content: '';
   position: absolute;
   top: -30px;
   right: -30px;
   width: 120px;
   height: 120px;
   background-color: var(--green-light);
   border-radius: 50%;
   z-index: 0;
 }

 #contact-form>* {
   position: relative;
   z-index: 1;
 }

 #contact-form input,
 #contact-form textarea {
   width: 100%;
   padding: 14px 16px;
   border: 1px solid var(--gray-medium);
   border-radius: 8px;
   font-size: 16px;
   transition: all 0.3s ease;
   background-color: var(--neutral-light);
 }

 #contact-form input:focus,
 #contact-form textarea:focus {
   outline: none;
   border-color: var(--green-secondary);
   box-shadow: 0 0 0 3px rgba(155, 207, 178, 0.2);
   background-color: white;
 }

 #contact-form button[type="submit"] {
   background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-secondary) 100%);
   color: white;
   font-weight: 600;
   padding: 14px 24px;
   border-radius: 8px;
   border: none;
   cursor: pointer;
   transition: all 0.3s ease;
   font-size: 16px;
   position: relative;
   overflow: hidden;
 }

 #contact-form button[type="submit"]:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 12px rgba(46, 139, 87, 0.3);
 }

 #contact-form button[type="submit"]:active {
   transform: translateY(0);
 }

 .overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.45);
 }

 .swiper-button-next,
 .swiper-button-prev {
   color: #fff;
 }

 .swiper-pagination-bullet {
   background: #fff;
   opacity: 0.6;
 }

 .swiper-pagination-bullet-active {
   background: #10b981;
 }

 .roll-wrap {
   position: relative;
   isolation: isolate;
   overflow: hidden;
 }

 .roll-wrap::before {
   content: "";
   position: absolute;
   inset: 0 0 auto 0;
   height: 36px;
   background: radial-gradient(120% 60% at 50% -40%,
       rgba(0, 0, 0, 0.18),
       transparent 60%),
     linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
   opacity: 0;
   transform: translateY(-20px);
   transition: opacity 0.8s ease 0.15s, transform 0.8s ease 0.15s;
   pointer-events: none;
   z-index: 1;
 }

 .roll-content {
   will-change: clip-path, transform, opacity;
   clip-path: inset(100% 0 0 0 round 28px);
   transform: translateY(12vh);
   opacity: 0;
   transition: clip-path 900ms cubic-bezier(0.22, 0.99, 0.14, 1),
     transform 900ms cubic-bezier(0.22, 0.99, 0.14, 1), opacity 600ms ease;
 }

 .roll-active .roll-content {
   clip-path: inset(0 0 0 0 round 0px);
   transform: translateY(0);
   opacity: 1;
 }

 .roll-active::before {
   opacity: 1;
   transform: translateY(0);
 }

 canvas {
   display: block;
 }


 /* Success Modal */
 #successModal {
   backdrop-filter: blur(5px);
 }

 #successModal>div {
   border-radius: 16px;
   padding: 32px;
   max-width: 400px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
   border: 1px solid rgba(46, 139, 87, 0.2);
   position: relative;
   overflow: hidden;
 }

 #successModal>div::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 5px;
   background: linear-gradient(90deg, var(--green-primary), var(--green-secondary));
 }

 #successModal h3 {
   font-family: 'Montserrat', sans-serif;
   font-size: 1.5rem;
   margin-bottom: 16px;
   color: var(--green-primary);
 }

 #successModal p {
   color: var(--gray-dark);
   line-height: 1.6;
   margin-bottom: 24px;
 }

 #successModal button {
   background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-secondary) 100%);
   color: white;
   font-weight: 600;
   padding: 10px 20px;
   border-radius: 8px;
   border: none;
   cursor: pointer;
   transition: all 0.3s ease;
 }

 #successModal button:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(46, 139, 87, 0.3);
 }


 /* Modal Styles */
 .modal {
   display: none;
   position: fixed;
   z-index: 999;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .modal-content {
   background: white;
   padding: 20px;
   border-radius: 12px;
   text-align: center;
   width: 300px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
   animation: fadeIn 0.3s ease-in-out;
 }

 .modal-content h2 {
   margin-top: 0;
   color: #333;
 }

 .btn {
   margin-top: 15px;
   padding: 8px 16px;
   background: #4CAF50;
   color: white;
   border: none;
   border-radius: 8px;
   cursor: pointer;
 }

 .btn:hover {
   background: #45a049;
 }

 /* Responsive Design */
 @media (max-width: 768px) {
   #contact {
     padding: 60px 0;
   }

   #contact h2 {
     font-size: 1.75rem;
   }

   #contact>div>div:first-child,
   #contact-form {
     padding: 24px;
   }
 }

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

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

 @keyframes modalFadeIn {
   from {
     opacity: 0;
     transform: scale(0.9);
   }

   to {
     opacity: 1;
     transform: scale(1);
   }
 }

 #contact>div>div:first-child,
 #contact-form {
   animation: fadeIn 0.6s ease-out forwards;
 }

 #contact-form {
   animation-delay: 0.2s;
 }


 /* chips */
 .chip {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.25rem 0.6rem;
   border-radius: 999px;
   background: #ecfdf5;
   color: #065f46;
   border: 1px solid hwb(152 65% 5%);
   font-size: 0.75rem;
 }

 /* CTA pixel */
 .pixel-btn {
   --p-bg: #22c55e;
   --p-light: #34d399;
   --p-dark: #16a34a;
   --p-border: #14532d;
   font-family: "Pixelify Sans", ui-monospace, monospace;
   display: inline-block;
   padding: 12px 20px;
   color: #fff;
   text-decoration: none;
   line-height: 1;
   background: var(--p-bg);
   border: 4px solid var(--p-border);
   border-radius: 0;
   image-rendering: pixelated;
   box-shadow: inset 4px 4px 0 var(--p-light),
     inset -4px -4px 0 var(--p-dark), 0 6px 0 var(--p-border),
     0 10px 0 #0002;
   transition: transform 50ms linear, box-shadow 50ms linear,
     filter 120ms ease;
 }

 .pixel-btn:hover {
   filter: brightness(1.03);
 }

 .pixel-btn:active {
   transform: translateY(6px);
   box-shadow: inset 3px 3px 0 var(--p-light),
     inset -3px -3px 0 var(--p-dark), 0 0 0 var(--p-border), 0 4px 0 #0002;
 }

 /* Counter shell & tiles (monokrom) */
 .counter-shell {
   background: #14532d;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }

 .stat-number {
   font-variation-settings: "wght" 800;
 }

 .counter-tile {
   position: relative;
   border-radius: 16px;
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.14);
   padding: 20px;
 }

 .counter-tile::before {
   content: none;
 }

 .wrap {
   position: relative;
   width: 200px;
   height: 200px;
 }