/* Advertisement Banner Styles */
.advert-banner-container {
  width: 100%;
  background-color: #000000;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.advert-banner-wrapper {
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.advert-banner-image {
  display: block;
  max-width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}

/* Desktop advertisement - HIDDEN by default */
.advert-desktop {
  display: none !important;
}

/* Mobile advertisement - SHOWN by default */
.advert-mobile {
  display: block !important;
}

/* Media query for desktop/laptop screens (768px and above) */
@media (min-width: 768px) {
  /* Show desktop, hide mobile */
  .advert-desktop {
    display: block !important;
  }

  .advert-mobile {
    display: none !important;
  }

  .advert-banner-container {
    padding: 12px 0;
  }
}

/* Optional: Add hover effect */
.advert-banner-image:hover {
  opacity: 0.9;
  cursor: pointer;
}

/* Optional: Add animation on load */
.advert-banner-image {
  animation: advert-fade-in 0.5s ease;
}

@keyframes advert-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}