@import url('https://fonts.googleapis.com/css');

:root {
  --primary-color: #e32a2a;
  --secondary-color: #f1fcff;
  --default-color: #424242;
  --info-color: #3490dc;
  --fun-arena-primary-color: #D9D9D9;
  --fun-arena-secondary-color: #009FE3;
  --fun-arena-header-gradient: linear-gradient(180deg, rgba(7, 7, 7, 0) 41.7%, #070707 85.42%);
}

.text-primary {
  color: var(--primary-color);
}

.hover\:text-primary:hover {
  color: var(--primary-color);
}

.bg-primary {
  background-color: var(--primary-color);
}

.border-b-primary {
  border-bottom-color: var(--primary-color);
}

.hover\:bg-primary:hover {
  background-color: var(--primary-color);
}

.text-secondary {
  color: var(--secondary-color);
}

.hover\:text-secondary:hover {
  color: var(--secondary-color);
}

.bg-secondary {
  background-color: var(--secondary-color);
}

.hover\:bg-secondary:hover {
  background-color: var(--secondary-color);
}

.text-default {
  color: var(--default-color);
}

.hover\:text-default:hover {
  color: var(--default-color);
}

.bg-default {
  background-color: var(--default-color);
}

.hover\:bg-default:hover {
  background-color: var(--default-color);
}

.fill-default {
  fill: var(--default-color);
}

.text-info {
  color: var(--info-color);
}

.bg-info {
  background-color: var(--info-color);
}

.hover\:bg-info:hover {
  background-color: var(--info-color);
}

.border-b-info {
  border-bottom-color: var(--info-color);
}

.border-info {
  border-color: var(--info-color);
}

.bg-linear-primary-to-default {
  background-color: transparent;
  background-image: linear-gradient(
    200deg,
    var(--primary-color) 0%,
    var(--default-color) 100%
  );
}

body
{
  font-family: "SpaceGrotesk";
}

@font-face {
  font-family: BigShouldersDisplay;
  src: url(../fonts/BigShouldersDisplay-VariableFont_wght.ttf);
  font-weight: 100 1000;
}

@font-face {
  font-family: SpaceGrotesk;
  src: url(../fonts/SpaceGrotesk-VariableFont_wght.ttf);
  font-weight: 100 1000;
}

.text-fun-arena-primary-color {
  color: var(--fun-arena-primary-color);
}

.text-fun-arena-secondary-color {
  color: var(--fun-arena-secondary-color);
}

.recent-post-title {
  font-family: SpaceGrotesk;
  font-weight: 700;
  font-size: 16px;
  line-height: 20.42px;
  letter-spacing: 0%;
  color: white;
}

.recent-post-updated-at {
  font-family: SpaceGrotesk;
  font-weight: 400;
  font-size: 12px;
  line-height: 15.31px;
  letter-spacing: 0%;
  color: var(--fun-arena-primary-color);
}

.bg-fun-arena-header-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--fun-arena-header-gradient);
}

#banner-carousel .slick-dots li button::after {
    content: "";
  }
/* contact popup */
.button-contact-effect {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #ef4444;
  opacity: 0;
  width: 100%; 
  height: 100%;
  transform: scale(0);
  animation: arcontactus-pulse 2s infinite;
  z-index: -1;
}

.button-contact-effect:nth-child(2) {
  animation-delay: 0.5s;
}
@keyframes arcontactus-pulse {
  0% {
      -webkit-transform:scale(0);
      transform:scale(0);
      opacity:1
  }
  50% {
      opacity:.5
  }
  100% {
      -webkit-transform:scale(1.5);
      transform:scale(1.5);
      opacity:0
  }
}
.modal-contact {
  transform-origin: 90% 100%;
  transform: scale(0);
  transition: all 0.2s ease;
}
.button-contact.active + .modal-contact {
  transform: scale(1);
}