/* =========================
   ALI 101 - Main Style
========================= */

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


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


body{

    background:#080808;
    color:white;
    min-height:100vh;
    overflow-x:hidden;

}



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


header{

    width:90%;
    margin:auto;
    padding:25px 0;

    display:flex;

    position:relative;

    z-index:10000;
}


.logo img{

    width:90px;
    height:auto;

    filter:
    drop-shadow(0 0 15px #00e5ff);

    transition:.3s;

}



nav{

    display:flex;
    gap:30px;

}


nav a{

    color:white;
    text-decoration:none;
    font-size:16px;
    transition:.3s;

}


nav a:hover{

    color:#00e5ff;
    text-shadow:0 0 15px #00e5ff;

}



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


.hero{

    width:90%;
    margin:80px auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:50px;

}



.hero-text{

    max-width:600px;

}



.hero h1{

    font-size:45px;
    line-height:1.7;

}


.hero h1 span{

    color:#00e5ff;
    text-shadow:
    0 0 10px #00e5ff,
    0 0 30px #00e5ff;

}



.hero h2{

    margin-top:20px;

    font-size:30px;

    color:#8b5cf6;

}



.hero p{

    margin-top:25px;

    color:#ccc;

    font-size:18px;

    line-height:2;

}


.hero strong{

    color:#00e5ff;

}


header{

display:flex;

align-items:center;

justify-content:space-between;

direction:ltr;

}


.logo{

order:1;

}


nav{

order:2;

direction:rtl;

}



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


.buttons{

    margin-top:40px;

    display:flex;
    gap:20px;

}


.btn{

    padding:14px 30px;

    border-radius:30px;

    background:#00e5ff;

    color:#000;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}



.btn:hover{

    box-shadow:
    0 0 20px #00e5ff,
    0 0 50px #00e5ff;

    transform:translateY(-5px);

}



.btn.second{

    background:transparent;

    color:white;

    border:1px solid #00e5ff;

}



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


.code-box{

    width:420px;

    padding:30px;

    border-radius:20px;

    background:#111;

    border:1px solid #222;

    box-shadow:

    0 0 20px rgba(0,229,255,.2);

    animation:float 4s infinite ease-in-out;

}



.code-box pre{

    color:#00e5ff;

    direction:ltr;

    text-align:left;

    font-size:16px;

    line-height:2;

}



.code-box span{

    color:#8b5cf6;

}



/* =========================
        ABOUT
========================= */


.about{

    width:80%;

    margin:100px auto;

    text-align:center;

}


.about h2{

    color:#00e5ff;

    font-size:35px;

}



.about p{

    margin-top:20px;

    color:#bbb;

    line-height:2;

}



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


@keyframes float{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-20px);

    }

}



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


@media(max-width:900px){


header{

    flex-direction:column;

    gap:30px;

}



nav{

    flex-wrap:wrap;

    justify-content:center;

}



.hero{

    flex-direction:column;

    text-align:center;

}



.hero h1{

    font-size:32px;

}



.code-box{

    width:100%;

}



.buttons{

    justify-content:center;

    flex-wrap:wrap;

}


}

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


.services{

    width:90%;
    margin:100px auto;
    text-align:center;

}


.services h2{

    font-size:35px;
    color:#00e5ff;
    margin-bottom:50px;

}



.service-container{

    display:grid;

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

    gap:30px;

}



.service-card{

    background:#111;

    padding:35px 20px;

    border-radius:20px;

    border:1px solid #222;

    transition:.4s;

}



.service-card:hover{

    transform:translateY(-15px);

    border-color:#00e5ff;

    box-shadow:

    0 0 20px rgba(0,229,255,.4);

}



.icon{

    font-size:45px;

    margin-bottom:20px;

}



.service-card h3{

    color:white;

    margin-bottom:15px;

}



.service-card p{

    color:#aaa;

    line-height:2;

}




@media(max-width:900px){

.service-container{

grid-template-columns:1fr;

}

}

/* =========================
        PORTFOLIO
========================= */


.portfolio{

    width:90%;
    margin:120px auto;
    text-align:center;

}


.portfolio h2{

    font-size:35px;
    color:#00e5ff;
    margin-bottom:50px;

}



.portfolio-container{

    display:grid;

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

    gap:35px;

}



.portfolio-card{

    background:#111;

    border-radius:20px;

    overflow:hidden;

    border:1px solid #222;

    transition:.4s;

}



