/* =========================
   Base Styles
========================= */

:root {
  --black: #080b08;
  --dark: #111611;
  --dark-soft: #192019;
  --green: #7acb22;
  --green-dark: #579b12;
  --white: #ffffff;
  --off-white: #f4f6f2;
  --gray: #b8c0b6;
  --text-dark: #202620;
  --border: rgba(255, 255, 255, 0.12);
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  --radius: 18px;
  --container: 1180px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;

  background: var(--off-white);
  color: var(--text-dark);
  line-height: 1.65;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

.container {
  width: min(92%, var(--container));
  margin-inline: auto;
}

/* =========================
   Header
========================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  background: rgba(8, 11, 8, 0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}

.header-inner {
  min-height: 82px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 13px;
}

.logo-mark {
  color: var(--green);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 1px;
}

.logo-text {
  color: var(--white);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.main-nav a {
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 700;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--green);
}

.menu-toggle {
  display: none;

  width: 46px;
  height: 42px;

  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;

  cursor: pointer;
}

.menu-toggle span {
  display: block;

  width: 22px;
  height: 2px;

  margin: 5px auto;

  background: var(--white);
}

/* =========================
   Hero
========================= */

.hero {
  position: relative;

  min-height: 690px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(5, 8, 5, 0.97) 0%,
      rgba(5, 8, 5, 0.9) 48%,
      rgba(5, 8, 5, 0.55) 100%
    ),
    radial-gradient(
      circle at 80% 35%,
      rgba(122, 203, 34, 0.34),
      transparent 35%
    ),
    #0a0f0a;
}

.hero::after {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);

  background-size: 40px 40px;

  opacity: 0.35;
}

.hero-content {
  position: relative;
  z-index: 2;

  padding-block: 100px;

  color: var(--white);
}

.eyebrow,
.section-label {
  color: var(--green);

  font-size: 0.84rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 2.5px;
}

.hero h1 {
  max-width: 850px;

  margin-top: 18px;

  font-size: clamp(3rem, 7vw, 6.2rem);
  line-height: 0.98;
  letter-spacing: -3px;
}

.hero-description {
  max-width: 690px;

  margin-top: 28px;

  color: #d8ded5;
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;

  margin-top: 35px;
}

/* =========================
   Buttons
========================= */

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  min-height: 52px;
  padding: 13px 25px;

  border-radius: 9px;

  font-size: 0.95rem;
  font-weight: 800;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: var(--green);
  color: var(--black);
}

.button-primary:hover {
  background: #8dde2c;
}

.button-outline {
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--white);
}

.button-outline:hover {
  border-color: var(--green);
  color: var(--green);
}

/* =========================
   Sections
========================= */

.section {
  padding-block: 95px;
}

.two-column {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 70px;
  align-items: center;
}

.section h2,
.cta-section h2 {
  margin-top: 10px;

  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -1.5px;
}

.section p {
  margin-top: 20px;
}

.text-link {
  display: inline-block;

  margin-top: 25px;

  color: var(--green-dark);
  font-weight: 800;
}

.verse-card {
  padding: 55px;

  background: var(--dark);
  color: var(--white);

  border-radius: var(--radius);
  border-left: 5px solid var(--green);

  box-shadow: var(--shadow);
}

.verse {
  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.35;
}

.verse-reference {
  color: var(--green);
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.8px;
}

/* =========================
   Cards
========================= */

.ministry-section {
  background: var(--dark);
  color: var(--white);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 45px;
}

.section-heading > p:last-child {
  color: var(--gray);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  padding: 35px;

  background: var(--dark-soft);

  border: 1px solid var(--border);
  border-radius: var(--radius);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease;
}

.feature-card:hover {
  transform: translateY(-7px);
  border-color: rgba(122, 203, 34, 0.65);
}

.card-icon {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  margin-bottom: 25px;

  color: var(--black);
  background: var(--green);

  border-radius: 50%;

  font-size: 1.25rem;
  font-weight: 900;
}

.feature-card h3 {
  font-size: 1.4rem;
}

.feature-card p {
  color: var(--gray);
}

.feature-card a {
  display: inline-block;

  margin-top: 22px;

  color: var(--green);
  font-weight: 800;
}

/* =========================
   Call to Action
========================= */

.cta-section {
  padding-block: 75px;

  background: var(--green);
  color: var(--black);
}

.cta-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.cta-section .section-label {
  color: var(--black);
  opacity: 0.72;
}

.cta-section p {
  max-width: 690px;
  margin-top: 12px;
}

.cta-section .button-primary {
  flex-shrink: 0;

  background: var(--black);
  color: var(--white);
}

