/* ---------- PANEL 3 : ABOUT US ---------- */
#panel2 {
  /* background: #ebe2d9; */
  /* background-color: #e57410; */
  background: linear-gradient(to bottom, #e68734 0%, #ebe2d9 20%);
  color: #333;
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden !important;
}

/* Outer container */
.aboutus-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}




/* Heading */
.aboutus-heading {
  text-align: center;
  font-size: 4.5rem;
  font-weight: 700;
  color: #e57410;
  width: 100%;
  height: 4.5rem;              
  overflow: hidden;            /* hide sliding text outside box */
  text-align: center;
}

.sliderbox {
  width: 100%;
  height: 4.5rem;       /* matches heading height */
  overflow: hidden;     /* hide overflowing text */
  position: relative;
}

/* Inner wrapper for vertical sliding */
.slider-content {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
}

/* Each sliding item */
.slideritem {
  font-size: 3.5rem;
    color: #37493B;
    margin-bottom: 20px;
    font-weight: 700;
    position: relative;
    letter-spacing: -0.5px;
  /* width: 100%;
  height: 4.5rem;  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.5rem;
  font-weight: bold;
  color: white; */
  /* color: #e57410; */
}

.sliderbox1 {
  width: 100%;
  height: 100%;
  overflow: hidden;     /* hide overflowing text */
  position: relative;
  /* background-color: red; */
}

/* Inner wrapper for vertical sliding */
.slider-content1 {
  width: 100%;
  height: 200%;
  /* display: flex; */
  /* flex-direction: column; */
  transition: transform 0.5s ease-in-out;
  /* background-color: blue; */
}

/* Each sliding item */
.slideritem1 {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: green; */
}

.aboutus-left {
  border-radius: 20px;
  overflow: hidden;     /* required to clip image inside corners */
  padding: 0;           /* remove padding so image fits naturally */
  background: white;
  padding: 0 !important;   
}

.aboutus-left-upper .text-overlay {
    padding: 25px 20px; /* already exists, leave it */
}

.aboutus-left-upper,
.aboutus-right-upper {
  position: relative;
  width: 100%;
  height: 100%;
}

.aboutus-left-upper img,
.aboutus-right-upper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}



/* Main content area */
.aboutus-content {
  width: 90%;
  display: flex;
  justify-content: space-between; /* pushes boxes to edges with space between */
  align-items: stretch;           /* makes both boxes same height */
  gap: 100px;
  /* flex: 1; */
  height: 80dvh;
}

/* Individual boxes */
.aboutus-box {
  flex: 1;                        /* equal width */
  background: white;
  border-radius: 20px;
  margin-top: 30px;
  padding: 40px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
/* .aboutus-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
} */

/* Headings inside boxes */
.aboutus-box h3 {
  font-size: 1.8rem;
  color: #e57410;
  margin-bottom: 1rem;
}

/* Paragraph text inside boxes */
.aboutus-box p {
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: justify;
}
#panel2 {
    padding: 1em 0;
}

@media (min-width: 768px) {
  .aboutus-content{
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .aboutus-heading {
    margin-top: 1vh;
    margin-bottom: 1vh;
  }
}
/* ============================
   MOBILE STYLING (max-width: 768px)
   ============================ */

   

@media (max-width: 768px) {

  /* --- panel2 WRAPPER --- */
  #panel2 {
    /* padding: 1em 0; */
    height: 100dvh;
  }

  /* Hide right box */
  .aboutus-right {
    display: none !important;
  }

  /* Left box becomes main card */
  .aboutus-left {
    border-radius: 16px;
    overflow: hidden;
    padding: 0 !important;
  }

  .sliderbox1 {
    height: 100%;
  }

  .slider-content1 {
    height: 200%;              /* 2 slides × 100% height */
  }

  .slideritem1 {
    height: 100%;              /* one slide = full visible frame */
    position: relative;
  }
  /* ---------- SLIDER ---------- */
  .aboutus-left .sliderbox1 {
    width: 100%;
    height: 100%;  /* fill parent */
    overflow: hidden;
    position: relative;
  }

  .aboutus-left .slider-content1 {
    display: flex;              /* enable flex layout */
    flex-direction: column;     /* vertical stacking */
    transition: transform 0.5s ease-in-out;
  }

  .aboutus-left .slideritem1 {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
  }

  /* IMAGE inside slider */
  .aboutus-left .slideritem1 img {
    /* width: 100%; */
    height: 100%;  /* natural height, not forced 100vh */
    object-fit: cover;
    display: block;
  }

  /* --- TEXT OVERLAY --- */
  .text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px 20px;
    color: white;
    z-index: 10;

    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.8) 80%,
      rgba(0, 0, 0, 1) 100%
    );
    box-sizing: border-box;
  }

  .text-overlay h3 {
    margin: 0 0 10px 0;
    font-size: 1.6rem;
    color: #fff;
  }

  .text-overlay p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: #fff;
  }

  .slideritem {
    font-size: 2rem;
    height: 4.5rem;  
  }

  /* Content heading */
  .aboutus-heading {
    /* margin-bottom: 2vh; */
    font-size: 2.5rem;
    text-align: center;
  }

  /* Flex container adjustments */
  .aboutus-content {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
  }

  .aboutus-box {
    width: 100%;
  }

  /* --- Remove leftover desktop-style flex on image wrappers --- */
  

  .aboutus-left-upper {
    width: 100%;
    height: 100%;              /* match desktop */
    position: relative;
  }

  .aboutus-left-upper img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;         /* SAME as desktop */
    object-position: center;
  }


  .aboutus-right-upper {
    position: relative;
    width: 100%;
    height: auto; /* let slideritem1 control height */
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
  }

  .aboutus-right-upper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
  }
  .aboutus-left .slideritem1 + .aboutus-left .text-overlay {
    margin-top: 1rem;
  }
}