@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;
  /* 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%);
 
 
}
 
@layer base {
  html {
    scroll-behavior: smooth;
  }
 
  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: 1352px;
    margin-inline: auto;
    padding-inline: 16px;
  }
 
  .container-1655 {
    width: 100%;
    max-width: 1655px;
    margin-inline: auto;
    padding-inline: 16px;
  }
 
  .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);
  }
 
  .custom-phone-input {
    width: 100%;
  }
 
.custom-phone-input .react-international-phone-country-selector {
  display: flex;
  align-items: center;
}
 
.react-international-phone-input-container.custom-phone-input  {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  border: 1px solid #e5dfff;
  border-radius: 12px;
  background: #ffffff;
  align-items: center;
  transition: all 0.2s ease;
}
 
.custom-phone-input .react-international-phone-input-container:focus-within {
  border-color: #8b5cf6;
}
 
.custom-phone-input .react-international-phone-country-selector-button {
  height: 48px !important;
  border: none !important;
  background: transparent !important;
 
  padding-left: 12px !important;
  padding-right: 12px !important;
 
  display: flex !important;
  align-items: center !important;
}
 
.custom-phone-input .react-international-phone-input {
  width: 100% !important;
  height: 100% !important;
 
  border: none !important;
  border-left: 1px solid #e5dfff !important;
 
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
 
  padding-left: 12px !important;
  padding-right: 16px !important;
 
  font-size: 16px !important;
  color: var(--color-heading) !important;
}
 
  .custom-phone-input .react-international-phone-input::placeholder {
    color: #9ca3af !important;
  }
  @keyframes rotateBorder {
    from {
      transform: rotate(0deg);
    }
 
    to {
      transform: rotate(360deg);
    }
  }
 
  /* 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;
    }
  }
}
 
@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;
  }
}