/* ========================================================== 
   RESET 
========================================================== */ 

html{ 
    scroll-behavior:smooth; 
} 

::selection{ 
    background:#3b82f6; 
    color:white; 
} 

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

html{ 
    scroll-behavior:smooth; 
} 

body{ 

    font-family:'Poppins',sans-serif; 

    background:#0F172A; 

    color:#F8FAFC; 

    line-height:1.6; 

    overflow-x:hidden; 

} 

img{ 
    display:block; 
    max-width:100%; 
} 

a{ 
    text-decoration:none; 
    color:inherit; 
} 

ul{ 
    list-style:none; 
} 


/* ========================================================== 
   THEME  VARIABLES 
========================================================== */ 

:root{ 

    --background:#0F172A; 
    --surface:#1E293B; 

    --primary:#3B82F6; 
    --secondary:#38BDF8; 

    --white:#F8FAFC; 
    --gray:#CBD5E1; 

    --border:#334155; 

    --radius:16px; 

    --transition:0.3s ease; 

    --max-width:1200px; 

} 

/* ========================================================== 
   COMMON CONTAINER 
========================================================== */ 

.container{ 

    width:90%; 
    max-width:var(--max-width); 

    margin:auto; 
 
} 

/* ========================================================== 
   NAVBAR 
========================================================== */ 

header{ 

    position:fixed; 

    width:100%; 

    top:0; 

    left:0; 

    z-index:999; 

    background:rgba(15,23,42,.95); 

    backdrop-filter:blur(12px); 

    border-bottom:1px solid var(--border); 

} 

.navbar{ 

    height:75px; 

    display:flex; 

    align-items:center; 

    justify-content:space-between; 

    width:90%; 

    max-width:1200px; 

    margin:auto; 

} 

.logo a{ 

    font-size:2rem; 

    font-weight:700; 

    color:var(--primary); 

} 

.nav-links{ 

    display:flex; 

    gap:35px; 

} 

.nav-links a{ 

    font-weight:500; 

    transition:var(--transition); 

} 

.nav-links a:hover{ 

    color:var(--secondary); 

} 

.menu-btn{ 

    display:none; 

    background:none; 

    border:none; 

    color:white; 

    font-size:1.6rem; 

    cursor:pointer; 

} 

/* ========================================================== 
   HERO PLACEHOLDER 
========================================================== */ 

.hero{ 

    min-height:100vh; 

    display:flex; 

    align-items:center; 

    justify-content:center; 

    padding-top:75px;   

} 

/* ========================================================== 
   HERO CONTENT 
========================================================== */ 

.hero-container{ 

    display:flex; 

    justify-content:space-between; 

    align-items:center; 

    gap:60px; 

} 

.hero-text{ 

    flex:1; 

} 

.hero-tag{ 

    color:var(--secondary); 

    margin-bottom:15px; 

    font-weight:500; 

} 

.hero h1{ 

    font-size:3.8rem; 

    line-height:1.2; 

    margin-bottom:15px; 

} 

.hero h1 span{ 

    color:var(--primary); 

} 

.hero h2{ 

    font-size:1.7rem; 

    color:var(--gray); 

    margin-bottom:25px; 

    font-weight:500; 

} 

.hero-description{ 

    max-width:650px; 

    margin-bottom:35px; 

    color:var(--gray); 

} 

.hero-buttons{ 

    display:flex; 

    gap:20px; 

    margin-bottom:35px; 

} 

.btn{ 

    padding:14px 30px; 

    border-radius:50px; 

    font-weight:600; 

    transition:var(--transition); 

} 

.primary-btn{ 

    background:var(--primary); 

} 

.primary-btn:hover{ 

    transform:translateY(-3px); 

} 

.secondary-btn{ 

    border:2px solid var(--primary); 

} 

.secondary-btn:hover{ 

    background:var(--primary); 

} 

.social-icons{ 

    display:flex; 

    gap:25px; 

} 

.social-icons i{ 

    font-size:1.7rem; 

    transition:var(--transition); 

} 

.social-icons i:hover{ 

    color:var(--secondary); 

} 

.hero-image{ 

    flex:1; 

    display:flex; 

    justify-content:center; 

} 

.profile-circle{ 

    width:320px; 

    height:320px; 

    border-radius:50%; 

    background:linear-gradient( 
        135deg, 
        var(--primary), 
        var(--secondary) 
    ); 

    display:flex; 

    justify-content:center; 

    align-items:center; 

    font-size:5rem; 

    font-weight:700; 

    color:white; 

}



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

footer{ 

    padding:25px; 

    text-align:center; 

    color:var(--gray); 

    border-top:1px solid var(--border); 

} 

/* ========================================================== 
   RESPONSIVE 
========================================================== */ 

@media(max-width:900px){ 

    .nav-links{ 

        display:none; 

    } 

    .menu-btn{ 

        display:block; 

    } 

} 

/* ========================================================== 
   ABOUT 
========================================================== */ 

#about{ 

    padding:100px 0; 

} 

.section-title{ 

    text-align:center; 

    margin-bottom:60px; 

} 