/* =========================
   Footer
========================= */

.site-footer {
  background: var(--black);
  color: var(--gray);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr;
  gap: 60px;

  padding-block: 65px;
}

.footer-logo {
  color: var(--green);
  font-size: 2.1rem;
  font-weight: 900;
}

.footer-motto {
  margin-top: 10px;
  color: var(--green);
}

.site-footer h3 {
  margin-bottom: 15px;
  color: var(--white);
  font-size: 1rem;
}

.site-footer a {
  display: block;
  margin-top: 9px;
}

.site-footer a:hover {
  color: var(--green);
}

.footer-bottom {
  padding-block: 20px;

  border-top: 1px solid var(--border);

  font-size: 0.85rem;
}

/* =========================
   Tablet
========================= */

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

  .main-nav {
    position: absolute;
    top: 82px;
    left: 0;
    right: 0;

    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;

    padding: 15px 4% 25px;

    background: var(--dark);
    border-bottom: 1px solid var(--border);
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav a {
    padding: 14px 10px;

    border-bottom: 1px solid var(--border);
  }

  .two-column {
    grid-template-columns: 1fr;
    gap: 45px;
  }

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

  .cta-content {
    align-items: flex-start;
    flex-direction: column;
  }

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

/* =========================
   Mobile
========================= */

@media (max-width: 650px) {
  .header-inner {
    min-height: 72px;
  }

  .logo-text {
    display: none;
  }

  .main-nav {
    top: 72px;
  }

  .hero {
    min-height: 610px;
  }

  .hero-content {
    padding-block: 75px;
  }

  .hero h1 {
    letter-spacing: -2px;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .section {
    padding-block: 70px;
  }

  .verse-card {
    padding: 32px 25px;
  }

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

  .feature-card {
    padding: 30px 25px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
}

/* =========================
   Interior Page Hero
========================= */

.page-hero {
  position: relative;

  min-height: 430px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(5, 8, 5, 0.98) 0%,
      rgba(5, 8, 5, 0.91) 58%,
      rgba(5, 8, 5, 0.76) 100%
    ),
    radial-gradient(
      circle at 85% 40%,
      rgba(122, 203, 34, 0.28),
      transparent 35%
    ),
    var(--black);
}

.page-hero::after {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);

  background-size: 40px 40px;
}

.page-hero-content {
  position: relative;
  z-index: 2;

  padding-block: 85px;

  color: var(--white);
}

.page-hero h1 {
  max-width: 850px;

  margin-top: 14px;

  font-size: clamp(2.8rem, 6vw, 5.2rem);
  line-height: 1;
  letter-spacing: -2.5px;
}

.page-hero p:last-child {
  max-width: 720px;

  margin-top: 24px;

  color: var(--gray);
  font-size: 1.1rem;
}

/* =========================
   About Page
========================= */

.about-intro,
.pastor-section,
.values-section {
  background: var(--black);
  color: var(--white);
}

.about-intro p,
.pastor-section p,
.values-section p {
  color: var(--gray);
}

.dark-section {
  background: var(--dark);
  color: var(--white);
}

.dark-section .section-heading > p:last-child {
  color: var(--gray);
}

.pastor-photo-placeholder {
  min-height: 430px;

  display: grid;
  place-items: center;

  background:
    radial-gradient(circle at center, rgba(122, 203, 34, 0.2), transparent 48%),
    var(--dark-soft);

  border: 1px solid var(--border);
  border-radius: var(--radius);

  color: var(--white);
  text-align: center;
}

.pastor-photo-placeholder span {
  display: block;

  color: var(--green);
  font-size: 1.7rem;
  font-weight: 900;
}

.pastor-photo-placeholder small {
  display: block;

  margin-top: 8px;

  color: var(--gray);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;

  margin-top: 40px;
}

.value-item {
  padding: 30px;

  background: var(--dark-soft);

  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.value-item h3 {
  color: var(--green);
  font-size: 1.3rem;
}

.value-item p {
  margin-top: 12px;
}

/* =========================
   About Page Mobile
========================= */

@media (max-width: 750px) {
  .page-hero {
    min-height: 360px;
  }

  .page-hero-content {
    padding-block: 70px;
  }

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

  .pastor-photo-placeholder {
    min-height: 320px;
  }
}
/* =========================
   What We Believe Page
========================= */

.beliefs-introduction,
.doctrine-section,
.doctrine-note-section {
  background: var(--black);
  color: var(--white);
}

.beliefs-intro-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
}

.beliefs-introduction h2,
.doctrine-note h2 {
  margin-top: 10px;

  color: var(--white);

  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -1.5px;
}

.beliefs-introduction p {
  margin-top: 20px;
  color: var(--gray);
}

/* =========================
   Doctrine Navigation
========================= */

.beliefs-navigation {
  padding-block: 32px;

  background: var(--dark);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.beliefs-navigation-title {
  margin-bottom: 18px;

  color: var(--white);

  font-size: 0.78rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 2px;
}

.beliefs-navigation-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
}

.beliefs-navigation-links a {
  display: flex;
  align-items: center;

  min-height: 46px;
  padding: 10px 14px;

  background: transparent;
  color: var(--gray);

  border-bottom: 1px solid var(--border);

  font-size: 0.92rem;
  font-weight: 700;

  transition:
    color 0.2s ease,
    padding-left 0.2s ease,
    border-color 0.2s ease;
}

.beliefs-navigation-links a::before {
  content: "→";

  margin-right: 10px;

  color: var(--green);
  font-weight: 900;
}

.beliefs-navigation-links a:hover {
  padding-left: 20px;

  color: var(--green);
  border-color: rgba(122, 203, 34, 0.65);
}

/* =========================
   Doctrine List
========================= */

.doctrine-list {
  display: grid;
  gap: 15px;

  margin-top: 45px;
}

.doctrine-item {
  scroll-margin-top: 110px;

  overflow: hidden;

  background: var(--dark-soft);

  border: 1px solid var(--border);
  border-radius: 14px;

  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.doctrine-item:hover {
  border-color: rgba(122, 203, 34, 0.45);
}

.doctrine-item[open] {
  background: #151d15;
  border-color: rgba(122, 203, 34, 0.65);
}

.doctrine-item summary {
  position: relative;

  display: grid;
  grid-template-columns: 60px 1fr 30px;
  gap: 20px;
  align-items: center;

  padding: 25px 28px;

  color: var(--white);

  cursor: pointer;
  list-style: none;
}

.doctrine-item summary::-webkit-details-marker {
  display: none;
}

.doctrine-number {
  display: grid;
  place-items: center;

  width: 52px;
  height: 52px;

  background: rgba(122, 203, 34, 0.1);
  color: var(--green);

  border: 1px solid rgba(122, 203, 34, 0.35);
  border-radius: 50%;

  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 1px;
}

.doctrine-summary-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.doctrine-summary-text strong {
  font-size: 1.25rem;
}

.doctrine-summary-text small {
  color: var(--gray);
  font-size: 0.9rem;
}

.doctrine-toggle {
  position: relative;

  width: 24px;
  height: 24px;
}

.doctrine-toggle::before,
.doctrine-toggle::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 16px;
  height: 2px;

  background: var(--green);

  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.doctrine-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.doctrine-item[open] .doctrine-toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.doctrine-content {
  padding: 0 28px 30px 108px;

  color: var(--gray);

  border-top: 1px solid var(--border);
}

.doctrine-content p {
  max-width: 900px;
  margin-top: 22px;
}

.doctrine-references {
  color: var(--green);
  font-size: 0.9rem;
  font-weight: 700;
}

/* =========================
   Doctrine Note
========================= */

.doctrine-note {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;

  padding: 50px;

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(122, 203, 34, 0.15),
      transparent 35%
    ),
    var(--dark-soft);

  border: 1px solid var(--border);
  border-left: 5px solid var(--green);
  border-radius: var(--radius);
}

.doctrine-note > p {
  color: var(--gray);
}

/* =========================
   Beliefs Page Tablet
========================= */

@media (max-width: 950px) {
  .beliefs-intro-grid,
  .doctrine-note {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .beliefs-navigation-links {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Beliefs Page Mobile
========================= */

@media (max-width: 650px) {
  .beliefs-navigation {
    padding-block: 26px;
  }

  .beliefs-navigation-links {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .beliefs-navigation-links a {
    min-height: 44px;
    padding-inline: 6px;
  }

  .beliefs-navigation-links a:hover {
    padding-left: 12px;
  }

  .doctrine-item summary {
    grid-template-columns: 44px 1fr 24px;
    gap: 13px;

    padding: 20px 17px;
  }

  .doctrine-number {
    width: 42px;
    height: 42px;

    font-size: 0.72rem;
  }

  .doctrine-summary-text strong {
    font-size: 1.05rem;
  }

  .doctrine-summary-text small {
    font-size: 0.8rem;
  }

  .doctrine-content {
    padding: 0 20px 25px;
  }

  .doctrine-note {
    padding: 32px 24px;
  }
}

/* =========================
   Sermons Page
========================= */

.sermon-platforms-section,
.featured-sermon-section,
.sermon-information-section,
.sermon-archive-section {
  background: var(--black);
  color: var(--white);
}

.sermon-platforms-section .section-heading > p:last-child,
.sermon-information-section .section-heading > p:last-child {
  color: var(--gray);
}

/* =========================
   Sermon Platforms
========================= */

.sermon-platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;

  margin-top: 45px;
}

.sermon-platform-card {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 28px;
  align-items: flex-start;

  padding: 40px;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(122, 203, 34, 0.12),
      transparent 28%
    ),
    var(--dark-soft);

  border: 1px solid var(--border);
  border-radius: var(--radius);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease;
}

.sermon-platform-card:hover {
  transform: translateY(-5px);
  border-color: rgba(122, 203, 34, 0.55);
}

.platform-icon {
  display: grid;
  place-items: center;

  width: 72px;
  height: 72px;

  background: var(--green);
  color: var(--black);

  border-radius: 50%;

  font-size: 1.5rem;
  font-weight: 900;
}

.platform-label {
  color: var(--green);

  font-size: 0.75rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 2px;
}

.platform-card-content h3 {
  margin-top: 5px;

  color: var(--white);

  font-size: 2rem;
}

.platform-card-content p {
  margin-top: 14px;

  color: var(--gray);
}

.platform-button {
  width: auto;

  margin-top: 25px;
}

/* =========================
   Featured Sermon
========================= */

.featured-sermon-section {
  background: var(--dark);
}

.featured-sermon-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}

.featured-sermon-information h2 {
  margin-top: 10px;

  color: var(--white);

  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -1.5px;
}

.featured-sermon-information p {
  margin-top: 20px;

  color: var(--gray);
}

.featured-sermon-note {
  padding-left: 16px;

  border-left: 3px solid var(--green);

  font-size: 0.92rem;
}

.sermon-video-placeholder {
  position: relative;

  min-height: 390px;

  display: grid;
  place-items: center;

  overflow: hidden;

  background:
    linear-gradient(rgba(8, 11, 8, 0.72), rgba(8, 11, 8, 0.9)),
    radial-gradient(circle at center, rgba(122, 203, 34, 0.3), transparent 45%),
    var(--dark-soft);

  border: 1px solid var(--border);
  border-radius: var(--radius);

  box-shadow: var(--shadow);
}

.sermon-video-placeholder::after {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);

  background-size: 35px 35px;
}

.sermon-video-placeholder-content {
  position: relative;
  z-index: 2;

  padding: 30px;

  color: var(--white);
  text-align: center;
}

.sermon-play-icon {
  display: grid;
  place-items: center;

  width: 78px;
  height: 78px;

  margin-inline: auto;
  margin-bottom: 22px;

  background: var(--green);
  color: var(--black);

  border-radius: 50%;

  font-size: 1.7rem;
  font-weight: 900;
}

.sermon-video-placeholder h3 {
  font-size: 1.65rem;
}

.sermon-video-placeholder p {
  margin-top: 8px;

  color: var(--gray);
}

/* =========================
   Sermon Information
========================= */

.sermon-information-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;

  margin-top: 45px;
}

