@import url('https://fonts.googleapis.com/css2?family=Italianno&family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&family=Lobster&family=Luckiest+Guy&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Livvic:wght@600&family=Poppins&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    outline: none;
    border: none;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* Prevent horizontal scroll from overflow */
}


/* Preloader */
#onload-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4a2e0e 0%, #4a2e0e 50%, #f8f6f2 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.8s ease-out;
}

#onload-main-content {
    display: none;              /* hidden until preloader finishes */
    background: #f8f6f2;        /* same as your site background */
}

/* Preloader container */
.onload-preloader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.onload-preloader-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, #4a2e0e, #664928, #503619);
    z-index: -1;
    border-radius: 25px;
    animation: onload-border-anim 3s linear infinite;
}

#onload-preloader-logo {
    width: 150px;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
    animation: onload-zoomInOut 2.5s infinite ease-in-out;
}

.onload-spinner {
    width: 60px;
    height: 60px;
    position: relative;
    margin-bottom: 1.5rem;
}

.onload-spinner-inner {
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top: 3px solid #4a2e0e;
    border-radius: 50%;
    animation: onload-spin 1.5s linear infinite;
}

.onload-spinner-inner::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 3px solid transparent;
    border-top: 3px solid #4a2e0e;
    border-radius: 50%;
    animation: onload-spin 2s linear infinite;
}

.onload-loading-text {
    font-size: 1.2rem;
    color: #4a2e0e;
    margin-top: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    font-family: livvic, sans-serif;
}

.onload-progress-container {
    width: 200px;
    height: 5px;
    background: rgba(44, 92, 31, 0.2);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 1rem;
}

.onload-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #4a2e0e, #4d3b26);
    border-radius: 10px;
    transition: width 0.4s ease;
}

/* Particles */
.onload-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.onload-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: onload-float 10s linear infinite;
}

/* Animations */
@keyframes onload-zoomInOut {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.15) rotate(5deg); }
}

@keyframes onload-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes onload-float {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(calc(-100px + 200px * var(--x)));
        opacity: 0;
    }
}

@keyframes onload-border-anim {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Responsive */
@media (max-width: 768px) {
    #onload-preloader-logo { width: 120px; }
    .onload-spinner { width: 50px; height: 50px; }
    .onload-preloader-container { padding: 2rem; }
}







/* Main Header Styles */
.main-header {
  padding: .5rem 0;
  text-align: center;
  width: 100%;
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: larger;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* Ensures proper wrapping on smaller screens */
  flex-direction: column;
}

.main-header img {
  width: 10%;
  max-width: 100px; /* Ensures the image does not become too large on larger screens */
}

/* Responsive Styles */
@media (max-width: 768px) {
  .main-header {
    font-size: medium; /* Adjust font size for smaller screens */
    flex-direction: column; /* Stack the elements vertically */
  }

  .main-header img {
    width: 15%; /* Adjust image size for tablets */
    max-width: 80px;
  }
}

@media (max-width: 480px) {
  .main-header {
    padding: 1rem 0;
    font-size: small; /* Further adjust font size for mobile screens */
  }

  .main-header img {
    width: 20%; /* Adjust image size for smaller devices */
    max-width: 60px;
    margin-bottom: .5rem;
  }
}








  



/* Main Navbar Styles */
#navbar {
    background-color: #ECDFCC; /* Light background */
    width: 100%;
    display: flex;
    justify-content: center; /* Center content by default (for desktop) */
    align-items: center; /* Vertically align items */
    font-family: 'Poppins', sans-serif;
    position: sticky;
    top: 0;
    z-index: 1000; /* Higher z-index for main navbar */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* More prominent shadow for depth */
    padding: 0 1.5rem; /* Add some horizontal padding to the navbar itself */
    height: 70px; /* Fixed height for the navbar */
    
}

.navbar_bag {
    display: flex;
    flex-direction: row;
    flex-grow: 1; /* Allow navbar_bag to take available space */
    justify-content: center; /* Center its own items */
    align-items: center;
    height: 100%; /* Take full height of parent */
}

#navbar a {
    color: #4a2e0e; /* Rich brown color for heading */
    text-decoration: none;
    font-size: 1.1rem;
    position: relative;
    display: flex; /* IMPORTANT: Use flex to align icon and text */
    align-items: center; /* Vertically center icon and text */
    gap: 0.5rem; /* Space between icon and text */
    padding: 0.7em 1.2rem;
    font-weight: 600; /* Slightly bolder */
    transition: color 0.3s ease, transform 0.2s ease; /* Smooth color and transform transition */
}

/* Main Navbar Link Hover Effect */
#navbar a::before { /* Re-purposing ::before for the hover underline */
    content: "";
    position: absolute;
    left: 50%; /* Start from center */
    transform: translateX(-50%); /* Center the line */
    width: 0; /* Hidden by default */
    height: 3px; /* Slightly thicker line */
    background: #7a4f21; /* A slightly different shade for hover */
    bottom: 5px;
    border-radius: 5px;
    transition: width 0.4s ease, background 0.3s ease; /* Animate width */
    opacity: 0;
}

#navbar a:hover::before {
    width: calc(100% - 20px); /* Line covers most of the link width */
    opacity: 1;
    background: #4a2e0e; /* Main brown on hover */
}

#navbar a:hover {
    color: #8c5b2f; /* Lighter brown on hover */
    transform: translateY(-2px); /* Subtle lift effect */
}

#navbar a.active {
    color: #4a2e0e;
    /* You might want a default visual indicator for active link here too */
}


/* Dropdown Styles - General (applies to both, can be overridden by specific IDs) */
.dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.dropdown-content {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    background-color: rgba(236, 223, 204, 0.98);
    width: 950px; /* Default width */
    max-width: 95vw;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.3);
    z-index: 1050;
    gap: 2rem;
    padding: 2rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Specific Dropdown Styles (Override general styles if needed) */
#about-dropdown .dropdown-content {
    /* Example: If you wanted a different width for 'About' */
    /* width: 800px; */
    /* Example: If you wanted a different background color */
    /* background-color: rgba(200, 220, 240, 0.98); */
    left: 250%;
    width: 1100px;
    
}

#updates-dropdown .dropdown-content {
    /* Example: If you wanted a different gap for 'Updates and News' */
    /* gap: 1.5rem; */
    left: 100%;
    width: 1100px;
}


/* Dropdown Menus */
.dropdown-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between dropdown items */
}

/* Styling for each dropdown item (link + description) */
.dropdown-item {
    position: relative; /* Needed for absolute positioning of the stretched link */
    /* No padding here, padding moved to the <a> tag */
    border-bottom: 1px solid rgba(74, 46, 14, 0.1); /* Subtle separator between items */
    transition: background-color 0.3s ease, transform 0.2s ease;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer; /* Indicate it's clickable */
}

.dropdown-item:last-child {
    border-bottom: none; /* No border for the last item */
}

.dropdown-item:hover {
    background-color: rgba(74, 46, 14, 0.05); /* Light background on hover */
    transform: translateX(5px); /* Gentle slide effect */
}

/* Make the <a> tag cover the entire dropdown-item */
.dropdown-item a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Make the link itself a flex container */
    flex-direction: column; /* STACKS THE SPAN AND PARAGRAPH */
    justify-content: center; /* Center content vertically within the stretched link */
    text-decoration: none;
    color: #4a2e0e; /* Main brown color */
    padding: 0.5rem 1.5rem; /* Padding for the content inside the stretched link */
    box-sizing: border-box; /* Ensure padding is included in width/height */
    /* Removed padding-left from here as it's now on the span */
    /* Removed padding-right from here as it's now on the span */
}

.dropdown-item a:hover {
    color: #8c5b2f; /* Lighter brown on hover */
}

/* Styling for the icon and main text line */
.dropdown-item a .dropdown-link-content {
    display: flex; /* Make this a flex container */
    align-items: center; /* Vertically align icon and text */
    gap: 0.7rem; /* Space between icon and text */
    font-weight: 600; /* Make link text bolder */
    font-size: 1.05rem; /* Ensure consistent font size */
    color: #4a2e0e; /* Ensure text color is consistent */
    /* No padding here, padding from parent <a> applies */
}

.dropdown-item a .dropdown-link-content i {
    font-size: 1.1em; /* Slightly larger icon */
    color: #7a4f21; /* Accent color for icons */
    /* margin-right: 0.7rem; -- Removed, now handled by gap on parent span */
    transition: color 0.3s ease;
}

.dropdown-item:hover a .dropdown-link-content i {
    color: #4a2e0e; /* Change icon color on item hover */
}

/* Styling for the paragraph description */
.dropdown-item a p { /* Target the paragraph inside the stretched link */
    font-size: 0.85rem; /* Smaller font for description */
    color: #6d4d29; /* Slightly darker brown for description */
    margin: 0; /* Remove default paragraph margin */
    padding-left: calc(1.1em + 0.7rem); /* Indent description to align with link text (icon size + gap) */
    line-height: 1.4;
    padding-top: 0.2rem; /* Small space between link text and description */
}


/* Dropdown Image Styling */
.dropdown-image {
    flex: 0 0 250px; /* Fixed width for image column, or adjust as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10px; /* Rounded corners for the image container */
    
}

.dropdown-image img {
    width: 100%; /* Make image fill its container */
    height: auto;
    display: block;
    object-fit: cover; /* Cover the area, cropping if necessary */
    border-radius: 8px; /* Slightly rounded corners for the image itself */
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
    display: flex; /* Show flex content */
    justify-content: flex-start;
    visibility: visible;
    animation: dropdownSlide 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; /* Smoother animation curve */
}

/* Keyframe Animation */
@keyframes dropdownSlide {
    0% {
        opacity: 0;
        transform: translate(-50%, -15px); /* Starts slightly above and off-center */
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0); /* Ends in place and centered */
    }
}


/* Hamburger Menu Icon */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 0.35rem; /* Slightly smaller gap */
    justify-content: center;
    align-items: center;
    width: 40px; /* Wider click area */
    height: 40px; /* Taller click area */
    z-index: 2000; /* Above everything except potentially the sidenav itself */
    border-radius: 50%; /* Make it round */
    transition: background-color 0.3s ease; /* Smooth background transition */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.ssmd-admin-login-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: white;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 50px;
  padding: 12px;
  width: 50px;
  overflow: hidden;
  white-space: nowrap;
  transition: all 2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  z-index: 2000;
  color: #4a2e0e;
}

.ssmd-admin-login-btn i {
  font-size: 1.2rem;
  color: #4a2e0e;
}

.ssmd-admin-login-btn .ssmd-admin-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, width 0.3s ease;
}




.hamburger:hover {
    background-color: rgba(74, 46, 14, 0.1); /* Light hover effect */
}

.hamburger span {
    width: 28px; /* Slightly wider bars */
    height: 3px;
    background: #4a2e0e;
    border-radius: 5px;
    transition: all 0.3s ease-in-out; /* Smooth transition for X animation */
}

/* Hamburger X animation */
.hamburger.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
    opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* Sidenav */
.sidenav {
    height: 100%;
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed;
    z-index: 3000; /* Highest z-index for the sidebar */
    top: 0;
    left: 0;
    background-color: rgba(236, 223, 204, 0.98); /* Almost opaque */
    background-image: radial-gradient(circle at top left, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4); /* Deeper shadow */
    overflow-x: hidden;
    padding-top: 80px; /* Adjust as needed based on your navbar height */
    transition: width 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) ; /* Smoother slide transition */
    padding-bottom: 1.5rem;
    border-right: 1px solid rgba(74, 46, 14, 0.3); /* More defined border */
}

/* The navigation menu links */
.sidenav a {
    padding: 14px 8px 14px 32px; /* Increased vertical padding for better touch targets */
    text-decoration: none;
    font-size: 17px; /* Slightly larger font for readability */
    color: #4a2e0e;
    display: block;
    font-family: 'livvic', sans-serif;
    font-weight: bold;
    position: relative;
    overflow: hidden;
    margin-bottom: 5px; /* Small space between links */
}

.sidenav a:hover {
    color: #f0f0f0; /* Light text on hover */
    background-color: #7a4f21; /* Solid background on hover */
    transform: translateX(10px); /* More noticeable shift on hover */
    border-radius: 5px; /* Slight roundness on hover */
}

/* Category Headers */
.sidenav p {
    font-family: 'italianno', cursive;
    padding: 18px 8px 18px 32px; /* More padding */
    font-size: 34px; /* Larger size */
    color: #fff; /* White text for contrast */
    background: linear-gradient(to right, #4a2e0e, #7a4f21); /* Gradient background */
    border-bottom: 2px solid rgba(255, 255, 255, 0.3); /* Lighter border */
    text-align: center;
    font-weight: bold;
    margin-top: 25px; /* More space above categories */
    margin-bottom: 15px; /* More space below categories */
    letter-spacing: 1.5px; /* Increased letter spacing */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
    border-radius: 8px; /* Rounded corners for headers */
    margin-left: 15px;
    margin-right: 15px;
}



.sidenav .ssmd-admin-login-btn:hover {
    
    transform: scale(1.1) rotate(90deg); /* More pronounced effect */
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}


/* Responsive Styles */
@media (max-width: 768px) {
    .navbar_bag {
        display: none; /* Hide main navigation links */
    }
    .ssmd-admin-login-btn{
      display: none !important;
    }
    

    #navbar {
        justify-content: flex-end; /* Push hamburger to the right */
        padding-right: 1.5rem; /* Add consistent right padding */
    }
    .sidenav .ssmd-admin-login-btnsidenav {
        top: 0px;
        right: -200px;
        font-size: 12px;
        padding: 1rem;
        background-color: white;
        border: 2px solid #4a2e0e;

    }

    .hamburger {
        display: flex; /* Show hamburger icon */
    }

    /* Adjust sidenav width for smaller screens */
    .sidenav {
        width: 0; /* Ensures it starts closed */
        max-width: 70vw; /* Limit sidebar width on smaller screens */
        padding-top: 70px; /* Adjust padding if navbar height changes */
    }

    /* Make active sidenav wider on small screens */
    .sidenav.is-active {
        width: 70vw;
    }
}

@media (max-width: 480px) {
    #navbar {
        padding-right: 1rem;
    }
    .sidenav {
        max-width: 80vw; /* Wider sidebar on very small screens */
    }
    .ssmd-admin-login-btn{
      display: none !important;
    }

    .sidenav.is-active {
        width: 80vw;
    }

    .sidenav .ssmd-admin-login-btnsidenav {
        top: 0px;
        right: -200px;
        font-size: 12px;
        padding: 1rem;
        background-color: white;
        border: 2px solid #4a2e0e;

    }
     .sidenav p {
        font-size: 28px; /* Smaller font for headers on very small screens */
        padding: 15px 8px 15px 25px;
    }
    .sidenav a {
        font-size: 16px;
        padding: 12px 8px 12px 25px;
    }
}














/* Main hero section container */
        .ssmd-hero-section {
            position: relative;
            width: 100%;
            height: 100vh; /* Full viewport height for impressive first view */
            overflow: hidden; /* Ensure video and content stay within bounds */
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        /* NEW: Placeholder Image Styling */
/* NEW: Placeholder Image Styling (now for an <img> tag) */
.ssmd-hero-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area */
    z-index: 1; /* Placeholder is now at z-index 1 */
    transition: opacity 1s ease-out; /* Smooth fade out if you decide to hide it */
}

/* Video Background Styling */
.ssmd-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video covers the area without distortion */
    z-index: 2; /* Same z-index as placeholder, video will fade over it */
    opacity: 0; /* Start invisible */
    transition: opacity 1s ease-in; /* Smooth fade-in for the video */
}

     

        /* Dark transparent overlay for readability */
        .ssmd-hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6); /* Darker overlay for better text contrast */
            z-index: 0; /* Above video, below content */
            animation: ssmd-hero-fadeIn 1.5s ease-out forwards; /* Fade in overlay */
        }


        

        /* Main content container (glassmorphism box) */
.ssmd-hero-content-box {
    position: relative; /* Relative to the hero section */
    z-index: 2; /* Ensure it's above the overlay */
    padding: 3.5rem 4.5rem; /* Increased padding for more presence */
    border-radius: 1.5rem; /* More rounded corners */
    background: rgba(255, 255, 255, 0.15); /* Slightly more opaque glassmorphism */
    box-shadow: 0 10px 40px 0 rgba(31, 38, 135, 0.4); /* Enhanced shadow */
    backdrop-filter: blur(15px); /* Stronger blur effect */
    -webkit-backdrop-filter: blur(5px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3); /* More prominent border */

    /* Default state: hidden, at animation start point */
    opacity: 0;
    transform: scale(0.8);
    /* No animation or transition here by default */
}





        

/* Welcome text styling */
.ssmd-hero-welcome-text {
    font-family: 'Lobster', cursive; /* Distinct, friendly font */
    font-size: clamp(2.5rem, 7vw, 6rem); /* Responsive font size */
    color: #f0f0f0; /* Lighter color for welcome */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7); /* Stronger text shadow */
    margin-bottom: 0.5rem;
    line-height: 1.1;

    /* Default state: hidden, at animation start point */
    opacity: 0;
    transform: translateX(-50px);
    /* No animation or transition here by default */
}

/* Church name styling */
.ssmd-hero-church-name {
    font-family: 'Livvic', serif; /* Elegant serif font */
    font-size: clamp(2rem, 5vw, 4.5rem); /* Responsive font size */
    color: #fddc9f; /* Gold accent color */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); /* Text shadow */
    margin-top: 0;
    margin-bottom: 1.5rem; /* Space below church name */
    line-height: 1.2;

    /* Default state: hidden, at animation start point */
    opacity: 0;
    transform: translateX(50px);
    /* No animation or transition here by default */
}

/* Subtitle/Motto styling */
.ssmd-hero-motto {
    font-family: 'Italianno', cursive; /* Script font for motto */
    font-size: clamp(1.8rem, 3.5vw, 3rem); /* Responsive font size */
    color: #ecdfcc; /* Creamy color for motto */

    /* Default state: hidden, at animation start point */
    opacity: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    /* No animation or transition here by default */
}

.cta-incredible {
  all: unset; /* Removes all default browser styles */
  width: 100px; /* Consider using relative units or responsive classes for better adaptability */
  height: 30px; /* Consider using relative units or responsive classes for better adaptability */
  font-size: 16px;
  background: transparent;
  border: none;
  position: relative;
  color: #f0f0f0; /* Text color */
  margin-top: 1rem;
  cursor: pointer;
  font-family: livvic;
  z-index: 1;
  padding: 10px 50px;
  display: flex; /* Use flexbox for centering content */
  align-items: center; /* Vertically center content */
  justify-content: center; /* Horizontally center content */
  white-space: nowrap; /* Prevent text from wrapping */
  user-select: none; /* Disable text selection */
  -webkit-user-select: none; /* For Webkit browsers */
  touch-action: manipulation; /* Improves touch responsiveness */
  text-decoration: none; /* Remove underline from the link */
}

.cta-incredible::after,
.cta-incredible::before {
  content: ''; /* Required for pseudo-elements */
  position: absolute; /* Position relative to the button */
  bottom: 0;
  right: 0;
  z-index: -99999; /* Place behind the button text */
  transition: all .4s; /* Smooth transition for all properties */
}

.cta-incredible::before {
  transform: translate(0%, 0%); /* Initial position of the main background */
  width: 100%;
  height: 100%;
  background: #28282d; /* Dark background color */
  border-radius: 10px; /* Rounded corners for the main background */
}

.cta-incredible::after {
  transform: translate(10px, 10px); /* Initial offset for the smaller, blurred element */
  width: 35px;
  height: 35px;
  background: #ffffff15; /* Semi-transparent white with low opacity */
  backdrop-filter: blur(5px); /* Apply blur effect */
  -webkit-backdrop-filter: blur(5px); /* For Webkit browsers */
  border-radius: 50px; /* Circular shape for the smaller element */
}

.cta-incredible:hover::before {
  transform: translate(5%, 20%); /* Slightly move and expand the main background on hover */
  width: 110%;
  height: 110%;
}

.cta-incredible:hover::after {
  border-radius: 10px; /* Change to rounded rectangle on hover */
  transform: translate(0, 0); /* Move to align with the main button on hover */
  width: 100%;
  height: 100%;
}

.cta-incredible:active::after {
  transition: 0s; /* No transition on click for immediate feedback */
  transform: translate(0, 5%); /* Slight downward shift on click */
}

