/* ==========================================================
   ELIM SANCTUARY
   MAIN STYLESHEET
========================================================== */


/* ==========================================================
   COLOUR VARIABLES
========================================================== */

:root {

    --navy: #071F5C;

    --navy-dark: #04153F;

    --green: #126B45;

    --green-dark: #0B5033;

    --white: #FFFFFF;

    --off-white: #F7F8F6;

    --light-green: #EAF2ED;

    --text-dark: #17202A;

    --text-light: #687078;

    --border: #E1E6E3;

    --shadow: 0 15px 45px rgba(7, 31, 92, 0.10);

}

/* =====================================
   RESET
===================================== */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: "DM Sans", sans-serif;

    color: #10284d;

    background: #ffffff;

    line-height: 1.6;
}


img {
    max-width: 100%;
    display: block;
}


a {
    text-decoration: none;
    color: inherit;
}


/* =====================================
   NAVBAR
===================================== */

.navbar {
    height: 78px;

    background: #ffffff;

    border-bottom: 1px solid #eeeeee;

    position: relative;

    z-index: 100;
}


.nav-container {
    max-width: 1250px;

    height: 100%;

    margin: auto;

    padding: 0 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* LOGO */

.logo {
    display: flex;

    align-items: center;

    gap: 12px;
}

.logo img {
    width: 190px;
    height: auto;
    display: block;
}

.logo-image img {
    width: 48px;
    height: 48px;

    object-fit: contain;
}


.logo-name {
    display: flex;

    flex-direction: column;

    line-height: 1.05;

    font-family: "Playfair Display", serif;

    font-size: 18px;
}


/* NAV */

nav {
    display: flex;

    gap: 32px;
}


nav a {
    font-size: 15px;

    color: #506075;

    padding: 28px 0;

    transition: .2s;
}


nav a:hover,
nav a.active {
    color: #078267;
}


nav a.active {
    border-bottom: 3px solid #078267;
}


/* REGISTER */

.nav-register {
    background: #087f65;

    color: white;

    padding: 12px 20px;

    border-radius: 30px;

    font-size: 12px;

    font-weight: 600;

    transition: .2s;
}


.nav-register:hover {
    background: #056b55;
}


.nav-register span {
    margin-left: 8px;
}


/* MOBILE BUTTON */

.menu-button {
    display: none;

    background: transparent;

    border: none;

    font-size: 25px;

    color: #10284d;

    cursor: pointer;
}


/* =====================================
   HERO
===================================== */
/* =====================================================
   HERO
===================================================== */

.hero {
    position: relative;
    min-height: 680px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;


    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* DARK OVERLAY */

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 21, 63, 0.82) 0%,
            rgba(7, 31, 92, 0.60) 45%,
            rgba(7, 31, 92, 0.28) 100%
        );
}


/* HERO CONTENT */

.hero-content {
    position: relative;
    z-index: 2;

    width: min(1100px, 90%);

    margin: 0 auto;

    text-align: center;

    color: #ffffff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* WELCOME TO */

.hero-welcome {
    display: block;

    margin-bottom: 18px;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 7px;

    line-height: 1.4;

    color: #ffffff;
}


/* MAIN TITLE */

.hero-content h1 {
    margin: 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(
        70px,
        8vw,
        125px
    );

    font-weight: 500;

    line-height: 0.95;

    letter-spacing: -2px;

    color: #ffffff;

    text-align: center;
}


/* DIVIDER */

.hero-divider {
    width: 90px;

    height: 3px;

    margin: 30px auto 24px;

    background: #ffffff;
}


/* EQUIPPING NATIONS */

.hero-tagline {
    display: block;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 7px;

    line-height: 1.4;

    color: #ffffff;

    text-align: center;
}


/* VERSE */

.hero-verse {
    max-width: 850px;

    margin: 30px auto 0;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.95);

    text-align: center;
}


/* =====================================================
   HERO - TABLET
===================================================== */

@media (max-width: 850px) {

    .hero {
        min-height: 620px;

        background-position: center;
    }

    .hero-content {
        width: 90%;
    }

    .hero-welcome {
        font-size: 12px;
        letter-spacing: 5px;
        margin-bottom: 15px;
    }

    .hero-content h1 {
        font-size: clamp(
            55px,
            10vw,
            85px
        );

        letter-spacing: -1px;
    }

    .hero-divider {
        width: 70px;
        height: 2px;

        margin: 24px auto 20px;
    }

    .hero-tagline {
        font-size: 12px;
        letter-spacing: 5px;
    }

    .hero-verse {
        max-width: 650px;

        margin-top: 25px;

        font-size: 14px;

        line-height: 1.7;
    }

}


/* =====================================================
   HERO - MOBILE
===================================================== */

@media (max-width: 480px) {

    .hero {
        min-height: 600px;

        background-position: center;
    }

    .hero-content {
        width: 90%;
    }

    .hero-welcome {
        font-size: 10px;

        letter-spacing: 4px;

        margin-bottom: 14px;
    }

    .hero-content h1 {
        font-size: 52px;

        line-height: 1;

        letter-spacing: -1px;
    }

    .hero-divider {
        width: 55px;

        height: 2px;

        margin: 22px auto 18px;
    }

    .hero-tagline {
        font-size: 10px;

        letter-spacing: 4px;
    }

    .hero-verse {
        width: 100%;

        margin-top: 24px;

        font-size: 12px;

        line-height: 1.7;
    }

}

.hero {
    position: relative;
    min-height: 720px;
    height: 85vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 21, 63, 0.35);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffffff;
    max-width: 850px;
    padding: 40px 25px;
}

/* =====================================
   BUTTONS
===================================== */

.button {

    display: inline-block;

    padding: 12px 21px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 600;

    transition: .2s;
}


.button.primary {

    background: #087f65;

    color: white;
}


.button.primary:hover {

    background: #056b55;

}


.button.outline {

    border: 1px solid white;

    color: white;
}


.button.outline:hover {

    background: white;

    color: #10284d;

}

/* =========================================================
   NEXT BIBLE STUDY
========================================================= */

.next-event-section {
    position: relative;
    overflow: hidden;
    background: #071f5c;
    color: #ffffff;
    padding: 0 0 55px;
}


/* =========================================================
   MOVING NEWS HEADLINE
========================================================= */

.event-news-ticker {
    width: 100%;
    overflow: hidden;
    background: #126b45;
    border-top: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    white-space: nowrap;
}

.event-news-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 28px;
    padding: 13px 0;
    animation: bibleStudyTicker 22s linear infinite;
}

.event-news-track span {
    flex-shrink: 0;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.event-news-separator {
    font-size: 9px !important;
    opacity: 0.7;
}


@keyframes bibleStudyTicker {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

}


/* =========================================================
   NEXT EVENT CONTENT
========================================================= */

.next-event-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 25px 0;
    text-align: center;
}

.next-event-label {
    margin: 0 0 10px;
    color: #8bc9aa;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.next-event-content h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 500;
    line-height: 1.15;
}

.next-event-date {
    margin: 12px 0 28px;
    color: rgba(255,255,255,0.72);
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 14px;
}


/* =========================================================
   COUNTDOWN
========================================================= */

.countdown-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 0 auto 30px;
}

.countdown-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 95px;
    padding: 17px 12px 14px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(4px);
}

.countdown-box span {
    color: #ffffff;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 32px;
    line-height: 1;
}

.countdown-box small {
    margin-top: 8px;
    color: #8bc9aa;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.countdown-divider {
    color: rgba(255,255,255,0.45);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 25px;
}


/* =========================================================
   EVENT BUTTON
========================================================= */

.next-event-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 4px;
    color: #ffffff;
    text-decoration: none;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.25s ease;
}

.next-event-link:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #071f5c;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .next-event-content {
        padding-top: 38px;
    }

    .countdown-container {
        gap: 5px;
    }

    .countdown-box {
        min-width: 68px;
        padding: 14px 7px 12px;
    }

    .countdown-box span {
        font-size: 24px;
    }

    .countdown-box small {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .countdown-divider {
        font-size: 18px;
    }

    .features {
        grid-template-columns: 1fr;
        padding: 50px 20px;
        gap: 18px;
    }

    .feature-card {
        padding: 30px 25px;
    }

}


/* =====================================
   FEATURES
===================================== */

.features {

    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    padding: 40px 30px;
}


.feature-card {

    text-align: center;


    padding: 10px 35px;

    border-right:
        1px solid #dddddd;


}


.feature-card:last-child {

    border-right: none;

}


.feature-icon {

    width: 50px;

    height: 50px;

    margin: auto auto 12px;

    border-radius: 50%;

    background: #edf7f3;

    color: #087f65;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

}


.feature-card h3 {

    font-family: "Playfair Display", serif;

    font-size: 18px;

    margin-bottom: 5px;

}


.feature-card p {

    color: #6b7685;

    font-size: 12px;

}

/* =========================================================
   TWO FEATURE CARDS
========================================================= */

.features {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    padding: 70px 25px;
    box-sizing: border-box;
}

.feature-card {
    display: block;
    width: 100%;
    max-width: 360px;
    padding: 36px 32px;
    box-sizing: border-box;

    border: 1px solid #e2e9e6;
    background: #ffffff;

    text-decoration: none;
    color: inherit;
    text-align: center;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: #126b45;
    box-shadow: 0 15px 35px rgba(7,31,92,0.08);
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin: 0 auto 20px;

    border-radius: 50%;
    background: #edf6f1;
    color: #126b45;

    font-size: 18px;
}

.feature-card h3 {
    margin: 0 0 12px;

    color: #071f5c;

    font-family: "Playfair Display", Georgia, serif;
    font-size: 24px;
    font-weight: 500;
}

.feature-card p {
    max-width: 340px;
    margin: 0 auto 20px;

    color: #7a858d;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.7;
}

.feature-link {
    color: #126b45;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}


/* MOBILE */

@media (max-width: 650px) {

    .features {
        flex-direction: column;
        align-items: center;
        gap: 18px;
        padding: 50px 20px;
    }

    .feature-card {
        max-width: 400px;
    }

}
/* =====================================
   HOME ABOUT
===================================== */

.home-about {

    max-width: 1250px;

    margin: auto;

    padding: 30px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 40px;

    align-items: center;

    background: #f5f9f7;

}


.section-label {

    color: #087f65;

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 700;

    margin-bottom: 8px;

}


.home-about h2,
.leadership h2 {

    font-family: "Playfair Display", serif;

    font-size: 34px;

    line-height: 1.2;

    margin-bottom: 16px;

}


.home-about-text > p:not(.section-label) {

    color: #667281;

    font-size: 13px;

    margin-bottom: 20px;

}


.home-about-image img {

    width: 100%;

    height: 260px;

    object-fit: cover;

    border-radius: 5px;

}


/* =====================================
   LEADERSHIP
===================================== */

.leadership {

    max-width: 1250px;

    margin: auto;

    padding: 55px 30px;

    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 35px;

    align-items: center;

}


.pastor-photo img {

    width: 185px;

    height: 185px;

    border-radius: 50%;

    object-fit: cover;

}


.leadership h4 {

    color: #087f65;

    font-size: 13px;

    margin-bottom: 8px;

}


.leadership-text > p:last-child {

    color: #687483;

    font-size: 13px;

    max-width: 600px;

}


/* =====================================
   INNER PAGE HERO
===================================== */

.inner-hero {

    min-height: 300px;

    display: flex;

    align-items: center;

    padding: 60px 8%;

    color: white;

    background:

        linear-gradient(
            rgba(5, 31, 65, .75),
            rgba(5, 31, 65, .75)
        ),


    background-size: cover;

    background-position: center;

}


.inner-hero p {

    font-size: 11px;

    letter-spacing: 3px;

}


.inner-hero h1 {

    font-family: "Playfair Display", serif;

    font-size: 55px;

    line-height: 1.1;

    margin: 8px 0;

}


.inner-hero span {

    font-size: 14px;

}


/* =====================================
   ABOUT PAGE
===================================== */

.about-page {

    max-width: 1150px;

    margin: auto;

    padding: 80px 30px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}


.about-photo img {

    width: 100%;

    height: 420px;

    object-fit: cover;

    border-radius: 5px;

}


.about-copy h2 {

    font-family: "Playfair Display", serif;

    font-size: 40px;

    margin-bottom: 18px;

}


.about-copy p:not(.section-label) {

    color: #687483;

    font-size: 14px;

    margin-bottom: 17px;

}


/* =====================================
   VISION
===================================== */

.vision {

    background: #f3f8f6;

    padding: 70px 10%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

}


.vision h2 {

    font-family: "Playfair Display", serif;

    font-size: 32px;

    margin-bottom: 8px;

}


.vision p:last-child {

    color: #687483;

}


/* =====================================
   REGISTRATION
===================================== */

.registration-section {

    max-width: 850px;

    margin: auto;

    padding: 75px 30px;

}


.registration-intro {

    text-align: center;

    margin-bottom: 35px;

}


.registration-intro h2 {

    font-family: "Playfair Display", serif;

    font-size: 42px;

    margin-bottom: 10px;

}


.registration-intro > p:last-child {

    color: #687483;

    font-size: 14px;

}


.registration-form {

    background: #f5f9f7;

    padding: 40px;

    border-radius: 8px;

}


.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}


.form-group {

    margin-bottom: 20px;

}


.form-group label {

    display: block;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 6px;

}


.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding: 13px 14px;

    border: 1px solid #dce3df;

    border-radius: 5px;

    background: white;

    font-family: inherit;

    outline: none;

}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color: #087f65;

}


/* =====================================
   CONTACT
===================================== */

.contact-section {

    max-width: 1100px;

    margin: auto;

    padding: 75px 30px;

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 70px;

}


.contact-info h2 {

    font-family: "Playfair Display", serif;

    font-size: 40px;

    margin-bottom: 15px;

}


.contact-info > p:not(.section-label) {

    color: #687483;

    margin-bottom: 30px;

}


.contact-item {

    display: flex;

    flex-direction: column;

    margin-bottom: 20px;

}


.contact-item strong {

    font-size: 13px;

}


.contact-item span {

    color: #687483;

    font-size: 13px;

}


.contact-form {

    background: #f5f9f7;

    padding: 35px;

    border-radius: 8px;

}


/* =====================================
   FLASH MESSAGE
===================================== */

.flash-message {

    text-align: center;

    padding: 13px;

    font-size: 13px;

}


.flash-message.success {

    background: #e3f6ed;

    color: #087f65;

}


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

footer {

    background: #001240;

    color: white;

    padding: 30px;

}

/* FOOTER LOGO */
.footer-logo {
    width: 115px;
    height: auto;
}

.footer-container {

    max-width: 1250px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.footer-brand {

    display: flex;

    align-items: center;

    gap: 2px;

}


.footer-brand img {

    width: 150px;

    height: auto;

    object-fit: contain;

}


.footer-brand strong,
.footer-brand span {

    display: block;

    font-family: "Playfair Display", serif;

}


.footer-brand small {

    font-size: 8px;

    letter-spacing: 3px;

}


.footer-divider {

    width: 1px;

    height: 35px;

    background: rgba(255,255,255,.4);

    margin: 0 8px;

}


.footer-links {

    display: flex;

    gap: 20px;

    font-size: 14px;

}


.footer-links a:hover {

    color: #73c9b2;

}


.copyright {

    max-width: 1250px;

    margin: 20px auto 0;

    padding-top: 15px;

    border-top: 1px solid rgba(255,255,255,.15);

    text-align: right;

    color: #aeb9ca;

    font-size: 10px;

}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 800px) {


    .navbar {

        height: 70px;

    }


    .nav-container {

        padding: 0 20px;

    }


    nav {

        display: none;

        position: absolute;

        top: 70px;

        left: 0;

        right: 0;

        background: white;

        flex-direction: column;

        gap: 0;

        padding: 10px 25px;

        box-shadow: 0 5px 15px rgba(0,0,0,.1);

    }


    nav.mobile-open {

        display: flex;

    }


    nav a {

        padding: 12px 0;

    }


    .nav-register {

        display: none;

    }


    .menu-button {

        display: block;

    }


    .hero {

        min-height: 600px;

    }


    .hero-content {

        padding: 60px 25px;

    }


    .hero h1 {

        font-size: 50px;

    }


    .features {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .feature-card {

        border-right: none;

        border-bottom: 1px solid #ddd;

        padding-bottom: 25px;

    }


    .feature-card:last-child {

        border-bottom: none;

    }


    .home-about,
    .about-page,
    .contact-section {

        grid-template-columns: 1fr;

    }


    .leadership {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .pastor-photo img {

        margin: auto;

    }


    .vision {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .registration-form,
    .contact-form {

        padding: 25px;

    }


    .inner-hero h1 {

        font-size: 45px;

    }


    .footer-container {

        flex-direction: column;

        text-align: center;

    }


    .footer-brand {

        flex-wrap: wrap;

        justify-content: center;

    }


    .footer-links {

        flex-wrap: wrap;

        justify-content: center;

    }


    .copyright {

        text-align: center;

    }

}

/* =====================================
   GIVING PAGE
===================================== */

.giving-hero {

    background-image:

        linear-gradient(
            rgba(5, 31, 65, .78),
            rgba(5, 31, 65, .78)
        ),

        url("images/giving.jpg");

}


/* =====================================
   GIVING INTRO
===================================== */

.giving-intro {

    max-width: 1150px;

    margin: auto;

    padding: 80px 30px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}


.giving-intro-text h2 {

    font-family: "Playfair Display", serif;

    font-size: 42px;

    line-height: 1.2;

    margin-bottom: 18px;

}


.giving-intro-text > p:not(.section-label) {

    color: #687483;

    font-size: 14px;

    margin-bottom: 17px;

}


.giving-image img {

    width: 100%;

    height: 380px;

    object-fit: cover;

    border-radius: 6px;

}


.giving-verse {

    margin-top: 25px;

    padding: 20px 25px;

    border-left: 3px solid #087f65;

    background: #f4f9f7;

}


.giving-verse p {

    font-family: "Playfair Display", serif;

    font-size: 17px;

    font-style: italic;

    color: #183456;

    margin-bottom: 5px;

}


.giving-verse span {

    font-size: 12px;

    color: #087f65;

    font-weight: 600;

}


/* =====================================
   BANK SECTION
===================================== */

.bank-section {

    background: #f4f8f6;

    padding: 75px 30px;

}


.bank-heading {

    max-width: 700px;

    margin: 0 auto 35px;

    text-align: center;

}


.bank-heading h2 {

    font-family: "Playfair Display", serif;

    font-size: 40px;

    margin-bottom: 12px;

}


.bank-heading p:last-child {

    color: #687483;

    font-size: 14px;

}


/* =====================================
   BANK CARD
===================================== */

.bank-card {

    max-width: 720px;

    margin: auto;

    background: white;

    border-radius: 8px;

    overflow: hidden;

    box-shadow:
        0 10px 35px rgba(8, 35, 65, .08);

}


.bank-card-header {

    padding: 25px 30px;

    background: #071f49;

    color: white;

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.bank-card-header span {

    font-size: 9px;

    letter-spacing: 2px;

    color: #76c9b2;

}


.bank-card-header h3 {

    font-family: "Playfair Display", serif;

    font-size: 25px;

    margin-top: 4px;

}


.bank-icon {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: #087f65;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    font-weight: 700;

}


/* =====================================
   BANK DETAILS
===================================== */

.bank-details {

    padding: 10px 30px 20px;

}


.bank-detail {

    min-height: 65px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-bottom: 1px solid #edf0ef;

}


.bank-detail:last-child {

    border-bottom: none;

}


.bank-detail > span {

    color: #71808e;

    font-size: 13px;

}


.bank-detail > strong {

    color: #10284d;

    font-size: 14px;

    text-align: right;

}


/* =====================================
   COPY BUTTON
===================================== */

.copy-row {

    display: flex;

    align-items: center;

    gap: 12px;

}


.copy-row strong {

    font-size: 14px;

}


.copy-row button {

    border: 1px solid #087f65;

    background: transparent;

    color: #087f65;

    padding: 6px 12px;

    border-radius: 20px;

    font-family: inherit;

    font-size: 11px;

    cursor: pointer;

}


.copy-row button:hover {

    background: #087f65;

    color: white;

}


/* =====================================
   GIVING INSTRUCTIONS
===================================== */

.giving-instructions {

    max-width: 1150px;

    margin: auto;

    padding: 65px 30px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;

}


.giving-instruction-card {

    padding: 30px;

    border: 1px solid #e5ebe8;

    border-radius: 6px;

    background: white;

}


.instruction-number {

    color: #087f65;

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 700;

    margin-bottom: 18px;

}


.giving-instruction-card h3 {

    font-family: "Playfair Display", serif;

    font-size: 22px;

    margin-bottom: 10px;

}


.giving-instruction-card p {

    color: #687483;

    font-size: 13px;

}


/* =====================================
   GIVING HELP
===================================== */

.giving-help {

    max-width: 1100px;

    margin: 0 auto 75px;

    padding: 45px;

    background: #071f49;

    color: white;

    border-radius: 7px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.giving-help h2 {

    font-family: "Playfair Display", serif;

    font-size: 32px;

    margin-bottom: 8px;

}


.giving-help p:last-child {

    color: #c5cfdd;

    max-width: 600px;

    font-size: 13px;

}


/* =====================================
   GIVING MOBILE
===================================== */

@media (max-width: 800px) {


    .giving-intro {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .giving-intro-text h2 {

        font-size: 35px;

    }


    .giving-image img {

        height: 280px;

    }


    .bank-card-header {

        padding: 22px;

    }


    .bank-details {

        padding: 5px 22px 15px;

    }


    .bank-detail {

        align-items: flex-start;

        flex-direction: column;

        justify-content: center;

        gap: 5px;

        padding: 14px 0;

    }


    .bank-detail > strong {

        text-align: left;

    }


    .giving-instructions {

        grid-template-columns: 1fr;

    }


    .giving-help {

        margin-left: 20px;

        margin-right: 20px;

        padding: 30px;

        flex-direction: column;

        align-items: flex-start;

    }


}

/* =====================================================
   ABOUT PAGE
===================================================== */


/* =====================================================
   ABOUT HEADER
===================================================== */

.about-page-header {

    min-height: 420px;

    background-image:
        url("images/header.jpeg");

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

    position: relative;

}


.about-header-content {

    width: 1150px;

    max-width: 90%;

    margin: auto;

    padding: 70px 0;

}


.about-header-label {

    color: #087d64;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 12px;

}


.about-header-content h1 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color: #09294f;

    font-size: clamp(42px, 5vw, 65px);

    line-height: 1.1;

    margin-bottom: 18px;

}


.about-header-content > p:last-child {

    color: #25445d;

    font-size: 15px;

    line-height: 1.7;

    max-width: 450px;

}


/* =====================================================
   ABOUT INTRODUCTION
===================================================== */

.about-introduction {

    max-width: 1150px;

    margin: auto;

    padding: 90px 30px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 75px;

    align-items: center;

}


.about-intro-image img {

    width: 100%;

    height: 460px;

    object-fit: cover;

    display: block;

}


.about-intro-content h2 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color: #102c52;

    font-size: 42px;

    line-height: 1.15;

    margin-bottom: 22px;

}


.about-intro-content p:not(.section-label) {

    color: #687681;

    font-size: 14px;

    line-height: 1.85;

    margin-bottom: 16px;

}


/* =====================================================
   MISSION & VISION
===================================================== */

.mission-vision {

    display: grid;

    grid-template-columns:
        1fr 1fr;

}


.mission-box,
.vision-box {

    padding: 75px 12%;

}


.mission-box {

    background: #f4f8f6;

}


.vision-box {

    background: #07244b;

    color: white;

}


.mission-icon {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    background: rgba(8,125,100,.10);

    color: #087d64;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 23px;

    margin-bottom: 22px;

}


.vision-box .mission-icon {

    background: rgba(255,255,255,.10);

    color: #72c4ae;

}


.mission-box h2,
.vision-box h2 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 37px;

    margin-bottom: 18px;

}


.mission-box h2 {

    color: #102c52;

}


.vision-box h2 {

    color: white;

}


.mission-box p:not(.section-label),
.vision-box p:not(.section-label) {

    font-size: 14px;

    line-height: 1.8;

    max-width: 500px;

}


.mission-box p:not(.section-label) {

    color: #687681;

}


.vision-box p:not(.section-label) {

    color: #c8d4df;

}


/* =====================================================
   VALUES
===================================================== */

.values-section {

    max-width: 1150px;

    margin: auto;

    padding: 90px 30px;

    display: grid;

    grid-template-columns:
        330px 1fr;

    gap: 70px;

}


.values-heading h2 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color: #102c52;

    font-size: 38px;

    line-height: 1.2;

    margin-bottom: 20px;

}


.values-heading > p:last-child {

    color: #687681;

    font-size: 14px;

    line-height: 1.8;

}


.values-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 1px;

    background: #dfe7e4;

    border: 1px solid #dfe7e4;

}


.value-card {

    background: white;

    padding: 30px;

    min-height: 170px;

}


.value-number {

    color: #087d64;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

}


.value-card h3 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color: #102c52;

    font-size: 22px;

    margin: 12px 0 8px;

}


.value-card p {

    color: #687681;

    font-size: 13px;

    line-height: 1.7;

}


/* =====================================================
   ABOUT LEADERSHIP
===================================================== */

.about-leadership {

    background: #f4f8f6;

    padding: 85px max(30px, calc((100% - 1090px) / 2));

    display: grid;

    grid-template-columns:
        430px 1fr;

    gap: 75px;

    align-items: center;

}


.leadership-photo img {

    width: 100%;

    height: 430px;

    object-fit: cover;

    display: block;

}


.about-leadership-content h2 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color: #102c52;

    font-size: 40px;

    line-height: 1.2;

    margin-bottom: 22px;

}


