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

:root{

    --bg:#050812;
    --bg2:#09131f;
    
    --card:#0c1624;
    --card2:#122234;
    
    --border:rgba(255,255,255,.08);
    
    --primary:#22d3c5;
    --primary2:#35f2ff;
    
    --white:#fff;
    --text:#d2d7df;
    --muted:#97a1b3;
    
    --radius:22px;
    
    --shadow:
    0 15px 45px rgba(0,0,0,.45);
    
    --transition:.35s;
    
    }
    
    body.light{
    
    --bg:#f7fafc;
    --bg2:#ffffff;
    
    --card:#ffffff;
    --card2:#f4f7fb;
    
    --border:#dfe7ef;
    
    --white:#111827;
    --text:#334155;
    --muted:#64748b;
    
    }
    
    /*====================*/
    
    *{
    
    margin:0;
    padding:0;
    box-sizing:border-box;
    
    }
    
    html{
    
    scroll-behavior:smooth;
    
    }
    
    body{
    
    font-family:Inter,sans-serif;
    
    background:var(--bg);
    
    color:var(--white);
    
    overflow-x:hidden;
    
    transition:.4s;
    
    }
    
    a{
    
    text-decoration:none;
    
    color:inherit;
    
    }
    
    img{
    
    display:block;
    max-width:100%;
    
    }
    
    .container{
    
    width:min(1320px,92%);
    margin:auto;
    
    }
    
    /*======================
    BACKGROUND
    =======================*/
    
    .bg-blur{
    
    position:fixed;
    
    border-radius:50%;
    
    filter:blur(120px);
    
    pointer-events:none;
    
    z-index:-1;
    
    opacity:.45;
    
    }
    
    .blur1{
    
    width:420px;
    height:420px;
    
    background:#11d6ca;
    
    top:-120px;
    left:-150px;
    
    }
    
    .blur2{
    
    width:500px;
    height:500px;
    
    background:#143dff;
    
    right:-180px;
    top:180px;
    
    }
    
    /*======================
    HEADER
    =======================*/
    
    header{
    
    position:fixed;
    
    top:0;
    
    left:0;
    
    width:100%;
    
    z-index:999;
    
    transition:.4s;
    background: rgba(8, 13, 23, .1);
    backdrop-filter: blur(14px);
    
    }
    
    header.scrolled{
    
    background:rgba(6,10,18,.85);
    
    backdrop-filter:blur(18px);
    
    border-bottom:1px solid rgba(255,255,255,.05);
    
    }
    
    .nav-wrapper{
    
    height:92px;
    
    display:flex;
    
    align-items:center;
    
    justify-content:space-between;
    
    }
    
    .logo{
    
    display:flex;
    
    gap:15px;
    
    align-items:center;
    
    }
    
    .logo-circle{
    
    width:48px;
    height:48px;
    
    border-radius:50%;
    
    background:linear-gradient(135deg,#22d3c5,#12b0ff);
    
    display:flex;
    
    align-items:center;
    justify-content:center;
    
    font-weight:800;
    
    font-size:18px;
    
    color:#fff;
    
    box-shadow:0 0 30px rgba(34,211,197,.4);
    
    }
    
    .logo-text h4{
    
    font-size:18px;
    
    font-weight:700;
    
    margin-bottom:2px;
    
    }
    
    .logo-text span{
    
    font-size:13px;
    
    color:var(--muted);
    
    }
    
    nav{
    
    display:flex;
    
    gap:36px;
    
    }
    
    nav a{
    
    font-size:15px;
    
    font-weight:500;
    
    color:var(--text);
    
    position:relative;
    
    transition:.3s;
    
    }
    
    nav a:hover{
    
    color:var(--white);
    
    }
    
    nav a.active{
    
    color:var(--white);
    
    }
    
    nav a.active:after{
    
    content:"";
    
    position:absolute;
    
    left:0;
    bottom:-18px;
    
    width:100%;
    
    height:3px;
    
    border-radius:50px;
    
    background:var(--primary);
    
    }
    
    .nav-right{
    
    display:flex;
    
    gap:18px;
    
    align-items:center;
    
    }
    
    .theme-btn{
    
    width:52px;
    height:52px;
    
    border-radius:50%;
    
    border:1px solid var(--border);
    
    background:transparent;
    
    cursor:pointer;
    
    font-size:18px;
    
    color:#fff;
    
    transition:.35s;
    
    }
    
    .theme-btn:hover{
    
    transform:rotate(180deg);
    
    border-color:var(--primary);
    
    }
    
    .work-btn{
    
    height:54px;
    
    padding:0 30px;
    
    border-radius:50px;
    
    display:flex;
    
    align-items:center;
    
    gap:12px;
    
    background:linear-gradient(135deg,#21d4ca,#2de5b8);
    
    color:var(--white);
    
    font-weight:700;
    
    box-shadow:0 10px 30px rgba(25,225,195,.35);
    
    transition:.35s;
    
    }
    
    .work-btn:hover{
    
    transform:translateY(-4px);
    
    box-shadow:0 20px 40px rgba(24,224,197,.45);
    
    }
    
    .mobile{
    
    display:none;
    
    font-size:30px;
    
    cursor:pointer;
    
    }
    
    /*=========================
    HERO
    =========================*/
    
    .hero{
    
        padding-top: 150px;
        padding-bottom: 20px;
    
    position:relative;
    overflow: hidden;
    
    }
    
    .hero-grid{
    
    display:grid;
    
    grid-template-columns:1fr 1fr;
    
    align-items:center;
    
    gap:60px;
    
    }
    
    .badge{
    
    display:inline-flex;
    
    align-items:center;
    
    gap:10px;
    
    padding:10px 20px;
    
    border-radius:50px;
    
    border:1px solid var(--border);
    
    background:rgba(255,255,255,.03);
    
    backdrop-filter:blur(15px);
    
    font-size:13px;
    
    letter-spacing:.4px;
    
    margin-bottom:28px;
    
    }
    
    .hero h1{
    
    font-size: 70px;
    
    line-height:.95;
    
    font-weight:900;
    
    margin-bottom:30px;
    
    }
    
    .hero h1 span{
    
    background:linear-gradient(135deg,#28ffe2,#26d7ff);
    
    -webkit-background-clip:text;
    
    -webkit-text-fill-color:transparent;
    
    animation:gradientMove 5s linear infinite;
    
    }
    
    .hero p{
    
    font-size:16px;
    
    line-height:1.8;
    
    color:var(--text);
    
    max-width:650px;
    
    margin-bottom:40px;
    
    }
    
    .buttons{
    
    display:flex;
    
    gap:18px;
    
    margin-bottom:60px;
    
    }
    
    .primary-btn{
    
    height:60px;
    
    padding:0 34px;
    
    display:flex;
    
    align-items:center;
    
    border-radius:50px;
    
    background:linear-gradient(135deg,#21d4ca,#2de5b8);
    
    font-weight:700;
    
    transition:.35s;
    
    box-shadow:0 12px 30px rgba(34,211,197,.35);
    cursor: pointer;
    
    }
    
    .primary-btn:hover{
    
    transform:translateY(-5px);
    
    }
    
    .secondary-btn{
    
    height:60px;
    
    padding:0 34px;
    
    display:flex;
    
    align-items:center;
    
    border-radius:50px;
    
    border:1px solid var(--border);
    
    transition:.35s;
    
    }
    
    .secondary-btn:hover{
    
    border-color:var(--primary);
    
    transform:translateY(-5px);
    
    }
    
    .trusted h5{
    
    font-size:13px;
    
    letter-spacing:2px;
    
    margin-bottom:22px;
    
    color:var(--muted);
    
    }
    
    .tools{
    
    display:flex;
    
    flex-wrap:wrap;
    
    gap:28px;
    
    }
    
    .tools span{
    
    font-weight:600;
    
    color:var(--text);
    
    }
    
    /*==========================
    RIGHT
    ==========================*/
    
    .hero-right{
    
    position:relative;
    
    height:720px;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    }
    
    .glow{
    
    position:absolute;
    
    width:520px;
    height:520px;
    
    border-radius:50%;
    
    background:radial-gradient(circle,#22d3c5 0%,transparent 70%);
    
    filter:blur(90px);
    
    opacity:.28;
    
    }
    
    .robot{
    
    width:300px;
    
    position:relative;
    
    z-index:5;
    
    animation:floatRobot 5s ease-in-out infinite;
    
    }
    
    .floating{
    
    position:absolute;
    
    width: auto;
    height: auto;
    padding: 20px;
    gap: 5px;
    background:var(--bg2);
    
    backdrop-filter:blur(20px);
    
    border-radius:20px;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    text-align:center;
    
    border:1px solid rgba(34,211,197,.25);
    
    font-weight:700;
    
    transition:.35s;
    
    box-shadow:0 20px 35px rgba(0,0,0,.25);
    z-index: 5;
    
    }

    .floating i {
        font-size: 36px;
    }
    
    .floating:hover{
    
    transform:translateY(-8px) scale(1.05);
    
    border-color:#21d4ca;
    
    box-shadow:0 0 40px rgba(34,211,197,.3);
    
    }
    
    .card1{
    
    left:40px;
    top:88px;
    
    animation:float1 5s infinite;
    
    }
    
    .card2{
    
    right:40px;
    top:88px;
    
    animation:float2 6s infinite;
    
    }
    
    .card3{
    
    left:0;
    top:240px;
    
    animation:float3 4s infinite;
    
    }
    
    .card4{
    
    right:58px;
    top:230px;
    
    animation:float4 5s infinite;
    
    }
    
    .card5{
    
    left:50px;
    bottom:140px;
    
    animation:float5 6s infinite;
    
    }
    
    .card6{
    
    right:30px;
    bottom:180px;
    
    animation:float6 5s infinite;
    
    }
    
    /*=====================
    ANIMATIONS
    =====================*/
    
    @keyframes floatRobot{
    
    0%,100%{
    
    transform:translateY(0);
    
    }
    
    50%{
    
    transform:translateY(-22px);
    
    }
    
    }
    
    @keyframes float1{
    
    50%{
    
    transform:translateY(-15px);
    
    }
    
    }
    
    @keyframes float2{
    
    50%{
    
    transform:translateY(18px);
    
    }
    
    }
    
    @keyframes float3{
    
    50%{
    
    transform:translateX(-12px);
    
    }
    
    }
    
    @keyframes float4{
    
    50%{
    
    transform:translateX(12px);
    
    }
    
    }
    
    @keyframes float5{
    
    50%{
    
    transform:translateY(-18px);
    
    }
    
    }
    
    @keyframes float6{
    
    50%{
    
    transform:translateY(18px);
    
    }
    
    }
    
    @keyframes gradientMove{
    
    0%{
    
    filter:hue-rotate(0);
    
    }
    
    100%{
    
    filter:hue-rotate(360deg);
    
    }
    
    }
    
    /*======================
    RESPONSIVE
    ======================*/
    
    @media(max-width:1100px){
    
    .hero-grid{
    
    grid-template-columns:1fr;
    
    }
    
    .hero-right{
    
    height:600px;
    
    margin-top:50px;
    
    }
    
    .hero h1{
    
    font-size:70px;
    
    }
    
    nav{
    
    display:none;
    
    }
    
    .mobile{
    
    display:block;
    
    }
    
    }
    
    @media(max-width:768px){
    
    .hero{
    
    padding-top:140px;
    
    }
    
    .hero h1{
    
    font-size:52px;
    
    }
    
    .hero p{
    
    font-size:16px;
    
    }
    
    .buttons{
    
    flex-direction:column;
    
    }
    
    .floating{
    
    display:none;
    
    }
    
    .robot{
    
    width:300px;
    
    }
    
    .hero-right{
    
    height:360px;
    
    }
    
    .work-btn{
    
    display:none;
    
    }
    
    }

    /*=========================
INTRO SECTION
=========================*/

.intro-section{

    padding:40px 0 0px;
    
    }
    
    .intro-wrapper{
    
    display:grid;
    
    grid-template-columns: 1fr repeat(3,1fr);
    
    gap:18px;
    
    padding:34px;
    
    border:1px solid var(--border);
    
    border-radius:30px;
    
    background:rgba(255,255,255,.02);
    
    backdrop-filter:blur(20px);
    
    position:relative;
    
    overflow:hidden;
    
    }
    
    .intro-wrapper::before{
    
    content:"";
    
    position:absolute;
    
    width:400px;
    height:400px;
    
    background:radial-gradient(circle,var(--primary),transparent 70%);
    
    opacity:.08;
    
    left:-180px;
    top:-180px;
    
    }
    
    .intro-profile{
    
    display:flex;
    
    align-items:flex-start;
    
    gap:24px;
    
    position:relative;
    
    z-index:2;
    
    }
    
    .profile-icon{
    
    width:58px;
    height:58px;
    
    border-radius:50%;
    
    background:linear-gradient(135deg,#20283c,#121a2b);
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:28px;
    
    font-weight:800;
    
    color:var(--primary);
    
    border:1px solid rgba(255,255,255,.08);
    
    flex-shrink:0;
    
    }
    
    .profile-content h2{
    
    font-size:34px;
    
    margin-bottom:16px;
    
    font-weight:800;
    
    }
    
    .profile-content p{
    
    font-size:18px;
    
    line-height:1.8;
    
    color:var(--text);
    
    margin-bottom:26px;
    
    max-width:520px;
    
    }
    
    .outline-btn{
    
    display:inline-flex;
    
    align-items:center;
    
    justify-content:center;
    
    padding:15px 28px;
    
    border-radius:40px;
    
    border:1px solid rgba(255,255,255,.08);
    
    font-weight:600;
    
    transition:.35s;
    
    }
    
    .outline-btn:hover{
    
    background:var(--primary);
    
    border-color:var(--primary);
    
    color:#fff;
    
    transform:translateY(-4px);
    
    }
    
    .intro-card{
    
    background:rgba(255,255,255,.02);
    
    border:1px solid var(--border);
    
    border-radius:22px;
    
    padding:30px 22px;
    
    transition:.35s;
    
    position:relative;
    
    overflow:hidden;
    
    }
    
    .intro-card::before{
    
    content:"";
    
    position:absolute;
    
    left:0;
    top:0;
    
    width:100%;
    height:3px;
    
    background:linear-gradient(90deg,var(--primary),transparent);
    
    transform:scaleX(0);
    
    transition:.4s;
    
    transform-origin:left;
    
    }
    
    .intro-card:hover{
    
    transform:translateY(-10px);
    
    border-color:rgba(34,211,197,.45);
    
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    
    }
    
    .intro-card:hover::before{
    
    transform:scaleX(1);
    
    }
    
    .intro-icon{
    
    font-size:28px;
    
    margin-bottom:22px;
    
    color:var(--primary);
    
    }
    
    .intro-card h3{
    
    font-size:22px;
    
    line-height:1.4;
    
    margin-bottom:16px;
    
    }
    
    .intro-card p{
    
    font-size:16px;
    
    line-height:1.8;
    
    color:var(--text);
    
    }
    
    /*=========================
    RESPONSIVE
    =========================*/
    
    @media(max-width:1200px){
    
    .intro-wrapper{
    
    grid-template-columns:1fr 1fr;
    
    }
    
    .intro-profile{
    
    grid-column:1/-1;
    
    }
    
    }
    
    @media(max-width:768px){
    
    .intro-wrapper{
    
    grid-template-columns:1fr;
    
    padding:24px;
    
    }
    
    .profile-content h2{
    
    font-size:28px;
    
    }
    
    .profile-content p{
    
    font-size:16px;
    
    }
    
    }

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

.about-section{
    position: relative;
    overflow:hidden;
    padding-top: 100px;
}

.about-grid{
    display:grid;
    grid-template-columns:520px 1fr;
    gap:90px;
    align-items:center;
}

/*=========================================
LEFT SIDE
=========================================*/

.about-image-wrap{
    position:relative;
}

.about-glow{
    position:absolute;
    width:420px;
    height:420px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,var(--primary),transparent 70%);
    filter:blur(100px);
    opacity:.18;
    z-index:0;
}

.about-image-card{
    position:relative;
    /* overflow:hidden; */
    border-radius:34px;
    background:linear-gradient(180deg,#101827,#0a101b);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 35px 80px rgba(0,0,0,.45);
    z-index:2;
}

.about-image-card img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 35px 80px rgba(0, 0, 0, .45);
    border-radius: 34px;
}

.about-image-card:hover img{
    transform:scale(1.04);
}

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

.experience-badge{
    position:absolute;
    right:-30px;
    top:35px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 24px;
    border-radius:22px;
    background:var(--bg2);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 45px rgba(0,0,0,.35);
    animation:floatBadge 5s ease-in-out infinite;
}

.badge-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(34,211,197,.12);
    color:var(--primary);
    font-size:22px;
}

.experience-badge strong{
    display:block;
    color:var(--white);
    font-size:28px;
    line-height:1;
    margin-bottom:4px;
}

.experience-badge span{
    display:block;
    color:var(--muted);
    font-size:14px;
}

/*=========================================
BOTTOM PROFILE CARD
=========================================*/

.profile-card{
    position:absolute;
    left:26px;
    right:26px;
    bottom:24px;
    padding:24px;
    border-radius:22px;
    background:var(--bg2);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.08);
}

.profile-card h3{
    font-size:28px;
    margin-bottom:8px;
    font-weight:700;
    color: var(--white);
}

.profile-card p{
    color:var(--muted);
    font-size:15px;
    line-height:1.7;
}

/*=========================================
RIGHT SIDE
=========================================*/

.about-content{
    max-width:760px;
}

.section-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    margin-bottom:28px;
    border-radius:50px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    color:var(--primary);
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
}

.about-content h2{
    font-size: 50px;
    line-height:1.05;
    font-weight:900;
    margin-bottom:34px;
    letter-spacing:-2px;
}

.about-content h2 span{
    background:linear-gradient(135deg,#27f0e4,#17b7ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.about-description{
    font-size:20px;
    line-height:1.9;
    color:var(--text);
    margin-bottom:42px;
    max-width:720px;
}

/*=========================================
CHECK LIST
=========================================*/

.about-list{
    list-style:none;
    margin:0 0 40px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:22px;
}

.about-list li{
    display:flex;
    align-items:flex-start;
    gap:18px;
    transition:.35s;
}

.about-list li:hover{
    transform:translateX(8px);
}

.check{
    width:28px;
    height:28px;
    min-width:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(34,211,197,.12);
    border:1px solid rgba(34,211,197,.35);
    color:var(--primary);
    font-size:15px;
    font-weight:700;
}

.about-list span{
    font-size:16px;
    line-height:1.8;
    color:var(--text);
}

/*=========================================
TECH TAGS
=========================================*/

.about-tags{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:45px;
}

.about-tags span{
    padding:11px 20px;
    border-radius:50px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    color:var(--text);
    font-size:15px;
    font-weight:600;
    transition:.35s;
    cursor:default;
}

.about-tags span:hover{
    transform:translateY(-4px);
    background:rgba(34,211,197,.12);
    border-color:rgba(34,211,197,.4);
    color:var(--white);
    box-shadow:0 15px 35px rgba(34,211,197,.18);
}

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

.about-section .primary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:18px 34px;
    border-radius:60px;
    background:linear-gradient(135deg,#23d7cb,#1bc7ff);
    color:#fff;
    font-weight:700;
    box-shadow:0 18px 40px rgba(34,211,197,.28);
    transition:.35s;
}

.about-section .primary-btn:hover{
    transform:translateY(-6px);
    box-shadow:0 28px 60px rgba(34,211,197,.35);
}

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

@keyframes floatBadge{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-15px);
    }

}

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

@media (max-width:1200px){

.about-grid{
    grid-template-columns:1fr;
    gap:70px;
}

.about-image-wrap{
    max-width:520px;
    margin:auto;
}

.about-content{
    max-width:100%;
}

.about-content h2{
    font-size:56px;
}

}

@media (max-width:768px){

.about-section{
    padding:90px 0;
}

.about-content h2{
    font-size:40px;
    line-height:1.15;
    letter-spacing:0;
}

.about-description{
    font-size:17px;
}

.about-list span{
    font-size:16px;
}

.profile-card{
    left:18px;
    right:18px;
    bottom:18px;
    padding:18px;
}

.profile-card h3{
    font-size:22px;
}

.experience-badge{
    right:15px;
    top:15px;
    transform:scale(.9);
}

.about-tags{
    gap:10px;
}

.about-tags span{
    padding:10px 16px;
    font-size:14px;
}

}


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

.experience-section{
    position:relative;
    padding:100px 0;
    overflow:hidden;
}

.experience-section::before{
    content:"";
    position:absolute;
    left:-250px;
    top:120px;
    width:500px;
    height:500px;
    border-radius:50%;
    background:radial-gradient(circle,var(--primary),transparent 70%);
    filter:blur(120px);
    opacity:.08;
    pointer-events:none;
}

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

.experience-header{
    max-width:820px;
    margin-bottom:90px;
}

.experience-header .section-badge{
    margin-bottom:28px;
}

.experience-header h2{
    font-size: clamp(30px,5vw,50px);
    line-height:1.05;
    font-weight:900;
    letter-spacing:-2px;
}

.experience-header h2 span{
    display:block;
    background:linear-gradient(135deg,#2af7dd,#18c7ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

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

.experience-grid{
    display:grid;
    grid-template-columns:1.6fr .9fr;
    gap:90px;
    align-items:flex-start;
}

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

.timeline{
    position:relative;
    padding-left:40px;
}

.timeline::before{
    content:"";
    position:absolute;
    left:10px;
    top:0;
    bottom:0;
    width:2px;
    background:var(--border);
}

.timeline-item{
    position:relative;
    margin-bottom:80px;
}

.timeline-item:last-child{
    margin-bottom:0;
}

.timeline-dot{
    position:absolute;
    left:-40px;
    top:8px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:
        0 0 0 6px rgba(34,211,197,.12),
        0 0 25px rgba(34,211,197,.4);
}

.timeline-content{
    position:relative;
}

.timeline-year{
    display:inline-block;
    margin-bottom:14px;
    font-size:14px;
    font-weight:700;
    letter-spacing:.08em;
    color:var(--muted);
}

.timeline-content h3{
    font-size:34px;
    line-height:1.2;
    font-weight:800;
    margin-bottom:8px;
}

.timeline-content h4{
    font-size:20px;
    color:var(--primary);
    font-weight:600;
    margin-bottom:26px;
}

.timeline-content ul{
    margin:0;
    padding-left:22px;
}

.timeline-content li{
    margin-bottom:16px;
    color:var(--text);
    font-size:16px;
    line-height:1.8;
}

.timeline-content li:last-child{
    margin-bottom:0;
}

/*====================================================
TECH TAGS
====================================================*/

.timeline-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:32px;
}

.timeline-tags span{
    padding:10px 18px;
    border-radius:40px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    color:var(--text);
    font-size:14px;
    font-weight:600;
    transition:.35s;
}

.timeline-tags span:hover{
    background:rgba(34,211,197,.12);
    border-color:rgba(34,211,197,.4);
    color:#fff;
    transform:translateY(-4px);
}

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

.certifications{
    position:sticky;
    top:120px;
}

.cert-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:24px;
    margin-bottom:28px;
    font-weight:700;
}

.cert-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
    margin-bottom:18px;
    border-radius:22px;
    background:rgba(255,255,255,.02);
    border:1px solid var(--border);
    transition:.35s;
    backdrop-filter:blur(16px);
}

