/*====================================

HERO

====================================*/

.hero{

/* svh تا با جمع‌شدن نوار آدرس موبایل ارتفاع نپرد */
height:100vh;

height:100svh;

min-height:900px;

display:flex;

align-items:center;

justify-content:center;

position:relative;

overflow:hidden;

padding:0 8%;

}



.hero-image{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

overflow:hidden;

}



.hero-image img{

width:100%;

height:100%;

object-fit:cover;

transform:scale(1.12);

filter:

brightness(.45)

contrast(1.05)

saturate(.85);

transition:8s;

}



.hero::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(0,0,0,.15),

rgba(0,0,0,.65)

);

z-index:1;

}



.hero::after{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(

circle at center,

transparent,

rgba(0,0,0,.55)

);

z-index:2;

}



.hero-content{

position:relative;

z-index:20;

text-align:center;

max-width:900px;

}



.hero-content span{

font-size:15px;

letter-spacing:12px;

color:var(--red);

margin-bottom:30px;

display:block;

animation:fadeUp .8s ease forwards;

}



.hero-content h1{

font-size:170px;

font-family:'Bebas Neue',sans-serif;

letter-spacing:12px;

line-height:.9;

margin-bottom:35px;

animation:fadeUp 1s ease forwards;

}



.hero-content p{

font-size:26px;

color:#e4e4e4;

max-width:650px;

margin:auto;

line-height:1.8;

animation:fadeUp 1.2s ease forwards;

}



.hero-content .button{

margin-top:55px;

animation:fadeUp 1.5s ease forwards;

}



.hero-scroll{

position:absolute;

bottom:45px;

left:50%;

transform:translateX(-50%);

z-index:20;

display:flex;

flex-direction:column;

align-items:center;

gap:12px;

font-size:12px;

letter-spacing:5px;

opacity:.8;

}



.hero-scroll::after{

content:"";

width:1px;

height:70px;

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

animation:scrollLine 2s infinite;

}



.big-text{

position:absolute;

bottom:-60px;

left:50%;

transform:translateX(-50%);

font-size:260px;

font-family:'Bebas Neue';

white-space:nowrap;

color:rgba(255,255,255,.03);

pointer-events:none;

letter-spacing:12px;

z-index:3;

}



@keyframes scrollLine{

0%{

height:10px;

opacity:0;

}



50%{

height:70px;

opacity:1;

}



100%{

height:10px;

opacity:0;

}

}



@keyframes fadeUp{

from{

opacity:0;

transform:translateY(80px);

}



to{

opacity:1;

transform:translateY(0);

}

}
/*====================================

Hero Buttons

====================================*/

.hero-buttons{

display:flex;

gap:20px;

margin-top:45px;

flex-wrap:wrap;

}

.button-outline{

padding:18px 42px;

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

color:#fff;

text-decoration:none;

letter-spacing:3px;

text-transform:uppercase;

transition:.35s;

}

.button-outline:hover{

background:#fff;

color:#000;

}

.hero-subtitle{

display:inline-block;

margin-bottom:20px;

letter-spacing:6px;

font-size:13px;

color:var(--red);

}