/* camp-deploy/public/css/styles.css */

/* -------------------------------------------------------------------------- */
/* ## General Styles (Global Styles - Applied to all pages)                 */
/* -------------------------------------------------------------------------- */

body {
  font-family: "Poppins", sans-serif;
  color: black;
  background-color: white; /* Default background for most pages */
  font-size: 1.3rem;
  padding-top: 20px; /* Add padding to avoid navbar overlap on all pages */
}

@media (max-width: 768px) {
  body {
    font-size: 1.05rem; /* Slightly smaller font size on smaller screens */
  }
}

html {
  height: 100%;
  margin: 0;
  scroll-behavior: smooth;
}

section {
  padding: 2rem 0; /* Reduced padding for sections */
  font-size: 1.75rem;
}

/* -------------------------------------------------------------------------- */
/* ## Navbar Styles                                                         */
/* -------------------------------------------------------------------------- */

/* Navbar Fix (Push Content Down - for responsive navbar open state) */
body.navbar-open main {
  margin-top: 280px; /* Adjust this value as needed when navbar is open on small screens */
  transition: margin-top 0.3s ease; /* Smooth transition for content push */
}

/* Smooth transition for main content (general) */
body main {
  transition: margin-top 0.3s ease;
}

/* Fixed Navbar */
.navbar.fixed-top {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000; /* Ensure navbar stays on top */
  background-color: #eeabeddb; /* Light purple background */
}

/* -------------------------------------------------------------------------- */
/* ## Header/Hero Section Styles (Homepage specific)                         */
/* -------------------------------------------------------------------------- */

/* Video Background for Header Section on homepage */
.homepage-header-video-container.navbar-open {
  top: 280px; /* Adjust this value to match the height of your expanded navbar */
  transition: top 0.3s ease; /* Smooth transition for the video */
}

/* Ensure the video container resets correctly when navbar is open */
.homepage-header-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60vh; /* Reduced height to minimize spacing */
  overflow: hidden;
  z-index: -2;
  padding-top: 10px; /* Reduced padding */
  transition: top 0.3s ease;
  filter: brightness(0.7); /* Slightly reduce video brightness */
}

/* Adjust the top position when navbar is open */
body.navbar-open .homepage-header-video-container {
  top: 280px; /* Adjust this value based on your navbar height */
}

/* Video styles for larger screens */
.index-page .homepage-header-video-container video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the video within its container */
  object-fit: cover; /* Ensure video covers the entire container */
}

/* Header/Hero Content (text and buttons on top of video) */
.index-page .homepage-header-content {
  position: relative;
  z-index: 10;
  color: white;
  text-align: center;
  padding: 5.5vh 5%;
  background-color: transparent;
}

#index-page-hero-content {
  padding-top: 2rem;
}
.index-page .homepage-header-lead-text {
  font-size: clamp(1.6rem, 2.5vw, 2rem); /* Fluid font size for lead text */
  font-weight: 350; /* Lighter font weight for lead text */
}

/* -------------------------------------------------------------------------- */
/* ## Responsive Media Queries for Header Section Mobile Screens (≤768px)     */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* Hide video */
  .index-page .homepage-header-video-container > video {
    display: none;
  }

  /* Gradient background instead of video */
  .homepage-header-video-container {
    background: linear-gradient(
      135deg,
      #108c1d,
      #108c1d,
      #b60b13,
      #7c1963,
      #c298b7
    ); /* Church's colors */
    background-size: 200% 200%;
    animation: gradientWave 10s ease-in-out infinite;
    height: 65vh;
  }

  .homepage-header-video-container::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at 20% 80%,
        rgba(16, 140, 29, 0.1) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 80% 20%,
        rgba(182, 11, 19, 0.05) 0%,
        transparent 60%
      ),
      linear-gradient(to bottom, transparent 60%, rgba(124, 25, 99, 0.03) 100%);
    opacity: 0.8;
  }

  /* Header Text Adjustments */
  .index-page .homepage-header-content {
    color: white;
    background-color: transparent;
    padding-top: 10vh;
    padding-bottom: 5rem;
    margin-bottom: 0 !important;
  }

  /* Apply glow like this (optional): */
  .header-welcome-text {
    animation: textGlow 5s ease-in-out infinite;
  }

  /* Ensure text is readable on smaller screens */
  .index-page .homepage-header-content {
    color: white; /* Change text color for better contrast */
    background-color: transparent; /* Remove background color */
    padding-top: 5vh; /* Reduced padding */
    padding-bottom: 3rem; /* Reduced padding */
  }
}

/* -------------------------------------------------------------------------- */
/* ## Keyframe Animations                                                    */
/* -------------------------------------------------------------------------- */

