/* =====================
   IMPORT FONT
===================== */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;800;900&display=swap');





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


*{

margin:0;

padding:0;

box-sizing:border-box;

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

}



html{

scroll-behavior:smooth;

}



body{

background:#050816;

color:#fff;

overflow-x:hidden;

}





:root{


--primary:#00f5ff;

--secondary:#8b5cf6;

--pink:#ec4899;

--dark:#050816;

--card:rgba(255,255,255,.08);

--text:#cbd5e1;


}






/* =====================
   BODY EFFECT
===================== */


body::before{


content:"";

position:fixed;

width:600px;

height:600px;

background:var(--primary);

filter:blur(200px);

opacity:.15;

top:-200px;

left:-200px;

z-index:-1;


}




body::after{


content:"";

position:fixed;

width:600px;

height:600px;

background:var(--secondary);

filter:blur(200px);

opacity:.15;

bottom:-200px;

right:-200px;

z-index:-1;


}







/* =====================
   LINKS
===================== */


a{

text-decoration:none;

color:white;

}






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

.q-loader{

position:relative;

width:150px;

height:150px;

display:flex;

align-items:center;

justify-content:center;

}



.q-logo{

font-size:90px;

font-weight:900;

color:#00f5ff;

text-shadow:

0 0 20px #00f5ff,

0 0 50px #8b5cf6;

z-index:2;

animation:qPulse 1.5s infinite;

}




.circle{

position:absolute;

width:150px;

height:150px;

border-radius:50%;

border:5px solid transparent;

border-top-color:#00f5ff;

border-right-color:#8b5cf6;

animation:rotate 1s linear infinite;

box-shadow:

0 0 30px #00f5ff;

}



@keyframes rotate{

from{

transform:rotate(0deg);

}


to{

transform:rotate(360deg);

}

}



@keyframes qPulse{

50%{

transform:scale(1.15);

}

}
.loader{

position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

background:#050816;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

z-index:9999;

gap:25px;

}


.loader p{

color:#cbd5e1;

font-size:18px;

letter-spacing:2px;

}

/* =====================
   HEADER
===================== */


.header{


position:fixed;

top:0;

right:0;

width:100%;

z-index:1000;

background:rgba(5,8,22,.6);

backdrop-filter:blur(20px);

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


}





.navbar{


width:90%;

height:85px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;


}






/* LOGO */


.logo{


font-size:35px;

font-weight:900;


}



.logo span{


color:var(--primary);

text-shadow:0 0 20px var(--primary);


}







/* MENU */


.menu{


display:flex;

gap:35px;

list-style:none;


}



.menu a{


font-size:17px;

transition:.3s;


}




.menu a:hover{


color:var(--primary);

text-shadow:0 0 15px var(--primary);


}







/* BUTTONS */


.theme-btn,
.menu-btn{


background:var(--card);

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

color:white;

font-size:20px;

padding:10px 15px;

border-radius:15px;

cursor:pointer;


}



.menu-btn{

display:none;

}
/* =====================
   HERO SECTION
===================== */


.hero{


min-height:100vh;

width:90%;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

gap:50px;

padding-top:100px;


}




.hero-content{


width:50%;


}




.welcome{


color:var(--primary);

font-size:22px;

margin-bottom:15px;


}





.hero-content h1{


font-size:90px;

font-weight:900;

background:linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

-webkit-background-clip:text;

color:transparent;


}




.hero-content h2{


font-size:45px;

margin:15px 0;


}





.hero-content p{


color:var(--text);

font-size:18px;

line-height:2;

max-width:600px;


}







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


.hero-buttons{


display:flex;

gap:20px;

margin-top:35px;


}





.hero-buttons a{


padding:15px 40px;

border-radius:15px;

background:linear-gradient(
45deg,
var(--primary),
var(--secondary)
);

font-weight:bold;

transition:.4s;

color:#050816;


}





.hero-buttons a:hover{


transform:translateY(-8px) scale(1.05);

box-shadow:

0 0 30px var(--primary),

0 0 60px var(--secondary);


}








/* =====================
   CODE BOX
===================== */


.code-box{


width:450px;

background:#0f172a;

border-radius:20px;

overflow:hidden;

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

box-shadow:

0 0 40px rgba(0,245,255,.2);


animation:float 4s infinite;


}




.code-header{


height:45px;

background:#020617;

display:flex;

align-items:center;

padding-right:20px;

color:#ef4444;

font-size:25px;

letter-spacing:8px;


}





.code-box pre{


padding:30px;

color:#38bdf8;

font-size:16px;

direction:ltr;

text-align:left;

line-height:2;


}







/* =====================
   FLOAT ANIMATION
===================== */


@keyframes float{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-20px);

}


100%{

transform:translateY(0);

}


}







/* =====================
   SECTION TITLE
===================== */


.section-title{


text-align:center;

margin:100px 0 50px;


}



.section-title span{


color:var(--primary);

font-size:15px;

letter-spacing:3px;


}



.section-title h2{


font-size:45px;

margin-top:10px;


}
/* =====================
   ABOUT SECTION
===================== */


