/* About Page Dedicated Styles */

/* Keyframes for Animations */
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Global Section Animation */
section {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
  /* Start hidden for animation */
  animation-delay: 0.2s;
  /* Slight delay */
}

/* Stagger animations for sequential sections if desired, or rely on JS intersection observer for scroll-trigger. 
   For now, we'll just let them load in. Ideally, use JS to add 'visible' class on scroll. 
   To keep it simple without JS, we'll just animate them on load with slight delays. */
.about-hero {
  animation-delay: 0.1s;
}

.our-mission {
  animation-delay: 0.3s;
}

.scripture-reflection {
  animation-delay: 0.4s;
}

.our-story {
  animation-delay: 0.5s;
}

.our-values {
  animation-delay: 0.6s;
}

.about-hero {
  background: linear-gradient(120deg, #3b82f6, #14b8a6, #3b82f6);
  background-size: 200% 200%;
  animation: gradientFlow 15s ease infinite, fadeInUp 0.8s ease-out forwards;
  color: var(--color-white);
  padding: 60px 20px;
  /* Increased padding */
  margin: 20px auto;
  max-width: 1440px;
  border-radius: 25px;
  overflow: hidden;
  flex-direction: column;
  /* Better for stacking title/subtitle */
  text-align: center;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.25);
  /* Soft glow shadow */
  position: relative;
}

.about-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.about-title {
  font-family: "Montserrat", sans-serif;
  font-size: 3.5rem;
  /* Larger title */
  font-weight: 800;
  margin-bottom: 16px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  letter-spacing: -1px;
}

#main {
  padding-left: 15px;
  padding-right: 15px;
}

.about-subtitle {
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 0;
  opacity: 0.95;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

/* Section wrappers */
.our-mission,
.our-story,
.meet-founder,
.get-involved,
.scripture-reflection,
.testimonials,
.timeline,
.ministry-partnerships,
.our-values {
  background: var(--color-white);
  color: var(--color-text-dark);
  padding: 80px 0;
  /* More breathing room */
  max-width: 1440px;
  margin: 20px auto;
  border-radius: 25px;
}

/* The Movement Section - Narrower Container */
.the-movement {
  background: var(--color-white);
  color: var(--color-text-dark);
  margin: 20px auto;
  border-radius: 25px;
}

.the-movement .container {
  max-width: 768px;
  margin: 0 auto;
  padding: 15px;
  background-color: transparent;
}

/* Mission split layout */
.mission-inner {
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
}

.mission-text {
  flex: 1;
  font-size: 16px;
}

.mission-placeholder {
  flex: 1;
}

.mission-image-wrap {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 4/5;
  /* Modern portrait ratio */
  margin: 0 auto;
  border-radius: 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 5px solid var(--color-white);
  transition: transform 0.3s ease;
}

.mission-image-wrap::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 5px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  pointer-events: none;
  z-index: 1;
}

.mission-image-wrap:hover {
  transform: scale(1.02);
}