.about-leadership-content p:not(.section-label) {

    color: #687681;

    font-size: 14px;

    line-height: 1.8;

    max-width: 550px;

    margin-bottom: 14px;

}


.about-leadership-content .text-link {

    margin-top: 15px;

}


/* =====================================================
   ABOUT BIBLE CTA
===================================================== */

.about-bible-cta {

    background: #087d64;

    color: white;

    padding: 65px max(30px, calc((100% - 1090px) / 2));

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

}


.about-bible-cta h2 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 37px;

    margin-bottom: 12px;

}


.about-bible-cta div > p:last-child {

    color: #d7eee8;

    font-size: 14px;

    line-height: 1.7;

    max-width: 600px;

}


/* =====================================================
   ABOUT MOBILE
===================================================== */

@media (max-width: 850px) {


    .about-page-header {

        min-height: 350px;

    }


    .about-header-content {

        padding: 55px 0;

    }


    .about-header-content h1 {

        font-size: 44px;

    }


    .about-introduction {

        grid-template-columns: 1fr;

        padding: 65px 25px;

        gap: 40px;

    }


    .about-intro-image img {

        height: 330px;

    }


    .about-intro-content h2 {

        font-size: 35px;

    }


    .mission-vision {

        grid-template-columns: 1fr;

    }


    .mission-box,
    .vision-box {

        padding: 60px 25px;

    }


    .values-section {

        grid-template-columns: 1fr;

        padding: 65px 25px;

        gap: 40px;

    }


    .values-grid {

        grid-template-columns: 1fr;

    }


    .about-leadership {

        padding: 65px 25px;

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .leadership-photo img {

        height: 350px;

    }


    .about-leadership-content h2 {

        font-size: 34px;

    }


    .about-bible-cta {

        padding: 55px 25px;

        flex-direction: column;

        align-items: flex-start;

    }


    .about-bible-cta h2 {

        font-size: 32px;

    }

}

/* =====================================================
   BIBLE STUDY PAGE
===================================================== */


/* =====================================================
   BIBLE STUDY HEADER
===================================================== */

.bible-page-header {

    min-height: 420px;

    background-image:
        url("images/header.jpeg");

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

}


.bible-header-content {

    width: 1150px;

    max-width: 90%;

    margin: auto;

    padding: 70px 0;

}


.bible-header-label {

    color: #102c52;;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 12px;

}


.bible-header-content h1 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color: #087d64;

    font-size: clamp(45px, 5vw, 65px);

    line-height: 1.1;

    margin-bottom: 18px;

}


.bible-header-content > p:last-child {

    color: #102c52;

    font-size: 15px;

    line-height: 1.7;

}


/* =====================================================
   INTRODUCTION
===================================================== */

.bible-introduction {

    max-width: 1150px;

    margin: auto;

    padding: 90px 30px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 75px;

    align-items: center;

}


.bible-intro-content h2 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color: #102c52;

    font-size: 43px;

    line-height: 1.15;

    margin-bottom: 22px;

}


.bible-intro-content p:not(.section-label) {

    color: #687681;

    font-size: 14px;

    line-height: 1.85;

    margin-bottom: 16px;

}


.bible-intro-content .button {

    margin-top: 10px;

}


.bible-intro-image img {

    width: 100%;

    height: 430px;

    object-fit: cover;

    display: block;

}


/* =====================================================
   BIBLE DETAILS
===================================================== */

.bible-details {

    background: #07244b;

    color: white;

    padding: 80px 30px;

}


.bible-details-heading {

    max-width: 800px;

    margin: 0 auto 45px;

    text-align: center;

}


.bible-details-heading h2 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 42px;

    margin-bottom: 15px;

}


.bible-details-heading > p:last-child {

    color: #c8d4df;

    font-size: 14px;

    line-height: 1.7;

}


.bible-detail-cards {

    max-width: 1100px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

}


.bible-detail-card {

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.12);

    padding: 35px 25px;

    text-align: center;

    border-radius: 4px;

}


.detail-icon {

    width: 55px;

    height: 55px;

    margin: 0 auto 18px;

    border-radius: 50%;

    background: rgba(114,196,174,.12);

    color: #72c4ae;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

}


.detail-label {

    color: #72c4ae;

    font-size: 10px;

    letter-spacing: 3px;

    font-weight: 700;

    margin-bottom: 8px;

}


.bible-detail-card h3 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 28px;

    margin-bottom: 10px;

}


.bible-detail-card p:last-child {

    color: #c8d4df;

    font-size: 13px;

    line-height: 1.7;

}


/* =====================================================
   WHAT TO EXPECT
===================================================== */

.what-to-expect {

    max-width: 1150px;

    margin: auto;

    padding: 90px 30px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 75px;

    align-items: center;

}


.expect-image img {

    width: 100%;

    height: 500px;

    object-fit: cover;

    display: block;

}


.expect-content h2 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color: #102c52;

    font-size: 40px;

    line-height: 1.2;

    margin-bottom: 20px;

}


.expect-content > p:not(.section-label) {

    color: #687681;

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 25px;

}


.expect-list {

    display: flex;

    flex-direction: column;

    gap: 18px;

}


.expect-item {

    display: flex;

    gap: 15px;

    align-items: flex-start;

}


.expect-item > span {

    flex-shrink: 0;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: #eef7f3;

    color: #087d64;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: bold;

}


.expect-item h3 {

    color: #102c52;

    font-size: 15px;

    margin-bottom: 4px;

}


.expect-item p {

    color: #687681;

    font-size: 13px;

    line-height: 1.6;

}


/* =====================================================
   ZOOM SECTION
===================================================== */

.zoom-section {

    background: #087d64;

    color: white;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    min-height: 440px;

}


.zoom-content {

    padding: 75px 10%;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

}


.zoom-content h2 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 43px;

    line-height: 1.15;

    margin-bottom: 18px;

}


.zoom-content > p:not(.section-label) {

    color: #d7eee8;

    font-size: 14px;

    line-height: 1.8;

    max-width: 480px;

    margin-bottom: 22px;

}


.zoom-time {

    border-left:
        2px solid #72c4ae;

    padding-left: 18px;

    margin-bottom: 28px;

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.zoom-time strong {

    font-size: 16px;

}


.zoom-time span {

    color: #d7eee8;

    font-size: 13px;

}


.zoom-image {

    min-height: 440px;

}


.zoom-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}
/* =====================================================
   FAQ
===================================================== */

.bible-faq {
    max-width: 900px;
    margin: auto;
    padding: 90px 30px;
}

.faq-heading {
    text-align: center;
    margin-bottom: 45px;
}

.faq-heading h2 {
    font-family: "Playfair Display", Georgia, serif;
    color: #102c52;
    font-size: 42px;
}

.faq-list {
    border-top: 1px solid #dfe7e4;
}

.faq-list details {
    border-bottom: 1px solid #dfe7e4;
}

.faq-list summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 5px;
    color: #102c52;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary span {
    color: #087d64;
    font-size: 22px;
    font-weight: 400;
    transition: transform 0.2s ease;
}

.faq-list details[open] summary span {
    transform: rotate(45deg);
}

.faq-list details p {
    color: #687681;
    font-size: 14px;
    line-height: 1.8;
    padding: 0 40px 22px 5px;
}


/* =====================================================
   REGISTRATION CTA
===================================================== */