/* Keyframe Animations (keep these as they are) */
@keyframes ssmd-hero-scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ssmd-hero-slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ssmd-hero-slideInRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ssmd-hero-fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes ssmd-hero-fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* NEW CLASS: Apply this class to the container to trigger animations */
.ssmd-hero-content-box.play-hero-animations {
    animation: ssmd-hero-scaleIn 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Apply animations to children with delays when parent has 'play-hero-animations' */
.ssmd-hero-content-box.play-hero-animations .ssmd-hero-welcome-text {
    animation: ssmd-hero-slideInLeft 1.5s ease-out forwards;
}

.ssmd-hero-content-box.play-hero-animations .ssmd-hero-church-name {
    animation: ssmd-hero-slideInRight 1.5s ease-out forwards 0.3s;
}

.ssmd-hero-content-box.play-hero-animations .ssmd-hero-motto {
    animation: ssmd-hero-fadeIn 2s ease forwards 0.8s;
}

.ssmd-hero-content-box.play-hero-animations .ssmd-hero-cta-button {
    animation: ssmd-hero-fadeInUp 1.5s ease-out forwards 1.2s;
}

/* NEW CLASS: Instantly show elements when this class is present (for subsequent visits) */
.ssmd-hero-content-box.show-hero-instantly,
.ssmd-hero-content-box.show-hero-instantly .ssmd-hero-welcome-text,
.ssmd-hero-content-box.show-hero-instantly .ssmd-hero-church-name,
.ssmd-hero-content-box.show-hero-instantly .ssmd-hero-motto,
.ssmd-hero-content-box.show-hero-instantly .ssmd-hero-cta-button {
    opacity: 1 !important; /* Force visibility */
    transform: none !important; /* Force final position */
    animation: none !important; /* Disable any animations */
    transition: none !important; /* Disable any transitions */
}















        /* Main Overlay Container */
        .ssmd-home-welcome-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.90); /* Dark background with transparency */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999; /* Ensure it's on top of everything */
            opacity: 0; /* Start hidden for fade-in animation */
            transition: opacity 1s ease-in-out; /* Smooth fade-in/out */
            overflow: hidden; /* Prevent content overflow */
        }

        /* Active state for the overlay */
        .ssmd-home-welcome-overlay.active {
            opacity: 1;
        }

        /* Hidden state for the overlay */
        .ssmd-home-welcome-overlay.hidden {
            opacity: 0;
            pointer-events: none; /* Disable interaction when hidden */
        }

        /* Overlay Content Box (Glassmorphism inspired) - now has background image */
        .ssmd-home-welcome-content-box {
            /*background-image: url('IMAGES/silhouette-catholic-cross-sunrise.jpg'); /* Background image moved here */
            background-size: cover;
            background-position: center;
            border-radius: 1.5rem; /* Rounded corners */
            box-shadow: 0 15px 50px rgba(0, 0, 0.5); /* Stronger shadow for depth */
            animation: ssmd-home-content-scale-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; /* Scale-in animation */
            opacity: 0; /* Start hidden for animation */
            transform: scale(0.8);
            display: flex; /* Use flexbox to center inner content */
            justify-content: center;
            align-items: center;
            padding: 0; /* No padding on this container, inner div handles it */
            position: relative; /* For positioning inner overlay */
            overflow: hidden; /* Ensure content stays within rounded corners */
            max-width: 90%; /* Limit overall width */
            max-height: 90%; /* Limit overall height */
        }

        /* Inner content wrapper for glassmorphism effect on top of image */
        .ssmd-home-welcome-content-inner {
            display: flex; /* Flex container for left and right sections */
            gap: 2rem; /* Space between the two halves */
            padding: 3rem 4rem; /* Generous padding for content */
            background: rgb(255, 255, 255); /* Dark overlay for text readability */
            backdrop-filter: blur(10px); /* Frosted glass effect */
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2); /* Light border */
            border-radius: 1.5rem; /* Match outer box radius */
            width: 100%; /* Take full width of parent */
            height: 100%; /* Take full height of parent */
            align-items: center; /* Vertically align items */
            color: white; /* Ensure text is white */
        }

        /* Left section for priest image */
        .ssmd-home-welcome-content-left {
            flex: 1; /* Takes one part of the space */
            max-width: 250px; /* Max width for the image container */
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0; /* Prevent shrinking */
        }

        .ssmd-home-welcome-content-left img {
            width: 120%;
            height: auto;
            border-radius: 50%; /* Circular image */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Shadow for the image */
            object-fit: cover; /* Ensure image covers the circle */
            aspect-ratio: 1 / 1; /* Maintain aspect ratio for circular image */
            
        }

        /* Right section for welcome text */
        .ssmd-home-welcome-content-right {
            flex: 2; /* Takes two parts of the space */
            text-align: left;
            padding-left: 1rem; /* Add some padding if needed */
        }

        /* Welcome Text */
        .ssmd-home-welcome-text {
            font-family: 'Playfair Display', serif; /* Elegant, impactful font */
            font-size: clamp(2rem, 5vw, 4.5rem); /* Adjusted font size for new layout */
            color: #4a2e0e; /* Gold accent color */
            margin-bottom: 0.5rem;
            line-height: 1.1;
            
        }

        /* Church Name */
        .ssmd-home-church-name {
            font-family: 'Poppins', sans-serif;
            font-size: clamp(1.5rem, 3.5vw, 3.5rem); /* Adjusted font size */
            color: black;
            margin-top: 0;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            
        }

        /* Motto/Tagline */
        .ssmd-home-motto {
            font-family: 'Italianno', cursive; /* Script font for motto */
            font-size: clamp(1.2rem, 2.5vw, 2.5rem); /* Adjusted font size */
            color: #4a2e0e; /* Creamy color */
            margin-bottom: 0; /* Remove bottom margin as it's the last element */
        }

        /* Close Button */
        .ssmd-home-close-button {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 3rem;
            color: #fff;
            cursor: pointer;
            transition: color 0.3s ease, transform 0.3s ease;
            z-index: 10000; /* Ensure it's above everything */
            
        }

        .ssmd-home-close-button:hover {
            color: #fddc9f; /* Gold on hover */
            transform: rotate(90deg);
        }

        /* Animations */
        @keyframes ssmd-home-content-scale-in {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }

        /* Responsive Adjustments */
        @media (max-width: 1024px) {
            .ssmd-home-welcome-content-inner {
                padding: 2.5rem 3.5rem;
                gap: 1.5rem;
            }
            .ssmd-home-welcome-text {
                font-size: clamp(1.8rem, 4.5vw, 4rem);
            }
            .ssmd-home-church-name {
                font-size: clamp(1.2rem, 3.5vw, 3rem);
            }
            .ssmd-home-motto {
                font-size: clamp(1rem, 2.2vw, 2rem);
            }
            .ssmd-home-close-button {
                font-size: 2.5rem;
                top: 15px;
                right: 20px;
            }
        }

        @media (max-width: 768px) {
            .ssmd-home-welcome-content-inner {
                flex-direction: column; /* Stack content vertically */
                padding: 2rem 2.5rem;
                border-radius: 1rem;
                text-align: center; /* Center text when stacked */
            }
            .ssmd-home-welcome-content-left {
                max-width: 200px; /* Smaller image on mobile */
                margin-bottom: 1rem; /* Space below image */
            }
            .ssmd-home-welcome-content-right {
                padding-left: 0; /* Remove left padding when stacked */
                text-align: center;
            }
            .ssmd-home-welcome-text {
                font-size: clamp(1.5rem, 4vw, 3.5rem);
            }
            .ssmd-home-church-name {
                font-size: clamp(1rem, 3vw, 2.5rem);
            }
            .ssmd-home-motto {
                font-size: clamp(0.9rem, 2vw, 1.8rem);
            }
            .ssmd-home-close-button {
                font-size: 2.5rem;
                top: 15px;
                right: 30px;
            }
        }

        @media (max-width: 480px) {
            .ssmd-home-welcome-content-inner {
                padding: 1.5rem 1.8rem;
                border-radius: 0.8rem;
            }
            .ssmd-home-welcome-content-left {
                max-width: 150px;
            }
            .ssmd-home-welcome-text {
                font-size: clamp(1.2rem, 3.5vw, 3rem);
                margin-bottom: 0.3rem;
            }
            .ssmd-home-church-name {
                font-size: clamp(0.9rem, 2.5vw, 2rem);
                margin-bottom: 1rem;
            }
            .ssmd-home-motto {
                font-size: clamp(0.8rem, 1.8vw, 1.5rem);
            }
            .ssmd-home-close-button {
                font-size: 2.2rem;
                top: 15px;
                right: 30px;
                font-weight:bold;
            }
        }

























        /* START: Scroll Down Icon Styles */
        .ssmd-scroll-down-icon {
            position: fixed;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-size: 2.5rem;
            animation: ssmd-scroll-bounce 2s infinite ease-in-out;
            z-index: 10;
            cursor: pointer;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
            opacity: 1; /* Initially visible */
            transition: opacity 0.3s ease-out; /* Smooth fade out */
        }

        .ssmd-scroll-down-icon.hidden {
            opacity: 0; /* Hidden state */
            pointer-events: none; /* Disable clicks when hidden */
        }

        @keyframes ssmd-scroll-bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            40% {
                transform: translateX(-50%) translateY(-20px);
            }
            60% {
                transform: translateX(-50%) translateY(-10px);
            }
        }
        /* END: Scroll Down Icon Styles */

        @keyframes ssmd-scroll-bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            40% {
                transform: translateX(-50%) translateY(-20px);
            }
            60% {
                transform: translateX(-50%) translateY(-10px);
            }
        }
        /* END: Scroll Down Icon Styles */

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

        @keyframes ssmd-hero-fadeInUp {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes ssmd-hero-slideInLeft {
            from { opacity: 0; transform: translateX(-100px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes ssmd-hero-slideInRight {
            from { opacity: 0; transform: translateX(100px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes ssmd-hero-scaleIn {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .ssmd-hero-content-box {
                padding: 2.5rem 3.5rem;
            }
            .ssmd-hero-welcome-text {
                font-size: clamp(2rem, 6vw, 5rem);
            }
            .ssmd-hero-church-name {
                font-size: clamp(1.8rem, 4.5vw, 4rem);
            }
            .ssmd-hero-motto {
                font-size: clamp(1.5rem, 3vw, 2.5rem);
            }
            .ssmd-hero-cta-button {
                padding: 0.9rem 2.5rem;
                font-size: 1rem;
            }
            .ssmd-scroll-down-icon {
                font-size: 2rem;
                bottom: 10px;
            }
        }

        @media (max-width: 768px) {
            .ssmd-hero-section {
                height: 80vh; /* Adjust height for smaller screens */
            }
            .ssmd-hero-content-box {
                padding: 2rem 2.5rem;
                border-radius: 1rem;
            }
            .ssmd-hero-welcome-text {
                font-size: clamp(1.8rem, 5.5vw, 4rem);
            }
            .ssmd-hero-church-name {
                font-size: clamp(1.5rem, 4vw, 3.5rem);
            }
            .ssmd-hero-motto {
                font-size: clamp(1.2rem, 2.8vw, 2rem);
            }
            .ssmd-hero-cta-button {
                padding: 0.8rem 2rem;
                font-size: 0.9rem;
            }
            .ssmd-scroll-down-icon {
                font-size: 1.8rem;
                bottom: 25px;
            }
        }

        @media (max-width: 480px) {
            .ssmd-hero-section {
                height: 70vh; /* Further adjust height for mobile */
            }
            .ssmd-hero-content-box {
                padding: 1.5rem 1.8rem;
                border-radius: 0.8rem;
                box-shadow: 0 6px 25px 0 rgba(31, 38, 135, 0.3); /* Smaller shadow */
            }
            .ssmd-hero-welcome-text {
                font-size: clamp(1.5rem, 5vw, 3.5rem);
                margin-bottom: 0.3rem;
            }
            .ssmd-hero-church-name {
                font-size: clamp(1.2rem, 3.5vw, 3rem);
                margin-bottom: 1rem;
            }
            .ssmd-hero-motto {
                font-size: clamp(1rem, 2.5vw, 1.8rem);
            }
            .ssmd-hero-cta-button {
                padding: 0.7rem 1.5rem;
                font-size: 0.8rem;
                margin-top: 1.5rem;
            }
            .ssmd-scroll-down-icon {
                font-size: 1.5rem;
                bottom: 25px;
            }
        }






/* Base styles for the fixed buttons */
#massScheduleBtn, #announcementBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: linear-gradient(135deg, white, white);
  color: #4a2e0e;
  padding: 14px 22px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s cubic-bezier(0.5, 0, 0, 1), width 0.6s ease; /* Added width to transition */
  font-family: 'Poppins', sans-serif;
  overflow: hidden; /* Hide overflowing text during collapse */
  white-space: nowrap; /* Prevent text from wrapping */
  display: flex; /* Use flex to align icon and text */
  align-items: center;
  justify-content: center; /* Center content initially */
}

#announcementBtn {
  bottom: 100px; /* Stack on top of each other */
}

/* Icon styling */
#massScheduleBtn i, #announcementBtn i {
  margin-right: 8px; /* Space between icon and text */
  transition: margin-right 0.6s ease; /* Smooth transition for margin */
}

/* Text styling */
#massScheduleBtn span, #announcementBtn span {
  transition: opacity 0.6s ease; /* Smooth transition for text opacity */
}

/* Show animation for initial appearance */
#massScheduleBtn.show, #announcementBtn.show {
  opacity: 1;
  transform: translateY(0);
}

/* Hover effect for buttons */
#massScheduleBtn:hover, #announcementBtn:hover {
  background: linear-gradient(135deg, wheat wheat);
  transform: translateY(0) scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  /* When hovered, expand back to full width if collapsed */
  width: auto;
  padding-left: 22px; /* Restore padding if it was reduced */
  padding-right: 22px;
  justify-content: center; /* Ensure text is centered on hover */
}

/* When hovered, show text and reset icon margin */
#massScheduleBtn:hover span, #announcementBtn:hover span {
  opacity: 1;
  width: auto; /* Allow text to take its natural width */
  margin-left: 0; /* Remove negative margin if applied */
}
#massScheduleBtn:hover i, #announcementBtn:hover i {
  margin-right: 8px; /* Restore margin between icon and text */
}


/* Collapsed state: icon only */
#massScheduleBtn.collapsed, #announcementBtn.collapsed {
  width: 70px; /* Adjust width to fit only the icon + padding */
  padding-left: 0; /* Remove padding from left when collapsed */
  padding-right: 0; /* Remove padding from right when collapsed */
  justify-content: center; /* Center the icon */
}

/* Hide text and adjust icon margin when collapsed */
#massScheduleBtn.collapsed span, #announcementBtn.collapsed span {
  opacity: 0;
  width: 0; /* Collapse text width */
  overflow: hidden; /* Hide text overflow */
  margin-left: -8px; /* Pull text back to hide it completely */
}
#massScheduleBtn.collapsed i, #announcementBtn.collapsed i {
  margin-right: 0; /* Remove margin next to icon when text is hidden */
}


/* Pulse Wave Animation */
.pulse-wave {
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgb(44, 44, 44);
  border-radius: 50%;
  animation: ripple 2s infinite;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

@keyframes ripple {
  0% {
      transform: translate(-50%, -50%) scale(0.5);
      opacity: 0.6;
  }
  100% {
      transform: translate(-50%, -50%) scale(2.5);
      opacity: 0;
  }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
  #massScheduleBtn, #announcementBtn {
      padding: 12px 18px;
      font-size: 0.9rem;
      bottom: 20px; /* Adjusted from 35px to 20px for better mobile spacing */
      right: 20px;
  }
  #announcementBtn {
      bottom: 80px; /* Adjusted to maintain stacking on mobile */
  }

  /* Ensure collapsed state is also responsive */
  #massScheduleBtn.collapsed, #announcementBtn.collapsed {
      width: 60px; /* Slightly smaller icon-only width for mobile */
  }
}













/* Welcome Introduction Section */
        .ssmd-welcome-intro-enhanced-section {
            position: relative; /* For background overlay */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 4rem; /* Increased padding for more breathing room */
            /*background: linear-gradient(to bottom, #fdfaf7, #f7f2ea);*/
            gap: 5rem; /* Increased gap between content and image */
            flex-wrap: wrap; /* Allow wrapping on smaller screens */
            overflow: hidden; /* Ensures content stays within bounds */
            background: linear-gradient(110deg, white 60%, #f4f4f9 30%);
        }
        /*.mobile-mass-view-daily-schedule-header{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          text-align: center;
        }*/

        /* Subtle background texture/pattern */
        .ssmd-welcome-intro-enhanced-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            
            opacity: 0.2;
            z-index: 0;
        }

        /* Content Styling */
        .ssmd-welcome-intro-enhanced-content {
            flex: 1;
            max-width: 650px; /* Slightly wider content area */
            text-align: left;
            position: relative; /* For z-index */
            z-index: 1;
        }

        /* Decorative Bar */
        .ssmd-welcome-intro-enhanced-bar {
            width: 0; /* Start width at 0 for animation */
            height: 6px; /* Thicker bar */
            background: linear-gradient(to right, #4a3419, #4a2e0e);
            border-radius: 3px;
            margin-bottom: 2rem; /* More space below bar */
            opacity: 0; /* Start invisible for animation */
            transition: width 1.5s ease-out, opacity 1.5s ease-out; /* Transition for width and opacity */
        }

        /* Main Heading */
        .ssmd-welcome-intro-enhanced-h1 {
            font-family: 'Playfair Display', serif; /* Elegant, impactful font */
            font-size: clamp(3rem, 7vw, 5.5rem); /* Responsive font size */
            color: #4a2e0e;
            margin-bottom: 1rem;
            line-height: 1.1;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
            opacity: 0; /* Start invisible for animation */
            transform: translateY(50px); /* Start below for slide-up effect */
            transition: opacity 1s ease-out, transform 1s ease-out;
        }

        /* Main Paragraphs */
        .ssmd-welcome-intro-enhanced-p {
            font-size: 1.1rem; /* Slightly larger paragraph text */
            line-height: 1.8;
            font-family: livvic;
            color: #555;
            font-weight: 500; /* Regular weight for readability */
            margin-top: 1.5rem; /* Adjusted margin */
            margin-bottom: 1.5rem;
            opacity: 0; /* Start invisible for animation */
            transform: translateY(50px); /* Start below for slide-up effect */
            transition: opacity 1s ease-out, transform 1s ease-out;
        }

        /* Blockquote Styling */
        .ssmd-welcome-intro-enhanced-blockquote {
            font-family: 'Livvic', sans-serif; /* Keep Livvic for blockquote */
            font-size: clamp(1.8rem, 4vw, 3rem); /* Responsive font size */
            font-weight: 700; /* Bold */
            color: #4a2e0e;
            margin: 2rem 0; /* More vertical space */
            padding-left: 20px;
            border-left: 5px solid #4a2e0e;
            line-height: 1.4;
            font-style: italic;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
            opacity: 0; /* Start invisible for animation */
            transform: translateY(50px); /* Start below for slide-up effect */
            transition: opacity 1s ease-out, transform 1s ease-out;
        }

        /* Image Styling */
        .ssmd-welcome-intro-enhanced-image-wrapper {
            flex: 1;
            text-align: center;
            position: relative; /* For z-index */
            z-index: 1;
        }

        .ssmd-welcome-intro-enhanced-image-wrapper img {
            max-width: 100%;
            height: auto;
            border-radius: 1.5rem; /* More rounded corners */
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); /* Stronger, deeper shadow */
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1.5s ease-out; /* Smooth transition for hover and reveal */
            opacity: 0; /* Start invisible for animation */
            transform: translateY(50px); /* Start below for slide-up effect */
        }

        .ssmd-welcome-intro-enhanced-image-wrapper img:hover {
            transform: translateY(-10px) scale(1.02); /* Lift and slight scale on hover */
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); /* Even stronger shadow on hover */
        }

        /* Revealed state for scroll-revealed elements */
        .ssmd-scroll-reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }

        /* Specific revealed state for the bar (width animation) */
        .ssmd-welcome-intro-enhanced-bar.revealed {
            width: 80px; /* Final width */
            opacity: 1;
            transition-delay: 0s; /* Bar reveals first */
        }

        /* Staggered delays for other revealed elements */
        .ssmd-welcome-intro-enhanced-h1.revealed {
            transition-delay: 0.2s;
        }
        .ssmd-welcome-intro-enhanced-p.revealed:nth-of-type(1) { /* First paragraph */
            transition-delay: 0.4s;
        }
        .ssmd-welcome-intro-enhanced-blockquote.revealed {
            transition-delay: 0.6s;
        }
        .ssmd-welcome-intro-enhanced-p.revealed:nth-of-type(2) { /* Second paragraph */
            transition-delay: 0.8s;
        }
        .ssmd-welcome-intro-enhanced-image-wrapper img.revealed {
            transition-delay: 0.5s; /* Image reveals slightly after first text block */
        }

        /* Floating animation for image (applied only when revealed) */
        @keyframes ssmd-welcome-intro-enhanced-float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
        .ssmd-welcome-intro-enhanced-image-wrapper img.revealed {
            animation: ssmd-welcome-intro-enhanced-float 6s ease-in-out infinite;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .ssmd-welcome-intro-enhanced-section {
                padding: 4rem 2rem;
                gap: 3rem;
            }
            .ssmd-welcome-intro-enhanced-h1 {
                font-size: clamp(2.5rem, 6vw, 4.5rem);
            }
            .ssmd-welcome-intro-enhanced-blockquote {
                font-size: clamp(1.5rem, 3.5vw, 2.5rem);
            }
            .ssmd-welcome-intro-enhanced-p {
                font-size: 1rem;
            }
        }

        @media (max-width: 768px) {
            .ssmd-welcome-intro-enhanced-section {
                flex-direction: column; /* Stack content and image vertically */
                text-align: center;
                padding: 3rem 1.5rem;
                gap: 2rem;
            }
            .ssmd-welcome-intro-enhanced-content {
                max-width: 100%; /* Allow content to stretch across the screen */
                text-align: center; /* Center-align text */
            }
            .ssmd-welcome-intro-enhanced-bar {
                margin-left: auto; /* Center bar on mobile */
                margin-right: auto;
                margin-bottom: 1.5rem;
            }
            .ssmd-welcome-intro-enhanced-h1 {
                font-size: clamp(2rem, 5vw, 3.5rem);
            }
            .ssmd-welcome-intro-enhanced-blockquote {
                font-size: clamp(1.2rem, 3vw, 2rem);
            }
            .ssmd-welcome-intro-enhanced-p {
                font-size: 1.1rem;
                margin-top: 1rem;
                margin-bottom: 1rem;
            }
            .ssmd-welcome-intro-enhanced-image-wrapper {
                margin-top: 1.5rem; /* Add space between text and image when stacked */
            }
        }

        @media (max-width: 480px) {
            .ssmd-welcome-intro-enhanced-section {
                padding: 2.5rem 1rem;
            }
            .ssmd-welcome-intro-enhanced-h1 {
                font-size: clamp(2rem, 4.5vw, 3rem);
            }
            .ssmd-welcome-intro-enhanced-blockquote {
                font-size: clamp(1rem, 2.5vw, 1.8rem);
                padding-left: 15px; /* Adjust padding for smaller screens */
            }
            .ssmd-welcome-intro-enhanced-p {
                font-size: 1.1rem;
                font-weight: 500;
            }
            .ssmd-welcome-intro-enhanced-image-wrapper img {
                border-radius: 1rem; /* Slightly less rounded on smallest screens */
            }
        }
        /* NEW: Church Logo Watermark for Welcome Section */
.ssmd-church-logo-watermark {
    position: absolute; /* Position relative to .ssmd-welcome-intro-enhanced-content */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for its own size to perfectly center */
    width: 100%; /* Adjust size as needed, e.g., 60% of its parent content area */
    height: auto;
    opacity: 0.08; /* Make it very subtle (adjust as needed, 0.05 to 0.15 is good) */
    z-index: 0; /* Ensure it's behind the text content */
    pointer-events: none; /* Crucial: Prevents the image from interfering with text selection/clicks */
    filter: grayscale(100%) brightness(150%); /* Optional: Make it grayscale and slightly brighter for better subtlety */
    display: block; /* Ensure it behaves as a block element */
}

/* Ensure content elements are above the watermark */
.ssmd-welcome-intro-enhanced-bar,
.ssmd-welcome-intro-enhanced-h1,
.ssmd-welcome-intro-enhanced-p,
.ssmd-welcome-intro-enhanced-blockquote {
    position: relative; /* Ensure these elements are positioned relative */
    z-index: 1; /* Place them above the watermark (which has z-index: 0) */
}

/* Responsive adjustment for the watermark on smaller screens */
@media (max-width: 768px) {
    .ssmd-church-logo-watermark {
        width: 80%; /* Make it slightly larger on smaller screens if needed */
        opacity: 0.05; /* Potentially make it even more subtle on smaller screens */
    }
}














/* NEW Mission, Vision, Values Section Styles (Matching the provided image) */
        .ssmd-new-mvv-section {
            background-color: #f0f0f0; /* Light background for the whole section */
            padding: 0; /* No padding on the section itself, handled by inner divs */
            font-family: 'Poppins', sans-serif;
            color: #333;
            margin-top: 0rem;
            overflow: hidden; /* Ensure no overflow from angled shapes */
            box-shadow: 0 5px 40px rgba(0, 0, 0, 0.5); /* Stronger shadow */
        }

        .ssmd-new-mvv-header-container {
            background-color: #2d2d2d; /* Dark background for the header */
            height: 40vh;
            background-size: cover;
            background-position: 50% 45%;
            display: flex; /* Use flexbox to center content */
            align-items: center; /* Center vertically */
            justify-content: center; /* Center horizontally */
            flex-direction: column; /* Stack h2 and p */
            color: #fff; /* Ensure text is white over dark background */
            text-shadow: 2px 2px 5px rgba(0,0,0,0.5); /* Add text shadow for readability */
            position: relative; /* For z-index */
            z-index: 0; /* Keep it behind the lifted columns */
        }

        .ssmd-new-mvv-content-grid {
            display: flex; /* Use flexbox for the three columns */
            flex-wrap: wrap; /* Allow wrapping on smaller screens */
            justify-content: center;
            align-items: stretch; /* Ensure columns stretch to equal height */
            max-width: 1200px;
            margin: 0 auto; /* Center the grid */
            position: relative; /* For positioning angled elements */
            z-index: 1; /* Ensure grid is above the header background */
        }

        .ssmd-new-mvv-column {
            flex: 1; /* Each column takes equal space */
            min-width: 280px; /* Minimum width for columns before wrapping */
            padding: 3rem 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden; /* Hide parts of the icon if it goes out */
            transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0.3s ease;
            border-radius: 0; /* Ensure no border-radius */
            z-index: 1; /* Default z-index for all columns */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Default shadow */
        }

        /* Specific background colors for each column */
        .ssmd-new-mvv-column.mission1 {
            background-color: #f0f0f0; /* Blue */
            color: black;
            border-radius: 0;
        }

        .ssmd-new-mvv-column.vision1 {
            background-color: #2980b9; /* Darker blue */
            color: #fff;
            transform: translateY(-70px); /* Lift the middle box */
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); /* Stronger shadow for lifted box */
            z-index: 2; /* Bring the middle box above others by default */
            border-radius: 0;
        }

        .ssmd-new-mvv-column.values1 {
            background-color: #f0f0f0; /* Green */
            color: black;

        }

        .ssmd-new-mvv-column h3 {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: livvic;
        }

        .ssmd-new-mvv-column p {
            font-size: 1rem;
            line-height: 1.7;
            margin-bottom: .5rem; /* Space before the image */
            flex-grow: 1; /* Allow text to grow and push image to bottom */
        }


        .ssmd-new-mvv-column:hover {
            box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45); /* Even stronger shadow on hover */
            z-index: 3; /* Bring hovered item to the very front */
        }
        .ssmd-new-mvv-content-grid img{
          width: 50%;

        }

        

        /* Responsive adjustments for new MVV section */
        @media (max-width: 992px) {
            .ssmd-new-mvv-header-container h2 {
                font-size: 2rem;
            }
            .ssmd-new-mvv-header-container p {
                font-size: 1rem;
            }
            .ssmd-new-mvv-column {
                padding: 2.5rem 1.5rem;
                min-width: 250px;
            }
            .ssmd-new-mvv-column h3 {
                font-size: 1.6rem;
            }
            .ssmd-new-mvv-column p {
                font-size: 0.95rem;
            }
            .ssmd-new-mvv-column .icon-illustration {
                width: 120px;
            }
        }

        @media (max-width: 768px) {
            .ssmd-new-mvv-section {
                margin-top: 2rem;
            }
            .ssmd-new-mvv-header-container {
                padding: 2rem 1rem;
                height: 30vh; /* Adjust header height for mobile */
            }
            .ssmd-new-mvv-header-container h2 {
                font-size: 1.8rem;
            }
            .ssmd-new-mvv-header-container p {
                font-size: 0.9rem;
            }
            .ssmd-new-mvv-content-grid {
                flex-direction: column; /* Stack columns vertically */
                gap: 0; /* Remove gap when stacked, padding handles spacing */
            }
            .ssmd-new-mvv-column {
                min-width: 100%; /* Full width when stacked */
                padding: 2rem 1.5rem;
                margin-bottom: 1rem; /* Add space between stacked items */
                transform: translateY(0); /* Reset transform for stacked layout */
                z-index: 1; /* Reset z-index for stacked layout */
            }
            .ssmd-new-mvv-column:last-child {
                margin-bottom: 0;
            }
            .ssmd-new-mvv-column h3 {
                font-size: 1.5rem;
            }
            .ssmd-new-mvv-column p {
                font-size: 0.9rem;
            }
            .ssmd-new-mvv-column .icon-illustration {
                width: 100px;
            }
            .ssmd-new-mvv-column.vision1{
              transform: translateY(0px);
              
            }
        }

        @media (max-width: 480px) {
            .ssmd-new-mvv-header-container {
                padding: 1.5rem 0.8rem;
                height: 25vh;
            }
            .ssmd-new-mvv-header-container h2 {
                font-size: 1.5rem;
            }
            .ssmd-new-mvv-header-container p {
                font-size: 0.85rem;
            }
            .ssmd-new-mvv-column {
                padding: 1.5rem 1rem;
            }
            .ssmd-new-mvv-column h3 {
                font-size: 1.3rem;
            }
            .ssmd-new-mvv-column p {
                font-size: 0.85rem;
            }
            .ssmd-new-mvv-column .icon-illustration {
                width: 80px;
            }
            .ssmd-new-mvv-column.vision1{
              transform: translateY(0px);
              
            }
        }










.parish-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
  background: linear-gradient(to right, #f4f4f9, #e9ecef);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Added subtle shadow to the section */
  
  
}
.parish-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  color: #ECDFCC; /* gold tint for elegance */
  transition: transform 0.4s ease;
}

.parish-card:hover .parish-icon {
  transform: scale(1.1);
}



.parish-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  height: 300px;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;
}

.parish-card:hover {
  transform: scale(1.03);
}

.parish-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  transition: background 0.3s ease;
}

.parish-card:hover .parish-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

.parish-content {
  color: #fff;
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform: translateY(20px);
  opacity: 1;
  margin-bottom: 1rem;
}

.parish-card:hover .parish-content {
  transform: translateY(0);
  opacity: 1;
}

.parish-content h2 {
  font-size: 1.8rem;
  margin: 0 0 0.5rem;
  font-family: livvic;
}

.parish-content p {
  font-size: 1rem;
  font-family: livvic;
  margin: 0;
}

