@charset "UTF-8";
/* CSS Document */


/* Top Banner */

.banner-container {
  width: 100%;
  max-width: 900px; /* Matches your wrapper width */
  margin: auto;
  overflow: hidden;
  border-radius: 0px;
}

.banner-wrapper {
  display: flex !important;
  /* 4 images = 400% width */
  width: 400% !important; 
  height: 300px;
  animation: slide 24s infinite;
}

.banner-wrapper img {
  /* Each image takes up exactly 1/4th of the 400% container */
  width: 25% !important;
  flex-shrink: 0 !important;   
  height: 100%;
  display: block;
  object-fit: cover; 
}

.banner-container:hover .banner-wrapper {
  animation-play-state: paused;
  cursor: pointer;
}

/* Animation using percentages so it works on any screen size */
@keyframes slide {
  0%, 20%    { transform: translateX(0); }             /* Image 1 */
  25%, 45%   { transform: translateX(-25%); }          /* Image 2 */
  50%, 70%   { transform: translateX(-50%); }          /* Image 3 */
  75%, 95%   { transform: translateX(-75%); }          /* Image 4 */
  100%       { transform: translateX(-100%); }         /* Loop back */
}

/* Mobile height adjustment */
@media (max-width: 768px) {
  .banner-wrapper {
    height: 150px; /* Slimmer height for mobile phones */
  }
}