.sermon-information-card {
  padding: 34px;

  background: var(--dark-soft);

  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.sermon-information-number {
  color: var(--green);

  font-size: 0.8rem;
  font-weight: 900;

  letter-spacing: 2px;
}

.sermon-information-card h3 {
  margin-top: 15px;

  color: var(--white);

  font-size: 1.35rem;
}

.sermon-information-card p {
  margin-top: 14px;

  color: var(--gray);
}

/* =========================
   Sermon Archive
========================= */

.sermon-archive-box {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;

  padding: 50px;

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(122, 203, 34, 0.14),
      transparent 35%
    ),
    var(--dark-soft);

  border: 1px solid var(--border);
  border-left: 5px solid var(--green);
  border-radius: var(--radius);
}

.sermon-archive-box h2 {
  margin-top: 10px;

  color: var(--white);

  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -1.5px;
}

.sermon-archive-box > p {
  color: var(--gray);
}

/* =========================
   Responsive Sermons Page
========================= */

@media (max-width: 950px) {
  .sermon-platform-grid {
    grid-template-columns: 1fr;
  }

  .featured-sermon-grid,
  .sermon-archive-box {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sermon-information-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 650px) {
  .sermon-platform-card {
    grid-template-columns: 1fr;

    padding: 30px 24px;
  }

  .platform-icon {
    width: 62px;
    height: 62px;
  }

  .platform-button {
    width: 100%;
  }

  .sermon-video-placeholder {
    min-height: 280px;
  }

  .sermon-information-grid {
    grid-template-columns: 1fr;
  }

  .sermon-information-card {
    padding: 28px 24px;
  }

  .sermon-archive-box {
    padding: 32px 24px;
  }
}

/* =========================
   Online Giving Page
========================= */

.giving-introduction,
.giving-options-section,
.zelle-instructions-section,
.giving-information-section {
  background: var(--black);
  color: var(--white);
}

.giving-introduction-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
}

