/* ===========Animation Flipping Card =========== */
.flipper {
    @apply relative w-full h-full [transform-style:preserve-3d] transition-transform duration-[900ms];
}

.group:hover .flipper {
    @apply rotate-y-180;
}

.front,
.back {
    @apply [backface-visibility:hidden];
}

.front {
    @apply z-20;
}

.back {
    @apply rotate-y-180 z-10;
}

/* ==========SERVICES DETAILS========== */
.services-details-content {
h2 {
    @apply text-heading-4 font-normal pb-2;
}

p {
    @apply pb-6;
}

figure {
    @apply max-w-[767px] w-full py-[72px];

img {
    @apply w-full h-full object-cover rounded-xl;
}
}
}

/* ==========BLOG DETAILS========== */
.details-body {
    @apply max-w-[950px] mx-auto;
h3 {
    @apply text-heading-5 md:text-heading-4 font-normal mb-3  not-first:mt-7 lg:not-first:mt-[70px];
}
h4 {
    @apply text-tagline-1 dark:text-accent font-normal mb-2 before:relative before:top-0.5 before:content-[''] before:w-2 before:h-2 before:bg-secondary dark:before:bg-accent before:rounded-full  before:left-0  before:-translate-y-1/2 before:mr-1.5 before:inline-block;
}
p {
    @apply pb-6;
}
img {
    @apply rounded-lg md:rounded-4xl mt-10 md:mt-[70px];
}

ul {
    @apply space-y-4;
li {
    @apply text-tagline-1 dark:text-accent before:relative before:w-5 before:h-5 before:mr-3 before:left-0 before:content-[url('/images/icons/checkmark-white.svg')] dark:before:content-[url('/images/icons/checkmark-white.svg')] before:max-md:top-0 before:md:top-1;
}
}
ol {
    @apply space-y-4;
li:first-child {
    @apply text-tagline-1 dark:text-accent font-medium before:relative before:w-5 before:h-5 before:mr-3 before:left-0 before:content-[url('/images/icons/checkmark-white.svg')] dark:before:content-[url('/images/icons/checkmark-white.svg')] before:top-1;
}
li:nth-child(2) {
    @apply text-tagline-1 dark:text-accent font-medium before:relative before:w-5 before:h-5 before:mr-3 before:left-0 before:content-[url('/images/icons/checkmark-white.svg')] dark:before:content-[url('/images/icons/checkmark-white.svg')] before:top-1;
}
li:last-child {
    @apply text-tagline-1 dark:text-accent font-medium before:relative before:w-5 before:h-5 before:mr-3 before:left-0 before:content-[url('/images/icons/checkmark-white.svg')] dark:before:content-[url('/images/icons/checkmark-white.svg')] before:top-1;
}
}
}

/* Terms & Conditions */
.terms-conditions-body {
h3 {
    @apply text-heading-5 md:text-heading-4 font-normal mb-3 mt-10 md:mt-[70px];
}
p {
strong {
    @apply text-tagline-1 font-medium text-secondary;
}
}
a {
    @apply mt-14 md:mt-[70px];
}
ul {
    @apply space-y-3;
li {
    @apply text-tagline-1 text-secondary/60 dark:text-accent/60 font-normal mb-2 before:relative  before:content-[''] before:w-1.5 before:h-1.5 before:bg-secondary dark:before:bg-accent before:rounded-full  before:left-0  before:-translate-y-1/2 before:mr-2 before:inline-block;
}
}
}

.refund-policy,
.process-steps,
.privacy-policy,
.changelog,
.documentation,
.analytics {
ul {
li {
    @apply list-none before:relative  before:content-[''] before:w-1.5 before:h-1.5 before:bg-secondary dark:before:bg-accent before:rounded-full  before:left-0  before:-translate-y-1/2 before:mr-2 before:inline-block;
}
}
}

/* ==========AUTHENTICATION========== */

.auth-form-input {
    @apply block h-[45px] py-3 px-[18px] rounded-full border border-stroke-3 bg-background-1 placeholder:text-tagline-2 placeholder:font-normal placeholder:text-secondary/60 w-full focus:outline-none focus:ring-0 text-secondary font-normal text-tagline-1 dark:bg-background-6 dark:border-stroke-7 dark:placeholder:text-accent/60 dark:text-accent;
}

/* ==========CASE STUDY DETAILS========== */

.case-study-details {
ul {
li {
    @apply text-tagline-1 text-secondary/60;
strong {
    @apply text-secondary font-medium text-tagline-1;
}
}
}
}

