body{

font-family:Poppins;
margin:0;
color:white;
background:#0f172a;

}

#particles-js{

position:fixed;
width:100%;
height:100%;
z-index:-1;

}

header{

position:fixed;
width:100%;
background:#020617;
padding:15px 40px;

}

nav{

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

}

nav ul{

display:flex;
list-style:none;

}

nav ul li{

margin-left:25px;

}

nav a{

color:white;
text-decoration:none;

}

.logo span{

color:#f43f5e;

}

.hero{

height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;

}

.profile{

width:160px;
border-radius:50%;
margin-bottom:20px;
border:4px solid #38bdf8;

}

button{

padding:12px 25px;
background:#f43f5e;
border:none;
border-radius:25px;
color:white;
cursor:pointer;

}

section{

padding:120px 10%;

}

.skills-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:20px;

}

.card{

background:#1e293b;
padding:20px;
border-radius:10px;
text-align:center;
transition:0.3s;

}

.card:hover{

transform:scale(1.1);
background:#38bdf8;

}

.timeline{

border-left:3px solid #38bdf8;
padding-left:20px;

}

.timeline-item{

margin-bottom:30px;
position:relative;

}

.timeline-item::before{

content:'';
width:12px;
height:12px;
background:#38bdf8;
border-radius:50%;
position:absolute;
left:-27px;
top:5px;

}

.projects{

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

}

.project-card{

background:#1e293b;
padding:25px;
border-radius:10px;
transition:0.4s;

}

.project-card:hover{

transform:translateY(-10px);
background:#06b6d4;

}

footer{

text-align:center;
padding:30px;
background:#020617;

}

#chatbot{

position:fixed;
bottom:20px;
right:20px;
width:280px;
background:#1e293b;
border-radius:10px;
overflow:hidden;

}

#chat-header{

background:#38bdf8;
padding:10px;

}

#chat-body{

height:150px;
overflow:auto;
padding:10px;

}

#chat-input{

width:100%;
border:none;
padding:10px;

}