.portfolio-card:hover{

    transform:translateY(-15px);

    border-color:#8b5cf6;

    box-shadow:

    0 0 30px rgba(139,92,246,.4);

}



.project-image img{

    width:100%;

    height:220px;

    object-fit:cover;

}



.portfolio-card h3{

    margin:20px 0;

    color:white;

}



.portfolio-card p{

    color:#aaa;

    padding:0 20px;

    line-height:2;

}



.portfolio-card a{

    display:inline-block;

    margin:25px;

    padding:10px 25px;

    border-radius:25px;

    color:#00e5ff;

    border:1px solid #00e5ff;

    text-decoration:none;

    transition:.3s;

}



.portfolio-card a:hover{

    background:#00e5ff;

    color:#000;

}



@media(max-width:900px){


.portfolio-container{

grid-template-columns:1fr;

}


}

/* =========================
        ABOUT ME
========================= */


.about{

    width:90%;
    margin:120px auto;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:80px;

}



.about-image{

    width:300px;
    height:300px;

    display:flex;

    align-items:center;

    justify-content:center;

}



.profile-box{

    width:220px;
    height:220px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#111;

    color:#00e5ff;

    font-size:35px;

    font-weight:bold;


    border:2px solid #00e5ff;


    box-shadow:

    0 0 30px #00e5ff;


}



.about-text{

    max-width:600px;

}



.about-text h2{

    color:#00e5ff;

    font-size:38px;

}



.about-text h3{

    margin-top:20px;

    font-size:28px;

}



.about-text p{

    margin-top:20px;

    color:#bbb;

    line-height:2;

}



.about-text strong{

    color:#00e5ff;

}



.about-tags{

    margin-top:30px;

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}



.about-tags span{

    padding:10px 20px;

    border-radius:20px;

    border:1px solid #8b5cf6;

    color:white;

}



@media(max-width:900px){


.about{

flex-direction:column;

text-align:center;

}


.about-tags{

justify-content:center;

}


}

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


.skills{

    width:80%;

    margin:120px auto;

    text-align:center;

}


.skills h2{

    color:#00e5ff;

    font-size:38px;

    margin-bottom:50px;

}



.skills-container{

    max-width:800px;

    margin:auto;

}



.skill{

    margin-bottom:35px;

    text-align:right;

}



.skill-info{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

    color:white;

    font-size:18px;

}



.skill-bar{

    width:100%;

    height:15px;

    background:#1a1a1a;

    border-radius:20px;

    overflow:hidden;

    border:1px solid #222;

}



.skill-progress{

    height:100%;

    border-radius:20px;

    width:0;

    transition:2s ease;

    background:linear-gradient(
        90deg,
        #00e5ff,
        #8b5cf6
    );

    box-shadow:
    0 0 15px #00e5ff;

}



.skill-progress.active{

    width:95%;

}


.skill-progress.css.active{

    width:90%;

}


.skill-progress.js.active{

    width:85%;

}


.skill-progress.php.active{

    width:75%;

}


.skill-progress.mysql.active{

    width:70%;

}

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


.contact{

    width:90%;
    margin:120px auto;

}


.contact h2{

    text-align:center;

    color:#00e5ff;

    font-size:38px;

    margin-bottom:50px;

}



.contact-container{

    display:flex;

    justify-content:center;

    gap:60px;

}



.contact-info{

    max-width:400px;

}



.contact-info h3{

    font-size:28px;

}



.contact-info p{

    color:#aaa;

    line-height:2;

    margin:25px 0;

}



.contact-item{

    margin:20px 0;

    color:#00e5ff;

}



.contact-form{

    width:450px;

    display:flex;

    flex-direction:column;

    gap:20px;

}



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


    background:#111;

    border:1px solid #333;

    padding:15px;

    border-radius:15px;

    color:white;

    outline:none;

}



.contact-form textarea{

    height:150px;

    resize:none;

}



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

    border-color:#00e5ff;

    box-shadow:
    0 0 15px rgba(0,229,255,.5);

}



.contact-form button{


    padding:15px;

    border:none;

    border-radius:30px;

    background:#00e5ff;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}



.contact-form button:hover{

    box-shadow:

    0 0 25px #00e5ff;

}



@media(max-width:900px){

.contact-container{

flex-direction:column;

align-items:center;

}


.contact-form{

width:100%;

}

}

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


footer{

    margin-top:100px;

    padding:50px 5% 20px;

    background:#050505;

    border-top:1px solid #222;

}



.footer-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}



