/* Overlay styles */
#overlay {
  display: none; /* Hidden by default */
  /* Other styles remain unchanged */
}

/* Only show the overlay on screens less than 1024px wide */
@media screen and (max-width: 1024px) {
  #overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    display: flex;
  }
}

/* Icon rotation animation */
.rotate {
  width: 100%;
  text-align: center;
  color: white;
}

/* Media query for the animation */
@media screen and (max-width: 1024px) {
  .rotate {
    animation: rotateAnimation 3s infinite;
    font-size: 48px; /* Adjust icon size as needed */
  }
}

/* Define the animation */
@keyframes rotateAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}