.cert-card:hover{
    transform:translateY(-8px);
    border-color:rgba(34,211,197,.45);
    box-shadow:0 25px 60px rgba(0,0,0,.35);
}

.cert-icon{
    width:58px;
    height:58px;
    min-width:58px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(34,211,197,.10);
    border:1px solid rgba(34,211,197,.25);
    color:var(--primary);
    font-size:26px;
}

.cert-card h4{
    font-size:20px;
    margin-bottom:6px;
    font-weight:700;
}

.cert-card p{
    font-size:15px;
    line-height:1.7;
    color:var(--muted);
}

.cert-footer{
    margin-top:28px;
    padding:18px 22px;
    border-radius:18px;
    background:rgba(34,211,197,.08);
    border:1px solid rgba(34,211,197,.18);
    color:var(--primary);
    font-size:15px;
    font-weight:600;
}

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

.timeline-item{
    transition:.35s;
}

.timeline-item:hover{
    /* transform:translateX(10px); */
}

.timeline-item:hover .timeline-dot{
    /* transform:scale(1.25); */
    box-shadow:
        0 0 0 10px rgba(34,211,197,.12),
        0 0 45px rgba(34,211,197,.45);
}

.timeline-content{
    transition:.35s;
}

.timeline-item:hover .timeline-content{
    transform:translateY(-4px);
}

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

