@media (max-width: 800px) {

    .header {
        position: sticky;
        top: 0;
        z-index: 10000;
    }

    .nav-container {
        min-height: 64px !important;
        padding: 7px 0 !important;
    }

    .brand {
        max-width: calc(100% - 58px) !important;
    }

    .brand-main {
        font-size: 21px !important;
        line-height: 1 !important;
    }

    .brand-sub {
        font-size: 10px !important;
        margin-top: 2px !important;
    }

    .brand-verse {
        font-size: 8px !important;
        margin-top: 1px !important;
        letter-spacing: 1px !important;
    }

    .menu-toggle {
        display: block !important;
        width: 42px !important;
        height: 40px !important;
        z-index: 10002;
    }

    .nav {
        top: 100% !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;

        max-height: 0 !important;
        overflow: hidden !important;

        padding: 0 12px !important;

        border: 1px solid rgba(246, 199, 91, .22) !important;
        border-top: 0 !important;

        border-radius: 0 0 14px 14px !important;

        background: rgba(20, 7, 3, .98) !important;

        box-shadow: 0 18px 40px rgba(0, 0, 0, .55) !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transform: translateY(-8px) !important;

        pointer-events: none !important;

        transition:
            max-height .3s ease,
            padding .3s ease,
            opacity .2s ease,
            transform .2s ease,
            visibility .2s ease !important;
    }

    .nav.open {
        max-height: calc(100vh - 74px) !important;

        overflow-y: auto !important;

        padding: 10px 12px 14px !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;

        pointer-events: auto !important;
    }

    .nav a {
        min-height: 48px !important;

        padding: 12px 10px !important;

        font-size: 17px !important;

        border-bottom:
            1px solid rgba(255, 255, 255, .08) !important;
    }

    .nav .contact-link {
        margin-top: 6px !important;
        border-bottom: 0 !important;
        text-align: center !important;
    }


    

    .hero {
        min-height: 720px !important;
        background: #241006 !important;
    }

    .hero-bg {
        position: absolute !important;
        inset: 0 !important;

        background-image:
            url("hero-fire.jpg") !important;

        background-size: cover !important;

        background-position: 80% center !important;

        transform: scale(1.02) !important;
    }

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(18, 5, 1, .35) 0%,
                rgba(18, 5, 1, .58) 42%,
                rgba(18, 5, 1, .90) 100%
            ) !important;
    }

    .hero-content {
        min-height: 720px !important;

        display: flex !important;
        flex-direction: column !important;

        justify-content: flex-start !important;

        padding-top: 28px !important;
    }

    .hero-copy {
        width: 100% !important;

        padding: 0 !important;

        text-align: center !important;

        z-index: 5 !important;
    }

    .eyebrow {
        font-size: clamp(34px, 10vw, 48px) !important;

        line-height: .95 !important;

        text-shadow:
            0 3px 10px rgba(0, 0, 0, .8) !important;
    }

    .ministry-line {
        font-size: 15px !important;
        margin-top: 8px !important;
    }

    .hero h1 {
        font-size: clamp(27px, 8vw, 38px) !important;
        margin-top: 9px !important;
    }

    .verse {
        font-size: 14px !important;
        line-height: 1.4 !important;

        margin: 16px auto 0 !important;

        max-width: 520px !important;
    }

    .reference {
        font-size: 16px !important;
        margin-top: 8px !important;
    }

    .hero-actions {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 30px !important;

    margin-top: 100px !important;
}

    .hero-actions .btn {
        width: 100% !important;

        min-height: 49px !important;

        padding: 10px 14px !important;

        font-size: 16px !important;
    }


    

    .hero-badge {
        display: flex !important;

        position: absolute !important;

        z-index: 6 !important;

        left: 50% !important;
        bottom: 36px !important;

        transform: translateX(-50%) !important;

        width: min(94%, 420px) !important;

        margin: 0 !important;

        padding: 9px 14px !important;

        border:
            1px solid rgba(246, 199, 91, .5) !important;

        border-radius: 999px !important;

        background:
            rgba(22, 7, 2, .58) !important;

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

    .hero-badge span {
        font-size: 16px !important;
        letter-spacing: 2.5px !important;
    }

    .hero-badge small {
        font-size: 11px !important;
        letter-spacing: 1px !important;
    }

    .hero-badge b {
        font-size: 12px !important;
    }


    

    .section {
        padding: 58px 0 !important;
    }

    .section-heading {
        margin-bottom: 30px !important;
    }

    .section-heading h2,
    .leaders-header h2 {
        font-size: 32px !important;
        line-height: 1.08 !important;
    }

    .section-heading p,
    .leaders-header p {
        font-size: 15px !important;
    }

    .about-main {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .worship-image {
        position: static !important;
    }

    .worship-image img {
        height: 235px !important;

        margin-top: 8px !important;

        border-radius: 18px !important;
    }

    .about-content > h3 {
        font-size: 24px !important;
        line-height: 1.15 !important;
    }

    .about-content p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .leaders-grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }

    .leader-card {
        min-width: 0 !important;
    }

    .leader-image {
        width: 100% !important;

        
        height: 300px !important;

        aspect-ratio: auto !important;

        overflow: hidden !important;
    }

    .leader-image img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
    }

    .leader-info {
        padding: 16px 13px !important;
    }

    .leader-role {
        font-size: 11px !important;
    }

    .leader-info h3 {
        font-size: 22px !important;
        line-height: 1.1 !important;
    }

    .leader-info p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }


    

    .team-general {
        grid-template-columns: 1fr !important;

        gap: 20px !important;

        padding: 18px !important;
    }

    .team-general-content h3 {
        font-size: 27px !important;
    }

    .team-general-content p {
        font-size: 14px !important;
    }


    

    .ministries-grid {
        grid-template-columns:
            1fr 1fr !important;

        gap: 12px !important;
    }

    .ministry-card {
        padding: 24px 18px !important;
    }


    

    .schedule-grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }

    .schedule-card {
        min-width: 0 !important;

        padding: 20px 14px !important;
    }


    

    .contact-grid {
        grid-template-columns:
            1fr 1fr !important;

        gap: 12px !important;
    }


    

    .gallery-slider {
        gap: 7px !important;
    }

    .gallery-track {
        height: 300px !important;

        border-radius: 14px !important;
    }

    .gallery-slide {
        cursor: zoom-in !important;
    }

    .gallery-btn {
        flex: 0 0 38px !important;

        width: 38px !important;
        height: 38px !important;
    }

    .gallery-counter {
        font-size: 13px !important;
    }


    

    .lightbox {
        padding: 12px !important;
    }

    .lightbox-image {
        max-width: 96vw !important;
        max-height: 84vh !important;
    }

    .lightbox-close {
        top: 12px !important;
        right: 12px !important;

        width: 42px !important;
        height: 42px !important;
    }

    .lightbox-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .lightbox-prev {
        left: 9px !important;
    }

    .lightbox-next {
        right: 9px !important;
    }


    

    .location-grid {
        grid-template-columns: 1fr !important;

        gap: 18px !important;
    }

    .map-wrap iframe {
        min-height: 320px !important;
    }


    

    .footer-main {
        grid-template-columns:
            1fr 1fr !important;

        gap: 35px 25px !important;

        padding-bottom: 35px !important;
    }

    .footer-brand {
        grid-column: 1 / -1 !important;
    }

    .footer-main h2 {
        font-size: 28px !important;
    }

    .footer-main h3 {
        font-size: 21px !important;
    }

    .footer-map iframe {
        height: 280px !important;
    }

    .footer-bottom {
        flex-direction: column !important;

        text-align: center !important;
    }

}