.section-title h2{ 

    font-size:2.5rem; 

    color:var(--primary); 

    margin-bottom:15px; 

} 

.section-title p{ 

    color:var(--gray); 

} 

.about-content{ 

    display:grid; 

    grid-template-columns:1fr 1fr; 

    gap:40px; 

} 

.about-card{ 

    background:var(--surface); 

    padding:35px; 

    border-radius:var(--radius); 

    border:1px solid var(--border); 

    transition:var(--transition); 

} 

.about-card:hover{ 

    transform:translateY(-8px); 

} 

.about-card h3{ 

    margin-bottom:20px; 

} 

.about-card p{ 

    color:var(--gray); 

} 

.about-card ul{ 

    display:flex; 

    flex-direction:column; 

    gap:15px; 

    color:var(--gray); 

} 

@keyframes float { 

    0% { 
        transform: translateY(0px); 
    } 

    50% { 
        transform: translateY(-12px); 
    }  

    100% { 
        transform: translateY(0px); 
    } 

} 

.profile-circle { 

    animation: float 4s ease-in-out infinite; 

} 

#hero-image{ 
    width:100%; 
    max-width:450px; 
    height:auto; 
    display:block; 

    animation:float 4s ease-in-out infinite; 
} 

/* ========================================================== 
   PROJECTS 
========================================================== */ 

#projects { 
    padding: 100px 0; 
} 

.section-title { 
    text-align: center; 
    margin-bottom: 60px; 
} 

.section-title h2 { 
    font-size: 2.5rem; 
    margin-bottom: 15px; 
} 

.section-title p { 
    max-width: 700px; 
    margin: auto; 
    color: var(--gray); 
    line-height: 1.7; 
} 

#projects-container { 

    display: grid; 

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

    gap: 30px; 

    margin-top: 50px; 

} 

.project-card{ 

    background:var(--surface); 

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

    border-radius:22px; 

    overflow:hidden; 

    transition:.35s; 

    display:flex; 

    flex-direction:column; 

    height:100%; 
 
    box-shadow:0 15px 40px rgba(0,0,0,.25); 

} 

.project-card:hover{ 

    transform:translateY(-12px); 

    box-shadow:0 30px 60px rgba(59,130,246,.25); 

} 

.project-image{ 

    width:100%; 

    height:230px; 

    object-fit:cover; 

    transition:.4s; 

} 

.project-card:hover .project-image{ 

    transform:scale(1.05); 

} 

.project-content{ 

    padding:28px; 

    display:flex; 

    flex-direction:column; 

    flex:1; 

} 

.project-category{ 

    display:inline-block; 

    align-self:flex-start; 

    padding:8px 18px; 

    border-radius:30px; 

    background:linear-gradient(135deg,#3b82f6,#8b5cf6); 

    color:white; 

    font-size:.82rem; 

    margin-bottom:18px; 

    font-weight:600; 

} 

.project-content h3{ 

    font-size:1.45rem; 

    margin-bottom:15px; 

} 

.project-content p{ 

    color:var(--gray); 

    line-height:1.7; 

    margin-bottom:22px; 

} 

.feature-container{ 
 
    display:flex; 

    flex-wrap:wrap; 

    gap:10px; 

    margin-bottom:22px; 

} 

.feature-badge{ 

    padding:7px 14px; 

    border-radius:25px; 

    background:rgba(59,130,246,.12); 

    color:var(--primary); 

    font-size:.8rem; 

    font-weight:600; 

} 

.tech-stack{ 

    display:flex; 

    flex-wrap:wrap; 

    gap:10px; 

    margin-bottom:25px; 

} 

.tech-badge{ 

    background:#1b2336; 

    color:#dce8ff; 

    padding:8px 14px; 

    border-radius:25px; 

    font-size:.8rem; 

}  

.project-links{ 

    display:flex; 

    gap:15px; 

    margin-top:auto; 

} 

.project-links a{ 

    flex:1; 

    text-align:center; 

    padding:12px; 

    border-radius:12px; 

    text-decoration:none; 

    font-weight:600;  

    transition:.3s; 

} 

.project-links a:first-child{ 

    background:#1f2937; 

    color:white; 

} 

.project-links a:last-child{ 

    background:linear-gradient(135deg,#3b82f6,#8b5cf6); 

    color:white; 

} 

.project-links a:hover{ 

    transform:translateY(-3px); 

} 

@media(max-width:950px){ 

#projects-container{ 

grid-template-columns:1fr; 

} 

} 

/* ========================================================== 
   ABOUT 
========================================================== */ 

#about{ 

    padding:100px 0; 

} 

.about-container{ 

    display:grid; 

    grid-template-columns:1.2fr .8fr; 

    gap:60px; 

    align-items:center; 

} 

.section-tag{ 

    display:inline-block; 

    background:rgba(59,130,246,.15); 

    color:var(--primary); 

    padding:8px 18px; 

    border-radius:30px; 

    font-weight:600; 

    margin-bottom:20px; 

} 

.about-text h2{ 

    font-size:2.5rem; 

    margin-bottom:25px; 

    line-height:1.3; 

} 