/* Gradient Animation */
@keyframes gradientWave {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Optional Text Glow Animation (use on h1 or p if desired) */
@keyframes textGlow {
  0% {
    text-shadow: 0 0 10px #fff;
  }
  50% {
    text-shadow: 0 0 20px #c298b7, 0 0 30px #7c1963;
  }
  100% {
    text-shadow: 0 0 10px #fff;
  }
}

/* -------------------------------------------------------------------------- */
/* Responsive Height Queries for Header Section Mobile Screens (≤768px)      */
/* -------------------------------------------------------------------------- */
@media (max-height: 800px) {
  .homepage-header-video-container {
    height: 80vh;
  }
}

@media (max-height: 600px) {
  .homepage-header-video-container {
    height: 180%;
  }
}

@media (max-width: 768px), (max-height: 700px) {
  .homepage-header-video-container {
    height: 180%;
  }
}

/* -------------------------------------------------------------------------- */
/* ## Carousel Section Styles (Homepage specific)                            */
/* -------------------------------------------------------------------------- */

.index-page .homepage-carousel-section {
  margin-top: -20px; /* Reduced negative margin */
  padding: 2rem 0; /* Reduced padding */
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
}

.index-page .homepage-carousel-wrapper {
  overflow-x: auto; /* Enable horizontal scrolling for carousel */
  -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
  position: relative; /* For positioning carousel controls if needed */
  padding-bottom: 10px; /* Reduced space below carousel for scrollbar */
}

.index-page .homepage-carousel-container {
  display: flex; /* Use flexbox for horizontal layout of cards */
  gap: 10px; /* Reduced spacing between carousel cards */
  padding: 10px 0; /* Reduced vertical padding for carousel container */
  overflow-x: scroll; /* Enable horizontal scroll if content overflows */
  scroll-snap-type: x mandatory; /* Enable scroll snapping for cards */
  scroll-padding-inline: 10px; /* Reduced padding at start and end of scroll area */
}

.index-page .homepage-campus-card {
  flex: 0 0 auto; /* Do not grow, do not shrink, base width is automatic */
  width: calc(
    33.333% - 10px * 2 / 3
  ); /* Target 3 cards in a row, adjust as needed */
  min-width: 280px; /* Slightly reduced minimum width for each card */
  max-width: calc(
    33.333% - 10px * 2 / 3
  ); /* Max width to maintain 3 cards layout */
  padding: 15px; /* Reduced padding */
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  scroll-snap-align: start; /* Snap cards to the start of the container */
  transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

.index-page .homepage-campus-card:hover {
  transform: translateY(
    -5px
  ); /* Slight lift on hover for interaction feedback */
}

.index-page .homepage-campus-card img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px; /* Reduced margin */
  aspect-ratio: 16 / 9; /* Maintain 16:9 aspect ratio for images */
  object-fit: cover; /* Ensure images cover the space without distortion */
}

.index-page .homepage-campus-card h3 {
  margin-bottom: 0.5rem; /* Reduced margin */
  font-weight: bold;
  color: #333; /* Darker heading for better readability */
}

.index-page .homepage-campus-card p {
  color: #555; /* Slightly muted text for body */
  font-size: 1rem; /* Slightly smaller font size for card text */
  line-height: 1.4; /* Improved text readability */
}

.index-page .homepage-campus-card .btn-primary {
  margin-top: 0.5rem; /* Reduced margin */
}

/* -------------------------------------------------------------------------- */
/* About Pastor Slideshow Section - RESPONSIVE HEIGHT ADJUSTMENTS */
/* -------------------------------------------------------------------------- */
.index-page .homepage-pastor-slideshow-section {
  position: relative;
  overflow: hidden;
  min-height: 300px; /* Reduced height */
  height: auto; /* Changed from fixed height to auto */
  padding: 2rem 0; /* Reduced padding */
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  margin-top: 0px;
}

/* Ensure slides are properly positioned */
.index-page .homepage-pastor-slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Individual Slide Styles */
.index-page .homepage-pastor-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  filter: blur(8px);
}

/* Make active slide visible */
.index-page .homepage-pastor-slide.active {
  opacity: 1;
}

/* Overlay Content - Centered and Responsive */
.index-page .homepage-content-overlay {
  position: relative;
  z-index: 1;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(1rem, 3vw, 2rem); /* Reduced padding */
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

/* Circular pastor image - Responsive Sizing */
.index-page .homepage-content-overlay .overlay-picture-apostle {
  width: clamp(200px, 40vw, 280px); /* Slightly reduced size */
  height: auto;
  border-radius: 50%;
  margin-bottom: 0.5rem; /* Reduced margin */
  border: 3px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  object-fit: cover;
}

/* Text Styling */
.index-page .homepage-content-overlay h2 {
  font-weight: bold;
  margin-bottom: 0.5rem; /* Reduced margin */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  font-size: clamp(1.5rem, 3vw, 2rem); /* Slightly reduced font size */
}

.index-page .homepage-content-overlay p {
  font-size: clamp(0.9rem, 2vw, 1.1rem); /* Slightly reduced font size */
  line-height: 1.5; /* Improved readability */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Slide Background Images */
.index-page .homepage-pastor-slide:nth-child(1) {
  background-image: url("../assets/img/apostle1.JPG");
}

.index-page .homepage-pastor-slide:nth-child(2) {
  background-image: url("../assets/img/apostle2.jpg");
}

.index-page .homepage-pastor-slide:nth-child(3) {
  background-image: url("../assets/img/apostle3.jpg");
}

.index-page .homepage-pastor-slide:nth-child(4) {
  background-image: url("../assets/img/apostle4.JPG");
}

.index-page .homepage-pastor-slide:nth-child(5) {
  background-image: url("../assets/img/apostle5.JPG");
}

.index-page .homepage-pastor-slide:nth-child(6) {
  background-image: url("../assets/img/kcmi-crowd-photo-5.jpg");
}

/* Ensure all slides have correct background properties */
.index-page .homepage-pastor-slide {
  background-size: cover;
  background-position: center;
}

/* -------------------------------------------------------------------------- */
/* Ministry events (promos) Section                                           */
/* -------------------------------------------------------------------------- */

#kcmi-promos-section {
  padding: 1.5rem 0;
  background-color: #f8f9fa;
  width: 100%;
  margin-bottom: 0px !important;
}

#kcmi-promos-section .container {
  padding: 0 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

#kcmi-promos-section h2 {
  color: #7c1963;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 1.8rem);
  line-height: 1.3;
  text-align: center;
}

