/* About Page Content Responsive Styles - No Navbar Changes */

/* Only target content areas, not the navbar */

/* Mobile styles for content only */
@media screen and (max-width: 767px) {

  /* Hero section text responsiveness */
  .inner-hero .h1-title.large {
    font-size: 2.2rem !important;
    line-height: 1.3 !important;
  }

  .inner-hero .h1-title.large br {
    display: none;
  }

  .inner-hero .title-white {
    font-size: 1rem !important;
  }

  /* Stats grid responsiveness */
  .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .intro-box {
    margin-bottom: 1rem !important;
  }

  .h4-title.big {
    font-size: 2rem !important;
  }

  /* Two column section responsiveness */
  .flex {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  ._50-column {
    width: 100% !important;
    flex: none !important;
  }

  ._50-column img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Features grid responsiveness */
  .content-section.blue .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .feature {
    margin-bottom: 1rem !important;
  }

  /* Typography responsiveness */
  .h2-title {
    font-size: 1.8rem !important;
    text-align: center !important;
  }

  .h3-title {
    font-size: 1.5rem !important;
    text-align: center !important;
  }

  /* Content wrapper padding */
  .content-wrapper {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Side padding text */
  .side-padding {
    padding-left: 10px !important;
    padding-right: 10px !important;
    text-align: center !important;
  }

  /* Center content */
  center p {
    padding: 0 15px !important;
  }

  center p br {
    display: none;
  }

  /* Footer styles removed - will inherit from mobile.css */
}

/* Tablet styles */
@media screen and (max-width: 991px) and (min-width: 768px) {

  .h1-title.large {
    font-size: 2.8rem !important;
  }

  .grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  .intro-box:nth-child(3) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    max-width: 300px !important;
  }

  .flex {
    gap: 2rem !important;
  }

  ._50-column {
    min-width: 45% !important;
  }
}

/* Small mobile styles */
@media screen and (max-width: 480px) {

  .h1-title.large {
    font-size: 1.8rem !important;
  }

  .h4-title.big {
    font-size: 1.6rem !important;
  }

  .h2-title {
    font-size: 1.5rem !important;
  }

  .h3-title {
    font-size: 1.3rem !important;
  }

  .content-wrapper {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .side-padding {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}