.about-container{

width:90%;

margin:auto;

display:flex;

justify-content:space-between;

gap:40px;

}



.about-card{

width:50%;

background:var(--card);

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

padding:40px;

border-radius:25px;

backdrop-filter:blur(15px);

transition:.4s;

}



.about-card:hover{

transform:translateY(-10px);

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

}



.about-card h3{

font-size:30px;

color:var(--primary);

margin-bottom:20px;

}



.about-card p{

color:var(--text);

line-height:2;

}






/* =====================
   STATS
===================== */


.stats-box{

display:flex;

gap:20px;

width:50%;

}



.stat{


flex:1;

background:var(--card);

border-radius:20px;

padding:30px;

text-align:center;

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

}



.stat h3{

font-size:45px;

color:var(--primary);

}




.stat p{

color:var(--text);

}







/* =====================
   SKILLS
===================== */


.skills-container{


width:80%;

margin:auto;

display:grid;

gap:25px;


}





.skill-card{


background:var(--card);

padding:25px;

border-radius:20px;

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


}





.skill-card h3{

margin-bottom:15px;

}




.progress{


height:12px;

background:#020617;

border-radius:20px;

overflow:hidden;


}




.progress-bar{


height:100%;

background:linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

border-radius:20px;

animation:load 2s;


}




.progress-bar.html{

width:95%;

}


.progress-bar.css{

width:90%;

}


.progress-bar.js{

width:85%;

}


.progress-bar.php{

width:75%;

}





@keyframes load{

from{

width:0;

}

}







/* =====================
   GAME ZONE
===================== */


.game-container{


width:90%;

margin:auto;

display:flex;

justify-content:center;


}




.game-card{


width:500px;

text-align:center;

padding:40px;

background:var(--card);

border-radius:30px;

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

box-shadow:0 0 40px rgba(139,92,246,.3);


}



.game-card h3{


font-size:35px;

color:var(--primary);


}



.score{


font-size:30px;

margin:30px;


}



#game-btn{


padding:15px 50px;

border:none;

border-radius:15px;

background:linear-gradient(
45deg,
var(--primary),
var(--secondary)
);

font-size:18px;

cursor:pointer;

transition:.3s;


}



#game-btn:hover{


transform:scale(1.1);

box-shadow:0 0 30px var(--primary);


}







/* =====================
   PROJECT CARDS
===================== */


.projects-container{


width:90%;

margin:auto;

display:grid;

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

gap:30px;


}





.project-card{


background:var(--card);

border-radius:25px;

overflow:hidden;

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

padding-bottom:30px;

transition:.5s;


}




.project-card:hover{


transform:

translateY(-15px)
rotateX(5deg);


box-shadow:

0 20px 50px rgba(0,245,255,.25);


}





.project-image img{


width:100%;

height:220px;

object-fit:cover;


}



.project-card h3{


font-size:25px;

padding:20px;

color:var(--primary);


}



.project-card p{


padding:0 20px;

color:var(--text);


}



.project-tags{


padding:20px;

display:flex;

gap:10px;


}



.project-tags span{


background:#020617;

padding:5px 15px;

border-radius:20px;

font-size:13px;


}