.about-text p{ 

    color:var(--gray); 

    line-height:1.8; 

    margin-bottom:35px; 

} 

.about-skills{ 

    display:grid; 

    gap:18px; 

} 

.highlight-item{ 

    display:flex; 

    align-items:center; 

    gap:15px; 

    background:var(--surface); 

    padding:18px 22px; 

    border-radius:16px; 

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

    transition:.3s; 

} 

.highlight-item:hover{ 

    transform:translateX(8px); 

    border-color:var(--primary); 

} 

.highlight-item span{ 

    font-size:1.2rem; 

    color:var(--primary); 

} 

.highlight-item p{ 

    margin:0; 

    font-weight:500; 

}  

.about-actions{ 

    margin-top:35px; 

} 

.primary-btn{ 

    display:inline-block; 

    padding:14px 28px; 

    border-radius:12px; 

    background:linear-gradient(135deg,#3b82f6,#8b5cf6); 

    color:white; 

    text-decoration:none; 

    font-weight:600; 

    transition:.3s; 

} 

.primary-btn:hover{ 

    transform:translateY(-3px); 
 
    box-shadow:0 15px 30px rgba(59,130,246,.3); 

} 

@media(max-width:950px){ 

.about-container{ 

grid-template-columns:1fr; 

} 

} 

/* ========================================================== 
   SKILLS 
========================================================== */ 

#skills { 
    padding: 100px 0; 
} 

#skills-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 30px; 
} 

.skill-card { 
    background: var(--surface); 
    border: 1px solid rgba(255,255,255,.08); 
    border-radius: 20px; 
    padding: 30px; 
    transition: .3s; 
} 

.skill-card:hover { 
    transform: translateY(-8px); 
    border-color: var(--primary); 
} 

.skill-card h3 { 
    margin-bottom: 25px; 
    color: var(--primary); 
} 

.skill-items { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
} 

.skill-items span { 
    padding: 10px 16px; 
    border-radius: 30px; 
    background: #1b2336; 
    color: white; 
    font-size: .9rem; 
} 

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

#contact{ 

    padding:100px 0; 

} 

.contact-container{ 

    display:grid; 

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

    gap:30px; 

} 

.contact-card{ 

    background:var(--surface); 

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

    border-radius:20px; 

    padding:35px; 

    text-align:center; 

    transition:.3s; 

} 

.contact-card:hover{ 

    transform:translateY(-10px); 

    border-color:var(--primary); 

} 

.contact-card h3{ 

    margin-bottom:18px; 

    color:var(--primary); 

} 

.contact-card p{ 

    color:var(--gray); 

} 

.contact-card a{ 

    color:white; 

    text-decoration:none; 

} 

.contact-card a:hover{ 

    color:var(--primary); 

} 

@media(max-width:900px){ 

.contact-container{ 

grid-template-columns:1fr; 

} 

} 

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

#footer{ 

    background:#0b1020; 

    padding:70px 0 35px; 

    margin-top:80px; 

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

} 

.footer-container{ 

    display:grid; 

    grid-template-columns:2fr 1fr 1fr; 

    gap:50px; 

} 

.footer-left h2{ 

    margin-bottom:15px; 

} 

.footer-left p{ 

    color:var(--gray); 

    line-height:1.7; 

} 

.footer-copy{ 

    margin-top:25px; 

    font-size:.9rem; 

} 

.footer-center ul{ 

    list-style:none; 

    padding:0; 

} 

.footer-center li{ 

    margin-bottom:12px; 

} 

.footer-center a{ 

    color:var(--gray); 

    text-decoration:none; 

    transition:.3s; 

} 

.footer-center a:hover{ 

    color:var(--primary); 

} 

.footer-right a{ 

    display:inline-block; 

    margin-top:15px; 

    color:white; 

    text-decoration:none; 

} 

.footer-right a:hover{ 

    color:var(--primary); 

} 

@media(max-width:900px){ 

.footer-container{ 

grid-template-columns:1fr; 

text-align:center; 

} 

} 

.hidden{ 
    opacity:0; 
    transform:translateY(40px); 
    transition:all .8s ease; 
} 

.show{ 
    opacity:1; 
    transform:translateY(0); 
} 

nav a.active{ 
    color:var(--primary); 
} 

#topBtn{ 

position:fixed; 

bottom:30px; 

right:30px; 

width:55px; 

height:55px; 

border-radius:50%; 

display:none; 

cursor:pointer; 

border:none; 

background:#3b82f6; 

color:white; 

font-size:22px; 

transition:.3s; 

} 

#topBtn:hover{  

transform:translateY(-5px); 

} 

#loader{ 

position:fixed; 

top:0; 

left:0; 

width:100%; 

height:100vh; 

background:#0b1120; 

display:flex; 

flex-direction:column; 

justify-content:center; 

align-items:center; 

z-index:9999; 

transition:opacity .8s; 

} 

#loader h1{ 

font-size:4rem; 

color:#3b82f6; 

margin-bottom:15px; 

} 

#loader p{ 

color:white; 

letter-spacing:2px; 

}