/* Fallback: if JS fails entirely, don't trap the page behind the preloader */
#preloader {
    display: none;
}

/* #region Menu */
/* Prevent wrapping that shoves items around on iPad widths */
.navbar .container {
    flex-wrap: nowrap;
}

.navbar-nav {
    align-items: center;
}

/* Hide desktop list below lg, and hide toggler/offcanvas above lg */
@media (max-width: 991.98px) {
    #desktopNav {
        display: none !important;
    }
}

@media (min-width: 992px) {

    .navbar-toggler,
    #mobileNav {
        display: none !important;
    }
}

/* Optional: set offcanvas width for iPad mini */
@media (max-width: 991.98px) {
    .offcanvas-end {
        width: min(380px, 92vw);
    }
}

/* Keep everything level with icons */
.navbar-social a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: #111;
}

.navbar {
    /* margin: 0 !important; */
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* ----- Align links with social icons (desktop) ----- */
.navbar .container {
    align-items: center;
}

/* brand, links, icons centered vertically */
.navbar-nav {
    align-items: center;
    gap: .75rem;
}

/* even spacing */
.navbar-nav .nav-link {
    display: inline-flex;
    /* aligns text like the icons */
    align-items: center;
    padding: .6rem .4rem;
    /* tune to taste */
    line-height: 1;
    /* matches icon line-height */
    position: relative;
    color: #111;
    text-decoration: none;
}

/* Make the social icons sit on the same baseline as links */
.navbar-social a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 18px;
    /* same visual weight as links */
    color: #111;
}

.navbar-social a:hover {
    color: #58ba01;
}

/* Brand/toggler always anchored; no jump */
.navbar .container {
    align-items: center;
}

/* Color accents */
:root {
    --leaf: #58ba01;
}

.navbar .nav-link {
    font-size: 1.7rem;
    position: relative;
    color: #000;
    /* or whatever your text color is */
    text-decoration: none;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

/* Create the underline as a pseudo-element */
.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: #58ba01;
    /* your green color */
    transition: width 0.3s ease;
}

/* Animate on hover */
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 100%;
}

.navbar .nav-link:hover {
    color: var(--leaf);
}

.btn-success {
    background: var(--leaf);
    border-color: var(--leaf);
}

.btn-success:hover {
    filter: brightness(0.9);
}

/* Social icons */
.navbar-nav a,
.offcanvas a {
    color: #222;
    text-decoration: none;
    font-size: 1.6rem;
}

.navbar-nav a:hover,
.offcanvas a:hover {
    color: var(--leaf);
}

/* Offcanvas width on phones (looks tight & premium) */
/* Offcanvas mobile menu – spacing & no clipping */
@media (max-width: 991px) {

    /* give the panel breathing room and keep it clear of the viewport edges */
    .offcanvas-end {
        width: min(380px, 92vw);
        /* not too wide, not cramped */
    }

    .offcanvas-body {
        padding: 1rem 1.25rem !important;
        /* restores padding some themes remove */
        overflow-y: auto;
    }

    /* restore readable padding for links (themes often zero this) */
    .offcanvas .navbar-nav {
        margin: 0;
        padding: 0;
    }

    .offcanvas .navbar-nav .nav-link {
        display: block;
        padding: .75rem .25rem !important;
        line-height: 1.4;
    }

    /* donate button full width but not touching the sides */
    .offcanvas .btn {
        width: 100%;
        border-radius: 999px;
    }

    /* optional: thin divider spacing above social row */
    .offcanvas .border-top {
        margin-top: .5rem;
    }
}

/* prevent a horizontal scroll that can visually crop edges on some themes */
html,
body {
    overflow-x: hidden;
}
/* #endregion /Menu */

/* #region Home */
.tp-caption.caption-wrapper {
    background: rgba(0, 0, 0, .65) !important;
    border-radius: 14px !important;
    padding: 28px 32px !important;
    /* more breathing room */
    display: inline-block !important;
    white-space: normal !important;
    box-sizing: border-box;
    text-align: center !important;
    line-height: 1.35 !important;
    /* fix cramped lines */
}

.caption-line1 {
    font-size: 18px;
    letter-spacing: .18em;
    /* less spacing for readability */
    margin-bottom: 12px;
    /* space after first line */
    opacity: .9;
}