.footer-logo h2{

    font-size:35px;

    color:white;

}



.footer-logo span{

    color:#00e5ff;

    text-shadow:

    0 0 15px #00e5ff;

}



.footer-logo p{

    color:#8b5cf6;

    margin-top:10px;

}



.footer-links{

    display:flex;

    gap:25px;

}



.footer-links a,
.social a{

    color:#aaa;

    text-decoration:none;

    transition:.3s;

}



.footer-links a:hover,
.social a:hover{

    color:#00e5ff;

    text-shadow:

    0 0 15px #00e5ff;

}



.social{

    display:flex;

    gap:20px;

}



.copyright{

    text-align:center;

    color:#777;

    margin-top:40px;

    font-size:14px;

}



@media(max-width:900px){


.footer-container{

flex-direction:column;

text-align:center;

}


.footer-links,
.social{

flex-wrap:wrap;

justify-content:center;

}


}

/* =========================
    NEON BACKGROUND
========================= */


body{

    position:relative;

}



.background-glow{

    position:fixed;

    width:500px;

    height:500px;

    background:

    radial-gradient(
    circle,
    rgba(0,229,255,.25),
    transparent 70%
    );


    top:-200px;

    right:-200px;

    z-index:-1;

    animation:moveGlow 8s infinite alternate;


}



.background-glow::after{


    content:"";

    position:absolute;

    width:400px;

    height:400px;


    background:

    radial-gradient(
    circle,
    rgba(139,92,246,.25),
    transparent 70%
    );


    bottom:-600px;

    left:-900px;


}



@keyframes moveGlow{


    from{

        transform:translate(0,0);

    }


    to{

        transform:translate(-100px,150px);

    }


}

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


.menu-btn{

    display:none;

    font-size:30px;

    color:#00e5ff;

    cursor:pointer;

}



@media(max-width:900px){


.menu-btn{

    display:block;

}



nav{

    position:absolute;

    top:100px;

    right:5%;

    background:rgba(10,10,10,.95);

    width:260px;

    padding:30px;

    border-radius:20px;

    display:none;

    flex-direction:column;

    gap:20px;

    text-align:center;

    border:1px solid #00e5ff;

    box-shadow:
    0 0 30px rgba(0,229,255,.5);

    z-index:9999;

    backdrop-filter:blur(10px);

}
	
	nav.active{

    display:flex;

}
	
	/* =========================
      SERVICES PAGE PRO
========================= */


.services-page{

    width:90%;
    max-width:1200px;

    margin:120px auto;

    text-align:center;

}



.services-page h1{

    font-size:50px;

    margin-bottom:25px;

    color:#fff;

    text-shadow:
    0 0 15px #00e5ff;

}



.services-page h1::after{

    content:"";

    display:block;

    width:120px;

    height:4px;

    background:
    linear-gradient(
    90deg,
    #00e5ff,
    #8b5cf6
    );

    margin:20px auto;

    border-radius:20px;

}



.services-intro{

    max-width:750px;

    margin:0 auto 80px;

    color:#aaa;

    font-size:18px;

    line-height:2.2;

}



.services-page .service-container{


    display:grid;


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


    gap:35px;


}



.services-page .service-card{


    position:relative;


    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.02)
    );


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


    border-radius:25px;


    padding:45px 30px;


    overflow:hidden;


    transition:.5s;


    backdrop-filter:blur(15px);


}





.services-page .service-card::before{


    content:"";


    position:absolute;


    width:200px;

    height:200px;


    background:#00e5ff;


    filter:blur(120px);


    top:-100px;

    right:-100px;


    opacity:.4;


}





.services-page .service-card:hover{


    transform:
    translateY(-15px);


    border-color:#00e5ff;


    box-shadow:

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


}





.services-page .icon{


    width:90px;

    height:90px;


    margin:0 auto 25px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    font-size:45px;


    background:#111;


    border:1px solid #00e5ff;


    box-shadow:

    0 0 25px rgba(0,229,255,.5);


}





.services-page h3{


    color:white;


    font-size:25px;


    margin-bottom:20px;


}




.services-page p{


    color:#aaa;


    line-height:2;


}





@media(max-width:1000px){


.services-page .service-container{


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


}


}





