/* ===========================
   NEW SPIRIT FONT FACE
   =========================== 
*/


@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;
}


: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: 'Heebo', 'Segoe UI', Tahoma, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  font-size: 1rem;
  background-color: #FFFBF6;
  min-height: 100vh;
}
.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;
}

/* 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;box-shadow:0 0.125rem 0.3125rem rgba(0,0,0,0.1);}
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:3rem 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: 'Heebo', 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:1px solid #ccc;border-radius:6px;padding:12px 16px;font:inherit;background:#fff;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:#056D70;color:#fff;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;}
/* 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:1px 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 #056D70;background:#fff;color:#056D70;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:500;transition:all .3s ease;}
.btn--chip:hover,.btn--amount:hover{background:#f0f0f0;}
.btn--chip.is-active,.btn--amount.is-active{background:#056D70;color:#fff;border-color:#056D70;}
.input.input--full{width:100%;border:1px solid #ccc;border-radius:6px;padding:12px 16px;margin:10px 0;background:#fff;font-size:.95rem;}
.btn--primary{background:#056D70;color:#fff;border-radius:6px;padding:12px 24px;border:none;font-weight:600;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;width:100%;margin-top:10px;transition:background .3s ease;}
.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: 'Heebo', sans-serif;
  font-size: 1rem;
  color: #333;
  appearance: none;
  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: 'Heebo', 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:6px;
  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:1px solid #e3e3e3;
}

/* Text block */
.about-text { max-width:32.5rem; }
.about-text h2 {
  font-family: 'Heebo', 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: 'Heebo', sans-serif; /* Added font family */
  font-size:1rem; /* Increased from .95rem */
  font-weight:400;
  color:#C55026; /* Changed from #222 */
  line-height:1.6;
} 
/* ===========================
   START: HOMEPAGE STYLES
   =========================== */

/* Hero Title Section with Decorative Shelves */
.hero-title-section {
  background: #FFFBF6;
  padding: 6.25rem 1.25rem;
  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: 1px 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;
}


.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 {
  font-family: 'New Spirit Semibold', serif;
  font-size: clamp(4rem, 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 {
  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) */
.shelf-1 .shelf-item:nth-child(1) {
  width: clamp(1.5rem, 2vw, 2.5rem);
  left: 28rem;
  top: 1rem;
  transform: rotate(-3deg);
}

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

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

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

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

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

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

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

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

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

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

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

/* Shelf 2 - "Student" (decorations on BOTH SIDES, avoiding center) */
.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: 42rem;
  top: 0.6rem;
  transform: rotate(2.5deg);
}

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

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

.shelf-2 .shelf-item:nth-child(9) {
  width: clamp(1.25rem, 1.8vw, 2rem);
  left: 50rem;
  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 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(2rem, 2.5vw, 3rem);
  left: 3rem;
  top: 2rem;
  transform: rotate(-5deg);
}

.shelf-3 .shelf-item:nth-child(10) {
  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;
  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;
}

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

.hero-mission-text {
  font-family: 'Heebo', sans-serif;
  font-size: clamp(2.25rem, 2.75vw, 2.75rem);
  font-weight: 400;
  color: #C55026;
  line-height: 1.5;
  margin: 0 0 2rem 0;
}

.hero-view-programs-btn {
  background: #FFFBF6;
  border: 1px solid #056D70;
  color: #056D70;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-family: 'Heebo', 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;
}

.hero-view-programs-btn:hover {
  background: #056D70;
  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%;
  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;
}

/* 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 items that don't fit - disable all transitions to prevent animation */
.hero-title-section.scrolled .shelf-1 .shelf-item:nth-child(n+7),
.hero-title-section.scrolled .shelf-2 .shelf-item:nth-child(n+6),
.hero-title-section.scrolled .shelf-3 .shelf-item:nth-child(n+6) {
  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 */
.shelf-4 {
  transition: none !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 - only 3 items */
.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);
}

/* Scrolled state - shelf-4 stays full width, NO transitions, NO animations */
.hero-title-section.scrolled .shelf-4 {
  position: absolute;
  left: 0;
  width: 200%;
  margin-left: 0;
  margin-bottom: 2rem;
  z-index: 1;
  top: calc(9.5rem * 3 + 2rem * 3);
  transition: none !important;
  animation: none !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-decorations {
  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;
}

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

.section-text {
  font-family: 'Heebo', 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;
}

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

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

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

.image-frame {
  border: 1px solid #C55026;
  border-radius: 0.625rem;
  padding: 1.25rem;
  width: clamp(20rem, 38vw, 38.125rem);
  height: clamp(20rem, 38vw, 38.125rem);
}

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

/* Programs Section - Homepage */
.programs-section {
  background: #FFFBF6;
  padding: 6.25rem 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;
}

/* Student Testimonials Section - Homepage */
.student-testimonials-section {
  background: #FFFBF6;
  padding: 6.25rem 1.5rem;
}

.testimonials-container {
  max-width: 90rem;
  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;
}

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

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

.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;
  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: 'Heebo', 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: 'Heebo', 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-end;
  max-width: 90rem;
  width: 100%;
  justify-content: center;
}

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

.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: 'Heebo', sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  font-weight: 700;
  color: #C55026;
  line-height: normal;
  margin: 0;
  max-width: 11.625rem;
}


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

/* Programs Section */
/* Hero Section */
.programs-hero {
  background: #FFFBF6; 
  color: #C55026;
  padding: 3rem 0;
  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;
}