#kcmi-promos-section p.text-center {
  color: #555;
  margin-bottom: 1rem;
  font-size: clamp(1rem, 3vw, 1.2rem);
  line-height: 1.4;
  text-align: center;
}

#kcmi-promos-section #promos-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0.5rem 0;
}

/* Single event styling */
#kcmi-promos-section #promos-container.single-event .promos-grid {
  justify-content: center;
  display: flex;
}

#kcmi-promos-section #promos-container.single-event .promo-card {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

#kcmi-promos-section .promos-grid {
  display: flex;
  transition: transform 0.3s ease;
  gap: 1rem;
  padding: 0 0.5rem;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

#kcmi-promos-section .promo-card {
  flex: 0 0 calc(100% - 1rem);
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 0 0.5rem;
  display: flex;
  flex-direction: column;
  min-height: auto;
  scroll-snap-align: start;
}

#kcmi-promos-section .promo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

#kcmi-promos-section .promo-media-container {
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
  margin-bottom: 0.25rem;
}

#kcmi-promos-section .promo-card img,
#kcmi-promos-section .promo-card .video-container {
  width: 100%;
  height: auto;
  min-height: auto;
  max-height: 40vh;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}

#kcmi-promos-section .promo-card .video-container iframe {
  width: 100%;
  height: 100%;
  min-height: 180px;
  border: none;
  aspect-ratio: 16/9;
}

#kcmi-promos-section .promo-content {
  padding: 1rem;
  padding-bottom: 0.5rem;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

#kcmi-promos-section .promo-card .text-center.mt-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  order: 1;
}

#kcmi-promos-section .promo-card .event-title {
  color: #7c1963;
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
  order: 2;
}

#kcmi-promos-section .promo-content .event-description {
  color: #333;
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  line-height: 1.4;
  margin-bottom: 0.5rem;
  order: 3;
}

#kcmi-promos-section .event-details {
  order: 4;
}

#kcmi-promos-section .promo-media-container .video-caption,
#kcmi-promos-section .promo-media-container .image-caption {
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  text-align: center;
  font-size: 0.9rem;
}

#kcmi-promos-section .promo-date,
#kcmi-promos-section .event-location,
#kcmi-promos-section .event-contact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.85rem, 2.5vw, 0.95rem);
  color: #555;
  margin: 0.25rem 0;
  justify-content: center;
  flex-wrap: wrap;
}

#kcmi-promos-section .promo-date i,
#kcmi-promos-section .event-location i,
#kcmi-promos-section .event-contact i {
  color: #7c1963;
  font-size: clamp(0.9rem, 2.5vw, 1rem);
}

#kcmi-promos-section .event-dates {
  margin-bottom: 0.5rem;
  width: 100%;
}

#kcmi-promos-section .event-time,
#kcmi-promos-section .event-times {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.85rem, 2.5vw, 0.95rem);
  color: #555;
  margin: 0.3rem 0;
  justify-content: center;
  width: 100%;
}

#kcmi-promos-section .time-slots {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  text-align: center;
}

#kcmi-promos-section .time-slot {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
}

#kcmi-promos-section .session-name {
  font-weight: 500;
}

#kcmi-promos-section .session-time {
  color: #7c1963;
}

#kcmi-promos-section .contact-instructions {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  font-size: 0.8rem;
}

#kcmi-promos-section .promo-card .btn-primary {
  background-color: #7c1963;
  border-color: #7c1963;
  margin-top: 0;
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  padding: 0.5rem 1rem;
}

#kcmi-promos-section .promo-card .btn-primary:hover {
  background-color: #6a1554;
  border-color: #6a1554;
}

#kcmi-promos-section .loading-spinner {
  text-align: center;
  padding: 1.5rem;
  color: #7c1963;
  font-style: italic;
  width: 100%;
  font-size: clamp(1rem, 2.5vw, 1.1rem);
}

#kcmi-promos-section .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Carousel Navigation - hide when only one event */
#kcmi-promos-section #promos-container.single-event .carousel-nav {
  display: none;
}

#kcmi-promos-section .carousel-nav {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 1rem;
}

#kcmi-promos-section .carousel-nav button {
  background-color: #7c1963;
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 1rem;
}

#kcmi-promos-section .carousel-nav button:hover {
  background-color: #6a1554;
}

#kcmi-promos-section .carousel-nav button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

/* Responsive Styles */
@media (min-width: 576px) {
  #kcmi-promos-section .promo-card {
    flex: 0 0 calc(50% - 1rem);
  }

  #kcmi-promos-section .promo-card img,
  #kcmi-promos-section .promo-card .video-container {
    min-height: 200px;
  }
}