/* Responsive Tweaks */
@media (max-width: 600px) {
  .parish-card {
    height: 200px;
    
  }

  .parish-content h2 {
    font-size: 1.4rem;
  }

  .parish-content p {
    font-size: 0.95rem;
  }
}







.ssmd-mass-schedule-section {
  padding: 4rem 1rem 0rem 1rem;
  background-position: center;
  background-size: cover;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Poppins', sans-serif;
  padding-bottom: 1rem;
  
}

.mass-schedule-header {
  text-align: center;
  margin-bottom: 3rem;
}

.mass-schedule-header h2 {
  font-size: 2.8rem;
  color: #3e2c1e;
  font-family: 'Livvic', serif;
  position: relative;
}

.mass-schedule-header h2::after {
  content: '';
  width: 80px;
  height: 4px;
  background: #c59a5f;
  display: block;
  margin: 10px auto 0;
  border-radius: 5px;
}

.mass-schedule-header p {
  color: #5b5045;
  font-size: 1.1rem;
  margin-top: 0.5rem;
}



@media (max-width: 768px) {
  .mass-schedule-header h2 {
    font-size: 2rem;
  }
  

  .mass-schedule-header p {
    font-size: 1rem;
  }
}






  










/* Layout */
        .ssmd-parish-priest-homesection-section {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            padding: 4rem 2rem; /* Increased padding for better spacing */
            gap: 3rem; /* Increased gap between image and text */
            
            background-position: center;
            background-size: cover;
            position: relative;
            overflow: hidden; /* Ensure overflow is hidden for carousel */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Added subtle shadow to the section */
        }

        .ssmd-parish-priest-homesection-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4); /* Darker overlay for better text contrast */
            z-index: 0;
        }

        /* Carousel Container and Track */
        .ssmd-parish-priest-homesection-carousel-container {
            position: relative;
            width: 400px; /* Fixed width for the carousel viewport */
            height: 400px; /* Fixed height for the carousel viewport */
            border-radius: 50%; /* Maintains the rounded shape for the container */
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* Stronger shadow for the carousel */
            transition: transform 0.4s ease;
            flex-shrink: 0; /* Prevents shrinking on smaller screens when flex items try to fit */
            z-index: 1; /* Ensure it's above the overlay */
        }

        .ssmd-parish-priest-homesection-carousel-container:hover {
            transform: scale(1.03); /* Subtle hover effect */
        }

        .ssmd-parish-priest-homesection-carousel-track {
            display: flex;
            width: 100%; /* Will be multiplied by number of items by JS */
            height: 100%;
            transition: transform 0.5s ease-in-out; /* Smooth sliding */
            will-change: transform; /* Optimize for animation */
        }

        .ssmd-parish-priest-homesection-carousel-item {
            min-width: 100%; /* Each item takes full width of container */
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .ssmd-parish-priest-homesection-carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* No border-radius here, as the container already provides the round shape */
        }

        /* Carousel Dots (Pagination) */
        .ssmd-parish-priest-homesection-carousel-dots {
            position: absolute;
            bottom: 15px; /* Position dots below the image */
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 2; /* Above the image */
        }

        .ssmd-parish-priest-homesection-dot {
            width: 10px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.2); /* Small border for definition */
        }

        .ssmd-parish-priest-homesection-dot.active {
            
            transform: scale(1.2);
            border: 2px solid #6b4e26;
        }


        /* Text styling */
        .ssmd-parish-priest-homesection-text-wrapper {
            max-width: 600px;
            background: rgba(255, 255, 255, 0.95); /* Slightly transparent white for a softer look */
            padding: 2.5rem; /* Increased padding */
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Stronger shadow */
            font-family: 'Poppins', sans-serif;
            transition: transform 0.4s ease;
            z-index: 1; /* Ensure it's above the overlay */
        }

        .ssmd-parish-priest-homesection-text-wrapper h2 {
            font-family: 'Livvic', sans-serif;
            color: #6b4e26; /* Dark gold/brown */
            font-size: 2.2rem; /* Larger font size */
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 1px; /* Slight letter spacing */
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .ssmd-parish-priest-homesection-text-wrapper h3 {
            font-size: 1.6rem; /* Larger font size */
            color: #333;
            margin-bottom: 1.2rem; /* Increased margin */
            font-weight: 700; /* Bold */
        }

        .ssmd-parish-priest-homesection-text-wrapper p {
            color: #555;
            font-size: 1.05rem; /* Slightly larger font size */
            line-height: 1.8;
            margin-bottom: 2rem; /* Increased margin */
        }

        /* Button styling */
        .ssmd-parish-priest-homesection-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.8rem; /* Increased gap */
            padding: 0.9rem 2.2rem; /* Larger padding */
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem; /* Slightly larger font size */
            background: #6b4e26; /* Dark gold/brown */
            color: #fff;
            border-radius: 40px;
            text-decoration: none;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Stronger shadow */
            transition: all 0.3s ease;
            font-weight: 600; /* Make text bolder */
        }

        .ssmd-parish-priest-homesection-btn i {
            font-size: 1.3rem; /* Slightly larger icon */
        }

        .ssmd-parish-priest-homesection-btn:hover {
            background: #4a3419; /* Darker on hover */
            transform: translateY(-3px); /* Lift effect */
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);
        }

        /* Entrance Animation */
        .ssmd-parish-priest-homesection-scroll-reveal {
            opacity: 0;
            transform: translateY(60px);
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother ease-out */
        }

        .ssmd-parish-priest-homesection-scroll-reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }

        /* Responsive */
        @media (max-width: 992px) { /* Adjust breakpoint for larger tablets */
            .ssmd-parish-priest-homesection-section {
                padding: 3rem 1.5rem;
                gap: 2rem;
            }
            .ssmd-parish-priest-homesection-carousel-container {
                width: 350px;
                height: 350px;
            }
            .ssmd-parish-priest-homesection-text-wrapper h2 {
                font-size: 1.9rem;
            }
            .ssmd-parish-priest-homesection-text-wrapper h3 {
                font-size: 1.3rem;
            }
            .ssmd-parish-priest-homesection-text-wrapper p {
                font-size: 1rem;
            }
            .ssmd-parish-priest-homesection-btn {
                padding: 0.8rem 2rem;
                font-size: 0.9rem;
            }
        }
        @media (max-width: 375px){
          .ssmd-parish-priest-homesection-section {
                margin-top: 8rem;
          }
        }
        @media (width: 414px) {
          .ssmd-parish-priest-homesection-section{
            margin-top: 20rem;
          }
        }
        @media (width: 360px){
          .ssmd-parish-priest-homesection-section {
                margin-top: 4rem;
          }
        }
        @media (width: 768px){
          .ssmd-parish-priest-homesection-section {
                margin-top: 17.4rem;
          }
        }
        @media (width: 540px){
          .ssmd-parish-priest-homesection-section {
                margin-top: 16rem;
          }
        }
        @media (width: 344px){
          .ssmd-parish-priest-homesection-section {
                margin-top: 0rem;
          }
        }

        @media (max-width: 768px) {
            .ssmd-parish-priest-homesection-section {
                flex-direction: column;
                text-align: center; /* Center align text on mobile */
                padding: 2.5rem 1rem;
                gap: 2rem;
                
            }
            .ssmd-parish-priest-homesection-carousel-container {
                width: 280px; /* Smaller size for mobile */
                height: 280px;
                margin-bottom: 1rem; /* Space below carousel */
            }
            .ssmd-parish-priest-homesection-text-wrapper {
                padding: 2rem 1.5rem; /* Adjust padding for mobile text block */
            }
            .ssmd-parish-priest-homesection-text-wrapper h2 {
                font-size: 1.7rem;
            }
            .ssmd-parish-priest-homesection-text-wrapper h3 {
                font-size: 1.2rem;
            }
            .ssmd-parish-priest-homesection-text-wrapper p {
                font-size: 0.95rem;
            }
        }

        @media (max-width: 480px) {
            .ssmd-parish-priest-homesection-section {
                padding: 2rem 0.5rem;
            }
            .ssmd-parish-priest-homesection-carousel-container {
                width: 300px;
                height: 300px;
            }
            .ssmd-parish-priest-homesection-text-wrapper {
                padding: 1.5rem 1rem;
            }
            .ssmd-parish-priest-homesection-text-wrapper h2 {
                font-size: 1.5rem;
            }
            .ssmd-parish-priest-homesection-text-wrapper h3 {
                font-size: 1.1rem;
            }
            .ssmd-parish-priest-homesection-text-wrapper p {
                font-size: 1rem;
            }
            .ssmd-parish-priest-homesection-btn {
                padding: 0.6rem 1.5rem;
                font-size: 0.8rem;
            }
        }














.ssmd-contribution-home-section {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            min-height: 100vh; /* Ensure it takes up significant viewport height */
            background-image: url('IMAGES/open-holy-bible-candle-old-oak-wooden-table-beautiful-gold-background-religion-concept.jpg'); /* Your background image */
            background-size: cover;
            background-position: center;
            position: relative;
            padding: 4rem 2rem;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); /* Stronger shadow */
            align-items: center; /* Vertically center content */
            justify-content: center; /* Horizontally center content */
        }

        .ssmd-contribution-home-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7); /* Darker overlay for better text contrast */
            z-index: 1;
        }

        .ssmd-contribution-home-content-wrapper {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column; /* Stack on mobile */
            max-width: 1200px;
            width: 100%;
            gap: 3rem; /* Space between flex items */
            color: #fff;
            animation: ssmd-contribution-home-fadeInUp 1.5s ease-in-out forwards;
            opacity: 0; /* Start hidden for animation */
            padding: 1rem; /* Inner padding for content wrapper */
        }

        /* Left side: Main text and Learn More */
        .ssmd-contribution-home-text-block {
            flex: 2; /* Takes more space on desktop */
            text-align: left;
        }

        .ssmd-contribution-home-text-block h2 {
            font-size: 2.8rem; /* Slightly larger for impact */
            font-family: 'Poppins', sans-serif;
            color: white;
            margin-bottom: 1rem;
            line-height: 1.2;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
        }

        .ssmd-contribution-home-text-block p {
            font-size: 1.1rem;
            line-height: 1.8;
            font-family: 'Poppins', sans-serif;
            color: #e0e0e0; /* Lighter white for body text */
            max-width: 600px; /* Constrain text width for readability */
        }

        .ssmd-contribution-home-button {
            display: inline-block;
            margin-top: 1.5rem;
            padding: 0.8rem 2.2rem;
            font-size: 1rem;
            font-family: 'Poppins', sans-serif;
            border-radius: 50px;
            background: transparent;
            border: 2px solid #f0e68c; /* Gold-like border */
            color: #f0e68c;
            position: relative;
            overflow: hidden;
            transition: all 0.5s ease-in-out;
            z-index: 1; /* Ensure button is above pseudo-element */
        }

        .ssmd-contribution-home-button::before {
            content: "";
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            background: #6b4e26; /* Darker gold/brown on hover */
            z-index: -1;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease-in-out;
        }

        .ssmd-contribution-home-button:hover {
            color: #000; /* Dark text on hover */
        }

        .ssmd-contribution-home-button:hover::before {
            transform: scaleX(1);
        }

        /* Right side: Mission Quote and Make a Contribution */
        .ssmd-contribution-home-quote-block {
            flex: 1; /* Takes less space on desktop */
            text-align: center;
            background: rgba(255, 255, 255, 0.1); /* Subtle glassmorphism background */
            backdrop-filter: blur(5px);
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        }

        .ssmd-contribution-home-quote-block h1 {
            font-size: 2rem; /* Adjusted for better hierarchy */
            line-height: 1.4;
            font-weight: 700; /* Bold for impact */
            font-family: 'Poppins', sans-serif;
            color: #fff8dc; /* Lighter gold for quote */
            margin-bottom: 1rem;
            text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
        }

        .ssmd-contribution-home-quote-block p {
            font-size: 1rem;
            font-style: italic;
            color: #e0e0e0;
            margin-bottom: 1.5rem;
        }

        .ssmd-contribution-home-link {
            display: inline-block;
            margin-top: 1rem;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            padding: 0.7rem 1.8rem;
            color: #fff;
            border-radius: 50px;
            background: #6b4e26; /* Darker gold/brown */
            box-shadow: 0 10px 20px rgba(0,0,0,0.4);
            text-decoration: none;
            transition: transform 0.3s ease, background 0.3s ease;
        }

        .ssmd-contribution-home-link:hover {
            transform: scale(1.08);
            background: #8d6e42; /* Lighter on hover */
        }

        /* Decorative Image Section (Spiritan Image) */
        .ssmd-contribution-home-decorative-image-section {
            position: absolute; /* Position relative to .ssmd-contribution-home-section */
            bottom: 2rem;
            right: 2rem;
            z-index: 3; /* Ensure it's above content wrapper if needed */
            display: flex;
            justify-content: center;
            align-items: center;
            /* Adjust positioning for different screen sizes */
        }

        .ssmd-contribution-home-decorative-frame {
            position: relative;
            width: 180px; /* Smaller default size */
            height: 180px;
            border: 8px solid #fff8dc; /* Gold border */
            border-radius: 50%; /* Make it circular */
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /* Stronger shadow */
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            cursor: pointer;
        }

        .ssmd-contribution-home-decorative-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .ssmd-contribution-home-decorative-frame:hover {
            transform: scale(1.1); /* More pronounced hover */
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
        }

        .ssmd-contribution-home-shine-effect {
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
            transform: skewX(-25deg);
            animation: ssmd-contribution-home-shine 3s infinite;
        }

        @keyframes ssmd-contribution-home-shine {
            0% { left: -75%; }
            100% { left: 125%; }
        }

        /* Animations */
        @keyframes ssmd-contribution-home-fadeInUp {
            from {
                transform: translateY(60px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Responsive Adjustments */
        @media (min-width: 769px) {
            .ssmd-contribution-home-content-wrapper {
                flex-direction: row; /* Side-by-side on larger screens */
            }
        }

        @media (max-width: 768px) {
            .ssmd-contribution-home-section {
                padding: 3rem 1rem;
                min-height: auto; /* Allow height to adjust */
            }
            .ssmd-contribution-home-content-wrapper {
                flex-direction: column; /* Stack content blocks */
                gap: 2rem;
                padding: 0; /* Remove inner padding */
            }
            .ssmd-contribution-home-text-block,
            .ssmd-contribution-home-quote-block {
                text-align: center; /* Center text on mobile */
                width: 100%; /* Full width */
            }
            .ssmd-contribution-home-text-block h2 {
                font-size: 2.2rem;
            }
            .ssmd-contribution-home-text-block p {
                font-size: 1rem;
            }
            .ssmd-contribution-home-quote-block h1 {
                font-size: 1.6rem;
            }
            .ssmd-contribution-home-decorative-image-section {
                position: static; /* Remove fixed positioning */
                margin-top: 2rem; /* Add space below content */
                width: 100%;
            }
            .ssmd-contribution-home-decorative-frame {
                width: 150px;
                height: 150px;
                border: 6px solid #fff8dc;
            }
        }

        @media (max-width: 480px) {
            .ssmd-contribution-home-section {
                padding: 2rem 0.5rem;
            }
            .ssmd-contribution-home-text-block h2 {
                font-size: 1.8rem;
            }
            .ssmd-contribution-home-text-block p {
                font-size: 0.9rem;
            }
            .ssmd-contribution-home-button {
                padding: 0.7rem 1.8rem;
                font-size: 0.9rem;
            }
            .ssmd-contribution-home-quote-block {
                padding: 1.5rem;
            }
            .ssmd-contribution-home-quote-block h1 {
                font-size: 1.4rem;
            }
            .ssmd-contribution-home-quote-block p {
                font-size: 0.9rem;
            }
            .ssmd-contribution-home-link {
                padding: 0.6rem 1.5rem;
                font-size: 0.9rem;
            }
            .ssmd-contribution-home-decorative-frame {
                width: 120px;
                height: 120px;
                border: 5px solid #fff8dc;
            }
        }












.mission-quote h1 {
  font-size: 1.8rem;
  font-style: italic;
  margin-bottom: 1rem;
  color: white;
  animation: fadeInUp 1.5s ease-in-out;
  margin-top: 3rem;
  font-family: poppins;
}

.mission-quote p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: #d1d1d1;
  animation: fadeInUp 1.5s ease-in-out;
}

.contribution-link {
  color: #ffdd57;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s ease;
  
  
}

.contribution-link:hover {
  color: #ffffff;
}

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

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

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

@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .Contribution {
    flex-direction: column;
    padding: 2rem;
  }

  .Contribution img {
    width: 80%;
    margin: 1rem auto;
  }

  .contribution_text h2 {
    font-size: 1.8rem;
  }

  .mission-quote h1 {
    font-size: 1.5rem;
  }

  .contribution-button {
    font-size: 0.9rem;
    padding: 0.6rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .Contribution img {
    width: 100%;
  }

  .contribution_text h2 {
    font-size: 1.5rem;
  }

  .mission-quote h1 {
    font-size: 1.2rem;
  }

  .contribution-button {
    font-size: 0.8rem;
    padding: 0.5rem 1.2rem;
  }
}










/* Base Styles */
.deep-seek-video-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.deep-seek-video-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

/* Header Styles */
.deep-seek-video-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.deep-seek-video-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #4a2e0e;
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
}

.deep-seek-video-subtitle {
    font-size: 1.2rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
    font-weight: 400;
}

.deep-seek-video-decoration {
    width: 80px;
    height: 4px;
    background: #4a2e0e;
    margin: 1.5rem auto;
    border-radius: 2px;
}

/* Video Carousel */
.deep-seek-video-carousel {
    position: relative;
    margin-bottom: 3rem;
}

.deep-seek-video-carousel-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 0;
    margin: 0 -2rem;
    padding: 1rem 2rem;
}

.deep-seek-video-carousel-track::-webkit-scrollbar {
    display: none;
}

.deep-seek-video-item {
    scroll-snap-align: start;
    flex: 0 0 calc(33.333% - 1rem);
    min-width: 300px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.deep-seek-video-item:hover {
    transform: translateY(-5px);
}

.deep-seek-video-thumb-container {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
    aspect-ratio: 16/9;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.deep-seek-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    background: #e9ecef;
}

.deep-seek-video-thumb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    opacity: 1;
    transition: opacity 0.3s ease;
}

.deep-seek-video-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.deep-seek-video-thumb-play svg {
    fill: white;
    width: 24px;
    height: 24px;
    margin-left: 3px;
}

.deep-seek-video-item:hover .deep-seek-video-thumb {
    transform: scale(1.03);
}

.deep-seek-video-item:hover .deep-seek-video-thumb-play {
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) scale(1.1);
}

.deep-seek-video-item-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.25rem;
    transition: color 0.3s ease;
}

.deep-seek-video-item-preacher {
    color: #6c757d;
    font-size: 0.9rem;
    font-style: italic;
}

.deep-seek-video-item:hover .deep-seek-video-item-title {
    color: #2c3e50;
  
}

/* Navigation Arrows */
.deep-seek-video-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(to right, #4a2e0e, #4b3e30);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    z-index: 3;
    transition: all 0.3s ease;
    opacity: 0.9;
}


.deep-seek-video-nav svg {
    fill: #2c3e50;
    width: 24px;
    height: 24px;
}

.deep-seek-video-prev {
    left: -25px;
}

.deep-seek-video-next {
    right: -25px;
}

.deep-seek-video-nav:hover {
    background: cover;
    opacity: 1;
}

.deep-seek-video-nav:hover svg {
    fill: white;
}

/* Call to Action */
.deep-seek-video-cta {
    text-align: center;
    margin-top: 2rem;
}

.deep-seek-video-cta-button {
    display: inline-block;
    padding: 0.8rem 2rem;
    background: linear-gradient(to right, #2c3e50, #4a6572);
    color: white;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
    display: none;
}

.deep-seek-video-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(67, 97, 238, 0.4);
}

/* Video Modal */
.deep-seek-video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.deep-seek-video-modal.active {
    opacity: 1;
    visibility: visible;
}

.deep-seek-video-modal-content {
    position: relative;
    width: 80%;
    max-width: 1000px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.deep-seek-video-modal.active .deep-seek-video-modal-content {
    transform: scale(1);
}

.deep-seek-video-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deep-seek-video-modal-player {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
}

.deep-seek-video-modal-player video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.deep-seek-video-modal-info {
    padding: 1.5rem;
}

#deep-seek-video-modal-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #4a2e0e;
}

#deep-seek-video-modal-preacher {
    color: #6c757d;
    font-style: italic;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .deep-seek-video-item {
        flex: 0 0 calc(50% - 1rem);
    }
    
    .deep-seek-video-modal-content {
        width: 90%;
    }
}

@media (max-width: 768px) {
    .deep-seek-video-section {
        padding: 3rem 0;
    }
    
    .deep-seek-video-title {
        font-size: 2rem;
    }
    
    .deep-seek-video-subtitle {
        font-size: 1rem;
    }
    
    .deep-seek-video-item {
        flex: 0 0 calc(100% - 1rem);
    }
    
    .deep-seek-video-nav {
        display: none;
    }
    
    .deep-seek-video-modal-content {
        width: 95%;
    }  
}







