/* ======================================================
   PORTFOLIO HERO (NO IMAGE - MINIMAL PREMIUM)
   ====================================================== */

.portfolio-hero{
  padding: 60px 0 40px;
}

/* CONTAINER */
.portfolio-wrapper{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

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

.portfolio-tag{
  display: inline-block;
  background: rgba(44,110,73,0.1);
  color: var(--color-primary);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  margin-bottom: 15px;
}

.portfolio-title{
  max-width: 800px;
  margin: 0 auto;
}

.portfolio-title span{
  color: var(--color-primary);
}

.portfolio-subtitle{
  max-width: 700px;
  margin: 15px auto 30px;
  font-size: 17px;
}

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

.portfolio-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

/* STAT BOX */
.stat-box{
  border: 1px solid #2f5a3f; /* green visible now */
  color: #2f5a3f;
  padding: 20px;
  border-radius: 14px;
  transition: 0.3s;
}

.stat-box h3{
  color: var(--color-primary);
  margin-bottom: 5px;
}

.stat-box p{
  font-size: 13px;
}

/* HOVER */
.stat-box:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}


/* Floating leaves (unchanged) */
.leaf{
  position:absolute;
  width:60px;
  height:60px;
  background:url('/assets/images/leaf.png') no-repeat center/contain;
  opacity:.45;
  animation:floatLeaf 7s ease-in-out infinite;
  z-index:1;
}

/* LEFT SIDE LEAVES */
.hero-leaf-left-1{
  top:45%;
  left:80%;
  animation-delay:0s;
}

.hero-leaf-left-2{
  top:88%;
  left:25%;
  animation-delay:2s;
}


@keyframes floatLeaf{
  0%{
    transform:translateY(0) rotate(0deg);
  }

  50%{
    transform:translateY(-20px) rotate(12deg);
  }

  100%{
    transform:translateY(0) rotate(0deg);
  }
}

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

@media(max-width: 992px){
  .portfolio-stats{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 576px){
  .portfolio-stats{
    grid-template-columns: 1fr;
  }

  .portfolio-hero{
    padding: 40px 0 30px;
  }
}