.bible-registration-cta {
    background: #07244b;
    color: white;
    padding: 65px max(30px, calc((100% - 1090px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.bible-registration-cta h2 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 38px;
    margin-bottom: 10px;
}

.bible-registration-cta div > p:last-child {
    color: #c8d4df;
    font-size: 14px;
    line-height: 1.7;
    max-width: 600px;
}


/* =====================================================
   CONTACT PAGE
===================================================== */

.contact-page-header {
    min-height: 420px;
    background-image: url("images/header.jpeg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.contact-header-content {
    width: 1150px;
    max-width: 90%;
    margin: auto;
    padding: 70px 0;
}

.contact-header-label {
    color: #087d64;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.contact-header-content h1 {
    font-family: "Playfair Display", Georgia, serif;
    color: #102c52;
    font-size: clamp(45px, 5vw, 65px);
    line-height: 1.1;
    margin-bottom: 18px;
}

.contact-header-content > p:last-child {
    color: #087d64;
    font-size: 15px;
    line-height: 1.7;
    max-width: 450px;
}


/* =====================================================
   CONTACT INTRODUCTION
===================================================== */

.contact-introduction {
    max-width: 1150px;
    margin: auto;
    padding: 90px 30px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: start;
}


/* =====================================================
   CONTACT INFORMATION
===================================================== */

.contact-intro-content h2 {
    font-family: "Playfair Display", Georgia, serif;
    color: #102c52;
    font-size: 43px;
    line-height: 1.15;
    margin-bottom: 20px;
}

.contact-intro-content > p:not(.section-label) {
    color: #687681;
    font-size: 14px;
    line-height: 1.85;
    margin-bottom: 15px;
}

.contact-details {
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.contact-detail {
    display: flex;
    align-items: center;
    gap: 17px;
}

.contact-detail-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #eef7f3;
    color: #087d64;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.contact-detail span {
    display: block;
    color: #087d64;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.contact-detail a,
.contact-detail p {
    color: #102c52;
    font-size: 14px;
    text-decoration: none;
    margin: 0;
}

.contact-detail a:hover {
    color: #087d64;
}


/* =====================================================
   CONTACT FORM
===================================================== */

.contact-form-container {
    background: #f4f8f6;
    padding: 45px;
}

.contact-form-heading {
    margin-bottom: 28px;
}

.contact-form-heading h2 {
    font-family: "Playfair Display", Georgia, serif;
    color: #102c52;
    font-size: 34px;
    margin-top: 8px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-group label {
    color: #102c52;
    font-size: 12px;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7e1dd;
    background: white;
    padding: 14px 15px;
    color: #102c52;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group textarea {
    resize: vertical;
    min-height: 140px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9aa7ad;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #087d64;
    box-shadow: 0 0 0 3px rgba(8, 125, 100, 0.08);
}

.contact-submit {
    border: none;
    cursor: pointer;
    align-self: flex-start;
    margin-top: 5px;
}


/* =====================================================
   CONTACT BIBLE STUDY
===================================================== */

.contact-bible-content h2 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 18px;
}

.contact-bible-content > p:not(.section-label) {
    color: #d7eee8;
    font-size: 14px;
    line-height: 1.8;
    max-width: 480px;
    margin-bottom: 25px;
}

.contact-bible-image {
    min-height: 400px;
}

.contact-bible-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =====================================================
   FINAL CONTACT CTA
===================================================== */

.contact-final-cta {
    text-align: center;
    padding: 85px 30px;
    background: #f4f8f6;
}

.contact-final-cta h2 {
    font-family: "Playfair Display", Georgia, serif;
    color: #102c52;
    font-size: 38px;
    line-height: 1.2;
    max-width: 700px;
    margin: 0 auto 15px;
}

.contact-final-cta > p:last-child {
    color: #687681;
    font-size: 14px;
}


/* =====================================================
   GIVING PAGE HEADER
===================================================== */

.giving-page-header {
    min-height: 420px;
    background-image: url("images/header.jpeg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.inner-page-header-content {
    width: 1150px;
    max-width: 90%;
    margin: auto;
    padding: 70px 0;
    color: #087d64;
}

.inner-page-header-content p {
    color: #102c52;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.inner-page-header-content h1 {
    font-family: "Playfair Display", Georgia, serif;
    color: #087d64;
    font-size: clamp(45px, 5vw, 65px);
    line-height: 1.1;
    margin-bottom: 18px;
}

.inner-page-header-content span {
    color: #102c52;
    font-size: 15px;
    line-height: 1.7;
    display: block;
    max-width: 500px;
}


/* =====================================================
   REGISTRATION PAGE
===================================================== */

.registration-page-header {
    min-height: 420px;
    background-image: url("images/header.jpeg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.registration-header-content {
    width: 1150px;
    max-width: 90%;
    margin: auto;
    padding: 70px 0;
}

.registration-header-content p {
    color: #087d64;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.registration-header-content h1 {
    font-family: "Playfair Display", Georgia, serif;
    color: #07244b;
    font-size: clamp(42px, 5vw, 62px);
    line-height: 1.1;
    margin-bottom: 18px;
}

.registration-header-content span {
    color: #07244b;
    font-size: 15px;
    line-height: 1.7;
    display: block;
    max-width: 500px;
}


/* =====================================================
   REGISTRATION INTRODUCTION
===================================================== */

.registration-introduction {
    max-width: 1150px;
    margin: auto;
    padding: 90px 30px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: start;
}

.registration-intro-text h2 {
    font-family: "Playfair Display", Georgia, serif;
    color: #102c52;
    font-size: 43px;
    line-height: 1.15;
    margin-bottom: 22px;
}

.registration-intro-text > p:not(.section-label) {
    color: #687681;
    font-size: 14px;
    line-height: 1.85;
    margin-bottom: 16px;
}


/* =====================================================
   REGISTRATION DETAILS
===================================================== */

.registration-details {
    margin-top: 35px;
    border-top: 1px solid #dfe7e4;
}

.registration-detail {
    padding: 17px 0;
    border-bottom: 1px solid #dfe7e4;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.registration-detail strong {
    color: #087d64;
    font-size: 11px;
    letter-spacing: 1.5px;
}

.registration-detail span {
    color: #687681;
    font-size: 13px;
}


/* =====================================================
   REGISTRATION FORM
===================================================== */

.registration-form-container {
    background: #f4f8f6;
    padding: 45px;
}

.registration-form-heading {
    margin-bottom: 28px;
}

.registration-form-heading h2 {
    font-family: "Playfair Display", Georgia, serif;
    color: #102c52;
    font-size: 34px;
    margin: 8px 0 10px;
}

.registration-form-heading > p:last-child {
    color: #687681;
    font-size: 13px;
    line-height: 1.7;
}

.registration-form {
    display: flex;
    flex-direction: column;
    gap: 19px;
}


/* =====================================================
   REGISTRATION FORM FIELDS
===================================================== */

.registration-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.registration-form .form-group label {
    color: #102c52;
    font-size: 12px;
    font-weight: 600;
}

.registration-form .form-group label span {
    color: #9aa7ad;
    font-weight: 400;
}

.registration-form input[type="text"],
.registration-form input[type="email"],
.registration-form input[type="tel"],
.registration-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7e1dd;
    background: white;
    padding: 14px 15px;
    color: #102c52;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.registration-form textarea {
    resize: vertical;
    min-height: 110px;
}

.registration-form input::placeholder,
.registration-form textarea::placeholder {
    color: #9aa7ad;
}

.registration-form input:focus,
.registration-form textarea:focus {
    border-color: #087d64;
    box-shadow: 0 0 0 3px rgba(8, 125, 100, 0.08);
}


/* =====================================================
   REGISTRATION CONFIRMATION
===================================================== */

.registration-confirmation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 3px;
}

.registration-confirmation input {
    margin-top: 3px;
    accent-color: #087d64;
}

.registration-confirmation label {
    color: #687681;
    font-size: 12px;
    line-height: 1.6;
    cursor: pointer;
}

.registration-submit {
    border: none;
    cursor: pointer;
    align-self: flex-start;
    margin-top: 4px;
}


/* =====================================================
   REGISTRATION NEXT
===================================================== */

.registration-next {
    background: #07244b;
    color: white;
    padding: 80px 30px;
}

.registration-next-heading {
    max-width: 900px;
    margin: 0 auto 45px;
    text-align: center;
}

.registration-next-heading h2 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 42px;
}

.registration-next-grid {
    max-width: 1050px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.registration-next-card {
    padding: 35px 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
}

.registration-next-card > span {
    color: #72c4ae;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.registration-next-card h3 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 24px;
    margin: 12px 0 10px;
}

.registration-next-card p {
    color: #c8d4df;
    font-size: 13px;
    line-height: 1.7;
}


/* =====================================================
   REGISTRATION FINAL
===================================================== */

.registration-final {
    text-align: center;
    padding: 80px 30px;
    background: #f4f8f6;
}

.registration-final h2 {
    font-family: "Playfair Display", Georgia, serif;
    color: #102c52;
    font-size: 38px;
    max-width: 700px;
    line-height: 1.2;
    margin: 0 auto 15px;
}

.registration-final > p:last-child {
    color: #687681;
    font-size: 14px;
}


/* =====================================================
   DAILY MANNA
===================================================== */

.daily-manna {
    background: #f4f8f6;
    padding: 90px 30px;
    position: relative;
    overflow: hidden;
}

.daily-manna-container {
    max-width: 1150px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.5fr 0.7fr;
    gap: 60px;
    align-items: center;
}

.daily-manna-content {
    background: #ffffff;
    padding: 55px;
    border-left: 4px solid #087d64;
    box-shadow: 0 15px 45px rgba(7, 31, 92, 0.08);
}

.daily-manna-label {
    color: #087d64;
    margin-bottom: 15px;
}

.daily-manna h2 {
    font-family: "Playfair Display", Georgia, serif;
    color: #102c52;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.15;
    margin-bottom: 28px;
    max-width: 700px;
}


/* =====================================================
   DAILY MANNA VERSE
===================================================== */

.daily-manna-verse {
    border-top: 1px solid #dfe7e4;
    border-bottom: 1px solid #dfe7e4;
    padding: 25px 0;
    max-width: 720px;
}

.daily-manna-reference {
    color: #087d64;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.daily-manna-verse > p:last-child {
    color: #687681;
    font-size: 14px;
    line-height: 1.85;
    font-style: italic;
    margin: 0;
}


/* =====================================================
   DAILY MANNA CONNECT
===================================================== */

.daily-manna-connect {
    margin: 25px 0;
}

.daily-manna-connect-title {
    color: #102c52;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.daily-manna-phone {
    color: #087d64;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.daily-manna-phone:hover {
    color: #071f5c;
}

.daily-manna-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.daily-manna-button span {
    margin-left: 3px;
}


/* =====================================================
   DAILY MANNA SIDE PANEL
===================================================== */

.daily-manna-side {
    min-height: 300px;
    background: #07244b;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
}

.daily-manna-mark {
    width: 72px;
    height: 72px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #72c4ae;
    font-size: 28px;
    margin-bottom: 22px;
}

.daily-manna-side p {
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.daily-manna-side span {
    color: #c8d4df;
    font-size: 13px;
    line-height: 1.7;
    max-width: 240px;
}


/* =====================================================
   FOOTER DAILY MANNA
===================================================== */

.footer-daily-manna {
    max-width: 250px;
}

.footer-daily-manna > span {
    color: #72c4ae;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.footer-daily-manna p {
    color: #c8d4df;
    font-size: 12px;
    line-height: 1.6;
    margin: 8px 0;
}

.footer-daily-manna a {
    color: #ffffff;
    font-size: 12px;
    text-decoration: none;
    transition: 0.2s;
}

.footer-daily-manna a:hover {
    color: #72c9b2;
}


/* =====================================================
   SUCCESS / CONFIRMATION
===================================================== */

.success-page {
    min-height: 650px;
    padding: 90px 25px;
    background: linear-gradient(
        135deg,
        #f4f8f6 0%,
        #ffffff 55%,
        #edf6f2 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-card {
    width: 100%;
    max-width: 720px;
    background: white;
    padding: 60px;
    text-align: center;
    border: 1px solid #e1e8e4;
    box-shadow: 0 20px 60px rgba(7, 31, 92, 0.10);
}

.success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: #eaf5f0;
    color: #087d64;
    border: 1px solid #cce5da;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 31px;
    font-weight: 500;
}

.success-label {
    color: #087d64;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.success-card h1 {
    font-family: "Playfair Display", Georgia, serif;
    color: #102c52;
    font-size: clamp(38px, 5vw, 52px);
    line-height: 1.15;
    margin-bottom: 18px;
}

.success-main {
    color: #102c52;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 12px;
}

.success-description {
    max-width: 560px;
    margin: 0 auto;
    color: #687681;
    font-size: 14px;
    line-height: 1.8;
}

.success-reminder {
    max-width: 500px;
    margin: 30px auto;
    padding: 20px;
    background: #f4f8f6;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.success-reminder div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.success-reminder span {
    color: #087d64;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.success-reminder strong {
    color: #102c52;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 19px;
}

.success-followup {
    max-width: 540px;
    margin: 0 auto;
    color: #687681;
    font-size: 13px;
    line-height: 1.8;
}

.success-buttons {
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.success-secondary {
    color: #087d64;
    font-size: 12px;
    font-weight: 600;
}

.success-secondary:hover {
    color: #071f5c;
}


/* =====================================================
   FLASH / FORM MESSAGES
===================================================== */

.flash-container {
    position: fixed;
    top: 95px;
    left: 50%;
    transform: translateX(-50%);
    width: min(90%, 700px);
    z-index: 10000;
}

.flash-message {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #ffffff;
    padding: 18px 20px;
    border-left: 4px solid #126b45;
    box-shadow: 0 12px 35px rgba(7, 31, 92, 0.15);
    color: #17202a;
    font-size: 14px;
    line-height: 1.6;
    animation: flashSlideDown 0.35s ease;
}

.flash-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #126b45;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.flash-close {
    margin-left: auto;
    border: none;
    background: transparent;
    color: #687078;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}

.flash-close:hover {
    color: #071f5c;
}

@keyframes flashSlideDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =====================================================
   WHATSAPP FLOATING BUTTON
===================================================== */

.whatsapp-float {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 58px;
    height: 58px;
    background: #126b45;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.20);
    z-index: 9999;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.whatsapp-float:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.whatsapp-icon {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whatsapp-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}


/* =====================================================
   BIBLE WORD SEARCH
===================================================== */

.word-search-section {
    background: #f4f8f6;
    padding: 90px 20px;
}

.word-search-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 45px;
}

.word-search-heading .section-label {
    display: block;
    margin-bottom: 12px;
    color: #126b45;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.word-search-heading h2 {
    margin: 0 0 12px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 44px;
    line-height: 1.1;
    color: #102c52;
}

.word-search-heading > p:last-child {
    margin: 0;
    color: #687681;
    font-size: 15px;
    line-height: 1.8;
}


/* =====================================================
   WORD SEARCH CARD
===================================================== */

.word-search-card {
    max-width: 1050px;
    margin: 0 auto;
    padding: 44px 36px 38px;
    background: #ffffff;
    border: 1px solid #dfe7e4;
    box-shadow: 0 18px 45px rgba(7, 31, 92, 0.08);
}

.word-search-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.word-search-label {
    display: block;
    margin-bottom: 14px;
    color: #126b45;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.word-search-instruction {
    margin: 0;
    padding-left: 18px;
    border-left: 3px solid #126b45;
    color: #687681;
    font-size: 14px;
    line-height: 1.6;
}


/* =====================================================
   WORD SEARCH RESET
===================================================== */

.word-search-reset {
    flex-shrink: 0;
    padding: 10px 20px;
    border: 1px solid #dce4e1;
    border-radius: 30px;
    background: #ffffff;
    color: #102c52;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.word-search-reset:hover {
    border-color: #126b45;
    color: #126b45;
    transform: translateY(-1px);
}

/* =====================================================
   WORD SEARCH GRID
===================================================== */

.word-search-grid {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: repeat(14, 1fr);

    width: min(400px, 100%);
    aspect-ratio: 1 / 1;

    margin: 25px auto;
    padding: 8px;

    background: #071F5C;
    border-radius: 8px;

    gap: 3px;
    box-sizing: border-box;

    user-select: none;
    touch-action: none;
}

.word-search-cell {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding: 0;
    margin: 0;

    border: 1px solid #e1e8e5;
    border-radius: 3px;

    background: #ffffff;
    color: #102c52;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
    user-select: none;

    box-sizing: border-box;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.word-search-cell:hover {
    background: #edf6f1;
    border-color: #126b45;
    color: #126b45;
}

.word-search-cell.word-search-start,
.word-search-cell.selecting {
    background: #126b45;
    border-color: #126b45;
    color: #ffffff;
}

.word-search-cell.word-search-found,
.word-search-cell.found {
    background: #126b45;
    border-color: #126b45;
    color: #ffffff;
}


/* =====================================================
   WORD SEARCH WORD LIST
===================================================== */

.word-search-words {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;

    max-width: 650px;
    margin: 20px auto 20px;
}

.word-search-word {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 11px;

    border: 1px solid #dfe7e4;
    border-radius: 4px;

    background: #ffffff;
    color: #102c52;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;

    transition: all 0.2s ease;
}

.word-search-word.found {
    background: #edf6f1;
    border-color: #b9d9c9;
    color: #126b45;
    text-decoration: line-through;
}


/* =====================================================
   WORD SEARCH MESSAGE
===================================================== */

.word-search-message {
    display: none;

    margin: 15px auto 0;
    padding: 12px 15px;

    max-width: 500px;

    text-align: center;

    color: #126b45;
    background: #edf6f1;
    border: 1px solid #b9d9c9;
    border-radius: 6px;

    font-size: 13px;
    line-height: 1.5;
}

.word-search-message.show {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}


/* =====================================================
   BIBLE STUDY MOBILE
===================================================== */

@media (max-width: 850px) {

    .bible-page-header,
    .contact-page-header,
    .giving-page-header,
    .registration-page-header {
        min-height: 350px;
    }

    .bible-header-content,
    .contact-header-content,
    .inner-page-header-content,
    .registration-header-content {
        padding: 55px 0;
    }

    .bible-header-content h1,
    .contact-header-content h1,
    .inner-page-header-content h1 {
        font-size: 44px;
    }

    .registration-header-content h1 {
        font-size: 42px;
    }

    .bible-introduction,
    .contact-introduction,
    .registration-introduction {
        grid-template-columns: 1fr;
        padding: 65px 25px;
        gap: 45px;
    }

    .bible-intro-content h2,
    .bible-details-heading h2,
    .expect-content h2,
    .zoom-content h2,
    .contact-intro-content h2,
    .registration-intro-text h2 {
        font-size: 35px;
    }

    .bible-intro-image img,
    .expect-image img {
        height: 330px;
    }

    .bible-details {
        padding: 65px 25px;
    }

    .bible-detail-cards,
    .registration-next-grid {
        grid-template-columns: 1fr;
    }

    .what-to-expect {
        grid-template-columns: 1fr;
        padding: 65px 25px;
        gap: 40px;
    }

    .zoom-section {
        grid-template-columns: 1fr;
    }

    .zoom-content {
        padding: 60px 25px;
    }

    .zoom-image {
        min-height: 300px;
    }

    .bible-faq {
        padding: 65px 25px;
    }

    .faq-heading h2 {
        font-size: 35px;
    }

    .bible-registration-cta {
        padding: 55px 25px;
        flex-direction: column;
        align-items: flex-start;
    }

    .bible-registration-cta h2 {
        font-size: 32px;
    }

    .contact-form-container {
        padding: 30px 25px;
    }

    .contact-form-heading h2,
    .registration-form-heading h2 {
        font-size: 31px;
    }

    .contact-bible-study {
        grid-template-columns: 1fr;
    }

    .contact-bible-content {
        padding: 60px 25px;
    }

    .contact-bible-content h2 {
        font-size: 35px;
    }

    .contact-bible-image {
        min-height: 300px;
    }

    .contact-final-cta {
        padding: 65px 25px;
    }

    .contact-final-cta h2 {
        font-size: 32px;
    }

    .registration-next {
        padding: 65px 25px;
    }

    .registration-next-heading h2 {
        font-size: 35px;
    }

    .registration-final {
        padding: 65px 25px;
    }

    .registration-final h2 {
        font-size: 32px;
    }

    .daily-manna {
        padding: 65px 25px;
    }

    .daily-manna-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .daily-manna-content {
        padding: 35px 25px;
    }

    .daily-manna h2 {
        font-size: 35px;
    }

    .daily-manna-side {
        min-height: 230px;
    }

    .footer-daily-manna {
        max-width: none;
        text-align: center;
    }

    .word-search-section {
        padding: 65px 15px;
    }

    .word-search-heading h2 {
        font-size: 34px;
    }

    .word-search-card {
        padding: 30px 15px;
    }

    .word-search-card-top {
        align-items: center;
    }

    .word-search-grid {
        gap: 2px;
        margin-top: 25px;
    }

    .word-search-cell {
        border-radius: 2px;
    }

    .word-search-instruction {
        font-size: 12px;
    }

    .word-search-reset {
        padding: 8px 15px;
    }

    .success-page {
        min-height: 600px;
        padding: 60px 20px;
    }

    .success-card {
        padding: 40px 25px;
    }

    .success-reminder {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .success-buttons {
        flex-direction: column;
    }

    .whatsapp-float {
        width: 54px;
        height: 54px;
        right: 18px;
        bottom: 18px;
    }

    .whatsapp-icon {
        width: 27px;
        height: 27px;
    }

    .flash-container {
        top: 80px;
        width: calc(100% - 30px);
    }
}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    .word-search-card-top {
        flex-direction: column;
        align-items: stretch;
    }

    .word-search-reset {
        align-self: flex-end;
    }

    .word-search-grid {
        width: min(100%, 350px);
        padding: 6px;
        gap: 2px;
    }

    .word-search-cell {
        font-size: 9px;
    }

    .success-card {
        padding: 40px 25px;
    }
}

/* =====================================================
   BIBLE STUDY NEWS TICKER
===================================================== */

.bible-study-ticker {
    position: relative;

    width: 100%;

    background: #071f5c;

    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

    overflow: hidden;
}


/* SMALL LABEL */

.ticker-label {
    position: absolute;

    left: 0;
    top: 0;

    z-index: 5;

    height: 100%;

    display: flex;

    align-items: center;

    padding: 0 28px;

    background: #126b45;

    color: #ffffff;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    white-space: nowrap;
}


/* MOVING AREA */

.ticker-window {
    width: 100%;

    overflow: hidden;

    padding: 20px 0 20px 170px;

    white-space: nowrap;
}


/* MOVING TRACK */

.ticker-track {
    display: flex;

    width: max-content;

    animation:
        bibleTicker 28s linear infinite;
}


/* EACH COMPLETE SET */

.ticker-content {
    display: flex;

    align-items: center;

    flex-shrink: 0;

    gap: 28px;

    padding-right: 28px;
}


/* MAIN INFORMATION */

.ticker-heading {
    color: #ffffff;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 22px;

    font-weight: 600;

    white-space: nowrap;
}


/* DIVIDERS */

.ticker-divider {
    color: #126b45;

    font-size: 18px;

    font-weight: 700;
}


/* DESCRIPTION */

.ticker-message {
    color: rgba(255, 255, 255, 0.72);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 400;

    white-space: nowrap;
}


/* STARS */

.ticker-star {
    color: #ffffff;

    font-size: 14px;

    flex-shrink: 0;
}


/* =====================================================
   ANIMATION
===================================================== */

@keyframes bibleTicker {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =====================================================
   PAUSE ON HOVER
===================================================== */

.bible-study-ticker:hover .ticker-track {
    animation-play-state: paused;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 850px) {

    .ticker-label {
        padding: 0 18px;

        font-size: 9px;

        letter-spacing: 1.5px;
    }

    .ticker-window {
        padding-left: 125px;

        padding-top: 17px;
        padding-bottom: 17px;
    }

    .ticker-content {
        gap: 20px;

        padding-right: 20px;
    }

    .ticker-heading {
        font-size: 17px;
    }

    .ticker-message {
        font-size: 10px;
    }

    .ticker-divider {
        font-size: 14px;
    }

    .ticker-star {
        font-size: 11px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    .ticker-label {
        padding: 0 14px;

        font-size: 8px;

        letter-spacing: 1px;
    }

    .ticker-window {
        padding-left: 105px;

        padding-top: 15px;
        padding-bottom: 15px;
    }

    .ticker-content {
        gap: 16px;

        padding-right: 16px;
    }

    .ticker-heading {
        font-size: 15px;
    }

    .ticker-message {
        font-size: 9px;
    }

}/* =========================================================
   DAILY DEVOTIONALS
   ========================================================= */

.daily-devotionals {
    position: relative;
    padding: 95px 0 85px;
    background: #f5f8f6;
    overflow: hidden;
}

.daily-devotionals-header {
    text-align: center;
    margin-bottom: 50px;
}

.daily-devotionals-header .section-label {
    margin-bottom: 18px;
}

.daily-devotionals-header h2 {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(48px, 5vw, 72px);
    font-weight: 500;
    line-height: 1;
    color: #102c52;
}

.daily-devotionals-header p {
    margin: 15px 0 0;
    color: #84919a;
    font-size: 13px;
}


/* CAROUSEL */

.devotional-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0 0 5px;
}

.devotional-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 20px;
    will-change: transform;
}


/* CARDS */

.devotional-card {
    flex: 0 0 280px;
    width: 280px;
    background: #ffffff;
    border: 1px solid #e3e9e6;
    box-shadow: 0 8px 25px rgba(7, 31, 92, 0.04);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.devotional-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(7, 31, 92, 0.10);
}


/* IMAGE */

.devotional-card-image {
    width: 100%;
    height: 208px;
    overflow: hidden;
    background: #102c52;
}

.devotional-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* CARD CONTENT */

.devotional-card-content {
    min-height: 195px;
    padding: 22px;
    background: #ffffff;
}

.devotional-card-number {
    display: block;
    margin-bottom: 12px;
    color: #126b45;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.devotional-card h3 {
    margin: 0 0 10px;
    color: #102c52;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 22px;
    line-height: 1.25;
}

.devotional-card p {
    margin: 0;
    color: #7d8991;
    font-size: 12px;
    line-height: 1.7;
}

.devotional-read {
    display: block;
    margin-top: 22px;
    color: #126b45;
    font-size: 11px;
    font-weight: 700;
}


/* ARROWS */

.devotional-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border: 1px solid #dbe4e0;
    border-radius: 50%;

    background: #ffffff;
    color: #126b45;

    font-size: 20px;
    cursor: pointer;

    transform: translateY(-50%);
    box-shadow: 0 5px 20px rgba(7, 31, 92, 0.06);

    transition: all 0.25s ease;
}

.devotional-arrow:hover {
    background: #126b45;
    color: #ffffff;
    border-color: #126b45;
}

.devotional-prev {
    left: 6%;
}

.devotional-next {
    right: 6%;
}


/* DOTS */

.devotional-dots {
    display: none;
}


/* =========================================================
   FULL DEVOTIONAL MODAL
   ========================================================= */

.devotional-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.devotional-modal.open {
    opacity: 1;
    visibility: visible;
}

.devotional-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(7, 31, 92, 0.72);
    backdrop-filter: blur(5px);
}

.devotional-modal-content {
    position: relative;
    z-index: 2;

    width: min(850px, 100%);
    max-height: 90vh;

    overflow-y: auto;

    background: #ffffff;

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}

.devotional-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 5;

    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.95);
    color: #102c52;

    font-size: 25px;
    cursor: pointer;
}

.devotional-full-image {
    position: relative;
    background: #102c52;
}

.devotional-full-image img {
    display: block;
    width: 100%;
    max-height: 500px;
    object-fit: contain;
}

.devotional-download {
    position: absolute;
    right: 15px;
    bottom: 15px;

    padding: 9px 13px;

    background: rgba(255, 255, 255, 0.95);
    color: #102c52;

    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.devotional-modal-body {
    padding: 35px;
}

.devotional-modal-label {
    color: #126b45;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.devotional-modal-body h2 {
    margin: 10px 0 20px;

    color: #102c52;

    font-family: "Playfair Display", Georgia, serif;
    font-size: 36px;
}

.devotional-modal-text {
    color: #687680;
    font-size: 14px;
    line-height: 1.8;
}

.devotional-modal-text p {
    margin-bottom: 18px;
}

.devotional-modal-footer {
    margin-top: 30px;
}

.devotional-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 11px 17px;

    background: #126b45;
    color: #ffffff;

    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.devotional-whatsapp:hover {
    background: #0b5033;
}


/* MOBILE */

@media (max-width: 700px) {

    .daily-devotionals {
        padding: 70px 0;
    }

    .daily-devotionals-header {
        margin-bottom: 35px;
        padding: 0 20px;
    }

    .daily-devotionals-header h2 {
        font-size: 46px;
    }

    .devotional-card {
        flex-basis: 270px;
        width: 270px;
    }

    .devotional-card-image {
        height: 200px;
    }

    .devotional-prev {
        left: 15px;
    }

    .devotional-next {
        right: 15px;
    }

    .devotional-arrow {
        width: 38px;
        height: 38px;
    }

    .devotional-modal {
        padding: 15px;
    }

    .devotional-modal-body {
        padding: 25px;
    }

    .devotional-modal-body h2 {
        font-size: 28px;
    }
}

/* =========================================================
   MOBILE FLOATING OVAL NAVIGATION
========================================================= */

.mobile-nav-overlay {
    display: none;
}

.mobile-menu-button {
    display: none;
}


@media (max-width: 850px) {

    /* =====================================================
       HAMBURGER
    ===================================================== */

    .mobile-menu-button {

        display: flex;

        width: 44px;
        height: 44px;

        padding: 0;

        border: 1px solid #dfe7e4;

        border-radius: 50%;

        background: #ffffff;

        align-items: center;
        justify-content: center;

        flex-direction: column;

        gap: 5px;

        cursor: pointer;

        position: relative;

        z-index: 10005;

    }


    .mobile-menu-button span {

        display: block;

        width: 18px;
        height: 2px;

        background: #102c52;

        border-radius: 2px;

        transition:
            transform 0.25s ease,
            opacity 0.25s ease;

    }


    /* HAMBURGER → X */

    body.mobile-sidebar-open
    .mobile-menu-button
    span:nth-child(1) {

        transform:
            translateY(7px)
            rotate(45deg);

    }


    body.mobile-sidebar-open
    .mobile-menu-button
    span:nth-child(2) {

        opacity: 0;

    }


    body.mobile-sidebar-open
    .mobile-menu-button
    span:nth-child(3) {

        transform:
            translateY(-7px)
            rotate(-45deg);

    }


    /* =====================================================
       BACKGROUND OVERLAY

       IMPORTANT:
       This does NOT create a sidebar.
       It simply sits over the page.
    ===================================================== */

    .mobile-nav-overlay {

        display: block;

        position: fixed;

        inset: 0;

        background:
            rgba(4, 21, 63, 0.32);

        backdrop-filter: blur(5px);

        -webkit-backdrop-filter: blur(5px);

        z-index: 9990;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease;

    }


    .mobile-nav-overlay.open {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

    }


    /* =====================================================
       FLOATING NAVIGATION

       NO BACKGROUND
       NO WHITE PANEL
       NO COLUMN
    ===================================================== */

    .mobile-floating-nav {

        position: fixed;

        top: 78px;

        right: 18px;

        width: auto;
        height: auto;

        z-index: 10000;

        pointer-events: none;

        background: transparent;

        border: none;

        box-shadow: none;

    }


    /* =====================================================
       OVAL CONTAINER

       IMPORTANT:
       Transparent.
       It cannot create a white column.
    ===================================================== */

    .mobile-floating-nav-links {

        display: flex;

        flex-direction: column;

        align-items: flex-end;

        gap: 12px;

        width: max-content;

        background: transparent;

        padding: 0;

        margin: 0;

    }


    /* =====================================================
       INDIVIDUAL OVALS
    ===================================================== */

    .mobile-nav-oval {

        display: flex;

        align-items: center;

        justify-content: flex-start;

        gap: 10px;

        height: 48px;

        min-width: 145px;

        padding: 0 18px 0 9px;

        border-radius: 999px;

        background: #ffffff;

        color: #102c52;

        text-decoration: none;

        border: 1px solid
            rgba(18, 107, 69, 0.12);

        box-shadow:
            0 10px 28px
            rgba(4, 21, 63, 0.20);

        opacity: 0;

        transform:
            translateX(45px)
            scale(0.92);

        pointer-events: none;

        transition:
            opacity 0.35s ease,
            transform 0.35s
            cubic-bezier(.22, 1, .36, 1),
            box-shadow 0.2s ease;

    }


    /* =====================================================
       ICON
    ===================================================== */

    .mobile-nav-icon {

        display: flex;

        align-items: center;
        justify-content: center;

        width: 32px;
        height: 32px;

        flex: 0 0 32px;

        border-radius: 50%;

        background: #126b45;

        color: #ffffff;

        font-size: 14px;

        line-height: 1;

    }


    /* =====================================================
       TEXT
    ===================================================== */

    .mobile-nav-text {

        font-family:
            "Montserrat",
            Arial,
            sans-serif;

        font-size: 13px;

        font-weight: 600;

        white-space: nowrap;

        letter-spacing: 0.1px;

    }


    /* =====================================================
       OPEN ANIMATION
    ===================================================== */

    .mobile-floating-nav.open
    .mobile-nav-oval {

        opacity: 1;

        transform:
            translateX(0)
            scale(1);

        pointer-events: auto;

    }


    /* Each oval appears one after another */

    .mobile-floating-nav.open
    .mobile-nav-oval:nth-child(1) {

        transition-delay: 0.04s;

    }


    .mobile-floating-nav.open
    .mobile-nav-oval:nth-child(2) {

        transition-delay: 0.10s;

    }


    .mobile-floating-nav.open
    .mobile-nav-oval:nth-child(3) {

        transition-delay: 0.16s;

    }


    .mobile-floating-nav.open
    .mobile-nav-oval:nth-child(4) {

        transition-delay: 0.22s;

    }


    .mobile-floating-nav.open
    .mobile-nav-oval:nth-child(5) {

        transition-delay: 0.28s;

    }


    .mobile-floating-nav.open
    .mobile-nav-oval:nth-child(6) {

        transition-delay: 0.34s;

    }


    /* =====================================================
       REGISTER OVAL
    ===================================================== */

    .mobile-nav-register {

        background: #126b45;

        color: #ffffff;

    }


    .mobile-nav-register
    .mobile-nav-icon {

        background: #ffffff;

        color: #126b45;

    }


    /* =====================================================
       HOVER / TOUCH
    ===================================================== */

    .mobile-nav-oval:hover {

        box-shadow:
            0 14px 35px
            rgba(4, 21, 63, 0.28);

    }


    .mobile-nav-oval:active {

        transform:
            translateX(-3px)
            scale(0.97);

    }


    /* =====================================================
       IMPORTANT:
       DO NOT LOCK PAGE SCROLLING
    ===================================================== */

    body.mobile-sidebar-open {

        overflow: auto;

    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 851px) {

    .mobile-menu-button,
    .mobile-floating-nav,
    .mobile-nav-overlay {

        display: none !important;

    }

}

/* =========================================================
   FINAL MOBILE FLOATING NAVIGATION OVERRIDE
   PASTE THIS AT THE VERY BOTTOM OF style.css
========================================================= */

@media (max-width: 850px) {

    /* -----------------------------------------------------
       DO NOT LOCK THE WEBSITE SCROLL
       The page must still be able to scroll underneath.
    ----------------------------------------------------- */

    body.mobile-sidebar-open {
        overflow: auto !important;
    }


    /* -----------------------------------------------------
       HAMBURGER
    ----------------------------------------------------- */

    .mobile-menu-button {
        display: flex !important;

        position: relative !important;

        z-index: 10005 !important;

        width: 44px !important;
        height: 44px !important;

        flex-shrink: 0 !important;
    }


    /* -----------------------------------------------------
       DARK / BLURRED BACKGROUND
    ----------------------------------------------------- */

    .mobile-nav-overlay {
        display: block !important;

        position: fixed !important;

        inset: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

        background:
            rgba(4, 21, 63, 0.50) !important;

        backdrop-filter:
            blur(6px) !important;

        -webkit-backdrop-filter:
            blur(6px) !important;

        z-index: 9990 !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease !important;
    }


    .mobile-nav-overlay.open {
        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    /* -----------------------------------------------------
       FLOATING NAVIGATION CONTAINER

       IMPORTANT:
       RIGHT SIDE.
       NO WHITE PANEL.
       NO WIDTH.
       NO BACKGROUND.
    ----------------------------------------------------- */
.mobile-floating-nav {
    display: block !important;

    position: fixed !important;

    /* Higher up on the right side */
    top: 105px !important;

    right: 12px !important;

    left: auto !important;

    width: auto !important;

    max-width: calc(100vw - 24px) !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    overflow: visible !important;

    transform: none !important;

    z-index: 10000 !important;

    pointer-events: none !important;

    visibility: hidden !important;
}

    /* -----------------------------------------------------
       SHOW NAV
    ----------------------------------------------------- */

    .mobile-floating-nav.open {
        visibility: visible !important;

        pointer-events: none !important;
    }


    /* -----------------------------------------------------
       OVAL CONTAINER

       NO SIDEBAR.
       NO WHITE COLUMN.
    ----------------------------------------------------- */

    .mobile-floating-nav-links {
        display: flex !important;

        flex-direction: column !important;

        align-items: flex-end !important;

        justify-content: center !important;

        gap: 10px !important;

        width: auto !important;

        height: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        background: transparent !important;

        border: none !important;

        box-shadow: none !important;

        overflow: visible !important;
    }


    /* -----------------------------------------------------
       INDIVIDUAL OVALS
    ----------------------------------------------------- */

    .mobile-floating-nav .mobile-nav-oval {
        display: flex !important;

        position: relative !important;

        box-sizing: border-box !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 10px !important;

        width: 175px !important;

        min-width: 175px !important;

        max-width: calc(100vw - 24px) !important;

        height: 48px !important;

        min-height: 48px !important;

        max-height: 48px !important;

        margin: 0 !important;

        padding: 0 16px 0 8px !important;

        border-radius: 999px !important;

        border: 1px solid rgba(
            18,
            107,
            69,
            0.15
        ) !important;

        background: #ffffff !important;

        color: #102c52 !important;

        text-decoration: none !important;

        white-space: nowrap !important;

        box-shadow:
            0 8px 25px
            rgba(4, 21, 63, 0.22) !important;

        opacity: 0 !important;

        visibility: hidden !important;

        transform:
            translateX(30px)
            scale(0.92) !important;

        pointer-events: none !important;

        overflow: visible !important;

        transition:
            opacity 0.35s ease,
            transform 0.35s
            cubic-bezier(.22, 1, .36, 1),
            box-shadow 0.2s ease !important;
    }


    /* -----------------------------------------------------
       OPEN OVALS
    ----------------------------------------------------- */

    .mobile-floating-nav.open
    .mobile-nav-oval {
        opacity: 1 !important;

        visibility: visible !important;

        transform:
            translateX(0)
            scale(1) !important;

        pointer-events: auto !important;
    }


    /* -----------------------------------------------------
       ANIMATION DELAY
    ----------------------------------------------------- */

    .mobile-floating-nav.open
    .mobile-nav-oval:nth-child(1) {
        transition-delay: 0.04s !important;
    }

    .mobile-floating-nav.open
    .mobile-nav-oval:nth-child(2) {
        transition-delay: 0.10s !important;
    }

    .mobile-floating-nav.open
    .mobile-nav-oval:nth-child(3) {
        transition-delay: 0.16s !important;
    }

    .mobile-floating-nav.open
    .mobile-nav-oval:nth-child(4) {
        transition-delay: 0.22s !important;
    }

    .mobile-floating-nav.open
    .mobile-nav-oval:nth-child(5) {
        transition-delay: 0.28s !important;
    }

    .mobile-floating-nav.open
    .mobile-nav-oval:nth-child(6) {
        transition-delay: 0.34s !important;
    }


    /* -----------------------------------------------------
       ICON CIRCLE
    ----------------------------------------------------- */

    .mobile-floating-nav
    .mobile-nav-icon {
        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        flex: 0 0 32px !important;

        width: 32px !important;

        min-width: 32px !important;

        height: 32px !important;

        min-height: 32px !important;

        margin: 0 !important;

        padding: 0 !important;

        border-radius: 50% !important;

        background: #126b45 !important;

        color: #ffffff !important;

        font-family:
            Arial,
            sans-serif !important;

        font-size: 14px !important;

        line-height: 1 !important;
    }


    /* -----------------------------------------------------
       TEXT
    ----------------------------------------------------- */

    .mobile-floating-nav
    .mobile-nav-text {
        display: block !important;

        width: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        color: #102c52 !important;

        font-family:
            Montserrat,
            Arial,
            sans-serif !important;

        font-size: 12px !important;

        font-weight: 600 !important;

        line-height: 1 !important;

        white-space: nowrap !important;

        visibility: visible !important;
    }


    /* -----------------------------------------------------
       REGISTER OVAL
    ----------------------------------------------------- */

    .mobile-floating-nav
    .mobile-nav-register {
        background: #126b45 !important;

        color: #ffffff !important;
    }


    .mobile-floating-nav
    .mobile-nav-register
    .mobile-nav-icon {
        background: #ffffff !important;

        color: #126b45 !important;
    }


    .mobile-floating-nav
    .mobile-nav-register
    .mobile-nav-text {
        color: #ffffff !important;
    }


    /* -----------------------------------------------------
       HOVER
    ----------------------------------------------------- */

    .mobile-floating-nav
    .mobile-nav-oval:hover {
        box-shadow:
            0 12px 30px
            rgba(4, 21, 63, 0.30) !important;

        transform:
            translateX(-4px)
            scale(1.02) !important;
    }


    /* -----------------------------------------------------
       ACTIVE / TAP
    ----------------------------------------------------- */

    .mobile-floating-nav
    .mobile-nav-oval:active {
        transform:
            translateX(-2px)
            scale(0.97) !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .mobile-floating-nav {
        right: 8px !important;

        max-width:
            calc(100vw - 16px) !important;
    }


    .mobile-floating-nav
    .mobile-nav-oval {
        width: 160px !important;

        min-width: 160px !important;

        max-width:
            calc(100vw - 16px) !important;

        height: 45px !important;

        min-height: 45px !important;

        max-height: 45px !important;

        padding-right: 13px !important;
    }


    .mobile-floating-nav
    .mobile-nav-icon {
        width: 30px !important;

        min-width: 30px !important;

        height: 30px !important;

        min-height: 30px !important;
    }


    .mobile-floating-nav
    .mobile-nav-text {
        font-size: 11px !important;
    }

}


/* =========================================================
   DESKTOP — COMPLETELY HIDE MOBILE NAV
========================================================= */

@media (min-width: 851px) {

    .mobile-menu-button,
    .mobile-floating-nav,
    .mobile-nav-overlay {
        display: none !important;
    }

}

/* =========================================================
   NATIONS NEWS TICKER
   ========================================================= */

.nations-news-ticker {
    width: 100%;
    background: #04153F;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: stretch;
    min-height: 50px;
    overflow: hidden;
}

.nations-ticker-label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 28px;
    background: #126B45;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.ticker-live-dot {
    width: 7px;
    height: 7px;
    background: #ffffff;
    border-radius: 50%;
    display: inline-block;
    animation: tickerPulse 1.6s ease-in-out infinite;
}

@keyframes tickerPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.75);
    }
}

.nations-ticker-window {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
}

.nations-ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: nationsTickerMove 32s linear infinite;
}

.nation-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 28px;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.nation-item::after {
    content: "•";
    margin-left: 18px;
    color: #39B98A;
    font-size: 16px;
}

.nation-flag {
    font-size: 22px;
    line-height: 1;
}

@keyframes nationsTickerMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


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

    .nations-news-ticker {
        min-height: 62px;
    }

    .nations-ticker-label {
        padding: 0 16px;
        font-size: 9px;
        letter-spacing: 1.3px;
    }

    .ticker-live-dot {
        width: 6px;
        height: 6px;
    }

    .nation-item {
        gap: 8px;
        padding: 0 18px;
        font-size: 11px;
    }

    .nation-item::after {
        margin-left: 10px;
    }

    .nation-flag {
        font-size: 19px;
    }

    .nations-ticker-track {
        animation-duration: 27s;
    }
}

/* =========================================================
   NATIONS FLAGS VIDEO TICKER
   ========================================================= */

.nations-video-ticker {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: stretch;
    background: #04153F;
    overflow: hidden;
}

.nations-ticker-label {
    flex: 0 0 auto;
    width: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: #126B45;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.ticker-live-dot {
    width: 7px;
    height: 7px;
    background: #ffffff;
    border-radius: 50%;
    display: inline-block;
    animation: tickerPulse 1.6s ease-in-out infinite;
}

@keyframes tickerPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }
}

