::-webkit-scrollbar{
    display: none;
}
.dashboard-hero{
    position:relative;
    overflow:hidden;
  }
  .hero-top{
    position:relative;
    z-index:2;

    margin-bottom:34px;
  }

  .hero-copy{
    max-width:760px;
  }

  .hero-copy h1{
    font-size:2rem;
    line-height:1.05;

    letter-spacing:-.05em;

    color:var(--text);

    margin-bottom:18px;
  }

  .hero-copy p{
    color:#64748b;

    font-size:16px;
    line-height:1.9;

    max-width:620px;
  }

  .metrics-row{
    position:relative;
    z-index:2;

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

    gap:18px;
  }

  .metric-card{
    background:#ffffff;

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

    border-radius:22px;

    padding:24px;

    display:flex;
    align-items:center;
    gap:18px;

    transition:.25s;
  }

  .metric-card:hover{
    transform:
      translateY(-3px);
  }

  .metric-icon{
    width:58px;
    height:58px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color: var(--main);
    flex-shrink:0;
  }

  .metric-icon i{
    font-size:24px;
    color:#111827;
  }

  .metric-content strong{
    display:block;

    color:#0f172a;

    font-size:20px;
    font-weight:800;

    line-height:1;

    margin-bottom:8px;
  }

  .metric-content span{
    color:#64748b;

    font-size:13px;
    font-weight:600;
  }

  @media(max-width:1100px){

    .metrics-row{
      grid-template-columns:
        repeat(2,1fr);
    }

  }

  @media(max-width:768px){

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

    .metrics-row{
      grid-template-columns:1fr;
    }

    .metric-card{
      padding:20px;
    }

  }