@import url('https://fonts.googleapis.com/css2?family=KoHo:wght@400;700&family=Inter:wght@400;600&family=Playfair+Display:wght@400;700&display=swap')
layer(base);
@import url('https://fonts.googleapis.com/css2?family=Lalezar&display=swap')
layer(base);
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap')
layer(base);

@import 'tailwindcss';

@utility container {
  margin-inline: auto;
  padding-inline: 0;
  @media (width >= --theme(--breakpoint-sm)) {
    max-width: none;
  }
  @media (width >= 355px) {
    max-width: 355px;
  }
  @media (width >= 536px) {
    max-width: 536px;
  }
  @media (width >= 728px) {
    max-width: 728px;
  }
  @media (width >= 951px) {
    max-width: 951px;
  }
  @media (width >= 984px) {
    max-width: 984px;
  }
  @media (width >= 1240px) {
    max-width: 1240px;
  }
  @media (width >= 1320px) {
    max-width: 1320px;
  }
}

@theme {
  --animate-spin-slow: spin 20s linear infinite;

  --breakpoint-sm: 375px;
  --breakpoint-md: 576px;
  --breakpoint-lg: 768px;
  --breakpoint-xl: 991px;
  --breakpoint-2xl: 1024px;
  --breakpoint-3xl: 1280px;
  --breakpoint-4xl: 1440px;
  --breakpoint-5xl: 1500px;
  --breakpoint-6xl: 1550px;

  --font-playfair-display: Playfair Display, serif;
  --font-inter: Inter, sans-serif;
  --font-koho: KoHo, sans-serif;
  --font-lalezar: Lalezar, cursive;
  --font-jost: Jost, sans-serif;

  --shadow-cta-shadow:
    0px -4px 4px 0px #c7682b inset, 0px 4px 4px 0px #93939340 inset;

  --color-cta-bg: #c0e1ff;
  --color-section-bg: #eef6ff;
  --color-footer-bg: #f2f4f8;
  --color-royal-blue: #7351fd;
  --color-royal-blue2: #1a0180;
  --color-royal-blue-light: #ebebeb;
  --color-royal-blue-light2: #7351fd0d;
  --color-bodyboder: #737791;
  --color-hover-btn-bg-light: #7351fd1a;
  --color-body-text-color-light: rgba(15, 0, 78, 0.5);
  --color-body-text-color-light2: rgba(115, 81, 253, 0.5);
  --color-title-color: #0f004e;
  --color-body-text-color: #56506d;
  --color-body-top: #0f004e;
  --color-neutral: #f7f7f7;
  --color-line-color: #f5f5f5;
  --color-line-color2: #a6ccee;
  --color-table-border: #f1f1f1;
  --color-hover-btn-bg: #280084;
  --color-hover-btn-bg2: #2100ad;
  --color-btn-border: #5e36ff;
  --color-Btn-border2: #1e077e;
  --color-hover-btn-border: #5016d3;
  --color-hover-btn-border2: #2907b4;
  --color-include-color: #272435;
  --color-circle-bg: #f3f9ff;
  --color-hero-title: #56506d;
  --color-featurebg: #ffffff;
  --color-feature-one-bg: #f8f0ff;
  --color-feature-two-bg: #fff4f8;
  --color-feature-three-bg: #eff5ff;
  --color-feature-four-bg: #fff0f1;
  --color-feature-five-bg: #e8f0f2;
  --color-testiactivebg: #725cf7;
  --color-testiinactivebg: #ece8f9;
  --color-footerbg: #06001c;
  --color-footerbodytext: #ffffffb2;
  --color-footericonborder: #ffffff1a;
  --color-footerform: #3c345d;
  --color-formplaceholder: #ffffff80;

  --background-image-custom-gradient: linear-gradient(
    200deg,
    #ffffff 0%,
    #eeeeff 100%
  );
  --background-image-cta-gradient: linear-gradient(
    171.98deg,
    rgba(115, 81, 253, 0) 44.1%,
    #7351fd 85.08%
  );
  --background-image-get-easycommerce-popup-bg: linear-gradient(
    180deg,
    #fcfbff 0%,
    #f2efff 100%
  );
  --background-image-easy-gradient: linear-gradient(
    90deg,
    #f9f8ff 0%,
    #f1eeff 54.81%,
    #efebff 100%
  );
  --background-image-easy-gradient2: linear-gradient(
    90deg,
    #ffffff 0%,
    #fbeeff 48.53%,
    #dcd3ff 73.94%,
    #eff4ff 88.76%,
    #ffffff 100%
  );
  --background-image-easy-card: linear-gradient(
    180deg,
    #ede9ff 0%,
    #ede8ff 100%
  );
  --background-image-easy-card-hover: linear-gradient(
    180deg,
    #ffffff1a 0%,
    #ffffff1a 100%
  );
  --background-image-easy-sticky: linear-gradient(
    180deg,
    #633cff 0%,
    #330059 100%
  );
}

