@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);
    }
  }


  --animate-bg-rotate: bg-rotate 60s linear infinite;

  @keyframes bg-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bg-orb-1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(80px, 40px, 0) scale(1.12); }
  100% { transform: translate3d(-30px, 90px, 0) scale(0.95); }
}

@keyframes bg-orb-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-100px, 60px, 0) scale(1.15); }
  100% { transform: translate3d(40px, -60px, 0) scale(0.9); }
}

@keyframes bg-orb-3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(50px, -70px, 0) scale(1.1); }
  100% { transform: translate3d(-60px, 30px, 0) scale(0.92); }
}

@keyframes bg-shine {
  0%, 100% { transform: translateX(-15%); opacity: 0.4; }
  50%      { transform: translateX(15%); opacity: 0.9; }
}
 
}
@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;
  }
  }





/* ========================================
   Premium Website Background
   Built entirely from theme tokens
======================================== */

.animated-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--color-link-1) 14%, transparent), transparent 32%),
    radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--color-border) 14%, transparent), transparent 30%),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 38%),
    var(--color-body-bg); */
}

/* Slow rotating conic aura — gives the mesh real depth instead of flat blobs */
.bg-aura {
  position: absolute;
  inset: -20%;
  z-index: -3;
  pointer-events: none;
  background: conic-gradient(
    from 0deg at 50% 50%,
    color-mix(in srgb, var(--color-link-1) 10%, transparent) 0deg,
    transparent 90deg,
    color-mix(in srgb, var(--color-border) 10%, transparent) 180deg,
    transparent 270deg,
    color-mix(in srgb, var(--color-link-1) 10%, transparent) 360deg
  );
  filter: blur(90px);
  animation: bg-rotate 60s linear infinite;
  opacity: 0.7;
}

/* Purple orb — anchored to your primary accent */
.animated-bg::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: 550px;
  height: 550px;
  top: -250px;
  left: -180px;
  border-radius: 9999px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-link-1) 70%, transparent) 0%,
    color-mix(in srgb, var(--color-link-1) 40%, transparent) 40%,
    transparent 72%
  );
  filter: blur(70px);
  animation: bg-orb-3 3s ease-in-out infinite alternate;
}

/* Blue orb */
.animated-bg::after {
  content: "";
  position: absolute;
  z-index: -2;
  width: 300px;
  height: 300px;
  top:3%;
  right: -10%;
  border-radius: 9999px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-border) 60%, transparent) 0%,
    color-mix(in srgb, var(--color-accent) 30%, transparent) 42%,
    transparent 72%
  );
  filter: blur(80px);
  animation: bg-orb-2 22s ease-in-out infinite alternate;
}

/* Extra floating accents */
.bg-orb-purple {
  position: absolute;
  width: 260px;
  height: 260px;
  left: 5%;
  top: 45%;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-badge) 70%, transparent);
  filter: blur(65px);
  pointer-events: none;
  animation: bg-orb-3 16s ease-in-out infinite alternate;
}

.bg-orb-blue {
  position: absolute;
  width: 300px;
  height: 300px;
  right:-5%;
  bottom: 10%;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-accent-soft) 40%, transparent);
  filter: blur(60px);
  pointer-events: none;
  animation: bg-orb-3 20s ease-in-out infinite alternate-reverse;
}

.bg-orb-cyan {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 55%;
  top: 8%;
  border-radius: 9999px;
  background: rgba(101, 238, 251, 0.14); /* the cyan stop from gradient-1 */
  filter: blur(75px);
  pointer-events: none;
  animation: bg-orb-2 26s ease-in-out infinite alternate;
}

/* Diagonal shine sweep, pulled from your gradient-1 direction */
.bg-shine {
  position: absolute;
  inset: -10% -30%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 35%,
    color-mix(in srgb, var(--color-link-1) 10%, transparent) 48%,
    color-mix(in srgb, var(--color-border) 12%, transparent) 52%,
    transparent 65%
  );
  animation: bg-shine 14s ease-in-out infinite;
  opacity: 0.8;
}

/* Subtle grid, tied to border color */
.bg-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-link-1) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-link-1) 5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 15%, transparent 75%);
}

/* Top ambient light */
/* .bg-light {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% -20%, rgba(255, 255, 255, 0.85), transparent 45%);
  opacity: 0.65;
} */

.animated-bg-content {
  position: relative;
  z-index: 10;
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .bg-aura,
  .animated-bg::before,
  .animated-bg::after,
  .bg-orb-purple,
  .bg-orb-blue,
  .bg-orb-cyan,
  .bg-shine {
    animation: none;
  }
}






}
 
@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;
}