/* ============================================================
   1. SECTION & LAYOUT CONTROLS
   ============================================================ */
.about-section {
  width: 100%;
  background-color: #ffffff;
  
  /* ADJUST TOP & BOTTOM PADDING: Set to 0 so images touch edge */
  padding-top: 0px;    /* <-- [EDIT HERE] Top section boundary spacing */
  padding-bottom: 0px; /* <-- [EDIT HERE] Bottom section boundary spacing */
  padding-left: 20px;  /* <-- [EDIT HERE] Side padding for screen safety */
  padding-right: 20px;
  
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.about-container {
  max-width: 1400px;   /* <-- [EDIT HERE] Outer container max width */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ============================================================
   2. TOP IMAGE ("about") CONTROLS
   ============================================================ */
.top-heading {
  width: 100%;
  max-width: 1500px;
  margin-top: 0px;     /* Set to 0 to touch the top */
  margin-bottom: 180px; /* <-- [EDIT HERE] Space between Top Image & Text */
  display: flex;
  justify-content: center;
  /* align-items: center; */
}

.heading-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 150px;    /* <-- [EDIT HERE] Top Image Size (Increased) */
  display: block;
}

/* ============================================================
   3. MIDDLE TEXT CONTROLS
   ============================================================ */
.about-content {
  max-width: 650px;    /* <-- [EDIT HERE] Paragraph container width */
  
  /* GAP TO BOTTOM IMAGE */
  margin-top: 0px;
  margin-bottom: 50px; /* <-- [EDIT HERE] Space between Text & Bottom Image */
  margin-left: auto;
  margin-right: auto;
}

.about-content p {
  color: #333333;      /* <-- [EDIT HERE] Text color */
  font-family: system-ui, -apple-system, sans-serif;
  
  font-size: 15px;     /* <-- [EDIT HERE] Paragraph Font Size */
  line-height: 1.6;    /* <-- [EDIT HERE] Paragraph Line Height/Spacing */
  
  margin-bottom: 20px; /* <-- [EDIT HERE] Space between Paragraph 1 & 2 */
}

.about-content p:last-child {
  margin-bottom: 100px;
}

/* ============================================================
   4. BOTTOM IMAGE ("BEYOND EVENTS...") CONTROLS
   ============================================================ */
.bottom-heading {
  width: 100%;
  max-width: 1250px;   /* <-- [EDIT HERE] Bottom Image Size (Increased) */
  margin-bottom: 0px;  /* Set to 0 to touch the bottom boundary */
}

.footer-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   5. MOBILE RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
  .top-heading {
    max-width: 740px;  /* <-- [EDIT HERE] Top Image size on Mobile */
    margin-bottom: 70px;
  }

  .about-content {
    max-width: 100%;
    margin-bottom: 35px;
  }

  .about-content p {
    font-size: 13px;
  }

  .bottom-heading {
    max-width: 90%;   /* <-- [EDIT HERE] Bottom Image size on Mobile */
  }
}