@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
  --font-sans: "DM Sans", sans-serif; 
}

.attachment__caption{
  display: none;
}

.responsive-hero {
  background-image: var(--hero-large);
  background-size: cover;
  background-position: center;
}

@media (max-width: 1024px) {
  .responsive-hero {
    background-image: var(--hero-medium);
  }
}

@media (max-width: 640px) {
  .responsive-hero {
    background-image: var(--hero-mobile);
  }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 40s linear infinite;
  will-change: transform;
}
.marquee-container:hover .animate-marquee {
  animation-play-state: paused;
}
.gradient-mask {
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.trix-content ul{
  list-style: unset;
  padding-left: 2.5rem;
}

.text-rich-content h1{
  font-size: 1.5rem;
  margin-bottom: .5rem;
}

.btn-large{
  height: 56px !important;
}

.btn-small{
  height: 40px !important;
}

.bg-yellow-primary, input.peer:checked + .peer-checked\:bg-yellow-primary,
input.peer:checked ~ .peer-checked\:bg-yellow-primary{
  background-color: #FDD000 !important;
}

.hover\:bg-yellow-primary:hover {
  background-color: #e6bd0b !important; /* Darker yellow */
}