/* -------- variables & reset -------- */
:root{
  --red: #b30000;
  --red-strong: #8a0000;
  --muted: #666;
  --bg: black;
  --max-width: 1100px;
  --pad: 1rem;
  --card-radius: 12px;
  --readable-size: 16px;
  --nav-height: 64px;
}

html, body {
  height: 100%;
  margin: 0;
  background-color: black;
  /* filter: invert(100%); */
}


main {
  flex: 1;
  background-color: black;
}

a { color: white; text-decoration: none; }
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: var(--readable-size);
  line-height: 1.55;
  color:#222;
  background: black;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  
}




/*my layout container*/
.container{
  max-width: var(--max-width);
  
  margin: 0 auto;
  padding: 0 1rem;
  place-self: center;
  filter: invert(100%);
}

/*this is the header plus navigation*/
.site-header{
  background: linear-gradient(90deg, var(--red), #e33);
  color:#fff;
  border-bottom: 3px solid rgba(0,0,0,0.06);
  position: sticky;
  top:0;
  z-index: 1200;
  width:100%;
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.6rem 0;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  min-height: var(--nav-height);
}
.brand{
  color:black;
  font-weight:700;
  font-size:1.25rem;
  text-decoration:none;
  letter-spacing:0.3px;
  display:flex;
  align-items:center;
  gap:0.5rem;
  margin-left: 5px;
}

/*this is my navigation only for desktop sha*/
.main-nav{
  display:flex;
  gap:0.8rem;
  align-items:center;
  justify-content:flex-end;

}
.main-nav a{
  color: black;
  text-decoration:none;
  padding:0.45rem 0.6rem;
  border-radius:8px;
  font-weight:600;
  opacity:0.98;
  white-space:nowrap;
  transition: background 0.3s;
}
.main-nav a:hover{ 
  background: rgba(139, 207, 207, 0.39) 
}
.btn{ /* general button */
  display:inline-block;
  padding:0.5rem 1rem;
  border-radius:28px;
  text-decoration:none;
  font-weight:700;
  cursor:pointer;
}
.btn-primary{ 
  background:var(--red); 
  color:#fff;
}

.btn-outline{
  background:white;
  color:var(--red);
  border:2px solid rgba(255,255,255,0.35);
  padding:0.4rem 0.9rem;
}

/*then this is for mobile phones*/
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  color:#fff;
  font-size:1.4rem;
  cursor:pointer;
  padding:0.25rem 0.5rem;
  align-self:center;
}

.change-text {

}
.nav-toggle:focus { outline: 3px solid rgba(255,255,255,0.18); border-radius:6px; }

/*this is for the hero section*/
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    overflow: hidden;
    background-color: transparent;
}
.hero img.big-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 1;
}
.hero-overlay {
  display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.7));
    z-index: -1;
}
.hero-content {
    position: relative;
    max-width: 800px;
    padding: 20px;
    z-index: 2;
    color: rgb(247, 247, 247);
    font-weight: 500;
}
.hero h1 { 
  font-size: clamp(1.8rem, 4vw, 3rem); 
  margin-bottom: 15px; 
}
.hero p { font-size: clamp(1rem, 2.2vw, 1.3rem); line-height: 1.5; margin-bottom: 20px; }
.hero .btn-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}


@media (max-width: 430px) {
  .hero { height: 68vh; min-height: 480px; background-position: center 40%; }
  .hero-text h1 { font-size: 1.6rem; }
  .hero-text .lead { font-size: 0.98rem; }
}


@media (max-width:920px){
  .nav-wrap{
     padding:0.45rem 0;
     }
  .brand{ 
    font-size:1.1rem;
  }
  .hero {
     min-height: 520px; 
     background-position: center 35%; 
    }
  .hero-text {
     padding: 1rem;
     }
  .highlights {
    grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
    gap:0.6rem;
    filter: invert(100%);
  }
}

/*for my highlight cards for the church*/
.highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Wider cards */
  gap: 1.5rem;
  margin: 1.5rem 0;
  padding: 1.5rem 0;
  background-color: white;
}



