/* 3. Header Section */

.site-header {
  display: flex;
  align-items: center;
  padding: 10px 30px; /* reduced from 20-30px */
  margin-bottom: 10px; /* ✅ adds space below the header */
  background-color: #01497c;
  color: #f5f5f5;
  position: relative;
  z-index: 2;
  justify-content: space-between;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  min-height: 150px; /* ✅ increased height */
}

.site-header img {
  height: 80px; /* reduce logo height */
  margin-right: 15px;
}

.site-header h1 {
  font-size: 18px;
  margin: 0;
  color: #f5f5f5;
}

.site-header p {
  margin-top: 2px;
  font-size: 14px;
  color: #f5f5f5;
}

.header-left {
  display: 80px;
  align-items: center;
}

.header-right {
  width: 480px;           /* ⬆️ Wider image container */
  height: 160px;          /* ⬆️ Taller for better visibility */
  overflow: hidden;
  position: relative;
  border-radius: 6px;
}

.flasher {
  display: flex;
  animation: flashImages 9s infinite;
}

.flasher img {
  width: 500px;           /* match .header-right width */
  height: 200px;          /* match .header-right height */
  object-fit: cover;      /* ⬅️ ensures full image appears proportionally */
  flex-shrink: 0;
  transition: opacity 0.5s ease-in-out;
  border-radius: 5px;
  filter: contrast(1.1) brightness(1.1);
}

/* Animation to cycle images */
@keyframes flashImages {
  0%   { transform: translateX(0%);   }
  33%  { transform: translateX(-120%); }
  66%  { transform: translateX(-220%); }
  100% { transform: translateX(0%);   }
}