@charset "utf-8";
/* CSS Document */
/******************  Table of Contents  *****************************/
/*

1. GLOBAL STYLES
2. NAVIGATION BAR
3. CAROUSEL
4. UPCOMING EVENT
5. FEATURE BLOCK
6. EVENT LIST
7. CAROUSEL (Owl Carousel - styles are external)
8. LATEST BLOG
9. LATEST SERMONS
10. IMAGE GALLERY
11. BIBLE QUOTES
12. SUBSCRIBE
13. FOOTER
14. SUB PAGES
15. BLOG
16. SHORTCODES
17. CONTACT US
18. CHARITY DONATION
19. EVENT CALENDAR
NEW VERSION (Flexslider, Offcanvas, Page Header, CTA, Accessibility, etc.)
  - FLEXSLIDER
  - Offcanvas Menu Styles
  - Standardized Page Header
  - Main Call-to-Action Button in Navbar
  - Reader Accessibility Styles
  - Live Stream Banner
  - Scroll to Top Button
  - Fixes (Contrast, Alignment, etc.)

*/

/*========== 1. GLOBAL STYLES ==============*/
body {
  background: rgb(90, 0, 0);
  color: #ffffff;
  font-family: "Droid Serif", Arial, sans-serif;
  font-weight: 300;
  height: 100%;
  margin: 0;
  padding: 0;
  padding-top: 150px; /* This might be related to fixed navbar, review if navbar behavior changes */
}

a {
  color: #ffffff;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #e95d00;
  text-decoration: none;
}

.link-reverse {
  color: #e95d00;
}
.link-reverse:hover,
.link-reverse:focus {
  color: #ca5100;
}

strong,
b {
  font-weight: 600;
}

p {
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
}

h1 {
  font-size: 65px;
  line-height: 1;
  margin: 18px 0 45px;
  word-spacing: -5px;
}

h2 {
  font-size: 60px;
  margin: 15px 0;
  word-spacing: -3px;
}

h3 {
  font-size: 45px;
  margin: 15px 0;
  word-spacing: -3px;
}

h4 {
  color: #ffffff;
  font-size: 20px;
  margin: 10px 0;
}

h5 {
  color: #ffffff;
  font-size: 18px;
  margin: 20px 0 13px;
}

h6 {
  color: #ffffff;
  font-size: 16px;
  margin: 10px 0;
}

/* Non-standard h7 element. Consider using a class on a standard element.
h7 {
  font-size: 20px;
  margin: 10px 0;
}
*/

.caret {
  margin-top: -3px; /* Consider if this is still needed with current Bootstrap */
}

/* .disabled class is often provided by Bootstrap. Verify if custom styling is needed. */
.disabled {
  box-shadow: none;
  cursor: not-allowed;
  filter: alpha(opacity=65); /* Legacy IE */
  opacity: 0.65;
  -webkit-box-shadow: none; /* Legacy prefix */
}

.btn {
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

.btn-giant {
  border-radius: 5px;
  font-size: 32px;
  line-height: 1.33;
  padding: 18px 30px;
}

.btn-lg,
.btn-group-lg > .btn {
  border-radius: 4px;
  font-size: 17px;
  line-height: 1.3;
  padding: 14px 25px;
}

.input-lg,
.form-horizontal .form-group-lg .form-control {
  border-radius: 3px;
  height: 52px;
}

.form-control {
  border-radius: 3px;
}
.form-control:focus {
  border-color: #bbb4a7;
  box-shadow: none;
  -webkit-box-shadow: none; /* Legacy prefix */
}

.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  border-radius: 3px;
}

.btn-primary {
  background-color: #ffc55f;
  border-color: #e7ad47;
  color: #483f34;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: #fdbf51;
  border-color: #e7ad47;
  color: #483f34;
}

.highlight-bg {
  background: #f9f1e6;
  padding: 24px 0;
}

.highlight-bg-contact {
  background: #5a0000;
  padding: 24px 0;
}

.has-margin-top {
  margin-top: 50px;
}
.has-margin-bottom {
  margin-bottom: 50px;
}
.has-margin-xs-top {
  margin-top: 10px;
}
.has-margin-xs-bottom {
  margin-bottom: 30px;
}
.has-margin-xs-right {
  margin-right: 20px;
}
.has-no-margin {
  margin: 0;
}

.has-padding {
  padding: 20px;
}
.has-padding-xs {
  padding: 10px;
}
.has-padding-vertical {
  padding: 20px 0;
}
.has-padding-bottom {
  padding-bottom: 20px;
}
.has-padding-xs-vertical {
  padding: 10px 0;
}
.has-padding-xs-bottom {
  padding-bottom: 10px;
}
.has-padding-xs-top {
  padding-top: 10px;
}

.has-border {
  border: 1px solid #eadeda;
  border-radius: 3px;
}
.has-border-bottom {
  border-bottom: 1px solid #eadeda;
}

.section-title {
  color: #53504c;
  margin-bottom: 40px;
  min-height: 40px; /* Consider if min-height is always necessary */
  text-align: center;
}
.section-title h4 {
  position: relative;
}
.section-title h4:after {
  background: #919191;
  bottom: -12px;
  content: "";
  height: 4px;
  left: 50%;
  margin-left: -15px;
  position: absolute;
  width: 30px;
}

.section-title.left-align {
  text-align: left;
}
.section-title.left-align h4:after {
  left: 0;
  margin-left: 0;
}

.badge {
  background-color: #e7e0d7;
  color: #ffffff;
}

