@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');
@import url("https://fonts.googleapis.com/css2?family=Lalezar&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap');


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

* {
    box-sizing: border-box;
}

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

@layer utilities {
    .heading-1 {
        @apply text-8xl leading-[130px] font-playfairDisplay font-medium;
    }

    .heading-2 {
        @apply text-titleColor text-2xl md:text-[42px] xl:text-[50px] leading-10 md:leading-[60px] xl:leading-[71px] font-playfairDisplay font-medium text-center md:text-left;
    }

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

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

    .body-title {
        @apply text-bodyTop text-base md:text-xl leading-6 md:leading-8 font-inter font-medium;
    }

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

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

    .body-text-sm {
        @apply text-xs leading-[22px] font-inter font-medium;
    }
    .btn-text {
        @apply text-base font-inter font-medium leading-[26px];
    }
    .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;
    }

    .border-gradient-30:hover {
        background-image: linear-gradient(white, white),
            linear-gradient(30deg, rgba(115, 81, 253, 0.5), transparent);
    }
    .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;
    }
    .border-gradient-320:hover {
        background-image: linear-gradient(white, white),
            linear-gradient(
                320deg,
                rgba(115, 81, 253, 0.5) 0%,
                rgba(115, 81, 253, 0) 100%
            );
    }
    .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;
    }
    .border-gradient-150:hover {
        background-image: linear-gradient(white, white),
            linear-gradient(
                150deg,
                rgba(115, 81, 253, 0.5) 0%,
                rgba(115, 81, 253, 0) 100%
            );
    }
    .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;
    }
    .border-gradient-230:hover {
        background-image: linear-gradient(white, white),
            linear-gradient(
                230deg,
                rgba(115, 81, 253, 0.5) 0%,
                rgba(115, 81, 253, 0) 100%
            );
    }
    .single-post-gradient-border-normal {
        border: double 1px transparent;
        border-radius: 12px;
        background-origin: border-box;
        background-clip: content-box, border-box;
    }
    .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;
    }
    .scrollbar-none {
        scrollbar-width: none;
    }
    .easycommerce-grayscale {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    .easycommerce-grayscale:hover {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
    }
    .text-shadow {
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    }
    .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;
    }
    .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;
    }
    .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 animatedBackground {
        from {
            background-position: 100% 0;
        }
        to {
            background-position: 0 0;
        }
    }

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