:root {
  --primary-color: #1e3a5f;
  --primary-dark: #0f2744;
  --primary-light: #2c5282;
  --accent-color: #4a90a4;
  --accent-warm: #c9a227;
  --text-dark: #1a202c;
  --text-light: #ffffff;
  --bg-light: #f7fafc;
  --bg-brown: #edf2f7;
  --max-width: 1100px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  font-size:16px;
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  line-height:1.6;
  color:var(--text-dark);
  background-color:var(--bg-brown);
  margin:0;
  padding:0;
  min-height:100vh;
  overflow-x:hidden;
}

/* Responsive font sizing */
@media(max-width:768px){
  html{
    font-size:14px;
  }
}

@media(max-width:480px){
  html{
    font-size:13px;
  }
}

/* Main content sections */
main .container{
  background-color:#f5f0e8;
  padding:2.5rem;
  border-radius:8px;
  box-shadow:0 2px 12px rgba(0,0,0,0.08);
  margin-top:0.75rem;
  margin-bottom:2rem;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

@media(max-width:768px){
  main .container{
    padding:1.5rem;
    margin-top:1rem;
    margin-bottom:1rem;
  }
}

@media(max-width:480px){
  main .container{
    padding:1rem;
    margin-top:0.5rem;
    margin-bottom:0.5rem;
    border-radius:4px;
  }
}

/* Main content sections */
main .container{
  background-color:#f5f0e8;
  padding:2.5rem;
  border-radius:8px;
  box-shadow:0 2px 12px rgba(0,0,0,0.08);
  margin-top:0.75rem;
  margin-bottom:2rem;
}

main .container h2{
  color:#1e3a5f;
  border-bottom:2px solid var(--accent-warm);
  padding-bottom:0.5rem;
  margin-bottom:1.5rem;
}

main .container p,
main .container li{
  color:#1a202c;
}

main .container a{
  color:#2c5282;
  font-weight:500;
}

main .container a:hover{
  color:#1e3a5f;
}

.container{max-width:var(--max-width)}

/* Section Title with accent underline */
.section-title{
  text-align:center;
  position:relative;
  padding-bottom:0.75rem;
  margin-bottom:2rem;
}

/* Service Cards */
.service-card{
  background:#ffffff;
  border-radius:12px;
  padding:2rem 1.5rem;
  height:100%;
  border-left:4px solid var(--primary-color);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

@media(max-width:768px){
  .service-card{
    padding:1.5rem 1.25rem;
  }
}

@media(max-width:480px){
  .service-card{
    padding:1rem;
  }
}

.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,0.1);
}

.service-card-title{
  font-size:1.25rem;
  font-weight:700;
  color:var(--primary-color);
  margin-bottom:1rem;
}

.service-time-badge{
  display:inline-block;
  background-color:#e8f4fd;
  color:var(--primary-color);
  font-weight:600;
  padding:0.5rem 1rem;
  border-radius:6px;
  margin-bottom:1rem;
  font-size:0.95rem;
}

.service-card-description{
  color:#4a5568;
  font-size:0.95rem;
  line-height:1.6;
  margin-bottom:0;
}

/* Ministry Cards */
.ministry-card{
  background:#ffffff;
  border-radius:12px;
  padding:1.75rem 1.5rem;
  height:100%;
  border-top:4px solid var(--accent-warm);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

@media(max-width:768px){
  .ministry-card{
    padding:1.5rem 1.25rem;
  }
}

@media(max-width:480px){
  .ministry-card{
    padding:1rem;
  }
}

.ministry-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,0.1);
}

.ministry-card-title{
  font-size:1.2rem;
  font-weight:700;
  color:var(--primary-color);
  margin-bottom:0.75rem;
}

.ministry-card-description{
  color:#4a5568;
  font-size:0.95rem;
  line-height:1.6;
  margin-bottom:1rem;
}

.ministry-card-leader{
  color:#718096;
  font-size:0.9rem;
  font-style:italic;
  margin-bottom:0;
}

.bg-primary{
  background-color:var(--primary-color)!important;
  color:var(--text-light)!important;
}

