:root{
  --green:#003b36;
  --green2:#012824;
  --gold:#d7b07b;
  --gold-light:#f6d6a8;
  --white:#fff;
  --bg:#eeeeee;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:linear-gradient(
    135deg,
    #eeeeee 100%
  );
  font-family:'Noto Sans',sans-serif;
  overflow-x:hidden;
}

.section-title{
  font-size:clamp(2rem,4vw,3rem);
  font-weight:100;
  color:var(--green);
  letter-spacing:1px;
  margin-bottom:10px;
  text-align:center;
}

.stats-section{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:80px 40px;
}

.stat-card{
  position:relative;
  width:100%;
  max-width:390px;
  height:525px;

  border-radius:34px;

  background:
    linear-gradient(
      180deg,
      rgba(0,59,54,.98),
      rgba(1,34,31,.98)
    );

  overflow:hidden;
  margin:auto;

  transition:.5s ease;

  box-shadow:
    0 18px 40px rgba(0,0,0,.18),
    0 6px 12px rgba(0,0,0,.10);

  isolation:isolate;
}

.stat-card::before{
  content:"";
  position:absolute;

  width:280px;
  height:280px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.08),
      transparent 70%
    );

  top:-120px;
  right:-120px;
}

.stat-card:hover{
  transform:
    translateY(-12px)
    scale(1.015);

  box-shadow:
    0 28px 55px rgba(0,0,0,.25),
    0 10px 18px rgba(0,0,0,.15);
}

.image-wrapper{
  position:relative;
  height:290px;
  overflow:hidden;
}

.image-wrapper img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:1s ease;
}

.stat-card:hover img{
  transform:scale(1.08);
}

.image-wrapper::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.05),
      rgba(0,0,0,.38)
    );
}

.gold-line{
  position:absolute;
  bottom:0;
  left:0;

  width:100%;
  height:6px;

  background:
    linear-gradient(
      90deg,
      #f1d09d,
      #ba8548,
      #f1d09d
    );

  z-index:3;
}
.content{
  padding:15px 28px 20px;
  text-align:center;
  color:white;
}

.icon-box{
  width:82px;
  height:82px;

  margin:auto auto 24px;

  border-radius:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(  
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.03)
    );

  border:1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(8px);

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.15),
    0 8px 20px rgba(0,0,0,.10);


}

.icon-box i{
  font-size:40px;
  color:var(--gold-light);
}

.number{
  font-size:1.5rem;
  font-weight:700;

  color:var(--gold-light);

  margin-bottom:16px;

  line-height:1;
  letter-spacing:1px;

  text-shadow:
    0 3px 10px rgba(0,0,0,.18);
}

.info{
  font-size:0.98rem;
  font-weight:700;

  line-height:1.15;

  text-transform:uppercase;

  color:white;

  max-width:250px;
  margin:auto;
}

.blur-ball{
  position:absolute;

  width:180px;
  height:180px;

  border-radius:50%;

  background:rgba(255,255,255,.03);

  filter:blur(10px);

  bottom:-50px;
  left:-60px;
}


@media (min-width:1200px) and (max-width:1600px){

  .stats-section{
    padding:70px 40px;
  }

  .stat-card{
    max-width:350px;
    height:500px;
  }

  .image-wrapper{
    height:260px;
  }

  .content{
    padding:28px 22px;
  }

  .icon-box{
    width:72px;
    height:72px;
  }

  .icon-box i{
    font-size:34px;
  }

  .number{
    font-size:1.8rem;
  }

  .info{
    font-size:1.05rem;
  }
}

@media (max-width:1199px){

  .stats-section{
    padding:60px 30px;
  }

  .stat-card{
    max-width:320px;
    height:470px;
  }

  .image-wrapper{
    height:240px;
  }

  .number{
    font-size:1.7rem;
  }
}

@media (max-width:992px){

  .stats-section{
    padding:50px 20px;
  }

  .stat-card{
    max-width:100%;
    margin-bottom:30px;
  }
}


@media (max-width:576px){

  .stats-section{
    padding:40px 15px;
  }

  .stat-card{
    height:auto;
    border-radius:28px;
  }

  .image-wrapper{
    height:220px;
  }

  .content{
    padding:25px 20px 30px;
  }

  .icon-box{
    width:68px;
    height:68px;
  }

  .icon-box i{
    font-size:30px;
  }

  .number{
    font-size:1.5rem;
  }

  .info{
    font-size:.85rem;
  }
}