@media (max-width: 767px) {
  h1 {
    font-size: 55px;
  }
  h2 {
    font-size: 40px;
  }
  h3 {
    font-size: 25px;
  }
}

@media (min-width: 768px) {
  .section-title.left-align-desktop {
    text-align: left;
  }
  .section-title.left-align-desktop h4:after {
    left: 0;
    margin-left: 0;
  }
}

/*========== 2. NAVIGATION BAR ==============*/
.navbar-default {
  background-color: rgba(107, 0, 0, 0.9);
  border: 0;
  transition: all 0.3s; /* Moved from individual elements for .navbar itself */
}

.navbar-brand,
.navbar-brand img,
.navbar-nav,
.nav > li > a {
  transition: all 0.3s;
}

.navbar-brand {
  height: 124px;
}
.navbar-brand img {
  height: 100%;
  object-fit: contain;
  width: auto;
}

.navbar {
  min-height: 85px;
  transition: all 0.3s; /* Moved from individual elements for .navbar itself */
}

.navbar-nav {
  margin: 50px 0; /* Original: 45px 0 */
}

.nav > li > a {
  padding: 7px 18px;
}

.navbar-default .navbar-nav > li > a {
  color: #ffffff;
  font-family: "Montserrat", Arial, sans-serif;
  text-transform: uppercase;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:active {
  /* Added :active state for consistency */
  background-color: transparent;
  color: #ffc55f;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background-color: transparent;
  color: #e95d00;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  background-color: #ffffff;
  border-radius: 5px;
  color: #000000;
}

.navbar-toggle {
  /* Renamed from .navbar-toggler to match HTML if it's Bootstrap 3/4 */
  margin-top: 17px;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;
}

/* Dropdown Styling */
.dropdown-menu {
  background-color: rgba(107, 0, 0, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.dropdown-menu > li > a {
  color: #ffffff;
  padding: 8px 20px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffc55f;
}

@media (min-width: 768px) {
  .navbar-header {
    max-width: 160px;
  }
  .navbar-right .dropdown-menu-left {
    /* Ensure this is still used and relevant */
    left: 18px;
  }
  .navbar-right .active .dropdown-menu-left {
    left: 0;
  }
}

@media (min-width: 992px) {
  .navbar-header {
    max-width: 280px;
  }

  /* Default styles for navbar at top */
  .navbar {
    /* This applies to .navbar-default as well */
    background: transparent;
    background-image: linear-gradient(
      to bottom,
      rgb(90, 0, 0),
      rgba(90, 0, 0, 0)
    );
  }
  /* .navbar-default specific background is handled by .navbar here */

  .navbar-default .navbar-nav > li > a {
    color: #ffffff !important; /* Important to override other states if needed */
    padding: 7px 22px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
  .navbar-default .navbar-nav > li > a:hover {
    /* color: #ffc55f; */ /* Hover color is defined above, bold makes it stand out */
    font-weight: bold;
  }
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus {
    background-color: transparent !important;
    color: #ffffff !important;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }

  /* Styles for shrunk navbar */
  .navbar-default.shrink {
    background-image: linear-gradient(
      to right,
      #721c24,
      #5a0000
    ) !important; /* Ensure this overrides the transparent one */
    border-bottom: solid 1px #dee2e6;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  .navbar-default.shrink .navbar-nav > li > a {
    color: #333333 !important; /* Text color for shrunk state */
    padding: 7px 20px;
    text-shadow: none;
  }
  .navbar-default.shrink .navbar-nav > li > a:hover {
    color: #000000 !important;
    font-weight: bold;
  }
  .navbar-default.shrink .navbar-nav > .active > a,
  .navbar-default.shrink .navbar-nav > .active > a:hover,
  .navbar-default.shrink .navbar-nav > .active > a:focus {
    background-color: transparent !important;
    color: #000000 !important;
    font-weight: bold;
    /* text-decoration properties inherited from non-shrink active state if desired, or re-specify */
  }

  /* Original shrink styles for brand and navbar height */
  .shrink .navbar-brand {
    /* This targets .navbar-brand when .navbar has .shrink */
    height: 75px;
    padding: 15px;
  }
  .shrink .navbar-brand img {
    height: 45px;
  }
  .navbar.shrink {
    /* This targets .navbar.shrink for min-height */
    min-height: 50px;
  }
  .shrink .navbar-nav {
    /* This targets .navbar-nav when .navbar has .shrink */
    margin: 20px 0;
  }
}

@media (max-width: 991px) {
  .navbar-brand {
    height: 70px;
  }
  .navbar {
    min-height: 50px;
  }
  .navbar-nav {
    margin: 17px 0;
  }
  .nav > li > a {
    padding: 10px 12px;
  }
  .navbar-default {
    /* Ensure background for mobile even if not shrunk */
    background-color: rgba(107, 0, 0, 0.9);
  }
  .navbar-default .navbar-toggle {
    /* Ensure .navbar-toggle is used for Bootstrap 3/4 */
    background-color: transparent !important;
    border: 1px solid #ffffff !important;
  }
  .navbar-default .navbar-toggle:focus,
  .navbar-default .navbar-toggle:hover {
    background-color: transparent !important;
  }

  /* Fix for mobile menu alignment (Bootstrap 3/4 uses .navbar-collapse.in) */
  .navbar-collapse.in .navbar-nav {
    /* Adjust if using Bootstrap 5's .show */
    margin: 0;
    width: 100%;
  }
  .navbar-collapse.in .navbar-nav .nav-link, /* For Bootstrap 4/5 .nav-link */
  .navbar-collapse.in .navbar-nav > li > a {
    /* For Bootstrap 3 li > a */
    display: block;
    text-align: left;
    width: 100%;
  }
  /* Mobile Dropdown Styles */
  .navbar-collapse.in .dropdown-menu {
    text-align: left;
    width: 100%;
  }
  .navbar-collapse.in .dropdown-menu > li > a {
    padding-left: 25px;
  }
}

/*========== 3. CAROUSEL ==============*/
.carousel {
  height: 650px; /* Consider if this should be responsive */
}
.carousel-caption {
  bottom: 0;
  left: 15%; /* Default Bootstrap */
  padding-bottom: 20px; /* Default Bootstrap */
  padding-top: 20px; /* Default Bootstrap */
  right: 15%; /* Default Bootstrap */
  text-align: center; /* Default Bootstrap */
  top: 33%; /* Custom */
  z-index: 10;
}
.carousel .item {
  background-color: rgb(90, 0, 0);
  height: 650px;
}

.carousel-control.left,
.carousel-control.right {
  background-image: none; /* Combined selector */
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  top: 55%; /* Custom adjustment */
}

.slide-one {
  background: url(../images/carousel-slide1.jpg) center center/cover no-repeat;
}
.slide-two {
  background: url(../images/carousel-slide2.jpg) center center/cover no-repeat;
}
.slide-three {
  background: url(../images/carousel-slide3.jpg) center center/cover no-repeat;
}

@media (max-width: 480px) {
  .carousel-caption {
    top: 25%;
  }
}

/*========== 4. UPCOMING EVENT ==============*/
.event-cta {
  text-align: center;
}
.event-cta p {
  color: #393939;
  font-size: 23px;
  font-weight: 700;
  margin: 0 0 10px;
}
.event-cta span {
  color: rgb(90, 0, 0);
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
}

.event-details .ed-title {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.event-details .ed-content {
  color: #53504c;
  line-height: 2;
}

@media (min-width: 992px) {
  .event-cta {
    text-align: left;
  }
  .event-cta p {
    margin-bottom: 0;
  }
  /* .ec-txt {} */ /* Empty rule removed */
  /* .event-cta .btn {} */ /* Empty rule removed */
}

/*========== 5. FEATURE BLOCK ==============*/
@media (max-width: 767px) {
  .feature-block {
    text-align: center;
  }
  .feature-block .img-responsive {
    margin: 0 auto;
  }
}
@media (max-width: 991px) {
  /* Combined with (max-width:767px) if styles are identical */
  .center-this {
    /* This class seems generic, ensure it's used as intended */
    text-align: center;
  }
  .center-this .img-responsive {
    margin: 0 auto;
  }
}

/*========== 6. EVENT LIST ==============*/
.el-block {
  text-align: center;
}
.el-block h4 {
  color: #53504c;
  position: relative;
}
.el-block h4:after {
  /* Similar to .section-title h4:after but different dimensions */
  background: #919191;
  bottom: -12px;
  content: "";
  height: 4px;
  left: 50%;
  margin-left: -10px;
  position: absolute;
  width: 20px;
}
.el-head {
  color: #53504c;
  font-size: 18px;
  margin: 20px 0 5px;
}
.el-cta {
  margin: 15px 0;
}

/*========== 7. CAROUSEL (Owl Carousel) ==============*/
/* Owl Carousel styles are typically handled by owl.carousel.min.css and its theme files. */
/* Customizations specific to this site's Owl instances can go here if needed. */

/*========== 8. LATEST BLOG ==============*/
.media-heading {
  /* This is a Bootstrap class, be careful with global overrides */
  color: #53504c;
}
.media-content {
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .media-heading {
    margin-top: 20px;
  }
  .bulletin {
    /* Assuming .bulletin is a container for media objects */
    text-align: center;
  }
}

/*========== 9. LATEST SERMONS ==============*/
.list-group {
  /* Bootstrap class */
  margin-bottom: 0;
}
.list-group-item {
  /* Bootstrap class */
  background: url(../images/play.png) no-repeat 0 15px transparent;
  border: 0;
  border-top: 1px solid #e7e1df;
  padding-left: 20px;
}
.list-group-item:first-child {
  border-top: 0;
}
a.list-group-item-text {
  /* Ensure this class is used or target default Bootstrap text color */
  color: #9e9e9e;
}
a.list-group-item:hover,
a.list-group-item:focus {
  background-color: transparent; /* Overrides Bootstrap's default hover */
}

/*========== 10. IMAGE GALLERY ==============*/
.img-gallery .fancybox img {
  margin: 0 auto 30px;
}

/*========== 11. BIBLE QUOTES ==============*/
.blockquote-centered {
  border: 0;
  color: #393939;
  cursor: pointer; /* Corrected from cursor:hand */
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.6;
  position: relative;
  text-align: center;
}
.blockquote-centered:before {
  background: none;
  color: #dddddd;
  content: "“";
  font-size: 4rem;
  left: 15px;
  line-height: 1;
  position: absolute;
  top: 0;
}
.blockquote-centered:after {
  /* Removed as it was for a background image that's no longer used */
  content: "";
  background: none;
}
.blockquote-centered figcaption, /* Combined with .blockquote-footer */
.blockquote-centered .blockquote-footer {
  /* .blockquote-footer is Bootstrap's class for this */
  color: #777777;
  display: block;
  font-size: 1rem;
  font-style: normal;
  margin-top: 10px;
}
.blockquote-centered small {
  /* Bootstrap 3 uses <small> inside blockquote for citation */
  padding: 15px 0; /* If using figcaption or .blockquote-footer, this might be redundant */
}

.owl-carousel2 .item blockquote {
  /* Ensure specificity if needed */
  color: #333333;
}
.owl-carousel2 .item blockquote small, /* Targeting BS3 small */
.owl-carousel2 .item blockquote .blockquote-footer, /* Targeting BS4/5 footer */
.owl-carousel2 .item blockquote figcaption {
  /* Targeting HTML5 figcaption */
  color: #555555;
}

@media (min-width: 767px) {
  /* Note: original was 767px, Bootstrap typically uses 768px as breakpoint */
  .blockquote-centered {
    font-size: 26px; /* Overrides 1.25rem */
    padding: 0 50px;
  }
}

/*========== 12. SUBSCRIBE ==============*/
.susbcribe-head {
  /* Typo: subscribe */
  line-height: 1.6;
  margin: 0 0 20px;
  text-align: center;
}
.susbcribe-head span {
  color: #999085;
  font-weight: normal;
}
/* Ketchup is a validation plugin. If not used, these styles can be removed. */
.ketchup-error {
  display: none !important;
}
@media (min-width: 767px) {
  /* Consider 768px breakpoint */
  .subscribe-form .form-group {
    /* Typo: subscribe */
    margin-bottom: 0;
  }
  .susbcribe-head {
    /* Typo: subscribe */
    margin: 0;
    text-align: left;
  }
  .susbcribe-head span {
    display: block;
  }
}

/*========== 13. FOOTER ==============*/
footer {
  background: #53504c;
  color: #737373; /* Default text color for footer */
  margin-top: 50px;
  padding-top: 5px;
}
footer h5 {
  color: #ffffff;
}
footer p {
  color: #ccc0c0;
}
footer a {
  color: #ccc0c0;
}
footer a:hover,
footer a:focus {
  color: #ffb483;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li {
  border-bottom: 1px solid #666462;
  padding: 5px; /* Consider shorthand padding: 5px 0; if only top/bottom */
}

.copyright {
  background: #494743;
  margin-top: 35px;
  padding: 20px 0 10px; /* Combines padding-top and padding-bottom */
}

.social-icons a {
  opacity: 0.5;
}
.social-icons a:hover,
.social-icons a:focus {
  opacity: 0.8;
}

/*========== 14. SUB PAGES ==============*/
.subpage-head {
  background-color: #53504c;
  padding: 80px 0 20px; /* Combines padding-top and padding-bottom */
}
.subpage-head h3 {
  color: #ffffff;
}
@media (min-width: 992px) {
  .subpage-head {
    padding-top: 110px;
  }
}

/*========== 15. BLOG ==============*/
.pagination > li > a, /* Bootstrap pagination styling */
.pagination > li > span {
  color: #483f34;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: #917e68;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: #fdbf51;
  border-color: #e7ad47;
  color: #483f34;
}

.vertical-links li {
  /* Assuming this is a custom list style */
  border-bottom: 1px solid #e6ddd4;
  padding: 8px 0;
}

.tag-cloud a {
  background: #f8f7f3;
  border: 1px solid #eceae4;
  border-radius: 3px;
  display: inline-block;
  font-size: 12px;
  margin: 0 5px 10px 0; /* Adjusted margin for consistency */
  padding: 2px 8px;
}

.comments-block > .media {
  /* Bootstrap media object */
  border-bottom: 1px solid #eadeda;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.comments-block > .media .media {
  /* Nested comments */
  border-top: 1px solid #eadeda;
  padding-top: 20px;
}
.media-object {
  /* Bootstrap class for image/icon in media object */
  width: 40px; /* Or use Bootstrap's image classes */
}
.comments-head {
  border-bottom: 1px solid #eadeda;
  color: #53504c;
  font-size: 35px;
  margin: 40px 0 20px;
  padding-bottom: 10px;
}

/*========== 16. SHORTCODES ==============*/
.theme-showcase {
  /* Often a Bootstrap example container */
  margin-bottom: 50px;
}
.theme-showcase h1 {
  color: #53504c;
  font-size: 35px;
  margin-bottom: 0;
}

.nav-pills > li.active > a, /* Bootstrap nav pills */
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: #ffc55f;
  color: #483f34;
}
a.list-group-item.active > .badge, /* Bootstrap list group */
.nav-pills > .active > a > .badge {
  color: #483f34;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: transparent; /* Custom override */
  color: #483f34;
}

.panel-primary {
  /* Bootstrap panel */
  border-color: #dbba80;
}
.panel-primary > .panel-heading {
  background-color: #ffc55f;
  border-color: #dbba80;
  color: #483f34;
}
.progress {
  /* Bootstrap progress bar */
  background-color: #d3cfcc; /* Custom background for the track */
}

/*========== 17. CONTACT US ==============*/
.location-map {
  background-color: #737373; /* Placeholder bg if iframe fails */
  height: 260px;
}
.location-map iframe {
  border: 0;
  height: 100%; /* Adjusted from 260px to fill container */
  width: 100%;
}

/*========== 18. CHARITY DONATION ==============*/
.charity-box {
  background: #737373;
  overflow: hidden; /* Contains floats */
}
.charity-image {
  float: left; /* Consider using flexbox or grid for layout */
  margin-bottom: 30px;
  width: 100%;
}
.charity-image img {
  min-width: 100%; /* Ensure image covers the width if it's smaller */
  display: block; /* Removes extra space below image */
}
.charity-desc {
  padding: 15px;
}
.charity-desc h3 {
  color: #53504c;
  font-size: 28px;
  margin: 0 0 5px;
}
.pledged-amount {
  color: #53504c;
  font-size: 40px;
  margin: 15px 0 5px;
}
.pledged-amount.has-no-margin {
  /* Utility class override */
  margin: 0 0 5px;
}
.donate-now {
  float: left; /* Default for mobile-first */
  padding: 10px 0;
  text-align: center;
  width: 100%;
}
@media (min-width: 768px) {
  .donate-now {
    float: right;
    padding: 0;
    text-align: right;
    width: auto;
  }
}
@media (min-width: 992px) {
  .charity-image {
    margin-bottom: 0;
    margin-right: 20px; /* Space between image and text */
    width: 420px; /* Fixed width, ensure responsiveness */
  }
}

/*========== 19. EVENT CALENDAR ==============*/
.event-cal-wrap h2 {
  /* Assuming this is a wrapper for a calendar plugin */
  color: #2c2c2a;
  font-size: 18px;
}

/*
  NEW VERSION STYLES
  (Flexslider, Offcanvas, Page Header, CTA, Accessibility, etc.)
*/

/*========== FLEXSLIDER ==============*/
.flexslider {
  height: 700px; /* Consider responsiveness */
  /* Default Flexslider styles (border, margin) are usually in flexslider.css */
}
.flexslider .slides li {
  /* Each slide */
  height: 700px;
}
.flexslider-caption {
  color: #fff;
  margin: 250px auto 100px; /* Adjust vertical positioning as needed */
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.flexslider-caption h1,
.flexslider-caption h2,
.flexslider-caption h3,
.flexslider-caption p,
.flexslider-caption .btn {
  opacity: 0; /* Initial state for animation */
}
.flexslider-caption .btn {
  text-shadow: none; /* Remove parent's text-shadow */
}

/* Animations for caption elements */
.flex-active-slide .flexslider-caption {
  animation: photocaption 0.65s ease forwards 0.6s;
  /* opacity will be handled by animation */
  /* transform will be handled by animation */
}
.flex-active-slide .flexslider-caption h3 {
  animation: fade 0.65s ease forwards 0.6s;
}
.flex-active-slide .flexslider-caption h1, /* Combined h1 and p for same animation */
.flex-active-slide .flexslider-caption p {
  animation: fade 0.65s ease forwards 0.8s;
}
.flex-active-slide .flexslider-caption h2 {
  /* h2 also uses fade, but original had different delay */
  animation: fade 0.65s ease forwards 0.6s; /* Matched h3 delay as per original */
}
.flex-active-slide .flexslider-caption .btn {
  animation: fade 0.65s ease forwards 1s;
}

/* Keyframes (already provided, ensure prefixes are managed if necessary) */
@keyframes fade {
  to {
    opacity: 1;
  }
}
@keyframes photocaption {
  to {
    opacity: 1;
    transform: translateX(
      0
    ); /* Corrected from translateY to translateX as per original */
  }
}
/* Prefixed versions can be added if broader compatibility is critical, but many are auto-prefixed or not needed */

/*========== Offcanvas Menu Styles (Bootstrap 5 assumed by .offcanvas) ==============*/
#mobileMenuOffcanvas {
  background-color: rgb(90, 0, 0);
  color: #ffffff;
}
#mobileMenuOffcanvas .offcanvas-header {
  /* Basic styling, title color is handled below */
}
#mobileMenuOffcanvas .offcanvas-title,
#mobileMenuOffcanvas .offcanvas-header .h5 {
  /* .h5 is common for titles in BS components */
  color: #ffffff;
}
#mobileMenuOffcanvas .btn-close {
  filter: invert(1) brightness(2); /* Makes Bootstrap's default dark close button white */
}
#mobileMenuOffcanvas .offcanvas-body .navbar-nav .nav-link {
  color: #ffffff !important; /* Important to override Bootstrap link colors */
  font-size: 1.1rem;
  padding: 12px 15px;
  text-align: center;
}
#mobileMenuOffcanvas .offcanvas-body .navbar-nav .nav-link:hover,
#mobileMenuOffcanvas .offcanvas-body .navbar-nav .nav-link:focus {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffcc !important; /* Lighter yellow for hover */
}
#mobileMenuOffcanvas .offcanvas-body .navbar-nav .nav-item .nav-link.active {
  background-color: rgba(255, 255, 255, 0.2);
  font-weight: bold;
}
#mobileMenuOffcanvas .offcanvas-body .navbar-nav .nav-item a.btn-primary {
  /* display: block; */ /* Handled by .d-block in Bootstrap if needed */
  margin: 10px auto; /* Center block button */
  width: fit-content;
}
#mobileMenuOffcanvas .offcanvas-body .dropdown-menu {
  background-color: rgba(70, 0, 0, 0.95); /* Darker red for dropdown */
  border: none;
  text-align: center; /* Center dropdown items text */
}
#mobileMenuOffcanvas .offcanvas-body .dropdown-item {
  color: #eeeeee !important;
  font-size: 1rem;
  padding: 10px 15px;
  /* text-align: center; */ /* Handled by .dropdown-menu text-align */
}
#mobileMenuOffcanvas .offcanvas-body .dropdown-item:hover,
#mobileMenuOffcanvas .offcanvas-body .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
}
/* #mobileMenuOffcanvas .offcanvas-body .nav-link.dropdown-toggle::after {
  filter: invert(1) brightness(2); // If dropdown arrow needs to be white
} */

