@font-face {
    font-family: Vazirmatn;
    src: url("fonts/Vazirmatn-Regular.ttf");
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Vazirmatn, sans-serif;
}


body{
    background:#101522;
    color:white;
}


/* Header */

header{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 70px;
    background:#161d2f;
    position:sticky;
    top:0;
    z-index:10;

}


.logo{

    font-size:28px;
    font-weight:bold;
    color:#4da6ff;

}


nav{

    display:flex;
    gap:20px;

}


nav a{

    color:white;
    text-decoration:none;
    transition:.3s;

}


nav a:hover{

    color:#4da6ff;

}


/* Hero */


.hero{

    min-height:90vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:40px 20px;

    background:linear-gradient(135deg,#0b5cff,#4b1eff);

}


.hero h1{

    font-size:60px;
    margin-bottom:20px;

}


.hero p{

    font-size:22px;
    max-width:700px;
    margin:auto;
    line-height:40px;

}


.hero button{

    margin-top:40px;
    padding:15px 40px;
    font-size:18px;
    background:white;
    color:#0b5cff;
    border:none;
    border-radius:10px;
    cursor:pointer;
    transition:.3s;

}


.hero button:hover{

    transform:scale(1.08);

}



/* Sections */


section{

    padding:80px 40px;

}


section h2{

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

}



/* Cards */


.cards{

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

}


.card{

    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    padding:35px;
    border-radius:20px;
    transition:.4s;

}


.card:hover{

    transform:translateY(-10px);

}


.card h3{

    margin-bottom:15px;

}



/* About */


#about{

    text-align:center;
    font-size:22px;
    line-height:45px;

}



/* Contact */


#contact{

    display:flex;
    flex-direction:column;
    align-items:center;

}


input,textarea{

    width:500px;
    max-width:90%;
    padding:15px;
    margin:10px;
    border:none;
    border-radius:10px;

}


textarea{

    height:150px;

}


#contact button{

    padding:15px 50px;
    margin-top:20px;
    background:#0b5cff;
    border:none;
    border-radius:10px;
    color:white;
    cursor:pointer;

}



/* Footer */


footer{

    background:#161d2f;
    text-align:center;
    padding:30px;

}



/* Mobile */

@media(max-width:768px){


header{

    flex-direction:column;
    padding:20px;

}


.logo{

    margin-bottom:20px;

}


nav{

    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;

}


nav a{

    margin:5px;
    font-size:14px;

}



.hero{

    min-height:80vh;

}


.hero h1{

    font-size:35px;

}


.hero p{

    font-size:17px;
    line-height:32px;

}



section{

    padding:50px 20px;

}


section h2{

    font-size:30px;

}


.cards{

    grid-template-columns:1fr;

}



#about{

    font-size:18px;
    line-height:35px;

}



input,textarea{

    width:100%;

}


}