/* Add custom CSS styles below */ 
@media (max-width: 480px) { 
   .banner-entry {
    width: 100%;
     height: 130px !important;
     background-color: #f9fafb00;
    }
}
@media (min-width: 481px) and (max-width: 767px) { 
 .banner-entry {
    width: 100%;
    height: 170px ;
    background-color: #f9fafb00;
    }
 }
 .banner-entry:hover {
    transform: scale(1.1);
    transition: 1s ease;
}
.banner-entry {
    width: 100%;
    height: 300px !important;
    background-color: #f9fafb00;
}
.grid-flow-row {
    grid-auto-flow: column;
}
.grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8{
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}


@keyframes zoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}


@keyframes tilt {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
}


.icon {
  display: inline-block;
  animation: bounce 2s infinite; /* افتراضيًا حركة القفز */
  transition: transform 0.3s ease-in-out;
}