#preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.6s ease;
}

#preloader.fade-out {
	opacity: 0;
	pointer-events: none;
}

@keyframes fadeBlink {
	0%   { opacity: 1; }
	25%  { opacity: 0; }
	50%  { opacity: 1; }
	75%  { opacity: 0; }
	100% { opacity: 1; }
}

#preloader-logo {
	animation: fadeBlink 2s ease-in-out forwards;
}

.brand-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px; /* space between logos */
}

.brand-block {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 160px;
}

.brand-block img {
  max-height: 90px; /* all logos same height */
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.brand-block img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@media (max-width: 768px) {
  .brand-grid {
    gap: 25px;
  }
  .brand-block {
    flex: 0 1 120px;
  }
  .brand-block img {
    max-height: 70px;
  }
}

@media (max-width: 480px) {
  .brand-grid {
    gap: 20px;
  }
  .brand-block {
    flex: 0 1 100px;
  }
  .brand-block img {
    max-height: 50px;
  }
}
/* Outline effect for white logos */
.brand-block img.logo-outline {
  filter: grayscale(100%) 
          drop-shadow(0.5px 0.5px 0 #666) 
          drop-shadow(-0.5px 0.5px 0 #666) 
          drop-shadow(0.5px -0.5px 0 #666) 
          drop-shadow(-0.5px -0.5px 0 #666);
  opacity: 0.85;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.brand-block img.logo-outline:hover {
  filter: grayscale(0%) 
          drop-shadow(0.5px 0.5px 0 #111) 
          drop-shadow(-0.5px 0.5px 0 #111) 
          drop-shadow(0.5px -0.5px 0 #111) 
          drop-shadow(-0.5px -0.5px 0 #111);
  opacity: 1;
}