/********* check ur elig button -start */
         :root {
            --shiny-cta-bg: #3e0101;
            --shiny-cta-bg-subtle: #d510108a;
            --shiny-cta-fg: #ffffff;
            --shiny-cta-highlight: rgb(249, 2, 2);
            --shiny-cta-highlight-subtle: #ff0000;
        }

        @property --gradient-angle {
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
        }

        @property --gradient-angle-offset {
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
        }

        @property --gradient-percent {
            syntax: "<percentage>";
            initial-value: 5%;
            inherits: false;
        }

        @property --gradient-shine {
            syntax: "<color>";
            initial-value: white;
            inherits: false;
        }

        .shiny-cta {
            --animation: gradient-angle linear infinite;
            --duration: 3s;
            --shadow-size: 2px;
            isolation: isolate;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            outline-offset: 4px;
            padding: 1.25rem 2.5rem;
            font-family: inherit;
            font-size: 1.125rem;
            line-height: 1.2;
            border: 1px solid transparent;
            border-radius: 360px;
            color: var(--shiny-cta-fg);
            background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
                conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
                    transparent,
                    var(--shiny-cta-highlight) var(--gradient-percent),
                    var(--gradient-shine) calc(var(--gradient-percent) * 2),
                    var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
                    transparent calc(var(--gradient-percent) * 4)) border-box;
            box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);

            &::before,
            &::after,
            span::before {
                content: "";
                pointer-events: none;
                position: absolute;
                inset-inline-start: 50%;
                inset-block-start: 50%;
                translate: -50% -50%;
                z-index: -1;
            }

            &:active {
                translate: 0 1px;
            }
        }

        /* Dots pattern */
        .shiny-cta::before {
            --size: calc(100% - var(--shadow-size) * 3);
            --position: 2px;
            --space: calc(var(--position) * 2);
            width: var(--size);
            height: var(--size);
            background: radial-gradient(circle at var(--position) var(--position),
                    white calc(var(--position) / 4),
                    transparent 0) padding-box;
            background-size: var(--space) var(--space);
            background-repeat: space;
            mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg),
                    black,
                    transparent 10% 90%,
                    black);
            border-radius: inherit;
            opacity: 0.4;
            z-index: -1;
        }

        /* Inner shimmer */
        .shiny-cta::after {
            --animation: shimmer linear infinite;
            width: 100%;
            aspect-ratio: 1;
            background: linear-gradient(-50deg,
                    transparent,
                    var(--shiny-cta-highlight),
                    transparent);
            mask-image: radial-gradient(circle at bottom, transparent 40%, black);
            opacity: 0.6;
        }

        .shiny-cta span {
            z-index: 1;

            &::before {
                --size: calc(100% + 1rem);
                width: var(--size);
                height: var(--size);
                box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
                opacity: 0;
            }
        }

        /* Animate */
        .shiny-cta {
            --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
            transition: var(--transition);
            transition-property: --gradient-angle-offset, --gradient-percent,
                --gradient-shine;

            &,
            &::before,
            &::after {
                animation: var(--animation) var(--duration),
                    var(--animation) calc(var(--duration) / 0.4) reverse paused;
                animation-composition: add;
            }

            span::before {
                transition: opacity var(--transition);
                animation: calc(var(--duration) * 1.5) breathe linear infinite;
            }
        }

        .shiny-cta:is(:hover, :focus-visible) {
            --gradient-percent: 20%;
            --gradient-angle-offset: 95deg;
            --gradient-shine: var(--shiny-cta-highlight-subtle);

            &,
            &::before,
            &::after {
                animation-play-state: running;
            }

            span::before {
                opacity: 1;
            }
        }

        @keyframes gradient-angle {
            to {
                --gradient-angle: 360deg;
            }
        }

        @keyframes shimmer {
            to {
                rotate: 360deg;
            }
        }

        @keyframes breathe {

            from,
            to {
                scale: 1;
            }

            50% {
                scale: 1.2;
            }
        }

        .discount-cat-btn {
            display: grid;
            place-items: center;
        }



        @media (max-width:629px) {

            .mobile-block {
                display: none;
            }

        }

        @media (min-width:630px) {

            .desk-block {
                display: none;
            }

        }


        .revo-slider-emphasis-text {
            font-size: 64px;
            font-weight: 700;
            letter-spacing: -1px;
            font-family: 'Poppins', sans-serif;
            padding: 15px 20px;
            border-top: 2px solid #FFF;
            border-bottom: 2px solid #FFF;
        }

        .revo-slider-desc-text {
            font-size: 20px;
            font-family: 'Lato', sans-serif;
            width: 650px;
            text-align: center;
            line-height: 1.5;
        }

        .revo-slider-caps-text {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 3px;
            font-family: 'Poppins', sans-serif;
        }

        .tp-video-play-button {
            display: none !important;
        }

        .tp-caption {
            white-space: nowrap;
        }

        .bg-light-color {
            background-color: #6c757d;
        }

        .not-animated,
        [data-animate]:not(.animated) {
            opacity: 1;
            /* visibility: hidden;  */
            transition: opacity 0.5s ease, visibility 0.5s ease;
            /* Smooth transition for opacity */
        }

        .animated {
            opacity: 1;
            visibility: visible;
            /* Makes elements visible when animated */
        }

        .h4-tag {
            font-size: 18px;
            /* Adjust this value to your preferred size */
            line-height: 1.4;
            /* Optional: controls the spacing between lines */
            margin: 0 0 30px;
        }

        .h3-tag {
            font-size: 1.75rem !important;
        }

        .mock-button {
            background-color: #b039a6 !important;
        }

        .color-mock {
            color: #b039a6 !important;
        }

        .sub-buttons {
            display: none;
        }

        .sub-buttons.show {
            display: block;
        }