/*========== 20. Standardized Page Header ==============*/
.page-header-section {
  background-color: #5a0000;
  padding: 3rem 0; /* Uses rem units, consistent with BS5 */
  text-align: center;
}
.page-header-section h1 {
  color: #ffffff;
  margin-bottom: 0; /* Removes default h1 margin */
}

/* -- Main Call-to-Action Button in Navbar -- */
.btn-cta {
  background-color: #9e7b12; /* Gold/yellow */
  border: 1px solid #5a0000; /* Dark Red border */
  color: #5a0000; /* Dark Red Text */
}
.btn-cta:hover,
.btn-cta:focus {
  background-color: #e0a800; /* Darker gold on hover */
  border-color: #5a0000; /* Consistent border color */
  color: #5a0000; /* Consistent text color */
}

/* -- Sermon Actions Panel -- */
.sermon-actions-panel {
  background-color: #f9f1e6; /* Light, warm highlight */
  border: 1px solid #e7e1df;
  border-radius: 0.375rem; /* BS5 default border-radius */
  color: #53504c; /* Dark text for the panel */
  margin-top: 2rem;
  padding: 1.5rem;
}
.sermon-actions-panel h2 {
  color: #53504c; /* Ensure heading is dark */
}
.sermon-actions-panel .btn {
  border-color: #53504c;
  color: #53504c;
}
.sermon-actions-panel .btn:hover {
  background-color: #53504c;
  color: #ffffff;
}

