*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
    scroll-behavior:smooth;
}

body{
    background:#050b16;
    color:white;
}


/* Navbar */

header{
    background:#07101f;
    position:fixed;
    width:100%;
    top:0;
    z-index:100;
}


nav{
    height:75px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 8%;
}


.logo{
    font-size:35px;
    font-weight:bold;
    letter-spacing:2px;
}


.logo span{
    color:#00aaff;
}


nav ul{
    display:flex;
    gap:30px;
    list-style:none;
}


nav ul a{
    color:white;
    text-decoration:none;
    font-size:17px;
}


nav ul a:hover{
    color:#00aaff;
}


.menu{
    display:none;
    font-size:30px;
}


/* Home */

.home{

min-height:100vh;
display:flex;
align-items:center;
justify-content:space-between;
padding:120px 8% 50px;

}


.content{
    width:55%;
}


.content h3{
    font-size:25px;
}


.content h1{
    font-size:65px;
    margin:10px 0;
}


.content h2{
    font-size:35px;
}


.content span{
    color:#00aaff;
}


.content p{
    margin:20px 0;
    line-height:1.8;
    color:#ddd;
    font-size:18px;
}



.btn{

display:inline-block;
padding:14px 35px;
background:#00aaff;
border-radius:30px;
text-decoration:none;
color:white;
margin-top:20px;
margin-right:15px;

}


.btn2{

background:transparent;
border:2px solid #00aaff;

}



/* Profile */

.profile img{

width:350px;
height:350px;
border-radius:50%;
object-fit:cover;
border:6px solid #00aaff;
box-shadow:0 0 30px #00aaff;

}



/* Social */

.social{
margin-top:30px;
}

.social a{

display:inline-flex;
width:45px;
height:45px;
align-items:center;
justify-content:center;
border:2px solid #00aaff;
border-radius:50%;
margin-right:10px;
color:white;

}



/* Sections */

section{

padding:80px 8%;
text-align:center;

}


h1.title{

font-size:40px;
color:#00aaff;
margin-bottom:30px;

}



/* About */


.about{

line-height:1.8;
font-size:18px;

}



.info{

display:flex;
justify-content:center;
gap:20px;
margin-top:30px;
flex-wrap:wrap;

}


.box{

background:#111d33;
padding:25px;
border-radius:15px;
width:220px;

}



/* Skills */


.skill-box{

display:flex;
justify-content:center;
flex-wrap:wrap;
gap:20px;

}


.skill{

background:#111d33;
padding:25px;
width:200px;
border-radius:15px;

}



.bar{

background:#333;
height:8px;
border-radius:10px;
margin-top:15px;

}


.progress{

height:8px;
background:#00aaff;
border-radius:10px;

}




/* Projects */


.projects{

display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;

}


.card{

background:#111d33;
width:280px;
padding:20px;
border-radius:15px;

}


.card img{

width:100%;
border-radius:10px;

}


.card a{

display:inline-block;
margin-top:15px;
color:#00aaff;

}




/* Contact */


form{

max-width:500px;
margin:auto;

}


input,textarea{

width:100%;
padding:15px;
margin:10px;
border-radius:10px;
border:none;

}


button{

padding:15px 35px;
border:none;
border-radius:30px;
background:#00aaff;

}



/* Footer */

.footer {
    background: #111;
    color: #fff;
    padding: 40px 20px;
    text-align: center;
}

.footer-container h2 {
    margin-bottom: 10px;
    font-size: 28px;
}

.footer-container p {
    margin: 8px 0;
    color: #bbb;
}

.social-links {
    margin: 20px 0;
    text-decoration:none;
}

.social-links a {
    color: #fff;
    text-decoration: none;
    margin: 0 12px;
    font-size: 16px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #00bcd4;
}

.copyright {
    margin-top: 20px;
    font-size: 14px;
    color: #888;
}



/* Mobile */

@media(max-width:800px){


nav ul{

display:none;
position:absolute;
top:75px;
left:0;
width:100%;
background:#07101f;
flex-direction:column;
text-align:center;
padding:20px;

}


nav ul.active{
display:flex;
}


.menu{
display:block;
}


.home{

flex-direction:column-reverse;
text-align:center;

}


.content{

width:100%;

}


.content h1{

font-size:40px;

}


.profile img{

width:250px;
height:250px;

}

}