/* --------------------------------------------
   FONT: MONT
-------------------------------------------- */
@font-face {
  font-family: "Mont";
  src: url("fonts/Mont-SemiBold.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

/* UNIVERSAL FONT RESET */
html, body, * {
  font-family: "Mont", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------
   PAGE LAYOUT (DESKTOP)
-------------------------------------------- */
body {
  background: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical centering on desktop */
  align-items: center;       /* horizontal centering */
}

/* --------------------------------------------
   MAIN CONTENT BLOCK
-------------------------------------------- */
.center-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* PRIMARY LOGO (responsive) */
.logo-img {
  width: 60vw;
  max-width: 320px;     /* original size */
  height: auto;
  margin-bottom: 32px;  /* original spacing */
}

/* TAGLINE */
.tagline {
  font-size: 16px;
  line-height: 1.35;
  color: #000000;
  max-width: 480px;     /* original width */
  margin-bottom: 16px;  /* original spacing */
}

/* EMAIL LINK */
.email-link {
  font-size: 16px;
  color: #000000;
  text-decoration: none;
}
.email-link:hover {
  text-decoration: underline;
  color: #0078f0;
}

/* --------------------------------------------
   CAROUSEL HEADING
-------------------------------------------- */
.carousel-heading {
  margin-top: 60px;     /* original spacing */
  margin-bottom: 20px;  /* original spacing */
  text-align: center;
  font-size: 16px;
  color: #000000;
}

/* --------------------------------------------
   LOGO CAROUSEL (DESKTOP DEFAULT)
-------------------------------------------- */
.logo-carousel {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;      /* original vertical padding */
}

.logo-track {
  display: flex;
  animation: scroll-logos 25s linear infinite;
}

/* Logos — responsive height */
.logo-carousel img {
  height: 120px;        /* original size */
  width: auto;
  flex-shrink: 0;
  margin-right: 48px;  /* replaces gap */
  filter: grayscale(100%);
  opacity: 0.85;
}

.logo-carousel img:last-child {
  margin-right: 0;
}

.logo-carousel img:hover {
  filter: none;
  opacity: 1;
}

/* Smooth infinite scroll */
@keyframes scroll-logos {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.logo-track {
  display: flex;
  animation: scroll-logos 25s linear infinite;
  will-change: transform;
}

/* --------------------------------------------
   MOBILE RESPONSIVENESS
-------------------------------------------- */
@media (max-width: 600px) {

  /* Stop forced vertical centering on mobile */
  body {
    justify-content: flex-start;
    padding-top: 40px;
  }

  .logo-img {
    width: 80vw;         /* scalable for small screens */
    max-width: 280px;
    margin-bottom: 28px; /* proportionally smaller */
  }

  .tagline {
    font-size: 14px;
    max-width: 90vw;
    margin-bottom: 14px;
  }

  .email-link {
    font-size: 14px;
  }

  .carousel-heading {
    margin-top: 40px;
    margin-bottom: 16px;
    font-size: 14px;
  }

  /* Make carousel logos larger relative to screen */
   .logo-carousel img {
     height: 30vw;         /* larger on small screens */
     max-height: 120px;    /* matches the 3x desktop cap */
     margin-right: 32px;
   }

  .logo-carousel {
    padding: 14px 0;
  }
  
  @media (max-width: 600px) {
  /* existing mobile rules... */

  .logo-track {
    animation: scroll-logos 12s linear infinite; /* faster on mobile */
  }
}
}

/* --------------------------------------------
   TABLET RESPONSIVENESS
-------------------------------------------- */
@media (min-width: 601px) and (max-width: 1024px) {

  .logo-img {
    width: 50vw;
    max-width: 340px;
  }

  .tagline {
    font-size: 15px;
    max-width: 80vw;
  }

  .carousel-heading {
    font-size: 15px;
  }

  .logo-carousel img {
    height: 100px;
  }
}