/* -- Reader Accessibility Styles -- */

/* Base styling for the actual themed content divs */
#verse-display,
.sermon-text-content,
.article-text-content {
  border-radius: 5px;
  padding: 20px;
  transition: background-color 0.3s, color 0.3s;
}

/* Default state for .blog-post if it becomes a fallback themed area (e.g. if JS fails or specific wrappers are missing) */
/* This ensures it still gets some styling if it's the direct target of a theme class. */
.blog-post.theme-light:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  ),
.blog-post.theme-sepia:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  ),
.blog-post.theme-dark:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  ) {
  border-radius: 5px; /* Duplicated for fallback */
  padding: 20px; /* Duplicated for fallback */
  transition: background-color 0.3s, color 0.3s; /* Duplicated for fallback */
}

/* Default background/color for specific content wrappers (before JS applies a theme class) */
.sermon-text-content,
.article-text-content {
  background-color: #ffffff;
  color: #212529;
}
/* Ensure .blog-post itself does not get a default white background if it contains specific themed children */
.blog-post:has(.sermon-text-content),
.blog-post:has(.article-text-content) {
  background-color: transparent; /* Or inherit, or specific non-theme background */
}

/* Light Theme */
#verse-display.theme-light,
.sermon-text-content.theme-light,
.article-text-content.theme-light,
.blog-post.theme-light:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  ) {
  background-color: #ffffff;
  color: #212529;
}

