/* Horizontal Scroll */
.mdw-horizontal-scroll{
    --progress-bar: true;
    --progress-bar-color:var(--e-global-color-366712c);
    --progress-bar-height: 2px;
}
body{
    --disable-movement-desktop: false;
    --disable-movement-tablet: true;
    --disable-movement-mobile: true;
    --hide-default-scrollbar: true;
    --disable-horizontal-scroll-mobile: true;
}
html.hide-scrollbar::-webkit-scrollbar{
    display: none;
}
html.hide-scrollbar{
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.mdw-horizontal-scroll{
    overflow: hidden;
    --initial-height: var(--min-height,100vh);
}
.mdw-horizontal-scroll:after{
    content: "";
    left: 0;
    top: calc(100vh - var(--progress-bar-height,2px));
    width: 100vw;
    height: var(--progress-bar-height,2px);
    background: var(--progress-bar-color,FFFF00);
    transform: scaleX(calc(var(--progress,0)*100%));
    position: fixed;
    transform-origin: left;
    will-change: transform;
    transition: transform 0.1s linear;
    opacity: 0;
}
.mdw-horizontal-scroll.fixed:after{
    opacity: 1;
}
.mdw-horizontal-scroll.progress-bar-disabled:after{
    display: none;
}
.mdw-horizontal-scroll > .e-con,
.mdw-horizontal-scroll > .e-container{
    transition: none;
    height: var(--initial-height,100vh);
}
body.tiny-scroll .mdw-horizontal-scroll > .e-con,
body.tiny-scroll .mdw-horizontal-scroll > .e-container{
    will-change: transform;
    transition: transform 1s cubic-bezier(0,.33,.07,1.03);
}
.mdw-horizontal-scroll.fixed > .e-con,
.mdw-horizontal-scroll.fixed > .e-container{
    position: fixed;
    top: 0;
    left: 0;
}
.mdw-horizontal-scroll.bottom{
    justify-content: flex-end;
}
.mdw-horizontal-scroll > .e-con > *,
.mdw-horizontal-scroll > .e-container > *{
    height: var(--min-height, 100vh);
}
.mdw-horizontal-scroll.hs-disabled{
    height: auto !important;
}
.mdw-horizontal-scroll.hs-disabled:after{
    display: none;
}
.mdw-horizontal-scroll.hs-disabled > .e-con,
.mdw-horizontal-scroll.hs-disabled > .e-container{
    flex-direction: column;
    height: auto;
}
.mdw-horizontal-scroll.hs-disabled.fixed > .e-con,
.mdw-horizontal-scroll.hs-disabled.fixed > .e-container{
    position: relative;
}
.mdw-horizontal-scroll.hs-disabled > .e-con > *,
.mdw-horizontal-scroll.hs-disabled > .e-container > *{
    height: auto;
}
.mdw-horizontal-scroll.hs-disabled > .e-con > .e-con,
.mdw-horizontal-scroll.hs-disabled > .e-container > .e-container{
    width: 100%;
}

/* Scrolling Movement */

.e-con[class^='mdw-hs-movement'],
.e-con[class*=' mdw-hs-movement'],
.e-container[class^='mdw-hs-movement'],
.e-container[class*=' mdw-hs-movement'],
.elementor-widget[class^='mdw-hs-movement'] .elementor-widget-container,
.elementor-widget[class*=' mdw-hs-movement'] .elementor-widget-container{
    transform: translateX(calc(var(--e-transform-translateX,0px) + var(--translateX,0)*-1px)) translateY(calc(var(--e-transform-translateY,0px) + var(--translateY,0)*1px)) rotate(calc(var(--rotateZ,0deg) + var(--rotate,0)*1deg));
    transition: none;
}
body.tiny-scroll .e-con[class^='mdw-hs-movement'],
body.tiny-scroll .e-con[class*=' mdw-hs-movement'],
body.tiny-scroll .e-container[class^='mdw-hs-movement'],
body.tiny-scroll .e-container[class*=' mdw-hs-movement'],
body.tiny-scroll .elementor-widget[class^='mdw-hs-movement'] .elementor-widget-container,
body.tiny-scroll .elementor-widget[class*=' mdw-hs-movement'] .elementor-widget-container{
    will-change: transform;
    transition: transform 1s cubic-bezier(0,.33,.07,1.03);
}
.e-con[class^='mdw-hs-movement-translate-x'],
.e-con[class*=' mdw-hs-movement-translate-x'],
.e-container[class^='mdw-hs-movement-translate-x'],
.e-container[class*=' mdw-hs-movement-translate-x'],
.elementor-widget[class^='mdw-hs-movement-translate-x'] .elementor-widget-container,
.elementor-widget[class*=' mdw-hs-movement-translate-x'] .elementor-widget-container{
    --translateX: calc(var(--parallax,0)*var(--speed-x,10)*var(--direction-x,1));
}
.e-con[class^='mdw-hs-movement-translate-y'],
.e-con[class*=' mdw-hs-movement-translate-y'],
.e-container[class^='mdw-hs-movement-translate-y'],
.e-container[class*=' mdw-hs-movement-translate-y'],
.elementor-widget[class^='mdw-hs-movement-translate-y'] .elementor-widget-container,
.elementor-widget[class*=' mdw-hs-movement-translate-y'] .elementor-widget-container{
    --translateY: calc(var(--parallax,0)*var(--speed-y,10)*var(--direction-y,1));
}
.e-con[class^='mdw-hs-movement-rotate'],
.e-con[class*=' mdw-hs-movement-rotate'],
.e-container[class^='mdw-hs-movement-rotate'],
.e-container[class*=' mdw-hs-movement-rotate'],
.elementor-widget[class^='mdw-hs-movement-rotate'] .elementor-widget-container,
.elementor-widget[class*=' mdw-hs-movement-rotate'] .elementor-widget-container{
    --rotate: calc(var(--parallax,0)*var(--speed-r,10)*var(--direction-r,1));
}

/* Reveal Animtion */

.mdw-reveal-animation,
.mdw-reveal-animation-left,
.mdw-reveal-animation-right,
.mdw-reveal-animation-top,
.mdw-reveal-animation-bottom{
    animation: none !important;
    transition: all 1s ease-in-out !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.mdw-reveal-animation:not(.animated),
.mdw-reveal-animation-left:not(.animated),
.mdw-reveal-animation-right:not(.animated),
.mdw-reveal-animation-top:not(.animated),
.mdw-reveal-animation-bottom:not(.animated){
    opacity: 0;
}
.mdw-reveal-animation:not(.animated),
.mdw-reveal-animation-bottom:not(.animated){
    transform: translateY(2em);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
.mdw-reveal-animation-left:not(.animated){
    transform: translateX(-2em);
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
.mdw-reveal-animation-right:not(.animated){
    transform: translateX(2em);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.mdw-reveal-animation-top:not(.animated){
    transform: translateY(-2em);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

/* For Mobile Devices */

@media (max-width: 767px){
.mdw-horizontal-scroll > .e-con,
.mdw-horizontal-scroll > .e-container{
    transition: transform 0.1s linear;
}
}

/*SHOWCASES*/
.mdw-card-portfolio{
    --image-height: 77vh;
    --image-width: 62vh;
    --maximum-move: 80vh;
    --maximum-rotate: 6deg;
}
.mdw-card-portfolio-image-left,
.mdw-card-portfolio-image-right{
    will-change: transform;
}
.mdw-card-portfolio-image-left img,
.mdw-card-portfolio-image-right img{
    width: var(--image-width);
    height: var(--image-height);
    object-fit: cover;
}



/* Tablet Device */
@media (max-width: 1024px) {
    .mdw-card-portfolio {
        --image-height: 77vh;
        --image-width: 62vh;
        --maximum-move: 65vh;
        --maximum-rotate: 6deg;
    }
}
/* Mobile Device */
@media (max-width: 767px) {
    .mdw-card-portfolio {
        --image-height: 450px;
        --image-width: 375px;
        --maximum-move: 350px;
        --maximum-rotate: 3deg;
    }

    .mdw-card-portfolio-image-left {
        transition: all 0.6s ease-in-out;
        transform: translateX(-30px) rotate(-1deg) !important;
    }

    .mdw-card-portfolio-image-right {
        transition: all 0.6s ease-in-out;
        transform: translateX(30px) rotate(1deg) !important;
    }

    .mdw-card-portfolio.passed .mdw-card-portfolio-image-left {
        transition: all 0.8s ease-in-out;
        transform: translateX(calc(-1*var(--maximum-move))) rotate(calc(-1*var(--maximum-rotate))) !important;
    }

    .mdw-card-portfolio.passed .mdw-card-portfolio-image-right {
        transition: all 0.8s ease-in-out;
        transform: translateX(calc(1*var(--maximum-move))) rotate(calc(1*var(--maximum-rotate))) !important;
    }
}


/* CSS code for gradient*/
.mdw-gradient{
    --gradient-color-1: #445f88;
    --gradient-color-2: #afd3ec;
    --gradient-color-3: #f8f8f8;
    --gradient-color-4: #afd3ec;
    --gradient-color-5: #445f88;
}
.mdw-gradient .elementor-widget-container{
    background: var(--gradient-color-1,#fff);
    background: linear-gradient(90deg, var(--gradient-color-1,#fff) 0%, var(--gradient-color-2,#fff) 25%, var(--gradient-color-3,#fff) 50%, var(--gradient-color-4,#fff) 75%, var(--gradient-color-5,#fff) 100%);
}
.mdw-gradient.elementor-widget-heading .elementor-widget-container{
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* CSS code for improving entrance animation */
.fadeInUp {
    animation: mdwFadeInUp 1s ease-in-out forwards !important;
}
.fadeIn {
    animation: fadeIn 1.3s ease-in-out 0.5s forwards !important;
    opacity: 0;
}
@keyframes mdwFadeInUp{
0%{
    transform: translateY(50px);
    opacity: 0;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
100%{
    transform: translateY(0);
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}