@media (min-width: 768px) {
  #kcmi-promos-section {
    padding: 2rem 0;
  }

  #kcmi-promos-section .promo-card {
    flex: 0 0 calc(33.333% - 1rem);
    min-height: 500px;
  }

  #kcmi-promos-section #promos-container.single-event .promo-card {
    flex: 0 0 80%;
    max-width: 800px;
  }
}

@media (min-width: 992px) {
  #kcmi-promos-section .promo-card img,
  #kcmi-promos-section .promo-card .video-container {
    min-height: 220px;
  }

  #kcmi-promos-section #promos-container.single-event .promo-card {
    flex: 0 0 70%;
  }
}

@media (min-width: 1200px) {
  #kcmi-promos-section #promos-container.single-event .promo-card {
    flex: 0 0 60%;
  }
}

/* Dark Theme Styles */
[data-bs-theme="dark"] #kcmi-promos-section {
  background-color: #1a1a1a;
}

[data-bs-theme="dark"] #kcmi-promos-section h2,
[data-bs-theme="dark"]
  [data-bs-theme="dark"]
  #kcmi-promos-section
  p.text-center {
  color: #e0e0e0;
}

[data-bs-theme="dark"] #kcmi-promos-section .promo-card {
  background-color: #2c2c2c;
  border: 1px solid #444;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] #kcmi-promos-section .event-title {
  color: #c298b7;
}

[data-bs-theme="dark"] #kcmi-promos-section .promo-content .event-description {
  color: #e0e0e0;
}

[data-bs-theme="dark"] #kcmi-promos-section .promo-date,
[data-bs-theme="dark"] #kcmi-promos-section .event-location,
[data-bs-theme="dark"] #kcmi-promos-section .event-contact {
  color: #b0b0b0;
}

[data-bs-theme="dark"] #kcmi-promos-section .promo-date i,
[data-bs-theme="dark"] #kcmi-promos-section .event-location i,
[data-bs-theme="dark"] #kcmi-promos-section .event-contact i {
  color: #c298b7;
}

[data-bs-theme="dark"] #kcmi-promos-section .promo-card img,
[data-bs-theme="dark"] #kcmi-promos-section .promo-card .video-container {
  filter: brightness(0.8);
}

[data-bs-theme="dark"] #kcmi-promos-section .loading-spinner {
  color: #c298b7;
}

[data-bs-theme="dark"] #kcmi-promos-section .promo-card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] #kcmi-promos-section .promo-card .btn-primary {
  background-color: #9a3d81;
  border-color: #9a3d81;
}

[data-bs-theme="dark"] #kcmi-promos-section .promo-card .btn-primary:hover {
  background-color: #8a2d71;
  border-color: #8a2d71;
}

[data-bs-theme="dark"] #kcmi-promos-section .carousel-nav button {
  background-color: #9a3d81;
}

[data-bs-theme="dark"] #kcmi-promos-section .carousel-nav button:hover {
  background-color: #8a2d71;
}

[data-bs-theme="dark"] #kcmi-promos-section .session-time {
  color: #c298b7;
}

[data-bs-theme="dark"] #kcmi-promos-section .event-time,
[data-bs-theme="dark"] #kcmi-promos-section .event-times {
  color: #b0b0b0;
}

[data-bs-theme="dark"] #kcmi-promos-section .promo-media-container {
  border-bottom: 1px solid #444;
}

/* -------------------------------------------------------------------------- */
/* Giving section with heart and inscription effect */
/* -------------------------------------------------------------------------- */
.index-page .homepage-giving-section {
  position: relative; /* To position the heart and inscription */
  color: black;
  padding: 1rem 0;
  text-align: center;
}

.index-page .homepage-giving-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px; /* Reduced size */
  height: 150px;
  background-image: url("../assets/img/cross-in-heart.png"); /* Corrected path */
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.1; /* Adjust for faint effect */
  z-index: -1; /* Ensure it's behind the text */
}

/* Ensure text and content stay on top */
.index-page .homepage-giving-section h2,
.index-page .homepage-giving-section p,
.index-page .homepage-giving-section .my-10,
.index-page .homepage-giving-section .d-flex {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------------- */
/* Prayer Request Section with Background Image */
/* -------------------------------------------------------------------------- */
.index-page .homepage-prayer-request-section {
  position: relative; /* To position the background image */
  text-align: center;
  padding: 1rem 0;
  color: black; /* Adjust text color for better readability */
}

.index-page .homepage-prayer-request-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/prayer-request.jpeg"); /* Corrected path */
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.3; /* Adjust for faint effect */
  z-index: -1; /* Ensure it's behind text */
}

/* Ensure text and content stay on top */
.index-page .homepage-prayer-request-section h2,
.index-page .homepage-prayer-request-section p,
.index-page .homepage-prayer-request-section a {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------------- */
/* Map Section                                                                */
/* -------------------------------------------------------------------------- */
.index-page .homepage-map-section {
  padding: 2rem 0;
  padding-top: 0;
  margin-top: 0;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.index-page .homepage-map-container {
  position: relative;
  height: 400px;
  width: 100%;
  max-width: 1000px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
}

.index-page #churchMap {
  height: 100%;
  width: 100%;
}

.index-page .map-loading-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  z-index: 10;
}

.index-page .map-loading-placeholder .spinner-border {
  width: 3rem;
  height: 3rem;
  border-width: 0.25em;
  color: #7c1963;
  margin-bottom: 1rem;
}