.card{
  background: linear-gradient(180deg,#fff,#91cdd162);
  border-radius: var(--card-radius);
  padding:1.25rem;
  text-align:center;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  transition: transform .28s ease, box-shadow .28s ease;
  opacity: 1 !important;
  color: white !important;
}
.card h3{
   color:var(--red); 
    margin-bottom:0.45rem;
     font-size:1.05rem;
     color: black;
    }
.card p{ 
  color:var(--muted);
   font-size:0.95rem }
.card:hover{ 
  transform: translateY(-8px);
   box-shadow: 0 18px 40px rgba(0,0,0,0.12) 
  }


.cta.container{
  margin-top: 1.5rem;
  padding: 1.6rem;
  background: linear-gradient(180deg,#fff,#91cdd134);
  border-radius: 12px;
}
.cta h2{
   font-size:1.25rem; 
   color: var(--black);
    margin-bottom:0.6rem
   }
.cta p{ 
  color:var(--muted);
   margin-bottom:1rem;
    font-size:1rem
   }
.cta .btn.btn-primary{
   display:inline-block;
    margin-top:0.4rem; 
    margin-bottom:1.6rem;
    background-color: black;
    
   }

/*news section */
.grid-three{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:1.35rem;
  margin-top: 0.9rem;
}
.news-card{
  background: linear-gradient(180deg,#c0d3df,#91cdd162);
  border-radius: 12px;
  padding: 1.1rem 1.15rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
  opacity: 1 !important;
}
.news-card h4{ 
  margin-bottom:0.4rem; 
  font-size:1rem; 
  color:#111 
}
.news-card p{ 
  color:var(--muted); 
  font-size:0.95rem 
}
.news-card:hover{ 
  transform: translateY(-6px); 
  box-shadow: 0 18px 36px rgba(0,0,0,0.10) 
}
.latest.container{ 
  margin-top: 1.6rem; 
  padding-top: 0.8rem; 
}
.latest h2{ 
  font-size:1.3rem; 
  color:var(--black); 
  margin-bottom:0.4rem 
}
.latest p{ 
  color:var(--muted);
   margin-bottom:0.8rem 
  }

/*for the footer*/
.site-footer{
  margin-top:2.5rem;
  padding:1.6rem 0;
  background: black;
  color:#fff;
  width:100%;
}
.sermon-footer {
  margin-top: 0;
}
.footer-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap:2rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
  font-size: 0.7em;
  color: black;
}
.footer-grid div {
  margin-left: 15px;
}
.site-footer h3, .site-footer h4{
   margin-bottom:0.35rem
   }
.site-footer p{ 
  color: black; 
  font-size:0.95rem 
}
.site-footer a {
  color: black;
}
.site-footer .copyright{
  margin-top:1rem;
  text-align:center;
  font-size:0.95rem;
  color: black;
}

/*for small screens*/
@media (max-width:992px){
  .main-nav{ 
    display:none; 
    
  }
  .nav-toggle{ display:inline-block; }
}
@media (max-width:992px){
  .main-nav{
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: linear-gradient(180deg,white, rgb(129, 221, 228));
    display:flex;
    flex-direction:column;
    gap:0.4rem;
    padding: 0.9rem 1rem;
    align-items:center;
    border-bottom: 2px solid rgba(0,0,0,0.06);
    transform-origin: top center;
    visibility: hidden;
    opacity: 0;
    transform: scaleY(0.95);
    transition: all 220ms cubic-bezier(.2,.9,.2,1);
    z-index: 1250;
  }
  .main-nav.show{
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
  }
  .main-nav a{ 
    padding: 0.6rem 0; 
    width:100%; 
    text-align:center; 
    font-size:1rem 
  }
}
@media (max-width:480px){
  .brand{ font-size:1.05rem; }
  .nav-toggle{ font-size:1.6rem; }
  .nav-wrap{ padding-left:.8rem; padding-right:.8rem; min-height:56px; }
}
@media (max-width:360px){
  .grid-three{ gap: 1rem; grid-template-columns: 1fr; }
  .footer-grid{ gap: 1rem; padding: 0 0.75rem; }
}
a:focus, button:focus{ outline: 3px solid rgba(179,0,0,0.12); outline-offset: 3px }


.card img, .pastor-card img, .hero-image img{
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display:block;
}
.happy-round { border-radius: 50%; }


.news-feed{
  display: grid;
  gap: 1.6rem;
  margin-top: 1.5rem;
}
.news-item{
  background: #fff;
  border-left: 6px solid rgb(22, 247, 228);
  border-radius: 8px;
  padding: 1.2rem 1rem 1rem 1.2rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}
.news-item time{
  display:block;
  font-size:0.9rem;
  color: var(--muted);
  margin-bottom:0.3rem;
}
.news-item h3{
  margin-bottom:0.5rem;
  color: rgb(58, 204, 192);
  font-size:1.2rem;
}
.news-item p{
  font-size:1rem;
  color:#333;
  line-height:1.5;
}
.news-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}
@keyframes fadeInUp{
  from{ transform: translateY(25px); opacity:0 }
  to{ transform: translateY(0); opacity:1 }
}
/*my animation after each stagger(got this from ai lol)*/
.news-item:nth-child(1){ animation-delay:0.1s }
.news-item:nth-child(2){ animation-delay:0.25s }
.news-item:nth-child(3){ animation-delay:0.4s }
.news-item:nth-child(4){ animation-delay:0.55s }
/* add more nth-child as needed */


/*event page styling*/
.event-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.6rem;
}

