/* Icon */
.vsk-uk-icon{
	--_vsk-icon-bg: var(--e-global-color-accent);
    --_vsk-icon-outline: var(--e-global-color-secondary);
    --_vsk-outline-width: 1px;
}

.vsk-uk-icon :where(.elementor-icon-list-icon, .elementor-icon) {
    background-color: var(--_vsk-icon-bg);
    border-radius: 1000vw;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding-inline-end: 0!important;
    padding: .4rem!important;
	outline-width: var(--_vsk-outline-width);
    outline-offset: 2px;
    outline-color: var(--_vsk-icon-outline);
	outline-style: solid;
	margin: 6px;
	transition: outline-width .4s cubic-bezier(.75,-2.22,.24,1.77);
	animation-name: pulse-animation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.vsk-uk-icon :where(.elementor-icon-list-icon svg, .elementor-icon svg){
    margin: 0!important;
}

.vsk-uk-icon :where(.elementor-icon-list-icon svg, .elementor-icon svg) *{
    fill: var(--e-global-color-1ca8011);
}

.vsk-uk-icon a:is(:hover, :focus-visible) :where(.elementor-icon-list-icon, .elementor-icon),
.vsk-uk-icon a.elementor-icon:is(:hover, :focus-visible){
	outline-width: 6px;
	outline-offset: 0px;
}

/* Offset Label */
.vsk-label-offset:before{
	--_gradient: linear-gradient(90deg, var(--e-global-color-secondary) 0%, var(--e-global-color-accent) 100%);
    content: '';
    background-image: var(--_gradient);
    position: absolute;
    top: 0;
    height: 100%;
    z-index: -1;
    border-radius: var(--_br)!important;
    box-shadow: hsla(from var(--e-global-color-text) h s l / .3) 0px 0px 16px -8px;
	@supports(corner-shape: squircle){
		corner-shape: squircle!important;
	}
}
.vsk-label-offset.left:before{
	--_br: 0 9px 9px 0;
	right: 0;
	width: calc(100% + var(--vsk-section-padding-side) + 20vw);
	@supports(corner-shape: squircle){
		--_br: 0 14px 14px 0!important;
	}
}
.vsk-label-offset.right:before{
	--_br: 9px 0 0 9px;
	left: 0;
	width: calc(100% + var(--vsk-section-padding-side) + 20vw);
	@supports(corner-shape: squircle){
		--_br: 14px 0 0 14px!important;
	}
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px var(--_vsk-icon-bg);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
  }
}

@keyframes rotate{
    to{
        transform: rotate(360deg);
    }
}