@media(max-width:700px){


.services-page .service-container{


grid-template-columns:1fr;


}


.services-page h1{


font-size:35px;


}


}
	
	
	/* =========================
       PORTFOLIO PAGE
========================= */


.portfolio-page{

    width:90%;

    max-width:1200px;

    margin:120px auto;

    text-align:center;

}



.portfolio-page h1{

    font-size:50px;

    color:white;

    text-shadow:
    0 0 20px #00e5ff;

}



.portfolio-intro{

    color:#aaa;

    margin:30px auto 70px;

    max-width:700px;

    line-height:2;

}




.portfolio-container{

    display:grid;

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

    gap:35px;

}



.portfolio-card{


    background:

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


    border-radius:25px;

    overflow:hidden;


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


    transition:.5s;


}



.portfolio-card:hover{

    transform:translateY(-15px);


    box-shadow:

    0 20px 50px rgba(0,229,255,.3);


}



.portfolio-card img{


    width:100%;

    height:220px;

    object-fit:cover;


}



.portfolio-content{

    padding:30px;


}



.portfolio-content h3{

    color:white;

    font-size:24px;

}



.portfolio-content p{

    color:#aaa;

    line-height:2;

}



.portfolio-content span{


    display:inline-block;

    margin:10px 5px 0;


    padding:7px 15px;


    border-radius:20px;


    border:1px solid #8b5cf6;


    color:white;


    font-size:13px;


}





@media(max-width:900px){


.portfolio-container{

	grid-template-columns:1fr;

}

	}

	
	
	
	/* =========================
        ABOUT PAGE
========================= */


.about-page{

    width:90%;

    max-width:1200px;

    margin:120px auto;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:80px;

}



.about-profile{

    display:flex;

    justify-content:center;

}



.profile-circle{


    width:280px;

    height:280px;


    border-radius:50%;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:45px;

    font-weight:bold;


    color:#00e5ff;


    background:

    linear-gradient(
    145deg,
    #111,
    #050505
    );


    border:2px solid #00e5ff;


    box-shadow:

    0 0 40px rgba(0,229,255,.6);


    animation:pulseLogo 3s infinite alternate;


}

	}

@keyframes pulseLogo{


from{

box-shadow:

0 0 20px rgba(0,229,255,.4);

}


to{

box-shadow:

0 0 60px rgba(0,229,255,.8);

}


}





.about-description{


    max-width:600px;


}



.about-description h1{


    font-size:45px;


    color:white;


    text-shadow:

    0 0 20px #00e5ff;


}



.about-description h2{


    color:#8b5cf6;


    margin:20px 0;


    font-size:28px;


}



.about-description p{


    color:#aaa;


    line-height:2.2;


    font-size:17px;


    margin-bottom:20px;


}



.about-description strong{


    color:#00e5ff;


}





.about-skills{


    display:flex;


    flex-wrap:wrap;


    gap:15px;


    margin-top:30px;


}



.about-skills span{


    padding:10px 25px;


    border-radius:30px;


    border:1px solid #00e5ff;


    color:white;


    transition:.3s;


}



.about-skills span:hover{


    background:#00e5ff;


    color:#000;


    box-shadow:

    0 0 20px #00e5ff;


}





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


.timeline{


    width:90%;


    max-width:1000px;


    margin:100px auto;


    text-align:center;


}



.timeline h2{


    color:#00e5ff;


    font-size:38px;


    margin-bottom:50px;


}



.timeline-box{


    display:flex;


    justify-content:center;


    gap:30px;


}



.timeline-box div{


    flex:1;


    background:

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


    padding:30px;


    border-radius:25px;


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


    transition:.4s;


}



.timeline-box div:hover{


    transform:translateY(-10px);


    border-color:#00e5ff;


    box-shadow:

    0 0 30px rgba(0,229,255,.3);


}



.timeline-box h3{


    color:white;


    margin-bottom:15px;


}



.timeline-box p{


    color:#aaa;


    line-height:2;


}





@media(max-width:900px){


.about-page{


    flex-direction:column;


    text-align:center;


}



.about-description h1{


    font-size:35px;


}



.timeline-box{


    flex-direction:column;


}



.about-skills{


    justify-content:center;


}


}
	
/* =========================
        CONTACT PAGE
========================= */


.contact-page{

    width:90%;

    max-width:1200px;

    margin:120px auto;

    text-align:center;

}