.event {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.2rem 1.2rem 1.2rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}

.event::before {
  content: attr(data-date);
  position: absolute;
  top: 0;
  left: 0;
  background: var(--red);
  color: #fff;
  font-weight: bold;
  padding: 0.4rem 0.8rem;
  border-bottom-right-radius: 10px;
  font-size: 0.9rem;
}

.event h3 {
  margin-bottom: 0.6rem;
  color: var(--red-strong);
  font-size: 1.25rem;
}

.event p {
  color: #444;
  font-size: 0.95rem;
  line-height: 1.5;
}

.event:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.10);
}
.head-event-text {
  margin-top: 9px;
}
/*sermon page styling*/
.sermon-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.6rem;
  margin-top: 1.6rem;
  
}

.sermon {
  background: #fff;
  border-radius: 12px;
  padding: 1.2rem 1.2rem 1.4rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;

}

.sermon h3 {
  font-size: 1.2rem;
  color: rgb(84, 245, 231);
}

.sermon p {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.5;
}

.sermon:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

/* sermon media (video or audio) */
.sermon iframe,
.sermon audio {
  width: 100%;
  border-radius: 8px;
  margin-top: 0.4rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.event-card {
  display: flex;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
}

.event-date {
  background: rgb(44, 230, 214);
  color: #fff;
  text-align: center;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 80px;
}

.event-date .day {
  font-size: 1.8em;
  font-weight: bold;
  line-height: 1;
}

.event-date .month {
  font-size: 0.9em;
  text-transform: uppercase;
}

.event-info {
  padding: 15px;
  flex: 1;
}

/*styling for the pastors page*/
.pastors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem;
  margin-top: 1.6rem;
}

.pastor-profile {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}

.pastor-profile img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  filter: invert(100%);
}

.pastor-info {
  padding: 1rem 1.2rem 1.4rem;
}

.pastor-info h3 {
  margin-bottom: 0.3rem;
  color: rgb(81, 221, 209);
  font-size: 1.2rem;
}

.pastor-info .role {
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.pastor-info p {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.5;
}

.pastor-profile:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}



