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

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: #18c5bd !important /* #006bff */;
}

.text-primary {
  --tw-text-opacity: 1;
  color: #18c5bd !important;
}

.group-hover\:fill-primary:hover {
  color: #18c5bd !important;
}
.hover\:text-primary:hover {
  color: #18c5bd !important;
}

.testimonial-01 .swiper-pagination-bullet {
  @apply h-2.5 w-2.5 bg-stroke opacity-100;
}
.testimonial-01 .swiper-pagination-bullet-active {
  @apply w-5 rounded-full bg-primary;
}

.testimonial-01 .swiper-pagination {
  @apply relative pt-[50px];
}

#supportCheckbox:checked ~ div span {
  @apply opacity-100;
}
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: hsl(var(--border));
  }
  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }
  .theme {
    --animate-marquee: marquee var(--duration) infinite linear;
    --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
  }
}
@layer base {
  body {
    @apply relative z-1 font-inter text-regular font-normal text-waterloo dark:text-manatee;
  }
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --duration: 3;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer components {
  .dropdown {
    @apply -left-7.5 mt-2 hidden min-w-max flex-col gap-4 rounded-md border border-stroke bg-white px-8 py-5 shadow-solid-13 duration-300 ease-in dark:border-strokedark dark:bg-black xl:invisible xl:absolute
    xl:mt-0 xl:flex xl:w-[250px] xl:translate-y-10 xl:opacity-0
    xl:before:absolute xl:before:-top-1.5 xl:before:left-10 xl:before:h-3 xl:before:w-3 xl:before:rotate-45 xl:before:border-l xl:before:border-t xl:before:border-stroke xl:before:bg-white xl:group-hover:visible xl:group-hover:translate-y-6.5 
    xl:group-hover:opacity-100 xl:dark:before:border-strokedark xl:dark:before:bg-black;
  }
}

@media (max-width: 1280px) {
  .navbar {
    @apply max-h-[400px] overflow-y-scroll;
  }
}

@layer utilities {
  /* Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .img-white {
    filter: invert(0%) sepia(96%) saturate(15%) hue-rotate(249deg) brightness(100%) contrast(105%);
  }
}

.blog-details-docs {
  @apply rounded-lg border border-white p-7.5 shadow-solid-3 transition-all dark:border-strokedark  dark:bg-blacksection xl:p-12.5;
}

.blog-details p {
  @apply mb-8 text-base leading-relaxed text-titlebgdark dark:text-waterloo;
}

.blog-details p strong {
  @apply text-primary dark:text-waterloo;
}
.blog-details h3 strong,
.blog-details h3 {
  @apply mb-10 text-xl !font-semibold leading-tight text-black dark:text-white sm:text-2xl sm:leading-tight lg:text-xl lg:leading-tight xl:text-2xl xl:leading-tight;
}

.blog-details h4 strong,
.blog-details h4 {
  @apply text-xl !font-semibold leading-tight text-black dark:text-white sm:text-2xl sm:leading-tight lg:text-xl lg:leading-tight xl:text-2xl xl:leading-tight;
}

.blog-details h5 strong,
.blog-details h5 {
  @apply mb-3 text-lg !font-semibold leading-tight text-black dark:text-white sm:text-xl;
}

.blog-details h1 {
  @apply mb-4 text-3xl !font-bold !leading-tight text-black dark:text-white sm:text-4xl md:text-[45px] lg:text-4xl xl:text-[45px];
}
.blog-details h2 strong,
.blog-details h2 {
  @apply mb-4 text-[26px] !font-bold !leading-tight text-black dark:text-white sm:text-3xl md:text-4xl;
}

.blog-details ul,
.blog-details ol {
  @apply mb-10 list-inside list-disc text-titlebgdark;
}

.blog-details li,
.blog-details li {
  @apply mb-2 text-base text-titlebgdark dark:text-waterloo;
}

.blog-details blockquote {
  @apply relative z-10 mb-10 overflow-hidden rounded-sm bg-manatee p-8 text-center text-base font-medium italic text-black dark:bg-titlebgdark md:py-9 lg:px-10;
}

.blog-details blockquote::after {
  content: '';
  @apply absolute bottom-0 right-0 h-20 w-20 bg-[url(/images/blog/quote-shape-2.svg)] bg-contain bg-right-bottom bg-no-repeat;
}

.blog-details blockquote::before {
  content: '';
  @apply absolute left-0 top-0 h-[106px] w-[140px] bg-[url(/images/blog/quote-shape-1.svg)] bg-contain bg-left-top bg-no-repeat dark:bg-[url(/images/blog/quote-shape-1.svg)];
}

pre {
  @apply relative mb-2 rounded-lg bg-strokedark px-4 py-2;
}
.prism-copy-button {
  @apply absolute right-2 top-2 h-[26px] rounded bg-white px-4 text-primary;
}

.active-tab {
  @apply bg-stroke text-black dark:bg-blackho dark:text-white;
}

.bg-hero1 {
  background-image: url('/images/hero/smart/smart-bs.png');
}
.text-green-light {
  color: #7edad2;
}

.font-poppins {
  font-family: 'Poppins';
}

.font-volkhov {
  font-family: 'Volkhov';
}

.font-neue {
  font-family: 'Bebas Neue';
}

.font-roboto {
  font-family: 'Roboto';
}
.font-exo {
  font-family: 'Exo';
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.loginform svg {
  width: 16px;
  height: 16px;
}

.bold {
  font-weight: bold;
}
.bgImgAtt {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@theme inline {
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }
  @keyframes marquee-vertical {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(calc(-100% - var(--gap)));
    }
  }
}