/* Background Decoration */
.deep-seek-video-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="%23e9ecef" opacity="0.2" d="M0,0 L100,0 L100,100 Q50,80 0,100 L0,0 Z"></path></svg>');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom center;
    z-index: 1;
}






      /* --- SHARING OUR STORIES CAROUSEL STYLING (Refactored Class Names) --- */
        /* Content containers within sections (KEEP as 'container') */
        .ssmd-story-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0rem 0rem;
        }
        .ssmd-sharing-story-section {
            padding: 5rem 1.5rem .5rem 1.5rem; /* More vertical padding */
            position: relative; /* Needed for absolute positioning of arrows */
            background-position: center;
            background-size: cover;
        }

        .ssmd-sharing-story-section h2.ssmd-sharing-story-heading {
            font-size: clamp(2.5rem, 5vw, 4.2rem); /* Large, impactful heading */
            color: #002244; /* General heading color */
            margin-bottom: 3rem; /* More space below heading */
            line-height: 1.2;
            letter-spacing: -0.02em; /* Slightly tighter letter spacing */
            text-align: center;
            font-family: livvic;
        }

        .ssmd-sharing-story-slider-container {
            position: relative;
            max-width: 100%; /* Constrain slider width */
            margin: 0 auto;
            overflow: hidden; /* Hide overflowing slides */
            border-radius: 1rem; /* Rounded corners for the entire slider area */
            /*box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Subtle shadow around the slider */
            min-height: 300px; /* Minimum height for empty/loading state */
            display: flex; /* Flex for centering content when empty/loading */
            align-items: center;
            justify-content: center;
            background-color: #fff; /* White background within the slider container */
        }

        .ssmd-sharing-story-slider {
            display: flex;
            transition: transform 0.8s ease-in-out; /* Smooth transition for slides */
            width: 100%;
            height: 100%; /* Take full height of parent */
            align-items: center; /* Vertically center cards if they don't fill height */
        }

        .ssmd-sharing-story-card {
            flex: 0 0 100%; /* Each card takes up 100% of the slider width */
            background-color: #fdfdfd; /* Background for story cards */
            border-radius: 1rem; /* More rounded corners */
            padding: 2.5rem; /* Generous internal padding */
            box-shadow: none; /* No individual card shadow as container has one */
            display: flex;
            flex-direction: row-reverse;
            gap: 2rem;
            align-items: center; /* Center content vertically */
            text-align: center;
            max-width: 100%; /* Ensure it fits within its flex item */
            box-sizing: border-box; /* Include padding in width */
            opacity: 1; /* Start visible */
            transition: opacity 0.8s ease-in-out; /* Fade transition */
            border: 1px solid #eee; /* Light border for story cards */
        }

        /* KEEP 'hidden' class name as general utility */
        .ssmd-sharing-story-card.hidden {
            opacity: 0;
            position: absolute; /* Take out of flow for fade effect */
            pointer-events: none; /* Make it non-interactive when hidden */
        }

        .ssmd-sharing-story-card-image {
            width: 300px; /* Fixed width for circular image */
            height: 300px; /* Fixed height for circular image */
            border-radius: 50%; /* Make it circular */
            object-fit: cover; /* Ensure image covers the circle */
            margin-bottom: 1.5rem; /* Space below image */
            margin-right: 7rem;
           /* order: 4px solid #7c3aed; /* Purple border around image */
           /* box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.2); /* Light purple glow around border */
        }

        .ssmd-sharing-story-card-content {
            font-size: 1.1rem; /* Larger font size for quotes */
            font-style: italic;
            color: #333; /* Darker text for readability */
            margin-bottom: 1rem;
            line-height: 1.7;
            max-height: 500px; /* Example max height for content */
            overflow-y: auto; /* Enable scroll for long content */
            padding-right: 5px; /* Space for scrollbar */
        }
        /* Style the scrollbar for custom look (optional, non-standard) */
        .ssmd-sharing-story-card-content::-webkit-scrollbar {
            width: 8px;
        }
        .ssmd-sharing-story-card-content::-webkit-scrollbar-thumb {
            background-color: #7c3aed;
            border-radius: 4px;
        }
        .ssmd-sharing-story-card-content::-webkit-scrollbar-track {
            background-color: #f0f0f0;
        }


        .ssmd-sharing-story-card-author {
            font-size: 1rem; /* Clear author name font size */
            font-weight: 600;
            font-family: livvic;
            color: #333; /* Dark blue for author name */
            margin-top: auto; /* Pushes author to the bottom if content length varies */
        }

        /* Slider Navigation Arrows */
        .ssmd-sharing-story-slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: black;
            border: none;
            padding: 1rem 1.2rem;
            
            cursor: pointer;
            z-index: 10; /* Above slides */ 
            font-size: 1.5rem; /* Larger arrow icon */
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease, transform 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }
        .ssmd-sharing-story-slider-arrow:hover {
            background-color: rgba(0, 0, 0, 0.7);
            transform: translateY(-50%) scale(1.1); /* Slight grow on hover */
        }
        .ssmd-sharing-story-slider-arrow.left {
            left: 0rem;
        }
        .ssmd-sharing-story-slider-arrow.right {
            right: 0rem;
            
        }

        /* Pagination Dots */
        .ssmd-sharing-story-slider-dots {
            display: flex;
            justify-content: center;
            margin-top: 2rem; /* Space below slider */
            gap: 0.75rem;
            display: none;
        }
        .ssmd-sharing-story-dot {
            width: 12px;
            height: 12px;
            background-color: #ccc;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
            display: none;
        }
        /* KEEP 'active' class name as general utility */
        .ssmd-sharing-story-dot.active {
            background-color: #7c3aed; /* Purple active dot color */
            transform: scale(1.2); /* Active dot slightly larger */
        }
        .ssmd-sharing-story-dot:hover {
            background-color: #999;
        }

        /* Loading state for stories (when fetching data) */
        /* KEEP 'loading' class on the section, but use new specific classes for nested elements */
        .ssmd-sharing-story-section.loading .ssmd-sharing-story-slider-container {
            min-height: 250px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            border-radius: 1rem;
            color: #666;
            font-style: italic;
        }
        .ssmd-sharing-story-section.loading .ssmd-sharing-story-loading-spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-top: 4px solid #7c3aed; /* Purple spinner top */
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin-top: 1rem;
        }
        .ssmd-sharing-story-section.loading .ssmd-sharing-story-slider,
        .ssmd-sharing-story-section.loading .ssmd-sharing-story-slider-arrow,
        .ssmd-sharing-story-section.loading .ssmd-sharing-story-slider-dots {
            display: none !important; /* Hide carousel elements when loading */
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @media (max-width: 480px){
            .ssmd-sharing-story-card{
              display: flex;
              flex-direction: column;
            }
            .ssmd-sharing-story-card-image{
              margin-right: 0rem;

            }
        }






        /* Modern Catholic News Section Styling with ssmd-herald-vatican prefix */
.ssmd-herald-vatican-section {
    --ssmd-herald-vatican-primary-color: #8B5A2B;
    --ssmd-herald-vatican-secondary-color: #5D4037;
    --ssmd-herald-vatican-accent-color: #D4AF37;
    --ssmd-herald-vatican-text-color: #333;
    --ssmd-herald-vatican-light-bg: #FFF9F0;
    --ssmd-herald-vatican-dark-bg: #2C1E0F;
    --ssmd-herald-vatican-vatican-yellow: #4a2e0e;
    --ssmd-herald-vatican-vatican-white: #F4F4F4;
    --ssmd-herald-vatican-herald-red: #4a2e0e;
    padding: 8rem 2rem;
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.ssmd-herald-vatican-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="%23f0e6d2" d="M50 0c13.8 0 25 11.2 25 25S63.8 50 50 50 25 38.8 25 25 36.2 0 50 0zm0 10c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z"/></svg>');*/
    opacity: 0.1;
    z-index: 0;
}

.ssmd-herald-vatican-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ssmd-herald-vatican-header {
    text-align: center;
    margin-bottom: 5rem;
    
}

.ssmd-herald-vatican-title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.ssmd-herald-vatican-title-gradient {
    background: linear-gradient(135deg, var(--ssmd-herald-vatican-primary-color), var(--ssmd-herald-vatican-accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ssmd-herald-vatican-title-outline {
    color: transparent;
    -webkit-text-stroke: 1px var(--ssmd-herald-vatican-secondary-color);
    text-stroke: 1px var(--ssmd-herald-vatican-secondary-color);
    letter-spacing: 0.05em;
}

.ssmd-herald-vatican-subtitle {
    font-size: 1.2rem;
    color: var(--ssmd-herald-vatican-secondary-color);
    font-style: italic;
    position: relative;
    display: inline-block;
}

.ssmd-herald-vatican-subtitle::before,
.ssmd-herald-vatican-subtitle::after {
    content: "✝";
    display: inline-block;
    margin: 0 1rem;
    color: var(--ssmd-herald-vatican-accent-color);
    opacity: 0.7;
}

.ssmd-herald-vatican-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 768px) {
    .ssmd-herald-vatican-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ssmd-herald-vatican-card {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    height: 100%;
    min-height: 400px;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    isolation: isolate;
    font-family: livvic;
}

.ssmd-herald-vatican-herald-card {
    --ssmd-herald-vatican-card-accent: var(--ssmd-herald-vatican-herald-red);
}

.ssmd-herald-vatican-vatican-card {
    --ssmd-herald-vatican-card-accent: var(--ssmd-herald-vatican-vatican-yellow);
}

.ssmd-herald-vatican-card-decoration {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.ssmd-herald-vatican-cross-decoration {
    position: absolute;
    width: 150px;
    height: 150px;
    right: -50px;
    top: -50px;
    background: linear-gradient(45deg, transparent 60%, var(--ssmd-herald-vatican-card-accent) 60% 65%, transparent 65%),
                linear-gradient(-45deg, transparent 60%, var(--ssmd-herald-vatican-card-accent) 60% 65%, transparent 65%);
    opacity: 0.15;
}

.ssmd-herald-vatican-halo-effect {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,0.1) 0%, rgba(212,175,55,0) 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ssmd-herald-vatican-card-content {
    padding: 3rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
    font-family: livvic;
}

.ssmd-herald-vatican-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.ssmd-herald-vatican-icon {
    width: 40px;
    height: 40px;
    fill: var(--ssmd-herald-vatican-card-accent);
}

.ssmd-herald-vatican-card-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ssmd-herald-vatican-secondary-color);
    margin-bottom: 1.5rem;
    position: relative;
}

.ssmd-herald-vatican-card-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: var(--ssmd-herald-vatican-card-accent);
    margin: 1rem auto;
    border-radius: 3px;
}

.ssmd-herald-vatican-card-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--ssmd-herald-vatican-text-color);
    margin-bottom: 2.5rem;
    max-width: 400px;
}

.ssmd-herald-vatican-button {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 2rem;
    background: var(--ssmd-herald-vatican-card-accent);
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 2px solid transparent;
}

.ssmd-herald-vatican-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    background: transparent;
    color: var(--ssmd-herald-vatican-card-accent);
    border-color: var(--ssmd-herald-vatican-card-accent);
}

.ssmd-herald-vatican-arrow-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.ssmd-herald-vatican-button:hover .ssmd-herald-vatican-arrow-icon {
    transform: translateX(5px);
}

.ssmd-herald-vatican-card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: -1;
    opacity: 0.9;
}

/* Hover effects */
.ssmd-herald-vatican-card:hover {
    transform: translateY(-10px);
}

.ssmd-herald-vatican-card:hover .ssmd-herald-vatican-halo-effect {
    animation: ssmd-herald-vatican-pulse 2s infinite;
}

@keyframes ssmd-herald-vatican-pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ssmd-herald-vatican-title {
        flex-direction: column;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .ssmd-herald-vatican-title-outline {
        -webkit-text-stroke: 0;
        text-stroke: 0;
        color: var(--ssmd-herald-vatican-secondary-color);
    }
    
    .ssmd-herald-vatican-card-content {
        padding: 2rem 1.5rem;
    }
}































.ssmd-school-homesection-section {
            width: 100%;
            background: linear-gradient(to bottom, #fffefb, #f7f2ea); /* Subtle gradient background */
            padding: 6rem 2rem; /* Increased padding */
            font-family: 'Poppins', sans-serif;
            position: relative;
            overflow: hidden;
        }

        .ssmd-school-homesection-container {
            display: flex;
            max-width: 1300px;
            margin: auto;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 3rem; /* Increased gap */
        }

        .ssmd-school-homesection-text {
            flex: 1;
            min-width: 350px; /* Increased min-width for text block */
        }

        .ssmd-school-homesection-bar {
            display: block;
            width: 80px; /* Wider bar */
            height: 5px; /* Thicker bar */
            background: linear-gradient(to right, #4a2e0e, #99601e); /* Gradient bar */
            margin-bottom: 25px; /* Increased margin */
            border-radius: 3px;
            animation: ssmd-school-homesection-bar-grow 1s ease-out forwards;
        }

        @keyframes ssmd-school-homesection-bar-grow {
            from { width: 0; opacity: 0; }
            to { width: 80px; opacity: 1; }
        }

        .ssmd-school-homesection-subtitle {
            font-size: 3.5rem; /* Larger font size */
            font-weight: 700;
            color: #2c2c2c;
            margin-bottom: 1rem;
            line-height: 1.1;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
        }

        .ssmd-school-homesection-title {
            font-size: 2.5rem; /* Larger font size */
            font-weight: bold;
            color: #3f3f3f;
            margin-bottom: 1rem;
            line-height: 1.2;
        }

        .ssmd-school-homesection-motto {
            font-size: 1.3rem; /* Larger font size */
            font-weight: 500;
            color: #555;
            margin-bottom: 2rem; /* Increased margin */
            font-style: italic;
        }

        .ssmd-school-homesection-description {
            font-size: 1.1rem;
            color: #444;
            line-height: 1.8;
            margin-bottom: 1.5rem;
        }

        .ssmd-school-homesection-cta {
            display: inline-block;
            margin-top: 1.5rem;
            padding: 1rem 2.5rem; /* Larger padding */
            background: linear-gradient(to right, #4a2e0e, #a0641f); /* Gradient CTA */
            color: white;
            text-decoration: none;
            border-radius: 50px; /* More rounded */
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }

        .ssmd-school-homesection-cta:hover {
            background: linear-gradient(to right, #693f0e, #794b18); /* Darker gradient on hover */
            transform: translateY(-5px); /* Stronger lift */
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
        }

        .ssmd-school-homesection-cta::after {
            content: '→';
            position: absolute;
            right: 15px;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .ssmd-school-homesection-cta:hover::after {
            right: 10px;
            opacity: 1;
        }

        /* Carousel Gallery */
        .ssmd-school-homesection-gallery {
            flex: 1;
            min-width: 400px; /* Increased min-width for gallery */
            position: relative;
            overflow: hidden; /* Important for carousel */
            border-radius: 20px; /* Rounded corners for the whole gallery container */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* Shadow for the gallery */
        }

        .ssmd-school-homesection-carousel-track {
            display: flex;
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth cubic-bezier transition */
            width: 100%; /* Will be adjusted by JS */
            height: 100%;
        }

        .ssmd-school-homesection-carousel-item {
            min-width: 100%; /* Each item takes full width of the container */
            height: 400px; /* Fixed height for carousel items */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* Ensure image doesn't overflow its item */
        }

        .ssmd-school-homesection-carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease; /* Smooth scale on slide change */
        }

        .ssmd-school-homesection-carousel-item.active img {
            transform: scale(1.05); /* Slight zoom on active image */
        }

        /* Carousel Navigation Buttons */
        .ssmd-school-homesection-carousel-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 15px;
            cursor: pointer;
            font-size: 1.5rem;
            border-radius: 50%;
            z-index: 10;
            transition: background 0.3s ease, transform 0.3s ease;
            width: 50px; /* Fixed width/height for circular buttons */
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .ssmd-school-homesection-carousel-nav-btn:hover {
            background: rgba(0, 0, 0, 0.7);
            transform: translateY(-50%) scale(1.1);
        }

        .ssmd-school-homesection-carousel-nav-btn.prev {
            left: 15px;
        }

        .ssmd-school-homesection-carousel-nav-btn.next {
            right: 15px;
        }

        /* Carousel Dots */
        .ssmd-school-homesection-carousel-dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .ssmd-school-homesection-dot {
            width: 12px;
            height: 12px;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.2);
        }

        .ssmd-school-homesection-dot.active {
            background-color: #4a2e0e; /* Gold for active dot */
            transform: scale(1.2);
            border: 1px solid #4a2e0e;
        }

        /* Scroll Reveal Animation */
        .ssmd-school-homesection-scroll-reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .ssmd-school-homesection-scroll-reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }

        /* Responsive Adjustments */
        @media (max-width: 992px) { /* Tablets and smaller desktops */
            .ssmd-school-homesection-section {
                padding: 5rem 1.5rem;
            }
            .ssmd-school-homesection-container {
                gap: 2rem;
            }
            .ssmd-school-homesection-text {
                min-width: unset; /* Allow flex to determine width */
                width: 100%;
            }
            .ssmd-school-homesection-gallery {
                min-width: unset; /* Allow flex to determine width */
                width: 100%;
                height: 350px; /* Adjust height for tablets */
            }
            .ssmd-school-homesection-carousel-item {
                height: 350px;
            }
            .ssmd-school-homesection-subtitle {
                font-size: 2.8rem;
            }
            .ssmd-school-homesection-title {
                font-size: 2rem;
            }
            .ssmd-school-homesection-motto {
                font-size: 1.1rem;
            }
            .ssmd-school-homesection-description {
                font-size: 1rem;
            }
            .ssmd-school-homesection-cta {
                padding: 0.9rem 2rem;
                font-size: 1rem;
            }
        }

        @media (max-width: 768px) { /* Mobile devices */
            .ssmd-school-homesection-container {
                flex-direction: column; /* Stack elements */
                text-align: center; /* Center text */
            }
            .ssmd-school-homesection-text {
                order: 2; /* Text below gallery on mobile */
            }
            .ssmd-school-homesection-gallery {
                order: 1; /* Gallery above text on mobile */
                height: 300px; /* Adjust height for mobile */
            }
            .ssmd-school-homesection-carousel-item {
                height: 300px;
            }
            .ssmd-school-homesection-bar {
                margin-left: auto;
                margin-right: auto;
            }
            .ssmd-school-homesection-subtitle {
                font-size: 2.2rem;
            }
            .ssmd-school-homesection-title {
                font-size: 1.8rem;
            }
            .ssmd-school-homesection-motto {
                font-size: 1rem;
            }
            .ssmd-school-homesection-description {
                font-size: 0.95rem;
            }
            .ssmd-school-homesection-cta {
                padding: 0.8rem 1.8rem;
                font-size: 0.95rem;
            }
            .ssmd-school-homesection-carousel-nav-btn {
                padding: 10px;
                font-size: 1.2rem;
                width: 40px;
                height: 40px;
            }
            .ssmd-school-homesection-dot {
                width: 10px;
                height: 10px;
            }
        }

        @media (max-width: 480px) { /* Smaller mobile devices */
            .ssmd-school-homesection-section {
                padding: 4rem 1rem;
            }
            .ssmd-school-homesection-gallery {
                height: 250px;
            }
            .ssmd-school-homesection-carousel-item {
                height: 250px;
            }
            .ssmd-school-homesection-subtitle {
                font-size: 1.8rem;
            }
            .ssmd-school-homesection-title {
                font-size: 1.5rem;
            }
            .ssmd-school-homesection-motto {
                font-size: 0.9rem;
            }
            .ssmd-school-homesection-description {
                font-size: 0.85rem;
            }
            .ssmd-school-homesection-cta {
                padding: 0.7rem 1.5rem;
                font-size: 0.9rem;
            }
        }










.latest-news-section {
  padding: 4rem 1.5rem;
  background: linear-gradient(to bottom, #fff9f2, #f1f5f9);
  text-align: center;
  font-family: 'Poppins', sans-serif;
  background-position: center;
  background-size: cover;
}
.event-card{
  background-color: #fdfdfd;
  backdrop-filter: blur(5px);
}


.newsgradient-text {
    font-size: clamp(3rem, 6vw, 4.5rem); /* Even larger, more impactful heading */
    color: #2c3e50;
    margin-bottom: 1rem;
    font-weight: 900; /* Ultra bold */
    font-family: 'Livvic', sans-serif;
    /* More complex gradient text with a subtle metallic sheen */
    background: linear-gradient(45deg, #4a2e0e, #633d12, #e09136); /* Multiple colors for depth */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); /* Deeper shadow for text */
    letter-spacing: -0.03em; /* Tighter letter spacing for a modern feel */
}
.news-header h2 {
    font-size: clamp(3rem, 6vw, 4.5rem); /* Even larger, more impactful heading */
    color: #2c3e50;
    margin-bottom: 1rem;
    font-weight: 900; /* Ultra bold */
   
}

.news-header p {
  font-size: 1rem;
  color: #666;
  margin-bottom: 2.5rem;
  font-family: livvic;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.news-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.news-image-wrapper {
  position: relative;
  overflow: hidden;
  height: 220px;
  
  
}

.news-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  
  
}
.event-card img{
  border-radius: 20px;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
  filter: brightness(0.9) saturate(0.8); /* Slightly desaturated and darker normally */ 
}
.card-title{
  font-family: livvic;
  margin-top: 2rem;
  text-align: left;
 
}
 .card-title {
            font-size: .9rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--primary-blue);
             color: #666;
        }
.event-card img:hover{
    filter: brightness(1) saturate(1.1); /* Full brightness and slightly more saturated on hover */

}
.content-area .tag{
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: #4a3419;
  color: white;
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: 6px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;

}


.news-card:hover .news-image-wrapper img {
  transform: scale(1.05);
}
.read-more-btn{
  display: none;
}

.card-text {
    font-size: 1rem;
    color: #666;
    margin-bottom: 0.5rem;
    flex-grow: 1; /* Allow text to take available space */
    font-family: livvic;
    text-align: left;
}
.card-meta {
    font-size: 0.8rem;
    color: #718096;
    margin-top: 0;
    font-weight: bold;
}
.card-meta .far{
  margin-right: .5rem;
}

.news-tag {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: #007BFF;
  color: white;
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: 6px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.news-card-body {
  padding: 20px;
  text-align: left;
  
}

.news-card-body h3 {
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: #222;
  font-family: livvic;
}

.news-card-body .date {
  font-size: 0.95rem;
  color: #888;
  margin-bottom: 10px;
}

.news-card-body p {
  font-size: 1rem;
  color: #444;
  margin-bottom: 15px;
  line-height: 1.6;
}

.read-more-btn {
  font-size: 0.95rem;
  color: #007BFF;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.read-more-btn:hover {
  color: #0056b3;
}
















.bible-section {
  background: linear-gradient(135deg, #fff9ec, #f7f2f9);
  padding: 80px 20px;
  text-align: center;
}

.bible-section h1 {
  font-family: livvic;
  font-size: 3rem;
  color: #3e2c1e;
  margin-bottom: 10px;
}

.bible-section p {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 50px;
}

.bible-carousel {
  position: relative;
  max-width: 900px;
  margin: auto;
  overflow: hidden;
  border-radius: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}

.bible-slides {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.bible-slide {
  min-width: 100%;
  padding: 40px;
  box-sizing: border-box;
  text-align: center;
}

.bible-slide:hover {
  background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
  color: #fff;
  transform: scale(1.02);
}

.bible-slide .icon {
  font-size: 4rem;
  color: #3e2c1e;
  margin-bottom: 20px;
}

.bible-slide blockquote {
  font-size: 1.3rem;
  font-style: italic;
  color: #444;
  margin: 0 auto 20px;
  max-width: 700px;
  line-height: 1.6;
}

.bible-slide cite {
  font-size: 1rem;
  font-weight: bold;
  color: #3e2c1e;
}

.nav-dots {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}

.nav-dots button {
  width: 14px;
  height: 14px;
  margin: 0 6px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  transition: 0.3s;
  cursor: pointer;
}

.nav-dots button.active {
  background: #5d3a9b;
}















/* General Footer Styling */
.ssmd-footer {
  font-family: 'Poppins', sans-serif;
  color: #fff;
  margin-top: 50px;
}

/* Newsletter Section */
.newsletter {
  background: white;
  padding: 60px 20px;
  text-align: center;
  animation: fadeInDown 1s ease;
  
}

.newsletter-title {
  font-size: 2.7rem;
  margin-bottom: 15px;
  color: #4a2e0e;
}

.newsletter-text {
  font-size: 1.1rem;
  margin-bottom: 30px;
  color: #4a2e0e;
  max-width: 600px;
  margin-inline: auto;
}

/* Newsletter Form */
.newsletter-form {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.input-wrapper {
  position: relative;
  width: 320px;
  max-width: 100%;
}

.input-wrapper i {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: #999;
  font-size: 1.1rem;
}

.newsletter-form input {
  width: 100%;
  padding: 14px 16px 14px 45px;
  border-radius: 50px;
  border: 2px solid #4a2e0e;
  background: #fff;
  color: #333;
  font-size: 1rem;
  transition: border 0.3s ease, box-shadow 0.3s ease;
}

.newsletter-form input:focus {
  outline: none;
  border-color: #4a2e0e;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.11);
}

/* Fancy Subscribe Button */
.newsletter-form button {
  background: #4a2e0e;
  color: white;
  padding: 14px 28px;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.3s ease, transform 0.2s ease;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.newsletter-form button:hover {
  background: #4a2e0e;
  transform: translateY(-2px);
}

.newsletter-form button i {
  font-size: 1.2rem;
}









/* Main Footer Section */
.footer-content {
  display: flex;
  flex-wrap: wrap;
  background: #1f1f1f;
  padding: 60px 20px;
  background-position: 50% 50%;
  justify-content: space-between;
  gap: 40px;
  animation: fadeInUp 1.2s ease;
}

.footer-section {
  flex: 1;
  min-width: 250px;
}

.footer-logo {
  width: 180px;
  margin-bottom: 15px;
}

.footer-section h3,
.footer-section h4 {
  margin-bottom: 15px;
  font-size: 1.5rem;
  color: white;
}

.footer-section p,
.footer-section a {
  font-size: 0.95rem;
  color: #ccc;
  line-height: 1.6;
  text-decoration: none;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

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

.footer-section ul li a:hover {
  text-decoration: underline;
  color: #fff;
}

.donate-btn {
  background-color: #e0b14e;
  color: #222;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  margin-top: 10px;
  font-weight: bold;
  cursor: pointer;
}

.donate-btn:hover {
  background-color: #e0b14e;
}

.social-icons a {
  margin-right: 15px;
  font-size: 1.4rem;
  color: white;
  transition: transform 0.3s ease;
}

.social-icons a:hover {
  transform: scale(1.2);
}

/* Bottom Section */
.footer-bottom {
  background-color: #111;
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
  border-top: 1px solid #444;
}

.footer-bottom a {
  color: white;
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

/* Animations */
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .newsletter-form {
    flex-direction: column;
    align-items: center;
  }

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

  .social-icons {
    justify-content: center;
  }
  .footer-section.links{
    display: none;

  }
}


























/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.ssmd-icon-bar {
  position: fixed;
  top: 60%;
  transform: translateY(-50%);
  right: 0;
  z-index: 9999;
}

/* Style the icon bar links */
.ssmd-icon-bar a {
  display: block;
  text-align: center;
  padding: 12px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

/* Style the social media icons with color, if you want */
.ssmd-icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.instagram {
  background: #55ACEE;
  color: white;
}

.phone {
  background: #dd4b39;
  color: white;
}


.youtube {
  background: #bb0000;
  color: white;
}
.search{
  background: #333;
  color: white;
}








/* Your existing styles plus modifications */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  z-index: 2000;
}

.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: -50px;
  margin-left: auto;
  margin-right: auto;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  color: #fff;
  cursor: pointer;
  transition: color 0.3s ease;
}

.overlay .closebtn:hover {
  color: #ccc;
}

.overlay input[type=text] {
  padding: 15px;
  font-size: 18px;
  border: none;
  float: left;
  width: 80%;
  background: #f1f1f1;
  border-radius: 0.5rem 0 0 0.5rem;
  font-family: livvic;
}

.overlay button {
  float: left;
  width: 20%;
  padding: 16px;
  background: #4a2e0e;
  color: white;
  font-size: 18px;
  border: none;
  cursor: pointer;
  border-radius: 0 0.5rem 0.5rem 0;
  font-family: 'Inter', sans-serif;
  transition: background-color 0.3s ease;
}

.overlay button:hover {
  background: #4a3419;
}

.overlay::after {
  content: "";
  clear: both;
  display: table;
}

.search-results-container {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin-top: 5rem;
  border-radius: 0.5rem;
  z-index: 10;
  max-height: 300px;
  overflow-y: auto;
  font-family: livvic;
}

.search-results-header {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1a202c;
}

.search-result-item {
  padding: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  transition: background-color 0.2s ease;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background-color: #f7fafc;
}

.search-result-title {
  font-size: 1rem;
  font-weight: 500;
  color: #2d3748;
  margin-bottom: 0.25rem;
}

.search-result-description {
  font-size: 0.875rem;
  color: #4a5568;
  line-height: 1.5;
}

.no-results {
  padding: 0.75rem;
  font-size: 0.875rem;
  color: #4a2e0e;
  text-align: center;
}
.openBtn {
border: none;
border-radius: 0.5rem;

color: white;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s ease;
}

.openBtn:hover {
background-color: #45a049;
}
.search {
  color: white;
}














.yearly-archives {
  margin: 20px;
  font-family: livvic;
  
}

.year-header, .month-header {
  cursor: pointer;
  font-size: 20px;
  
  padding: 10px;
  margin: 5px 0;
  border-bottom: 2px solid black;
  text-align: left;
  margin-top: 1rem;
}

.archive-content, .month-content {
  display: none;
  margin-left: 20px;
  
}

.bulletin-item {
  margin: 5px 0;
}
.bulletin-item h4{
  margin-bottom: 1rem;
  margin-top: 1rem;
}


.btn {
  padding: 8px 15px;
  margin: 5px;
  text-decoration: none;
  border: 1px solid #ccc;
  color: #333;
  background-color: #e0e0e0;
  border-radius: 50px;
  font-family: livvic;
}

.btn:hover {
  background-color: #c0c0c0;
}

.bulletin-archive h1{
  text-align: center;
  font-family: livvic;
  margin-top: 2rem;
}



.bulletin-page-section{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.bulletin-mainpage-image{
  width: 50%;
}
.bulletin-mainpage-image img{
  width: 100%;
}
@media (max-width: 768px) {
  .bulletin-page-section{
    flex-direction: column;
  }
}

/* --- Bulletin Section Styles -------------dynamic page-- */
        .bulletin-page-section { margin-bottom: 40px; }
        .bulletin-archive { text-align: center; }
        .yearly-archives { margin-top: 20px; }
        .yearly-archives .year-header, .month-archive .month-header {
            cursor: pointer; background-color: #eee; padding: 10px; margin-top: 10px; border-radius: 5px;
            transition: background-color 0.3s ease; font-weight: bold;
            text-align: left; /* Align headers to left */
            display: block; /* Make headers block level to take full width */
            margin-bottom: 5px;
        }
        .yearly-archives .year-header:hover, .month-archive .month-header:hover { background-color: #ddd; }
        .yearly-archives .year-header.active-year-header, .month-archive .month-header.active-month-header {
            background-color: #ddd; /* Keep active state visible */
        }
        .archive-content, .month-content { margin-left: 20px; padding: 10px 0; }
        .bulletin-item {
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px; border-bottom: 1px dashed #eee;
            flex-wrap: wrap; /* Allow items to wrap on small screens */
            gap: 10px; /* Space between title and buttons */
        }
        .bulletin-item:last-child { border-bottom: none; }
        .bulletin-item h4 { margin: 0; font-size: 1em; color: #555; flex-grow: 1; min-width: 150px; } /* Ensure title takes space */
        .bulletin-item .bulletin-buttons { display: flex; gap: 5px; flex-shrink: 0; }
        .bulletin-item .btn {
            background-color: #bd9f67; color: white; padding: 5px 10px; border-radius: 5px; text-decoration: none;
            font-size: 0.9em; transition: background-color 0.3s ease;
            white-space: nowrap; /* Prevent button text from wrapping */
        }
        .bulletin-item .btn:hover { background-color: #a37b4f; }
        .bulletin-item .btn.view { background-color: #4a2e0e; }
        .bulletin-item .btn.view:hover { background-color: #7a4f21; }
        .bulletin-mainpage-image { text-align: center; margin-top: 30px; }
        .bulletin-mainpage-image img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }








/* Responsive Registration Header */
.registration-header {
  width: 100%;
  height: 50vh;
  background-position: center;
  background-size: cover;
}

.registration-header h1 {
  font-family: livvic;
  color: #ECDFCC;
  font-size: 3rem; /* Adjusted for responsiveness */
  text-align: center;
  position: absolute;
  top: 40%;
  left: 30%;
  transform: translate(-50%, -50%);
  padding: 0 .5rem; /* Add padding to avoid overflow on small devices */
}

/* Welcome Section */
.welcome-section {
  background-color: #f8f9fa; /* Light background */
  padding: 50px 20px;
  text-align: center;
  display: flex;
  flex-direction: column; /* Changed to column for smaller screens */
  padding-right: 1rem;
}

.welcome-container {
  max-width: 800px;
  margin: 0 auto; /* Center the content */
}

.welcome-container h1 {
  font-size: 2rem; /* Adjusted font size */
  margin-bottom: 20px;
  color: #4a2e0e; /* Rich brown color for heading */
  font-family: poppins;
}

.welcome-container p {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #555; /* Slightly lighter text color */
  font-family: poppins;
}

.quote p {
  font-size: 1.2rem;
  font-style: italic;
  color: #4a2e0e; /* Highlighted quote color */
  margin-top: 30px;
}

/* Responsive Typography and Layout */
@media (max-width: 768px) {
  .registration-header h1 {
    font-size: 2rem; /* Smaller font size for tablets */
  }

  .welcome-container h1 {
    font-size: 1.8rem; /* Adjusted heading size for tablets */
  }

  .welcome-container p {
    font-size: 0.9rem; /* Adjusted paragraph size */
  }
}

@media (max-width: 480px) {
  .registration-header {
    height: 30vh; /* Smaller height for mobile devices */
  }

  .registration-header h1 {
    font-size: 2rem; /* Adjusted font size for small screens */
    padding: 0 0.5rem; /* Ensure no overflow */
  }

  .welcome-section {
    padding: 30px 10px; /* Reduce padding on smaller screens */
  }

  .welcome-container h1 {
    font-size: 1.5rem; /* Adjust heading size further */
  }

  .welcome-container p {
    font-size: 0.8rem; /* Adjust paragraph size further */
  }

  .quote p {
    font-size: 1rem; /* Adjust quote size for smaller screens */
  }
}







.contact-section {
  display: flex;
  flex-direction: row;
  margin: 0 3rem;
  gap: 3.5rem;
}

.contactform {
  display: flex;
  flex-direction: column;
}

.contact-social-links {
  display: flex;
  flex-direction: column;
}

.left-contact-section h1 {
  font-family: italianno;
  margin-top: 3rem;
  font-size: 3rem;
}

.right-contact-section {
  font-family: italianno;
  margin-top: 3rem;
  font-size: 2rem;
}

.contactform label {
  font-family: poppins;
}

.contactform input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
.contactform input[type=submit] {
  background-color: #333;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.contact-social-text p {
  font-family: poppins;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.contact-facebook {
  background: #3B5998;
  color: white;
  width: 100%;
  max-width: 200px;
  padding: .5rem;
}

.contact-instagram {
  background: #55ACEE;
  color: white;
  width: 100%;
  max-width: 200px;
  padding: .5rem;
}

.contact-phone {
  background: #dd4b39;
  color: white;
  width: 100%;
  max-width: 200px;
  padding: .5rem;
}

.contact-youtube {
  background: #bb0000;
  color: white;
  width: 100%;
  max-width: 200px;
  padding: .5rem;
}

.contact-social-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.contact-social-links a {
  color: white;
  font-family: poppins;
  text-decoration: none;
}

.map-buttom-text {
  margin-top: 2rem;
  font-family: poppins;
  font-size: 1.2rem;
  text-align: center;
}

@media (max-width: 768px) {
  .contact-section {
      flex-direction: column;
      margin: 0 1.5rem;
      gap: 2rem;
  }

  .left-contact-section h1 {
      font-size: 2.5rem;
      margin-top: 2rem;
  }

  .right-contact-section {
      font-size: 1.5rem;
      margin-top: 2rem;
  }

  .contact-social-links {
      align-items: center;
  }
}

@media (max-width: 480px) {
  .left-contact-section h1 {
      font-size: 2rem;
  }

  .right-contact-section {
      font-size: 1.2rem;
  }

  .contactform input[type=submit] {
      padding: 10px 15px;
  }

  .contact-facebook, .contact-instagram, .contact-phone, .contact-youtube {
      width: 100%;
  }
}








/*                                  Mission and Vision Section                                         */
/* Mission and Vision Section */
#mission-vision {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  background: linear-gradient(to bottom, #ffffff, #f0f4f8);
  padding: 4rem 2rem;
}

/* Shared Layout */
.mission, .vision {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.mission:hover, .vision:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
}

/* Text Styling */
.mission .m_text, .vision .v_text {
  flex: 1;
  background: linear-gradient(135deg, #eaf4f4, #ffffff);
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  transition: background 0.5s ease;
}

.mission .m_text h2, .vision .v_text h2 {
  font-size: 2.5rem;
  color: #0a2e50;
  margin-bottom: 1rem;
  font-family: 'Livvic', sans-serif;
  text-align: center;
  position: relative;
}

.mission .m_text h2::after, .vision .v_text h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #0a2e50;
  margin: 0.5rem auto 1rem;
  border-radius: 5px;
}

.mission .m_text p, .vision .v_text p {
  font-size: 1rem;
  
  color: #333;
  font-family: 'Poppins', sans-serif;
  text-align: justify;
  transition: color 0.3s ease;
}

/* Image Styling */
.mission .image, .vision .image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mission .image img, .vision .image img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.mission .image img:hover, .vision .image img:hover {
  transform: scale(1.03);
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.25);
}

/* Responsive Design */
@media (max-width: 768px) {
  .mission, .vision {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
    
  }
  #mission-vision {
    padding: 0px;
  }

  .vision {
    flex-direction: column-reverse;
  }

  .mission .image, .vision .image {
    margin-bottom: 1.5rem;
  }
  
}








/* -------------------------------------Clergy and Staff Section ----------------------------------------------------*/
.clergy-staff-display {
  padding: 5rem 2rem;
  /*background: linear-gradient(to right, #f3f4f6, #e0e7ff);*/
  color: #1f2937;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
  overflow: hidden;
}

.clergy-staff-display h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-align: center;
  color: #111827;
  font-weight: bold;
  position: relative;
  animation: fadeInDown 1s ease-out;
}


.staff-p-text{
  max-width: 800px;
  margin: 0 auto 3rem auto;
  font-size: 1.125rem;
  line-height: 1.8;
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  padding: 1rem 2rem;
  border-left: 6px solid #ECDFCC;
  border-radius: 0.5rem;
  animation: fadeIn 1.5s ease-out;
}



.staff-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  animation: fadeInUp 1.2s ease-in-out;
}

.staff-card {
  position: relative;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  width: 450px;
  text-align: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

.staff-card:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.staff-image img {
  width: 100%;
  /*height: 350px;*/
  object-fit: cover;
  transition: transform 0.5s ease;
}

.staff-card:hover .staff-image img {
  transform: scale(1.05);
}

.staff-info {
  padding: 1.5rem;
  background: #fff;
}

.staff-info h3 {
  font-size: 1.5rem;
  color: #2b3d60;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.staff-info p {
  font-size: 1rem;
  color: #555;
}

.hover-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom right, rgba(0,0,0,0.8), rgba(0,0,0,0.7));
  color: #fff;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.staff-card:hover .hover-content {
  opacity: 1;
  visibility: visible;
}

.hover-content h4 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.hover-content p {
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 90%;
  text-align: center;
}

.staff-note {
  margin: 3rem 0 2rem;
  animation: fadeInUp 1.3s ease-in-out;
}

.staff-note h3 {
  font-size: 2rem;
  color: #2b3d60;
  font-weight: 700;
}

.staff-note-end {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 2rem;
  gap: 2rem;
  animation: fadeIn 2s ease-in-out;
}

.staff-note-end p {
  font-size: 1.1rem;
  color: #444;
  line-height: 1.8;
  flex: 1;
  min-width: 300px;
  font-family: livvic;
}

.staff-note-end img {
  width: 50%;
  max-width: 500px;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Animations */
@keyframes fadeIn {
  0% {opacity: 0; transform: translateY(20px);}
  100% {opacity: 1; transform: translateY(0);}
}

@keyframes fadeInDown {
  0% {opacity: 0; transform: translateY(-30px);}
  100% {opacity: 1; transform: translateY(0);}
}

@keyframes fadeInUp {
  0% {opacity: 0; transform: translateY(30px);}
  100% {opacity: 1; transform: translateY(0);}
}

/* Responsive Layout for Smaller Devices (Max Width: 768px) */
@media (max-width: 768px) {
  .clergy-staff-display{
    padding: 3rem 2rem 5rem 2rem;
  }
  .clergy-staff-display h2{
    font-size: 2rem;

  }
  .staff-p-text{
    line-height: 1.5;
    font-size: 1rem;
    text-align: left;
  }
  .footer-bottom{
    color: white;
    font-family: livvic;
  }

}











.history-text {
  font-family: 'Poppins', sans-serif;
  margin: 0 3rem;
  line-height: 1.7;
  color: #333;
}
.history-text {
  font-family: 'Poppins', sans-serif;
  margin: 0 3rem;
  line-height: 1.7;
  color: #333;
  background: linear-gradient(to bottom right, #f6f9fc, #eaf0f8);
  padding: 4rem 2rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.history-text h1,
.history-text h3 {
  text-align: center;
  margin-bottom: 1rem;
}

.history-text h1 {
  margin-top: 3rem;
  font-size: 2.5rem;
  color: #4a2e0e;
  position: relative;
}

.history-text h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: #4a2e0e;
  margin: 10px auto 0;
  border-radius: 2px;
}

.history-paragraph1,
.history-paragraph2,
.history-paragraph3,
.history-paragraph4 {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.history-paragraph1,
.history-paragraph3 {
  flex-direction: row;
  align-items: flex-start;
}

.history-paragraph3 {
  flex-direction: row-reverse;
}

.history-paragraph1 img,
.history-paragraph3 img {
  width: 30%;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.history-paragraph1 p,
.history-paragraph2 p,
.history-paragraph3 p,
.history-paragraph4 p {
  width: 100%;
  font-size: 1rem;
  color: #444;
  text-align: justify;
}

@media (max-width: 768px) {
  .history-paragraph1,
  .history-paragraph3 {
    flex-direction: column;
  }

  .history-paragraph1 img,
  .history-paragraph3 img {
    width: 100%;
    margin-bottom: 1rem;
  }
  .history-text{
    margin: 0 0rem;
    
  }
}











/* ------------------------------- photo gallery --------------------------- */
#event-list li:hover {
  color: #4a2e0e;
  text-decoration: underline;
  font-weight: bold;
}

/* Style for modal close button */
#photo-modal span {
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

#photo-container img {
  border-radius: 8px;
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Added shadow for depth */
}

#photo-container img:hover {
  transform: scale(1.05);
  /* Slight zoom-in effect on hover */
}

#photo-gallery {
  display: flex;
  /* Changed to flex for better layout control */
  flex-wrap: wrap;
  /* Allows items to wrap to the next line on small screens */
  background-color: #333;
  padding: 2rem;
  gap: 2rem;
  /* Added gap between items */
  align-items: flex-start; /* Align items to the start of the container */
}

.events-list {
  width: 250px;
  /* Set a fixed width for the list */
  padding-right: 2rem;
  border-right: 2px solid #ccc;
}

.events-list h3 {
  font-size: 1.8rem;
  /* Increased heading size */
  color: white;
  margin-bottom: 1.5rem;
  /* Increased margin */
  font-family: poppins;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Added text shadow */
}

.events-list ul {
  list-style: none;
  padding: 0;
  font-size: 1.4rem;
  /* Increased font size */
  color: white;
  font-family: poppins;
}

.events-list li {
  margin-bottom: 1rem;
  /* Increased margin */
  cursor: pointer;
  transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transition */
}

.events-list li:hover {
  color: #4a2e0e;
  /* Changed hover color */
  text-decoration: underline;
  transform: translateX(5px); /* Added slight horizontal movement on hover */
  
}

.photo-display {
  flex: 1;
  /* Allow the photo display to take up remaining space */
  padding-left: 2rem;
  display: flex;
  /* Use flexbox for image layout */
  flex-wrap: wrap;
  /* Allow images to wrap */
  gap: 1rem;
  /* Space between images */
  justify-content: center;
  /* Center images horizontally */
}

.photo-display h3 {
  font-size: 1.8rem;
  /* Increased heading size */
  color: white;
  margin-bottom: 1.5rem;
  /* Increased margin */
  font-family: poppins;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Added text shadow */
  width: 100%;
  text-align: center; /* Center the title */
}

#photo-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  /* Center images */
}

#photo-container img {
  border-radius: 8px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Added box-shadow transition */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow */
  width: calc(33.33% - 1rem);
  /* 3 images per row with spacing, adjusted for gap */
  min-width: 200px; /* Ensure images don't get too small */
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

#photo-container img:hover {
  transform: scale(1.1);
  /* Increased zoom */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
  /* Increased shadow on hover */
}

/* Modal for Full-Size Image */
#photo-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#photo-modal span {
  position: absolute;
  top: 20px;
  /* Adjusted top position */
  right: 20px;
  color: white;
  font-size: 3rem;
  /* Increased size */
  cursor: pointer;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Added shadow */
}

#photo-modal span:hover {
  color: #f0f0f0;
  /* Slightly lighter on hover */
}

#modal-image {
  max-width: 90%;
  max-height: 90%;
  border: 8px solid white;
  /* Increased border width */
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Stronger shadow */
}

/* --- Photo Gallery Section Styles --- */
        #photo-gallery { text-align: center; }
        .events-list { margin-bottom: 20px; }
        .events-list ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
        .events-list li {
            background-color: white; color: black; padding: 8px 15px; border-radius: 5px; cursor: pointer;
            transition: background-color 0.3s ease;
            white-space: nowrap; /* Prevent categories from wrapping onto multiple lines in a button-like way */
        }
        .events-list li:hover, .events-list li.active-category { background-color: white; }
        .photo-display { margin-top: 20px; }
        .photo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            max-width: 700px; /* Limit grid width */
            margin: 0 auto; /* Center the grid */
        }
        .photo-grid img {
            width: 100%; height: 150px; object-fit: cover; border-radius: 8px; cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.2s ease;
        }
        .photo-grid img:hover { transform: scale(1.03); }
        #photo-modal {
            display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%;
            overflow: auto; background-color: rgba(0,0,0,0.9); justify-content: center; align-items: center;
        }
        #modal-image { margin: auto; display: block; max-width: 90%; max-height: 90%; border-radius: 10px; }
        #photo-modal .close-button {
            position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold;
            transition: 0.3s; cursor: pointer;
        }
        #photo-modal .close-button:hover, #photo-modal .close-button:focus { color: #bbb; text-decoration: none; cursor: pointer; }