/********* check ur elig button end */
 
 
 
 /********** banner button - start */
        .button-click {
            --white: #ffe7ff;
            --purple-100: #f4b1fd;
            --purple-200: #d190ff;
            --purple-300: #c389f2;
            --purple-400: #8e26e2;
            --purple-500: #5e2b83;
            --radius: 18px;

            border-radius: var(--radius);
            outline: none;
            cursor: pointer;
            font-size: 23px;
            font-family: Arial;
            background: transparent;
            letter-spacing: -1px;
            border: 0;
            position: relative;
            width: 220px;
            height: 80px;
            /* transform: rotate(353deg) skewX(4deg); */
            position: relative;
            top: 05px;
        }

        .bg {
            position: absolute;
            inset: 0;
            border-radius: inherit;
            filter: blur(1px);
        }

        .bg::before,
        .bg::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: calc(var(--radius) * 1.1);
            background: var(--purple-500);
        }

        .bg::before {
            filter: blur(5px);
            transition: all 0.3s ease;
            box-shadow:
                -7px 6px 0 0 rgb(115 75 155 / 40%),
                -14px 12px 0 0 rgb(115 75 155 / 30%),
                -21px 18px 4px 0 rgb(115 75 155 / 25%),
                -28px 24px 8px 0 rgb(115 75 155 / 15%),
                -35px 30px 12px 0 rgb(115 75 155 / 12%),
                -42px 36px 16px 0 rgb(115 75 155 / 8%),
                -56px 42px 20px 0 rgb(115 75 155 / 5%);
        }

        .wrap {
            border-radius: inherit;
            overflow: hidden;
            height: 100%;
            transform: translate(6px, -6px);
            padding: 3px;
            background: linear-gradient(to bottom,
                    var(--purple-100) 0%,
                    var(--purple-400) 100%);
            position: relative;
            transition: all 0.3s ease;
        }

        .outline {
            position: absolute;
            overflow: hidden;
            inset: 0;
            opacity: 0;
            outline: none;
            border-radius: inherit;
            transition: all 0.4s ease;
        }

        .outline::before {
            content: "";
            position: absolute;
            inset: 2px;
            width: 120px;
            height: 300px;
            margin: auto;
            background: linear-gradient(to right,
                    transparent 0%,
                    white 50%,
                    transparent 100%);
            animation: spin 3s linear infinite;
            animation-play-state: paused;
        }

        .content {
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            position: relative;
            height: 100%;
            gap: 16px;
            border-radius: calc(var(--radius) * 0.85);
            font-weight: 600;
            transition: all 0.3s ease;
            background: linear-gradient(to bottom,
                    var(--purple-300) 0%,
                    var(--purple-400) 100%);
            box-shadow:
                inset -2px 12px 11px -5px var(--purple-200),
                inset 1px -3px 11px 0px rgb(0 0 0 / 35%);
        }

        .content::before {
            content: "";
            inset: 0;
            position: absolute;
            z-index: 10;
            width: 80%;
            top: 45%;
            bottom: 35%;
            opacity: 0.7;
            margin: auto;
            background: linear-gradient(to bottom, transparent, var(--purple-400));
            filter: brightness(1.3) blur(5px);
        }

        .char {
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .char span {
            display: block;
            color: transparent;
            position: relative;
        }

        .char span:nth-child(5) {
            margin-left: 5px;
        }

        .char.state-1 span:nth-child(5) {
            margin-right: -3px;
        }

        .char.state-1 span {
            animation: charAppear 1.2s ease backwards calc(var(--i) * 0.03s);
        }

        .char.state-1 span::before,
        .char span::after {
            content: attr(data-label);
            position: absolute;
            color: var(--white);
            text-shadow: -1px 1px 2px var(--purple-500);
            left: 0;
        }

        .char span::before {
            opacity: 0;
            transform: translateY(-100%);
        }

        .char.state-2 {
            position: absolute;
            left: 80px;
        }

        .char.state-2 span::after {
            opacity: 1;
        }

        .icon {
            animation: resetArrow 0.8s cubic-bezier(0.7, -0.5, 0.3, 1.2) forwards;
            z-index: 10;
        }

        .icon div,
        .icon div::before,
        .icon div::after {
            height: 3px;
            border-radius: 1px;
            background-color: var(--white);
        }

        .icon div::before,
        .icon div::after {
            content: "";
            position: absolute;
            right: 0;
            transform-origin: center right;
            width: 14px;
            border-radius: 15px;
            transition: all 0.3s ease;
        }

        .icon div {
            position: relative;
            width: 24px;
            box-shadow: -2px 2px 5px var(--purple-400);
            transform: scale(0.9);
            background: linear-gradient(to bottom, var(--white), var(--purple-100));
            animation: swingArrow 1s ease-in-out infinite;
            animation-play-state: paused;
        }

        .icon div::before {
            transform: rotate(44deg);
            top: 1px;
            box-shadow: 1px -2px 3px -1px var(--purple-400);
            animation: rotateArrowLine 1s linear infinite;
            animation-play-state: paused;
        }

        .icon div::after {
            bottom: 1px;
            transform: rotate(316deg);
            box-shadow: -2px 2px 3px 0 var(--purple-400);
            background: linear-gradient(200deg, var(--white), var(--purple-100));
            animation: rotateArrowLine2 1s linear infinite;
            animation-play-state: paused;
        }

        .path {
            position: absolute;
            z-index: 12;
            bottom: 0;
            left: 0;
            right: 0;
            stroke-dasharray: 150 480;
            stroke-dashoffset: 150;
            pointer-events: none;
        }

        .splash {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            stroke-dasharray: 60 60;
            stroke-dashoffset: 60;
            transform: translate(-17%, -31%);
            stroke: var(--purple-300);
        }

        /** STATES */

        .button-click:hover .words {
            opacity: 1;
        }

        .button-click:hover .words span {
            animation-play-state: running;
        }

        .button-click:hover .char.state-1 span::before {
            animation: charAppear 0.7s ease calc(var(--i) * 0.03s);
        }

        .button-click:hover .char.state-1 span::after {
            opacity: 1;
            animation: charDisappear 0.7s ease calc(var(--i) * 0.03s);
        }

        .button-click:hover .wrap {
            transform: translate(8px, -8px);
        }

        .button-click:hover .outline {
            opacity: 1;
        }

        .button-click:hover .outline::before,
        .button-click:hover .icon div::before,
        .button-click:hover .icon div::after,
        .button-click:hover .icon div {
            animation-play-state: running;
        }

        .button-click:active .bg::before {
            filter: blur(5px);
            opacity: 0.7;
            box-shadow:
                -7px 6px 0 0 rgb(115 75 155 / 40%),
                -14px 12px 0 0 rgb(115 75 155 / 25%),
                -21px 18px 4px 0 rgb(115 75 155 / 15%);
        }

        .button-click:active .content {
            box-shadow:
                inset -1px 12px 8px -5px rgba(71, 0, 137, 0.4),
                inset 0px -3px 8px 0px var(--purple-200);
        }

        .button-click:active .words,
        .button-click:active .outline {
            opacity: 0;
        }

        .button-click:active .wrap {
            transform: translate(3px, -3px);
        }

        .button:active .splash {
            animation: splash 0.8s cubic-bezier(0.3, 0, 0, 1) forwards 0.05s;
        }

        .button-click:focus .path {
            animation: path 1.6s ease forwards 0.2s;
        }

        .button-click:focus .icon {
            animation: arrow 1s cubic-bezier(0.7, -0.5, 0.3, 1.5) forwards;
        }

        .char.state-2 span::after,
        .button-click:focus .char.state-1 span {
            animation: charDisappear 0.5s ease forwards calc(var(--i) * 0.03s);
        }

        .button-click:focus .char.state-2 span::after {
            animation: charAppear 1s ease backwards calc(var(--i) * 0.03s);
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes charAppear {
            0% {
                transform: translateY(50%);
                opacity: 0;
                filter: blur(20px);
            }

            20% {
                transform: translateY(70%);
                opacity: 1;
            }

            50% {
                transform: translateY(-15%);
                opacity: 1;
                filter: blur(0);
            }

            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes charDisappear {
            0% {
                transform: translateY(0);
                opacity: 1;
            }

            100% {
                transform: translateY(-70%);
                opacity: 0;
                filter: blur(3px);
            }
        }

        @keyframes arrow {
            0% {
                opacity: 1;
            }

            50% {
                transform: translateX(60px);
                opacity: 0;
            }

            51% {
                transform: translateX(-200px);
                opacity: 0;
            }

            100% {
                transform: translateX(-128px);
                opacity: 1;
            }
        }

        @keyframes swingArrow {
            50% {
                transform: translateX(5px) scale(0.9);
            }
        }

        @keyframes rotateArrowLine {
            50% {
                transform: rotate(30deg);
            }

            80% {
                transform: rotate(55deg);
            }
        }

        @keyframes rotateArrowLine2 {
            50% {
                transform: rotate(330deg);
            }

            80% {
                transform: rotate(300deg);
            }
        }

        @keyframes resetArrow {
            0% {
                transform: translateX(-128px);
            }

            100% {
                transform: translateX(0);
            }
        }

        @keyframes path {
            from {
                stroke: white;
            }

            to {
                stroke-dashoffset: -480;
                stroke: #f9c6fe;
            }
        }

        @keyframes splash {
            to {
                stroke-dasharray: 2 60;
                stroke-dashoffset: -60;
            }
        }

        .char span {
            display: inline-block !important;
            margin: 0 !important;
            padding: 0 !important;
            letter-spacing: 0 !important;
            transform: none !important;
        }
  /********** banner button - end */