@keyframes ring {
  0% {
    transform: rotate(0);
  }

  15% {
    transform: rotate(15deg);
  }

  30% {
    transform: rotate(-10deg);
  }

  45% {
    transform: rotate(7deg);
  }

  60% {
    transform: rotate(-5deg);
  }

  75% {
    transform: rotate(3deg);
  }

  100% {
    transform: rotate(0);
  }
}

.subscribe-btn:hover .fa-bell {
  animation: ring 0.7s ease-in-out;
  transform-origin: center;
  display: inline-block;
  /* Ensures the icon behaves like a block element for transform */
}



/* === Headings: text-xl and above === */
.text-xl,
.text-2xl,
.text-3xl,
.text-4xl,
.text-5xl,
.text-6xl,
.text-7xl,
.text-8xl,
.text-9xl,
h1,
h2,
h3 {
  font-family: 'Open Sans', sans-serif;
}

/* === Body Text: text-base and below === */
.text-base,
.text-sm,
.text-xs,
p,
span,
li,
a,
small,
h4,
h5,
h6 {
  font-family: 'Montserrat', sans-serif;
  /* or 'Montserrat' */
}


/* Smooth infinite marquee */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}


.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 1s ease-out;
}

.fade-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition: all 1s ease-out;
}

.fade-in-left.visible,
.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.zoom-in {
  opacity: 0; 
  transform: scale(0.95);
  transition: all 1s ease-out;
}

.zoom-in.visible {
  opacity: 1;
  transform: scale(1);
}

.delay-0 { transition-delay: 0ms; }
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }
.delay-700 { transition-delay: 700ms; }
.delay-800 { transition-delay: 800ms; }
.delay-900 { transition-delay: 900ms; }


/* #302e4d
#00a7b5 
#333236*/