@media(max-width:1200px){

.experience-grid{
    grid-template-columns:1fr;
    gap:70px;
}

.certifications{
    position:relative;
    top:0;
}


}

@media(max-width:768px){

.experience-section{
    padding:90px 0;
}

.timeline{
    padding-left:28px;
}

.timeline::before{
    left:7px;
}

.timeline-dot{
    left:-28px;
    width:16px;
    height:16px;
}

.experience-header{
    margin-bottom:60px;
}

.experience-header h2{
    line-height:1.15;
    letter-spacing:0;
}

.timeline-content h3{
    font-size:26px;
}

.timeline-content h4{
    font-size:18px;
}

.timeline-content li{
    font-size:16px;
}

.cert-card{
    padding:20px;
}

.cert-icon{
    width:50px;
    height:50px;
    min-width:50px;
    font-size:22px;
}

}

/*=========================================
PROCESS SECTION
=========================================*/

.process-section{
    position:relative;
    overflow:hidden;
}

.process-section::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:700px;
    height:700px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle,var(--primary),transparent 70%);
    filter:blur(140px);
    opacity:.05;
    pointer-events:none;
}

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

.process-header{
    text-align:center;
    max-width:760px;
    margin:0 auto 90px;
}

.process-header .section-badge{
    margin-bottom:22px;
}

