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

@import url('https://fonts.googleapis.com/css2?family=Poppins: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:'Poppins',sans-serif;

    background:#050816;

    color:#ffffff;

    overflow-x:hidden;

}

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

}

input,
textarea{

    font-family:inherit;

}

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

:root{

    --primary:#0078D4;

    --primary-dark:#005FA3;

    --secondary:#7C3AED;

    --dark:#050816;

    --card:#101828;

    --light:#F8FAFC;

    --text:#CBD5E1;

    --border:rgba(255,255,255,.08);

    --radius:18px;

    --transition:.35s ease;

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

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0b1120;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#1E90FF;

}

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

.container{

    width:min(1180px,90%);

    margin:auto;

}

.section{

    padding:110px 0;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    display:inline-block;

    color:var(--primary);

    font-size:.9rem;

    letter-spacing:2px;

    font-weight:600;

    margin-bottom:12px;

}

.section-title h2{

    font-size:2.8rem;

    margin-bottom:18px;

}

.section-title p{

    max-width:700px;

    margin:auto;

    color:var(--text);

    line-height:1.8;

}

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

.btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 32px;

    border-radius:50px;

    transition:var(--transition);

    font-weight:600;

}

.btn.primary{

    background:var(--primary);

    color:#fff;

}

.btn.primary:hover{

    background:#1E90FF;

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(0,120,212,.35);

}

.btn.secondary{

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

}

.btn.secondary:hover{

    border-color:var(--primary);

    color:var(--primary);

}

/*==================================================
        HEADER
==================================================*/

.header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

    backdrop-filter:blur(18px);

    background:rgba(5,8,22,.65);

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

}

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:80px;

}

.logo{

    font-size:1.8rem;

    font-weight:800;

}

.logo span{

    color:var(--primary);

}

.navbar ul{

    display:flex;

    gap:35px;

}

.navbar a{

    color:#fff;

    transition:.3s;

    position:relative;

}

.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

.navbar a:hover::after{

    width:100%;

}

.nav-buttons{

    display:flex;

    gap:12px;

}

.nav-buttons button{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#121C2D;

    color:#fff;

}



/*==================================================
                EXPERIENCE SECTION
==================================================*/

.experience{

    background:#050816;

    position:relative;

    overflow:hidden;

}

.experience::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-180px;

    bottom:-180px;

    background:rgba(0,120,212,.08);

    filter:blur(120px);

}

.timeline{

    position:relative;

    max-width:900px;

    margin:70px auto 0;

    padding-left:40px;

}

/* Vertical Line */

.timeline::before{

    content:"";

    position:absolute;

    left:14px;

    top:0;

    width:3px;

    height:100%;

    background:linear-gradient(
        to bottom,
        var(--primary),
        rgba(0,120,212,.2)
    );

}

/*======================================
            TIMELINE ITEM
======================================*/