/* Children of themed containers - Light Theme */
.sermon-text-content.theme-light p,
.sermon-text-content.theme-light h1,
.sermon-text-content.theme-light h2,
.sermon-text-content.theme-light h3,
.sermon-text-content.theme-light h4,
.sermon-text-content.theme-light h5,
.sermon-text-content.theme-light h6,
.sermon-text-content.theme-light blockquote,
.sermon-text-content.theme-light li,
.sermon-text-content.theme-light span,
.sermon-text-content.theme-light a,
.article-text-content.theme-light p,
.article-text-content.theme-light h1,
.article-text-content.theme-light h2,
.article-text-content.theme-light h3,
.article-text-content.theme-light h4,
.article-text-content.theme-light h5,
.article-text-content.theme-light h6,
.article-text-content.theme-light blockquote,
.article-text-content.theme-light li,
.article-text-content.theme-light span,
.article-text-content.theme-light a,
.article-text-content.theme-light article,
.blog-post.theme-light:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  p,
.blog-post.theme-light:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h1,
.blog-post.theme-light:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h2,
.blog-post.theme-light:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h3,
.blog-post.theme-light:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h4,
.blog-post.theme-light:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h5,
.blog-post.theme-light:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h6,
.blog-post.theme-light:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  blockquote,
.blog-post.theme-light:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  li,
.blog-post.theme-light:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  span,
.blog-post.theme-light:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  a,
.blog-post.theme-light:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  article {
  color: #212529 !important;
}