.process-header h2{
    font-size: clamp(30px,5vw,50px);
    font-weight:900;
    letter-spacing:-2px;
}

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

.process-timeline{

    position:relative;

    display:grid;

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

    gap:30px;

    align-items:start;

}

.timeline-progress{
    position:absolute;
    top:34px;
    left:70px;
    right:70px;
    height:2px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
    z-index:0;
}

.timeline-progress::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        transparent,
        var(--border),
        transparent
    );
}



.progress-dot{

    position:absolute;

    left:0;
    top:50%;

    width:10px;
    height:10px;

    border-radius:50%;

    background:#22d3c5;

    transform:translateY(-50%);

    animation:travelLine 4s linear infinite;

}

.progress-dot::before{

    content:"";

    position:absolute;

    left:-120px;

    top:50%;

    width:120px;
    height:2px;

    transform:translateY(-50%);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(34,211,197,.8)
    );

}

.progress-dot::after{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:50%;

    background:#22d3c5;

    filter:blur(8px);

    opacity:.9;

}

.process-item{
    transition:.4s;
}

.process-circle{
    transition:.35s;
}

.process-icon{
    transition:.35s;
    filter:grayscale(.3);
}

/* Active Step */

.process-item.active .process-circle{

    border-color:#22d3c5;

    background:linear-gradient(180deg,var(--bg),var(--bg2));

    box-shadow:
        0 0 15px rgba(34,211,197,.35),
        0 0 35px rgba(34,211,197,.25),
        0 0 70px rgba(34,211,197,.18);

    transform:scale(1.08);

}

