/* ==========================
   GOOGLE FONT & RESET
========================== */

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

body {
    font-family: "Poppins", sans-serif;
    background: #f8fafc;
    color: #1e293b;
    line-height: 1.6;
}

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

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 8%;
    box-shadow: 0 5px 20px rgba(0,0,0,.05);
    z-index: 1000;
}

.logo {
    font-size: 30px;
    font-weight: 700;
    color: #2563eb;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color: #1e293b;
    font-weight: 500;
    transition: .3s;
}

.nav-links a:hover {
    color: #2563eb;
}

.theme-toggle {
    font-size: 20px;
    cursor: pointer;
    color: #2563eb;
}

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

.hero{

display:flex;

justify-content:space-between;

align-items:center;

gap:80px;

min-height:100vh;

padding:140px 10% 80px;

}

.hero-text {
    flex: 1;
}

.hero-text span {
    color: #2563eb;
    font-weight: 600;
}

.hero-text h1 {
    font-size: 60px;
    margin: 15px 0;
}
.typing-text{
    display:inline-block;
    min-width:380px;
    min-height:40px;
    color:#174ec5;
    font-weight:600;
}

.hero-text h2{
    height:50px;
    display:flex;
    align-items:center;
}

.hero-text p {
    font-size: 18px;
    margin-bottom: 30px;
    max-width: 600px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.btn {
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    transition: .3s;
    font-weight: 600;
}

.primary-btn {
    background: #2563eb;
    color: white;
}

.primary-btn:hover {
    background: #1d4ed8;
    transform: translateY(-4px);
}

.secondary-btn {
    border: 2px solid #2563eb;
    color: #2563eb;
}

.secondary-btn:hover {
    background: #2563eb;
    color: white;
}

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

.social-icons a {
    font-size: 24px;
    color: #2563eb;
    transition: .3s;
}

.social-icons a:hover {
    transform: scale(1.2);
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hero-image img{

width:420px;

height:420px;

object-fit:cover;

border-radius:30px;

box-shadow:0 25px 60px rgba(37,99,235,.18);

}

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

section{

padding:110px 10%;

}

.container {
    max-width: 1200px;
    margin: auto;
}

.section-title {
    text-align: center;
    font-size: 40px;
    margin-bottom: 50px;
    color: #0f172a;
}

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

#about p {
    max-width: 900px;
    margin: auto;
    text-align: center;
    font-size: 18px;
}

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

.skills-grid{

display:grid;

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

gap:20px;

margin-top:50px;

}

.skill-card {
    padding: 15px 28px;
    background: white;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
    transition: .3s;
    font-weight: 600;
}

.skill-card:hover {
    background: #2563eb;
    color: white;
    transform: translateY(-5px);
}

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

.projects-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}
.project-card img{

width:100%;

height:220px;

object-fit:cover;

border-radius:18px;

margin-bottom:20px;

}

.project-card{

background:white;

border-radius:20px;

padding:20px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.4s;

overflow:hidden;

}

.project-card:hover{

transform:translateY(-12px);

}

.project-card i {
    font-size: 45px;
    color: #2563eb;
    margin-bottom: 20px;
}

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

.project-card p {
    color: #475569;
}

/* ==========================
   EDUCATION
========================== */

.education-card {
    background: white;
    padding: 35px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.education-card h3 {
    color: #2563eb;
    margin-bottom: 10px;
}

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

.contact-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.contact-grid div {
    background: white;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
    transition: .3s;
}

.contact-grid div:hover {
    transform: translateY(-6px);
}

.contact-grid i {
    font-size: 30px;
    color: #2563eb;
    margin-bottom: 15px;
}

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

footer {
    background: #0f172a;
    color: white;
    text-align: center;
    padding: 30px;
}

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

@media(max-width:992px){

.hero{
    flex-direction:column-reverse;
    text-align:center;
}

.hero-buttons{
    justify-content:center;
}

.social-icons{
    justify-content:center;
}

.hero-text h1{
    font-size:45px;
}

.hero-image img{
    width:280px;
}

.nav-links{
    display:none;
}

.section-title{
    font-size:34px;
}

}

@media(max-width:576px){

.hero{
    padding-top:140px;
}

.hero-text h1{
    font-size:36px;
}

.hero-text h2{
    font-size:22px;
}

.btn{
    padding:12px 22px;
}

}
/* Reveal Animation */

section,
.project-card,
.skill-card,
.education-card{

opacity:0;

transform:translateY(40px);

transition:.8s ease;

}

.show{

opacity:1;

transform:translateY(0);

}

/* Active Navigation */

.nav-links a.active{

color:#2563eb;

font-weight:700;

}

/* Dark Mode */

body.dark-mode{

background:#0f172a;

color:white;

}

body.dark-mode .navbar{

background:#1e293b;

}

body.dark-mode .project-card,
body.dark-mode .education-card,
body.dark-mode .contact-grid div,
body.dark-mode .skill-card{

background:#1e293b;

color:white;

}

body.dark-mode .section-title{

color:white;

}

body.dark-mode .nav-links a{

color:white;

}

/* Back to Top */

.top-btn{

position:fixed;

bottom:30px;

right:30px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:#2563eb;

color:white;

font-size:22px;

cursor:pointer;

display:none;

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

transition:.3s;

z-index:999;

}

.top-btn:hover{

background:#1d4ed8;

transform:translateY(-4px);

}