/* styles.css - Vibrant elegant theme */
:root{
  --deep:#3b2f63;
  --gold:#ffd54f;
  --cream:#fff8e1;
  --muted:#666;
  --accent1: #6a1b9a;
  --accent2: #ab47bc;
  --glass: rgba(255,255,255,0.85);
}
*{box-sizing:border-box}
body{font-family:'Open Sans',sans-serif;margin:0;color:#222;background:
  radial-gradient(circle at left top, #fff7f0 0%, #fffefb 20%),
  linear-gradient(135deg, #fff3e0 0%, #f3e5f5 50%, #e8eaf6 100%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.wrap{max-width:1100px;margin:0 auto;padding:18px}

/* Header */
.site-header{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#fff;padding:12px 0;box-shadow:0 6px 20px rgba(60,0,80,0.12);position:sticky;top:0;z-index:50}
.site-header { background: linear-gradient(
      135deg,
      #4b0082,
      #6a0dad,
      #8a2be2,
      #9b30ff,
      #b266ff
  );
  background-size: 400% 400%;
  animation: waveGradient 10s ease infinite;
  color: white;
  text-align: center;
  padding: 30px 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}

@keyframes waveGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* Mobile */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
}

/* Tablet */
@media (max-width: 768px) {
  .menu {
    display: none;
  }
}

/* Laptop */
@media (max-width: 1024px) {
}


header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-toggle {
  display: none;
  font-size: 26px;
  cursor: pointer;
}

@media (max-width: 768px) {
  nav {
    display: none;
    flex-direction: column;
    background: #fff;
    width: 100%;
  }

  nav a {
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }

  .menu-toggle {
    display: block;
  }
}



@media (max-width: 768px) {
  nav ul {
    display: none;
  }
}

	h1 {
  font-size: 2rem;
}

header h1 {
  font-family: 'Georgia', serif;
  font-size: 2.8em;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

nav a {
  color: #fff;
  font-weight: 600;
  margin: 0 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}

nav a:hover {
  color: #ffd700;
  text-shadow: 0 0 10px #fff;
}

.site-heaer .header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.saint-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
  object-fit: cover;
  animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow {
  from { box-shadow: 0 0 10px rgba(255,255,255,0.5); }
  to { box-shadow: 0 0 25px rgba(255,255,255,0.9); }
}

.header-text h1 {
  font-size: 2.5em;
  margin: 0;
}

.header-text p {
  font-size: 1.1em;
  margin-top: 5px;
  font-style: italic;
  color: #f8f8f8;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.logo-icon{width:56px;height:56px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.18)}
.brand h1{font-family:'Playfair Display',serif;margin:0;font-size:20px}
.sub{margin:0;font-size:13px;opacity:0.9}

.hero {
  position: relative;
  width: 100vw; /* Full viewport width */
  height: 90vh; /* Taller section for a dramatic look */
  margin-left: calc(-50vw + 50%); /* Remove side padding if any container wraps it */
  background: url('images/church-hero.jpg') no-repeat center center/cover;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}
nav {
  display: flex;
  flex-wrap: wrap; /* allows responsive adjustment */
  justify-content: center; /* centers the links */
  align-items: center;
  gap: 20px; /* spacing between links */
  padding: 10px 0;
}

nav a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  white-space: nowrap; /* keeps all links in one line */
  transition: all 0.3s ease;
}

nav a:hover {
  color: #ffd700;
  text-shadow: 0 0 10px #fff;
}



.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* full image visible */
    background: #000;     /* optional padding color */
}


.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 15px;
}

.header-icon {
  width: 80px;
  height: auto;
  display: inline-block;
  object-fit: contain;
  transition: transform 0.3s ease-in-out;
}

.header-icon:hover {
  transform: scale(1.05);
}


.home-cards {
    padding: 40px 0 !important;
}
.home-cards .card {
    min-height: auto !important;
}


.info-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 40px auto;
  max-width: 1200px;
}

.info-box {
  flex: 1;
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  min-height: 180px;
  transition: 0.3s ease;
}

.info-box h3 {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #333;
}

.info-box p {
  color: #444;
  line-height: 1.5;
}

.info-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .info-row {
    flex-direction: column;
  }
}

/* =========================
   MOBILE NAV FIX
========================= */

.menu-toggle {
  display: none;
  font-size: 26px;
  color: #fff;
  cursor: pointer;
}

/* Desktop */
.main-nav {
  display: flex;
}

.menu {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
}

.menu li {
  position: relative;
}

.menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* Submenu */
.submenu {
  display: none;
  position: absolute;
  background: #4b0082;
  padding: 10px 0;
  border-radius: 8px;
  top: 100%;
  left: 0;
  min-width: 220px;
}

.has-submenu:hover .submenu {
  display: block;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {

  .menu-toggle {
    display: block;
  }

  .main-nav {
    display: none;
    width: 100%;
    background: #4b0082;
    margin-top: 15px;
    border-radius: 12px;
  }

  .main-nav.active {
    display: block;
  }

  .menu {
    flex-direction: column;
    text-align: center;
  }

  .menu li {
    padding: 12px 0;
  }

  .submenu {
    position: static;
    background: #5a189a;
    display: none;
    margin-top: 8px;
  }

  .has-submenu.open .submenu {
    display: block;
  }
}




/* HERO SECTION */
.hero {
  position: relative;
  height: 65vh; /* smaller height */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  
  border-radius: 0 0 25px 25px;
}

/* HERO SECTION — FINAL FIX */
.hero {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  height: auto !important;      /* FIX: allow text to expand */
  overflow: visible !important; /* FIX: no hidden text */
}

/* IMAGE SECTION */
.hero-bg {
  width: 100%;
}

.hero-bg img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* TEXT SECTION BELOW IMAGE */
.hero-content {
  position: relative;
  padding: 40px 20px;
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
  color: #222;                   /* change text color */
}

/* HEADLINE */
.hero-content h2 {
  font-size: 32px;
  margin-bottom: 15px;
  color: #800000;                /* dark maroon or change to your color */
}

/* PARAGRAPH */
.hero-content p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 25px;
  color: #333;
}

/* BUTTON */
.btn {
  padding: 12px 25px;
  background: #a30000;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
}



