/*
Theme Name: Waggy
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Waggy is specially designed product packaged for eCommerce pet store websites.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Floating & Alignment
  2.3 Forms
  2.4 Lists
  2.5 Code
  2.6 Tables
  2.7 Spacing
  2.8 Utilities
  2.9 Misc
    - Row Border
    - Zoom Effect
  2.10 Buttons
    - Button Sizes
    - Button Shapes
    - Button Color Scheme
    - Button Aligns
  2.11 Section
    - Hero Section
    - Section Title
    - Section Paddings
    - Section Margins
    - Section Bg Colors
    - Content Colors
    - Content Borders

3. EXTENDED TYPOGRAPHY
  3.1 Blockquote / Pullquote
  3.2 Text Highlights

4. CONTENT ELEMENTS
  4.1 Tabs
  4.2 Accordions
  4.3 Brand Carousel
  4.4 Category Carousel

5. BLOG STYLES
  5.1 Blog Single Post
  5.2 About Author
  5.3 Comments List
  5.4 Comments Form3

6. SITE STRUCTURE
  6.1 Header
    - Header Menu
    - Nav Sidebar
  6.2 Billboard
  6.3 About Us Section
  6.4 Video Section
  6.5 Selling Products Section
  6.6 Quotation Section
  6.7 Latest Blogs Section
  6.8 Newsletter Section
  6.9 Instagram Section
  6.10 Footer
    - Footer Top
    - Footer Bottom

7. OTHER PAGES
  7.1 Product detail
  7.2 Shop page

    
* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  width: 100%;
}

:root {
  /* widths for rows and containers
     */
  --header-height: 160px;
  --header-height-min: 80px;

  /* Global Branding Colors */
  --premium-red: #dc3545;
  --premium-blue: #003366;
  --premium-gold: #DEAD6F;
  --sacred-beige: #fdfaf5;
  --sacred-blue: #003366;
}

.bg-sacred-beige {
  background: var(--sacred-beige) !important;
}

.bg-sacred-blue {
  background: linear-gradient(to bottom, #ffffff 0%, #e1eaf3 100%) !important;
  color: #333;
}

.bg-sacred-blue .premium-heading,
.bg-sacred-blue .divine-title,
.bg-sacred-blue .bible-v6-title {
  color: var(--premium-blue) !important;
}

.bg-sacred-blue .section-subtitle-premium,
.bg-sacred-blue .subscribe-desc {
  color: #555 !important;
}

.bg-sacred-blue .line {
  border-top-color: rgba(0, 0, 0, 0.1) !important;
}

.bg-sacred-blue .icon {
  color: var(--premium-blue) !important;
}

/* Global Title Styles - Standardizing all section headers */
h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.divine-title,
.editorial-title,
.section-title-premium,
.premium-heading,
.title-theme {
  color: var(--premium-blue) !important;
  font-family: 'Playfair Display', serif !important;
}

/* Global Button Styles - Standardizing all primary actions */
.btn-theme,
.btn-divine,
.editorial-btn,
.hero-slide-btn,
.btn-primary,
.divine-btn,
.btn-link-premium {
  background-color: var(--premium-red) !important;
  border-color: var(--premium-red) !important;
  color: #ffffff !important;
  transition: all 0.3s ease !important;
}

.btn-theme:hover,
.btn-divine:hover,
.editorial-btn:hover,
.hero-slide-btn:hover,
.btn-primary:hover,
.divine-btn:hover,
.btn-link-premium:hover {
  background-color: var(--premium-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(0, 51, 102, 0.2) !important;
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}

/* Theme Colors */
:root {
  --primary-color: #003366;
  /* Navy Blue */
  --accent-color: #dc3545;
  /* Red */
  --dark-color: #1a1a1a;
  --light-dark-color: #555555;
  --light-color: #ffffff;
  --grey-color: #dddddd;
  --light-grey-color: #f9f9f9;
  --light-primary-color: rgba(0, 51, 102, 0.05);
}

/* Fonts */
:root {
  --body-font: 'Chilanka', cursive;
  --heading-font: 'Chilanka', cursive;
  --secondary-font: 'Montserrat', sans-serif;
}

:root {
  --primary-font: 'Montserrat', sans-serif;
  --heading-font: 'Montserrat', cursive;
  --secondary-font: 'Times New Roman', serif;
}

body {
  overflow-x: hidden;
  --bs-link-color: #333;
  --bs-link-hover-color: #333;

  --bs-link-color-rgb: 40, 40, 40;
  --bs-link-hover-color-rgb: 0, 0, 0;

  /* --bs-link-color: #DEAD6F;
  --bs-link-hover-color: #DEAD6F; */

  --bs-light-rgb: 248, 248, 248;

  --bs-font-sans-serif: 'Montserrat', cursive;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 2;
  --bs-body-color: #41403E;

  --bs-primary: #dc3545;
  --bs-primary-rgb: 220, 53, 69;

  --bs-primary-bg-subtle: #FFF9EB;
  --bs-border-color: #F7F7F7;

  --bs-secondary-rgb: 230, 243, 251;

  --bs-success-rgb: 238, 245, 228;
  --bs-danger-rgb: 249, 235, 231;
  --bs-warning-rgb: 255, 249, 235;
  --bs-info-rgb: 230, 243, 250;
}

.btn-primary {
  padding: 1.2rem 3rem;
  --bs-btn-color: #fff;
  --bs-btn-bg: #DEAD6F;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #e9b775;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #DEAD6F;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: transparent;
}

.btn-outline-primary {
  transition: all 0.3s ease-in;
  padding: 1.2rem 3rem;
  letter-spacing: 0.02375rem;
  --bs-btn-color: #DEAD6F;
  --bs-btn-border-color: #DEAD6F;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #DEAD6F;
  --bs-btn-hover-border-color: #DEAD6F;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #DEAD6F;
  --bs-btn-active-border-color: #DEAD6F;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #DEAD6F;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #DEAD6F;
  --bs-gradient: none;
}

.btn-outline-dark {
  transition: all 0.3s ease-in;
  padding: 1.2rem 3rem;
  letter-spacing: 0.02375rem;
  text-transform: uppercase;
  --bs-btn-color: #41403E;
  --bs-btn-border-color: #41403E;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #41403E;
  --bs-btn-hover-border-color: #41403E;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #41403E;
  --bs-btn-active-border-color: #41403E;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #41403E;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #41403E;
  --bs-gradient: none;
}

.btn-dark {
  padding: 1.2rem 3rem;
  font-size: 1.1875rem;
  text-transform: uppercase;
  --bs-btn-color: #fff;
  --bs-btn-bg: #41403E;
  --bs-btn-border-color: #41403E;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #363533;
  --bs-btn-hover-border-color: #363533;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #41403E;
  --bs-btn-active-border-color: #41403E;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #41403E;
  --bs-btn-disabled-border-color: #41403E;
}

@media screen and (max-width:991px) {

  .btn-primary,
  .btn-outline-primary,
  .btn-outline-dark,
  .btn-dark {
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
  }
}

body {
  letter-spacing: 0.01625rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  color: var(--bs-body-color);
  font-weight: 400;
}

a {
  text-decoration: none;
}

.breadcrumb.text-white {
  --bs-breadcrumb-divider-color: #fff;
  --bs-breadcrumb-item-active-color: var(--bs-primary);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary);
}

.secondary-font {
  font-family: var(--secondary-font);
  font-weight: 300;
}

/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
/* Preloader */
.preloader-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 111;
  background: #fff;
}

.preloader-wrapper .preloader {
  margin: 20% auto 0;
  transform: translateZ(0);
}

.preloader:before,
.preloader:after {
  content: '';
  position: absolute;
  top: 0;
}

.preloader:before,
.preloader:after,
.preloader {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  animation: animation 1.2s infinite ease-in-out;
}

.preloader {
  animation-delay: -0.16s;
}

.preloader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}

.preloader:after {
  left: 3.5em;
}

@keyframes animation {

  0%,
  80%,
  100% {
    box-shadow: 0 2em 0 -1em var(--accent-color);
  }

  40% {
    box-shadow: 0 2em 0 0 var(--accent-color);
  }
}


/* search bar style  */
.search-bar {
  border: 1px solid #EAEAEA;
}

.search-bar ::placeholder {
  font-family: var(--secondary-font);
}

.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #86b7fe;
  outline: 0;
  box-shadow: none;
}


/* nav bar style  */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.nav-link:focus,
.nav-link:hover {
  color: var(--accent-color);
}

/* category style */
iconify-icon.category-icon {
  color: #ec9c3499;
  font-size: 100px;
  transition: all 0.3s ease-in;

}

a.categories-item:hover iconify-icon.category-icon {
  color: #DEAD6F;
}


/* banner style */
.swiper-pagination-bullet {
  border: 1px solid var(--bs-body-color);
  background-color: transparent;
  opacity: 1;
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 15px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 15px));
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--bs-body-color);
  background: var(--bs-body-color);
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px);
}


#banner {
  width: 100%;
  /* Full width of the container */
  overflow: hidden;
  /* Prevents overflow issues */
}

#banner .swiper-slide {
  display: flex;
  justify-content: center;
  /* Centers the image horizontally */
  align-items: center;
  /* Centers the image vertically */
}

