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

.header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:var(--header-height);

    display:flex;
    align-items:center;

    z-index:var(--z-header);

    transition:var(--transition);

}

.header.scrolled{

    background:rgba(10,25,47,.82);

    backdrop-filter:blur(18px);

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

}

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

.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:100%;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

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

    font-size:28px;

    font-weight:700;

    color:var(--primary-color);

    transition:.3s;

}

.logo span{

    color:var(--accent-color);

}

.logo:hover{

    transform:translateY(-2px);

}

/* ==========================================================
   NAVIGATION
========================================================== */

.nav-menu{

    display:flex;

    align-items:center;

    gap:42px;

}

.nav-menu li{

    list-style:none;

}

.nav-menu a{

    position:relative;

    font-size:15px;

    color:var(--secondary-color);

    transition:.3s;

}

.nav-menu a:hover{

    color:var(--accent-color);

}

/* underline */

.nav-menu a::after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    width:0;

    height:2px;

    background:var(--accent-color);

    transition:.3s;

}

.nav-menu a:hover::after{

    width:100%;

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border-radius:10px;

    transition:.35s;

    font-weight:600;

}

.btn-primary{

    background:var(--accent-color);

    color:var(--bg-color);

}

.btn-primary:hover{

    transform:translateY(-4px);

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

}

.btn-outline{

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

    color:var(--accent-color);

}

.btn-outline:hover{

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

    transform:translateY(-4px);

}

/* ==========================================================
   HAMBURGER
========================================================== */

.hamburger{

    display:none;

    cursor:pointer;

}

.hamburger span{

    display:block;

    width:28px;

    height:2px;

    margin:6px;

    background:var(--primary-color);

    transition:.3s;

}

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

.about-card{

    background:var(--surface-color);

    border-radius:18px;

    padding:35px;

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

    box-shadow:var(--shadow-md);

}

/* ==========================================================
   STAT CARD
========================================================== */

.stat{

    border-radius:16px;

    transition:.35s;

}

.stat p{

    font-size:14px;

}

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

.section-title{

    margin-bottom:70px;

}

.section-title h2{

    color:var(--primary-color);

}

.section-title span{

    font-weight:600;

}

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

.skills-list{

    margin-top:25px;

}

.skills-list li{

    transition:.3s;

}

.skills-list li:hover{

    color:var(--accent-color);

    transform:translateX(5px);

}

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

footer{

    padding:35px 0;

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

    text-align:center;

}

footer p{

    font-size:14px;

}

/* ==========================================================
   LINKS
========================================================== */

a{

    transition:.3s;

}

/* ==========================================================
   CARD HOVER
========================================================== */

.card-hover{

    transition:.35s;

}

.card-hover:hover{

    transform:translateY(-10px);

}

/* ==========================================================
   GLASS
========================================================== */

.glass{

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

    backdrop-filter:blur(18px);

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

}

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

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border-radius:999px;

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

    color:var(--accent-color);

    font-size:14px;

}

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

.image-hover{

    overflow:hidden;

    border-radius:18px;

}

.image-hover img{

    transition:.45s;

}

.image-hover:hover img{

    transform:scale(1.08);

}

/* ==========================================================
   DIVIDER
========================================================== */

.divider{

    width:100%;

    height:1px;

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

}

/* ==========================================================
   CONTAINER SPACING
========================================================== */

.mt-1{

    margin-top:10px;

}

.mt-2{

    margin-top:20px;

}

.mt-3{

    margin-top:30px;

}

.mt-4{

    margin-top:40px;

}

.mt-5{

    margin-top:50px;

}

/* ==========================================================
   ACTIVE LINK
========================================================== */

.nav-menu a.active{

    color:var(--accent-color);

}

.nav-menu a.active::after{

    width:100%;

}