.index-page .map-loading-placeholder p {
  font-size: 1.1rem;
  color: #555;
}

.index-page .homepage-map-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.index-page .homepage-map-text {
  padding: 0.25rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.index-page .homepage-map-text h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #7c1963;
  margin-bottom: 0.5rem;
}

.index-page .homepage-map-text p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 1rem;
}

.index-page .get-directions-btn {
  background-color: #7c1963;
  border-color: #7c1963;
  color: white;
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* -------------------------------------------------------------------------- */
/* ## Responsive Media Queries                                               */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .index-page .homepage-map-container {
    height: 350px;
  }

  .index-page .homepage-map-text {
    padding: 0.5rem;
  }

  .index-page .homepage-map-text h2 {
    font-size: 1.5rem;
  }

  .index-page .homepage-map-text p {
    font-size: 1rem;
  }

  .homepage-map-text-container {
    flex-direction: column; /* Stack map and text vertically on smaller screens */
    text-align: center; /* Center-align text */
  }

  .homepage-map-container {
    width: 100%; /* Full width for map on smaller screens */
    margin-bottom: 0.5rem; /* Spacing below map */
  }
}

/* -------------------------------------------------------------------------- */
/* ## Styles for about-apostle-aikins.html page                             */
/* -------------------------------------------------------------------------- */

/* Style for the body on about-apostle-aikins.html */
.about-apostle-page body {
  background-color: #7c1963b2; /* Background color from inline style */
}

/* Style for paragraphs on about-apostle-aikins.html */
.about-apostle-page .brief-history-about {
  color: white; /* Text color from inline style */
  font-size: clamp(1.5rem, 2.5vw, 1.8rem); /* Slightly reduced font size */
}

/* Slideshow container for about-apostle-aikins.html */
.about-apostle-page .slideshow-container {
  position: fixed; /* From inline style */
  top: 0; /* From inline style */
  left: 0; /* From inline style */
  width: 100%; /* From inline style */
  height: 100%; /* From inline style */
  z-index: -1; /* From inline style */
  overflow: hidden; /* From inline style */
}

/* Slideshow images for about-apostle-aikins.html */
.about-apostle-page .slideshow-image {
  position: absolute; /* From inline style */
  top: 0; /* From inline style */
  left: 0; /* From inline style */
  width: 100%; /* From inline style */
  height: 100%; /* From inline style */
  opacity: 0; /* From inline style */
  background-size: contain; /* From inline style */
  background-position: center; /* From inline style */
  transition: opacity 1s ease-in-out; /* From inline style */
}

/* Content overlay for about-apostle-aikins.html */
.about-apostle-page .content-overlay {
  position: relative; /* From inline style */
  z-index: 1; /* From inline style */
  padding: 15px; /* Reduced padding */
  color: white; /* From inline style */
  backdrop-filter: blur(1px); /* From inline style */
  background-color: hsla(0, 100%, 20%, 0.3);
}

/* -------------------------------------------------------------------------- */
/* ## Styles for contact-us.html page                                      */
/* -------------------------------------------------------------------------- */
.contact-page main {
  margin-top: 5px;
  margin-bottom: -20px; /* Reduced negative margin */
}

/* Contact Container */
.contact-page .contact-container {
  padding: 2rem 0; /* Reduced padding */
}

/* Contact Heading */
.contact-page h1 {
  font-size: clamp(
    1.75rem,
    4vw,
    2.25rem
  ); /* Slightly reduced font size for contact heading */
  font-weight: bold;
  margin-bottom: 1rem; /* Reduced spacing below heading */
  color: #333; /* Dark text for better contrast */
}

/* Contact Lead Text */
.contact-page .lead {
  font-size: clamp(
    1.4rem,
    2.5vw,
    1.6rem
  ); /* Slightly reduced font size for lead text */
  color: #555; /* Slightly muted text for body */
  line-height: 1.5; /* Improve readability */
}

/* Contact Icons and Links */
.contact-page .contact-icon {
  font-size: 2rem; /* Slightly reduced icon size */
  color: #007bff; /* Primary color for icons */
  margin-bottom: 0.5rem; /* Reduced spacing below icons */
}

.contact-page .contact-icon:hover {
  color: #0056b3; /* Darker color on hover */
}

.contact-page .click-to-contact {
  text-decoration: none; /* Remove underline from links */
  color: inherit; /* Inherit text color */
  display: block; /* Ensure links take full width */
  margin-bottom: 1rem; /* Reduced spacing between contact items */
}

.contact-page a span {
  font-size: 1.25rem; /* Slightly reduced text size for contact details */
  color: #333; /* Dark text for better contrast */
}

/* Responsive Adjustments for Contact Details */
@media (max-width: 768px) {
  .contact-page .contact-icon {
    font-size: 1.75rem; /* Slightly smaller icons on smaller screens */
  }

  .contact-page a span {
    font-size: 1rem; /* Smaller text for contact details on smaller screens */
  }

  .contact-page .col-md-6 {
    margin-bottom: 1rem; /* Reduced spacing between contact items on smaller screens */
  }
}

/* Map Container */
.contact-page .contact-map-section {
  padding: 2rem 0;
}

.contact-page .contact-page-map-container {
  position: relative;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 1rem;
}

.contact-page #contactPageMap {
  height: 100%;
  width: 100%;
}

.contact-page .contact-map-loading-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  z-index: 10;
}