#banner .img-wrapper {
  width: 100%;
  /* Ensures the wrapper takes the full width */
  height: auto;
  /* Maintain proportion */
  overflow: hidden;
  /* Ensures no content overflows */
}

#banner .img-wrapper img {
  width: 100%;
  /* The image scales to match the container width */
  height: auto;
  /* Maintain aspect ratio */
  object-fit: cover;
  /* Ensures the image covers the container */
}



/* pet clothing */
.card {
  --bs-card-inner-border-radius: none;
  --bs-card-bg: transparent;
  background-color: transparent;
  border: none;
}

a.btn-cart {
  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
}

a.btn-wishlist {

  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
}


/* pet foodies style  */
button.filter-button {
  /*  letter-spacing: 0.02125rem;*/
  border: none;
  /*  border-bottom: 2px solid #c56f04;*/
  /*  background: transparent;*/
  /*  text-transform: uppercase;*/
  font-size: 1.0625rem;
  transition: all 0.3s ease-in;
}

button.filter-button.active,
button.filter-button:hover {
  border-bottom: 4px solid #c56f04;
}

/* testimonial style  */
.testimonial-content {
  color: #908F8D;

}

iconify-icon.quote-icon {
  color: #F7EEE4;
  font-size: 14rem;
}


/* register form  */
.form-control {
  color: #908F8D;
  line-height: normal;
  letter-spacing: 0.02125rem;
  text-transform: capitalize;
  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
  background: #FFF;
  display: flex;
  padding: 1.25rem 0rem 1.25rem 1.25rem;
  align-items: center;
  gap: 0.375rem;
  align-self: stretch;
}

.form-control:focus {
  border-color: #41403E;
}


/* blog style */
.blog-paragraph {
  color: #000000;
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  font-family: var(--secondary-font);
}

.blog-read {
  color: #28779f;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
}

a.blog-read {
  border-bottom: 3px solid #D9D9D8;
  transition: all 0.3s ease-in;
}

a.blog-read:hover {
  border-bottom: 3px solid #8a8a8a;
}


/* services style  */
.service-icon {
  font-size: 30px;
  border-radius: 3.125rem;
  border: 2px solid #a9793c;
  padding: 1.25rem;
  color: rgba(195, 112, 7, 1) !important;
}


/* insta style  */
.instagram-item:hover:before,
.instagram-item:hover .icon-overlay {
  opacity: 1;
  cursor: pointer;
}

.icon-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  align-items: center;
  font-size: 3rem;
  cursor: pointer;
  opacity: 0;
  -moz-transition: 0.8s ease;
  -webkit-transition: 0.8s ease;
  transition: 0.8s ease;
}


/* footer style */
iconify-icon.social-icon {
  color: #CACACA;
  font-size: 1.125rem;
  padding: 0.75rem;
  border-radius: 4.375rem;
  border: 1px solid #D9D9D8;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.03);
  transition: all 0.5s ease;
}

li.social:hover iconify-icon.social-icon {
  color: #FFF;
  border: 1px solid #DEAD6F;
  background: #DEAD6F;
}

iconify-icon.send-icon {
  cursor: pointer;
  font-size: 1.125rem;
  padding: 0.75rem;
  border-radius: 4.375rem;
  color: #FFF;
  border: 1px solid #DEAD6F;
  background: #DEAD6F;
}


@media screen and (max-width: 991px) {

  /* offcanvas menu */
  .offcanvas-body .nav-item {
    font-weight: 700;
    border-bottom: 1px solid #d1d1d1;
  }

  .offcanvas-body .filter-categories {
    width: 100%;
    margin-bottom: 20px !important;
    border: 1px solid #d1d1d1 !important;
    padding: 14px;
    border-radius: 8px;
  }

  /* dropdown-menu */
  .dropdown-menu {
    padding: 0;
    border: none;
    line-height: 1.4;
    font-size: 0.9em;
  }

  .dropdown-menu a {
    padding-left: 0;
  }

  .dropdown-toggle::after {
    position: absolute;
    right: 0;
    top: 21px;
  }
}


/*--------------------------------------------------------------
faqs section style start
--------------------------------------------------------------*/
.accordion-button:not(.collapsed) {
  color: var(--body-text-color);
  background-color: transparent;
  box-shadow: none;
}

.accordion {
  --bs-accordion-color: var(--light-text-color);
  --bs-accordion-bg: none;
  --bs-accordion-btn-color: var(--body-text-color);
}

.accordion-button:not(.collapsed)::after {
  background-image: url('https://api.iconify.design/eva/arrow-down-fill.svg?color=%2341403e');

}

.accordion-button::after {
  background-image: url('https://api.iconify.design/eva/arrow-down-fill.svg?color=%2341403e');
}

.accordion-button:focus {
  z-index: 3;
  border-color: none;
  box-shadow: none;
}

/*--------------------------------------------------------------
Account section style start
--------------------------------------------------------------*/
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--accent-color);
}


/*--------------------------------------------------------------
Blog section style start
--------------------------------------------------------------*/
/* ------ Pagination ------*/
.pagination .page-numbers {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  color: var(--bs-body-color);
  padding: 0 10px;
  line-height: 1.4;
  transition: 0.9s all;
  border-radius: 8px;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  color: var(--accent-color);
}

iconify-icon.pagination-arrow {
  color: var(--bs-body-color);
  transition: 0.9s all;
}

iconify-icon.pagination-arrow:hover {
  color: var(--accent-color);
}


/*--------------------------------------------------------------
Single Product section style start
--------------------------------------------------------------*/
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: var(--light-color);
  background-color: var(--accent-color);
}

.main-logo img {
  height: 80px !important;
}

.title-bar .banner-title {
  position: absolute;
  top: 1px;

}

.title-bar span {
  position: absolute;
  top: 50px;
}

#menu li a {
  font-size: 13px;
  font-weight: bold;

}


.footer-menu h6 {
  color: white;
  font-weight: bold
}

.malayalam {
  line-height: 1.8 !important;
  text-align: justify !important;
  font-family: "Noto Sans Malayalam", sans-serif !important;
  font-size: 16px;
  word-break: break-word !important;
  padding: 10px 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.malayalam p {
  line-height: 1.8 !important;
  text-align: justify !important;
  font-family: "Noto Sans Malayalam", sans-serif !important;
  font-size: 18px;
  word-break: break-word !important;
  margin-bottom: 1.5rem;
  border: none !important;
}

.glow-text {
  animation: glow 1s ease-in-out infinite alternate;
  font-weight: 500;
  font-size: .6em;
}

@keyframes glow {
  from {
    text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 3px #efc610, 0 0 4px #f7ac0b;
  }

  to {
    text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 6px #f59b14, 0 0 8px #e67b00;
  }
}

#categories {

  background-color: #F9F3EC;
  background-position: left top, right top;
  /* Sets the background image position to left top */
  background-repeat: no-repeat;

}

.calendar-box {
  bottom: 0px;
  right: 0px;
}

.isotope-container .card {

  height: 450px;
  overflow: hidden;
}

.box-menu {

  font-size: 2em !important;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid #ccc;

}

.radioco-schedule-embed-event {
  font-family: "Noto Sans Malayalam", sans-serif !important;
  font-size: 10px !important;
}

.glance-heading {
  font-size: 12px;
  font-weight: 700;
  color: black;
}

.glance-count {
  font-size: 19px;
  font-weight: bold;
  color: black;
}

.nav-link {
  color: #333 !important;
}

.bg-title {
  color: #8b5c2c !important;
  font-weight: 700;
}

/*#register {
  height: 314px; 
}
#register .container-fluid {
  height: 45%; /* Fills the height of #register */
/*}*/

/*#register .row {
  height: 45%; 
}*/

.parish {
  /*    background: #c3a177 !important;*/
  color: #7e3e04 !important;
  font-weight: bold;
  padding: 5px 0px;
  border: 3px solid rgb(40, 119, 159) !important;
}

.catholic1 {
  min-height: 55px;
  width: 80%;
  margin-bottom: 15px;
  text-align: center;
  margin-top: 16px;
  margin: 7px;
  height: 60px;
  margin-left: 31px;
}

.catholic1 h5 {


  margin: 0px;
  color: rgb(40, 119, 159) !important;
  padding: 15px;
}

.border3 {
  border-radius: 3px;
}

.catholic h5 {
  font-size: 19px;
}

.vertical-marquee {
  position: relative;
  overflow: hidden;
  height: 200px;
  /* Adjust to fit your layout */
}

.marquee-content {
  position: absolute;
  top: 100%;
  animation: scrollTopToBottom 8s linear infinite;
}

@keyframes scrollTopToBottom {
  0% {
    top: 100%;
  }

  100% {
    top: -100%;
    /* Adjust based on content height */
  }
}

.catholic-sec {
  text-align: center;

}

.bg-family {
  background: #ebdac0 !important;
}

.bg-forane {
  background: #f1c792 !important;
}

.bg-parish {
  background: #ebdac0 !important;
}

.bg-priest {
  background: #f1c792 !important;
}

.bg-heading {
  background: #8b5c2c !important;
}

.cardinal {

  height: 300px !important;
}


