/*======================================
        GOOGLE FONTS
======================================*/

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

/*======================================
        ROOT
======================================*/

:root{

    --bg:#070b12;
    --bg2:#0d1320;

    --card:#111827;

    --green:#00ff99;

    --cyan:#00c8ff;

    --white:#ffffff;

    --gray:#b8b8b8;

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

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

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--white);

    font-family:"Times New Roman",sans-serif;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

section{

    padding:110px 8%;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-size:42px;

    font-family:"Times New Roman",sans-serif;

    color:var(--green);

}

.section-title p{

    color:var(--gray);

    margin-top:10px;

}

/*======================================
        BACKGROUND
======================================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at top right,

    rgba(0,255,153,.12),

    transparent 35%),

    radial-gradient(circle at bottom left,

    rgba(0,200,255,.12),

    transparent 35%);

    z-index:-3;

}

.grid-bg{

    position:fixed;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:45px 45px;

    z-index:-2;

}

.particles{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

}

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

.cursor-glow{

    position:fixed;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(0,255,153,.08);

    filter:blur(90px);

    pointer-events:none;

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

    z-index:1;

}

/*======================================
        LOADER
======================================*/

#loader{

    position:fixed;

    inset:0;

    background:#000;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loader-box{

    text-align:center;

}

.loader-box h1{

    font-family:"Times New Roman",sans-serif;

    font-size:60px;

    letter-spacing:4px;

}

.loader-box span{

    color:var(--green);

}

.loading-text{

    margin:20px 0;

    color:var(--gray);

}

.loading-bar{

    width:320px;

    height:8px;

    background:#222;

    border-radius:20px;

    overflow:hidden;

}

.loading-progress{

    width:0;

    height:100%;

    background:linear-gradient(90deg,var(--green),var(--cyan));

    animation:loading 2.5s forwards;

}

.loading-status{

    margin-top:20px;

    color:var(--green);

    letter-spacing:3px;

}

@keyframes loading{

    to{

        width:100%;

    }

}

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

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 8%;

    backdrop-filter:blur(18px);

    background:rgba(10,15,25,.45);

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

}

.logo{

    font-size:30px;

    font-family:"Times New Roman",sans-serif;

    color:white;

    font-weight:700;

}

.logo span{

    color:var(--green);

}

.nav-links{

    display:flex;

    gap:35px;

}

.nav-links a{

    color:white;

    transition:.35s;

    font-weight:500;

}

.nav-links a:hover{

    color:var(--green);

}

.menu-btn{

    display:none;

    font-size:24px;

    cursor:pointer;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

}

.hero-container{

    width:100%;
    max-width:1200px;

    margin:0 auto;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

}

.hero-small{

    color:var(--green);

    font-size:20px;

    margin-bottom:15px;

}

.hero h1{

    font-size:70px;

    font-family:"Times New Roman",sans-serif;

    margin-bottom:15px;

}

.hero h1 span{

    color:var(--green);

}

.typing{

    color:var(--cyan);

    font-size:28px;

    min-height:45px;

    margin-bottom:25px;

}

.hero-description{

    color:var(--gray);

    line-height:1.9;

    margin-bottom:35px;

    max-width:600px;

}
/*======================================
        HERO BUTTONS
======================================*/

.hero-buttons{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 35px;

    border-radius:50px;

    font-weight:600;

    transition:.4s;

    cursor:pointer;

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

}

.btn-primary{

    background:var(--green);

    color:#071018;

    box-shadow:0 0 25px rgba(0,255,153,.35);

}

.btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:0 0 40px rgba(0,255,153,.55);

}

.btn-outline{

    color:white;

    background:transparent;

}

.btn-outline:hover{

    background:var(--green);

    color:#071018;

}

/*======================================
        SOCIAL ICONS
======================================*/

.social-icons{

    display:flex;
    flex-direction:row;

    justify-content:center;
    align-items:center;

    gap:18px;
    margin-top:30px;

}

