@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;
 font-family: 'IBM Plex Sans Arabic', sans-serif;
}

body {
 padding: 0;
 margin: 0;
}

:root {
 --heading-text: #1b8354;
 --item-text: #fff;
 --gradient-color1: #166a45;
 --gradient-color2: #1b8354;
 --apply-gradient1: #9cdeb5;
 --apply-gradient2: #146943;
 --container-width: 960px;
}

.container {
 
 margin: 0 auto;
 width: 100%;
 max-width: var(--container-width);
}

.heading {
 width: 100%;
 margin: 1rem auto 3rem;
 padding: 0;
 h3 {
  font-size: 2rem;
  text-align: center;
 }
}
.headingIcon {
 display: block;
 width: 164px;
 height: 124px;
 margin: 0.5rem auto;
 background: url('../img/headingIcon.svg');
}

.grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(225px, 1fr));
 gap: 1rem;
}

.item {
 border-radius: 1rem;
 padding: 1.5rem .5rem;
 display: flex;
 min-height: 3.0px;
 flex-direction: column;
 align-items: center;
justify-content: space-around;
 gap: 1rem;
 background-image: radial-gradient(
  circle at top left,
  var(--gradient-color1),
  var(--gradient-color2)
 );
 transition: all 0.4s ease-in-out;
 filter: drop-shadow(4px 16px 12px #166a4657);
}
.item:hover {
 transform: scale(1.03);
 animation: breathing-shadow 2s infinite;
}
@keyframes breathing-shadow {
 0% {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 50% {
  box-shadow: 0 5px 25px rgba(22, 106, 70, 0.5);
 }
 100% {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
}
.item h3 {
 text-align: center;
 font-size: 1.5rem;
 font-weight: bold;
 font-weight: 500;
 color: #fff;
 transition: all 0.4s ease-in-out;
}
.item:hover h3 {
 transform: scale(1.1);
}
.item img {
 display: block;
 margin: 0 auto;
 max-width: 50%;
 transition: all 0.4s ease-in-out;
}
.item:hover img {
 transform: scale(1.1);
}

.item ul {
 display: flex;
 gap: 1rem;
}
.item ul li {
 list-style: none;
}
.item ul li a {
 color: #fff;
 padding: 0.5rem .7rem;
 height: 45px;
 display: flex;

 align-items: center;
 gap: 0.2rem;
 font-size: 1rem;
 font-weight: 500;
 position: relative;
 box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);

 background: linear-gradient(
  45deg,
  var(--gradient-color1),
  var(--gradient-color2)
 );
 background-clip: padding-box;

 border-radius: 1rem;
 transition: all 0.3s;
}

.item ul li a:hover {
 box-shadow: 2px 8px 24px rgba(0, 0, 0, 0.2);
 background-color: #fff;
}
.item ul li a::before {
 content: '';
 position: absolute;
 inset: 0;
 z-index: -1;
 margin: -1px; /* Corresponds to the border-width */
 border-radius: inherit;
 background: linear-gradient(
  45deg,
  var(--apply-gradient1),
  var(--apply-gradient2)
 );
 transition: all 0.3s;
}

.item ul li a:hover::before {
 background: linear-gradient(
  145deg,
  var(--apply-gradient1),
  var(--apply-gradient2)
 );
}

@media screen and (max-width: 650px) {
 
 .grid {
  display: grid;
  padding: 0 1rem;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
 }
 .item {
  height: auto;
 }
}



@media screen and (min-width: 651px) and (max-width:850px) {
 .grid {
  display: grid;
  padding: 0 1rem;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 1rem;
 }
 .item {
  height: auto;
 }
}