/* Typography for readability */
h1, h2, h3, h4, h5, h6{
  color:var(--primary-dark);
  font-weight:700;
  line-height:1.3;
  margin-bottom:0.75rem;
  letter-spacing:0.3px;
}

h1{
  font-size:clamp(1.5rem, 5vw, 2.5rem);
  margin-top:2rem;
  margin-bottom:1.5rem;
  word-break:break-word;
}
h2{
  font-size:clamp(1.3rem, 4vw, 2rem);
  color:#1e3a5f;
  word-break:break-word;
}
h3{
  font-size:clamp(1.1rem, 3.5vw, 1.75rem);
  word-break:break-word;
}
h4{
  font-size:clamp(1rem, 3vw, 1.5rem);
  word-break:break-word;
}
h5{
  font-size:clamp(0.95rem, 2.5vw, 1.25rem);
  word-break:break-word;
}
h6{
  font-size:clamp(0.9rem, 2vw, 1.1rem);
  word-break:break-word;
}

p{margin-bottom:1rem}

a{
  color:var(--accent-warm);
  text-decoration:none;
  transition:color 0.2s ease;
}

a:hover{
  color:var(--primary-dark);
  text-decoration:underline;
}

a:focus{
  outline:2px solid var(--accent-warm);
  outline-offset:2px;
  border-radius:2px;
}

button, .btn{
  font-weight:600;
  transition:all 0.2s ease;
}

.btn-primary{
  background-color:var(--primary-color);
  border-color:var(--primary-color);
  color:var(--text-light);
}

.btn-primary:hover{
  background-color:var(--primary-dark);
  border-color:var(--primary-dark);
}

.btn-outline-secondary{
  color:var(--primary-color);
  border-color:var(--primary-color);
}

.btn-outline-secondary:hover{
  background-color:var(--primary-color);
  border-color:var(--primary-color);
  color:var(--text-light);
}

