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

:root{
 --bg:#0f172a;
 --bg2:#111827;
 --card:#1e293b;
 --accent:#3b82f6;
 --accent2:#38bdf8;
 --text:#f8fafc;
 --muted:#cbd5e1;
 --radius:18px;
 --shadow:0 20px 45px rgba(0,0,0,.25);
}

*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}

body{
 font-family:'Poppins',sans-serif;
 background:linear-gradient(180deg,var(--bg),var(--bg2));
 color:var(--text);
 line-height:1.7;
}

img{max-width:100%;display:block}
a{text-decoration:none}

.hero{
 min-height:100vh;
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:60px;
 padding:80px 10%;
}

.hero-content{flex:1}

.hero-intro{
 color:var(--accent2);
 font-size:1.1rem;
 margin-bottom:10px;
}

.hero h1{
 font-size:4rem;
 line-height:1.1;
 margin-bottom:10px;
}

.hero h2{
 color:var(--accent2);
 font-size:2rem;
 margin-bottom:20px;
}

.hero-description{
 max-width:650px;
 color:var(--muted);
 margin-bottom:35px;
}

.hero-buttons{
 display:flex;
 gap:18px;
 flex-wrap:wrap;
 margin-bottom:35px;
}

.btn,.btn-outline{
 padding:14px 28px;
 border-radius:999px;
 font-weight:600;
 transition:.3s;
 display:inline-block;
}

.btn{
 background:var(--accent);
 color:#fff;
}

.btn:hover{
 background:var(--accent2);
 transform:translateY(-3px);
}

.btn-outline{
 border:2px solid var(--accent);
 color:#fff;
}

.btn-outline:hover{
 background:var(--accent);
}

.social-links{
 display:flex;
 gap:20px;
 flex-wrap:wrap;
}

.social-links a{
 color:var(--muted);
 transition:.3s;
}

.social-links a:hover{
 color:var(--accent2);
}

.hero-image{
 flex:0 0 360px;
 display:flex;
 justify-content:center;
}

.hero-image img{
 width:340px;
 height:340px;
 border-radius:50%;
 object-fit:cover;
 border:6px solid rgba(255,255,255,.15);
 box-shadow:var(--shadow);
 animation:float 4s ease-in-out infinite;
}

nav{
 position:sticky;
 top:0;
 z-index:999;
 display:flex;
 justify-content:center;
 gap:35px;
 padding:18px;
 background:rgba(15,23,42,.82);
 backdrop-filter:blur(12px);
}

nav a{
 color:#fff;
 font-weight:500;
 transition:.3s;
}

nav a:hover{color:var(--accent2)}

section{
 width:min(1100px,90%);
 margin:40px auto;
 background:rgba(30,41,59,.65);
 backdrop-filter:blur(12px);
 border:1px solid rgba(255,255,255,.08);
 border-radius:var(--radius);
 padding:40px;
 box-shadow:var(--shadow);
}

h2{
 font-size:2rem;
 color:#fff;
 margin-bottom:20px;
}

.project,.startup-card,.blog-card{
 background:#162133;
 border-radius:14px;
 padding:25px;
 transition:.3s;
}

.project:hover,
.startup-card:hover,
.blog-card:hover{
 transform:translateY(-6px);
}

.contact a{color:var(--accent2)}

footer{
 text-align:center;
 padding:35px;
 margin-top:60px;
 background:#08111f;
}

@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-15px)}
}

@media(max-width:900px){
.hero{
 flex-direction:column-reverse;
 text-align:center;
}
.hero-buttons,.social-links{
 justify-content:center;
}
.hero h1{font-size:2.8rem}
.hero h2{font-size:1.5rem}
.hero-image img{
 width:250px;
 height:250px;
}
nav{
 flex-wrap:wrap;
 gap:16px;
}
section{
 padding:25px;
}
}
/* =========================
   PROJECTS
========================= */

.projects-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:30px;

margin-top:40px;

}

.project-card{

background:#162133;

padding:30px;

border-radius:18px;

transition:.35s;

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

}

.project-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.25);

}

.project-card h3{

margin-bottom:15px;

font-size:1.4rem;

}

