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

body {
  font-family: var(--font-sora);
}

@layer base {
    :root  {
        --lightBackground: 0, 0%, 100%;
        --background: 0, 0%, 97%;
        --foreground: 240, 4%, 16%;
        --card: 0, 0%, 100%;
        --card-foreground: 208 5% 15%;
        --popover: 208 100% 100%;
        --popover-foreground: 208 100% 10%;
        --primary: 208 88% 49%;
        --primary-foreground: 0 0% 100%;
        --secondary: 208 30% 90%;
        --secondary-foreground: 0 0% 0%;
        --muted: 170 30% 95%;
        --muted-foreground: 240, 5%, 34%;
        --accent: 208 30% 90%;
        --accent-foreground: 208 5% 15%;
        --destructive: 0, 84%, 60%;
        --destructive-foreground: 208 5% 100%;
        --border: 240, 6%, 90%;
        --input: 208 30% 50%;
        --ring: 208 88% 48.8%;
        --gradient-primary: linear-gradient(135deg,hsl(208, 88%, 58%) 0%,hsl(208, 88%, 48.8%) 100%);
        --radius: 0.75rem;
      }
      .dark  {
        --background: 208 50% 10%;
        --foreground: 208 5% 100%;
        --card: 208 50% 10%;
        --card-foreground: 208 5% 100%;
        --popover: 208 50% 5%;
        --popover-foreground: 208 5% 100%;
        --primary: 208 88% 48.8%;
        --primary-foreground: 0 0% 100%;
        --secondary: 208 30% 20%;
        --secondary-foreground: 0 0% 100%;
        --muted: 170 30% 25%;
        --muted-foreground: 240, 10%, 4%;
        --accent: 170 30% 25%;
        --accent-foreground: 208 5% 95%;
        --destructive: 0 100% 50%;
        --destructive-foreground: 208 5% 100%;
        --border: 208 30% 50%;
        --input: 208 30% 50%;
        --ring: 208 88% 48.8%;
        --radius: 0.5rem;
      }
}
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
html, body {
    scroll-behavior: smooth;
    overflow-x: clip;
}
.customScroll::-webkit-scrollbar {
    width: 16px;
    border-radius: 20px;
    margin-top: 16;
    background-color: transparent;
    transition: scrollbar-color 0.3s ease-in-out;

  }
 .customScroll::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
    transition: background-color 0.3s ease-in-out;

    cursor: pointer;
    transition: height 0.3s ease-in-out;
  }
.customScroll2::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    border-radius: 20px;
    margin-top: 16;
    background-color: transparent;
    transition: scrollbar-color 0.3s ease-in-out;

  }
 .customScroll2::-webkit-scrollbar-thumb {
    background-color: #eeeeee;
    border-radius: 20px;
    border: 6px solid transparent;
    
    background-clip: content-box;
    transition: background-color 0.3s ease-in-out;

    cursor: pointer;
    transition: height 0.3s ease-in-out;
  }

.integration-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
  }
  
  .points-container {
    display: flex;
    align-items: center;
    position: relative;
  }
  
  .point {
    font-size: 20px;
    padding: 10px;
    margin: 0 20px;
    background-color: #eee;
    border-radius: 5px;
    text-align: center;
  }
  
  .dashed-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px; /* Adjust the width as needed */
    height: 2px;
    background: linear-gradient(90deg, transparent 50%, #000 50%);
    background-size: 10px 100%;
    animation: dash 1.5s linear infinite;
  }
  
  @keyframes dash {
    0% {
      background-position: 100%;
    }
    100% {
      background-position: -100%;
    }
  }
/* --------- */


.moving-dash {
    animation: dashMove 5s linear infinite;
    stroke-dashoffset: 300;
}

.glossary-category-item{
  border:1px solid  white;
}

.glossary-category-item-active{
 background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
 border:1px solid  #52A5EF;
  color: #1d4ed8;
}

.glossary-category-item:hover{
 background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border:1px solid  #52A5EF;
  color: #1d4ed8;
}

.glossary-item-linear-bg{
  background: linear-gradient(180deg, #0F82EA 0%, #71BBFF 100%);
}

@keyframes dashMove {
    0% {
        stroke-dashoffset: 300;
    }
    50% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -300; 
    }
}

@layer utilities {
    .paused {
        animation-play-state: paused;
    }
}
.dashedBorder {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='lightgray' strokeWidth='4' strokeDasharray='6%2c 15' stroke-dashoffset='18' stroke-linecap='square'/%3e%3c/svg%3e");
}
.dashedBorderBlue {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='dodgerBlue' strokeWidth='4' strokeDasharray='6%2c 15' stroke-dashoffset='18' stroke-linecap='square'/%3e%3c/svg%3e");
}



.postBody {
    font-family: var(--font-sora), -apple-system, BlinkMacSystemFont, sans-serif;
    font-feature-settings: 'kern';
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  .postBody * {
    font-family: inherit !important;
    @apply text-left
  }
  

  .postBody h2 strong {
    @apply text-xl font-semibold !text-[#181818] mb-[8px] mt-[28px];
  }
  .postBody h3 strong {
    @apply text-lg font-semibold text-[#181818];
  }
  .postBody h4 strong {
    @apply text-base font-medium text-[#181818];
  }
  .postBody p span {
    @apply mb-3 text-lg font-normal   leading-6 ;
  }
  .postBody p strong {
    @apply mb-3 text-lg  text-[#181818]  leading-6 ;
  }
  

  .postBody h1,
  .postBody h2,
  .postBody h3,
  .postBody h4,
  .postBody h5,
  .postBody h6 {
    @apply  !text-[#181818];
  }
  
  .postBody h1 {
    @apply text-3xl font-bold mb-10 ;
  }
  
  .postBody h2 {
    @apply text-xl font-semibold !text-[#181818] mb-[8px] mt-[28px];
  }
  .postBody h3 {
    @apply text-xl ;
  }
  
  .postBody p {
    @apply mb-3 text-lg font-normal text-[#52525B] leading-6 ;
  }
  
  .postBody a {
    @apply !text-primary hover:underline;
  }
  
  .postBody ul,
  .postBody ol {
    @apply  pl-6 mb-3 text-lg font-normal text-[#52525B] leading-6;
  }
  
  .postBody ul {
    @apply list-disc;
  }
  
  .postBody ol {
    @apply list-decimal;
  }
  
  .postBody li {
    @apply mb-2;
  }
  
  .postBody strong {
    @apply font-bold;
  }
  
  .postBody em {
    @apply italic;
  }
  
  .postBody blockquote {
    @apply border-l-4 border-primary pl-4 my-4 italic;
  }
  
  .postBody code {
    @apply bg-muted px-2 py-1 rounded text-sm font-mono;
  }
  
  .postBody pre {
    @apply bg-muted p-4 rounded my-4 overflow-x-auto;
  }
  
  .postBody pre code {
    @apply bg-transparent p-0;
  }
  
  .postBody img {
    @apply my-4 rounded max-w-full h-auto;
  }
  
  .postBody table {
    @apply w-full my-4 border-collapse;
  }
  
  .postBody th,
  .postBody td {
    @apply border p-2;
  }
  
  .postBody th {
    @apply bg-muted font-bold text-left;
  }