/* BASE */

*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-padding-top:110px;
}
html{
  scroll-behavior:smooth;
}
.card:hover{
  transform:translateY(-5px);
}

body{
background:#020617;
font-family:'Inter',sans-serif;
color:#e2e8f0;
line-height:1.7;
}

.section{
padding:110px 10%;
text-align:center;
}

h2{
font-size:38px;
margin-bottom:50px;
font-weight:700;
}

.section-label{
color:#38bdf8;
font-size:13px;
letter-spacing:2px;
margin-bottom:10px;
}


/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:22px 10%;
border-bottom:1px solid rgba(255,255,255,0.05);
}

.navbar{
position:sticky;
top:0;
z-index:1000;
background:#020617;
}
.logo{
font-weight:700;
font-size:20px;
color:#38bdf8;
}

nav a{
margin-left:28px;
text-decoration:none;
color:#94a3b8;
transition:0.3s;
}

nav a:hover{
color:#38bdf8;
}


/* HERO */

.hero{
padding:160px 10% 140px;
text-align:center;
max-width:900px;
margin:auto;
}

.hero-name{
font-size:58px;
font-weight:700;
}

.gradient{
background:linear-gradient(90deg,#38bdf8,#6366f1,#a855f7);
-webkit-background-clip:text;
color:transparent;
}

.hero h2{
color:#94a3b8;
margin-top:10px;
}

.hero p{
max-width:650px;
margin:auto;
margin-top:20px;
color:#94a3b8;
}

.hero-buttons{
margin-top:35px;
}

.btn-primary{
padding:12px 26px;
background:linear-gradient(90deg,#38bdf8,#6366f1);
border-radius:6px;
color:white;
text-decoration:none;
margin-right:15px;
transition:0.3s;
}

.btn-primary:hover{
box-shadow:0 10px 25px rgba(99,102,241,0.4);
}

.btn-outline{
padding:12px 26px;
border:1px solid #38bdf8;
border-radius:6px;
text-decoration:none;
color:#38bdf8;
}

.btn-outline:hover{
background:#38bdf8;
color:#020617;
}
.hero{
text-align:center;
padding:140px 10% 120px;
max-width:1100px;
margin:auto;
}

.hero-name{
font-size:110px;
line-height:1;
font-weight:800;
}

.hero-name .first{
display:block;
color:#d1d5db;
}

.hero-name .last{
display:block;

background:linear-gradient(90deg,#38bdf8,#6366f1,#a855f7);

-webkit-background-clip:text;
color:transparent;
}


/* ROLE */

.hero-role{
display:flex;
align-items:center;
justify-content:center;
gap:18px;
margin-top:25px;
margin-bottom:25px;
}

.hero-role .line{
width:80px;
height:2px;
background:linear-gradient(90deg,#38bdf8,#6366f1);
opacity:0.7;
}

.role-text{
color:#38bdf8;
letter-spacing:2px;
font-size:18px;
}


/* DESCRIPTION */

.hero-desc{
max-width:700px;
margin:auto;
color:#94a3b8;
font-size:20px;
line-height:1.6;
margin-bottom:40px;
}


/* BUTTON AREA */

.hero-buttons{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

.hero-social{
display:flex;
gap:15px;
margin-left:10px;
}

.hero-social img{
width:22px;
opacity:0.7;
transition:0.3s;
}

.hero-social img:hover{
opacity:1;
transform:translateY(-2px);
}

/* ABOUT */

.about-box{
max-width:800px;
margin:auto;
padding:40px;
background:rgba(255,255,255,0.02);
border-left:3px solid #38bdf8;
border-right:3px solid #6366f1;
border-radius:10px;
}
.about-container{
display:grid;
grid-template-columns:1.3fr 1fr;
gap:60px;
align-items:center;
margin-top:60px;
}

.about-text{
text-align:left;
color:#94a3b8;
font-size:18px;
line-height:1.8;
}

.about-text p{
margin-bottom:22px;
}

.about-tag{
color:#38bdf8;
font-size:14px;
letter-spacing:2px;
margin-bottom:20px;
}


/* RIGHT SIDE */

.about-highlights{
display:flex;
flex-direction:column;
gap:25px;
}

.highlight-card{
padding:28px;
border:1px solid rgba(255,255,255,0.08);
border-radius:16px;
background:rgba(255,255,255,0.02);
transition:0.3s;
}

.highlight-card:hover{
border-color:#38bdf8;
transform:translateY(-5px);
box-shadow:0 0 20px rgba(56,189,248,0.2);
}

.highlight-card h3{
margin-bottom:10px;
color:white;
}

.highlight-card p{
color:#94a3b8;
font-size:15px;
}

/* GRID LAYOUTS */

.skills-grid,
.projects-grid,
.cert-grid,
.contact-grid,
.achievements-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
}


/* UNIVERSAL CARD STYLE */

.box,
.achieve-card,
.contact-card{

background:rgba(255,255,255,0.02);
border:1px solid rgba(255,255,255,0.08);
border-radius:14px;
padding:30px;
transition:all 0.35s ease;
position:relative;
text-decoration:none;
color:white;
}

.box:hover,
.achieve-card:hover,
.contact-card:hover{

transform:translateY(-6px);

border-color:#38bdf8;

box-shadow:
0 0 10px rgba(56,189,248,0.25),
0 0 20px rgba(56,189,248,0.15);
}

.section-sub{
color:#94a3b8;
max-width:600px;
margin:auto;
margin-bottom:60px;
}


/* GRID */

.projects-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;
margin-top:60px;
}


/* CARD */

.project-card{

background:rgba(255,255,255,0.02);
border:1px solid rgba(255,255,255,0.08);

border-radius:18px;
padding:32px;

transition:0.35s;
}

.project-card:hover{
border-color:#38bdf8;
transform:translateY(-6px);

box-shadow:
0 0 12px rgba(56,189,248,0.25),
0 0 25px rgba(56,189,248,0.15);
}


/* TOP ROW */

.project-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.project-left{
display:flex;
align-items:center;
gap:15px;
}

.project-icon{
width:42px;
height:42px;

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

background:#071a2f;
border-radius:12px;

font-size:20px;
}

.project-number{
font-size:28px;
font-weight:700;
color:#38bdf8;
}



/* GITHUB BUTTON */

.github-btn{
display:flex;
align-items:center;
gap:8px;

padding:6px 12px;

border:1px solid rgba(255,255,255,0.1);
border-radius:10px;

font-size:13px;
color:#94a3b8;
text-decoration:none;

transition:0.3s;
}

.github-btn img{
width:14px;
}

.github-btn:hover{
border-color:#38bdf8;
color:#38bdf8;
}


/* PROJECT TEXT */

.project-card h3{
margin-bottom:10px;
}

.project-card p{
color:#94a3b8;
margin-bottom:18px;
}


/* TAGS */

.tech-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.tech-tags span{

background:#0f172a;
padding:6px 12px;

border-radius:20px;

font-size:12px;
color:#cbd5f5;
}
/* TAGS */

.tags{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:10px;
}

.tags span{
background:#0f172a;
padding:6px 12px;
border-radius:20px;
font-size:13px;
color:#cbd5f5;
}
/* PUBLICATION CARD */

.publication-card{

max-width:720px;        /* smaller card width */

margin:40px auto;

padding:22px 26px;      /* smaller padding */

border:1px solid rgba(255,255,255,0.08);

border-radius:14px;

background:rgba(255,255,255,0.02);

transition:0.3s;
}
.publication-card{
text-align:center;
}


/* HOVER */

.publication-card:hover{

border-color:#38bdf8;

box-shadow:0 0 10px rgba(56,189,248,0.25);

transform:translateY(-3px);

}


/* TOP */

.pub-top{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin-bottom:14px;
}

.pub-desc{
margin:auto;
max-width:520px;
}
/* ICON */

.pub-icon{

width:30px;
height:30px;

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

background:#071a2f;

border-radius:8px;

font-size:14px;
}


/* TAGS */

.pub-tag{

padding:3px 8px;

font-size:10px;

border-radius:8px;

background:#0f172a;

color:#94a3b8;
}

.pub-tag.highlight{
color:#38bdf8;
}
/* TIMELINE */

.timeline{

position:relative;

margin-top:60px;

display:flex;
flex-direction:column;

gap:40px;
}

/* vertical line */

.timeline::before{

content:"";

position:absolute;

left:20px;

top:0;

bottom:0;

width:2px;

background:rgba(255,255,255,0.08);
}


/* ITEM */

.timeline-item{

display:flex;

gap:30px;

position:relative;
}


/* DOT */

.timeline-dot{

width:14px;
height:14px;

border-radius:50%;

background:#020617;

border:3px solid #38bdf8;

position:relative;

margin-left:13px;

z-index:2;
}


/* CARD */

.exp-card{

flex:1;

background:rgba(255,255,255,0.02);

border:1px solid rgba(255,255,255,0.08);

border-radius:16px;

padding:28px;

text-align:left;   /* add this */

transition:0.3s;
}

.exp-card:hover{

border-color:#38bdf8;

box-shadow:0 0 15px rgba(56,189,248,0.25);

transform:translateY(-5px);
}


/* HEADER */

.exp-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:10px;
}

.exp-header h3{
margin-bottom:4px;
}

.company{

color:#38bdf8;

font-size:14px;
}


/* ICON */

.exp-icon{

width:42px;
height:42px;

display:flex;

align-items:center;
justify-content:center;

background:#071a2f;

border-radius:12px;
}


/* DESCRIPTION */

.exp-desc{

color:#94a3b8;

margin:12px 0 18px;
}


/* TAGS */

.exp-tags{

display:flex;

gap:10px;

flex-wrap:wrap;
}

.exp-tags span{

background:#0f172a;

padding:6px 12px;

border-radius:20px;

font-size:12px;

color:#cbd5f5;
}

/* QUOTE */

.quote{

font-size:24px;

color:#38bdf8;

margin-bottom:4px;
}


/* TITLE */

.publication-card h3{

font-size:19px;

margin-bottom:6px;
}


/* JOURNAL */

.journal{

font-size:14px;

color:#38bdf8;

margin-bottom:8px;
}


/* DESCRIPTION */

.pub-desc{

font-size:14px;

color:#94a3b8;

line-height:1.5;

max-width:520px;
}
.cert-grid{

display:grid;

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

gap:28px;

margin-top:60px;
}


/* CARD */

.cert-card{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

padding:22px 26px;

background:rgba(255,255,255,0.02);

border:1px solid rgba(255,255,255,0.08);

border-radius:16px;

transition:0.3s;
}

.cert-card:hover{

border-color:#38bdf8;

transform:translateY(-5px);

box-shadow:0 0 15px rgba(56,189,248,0.2);
}


/* BADGE */

.cert-badge{

width:50px;
height:50px;

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

background:linear-gradient(135deg,#f59e0b,#fbbf24);

border-radius:12px;

font-weight:600;

color:#111827;
}


/* TEXT */

.cert-info h3{

font-size:17px;

margin-bottom:4px;
}

.cert-info p{

color:#94a3b8;

font-size:14px;
}


/* CHECK */

.cert-check{

color:#10b981;

font-size:18px;
}

/* TIMELINE */

.timeline{
display:grid;
gap:30px;
max-width:800px;
margin:auto;
}

.timeline h4{
color:#94a3b8;
margin-bottom:8px;
}


/* ACHIEVEMENTS */

.icon{
font-size:28px;
margin-bottom:15px;
}

.tag{
font-size:13px;
color:#38bdf8;
display:block;
margin:6px 0 10px;
}


/* CONTACT SECTION */

.contact-section{
text-align:center;
}

.contact-title{
font-size:42px;
margin-top:10px;
margin-bottom:15px;
}

.contact-sub{
color:#94a3b8;
max-width:600px;
margin:auto;
margin-bottom:60px;
}


/* GRID */

.contact-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
gap:25px;
}


/* CARD */

.contact-card{
display:flex;
justify-content:space-between;
align-items:center;

padding:22px 28px;

border:1px solid rgba(255,255,255,0.08);
border-radius:16px;

background:rgba(255,255,255,0.02);

text-decoration:none;
color:white;

transition:all 0.3s ease;
}
.contact-icon svg{
width:22px;
height:22px;
stroke:#38bdf8;
}
.contact-card:hover{

border-color:#38bdf8;

box-shadow:
0 0 10px rgba(56,189,248,0.25),
0 0 25px rgba(56,189,248,0.15);

transform:translateY(-3px);

}


/* LEFT SIDE */

.contact-left{
display:flex;
align-items:center;
gap:18px;
}


/* ICON */

.contact-icon{

width:46px;
height:46px;

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

background:#071a2f;

border:1px solid rgba(56,189,248,0.25);

border-radius:12px;

color:#38bdf8;

font-size:20px;

}


/* TEXT */

.contact-label{

font-size:11px;
letter-spacing:2px;
color:#64748b;
display:block;

}

.contact-text{
font-size:15px;
margin-top:3px;
color:#e2e8f0;
}


/* ARROW */

.contact-arrow{

color:#94a3b8;
font-size:18px;

transition:0.3s;

}

.contact-card:hover .contact-arrow{
color:#38bdf8;
}


/* FOOTER */

.footer{
margin-top:120px;
}

.footer-line{
height:1px;
background:rgba(255,255,255,0.08);
margin-bottom:30px;
}

.footer-content{
display:flex;
align-items:center;
justify-content:space-between;
padding:0 10%;
color:#94a3b8;
flex-wrap:wrap;
gap:20px;
}

.footer-logo{
color:#38bdf8;
font-weight:600;
}

.footer-icons a{
margin-left:20px;
color:#94a3b8;
text-decoration:none;
font-size:18px;
transition:0.3s;
}

.footer-icons a:hover{
color:#38bdf8;
}
.footer-icons img{
width:20px;
height:20px;
opacity:0.7;
transition:0.3s;
}


.footer-icons img:hover{
opacity:1;
transform:translateY(-2px);
}

/* MOBILE */

@media(max-width:768px){

.hero-name{
font-size:42px;
}

.section{
padding:90px 7%;
}

nav{
display:none;
}

.footer-content{
flex-direction:column;
text-align:center;
}

}