/* Header & Footer */
header{
  background-color:var(--primary-color);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

header a:focus{
  outline-color:var(--accent-color);
}

header .navbar{
  padding:0.75rem 0;
}

header .nav-link{
  font-weight:700;
  transition:all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-size:clamp(0.9rem, 1.5vw, 1rem);
  padding:0.5rem 1rem!important;
  position:relative;
  letter-spacing:0.3px;
  white-space:nowrap;
}

header .nav-link:hover{
  opacity:1;
  color:var(--accent-warm)!important;
  transform:translateY(-2px);
}

header h5{
  font-size:1.1rem;
  margin:0;
  white-space:nowrap;
}

/* Church name in header */
.church-name{
  font-size:clamp(0.9rem, 2.5vw, 1.5rem);
  font-weight:700;
  white-space:normal;
  letter-spacing:0.5px;
  line-height:1.2;
}

.header-brand{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.header-nav{
  flex-shrink:0;
  display:flex;
}

.header-logo{
  height:70px;
  width:auto;
  max-width:100%;
}

header img{
  max-width:100%;
  height:auto;
  flex-shrink:0;
  max-height:70px;
}

/* Bootstrap navbar toggler styling */
header .navbar-toggler{
  border:none;
  padding:0.5rem;
}

header .navbar-toggler:focus{
  box-shadow:none;
}

header .navbar-collapse{
  flex-basis:100%;
  order:2;
}

@media(max-width:992px){
  header .nav-link{
    font-size:clamp(0.8rem, 1.2vw, 0.9rem);
    padding:0.4rem 0.75rem!important;
  }
  .header-logo{
    height:55px;
  }
  header .navbar{
    padding:0.6rem 0;
  }
}

@media(max-width:768px){
  header .navbar{
    padding:0.5rem 0;
  }
  header .navbar-brand{
    gap:0.25rem;
  }
  header .nav-link{
    font-size:0.95rem;
    padding:0.5rem 1rem!important;
  }
  .church-name{
    font-size:1rem;
  }
  .header-logo{
    height:45px;
  }
  header .navbar-collapse{
    margin-top:0.5rem;
  }
  header .navbar-nav{
    flex-direction:column;
    gap:0;
  }
}

@media(max-width:480px){
  header .navbar{
    padding:0.4rem 0;
  }
  header .navbar-brand{
    gap:0.2rem;
  }
  .church-name{
    font-size:0.85rem;
    line-height:1.1;
  }
  .header-logo{
    height:40px;
  }
  header .nav-link{
    font-size:0.9rem;
    padding:0.4rem 0.75rem!important;
  }
  header .navbar-collapse{
    margin-top:0.3rem;
  }
  header .navbar-nav{
    gap:0;
  }
}

/* Hero Section */
.hero-section{
  position:relative;
  min-height:auto;
  height:auto;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:0;
  padding:2rem 0 0.5rem 0;
}

.hero-image{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

.hero-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(135deg, rgba(62, 39, 35, 0.65) 0%, rgba(42, 22, 17, 0.55) 100%);
  z-index:2;
}

.hero-content{
  position:relative;
  z-index:3;
  color:white;
  text-align:center;
  max-width:900px;
  margin:0 auto;
  padding:1.5rem 2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
}

.hero-title{
  font-size:clamp(1.75rem, 4vw, 3.25rem);
  font-weight:700;
  color:white;
  margin-bottom:0.5rem;
  text-shadow:0 2px 8px rgba(0,0,0,0.4);
  line-height:1.2;
}

.hero-subtitle{
  font-size:clamp(1rem, 3vw, 1.75rem);
  font-style:italic;
  color:#e8d7c3;
  margin-bottom:0.75rem;
  text-shadow:0 1px 4px rgba(0,0,0,0.3);
  font-weight:300;
}


.hero-description{
  font-size:1rem;
  color:rgba(255,255,255,0.95);
  margin-bottom:1rem;
  max-width:700px;
  line-height:1.6;
  text-shadow:0 1px 3px rgba(0,0,0,0.2);
  text-align:center;
}

/* Hero Carousel */
.hero-carousel{
  position:relative;
  width:100%;
  background:rgba(30, 58, 95, 1);
  padding:1rem 2rem 2rem 2rem;
  min-height:120px;
  display:block;
}

.hero-carousel-inner{
  max-width:var(--max-width);
  margin:0 auto;
  text-align:center !important;
  padding:0;
}

.carousel-item{
  display:none;
  animation:fadeIn 0.5s ease-in-out;
  text-align:center !important;
  width:100%;
}

.carousel-item.active{
  display:block;
  text-align:center !important;
}

.carousel-item p{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

.carousel-title{
  font-size:0.85rem;
  font-weight:700;
  color:var(--accent-warm);
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:0.5rem;
  text-align:center !important;
}

.carousel-content{
  font-size:1.1rem;
  color:#ffffff;
  line-height:1.6;
  margin-bottom:0.5rem;
  font-style:italic;
  max-width:800px;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

.carousel-subtitle{
  font-size:0.95rem;
  color:var(--accent-warm);
  font-weight:600;
  margin-bottom:0;
  padding-bottom:0;
  text-align:center !important;
}

.hero-buttons{
  margin-bottom:1.5rem;
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
}

.hero-buttons .btn{
  padding:0.5rem 1.5rem;
  font-size:0.95rem;
  font-weight:600;
  border-radius:4px;
  transition:all 0.3s ease;
}

.hero-buttons .btn-danger{
  background-color:#c85a3a;
  border-color:#c85a3a;
  color:white;
}

.hero-buttons .btn-danger:hover{
  background-color:#a84730;
  border-color:#a84730;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

.hero-buttons .btn-outline-light{
  color:white;
  border-color:white;
  border-width:2px;
}

.hero-buttons .btn-outline-light:hover{
  background-color:white;
  color:#3e2723;
}

.hero-stats{
  display:flex;
  gap:2rem;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,0.2);
  flex-wrap:wrap;
  justify-content:flex-start;
}

.stat{
  text-align:center;
  min-width:80px;
}

.stat-number{
  font-size:clamp(1rem, 2.5vw, 1.5rem);
  font-weight:700;
  color:white;
  text-shadow:0 2px 4px rgba(0,0,0,0.3);
}

.stat-label{
  font-size:clamp(0.65rem, 1.25vw, 0.8rem);
  color:rgba(255,255,255,0.8);
  margin-top:0.25rem;
  display:block;
}

@media(max-width:992px){
  .hero-section{min-height:auto;padding:1.5rem 0}
  .hero-buttons{margin-bottom:1.5rem}
  .hero-stats{gap:1.5rem;justify-content:space-around;padding-top:1.5rem}
  .hero-content{padding:2rem 1.5rem}
}

@media(max-width:768px){
  .hero-section{
    min-height:auto;
    max-height:none;
    overflow:visible;
    padding:1.5rem 0;
  }
  .hero-content{
    padding:1.25rem;
  }
  .hero-title{
    font-size:1.5rem;
    line-height:1.3;
    margin-bottom:0.5rem;
  }
  .hero-subtitle{
    font-size:0.95rem;
    margin-bottom:0.5rem;
  }
  .hero-description{
    font-size:0.85rem;
    margin-bottom:1rem;
    max-width:100%;
    line-height:1.5;
  }
  .hero-buttons{
    margin-bottom:1rem;
    flex-direction:column;
    gap:0.5rem;
  }
  .hero-buttons .btn{
    width:100%;
    text-align:center;
    padding:0.6rem 1.25rem;
    font-size:0.9rem;
  }
  .hero-stats{
    flex-direction:row;
    gap:0.5rem;
    justify-content:space-between;
    padding-top:0.75rem;
    flex-wrap:wrap;
    margin-top:0.5rem;
  }
  .stat{
    flex:1;
    text-align:center;
    min-width:80px;
  }
  .stat-number{
    font-size:1rem;
  }
  .stat-label{
    font-size:0.65rem;
  }
}

@media(max-width:480px){
  .hero-section{
    min-height:auto;
    max-height:none;
    overflow:visible;
    padding:1rem 0;
  }
  .hero-content{
    padding:1rem;
  }
  .hero-title{
    font-size:1.25rem;
    line-height:1.25;
  }
  .hero-subtitle{
    font-size:0.85rem;
  }
  .hero-description{
    font-size:0.75rem;
    margin-bottom:0.75rem;
    line-height:1.4;
  }
  .hero-buttons .btn{
    padding:0.5rem 1rem;
    font-size:0.85rem;
    margin-bottom:0.4rem;
  }
  .hero-buttons .me-2{
    margin-right:0!important;
  }
  .hero-content{
    padding:0.75rem;
  }
  .hero-stats{
    gap:0.5rem;
    padding-top:0.6rem;
  }
}

footer{
  background-color:var(--primary-color);
  color:var(--text-light);
  margin-top:0;
  border-top:3px solid var(--accent-warm);
}

footer .col-md-3{
  padding-left:1rem;
  padding-right:1rem;
}

footer h5{
  color:#ffffff;
  font-weight:700;
}

/* Accessibility */
.visually-hidden.focusable:focus{
  position:static;
  clip:auto;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  background-color:var(--primary-color);
  color:var(--text-light);
  padding:0.5rem;
  z-index:9999;
}

/* Gallery */
.gallery-thumb{cursor:pointer;transition:transform 0.2s ease}
.gallery-thumb:hover{transform:scale(1.02)}
.gallery-thumb img{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.1)}
.gallery-thumb:focus-within{outline:2px solid var(--accent-warm);outline-offset:2px}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  * {transition:none!important;animation:none!important}
}

/* High contrast mode support */
@media (prefers-contrast: more){
  body{color:#000;background-color:#fff}
  a{text-decoration:underline}
  button, .btn{border-width:2px}
}

/* Dark mode support */
@media (prefers-color-scheme: dark){
  body{background-color:#ffffff;color:#3e2723}
  .bg-light{background-color:#f5f0e8!important;color:#3e2723!important}
}

/* Social Media */
.social-links{
  display:flex;
  justify-content:center;
  gap:1.5rem;
}

.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  background-color:rgba(255,255,255,0.15);
  border-radius:50%;
  color:#ffffff;
  text-decoration:none;
  transition:all 0.3s ease;
  font-size:1.2rem;
}

.social-link:hover{
  background-color:#ffffff;
  color:#3e2723;
  transform:translateY(-3px);
}

.social-link:focus{
  outline:2px solid #e8d7c3;
  outline-offset:2px;
}

body.dark-mode{
  background-color:#0f0f0f;
  color:#e8e8e8;
}

body.dark-mode main{
  background-color:#0f0f0f;
}

body.dark-mode main > .container{
  background-color:#1a1a1a;
}

body.dark-mode main section{
  border-bottom-color:#2c2c2c;
}

body.dark-mode .bg-light{
  background-color:#1a1a1a!important;
  color:#e8e8e8!important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6{
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
}

body.dark-mode .bg-primary{
  background-color:#1a1a1a!important;
  border-color:#5d4037;
  border-top-color:#8b6f47!important;
}

body.dark-mode a{
  color:#d4a574;
}

body.dark-mode a:hover{
  color:#e8d7c3;
}

body.dark-mode .btn-outline-light{
  color:#e8e8e8;
  border-color:#e8e8e8;
}

body.dark-mode .btn-outline-light:hover{
  background-color:#e8e8e8;
  color:#1a1a1a;
}

body.dark-mode footer{
  background-color:#1a1a1a;
  border-top-color:#8b6f47;
}

body.dark-mode footer a{
  color:#d4a574;
}

body.dark-mode footer a:hover{
  color:#e8d7c3;
}

body.dark-mode .border-light{
  border-color:#2c2c2c!important;
}
/* ===== Contact Page Styles ===== */
.contact-form-wrapper,
.contact-info-wrapper {
  background: #f5f0e8;
  border-radius: 12px;
  padding: 2rem;
  height: 100%;
  box-shadow: 0 4px 15px rgba(62, 39, 35, 0.1);
}

.contact-form-wrapper h2,
.contact-info-wrapper h2 {
  color: var(--primary-color);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--accent-warm);
}

.contact-form-wrapper h2 i,
.contact-info-wrapper h2 i {
  color: var(--accent-warm);
}

/* Form Controls */
.contact-form-wrapper .form-label {
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.contact-form-wrapper .form-control,
.contact-form-wrapper .form-select {
  background-color: #fff;
  border: 2px solid #d4c4a8;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--primary-color);
  transition: all 0.3s ease;
}

.contact-form-wrapper .form-control:focus,
.contact-form-wrapper .form-select:focus {
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 3px rgba(139, 111, 71, 0.15);
  background-color: #fff;
}

.contact-form-wrapper .form-control::placeholder {
  color: #a89a85;
}

.contact-form-wrapper .form-check-input {
  border: 2px solid #d4c4a8;
  width: 1.25rem;
  height: 1.25rem;
}

.contact-form-wrapper .form-check-input:checked {
  background-color: var(--accent-warm);
  border-color: var(--accent-warm);
}

.contact-form-wrapper .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(139, 111, 71, 0.15);
}

/* Primary Button */
.btn-primary-custom {
  background: linear-gradient(135deg, var(--primary-color) 0%, #5d4037 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 1rem 2rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-primary-custom:hover {
  background: linear-gradient(135deg, #5d4037 0%, var(--primary-color) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(62, 39, 35, 0.3);
  color: #fff;
}

.btn-primary-custom:active {
  transform: translateY(0);
}

/* Outline Button */
.btn-outline-custom {
  border: 2px solid var(--accent-warm);
  color: var(--accent-warm);
  background: transparent;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-outline-custom:hover {
  background: var(--accent-warm);
  color: #fff;
}

/* Contact Info Items */
.contact-info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #d4c4a8;
}

.contact-info-item:last-of-type {
  border-bottom: none;
  margin-bottom: 1rem;
}

.contact-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary-color) 0%, #5d4037 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 1rem;
}

.contact-icon i {
  color: #fff;
  font-size: 1.25rem;
}

.contact-details h5 {
  color: var(--primary-color);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.contact-details p {
  color: #5d4a3a;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.contact-details a {
  color: var(--accent-warm);
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-details a:hover {
  color: var(--primary-color);
}

/* Social Icons in Contact */
.contact-social {
  margin-top: 1rem;
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid #d4c4a8;
}

.contact-social h5 {
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 1rem;
}

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

.contact-social .social-icons a {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, var(--primary-color) 0%, #5d4037 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  transition: all 0.3s ease;
}

.contact-social .social-icons a:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(62, 39, 35, 0.3);
}

/* Map Container */
.map-container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(62, 39, 35, 0.1);
}

.map-container iframe {
  display: block;
}

/* Page Header Card Styles */
.page-header-card {
  background: #f5f0e8;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
}

/* Page Title Styles (Contact & About pages) */
.contact-page .page-title,
.about-page .page-title,
.leaders-page .page-title,
.gallery-page .page-title {
  color: #1e3a5f;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.page-header-card .lead {
  color: #1e3a5f;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 0;
  border-left: 4px solid var(--accent-warm);
  padding-left: 1rem;
}

.contact-page .lead,
.about-page .lead,
.leaders-page .lead,
.sermons-page .lead,
.gallery-page .lead {
  color: #1e3a5f;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  border-left: 4px solid var(--accent-warm);
  padding-left: 1.5rem;
}

/* ===== About Page Styles ===== */
.about-section {
  margin-bottom: 2rem;
}

.about-content-wrapper {
  background: #f5f0e8;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 15px rgba(62, 39, 35, 0.1);
}

.about-content-wrapper h2 {
  color: var(--primary-color);
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--accent-warm);
}

.about-content-wrapper h2 i {
  color: var(--accent-warm);
}

.about-content-wrapper p {
  color: #2c1810;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.about-content-wrapper p:last-child {
  margin-bottom: 0;
}

.about-content-wrapper a {
  color: var(--accent-warm);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.about-content-wrapper a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

/* Mission List */
.mission-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.mission-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
  color: #2c1810;
}

.mission-list li::before {
  content: '\f005';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--accent-warm);
  font-size: 0.75rem;
}

/* CSI Principles List */
.csi-principles {
  background: rgba(139, 111, 71, 0.1);
  border-left: 4px solid var(--accent-warm);
  padding: 1.25rem 1.25rem 1.25rem 2rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

.csi-principles li {
  color: #2c1810;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.csi-principles li:last-child {
  margin-bottom: 0;
}

/* CSI Logo Section */
.csi-logo-section {
  background: rgba(62, 39, 35, 0.05);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  text-align: center;
}

.csi-logo-section h4 {
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 1rem;
}

.csi-logo-img {
  max-width: 180px;
  height: auto;
  margin-bottom: 1rem;
  border-radius: 8px;
}

.csi-logo-section p {
  margin-bottom: 0;
}

.csi-logo-section em {
  color: var(--accent-warm);
  font-style: italic;
  font-weight: 600;
}

/* About Page Responsive */
@media (max-width: 767px) {
  .about-content-wrapper {
    padding: 1.5rem;
  }
  
  .about-content-wrapper h2 {
    font-size: 1.3rem;
  }
}

/* Contact Page Responsive */
@media (max-width: 991px) {
  .contact-form-wrapper,
  .contact-info-wrapper {
    padding: 1.5rem;
  }
}

@media (max-width: 767px) {
  .contact-info-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .contact-icon {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  
  .contact-form-wrapper h2,
  .contact-info-wrapper h2 {
    font-size: 1.3rem;
    text-align: center;
  }
}

/* ===== Leaders Page Styles ===== */
.leaders-section {
  margin-bottom: 2rem;
}

.leaders-content-wrapper {
  background: #f5f0e8;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 15px rgba(62, 39, 35, 0.1);
}

.leaders-content-wrapper h2 {
  color: var(--primary-color);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--accent-warm);
}

.leaders-content-wrapper h2 i {
  color: var(--accent-warm);
}

/* Bishop Card */
.bishop-card {
  padding: 1rem 0;
}

.bishop-img {
  max-width: 220px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(62, 39, 35, 0.2);
  border: 4px solid var(--accent-warm);
  margin-bottom: 1rem;
}

.bishop-info h2 {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.25rem;
  font-size: 1.75rem;
}

.bishop-info .diocese {
  color: var(--accent-warm);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.bishop-name {
  color: var(--primary-color);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.bishop-address {
  color: #5d4a3a;
  font-size: 1rem;
}

.bishop-address i {
  color: var(--accent-warm);
}

/* Committee Grid */
.committee-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.committee-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(62, 39, 35, 0.03);
  border-radius: 8px;
  border-left: 4px solid var(--accent-warm);
}

.committee-row.single {
  grid-template-columns: 1fr;
  max-width: 50%;
}

.committee-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.committee-item .role {
  font-weight: 700;
  color: var(--primary-color);
  font-size: 0.95rem;
}

.committee-item .name {
  color: var(--accent-warm);
  font-weight: 600;
  font-size: 1rem;
}

.committee-item .name.pending {
  font-style: italic;
  color: #999;
}

/* Committee Photo */
.committee-photo {
  text-align: center;
}

.committee-photo img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(62, 39, 35, 0.2);
}

/* Leaders Page Responsive */
@media (max-width: 767px) {
  .leaders-content-wrapper {
    padding: 1.5rem;
  }
  
  .committee-row {
    grid-template-columns: 1fr;
  }
  
  .committee-row.single {
    max-width: 100%;
  }
  
  .bishop-info {
    text-align: center;
    margin-top: 1rem;
  }
  
  .bishop-info h2 {
    justify-content: center;
  }
  
  .bishop-name {
    font-size: 1.25rem;
  }
}

/* ===== Sermons Page Styles ===== */
.sermons-page .page-title {
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-weight: 700;
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.sermons-page .page-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--accent-warm);
}

.sermons-page .lead {
  color: #f5f0e8;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.sermons-section {
  margin-bottom: 2rem;
}

.sermons-content-wrapper {
  background: #f5f0e8;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 15px rgba(62, 39, 35, 0.1);
}

.sermons-content-wrapper h2 {
  color: var(--primary-color);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--accent-warm);
}

