/* Tiny portrait phones (like iPhone SE, 320px) */
:root {
  --hover-scale: 1.3;
  --iconbox-size: 180px;
}

#stats1 {
  margin-top: 2rem;
}

#stats2 {
  margin-top: 2rem;
  /* padding-top:4rem; */
}

#stats3 {
  margin-top: 1rem;
}

        .box {
            background-color: #ffffff;
            border-radius: 8px;
            padding: 1.5rem;
            text-align: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            border: 1px solid #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 120px;
            font-size: 1.1rem;
            font-weight: 500;
        }

.icon-box {
  width: var(--iconbox-size);
  height: var(--iconbox-size);
  margin: 10px;
  background: #fff;
  border-radius: 0;
  border-width: 0;
  border: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
/*  transition: transform 0.3s ease; */
  /*box-shadow: 0 2px 12px rgba(0,0,0,0.05);*/
  /*opacity: 0;*/

  margin-inline: auto;
}

.icon-content {
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.icon-box:hover .icon-content {
  transform: scale(var(--hover-scale));
}

.icon-box i {
  font-size: 2rem;
  color: crimson;
  color: #b8860b;
  margin-bottom: 0.5rem;
}

.icon-box h3 {
  font-size: 1.75rem;
  margin: 0;
  color: #333;
}

.icon-box p {
  font-size: 0.95rem;
  color: #555;
  margin: 0.5rem 0 0;
}

.row > .col {
  padding: 1rem;
  display: flex;
  justify-content: center;
}



/* --- XS Custom Breakpoints: <576px --- */

@media (min-width: 360px) {
}

/* Upper-range phones in portrait (480px - 575.98px) */
@media (min-width: 480px) {
  /* Styles for larger portrait phones */
}

/* --- SM: 576px to 767.98px --- */
@media (min-width: 576px) {
  /* SM portrait styles */
}

/* Responsive tweaks */
/*
@media (max-width: 576px) {
  .icon-box {
    margin-inline: auto;
  }
}
*/

/* --- MD: 768px to 991.98px --- */
@media (min-width: 768px) {
  /* MD portrait styles */
}

/* --- LG: 992px to 1199.98px --- */
@media (min-width: 992px) {
  /* LG portrait styles */
}

/* --- XL: 1200px to 1399.98px --- */
@media (min-width: 1200px) {
  /* XL portrait styles */
}

/* --- XXL: 1400px and up --- */
@media (min-width: 1400px) {
  /* XXL portrait styles */
}