.caption-line2 {
    font-size: 56px;
    font-weight: 900;
    margin-bottom: 18px;
    /* more gap before subtext */
    line-height: 1.1;
}

.caption-line3 {
    font-size: 18px;
    margin-bottom: 22px;
    /* space before button */
    line-height: 1.45;
    /* readable paragraph spacing */
}

.caption-btn .btn,
.caption-wrapper a.btn {
    padding: 12px 26px !important;
    font-size: 16px !important;
    margin-top: 6px;
    border-width: 2px !important;
}

/* optional: don't let the vertical bar collide on mobile later */
.tp-caption.border-v {
    /* width:4px !important; height:230px !important; */
    /* background:#58ba01 !important; border-radius:2px; */
    background: #f0f0f0 !important;
    border-radius: 2px;
}

/* #endregion /Home */

/* #region Home - Upcoming Events */
#page-events .overlay h3 {
    font-size: 1.75rem !important;
    color: black;
    text-decoration: underline;
    /* border-bottom: 1px solid black; */
    /* border-color: #58ba01; */
}

#page-events .overlay span {
    font-size: 1.4rem !important;
}

/* #endregion /Home - Upcoming Events */

/* #region Home - About The Church */
#section-text h3 {
    padding-top: 6px;
    font-size: 1.75rem !important;
    color: black;
}

#section-text span {
    font-size: 1.5rem !important;
}

/* #endregion /Home - About The Church */

/* #region Home - Latest Sermons */
/* ---------- Layout ---------- */
.sermons {
    padding: 24px 0 40px;
}

.sermons__head {
    text-align: center;
    margin-bottom: 18px;
}

.sermons__head h2 {
    margin: 0;
    font-weight: 600;
}

.sermons__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    align-items: stretch;
}

/* ---------- Card ---------- */
.sermon-card {
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}

.sermon-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.sermon-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.sermon-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(.92);
    transition: filter .18s ease, transform .18s ease;
}

.sermon-card:hover .sermon-card__thumb img {
    filter: brightness(1);
    transform: scale(1.02);
}

.sermon-card__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.sermon-card__play svg {
    width: 64px;
    height: 64px;
    opacity: .9;
    transition: transform .18s ease, opacity .18s ease;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25));
}

.sermon-card:hover .sermon-card__play svg {
    transform: scale(1.06);
    opacity: 1;
}

.sermon-card__body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sermon-card__title {
    margin: 0;
    font-size: 1.9rem;
    line-height: 1.25;
}

.sermon-card__meta {
    color: #7a7a7a;
    font-size: 1.2rem;
}

.sermon-card__actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Base button styles */
.btn,
.btn--ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

/* Primary red button */
.btn {
    background: #cc0000;
    color: #fff;
    border-color: #cc0000;
}

.btn:hover {
    background: #fff;
    color: #cc0000;
    border-color: #cc0000;
}

/* Ghost/light gray button */
.btn--ghost {
    background: #f3f3f3;
    color: #333;
    border: 2px solid transparent;
}

.btn--ghost:hover {
    background: #fff;
    border-color: #cc0000;
    color: #cc0000;
}

/* Alignment tweak for consistency */
.btn,
.btn--ghost {
    line-height: 1;
    vertical-align: middle;
}

/* ---------- Modal ---------- */
.sermons__modal {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(8px);      /* <-- background blur */
    background: rgba(0, 0, 0, .6);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    z-index: 9999;
}

.sermons__modal.is-open {
    display: flex;
}

.sermons__dialog {
    width: min(960px, 100%);
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.sermons__close {
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 36px;
    line-height: 1;
    background: transparent;
    color: #fff;
    border: 0;
    cursor: pointer;
    z-index: 2;
}

.sermons__player {
    width: 100%;
    aspect-ratio: 16/9;
}

.sermons__player iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 640px) {
    .sermon-card__play svg {
        width: 56px;
        height: 56px;
    }
}

/* #endregion /Home - Latest Sermons */

/* #region Home - A Word From The Pastor */
#section-text-2 p {
    font-size: 2rem;
}

