/* ===========================
   GOOGLE FONT
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;
    background:#0d0d0d;
    color:#ffffff;
    overflow-x:hidden;
    line-height:1.7;

}

::selection{

    background:white;
    color:black;

}

a{

    text-decoration:none;
    color:white;

}

ul{

    list-style:none;

}

img{

    max-width:100%;
}

/* ===========================
SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#555;
    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#888;

}

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

header{

    position:fixed;
    width:100%;
    top:0;
    left:0;
    z-index:1000;

    backdrop-filter:blur(15px);

    background:rgba(10,10,10,.65);

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

}

.navbar{

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 40px;

}

.logo{

    font-size:1.7rem;

    font-weight:700;

    letter-spacing:1px;

}

.logo span{

    color:#4da3ff;

}

.nav-links{

    display:flex;

    gap:35px;

}

.nav-links a{

    color:#d4d4d4;

    transition:.35s;

    font-size:.95rem;

}

.nav-links a:hover{

    color:white;

}

.menu-btn{

    display:none;

    font-size:1.8rem;

    cursor:pointer;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:100px 20px;

}

.hero-content{

    max-width:900px;

}

.small-heading{

    color:#8b8b8b;

    font-size:1rem;

    margin-bottom:15px;

}

.hero h1{

    font-size:5rem;

    font-weight:800;

    margin-bottom:10px;

    line-height:1.1;

}

.hero span{

    color:#4da3ff;

}

.hero h2{

    font-size:1.8rem;

    font-weight:500;

    color:#d6d6d6;

}

.college{

    color:#8d8d8d;

    margin-top:12px;

    font-size:1rem;

}

.typing{

    margin-top:30px;

    font-size:1.2rem;

    color:#ffffff;

    min-height:35px;

}

.hero-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.btn{

    padding:14px 32px;

    border-radius:50px;

    transition:.35s;

    font-weight:600;

}

.primary{

    background:white;

    color:black;

}

.primary:hover{

    transform:translateY(-4px);

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

}

.secondary{

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

}

.secondary:hover{

    background:white;

    color:black;

}

.scroll-down{

    position:absolute;

    bottom:35px;

    font-size:2rem;

    animation:scroll 2s infinite;

}

@keyframes scroll{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.section{

    max-width:1200px;

    margin:auto;

    padding:120px 30px;

}

.section-title{

    text-align:center;

    font-size:2.8rem;

    margin-bottom:70px;

    position:relative;

}

.section-title::after{

    content:"";

    width:70px;

    height:4px;

    background:#4da3ff;

    display:block;

    margin:15px auto;

    border-radius:50px;

}

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

.about-content{

    max-width:900px;

    margin:auto;

}

.about-content p{

    color:#c7c7c7;

    margin-bottom:25px;

    font-size:1.08rem;

}

/* ===========================
STATS
=========================== */

.stats{

    display:grid;

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

    gap:25px;

    max-width:1200px;

    margin:0 auto 80px;

    padding:0 30px;

}

.stat-card{

    background:#151515;

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

    padding:35px;

    border-radius:20px;

    text-align:center;

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:#4da3ff;

}

.stat-card h2{

    font-size:2.5rem;

    color:#4da3ff;

}

.stat-card p{

    color:#bcbcbc;

    margin-top:10px;

}

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

.skills-grid{

    display:grid;

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

    gap:22px;

}

.skill-card{

    background:#151515;

    padding:25px;

    border-radius:18px;

    text-align:center;

    transition:.35s;

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

    font-weight:500;

}

.skill-card:hover{

    transform:translateY(-8px);

    background:#1b1b1b;

    border-color:#4da3ff;

    color:#4da3ff;

}

/* ===================================================
   EXPERIENCE TIMELINE
=================================================== */

.timeline{
    position: relative;
    max-width: 900px;
    margin: auto;
    padding-left: 30px;
}

.timeline::before{
    content:"";
    position:absolute;
    left:10px;
    top:0;
    width:3px;
    height:100%;
    background:#4da3ff;
    border-radius:50px;
}

.timeline-item{

    position:relative;

    background:#151515;

    padding:25px 30px;

    margin-bottom:35px;

    border-radius:18px;

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

    transition:.35s;

}