.oval-card {
  border-radius: 50px;
  /* Rounded corners */
  padding: 2rem;
  text-align: center;
  /*background-color:  #f1efeb !important;*/
  margin: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.small-card {
  max-width: 500px;
  /* Restricts the card width */
  margin: auto;
  /* Centers the card */
  padding: 10px;
  /* Reduces internal spacing */
  font-size: 0.9rem;
  /* Slightly decreases font size */
}


.filter-button {
  background-color: #28779f;
  color: white;
  /* Text color for the buttons */
  border: none;
  transition: background-color 0.3s ease;
  /* Smooth transition when changing background */
}

.filter-button.active {
  background-color: gray;
  /* Active button's background color */
}

.my {

  margin-left: 500px !important;
  /*        margin-top: -30px !important;*/

}

/*.image-container {
    text-align: center; /* Center align the image */
}

/*.button-group {
    display: flex;
    justify-content: center; /* Center all buttons horizontally */
gap: 20px;
/* Add space between buttons */
margin-top: 20px;
/* Adjust spacing from the image */
}

*/ .news-container {
  display: inline-block;
  position: relative;
  margin: 10px;
  width: 300px;
  /* Adjust width as needed */
}

.news-title {
  /*  background: linear-gradient(to bottom right, #ff7f50, #1e90ff); */
  padding: 10px 20px;
  font-size: 18px;
  color: #d78400;
  /* Text color */
  font-weight: bold;
  clip-path: polygon(-3% 0, 100% 0, 17% 100%, 0% 100%);
  margin-top: 10px;
  border: 1px solid #017182;
  /* Border color */
  position: relative;
}

.news-container::after {
  content: '';
  position: absolute;
  top: 50%;
  /* Adjusted for center alignment */
  left: 100%;
  /* Extends to the right */
  width: 200px;
  /* Length of the extending line */
  height: 1px;
  /* Thickness of the line */
  /*  background-color: #017182; */
  transform: translateY(-50%);
  /* Centering the line vertically */
}




.responsive-img {
  max-width: 100%;
  /* Ensures the image doesn't exceed the width of its container */
  height: auto;
  /* Keeps the image's aspect ratio intact */
  display: block;
  /* Avoids extra spacing below the image */
  margin: 0 auto;
  /* Centers the image if needed */
  object-fit: cover;
  /* Ensures the image fills its container appropriately */
}

/* Optional: Style adjustments for different screen sizes */
@media (max-width: 768px) {
  .responsive-img {
    max-width: 90%;
    /* Adjust width for smaller screens */
  }
}


/* Media Queries */
@media (max-width: 768px) {

  #register .col-md-3,
  #register .col-md-6 {
    padding: 10px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: none;
    /* Hide navigation buttons on smaller screens */
  }
}

/* Show items only on mobile screens */
.show_mobile {
  display: none;
  /* Hidden by default */
}

@media (max-width: 991px) {
  .show_mobile {
    display: block;
    /* Visible on screens smaller than 992px */
    padding-left: 5px;
  }
}






/* Show elements on devices larger than 991px (tablets and desktops) */
@media (max-width: 991px) {
  .dont_show_mobile {
    display: none;
    /* Hide on mobile devices */
  }
}


@media (max-width: 767px) {
  #menu li a {
    font-size: 10px;
    /* Smaller font size for mobile devices */
    font-weight: bold;
    padding-left: 10px;
    /* Adjust padding for mobile */
  }
}

.isotope-container {
  display: flex;
  flex-wrap: wrap;
  /* Allows items to wrap to the next row if necessary */
  gap: 16px;
  /* Adjust the spacing between items */
}

.isotope-container .item {
  flex: 1 1 calc(33.333% - 16px);
  /* Three columns layout */
  box-sizing: border-box;
  /* Include padding and border in the width */
}

@media (max-width: 768px) {
  .isotope-container .item {
    flex: 1 1 100%;
    /* Single column layout for smaller screens */
  }
}

.isotope-container .item {
  display: none;
  /* Hide all items initially */
}

.isotope-container .item.show {
  display: block;
  /* Show filtered items */
}

.gallery-image {
  height: 300px;
  /* Set the fixed height for all images */
  object-fit: cover;
  /* Ensures the image fills the container without stretching */
  width: 100%;
  /* The width will adjust automatically to maintain the aspect ratio */
}

.gap-md {
  gap: 10px !important;
}

.content_sublist {
  width: 300px !important;
  padding-left: 5px !important;
}



.post {
  background: white;
  padding-bottom: 10px;
  /*  -webkit-box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.72);
-moz-box-shadow:    0px 0px 11px 0px rgba(50, 50, 50, 0.72);
box-shadow:         0px 0px 11px 0px rgba(50, 50, 50, 0.72);*/

  margin-top: 10px;
}

/*@media (min-width:768px){
.directory {
  height: 150px !important;
}*/

/*#searchview .row.d-flex {
    display: flex;
    flex-wrap: wrap;
}*/

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

@media only screen and (max-width: 800px) {

  /* Force table to not be like tables anymore */
  .caption table,
  .caption thead,
  .caption tbody,
  .caption th,
  .caption td,
  .caption tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  .caption thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .caption tr {
    border: 1px solid #ccc;
  }

  .caption td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align: left;
  }

  .caption td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
  }

  /*
  Label the data
  */
  .caption td:before {
    content: attr(data-title);
  }
}

.panel-default {
  border-color: transparent;
}

.panel-default>.panel-heading,
.panel {
  background-color: #e6e6e6;
  border: 0 none;
  box-shadow: none;
}

.panel-default>.panel-heading+.panel-collapse .panel-body {
  background: #fff;
  color: #858586;
}

.panel-body {
  padding: 20px 20px 10px;
  /*   background:white url(../img/bg.jpg) repeat;*/
  background-color: white !important;
}

.panel-group .panel+.panel {
  margin-top: 0;
  border-top: 1px solid #d9d9d9;
}

.panel-group .panel {
  border-radius: 0;
}

.panel-heading {
  border-radius: 0;
}

.panel-title>a {
  color: #4e4e4e;
}

.accordion-inner img {
  border-radius: 4px;
}

.accordion-inner h4 {
  margin-top: 0;
}

.panel-heading.active {
  background: #1f1f20;
}

.panel-heading.active .panel-title>a {
  color: #fff;
}


/*.remove-border
{
  border:none;
}
*/
.blue-top-border {


  padding-top: 10px;
  border-radius: 0px;
  background: white url(../img/graybg.png) repeat-x;
  border-width: 3px;
  border-style: solid;

  border-image:
    linear-gradient(to bottom,
      #ccc,
      rgba(0, 0, 0, 0)) 1 100%;
}


/*.brown-top-border
{
  border-top:5px solid rgb(40, 119, 159);
  margin-top:10px; 
  border-radius:0px;
  background:white url(../img/graybg.png) repeat-x
}*/

.img-thumbnail {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.img-circle {
  border-radius: 50%;
}

h3.captionhead {
  padding: 0 0 0 14px;
  font-size: 1.2rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: #851b04;
  background: transparent;
  background-color: transparent;
  border-left: 4px solid #DEAD6F;
  margin-bottom: 14px;
  text-shadow: none;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}


.label {
  padding: 4px 6px;
  border: none;
  text-shadow: none;
}

.label {
  /* font-weight: 300 !important; */
}

.label {
  font-weight: 300 !important;
  border-radius: 4px;
}


.label-danger {
  background-color: #d9534f;
}

.label {
  /* display: inline; */
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

.thumbnail {
  position: relative;
  border-left: 5px solid #d87524;
  /* First left border (orange) */
  /*    border-right: 5px solid #d87524;  */
  padding-left: 15px;
  /* Adjust padding to leave room for the left border */
}

.thumbnail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  /* First top border width */
  height: 100%;
  /* Full height of the card */
  background-color: #d87524;
  /* First top border (orange) */
}

.thumbnail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 5px;
  /* Adjust to position the second border next to the first one */
  width: 5px;
  /* Second top border width */
  height: 100%;
  /* Full height of the card */
  background-color: rgb(40, 119, 159);
  /* Second top border (blue) */
}

.card_thumb {

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  /* Adds shadow effect */
  border-radius: 5px;
  /* Optional: rounded corners for the panel */
  overflow: hidden;
  /* Ensures the shadow does not bleed out of the panel */
}

.pope-image {
  height: 400px;
  padding-left: 100px;
}

@media (max-width: 576px) {
  .pope-image {
    height: auto;
    /* Remove the fixed height */
    padding-left: 0;
    /* Remove the padding */
  }
}




.parish-name {
  color: #d87524;
  font-size: 14px;
  font-weight: bold;


}

/* Premium Modal Close Button Styling */
#squarespaceModal .close {
  background-color: #ffffff !important;
  color: #db7705 !important;
  opacity: 1 !important;
  width: 35px !important;
  height: 35px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  right: -10px !important;
  top: -10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
  z-index: 1051;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#squarespaceModal .close:hover {
  transform: scale(1.1) rotate(90deg) !important;
  background-color: #f8f9fa !important;
}

#squarespaceModal .close span {
  font-size: 24px !important;
  line-height: 1 !important;
  display: block !important;
}