.sermon-text-content.theme-light blockquote,
.article-text-content.theme-light blockquote,
.blog-post.theme-light:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  blockquote {
  border-left-color: #ccc;
}

/* Sepia Theme */
#verse-display.theme-sepia,
.sermon-text-content.theme-sepia,
.article-text-content.theme-sepia,
.blog-post.theme-sepia:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  ) {
  background-color: #f4e8d1;
  color: #5b4636;
}

/* Children of themed containers - Sepia Theme */
.sermon-text-content.theme-sepia p,
.sermon-text-content.theme-sepia h1,
.sermon-text-content.theme-sepia h2,
.sermon-text-content.theme-sepia h3,
.sermon-text-content.theme-sepia h4,
.sermon-text-content.theme-sepia h5,
.sermon-text-content.theme-sepia h6,
.sermon-text-content.theme-sepia blockquote,
.sermon-text-content.theme-sepia li,
.sermon-text-content.theme-sepia span,
.sermon-text-content.theme-sepia a,
.article-text-content.theme-sepia p,
.article-text-content.theme-sepia h1,
.article-text-content.theme-sepia h2,
.article-text-content.theme-sepia h3,
.article-text-content.theme-sepia h4,
.article-text-content.theme-sepia h5,
.article-text-content.theme-sepia h6,
.article-text-content.theme-sepia blockquote,
.article-text-content.theme-sepia li,
.article-text-content.theme-sepia span,
.article-text-content.theme-sepia a,
.article-text-content.theme-sepia article,
.blog-post.theme-sepia:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  p,
.blog-post.theme-sepia:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h1,
.blog-post.theme-sepia:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h2,
.blog-post.theme-sepia:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h3,
.blog-post.theme-sepia:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h4,
.blog-post.theme-sepia:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h5,
.blog-post.theme-sepia:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h6,
.blog-post.theme-sepia:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  blockquote,
.blog-post.theme-sepia:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  li,
.blog-post.theme-sepia:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  span,
.blog-post.theme-sepia:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  a,
.blog-post.theme-sepia:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  article {
  color: #5b4636 !important;
}

