.multicolorsr {
  background: linear-gradient(90deg, #1e1fd8, #017cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.multicolorur {
  background: linear-gradient(90deg, #ff8900, #ffc714);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.multicolorscr {
  background: linear-gradient(90deg, #8fffff, #cb95ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.multicolorgr {
  background: linear-gradient(90deg, #52b49c, #8f8f8f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.multicolorcr {
  background: linear-gradient(90deg, #00CFFF , #F9FF00 , #FF00D4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.multicolorgur {
  background: linear-gradient(90deg, #B8860B , #FFD700 );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.multicolorstr {
  background: linear-gradient(90deg, #1B1F3B, #00aeff, #D9E7FF );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.multicolorqcsr {
  background: linear-gradient(90deg, #BFAFFF, #FFCCE5, #C2F2FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.srBorder{
    border: 4px solid transparent;
    border-image: linear-gradient(135deg, #1e1fd8 0%, #017cff  100%);
    border-image-slice: 1;
    border-radius: 4px;
}
.urBorder{
    border: 4px solid transparent;
    border-image: linear-gradient(135deg, #ff8900 0%, #ffc714 100%);
    border-image-slice: 1;
    border-radius: 4px;
}
.scrBorder {
    border: 4px solid transparent;
    border-image: linear-gradient(135deg, #8fffff 0%, #fff7ff 50%, #cb95ff 100%);
    border-image-slice: 1;
    border-radius: 4px;
}
.grBorder {
    border: 4px solid transparent;
    border-image: linear-gradient(135deg, #52b49c 0%, #8f8f8f 100%);
    border-image-slice: 1;
    border-radius: 4px;
}
.crBorder {
    border: 4px solid transparent;
    border-image: linear-gradient(135deg, #00CFFF 0%, #F9FF00 50%, #FF00D4 100%);
    border-image-slice: 1;
    border-radius: 4px;
}
.gurBorder {
    border: 4px solid transparent;
    border-image: linear-gradient(135deg, #B8860B 0% , #FFD700  100%);
    border-image-slice: 1;
    border-radius: 4px;
}
.strBorder {
    border: 4px solid transparent;
    border-image: linear-gradient(135deg,#1B1F3B 0%, #00aeff 50%, #D9E7FF 100%);
    border-image-slice: 1;
    border-radius: 4px;
}
.qcsrBorder {
    border: 4px solid transparent;
    border-image: linear-gradient(135deg,#BFAFFF 0%, #FFCCE5 50%, #C2F2FF 100%);
    border-image-slice: 1;
    border-radius: 4px;
}
.srEffect {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.srEffect img {
    display: block;
    width: 100%;
    height: auto;
    transition: scale 0.3s ease;
}


.srEffect:active:not([disabled]) img {
    scale: 1.05;
    transition-duration: calc(var(--spring-duration, 0.3s) * 0.5);
}

.srEffect .shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: none;
    z-index: 2;
}

/* Default shimmer srEffect */
.srEffect[data-effect="wipe"] .shimmer {
    mask-image: linear-gradient(135deg, transparent 20%, black 88%, transparent 90%);
    mask-size: 200% 200%;
    mask-position: center;
    animation: wipe 3.5s linear infinite both -0.5s;
}

.srEffect[data-effect="wipe"] .shimmer::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg, transparent,#1e1fd8, #017cff, transparent);
    transform: rotate(0deg);
    animation: shimmer-diagonal 3.5s linear infinite;
    z-index: 2;
}

.urEffect {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.urEffect img {
    display: block;
    width: 100%;
    height: auto;
    transition: scale 0.3s ease;
}


.urEffect:active:not([disabled]) img {
    scale: 1.05;
    transition-duration: calc(var(--spring-duration, 0.3s) * 0.5);
}

.urEffect .shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: none;
    z-index: 2;
}

/* Default shimmer urEffect */
.urEffect[data-effect="wipe"] .shimmer {
    mask-image: linear-gradient(135deg, transparent 20%, black 88%, transparent 90%);
    mask-size: 200% 200%;
    mask-position: center;
    animation: wipe 3.5s linear infinite both -0.5s;
}

.urEffect[data-effect="wipe"] .shimmer::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg, transparent,#ff8900, #ffc714, transparent);
    transform: rotate(0deg);
    animation: shimmer-diagonal 3.5s linear infinite;
    z-index: 2;
}

@keyframes shimmer-diagonal {
    0% {
        transform: translate(-100%, -100%);
    }
    100% {
        transform: translate(100%, 100%);
    }
}

/* Optional: remove if native mask-image is supported well */
@keyframes shimmer-fallback {
    0% { left: -75%; }
    100% { left: 125%; }
}

/* wipe animation (for browsers that support masking) */
@keyframes wipe {
    0% {
        mask-position: 200% 0;
    }
    100% {
        mask-position: -200% 0;
    }
}

.scrEffect {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.scrEffect img {
    display: block;
    width: 100%;
    height: auto;
    transition: scale 0.3s ease;
}


.scrEffect:active:not([disabled]) img {
    scale: 1.05;
    transition-duration: calc(var(--spring-duration, 0.3s) * 0.5);
}

.scrEffect .shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: none;
    z-index: 2;
}

/* scrDefault shimmer  */
.scrEffect[data-effect="wipe"] .shimmer {
    mask-image: linear-gradient(135deg, transparent 20%, black 88%, transparent 90%);
    mask-size: 200% 200%;
    mask-position: center;
    animation: wipe 3.5s linear infinite both -0.5s;
}

.scrEffect[data-effect="wipe"] .shimmer::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg, transparent, #8fffff,  #fff7ff, #cb95ff, transparent);
    transform: rotate(0deg);
    animation: shimmer-diagonal 3.5s linear infinite;
    z-index: 2;
}
.grEffect {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.grEffect img {
    display: block;
    width: 100%;
    height: auto;
    transition: scale 0.3s ease;
}


.grEffect:active:not([disabled]) img {
    scale: 1.05;
    transition-duration: calc(var(--spring-duration, 0.3s) * 0.5);
}

.grEffect .shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: none;
    z-index: 2;
}

/* Default shimmer grEffect */
.grEffect[data-effect="wipe"] .shimmer {
    mask-image: linear-gradient(135deg, transparent 20%, black 88%, transparent 90%);
    mask-size: 200% 200%;
    mask-position: center;
    animation: wipe 3.5s linear infinite both -0.5s;
}

.grEffect[data-effect="wipe"] .shimmer::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg, transparent,#52b49c, #8f8f8f, transparent);
    transform: rotate(0deg);
    animation: shimmer-diagonal 3.5s linear infinite;
    z-index: 2;
}
.crEffect {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.crEffect img {
    display: block;
    width: 100%;
    height: auto;
    transition: scale 0.3s ease;
}


.crEffect:active:not([disabled]) img {
    scale: 1.05;
    transition-duration: calc(var(--spring-duration, 0.3s) * 0.5);
}

.crEffect .shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: none;
    z-index: 2;
}

/* Default shimmer crEffect */
.crEffect[data-effect="wipe"] .shimmer {
    mask-image: linear-gradient(135deg, transparent 20%, black 88%, transparent 90%);
    mask-size: 200% 200%;
    mask-position: center;
    animation: wipe 3.5s linear infinite both -0.5s;
}

.crEffect[data-effect="wipe"] .shimmer::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg, transparent,#00CFFF , #F9FF00 , #FF00D4, transparent);
    transform: rotate(0deg);
    animation: shimmer-diagonal 3.5s linear infinite;
    z-index: 2;
}
.gurEffect {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.gurEffect img {
    display: block;
    width: 100%;
    height: auto;
    transition: scale 0.3s ease;
}


.gurEffect:active:not([disabled]) img {
    scale: 1.05;
    transition-duration: calc(var(--spring-duration, 0.3s) * 0.5);
}

.gurEffect .shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: none;
    z-index: 2;
}

/*gurDefault shimmer srEffect */
.gurEffect[data-effect="wipe"] .shimmer {
    mask-image: linear-gradient(135deg, transparent 20%, black 88%, transparent 90%);
    mask-size: 200% 200%;
    mask-position: center;
    animation: wipe 3.5s linear infinite both -0.5s;
}

.gurEffect[data-effect="wipe"] .shimmer::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg, transparent,#B8860B , #FFD700 , transparent);
    transform: rotate(0deg);
    animation: shimmer-diagonal 3.5s linear infinite;
    z-index: 2;
}

.strEffect {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.strEffect img {
    display: block;
    width: 100%;
    height: auto;
    transition: scale 0.3s ease;
}


.strEffect:active:not([disabled]) img {
    scale: 1.05;
    transition-duration: calc(var(--spring-duration, 0.3s) * 0.5);
}

.strEffect .shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: none;
    z-index: 2;
}

/* Default shimmer strEffect */
.strEffect[data-effect="wipe"] .shimmer {
    mask-image: linear-gradient(135deg, transparent 20%, black 88%, transparent 90%);
    mask-size: 200% 200%;
    mask-position: center;
    animation: wipe 3.5s linear infinite both -0.5s;
}

.strEffect[data-effect="wipe"] .shimmer::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg, transparent,#1B1F3B, #00aeff, #D9E7FF, transparent);
    transform: rotate(0deg);
    animation: shimmer-diagonal 3.5s linear infinite;
    z-index: 2;
}
.qcsrEffect {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.qcsrEffect img {
    display: block;
    width: 100%;
    height: auto;
    transition: scale 0.3s ease;
}


.qcsrEffect:active:not([disabled]) img {
    scale: 1.05;
    transition-duration: calc(var(--spring-duration, 0.3s) * 0.5);
}

.qcsrEffect .shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: none;
    z-index: 2;
}

/* Default shimmer qcsrEffect */
.qcsrEffect[data-effect="wipe"] .shimmer {
    mask-image: linear-gradient(135deg, transparent 20%, black 88%, transparent 90%);
    mask-size: 200% 200%;
    mask-position: center;
    animation: wipe 3.5s linear infinite both -0.5s;
}

.qcsrEffect[data-effect="wipe"] .shimmer::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg, transparent,#BFAFFF, #FFCCE5, #C2F2FF, transparent);
    transform: rotate(0deg);
    animation: shimmer-diagonal 3.5s linear infinite;
    z-index: 2;
}
.effect{
    border-radius: 2%;
    --rX: 0deg;
    --rY: 0deg;
    transform: rotateX(var(--rX)) rotateY(var(--rY));
    transition: 0.15s;
}