/* Hero Section */
.hero-small {
  background: url("assets/about-hero.jpg") center/cover no-repeat;
  height: 40vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-small .hero-overlay {
  background: rgba(0,0,0,0.55);
  color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.hero-small h1 {
  font-size: 2.2rem;
  margin-bottom: .5rem;
}
.hero-small p {
  font-size: 1.2rem;
  font-weight: 300;
}

/* Intro */
.about-intro {
  margin: 3rem auto;
  line-height: 1.7;
  font-size: 1.1rem;
  color: grey;
  background-color: white;
}

/* Founder Section */
.founder-card {
  display: flex;
  flex-wrap: wrap;
  gap: 0rem;
  margin-top: 0;
  align-items: center;
  background-color: white;
  padding: 0;
}
.founder h2 {
  color: black;
  background-color: white;
  padding: 0;
  margin: 0;
}
.founder-card img {
  max-width: 280px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.founder-info {
  flex: 1;
  margin-left: 7px;
}
.founder-info h3 {
  margin-top: 0;
  font-size: 1.8rem;
  color: black; 
  
}



/* Mission & Vision */
.mission {
  margin: 4rem auto;
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.mission-card {
  background: #f9f9f9;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
.mission-card h3 {
  margin-top: 0;
  color: rgb(58, 204, 192);
}

/* Timeline */
.timeline {
  margin: 4rem auto;
  border-left: 3px solid rgb(58, 204, 192);
  padding-left: 1.5rem;
}
.timeline h2 {
  margin-left: 7px;
}
.timeline-item {
  margin-bottom: 2rem;
  position: relative;
  margin-left: 14px;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 5px;
  width: 16px;
  height: 16px;
  background: rgb(58, 204, 192);
  border-radius: 50%;
}
.timeline-date {
  font-weight: bold;
  color: rgb(58, 204, 192);
  display: block;
  margin-bottom: .3rem;
  margin-left: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .founder-card {
    flex-direction: column;
    text-align: center;
  }
  .founder-card img {
    margin-bottom: 1rem;
  }
}
/* Smaller hero version for About page */
.hero-about {
  height: 50vh; /* shorter than home page */
  min-height: 380px;
}
.text-about {
  margin-left: 10px;
}
/*styling for the donate page*/
.donate-hero {
  background: url("assets/donate-hero.jpg") center/cover no-repeat;
  height: 45vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.donate-hero-overlay {
  background: rgba(0,0,0,0.55);
  color: #fff;
  text-align: center;
  padding: 2rem;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.donate-hero h1 {
  font-size: 2.4rem;
  margin-bottom: 0.6rem;
}
.donate-hero p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
}

.donate-container {
  margin: 3rem auto;
}
.donate-intro {
  text-align: center;
  margin-bottom: 2.5rem;
}
.donate-intro h2 {
  color: rgb(58, 204, 192);
  margin-bottom: 0.6rem;
}

.donate-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.donate-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  padding: 1.5rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.donate-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.12);
}
.donate-card h3 {
  color: rgb(58, 204, 192);
  margin-bottom: 0.8rem;
}

.donate-cta {
  text-align: center;
  margin-top: 3rem;
  padding: 2rem 1rem;
  background: linear-gradient(180deg, rgba(179,0,0,0.05), rgba(145, 218, 240, 0.9));
  border-radius: 12px;
}
.donate-cta h2 {
  margin-bottom: 1rem;
  color: rgb(58, 204, 192);
}
.btn-large {
  font-size: 1.1rem;
  padding: 0.8rem 1.8rem;
  border-radius: 32px;
  background-color: black
}

.modal {
  display: none; 
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 80%;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0,0,0,0.6);
  animation: fadeIn .3s ease-in;
}

.modal-content {
  background: black;
  margin: 10% auto;
  padding: 2rem;
  border-radius: 16px;
  max-width: 500px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  animation: slideDown .35s ease-out;
  color: white;
  border: 1px solid rgba(228, 78, 78, 0.411);
  
}

.modal-content h2 {
  color: var(--red);
  margin-bottom: 1rem;
}

.modal-content p {
  margin: 0.5rem 0;
  font-size: 1.05rem;
}

.modal-content .note {
  margin-top: 1rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.671)
}

.close-btn {
  float: right;
  font-size: 1.5rem;
  font-weight: bold;
  color: #888;
  cursor: pointer;
  transition: color 0.2s ease;
}
.close-btn:hover {
  color: var(--red);
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes slideDown {
  from {transform: translateY(-40px); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}
/*styling for contact page*/
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem auto;
  align-items: start;
}

.contact-grid h3 {
  color: rgb(58, 204, 192);
  margin-bottom: 0.6rem;
}

.contact-grid p {
  margin-bottom: 0.6rem;
  font-size: 1rem;
  color: #333;
  line-height: 1.5;
}

.contact-grid a {
  color: var(--red);
  font-weight: 600;
  text-decoration: underline;
}

#contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background: #fff;
  padding: 1.8rem;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
#contact-form:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.1);
}

#contact-form label {
  font-weight: 600;
  color: #444;
  font-size: 0.95rem;
}

#contact-form input,
#contact-form textarea {
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}

