*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Tahoma,Arial,sans-serif;

}


html{

scroll-behavior:smooth;

}


body{

background:#05070d;

color:white;

overflow-x:hidden;

}



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


header{

width:100%;

height:80px;

padding:0 7%;


display:flex;

align-items:center;

justify-content:space-between;


position:fixed;

top:0;

z-index:1000;


background:

rgba(5,7,13,.75);


backdrop-filter:blur(20px);


border-bottom:

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

}



.logo{

display:flex;

align-items:center;

gap:12px;


font-size:26px;

font-weight:bold;

}



.logo span{

color:#00d9ff;

text-shadow:

0 0 15px #00d9ff;

}



.logo img{

width:45px;

height:45px;

object-fit:contain;

}



nav{

display:flex;

gap:30px;

}



nav a{

color:white;

text-decoration:none;

transition:.3s;

}



nav a:hover{

color:#00d9ff;

text-shadow:

0 0 10px #00d9ff;

}



.menu-btn{

display:none;

font-size:30px;

}






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


.hero{

min-height:100vh;

width:100%;


display:flex;

align-items:center;


padding:120px 10%;


background:

linear-gradient(
rgba(0,0,0,.65),
rgba(0,0,0,.95)
),

url("images/hero-bg.png");


background-size:cover;

background-position:center;

}



.hero-text{

max-width:800px;

}



.hero h1{

font-size:60px;

line-height:1.5;

}



.hero h1 span{

color:#00d9ff;

text-shadow:

0 0 20px #00d9ff;

}



.hero p{

margin:30px 0;

color:#ccc;

font-size:20px;

}



.buttons{

display:flex;

gap:20px;

}



.buttons a{

padding:15px 35px;


background:#00d9ff;


color:#001018;


font-weight:bold;


text-decoration:none;


border-radius:30px;


transition:.3s;


box-shadow:

0 0 20px rgba(0,217,255,.5);

}



.buttons a:hover{

transform:translateY(-5px);

box-shadow:

0 0 40px #00d9ff;

}






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


