/* ===============================
GLOBAL STYLES
=============================== */

body{
margin:0;
font-family:"Segoe UI",Arial,sans-serif;
background:#F0F4F8;
color:#102A43;
}

html{
scroll-behavior:smooth;
}

/* ===============================
HERO SECTION
=============================== */

.hero{
display:flex;
justify-content:space-between;
align-items:center;
padding:4rem 2rem;
gap:2rem;
}

.hero-text h2{
font-size:2.5rem;
margin-bottom:1rem;
color:#102A43;
}

.hero-text p{
font-size:1.1rem;
line-height:1.6;
margin-bottom:1.5rem;
color:#486581;
}

.subtitle{
font-size:1.2rem;
margin-top:-10px;
color:#486581;
letter-spacing:1px;
}

/* ===============================
HERO IMAGE
=============================== */

.hero-img{
width:450px;
height:450px;
object-fit:cover;
border-radius:50%;
border:4px solid #E1E8F0;
box-shadow:0 10px 25px rgba(16,42,67,0.08);
}

/* ===============================
BUTTONS
=============================== */

.hero-buttons{
display:flex;
gap:1rem;
}

.btn{
padding:0.7rem 1.5rem;
border-radius:25px;
text-decoration:none;
color:#FDFDFD;
font-weight:500;
background:#007ACE;
transition:all 0.3s ease;
}

.btn:hover{
background:#005fa3;
transform:translateY(-2px);
}

/* button animation */

.btn.resume,
.btn.contact{
position:relative;
overflow:hidden;
transition:transform 0.2s ease, box-shadow 0.3s ease;
}

.btn.resume:hover,
.btn.contact:hover{
transform:scale(1.07);
box-shadow:0 6px 18px rgba(0,122,206,0.35);
}

.btn.resume:active,
.btn.contact:active{
transform:scale(0.95);
}

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

.contact-wrapper{
position:relative;
display:inline-block;
}

.contact-options{
position:absolute;
top:55px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:12px;
background:#FDFDFD;
padding:10px 14px;
border-radius:12px;
border:1px solid #D9E2EC;
}

.contact-options.hidden{
display:none;
}

.contact-options a{
background:#E1E8F0;
padding:10px;
border-radius:50%;
color:#102A43;
font-size:18px;
transition:0.3s;
}

.contact-options a:hover{
transform:scale(1.2);
background:#D9E2EC;
}

/* ===============================
SECTIONS
=============================== */

.about,
.skills,
.projects,
.certifications{
padding:2rem 1rem;
margin-left:1rem;
font-size:large;
}

/* ===============================
CARDS
=============================== */

.about-box,
.skill-card,
.project-card,
.cert-card{
background:#FDFDFD;
padding:1.5rem;
border-radius:16px;
margin-top:1rem;
border:1px solid #D9E2EC;
transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.about-box:hover,
.skill-card:hover,
.project-card:hover,
.cert-card:hover{
transform:translateY(-6px);
box-shadow:0 8px 22px rgba(16,42,67,0.08);
}

/* ===============================
GRID LAYOUT
=============================== */

.skills-grid,
.certification-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:1.5rem;
}

.projects-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.5rem;
}

/* ===============================
CERTIFICATIONS
=============================== */

.certifications h3{
margin-bottom:1rem;
color:#102A43;
}

.cert-card h4{
margin-bottom:0.5rem;
}

.cert-card p{
opacity:0.85;
font-size:0.95rem;
color:#486581;
}

.cert-card::before{
content:"🏆";
font-size:1.5rem;
display:block;
margin-bottom:10px;
}

.cert-btn{
display:inline-block;
margin-top:0.8rem;
padding:0.5rem 1rem;
border-radius:15px;
text-decoration:none;
color:#102A43;
background:#FFB000;
transition:0.3s;
}

.cert-btn:hover{
background:#e39a00;
}

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

.contact-options{
animation:fadeIn 0.3s ease;
}

@keyframes fadeIn{
from{
opacity:0;
transform:translate(-50%,10px);
}
to{
opacity:1;
transform:translate(-50%,0);
}
}

/* ===============================
SCROLL ANIMATION
=============================== */

.fade-in-up{
opacity:0;
transform:translateY(30px);
transition:opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.show{
opacity:1;
transform:translateY(0);
}

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

footer{
text-align:center;
padding:1.5rem;
color:#486581;
font-size:0.9rem;
border-top:1px solid #D9E2EC;
}