#contact-form input:focus,
#contact-form textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 6px rgba(179,0,0,0.2);
  outline: none;
}

#contact-form button {
  margin-top: 0.5rem;
  background: rgb(31, 233, 216);
  color: black;
  padding: 0.8rem;
  border: none;
  border-radius: 28px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background .25s ease;
}
#contact-form button:hover {
  background: rgb(0, 247, 226);
}
/*styling for ministries page*/
.ministry-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem;
  margin-top: 1.8rem;
  margin-bottom: 2rem;
  background-color: white;
}

.ministry {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.2rem 1.6rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
  position: relative;
  overflow: hidden;
}

.ministry h3 {
  color: rgb(58, 204, 192);
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
  line-height: 1.4;
}

.ministry p {
  font-size: 0.98rem;
  color: #444;
  line-height: 1.55;
}

/* subtle left accent bar */
.ministry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: rgb(51, 238, 222);
  border-radius: 12px 0 0 12px;
  opacity: 0.9;
}

.ministry:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.12);
}

/* stagger animation delays */
.ministry:nth-child(1){ animation-delay:0.1s }
.ministry:nth-child(2){ animation-delay:0.25s }
.ministry:nth-child(3){ animation-delay:0.4s }
.ministry:nth-child(4){ animation-delay:0.55s }
.ministry:nth-child(5){ animation-delay:0.7s }

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

/* Responsive tweaks */
@media (max-width: 480px) {
  .ministry h3 {
    font-size: 1.1rem;
  }
  .ministry p {
    font-size: 0.92rem;
  }
}
/* Ensure no horizontal overflow */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Make sure all images scale within parent */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Container should not exceed screen */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: 0rem;
  padding-right: 0rem;
  box-sizing: border-box;
  filter: invert(100%);
}

/* Hero image fix */
.hero img.big-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  
}
.happy-pastor-image {
  filter: invert(100%);
}
.big-image-ministry {
  filter: invert(100%);
}
.hero-content-ministry {
  filter: invert(100%);
}
.ministry-header {
  color: black;
  background-color: white;
}
.container-ministry {
  background-color: white;
}
.frame-video {
  filter: invert(100%);
}
.email-style, .amount-style {
  border-left:2px solid rgb(240, 72, 72);
  width: 70%;
  height: 90%;
  font-size: 18px;
  margin-bottom: 5px;
}
.display-style-money {
  color: white;
  font-size: 30px;
}
.button-pay {
  margin-top: 20px;
  width: 30%;
  background: linear-gradient(180deg, rgba(179,0,0,0.05), rgba(223, 91, 91, 0.445));
  color: white;
}
.thank-you-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: linear-gradient(180deg, #000102, #32c6e0);
  color: white;
  padding: 20px 40px;
  border-radius: 30%;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
  animation: none;
  z-index: 3;
}
.thank-you-popup.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: fadeOut 1.5s forwards;
  transition: opacity 0.5s;
}
@keyframes fadeOut {
  0% {
     opacity: 0.2; 
     transform: translate(-50%, -50%) scale(1); 
    }
  50% { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
     opacity: 0; 
     transform: translate(-50%, -50%) scale(7); 
    }
}
/* Facebook Videos Section */
.facebook-videos {
  margin: 3rem auto;
  text-align: center;
  padding: 2rem 1rem;
  background: linear-gradient(180deg, #ffffff, #f2f8f8);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.facebook-videos h2 {
  font-size: 1.6rem;
  color: rgb(58, 204, 192);
  margin-bottom: 0.5rem;
}

.facebook-videos .fb-intro {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1.5rem;
}

.fb-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  justify-items: center;
}

