*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

/* PAGE BACKGROUND */

body{
background:#e6e6e6;
color:#333;
display:flex;
justify-content:center;
padding:40px 0;
}

/* RESUME PAGE */

.container{
width:800px;
background:white;
padding:45px 60px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
border-radius:4px;
}


/* DOWNLOAD BUTTON */

.download-btn{
position:fixed;
top:24px;
right:24px;
z-index:100;
display:inline-flex;
align-items:center;
gap:8px;
padding:12px 20px;
background:#0077b5;
color:#fff;
border:none;
border-radius:30px;
font-family:'Poppins',sans-serif;
font-size:13px;
font-weight:500;
letter-spacing:0.5px;
cursor:pointer;
box-shadow:0 6px 16px rgba(0,119,181,0.35);
transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.download-btn:hover{
background:#005f92;
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(0,119,181,0.45);
}

.download-btn:active{
transform:translateY(0);
}

.download-btn:disabled{
opacity:0.7;
cursor:not-allowed;
transform:none;
}

@media(max-width:700px){
.download-btn{
top:12px;
right:12px;
padding:10px 16px;
font-size:12px;
}
}

@media print{
.download-btn{
display:none;
}
}


/* HEADER */

header{
text-align:center;
margin-bottom:20px;
}

header h1{
font-size:34px;
font-weight:600;
margin-bottom:12px;
}

/* CONTACT */

.contact{
display:flex;
justify-content:center;
gap:35px;
flex-wrap:wrap;
}

.contact a{
text-decoration:none;
color:#333;
font-size:14px;
}

.contact a:hover{
color:#0077b5;
}

.contact i{
margin-right:6px;
}


/* SECTIONS */

section{
margin-top:30px;
opacity:0;
transform:translateY(24px);
transition:opacity 0.6s ease, transform 0.6s ease;
}

section.show{
opacity:1;
transform:translateY(0);
}

/* SECTION HEADING pops in slightly ahead of the body */

section h2{
opacity:0;
transform:translateY(-10px);
transition:opacity 0.5s ease, transform 0.5s ease;
}

section.show h2{
opacity:1;
transform:translateY(0);
}

/* STAGGERED CHILD REVEAL — education rows, project blocks, skill list items */

.education,
#projects h4,
#projects ul,
.skills h3,
.skills li{
opacity:0;
transform:translateY(16px);
transition:opacity 0.5s ease, transform 0.5s ease;
transition-delay:calc(var(--i, 0) * 0.08s);
}

section.show .education,
#projects.show h4,
#projects.show ul,
section.show .skills h3,
section.show .skills li{
opacity:1;
transform:translateY(0);
}

/* PDF EXPORT — force every reveal animation to its finished state
   instantly, with no transition/delay, so html2canvas never captures
   content mid-fade (which was leaving sections like Projects blank) */

body.pdf-export section,
body.pdf-export section h2,
body.pdf-export .education,
body.pdf-export #projects h4,
body.pdf-export #projects ul,
body.pdf-export .skills h3,
body.pdf-export .skills li{
opacity:1 !important;
transform:none !important;
transition:none !important;
transition-delay:0s !important;
}


/* SECTION HEADINGS */

section h2{
background:#dcdcdc;
text-align:center;
padding:7px;
letter-spacing:3px;
font-size:14px;
font-weight:600;
margin-bottom:18px;
}


/* PARAGRAPH */

p{
font-size:14px;
line-height:1.6;
}


/* EDUCATION */

.education{
display:flex;
margin-bottom:15px;
}

.year{
width:140px;
font-weight:500;
}

.details p{
font-size:13px;
}


/* PROJECTS */

h4{
margin-top:12px;
margin-bottom:5px;
font-size:14px;
}

ul{
margin-left:20px;
margin-bottom:10px;
}

ul li{
font-size:13.5px;
margin-bottom:4px;
}


/* SKILLS */

.skills{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
margin-top:10px;
}

/* SKILLS TITLE */

.skills h3{
text-align:center;
margin-bottom:10px;
font-size:13px;
letter-spacing:2px;
}

/* VERTICAL DIVIDER */

.skills > div:first-child{
border-right:1px solid #cfcfcf;
padding-right:40px;
}

.skills > div:last-child{
padding-left:40px;
}


/* MOBILE */

@media(max-width:700px){

.container{
width:95%;
padding:30px;
}

.education{
flex-direction:column;
}

.skills{
grid-template-columns:1fr;
}

.skills > div:first-child{
border-right:none;
padding-right:0;
}

.skills > div:last-child{
padding-left:0;
}

.contact{
gap:15px;
}

}