.hero {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

/* IMAGE ON TOP — FULL WIDTH — NO BLACK BACKGROUND */
.hero-bg {
  width: 100%;
}

.hero-bg img {
  width: 100%;
  height: auto;
  display: block;            /* Removes white/black gaps */
  object-fit: cover;         /* Ensures proper crop (optional) */
}

/* TEXT BLOCK BELOW THE IMAGE */
.hero-content {
  position: relative;        /* VERY IMPORTANT */
  padding: 40px 20px;
  max-width: 800px;
  margin: 0 auto;            /* Center align on page */
  text-align: center;
  background: transparent;   /* Ensure no overlay */
}

.hero-content h2 {
  font-size: 32px;
  margin-bottom: 15px;
}

.hero-content p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 25px;
}

.btn {
  padding: 10px 20px;
  background: #b80000;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}






/* HERO CONTENT */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 850px;
  padding: 20px;
  color: white;
}

.hero-content h2 {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
  text-shadow: 0 3px 8px rgba(0,0,0,0.4);
}

.hero-content p {
  font-size: 18px;
  line-height: 1.6;
  opacity: 0.95;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* BUTTON */
.btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: #6a0dad;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s;
}

.btn:hover {
  background: #540b9e;
  transform: translateY(-2px);
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
  .hero {
    height: 75vh;
    padding: 0 20px;
  }

  .hero-content h2 {
    font-size: 30px;
  }

  .hero-content p {
    font-size: 16px;
  }
}





.priests-hero {
  background: linear-gradient(135deg, #4b0082, #6a0dad, #8a2be2);
}

.priests-section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  padding: 50px 20px;
  background: #f8f6ff;
}

.priest-card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  width: 280px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.priest-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 20px rgba(106, 13, 173, 0.3);
}

.priest-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #6a0dad;
  margin-bottom: 15px;
}

.priest-card h3 {
  color: #4b0082;
  margin-bottom: 5px;
}

.priest-card p {
  color: #333;
  font-size: 0.95rem;
  line-height: 1.4;
}


/* 🌟 Highlight the Latest Father Card — Final Strong Version */
.priest-card.latest-father {
  border: 4px solid #7b2cbf;
  background: linear-gradient(135deg, #e0aaff, #c77dff, #9d4edd);
  color: #fff;
  box-shadow: 0 0 30px rgba(157, 78, 221, 0.7);
  transform: scale(1.03);
  position: relative;
 
  z-index: 5;
  transition: all 0.4s ease-in-out;
}

/* Tag Label */
.priest-card.latest-father::before {
  content: "✨Present Parish Priest ✨";
  position: absolute;
  top: 8px;
  right: -30px;
  transform: rotate(15deg);
  background: #480ca8;
  color: #fff;
  padding: 5px 15px;
  border-radius: 5px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(72, 12, 168, 0.6);
  letter-spacing: 0.5px;
}

/* Smooth hover effect */
.priest-card.latest-father:hover {
  transform: scale(1.07);
  box-shadow: 0 0 40px rgba(123, 44, 191, 0.9);
}

/* Ensure image adapts */
.priest-card.latest-father img {
  border-radius: 10px;
  border: 2px solid #fff;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease-in-out;
}

.priest-card.latest-father img:hover {
  transform: scale(1.05);
}n-height: 350px;
}




@media (max-width: 768px) {
  header {
    flex-direction: column;
    text-align: center;
  }

  .header-content {
    flex-direction: column;
    align-items: center;
  }

  .header-content img {
    width: 60px;
    margin-bottom: 10px;
  }

  nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  nav a {
    font-size: 14px;
    padding: 6px 10px;
  }
}

/* --- Hero Section --- */
@media (max-width: 768px) {
  .hero {
    height: 50vh;
    background-position: center;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .hero p {
    font-size: 1rem;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LFRC School – Karaikudi</title>
    <link rel="stylesheet" href="styles.css">

    <style>



.father-item,
.sister-item {
    margin-bottom: 25px !important;
    padding-bottom: 15px;
    border-bottom: 1px solid #eaeaea;
}



.fathers-section,
.sisters-section {
    padding: 40px 0 !important;
    min-height: auto !important;
}


.activities-section {
    padding: 50px 0 !important;
    min-height: auto !important;
}


.st-theresa-hero {
    padding: 60px 0 !important;
    min-height: auto !important;
}



.prayer-section,
.donation-section {
    padding: 50px 0 !important;
    min-height: auto !important;
}








        /* SCHOOL PAGE CUSTOM STYLING */
.school-header {
    background: linear-gradient(135deg, #9333ea, #7e22ce, #581c87);
    color: white;
    text-align: center;
    padding: 80px 20px;        /* Bigger height */
    border-radius: 0 0 40px 40px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);  /* Elevated */
}

.school-header h1 {
    font-size: 3rem;           /* Bigger title */
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-shadow: 0px 4px 10px rgba(0,0,0,0.4); /* Elevation glow */
}

.school-header p {
    font-size: 1.3rem;
    opacity: 0.95;
}


.school-title {
    text-align: center;
    font-size: 48px;
    font-weight: 800;
    color: #3b005a;
    margin-top: 40px;

    /* Glow Elevation */
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.6),
        0 0 20px rgba(123, 31, 162, 0.6),
        0 0 40px rgba(123, 31, 162, 0.4);

    transition: all 0.4s ease-in-out;
}

/* Hover elevation boost */
.school-title:hover {
    text-shadow: 
        0 0 15px rgba(255, 255, 255, 0.9),
        0 0 30px rgba(123, 31, 162, 0.9),
        0 0 60px rgba(123, 31, 162, 0.7);
    transform: translateY(-4px);
}

        .section {
            margin: 50px auto;
            width: 90%;
            max-width: 1100px;
        }
        
        .section-title {
            font-size: 1.9rem;
            color: #6b21a8;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
        }

        .school-about {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
            align-items: center;
        }

        .school-about img {
            width: 400px;
            height: 280px;
            border-radius: 15px;
            object-fit: cover;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

        .school-about p {
            flex: 1;
            line-height: 1.7;
            color: #444;
            font-size: 1.1rem;
        }

        /* CLASSES */
        .classes-box, .courses-box {
            background: #f8f5ff;
            padding: 25px;
            border-radius: 20px;
            box-shadow: 0 2px 10px rgba(147, 51, 234, 0.2);
            margin-top: 20px;
        }

        ul {
            margin-left: 20px;
            line-height: 1.8;
        }

        /* Gallery */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .gallery img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }

    </style>







/* --- Gallery / Moments --- */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .gallery-grid img {
    height: 180px;
  }
}

/* --- Footer --- */
@media (max-width: 768px) {
  .footer-grid {
    display: block;
    text-align: center;
  }

  iframe {
    width: 100%;
    height: 180px;
  }
}

/* --- Tablets & Medium Screens --- */
@media (max-width: 1024px) {
  nav a {
    font-size: 15px;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}




.hero {
  position: relative;
  width: 100vw; /* Full viewport width */
  height: 90vh; /* Taller section for a dramatic look */
  margin-left: calc(-50vw + 50%); /* Remove side padding if any container wraps it */
  background: url('images/church-hero.jpg') no-repeat center center/cover;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
 background-attachment: fixed;
}

.priests-hero {
  background: linear-gradient(135deg, #4b0082, #6a0dad, #8a2be2);
}

.priests-section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  padding: 50px 20px;
  background: #f8f6ff;
}

.priest-card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  width: 280px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.priest-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 20px rgba(106, 13, 173, 0.3);
}

.priest-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #6a0dad;
  margin-bottom: 15px;
}