.social-icons a{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    color:var(--white);

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

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

    transition:.35s;

}

.social-icons a:hover{

    transform:translateY(-8px);

    color:var(--green);

    border-color:var(--green);

    box-shadow:0 0 25px rgba(0,255,153,.35);

}

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

.hero-right{

    display:flex;

    justify-content:center;

}

.image-wrapper{

    width:420px;

    height:420px;

    border-radius:50%;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.image-wrapper img{

    width:320px;

    height:320px;

    border-radius:50%;

    object-fit:cover;

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

    box-shadow:0 0 45px rgba(0,255,153,.35);

    z-index:2;

    transition:.5s;

}

.image-wrapper img:hover{

    transform:scale(1.05);

}

.circle{

    position:absolute;

    border-radius:50%;

    border:2px solid rgba(0,255,153,.25);

}

.circle1{

    width:350px;

    height:350px;

    animation:rotate1 18s linear infinite;

}

.circle2{

    width:390px;

    height:390px;

    border-color:rgba(0,200,255,.25);

    animation:rotate2 14s linear infinite reverse;

}

.circle3{

    width:430px;

    height:430px;

    border-style:dashed;

    animation:rotate1 24s linear infinite;

}

@keyframes rotate1{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes rotate2{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}

/*======================================
        SCROLL DOWN
======================================*/

.scroll-down{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

}

.scroll-down span{

    display:block;

    width:28px;

    height:50px;

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

    border-radius:40px;

    position:relative;

}

.scroll-down span::before{

    content:"";

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--green);

    left:50%;

    transform:translateX(-50%);

    animation:scroll 1.8s infinite;

}

@keyframes scroll{

    0%{

        top:8px;

        opacity:1;

    }

    100%{

        top:28px;

        opacity:0;

    }

}

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

.about-container{

    display:grid;

    grid-template-columns:1fr;

    gap:0;

    align-items:center;

    max-width:1000px;

    margin:0 auto;

}

.about-left img{

    width:100%;

    border-radius:25px;

    border:3px solid var(--green);

    box-shadow:0 0 35px rgba(0,255,153,.25);

}

.about-right h3{

    font-size:34px;

    margin-bottom:20px;

}

.about-right p{

    color:var(--gray);

    line-height:1.9;

    margin-bottom:35px;

}

.about-info{

    display:grid;

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

    gap:20px;

    margin-bottom:40px;

}

.info-box{

    padding:20px;

    background:var(--card);

    border-radius:15px;

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

}

.info-box h4{

    color:var(--green);

    margin-bottom:10px;

}

.statistics{

    display:grid;

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

    gap:20px;

}

.stat-card{

    background:var(--card);

    padding:30px;

    text-align:center;

    border-radius:18px;

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

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:var(--green);

    box-shadow:0 0 30px rgba(0,255,153,.2);

}

.stat-card h3{

    font-size:34px;

    color:var(--green);

    margin-bottom:10px;

}

.stat-card span{

    color:var(--gray);

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

.skills-container{

    display:flex;

    flex-direction:column;

    gap:60px;

}

.skill-category h3{

    font-size:28px;

    color:var(--green);

    margin-bottom:30px;

    display:flex;

    align-items:center;

    gap:12px;

}

.skill-grid{

    display:grid;

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

    gap:25px;

}

.skill-card{

    background:var(--card);

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

    border-radius:20px;

    padding:30px;

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.skill-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);

    transition:.6s;

}

.skill-card:hover::before{

    left:100%;

}

.skill-card:hover{

    transform:translateY(-10px);

    border-color:var(--green);

    box-shadow:0 0 30px rgba(0,255,153,.25);

}

.skill-card i{

    font-size:40px;

    color:var(--green);

    margin-bottom:20px;

}

.skill-card h4{

    margin-bottom:15px;

    font-size:20px;

}

.skill-card span{

    color:var(--cyan);

    font-weight:600;

}

.progress{

    width:100%;

    height:8px;

    background:#1a2434;

    border-radius:30px;

    overflow:hidden;

    margin-top:18px;

}

.progress div{

    height:100%;

    border-radius:30px;

    background:linear-gradient(90deg,var(--green),var(--cyan));

}

.language-grid{

    display:grid;

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

    gap:25px;

}

.language-card{

    background:var(--card);

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

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.language-card:hover{

    transform:translateY(-8px);

    border-color:var(--green);

}

.language-card h4{

    margin-bottom:12px;

    color:var(--green);

}

.language-card span{

    color:var(--gray);

}

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

.projects-container{

    display:grid;

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

    gap:40px;

}

.project-card{

    background:var(--card);

    border-radius:25px;

    overflow:hidden;

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

    transition:.4s;

}

.project-card:hover{

    transform:translateY(-12px);

    border-color:var(--green);

    box-shadow:0 0 35px rgba(0,255,153,.22);

}

.project-image{

    overflow:hidden;

    height:260px;

}

.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-content{

    padding:30px;

}

.project-content h3{

    font-size:28px;

    margin-bottom:18px;

}

.project-content p{

    color:var(--gray);

    line-height:1.8;

    margin-bottom:25px;

}

.project-tech{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:30px;

}

.project-tech span{

    padding:10px 18px;

    border-radius:30px;

    background:rgba(0,255,153,.12);

    color:var(--green);

    font-size:14px;

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

}

.project-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.project-buttons .btn{

    flex:1;

    min-width:160px;

}
/*======================================
        EXPERIENCE
======================================*/

.timeline{

    position:relative;

    max-width:1100px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:4px;

    height:100%;

    background:linear-gradient(var(--green),var(--cyan));

}

.timeline-item{

    width:50%;

    position:relative;

    padding:30px 50px;

}

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

    left:0;

    text-align:right;

}

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

    left:50%;

}