@media (max-width: 768px) {
    #section-text-2 p {
        font-size: 1.4rem;
    }
}

/* #endregion /Home - A Word From The Pastor */

/* #region Home - From Gallery */
/* The masonry container */
/* Reduce image size and make them responsive */
#gallery-isotope {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 45px !important;
    margin-left: 160px;
}

#gallery-isotope .item {
    flex: 1 1 220px;
    /* smaller base width */
    max-width: 220px;
    /* limit thumbnail width */
    border-radius: 8px;
    overflow: hidden;
}

#gallery-isotope img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Subtle zoom on hover */
#gallery-isotope img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Applies on most phones & tablets; skips typical desktops */
@media (hover: none) and (pointer: coarse) {

    /* non-desktop styles here */
    #section-gallery {
        display: none;
    }
}

/* Everything below desktop width */
@media (max-width: 1023px) {

    /* non-desktop styles here */
    #section-gallery {
        display: none;
    }
}



/* #endregion /Home - From Gallery */

/* #region Events */
.desc h3 {
    font-size: 1.75rem !important;
    color: black;
    text-decoration: underline;
    /* border-bottom: 1px solid black; */
    /* border-color: #58ba01; */
}

.desc span {
    font-size: 1.4rem !important;
}

/* #endregion /Events */

/* #region Sermons */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%
}

.video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.fluid-width-video-wrapper {
    padding-top: 0% !important;
}

.sub-wrap {
    display: flex;
    justify-content: center;
    /* center the buttons */
    align-items: center;
    /* ✅ vertical alignment */
    gap: 10px;
    /* spacing between buttons */
}

.btn-sub-now {
    width: 130px;
    /* slightly wider looks better next to YouTube */
    display: inline-block;
    background: #cc0000;
    color: #fff !important;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    line-height: 28px;
    /* keep button height */
    transition: background 0.25s ease;
}

.g-ytsubscribe {
    vertical-align: middle;
    /* ✅ line up */
}

.btn-sub-now:hover {
    background: #a50000;
    color: #fff !important;
}

.btn-yt-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    /* same visual height as your other buttons */
    height: 28px;
    background: #cc0000;
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.25s ease;
    vertical-align: middle;
    /* aligns with your other buttons */
}

.btn-yt-icon:hover {
    background: #a50000;
}

.btn-yt-icon .fa-youtube-play {
    font-size: 18px;
}

/* #endregion /Sermons */

/* #region Gallery */
/* The masonry container */
/* Reduce image size and make them responsive */


/* #endregion /Gallery */

/* #region Contact */
/* /* Desktop: show text only */
.phone-mobile {
    display: none;
}

.address-mobile {
    display: none;
}

.btn-send {
    font-size: 1.6rem !important;
    background-color: black !important;
    color: white !important;
    padding-bottom: 6px !important;
}

.btn-send:hover {
    background-color: #58ba01 !important;
    /* border: 2px solid #58ba01 !important; */
    /* transform: translateY(-2px) !important; */
    /* filter: brightness(1.08) !important; */
    /* box-shadow: 0 12px 30px rgba(38, 210, 110, 0.35) !important; */
}

.contact-info .social-icons a {
    color: black;
    /* default icon color */
    font-size: 1.8rem;
    /* optional: make icons a bit larger */
    margin: 0 10px;
    /* optional: spacing between icons */
    transition: color 0.3s ease;
    /* smooth color change */
}

.contact-info .social-icons a:hover {
    color: #58ba01;
    /* your green hover color */
}

.contact-info .title {
    font-size: 2.1rem !important;
}

.contact-info span {
    font-size: 1.7rem;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
}

.close {
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}

.close:hover {
    color: #000;
}

/* Mobile: show clickable link */
@media (max-width: 768px) {
    .phone-desktop {
        display: none;
    }

    .phone-mobile {
        display: inline;
    }

    .address-desktop {
        display: none;
    }

    .address-mobile {
        display: inline;
    }

    .contact-info .social-icons .fa {
        color: #58ba01;
        font-size: 2rem;
        /* optional: make icons a bit larger */
        margin: 0 5px;
        /* optional: spacing between icons */
    }

    .contact-info a {
        font-size: 1.7rem;
        color: #58ba01;
        text-decoration: underline;
    }
}

