@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;900&display=swap');


*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Vazirmatn',sans-serif;

}


body{

    background:#080808;
    color:#fff;

}



/* Main */

.club{

    min-height:100vh;

    padding:100px 7%;

    background:

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

    url("../images/club-bg.jpg");

    background-size:cover;

    background-position:center;

}



/* Title */

.club-title{

    text-align:center;

    max-width:800px;

    margin:auto;

    margin-bottom:60px;

}


.club-title span{

    color:#D4AF37;

    letter-spacing:5px;

    font-size:14px;

}


.club-title h1{

    margin-top:20px;

    font-size:55px;

}


.club-title strong{

    color:#D4AF37;

}


.club-title p{

    margin-top:20px;

    color:#bbb;

    line-height:2;

    font-size:17px;

}





/* Member Card */


.member-card{


    max-width:500px;

    margin:auto;


    padding:45px;


    text-align:center;


    background:

    linear-gradient(
        145deg,
        rgba(212,175,55,.25),
        rgba(255,255,255,.06)
    );


    border:1px solid rgba(255,255,255,.15);


    border-radius:35px;


    backdrop-filter:blur(20px);


    box-shadow:

    0 25px 60px rgba(0,0,0,.5);


}




.member-logo{


    width:100px;

    height:100px;

    margin:auto;


    display:flex;

    justify-content:center;

    align-items:center;


    border-radius:50%;


    background:#D4AF37;


    color:#111;


    font-size:55px;


    font-weight:900;


    box-shadow:

    0 0 40px rgba(212,175,55,.4);


}



.member-card h2{

    margin-top:25px;

    font-size:30px;

}



.member-level{


    color:#D4AF37;

    letter-spacing:4px;

    margin-top:10px;

}




.score{

    margin-top:35px;

}



.score h3{

    color:#aaa;

}



.score span{


    display:block;


    margin-top:10px;


    font-size:65px;


    font-weight:900;


    color:#D4AF37;


}





/* Features */


.club-features{


    margin-top:60px;


    display:grid;


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


    gap:30px;


}



.club-box{


    padding:35px;


    text-align:center;


    border-radius:30px;


    background:

    rgba(255,255,255,.06);


    border:1px solid rgba(255,255,255,.12);


    backdrop-filter:blur(18px);


    transition:.4s;


}




.club-box:hover{


    transform:translateY(-12px);


    border-color:#D4AF37;


    box-shadow:

    0 20px 50px rgba(212,175,55,.2);


}




.club-box i{


    font-size:40px;


    color:#D4AF37;


}



.club-box h3{


    margin:20px 0 10px;


    font-size:22px;


}



.club-box p{


    color:#bbb;


    line-height:2;


}






/* Button */


.club-action{


    text-align:center;


    margin-top:60px;


}



.club-action a{


    display:inline-block;


    padding:18px 55px;


    border-radius:50px;


    background:#D4AF37;


    color:#111;


    font-weight:bold;


    text-decoration:none;


    transition:.35s;


}




.club-action a:hover{


    transform:translateY(-6px);


    box-shadow:

    0 20px 40px rgba(212,175,55,.3);


}





/* Mobile */


@media(max-width:768px){


.club{

    padding:70px 20px;

}



.club-title h1{

    font-size:35px;

}



.club-title p{

    font-size:15px;

}



.member-card{

    padding:30px 20px;

}



.score span{

    font-size:45px;

}



.club-features{

    grid-template-columns:1fr;

}



.club-box{

    padding:25px;

}



.club-action a{

    width:90%;

}


}