.box {
  background: #f5f5f5;
}
.square-box {
  display: flex;
  flex-wrap: wrap;
}
.square {
  width: 20%;
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.square {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.square:nth-of-type(1) {
  background: #2d2d2d;
}
/* .square:nth-of-type(6) {
  background: #dfdfdf;
} */
.grey{
  background: #dfdfdf;
}
.square h5 {
  font-weight: bold;
  font-size: 40px;
  color: #ffffff;
  margin-bottom: 11px;
  transition: all 0.5s ease;
  position: relative;
  z-index: 2;
}
.square span {
  font-size: 25px;
  color: #ffffff;
  transition: all 0.5s ease;
  opacity: 1;
  position: relative;
  z-index: 2;
}
.square h6 {
  font-size: 21px;
  color: #000000;
  margin-bottom: 16px;
  transition: all 0.5s ease;
  position: relative;
  z-index: 2;
}
.square p {
  font-size: 18px;
  color: #444242;
  line-height: 35px;
  transition: all 0.5s ease;
  opacity: 1;
  position: relative;
  z-index: 2;
}
.square-word {
  width: 100%;
  height: 100%;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Firework effect from center */
.square-word::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  transform: translate(-50%, -50%);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 0;
}

/* Different colors for different squares */
.square:nth-of-type(1) .square-word::before {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(45, 45, 45, 0) 70%
  );
}

.square:nth-of-type(3) .square-word::before,
.square:nth-of-type(5) .square-word::before,
.square:nth-of-type(7) .square-word::before,
.square:nth-of-type(9) .square-word::before {
  background: radial-gradient(
    circle,
    rgba(45, 45, 45, 0.15) 0%,
    rgba(255, 255, 255, 0) 70%
  );
}

.square:nth-of-type(6) .square-word::before {
  background: radial-gradient(
    circle,
    rgba(45, 45, 45, 0.1) 0%,
    rgba(223, 223, 223, 0) 70%
  );
}

/* Image boxes */
.square .img-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.square .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover effects */
.square:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.square:hover .square-word::before {
  width: 300%;
  height: 300%;
}

/* Color transitions */
.square:nth-of-type(1):hover {
  background: #2d2d2d;
}

.square:nth-of-type(1):hover h5 {
  color: #ffffff;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.square:nth-of-type(1):hover span {
  color: #ffffff;
  opacity: 1;
}

.square:hover h6 {
  color: #2d2d2d;
  font-weight: bold;
}

.square:hover p {
  color: #333;
  opacity: 1;
}

/* Subtle glow effect for text */
.square:hover h6,
.square:nth-of-type(1):hover h5 {
  filter: drop-shadow(0 0 3px rgba(45, 45, 45, 0.1));
}

/* Add a second layer of firework effect */
.square-word::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: translate(-50%, -50%);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 0;
  opacity: 0;
}

.square:nth-of-type(1) .square-word::after {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(45, 45, 45, 0) 60%
  );
}

.square:hover .square-word::after {
  width: 400%;
  height: 400%;
  opacity: 1;
}

/* Add a small delay for a more natural effect */
.square:nth-of-type(3):hover .square-word::before,
.square:nth-of-type(3):hover .square-word::after {
  transition-delay: 0.05s;
}

.square:nth-of-type(5):hover .square-word::before,
.square:nth-of-type(5):hover .square-word::after {
  transition-delay: 0.1s;
}

.square:nth-of-type(7):hover .square-word::before,
.square:nth-of-type(7):hover .square-word::after {
  transition-delay: 0.15s;
}

.square:nth-of-type(9):hover .square-word::before,
.square:nth-of-type(9):hover .square-word::after {
  transition-delay: 0.2s;
}

@media screen and (max-width: 768px) {
  .square {
    width: 50%;
  }
  .square h5 {
    font-size: 0.42rem;
  }
  .square span {
    font-size: 0.26rem;
  }
  .square h6 {
    font-size: 0.34rem;
    font-weight: bold;
    margin-bottom: 0.12rem;
  }
  .square p {
    font-size: 0.28rem;
    line-height: 0.37rem;
  }
  .square-word {
    padding: 0.5rem 0.34rem;
  }
  .square:nth-of-type(1) {
  background: #2d2d2d;
}
.grey{
  background: #fff;
}
}