@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  /* Black text color */
  --background-rgb: 255, 255, 255;
  /* White background color */
}

body {
  color: rgb(var(--foreground-rgb));
  background-color: rgb(var(--background-rgb));
  font-family: 'Outfit', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Libre Baskerville', serif;
}

p,
ul,
a,
ol,
label,
span {
  font-family: 'Outfit', sans-serif;

}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* CustomSlider.css */
.react-awesome-slider {
  /* Add CSS styles to the slider container if needed */
}

.react-awesome-slider--dots {
  /* Customize the style of the navigation dots */
}

.react-awesome-slider--dots li {
  /* Customize the individual navigation dots */
}

.awssld__bullets .awssld__bullets--active,
.awssld__bullets button {
  /* Customize the button inside the navigation dots */
  background-color: #0d001d !important; /* Change the background color to blueish */
  border-color: #0d001d; /* Change the border color to match */
}
.awssld__content {
  background: none !important;
}

.awssld__timer ,.awssld__timer--animated, .awssld__timer--run {
  display: none !important;
  background-color: transparent !important;
}

.slick-list {
  height: 100vh;
}
.slick-track {
  height: 100%;
}

/* styles/Carousel.module.css */
.slick-dots {
  bottom: 20px;
}

.slick-dots li button:before {
  font-size: 12px;
  color: white;
}

.slick-dots li.slick-active button:before {
  color: red;
}
p {
  margin-bottom: 1em;
}
/* .list {
  list-style-type: none;
  padding-left: 0;
}

.list-item::before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  background: red;
  mask: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="12" fill="%23fff"/><path d="M9 11.5l2 2 4-4" stroke="%23fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
} */
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.animation-slide {
    animation: slideIn 1s ease forwards;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.fadeInLeft {
  animation-name: fadeInLeft;
}

.fadeInRight {
  animation-name: fadeInRight;
}

.bg-navbar-gradient {
  background: linear-gradient(180deg, #ffffff 0%, #e2edff 100%);
}
.bg-primary {
  background-color: rgb(239 68 68);
}
.text-primary {
  color: rgb(239 68 68);
}

.border-primary {
  border-color: rgb(239 68 68);
}
.hover-block:hover .hover-block-child {
  display: block;
  
}
.hover-block:focus {
  display: block;
}
@keyframes fadeInRight {
  from {
      opacity: 0;
      transform: translateX(100%);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

.animate-fadeInRight {
  animation: fadeInRight 1s ease-in-out forwards;
}

@keyframes slideInLeft {
  from {
      opacity: 0;
      transform: translateX(-100%);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
      opacity: 0;
      transform: translateX(100%);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

.animate-slideInLeft {
  animation: slideInLeft 1s ease-in-out forwards;
}

.animate-slideInRight {
  animation: slideInRight 1s ease-in-out forwards;
}



@keyframes slideInFromLeft {
  from {
      opacity: 0;
      transform: translateX(-100%);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
      opacity: 0;
      transform: translateX(100%);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

.animate-slideInFromLeft {
  animation: slideInFromLeft 1s ease-in-out forwards;
}

.animate-slideInFromRight {
  animation: slideInFromRight 1s ease-in-out forwards;
}

[data-animation-delay] {
  opacity: 0;
}

[data-animation-delay="0.5s"] {
  animation-delay: 0.5s;
}

[data-animation-delay="1s"] {
  animation-delay: 1s;
}

[data-animation-delay="1.5s"] {
  animation-delay: 1.5s;
}