/* #endregion /Contact */

/* #region Donate */
.donation-container {
    background: linear-gradient(180deg, #f8f9fa, #ffffff);
    min-height: 100vh;
    padding: 25px;
    border-radius: 15px;
}

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.container .btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.container .btn-cashapp:hover {
    color: white !important;
    background: #00c92e !important;
}

.btn-paypal {
    color: black;
    border: 1px solid #09337f;
}

.btn-paypal:hover {
    color: white;
    background: #09337f;
}

.btn-venmo {
    color: black !important;
    border: 1px solid #008cff;
}

.btn-venmo:hover {
    color: white !important;
    background: #008cff;
}

.btn-cashapp {
    color: black !important;
    border: 1px solid #00c92e !important;
}

.btn-cashapp:hover {
    color: white !important;
    background: #00c92e !important;
}


/* ----- Mobile Devices (Portrait) ----- */
@media only screen and (max-width: 600px) {
    .btn-paypal {
        color: white;
        background: #09337f;
    }

    .btn-venmo {
        color: white !important;
        background: #008cff;
    }

    .btn-cashapp {
        color: white !important;
        background: #00c92e !important;
    }
}

/* ----- Tablets (Portrait + Landscape) ----- */
@media only screen and (min-width: 601px) and (max-width: 992px) {
    .btn-paypal {
        color: white;
        background: #09337f;
    }

    .btn-venmo {
        color: white !important;
        background: #008cff;
    }

    .btn-cashapp {
        color: white !important;
        background: #00c92e !important;
    }
}

/* #endregion /Donate */

/* #region Footer */
footer {
    background: black;
    padding: 50px 0;
    font-size: 14px;
}

footer nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 15px;
}

footer nav ul li a {
    text-decoration: none;
    color: white;
    transition: color 0.2s ease;
    font-size: 1.3rem;
}

footer nav ul li a:hover {
    color: #28a745;
}

/* Social icons styling */
footer .social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

footer .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
    color: inherit;
    border: 2px solid currentColor;
}

footer .social-icons .fa {
    font-size: 1.8rem;
}

/* Brand colors */
footer .social-icons a[href*="facebook"] {
    color: #58ba01;
}

footer .social-icons a[href*="instagram"] {
    color: #58ba01;
}

footer .social-icons a[href*="youtube"] {
    color: #58ba01;
}

footer .social-icons a[href*="tiktok"] {
    color: #58ba01;
}

footer .social-icons a[href*="google"] {
    color: #58ba01;
}

footer .social-icons a[href^="mailto"] {
    color: #58ba01;
}

/* Hover: background fills with color, icon turns white, border stays colored */
footer .social-icons a:hover {
    color: #fff;
    transform: scale(1.1);
}

/* keep brand border color on hover */
footer .social-icons a[href*="facebook"]:hover {
    background-color: #1877F2;
    border-color: #1877F2;
}

footer .social-icons a[href*="instagram"]:hover {
    background-color: #E1306C;
    border-color: #E1306C;
}

footer .social-icons a[href*="youtube"]:hover {
    background-color: #FF0000;
    border-color: #FF0000;
}

footer .social-icons a[href*="tiktok"]:hover {
    background-color: #000000; /* or #111 */
    border-color: #ffffff;
}

footer .social-icons a[href*="google"]:hover {
    background-color: #4c82e7;
    border-color: #4c82e7;
}

footer .social-icons a[href^="mailto"]:hover {
    background-color: #6c757d;
    border-color: #6c757d;
}

/* ✅ Mobile adjustments */
@media (max-width: 767px) {
    footer {
        font-size: 1rem;
    }

    footer nav ul li a {
        font-size: 1rem;
    }

    footer .row {
        text-align: center;
    }

    footer .col-md-4 {
        width: 100%;
        margin-bottom: 10px;
    }

    footer nav ul {
        justify-content: center;
    }

    footer .col-md-4:first-child {
        order: 3;
        /* copyright last */
    }

    footer .col-md-4:nth-child(2) {
        order: 1;
        /* social icons first */
    }

    footer .col-md-4:last-child {
        order: 2;
        /* nav links second */
    }
}

/* #endregion /Footer */