.contact-page .contact-map-loading-placeholder .spinner-border {
  width: 3rem;
  height: 3rem;
  border-width: 0.25em;
  color: #7c1963;
  margin-bottom: 1rem;
}

.contact-page .contact-map-loading-placeholder p {
  font-size: 1.1rem;
  color: #555;
}

.contact-page .contact-map-text {
  padding: 0.5rem;
  text-align: center;
}

.contact-page .contact-map-text h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #7c1963;
  margin-bottom: 0.5rem;
}

.contact-page .contact-map-text p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 1rem;
}

/* Contact Form */
.contact-page #contactForm {
  margin-top: 1rem; /* Reduced spacing above the form */
}

.contact-page #contactForm .form-control {
  margin-bottom: 0.5rem; /* Reduced spacing between form fields */
}

.contact-page #contactForm .btn-primary {
  width: 100%; /* Full-width button on smaller screens */
  margin-top: 0.5rem; /* Reduced spacing above the button */
}

@media (min-width: 768px) {
  .contact-page #contactForm .btn-primary {
    width: auto; /* Auto width on larger screens */
  }
}

@media (max-width: 992px) {
  .index-page .homepage-carousel-section .homepage-campus-card {
    flex-basis: calc(50% - 10px); /* 2 cards per row */
    max-width: calc(50% - 10px);
  }
}

@media (max-width: 576px) {
  .index-page .homepage-carousel-section .homepage-campus-card {
    flex-basis: 100%; /* 1 card per row */
    max-width: 100%;
    margin-right: 0; /* Remove right margin for single card layout */
  }
}

/* -------------------------------------------------------------------------- */
/* ## Styles for FAQs Page (Scoped with .faqs-page) */
/* -------------------------------------------------------------------------- */

.faqs-page main {
  margin-top: 40px; /* Adjusted for the fixed navbar */
  margin-bottom: 20px; /* Reduced margin */
}

.faqs-page h1 {
  font-size: clamp(
    1.75rem,
    4vw,
    2rem
  ); /* Slightly reduced font size for FAQ heading */
  font-weight: bold;
  color: #333; /* Dark text for better contrast */
  margin-bottom: 1rem; /* Reduced spacing below heading */
}

.faqs-page .accordion-button {
  font-size: clamp(
    1.1rem,
    2vw,
    1.25rem
  ); /* Slightly reduced font size for questions */
  font-weight: bold;
  color: #007bff; /* Primary color for questions */
  background-color: #f8f9fa; /* Light background for accordion headers */
  border: 1px solid #ddd; /* Add border for better separation */
  border-radius: 5px; /* Rounded corners */
  margin-bottom: 0.25rem; /* Reduced spacing between questions */
  transition: all 0.3s ease; /* Smooth transitions */
}

.faqs-page .accordion-button:hover {
  color: #0056b3; /* Darker blue on hover */
  background-color: #e9ecef; /* Slightly darker background on hover */
}

.faqs-page .accordion-button:not(.collapsed) {
  color: #0056b3; /* Darker blue when expanded */
  background-color: #e9ecef; /* Slightly darker background when expanded */
}

.faqs-page .accordion-body {
  font-size: clamp(
    0.9rem,
    1.5vw,
    1rem
  ); /* Slightly reduced font size for answers */
  color: #555; /* Slightly muted text for answers */
  line-height: 1.5; /* Improve readability */
  padding: 1rem; /* Reduced padding */
  background-color: #fff; /* White background for answers */
  border: 1px solid #ddd; /* Add border for better separation */
  border-radius: 5px; /* Rounded corners */
}

.faqs-page .accordion-body ol,
.faqs-page .accordion-body ul {
  padding-left: 1rem; /* Reduced indent for lists */
}

.faqs-page .accordion-body li {
  margin-bottom: 0.5rem; /* Reduced spacing between list items */
}

.faqs-page .accordion-body a {
  color: #007bff; /* Primary color for links */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s ease; /* Smooth color transition */
}

.faqs-page .accordion-body a:hover {
  color: #0056b3; /* Darker blue on hover */
  text-decoration: underline; /* Underline on hover */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .faqs-page h1 {
    font-size: 1.75rem; /* Smaller heading on smaller screens */
  }

  .faqs-page .accordion-button {
    font-size: 1rem; /* Smaller font for questions on smaller screens */
  }

  .faqs-page .accordion-body {
    font-size: 0.9rem; /* Smaller font for answers on smaller screens */
  }
}

/* -------------------------------------------------------------------------- */
/* ## Styles for Livestream Page  */
/* -------------------------------------------------------------------------- */
.livestream-page main {
  margin-top: 0.5em; /* Reduced margin */
}

.livestream-page main h2 {
  font-size: clamp(1.5rem, 3vw, 1.75rem); /* Slightly reduced font size */
  margin-bottom: 0.5rem; /* Reduced margin */
}

/* Responsive Video Container */
.livestream-page .video-responsive {
  position: relative;
  padding-bottom: 50%; /* Slightly reduced aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 800px; /* Optional: Limit maximum width */
  margin: 0 auto; /* Center the video container */
}

.livestream-page .video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------------------------------- */
/* ## Styles for giving-kcmi Page  */
/* -------------------------------------------------------------------------- */
.giving-page main {
  margin-top: 30px; /* Adjusted for the fixed navbar */
  font-size: 1.4rem; /* Slightly reduced base font size */
}