/* =============================================
   Our Patron Spotlight Section
   ============================================= */
/* =============================================
   Editorial Patron Spotlight (V11)
   ============================================= */
.patron-editorial-section {
  background-color: #f7f3ed;
  /* Deeper background shade */
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(212, 175, 55, 0.15);
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

.patron-editorial-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M50 20v60M20 50h60" stroke="rgba(212,175,55,0.02)" stroke-width="0.5" fill="none"/></svg>');
  pointer-events: none;
}

.editorial-label {
  color: #D4AF37;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.8rem;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: 'Lora', serif;
  white-space: nowrap;
}

.editorial-label::after {
  content: '';
  flex: 0 0 50px;
  height: 1px;
  background: #D4AF37;
}

.editorial-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: #A31F24;
  /* Premium Catholic Red */
  line-height: 1.1;
  margin-bottom: 15px;
  font-family: 'Playfair Display', serif;
}

.editorial-tagline {
  font-size: 1.2rem;
  color: #D4AF37;
  font-weight: 500;
  margin-bottom: 30px;
  font-style: italic;
  font-family: 'Lora', serif;
  opacity: 0.9;
}

.editorial-divider {
  width: 120px;
  height: 3px;
  background: linear-gradient(to right, #D4AF37, transparent);
  margin-bottom: 40px;
}

.editorial-body {
  font-size: 1.1rem;
  line-height: 1.95;
  color: #444;
  font-family: 'Lora', serif;
  text-align: justify;
}

.editorial-body p {
  margin-bottom: 20px;
}

.editorial-meta {
  display: flex;
  gap: 50px;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  padding-top: 35px;
  margin-top: 40px;
}

.meta-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #D4AF37;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 8px;
  font-family: 'Lora', serif;
}

.meta-value {
  font-size: 1.1rem;
  color: #1a3c5a;
  font-weight: 600;
  font-family: 'Playfair Display', serif;
}

.editorial-img-container {
  position: relative;
  padding: 15px;
  background: #ffffff;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
  display: inline-block;
  transition: transform 0.5s ease;
}

.editorial-img-container:hover {
  transform: translateY(-10px);
}

.editorial-img-bg {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid #D4AF37;
  border-radius: 25px;
  z-index: -1;
  opacity: 0.5;
}

.editorial-img {
  border-radius: 12px;
  max-width: 100%;
  height: auto;
  display: block;
}

.patron-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.patron-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.3s;
}

.patron-dot.active {
  background: #fff;
  border-color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
  .patron-content-wrap {
    flex-direction: column;
    align-items: center;
    padding: 40px 24px 50px;
    text-align: center;
  }

  .patron-text-col,
  .patron-img-col {
    flex: none;
    max-width: 100%;
    padding-right: 0;
  }

  .patron-title {
    font-size: 2.2rem;
  }

  .patron-desc {
    margin: 0 auto 24px;
  }

  .patron-sunburst {
    right: 50%;
  }

  .patron-saint-img {
    max-height: 260px;
  }

  .patron-label {
    display: block;
    text-align: center;
  }
}

/* =============================================
   Saints & Blesseds Section (Clean White)
   ============================================= */
.saints-section-white {
  background: #edf4f8;
  /* More distinct but still elegant light blue background */
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(40, 119, 159, 0.1);
  border-bottom: 1px solid rgba(40, 119, 159, 0.1);
}



.saints-white-heading {
  font-size: 2rem;
  font-weight: 700;
  color: #28779f;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
  font-family: 'Montserrat', sans-serif;
}

.saints-white-subheading {
  font-size: 1.1rem;
  color: #28779f;
  /* Updated to professional blue as requested */
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 45px;
  font-family: 'Lora', serif;
}


/* White Saints Cards */
.saints-white-card {
  background: transparent;
  text-align: center;
  padding: 0 10px;
}

.saints-white-img-wrap {
  width: 70%;
  /* Reduced for a more compact look as requested */
  margin: 0 auto 20px;
  position: relative;
  /* Enforce a uniform aspect ratio / height */
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.saints-white-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Scrollbar styles for the Saints Swiper */
.saints-swiper-scrollbar.swiper-scrollbar {
  background: rgba(0, 0, 0, 0.05);
  height: 4px;
  bottom: -5px;
  /* Positioned slightly closer */
}

.saints-swiper-scrollbar .swiper-scrollbar-drag {
  background: #d4b572;
  /* Muted gold to match arrows */
  cursor: grab;
}

.saints-white-label {
  padding: 10px 5px;
}

.saints-white-name {
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  margin: 0 0 5px;
}

.saints-white-date {
  font-size: 0.8rem;
  color: #888;
  margin: 0;
}

/* White Section Navigation Arrows */
.saints-white-swiper-prev,
.saints-white-swiper-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 10;
  width: 38px;
  height: 38px;
  background: #d4b572;
  /* Muted gold circle */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 0.9rem;
  transition: background 0.3s ease;
  user-select: none;
}

.saints-white-swiper-prev {
  left: 10px;
}

.saints-white-swiper-next {
  right: 10px;
}

/* Pagination Dots Styling (Leading Lights) */
.saints-white-pagination {
  margin-top: 30px !important;
  position: relative !important;
  bottom: 0 !important;
}

.saints-white-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #d4b572;
  /* Gold */
  opacity: 0.4;
  margin: 0 6px !important;
  transition: all 0.3s ease;
}

.saints-white-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: #c0392b;
  /* Red accent for active dot */
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(192, 57, 43, 0.4);
}

.saints-white-swiper-prev:hover,
.saints-white-swiper-next:hover {
  background: #c5a059;
}

@media (max-width: 992px) {
  .saints-white-swiper-prev {
    left: 0px;
  }

  .saints-white-swiper-next {
    right: 0px;
  }
}

@media (max-width: 768px) {
  .saints-section-white {
    padding: 50px 0;
  }

  .saints-white-heading {
    font-size: 1.8rem;
  }
}

/* =============================================
   Important Days Section (Premium Cards)
   ============================================= */
.important-days-section {
  background: linear-gradient(to bottom, #fdfcfb 0%, #e2d1c3 100%);
  /* Elegant warm gradient */
  padding: 60px 0;
  position: relative;
}

.important-days-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../img/pattern-subtle.png');
  /* Add a subtle texture if exists */
  opacity: 0.05;
}

.day-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
}

.day-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.day-image-wrap {
  position: relative;
  height: 220px;
  /* Reduced height for more compact cards */
  overflow: hidden;
}

.day-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 1.2s ease;
}

.day-card:hover .day-image-wrap img {
  transform: scale(1.08);
}

.day-overlay-text {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  padding: 0 20px;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.3px;
  line-height: 1.1;
  z-index: 2;
  transition: all 0.3s ease;
}

.day-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  padding: 4px 14px;
  border-radius: 30px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 1px;
}

.day-image-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
  z-index: 1;
}

.sacred-line-divider {
  width: 40px;
  height: 2px;
  background: #A31F24;
  border-radius: 2px;
  opacity: 0.8;
}

.milestones-subtitle {
  color: #28779f !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  margin-top: 12px;
}

/* Specific tint for the first card as example */
.day-card-tint-red .day-image-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(163, 31, 36, 0.3);
  z-index: 1;
}

.day-footer {
  display: flex;
  padding: 0;
  flex-grow: 1;
}

.day-date-box {
  background: #f8f9fa;
  color: #A31F24;
  padding: 12px 10px;
  min-width: 85px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #f0f0f0;
}

.day-date-box .month {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  color: #999;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.day-date-box .day {
  font-size: 1.8rem;
  font-weight: 800;
  display: block;
  line-height: 1;
  color: #A31F24;
}

.day-info {
  padding: 10px 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
}

.day-info .day-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 5px;
}

.day-info .day-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #666;
  margin: 0;
}


.day-info .day-desc {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0;
  line-height: 1.3; /* Tightened from 1.4 */
  font-weight: 400;
  text-align: justify; /* Justified as requested */
}

@media (max-width: 768px) {
  .day-image-wrap {
    height: 240px;
  }

  .day-overlay-text {
    font-size: 1.3rem;
  }

  .important-days-section {
    padding: 60px 0;
  }
}

/* =============================================
   Madhyasthan Subscription Section
   ============================================= */
.subscribe-section {
  background: linear-gradient(to bottom, #ffffff 0%, #e1eaf3 100%);
  padding: 80px 0;
  color: #333;
  position: relative;
  overflow: hidden;
}

.subscribe-section::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 250px;
  height: 250px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  z-index: 0;
}

.subscribe-container-flex {
  display: flex;
  align-items: center;
  gap: 60px;
  position: relative;
  z-index: 1;
}

.subscribe-content {
  flex: 1;
}

.subscribe-title {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 15px;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.1;
}

.subscribe-desc {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 35px;
  line-height: 1.6;
  max-width: 600px;
}

.subscribe-form-wrap {
  background: #fff;
  padding: 8px;
  border-radius: 100px;
  display: flex;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  max-width: 700px;
  /* Increased width */
}

.subscribe-input {
  border: none;
  padding: 15px 30px;
  flex-grow: 1;
  border-radius: 100px;
  outline: none;
  font-size: 1.1rem;
  color: #333;
}

