/********************************************************
    * ASG Widget *
********************************************************/

.asg-elementor-widget.elementor-widget{
    display: flex;
    transition: 
        background var(--asg-transition-duration), 
        border var(--asg-transition-duration), 
        border-radius var(--asg-transition-duration), 
        box-shadow var(--asg-transition-duration), 
        transform var(--asg-transition-duration, var(--e-transform-transition-duration, 400ms));
}

/********************************************************
    * Animation *
********************************************************/

[class*="asg-animation-"]:hover {
    transform: var(--asg-transform);
}

.asg-animation-grow {
    --asg-transform: scale(1.1);
}

.asg-animation-shrink {
    --asg-transform: scale(0.9);
}

.asg-animation-float {
    --asg-transform: translateY(-8px);
}

.asg-animation-sink {
    --asg-transform: translateY(8px);
}

/********************************************************
    * ASG Icons *
********************************************************/

.asg-elementor-widget .elementor-icon{
    font-size: 64px;
    transition: var(--asg-transition-duration);
}

.asg-elementor-widget .elementor-icon-list-icon{
    font-size: 32px;
}


.asg-elementor-widget .elementor-icon-list-item a{
    transition: var(--asg-transition-duration);
}

.asg-elementor-widget .elementor-icon-list-text{
     transition: inherit;
}

.elementor-icon,
.elementor-icon:hover{
    color:var(--e-global-color-text);
}

.asg-line-icon,
.asg-color-icon,
.asg-brand-icon,
.asg-fa-icon{
    display: block;
    position: relative;
    width: 1em;
    height: 1em;
    font-size: inherit;
    transition: var(--asg-transition-duration);
}

