p{text-align: justify;text-justify: inter-word;}
.feature-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 20px;max-width: 1200px;margin: 0 auto;}
.feature-box {background: #fff;border: 1px solid white;border-radius: 29px;padding: 20px;box-shadow: -5px 6px 0px 0px rgba(0, 0, 0, 0.1);;text-align: center;transition: all 0.3s ease-in-out;width: calc(102% - 20px);}
.feature-box:hover {transform: translateY(-5px);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);}
.feature-box i {font-size: 40px;color: green;margin-bottom: 10px;}
.feature-box h3 {font-size: 1.2rem;color: #333;margin-bottom: 10px;}
.feature-box p {font-size:14px !important;line-height: 1.4;}
@media (max-width: 768px) {.feature-box {padding: 15px;width: calc(95% - 6px);margin-left: 10px;}.feature-box i {font-size: 35px;}.feature-box h3 {font-size: 1.1rem;}.feature-box p {font-size: 14px;}}
.benefits-container {display: flex;flex-wrap: wrap;justify-content: center;gap: 20px;}
.benefit-card {background: #fff;border: 5px solid green;border-radius: 19px;box-shadow: -9px 9px 5px 2px rgba(0, 0, 0, 0.1);width: calc(31.33% - 17px);padding: 20px;text-align: center;transition: transform 0.3s ease;}
.benefit-card:hover {transform: translateY(-5px);border-color: green;}
.benefit-card i {font-size: 2.5rem;color: green;margin-bottom: 10px;}
h3 {color: green;margin-bottom: 10px;font-size: 1.2rem;}
/*p {font-size: 1.2rem;line-height: 1.5;}*/
@media (max-width: 1024px) {.benefit-card {width: calc(40% - 15px);}}
@media (max-width: 768px) {.benefit-card {width: 80%;}}
@media (max-width: 480px) {h1 {font-size: 1.5rem;}h3 {font-size: 1rem;}p {font-size: 0.85rem;}
    .benefit-card i {font-size: 2rem;}}
.card-container {display: grid;grid-template-columns: repeat(5, 1fr);gap: 20px;padding: 20px;max-width: 1200px;margin: 0 auto;}
.card {background: #fff;border-radius: 10px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);display: flex;justify-content: center;align-items: center;flex-direction: column;text-align: center;padding: 20px;width: 100%; /* Ensures consistent width */height: 150px; /* Ensures consistent height */transition: transform 0.3s ease;}
.card img {max-width: 100px;max-height: 80px;margin-bottom: 10px;}
.card:hover {transform: translateY(-10px);}
@media (max-width: 768px) {
  .card-container {
    grid-template-columns: repeat(2, 1fr);}
  .card {height: 140px;}}
@media (max-width: 480px) {
  .card-container {grid-template-columns: 1fr;}
  .card {height: 120px;}}
@keyframes slide {
  0% {transform: translateX(0);}
  100% {transform: translateX(-100%);}}
/*slider*/
    .slider-container {position: relative;overflow: hidden;padding: 20px 0;}
    .slider {display: flex;gap: 30px;animation: scroll 15s linear infinite;}
    .card {flex: 0 0 auto;width: 200px;height: 200px;display: flex;align-items: center;justify-content: center;background: #fff;border-radius: 15px;box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease-in-out;}
    .card img {max-width: 100%;max-height: 100%;object-fit: contain;border-radius: 10px;}
    .card:hover {
      transform: scale(1.1);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}
    @keyframes scroll {
      0% {transform: translateX(0);}
      100% {transform: translateX(-100%);}}
    .slider-container:hover .slider {
      animation-play-state: paused;
    }
    @media (max-width: 600px) {
      .card {width: 140px;height: 140px;}.slider {gap: 20px;}}