/* ================================================================= */
/* File Path: /assets/css/about-page.css                           */
/* Purpose: Forceful override for About Section elements.          */
/* ================================================================= */

/* ================================================================= */
/* I. BASE DESKTOP STYLES (For screens > 1200px)                     */
/* ================================================================= */

/*
  == 1. CONTROL THE OVERALL SECTION SPACING ==
  The 'position: relative' is REQUIRED for the subtitle centering to work.
*/
.about__section {
  padding-top: 100px !important;
  padding-bottom: .5px !important;
  position: relative !important; /* DO NOT CHANGE: This is the positioning anchor. */
  overflow: hidden !important;  /* Prevents horizontal scrollbars */
}

/*
  == 2. CONTROL THE IMAGE CONTAINER SIZE & POSITION ==
*/
.about__section .about__thumb {
  height: 1250px !important;
  transform: translateX(-70px) translateY(0px) !important;
  display: flex !important;
  flex-direction: column !important;
}

/*
  == 3. FORCE THE IMAGE TO FIT THE CONTAINER ==
*/
.about__section .about__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/*
  == 4. WIDEN THE IMAGE AND TEXT COLUMNS ==
  The underlying .row is already a flex container from your main CSS.
*/
.about__section .col-xl-5 {
    width: 45% !important;
}
.about__section .col-xl-6 {
    width: 53% !important;
}

/*
  == 5. MOVE THE ENTIRE TEXT BLOCK (ABOUT CONTENT) UP OR DOWN ==
*/
.about__section .about__content {
  transform: translateY(120px) !important;
}

/*
  == 6. ENLARGE AND COLOR THE MAIN HEADER (H2) ==
*/
.about__section .about__content h2 {
  font-size: 58px !important;
  color: #000000 !important;
}

/*
  == 7. COLOR THE HIGHLIGHTED PART OF THE HEADER (SPAN) ==
*/
.about__section .about__content h2 span {
  color: #facc15 !important;
}

/*
  == 8. ENLARGE AND COLOR THE PARAGRAPH TEXT ==
*/
.about__section .about__content p {
  font-size: 18px !important;
  color: #000000 !important;
}

/*
  == 9. ENLARGE AND COLOR THE BULLET POINT TEXT (LIST ITEMS) ==
*/
.about__section .about__content ul li {
  font-size: 17px !important;
  color: #000000 !important;
}

/*
  == 10. RESIZE AND COLOR THE BULLET POINT ICONS ==
*/
.about__section .about__content ul li i {
  font-size: 25px !important;
  color: #facc15 !important;
}

/*
  == 11. HIDE THE ORIGINAL "OUR MISSION" ELEMENT ==
  This hides the original subtitle that is trapped inside the text block.
*/
.about__section .sub__tittle {
    display: none !important;
}

/*
  == 12. CREATE AND POSITION A NEW "OUR MISSION" ELEMENT ==
  This creates a '::before' pseudo-element on the section itself.
*/
.about__section::before {
    /* --- DEFINE THE TEXT AND STYLING --- */
    content: 'Our Mission' !important;
    font-size: 22px !important;
    color: #2e0c5e !important;
    font-weight: 700 !important;
    font-family: "DM Sans", sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    /* --- POSITIONING --- */
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    z-index: 10 !important;
    /* --- TRANSFORM FOR CENTERING & MOVEMENT --- */
    transform: translateX(-50%) translateX(0px) translateY(40px) !important;
}

/* ================================================================= */
/* II. RESPONSIVE ADJUSTMENTS (Flexbox stacking & resizing)          */
/* ================================================================= */

/*
  == FOR TABLETS (Screens between 768px and 1200px wide) ==
  Here, we stack the image on top of the text.
*/
@media (max-width: 1200px) {
  /* Stack the two main columns vertically */
  .about__section .row {
    flex-direction: column !important;
  }

  /* Make both columns take up the full width */
  .about__section .col-xl-5,
  .about__section .col-xl-6 {
      width: 100% !important;
      max-width: 100% !important; /* Override any max-width */
      flex: 0 0 100% !important;  /* Override flex properties */
  }

  /* Reset image and text container positions to prevent large gaps */
  .about__section .about__thumb,
  .about__section .about__content {
    transform: translate(0, 0) !important;
  }

  /* Reduce image container height for a stacked layout */
  .about__section .about__thumb {
    height: 500px !important; /* Adjust as needed for tablets */
  }

  /* Adjust main header size */
  .about__section .about__content h2 {
    font-size: 42px !important;
  }
}

/*
  == FOR MOBILE PHONES (Screens less than 768px wide) ==
  Further refining the stacked layout for small devices.
*/
@media (max-width: 767px) {
  /* Reduce top padding on small screens */
  .about__section {
    padding-top: 50px !important;
  }

  /* Further reduce image container height */
  .about__section .about__thumb {
    height: 350px !important; /* Adjust as needed for mobile */
  }

  /* Adjust position and size of the "Our Mission" title */
  .about__section::before {
    font-size: 18px !important;
    transform: translateX(-50%) translateY(20px) !important; /* Move it up */
  }

  /* Make all text smaller and readable on mobile */
  .about__section .about__content h2 {
    font-size: 32px !important;
  }
  .about__section .about__content p,
  .about__section .about__content ul li {
    font-size: 16px !important;
  }
  .about__section .about__content ul li i {
    font-size: 20px !important;
  }

  /* Reset content block position in case of inherited styles */
  .about__section .about__content {
    transform: none !important;
    padding-top: 40px !important; /* Add space between image and text */
  }
}