/* ABOUT PAGE COLOR PALETTE & SPECIFICS */

:root {
  /* Fresh, bright colors extracted from the hero image */
  --about-bg-1: #eef2e7; /* Mint Cream (Matches Hero Fog) */
  --about-bg-2: #dfcdc6; /* Dusty Rose */
  --about-bg-3: #e5b7a2; /* Soft Terracotta */
  --about-bg-4: #fec17f; /* Light Amber */
  --about-bg-5: #bbb0c5; /* Muted Lavender */
}

/* =========================================
   SMOOTH BLENDING BETWEEN SECTIONS
   ========================================= */

/* Top section (Genesis) blending from Hero (#eef2e7) into Warm Cream */
#about-main {
  background: linear-gradient(to bottom, #eef2e7 0%, var(--about-bg-1) 100%) !important;
}

/* Ensure text is readable on the new light background */
#about-main .about-text h2,
#about-main .about-text p,
#about-main .about-text span {
  color: var(--ink) !important;
}
#about-main .about-quote p {
  color: var(--taupe) !important;
}

/* Vision & Mission blending from Warm Cream into Dusty Rose */
#vision-mission {
  background: linear-gradient(to bottom, var(--about-bg-1) 0%, var(--about-bg-2) 100%) !important; 
}

/* Convictions blending from Dusty Rose into Soft Terracotta */
.about-convictions-section {
  background: linear-gradient(to bottom, var(--about-bg-2) 0%, var(--about-bg-3) 100%) !important;
}

/* SG Way blending from Soft Terracotta into Light Amber */
#sg-way {
  background: linear-gradient(to bottom, var(--about-bg-3) 0%, var(--about-bg-4) 100%) !important;
}

/* Vision 2035 blending from Light Amber into Muted Lavender */
#vision-2035 {
  background: linear-gradient(to bottom, var(--about-bg-4) 0%, var(--about-bg-5) 100%) !important;
}

/* =========================================
   FOOTER OVERRIDES FOR ABOUT PAGE
   ========================================= */

.new-footer {
  /* Background image with a smooth overlay starting from mid-light (lavender) to dark */
  background: 
    linear-gradient(to bottom, var(--about-bg-5) 0%, rgba(30, 30, 30, 0.7) 40%, rgba(0, 0, 0, 0.9) 100%),
    url('../assets/about_page_footer.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: normal !important;
  margin-top: -1px;
}

/* Footer text colors for dark background */
/* =========================================
   NAVBAR OVERRIDE (Matching Leadership Page)
   ========================================= */
.header-nav {
    background: linear-gradient(to bottom, rgba(238, 242, 231, 0.95) 0%, transparent 100%) !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.header-nav .nav-link,
.header-nav .nav-brand-name, 
.header-nav .nav-brand-tagline {
    color: #0B162C !important;
}

.header-nav .mobile-nav-toggle span {
    background-color: #0B162C !important;
}

.header-nav .nav-dropdown {
    background: rgba(238, 242, 231, 0.95) !important;
}

.header-nav .nav-dropdown-item {
    color: #0B162C !important;
}

.header-nav .nav-dropdown-item:hover {
    background: rgba(37, 38, 42, 0.1) !important;
}


/* Global Unified Footer Typography & Social Icons */
.new-footer h2, .new-footer h3, .new-footer h4 { color: #ffffff !important; }
.new-footer p, .new-footer a, .new-footer li { color: #ffffff !important; font-size: 1.05rem !important; }
.new-footer a:hover { color: var(--c-golden, #C8A14A) !important; }
.new-footer p.sub-credit { font-size: 0.95rem !important; opacity: 0.8; }
.new-footer .social-icons a { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.4) !important; background: transparent !important; }
.new-footer .social-icons a.social-instagram:hover { color: #ffffff !important; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; border-color: transparent !important; }
.new-footer .social-icons a.social-facebook:hover { color: #ffffff !important; background: #1877F2 !important; border-color: #1877F2 !important; }
.new-footer .social-icons a.social-twitter:hover { color: #ffffff !important; background: #000000 !important; border-color: #000000 !important; }
.new-footer .social-icons a.social-linkedin:hover { color: #ffffff !important; background: #0A66C2 !important; border-color: #0A66C2 !important; }
.new-footer .social-icons a.social-youtube:hover { color: #ffffff !important; background: #FF0000 !important; border-color: #FF0000 !important; }
.new-footer .social-icons a.social-whatsapp:hover { color: #ffffff !important; background: #25D366 !important; border-color: #25D366 !important; }
.new-footer .social-icons a.social-gmail:hover { color: #ffffff !important; background: #D44638 !important; border-color: #D44638 !important; }