@media (max-width: 500px) {

    
    .hero-actions {
    margin-top: 85px !important;
}

    .container {
        width: calc(100% - 20px) !important;
    }


    

    .nav-container {
        min-height: 61px !important;
    }

    .brand-main {
        font-size: 18px !important;
    }

    .brand-sub {
        font-size: 9px !important;
    }

    .brand-verse {
        font-size: 7px !important;
    }

    .menu-toggle {
        width: 40px !important;
        height: 38px !important;
    }


    

    .hero {
        min-height: 690px !important;
    }

    .hero-content {
        min-height: 690px !important;

        padding-top: 23px !important;
    }

    .hero-copy {
        padding-inline: 2px !important;
    }

    .eyebrow {
        font-size: 31px !important;
    }

    .ministry-line {
        font-size: 14px !important;
    }

    .hero h1 {
        font-size: 26px !important;
    }

    .verse {
        font-size: 13px !important;
    }

    .hero-actions .btn {
        font-size: 15px !important;
    }

    .hero-badge {
        bottom: 18px !important;

        padding: 7px 11px !important;
    }

    .hero-badge span {
        font-size: 14px !important;
    }

    .hero-badge small {
        font-size: 10px !important;
    }

    .hero-badge b {
        font-size: 11px !important;
    }


    

    .worship-image img {
        height: 205px !important;
    }


    

    .leaders-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;
    }

    .leader-image {
        height: 250px !important;

        aspect-ratio: auto !important;
    }

    .leader-info {
        padding: 12px 10px !important;
    }

    .leader-role {
        font-size: 10px !important;

        letter-spacing: .6px !important;

        margin-bottom: 5px !important;
    }

    .leader-info h3 {
        font-size: 20px !important;

        line-height: 1.1 !important;

        margin-bottom: 7px !important;
    }

    .leader-info p {
        font-size: 12px !important;

        line-height: 1.4 !important;
    }


    

    .ministries-grid {
        grid-template-columns:
            1fr 1fr !important;

        gap: 10px !important;
    }

    .ministry-card {
        padding: 18px 11px !important;
    }


    

    .schedule-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;
    }

    .schedule-card {
        padding: 18px 10px !important;
    }


    

    .contact-grid {
        grid-template-columns:
            1fr !important;

        gap: 12px !important;
    }


    

    .gallery-track {
        height: 245px !important;
    }

    .gallery-btn {
        flex: 0 0 36px !important;

        width: 36px !important;
        height: 36px !important;
    }


    

    .map-wrap iframe {
        min-height: 280px !important;
    }


    

    .site-footer {
        padding-top: 50px !important;
    }

    .footer-main {
        grid-template-columns: 1fr !important;

        gap: 32px !important;
    }

    .footer-brand {
        grid-column: auto !important;
    }

    .footer-map {
        width: 94% !important;

        margin-bottom: 30px !important;

        border-radius: 12px !important;
    }

    .footer-map iframe {
        height: 250px !important;
    }

    .footer-bottom {
        padding: 20px 5% !important;

        font-size: 12px !important;
    }

}




@media (min-width: 801px) and (max-width: 1150px) {

    .nav-container {
        min-height: 88px !important;
    }

    .brand {
        width: 255px !important;
    }

    .brand-main {
        font-size: 30px !important;
    }

    .brand-sub {
        font-size: 13px !important;
    }

    .brand-verse {
        font-size: 9px !important;
    }

    .nav {
        gap: 14px !important;
    }

    .nav a {
        font-size: 15px !important;
    }

}




@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition: none !important;

        animation: none !important;
    }

}




@media (max-width: 360px) {

    .leaders-grid {
        gap: 8px !important;
    }

    .leader-image {
        height: 220px !important;
    }

    .leader-info {
        padding: 10px 8px !important;
    }

    .leader-role {
        font-size: 9px !important;
    }

    .leader-info h3 {
        font-size: 18px !important;
    }

    .leader-info p {
        font-size: 11px !important;
    }

    .schedule-grid {
        gap: 8px !important;
    }

    .schedule-card {
        padding: 15px 8px !important;
    }

    .ministries-grid {
        gap: 8px !important;
    }

}