styles.css

/* ===========================
   This file contains all visual styling for the website; how everything looks and is styled.
   =========================== 
*/


@font-face {
  font-family: 'New Spirit Semibold';
  src: url('fonts/fonnts.com-New-Spirit-Semi-Bold.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===========================
   HEEBO SEMIBOLD FONT FACE
   =========================== 
*/

@font-face {
  font-family: 'Heebo';
  src: url('fonts/heebo-semi-bold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Heebo Light';
  src: url('fonts/Heebo-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Heebo Medium';
  src: url('fonts/Heebo-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Heebo Regular';
  src: url('fonts/Heebo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


:root {
  --base-font-size: 16px;
  --spacing-unit: 0.25rem; /* 4px base unit */
}

*{margin:0;padding:0;box-sizing:border-box;}
html {
  font-size: var(--base-font-size);
  scroll-behavior: smooth;
  background-color: #FFFBF6;
}

body {
  font-family: 'Inter', 'Segoe UI', Tahoma, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  font-size: 1rem;
  background-color: #FFFBF6;
  min-height: 100vh;
  padding-top: 5rem; /* Account for fixed header */
}
.container{max-width:75rem;margin:0 auto;padding:0 1.25rem;}




/* Make hero section positioned so hat stays within it */
.hero-section {
    position: relative;
    text-align: center;
    padding: 2.5rem 1.25rem;
}

@media (max-width: 48rem) {
  .container {
    padding: 0 0rem;
  }

  .hero-section {
    padding: 0;
  }
}

/* header and nav bar 
- need to change nav bar and header color to match homepage in the other branch */
header{background-color:#2c3e50;color:#fff;padding:1rem 0;position:sticky;top:0;z-index:100;}
header h1{font-size:1.8rem;margin-bottom:.5rem;}
nav ul{list-style:none;display:flex;gap:2rem;flex-wrap:wrap;}
nav a{color:#fff;text-decoration:none;transition:color .3s ease;}
nav a:hover{color:#3498db;}

/* homepage into banner */
.hero{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:4rem 0;text-align:center;}
.hero h2{font-size:2.5rem;margin-bottom:1rem;}
.hero p{font-size:1.2rem;}

/* styling for the content splits in homepage */
.content-section{padding:0rem 0;}
.content-section h2{font-size:2rem;margin-bottom:2rem;color:#2c3e50;}

/* START OF STYLING FOR CONTACT PAGE */ 
/* base layout */ 
.contact-page{background:#FFFBF6;color:#222;}
.contact-page .hero--contact{background:#FFFBF6;color:#C55026;padding:60px 0 40px;text-align:center;}
.contact-page .hero__inner{padding-bottom:20px;}
.contact-page .hero__title{font-family: 'New Spirit Semibold', serif;font-size:clamp(2.5rem,4vw,3rem);margin:10px 0;color:#C55026;font-weight:700;} /* Added font family */
.contact-page .hero__subtitle{font-family: 'Inter', sans-serif;max-width:800px;margin:0 auto 40px;color:#C55026;line-height:1.6;font-size:1.75rem;font-weight:400;} /* Added font family and increased size */
/* styling for contact panel */ 
.panel--contact{background:#FFF1DC;border-radius:8px;margin:0 0 60px;padding:40px 20px;}
.panel--contact .container{padding:24px 16px;}
.contact-form{max-width:600px;margin:0 auto;display:grid;gap:16px;}
.contact-form input,.contact-form textarea{width:100%;border:2px solid #ccc;border-radius:6px;padding:12px 16px;font:inherit;background:#FFFBF6;color:#222;font-size:.95rem;}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#999;}
.contact-form textarea{resize:vertical;min-height:120px;}
.contact-form .btn{justify-self:end;background:#185F72;color:#FFFBF6;border:none;padding:10px 24px;border-radius:6px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:background .3s ease;}
.contact-form .btn:hover{background:#045a5c;}
.contact-form select {
  color: #C55026;
  border: 2px solid #185F72;
}
.contact-form select option {
  color: #C55026;
}

/* styling for donations */ 
.support{padding:60px 0 80px;background:#FFFBF6;}
.section-title{font-family: 'New Spirit Semibold', serif;font-size:clamp(2.5rem,4vw,3rem);text-align:center;margin:0 0 16px;color:#C55026;font-weight:700;}
.section-subtitle{text-align:center;color:#C55026;max-width:800px;margin:0 auto 40px;line-height:1.6;font-size:1.1rem;}
.donation-card{max-width:700px;margin:40px auto 0;border:2px solid #ccc;border-radius:8px;padding:30px;background:#fff;}
.donation-row{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;margin-bottom:20px;}
.donation-label{color:#333;font-size:.95rem;font-weight:500;}
.btn-group{display:flex;gap:10px;flex-wrap:wrap;}
.btn--chip,.btn--amount{border:2px solid #185F72;background:#FFFBF6;color:#185F72;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:500;transition:all .3s ease;}
.btn--chip:hover,.btn--amount:hover{background:#FFFBF6;}
.btn--chip.is-active,.btn--amount.is-active{background:#185F72;color:#FFFBF6;border-color:#185F72;}
.input.input--full{width:100%;border:2px solid #FFFBF6;border-radius:6px;padding:12px 16px;margin:10px 0;background:#FFFBF6;font-size:.95rem;}
.btn--primary{background:#185F72;color:#FFFBF6;border-radius:6px;padding:12px 24px;border:none;font-weight:600;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;width:100%;margin-top:10px;}
.btn--primary:hover{background:#045a5c;}
/* helper for phone view */ 
@media(max-width:720px){.donation-row{grid-template-columns:1fr;gap:10px;}.donation-label{margin-bottom:5px;}} 

/* Style the select dropdown to match other form inputs */
.contact-form select.form-select {
  width: 100%;
  padding: 1rem;
  border: 2px solid #d4c5b9;
  border-radius: 8px;
  background-color: #faf8f5;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #333;
  appearance: none;
  /* ========== MODIFY IMAGE HERE: SVG dropdown arrow (inline SVG data URI) ========== */
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  /* ===================================================================== */
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 3rem;
  cursor: pointer;
}

.contact-form select.form-select:focus {
  outline: none;
  border-color: #5a9a8e;
}

/* Style for placeholder-like option */
.contact-form select.form-select option[value=""] {
  color: #999;
} 

/* ===========================
   START: MISSION PAGE STYLES
   =========================== */

/* Scope */
.mission-page { 
  background:#FFFBF6; /* Changed from #fff9f7 to match */
  color:#222; 
}

/* Hero (title + short blurb) */
.mission-hero {
  text-align:center;
  padding:3rem 0 1.25rem;
}
.mission-hero h1 {
  font-family: 'New Spirit Semibold', serif; /* Added font family */
  font-size:clamp(2.5rem,4vw,3rem); /* Increased size to match */
  font-weight:700;
  color:#C55026; /* Changed from #d4704a */
  margin-bottom:0.625rem;
}
.mission-hero p {
  font-family: 'Inter', sans-serif; /* Added font family */
  max-width:68rem; /* Increased from 45rem */
  margin:0 auto;
  color:#C55026; /* Changed from #d4704a */
  font-size:1.75rem; /* Increased from 1rem */
  font-weight:400;
  line-height:1.5;
}

/* Full-width banner (large image under hero) */
.mission-banner { margin:1.375rem 0 2.625rem; }
.mission-banner img {
  width:100%;
  height:360px;
  display:block;
  object-fit:cover;
  border-radius:0px;
  background:#e9e9e9;

}

/* Reusable split section (image + text) */
.about-section {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2.75rem;
  padding:2.375rem 0;
}
.about-section.reverse { flex-direction:row-reverse; }

/* Image box (square) */
.about-image img {
  width:16.25rem;
  height:16.25rem;
  object-fit:cover;
  object-position:center 10%; 
  border-radius:0.375rem;
  display:block;
  background:#efefef;
  border:2px solid #e3e3e3;
}

/* Text block */
.about-text { max-width:32.5rem; }
.about-text h2 {
  font-family: 'Inter', sans-serif; /* Added font family */
  font-size:1.5rem; /* Increased from 1.15rem */
  font-weight:700; /* Added weight */
  color:#C55026; /* Changed from #d4704a */
  margin-bottom:0.625rem;
}
.about-text p {
  font-family: 'Inter', sans-serif; /* Added font family */
  font-size:1rem; /* Increased from .95rem */
  font-weight:400;
  color:#C55026; /* Changed from #222 */
  line-height:1.6;
}

/* In The Media Section */
.media-section {
  background: #FFFBF6;
  padding: 4rem 1.5rem;
  margin-top: 2rem;
}

.media-section .container {
  max-width: 75rem;
  margin: 0 auto;
  position: relative;
}

.media-section-heading {
  font-family: 'New Spirit Semibold', serif;
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #C55026;
  text-align: center;
  margin-bottom: 3rem;
}

.media-grid {
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6rem;
  max-width: 50rem;
  margin: 0 auto;
  position: relative;
}

.media-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-width: 22rem;
}

.media-image-placeholder {
  width: 100%;
  height: 250px;
  background: #FFFBF6;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #C55026;
  border-radius: 8px;
  padding: 0.75rem;
  box-sizing: border-box;
}

.media-image-inner {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.media-image-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.media-title {
  font-family: 'Heebo', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #C55026;
  margin: 1.5rem 0 0.75rem 0;
  padding: 0;
}

.media-description {
  font-family: 'Heebo', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: #C55026;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
  flex-grow: 1;
}

.media-read-more {
  font-family: 'Heebo', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #056D70;
  text-decoration: none;
  border: 2px solid #056D70;
  background: #fff;
  padding: 0.75rem 1.5rem;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 8px;
  transition: background 0.3s ease, color 0.3s ease;
  display: inline-block;
  width: fit-content;
}

.media-read-more:hover {
  background: #056D70;
  color: #fff;
}

@media (max-width: 64rem) {
  .media-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    row-gap: 5rem;

  }
  
  .media-section {
    padding: 3rem 1.25rem;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 48rem) {
  .media-grid {
    grid-template-columns: 1fr;
  }
  
  .media-section {
    padding: 2.5rem 1rem;
  }
}

/* ===========================
   START: HOMEPAGE STYLES
   =========================== */


   /*Animagtion

/* Hero Title Section with Decorative Shelves */
/* Initial state - hidden and shifted down */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Visible state - faded in and in position */
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-title-section {
  background: #FFFBF6;
  padding: 6.25rem 0 0 0;
  margin-left: 2rem;
  margin-right: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-title-container {
  max-width: 68.4375rem;
  width: 100%;
  display: flex;
  gap: 0;
  
  align-items: flex-start;
  transition: gap 0.5s ease, align-items 0.5s ease;
}

.shelf-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  transition: width 0.5s ease, flex 0.5s ease;
}

.shelf {
  border: 2px solid #C55026;
  border-radius: 0.625rem;
  height: 9.5rem;
  position: relative;
  margin-bottom: 2rem;
  background: #FFFBF6;
  transition: width 0.5s ease, overflow 0.5s ease;
  overflow: hidden;
}

.shelf-1, .shelf-2, .shelf-3 {
  overflow: hidden;
}


.shelf-content {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 2rem;
  padding-right: 2rem;
  transition: padding 0.5s ease;
  overflow: hidden;
}

.hero-title-word {
  line-height: 1;
  flex-shrink: 0;  

  font-family: 'New Spirit Semibold', serif;
  font-size: clamp(6rem, 8vw, 8rem);
  font-weight: 600;
  color: #C55026;
  line-height: 1;
  margin: 0;
  text-align: left;
  position: absolute;
  z-index: 2;
  transition: left 0.5s ease, transform 0.5s ease;
  white-space: nowrap;
  top: 50%;
  transform: translateY(-50%);
}

/* Shelf 1: left aligned at padding position */
.shelf-1 .hero-title-word {
  justify-content: center;
  left: 2rem;
}



/* Shelf 2: centered */
.shelf-2 .shelf-content {
  justify-content: center;
  padding-right: 12rem;
}

.shelf-2 .hero-title-word {
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding-right: 12rem;
}

/* Shelf 3: right aligned */
.shelf-3 .shelf-content {
  justify-content: flex-end;
  padding-right: 2rem;
}

.shelf-3 .hero-title-word {
  right: 2rem;
  left: auto;
  transform: translateY(-50%);
}

/* Shelf Decorations - Books and Kitchen Items OVERALL not individual */
.shelf-decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  transition: overflow 0.5s ease;
}

/* Shelf Items (Images) */
.shelf-item {
  position: absolute;
  max-width: 100%;
  height: 75%;
  width: 75%;
  object-fit: contain;
  transition: left 0.5s ease, opacity 0.3s ease, transform 0.5s ease;
}

/* Shelf 1 - "The" (decorations on RIGHT side only, avoiding left where text is) */
/* Text "The" is at left: 2rem, so items should start after ~12rem to avoid overlap */
.shelf-1 .shelf-item:nth-child(1) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 12rem;
  top: 1rem;
  transform: rotate(-3deg);
}

.shelf-1 .shelf-item:nth-child(2) {
  width: clamp(1.75rem, 2.2vw, 2.75rem);
  left: 14.5rem;
  top: 0.5rem;
  transform: rotate(2deg);
}

.shelf-1 .shelf-item:nth-child(3) {
  width: clamp(1.25rem, 1.8vw, 2rem);
  left: 17rem;
  top: 1.5rem;
  transform: rotate(-1deg);
}

.shelf-1 .shelf-item:nth-child(4) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 19.5rem;
  top: 0.8rem;
  transform: rotate(1.5deg);
}

.shelf-1 .shelf-item:nth-child(5) {
  width: clamp(1.75rem, 2.2vw, 2.75rem);
  left: 22rem;
  top: 1.2rem;
  transform: rotate(-2deg);
}

.shelf-1 .shelf-item:nth-child(6) {
  width: clamp(1.25rem, 1.8vw, 2rem);
  left: 24.5rem;
  top: 0.6rem;
  transform: rotate(2.5deg);
}

.shelf-1 .shelf-item:nth-child(7) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 27rem;
  top: 1.3rem;
  transform: rotate(-1.5deg);
}

.shelf-1 .shelf-item:nth-child(8) {
  width: clamp(1.75rem, 2.2vw, 2.75rem);
  left: 29.5rem;
  top: 0.7rem;
  transform: rotate(1deg);
}

.shelf-1 .shelf-item:nth-child(9) {
  width: clamp(1.25rem, 1.8vw, 2rem);
  left: 32rem;
  top: 1.4rem;
  transform: rotate(-2.5deg);
}

.shelf-1 .shelf-item:nth-child(10) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 34.5rem;
  top: 0.9rem;
  transform: rotate(2deg);
}

.shelf-1 .shelf-item:nth-child(11) {
  width: clamp(3rem, 4vw, 4.5rem);
  left: 37rem;
  top: 2.5rem;
  transform: rotate(-5deg);
}

.shelf-1 .shelf-item:nth-child(12) {
  width: clamp(2rem, 2.5vw, 3rem);
  left: 42rem;
  top: 1.5rem;
  transform: rotate(8deg);
}

.shelf-1 .shelf-item:nth-child(13) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 45rem;
  top: 0.5rem;
  transform: rotate(-1deg);
}

.shelf-1 .shelf-item:nth-child(14) {
  width: clamp(1.75rem, 2.2vw, 2.75rem);
  left: 47.5rem;
  top: 1.1rem;
  transform: rotate(2deg);
}

.shelf-1 .shelf-item:nth-child(15) {
  width: clamp(1.25rem, 1.8vw, 2rem);
  left: 50rem;
  top: 0.7rem;
  transform: rotate(-1.5deg);
}

.shelf-1 .shelf-item:nth-child(16) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 52.5rem;
  top: 1.3rem;
  transform: rotate(2.5deg);
}

.shelf-1 .shelf-item:nth-child(17) {
  width: clamp(1.75rem, 2.2vw, 2.75rem);
  left: 55rem;
  top: 0.6rem;
  transform: rotate(-2deg);
}

.shelf-1 .shelf-item:nth-child(18) {
  width: clamp(1.25rem, 1.8vw, 2rem);
  left: 57.5rem;
  top: 1.2rem;
  transform: rotate(1.8deg);
}

.shelf-1 .shelf-item:nth-child(19) {
  width: clamp(3rem, 4vw, 4.5rem);
  left: 60rem;
  top: 2.5rem;
  transform: rotate(-5deg);
}

.shelf-1 .shelf-item:nth-child(20) {
  width: clamp(2rem, 2.5vw, 3rem);
  left: 64.5rem;
  top: 1.5rem;
  transform: rotate(8deg);
}

/* Shelf 2 - "Student" (decorations on BOTH SIDES, avoiding center where text is) */
/* Text "Student" is centered at 50% (~34rem), so avoid ~25rem-43rem area */
.shelf-2 .shelf-item:nth-child(1) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 3rem;
  top: 1rem;
  transform: rotate(-2deg);
}

.shelf-2 .shelf-item:nth-child(2) {
  width: clamp(1.75rem, 2.2vw, 2.75rem);
  left: 5.5rem;
  top: 0.5rem;
  transform: rotate(1.5deg);
}

.shelf-2 .shelf-item:nth-child(3) {
  width: clamp(1.25rem, 1.8vw, 2rem);
  left: 8rem;
  top: 1.4rem;
  transform: rotate(-1deg);
}

.shelf-2 .shelf-item:nth-child(4) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 10.5rem;
  top: 0.8rem;
  transform: rotate(2deg);
}

.shelf-2 .shelf-item:nth-child(5) {
  width: clamp(1.75rem, 2.2vw, 2.75rem);
  left: 13rem;
  top: 1.2rem;
  transform: rotate(-1.5deg);
}

.shelf-2 .shelf-item:nth-child(6) {
  width: clamp(1.25rem, 1.8vw, 2rem);
  left: 43rem;
  top: 0.6rem;
  transform: rotate(2.5deg);
}

.shelf-2 .shelf-item:nth-child(7) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 45.5rem;
  top: 1.3rem;
  transform: rotate(-2deg);
}

.shelf-2 .shelf-item:nth-child(8) {
  width: clamp(1.75rem, 2.2vw, 2.75rem);
  left: 48rem;
  top: 0.7rem;
  transform: rotate(1deg);
}

.shelf-2 .shelf-item:nth-child(9) {
  width: clamp(1.25rem, 1.8vw, 2rem);
  left: 50.5rem;
  top: 1.4rem;
  transform: rotate(-2.5deg);
}

.shelf-2 .shelf-item:nth-child(10) {
  width: clamp(3rem, 4vw, 4.5rem);
  left: 53rem;
  top: 1.5rem;
  transform: rotate(-10deg);
}

.shelf-2 .shelf-item:nth-child(11) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 55.5rem;
  top: 0.8rem;
  transform: rotate(1.5deg);
}

.shelf-2 .shelf-item:nth-child(12) {
  width: clamp(1.75rem, 2.2vw, 2.75rem);
  left: 58rem;
  top: 1.1rem;
  transform: rotate(-2deg);
}

.shelf-2 .shelf-item:nth-child(13) {
  width: clamp(1.25rem, 1.8vw, 2rem);
  left: 60.5rem;
  top: 0.6rem;
  transform: rotate(2.5deg);
}

.shelf-2 .shelf-item:nth-child(14) {
  width: clamp(3rem, 4vw, 4.5rem);
  left: 63rem;
  top: 1.5rem;
  transform: rotate(-10deg);
}

/* Shelf 3 - "Kitchen" (decorations on LEFT side only) */
.shelf-3 .shelf-item:nth-child(1) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 1.5rem;
  top: 1rem;
  transform: rotate(-2deg);
}

.shelf-3 .shelf-item:nth-child(2) {
  width: clamp(1.75rem, 2.2vw, 2.75rem);
  left: 4rem;
  top: 0.5rem;
  transform: rotate(1.5deg);
}

.shelf-3 .shelf-item:nth-child(3) {
  width: clamp(1.25rem, 1.8vw, 2rem);
  left: 6.5rem;
  top: 1.4rem;
  transform: rotate(-1deg);
}

.shelf-3 .shelf-item:nth-child(4) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 9rem;
  top: 0.8rem;
  transform: rotate(2deg);
}

.shelf-3 .shelf-item:nth-child(5) {
  width: clamp(1.75rem, 2.2vw, 2.75rem);
  left: 11.5rem;
  top: 1.2rem;
  transform: rotate(-1.5deg);
}

.shelf-3 .shelf-item:nth-child(6) {
  width: clamp(1.25rem, 1.8vw, 2rem);
  left: 14rem;
  top: 0.6rem;
  transform: rotate(2.5deg);
}

.shelf-3 .shelf-item:nth-child(7) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 16.5rem;
  top: 1.3rem;
  transform: rotate(-2deg);
}

.shelf-3 .shelf-item:nth-child(8) {
  width: clamp(1.75rem, 2.2vw, 2.75rem);
  left: 19rem;
  top: 0.7rem;
  transform: rotate(1deg);
}

.shelf-3 .shelf-item:nth-child(9) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 21.5rem;
  top: 1rem;
  transform: rotate(-2deg);
}

.shelf-3 .shelf-item:nth-child(10) {
  width: clamp(1.75rem, 2.2vw, 2.75rem);
  left: 24rem;
  top: 0.5rem;
  transform: rotate(1.5deg);
}

.shelf-3 .shelf-item:nth-child(11) {
  width: clamp(1.25rem, 1.8vw, 2rem);
  left: 26.5rem;
  top: 1.4rem;
  transform: rotate(-1deg);
}

.shelf-3 .shelf-item:nth-child(12) {
  width: clamp(2rem, 2.5vw, 3rem);
  left: 3rem;
  top: 2rem;
  transform: rotate(-5deg);
}

.shelf-3 .shelf-item:nth-child(13) {
  width: clamp(2rem, 2.5vw, 3rem);
  left: 6rem;
  top: 2rem;
  transform: rotate(5deg);
}


/* Hero Mission Box (Right Side) */
.hero-mission-box {
  display: block;
  flex: 0 0 auto;
  width: 0;
  max-width: 32rem;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  padding-left: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, width 0.5s ease, padding-left 0.5s ease;
}

@media (max-width: 1100px) {
  .hero-mission-box {
    padding-right: 1rem;
  }
}

.hero-mission-box-inner {
  border: 2px solid #C55026;
  border-radius: 0.625rem;
  border-style: solid;
  padding: 2rem;
  height: calc(10.8rem * 3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: all 0.5s ease;
}

.hero-mission-text {
  margin: 0 0 2rem 0;
  color: var(--Primary-Orange, #C55026);
  font-family: 'Inter', sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px; /* 104.167% */
  letter-spacing: var(--Static-Display-Medium-Tracking, 0);
  max-width:  340px;
  
}

.hero-programs-container p{
  font-family: 'Inter', sans-serif !important;
  font-size: 28px;
  font-style: normal !important;
  font-weight: 400;
  line-height: 128.571%;

}

.hero-view-programs-btn {
  align-self:flex-end;
  background: #FFFBF6;
  border: 2px solid #185F72;
  color: #185F72;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;

  border-radius: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  cursor: pointer;
  transition: all 0.3s ease;
  width: fit-content;
  text-decoration: none;
}

.hero-view-programs-btn:hover {
  background: #185F72;
  color: #FFFBF6;
}

/* Scroll-triggered transformation */
.hero-title-section.scrolled .hero-title-container {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  position: relative;
  transition: gap 0.5s ease, align-items 0.5s ease;
}

.hero-title-section.scrolled .shelf-wrapper {
  flex: 0 0 auto;
  width: 50%;
  transition: width 0.5s ease, flex 0.5s ease;
}

.hero-title-section.scrolled .hero-mission-box {
  width: 50%;
  max-width: 32rem;
  opacity: 1;
  padding-left: 2rem;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.5s ease, width 0.5s ease, padding-left 0.5s ease;
}

/* Transform shelves 1-3 to shrink left */
.hero-title-section.scrolled .shelf-1,
.hero-title-section.scrolled .shelf-2,
.hero-title-section.scrolled .shelf-3 {
  width: 100%;
  overflow: hidden;
}

/* When scrolled, all text moves to left position */
.hero-title-section.scrolled .shelf-1 .shelf-content,
.hero-title-section.scrolled .shelf-2 .shelf-content,
.hero-title-section.scrolled .shelf-3 .shelf-content {
  justify-content: flex-start;
  padding-left: 2rem;
  padding-right: 0;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.hero-title-section.scrolled .shelf-1 .shelf-flex-content .books-row-1-fade {
  animation:  fadeOut 1s forwards;
}

.hero-title-section.scrolled .shelf-2 .shelf-flex-content .books-row-2-fade {
  animation:  fadeOut 1s forwards;
}

.hero-title-section.scrolled .shelf-3 .shelf-flex-content .books-row-3-fade {
  animation:  fadeOut 1s forwards;
}


/* Smoothly move all text to left position using left property */
.hero-title-section.scrolled .shelf-1 .hero-title-word {
  left: 2rem;
  transform: translateY(-50%);
}

.hero-title-section.scrolled .shelf-2 .hero-title-word {
  left: 2rem;
  transform: translateY(-50%);
}

.hero-title-section.scrolled .shelf-3 .hero-title-word {
  left: 2rem;
  right: auto;
  transform: translateY(-50%);
}

/* Move shelf items left and hide overflow */
.hero-title-section.scrolled .shelf-1 .shelf-decorations,
.hero-title-section.scrolled .shelf-2 .shelf-decorations,
.hero-title-section.scrolled .shelf-3 .shelf-decorations {
  overflow: hidden;
}

/* Adjust shelf-1 items to move left */
.hero-title-section.scrolled .shelf-1 .shelf-item:nth-child(1) { left: 3rem !important; }
.hero-title-section.scrolled .shelf-1 .shelf-item:nth-child(2) { left: 5.5rem !important; }
.hero-title-section.scrolled .shelf-1 .shelf-item:nth-child(3) { left: 8rem !important; }
.hero-title-section.scrolled .shelf-1 .shelf-item:nth-child(4) { left: 10.5rem !important; }
.hero-title-section.scrolled .shelf-1 .shelf-item:nth-child(5) { left: 13rem !important; }
.hero-title-section.scrolled .shelf-1 .shelf-item:nth-child(6) { left: 15.5rem !important; }

/* Adjust shelf-2 items to move left */
.hero-title-section.scrolled .shelf-2 .shelf-item:nth-child(1) { left: 3rem !important; }
.hero-title-section.scrolled .shelf-2 .shelf-item:nth-child(2) { left: 5.5rem !important; }
.hero-title-section.scrolled .shelf-2 .shelf-item:nth-child(3) { left: 8rem !important; }
.hero-title-section.scrolled .shelf-2 .shelf-item:nth-child(4) { left: 10.5rem !important; }
.hero-title-section.scrolled .shelf-2 .shelf-item:nth-child(5) { left: 13rem !important; }

/* Adjust shelf-3 items to move left */
.hero-title-section.scrolled .shelf-3 .shelf-item:nth-child(1) { left: 1.5rem !important; }
.hero-title-section.scrolled .shelf-3 .shelf-item:nth-child(2) { left: 4rem !important; }
.hero-title-section.scrolled .shelf-3 .shelf-item:nth-child(3) { left: 6.5rem !important; }
.hero-title-section.scrolled .shelf-3 .shelf-item:nth-child(4) { left: 9rem !important; }
.hero-title-section.scrolled .shelf-3 .shelf-item:nth-child(5) { left: 11.5rem !important; }

/* Explicitly set positions for shelf-3 items 6-10 to prevent animation before hiding */
.hero-title-section.scrolled .shelf-3 .shelf-item:nth-child(6) { 
  left: 14rem !important; 
  transition: none !important;
}
.hero-title-section.scrolled .shelf-3 .shelf-item:nth-child(7) { 
  left: 16.5rem !important; 
  transition: none !important;
}
.hero-title-section.scrolled .shelf-3 .shelf-item:nth-child(8) { 
  left: 19rem !important; 
  transition: none !important;
}
.hero-title-section.scrolled .shelf-3 .shelf-item:nth-child(9) { 
  left: 3rem !important; 
  transition: none !important;
}
.hero-title-section.scrolled .shelf-3 .shelf-item:nth-child(10) { 
  left: 6rem !important; 
  transition: none !important;
}

/* Hide ALL items on shelves 1-3 during/after animation */
.hero-title-section.scrolled .shelf-1 .shelf-item,
.hero-title-section.scrolled .shelf-2 .shelf-item,
.hero-title-section.scrolled .shelf-3 .shelf-item {
  opacity: 0 !important;
  pointer-events: none;
  transition: none !important;
  visibility: hidden !important;
}

/* Specifically target shelf-3 items 9 and 10 which are positioned low and might appear on shelf-4 */
.hero-title-section.scrolled .shelf-3 .shelf-item:nth-child(9),
.hero-title-section.scrolled .shelf-3 .shelf-item:nth-child(10) {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
  transform: none !important;
}

/* Keep shelf-4 unchanged - it should stay full width */
.hero-title-section.scrolled .hero-title-container {
  position: relative;
  /* Only add padding for shelf-4's height + margin since it's absolutely positioned */
  padding-bottom: calc(9.5rem + 2rem);
}

.hero-title-section.scrolled .shelf-wrapper {
  position: relative;
}

/* ============================================
   SHELF-4 - COMPLETE REBUILD - NO TRANSITIONS
   ============================================ */

/* Base shelf-4 - NO transitions ever - completely independent */
.shelf-4 {
  transition: none !important;
  width: 100% !important;
  position: relative !important;
  overflow: visible !important;
}

/* Ensure shelf-4 is not affected by shelf-wrapper transitions */
.shelf-wrapper:has(.shelf-4) {
  transition: width 0.5s ease, flex 0.5s ease;
}

/* Shelf-4 decorations - NO transitions, NO animations */
.shelf-4 .shelf-decorations {
  transition: none !important;
  animation: none !important;
  width: 100% !important;
  position: absolute !important;
  left: 0 !important;
}

/* All shelf-4 items - NO transitions, NO animations */
.shelf-4 .shelf-item {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* Shelf-4 item positions - static, no transitions - all books */
.shelf-4 .shelf-item:nth-child(1) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 3rem;
  top: 1rem;
  transform: rotate(-2deg);
}

.shelf-4 .shelf-item:nth-child(2) {
  width: clamp(1.75rem, 2.2vw, 2.75rem);
  left: 5.5rem;
  top: 0.5rem;
  transform: rotate(1.5deg);
}

.shelf-4 .shelf-item:nth-child(3) {
  width: clamp(1.25rem, 1.8vw, 2rem);
  left: 8rem;
  top: 1.4rem;
  transform: rotate(-1deg);
}

.shelf-4 .shelf-item:nth-child(4) {
  width: clamp(2rem, 2.5vw, 3rem);
  left: 10.5rem;
  top: 0.8rem;
  transform: rotate(2deg);
}

.shelf-4 .shelf-item:nth-child(5) {
  width: clamp(1.4rem, 1.9vw, 2.4rem);
  left: 13rem;
  top: 1.2rem;
  transform: rotate(-1.5deg);
}

.shelf-4 .shelf-item:nth-child(6) {
  width: clamp(1.8rem, 2.3vw, 2.8rem);
  left: 15.5rem;
  top: 0.6rem;
  transform: rotate(1deg);
}

.shelf-4 .shelf-item:nth-child(7) {
  width: clamp(2rem, 2.5vw, 3rem);
  left: 18rem;
  top: 1rem;
  transform: rotate(-2deg);
}

.shelf-4 .shelf-item:nth-child(8) {
  width: clamp(1.7rem, 2.2vw, 2.7rem);
  left: 20.5rem;
  top: 0.9rem;
  transform: rotate(1.8deg);
}

.shelf-4 .shelf-item:nth-child(9) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 23rem;
  top: 1.1rem;
  transform: rotate(-1.2deg);
}

.shelf-4 .shelf-item:nth-child(10) {
  width: clamp(3rem, 4vw, 4.5rem);
  left: 25.5rem;
  top: 1.5rem;
  transform: rotate(-10deg);
}

.shelf-4 .shelf-item:nth-child(11) {
  width: clamp(1.4rem, 1.9vw, 2.4rem);
  left: 30rem;
  top: 1.4rem;
  transform: rotate(-1.8deg);
}

.shelf-4 .shelf-item:nth-child(12) {
  width: clamp(1.8rem, 2.3vw, 2.8rem);
  left: 32.5rem;
  top: 0.8rem;
  transform: rotate(1.5deg);
}

.shelf-4 .shelf-item:nth-child(13) {
  width: clamp(2rem, 2.5vw, 3rem);
  left: 35rem;
  top: 1rem;
  transform: rotate(-2deg);
}

.shelf-4 .shelf-item:nth-child(13) {
  width: clamp(2rem, 2.5vw, 3rem);
  left: 35rem;
  top: 1rem;
  transform: rotate(-2deg);
}

.shelf-4 .shelf-item:nth-child(14) {
  width: clamp(1.7rem, 2.2vw, 2.7rem);
  left: 37.5rem;
  top: 0.6rem;
  transform: rotate(1.2deg);
}

.shelf-4 .shelf-item:nth-child(15) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 40rem;
  top: 1.3rem;
  transform: rotate(-1.5deg);
}

.shelf-4 .shelf-item:nth-child(16) {
  width: clamp(2.5rem, 3vw, 3.5rem);
  left: 42.5rem;
  top: 1.5rem;
  transform: rotate(-8deg);
}

.shelf-4 .shelf-item:nth-child(17) {
  width: clamp(1.4rem, 1.9vw, 2.4rem);
  left: 46rem;
  top: 1.1rem;
  transform: rotate(-1deg);
}

.shelf-4 .shelf-item:nth-child(18) {
  width: clamp(1.8rem, 2.3vw, 2.8rem);
  left: 48.5rem;
  top: 0.7rem;
  transform: rotate(1.8deg);
}

.shelf-4 .shelf-item:nth-child(19) {
  width: clamp(2rem, 2.5vw, 3rem);
  left: 51rem;
  top: 0.9rem;
  transform: rotate(2deg);
}

.shelf-4 .shelf-item:nth-child(20) {
  width: clamp(1.7rem, 2.2vw, 2.7rem);
  left: 54rem;
  top: 0.8rem;
  transform: rotate(1.5deg);
}

.shelf-4 .shelf-item:nth-child(21) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 56.5rem;
  top: 1.2rem;
  transform: rotate(-1.8deg);
}

.shelf-4 .shelf-item:nth-child(22) {
  width: clamp(2rem, 2.5vw, 3rem);
  left: 59rem;
  top: 1rem;
  transform: rotate(-2deg);
}

/* SHELVEs */
.shelf-flex-content {
  display: flex;
  align-self: end;
  gap: 3px;
  margin-top: 10px;
  overflow: hidden;

}



.shelf-1 .shelf-flex-content {
  margin-left: clamp(15rem, 19vw, 20rem);
  
}

.shelf-2 .shelf-flex-content .div1 {
  margin-left: 2rem;
  
}

.shelf-2 .shelf-flex-content .div2{
  margin-left: 44rem;
  
}

.shelf-3 .shelf-flex-content {
  margin-left: 2rem;
  
}

.shelf-4 .shelf-flex-content {
  margin-left: 2rem;
  overflow: hidden;
  
}

/* Book spacing */
.books-row-1 {
  display: flex;
  position: relative;
  align-items: flex-end;
  gap: 3px;
  flex-wrap: nowrap;  /* Books stay in one row */
  overflow-x: hidden;    /* Hide overflow to prevent scrollbars */
  flex: 1;  /* Take remaining space */
  
}


.books-row-1-fade {
  display: flex;
  position: absolute;
  align-items: flex-end;
  width: 100%;
  gap: 3px;
  flex-wrap: nowrap;  /* Books stay in one row */
  overflow-x: hidden;    /* Hide overflow to prevent scrollbars */
  flex: 1;  /* Take remaining space */
  
}


/* Book spacing */
.books-row-2-fade {
  display: flex;
  position: absolute;
  align-items: flex-end;
  width: 100%;
  gap: 3px;
  flex-wrap: nowrap;  /* Books stay in one row */
  overflow-x: hidden;    /* Hide overflow to prevent scrollbars */
  flex: 1;  /* Take remaining space */
  
}

/* Book spacing */
.books-row-3-fade {
  display: flex;
  position: absolute;
  align-items: flex-end;
  width: 100%;
  gap: 3px;
  flex-wrap: nowrap;  /* Books stay in one row */
  overflow-x: hidden;    /* Hide overflow to prevent scrollbars */
  flex: 1;  /* Take remaining space */
  
}

/* Book spacing */
.books-row-4 {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  flex-wrap: nowrap;  /* Books stay in one row */
  overflow-x: hidden;    /* Hide overflow to prevent scrollbars */
  flex: 1;  /* Take remaining space */
  overflow: hidden;
}

.book {
  background-color: #FFEBD0;
  border: 2px solid #FFEBD0;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

/* book hover interaction */
.book:hover {
  transform: translateY(-5px);
}


/* Book size variations */
.book-xs { width: 0.625rem; height: 3.75rem; }
.book-sm { width: 0.625rem; height: 5.375rem; }
.book-md { width: 0.6875rem; height: 6.3125rem; }
.book-lg { width: 0.875rem; height: 6.75rem; }
.book-md-wide { width: 1.3125rem; height: 6.3125rem; }

/* Slight rotations for visual interest */
.book-tilt-left { 
  transform: rotate(-7deg); 
  margin-left: 4px ;
  margin-right: 4px;
}
.book-tilt-right { 
  transform: rotate(7deg); 
  margin-left: 4px ;
  margin-right: 4px ;
}
.book-tilt-more { transform: rotate(4deg); }


/* Shelf 1 books: left aligned at padding position */
.shelf-1 .book-spacing-1 {
  left: 3rem;
}

.bowl{
  width: 100px;
  height: 60px;
}

.whisk{
  width: 55px;
  height: auto;
  margin-left: -10px;
}




/* Scrolled state - shelf-4 stays full width, NO transitions, NO animations */
/* Position shelf-4 relative to hero-title-container, not shelf-wrapper */
/* Break out of shelf-wrapper's 50% width constraint */
.hero-title-section.scrolled .shelf-4 {
  position: absolute !important;
  left: 0 !important;
  /* Since shelf-wrapper is 50% width, shelf-4 needs 200% to match container's full width */
  width: 203% !important;
  max-width: 68.4375rem !important;
  margin-left: 0 !important;
  margin-bottom: 2rem;
  z-index: 1;
  top: calc(9.5rem * 3 + 2rem * 3);
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-decorations {
  width: 100% !important;
  transition: none !important;
  animation: none !important;
  position: absolute !important;
  left: 0 !important;
}

/* Scrolled state - all shelf-4 items stay exactly where they are - lock positions */
.hero-title-section.scrolled .shelf-4 .shelf-item {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(1) {
  left: 3rem !important;
  top: 1rem !important;
  transform: rotate(-2deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(2) {
  left: 5.5rem !important;
  top: 0.5rem !important;
  transform: rotate(1.5deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(3) {
  left: 8rem !important;
  top: 1.4rem !important;
  transform: rotate(-1deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(4) {
  left: 10.5rem !important;
  top: 0.8rem !important;
  transform: rotate(2deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(5) {
  left: 13rem !important;
  top: 1.2rem !important;
  transform: rotate(-1.5deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(6) {
  left: 15.5rem !important;
  top: 0.6rem !important;
  transform: rotate(1deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(7) {
  left: 18rem !important;
  top: 1rem !important;
  transform: rotate(-2deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(8) {
  left: 20.5rem !important;
  top: 0.9rem !important;
  transform: rotate(1.8deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(9) {
  left: 23rem !important;
  top: 1.1rem !important;
  transform: rotate(-1.2deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(10) {
  left: 25.5rem !important;
  top: 1.5rem !important;
  transform: rotate(-10deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(11) {
  left: 30rem !important;
  top: 1.4rem !important;
  transform: rotate(-1.8deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(12) {
  left: 32.5rem !important;
  top: 0.8rem !important;
  transform: rotate(1.5deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(13) {
  left: 35rem !important;
  top: 1rem !important;
  transform: rotate(-2deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(14) {
  left: 37.5rem !important;
  top: 0.6rem !important;
  transform: rotate(1.2deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(15) {
  left: 40rem !important;
  top: 1.3rem !important;
  transform: rotate(-1.5deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(16) {
  left: 42.5rem !important;
  top: 1.5rem !important;
  transform: rotate(-8deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(17) {
  left: 46rem !important;
  top: 1.1rem !important;
  transform: rotate(-1deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(18) {
  left: 48.5rem !important;
  top: 0.7rem !important;
  transform: rotate(1.8deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(19) {
  left: 51rem !important;
  top: 0.9rem !important;
  transform: rotate(2deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(20) {
  left: 54rem !important;
  top: 0.8rem !important;
  transform: rotate(1.5deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(21) {
  left: 56.5rem !important;
  top: 1.2rem !important;
  transform: rotate(-1.8deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-item:nth-child(22) {
  left: 59rem !important;
  top: 1rem !important;
  transform: rotate(-2deg) !important;
}

.hero-title-section.scrolled .shelf-4 .shelf-decorations {
  width: 100% !important;
  transition: none !important;
  animation: none !important;
}

/* Our Mission Section */
.mission-section {
  background: #FFFBF6;
  padding: 6.25rem 1.5rem;
}

.mission-container {
  max-width: 90rem;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.mission-text {
  flex: 1;
  padding: 0 0 0 6.125rem;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.mission-image {
  flex: 0 0 auto;
  padding: 0 2.375rem;
}
.mission-image-mobile {
  display: none;
  flex: 0 0 auto;
  padding: 0 2.375rem;
}

.section-heading {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 700;
  color: #C55026;
  line-height: 1.25;
  margin: 0;
}

.section-text {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.25rem, 1.75vw, 1.75rem);
  font-weight: 400;
  color: #C55026;
  line-height: 1.5;
  margin: 0;
  max-width: 30.625rem;
}

.mission-section .section-text,
.programs-section .section-text {
  font-family: 'Heebo Regular', sans-serif;
  font-weight: 400;
}

.read-more-btn,
.view-programs-btn {
  background: #FFFBF6;
  border: 2px solid #185F72;
  color: #185F72;
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  cursor: pointer;
  width: fit-content;
  max-width: 13rem;
  min-width: 13rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.read-more-btn:hover,
.view-programs-btn:hover {
  background: #185F72;
  color: #FFFBF6;
}

.mission-image {
  flex: 0 0 auto;
  padding: 0 2.375rem;
}

.image-frame {
  display: flex;
  justify-self: center;
  border: 2px solid #C55026;
  border-radius: 0.625rem;
  padding: 1.25rem;
  width: clamp(20rem, 38vw, 38.125rem);
  height: clamp(20rem, 38vw, 38.125rem);
  position: relative;
  overflow: hidden;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  background: #D7D7D7;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.625rem;
  display: block;
  overflow: hidden;
}

/* Programs Section - Homepage */
.programs-section {
  background: #FFFBF6;
  padding: 0 0 1.5rem 1.5rem;
}

.programs-container {
  max-width: 90rem;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.programs-text {
  flex: 1;
  padding: 0 0 0 6.125rem;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.programs-image {
  flex: 0 0 auto;
  padding: 0 2.375rem;
}

/* News Articles Section - Homepage */
.news-section {
  background: #FFFBF6;
  padding: 6.25rem 1.5rem;
  justify-self: center;
}

.news-section .container {
  max-width: 70rem;
  margin: 0 auto;
}

.news-section .section-heading {
  text-align: center;
  margin-bottom: 3rem;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10rem;
  max-width: 80rem;
  margin: 0 auto;
}

.news-card-image-wrapper{
  display: flex;
  justify-content: center;
  padding: 20px;
  border-radius: 10px;
  border: 2px solid  #C55026;
  
}

.news-card-image{
  border-radius: 10px;
  width: 305px;
  max-width: 305px;
  overflow: hidden;

}

.news-card {
  max-width: 70rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.news-title {
  letter-spacing: 0.1px;
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #C55026;
  margin: 0;
}

.news-excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #C55026;
  line-height: 1.75rem;
  flex-grow: 1;
}

.news-link {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #185F72;
  text-decoration: none;
  transition: color 0.3s ease;
}

.news-link:hover {
  color: #045a5c;
  text-decoration: underline;
}

@media (max-width: 64rem) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 48rem) {
  .news-section {
    padding: 3.75rem 1.25rem;
  }
  
  .news-grid {
    grid-template-columns: 1fr;
  }
}

/* Student Testimonials Section - Homepage */
.student-testimonials-section {
  background: #FFFBF6;
  padding: 6.25rem 1.5rem;
  max-width: 80rem;
  justify-self: center;
}

.testimonials-container {
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: start;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  background: transparent;


}

#primary-card{
  border-radius: 10px 10px 0 0;
}

#flipped-card{
  border-radius: 0 0 10px 10px;
}

.testimonial-image-top {
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 0;
  overflow: hidden;
  position: relative;
  
}

.testimonial-image-top .image-placeholder {
  width: 100%;
  height: 100%;
  background: #D7D7D7;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-image-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.testimonial-card-flipped {
  flex-direction: column-reverse;
  
}

.testimonial-content {
  background: #FFF1DC;
  padding: 2rem;
  position: relative;
  margin-top: 0;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonial-content .quotation-mark {
  width: 50px;
  height: 44px;
  position: absolute;
  left: -10px;
  top: 23px;
  display: block;
}

.testimonial-content .quotation-mark::before {
  content: '';
  display: block;
  width: 50px;
  height: 44px;
  /* ========== MODIFY IMAGE HERE: SVG quotation mark (inline SVG data URI) ========== */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='44' viewBox='0 0 50 44' fill='none'%3E%3Cpath d='M19.0576 0C20.0132 0.000111737 20.6958 0.279479 21.1056 0.837638C21.652 1.25667 21.9264 1.88587 21.9264 2.72392C21.9264 3.56202 21.6521 4.33061 21.1056 5.02903C20.5594 5.72703 19.8768 6.21555 19.0576 6.4949C16.3254 7.333 14.2067 8.87018 12.704 11.1051C11.3382 13.3398 10.6561 15.6445 10.656 18.0188C10.656 21.5109 11.8168 23.8864 14.1392 25.1435C16.4614 26.4006 18.1696 27.5877 19.2624 28.7051C20.3551 29.8226 20.9008 31.4994 20.9008 33.7341C20.9007 36.5276 19.9445 38.9715 18.032 41.0667C16.1195 43.0222 14.1388 44 12.0896 44C8.12825 43.9999 5.1227 42.3943 3.0736 39.182C1.02445 35.9693 0 31.9869 0 27.2376C0.00014303 23.0474 1.16098 18.8569 3.48321 14.6667C5.80548 10.4764 8.53815 6.98497 11.68 4.19139C14.822 1.39773 17.2817 0 19.0576 0Z' fill='%23C55026'/%3E%3Cpath d='M47.1296 0C48.0856 0 48.7693 0.279299 49.1792 0.837638C49.7256 1.25667 50 1.88587 50 2.72392C50 3.56202 49.7257 4.33061 49.1792 5.02903C48.6328 5.72727 47.9492 6.21557 47.1296 6.4949C44.3977 7.33304 42.2802 8.87033 40.7776 11.1051C39.4117 13.3398 38.7297 15.6445 38.7296 18.0188C38.7296 21.5109 39.8904 23.8864 42.2128 25.1435C44.535 26.4006 46.2432 27.5877 47.336 28.7051C48.4286 29.8226 48.9744 31.4994 48.9744 33.7341C48.9743 36.5276 48.018 38.9716 46.1056 41.0667C44.1931 43.0222 42.2124 44 40.1632 44C36.2018 44 33.1963 42.3943 31.1472 39.182C29.0981 35.9693 28.0736 31.9869 28.0736 27.2376C28.0737 23.0474 29.2346 18.8569 31.5568 14.6667C33.8791 10.4764 36.6117 6.98497 39.7536 4.19139C42.8952 1.39814 45.3538 0.000408176 47.1296 0Z' fill='%23C55026'/%3E%3C/svg%3E");
  /* ==================================================================== */
  background-repeat: no-repeat;
  background-size: contain;
}

.testimonial-quote {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #C55026;
  line-height: 1.75rem;
  margin: 3rem 0 1.5rem 0;
  padding-left: 1.5rem;
}

.testimonial-author {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #C55026;
  margin: 0;
  padding-left: 1.5rem;
}

/* Statistics Section */
.statistics-section {
  background: #FFF1DC;
  padding: 5rem 1.5rem;
  display: flex;
  justify-content: center;
}

.statistics-container {
  display: flex;
  gap: clamp(5rem, 18.75vw, 18.75rem);
  align-items: flex-start;
  max-width: 90rem;
  width: 100%;
  justify-content: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
  flex: 0 1 auto;
}

.stat-icon-wrapper {
  width: clamp(4rem, 6.25vw, 6.25rem);
  height: clamp(4rem, 6.25vw, 6.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pie-chart-wrapper {
  position: relative;
  width: clamp(4rem, 6.25vw, 6.25rem);
  height: clamp(4rem, 6.25vw, 6.25rem);
}

.pie-chart-icon-1 {
  width: clamp(3rem, 4.6875vw, 4.6875rem);
  height: clamp(3rem, 4.6875vw, 4.6875rem);
  display: block;
  position: relative;
}

.pie-chart-icon-2 {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(2rem, 2.5vw, 2.5rem);
  height: clamp(2rem, 2.5vw, 2.5rem);
  display: block;
  transform: translate(.005rem, -.005rem);
}

.stat-text {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  font-weight: 700;
  color: #C55026;
  line-height: 1.4;
  margin: 0;
  max-width: 15rem;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* =================
/* =================
/* START OF PROGRAMS PAGE
/* =================
/* =================

/* Programs Section */
/* Hero Section */
.programs-hero {
  background: #FFFBF6; 
  color: #C55026;
  padding: 3rem 0rem;
  text-align: center;
}

.programs-hero h2 {
  font-family: 'New Spirit Semibold', serif;
  color: #C55026;
  font-size: clamp(2.5rem, 4vw, 3rem); /* Was 1.75rem - too small! */
  font-weight: 700;
  margin: 0 0 1rem 0;
  letter-spacing: 0.96px;
}

.programs-hero p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: #C55026;
  font-style: normal;

  font-size: 1.75rem; 
  line-height: 1.6;
  max-width: 68rem; 
  margin: 0 auto; 
}



/* Programs Grid Layout */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 0rem auto 3rem !important;  max-width: 90rem; 
  justify-items: center;
  align-items: start; 
}

.programs-section .container {
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  padding-top: 0rem !important; 


}

/* Program Cards in Grid */
.program-card {
  background-color: #FFF1DC !important;
  border-radius: 0.375rem !important;
    overflow: visible !important;
  display: flex;
  flex-direction: column;
  width: 395px !important; 
  min-height: 317px !important; 
  height: auto !important; /* Allow expansion */
  transition: all 0.3s ease;
}

  .program-card-image {
    width: 100%;
    height: 15rem;
    background-color: #D7D7D7;
    flex-shrink: 0; /* Prevent shrinking */
    overflow: hidden;
    border-radius: 10px 10px 0 0;
  }

  .program-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

/* Card content can grow */
.program-card-content {
  padding: 3.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-grow: 1;
  position: relative; /* For gradient overlay positioning */
}

.program-level {
  align-self: stretch;
  color: #C55026;
  font-size: var(--Static-Title-Medium-Size, 16px);
font-style: normal;
font-weight: 500;
line-height: var(--Static-Title-Medium-Line-Height, 24px); /* 150% */
letter-spacing: var(--Static-Title-Medium-Tracking, 0.15px);
}

.program-title {
align-self: stretch;
color: #AE4721;
font-family: 'New Spirit Semibold', serif;
font-size: var(--Static-Headline-Medium-Size, 28px);
font-style: normal;
font-weight: 400;
line-height: 36px; /* 128.571% */
letter-spacing: var(--Static-Headline-Small-Tracking, 0);
}

.program-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.program-tag {
  display: flex !important;
  height: 2rem !important; 
  justify-content: center !important;
  align-items: center !important;
  padding: 0 0.75rem !important;
  border-radius: 0.5rem !important; 
  border: 2px solid #185F72 !important;
  background: #FFFBF6 !important;
  

  color: #185F72 !important; 
  text-align: center !important;
  font-family: 'Inter', 'Inter', sans-serif !important; 
  font-size: 0.875rem !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.25rem !important; 
  letter-spacing: 0.00625rem !important; 
  
  white-space: nowrap;
}


.program-description {
  font-size: 0.875rem;
  font-weight: 400;
  color: #5D4037;
  line-height: 1.6;
  margin: 0;
}

/* Dropdown summary/header styling */
.program-dropdown summary {
  padding: 1rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #C55026;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFBF6;
  transition: background 0.2s ease;
}

.program-dropdown summary::-webkit-details-marker {
  display: none;
}

/* Chevron icon for dropdowns */
.program-dropdown summary::after {
  content: '';
  width: 24px;
  height: 24px;
  /* ========== MODIFY IMAGE HERE: SVG chevron dropdown icon (inline SVG data URI) ========== */
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23C55026' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  /* ============================================================================ */
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.program-dropdown[open] summary::after {
  transform: rotate(180deg);
}

.program-dropdown summary:hover {
  background: #FFF8F0;
}

/* Dropdown content */
.dropdown-content {
  padding: 0 1rem 1rem 1rem;
  font-size: 0.95rem;
  font-weight: 400;
  color: #C55026;
  line-height: 1.6;
  background: #FFFBF6;
}

.dropdown-content p {
  margin: 0;
  color: #C55026;
}

/*
animate in
*/
/* Initial state and animation */
.content-section.contact-section {
  animation: slideUpFadeIn 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(50px);
}

/* Keyframe animation */
@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Contact Section Styling */
.contact-section {
  background-color: #185F72 !important;
  padding: 1rem 3.625rem !important;
    margin: 0;
    position: sticky !important; 
    bottom: 0; /* Sticks to bottom */
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  display: flex !important;
  align-items: center !important;
}

.contact-section .container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 2rem;
  flex: 1 0 0 !important;
  align-self: stretch !important;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.contact-section h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 300 !important; 
  line-height: 2.25rem !important; 
  color: #FFFBF6 !important;
  margin: 0 !important;
  flex: 1;
}

/* Bold the middle part */
.contact-section h2 strong {
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important; /* Same weight as rest */
  font-size: 1.4rem !important;
  color: #FFF1DC !important;

}

.contact-section * {
  color: #FFFBF6 !important;
}

.contact-section p {
  display: none !important;
}

.contact-button {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  
  padding: 0.75rem !important;
  margin: 0 !important;
  
  background: #FFFBF6 !important;
  color: #185F72 !important;
  border: 2px solid #185F72 !important;
  border-radius: 0.5rem !important;
  
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 100% !important;
  letter-spacing: 0.05rem !important;
  text-transform: uppercase !important;
  text-decoration: none !important; 
  
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.contact-button:hover {
  background-color: #185F72 !important;
  color: #FFFBF6 !important;
  border-color: #185F72 !important;
  text-decoration: none !important; /* No underline on hover */
}

/* Add padding to bottom so content isn't hidden */
main {
  padding-bottom: 6rem;
  gap: 0 !important;
}

/* Mobile Responsive */
@media (max-width: 48rem) {
  .contact-section {
      padding: 0.5rem 1.5rem !important;
  }
  
  .contact-section h2 {
    font-size: 1.25rem !important; /* 20px mobile */
    font-weight: 400 !important; /* Regular weight */
    line-height: 1.875rem !important; /* 30px - 150% */
}

.contact-section h2 strong {
    font-weight: 700 !important; /* Keep bold on mobile */
}
  
  .contact-button {
      padding: 0.375rem 1rem !important;
      font-size: 0.75rem !important;
  }
  
  main {
      padding-bottom: 5rem;
  }
}



/* Testimonials Section - Programs Page */

.testimonials {
  background: #FFF1DC; /* Cream bar background */
  padding: 4rem 0;
}

.testimonials-three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 3rem 0;
}

.testimonial-box {
  background: #FFFBF6; /* White cards */
  padding: 0rem 3rem 3rem 3rem;
  border: none;
  border-radius: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Large quotation mark - SVG version */
.testimonial-box .quotation-mark {
  width: 50px;
  height: 44px;
  position: absolute;
  left: -10px;
  top: 23px;
  display: block;
}

.testimonial-box .quotation-mark::before {
  content: '';
  display: block;
  width: 50px;
  height: 44px;
  /* ========== MODIFY IMAGE HERE: SVG quotation mark (inline SVG data URI) ========== */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='44' viewBox='0 0 50 44' fill='none'%3E%3Cpath d='M19.0576 0C20.0132 0.000111737 20.6958 0.279479 21.1056 0.837638C21.652 1.25667 21.9264 1.88587 21.9264 2.72392C21.9264 3.56202 21.6521 4.33061 21.1056 5.02903C20.5594 5.72703 19.8768 6.21555 19.0576 6.4949C16.3254 7.333 14.2067 8.87018 12.704 11.1051C11.3382 13.3398 10.6561 15.6445 10.656 18.0188C10.656 21.5109 11.8168 23.8864 14.1392 25.1435C16.4614 26.4006 18.1696 27.5877 19.2624 28.7051C20.3551 29.8226 20.9008 31.4994 20.9008 33.7341C20.9007 36.5276 19.9445 38.9715 18.032 41.0667C16.1195 43.0222 14.1388 44 12.0896 44C8.12825 43.9999 5.1227 42.3943 3.0736 39.182C1.02445 35.9693 0 31.9869 0 27.2376C0.00014303 23.0474 1.16098 18.8569 3.48321 14.6667C5.80548 10.4764 8.53815 6.98497 11.68 4.19139C14.822 1.39773 17.2817 0 19.0576 0Z' fill='%23C55026'/%3E%3Cpath d='M47.1296 0C48.0856 0 48.7693 0.279299 49.1792 0.837638C49.7256 1.25667 50 1.88587 50 2.72392C50 3.56202 49.7257 4.33061 49.1792 5.02903C48.6328 5.72727 47.9492 6.21557 47.1296 6.4949C44.3977 7.33304 42.2802 8.87033 40.7776 11.1051C39.4117 13.3398 38.7297 15.6445 38.7296 18.0188C38.7296 21.5109 39.8904 23.8864 42.2128 25.1435C44.535 26.4006 46.2432 27.5877 47.336 28.7051C48.4286 29.8226 48.9744 31.4994 48.9744 33.7341C48.9743 36.5276 48.018 38.9716 46.1056 41.0667C44.1931 43.0222 42.2124 44 40.1632 44C36.2018 44 33.1963 42.3943 31.1472 39.182C29.0981 35.9693 28.0736 31.9869 28.0736 27.2376C28.0737 23.0474 29.2346 18.8569 31.5568 14.6667C33.8791 10.4764 36.6117 6.98497 39.7536 4.19139C42.8952 1.39814 45.3538 0.000408176 47.1296 0Z' fill='%23C55026'/%3E%3C/svg%3E");
  /* ==================================================================== */
  background-repeat: no-repeat;
  background-size: contain;
}

.testimonial-box .testimonial-text {
  color: #C55026;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 330;
  line-height: 28px;
  letter-spacing: 0.15px;
  margin: 3rem 0 1.5rem 0;
  flex-grow: 1;
}

.testimonial-box .testimonial-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 330;
  color: #C55026;
  margin: 0;
  align-self: flex-start;
}

/* Responsive */
@media (max-width: 64rem) {
  .testimonials-three-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 48rem) {
  .testimonials-three-col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Skills Section */
section.skills-section {
  background: #FFFBF6 !important;
  padding: 4rem 0 !important;
  text-align: left !important;
}
section.skills-section .container {
  max-width: none !important; 
  margin: 0 !important;
  padding: 0 1.875rem 0 1.875rem !important; /* 30px on both sides */
}

section.skills-section .skills-item {
  display: flex !important;
  gap: 3rem !important;
  margin-bottom: 4rem !important;
  align-items: flex-start !important;
  flex-direction: row !important;
}

section.skills-section .skills-item:last-child {
  margin-bottom: 0 !important;
}

section.skills-section .skills-image {
  flex: 0 0 500px !important;
  width: 500px !important;
  height: 300px !important; /* Slightly less height */
  background: #D7D7D7 !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 300px !important;
}

section.skills-section .skills-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

section.skills-section .skills-content {
  flex: 1 !important;
  text-align: left !important;
}

section.skills-section .skills-content h3 {
align-self: stretch!important;
color: #AE4721 !important;
font-family: 'Heebo', sans-serif !important;
font-size: var(--Static-Headline-Medium-Size, 28px)!important;
font-style: normal!important;
font-weight: 700!important;
line-height: 36px!important; /* 128.571% */
letter-spacing: 0!important;
}

section.skills-section .skills-content ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
section.skills-section .skills-content li {
  align-self: stretch !important;
  color: #AE4721 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important; /* Added px unit */
  font-style: normal !important;
  font-weight: 380 !important;
  line-height: 140% !important;
  margin-top: 0.9rem !important; /* Add spacing between items */
  margin-bottom: 0.75rem !important; /* Add spacing between items */
  padding-left: 1.5rem !important; /* Make space for bullet */
  position: relative !important; /* Required for ::before positioning */
}

section.skills-section .skills-content li::before {
  content: '•' !important;
  position: absolute !important;
  left: 0 !important;
  color: #AE4721 !important; /* Match your text color */
  font-weight: 700 !important;
}

/* Responsive */
@media (max-width: 48rem) {
  section.skills-section .skills-item {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  
  section.skills-section .skills-image {
    width: 100% !important;
    max-width: 320px !important;
  }
}

/* Responsive Adjustments */
@media (max-width: 64rem) {
  .programs-grid {
      grid-template-columns: repeat(2, 1fr);
  }
  
  .testimonials-three-col {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 48rem) {
  .programs-grid {
      grid-template-columns: 1fr;
  }
  
  .testimonials-three-col {
      grid-template-columns: 1fr;
      gap: 1.5rem;
  }
  
  .skills-item {
      flex-direction: column;
      gap: 1.5rem;
  }
  
  .skills-image {
      width: 100%;
  }
  
  .contact-section h2 {
      font-size: 1rem;
  }
  
  .contact-button {
      padding: 0.625rem 1.5rem;
      font-size: 0.75rem;
  }
}

/* View More Section */ 
/* Keep the preview text visible with gradient fade */
.program-preview {
  font-size: 0.875rem;
  font-weight: 400;
  color: #C55026; /* Match description color */
  line-height: 1.6;
  margin: 0 0 0.5rem 0;
  position: relative;
  max-height: 5.5rem; /* Limit height to show peek */
  overflow: hidden;
  display: block;
}

/* Gradient overlay on preview text when closed */
.program-preview::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 241, 220, 0.00) 44.71%, #FFF1DC 100%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Hide preview text completely when view-more-section is open */
.view-more-section[open] {
  margin-top: 0 !important;
}

.program-card-content:has(.view-more-section[open]) .program-preview {
  display: none !important;
}

/* View more section */
.view-more-section {
  justify-self: center;

  margin-top: auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

/* When closed, button stays in normal position */
.view-more-section:not([open]) {
  display: block;
}

/* When open, reorder so button appears last */
.view-more-section[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.view-more-section[open] .view-more-btn {
  order: 2; /* Move button to bottom */
}

.view-more-section[open] .view-more-content {
  order: 1; /* Content appears first */
}

.view-more-btn {
  justify-self: center;
  color: #185F72;
  font-family: Inter, 'Inter', sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  background: none;
  border: none;
  transition: opacity 0.2s ease;
  position: relative;
  z-index: 2;
  margin-top: 0.5rem;
}

.view-more-btn:hover {
  opacity: 0.7;
}

/* Hide default details marker */
.view-more-btn::-webkit-details-marker {
  display: none;
}

/* Add chevron icon using pseudo-element */
.view-more-btn::after {
  justify-self: center;
  padding-top: 5rem;
  content: '';
  width: 24px;
  height: 24px;
  /* ========== MODIFY IMAGE HERE: SVG chevron icon (inline SVG data URI) ========== */
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23056D70' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  /* =================================================================== */
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

/* Rotate chevron when open */
.view-more-section[open] .view-more-btn::after {
  transform: rotate(180deg);
}

/* Change text when open */
.view-more-section[open] .view-more-btn::before {
  content: 'VIEW LESS';
}

.view-more-section:not([open]) .view-more-btn::before {
  content: 'VIEW MORE';
}

/* Hide the actual summary text and use pseudo-element instead */
.view-more-btn {
  font-size: 0;
}

.view-more-btn::before {
  font-size: 1rem;
}

/* Expandable content styling - appears BELOW preview text */
.view-more-content {
  justify-self: center;
  animation: slideDown 0.3s ease-out;
  padding-top: 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(197, 80, 38, 0.15);
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 2000px;
  }
}

/* Program description within expanded content */
.view-more-content .program-description {
  font-size: 0.9rem;
  font-weight: 500;
  color: #C55026; 
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

/* Spacing for dropdowns within expanded content */
.view-more-content .program-dropdown {
    margin-bottom: 0.75rem;
    border: 2px solid #C55026;
    border-radius: 0.75rem;
    background: #FFFBF6;
    overflow: hidden;
  }


.view-more-content .program-dropdown:last-child {
  margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 64rem) {
  .programs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 48rem) {
  .programs-grid {
    grid-template-columns: 1fr;
  }
  
  .program-card {
    width: 100% !important;
    max-width: 395px !important;
  }
}

/* =================
/* =================
/* END OF PROGRAMS PAGE
/* =================
/* =================

/* Community Impact Page Styles */
.impact {
  padding: 1.5rem 0.5rem;
  text-align: center;
}

.impact h2 {
  margin-bottom: 0;
}

.impact p {
  max-width: 50rem;
  margin: 0 auto 1.875rem;
}

.carousel {
  display: flex;
  gap: 1.25rem;
  margin: 1.875rem 0;
}

.arrow {
  background: #ddd;
  border: none;
  padding: 0.625rem 0.9375rem;
  cursor: pointer;
}

.carousel-track {
  display: flex;
  gap: 1.25rem;
}

.carousel .card {
  width: 15.625rem;
  height: 11.25rem;
  background: #e8e8e8;
}

.impact-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.875rem;
  max-width: 56.25rem;
  margin: 1.875rem auto 0;
}

.impact-stats .stat {
  text-align: center;
}

.impact-stats .icon {
  width: 5rem;
  height: 5rem;
  background: #ddd;
  margin: 0 auto 0.625rem;
}

.students {
  padding: 2.5rem 1.25rem;
  background: #f9f9f9;
}

.students h2 {
  text-align: center;
  margin-bottom: 0.9375rem;
}

.students > p {
  text-align: center;
  max-width: 50rem;
  margin: 0 auto 1.875rem;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.875rem;
  max-width: 68.75rem;
  margin: 0 auto;
}

.testimonial {
  background: #fff;
  padding: 1.25rem;
  min-height: 12.5rem;
}

.testimonial .placeholder-box {
  width: 100%;
  height: 12.5rem;
  background: #ddd;
}

.testimonial blockquote {
  font-style: italic;
  margin-bottom: 0.625rem;
}

.partners {
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.partners h2 {
  margin-bottom: 0.9375rem;
}

.partners > p {
  max-width: 50rem;
  margin: 0 auto 1.875rem;
}

.map-container {
  position: relative;
  max-width: 56.25rem;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  border: #C55026  2px solid;
}

.map {
  width: fit-content;
  border-radius: 6px;
  overflow: hidden;
}

.map-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 1.25rem;
  max-width: 25rem;
}

.map-popup .close {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  background: none;
  border: none;
  cursor: pointer;
}



/* Responsive Design */
@media (max-width: 75rem) {
  .statistics-container {
    gap: 11.25rem;
  }
}

@media (max-width: 64rem) {
  .mission-container,
  .programs-container {
    flex-direction: column;
    gap: 2.5rem;
  }
  
  .mission-text,
  .programs-text {
    padding: 0;
    width: 100%;
  }
  
  .image-frame {
    width: 100%;
    max-width: 38.125rem;
    margin: 0 auto;
  }
  
  .statistics-container {
    flex-direction: column;
    gap: 5rem;
    align-items: center;
  }
  
  .testimonials-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 1100px) {
  .mission-container{
    justify-content: center;
  }


  .mission-text {
    text-align: center;
    justify-self: center;
  }

  .mission-text .section-text {
    margin: 0 auto;
  }
  .mission-image {
    display: none;
    
  }

  .read-more-btn{
    justify-self: center;
    margin: 0 auto;
  }
  

  .shelf-4  {
    width: 200% !important;
  }


  
}

.menu-close {
  display: none;
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 2.5rem;
  color: #AE4721;
  cursor: pointer;
  width: 40px;
  height: 40px;
  line-height: 1;
  padding: 0;
  z-index: 103;
}

.menu-close:hover {
  color: #8B3618;
}

@media (max-width: 1024px) {
  .menu-close {
    display: block;
  }
}



@media (max-width: 990px) {
  

  .mission-image-mobile{
    display: flex;
  }
  
  .testimonial-card{
    max-width: 30rem;
  }
  .testimonial-card .testimonial-image-top{
    display: none;

  }
 

  .hero-title-section {
    justify-self: center;
    display: flex;
    padding-top: 2rem;
    max-width: 32rem;
    padding-bottom: 0;
  }

  .hero-mission-box {
    padding: 0 !important;
    width: 100% !important;
    padding-bottom: 0;
  }

  .shelf-flex-content{
    display: none;
  }

  .shelf-4{
    display: none !important;
  }

  

  .hero-title-word{
    font-size: clamp(2rem, 8vw, 3rem);
  }
  
  .shelf {
    height: 4rem;  
  }
  
  .shelf-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  

  
  /* Fix pre-transition alignment: all shelves align left on mobile */
  .shelf-1 .hero-title-word,
  .shelf-2 .hero-title-word,
  .shelf-3 .hero-title-word {
    left: 1rem !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
  }
  
  .shelf-2 .shelf-content {
    justify-content: flex-start !important;
    padding-right: 1rem !important;
  }
  
  .shelf-3 .shelf-content {
    justify-content: flex-start !important;
    padding-right: 1rem !important;
  }
  
  .hero-title-section.scrolled .hero-title-container {
    flex-direction: column;
    gap: 1rem;
  }
  
  .hero-title-section.scrolled .shelf-wrapper {
    width: 100%;
    order: 1;
  }
  
  .hero-title-section.scrolled .hero-mission-box {
    width: 100%;
    padding-left: 0;
    margin-top: 0;
    order: 2;
  }
  
  /* Ensure shelf-4 stays within shelf-wrapper on mobile */
  .hero-title-section.scrolled .shelf-4 {
    width: 100% !important;
    position: relative !important;
    margin-bottom: 1rem;
    order: 4;
  }
  
  /* Ensure shelf-wrapper contains all shelves properly */
  .hero-title-section.scrolled .shelf-wrapper {
    display: flex;
    flex-direction: column;
  }
  
  .hero-mission-box-inner {
    height: auto;
    min-height: auto;
    padding: 1.5rem;
  }
  
  .hero-mission-text {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    margin-bottom: 1rem;
  }
  
  .mission-section,
  .programs-section,
  .news-section,
  .student-testimonials-section {
    padding: 3rem 1rem;
  }
  
  .mission-container,
  .programs-container {
    padding: 0 1rem;
  }
  
  .mission-text,
  .programs-text {
    padding: 0 !important;
  }
  
  .section-heading {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  
  .section-text {
    font-size: clamp(1rem, 4vw, 1.25rem);
  }
  
  .testimonials-container {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1rem;
  }
  
  .statistics-section {
    padding: 3rem 1rem;
  }
  
  .statistics-container {
    flex-direction: column;
    gap: 3rem;
  }
  
  .stat-text {
    font-size: clamp(0.875rem, 3vw, 1rem);
    min-height: auto;
  }
  
  .image-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    padding: 0.75rem;
  }
  
  .split-section {
    grid-template-columns: 1fr;
  }
  
  .stats-container {
    grid-template-columns: 1fr;
  }
  
  .testimonial-row {
    grid-template-columns: 1fr;
  }
  
  .hero-image-placeholder {
    height: 15.625rem;
  }
  
  .impact-stats {
    grid-template-columns: 1fr;
  }
  
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
  
  /* Mission Page Mobile */
  .mission-hero {
    padding: 2rem 1rem;
  }
  
  .mission-hero h1 {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }
  
  .mission-hero p {
    font-size: clamp(1.125rem, 4vw, 1.5rem);
    padding: 0 1rem;
  }
  
  .mission-banner {
    margin: 1rem 0;
    padding: 0 0rem;
  }
  
  .mission-banner img {
    height: 200px;

  }
  
  .about-section {
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1rem;
  }
  
  .about-section.reverse {
    flex-direction: column;
  }
  
  .about-image img {
    width: 100%;
    max-width: 20rem;
    height: auto;
    aspect-ratio: 1;
  }
  
  .about-text {
    max-width: 100%;
    padding: 2rem;
    
  }
  
  .about-text h2 {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
  }
  
  .about-text p {
    font-size: clamp(0.875rem, 3vw, 1rem);
  }
  
  /* Contact Page Mobile */
  .contact-page .hero--contact {
    padding: 2rem 1rem;
  }
  
  .contact-page .hero__title {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }
  
  .contact-page .hero__subtitle {
    font-size: clamp(1rem, 4vw, 1.25rem);
    padding: 0 1rem;
  }
  
  .panel--contact {
    margin: 0 1rem 2rem;
    padding: 1.5rem 1rem;
  }
  
  .contact-form {
    gap: 1rem;
  }
  
  .contact-form input,
  .contact-form textarea,
  .contact-form select.form-select {
    font-size: 1rem;
    padding: 0.75rem;
    min-height: 44px; /* Better touch target */
  }
  
  .contact-form .btn {
    width: 100%;
    padding: 0.875rem;
    font-size: 1rem;
    min-height: 44px;
    text-decoration: none;
  }
  
  .btn--primary {
    width: 100% !important;
    padding: 1rem !important;
    font-size: 1rem !important;
    min-height: 44px !important;
  }
  
  .donation-card {
    padding: 1.5rem 1rem;
    margin: 1rem;
  }
  
  .donation-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .btn-group {
    flex-wrap: wrap;
  }
  
  /* Programs Page Mobile */
  .programs-hero {
    padding: 2rem 1rem;
  }
  
  .programs-hero h2 {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }
  
  .programs-hero p {
    font-size: clamp(1rem, 4vw, 1.25rem);
    padding: 0 1rem;
  }
  
  .program-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .program-card-content {
    padding: 2rem 1.5rem;
  }
  
  .program-title {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }
  
  .program-preview {
    font-size: clamp(0.875rem, 3vw, 1rem);
  }
  
  .view-more-content {
    padding-top: 0.75rem;
  }
  
  .view-more-content .program-description {
    font-size: clamp(0.875rem, 3vw, 0.95rem);
  }
  
  .read-more-btn,
  .view-programs-btn,
  .hero-view-programs-btn {
    width: 100%;
    text-align: center;
    padding: 0.875rem 1.5rem;
    min-height: 44px;
    display: inline-block;
  }
  
  .news-link {
    font-size: 0.95rem;
    padding: 0.5rem 0;
    display: inline-block;
  }
  
  .testimonial-quote {
    font-size: clamp(0.75rem, 3vw, 0.875rem);
    padding-left: 1rem;
    margin: 2rem 0 1rem 0;
  }
  
  .testimonial-author {
    font-size: clamp(0.75rem, 3vw, 0.875rem);
    padding-left: 1rem;
  }
  
  .testimonial-content {
    padding: 1.5rem;
  }
  
  .quotation-mark {
    width: 40px;
    height: 35px;
    left: -5px;
    top: 18px;
  }
  
  .quotation-mark::before {
    width: 40px;
    height: 35px;
  }
  
  /* Footer Mobile */
  .footer-container {
    flex-direction: column;
    gap: 2rem;
    padding: 0 1rem;
  }
  
  .footer-right-section {
    flex-direction: column;
    gap: 2rem;
    width: 100%;
  }
  
  .footer-column {
    width: 100%;
    text-align: center;
  }
  
  .footer-left-section {
    width: 100%;
    text-align: center;
  }
  
  .footer-social-icons {
    justify-content: center;
  }
  
  /* General Mobile Improvements */
  body {
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  a, button {
    min-height: 44px; /* Better touch targets */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Ensure images don't overflow */
  img {
    max-width: 100%;
    height: auto;
  }
}

/* =========================
   END: HOMEPAGE STYLES
   ========================= */

/* ===========================
   START: NEW HEADER STYLES
   =========================== */

   .site-header {
    background-color: #FFFBF6;
    padding: 1.25rem 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    transition: transform 0.3s ease-in-out;
  }
  
  .site-header.hidden {
    transform: translateY(-100%);
  }
  
  .site-header::before,
  .site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 0.125rem;
    background-color: #AE4721;
  }
  
  .site-header::before {
    top: 0.5rem;
  }
  
  .site-header::after {
    bottom: 0.5rem;
  }
  
  .header-container {
    max-width: 87.5rem;
    margin: 0 auto;
    padding: 0 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  
  .logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  
  .header-logo {
    height: clamp(3rem, 3.75vw, 3.75rem);
    width: auto;
    display: block;
  }
  
  .header-right {
    display: flex;
    align-items: center;
    gap: 1.875rem;
  }
  
  .main-nav ul {
    justify-content: center;
    list-style: none;
    display: flex;
    gap: 1.875rem;
    margin: 0;
    padding: 0;
  }
  
  .main-nav a {
    justify-self: center;
    color: #AE4721;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0.8px;
  }
  
  .main-nav li {
    padding: 0.2rem 0.5rem; 
  }
  
  .main-nav a:hover {
    color: #8B3618;
  }
  
  .main-nav li.active {
    background-color: #FFF1DC;
    border-radius: 8px; 
    padding: 0.2rem 0.5rem; 
  }
  
  .main-nav li.active a {
    color: #AE4721;
    text-decoration: none; 
    font-weight: 600;
  }
  
  /* ===== ADD THESE NEW STYLES ===== */
  
  /* Hamburger Icon - Hidden on Desktop */
  .hamburger {
    display: none; /* ← HIDDEN by default (desktop) */
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 101;
  }
  
  .hamburger span {
    width: 25px;
    height: 3px;
    background-color: #AE4721;
    transition: all 0.3s ease;
    border-radius: 2px;
  }
  
  /* Hamburger animation to X */
  .hamburger.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
  }
  
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  
  .hamburger.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
  }
  
  
  /* ===== MOBILE STYLES ===== */
  @media (max-width: 1100px) {
    
    /* Make header very compact on mobile */
    .site-header {
      padding: 0.5rem 0;
    }
    
    .header-container {
      padding: 0 1rem;
      max-width: 100%;
      justify-content: flex-end; /* Push hamburger to the right */
    }
    
    /* Hide logo, search, and donate button on mobile - only show hamburger */
    .header-left,
    .header-logo,
    .logo-link,
    .search-icon-btn,
    .donate-btn {
      display: none;
    }
    
    /* Show hamburger on mobile */
    .hamburger {
      display: flex;
    }
    
    /* Slide-out side menu */
    .main-nav {
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      width: 280px;
      background-color: #FFFBF6;
      transform: translateX(100%);
      transition: transform 0.3s ease-in-out;
      box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
      z-index: 102;
      overflow-y: auto;
      border-left: 0.125rem solid #AE4721;
    }
    
    .main-nav.active {
      transform: translateX(0);
    }
    
    .main-nav ul {
      flex-direction: column;
      gap: 0;
      padding: 5rem 0 2rem 0;
      height: 100%;
    }
    
    .main-nav li {
      width: 100%;
      padding: 0;
      border-bottom: 1px solid #FFF1DC;
    }
    
    .main-nav li:first-child {
      border-top: 1px solid #FFF1DC;
    }
    
    .main-nav a {
      display: block;
      padding: 1.25rem 2rem;
      width: 100%;
    }
    
    .main-nav li.active {
      background-color: #FFF1DC;
      border-radius: 0;
    }
  }

.donate-btn {
  background: #FFFBF6;
  color: #185F72;
  text-decoration: none;
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 0.125rem solid #185F72;
  font-family: 'Inter', sans-serif;
}

.donate-btn:hover {
  background: #185F72;
  color: #FFFBF6;
}

.search-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #185F72;
  transition: opacity 0.3s ease;
}

.search-icon-btn:hover {
  opacity: 0.7;
}

.search-icon-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Search Bar Styles */
.search-bar-container {
  display: none;
  background:#FFFBF6;
  padding: 1rem;
  
}

.search-bar-container.active {
  background:#FFFBF6;
  display: block;
}

.search-bar-wrapper {
  padding-top: 1rem;
  background:#FFFBF6;
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

.search-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid #d4c5b9;
  border-radius: 8px;
  font-family: 'Heebo', sans-serif;
  font-size: 1rem;
  color: #333;
  background:#FFFBF6;
  transition: border-color 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #056D70;
  background-color: #fff;
}

.search-input::placeholder {
  color: #999;
}

.search-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #666;
  cursor: pointer;
  padding: 0.5rem;
  line-height: 1;
  transition: color 0.3s ease;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-close-btn:hover {
  color: #056D70;
}

.search-results {
  max-width: 75rem;
  margin: 1rem auto 0;
  padding: 0 1rem;
  display: none;
}

.search-results.has-results {
  display: block;
}

.search-results-item {
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: #f9f9f9;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.search-results-item:hover {
  background: #f0f0f0;
}

.search-results-item h4 {
  margin: 0 0 0.25rem 0;
  color: #056D70;
  font-size: 0.95rem;
}

.search-results-item p {
  margin: 0;
  color: #666;
  font-size: 0.85rem;
}

.search-results-page-header {
  background: #f0f7f7 !important;
  border-left: 3px solid #056D70;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem !important;
  cursor: pointer;
}

.search-results-page-header:first-child {
  margin-top: 0;
}

.search-results-page-header h4 {
  margin: 0;
  color: #056D70;
  font-weight: 600;
  font-size: 1rem;
}

.search-highlight {
  background-color: #fff3cd;
  padding: 0.1rem 0.2rem;
  border-radius: 3px;
  font-weight: 600;
}

/* =========================
   END: HEADER STYLES
   ========================= */

/* ===========================
   START: FOOTER STYLES
   =========================== */

.site-footer-new {
  background: #185F72;
  padding: 2.5rem 0;
  margin-top: 3.75rem;
}

.footer-container {
  max-width: 87.5rem;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-left-section {
  flex: 0;
}

.footer-email {
  font-size: .95rem;
  color: #FFFBF6;
  margin: 0 0 0.75rem 0;
  font-weight: 500;
}

.footer-social-icons {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.footer-social-icons a {
  color: #FFFBF6;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, transform 0.2s;
}

.footer-social-icons a:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

.footer-social-icons img {
  width: 2.125rem;
  height: 2.125rem;
  display: block;
}

.footer-right-section {
  display: flex;
  gap: 5rem;
}

.footer-column {
  color: #FFFBF6;
  text-align: left;
}

.footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-column li {
  margin: 0.5rem 0;
}

.footer-column a {
  color: #FFFBF6;
  letter-spacing: 0.8px;
  text-decoration: none;
  transition: opacity 0.2s;
  font-size: 0.95rem;
}

.footer-column a:hover {
  opacity: 0.8;
  text-decoration: underline;
}



/* =========================
   Community Impact
   ========================= */

   .impact {
    background: #FFFBF6;
    padding: 5rem 1.25rem;
    text-align: center;
  }
  
  .impact h1 {
    font-family: 'New Spirit Semibold', serif;
    font-size: 3rem;
    font-weight: 700;
    color: #C55026;
    margin-bottom: 0.5rem;
  }
  
  .impact .section-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.75rem;
    font-weight: 400;
    color: #C55026;
    max-width: 68rem;
    margin: 0 auto 0rem;
    line-height: 1.5;
  }
  
  
  .carousel-section {
    background: #FFFBF6;
    width: 100%;
    padding: 0.5rem 0 5rem;
    margin: 0;
  }
  
  /* Carousel */
  .carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.875rem;
    width: 100%;
    overflow: hidden;
    padding: 0 2rem;
  }
  
  .carousel-track {
    display: flex;
    gap: 0.625rem;
    overflow: visible;
    width: 100%;
    justify-content: center;
  }
  
  .carousel .card {
    position: relative;
    width: 34.375rem;
    height: 34.375rem;
    border-radius: 0.625rem;
    overflow: hidden;
    flex-shrink: 0;
  }
  
  .carousel .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .arrow {
    background: #FFFBF6;
    border: none;
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    font-size: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    color: #2A9D8F;
    font-weight: 300;
    position: absolute;
    z-index: 10;
  }
  
  .arrow.prev {
    left: 2rem;
  }
  
  .arrow.next {
    right: 2rem;
  }
  
  .arrow:hover {
    background: #2A9D8F;
    color: #FFFBF6;
    transform: scale(1.1);
  }
  
  
  .partners {
    background-color: #FFFBF6;
    padding: 5rem 1.25rem;
    text-align: center;
  }
  
  .partners h1 {
    font-family: 'New Spirit', serif;
    font-size: 3rem;
    font-weight: 700;
    color: #C55026;
    margin-bottom: 0.5 rem;
  }
  
  .partners .section-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.75rem;
    font-weight: 400;
    color: #C55026;
    max-width: 68rem;
    margin: 0 auto 7rem;
    line-height: 1.5;
  }
  
  /* =========================
     INTERACTIVE MAP STYLES
     ========================= */
  
  .map-pin {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 5;
  }
  
  .map-pin img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  
  .map-pin:hover {
    transform: scale(1.2);
  }
  
  .map-pin.active {
    transform: scale(1.5);
    z-index: 6;
  }
  
  .map-popup {
    position: absolute;
    top: 50%;
    right: 3.125rem;
    transform: translateY(-50%);
    background: #FFFBF6;
    padding: 2rem 1.5rem 1.75rem;
    border-radius: 1.5rem;
    box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.15);
    width: 30rem; 
    height: auto; 
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .map-popup.active {
    opacity: 1;
    visibility: visible;
  }
  
  .popup-header {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    z-index: 20;
  }
  
  .popup-content h3 {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem; 
    font-weight: 700;
    margin-bottom: 1rem;
    color: #AE4721;
    position: relative;
    display: inline-block;
    padding: 0 2.5rem;
  }
  
  .nav-arrow {
    position: absolute;
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #AE4721;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 1;
    font-weight: 300;
    padding: 0;
    z-index: 25;
  }
  
  .nav-arrow-left {
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .nav-arrow-right {
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .nav-arrow:hover {
    color: #8B3618;
    transform: translateY(-50%) scale(1.3);
  }
  
  .map-popup .close {
    
    background: none;
    border: none;
    font-size: 2.5rem;
    color: #AE4721;
    cursor: pointer;
    width: 40px;
    height: 40px;
    line-height: 1;
    


    position: static;
    
     
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 1;
    font-weight: 300;
    
  }
  
  .map-popup .close:hover {
    color: #8B3618;
    
  }
  
  .popup-icon {
    width: 100%;
    max-width: 12.5rem; 
    height: 12.5rem; 
    border-radius: 0;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  
  .popup-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .popup-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    padding-top: 1.5rem;
    position: relative;
  }
  
  .popup-content p {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #AE4721;
    margin-bottom: 1.25rem;
    flex-grow: 1;
  }
  
  .site-btn {
    background: transparent;
    border: 0.125rem solid #185F72;
    color: #185F72;
    padding: 0;
    min-width: 10rem;
    max-width: 10rem;
    height: 2.5rem; 
    border-radius: 0.5rem;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
  }
  
  .site-btn:hover {
    background: #185F72;
    color: #FFFBF6;
  }
  
  @media (max-width: 48rem) {
    .map-popup {
        position: relative;
        right: auto;
        transform: none;
        margin: 1.25rem auto;
        max-width: 100%;
        width: 90%;
        height: auto;
        padding: 4rem 1.5rem 2rem;
    }
    
    .popup-icon {
        max-width: 12rem;
        height: 12rem;
    }
    
    .popup-content {
        padding-top: 0;
    }
    
    .popup-content h3 {
        font-size: 0.875rem;
    }
    
    .popup-content p {
        font-size: 0.875rem;
    }
  }
  
  .partner-logos-section {
    width: 100%;
    background: #FFFBF6;
    padding: 0;
    margin: 0;
  }
  
  .partner-logos-carousel {
    width: 100%;
    overflow: hidden;
    padding: 3rem 0 3rem;
    position: relative;
  }
  
  .logos-track {
    display: flex;
    gap: 0;
    animation: scroll-logos 20s linear infinite;
    width: fit-content;
  }
  
  .logos-track img {
    height: 12.5rem;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
  }
  
  @keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-30%);
    }
  }
  
  .partner-logos-carousel:hover .logos-track {
    animation-play-state: paused;
  }
  
  @media (max-width: 64rem) {
    .impact h1,
    .partners h1 {
        font-size: 2.5rem;
    }
    
    .impact .section-description,
    .partners .section-description {
        font-size: 1.5rem;
    }
    
    .impact-stats {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 2.5rem 1.875rem;
    }
    
    .carousel {
        gap: 1.25rem;
    }
    
    .carousel .card {
        width: 17.5rem;
        height: 23.75rem;
    }
  }
  
  @media (max-width: 48rem) {
    .impact,
    .partners {
        padding: 3.75rem 1.25rem;
    }
    
    .impact h1,
    .partners h1 {
        font-size: 2rem;
    }
    
    .impact .section-description,
    .partners .section-description {
        font-size: 1.25rem;
    }
    
    .carousel {
        flex-direction: column;
        gap: 1.25rem;
    }
    
    .carousel-track {
        flex-direction: column;
        max-width: 18.75rem;
    }
    
    .carousel .card {
        width: 100%;
        max-width: 18.75rem;
        height: 25rem;
    }
    
    .partner-logos {
        gap: 1.875rem;
    }
    
    .partner-logos img {
        height: 4.375rem;
    }
    
  }
  
  .map-stage{
    position: relative;
    flex: 1;
  }
  

  @media (max-width: 48rem){
    .map-container{
      flex-direction: column;
      align-items: center;
      gap: 1.25rem;
      display: flex;
      border: none;
    }
  
    .map-stage{
      width: 100%;
      max-width: 40rem; 
    }
  
    .map-pin{
      width: 1.8rem;
      height: 1.8rem;
    }
  
    .map-popup{
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      transform: none !important;
  
      width: min(22.4375rem, 92%) !important;
      max-width: 92% !important;
      margin: 0 auto !important;
    }
  
    .map-popup.active {
      opacity: 1;
      visibility: visible;
    }
  }