.project-card a{


margin:20px;

display:inline-block;

background:var(--secondary);

padding:10px 25px;

border-radius:12px;


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


.services-container{

width:90%;

margin:auto;

display:grid;

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

gap:30px;

}



.service-card{


background:var(--card);

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

padding:35px;

border-radius:25px;

text-align:center;

transition:.4s;


}



.service-card:hover{


transform:translateY(-15px);

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


}



.service-card h3{


color:var(--primary);

font-size:25px;

margin-bottom:15px;


}



.service-card p{

color:var(--text);

}








/* =====================
   ACHIEVEMENTS
===================== */


.achievement-box{


width:80%;

margin:auto;

display:flex;

justify-content:center;

gap:30px;


}




.achievement-box div{


background:var(--card);

padding:35px;

border-radius:25px;

text-align:center;

font-size:35px;

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

transition:.4s;


}




.achievement-box div:hover{


transform:scale(1.1);

box-shadow:0 0 30px var(--secondary);


}





.achievement-box p{


font-size:16px;

color:var(--text);

margin-top:15px;


}







/* =====================
   TIMELINE
===================== */


.timeline-box{


width:70%;

margin:auto;

border-right:3px solid var(--primary);

padding-right:30px;


}




.timeline-item{


background:var(--card);

padding:25px;

border-radius:20px;

margin-bottom:25px;

position:relative;


}



.timeline-item::before{


content:"";

position:absolute;

right:-45px;

top:30px;

width:20px;

height:20px;

background:var(--primary);

border-radius:50%;

box-shadow:0 0 20px var(--primary);


}



.timeline-item h3{


color:var(--primary);


}







/* =====================
   BLOG
===================== */


.blog-container{


width:90%;

margin:auto;

display:grid;

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

gap:30px;


}



.blog-card{


background:var(--card);

padding:35px;

border-radius:25px;

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

transition:.4s;


}




.blog-card:hover{


transform:translateY(-10px);

box-shadow:0 0 35px rgba(139,92,246,.3);


}




.blog-card h3{


color:var(--primary);

margin-bottom:15px;


}




.blog-card p{


color:var(--text);


}




.blog-card a{


display:inline-block;

margin-top:20px;

background:var(--secondary);

padding:10px 25px;

border-radius:12px;


}







/* =====================
   REVIEWS
===================== */


.reviews-container{


width:80%;

margin:auto;

display:flex;

gap:30px;


}




.review-card{


flex:1;

background:var(--card);

padding:35px;

border-radius:25px;

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


}



.review-card p{


color:var(--text);

font-size:18px;


}



.review-card h3{


margin-top:20px;

color:var(--primary);


}







/* =====================
   CONTACT
===================== */


.contact-form{


width:600px;

max-width:90%;

margin:auto;

display:flex;

flex-direction:column;

gap:20px;


}





.contact-form input,
.contact-form textarea{


background:#0f172a;

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

padding:18px;

border-radius:15px;

color:white;

font-size:16px;

outline:none;


}



.contact-form textarea{


height:170px;

resize:none;


}




.contact-form button{


padding:15px;

border:none;

border-radius:15px;

background:linear-gradient(
45deg,
var(--primary),
var(--secondary)
);

font-size:18px;

cursor:pointer;

transition:.3s;


}




.contact-form button:hover{


box-shadow:0 0 35px var(--primary);

transform:translateY(-5px);


}







/* =====================
   SOCIAL
===================== */


.social-links{


display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;


}




.social-links a{


background:var(--card);

padding:15px 30px;

border-radius:30px;

transition:.3s;


}



.social-links a:hover{


background:var(--primary);

color:#020617;


}







/* =====================
   FOOTER
===================== */


.footer{


margin-top:80px;

background:#020617;

padding:50px;

text-align:center;


}



.footer-logo{


font-size:35px;

font-weight:900;

color:var(--primary);

margin-bottom:15px;


}



.footer p{


color:var(--text);


}



.footer-bottom{


margin-top:30px;

color:#64748b;


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


@keyframes fadeUp{

from{

opacity:0;

transform:translateY(60px);

}


to{

opacity:1;

transform:translateY(0);

}

}



.hero-content,
.code-box,
.about-card,
.skill-card,
.project-card,
.service-card,
.blog-card,
.review-card{

animation:fadeUp 1s ease;

}







/* =====================
   MOUSE GLOW
===================== */


.cursor-glow{


position:fixed;

width:300px;

height:300px;

border-radius:50%;

background:var(--primary);

filter:blur(120px);

opacity:.15;

pointer-events:none;

z-index:-1;


}







/* =====================
   SCROLL BAR
===================== */


::-webkit-scrollbar{

width:12px;

}


::-webkit-scrollbar-track{

background:#020617;

}



::-webkit-scrollbar-thumb{

background:linear-gradient(
var(--primary),
var(--secondary)
);

border-radius:20px;

}







/* =====================
   TABLET
===================== */


@media(max-width:1100px){



.hero{

flex-direction:column;

text-align:center;

}



.hero-content{

width:100%;

}



.code-box{

width:90%;

}



.about-container{


flex-direction:column;

}



.about-card,
.stats-box{


width:100%;


}



.projects-container{


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


}



.services-container{


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


}



}





/* =====================
   MOBILE
===================== */


@media(max-width:700px){



.navbar{

height:75px;

}




.menu{


display:none;

position:absolute;

top:75px;

right:5%;

width:90%;

background:#020617;

padding:25px;

border-radius:20px;

flex-direction:column;

text-align:center;


}



.menu.active{


display:flex;


}




.menu-btn{


display:block;


}




.hero{


padding-top:120px;


}




.hero-content h1{


font-size:55px;


}




.hero-content h2{


font-size:30px;


}



.hero-buttons{


flex-direction:column;


}




.hero-buttons a{


width:100%;


}



.code-box{


width:100%;


}




.code-box pre{


font-size:12px;


}



.section-title h2{


font-size:35px;


}




.skills-container{


width:95%;


}



.projects-container,
.services-container,
.blog-container{


grid-template-columns:1fr;


}



.achievement-box,
.reviews-container{


flex-direction:column;

width:90%;


}



.timeline-box{


width:90%;


}




.contact-form{


width:95%;


}




.stat h3{


font-size:35px;


}



}







/* =====================
   LIGHT MODE
===================== */


.light-mode{


background:#f8fafc;

color:#020617;


}



.light-mode .header{


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


}



.light-mode .card,
.light-mode .project-card,
.light-mode .service-card{


background:white;


}



.light-mode p{


color:#475569;


}



.light-mode a{


color:#020617;


}
.particle{

position:fixed;

width:10px;

height:10px;

background:#00f5ff;

border-radius:50%;

animation:particle 1s;

}

@keyframes particle{

to{

transform:translateY(-100px);

opacity:0;

}

}