*{
    box-sizing:border-box;
  }


  body{
    margin:0;
    font-family:Arial, sans-serif;
    background:#f4f7fb;
  }
  
  


/* buton */
.btn{
    display:inline-block;

    background:var(--white);
    color:var(--primary);

    padding:12px 25px;

    border-radius:8px;

    font-weight:bold;

    transition:var(--transition);
}

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

  .projects-section{
    padding:60px 20px;
  }

  .container{
    max-width:1400px;
    margin:auto;
  }

  .section-title{
    text-align:center;
    font-size:42px;
    margin-bottom:50px;
    color:#1e293b;
  }

  .cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:25px;
  }

  .card-proiecte{
    background:#fff;
    border-radius:18px;
    padding:28px;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
    transition:0.3s ease;
    position:relative;
    overflow:hidden;
	 border-top:5px solid #6C757D;
  }

  .card-proiecte:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
  }

  .card-proiecte h3{
    font-size:20px;
    line-height:1.4;
    margin-bottom:20px;
    color:#0f172a;
  }

  .code{
    font-size:14px;
    color:#475569;
    word-break:break-word;
  }

  .status{
    display:inline-block;
    padding:8px 14px;
    border-radius:50px;
    font-size:13px;
    font-weight:bold;
    margin-bottom:20px;
  }

  .active-status{
    background:#dcfce7;
    color:#166534;
  }

  .completed-status{
    background:#e2e8f0;
    color:#334155;
  }

  .active{
    border-top:5px solid #22c55e;
  }

  .completed{
    border-top:5px solid #64748b;
  }

  @media(max-width:768px){

    .section-title{
      font-size:32px;
    }

    .card-proiecte{
      padding:22px;
    }

  }