.fb-video-card iframe {
  width: 100%;
  max-width: 520px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.facebook-vid {
  filter: invert(100%);
}
iframe {
  filter: invert(100%);
}
iframe:fullscreen {
  filter: invert(100%);
}
/* 📍 Map Section */
.map-section {
  margin-top: 2rem;
  padding: 2rem 1rem;
  background: linear-gradient(180deg, #fff, #91cdd134);
  border-radius: 12px;
  text-align: center;
}

.map-section h2 {
  font-size: 1.4rem;
  color: var(--red-strong);
  margin-bottom: 0.6rem;
  /* filter: invert(100%); */
}

.map-section p {
  color: var(--muted);
  margin-bottom: 1.2rem;
  font-size: 1rem;
}

.map-container {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.map-container iframe {
  width: 100%;
  height: 400px;
  border: 0;
}
/* Podcast Section */
.podcast-section {
  margin-top: 2.5rem;
  padding: 1.8rem 1rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.podcast-section h2 {
  font-size: 1.4rem;
  color: rgb(58, 204, 192);
  margin-bottom: 0.6rem;
  text-align: center;
}

.podcast-intro {
  color: var(--muted);
  text-align: center;
  margin-bottom: 1.4rem;
  font-size: 1rem;
}

.podcast-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}

.podcast {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.podcast:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.1);
}

.podcast h3 {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  color: rgb(53, 212, 218);
  
}

.podcast audio {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.facebook-live {
  margin: 2rem auto;
  padding: 1.5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  text-align: center;
}

.facebook-live h2 {
  color: rgb(58, 204, 192);
  margin-bottom: 0.5rem;
}

.facebook-live p {
  color: #444;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.fb-video-wrapper {
  max-width: 800px;
  margin: 0 auto;
}
.fb-video-wrapper iframe {
  border-radius: 8px;
  width: 100%;
  height: 1200px;
}
.face-logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.podcast {
  position: relative;
  background: #fff;
  padding: 1.2rem;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.07);
  margin-bottom: 1rem;
}

.new-badge {
  position: absolute;
  top: -2px;
  right: 10px;
  background: #ff1744;
  color: white;
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: bold;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  filter: invert(100%);
}

.live-wrapper {
  background: linear-gradient(180deg,#e1f5f3d0,#91cdd18e);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  margin-top: 1.5rem;
  text-align: center;
}

.live-fallback h3 {
  color: black;
  margin-top: 2rem;
  font-size: 1.2rem;
}
/* ======== DONATE MODAL REDESIGN ======== */

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  padding-top: 60px;
}

.modal-content.donate-styled-box {
  background: #ffffff;
  margin: auto;
  padding: 35px 30px;
  border-radius: 18px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.18);
  position: relative;
  animation: showModal 0.3s ease-out;
}

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

/* Close Button */
.close-btn {
  position: absolute;
  right: 18px;
  top: 18px;
  font-size: 26px;
  cursor: pointer;
  color: #333;
}
.close-btn:hover {
  color: #d40000;
}

/* Titles */
.donate-title {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #222;
}

.donate-sub {
  text-align: center;
  font-size: 14px;
  color: #777;
  margin-bottom: 25px;
}

/* Form Groups */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

/* Input Styles (your existing classes kept) */
.email-style,
.amount-style {
  width: 100%;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 15px;
  outline: none;
  transition: all 0.2s ease;
  background: #fafafa;
}

.email-style:focus,
.amount-style:focus {
  border-color: #0077ff;
  box-shadow: 0 0 0 2px rgba(0, 119, 255, 0.15);
  background: #fff;
}

/* Display Amount */
.display-style-money {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #0077ff;
}

/* Pay Button */
.donate-pay-btn {
  width: 100%;
  background: #0077ff;
  color: white;
  padding: 14px 0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: 0.25s;
  margin-top: 10px;
}

.donate-pay-btn:hover {
  background: #005fcc;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 119, 255, 0.25);
}

.scrolling-notice {
  width: 100%;
  overflow: hidden;
  background: #970000; 
  background: linear-gradient(180deg,#35ebe2,#91cdd162);
  padding: 12px 0;
  margin: 40px 0 20px;
  filter: invert(100%);
}

.scrolling-notice p {
  display: inline-block;
  white-space: nowrap;
  color: black;
  font-weight: bold;
  font-size: 1.1rem;
  animation: scrollText 12s linear infinite;
  letter-spacing: 1px;
}

@keyframes scrollText {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
/* ✅ Floating “Go to Live Service” button */
.go-live-btn {
  position: fixed !important;
  right: 20px;
  bottom: 30px;
  background: #d60000; /* deep church red */
  color: #fff;
  padding: 14px 20px;
  border: none;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  transition: all 0.3s ease;
}

/* ✅ Hover effect */
.go-live-btn:hover {
  background: #b40000;
  transform: translateY(-3px);
}

/* ✅ Make it smaller on mobile */
@media (max-width: 600px) {
  .go-live-btn {
    padding: 10px 16px;
    font-size: 13px;
    right: 15px;
    bottom: 20px;
  }
}
.go-live-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;

  padding: 12px 20px;
  background: var(--red);
  color: white;
  font-weight: 700;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  z-index: 9000;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
  transition: transform .2s;
}

.go-live-btn:hover {
  transform: scale(1.08);
}
.giving-box {
  margin-top: 30px;
  padding: 25px;
  background: linear-gradient(180deg, rgba(179,0,0,0.05), rgb(119, 223, 255));
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 25px rgba(0,0,0,0.15);
}

.giving-title {
  font-size: 20px;
  margin-bottom: 15px;
  font-weight: 700;
}

.giving-btn {
  display: inline-block;
  padding: 12px 25px;
  background: #b80000; /* deep red church color */
  color: white;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.25s;
  filter: invert(100%);
}

.giving-btn:hover {
  transform: scale(1.05);
}
.go-live-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #b30000;
  color: white;
  padding: 14px 22px;
  border: none;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 2000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transition: 0.25s ease-in-out;
}

/* hover effect */
.go-live-btn:hover {
  background: #8a0000;
  transform: translateY(-3px);
}
.button-install {
  position: fixed;
  bottom: 20px;
  right: 20px;
  left: auto;
  transform: translateZ(0);
}
/* ============================
   OVERLAY
============================ */
.pwa-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 20px;
  backdrop-filter: blur(2px);
  animation: fadeIn 0.25s ease-out;
}

