/* ==================================
TRUE WORSHIPERS
WORSHIP PAGE
================================== */


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

.worship-hero{

min-height:70vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:120px 20px;

background:

linear-gradient(
rgba(0,0,0,.65),
rgba(5,11,24,.9)
),

url("../images/worship.jpg");

background-size:cover;

background-position:center;

position:relative;

}


.worship-content{

max-width:900px;

}


.worship-content h1{

font-family:'Cinzel',serif;

font-size:65px;

color:#FFD700;

letter-spacing:6px;

margin-bottom:25px;

text-shadow:
0 0 15px rgba(255,215,0,.4);

}


.worship-content p{

font-size:20px;

line-height:2;

}


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

.worship-intro{

padding:90px 20px;

text-align:center;

background:#050B18;

}


.worship-intro h2{

font-size:42px;

color:#FFD700;

margin-bottom:25px;

}


.worship-intro p{

max-width:750px;

margin:15px auto;

font-size:18px;

line-height:2;

}


/* ===============================
WORSHIP ROOM
=============================== */

.worship-room{

padding:90px 20px;

background:#081326;

text-align:center;

}


.worship-room h2{

font-size:42px;

color:#FFD700;

}


.section-intro{

margin:15px auto 45px;

font-size:17px;

opacity:.9;

}


/* MUSIC GRID */

.music-grid{

display:grid;

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

gap:25px;

max-width:1100px;

margin:auto;

}


/* MUSIC CARD */

.music-card{

background:linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.78)
        ),
        url("../images/twcm.jpg");

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

    position: relative;
}


border:1px solid rgba(255,215,0,.35);

border-radius:20px;

padding:30px 20px;

transition:.4s;

}


.music-card:hover{

transform:translateY(-8px);

box-shadow:
0 0 25px rgba(255,215,0,.25);

border-color:#FFD700;

}


.music-icon{

font-size:40px;

margin-bottom:15px;

}


.music-card h3{

color:#FFD700;

font-size:23px;

margin-bottom:12px;

}


.music-card p{

line-height:1.7;

font-size:15px;

margin-bottom:20px;

}


.music-card audio{

width:100%;

}


/* ===============================
WORSHIP MOMENT
=============================== */

.worship-moment{

padding:90px 20px;

text-align:center;

background:#050B18;

}


.worship-moment h2{

font-size:40px;

color:#FFD700;

margin-bottom:20px;

}


.worship-moment > .container > p{

max-width:700px;

margin:0 auto 35px;

line-height:2;

}


.moment-box{

max-width:650px;

margin:auto;

padding:35px;

border:1px solid rgba(255,215,0,.5);

border-radius:20px;

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

}


.moment-box p{

font-family:'Cinzel',serif;

font-size:22px;

font-style:italic;

}


.moment-box h3{

margin-top:15px;

color:#FFD700;

}


/* ===============================
PLAYLISTS
=============================== */

.playlists{

padding:90px 20px;

background:linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.78)
        ),
        url("../images/expl.jpg");

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

    position: relative;
}


text-align:center;

}


.playlists h2{

font-size:42px;

color:#FFD700;

}


.playlist-grid{

display:grid;

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

gap:25px;

max-width:1000px;

margin:45px auto 0;

}


.playlist-card{

padding:35px 25px;

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

border-radius:20px;

border:1px solid rgba(255,215,0,.3);

transition:.4s;

}


.playlist-card:hover{

transform:translateY(-8px);

box-shadow:
0 0 25px rgba(255,215,0,.2);

}


.playlist-icon{

font-size:40px;

margin-bottom:15px;

}


.playlist-card h3{

color:#FFD700;

margin-bottom:15px;

}


.playlist-card p{

line-height:1.8;

}


/* ===============================
TEACHINGS
=============================== */

.worship-teachings{

padding:90px 20px;

text-align:center;

background:linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.78)
        ),
        url("../images/live.jpg");

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

    position: relative;
}


}


.worship-teachings h2{

font-size:42px;

color:#FFD700;

margin-bottom:45px;

}


.teaching-grid{

display:grid;

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

gap:25px;

max-width:950px;

margin:auto;

}


.teaching-card{

padding:35px;

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

border:1px solid rgba(255,215,0,.3);

border-radius:20px;

}


.teaching-card h3{

color:#FFD700;

margin-bottom:15px;

}


.teaching-card p{

line-height:1.8;

margin-bottom:25px;

}


/* ===============================
CALL TO WORSHIP
=============================== */

.worship-call{

padding:100px 20px;

text-align:center;

background:linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.78)
        ),
        url("../images/soo.jpg");

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

    position: relative;
}


linear-gradient(
rgba(0,0,0,.7),
rgba(0,0,0,.85)
),

url("../images/upper-room.jpg");

background-size:cover;

background-position:center;

}


.worship-call h2{

font-size:45px;

color:#FFD700;

margin-bottom:20px;

}


.worship-call p{

font-size:19px;

line-height:1.8;

max-width:700px;

margin:0 auto 30px;

}


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

@media(max-width:768px){

.worship-hero{

min-height:60vh;

padding:100px 20px;

}


.worship-content h1{

font-size:38px;

letter-spacing:3px;

line-height:1.2;

}


.worship-content p{

font-size:16px;

}


.worship-intro h2,
.worship-room h2,
.worship-moment h2,
.playlists h2,
.worship-teachings h2{

font-size:30px;

line-height:1.3;

}


.worship-intro p{

font-size:16px;

}


.music-grid{

grid-template-columns:1fr;

}


.music-card{

padding:25px 18px;

}


.playlist-grid{

grid-template-columns:1fr;

}


.teaching-grid{

grid-template-columns:1fr;

}


.worship-call h2{

font-size:32px;

line-height:1.3;

}


.worship-call p{

font-size:16px;

}


.moment-box{

padding:25px 18px;

}


.moment-box p{

font-size:18px;

}

}


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

@media(max-width:400px){

.worship-content h1{

font-size:32px;

}


.worship-intro h2,
.worship-room h2,
.worship-moment h2,
.playlists h2,
.worship-teachings h2{

font-size:27px;

}


.worship-call h2{

font-size:28px;

}

}