.project-card p{

color:#cbd5e1;

margin-bottom:20px;

}

.tech-stack{

display:flex;

flex-wrap:wrap;

gap:10px;

}

.tech-stack span{

background:#3b82f6;

padding:8px 16px;

border-radius:50px;

font-size:.85rem;

color:white;

}

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

.timeline{

position:relative;

margin-top:50px;

padding-left:30px;

border-left:4px solid #3b82f6;

}

.timeline-item{

margin-bottom:50px;

position:relative;

}

.timeline-item::before{

content:"";

position:absolute;

left:-42px;

top:5px;

width:18px;

height:18px;

background:#3b82f6;

border-radius:50%;

border:4px solid #0f172a;

}

.timeline-year{

display:inline-block;

background:#3b82f6;

color:white;

padding:8px 18px;

border-radius:30px;

font-weight:600;

margin-bottom:15px;

}

.timeline-content{

background:#162133;

padding:25px;

border-radius:16px;

box-shadow:0 10px 25px rgba(0,0,0,.20);

}

.timeline-content h3{

margin-bottom:12px;

font-size:1.3rem;

}

.timeline-content p{

color:#cbd5e1;

line-height:1.8;

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

.achievement-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:30px;

margin-top:40px;

}

.achievement-card{

background:#162133;

padding:35px;

border-radius:18px;

text-align:center;

transition:.35s;

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

}

.achievement-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.30);

border-color:#3b82f6;

}

.achievement-icon{

font-size:50px;

margin-bottom:20px;

}

.achievement-card h3{

margin-bottom:15px;

font-size:1.35rem;

color:white;

}

.achievement-card p{

color:#cbd5e1;

line-height:1.8;

font-size:15px;

}

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

.contact-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

margin-top:45px;

}

.contact-card{

background:#162133;

padding:30px;

border-radius:18px;

text-align:center;

transition:.35s;

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

}

.contact-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.30);

border-color:#3b82f6;

}

.contact-card h3{

margin-bottom:20px;

font-size:1.3rem;

color:white;

}

.contact-card a{

color:#38bdf8;

font-weight:600;

word-break:break-word;

}

.contact-card a:hover{

color:white;

}
/*==========================
      RESEARCH
==========================*/

.research-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

margin-top:40px;

}

.research-card{

background:#162133;

padding:35px;

border-radius:18px;

text-align:center;

transition:.35s;

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

}

.research-card:hover{

transform:translateY(-10px);

border-color:#3b82f6;

box-shadow:0 20px 40px rgba(0,0,0,.30);

}

.research-icon{

font-size:55px;

margin-bottom:20px;

}

.research-card h3{

font-size:1.4rem;

margin-bottom:15px;

color:white;

}

.research-card p{

color:#cbd5e1;

margin-bottom:15px;

line-height:1.8;

}

.research-card span{

display:inline-block;

background:#3b82f6;

padding:8px 18px;

border-radius:50px;

font-size:.9rem;

color:white;

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

.footer{

background:#08111f;

margin-top:80px;

padding:60px 10% 25px;

}

.footer-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:40px;

}

.footer-column h3{

color:white;

margin-bottom:20px;

font-size:1.3rem;

}

.footer-column p{

color:#cbd5e1;

line-height:1.8;

margin-bottom:10px;

}

.footer-column ul{

list-style:none;

padding:0;

}

.footer-column ul li{

margin-bottom:12px;

}

.footer-column a{

color:#38bdf8;

transition:.3s;

}

.footer-column a:hover{

color:white;

padding-left:5px;

}

.footer-bottom{

margin-top:40px;

padding-top:25px;

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

text-align:center;

color:#94a3b8;

}
/*==============================
ACTIVE NAVBAR
===============================*/

nav a.active{

color:#38bdf8;

}

/*==============================
SCROLL TO TOP
===============================*/

#topBtn{

position:fixed;

bottom:30px;

right:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#3b82f6;

color:white;

font-size:22px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:999;

box-shadow:0 10px 30px rgba(0,0,0,.3);

}

#topBtn.show{

opacity:1;

visibility:visible;

}

#topBtn:hover{

background:#38bdf8;

transform:translateY(-5px);

}