.process-item.active .process-icon{

    color:#22d3c5;

    transform:scale(1.18);

    filter:
        drop-shadow(0 0 10px #22d3c5)
        drop-shadow(0 0 25px #22d3c5);

}

.process-item.active h3{

    color:#22d3c5;

}

.process-item.active .step-number{

    background:#22d3c5;

    transform:scale(1.12);

    box-shadow:
        0 0 15px #22d3c5,
        0 0 30px #22d3c5;

}

.process-item.active{

    animation:pulseGlow .8s ease;

}

@keyframes pulseGlow{

0%{

transform:scale(1);

}

50%{

transform:scale(1.03);

}

100%{

transform:scale(1);

}

}

@keyframes travelLine{

    0%{
        left:0%;
    }

    100%{
        left:calc(100% - 10px);
    }

}

/*=========================================
STEP
=========================================*/

.process-item{

    position:relative;

    text-align:center;

    z-index:2;

}

.process-circle{

    position:relative;

    width:74px;

    height:74px;

    margin:0 auto 28px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(180deg,var(--bg),var(--bg2));

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

    transition:.35s;

}

.process-circle:hover{

    transform:translateY(-8px);

    border-color:rgba(34,211,197,.4);

    box-shadow:
    0 0 35px rgba(34,211,197,.25);

}

.step-number{

    position:absolute;

    right:-6px;

    top:-6px;

    width:28px;

    height:28px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#23d7cb,#1bc7ff);

    color:#fff;

    font-size:13px;

    font-weight:700;

    box-shadow:0 8px 20px rgba(34,211,197,.35);

}

.process-icon{

    font-size:30px;

    color:var(--primary);

}

.process-item h3{

    font-size:22px;

    font-weight:700;

    margin-bottom:16px;

}

.process-item p{

    font-size:16px;

    line-height:1.8;

    color:var(--text);

    max-width:250px;

    margin:auto;

}

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

.process-item:hover .process-circle{

    background:linear-gradient(135deg,#132436,#1a3242);

}

.process-item:hover h3{

    color:var(--primary);

}

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

@media(max-width:1200px){

.process-timeline{

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

}

.timeline-progress{

display:none;

}

}

@media(max-width:768px){

.process-section{

padding:90px 0;

}

.process-header{

margin-bottom:60px;

}



.process-timeline{

grid-template-columns:1fr;

gap:50px;

}

.process-item p{

max-width:100%;

}

.process-circle{

margin-bottom:20px;

}

}

/*=========================================
PORTFOLIO GRID
=========================================*/

/*==========================
FILTER
==========================*/

.project-filter{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin:60px 0;
}

.project-filter button{

    border:none;
    cursor:pointer;

    padding:12px 22px;

    border-radius:999px;

    background:var(--bg2);

    color:var(--text);

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

    transition:.35s;
}

.project-filter button:hover,
.project-filter button.active{

    background:#23d3c5;

    color:#06111f;

}

.portfolio{
    padding:140px 0;
}

.portfolio-grid{

    display:grid;

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

    gap:30px;

}

.portfolio-card{

    background: var(--card2);

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

    border-radius:22px;

    overflow:hidden;

    cursor:pointer;

    transition:.35s;

    position:relative;

}

.portfolio-card.hide{
    display:none;
}

.portfolio-card:hover{

    transform:translateY(-10px);

    border-color:#22d3c5;

    box-shadow:
        0 25px 60px rgba(0,0,0,.45);

}

.portfolio-card{
    transition:
        opacity .45s ease,
        transform .45s ease;
}

.portfolio-card.hide{
    display:none;
    opacity:0;
    transform:translateY(30px);
}

.portfolio-card:not(.hide){
    opacity:1;
    transform:translateY(0);
}

.portfolio-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/10;

}

.portfolio-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.portfolio-card:hover img{

    transform:scale(1.08);

}

.portfolio-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(4px);

    opacity:0;

    transition:.35s;

}

.portfolio-overlay .view-btn {
    display: none;
}

.portfolio-card:hover .portfolio-overlay{

    opacity:1;

}

.open-modal{

    padding:14px 30px;

    border:none;

    border-radius:50px;

    background:#22d3c5;

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.open-modal:hover{

    transform:scale(1.05);

}

.portfolio-content{

    padding:24px;

}

.portfolio-tags{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:18px;

}

.portfolio-tags span{

    padding:6px 12px;

    border-radius:30px;

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

    color:#22d3c5;

    font-size:12px;

    font-weight:700;

}

.portfolio-content h3{

    font-size:28px;

    margin-bottom:12px;

}

.portfolio-content p{

    color:#aab3c4;

    line-height:1.7;

}

.primary-btn.disabled{
    opacity:.5;
    cursor:not-allowed;
    pointer-events:none;
}

/*=============================
MODAL
=============================*/

.portfolio-modal{

    position:fixed;
    inset:0;
    
    display:flex;
    justify-content:center;
    align-items:center;
    
    background:rgba(5,8,15,.75);
    
    backdrop-filter:blur(14px);
    
    opacity:0;
    visibility:hidden;
    
    transition:.35s;
    
    z-index:999999;
    
    }
    
    .portfolio-modal.show{
    
    opacity:1;
    visibility:visible;
    
    }
    
    .modal-container{
    
    width:min(1050px,92vw);
    
    background:#0d1320;
    
    border-radius:24px;
    
    overflow:hidden;
    
    border:1px solid rgba(255,255,255,.08);
    
    transform:translateY(40px) scale(.95);
    
    transition:.35s;
    
    max-height:90vh;
    
    overflow:auto;
    
    }
    
    .portfolio-modal.show .modal-container{
    
    transform:translateY(0) scale(1);
    
    }
    
    .modal-image{
    
    height:420px;
    
    overflow:hidden;
    
    }
    
    .modal-image img{
    
    width:100%;
    height:100%;
    object-fit:cover;
    
    display:block;
    
    }
    
    .modal-body{
    
    padding:40px;
    
    }
    
    .modal-body h2{
    
    font-size:42px;
    
    margin:25px 0;
    
    }
    
    .modal-grid{
    
    display:grid;
    
    gap:22px;
    
    }
    
    .modal-box{
    
    display:flex;
    
    gap:18px;
    
    padding:22px;
    
    background:#111827;
    
    border-radius:18px;
    
    border:1px solid rgba(255,255,255,.06);
    
    }
    
    .modal-icon{
    
    width:55px;
    height:55px;
    
    display:flex;
    justify-content:center;
    align-items:center;
    
    border-radius:14px;
    
    font-size:22px;
    
    flex-shrink:0;
    
    }
    
    .danger{
    
    background:#2c1a1c;
    color:#ff7070;
    
    }
    
    .warning{
    
    background:#302815;
    color:#ffc947;
    
    }
    
    .success{
    
    background:#103126;
    color:#3ddc97;
    
    }
    
    .modal-box h4{
    
    margin-bottom:8px;
    
    font-size:14px;
    
    text-transform:uppercase;
    
    letter-spacing:.08em;
    
    }
    
    .modal-box p{
    
    color:#cfd6df;
    
    line-height:1.8;
    
    }
    
    .modal-close{
    
    position:absolute;
    
    right:18px;
    
    top:18px;
    
    width:46px;
    height:46px;
    
    border:none;
    
    border-radius:50%;
    
    background:rgba(0,0,0,.6);
    
    color:#fff;
    
    font-size:28px;
    
    cursor:pointer;
    
    transition:.3s;
    
    z-index:2;
    
    }
    
    .modal-close:hover{
    
    background:#22d3c5;
    
    transform:rotate(90deg);
    
    }


    .skills-section{
        padding:140px 0 0; 
        overflow:hidden;
        text-align: center;
    }
    
    .skills-section h2{
        text-align: center;
        font-size: clamp(30px,5vw,50px);
        font-weight: 900;
        margin: 20px 0;
        margin-top: 0;
    }
    
    .skills-section h2 span{
        color:var(--primary);
    }
    
    .skills-desc{
        text-align:center;
        color:var(--text);
        max-width: 600px;
        margin: 0 auto;
        margin-bottom:70px;
        line-height: 1.8;
    }
    
    .marquee{
        overflow:hidden;
        margin:28px 0;
        mask-image:linear-gradient(to right,
        transparent,
        white 10%,
        white 90%,
        transparent);
    }
    
    .marquee-track{
        display:flex;
        gap:22px;
        width:max-content;
        animation:marquee 28s linear infinite;
    }
    
    .reverse .marquee-track{
        animation-direction:reverse;
    }
    
    .marquee:hover .marquee-track{
        animation-play-state:paused;
    }
    
    @keyframes marquee{
    
        from{
            transform:translateX(0);
        }
    
        to{
            transform:translateX(-50%);
        }
    
    }
    
    .skill-card{
    
        width:220px;
        height:120px;
    
        border-radius:22px;
    
        background:var(--card);
    
        border:1px solid var(--border);
    
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
    
        flex-shrink:0;
    
        transition:.35s;
    }
    
    .skill-card img{
    
        width:42px;
        height:42px;
    
        margin-bottom:16px;
    
        transition:.35s;
    
    }
    
    .skill-card h4{
        font-size:16px;
        color:var(--white);
    }
    
    .skill-card:hover{
    
        /* transform:translateY(-8px); */
    
        border-color:#22d3c5;
    
        box-shadow:
        0 0 35px rgba(34,211,197,.25);
    
    }
    
    .skill-card:hover img{
    
        transform:scale(1.15);
    
        filter:drop-shadow(0 0 12px #22d3c5);
    
    }

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

.stats-section{
    padding:120px 0;
}

.stats-wrapper{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;

    background:var(--bg2);

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

    border-radius:28px;

    padding:50px;

    position:relative;

    overflow:hidden;

}

.stats-wrapper::before{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(circle at top left,
        rgba(34,211,197,.08),
        transparent 55%);

    pointer-events:none;

}

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

.stat-card{

    position:relative;

    transition:.35s;

    padding:10px;

}

.stat-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #22d3c5,
        transparent
    );

    transform:scaleX(0);

    transition:.5s;

}

.stat-card:hover::before{

    /* transform:scaleX(1); */

}

.stat-card:hover{

    /* transform:translateY(-8px); */

}

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

.stat-icon{

    width:60px;
    height:60px;

    border-radius:18px;

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

    background:var(--card2);

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

    color:#22d3c5;

    font-size:22px;

    margin-bottom:22px;

    transition:.35s;

}

.stat-card:hover .stat-icon{

    /* transform:rotate(-10deg) scale(1.08); */

    background:rgba(34,211,197,.10);

    box-shadow:
        0 0 25px rgba(34,211,197,.30);

}

/*=========================================
TEXT
=========================================*/

.stat-content h2{

    font-size: clamp(30px,5vw,50px);

    font-weight:900;

    line-height:1;

    margin-bottom:10px;

    color:var(--white);

}

.stat-content h2::after{

    content:"+";

    color:#22d3c5;

}

.percentage::after{

    content:"%";

}

.stat-content h4{

    font-size:22px;

    font-weight:700;

    margin-bottom:14px;

    color:var(--white);

}

.stat-content p{

    color:#aab3c4;

    font-size:16px;

    line-height:1.8;

}

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

@media(max-width:1200px){

.stats-wrapper{

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

}

}

@media(max-width:768px){

.stats-wrapper{

grid-template-columns:1fr;

padding:35px;

}

.stat-content h2{

font-size:44px;

}

.stat-content h4{

font-size:20px;

}

}


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

.contact-section{
    position:relative;
    padding:140px 0;
    overflow:hidden;
}

.contact-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at left,#16d6c125 0%,transparent 45%),
    radial-gradient(circle at right,#4f46e520 0%,transparent 40%);
    pointer-events:none;
}

.contact-section .container{
    position:relative;
    z-index:2;
}

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

.contact-header{
    max-width:820px;
    margin:0 auto 70px;
    text-align:center;
}

.contact-header h2{
    font-size: clamp(30px,5vw,50px);
    line-height:1.05;
    margin:25px 0;
    font-weight:800;
}

.contact-header h2 span{
    color:var(--primary);
}

.contact-header p{
    max-width:700px;
    margin:auto;
    font-size:16px;
    line-height:1.8;
    color:var(--text-light);
}

/*=========================================
CARDS
=========================================*/

.contact-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    margin-bottom:60px;
}