.giving-introduction h2,
.zelle-instructions-grid h2,
.giving-information-box h2 {
  margin-top: 10px;

  color: var(--white);

  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -1.5px;
}

.giving-introduction p {
  margin-top: 20px;
  color: var(--gray);
}

.giving-options-section {
  background: var(--dark);
}

.giving-options-section .section-heading > p:last-child {
  color: var(--gray);
}

/* =========================
   Giving Option Cards
========================= */

.giving-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;

  margin-top: 45px;
}

.giving-option-card {
  padding: 40px;

  background:
    radial-gradient(
      circle at 10% 5%,
      rgba(122, 203, 34, 0.12),
      transparent 27%
    ),
    var(--dark-soft);

  border: 1px solid var(--border);
  border-radius: var(--radius);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease;
}

.giving-option-card:hover {
  transform: translateY(-5px);
  border-color: rgba(122, 203, 34, 0.55);
}

.giving-option-heading {
  display: flex;
  align-items: center;
  gap: 20px;

  margin-bottom: 25px;
}

.giving-method-icon {
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  width: 66px;
  height: 66px;

  background: var(--green);
  color: var(--black);

  border-radius: 50%;

  font-size: 1.45rem;
  font-weight: 900;
}

.giving-method-label {
  color: var(--green);

  font-size: 0.74rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 1.8px;
}

