@import "tailwindcss";
 
@theme {
  --color-body-bg: #fbf8ff;
  --color-heading: #0d0b14;
  --color-text: #424049;
  --color-badge: #ceb0fa;
  --color-link: #290064;
  --color-link-1: #9654F4;
  --color-border: #89A9FF;
  --color-table-text: #13101C;
  --color-danger-400: #F87171;
  --color-success-light: #E6FFF2;
  --color-success: #059669;


  --color-accent: #2a3ecf;
  --color-accent-soft: #4756e8;
  --color-seal-red: #bf392e;
  --color-line: #dbe1ea;
  --color-seal-green: #1f7a4f;
  --color-seal-amber: #b3791f;
  --color-paper: #eef1f6;
  --color-paper-raised: #ffffff;
  /* Danger */
  --color-danger-light: #FEE2E2;
  --color-danger: #C93B3B;
 
  --font-poppins: var(--font-poppins);
  --font-dm: var(--font-dm-sans);
 
  --text-28: 28px;
  --spacing-section: 75px;
 
  --shadow-card: 0px 4px 63.2px rgba(0, 0, 0, 0.15);
  --shadow-button: 0px 7px 10.2px rgba(79, 126, 255, 0.2);
  --shadow-header: 0px 14px 15px rgba(79, 126, 255, 0.1);
  --shadow-icon: 0px 2.77px 42.25px rgba(0, 0, 0, 0.1);
  --shadow-table-body: 0px 4px 4px 0px rgba(79, 126, 255, 0.1);
  --shadow-table-head: 0px 6.13px 153.16px 0px rgba(0, 0, 0, 0.08);
  --shadow-adminsidebar: 2px 12px 25px 0px rgba(0, 0, 0, 0.2);
 
  --background-gradient-1: linear-gradient(
    269.97deg,
    #65eefb -58.16%,
    #3466ce 39.67%,
    #955be4 121.52%
  );
 
  --background-gradient-2: linear-gradient(
    105.19deg,
    #efe6fd 39.32%,
    #955be4 65.62%,
    #efe6fd 91.92%
  );
 
  --background-gradient-3: linear-gradient(
    155.31deg,
    rgba(255, 255, 255, 0.5) 12.33%,
    rgba(255, 255, 255, 0) 34.31%,
    rgba(255, 255, 255, 0) 52.66%,
    rgba(255, 255, 255, 0.54) 74.67%
  );
 
  --background-gradient-4: linear-gradient(
    259.43deg,
    #5f3acc -73.55%,
    #65eefb -10.52%,
    #3466ce 48.12%,
    #955be4 110.16%
  );
  --background-admin-sidebar: linear-gradient(86.16deg, rgba(255, 255, 255, 0.2) 11.14%, rgba(255, 255, 255, 0.035) 113.29%);
  --animate-modal-overlay: modal-overlay 0.2s ease-out;
  --animate-modal-content: modal-content 0.3s ease-out;
  

  @keyframes modal-overlay {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes modal-content {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
 
}
@layer utilities {
  .scrollbar-thin-custom {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #cbd5e1 transparent;
  }

  .scrollbar-thin-custom::-webkit-scrollbar {
    width: 1px;
    height: 1px;
  }

  .scrollbar-thin-custom::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin-custom::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
  }

  .scrollbar-thin-custom::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
}
@layer base {
  html {
    -webkit-text-size-adjust: 100%;
  }
 
  body {
    background: var(--color-body-bg);
    color: var(--color-text);
    font-family: var(--font-dm-sans), sans-serif;
  }
}
 
@layer components {
  img{vertical-align: middle;}
  .container-k {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 16px;
  }
 
  .container-1655 {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: 16px;
  }
  .video-autoplay::-webkit-media-controls {
    display: none !important;
  }

  .video-autoplay::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
  }

  .video-autoplay::-webkit-media-controls-overlay-play-button {
    display: none !important;
  }

  .video-autoplay {
    pointer-events: none;
  }
  .glass-card {
    @apply relative overflow-hidden rounded-3xl border border-white;
    background: linear-gradient(
      86.16deg,
      rgba(255, 255, 255, 0.07) 11.14%,
      rgba(255, 255, 255, 0.4) 113.29%
    );
    backdrop-filter: blur(107.22px);
    -webkit-backdrop-filter: blur(107.22px);
    box-shadow:
      inset 3px 3px 6px #0000000a,
      inset -13px -13px 11px #fffffffa;
   }
   .glass-card-shadow {
    @apply relative overflow-hidden rounded-3xl border border-white;
    background: linear-gradient(
      86.16deg,
      rgba(255, 255, 255, 0.07) 11.14%,
      rgba(255, 255, 255, 0.4) 113.29%
    );
    backdrop-filter: blur(107.22px);
    -webkit-backdrop-filter: blur(107.22px);
    box-shadow:
      inset 3px 3px 6px #0000000a,
      inset -13px -13px 11px #fffffffa,
      0px 14px 15px rgba(79, 126, 255, 0.2);
   }
 
  .glass-card-hover:hover {
    box-shadow:
      inset 3px 3px 6px #0000000a,
      inset -6px -6px 11px #fffffffa,
      0px 14px 15px rgba(79, 126, 255, 0.2);
  }
 
  .font-heading {
    font-family: var(--font-poppins), sans-serif;
  }
 
  .font-body {
    font-family: var(--font-dm-sans), sans-serif;
  }
 
  .glass {
    background: rgba(255, 255, 255, 0.37);
    border: 1px solid #ffffff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
 
  .text-gradient {
    background: var(--background-gradient-1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
 
  .step-icon-circle {
    @apply relative flex items-center justify-center rounded-full w-16 h-16;
    background: linear-gradient(
      269.86deg,
      #65eefb -57.95%,
      #3466ce 71.02%,
      #955be4 136.79%
    );
    box-shadow: var(--shadow-icon);
  }
  .feature-icon-circle {
    @apply relative flex items-center justify-center rounded-full w-16 h-16 bg-white/20;
  }
  .step-icon-circle::before,
  .feature-icon-circle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    padding: 2px;
    background: var(--background-gradient-3);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    transition: all 0.35s ease-in-out;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
  }
 
  .step-icon-circle img {
    position: relative;
    z-index: 2;
    object-fit: contain;
  }
 
  .glass-card-hover:hover .step-icon-circle::before,
  .feature-card:hover .feature-icon-circle::before {
    animation: rotateBorder 5s linear infinite;
    padding: 8px;
    opacity: 0.5;
  }
  .feature-card {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.5);
  }
 
 
  /* Admin*/
  .admin-header-glass {
    position: relative;
    background: linear-gradient(
      86.16deg,
      rgba(255, 255, 255, 0.2) 11.14%,
      rgba(255, 255, 255, 0.035) 113.29%
    );
    backdrop-filter: blur(107.22px);
    -webkit-backdrop-filter: blur(107.22px);
    box-shadow: 0px 6.13px 153.16px rgba(0, 0, 0, 0.08);
  }
  .admin-table::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      86.16deg,
      rgba(255, 255, 255, 0.2) 11.14%,
      rgba(255, 255, 255, 0.035) 113.29%
    );
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(107.22px);
    -webkit-backdrop-filter: blur(107.22px);
  }