.sermons-content-wrapper h2 i {
  color: var(--accent-warm);
}

.sermons-content-wrapper p {
  color: #2c1810;
}

.sermons-content-wrapper a {
  color: var(--accent-warm);
  font-weight: 600;
}

.sermons-content-wrapper a:hover {
  color: var(--primary-color);
}

/* Sermon Placeholder */
.sermon-placeholder {
  background: rgba(62, 39, 35, 0.05);
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  border: 2px dashed #d4c4a8;
}

.sermon-placeholder i {
  font-size: 3rem;
  color: var(--accent-warm);
  margin-bottom: 1rem;
}

.sermon-placeholder h4 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.sermon-placeholder p {
  color: #5d4a3a;
  margin-bottom: 0;
}

/* ===== Gallery Page Styles ===== */
.gallery-section {
  margin-bottom: 2rem;
}

.gallery-content-wrapper {
  background: #f5f0e8;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 15px rgba(62, 39, 35, 0.1);
}

.gallery-content-wrapper h2 {
  color: var(--primary-color);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--accent-warm);
}

.gallery-content-wrapper h2 i {
  color: var(--accent-warm);
}

.gallery-content-wrapper p {
  color: #2c1810;
}

/* Video Card */
.video-card {
  background: rgba(62, 39, 35, 0.05);
  border-radius: 12px;
  padding: 1.5rem;
  height: 100%;
}

.video-card h4 {
  color: var(--primary-color);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.video-card h4 i {
  color: var(--accent-warm);
}

.video-card .ratio {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(62, 39, 35, 0.15);
}

/* Gallery Grid Images */
.gallery-content-wrapper #gallery img {
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-content-wrapper #gallery img:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(62, 39, 35, 0.2);
}

/* Sermons & Gallery Responsive */
@media (max-width: 767px) {
  .sermons-content-wrapper,
  .gallery-content-wrapper {
    padding: 1.5rem;
  }
  
  .sermon-placeholder {
    padding: 2rem 1rem;
  }
  
  .sermon-placeholder i {
    font-size: 2rem;
  }
  
  .video-card {
    padding: 1rem;
  }
}