.contact-page h1{

    font-size:50px;

    color:white;

    text-shadow:
    0 0 20px #00e5ff;

}



.contact-intro{

    color:#aaa;

    margin:25px auto 70px;

    line-height:2;

}



.contact-container{


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:50px;


    align-items:start;


}





.contact-info{


    display:flex;

    flex-direction:column;

    gap:25px;


}





.contact-card{


    background:

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


    padding:30px;


    border-radius:25px;


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


    transition:.4s;


}



.contact-card:hover{


    transform:translateY(-8px);


    border-color:#00e5ff;


    box-shadow:

    0 0 30px rgba(0,229,255,.3);


}



.contact-card h3{

    color:#00e5ff;

    margin-bottom:15px;

}



.contact-card p{

    color:#aaa;

}







.contact-form{


    background:

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


    padding:40px;


    border-radius:30px;


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


}





.contact-form input,

.contact-form textarea{


    width:100%;


    padding:18px;


    margin-bottom:20px;


    background:#111;


    border:1px solid #333;


    border-radius:15px;


    color:white;


    font-family:inherit;


}



.contact-form textarea{


    height:150px;


    resize:none;


}



.contact-form button{


    width:100%;


    padding:18px;


    border:none;


    border-radius:30px;


    background:

    linear-gradient(
    90deg,
    #00e5ff,
    #8b5cf6
    );


    color:white;


    font-size:18px;


    cursor:pointer;


    transition:.3s;


}



.contact-form button:hover{


    box-shadow:

    0 0 30px #00e5ff;


}





@media(max-width:900px){


.contact-container{

grid-template-columns:1fr;

}



.contact-page h1{

font-size:35px;

}


}


#topBtn{

position:fixed;

bottom:30px;

left:30px;

width:50px;

height:50px;

border-radius:50%;

border:none;

background:
linear-gradient(45deg,#00e5ff,#8b5cf6);

color:white;

font-size:25px;

cursor:pointer;

display:none;

z-index:9999;

box-shadow:
0 0 20px #00e5ff;

}



/* =========================
        NEW HERO
========================= */


.hero{

width:90%;

max-width:1200px;

margin:100px auto;


display:flex;

align-items:center;

justify-content:space-between;


min-height:600px;


gap:50px;

}




.hero-content{

max-width:650px;


animation:slideRight 1s ease;

}



.hero-content h1{

font-size:55px;

line-height:1.5;

color:white;

}



.hero-content h1 span{


color:#00e5ff;


text-shadow:

0 0 25px #00e5ff;


}




.hero-content h2{


font-size:28px;


color:#8b5cf6;


margin:25px 0;


}



.hero-content p{


color:#aaa;


font-size:18px;


line-height:2.2;


}





.hero-buttons{


display:flex;

gap:20px;

margin-top:40px;


}




.hero-buttons a{


padding:15px 35px;


border-radius:40px;


text-decoration:none;


font-size:17px;


transition:.4s;


}





.btn-primary{


background:

linear-gradient(
90deg,
#00e5ff,
#8b5cf6
);


color:white;


box-shadow:

0 0 25px rgba(0,229,255,.5);


}



.btn-secondary{


border:1px solid #00e5ff;


color:white;


}





.hero-buttons a:hover{


transform:translateY(-8px);


}





.hero-logo{


animation:slideLeft 1s ease;


}



.neon-circle{


width:330px;

height:330px;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;


font-size:55px;

font-weight:bold;


color:#00e5ff;


border:3px solid #00e5ff;


box-shadow:


0 0 40px #00e5ff,


inset 0 0 40px #8b5cf6;


animation:pulse 3s infinite alternate;


}





@keyframes pulse{


from{

transform:scale(1);

}


to{

transform:scale(1.05);

}


}




@keyframes slideRight{


from{

opacity:0;

transform:translateX(80px);

}


to{

opacity:1;

transform:translateX(0);

}


}




@keyframes slideLeft{


from{

opacity:0;

transform:translateX(-80px);

}


to{

opacity:1;

transform:translateX(0);

}


}






@media(max-width:900px){


.hero{


flex-direction:column-reverse;

text-align:center;


}



.hero-content h1{


font-size:38px;


}



.hero-buttons{


justify-content:center;

flex-direction:column;


}



.neon-circle{


width:230px;

height:230px;


font-size:40px;


}


}


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