.admin-table::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    overflow: hidden;
    pointer-events: none;
        border-radius: 12px;
    border: solid 2px #fff;
    box-shadow: 0px 6.13px 153.16px rgba(0, 0, 0, 0.08);
 
}
  .admin-header-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    padding-bottom: 2px;
    background: linear-gradient(
      155.31deg,
      rgba(255, 255, 255, 0.5) 12.33%,
      rgba(255, 255, 255, 0) 34.31%,
      rgba(255, 255, 255, 0) 52.66%,
      rgba(255, 255, 255, 0.54) 74.67%
    );
    mask:
      linear-gradient(#fff 0 0) bottom/100% 2px no-repeat,
      linear-gradient(#fff 0 0);
    -webkit-mask:
      linear-gradient(#fff 0 0) bottom/100% 2px no-repeat,
      linear-gradient(#fff 0 0);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
  }
 
  .admin-search-input {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.6),
      0 4px 20px rgba(149, 91, 228, 0.08);
  }
  @media (max-width: 768px) {
    .container-k,
    .container-1655 {
      padding-inline: 12px;
    }
    
  .step-icon-circle {
    @apply w-12 h-12;
  }
  .feature-icon-circle {
    @apply w-12 h-12;
  }
  }
}
 
@utility gradient1 {
  background: var(--background-gradient-1);
}
 
@utility button-outline {
  background: var(--background-gradient-2);
}
 
@utility bg-gradient3 {
  background: var(--background-gradient-3);
}
 
@utility gradient4 {
  background: var(--background-gradient-4);
}
@utility admin-sidebar-bg {
  background: var(--background-admin-sidebar);
}
@utility adminsidebar-shadow {
  box-shadow: var(--shadow-adminsidebar);
}
@utility shadow-card {
  box-shadow: var(--shadow-card);
}
 
@utility shadow-button {
  box-shadow: var(--shadow-button);
}
 
@utility header-shadow {
  box-shadow: var(--shadow-header);
}
 
@utility shadow-icon {
  box-shadow: var(--shadow-icon);
}
 
@utility glass-card-v2 {
  position: relative;
  /* overflow: hidden; */
  background: linear-gradient(86.16deg, rgba(255, 255, 255, 0.2) 11.14%, rgba(255, 255, 255, 0.035) 113.29%);
  box-shadow: 0px 8.43px 210.64px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(147.45px);
  -webkit-backdrop-filter: blur(147.45px);
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    padding: 2px;
    background:  linear-gradient(155.31deg, rgba(255, 255, 255, 0.5) 12.33%, rgba(255, 255, 255, 0) 34.31%, rgba(255, 255, 255, 0) 52.66%, rgba(255, 255, 255, 0.54) 74.67%);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
  }
}