.giving-option-heading h3 {
  margin-top: 3px;

  color: var(--white);
  font-size: 1.75rem;
}

.giving-option-card > p {
  color: var(--gray);
}

/* =========================
   Zelle QR Code
========================= */

.zelle-qr-container {
  max-width: 370px;

  margin: 30px auto;

  padding: 18px;

  background: var(--white);

  border-radius: 16px;
}

.zelle-qr-image {
  width: 100%;
  height: auto;

  border-radius: 8px;
}

.zelle-recipient-information {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  padding-block: 15px;

  border-bottom: 1px solid var(--border);
}

.zelle-recipient-information span {
  color: var(--gray);
}

.zelle-recipient-information strong,
.zelle-recipient-information a {
  color: var(--white);
  font-weight: 800;
  text-align: right;
}

.zelle-recipient-information a:hover {
  color: var(--green);
}

.giving-security-note {
  margin-top: 24px;
  padding: 18px;

  background: rgba(122, 203, 34, 0.08);

  border: 1px solid rgba(122, 203, 34, 0.3);
  border-left: 4px solid var(--green);
  border-radius: 10px;

  color: var(--gray);
  font-size: 0.88rem;
}

/* =========================
   GoFundMe
========================= */

.gofundme-feature-box {
  margin-top: 30px;
  padding: 30px;

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(122, 203, 34, 0.14),
      transparent 42%
    ),
    var(--black);

  border: 1px solid var(--border);
  border-radius: 14px;
}

.gofundme-feature-box h4 {
  margin-top: 10px;

  color: var(--white);

  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.18;
}

.gofundme-feature-box p:last-child {
  margin-top: 18px;
  color: var(--gray);
}

.giving-button {
  width: 100%;
  margin-top: 30px;
}

.external-site-note {
  margin-top: 12px;

  color: var(--gray);

  font-size: 0.8rem;
  text-align: center;
}

/* =========================
   Zelle Instructions
========================= */

.zelle-instructions-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 70px;
  align-items: start;
}

.zelle-instructions-grid > div > p:last-child {
  margin-top: 20px;
  color: var(--gray);
}

.giving-steps {
  display: grid;
  gap: 16px;

  list-style: none;
}

.giving-steps > li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;

  padding: 25px;

  background: var(--dark-soft);

  border: 1px solid var(--border);
  border-radius: 14px;
}

.giving-step-number {
  display: grid;
  place-items: center;

  width: 46px;
  height: 46px;

  background: rgba(122, 203, 34, 0.1);
  color: var(--green);

  border: 1px solid rgba(122, 203, 34, 0.4);
  border-radius: 50%;

  font-size: 0.82rem;
  font-weight: 900;
}

.giving-steps h3 {
  color: var(--white);
  font-size: 1.18rem;
}

.giving-steps p {
  margin-top: 7px;
  color: var(--gray);
}

.giving-steps strong {
  color: var(--white);
}

.giving-purpose-list {
  display: grid;
  gap: 7px;

  margin-top: 15px;
  padding-left: 21px;

  color: var(--green);
}

