@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap')
layer(base);

@import 'tailwindcss';

@config '../../tailwind.config.ts';

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@layer utilities {
  :root {
    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --foreground-rgb: 255, 255, 255;
      --background-start-rgb: 0, 0, 0;
      --background-end-rgb: 0, 0, 0;
    }
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 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;
  }
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --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%;
  }
}

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

@layer utilities {
  .underline-custom {
    @apply hover:underline underline-offset-2;
  }
}


@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.bg-gradient-footer-card{
  border-radius: 10px;
  background: linear-gradient(87deg, #E8E9E9 -1.92%, #DCEFFA 25.48%, #E3ECF1 77.37%, #E2E2E2 106.14%);
}

.bg-video-badge{
  background: url(../../public/assets/images/videobadge-bg.png)  repeat;
  background-size: cover;
}

.header-bg{ 
  position: relative;
}
.header-bg::before,
.header-bg::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}


.header-bg::before {
  background: url(../../public/assets/images/header-left.png) top left no-repeat;
  left: 0;
}
.header-bg::after {
  background: url(../../public/assets/images/header-right.png) top right no-repeat;
  right: 0;
}

.bg-hover-rev-state{
  @apply hover:bg-violet! hover:text-white
}

.scale-state{
  @apply hover:scale-105 transition-all duration-500 delay-200 ease-in-out
}

.card-one-bg{
  border: 1px solid #F2F2F2;
  background: #48BDB7;
  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.05);
}

.card-two-bg{
  border: 1px solid #F2F2F2;
  background: #FF8E16;
  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.05);
}

.card-three-bg{
  border: 1px solid #F2F2F2;
  background: #45A3D7;
  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.05);
}

.card-four-bg{
  border: 1px solid #F2F2F2;
  background: #024E8C;
  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.05);
}

.sales-card-one-bg{background: rgba(255, 255, 255, 0.87);}

.sales-card-two-bg{background: #fff; box-shadow: -1px 4px 4px 4px rgba(0, 0, 0, 0.15);}


.sales-card-three-bg{background: rgba(255, 255, 255, 0.87);}



.management-card{
  border-radius: 24px 0px;
background: linear-gradient(130deg, #FFCA8F 30.75%, #F8D7D7 51.57%, #FFB15B 71.1%);
}

.workflowdiagram-bg{
  background: url(../../public/assets/images/workflowdiagram-bg.png)  repeat;
  background-size: cover;
}

.headerfeavideobg{
  background: url(../../public/assets/images/features-video-bg.svg)  no-repeat;
  background-size: cover;
}

.headersalesvideobg{
  background: url(../../public/assets/images/salesvideobg.png)  no-repeat;
  background-size: cover;
}

.prose{
  max-width: 100%;
}

.prose-p {color: #000000;}

.prose-container {margin: 0 auto; width: 92%;}


.feature-carousel .size-2 {width: 1rem; height: 1rem;} 

.enq-card::before{
    background: var(--card-color);
    width: 113px;
    content: " ";
    height: 12px;
    position: absolute;
    left: 0px;
    top: -12px;
    border-radius: 8px 0 0;
}
.enq-card{
    border-radius: 0px 10px 10px 0px;
    border-left: 8px solid var(--card-color);
    /* position: relative; */
    /* min-height: 475px; */
    margin-bottom: 25px;
    border-top: 1px solid var(--card-color);
    border-right: 1px solid var(--card-color);
    border-bottom: 1px solid var(--card-color);

}
.enq-header::before{
    content: "";
    position: absolute;
    left: 113px;
    top: -12px;
    border-top: 12px solid transparent;
    border-left: 12px solid var(--card-color);
    border-right: 12px solid transparent;
}
.enq-footer::before{
    background:var(--card-color);
    width: 113px;
    content: " ";
    height: 8px;
    position: absolute;
    left: 0px;
    bottom: -8px;
    border-radius: 0 0 0 8px;
}
.enq-header::before{
  
content: "";
    position: absolute;
    left: 113px;
    top: -12px;
    border-top: 12px solid transparent;
    border-left: 12px solid var(--card-triangle-color);
    border-right: 12px solid transparent;
}

.hide-scrollbar-horizontal{
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scroll{
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.glow-text{
  @apply [text-shadow:0_4px_8px_rgba(14_165_223/0.5)]
}