/* -------------------------------------------------------------------------- */
/* ## Styles for location.html page                                        */
/* -------------------------------------------------------------------------- */
.page-location main {
  margin-top: 55px; /* Adjusted for the fixed navbar */
}

.page-location .col {
  /* Target the column to ensure full height within row */
  display: flex;
  flex-direction: column; /* Ensure column takes full height and cards stretch */
}

.page-location .card {
  display: flex; /* Enable flexbox on the card */
  flex-direction: column; /* Stack card elements vertically */
  height: 100%; /* Make cards take full height of their column */
}

.page-location .card img {
  object-fit: cover; /* Cover card image area, cropping if needed */
  height: 200px; /* Reduced height for card images */
}

.page-location .card-body {
  flex-grow: 1; /* Allow card body to grow and take available space */
  display: flex; /* Flexbox in card body for vertical alignment */
  flex-direction: column; /* Stack body content vertically */
}

.page-location .card-text {
  overflow: hidden; /* Initially hide overflow content */
  height: 6em; /* Reduced height for collapsed text */
  line-height: 1.5em; /* Slightly reduced line height */
  transition: height 0.3s ease-out; /* Smooth transition for height */
}

.page-location .card-text.expanded {
  height: auto; /* Expand text to full content height */
}

.page-location .see-more {
  /* Style for "See More/Less" link */
  color: blue; /* Make "See More/Less" blue */
  cursor: pointer; /* Indicate it's clickable */
  text-decoration: underline; /* Add underline for link appearance */
}

.page-location .see-more:hover {
  /* Optional: Hover effect */
  color: darkblue;
}

/* -------------------------------------------------------------------------- */
/* ## Styles for mission-kcmi.html page                                       */
/* -------------------------------------------------------------------------- */
.kcmi-mission-page main {
  margin-top: 35px; /* Adjusted for the fixed navbar */
}

/* -------------------------------------------------------------------------- */
/* ## Styles for sermons.html page                                            */
/* -------------------------------------------------------------------------- */
.page-sermons main {
  margin-top: 5px; /* Adjusted for the fixed navbar */
}

/* -------------------------------------------------------------------------- */
/* ## Styles for services.html page                                           */
/* -------------------------------------------------------------------------- */
.page-services main {
  margin-top: 3rem; /* Adjusted for the fixed navbar */
}

/* -------------------------------------------------------------------------- */
/* Footer Daily Faith Recharge Modal style                                 */
/* -------------------------------------------------------------------------- */
#DFRwhatsappNumber {
  text-decoration: underline;
  cursor: pointer; /* Change cursor to pointer on hover */
}

/* Dark mode styles */
/* -------------------------------------------------------------------------- */
/* ## Dark Mode Styles (Using Bootstrap's data-bs-theme="dark")              */
/* -------------------------------------------------------------------------- */

[data-bs-theme="dark"] {
  /* General dark mode styles */
  background-color: #121212; /* Darker background for better contrast */
  color: #e0e0e0; /* Light text for readability */
}

[data-bs-theme="dark"] body {
  background-color: #121212; /* Ensure body has dark background */
  color: #e0e0e0; /* Light text for body */
}

[data-bs-theme="dark"] .navbar {
  background-color: #1e1e1e !important; /* Darker navbar */
}

[data-bs-theme="dark"] .navbar .nav-link {
  color: #e0e0e0 !important; /* Light text for navbar links */
}

[data-bs-theme="dark"] .navbar .nav-link:hover {
  color: #ffffff !important; /* Brighter text on hover */
}

[data-bs-theme="dark"] .homepage-header-content {
  color: #e0e0e0; /* Light text for header content */
  background-color: rgba(
    36,
    17,
    17,
    0.7
  ); /* Darker overlay for better contrast */
}

[data-bs-theme="dark"] .header-welcome-text {
  animation: textGlow none; /* Disable text glow in dark mode */
}

[data-bs-theme="dark"] .homepage-campus-card {
  background-color: #1e1e1e; /* Dark background for carousel cards */
  border-color: #444; /* Darker border for cards */
}

[data-bs-theme="dark"] .homepage-campus-card h3,
[data-bs-theme="dark"] .homepage-campus-card p {
  color: #e0e0e0; /* Light text for card content */
}

[data-bs-theme="dark"] .homepage-campus-card img {
  filter: brightness(0.8); /* Slightly reduce image brightness */
}

[data-bs-theme="dark"] .homepage-pastor-slideshow-section {
  background-color: #1e1e1e; /* Dark background for slideshow section */
}

[data-bs-theme="dark"] .homepage-content-overlay {
  background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for better contrast */
}

[data-bs-theme="dark"] .homepage-giving-section {
  background-color: #1e1e1e; /* Dark background for giving section */
}

[data-bs-theme="dark"] .homepage-giving-section::before {
  opacity: 0.2; /* Adjust overlay opacity for dark mode */
}

[data-bs-theme="dark"] .homepage-prayer-request-section {
  background-color: #1e1e1e; /* Dark background for prayer section */
}

[data-bs-theme="dark"] .homepage-prayer-request-section::before {
  opacity: 0.2; /* Adjust overlay opacity for dark mode */
}