.subscribe-btn {
  background: #db7705;
  /* Accent Orange */
  color: #fff !important;
  border: none;
  padding: 15px 40px;
  border-radius: 100px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  text-decoration: none !important;
  cursor: pointer;
}

.subscribe-btn:hover {
  background: #b66304;
  transform: translateX(5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.subscribe-image-wrap {
  flex: 0 0 380px;
  position: relative;
}

.subscribe-image-wrap img {
  width: 100%;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.4));
  transform: rotate(-8deg);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.subscribe-section:hover .subscribe-image-wrap img {
  transform: rotate(-3deg) scale(1.08);
}

@media (max-width: 991px) {
  .subscribe-container-flex {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

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

  .subscribe-title {
    font-size: 2.2rem;
  }

  .subscribe-image-wrap {
    flex: 0 0 280px;
    order: -1;
  }

  .subscribe-form-wrap {
    width: 100%;
  }
}



/* =============================================
   About Section — Premium Editorial (Playfair Display)
   ============================================= */
.archdiocese-about-section {
  background: #fff;
  overflow: hidden;
}

/* ---- Left: Full-Height Image Panel ---- */
.about-image-panel {
  position: relative;
  min-height: 520px;
  overflow: hidden;
}

.about-full-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.8s ease;
}

.about-image-panel:hover .about-full-img {
  transform: scale(1.05);
}

.about-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.about-year-ribbon {
  padding-left: 18px;
  color: #fff;
}

.about-year-ribbon .ribbon-year {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}

.about-year-ribbon .ribbon-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 5px;
}

/* ---- Right: Text Panel ---- */
.about-text-panel {
  background: #fafbfc;
  display: flex;
  align-items: center;
}

.about-content-inner {
  padding: 55px 60px;
  max-width: 680px;
}

.about-tag-line {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #db7705;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 18px;
  font-family: 'Montserrat', sans-serif;
}

.tag-line-dash {
  display: inline-block;
  width: 32px;
  height: 2px;
  background: #db7705;
  border-radius: 2px;
  flex-shrink: 0;
}

.about-main-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.6rem;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 18px;
}

.about-main-title strong {
  display: block;
  font-weight: 800;
  color: #28779f;
  font-style: italic;
}

.about-decorative-quote {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-style: italic;
  color: #888;
  border-left: 3px solid #db7705;
  padding-left: 16px;
  margin-bottom: 22px;
  line-height: 1.6;
}

.about-body-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.93rem;
  color: #555;
  line-height: 1.85;
  margin-bottom: 25px;
  text-align: justify;
}

/* ---- Stats Strip ---- */
.about-stats-strip {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 16px 22px;
  margin-bottom: 25px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.stat-block {
  flex: 1;
  text-align: center;
}

.stat-block .stat-number {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #28779f;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-block .stat-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  color: #999;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.stat-divider {
  width: 1px;
  height: 38px;
  background: #e8e8e8;
  flex-shrink: 0;
}

/* ---- CTA Button ---- */
.about-read-more-btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 34px;
  background: #28779f;
  color: #fff !important;
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 8px 22px rgba(40, 119, 159, 0.25);
}

.about-read-more-btn:hover {
  background: #1a5a7a;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(40, 119, 159, 0.35);
  color: #fff !important;
}

@media (max-width: 991px) {
  .about-image-panel {
    min-height: 300px;
  }

  .about-content-inner {
    padding: 40px 30px;
  }

  .about-main-title {
    font-size: 2rem;
  }
}

@media (max-width: 576px) {
  .about-content-inner {
    padding: 30px 20px;
  }

  .about-main-title {
    font-size: 1.7rem;
  }

  .about-stats-strip {
    flex-direction: column;
    gap: 12px;
  }

  .stat-divider {
    width: 60px;
    height: 1px;
  }
}


/* ---- Image Side ---- */
.about-img-container {
  position: relative;
  padding: 20px 20px 20px 0;
}

/* Blue accent block behind image */
.about-img-accent-block {
  position: absolute;
  top: 0;
  left: 20px;
  width: 85%;
  height: 85%;
  background: #28779f;
  border-radius: 16px;
  z-index: 0;
  opacity: 0.12;
}

.about-img-wrapper {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.about-diocese-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.about-img-wrapper:hover .about-diocese-img {
  transform: scale(1.04);
}

/* Floating year badge */
.about-year-badge {
  position: absolute;
  bottom: 0px;
  right: 0px;
  background: #28779f;
  color: #fff;
  border-radius: 12px;
  padding: 14px 20px;
  text-align: center;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(40, 119, 159, 0.35);
  line-height: 1;
}

.about-year-badge .year-num {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
}

.about-year-badge .year-text {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.8;
  margin-top: 4px;
}

/* ---- Text Side ---- */
.about-content-wrap {
  padding-left: 20px;
}

.about-tag-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #db7705;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 16px;
}

.about-tag-line .tag-line-dash {
  display: inline-block;
  width: 30px;
  height: 2px;
  background: #db7705;
  border-radius: 2px;
}

.about-main-title {
  font-size: 2.2rem;
  font-weight: 300;
  color: #1a1a1a;
  line-height: 1.25;
  margin-bottom: 20px;
  font-family: 'Montserrat', sans-serif;
}

.about-main-title strong {
  font-weight: 800;
  color: #28779f;
  display: block;
}

.about-body-text {
  font-size: 0.97rem;
  color: #555;
  line-height: 1.85;
  margin-bottom: 28px;
  text-align: justify;
}

/* ---- Stats Strip ---- */
.about-stats-strip {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 18px 25px;
  margin-bottom: 28px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.stat-block {
  flex: 1;
  text-align: center;
}

.stat-block .stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #28779f;
  font-family: 'Montserrat', sans-serif;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-block .stat-label {
  display: block;
  font-size: 0.72rem;
  color: #888;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: #e0e0e0;
  flex-shrink: 0;
}

/* ---- CTA Button ---- */
.about-read-more-btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 35px;
  background: #28779f;
  color: #fff !important;
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(40, 119, 159, 0.25);
}

.about-read-more-btn:hover {
  background: #1a5a7a;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(40, 119, 159, 0.35);
  color: #fff !important;
}

@media (max-width: 991px) {
  .archdiocese-about-section {
    padding: 55px 0;
  }

  .about-content-wrap {
    padding-left: 0;
    margin-top: 30px;
  }

  .about-diocese-img {
    height: 280px;
  }

  .about-main-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 576px) {
  .about-stats-strip {
    flex-direction: column;
    gap: 15px;
  }

  .stat-divider {
    width: 80px;
    height: 1px;
  }
}

/* Subtle background watermark */
.archdiocese-about-section::before {
  content: '✝';
  position: absolute;
  top: 10%;
  right: -5%;
  font-size: 40rem;
  color: rgba(40, 119, 159, 0.03);
  font-family: 'Times New Roman', serif;
  transform: rotate(15deg);
  pointer-events: none;
}

.about-label {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #db7705;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
  position: relative;
  padding-left: 50px;
}

.about-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;
  height: 2px;
  background: #db7705;
}

.about-main-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #28779f;
  line-height: 1.1;
  margin-bottom: 25px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -1px;
}

.about-main-title span {
  display: block;
  font-weight: 300;
  color: #1a1a1a;
  font-size: 2.2rem;
}

.about-body-text {
  font-size: 1.15rem;
  color: #555;
  line-height: 1.9;
  margin-bottom: 40px;
  text-align: justify;
}

/* Stats Container */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 30px;
}

.stat-item {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 10px;
  border-left: 4px solid #28779f;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transform: translateY(-5px);
}

.stat-number {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: #28779f;
}