.programs-hero p {
  font-family: 'Heebo', sans-serif;
  font-weight: 400;
  color: #C55026;
  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: 1.5rem auto 3rem !important;  max-width: 90rem; 
  justify-items: center;
  align-items: start; 
}

.programs-section .container {
  display: flex;
  justify-content: center;
  width: 100%;
  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 */
  }

/* 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: 1px solid #056D70 !important;
  background: #FFFBF6 !important;
  

  color: #056D70 !important; 
  text-align: center !important;
  font-family: 'Roboto', 'Heebo', 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;
  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: 200;
  color: #C55026;
  line-height: 1.6;
  background: #FFFBF6;
}

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

/* Contact Section Styling */
.contact-section {
  background-color: #056D70 !important;
  padding: 1.5rem 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: 'Heebo', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 300 !important; 
  line-height: 2.25rem !important; 
  color: #FFF1DC !important;
  margin: 0 !important;
  flex: 1;
}

/* Bold the middle part */
.contact-section h2 strong {
  font-weight: 650 !important; /* Bold for "inquires and questions" */
  font-size: 1.8rem;
  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: #FFF1DC !important;
  color: #056D70 !important;
  border: 1px solid #056D70 !important;
  border-radius: 0.5rem !important;
  
  font-family: 'Heebo', 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: #056D70 !important;
  color: #FFFBF6 !important;
  border-color: #056D70 !important;
  text-decoration: none !important; /* No underline on hover */
}

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

/* 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;
  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: 'Heebo', 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: 'Heebo', 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: 'New Spirit Semibold', 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: 'Heebo', 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 {
  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;
}

.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 {
  color: #056D70;
  font-family: Inter, 'Heebo', 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 {
  content: '';
  width: 24px;
  height: 24px;
  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 {
  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: 1px 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: 2.5rem 1.25rem;
  text-align: center;
}

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

.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;
}

.map {
  width: 100%;
}

.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;
}

.site-btn {
  background: #333;
  color: #fff;
  border: none;
  padding: 0.625rem 1.25rem;
  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: 48rem) {
  .hero-title-section {
    padding: 3.75rem 1.25rem;
  }
  
  .shelf {
    height: 6.25rem;
  }
  
  .mission-section,
  .programs-section,
  .student-testimonials-section {
    padding: 3.75rem 1.25rem;
  }
  
  .testimonials-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .statistics-section {
    padding: 3.75rem 2.5rem;
  }
  
  .image-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  
  .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;
  }
}

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

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

.site-header {
  background-color: #FFFBF6;
  padding: 1.25rem 0;
  position: sticky;
  top: 0;
  z-index: 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 {
  list-style: none;
  display: flex;
  gap: 1.875rem;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: #AE4721;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.3s ease;
  font-family: 'Heebo', sans-serif;
  text-transform: uppercase;
}

.main-nav a:hover {
  color: #8B3618;
}

.donate-btn {
  background: #fff;
  color: #056D70;
  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 #056D70;
  font-family: 'Heebo', sans-serif;
}

.donate-btn:hover {
  background: #056D70;
  color: #fff;
}

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

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

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

@media (max-width: 64rem) {
  .header-right {
    gap: 0.9375rem;
  }
  
  .main-nav ul {
    gap: 0.9375rem;
  }
  
}

@media (max-width: 48rem) {
  .header-container {
    flex-direction: column;
    gap: 1.25rem;
    align-items: stretch;
  }
  
  .header-left {
    text-align: center;
  }
  
  .header-right {
    flex-direction: column;
    gap: 0.9375rem;
  }
  
  .main-nav ul {
    flex-direction: column;
    text-align: center;
    gap: 0.625rem;
  }
  
}

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

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

.site-footer-new {
  background: #056D70;
  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: white;
  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: white;
  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: white;
  text-align: left;
}

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

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

.footer-column a {
  color: white;
  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', serif;
    font-size: 3rem;
    font-weight: 700;
    color: #C55026;
    margin-bottom: 0.5rem;
  }
  
  .impact .section-description {
    font-family: 'Heebo', 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: white;
    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: white;
    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: 'Heebo', 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.3);
    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: 22.4375rem; 
    height: 29.0625rem; 
    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: 'Heebo', sans-serif;
    font-size: 0.875rem; 
    font-weight: 400;
    margin-bottom: 1rem;
    color: #333;
    position: relative;
    display: inline-block;
    padding: 0 2.5rem;
  }
  
  .nav-arrow {
    position: absolute;
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #333;
    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: #666;
    transform: translateY(-50%) scale(1.1);
  }
  
  .map-popup .close {
    position: static;
    background: white;
    border: 2px solid #333;
    font-size: 1.125rem;
    cursor: pointer;
    color: #333;
    width: 1.5625rem;
    height: 1.5625rem; 
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    line-height: 1;
    font-weight: 300;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1);
  }
  
  .map-popup .close:hover {
    background: #f0f0f0;
    transform: scale(1.05);
  }
  
  .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: 'Heebo', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    margin-bottom: 1.25rem;
    flex-grow: 1;
  }
  
  .site-btn {
    background: transparent;
    border: 0.125rem solid #056D70;
    color: #056D70;
    padding: 0;
    width: 4.625rem; 
    height: 2.5rem; 
    border-radius: 0.5rem;
    cursor: pointer;
    font-family: 'Heebo', 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: #056D70;
    color: white;
  }
  
  @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-popup {
        position: relative;
        right: auto;
        transform: none;
        margin: 1.25rem auto;
        max-width: 100%;
    }
    
    .map-container {
        height: auto;
        min-height: 25rem;
    }
  }