.sermon-text-content.theme-sepia blockquote,
.article-text-content.theme-sepia blockquote,
.blog-post.theme-sepia:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  blockquote {
  border-left-color: #c8bca7;
}

/* Dark Theme */
#verse-display.theme-dark,
.sermon-text-content.theme-dark,
.article-text-content.theme-dark,
.blog-post.theme-dark:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  ) {
  background-color: #212529;
  color: #f8f9fa;
}

/* Children of themed containers - Dark Theme */
.sermon-text-content.theme-dark p,
.sermon-text-content.theme-dark h1,
.sermon-text-content.theme-dark h2,
.sermon-text-content.theme-dark h3,
.sermon-text-content.theme-dark h4,
.sermon-text-content.theme-dark h5,
.sermon-text-content.theme-dark h6,
.sermon-text-content.theme-dark blockquote,
.sermon-text-content.theme-dark li,
.sermon-text-content.theme-dark span,
.sermon-text-content.theme-dark a,
.article-text-content.theme-dark p,
.article-text-content.theme-dark h1,
.article-text-content.theme-dark h2,
.article-text-content.theme-dark h3,
.article-text-content.theme-dark h4,
.article-text-content.theme-dark h5,
.article-text-content.theme-dark h6,
.article-text-content.theme-dark blockquote,
.article-text-content.theme-dark li,
.article-text-content.theme-dark span,
.article-text-content.theme-dark a,
.article-text-content.theme-dark article,
.blog-post.theme-dark:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  p,
.blog-post.theme-dark:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h1,
.blog-post.theme-dark:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h2,
.blog-post.theme-dark:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h3,
.blog-post.theme-dark:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h4,
.blog-post.theme-dark:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h5,
.blog-post.theme-dark:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  h6,
.blog-post.theme-dark:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  blockquote,
.blog-post.theme-dark:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  li,
.blog-post.theme-dark:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  span,
.blog-post.theme-dark:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  a,
.blog-post.theme-dark:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  article {
  color: #f8f9fa !important;
}

.sermon-text-content.theme-dark blockquote,
.article-text-content.theme-dark blockquote,
.blog-post.theme-dark:not(:has(.sermon-text-content)):not(
    :has(.article-text-content)
  )
  blockquote {
  border-left-color: #555;
}

/* General style for theme buttons */
.theme-btn {
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
/* Active state for theme buttons (generic, can be overridden by specific theme control styles) */
.theme-btn.active {
  /* background-color: #007bff; Bootstrap primary blue - this will be handled by JS adding btn-primary */
  /* color: white; */
}

/* Controls styling for different themes (Bible Page: #reader-controls, Sermon Page: #sermon-reader-controls) */
#reader-controls.bg-dark .btn-outline-secondary,
#sermon-reader-controls.bg-dark .btn-outline-light {
  /* Use btn-outline-light for dark bg */
  border-color: #6c757d;
  color: #f8f9fa;
}
#reader-controls.bg-dark .btn-outline-secondary:hover,
#reader-controls.bg-dark .btn-outline-secondary.active, /* Check if .active is used or btn-primary */
#sermon-reader-controls.bg-dark .btn-outline-light:hover,
#sermon-reader-controls.bg-dark .btn-outline-light.active {
  /* Assuming .active or .btn-primary is added */
  background-color: #f8f9fa;
  color: #212529;
}
#sermon-reader-controls.bg-dark strong {
  color: #f8f9fa !important;
}

.bg-sepia {
  /* Utility class for sepia background */
  background-color: #f4e8d1 !important;
}
.text-dark-sepia {
  /* For text on sepia backgrounds */
  color: #5b4636 !important;
}
.btn-outline-sepia-text {
  /* For buttons on sepia backgrounds */
  color: #5b4636 !important;
  border-color: #9d8874 !important;
}
.btn-outline-sepia-text:hover,
.btn-outline-sepia-text.active {
  /* Assuming .active or .btn-primary is added */
  background-color: #5b4636 !important;
  color: #ffffff !important;
}

#reader-controls.bg-sepia, /* Text color for labels on sepia */
#sermon-reader-controls.bg-sepia {
  color: #5b4636;
}
#reader-controls.bg-sepia .btn-outline-secondary, /* Original bible page */
#sermon-reader-controls.bg-sepia .btn-outline-sepia-text {
  /* Sermon page */
  border-color: #9d8874;
  color: #5b4636;
}
#reader-controls.bg-sepia .btn-outline-secondary:hover,
#reader-controls.bg-sepia .btn-outline-secondary.active,
#sermon-reader-controls.bg-sepia .btn-outline-sepia-text:hover,
#sermon-reader-controls.bg-sepia .btn-outline-sepia-text.active {
  background-color: #5b4636;
  color: #ffffff;
}
#sermon-reader-controls.bg-sepia strong {
  color: #5b4636 !important;
}

