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

body{

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

background:#090909;

color:#ffffff;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

header{

position:fixed;

top:0;

right:0;

width:100%;

padding:20px 8%;

display:flex;

justify-content:space-between;

align-items:center;

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

backdrop-filter:blur(15px);

border-bottom:1px solid rgba(212,175,55,.35);

z-index:1000;

}

.brand{

font-size:30px;

font-weight:800;

color:#d4af37;

letter-spacing:.5px;

}

nav{

display:flex;

gap:28px;

}

nav a{

text-decoration:none;

color:#ffffff;

font-size:18px;

transition:.35s;

}

nav a:hover{

color:#d4af37;

}

.hero{

margin-top:90px;

height:100vh;

position:relative;

overflow:hidden;

}

.hero img{

width:100%;

height:100%;

object-fit:cover;

filter:brightness(.55);

}

.hero-text{

position:absolute;

top:50%;

left:50%;

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

text-align:center;

width:90%;

}

.hero-text h1{

font-size:70px;

color:#d4af37;

margin-bottom:20px;

text-shadow:0 0 25px rgba(212,175,55,.45);

}

.hero-text p{

font-size:24px;

color:#ffffff;

}

section{

padding:100px 10%;

}

h2{

text-align:center;

font-size:45px;

color:#d4af37;

margin-bottom:60px;

}

.features{

text-align:center;

}

.feature-container{

display:grid;

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

gap:30px;

}

.feature-box{

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

backdrop-filter:blur(12px);

border:1px solid rgba(212,175,55,.25);

border-radius:22px;

padding:35px;

transition:.4s;

cursor:pointer;

}

.feature-box:hover{

transform:translateY(-12px);

border-color:#d4af37;

box-shadow:0 0 30px rgba(212,175,55,.45);

}

.feature-box span{

font-size:40px;

display:block;

margin-bottom:20px;

}

.feature-box h3{

color:#d4af37;

margin-bottom:15px;

font-size:24px;

}

.feature-box p{

line-height:2;

color:#d9d9d9;

}

.gallery{

text-align:center;

}

.gallery-container{

max-width:900px;

margin:auto;

overflow:hidden;

border-radius:25px;

border:2px solid rgba(212,175,55,.35);

transition:.4s;

}

.gallery-container:hover{

transform:scale(1.02);

box-shadow:0 0 40px rgba(212,175,55,.45);

}

.contact-box{

max-width:700px;

margin:auto;

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

backdrop-filter:blur(12px);

padding:40px;

border-radius:25px;

border:1px solid rgba(212,175,55,.3);

}

.contact-box p{

font-size:22px;

margin:22px 0;

}

.contact-box strong{

color:#d4af37;

}

footer{

margin-top:80px;

padding:40px;

text-align:center;

background:#050505;

border-top:1px solid rgba(212,175,55,.25);

}

footer h3{

color:#d4af37;

margin-bottom:15px;

font-size:28px;

}

footer p{

color:#cfcfcf;

}



section{

opacity:0;

transform:translateY(80px);

transition:1s;

}

section.show{

opacity:1;

transform:translateY(0);

}

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#050505;

display:flex;

justify-content:center;

align-items:center;

z-index:9999;

transition:1s;

}

#loader img{

width:120px;

animation:glow 2s infinite;

}

@keyframes glow{

0%{

transform:scale(1);

filter:drop-shadow(0 0 0px #d4af37);

}

50%{

transform:scale(1.08);

filter:drop-shadow(0 0 25px #d4af37);

}

100%{

transform:scale(1);

filter:drop-shadow(0 0 0px #d4af37);

}

}

@media(max-width:900px){

header{

padding:18px 20px;

flex-direction:column;

gap:15px;

}

nav{

flex-wrap:wrap;

justify-content:center;

gap:15px;

}

.brand{

font-size:24px;

}

.hero-text h1{

font-size:42px;

}

.hero-text p{

font-size:18px;

}

h2{

font-size:34px;

}

.contact-box p{

font-size:18px;

}

}