/* === Global === */
body {
  margin: 0;
  font-family: Roboto, sans-serif;
  background-color: #d2d3d5;
  color: #000;
  text-align: center;
}

/* === Top Black Strip with MoTeC logo === */
.header-black {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 20px;
  height: 192px; /* 20% taller */
}

.header-black img {
  height: 140px; /* scaled up */
  width: auto;
}

/* === Dark Gray Strip with Title === */
.header-gray {
  background-color: #4a4a4a;
  padding: 15px 20px;
  text-align: center;
}

.header-gray h1 {
  margin: 0;
  color: white;
  font-size: 3rem;
  font-weight: bold;
  text-transform: uppercase;
}

/* === Logo Container === */
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 120px; /* fixed distance below gray strip */
  position: relative;
}

/* Top row of 4 logos */
.top-row {
  display: flex;
  justify-content: center;
  gap: 100px; /* doubled spacing */
  margin-bottom: 80px; /* space above DC logo */
  flex-wrap: wrap;
}

.top-row img {
  max-width: 168px; /* 20% bigger */
  height: auto;
}

/* Bottom row (DC logo centered) */
.bottom-row {
  display: flex;
  justify-content: center;
}

.bottom-row img {
  max-width: 192px; /* 20% bigger DC logo */
  height: auto;
}

/* === Hover & click effects for all logos === */



/* === Responsive behavior === */
@media (max-width: 900px) {
  .top-row {
    flex-wrap: wrap;
    gap: 40px;
  }
  .header-gray h1 {
    font-size: 2.2rem;
  }
  .logo-container {
    margin-top: 90px;
  }
}

@media (max-width: 520px) {
  .top-row {
    gap: 20px;
  }
  .header-gray h1 {
    font-size: 1.6rem;
  }
  .logo-container {
    margin-top: 70px;
  }
}


.m1-tune {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}
.m1-tune:hover {
    transform: scale(1.08) translateY(-5px);
    box-shadow: 0 8px 20px rgba(237,28,47,0.4);
    border-radius: 8px;
}
.m1-tune:active {
    transform: scale(0.95) translateY(0);
    box-shadow: 0 4px 10px rgba(237,28,47,0.3);
}