:root{
      --bg: #f7fbfc;
      --card: #ffffff;
      --muted:#6b7280;
      --accent: #0ea5a4; /* teal */
      --ink: #0f172a; /* deep navy */
    }
    *{box-sizing:border-box}
    body{
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
      background:var(--bg);
      color:var(--ink);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      scroll-behavior:smooth;
    }


    /* NAV */
    .navbar{padding:1rem 2rem;background:transparent}
    .nav-link{color:var(--ink)!important;font-weight:600}
    .navbar-brand{font-weight:700;color:var(--ink)}

    header.hero{
      padding:6rem 0 4rem;min-height:64vh;display:flex;align-items:center;
    }
    .hero-card{background:linear-gradient(180deg, rgba(14,165,164,0.06), rgba(14,165,164,0.02));border-radius:18px;padding:2rem}

    /* services */
    .service-card{border-radius:12px;background:var(--card);box-shadow:0 6px 20px rgba(16,24,40,0.04);padding:1.6rem}

    /* skills */
    .skill-name{font-weight:600}

    /* portfolio */
    .portfolio .card{border:0;border-radius:12px;overflow:hidden}
    .portfolio img{width:100%;height:220px;object-fit:cover}

    footer{padding:3rem 0;background:transparent}

    /* small tweaks */
    .muted{color:var(--muted)}
    .accent{color:var(--accent)}

.progress-bar_new{
  background-color: rgb(0, 204, 255) !important;
}

    .card:hover {
      transform: scale(1.02);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }
    .modal-img {
      width: 100%;
      height: auto;
    }





    @media(min-width:992px){
      .hero-grid{display:grid;grid-template-columns:1fr 420px;gap:2.2rem;align-items:center}
    }