:root {
  --pcc-green: #173b2a;
  --pcc-green-2: #21563c;
  --pcc-gold: #d7a62a;
  --pcc-red: #b62e2e;
  --pcc-cream: #f7f3e9;
  --pcc-ink: #17221c;
  --pcc-muted: #6b756f;
  --pcc-border: #e6e8e4;
  --shadow: 0 18px 50px rgba(23, 59, 42, .10);
}

html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { font-family: "DM Sans", sans-serif; color: var(--pcc-ink); background: #fff; line-height: 1.7; }
h1, h2, h3, h4, .navbar-brand strong { font-family: "Playfair Display", serif; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.15; margin-bottom: 1rem; }
a { color: var(--pcc-green-2); text-decoration: none; }
a:hover { color: var(--pcc-red); }

.church-logo {
  width: 65px;
  height: 65px;
  object-fit: contain;
}

.topbar { background: #0d241a; color: rgba(255,255,255,.82); font-size: .84rem; padding: .48rem 0; }
.main-nav { background: rgba(23,59,42,.98); box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.navbar-brand small { display: block; font-size: .68rem; font-family: "DM Sans", sans-serif; font-weight: 400; opacity: .72; letter-spacing: .02em; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid var(--pcc-gold); border-radius: 50%; color: var(--pcc-gold); flex: 0 0 auto; }
.brand-mark i { font-size: 1.3rem; }
.navbar .nav-link { color: rgba(255,255,255,.82); font-weight: 600; font-size: .9rem; padding: .75rem .65rem !important; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: #fff; }
.btn { border-radius: 7px; font-weight: 700; }
.btn-gold { background: var(--pcc-gold); border-color: var(--pcc-gold); color: #182016; }
.btn-gold:hover { background: #e3b738; border-color: #e3b738; color: #182016; }
.btn-green { background: var(--pcc-green); border-color: var(--pcc-green); color: #fff; }
.btn-green:hover { background: var(--pcc-green-2); border-color: var(--pcc-green-2); color: #fff; }

.hero { position: relative; min-height: 76vh; display: flex; align-items: center; color: #fff; background: linear-gradient( 90deg, rgba(11, 35, 24, 0.10) 0%, rgba(11, 35, 24, 0.25) 45%, rgba(11, 35, 24, 0.50) 100% ), url("./images/hero-bg.jpg") center/cover; background-size: cover;  background-position: center 55%; background-repeat: no-repeat; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 7px; background: linear-gradient(90deg, #1f7b4b 0 33%, #c83232 33% 66%, var(--pcc-gold) 66%); }
.hero-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 75% 30%, transparent 0 20%, rgba(0,0,0,.18) 60%); }
.min-vh-75 { min-height: 76vh; }
.hero h1 { font-size: clamp(2.7rem, 6vw, 5.25rem); line-height: 1.02; max-width: 850px; margin: 1rem 0 1.35rem; }
.hero .lead { max-width: 760px; color: rgba(255,255,255,.86); }
.eyebrow, .section-kicker { display: inline-flex; align-items: center; color: var(--pcc-green-2); font-size: .76rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 800; }
.hero .eyebrow { color: var(--pcc-gold); }
.section-kicker.light { color: #f0c653; }

.section-pad { padding: 6rem 0; }
.welcome-strip { background: var(--pcc-cream); border-bottom: 1px solid #ece7d9; padding: 2.5rem 0; }
.welcome-strip h2 { font-size: 2rem; }
.section-intro { max-width: 700px; }
.image-placeholder {
  width: 100%;
  max-width: 400px;
  height: 300px;
  min-height: 0;

  border-radius: 18px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 2rem;
  box-shadow: var(--shadow);
}
.image-placeholder i { font-size: 4rem; color: var(--pcc-gold); margin-bottom: 1rem; }
.image-placeholder span { max-width: 280px; font-size: .9rem; }
.value-card { border: 1px solid var(--pcc-border); border-radius: 12px; padding: 1.15rem; height: 100%; background: #fff; }
.value-card i { color: var(--pcc-green-2); font-size: 1.5rem; }
.value-card h3 { font-family: "DM Sans", sans-serif; font-size: 1rem; font-weight: 800; margin: .55rem 0 .25rem; }
.value-card p { color: var(--pcc-muted); font-size: .88rem; margin: 0; }

.mission-section { background: var(--pcc-green); color: #fff; }
.mission-section .section-kicker { color: var(--pcc-gold); }
.mission-section .section-intro p { color: rgba(255,255,255,.7); }
.feature-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 2.25rem; }
.feature-card p { color: rgba(255,255,255,.72); margin-bottom: 0; }
.feature-icon { display: inline-grid; place-items: center; width: 55px; height: 55px; border-radius: 12px; background: rgba(215,166,42,.14); color: var(--pcc-gold); font-size: 1.5rem; margin-bottom: 1.2rem; }

.leader-card, .sermon-card { border: 1px solid var(--pcc-border); border-radius: 15px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(23,59,42,.05); height: 100%; transition: transform .25s ease, box-shadow .25s ease; }
.leader-card:hover, .sermon-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.leader-photo {
  width: 100%;
  height: 240px;
  overflow: hidden;
}

.leader-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.leader-card h3 {
  font-size: 1.15rem;
}
.leader-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.leader-photo i { font-size: 5.5rem; opacity: .85; }
.role, .tag, .campaign-label { font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--pcc-red); }
.leader-card h3 { font-size: 1.35rem; margin: .45rem 0 .2rem; }
.leader-card p { color: var(--pcc-muted); margin: 0; }

.ministry-card { height: 100%; padding: 2rem; border: 1px solid var(--pcc-border); background: #fff; border-radius: 15px; transition: .25s ease; }
.ministry-card:hover { transform: translateY(-4px); border-color: rgba(33,86,60,.25); box-shadow: var(--shadow); }
.ministry-card > i { font-size: 2rem; color: var(--pcc-green-2); }
.ministry-card h3 { font-size: 1.45rem; margin: 1rem 0 .5rem; }
.ministry-card p { color: var(--pcc-muted); }
.ministry-card a { font-weight: 800; font-size: .9rem; }

.sermon-thumb { height: 205px; background: linear-gradient(135deg, #193e2b, #5b8067); color: var(--pcc-gold); display: grid; place-items: center; font-size: 3.5rem; }
.sermon-card h3 { margin: .55rem 0 .7rem; }
.sermon-card .tag { color: var(--pcc-green-2); }
.events-section { background: var(--pcc-cream); }
.event-card { display: grid; grid-template-columns: 82px 1fr; gap: 1.3rem; height: 100%; padding: 1.6rem; background: #fff; border-radius: 15px; border: 1px solid #e8e4d8; }
.date-box { height: 82px; width: 82px; border-radius: 12px; display: grid; place-items: center; align-content: center; background: var(--pcc-green); color: #fff; }
.date-box strong { font-size: 1.65rem; font-family: "Playfair Display", serif; line-height: 1; }
.date-box span { font-size: .7rem; font-weight: 800; }
.date-box i { font-size: 1.8rem; color: var(--pcc-gold); }
.event-card h3 { margin: .45rem 0; font-size: 1.45rem; }
.event-card p { color: var(--pcc-muted); margin-bottom: .6rem; }
.event-card a { font-size: .88rem; font-weight: 800; }

.give-section { background: linear-gradient(100deg, rgba(23,59,42,.98), rgba(23,59,42,.91)), url("https://images.unsplash.com/photo-1519491050282-cf00c82424b4?auto=format&fit=crop&w=2000&q=80") center/cover; color: #fff; }
.give-section h2 { max-width: 720px; }
.give-section .lead { color: rgba(255,255,255,.78); max-width: 720px; }
.campaign-card { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.15); padding: 2rem; border-radius: 17px; backdrop-filter: blur(8px); }
.campaign-card h3 { font-size: 1.65rem; margin: .55rem 0 .7rem; }
.campaign-card p { color: rgba(255,255,255,.72); }
.progress { background: rgba(255,255,255,.15); height: 9px; }
.progress-bar { background: var(--pcc-gold); }

.contact-item { display: flex; gap: 1rem; margin-top: 1.5rem; align-items: flex-start; }
.contact-item > span { width: 43px; height: 43px; border-radius: 50%; display: grid; place-items: center; background: #eef4ef; color: var(--pcc-green-2); flex: 0 0 auto; }
.contact-item strong { display: block; }
.contact-item p { color: var(--pcc-muted); margin: .1rem 0 0; }
.contact-form { padding: 2rem; border: 1px solid var(--pcc-border); border-radius: 17px; box-shadow: var(--shadow); }
.form-control { border-radius: 8px; border-color: #dce1dc; padding: .8rem 1rem; }
.form-control:focus { border-color: var(--pcc-green-2); box-shadow: 0 0 0 .2rem rgba(33,86,60,.12); }

.footer { background: #0d241a; color: #fff; }
.footer h4 { font-family: "DM Sans", sans-serif; font-size: .92rem; font-weight: 800; margin-bottom: 1rem; }
.footer a { display: block; color: rgba(255,255,255,.68); margin-bottom: .45rem; }
.footer a:hover { color: var(--pcc-gold); }
.footer-mark { width: 38px; height: 38px; }
.footer-rule { border-color: rgba(255,255,255,.12); }
.socials { display: flex; gap: .6rem; }
.socials a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; margin: 0; }

.back-to-top { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--pcc-gold); color: #172016; box-shadow: 0 10px 25px rgba(0,0,0,.2); opacity: 0; visibility: hidden; transform: translateY(10px); transition: .2s ease; z-index: 1000; }
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }

@media screen and (max-width:1000px) {
  .block-1000-full > .column {
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

}

@media screen and (max-width:900px) {
  .block-900-full > .column {
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

}
/* ----------------------------------------------------
   GOOGLE MAP
---------------------------------------------------- */

.map-wrapper {
  width: 100%;
  height: 450px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--pcc-border);
  box-shadow: var(--shadow);
}

.map-wrapper iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.map-header h3 {
  font-size: 1.8rem;
  margin-top: .4rem;
  margin-bottom: 0;
}

/* Mobile */
@media (max-width: 767.98px) {
  .map-wrapper {
    height: 320px;
  }
}

/* ============================================================
   PHOTO GALLERY
============================================================ */

.gallery-section {
  background: #ffffff;
}


/* Gallery Filter Buttons */

#portfolio-flters {
  padding: 0;
  margin: 0 0 2rem 0;
  list-style: none;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem;
}

#portfolio-flters li {
  cursor: pointer;

  padding: .55rem 1.2rem;

  font-size: .85rem;
  font-weight: 700;

  color: var(--pcc-green);

  background: #f4f6f4;

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

  transition: all .3s ease;
}

#portfolio-flters li:hover,
#portfolio-flters li.filter-active {
  background: var(--pcc-green);
  color: #ffffff;
  border-color: var(--pcc-green);
}


/* Gallery Item */

.gallery-item {
  transition:
    opacity .35s ease,
    transform .35s ease;
}

/* Hidden Filter Items */

.gallery-item.gallery-hidden {
  display: none;
}


/* Mobile */

@media (max-width: 767.98px) {

  .gallery-card {
    height: 250px;
  }

  #portfolio-flters {
    gap: .4rem;
  }

  #portfolio-flters li {
    padding: .45rem .9rem;
    font-size: .78rem;
  }

  /* Always show description on touch screens */
  .gallery-overlay {
    opacity: 1;
  }
}

/* ============================================================
   GALLERY / PORTFOLIO
============================================================ */

.portfolio-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  background: var(--pcc-green);
  box-shadow: 0 10px 30px rgba(23, 59, 42, .10);
}

/* Gallery Image */
.portfolio-wrap img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;

  transition: transform .5s ease;
}

/* Dark overlay */
.portfolio-wrap::before {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(13, 36, 26, .55);

  opacity: 0;
  transition: opacity .35s ease;

  z-index: 1;
}

/* Plus icon area */
.portfolio-links {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;

  z-index: 2;

  transition: opacity .35s ease;
}

/* Plus button */
.portfolio-links a {
  width: 55px;
  height: 55px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--pcc-gold);
  color: var(--pcc-green);

  border-radius: 50%;

  font-size: 1.6rem;

  transition: all .3s ease;
}

/* Hover effects */
.portfolio-wrap:hover img {
  transform: scale(1.08);
}

.portfolio-wrap:hover::before {
  opacity: 1;
}

.portfolio-wrap:hover .portfolio-links {
  opacity: 1;
}

.portfolio-links a:hover {
  background: #ffffff;
  color: var(--pcc-green);
  transform: scale(1.1);
}


/* Mobile */
@media (max-width: 767.98px) {

  .portfolio-wrap img {
    height: 250px;
  }

  .portfolio-links {
    opacity: 1;
  }

  .portfolio-wrap::before {
    opacity: .15;
  }
}

.sermon-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.sermon-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================================
   HERO SOCIAL MEDIA
============================================================ */

.hero-social {
  list-style: none;
  margin: 0;
  padding: 0;

  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  z-index: 10;
}

/* Follow Us text */
.hero-social__title {
  font-family: "DM Sans", sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;

  color: rgba(255,255,255,.75);

  writing-mode: vertical-rl;
  transform: rotate(180deg);

  margin-bottom: 12px;
}

/* Decorative line */
.hero-social__title::after {
  content: "";
  display: block;

  width: 1px;
  height: 40px;

  background: rgba(255,255,255,.35);

  margin: 12px auto 0;
}

/* Social links */
.hero-social li:not(.hero-social__title) a {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,.30);
  border-radius: 50%;

  color: #ffffff;
  background: rgba(255,255,255,.08);

  font-size: 1.1rem;

  backdrop-filter: blur(5px);

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

/* Hover */
.hero-social li:not(.hero-social__title) a:hover {
  background: var(--pcc-gold);
  border-color: var(--pcc-gold);
  color: var(--pcc-green);

  transform: translateY(-3px);
}

/* ============================================================
   GLIGHTBOX CONTROLS
============================================================ */

/* Make sure lightbox is above everything */
.glightbox-container {
  z-index: 999999 !important;
}

/* Close button */
.gclose {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Previous and Next buttons */
.gprev,
.gnext {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Make controls easier to see */
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background-color: rgba(0, 0, 0, .65);
  border-radius: 50%;
}

/* ============================================================
   GLIGHTBOX FIXES
============================================================ */

.glightbox-container {
  z-index: 999999 !important;
}


/* Close X */

.glightbox-clean .gclose {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;

  width: 44px;
  height: 44px;

  top: 20px;
  right: 20px;

  background-color: rgba(0, 0, 0, .65);
  border-radius: 50%;
}


/* Previous arrow */

.glightbox-clean .gprev {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;

  background-color: rgba(0, 0, 0, .65);
  border-radius: 50%;
}


/* Next arrow */

.glightbox-clean .gnext {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;

  background-color: rgba(0, 0, 0, .65);
  border-radius: 50%;
}


/* Make GLightbox SVG icons visible */

.glightbox-clean .gclose svg,
.glightbox-clean .gprev svg,
.glightbox-clean .gnext svg {
  display: block !important;
  fill: #ffffff !important;
}


/* Button hover */

.glightbox-clean .gclose:hover,
.glightbox-clean .gprev:hover,
.glightbox-clean .gnext:hover {
  background-color: var(--pcc-green);
}