.mission-placeholder .mission-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.our-values {
  background: rgba(240, 248, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.testimonials {
  background: linear-gradient(135deg, var(--color-white), #dbeafe, #e9d5ff);
}

.our-mission h2,
.our-story h2,
.meet-founder h2,
.get-involved h2,
.scripture-reflection h2,
.testimonials h2,
.timeline h2,
.ministry-partnerships h2,
.our-values h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 24px;
  color: #1e293b;
  position: relative;
}

.our-mission p,
.our-story p,
.meet-founder p,
.get-involved p,
.scripture-reflection p,
.reflection-text p,
.testimonials p,
.timeline-list li,
.ministry-partnerships p {
  font-size: 16px;
  max-width: 750px;
  margin: 0 auto 24px auto;
  line-height: 1.8;
  color: #475569;
}

/* Mission emphasis */
/* Mission emphasis */
.our-mission p:first-of-type {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

.our-mission .highlight-quote {
  display: block;
  font-size: 1.2rem;
  font-style: italic;
  color: #0f766e;
  background: #f0fdfa;
  border-left: 4px solid #14b8a6;
  padding: 16px 24px;
  margin: 32px auto;
  border-radius: 0 12px 12px 0;
  max-width: 750px;
}

/* Scripture & Reflection */
.scripture-quote {
  font-size: 1.4rem;
  font-family: "Playfair Display", serif;
  font-style: italic;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto 32px auto;
  color: #1e293b;
  border: none;
  position: relative;
  padding: 40px;
  background: var(--color-white);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.1);
  border-radius: 20px;
}

.scripture-quote::before {
  content: "“";
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 6rem;
  color: rgba(59, 130, 246, 0.1);
  font-family: serif;
}

.scripture-ref {
  display: block;
  margin-top: 16px;
  font-size: 1rem;
  font-weight: 700;
  color: #3b82f6;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Reflection split layout */
.reflection-inner {
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}

.reflection-placeholder {
  flex: 1;
}

.reflection-content {
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.reflection-image-wrap {
  position: relative;
  width: 100%;
  max-width: 450px;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 30px;
  /* Circular image for reflection */
  box-shadow: 0 15px 35px rgba(59, 130, 246, 0.15);
  overflow: hidden;
  border: 8px solid var(--color-white);
}

.reflection-placeholder .reflection-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Story split layout */
.story-inner {
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}

.story-content {
  flex: 1;
  text-align: left;
}

.story-placeholder {
  flex: 1;
}

.story-image-wrap {
  position: relative;
  width: 100%;
  max-width: 450px;
  aspect-ratio: 4/5;
  margin: 0 auto;
  border-radius: 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 5px solid var(--color-white);
  transition: transform 0.3s ease;
}

.story-image-wrap:hover {
  transform: scale(1.02);
}

.story-image-wrap::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 5px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  pointer-events: none;
  z-index: 1;
}

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

/* Story Verse Card */
.story-verse-card {
  background-color: #eef2ff;
  /* Light blue background */
  padding: 5px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  margin: 32px 0;
}

.story-verse-inner {
  background: linear-gradient(to right, #e0f2fe, #f3e8ff);
  /* Light blue to light purple gradient */

  padding: 24px;
  border-radius: 0 10px 10px 0;
}

.story-verse-inner blockquote {
  font-style: italic;
  font-size: 1.1rem;
  color: #1e3a8a;
  /* Deep blue text */
  margin: 0;
  line-height: 1.6;
}

.story-verse-inner .verse-ref {
  display: block;
  margin-top: 12px;
  font-weight: 700;
  color: #1e40af;
  /* Slightly lighter blue for ref */
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.story-paragraph.emphasis {
  font-size: 16px;
  color: #3b82f6;
  font-weight: 500;
  margin-bottom: 25px;
  padding: 20px;
  border: 1px dashed #3b82f6;
  border-radius: 12px;
  display: inline-block;
}

@media (max-width: 900px) {
  .story-inner {
    flex-direction: column;
    text-align: center;
  }

  .story-content {
    text-align: center;
  }

  .story-image-wrap {
    max-width: 100%;
    width: 80%;
  }
}

/* Values Grid */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.value-item {
  background: linear-gradient(135deg, #e0f2fe, #f3e8ff);
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02), 0 10px 15px rgba(0, 0, 0, 0.03);
  padding: 40px 30px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.value-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 25px rgba(59, 130, 246, 0.1),
    0 10px 10px rgba(59, 130, 246, 0.04);
  border-color: rgba(59, 130, 246, 0.2);
}

.value-item h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e40af;
  margin-bottom: 16px;
}

.value-item p {
  font-size: 16px;
  color: #3b82f6;
  margin: 0;
  line-height: 1.6;
}

/* CTA Button */
.get-involved .cta-button {
  display: inline-block;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: var(--color-white);
  font-weight: 700;
  padding: 16px 40px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 1.2rem;
  margin-top: 24px;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.get-involved .cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(37, 99, 235, 0.4);
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

/* Testimonials */
.testimonials-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.testimonial-item {
  background: var(--color-white);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  position: relative;
  text-align: left;
  border: 2px solid #3b82f6;
}

.testimonial-item blockquote {
  margin: 0 0 16px 0;
  font-size: 1.1rem;
  line-height: 1.7;
  font-style: italic;
  color: #334155;
}

.testimonial-author {
  font-size: 16px;
  font-weight: 700;
  color: #3b82f6;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Timeline */
.timeline-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 800px;
  position: relative;
}

/* Vertical line */
.timeline-list::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}

.timeline-list li {
  position: relative;
  padding: 20px 24px 20px 80px;
  background: var(--color-white);
  margin-bottom: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease;
}

.timeline-list li:hover {
  transform: translateX(5px);
}

.timeline-year {
  position: absolute;
  left: 0;
  top: 24px;
  width: 60px;
  height: 60px;
  background: #3b82f6;
  color: var(--color-white);
  font-weight: 700;
  border-radius: 50%;
  font-size: 0.9rem;
  box-shadow: 0 0 0 4px var(--color-white), 0 0 0 6px #3b82f6;
  z-index: 1;
}

/* Partnerships */
.partnerships-list {
  list-style: none;
  padding: 0;
  margin: 32px auto 0 auto;
  max-width: 1000px;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.partner-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--color-white);
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  border: 1px solid #f1f5f9;
  transition: transform 0.2s;
}

.partner-item:hover {
  transform: translateY(-5px);
}

.partner-name {
  font-weight: 600;
  color: #475569;
  font-size: 0.95rem;
}

.partner-logo {
  max-width: 64px;
  max-height: 64px;
  border-radius: 12px;
}

/* Container utility */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Responsive */
@media (max-width: 900px) {
  .mission-inner,
  .reflection-inner {
    flex-direction: column;
    text-align: center;
  }

  .mission-text,
  .reflection-content {
    text-align: center;
  }

  .reflection-content {
    align-items: center;
  }

  .mission-image-wrap,
  .reflection-image-wrap {
    max-width: 100%;
    width: 80%;
  }

  .about-title {
    font-size: 2.8rem;
  }
}

@media (max-width: 600px) {
  .about-title {
    font-size: 2.2rem;
  }

  .about-subtitle {
    font-size: 1.1rem;
  }

  .timeline-list::before {
    left: 20px;
  }

  .timeline-year {
    width: 40px;
    height: 40px;
    font-size: 0.75rem;
    left: 0;
    top: 20px;
  }

  .timeline-list li {
    padding-left: 50px;
  }

  .scripture-quote {
    font-size: 1.2rem;
    padding: 24px;
  }

  .scripture-quote::before {
    font-size: 4rem;
    top: -10px;
    left: 10px;
  }
}

/* Founder Photo Placeholder */
.founder-photo-placeholder {
  width: 200px;
  height: 200px;
  margin: 30px auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0f2fe, #f3e8ff);
  border: 3px solid #3b82f6;
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
}

.founder-photo-placeholder span {
  color: #1e40af;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
}