.nations-video-window {
    flex: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #04153F;
}

.nations-flags-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}


/* MOBILE */

@media (max-width: 700px) {

    .nations-video-ticker {
        height: 50px;
    }

    .nations-ticker-label {
        width: 125px;
        padding: 0 10px;
        font-size: 8px;
        letter-spacing: 1px;
    }

    .ticker-live-dot {
        width: 6px;
        height: 6px;
    }

    .nations-video-window {
        height: 78px;
    }
}

/* =========================================================
   ELIM SANCTUARY — BIBLE STUDY REDESIGN
   ========================================================= */


/* INTRODUCTION
--------------------------------------------------------- */

.bible-study-introduction {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) minmax(360px, 0.9fr);
    gap: 45px;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 110px 7%;
}

.bible-study-intro-number {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.bible-study-intro-number span {
    font-family: "Playfair Display", serif;
    font-size: 24px;
    color: #126B45;
    writing-mode: vertical-rl;
    letter-spacing: 3px;
}

.bible-study-intro-content {
    max-width: 650px;
}

.bible-study-intro-content h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.05;
    color: #071F5C;
    margin: 15px 0 28px;
}

.bible-study-intro-content h2 span {
    display: block;
    color: #126B45;
}

.bible-study-lead {
    font-size: 19px !important;
    line-height: 1.8 !important;
    color: #071F5C !important;
}

.bible-study-intro-content p {
    line-height: 1.8;
    color: #62748A;
}

.bible-study-intro-image {
    position: relative;
    height: 530px;
    overflow: hidden;
}

.bible-study-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bible-image-overlay {
    position: absolute;
    bottom: 25px;
    left: 25px;
    right: 25px;
    padding: 24px;
    background: rgba(4, 21, 63, 0.9);
    color: #ffffff;
}

.bible-image-overlay span {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    color: #39B98A;
    margin-bottom: 5px;
}

.bible-image-overlay strong {
    font-family: "Playfair Display", serif;
    font-size: 25px;
}


/* HOW WE STUDY
--------------------------------------------------------- */

.bible-how-section {
    background: #F4F8F7;
    padding: 110px 7%;
}

.bible-section-heading {
    max-width: 720px;
    margin-bottom: 55px;
}

.bible-section-heading h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(38px, 5vw, 60px);
    color: #071F5C;
    margin: 12px 0 20px;
}

.bible-section-heading > p:last-child {
    color: #65758A;
    line-height: 1.8;
    font-size: 16px;
}

.bible-approach-grid {
    max-width: 1250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.bible-approach-card {
    position: relative;
    padding: 45px;
    min-height: 330px;
    background: #ffffff;
    border-right: 1px solid #E2E9E6;
}

.bible-approach-card:last-child {
    border-right: none;
}

.bible-approach-card.featured {
    background: #071F5C;
    color: #ffffff;
}

.approach-number {
    position: absolute;
    top: 25px;
    right: 30px;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    opacity: 0.5;
}

.approach-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E7F2EE;
    color: #126B45;
    font-size: 22px;
    margin-bottom: 40px;
}

.featured .approach-icon {
    background: rgba(255,255,255,0.1);
    color: #39B98A;
}

.bible-approach-card h3 {
    font-family: "Playfair Display", serif;
    font-size: 34px;
    margin-bottom: 15px;
    color: #071F5C;
}

.featured h3 {
    color: #ffffff;
}

.bible-approach-card p {
    color: #6A7B8D;
    line-height: 1.7;
    margin: 0;
}

.featured p {
    color: rgba(255,255,255,0.72);
}


/* MODULES
--------------------------------------------------------- */

.bible-modules-section {
    padding: 115px 7%;
    background: #ffffff;
}

.bible-modules-header {
    max-width: 1250px;
    margin: 0 auto 55px;
    display: flex;
    justify-content: space-between;
    gap: 50px;
    align-items: flex-end;
}

.bible-modules-header h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(38px, 5vw, 58px);
    color: #071F5C;
    margin: 12px 0 0;
}

.bible-modules-header > p {
    max-width: 390px;
    color: #68798B;
    line-height: 1.7;
    margin: 0;
}