/* Popup Card */
.pwa-card {
  width: 92%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
  animation: slideUp 0.32s ease-out;
}

/* Icon */
.pwa-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(180deg, #b30000, #ff4d4d);
  border-radius: 14px;
  font-size: 28px;
  font-weight: 900;
  color: white;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Text */
.pwa-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #222;
}

.pwa-description {
  margin: 4px 0 14px 0;
  font-size: 14px;
  color: #444;
  line-height: 1.45;
}

/* Buttons */
.pwa-actions {
  display:flex;
  gap:10px;
  margin-top: 12px;
}

.pwa-btn {
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.pwa-btn.install {
  background: #b30000;
  color:white;
  box-shadow: 0 8px 20px rgba(179,0,0,0.25);
}

.pwa-btn.cancel {
  background: #f3f3f3;
  color: #444;
  border: 1px solid #e3e3e3;
}

/* iOS instructions */
.pwa-ios {
  display:none;
  margin-top: 10px;
}

.pwa-ios-step {
  background:#f7f7f7;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  color:#222;
}

/* Floating button */
.pwa-floating-btn {
  position: fixed;
  right: 14px;
  bottom: 18px;
  background: linear-gradient(180deg,#b30000,#8a0000);
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  z-index: 99998;
  display: none;
  cursor:pointer;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; } 
  to { opacity: 1; }
}

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

/* Responsive */
@media (max-width: 420px) {
  .pwa-card {
    grid-template-columns: 58px 1fr;
  }
  .pwa-icon {
    width: 58px;
    height: 58px;
    font-size: 22px;
  }
}
.button-install {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 14px 22px;
  background: linear-gradient(135deg, #c72611, #0056d6);
  color: #ffffff;
  border: none;
  border-radius: 12px;

  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  cursor: pointer;

  display: none;
  z-index: 9999;

  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  opacity: 0.95;

  transform: translateZ(0);
}

.button-install:hover {
  transform: scale(1.05) translateZ(0);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  opacity: 1;
}

.button-install:active {
  transform: scale(0.97) translateZ(0);
}