/* ============================================================
   ABOUT US - MODERN REDESIGN
   Loads after aboutus.css to override with modern styles
   Theme: #005680 (primary blue) | #E5781D (accent orange)
   ============================================================ */

/* ---- Global reset for this page ---- */
.firstsection_about *,
.aboutus-content *,
.about_containers *,
.about_containers h3,
.about_containers p {
  background-color: transparent;
}

/* ============================================================
   HERO BANNER
   ============================================================ */
.firstsection_about {
  min-height: 520px;
  height: auto !important;
  background-image: url(../images/services_banner2.png) !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  align-items: center;
  overflow: hidden;
}

.firstsection_about::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,86,128,0.92) 0%, rgba(0,40,70,0.85) 100%);
  pointer-events: none;
  z-index: 0;
}

.firstsection_about .leftfold_about,
.firstsection_about .rightfold_about {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.firstsection_about .leftfold_about img {
  background: transparent !important;
  width: 460px;
  max-width: 90%;
  margin: 80px 0 20px 60px;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
  animation: heroImgFade 1s ease both;
}

@keyframes heroImgFade {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.firstsection_about .rightfold_about {
  padding: 40px 60px 40px 20px;
}

.firstsection_about .rightfold_about h1 {
  background: transparent !important;
  color: #ffffff !important;
  font-size: 3.2rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  padding: 0 0 20px 0 !important;
  text-align: left !important;
  letter-spacing: -0.5px;
  animation: heroTextFade 1s 0.2s ease both;
}

.firstsection_about .rightfold_about h1 span {
  color: #E5781D !important;
  background: transparent !important;
  text-decoration: none !important;
}

.firstsection_about .rightfold_about p {
  background: transparent !important;
  color: rgba(255,255,255,0.88) !important;
  width: 95% !important;
  margin: 0 !important;
  line-height: 1.8 !important;
  font-size: 1.02rem !important;
  text-align: left !important;
  animation: heroTextFade 1s 0.35s ease both;
}

.firstsection_about .rightfold_about span {
  background: transparent !important;
  color: #E5781D !important;
  font-weight: 700;
}

@keyframes heroTextFade {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ABOUT US CONTENT
   ============================================================ */
.aboutus-content {
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%) !important;
  padding: 0 !important;
  position: relative;
}

.aboutus-content::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #E5781D 0%, #005680 100%);
}

.aboutus-content p {
  background: transparent !important;
  margin: 0 auto !important;
  padding: 44px 8% !important;
  max-width: 1100px;
  line-height: 1.9 !important;
  font-size: 1.02rem !important;
  color: #444 !important;
  text-align: justify !important;
  border-left: 4px solid #E5781D;
  border-radius: 0 8px 8px 0;
  background: rgba(229,120,29,0.04) !important;
}

.aboutus-content p span {
  background: transparent !important;
}

/* ============================================================
   MISSION / VISION / GOAL CARDS
   ============================================================ */
.about_containers {
  background: #f4f8fc !important;
  padding: 60px 5% 70px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  margin-bottom: 0 !important;
}

.about_containers .mission,
.about_containers .vision,
.about_containers .goal {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 36px 28px 32px !important;
  box-shadow: 0 4px 24px rgba(0,86,128,0.10) !important;
  border: 1px solid rgba(0,86,128,0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
  position: relative;
  overflow: hidden;
}

.about_containers .mission::after,
.about_containers .vision::after,
.about_containers .goal::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 16px 16px 0 0;
}
.about_containers .mission::after { background: #005680; }
.about_containers .vision::after  { background: #E5781D; }
.about_containers .goal::after    { background: linear-gradient(90deg, #005680, #E5781D); }

.about_containers .mission:hover,
.about_containers .vision:hover,
.about_containers .goal:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 48px rgba(0,86,128,0.18) !important;
}

.about_containers img,
.about_containers svg {
  width: 56px !important;
  height: 56px !important;
  float: none !important;
  display: block !important;
  margin: 0 0 20px 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}

.about_containers h3 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #005680 !important;
  background: transparent !important;
  background-color: transparent !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-bottom: 12px !important;
}

.about_containers h3 span {
  background: transparent !important;
  background-color: transparent !important;
}

.about_containers hr {
  border: none !important;
  border-bottom: 2px solid #E5781D !important;
  width: 48px !important;
  margin: 0 0 16px 0 !important;
}

.about_containers p {
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: #555 !important;
  background: transparent !important;
  background-color: transparent !important;
  margin: 0 !important;
  width: 100% !important;
  text-align: left !important;
}

.about_containers p span {
  background: transparent !important;
  color: #E5781D !important;
  font-weight: 600 !important;
}

/* Hover text colour overrides */
.mission:hover h3, .mission:hover p, .mission:hover .mission_h,
.vision:hover h3,  .vision:hover p,  .vision:hover .vision_h,
.goal:hover h3,    .goal:hover p,    .goal:hover .vision_h {
  color: #ffffff !important;
}

.mission:hover { background: #005680 !important; }
.vision:hover  { background: #E5781D !important; }
.goal:hover    { background: linear-gradient(135deg, #005680, #E5781D) !important; }

.mission:hover hr, .vision:hover hr, .goal:hover hr {
  border-bottom-color: rgba(255,255,255,0.5) !important;
}

.mission:hover p span,
.vision:hover p span,
.goal:hover p span {
  color: #ffffff !important;
}

/* ============================================================
   OUR CLIENTELE HEADING (aboutus page)
   ============================================================ */
.fontS {
  font-size: 2.4rem !important;
  text-align: center !important;
  margin: 0 auto 16px !important;
  padding-top: 56px !important;
  background: transparent !important;
  background-color: #f4f8fc !important;
  display: block;
  width: 100%;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .firstsection_about {
    grid-template-columns: 1fr !important;
  }
  .firstsection_about .leftfold_about {
    display: none !important;
  }
  .firstsection_about .rightfold_about {
    padding: 120px 32px 48px !important;
    text-align: center !important;
  }
  .firstsection_about .rightfold_about h1 {
    font-size: 2.4rem !important;
    text-align: center !important;
  }
  .firstsection_about .rightfold_about p {
    text-align: center !important;
    width: 100% !important;
  }
  .about_containers {
    grid-template-columns: 1fr !important;
    padding: 40px 24px 56px !important;
    max-width: 520px;
    margin: 0 auto !important;
  }
}

@media (max-width: 768px) {
  .aboutus-content p {
    padding: 32px 6% !important;
    border-left: none !important;
    border-top: 4px solid #E5781D;
    border-radius: 0 0 8px 8px !important;
  }
  .firstsection_about .rightfold_about h1 {
    font-size: 2rem !important;
  }
}