.bible-modules-grid {
    max-width: 1250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.bible-module-card {
    padding: 34px;
    border: 1px solid #E1E8E5;
    background: #FBFCFC;
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.bible-module-card:hover {
    transform: translateY(-5px);
    border-color: #126B45;
    box-shadow: 0 18px 45px rgba(4, 21, 63, 0.08);
}

.module-top {
    display: flex;
    justify-content: space-between;
    color: #126B45;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
    margin-bottom: 35px;
}

.bible-module-card h3 {
    font-family: "Playfair Display", serif;
    font-size: 30px;
    color: #071F5C;
    margin-bottom: 15px;
}

.bible-module-card p {
    color: #68798B;
    line-height: 1.7;
    margin-bottom: 35px;
}

.module-footer {
    border-top: 1px solid #E1E8E5;
    padding-top: 17px;
    display: flex;
    justify-content: space-between;
    color: #8A98A6;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* SCRIPTURE LAB
--------------------------------------------------------- */

.bible-scripture-lab {
    background: #071F5C;
    padding: 85px 7%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.scripture-lab-content {
    max-width: 550px;
}

.scripture-lab-content .section-label {
    color: #39B98A;
}

.scripture-lab-content h2 {
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(45px, 6vw, 75px);
    margin: 10px 0 20px;
}

.scripture-lab-content p {
    color: rgba(255,255,255,0.7);
    line-height: 1.8;
}

.scripture-lab-feature {
    min-height: 210px;
    padding: 35px;
    border: 1px solid rgba(255,255,255,0.15);
    display: grid;
    grid-template-columns: 55px 1fr auto;
    gap: 25px;
    align-items: center;
}

.lab-feature-number {
    font-family: "Playfair Display", serif;
    color: #39B98A;
    font-size: 20px;
}

.scripture-lab-feature span {
    display: block;
    color: #39B98A;
    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    letter-spacing: 1.7px;
    margin-bottom: 8px;
}

.scripture-lab-feature strong {
    display: block;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 30px;
}

.scripture-lab-feature p {
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    margin: 10px 0 0;
}

.scripture-lab-feature > a {
    color: #ffffff;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    white-space: nowrap;
}


/* QUESTIONS
--------------------------------------------------------- */

.bible-question-section {
    max-width: 1250px;
    margin: 0 auto;
    padding: 100px 7%;
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 40px;
    align-items: center;
}

.question-mark {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: #E8F3EF;
    color: #126B45;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Playfair Display", serif;
    font-size: 38px;
}

.bible-question-section h2 {
    font-family: "Playfair Display", serif;
    font-size: 50px;
    color: #071F5C;
    margin: 10px 0;
}

.bible-question-section p:last-child {
    max-width: 650px;
    color: #68798B;
    line-height: 1.7;
}

.button.outline {
    border: 1px solid #126B45;
    color: #126B45;
    background: transparent;
}


/* THURSDAY STUDY
--------------------------------------------------------- */

.bible-thursday-section {
    background: #F4F8F7;
    border-top: 1px solid #E1E8E5;
    border-bottom: 1px solid #E1E8E5;
    padding: 65px 7%;
    display: grid;
    grid-template-columns: 180px 1fr 350px;
    gap: 45px;
    align-items: center;
}

.thursday-label {
    color: #126B45;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 2px;
}

.thursday-main > p {
    color: #126B45;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 700;
}

.thursday-main h2 {
    color: #071F5C;
    font-family: "Playfair Display", serif;
    font-size: 58px;
    margin: 5px 0;
}

.thursday-main h2 span {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
}

.thursday-details {
    display: flex;
    gap: 13px;
    color: #7B8995;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
}

.thursday-action {
    display: flex;
    align-items: center;
    gap: 25px;
}

.thursday-action p {
    color: #68798B;
    line-height: 1.6;
    font-size: 13px;
}


/* FINAL CTA
--------------------------------------------------------- */

.bible-final-cta {
    text-align: center;
    background: #04153F;
    padding: 110px 25px;
}

.bible-final-cta .section-label {
    color: #39B98A;
}

.bible-final-cta h2 {
    font-family: "Playfair Display", serif;
    color: #ffffff;
    font-size: clamp(48px, 7vw, 82px);
    line-height: 1;
    margin: 15px 0 35px;
}


/* MOBILE
--------------------------------------------------------- */

@media (max-width: 900px) {

    .bible-study-introduction {
        grid-template-columns: 1fr;
        padding: 80px 7%;
    }

    .bible-study-intro-number {
        display: none;
    }

    .bible-study-intro-image {
        height: 400px;
    }

    .bible-approach-grid {
        grid-template-columns: 1fr;
    }

    .bible-approach-card {
        border-right: none;
        border-bottom: 1px solid #E2E9E6;
    }

    .bible-approach-card:last-child {
        border-bottom: none;
    }

    .bible-modules-header {
        display: block;
    }

    .bible-modules-header > p {
        margin-top: 20px;
    }

    .bible-scripture-lab {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .bible-question-section {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .bible-thursday-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .thursday-action {
        display: block;
    }

    .thursday-action .button {
        margin-top: 15px;
    }
}


@media (max-width: 600px) {

    .bible-study-introduction {
        padding: 65px 22px;
    }

    .bible-study-intro-content h2 {
        font-size: 42px;
    }

    .bible-study-intro-image {
        height: 330px;
    }

    .bible-how-section,
    .bible-modules-section {
        padding: 70px 22px;
    }

    .bible-modules-grid {
        grid-template-columns: 1fr;
    }

    .bible-approach-card {
        padding: 35px 28px;
    }

    .bible-scripture-lab {
        padding: 70px 22px;
    }

    .scripture-lab-feature {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .bible-question-section {
        padding: 70px 22px;
    }

    .bible-question-section h2 {
        font-size: 42px;
    }

    .bible-thursday-section {
        padding: 55px 22px;
    }

    .thursday-main h2 {
        font-size: 48px;
    }

    .bible-final-cta {
        padding: 80px 22px;
    }

}

/* =========================================================
   BIBLE STUDY MODULE DETAILS
   ========================================================= */

.module-status {
    color: #126B45;
    font-size: 9px;
    letter-spacing: 1.4px;
}

.module-number {
    font-family: "Playfair Display", serif;
    font-size: 64px;
    line-height: 1;
    color: #E2ECE8;
    margin-bottom: 15px;
}

.bible-module-card h3 {
    position: relative;
    transition: color 0.3s ease;
}

.bible-module-card:hover h3 {
    color: #126B45;
}

.bible-module-card:hover .module-number {
    color: #D5E6DF;
}

/* =========================================================
   ELIM SANCTUARY
   MODERN BIBLE STUDY EXPERIENCE
   ========================================================= */


/* ---------------------------------------------------------
   GENERAL
--------------------------------------------------------- */

.bs-modern-hero,
.bs-modern-ticker,
.bs-intro-modern,
.bs-study-journey,
.bs-statement,
.bs-experience,
.bs-question-section,
.bs-thursday,
.bs-faq,
.bs-final {
    width: 100%;
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.bs-modern-hero {
    position: relative;
    min-height: 680px;
    background: #071F5C;
    color: #ffffff;
    overflow: hidden;
}

.bs-hero-background-word {
    position: absolute;
    right: -70px;
    bottom: -80px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(180px, 30vw, 460px);
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -15px;
    color: rgba(255,255,255,0.035);
    pointer-events: none;
}

.bs-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    min-height: 680px;
    margin: 0 auto;
    padding: 45px 7% 90px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bs-hero-meta {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 18px;
    color: rgba(255,255,255,0.6);
    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
}

.bs-hero-main {
    display: grid;
    grid-template-columns: 80px minmax(0, 800px);
    gap: 35px;
    align-items: start;
}

.bs-hero-number {
    font-family: "Playfair Display", serif;
    font-size: 25px;
    color: #39B98A;
    padding-top: 13px;
}

.bs-eyebrow,
.bs-section-number {
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.bs-eyebrow {
    color: #39B98A;
    margin-bottom: 20px;
}

.bs-hero-main h1 {
    font-family: "Playfair Display", serif;
    font-size: clamp(65px, 9vw, 125px);
    font-weight: 500;
    line-height: 0.88;
    letter-spacing: -4px;
    margin: 0 0 40px;
}

.bs-hero-main h1 span {
    display: block;
    color: #39B98A;
}

.bs-hero-description {
    max-width: 560px;
    color: rgba(255,255,255,0.68);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 35px;
}

.bs-hero-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}


/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

.bs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 52px;
    padding: 0 25px;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.bs-button span {
    font-size: 17px;
    transition: transform 0.3s ease;
}

.bs-button:hover span {
    transform: translate(4px, -4px);
}

.bs-button-primary {
    background: #126B45;
    color: #ffffff;
}

.bs-button-primary:hover {
    background: #168054;
    transform: translateY(-2px);
}

.bs-button-light {
    background: #ffffff;
    color: #071F5C;
}

.bs-button-light:hover {
    transform: translateY(-2px);
}

.bs-text-link {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.bs-text-link span {
    margin-left: 10px;
    color: #39B98A;
}


/* ---------------------------------------------------------
   TICKER
--------------------------------------------------------- */

.bs-modern-ticker {
    height: 62px;
    background: #126B45;
    display: flex;
    overflow: hidden;
}

.bs-ticker-label {
    flex: 0 0 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: #04153F;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    position: relative;
    z-index: 2;
}

.bs-ticker-label span {
    width: 6px;
    height: 6px;
    background: #39B98A;
    border-radius: 50%;
    animation: bsTickerPulse 1.5s infinite;
}

@keyframes bsTickerPulse {
    50% {
        opacity: 0.3;
    }
}

.bs-ticker-window {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.bs-ticker-track {
    display: flex;
    width: max-content;
    animation: bsTickerMove 28s linear infinite;
}

.bs-ticker-set {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.bs-ticker-set strong,
.bs-ticker-set span {
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    letter-spacing: 1.7px;
}

.bs-ticker-set i {
    color: #9FE1C4;
    font-style: normal;
    margin: 0 28px;
}

@keyframes bsTickerMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* ---------------------------------------------------------
   INTRO
--------------------------------------------------------- */

.bs-intro-modern {
    max-width: 1400px;
    margin: 0 auto;
    padding: 120px 7%;
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 90px;
    align-items: center;
}

.bs-intro-image {
    position: relative;
    height: 570px;
}

.bs-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bs-image-tag {
    position: absolute;
    left: 25px;
    bottom: 25px;
    background: #071F5C;
    color: #ffffff;
    padding: 22px 25px;
    min-width: 190px;
}

.bs-image-tag span {
    display: block;
    color: #39B98A;
    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    letter-spacing: 1.5px;
    margin-bottom: 7px;
}

.bs-image-tag strong {
    font-family: "Playfair Display", serif;
    font-size: 20px;
}

.bs-section-number {
    color: #126B45;
}

.bs-intro-copy h2,
.bs-journey-header h2,
.bs-experience-heading h2,
.bs-question-content h2 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    color: #071F5C;
    font-size: clamp(45px, 6vw, 75px);
    line-height: 0.98;
    letter-spacing: -2px;
    margin: 18px 0 35px;
}

.bs-intro-copy h2 span,
.bs-journey-header h2 span,
.bs-experience-heading h2 span,
.bs-question-content h2 span {
    color: #126B45;
    display: block;
}

.bs-large-copy {
    color: #071F5C !important;
    font-size: 21px !important;
    line-height: 1.6 !important;
}

.bs-intro-copy p:not(.bs-section-number) {
    max-width: 570px;
    color: #66788A;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   STUDY JOURNEY
--------------------------------------------------------- */

.bs-study-journey {
    background: #F3F7F5;
    padding: 115px 7%;
}

.bs-journey-header {
    max-width: 1250px;
    margin: 0 auto 65px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
}

.bs-journey-header h2 {
    margin-bottom: 0;
}

.bs-journey-header > p {
    max-width: 330px;
    color: #6D7D8D;
    line-height: 1.7;
    margin: 0;
}

.bs-module-list {
    max-width: 1250px;
    margin: 0 auto;
    border-top: 1px solid #CFDCD6;
}

.bs-module {
    display: grid;
    grid-template-columns: 120px 1fr 60px;
    gap: 35px;
    align-items: center;
    padding: 40px 20px;
    border-bottom: 1px solid #CFDCD6;
    transition: 0.3s ease;
}

.bs-module:hover {
    background: #ffffff;
    padding-left: 35px;
    padding-right: 35px;
}

.bs-module-number {
    font-family: "Playfair Display", serif;
    font-size: 50px;
    color: #C8D9D2;
}

.bs-module-topline {
    display: flex;
    gap: 25px;
    margin-bottom: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #126B45;
}

.bs-module-topline span:last-child {
    color: #9AA8B4;
}

.bs-module h3 {
    font-family: "Playfair Display", serif;
    color: #071F5C;
    font-size: 38px;
    margin: 0 0 7px;
}

.bs-module p {
    color: #758594;
    margin: 0;
    line-height: 1.6;
}

.bs-module-arrow {
    width: 48px;
    height: 48px;
    border: 1px solid #C9D7D1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #126B45;
    transition: 0.3s ease;
}

.bs-module:hover .bs-module-arrow {
    background: #126B45;
    border-color: #126B45;
    color: #ffffff;
}

.bs-module-next {
    opacity: 0.65;
}


/* ---------------------------------------------------------
   STATEMENT
--------------------------------------------------------- */

.bs-statement {
    background: #071F5C;
    color: #ffffff;
    padding: 120px 7%;
    text-align: center;
}

.bs-statement-mark {
    font-family: "Playfair Display", serif;
    color: #39B98A;
    font-size: 100px;
    line-height: 0.5;
}

.bs-statement p {
    max-width: 900px;
    margin: 35px auto 25px;
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 5vw, 62px);
    line-height: 1.1;
}

.bs-statement span {
    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    color: #39B98A;
}


/* ---------------------------------------------------------
   EXPERIENCE
--------------------------------------------------------- */

.bs-experience {
    max-width: 1400px;
    margin: 0 auto;
    padding: 120px 7%;
}

.bs-experience-heading {
    max-width: 800px;
    margin-bottom: 75px;
}

.bs-experience-list {
    border-top: 1px solid #DCE5E1;
}

.bs-experience-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 30px;
    padding: 32px 0;
    border-bottom: 1px solid #DCE5E1;
}

.bs-experience-item > span {
    font-family: "Playfair Display", serif;
    font-size: 22px;
    color: #126B45;
}

.bs-experience-item h3 {
    font-family: "Playfair Display", serif;
    font-size: 29px;
    color: #071F5C;
    margin: 0 0 8px;
}

.bs-experience-item p {
    color: #71808E;
    line-height: 1.7;
    margin: 0;
}


/* ---------------------------------------------------------
   QUESTION SECTION
--------------------------------------------------------- */

.bs-question-section {
    position: relative;
    overflow: hidden;
    background: #126B45;
    padding: 110px 7%;
}

.bs-question-background {
    position: absolute;
    right: 2%;
    top: -80px;
    font-family: "Playfair Display", serif;
    font-size: 400px;
    line-height: 1;
    color: rgba(255,255,255,0.05);
}

.bs-question-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.bs-question-content .bs-section-number {
    color: #A6E2C8;
}

.bs-question-content h2 {
    color: #ffffff;
    margin-bottom: 25px;
}

.bs-question-content h2 span {
    color: #A6E2C8;
}

.bs-question-content > p {
    max-width: 650px;
    color: rgba(255,255,255,0.72);
    line-height: 1.8;
    margin-bottom: 35px;
}


/* ---------------------------------------------------------
   THURSDAY
--------------------------------------------------------- */

.bs-thursday {
    background: #F4F8F6;
    border-bottom: 1px solid #DCE5E1;
    display: grid;
    grid-template-columns: 1fr 1fr 300px;
    gap: 60px;
    align-items: center;
    padding: 80px 7%;
}

.bs-thursday-left h2 {
    font-family: "Playfair Display", serif;
    color: #071F5C;
    font-size: 65px;
    margin: 10px 0;
}

.bs-time {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.bs-time strong {
    font-family: "Montserrat", sans-serif;
    font-size: 30px;
    color: #126B45;
}

.bs-time span {
    font-size: 10px;
    letter-spacing: 2px;
    color: #758594;
}

.bs-thursday-middle > span {
    display: block;
    color: #7C8A96;
    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.bs-thursday-middle strong {
    font-family: "Playfair Display", serif;
    color: #071F5C;
    font-size: 38px;
}

.bs-thursday-middle p {
    color: #71808E;
}

.bs-thursday-right small {
    display: block;
    color: #758594;
    font-size: 10px;
    line-height: 1.6;
    margin-top: 13px;
}


/* ---------------------------------------------------------
   FAQ
--------------------------------------------------------- */

.bs-faq {
    max-width: 1100px;
    margin: 0 auto;
    padding: 120px 7%;
}

.bs-faq-heading h2 {
    font-family: "Playfair Display", serif;
    font-size: 55px;
    color: #071F5C;
    margin: 15px 0 55px;
}

.bs-faq-list {
    border-top: 1px solid #DCE5E1;
}

.bs-faq details {
    border-bottom: 1px solid #DCE5E1;
}

.bs-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #071F5C;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.bs-faq summary::-webkit-details-marker {
    display: none;
}

.bs-faq summary span {
    color: #126B45;
    font-size: 22px;
    font-weight: 400;
    transition: transform 0.3s ease;
}

.bs-faq details[open] summary span {
    transform: rotate(45deg);
}

.bs-faq details p {
    max-width: 700px;
    color: #71808E;
    line-height: 1.7;
    padding: 0 0 28px;
}


/* ---------------------------------------------------------
   FINAL
--------------------------------------------------------- */

.bs-final {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #04153F;
    color: #ffffff;
    padding: 125px 25px;
}

.bs-final-word {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "Montserrat", sans-serif;
    font-size: clamp(130px, 25vw, 380px);
    font-weight: 700;
    letter-spacing: -15px;
    color: rgba(255,255,255,0.025);
    pointer-events: none;
}

.bs-final > p {
    position: relative;
    z-index: 2;
    color: #39B98A;
    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.bs-final h2 {
    position: relative;
    z-index: 2;
    font-family: "Playfair Display", serif;
    font-size: clamp(48px, 7vw, 85px);
    line-height: 0.95;
    font-weight: 500;
    margin: 25px 0 40px;
}

.bs-final h2 span {
    color: #39B98A;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 900px) {

    .bs-hero-inner {
        min-height: 620px;
    }

    .bs-hero-main {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .bs-hero-number {
        display: none;
    }

    .bs-intro-modern {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .bs-intro-image {
        height: 430px;
    }

    .bs-journey-header {
        display: block;
    }

    .bs-journey-header > p {
        margin-top: 25px;
    }

    .bs-thursday {
        grid-template-columns: 1fr;
        gap: 35px;
    }

}


@media (max-width: 600px) {

    .bs-modern-hero {
        min-height: 620px;
    }

    .bs-hero-inner {
        min-height: 620px;
        padding: 25px 22px 65px;
    }

    .bs-hero-meta {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .bs-hero-main h1 {
        font-size: 61px;
        letter-spacing: -2px;
    }

    .bs-hero-description {
        font-size: 14px;
    }

    .bs-hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    .bs-ticker-label {
        flex-basis: 115px;
        font-size: 8px;
    }

    .bs-ticker-set i {
        margin: 0 15px;
    }

    .bs-intro-modern {
        padding: 75px 22px;
        gap: 45px;
    }

    .bs-intro-image {
        height: 360px;
    }

    .bs-intro-copy h2,
    .bs-journey-header h2,
    .bs-experience-heading h2,
    .bs-question-content h2 {
        font-size: 45px;
    }

    .bs-study-journey,
    .bs-experience,
    .bs-faq {
        padding: 75px 22px;
    }

    .bs-module {
        grid-template-columns: 55px 1fr 35px;
        gap: 15px;
        padding: 28px 5px;
    }

    .bs-module:hover {
        padding-left: 10px;
        padding-right: 10px;
    }

    .bs-module-number {
        font-size: 32px;
    }

    .bs-module h3 {
        font-size: 25px;
    }

    .bs-module-arrow {
        width: 34px;
        height: 34px;
    }

    .bs-statement {
        padding: 85px 22px;
    }

    .bs-statement p {
        font-size: 34px;
    }

    .bs-experience-item {
        grid-template-columns: 45px 1fr;
        gap: 15px;
    }

    .bs-experience-item h3 {
        font-size: 24px;
    }

    .bs-question-section {
        padding: 80px 22px;
    }

    .bs-question-background {
        font-size: 250px;
    }

    .bs-thursday {
        padding: 65px 22px;
    }

    .bs-thursday-left h2 {
        font-size: 52px;
    }

    .bs-faq-heading h2 {
        font-size: 44px;
    }

    .bs-final {
        padding: 90px 22px;
    }

}
/* =========================================
   NETWORKS DROPDOWN
========================================= */

.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}

.nav-dropdown-chevron {
    font-size: 11px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);

    width: 185px;
    padding: 0;

    background: #050505;
    border-radius: 4px;

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

    z-index: 99999;
    overflow: hidden;
}

.nav-dropdown-menu a {
    display: block;
    padding: 13px 16px;

    color: #126B45 !important;
    text-decoration: none;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    white-space: nowrap;

    text-align: center;

    border-bottom: 1px solid rgba(255, 255, 255, 0.75);

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

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

.nav-dropdown-menu a:hover {
    background: #126B45;
    color: #ffffff !important;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown:hover .nav-dropdown-chevron {
    transform: rotate(180deg);
}

/* =========================================
   MOBILE NETWORKS DROPDOWN
========================================= */

.mobile-nav-network-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: max-content;
    max-width: calc(100vw - 24px);
}

.mobile-nav-networks {
    position: relative;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.mobile-network-chevron {
    margin-left: auto;
    font-size: 13px;
    transition: transform 0.25s ease;
}

.mobile-network-links {
    width: 185px;
    margin-top: 8px;

    background: #050505;
    border-radius: 5px;
    overflow: hidden;

    opacity: 0;
    max-height: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-6px);

    transition:
        opacity 0.25s ease,
        max-height 0.3s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}

.mobile-nav-network-item.open .mobile-network-links {
    opacity: 1;
    max-height: 180px;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.mobile-network-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 13px 15px;

    color: #126B45;
    text-decoration: none;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.7px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

.mobile-network-links a:last-child {
    border-bottom: none;
}

.mobile-network-links a:active {
    background: #126B45;
    color: #ffffff;
}

.mobile-nav-network-item.open .mobile-network-chevron {
    transform: rotate(180deg);
}
/* =========================================================
   WORD SEARCH — PREMIUM INTERACTIVE DESIGN
========================================================= */

.word-search-section {
    padding: 90px 25px;
    background: #f5f7f7;
}

.word-search-card {
    width: min(1250px, 100%);
    margin: 0 auto;
    background: #ffffff;
    border-radius: 22px;
    padding: 55px;
    box-shadow: 0 20px 70px rgba(4, 21, 63, 0.10);
    border: 1px solid rgba(7, 31, 92, 0.07);
}

.word-search-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 35px;
}

.word-search-label {
    display: inline-block;
    margin-bottom: 10px;
    color: #126b45;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.word-search-instruction-container h2 {
    margin: 0 0 12px;
    color: #071f5c;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1;
}

.word-search-instruction {
    max-width: 760px;
    margin: 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   START PANEL
========================================================= */

.word-search-start-panel {
    position: relative;
    z-index: 20;
    margin-bottom: 35px;
    padding: 35px;
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            #071f5c 0%,
            #0b356e 55%,
            #126b45 100%
        );
    color: #ffffff;
    overflow: hidden;
}

.word-search-start-panel::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -120px;
    top: -160px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}

.word-search-start-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.word-search-start-number {
    display: block;
    margin-bottom: 15px;
    font-size: 12px;
    letter-spacing: 0.2em;
    opacity: 0.55;
}

.word-search-start-label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.word-search-start-content h3 {
    margin: 0 0 10px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 32px;
    font-weight: 500;
}

.word-search-start-content p {
    max-width: 680px;
    margin: 0 0 22px;
    color: rgba(255,255,255,0.82);
    font-size: 14px;
    line-height: 1.7;
}

.word-search-name-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.word-search-name-form label {
    width: 100%;
    margin-bottom: -3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.word-search-name-form input {
    width: min(360px, 100%);
    height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    outline: none;
    background: rgba(255,255,255,0.10);
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
}

.word-search-name-form input::placeholder {
    color: rgba(255,255,255,0.55);
}

.word-search-name-form input:focus {
    border-color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.14);
}

.word-search-start-button {
    height: 48px;
    padding: 0 22px;
    border: none;
    border-radius: 8px;
    background: #ffffff;
    color: #071f5c;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.25s ease;
}

.word-search-start-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}

.word-search-start-content small {
    display: block;
    margin-top: 15px;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
}


/* =========================================================
   GAME LOCK / BLUR
========================================================= */

.word-search-game-locked {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.word-search-game-locked::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    background: rgba(255,255,255,0.28);
    opacity: 1;
    transition: opacity 0.4s ease;
}

.word-search-game-locked.is-unlocked::after {
    opacity: 0;
    pointer-events: none;
}

.word-search-game-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 50px;
    align-items: start;
}

.word-search-main {
    min-width: 0;
}

.word-search-timer-box {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 18px;
}

.word-search-timer-box span {
    color: #126b45;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.word-search-timer-box strong {
    color: #071f5c;
    font-size: 30px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}


/* =========================================================
   LARGE GRID
========================================================= */

.word-search-grid {
    width: min(650px, 100%);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: repeat(14, 1fr);
    gap: 4px;
    padding: 12px;
    border-radius: 14px;
    background: #071f5c;
    box-shadow:
        0 18px 40px rgba(4,21,63,0.18);
    touch-action: none;
    user-select: none;
}

.word-search-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #ffffff;
    color: #071f5c;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(13px, 1.55vw, 21px);
    font-weight: 800;
    line-height: 1;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.word-search-cell:hover {
    background: #eaf5ef;
}

.word-search-cell.selecting {
    background: #39b98a;
    color: #ffffff;
    transform: scale(0.92);
}

.word-search-cell.found,
.word-search-cell.word-search-found {
    background: #126b45;
    color: #ffffff;
}


/* =========================================================
   WORD LIST
========================================================= */

.word-search-word-section {
    margin-top: 25px;
}

.word-search-words {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.word-search-word {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #dfe5e2;
    border-radius: 999px;
    background: #ffffff;
    color: #071f5c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    transition: 0.2s ease;
}

.word-search-word.found {
    background: #126b45;
    border-color: #126b45;
    color: #ffffff;
    text-decoration: line-through;
}


/* =========================================================
   LEADERBOARD
========================================================= */

.word-search-leaderboard {
    position: sticky;
    top: 110px;
    overflow: hidden;
    border-radius: 16px;
    background: #071f5c;
    color: #ffffff;
    box-shadow: 0 20px 45px rgba(4,21,63,0.18);
}

.leaderboard-header {
    padding: 24px 24px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.leaderboard-header > span {
    display: block;
    margin-bottom: 5px;
    color: #65d5a8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.leaderboard-header h3 {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 30px;
    font-weight: 500;
}

.leaderboard-header p {
    margin: 5px 0 0;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
}

.leaderboard-list {
    padding: 8px 0;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 35px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    padding: 8px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.leaderboard-row:last-child {
    border-bottom: none;
}

.leaderboard-rank {
    color: #65d5a8;
    font-size: 12px;
    font-weight: 800;
}

.leaderboard-player {
    min-width: 0;
}

.leaderboard-player strong {
    display: block;
    overflow: hidden;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-player span {
    color: rgba(255,255,255,0.42);
    font-size: 9px;
}

.leaderboard-time {
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.leaderboard-loading,
.leaderboard-empty {
    padding: 25px 20px;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    line-height: 1.6;
}

.leaderboard-personal-result {
    display: none;
    margin: 12px;
    padding: 14px;
    border-radius: 10px;
    background: rgba(57,185,138,0.14);
    border: 1px solid rgba(57,185,138,0.25);
    color: #ffffff;
    font-size: 11px;
    line-height: 1.6;
}

.leaderboard-personal-result.show {
    display: block;
}

.leaderboard-personal-result strong {
    color: #65d5a8;
}


/* =========================================================
   COMPLETION POPUP
========================================================= */

.word-search-completion-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    background: rgba(4,21,63,0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.3s ease;
}

.word-search-completion-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.word-search-completion-modal {
    position: relative;
    width: min(520px, 100%);
    max-height: calc(100vh - 50px);
    overflow-y: auto;
    padding: 45px;
    border-radius: 20px;
    background: #ffffff;
    color: #071f5c;
    text-align: center;
    box-shadow: 0 30px 90px rgba(0,0,0,0.3);
    transform: translateY(20px) scale(0.97);
    transition: 0.35s ease;
}

.word-search-completion-overlay.open
.word-search-completion-modal {
    transform: translateY(0) scale(1);
}

.word-search-completion-close {
    position: absolute;
    top: 15px;
    right: 17px;
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 50%;
    background: #f2f4f4;
    color: #071f5c;
    font-size: 22px;
    cursor: pointer;
}

.completion-kicker {
    color: #126b45;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.completion-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin: 20px auto;
    border-radius: 50%;
    background: #e8f6ef;
    color: #126b45;
    font-size: 30px;
    font-weight: 800;
}

.word-search-completion-modal h2 {
    margin: 0 0 8px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 42px;
    font-weight: 500;
}

.word-search-completion-modal > p {
    margin: 0 auto 25px;
    color: #667085;
    font-size: 14px;
    line-height: 1.6;
}

.completion-time {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: #f4f7f7;
}

.completion-time span {
    display: block;
    margin-bottom: 5px;
    color: #126b45;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.completion-time strong {
    color: #071f5c;
    font-size: 42px;
    font-variant-numeric: tabular-nums;
}

.completion-ranking {
    margin-bottom: 25px;
    color: #667085;
    font-size: 13px;
    line-height: 1.7;
}

.completion-ranking strong {
    color: #071f5c;
}

.word-search-completion-modal
.word-search-reset {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: #071f5c;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.25s ease;
}

.word-search-completion-modal
.word-search-reset:hover {
    background: #126b45;
    transform: translateY(-1px);
}


/* =========================================================
   COMPLETION MESSAGE
========================================================= */

.word-search-message {
    display: none;
}

.word-search-message.show {
    display: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .word-search-section {
        padding: 60px 15px;
    }

    .word-search-card {
        padding: 30px 20px;
        border-radius: 16px;
    }

    .word-search-game-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .word-search-leaderboard {
        position: static;
        order: 2;
    }

    .word-search-grid {
        width: 100%;
        gap: 3px;
        padding: 8px;
    }

    .word-search-cell {
        font-size: clamp(10px, 3.2vw, 18px);
    }

}

@media (max-width: 600px) {

    .word-search-card-top {
        margin-bottom: 25px;
    }

    .word-search-instruction-container h2 {
        font-size: 34px;
    }

    .word-search-start-panel {
        padding: 25px 20px;
    }

    .word-search-start-content h3 {
        font-size: 27px;
    }

    .word-search-name-form {
        display: block;
    }

    .word-search-name-form input,
    .word-search-start-button {
        width: 100%;
        margin-top: 10px;
    }

    .word-search-timer-box {
        justify-content: space-between;
    }

    .word-search-timer-box strong {
        font-size: 27px;
    }

    .word-search-word {
        font-size: 9px;
        padding: 0 9px;
    }

    .word-search-completion-modal {
        padding: 35px 22px;
    }

    .word-search-completion-modal h2 {
        font-size: 36px;
    }

}


/* =========================================================
   BIBLE STUDY MODULE ARCHIVE
========================================================= */

.bs-module-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.bs-module-link:focus-visible {
    outline: 3px solid rgba(57, 185, 138, 0.45);
    outline-offset: 5px;
}

.bs-module-link-label {
    display: inline-block;
    margin-top: 18px;
    color: #126b45;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.bs-module-link:hover .bs-module {
    transform: translateX(6px);
    border-color: rgba(18, 107, 69, 0.25);
    box-shadow: 0 16px 40px rgba(7, 31, 92, 0.08);
}

.bs-module {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* =========================================================
   MODULE HERO
========================================================= */

.bsm-hero {
    position: relative;
    overflow: hidden;
    background: #04153f;
    color: #ffffff;
    padding: 110px 7vw 85px;
}

.bsm-hero-word {
    position: absolute;
    right: -20px;
    top: 20px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(180px, 28vw, 440px);
    line-height: 0.8;
    color: rgba(255,255,255,0.035);
    pointer-events: none;
}

.bsm-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
}

.bsm-breadcrumb {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 70px;
    color: rgba(255,255,255,0.55);
    font-size: 15px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.bsm-breadcrumb a {
    color: #39b98a;
    text-decoration: none;
}

.bsm-eyebrow,
.bsm-section-label {
    margin: 0 0 14px;
    color: #39b98a;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
}

.bsm-hero h1 {
    max-width: 900px;
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(65px, 10vw, 145px);
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.045em;
}

.bsm-hero-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-top: 55px;
    max-width: 950px;
}

.bsm-hero-bottom p {
    max-width: 570px;
    margin: 0;
    color: rgba(255,255,255,0.68);
    font-size: 15px;
    line-height: 1.8;
}

.bsm-status {
    flex-shrink: 0;
    padding: 9px 14px;
    border: 1px solid rgba(57,185,138,0.45);
    border-radius: 999px;
    color: #39b98a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

/* =========================================================
   MODULE INTRO
========================================================= */

.bsm-intro {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 80px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 105px 7vw;
}

.bsm-intro-label {
    color: #126b45;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
}

.bsm-intro-content {
    max-width: 720px;
}

.bsm-intro-content h2,
.bsm-recordings h2,
.bsm-access h2,
.bsm-thursday h2,
.bsm-footer-cta h2 {
    margin: 0 0 22px;
    color: #102c52;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.035em;
}

.bsm-intro-content h2 span,
.bsm-recordings h2 span,
.bsm-access h2 span,
.bsm-footer-cta h2 span {
    color: #126b45;
}

.bsm-intro-content p {
    max-width: 650px;
    margin: 0;
    color: #687681;
    font-size: 16px;
    line-height: 1.9;
}

/* =========================================================
   RECORDINGS
========================================================= */

.bsm-recordings {
    background: #f4f8f6;
    padding: 100px 7vw 110px;
}

.bsm-recordings-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    max-width: 1180px;
    margin: 0 auto 45px;
}

.bsm-recordings-header > p {
    max-width: 360px;
    margin: 0 0 8px;
    color: #687681;
    font-size: 13px;
    line-height: 1.7;
}

.bsm-recording-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}

.bsm-recording-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dce8e2;
    box-shadow: 0 15px 45px rgba(7,31,92,0.055);
}

.bsm-recording-visual {
    position: relative;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center, rgba(57,185,138,0.14), transparent 40%),
        linear-gradient(135deg, #071f5c, #04153f);
}

.bsm-lock {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    backdrop-filter: blur(8px);
}

.bsm-lock span {
    font-size: 28px;
    transform: rotate(180deg);
}

.bsm-recording-overlay {
    position: absolute;
    left: 20px;
    top: 20px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.18);
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.bsm-recording-info {
    padding: 28px;
}

.bsm-recording-meta {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
    color: #126b45;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.bsm-recording-info h3 {
    margin: 0 0 10px;
    color: #102c52;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 30px;
    font-weight: 500;
}

.bsm-recording-info p {
    min-height: 45px;
    margin: 0 0 25px;
    color: #687681;
    font-size: 15px;
    line-height: 1.7;
}

.bsm-request-button,
.bsm-submit-button {
    border: 0;
    background: transparent;
    color: #126b45;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
}

.bsm-request-button span,
.bsm-submit-button span {
    margin-left: 7px;
    transition: transform 0.2s ease;
}

.bsm-request-button:hover span,
.bsm-submit-button:hover span {
    display: inline-block;
    transform: translate(3px, -3px);
}

/* =========================================================
   ACCESS FORM
========================================================= */

.bsm-access {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 60px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 110px 7vw;
}

.bsm-access-number {
    color: #dce8e2;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 72px;
    line-height: 1;
}

.bsm-access-content {
    max-width: 820px;
}

.bsm-access-content > p:not(.bsm-section-label) {
    max-width: 620px;
    margin: 0 0 35px;
    color: #687681;
    font-size: 14px;
    line-height: 1.8;
}

.bsm-access-form {
    display: grid;
    gap: 18px;
}

.bsm-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.bsm-access-form label {
    display: grid;
    gap: 8px;
}

.bsm-access-form label > span {
    color: #102c52;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.bsm-access-form em {
    color: #89939a;
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.bsm-access-form input,
.bsm-access-form select,
.bsm-access-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d8e3de;
    border-radius: 0;
    background: #ffffff;
    color: #102c52;
    padding: 14px 15px;
    font: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bsm-access-form textarea {
    resize: vertical;
    min-height: 110px;
}

.bsm-access-form input:focus,
.bsm-access-form select:focus,
.bsm-access-form textarea:focus {
    border-color: #126b45;
    box-shadow: 0 0 0 3px rgba(18,107,69,0.08);
}

.bsm-submit-button {
    width: fit-content;
    padding: 15px 22px;
    background: #126b45;
    color: #ffffff;
    transition: background 0.2s ease, transform 0.2s ease;
}

.bsm-submit-button:hover {
    background: #0b5033;
    transform: translateY(-2px);
}

/* =========================================================
   FOOTER CTA
========================================================= */

.bsm-footer-cta {
    position: relative;
    overflow: hidden;
    padding: 110px 7vw;
    text-align: center;
    background: #f4f8f6;
}

.bsm-footer-cta > p {
    margin: 0 0 20px;
    color: #126b45;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.2px;
}

.bsm-footer-cta h2 {
    max-width: 800px;
    margin: 0 auto 35px;
}

.bsm-back-link {
    color: #126b45;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-transform: uppercase;
}

.bsm-back-link:hover {
    text-decoration: underline;
}

/* =========================================================
   MODULE MOBILE
========================================================= */

@media (max-width: 850px) {
    .bsm-hero {
        padding: 80px 22px 65px;
    }

    .bsm-breadcrumb {
        margin-bottom: 50px;
        font-size: 9px;
    }

    .bsm-hero h1 {
        font-size: clamp(58px, 17vw, 95px);
    }

    .bsm-hero-bottom {
        display: block;
        margin-top: 35px;
    }

    .bsm-hero-bottom p {
        font-size: 13px;
    }

    .bsm-status {
        display: inline-block;
        margin-top: 22px;
    }

    .bsm-intro,
    .bsm-access {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 75px 22px;
    }

    .bsm-intro-content h2,
    .bsm-recordings h2,
    .bsm-access h2,
    .bsm-footer-cta h2 {
        font-size: 46px;
    }

    .bsm-recordings {
        padding: 75px 22px;
    }

    .bsm-recordings-header {
        display: block;
        margin-bottom: 35px;
    }

    .bsm-recordings-header > p {
        margin-top: 15px;
    }

    .bsm-recording-list {
        grid-template-columns: 1fr;
    }

    .bsm-recording-visual {
        min-height: 210px;
    }

    .bsm-form-row {
        grid-template-columns: 1fr;
    }


    .bsm-footer-cta {
        padding: 80px 22px;
    }
}


/* =========================================================
   RECORDING PRIVACY NOTICE
========================================================= */

.bsm-privacy-notice {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 7vw 105px;
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 32px;
    align-items: start;
}

.bsm-privacy-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf5f1;
    border: 1px solid #d6e8df;
    font-size: 22px;
}

.bsm-privacy-content {
    max-width: 820px;
    padding: 30px 34px;
    border: 1px solid #dce8e3;
    border-radius: 20px;
    background: #f8fbfa;
}

.bsm-privacy-content h2 {
    margin: 0 0 20px;
    color: #102c52;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.bsm-privacy-content h2 span {
    color: #126b45;
}

.bsm-privacy-content p:not(.bsm-section-label) {
    max-width: 720px;
    margin: 0 0 14px;
    color: #687681;
    font-size: 15px;
    line-height: 1.85;
}

.bsm-privacy-content .bsm-privacy-emphasis {
    margin-top: 22px;
    padding: 17px 19px;
    border-left: 3px solid #126b45;
    background: #ffffff;
    color: #40515b;
}

.bsm-privacy-content .bsm-privacy-emphasis strong {
    color: #102c52;
}

/* Slightly tighter recording cards when there are many lessons */
.bsm-recording-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.bsm-recording-card {
    min-width: 0;
}

@media (max-width: 800px) {
    .bsm-recording-list {
        grid-template-columns: 1fr;
    }

    .bsm-privacy-notice {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-bottom: 75px;
    }

    .bsm-privacy-content {
        padding: 25px 22px;
        border-radius: 16px;
    }
}

@media (max-width: 500px) {
    .bsm-privacy-notice {
        padding-left: 22px;
        padding-right: 22px;
    }

    .bsm-privacy-content h2 {
        font-size: 38px;
    }
}


/* =========================================================
   CLEAN LESSON ARCHIVE NOTE
========================================================= */

.bsm-archive-note {
    max-width: 410px;
    padding: 18px 20px;
    border-left: 2px solid #126b45;
    background: rgba(255,255,255,0.72);
}

.bsm-archive-note p {
    margin: 0 0 10px;
    color: #687681;
    font-size: 12px;
    line-height: 1.7;
}

.bsm-privacy-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #126b45;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    cursor: pointer;
}

.bsm-privacy-link span {
    transition: transform .2s ease;
}

.bsm-privacy-link:hover span {
    transform: translate(2px, -2px);
}

/* =========================================================
   PRIVACY POPUP
========================================================= */

.bsm-privacy-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}

.bsm-privacy-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.bsm-privacy-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 21, 63, .55);
    backdrop-filter: blur(8px);
}

.bsm-privacy-popup {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    box-sizing: border-box;
    padding: 42px 42px 38px;
    background: #ffffff;
    border: 1px solid #dce8e2;
    box-shadow: 0 30px 80px rgba(4,21,63,.25);
    transform: translateY(14px) scale(.98);
    transition: transform .28s cubic-bezier(.22,1,.36,1);
}

.bsm-privacy-modal.open .bsm-privacy-popup {
    transform: translateY(0) scale(1);
}

.bsm-privacy-popup .bsm-section-label {
    margin-bottom: 12px;
}

.bsm-privacy-popup h2 {
    margin: 0 45px 22px 0;
    color: #102c52;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(38px, 5vw, 58px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.035em;
}

.bsm-privacy-popup h2 span {
    color: #126b45;
}

.bsm-privacy-popup > p:not(.bsm-section-label) {
    margin: 0 0 16px;
    color: #687681;
    font-size: 14px;
    line-height: 1.8;
}

.bsm-privacy-request-note {
    display: grid;
    gap: 5px;
    margin-top: 24px;
    padding: 17px 18px;
    background: #f4f8f6;
    border-left: 2px solid #126b45;
    color: #687681;
    font-size: 13px;
    line-height: 1.65;
}

.bsm-privacy-request-note strong {
    color: #102c52;
}

.bsm-privacy-continue {
    margin-top: 25px;
    padding: 13px 17px;
    border: 0;
    background: #126b45;
    color: #ffffff;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.bsm-privacy-continue:hover {
    background: #0b5033;
    transform: translateY(-1px);
}

.bsm-privacy-close {
    position: absolute;
    top: 15px;
    right: 17px;
    width: 36px;
    height: 36px;
    border: 1px solid #dce8e2;
    border-radius: 50%;
    background: #ffffff;
    color: #102c52;
    font-size: 25px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.bsm-privacy-close:hover {
    background: #126b45;
    color: #ffffff;
}

body.bsm-modal-open {
    overflow: hidden;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {
    .bsm-recordings-header {
        display: block;
    }

    .bsm-archive-note {
        max-width: none;
        margin-top: 24px;
        padding: 16px 17px;
    }

    .bsm-privacy-popup {
        padding: 35px 24px 28px;
    }

    .bsm-privacy-popup h2 {
        font-size: 42px;
    }
}

@media (max-width: 420px) {
    .bsm-privacy-modal {
        padding: 14px;
    }

    .bsm-privacy-popup {
        padding: 32px 20px 24px;
    }

    .bsm-privacy-popup h2 {
        font-size: 36px;
    }
}

/* =========================================================
   WORD SEARCH — LEADERBOARD ALWAYS VISIBLE
   The puzzle can remain locked, but the leaderboard must
   stay visible above the lock/blur layer.
========================================================= */

.word-search-game-locked .word-search-leaderboard {
    position: relative !important;
    z-index: 20 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Keep the leaderboard visible on mobile too */
@media (max-width: 900px) {
    .word-search-game-locked .word-search-leaderboard {
        position: relative !important;
        z-index: 20 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* =========================================================
   CUSTOM 404 ERROR PAGE
========================================================= */

.error-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 25px;
    background:
        radial-gradient(circle at top right, rgba(18, 107, 69, 0.10), transparent 35%),
        #f8faf9;
    text-align: center;
}

.error-page-content {
    width: 100%;
    max-width: 700px;
}

.error-number {
    display: block;
    margin-bottom: 10px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(90px, 16vw, 170px);
    font-weight: 600;
    line-height: 0.9;
    color: #071f5c;
    letter-spacing: -6px;
}

.error-page h1 {
    margin: 25px 0 15px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 500;
    color: #071f5c;
}

.error-page p {
    max-width: 560px;
    margin: 0 auto;
    color: #52616b;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;
}

.error-page-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 35px;
    flex-wrap: wrap;
}

.error-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 25px;
    border-radius: 999px;
    text-decoration: none;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.25s ease;
}

.error-button.primary {
    background: #071f5c;
    color: #ffffff;
}

.error-button.primary:hover {
    background: #126b45;
    transform: translateY(-2px);
}

.error-button.secondary {
    background: #ffffff;
    color: #126b45;
    border: 1px solid rgba(18, 107, 69, 0.25);
}

.error-button.secondary:hover {
    background: #126b45;
    color: #ffffff;
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .error-page {
        min-height: 65vh;
        padding: 80px 20px;
    }

    .error-number {
        font-size: 110px;
        letter-spacing: -4px;
    }

    .error-page h1 {
        font-size: 34px;
    }

    .error-page p {
        font-size: 14px;
        line-height: 1.7;
    }

    .error-page-actions {
        flex-direction: column;
        width: 100%;
    }

    .error-button {
        width: 100%;
        max-width: 280px;
    }
}

/* =========================================================
   ELIM SANCTUARY — FINAL VISUAL POLISH
   Safe overrides only: preserves existing functionality,
   class names, layouts, responsive behavior and interactions.
========================================================= */

html {
    scroll-padding-top: 90px;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Cinematic homepage hero */
.hero-video {
    filter: brightness(0.76) contrast(1.10) saturate(0.92);
}

.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(4, 21, 63, 0.78) 0%,
            rgba(7, 31, 92, 0.50) 48%,
            rgba(7, 31, 92, 0.24) 100%
        ),
        radial-gradient(
            circle at center,
            rgba(255,255,255,0.02) 0%,
            rgba(4,21,63,0.30) 100%
        );
}

.hero-content h1 {
    text-shadow: 0 8px 28px rgba(0,0,0,0.22);
}

.hero-verse {
    text-shadow: 0 4px 18px rgba(0,0,0,0.20);
}

/* Cleaner interaction states */
a,
button,
.button,
.feature-card,
.next-event-link,
.nav-register {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #126B45;
    outline-offset: 3px;
}

/* Homepage feature cards */
.features {
    position: relative;
}

.feature-card {
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(7,31,92,0.045);
}

.feature-card:hover {
    box-shadow: 0 18px 42px rgba(7,31,92,0.10);
}

/* Buttons */
.button,
.nav-register,
.error-button,
.next-event-link {
    will-change: transform;
}

.button.primary,
.nav-register {
    box-shadow: 0 8px 20px rgba(8,127,101,0.14);
}

.button.primary:hover,
.nav-register:hover {
    transform: translateY(-2px);
}

/* Form fields */
input,
textarea,
select {
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(18,107,69,0.55) !important;
    box-shadow: 0 0 0 4px rgba(18,107,69,0.08);
}

/* Event ticker: keep the movement crisp and contained */
.event-news-ticker {
    height: 36px;
}

.event-news-track {
    min-width: max-content;
    will-change: transform;
}

/* Mobile floating navigation */
@media (max-width: 850px) {
    .mobile-floating-nav {
        top: 105px !important;
        right: 12px !important;
    }

    .mobile-nav-oval {
        border-radius: 999px !important;
        box-shadow: 0 10px 30px rgba(4,21,63,0.18) !important;
    }

    .mobile-floating-nav.open .mobile-nav-oval:nth-child(1) { transition-delay: .03s; }
    .mobile-floating-nav.open .mobile-nav-oval:nth-child(2) { transition-delay: .08s; }
    .mobile-floating-nav.open .mobile-nav-oval:nth-child(3) { transition-delay: .13s; }
    .mobile-floating-nav.open .mobile-nav-oval:nth-child(4) { transition-delay: .18s; }
    .mobile-floating-nav.open .mobile-nav-oval:nth-child(5) { transition-delay: .23s; }
    .mobile-floating-nav.open .mobile-nav-oval:nth-child(6) { transition-delay: .28s; }
    .mobile-floating-nav.open .mobile-nav-oval:nth-child(7) { transition-delay: .33s; }
}

/* Inner-page cards and sections */
.bible-detail-card,
.registration-next-card,
.contact-form-container,
.word-search-card,
.bsm-recording-card {
    border-radius: 16px;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   WORD SEARCH DISCOVERY — HOMEPAGE
========================================================= */

.word-search-discovery {
    padding: 90px 25px;
    background: #071f5c;
    color: #ffffff;
    overflow: hidden;
}

.word-search-discovery-inner {
    width: min(1100px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 70px;
    align-items: center;
}

.word-search-discovery-copy .section-label {
    color: #65d5a8;
}

.word-search-discovery-copy h2 {
    margin: 0 0 20px;
    color: #ffffff;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 500;
    line-height: 1.02;
}

.word-search-discovery-copy h2 span {
    color: #65d5a8;
}

.word-search-discovery-copy > p:not(.section-label):not(.word-search-discovery-note) {
    max-width: 680px;
    margin: 0;
    color: rgba(255,255,255,0.72);
    font-size: 16px;
    line-height: 1.8;
}

.word-search-discovery-details {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 25px 0 30px;
}

.word-search-discovery-details span {
    color: rgba(255,255,255,0.55);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.word-search-discovery-button {
    background: #ffffff;
    color: #071f5c;
}

.word-search-discovery-button:hover {
    background: #65d5a8;
    color: #071f5c;
}

.word-search-discovery-note {
    margin: 18px 0 0;
    color: rgba(255,255,255,0.48);
    font-size: 12px;
    line-height: 1.6;
}

.word-search-discovery-visual {
    display: flex;
    justify-content: center;
}

.word-search-discovery-circle {
    width: 230px;
    height: 230px;
    border: 1px solid rgba(101,213,168,0.45);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 18px rgba(101,213,168,0.04), 0 0 0 38px rgba(101,213,168,0.025);
}

.word-search-discovery-circle span,
.word-search-discovery-circle small {
    color: #65d5a8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
}

.word-search-discovery-circle strong {
    margin: 3px 0;
    color: #ffffff;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 78px;
    font-weight: 500;
    line-height: 0.9;
}

/* =========================================================
   WORD SEARCH PAGE INTRO / POST-GAME CTA
========================================================= */

.word-search-page-intro {
    padding: 95px 25px 65px;
    background: #f5f7f7;
    text-align: center;
}

.word-search-page-intro-inner {
    width: min(850px, 100%);
    margin: 0 auto;
}

.word-search-page-intro .section-label {
    color: #126b45;
}

.word-search-page-intro h1 {
    margin: 0 0 20px;
    color: #071f5c;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(48px, 7vw, 82px);
    font-weight: 500;
    line-height: 0.98;
}

.word-search-page-intro h1 span {
    color: #126b45;
}

.word-search-page-intro p:not(.section-label) {
    max-width: 720px;
    margin: 0 auto;
    color: #667085;
    font-size: 16px;
    line-height: 1.8;
}

.word-search-page-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 25px;
}

.word-search-page-meta span {
    color: #126b45;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.word-search-page-section {
    padding-top: 35px;
}

.word-search-start-welcome {
    margin: 13px 0 0 !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 12px !important;
}

.word-search-after-game {
    margin-top: 55px;
    padding: 45px;
    border-radius: 16px;
    background: #f4f8f6;
    text-align: center;
}

.word-search-after-game .section-label {
    margin-bottom: 12px;
}

.word-search-after-game h2 {
    margin: 0 0 12px;
    color: #071f5c;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 500;
}

.word-search-after-game > p:not(.section-label) {
    max-width: 680px;
    margin: 0 auto 25px;
    color: #667085;
    font-size: 14px;
    line-height: 1.8;
}

.completion-bible-study-copy {
    margin: 0 auto 20px !important;
    color: #667085;
    font-size: 13px;
    line-height: 1.7;
}

.completion-registration-button {
    display: inline-flex;
    width: 100%;
    margin-bottom: 10px;
    justify-content: center;
    text-decoration: none;
}

/* =========================================================
   MOBILE WORD SEARCH FIX
   Keep the complete Top 5 visible below the puzzle.
========================================================= */

@media (max-width: 900px) {
    .word-search-game-layout {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .word-search-game-locked,
    .word-search-main,
    .word-search-card,
    .word-search-section {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }


    .word-search-leaderboard {
        position: relative !important;
        top: auto !important;
        order: 2 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        margin-top: 5px !important;
    }

    .leaderboard-list {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .leaderboard-row {
        min-height: 58px !important;
    }

    .word-search-after-game {
        padding: 32px 22px;
    }

    .word-search-discovery-inner {
        grid-template-columns: 1fr;
        gap: 45px;
        text-align: center;
    }

    .word-search-discovery-copy > p:not(.section-label):not(.word-search-discovery-note) {
        margin-left: auto;
        margin-right: auto;
    }

    .word-search-discovery-details {
        justify-content: center;
    }

    .word-search-discovery-button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .word-search-page-intro {
        padding: 70px 20px 45px;
    }

    .word-search-page-intro h1 {
        font-size: 45px;
    }

    .word-search-discovery {
        padding: 70px 20px;
    }

    .word-search-discovery-copy h2 {
        font-size: 43px;
    }

    .word-search-discovery-circle {
        width: 190px;
        height: 190px;
    }

    .word-search-discovery-circle strong {
        font-size: 65px;
    }

    .word-search-after-game {
        padding: 28px 18px;
    }
}

/* =========================================================
   WORD SEARCH DISCOVERY — HOMEPAGE
========================================================= */

.word-search-discovery {
    padding: 90px 25px;
    background: #071f5c;
    color: #ffffff;
    overflow: hidden;
}

.word-search-discovery-inner {
    width: min(1100px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 70px;
    align-items: center;
}

.word-search-discovery-copy .section-label {
    color: #65d5a8;
}

.word-search-discovery-copy h2 {
    margin: 0 0 20px;
    color: #ffffff;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 500;
    line-height: 1.02;
}

.word-search-discovery-copy h2 span {
    color: #65d5a8;
}

.word-search-discovery-copy > p:not(.section-label):not(.word-search-discovery-note) {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    line-height: 1.8;
}

.word-search-discovery-details {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 25px 0 30px;
}

.word-search-discovery-details span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.word-search-discovery-button {
    background: #ffffff;
    color: #071f5c;
}

.word-search-discovery-button:hover {
    background: #65d5a8;
    color: #071f5c;
}

.word-search-discovery-note {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
    line-height: 1.6;
}

.word-search-discovery-visual {
    display: flex;
    justify-content: center;
}

.word-search-discovery-circle {
    width: 230px;
    height: 230px;
    border: 1px solid rgba(101, 213, 168, 0.45);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 18px rgba(101, 213, 168, 0.04),
        0 0 0 38px rgba(101, 213, 168, 0.025);
}

.word-search-discovery-circle span,
.word-search-discovery-circle small {
    color: #65d5a8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
}

.word-search-discovery-circle strong {
    margin: 3px 0;
    color: #ffffff;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 78px;
    font-weight: 500;
    line-height: 0.9;
}


/* =========================================================
   WORD SEARCH DISCOVERY — TABLET / MOBILE
========================================================= */

@media (max-width: 900px) {

    .word-search-discovery {
        padding: 70px 22px;
    }

    .word-search-discovery-inner {
        grid-template-columns: 1fr;
        gap: 45px;
        text-align: center;
    }

    .word-search-discovery-copy > p:not(.section-label):not(.word-search-discovery-note) {
        margin-left: auto;
        margin-right: auto;
    }

    .word-search-discovery-details {
        justify-content: center;
    }

    .word-search-discovery-button {
        width: 100%;
        justify-content: center;
    }

    .word-search-discovery-visual {
        order: 2;
    }

    .word-search-discovery-circle {
        width: 200px;
        height: 200px;
    }

    .word-search-discovery-circle strong {
        font-size: 68px;
    }
}


/* =========================================================
   WORD SEARCH DISCOVERY — SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

    .word-search-discovery {
        padding: 65px 20px;
    }

    .word-search-discovery-copy h2 {
        font-size: 42px;
    }

    .word-search-discovery-copy > p:not(.section-label):not(.word-search-discovery-note) {
        font-size: 15px;
        line-height: 1.75;
    }

    .word-search-discovery-details {
        flex-direction: column;
        align-items: center;
        gap: 9px;
        margin: 24px 0 28px;
    }

    .word-search-discovery-details span {
        font-size: 9px;
    }

    .word-search-discovery-circle {
        width: 180px;
        height: 180px;
    }

    .word-search-discovery-circle strong {
        font-size: 62px;
    }

    .word-search-discovery-note {
        font-size: 11px;
    }
}

/* =========================================================
   BIBLE STUDY — WORD SEARCH CHALLENGE
========================================================= */

.bs-word-search {
    position: relative;
    overflow: hidden;
    background: #071f5c;
    color: #ffffff;
    padding: 100px 7%;
}

.bs-word-search-inner {
    width: min(1250px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;

    gap: 90px;
    align-items: center;
}


/* =========================================================
   WORD SEARCH COPY
========================================================= */

.bs-word-search-copy {
    max-width: 720px;
}

.bs-word-search-copy .bs-section-number {
    color: #65d5a8;
    margin-bottom: 22px;
}

.bs-word-search-copy h2 {
    margin: 0 0 25px;

    color: #ffffff;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(45px, 5vw, 70px);
    font-weight: 500;

    line-height: 1.02;
}

.bs-word-search-copy h2 span {
    color: #65d5a8;
}

.bs-word-search-intro {
    max-width: 650px;

    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   CHALLENGE DETAILS
========================================================= */

.bs-word-search-details {
    display: flex;
    flex-wrap: wrap;

    gap: 40px;

    margin: 35px 0;
}

.bs-word-search-details div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bs-word-search-details strong {
    color: #ffffff;

    font-size: 18px;
    font-weight: 600;

    letter-spacing: 0.02em;
}

.bs-word-search-details span {
    color: rgba(255, 255, 255, 0.48);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.18em;
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.bs-word-search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 50px;

    padding: 0 24px;

    background: #ffffff;
    color: #071f5c;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.04em;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.bs-word-search-button span {
    font-size: 15px;
}

.bs-word-search-button:hover {
    background: #65d5a8;
    color: #071f5c;

    transform: translateY(-2px);
}


/* =========================================================
   NOTE
========================================================= */

.bs-word-search-note {
    max-width: 560px;

    margin: 20px 0 0;

    color: rgba(255, 255, 255, 0.45);

    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   TOP 5 VISUAL
========================================================= */

.bs-word-search-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bs-word-search-circle {
    position: relative;

    width: 270px;
    height: 270px;

    border: 1px solid rgba(101, 213, 168, 0.55);

    border-radius: 50%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    box-shadow:
        0 0 0 18px rgba(101, 213, 168, 0.035),
        0 0 0 38px rgba(101, 213, 168, 0.02);
}

.bs-word-search-circle::before {
    content: "";

    position: absolute;

    width: 205px;
    height: 205px;

    border: 1px solid rgba(101, 213, 168, 0.15);

    border-radius: 50%;
}

.bs-word-search-circle span {
    position: relative;
    z-index: 1;

    color: #65d5a8;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.22em;
}

.bs-word-search-circle strong {
    position: relative;
    z-index: 1;

    margin: 10px 0;

    color: #ffffff;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 58px;
    font-weight: 500;

    line-height: 0.82;
}

.bs-word-search-circle small {
    position: relative;
    z-index: 1;

    color: rgba(255, 255, 255, 0.48);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.15em;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .bs-word-search {
        padding: 80px 25px;
    }

    .bs-word-search-inner {
        grid-template-columns: 1fr;

        gap: 60px;

        text-align: center;
    }

    .bs-word-search-copy {
        max-width: 720px;
        margin: 0 auto;
    }

    .bs-word-search-intro {
        margin-left: auto;
        margin-right: auto;
    }

    .bs-word-search-details {
        justify-content: center;
    }

    .bs-word-search-note {
        margin-left: auto;
        margin-right: auto;
    }

    .bs-word-search-button {
        margin-left: auto;
        margin-right: auto;
    }

    .bs-word-search-visual {
        order: 2;
    }

    .bs-word-search-circle {
        width: 230px;
        height: 230px;
    }

    .bs-word-search-circle::before {
        width: 175px;
        height: 175px;
    }

    .bs-word-search-circle strong {
        font-size: 52px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .bs-word-search {
        padding: 70px 20px;
    }

    .bs-word-search-inner {
        gap: 50px;
    }

    .bs-word-search-copy h2 {
        font-size: 43px;
    }

    .bs-word-search-intro {
        font-size: 14px;
        line-height: 1.75;
    }

    .bs-word-search-details {
        gap: 25px;

        justify-content: center;

        margin: 30px 0;
    }

    .bs-word-search-details strong {
        font-size: 16px;
    }

    .bs-word-search-button {
        width: 100%;
        box-sizing: border-box;
    }

    .bs-word-search-circle {
        width: 200px;
        height: 200px;
    }

    .bs-word-search-circle::before {
        width: 150px;
        height: 150px;
    }

    .bs-word-search-circle strong {
        font-size: 46px;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .bs-word-search-copy h2 {
        font-size: 38px;
    }

    .bs-word-search-details {
        flex-direction: column;
        gap: 15px;
    }

    .bs-word-search-details div {
        align-items: center;
    }

    .bs-word-search-circle {
        width: 180px;
        height: 180px;
    }

    .bs-word-search-circle::before {
        width: 135px;
        height: 135px;
    }

    .bs-word-search-circle strong {
        font-size: 42px;
    }
}


/* =========================================================
   WHAT TO EXPECT — HEADING
========================================================= */

.bs-experience-heading h2 {
    margin: 18px 0 45px;

    color: #071f5c;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(42px, 5vw, 68px);

    font-weight: 500;

    line-height: 1.05;
}

.bs-experience-heading h2 span {
    color: #126b45;
}


/* Mobile heading */

@media (max-width: 600px) {

    .bs-experience-heading h2 {
        font-size: 42px;
        line-height: 1.08;
        margin-bottom: 35px;
    }
}

/* =========================================================
   BIBLE STUDY — WORD SEARCH SCROLL POPUP
========================================================= */

.bs-word-search-popup {
    position: fixed;
    right: 28px;
    bottom: 28px;

    width: min(620px, calc(100vw - 40px));

    z-index: 9990;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(35px) scale(.96);

    transition:
        opacity .45s ease,
        transform .55s cubic-bezier(.22, 1, .36, 1),
        visibility .45s ease;
}


/* ---------------------------------------------------------
   OPEN STATE
--------------------------------------------------------- */

.bs-word-search-popup.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0) scale(1);
}


/* ---------------------------------------------------------
   POPUP CARD
--------------------------------------------------------- */

.bs-word-search-popup-card {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 180px;

    gap: 25px;

    padding: 30px;

    background: rgba(255, 255, 255, .97);

    border: 1px solid rgba(7, 31, 92, .08);

    box-shadow:
        0 25px 70px rgba(4, 21, 63, .20),
        0 8px 25px rgba(4, 21, 63, .08);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


/* ---------------------------------------------------------
   CLOSE BUTTON
--------------------------------------------------------- */

.bs-word-search-popup-close {
    position: absolute;

    top: 12px;
    right: 14px;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    background: transparent;

    color: #071f5c;

    font-size: 25px;
    font-weight: 300;

    cursor: pointer;

    opacity: .55;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.bs-word-search-popup-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.bs-word-search-popup-content {
    padding-right: 10px;
}


.bs-word-search-popup-label {
    margin-bottom: 12px;

    color: #126b45;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .20em;
}


.bs-word-search-popup-content h3 {
    margin: 0 0 12px;

    color: #071f5c;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 32px;
    font-weight: 500;

    line-height: 1.05;
}


.bs-word-search-popup-content h3 span {
    color: #126b45;
}


.bs-word-search-popup-content p {
    margin: 0;

    max-width: 390px;

    color: #5d6878;

    font-size: 13px;
    line-height: 1.65;
}


/* ---------------------------------------------------------
   META
--------------------------------------------------------- */

.bs-word-search-popup-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 15px;

    margin: 18px 0;
}


.bs-word-search-popup-meta span {
    color: #071f5c;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .12em;
}


/* ---------------------------------------------------------
   BUTTON
--------------------------------------------------------- */

.bs-word-search-popup-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 42px;

    padding: 0 18px;

    background: #071f5c;

    color: #ffffff;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .03em;

    transition:
        background .25s ease,
        transform .25s ease;
}


.bs-word-search-popup-button span {
    font-size: 15px;
}


.bs-word-search-popup-button:hover {
    background: #126b45;

    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   VISUAL
--------------------------------------------------------- */

.bs-word-search-popup-visual {
    display: flex;

    align-items: center;
    justify-content: center;
}


.bs-word-search-popup-circle {
    width: 145px;
    height: 145px;

    border: 1px solid rgba(18, 107, 69, .35);

    border-radius: 50%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    position: relative;
}


.bs-word-search-popup-circle::before {
    content: "";

    position: absolute;

    width: 118px;
    height: 118px;

    border: 1px solid rgba(18, 107, 69, .12);

    border-radius: 50%;
}


.bs-word-search-popup-circle span,
.bs-word-search-popup-circle strong,
.bs-word-search-popup-circle small {
    position: relative;
    z-index: 1;
}


.bs-word-search-popup-circle span {
    color: #126b45;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .13em;
}


.bs-word-search-popup-circle strong {
    margin: 7px 0;

    color: #071f5c;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 25px;
    font-weight: 500;
}


.bs-word-search-popup-circle small {
    color: #7b8491;

    font-size: 6px;
    font-weight: 800;

    letter-spacing: .10em;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .bs-word-search-popup {
        right: 15px;
        bottom: 15px;

        width: calc(100vw - 30px);
    }


    .bs-word-search-popup-card {
        grid-template-columns: 1fr;

        gap: 20px;

        padding: 25px 22px 22px;
    }


    .bs-word-search-popup-content {
        padding-right: 18px;
    }


    .bs-word-search-popup-content h3 {
        font-size: 28px;
    }


    .bs-word-search-popup-content p {
        font-size: 12px;
    }


    .bs-word-search-popup-visual {
        display: none;
    }


    .bs-word-search-popup-meta {
        gap: 12px;

        margin: 15px 0;
    }


    .bs-word-search-popup-button {
        width: 100%;
        box-sizing: border-box;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .bs-word-search-popup {
        right: 10px;
        bottom: 10px;

        width: calc(100vw - 20px);
    }


    .bs-word-search-popup-card {
        padding: 22px 18px 18px;
    }


    .bs-word-search-popup-content h3 {
        font-size: 25px;
    }


    .bs-word-search-popup-content p {
        font-size: 11px;
    }

}

/* ---------------------------------------------------------
   NETWORKS DROPDOWN
   Give the mouse a safe path from Networks to the menu
--------------------------------------------------------- */

.nav-dropdown {
    position: relative;
}


/*
   Invisible hover bridge.

   This fills the small gap between the Networks button
   and the dropdown so the menu does NOT disappear while
   the mouse is travelling down to Justin Naidoo.
*/

.nav-dropdown::after {
    content: "";
    position: absolute;

    left: -15px;
    right: -15px;

    top: 100%;
    height: 16px;

    background: transparent;

    z-index: 99998;
}


/* Move the dropdown slightly closer to Networks */

.nav-dropdown-menu {
    top: calc(100% + 4px) !important;
}


/*
   Keep the dropdown visible and clickable
   while the mouse is over it.
*/

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}


/* Slightly larger dropdown text */

.nav-dropdown-menu a {
    font-size: 13px !important;
    padding: 14px 16px !important;
}


/* Make the dropdown easier to click */

.nav-dropdown-menu {
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease !important;
}

/* =========================================================
   FLOATING BACK BUTTON
========================================================= */

.floating-back-button {
    position: fixed;
    left: 24px;
    bottom: 24px;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 11px 17px;

    border: 1px solid rgba(18, 107, 69, 0.15);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.96);
    color: #102c52;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    box-shadow: 0 8px 25px rgba(4, 21, 63, 0.16);

    cursor: pointer;

    z-index: 9000;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.floating-back-button span:first-child {
    font-size: 17px;
    line-height: 1;
}

.floating-back-button:hover {
    transform: translateY(-2px);
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(4, 21, 63, 0.22);
}

.floating-back-button:active {
    transform: translateY(0);
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 850px) {

    .floating-back-button {
        left: 14px;
        bottom: 18px;

        padding: 10px 15px;

        font-size: 12px;

        box-shadow: 0 7px 20px rgba(4, 21, 63, 0.18);
    }

    .floating-back-button span:first-child {
        font-size: 16px;
    }

}

/* =========================================================
   ELIM SANCTUARY
   MONTHLY BIBLE CHALLENGE
========================================================= */


/* =========================================================
   MAIN PAGE
========================================================= */

.monthly-challenge-page {

    max-width: 1250px;

    margin: 0 auto;

    padding: 80px 25px 100px;

}


/* =========================================================
   PAGE HEADER
========================================================= */

.monthly-challenge-header {

    max-width: 850px;

    margin: 0 auto 60px;

    text-align: center;

}


.monthly-challenge-label,
.challenge-small-label {

    display: inline-block;

    margin-bottom: 15px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #126B45;

}


.monthly-challenge-header h1 {

    margin: 0;

    color: #071F5C;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(
        42px,
        6vw,
        72px
    );

    line-height: 1.05;

}


.monthly-challenge-month {

    margin: 15px 0 20px;

    color: #126B45;

    font-size: 17px;

    font-weight: 600;

}


.monthly-challenge-description {

    max-width: 650px;

    margin: 0 auto;

    color: #666;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   START PANEL
========================================================= */

.challenge-start-panel {

    max-width: 720px;

    margin: 0 auto 70px;

    padding: 55px 45px;

    background: #ffffff;

    border: 1px solid #e5e9ee;

    border-radius: 18px;

    box-shadow:
        0 20px 60px rgba(
            7,
            31,
            92,
            0.08
        );

    text-align: center;

}


.challenge-start-inner h2 {

    margin: 0 0 15px;

    color: #071F5C;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 38px;

}


.challenge-start-inner p {

    color: #666;

    line-height: 1.7;

}


.challenge-name-field {

    max-width: 480px;

    margin: 30px auto;

    text-align: left;

}


.challenge-name-field label {

    display: block;

    margin-bottom: 8px;

    color: #071F5C;

    font-size: 13px;

    font-weight: 700;

}


.challenge-name-field input {

    width: 100%;

    box-sizing: border-box;

    padding: 15px 17px;

    border: 1px solid #d9dee5;

    border-radius: 8px;

    background: #fff;

    color: #222;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.challenge-name-field input:focus {

    border-color: #126B45;

    box-shadow:
        0 0 0 3px rgba(
            18,
            107,
            69,
            0.08
        );

}


.challenge-primary-button,
.challenge-secondary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 48px;

    padding: 12px 23px;

    border-radius: 7px;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

}


.challenge-primary-button {

    border: none;

    background: #071F5C;

    color: #ffffff;

}


.challenge-primary-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(
            7,
            31,
            92,
            0.18
        );

}


.challenge-secondary-button {

    border: 1px solid #d8dee7;

    background: #ffffff;

    color: #071F5C;

}


.challenge-secondary-button:hover {

    background: #f6f8fa;

}


.challenge-start-error {

    min-height: 20px;

    margin: 15px 0 0;

    color: #a12c2c !important;

    font-size: 13px !important;

}


/* =========================================================
   GAME SECTION
========================================================= */

.monthly-game-section {

    margin-bottom: 80px;

}


.challenge-game-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 25px;

}


.challenge-game-header h2 {

    margin: 0;

    color: #071F5C;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 42px;

}


.challenge-timer-box {

    min-width: 105px;

    padding: 13px 17px;

    border: 1px solid #e2e7ed;

    border-radius: 10px;

    background: #ffffff;

    text-align: center;

}


.challenge-timer-box span {

    display: block;

    margin-bottom: 4px;

    color: #888;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.challenge-timer-box strong {

    color: #071F5C;

    font-size: 21px;

    font-variant-numeric: tabular-nums;

}


.challenge-welcome {

    margin-bottom: 25px;

    color: #666;

    font-size: 15px;

}


/* =========================================================
   WORD SEARCH LAYOUT
========================================================= */

.word-search-monthly-layout {

    display: grid;

    grid-template-columns:
        minmax(190px, 240px)
        minmax(0, 1fr);

    gap: 40px;

    align-items: start;

}


.monthly-word-list-panel {

    padding: 25px;

    border: 1px solid #e4e8ed;

    border-radius: 14px;

    background: #ffffff;

}


.monthly-panel-heading {

    margin-bottom: 20px;

    color: #071F5C;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.7px;

}


.monthly-word-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 25px;

}


.monthly-word-item {

    padding: 9px 10px;

    border-bottom: 1px solid #eef0f3;

    color: #333;

    font-size: 13px;

    font-weight: 600;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;

}


.monthly-word-item.found {

    color: #126B45;

    text-decoration: line-through;

    opacity: 0.55;

}


.monthly-word-search-container {

    min-width: 0;

}


.monthly-word-search-grid {

    width: min(
        100%,
        650px
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(
            14,
            minmax(25px, 1fr)
        );

    aspect-ratio: 1 / 1;

    border: 1px solid #dfe4e9;

    background: #f8fafb;

    user-select: none;

    touch-action: none;

}


.monthly-word-search-cell {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 0;

    border-right: 1px solid #e5e9ed;

    border-bottom: 1px solid #e5e9ed;

    color: #071F5C;

    font-size: clamp(
        10px,
        1.5vw,
        15px
    );

    font-weight: 700;

    cursor: crosshair;

    transition:
        background 0.12s ease,
        color 0.12s ease;

}


.monthly-word-search-cell.selecting {

    background: rgba(
        18,
        107,
        69,
        0.18
    );

}


.monthly-word-search-cell.found {

    background: #126B45;

    color: #ffffff;

}


.monthly-game-instruction {

    margin: 17px 0 0;

    text-align: center;

    color: #888;

    font-size: 12px;

}


/* =========================================================
   LEADERBOARD
========================================================= */

.monthly-leaderboard-section {

    max-width: 850px;

    margin: 0 auto;

    padding-top: 30px;

}


.monthly-leaderboard-header {

    margin-bottom: 25px;

}


.monthly-leaderboard-header h2 {

    margin: 0 0 10px;

    color: #071F5C;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 38px;

}


.monthly-leaderboard-header p {

    margin: 0;

    color: #777;

    line-height: 1.7;

}


.monthly-leaderboard {

    overflow: hidden;

    border: 1px solid #e3e7ec;

    border-radius: 14px;

    background: #ffffff;

}


.monthly-leaderboard-row {

    display: grid;

    grid-template-columns:
        65px
        1fr
        100px;

    align-items: center;

    min-height: 60px;

    padding: 0 20px;

    border-bottom: 1px solid #edf0f3;

}


.monthly-leaderboard-row:last-child {

    border-bottom: none;

}


.monthly-leaderboard-position {

    color: #126B45;

    font-weight: 800;

}


.monthly-leaderboard-name {

    color: #333;

    font-weight: 600;

}


.monthly-leaderboard-time {

    color: #071F5C;

    font-weight: 700;

    text-align: right;

    font-variant-numeric: tabular-nums;

}


.leaderboard-loading,
.leaderboard-empty {

    padding: 30px;

    color: #888;

    font-size: 13px;

    text-align: center;

}


.leaderboard-personal-result {

    margin-top: 20px;

    padding: 16px 20px;

    border-radius: 9px;

    background: #f5f8f6;

    color: #126B45;

    font-size: 14px;

    line-height: 1.6;

    text-align: center;

}


.leaderboard-personal-result:empty {

    display: none;

}


/* =========================================================
   COMPLETION OVERLAY
========================================================= */

.monthly-completion-overlay {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 25px;

}


.monthly-completion-overlay.open {

    display: flex;

}


.monthly-completion-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(
        4,
        21,
        63,
        0.78
    );

    backdrop-filter: blur(7px);

}


.monthly-completion-card {

    position: relative;

    z-index: 2;

    width: min(
        100%,
        560px
    );

    padding: 50px 40px;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 30px 90px rgba(
            0,
            0,
            0,
            0.25
        );

    text-align: center;

}


.monthly-completion-close {

    position: absolute;

    top: 15px;

    right: 17px;

    width: 35px;

    height: 35px;

    border: none;

    border-radius: 50%;

    background: #f2f4f6;

    color: #071F5C;

    font-size: 22px;

    cursor: pointer;

}


.monthly-completion-card h2 {

    margin: 0 0 12px;

    color: #071F5C;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 44px;

}


.monthly-completion-message {

    color: #666;

    line-height: 1.7;

}


.monthly-completion-time {

    margin: 30px auto;

}


.monthly-completion-time span {

    display: block;

    margin-bottom: 6px;

    color: #888;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.monthly-completion-time strong {

    color: #126B45;

    font-size: 42px;

    font-variant-numeric: tabular-nums;

}


.monthly-completion-ranking {

    min-height: 25px;

    color: #555;

    line-height: 1.6;

}


.monthly-completion-actions {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {

    .monthly-challenge-page {

        padding:
            55px
            18px
            70px;

    }


    .word-search-monthly-layout {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .monthly-word-list-panel {

        order: 2;

    }


    .monthly-word-search-container {

        order: 1;

    }


}


@media (max-width: 600px) {

    .monthly-challenge-header {

        margin-bottom: 40px;

    }


    .monthly-challenge-header h1 {

        font-size: 45px;

    }


    .challenge-start-panel {

        padding:
            35px
            20px;

    }


    .challenge-game-header {

        align-items: flex-start;

    }


    .challenge-game-header h2 {

        font-size: 34px;

    }


    .challenge-timer-box {

        min-width: 82px;

        padding:
            10px
            12px;

    }


    .challenge-timer-box strong {

        font-size: 17px;

    }


    .monthly-word-search-grid {

        width: 100%;

    }


    .monthly-word-search-cell {

        font-size: 9px;

    }


    .monthly-leaderboard-row {

        grid-template-columns:
            45px
            1fr
            80px;

        padding:
            0
            12px;

        font-size: 12px;

    }


    .monthly-completion-card {

        padding:
            45px
            22px;

    }


    .monthly-completion-card h2 {

        font-size: 36px;

    }


    .monthly-completion-time strong {

        font-size: 34px;

    }

}

/* =========================================================
   ELIM SANCTUARY
   MONTHLY BIBLE CHALLENGE
========================================================= */


/* =========================================================
   MONTHLY GAME VISIBILITY
========================================================= */

.monthly-game-section {
    width: 100%;
}


/* =========================================================
   WORD SEARCH INTRO
========================================================= */

.word-search-page-intro {
    padding: 95px 25px 65px;
    background: #f5f7f7;
    text-align: center;
}

.word-search-page-intro-inner {
    width: min(850px, 100%);
    margin: 0 auto;
}

.word-search-page-intro .section-label {
    color: #126b45;
}

.word-search-page-intro h1 {
    margin: 0 0 20px;
    color: #071f5c;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(48px, 7vw, 82px);
    font-weight: 500;
    line-height: 0.98;
}

.word-search-page-intro h1 span {
    display: block;
    margin-top: 16px;
    color: #126b45;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.word-search-page-intro p:not(.section-label) {
    max-width: 720px;
    margin: 0 auto;
    color: #667085;
    font-size: 16px;
    line-height: 1.8;
}

.word-search-page-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 25px;
}

.word-search-page-meta span {
    color: #126b45;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.word-search-section {
    padding: 55px 25px 90px;
    background: #f5f7f7;
}

.word-search-page-section {
    padding-top: 35px;
}


/* =========================================================
   MAIN CARD
========================================================= */

.word-search-card {
    width: min(1250px, 100%);
    margin: 0 auto;
    background: #ffffff;
    border-radius: 22px;
    padding: 55px;
    box-shadow: 0 20px 70px rgba(4, 21, 63, 0.10);
    border: 1px solid rgba(7, 31, 92, 0.07);
}

.word-search-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 35px;
}

.word-search-label {
    display: inline-block;
    margin-bottom: 10px;
    color: #126b45;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.word-search-instruction-container h2 {
    margin: 0 0 12px;
    color: #071f5c;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1;
}

.word-search-instruction {
    max-width: 760px;
    margin: 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   START PANEL
========================================================= */

.word-search-start-panel {
    position: relative;
    z-index: 20;
    margin-bottom: 35px;
    padding: 35px;
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #071f5c 0%,
            #0b356e 55%,
            #126b45 100%
        );

    color: #ffffff;
    overflow: hidden;
}

.word-search-start-panel::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -120px;
    top: -160px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}

.word-search-start-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.word-search-start-number {
    display: block;
    margin-bottom: 15px;
    font-size: 12px;
    letter-spacing: 0.2em;
    opacity: 0.55;
}

.word-search-start-label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.word-search-start-content h3 {
    margin: 0 0 10px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 32px;
    font-weight: 500;
}

.word-search-start-content p {
    max-width: 680px;
    margin: 0 0 22px;
    color: rgba(255,255,255,0.82);
    font-size: 14px;
    line-height: 1.7;
}

.word-search-name-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.word-search-name-form label {
    width: 100%;
    margin-bottom: -3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.word-search-name-form input {
    width: min(360px, 100%);
    height: 48px;
    padding: 0 16px;

    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;

    outline: none;

    background: rgba(255,255,255,0.10);
    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
}

.word-search-name-form input::placeholder {
    color: rgba(255,255,255,0.55);
}

.word-search-name-form input:focus {
    border-color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.14);
}

.word-search-start-button {
    height: 48px;
    padding: 0 22px;

    border: none;
    border-radius: 8px;

    background: #ffffff;
    color: #071f5c;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition: 0.25s ease;
}

.word-search-start-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}

.word-search-start-button:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

.word-search-start-content small {
    display: block;
    margin-top: 15px;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
}

.word-search-start-welcome {
    margin: 13px 0 0 !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 12px !important;
}


/* =========================================================
   GAME LOCK
========================================================= */

.word-search-game-locked {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.word-search-game-locked::after {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 10;

    pointer-events: none;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    background: rgba(255,255,255,0.28);

    opacity: 1;

    transition: opacity 0.4s ease;
}

.word-search-game-locked.is-unlocked::after {
    opacity: 0;
    pointer-events: none;
}


/* =========================================================
   GAME LAYOUT
========================================================= */

.word-search-game-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 50px;
    align-items: start;
}

.word-search-main {
    min-width: 0;
}


/* =========================================================
   TIMER
========================================================= */

.word-search-timer-box {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 18px;
}

.word-search-timer-box span {
    color: #126b45;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.word-search-timer-box strong {
    color: #071f5c;
    font-size: 30px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}


/* =========================================================
   WORD SEARCH GRID
========================================================= */

.word-search-grid {
    width: min(650px, 100%);
    aspect-ratio: 1 / 1;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: repeat(14, 1fr);

    gap: 4px;

    padding: 12px;

    border-radius: 14px;

    background: #071f5c;

    box-shadow:
        0 18px 40px rgba(4,21,63,0.18);

    touch-action: none;
    user-select: none;
}

.word-search-cell {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 0;

    padding: 0;

    border: 0;
    border-radius: 4px;

    background: #ffffff;
    color: #071f5c;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(13px, 1.55vw, 21px);
    font-weight: 800;

    cursor: crosshair;

    user-select: none;
    -webkit-user-select: none;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.word-search-cell:hover {
    background: #eaf5ef;
}

.word-search-cell.selecting {
    background: #39b98a;
    color: #ffffff;
    transform: scale(0.92);
}

.word-search-cell.found {
    background: #126b45;
    color: #ffffff;
}


/* =========================================================
   WORD LIST
========================================================= */

.word-search-word-section {
    margin-top: 25px;
}

.word-search-words {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.word-search-word {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding: 0 12px;

    border: 1px solid #dfe5e2;
    border-radius: 999px;

    background: #ffffff;
    color: #071f5c;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;

    transition: 0.2s ease;
}

.word-search-word.found {
    background: #126b45;
    border-color: #126b45;
    color: #ffffff;
    text-decoration: line-through;
}


/* =========================================================
   LEADERBOARD
========================================================= */

.word-search-leaderboard {
    position: sticky;
    top: 110px;

    overflow: hidden;

    border-radius: 16px;

    background: #071f5c;
    color: #ffffff;

    box-shadow:
        0 20px 45px rgba(4,21,63,0.18);
}

.leaderboard-header {
    padding: 24px 24px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.leaderboard-header > span {
    display: block;
    margin-bottom: 5px;

    color: #65d5a8;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.leaderboard-header h3 {
    margin: 0;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 30px;
    font-weight: 500;
}

.leaderboard-header p {
    margin: 5px 0 0;

    color: rgba(255,255,255,0.55);

    font-size: 11px;
}

.leaderboard-list {
    padding: 8px 0;
}

.leaderboard-row {
    display: grid;

    grid-template-columns:
        35px minmax(0,1fr) auto;

    align-items: center;

    gap: 10px;

    min-height: 60px;

    padding: 8px 20px;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}

.leaderboard-row:last-child {
    border-bottom: none;
}

.leaderboard-rank {
    color: #65d5a8;
    font-size: 12px;
    font-weight: 800;
}

.leaderboard-player {
    min-width: 0;
}

.leaderboard-player strong {
    display: block;

    overflow: hidden;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-player span {
    color: rgba(255,255,255,0.42);
    font-size: 9px;
}

.leaderboard-time {
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.leaderboard-loading,
.leaderboard-empty {
    padding: 25px 20px;

    color: rgba(255,255,255,0.55);

    font-size: 11px;
    line-height: 1.6;
}

.leaderboard-personal-result {
    display: none;

    margin: 12px;
    padding: 14px;

    border-radius: 10px;

    background: rgba(57,185,138,0.14);

    border:
        1px solid rgba(57,185,138,0.25);

    color: #ffffff;

    font-size: 11px;
    line-height: 1.6;
}

.leaderboard-personal-result.show {
    display: block;
}

.leaderboard-personal-result strong {
    color: #65d5a8;
}


/* =========================================================
   GO DEEPER
========================================================= */

.word-search-after-game {
    margin-top: 55px;

    padding: 45px;

    border-radius: 16px;

    background: #f4f8f6;

    text-align: center;
}

.word-search-after-game .section-label {
    margin-bottom: 12px;
}

.word-search-after-game h2 {
    margin: 0 0 12px;

    color: #071f5c;

    font-family: "Playfair Display", Georgia, serif;

    font-size: clamp(32px, 4vw, 48px);

    font-weight: 500;
}

.word-search-after-game > p:not(.section-label) {
    max-width: 680px;

    margin: 0 auto 25px;

    color: #667085;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   COMPLETION POPUP
========================================================= */

.word-search-completion-overlay {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 25px;

    background:
        rgba(4,21,63,0.72);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: 0.3s ease;
}

.word-search-completion-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.word-search-completion-modal {
    position: relative;

    width: min(520px, 100%);

    max-height:
        calc(100vh - 50px);

    overflow-y: auto;

    padding: 45px;

    border-radius: 20px;

    background: #ffffff;

    color: #071f5c;

    text-align: center;

    box-shadow:
        0 30px 90px rgba(0,0,0,0.3);

    transform:
        translateY(20px)
        scale(0.97);

    transition: 0.35s ease;
}

.word-search-completion-overlay.open
.word-search-completion-modal {
    transform:
        translateY(0)
        scale(1);
}

.word-search-completion-close {
    position: absolute;

    top: 15px;
    right: 17px;

    width: 35px;
    height: 35px;

    border: none;
    border-radius: 50%;

    background: #f2f4f4;

    color: #071f5c;

    font-size: 22px;

    cursor: pointer;
}

.completion-kicker {
    color: #126b45;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.2em;
}

.completion-check {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 65px;
    height: 65px;

    margin: 20px auto;

    border-radius: 50%;

    background: #e8f6ef;

    color: #126b45;

    font-size: 30px;
    font-weight: 800;
}

.word-search-completion-modal h2 {
    margin: 0 0 8px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 42px;
    font-weight: 500;
}

.word-search-completion-modal > p {
    margin: 0 auto 25px;

    color: #667085;

    font-size: 14px;

    line-height: 1.6;
}

.completion-time {
    padding: 20px;

    margin-bottom: 20px;

    border-radius: 12px;

    background: #f4f7f7;
}

.completion-time span {
    display: block;

    margin-bottom: 5px;

    color: #126b45;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.18em;
}

.completion-time strong {
    color: #071f5c;

    font-size: 42px;

    font-variant-numeric:
        tabular-nums;
}

.completion-ranking {
    margin-bottom: 25px;

    color: #667085;

    font-size: 13px;

    line-height: 1.7;
}

.completion-ranking strong {
    color: #071f5c;
}

.completion-registration-button {
    display: inline-flex;

    width: 100%;

    margin-bottom: 10px;

    justify-content: center;

    text-decoration: none;
}

.word-search-reset {
    width: 100%;

    height: 48px;

    border: none;

    border-radius: 8px;

    background: #071f5c;

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition: 0.25s ease;
}

.word-search-reset:hover {
    background: #126b45;
    transform: translateY(-1px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .word-search-section {
        padding: 60px 15px;
    }

    .word-search-card {
        padding: 30px 20px;
        border-radius: 16px;
    }

    .word-search-game-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .word-search-leaderboard {
        position: static;
        order: 2;
    }

    .word-search-grid {
        width: 100%;
        gap: 3px;
        padding: 8px;
    }

    .word-search-cell {
        font-size:
            clamp(10px, 3.2vw, 18px);
    }


}

@media (max-width: 600px) {

    .word-search-page-intro {
        padding: 70px 20px 45px;
    }

    .word-search-page-intro h1 {
        font-size: 45px;
    }

    .word-search-card {
        padding: 25px 15px;
    }

    .word-search-start-panel {
        padding: 25px 20px;
    }

    .word-search-start-content h3 {
        font-size: 27px;
    }

    .word-search-name-form {
        display: block;
    }

    .word-search-name-form input,
    .word-search-start-button {
        width: 100%;
        margin-top: 10px;
    }

    .word-search-timer-box {
        justify-content: space-between;
    }

    .word-search-after-game {
        padding: 28px 18px;
    }

    .word-search-completion-modal {
        padding: 35px 20px;
    }

    .word-search-completion-modal h2 {
        font-size: 36px;
    }

}

/* =========================================================
   FORCE HTML HIDDEN ATTRIBUTE TO WORK
========================================================= */

[hidden] {
    display: none !important;
}


/* =========================================================
   MONTHLY WORD SEARCH GRID
========================================================= */

.monthly-word-search-grid {
    display: grid;

    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: repeat(14, 1fr);

    width: min(650px, 100%);
    aspect-ratio: 1 / 1;

    gap: 4px;
    padding: 12px;

    margin: 0 auto;

    background: #071F5C;

    border-radius: 14px;

    box-sizing: border-box;

    user-select: none;
    touch-action: none;
}


/* =========================================================
   MONTHLY WORD SEARCH CELLS
========================================================= */

.monthly-word-search-cell {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    padding: 0;
    margin: 0;

    border: 1px solid #DCE5E1;
    border-radius: 4px;

    background: #FFFFFF;

    color: #071F5C;

    font-family: "DM Sans", Arial, sans-serif;

    font-size: clamp(12px, 1.7vw, 21px);

    font-weight: 800;

    line-height: 1;

    cursor: crosshair;

    user-select: none;
    -webkit-user-select: none;

    box-sizing: border-box;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}


.monthly-word-search-cell:hover {
    background: #EDF6F1;
    border-color: #126B45;
    color: #126B45;
}


.monthly-word-search-cell.selecting {
    background: #126B45;
    border-color: #126B45;
    color: #FFFFFF;

    transform: scale(0.94);
}


.monthly-word-search-cell.found {
    background: #126B45;
    border-color: #126B45;
    color: #FFFFFF;
}


/* =========================================================
   MONTHLY WORD LIST
========================================================= */

.monthly-word-list {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.monthly-word-item {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 8px 12px;

    border: 1px solid #DCE5E1;
    border-radius: 6px;

    background: #FFFFFF;

    color: #071F5C;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.5px;
}


.monthly-word-item.found {
    background: #EDF6F1;

    border-color: #B9D9C9;

    color: #126B45;

    text-decoration: line-through;
}


.monthly-challenge-page {
    width: 100%;
    background: #f7f9f8;
    padding: 90px 25px 110px;
    box-sizing: border-box;
}

.monthly-challenge-header {
    width: min(900px, 100%);
    margin: 0 auto 55px;
    text-align: center;
}

.monthly-challenge-label {
    display: block;
    margin-bottom: 12px;
    color: #126b45;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.monthly-challenge-header h1 {
    margin: 0;
    color: #071f5c;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 500;
    line-height: 1.05;
}

.monthly-challenge-month {
    margin: 12px 0 18px;
    color: #126b45;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.monthly-challenge-description {
    max-width: 650px;
    margin: 0 auto;
    color: #667085;
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   START PANEL
========================================================= */

.challenge-start-panel {
    width: min(760px, 100%);
    margin: 0 auto 60px;
    padding: 50px;
    box-sizing: border-box;
    border-radius: 20px;
    background: #071f5c;
    color: #ffffff;
    box-shadow: 0 20px 55px rgba(4, 21, 63, 0.18);
}

.challenge-start-inner {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.challenge-small-label {
    display: block;
    margin-bottom: 10px;
    color: #126b45;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.challenge-start-panel .challenge-small-label {
    color: #65d5a8;
}

.challenge-start-panel h2 {
    margin: 0 0 14px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 38px;
    font-weight: 500;
}

.challenge-start-panel p {
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    line-height: 1.7;
}

.challenge-name-field {
    margin: 30px 0 20px;
    text-align: left;
}

.challenge-name-field label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.challenge-name-field input {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 8px;
    outline: none;
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
}

.challenge-name-field input::placeholder {
    color: rgba(255,255,255,0.45);
}

.challenge-name-field input:focus {
    border-color: #65d5a8;
    background: rgba(255,255,255,0.12);
}

.challenge-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 24px;
    border: none;
    border-radius: 999px;
    background: #126b45;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.challenge-primary-button:hover {
    background: #0b5033;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(18,107,69,0.25);
}

.challenge-primary-button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.challenge-start-error {
    min-height: 20px;
    margin: 15px 0 0;
    color: #ffb4b4 !important;
    font-size: 12px !important;
    line-height: 1.5;
}

.challenge-start-error:empty {
    display: none;
}

.challenge-start-error.visible {
    display: block;
}


/* =========================================================
   GAME SECTION
========================================================= */

.monthly-game-section {
    width: min(1250px, 100%);
    margin: 0 auto 70px;
    padding: 45px;
    box-sizing: border-box;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(4,21,63,0.10);
}

.challenge-game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 25px;
}

.challenge-game-header h2 {
    margin: 0;
    color: #071f5c;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 38px;
    font-weight: 500;
}

.challenge-timer-box {
    flex-shrink: 0;
    text-align: right;
}

.challenge-timer-box span {
    display: block;
    margin-bottom: 4px;
    color: #126b45;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.challenge-timer-box strong {
    color: #071f5c;
    font-size: 30px;
    font-variant-numeric: tabular-nums;
}

.challenge-welcome {
    margin-bottom: 30px;
    padding: 12px 15px;
    border-radius: 8px;
    background: #edf6f1;
    color: #126b45;
    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   WORD SEARCH LAYOUT
========================================================= */

.word-search-monthly-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 45px;
    align-items: start;
}

.monthly-word-list-panel {
    padding: 25px;
    border-radius: 14px;
    background: #f5f8f7;
    border: 1px solid #e1e8e5;
}

.monthly-panel-heading {
    margin-bottom: 18px;
    color: #126b45;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.monthly-word-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}

.monthly-word-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #dce5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #071f5c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.monthly-word-item.found {
    background: #126b45;
    border-color: #126b45;
    color: #ffffff;
    text-decoration: line-through;
}

.challenge-secondary-button {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #d7e1dd;
    border-radius: 999px;
    background: #ffffff;
    color: #071f5c;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.challenge-secondary-button:hover {
    border-color: #126b45;
    color: #126b45;
}


/* =========================================================
   MONTHLY WORD SEARCH GRID
========================================================= */

.monthly-word-search-container {
    width: 100%;
    min-width: 0;
}

.monthly-word-search-grid {
    width: min(650px, 100%);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: repeat(14, 1fr);
    gap: 4px;

    border-radius: 16px;
    background: #071f5c;
    box-shadow: 0 18px 45px rgba(4,21,63,0.18);

    user-select: none;
    touch-action: none;
}

.monthly-word-search-cell {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 4px;

    background: #ffffff;
    color: #071f5c;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(9px, 1.4vw, 18px);
    font-weight: 800;
    line-height: 1;

    cursor: crosshair;
    user-select: none;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.monthly-word-search-cell:hover {
    background: #eaf5ef;
}

.monthly-word-search-cell.selecting {
    background: #65d5a8;
    color: #071f5c;
    transform: scale(0.92);
}

.monthly-word-search-cell.found {
    background: #126b45;
    color: #ffffff;
}


/* =========================================================
   INSTRUCTION
========================================================= */

.monthly-game-instruction {
    margin: 18px 0 0;
    text-align: center;
    color: #667085;
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   LEADERBOARD
========================================================= */

.monthly-leaderboard-section {
    width: min(900px, 100%);
    margin: 0 auto;
}

.monthly-leaderboard-header {
    margin-bottom: 25px;
    text-align: center;
}

.monthly-leaderboard-header h2 {
    margin: 0 0 10px;
    color: #071f5c;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 40px;
    font-weight: 500;
}

.monthly-leaderboard-header p {
    margin: 0;
    color: #667085;
    font-size: 13px;
}

.monthly-leaderboard {
    overflow: hidden;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e0e7e4;
    box-shadow: 0 15px 40px rgba(4,21,63,0.07);
}

.leaderboard-loading,
.leaderboard-empty {
    padding: 25px;
    text-align: center;
    color: #667085;
    font-size: 13px;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 60px minmax(0,1fr) 100px;
    align-items: center;
    gap: 15px;
    padding: 16px 20px;
    border-bottom: 1px solid #edf1ef;
}

.leaderboard-row:last-child {
    border-bottom: none;
}

.leaderboard-rank {
    color: #126b45;
    font-size: 13px;
    font-weight: 800;
}

.leaderboard-player {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.leaderboard-player strong {
    color: #071f5c;
    font-size: 13px;
}

.leaderboard-player span {
    margin-top: 2px;
    color: #98a2b3;
    font-size: 10px;
}

.leaderboard-time {
    text-align: right;
    color: #071f5c;
    font-size: 13px;
    font-weight: 800;
}

.leaderboard-personal-result {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 10px;
    background: #edf6f1;
    color: #126b45;
    text-align: center;
    font-size: 13px;
    display: none;
}

.leaderboard-personal-result.show {
    display: block;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .monthly-challenge-page {
        padding: 65px 15px 90px;
    }

    .challenge-start-panel,
    .monthly-game-section {
        padding: 30px 20px;
    }

    .word-search-monthly-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .monthly-word-list-panel {
        order: 2;
    }

    .monthly-word-search-grid {
        width: 100%;
        gap: 3px;
        padding: 7px;
    }

    .monthly-word-search-cell {
        font-size: clamp(9px, 3.2vw, 18px);
    }

    .challenge-game-header {
        align-items: flex-start;
    }
}

@media (max-width: 600px) {

    .monthly-challenge-header h1 {
        font-size: 40px;
    }

    .challenge-start-panel {
        padding: 30px 18px;
    }

    .challenge-game-header {
        flex-direction: column;
    }

    .challenge-timer-box {
        text-align: left;
    }

    .monthly-word-search-grid {
        gap: 2px;
        padding: 5px;
    }

    .monthly-word-search-cell {
        border-radius: 2px;
        font-size: 9px;
    }

    .leaderboard-row {
        grid-template-columns: 45px minmax(0,1fr) 75px;
        padding: 14px;
    }

}

@media (max-width: 900px) {

}

/* =========================================================
   BIBLE STUDY — WORD SEARCH INVITATION POPUP
========================================================= */

.bs-word-search-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.bs-word-search-popup.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* BACKDROP */

.bs-word-search-popup-overlay {
    position: absolute;
    inset: 0;

    background:
        rgba(4, 21, 63, 0.72);

    backdrop-filter: blur(5px);
}


/* CARD */

.bs-word-search-popup-card {
    position: relative;
    z-index: 2;

    width: min(520px, 100%);

    padding: 50px 45px;

    background: #ffffff;

    border-radius: 20px;

    box-shadow:
        0 25px 80px rgba(4, 21, 63, 0.25);

    transform:
        translateY(25px)
        scale(0.96);

    transition:
        transform 0.3s ease;
}


.bs-word-search-popup.show
.bs-word-search-popup-card {
    transform:
        translateY(0)
        scale(1);
}


/* CLOSE */

.bs-word-search-popup-close {
    position: absolute;

    top: 18px;
    right: 20px;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #f2f4f4;

    color: #071f5c;

    font-size: 24px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.bs-word-search-popup-close:hover {
    background: #126b45;
    color: #ffffff;
}


/* LABEL */

.bs-word-search-popup-label {
    display: inline-block;

    margin-bottom: 12px;

    color: #126b45;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}


/* HEADING */

.bs-word-search-popup-card h2 {
    margin: 0 0 18px;

    color: #071f5c;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 34px;
    line-height: 1.15;
}


/* TEXT */

.bs-word-search-popup-card p {
    margin: 0 0 12px;

    color: #66717a;

    font-size: 14px;

    line-height: 1.7;
}


/* ACTIONS */

.bs-word-search-popup-actions {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 30px;
}


/* PLAY */

.bs-word-search-popup-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 14px 22px;

    border-radius: 7px;

    background: #126b45;
    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.bs-word-search-popup-button:hover {
    background: #0b5033;

    transform:
        translateY(-2px);
}


/* MAYBE LATER */

.bs-word-search-popup-later {
    padding: 14px 8px;

    border: none;

    background: transparent;

    color: #071f5c;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}


.bs-word-search-popup-later:hover {
    color: #126b45;
}


/* PREVENT PAGE SCROLL WHILE OPEN */

body.bs-popup-open {
    overflow: hidden;
}


/* MOBILE */

@media (max-width: 600px) {

    .bs-word-search-popup {
        padding: 18px;
    }


    .bs-word-search-popup-card {
        padding: 42px 25px 30px;
    }


    .bs-word-search-popup-card h2 {
        font-size: 28px;
    }


    .bs-word-search-popup-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .bs-word-search-popup-button {
        width: 100%;
    }

}

/* =========================================================
   ENGINEERING DETAILS WORD SEARCH — FINAL LAYOUT
========================================================= */

.word-search-page {
    background: #f5f7f7;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.word-search-page-header {
    padding: 95px 25px 55px;
    background: #ffffff;
}

.word-search-page-header-inner {
    width: min(1200px, 100%);
    margin: 0 auto;
}

.word-search-page-eyebrow {
    display: block;
    margin-bottom: 14px;

    color: #126b45;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.word-search-page-header h1 {
    margin: 0 0 12px;

    color: #071f5c;

    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 500;
    line-height: 1.05;
}

.word-search-page-header p {
    max-width: 650px;
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.word-search-main-section {
    padding: 35px 25px 90px;
}

.word-search-main-container {
    width: min(1200px, 100%);
    margin: 0 auto;
}


/* =========================================================
   INTRO VIDEO CARD
========================================================= */

.word-search-video-card {
    position: relative;

    min-height: 260px;
    margin-bottom: 35px;

    overflow: hidden;

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(18, 107, 69, 0.95),
            transparent 35%
        ),
        linear-gradient(
            120deg,
            #071f5c 0%,
            #0a285f 48%,
            #126b45 100%
        );

    box-shadow:
        0 20px 55px rgba(4, 21, 63, 0.17);
}

.word-search-video-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 31, 92, 0.96),
            rgba(7, 31, 92, 0.62),
            rgba(18, 107, 69, 0.42)
        );
}

.word-search-video-content {
    position: relative;
    z-index: 2;

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

    min-height: 260px;

    padding: 45px 55px;
}

.word-search-video-copy {
    max-width: 620px;
}

.word-search-video-copy > span {
    display: block;
    margin-bottom: 12px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.word-search-video-copy h2 {
    margin: 0 0 12px;

    color: #ffffff;

    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 500;
}

.word-search-video-copy p {
    max-width: 520px;
    margin: 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: 14px;
    line-height: 1.75;
}


/* PLAY BUTTON */

.word-search-video-play {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 76px;
    height: 76px;

    flex-shrink: 0;

    margin-left: 35px;

    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.12);

    color: #ffffff;

    cursor: pointer;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.word-search-video-play span {
    margin-left: 4px;

    font-size: 21px;
}

.word-search-video-play:hover {
    transform: scale(1.08);

    background: rgba(255, 255, 255, 0.2);

    border-color: rgba(255, 255, 255, 0.75);
}


/* =========================================================
   GAME / LEADERBOARD LAYOUT
========================================================= */

.word-search-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        310px;

    gap: 35px;

    align-items: start;
}


/* =========================================================
   GAME COLUMN
========================================================= */

.word-search-game-column {
    min-width: 0;
}


/* =========================================================
   START PANEL
========================================================= */

.word-search-start-panel {
    margin-bottom: 25px;

    overflow: hidden;

    border-radius: 16px;

    background: #071f5c;

    box-shadow:
        0 20px 50px rgba(4, 21, 63, 0.16);
}

.word-search-start-content {
    padding: 45px;
}

.word-search-start-kicker {
    display: block;
    margin-bottom: 10px;

    color: #69d6aa;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.word-search-start-content h2 {
    margin: 0 0 12px;

    color: #ffffff;

    font-family: "Playfair Display", Georgia, serif;
    font-size: 38px;
    font-weight: 500;
    line-height: 1.2;
}

.word-search-start-content h2 span {
    display: block;

    color: #69d6aa;
}

.word-search-start-content > p {
    max-width: 560px;
    margin: 0 0 25px;

    color: rgba(255,255,255,0.72);

    font-size: 14px;
    line-height: 1.7;
}

.word-search-name-form {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 10px;
    align-items: end;
}

.word-search-name-form label {
    grid-column: 1 / -1;

    color: rgba(255,255,255,0.72);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.word-search-name-form input {
    min-width: 0;

    height: 50px;

    padding: 0 17px;

    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 7px;

    outline: none;

    background: rgba(255,255,255,0.08);

    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
}

.word-search-name-form input::placeholder {
    color: rgba(255,255,255,0.45);
}

.word-search-name-form input:focus {
    border-color: #69d6aa;
}

.word-search-start-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 50px;

    padding: 0 22px;

    border: none;
    border-radius: 7px;

    background: #126b45;

    color: #ffffff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.word-search-start-button:hover {
    transform: translateY(-2px);

    background: #178055;
}

.word-search-start-welcome {
    margin-top: 16px !important;
    margin-bottom: 0 !important;

    color: #69d6aa !important;

    font-size: 12px !important;
}

.word-search-start-content small {
    display: block;
    margin-top: 10px;

    color: rgba(255,255,255,0.42);

    font-size: 10px;
}


/* =========================================================
   ACTUAL GAME
========================================================= */

.word-search-game-layout {
    position: relative;

    overflow: visible !important;

    border-radius: 16px;

    background: transparent;
}


/*
   GAME LOCK / BLUR
   Keep the blur active before the player enters their name.
   The leaderboard is separately layered above the blur below.
*/

.word-search-game-locked::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    background: rgba(255, 255, 255, 0.28);
    opacity: 1;
    transition: opacity 0.4s ease;
}

.word-search-game-locked.is-unlocked::after {
    opacity: 0;
    pointer-events: none;
}


/* =========================================================
   GAME MAIN
========================================================= */

.word-search-main {
    min-width: 0;

    padding: 30px;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 15px 45px rgba(4, 21, 63, 0.08);
}


/* =========================================================
   TIMER
========================================================= */

.word-search-timer-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;

    margin-bottom: 20px;
}

.word-search-timer-box span {
    color: #126b45;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.18em;
}

.word-search-timer-box strong {
    color: #071f5c;

    font-size: 27px;

    font-variant-numeric: tabular-nums;
}


/* =========================================================
   WORD SEARCH GRID
========================================================= */

.word-search-grid {
    display: grid !important;

    grid-template-columns: repeat(14, minmax(0, 1fr));
    grid-template-rows: repeat(14, minmax(0, 1fr));

    width: min(650px, 100%);

    aspect-ratio: 1 / 1;

    margin: 0 auto;

    padding: 10px;

    gap: 4px;

    border-radius: 12px;

    background: #071f5c;

    box-sizing: border-box;

    user-select: none;
    -webkit-user-select: none;

    touch-action: none;
}


/*
   These cells are generated by script.js.
*/

.word-search-cell {
    display: flex !important;

    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 0;

    width: 100%;
    height: 100%;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 3px;

    background: #ffffff !important;

    color: #071f5c !important;

    font-family: "DM Sans", Arial, sans-serif;

    font-size: clamp(10px, 1.55vw, 20px);
    font-weight: 800;

    line-height: 1;

    cursor: crosshair;

    box-sizing: border-box;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.word-search-cell:hover {
    background: #edf6f1 !important;

    color: #126b45 !important;
}

.word-search-cell.selecting,
.word-search-cell.word-search-start {
    background: #39b98a !important;
    color: #ffffff !important;

    transform: scale(0.93);
}

.word-search-cell.found,
.word-search-cell.word-search-found {
    background: #126b45 !important;
    color: #ffffff !important;
}


/* =========================================================
   WORD LIST
========================================================= */

.word-search-word-section {
    padding-top: 25px;
}

.word-search-word-heading {
    margin-bottom: 12px;

    color: #126b45;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;

    text-align: center;
}

.word-search-words {
    display: flex !important;

    flex-wrap: wrap;
    justify-content: center;

    gap: 7px;

    margin: 0;
}

.word-search-word {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 31px;

    padding: 0 11px;

    border: 1px solid #dfe7e4;
    border-radius: 999px;

    background: #ffffff;

    color: #071f5c;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.05em;
}

.word-search-word.found {
    background: #edf6f1;

    border-color: #b9d9c9;

    color: #126b45;

    text-decoration: line-through;
}


/* =========================================================
   GAME MESSAGE
========================================================= */

.word-search-message {
    margin-top: 15px;

    padding: 12px;

    border-radius: 7px;

    background: #edf6f1;

    color: #126b45;

    text-align: center;

    font-size: 12px;
}


/* =========================================================
   NEW GAME BUTTON
========================================================= */

.word-search-main > .word-search-reset {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin: 22px auto 0;

    padding: 10px 18px;

    border: 1px solid #dfe7e4;
    border-radius: 999px;

    background: #ffffff;

    color: #071f5c;

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.word-search-main > .word-search-reset:hover {
    background: #126b45;

    border-color: #126b45;

    color: #ffffff;
}


/* =========================================================
   TOP 5 LEADERBOARD
========================================================= */

.word-search-leaderboard {
    position: sticky !important;

    top: 110px;

    align-self: start;

    overflow: hidden;

    border-radius: 16px;

    background: #071f5c;

    color: #ffffff;

    box-shadow:
        0 20px 45px rgba(4, 21, 63, 0.16);
}


/*
   Absolutely no blur on leaderboard.
*/

.word-search-leaderboard::before,
.word-search-leaderboard::after {
    display: none !important;
}

.leaderboard-header {
    padding: 25px 24px 22px;

    border-bottom:
        1px solid rgba(255,255,255,0.12);
}

.leaderboard-header > span {
    display: block;

    margin-bottom: 6px;

    color: #69d6aa;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.leaderboard-header h3 {
    margin: 0 0 7px;

    color: #ffffff;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 34px;
    font-weight: 500;
}

.leaderboard-header p {
    margin: 0;

    color: rgba(255,255,255,0.58);

    font-size: 11px;
    line-height: 1.6;
}

.leaderboard-list {
    display: block;

    overflow: visible !important;

    max-height: none !important;
}

.leaderboard-row {
    display: grid;

    grid-template-columns:
        45px
        minmax(0, 1fr)
        auto;

    gap: 8px;

    align-items: center;

    min-height: 62px;

    padding: 0 20px;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}

.leaderboard-row:last-child {
    border-bottom: none;
}

.leaderboard-position {
    color: #69d6aa;

    font-size: 11px;
    font-weight: 800;
}

.leaderboard-name {
    overflow: hidden;

    color: #ffffff;

    font-size: 12px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-time {
    color: rgba(255,255,255,0.65);

    font-size: 11px;

    font-variant-numeric: tabular-nums;
}

.leaderboard-loading,
.leaderboard-empty {
    padding: 25px 20px;

    color: rgba(255,255,255,0.5);

    font-size: 11px;
    line-height: 1.6;
}

.leaderboard-personal-result {
    padding: 18px 20px;

    border-top:
        1px solid rgba(255,255,255,0.1);

    color: #69d6aa;

    font-size: 11px;
    line-height: 1.6;
}


/* =========================================================
   HOW TO PLAY
========================================================= */

.word-search-bottom {
    display: grid;

    grid-template-columns: 160px minmax(0, 1fr);

    gap: 25px;

    margin-top: 30px;

    padding: 25px 0;

    border-top: 1px solid #dfe7e4;
}

.word-search-bottom > span {
    color: #126b45;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.word-search-bottom p {
    max-width: 700px;

    margin: 0;

    color: #667085;

    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   COMPLETION OVERLAY
========================================================= */

.word-search-completion-overlay {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 25px;

    background: rgba(4,21,63,0.68);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.word-search-completion-overlay[aria-hidden="false"] {
    opacity: 1;

    visibility: visible;
}

.word-search-completion-backdrop {
    position: absolute;

    inset: 0;
}

.word-search-completion-modal {
    position: relative;

    z-index: 2;

    width: min(470px, 100%);

    padding: 40px;

    border-radius: 18px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 30px 90px rgba(0,0,0,0.25);
}

.word-search-completion-close {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 34px;
    height: 34px;

    border: none;
    border-radius: 50%;

    background: #f1f4f3;

    color: #071f5c;

    font-size: 20px;

    cursor: pointer;
}

.completion-kicker {
    color: #126b45;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.completion-check {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    margin: 20px auto;

    border-radius: 50%;

    background: #eaf6ef;

    color: #126b45;

    font-size: 28px;
    font-weight: 800;
}

.word-search-completion-modal h2 {
    margin: 0 0 10px;

    color: #071f5c;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 42px;
    font-weight: 500;
}

.word-search-completion-modal > p {
    margin: 0 0 20px;

    color: #667085;

    font-size: 13px;
    line-height: 1.7;
}

.completion-time {
    padding: 20px;

    margin-bottom: 20px;

    border-radius: 10px;

    background: #f4f7f7;
}

.completion-time span {
    display: block;

    margin-bottom: 5px;

    color: #126b45;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.completion-time strong {
    color: #071f5c;

    font-size: 40px;

    font-variant-numeric: tabular-nums;
}

.completion-ranking {
    margin-bottom: 20px;

    color: #667085;

    font-size: 12px;
    line-height: 1.6;
}

.completion-bible-study-copy {
    margin-bottom: 15px !important;
}

.completion-registration-button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    margin-bottom: 10px;

    text-decoration: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .word-search-page-header {
        padding: 70px 20px 40px;
    }

    .word-search-main-section {
        padding: 25px 15px 60px;
    }

    .word-search-video-card {
        min-height: 220px;
    }

    .word-search-video-content {
        min-height: 220px;

        padding: 30px;
    }

    .word-search-video-play {
        width: 62px;
        height: 62px;

        margin-left: 20px;
    }

    .word-search-layout {
        grid-template-columns: 1fr;
    }

    .word-search-leaderboard {
        position: relative !important;

        top: auto;

        order: 2;
    }

    .word-search-start-content {
        padding: 30px 24px;
    }

    .word-search-start-content h2 {
        font-size: 31px;
    }

    .word-search-name-form {
        grid-template-columns: 1fr;
    }

    .word-search-name-form label {
        grid-column: auto;
    }

    .word-search-start-button {
        width: 100%;
    }

    .word-search-main {
        padding: 18px;
    }

    .word-search-grid {
        gap: 2px;
        padding: 6px;
    }

    .word-search-cell {
        font-size: clamp(8px, 2.5vw, 14px);
    }

    .word-search-bottom {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .word-search-completion-modal {
        padding: 32px 22px;
    }

}

@media (max-width: 550px) {

    .word-search-page-header h1 {
        font-size: 43px;
    }

    .word-search-video-content {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 25px;
    }

    .word-search-video-play {
        margin-left: 0;
    }

}

/* =========================================
   WORD SEARCH LEADERBOARD - PLAYER NAMES
========================================= */

/* Player names are plain text inside this element, so the name inherits
   its colour from the container. Keep it white on the navy leaderboard. */
.word-search-leaderboard .leaderboard-player {
    display: block !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

/* Keep the completion label readable. */
.word-search-leaderboard .leaderboard-player span {
    color: rgba(255, 255, 255, 0.60) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.60) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* =====================================================
   WORD SEARCH RESULT EMOJI BURST
===================================================== */

.word-search-completion-modal {
    position: relative;
    overflow: visible;
}

.word-search-emoji-burst {
    position: absolute;
    inset: 0;
    z-index: 50;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.word-search-burst-emoji {
    position: absolute;
    left: var(--start-x);
    top: var(--start-y);
    font-size: var(--emoji-size, 30px);
    line-height: 1;
    opacity: 0;
    animation: wordSearchEmojiBurst 1.8s ease-out forwards;
    animation-delay: var(--emoji-delay, 0s);
    will-change: transform, opacity;
}

@keyframes wordSearchEmojiBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.25) rotate(0deg);
    }

    12% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.25) rotate(15deg);
    }

    65% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(
            calc(-50% + var(--move-x)),
            calc(-50% + var(--move-y))
        ) scale(0.75) rotate(var(--rotation));
    }
}

@media (prefers-reduced-motion: reduce) {
    .word-search-burst-emoji {
        animation-duration: 0.5s;
    }
}


/* WORD SEARCH: visible emoji shower across the result card */
.word-search-completion-modal {
    position: relative !important;
}
.word-search-emoji-burst {
    position: absolute !important;
    inset: 0 !important;
    z-index: 20 !important;
    overflow: hidden !important;
    border-radius: inherit !important;
    pointer-events: none !important;
}
.word-search-burst-emoji {
    position: absolute !important;
    left: var(--start-x) !important;
    top: var(--start-y) !important;
    display: block !important;
    font-size: var(--emoji-size, 30px) !important;
    line-height: 1 !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0.15) rotate(0deg);
    animation: wordSearchEmojiCardPop 2.8s cubic-bezier(.16,.8,.3,1) forwards !important;
    animation-delay: var(--emoji-delay, 0s) !important;
    will-change: transform, opacity;
}
@keyframes wordSearchEmojiCardPop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.15) rotate(0deg); }
    12% { opacity: .98; transform: translate(-50%, -50%) scale(1.25) rotate(12deg); }
    28% { opacity: .95; transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) scale(1) rotate(var(--rotation)); }
    72% { opacity: .8; transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) scale(.95) rotate(var(--rotation)); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) scale(.65) rotate(var(--rotation)); }
}
@media (prefers-reduced-motion: reduce) {
    .word-search-burst-emoji { animation-duration: 1.2s !important; }
}

/* WORD SEARCH COMPLETION POPUP - MOBILE FIX */

.word-search-completion-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    overflow-y: auto;
    box-sizing: border-box;
}

.word-search-completion-modal {
    position: relative;
    isolation: isolate;
    width: min(100%, 520px);
    max-height: calc(100dvh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: clamp(18px, 4vw, 32px);
}

.word-search-emoji-burst {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
}

.word-search-burst-emoji {
    position: absolute;
    left: var(--start-x);
    top: var(--start-y);
    z-index: 6;
    font-size: var(--emoji-size, 30px);
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    animation: wordSearchEmojiBurst 1.8s ease-out forwards;
    animation-delay: var(--emoji-delay, 0s);
}

@keyframes wordSearchEmojiBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    }

    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(15deg);
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(
            calc(-50% + var(--move-x)),
            calc(-50% + var(--move-y))
        ) scale(0.7) rotate(var(--rotation));
    }
}

@media (max-width: 600px) {
    .word-search-completion-overlay {
        align-items: center;
        padding: 10px;
    }

    .word-search-completion-modal {
        width: 100%;
        max-height: calc(100dvh - 20px);
        padding: 22px 16px;
        border-radius: 18px;
    }

    .word-search-completion-modal h2 {
        font-size: clamp(24px, 7vw, 32px);
    }

    .word-search-completion-modal p {
        font-size: 14px;
    }

    .completion-time,
    .completion-ranking {
        margin-top: 12px;
        padding: 12px;
    }

    .completion-registration-button,
    .word-search-reset {
        width: 100%;
        box-sizing: border-box;
    }
}


/* FULL-WIDTH, CONTINUOUS EVENT TICKER */

.event-news-ticker {
    display: block;
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.event-news-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    min-width: max-content;
    gap: 0;
    white-space: nowrap;
    animation: elimEventTicker 24s linear infinite;
    will-change: transform;
}

.event-news-group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    width: max-content;
    white-space: nowrap;
    padding-right: 48px;
    box-sizing: border-box;
}

.event-news-item {
    display: inline-block;
    flex: 0 0 auto;
    white-space: nowrap;
}

@keyframes elimEventTicker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.event-news-ticker:hover .event-news-track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .event-news-track {
        animation: none;
    }
}


.next-event-section {
    width: 100%;
    max-width: 100%;
}

.event-news-ticker {
    left: 0;
    right: 0;
}