/* 
Theme Name:		Social Mind Space
Theme URI:		https://www.socialmindspace.co.uk
Author:			Studio Seventeen
Author URI:		https://www.studioseventeen.co.uk
Template:		hello-elementor
Version:		99.9.9
*/

:root {
    --pink: #C5005A;
    --purple: #652A90;
    --blue: #007D90;
    --orange: #BF5600;
}

/* Typography */
p a {
    text-decoration: underline;
}

/* Button */
/* Button base */
.elementor-button {
    position: relative;
    overflow: hidden;
    color: #fff !important;
    border: none !important;
    border-radius: 999px;
    text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    background: none !important;
}

/* Gradient overlay */
.elementor-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;

    /* your colours */
    background: linear-gradient(135deg, var(--blue), var(--purple), var(--pink), var(--orange));
    background-size: 200% 200%;
    background-position: 0% 50%;

    /* keep animation, but pause it until hover/focus */
    animation: eGradientMove 3s linear infinite both;
    animation-play-state: paused;

    /* slight perf hint */
    will-change: background-position;
}

/* run animation only while hovered / keyboard-focused */
.elementor-button:hover::before,
.elementor-button:focus-visible::before {
    animation-play-state: running;
}

/* keyframes */
@keyframes eGradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* motion sensitivity */
@media (prefers-reduced-motion: reduce) {
    .elementor-button::before {
        animation: none;
    }
}

/* lift effects */
.elementor-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

.elementor-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

/* Elementor skin vars */
.elementor-button,
.elementor-button:hover {
    --e-button-border-color: transparent;
    --e-button-hover-border-color: transparent;
    --e-button-text-color: #fff;
    --e-button-hover-color: #fff;
}

/* disabled */
.elementor-button[disabled],
.elementor-button.elementor-disabled {
    opacity: .6;
    pointer-events: none;
}

/* ensure all button text/icons sit ABOVE the gradient layer */
.elementor-button .elementor-button-content-wrapper,
.elementor-button .elementor-button-text,
.elementor-button i,
.elementor-button svg {
    position: relative;
    z-index: 2;
}