.contact-card{
    display:flex;
    gap:20px;
    align-items:flex-start;
    padding:30px;
    background:var(--card);
    border:1px solid rgba(255,255,255,.07);
    border-radius:22px;
    transition:.35s;
    position:relative;
    overflow:hidden;
}

.contact-card::before{
    content:"";
    position:absolute;
    left:-100%;
    top:0;
    width:100%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.05),
        transparent
    );
    transition:.8s;
}

.contact-card:hover::before{
    left:120%;
}

.contact-card:hover{
    transform:translateY(-8px);
    border-color:rgba(44,214,201,.4);
    box-shadow:0 18px 50px rgba(0,0,0,.35);
}

.contact-icon{
    width:62px;
    height:62px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary);
    font-size:22px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    flex-shrink:0;
}

.contact-card span{
    display:block;
    color:#7c849d;
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:8px;
}

.contact-card h4{
    margin-bottom:8px;
    font-size:22px;
    font-weight:700;
}

.contact-card h4 a{
    color:var(--white);
    text-decoration:none;
    transition:.3s;
}

.contact-card h4 a:hover{
    color:var(--primary);
}

.contact-card small{
    color:var(--text-light);
    font-size:15px;
}

/*=========================================
CTA
=========================================*/

.contact-cta{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:50px;
    flex-wrap:wrap;
}