.timeline-item{

    position:relative;

    margin-bottom:50px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

/* Timeline Dot */

.timeline-dot{

    position:absolute;

    left:-37px;

    top:18px;

    width:24px;

    height:24px;

    border-radius:50%;

    background:var(--primary);

    border:4px solid #050816;

    box-shadow:0 0 0 8px rgba(0,120,212,.15);

    animation:timelinePulse 2s infinite;

}

/*======================================
        CONTENT CARD
======================================*/

.timeline-content{

    background:rgba(255,255,255,.03);

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

    border-radius:22px;

    padding:30px;

    transition:.35s ease;

    backdrop-filter:blur(15px);

}

.timeline-content:hover{

    transform:translateX(10px);

    border-color:var(--primary);

    box-shadow:0 20px 40px rgba(0,120,212,.20);

}

.timeline-date{

    display:inline-block;

    margin-bottom:15px;

    padding:8px 16px;

    border-radius:30px;

    background:rgba(0,120,212,.12);

    color:#4FC3F7;

    font-size:.85rem;

    font-weight:600;

}

.timeline-content h3{

    font-size:1.5rem;

    margin-bottom:8px;

}

.timeline-content h4{

    color:var(--primary);

    font-size:1rem;

    margin-bottom:18px;

    font-weight:500;

}

.timeline-content p{

    color:var(--text);

    line-height:1.8;

}

/*======================================
        HOVER EFFECT
======================================*/

.timeline-item:hover .timeline-dot{

    transform:scale(1.2);

}

.timeline-item:hover .timeline-date{

    background:var(--primary);

    color:#fff;

}

/*======================================
        ENTRY ANIMATION
======================================*/

.timeline-item{

    opacity:0;

    animation:fadeUp .8s ease forwards;

}

.timeline-item:nth-child(1){

    animation-delay:.15s;

}

.timeline-item:nth-child(2){

    animation-delay:.35s;

}

.timeline-item:nth-child(3){

    animation-delay:.55s;

}

.timeline-item:nth-child(4){

    animation-delay:.75s;

}

/*======================================
        TIMELINE PULSE
======================================*/

@keyframes timelinePulse{

    0%{

        box-shadow:0 0 0 0 rgba(0,120,212,.45);

    }

    70%{

        box-shadow:0 0 0 14px rgba(0,120,212,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(0,120,212,0);

    }

}

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

.certifications{

    position:relative;

    background:#08111F;

    overflow:hidden;

}

.certifications::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-250px;

    left:-250px;

    background:rgba(0,120,212,.08);

    filter:blur(140px);

}

.certificate-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

    position:relative;

    z-index:2;

}

/*======================================
            CERTIFICATE CARD
======================================*/

.certificate-card{

    position:relative;

    padding:35px 30px;

    border-radius:24px;

    background:rgba(255,255,255,.03);

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

    backdrop-filter:blur(18px);

    overflow:hidden;

    transition:.4s ease;

}

.certificate-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:rgba(0,120,212,.12);

    border-radius:50%;

    top:-90px;

    right:-90px;

    transition:.5s;

}

.certificate-card:hover::before{

    transform:scale(2);

}

.certificate-card:hover{

    transform:translateY(-12px);

    border-color:var(--primary);

    box-shadow:0 25px 50px rgba(0,120,212,.25);

}

/*======================================
            ICON
======================================*/

.certificate-icon{

    width:75px;

    height:75px;

    margin-bottom:25px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,120,212,.15);

    color:var(--primary);

    font-size:2rem;

    transition:.35s;

}

.certificate-card:hover .certificate-icon{

    transform:rotate(10deg) scale(1.08);

}

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

.certificate-card h3{

    font-size:1.35rem;

    margin-bottom:12px;

}

.certificate-card p{

    color:var(--text);

    line-height:1.8;

    margin-bottom:22px;

}

/*======================================
            STATUS BADGE
======================================*/

.status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:50px;

    font-size:.85rem;

    font-weight:600;

}

.status::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

}

/* Completed */

.status.completed{

    background:rgba(34,197,94,.15);

    color:#4ADE80;

}

.status.completed::before{

    background:#22C55E;

}

/* Learning */

.status.learning{

    background:rgba(251,191,36,.15);

    color:#FACC15;

}

.status.learning::before{

    background:#FBBF24;

}

/*======================================
            ENTRY ANIMATION
======================================*/

.certificate-card{

    opacity:0;

    animation:fadeUp .8s ease forwards;

}

.certificate-card:nth-child(1){

    animation-delay:.1s;

}

.certificate-card:nth-child(2){

    animation-delay:.25s;

}

.certificate-card:nth-child(3){

    animation-delay:.4s;

}

.certificate-card:nth-child(4){

    animation-delay:.55s;

}

/*==================================================
                GITHUB SECTION
==================================================*/

.github{

    position:relative;

    background:#050816;

    overflow:hidden;

}

.github::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    right:-250px;

    top:-250px;

    background:rgba(0,120,212,.08);

    filter:blur(150px);

}

.github-grid{

    display:grid;

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

    gap:25px;

    margin-top:70px;

    position:relative;

    z-index:2;

}

/*======================================
            GITHUB CARD
======================================*/

.github-card{

    position:relative;

    padding:35px 25px;

    text-align:center;

    border-radius:24px;

    background:rgba(255,255,255,.03);

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

    backdrop-filter:blur(18px);

    overflow:hidden;

    transition:.35s ease;

}

