/* ===== Global Styles ===== */
:root {
  --navy: #002855;
  --sky: #F0F2F9;
  --yellow: #fbe287;
  --cream: #fff9e5;
  --white: #ffffff;
  --text-dark: #122237;
  --text-light: #4D5E9E;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: var(--white);
}
html {
  font-size: 20px;
}

/* ========== BASE STYLES ========== */
body {
  font-family: 'Inter', sans-serif;
  color: #1a1a1a;
  line-height: 1.6;
}

h1, h2, h3 {
  color: #1d1d4f;
  margin-bottom: 1rem;
}

a {
  color: #1d1d4f;
  text-decoration: none;
  font-weight: 500;
}

/* Section base layout */
section {
  width: 100%;
  margin: 0;
  padding: 4rem 1.5rem;
  box-sizing: border-box;
}

/* ========== NAVIGATION ========== */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 2rem;
  border-bottom: 3px solid #b991f0;
  background: #fff;
    /* NEW */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

.nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav a {
  text-decoration: none;
  color: #001f3f;
  font-weight: 500;
  margin: 0 0.8rem;
}

.logo img {
  height: 80px;
  max-width: none;
}
/* ===== NAVIGATION LINK UNDERLINES (Always Visible) ===== */
.nav a {
  position: relative;
  text-decoration: none;
  color: #001f3f;
  font-weight: 500;
  margin: 0 0.8rem;
  padding-bottom: 4px; /* space for underline */
}

/* Always-visible colored underline */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  transform: scaleX(1); /* always visible */
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Optional hover effect: slightly brighten the underline */
.nav a:hover::after {
  filter: brightness(1.2);
}