.giving-purpose-list li::marker {
  color: var(--green);
}

/* =========================
   Giving Information
========================= */

.giving-information-box {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;

  padding: 50px;

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(122, 203, 34, 0.14),
      transparent 35%
    ),
    var(--dark-soft);

  border: 1px solid var(--border);
  border-left: 5px solid var(--green);
  border-radius: var(--radius);
}

.giving-information-box > div:last-child {
  display: grid;
  gap: 18px;

  color: var(--gray);
}

/* =========================
   Giving Page Responsive
========================= */

@media (max-width: 950px) {
  .giving-introduction-grid,
  .zelle-instructions-grid,
  .giving-information-box {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .giving-options-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .giving-option-card {
    padding: 30px 23px;
  }

  .giving-option-heading {
    align-items: flex-start;
  }

  .giving-method-icon {
    width: 56px;
    height: 56px;
  }

  .zelle-qr-container {
    padding: 12px;
  }

  .zelle-recipient-information {
    flex-direction: column;
    gap: 3px;
  }

  .zelle-recipient-information strong,
  .zelle-recipient-information a {
    text-align: left;
    overflow-wrap: anywhere;
  }

  .giving-steps > li {
    grid-template-columns: 42px 1fr;
    gap: 14px;

    padding: 22px 18px;
  }

  .giving-step-number {
    width: 40px;
    height: 40px;
  }

  .giving-information-box {
    padding: 32px 24px;
  }
}

/* =========================
   Contact Page
========================= */

.contact-introduction,
.contact-details-section,
.service-calendar-section,
.contact-map-section,
.contact-guidance-section {
  background: var(--black);
  color: var(--white);
}

.contact-introduction-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
}

.contact-introduction h2,
.service-calendar-heading h2,
.contact-map-heading h2,
.contact-guidance-box h2 {
  margin-top: 10px;

  color: var(--white);

  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -1.5px;
}

.contact-introduction p {
  margin-top: 20px;
  color: var(--gray);
}

/* =========================
   Contact Information Cards
========================= */

.contact-details-section {
  background: var(--dark);
}

.contact-details-section .section-heading > p:last-child {
  color: var(--gray);
}

.contact-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;

  margin-top: 45px;
}

.contact-card {
  display: flex;
  flex-direction: column;

  min-height: 430px;
  padding: 35px;

  background:
    radial-gradient(
      circle at 15% 5%,
      rgba(122, 203, 34, 0.13),
      transparent 28%
    ),
    var(--dark-soft);

  border: 1px solid var(--border);
  border-radius: var(--radius);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease;
}

.contact-card:hover {
  transform: translateY(-5px);
  border-color: rgba(122, 203, 34, 0.55);
}

.contact-card-icon {
  display: grid;
  place-items: center;

  width: 60px;
  height: 60px;

  margin-bottom: 24px;

  background: var(--green);
  color: var(--black);

  border-radius: 50%;

  font-size: 1.3rem;
  font-weight: 900;
}

.contact-card-label {
  color: var(--green);

  font-size: 0.74rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 1.8px;
}

.contact-card h3 {
  margin-top: 7px;

  color: var(--white);

  font-size: 1.55rem;
  line-height: 1.2;
}

.contact-card > p,
.contact-card address {
  margin-top: 18px;

  color: var(--gray);
}

.contact-card address {
  font-style: normal;
  line-height: 1.8;
}

/* Email */

.contact-email-address {
  display: inline-block;

  margin-top: 22px;

  color: var(--green);

  font-weight: 800;
  overflow-wrap: anywhere;
}

.contact-email-address:hover {
  text-decoration: underline;
}

/* Phone Number */

.contact-phone-number {
  display: inline-block;

  margin-top: 22px;

  color: var(--green);

  font-size: 1.15rem;
  font-weight: 800;

  text-decoration: none;
}

.contact-phone-number:hover {
  text-decoration: underline;
}

.contact-card-button {
  width: 100%;
  margin-top: auto;
}

/* =========================
   Service Calendar
========================= */

.service-calendar-section {
  background: var(--black);
}

.service-calendar-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;

  margin-bottom: 28px;
}

.service-calendar-heading > div > p:last-child {
  max-width: 720px;
  margin-top: 18px;

  color: var(--gray);
}

.calendar-notice {
  margin-bottom: 24px;
  padding: 18px 20px;

  background: rgba(122, 203, 34, 0.08);
  color: var(--gray);

  border: 1px solid rgba(122, 203, 34, 0.3);
  border-left: 4px solid var(--green);
  border-radius: 10px;
}