/* Responsive adjustments for smaller devices (max-width: 768px) */
@media (max-width: 768px) {
  #photo-gallery {
    flex-direction: column;
    /* Stack items vertically */
    padding: 1rem;
    /* Reduced padding */
  }

  .events-list {
    width: 100%;
    /* Full width */
    padding-right: 0;
    border-right: none;
    margin-bottom: 2rem;
    /* Added margin */
    
  }

  .events-list h3 {
    font-size: 1.6rem;
    /* Reduced heading size on mobile */
    text-align: center;
  }

  .events-list ul {
    font-size: 1.2rem;
    /* Reduced font size on mobile */
    font-family: livvic;
  }

  .events-list li {
    margin-bottom: 0.5rem;
  }

  .photo-display {
    width: 100%;
    /* Full width */
    padding-left: 0;
  }

  .photo-display h3 {
    font-size: 1.6rem;
    /* Reduced heading size on mobile */
  }

  #photo-container {
    gap: 2rem;
    /* Keep some gap */
  }

  #photo-container img {
    width: 100%;
    /* 1 image per row on mobile */
    min-width: auto; /* Let it take full width */
    height: auto;
    aspect-ratio: unset;
  }
}






    .container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
  }
  
  /* Header */
  .project-header {
      text-align: center;
      margin-bottom: 40px;
  }
  
  .project-header h1 {
      font-size: 2.5em;
      color: #2980b9;
  }
  
  .project-header p {
      font-size: 1.2em;
      color: #555;
  }
  
  /* Gallery Section */
  .gallery-section {
      margin-bottom: 40px;
  }
  
  .gallery-section h2 {
      color: #2980b9;
      font-size: 2em;
  }
  
  .gallery-section p {
      font-size: 1.1em;
      color: #555;
  }
  
  .gallery {
      display: flex;
      gap: 20px;
      justify-content: space-between;
      flex-wrap: wrap;
  }
  
  .gallery-item {
      flex: 1 1 30%;
      text-align: center;
  }
  
  .gallery-item img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .gallery-item p {
      margin-top: 10px;
      color: #555;
  }
  
  /* Materials Needed Section */
  .materials-needed {
      margin-bottom: 40px;
  }
  
  .materials-needed h2 {
      color: #2980b9;
      font-size: 2em;
  }
  
  .materials-needed ul {
      list-style-type: none;
      padding-left: 0;
  }
  
  .materials-needed li {
      font-size: 1.1em;
      padding: 10px 0;
      color: #555;
  }
  
  /* Support Us Section */
  .support-us {
      margin-bottom: 40px;
  }
  
  .support-us h2 {
      color: #2980b9;
      font-size: 2em;
  }
  
  .support-us p {
      font-size: 1.1em;
      color: #555;
  }
  
  .support-us .donate, .support-us .volunteer {
      background-color: #ecf0f1;
      padding: 20px;
      border-radius: 8px;
      margin-top: 20px;
  }
  
  .support-us .donate button, .support-us .volunteer button {
      background-color: #2980b9;
      color: white;
      padding: 12px 20px;
      border: none;
      font-size: 1.2em;
      cursor: pointer;
      border-radius: 5px;
  }
  
  .support-us .donate button:hover, .support-us .volunteer button:hover {
      background-color: #3498db;
  } 













  .ourwayoflife-section {
    background: linear-gradient(to bottom right, #f0f4f8, #ffffff);
    padding: 4rem 2rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
  }
  
  .ourwayoflife-header h2 {
    font-size: 2.8rem;
    color: #2b2b2b;
    margin-bottom: 1rem;
    font-family: 'Livvic', serif;
    animation: fadeInDown 1s ease-in-out;
  }
  
  .ourwayoflife-header p {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto 3rem;
    color: #555;
    line-height: 1.8;
    animation: fadeIn 1.5s ease-in-out;
  }
  
  .ourwayoflife-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    padding: 0 1rem;
  }
  .ourwayoflife-cards a {
    text-decoration: none;
  }
  
  .ourwayoflife-card {
    background-color: #fff;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 15px 25px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: slideUp 1s ease forwards;
  }
  
  .ourwayoflife-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.12);
  }
  
  .ourwayoflife-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #004aad;
  }
  
  .ourwayoflife-card h3 {
    font-size: 1.4rem;
    color: #222;
    margin-bottom: 0.8rem;
  }
  
  .ourwayoflife-card p {
    font-size: 1rem;
    color: #666;
    line-height: 1.7;
  }
  
  @keyframes fadeInDown {
    0% { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes slideUp {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @media (max-width: 768px) {
    .ourwayoflife-header h2 {
      font-size: 2rem;
    }
  
    .ourwayoflife-header p {
      font-size: 1rem;
    }
  }



  

  









/*----------------------- Mass intention section-------------------------------------------------------- */
  .mass-intention-section {
    background: linear-gradient(to bottom, #f8f4f2, #ffffff);
    padding: 4rem 2rem;
    font-family: 'Poppins', sans-serif;
    color: #2d2d2d;
  }
  
  .mass-container {
    max-width: 960px;
    margin: auto;
    text-align: center;
  }
  
  .mass-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #4c2b0e; /* Dark brown tone */
    margin-bottom: 0.5rem;
  }
  
  .mass-subtitle {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: #555;
  }
  
  .google-form-wrapper {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    padding: 0.5rem;
  }/* Responsive */
@media (max-width: 768px) {
  .mass-intention-section{
    padding: 4rem 1rem;

  }
  
} 













  .societies-container {
    max-width: 900px;
    margin: 4rem auto;
    padding: 0 1rem;
    font-family: 'Poppins', sans-serif;
  }
  
  .society-heading {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #002244;
    font-weight: 700;
    position: relative;
  }
  
  .accordion-item {
    background: linear-gradient(to bottom right, #ffffff, #f0f6ff);
    border-radius: 16px;
    margin-bottom: 2.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.4s ease;
    border-left: 5px solid white;
  }
  
  .accordion-title {
    background: #292219;
    color: #ffffff;
    padding: 2rem 1.5rem;
    font-weight: 600;
    font-size: 1.2rem;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease;
  }
  
  .accordion-title:hover {
    background: #292219;
  }
  
  .accordion-title::after {
    content: '➕';
    font-size: 1.2rem;
    transition: transform 0.3s ease, content 0.3s;
  }
  
  .accordion-title.active::after {
    content: '➖';
    transform: rotate(180deg);
  }
  
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.3s ease;
    background: #f9fbff;
    padding: 1.5rem 1.5rem;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 2rem;
  }
  
  .accordion-content.open {
    padding: 3rem;
  }
  .accordion-content p{
    margin-bottom: 1rem;
  }
  
  .accordion-content strong {
    color: #004080;
    
  }
  
  @media (max-width: 600px) {
    .accordion-title {
      font-size: 1rem;
      padding: 0.8rem 1rem;
    }
    .accordion-content {
      font-size: 0.9rem;
    }
  }











  
  

/* ------------------------------------Responsive Donation------------------*/
@media (max-width: 768px) {
    .ssmd-donation-container {
        flex-direction: column; /* Stack on small screens */
        gap: 20px;
    }
    /* Full background */
  .ssmd-donation-section {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('IMAGES/silhouette-catholic-cross-sunrise.jpg') no-repeat center center/cover;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 50px 20px;
}

/* Split layout */
.ssmd-donation-container {
    display: flex;
    max-width: 1200px;
    width: 100%;
    gap: 40px;
    align-items: center;
    justify-content: center;
    animation: ssmd-donation-fadeInUp 1.5s ease-out forwards;
    flex-direction: column; /* Stack elements by default */
}

.ssmd-donation-left-side {
    flex: 1;
    color: #fff;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
    animation: ssmd-donation-slideInLeft 1s ease-out forwards;
    width: 100%; /* Full width on small screens */
    text-align: center; /* Center text on small screens */
}


/* Form area (glassmorphism) */
.ssmd-donation-right-side {
    flex: 1;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    animation: ssmd-donation-slideInRight 1s ease-out forwards;
    width: 100%; /* Full width on small screens */
    box-sizing: border-box; /* Include padding in width */
}

.ssmd-donation-form {
    display: flex;
    flex-direction: column;
}


.ssmd-donation-form label {
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 6px;
    font-weight: 500;
    font-family: livvic;
}

.ssmd-donation-form input, .ssmd-donation-form select {
    padding: 14px 18px;
    margin-bottom: 20px;
    font-family: livvic;
    width: calc(100% - 36px); /* Adjusted width, subtract padding */
    border: 1px solid #ddd; /* Added border */
    border-radius: 8px;
    box-sizing: border-box; /* Ensure padding doesn't increase width */
}

.ssmd-donation-bank-details {
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    margin-top: 20px;
    border-radius: 15px;
    display: none;
    color: #2d3748;
    text-align: center;
    font-family: livvic;
    width: calc(100% - 40px); /* Adjusted width, subtract padding */
    box-sizing: border-box;
}

.ssmd-donation-thank-you {
    display: none;
    margin-top: 20px;
    text-align: center;
    font-size: 1.2rem;
    color: #48bb78;
    font-family: livvic;
}

.ssmd-donation-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #2ecc71;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    display: none;
    z-index: 1000;
}

/* Animations */
@keyframes ssmd-donation-fadeInUp {
    from {opacity: 0; transform: translateY(50px);}
    to {opacity: 1; transform: translateY(0);}
}

@keyframes ssmd-donation-slideInLeft {
    from {opacity: 0; transform: translateX(-100px);}
    to {opacity: 1; transform: translateX(0);}
}

@keyframes ssmd-donation-slideInRight {
    from {opacity: 0; transform: translateX(100px);}
    to {opacity: 1; transform: translateX(0);}
}
    .ssmd-donation-left-side, .ssmd-donation-right-side {
        text-align: center;
        width: 100%; /* Full width on small screens */
        box-sizing: border-box;
    }
     .ssmd-donation-form input, .ssmd-donation-form select {
          width: calc(100% - 28px);
    }
    .ssmd-donation-bank-details{
       width: calc(100% - 28px);
    }

}

@media (max-width: 480px) {
    .ssmd-donation-section {
        padding: 30px 10px;
    }
    /* Full background */
  .ssmd-donation-section {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('IMAGES/silhouette-catholic-cross-sunrise.jpg') no-repeat center center/cover;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 50px 20px;
}

/* Split layout */
.ssmd-donation-container {
    display: flex;
    max-width: 1200px;
    width: 100%;
    gap: 40px;
    align-items: center;
    justify-content: center;
    animation: ssmd-donation-fadeInUp 1.5s ease-out forwards;
    flex-direction: column; /* Stack elements by default */
}

.ssmd-donation-left-side {
    flex: 1;
    color: #fff;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
    animation: ssmd-donation-slideInLeft 1s ease-out forwards;
    width: 100%; /* Full width on small screens */
    text-align: center; /* Center text on small screens */
}


/* Form area (glassmorphism) */
.ssmd-donation-right-side {
    flex: 1;
    background: rgba(255, 255, 255, 0.15);
    
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    animation: ssmd-donation-slideInRight 1s ease-out forwards;
    width: 100%; /* Full width on small screens */
    box-sizing: border-box; /* Include padding in width */
}

.ssmd-donation-form {
    display: flex;
    flex-direction: column;
}


.ssmd-donation-form label {
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 6px;
    font-weight: 500;
    font-family: livvic;
}

.ssmd-donation-form input, .ssmd-donation-form select {
    padding: 14px 18px;
    margin-bottom: 20px;
    font-family: livvic;
    width: calc(100% - 36px); /* Adjusted width, subtract padding */
    border: 1px solid #ddd; /* Added border */
    border-radius: 8px;
    box-sizing: border-box; /* Ensure padding doesn't increase width */
}

.ssmd-donation-bank-details {
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    margin-top: 20px;
    border-radius: 15px;
    display: none;
    color: #2d3748;
    text-align: center;
    font-family: livvic;
    width: calc(100% - 40px); /* Adjusted width, subtract padding */
    box-sizing: border-box;
}

.ssmd-donation-thank-you {
    display: none;
    margin-top: 20px;
    text-align: center;
    font-size: 1.2rem;
    color: #48bb78;
    font-family: livvic;
}

.ssmd-donation-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #2ecc71;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    display: none;
    z-index: 1000;
}


    .ssmd-donation-left-side h2 {
        font-size: 2rem;
    }
    .ssmd-donation-left-side p {
        font-size: 0.9rem;
    }
    .ssmd-donation-right-side {
        padding: 20px;
    }
     .ssmd-donation-form input, .ssmd-donation-form select {
          width: calc(100% - 20px);
    }
     .ssmd-donation-bank-details{
       width: calc(100% - 20px);
    }
}

/* Styles for the extra donation info section */
#donationExtras {
    padding: 80px 20px;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('IMAGES/silhouette-catholic-cross-sunrise.jpg') no-repeat center center/cover;
    color: #fff;
    text-align: center;
}

