/* =========================================
TRUE WORSHIPERS — MEMBERSHIP PAGE
========================================= */

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
padding: 0;
background: #050505;
color: #ffffff;
font-family: Arial, sans-serif;
}

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

.membership-header {
width: 100%;
padding: 20px 6%;
display: flex;
align-items: center;
justify-content: space-between;

background: rgba(0, 0, 0, 0.92);

border-bottom: 1px solid rgba(212, 175, 55, 0.3);

position: relative;
z-index: 10;

}

.membership-logo {
font-family: Georgia, serif;
font-size: 20px;
font-weight: bold;
letter-spacing: 3px;
color: #ffffff;
}

.membership-logo span {
color: #d4af37;
}

.back-btn {
text-decoration: none;
color: #d4af37;
font-size: 15px;
transition: 0.3s;
}

.back-btn:hover {
color: #ffffff;
}

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

.membership-hero {
min-height: 85vh;

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

text-align: center;

padding: 80px 20px;

position: relative;

background:
    radial-gradient(
        circle at center,
        rgba(212, 175, 55, 0.13),
        transparent 55%
    );

}

.hero-content {
max-width: 850px;
}

.small-title {
color: #d4af37;
font-size: 13px;
letter-spacing: 4px;
margin-bottom: 20px;
}

.hero-content h1 {
font-family: Georgia, serif;

font-size: clamp(45px, 8vw, 90px);

line-height: 1.05;

margin: 0;

}

.hero-content h1 span {
color: #d4af37;
}

.hero-text {
font-family: Georgia, serif;

font-size: 24px;

margin-top: 25px;

color: #eeeeee;

}

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

margin: 20px auto 35px;

line-height: 1.8;

color: #bbbbbb;

font-size: 16px;

}

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

.hero-buttons {
display: flex;

justify-content: center;

gap: 15px;

flex-wrap: wrap;

}

.gold-btn,
.outline-btn {
display: inline-block;

padding: 15px 28px;

text-decoration: none;

font-weight: bold;

letter-spacing: 1px;

transition: 0.3s;

}

.gold-btn {
background: #d4af37;

color: #000000;

border: 1px solid #d4af37;

}

.gold-btn:hover {
background: #ffffff;

border-color: #ffffff;

transform: translateY(-3px);

}

.outline-btn {
color: #d4af37;

border: 1px solid #d4af37;

background: transparent;

}

.outline-btn:hover {
background: #d4af37;

color: #000000;

transform: translateY(-3px);

}

/* =========================================
WHY SECTION
========================================= */

.why-section {
padding: 100px 7%;

text-align: center;

background: #090909;

}

.section-label {
color: #d4af37;

font-size: 12px;

letter-spacing: 4px;

margin-bottom: 15px;

}

.why-section h2,
.join-section h2,
.login-section h2 {
font-family: Georgia, serif;

font-size: clamp(30px, 5vw, 50px);

margin: 0 0 20px;

}

.section-intro {
max-width: 650px;

margin: 0 auto 55px;

color: #aaaaaa;

line-height: 1.7;

}

/* =========================================
BENEFIT CARDS
========================================= */

.benefits {
max-width: 1100px;

margin: auto;

display: grid;

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

gap: 20px;

}

.benefit-card {
padding: 35px 20px;

background: #111111;

border: 1px solid rgba(212, 175, 55, 0.2);

transition: 0.3s;

}

.benefit-card:hover {
transform: translateY(-8px);

border-color: #d4af37;

box-shadow:
    0 10px 35px rgba(212, 175, 55, 0.1);

}

.icon {
font-size: 35px;

margin-bottom: 18px;

}

.benefit-card h3 {
color: #d4af37;

font-size: 16px;

letter-spacing: 1px;

}

.benefit-card p {
color: #999999;

font-size: 14px;

line-height: 1.7;

}

/* =========================================
JOIN SECTION
========================================= */

.join-section {
padding: 100px 20px;

text-align: center;

background:
    radial-gradient(
        circle,
        rgba(212, 175, 55, 0.1),
        transparent 60%
    );

}

.join-box {
max-width: 800px;

margin: auto;

padding: 60px 25px;

border: 1px solid rgba(212, 175, 55, 0.3);

background: rgba(15, 15, 15, 0.8);

}

.join-box p {
color: #aaaaaa;

line-height: 1.7;

margin-bottom: 30px;

}

/* =========================================
LOGIN
========================================= */

.login-section {
padding: 80px 20px;

text-align: center;

background: #080808;

}

.login-section p {
color: #999999;

margin-bottom: 30px;

}

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

footer {
padding: 40px 20px;

text-align: center;

background: #000000;

border-top: 1px solid rgba(212, 175, 55, 0.2);

color: #777777;

font-size: 13px;

line-height: 1.8;

}

footer em {
color: #aaaaaa;
}

footer p:last-child {
color: #d4af37;
}

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

@media (max-width: 800px) {

.membership-header {
    padding: 18px 5%;
}

.membership-logo {
    font-size: 15px;
    letter-spacing: 2px;
}

.membership-hero {
    min-height: 80vh;
    padding: 70px 20px;
}

.hero-content h1 {
    font-size: 48px;
}

.hero-text {
    font-size: 20px;
}

.benefits {
    grid-template-columns:
        repeat(2, 1fr);
}

}

@media (max-width: 500px) {

.membership-header {
    flex-direction: column;
    gap: 12px;
}

.hero-content h1 {
    font-size: 40px;
}

.hero-description {
    font-size: 14px;
}

.benefits {
    grid-template-columns: 1fr;
}

.gold-btn,
.outline-btn {
    width: 100%;
    max-width: 300px;
}

}