@media screen and (min-width: 769px) and (max-width: 992px) {
  .hero-image {
    display: none !important; 
  }
  .hero {
    display: flex;
    align-items: center; 
    justify-content: center; 
    height: 100vh; 
  }
  .hero-content {
    flex-direction: column;
    text-align: center;
    justify-content: center; 
    align-items: center;
    width: 100%; 
    padding: 0 15px; 
    margin: 0; 
  }
  .hero-text {
    max-width: 100%;
    text-align: center;
    margin: 0 auto; 
  }
  .hero-btns {
    justify-content: center;
  }
  .about-content {
    display: grid;
    grid-template-columns: 1fr; 
    text-align: center;
  }
  .about-image {
    display: flex !important; 
    justify-content: center;
    margin: 0 auto 2rem; 
    order: -1; 
    width: 250px; 
    height: 250px;
  }
}
@media screen and (min-width: 993px) {
  .hero-image {
    display: flex !important; 
  }
  .hero {
      display: flex;
      align-items: center;
      height: 100vh;
      justify-content: initial; 
  }
  .hero-content {
    flex-direction: row; 
    text-align: left; 
    justify-content: space-between; 
    align-items: center;
    width: auto; 
    padding: 0; 
  }
  .about-content {
    display: grid;
    grid-template-columns: 1fr 2fr; 
    gap: var(--space-6);
    align-items: center;
    text-align: left; 
  }
  .about-image {
      margin: 0 auto; 
      order: initial; 
      width: 300px; 
      height: 300px;
  }
}