@media screen and (max-width: 768px) {
  .hero-scroll {
    display: none;
  }
  .about-content {
      grid-template-columns: 1fr; 
      text-align: center;
  }
  .about-content > div {
      display: none !important;
  }
  .about-content .about-image,
  .about-content .about-text {
      display: block !important; 
      width: auto; 
      height: auto; 
      margin: initial; 
      order: initial; 
  }
  .about-image {
      display: flex !important; 
      justify-content: center;
      align-items: center;
      margin: 0 auto 2rem; 
      order: -1; 
      width: 200px; 
      height: 200px;
  }
   .about-text {
       order: 0; 
       margin: 0; 
   }
  .hero {
    padding-top: 60px; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    height: 100vh; 
    text-align: center;
  }
  .hero-content {
    height: auto; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    width: 100%; 
    margin: 0;
  }
  .hero-text {
    max-width: 100%;
    text-align: center;
    margin: 0 auto; 
  }
  .hero-text h1 {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-text h2, .hero-text p {
    text-align: center;
  }
  .hero-btns {
      justify-content: center;
  }
  .hero-image {
    display: none !important; 
  }
  .main-title {
    font-size: 1.4rem; 
    white-space: normal; 
    overflow: visible;
    text-align: center;
  }
}