/* Dark Mode for Both Maps */
[data-bs-theme="dark"] .index-page .homepage-map-container,
[data-bs-theme="dark"] .contact-page .contact-page-map-container {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .index-page .map-loading-placeholder,
[data-bs-theme="dark"] .contact-page .contact-map-loading-placeholder {
  background-color: #2c2c2c;
}

[data-bs-theme="dark"] .index-page .map-loading-placeholder p,
[data-bs-theme="dark"] .contact-page .contact-map-loading-placeholder p {
  color: #e0e0e0;
}

[data-bs-theme="dark"] .index-page .homepage-map-text h2,
[data-bs-theme="dark"] .contact-page .contact-map-text h2 {
  color: #c298b7;
}

[data-bs-theme="dark"] .index-page .homepage-map-text p,
[data-bs-theme="dark"] .contact-page .contact-map-text p {
  color: #b0b0b0;
}

[data-bs-theme="dark"] .index-page .get-directions-btn,
[data-bs-theme="dark"] .contact-page .get-directions-btn {
  background-color: #9a3d81;
  border-color: #9a3d81;
}

[data-bs-theme="dark"] .index-page .get-directions-btn:hover,
[data-bs-theme="dark"] .contact-page .get-directions-btn:hover {
  background-color: #8a2d71;
  border-color: #8a2d71;
}

[data-bs-theme="dark"] footer {
  background-color: #300630 !important; /* Dark background for footer */
  color: #e0e0e0; /* Light text for footer */
}

[data-bs-theme="dark"] footer a {
  color: #e0e0e0; /* Light text for footer links */
}

[data-bs-theme="dark"] footer a:hover {
  color: #ffffff; /* Brighter text on hover */
}

[data-bs-theme="dark"] footer a img.mx-2 {
  filter: brightness(1.5); /* Increase brightness for social icons */
  background-color: transparent; /* Remove any background color */
  border-radius: 50%; /* Optional: Add rounded corners */
}
[data-bs-theme="dark"] .modal-content {
  background-color: #300630 !important; /* Dark background for modals */
  color: #e0e0e0; /* Light text for modals */
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  border-color: #444; /* Darker border for modal header/footer */
}

[data-bs-theme="dark"] .accordion-button {
  background-color: #2c2c2c; /* Dark background for accordion buttons */
  color: #e0e0e0; /* Light text for accordion buttons */
}

[data-bs-theme="dark"] .accordion-body {
  background-color: #1e1e1e; /* Dark background for accordion body */
  color: #e0e0e0; /* Light text for accordion body */
}

[data-bs-theme="dark"] .btn-light {
  background-color: #444; /* Darker background for light buttons */
  color: #e0e0e0; /* Light text for light buttons */
}

[data-bs-theme="dark"] .btn-light:hover {
  background-color: #555; /* Slightly lighter on hover */
}

[data-bs-theme="dark"] .btn-dark {
  background-color: #e0e0e0; /* Light background for dark buttons */
  color: #121212; /* Dark text for dark buttons */
}

[data-bs-theme="dark"] .btn-dark:hover {
  background-color: #ffffff; /* Brighter on hover */
}

[data-bs-theme="dark"] .form-control {
  background-color: #2c2c2c; /* Dark background for form inputs */
  color: #e0e0e0; /* Light text for form inputs */
  border-color: #444; /* Darker border for form inputs */
}

[data-bs-theme="dark"] .form-control:focus {
  background-color: #2c2c2c; /* Dark background for focused form inputs */
  color: #e0e0e0; /* Light text for focused form inputs */
  border-color: #666; /* Lighter border for focused form inputs */
}

[data-bs-theme="dark"] .card {
  background-color: #1e1e1e; /* Dark background for cards */
  border-color: #444; /* Darker border for cards */
}

[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .card-text {
  color: #e0e0e0; /* Light text for card content */
}

[data-bs-theme="dark"] .card img {
  filter: brightness(0.8); /* Slightly reduce image brightness */
}

[data-bs-theme="dark"] .video-responsive iframe {
  filter: brightness(0.8); /* Slightly reduce video brightness */
}

[data-bs-theme="dark"] .display-1 {
  color: #e0e0e0 !important;
}

[data-bs-theme="dark"] .display-2 {
  color: #e0e0e0 !important;
}

[data-bs-theme="dark"] .display-3 {
  color: #e0e0e0 !important;
}

[data-bs-theme="dark"] .display-4 {
  color: #e0e0e0 !important;
}

[data-bs-theme="dark"] .display-5 {
  color: #e0e0e0 !important;
}

[data-bs-theme="dark"] .display-6 {
  color: #e0e0e0 !important;
}

[data-bs-theme="dark"] .text-dark {
  color: #e0e0e0 !important;
}

[data-bs-theme="dark"] p {
  color: #e0e0e0 !important;
}

[data-bs-theme="dark"] h1 {
  color: #e0e0e0 !important;
}

[data-bs-theme="dark"] h2 {
  color: #e0e0e0 !important;
}

[data-bs-theme="dark"] .bg-light {
  background-color: #121212 !important;
}

/* -------------------------------------------------------------------------- */
/* ## Dark Mode Toggle Button Styles                                         */
/* -------------------------------------------------------------------------- */

#darkModeToggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100000;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#darkModeToggle:hover {
  background-color: #555; /* Slightly darker background on hover */
  color: #fff; /* Lighter text on hover */
}