.github-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(0,120,212,.12);

    top:-90px;

    right:-90px;

    transition:.4s;

}

.github-card:hover::before{

    transform:scale(2);

}

.github-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(0,120,212,.22);

}

/*======================================
            NUMBER
======================================*/

.github-card h3{

    font-size:3rem;

    font-weight:700;

    color:var(--primary);

    margin-bottom:12px;

}

.github-card p{

    color:var(--text);

    font-size:.95rem;

    line-height:1.7;

}

/*======================================
            ICON
======================================*/

.github-card i{

    display:block;

    font-size:2.2rem;

    margin-bottom:18px;

    color:#58A6FF;

}

/*======================================
            PROFILE BUTTON
======================================*/

.github-button{

    text-align:center;

    margin-top:60px;

}

.github-button .btn{

    padding:16px 34px;

}

.github-button .btn i{

    margin-right:10px;

}

/*======================================
            HOVER EFFECT
======================================*/

.github-card:hover h3{

    transform:scale(1.05);

    transition:.3s;

}

.github-card:hover i{

    transform:rotate(8deg);

    transition:.3s;

}

/*======================================
            ENTRY ANIMATION
======================================*/

.github-card{

    opacity:0;

    animation:fadeUp .8s ease forwards;

}

.github-card:nth-child(1){

    animation-delay:.10s;

}

.github-card:nth-child(2){

    animation-delay:.25s;

}

.github-card:nth-child(3){

    animation-delay:.40s;

}

.github-card:nth-child(4){

    animation-delay:.55s;

}

/*======================================
            GITHUB USERNAME
======================================*/

.github-username{

    margin-top:18px;

    color:#58A6FF;

    font-size:1rem;

    font-weight:600;

    letter-spacing:1px;

}

/*======================================
            LIVE STATUS
======================================*/

.github-live{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:20px;

    padding:10px 18px;

    border-radius:40px;

    background:rgba(34,197,94,.12);

    color:#4ADE80;

    font-size:.85rem;

    font-weight:600;

}

.github-live::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#22C55E;

    animation:pulse 2s infinite;

}

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

.achievements{

    padding:120px 0;

    background:#08111F;

    position:relative;

    overflow:hidden;

}

.achievements::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:-300px;

    top:-250px;

    background:rgba(0,120,212,.08);

    filter:blur(150px);

}

.achievement-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

    position:relative;

    z-index:2;

}

/*============================*/

.achievement-card{

    position:relative;

    padding:40px 30px;

    text-align:center;

    border-radius:24px;

    background:rgba(255,255,255,.03);

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

    backdrop-filter:blur(16px);

    transition:.4s;

    overflow:hidden;

}

.achievement-card::before{

    content:"";

    position:absolute;

    width:200px;

    height:200px;

    border-radius:50%;

    background:rgba(0,120,212,.12);

    top:-100px;

    right:-100px;

    transition:.5s;

}

.achievement-card:hover::before{

    transform:scale(2);

}

.achievement-card:hover{

    transform:translateY(-12px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(0,120,212,.25);

}

/*============================*/

.achievement-card i{

    width:85px;

    height:85px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 25px;

    border-radius:22px;

    background:rgba(0,120,212,.15);

    color:var(--primary);

    font-size:2.2rem;

    transition:.35s;

}

.achievement-card:hover i{

    transform:rotate(10deg) scale(1.08);

}

/*============================*/

.achievement-card h3{

    font-size:1.4rem;

    margin-bottom:15px;

}

.achievement-card p{

    color:var(--text);

    line-height:1.8;

}

/*============================*/

.achievement-card:hover h3{

    color:var(--primary);

}

/*==================================================
                HIGHLIGHT BAR
==================================================*/

.highlight-bar{

    margin-top:80px;

    display:grid;

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

    gap:25px;

}

.highlight-item{

    padding:22px;

    border-radius:18px;

    background:#111827;

    text-align:center;

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

    transition:.35s;

}

.highlight-item:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

}

.highlight-item h2{

    color:var(--primary);

    font-size:2.3rem;

    margin-bottom:10px;

}

.highlight-item span{

    color:var(--text);

    font-size:.95rem;

}