.calendar-notice strong {
  color: var(--white);
}

.service-calendar-container {
  width: 100%;
  min-height: 650px;

  overflow: hidden;

  background: var(--white);

  border: 1px solid var(--border);
  border-radius: var(--radius);

  box-shadow: var(--shadow);
}

.service-calendar-container iframe {
  display: block;

  width: 100%;
  height: 650px;

  border: 0;
}

/* =========================
   Contact Map
========================= */

.contact-map-section {
  background: var(--dark);
}

.contact-map-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;

  margin-bottom: 40px;
}

.contact-map-heading > div > p:last-child {
  max-width: 700px;
  margin-top: 18px;

  color: var(--gray);
}

.map-directions-button {
  flex: 0 0 auto;
}

.contact-map-container {
  position: relative;

  width: 100%;
  height: 520px;

  overflow: hidden;

  background: var(--dark-soft);

  border: 1px solid var(--border);
  border-radius: var(--radius);

  box-shadow: var(--shadow);
}

.contact-map-container iframe {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;
}

/* =========================
   Contact Guidance
========================= */

.contact-guidance-section {
  background: var(--black);
}

.contact-guidance-box {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;

  padding: 50px;

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(122, 203, 34, 0.14),
      transparent 35%
    ),
    var(--dark-soft);

  border: 1px solid var(--border);
  border-left: 5px solid var(--green);
  border-radius: var(--radius);
}

.contact-guidance-box > div:last-child {
  display: grid;
  gap: 18px;

  color: var(--gray);
}

.contact-guidance-box .text-link {
  margin-top: 5px;
}

/* =========================
   Contact Page Responsive
========================= */

@media (max-width: 950px) {
  .contact-introduction-grid,
  .contact-guidance-box {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .service-calendar-heading,
  .contact-map-heading {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 650px) {
  .contact-card-grid {
    grid-template-columns: 1fr;
  }

  .contact-card {
    min-height: auto;
    padding: 30px 24px;
  }

  .contact-card-button {
    margin-top: 28px;
  }

  .service-calendar-heading .button,
  .map-directions-button {
    width: 100%;
  }

  .service-calendar-container {
    min-height: 540px;
  }

  .service-calendar-container iframe {
    height: 540px;
  }

  .contact-map-container {
    height: 390px;
  }

  .contact-guidance-box {
    padding: 32px 24px;
  }
}

/* =========================
   FGBI Page
========================= */

.fgbi-introduction,
.fgbi-goals-section,
.fgbi-cost-section,
.fgbi-expenses-section,
.fgbi-participation-section,
.fgbi-journal-section,
.fgbi-contact-section {
  background: var(--black);
  color: var(--white);
}

.fgbi-introduction-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
}

.fgbi-introduction h2,
.fgbi-cost-heading h2,
.fgbi-participation-section h2,
.fgbi-journal-box h2,
.fgbi-contact-section h2 {
  margin-top: 10px;

  color: var(--white);

  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -1.5px;
}

.fgbi-introduction p {
  margin-top: 20px;
  color: var(--gray);
}

/* =========================
   FGBI Student Goals
========================= */

.fgbi-goals-section {
  background: var(--dark);
}

.fgbi-goals-section .section-heading > p:last-child {
  color: var(--gray);
}

.fgbi-goals-list {
  display: grid;
  gap: 16px;

  margin-top: 45px;
}

.fgbi-goal-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 25px;
  align-items: flex-start;

  padding: 30px;

  background:
    radial-gradient(circle at 5% 15%, rgba(122, 203, 34, 0.1), transparent 22%),
    var(--dark-soft);

  border: 1px solid var(--border);
  border-radius: 14px;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.fgbi-goal-card:hover {
  transform: translateX(5px);
  border-color: rgba(122, 203, 34, 0.55);
}

.fgbi-goal-number {
  display: grid;
  place-items: center;

  width: 58px;
  height: 58px;

  background: rgba(122, 203, 34, 0.1);
  color: var(--green);

  border: 1px solid rgba(122, 203, 34, 0.38);
  border-radius: 50%;

  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 1px;
}

.fgbi-goal-card h3 {
  color: var(--white);
  font-size: 1.35rem;
}

.fgbi-goal-card p {
  max-width: 920px;
  margin-top: 10px;

  color: var(--gray);
}

.fgbi-scripture-reference {
  color: var(--green) !important;

  font-size: 0.88rem;
  font-weight: 800;
}

/* =========================
   FGBI Costs
========================= */

.fgbi-cost-section {
  background: var(--black);
}

.fgbi-cost-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 70px;
  align-items: start;
}

.fgbi-cost-heading > p:last-child {
  margin-top: 20px;
  color: var(--gray);
}