/*
  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);
  }
}

@utility heading-1 {
  @apply text-8xl leading-[130px] font-playfair-display font-medium;

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility heading-2 {
  @apply text-title-color text-2xl md:text-[42px] xl:text-[50px] leading-10 md:leading-[60px] xl:leading-[71px] font-playfair-display font-medium text-center md:text-left;

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility heading-3 {
  @apply text-3xl leading-10 font-inter font-medium;

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility heading-4 {
  @apply text-2xl lg:text-[26px] leading-8 lg:leading-9 font-inter font-bold;

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility body-title {
  @apply text-body-top text-base md:text-xl leading-6 md:leading-8 font-inter font-medium;

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility footer-title {
  @apply text-[#FFFFFF] text-base md:text-xl leading-6 md:leading-8 font-inter font-normal;

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility body-text {
  @apply text-hero-title text-sm md:text-base leading-[26px] font-inter font-normal;

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility footer-text {
  @apply text-footerbodytext text-sm md:text-base leading-[26px] font-inter font-normal;

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility body-text-sm {
  @apply text-xs leading-[22px] font-inter font-medium;

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility btn-text {
  @apply text-base font-inter font-medium leading-[26px];

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility border-gradient-30 {
  border: double 1px transparent;
  border-radius: 12px;
  background-image:
    linear-gradient(white, white),
    linear-gradient(30deg, rgba(115, 81, 253, 0.2), transparent);
  background-origin: border-box;
  background-clip: content-box, border-box;
  transition: background-image 0.3s ease;

  &:hover {
    background-image:
      linear-gradient(white, white),
      linear-gradient(30deg, rgba(115, 81, 253, 0.5), transparent);
  }

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility border-gradient-320 {
  border: double 1px transparent;
  border-radius: 12px;
  background-image:
    linear-gradient(white, white),
    linear-gradient(
      320deg,
      rgba(115, 81, 253, 0.2) 0%,
      rgba(115, 81, 253, 0) 100%
    );
  background-origin: border-box;
  background-clip: content-box, border-box;
  &:hover {
    background-image:
      linear-gradient(white, white),
      linear-gradient(
        320deg,
        rgba(115, 81, 253, 0.5) 0%,
        rgba(115, 81, 253, 0) 100%
      );
  }

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility border-gradient-150 {
  border: double 1px transparent;
  border-radius: 12px;
  background-image:
    linear-gradient(white, white),
    linear-gradient(
      150deg,
      rgba(115, 81, 253, 0.2) 0%,
      rgba(115, 81, 253, 0) 100%
    );
  background-origin: border-box;
  background-clip: content-box, border-box;
  &:hover {
    background-image:
      linear-gradient(white, white),
      linear-gradient(
        150deg,
        rgba(115, 81, 253, 0.5) 0%,
        rgba(115, 81, 253, 0) 100%
      );
  }

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility border-gradient-230 {
  border: double 1px transparent;
  border-radius: 12px;
  background-image:
    linear-gradient(white, white),
    linear-gradient(
      230deg,
      rgba(115, 81, 253, 0.2) 0%,
      rgba(115, 81, 253, 0) 100%
    );
  background-origin: border-box;
  background-clip: content-box, border-box;
  &:hover {
    background-image:
      linear-gradient(white, white),
      linear-gradient(
        230deg,
        rgba(115, 81, 253, 0.5) 0%,
        rgba(115, 81, 253, 0) 100%
      );
  }

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility single-post-gradient-border-normal {
  border: double 1px transparent;
  border-radius: 12px;
  background-origin: border-box;
  background-clip: content-box, border-box;

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility single-post-gradient-border {
  border: double 1px transparent;
  border-radius: 12px;
  background-image:
    linear-gradient(white, white),
    linear-gradient(
      180deg,
      rgba(213, 203, 255, 1) 0%,
      rgba(255, 255, 255, 0) 100%
    );
  background-origin: border-box;
  background-clip: content-box, border-box;

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility scrollbar-none {
  scrollbar-width: none;

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility easycommerce-grayscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  &:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
  }

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility text-shadow {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility highlighted {
  animation: 0.9s animatedBackground 0.1s 1 normal forwards;
  background: linear-gradient(90deg, #ffe941a6 50%, rgba(255, 255, 255, 0) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  padding: 5px;
  border-radius: 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility single-features-item {
  border: double 1px transparent;
  border-radius: 12px;
  background-image:
    linear-gradient(white, white),
    linear-gradient(180deg, #7351fd 0%, rgba(255, 255, 255, 0) 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility single-features-page {
  border: double 2px transparent;
  border-radius: 20px;
  background-image:
    linear-gradient(white, white),
    linear-gradient(180deg, #b1d6ff 0%, rgba(177, 214, 255, 0) 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@utility features-section {
  &:after {
    content: '';
    position: absolute;
    top: 35px;
    left: 0;
    width: 100%;
    height: 2px;
    background-image: url('/images/features/bg-effect/underline.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  /* @keyframes gradient-rotate {
        0% {
            background: linear-gradient(0deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        10% {
            background: linear-gradient(36deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        20% {
            background: linear-gradient(72deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        30% {
            background: linear-gradient(108deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        40% {
            background: linear-gradient(144deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        50% {
            background: linear-gradient(180deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        60% {
            background: linear-gradient(216deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        70% {
            background: linear-gradient(252deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        80% {
            background: linear-gradient(288deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        90% {
            background: linear-gradient(324deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
        100% {
            background: linear-gradient(360deg, #A895FB 1.22%, #5435CE 26.9%, #277391 98.48%);
        }
    }

    .animate-gradient {
        animation: gradient-rotate 4s linear infinite;
        transition: all 0.3s ease;
    } */
}

@layer utilities {
  * {
    box-sizing: border-box;
  }

  html {
    font-size: 100%;
    scroll-behavior: smooth;
  }
}

@layer utilities {

    @keyframes animatedBackground {
        from {
            background-position: 100% 0;
        }
        to {
            background-position: 0 0;
        }
    }
}