.stat-label {
  font-size: 0.8rem;
  color: #888;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}

.about-read-more-btn {
  display: inline-flex;
  align-items: center;
  padding: 16px 45px;
  background: #28779f;
  color: #fff !important;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none !important;
  transition: all 0.4s ease;
  box-shadow: 0 10px 30px rgba(40, 119, 159, 0.2);
}

.about-read-more-btn:hover {
  background: #1a5a7a;
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(40, 119, 159, 0.3);
}

/* Image Column Refinement */
.about-img-container {
  position: relative;
  padding: 40px;
}

.about-img-bg-decoration {
  position: absolute;
  top: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background: #f0f4f7;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  animation: blob-animate 15s infinite alternate;
  z-index: 0;
}

.about-img-wrapper {
  position: relative;
  z-index: 1;
  padding: 15px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.about-diocese-img {
  width: 100%;
  border-radius: 10px;
  transition: transform 0.6s ease;
}

.about-img-wrapper:hover .about-diocese-img {
  transform: scale(1.05);
}

@keyframes blob-animate {
  0% {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }

  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

@media (max-width: 991px) {
  .archdiocese-about-section {
    padding: 80px 0;
  }

  .about-main-title {
    font-size: 2.8rem;
  }

  .about-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .about-stats {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   Full-Width Hero Slider
   ============================================= */
.hero-banner-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
}

.hero-main-swiper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.hero-slide {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 640;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0.60) 0%,
      rgba(0, 0, 0, 0.35) 50%,
      rgba(0, 0, 0, 0.20) 100%);
  z-index: 1;
}

.hero-slide-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-slide-title {
  font-size: 3rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero-slide-desc {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  margin-bottom: 1.8rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-slide-btn {
  display: inline-block;
  padding: 12px 36px;
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.hero-slide-btn:hover {
  background: #ffffff;
  color: #28779f;
  text-decoration: none;
}

/* Navigation Arrows */
.hero-swiper-button-prev,
.hero-swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
  color: #fff;
  font-size: 1rem;
  user-select: none;
}

.hero-swiper-button-prev {
  left: 20px;
}

.hero-swiper-button-next {
  right: 20px;
}

.hero-swiper-button-prev:hover,
.hero-swiper-button-next:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: #fff;
}

/* Pagination Dots */
.hero-swiper-pagination {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

.hero-swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.6) !important;
  opacity: 1;
  margin: 0 4px;
  transition: background 0.3s;
}

.hero-swiper-pagination .swiper-pagination-bullet-active {
  background: #ffffff !important;
  transform: scale(1.3);
}

/* Suppress blue progressbar from Swiper CDN on hero */
.hero-main-swiper .swiper-pagination-progressbar {
  display: none !important;
}

/* Gallery / Bestselling swiper button colours */
.bestselling-swiper .swiper-button-next,
.bestselling-swiper .swiper-button-prev {
  color: #28779f !important;
}

/* AI Chat Popup */
.ai-chat-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: white;
  padding: 10px 15px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  font-size: 14px;
  border: 1px solid #eee;
}

.ai-chat-popup .close-chat {
  cursor: pointer;
  color: #999;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-slide {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 200px !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
  }

  .hero-slide-title {
    font-size: 1.8rem;
  }

  .hero-slide-desc {
    font-size: 0.95rem;
  }

  .hero-swiper-button-prev,
  .hero-swiper-button-next {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }
}


/* View All Saints Button */
.saints-view-all-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 30px;
  background: #fff;
  color: #28779f;
  border: 2px solid #28779f;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(40, 119, 159, 0.1);
}

.saints-view-all-btn:hover {
  background: #28779f;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(40, 119, 159, 0.2);
  text-decoration: none;
}

/* Bible Reading V6 - Unique Glassmorphism */
/* Bible Reading - Sacred Editorial Design */
.bible-v6-section {
  background-color: #fdfcf8;
  /* Soft parchment shade */
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.bible-v6-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.bible-editorial-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px;
}

.bible-icon-accent {
  font-size: 2.5rem;
  color: #D4AF37;
  margin-bottom: 20px;
  filter: drop-shadow(0 4px 10px rgba(212, 175, 55, 0.2));
}

.bible-v6-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #A31F24;
  letter-spacing: -0.5px;
}

.bible-title-line {
  width: 80px;
  height: 3px;
  background: #D4AF37;
  margin-top: 15px;
  border-radius: 2px;
}

.bible-controls-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.bible-v6-toggle {
  background: #ffffff;
  padding: 5px;
  border-radius: 50px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
  display: flex;
}

.bible-v6-toggle-btn {
  border: none;
  background: transparent;
  padding: 10px 25px;
  border-radius: 50px;
  font-family: 'Lora', serif;
  font-size: 1rem;
  font-weight: 600;
  color: #666;
  transition: all 0.4s ease;
}

.bible-v6-toggle-btn.active {
  background: #28779f;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(40, 119, 159, 0.2);
}

.bible-v6-date-picker {
  background: #ffffff;
  padding: 8px 25px;
  border-radius: 50px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.3s ease;
}

.bible-v6-date-picker:hover {
  border-color: #D4AF37;
}

.bible-v6-date-picker i {
  color: #D4AF37;
  font-size: 1.1rem;
}

.bible-v6-date-picker input {
  border: none;
  outline: none;
  font-family: 'Lora', serif;
  font-weight: 600;
  color: #333;
}

.bible-v6-card {
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid rgba(212, 175, 55, 0.1);
  transition: transform 0.4s ease;
}

.bible-v6-card:hover {
  transform: translateY(-8px);
}

.bible-v6-header {
  background: linear-gradient(135deg, #1a3c5a 0%, #28779f 100%);
  padding: 25px 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  color: #ffffff;
}

.bible-v6-cross-icon {
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.bible-v6-date-display {
  font-family: 'Lora', serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.bible-v6-body {
  padding: 60px 45px;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bible-v6-no-data {
  font-family: 'Lora', serif;
  font-size: 1.2rem;
  color: #888;
  font-style: italic;
  max-width: 80%;
  line-height: 1.6;
}

.bible-v6-footer {
  padding: 20px 40px;
  background: #fcfaf5;
  border-top: 1px solid #f0e6d2;
  text-align: center;
}

.bible-v6-more-link {
  font-family: 'Lora', serif;
  color: #28779f;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.bible-v6-more-link:hover {
  color: #A31F24;
}


/* ==========================================================================
   PREMIUM INSTITUTIONAL DESIGN SYSTEM (RED & BLUE)
   ========================================================================== */

/* 1. Global Components */
.premium-card {
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
}

.premium-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

/* 2. Header & Navigation */
.nav-link-top-premium {
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 14px !important;
  display: block;
  text-decoration: none;
  transition: all 0.3s ease;
}

.nav-link-top-premium:hover {
  color: var(--accent-color) !important;
  background: rgba(255, 255, 255, 0.05);
}

.nav-divider {
  width: 1px;
  height: 15px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 5px;
}

/* Custom scrollbar hide for mobile quick links */
.custom-scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.custom-scrollbar-hide::-webkit-scrollbar {
  display: none;
}

@media (max-width: 991px) {
  .top-nav {
    justify-content: flex-start !important;
    padding: 2px 0;
  }
  .nav-link-top-premium {
    white-space: nowrap;
    padding: 8px 12px !important;
  }
}

.nav-item-top {
  position: relative;
}

.main-nav-link {
  color: #333 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 15px 12px !important;
  display: block;
  position: relative;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.main-nav-link::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 12px;
  right: 12px;
  height: 3px;
  background: var(--accent-color);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  border-radius: 2px;
}

.main-nav-link:hover::after,
.main-nav-link.active::after {
  transform: scaleX(1);
}

.main-nav-link:hover,
.main-nav-link.active {
  color: var(--accent-color) !important;
}

/* Unified subtle dividers */
.nav-divider {
  width: 1px;
  height: 15px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 5px;
}

.main-nav-divider {
  width: 1px;
  height: 20px;
  background: rgba(0, 0, 0, 0.05);
  align-self: center;
}



/* Partition Vertical Line */
@media (min-width: 992px) {
  .navbar-brand {
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    padding-right: 20px;
    margin-right: 20px;
  }
}


/* 3. Leading Lights Section Redesign */
.premium-leading-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  height: 100%;
  min-height: 320px;
  position: relative;
  padding: 10px;
}

.premium-leading-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12), 0 0 25px rgba(200, 16, 46, 0.15) !important;
  border-color: rgba(200, 16, 46, 0.3);
}

.leading-img-glow {
  position: relative;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.leading-img-glow::before {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(200, 16, 46, 0.08) 0%, transparent 70%);
  border-radius: 20px;
  transition: all 0.5s ease;
}

.premium-leading-card:hover .leading-img-glow::before {
  transform: scale(1.3);
  background: radial-gradient(circle, rgba(200, 16, 46, 0.12) 0%, transparent 70%);
}

.leading-portrait {
  width: 180px;
  height: 220px;
  border-radius: 20px;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  transition: all 0.5s ease;
}

.premium-leading-card:hover .leading-portrait {
  border-color: var(--accent-color);
  transform: translateY(-8px) scale(1.02);
}

.leading-name {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 2px;
  line-height: 1.3;
  font-family: 'Georgia', serif;
}

.leading-tag {
  color: var(--accent-color);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 15px;
  display: inline-block;
  background: rgba(200, 16, 46, 0.05);
  padding: 5px 15px;
  border-radius: 50px;
}

.leading-desc {
  color: #0e0d0d;
  font-size: 0.95rem;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
  text-align: justify;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.profile-btn-premium {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-color);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.profile-btn-premium::after {
  content: '\f061';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}

.profile-btn-premium:hover {
  color: var(--primary-color);
}

.profile-btn-premium:hover::after {
  transform: translateX(5px);
}

/* =============================================
   Premium Gallery Section
   ============================================= */
.bestselling-swiper {
  padding: 30px 0 60px;
}

.premium-gallery-card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.5s ease;
  background: #fff;
  height: 100%;
  position: relative;
}

.premium-gallery-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.gallery-image-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
}

.gallery-image {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform 1s ease;
}

.premium-gallery-card:hover .gallery-image {
  transform: scale(1.1);
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 51, 102, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.4s ease;
}