/*==================================================
            ENTRY ANIMATION
==================================================*/

.achievement-card{

    opacity:0;

    animation:fadeUp .8s ease forwards;

}

.achievement-card:nth-child(1){

    animation-delay:.10s;

}

.achievement-card:nth-child(2){

    animation-delay:.25s;

}

.achievement-card:nth-child(3){

    animation-delay:.40s;

}

.achievement-card:nth-child(4){

    animation-delay:.55s;

}


/*==================================================
                SELECTION
==================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}

/* Scroll Progress */

#scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(90deg,#0078D4,#38BDF8);

    z-index:9999;

}

/* Reveal Animation */

.hidden{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

/* Mouse Glow */

.cursor-glow{

    position:fixed;

    width:250px;

    height:250px;

    border-radius:50%;

    background:radial-gradient(

        rgba(0,120,212,.18),

        transparent 70%

    );

    pointer-events:none;

    transform:translate(-50%,-50%);

    z-index:-1;

    transition:.08s linear;

}

/*==================================================
                GITHUB PROFILE
==================================================*/

.github-profile{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    margin:60px auto;

    max-width:500px;

    padding:40px;

    background:rgba(255,255,255,.03);

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

    border-radius:28px;

    backdrop-filter:blur(20px);

    transition:.35s;

}

.github-profile:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(0,120,212,.25);

}

#github-avatar{

    width:140px;

    height:140px;

    border-radius:50%;

    object-fit:cover;

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

    margin-bottom:20px;

}

#github-username{

    font-size:2rem;

    margin-bottom:12px;

}

#github-bio{

    color:var(--text);

    line-height:1.8;

}

/*==================================================
            REPOSITORY GRID
==================================================*/

.repo-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.repo-card{

    padding:30px;

    border-radius:22px;

    background:rgba(255,255,255,.03);

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

    backdrop-filter:blur(18px);

    transition:.35s;

}

.repo-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(0,120,212,.20);

}

.repo-card h3{

    margin-bottom:15px;

    color:#fff;

    font-size:1.3rem;

}

.repo-card p{

    color:var(--text);

    line-height:1.8;

    margin-bottom:25px;

    min-height:80px;

}

.repo-info{

    display:flex;

    gap:20px;

    color:var(--primary);

    font-weight:600;

    margin-bottom:20px;

}

.repo-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:600;

    transition:.3s;

}

.repo-card a:hover{

    transform:translateX(8px);

}

/*==================================================
            ENTRY ANIMATION
==================================================*/

.github-profile{

    animation:fadeUp .8s ease both;

}

.repo-card{

    opacity:0;

    animation:fadeUp .8s ease forwards;

}

.repo-card:nth-child(1){

    animation-delay:.10s;

}

.repo-card:nth-child(2){

    animation-delay:.20s;

}

.repo-card:nth-child(3){

    animation-delay:.30s;

}

.repo-card:nth-child(4){

    animation-delay:.40s;

}

.repo-card:nth-child(5){

    animation-delay:.50s;

}

.repo-card:nth-child(6){

    animation-delay:.60s;

}

/*=========================================
            PRELOADER
=========================================*/

.loader{

    position:fixed;

    inset:0;

    background:#050816;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loader::after{

    content:"";

    width:60px;

    height:60px;

    border:5px solid rgba(255,255,255,.15);

    border-top-color:var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

.loader.hide{

    opacity:0;

    visibility:hidden;

    transition:.5s;

}

/*=========================================
            CURSOR
=========================================*/

.cursor{

    position:fixed;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--primary);

    pointer-events:none;

    transform:translate(-50%,-50%);

    z-index:99999;

    transition:transform .08s linear;

}

/*=========================================
            TOAST
=========================================*/

.toast{

    position:fixed;

    bottom:30px;

    left:50%;

    transform:translateX(-50%) translateY(120px);

    background:#111827;

    color:#fff;

    padding:14px 22px;

    border-radius:12px;

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

    transition:.4s;

    z-index:99999;

}

.toast.show{

    transform:translateX(-50%) translateY(0);

}

/*=========================================
            SPINNER
=========================================*/

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}