/* Unique underline colors for each link */
.link-orange::after { background-color: #EA5B18; }
.link-blue::after { background-color: #0492D2; }
.link-navy::after { background-color: #302A83; }
.link-green::after { background-color: #12AB4A; }

/* ========== HERO SECTION ========== */
.hero {
  position: relative;
  text-align: center;
  background: url('images/hero-bg.jpg') no-repeat center center / cover;
  color: #ffffff;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 4rem 1rem;
}

/* Keep your text above the overlay */
.hero-text {
  position: relative;
  z-index: 2;
}

.hero-text h1 {
  font-size: 1.8rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.hero-text p {
  font-size: 1.05rem;
  max-width: 700px;
  margin: 0 auto;
  color: #1a1a1a;
}

/* 
==================================
   FOOTSTEPS (temporarily disabled)
==================================

.footsteps {
  position: absolute;
  top: 20px; 
  left: 5%; 
  width: 700px; 
  height: 420px;
  pointer-events: none;
  z-index: 1;
}

.footstep {
  position: absolute;
  transform-origin: center;
  opacity: 0.9;
  filter: brightness(0.95);
}

.step1 {
  top: 0;
  left: 0;
  width: 130px;
  transform: rotate(-40deg);
}

.step2 {
  top: 100px;
  left: 130px;
  width: 125px;
  transform: rotate(-20deg);
}

.step3 {
  top: 200px;
  left: 260px;
  width: 120px;
  transform: rotate(-35deg);
}

.step4 {
  top: 300px;
  left: 390px;
  width: 115px;
  transform: rotate(-15deg);
}

@media (max-width: 768px) {
  .footsteps {
    top: 10px;
    left: 3%;
    width: 450px;
    height: 260px;
  }

  .step1 { width: 85px; top: 0; left: 0; transform: rotate(-40deg); }
  .step2 { width: 80px; top: 70px; left: 85px; transform: rotate(-20deg); }
  .step3 { width: 75px; top: 140px; left: 170px; transform: rotate(-35deg); }
  .step4 { width: 70px; top: 210px; left: 250px; transform: rotate(-15deg); }
}
*/
/* ====== Responsive Adjustments ====== */
@media (max-width: 768px) {
  .footsteps {
    top: 10px;
    left: 3%;
    width: 450px;
    height: 260px;
  }

  .step1 { width: 85px; top: 0; left: 0; transform: rotate(-40deg); }
  .step2 { width: 80px; top: 70px; left: 85px; transform: rotate(-20deg); }
  .step3 { width: 75px; top: 140px; left: 170px; transform: rotate(-35deg); }
  .step4 { width: 70px; top: 210px; left: 250px; transform: rotate(-15deg); }
}

/* ========== WE OFFER SECTION ========== */
.offer-section {
  background: #eef2fb;
}

.offer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

.offer-text {
  flex: 1 1 55%;
  min-width: 300px;
}

.offer-image {
  flex: 1 1 35%;
  text-align: right;
}

.offer-image img {
  max-width: 320px;
  border-radius: 12px;
}

/* ===== BUTTON COLORS UPDATED TO MATCH FOOTER ===== */

/* Primary Buttons (filled) */
.btn-primary,
.submit-btn {
  display: inline-block;
  background-color: #4D5E9E;
  color: #ffffff;
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  border: none;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Secondary Buttons (outlined) */
.btn-secondary {
  display: inline-block;
  background-color: transparent;
  border: 2px solid #4D5E9E;
  color: #4D5E9E;
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
}
/* ========== WHITE SECTION ========== */
.section-white {
  padding: 4rem 2rem;
  text-align: center;
}

/* ========== COMMUNITY / YELLOW SECTION ========== */
.section-yellow {
  background: url('images/hands-bg.jpg') no-repeat center 80% / cover;
  padding: 5rem 1rem 4rem;
  color: #1d1d4f;
  text-align: center;
}

.community-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 2.5rem;
  max-width: 700px;
  margin: 0 auto;
}

.community-card h3 {
  margin-bottom: 1rem;
  color: #1d1d4f;
}

.community-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}


/* ========== FOOTER ========== */
.site-footer {
  background: #4D5E9E;
  color: #ffffff;
  padding: 3rem 1rem 2rem;
  margin-top: 0rem;
  font-family: Arial, sans-serif;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto 2rem;
  gap: 3rem;
  flex-wrap: nowrap;
}

.footer-left,
.footer-center,
.footer-right {
  flex: 1;
  text-align: left;
}

.footer-left address {
  font-style: normal;
  line-height: 1.6;
  margin-top: 0.5rem;
}


.footer-badge {
  width: 140px;
  display: block;
  margin-bottom: 1rem;
}

.footer-center {
  text-align: center;
  flex: 2;
}

.footer-legal {
  margin-top: 2rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  white-space: normal;
}

.footer-center h4 {
  font-weight: bold;
  margin-bottom: 1rem;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.social-icons img {
  width: 45px;
  height: 45px;
}

.footer-right {
  text-align: right;
}

.footer-right img {
  width: 220px;
  margin: 0.5rem;
  vertical-align: middle;
}

.footer-bottom {
  text-align: center;
  font-size: 0.9rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 1rem;
}

.footer-bottom a {
  color: #fff;
  text-decoration: underline;
}

.footer-bottom a:hover {
  text-decoration: none;
}

/* City of Memphis block */
.footer-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4rem; /* controls spacing between columns */
}

.footer-left,
.footer-center,
.footer-right {
  width: 260px;     /* lock equal column width */
  text-align: left; /* keep items aligned inside each block */
}

/* Memphis block fix */
.memphis-block {
  max-width: 210px;
  text-align: left;
  margin-top: 0.5rem;
}

.memphis-text {
  font-size: 0.72rem;
  line-height: 1.25;
  margin-top: 0.4rem;
  color: #ffffff;
  opacity: 0.9;
}
/* ========== MOBILE-FRIENDLY LAYOUT (INDEX) ========== */
@media (max-width: 900px) {

  /* ----- GLOBAL LAYOUT ----- */
  body {
    font-size: 1rem;
    line-height: 1.6;
  }

  section {
    padding: 3rem 1rem;
  }

  h1, h2, h3 {
    text-align: center;
  }

  /* ----- NAVIGATION ----- */
  .nav {
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
  }

  .nav ul {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .logo img {
    height: 70px;
  }

  .nav a {
    margin: 0.4rem 0;
    font-size: 1rem;
  }

  /* ----- HERO SECTION ----- */
  .hero {
    padding: 2.5rem 1rem;
    min-height: auto;
  }

  .hero-text {
    margin-top: 0;
  }

  .hero-text h1 {
    font-size: 1.4rem;
    line-height: 1.4;
    max-width: 90%;
    margin: 0 auto 1rem;
  }

  .hero-text p {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0 1rem;
  }

  /* ----- WE OFFER SECTION ----- */
  .offer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
  }

  .offer-text {
    flex: none;
    width: 100%;
  }

  .offer-text ul {
    padding-left: 1rem;
    text-align: left;
    display: inline-block;
  }

  .offer-image {
    text-align: center;
    margin-top: 1.5rem;
  }

  .offer-image img {
    width: 100%;
    max-width: 350px;
    border-radius: 10px;
  }

  /* ----- WHITE SECTION ----- */
  .section-white p {
    font-size: 1rem;
    line-height: 1.6;
    padding: 0 1rem;
  }

  /* ----- COMMUNITY SECTION ----- */
  .section-yellow {
    background-size: cover;
    background-position: center;
    padding: 4rem 1rem;
  }

  .community-card {
    padding: 2rem 1rem;
  }

  .community-buttons {
    flex-direction: column;
    width: 100%;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    text-align: center;
  }

  /* ----- FOOTER ----- */
  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    width: 100%;
    text-align: center;
  }

  .footer-badge {
    width: 120px;
    margin: 0 auto 1rem;
  }

  .footer-right img {
    width: 160px;
    margin: 0.5rem auto;
  }

  .footer-legal {
    margin-top: 1.8rem;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 90%;
  }

  .footer-bottom {
    font-size: 0.85rem;
    padding-top: 1rem;
  }
  @media (max-width: 900px) {
  .memphis-block {
    width: 100%;
    max-width: 260px;
    text-align: center;
    margin: 0 auto;
  }

  .memphis-text {
    text-align: center;
    margin-top: 0.5rem;
  }
}
}

/* ===== Contact Page ===== */
.contact-section {
  background-color: #eef1f8; /* softer blue background */
  padding: 4rem 1rem;
}

.contact-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background-color: #ffffff; /* clean white card */
  border-radius: 8px;
  border: 1px solid #dce1ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* Left column (info) */
.contact-info {
  flex: 1;
  background-color: #ffffff;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-info h2 {
  font-size: 1.9rem;
  color: #1d1d4f;
  margin-bottom: 1rem;
}

.contact-info p {
  margin: 0.6rem 0;
  line-height: 1.6;
  color: #1a1a1a;
}

.contact-info a {
  color: #1d3f8d;
  text-decoration: none;
  font-weight: 600;
}

.contact-info a:hover {
  text-decoration: underline;
}

.hours {
  margin-top: 1rem;
  font-size: 0.95rem;
}

.public-notice {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: #333;
  line-height: 1.6;
  background-color: #f8f9fc;
  padding: 0.8rem 1rem;
  border-left: 3px solid #4d5e9e;
  border-radius: 4px;
}

/* Right column (form) */
.contact-form {
  flex: 1;
  background-color: #f5f7fc; /* softer blue-gray */
  padding: 3rem 2.5rem;
  border-left: 1px solid #e0e3ef;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.form-group {
  flex: 1 1 48%;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

label {
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: #1d1d4f;
  font-size: 0.95rem;
}

input,
textarea {
  padding: 0.75rem;
  border: 1px solid #cdd3e2;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background-color: #fff;
}

input:focus,
textarea:focus {
  border-color: #4d5e9e;
  outline: none;
}

textarea {
  resize: vertical;
}

.submit-btn:hover {
  background-color: #3b4c86;
  transform: translateY(-1px);
}

/* ===== Responsive Design ===== */
@media (max-width: 900px) {
  .contact-container {
    flex-direction: column;
    border: none;
    box-shadow: none;
    background-color: transparent;
  }

  .contact-info,
  .contact-form {
    padding: 2rem 1.5rem;
    border: none;
    background-color: #ffffff;
    border-radius: 6px;
    margin-bottom: 1rem;
  }

  .contact-form {
    border-top: 1px solid #e0e3ef;
  }

  .submit-btn {
    width: 100%;
    align-self: center;
  }
}

/* ===== DONATE PAGE ===== */

/* Top Section */
.donate-intro {
  text-align: center;
  padding: 5rem 1rem 4rem;
  background-color: #ffffff;
}

.donate-intro h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #1d1d4f;
  margin-bottom: 0.75rem;
}

.donate-intro p {
  font-size: 1.05rem;
  color: #333;
  margin-bottom: 2.5rem;
}

/* Donate Options Row */
.donate-options {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.donate-card {
  background-color: #f3f5fb;
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  flex: 1 1 360px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
}

.donate-card h3 {
  color: #1d1d4f;
  font-weight: 600;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.donate-card p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ===== DONATE BUTTON ===== */
.btn-donate {
  background-color: #5666B1;
  color: #ffffff;
  padding: 0.85rem 2rem;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  display: inline-block;
  margin-top: 1.2rem;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 10px rgba(77, 94, 158, 0.25);
}

.btn-donate:hover {
  background-color: #46549A;
  box-shadow: 0 6px 14px rgba(77, 94, 158, 0.3);
  transform: translateY(-2px);
}

/* ===== Other Ways to Support ===== */
.support-ways {
  background-color: #eef2fb;
  padding: 5rem 1rem;
  text-align: center;
}

.support-ways h2 {
  font-size: 1.6rem;
  color: #1d1d4f;
  margin-bottom: 3rem;
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
  justify-items: center;
}

@media (min-width: 900px) {
  .support-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ====== SUPPORT BUBBLES ====== */
.support-bubble {
  background-color: #4D5E9E;
  color: #ffffff;
  border-radius: 1.5rem;
  padding: 2.2rem 1.8rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  min-height: 160px;
  text-align: center;
}

.support-bubble h3,
.support-bubble p {
  color: #ffffff;
}

.support-bubble h3 {
  margin-bottom: 0.6rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.support-bubble p {
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 260px;
}

.support-bubble:hover {
  background-color: #3b4c86;
  transform: translateY(-3px);
}

/* ===== Feedback Section ===== */
.feedback {
  background-color: #f3f5fb;
  text-align: center;
  padding: 5rem 1.5rem;
  border-radius: 1rem;
  margin: 5rem auto;
  max-width: 850px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.feedback h2 {
  color: #1d1d4f;
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
}

.feedback p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  max-width: 650px;
  margin: 0.75rem auto;
}

.feedback a {
  color: #1d3f8d;
  font-weight: 600;
  text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .donate-options {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .support-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .feedback {
    margin: 3rem auto;
    padding: 3rem 1.2rem;
    width: 90%;
    max-width: 600px;
  }
}

/* ===== ABOUT PAGE ===== */

.about-intro {
  position: relative;
  text-align: center;
  padding: 5rem 1rem 4rem;
  background-image: url("images/about-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #222;
  font-size: 1.1rem;
  line-height: 1.8;
}

.about-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.70);
  z-index: 0;
}
.about-intro h1 {
    margin: 0 auto 1rem;
  position: relative;
  max-width: 1000px;
  font-size: 1.5rem;
  z-index: 1;
  text-align: center;
}
.about-intro p {
  margin: 0 auto 1rem;
  position: relative;
  max-width: 1000px;
  font-size: 1.3rem;
  z-index: 1;
  text-align: center;
}

.about-intro strong {
  font-weight: 600;
  position: relative;
  z-index: 1;
}

/* about video section */
.about-video {
  text-align: center;
  padding: 4rem 1rem;
  background-color: #ffffff;
}

.about-video h2 {
  color: #1d1d4f;
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.video-wrapper {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  border: none;
}
/* ===== Partners Section ===== */
.partners {
  background-color: #f1f4fc;
  text-align: center;
  padding: 5rem 1rem;
}

.partners h2 {
  font-size: 1.8rem;
  color: #1d1d4f;
  margin-bottom: 1.2rem;
}

.partners p {
  max-width: 800px;
  margin: 0 auto 2.5rem;
  font-size: 1rem;
  color: #333;
  line-height: 1.7;
}

.partner-group {
  margin-top: 3rem;
}

.partner-group h3 {
  color: #27316f;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* Partner logos grid */
.partner-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  margin-top: 2rem;
}

.partner-logos img {
  max-height: 80px;
  max-width: 200px;
  object-fit: contain;
  padding: 0.5rem;
  background-color: transparent;
}

/* Black background for white-text logos */
.partner-logos img[alt="City of Memphis"],
.partner-logos img[alt="SCVC Foundation"],
.partner-logos img[alt="All Rise"] {
  background-color: #000000;
  padding: 1rem 1.5rem;
  border-radius: 0;
  max-height: 85px;
  max-width: 220px;
}

/* ===== Team Section ===== */
.team {
  background-color: #fff;
  text-align: center;
  padding: 4rem 1rem;
}

.team-card {
  background-color: #f1f4fc;
  border-radius: 1rem;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.team-card strong {
  color: #4D5E9E;
}

/* ===== Board Section ===== */
.board {
  text-align: center;
  padding: 6rem 1rem;
  background-color: #ffffff;
}

/* Image + text side by side */
.board-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto 4rem;
}

.board-info img {
  width: 480px;
  max-width: 100%;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.board-info div {
  flex: 1 1 380px;
  text-align: left;
}

.board-info h2 {
  font-size: 1.8rem;
  color: #1d1d4f;
  margin-bottom: 1rem;
}

.board-info p {
  color: #333;
  line-height: 1.7;
  margin-bottom: 1rem;
  font-size: 1rem;
}

/* ===== Board Members Section ===== */
.board-members {
  text-align: center;
}

.board-members h3 {
  font-size: 1.3rem;
  color: #1d1d4f;
  margin-bottom: 2rem;
}

/* Board member bubbles */
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.8rem;
  max-width: 800px;
  margin: 0 auto;
}

/* Center the final (single) member card properly */
.member-grid .member-card:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  flex: none;
}

@media (min-width: 600px) {
  .member-grid .member-card:last-child {
    width: calc(50% - 1rem);
    max-width: 400px;
  }
}

.member-card {
  background-color: #eef1fb;
  border-radius: 12px;
  padding: 1.6rem 1.4rem;
  font-weight: 500;
  font-size: 1rem;
  color: #0f1c3f;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
  text-align: center;
  transition: none;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

/* ===== Policy Section ===== */
.policy {
  background-color: #f1f4fc;
  text-align: center;
  padding: 3rem 1rem;
  line-height: 1.6;
}

/* ===== Responsive Design (All Media Queries Together) ===== */
@media (max-width: 900px) {
  .board-info {
    flex-direction: column;
    text-align: center;
  }

  .board-info div {
    text-align: center;
  }

  .board-info img {
    width: 90%;
    max-width: 400px;
  }

  .member-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .member-card {
    padding: 1.2rem;
    font-size: 0.95rem;
  }
}

@media (max-width: 768px) {
  .about-intro {
    padding: 3rem 1.2rem;
    font-size: 1rem;
  }

  .partners {
    padding: 3.5rem 1rem;
  }

  .partner-logos {
    gap: 1.8rem;
  }

  .partner-logos img {
    max-height: 60px;
    max-width: 160px;
  }

  .partner-logos img[alt="City of Memphis"],
  .partner-logos img[alt="SCVC Foundation"],
  .partner-logos img[alt="All Rise"] {
    max-height: 65px;
    max-width: 180px;
  }
}



/* ===== SERVICES PAGE ===== */

/* ===== Header (Services & Locations) ===== */
.services-header {
  text-align: center;
  padding: 4rem 1rem 3rem;
  background-color: #ffffff;
}

.services-header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1d1d4f;
  margin-bottom: 0.75rem;
}

.services-nav {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #1d3f8d;
}

.services-nav a {
  margin: 0 0.6rem;
  color: #1d3f8d;
  font-weight: 500;
  text-decoration: underline;
}

.services-nav a:hover {
  text-decoration: none;
}

/* ===== Outpatient Treatment (Matches Reference Image) ===== */
.outpatient {
  background-color: #f5f7fc;
  text-align: center;
  padding: 5rem 1rem;
}

.outpatient h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1d1d4f;
  margin-bottom: 1.2rem;
}

.outpatient p {
  max-width: 780px;
  margin: 0 auto 1.2rem;
  color: #333;
  line-height: 1.7;
  font-size: 1rem;
}

/* Main card container — stacked vertically like reference */
.service-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  max-width: 700px;
  margin: 2rem auto 2.5rem;
}

/* Each card styled as rectangular bubble */
.service-card {
  background-color: #4D5E9E;
  color: #ffffff;
  border-radius: 10px;
  padding: 1.4rem 1.6rem;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  line-height: 1.5;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Description text inside each card */
.service-card span {
  display: block;
  margin-top: 0.4rem;
  font-weight: 400;
  font-size: 0.95rem;
  opacity: 0.95;
  color: #f0f2ff;
}

/* Bottom note text */
.outpatient .center {
  font-size: 0.95rem;
  color: #333;
  margin-top: 2.2rem;
  line-height: 1.6;
}

/* Wide screen refinement */
@media (min-width: 900px) {
  .service-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .service-card {
    max-width: 650px;
  }
}

/* ===== CLIENT SERVICES ===== */
.client-services {
  background-color: #ffffff;
  text-align: center;
  padding: 5rem 1rem;
}

.client-services .client-container {
  background-color: #e9edfb;
  border-radius: 16px;
  max-width: 850px;
  margin: 0 auto;
  padding: 3rem 1.5rem 3.5rem;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.client-services h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1d1d4f;
  margin-bottom: 1rem;
}

.client-services p {
  max-width: 700px;
  margin: 0 auto 2.5rem;
  color: #333;
  line-height: 1.7;
  font-size: 1rem;
}

/* Grid of blue bubbles */
.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem 1.2rem;
  justify-items: center;
}

.client-box {
  background-color: #4D5E9E;
  color: #ffffff;
  border-radius: 10px;
  padding: 1.1rem 1rem;
  font-weight: 600;
  font-size: 0.98rem;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.4;
  min-height: 70px; /* Keeps uniform height for all boxes */
}

/* ===== PAYMENT OPTIONS ===== */
.payment-options {
  background-color: #f5f7fc;
  text-align: center;
  padding: 5rem 1rem;
}

.payment-options h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1d1d4f;
  margin-bottom: 1rem;
}

.payment-options p {
  max-width: 700px;
  margin: 0 auto 2.2rem;
  color: #333;
  line-height: 1.7;
  font-size: 1rem;
}

/* Stacked blue rounded cards */
.payment-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

.payment-box {
  background-color: #4D5E9E;
  color: #ffffff;
  border-radius: 10px;
  padding: 1.2rem 1rem;
  font-weight: 600;
  font-size: 0.98rem;
  text-align: center;
  line-height: 1.5;
  width: 100%;
  max-width: 550px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .client-services .client-container {
    padding: 2.5rem 1rem 3rem;
  }

  .client-grid {
    grid-template-columns: 1fr;
  }

  .client-box,
  .payment-box {
    max-width: 100%;
  }

  .payment-options {
    padding: 4rem 1rem;
  }
}

/* ===== LOCATIONS ===== */
.locations {
  background-color: #ffffff;
  padding: 6rem 1rem;
  text-align: left;
}

.locations h2 {
  text-align: center;
  color: #1d1d4f;
  font-weight: 700;
  font-size: 1.8rem; /* slightly larger heading */
  margin-bottom: 3rem;
}

/* Each location entry */
.location-card {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  max-width: 950px; /* wider cards */
  margin: 0 auto 3.5rem;
  background-color: #f5f7fc;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

/* Image */
.location-card img {
  width: 220px; /* larger image */
  height: auto;
  border-radius: 14px;
  flex-shrink: 0;
}

/* Text content */
.location-info {
  flex: 1;
}

.location-info h3 {
  font-size: 1.15rem;
  color: #1d1d4f;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

/* Paragraphs and icons */
.location-info p {
  margin: 0.4rem 0;
  color: #333;
  line-height: 1.7;
  font-size: 1rem; /* larger text */
  display: flex; /* aligns emoji and text */
  align-items: flex-start;
  gap: 0.5rem;
}

/* Emoji alignment fix */
.location-info p::before {
  display: inline-block;
  width: 1.4rem;
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1.4;
}

.location-info p:nth-of-type(1)::before {
  content: "📞";
}

.location-info p:nth-of-type(2)::before {
  content: "📍";
}

/* Hide redundant bold labels (Phone:, Address:) */
.location-info p strong {
  display: none;
}

/* ===== GET STARTED ===== */
.get-started {
  background-color: #f5f7fc;
  text-align: center;
  padding: 5rem 1rem 5.5rem;
  margin-top: 0; /* Remove white gap */
  width: 100%;
}

.get-started h2 {
  color: #1d1d4f;
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 0rem;
}

.get-started p {
  max-width: 650px;
  margin: 0.5rem auto 1rem;
  color: #333;
  font-size: 1rem;
  line-height: 1.7;
}

.get-started .small-text {
  font-size: 0.9rem;
  color: #333;
  margin-top: 1rem;
  line-height: 1.5;
}

/* Make sure it spans edge-to-edge even inside constrained layouts */
.get-started {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

@media (max-width: 768px) {
  .get-started {
    padding: 4rem 1rem;
  }
}

/* ===== RESPONSIVE LAYOUT ===== */
@media (max-width: 768px) {
  .location-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
  }

  .location-card img {
    width: 100%;
    max-width: 360px;
  }

  .location-info h3 {
    text-align: center;
  }

  .location-info p {
    justify-content: center;
    text-align: left;
  }

  .location-info p::before {
    margin-right: 0.5rem;
  }

  .get-started {
    padding: 4rem 1rem;
  }
}

/* form for contact */

.form-message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 9999;
}

.form-message.success {
  background-color: #4caf50;
}

.form-message.error {
  background-color: #e74c3c;
}
/* spacing for static nav */
.hero,
.services-header,
.contact-section,
.about-intro,
.donate-intro,
.locations {
  margin-top: 110px; /* adjust to match nav height */
}
@media (max-width: 900px) {
  .hero,
  .services-header,
  .contact-section,
  .about-intro,
  .donate-intro,
  .locations {
    margin-top: 290px; /* increase for mobile */
  }
}
/* ============================
   updated footer cause im too lazy to go delete all the other footer code, so this is where the actual footer is fix here all issues, feel free to mess with the other footer stuff above if you wanna make it look better but this is the actual footer stuff here.
   ============================ */

.site-footer {
  background: #4D5E9E;
  color: #fff;
  padding: 3rem 1rem 2rem;
  font-family: Arial, sans-serif;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  gap: 3rem;
}

/* Each column same width */
.footer-left,
.footer-center,
.footer-right {
  width: 33%;
  min-width: 260px;
}

/* ---- LEFT COLUMN ---- */
.footer-left {
  text-align: left;
}

.footer-badge {
  width: 140px;
  margin-bottom: 1rem;
  display: block;
}

.footer-left address {
  font-style: normal;
  line-height: 1.6;
}

/* ---- CENTER COLUMN ---- */
.footer-center {
  text-align: center;
}

.footer-center h4 {
  margin-bottom: 1rem;
  font-weight: bold;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.social-icons img {
  width: 45px;
  height: 45px;
}

/* ---- RIGHT COLUMN ---- */
.footer-right {
  text-align: left;
}

.footer-right img {
  width: 200px;
  margin-bottom: 0.5rem;
  display: block;
}

/* Memphis text block */
.memphis-block {
  max-width: 260px;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1.3;
}

/* ---- FOOTER BOTTOM ---- */
.footer-bottom {
  text-align: center;
  font-size: 0.9rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 1rem;
  margin-top: 2rem;
}

.footer-bottom a {
  color: #fff;
  text-decoration: underline;
}

/* ---- MOBILE ---- */
@media (max-width: 900px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    width: 100%;
    text-align: center;
  }

  .footer-right img {
    margin-left: auto;
    margin-right: auto;
  }

  .memphis-block {
    margin: 0 auto;
    text-align: center;
  }
}
/* terms and privacy policy styles are on their html for simplicity */