*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:'Poppins',sans-serif;
    }

    body{
      background:#f5f7fb;
      color:#333;
    }
.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 5%;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(10px);
    box-shadow:0 8px 25px rgba(0,0,0,0.05);
    position:sticky;
    top:0;
    z-index:999;
}

/* ===== LOGO ===== */
.logo-box{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo-box img{
    width:40px;
}

.logo-text{
    font-size:22px;
    font-weight:700;
    color:#111;
}

.logo-text span{
    background:linear-gradient(45deg,#4f46e5,#06b6d4);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* ===== LINKS ===== */
.nav-links{
    display:flex;
    list-style:none;
    gap:32px;
}

.nav-links a{
    text-decoration:none;
    color:#333;
    font-weight:500;
    font-size:15px;
    position:relative;
}

/* Underline hover */
.nav-links a::after{
    content:"";
    position:absolute;
    width:0%;
    height:2px;
    left:0;
    bottom:-5px;
    background:linear-gradient(45deg,#4f46e5,#06b6d4);
    transition:.3s;
}

.nav-links a:hover::after{
    width:100%;
}

/* ===== BUTTON ===== */
.nav-btn a{
    text-decoration:none;
    padding:9px 22px;
    border-radius:30px;
    background:linear-gradient(45deg,#4f46e5,#06b6d4);
    color:#fff;
    font-weight:600;
    font-size:14px;
    box-shadow:0 6px 18px rgba(79,70,229,.25);
}

/* ===== HAMBURGER ===== */
.menu-toggle{
    display:none;
    font-size:26px;
    cursor:pointer;
}

/* ===== TABLET ===== */
@media(max-width:1024px){

    .nav-links{
        gap:22px;
    }

    .nav-btn a{
        padding:8px 18px;
    }
}

/* ===== MOBILE ===== */
@media(max-width:768px){

    .menu-toggle{
        display:block;
    }

    .nav-btn{
        display:none;
    }

    .nav-links{
        position:absolute;
        top:75px;
        right:0;
        width:100%;
        background:#fff;
        flex-direction:column;
        text-align:center;
        padding:25px 0;
        gap:20px;
        box-shadow:0 10px 30px rgba(0,0,0,.08);
        display:none;
    }

    .nav-links.active{
        display:flex;
    }

    .mobile-btn{
        display:block;
    }
}

/* Hide mobile button desktop */
.mobile-btn{
    display:none;
}
    /* HERO SECTION */
    .portfolio-hero{
      width:100%;
      min-height:60vh;
      background:linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),
      url('images/port.png');
      background-size:cover;
      background-position:center;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:#fff;
      padding:40px 20px;
    }

    .portfolio-hero h1{
      font-size:48px;
      margin-bottom:15px;
    }

    .portfolio-hero p{
      font-size:18px;
      opacity:0.9;
    }

    /* FILTER BUTTONS */
    .portfolio-filter{
      padding:50px 20px 10px;
      text-align:center;
    }

    .filter-btn{
      border:none;
      padding:10px 20px;
      margin:8px;
      background:#e3e7f0;
      cursor:pointer;
      border-radius:30px;
      font-weight:500;
      transition:0.3s;
    }

    .filter-btn:hover{
      background:#4f46e5;
      color:#fff;
    }

    /* PROJECT GRID */
    .portfolio-container{
      max-width:1200px;
      margin:auto;
      padding:40px 20px 80px;
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      gap:30px;
    }

    .portfolio-card{
      background:#fff;
      border-radius:15px;
      overflow:hidden;
      box-shadow:0 10px 25px rgba(0,0,0,0.08);
      transition:0.4s;
      display:flex;
      flex-direction:column;
    }

    .portfolio-card:hover{
      transform:translateY(-10px);
    }

    .portfolio-img{
      width:100%;
      height:200px;
      background-size:cover;
      background-position:center;
    }

    .portfolio-content{
      padding:20px;
      flex:1;
      display:flex;
      flex-direction:column;
    }

    .portfolio-content h3{
      margin-bottom:8px;
      font-size:20px;
      color:#111;
    }

    .portfolio-content span{
      font-size:13px;
      color:#4f46e5;
      font-weight:500;
    }

    .portfolio-content p{
      font-size:14px;
      margin:12px 0 18px;
      color:#555;
      line-height:1.5;
    }

    .portfolio-content a{
      margin-top:auto;
      text-decoration:none;
      background:#4f46e5;
      color:#fff;
      padding:10px 18px;
      border-radius:25px;
      font-size:14px;
      display:inline-block;
      transition:0.3s;
    }

    .portfolio-content a:hover{
      background:#3730a3;
    }

    /* STATS SECTION */
    .portfolio-stats{
      background:#111827;
      color:#fff;
      padding:70px 20px;
    }

    .stats-container{
      max-width:1100px;
      margin:auto;
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
      gap:30px;
      text-align:center;
    }

    .stat-box h2{
      font-size:40px;
      color:#4f46e5;
      margin-bottom:10px;
    }

    .stat-box p{
      opacity:0.85;
    }

    /* CTA SECTION */
    .portfolio-cta{
      padding:80px 20px;
      text-align:center;
      background:linear-gradient(135deg,#4f46e5,#7c3aed);
      color:#fff;
    }

    .portfolio-cta h2{
      font-size:32px;
      margin-bottom:15px;
    }

    .portfolio-cta p{
      margin-bottom:25px;
      opacity:0.9;
    }

    .portfolio-cta a{
      background:#fff;
      color:#4f46e5;
      padding:12px 28px;
      border-radius:30px;
      text-decoration:none;
      font-weight:600;
      transition:0.3s;
    }

    .portfolio-cta a:hover{
      background:#e0e7ff;
    }

    /* MOBILE */
    @media(max-width:768px){
      .portfolio-hero h1{
        font-size:32px;
      }

      .portfolio-hero p{
        font-size:15px;
      }
    }