.asg-line-icon,
.asg-fa-icon{
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.asg-color-icon,
.asg-brand-icon{
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.asg-line-icon-spin,
.asg-color-icon-spin,
.asg-brand-icon-spin{
    animation: asg-ico-spin 2s infinite linear; 
}

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

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

/********************************************************     
    * ASG Hamburger Menu *
********************************************************/

.asg-hamburger{
    cursor: pointer;
}

.asg-hamburger-container{
    display: flex;
    transition: var(--asg-transition-duration);
}

.asg-hamburger-sub-container{
    position: relative;
    width: 5em;
    height: 5em;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--asg-transition-duration);
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.asg-hamburger.rotating.has-click-animation .asg-hamburger-rotate.active{
    transform: rotate(45deg);
}

.asg-hamburger.rotating .asg-hamburger-line{
    fill:none;
    transition: var(--asg-transition-duration);
    stroke: var(--e-global-color-text);
    stroke-width:var(--asg-hamburger-weight, 2);
    stroke-linecap:round;
}

.asg-hamburger.rotating .top {
    stroke-dasharray: 40 139;
}

.asg-hamburger.rotating .bottom {
    stroke-dasharray: 40 180;
}

.asg-hamburger.rotating.has-click-animation .active .top {
    stroke-dashoffset: -98px;
}

.asg-hamburger.rotating.has-click-animation .active .bottom{
    stroke-dashoffset: -138px;
}

.asg-hamburger.folding .asg-hamburger-line{
    position: absolute;
    --asg-hamburger-line-weight: calc(var(--asg-hamburger-weight, 2) * 0.05em);
    width: calc(2em + var(--asg-hamburger-line-weight));
    height: var(--asg-hamburger-line-weight);
    left: calc(50% - 1em - var(--asg-hamburger-line-weight) / 2);
    background-color: var(--e-global-color-text);
    border-radius: 1em;
}

.asg-hamburger.folding .top{
    --asg-hamburger-line-rotate: 45deg;
    transform: translateY(calc(var(--asg-hamburger-line-indent) - var(--asg-hamburger-line-weight) / 2));
}

.asg-hamburger.folding .middle{
    transform: translateY(calc(2.5em - var(--asg-hamburger-line-weight) / 2));
    transition-delay: calc(var(--asg-transition-duration) / 2) !important;
    transition-duration: 0s !important;
}

.asg-hamburger.folding .bottom{
    --asg-hamburger-line-rotate: -45deg;
    transform: translateY(calc(var(--asg-hamburger-line-indent) - var(--asg-hamburger-line-weight) / 2));
}

.asg-hamburger.folding.triple .top{
    --asg-hamburger-line-indent: 1.65em;
}

.asg-hamburger.folding.triple .bottom{
    --asg-hamburger-line-indent: 3.35em;
}

.asg-hamburger.folding.double .top{
    --asg-hamburger-line-indent: 2em;
}

.asg-hamburger.folding.double .bottom{
    --asg-hamburger-line-indent: 3em;
}

.asg-hamburger.folding.has-click-animation .active .top,
.asg-hamburger.folding.has-click-animation .active .bottom {
    animation: asg-hamburger-fold var(--asg-transition-duration) ease forwards;
}

.asg-hamburger.folding.has-click-animation .active .middle{
    opacity: 0;
}

.asg-hamburger.folding.has-click-animation .non-active .top,
.asg-hamburger.folding.has-click-animation .non-active .bottom {
    animation: asg-hamburger-unfold var(--asg-transition-duration) ease forwards;
}

@keyframes asg-hamburger-fold {
    0% {
        transform: translateY(calc(var(--asg-hamburger-line-indent) - var(--asg-hamburger-line-weight) / 2)) rotate(0deg);
    }

    50% {
        transform: translateY(calc(2.5em - var(--asg-hamburger-line-weight) / 2)) rotate(0deg);
    }

    100% {
        transform: translateY(calc(2.5em - var(--asg-hamburger-line-weight) / 2)) rotate(var(--asg-hamburger-line-rotate));
    }
}

@keyframes asg-hamburger-unfold {
    0% {
        transform: translateY(calc(2.5em - var(--asg-hamburger-line-weight) / 2)) rotate(var(--asg-hamburger-line-rotate));
    }

    50% {
        transform: translateY(calc(2.5em - var(--asg-hamburger-line-weight) / 2)) rotate(0deg);
    }

    100% {
        transform: translateY(calc(var(--asg-hamburger-line-indent) - var(--asg-hamburger-line-weight) / 2)) rotate(0deg);
    }
}

/********************************************************     
    * ASG Offcanvas Close *
********************************************************/

.asg-offcanvas-close{
    cursor: pointer;
}

.asg-offcanvas-close-container{
    transition: var(--asg-transition-duration);
}

.asg-offcanvas-close-sub-container{
    position: relative;
    width: 5em;
    height: 5em;
    -webkit-tap-highlight-color: transparent;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: inherit;
}

.asg-offcanvas-close-line{
    position: absolute;
    --asg-close-line-weight: calc(var(--asg-offcanvas-close-weight, 2) * 0.05em);
    height: var(--asg-close-line-weight);
    width: calc(2em + var(--asg-close-line-weight));
    left: calc(50% - 1em - var(--asg-close-line-weight) / 2);
    top: calc(2.5em - var(--asg-close-line-weight) / 2);
    background-color: var(--e-global-color-text);
    border-radius: 1em;
    transition: inherit;
}

.asg-offcanvas-close-line.top{
    transform: rotate(45deg);
}
.asg-offcanvas-close-line.bottom {
    transform: rotate(-45deg);
}

/********************************************************
    * Site Logo *
********************************************************/

:root[data-asg-scheme="dark"] .asg-site-logo-img-light,
:root[data-asg-scheme="light"] .asg-site-logo-img-dark {
    display: none;
}

/********************************************************
    * Dark Mode Switcher *
********************************************************/

.asg-scheme-switcher{
    cursor: pointer;
}

.asg-scheme-switcher-dark .asg-scheme-switcher-icon-light,
.asg-scheme-switcher-light .asg-scheme-switcher-icon-dark{
    display: none;
}

.asg-scheme-switcher .asg-scheme-switcher-icon-light,
.asg-scheme-switcher .asg-scheme-switcher-icon-dark{
    transition: var(--asg-transition-duration);
}