@font-face {

font-family: 'Vazir';

src: url('fonts/Vazir.ttf') format('truetype');

font-weight: normal;
font-style: normal;

}

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


body{


font-family:'Vazir',sans-serif;
direction:rtl;

}


html,
body{

width:100%;
height:100%;
overflow-x:hidden;

}

.hero{

height:100vh;
width:100%;

background-image:url("images/laptop.jpg");

background-size:110%;
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;

position:relative;

}




.navbar{

height:90px;

display:flex;

align-items:center;

justify-content:flex-end;

gap:40px;

padding:0 5%;

position:relative;

z-index:2;

}


nav{

display:flex;

gap:40px;

margin-right:0;

}

nav a{

color:white;

text-decoration:none;

font-weight:600;

font-size:20px;

}




.buttons{

display:flex;

gap:15px;

order:3;

}


.login,
.download{

padding:14px 65px;

border-radius:40px;

text-decoration:none;

cursor:pointer;

transition:.3s;

}




.login{

font-size:20px;
background:white;

color:#333;


}



.download{


background:#ef5350;

color:white;


}

.hero-content{

position:absolute;

top:70%;

left:50%;

transform:translate(-50%,-50%);

width:100%;

max-width:1100px;

text-align:center;

z-index:5;

}



.hero-content h1{

font-size:90px;

font-weight:700;

margin-bottom:20px;

color:#fff;

}



.hero-content p{

font-size:22px;

line-height:2;

font-weight:500;

width:100%;

max-width:1200px;

margin:auto;

white-space:nowrap;

  color:#fff;

}





.big{


display:inline-block;

margin-top:30px;

font-size:20px;


}




.about{


height:500px;


display:flex;

flex-direction:column;

justify-content:center;

align-items:center;


text-align:center;


padding:40px;



}



.about h2{


font-size:40px;

margin-bottom:40px;


}



.about p{


max-width:900px;

font-size:20px;

line-height:2.2;

margin:10px;


}

.hero::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.30);

pointer-events:none;

z-index:1;

}

.download:hover{

transform:translateY(-3px);

}

.parallax-section{

height:700px;

background-image:url("images/parallax2.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

background-attachment:fixed;

position:relative;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}

.parallax-section::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.35);

}

.parallax-content{

position:relative;

z-index:2;

color:white;

max-width:1000px;

padding:20px;

}

.parallax-content h2{

font-size:50px;

margin-bottom:30px;

}

.parallax-content p{

font-size:28px;

line-height:2;

}


.parallax-section{

height:800px;

background-image:url("images/company.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

background-attachment:fixed;

position:relative;

overflow:hidden;

}

.parallax-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.45);

}


.parallax-container{

      display:flex;
    flex-direction:row-reverse;
  
color:white;
  
text-shadow:0 2px 10px rgba(0,0,0,.8);

position:relative;

z-index:2;

height:100%;

display:flex;

justify-content:space-between;

align-items:flex-start;
padding-top:180px;

padding:0 8%;
  
align-items:flex-start;

padding-top:140px;

}

.parallax-container{

color:white;
text-shadow:0 2px 10px rgba(0,0,0,.8);

padding:0 8%;

}

.parallax-center{

width:42%;

text-align:center;
margin-top:370px;


}

.parallax-center h2{

font-size:32px;

font-weight:700;

line-height:1.5;

color:white;

}

.parallax-right{

width:30%;

display:flex;

flex-direction:column;

gap:20px;

text-align:right;

}

.parallax-right h3{

font-size:19px;

font-weight:700;

color:white;

margin-top:5px;

margin-bottom:10px;

}

.parallax-right h4{
margin-top:30px;
font-size:24px;
font-weight:700;
color:white;

text-align:center;

width:100%;

margin-bottom:25px;

}

.parallax-right p{

font-size:18px;

line-height:1.6;

color:white;

}
.parallax-section h2,
.parallax-section h3,
.parallax-section p{

color:white;

}

document.getElementById("btnLogin").addEventListener("click", function () {
    window.location.href = "https://navasangir.com/login";
});

document.getElementById("btnRegister").addEventListener("click", function () {
    window.location.href = "https://navasangir.com/register";
});