.case-study-feature {
ul {
    @apply space-y-4;
li {
    @apply text-tagline-1 before:content-[''] before:size-2 before:rounded-full before:bg-secondary dark:before:bg-accent before:mr-3 before:inline-block before:relative before:top-[-1.8px];
}
}
}

/* tab bar css  */
.tab-bar {
.active-tab-bar {
    @apply absolute bottom-[-0.8px] left-[26%] right-0 h-[2px] bg-primary-500 transition-[translate] ease-in-out duration-500 origin-left;
    width: var(--_width, 178px);
    translate: var(--_left, 0px) 0;
}
}

/* ==========MARQUEE LEFT & RIGHT MASK OVERRIDE========== */
.horizontal-marquee.smooth {
    -webkit-mask: none !important;
    mask: none !important;
}

/* MODAL */

.modal-open {
    @apply grid;
}

.modal-close {
    @apply hidden;
}
.stack-cards {
    --stack-cards-gap: 24px;
}

.stack-cards__item {
    @apply sticky top-28 origin-top overflow-hidden;
}

/* ==========HERO BG OVERLAY ========== */
@utility hero-bg-overlay-light {
    @apply bg-linear-[180deg,rgba(255,255,255,0.8)_43.93%,#fff_100%];
}

@utility hero-bg-overlay-dark {
    @apply bg-linear-[180deg,rgba(7,11,16,0.9)_0%,#070B10_100%];
}

@keyframes top-to-bottom {
    0% {
        top: -30%;
    }
    50% {
        top: 50%;
    }
    100% {
        top: 100%;
    }
}

.gradient-line-1 {
    animation: top-to-bottom 6s 0s linear infinite;
}
.gradient-line-2 {
    animation: top-to-bottom 6s 900ms linear infinite;
}
.gradient-line-3 {
    animation: top-to-bottom 6s 1500ms linear infinite;
}
.gradient-line-4 {
    animation: top-to-bottom 6s 10ms linear infinite;
}
.gradient-line-5 {
    animation: top-to-bottom 6s 1800ms linear infinite;
}
.gradient-line-6 {
    animation: top-to-bottom 6s 600ms linear infinite;
}
.gradient-line-7 {
    animation: top-to-bottom 6s 2000ms linear infinite;
}
.gradient-line-8 {
    animation: top-to-bottom 6s 1200ms linear infinite;
}

.table-of-contents .table-of-list li {
    @apply cursor-pointer transition-all duration-300 ease-in-out;
}

.table-of-contents .table-of-list li:hover span:first-child,
.table-of-contents .table-of-list li:hover a span {
    @apply text-secondary dark:text-accent;
}

.table-of-contents .table-of-list li span:last-child {
    @apply transition-opacity duration-300 ease-in-out;
}

.table-of-contents .table-of-list li:hover span:last-child {
    @apply opacity-60;
}

/* ==========HERO TEXT GRADIENT========== */

.hero-text-gradient {
    animation: textAnimate 5s linear infinite;
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    background-repeat: no-repeat;
}

.hero-text-color-1 {
    background-image: linear-gradient(45deg, #a585ff, #ffc2ad, #a585ff);
}

.hero-text-color-2 {
    background-image: linear-gradient(45deg, #83e7ee, #f9eb57, #83e7ee);
}

@keyframes textAnimate {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#theme-toggle::before {
    @apply content-[''] absolute top-[-3px] right-[-4px] w-3.5 h-[7px] bg-no-repeat rotate-90 bg-size-[50%_100%] bg-radial-[circle_at_0_100%,transparent_6px,var(--color-background-8)_7px];
}

#theme-toggle::after {
    @apply content-[''] absolute bottom-[-7px] right-[-7px] w-3.5 h-[7px] bg-no-repeat rotate-0 bg-size-[50%_100%] bg-radial-[circle_at_0_100%,transparent_6px,var(--color-background-8)_7px];
}

.dark {
#theme-toggle::before {
    @apply bg-radial-[circle_at_0_100%,transparent_6px,#ffffff_7px];
}

#theme-toggle::after {
    @apply bg-radial-[circle_at_0_100%,transparent_6px,#ffffff_7px];
}
}

/*==========IMG BEFORE AFTER SLIDER========== */
.after {
    clip-path: inset(0 50% 0 0);
}

.slider-handle.no-transition {
    transition: none !important;
}
.slider-handle.no-transition .handle-circle {
    transition: none !important;
}

/* glossary page two cards { */

.glossary-card {
    display: none;
}