/* Light theme for sermon controls */
#sermon-reader-controls.bg-light strong {
  color: #212529 !important;
}
#sermon-reader-controls.bg-light .btn-outline-dark {
  color: #212529;
  border-color: #343a40;
}
#sermon-reader-controls.bg-light .btn-outline-dark:hover,
#sermon-reader-controls.bg-light .btn-outline-dark.active {
  background-color: #212529;
  color: #ffffff;
}

/* Ensure the .btn-primary overrides outlines for active button */
#sermon-reader-controls .theme-btn.btn-primary,
#sermon-reader-controls .theme-btn.btn-primary:hover {
  color: #fff !important; /* Ensure text is white for primary button */
  background-color: #007bff !important;
  border-color: #007bff !important;
}
#sermon-reader-controls.bg-dark .theme-btn.btn-primary {
  background-color: #0056b3 !important; /* Darker primary for dark bg if needed */
  border-color: #0056b3 !important;
}
#sermon-reader-controls.bg-sepia .theme-btn.btn-primary {
  background-color: #0056b3 !important; /* Or a sepia-friendly primary color */
  border-color: #0056b3 !important;
}

/* Styling for sermon content area itself, if not covered by .blog-post themes */
.sermon-content-display {
  /* This class will be added to the div that wraps the actual sermon text blocks */
  /* Styles for padding, etc., if .blog-post is too broad or has other padding */
}

/* -- Elegant Live Stream Banner -- */
.live-stream-banner {
  background-color: #494743; /* Matches copyright footer */
  border-bottom: 1px solid #666;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  color: #ffffff;
  left: 0;
  letter-spacing: 0.5px;
  padding: 12px;
  position: fixed; /* Or 'sticky' if preferred and supported widely enough for target */
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 1056; /* Above most Bootstrap components like modals (1050), below offcanvas backdrop (1040) if it has one, but should be high. BS Navbar is 1030. */
}
.live-stream-banner a {
  color: #ffffff;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 500;
  text-decoration: none;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
.live-stream-banner a:hover {
  text-decoration: underline;
}
/* body { padding-top: VALUE_OF_BANNER_HEIGHT; } /* If banner is fixed and body padding is desired */

.live-indicator {
  animation: pulse 2s infinite;
  display: inline-block; /* For transform to work */
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* -- Scroll to Top Button -- */
.scroll-top-btn {
  background-color: #53504c; /* Matches dark footer */
  border: 3px solid #ff0000; /* Original red border */
  border-radius: 50%;
  bottom: 30px;
  color: #ffffff;
  font-size: 28px;
  height: 50px;
  line-height: 1.6; /* Adjust for vertical icon centering */
  opacity: 0; /* Hidden by default, made visible by JS */
  position: fixed;
  right: 30px;
  text-align: center;
  transition: opacity 0.3s, visibility 0.3s;
  visibility: hidden; /* Hidden by default */
  width: 50px;
  z-index: 1000; /* Below banner/navbar but above most page content */
}
.scroll-top-btn.show {
  opacity: 0.7; /* Default visible opacity */
  visibility: visible;
}
.scroll-top-btn:hover {
  color: #ffffff; /* Ensure text color remains white on hover */
  opacity: 1;
}

/*========== FIXES & MISC ==============*/

/* Ensure Owl Carousel Navigation Arrows are Visible for owl-carousel2 */
.owl-carousel2 .owl-nav button.owl-prev,
.owl-carousel2 .owl-nav button.owl-next {
  background: transparent !important;
  color: #333333 !important;
}
.owl-carousel2 .owl-nav button.owl-prev:hover,
.owl-carousel2 .owl-nav button.owl-next:hover,
.owl-carousel2 .owl-nav button.owl-prev:focus,
.owl-carousel2 .owl-nav button.owl-next:focus {
  background: transparent !important;
  color: #000000 !important;
}

/* Final fine-tuning for Sermonaudio icon vertical alignment */
.social-icons img[alt="Sermonaudio"] {
  /* Highly specific selector */
  position: relative;
  top: -6px; /* Adjust as needed for alignment */
}

/* Bootstrap 5 hamburger menu icon for dark background (if using .navbar-dark) */
.navbar-dark .navbar-toggler {
  /* If .navbar-dark class is used on the navbar */
  border-color: rgba(255, 255, 255, 0.5);
}
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Fix: Bible Quotes Contrast on highlight-bg */
.highlight-bg .blockquote {
  /* Ensure blockquote class is targeted if not using <blockquote tag */
  color: #393939;
}

/* Fix: Blog Post Byline Contrast */
.blog-post .text-muted, /* Assuming .blog-post is a container */
.light-content-panel .text-muted {
  /* Assuming .light-content-panel is a container */
  color: #6c757d !important; /* Bootstrap's standard muted color, important if other rules conflict */
}

/* Fix: Stream Health List Item Contrast */
.light-content-panel .list-group-item {
  background-color: transparent; /* Use panel's background */
  color: #212529; /* Force dark text for light panels, BS default is usually fine */
}
.sermon-actions-panel .list-group-item {
  background-color: transparent;
  color: #53504c; /* Matches panel text color */
  /* If list items have borders, ensure they contrast with sermon-actions-panel bg */
  border-color: rgba(
    0,
    0,
    0,
    0.125
  ); /* Default BS border color, adjust if needed */
}

/* Iframe loading message styles */
#iframe-message {
  display: none; /* Hidden by default */
  /* Centering styles for the message content */
  align-items: center;
  justify-content: center;
  /* Add other styling as needed for the message itself */
}
#iframe-container.loading #iframe-message {
  /* Show when parent has .loading class */
  display: flex;
}
#iframe-container.loading iframe {
  /* Optionally hide iframe while loading to show message clearly */
  display: none;
}