.premium-gallery-card:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay i {
  color: #fff;
  font-size: 1.8rem;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

.premium-gallery-card:hover .gallery-overlay i {
  transform: translateY(0);
}

/* Clean Background */
#archdiocese-gallery {
  background: #ffffff !important;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

/* Hide captions if added previously */
.gallery-glass-caption {
  display: none !important;
}

.premium-gallery-card:hover .gallery-overlay i {
  transform: scale(1);
}

/* Swiper Nav Refinement */
.bestselling-swiper .swiper-button-next,
.bestselling-swiper .swiper-button-prev {
  width: 45px;
  height: 45px;
  background: #fff;
  border-radius: 50%;
  color: var(--primary-color);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.bestselling-swiper .swiper-button-next:after,
.bestselling-swiper .swiper-button-prev:after {
  font-size: 1.1rem;
  font-weight: bold;
}

.bestselling-swiper .swiper-button-next:hover,
.bestselling-swiper .swiper-button-prev:hover {
  background: var(--primary-color);
  color: #fff;
}

.gallery-view-more {
  border-radius: 50px !important;
  border: 2px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  font-weight: 700 !important;
  padding: 8px 25px !important;
  font-size: 0.85rem !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease !important;
}

.gallery-view-more:hover {
  background: var(--primary-color) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.section-bg-pattern {
  background-color: #fdfdfd;
  background-image: radial-gradient(#eee 0.5px, transparent 0.5px);
  background-size: 20px 20px;
}

.section-title-premium {
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 30px;
}

.section-title-premium::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--accent-color);
  border-radius: 2px;
}

.section-subtitle-premium {
  color: #222; /* Set to dark for maximum legibility as requested */
  font-size: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* 4. News & Filters */
.filter-buttons-premium {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.filter-btn {
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--primary-color);
  color: #fff;
  box-shadow: 0 5px 15px rgba(0, 51, 102, 0.2);
}

.btn-link-premium {
  color: var(--accent-color);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.btn-link-premium:hover {
  color: var(--primary-color);
  padding-left: 5px;
}

/* 4. Statistics / At Glance */
.glance-section-premium {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 80px 0;
}

.stat-card-premium {
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: 100%;
}

.stat-card-premium:hover {
  background: var(--primary-color);
  transform: translateY(-5px);
}

.stat-card-premium:hover .stat-icon,
.stat-card-premium:hover .stat-number,
.stat-card-premium:hover .stat-label {
  color: #fff !important;
}

.stat-icon {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 15px;
  display: block;
}

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: 5px;
  display: block;
}

.stat-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 1px;
}


#footer-bottom a {
  color: var(--accent-color);
}

/* ===== ABOUT SECTION DIVINE ===== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

.archdiocese-about-divine {
  background: linear-gradient(to bottom, #fdfcfb 0%, #e2d1c3 100%) !important;
  z-index: 1;
}

.divine-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.8) 0%, rgba(245, 242, 235, 0.6) 100%);
  z-index: -2;
}

.divine-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Very subtle repeating pattern - like damask or cross */
  background-image: url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><path d="M30 10v40M10 30h40" stroke="rgba(212,175,55,0.03)" stroke-width="1" fill="none"/></svg>');
  z-index: -1;
}

.about-image-divine {
  position: relative;
  padding: 15px;
  /* Spacing for the image to fit inside the border */
}

.divine-img-border {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid #D4AF37;
  /* Elegant Gold */
  border-radius: 15px;
  /* Square with slight rounding */
  z-index: -1;
  transition: all 0.6s ease;
}

.about-image-divine:hover .divine-img-border {
  top: 10px;
  left: 10px;
}

.about-main-img-divine {
  border-radius: 15px;
  border: 6px solid #ffffff;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
  height: auto;
  max-height: 450px;
  /* Capped height */
  width: 100%;
  object-fit: cover;
}

.divine-year-badge {
  position: absolute;
  bottom: 40px;
  left: -20px;
  background: #ffffff;
  padding: 20px;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  border: 4px solid #fdfcf8;
}

.bounce-anim-slow {
  animation: floatDivine 6s ease-in-out infinite;
}

@keyframes floatDivine {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.divine-cross-icon {
  color: #D4AF37;
  font-size: 1.2rem;
}

.badge-year-divine {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #003366;
  line-height: 1.1;
  margin-top: 5px;
}

.badge-text-divine {
  font-family: 'Lora', serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: #777;
  letter-spacing: 2px;
}

.divine-tagline {
  font-family: 'Lora', serif;
  font-size: 0.75rem; /* Reduced from 0.85rem */
  font-weight: 700; /* Increased weight for darkness */
  color: #8b6e15; /* Darkened Gold */
  text-transform: uppercase;
  letter-spacing: 2px; /* Reduced from 3px */
}

.divine-tagline i {
  font-size: 0.75rem;
  opacity: 0.8;
}

.divine-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem; /* Reduced from 2rem */
  font-weight: 800;
  color: #80181c; /* Darker Institutional Red */
  line-height: 1.1;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
}



.divine-divider {
  display: flex;
  align-items: center;
  width: 60%;
}

.divine-divider .line {
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #D4AF37, transparent);
}

.divine-divider .icon {
  color: #D4AF37;
  padding: 0 15px;
  font-size: 0.9rem;
}

.divine-blockquote {
  font-family: 'Lora', serif;
  font-size: 1.1rem; /* Reduced from 1.2rem */
  font-style: italic;
  color: #001f3f; /* Darker Navy Blue */
  line-height: 1.6;
}

.divine-blockquote::before {
  content: '\201C';
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  position: absolute;
  left: 0;
  top: -10px;
  color: #D4AF37;
  opacity: 0.3;
  line-height: 1;
}

.divine-desc {
  font-family: 'Lora', serif;
  font-size: 0.9rem; /* Reduced from 0.95rem */
  color: #111111; /* Darkened from #333 */
  line-height: 1.7;
  text-align: justify;
}

.stat-card-divine {
  background: #ffffff;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  padding: 12px 8px !important; /* Reduced box size */
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.stat-card-divine::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #D4AF37;
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.stat-card-divine:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 51, 102, 0.08);
}

.stat-card-divine:hover::after {
  transform: scaleX(1);
}

.stat-icon-wrap {
  color: #D4AF37;
  font-size: 1.5rem;
  opacity: 0.8;
}

.stat-num-divine {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; /* Reduced from 2rem */
  font-weight: 800;
  color: #001f3f; /* Darker Navy */
}

.stat-name-divine {
  font-family: 'Lora', serif;
  font-size: 0.65rem; /* Reduced from 0.75rem */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #333333; /* Darkened from #777 */
}

.btn-divine {
  background: linear-gradient(135deg, #28779f 0%, #1a5c7a 100%);
  color: #ffffff !important;
  font-family: 'Lora', serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 14px 45px;
  border: none;
  border-radius: 50px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 10px 20px rgba(40, 119, 159, 0.2);
  display: inline-block;
  text-decoration: none !important;
}

.btn-divine:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(40, 119, 159, 0.35);
  color: #ffffff !important;
  opacity: 0.9;
}


.news-premium-card {
  border: 2px solid #222 !important;
  /* Bold Dark Border */
  border-radius: 15px !important;
  padding: 15px !important;
  /* Internal padding for breathability */
  transition: all 0.4s ease !important;
  background: #ffffff !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.news-premium-card:hover {
  border-color: #28779f !important;
  box-shadow: 0 12px 25px rgba(40, 119, 159, 0.15) !important;
  transform: translateY(-8px);
}

.news-premium-card img {
  border-radius: 10px !important;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16/10;
}

.news-premium-card .card-title {
  font-family: 'Playfair Display', serif !important;
  color: #333 !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  line-height: 1.4 !important;
  margin-top: 15px !important;
}

.news-premium-card .blog-read {
  color: #28779f !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.news-premium-card .blog-read:hover {
  text-decoration: underline !important;
}

@media (max-width: 991px) {
  .about-main-img-divine {
    height: 400px;
  }

  .divine-title {
    font-size: 1.6rem;
    white-space: normal;
  }
}