#donationExtras h2 {
    font-size: 2.8rem;
    margin-bottom: 40px;
    font-family: 'Livvic', sans-serif;
}

#donationExtras .support-items {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin-bottom: 60px;
}

#donationExtras .support-items div {
    flex: 1 1 200px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 12px;
    font-family: 'Livvic', sans-serif;
}

#donationExtras img {
    width: 60px;
    margin-bottom: 20px;
}

#donationExtras blockquote {
    font-style: italic;
    font-size: 1.5rem;
    margin: 40px 0;
    color: #ecf0f1;
    line-height: 1.4;
}

/* Responsive adjustments for the extra donation info section */
@media (max-width: 768px) {
    #donationExtras {
        padding: 60px 15px;
    }
    #donationExtras h2 {
        font-size: 2.4rem;
    }
    #donationExtras .support-items div {
        flex: 1 1 100%;  /* Make them stack on small screens */
        margin-bottom: 20px; /* Add spacing between stacked items */
    }
    #donationExtras blockquote {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    #donationExtras {
        padding: 50px 10px;
    }
    #donationExtras h2 {
        font-size: 2rem;
    }
    #donationExtras .support-items div {
        padding: 20px;
    }
    #donationExtras blockquote {
        font-size: 1rem;
        margin: 30px 0;
    }
}


/* Animations */
@keyframes ssmd-donation-fadeInUp {
  from {opacity: 0; transform: translateY(50px);}
  to {opacity: 1; transform: translateY(0);}
}

@keyframes ssmd-donation-slideInLeft {
  from {opacity: 0; transform: translateX(-100px);}
  to {opacity: 1; transform: translateX(0);}
}

@keyframes ssmd-donation-slideInRight {
  from {opacity: 0; transform: translateX(100px);}
  to {opacity: 1; transform: translateX(0);}
}













.leadership-page {
  padding: 50px 20px;
  font-family: 'Poppins', sans-serif; /* Consistent font */
  background-color: #f4f4f4;
  color: #333;
}

.leadership-hero {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('IMAGES/church_interior_wide.jpg') center/cover no-repeat; /* Replace with a relevant image */
  color: white;
  text-align: center;
  padding: 100px 20px;
  margin-bottom: 30px;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  font-weight: 700;
}

.hero-content p {
  font-size: 1.2rem;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

.leadership-structure {
  padding: 30px 20px;
  text-align: center;
}

.leadership-structure h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #555;
}

.hierarchy-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 30px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.level-1, .level-2, .level-3, .level-4 {
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 100%;
}

.leader-card {
  background-color: #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  width: 200px; /* Adjust as needed */
}

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

.main-leader {
  background-color: #d4af37;
  color: white;
  width: 250px;
}

.group {
  background-color: #a8dadc;
  color: #1d3557;
}

.committee {
  background-color: #457b9d;
  color: white;
}

.council {
  background-color: #f1faee;
  color: #1d3557;
}

.leader-info h3 {
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.leader-info .role {
  font-size: 0.9rem;
  color: #777;
}

.sub-levels {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

.sub-levels li {
  font-size: 0.95rem;
  margin-bottom: 5px;
}

.leadership-content {
  padding: 30px 20px;
  text-align: center;
}

.leadership-content h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #555;
}

#leader-details {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  text-align: left;
}

/* Responsive Layout */
@media (max-width: 768px) {
  .level-1, .level-2, .level-3, .level-4 {
      flex-direction: column;
      align-items: center;
  }

  .leader-card {
      width: 90%;
      max-width: 300px;
  }
}














/* Custom CSS for perfect centering */
/* Hero Section */
.heroA {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7));
    background-size: cover;
    background-position: center;
    color: white;
    padding: 6rem 0;
    text-align: center;
    
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    
}
.heroA h1 {
    font-family: livvic;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.heroA p {
    font-size: 1.25rem;
    max-width: 700px;
    margin: 0 auto;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
    font-family: livvic;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
    .heroA {
        padding: 4rem 0;
    }
    .heroA h1 {
        font-size: 1.5rem;
    }
    .heroA p {
        font-size: 1rem;
    }
  }
.ssmd-announcement-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  font-family: poppins;
}

.ssmd-announcement-h1, .ssmd-announcement-h2 {
  color: #4a2e0e;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
  
}
.ssmd-announcement-h2{
 font-size: 1.8rem;
}

.ssmd-announcement-p {
  margin-bottom: 1rem;
}

