@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

.main-page {
  font-family: 'Montserrat';
}

.loading-dots {
  display: flex;
  gap: 12px;
  align-items: end;
}

.dot {
  font-size: 1rem;
  color: #1a3d71;
  animation: bounce 1.2s ease-in-out infinite;
}

.delay-1 {
  animation-delay: 0s;
}

.delay-2 {
  animation-delay: 0.3s;
}

.delay-3 {
  animation-delay: 0.6s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
}

.countdown {
  font-size: 2rem;
  background-color: rgba(26, 61, 113, 0.1);
  font-weight: 600;
}

.countdown span, .countdown i {
  color: #1a3d71;
  padding: 0 3px;
}

.request-info p {
  display: "inline-block";
}

.request-info .react-loading-skeleton {
  width: 250px;
}

.request-info .info-name {
  font-weight: 700;
}

.button-callout {
  transition: transform 0.3s ease-in-out;
}

.button-callout:hover {
  transform: scale(1.1);
}

/* Base / Mobile */
.col-img {
  flex: 0 0 18%;
  max-width: 18%;
}

.custom-padding-md-up {
  padding: 40px;
}

@media (max-width: 991px) {
  .col-img {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Medium (≥992px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .col-img {
    flex: 0 0 35%;
    max-width: 35%;
  }
}

/* Large / XL */
@media (min-width: 1200px) and (max-width: 1400px) {
  .col-img {
    flex: 0 0 30%;
    max-width: 30%;
  }
}

@media (min-width: 1400px) and (max-width: 1699px) {
  .col-img {
    flex: 0 0 22%;
    max-width: 22%;
  }
}

.title-line {
  height: 1px;
  background-color: #dedede;
  align-self: center;
}

.cnj-link {
  color: #cc9932 !important;
}

.cnj-link:hover {
  color: color-mix(in srgb, #cc9932 85%, black) !important;
  text-decoration: underline;
}