.hero {
            width: 100%;
            height: 100vh;
            background: var(--text);
            overflow: hidden;
        }

        .hero #hero-animation {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .hero .blk-gradient {
            position: absolute;
            top: 0;
            left: 0;
            height: 100vh;
            width: 100%;
            background: radial-gradient(circle,rgba(28, 25, 23, 1) 20%, rgba(28, 25, 23, 0) 100%);
            pointer-events: none;
        }

        .hero .content {
            position: relative;
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 3rem;
            pointer-events: none;
        }

        .hero .content h1 {
            font-family: 'heading';
            color: var(--base);
            text-align: center;
            font-size: 4rem;
            transform: translateY(100px);
            opacity: 0;
            background: linear-gradient(90deg, var(--white), var(--base));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
        }

        @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: 3px 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);
            transform: scale(0);

            &::before,
            &::after,
            a::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 a {
            z-index: 1;
            color: var(--shiny-cta-fg);

            &::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;
            }

            a::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;
            }

            a::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;
            }
        }



@media( max-width: 900px){
    .hero .blk-gradient{
        margin-top: 10rem;
    }
    .hero .content h1{
        margin-top: 20rem;
        width: 90%;
        font-size: 2.5rem;
    }
}