@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

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



body {
  font-family: "Inter", sans-serif;
}

.sticky-menu .navbar-logo {
  @apply py-2;
}

.sticky-menu #navbarToggler span {
  @apply bg-dark dark:bg-white;
}

.sticky-menu #navbarCollapse li > a {
  @apply text-dark hover:text-primary hover:opacity-100 dark:text-white;
}
#navbarCollapse li .ud-menu-scroll.active {
  @apply opacity-70;
}
.sticky-menu #navbarCollapse li .ud-menu-scroll.active {
  @apply text-primary opacity-100 dark:text-white;
}
.sticky-menu .loginBtn {
  @apply text-dark hover:text-primary hover:opacity-100 dark:text-white;
}

.sticky-menu .signUpBtn {
  @apply bg-primary hover:bg-dark text-white hover:text-white;
}

.navbarTogglerActive > span:nth-child(1) {
  @apply top-[7px] rotate-45 transform;
}
.navbarTogglerActive > span:nth-child(2) {
  @apply opacity-0;
}
.navbarTogglerActive > span:nth-child(3) {
  @apply top-[-8px] rotate-[135deg];
}

.blog-details,
.blog-details p {
  @apply text-body-color dark:text-dark-6 text-base leading-relaxed;
}

.blog-details p {
  @apply mb-8;
}

.blog-details strong {
  @apply text-dark font-bold dark:text-white;
}

.blog-details ul {
  @apply mb-8 list-inside list-disc space-y-3;
}

.blog-details ol {
  @apply mb-8 list-inside list-decimal space-y-3;
}

.blog-details h1 {
  @apply text-dark mb-8 text-3xl font-bold dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.28];
}

.blog-details h2 {
  @apply text-dark mb-8 text-2xl font-bold dark:text-white sm:text-3xl md:text-[35px] md:leading-[1.28];
}

.blog-details h3 {
  @apply text-dark mb-6 text-2xl font-bold dark:text-white sm:text-[28px] sm:leading-[40px];
}


@keyframes zoomInOut {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.005);
  }
}