h2{

color:#00d9ff;

font-size:40px;

margin-bottom:25px;

text-shadow:

0 0 15px rgba(0,217,255,.5);

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


.services{

padding:100px 10%;

text-align:center;

}



.service-desc{

color:#aaa;

margin-bottom:50px;

}



.service-box{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}



.service-card{

width:300px;

padding:35px;


background:

rgba(255,255,255,.06);


backdrop-filter:blur(20px);


border:

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



border-radius:25px;


transition:.4s;


}



.service-card:hover{

transform:

translateY(-15px);


box-shadow:

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


border-color:#00d9ff;

}



.icon svg{

width:65px;

height:65px;


fill:none;


stroke:#00d9ff;


stroke-width:1.8;


filter:

drop-shadow(0 0 10px #00d9ff);


margin-bottom:20px;

}



.service-card h3{

color:#00d9ff;

margin-bottom:15px;

}



.service-card p{

color:#ccc;

line-height:1.8;

}






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


.about{

padding:100px 10%;


display:flex;


align-items:center;


gap:60px;


}



.profile img{

width:280px;

height:280px;


border-radius:50%;


object-fit:cover;


border:

3px solid #00d9ff;



box-shadow:

0 0 40px #00d9ff;


}



.about-text{

flex:1;

}



.about p{

color:#ccc;

line-height:2;

font-size:17px;

}





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


.skills{

display:flex;

flex-wrap:wrap;


gap:20px;


margin-top:30px;

}



.skill{

width:150px;


padding:25px;


text-align:center;


background:

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


border:

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


border-radius:20px;


transition:.3s;


}



.skill:hover{

transform:

translateY(-10px);


box-shadow:

0 0 30px #00d9ff;


}



.skill h3{

margin-bottom:10px;

}



.skill span{

color:#00d9ff;

}







/* ==========================
          PROJECTS
========================== */


.projects{

padding:100px 10%;


text-align:center;


}



.project-box{

display:flex;


justify-content:center;


gap:30px;


flex-wrap:wrap;


}



.project{


width:350px;



background:

rgba(255,255,255,.06);



backdrop-filter:blur(20px);



border:

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



border-radius:25px;



overflow:hidden;



transition:.4s;


}



.project:hover{


transform:

translateY(-15px);



box-shadow:

0 0 45px rgba(0,217,255,.6);


}



.project img{


width:100%;


height:220px;


object-fit:cover;


transition:.4s;


}



.project:hover img{


transform:

scale(1.08);


}



.project h3{


color:#00d9ff;


margin:20px;


}



.project p{


color:#ccc;


padding:

0 20px 25px;


line-height:1.8;


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


.contact{

padding:120px 10%;

text-align:center;


background:

radial-gradient(
circle at top,
#06265c,
#05070d 65%
);


}



.contact h2{

font-size:45px;

color:#00d9ff;


text-shadow:

0 0 20px #00d9ff;

}



.contact>p{

color:#aaa;

margin-top:20px;

font-size:18px;

}



.contact-box{


margin-top:60px;


display:flex;


justify-content:center;


gap:35px;


flex-wrap:wrap;


}



.contact-box a{


width:300px;


padding:40px 25px;



background:

rgba(255,255,255,.06);



backdrop-filter:blur(20px);



border:

1px solid rgba(0,217,255,.4);



border-radius:25px;



text-decoration:none;



color:white;



transition:.4s;



}



.contact-box a:hover{


transform:


translateY(-15px)
scale(1.03);



box-shadow:


0 0 50px #00d9ff;



}



.contact-icon svg{


width:55px;


height:55px;



fill:none;



stroke:#00d9ff;



stroke-width:1.8;



filter:


drop-shadow(0 0 10px #00d9ff);


}



.contact-box h3{


color:#00d9ff;



font-size:25px;



margin:20px 0 10px;


}



.contact-box p{


color:#ddd;


}



.contact-box span{


display:block;


margin-top:20px;


color:#00d9ff;


}




.contact-btn{


margin-top:60px;


padding:18px 55px;



border:none;



border-radius:50px;



background:#00d9ff;



color:#001018;



font-size:20px;



cursor:pointer;



box-shadow:


0 0 30px #00d9ff;



transition:.3s;



}



.contact-btn:hover{


transform:scale(1.1);



box-shadow:


0 0 60px #00d9ff;


}






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


footer{


padding:35px;



text-align:center;



color:#777;



border-top:

1px solid rgba(0,217,255,.2);



line-height:2;


}








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


.hidden{


opacity:0;


transform:

translateY(50px);



transition:

.8s;


}



.show{


opacity:1;


transform:

translateY(0);


}








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


@media(max-width:768px){



header{


padding:0 20px;


}



nav{


position:absolute;


top:80px;


right:-100%;


width:100%;



background:#05070d;



flex-direction:column;



text-align:center;



padding:30px;



transition:.4s;



}



nav.active{


right:0;


}



.menu-btn{


display:block;


}



.hero{


padding:

120px 25px 50px;


}



.hero h1{


font-size:38px;


}



.hero p{


font-size:17px;


}



.buttons{


flex-direction:column;


}



.about{


flex-direction:column;


text-align:center;


}



.profile img{


width:220px;


height:220px;


}



.skills{


justify-content:center;


}



.project{


width:100%;


}



.contact-box a{


width:100%;


}



.contact h2{


font-size:32px;


}


}.message-box{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

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

display:flex;

align-items:center;

justify-content:center;

opacity:0;

pointer-events:none;

transition:.3s;

z-index:2000;

}



.message-box.active{

opacity:1;

pointer-events:auto;

}



.message-content{

width:350px;

padding:35px;

text-align:center;

background:#080d18;

border:1px solid #00d9ff;

border-radius:25px;

box-shadow:0 0 40px #00d9ff;

}



.message-content h3{

color:#00d9ff;

font-size:25px;

margin-bottom:20px;

}



.message-content p{

color:#ddd;

line-height:2;

}



.message-content button{

margin-top:25px;

padding:10px 35px;

border:none;

border-radius:30px;

background:#00d9ff;

cursor:pointer;

}