* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

   body {
     font-family: 'Georgia', serif;
     scroll-behavior: smooth;
   }
   

   .fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease forwards;
}

.fade-in.delay-1 {
  animation-delay: 0.3s;
}
.fade-in.delay-2 {
  animation-delay: 0.6s;
}
.fade-in.delay-3 {
  animation-delay: 0.9s;
}

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

.button-with-icon {
  display: inline-flex;           /* Uncommented: aligns items in a row */
  align-items: center;
  gap: 10px;                      /* Adds spacing between text and icon */
  padding: 10px 10px;             /* More button space for better UI */
  background: #4B5F12;
  color: #fff;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.3s ease;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
      margin: 0px 311px;
}

.button-with-icon:hover {
  background: #3c4d0f;           /* Slightly darker on hover */
}

.svg-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.4s ease;
}

.button-with-icon:hover .svg-icon {
  animation: bounceUpDown 0.6s ease;
}

@keyframes bounceUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}




   /* /////////////////////////////////////// Nav //////////////////////////////////////////////////  */

   nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px 60px;
     background-color: white;

   }


   .logo {
     font-size: 24px;
     font-weight: bold;
   }

   .glass-navbar {
     position: fixed;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
     background: rgba(255, 255, 255, 0.3);
     /* semi-transparent */
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 50px;
     padding: 20px 30px;
     z-index: 1000;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   }

   .nav-links {
     display: flex;
     gap: 30px;
     list-style: none;

   }

   .nav-links a {
     text-decoration: none;
     color: black;
     font-weight: 500;
     transition: color 0.3s ease;

   }

   .nav-links a:hover {
     color: #5FA4E6;
   }

   .btn {
     background-color: #4B5F12;
     color: white;
     padding: 12px 24px;
     border: none;
     border-radius: 30px;
     font-weight: bold;
     cursor: pointer;
     transition: background-color 0.3s ease, transform 0.3s ease;
   }

   .btn:hover {
     background-color: #3a4b0e;
     transform: scale(1.05);
   }

   /* //////////////////////////////////////////////////////////////////////////////////////////////// */
   .hero {
     padding: 60px;
     text-align: center;

   }

   .hero h1 {
     font-size: 9rem;
     font-weight: 500;
     letter-spacing: -2px;
     padding-bottom: 20px;
     margin-left: -99px;
   }

   .section {
     background-color: #96a483;
     border-radius: 40px;
     padding: 60px 0;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
   }

   .mockup {
     background-color: white;
     border-radius: 30px;
     box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
     width: 90%;
     max-width: 1000px;
     overflow: hidden;
     position: relative;
     border: 12px solid black;
     /* simulating tablet border */
     margin-left: 174px;
     margin-bottom: -594px;
   }

   .mockup img {
     width: 100%;
     display: block;
     opacity: 40px;
   }

   .solid-bg {
     border: 176px solid #3a4b0e;
     border-radius: 20px;
     margin-top: 247px;
   }

   .section-featured {
     padding: 6.8rem 0 6.2rem 0
   }

   .word {
     margin-top: -199px;
   }

   .heading-featured-in {
     font-size: 15px;
     filter: brightness(0);
     opacity: 50%;
     padding: 81px;
     padding-bottom: 84px;

   }

   .logos {
     display: flex;
     /* justify-content: space-between; */
     gap: 20px 119px;
     justify-content: center;
     box-sizing: border-box;

   }

   .logos img {
     height: 25px;
     filter: brightness(0);
     opacity: 50%;
   }

   /* //////////////////////////////////////////////////////////////////////////////////////////// */
   h1 {
     font-size: 61px;
     padding-left: 78px;

   }

   .para {
     margin-left: 41px;
     padding: 50px;
   }



   #service {
     padding: 30px 0;

   }

   .services-list {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-gap: 40px;
     margin-top: -24px;
     margin-left: 41px;
   }

   .services-list div {
     padding: 40px;
     font-size: 13px;
     font-weight: 300;
     border-radius: 10px;
     transition: background 0.5s, tansform 0.5s;

   }

   .services-list div i {
     font-size: 25px;
     margin-bottom: 30px;
   }

   .services-list div h2 {
     font-size: 16px;
     font-weight: 500;
     margin-bottom: 15px;
   }

   .services-list div a {
     text-decoration: none;
     color: #fff;
     font-size: 12px;
     margin-top: 20px;
     display: inline-block;
   }

   /* .services-list div:hover {
    background-color: #ff004f;
    transform: translateY(-10px);
} */

   #img-2 {
     padding: 6.8rem 0 6.2rem 0;
   }

   .secimg {
     border-radius: 35px;
     height: 100vh;
     margin: 37px;
     margin-top: -21px;
     width: 94vw;
   }







   /* ///////////////////////////////////////////////// */
   .big-picture-section {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     padding: 60px;
     gap: 40px;
     background-color: #fdfdfc;
     flex-wrap: wrap;
     margin-bottom: 100px;

   }

   .content {
     flex: 1 1 500px;
     max-width: 600px;
     padding: 6.8rem 0 6.2rem 0;

   }


   .content h2 {
     font-size: 40px;
     font-weight: 600;
     margin-bottom: 20px;
     font-family: 'Georgia', serif;
   }

   .content p {
     font-size: 16px;
     color: #444;
     margin-bottom: 80px;
   }

   .features {
     border-top: 1px solid #ccc;
   }

   .feature {
     display: flex;
     align-items: flex-start;
     gap: 15px;
     padding: 15px 0;
     border-bottom: 1px solid #ccc;
   }

   .feature .number {
     font-weight: bold;
     color: #222;
     min-width: 30px;
   }

   .feature p {
     margin: 0;
   }

   .discover-btn {
     display: inline-block;
     margin-top: 30px;
     padding: 12px 24px;
     background-color: #dce7c3;
     color: #000;
     border-radius: 30px;
     text-decoration: none;
     font-weight: bold;
     font-family: Arial, sans-serif;
     transition: background-color 0.3s ease;
   }

   .discover-btn:hover {
     background-color: #c9d7a5;
   }

   .image-container {
     flex: 1 1 400px;
     display: flex;
     justify-content: center;
   }

   .image-container img {
     max-width: 100%;
     height: 711px;
     border-radius: 30px;

   }

   .space {
     text-align: center;
     font-weight: 500;
     margin: 50px 0px;

   }


   /* ////////////////////////////////////////////////////////////////////////////////////////////////////// */
   .comparison-section {
     text-align: center;
     padding: 80px 20px;
     background-color: #fff;

   }

   .intro-text {
     font-size: 16px;
     color: #777;
     margin-bottom: 20px;
   }

   .discover-btn {
     display: inline-block;
     margin-bottom: 40px;
     padding: 12px 24px;
     background-color: #dce7c3;
     color: black;
     border-radius: 30px;
     font-weight: bold;
     text-decoration: none;
   }

   .discover-btn:hover {
     background-color: #cbd9ad;
   }

   .comparison-table {
     display: flex;
     flex-direction: column;
     border-radius: 20px;
     overflow: hidden;
     max-width: 1000px;
     margin: 0 auto;
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
   }

   .table-header,
   .table-row {
     display: flex;
     border-bottom: 1px solid #eee;
   }

   .table-header {
     background-color: #f9f9f9;
     font-weight: bold;
     font-family: Georgia, serif;
   }

   .table-header .col {
     padding: 20px;
     text-align: center;
     flex: 1;
   }

   .table-row .col {
     padding: 20px;
     text-align: center;
     flex: 1;
     font-size: 14px;
     font-family: Arial, sans-serif;
   }

   .success {

     font-weight: normal;
   }

   .fail {

     font-weight: normal;
   }

   .area-highlight {
     background-color: #fff;
     border-radius: 20px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
     padding: 20px 0;
     font-weight: bold;
     font-size: 18px;
     font-family: Georgia, serif;
   }


   /* ////////////////////////////////////////////////////////////////////////////////////////////////// */
   /* ///////////////////////////////////////////////////////////////////////////////////////////////////// */
   .testimonial-section {
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
     background-color: #fff;
     padding: 6.8rem 0 6.2rem 0;
   }

   .testimonial-image {
     flex: 1 1 50%;
     overflow: hidden;
   }

   .testimonial-image img {
     width: 100%;
     height: 788px;
     object-fit: cover;
     /* max-width: 100%; */
     border-radius: 10%;
     padding-left: 30px;

   }

   .testimonial-content {
     flex: 1 1 50%;
     padding: 60px;
     display: flex;
     flex-direction: column;
     justify-content: center;
   }

   .testimonial-content blockquote {
     font-family: Georgia, serif;
     font-size: 32px;
     font-weight: 500;
     line-height: 1.4;
     color: #111;
     quotes: "“" "”" "‘" "’";
   }

   .author {
     margin-top: 40px;
   }

   .author .name {
     font-weight: bold;
     color: #1c2b3a;
     margin-bottom: 4px;
   }

   .author .title {
     font-size: 14px;
     color: #657c4c;
     font-family: monospace;
   }



   .maping {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px;
     margin: 20px;
     background-color: white;
     padding-bottom: 110px;

   }

   .maping h2 {
     font-size: 35px;
     font-weight: 500;
     font-family: 'Georgia', serif;

   }



   #List div>h2 {
     font-size: 70px;
     opacity: 50%;
     font-family: serif;
   }

   h3 {
     font-size: 1rem;
     opacity: 50%;
     margin-bottom: 25px;

   }

   

   .last-text {
     font-weight: 500;
     margin-left: -99px;
     
   }

   #end-text {
     font-size: 1rem;
     opacity: 50%;
     padding: 20px;
   }

  

   .button-container {
     display: flex;
     justify-content: center;
     margin: 20px;
   }

   .How-its-work {
     margin: 20px;
     padding-left: 30px;
   }


   .footer {
     margin-top: 75px;
   }

   .svg {
     height: 123px;
     width: 87px;
     padding: 24px;
   }

   #copyright {
     padding-left: 128px;
     margin-top: -17px;
     font-weight: 500;
     font-size: 13px;
     opacity: 50%;
   }