.stats{

width:90%;

max-width:1200px;

margin:50px auto 100px;


display:grid;

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

gap:25px;


}



.stat-card{


background:

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



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



border-radius:25px;



padding:35px 20px;



text-align:center;



transition:.4s;



backdrop-filter:blur(10px);


}



.stat-card:hover{


transform:translateY(-10px);



border-color:#00e5ff;



box-shadow:

0 0 30px rgba(0,229,255,.3);



}



.stat-card h2{


font-size:45px;


margin-bottom:15px;


background:

linear-gradient(
90deg,
#00e5ff,
#8b5cf6
);


-webkit-background-clip:text;


color:transparent;



}



.stat-card p{


color:#aaa;


font-size:17px;


}




@media(max-width:900px){


.stats{


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


}


}



@media(max-width:500px){


.stats{


grid-template-columns:1fr;


}


}

/* =========================
        WHY SECTION
========================= */


.why-section{


width:90%;

max-width:1200px;

margin:100px auto;


text-align:center;


}



.why-section h2{


font-size:45px;


color:white;


text-shadow:

0 0 20px #00e5ff;


}



.why-intro{


max-width:750px;


margin:25px auto 70px;


color:#aaa;


line-height:2;


}




.why-container{


display:grid;


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


gap:25px;


}



.why-card{


background:

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


padding:35px 25px;


border-radius:25px;


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


transition:.4s;


}



.why-card:hover{


transform:translateY(-12px);


border-color:#00e5ff;


box-shadow:

0 0 35px rgba(0,229,255,.3);


}




.why-icon{


font-size:45px;


margin-bottom:20px;


}




.why-card h3{


color:white;


font-size:24px;


margin-bottom:15px;


}




.why-card p{


color:#aaa;


line-height:2;


}




@media(max-width:1000px){


.why-container{


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


}


}



@media(max-width:600px){


.why-container{


grid-template-columns:1fr;


}


.why-section h2{


font-size:35px;


}


}


/* =========================
      SCROLL ANIMATION
========================= */


.stat-card,
.why-card,
.service-card,
.portfolio-card,
.contact-card{


opacity:0;


transform:translateY(50px);


transition:
opacity .8s ease,
transform .8s ease;


}



.show{


opacity:1;


transform:translateY(0);


}

/* =========================
        404 PAGE
========================= */


.error-page{


min-height:100vh;


display:flex;


align-items:center;


justify-content:center;


text-align:center;


}



.error-box{


padding:50px;


background:

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


border-radius:30px;


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


box-shadow:

0 0 50px rgba(0,229,255,.2);


}



.error-box h1{


font-size:120px;


margin:0;


color:#00e5ff;


text-shadow:

0 0 30px #00e5ff;


}



.error-box h2{


color:white;


font-size:35px;


}



.error-box p{


color:#aaa;


margin:25px;


}



.error-box a{


display:inline-block;


padding:15px 35px;


border-radius:30px;


background:

linear-gradient(
90deg,
#00e5ff,
#8b5cf6
);


color:white;


text-decoration:none;


transition:.3s;


}



.error-box a:hover{


transform:translateY(-5px);


box-shadow:

0 0 25px #00e5ff;


}

/* =========================
     ALI 101 PREMIUM LOGO
========================= */


.premium-logo{

width:140px;

position:relative;

cursor:pointer;


animation:
logoMove 5s ease-in-out infinite;


}



.logo-main{

font-size:34px;

font-weight:900;

letter-spacing:4px;


color:white;


position:relative;


background:

linear-gradient(
90deg,
#fff,
#00e5ff,
#fff
);


background-size:200%;


-webkit-background-clip:text;


color:transparent;


animation:

textGlow 4s linear infinite;


}



.logo-main span{


color:#00e5ff;


}





.logo-sub{

font-size:9px;

letter-spacing:5px;

margin-top:5px;


color:#888;


}




.logo-scan{


position:absolute;


width:100%;

height:2px;


background:

linear-gradient(
90deg,
transparent,
#00e5ff,
transparent
);



top:0;


animation:

scanMove 3s infinite;


box-shadow:

0 0 15px #00e5ff;


}




.premium-logo:hover .logo-main{


text-shadow:

0 0 20px #00e5ff;


}





@keyframes scanMove{


0%{

top:0;

opacity:0;

}


50%{

opacity:1;

}


100%{

top:45px;

opacity:0;

}


}