.timeline-dot{

    position:absolute;

    width:22px;

    height:22px;

    background:var(--green);

    border-radius:50%;

    top:42px;

    box-shadow:0 0 20px rgba(0,255,153,.6);

}

.timeline-item:nth-child(odd) .timeline-dot{

    right:-11px;

}

.timeline-item:nth-child(even) .timeline-dot{

    left:-11px;

}

.timeline-content{

    background:var(--card);

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

    border-radius:18px;

    padding:30px;

    transition:.35s;

}

.timeline-content:hover{

    transform:translateY(-8px);

    border-color:var(--green);

    box-shadow:0 0 30px rgba(0,255,153,.2);

}

.timeline-date{

    display:inline-block;

    margin-bottom:15px;

    color:var(--cyan);

    font-weight:600;

}

.timeline-content h3{

    font-size:28px;

    margin-bottom:10px;

}

.timeline-content h4{

    color:var(--green);

    margin-bottom:18px;

}

.timeline-content ul{

    list-style:disc;

    padding-left:22px;

    color:var(--gray);

    line-height:1.8;

}

.timeline-item:nth-child(odd) ul{

    text-align:left;

}

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

.education-container{

    display:grid;

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

    gap:35px;

}

.education-card{

    background:var(--card);

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

    border-radius:22px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.education-card:hover{

    transform:translateY(-10px);

    border-color:var(--green);

    box-shadow:0 0 30px rgba(0,255,153,.25);

}

.education-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,255,153,.1);

    color:var(--green);

    font-size:40px;

    margin-bottom:25px;

}

.education-card h3{

    font-size:26px;

    margin-bottom:12px;

}

.education-card h4{

    color:var(--cyan);

    margin-bottom:15px;

}

.education-card span{

    display:block;

    margin-bottom:20px;

    color:var(--gray);

}

.education-card p{

    color:var(--gray);

    line-height:1.8;

}

/*======================================
        COURSES
======================================*/

.courses-container{

    display:grid;

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

    gap:30px;

}

