/* ==========================
        RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    font-family:"Vazirmatn",sans-serif;

    background:#050510;

    color:white;

    overflow-x:hidden;

}



/* ==========================
        STARS
========================== */


#stars{

    position:fixed;

    inset:0;

    z-index:-1;

    background:

    radial-gradient(circle,rgba(255,255,255,.8) 1px,transparent 1px);

    background-size:100px 100px;

    animation:stars 80s linear infinite;

}


@keyframes stars{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-500px);

    }

}





/* ==========================
        LOADER
========================== */


#loader{

    position:fixed;

    inset:0;

    background:#050510;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:1000;

    transition:1s;

}


#loader h1{

    font-size:60px;

    color:#ff5b91;

    text-align:center;

}


#loader p{

    text-align:center;

    margin-top:20px;

    font-size:22px;

}






/* ==========================
        MUSIC
========================== */


#musicBtn{


position:fixed;

left:30px;

bottom:30px;

width:60px;

height:60px;

border-radius:50%;

border:none;

background:#ff4d88;

color:white;

font-size:25px;

cursor:pointer;

z-index:20;

box-shadow:0 0 30px #ff4d88;

}






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


.hero{

height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:30px;

}



.hero h3{

font-size:30px;

color:#ff86ae;

letter-spacing:5px;

}



.hero h1{

font-size:90px;

margin:30px 0;

}



.hero p{

font-size:28px;

line-height:2;

color:#ddd;

margin-bottom:50px;

}



.hero a{

display:inline-block;

padding:18px 45px;

border-radius:50px;

background:linear-gradient(45deg,#ff005d,#ff8ab5);

color:white;

text-decoration:none;

font-size:20px;

transition:.4s;

}



.hero a:hover{

transform:translateY(-8px);

box-shadow:0 15px 40px rgba(255,0,100,.4);

}







/* ==========================
        COUNTER
========================== */


#counter{

min-height:100vh;

padding:100px 8%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

}



#counter h2{

font-size:55px;

margin-bottom:70px;

}



.counter-box{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}



.card{


width:230px;

height:230px;

border-radius:30px;

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

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

backdrop-filter:blur(15px);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

transition:.5s;


}



.card:hover{

transform:translateY(-15px);

box-shadow:0 0 40px rgba(255,80,140,.3);

}



.card h1{

font-size:70px;

color:#ff6b9d;

}



.card span{

font-size:22px;

color:#ddd;

}







/* ==========================
        GALLERY
========================== */


.gallery{

padding:120px 8%;

text-align:center;

}



.gallery h2{

font-size:55px;

margin-bottom:60px;

}



.gallery-box{

display:grid;

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

gap:30px;

}



.gallery-box img{


width:100%;

height:350px;

object-fit:cover;

border-radius:25px;

transition:.5s;

}



.gallery-box img:hover{

transform:scale(1.05) rotate(2deg);

}


@media(max-width:768px){
    .gallery-box{
        display: block
    }
}




/* ==========================
        LETTER
========================== */


.letter{

min-height:80vh;

display:flex;

align-items:center;

justify-content:center;

padding:50px;

}



.letter div{

max-width:800px;

padding:50px;

border-radius:35px;

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

backdrop-filter:blur(20px);

text-align:center;

}



.letter h2{

font-size:45px;

margin-bottom:30px;

}



.letter p{

font-size:24px;

line-height:2.5;

}








/* ==========================
        END
========================== */


.end{

height:100vh;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;
}