@keyframes textGlow{


0%{

background-position:0%;

}


100%{

background-position:200%;

}


}





@keyframes logoMove{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-5px);

}


}


/* =================================
        PREMIUM PORTFOLIO
================================= */


.portfolio-section{

padding:80px 5%;

}


.portfolio-section h2{

text-align:center;

font-size:42px;

margin-bottom:50px;

color:white;

}



.portfolio-container{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}



/* کارت اصلی */

.portfolio-card{


background:

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


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


border-radius:20px;


overflow:hidden;


backdrop-filter:blur(15px);


transition:.4s;


position:relative;


}



.portfolio-card::before{


content:"";


position:absolute;


inset:0;


background:

linear-gradient(

120deg,

transparent,

rgba(0,229,255,.25),

transparent

);


opacity:0;


transition:.5s;
	
	pointer-events:none;


}



.portfolio-card:hover::before{

opacity:1;

}





.portfolio-card:hover{


transform:

translateY(-12px);


box-shadow:

0 20px 50px rgba(0,229,255,.18);


}




/* تصویر پروژه */
.project-image{

height:250px;

overflow:hidden;

border-radius:15px;

}


.project-image img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}



.project-image::after{


content:"";


position:absolute;


inset:0;


background:

linear-gradient(

transparent,

rgba(0,0,0,.7)

);


}




.project-image span{


position:relative;


z-index:2;


text-shadow:

0 0 20px #00e5ff;


}



/* رنگ هر پروژه */


.barber{


background:

linear-gradient(

135deg,

#111,

#8b5e34

);


}



.estate{


background:

linear-gradient(

135deg,

#0f172a,

#2563eb

);


}



.fashion{


background:

linear-gradient(

135deg,

#111827,

#9333ea

);


}





/* متن کارت */


.project-content{


padding:25px;


}



.project-content h3{


font-size:25px;


margin-bottom:10px;


color:white;


}



.project-content p{


color:#aaa;


line-height:1.8;


}




/* تگ ها */


.tags{


display:flex;


gap:8px;


flex-wrap:wrap;


margin:20px 0;


}



.tags span{


padding:6px 12px;


border-radius:20px;


font-size:12px;


background:

rgba(0,229,255,.12);


border:

1px solid rgba(0,229,255,.3);


color:#00e5ff;


}




/* دکمه */


.project-content button{


padding:12px 28px;


border:none;


border-radius:30px;


background:

linear-gradient(

90deg,

#00e5ff,

#8b5cf6

);


color:white;


font-weight:bold;


cursor:pointer;


transition:.3s;


}



.project-content button:hover{


transform:scale(1.08);


box-shadow:

0 0 25px #00e5ff;


}





/* موبایل */


@media(max-width:900px){


.portfolio-container{


grid-template-columns:1fr;



	}

	}


.preview-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 28px;

border-radius:30px;

background:

linear-gradient(
90deg,
#00e5ff,
#8b5cf6
);

color:white;

text-decoration:none;

font-weight:bold;

font-size:15px;

transition:.3s;

}



.preview-btn:hover{

transform:scale(1.05);

box-shadow:

0 0 25px #00e5ff;

}


/* ==========================
   PORTFOLIO IMAGE PREVIEW
========================== */


.project-image::before{

content:"";

position:absolute;

inset:0;

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

opacity:0;

transition:.4s;

}



.image-preview{

position:absolute;

z-index:5;

top:50%;

left:50%;

transform:translate(-50%,-50%) scale(.8);


padding:12px 28px;

border-radius:30px;


background:

linear-gradient(
90deg,
#00e5ff,
#8b5cf6
);


color:white;

text-decoration:none;

font-weight:bold;


opacity:0;

transition:.4s;

}



.project-image:hover::before{

opacity:1;

}



.project-image:hover .image-preview{

opacity:1;

transform:

translate(-50%,-50%) scale(1);

}

.success-message{
    background:#16a34a;
    color:#fff;
    padding:15px;
    border-radius:10px;
    margin-bottom:20px;
    text-align:center;
    font-weight:bold;
}

.success-message{

background:#16a34a;
color:#fff;
padding:15px;
border-radius:10px;
margin-bottom:20px;
text-align:center;

}

.error-message{

background:#dc2626;
color:#fff;
padding:15px;
border-radius:10px;
margin-bottom:20px;
text-align:center;

}