.priest-card h3 {
  color: #4b0082;
  margin-bottom: 5px;
}

.priest-card p {
  color: #333;
  font-size: 0.95rem;
  line-height: 1.4;
}


/* 🌸 Prayer & Donation Page Layout */
.prayer-donation-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding: 60px 20px;
  background: linear-gradient(135deg, #f3e8ff, #ede9fe, #f5f3ff);
}

/* Card box style */
.card {
  flex: 1 1 400px;
  max-width: 480px;
  background: #fff;
  border-radius: 20px;
  padding: 35px;
  box-shadow: 0 10px 25px rgba(147, 51, 234, 0.2);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(124, 58, 237, 0.3);
}

/* Headings */
.card h2 {
  color: #6d28d9;
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 15px;
}

/* Text & List */
.card p, .card ul {
  color: #333;
  font-size: 1rem;
  line-height: 1.6;
}

.card ul {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.card ul li {
  margin-bottom: 8px;
}

/* Form Fields */
.prayer-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.prayer-form input, .prayer-form textarea {
  padding: 12px 15px;
  border: 1px solid #c4b5fd;
  border-radius: 10px;
  font-size: 1rem;
}

.prayer-form input:focus, .prayer-form textarea:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 6px #a78bfa;
  outline: none;
}

/* Buttons */
.btn-submit, .btn-donate, .btn-pdf {
  display: inline-block;
  background: linear-gradient(90deg, #7c3aed, #9333ea);
  color: white;
  padding: 12px 25px;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  margin-top: 15px;
  transition: all 0.3s ease;
}

.btn-submit:hover, .btn-donate:hover, .btn-pdf:hover {
  background: linear-gradient(90deg, #6d28d9, #8b5cf6);
  transform: scale(1.05);
}

/* PDF Section */
.pdf-card {
  background: #fff;
  text-align: center;
  max-width: 700px;
  margin: 60px auto;
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.pdf-card h3 {
  color: #6d28d9;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.pdf-card p {
  color: #333;
  font-size: 1rem;
}


	
nav a {
  color: white;
  text-decoration: none;
  margin: 0 15px;
  font-weight: 600;
  transition: color 0.3s, border-bottom 0.3s;
}

nav a:hover {
  color: #ffd700; /* Gold hover effect */
}

nav a.active {
  color: #ffccff; /* Soft purple highlight */
  border-bottom: 3px solid #ffd700;
  padding-bottom: 5px;
}


nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  flex-wrap: wrap; /* remove if it's already present */
  gap: 10px;
}



/* nav */
.main-nav a{color:var(--gold);text-decoration:none;margin-left:14px;padding:8px 10px;border-radius:8px;font-weight:600}
.main-nav a:hover{background:rgba(255,255,255,0.08)}
.main-nav .active{background:rgba(255,255,255,0.12);color:#fff;}

/* hero */
.hero{display:flex;gap:26px;align-items:center;padding:28px 18px;flex-wrap:wrap}
.hero-img{flex:1 1 520px;height:360px;object-fit:cover;border-radius:14px;box-shadow:0 18px 40px rgba(50,18,80,0.2)}
.hero-card{background:var(--glass);padding:20px;border-radius:12px;flex:0 1 360px;backdrop-filter: blur(6px)}
.hero-card h2{font-family:'Playfair Display',serif;margin-top:0;color:var(--deep)}
.btn{display:inline-block;background:var(--deep);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;margin-top:12px}

/* content */
.content{padding:6px 18px 40px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:rgba(255,255,255,0.92);padding:18px;border-radius:12px;box-shadow:0 8px 24px rgba(50,18,80,0.06)}
.big-quote{font-style:italic;color:var(--muted);font-weight:600}

/* gallery */
.gallery{display:flex;gap:12px;flex-wrap:wrap}
.gallery img{width:calc(33.333% - 8px);border-radius:10px;object-fit:cover;box-shadow:0 8px 20px rgba(0,0,0,0.12)}

/* people & committees */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.person img{width:100%;border-radius:10px;height:200px;object-fit:cover}
.person h4{margin:8px 0 4px}

/* committee list */
.comm-list{list-style:none;padding:0;max-width:700px}
.comm-list li{padding:12px 14px;background:linear-gradient(90deg,#fff,#fff9);margin:10px 0;border-radius:10px;box-shadow:0 6px 20px rgba(100,50,120,0.06)}
.comm-list a{text-decoration:none;color:var(--deep);font-weight:600}

/* members */
.team-members{display:flex;flex-wrap:wrap;gap:14px}
.member{background:#fff;padding:10px;border-radius:10px;width:200px;box-shadow:0 10px 30px rgba(60,20,80,0.06);text-align:center}
.member img{width:100%;height:160px;object-fit:cover;border-radius:8px}

/* events */
.events-list{padding-left:0;list-style:none}
.events-list li{padding:10px;background:#fff;border-radius:8px;margin:8px 0;box-shadow:0 6px 18px rgba(70,30,90,0.05)}

/* prayers */
.prayer-card{background:linear-gradient(180deg,#fff,#fffaf0);padding:12px;border-radius:10px;margin-bottom:12px}

/* footer */
.site-footer{background:linear-gradient(90deg,#2b1b55,#3b2f63);color:#fff;padding:24px 0;margin-top:30px}
.footer-grid{display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap}
.footer-link{color:#ffd54f;text-decoration:none}
.copy{text-align:center;color:#fff;margin-top:14px;font-size:14px}

/* responsive */
@media(max-width:820px){
  .main-nav{display:none}
  .hero{flex-direction:column}
  .gallery img{width:100%}
}


.theresa-history-section {
    padding: 60px 20px;
    background: #f8f0ff; /* light lavender */
}

.theresa-history-container {
    max-width: 900px;
    margin: auto;
    background: #ffffff;
    padding: 40px 45px;
    border-radius: 18px;
    box-shadow: 0 8px 35px rgba(123, 36, 216, 0.18);
    border-left: 6px solid #7b24d8;
    animation: fadeIn 1.2s ease-in-out;
}

.theresa-title {
    text-align: center;
    font-size: 36px;
    color: #7b24d8;
    font-weight: 800;
    margin-bottom: 10px;
    text-shadow: 0 0 8px rgba(123, 36, 216, 0.4);
}

.theresa-subtitle {
    text-align: center;
    font-size: 20px;
    color: #555;
    margin-bottom: 30px;
}

.theresa-history-container h2 {
    margin-top: 35px;
    font-size: 26px;
    color: #7b24d8;
    display: flex;
    align-items: center;
    gap: 10px;
}

.theresa-history-container p,
.theresa-history-container ul {
    line-height: 1.8;
    color: #333;
    font-size: 17px;
}

.theresa-history-container ul {
    padding-left: 25px;
}

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


/* ===============================
   FIX EXTRA WHITE SPACE ON PAGES
================================= */

section {
    padding: 60px 0 !important;    /* Normal spacing */
    min-height: auto !important;   /* Remove forced 100vh */
}

.hero,
.top-section {
    min-height: auto !important;
    padding: 80px 0 !important;    /* Keep hero bigger */
}

.empty,
.spacer,
.section-gap,
.blank,
.white-space {
    display: none !important;      /* Remove unwanted blocks */
}

/* Remove accidental margin/padding from containers */
.container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}



/* PAGE WRAPPER */
.committee-wrapper {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
}

/* TOP HEADER BLOCK */
.committee-header {
    background: linear-gradient(90deg, #7b2ff7, #f107a3);
    padding: 35px;
    color: white;
    border-radius: 14px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.committee-header h2 {
    font-size: 28px;
    margin-bottom: 8px;
    font-weight: 700;
}

.committee-header p {
    font-size: 17px;
    opacity: .9;
}

/* MAIN CARD */
.committee-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    border: 1px solid #f0f0f0;
}

/* Titles inside card */
.committee-card h3 {
    margin-top: 20px;
    font-size: 20px;
    color: #5a2eca;
}

/* Content text */
.committee-card p,
.committee-card ul {
    font-size: 17px;
    line-height: 1.8;
    color: #444;
}

/* List items */
.committee-card ul li {
    margin-bottom: 8px;
}



/* Page Wrapper */
.section-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 40px 20px;
    text-align: center;
}

/* Section Title */
.section-title {
    font-size: 32px;
    font-weight: 700;
    color: #5d22c4;
    margin-bottom: 10px;
}

.section-subtitle {
    color: #666;
    margin-bottom: 40px;
}

/* Grid Layout */
.leader-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    justify-items: center;
    width: 100%;
    margin-bottom: 70px;
}






/* Card Styling */
.leader-card {
    background: #fff;
    width: 100%;
    max-width: 450px;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: 0.3s;
}

.leader-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Image */
.leader-card img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 10px;
}

/* Name */
.leader-name {
    font-size: 20px;
    font-weight: 700;
    color: #531dbf;
    margin-bottom: 5px;
}

/* Role Text */
.leader-role {
    font-size: 15px;
    color: #444;
}



/* --- Full Background Banner --- */
.st-theresa-banner {
    position: relative;
    width: 100%;
    height: 520px;
    background: url("images/st-theresa.jpg") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Soft dark overlay for readability */
.st-theresa-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- Glowing 3D Frame --- */
.st-theresa-frame {
    padding: 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.1);
    box-shadow:
        0 0 25px rgba(255,255,255,0.5),
        0 0 60px rgba(255,200,255,0.4),
        inset 0 0 20px rgba(255,255,255,0.4);
    backdrop-filter: blur(4px);
    transform: translateY(-10px);
    transition: 0.4s ease;
}

.st-theresa-frame img {
    width: 280px;
    height: 360px;
    border-radius: 15px;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

/* Hover effect (optional) */
.st-theresa-frame:hover {
    transform: translateY(-20px) scale(1.04);
    box-shadow:
        0 0 40px rgba(255,255,255,0.7),
        0 0 80px rgba(255,180,255,0.55),
        inset 0 0 25px rgba(255,255,255,0.5);
}

/* --- Title and Subtitle --- */
.st-title {
    margin-top: 20px;
    font-size: 38px;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.st-subtitle {
    margin-top: 8px;
    font-size: 20px;
    color: #f8e9ff;
    letter-spacing: 1px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.7);
}

/* Mobile */
@media (max-width: 768px) {
    .st-theresa-banner {
        height: 600px;
        background-position: top;
    }

    .st-theresa-frame img {
        width: 220px;
        height: 290px;
    }

    .st-title {
        font-size: 28px;
    }

    .st-subtitle {
        font-size: 16px;
    }
}
.st-bio {
    font-size: 18px;
    line-height: 1.8;
    color: #f7eaff;
    margin: 12px 0;
    max-width: 900px;
    text-align: center;
}

.st-bio-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff3ff;
    margin-top: 28px;
    text-shadow: 0 0 8px rgba(255, 200, 255, 0.7);
}

.highlight {
    color: #ffccff;
    font-weight: 600;
}

.st-quote {
    font-size: 20px;
    font-style: italic;
    color: #ffeaff;
    margin: 20px auto;
    padding: 12px 25px;
    border-left: 4px solid #ff99dd;
    border-right: 4px solid #ff99dd;
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    text-shadow: 0 0 10px rgba(255, 170, 255, 0.6);
}

.st-theresa-section {
    width: 100%;
    padding: 0;
    margin: 0;
}

.st-hero-frame {
    position: relative;
    width: 100%;
    min-height: 100vh; /* Ensures all text fits */
    overflow-y: auto;  /* Enables scroll if content is long */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 40px;
    padding-bottom: 40px;
}
qa   
/* Background image fully visible */
.st-hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;        /* full-screen fit */
    z-index: -2;
}
 /* Gentle dark overlay for readability */
.st-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: -1;
}

/* Main content area */
.st-content {
    width: 90%;
    max-width: 900px;
    text-align: center;
    color: #fff;
}

/* Title */
.st-title {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 0 15px rgba(255, 188, 255, 0.8);
}

/* Subtitle */
.st-subtitle {
    font-size: 20px;
    color: #ffe3ff;
    text-shadow: 0 0 10px rgba(255, 200, 255, 0.7);
}

/* BIO TEXT CONTAINER – this fixes clipping issue */
.st-bio-container {
    margin-top: 25px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

/* Paragraph styling */
.st-bio-container p {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 18px;
    color: #ffeaff;
}


.st-section, .container, .content-area {
    overflow: visible !important;
}



.st-content-box {
    width: 100%;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.08);

    /* REMOVE height restrictions */
    height: auto;
    max-height: none;

    
    /* Better reading layout */
    line-height: 1.8;
}


/* Style inside content */
.st-full-content h3 {
    margin-top: 15px;
    color: #7a2c83;
    font-weight: 600;
}

.st-full-content p {
    line-height: 1.6;
    margin-bottom: 12px;
}

.st-full-content blockquote {
    background: #f9f0ff;
    padding: 12px 15px;
    border-left: 4px solid #7a2c83;
    margin: 10px 0;
    font-style: italic;
    border-radius: 6px;
}


.st-full-content {
    max-width: 900px;
    margin: auto;
    padding: 20px;
}


.history-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 24px;
    background: #ff4d6d;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: 0.3s;
}

.history-btn:hover {
    background: #d63252;
    transform: translateY(-3px);
}

.mass-timings {
    background: linear-gradient(to right, #fff5f7, #fff);
    padding: 40px 20px;
    text-align: center;
    border-top: 3px solid #f8a1c4;
    margin-top: 50px;
    border-radius: 12px;
}

.mass-timings h2 {
    color: #c2185b;
    font-size: 2rem;
    margin-bottom: 25px;
    text-shadow: 0 0 5px rgba(255, 0, 120, 0.2);
}

.timing-box {
    background: #ffffff;
    padding: 18px;
    margin: 15px auto;
    max-width: 450px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(255, 0, 120, 0.15);
    border-left: 6px solid #ff80ab;
}

.timing-box h3 {
    color: #d61d4e;
    margin-bottom: 8px;
}

.timing-box p {
    color: #333;
    font-size: 1.05rem;
    margin: 5px 0;
}

.special-mass-section {
    background: #ffffff;
    padding: 40px 20px;
    border-radius: 16px;
    margin-top: 40px;
    border: 3px solid #ff9acb;
    box-shadow: 0 4px 12px rgba(255, 0, 140, 0.15);
}

.special-mass-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: #d61d4e;
    margin-bottom: 25px;
    text-shadow: 0 0 6px rgba(255, 0, 140, 0.2);
}

.special-mass-list {
    list-style: none;
    padding: 0;
    max-width: 600px;
    margin: auto;
}

.special-mass-list li {
    background: #ffe6f2;
    color: #a80039;
    padding: 14px 18px;
    margin: 10px 0;
    border-radius: 10px;
    font-size: 1.15rem;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(255, 0, 160, 0.13);
    transition: 0.3s ease;
}

.special-mass-list li:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 15px rgba(255, 0, 160, 0.25);
}

.lenten-preparation {
    background: linear-gradient(135deg, #f9e6ff, #fff0f7);
    border-left: 6px solid #9b2c82;
    padding: 30px 25px;
    margin: 40px auto;
    max-width: 900px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(155, 44, 130, 0.25);
}

.lenten-preparation h2 {
    color: #7a1e5d;
    font-size: 1.9rem;
    margin-bottom: 15px;
    text-align: center;
    text-shadow: 0 0 6px rgba(155, 44, 130, 0.2);
}

.lenten-preparation p {
    color: #3d0030;
    font-size: 1.15rem;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 12px;
}

.mass-timings {
    background: linear-gradient(135deg, #ede9fe, #f5f3ff);
    border: 2px solid #7c3aed;
    padding: 35px 25px;
    margin: 50px auto;
    max-width: 700px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.3);
}

.mass-timings h2 {
    color: #5b21b6;
    font-size: 2rem;
    margin-bottom: 10px;
    text-shadow: 0 0 8px rgba(124, 58, 237, 0.3);
}

.mass-note {
    font-size: 1.1rem;
    color: #3b0764;
    margin-bottom: 20px;
}

.mass-details p {
    font-size: 1.3rem;
    color: #2e1065;
    margin: 8px 0;
    font-weight: 600;
}
.mass-intention-section {
  max-width: 800px;
  margin: 60px auto;
  padding: 40px 30px;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border-radius: 25px;
  box-shadow: 0 15px 40px rgba(124, 58, 237, 0.25);
}

.mass-intention-section h2 {
  text-align: center;
  color: #5b21b6;
  font-size: 2rem;
  margin-bottom: 10px;
}

.mass-intro {
  text-align: center;
  font-size: 1.1rem;
  color: #3b0764;
  margin-bottom: 30px;
}

.mass-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mass-form label {
  font-weight: 600;
  color: #4c1d95;
}

.mass-form input,
.mass-form select,
.mass-form textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #c4b5fd;
  font-size: 1rem;
}

.mass-form input:focus,
.mass-form select:focus,
.mass-form textarea:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 8px #a78bfa;
}

.btn-submit {
  margin-top: 15px;
  background: linear-gradient(90deg, #7c3aed, #9333ea);
  color: white;
  border: none;
  padding: 14px;
  border-radius: 30px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-submit:hover {
  transform: scale(1.05);
  background: linear-gradient(90deg, #6d28d9, #8b5cf6);
}

/* QR Section */
.qr-box {
  margin-top: 40px;
  text-align: center;
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.qr-box img {
  width: 220px;
  margin: 15px auto;
}

.qr-note {
  font-size: 0.95rem;
  color: #555;
}



/* Donation Highlight Section */
.donation-highlight {
  padding: 60px 20px;
  background: linear-gradient(135deg, #f8f3ff, #fdfcff);
  text-align: center;
}

.donation-title {
  font-size: 2.2rem;
  color: #6b21a8;
  margin-bottom: 15px;
  text-shadow: 0 0 10px rgba(107,33,168,0.3);
}

.donation-intro {
  max-width: 800px;
  margin: 0 auto 40px;
  font-size: 1.05rem;
  color: #333;
  line-height: 1.6;
}

/* Donation Cards */
.donation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 25px;
  max-width: 1100px;
  margin: auto;
}

.donation-card {
  background: #ffffff;
  padding: 25px;
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(123,36,216,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.donation-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(123,36,216,0.25);
}

.donation-card h3 {
  color: #7b24d8;
  margin-bottom: 10px;
}

.donation-card p {
  color: #444;
  font-size: 0.95rem;
}

/* Payment Box */
.payment-box {
  margin-top: 60px;
  background: #fff;
  padding: 40px 25px;
  border-radius: 20px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.payment-box h3 {
  color: #6b21a8;
  margin-bottom: 15px;
}

.payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 25px;
}

.payment-card {
  background: #f9f7ff;
  padding: 25px;
  border-radius: 18px;
  width: 300px;
  box-shadow: 0 6px 20px rgba(107,33,168,0.15);
}

.payment-card img {
  width: 180px;
  margin-top: 15px;
}

.payment-card h4 {
  color: #7b24d8;
  margin-bottom: 10px;
}

.bible-quote {
  margin-top: 30px;
  font-style: italic;
  font-size: 1.1rem;
  color: #444;
}

/* Sub Parish Section */
.subparish-section {
  padding: 60px 20px;
  background: linear-gradient(135deg, #f9f4ff, #ffffff);
  text-align: center;
}

.subparish-title {
  font-size: 2.2rem;
  color: #6b21a8;
  margin-bottom: 5px;
  text-shadow: 0 0 10px rgba(107,33,168,0.3);
}

.subparish-name {
  font-size: 1.6rem;
  color: #3b0764;
  margin-bottom: 20px;
  font-weight: 700;
}

.subparish-intro {
  max-width: 850px;
  margin: 0 auto 40px;
  font-size: 1.05rem;
  color: #333;
  line-height: 1.7;
}

/* Cards */
.subparish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  max-width: 1000px;
  margin: auto;
}

.subparish-card {
  background: #ffffff;
  padding: 25px;
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(123,36,216,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.subparish-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 35px rgba(123,36,216,0.25);
}

.subparish-card h4 {
  color: #7b24d8;
  margin-bottom: 10px;
}

.subparish-card p {
  color: #444;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Highlight Box */
.subparish-highlight {
  margin-top: 40px;
  background: linear-gradient(135deg, #ede9fe, #f5f3ff);
  padding: 25px;
  border-radius: 20px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 6px 20px rgba(107,33,168,0.15);
}

.subparish-highlight p {
  font-size: 1.05rem;
  color: #4c1d95;
  font-style: italic;
}

/* Dropdown Menu */
.nav-item {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 260px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 100;
  padding: 8px 0;
}

.dropdown-menu a {
  display: block;
  padding: 12px 18px;
  color: #4c1d95;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease;
}

.dropdown-menu a:hover {
  background: #ede9fe;
}

.nav-item:hover .dropdown-menu {
  display: block;
}
@media (max-width: 768px) {
  .dropdown-menu {
    position: static;
    box-shadow: none;
    background: transparent;
  }

  .dropdown-menu a {
    color: #fff;
    padding-left: 25px;
  }
}
/* ============================
   HOME SUB LINK – FIXED
============================ */

.nav-item {
  position: relative;
}

.sub-nav {
  display: none;
  position: absolute;
  top: 42px;
  left: 0;
  background: #ffffff;
  min-width: 280px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  z-index: 9999;
}

.sub-nav a {
  display: block;
  padding: 14px 20px;
  color: #4c1d95;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}

.sub-nav a:last-child {
  border-bottom: none;
}

.sub-nav a:hover {
  background: #ede9fe;
}

/* Show on hover */
.nav-item:hover .sub-nav {
  display: block;
}


@media (max-width: 768px) {
  .sub-nav {
    position: static;
    box-shadow: none;
    background: transparent;
  }

  .sub-nav a {
    color: #fff;
    padding-left: 25px;
  }
}


/* ===============================
   PARISH PAGE STYLING
================================ */

.parish-hero {
  text-align: center;
  padding: 60px 20px 40px;
  background: linear-gradient(135deg, #6b21a8, #8b5cf6);
  color: #fff;
}

.parish-hero h2 {
  font-size: 2.4rem;
  margin-bottom: 8px;
}

.parish-hero p {
  font-size: 1.1rem;
  opacity: 0.95;
}

/* Sections */
.parish-section {
  max-width: 950px;
  margin: 40px auto;
  padding: 0 20px;
}

.parish-section h3 {
  color: #6b21a8;
  margin-bottom: 15px;
  font-size: 1.6rem;
}

.parish-section p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #333;
}

/* Highlight Box */
.highlight-box {
  background: #f5f3ff;
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(107,33,168,0.15);
}

/* Mass Timings */
.mass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.mass-card {
  background: #fff;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.mass-card h4 {
  color: #4c1d95;
  margin-bottom: 8px;
}

/* Patron */
.patron-box {
  background: linear-gradient(135deg, #ede9fe, #fdf4ff);
  padding: 30px;
  border-radius: 18px;
}

/* Festival Highlight */
.festival-highlight {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  padding: 30px;
  border-radius: 18px;
  border-left: 6px solid #f97316;
}

.festival-highlight strong {
  color: #c2410c;
}

.festival-note {
  margin-top: 10px;
  font-style: italic;
}




/* ===============================
   MAIN MENU
================================ */
.main-nav {
  background: #4c1d95;
}

.menu {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.menu > li {
  position: relative;
}

.menu > li > a {
  display: block;
  padding: 15px 22px;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

.menu > li > a:hover {
  background: #6b21a8;
}

/* ===============================
   SUBMENU (DROPDOWN)
================================ */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  list-style: none;
  padding: 8px 0;
  margin: 0;

  /* HIDDEN BY DEFAULT */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);

  transition: all 0.25s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  border-radius: 12px;
  z-index: 999;
}

/* KEEP SUBMENU OPEN */
.has-submenu:hover > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* SUBMENU LINKS */
.submenu li a {
  display: block;
  padding: 12px 20px;
  color: #333;
  text-decoration: none;
  font-size: 0.95rem;
}

.submenu li a:hover {
  background: #ede9fe;
  color: #4c1d95;
}

/* PREVENT FLICKER GAP */
.menu > li {
  padding-bottom: 2px;
}


/* Language Switcher */
#language-switcher {
  position: fixed;
  top: 12px;
  right: 15px;
  background: #ffffff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 9999;
}

/* Hide Google branding */
.goog-logo-link,
.goog-te-gadget span {
  display: none !important;
}

.goog-te-gadget {
  color: transparent !important;
}



/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

/* HEADER */
.page-header {
  text-align: center;
  padding: 20px 10px;
  background: linear-gradient(135deg, #5a2d82, #8e44ad);
  color: #fff;
}

.page-header h1 {
  font-size: 28px;
}

.subtitle {
  font-size: 14px;
  opacity: 0.9;
}

/* HERO IMAGE */
.hero img {
  width: 100%;
  height: 55vh;
  object-fit: cover;
  display: block;
}

/* CONTAINER */
.container {
  max-width: 1100px;
  margin: auto;
  padding: 25px 15px;
}

/* INFO BOX */
.info-box {
  background: #f9f7fc;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.info-box h2 {
  color: #5a2d82;
  margin-bottom: 12px;
}

.info-box ul li {
  margin-bottom: 8px;
}

/* HIGHLIGHT BOX */
.highlight {
  background: linear-gradient(135deg, #ede2ff, #f5ecff);
  border-left: 6px solid #8e44ad;
}

/* PRIEST BOX */
.priest-box {
  background: #fff;
}

.priest-card {
  display: flex;
  align-items: center;
  gap: 20px;
}

.priest-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #8e44ad;
}

.priest-card h3 {
  color: #5a2d82;
}

/* FOOTER */
.footer {
  text-align: center;
  padding: 15px;
  background: #2c2c2c;
  color: #fff;
  font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .hero img {
    height: 40vh;
  }

  .priest-card {
    flex-direction: column;
    text-align: center;
  }
}


/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

/* HEADER */
.page-header {
  text-align: center;
  padding: 25px 10px;
  background: linear-gradient(135deg, #5a2d82, #8e44ad);
  color: #fff;
}

.page-header h1 {
  font-size: 30px;
  margin-bottom: 5px;
}

.subtitle {
  font-size: 15px;
  opacity: 0.95;
}

/* HERO IMAGE */
.hero img {
  width: 100%;
  height: 55vh;
  object-fit: cover;
  display: block;
}

/* MAIN CONTAINER */
.container {
  max-width: 1000px;
  margin: auto;
  padding: 30px 15px;
  text-align: center; /* ✅ CENTER ALL TEXT */
}

/* INFO BOX */
.info-box {
  background: #f9f7fc;
  padding: 25px;
  border-radius: 14px;
  margin: 0 auto 25px;
  max-width: 850px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.info-box h2 {
  color: #5a2d82;
  margin-bottom: 15px;
}

.info-box p {
  line-height: 1.7;
  font-size: 16px;
}

.info-box ul {
  list-style: none;
  padding: 0;
}

.info-box ul li {
  margin-bottom: 10px;
  font-size: 16px;
}

/* HIGHLIGHT BOX */
.highlight {
  background: linear-gradient(135deg, #ede2ff, #f6efff);
  border-left: none;
  border-top: 5px solid #8e44ad;
}

/* PRIEST BOX */
.priest-box {
  background: #fff;
}

/* PRIEST CARD */
.priest-card {
  display: flex;
  flex-direction: column; /* ✅ CENTER LAYOUT */
  align-items: center;
  gap: 15px;
}

.priest-card img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #8e44ad;
}

.priest-card h3 {
  color: #5a2d82;
  margin-bottom: 5px;
}

.priest-card p {
  max-width: 600px;
  font-size: 15px;
}

/* FOOTER */
.footer {
  text-align: center;
  padding: 15px;
  background: #2c2c2c;
  color: #fff;
  font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .hero img {
    height: 40vh;
  }
}


/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

/* HEADER */
.page-header {
  text-align: center;
  padding: 20px 10px;
  background: linear-gradient(135deg, #5a2d82, #8e44ad);
  color: #fff;
}

.page-header h1 {
  font-size: 28px;
}

.subtitle {
  font-size: 14px;
  opacity: 0.9;
}

/* HERO IMAGE */
.hero img {
  width: 100%;
  height: 55vh;
  object-fit: cover;
  display: block;
}

/* CONTAINER */
.container {
  max-width: 1100px;
  margin: auto;
  padding: 25px 15px;
}

/* INFO BOX */
.info-box {
  background: #f9f7fc;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.info-box h2 {
  color: #5a2d82;
  margin-bottom: 12px;
}

.info-box ul li {
  margin-bottom: 8px;
}

/* HIGHLIGHT BOX */
.highlight {
  background: linear-gradient(135deg, #ede2ff, #f5ecff);
  border-left: 6px solid #8e44ad;
}

/* PRIEST BOX */
.priest-box {
  background: #fff;
}

.priest-card {
  display: flex;
  align-items: center;
  gap: 20px;
}

.priest-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #8e44ad;
}

.priest-card h3 {
  color: #5a2d82;
}

/* FOOTER */
.footer {
  text-align: center;
  padding: 15px;
  background: #2c2c2c;
  color: #fff;
  font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .hero img {
    height: 40vh;
  }

  .priest-card {
    flex-direction: column;
    text-align: center;
  }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", sans-serif;
  background: #f8f9ff;
  color: #333;
  text-align: center;
}

/* HEADER */
.page-header {
  padding: 50px 20px 30px;
  background: linear-gradient(135deg, #6a0dad, #8b5cf6);
  color: white;
  border-radius: 0 0 30px 30px;
}

.page-header h1 {
  font-size: 2.4rem;
}

.subtitle {
  margin-top: 8px;
  font-size: 1.1rem;
  opacity: 0.95;
}

/* CHURCH IMAGE */
.church-image {
  margin: 30px auto;
}

.church-image img {
  width: 90%;
  max-width: 900px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* COMMON HIGHLIGHT BOX */
.highlight-box {
  max-width: 850px;
  margin: 30px auto;
  padding: 30px 25px;
  background: white;
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(106, 13, 173, 0.2);
}

.highlight-box h2 {
  color: #6a0dad;
  margin-bottom: 15px;
  font-size: 1.6rem;
}

.highlight-box p {
  font-size: 1.05rem;
  line-height: 1.7;
}

/* SPECIAL COLORS */
.special-prayer {
  border-left: 6px solid #22c55e;
}

.festival {
  border-left: 6px solid #f59e0b;
}

/* PRIEST SECTION */
.priest-box {
  max-width: 900px;
  margin: 40px auto 60px;
}

.priest-box h2 {
  font-size: 1.8rem;
  color: #6a0dad;
  margin-bottom: 20px;
}

.priest-card {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.35);
  display: inline-block;
}

.priest-card img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  margin-bottom: 15px;
}

.priest-card h3 {
  font-size: 1.4rem;
  color: #4c1d95;
}

.priest-card p {
  font-size: 1rem;
  margin-top: 5px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }

  .highlight-box {
    margin: 20px 15px;
  }
}



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

body {
  font-family: "Segoe UI", sans-serif;
  background: #f9f8ff;
  color: #333;
  text-align: center;
}

/* HEADER */
.page-header {
  padding: 55px 20px;
  background: linear-gradient(135deg, #6a0dad, #8b5cf6);
  color: white;
  border-radius: 0 0 30px 30px;
}

.page-header h1 {
  font-size: 2.6rem;
}

.subtitle {
  margin-top: 10px;
  font-size: 1.1rem;
  opacity: 0.95;
}

/* ANBINAM SECTION */
/* ===== Global ===== */
body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  background: #fafafa;
  color: #333;
  text-align: center;
}

.section {
  padding: 60px 20px;
}

.light-bg {
  background: #f5f0ff;
}

/* ===== Header ===== */
.page-header {
  background: linear-gradient(135deg, #5a189a, #7b2cbf);
  color: white;
  padding: 70px 20px;
}

.page-header h1 {
  font-size: 2.6rem;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 1.1rem;
  opacity: 0.95;
}

/* ===== Section Title ===== */
.section-title {
  font-size: 2rem;
  color: #5a189a;
  margin-bottom: 40px;
}

/* ===== Anbiyam Names ===== */
.anbiyam-names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.name-card {
  background: white;
  padding: 18px 30px;
  border-radius: 30px;
  font-weight: 600;
  color: #5a189a;
  box-shadow: 0 8px 20px rgba(90,24,154,0.15);
  transition: transform 0.3s ease;
}

.name-card:hover {
  transform: translateY(-5px);
}

/* ===== Image Gallery ===== */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  max-width: 1000px;
  margin: auto;
}

.image-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* ===== Procedure Box ===== */
.procedure-box {
  max-width: 700px;
  margin: auto;
  background: white;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(123,44,191,0.2);
}

.procedure-box ul {
  list-style: none;
  padding: 0;
}

.procedure-box li {
  padding: 12px 0;
  font-size: 1.1rem;
  border-bottom: 1px dashed #ddd;
}

.procedure-box li:last-child {
  border-bottom: none;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }

  .section-title {
    font-size: 1.6rem;
  }
}
/* GLOBAL */
body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  background: #fafafa;
  color: #333;
  text-align: center;
}

.section {
  padding: 60px 20px;
}

.light-bg {
  background: #f5f0ff;
}

/* HEADER */
.page-header {
  background: linear-gradient(135deg, #5a189a, #7b2cbf);
  color: white;
  padding: 70px 20px;
}

.page-header h1 {
  font-size: 2.6rem;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 1.1rem;
  opacity: 0.95;
}

/* TITLES */
.section-title {
  font-size: 2rem;
  color: #5a189a;
  margin-bottom: 35px;
}

/* HIGHLIGHT BOX */
.highlight-box {
  max-width: 700px;
  margin: auto;
  background: white;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(123,44,191,0.2);
}

.highlight-box ul {
  list-style: none;
  padding: 0;
}

.highlight-box li {
  padding: 8px 0;
  font-weight: 600;
}

.highlight-box .note {
  margin-top: 20px;
  color: #6a1b9a;
  font-weight: 600;
}

/* SACRAMENTS GRID */
.sacraments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: auto;
}

.sacrament-card {
  background: white;
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.sacrament-card:hover {
  transform: translateY(-6px);
}

.sacrament-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 15px;
  margin-bottom: 15px;
}

.sacrament-card h3 {
  color: #5a189a;
  margin-bottom: 10px;
}

.sacrament-card p {
  font-size: 1rem;
  line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }

  .section-title {
    font-size: 1.6rem;
  }
}


/* Anbinam Bottom Statement */
.anbinam-footer-note {
  background: linear-gradient(135deg, #5a189a, #7b2cbf);
  color: #ffffff;
  text-align: center;
  padding: 35px 20px;
  margin-top: 60px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  box-shadow: 0 -8px 25px rgba(123, 44, 191, 0.4);
}

.anbinam-footer-note p {
  max-width: 900px;
  margin: auto;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.4px;
}