/* --- Premium News Editorial Grid --- */
.news-tabs-premium .nav-pills .nav-link {
  background: #f8f9fa !important;
  color: #555 !important;
  border: 1px solid #eee !important;
  margin: 0 8px;
  border-radius: 50px !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
  font-family: 'Lora', serif;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.news-tabs-premium .nav-pills .nav-link.active {
  background: linear-gradient(135deg, #28779f 0%, #1a5c7a 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 20px rgba(40, 119, 159, 0.25) !important;
  transform: translateY(-2px);
}

.news-editorial-card {
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.news-editorial-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
  border-color: #28779f33;
}

.card-img-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
}

.card-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.news-editorial-card:hover .card-img-container img {
  transform: scale(1.1);
}

.news-date-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: linear-gradient(135deg, #A31F24 0%, #7a1519 100%);
  padding: 10px 14px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(163, 31, 36, 0.3);
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.news-date-badge .day {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 2px;
}

.news-date-badge .month {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 1px;
}

.card-body-editorial {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.editorial-card-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

.editorial-card-title a {
  color: #1a1a1a !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.editorial-card-title a:hover {
  color: #28779f !important;
}

.editorial-card-footer {
  margin-top: auto;
  border-top: 1px solid #f0f0f0;
  padding-top: 20px;
}

.editorial-read-more {
  display: inline-flex;
  align-items: center;
  font-family: 'Lora', serif;
  font-weight: 700;
  color: #28779f !important;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.editorial-read-more i {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.editorial-read-more:hover {
  color: #A31F24 !important;
}

.editorial-read-more:hover i {
  transform: translateX(5px);
}

.divine-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.divine-divider .line {
  height: 2px;
  background: linear-gradient(to right, transparent, #A31F24, transparent);
  flex-grow: 1;
  border: none !important;
}

.divine-divider .icon {
  color: #A31F24;
  font-size: 1.4rem;
  opacity: 0.8;
}


/* ==========================================================================
   CAPTURING MOMENTS GALLERY
   ========================================================================== */
#archdiocese-gallery {
  background: #fdfdfd;
}

.capturing-moments-header {
  border-bottom: 2px solid #eee;
  padding-bottom: 15px;
}

.capturing-title {
  color: #38a141;
  /* Green color matching screenshot */
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
}

.capturing-title i {
  font-size: 1.6rem;
}

.capturing-view-all {
  color: #38a141;
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.capturing-view-all:hover {
  color: #2b7a32;
}

.capturing-moment-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: none;
  margin: 15px 5px;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: calc(100% - 30px);
}

.capturing-moment-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.capturing-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.capturing-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.capturing-moment-card:hover .capturing-img-wrap img {
  transform: scale(1.1);
}

.capturing-card-body {
  padding: 20px;
  background: #fff;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.03);
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.capturing-caption {
  font-weight: 600;
  color: #333;
  font-size: 0.95rem;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  line-height: 1.4;
}

/* ==========================================================================
   PREMIUM FOOTER
   ========================================================================== */

/* ==========================================================================
   AT A GLANCE SECTION
   ========================================================================== */
.at-a-glance-section {
  background-color: #fdfcf8;
  /* Soft parchment background */
  position: relative;
  overflow: hidden;
}

.glance-brand-card {
  background: #ffffff;
  padding: 40px 25px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(182, 112, 68, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.glance-brand-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, #A31F24, #B67044);
}

.glance-brand-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(163, 31, 36, 0.1);
}

.glance-brand-divider {
  width: 50px;
  height: 2px;
  background: #B67044;
  opacity: 0.3;
}

.glance-logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(182, 112, 68, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
  z-index: 0;
  pointer-events: none;
}

.glance-brand-title {
  color: #B67044;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.3;
  margin-top: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
}

.glance-premium-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 35px 20px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
  border: 1px solid #f8f8f8;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
  margin: 15px 5px;
  position: relative;
  z-index: 1;
}

.glance-premium-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(163, 31, 36, 0.02) 100%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glance-premium-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 45px rgba(163, 31, 36, 0.1);
  border-color: rgba(163, 31, 36, 0.15);
}

.glance-premium-card:hover::after {
  opacity: 1;
}

.glance-icon-wrapper {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background: #fdfaf5;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #A31F24;
  border: 1px solid #f2ece0;
  transition: all 0.4s ease;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.02);
}

.glance-premium-card:hover .glance-icon-wrapper {
  background: #A31F24;
  color: #ffffff;
  border-color: #A31F24;
  transform: rotateY(360deg);
  box-shadow: 0 10px 20px rgba(163, 31, 36, 0.2);
}

.glance-heading {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #666;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.glance-count {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: #A31F24;
  margin: 0;
  line-height: 1;
}

.glance-action-menu {
  padding: 0 15px;
}

.btn-glance-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  background: #ffffff;
  color: #28779f;
  border: 2px solid #e0eaf0;
  border-radius: 50px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.btn-glance-action i {
  color: #A31F24;
  transition: transform 0.3s ease;
}

.btn-glance-action:hover {
  background: #28779f;
  color: #ffffff;
  border-color: #28779f;
  box-shadow: 0 8px 20px rgba(40, 119, 159, 0.2);
  text-decoration: none;
}

.btn-glance-action:hover i {
  color: #ffffff;
  transform: translateX(-3px);
}

.btn-glance-action.outline {
  background: transparent;
  color: #555;
  border-color: #ddd;
}

.btn-glance-action.outline:hover {
  background: #A31F24;
  color: #ffffff;
  border-color: #A31F24;
  box-shadow: 0 8px 20px rgba(163, 31, 36, 0.2);
}

.hover-elevate {
  transition: all 0.3s ease;
}

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

/* ==========================================================================
   QUICK ACTIONS SECTION
   ========================================================================== */
.quick-actions-section {
  position: relative;
  z-index: 2;
  box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.02);
}


/* ==========================================================================
   QUICK ACCESS CATEGORIES (GLASS STYLE)
   ========================================================================== */
.box-menu {
  border-radius: 12px;
  transition: all 0.4s ease;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.box-menu h5 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #1a1a1a;
  z-index: 2;
}

.box-menu:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  background-color: #ffffff !important;
  border-color: #A31F24;
}

/* ==========================================================================
   DIGITAL SERVICES (QUICK ACTIONS) REFINEMENTS
   ========================================================================== */
.btn-glance-action {
  padding: 20px !important;
  border-radius: 15px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
  transition: all 0.3s ease !important;
  border: 2px solid transparent !important;
}

.btn-glance-action i {
  font-size: 1.2rem;
  margin-right: 12px;
}

.btn-glance-action:hover {
  background: #A31F24 !important;
  color: white !important;
  transform: translateY(-5px);
}

/* ==========================================================================
   Apostolic Succession (Bishop Tiles) 
   ========================================================================== */
#apostolic-succession {
  overflow: hidden;
  position: relative;
}

/* Bishop Tile Design */
.bishop-tile-card {
  position: relative;
  height: 420px;
  border-radius: 15px;
  overflow: hidden;
  background: #f8f9fa;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.bishop-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
  filter: sepia(20%) contrast(1.1);
}

.bishop-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0.4) 40%,
      transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px 20px;
  color: #ffffff;
  transition: background 0.4s ease;
}

.bishop-tile-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.bishop-tile-card:hover .bishop-tile-img {
  transform: scale(1.1);
}

.bishop-tile-card:hover .bishop-tile-overlay {
  background: linear-gradient(to top,
      rgba(163, 31, 36, 0.9) 0%,
      rgba(0, 0, 0, 0.5) 50%,
      transparent 100%);
}

.bishop-tile-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 5px;
  line-height: 1.2;
}

.bishop-tile-role {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #DEAD6F;
  margin-bottom: 10px;
  font-weight: 600;
}

.bishop-tile-years {
  font-family: 'Lora', serif;
  font-size: 0.9rem;
  opacity: 0.8;
  font-style: italic;
}

.active-bishop-indicator {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #A31F24;
  color: white;
  padding: 5px 15px;
  border-radius: 50px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* Custom Swiper Buttons for Apostolic Section */
.apostolic-next,
.apostolic-prev {
  background: #ffffff !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.3s ease !important;
}

.apostolic-next:after,
.apostolic-prev:after {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #A31F24 !important;
}

/* Fix for Swiper clones and WOW.js conflicts */
.swiper-slide {
  visibility: visible !important;
}

.apostolic-next:hover,
.apostolic-prev:hover {
  background: #A31F24 !important;
}

.apostolic-next:hover:after,
.apostolic-prev:hover:after {
  color: #ffffff !important;
}

.apostolic-pagination .swiper-pagination-bullet-active {
  background: #A31F24 !important;
  width: 25px;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .bishop-tile-card {
    height: 380px;
  }
  .hero-slide {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 200px !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
  }
}

/* ============================================================
   NAVBAR DROPDOWN Z-INDEX FIX
   Ensures the navbar & About sub-menus are always clickable
   above hero sliders, stretched-link cards & other overlays
   on the Home page and all inner pages.
   ============================================================ */

/* Navbar must always sit on top */
.navbar {
  z-index: 1050 !important;
  position: sticky !important;
  top: 0 !important;
}

/* Dropdown menus must sit above everything */
.navbar .dropdown-menu {
  z-index: 1060 !important;
}

/* Isolate leading-lights / premium cards so their stretched-link
   ::after overlay cannot escape the card boundary and block the
   navbar dropdown on scroll */
.premium-leading-card,
.premium-leading-card .row {
  isolation: isolate;
  position: relative;
}

/* Ensure stretched-link pseudo-element stays within card bounds */
.premium-leading-card .stretched-link::after {
  z-index: 1 !important;
}

/* Swiper hero section must stay below the sticky navbar */
#banner.hero-banner-slider,
.hero-main-swiper,
.swiper-wrapper,
.swiper-slide.hero-slide {
  z-index: 0 !important;
}

/* Flash news ticker - below navbar */
#flash-news {
  z-index: 20 !important;
}

/* Any full-width section overlays should not exceed navbar z-index */
.divine-bg-overlay,
.divine-pattern {
  z-index: 0 !important;
  pointer-events: none;
}

/* -------------------------------------------------------------
   DESKTOP TOP-BAR DROPDOWN & HOVER REFINEMENT
   ------------------------------------------------------------- */
@media (min-width: 992px) {
  /* Prevent top-nav from clipping absolute positioned child dropdowns */
  .top-nav {
    overflow: visible !important;
  }

  /* Make dropdowns reveal automatically on hover on desktop */
  .dropdown:hover > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 0 !important;
    transform: translateY(0) !important;
    z-index: 1060 !important; /* sit above sticky navbar on scroll */
  }
}