@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');

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

body {
 padding: 0;
 margin: 0;
 font-family: 'IBM Plex Sans Arabic', sans-serif;
}

:root {
 --grad1-color: #166a45;
 --grad11-color: #1b8354;
 --grad2-color: #2b3d36;
 --grad21-color: #1b8354;
 --circle-color: #a6d0bd8b;
 --number-color: #ceffe8;
 --text-white: #fff;
 --text-grad-color1: #2bb175;
 --text-grad-color2: #ceffe8;
 --container-width: 1300px;
 --text-primary: #1b8354;
}

.container {
 max-width: var(--container-width);
 width: 100%;
 margin: 0 auto;
 padding: 2rem 1rem;
 hr {
  margin-bottom: 2rem;
 }
 h3 {
  text-align: center;
  margin: 0 auto;
  width: 100%;

  color: var(--text-primary);
  font-size: 2rem;
 }
}

.grid {
 width: 100%;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(23%, 1fr));
 gap: 1.5rem;
}

.item {
 background-image: linear-gradient(
  145deg,
  var(--grad1-color),
  var(--grad11-color)
 );
 border-radius: 1rem;
 padding: 2rem 0rem;
 display: flex;
 flex-direction: column;
 row-gap: 0rem;
 justify-content: center;
 align-items: center;
 max-height: 350px;
 filter: drop-shadow(0px 4px 12px #166a4651);
    border: 6px solid transparent;
    transition: all .3s;

 .icon {
  display: block;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border-radius: 120px;

  display: flex;
  align-items: center;
  justify-content: center;
  outline: 1px dashed #fff;
  outline-offset: 0.3rem;
  position: relative;
  color: #fff;
  font-size: 3rem;
  text-shadow: 2px 2px 12px #104c32;
  margin-top: 2rem;
  transition: all .3s;

 }


 .icon::after {
  content: '';
  display: block;
  width: 104%;
  height: 104%;
  position: absolute;
  top: -2%;
  right: -2%;
  border-radius: 100%;

  z-index: 1;
  outline: 1px dashed #ffffff42;
  outline-offset: 0.75rem;
  animation: rotate 20s infinite ease-in-out alternate;
 }
}
.item::before {
 content: '';
 display: block;
 width: 90%;
 height: 90%;
 position: absolute;
 top: 5%;
 right: 5%;
 border: 1px solid rgba(255, 255, 255, 0.2);
 border-radius: 1rem;
}

div.numbers {
 display: flex;
 flex-direction: column;
 column-gap: 0rem;
 margin-top: 2rem;
 h2 {
  text-align: center;
  font-size: 2.5rem;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
  color: var(--number-color);
  padding: 0;
  margin: 0;
 }
 h3 {
  text-align: center;
  color: var(--text-white);
  padding: 0;
  font-size: 1rem;
  margin: 0;
 }
}

.full-item {
 grid-column: 1/-1;
}

@keyframes rotate {
 0% {
  scale: 1;
  background-color: rgba(255, 255, 255, 0.2);
 }
 100% {
  scale: 1.2;
  rotate: 365deg;
  background-color: rgba(255, 255, 255, 0.25);
 }
}

.grid .item:nth-of-type(2n) {
 background-image: linear-gradient(
  145deg,
  var(--grad1-color),
  var(--grad21-color)
 );
}

.full-item::before {
 width: 96%;
 right: 2%;
}
.full-item {
 column-gap: 2rem;
 max-height: unset;
 .icon {
  margin: 2rem auto 1rem;
 }
 h4 {
  color: #fff;
  font-size: 3rem;
  text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
 }
 .stats ul {
  display: flex;
  column-gap: 4rem;
  justify-content: center;
  align-items: center;
  margin: 1rem auto;
  li {
   list-style: none;
   color: var(--number-color);
   text-align: center;
   font-size: 2rem;
   text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
   border: 1px solid #ffffff5e;
   background-color: rgba(0, 0, 0, 0.3);
   border-radius: 1rem;
   padding: 1rem 1.5rem;

   font-weight: bold;
   span {
    display: block;
    font-size: 1rem;
    color: #fff;
   }
  }
 }
}

.item:hover {
 border: 6px solid #104c324e;
 cursor: pointer;
}

.item:hover .icon {
 margin-top: 1rem;
}

@media screen and (max-width: 600px) {
 .grid {
  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
  gap: 1.5rem;
 }

 .stats {
  width: 90%;
 }
 .stats ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  li {
   width: 100%;
  }
 }
}