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

.stats-section{
  background:#07252d;

 padding:65px 5% 30px; /* top | left-right | bottom */

  margin-top:-60px;

  position:relative;

  z-index:2;
}
.stats-container{
  max-width:1200px;

  margin:auto;

  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  gap:-20px;

  flex-wrap:wrap;
}

/* Individual Stat */
.stat-item{
  position:relative;

  flex:1;

  min-width:180px;
  margin-top: 50px;

  padding-bottom:-60px;
}

/* Big Faded Number */
.stat-bg{
   position:absolute;
   top:-80px;
   left:0;
   font-size:120px;
}

/* Foreground Content */
.stat-content{
  display:flex;
  align-items:center;
   margin-top: 10px;
  gap:12px;
}
/* =========================================
   PROFESSIONAL HOVER EFFECT
========================================= */

.stat-content h3,
.stat-content p,
.stat-bg{

  transition:
  color .35s ease,
  opacity .35s ease,
  text-shadow .35s ease,
  -webkit-text-stroke .35s ease;
}

/* =========================================
   NUMBER HOVER
========================================= */

.stat-item:hover .stat-content h3{

  color:#ffffff;

  text-shadow:
  0 0 8px rgba(255,243,0,.25);
}

/* =========================================
   TEXT HOVER
========================================= */

.stat-item:hover .stat-content p{

  color:#fff300;
}

/* =========================================
   BACKGROUND NUMBER HOVER
========================================= */

.stat-item:hover .stat-bg{

  opacity:.9;

  -webkit-text-stroke:
  1px #ffff;
}

/* Number */
.stat-content h3 {
  font-size: 58px;

  font-weight: 700;

  color: #ffffff;

  margin: 0;
}

/* Text */
.stat-content p {
  font-size: 15px;

  margin-top: 0;

  color: #ffffff;

  line-height: 1.3;
}
/* ==========================================
   MOBILE STATS - COMPACT VERSION
========================================== */

@media screen and (max-width:768px){

.stats-section{

    margin-top:0;

    padding:12px 12px;          /* Reduced section padding */
}

.stats-container{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;                   /* Reduced gap */
}

/* ONE CARD */

.stat-item{

    position:relative;

    width:100%;

    max-width:300px;

    min-height:58px;            /* Reduced height */

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0;

    padding:0;
}

/* SHADOW NUMBER */

.stat-bg{

    position:absolute;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    font-size:56px;             /* Smaller shadow */

    font-weight:700;

    color:transparent;

    -webkit-text-stroke:1px rgba(255,255,255,.20);

    opacity:.45;

    line-height:1;

    z-index:0;

    pointer-events:none;
}

/* CONTENT */

.stat-content{

    position:relative;

    z-index:2;

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin:0;
}

/* COUNT */

.stat-content h3{

    margin:0;

    font-size:28px;             /* Smaller count */

    line-height:1;
}

/* LABEL */

.stat-content p{

    margin-top:2px;             /* Reduced spacing */

    font-size:12px;

    line-height:1.2;

    max-width:150px;

    text-align:center;
}

}