.course-card{

    background:var(--card);

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

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.course-card:hover{

    transform:translateY(-10px);

    border-color:var(--green);

    box-shadow:0 0 30px rgba(0,255,153,.2);

}

.course-card i{

    font-size:50px;

    color:var(--green);

    margin-bottom:20px;

}

.course-card h3{

    margin-bottom:15px;

}

.course-card p{

    color:var(--gray);

    line-height:1.8;

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

.contact-container{

    display:grid;

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

    gap:30px;

    margin-bottom:60px;

}

.contact-card{

    background:var(--card);

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

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-10px);

    border-color:var(--green);

    box-shadow:0 0 30px rgba(0,255,153,.25);

}

.contact-card i{

    font-size:45px;

    color:var(--green);

    margin-bottom:20px;

}

.contact-card h3{

    margin-bottom:15px;

}

.contact-card p,

.contact-card a{

    color:var(--gray);

    transition:.3s;

}

.contact-card a:hover{

    color:var(--green);

}

.contact-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

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

footer{

    padding:60px 8%;

    text-align:center;

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

    background:#05080f;

}

.footer-logo{

    font-size:34px;

    font-family:"Times New Roman",sans-serif;

    margin-bottom:20px;

}

.footer-logo span{

    color:var(--green);

}

footer p{

    color:var(--gray);

    margin:10px 0;

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:18px;

    margin:30px 0;

}

.footer-social a{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    background:var(--card);

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

    transition:.35s;

}

.footer-social a:hover{

    background:var(--green);

    color:#071018;

    transform:translateY(-8px);

}

.copyright{

    margin-top:25px;

    font-size:15px;

}

/*======================================
        SCROLL TOP
======================================*/

#scrollTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--green);

    color:#071018;

    font-size:22px;

    cursor:pointer;

    display:none;

    box-shadow:0 0 25px rgba(0,255,153,.35);

    transition:.35s;

    z-index:999;

}

#scrollTop:hover{

    transform:translateY(-6px);

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#070b12;

}

::-webkit-scrollbar-thumb{

    background:var(--green);

    border-radius:50px;

}

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

@media(max-width:1100px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

}

.hero-description{

margin:auto;

}

.hero-buttons,

.social-icons{

justify-content:center;

}

.about-container{

grid-template-columns:1fr;

}

.statistics{

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

}

.timeline::before{

left:20px;

}

.timeline-item{

width:100%;

left:0 !important;

padding-left:70px;

padding-right:20px;

text-align:left;

}

.timeline-dot{

left:10px !important;

right:auto !important;

}

}

@media(max-width:768px){

.nav-links{

display:none;

}

.menu-btn{

display:block;

}

.hero h1{

font-size:48px;

}

.typing{

font-size:22px;

}

.image-wrapper{

width:300px;

height:300px;

}

.image-wrapper img{

width:230px;

height:230px;

}

.statistics{

grid-template-columns:1fr;

}

.about-info{

grid-template-columns:1fr;

}

.projects-container{

grid-template-columns:1fr;

}

.skill-grid{

grid-template-columns:1fr;

}

.education-container{

grid-template-columns:1fr;

}

.courses-container{

grid-template-columns:1fr;

}

.contact-container{

grid-template-columns:1fr;

}

.section-title h2{

font-size:34px;

}

}

@media(max-width:500px){

section{

padding:90px 20px;

}

.hero h1{

font-size:38px;

}

.btn{

width:100%;

}

.hero-buttons{

flex-direction:column;

}

.image-wrapper{

width:250px;

height:250px;

}

.image-wrapper img{

width:190px;

height:190px;

}

}

/*======================================
        SIMPLE ANIMATIONS
======================================*/

.fade-up{

opacity:0;

transform:translateY(40px);

transition:.8s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

.glow{

animation:glow 2s infinite alternate;

}

@keyframes glow{

from{

box-shadow:0 0 15px rgba(0,255,153,.2);

}

to{

box-shadow:0 0 40px rgba(0,255,153,.6);

}

}