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

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

html{
    scroll-behavior:smooth;
}

body{

    background:var(--bg-color);

    color:var(--primary-color);

    font-family:var(--body-font);

    overflow-x:hidden;

    line-height:1.7;

}

/* =========================================================
   ELEMENTS
========================================================= */

img{

    width:100%;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

ul{

    list-style:none;

}

button{

    cursor:pointer;

    border:none;

    background:none;

    font-family:inherit;

}

section{

    padding:120px 0;

    position:relative;

}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4{

    font-family:var(--heading-font);

    line-height:1.15;

}

h1{

    font-size:clamp(4rem,8vw,5.5rem);

}

h2{

    font-size:clamp(2rem,5vw,3rem);

}

h3{

    font-size:1.4rem;

}

p{

    color:var(--secondary-color);

}

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

#hero{

    min-height:100vh;

    display:flex;

    align-items:center;

}

.hero-content{

    max-width:760px;

}

.hero-intro{

    color:var(--accent-color);

    font-size:15px;

    margin-bottom:20px;

}

.hero-content h1{

    margin-bottom:12px;

}

.hero-content h2{

    color:var(--secondary-color);

    margin-bottom:28px;

}

.hero-content h2 span{

    display:block;

    color:var(--primary-color);

}

.hero-description{

    max-width:620px;

    font-size:18px;

    margin-bottom:40px;

}

.hero-description strong{

    color:var(--accent-color);

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:35px;

    flex-wrap:wrap;

}

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

.hero-social,
.hero-email{

    position:fixed;

    bottom:0;

    display:flex;

    flex-direction:column;

    gap:20px;

}

.hero-social{

    left:45px;

}

.hero-email{

    right:45px;

}

.hero-social a,
.hero-email a{

    color:var(--secondary-color);

    transition:.3s;

    font-size:14px;

}

.hero-social a:hover,
.hero-email a:hover{

    color:var(--accent-color);

}

.hero-email a{

    writing-mode:vertical-rl;

}

.hero-social::after,
.hero-email::after{

    content:"";

    width:1px;

    height:100px;

    background:var(--secondary-color);

    margin:auto;

}

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

.scroll-down{

    margin-top:70px;

    color:var(--accent-color);

    font-size:14px;

    animation:float 2.5s infinite;

}

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

.about-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:70px;

    align-items:center;

}

.about-text p{

    margin-bottom:22px;

}

.skills-list{

    display:grid;

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

    gap:15px;

    margin-top:30px;

}

.skills-list li{

    color:var(--primary-color);

    position:relative;

    padding-left:18px;

}

.skills-list li::before{

    content:"▹";

    position:absolute;

    left:0;

    color:var(--accent-color);

}

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

.about-card{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.stat{

    background:var(--surface-color);

    padding:30px;

    border-radius:var(--radius-lg);

    text-align:center;

    transition:.35s;

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

}

.stat:hover{

    transform:translateY(-8px);

    background:var(--surface-hover);

}

.stat h3{

    color:var(--accent-color);

    font-size:2rem;

    margin-bottom:10px;

}

/* =========================================================
   SECTION TITLE
========================================================= */

.section-title{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:70px;

}

.section-title span{

    color:var(--accent-color);

    font-size:18px;

    font-family:var(--heading-font);

}

.section-title h2{

    white-space:nowrap;

}

.section-title .line{

    width:250px;

    height:1px;

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

}

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

#hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:radial-gradient(

        rgba(100,255,218,.12),

        transparent 70%

    );

    right:-180px;

    top:5%;

    filter:blur(50px);

}

/* =========================================================
   PROGRESS BAR
========================================================= */

.progress-bar{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:3px;

    background:var(--accent-color);

    z-index:9999;

}


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

.timeline{

    position:relative;

    margin-top:60px;

    padding-left:45px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:8px;

    top:0;

    width:2px;

    height:100%;

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

}

.timeline-item{

    position:relative;

    display:flex;

    gap:40px;

    margin-bottom:60px;

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:-45px;

    top:10px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--accent-color);

    box-shadow:0 0 20px rgba(100,255,218,.35);

}

.timeline-date{

    min-width:170px;

    color:var(--accent-color);

    font-weight:600;

}

.timeline-content{

    flex:1;

    background:var(--surface-color);

    padding:30px;

    border-radius:18px;

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

    transition:.35s;

}

.timeline-content:hover{

    transform:translateY(-8px);

    background:var(--surface-hover);

}

.timeline-content h3{

    margin-bottom:15px;

}

.timeline-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:25px;

}

.timeline-tags span{

    padding:8px 18px;

    border-radius:999px;

    background:rgba(100,255,218,.08);

    color:var(--accent-color);

    font-size:14px;

}

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

.projects{

    display:flex;

    flex-direction:column;

    gap:40px;

    margin-top:60px;

}

.project-card{

    background:var(--surface-color);

    padding:40px;

    border-radius:18px;

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

    transition:.35s;

}

.project-card:hover{

    transform:translateY(-8px);

    background:var(--surface-hover);

}

.project-label{

    color:var(--accent-color);

    margin-bottom:10px;

    font-size:14px;

}

.project-card h3{

    margin-bottom:20px;

}

.project-description{

    color:var(--secondary-color);

    margin-bottom:25px;

    line-height:1.8;

}

.project-tech{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:25px;

}

.project-tech span{

    background:rgba(100,255,218,.08);

    color:var(--accent-color);

    padding:8px 16px;

    border-radius:999px;

    font-size:13px;

}

.project-links{

    display:flex;

    gap:20px;

}

.project-links a{

    color:var(--primary-color);

    font-weight:600;

}

.project-links a:hover{

    color:var(--accent-color);

}

/* ==========================================================
   SERVICES
========================================================== */

.services-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.service-card{

    background:var(--surface-color);

    padding:35px;

    border-radius:18px;

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

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-10px);

    background:var(--surface-hover);

}

.service-icon{

    font-size:40px;

    margin-bottom:20px;

}

.service-card h3{

    margin-bottom:15px;

}

.service-card p{

    line-height:1.8;

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

.contact-box{

    max-width:850px;

    margin:auto;

    text-align:center;

    background:var(--surface-color);

    padding:70px 50px;

    border-radius:20px;

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

}

.contact-subtitle{

    color:var(--accent-color);

    margin-bottom:15px;

    letter-spacing:2px;

}

.contact-box h2{

    margin-bottom:25px;

}

.contact-description{

    max-width:650px;

    margin:0 auto 40px;

}

.contact-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

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

footer{

    padding:70px 0;

    text-align:center;

}

.footer-content h3{

    margin-bottom:10px;

}

.footer-content p{

    margin-bottom:20px;

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:25px;

    margin:30px 0;

}

.footer-social a{

    color:var(--secondary-color);

    transition:.3s;

}

.footer-social a:hover{

    color:var(--accent-color);

}

.copyright{

    font-size:14px;

}