body{
font-family:'Poppins',sans-serif;
background:#f4f6fb;
}


/* HERO */

.member-hero{

height:70vh;

background:url('../../assets/image/oss.jpeg') center/cover no-repeat;

position:relative;

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

}

.hero-overlay{

position:absolute;
width:100%;
height:100%;

background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.6));

}

.hero-text{

position:relative;
color:white;
text-align:center;
max-width:700px;

}

.hero-text h1{

font-size:55px;
font-weight:700;
margin-bottom:15px;

}

.hero-text p{

font-size:18px;
margin-bottom:25px;

}

.join-btn{

background:#ff7a00;
color:white;
padding:12px 30px;
border-radius:30px;
text-decoration:none;
font-weight:500;

}

.join-btn:hover{

background:#e66d00;

}



/* BENEFITS */

.benefits{

padding:80px 0;
background:white;

}

.section-title{

text-align:center;
margin-bottom:50px;
font-size:32px;

}

.benefit-grid{

display:grid;

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

gap:25px;

}

.benefit-card{

background:#f8f9fc;

padding:30px;

border-radius:10px;

text-align:center;

transition:0.3s;

}

.benefit-card i{

font-size:40px;

color:#ff7a00;

margin-bottom:15px;

}

.benefit-card:hover{

transform:translateY(-8px);

box-shadow:0 10px 20px rgba(0,0,0,.1);

}



/* MEMBERSHIP FEE */

.membership-fee{

padding:70px;

background:#fff3e8;

text-align:center;

}

.fee-card{

background:white;

display:inline-block;

padding:40px 70px;

border-radius:12px;

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

}

.fee-card h1{

font-size:60px;

color:#ff7a00;

}



/* FORM */

.form-section{

padding:90px 0;

}

.form-container{

max-width:650px;

margin:auto;

background:white;

padding:40px;

border-radius:12px;

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

}

.form-container h2{

text-align:center;

margin-bottom:25px;

}

form input,
form select,
form textarea{

width:100%;

padding:12px;

margin-bottom:15px;

border:1px solid #ddd;

border-radius:6px;

font-size:14px;

}

.form-row{

display:flex;

gap:15px;

}

form button{

width:100%;

padding:13px;

background:#ff7a00;

border:none;

color:white;

font-size:16px;

border-radius:6px;

cursor:pointer;

}

form button:hover{

background:#e66d00;

}

.success-msg{

background:#e6ffed;

padding:10px;

margin-bottom:15px;

border-radius:5px;

color:#2e7d32;

text-align:center;

}



/* MOBILE */

@media(max-width:768px){

.hero-text h1{

font-size:35px;

}

.form-row{

flex-direction:column;

}

}