.timeline-item::before{

    content:"";

    position:absolute;

    width:18px;
    height:18px;

    background:#4da3ff;

    border-radius:50%;

    left:-30px;
    top:30px;

}

.timeline-item:hover{

    transform:translateX(10px);

    border-color:#4da3ff;

    background:#1a1a1a;

}

.timeline-item h3{

    font-size:1.3rem;

    margin-bottom:8px;

}

.timeline-item span{

    display:block;

    color:#4da3ff;

    margin-bottom:12px;

    font-size:.95rem;

}

.timeline-item p{

    color:#bfbfbf;

}

/* ===================================================
   ACHIEVEMENTS
=================================================== */

.achievement-grid{

    display:grid;

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

    gap:25px;

}

.achievement-card{

    background:#151515;

    border-radius:18px;

    padding:30px;

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

    transition:.35s;

}

.achievement-card:hover{

    transform:translateY(-8px);

    border-color:#4da3ff;

    background:#1b1b1b;

}

.achievement-card h3{

    margin-bottom:15px;

    font-size:1.25rem;

}

.achievement-card p{

    color:#c3c3c3;

}

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

.project-grid{

    display:grid;

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

    gap:30px;

}

.project-card{

    background:#151515;

    border-radius:20px;

    padding:35px;

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

    transition:.35s;

    cursor:pointer;

}

.project-card:hover{

    transform:translateY(-10px);

    border-color:#4da3ff;

    box-shadow:0 12px 30px rgba(77,163,255,.08);

}

.project-card h3{

    margin-bottom:15px;

    font-size:1.35rem;

}

.project-card p{

    color:#bdbdbd;

}

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

.contact-grid{

    display:grid;

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

    gap:25px;

}

.contact-card{

    background:#151515;

    padding:28px;

    text-align:center;

    border-radius:18px;

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

    transition:.35s;

    font-weight:600;

}

.contact-card:hover{

    background:white;

    color:black;

    transform:translateY(-8px);

}

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

footer{

    margin-top:100px;

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

    text-align:center;

    padding:60px 20px;

    color:#9c9c9c;

}

footer h3{

    color:white;

    margin-bottom:15px;

    font-size:1.5rem;

}

footer p{

    margin:8px 0;

}

/* ===================================================
   SCROLL REVEAL
=================================================== */

.hidden{

    opacity:0;

    transform:translateY(50px);

    transition:all .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

/* ===================================================
   HOVER EFFECTS
=================================================== */

.skill-card,
.project-card,
.achievement-card,
.timeline-item,
.contact-card,
.stat-card{

    will-change:transform;

}

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

@media(max-width:1000px){

    .hero h1{

        font-size:4rem;

    }

}

@media(max-width:768px){

    .navbar{

        padding:18px 20px;

    }

    .menu-btn{

        display:block;

    }

    .nav-links{

        position:absolute;

        top:75px;

        right:-100%;

        width:230px;

        background:#111;

        flex-direction:column;

        text-align:center;

        padding:25px;

        gap:20px;

        border-radius:18px;

        transition:.4s;

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

    }

    .nav-links.active{

        right:20px;

    }

    .hero{

        padding:130px 25px 80px;

    }

    .hero h1{

        font-size:3rem;

    }

    .hero h2{

        font-size:1.3rem;

    }

    .typing{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn{

        width:220px;

        margin:auto;

    }

    .stats{

        grid-template-columns:1fr 1fr;

    }

    .section{

        padding:90px 20px;

    }

    .section-title{

        font-size:2.2rem;

    }

    .timeline{

        padding-left:25px;

    }

    .timeline-item{

        padding:22px;

    }

}

@media(max-width:550px){

    .hero h1{

        font-size:2.4rem;

    }

    .hero h2{

        font-size:1.1rem;

    }

    .section-title{

        font-size:1.9rem;

    }

    .stats{

        grid-template-columns:1fr;

    }

    .achievement-grid,
    .project-grid,
    .contact-grid,
    .skills-grid{

        grid-template-columns:1fr;

    }

    .timeline-item::before{

        width:15px;
        height:15px;

        left:-28px;

    }

}