.ssmd-announcement-a {
  color: var(--secondary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.ssmd-announcement-a:hover {
  color: var(--primary-color);
}

.ssmd-announcement-tab-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: whitesmoke;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  
}


.ssmd-announcement-tab-buttons {
  display: flex;
  width: 100%;
}

.ssmd-announcement-tab-button {
  flex: 1;
  padding: 1.2rem;
  text-align: center;
  cursor: pointer;
  background-color: #bbb7b7;
  color: #4a2e0e;
  border: none;
  outline: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-weight: 600;
  font-size: 1.1rem;
}

.ssmd-announcement-tab-button:hover, .ssmd-announcement-tab-button.active {
  background-color: #4a2e0e;
  color: white;
  font-weight: bold;
}

.ssmd-announcement-tab-button.active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ssmd-announcement-tab-content {
  padding: 2rem;
  display: none;
}

.ssmd-announcement-tab-content.active {
  display: block;
}
.ssmd-announcement-parish-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.ssmd-announcement-parish-info h3 {
  color: green;
  text-decoration: underline;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.ssmd-announcement-parish-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ssmd-announcement-parish-info li {
  margin-bottom: 0.75rem;
   display: flex;
  align-items: baseline;
  
}
.gap-6{
  padding: 1rem 1rem 1rem 1rem;
}


.ssmd-announcement-parish-info li strong {
  margin-right: 0.5rem;
  color: black;
  font-weight: 600;
}

.ssmd-announcement-announcements-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: livvic;
}

.ssmd-announcement-announcements-list li {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #4a2e0e;
  font-family: livvic;
}
.ssmd-announcement-announcements-list li:last-child{
border-bottom: none;
}

.ssmd-announcement-announcements-list li strong {
  display: block;
  font-size: 1.2rem;
  color: green;
  margin-bottom: 0.5rem;
  font-family: livvic;
}


.ssmd-announcement-announcements-list li small {
  display: block;
  color: #888;
  margin-bottom: 0.5rem;
}


/* --- Announcements Section Styles ---------------- ----------dynamic section--- */
        .ssmd-announcement-section h2{
          margin-top: 1rem;
          margin-left: 1rem;
          margin-bottom: 1rem;
        }
        .ssmd-announcement-tab-content { margin-top: 20px; }
        .ssmd-announcement-announcements-list li {
            background-color: #fdfdfd; border: 1px solid #eee; padding: 15px; margin-bottom: 10px; border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            display: flex; flex-direction: column;
        }
        .ssmd-announcement-announcements-list li strong { display: block; font-family: livvic; font-size: 1.1em; margin-bottom: 5px; color: #7a4f21; }
        .ssmd-announcement-announcements-list li small { display: block; color: #999; font-family: livvic; font-size: 0.85em; margin-bottom: 10px; }
        .ssmd-announcement-announcements-list li p { line-height: 1.6; color: #555; font-family: livvic; }
        .ssmd-announcement-announcements-list li img { max-width: 100%; height: auto; border-radius: 5px; margin-top: 10px; }


/* Responsive Styles */
@media (max-width: 768px) {
  .ssmd-announcement-tab-buttons {
      flex-direction: row;
  }
  .ssmd-announcement-tab-button {
      width: 100%;
      padding: 1rem;
  }
 
   .ssmd-announcement-parish-info {
      grid-template-columns: 1fr;
  }
  .ssmd-announcement-tab-content{
      padding: 1.5rem;
  }
  .ssmd-announcement-h1{
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .ssmd-announcement-container {
      padding: 1rem;
  }
  
  .ssmd-announcement-h1 {
      font-size: 2rem;
  }
  
   .ssmd-announcement-h2{
      font-size: 1.4rem
  }
  .ssmd-announcement-tab-button {
     font-size: 1rem;
     padding: 1rem;
  }
  .ssmd-announcement-parish-info li{
      flex-direction: column;
      align-items: flex-start;
  }
  .ssmd-announcement-parish-info li strong{
      margin-bottom: 0.2rem
  }
  .added-space{
    margin-left: 2rem;
  }
  .ssmd-announcement-h1{
    font-size: 15px;
  }
}














.ssmd-mass-schedule-section {
            padding: 4rem 1rem 0rem 1rem;
            background: #c0c0c0;
            width: 100%;   /* before it was max-width:100%*/
            margin: 0 auto;
            font-family: 'Poppins', sans-serif;
            overflow: hidden; /* Ensures content stays within rounded corners */
        }

        

        .mass-schedule-header {
            text-align: center;
            margin-bottom: 3rem;
            z-index: 1;
            
            
        }

        .mass-schedule-header h2 {
            font-size: 2.8rem;
            color: white; 
            font-family: 'Livvic', serif;
        }

        .mass-schedule-header h2::after {
            content: '';
            width: 80px;
            height: 4px;
            background: #c59a5f; /* Gold accent */
            display: block;
            margin: 10px auto 0;
            border-radius: 5px;
        }

        .mass-schedule-header p {
            color: white; /* Lighter text for description */
            font-size: 1.1rem;
            margin-top: 0.5rem;
        }

        /* Mobile Mass View Container - Applied Blur and Transparency Here */
        .mobile-mass-view-container {
            max-width: 1000px; /* Adjusted max-width for consistency */
            margin: 20px auto;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white background */
            backdrop-filter: blur(10px); /* Blur effect */
            border-radius: 16px; /* Slightly more rounded */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
            position: relative; /* Ensure it's above the section's overlay */
            z-index: 1;
        }

        /* Tab Styles */
        .mobile-mass-view-tabs {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            border-bottom: 2px solid #ddd;
        }

        .mobile-mass-view-tab {
            padding: 10px 15px;
            cursor: pointer;
            font-size: 1rem;
            color: #777;
            border: none;
            background-color: transparent;
            outline: none;
            border-bottom: 2px solid transparent;
            transition: color 0.3s, border-bottom-color 0.3s; /* Smooth transition */
        }

        .mobile-mass-view-tab:hover {
            color: #2c3e50;
            border-bottom-color: #3498db;
        }

        .mobile-mass-view-tab.active {
            color: #2c3e50;
            font-weight: bold;
            border-bottom-color: #4a2e0e;
        }

        /* Content Styles */
        .mobile-mass-view-content {
            display: none;
            padding-top: 15px; /* Add padding to separate from tabs */
        }

        .mobile-mass-view-content.active {
            display: block;
        }

        .mobile-mass-view-schedule-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: #4a2e0e;
        }

        .mobile-mass-view-schedule-list {
            list-style: none;
            padding: 0;
            margin-bottom: 15px;
        }

        .mobile-mass-view-schedule-list li {
            font-size: 1rem;
            margin-bottom: 5px;
            color: #555;
        }

        .mobile-mass-view-directions {
            margin-bottom: 20px;
        }

        .mobile-mass-view-directions-link {
            display: inline-block;
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 1rem;
            transition: background-color 0.3s; /* Smooth transition */
        }

        .mobile-mass-view-directions-link:hover {
            background-color: #217dbb;
        }

        /* --- Mass Schedule Section Styles-------------------------------------dynamic section --- */
        .ssmd-mass-schedule-section { background-position: center; background-size: cover; }
        .mass-schedule-header { text-align: center; margin-bottom: 30px; }
        .mass-schedule-header p { color: white; }
        .mobile-mass-view-container {
            border: 1px solid #ddd; border-radius: 8px; overflow: hidden;
            background-color: #fdfdfd;
        }
        .mobile-mass-view-tabs { display: flex; justify-content: space-around; background-color: #eee; border-bottom: 1px solid #ddd; font-family: livvic; }
        .mobile-mass-view-tab {
            flex-grow: 1; padding: 15px 0; border: none; background-color: transparent; border-right: 2px solid #000;
            cursor: pointer; font-weight: bold; color: #7a4f21; transition: background-color 0.3s ease;
        }
        .mobile-mass-view-tab.active { background-color: #fff; color: #4a2e0e; }
        .mobile-mass-view-content { padding: 20px; display: none; }
        .mobile-mass-view-content.active { display: block; }
        .mobile-mass-view-schedule-title, .mobile-mass-view-daily-schedule-title { color: #4a2e0e; margin-top: 0; margin-bottom: 15px; }
        .mobile-mass-view-schedule-list li {
            background-color: #fff; border: 1px solid #eee; padding: 10px; margin-bottom: 5px; border-radius: 5px;
            font-weight: 500; color: #555;
        }
        .mobile-mass-view-daily-schedule { margin-top: 20px; padding: 1rem 2rem 0rem 2rem; background-color: #f0f0f0;}
        .mobile-mass-flexupdate { display: flex; flex-wrap: wrap; gap: 20px; }
        .mobile-mass-flexupdate1 { flex: 2; min-width: 280px; } /* Adjust flex basis as needed */
        .mobile-mass-flexupdate2 { flex: 1; min-width: 200px; }
        .mobile-mass-view-daily-schedule-row {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 5px;
            padding: 8px; border-bottom: 1px dashed #eee;
        }
        .mobile-mass-view-daily-schedule-row:last-child { border-bottom: none; }
        .mobile-mass-view-daily-schedule-row.today { background-color: #e6ffe6; font-weight: bold; border-radius: 5px; } /* Highlight today */
        .mobile-mass-view-daily-schedule-cell { padding: 5px; text-align: center; }
        .mobile-mass-flexupdate2img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .mobile-mass-view-map-container { margin-top: 20px; text-align: center; }
        .mobile-mass-view-map-container iframe { max-width: 100%; width: 100%; border-radius: 8px; }
        .mobile-mass-view-button-container { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
        .mobile-mass-view-button {
            background-color: #bd9f67; color: white; padding: 10px 15px; border-radius: 5px; text-decoration: none;
            transition: background-color 0.3s ease;
        }
        .mobile-mass-view-button:hover { background-color: #a37b4f; }



      


        /* Styles for mobile view */
        @media (max-width: 768px) {
            .ssmd-mass-schedule-section {
                padding: 1rem 0.5rem 0rem 0.5rem; /* Adjusted padding for smaller screens */
            }
            .mass-schedule-header h2 {
                font-size: .5rem;
            }
            .mass-schedule-header p {
                font-size: 1rem;
            }
            .mobile-mass-view-container {
                margin: 10px auto; /* Adjust margin for mobile */
                padding: 15px;
                border-radius: 10px; /* Slightly less rounded for mobile */
            }
            .mobile-mass-view-page-title {
                font-size: 1.2rem;
            }
            .mobile-mass-view-tab {
                font-size: 0.9rem;
                padding: 8px 12px;
            }
            .mobile-mass-view-schedule-title {
                font-size: 1rem;
            }
            .mobile-mass-view-schedule-list li {
                font-size: 0.9rem;
            }
            .mobile-mass-view-directions-link {
                font-size: 0.9rem;
                padding: 8px 16px;
            }
            /* Daily Mass Table Specific Mobile Adjustments */
            .mobile-mass-flexupdate {
                flex-direction: column; /* Stack columns */
            }
            .mobile-mass-flexupdate1, .mobile-mass-flexupdate2 {
                width: 100%; /* Full width */
            }
            .mobile-mass-view-daily-schedule-row {
                grid-template-columns: 1fr 1fr 1fr 1fr; /* Adjust grid for smaller cells */
                font-size: 0.85rem;
                padding: 8px;
            }
            .mobile-mass-flexupdate2img {
                height: 200px; /* Smaller image on mobile */
                margin-top: 20px;
            }
        }

        @media (max-width: 480px) {
            .ssmd-mass-schedule-section {
              padding: 3rem 0.5rem 0rem 0.5rem;
            
            }
            .ssmd-mass-schedule-section{
              background-position: 74% 50%;
            }

            .mobile-mass-view-daily-schedule{
              padding: 0rem;
              
              
           }
            .mass-schedule-header h2 {
                font-size: 2rem;
                color: #4a2e0e;
            }
            .mass-schedule-header p {
                font-size: 0.9rem;
                color: #4a2e0e;
            }
            .mobile-mass-view-container {
                padding: 10px;
            }
            .mobile-mass-view-tab {
                font-size: 1rem;
                padding: 6px 10px;
            }
            .mobile-mass-view-schedule-title {
                font-size: 1.5rem;
            }
            .mobile-mass-view-schedule-list li {
                font-size: 1rem;
            }
            .mobile-mass-view-directions-link {
                font-size: 0.8rem;
                padding: 6px 12px;
            }
        }

        /* Map Styles */
        .mobile-mass-view-map-container {
            width: 100%;
            height: 250px; /* Slightly taller map */
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
            transition: box-shadow 0.3s;
        }

        .mobile-mass-view-map-container:hover {
             box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }

        .mobile-mass-view-map-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Button Styles */
        .mobile-mass-view-button-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .mobile-mass-view-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #4a2e0e;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: .8rem;
            font-weight: bold;
            width: 70%;
            text-align: center;
            transition: background-color 0.3s, transform 0.2s;
        }

        .mobile-mass-view-button:hover {
            background-color: #217dbb;
            transform: translateY(-2px);
        }

        .mobile-mass-view-call-button {
            background-color: #2ecc71;
             transition: background-color 0.3s, transform 0.2s;
        }

        .mobile-mass-view-call-button:hover {
            background-color: #27ae60;
            transform: translateY(-2px);
        }

        /* Daily Mass Styles (Table-like structure) */
        .mobile-mass-view-daily-schedule {
            margin-top: 20px;
            /*background-color: #f0f0f0; /* Light background for the whole daily schedule */
           
            
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .mobile-mass-view-daily-schedule-title {
            font-size: 1.4rem; /* Slightly larger title */
            font-weight: 600;
            margin-bottom: 15px;
            color: #4a2e0e; /* A brighter color for Daily Mass */
            text-align: center;
            border-bottom: 2px solid #4a2e0e;
            padding-bottom: 8px;
            margin-left: auto;
            margin-right: auto;
            width: 90%;
        }

        .mobile-mass-flexupdate {
            display: flex;
            flex-wrap: wrap; /* Allows image to wrap below table on small screens */
            gap: 15px;
            align-items: flex-start; /* Align items to the top */
        }

        .mobile-mass-flexupdate1 {
            flex: 2; /* Takes more space for the schedule */
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 300px; /* Ensure schedule table doesn't get too narrow */
        }

        .mobile-mass-flexupdate2 {
            flex: 1; /* Takes less space for the image */
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 150px; /* Minimum width for image container */
        }

        .mobile-mass-flexupdate2img {
            width: 100%;
            height: auto; /* Maintain aspect ratio */
            max-height: 250px; /* Max height for the image */
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 5rem;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

        .mobile-mass-view-daily-schedule-row {
            display: grid;
            grid-template-columns: 1fr repeat(3, 1fr); /* Day + 3 time slots */
            background-color: #ffffff; /* White background for each row */
            padding: 6px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* Subtle shadow for rows */
            transition: background-color 0.3s, transform 0.2s;
            font-size: 0.95rem;
            color: #34495e;
            font-weight: 500;
        }

        .mobile-mass-view-daily-schedule-row:hover {
            background-color: #e8f0f7; /* Light blue on hover */
            transform: translateX(5px);
        }

        .mobile-mass-view-daily-schedule-row.today {
            background-color: #fffacd; /* Light gold for today's row */
            border: 2px solid #f1c40f; /* Gold border for today */
            box-shadow: 0 4px 12px rgba(241, 196, 15, 0.3);
        }

        .mobile-mass-view-daily-schedule-cell {
            padding: 3px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .mobile-mass-view-daily-schedule-cell:first-child {
            font-weight: 700; /* Make day of the week bold */
            color: #2c3e50;
        }







:root {
  
  --secondary-dark: #2d2d2d; /* Slightly lighter dark */
  --text-dark: #333; /* Dark text on light backgrounds */
  --button-bg: #4CAF50; /* Green button */
  --button-hover: #45a049; /* Darker green */
  --section-bg-light: #f8f8f8; /* Light background for content sections */
}



.ssmd-meettheparishpriest-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  
}

/* Hero Section - Inspired by the image */
.ssmd-meettheparishpriest-rector-welcome-hero {
  display: flex;
  flex-direction: row; /* Default desktop layout */
  align-items: center;
  background-color: #1a1a1a;
  color: #e0e0e0;
  min-height: 550px; /* Minimum height for hero */
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  font-family: livvic;
}

.ssmd-meettheparishpriest-rector-image-side {
  flex: 1;
  min-width: 300px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.ssmd-meettheparishpriest-rector-image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover the area */
  display: block;
  /*filter: grayscale(20%) brightness(80%); /* Subtle effect */
  /*transition: filter 0.5s ease;*/
}
.ssmd-meettheparishpriest-rector-image-side img:hover {
  filter: grayscale(0%) brightness(100%);
}

.ssmd-meettheparishpriest-rector-content-side {
  flex: 1.5; /* Content side takes more space */
  padding: 3rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  position: relative;
  z-index: 2;
}

.ssmd-meettheparishpriest-rector-content-side .ssmd-meettheparishpriest-sub-heading {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  color: #fddc9f;
  margin-bottom: 0.5rem;
  opacity: 0.8;
}

.ssmd-meettheparishpriest-rector-content-side h2 {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1.5rem;
  line-height: 1.1;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.ssmd-meettheparishpriest-rector-content-side p {
  font-size: 1.1rem;
  color: #e0e0e0;
  margin-bottom: 2rem;
  max-width: 500px;
}

.ssmd-meettheparishpriest-rector-button {
  display: inline-block;
  padding: 1rem 2rem;
  border: 2px solid #fddc9f;
  color: #fddc9f;
  background-color: transparent;
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05rem;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  margin-right: 1rem;
}

.ssmd-meettheparishpriest-rector-button:hover {
  background-color: #fddc9f;
  color: #1a1a1a;
  box-shadow: 0 5px 15px rgba(253, 220, 159, 0.3);
}

.ssmd-meettheparishpriest-rector-welcome-message {
  display: none; /* Hidden by default */
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #e0e0e0;
  font-size: 1rem;
  line-height: 1.6;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}
.ssmd-meettheparishpriest-rector-welcome-message.active {
  display: block;
}

.ssmd-meettheparishpriest-mass-times-directions {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  color: #e0e0e0;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.ssmd-meettheparishpriest-mass-times-directions:hover {
  opacity: 1;
  color: #fddc9f;
}
.ssmd-meettheparishpriest-mass-times-directions i {
  font-size: 1.2rem;
}

/* General Content Sections */
.ssmd-meettheparishpriest-content-section {
  padding: 4rem 2rem;
  background-color: var(--white);
  border-bottom: 1px solid var(--light-gray);
}
.ssmd-meettheparishpriest-content-section:last-of-type {
  border-bottom: none;
}

.ssmd-meettheparishpriest-content-section h3 {
  font-size: 2.2rem;
  color: #4a2e0e;
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 700;
}

.ssmd-meettheparishpriest-content-section p {
  max-width: 800px;
  margin: 0 auto 1rem auto;
  text-align: justify;
  color: var(--text-dark);
  font-size: 1.05rem;
  font-family: livvic;
}

.ssmd-meettheparishpriest-content-section ul {
  max-width: 800px;
  margin: 0 auto 1rem auto;
  list-style: none; /* Remove default bullet */
  padding: 0;
}
.ssmd-meettheparishpriest-content-section ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
  color: var(--text-dark);
  font-family: livvic;
}
.ssmd-meettheparishpriest-content-section ul li::before {
  content: '\2713'; /* Checkmark icon */
  position: absolute;
  left: 0;
  color: var(--button-bg); /* Use button-bg for checkmark */
  font-weight: bold;
}

.ssmd-meettheparishpriest-office-hours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}
.ssmd-meettheparishpriest-office-hours-grid div {
  background-color: var(--section-bg-light);
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.ssmd-meettheparishpriest-office-hours-grid h4 {
  font-size: 1.3rem;
  color: #4a2e0e;
  margin-bottom: 1rem;
  font-weight: 600;
}
.ssmd-meettheparishpriest-office-hours-grid p {
  margin: 0;
  font-size: 1rem;
  color: var(--text-dark);
  text-align: left; /* Override parent center */
  font-family: livvic;
}
.ssmd-meettheparishpriest-office-hours-grid p strong {
  color: var(--secondary-color);
}


/* Responsive Styles */
@media (max-width: 992px) { /* Tablets and smaller desktops */
  .ssmd-meettheparishpriest-rector-welcome-hero {
      flex-direction: column; /* Stack image and content */
      min-height: auto;
      padding-bottom: 4rem; /* Add padding for stacked content */
  }
  .ssmd-meettheparishpriest-rector-image-side {
      width: 100%;
      height: 350px; /* Fixed height for image on tablets */
  }
  .ssmd-meettheparishpriest-rector-content-side {
      padding: 2rem;
      text-align: center; /* Center text when stacked */
      align-items: center; /* Center items when stacked */
  }
  .ssmd-meettheparishpriest-rector-content-side h2 {
      font-size: 2.8rem;
  }
  .ssmd-meettheparishpriest-rector-content-side p {
      font-size: 1rem;
      max-width: 90%;
  }
  .ssmd-meettheparishpriest-mass-times-directions {
      position: static; /* Remove fixed positioning */
      margin-top: 1.5rem;
      justify-content: center; /* Center when static */
      opacity: 1; /* Always visible */
  }
  .ssmd-meettheparishpriest-rector-button {
      margin-bottom: 1rem;
      margin-right: 0; /* Remove right margin */
  }
  .ssmd-meettheparishpriest-rector-welcome-message {
      margin-top: 1.5rem;
  }
  .ssmd-meettheparishpriest-content-section h3 {
      font-size: 1.8rem;
  }
}

@media (max-width: 600px) { /* Phones */
  .ssmd-meettheparishpriest-container {
      padding: 1rem;
  }
  .ssmd-meettheparishpriest-rector-content-side {
      padding: 1.5rem;
  }
  .ssmd-meettheparishpriest-rector-content-side h2 {
      font-size: 2.2rem;
  }
  .ssmd-meettheparishpriest-rector-content-side p {
      font-size: 0.9rem;
  }
  .ssmd-meettheparishpriest-rector-button {
      padding: 0.8rem 1.5rem;
      font-size: 0.8rem;
  }
  .ssmd-meettheparishpriest-content-section {
      padding: 2.5rem 1rem;
  }
  .ssmd-meettheparishpriest-content-section h3 {
      font-size: 1.6rem;
  }
  .ssmd-meettheparishpriest-content-section p {
      font-size: 0.95rem;
  }
  .ssmd-meettheparishpriest-office-hours-grid {
      grid-template-columns: 1fr; /* Single column on smallest screens */
  }
}















.ssmd-contributionpage-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Hero Section */
.ssmd-contributionpage-hero {
  background-size: cover;
  background-position: center;
  color: #f9fafb; /* --text-light */
  padding: 8rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  font-family: livvic;
}

.ssmd-contributionpage-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Dark overlay */
  z-index: 1;
}

.ssmd-contributionpage-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.ssmd-contributionpage-hero-content h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

.ssmd-contributionpage-hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2.5rem;
  line-height: 1.6;
  opacity: 0.9;
}

.ssmd-contributionpage-button {
  display: inline-block;
  padding: 1rem 2.5rem;
  background-color: #10b981; /* --button-primary-bg */
  color: #ffffff; /* --white */
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.ssmd-contributionpage-button:hover {
  background-color: #059669; /* --button-primary-hover */
  transform: translateY(-3px);
}

/* Content Section */
.ssmd-contributionpage-section {
  padding: 4rem 2rem;
  background-color: #ffffff; /* --white */
  border-bottom: 1px solid #e5e7eb;
  font-family: livvic;
}

.ssmd-contributionpage-section:nth-of-type(even) {
  background-color: #f9fafb; /* --light-bg */
}

.ssmd-contributionpage-section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1f2937; /* --primary-dark */
  text-align: center;
  margin-bottom: 2rem;
}
.ssmd-contributionpage-container {
  font-family: livvic;
  
}
.ssmd-contributionpage-container p{
  margin-bottom: 2rem;
}

.ssmd-contributionpage-section p {
  max-width: 800px;
  margin: 0 auto 1.5rem auto;
  text-align: justify;
  font-size: 1.05rem;
  color: #374151; /* --text-dark */
}

.ssmd-contributionpage-section ul {
  max-width: 800px;
  margin: 0 auto 1.5rem auto;
  list-style: none;
  padding: 0;
}

.ssmd-contributionpage-section ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  font-size: 1.05rem;
  color: #374151; /* --text-dark */
}

.ssmd-contributionpage-section ul li::before {
  content: '\f058'; /* Font Awesome check-circle icon */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  color: #10b981; /* --button-primary-bg */
}

/* Image Gallery Section */
.ssmd-contributionpage-gallery-section {
  padding: 4rem 2rem;
  background-color: #f3f4f6; /* Light gray background */
}

.ssmd-contributionpage-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid columns */
  grid-auto-rows: minmax(200px, auto); /* Auto row height, min 200px */
  gap: 1.5rem;
  max-width: 1000px; /* Limit overall gallery width */
  margin: 0 auto;
}

.ssmd-contributionpage-gallery-item {
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ssmd-contributionpage-gallery-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.ssmd-contributionpage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.ssmd-contributionpage-img:hover {
  transform: scale(1.05);
}

/* Specific image sizes and shapes */
.ssmd-contributionpage-item-large {
  grid-column: span 2; /* Takes 2 columns */
  grid-row: span 2; /* Takes 2 rows */
  min-height: 400px; /* Ensure it's larger */
}

.ssmd-contributionpage-item-medium {
  min-height: 300px;
}

.ssmd-contributionpage-item-small {
  min-height: 200px;
}

.ssmd-contributionpage-rounded-xl {
  border-radius: 1.5rem; /* Large rounded corners */
}

.ssmd-contributionpage-rounded-lg {
  border-radius: 0.75rem; /* Medium rounded corners */
}

.ssmd-contributionpage-circle {
  border-radius: 50%;
}

.ssmd-contributionpage-cut-edge {
  clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 85% 100%, 0% 100%); /* Example cut edge */
  border-radius: 0; /* Override default border-radius if any */
}

/* Quote Section */
.ssmd-contributionpage-quote-section {
  background-color: #374151; /* --secondary-dark */
  color: #f9fafb; /* --text-light */
  padding: 4rem 2rem;
  text-align: center;
}

.ssmd-contributionpage-quote-section h1 {
  font-size: 2.5rem;
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 1.5rem;
  color: white; /* --accent-gold */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

.ssmd-contributionpage-quote-section p {
  font-size: 1.1rem;
  opacity: 0.9;
}

/* Donation Call to Action Section */
.ssmd-contributionpage-cta {
  padding: 5rem 2rem;
  background-color: #1f2937; /* --primary-dark */
  color: #f9fafb; /* --text-light */
  text-align: center;
}

.ssmd-contributionpage-cta h2 {
  font-size: 3rem;
  color: white; /* --accent-gold */
  margin-bottom: 1.5rem;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.ssmd-contributionpage-cta p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 2.5rem auto;
  opacity: 0.9;
}

.ssmd-contributionpage-donate-button {
  display: inline-block;
  padding: 1.2rem 3rem;
  background-color: #f59e0b; /* --button-secondary-bg */
  color: #1f2937; /* --primary-dark */
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.2rem;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.ssmd-contributionpage-donate-button:hover {
  background-color: #d97706; /* --button-secondary-hover */
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
}

/* Modal Styles */
.ssmd-contributionpage-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px); /* Subtle blur behind modal */
}

.ssmd-contributionpage-modal-content {
  background-color: #ffffff; /* --white */
  margin: auto;
  padding: 2rem;
  border-radius: 10px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  position: relative;
  text-align: center;
  animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.ssmd-contributionpage-close-button {
  color: #aaa;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
}

.ssmd-contributionpage-close-button:hover,
.ssmd-contributionpage-close-button:focus {
  color: #1f2937; /* --primary-dark */
  text-decoration: none;
  cursor: pointer;
}

.ssmd-contributionpage-modal-content h3 {
  font-size: 1.8rem;
  color: #1f2937; /* --primary-dark */
  margin-bottom: 1.5rem;
}

.ssmd-contributionpage-modal-content p {
  font-size: 1rem;
  color: #374151; /* --text-dark */
  margin-bottom: 1.5rem;
}

.ssmd-contributionpage-modal-content a {
  display: inline-block;
  padding: 0.8rem 2rem;
  background-color: #10b981; /* --button-primary-bg */
  color: #ffffff; /* --white */
  border-radius: 50px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.ssmd-contributionpage-modal-content a:hover {
  background-color: #059669; /* --button-primary-hover */
}


/* Responsive Adjustments */
@media (max-width: 768px) {
  .ssmd-contributionpage-hero {
      padding: 6rem 1rem;
  }
  .ssmd-contributionpage-hero-content h1 {
      font-size: 2.5rem;
  }
  .ssmd-contributionpage-hero-content p {
      font-size: 1rem;
  }
  .ssmd-contributionpage-button {
      padding: 0.8rem 2rem;
      font-size: 1rem;
  }
  .ssmd-contributionpage-section h2 {
      font-size: 2rem;
  }
  .ssmd-contributionpage-section p, .ssmd-contributionpage-section ul li {
      font-size: 0.95rem;
  }
  .ssmd-contributionpage-quote-section h1 {
      font-size: 2rem;
  }
  .ssmd-contributionpage-cta h2 {
      font-size: 2.5rem;
  }
  .ssmd-contributionpage-cta p {
      font-size: 1.1rem;
  }
  .ssmd-contributionpage-donate-button {
      padding: 1rem 2.5rem;
      font-size: 1.1rem;
  }
  /* Responsive adjustments for gallery */
  .ssmd-contributionpage-gallery-grid {
      grid-template-columns: 1fr; /* Stack all on mobile */
      grid-auto-rows: minmax(250px, auto); /* Adjust row height */
  }
  .ssmd-contributionpage-item-large,
  .ssmd-contributionpage-item-medium,
  .ssmd-contributionpage-item-small {
      grid-column: span 1; /* Reset column span */
      grid-row: span 1; /* Reset row span */
      min-height: 250px; /* Consistent height for all on mobile */
  }
  .ssmd-contributionpage-cut-edge {
      clip-path: none; /* Remove complex clip-path on small screens for simplicity */
      border-radius: 0.75rem; /* Apply standard rounded corners */
  }
}

@media (max-width: 480px) {
  .ssmd-contributionpage-hero {
      padding: 4rem 1rem;
  }
  .ssmd-contributionpage-hero-content h1 {
      font-size: 2rem;
  }
  .ssmd-contributionpage-hero-content p {
      font-size: 0.9rem;
  }
  .ssmd-contributionpage-section h2 {
      font-size: 1.8rem;
  }
  .ssmd-contributionpage-quote-section h1 {
      font-size: 1.8rem;
  }
  .ssmd-contributionpage-cta h2 {
      font-size: 2rem;
  }
  .ssmd-contributionpage-donate-button {
      padding: 0.8rem 2rem;
      font-size: 1rem;
  }
}













/* Header Section */
        .ssmd-ourschoolpage-header {
            background: linear-gradient(to right, #2c3e50, #4a6572); /* Dark blue to teal gradient */
            color: #fff;
            padding: 6rem 2rem 4rem;
            text-align: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }

        .ssmd-ourschoolpage-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('IMAGES/school-background-placeholder.jpg') no-repeat center center/cover; /* Placeholder school image */
            opacity: 0.2; /* Subtle overlay */
            z-index: 0;
        }

        .ssmd-ourschoolpage-header-content {
            position: relative;
            z-index: 1;
            max-width: 900px;
            margin: 0 auto;
        }

        .ssmd-ourschoolpage-header h1 {
            font-family: 'Livvic', sans-serif;
            font-size: 3.8rem;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
            animation: ssmd-ourschoolpage-fadeInDown 1s ease-out forwards;
        }

        .ssmd-ourschoolpage-header p {
            font-size: 1.3rem;
            line-height: 1.6;
            opacity: 0.9;
            font-family: poppins;
            animation: ssmd-ourschoolpage-fadeInUp 1.2s ease-out forwards;
        }

        /* Main Content Sections */
        .ssmd-ourschoolpage-section {
            padding: 4rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            margin-top: -60px; /* Overlap with header */
            position: relative;
            z-index: 2;
            margin-bottom: 3rem;
            font-family: poppins;
        }

        .ssmd-ourschoolpage-section-alt {
            background-color: #f0f4f8; /* Lighter background for alternating sections */
            padding: 4rem 2rem;
            max-width: 1200px;
            margin: 0 auto 3rem;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        }

        .ssmd-ourschoolpage-section h2, .ssmd-ourschoolpage-section-alt h2 {
            font-family: 'Livvic', sans-serif;
            font-size: 2.8rem;
            color: #3e2c1e;
            text-align: center;
            margin-bottom: 2.5rem;
            position: relative;
        }

        .ssmd-ourschoolpage-section h2::after, .ssmd-ourschoolpage-section-alt h2::after {
            content: '';
            width: 100px;
            height: 4px;
            background: #c59a5f; /* Gold accent */
            display: block;
            margin: 15px auto 0;
            border-radius: 5px;
        }

        .ssmd-ourschoolpage-content-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2.5rem;
            align-items: center;
        }

        .ssmd-ourschoolpage-text-block {
            line-height: 1.8;
            font-size: 1.05rem;
            color: #555;
            font-family: poppins;
        }

        .ssmd-ourschoolpage-text-block h3 {
            font-family: 'Livvic', sans-serif;
            font-size: 1.8rem;
            color: #2c3e50;
            margin-bottom: 1rem;
        }

        .ssmd-ourschoolpage-image-block img {
            width: 100%;
            height: auto;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        /* Philosophy/Mission Section Specific */
        .ssmd-ourschoolpage-philosophy-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
        }

        .ssmd-ourschoolpage-card {
            background-color: #fff;
            padding: 2.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
            font-family: poppins;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .ssmd-ourschoolpage-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        .ssmd-ourschoolpage-card i {
            font-size: 3rem;
            color: #c59a5f;
            margin-bottom: 1.5rem;
        }

        .ssmd-ourschoolpage-card h3 {
            font-family: 'Livvic', sans-serif;
            font-size: 1.5rem;
            color: #2c3e50;
            margin-bottom: 1rem;
        }

        .ssmd-ourschoolpage-card p {
            font-size: 0.95rem;
            color: #666;
            line-height: 1.7;
            font-family: poppins;
        }

        /* Curriculum Section Specific */
        .ssmd-ourschoolpage-curriculum-list {
            list-style: none;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .ssmd-ourschoolpage-curriculum-list li {
            background-color: #e8f0f7;
            padding: 1.2rem 1.5rem;
            border-left: 5px solid #3498db;
            border-radius: 8px;
            font-size: 1.05rem;
            color: #444;
            display: flex;
            align-items: center;
            gap: 1rem;
            font-family: poppins;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .ssmd-ourschoolpage-curriculum-list li:hover {
            background-color: #d0e0f0;
            transform: translateX(5px);
        }

        .ssmd-ourschoolpage-curriculum-list li i {
            color: #3498db;
            font-size: 1.2rem;
        }

        /* Facilities Section Specific */
        .ssmd-ourschoolpage-facility-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
        }

        .ssmd-ourschoolpage-facility-item {
            background-color: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .ssmd-ourschoolpage-facility-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        .ssmd-ourschoolpage-facility-item img {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }

        .ssmd-ourschoolpage-facility-info {
            padding: 1.5rem;
        }

        .ssmd-ourschoolpage-facility-info h3 {
            font-family: 'Livvic', sans-serif;
            font-size: 1.4rem;
            color: #2c3e50;
            margin-bottom: 0.8rem;
        }

        .ssmd-ourschoolpage-facility-info p {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.6;
            font-family: poppins;
        }

        /* Admissions Section Specific */
        .ssmd-ourschoolpage-admissions-steps {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .ssmd-ourschoolpage-step-item {
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
            background-color: #fff;
            padding: 1.5rem;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .ssmd-ourschoolpage-step-number {
            font-family: 'Livvic', sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: #c59a5f;
            line-height: 1;
            flex-shrink: 0;
        }

        .ssmd-ourschoolpage-step-content h3 {
            font-family: 'Livvic', sans-serif;
            font-size: 1.6rem;
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }

        .ssmd-ourschoolpage-step-content p {
            font-size: 0.95rem;
            color: #555;
            line-height: 1.7;
            font-family: poppins;
        }

        /* Student Life Section Specific */
        .ssmd-ourschoolpage-student-life-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

        .ssmd-ourschoolpage-activity-card {
            background-color: #fff;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

        .ssmd-ourschoolpage-activity-card:hover {
            transform: translateY(-8px);
            background-color: #f5f5f5;
        }

        .ssmd-ourschoolpage-activity-card i {
            font-size: 2.5rem;
            color: #3498db;
            margin-bottom: 1rem;
        }

        .ssmd-ourschoolpage-activity-card h3 {
            font-family: 'Livvic', sans-serif;
            font-size: 1.4rem;
            color: #2c3e50;
            margin-bottom: 0.8rem;
        }

        .ssmd-ourschoolpage-activity-card p {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.6;
            font-family: poppins;
        }

        /* Call to Action at bottom */
        .ssmd-ourschoolpage-cta-bottom {
            text-align: center;
            padding: 3rem 2rem;
            background-color: #2c3e50;
            color: #fff;
            border-radius: 15px;
            margin: 3rem auto;
            max-width: 1000px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .ssmd-ourschoolpage-cta-bottom h2 {
            font-family: 'Livvic', sans-serif;
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            color: #fddc9f;
        }

        .ssmd-ourschoolpage-cta-bottom p {
            font-size: 1.1rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            font-family: poppins;
        }

        .ssmd-ourschoolpage-cta-button {
            display: inline-block;
            padding: 1rem 2.5rem;
            background: linear-gradient(to right, #f0c242, #d4af37);
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .ssmd-ourschoolpage-cta-button:hover {
            background: linear-gradient(to right, #d4af37, #b8922c);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        }

        /* Back to Home Button */
        .ssmd-ourschoolpage-back-button {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.8rem 1.5rem;
            background-color: #3498db;
            color: #fff;
            text-decoration: none;
            border-radius: 50px;
            font-size: 0.9rem;
            margin: 2rem auto; /* Center the button */
            display: block; /* Make it a block element to apply margin auto */
            width: fit-content; /* Adjust width to content */
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            font-family: poppins;
        }

        .ssmd-ourschoolpage-back-button:hover {
            background-color: #217dbb;
            transform: translateY(-2px);
        }

        /* Animations */
        @keyframes ssmd-ourschoolpage-fadeInDown {
            from { opacity: 0; transform: translateY(-50px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes ssmd-ourschoolpage-fadeInUp {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes ssmd-ourschoolpage-slideInLeft {
            from { opacity: 0; transform: translateX(-50px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes ssmd-ourschoolpage-slideInRight {
            from { opacity: 0; transform: translateX(50px); }
            to { opacity: 1; transform: translateX(0); }
        }

        /* Responsive Adjustments */
        @media (max-width: 992px) {
            .ssmd-ourschoolpage-header h1 {
                font-size: 3rem;
            }
            .ssmd-ourschoolpage-header p {
                font-size: 1.1rem;
            }
            .ssmd-ourschoolpage-section, .ssmd-ourschoolpage-section-alt {
                padding: 3rem 1.5rem;
            }
            .ssmd-ourschoolpage-section h2, .ssmd-ourschoolpage-section-alt h2 {
                font-size: 2.2rem;
            }
            .ssmd-ourschoolpage-content-grid {
                grid-template-columns: 1fr; /* Stack columns */
            }
            .ssmd-ourschoolpage-philosophy-cards,
            .ssmd-ourschoolpage-curriculum-list,
            .ssmd-ourschoolpage-facility-grid,
            .ssmd-ourschoolpage-student-life-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            }
            .ssmd-ourschoolpage-step-item {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            .ssmd-ourschoolpage-step-number {
                margin-bottom: 0.5rem;
            }
            .ssmd-ourschoolpage-cta-bottom h2 {
                font-size: 2rem;
            }
            .ssmd-ourschoolpage-cta-bottom p {
                font-size: 1rem;
            }
        }

        @media (max-width: 768px) {
            .ssmd-ourschoolpage-header {
                padding: 4rem 1rem 3rem;
            }
            .ssmd-ourschoolpage-header h1 {
                font-size: 2.5rem;
            }
            .ssmd-ourschoolpage-header p {
                font-size: 1rem;
            }
            .ssmd-ourschoolpage-section, .ssmd-ourschoolpage-section-alt {
                padding: 2.5rem 1rem;
                margin-top: -40px;
            }
            .ssmd-ourschoolpage-section h2, .ssmd-ourschoolpage-section-alt h2 {
                font-size: 2rem;
                margin-bottom: 2rem;
            }
            .ssmd-ourschoolpage-text-block, .ssmd-ourschoolpage-card p,
            .ssmd-ourschoolpage-curriculum-list li, .ssmd-ourschoolpage-facility-info p,
            .ssmd-ourschoolpage-step-content p, .ssmd-ourschoolpage-activity-card p {
                font-size: 0.9rem;
            }
            .ssmd-ourschoolpage-text-block h3, .ssmd-ourschoolpage-card h3,
            .ssmd-ourschoolpage-facility-info h3, .ssmd-ourschoolpage-step-content h3,
            .ssmd-ourschoolpage-activity-card h3 {
                font-size: 1.3rem;
            }
            .ssmd-ourschoolpage-cta-bottom h2 {
                font-size: 1.8rem;
            }
            .ssmd-ourschoolpage-cta-bottom p {
                font-size: 0.9rem;
            }
            .ssmd-ourschoolpage-cta-button {
                padding: 0.8rem 2rem;
                font-size: 0.95rem;
            }
        }

        @media (max-width: 480px) {
            .ssmd-ourschoolpage-header {
                padding: 3rem 0.5rem 2rem;
            }
            .ssmd-ourschoolpage-header h1 {
                font-size: 2rem;
            }
            .ssmd-ourschoolpage-header p {
                font-size: 0.9rem;
            }
            .ssmd-ourschoolpage-section, .ssmd-ourschoolpage-section-alt {
                padding: 2rem 0.8rem;
                margin-top: -30px;
            }
            .ssmd-ourschoolpage-section h2, .ssmd-ourschoolpage-section-alt h2 {
                font-size: 1.6rem;
            }
            .ssmd-ourschoolpage-philosophy-cards,
            .ssmd-ourschoolpage-curriculum-list,
            .ssmd-ourschoolpage-facility-grid,
            .ssmd-ourschoolpage-student-life-grid {
                grid-template-columns: 1fr; /* Single column on smallest screens */
            }
            .ssmd-ourschoolpage-card, .ssmd-ourschoolpage-facility-item, .ssmd-ourschoolpage-activity-card {
                padding: 1.5rem;
            }
            .ssmd-ourschoolpage-card i, .ssmd-ourschoolpage-activity-card i {
                font-size: 2rem;
            }
            .ssmd-ourschoolpage-cta-bottom h2 {
                font-size: 1.5rem;
            }
            .ssmd-ourschoolpage-cta-button {
                padding: 0.7rem 1.5rem;
                font-size: 0.85rem;
            }
        }













        /* ------------------------------event 1 mainpage------------------------------------------ */
        .ourevent1body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9fafb;
            color: #333;
        }

        
        .ssmd-newsdetailpage-header {
            background: linear-gradient(to right, #2c3e50, #4a6572); /* Dark blue to teal gradient */
            color: #fff;
            padding: 4rem 2rem 3rem;
            text-align: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .ssmd-newsdetailpage-header-content {
            position: relative;
            z-index: 1;
            max-width: 900px;
            margin: 0 auto;
        }

        .ssmd-newsdetailpage-header h1 {
            font-family: 'Livvic', sans-serif;
            font-size: 3rem;
            margin-bottom: 0.8rem;
            text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
        }

        .ssmd-newsdetailpage-header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        /* Main Content Layout */
        .ssmd-newsdetailpage-main-content {
            display: flex;
            flex-wrap: wrap;
            max-width: 1200px;
            margin: 2rem auto;
            gap: 2rem;
            padding: 0 2rem;
        }

        .ssmd-newsdetailpage-article-content {
            flex: 3; /* Main content takes more space */
            min-width: 320px;
            background-color: #fff;
            padding: 2.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .ssmd-newsdetailpage-article-meta {
            font-size: 0.95rem;
            color: #777;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }

        .ssmd-newsdetailpage-article-meta i {
            color: #c59a5f; /* Gold accent for icons */
        }

        .ssmd-newsdetailpage-article-image {
            width: 100%;
            height: 400px; /* Fixed height for consistency */
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 2rem;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        .ssmd-newsdetailpage-article-body h2 {
            font-family: 'Livvic', sans-serif;
            font-size: 2.2rem;
            color: #3e2c1e;
            margin-bottom: 1.5rem;
            line-height: 1.3;
        }

        .ssmd-newsdetailpage-article-body p {
            font-size: 1.05rem;
            line-height: 1.8;
            color: #555;
            margin-bottom: 1.5rem;
        }

        .ssmd-newsdetailpage-article-body ul {
            list-style: disc;
            margin-left: 20px;
            margin-bottom: 1.5rem;
            color: #555;
        }

        .ssmd-newsdetailpage-article-body li {
            margin-bottom: 0.5rem;
            font-size: 1rem;
        }

        .ssmd-newsdetailpage-sidebar {
            flex: 1; /* Sidebar takes remaining space */
            min-width: 280px;
            background-color: #f0f4f8; /* Lighter background for sidebar */
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }

        .ssmd-newsdetailpage-sidebar h3 {
            font-family: 'Livvic', sans-serif;
            font-size: 1.8rem;
            color: #2c3e50;
            margin-bottom: 1.5rem;
            border-bottom: 2px solid #c59a5f; /* Gold underline */
            padding-bottom: 0.5rem;
        }

        .ssmd-newsdetailpage-related-posts ul {
            list-style: none;
            padding: 0;
        }

        .ssmd-newsdetailpage-related-posts li {
            margin-bottom: 1rem;
        }

        .ssmd-newsdetailpage-related-posts a {
            display: block;
            font-size: 1rem;
            color: #3498db;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .ssmd-newsdetailpage-related-posts a:hover {
            color: #217dbb;
            text-decoration: underline;
        }

        .ssmd-newsdetailpage-back-button {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.8rem 1.5rem;
            background-color: #3498db;
            color: #fff;
            text-decoration: none;
            border-radius: 50px;
            font-size: 0.9rem;
            margin: 2rem auto; /* Center the button */
            display: block; /* Make it a block element to apply margin auto */
            width: fit-content; /* Adjust width to content */
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .ssmd-newsdetailpage-back-button:hover {
            background-color: #217dbb;
            transform: translateY(-2px);
        }

        /* Responsive Adjustments */
        @media (max-width: 992px) {
            .ssmd-newsdetailpage-header h1 {
                font-size: 2.5rem;
            }
            .ssmd-newsdetailpage-header p {
                font-size: 1rem;
            }
            .ssmd-newsdetailpage-main-content {
                flex-direction: column; /* Stack columns on tablets */
                padding: 0 1.5rem;
            }
            .ssmd-newsdetailpage-article-content, .ssmd-newsdetailpage-sidebar {
                min-width: unset; /* Allow full width */
                width: 100%;
            }
            .ssmd-newsdetailpage-article-image {
                height: 300px;
            }
            .ssmd-newsdetailpage-article-body h2 {
                font-size: 1.8rem;
            }
            .ssmd-newsdetailpage-article-body p {
                font-size: 1rem;
            }
            .ssmd-newsdetailpage-sidebar h3 {
                font-size: 1.5rem;
            }
        }

        @media (max-width: 768px) {
            .ssmd-newsdetailpage-header {
                padding: 3rem 1rem 2rem;
            }
            .ssmd-newsdetailpage-header h1 {
                font-size: 2rem;
            }
            .ssmd-newsdetailpage-header p {
                font-size: 0.9rem;
            }
            .ssmd-newsdetailpage-main-content {
                padding: 0 1rem;
                margin: 1.5rem auto;
            }
            .ssmd-newsdetailpage-article-content {
                padding: 2rem;
            }
            .ssmd-newsdetailpage-article-image {
                height: 250px;
            }
            .ssmd-newsdetailpage-article-body h2 {
                font-size: 1.5rem;
            }
            .ssmd-newsdetailpage-article-body p {
                font-size: 0.95rem;
            }
            .ssmd-newsdetailpage-sidebar {
                padding: 1.5rem;
            }
            .ssmd-newsdetailpage-sidebar h3 {
                font-size: 1.3rem;
            }
            .ssmd-newsdetailpage-related-posts a {
                font-size: 0.9rem;
            }
        }

        @media (max-width: 480px) {
            .ssmd-newsdetailpage-header {
                padding: 2rem 0.5rem 1.5rem;
            }
            .ssmd-newsdetailpage-header h1 {
                font-size: 1.8rem;
            }
            .ssmd-newsdetailpage-header p {
                font-size: 0.85rem;
            }
            .ssmd-newsdetailpage-main-content {
                padding: 0 0.8rem;
                margin: 1rem auto;
            }
            .ssmd-newsdetailpage-article-content {
                padding: 1.5rem;
            }
            .ssmd-newsdetailpage-article-image {
                height: 200px;
            }
            .ssmd-newsdetailpage-article-body h2 {
                font-size: 1.3rem;
            }
            .ssmd-newsdetailpage-article-body p {
                font-size: 0.9rem;
            }
            .ssmd-newsdetailpage-sidebar {
                padding: 1rem;
            }
            .ssmd-newsdetailpage-sidebar h3 {
                font-size: 1.2rem;
            }
        }


        



        /* ------------------------------event 1 mainpage------------------------------------------ */
        /* Header Section */
        .ourevent2 {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9fafb;
            color: #333;
        }
        .ssmd-newsdetailpage-header {
            background: linear-gradient(to right, #2c3e50, #4a6572); /* Dark blue to teal gradient */
            color: #fff;
            padding: 4rem 2rem 3rem;
            text-align: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .ssmd-newsdetailpage-header-content {
            position: relative;
            z-index: 1;
            max-width: 900px;
            margin: 0 auto;
        }

        .ssmd-newsdetailpage-header h1 {
            font-family: 'Livvic', sans-serif;
            font-size: 3rem;
            margin-bottom: 0.8rem;
            text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
        }

        .ssmd-newsdetailpage-header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        /* Main Content Layout */
        .ssmd-newsdetailpage-main-content {
            display: flex;
            flex-wrap: wrap;
            max-width: 1200px;
            margin: 2rem auto;
            gap: 2rem;
            padding: 0 2rem;
        }

        .ssmd-newsdetailpage-article-content {
            flex: 3; /* Main content takes more space */
            min-width: 320px;
            background-color: #fff;
            padding: 2.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .ssmd-newsdetailpage-article-meta {
            font-size: 0.95rem;
            color: #777;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }

        .ssmd-newsdetailpage-article-meta i {
            color: #c59a5f; /* Gold accent for icons */
        }

        .ssmd-newsdetailpage-article-image {
            width: 100%;
            height: 400px; /* Fixed height for consistency */
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 2rem;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        .ssmd-newsdetailpage-article-body h2 {
            font-family: 'Livvic', sans-serif;
            font-size: 2.2rem;
            color: #3e2c1e;
            margin-bottom: 1.5rem;
            line-height: 1.3;
        }

        .ssmd-newsdetailpage-article-body p {
            font-size: 1.05rem;
            line-height: 1.8;
            color: #555;
            margin-bottom: 1.5rem;
        }

        .ssmd-newsdetailpage-article-body ul {
            list-style: disc;
            margin-left: 20px;
            margin-bottom: 1.5rem;
            color: #555;
        }

        .ssmd-newsdetailpage-article-body li {
            margin-bottom: 0.5rem;
            font-size: 1rem;
        }

        .ssmd-newsdetailpage-sidebar {
            flex: 1; /* Sidebar takes remaining space */
            min-width: 280px;
            background-color: #f0f4f8; /* Lighter background for sidebar */
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }

        .ssmd-newsdetailpage-sidebar h3 {
            font-family: 'Livvic', sans-serif;
            font-size: 1.8rem;
            color: #2c3e50;
            margin-bottom: 1.5rem;
            border-bottom: 2px solid #c59a5f; /* Gold underline */
            padding-bottom: 0.5rem;
        }

        .ssmd-newsdetailpage-related-posts ul {
            list-style: none;
            padding: 0;
        }

        .ssmd-newsdetailpage-related-posts li {
            margin-bottom: 1rem;
        }

        .ssmd-newsdetailpage-related-posts a {
            display: block;
            font-size: 1rem;
            color: #3498db;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .ssmd-newsdetailpage-related-posts a:hover {
            color: #217dbb;
            text-decoration: underline;
        }

        .ssmd-newsdetailpage-back-button {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.8rem 1.5rem;
            background-color: #3498db;
            color: #fff;
            text-decoration: none;
            border-radius: 50px;
            font-size: 0.9rem;
            margin: 2rem auto; /* Center the button */
            display: block; /* Make it a block element to apply margin auto */
            width: fit-content; /* Adjust width to content */
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .ssmd-newsdetailpage-back-button:hover {
            background-color: #217dbb;
            transform: translateY(-2px);
        }

        /* Responsive Adjustments */
        @media (max-width: 992px) {
            .ssmd-newsdetailpage-header h1 {
                font-size: 2.5rem;
            }
            .ssmd-newsdetailpage-header p {
                font-size: 1rem;
            }
            .ssmd-newsdetailpage-main-content {
                flex-direction: column; /* Stack columns on tablets */
                padding: 0 1.5rem;
            }
            .ssmd-newsdetailpage-article-content, .ssmd-newsdetailpage-sidebar {
                min-width: unset; /* Allow full width */
                width: 100%;
            }
            .ssmd-newsdetailpage-article-image {
                height: 300px;
            }
            .ssmd-newsdetailpage-article-body h2 {
                font-size: 1.8rem;
            }
            .ssmd-newsdetailpage-article-body p {
                font-size: 1rem;
            }
            .ssmd-newsdetailpage-sidebar h3 {
                font-size: 1.5rem;
            }
        }

        @media (max-width: 768px) {
            .ssmd-newsdetailpage-header {
                padding: 3rem 1rem 2rem;
            }
            .ssmd-newsdetailpage-header h1 {
                font-size: 2rem;
            }
            .ssmd-newsdetailpage-header p {
                font-size: 0.9rem;
            }
            .ssmd-newsdetailpage-main-content {
                padding: 0 1rem;
                margin: 1.5rem auto;
            }
            .ssmd-newsdetailpage-article-content {
                padding: 2rem;
            }
            .ssmd-newsdetailpage-article-image {
                height: 250px;
            }
            .ssmd-newsdetailpage-article-body h2 {
                font-size: 1.5rem;
            }
            .ssmd-newsdetailpage-article-body p {
                font-size: 0.95rem;
            }
            .ssmd-newsdetailpage-sidebar {
                padding: 1.5rem;
            }
            .ssmd-newsdetailpage-sidebar h3 {
                font-size: 1.3rem;
            }
            .ssmd-newsdetailpage-related-posts a {
                font-size: 0.9rem;
            }
        }

        @media (max-width: 480px) {
            .ssmd-newsdetailpage-header {
                padding: 2rem 0.5rem 1.5rem;
            }
            .ssmd-newsdetailpage-header h1 {
                font-size: 1.8rem;
            }
            .ssmd-newsdetailpage-header p {
                font-size: 0.85rem;
            }
            .ssmd-newsdetailpage-main-content {
                padding: 0 0.8rem;
                margin: 1rem auto;
            }
            .ssmd-newsdetailpage-article-content {
                padding: 1.5rem;
            }
            .ssmd-newsdetailpage-article-image {
                height: 200px;
            }
            .ssmd-newsdetailpage-article-body h2 {
                font-size: 1.3rem;
            }
            .ssmd-newsdetailpage-article-body p {
                font-size: 0.9rem;
            }
            .ssmd-newsdetailpage-sidebar {
                padding: 1rem;
            }
            .ssmd-newsdetailpage-sidebar h3 {
                font-size: 1.2rem;
            }
        }


















        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .mobile-mass-flexupdate { flex-direction: column; }
            .mobile-mass-flexupdate1, .mobile-mass-flexupdate2 { min-width: auto; width: 100%; }
            .mobile-mass-view-button-container { flex-direction: column; gap: 5px; }
            .photo-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
            .photo-grid img { height: 120px; }
            #modal-image { max-width: 95%; max-height: 95%; }
            #photo-modal .close-button { font-size: 30px; top: 10px; right: 15px; }
            .bulletin-item { flex-direction: column; align-items: flex-start; }
            .bulletin-item h4 { margin-bottom: 5px; }
            .bulletin-item .bulletin-buttons { width: 100%; justify-content: flex-start; }
        }
        @media (max-width: 480px) {
            .mobile-mass-view-tab { padding: 10px 0; font-size: 0.9em; }
            .mobile-mass-view-schedule-list li, .mobile-mass-view-daily-schedule-row { font-size: 0.9em; }
            .photo-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
            .photo-grid img { height: 100px; }
        }





        /* --- Main Content Layout --- */
        main {
            flex-grow: 1;
            padding: 2rem 1.5rem;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%; /* Ensure main takes full width of its container */
            box-sizing: border-box; /* Include padding in element's total width and height */
        }

        section {
            background-color: var(--white);
            
            padding: 1.5rem;
            
            box-shadow: var(--shadow-light);
            border: 1px solid rgba(0,0,0,0.05); /* Subtle border */
        }
        @media (min-width: 768px) {
            section {
                padding: 2.5rem;
            }
        }

        /* Section Headings */
        .section-heading {
            font-size: 2rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 2rem;
            color: var(--primary-dark-blue);
        }
        @media (min-width: 768px) {
            .section-heading {
                font-size: 2.5rem;
            }
        }

        /* --- Content Cards (General Style) --- */
        .content-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
        @media (min-width: 640px) {
            .content-grid {
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            }
        }
        @media (min-width: 1024px) {
            .content-grid {
                grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            }
        }

        .card {
            background-color: #fdfdfd;
            border-radius: 0.75rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            /*padding: 1.5rem;*/
            display: flex;
            flex-direction: column;
            /*justify-content: space-between;*/
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            border: 1px solid rgba(0,0,0,0.02);
            border-radius: 20px;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        }
        .content-area{
          padding: 0 1.5rem;
        }
       
        

        
        /* --- Message Box --- */
.message-box {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 350px;
    padding: 1rem 1.25rem;
    border-radius: 0.8rem;
    font-size: 0.9rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    color: white;
    /* Initial state for animation */
    opacity: 0;
    text-align: center;
    display: none; /* Hidden by default */
}
.message-box.success { background-color: #48BB78; } /* Tailwind green-500 */
.message-box.error { background-color: #F56565; } /* Tailwind red-500 */
.message-box.info { background-color: #4299E1; } /* Tailwind blue-500 */
.message-box.warning { background-color: #ECC94B; color: #333; } /* Tailwind yellow-400 */

/* Animations for message box */
@keyframes slideInFromBottom {
    0% { transform: translate(-50%, 150%); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 1; }
}
@keyframes slideInFromRight {
    0% { transform: translateX(150%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* Responsive adjustment for message box on larger screens */
@media (min-width: 768px) {
    .message-box {
        top: 2rem;
        right: 2rem;
        bottom: auto;
        left: auto;
        transform: none;
        width: auto;
        max-width: 400px;
        padding: 1.25rem 2rem;
        border-radius: 1rem;
        font-size: 0.95rem;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        animation: slideInFromRight 0.6s forwards cubic-bezier(0.25, 0.8, 0.25, 1);
    }
}

/* --- Prayer Section Styling --- */
    section#prayer-request-section {
        background: linear-gradient(135deg, #EBF8FF 0%, #FFFFFF 100%); /* --light-blue, --white */
        padding: 4rem 1.5rem; /* More vertical padding */
        border-radius: 1.5rem; /* Softly rounded corners for the section */
        margin: 2rem auto; /* Center the section */
        max-width: 1200px; /* Max width for larger screens */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* --shadow-elevation-2 */
        position: relative; /* For potential future animations */
        overflow: hidden; /* Ensures inner elements stay within bounds */
        animation: fadeInScale 0.8s ease-out forwards;
        background-position: center;
        background-size: cover;
        font-family: livvic;
        display: none;
    }

    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    section#prayer-request-section h2 {
        font-size: 3.5rem; /* Larger headings */
        font-weight: 800; /* Extra bold */
        color: #0A192F; /* --primary-dark-blue */
        text-align: center;
        margin-bottom: 3rem;
        background: linear-gradient(90deg, #2B6CB0, #D69E2E); /* --primary-blue, --accent-gold */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Subtle text shadow */
    }

    /* Prayer Request Form */
    form#prayer-request-form {
        max-width: 600px;
        margin: 0 auto 4rem auto; /* More margin at bottom */
        padding: 2.5rem;
        background: rgba(255, 255, 255, 0.9); /* --form-bg-light */
        border-radius: 1.5rem; /* Match section radius */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* --shadow-elevation-2 */
        border: 1px solid rgba(255, 255, 255, 0.5); /* Light border */
        backdrop-filter: blur(8px); /* Frosted glass effect */
        -webkit-backdrop-filter: blur(8px);
        transform: translateY(0);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    form#prayer-request-form:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); /* --shadow-elevation-3 */
    }

    form#prayer-request-form label {
        font-weight: 600;
        color: #0A192F; /* --primary-dark-blue */
        margin-bottom: 0.75rem;
        display: block;
        font-size: 1.1rem;
    }

    form#prayer-request-form input[type="text"],
    form#prayer-request-form textarea {
        width: 100%;
        padding: 1rem 1.25rem;
        border: 2px solid #EDF2F7; /* --light-gray */
        border-radius: 0.75rem;
        background-color: #FFFFFF; /* --white */
        font-size: 1rem;
        color: #4A5568; /* --dark-gray */
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        outline: none; /* Remove default outline */
    }
    form#prayer-request-form input[type="text"]:focus,
    form#prayer-request-form textarea:focus {
        border-color: #2B6CB0; /* --primary-blue */
        box-shadow: 0 0 0 4px rgba(43, 108, 176, 0.3); /* Softer focus ring */
    }
    form#prayer-request-form textarea {
        min-height: 120px;
        resize: vertical;
    }

    /* Custom Checkbox Styling */
    input[type="checkbox"] {
        /* Hide default checkbox */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 24px;
        height: 24px;
        border: 2px solid #2B6CB0; /* --primary-blue */
        border-radius: 6px;
        background-color: #FFFFFF; /* --white */
        cursor: pointer;
        position: relative;
        transition: all 0.2s ease;
    }

    input[type="checkbox"]:checked {
        background-color: #2B6CB0; /* --primary-blue */
        border-color: #2B6CB0; /* --primary-blue */
    }

    input[type="checkbox"]::after {
        content: '"prayer-section-explicit-colors"713'; /* Checkmark unicode character */
        font-size: 16px;
        color: #FFFFFF; /* --white */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0.2s ease;
    }

    input[type="checkbox"]:checked::after {
        transform: translate(-50%, -50%) scale(1);
    }

    form#prayer-request-form button[type="submit"] {
        width: 100%;
        padding: 1.2rem 2rem;
        background: linear-gradient(45deg, #4A90E2, #2B6CB0); /* --gradient-start, --gradient-end */
        color: #FFFFFF; /* --white */
        font-weight: 700; /* Bolder text */
        font-size: 1.25rem; /* Larger text */
        border-radius: 1rem; /* More rounded */
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* --shadow-elevation-1 */
        text-transform: uppercase; /* All caps */
        letter-spacing: 0.05em; /* Slight letter spacing */
    }
    form#prayer-request-form button[type="submit"]:hover {
        background-position: right center; /* Shifts gradient on hover */
        transform: translateY(-3px) scale(1.02); /* Lift and slightly enlarge */
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); /* --shadow-elevation-3 */
    }
    form#prayer-request-form button[type="submit"]:active {
        transform: translateY(0); /* Press down effect */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* --shadow-elevation-1 */
    }


    /* Prayer Wall Section */
    #prayer-wall-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
        gap: 2rem; /* More space between cards */
        padding: 0;
        margin: 0;
    }

    #prayer-wall-list .prayer-item {
        background: rgba(247, 250, 252, 0.95); /* --card-bg-light */
        padding: 1.8rem; /* More padding */
        border-radius: 1.2rem; /* Softly rounded cards */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* --shadow-elevation-1 */
        position: relative;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-left: 8px solid; /* Thicker accent border */
        border-image: linear-gradient(to bottom, #F6E05E, #D69E2E) 1; /* --accent-light-gold, --accent-gold */
    }
    #prayer-wall-list .prayer-item:hover {
        transform: translateY(-5px); /* Lift on hover */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* --shadow-elevation-2 */
    }

    #prayer-wall-list .prayer-item p:first-child {
        font-family: 'Inter', sans-serif;
        font-size: 1.15rem; /* Slightly larger prayer text */
        color: #0A192F; /* --primary-dark-blue */
        line-height: 1.5;
        margin-bottom: 1.2rem;
        font-weight: 500;
        position: relative;
        padding-left: 20px; /* Space for a quote icon */
    }
    #prayer-wall-list .prayer-item p:first-child::before {
        content: '“'; /* Opening quote */
        font-family: 'Poppins', sans-serif;
        font-size: 3.5rem;
        color: #D69E2E; /* --accent-gold */
        position: absolute;
        left: -5px;
        top: -15px;
        opacity: 0.6;
        line-height: 1;
    }

    #prayer-wall-list .prayer-item .meta {
        font-size: 0.9rem;
        color: #718096; /* --medium-gray */
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem; /* More space for meta info */
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px dashed #EDF2F7; /* --light-gray */
    }

    #prayer-wall-list .prayer-item .prayed-for-button {
        background: #2B6CB0; /* --primary-blue */
        color: #FFFFFF; /* --white */
        padding: 0.6rem 1.2rem; /* More padding */
        border-radius: 0.7rem; /* Rounded corners */
        font-size: 0.9rem;
        cursor: pointer;
        border: none;
        transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        display: inline-flex; /* Allows icon and text to sit nicely */
        align-items: center;
        gap: 0.5rem; /* Space between icon and text */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    #prayer-wall-list .prayer-item .prayed-for-button:hover {
        background-color: #0A192F; /* --primary-dark-blue */
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    #prayer-wall-list .prayer-item .prayed-for-button:active {
        transform: translateY(0);
        box-shadow: none;
    }

    #prayer-wall-list .no-prayers {
        text-align: center;
        font-style: italic;
        color: #718096; /* --medium-gray */
        padding: 3rem;
        font-size: 1.1rem;
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
        section#prayer-request-section {
            padding: 2.5rem 1rem;
            margin: 1rem auto;
            border-radius: 1rem;
        }
        section#prayer-request-section h2 {
            font-size: 2.5rem;
            margin-bottom: 2rem;
        }
        form#prayer-request-form {
            padding: 1.5rem;
            margin-bottom: 3rem;
            border-radius: 1rem;
        }
        form#prayer-request-form button[type="submit"] {
            font-size: 1.1rem;
            padding: 1rem 1.5rem;
            border-radius: 0.8rem;
        }
        #prayer-wall-list {
            gap: 1.5rem;
            grid-template-columns: 1fr; /* Single column on small screens */
        }
        #prayer-wall-list .prayer-item {
            padding: 1.5rem;
            border-radius: 1rem;
            border-left-width: 6px;
        }
        #prayer-wall-list .prayer-item p:first-child {
            font-size: 1rem;
            padding-left: 15px;
        }
        #prayer-wall-list .prayer-item p:first-child::before {
            font-size: 2.5rem;
            top: -10px;
            left: -3px;
        }
        #prayer-wall-list .prayer-item .meta {
            flex-direction: column; /* Stack meta info */
            align-items: flex-start;
            gap: 0.75rem;
            margin-top: 1rem;
            padding-top: 0.75rem;
        }
        #prayer-wall-list .prayer-item .prayed-for-button {
            width: 100%; /* Full width button */
            justify-content: center;
        }
    }



/* ==========================================================================
   Serving Faithful Catholics Section Styles
   ========================================================================== */

.ssmd-serving-faithful-section {
    width: 100vw;
    height: 70vh;
    margin: 0;
    padding: 0;
    
}

.ssmd-serving-faithful-row {
    display: flex;
    width: 100%;
    height: 100%;
}

.ssmd-serving-faithful-title {
    width: 25%;
    background: linear-gradient(to right, #4a2e0e, #664928); /* Dark blue to teal gradient */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2.2rem;
    font-weight: bold;
    font-family: livvic;
    padding: 2rem;
    box-sizing: border-box;
}

.ssmd-serving-faithful-grid {
    width: 75%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.ssmd-serving-faithful-card {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    text-decoration: none;
    isolation: isolate; /* Creates new stacking context */
}

.ssmd-serving-faithful-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
    z-index: 0;
    background-position: center;
    background-size: cover;
    will-change: transform; /* Optimizes animation performance */
}

.ssmd-serving-faithful-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
    z-index: 1;
    transition: opacity 0.3s ease;
}

.ssmd-serving-faithful-card:hover .ssmd-serving-faithful-image {
    transform: scale(1.05); /* More subtle zoom effect */
}

.ssmd-serving-faithful-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: #fff;
    padding: 40px;
    transition: all 0.4s ease;
    transform: translateY(0);
    z-index: 2;
}

.ssmd-serving-faithful-card:hover .ssmd-serving-faithful-overlay {
    transform: translateY(-15px);
}

.ssmd-serving-faithful-overlay h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: livvic;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Responsive layout */
@media (max-width: 768px) {
    .ssmd-serving-faithful-row {
        flex-direction: column;
    }

    .ssmd-serving-faithful-title {
        width: 100%;
        height: auto;
        font-size: 1.8rem;
        padding: 2rem 1rem;
    }

    .ssmd-serving-faithful-grid {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        height: calc(100vh - 150px);
    }

    .ssmd-serving-faithful-card {
        aspect-ratio: 1 / 1;
    }

    .ssmd-serving-faithful-overlay {
        padding: 20px;
    }
}

/* Prevent pixelation on zoom */
.ssmd-serving-faithful-image {
    transform-origin: center;
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Ensure images don't overflow their containers */
.ssmd-serving-faithful-card {
    contain: strict;
}