.about-section {
  padding: 0 3rem;
  height: calc(100vh - 80px - 48px); /* header and footer space accounted for */
  display: flex;
  align-items: center;
}

.about-wrapper {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  height: 100%;
}

/* TEXT BOX: on the left */
.about-text-box {
  flex: 2;
  background-color: black;
  color: white;
  padding: 2rem;
  border-radius: 25px;
  font-family: "Oswald", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* IMAGE: on the right */
.about-image {
  flex: 1;
  height: 100%;
  border-radius: 25px;
  background-image: url('../images/GNP01340-CROP.jpg');
  background-size: cover;
  background-position: center;
}

.about-title {
    font-size: 48px;
    padding-bottom: 50px;
    padding-left: 5%;
    padding-right: 5%;
}

.about-text {
    font-size: 18px;
    padding-left: 5%;
    padding-right: 5%;
}

/* Mobile styles */
@media (max-width: 810px) {
  html, body {
    overflow-y: auto; /* Ensure body can scroll */
  }

  .about-section {
    padding: 0 0;
    margin: 0;
    height: auto;
    min-height: 100px;
    display: block;
  }

  .about-wrapper {
    flex-direction: column;
    padding-right: 2rem;
    padding-left: 2rem;
    padding-top: 0;
    padding-bottom: 0;
    gap: 2rem;
    height: auto;
  }

  .about-text-box {
    height: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    order: 1; /* Ensure text comes first */
    border-radius: 10px;
  }

  .about-image {
    height: 50vh;
    object-fit: cover;
    object-position: top;
    width: auto;
    order: 2; /* Ensure image comes after text */
    background-image: url('../images/GNP01340-CROP.jpg');
    border-radius: 10px;
    flex: none;
    background-position: center top
  }

  .about-title {
    font-size: 32px; /* Larger title for mobile */
    padding: 0 0 25px 0;
    text-align: center;
  }

  .about-text {
    font-size: 16px; /* Requested font size */
    padding: 0;
    line-height: 1.6;
  }
}

@media (max-width: 1250px) and (min-width: 1020px){
  .about-title {
    font-size: 46px;
  }

  .about-text {
    font-size: 16px;
  }
}

@media (max-width: 1019px) and (min-width: 811px){
  .about-title {
    font-size: 32px;
  }

  .about-text {
    font-size: 14px;
  }
}