.about-us-section {

  width: 80vw;

  margin: auto;

  /* padding: 60px 20px; */

  position: relative;

}



.section-title {

  text-align: center;

  font-size: 2.5rem;

  color: #232323;

  margin-bottom: 40px;

  justify-content: start;

}



.about-content {

  display: flex;

  flex-direction: column;

  gap: 4rem;

}



.about-item {

  display: flex;

  align-items: center;

  justify-content:space-between;

  /* gap: 2rem; */



}



.about-text {

  flex: 1;

  color: #da4817;

  font-size: 1.4rem;

  /* border: 2px solid red; */

  padding-left: 1rem;

}



.about-text p {

  font-size: 1rem;

  line-height: 1.7;

  color: #ccc;

  margin-top: 1rem;

  text-align: left;

  width: 80%;

  position: relative;

}



.about-image {

  flex: 1;

  text-align: center;

}



.about-image img {

  width: 70%;

  height: 350px;

  border-radius: 15px;

  position: relative;

  /* box-shadow: 0 4px 8px rgba(255, 255, 255, 0.511); */

}











/* For Mobile Devices (Below 768px) */

@media (max-width: 768px) {

  .about-us-section {

    width: 90vw;

  }



  .section-title {

    font-size: 2rem;

    margin-bottom: 30px;

  }



  .about-content {

    gap: 2rem;

  }



  .about-item {

    flex-direction: column;

    text-align: center;

    gap: 1.5rem;

  }



  .about-text {

    font-size: 1.2rem;

    padding: 0 1rem;

  }



  .about-text p {

    font-size: 0.9rem;

    width: 100%;

    text-align: center;

  }



  .about-image img {

    width: 300px;

    /* height: auto; */

    max-height: 200px;

    border-radius: 10px;

  }

}



/* For Extra Small Devices (Below 480px) */

@media (max-width: 480px) {

  .about-us-section {

    width: 95vw;

  }



  .section-title {

    font-size: 1.8rem;

  }



  .about-text {

    font-size: 1.1rem;

  }



  .about-text p {

    font-size: 0.85rem;

  }



  .about-image img {

    width:300px;

    max-height: 250px;

  }

}































/* animation  */

@keyframes fadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



.fade-in {

  animation: fadeIn 2s ease-in-out;

}



/* Slide-In-Left Animation */

@keyframes slideInLeft {

  from {

    opacity: 0;

    transform: translateX(-100%);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



.slide-in-left {

  animation: slideInLeft 1.5s ease-in-out;

}



/* Slide-In-Right Animation */

@keyframes slideInRight {

  from {

    opacity: 0;

    transform: translateX(100%);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



.slide-in-right {

  animation: slideInRight 1.5s ease-in-out;

}