.contact-cta .primary-btn{
    min-width:270px;
    justify-content:center;
}

.contact-cta .secondary-btn{
    padding:18px 38px;
    border-radius:999px;
    border:1px solid var(--border);
    color:var(--white);
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.contact-cta .secondary-btn:hover{
    background:rgba(255,255,255,.05);
    border-color:var(--primary);
}

/*=========================================
TRUST
=========================================*/

.contact-trust{
    display:flex;
    justify-content:center;
    gap:35px;
    flex-wrap:wrap;
    margin-bottom:45px;
}

.trust-item{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text-light);
    font-size:16px;
}

.trust-item i{
    color:var(--primary);
    font-size:18px;
}

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

.contact-social{
    display:flex;
    justify-content:center;
    gap:18px;
}

.contact-social a{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--card);
    border:1px solid var(--border);
    color:var(--white);
    text-decoration:none;
    transition:.35s;
    font-size:20px;
}

.contact-social a:hover{
    background:var(--primary);
    color:#081018;
    transform:translateY(-6px) scale(1.08);
    box-shadow:0 10px 35px rgba(44,214,201,.35);
}

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

@media(max-width:991px){

    .contact-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .contact-section{
        padding:100px 0;
    }

    .contact-header h2{
        font-size:42px;
    }

    .contact-header p{
        font-size:17px;
    }

    .contact-card{
        padding:24px;
    }

    .contact-card h4{
        font-size:20px;
    }

    .contact-trust{
        gap:18px;
        flex-direction:column;
        align-items:center;
    }

}

/* ======================================================
   CREATIVE PORTFOLIO
====================================================== */

.creative-section{
    padding:120px 0 0;
    position:relative;
}

.creative-section .section-header{
    text-align:center;
    max-width:820px;
    margin:0 auto 70px;
}

.creative-section .section-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:999px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    color:var(--primary-color);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:20px;
}

.creative-section h2{
    font-size: clamp(30px,5vw,50px);
    font-weight:800;
    color:var(--white);
    margin-bottom:20px;
}

.creative-section p{
    max-width:760px;
    margin:auto;
    color:var(--text-light);
    line-height:1.8;
    font-size:1.05rem;
}

/* ===================================
   FILTERS
=================================== */

.creative-filters{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:60px;
}

.creative-filters button{

    border:none;
    cursor:pointer;

    padding:13px 24px;

    border-radius:999px;

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

    color:var(--text-light);

    transition:.35s;

    font-weight:600;
}

.creative-filters button:hover,
.creative-filters button.active{

    background:linear-gradient(135deg,#2dd4bf,#22c55e);

    color:#071018;

    transform:translateY(-2px);

}

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

.creative-grid{

    display:grid;

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

    gap:35px;

}

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

.creative-card{

    background:var(--card);

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

    border-radius:22px;

    overflow:hidden;

    transition:.45s;

    position:relative;

}

.creative-card:hover{

    transform:translateY(-12px);

    border-color:#2dd4bf;

    box-shadow:
        0 30px 60px rgba(0,0,0,.45),
        0 0 35px rgba(45,212,191,.18);

}

.creative-card a{

    display:block;

    color:inherit;

    text-decoration:none;

}

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

.creative-image{

    overflow:hidden;

    aspect-ratio:4 / 5;

    position:relative;

    /* background:#1f2937; */

}

.creative-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.creative-card:hover img{

    transform:scale(1.08);

}

/* overlay */

.creative-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.55),
        transparent 45%
    );

    opacity:0;

    transition:.4s;

    z-index:2;

}