/* ===========================
   Headings
=========================== */

.rich-text h1 {
  @apply text-2xl sm:text-3xl md:text-4xl lg:text-5xl
  font-bold
  text-gray-900
  leading-tight
  mb-5 sm:mb-6 lg:mb-8;
}

.rich-text h2 {
  @apply text-xl sm:text-2xl md:text-3xl
  font-semibold
  text-gray-900
  leading-tight
  mt-4
  mb-4 sm:mb-5;
}

.rich-text h3 {
  @apply text-lg sm:text-xl md:text-2xl
  font-semibold
  text-gray-900
  leading-snug
  mt-6 sm:mt-8
  mb-3 sm:mb-4;
}

.rich-text h4 {
  @apply text-base sm:text-lg md:text-xl
  font-semibold
  text-gray-900
  mt-5 sm:mt-6
  mb-2;
}

/* ===========================
   Paragraph
=========================== */

.rich-text p {
  @apply text-sm sm:text-base lg:text-lg
  text-gray-600
  leading-7
  mb-3 sm:mb-4;
}

/* ===========================
   Lists
=========================== */

.rich-text ul,
.rich-text ol {
  @apply pl-5 sm:pl-6
  mb-5 sm:mb-6
  space-y-2;
}

.rich-text ul {
  @apply list-disc;
}

.rich-text ol {
  @apply list-decimal;
}

.rich-text li {
  @apply text-sm sm:text-base lg:text-lg
  leading-7 sm:leading-8
  text-gray-700;
}

/* ===========================
   Links
=========================== */

.rich-text a {
  @apply text-blue-600
  underline
  break-words
  transition-colors
  duration-200
  hover:text-blue-800;
}

/* ===========================
   Strong / Bold
=========================== */

.rich-text strong {
  @apply font-semibold text-gray-900;
}

/* ===========================
   Images
=========================== */

.rich-text img {
  @apply w-full
  h-auto
  rounded-xl
  my-6 sm:my-8;
}

/* ===========================
   Blockquote
=========================== */

.rich-text blockquote {
  @apply my-6 sm:my-8
  border-l-4
  border-blue-500
  bg-blue-50
  rounded-r-lg
  px-4 sm:px-6
  py-4
  italic
  text-gray-700;
}

/* ===========================
   Tables
=========================== */

.rich-text table {
  @apply w-full
  border-collapse
  border
  border-gray-300
  my-6
  block
  overflow-x-auto;
}

.rich-text th {
  @apply border
  border-gray-300
  bg-gray-100
  px-3 sm:px-4
  py-3
  text-left
  font-semibold
  whitespace-nowrap;
}

.rich-text td {
  @apply border
  border-gray-300
  px-3 sm:px-4
  py-3
  whitespace-nowrap;
}

/* ===========================
   Horizontal Rule
=========================== */

.rich-text hr {
  @apply my-8 sm:my-10
  border-gray-300;
}

/* ===========================
   Inline Code
=========================== */

.rich-text code {
  @apply rounded
  bg-gray-100
  text-red-600
  text-sm
  px-1.5
  py-1;
}

/* ===========================
   Code Block
=========================== */

.rich-text pre {
  @apply my-6
  overflow-x-auto
  rounded-xl
  bg-gray-900
  text-white
  p-4 sm:p-6
  text-sm;
}

.rich-text pre code {
  @apply bg-transparent
  text-inherit
  p-0;
}

/* ===========================
   Iframe / Video
=========================== */

.rich-text iframe,
.rich-text video {
  @apply w-full
  aspect-video
  rounded-xl
  my-6 sm:my-8;
}

/* ===========================
   Responsive spacing
=========================== */

.rich-text > *:first-child {
  @apply mt-0;
}

.rich-text > *:last-child {
  @apply mb-0;
}