*{box-sizing:border-box}body{margin:0;color:#fff;font-family:Arial,sans-serif;background:#080a0e}.background{position:fixed;inset:0;z-index:-1;background:linear-gradient(#0008,#000d),url("bg.png") center/cover fixed}.glass{background:#ffffff12;border:1px solid #ffffff25;backdrop-filter:blur(20px);box-shadow:0 20px 60px #0008}header{position:sticky;top:15px;width:92%;margin:15px auto;padding:15px 20px;border-radius:20px;display:flex;justify-content:space-between;align-items:center}header h2{margin:0}nav a{color:#fff;text-decoration:none;margin-left:15px}.hero{min-height:75vh;width:92%;max-width:1100px;margin:auto;display:grid;place-items:center}.hero-box{text-align:center;padding:60px 30px;border-radius:30px;width:100%}.hero h1{font-size:clamp(38px,6vw,70px)}.gold{color:#f2b53c;font-weight:bold;letter-spacing:3px}.button{display:inline-block;padding:13px 22px;background:#e2a62d;color:#111;border:0;border-radius:10px;font-weight:bold;cursor:pointer;text-decoration:none;margin-top:10px}.section{width:92%;max-width:1100px;margin:auto;padding:65px 0}.box{padding:40px;border-radius:25px}.heading{text-align:center}.tools{padding:15px;border-radius:18px;display:grid;grid-template-columns:1fr 180px 180px 100px;gap:10px}.tools input,.tools select,.tools button,.admin-box input{width:100%;padding:14px;border-radius:10px;border:1px solid #ffffff25;background:#0007;color:#fff}.sermon-card{display:grid;grid-template-columns:42% 1fr;gap:25px;padding:15px;border-radius:22px;margin-top:22px}.sermon-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:15px}.sermon-card h2{line-height:1.4}.sermon-card p{color:#bbb}.sermon-card audio{width:100%}.load{display:block;margin:25px auto;padding:13px 25px;border-radius:30px;border:1px solid #fff3;background:#fff2;color:#fff}.admin-page{width:92%;max-width:900px;margin:40px auto}.admin-box{padding:30px;border-radius:25px}.admin-box label{display:block;margin-top:18px;margin-bottom:7px}.admin-top{display:flex;justify-content:space-between}.admin-top button,.admin-sermon button{padding:10px;border:0;border-radius:8px;background:#ffffff18;color:#fff}.admin-sermon{display:grid;grid-template-columns:100px 1fr auto;gap:15px;align-items:center;padding:12px;border-radius:15px;margin-top:12px}.admin-sermon img{width:100px;height:70px;object-fit:cover;border-radius:10px}.admin-sermon button{background:#8b2828}#message,#loginMessage{color:#f2b53c;min-height:20px}@media(max-width:750px){nav{display:none}.tools{grid-template-columns:1fr}.sermon-card{grid-template-columns:1fr}.admin-sermon{grid-template-columns:70px 1fr}.admin-sermon img{width:70px;height:55px}}/* ===============================
   UPCOMING EVENTS
   =============================== */

.events-section {
    padding: 80px 20px;
    width: 100%;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.section-title p {
    font-size: 13px;
    letter-spacing: 3px;
    margin-bottom: 8px;
}

.section-title h2 {
    font-size: 36px;
    margin: 0;
}

.events-container {
    max-width: 1100px;
    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 25px;
}

.event-card {
    overflow: hidden;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.10);

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

    border: 1px solid rgba(255, 255, 255, 0.20);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.20);

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

.event-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.30);
}

.event-image {

    width: 100%;

    height: 200px;

    object-fit: cover;

    display: block;
}

.event-content {

    padding: 25px;
}

.event-content h3 {

    font-size: 24px;

    margin:
        10px 0 15px;
}

.event-date {

    font-weight: bold;

    margin: 0 0 8px;
}

.event-time,
.event-location {

    margin: 7px 0;
}

.event-description {

    line-height: 1.6;

    margin-top: 15px;

    opacity: 0.9;
}


/* Mobile */

@media (max-width: 600px) {

    .events-section {

        padding:
            60px 15px;
    }

    .section-title h2 {

        font-size: 30px;
    }

    .events-container {

        grid-template-columns: 1fr;
    }

    .event-image {

        height: 180px;
    }
}
/* =========================================
   GALLERY
   ========================================= */

.gallery-section {

    padding:
        80px 20px;

}


.gallery-section .section-title {

    text-align:
        center;

    margin-bottom:
        40px;

}


.gallery-container {

    max-width:
        1200px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                280px,
                1fr
            )
        );

    gap:
        25px;

}


.gallery-card {

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

    backdrop-filter:
        blur(15px);

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

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.20
        );

    box-shadow:
        0 10px 30px
        rgba(
            0,
            0,
            0,
            0.20
        );

    transition:
        transform
        0.3s ease;

}


.gallery-card:hover {

    transform:
        translateY(
            -5px
        );

}


.gallery-photo img {

    width:
        100%;

    height:
        250px;

    object-fit:
        cover;

    display:
        block;

}


.gallery-video video {

    width:
        100%;

    height:
        250px;

    object-fit:
        cover;

    display:
        block;

}


.gallery-content {

    padding:
        20px;

}


.gallery-content h3 {

    margin:
        0 0 10px;

    font-size:
        21px;

}


.gallery-content p {

    margin:
        6px 0;

    line-height:
        1.5;

    opacity:
        0.85;

}


.gallery-more {

    display:
        block;

    margin:
        40px auto 0;

    padding:
        12px 30px;

    border:
        none;

    border-radius:
        30px;

    cursor:
        pointer;

    font-size:
        16px;

    background:
        rgba(
            255,
            255,
            255,
            0.15
        );

    backdrop-filter:
        blur(10px);

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

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.25
        );

}


.gallery-more:hover {

    transform:
        translateY(
            -2px
        );

}


/* Mobile */

@media (
    max-width: 600px
) {

    .gallery-section {

        padding:
            60px 15px;

    }


    .gallery-container {

        grid-template-columns:
            1fr;

    }


    .gallery-photo img,
    .gallery-video video {

        height:
            220px;

    }

}
/* =====================================================
   SERMON GLASS AUDIO PLAYER
   ===================================================== */

.sermon-audio {
    width: 100%;
    height: 46px;
    margin-top: 14px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.06) !important;

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

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 25px rgba(0, 0, 0, 0.15);

    overflow: hidden;

    color-scheme: dark;
}


/* Chrome / Edge / Android / Safari */

.sermon-audio::-webkit-media-controls-enclosure {
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 14px;
}


.sermon-audio::-webkit-media-controls-panel {
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 14px;
}


.sermon-audio::-webkit-media-controls-play-button {
    filter: brightness(1.8);
}


.sermon-audio::-webkit-media-controls-timeline {
    filter: brightness(1.4);
}


.sermon-audio::-webkit-media-controls-current-time-display,
.sermon-audio::-webkit-media-controls-time-remaining-display {
    color: rgba(255, 255, 255, 0.85);
}


.sermon-audio::-webkit-media-controls-volume-slider {
    filter: brightness(1.3);
}


/* Hover */

.sermon-audio:hover {
    background: rgba(255, 255, 255, 0.09) !important;

    border-color:
        rgba(255, 255, 255, 0.25);
}


/* Mobile */

@media (max-width: 600px) {

    .sermon-audio {
        height: 44px;
        margin-top: 12px;
        border-radius: 12px;
    }

}