.fgbi-cost-content {
  display: grid;
  gap: 20px;

  color: var(--gray);
}

.fgbi-scripture-quote {
  margin-bottom: 10px;
  padding: 28px;

  background: var(--dark-soft);

  border: 1px solid var(--border);
  border-left: 5px solid var(--green);
  border-radius: 12px;
}

.fgbi-scripture-quote p {
  color: var(--white);

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(1.4rem, 3vw, 2rem);
}

.fgbi-scripture-quote cite {
  display: block;

  margin-top: 10px;

  color: var(--green);

  font-family: Arial, Helvetica, sans-serif;

  font-size: 0.82rem;
  font-style: normal;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* =========================
   Student Expenses
========================= */

.fgbi-expenses-section {
  background: var(--dark);
}

.fgbi-expenses-section .section-heading > p:last-child {
  color: var(--gray);
}

.fgbi-expense-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 23px;

  margin-top: 45px;
}

.fgbi-expense-card {
  padding: 34px;

  background: var(--dark-soft);

  border: 1px solid var(--border);
  border-radius: var(--radius);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease;
}

.fgbi-expense-card:hover {
  transform: translateY(-5px);
  border-color: rgba(122, 203, 34, 0.55);
}

.fgbi-expense-icon {
  display: grid;
  place-items: center;

  width: 58px;
  height: 58px;

  margin-bottom: 24px;

  background: var(--green);
  color: var(--black);

  border-radius: 50%;

  font-size: 1.25rem;
  font-weight: 900;
}

.fgbi-expense-card h3 {
  color: var(--white);
  font-size: 1.35rem;
}

.fgbi-expense-card p {
  margin-top: 15px;
  color: var(--gray);
}

/* =========================
   Church Participation
========================= */

.fgbi-participation-section {
  background: var(--black);
}

.fgbi-participation-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 65px;
  align-items: center;
}

.fgbi-participation-grid > div:first-child > p:not(.section-label) {
  margin-top: 20px;
  color: var(--gray);
}

.fgbi-principle-card {
  padding: 42px;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(122, 203, 34, 0.17),
      transparent 42%
    ),
    var(--dark-soft);

  border: 1px solid var(--border);
  border-left: 5px solid var(--green);
  border-radius: var(--radius);

  box-shadow: var(--shadow);
}

.fgbi-principle-card h3 {
  margin-top: 12px;

  color: var(--white);

  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
}

.fgbi-principle-card p:last-child {
  margin-top: 20px;
  color: var(--gray);
}

/* =========================
   GES Journal
========================= */

.fgbi-journal-section {
  background: var(--dark);
}

.fgbi-journal-box {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;

  padding: 50px;

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(122, 203, 34, 0.14),
      transparent 35%
    ),
    var(--dark-soft);

  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.fgbi-journal-box > div:last-child {
  display: grid;
  gap: 18px;

  color: var(--gray);
}

.fgbi-journal-button {
  width: fit-content;
  margin-top: 8px;
}

/* =========================
   FGBI Contact
========================= */

.fgbi-contact-section {
  background: var(--black);
}

.fgbi-contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.fgbi-contact-grid > div:first-child > p:last-child {
  max-width: 760px;
  margin-top: 20px;

  color: var(--gray);
}

.fgbi-contact-actions {
  display: grid;
  gap: 14px;
}

/* =========================
   FGBI Responsive
========================= */

@media (max-width: 950px) {
  .fgbi-introduction-grid,
  .fgbi-cost-grid,
  .fgbi-participation-grid,
  .fgbi-journal-box,
  .fgbi-contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .fgbi-expense-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 650px) {
  .fgbi-goal-card {
    grid-template-columns: 48px 1fr;
    gap: 16px;

    padding: 24px 18px;
  }

  .fgbi-goal-number {
    width: 44px;
    height: 44px;

    font-size: 0.7rem;
  }

  .fgbi-goal-card h3 {
    font-size: 1.15rem;
  }

  .fgbi-expense-grid {
    grid-template-columns: 1fr;
  }

  .fgbi-expense-card {
    padding: 29px 23px;
  }

  .fgbi-principle-card,
  .fgbi-journal-box {
    padding: 32px 24px;
  }

  .fgbi-journal-button {
    width: 100%;
  }

  .fgbi-contact-actions .button {
    width: 100%;
  }
}

/* Allow the expanded navigation to fit comfortably */

@media (min-width: 951px) and (max-width: 1120px) {
  .main-nav {
    gap: 16px;
  }

  .main-nav a {
    font-size: 0.83rem;
  }

  .logo-text {
    display: none;
  }
}