.creative-card:hover .creative-image::before{

    opacity:1;

}

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

.creative-content{

    padding:26px;

}

.creative-content h3{

    color:var(--white);

    font-size:1.45rem;

    margin-bottom:10px;

    transition:.3s;

}

.creative-card:hover h3{

    color:#2dd4bf;

}

.creative-content span{

    display:inline-flex;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(45,212,191,.12);

    color:#2dd4bf;

    font-size:.82rem;

    font-weight:600;

    margin-bottom:18px;

}

.creative-content p{

    color:var(--text-light);

    line-height:1.7;

    margin:0;

}

/* ===================================
   VIEW PROJECT
=================================== */

.creative-card::after{

    content:"View Details ↗";

    position:absolute;

    top:25px;

    right:25px;

    padding:10px 18px;

    background:rgba(0,0,0,.7);

    backdrop-filter:blur(10px);

    color:#fff;

    border-radius:999px;

    font-size:.82rem;

    font-weight:600;

    opacity:0;

    transform:translateY(-15px);

    transition:.35s;

    z-index:5;

}

.creative-card:hover::after{

    opacity:1;

    transform:translateY(0);

}

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

@media(max-width:992px){

    .creative-grid{

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

    }

}

@media(max-width:768px){

    .creative-grid{

        grid-template-columns:1fr;

    }

    .creative-section{

        padding:90px 0;

    }

    .creative-content{

        padding:22px;

    }

}


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

.footer{

    padding:90px 0 35px;

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

    background:var(--bg);

}

.footer-top{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.3fr;

    gap:60px;

    margin-bottom:70px;

}

.footer-logo{

    display:flex;

    align-items:center;

    gap:18px;

    text-decoration:none;

    margin-bottom:22px;

}

.footer-logo img{

    width:60px;

    height:60px;

    border-radius:50%;
    box-shadow: 1px 0px 10px 1px #ccc;

}

.footer-logo h3{

    color:var(--white);

    margin-bottom:6px;

}

.footer-logo span{

    color:var(--text-light);

    font-size:15px;

}

.footer-brand p{

    max-width:360px;

    color:var(--text-light);

    line-height:1.9;

}

.footer h4{

    color:var(--white);

    margin-bottom:24px;

    font-size:18px;

}

.footer-nav,

.footer-services{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-nav a,

.footer-services a{

    color:var(--text-light);

    text-decoration:none;

    transition:.3s;

}

.footer-nav a:hover,

.footer-services a:hover{

    color:var(--primary);

    transform:translateX(6px);

}

.footer-contact p{

    display:flex;

    gap:12px;

    margin-bottom:18px;

    color:var(--text-light);

}

.footer-contact a{

    color:inherit;

    text-decoration:none;

}

.footer-contact i{

    color:var(--primary);

}

.footer-social{

    display:flex;

    gap:14px;

    margin-top:28px;

}

.footer-social a{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#fff;

    transition:.35s;

}

.footer-social a:hover{

    background:var(--primary);

    color:#081018;

    transform:translateY(-5px);

    box-shadow:0 12px 30px rgba(44,214,201,.35);

}
.footer-social a:hover i {
    color: #081018;
}

.footer-bottom{

    padding-top:35px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:var(--text-light);

    flex-wrap:wrap;

    gap:15px;

}

.footer-bottom strong{

    color:var(--white);

}

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

@media(max-width:992px){

.footer-top{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.footer{

padding:70px 0 30px;

}

.footer-top{

grid-template-columns:1fr;

gap:45px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

}

.hidden {
    display: none;
}
.featured-projects {
    padding-top: 100px;
}
.featured-projects p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text);
    margin: auto;
}
.featured-projects .section-header{text-align: center;}
.featured-projects h2 {
    font-size: clamp(30px,5vw,50px);
    font-weight: 900;
    letter-spacing: -2px;
    margin-bottom: 20px;
}
.portfolio-footer {
    text-align: center;
    margin-top: 30px;
}

.floating i{

    background:linear-gradient(135deg,#38bdf8,#2dd4bf);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    font-size:26px;

    filter:drop-shadow(0 0 10px rgba(45,212,191,.45));

}

.robot{

    animation:robotFloat 4s ease-in-out infinite;

}

@keyframes robotFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

.theme-btn{
    width:52px;
    height:52px;
    border-radius:50%;
    border:1px solid var(--border);
    background:transparent;
    cursor:pointer;

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

    font-size:18px;
    color:var(--white);

    transition:.35s;
}

.theme-btn i{
    transition:.35s;
}

.theme-btn:hover{
    transform:rotate(180deg);
    border-color:var(--primary);
    color:var(--primary);
}

body.light .theme-btn{
    background:#fff;
    border-color:#dbe4ef;
}

body.light .theme-btn:hover{
    background:var(--primary);
    color:#fff;
}


    @media (max-width:1100px){

        nav{
            position:fixed;
            top:92px;
            left:0;
            width:100%;
            background:var(--bg2);
        
            flex-direction:column;
            gap:0;
        
            display:none;
        
            padding:20px;
            z-index:999;
        }
        
        nav.show{
            display:flex;
        }
        
        nav a{
            padding:18px 0;
            border-bottom:1px solid var(--border);
        }
        nav a.active:after {
            bottom: 0;
        }
        
}


.tech-note{
    margin-top:40px;
    text-align:center;
    color:var(--text-light);
    font-size:.95rem;
    opacity:.75;
    letter-spacing:.5px;
}


.hero-highlights{
    display:grid;
    grid-template-columns:repeat(2,minmax(220px,1fr));
    gap:18px;
    margin-top:50px;
}

.highlight-item{
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px 20px;
    border:1px solid var(--border);
    border-radius:18px;
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(12px);
    transition:.35s;
}

.highlight-item:hover{
    transform:translateY(-5px);
    border-color:var(--primary);
    box-shadow:0 15px 40px rgba(38,208,206,.15);
}

.highlight-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#27d8d2,#44e0b8);
    color:#fff;
    font-size:22px;
    flex-shrink:0;
}

.highlight-content strong{
    display:block;
    font-size:22px;
    font-weight:800;
    color:var(--text);
}

.highlight-content span{
    display:block;
    margin-top:4px;
    color:var(--text-light);
    font-size:14px;
}

body.light .highlight-item{
    background:#fff;
}

@media(max-width:768px){

.hero-highlights{
    grid-template-columns:1fr;
    gap:14px;
}

.highlight-item{
    padding:16px;
}

}