/** Containers/Sections
      ------------------------------ */

    .e-con.reveal--inners .e-con {
        transition: none !important;
    }

    .backward__container.backward__fade {
        --op: 0;
        transition: none !important;
    }

    .backward__container.backward__fade::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        z-index: 2;
        opacity: var(--op);
        pointer-events: none;
        will-change: opacity;
        transition: none !important;
    }

    .elementor-widget-container {
        border-color: var(--linesColor);
        border-width: 1px;
    }

    .container--pointer--events--all {
        pointer-events: all;
    }

    .container--pointer--events--none {
        pointer-events: none;
    }

    .site-header.header--template,
    div[data-elementor-type=pe-header] {
        pointer-events: none;
    }

    div[data-elementor-type=pe-header]>div:not(.container--pointer--events--none) {
        pointer-events: all;
    }

    .pin-spacer:has(>.container--pointer--events--none) {
        pointer-events: none;
    }

    .elementor-element.e-con.bg--color {
        --mainBackground: none;
        background: var(--mainBackground);
    }

    .e-con {
        border-color: var(--linesColor);
        border-top-width: 0;
        border-bottom-width: 1px;
        border-left-width: 0;
        border-right-width: 0;
    }

    .e-con-full:has(>.container--bg):not(:has(.convert--layered)) {
        overflow: hidden
    }

    .e-con.container--blended {
        mix-blend-mode: difference;
        z-index: 3;
        --mainColor: #fff;
        --secondaryColor: #fff
    }

    .e-con.container--blended .e-con {
        --mainColor: #fff;
    }

    .border--corners.e-con,
    .border--corners:has(.pe-client) .pe-client,
    .border--corners:not(:has(.pe-client)) {
        background:
            linear-gradient(to right, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 0 0,
            linear-gradient(to right, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 0 100%,
            linear-gradient(to left, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 100% 0,
            linear-gradient(to left, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 100% 100%,
            linear-gradient(to bottom, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 0 0,
            linear-gradient(to bottom, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 100% 0,
            linear-gradient(to top, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 0 100%,
            linear-gradient(to top, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 100% 100%;
        background-repeat: no-repeat;
        background-size: var(--borderSize) var(--borderSize);
        --borderSize: 15px;
        --borderWidth: 1px
    }

    .container--bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        pointer-events: none;
        /* background: #000; */
        overflow: hidden;
        border-radius: var(--border-radius);
    }

    .container--bg.bg--image {
        will-change: transform
    }

    .bg_transparent_true .container--bg {
        background: transparent;
    }

    /* .bg_fixed_true .container--bg {
        max-height: 100vh;
    } */

    .container--bg .plyr__controls {
        display: none !important
    }

    .container--bg .pe-video,
    .container--bg .plyr__video-embed__container,
    .container--bg iframe,
    .container--bg .plyr {
        height: 100%;
    }

    .container--bg>.pe-video.n-self video,
    .container--bg>.pe-video.n-self,
    .container--bg>.pe-video.n-self>div,
    .container--bg>.pe-video.n-self>div .plyr__video-wrapper,
    .container--bg>.pe-video.n-self>div .plyr__video-wrapper video {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .container--bg .cont--bg--wrap {
        width: 100%;
        height: 100%;
    }

    .container--bg .cont--bg--wrap img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        display: block;
    }

    .container--bg .bg--behavior--parallax .cont--bg--wrap img {
        will-change: transform;
    }

    div[data-elementor-type=wp-page]>.container--bg {
        display: none;
    }


    .container--bg.cont--bg--gradient {
        background: var(--b1);
    }

    .parallax__container,
    .pin--trigger {
        -webkit-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

    .e-con.fixed__content>div,
    .e-con.fixed__content {
        -webkit-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

    .e-con.fixed__content>div {
        will-change: transform;
    }

    .e-con.fixed__content {
        overflow: hidden !important;
    }



    .reverse--hold {
        display: block;
        float: left;
        width: 100%;
        --curveMargin: 0px;
    }

    .elementor-editor-active .reverse--hold {
        display: none !important;
    }

    .reverse--hold.rh--top.adjust--margins {
        margin-top: calc(-1*var(--curveMargin));
    }

    .reverse--hold.rh--bottom.adjust--margins {
        margin-bottom: calc(-1*var(--curveMargin));
    }


    span.bg--reverse-layer {
        --curveWidth: 75px;
        --curveHeight: 75px;
        width: var(--curveWidth);
        height: var(--curveHeight);
        overflow: hidden;
        position: relative;
        display: block;
        float: left;
        --curvColor: var(--mainBackground);
    }

    span.bg--reverse-layer.rl-top.rl-right {
        float: right;
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg)
    }

    span.bg--reverse-layer::before {
        content: "";
        display: block;
        width: 200%;
        height: 200%;
        position: absolute;
        border-radius: 50%;
        bottom: 0;
        left: 0;
        -webkit-box-shadow: calc(-1 * var(--curveWidth)) var(--curveWidth) 0 0 var(--curvColor);
        box-shadow: calc(-1 * var(--curveWidth)) var(--curveWidth) 0 0 var(--curvColor);
    }

    span.bg--reverse-layer.rl-bottom {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    span.bg--reverse-layer.rl-bottom.rl-right {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
        float: right;
    }

    .elementor-editor-active span.bg--reverse-layer.rl-top.rl-right,
    .elementor-editor-active span.bg--reverse-layer.rl-top.rl-left {
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    .elementor-editor-active span.bg--reverse-layer.rl-top.rl-right {
        left: unset;
        right: 0;
        -webkit-transform: translateY(-100%) rotate(-90deg);
        -ms-transform: translateY(-100%) rotate(-90deg);
        transform: translateY(-100%) rotate(-90deg)
    }

    .elementor-editor-active span.bg--reverse-layer.rl-bottom.rl-right,
    .elementor-editor-active span.bg--reverse-layer.rl-bottom.rl-left {
        position: absolute;
        bottom: 0;
        left: 0;
        -webkit-transform: translateY(100%) rotate(90deg);
        -ms-transform: translateY(100%) rotate(90deg);
        transform: translateY(100%) rotate(90deg);
    }

    .elementor-editor-active span.bg--reverse-layer.rl-bottom.rl-right {
        left: unset;
        right: 0;
        -webkit-transform: translateY(100%) rotate(180deg);
        -ms-transform: translateY(100%) rotate(180deg);
        transform: translateY(100%) rotate(180deg);
    }

    .outside--curved.e-con {
        --outsideCurveWidth: 20px;
    }

    .outside--curved.e-con::after,
    .outside--curved.e-con::before {
        content: "";
        width: var(--outsideCurveWidth);
        height: var(--outsideCurveWidth);
        position: absolute;
        border-radius: 0;
        background-image: var(--pseudo-bg)
    }

    .outside--curved.e-con.e-child::before {
        top: calc(-1 * var(--outsideCurveWidth));
        right: 0;
        transform: rotateY(-180deg) rotateX(180deg);
        left: unset;
    }

    .top--curve--left.outside--curved.e-con.e-child::before {
        right: unset;
        left: 0;
        transform: rotateY(0deg) rotateX(180deg);
    }

    .top--curve--right-right.outside--curved.e-con.e-child::before {
        top: 0;
        right: calc(-1 * var(--outsideCurveWidth));
        transform: rotateY(0deg) rotateX(0deg);
        left: unset;
    }


    .top--curve--left-left.outside--curved.e-con.e-child::before {
        top: 0;
        left: calc(-1 * var(--outsideCurveWidth));
        transform: rotateY(-180deg) rotateX(0deg);
        right: unset;
    }


    .outside--curved.e-con.e-child::after {
        bottom: 0;
        left: calc(-1 * var(--outsideCurveWidth));
        transform: rotateY(-180deg) rotateX(180deg);
    }


    .bottom--curve--right-bottom.outside--curved.e-con.e-child::after {
        left: unset;
        right: 0;
        bottom: calc(-1 * var(--outsideCurveWidth));
        transform: rotateY(180deg) rotateX(0deg);
    }

    .bottom--curve--right.outside--curved.e-con.e-child::after {
        left: unset;
        right: calc(-1 * var(--outsideCurveWidth));
        bottom: 0;
        transform: rotateY(0deg) rotateX(180deg);
    }

    .bottom--curve--left-left.outside--curved.e-con.e-child::after {
        left: 0;
        bottom: calc(-1 * var(--outsideCurveWidth));
        transform: rotateY(0deg) rotateX(0deg);
    }

    .grid--stacked>.e-con {
        transition: none !important
    }

    .e-con.bg_backdrop_true {
        --backdropBlur: 10px;

    }

    .e-con.bg_backdrop_true {
        background: transparent !important;
    }

    .e-con.bg_backdrop_true>div {
        --z-index: 2;
        z-index: var(--z-index);
    }

    .e-con.bg_backdrop_true::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--mainBackground);
        z-index: 0;
        backdrop-filter: blur(var(--backdropBlur));
        -webkit-backdrop-filter: blur(var(--backdropBlur));
        border-radius: var(--border-radius);
    }

    .animate--radius {
        margin-left: auto;
        margin-right: auto;
        transition: none !important;
        will-change: width, padding;
    }

    .animate--radius--out {
        -webkit-transition: none;
        -o-transition: none;
        transition: none
    }

    .integared--width.elementor-element {
        width: calc(var(--width) - var(--container-default-padding-left) - var(--container-default-padding-left));
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .elementor-element.e-con.convert--carousel {
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
        will-change: transform
    }


    .elementor-element.e-con.convert--carousel:not(.converted--vertical) {
        --width: fit-content;
        width: fit-content !important
    }



    .elementor-element.e-con.convert--carousel.converted--vertical {
        height: fit-content !important
    }


    .e-con:has(>.elementor-element.e-con.convert--carousel.fade--edges) {
        --fade--color: var(--mainBackground)
    }

    .e-con:has(>.elementor-element.e-con.convert--carousel.fade--edges)::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, var(--fade--color) 10%, rgba(255, 255, 255, 0.01) 50%);
        z-index: 2;
    }

    .e-con:has(>.elementor-element.e-con.convert--carousel.fade--edges)::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.01) 50%, var(--fade--color) 90%);
        z-index: 2;
    }


    .e-con:has(>.elementor-element.e-con.convert--carousel.fade--edges.converted--vertical)::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(180deg, var(--fade--color) 10%, rgba(255, 255, 255, 0.01) 50%);
        z-index: 22;

    }

    .e-con:has(>.elementor-element.e-con.convert--carousel.fade--edges.converted--vertical)::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.01) 50%, var(--fade--color) 90%);
        top: unset;
        z-index: 2;
    }

    .elementor-element.e-con.e-con.convert--curved {
        flex-direction: row;
        /* transform: translateX(calc(-100% / var(--length) - calc(var(--itemsHalf) - var(--gap2)))); */
        gap: var(--gap);
        flex-wrap: nowrap;
        --angle: 30deg;
        --length: 6;
        --yVal: 20px;
        --gap: var(--row-gap);
        --itemsWidth: 400px;
        --itemsHalf: calc(var(--itemsWidth) / 2);
        --gap2: calc(var(--gap) * 2);
        transition: none !important;
        will-change: transform;
        /* transform: translateX(40vw); */
    }

    /* .convert--curved .elementor-element:not(.active) {
        opacity: .5;
        filter: blur(5px);
    } */

    .e-con.convert--curved .elementor-element {
        transform-origin: bottom center;
        width: var(--itemsWidth) !important;
        position: relative;
        /* transition: filter .4s ease, opacity .4s ease !important; */
        transition: none !important;

    }

    .e-con.convert--curved .elementor-element {
        transform: rotate(calc(var(--angle) / var(--length) * var(--i))) translateY(calc(var(--i) * (calc(var(--yVal) * var(--i)))));
    }

    /* 
    .elementor-element-92a147b {
    	height: 100vh;
      width: fit-content;
      gap: var(--gap);
      flex-wrap: nowrap;
      transform: translateX(calc(-100% / var(--length) - calc(var(--itemsHalf) - var(--gap2))));
      --angle: 30deg;
      --length: 6;
      --yVal: 20px;
      --gap : 30px;
      --itemsWidth: 400px;
      --itemsHalf: calc(var(--itemsWidth) / 2);
      --gap2: calc(var(--gap) * 2);
    }
    
    
    .elementor-element-92a147b .elementor-element {
      transform-origin: bottom center;
      width: var(--itemsWidth) !important;
      position: relative;
    }
    
    
    .elementor-element-92a147b .elementor-element:nth-child(3) {
     transform: rotate(calc(var(--angle) / var(--length) * -1)) translateY(calc(var(--i) * (calc(var(--yVal) * var(--i)))));
    }
    
    .elementor-element-92a147b .elementor-element:nth-child(2) {
     transform: rotate(calc(var(--angle) / var(--length) * -2)) translateY(calc(var(--i) * (calc(var(--yVal) * var(--i)))));
    }
    
    .elementor-element-92a147b .elementor-element:nth-child(1) {
     transform: rotate(calc(var(--angle) / var(--length) * -3)) translateY(calc(var(--i) * (calc(var(--yVal) * var(--i)))));
    } 
    
    .elementor-element-92a147b .elementor-element:nth-child(5) {
     transform: rotate(calc(var(--angle) / var(--length) * 1)) translateY(calc(var(--i) * (calc(var(--yVal) * var(--i)))));
    }
    
    .elementor-element-92a147b .elementor-element:nth-child(6) {
     transform: rotate(calc(var(--angle) / var(--length) * 2)) translateY(calc(var(--i) * (calc(var(--yVal) * var(--i)))));
    }
    
    .elementor-element-92a147b .elementor-element:nth-child(7) {
     transform: rotate(calc(var(--angle) / var(--length) * 3)) translateY(calc(var(--i) * (calc(var(--yVal) * var(--i)))));
    } */

    .elementor-element.e-con.convert--layered .e-con,
    .elementor-element.e-con.convert--layered {
        -webkit-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
        overflow: visible;
        will-change: transform
    }

    .elementor-element {
        color: var(--mainColor)
    }

    .convert--layered {
        --op: 0
    }

    .bg_fixed_true {
        overflow: hidden;
    }

    span.cont--bg--overlay {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(0 0 0 / 50%);
        z-index: 2;
        pointer-events: all;
    }

    .build--on--scroll .e-con {
        transition: none !important
    }

    .container--accordion--item {
        height: 0;
        overflow: hidden;
        min-height: auto;
        padding: 0;
    }

    .container--accordion--item.cont--acc--active {
        height: auto;
        min-height: var(--min-height);
        padding: 'unset';
    }

    .container--tab--titles--wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        height: 100%;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        position: relative;
        padding: 1em 0;
        gap: 10px;
        min-width: 100%;
    }

    .container--tab--titles--wrap>div {
        font-size: 1.5em;
        text-transform: uppercase;
        opacity: .25;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        letter-spacing: -0.033em;
        white-space: nowrap;
    }

    .container--tab--titles--wrap::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--mainColor);
        opacity: .2;
    }

    .container--tab--titles--wrap>div.active {
        opacity: 1;
    }


    .container--tab--titles--wrap .tabs--seperator {
        font-size: 1.5em;
        line-height: inherit;
        opacity: .2;
        display: none;
    }

    .show--seperator .container--tab--titles--wrap .tabs--seperator {
        display: block;
    }

    .e-con.pinned_true {
        -webkit-transition: none !important;
        -o-transition: none !important;
        transition: none !important
    }

    .e-con .pin-spacer {
        -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important
    }

    .pin-spacer>.e-con {
        -webkit-transition: none !important;
        -o-transition: none !important;
        transition: none !important
    }

    .pin-spacer-smooth--hold {
        height: 0 !important;
    }

    .elementor-editor-active .pin-spacer>.e-con {
        overflow: auto;
    }

    /*
    .convert--layered .e-con {
    	transform-origin: top center
    }
    */

    .convert--layered>.e-con::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        border-radius: var(--border-radius);
        opacity: var(--op);
        pointer-events: none
    }

    .convert--layered>.e-con:not(:first-child) {
        position: absolute;
        transform: translateY(100vh);
        /* width: 100%; */
        /* left: 0;
        right: 0; */
        width: calc(100% - var(--padding-left) - var(--padding-right));
        left: var(--padding-left);
        right: var(--padding-right);
    }

    .convert--layered>.e-con:not(:first-child) {
        position: absolute;
        transform: translateY(100vh);
        width: 100%;
        left: 0;
        right: 0;
        /* width: calc(100% - var(--padding-left) - var(--padding-right));
        left: var(--padding-left);
        right: var(--padding-right); */
    }


    .elementor-editor-active .con--mode--edit.convert--layered>.e-con,
    .elementor-editor-active .convert--layered>.e-con:nth-of-type(4) {
        position: relative !important;
        transform: none !important;
    }

    .will__animated,
    .e-con[data-anim-general="true"] {
        -webkit-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

    .e-con.highlight--inners>.elementor-element {
        opacity: 0;
    }

    .elementor-editor-active .e-con.highlight--inners>.elementor-element {
        opacity: .2;
    }

    .e-con.stack--inners>div.elementor-element:not(:first-of-type) {
        position: absolute;
        visibility: hidden;
        transition: none;
    }

    .elementor-editor-active .e-con.stack--inners>div:nth-child(4) {
        position: relative;
        visibility: visible;
    }

    @media only screen and (max-width: 550px) {

        .e-con.stack--inners:not([data-pin-mobile=true])>div:not(:first-child) {
            position: static;
            visibility: visible;
        }


    }

    .e-con[data-animation=customMask] {
        transform: none !important;
    }

    /** Site Logo
      ----------------------------- */
    .elementor-widget-pesitelogo .elementor-widget-container {
        overflow: hidden;
        display: block;
        float: left;
    }

    .site-branding {
        display: block;
        float: left;
    }

    .site-branding>div {
        width: 100%;
        -webkit-transition: opacity .4s ease-in-out;
        -o-transition: opacity .4s ease-in-out;
        transition: opacity .4s ease-in-out
    }

    .site-branding>div img {
        width: 100%;
        display: block;
    }

    .site-branding>div img.secondary__logo {
        display: none;
    }

    .layout--switched .header--switched .site-branding>div img.sticky__main__logo,
    .layout--switched .header--switched .site-branding>div img.main__logo,
    .header--switched .site-branding>div img.secondary__logo,
    .header--switched .site-branding>div img.sticky__secondary__logo,
    .layout--switched .site-branding>div img.secondary__logo,
    .layout--switched .site-branding>div img.sticky__secondary__logo,
    .site-branding>div img.sticky__main__logo,
    .site-branding>div img.main__logo {
        display: block;
    }

    .layout--switched .header--switched .site-branding>div img.secondary__logo,
    .layout--switched .header--switched .site-branding>div img.sticky__secondary__logo,
    .header--switched .site-branding>div img.sticky__main__logo,
    .header--switched .site-branding>div img.main__logo,
    .layout--switched .site-branding>div img.sticky__main__logo,
    .layout--switched .site-branding>div img.main__logo,
    .site-branding>div img.secondary__logo,
    .site-branding>div img.sticky__secondary__logo {
        display: none;
    }

    .sticky-logo {
        position: absolute;
        top: 50%;
        /* left: 50%; */
        opacity: 0;
        -webkit-transform: translate(0%, -50%);
        -ms-transform: translate(0%, -50%);
        transform: translate(0%, -50%);

    }



    .header--move .change--logo .site-branding .site-logo {
        opacity: 0;
    }

    .header--move .change--logo .site-branding .sticky-logo {
        opacity: 1;
    }

    .header--move .change--logo img.sticky__secondary__logo {
        display: none;
    }

    .site-branding>div.mobile-logo {
        display: none;
    }

    @media only screen and (max-width: 550px) {

        .site-branding:has(.mobile-logo) .sticky-logo,
        .site-branding:has(.mobile-logo) .site-logo {
            display: none;
        }

        .site-branding>div.mobile-logo {
            display: block;
            width: 50px;
            height: auto;
        }


        .layout--switched .header--switched .site-branding>div img.mobile__main__logo,
        .header--switched .site-branding>div img.mobile__secondary__logo,
        .layout--switched .site-branding>div img.mobile__secondary__logo,
        .site-branding>div img.main__logo {
            display: block;
        }

        .layout--switched .header--switched .site-branding>div img.secondary__logo,
        .header--switched .site-branding>div img.mobile__main__logo,
        .layout--switched .site-branding>div img.mobile__main__logo,
        .site-branding>div img.mobile__secondary__logo {
            display: none;
        }

    }

    /** Site Navigation
      ------------------------------ */
    .site--nav {
        display: block;
        position: relative;
    }

    span.site--nav--overlay {
        position: fixed;
        top: 0;
        left: 0;
        background: #000;
        display: block;
        width: 100vw;
        height: 100vh;
        opacity: 0;
        z-index: -22;
        visibility: hidden;
        pointer-events: none;
        transition: all 1.4s ease
    }

    span.site--nav--overlay.active {
        opacity: .65;
        visibility: visible;
        pointer-events: all
    }

    .site--nav.nav--popup .site--menu {
        position: fixed;
        top: 0;
        right: 0;
        z-index: -11;
        -webkit-transform: translateX(110%);
        -ms-transform: translateX(110%);
        transform: translateX(110%);
        overflow: hidden;
        /* white-space: nowrap; */
        visibility: hidden;
    }

    .popup--pos--left .site--nav.nav--popup .site--menu {
        left: 0;
        right: unset;
        -webkit-transform: translateX(-110%);
        -ms-transform: translateX(-110%);
        transform: translateX(-110%)
    }

    .popup--pos--center .site--nav.nav--popup .site--menu {
        left: 50%;
        right: unset;
        -webkit-transform: translateX(-50%) translateY(-110%);
        -ms-transform: translateX(-50%) translateY(-110%);
        transform: translateX(-50%) translateY(-110%);
    }

    .site--menu.menu--expand {
        position: fixed;
        top: 0;
        right: 0;
        overflow: hidden;
        width: 0vw;
        height: 0vh;
        visibility: visible;
        border-radius: 0;
    }

    .site--menu.menu--expand>div {
        position: absolute;
        top: 0;
        right: 0;
    }

    .expand--pos--left .site--menu.menu--expand>div,
    .expand--pos--left .site--menu.menu--expand {
        right: unset;
        left: 0;
    }

    .hover--underline .pe--list ul>li::after,
    .active--underline ul.menu>li.current-menu-item::after,
    .hover--underline ul.menu>li.current-menu-item::after,
    .hover--underline ul.menu>li::after {
        content: "";
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: 0;
        height: 0.05em;
        background: var(--mainColor);
        width: 0;
        -webkit-transition: width .4s ease-in-out;
        -o-transition: width .4s ease-in-out;
        transition: width .4s ease-in-out;
    }

    .hover--underline .pe--list ul>li,
    .active--underline ul.menu>li,
    .hover--underline ul.menu>li {
        position: relative;
    }


    .hover--underline .pe--list ul>li:hover::after,
    .active--underline ul.menu>li.current-menu-item::after,
    .hover--underline ul.menu>li.current-menu-item::after,
    .hover--underline ul.menu>li:hover::after {
        width: 100%;
    }

    .hover--underline ul.menu:has(li>a:hover) li.current-menu-item::after {
        width: 0;
    }

    .hover--dot .pe--list ul>li>a::before,
    .active--dot ul.menu>li.current-menu-item>a::before,
    .hover--dot ul.menu>li>a::before {
        width: 0.5em;
        height: 0.5em;
        content: "";
        display: inline-block;
        position: absolute;
        left: 0;
        background: var(--mainColor);
        border-radius: 50%;
        top: 50%;
        -webkit-transform: translateY(-50%) translateX(-50%);
        -ms-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
        opacity: 0;
        -webkit-transition: all .4s ease;
        -o-transition: all .4s ease;
        transition: all .4s ease;
    }


    .hover--dot .pe--list ul>li>a,
    .active--dot ul.menu>li>a,
    .hover--dot ul.menu>li>a {
        position: relative;
        -webkit-transition: padding .4s ease;
        -o-transition: padding .4s ease;
        transition: padding .4s ease;
    }


    .hover--dot .pe--list ul>li>a:hover::before,
    .active--dot ul.menu>li.current-menu-item>a::before,
    .hover--dot ul.menu>li.current-menu-item>a::before,
    .hover--dot ul.menu>li>a:hover::before {
        opacity: 1;
        -webkit-transform: translateY(-50%) translateX(0%);
        -ms-transform: translateY(-50%) translateX(0%);
        transform: translateY(-50%) translateX(0%)
    }

    .hover--dot .pe--list ul>li>a:hover,
    .active--dot ul.menu>li.current-menu-item>a,
    .hover--dot ul.menu>li.current-menu-item>a,
    .hover--dot ul.menu>li>a:hover {
        padding-left: 0.75em;
    }

    .hover--dot ul.menu:has(li>a:hover) li.current-menu-item>a {
        padding-left: 0;
    }

    .hover--dot ul.menu:has(li>a:hover) li.current-menu-item>a::before {
        opacity: 0;
        -webkit-transform: translateY(-50%) translateX(-50%);
        -ms-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%)
    }

    .active--brackets ul.menu>li>a::before {
        content: "[";
        display: inline-block;
        opacity: 0;
        transition: opacity .4s ease
    }

    .active--brackets ul.menu>li a::after {
        content: "]";
        display: inline-block;
        opacity: 0;
        transition: opacity .4s ease
    }

    .active--brackets ul.menu>li>a:hover::after,
    .active--brackets ul.menu>li>a:hover::before {
        opacity: 1
    }

    .active--brackets ul.menu>li.current-menu-item>a::after,
    .active--brackets ul.menu>li.current-menu-item>a::before {
        opacity: 1
    }

    .active--background-follower .main-navigation ul li a:hover,
    .hover--background-follower .main-navigation ul li a:hover {
        color: var(--secondaryBackground) !important;
    }

    .active--background-follower .main-navigation ul li.current-menu-item a,
    .hover--background-follower .main-navigation ul li.current-menu-item a {
        color: var(--secondaryBackground) !important;
    }

    .active--background-follower .main-navigation ul:has(li:not(.current-menu-item):hover) .current-menu-item a,
    .hover--background-follower .main-navigation ul:has(li:not(.current-menu-item):hover) .current-menu-item a {
        color: var(--mainColor) !important
    }

    .active--background-follower .main-navigation ul::after,
    .hover--background-follower .main-navigation ul::after {
        content: "";
        display: block;
        position: absolute;
        left: var(--left);
        width: var(--width);
        background: var(--mainColor);
        height: calc(100% - 0.75em + var(--paddingTop) + var(--paddingBottom));
        border-radius: var(--radius);
        top: 50%;
        transform: translateY(-50%);
    }


    .hover--spacer .pe--list ul>li>a::before,
    .active--spacer ul.menu>li.current-menu-item>a::before,
    .hover--spacer ul.menu>li>a::before {
        width: 0;
        height: 0.05em;
        content: "";
        display: inline-block;
        position: absolute;
        left: 0;
        background: var(--mainColor);
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: all .4s ease;
        -o-transition: all .4s ease;
        transition: all .4s ease;
    }

    .hover--spacer .pe--list ul>li>a,
    .active--spacer ul.menu>li>a,
    .hover--spacer ul.menu>li>a {
        position: relative;
        -webkit-transition: padding .4s ease;
        -o-transition: padding .4s ease;
        transition: padding .4s ease;
    }

    .hover--spacer .pe--list ul>li>a:hover:before,
    .active--spacer ul.menu>li.current-menu-item>a::before,
    .hover--spacer ul.menu>li.current-menu-item>a::before,
    .hover--spacer ul.menu>li>a:hover::before {
        width: 1em;
    }

    .hover--spacer .pe--list ul>li>a:hover,
    .active--spacer ul.menu>li.current-menu-item>a,
    .hover--spacer ul.menu>li.current-menu-item>a,
    .hover--spacer ul.menu>li>a:hover {
        padding-left: 1.2em;
    }

    .hover--spacer ul.menu:has(li>a:hover) li.current-menu-item>a {
        padding-left: 0;
    }

    .hover--spacer ul.menu:has(li>a:hover) li.current-menu-item>a::before {
        width: 0;
    }

    .hover--font-swap ul.menu>li.current-menu-item>a,
    .active--font-swap ul.menu>li.current-menu-item>a,
    .hover--font-swap ul.menu>li>a:hover {
        font-family: cursive
    }


    .hover--words-up ul.menu>li>a .menu--item--clone {
        position: absolute;
        top: 100%;
        left: 50%;
        white-space: nowrap;
        transform: translateX(-50%);
    }

    .hover--words-up ul.menu>li>a:hover .menu--item--clone {
        transform: translateX(-50%) translateY(-100%);
    }

    .active--dot ul.menu>li.current-menu-item>a .menu--item--clone {
        left: 0.75em
    }

    .active--spacer ul.menu>li.current-menu-item>a .menu--item--clone {
        left: 1.2em
    }


    .hover--words-up ul.menu>li>a {
        position: relative;
        overflow: hidden;
    }

    .hover--words-up ul.menu>li>a:hover span {
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    .menu--items--align--center.hover--words-up ul.menu>li>a .menu--item--clone {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .menu--items--align--center.hover--words-up ul.menu>li>a:hover .menu--item--clone {

        -webkit-transform: translateX(-50%) translateY(-100%);

        -ms-transform: translateX(-50%) translateY(-100%);

        transform: translateX(-50%) translateY(-100%);
    }

    .hover--words-up ul.menu>li>a span {
        -webkit-transition: all .4s ease-out;
        -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
        display: inline-block;
    }

    .menu--item--word {
        overflow: hidden;
    }


    .active--opacity ul.menu>li>a {
        opacity: .35;
    }

    .active--opacity ul.menu>li.current-menu-item>a {
        opacity: 1;
    }

    .hover--opacity ul.menu>li>a {
        transition: all .3s ease-in-out !important
    }

    .hover--opacity ul.menu:has(a:hover) li:not(:has(a:hover)) .st--wrap,
    .hover--opacity ul.menu:has(a:hover) li:not(:has(a:hover)) a {
        opacity: .3;
    }

    .hover--opacity ul.menu>li>a:hover {
        opacity: 1;
    }

    .hover--opacity .pe--list ul>li>a {
        transition: opacity .3s ease-in-out
    }

    .hover--opacity .pe--list ul:has(a:hover) li:not(:has(a:hover)) a {
        opacity: .3;
    }

    .site--nav.nav--popup .site--menu.active {
        visibility: visible
    }

    .site--nav.nav--fullscreen .site--menu {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        z-index: -5;
        height: 0vh;
        overflow: hidden;
        pointer-events: none;
    }

    .site--nav.nav--fullscreen:has(.menu--toggle.active) .site--menu {
        pointer-events: all
    }

    .site--nav.nav--fullscreen .site--menu>div {
        visibility: hidden;
    }

    .menu--vertical ul.menu {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0;
        border-color: var(--linesColor);
    }

    .menu--vertical ul.menu li {
        font-size: 40px;
        line-height: 1.4;
        padding: 0;
        letter-spacing: -0.03em;
        white-space: nowrap;
    }

    ul.menu.menu--vertical>li>ul.sub-menu {
        position: relative;
        z-index: 99;
        top: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        background: none;
        border-radius: 0px;
        left: 0;
        opacity: 1;
        visibility: visible;
        padding: 0;
        height: 0;
        overflow: hidden;
        -webkit-box-shadow: none;
        box-shadow: none;
        width: 100%;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
        /* columns: 2; */
        padding-left: 0.07em;
        display: block;
    }

    .menu--vertical ul.menu li.sub--active ul.sub-menu {
        height: auto;
        padding-top: 0.35em;
        padding-bottom: 0.35em;
        padding-left: 0.07em;
        display: block;
    }

    ul.menu.menu--vertical>li>ul.sub-menu .sub-menu {
        left: 0;
        padding: 0;
        position: relative;
        background: none;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        display: block;
        float: left;
        -webkit-box-shadow: none;
        box-shadow: none;
        padding-top: 0.3em;
        padding-bottom: 0;
    }

    .menu--vertical ul.menu li ul.sub-menu li a {
        color: var(--secondaryColor);
        width: 100%;
    }

    .menu--vertical ul.menu li ul.sub-menu li {
        font-size: 20px;
        margin: 0;
        line-height: 1.6em;
    }

    @media only screen and (max-width: 550px) {

        .active--background-follower .main-navigation ul li.current-menu-item a,
        .hover--background-follower .main-navigation ul li.current-menu-item a {
            color: var(--mainColor) !important;
            text-decoration: underline;
        }

        .-mobilemenu--vertical ul.menu {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            gap: var(--gap);
        }

        .-mobilemenu--vertical ul.menu li {
            font-size: 40px;
            line-height: 1.4;
            padding: 0;
            letter-spacing: -0.03em;
            white-space: nowrap;
        }

        ul.menu.-mobilemenu--vertical>li>ul.sub-menu {
            position: relative;
            z-index: 99;
            top: 0;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
            background: none;
            border-radius: 0px;
            left: 0;
            opacity: 1;
            visibility: visible;
            padding: 0;
            height: 0;
            overflow: hidden;
            -webkit-box-shadow: none;
            box-shadow: none;
            width: 100%;
            -webkit-transition: none;
            -o-transition: none;
            transition: none;
            /* columns: 2; */
            padding-left: 0.07em;
            display: block;
        }

        .-mobilemenu--vertical ul.menu li.sub--active ul.sub-menu {
            height: auto;
            padding-top: 0.35em;
            padding-bottom: 0.35em;
            padding-left: 0.07em;
            display: block;
        }

        ul.menu.menu--vertical>li>ul.sub-menu .sub-menu {
            left: 0;
            padding: 0;
            position: relative;
            background: none;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
            display: block;
            float: left;
            -webkit-box-shadow: none;
            box-shadow: none;
            padding-top: 0.3em;
            padding-bottom: 0;
        }

        .-mobilemenu--vertical ul.menu li ul.sub-menu li a {
            color: var(--secondaryColor);
            width: 100%;
        }

        .-mobilemenu--vertical ul.menu li ul.sub-menu li {
            font-size: 20px;
            margin: 0;
            line-height: 1.6em;
        }
    }

    .menu--toggle--wrap {
        text-align: right;

    }

    .site--nav.nav--expand .menu--toggle--wrap {
        position: relative;
        z-index: 3;
    }

    .menu--toggle {
        display: inline-block;
        width: fit-content;
        height: fit-content;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
        --radius: 0;
        border-radius: var(--radius);
        border-color: var(--linesColor);
        font-size: 1rem;
    }

    .has--backdrop.elementor-widget-pesitenavigation .menu--toggle.toggle--plus {
        -webkit-backdrop-filter: blur(var(--backdropBlur));
        backdrop-filter: blur(var(--backdropBlur));
        --backdropBlur: 10px;
    }

    .menu--toggle.toggle--plus .toggle-lines--wrap,
    .menu--toggle.toggle--hamburger .toggle-lines--wrap {
        width: 35px;
        height: 35px;
        position: relative;
    }

    .menu--toggle.toggle--plus .toggle-lines--wrap>span {
        position: absolute;
        width: 50%;
        height: 1px;
        background: var(--mainColor);
        display: block;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 22;
        -webkit-transition: background .3s ease 0s, -webkit-transform .5s ease-in-out 0s;
        transition: background .3s ease 0s, -webkit-transform .5s ease-in-out 0s;
        -o-transition: transform .5s ease-in-out 0s, background .3s ease 0s;
        transition: transform .5s ease-in-out 0s, background .3s ease 0s;
        transition: transform .5s ease-in-out 0s, background .3s ease 0s, -webkit-transform .5s ease-in-out 0s;
    }

    .menu--toggle.toggle--plus .toggle-lines--wrap>span:last-child {
        width: 1px;
        height: 50%;
    }



    .menu--toggle.toggle--plus.active .toggle-lines--wrap>span:first-child {
        -webkit-transform: translate(-50%, -50%) rotate(-135deg);
        -ms-transform: translate(-50%, -50%) rotate(-135deg);
        transform: translate(-50%, -50%) rotate(-135deg)
    }

    .menu--toggle.toggle--plus.active .toggle-lines--wrap>span:last-child {
        -webkit-transform: translate(-50%, -50%) rotate(-135deg);
        -ms-transform: translate(-50%, -50%) rotate(-135deg);
        transform: translate(-50%, -50%) rotate(-135deg)
    }

    .has--bg .menu--toggle::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background: var(--secondaryBackground);
        z-index: -2;
        border-radius: var(--radius);
    }

    .has--bg.has--hover .menu--toggle::before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0%;
        height: 0%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background: var(--mainColor);
        z-index: -1;
        border-radius: var(--radius);
        -webkit-transition: all .4s cubic-bezier(0.86, 0, 0.1, 1);
        -o-transition: all .4s cubic-bezier(0.86, 0, 0.1, 1);
        transition: all .4s cubic-bezier(0.86, 0, 0.1, 1);
    }

    .has--bg.has--hover .menu--toggle:hover::before {
        width: 100%;
        height: 100%;
    }

    .has--bg.has--hover .menu--toggle:hover>span {
        background: var(--secondaryBackground)
    }

    .menu--toggle:has(.toggle--text--wrapper) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        width: auto;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        overflow: hidden;
        height: auto;
        gap: 10px;
    }

    .menu--toggle .toggle--text--wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        height: 1em;
        overflow: hidden;
        font-size: 14px;
    }

    .menu--toggle .toggle--text--wrapper span {
        line-height: 1;
        transition: all .4s ease;
    }

    .menu--toggle.toggle--plus--text .tpt--icon {
        line-height: 1;
        height: 1em;
    }

    .menu--toggle.toggle--plus--text svg {
        font-size: 1em;
        line-height: 1;
        height: 1em;
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-transition: color .4s ease, -webkit-transform .75s cubic-bezier(0.73, 0.03, 0.2, 0.99);
        transition: color .4s ease, -webkit-transform .75s cubic-bezier(0.73, 0.03, 0.2, 0.99);
        -o-transition: transform .75s cubic-bezier(0.73, 0.03, 0.2, 0.99), color .4s ease;
        transition: transform .75s cubic-bezier(0.73, 0.03, 0.2, 0.99), color .4s ease;
        transition: transform .75s cubic-bezier(0.73, 0.03, 0.2, 0.99), color .4s ease, -webkit-transform .75s cubic-bezier(0.73, 0.03, 0.2, 0.99)
    }

    .menu--toggle.active .toggle--text--wrapper>span {
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    .menu--toggle.toggle--plus--text.active svg {
        -webkit-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
        transform: rotate(-135deg)
    }

    .menu--toggle.toggle--hamburger .toggle-lines--wrap>span {
        position: absolute;
        width: 100%;
        height: 2px;
        background: var(--mainColor);
        display: block;
        top: 50%;
        right: 0;
        z-index: 22;
        -webkit-transition: background .3s ease 0s, width .3s ease 0s, -webkit-transform .5s ease-in-out 0s;
        transition: background .3s ease 0s, width .3s ease 0s, -webkit-transform .5s ease-in-out 0s;
        -o-transition: transform .5s ease-in-out 0s, background .3s ease 0s, width .3s ease 0s;
        transition: transform .5s ease-in-out 0s, background .3s ease 0s, width .3s ease 0s;
        transition: transform .5s ease-in-out 0s, background .3s ease 0s, width .3s ease 0s, -webkit-transform .5s ease-in-out 0s;
    }

    .menu--toggle.toggle--hamburger .toggle-lines--wrap>span:first-child {
        -webkit-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
        transform: translateY(-3px);
        width: 80%;
    }

    .hamburger--style--simple .menu--toggle.toggle--hamburger .toggle-lines--wrap>span:first-child {
        width: 100%;
    }


    .menu--toggle.toggle--hamburger:hover .toggle-lines--wrap>span:first-child {
        width: 100%
    }

    .menu--toggle.toggle--hamburger .toggle-lines--wrap>span:last-child {
        -webkit-transform: translateY(3px);
        -ms-transform: translateY(3px);
        transform: translateY(3px);
    }

    .menu--toggle.toggle--hamburger.active .toggle-lines--wrap>span:first-child {
        -webkit-transform: translateY(0px) rotate(-135deg);
        -ms-transform: translateY(0px) rotate(-135deg);
        transform: translateY(0px) rotate(-135deg);
        width: 100%
    }

    .menu--toggle.toggle--hamburger.active .toggle-lines--wrap>span:last-child {
        -webkit-transform: translateY(0px) rotate(135deg);
        -ms-transform: translateY(0px) rotate(135deg);
        transform: translateY(0px) rotate(135deg);
    }

    .st--wrap {
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        vertical-align: middle;
        position: relative;
        margin-left: 0.2em;
        cursor: pointer;
        overflow: hidden;
        line-height: 1;
        display: block;
    }

    @media only screen and (max-width: 550px) {

        .st--wrap {
            display: none;
        }

    }

    .has--bg.elementor-widget-penavmenu .main-navigation ul.menu .st--wrap {
        margin-left: -0.7em
    }

    .st--icon--row-reverse .st--wrap {
        margin-left: 0;
    }

    .elementor-widget-penavmenu .main-navigation ul.menu li a {
        display: block;
    }

    .st--wrap span.sub--toggle {
        width: 100%;
        height: 100%;
        display: block;
    }

    span.sub--toggle.st--arrow {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .menu--item--will--animated .st--wrap span.sub--toggle {
        -webkit-transform: translateY(120%);
        -ms-transform: translateY(120%);
        transform: translateY(120%);
        -webkit-transition: -webkit-transform .7s cubic-bezier(0, 0.58, 0.53, 1.02) .2s;
        transition: -webkit-transform .7s cubic-bezier(0, 0.58, 0.53, 1.02) .2s;
        -o-transition: transform .7s cubic-bezier(0, 0.58, 0.53, 1.02) .2s;
        transition: transform .7s cubic-bezier(0, 0.58, 0.53, 1.02) .2s;
        transition: transform .7s cubic-bezier(0, 0.58, 0.53, 1.02) .2s, -webkit-transform .7s cubic-bezier(0, 0.58, 0.53, 1.02) .2s
    }

    .menu--item--will--animated.menu--item--anim--active .st--wrap span.sub--toggle {
        -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%)
    }

    .st--wrap span.sub--toggle.st--plus>span {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background: var(--mainColor);
        -webkit-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out
    }

    .st--wrap span.sub--toggle.st--plus>span:first-child {
        width: 1px;
        height: 100%;
    }

    .st--wrap span.sub--toggle.st--plus>span:last-child {
        width: 100%;
        height: 1px;
    }

    li.menu-item.menu-item-has-children.sub--active>.st--wrap span.sub--toggle.st--plus>span:first-child {
        -webkit-transform: translate(-50%, -50%) rotate(90deg);
        -ms-transform: translate(-50%, -50%) rotate(90deg);
        transform: translate(-50%, -50%) rotate(90deg);
    }

    ul.menu.menu--indexed li::before {
        content: '(' attr(data-index)')';
        color: var(--secondaryColor);
        display: inline-block;
        font-size: 1rem;
        vertical-align: top;
        margin-right: 0.5em;
        float: left;
        line-height: 1;
    }

    .menu--toggle.toggle--text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        gap: 5px;
        width: auto;
        height: auto;
        justify-content: flex-start;
    }

    .menu--toggle.toggle--text.framed::after {
        content: "]";
    }

    .menu--toggle.toggle--text.framed::before {
        content: "[";
    }

    .menu--toggle.toggle--text.framed::after,
    .menu--toggle.toggle--text.framed::before {
        font-size: 15px;
        line-height: 1;
    }

    .menu--toggle.toggle--text .toggle--text--wrapper {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        height: 1em;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        font-size: inherit;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        overflow: hidden;
        cursor: pointer;
    }

    .menu--toggle.toggle--plus--text>div>span,
    .menu--toggle.toggle--text>div>span {
        -webkit-transition: -webkit-transform .4s ease-in-out;
        transition: -webkit-transform .4s ease-in-out;
        -o-transition: transform .4s ease-in-out;
        transition: transform .4s ease-in-out;
        transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
    }

    .menu--toggle.toggle--text.active>div>span {
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
    }


    .has--bg .menu--toggle.toggle--plus--text,
    .has--bg .menu--toggle.toggle--text {
        --radius: 7.5px
    }

    .has--bg .menu--toggle.toggle--plus--text,
    .has--bg .menu--toggle.toggle--text {
        padding: 0.5em 1em;
        height: 2.4em;
        background: var(--secondaryBackground);
    }

    .has--bg.has--hover .menu--toggle {
        -webkit-transition: color .4s ease;
        -o-transition: color .4s ease;
        transition: color .4s ease
    }

    .has--backdrop .menu--toggle {
        backdrop-filter: blur(var(--backdropBlur));
    }

    .has--bg.has--hover .menu--toggle:hover {
        color: var(--mainBackground)
    }

    .has--bg.has--hover .menu--toggle:hover svg {
        fill: var(--mainBackground)
    }

    .nav--blocks {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        z-index: -6;
        height: 100vh;
        overflow: hidden;
        visibility: hidden;
    }

    .nav--blocks>span {
        background: var(--secondaryBackground);
        position: absolute;
        display: inline-block;
        left: 0;
        width: calc(100vw / var(--grid) + 1px);
        height: 0vh;
        -webkit-transform: translateX(calc((100vw / var(--grid)) * var(--index)));
        -ms-transform: translateX(calc((100vw / var(--grid)) * var(--index)));
        transform: translateX(calc((100vw / var(--grid)) * var(--index)));
        top: 0;
    }

    .site--nav.nav--fullscreen.overlay--blocks .site--menu>div>div {
        background: transparent !important;
    }

    .site--nav.nav--fullscreen.overlay--blocks .site--menu {
        height: 100vh;
        visibility: hidden;
    }


    .site--nav.nav--fullscreen.overlay--overlay span.nav_bg_opacity {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 0;
        background: black;
        z-index: -99;
        opacity: 0;
        -webkit-transition: all 1s cubic-bezier(1, 0.03, 0.13, 1.01);
        -o-transition: all 1s cubic-bezier(1, 0.03, 0.13, 1.01);
        transition: all 1s cubic-bezier(1, 0.03, 0.13, 1.01)
    }

    .site--nav.nav--fullscreen.overlay--overlay.site--nav:has(.menu--toggle.active) span.nav_bg_opacity {
        opacity: .5;
        height: 100vh;
    }


    /** Number Counter
      ------------------------------ */
    .pe--number--counter {
        display: flex;
        font-size: var(--fontSize);
        font-weight: 400;
        letter-spacing: -0.06em;
        line-height: 1;
        overflow: hidden;
        --fontSize: 50px;
    }

    .counter--numbers--wrap {
        display: flex;
        font-size: var(--fontSize) !important;
    }

    .pe--number--counter.pe--styled--object {
        --radius: 0;
    }

    span.count--inner {
        display: flex;
        flex-direction: column;
        height: fit-content;
        overflow: hidden;
        align-items: end;
    }

    .pe--number--counter span.count--inner:last-child {
        letter-spacing: 0;
    }

    .counter--animated .number--count {
        display: flex;
        align-items: start;
        height: 1em;
        overflow: hidden;
    }

    .counter--animated span.count--inner>span {
        line-height: 1;
    }

    .counter--animated .pe--number--counter {
        align-items: center;
    }

    .counter--animated .pe--number--counter span.counter--fix {
        transform: translateY(var(--fontSize));
        display: inline-block;
        padding: 0 0.15em;
    }

    .pe--number--counter .counter--caption p {
        margin: 0;
        letter-spacing: normal;
        line-height: 1.6;
        color: var(--secondaryColor)
    }

    .pe--number--counter:has(.counter--caption) {
        flex-direction: column;
    }

    .counter--multi .counter--numbers--wrap {
        flex-direction: column;
        align-items: start;
        justify-content: start;
    }

    .counter--multi .counter--numbers--wrap .number--count {
        display: flex;

    }

    .counter--multi .counter--numbers--wrap p.counter--caption {
        margin: 0;
        display: flex;
        flex-direction: column;
        height: 1em;
        overflow: hidden;
        line-height: 1;
        text-align: left;
        letter-spacing: normal;
    }

    .counter--multi .counter--numbers--wrap p.counter--caption .counter--captions--wrap {
        display: flex;
        flex-direction: column;
        height: fit-content;
    }

    /* Project Fields  */

    .zeyna--project--field .field--content:has(.meta--seperate) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .zeyna--project--field .field--content:has(.meta--seperate)>.meta--seperate {
        width: fit-content;
    }

    span.pe--styled--object.meta--seperate {
        border-style: solid;
        padding: 0.75em 1.5em;
    }

    .zeyna--project--field.is--multiple>* {
        display: flex;
        flex-direction: row;
        gap: 0.5em;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    .counter--multi .counter--numbers--wrap .number--count .counter--prefix:not(:has(*)),
    .counter--multi .counter--numbers--wrap .number--count .counter--suffix:not(:has(*)) {
        display: none !important;
    }

    .counter--multi .counter--numbers--wrap .number--count .counter--prefix,
    .counter--multi .counter--numbers--wrap .number--count .counter--suffix {
        display: flex;
        flex-direction: column;
        height: 1em;
        overflow: hidden;
        width: 1em;
        text-align: center;
        align-items: center;
    }

    .counter--multi .counter--numbers--wrap .number--count .counter--prefix>span,
    .counter--multi .counter--numbers--wrap .number--count .counter--suffix span {
        display: block;
        line-height: 1;
        position: absolute;
        transform: translateY(1.5em);
    }

    .counter--multi .counter--numbers--wrap .number--count .counter--prefix {
        align-items: end;
    }

    .counter--multi .counter--numbers--wrap .number--count .counter--suffix {
        align-items: start;
    }

    .text-wrapper.zeyna--project--field span {
        /* display: inline-block; */
        /* line-height: 1; */
        /* vertical-align: middle; */
    }

    .field--empty.elementor-widget-peprojectfield {
        display: none;
    }

    /** Text Wrapper
      ------------------------------ */


    @keyframes gradientMove {
        0% {
            background-position: 0% 50%;
        }

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

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

    .text--mask {
        width: 1px;
        height: 1px;
        transform: translate(50vw, 50vh);

    }

    .text--video--wrap {
        height: 100vh;
        position: absolute;
        background-color: transparent;
        z-index: 2;
        width: 100vw;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    span.me--slide-right,
    span.me--slide-left {
        overflow: hidden;
    }

    span.inserted--ls--hold,
    span.inner--video,
    span.inner--icon,
    span.inner--image {
        display: inline-block;
        height: 100%;
        width: 1em;
        vertical-align: middle;
        line-height: 1em;
        color: var(--color);
        fill: var(--color);
        overflow: hidden;
        margin-top: -0.15em;
        --pe-rotate: 0deg;
        --pe-scale: 1;
        --pe-translate-x: 0%;
    }

    span.inner--icon i {
        font-size: inherit;
    }

    .use--sec--color span.inserted--ls--hold,
    .use--sec--color span.inner--video,
    .use--sec--color span.inner--icon,
    .use--sec--color span.inner--image {
        --color: var(--secondaryColor)
    }

    .text-wrapper:not(.zeyna--project--field) span.inner--icon:has(>svg) {
        width: 1em;
        height: auto;
        line-height: 0;
    }

    span.inner--video {
        margin-top: 0;
        width: auto;
    }


    .text-wrapper:not(.zeyna--project--field) span.inserted--sup--text {
        font-size: 0.3em;
    }

    .text-wrapper .element--absolute {
        position: absolute;
    }

    .text-wrapper .absolute--wrap {
        position: relative;
        display: inline-block;
    }

    [data-animate="true"] .inserted--element.element--absolute {
        opacity: 0;
        transition: all 1s ease;
    }

    [data-animate="true"].anim_start .inserted--element.element--absolute {
        opacity: 1;
    }

    .text-wrapper:has(.element--absolute) {
        position: relative;
        width: auto;
    }

    span.inserted--sup--text {
        letter-spacing: normal;
        display: inline-block;
        line-height: 1;
        vertical-align: top;
        color: var(--secondaryColor);
    }

    span.inserted--ls--hold {
        position: relative;
        z-index: 99;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-line-pack: center;
        align-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: auto;
        min-height: 1em;
    }

    .text-wrapper:not(.zeyna--project--field) span.inserted--ls--hold>span {
        /* position: absolute; */
        /* top: 0.15em;
        left: 0;
        width: 100%;
        height: 100%; */
        /* transform: translate(-50%, -50%); */
    }

    span.field--label {
        color: var(--secondaryColor);
    }

    span.inserted--ls--hold .pe-video,
    span.inserted--ls--hold .pe-video .plyr--video,
    span.inserted--ls--hold .pe-video .plyr__video-wrapper {
        height: 100% !important;
        width: 100% !important;
    }

    span.inserted--ls--hold .pe-video video {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center;
        object-position: center
    }

    span.inner--video {
        width: auto;
        height: auto;
        position: relative;
    }

    span.inner--icon svg path {
        /* fill: var(--color); */
    }


    span.inner--image img {
        width: 100%;
        height: 100% !important;
        -o-object-fit: contain;
        object-fit: cover;
        display: block;
    }

    span.inner--icon svg {
        width: 1em;
        height: auto;
        /* fill: var(--mainColor) */
    }

    span.inner--icon svg * {
        /* fill: var(--mainColor) */
    }

    .inserted--element,
    .inserted--ls--hold,
    span.inner--element {
        --pe-rotate: 0deg;
        --pe-scale: 0;
        --pe-translate-y: 0px;
        --pe-translate-x: 0px;
        background-color: var(--element--bg);
        display: inline-block;
        -webkit-transform: rotate(var(--pe-rotate)) scale(var(--pe-scale)) translateY(var(--pe-translate-y)) translateX(var(--pe-translate-x));
        -ms-transform: rotate(var(--pe-rotate)) scale(var(--pe-scale)) translateY(var(--pe-translate-y)) translateX(var(--pe-translate-x));
        transform: rotate(var(--pe-rotate)) scale(var(--pe-scale)) translateY(var(--pe-translate-y)) translateX(var(--pe-translate-x));
        border-radius: var(--bRadius);
        padding: var(--pPadding);
        /* border-style: var(--border-style);
        border-width: var(--border-width); */
        text-indent: 0;
    }

    .inserted--element.sec--color,
    .inserted--ls--hold.sec--color,
    span.inner--element.sec--color {
        color: var(--secondaryColor);
    }


    span.inner--element:has(.anim_word) {
        background: transparent;
        padding: 0 !important;
        border-radius: 0px !important;
        border-style: none;
        border-width: 0;
    }

    span.inner--element:has(.anim_word) .anim_char>span,
    span.inner--element:has(.anim_word) .anim_word>span:not(.anim_char) {
        background: var(--element--bg);
        border-radius: var(--bRadius);
        padding: var(--pPadding);
        border-style: var(--border-style);
        border-width: var(--border-width);
    }

    span.underlined {
        position: relative;
        --lineWidth: 100%;
    }

    span.underlined::after {
        content: '';
        position: absolute;
        bottom: 0.1em;
        left: 0;
        width: var(--lineWidth);
        height: 0.1em;
        background: var(--color);
        z-index: -1;
    }

    .elementor-widget-pepostfield .text-wrapper.has--bg a {
        background: var(--mainColor);
        border-radius: 35px;
        color: var(--mainBackground);
        padding: 10px 25px;
    }


    .ls--invert {
        -webkit-transition: -webkit-filter .4s ease;
        transition: -webkit-filter .4s ease;
        -o-transition: filter .4s ease;
        transition: filter .4s ease;
        transition: filter .4s ease, -webkit-filter .4s ease;
    }

    .ls--default--revert {
        -webkit-filter: revert;
        filter: revert;
    }

    .ls--default--invert {
        -webkit-filter: invert(1);
        filter: invert(1);
    }

    .layout--switched .ls--invert {
        -webkit-filter: invert(1);
        filter: invert(1);
    }

    .layout--switched .ls--revert {
        -webkit-filter: revert;
        filter: revert;
    }



    .use--sec--color .text-wrapper,
    .use--sec--color a,
    .use--sec--color {
        color: var(--secondaryColor);
    }

    .white--space--no--wrap .text-wrapper {
        white-space: nowrap;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }

    /* Text Hover Effects  */

    /* ////// Text Hovers  */

    span[data-text-hover]::after,
    span[data-text-hover]>span {
        display: inline-block;
        line-height: inherit;
        transition: all .3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    span[data-text-hover] {
        position: relative;
        line-height: inherit;
        display: inline-block;
        --pTop: 0px;
        --pLeft: 0px;
        --pBottoom: 0px;
        --pRight: 0px;
    }

    .pe--styled--object span[data-icon-hover],
    .pe--styled--object span[data-text-hover] {
        --pTop: var(--paddingTop);
        --pLeft: var(--paddingLeft);
        --pBottom: var(--paddingBottom);
        --pRight: var(--paddingRight);
    }

    span[data-text-hover=slide-down]::after,
    span[data-text-hover=slide-up]::after,
    span[data-text-hover=slide-left]::after,
    span[data-text-hover=slide-right]::after {
        content: attr(data-text);
        position: absolute;
        transition: all .3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        white-space: nowrap;
    }

    span[data-text-hover=slide-up]::after {
        top: calc(100% + var(--pTop));
        left: 0;
    }

    span[data-text-hover=slide-down]::after {
        top: calc(-100% - var(--pBottom));
        ;
        left: 0;
    }

    .pe--hover--trigger:hover span[data-text-hover=slide-down]::after,
    .pe--hover--trigger:hover span[data-text-hover=slide-down]>span,
    span[data-text-hover=slide-down]:hover::after,
    span[data-text-hover=slide-down]:hover>span {
        transform: translateY(calc(100% + var(--pBottom)));
    }

    .pe--hover--trigger:hover span[data-text-hover=slide-up]::after,
    .pe--hover--trigger:hover span[data-text-hover=slide-up]>span,
    span[data-text-hover=slide-up]:hover::after,
    span[data-text-hover=slide-up]:hover>span {
        transform: translateY(calc(-100% - var(--pTop)));
    }

    span[data-text-hover=slide-left]::after {
        top: 0;
        left: calc(100% + var(--pLeft));
        transition: all .3s cubic-bezier(1, 0.03, 0, 0.97)
    }

    span[data-text-hover=slide-right]::after {
        top: 0;
        right: calc(100% + var(--pRight));
        transition: all .3s cubic-bezier(1, 0.03, 0, 0.97)
    }

    span[data-text-hover=slide-right]>span,
    span[data-text-hover=slide-left]>span {
        transition: all .3s cubic-bezier(1, 0.03, 0, 0.97)
    }


    .pe--hover--trigger:hover span[data-text-hover=slide-left]::after,
    .pe--hover--trigger:hover span[data-text-hover=slide-left]>span,
    span[data-text-hover=slide-left]:hover::after,
    span[data-text-hover=slide-left]:hover>span {
        transform: translateX(calc(-100% - var(--pLeft)));
    }


    .pe--hover--trigger:hover span[data-text-hover=slide-right]::after,
    .pe--hover--trigger:hover span[data-text-hover=slide-right]>span,
    span[data-text-hover=slide-right]:hover::after,
    span[data-text-hover=slide-right]:hover>span {
        transform: translateX(calc(100% + var(--pRight)));
    }

    span[data-text-hover] .text--chars--wrap {
        position: absolute;
    }

    span[data-text-hover=chars-up],
    span[data-text-hover=chars-down],
    span[data-text-hover=chars-left],
    span[data-text-hover=chars-right] {
        overflow: hidden
    }

    span[data-text-hover=chars-up] .text--chars--wrap {
        left: 0;
        top: 100%;
    }

    span[data-text-hover=chars-up] span.text_char {
        display: inline-block !important;
        transition: transform .3s ease;
        transition-delay: calc(0.02s * var(--c));
    }

    .pe--hover--trigger:hover span[data-text-hover=chars-up] span.text_char,
    span[data-text-hover=chars-up]:hover span.text_char {
        transform: translateY(-100%);
    }

    span[data-text-hover=chars-down] .text--chars--wrap {
        position: absolute;
        left: 0;
        top: -100%;
    }

    span[data-text-hover=chars-down] span.text_char {
        display: inline-block !important;
        transition: transform .3s ease;
        transition-delay: calc(0.02s * var(--c));
    }

    .pe--hover--trigger:hover span[data-text-hover=chars-down] span.text_char,
    span[data-text-hover=chars-down]:hover span.text_char {
        transform: translateY(100%);
    }

    span[data-text-hover=chars-right] .text--chars--wrap,
    span[data-text-hover=chars-left] .text--chars--wrap {
        top: 0;
        --l: 12;
        --length: calc(var(--l)* 0.01s);
        left: 0;
    }

    span[data-text-hover=chars-right] span.text_char,
    span[data-text-hover=chars-left] span.text_char {
        display: inline-block !important;
    }

    span[data-text-hover=chars-left] .text--chars--wrap>span {
        transform: translateX(1em);
        opacity: 0;
    }

    span[data-text-hover=chars-right] .text--chars--wrap>span {
        transform: translateX(-1em);
        opacity: 0;
    }

    span[data-text-hover=chars-right] span.text_char,
    span[data-text-hover=chars-left] span.text_char {
        transition: all 0.3s cubic-bezier(0.79, 0.04, 0.31, 1);
        transition-delay: calc(0.02s * var(--c));
    }


    .pe--hover--trigger:hover span[data-text-hover=chars-left] span.text_char,
    span[data-text-hover=chars-left]:hover span.text_char {
        transform: translateX(0em);
        opacity: 1
    }


    .pe--hover--trigger:hover span[data-text-hover=chars-left] span:not(.text--chars--wrap) span.text_char,
    span[data-text-hover=chars-left]:hover span:not(.text--chars--wrap) span.text_char {
        transform: translateX(-1em);
        opacity: 0
    }


    .pe--hover--trigger:hover span[data-text-hover=chars-right] span.text_char,
    span[data-text-hover=chars-right]:hover span.text_char {
        transform: translateX(0em);
        opacity: 1
    }

    .pe--hover--trigger:hover span[data-text-hover=chars-right] span:not(.text--chars--wrap) span.text_char,
    span[data-text-hover=chars-right]:hover span:not(.text--chars--wrap) span.text_char {
        transform: translateX(1em);
        opacity: 0
    }

    @media only screen and (max-width: 550px) {
        .hide-br-mobile br {
            display: none;
        }

    }

    /** Pe-theme Circle Text
      ------------------------------ */
    .pe-circular-text {
        display: inline-block;
        position: relative;
        z-index: 0;
        --radius: 50%;
        -webkit-transition: color .4s ease;
        -o-transition: color .4s ease;
        transition: color .4s ease;
        --bgBlur: 10px;
    }



    .pe-circular-text .circular-text-content {
        display: block;
        position: absolute;
        height: 450px;
        width: 450px;
    }

    .pe-circular-text .circular-text-wrap {
        display: inline-block;
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        border-radius: 50%;
        position: relative
    }

    .pe-circular-text .circle-char,
    .pe-circular-text .circle-word {
        -webkit-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
        transform-origin: bottom center;
        display: inline-block;
        /*    text-transform: uppercase;*/
        /*    font-size: var(--fontSize);*/
        text-align: center;
        left: 50%;
        height: 50%;
        position: absolute !important;
        width: 20px;
        z-index: 999999;

    }

    .pe-circular-text .circle-word {
        left: 50%;
        top: 0;
        height: 100%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%)
    }

    .pe-circular-text span.material-symbols-outlined {
        font-size: 5px;
        font-variation-settings:
            'FILL' 1,
            'wght' 100,
            'GRAD' 0,
            'opsz' 10
    }

    .pe-circular-text .circular-text-icon span.material-symbols-outlined {
        font-size: 40px;
    }

    .pe-circular-text .circular-text-icon {
        position: absolute !important;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 999999;
        cursor: pointer
    }

    .pe-circular-text .circular-text-icon span {
        font-size: 40px;
        /*    transform: rotate(90deg)*/
    }


    .has--hover .pe-circular-text::before,
    .has--bg .pe-circular-text::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 110%;
        height: 110%;
        border-radius: var(--radius);
        z-index: -1;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background: var(--secondaryBackground);
        z-index: -2;
    }

    .has--hover .pe-circular-text::before {
        width: 0%;
        height: 0%;
        background: var(--mainColor);
        -webkit-transition: all .4s cubic-bezier(0.86, 0, 0.1, 1);
        -o-transition: all .4s cubic-bezier(0.86, 0, 0.1, 1);
        transition: all .4s cubic-bezier(0.86, 0, 0.1, 1);
        z-index: -1;
    }

    .has--hover .pe-circular-text:hover::before {
        width: 110%;
        height: 110%;
    }

    .has--hover .pe-circular-text:hover {
        color: var(--secondaryBackground);
    }

    .has--backdrop .pe-circular-text::after,
    .has--bg.has--backdrop .pe-circular-text::after {
        -webkit-backdrop-filter: blur(var(--bgBlur));
        backdrop-filter: blur(var(--bgBlur));
        background-color: rgba(255, 255, 255, 0.2);
        -webkit-transition: background-color .4s ease;
        -o-transition: background-color .4s ease;
        transition: background-color .4s ease;
    }

    .has--bg.has--backdrop.has--hover .pe-circular-text:hover::after {
        background-color: rgba(255, 255, 255, 1);
    }

    .has--backdrop .pe-circular-text::before {
        display: none;
    }

    /** Pe-theme Circle Text End
      ------------------------------ */
    /** Pe List
      ------------------------------ */
    .pe--list {
        display: block;
    }

    .pe--list ul {
        list-style: none;
        margin-bottom: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        column-gap: 5px;
        list-style-position: inside;
        flex-wrap: wrap;
        row-gap: 1em;
        flex-direction: column;
    }

    .pe--list ul svg {
        width: 1em;
        height: 1em;
        fill: var(--mainColor);
    }

    .pe--list ul li {
        line-height: 1.4;
        margin: 0;
    }

    .pe--list ul li:has(svg) {
        line-height: 1;
        display: block
    }

    .pe--list ul li span.list--icon {
        font-size: 0.9em;
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
        color: var(--secondaryColor);
        line-height: inherit;
        overflow: hidden;
    }

    .pe--list ul li:has(.list--icon) {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 0;
    }


    .pe--list ul li span.list--icon svg {
        fill: var(--secondaryColor)
    }

    .pe--list ul li span.list--caption {
        float: right;
        font-size: 14px;
        color: var(--secondaryColor);
        margin-left: 1em;
        vertical-align: middle;
    }

    .pe--list li.pe--styled--object>a {
        display: flex;
        line-height: 1;
    }


    .pe--list--item--image {
        position: absolute !important;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
        pointer-events: none;
        opacity: 0;
        transition: opacity .3s ease;
        width: 100%;
    }

    .pe--list--item--image img {
        width: 100%;
    }

    .images--style--follow-y .pe--list--item--image {
        left: 50%;
        top: 50%;
    }

    .pe--list--item:hover .pe--list--item--image {
        opacity: 1;
    }

    .pe--list--item:has(.pe--list--item--image):hover {
        z-index: 33;
    }


    .pe--list ul li:has(.list--sub--text, a)>a,
    .pe--list ul li:has(.list--sub--text) {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2rem;
        width: 100%;
        line-height: unset;
    }

    .pe--list ul li:has(.pe--list--item--image) {
        overflow: visible;
    }

    .pe--list ul li:has(.list--sub--text) span.list--sub--text {
        font-size: 1rem;
        letter-spacing: normal;
        width: 20%;
        line-height: 1.6;
    }

    .pe--list ul li:has(.list--sub--text) span.list--main {
        width: 50%;
    }

    @media only screen and (max-width: 550px) {
        .pe--list ul li:has(.list--sub--text) span.list--sub--text {
            width: 100%;

        }

        .pe--list ul li:has(.list--sub--text) span.list--main {
            width: 100%;
        }


    }

    .pe--list:has(.pe--list--images--wrap) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
    }

    .pe--list .pe--list--images--wrap {
        width: 50%;
        position: relative;
    }

    .pe--list:has(.pe--list--images--wrap) ul {
        width: 50%;
    }

    .pe--list .pe--list--images--wrap .pe--list--item--image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .pe--list ul li:last-child a::after {
        display: none !important;
    }

    .hover--font-swap .pe--list ul li:hover {
        font-family: cursive;
        --sec_typo-font-family: inherit;
        --sec_typo-font-size: inherit;
        --sec_typo-line-height: inherit;
        --sec_typo-letter-spacing: inherit;
        --sec_typo-font-weight: inherit;
        --sec_typo-text-transform: inherit;
    }

    /** Pe Hotspot Image
      ------------------------------ */
    .pe--hotspot--image {
        position: relative;

    }

    span.hotspot--marker {
        width: 15px;
        height: 15px;
        display: block;
        background: var(--mainColor);
        border-radius: 50%;
        position: absolute;
        top: 10%;
        left: 10%;
        cursor: pointer;
        z-index: 1;
    }

    div.hotspot--marker {
        position: absolute;
    }

    .hotspot--content {
        position: absolute;
        background: var(--secondaryBackground);
        padding: 1em;
        --radius: 5px;
        border-radius: var(--radius);
        max-width: 300px;
        display: none;
        -webkit-clip-path: inset(0% 0% 100% 100% round var(--radius));
        clip-path: inset(0% 0% 100% 100% round var(--radius));
        -webkit-transition: all .7s cubic-bezier(0.57, 0.02, 0.14, 0.98);
        -o-transition: all .7s cubic-bezier(0.57, 0.02, 0.14, 0.98);
        transition: all .7s cubic-bezier(0.57, 0.02, 0.14, 0.98);
        border-color: var(--linesColor);
        border-width: 1px;
    }

    .hotspot--content .ht--content {
        color: var(--secondaryColor);
        font-size: 14px;
    }

    .hotspot--content.pos--center {
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .hotspot--content.pos--top {
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    .hotspot--content:has(.zeyna--single--product) {
        background: none;
        padding: 0;
        max-width: 250px;
    }

    .hotspot--content.zeyna--single--product {
        width: 300px;
    }

    .pin-on-scroll .hotspot--content {
        -webkit-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

    .always-open .hotspot--content {
        -webkit-clip-path: none !important;
        clip-path: none !important;
    }

    .hotspot--content.top.left {
        -webkit-clip-path: inset(0% 100% 100% 0% round var(--radius));
        clip-path: inset(0% 100% 100% 0% round var(--radius));
    }

    .hotspot--content.bottom.right {
        -webkit-clip-path: inset(100% 0% 0% 100% round var(--radius));
        clip-path: inset(100% 0% 0% 100% round var(--radius));
    }

    .hotspot--content.bottom.left {
        -webkit-clip-path: inset(100% 100% 0% 0% round var(--radius));
        clip-path: inset(100% 100% 0% 0% round var(--radius));
    }

    .hotspot--content.active {
        -webkit-clip-path: inset(0% 0% 0% 0% round var(--radius)) !important;
        clip-path: inset(0% 0% 0% 0% round var(--radius)) !important;
    }


    @-webkit-keyframes markerAnim {
        0% {
            width: calc(100% + 10px);
            height: calc(100% + 10px);
        }

        50% {
            width: calc(100% + 15px);
            height: calc(100% + 15px);
        }

        100% {
            width: calc(100% + 10px);
            height: calc(100% + 10px);
        }
    }


    @keyframes markerAnim {
        0% {
            width: calc(100% + 10px);
            height: calc(100% + 10px);
        }

        50% {
            width: calc(100% + 15px);
            height: calc(100% + 15px);
        }

        100% {
            width: calc(100% + 10px);
            height: calc(100% + 10px);
        }
    }

    span.hotspot--marker::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(100% + 10px);
        height: calc(100% + 10px);
        background: none;
        z-index: 0;
        border-radius: 50%;
        border: 1px solid var(--mainColor);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background: var(--mainColor);
        opacity: .4;
    }

    .animate--marker span.hotspot--marker::after {
        -webkit-animation-name: markerAnim;
        animation-name: markerAnim;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-play-state: running;
        animation-play-state: running;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite
    }

    .pe--hotspot--image img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center;
        object-position: center;
        display: block;
        margin: 0 auto;
    }


    svg.hotspots--line--scene {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    svg.hotspots--line--scene polyline {
        fill: transparent;
        stroke: var(--mainColor);
        stroke-width: 1px;
    }

    .pe--hotspot--image:has(.hotspots--line--scene) .hotspot--content {
        top: 50%;
        left: 50%;
        -webkit-clip-path: none;
        clip-path: none;
        display: block;
        background: #f2f2f2;
        border-radius: 15px;
        padding: 2em;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 20px;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }

    span.hotspot--line--dot {
        display: block;
        width: 30px;
        height: 30px;
        background: var(--secondaryBackground);
        border-radius: 50%;
        position: absolute;
        top: var(--p1y);
        left: var(--p1x);
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        cursor: pointer;
        -webkit-transition: -webkit-transform 1s ease;
        transition: -webkit-transform 1s ease;
        -o-transition: transform 1s ease;
        transition: transform 1s ease;
        transition: transform 1s ease, -webkit-transform 1s ease
    }

    span.hotspot--line--dot.active {
        -webkit-transform: translate(-50%, -50%) rotate(135deg);
        -ms-transform: translate(-50%, -50%) rotate(135deg);
        transform: translate(-50%, -50%) rotate(135deg);
    }

    span.hotspot--line--dot svg {
        fill: var(--mainColor);
    }

    .open-on-scroll .hotspot--content,
    .hover-to-open .hotspot--content,
    .click-to-open .hotspot--content {
        opacity: 0
    }

    .click-to-open .hotspot--content.active {
        opacity: 1;
    }

    .hotspot--close {
        display: none;
    }

    @media only screen and (max-width: 550px) {
        .pe--hotspot--image:has(.hotspots--line--scene) .hotspot--content {
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 90%;
            top: var(--p1y);
            pointer-events: none;
        }

        .hotspots--line--scene {
            display: none;
        }

        .hotspot--content {
            z-index: 99
        }

        .hotspot--close {
            display: block;
            position: absolute;
            top: 0.1em;
            right: 0.1em;
            font-size: 2rem;
            pointer-events: all;
        }

        .hotspot--close svg {
            width: 1em;
            height: 1em;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

    }

    /** Pe Info Box
      ------------------------------ */

    .pe--info--box {
        display: block;
        position: relative;
    }

    .pe--info--box .pe--info--box--wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 2rem;
        border-radius: 7.5px;
        gap: 100px;
        width: 100%;
        height: 100%;
        --backdropBlur: 10px;
        border-color: var(--linesColor);
        border-width: 1px;
        align-items: flex-start;
    }


    .pe--infobox--title {
        max-width: 100%;
    }

    .pe--infobox--wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        height: 100%;
    }

    .pe--info--box p {
        margin: 0;
    }

    .pe--infobox--interest.interest--image {
        border-radius: 5px;
        position: relative;
    }

    .pe--infobox--interest.interest--image img {
        display: block;
        width: 100%;
        height: 100%;
        z-index: 1;
        position: relative;
        -o-object-fit: contain;
        object-fit: contain;
    }

    .pe--infobox--interest.interest--icon {
        font-size: 40px;
        line-height: 1;
    }

    .icon--fill--yes .pe--infobox--interest.interest--icon svg,
    .icon--fill--yes .pe--infobox--interest.interest--icon svg path {
        fill: var(--mainColor);
    }

    .pe--infobox--interest.interest--icon svg {
        width: 1em;
        height: 1em;
        display: block;
        line-height: 1;
    }

    .pe--infobox--content {
        color: var(--secondaryColor);
        width: 100%;
    }

    /** Inner Page Navigation
      ------------------------------ */
    .pe--inner--page--navigation {
        display: block;
        position: relative;
        background: var(--secondaryBackground);
        border-radius: 25px;
    }

    .pe--inner--page--navigation .inner--nav--wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .pe--inner--page--navigation .inner--nav--wrap>div {
        padding: 0.5em 1em;
        cursor: pointer;
    }

    .pe--inner--page--navigation .nav--follower {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 6.5em;
        height: 100%;
        background: var(--mainColor);
        border-radius: 25px;
        z-index: 1;
    }

    .pe--inner--page--navigation .inner--nav--wrap>div {
        position: relative;
        z-index: 2;
        -webkit-transition: color .4s ease-in-out;
        -o-transition: color .4s ease-in-out;
        transition: color .4s ease-in-out;
    }

    .pe--inner--page--navigation .inner--nav--wrap>div.active {
        color: var(--mainBackground);
    }

    .pe--inner--page--navigation .inner--nav--wrap>div.active::before {
        background: var(--mainColor);
    }

    .inner--nav--row .pe--inner--page--navigation .nav--follower {
        width: 100%;
        height: 5.5em;
    }

    .inner--nav--row .pe--inner--page--navigation .inner--nav--wrap>div {
        padding: 1em 0.5em;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
    }

    .inner--nav--simple .pe--inner--page--navigation {
        background: none;
    }

    .inner--nav--simple .pe--inner--page--navigation .nav--follower {
        display: none;
    }

    .inner--nav--simple .inner--nav--element.pe--scroll--button {
        border: 1px solid var(--linesColor);
        border-radius: 10px;
        background: var(--mainBackground);
    }

    .inner--nav--simple .inner--nav--wrap {
        gap: 20px;
    }

    .inner--nav--simple .pe--inner--page--navigation .inner--nav--wrap>div.active {
        background: var(--mainColor);
    }


    .nav--active--underline .pe--inner--page--navigation .inner--nav--wrap>div {
        position: relative;
        padding: 0em 0em;
    }

    .nav--active--underline .pe--inner--page--navigation .inner--nav--wrap>div.active::after {
        content: '';
        display: inline-block;
        width: 100%;
        height: 1px;
        background: var(--mainColor);
        position: absolute;
        bottom: 0em;
        left: 0;
    }

    /** Pe Call To Action
      ------------------------------ */

    .pe--call--to--action.pe--styled--object {
        display: block;
        height: auto;
        padding: 40px;
        width: 100%;
        position: relative;
        overflow: hidden;
        border-style: solid;
        --radius: 25px;
        height: 100%;
    }


    .pe--call--to--action a {
        display: inline-block;
        height: 100%;
        width: 100%;
    }

    .pe--call--to--action a {
        background: transparent;
        -webkit-transition: color .4s ease;
        -o-transition: color .4s ease;
        transition: color .4s ease
    }

    .pe--call--to--action .pe--cta--wrapper {
        display: flex;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        z-index: 3;
        color: var(--mainColor);
        transition: color .4s ease
    }

    .pe--call--to--action .pe--cta--wrapper p {
        margin: 0;
        font: inherit;
    }

    .color--change--true .pe--call--to--action:hover .pe--cta--wrapper {
        --mainColor: var(--switchedMainColor);
        --secondaryColor: var(--switchedSecondaryColor);
        --mainBackground: var(--switchedMainBackground);
        --secondaryBackground: var(--switchedSecondaryBackground);
        --linesColor: var(--switchedLinesColor);
    }

    .pe--call--to--action .cta--background {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .pe--call--to--action .cta--background::before {
        z-index: 2;
    }

    .pe--call--to--action .cta--background img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center;
        object-position: center;
    }

    .pe--call--to--action svg {
        fill: var(--mainColor);
        width: 1em;
        height: 1em;
        line-height: 1;
        display: block;
    }

    .pe--call--to--action .pe--cta--wrapper .cta--element.show-on-hover {
        display: none;
    }

    .pe--call--to--action.hover .pe--cta--wrapper .cta--element.show-on-hover {
        display: block;
    }

    .pe--call--to--action.hover .pe--cta--wrapper .cta--element.hide-on-hover {
        display: none;
    }

    .pe--call--to--action .cta--background.bg--show--on--hover {
        transform: scale(1.1);
        opacity: 0;
        transition: all .5s cubic-bezier(0.56, 0.5, 0, 0.96);
    }

    .pe--call--to--action:hover .cta--background.bg--show--on--hover {
        transform: scale(1);
        opacity: 1;
    }

    .pe--call--to--action .pe--cta--wrapper .cta--element {
        will-change: transform;
        width: auto;
    }

    .pe--call--to--action .pe--cta--wrapper .cta--element.element--image {
        width: 100%
    }

    .pe--call--to--action .pe--cta--wrapper .cta--element img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }


    /** Pe Table
      ------------------------------ */
    .pe--table {
        display: block;
        width: 100%
    }

    .pe--table--wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        overflow: visible;
    }

    .pe--table--wrapper .pe--table--row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 20px 0;
        position: relative;
        transition: all .5s ease;
        white-space: nowrap;
        user-select: none;
        overflow: visible;
    }

    .pe--table--wrapper .pe--table--row:hover {
        padding: 20px;
    }

    .table--background-yes .pe--table--wrapper .pe--table--row {
        background: var(--secondaryBackground)
    }

    .pe--table--row--image {
        position: absolute !important;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
        pointer-events: none;
        opacity: 0;
        transition: opacity .3s ease;
        width: 100%;
    }

    .pe--table--wrapper .pe--table--row:hover .pe--table--row--image {
        opacity: 1;
    }

    .pe--table--wrapper a.pe--table--row {
        cursor: pointer
    }

    .pe--table.table__hover .pe--table--row::before {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        width: calc(100% + 1em);
        height: 00%;
        -webkit-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        background: var(--mainColor);
        z-index: 1;
        top: unset;
    }

    .pe--table.table__hover .pe--table--row:hover::before {
        height: 100%;
    }

    .pe--table.table__hover .pe--table--row:hover span {
        color: var(--mainBackground)
    }

    .pe--table--wrapper .pe--table--row>span {
        width: 100%;
        color: var(--secondaryColor);
        -webkit-transition: color .4s ease;
        -o-transition: color .4s ease;
        transition: color .4s ease;
        position: relative;
        z-index: 2;
    }

    .pe--table--wrapper .pe--table--row>span:last-of-type {
        text-align: right;
        width: 30%;
    }


    .table--underlined-yes .pe--table--wrapper .pe--table--row::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--linesColor);
        opacity: 1;
    }

    .pe--table--wrapper .pe--table--row>span:first-child {
        color: var(--mainColor)
    }

    .pe--table--row.table--title--row span,
    .pe--table--row.table--title--row span:first-child {
        color: var(--mainColor);
    }

    .pe--table--row.table--title--row {
        pointer-events: none
    }

    .pe--table--row.table--title--row::after {
        opacity: .5
    }

    .table--colorized-yes .pe--table--row:nth-child(even) {
        background: var(--secondaryBackground);
    }

    .table--colorized-yes .pe--table--row {
        padding-left: 1rem;
        padding-right: 1rem
    }


    @media only screen and (max-width: 550px) {
        .pe--table--wrapper .pe--table--row>span {
            width: 50%;
            padding: 5px 0;
        }

        .pe--table--wrapper .pe--table--row {
            -ms-flex-wrap: wrap;
            flex-wrap: nowrap;
            white-space: nowrap;
        }

        .pe--table--wrapper .pe--table--row>span:last-of-type,
        .pe--table--wrapper .pe--table--row>span:nth-child(even) {
            width: 50%;
            text-align: right;
        }

    }

    /** Layout Switcher
      ------------------------------ */
    .pe-layout-switcher {
        display: block;
        cursor: pointer
    }

    .pe-layout-switcher .pl--switch {
        width: 40px;
        height: 20px;
        border: 1px solid var(--linesColor);
        border-radius: 50px;
        position: relative;
    }

    .pe-layout-switcher.ls_switcher .pl--switch:has(.pl--default) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: auto;
    }

    .pe-layout-switcher.ls_switcher .pl--switch:has(.pl--default) .pl--follower {
        border-radius: 50px;
        height: calc(100% - 3px);
        width: 60px;
        z-index: 0;
    }

    .pe-layout-switcher.ls_switcher .pl--switch:has(.pl--default) .active {
        color: var(--mainBackground);
        z-index: 2;
    }

    .pe-layout-switcher.ls_switcher .pl--switch:has(.pl--default) .pl--switch--button {
        -webkit-transition: color .3s ease;
        -o-transition: color .3s ease;
        transition: color .3s ease;
        z-index: 3;
        user-select: none;
    }

    .pe-layout-switcher.ls_switcher .pl--switch--button:hover {
        color: var(--mainBackground);
    }

    .pe-layout-switcher.ls_switcher:has(.pl--switch--button:hover) .pl--switch--button:not(:hover) {
        color: var(--mainColor);
    }


    .pe-layout-switcher.ls_switcher .pl--switch:has(.pl--default) span:not(.pl--follower) {
        padding: 0.3em 1em 0.3em 1em;
        font-size: 14px;
    }

    .pe-layout-switcher.ls_switcher .pl--switch:has(.pl--default) .pl--follower {
        -webkit-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

    .pe-layout-switcher .pl--switch .pl--follower {
        width: 40%;
        height: 80%;
        display: block;
        position: absolute;
        left: 2px;
        background: var(--mainColor);
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
        top: 2px;
        transition: all .4s ease-in-out;
    }

    .layout--switched .pe-layout-switcher .pl--switch:not(:has(.pl--switch--button)) .pl--follower {
        left: 50%;
    }

    .pe-layout-switcher.ls_button {
        height: 1em;
        line-height: 1em;
        overflow: hidden;
        font-size: 1em;
        box-sizing: content-box;
    }

    .pe-layout-switcher.ls_button .pl--button {
        display: block;
    }

    .pe-layout-switcher.ls_button .pl--button>span {
        display: block;
        -webkit-transition: -webkit-transform .7s ease-out;
        transition: -webkit-transform .7s ease-out;
        -o-transition: transform .7s ease-out;
        transition: transform .7s ease-out;
        transition: transform .7s ease-out, -webkit-transform .7s ease-out;
    }

    body.layout--switched .pe-layout-switcher.ls_button .pl--button>span {
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    .pe-layout-switcher.ls_button .pl--button>span.pl--switched {
        margin-top: var(--paddingBottom);
    }

    body.layout--switched .pe-layout-switcher.ls_button .pl--button>span.pl--switched {
        transform: translateY(calc(-100% - var(--paddingBottom)));
    }

    body.layout--switched .pe-layout-switcher.ls_button .pl--button>span.pl--default {
        transform: translateY(calc(-100% - var(--paddingBottom)));
    }

    .show--brackets--yes .pe-layout-switcher.ls_button::before {
        content: "[";
        position: absolute;
        left: -0.5em;
    }

    .show--brackets--yes .pe-layout-switcher.ls_button::after {
        content: "]";
        position: absolute;
        right: -0.5em;
        top: 0
    }

    .pe-layout-switcher svg {
        width: 1em;
        height: 1em;
        font-size: 1em;
        fill: var(--mainColor);
        line-height: 1;
        display: block;
    }

    .pe-layout-switcher.ls_button:has(svg) {
        font-size: 1.5rem;
    }

    .pe-layout-switcher.ls_switcher .pl--switch:has(.pl--default) .active svg {
        fill: var(--mainBackground);
        z-index: 2;
    }

    /** Marquee
      ------------------------------ */
    .pe-marquee svg polygon,
    .pe-marquee svg path {
        fill: var(--mainColor);
    }


    .pe-marquee {
        white-space: nowrap;
        display: block;
        will-change: transform;
        gap: 1em;
    }

    .marquee-bg-yes .pe-marquee {
        background: var(--secondaryBackground)
    }

    .pe-marquee .md-title:before {
        display: none !important
    }

    .pe-marquee .md-title {
        margin-top: 0;
        display: inline-block;
    }

    .pe-marquee i {
        font-size: 0.7em;
        vertical-align: middle;
        margin: 0;
        padding: 0 70px;
    }

    .pe-marquee .marquee-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        float: left;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1em;
    }

    .pe-marquee .marquee-wrap>div>* {
        display: inline-block
    }

    .pe-marquee .marquee-wrap>* {
        margin-bottom: 0
    }

    .pe-marquee .marquee-wrap .seperator {
        line-height: 1 !important;
        line-height: 1.5em;
        vertical-align: text-bottom;
        height: 100%;
        margin: 0 10px;
        color: var(--secondaryColor);
    }

    .pe-marquee .marquee-wrap .seperator svg,
    .pe-marquee .marquee-wrap .seperator svg>* {
        width: 100%;
        fill: var(--secondaryColor) !important;
        width: 1em;
        height: 1em;
    }

    .pe-marquee .marquee-wrap .seperator svg rect,
    .pe-marquee .marquee-wrap .seperator svg path {
        fill: var(--mainColor);
    }

    .pe-marquee .marquee-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .pe-marquee .seperator {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .pe-marquee .seperator img {
        width: 100%
    }


    /** Single Image
      ------------------------------ */

    .single-image.si--overlayed::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--overlayColor);
    }

    .elementor-widget-pesingleimage {
        width: 100%
    }

    .single-image {
        display: block;
        width: 100%;
        height: auto;
        margin-bottom: 0;
    }

    .single-image[data-anim-image=true] {
        overflow: hidden;
    }

    .single-image[data-anim-image=true] {
        visibility: hidden;
    }

    .reveal--start .single-image[data-anim-image=true].anim_start,
    .single-image[data-anim-image=true].anim_start {
        visibility: visible;
    }

    .single-image.parallax--image {
        overflow: hidden
    }

    .single-image a {
        display: block !important;
    }

    .single-image img {
        width: 100%;
        display: block;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: var(--radius);
    }

    /* Image Hover Effects  */

    div[data-image-hover]>img {
        transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform, filter
    }

    div[data-image-hover=zoom-in]>img {
        transform: scale(1);
    }

    .barba--running div[data-image-hover=zoom-in].project--image>img,
    .pe--hover--trigger:hover div[data-image-hover=zoom-in]>img,
    div[data-image-hover=zoom-in]:not(.has--trigger):hover>img {
        transform: scale(1.1);
    }

    div[data-image-hover=zoom-out]>img {
        transform: scale(1.1);
    }

    .barba--running div[data-image-hover=zoom-out].project--image>img,
    .pe--hover--trigger:hover div[data-image-hover=zoom-out]>img,
    div[data-image-hover=zoom-out]:not(.has--trigger):hover>img {
        transform: scale(1);
    }


    div[data-image-hover=filter-out]>img {
        filter: grayscale(1);
    }

    .barba--running div[data-image-hover=filter-out].project--image>img,
    .pe--hover--trigger:hover div[data-image-hover=filter-out]>img,
    div[data-image-hover=filter-out]:not(.has--trigger):hover>img {
        filter: none !important
    }


    div[data-image-hover=filter-in]>img {
        filter: none;
    }


    .barba--running div[data-image-hover=filter-in].project--image>img,
    .pe--hover--trigger:hover div[data-image-hover=filter-in]>img,
    div[data-image-hover=filter-in]:not(.has--trigger):hover>img {
        filter: grayscale(1)
    }

    div[data-image-hover=overlay-out]::after,
    div[data-image-hover=overlay-in]::after {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 44;
        background: #000000;
        background: linear-gradient(0deg, rgb(0 0 0 / 59%) 0%, rgba(255, 255, 255, 0) 100%);
        transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    div[data-image-hover=overlay-in]::before {
        opacity: 0;
    }

    .pe--hover--trigger:hover div[data-image-hover=overlay-in]::after,
    div[data-image-hover=overlay-in]:not(.has--trigger):hover::after {
        opacity: 1;
    }

    .pe--hover--trigger:hover div[data-image-hover=overlay-out]::after,
    div[data-image-hover=overlay-out]:not(.has--trigger):hover::after {
        opacity: 0;
    }


    /* Zoomed Image */
    .single-image.zoomed--image.zoom--horizontal {
        height: 100vh;
        max-height: 100vh;
        position: relative;
        white-space: nowrap;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        gap: 100px;
    }

    .single-image.zoomed--image .single--image--wrapper {
        height: 500px;
    }

    .single-image.zoomed--image>div {
        display: inline-block;
        width: 33.333333333%;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        overflow: hidden;
        ;
    }

    .single-image.zoomed--image img {
        -o-object-fit: cover;
        object-fit: cover;
        height: 100%;
        -o-object-position: center;
        object-position: center
    }

    .single-image.zoomed--image .zoomed {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 999
    }

    @media only screen and (max-width: 550px) {

        .single-image.zoomed--image>div.zoomed--before,
        .single-image.zoomed--image>div.zoomed--after {
            display: none;
        }

        .single-image.zoomed--image .zoomed {
            width: 80%;
        }

    }


    .elementor-25 .elementor-element.elementor-element-bc2da3f {
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }

    /* ## Text Animations
    =================================================*/

    .text-wrapper {
        overflow-wrap: anywhere;
        --color: var(--mainColor);
        color: var(--color);
        border-radius: var(--radius);
        border-color: var(--linesColor);
        border-width: 1px;
        --radius: 0;
        --indent: 0;
        --anim--letter--spacing: 0;
    }

    .text-wrapper [data-animate=true] {
        padding-right: calc(-1 * var(--anim--letter--spacing));
    }

    .text-wrapper [data-animate=true] span.anim_line,
    .text-wrapper [data-animate=true] span.anim_word,
    .text-wrapper [data-animate=true] span.anim_char {
        padding-right: calc(-1 * var(--anim--letter--spacing));
        margin-right: var(--anim--letter--spacing);
    }

    .text-wrapper [data-animate=true],
    .text-wrapper [data-animate=true] span.anim_line,
    .text-wrapper [data-animate=true] span.anim_char,
    .text-wrapper [data-animate=true] span.anim_word {
        margin-bottom: -6px;
        padding-bottom: 6px;
    }

    .text-wrapper:not(.zeyna--project--field) [data-animate=true] span.inner--icon:has(>svg),
    .text-wrapper [data-animate=true] .inserted--element {
        width: 0;
        visibility: hidden;
    }


    span.anim_word:last-child {
        padding-right: calc(-1 * var(--anim--letter--spacing));
        /* margin-right: var(--anim--letter--spacing); */
    }

    .text--overlay .text-wrapper {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .has--bg>.elementor-widget-container>.text-wrapper {
        background: var(--secondaryBackground);
    }

    .has--backdrop>.elementor-widget-container>.text-wrapper {
        -webkit-backdrop-filter: blur(var(--backdropBlur));
        backdrop-filter: blur(var(--backdropBlur));
    }



    *[data-anim-general="true"],
    *[data-animate="true"] {
        visibility: hidden;
    }

    .elementor-editor-active *[data-anim-general="true"],
    .elementor-editor-active *[data-animate="true"],
    .reveal--start *[data-anim-general="true"],
    .reveal--start *[data-animate="true"],
    .scrubbed__true *[data-anim-general="true"],
    .pinned__true *[data-anim-general="true"],
    *[data-anim-general="true"].anim_start,
    *[data-animate="true"].anim_scrubbed,
    *[data-animate="true"].anim_start {
        visibility: visible;
    }

    .elementor-element[data-anim-general=true] {
        transition: none;
    }

    *[data-animate="true"].pinned__true,
    *[data-animate="true"].scrubbed__true,
    *[data-anim-general="true"].pinned__true,
    *[data-anim-general="true"].scrubbed__true {
        visibility: visible
    }

    .text-wrapper>p[data-animate="true"] .anim_word:first-child>.anim_char:first-child span,
    .text-wrapper>p[data-animate="true"] .anim_word:first-child span>div:first-child,
    .text-wrapper>p[data-animate="true"] .anim_line:first-child,
    .text-wrapper>p:not([data-animate="true"]) {
        text-indent: var(--indent);
    }

    .text-wrapper .inserted--sup--text {
        text-indent: 0;

    }

    .text-wrapper [data-animate=true] .inserted--sup--text {
        white-space: nowrap;
        flex-wrap: nowrap;
        flex-direction: row;
        gap: 0.25em;
    }

    span.inserted--sup--text.inserted--ls--hold.false.elementor-repeater-item-f33b3bd {}


    .has-anim-text {
        -webkit-font-kerning: none;
        font-kerning: none;
        -webkit-text-rendering: optimizeSpeed;
        text-rendering: optimizeSpeed;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 0;
    }


    .text-wrapper span.dynamic {
        display: inline-block;
        height: 1em;
        padding-right: 0.1em;
        overflow: visible;
    }

    .text-wrapper span.dynamic .hidden {
        opacity: 0;
    }

    .text-wrapper span.dynamic,
    .tt {
        height: 1.1em;
    }

    .text-wrapper span.dynamic {
        overflow: hidden;
        padding-bottom: 0.09em;
        margin-bottom: -0.09em;
        height: auto;
    }

    .text-stroke-yes .text-wrapper {
        -webkit-text-stroke: 1px var(--linesColor);
        color: transparent;
    }

    span.sec-texts {
        position: absolute;
        text-align: left
    }

    #site-navigation.fullscreen_menu .has-anim-text {
        opacity: 1;
    }

    .has-anim-text.anim_start {
        opacity: 1
    }

    .anim_char,
    .anim_word,
    .anim_line {
        overflow: hidden;
        vertical-align: top;
        will-change: transform;
        display: inline-block;
        position: relative;
        will-change: transform;
    }

    .text--anim--fade-true .anim_char,
    .text--anim--fade-true .anim_word,
    .text--anim--fade-true .anim_line {
        overflow: visible;
    }

    .text-wrapper:has(.inserted--ls--hold) .anim_char,
    .text-wrapper:has(.inserted--ls--hold) .anim_word,
    .text-wrapper:has(.inserted--ls--hold) .anim_line {
        vertical-align: middle;
        overflow: hidden;
    }

    .inserted--ls--hold .anim_word {
        display: block;
        vertical-align: auto;
    }

    .inserted--ls--hold .anim_word span {
        width: fit-content;
        height: fit-content;
        display: block;
    }


    .text-h1.big-title .anim_word .anim_char:last-child {
        padding-right: 0.1em;
    }

    .text-h1 .anim_line,
    .text-h1 .anim_char,
    .text-h1 .anim_word {
        padding-right: 0.055em;
        margin-right: -0.055em;
        padding-bottom: 0.08em;
        margin-bottom: -0.08em;
    }

    .text-wrapper .no-margin .anim_line {
        margin: 0;
        padding: 0
    }

    .anim_word {
        white-space: nowrap;

    }

    .anim_char span,
    .anim_word span,
    .anim_line span {
        display: inline-block;
        will-change: transform;
    }

    .text--align--justify .anim_line>span {
        width: 100%;
        text-align-last: justify;
    }


    .fade .anim_char,
    .fade .anim_word,
    .fade .anim_line {
        overflow: visible
    }

    .mask-wrap {
        display: block;
        position: relative
    }

    .mask-wrap .clone {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .charsScaleUp .anim_char span {
        -webkit-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
        transform-origin: bottom center
    }

    .charsScaleDown .anim_char span {
        -webkit-transform-origin: top center;
        -ms-transform-origin: top center;
        transform-origin: top center
    }

    .charsRotateIn .anim_char span {
        -webkit-transform-origin: top;
        -ms-transform-origin: top;
        transform-origin: top
    }

    *[data-animation="linesMask"] .anim_line span.clone {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        width: 100%;
        z-index: 0;
        white-space: nowrap;
        opacity: .2;
    }

    *[data-animation="linesMask"] .anim_line:first-child span.clone {
        left: var(--indent);
    }

    *[data-animation="linesMask"] .anim_line span {
        width: 0%;
        overflow: hidden;
        white-space: nowrap;
        line-height: 1;
    }

    .has-anim-text.slideLeft,
    .has-anim-text.slideRight,
    .has-anim-text.slideLeft .anim_line,
    .has-anim-text.slideRight .anim_line {
        white-space: nowrap;
        overflow: visible;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }

    .slideLeft .anim_line,
    .slideRight .anim_line {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }

    .charsFadeOn .anim_char {
        will-change: opacity
    }

    h1.has-anim-text .anim_char,
    .text-h1.has-anim-text .anim_char {
        overflow: hidden;
        padding-right: 0.05em;
        margin-right: -0.05em;
    }

    span.pe-dynamic-words {
        line-height: 1.3em;
        display: inline-block;
        overflow: hidden;
        height: 1.3em;
        white-space: nowrap;
        color: var(--color);
        vertical-align: bottom;
    }

    span.pe-dynamic-words.dyno--write::after {
        content: "|";
        animation: typewriteHold 1s ease-in-out infinite;
    }

    @keyframes typewriteHold {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }
    }

    span.pe-dynamic-words>span {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    span.pe-dynamic-words>span>span {
        display: inline-block;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }

    .dynamic--highlight--active span.pe-dynamic-words>span>span {
        transition: opacity .4s ease
    }

    .dynamic--highlight--active:has(.active) span.pe-dynamic-words>span>span:not(.active) {
        opacity: .25
    }

    .has-anim-text span,
    .has-anim-text a {
        display: inline-block;
    }

    /*
    span.pe-dynamic-words > span > span:not(:first-child) {
        display: none;
    }
    */
    /* .anim-multiple[data-anim-general="true"] .inner--anim {
        visibility: hidden;
    }
 */
    /* .anim-multiple[data-anim-general="true"].anim_start .inner--anim {
        visibility: visible;
    } */


    .inner--icon.draw--svg svg {
        visibility: hidden;
    }

    .inner--icon.draw--svg.draw--start svg {
        visibility: visible
    }

    [data-animation=wordsJustifyExpand]>.anim_line {
        display: flex !important;
        flex-direction: row;
        justify-content: center;
        transition: all .4s ease
    }

    [data-animation=wordsJustifyCollapse]>.anim_line {
        display: flex !important;
        flex-direction: row;
        justify-content: space-between;
        transition: all .4s ease
    }

    .words--just--switch[data-animation=wordsJustifyExpand]>.anim_line {
        justify-content: space-between;
    }

    .words--just--switch[data-animation=wordsJustifyCollapse]>.anim_line {
        justify-content: center;
        gap: 0.25em
    }


    /* ## Image Animations
    =================================================*/

    .elementor-widget-container.anim--parent {
        -webkit-transition: none;
        -o-transition: none;
        transition: none
    }

    .single-image[data-animation=block]::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: var(--blWidth);
        height: var(--blHeight);
        background: var(--secondaryBackground);
        z-index: 9;
    }

    .single-image[data-animation=block] {
        --blWidth: 100%;
        --blHeight: 100%;
    }

    .single-image[data-animation-direction=down]::after {
        top: unset;
        bottom: 0;
    }


    .single-image[data-animation-direction=right]::after {
        left: unset;
        right: 0;
    }


    /** Clients
      ------------------------------ */
    .elementor-widget-peclients .elementor-widget-container {
        overflow: hidden;
        width: 100%;
    }

    .elementor-widget-peclients {
        width: 100%;
    }

    .pe--clients {
        display: block;
        width: 100%;
        float: left;
        overflow: hidden;
        --fade--color: var(--mainBackground)
    }

    .fade--edges .pe--clients.pe--clients--carousel::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, var(--fade--color) 10%, rgba(255, 255, 255, 0.01) 50%);
        z-index: 2;
    }

    .fade--edges .pe--clients.pe--clients--carousel::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.01) 50%, var(--fade--color) 90%);
        z-index: 2;
    }


    /* Clients Grid */
    .pe--clients.pe--clients--grid .pe--clients--wrapper {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: repeat(var(--columns), 1fr);
        grid-template-columns: repeat(var(--columns), 1fr);
        --columns: 3;
        --gap: 20px;
        grid-gap: var(--gap);
    }

    .pe--clients .pe--clients--wrapper .pe-client {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 15px;
        position: relative;
        display: block;
    }

    .pe--clients.has-bg .pe--clients--wrapper .pe-client {
        background-color: var(--secondaryBackground);

    }

    span.client-caption {
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-100%);
        -ms-transform: translateX(-50%) translateY(-100%);
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease
    }

    .pe--clients.show-captions .pe--clients--wrapper .pe-client:hover span.client-caption {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(-150%);
        -ms-transform: translateX(-50%) translateY(-150%);
        transform: translateX(-50%) translateY(-150%);
    }

    .pe--clients .pe--clients--wrapper .pe-client>* {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        height: 100%;
        align-items: center;
    }

    .pe--clients.has-bg.has-hover .pe-client:hover {
        background: var(--mainColor);
    }

    .pe--clients.has-bg.has-hover .pe-client {
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

    .pe--clients.has-bg.has-hover .pe-client span.client-caption {
        color: var(--secondaryBackground)
    }

    .layout--switched .pe--clients.has-bg.has-hover.hover-switch-logos .pe-client:hover .secondary-img,
    .pe--clients.has-bg.has-hover.hover-switch-logos .pe-client:hover .main-img {
        display: none
    }

    .layout--switched .pe--clients.has-bg.has-hover.hover-switch-logos .pe-client:hover .main-img,
    .pe--clients.has-bg.has-hover.hover-switch-logos .pe-client:hover .secondary-img {
        display: block
    }

    /* Timeline  */
    .pe--timeline {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        position: relative;
        height: auto;
        height: 50vh;
    }

    .pe--timeline .timeline--wrapper {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        height: 50vh;
        position: relative;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 100%;
        gap: 75px;
    }

    .pe--timeline .timeline--wrapper .timeline--item {
        width: 20vw;
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 100%;
        position: relative;
        gap: 0;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .pe--timeline .timeline--wrapper .timeline--item.is--past .timeline--content {
        opacity: .5;
    }

    .pe--timeline .timeline--wrapper .timeline--item.is--past .item--point {
        text-decoration: line-through;
    }

    .pe--timeline .timeline--wrapper .timeline--item.is--past::before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: -75px;
        width: calc(100% + 75px);
        background: var(--mainColor);
        height: 2px;
    }

    .pe--timeline .timeline--wrapper .timeline--item .item--point {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-radius: 50%;
        will-change: padding;
        background: var(--secondaryBackground);
        z-index: 2;
        padding: 0.5em 2em;
        border-radius: 10px;
        font-size: 12px;
        color: var(--secondaryColor);
    }



    .pe--timeline .timeline--wrapper .timeline--item .item--point svg {
        font-size: 12px;
        width: 12px;
    }


    .pe--timeline .timeline--wrapper .timeline--item>div:first-child {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: end;
        height: 50%;
        -webkit-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
        transform: translateY(-50px)
    }

    .pe--timeline .timeline--wrapper .timeline--item>div:nth-child(2) {
        height: 50%;
        -webkit-transform: translateY(40px);
        -ms-transform: translateY(40px);
        transform: translateY(40px);
    }

    .pe--timeline .timeline--line--wrapper .timeline--line {
        min-width: 100vw;
        width: 100%;
        height: 1px;
        background-color: var(--linesColor);
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }



    /* Clients Carousel */

    .pe--clients.pe--clients--carousel .pe--clients--wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        gap: 120px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        will-change: transform;
        align-items: center;
    }

    .pe--clients.pe--clients--carousel .pe--clients--wrapper>div {
        width: 120px;
    }

    .pe--clients.pe--clients--carousel .pe--clients--wrapper>div img {
        width: 100%;
        max-height: 2.5rem;
    }

    .pe--clients.pe--clients--carousel {
        overflow: visible;
    }

    .pe--clients.pe--clients--carousel.has-bordered .pe--clients--wrapper {
        gap: 0
    }

    .pe--clients.pe--clients--carousel.has-bordered .pe--clients--wrapper::after,
    .pe--clients.pe--clients--carousel.has-bordered .pe--clients--wrapper::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 0.5px;
        background: var(--linesColor);
    }

    .pe--clients.pe--clients--carousel.has-bordered .pe--clients--wrapper::before {
        bottom: 0;
    }

    .pe--clients.pe--clients--carousel.has-bordered .pe--clients--wrapper .pe-client {

        border-radius: 0;
    }

    .pe--clients.has-bordered .pe--clients--wrapper .pe-client img {
        width: 130px
    }

    .pe--clients.has-bordered .pe--clients--wrapper .pe-client:first-child::before,
    .pe--clients.has-bordered .pe--clients--wrapper .pe-client::after,
    .pe--clients.has-bordered .pe--clients--wrapper::before,
    .pe--clients.has-bordered .pe--clients--wrapper::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0.5px;
        background: var(--linesColor);
    }

    .pe--clients.has-bordered .pe--clients--wrapper::after {
        top: unset;
        bottom: 0
    }

    .pe--clients.has-bordered .pe--clients--wrapper .pe-client:first-child::before,
    .pe--clients.has-bordered .pe--clients--wrapper .pe-client::after {
        right: 0;
        width: 0.5px;
        height: 100%
    }


    /*Bulge Effect */
    .pe--bulge {
        height: 100%;
        /*    aspect-ratio: 9/9;*/
        margin: 0 auto;
    }

    .card__content {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1
    }

    .card__canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    /** Portfolio Posts
      ------------------------------ */
    .zeyna--portfolio--project {
        display: block;
        position: relative;
        overflow: hidden;
        width: 100%;
        border-color: var(--linesColor);
    }

    .zeyna--portfolio--project .portfolio--project--wrapper {
        display: flex;
        flex-direction: column;
    }

    .zeyna--portfolio--project .portfolio--project--wrapper h6,
    .zeyna--portfolio--project .portfolio--project--wrapper p {
        margin: 0;
    }

    .zeyna--portfolio--project .portfolio--project--wrapper a:not(.pb--handle) {
        /* display: block; */
        display: flex;
        width: auto;
        height: auto;
        flex-direction: column;
        position: relative;
    }

    .zeyna--portfolio--project.portfolio--project--list .portfolio--project--wrapper>a {
        display: flex;
    }

    .zeyna--portfolio--project .portfolio--project--wrapper a .project--image {
        width: 100%;
        height: auto;
        overflow: hidden;
        position: relative;
    }

    span.project--image--overlay {
        position: absolute !important;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: rgb(0 0 0 / 27%);
        z-index: 1 !important;
        pointer-events: none;
    }

    .zeyna--portfolio--project .portfolio--project--wrapper a .project--image img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }

    .zeyna--portfolio--project .portfolio--project--wrapper a:has(.project--gallery) .project--image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
    }

    .zeyna--portfolio--project .portfolio--project--wrapper .project--metas--wrap {
        margin-top: 0.5rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 0 2em;
        pointer-events: none;
        /* position: relative; */
        overflow: hidden;
    }

    .zeyna--portfolio--project .portfolio--project--wrapper .project--main--wrap {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: start;
        width: 100%;
    }

    .zeyna--portfolio--project .portfolio--project--wrapper .project--details--wrap {
        display: flex;
        flex-direction: row;
        align-items: start;
        color: var(--secondaryColor);
        gap: var(--detailsGap);
        --detailsGap: 0.3rem;
    }

    .zeyna--portfolio--project .portfolio--project--wrapper .project--details--wrap span.acf--fields--seperator {
        font-size: 12px;
    }

    .zeyna--portfolio--project .portfolio--project--wrapper .project--details--wrap .project--meta>span.metas--seperator {
        margin-left: var(--detailsGap)
    }

    .zeyna--portfolio--project .portfolio--project--wrapper span.cats--seperator {
        margin: 0 0.1rem;
    }

    .zeyna--portfolio--project .portfolio--project--wrapper p.project--cat {
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        color: var(--secondaryColor);
    }

    .zeyna--portfolio--project.project--metro .project--metas--wrap {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
        padding: 1rem;
        z-index: 3;
    }

    .zeyna--portfolio--project.project--card {
        padding: 1rem 1rem 2rem 1rem;
        background: var(--secondaryBackground);
    }

    .details_pos--column-reverse .zeyna--portfolio--project .portfolio--project--wrapper .project--metas--wrap {
        margin-top: 0;
        margin-bottom: 0.5rem;
    }

    .zeyna--portfolio--project span.project--index {
        color: var(--secondaryColor);
    }

    /* .zeyna--portfolio--project {
        transition: padding .4s ease !important
    }
    
    .zeyna--portfolio--project::after {
        content: "";
        display: block;
        background: var(--secondaryBackground);
        width: 100vw;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        overflow: visible;
        display: none;
    }
    
    .zeyna--portfolio--project:hover::after {
        display: block
    }
    
    .zeyna--portfolio--project:hover {
       padding-left: 15px !important;
       padding-right: 15px !important;
    } */


    /** Portfolio Categories
      ------------------------------ */
    .pe--portfolio--categories ul {
        display: flex;
        list-style: none;
        flex-direction: column;
        gap: var(--gap);
        flex-wrap: wrap;
        --gap: 1em;
    }

    .pe--portfolio--categories ul li span.portfolio--category--count {
        font-size: 1.2rem;
        display: inline-block;
        line-height: 1;
        align-self: flex-start;
        font-weight: normal;
    }

    .pe--portfolio--categories ul li.portfolio--category {
        user-select: none;
        cursor: pointer;
        position: relative;
        transition: opacity .4s ease;
    }

    .pe--portfolio--categories ul:has(li:hover) li:not(:hover) {
        opacity: .25;
    }

    .category--images--hover .pe--portfolio--categories .category--images {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        width: 20vw;
        height: 300px;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: opacity .4s ease, visibility .4s ease;
    }

    .category--images--hover .pe--portfolio--categories .category--images.active {
        opacity: 1;
        visibility: visible;
    }

    .category--images--hover .pe--portfolio--categories .category--images>div {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .category--images--hover .pe--portfolio--categories .category--images>div img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .category--images--hover .pe--portfolio--categories .category--images>div {
        opacity: 0;
    }

    .category--images--hover .pe--portfolio--categories .category--images>div.active {
        opacity: 1;
    }

    .cats--underline--true .pe--portfolio--categories ul li.portfolio--category::after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: var(--linesColor);
    }

    .pe--portfolio--categories ul li span.cats--icon,
    .pe--portfolio--categories ul li span.cats--seperator {
        font-size: 0.7em;
        line-height: 1;
    }

    .pe--portfolio--categories ul li span.cats--icon {
        margin-left: auto;
    }

    .pe--portfolio--categories ul li.portfolio--category>a>p {
        display: flex;
        align-items: center;
        gap: 0.1em;
    }

    .pe--portfolio--categories ul li span.cat--image {
        width: 20%;
        height: 200px;
        display: block;
        overflow: hidden;
    }

    .pe--portfolio--categories ul li span.cat--image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .pe--portfolio--categories ul li.portfolio--category>a>p:has(.cat--image) {
        align-items: start;
        gap: 30px;
    }



    /**  Portfolio Search 
      ------------------------------ */
    .zeyna--portfolios--search.pe--styled--object {
        width: 100%;
        overflow: visible;
    }

    form#zeyna--portfolio--search--form {
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
        justify-content: start;
        align-items: center;
        --gap: 0.47em;

    }

    form#zeyna--portfolio--search--form>div:not(.pe--button) {
        width: 100%;
        min-width: unset;
    }


    form#zeyna--portfolio--search--form>div.pe--portfolio--search--text {
        width: 100%;
        text-align: center;
    }

    .pe--checkbox--field--set--wrapper {
        display: block;
        position: relative;
    }

    .pe--portfolio--search--text input {
        padding: 1.25em;
        border: none;
    }

    .pe--portfolio--search--text input::placeholder {
        color: var(--secondaryColor);
    }


    form#zeyna--portfolio--search--form .select-selected.pe--styled--object,
    .pe--checkbox--field--set--label.pe--styled--object {
        user-select: none;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 2em 0.75em 0.75em 1.5em;
        --radius: 20px;
        line-height: 1;
        overflow: hidden;
        font-size: 1rem;
        width: 100%;
        border: 1px solid var(--linesColor);
    }

    .pe--checkbox--field--set--label.checkbox--selected span.pe--checbox--field--set--selection {
        white-space: nowrap;
    }

    form#zeyna--portfolio--search--form .select-selected:after {
        position: static;
        content: "+";
        transition: all .4s ease;
        font-size: 2em;
        font-weight: 100;
        font-family: system-ui;
        display: inline-block;
        transform: none;
        line-height: inherit;
    }

    .pe--checkbox--field--set--label svg {
        width: 2em;
        height: 2em;
        line-height: 1;
        display: block;
        fill: var(--mainColor);
        transition: transform .3s ease-in-out
    }


    form#zeyna--portfolio--search--form .select-items:not(.select-hide) {
        top: 100%;
        left: 0;
        transform: translateY(0.5em);
        padding: 1.5em;
        display: flex;
        flex-direction: column;
        gap: 1em;
        border-radius: 10px;
    }

    form#zeyna--portfolio--search--form .select-items>div {
        padding: 0;
    }

    .pe--checkbox--field--set.pe--styled--object {
        position: absolute !important;
        top: 100%;
        left: 0;
        padding: 1.5em;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1em;
        --radius: 20px;
        display: none;
        transform: translateY(0em);
        z-index: 3333;
        display: flex;
        opacity: 0;
        pointer-events: none;
        transition: all .4s ease-in-out;
        border: 1px solid var(--linesColor);
    }

    .pe--checkbox--field--set--wrapper.open .pe--checkbox--field--set {
        opacity: 1;
        pointer-events: all;
        transform: translateY(var(--gap));
    }

    .pe--checkbox--field--set--wrapper.open .pe--checkbox--field--set--label svg {
        transform: rotate(180deg)
    }

    .pe--checkbox--field--set input[type="checkbox"] {
        background: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 1em;
        height: 1em;
        border: 1px solid var(--mainColor);
        border-radius: 3px;
        margin-right: 7px;
        vertical-align: middle;
        position: relative;
    }

    .pe--checkbox--field--set input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--mainColor);
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        border-radius: 1px;
    }

    .checkboxes--basic .pe--checkbox--field--set input[type="checkbox"] {
        display: none;
    }

    .checkboxes--basic .pe--checkbox--field--set label:has(input[type="checkbox"]) {
        padding: 0.75em 1.75em;
        border: 1px solid var(--linesColor);
        border-radius: 50px;
        transition: all .25s ease;
        white-space: nowrap;
    }

    .checkboxes--basic .pe--checkbox--field--set label:has(input[type="checkbox"]:checked) {
        color: var(--secondaryBackground);
        background: var(--mainColor);
        border-color: var(--mainColor);
    }

    form#zeyna--portfolio--search--form .pe--portfolio--search--button .pe--button {
        width: 100%;
    }

    form#zeyna--portfolio--search--form .pe--portfolio--search--button .pe--button--wrapper .pb--handle {
        justify-content: space-between;
    }

    .pe--custom--select select {
        display: none;
    }

    .pe--custom--select {
        position: relative;
    }

    .pe--custom--select .pe--select--items {
        position: absolute;
        z-index: 3333;
        background: var(--secondaryBackground);
        left: 0;
        width: 100%;
        border-radius: 20px;
        padding: 1.5em;
        top: 100%;
        flex-direction: column;
        display: flex;
        transform: translateY(0em);
        transition: all .45s ease-in-out;
    }

    .pe--custom--select .pe--select--items.hide {
        opacity: 0;
        pointer-events: none
    }

    .pe--custom--select .pe--select--items.open {
        opacity: 1;
        pointer-events: all;
        transform: translateY(var(--gap));
    }

    .pe--custom--select .pe--select--items>div {
        user-select: none;
        cursor: pointer;
    }

    .pe--custom--select .pe--select--items>div:hover {
        opacity: .5
    }

    .pe--custom--select .pe--select--label {
        user-select: none;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 2em 0.75em 0.75em 1.5em;
        /* border: 1px solid var(--linesColor); */
        --radius: 20px;
        line-height: 1;
        overflow: hidden;
        font-size: 1rem;
        border: 1px solid var(--linesColor);
    }

    .pe--checkbox--field--set--label.checkbox--selected span.pe--checbox--field--set--label--title,
    .pe--custom--select .pe--select--label span.pe--select--label--title {
        position: absolute;
        top: 1em;
        left: 1.5em;
        font-size: 12px;
        color: var(--secondaryColor);
    }

    .pe--checkbox--field--set--wrapper.has--val .pe--checbox--field--default {
        display: none;
    }

    .pe--custom--select:has(.pe--select--items.open) .pe--select--label svg {
        transform: rotate(180deg);
    }



    .pe--custom--select svg {
        width: 2em;
        height: 2em;
        line-height: 1;
        display: block;
        fill: var(--mainColor);
        transition: transform .3s ease-in-out
    }



    /** Portfolio
      ------------------------------ */
    .portfolio--style--grid .portfolio--projects--wrapper {
        display: grid;
        grid-template-columns: repeat(var(--columns), 1fr);
        column-gap: 25px;
        grid-template-rows: auto;
        width: 100%;
        row-gap: 125px;
        --columns: 3;
        align-items: start;
    }


    /* Masonry Layout */
    .portfolio--style--masonry .portfolio--projects--wrapper {
        --masonryItemsWidth: 24%;
        --masonryGutter: 1.333333%;
    }

    .portfolio--style--masonry .portfolio--projects--wrapper {
        display: block;
        width: 100%;
        overflow: hidden;
    }

    .portfolio--style--masonry .portfolio--projects--wrapper:after {
        content: '';
        display: block;
        clear: both;
    }

    .portfolio--style--masonry .portfolio--projects--wrapper .zeyna--portfolio--project,
    .portfolio--style--masonry .portfolio--projects--wrapper .zeyna--projects--masonry--sizer {
        width: var(--masonryItemsWidth);
        display: block;
        float: left;
        margin-bottom: var(--masonryGutter);
        /* height: 46.5vh; */
        border-color: var(--linesColor);
        border-width: 1px;
    }

    .portfolio--style--masonry .portfolio--projects--wrapper .zeyna--projects--masonry--gutter {
        width: var(--masonryGutter);
        display: block;
    }

    .portfolio--style--masonry .portfolio--projects--wrapper .zeyna--portfolio--project.project--highlighted {
        width: calc((var(--masonryItemsWidth) * 2) + var(--masonryGutter));
    }


    .portfolio--style--grid .portfolio--projects--wrapper .zeyna--portfolio--project.project--highlighted {
        grid-column: span 2;
    }


    .elementor-editor-active .portfolio--style--masonry .portfolio--projects--wrapper {
        height: -webkit-fit-content !important;
        height: -moz-fit-content !important;
        height: fit-content !important;
    }

    @media only screen and (max-width: 576px) {

        .portfolio--style--grid .portfolio--projects--wrapper .zeyna--portfolio--project.project--highlighted {
            grid-column: span 1;
        }

        .portfolio--style--masonry .portfolio--projects--wrapper .zeyna--portfolio--project.project--highlighted,
        .portfolio--style--masonry .portfolio--projects--wrapper .zeyna--portfolio--project,
        .portfolio--style--masonry .portfolio--projects--wrapper .zeyna--projects--masonry--size {
            width: 100%;
        }

        .portfolio--style--grid .portfolio--projects--wrapper {
            row-gap: 25px;
            --columns: 1;
        }

        .portfolio--projects--wrapper .grid-template-area {
            display: none;
        }

    }

    .projects--hover--grayscale .zeyna--portfolio--project,
    .projects--hover--blur .zeyna--portfolio--project,
    .projects--hover--opacity .zeyna--portfolio--project {
        transition: opacity .25s ease-in-out;
        will-change: filter;
    }



    .projects--hover--opacity:has(.zeyna--portfolio--project:hover) .zeyna--portfolio--project:not(:hover) {
        opacity: .25;
    }

    .projects--hover--blur:has(.zeyna--portfolio--project:hover) .zeyna--portfolio--project:not(:hover) {
        filter: blur(5px);
        opacity: .75;
    }


    .projects--hover--grayscale:has(.zeyna--portfolio--project:hover) .zeyna--portfolio--project:not(:hover) {
        filter: grayscale(1)
    }



    /* List Layout */

    .zeyna--portfolio--project.portfolio--project--list {
        border-top: 1px solid var(--linesColor);
    }

    .portfolio--style--list .portfolio--projects--wrapper {
        display: flex;
        flex-direction: column;

    }

    .zeyna--portfolio--project.portfolio--project--list a {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 15px 0;
        transition: all .4s ease;
        width: 100%;
    }

    .zeyna--portfolio--project.portfolio--project--list a .project--image {
        width: 30%;
        height: 250px;
    }

    .zeyna--portfolio--project.portfolio--project--list a .project--image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .zeyna--portfolio--project.portfolio--project--list .project--main--wrap {
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 5px;
        width: 25%;
    }

    .zeyna--portfolio--project.portfolio--project--list .project--main--wrap p.project--title {
        font-size: 50px;
        letter-spacing: -0.03em;
        font-weight: 500;
        line-height: 1.1
    }

    .zeyna--portfolio--project.portfolio--project--list .project--metas--wrap {
        width: 25%;
        margin: 0;
    }

    .zeyna--portfolio--project.portfolio--project--list .project--metas--wrap .project--details--wrap {
        flex-direction: column;
    }

    .portfolio--list--images--wrap {
        position: fixed;
        width: 30vw;
        overflow: hidden;
        top: 0;
        left: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity .4s ease;
        height: 300px;
        overflow: hidden;
    }

    .portfolio--list--images--wrap.active {
        opacity: 1;
        visibility: visible;
    }

    .portfolio--list--images--wrap>div img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .portfolio--style--list .zeyna--portfolio--project {
        transition: opacity .4s ease;
    }

    .portfolio--style--list.portfolio--images--hover .portfolio--projects--wrapper:has(.zeyna--portfolio--project .portfolio--project--wrapper > a:hover) .zeyna--portfolio--project:not(:has(a:hover)),
    .portfolio--style--list.portfolio--images--fullscreen .portfolio--projects--wrapper:has(.zeyna--portfolio--project .portfolio--project--wrapper > a:hover) .zeyna--portfolio--project:not(:has(a:hover)) {
        opacity: .15;
    }

    .project--taxonomies--wrap {
        display: flex;
        gap: 1em;
        width: auto;
        color: var(--secondaryColor);
    }

    .project--taxonomies--wrap>div {
        display: flex;
        gap: 0.3em;
    }

    .project--taxonomies--wrap>div img {
        height: 1rem;
        width: auto;
        display: block;
        margin-top: 3px;
        margin-bottom: 3px
    }


    .portfolio--style--list.portfolio--images--fullscreen .zeyna--portfolio--project.portfolio--project--list .project--main--wrap,
    .portfolio--style--list.portfolio--images--fullscreen .zeyna--portfolio--project.portfolio--project--list .project--metas--wrap,
    .portfolio--style--list.portfolio--images--fullscreen .zeyna--portfolio--project.portfolio--project--list .project--details--wrap,
    .portfolio--style--list.portfolio--images--fullscreen .zeyna--portfolio--project.portfolio--project--list .project--taxonomies--wrap,
    .portfolio--style--list.portfolio--images--hover .zeyna--portfolio--project.portfolio--project--list .project--main--wrap,
    .portfolio--style--list.portfolio--images--hover .zeyna--portfolio--project.portfolio--project--list .project--metas--wrap,
    .portfolio--style--list.portfolio--images--hover .zeyna--portfolio--project.portfolio--project--list .project--details--wrap,
    .portfolio--style--list.portfolio--images--hover .zeyna--portfolio--project.portfolio--project--list .project--taxonomies--wrap {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /* 
    
    .portfolio--style--list.portfolio--images--fullscreen .zeyna--portfolio--project.portfolio--project--list .project--details--wrap,
    .portfolio--style--list.portfolio--images--hover .zeyna--portfolio--project.portfolio--project--list .project--details--wrap {
        width: auto;
    }
    
    
    .portfolio--style--list.portfolio--images--fullscreen .zeyna--portfolio--project.portfolio--project--list .project--main--wrap,
    .portfolio--style--list.portfolio--images--hover .zeyna--portfolio--project.portfolio--project--list .project--main--wrap {
        width: 40%;
    }
    
    .portfolio--style--list.portfolio--images--fullscreen .zeyna--portfolio--project.portfolio--project--list:not(:has(.project--metas--wrap)) .project--main--wrap,
    .portfolio--style--list.portfolio--images--hover .zeyna--portfolio--project.portfolio--project--list:not(:has(.project--metas--wrap)) .project--main--wrap {
        width: 100%;
    }
    
    
    .portfolio--style--list.portfolio--images--fullscreen .zeyna--portfolio--project.portfolio--project--list .project--metas--wrap,
    .portfolio--style--list.portfolio--images--hover .zeyna--portfolio--project.portfolio--project--list .project--metas--wrap {
        width: 50%;
        display: block;
    } */


    .portfolio--style--list.portfolio--images--fullscreen .zeyna--portfolio--project.portfolio--project--list .portfolio--project--wrapper>a>div,
    .portfolio--style--list.portfolio--images--hover .zeyna--portfolio--project.portfolio--project--list .portfolio--project--wrapper>a>div {
        width: 30%;
    }


    .portfolio--style--list.portfolio--images--fullscreen .zeyna--portfolio--project .portfolio--project--wrapper a .project--image,
    .portfolio--style--list.portfolio--images--hover .zeyna--portfolio--project .portfolio--project--wrapper a .project--image {
        display: none;
    }


    .elementor-element-editable.portfolio--style--grid.portfolio--style--list .zeyna--portfolio--project .portfolio--project--wrapper a .project--image {
        display: block
    }


    .portfolio--list--image {
        overflow: hidden;
        display: block;
    }

    .portfolio--images--fullscreen .portfolio--list--images--wrap {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }

    .portfolio--images--fullscreen .portfolio--list--images--wrap .portfolio--list--image {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: opacity .4s ease;
    }

    .portfolio--images--fullscreen .portfolio--list--images--wrap .portfolio--list--image.active {
        opacity: 1;
    }

    .portfolio--images--fullscreen .portfolio--projects--wrapper {
        position: relative;
        z-index: 1;
    }

    .project--texts--blend .portfolio--projects--wrapper {
        --mainColor: #fff;
        --secondaryColor: #fff;
        mix-blend-mode: difference;
    }

    @media only screen and (max-width: 576px) {

        .zeyna--portfolio--project.portfolio--project--list a {
            flex-direction: column !important;
            gap: 5px;
        }

        .portfolio--style--list.portfolio--images--fullscreen .zeyna--portfolio--project.portfolio--project--list .project--main--wrap,
        .portfolio--style--list.portfolio--images--hover .zeyna--portfolio--project.portfolio--project--list .project--main--wrap {
            width: 100% !important;
            flex-direction: column;
            align-items: start;
            margin-bottom: 1em;
        }

        .portfolio--style--list.portfolio--images--fullscreen .zeyna--portfolio--project.portfolio--project--list .portfolio--project--wrapper>a>div,
        .portfolio--style--list.portfolio--images--hover .zeyna--portfolio--project.portfolio--project--list .portfolio--project--wrapper>a>div {
            width: 50%
        }

    }

    /* Grouped Layout  */
    .projects--group--wrapper {
        display: flex;
        gap: 1rem;
        flex-wrap: nowrap;
        flex-direction: row;
        width: fit-content;
        align-items: flex-start;
        align-content: flex-start;
    }

    .projects--group--wrapper>div {
        width: 300px;
    }

    .portfolio--style--grouped .portfolio--projects--wrapper {
        display: flex;
        flex-direction: column;
        gap: 100px;
    }

    .projects--group--title {
        margin-bottom: 1em;
        border-bottom: 1px solid var(--linesColor);
        padding-bottom: 0.5em;
    }

    .projects--group--title span.group--count {
        font-size: 0.5em;
        line-height: 1;
        vertical-align: top;
        margin-left: 0.25em;
        color: var(--secondaryColor);
    }


    /* Paginations  */
    .portfolios--pagination {
        width: fit-content;
    }

    .portfolios--load--more .hidden {
        visibility: hidden;
    }

    .portfolios--pagination.pagination--paged {
        display: flex;
        gap: 0.5em;
        font-size: 2rem;
        align-items: center;
        justify-content: center;
        margin-top: 1em;
    }

    .portfolios--pagination.pagination--paged a {
        opacity: .5;
        transition: all .5s ease;
        line-height: 1;
        text-align: center;
    }

    .portfolios--pagination.pagination--paged span {
        line-height: 1;
        text-align: center;
    }

    .portfolios--pagination.pagination--paged a:hover {
        opacity: 1;
    }

    .portfolios--pagination.pagination--paged svg,
    .portfolios--pagination.pagination--paged i {
        display: block;
        line-height: 1;
        margin: 0 auto;
    }

    /* Controls  */
    .pe--portfolio--controls {
        display: flex;
        flex-direction: row;
        align-items: start;
        margin-bottom: 1em;
        justify-content: space-between;
        border-color: var(--linesColor);
        border-width: 1px;
    }

    /* Filters  */

    .portfolio--projects--wrapper {
        transition: opacity .4s ease;
    }

    .portfolio--projects--wrapper.filters--loading {
        opacity: 0.3;
        pointer-events: none;
    }

    .portfolio--projects--wrapper.hidden {
        opacity: 0;
    }

    .pe--portfolio--filters {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        width: auto;
        justify-content: space-between;
        align-items: end;
    }

    .pe--portfolio--filters ul.term--list {
        list-style: none;
        margin: 0;
        display: flex;
        gap: 1rem;
        align-items: start;
        justify-content: start;
    }

    .pe--portfolio--filters ul.term--list li {
        cursor: pointer;
        user-select: none;
        transition: opacity .4s ease;
        white-space: nowrap;
    }

    .pe--portfolio--filters .filters--style--checkbox ul.term--list li>span.term--item--inner::before {
        content: "";
        display: inline-block;
        width: 0.8em;
        height: 0.8em;
        margin-right: 5px;
        border-radius: 2px;
        line-height: 1;
        border: 1px solid var(--linesColor);
    }

    .pe--portfolio--filters .filters--style--checkbox ul.term--list li.active>span.term--item--inner::before {
        background: var(--mainColor)
    }

    .pe--portfolio--filters ul.term--list li span.term--count {
        font-size: 0.9em;
        margin-left: 5px;
        color: var(--secondaryColor);
        display: inline-block;
        vertical-align: super;
        line-height: 1;
    }

    .pe--portfolio--filters ul.term--list:has(.active) li.term-item:not(.active) {
        opacity: .5;
    }

    .pe--portfolio--filters ul.term--list li.loading {
        cursor: wait;
    }

    .pe--portfolio--filters p {
        margin: 0;
        color: var(--secondaryColor);
    }

    .portfolio--filter--group {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 1em;
    }

    span.portfolio--clear--filters {
        font-size: 14px;
        line-height: 1;
        user-select: none;
        cursor: not-allowed;
        opacity: .3;
    }

    .portfolios--filtered span.portfolio--clear--filters {
        cursor: pointer;
        opacity: 1;
    }

    span.portfolio--clear--filters svg {
        fill: var(--mainColor);
        width: 1em;
        height: 1em;
    }

    span.portfolio--clear--filters span {
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
        margin-right: 5px;
    }

    .filters--style--dropdown .pe--portfolio--filters {
        padding: 0;
        height: 0;
        overflow: hidden;
        opacity: 0;
        transition: opacity .4s ease .0s;
        border-top: 1px solid transparent;
    }

    .filters--style--dropdown .pe--portfolio--filters.open {
        padding: 1em 0;
        height: auto;
        opacity: 1;
        transition: opacity .4s ease .35s;
        border-top: 1px solid var(--linesColor);
    }

    .filters--button i,
    .filters--button svg {
        fill: var(--mainColor);
        display: inline-block;
        width: 1em;
        height: 1em;
        line-height: 1;
        vertical-align: middle;
        float: left;
        margin-top: 3px;
        margin-right: 7px;
    }

    .filters--button {
        user-select: none;
        cursor: pointer;
        transition: opacity .3s ease;
        font-size: 12px;
        letter-spacing: 0.05em;
    }

    .filters--button.active {
        opacity: .5
    }

    .pe--portfolio--controls:has(.pe--portfolio--filters.filters--sidebar) {
        width: 25%;
    }

    .pe--portfolio:has(.pe--portfolio--filters.filters--sidebar) {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 20px;
        align-items: flex-start;
    }

    @media only screen and (max-width: 576px) {
        .pe--portfolio:has(.pe--portfolio--filters.filters--sidebar) {
            display: flex;
            flex-direction: column !important;
            flex-wrap: wrap;

        }

        .pe--portfolio--controls:has(.pe--portfolio--filters.filters--sidebar) {
            width: 100%;
        }

    }

    /* Style Switcher  */
    .pe--portfolio--style--switcher {
        width: auto;
    }

    .pe--portfolio--style--switcher ul {
        list-style: none;
        margin: 0;
        display: flex;
        transition: opacity .4s ease;
        gap: var(--gap);
        --gap: 5px;
    }

    .pe--portfolio--style--switcher ul:has(.switch--active) li:not(.switch--active),
    .pe--portfolio--style--switcher ul:has(.active) li:not(.active) {
        opacity: .3
    }

    .pe--portfolio--style--switcher ul li {
        cursor: pointer;
        user-select: none;
        transition: opacity .4s ease;
    }

    .pe--portfolio--style--switcher ul li:has(i) {
        font-size: 1.3rem;
    }

    .pe--portfolio--style--switcher ul li i {
        font-size: inherit;
        line-height: 1;
    }

    .pe--portfolio--style--switcher ul li>span {
        content: attr(data-seperator);
        margin-left: var(--gap);
        opacity: .3;
    }

    .pe--portfolio--style--switcher ul li svg {
        width: 1em;
        height: 1em;
        line-height: 1;
        fill: var(--mainColor)
    }

    .pe--portfolio--style--switcher ul li.loading {
        cursor: wait;
    }

    .pe--portfolio--style--switcher.grid--switcher {
        transition: opacity .3s ease;
        opacity: 0;
    }

    .portfolio--style--grid .pe--portfolio--style--switcher.grid--switcher {
        opacity: 1;
        pointer-events: all;
    }

    /* Hovers  */
    .project--images--zoom_in .zeyna--portfolio--project .portfolio--project--wrapper a .project--image img {
        transition: transform .75s cubic-bezier(0, 0, 0, 0.96);
        transform: scale(1);
    }

    .project--images--zoom_in .zeyna--portfolio--project:hover .portfolio--project--wrapper a .project--image img {
        transform: scale(1.1);
    }

    .project--images--zoom_out .zeyna--portfolio--project .portfolio--project--wrapper a .project--image img {
        transition: transform .75s cubic-bezier(0, 0, 0, 0.96);
        transform: scale(1.1);
    }

    .project--images--zoom_out .zeyna--portfolio--project:hover .portfolio--project--wrapper a .project--image img {
        transform: scale(1);
    }

    /* Project Galleries  */

    .project--archive--gallery--nav {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        z-index: 2;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        padding: 0 0.5em;
        -webkit-transition: opacity .4s ease;
        -o-transition: opacity .4s ease;
        transition: opacity .4s ease;
        opacity: 0;
        pointer-events: none;
    }

    .zeyna--portfolio--project:hover .project--archive--gallery--nav {
        opacity: 1;
    }

    .project--archive--gallery--nav>div {
        font-size: 40px;
        line-height: 1;
        display: block;
        cursor: pointer;
        pointer-events: all;
    }

    .project--archive--gallery--nav>div svg {
        fill: var(--mainColor);
        width: 1em;
        height: 1em;
    }

    .project--archive--gallery--nav>div.pag--prev svg {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .project--archive--gallery--nav>div.pag--next svg {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    .project--archvive--gallery--image a {
        display: block;
        width: 100%;
        height: 100%;
        z-index: 2;
    }


    @media only screen and (max-width: 576px) {
        .project--archive--gallery--nav {
            opacity: 1
        }

    }

    .zeyna--portfolio--project.portfolio--project--list a:has(.project--gallery) .project--image {
        display: none;
    }

    .zeyna--portfolio--project.portfolio--project--list a .project--gallery.swiper-container {
        width: 30%;
        height: 250px;
        overflow: hidden;
        position: relative;
    }

    .zeyna--portfolio--project.portfolio--project--list a .project--gallery.swiper-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /** Accordion
      ------------------------------ */

    .elementor-widget-n-accordion .e-n-accordion-item .e-n-accordion-item-title-icon span>i,
    .elementor-widget-n-accordion .e-n-accordion-item-title>span {
        color: var(--mainColor) !important;
    }

    .elementor-widget-n-accordion .e-n-accordion-item-title .e-n-accordion-item-title-icon span>svg {
        fill: var(--secondaryColor) !important;
    }

    .elementor-widget-n-accordion .e-n-accordion-item-title {
        border-color: var(--linesColor) !important;
    }

    .e-n-accordion:has(.is-open) .e-n-accordion-item:not(.is-open) {
        opacity: .25;
    }

    .e-n-accordion .e-n-accordion-item {
        transition: opacity .4s ease;
    }

    .elementor-widget-peaccordion .elementor-widget-container {
        overflow: hidden;
    }

    .pe--accordion {
        display: block;
        float: left;
        width: 100%;
        height: auto;
    }

    .pe--accordion--wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1em;
    }

    .pe-accordion-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        position: relative;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
        --fontSize: 1rem;
        transition: background .3s ease, opacity .3s ease;
        border-color: var(--linesColor);
        border-width: 1px;
    }

    .pe--accordion.ac--underlined .pe-accordion-item::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0.5px;
        background: var(--linesColor);
    }

    .pe-accordion-item-content {
        height: 0;
        overflow: hidden;
        display: block;
        float: left;
        width: 100%;
        color: var(--secondaryColor);
    }

    .accordion--active .pe-accordion-item-content {
        height: auto;
    }

    .pe-accordion-item-content p {
        margin-bottom: 2em;
        margin-top: 0;
    }

    .pe-accordion-item-title>* {
        display: inline-block;
        margin: 0;
        /* font-size: var(--fontSize); */
    }

    .pe-accordion-item-title {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        margin: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        float: left;
        width: 100%;
        padding: 1em 0;
        /* font-size: var(--fontSize); */
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1em;
    }

    .pe-accordion-item-title span.ac--icon.pe--styled--object {
        border-style: solid;
        --radius: 50px;
        padding: 1em;
        background: var(--mainBackground);
        --paddingTop: 1em;
        --paddingLeft: 1em;
        --paddingBottom: 1em;
        --paddingRight: 1em;
    }

    .pe-accordion-item-title span.ac--icon.pe--styled--object svg {
        width: 1em;
        height: 1em;
        line-height: 1;
        display: block;
        fill: var(--color);
    }

    .pe-accordion-item:first-child .pe-accordion-item-title {
        padding-top: 0;
    }

    .pe-accordion-item-title>span.accordion-toggle {
        width: 0.5em;
        height: 0.5em;
        position: relative;
        margin-left: auto;
        line-height: 0.6;
    }

    .acc--icon--row-reverse .pe-accordion-item-title {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start;
        gap: 0.5em
    }

    .acc--icon--row-reverse span.accordion-toggle {
        margin-left: 0 !important;
        margin-right: 0.5em !important;
    }

    .pe-accordion-item-title>span.accordion-toggle.toggle--custom {
        font-size: 1rem;
        width: 1em;
        height: 1em;
    }

    .pe--accordion.toggle--bg .pe-accordion-item-title>span.accordion-toggle::after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: -1;
        border-radius: 50%;
        width: 150%;
        height: 150%;
        background: var(--secondaryBackground);
        -webkit-transition: background .4s ease;
        -o-transition: background .4s ease;
        transition: background .4s ease
    }

    .pe--accordion.toggle--bg .pe-accordion-item.accordion--active .pe-accordion-item-title>span.accordion-toggle::after {
        background: var(--mainColor)
    }

    .pe--accordion.toggle--bg .pe-accordion-item.accordion--active .pe-accordion-item-title>span.accordion-toggle {
        color: var(--mainBackground)
    }

    .pe-accordion-item.accordion--active .pe-accordion-item-title span.ac--icon.pe--styled--object {
        color: var(--mainBackground);
        background: var(--mainColor);
        --color: var(--mainBackground);

    }


    .pe-accordion-item-title>span.accordion-toggle>span.ac--togle {
        font-size: 1em;
        height: 1em;
        width: 1em;
        display: inline-block;
    }

    .pe-accordion-item-title>span.accordion-toggle>span.ac--togle i {
        vertical-align: top;
    }

    .pe-accordion-item.accordion--active .pe-accordion-item-title>span.accordion-toggle>span.ac-toggle-open,
    .pe-accordion-item:not(.accordion--active) .pe-accordion-item-title>span.accordion-toggle>span.ac-toggle-close {
        display: none;
    }


    .pe--accordion.ac--ordered .pe-accordion-item-content p {
        padding-left: calc(4 * var(--fontSize));
    }

    span.accordion-toggle.toggle--plus>span {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-transition: -webkit-transform .65s ease;
        transition: -webkit-transform .65s ease;
        -o-transition: transform .65s ease;
        transition: transform .65s ease;
        transition: transform .65s ease, -webkit-transform .65s ease
    }

    span.accordion-toggle.toggle--plus>span:first-child {
        width: 70%;
        height: 2px;
        background: var(--mainColor);
    }

    span.accordion-toggle.toggle--plus>span:last-child {
        background: var(--mainColor);
        width: 2px;
        height: 70%;
    }

    .pe--accordion.toggle--bg .pe-accordion-item.accordion--active span.accordion-toggle.toggle--plus>span {
        background: var(--mainBackground)
    }

    .pe-accordion-item.accordion--active span.accordion-toggle.toggle--plus>span:last-child {
        -webkit-transform: translate(-50%, -50%) rotate(-270deg);
        -ms-transform: translate(-50%, -50%) rotate(-270deg);
        transform: translate(-50%, -50%) rotate(-270deg);
    }

    span.accordion-toggle.toggle--dot span {
        border-radius: 50%;
        background: var(--mainColor);
        width: 50%;
        height: 50%;
        opacity: .3;
        -webkit-transition: all .65s ease;
        -o-transition: all .65s ease;
        transition: all .65s ease;
        display: inline-block;
        vertical-align: super;
    }

    .toggle--hidden span.accordion-toggle {
        display: none;
    }

    .pe-accordion-item.accordion--active span.accordion-toggle.toggle--dot span {
        opacity: 1;
    }

    .pe--accordion.toggle--bg .pe-accordion-item.accordion--active span.accordion-toggle.toggle--dot span {
        background: var(--mainBackground)
    }

    span.accordion-toggle.toggle--dot {
        text-align: center;
    }

    .pe-accordion-item.tde__parent .pe-accordion-item-title>span.accordion-toggle {
        -webkit-transform: translatex(1.5em);
        -ms-transform: translatex(1.5em);
        transform: translatex(1.5em);
        -webkit-transition: -webkit-transform .75s ease-in-out;
        transition: -webkit-transform .75s ease-in-out;
        -o-transition: transform .75s ease-in-out;
        transition: transform .75s ease-in-out;
        transition: transform .75s ease-in-out, -webkit-transform .75s ease-in-out;
    }

    .pe-accordion-item.tde__parent.tde__enter .pe-accordion-item-title>span.accordion-toggle {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    .pe--accordion.ac--underlined .pe-accordion-item.tde__parent::after {
        width: 0%;
        -webkit-transition: width .75s cubic-bezier(0, 0, 0, 0.98);
        -o-transition: width .75s cubic-bezier(0, 0, 0, 0.98);
        transition: width .75s cubic-bezier(0, 0, 0, 0.98);
    }

    .pe--accordion.ac--underlined .pe-accordion-item.tde__parent.tde__enter::after {
        width: 100%;
    }

    .items--bg .pe-accordion-item,
    .active--bg .pe-accordion-item.accordion--active {
        background: var(--secondaryBackground);
        border-radius: 15px;
    }

    .items--bg .pe-accordion-item,
    .active--bg .pe-accordion-item {
        padding: 1em 1em 0em 1em;
    }

    .items--bg .pe-accordion-item-title,
    .active--bg .pe-accordion-item-title {
        padding-top: 0
    }

    .active--fade .pe--accordion--wrapper:has(.accordion--active) .pe-accordion-item:not(.accordion--active) {
        opacity: .25;
    }

    .pe--accordion:has(.pe--accordion--images--wrapper) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: 50px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .pe--accordion:has(.pe--accordion--images--wrapper) .pe--accordion--wrapper {
        width: 50%;
    }

    .pe--accordion--images--wrapper {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    .pe--accordion--images--wrapper .pe--accordion--image {
        width: 100%;
        height: auto;
        display: none;
        overflow: hidden;
    }

    .pe--accordion--image.accordion--image--active {
        display: block;
    }

    .pe--accordion--images--wrapper .pe--accordion--image img {
        width: 100%;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
        display: block;
    }

    .pe-accordion-item-title>span.accordion-toggle svg,
    .pe-accordion-item-title>span.accordion-toggle svg path,
    .pe-accordion-item-title>span.accordion-toggle svg circle {
        fill: var(--mainColor);
    }

    span.ac-order.pe--styled--object {
        z-index: 1;
    }

    @media only screen and (max-width: 570px) {



        .pe-accordion-item-title>span.accordion-toggle {
            margin-right: 0;
            width: 20px;
            height: 20px;
        }

        .pe--accordion.ac--ordered .pe-accordion-item-content p {
            padding-left: 0;
        }

        .pe--accordion:has(.pe--accordion--images--wrapper) {
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }

    }

    /** Fancy Objects
      ------------------------------ */

    dotlottie-player {
        display: block;
        width: 100%;
        height: auto;
        overflow: hidden;
    }


    /** Fancy Objects
      ------------------------------ */

    .elementor-widget-pefancyobjects {
        pointer-events: none;
    }

    .pe--fancy--objects {
        display: block;
        position: relative;
        width: 50vw;
        height: 50vh;
    }

    .pe--fancy--objects .fancy--objects--wrapper {
        display: block;
        width: 100%;
        height: 100%;
    }

    .fancy--object--wrap {
        position: absolute;
        top: 10%;
        left: 10%;
        --transformX: 0;
        --transformY: 0;
        -webkit-transform: translateX(var(--transformX)) translateY(var(--transformY));
        -ms-transform: translateX(var(--transformX)) translateY(var(--transformY));
        transform: translateX(var(--transformX)) translateY(var(--transformY));
        pointer-events: all;
    }

    .fancy--object {
        border-color: var(--linesColor);
        color: var(--mainColor)
    }

    .fancy--object.icon,
    .fancy--object.image {
        line-height: 0
    }

    .fancy--object.object--has--bg {
        background: var(--secondaryBackground);
        padding: 0.5em 1em;
    }

    .fancy--object svg,
    .fancy--object img {
        width: 100%;
    }

    .entrance--scaleUp .fancy--object--wrap {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }

    .entrance--fadeIn .fancy--object--wrap {
        opacity: 0;
    }

    .entrance--slideUp .fancy--object--wrap {
        -webkit-transform: translatey(100vh);
        -ms-transform: translatey(100vh);
        transform: translatey(100vh);
    }

    .entrance--slideDown .fancy--object--wrap {
        -webkit-transform: translatey(-100vh);
        -ms-transform: translatey(-100vh);
        transform: translatey(-100vh);
    }



    /** Testimonials
      ------------------------------ */


    .pe-testimonial {
        border-radius: 0;
        display: block;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        border-color: var(--linesColor);
        border-width: 1px;
        gap: 60px;
        height: 100%;
    }

    .pe-testimonial.pe--styled--object {
        border-style: solid;
        --radius: 10px;
        padding: 25px;
    }


    .pt-head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 10px
    }

    .pt-content {
        width: 100%;
    }

    .pt-avatar {
        width: 75px;
        height: 75px;
        overflow: hidden;
        border-radius: 50%;
    }

    .pt-avatar>img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .pt-det {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-left: 0;
    }


    span.pt-title {
        color: var(--secondaryColor);
    }

    .pt-content>p {
        margin: 0;
    }


    /** Infosequence
      ------------------------------ */
    .pe--infosequence {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pe--infosequence .infos--wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .pe--infosequence .seq--circle {
        width: 500px;
        height: 500px;
    }

    .pe--infosequence .seq--circle circle {
        fill: transparent;
        stroke: var(--linesColor);
        stroke-width: 0.25px;
    }

    .infos--wrapper .seq--info {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -100%) rotate(var(--rotate));
        width: calc(100% / var(--length));
        height: 50%;
        transform-origin: bottom center;
        --rotate: calc(360deg / var(--length) * var(--i));
        color: var(--mainColor);
        --transformX: 40%;
        --transformY: 0%;
    }

    .infos--wrapper .seq--info--main {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateY(-150%) translateX(-50%);
        border: 1px solid;
        padding: 5px 12px;
        --radius: 50%;
    }

    .pe--infosequence[data-behavior="click"] .seq--info--main,
    .pe--infosequence[data-behavior="draw"] .seq--info--main {
        transform: translateY(-150%) translateX(-50%) rotate(calc(-1 * var(--rotate)));
    }

    .pe--infosequence[data-behavior="click"] .infos--wrapper .seq--info--main {
        user-select: none;
        cursor: pointer
    }

    .infos--wrapper .seq--info.active .seq--info--main {
        background: var(--mainColor);
        color: var(--mainBackground);
    }

    .pe--infosequence .infos--wrapper .seq--info--content {
        position: absolute;
        top: 0;
        left: 0;
        transform: rotate(calc(-1 * var(--rotate))) translateX(var(--transformX)) translateY(var(--transformY));
        width: 300px;
        transform-origin: calc(var(--i) * 10%) 0%;
        opacity: 0;
        max-width: 300px;
    }

    .pe--infosequence .seq--info--content .seq--info--icon {
        font-size: 3rem
    }


    .pe--infosequence .seq--info--content .seq--info--icon svg {
        width: 1em;
        height: 1em;
    }

    .pe--infosequence[data-behavior="rotate"] .seq--info--content {
        opacity: 1;
        top: 50%;
        left: 50%;
        transform-origin: center center !important;
        position: absolute;
        opacity: 0;
        transition: opacity .4s ease;
        text-align: center;
        --transformX: -50%;
        --transformY: -50%;
        transform: translateX(var(--transformX)) translateY(var(--transformY));
        width: 400px;
        max-width: 400px;
    }

    .pe--infosequence[data-behavior="rotate"] .seq--info--content.active {
        opacity: 1;
    }

    .pe--infosequence[data-behavior="rotate"] .infos--wrapper .seq--info--content,
    .pe--infosequence[data-behavior="click"] .infos--wrapper .seq--info--content {
        transition: opacity .4s ease
    }

    .pe--infosequence[data-behavior="rotate"] .infos--wrapper .active .seq--info--content,
    .pe--infosequence[data-behavior="click"] .infos--wrapper .active .seq--info--content {
        opacity: 1;
    }

    .pe--infosequence .infos--wrapper .seq--info.pos--left .seq--info--content {
        --transformY: 10%;
        --transformX: -85%;
    }

    .pe--infosequence .seq--info--content .seq--info--text {
        color: var(--secondaryColor)
    }

    .pe--infosequence .infos--wrapper .seq--info.info-0 {
        --transformY: -140%;
        --transformX: 10%;
    }

    .infos--wrapper .seq--info::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        width: 7px;
        height: 7px;
        background: var(--mainColor);
        border-radius: 50%;
        transform: translateX(-50%) translateY(2.5px);
        opacity: 0;
    }

    .infos--wrapper .seq--info.active::before {
        opacity: 1;
    }


    /** Draw SVG
      ------------------------------ */
    .pe--draw--svg {
        min-width: 500px;
        visibility: hidden;
        padding: 5px;
    }

    .pe--draw--svg.draw--start {
        visibility: visible
    }

    .pe--draw--svg .has--theme--stroke:not(:has(.has--theme--stroke)) {
        fill: transparent;
        stroke: var(--mainColor);
        stroke-width: 1px;
        vector-effect: non-scaling-stroke;
    }

    /** Icons
      ------------------------------ */
    .pe--icon {
        display: block;
        position: relative;
        line-height: 1em;
        font-size: 2rem;
        vertical-align: middle;
        overflow: hidden;
        color: var(--mainColor);
    }

    .pe-icon {
        line-height: 1;
        /* display: inline-block; */
        display: block;
    }

    .pe--icon:has(.pe--icon--caption):has(a) {
        display: block;
    }

    .pe--icon:has(.pe--icon--caption):has(a) a,
    .pe--icon:has(.pe--icon--caption):not(:has(a)) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: auto;
        overflow: visible;
        gap: 20px;
        width: 100%;
    }



    .pe--icon:has(.pe--icon--caption) .pe--icon--wrap {
        width: auto;
        height: auto;
        overflow: hidden;
    }

    .pe--icon--wrap[data-fade=true] {
        overflow: visible !important;
    }

    .pe--icon--caption {
        font-size: 0.8rem;
        text-align: center;
        width: auto;
    }

    .icon--fill--yes .pe--icon polygon,
    .icon--fill--yes svg,
    .icon--fill--yes path,
    .icon--fill--yes .pe--icon svg,
    .icon--fill--yes .pe--icon path {
        fill: var(--mainColor) !important;
    }


    .pe--icon--wrap {
        display: block;
        width: 100%;
        height: 100%;
        -webkit-transition: color .4s ease;
        -o-transition: color .4s ease;
        transition: color .4s ease;
        line-height: 1;
    }

    .pe--icon--wrap svg {
        display: block;
    }

    .pe--icon i {
        line-height: 1;
        float: left;
        color: var(--mainColor);
        transition: color .4s ease;
        font-size: inherit;
        display: block;
    }

    .has--hover .pe--icon:hover i {
        color: var(--mainBackground)
    }

    .pe--icon>a {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
    }

    .caption__style--hover .pe--icon--caption {
        position: absolute;
        top: 0px;
        white-space: nowrap;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(100%);
        -ms-transform: translateX(-50%) translateY(100%);
        transform: translateX(-50%) translateY(100%);
        opacity: 0;
        pointer-events: none;
        -webkit-transition: all .4s cubic-bezier(0.42, 0, 0.15, 0.97);
        -o-transition: all .4s cubic-bezier(0.42, 0, 0.15, 0.97);
        transition: all .4s cubic-bezier(0.42, 0, 0.15, 0.97);
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }

    .caption__style--hover .pe--icon:hover .pe--icon--caption {
        opacity: 1;
        transform: translateX(-50%) translateY(calc(3rem + var(--paddingTop)));
    }

    .icon--hover--invert .pe--icon svg,
    .icon--hover--revert .pe--icon svg {
        -webkit-transition: -webkit-filter .4s ease !important;
        transition: -webkit-filter .4s ease !important;
        -o-transition: filter .4s ease !important;
        transition: filter .4s ease !important;
        transition: filter .4s ease, -webkit-filter .4s ease !important;
    }

    /* .icon--hover--invert .pe--icon:hover svg {
        -webkit-filter: invert(1);
        filter: invert(1);
    }
 */
    /* 
    .pe--icon svg polygon {
        fill: var(--mainColor)
    }
    
    .pe--icon svg rect {
        fill: var(--mainColor)
    } */

    .icon--hover--revert .pe--icon:hover svg {
        -webkit-filter: revert;
        filter: revert;
    }

    /* Icon Hover Effects  */


    /* Icon Hovers  */


    span[data-icon-hover] {
        --pTop: 0px;
        --pLeft: 0px;
        --pBottoom: 0px;
        --pRight: 0px;
        display: block;
        line-height: 0;
    }

    span[data-icon-hover] span {
        display: inline-block;
        line-height: inherit;
        transition: all .4s cubic-bezier(0.68, -0.55, 0.27, 1.55)
    }

    span[data-icon-hover] .icon--hover--wrap {
        position: absolute;
    }

    span[data-icon-hover=slide-up]>.icon--hover--wrap {
        top: calc(100% + var(--pTop));
        left: 0
    }

    .pe--hover--trigger:hover span[data-icon-hover=slide-up]>span,
    span[data-icon-hover=slide-up]:hover>span {
        transform: translateY(calc(-100% - var(--pTop)))
    }

    span[data-icon-hover=slide-down]>.icon--hover--wrap {
        top: calc(-100% - var(--pTop));
        left: 0
    }

    .pe--hover--trigger:hover span[data-icon-hover=slide-down]>span,
    span[data-icon-hover=slide-down]:hover>span {
        transform: translateY(calc(100% + var(--pTop)))
    }

    span[data-icon-hover=slide-left]>.icon--hover--wrap {
        top: 0;
        left: calc(100% + var(--pLeft))
    }

    .pe--hover--trigger:hover span[data-icon-hover=slide-left]>span,
    span[data-icon-hover=slide-left]:hover>span {
        transform: translateX(calc(-100% - var(--pLeft)))
    }

    span[data-icon-hover=slide-right]>.icon--hover--wrap {
        top: 0;
        right: calc(100% + var(--pRight))
    }

    .pe--hover--trigger:hover span[data-icon-hover=slide-right]>span,
    span[data-icon-hover=slide-right]:hover>span {
        transform: translateX(calc(100% + var(--pRight)))
    }

    span[data-icon-hover=slide-up-right]>.icon--hover--wrap {
        top: calc(100% + var(--pTop));
        right: calc(100% + var(--pRight));
        left: unset;
    }

    .pe--hover--trigger:hover span[data-icon-hover=slide-up-right]>span,
    span[data-icon-hover=slide-up-right]:hover>span {
        transform: translateY(calc(-100% - var(--pTop))) translateX(calc(100% + var(--pRight)))
    }

    span[data-icon-hover=slide-up-left]>.icon--hover--wrap {
        top: calc(100% + var(--pTop));
        left: calc(100% + var(--pLeft));
    }

    .pe--hover--trigger:hover span[data-icon-hover=slide-up-left]>span,
    span[data-icon-hover=slide-up-left]:hover>span {
        transform: translateY(calc(-100% - var(--pTop))) translateX(calc(-100% - var(--pLeft)))
    }

    span[data-icon-hover=slide-down-left]>.icon--hover--wrap {
        left: calc(100% + var(--pLeft));
        bottom: calc(100% + var(--pBottom));
    }

    .pe--hover--trigger:hover span[data-icon-hover=slide-down-left]>span,
    span[data-icon-hover=slide-down-left]:hover>span {
        transform: translateY(calc(100% + var(--pBottom))) translateX(calc(-100% - var(--pRight)))
    }


    span[data-icon-hover=slide-down-right]>.icon--hover--wrap {
        right: calc(100% + var(--pRight));
        bottom: calc(100% + var(--pBottom));
    }

    .pe--hover--trigger:hover span[data-icon-hover=slide-down-right]>span,
    span[data-icon-hover=slide-down-right]:hover>span {
        transform: translateY(calc(100% + var(--pBottom))) translateX(calc(100% + var(--pRight)))
    }

    span[data-icon-hover=rotate]>span {
        transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
        --rotateDeg: 45deg
    }

    .pe--hover--trigger:hover span[data-icon-hover=rotate]>span,
    span[data-icon-hover=rotate]:hover>span {
        transform: rotate(var(--rotateDeg));
    }


    /* Background Hovers  */

    .pe--hover--trigger:hover [data-background-hover=circle-in],
    .pe--hover--trigger:hover [data-background-hover=block-up],
    .pe--hover--trigger:hover [data-background-hover=block-down],
    .pe--hover--trigger:hover [data-background-hover=block-left],
    .pe--hover--trigger:hover [data-background-hover=block-right],
    [data-background-hover=circle-in]:hover,
    [data-background-hover=block-up]:hover,
    [data-background-hover=block-down]:hover,
    [data-background-hover=block-left]:hover,
    [data-background-hover=block-right]:hover {
        color: var(--secondaryBackground);
    }

    [data-background-hover=circle-in]::after,
    [data-background-hover=block-up]::after,
    [data-background-hover=block-down]::after,
    [data-background-hover=block-left]::after,
    [data-background-hover=block-right]::after {
        content: '';
        display: block;
        width: 0%;
        height: 0%;
        background: var(--mainColor);
        position: absolute;
        z-index: -1;
        border-radius: var(--radius);
        transition: height 0.25s cubic-bezier(0.74, 0.02, 0.3, 1), width 0.4s cubic-bezier(0.74, 0.02, 0.3, 1)
    }

    [data-background-hover=block-down]::after,
    [data-background-hover=block-up]::after {
        width: 100%
    }

    [data-background-hover=block-up]::after {
        bottom: 0;
        left: 0;
    }

    [data-background-hover=block-down]::after {
        top: 0;
        left: 0;
    }

    .pe--hover--trigger:hover [data-background-hover=block-down]::after,
    .pe--hover--trigger:hover [data-background-hover=block-up]::after,
    [data-background-hover=block-down]:hover::after,
    [data-background-hover=block-up]:hover::after {
        height: 100%
    }

    [data-background-hover=block-down]:hover svg,
    [data-background-hover=block-up]:hover svg {
        fill: var(--secondaryBackground)
    }


    [data-background-hover=block-left]::after,
    [data-background-hover=block-right]::after {
        height: 100%
    }


    [data-background-hover=block-left]::after {
        top: 0;
        left: 0;
    }

    [data-background-hover=block-right]::after {
        top: 0;
        right: 0;
    }

    .pe--hover--trigger:hover [data-background-hover=block-right]::after,
    .pe--hover--trigger:hover [data-background-hover=block-left]::after,
    [data-background-hover=block-right]:hover::after,
    [data-background-hover=block-left]:hover::after {
        width: 100%
    }


    [data-background-hover=circle-in]::after {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.35s cubic-bezier(0.65, 0.05, 0.36, 1);
        border-radius: 500px
    }

    .pe--hover--trigger:hover [data-background-hover=circle-in]::after,
    [data-background-hover=circle-in]:hover::after {
        width: 100%;
        height: 100%;
        border-radius: var(--radius)
    }

    [data-background-hover] svg {
        transition: fill .4s ease
    }

    [data-background-hover=circle-in]:hover svg {
        fill: var(--mainBackground);
    }

    [data-background-hover=reveal]::before {
        width: 0%;
        height: 0%;
        transition: all 0.35s cubic-bezier(0.65, 0.05, 0.36, 1);
    }

    .pe--hover--trigger:hover [data-background-hover=reveal]::before,
    [data-background-hover=reveal]:hover::before {
        width: 100%;
        height: 100%;
    }

    [data-background-hover=conceal]::before {
        transition: all 0.35s cubic-bezier(0.65, 0.05, 0.36, 1);
    }

    .pe--hover--trigger:hover [data-background-hover=conceal]::before,
    [data-background-hover=conceal]:hover::before {
        width: 0%;
        height: 0%;
    }

    /** Team Member
      ------------------------------ */
    .pe--team--member {
        display: block;
        position: relative;
        overflow: hidden;
        border-width: 1px;
        border-color: var(--linesColor);
    }

    .pe--team--member .team--member--wraper {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .pe--team--member h6,
    .pe--team--member p {
        margin: 0;
    }

    .pe--team--member .team--member--image {
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
    }

    .pe--team--member .team--member--image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .team--member--details {
        display: flex;
        flex-direction: column;
        padding: 0 1rem;
        gap: 20px;
    }

    .team--member--labels {
        display: flex;
        flex-direction: column;
    }

    .member--content--box p.team--member--content {
        position: absolute;
        top: 1rem;
        left: 1rem;
        padding: 1rem;
        background: var(--secondaryBackground);
        right: 1rem;
        opacity: 0;
        transition: all .4s ease;
    }

    .member--content--box .box--active p.team--member--content {
        opacity: 1;
        pointer-events: none;
    }

    .member--content--box span.member--toggle {
        transition: transform .4s ease;
        transform-origin: center center;
        line-height: 1
    }

    .member--content--box .box--active span.member--toggle {
        transform: rotate(-135deg)
    }

    .member--content--box span.member--toggle {
        top: unset;
        left: unset;
        right: 1rem;
        bottom: 1rem;
    }

    ul.team--member--socials {
        list-style: none;
        display: flex;
        gap: 1rem;
        font-size: 1.2rem;
        margin: 0;
    }

    ul.team--member--socials li.member--social svg {
        width: 1em;
        height: 1em;
        fill: var(--mainColor);
    }

    ul.team--member--socials:has(.social--label) {
        font-size: 14px;
    }

    p.team--member--title {
        color: var(--secondaryColor)
    }

    .zeyna--member--popup .team--member--pop--wrap {
        display: flex;
        flex-direction: row;
        row-gap: 50px;
        flex-wrap: wrap;
        align-content: space-between;
        height: 100%;
        align-items: stretch;
        align-self: stretch;
        column-gap: 15px;
    }

    .zeyna--member--popup .team--member--pop--wrap .team--member--image {
        width: 40%;
    }

    span.member--toggle {
        position: absolute;
        top: 1rem;
        left: 1rem;
    }

    span.member--toggle svg {
        width: 2em;
        height: 2em;
        cursor: pointer;
        user-select: none;
        fill: var(--mainColor);
    }

    .socials--behavior--hover ul.team--member--socials {
        position: absolute;
        top: 1rem;
        left: 1rem;
        opacity: 0;
        transition: opacity .4s ease;
        pointer-events: all;
    }

    .socials--behavior--hover .pe--team--member:hover ul.team--member--socials {
        opacity: 1;
    }

    .pe--team--member.metro .team--member--details {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 1rem;
        width: 100%;
        pointer-events: none;
    }

    .pe--team--member.card {
        background: var(--secondaryBackground);
        padding: 10px;
        border-radius: 10px;
    }

    .pe--team--member.card .team--member--image {
        border-radius: 10px;
    }

    /** Clock
      ------------------------------ */
    .pe--clock {
        display: flex;
        align-items: start;
        gap: 5px;
    }

    /*==================================== 
       Categories List
    ======================================*/
    .categories--list {
        /* height: 100svh; */
        /* overflow: hidden; */
        /* position: relative; */
        /* -webkit-perspective: 2000px; */
        /* perspective: 2000px; */
    }

    .categories--list .categories--wrapper {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        height: 100%;
        width: 100%;
        position: relative;
    }

    .categories--list .categories--wrapper .product--category {
        position: absolute;
        white-space: nowrap;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%) rotateX(var(--rotate)) translateZ(3em);
        transform: translate(-50%, -50%) rotateX(var(--rotate)) translateZ(3em);
        opacity: 0.2;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
    }

    .categories--list .categories--wrapper .product--category:first-child {
        opacity: 1;
    }

    .categories--list .images--wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        opacity: 0;
        z-index: -1;
    }

    .categories--list.equal__height .images--wrapper {
        height: 500px;
        pointer-events: none;
    }

    .categories--list.equal__height .images--wrapper .category--image {
        height: 100%;
        width: 100%;
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        opacity: 0;
    }

    .categories--list .images--wrapper .category--image {
        position: absolute;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        pointer-events: none;
        opacity: 0;
        width: 400px;
    }

    .categories--list .images--wrapper .category--image img,
    .categories--list .images--wrapper .category--image>div,
    .categories--list .images--wrapper .category--image .parallax--wrap img,
    .categories--list .images--wrapper .category--image .parallax--wrap>div {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }



    @media only screen and (max-width: 570px) {
        .categories--list {
            -webkit-transform: none !important;
            -ms-transform: none !important;
            transform: none !important;
        }

        .categories--list .categories--wrapper .product--category {

            font-size: 36px;
        }
    }



    /*==================================== 
    // Products Cards
    ======================================*/

    .product--cards {
        height: 100vh;
        overflow: hidden;
        position: relative;
    }

    .product--cards .products--wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        -webkit-perspective: 2000px;
        perspective: 2000px;
    }

    .product--cards .products--wrapper .product--item {
        position: absolute;
        top: 45%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 45%;
        height: 55%;
        pointer-events: none;
    }

    .product--cards .products--wrapper .product--item .zeyna--single--product {
        width: 100%;
        height: 100%;
    }

    .product--cards .products--wrapper .product--item.product--active--meta {
        pointer-events: all;
    }

    .product--cards .products--wrapper .product--item .zeyna--product--meta {
        opacity: 0;
    }

    .product--cards .products--wrapper .product--item.product--active--meta .zeyna--product--meta {
        opacity: 1;
    }

    .product--cards .navigation--image--wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: absolute;
        bottom: 0;
        left: 0;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }

    .product--cards .navigation--image--wrapper .navigation--image {
        width: 150px;
        height: 120px;
        overflow: hidden;
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
    }

    .product--cards .navigation--image--wrapper .navigation--image img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }


    .thumbs--bordered .navigation--image--wrapper .navigation--image {
        border-left: 1px solid var(--linesColor);
    }

    .thumbs--bordered .navigation--image--wrapper {
        border-bottom: 1px solid var(--linesColor);
        border-top: 1px solid var(--linesColor);
    }

    .product--cards .navigation--image--wrapper .navigation--image.card--active {
        -webkit-filter: none;
        filter: none;
    }


    @media only screen and (max-width: 570px) {
        .product--cards {
            height: 100svh;
            overflow: hidden;
        }

        .product--cards .products--wrapper .product--item {
            width: 70%;
            height: 50%;
        }
    }

    /*==================================== 
    // Products Cards
    ======================================*/

    /*==================================== 
    // Products Slideshow
    ======================================*/

    .products--slideshow {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        position: relative;
    }

    .products--slideshow .product--image--gallery {
        position: absolute;
        overflow: hidden;
    }

    .products--slideshow .product--image--gallery .image--gallery--wrapper {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .products--slideshow .product--image--gallery .image--gallery--wrapper .product--gallery--image {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .products--slideshow .product--image--gallery .image--gallery--wrapper .product--gallery--image .parallax--wrap {
        position: absolute;
    }

    .products--slideshow .product--image--gallery.image--gallery--left--to--right .product--gallery--image {
        right: 0;
        left: unset;
    }

    .products--slideshow .product--image--gallery.image--gallery--left--to--right .product--gallery--image .parallax--wrap {
        right: 0;
        left: unset;
    }

    .products--slideshow .product--image--gallery.image--gallery--right--to--left .product--gallery--image .parallax--wrap {
        left: 0;
        right: unset;
    }

    .products--slideshow .product--image--gallery .product--gallery--image .parallax--wrap img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .products--slideshow .product--image--gallery.image--gallery--left--to--right {
        left: 0%;
        top: 0%;
        width: 50%;
        height: 100%;
        --transformX: 0;
        --transformY: 0;
        -webkit-transform: translateX(var(--transformX)) translateY(var(--transformY));
        -ms-transform: translateX(var(--transformX)) translateY(var(--transformY));
        transform: translateX(var(--transformX)) translateY(var(--transformY));
        z-index: -1;
    }

    .products--slideshow .product--image--gallery.image--gallery--right--to--left {
        left: 50%;
        top: 10%;
        width: 25%;
        height: 35%;
        --transformX: -50%;
        --transformY: 0;
        -webkit-transform: translateX(var(--transformX)) translateY(var(--transformY));
        -ms-transform: translateX(var(--transformX)) translateY(var(--transformY));
        transform: translateX(var(--transformX)) translateY(var(--transformY));
    }

    .products--slideshow .product--wrapper {
        position: relative;
        width: 30%;
        height: 50%;
        left: 95%;
        -webkit-transform: translateX(-100%) translateY(-50%);
        -ms-transform: translateX(-100%) translateY(-50%);
        transform: translateX(-100%) translateY(-50%);
        top: 50%;
    }

    .products--slideshow .product--wrapper .product--vertical--carousel--wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }

    .products--slideshow .product--wrapper .product--vertical--carousel--wrap .product--item {
        height: 100vh;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .products--slideshow .slider--navigation {
        position: absolute;
        z-index: 999999;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: 20px;
        float: right;
        bottom: 50px;
        right: 50px;
        --transformX: 0;
        --transformY: 0;
        -webkit-transform: translateX(var(--transformX)) translateY(var(--transformY));
        -ms-transform: translateX(var(--transformX)) translateY(var(--transformY));
        transform: translateX(var(--transformX)) translateY(var(--transformY));
    }


    @media only screen and (max-width: 550px) {
        .products--slideshow {
            height: 100svh;
        }

        .products--slideshow .product--image--gallery.image--gallery--left--to--right {
            display: none;
        }

        .products--slideshow .product--image--gallery.image--gallery--right--to--left {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
            z-index: -1;
        }

        .products--slideshow .product--wrapper {
            width: 80%;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
            top: 50%;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
        }


    }

    /*==================================== 
    // Products Slideshow
    ======================================*/
   


 /*====================================
       Showcase Rounded
    ======================================*/

.showcase--rounded {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    height: 100vh;
    -webkit-perspective: 800px;
    perspective: 800px;
    width: 100%;
    z-index: 1;
    user-select: none;
    --totalRotate: 150
}

.showcase--rounded .showcase--rounded--wrapper {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(200px);
    overflow: visible;
    width: 100%;
    height: 100%;
    position: relative;
    pointer-events: none;
}

.showcase--rounded .showcase--rounded--wrapper>div {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    z-index: 99;
    height: 700px;
    width: 200px;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: rotateY(var(--rotateX)) translateZ(-900px);
    transform-origin: '50% 50%';
    border-radius: 10px;
    pointer-events: all;
}

.showcase--rounded.is__active .project--container {
    transform: rotateY(0) translateZ(0);
}

.showcase--rounded .project--container .zeyna--portfolio--project {
    height: 100%
}

.showcase--rounded .showcase--project img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.showcase--rounded .showcase--project .portfolio--project--wrapper,
.showcase--rounded .showcase--project .portfolio--project--wrapper a,
.showcase--rounded .showcase--project .portfolio--project--wrapper a .project--image,
.showcase--rounded .showcase--project .portfolio--project--wrapper a .project--image img {
    height: 100%;
}

.showcase--rounded .showcase--project .portfolio--project--wrapper .project--metas--wrap {
    opacity: 0;
    transition: opacity .4s ease
}

.showcase--rounded.is__active .showcase--project.showcase--project--active .portfolio--project--wrapper .project--metas--wrap {
    opacity: 1;
}

.showcase--rounded .showcase--rounded--wrapper>div a {
    pointer-events: none;
}


.showcase--rounded.is__active .project--container.showcase--project--active a {
    pointer-events: all
}

.showcase--rounded .close--button {
    position: absolute;
    top: 120px;
    right: 50px;
    opacity: 0;
}



.showcase--rounded .showcase--navigation {
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    gap: 80vw;
}

.showcase--rounded .showcase--navigation>span {
    pointer-events: all;
    opacity: 1
}


.showcase--rounded.first__project__active .nav--prev,
.showcase--rounded.last__project__active .nav--next {
    pointer-events: none;
    opacity: 0.3
}



.showcase--rounded.is__active .showcase--navigation,
.showcase--rounded.is__active .close--button {
    opacity: 1;
    display: flex;
    gap: 80vw;
    pointer-events: all;
    cursor: pointer;
    transition: opacity .5s ease;
    --transformX: -50%;
    --transformY: 0;
    transform: translateX(var(--transformX)) translateY(var(--transformY));

}



@media only screen and (max-width: 550px) {

    .showcase--rounded {
        perspective: 400px;
        --totalRotate: 100px
    }

    .showcase--rounded .showcase--rounded--wrapper>div {
        width: 150px
    }

    .showcase--rounded.zoomed__active .showcase--rounded--wrapper {
        transform: translate(0, 0) !important;
    }

    .close__has__bg .showcase--rounded.is__active .close--button {
        z-index: 999999999
    }

    .showcase--rounded.is__active .showcase--project .portfolio--project--wrapper .project--metas--wrap {
        width: 100%;
        bottom: 50px;
        left: 0;
        top: unset
    }

    .showcase--rounded .showcase--navigation .showcase--navigation {
        bottom: 0;
        left: 50%;
        z-index: 99999;
    }
}

/*====================================
   // Showcase Rounded
======================================*/






 /*====================================
       Showcase 3D
    ======================================*/

    .showcase--3d {
        height: 100svh;
        width: 100%;
        overflow: hidden;
        position: relative;
        perspective: 1000px;
        transform: scale(1.7)
    }
   
   
    .showcase--3d .showcase--image--wrapper {
        transform-style: preserve-3d;
        position: relative;
        height: 100%;
        width: 100%;
        pointer-events: none;
    }
   
    .showcase--3d .showcase--image--wrapper .project--container {
        width: 50vw;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 1 !important;
        pointer-events: all;
    }
   
    .showcase--3d .showcase--image--wrapper .showcase--project .project--metas--wrap {
        transform: rotateY(180deg);
        opacity: 0;
        transition: opacity 0.2s ease;
        transition-delay: 0s;
    }
   
   
    .showcase--3d .showcase--image--wrapper .project--container.active__project .project--metas--wrap {
        opacity: 1;
    }
   
   
    .showcase--3d .showcase--image--wrapper .showcase--project .project--image {
        width: 100%;
        height: 100%;
        overflow: hidden;
        opacity: 1 !important;
    }
   
    .showcase--3d .showcase--image--wrapper .showcase--project .project--image>* {
        transform: rotateY(180deg);
    }
   
    .showcase--3d .showcase--image--wrapper .showcase--project .project--image>* {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
   
   
    .showcase--3d .showcase--title--wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        z-index: 999999;
        height: 0;
        mix-blend-mode: difference;
    }
   
    .showcase--3d .showcase--title--wrapper .project--title {
        font-size: 200px;
        text-align: center;
        mix-blend-mode: difference;
        font-weight: 700;
        white-space: nowrap;
    }
   
    .showcase--3d .showcase--title--wrapper .titles--wrapper {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        height: fit-content;
        display: none
    }
   
    .showcase--3d .showcase--image--wrapper .project--container {
        transform: translate(-50%, -50%) rotateY(var(--rotate)) translateZ(1100px);
    }
   
    @media only screen and (max-width: 550px) {
        body:has(.showcase--3d) {
            width: fit-content
        }
   
        body:has(.showcase--3d) header {
            position: fixed;
            width: 100vw;
            top: 0;
            left: 0;
        }
    }
   
   
   
   
   
   
   

/*====================================
       Showcase Explore
    ======================================*/



 .elementor-widget-peshowcaseexplore {
     width: 100%;
     height: 100vh;
     overflow: hidden;
 }

 .showcase--explore {
     display: block;
     position: relative;
     width: fit-content;
     height: fit-content;
     will-change: transform;
     gap: 0;

 }

 .infinite__active .showcase--explore {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(2, 1fr);
 }

 .showcase--explore .showcase--explore--wrapper {
     width: 140vw;
     height: 140vh;
     will-change: transform;
     position: relative;
     display: block;
     top: 50%;
     left: 50%;

 }

 .infinite__active .showcase--explore .showcase--explore--wrapper {
     transform: none;
     top: 0;
     left: 0;
 }

 .showcase--explore .showcase--explore--wrapper .project--container {
     width: 500px;
     overflow: hidden;
     position: absolute;
     transform: translate(-50%, -50%);
     transition: all .75s ease;
     will-change: transform;
 }

 .infinite__active .showcase--explore .showcase--explore--wrapper .zeyna--portfolio--project .portfolio--project--wrapper {
     width: 80%
 }

 .showcase--explore .showcase--explore--wrapper .zeyna--portfolio--project .project--image>* {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .showcase--explore .showcase--explore--wrapper .zeyna--portfolio--project .portfolio--project--wrapper {
     width: 40%;
 }

 .showcase--explore.hovered .showcase--explore--wrapper .zeyna--portfolio--project {
     filter: grayscale(1) blur(5px) brightness(.85)
 }

 .showcase--explore.hovered .showcase--explore--wrapper .zeyna--portfolio--project:hover {
     filter: grayscale(0) blur(0px) brightness(1)
 }


 @media only screen and (max-width: 570px) {
     .showcase--explore .showcase--explore--wrapper {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: repeat(3, 1fr);
         gap: 10px;
         width: 200vw;
         height: 150vh;
         position: relative;
         transform-origin: top left;
         transform: translateX(-50vw) translateY(-50vh);
         will-change: transform;
     }



     .showcase--explore .showcase--explore--wrapper .project--container {
         width: 60vw
     }
 }

 /*====================================
    // Showcase Explore
    ======================================*/





    /*====================================
       Showcase Carousel
    ======================================*/

    .showcase--carousel {
        height: 100svh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transform: none !important;
        justify-content: center;
    }

    .showcase--carousel .showcase--carousel--wrapper {
        display: flex;
        flex-wrap: nowrap;
        width: fit-content;
        height: fit-content;
        position: relative;
        gap: 32px;
    }

    .showcase--carousel .showcase--carousel--wrapper .showcase--project {
        width: 300px;
        height: 400px;
        transition: all 0.5s ease;
        transform: scale(0.9);
    }

    .showcase--carousel .showcase--carousel--wrapper .showcase--project:hover {
        transform: scale(1);
    }

    .showcase--carousel .showcase--carousel--wrapper .showcase--project .project--image {
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    .showcase--carousel .showcase--carousel--wrapper .showcase--project .project--image img,
    .showcase--carousel .showcase--carousel--wrapper .showcase--project .project--image>div {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .showcase--carousel .showcase--carousel--wrapper .showcase--project .project--metas--wrap {
        opacity: 0;
        transition: all .5s ease;
    }


    .showcase--carousel .showcase--carousel--wrapper .showcase--project:hover .project--metas--wrap {
        opacity: 1;
    }

    @media only screen and (max-width: 570px) {
        .showcase--carousel .showcase--carousel--wrapper .showcase--project .project--metas--wrap {
            opacity: 1;
        }

        .showcase--carousel .showcase--carousel--wrapper .showcase--project {
            transform: scale(1);
        }
    }

    /*====================================
    // Showcase Carousel
    ======================================*/







    /*==================================== 
       Showcase Vertical Carousel
    ======================================*/

    .showcase--vertical--slider {
        height: 100vh;
        overflow: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        --zoomGap: 20px;
        --productGap: 50px;
        --zoomWidth: 150px;
        --zoomHeight: 120px
    }

    .showcase--vertical--slider .showcase--vertical--scroll--wrapper {
        position: absolute;
        z-index: 9999999;
    }

    .showcase--vertical--slider .showcase--vertical--products--wrapper {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .showcase--vertical--slider .showcase--vertical--products--wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        top: 50%;
        position: relative;
        gap: var(--productGap);

    }

    .showcase--vertical--slider .showcase--vertical--products--wrapper .showcase--product .product--meta {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .showcase--vertical--slider .showcase--vertical--scroll--cards {
        width: 33vw;
        gap: var(--zoomGap);
        position: relative;
        top: 50vh;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }

    .showcase--vertical--slider .scroll--scope {
        position: absolute;
        top: 50vh;
        left: 50%;
        width: calc(var(--zoomWidth) + var(--zoomGap));
        height: calc(var(--zoomHeight) + var(--zoomGap));
        border: 1px solid var(--mainColor);
        opacity: 0.4;
        border-radius: 10px;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 99999
    }

    .showcase--vertical--slider .showcase--vertical--scroll--cards .scroll--card--image {
        width: var(--zoomWidth);
        height: var(--zoomHeight);
        margin: 0 auto;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        border-radius: 8px;
        overflow: hidden;
    }

    .showcase--vertical--slider img,
    .showcase--vertical--slider .pe-video {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .showcase--vertical--slider .showcase--vertical--products--wrapper .showcase--product {
        width: 500px;
        height: 600px;
        float: left;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        overflow: hidden;
    }

    .showcase--vertical--slider .showcase--vertical--products--wrapper .showcase--product a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .showcase--vertical--slider .showcase--vertical--products--wrapper .showcase--product .product--image {
        height: 100%;
        overflow: hidden;
        border-radius: 16px;
    }

    .showcase--vertical--slider .showcase--vertical--products--wrapper .showcase--product .product--image .parallax--wrap {
        width: 100%;
        height: 125%;
    }

    @media only screen and (max-width: 570px) {

        .showcase--vertical--slider {
            height: -webkit-fit-content;
            height: -moz-fit-content;
            height: fit-content;
        }

        .showcase--vertical--slider .showcase--vertical--scroll--wrapper {
            display: none;
        }

        .showcase--vertical--slider .showcase--vertical--products--wrapper .showcase--product {
            width: 100%;

        }
    }

    /*==================================== 
    // Showcase Vertical Carousel
    ======================================*/









    /*====================================
        Showcase List
    ======================================*/
    .showcase--list {
        display: flex;
        flex-direction: row;
        height: 100vh;
        overflow: hidden;
    }

    .showcase--list .showcase--list--title--wrapper {
        width: 100%;
        position: relative;

    }

    .showcase--list .showcase--list--image--wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 25vw;
        height: 45vh;
        z-index: 3;
        pointer-events: none;
        transform: translate(-50%, -50%);
    }

    .showcase--list .showcase--list--title--wrapper {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        height: fit-content;
        align-items: center;
    }


    .showcase--list .showcase--list--title--wrapper .project--image {
        display: none;
    }

    .showcase--list .showcase--list--title--wrapper .zeyna--portfolio--project.portfolio--project--list .project--metas--wrap {
        display: none;
    }

    .showcase--list .showcase--list--title--wrapper.hovered .showcase--project--title {
        opacity: 0.2;
    }

    .showcase--list .showcase--list--title--wrapper .showcase--project--title a {
        display: none;
    }

    .showcase--list .showcase--list--title--wrapper.hovered .showcase--project--title.showcase--project--active {
        transform: translateX(-50px);
        opacity: 1;
    }

    .showcase--list .showcase--list--image--wrapper .showcase--project--image {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    .showcase--list .showcase--list--image--wrapper .showcase--project--image img,
    .showcase--list .showcase--list--image--wrapper .showcase--project--image .pe-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    @media only screen and (max-width: 550px) {
        .showcase--list .showcase--project--title {
            margin: 0 !important;
            line-height: 2em;
            transform: translateX(0px) !important;
            white-space: nowrap;
            font-size: 40px;
        }

        .showcase--list .showcase--list--title--wrapper.hovered .showcase--project--title.showcase--project--active {
            opacity: 1;
        }

        .showcase--list {
            display: block;
            position: relative;
        }

        .showcase--list .showcase--list--image--wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .showcase--list .showcase--list--image--wrapper .showcase--project--image {
            top: 0;
            left: 0;
            transform: translate(0, 0);
            width: 100%;
            z-index: 99999;
            pointer-events: none;
        }
    }


    /*====================================
       Fullscreen Slideshow
    ======================================*/

    .showcase--fullscreen--slideshow {
        width: 100%;
        height: 100vh;
    }

    .showcase--fullscreen--slideshow>.swiper-wrapper {
        height: 100%;
    }

    .showcase--fullscreen--slideshow .zeyna--portfolio--project .portfolio--project--wrapper,
    .showcase--fullscreen--slideshow .zeyna--portfolio--project .portfolio--project--wrapper>a,
    .showcase--fullscreen--slideshow .zeyna--portfolio--project .portfolio--project--wrapper div {
        height: 100% !important;
    }

    .showcase--fullscreen--slideshow[data-parallax="true"] .zeyna--portfolio--project .portfolio--project--wrapper>a {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .showcase--fullscreen--slideshow[data-parallax="true"] .zeyna--portfolio--project .portfolio--project--wrapper div {
        width: 100%;
        height: 100%;
    }

    .showcase--fullscreen--slideshow--thumbs {
        position: absolute;
        top: 50%;
        left: 0;
        height: auto;
        width: 100vw;
        right: 1rem;
        transform: translateY(-50%);
        z-index: 2;
        user-select: none;
    }

    .showcase--fullscreen--slideshow--thumbs .swiper-slide {
        height: 100%;
        overflow: hidden;
        --bakdropWidth: 0%;
    }



    .showcase--fullscreen--slideshow--thumbs .swiper-slide .project--image::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: -2px;
        width: var(--bakdropWidth);
        height: 100%;
        background: rgba(0, 0, 0, .2);
        backdrop-filter: blur(5px);
        /* transition: all 1s ease; */
        border-right: 2px solid red;
        box-sizing: content-box;
        z-index: 3;
    }

    .showcase--fullscreen--slideshow--thumbs .swiper-slide.before-active:not(.swiper-slide-active) .project--image::after {
        width: 100%;
        left: 0px;
    }

    .showcase--fullscreen--slideshow--thumbs .zeyna--portfolio--project .portfolio--project--wrapper .project--image>img,
    .showcase--fullscreen--slideshow--thumbs .zeyna--portfolio--project .portfolio--project--wrapper .project--image>div {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .showcase--fullscreen--slideshow--thumbs .zeyna--portfolio--project .portfolio--project--wrapper .project--image {
        height: 150px;
        overflow: hidden;
        position: relative;
    }

    .showcase--fullscreen--slideshow--thumbs .swiper-slide {
        transition: opacity .7s ease-in-out;
    }

    .showcase--fullscreen--slideshow--thumbs .swiper-slide.before-active:not(.swiper-slide-active) {
        /* opacity: .5 */
    }

    .showcase--fullscreen--slideshow--thumbs .swiper-slide .pe--button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 22
    }


    .showcase--fullscreen--slideshow--thumbs .swiper-slide .pe--button,
    .showcase--fullscreen--slideshow--thumbs .project--main--wrap,
    .showcase--fullscreen--slideshow--thumbs .project--details--wrap {
        opacity: 0;
        transition: opacity .5s ease;
        pointer-events: none
    }

    .showcase--fullscreen--slideshow--thumbs .swiper-slide.swiper-slide-active .pe--button,
    .showcase--fullscreen--slideshow--thumbs .swiper-slide.swiper-slide-active .project--main--wrap,
    .showcase--fullscreen--slideshow--thumbs .swiper-slide.swiper-slide-active .project--details--wrap {
        opacity: 1;
        pointer-events: all
    }

    .showcase--fullscreen--slideshow--arrows {
        position: absolute;
        bottom: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        width: 300px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        user-select: none;

    }

    .showcase--fullscreen--slideshow--arrows span {
        cursor: pointer;

    }

    span.thumbs--active--hold {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        background:
            linear-gradient(to right, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 0 0,
            linear-gradient(to right, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 0 100%,
            linear-gradient(to left, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 100% 0,
            linear-gradient(to left, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 100% 100%,
            linear-gradient(to bottom, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 0 0,
            linear-gradient(to bottom, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 100% 0,
            linear-gradient(to top, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 0 100%,
            linear-gradient(to top, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 100% 100%;
        background-repeat: no-repeat;
        background-size: var(--borderSize) var(--borderSize);
        --borderSize: 20px;
        --borderWidth: 1px;
        width: 300px;
        height: 110%;
        z-index: 2;
        pointer-events: none;
    }

    @media only screen and (max-width: 570px) {

        .showcase--fullscreen--slideshow--arrows,
        span.thumbs--active--hold {
            width: 250px;
        }

        .showcase--fullscreen--slideshow--arrows {

            bottom: 30%;

        }
    }


    .showcase--fullscreen--slideshow--thumb p.project--title {
        white-space: nowrap;
    }


    /*====================================
       Showcase Carousel
    ======================================*/

    .showcase--carousel {
        height: 100svh;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        overflow: hidden;
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .showcase--carousel .showcase--carousel--wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        position: relative;
        gap: 32px;
    }

    .showcase--carousel .showcase--carousel--wrapper .showcase--product {
        width: 300px;
        height: 400px;
        -webkit-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }

    .showcase--carousel .showcase--carousel--wrapper .showcase--product:hover {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    .showcase--carousel .showcase--carousel--wrapper .showcase--product .product--meta {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .showcase--carousel .showcase--carousel--wrapper .showcase--product .product--image {
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    .showcase--carousel .showcase--carousel--wrapper .showcase--product .product--image img,
    .showcase--carousel .showcase--carousel--wrapper .showcase--product .product--image>div {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .showcase--carousel .showcase--carousel--wrapper .showcase--product .product--meta {
        opacity: 0;
        -webkit-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
    }


    .showcase--carousel .showcase--carousel--wrapper .showcase--product:hover .product--meta {
        opacity: 1;
    }

    @media only screen and (max-width: 570px) {
        .showcase--carousel .showcase--carousel--wrapper .showcase--product .product--meta {
            opacity: 1;
        }

        .showcase--carousel .showcase--carousel--wrapper .showcase--product {
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
        }
    }

    /*====================================
    // Showcase Carousel
    ======================================*/

    /*==================================== 
       Showcase Vertical Slider
    ======================================*/

    .showcase--vertical--slider {
        height: 100vh;
        overflow: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        --zoomGap: 20px;
        --productGap: 50px;
        --zoomWidth: 150px;
        --zoomHeight: 120px
    }

    .showcase--vertical--slider .showcase--vertical--scroll--wrapper {
        position: absolute;
        z-index: 9999999;
    }

    .showcase--vertical--slider .showcase--vertical--products--wrapper {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .showcase--vertical--slider .showcase--vertical--products--wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        top: 50%;
        position: relative;
        gap: var(--productGap);

    }

    .showcase--vertical--slider .showcase--vertical--products--wrapper .showcase--product .product--meta {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .showcase--vertical--slider .showcase--vertical--scroll--cards {
        width: 33vw;
        gap: var(--zoomGap);
        position: relative;
        top: 50vh;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }

    .showcase--vertical--slider .scroll--scope {
        position: absolute;
        top: 50vh;
        left: 50%;
        width: calc(var(--zoomWidth) + var(--zoomGap));
        height: calc(var(--zoomHeight) + var(--zoomGap));
        border: 1px solid var(--mainColor);
        opacity: 0.4;
        border-radius: 10px;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 99999
    }

    .showcase--vertical--slider .showcase--vertical--scroll--cards .scroll--card--image {
        width: var(--zoomWidth);
        height: var(--zoomHeight);
        margin: 0 auto;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        border-radius: 8px;
        overflow: hidden;
    }

    .showcase--vertical--slider img,
    .showcase--vertical--slider .pe-video {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .showcase--vertical--slider .showcase--vertical--products--wrapper .showcase--product {
        width: 500px;
        height: 600px;
        float: left;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        overflow: hidden;
    }

    .showcase--vertical--slider .showcase--vertical--products--wrapper .showcase--product a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .showcase--vertical--slider .showcase--vertical--products--wrapper .showcase--product .product--image {
        height: 100%;
        overflow: hidden;
        border-radius: 16px;
    }

    .showcase--vertical--slider .showcase--vertical--products--wrapper .showcase--product .product--image .parallax--wrap {
        width: 100%;
        height: 125%;
    }

    @media only screen and (max-width: 570px) {

        .showcase--vertical--slider {
            height: -webkit-fit-content;
            height: -moz-fit-content;
            height: fit-content;
        }

        .showcase--vertical--slider .showcase--vertical--scroll--wrapper {
            display: none;
        }

        .showcase--vertical--slider .showcase--vertical--products--wrapper .showcase--product {
            width: 100%;

        }
    }

    /*==================================== 
    // Showcase Vertical Slider
    ======================================*/

    /** Videos
      ------------------------------ */

    .elementor-widget-pevideo .elementor-widget-container {
        overflow: hidden
    }


    .pe-video.vid--interracted.vid--paused .plyr__video-wrapper {
        background: #000 !important;
    }

    .pe-video {
        --plyr-color-main: var(--mainBackground);
        --plyr-color-secondary: var(--mainColor);
        --plyr-range-thumb-background: var(--plyr-color-main);
    }

    .showcase-project .pe-video .plyr__video-wrapper {
        background: none !important;
    }

    .pe-video .plyr--playing iframe {
        opacity: 1;
        height: 100%;
    }

    .pe--large--play.icons {
        width: 75px;
        height: 75px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        z-index: 3;
    }

    .pe-video[data-lightbox=true] .plyr__controls {
        opacity: 0;
        pointer-events: none;
    }

    .pe-video[data-lightbox=true].lightbox--started .plyr__controls {
        opacity: 1;
        pointer-events: all
    }

    /* 
    .pe--large--play.icons>div {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 50%;
        height: 50%;
    }
     */
    .pe--large--play.icons svg {
        fill: var(--plyr-color-secondary);
        display: block;
    }

    /* .pe--large--play.icons:hover::after {
        background: var(--plyr-color-secondary);
    }
     */
    /* .pe--large--play.icons:hover svg {
        fill: var(--plyr-color-main);
    }
     */

    .pe--large--play.icons:hover .pe--play img {
        -webkit-filter: invert(1);
        filter: invert(1);
    }

    .pe--large--play.icons>div.pe--pause {
        opacity: 0;
    }

    .pe-video.autoplay--running .plyr--video .plyr__controls {
        opacity: 0;
        pointer-events: none;
        -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%);
    }

    .plyr__video-embed__container {
        height: 100%;
    }

    .pe--large--play {
        position: absolute !important;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 1;
        -webkit-transition: opacity .3s ease;
        -o-transition: opacity .3s ease;
        transition: opacity .3s ease;
        z-index: 2;
    }

    .pe-video.vid--playing .pe--large--play {
        opacity: 0;
    }

    .pe-video.lightbox-open {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        z-index: 999999;
    }


    .pe-video.lightbox-open .plyr {
        height: 85% !important;
        width: auto !important;
        top: unset;
        left: unset;
        transform: none;
        opacity: 1;
    }

    .plyr--full-ui input[type=range]:focus {
        color: var(--plyr-color-main)
    }

    .pe-video.lightbox-open::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0;
        z-index: -1;
        -webkit-transition: opacity .3s ease;
        -o-transition: opacity .3s ease;
        transition: opacity .3s ease
    }

    .pe-video.lightbox-open.lightbox--started::after {
        opacity: .8
    }

    .pe--lightbox--close {
        color: #fff;
        position: absolute;
        top: 1vw;
        right: 1vw;
        opacity: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        width: 50px;
        height: 50px;
        z-index: 1;

        transition: all .25s ease .5s;
        pointer-events: none;
    }

    .pe--lightbox--close.x-icon {
        background: var(--mainBackground);
        border-radius: 50%;
    }


    .lightbox--started .pe--lightbox--close {
        opacity: 1;
        /* transition: all .25s ease; */
    }

    .lightbox--started .pe--lightbox--close.x-icon {
        pointer-events: all;
    }

    .lightbox--started .pe--lightbox--close.x-icon:hover {
        opacity: .4
    }

    .pl--close--icon {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 50%;
        height: 50%;
    }

    .pl--close--icon img {
        display: block;
    }

    .pe--lightbox--hold {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
    }

    .lb-hold .pe--lightbox--hold {
        position: static
    }

    .plyr--stopped .plyr__controls {
        opacity: 0;
        pointer-events: none;
        -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%);
    }

    .pe--large--play.texts {
        color: var(--mainColor);
        cursor: pointer;
        font-size: 1rem;
        letter-spacing: normal;
        white-space: nowrap;
        z-index: 3;
    }



    .lightbox-open .plyr__video-wrapper.plyr__video-embed {
        width: 100% !important;
        height: 100% !important;
    }

    @media only screen and (max-width: 570px) {
        .pe--large--play {
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .pe-video.lightbox-open .plyr__video-embed__container {
            -webkit-transform: translateY(-10%) !important;
            -ms-transform: translateY(-10%) !important;
            transform: translateY(-10%) !important;
        }

        .pe-video.lightbox-open .plyr {
            width: 100vw;
            height: 100vh;
        }

    }

    .pe--video--poster {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all .4s ease;
        -o-transition: all .4s ease;
        transition: all .4s ease;
    }



    .pe-video:has(.plyr--stopped) .pe--video--poster {
        opacity: 1;
        visibility: visible;
    }

    .pe--video--poster img {
        width: 100%;
        height: 100% !important;
        -o-object-fit: cover;
        object-fit: cover;
        display: block;
        object-position: center center;
    }

    /* Rounded Skin */

    .pe-video.skin--rounded {
        --plyr-video-control-color: var(--plyr-color-secondary);
        --plyr-control-spacing: 20px;
        --plyr-font-size-small: 18px;
    }

    .pe-video.skin--rounded .plyr {
        overflow: hidden;
    }

    .pe-video.skin--rounded .plyr__control {
        background: var(--plyr-color-main);
        border-radius: 50%;
        padding: 1em;
        border: 0.5px solid var(--plyr-color-secondary);
    }

    .pe-video.skin--rounded .plyr--video .plyr__control:hover {
        opacity: 1;
        color: var(--plyr-color-main);
        background: var(--plyr-video-control-color)
    }


    .pe-video.skin--rounded .plyr__controls .plyr__controls__item.plyr__time {
        line-height: 1;
        background: var(--plyr-color-main);
        border-radius: 50px;
    }

    .pe-video.skin--rounded .plyr__controls__item.plyr__time--current.plyr__time {
        padding: 1em 0em 1em 4em;
        margin-left: -3em
    }

    .pe-video.skin--rounded .plyr__controls__item.plyr__time--current.plyr__time::after {
        content: '/';
        margin-left: 0.5em
    }

    .pe-video.skin--rounded .plyr__controls__item.plyr__time--duration.plyr__time {
        padding: 1em 1em 1em 1.8em !important;
        margin-left: -1.4em;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        z-index: -1
    }

    .pe-video.skin--rounded .plyr__time+.plyr__time:before {
        display: none
    }

    .pe-video.skin--rounded .plyr--video .plyr__controls {
        background: none
    }

    .pe-video.skin--rounded .plyr__controls .plyr__controls__item:first-child {
        margin-right: 0
    }

    .pe-video.skin--rounded .plyr__controls__item.plyr__time--duration.plyr__time {
        margin-right: auto
    }

    .pe-video {
        position: relative;
        user-select: none;
    }

    .video--button .plyr {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        left: 0;
        /* transform: translateX(-50%); */
    }

    .video--button .lightbox-open .pe--button {
        visibility: hidden;
        transition: all .2s ease;
    }

    /* Minimal Skin */

    .pe-video.skin--minimal {

        --plyr-control-spacing: 20px;
        --plyr-font-size-small: 16px;
        --plyr-range-track-height: 2px;
    }

    .pe-video.skin--minimal .plyr--video .plyr__control:focus-visible,
    .pe-video.skin--minimal .plyr--video .plyr__control:hover,
    .pe-video.skin--minimal .plyr--video .plyr__control[aria-expanded=true] {
        opacity: 1;
        background: none
    }

    .pe-video.skin--minimal .plyr--video .plyr__controls {
        background: none;
        color: var(--plyr-color-main);
        --plyr-color-main: var(--mainColor);
    }

    .pe-video.skin--minimal input[type='range']::-webkit-slider-thumb {
        background: var(--mainColor) !important
    }

    .pe-video.skin--minimal .plyr--video .plyr__control:hover {
        color: var(--plyr-color-secondary);
    }

    .pe-video.skin--minimal .pe--lightbox--close.x-icon {
        background: none;
        -webkit-filter: invert(1);
        filter: invert(1);
    }


    /** Slider
      ------------------------------ */

    .fade--edges .pe--slider {
        --fade--color: var(--mainBackground);
    }

    .fade--edges .pe--slider::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, var(--fade--color) 10%, rgba(255, 255, 255, 0.01) 50%);
        z-index: 2;
    }

    .fade--edges .pe--slider::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.01) 50%, var(--fade--color) 90%);
        z-index: 2;
    }

    .pe--slider--container {
        overflow: hidden;
        visibility: hidden;
    }

    .slider--effect--slide .pe--slider--container {
        overflow: hidden;
    }

    .pe--slider--container.swiper-container.swiper-initialized {
        visibility: visible;
    }

    .pe--slider--container.swiper-container.swiper-vertical {
        max-height: 100vh;
    }

    .pe--slider--slide.swiper-slide {
        height: auto;
    }

    .pe--slider--container:not(.swiper-watch-progress) .pe--slider--wrapper.swiper-wrapper {
        transition-timing-function: cubic-bezier(0.75, 0.01, 0.4, 1);
        user-select: none;
    }

    .pe--slider--slide.swiper-slide .zeyna--portfolio--project .portfolio--project--wrapper a .project--image img {
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .pe--slider--slide.swiper-slide {
        height: auto;
    }

    .pe--slider--slide.swiper-slide>div.zeyna--single--product {
        height: 100%;
    }

    .slider--highlight--active .pe--slider--slide.swiper-slide:not(.swiper-slide-active)>div {
        opacity: .2;
    }

    .slider--highlight--active .pe--slider--slide.swiper-slide>div {
        transition: opacity .4s ease;
    }

    .slider--highlight--active .pe--slider--slide.swiper-slide a {
        pointer-events: none;
    }

    .pe--slider--slide.swiper-slide.swiper-slide-active a {
        pointer-events: all;
    }

    .pe--sc--controls .swiper-pagination-clickable .swiper-pagination-bullet {
        background: var(--mainColor);
    }

    .pe--sc--controls .swiper-pagination-progressbar.swiper-pagination-horizontal {
        background: var(--secondaryColor);
        height: 1px;
        width: 40%;
    }

    .pe--sc--controls .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
        background: var(--mainColor);
    }

    .pe--sc--controls .swiper-scrollbar.swiper-scrollbar-horizontal {
        background: var(--secondaryColor);
        height: 5px;
        opacity: .3;
    }

    .pe--sc--controls .swiper-scrollbar-drag {
        background: var(--mainColor);
    }

    .pe--slider--container .slide-bgimg {
        width: 100%;
        height: 100%;
        transition-timing-function: cubic-bezier(0.75, 0.01, 0.4, 1);
    }

    .pe--slider--container .slide-bgimg .project--gallery--image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .pe--slider--container .swiper-parallax-wrap {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    /** Single Project
      ------------------------------ */

    .pe--single--project.psp--elementor {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin: 0;
        gap: 10px;
        position: relative;
    }

    .pe--single--project.psp--elementor .post-meta {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: flex-start;
        gap: 5px;
    }

    .pe--single--project.psp--elementor .post-meta {
        text-transform: uppercase;
        font-size: 16px;
        color: var(--secondaryColor);
    }


    .pe--single--project.psp--elementor .thmb {
        overflow: hidden;
        border-radius: 0px;
    }

    .pe--single--project.psp--elementor .thmb div,
    .pe--single--project.psp--elementor .thmb img,
    .pe--single--project.psp--elementor .thmb a {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center;
        object-position: center;
        -webkit-transition: -webkit-transform .5s ease;
        transition: -webkit-transform .5s ease;
        -o-transition: transform .5s ease;
        transition: transform .5s ease;
        transition: transform .5s ease, -webkit-transform .5s ease;
    }

    .pe--single--project.psp--elementor:hover .thmb img {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    .pe--single--project.psp--elementor .post-details {
        text-transform: uppercase;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .pe--single--project.psp--elementor .post-details h6.post-title {
        font-size: 1em;
    }

    .pe--single--project.psp--elementor .post-meta>div::after {
        content: "-";
        display: inline-block;
        margin-left: 5px;
    }

    .pe--single--project.psp--elementor .post-meta>div:last-child::after {
        display: none
    }



    /** Horizontal **/

    .pe--single--project.psp--elementor.style--horizontal {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .pe--single--project.psp--elementor.style--horizontal>* {
        width: 50%;
    }

    .pe--single--project.psp--elementor.style--horizontal .thmb {
        max-height: 500px;
    }

    .pe--single--project.psp--elementor.style--horizontal .post-meta {
        position: static;
        text-transform: uppercase;
        color: var(--secondaryColor);
    }

    .pe--single--project.psp--elementor.style--horizontal .post-meta>div {
        padding: 0;
        background: none;
        border-radius: 0;
    }

    .pe--single--project.psp--elementor.style--horizontal .post-meta>div>div {
        display: inline-block;
    }


    .pe--single--project.psp--elementor.style--horizontal .post-meta>div>div::after {
        content: "/";
    }

    .pe--single--project.psp--elementor.style--horizontal .post-meta>div>div:last-child::after {
        display: none;
    }

    .pe--single--project.psp--elementor.style--horizontal .post-details {
        padding: 0
    }

    .pe--single--project.psp--elementor.style--horizontal h6.post-title.entry-title {
        font-size: 3em;
        text-transform: uppercase;
        letter-spacing: -0.03em;
    }

    .horizontal--meta--wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        padding: 1em;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    /** Language/Currency Switcher
      ------------------------------ */


    .pe--language--currency--switcher {
        padding: 0;
        border-radius: 7.5px;
        position: relative;
        font-size: 16px;
        line-height: inherit;
        text-transform: uppercase;
        font-size: 14px;
        overflow: visible !important;
    }

    .pe--language--currency--switcher ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1;
    }

    .pe--language--currency--switcher.lcs--switcher li:first-child a {
        display: block;
        line-height: 1;
    }


    .switcher--column .pe--language--currency--switcher ul {
        align-items: center;
    }


    .pe--language--currency--switcher.lcs--switcher {
        border-style: solid;
        border-radius: var(--radius);
        display:
            -webkit-box;
        display:
            -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        width:
            -webkit-fit-content;
        width:
            -moz-fit-content;
        width: fit-content;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: auto;
        --radius: 25px;
        overflow: hidden;
        font-size: 1rem;
        line-height: 1;
        box-sizing: border-box;
        border-width: 1px;
    }

    .switcher--column .pe--language--currency--switcher.lcs--switcher {
        line-height: normal;
        padding: 0em;
    }

    .pe--language--currency--switcher.lcs--switcher span.lcs--follower {
        width: 3em;
        height: 2.5em;
        background: var(--mainColor);
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: var(--radius);
    }

    .switcher--column.pe--language--currency--switcher.lcs--switcher span.lcs--follower {
        width: 2.5em;
        height: 3em;
    }

    .pe--language--currency--switcher.lcs--switcher li a {
        transition: color .4s ease-out;
        padding: 0.75em;
        display: inline-block;
        line-height: 1;
    }

    .pe--language--currency--switcher.lcs--switcher li:first-child a {
        padding-left: 1em
    }

    .pe--language--currency--switcher.lcs--switcher li:last-child a {
        padding-right: 1em;
    }

    .switcher--column .pe--language--currency--switcher.lcs--switcher li {
        text-align: center;
    }

    .switcher--column .pe--language--currency--switcher.lcs--switcher li a {
        padding: 0.75em 0.75em;

    }

    .pe--language--currency--switcher.lcs--switcher li:not(.active--lang, .wcml-cs-active-currency) a:hover,
    .pe--language--currency--switcher.lcs--switcher li.wcml-cs-active-currency a,
    .pe--language--currency--switcher.lcs--switcher li.active--lang a {
        color: var(--mainBackground);
    }

    .pe--language--currency--switcher.lcs--switcher:has(li:not(.active--lang, .wcml-cs-active-currency) a:hover) li.active--lang a {
        color: var(--mainColor)
    }

    /* Dropdown  */
    .pe--language--currency--switcher.lcs--dropdown li:not(.active--lang, .wcml-cs-active-currency) {
        position: absolute;
        top: calc(100% * var(--i));
        opacity: 0;
        transition: opacity .4s ease-out;
        transition-delay: calc(0.05s * var(--i));
        pointer-events: none;
        transform: translateY(calc(5px * var(--i)));
    }

    .pe--language--currency--switcher.lcs--dropdown:has(li:hover) li:not(.active--lang, .wcml-cs-active-currency) {
        opacity: 1;
        pointer-events: all
    }

    .pe--language--currency--switcher.lcs--dropdown li a:hover {
        border-color: var(--mainColor)
    }

    .pe--language--currency--switcher.lcs--dropdown li a {
        padding: 0.75em;
        line-height: 1;
        border: 1px solid var(--linesColor);
        --radius: 50%;
        border-radius: var(--radius);
        display: block;
    }

    .pe--language--currency--switcher.lcs--dropdown li:not(.active--lang, .wcml-cs-active-currency)::before {
        content: "";
        display: block;
        width: 100%;
        height: 5px;
        position: absolute;
        top: 0;
        transform: translateY(-100%);
    }

    .lcs--basic li.zeyna--wpml--lang {
        transition: opacity .3s ease
    }



    .lcs--basic:has(li.zeyna--wpml--lang:not(.active--lang):hover) .active--lang,
    .lcs--basic li.zeyna--wpml--lang:not(.active--lang) {
        opacity: 0.5;
    }

    .lcs--basic li.zeyna--wpml--lang:hover {
        opacity: 1
    }

    .lcs--basic span.language--switcher--seperator:last-child {
        display: none;
    }

    .pe--language--currency--switcher.lcs--basic ul {
        gap: 0.25em;
    }

    .ls--active--dot .lcs--basic li.zeyna--wpml--lang::before {
        content: "•";
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
        vertical-align: top;
        font-size: 20px;
        line-height: 1rem;
        margin-right: 0.25em;
        opacity: 0
    }

    .ls--active--dot .lcs--basic li.zeyna--wpml--lang.active--lang::before {
        opacity: 1
    }

    .ls--active--dot .lcs--basic ul {
        align-items: start;
    }

    /** Interactive Grid
      ------------------------------ */

    .pe--interactive--grid {
        display: block;
    }

    .pe--interactive--grid .interactive--grid--wrapper {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        grid-auto-rows: auto;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-line-pack: center;
        align-content: center;
        justify-items: center;
    }

    .pe--interactive--grid .interactive--grid--item {
        width: 75%;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        overflow: visible;
    }

    .pe--interactive--grid .interactive--grid--item.grid--item--right {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: end;
    }

    .pe--interactive--grid .grid--item--inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        border-radius: 15px;
        overflow: visible;
        padding: 5px;
    }

    .pe--interactive--grid .grid--item--content {
        position: absolute;
        left: 0;
        min-width: 250px;
        z-index: 2;
        padding: 1em;
        height: 100%;
        max-width: 250px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .pe--interactive--grid .grid--item--content .grid--item--meta p {
        padding: 0 !important;
    }

    .pe--interactive--grid .interactive--grid--item.active {
        width: 100%;
        -webkit-transform: rotate(0deg) !important;
        -ms-transform: rotate(0deg) !important;
        transform: rotate(0deg) !important;
    }

    .pe--interactive--grid .interactive--grid--item.active .grid--item--content {
        position: absolute;

    }

    .pe--interactive--grid .interactive--grid--item.active .grid--item--inner {
        position: absolute;
        width: 170%;
        z-index: 5;
        border: 1px solid var(--linesColor);
        height: auto;
    }

    .pe--interactive--grid .grid--item--image {
        border-radius: 10px;
        overflow: hidden;
    }

    .pe--interactive--grid .interactive--grid--item.active .grid--item--image {
        margin-left: 250px
    }

    .pe--interactive--grid .grid--item--image img {
        width: 100%;
        display: block;
        height: 100%;
    }

    .pe--interactive--grid .grid--item--highlights {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: 5px;
        opacity: 1;
        -webkit-transition: all .4s ease .65s;
        -o-transition: all .4s ease .65s;
        transition: all .4s ease .65s;
        padding: 0 10px;
    }

    .expand--items--yes .pe--interactive--grid .grid--item--highlights {
        opacity: 0
    }

    .grid--item--meta {
        opacity: 0;
        -webkit-transition: all .4s ease 0s;
        -o-transition: all .4s ease 0s;
        transition: all .4s ease 0s;
    }


    .pe--interactive--grid .interactive--grid--item.active .grid--item--highlights,
    .pe--interactive--grid .interactive--grid--item.active .grid--item--meta {
        opacity: 1;

    }


    .pe--interactive--grid .grid--item--highlights>div {
        position: relative;
        display: block;
        font-size: 18px;
    }

    .pe--interactive--grid .grid--item--highlights>div svg {
        width: 1em;
        height: 1em;
        fill: var(--mainColor);
    }

    .pe--interactive--grid .grid--item--highlights>div>span:last-child {
        position: absolute;
        white-space: nowrap;
        top: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        background: var(--mainColor);
        color: var(--secondaryBackground);
        padding: 5px 10px;
        font-size: 12px;
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(0%);
        -ms-transform: translateX(-50%) translateY(0%);
        transform: translateX(-50%) translateY(0%);
        -webkit-transition: all .4s ease;
        -o-transition: all .4s ease;
        transition: all .4s ease;
        pointer-events: none;
        border-radius: 5px;
    }

    .pe--interactive--grid .grid--item--highlights>div:hover>span:last-child {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(-100%);
        -ms-transform: translateX(-50%) translateY(-100%);
        transform: translateX(-50%) translateY(-100%);
    }

    .expand--items--yes .pe--interactive--grid .grid--item--image {
        pointer-events: none;
    }

    .pe--interactive--grid .grid--item--image {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }


    .elementor-widget-peinteractivegrid:not(.expand--items--yes) .pe--interactive--grid .grid--item--image {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
    }

    .elementor-widget-peinteractivegrid:not(.expand--items--yes) .pe--interactive--grid .grid--item--image>.grid--item--sec--title {
        padding: 1em 7.5px;
    }

    .elementor-widget-peinteractivegrid:not(.expand--items--yes) .pe--interactive--grid .grid--item--inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 20px;
    }

    .elementor-widget-peinteractivegrid:not(.expand--items--yes) .pe--interactive--grid .grid--item--highlights {
        width: 100%;
    }

    .pe--interactive--grid .grid--item--image a {
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid var(--linesColor);
    }

    .pe--interactive--grid .grid--item--image>.grid--item--sec--title {
        padding: 7.5px 10px 7.5px 15px;
    }

    .pe--interactive--grid .interactive--grid--item.active .grid--item--image>.grid--item--sec--title {
        height: 0;
        padding: 0;
        opacity: 0
    }

    .pe--interactive--grid .interactive--grid--item.active .grid--item--image {
        pointer-events: all;
    }

    .pe--interactive--grid .interactive--grid--item.active .grid--item--image a {

        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .grid--item--close--icon {
        -webkit-transition: all .3s ease .65s;
        -o-transition: all .3s ease .65s;
        transition: all .3s ease .65s;
        position: absolute;
        top: 1em;
        right: 1em;
        background: var(--secondaryBackground);
        border-radius: 1em;
        line-height: 1;
        padding: 5px;
        cursor: pointer;
        opacity: 0;
        z-index: 1;
    }

    .grid--item--close--icon svg {
        fill: var(--mainColor);
        width: 18px;
        height: 18px;
    }

    .grid--item--close--icon:hover {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .pe--interactive--grid .interactive--grid--item.active .grid--item--close--icon {
        opacity: 1
    }

    .grid--item--inner span.item--highlight {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #bb0000;
        font-size: 13px;
        line-height: 1;
        padding: 5px 10px;
        border-radius: 5px;
        color: #fff;
        font-weight: 500;
        z-index: 2;
    }



    @media only screen and (max-width: 570px) {
        .pe--interactive--grid .grid--item--image {
            pointer-events: all;
        }
    }

    .filters--item.filters_on-sale .filter--label {
        margin: 0 !important;
    }

    /** Blog Posts
      ------------------------------ */

    .pe--posts--filters ul.term--list {
        list-style: none;
        display: flex;
        gap: 1em;
        align-items: center;
    }

    .pe--blog--posts--controls .pe--posts--filters {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .pe--blog--posts--wrapper {
        transition: opacity .4s ease;
    }

    .pe--blog--posts--wrapper.filters--loading {
        opacity: 0.3;
        pointer-events: none;
    }

    .pe--blog--posts--wrapper.hidden {
        opacity: 0;
    }

    .pe--posts--filters ul.term--list:has(.active) li.term-item:not(.active) {
        opacity: .5;
    }

    .pe--posts--filters ul.term--list li {
        cursor: pointer;
    }

    .posts--pagination.pagination--ajax-load-more {
        width: fit-content;
    }

    .posts--pagination.pagination--ajax-load-more:has(.hidden) {
        visibility: hidden;
    }

    .pe--blog--posts--wrapper {
        display: grid;
        grid-template-columns: repeat(var(--columns), 1fr);
        --columns: 3;
        column-gap: 30px;
        row-gap: 50px;
    }

    /****** Single Post  /******/

    .pe--single--post.psp--elementor {
        margin: 0
    }

    .pe--single--post--wrapper {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .pe--single--post--details {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem;
        color: var(--mainColor)
    }

    .pe--post--excerpt.pe--styled--object>p {
        font-size: inherit;
        color: var(--secondaryColor)
    }

    .pe--post--meta {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
    }

    .pe--post--meta,
    .pe--post--meta a {
        color: var(--secondaryColor);
    }

    .metas--seperator .pe--post--meta>div a::after {
        content: "/";
        margin-left: 0.5rem;
    }

    .pe--post--meta>div:last-child a::after {
        display: none;
    }

    .pe--single--post--image {
        display: block;
        overflow: hidden;
        width: 100%;
    }

    .pe--single--post--image a,
    .pe--single--post--image a img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }


    .post-thumbnail.single-post-image {
        width: 100%;
        height: 100%;
    }

    .hover--zoom-out .post-thumbnail.single-post-image {
        transform: scale(1.1);
        transition: transform .55s ease;
    }

    .hover--zoom-out .pe--single--post:hover .post-thumbnail.single-post-image {
        transform: scale(1);
    }

    .hover--zoom-in .post-thumbnail.single-post-image {
        transform: scale(1);
        transition: transform .55s ease;
    }

    .hover--zoom-in .pe--single--post:hover .post-thumbnail.single-post-image {
        transform: scale(1.1);
    }

    .single-image a.post-thumbnail {
        width: 100%;
        height: 100%;
    }

    /* Style Card  */
    .pe--single--post.psp--elementor.post--card {
        background: var(--secondaryBackground);
        padding: 1rem;
        border-radius: 5px;
        position: relative;
    }

    /* Style Metro  */
    .pe--single--post.psp--elementor.post--metro {
        position: relative;
    }

    .pe--single--post.psp--elementor.post--metro .pe--single--post--details {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 3rem;
        z-index: 2;
        height: 100%;
        justify-content: end;
    }

    .metro--image--overlay .pe--single--post.psp--elementor.post--metro .pe--single--post--details {
        --mainColor: #fff;
    }

    .metro--image--overlay .pe--single--post.psp--elementor.post--metro .pe--single--post--image::after {
        content: "";
        display: block;
        position: absolute;
        background: #000;
        background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
        width: 100%;
        height: 50%;
        z-index: 0;
        bottom: 0;
        left: 0
    }

    /* Style Horizontal  */
    .pe--single--post.psp--elementor.post--horizontal .pe--single--post--wrapper {
        flex-direction: row;
        align-items: center;
    }

    .pe--single--post.psp--elementor.post--horizontal .pe--single--post--image {
        width: 50%;
        height: 300px
    }

    .pe--single--post.psp--elementor.post--horizontal .pe--single--post--details {
        width: 50%;
    }

    /* Style Hidden Image  */
    .pe--single--post.psp--elementor.post--hidden-image {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--linesColor);

    }

    .pe--single--post.psp--elementor.post--hidden-image .pe--single--post--image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .pe--single--post.psp--elementor.post--hidden-image .pe--single--post--wrapper .pe--single--post--details {
        z-index: 2;
        min-height: 500px;
        background: var(--secondaryBackground);
        justify-content: start;
        padding: 3rem;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-between;
        transition: all .4s ease
    }

    .pe--single--post.psp--elementor.post--hidden-image:hover .pe--single--post--wrapper .pe--single--post--details {
        background: transparent;
        --mainColor: #fff;
        --secondaryColor: #fff;
    }

    .hidden--image--overlay .pe--single--post.psp--elementor.post--hidden-image .pe--single--post--image::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background: #000;
        z-index: 1;
        width: 100%;
        height: 100%;
        opacity: .3;
    }



    /* Link Wrap */
    .pe--single--post.psp--elementor a.post--link--wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        z-index: 3;
    }

    /* Post Media Widget  */
    .elementor-widget-pepostmedia .single-image div,
    .elementor-widget-pepostmedia .single-image div img {
        width: 100%;
        height: 100% !important;
        display: block;
        object-fit: cover;
    }


    /** Buttons
      ------------------------------ */

    .zeyna--portfolio--project .portfolio--project--wrapper .pe--button {
        align-self: start;
    }


    .pe--button {
        display: inline-block;
        width: auto;
        height: auto;
        /* font-size: 1rem; */
        line-height: 1;
        --paddingTop: 0em;
        --paddingRight: 0em;
        --paddingBottom: 0em;
        --paddingLeft: 0em;
        --radius: 5px;
        position: relative;
        z-index: 1;
    }

    .pe--button button {
        appearance: none;
        -webkit-appearance: none;
        background: none;
        color: var(--mainColor);
        padding: 0;
        text-align: left;
    }


    .pe--bustton--wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        overflow: visible;
    }

    .pe--button--wrapper .pb--handle {
        display: flex;
        position: relative;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.25em;
        width: 100%;
        overflow: hidden;
        border-radius: var(--radius);
        padding: var(--paddingTop) var(--paddingRight) var(--paddingBottom) var(--paddingLeft);
        user-select: none;
        cursor: pointer;
        border-color: var(--linesColor);
    }

    a.pe--scroll--button {
        cursor: pointer;
    }

    .pe--button--wrapper .pb--handle>span.pe--button--icon {
        display: block;
        position: relative;
        overflow: hidden;
        line-height: 0;
        z-index: 11;
    }

    .pe--button--wrapper .pb--handle>span.pe--button--icon i {
        display: block;
        line-height: 1;
        padding: 0;
    }

    .pe--button--wrapper .pb--handle>span.pe--button--icon svg {
        width: 1.25em;
        height: 1.25em;
        display: block;
        fill: var(--mainColor);
    }

    .pe--button--wrapper .pb--handle>span.pe--button--icon:has(svg) {
        width: auto;
        height: auto;
        display: inline-block;
        line-height: 1;
    }

    .button--underlined .pe--button--wrapper .pb--handle::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0.06em;
        left: 0;
        width: 100%;
        height: 0.05em;
        background: var(--mainColor);
    }

    span.pe--button--text span.button--sub {
        font-size: 0.8em;
        color: var(--secondaryColor);
        vertical-align: super;
        margin-left: 0.3em;
        display: inline-block;
        line-height: 1;
    }

    .hover--default.button--underlined .pe--button--wrapper .pb--handle:hover::after {
        -webkit-animation-name: toggleLine;
        animation-name: toggleLine;
        -webkit-animation-duration: .75s;
        animation-duration: .75s;
        -webkit-animation-play-state: running;
        animation-play-state: running;
        -webkit-animation-timing-function: cubic-bezier(.19, 1, .22, 1);
        animation-timing-function: cubic-bezier(.19, 1, .22, 1)
    }

    .button--rounded .pe--button--wrapper .pb--handle {
        overflow: hidden;
        --paddingTop: 0.75em;
        --paddingRight: 1.25em;
        --paddingBottom: 0.75em;
        --paddingLeft: 1.25em;
        --radius: 50px
    }

    .button--rounded .pe--button--wrapper .pb--handle::before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: var(--radius);
        background: var(--secondaryBackground);
        z-index: -1;
        border: 1px solid var(--linesColor);
        left: 50%;
        transform: translate(-50%);
    }

    .button--background .pe--button--wrapper .pb--handle {
        --paddingTop: 0.75em;
        --paddingRight: 1.25em;
        --paddingBottom: 0.75em;
        --paddingLeft: 1.25em;
        --radius: 50px
    }

    .button--background .pe--button--wrapper .pb--handle::before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 50%;
        transform: translate(-50%);
        border-radius: var(--radius);
        background: var(--secondaryBackground);
        z-index: 0;
        transition: all .3s cubic-bezier(0.89, 0.02, 0.12, 0.99)
    }

    .hover--default.button--background .pe--button--wrapper .pb--handle:hover::before {
        width: 115%;
        height: 115%;
    }

    .button--bordered .pe--button--wrapper .pb--handle {
        border: 1px solid var(--linesColor);
        border-radius: var(--radius);
        --paddingTop: 0.5em;
        --paddingRight: 0.5em;
        --paddingBottom: 0.5em;
        --paddingLeft: 1em;
        --radius: 50px;
        gap: 1.5em;
    }

    .button--sharp {
        --paddingTop: 0.75em;
        --paddingRight: 2.25em;
        --paddingBottom: 0.75em;
        --paddingLeft: 2.25em;
        --radius: 5px;
    }

    .button--sharp .pe--button--wrapper .pb--handle::before {
        content: '';
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: var(--radius);
        left: 50%;
        transform: translate(-50%);
        background: var(--secondaryBackground);
        z-index: -1;
        top: 0;
    }

    .pe--button.button--seperated {
        --paddingTop: 0.75em;
        --paddingRight: 1.25em;
        --paddingBottom: 0.75em;
        --paddingLeft: 1.25em;
        --radius: 50px;
    }

    .pe--button.button--seperated .pe--button--wrapper .pb--handle {
        padding: 0;
        user-select: none;
    }

    .button--seperated .pe--button--wrapper .pb--handle>span {
        border: 1px solid var(--linesColor);
        border-radius: 50px;
        line-height: 1
    }

    .button--seperated .pe--button--wrapper .pb--handle>span.pe--button--text {
        padding: var(--paddingTop) var(--paddingRight) var(--paddingBottom) var(--paddingLeft);
    }

    .button--seperated .pe--button--wrapper .pb--handle>span.pe--button--icon {
        padding: var(--paddingTop);
        line-height: 0;
    }

    .button--stylized {
        --paddingTop: 0.5em;
        --paddingRight: 1.25em;
        --paddingBottom: 0.5em;
        --paddingLeft: 0.5em;

    }


    .button--stylized .pe--button--wrapper .pb--handle {
        padding: var(--paddingTop) var(--paddingRight) var(--paddingBottom) var(--paddingLeft);
        --radius: 50px;
        flex-direction: row-reverse;
        gap: 1.25em;
        border: 1px solid var(--linesColor);
    }

    .button--stylized.button--row .pe--button--wrapper .pb--handle {
        --paddingLeft: 1.25em;
        --paddingRight: 0.5em;
    }

    .button--stylized.button--row .pe--button--wrapper .pb--handle::before {
        left: unset;
        right: 0
    }

    .button--stylized .pe--button--wrapper .pb--handle::before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: calc(1em + var(--paddingTop) + var(--paddingBottom));
        height: calc(1em + var(--paddingTop) + var(--paddingBottom));
        background: var(--secondaryBackground);
        z-index: -1;
        transform: translateY(-50%);
        border-radius: var(--radius);
        transition: all .3s cubic-bezier(0.89, 0.02, 0.12, 0.99)
    }

    .button--stylized.button--row-reverse .pe--button--wrapper .pb--handle::before {
        right: 0;
        left: unset;
    }

    .button--stylized .pe--button--wrapper .pb--handle:hover::before {
        width: 100%;
    }

    .button--covered .pe--button--wrapper .pb--handle {
        --paddingTop: 0.5em;
        --paddingRight: 0.75em;
        --paddingBottom: 0.5em;
        --paddingLeft: 0.75em;
        padding: var(--paddingTop) var(--paddingRight) var(--paddingBottom) var(--paddingLeft);
        gap: 2em;
        transition: all .3s cubic-bezier(0.89, 0.02, 0.12, 0.99);
        --radius: 7px;
    }


    .button--covered .pe--button--wrapper .pb--handle span.pe--button--icon {
        color: var(--secondaryBackground);
        z-index: 3;
        position: relative;
    }

    .button--covered .pe--button--wrapper .pb--handle span.pe--button--icon svg {
        fill: var(--secondaryBackground);
    }

    .button--covered .pe--button--wrapper .pb--handle::before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: var(--radius);
        background: var(--secondaryBackground);
        z-index: 1;
        left: 0;
    }

    .button--covered .pe--button--wrapper .pb--handle::after {
        content: "";
        display: block;
        position: absolute;
        width: 1.75em;
        height: 1.75em;
        background: var(--mainColor);
        right: 0.35em;
        top: 50%;
        z-index: -1;
        border-radius: var(--radius);
        transform: translateY(-50%);
        transition: all .3s cubic-bezier(0.89, 0.02, 0.12, 0.99);
        z-index: 2;
    }

    .button--row-reverse.button--covered .pe--button--wrapper .pb--handle::after {
        left: 0.35em;
        right: unset;
    }

    .button--covered .pe--button--wrapper .pb--handle:hover::after {
        width: 100% !important;
        height: 100% !important;
        right: 0;
    }

    .button--covered.button--row-reverse .pe--button--wrapper .pb--handle:hover::after {
        width: 100%;
        height: 100%;
        left: 0;
    }

    .button--covered .pe--button--wrapper .pb--handle:hover {
        color: var(--secondaryBackground)
    }


    .pe--button.button--framed .pe--button--wrapper {
        background:
            linear-gradient(to right, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 0 0,
            linear-gradient(to right, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 0 100%,
            linear-gradient(to left, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 100% 0,
            linear-gradient(to left, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 100% 100%,
            linear-gradient(to bottom, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 0 0,
            linear-gradient(to bottom, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 100% 0,
            linear-gradient(to top, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 0 100%,
            linear-gradient(to top, var(--linesColor) var(--borderWidth), transparent var(--borderWidth)) 100% 100%;
        background-repeat: no-repeat;
        background-size: var(--borderSize) var(--borderSize);
        --borderSize: 7px;
        --borderWidth: 1px
    }

    .pe--button.button--framed .pe--button--wrapper .pb--handle {
        --paddingTop: 0.75em;
        --paddingRight: 1.25em;
        --paddingBottom: 0.75em;
        --paddingLeft: 1.25em;
        --radius: 0px
    }


    .pe--button.button--marquee {
        --paddingTop: 0.65em;
        --paddingRight: 1.55em;
        --paddingBottom: 0.65em;
        --paddingLeft: 1.55em;
        --radius: 50px;
    }

    .pe--button.button--marquee .pe--button--wrapper .pb--handle {
        border: 1px solid var(--linesColor)
    }

    .pe--button.button--marquee .pe--button--wrapper .pb--handle>span {
        opacity: 0;
    }

    /* Hover Effects  */

    /* Text Hover Effects  */

    span.button--text--hover {
        position: absolute;
        left: 0;
        top: 100%;
    }

    span.pe--button--text {
        overflow: hidden;
        z-index: 4;
        white-space: nowrap;
        line-height: 1;
    }

    span.button--text--wrap {
        position: relative;
        line-height: 1;
        display: inline-block;
        -webkit-text-rendering: optimizeSpeed;
        text-rendering: optimizeSpeed;

    }

    /* Slides  */

    .pe--button[data-text-hover=slide-right] .pe--button--wrapper .pb--handle .pe--button--text .button--text--wrap,
    .pe--button[data-text-hover=slide-left] .pe--button--wrapper .pb--handle .pe--button--text .button--text--wrap,
    .pe--button[data-text-hover=slide-down] .pe--button--wrapper .pb--handle .pe--button--text .button--text--wrap,
    .pe--button[data-text-hover=slide-up] .pe--button--wrapper .pb--handle .pe--button--text .button--text--wrap,
    .button--simple.hover--default .pe--button--wrapper .pb--handle .pe--button--text .button--text--wrap {
        transition: all .3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    .pe--button[data-text-hover=slide-right] .pe--button--wrapper .pb--handle .pe--button--text .button--text--wrap,
    .pe--button[data-text-hover=slide-left] .pe--button--wrapper .pb--handle .pe--button--text .button--text--wrap {
        transition: all .3s cubic-bezier(1, 0.03, 0, 0.97);
    }



    .pe--button[data-text-hover=slide-up] .pe--button--wrapper .pb--handle:hover .pe--button--text .button--text--wrap,
    .button--simple.hover--default .pe--button--wrapper .pb--handle:hover .pe--button--text .button--text--wrap {
        transform: translateY(-100%);
    }


    .pe--button[data-text-hover=slide-left] .pe--button--wrapper .pb--handle span,
    .pe--button[data-text-hover=slide-right] .pe--button--wrapper .pb--handle span,
    .pe--button[data-text-hover=slide-down] .pe--button--wrapper .pb--handle span,
    .pe--button[data-text-hover=slide-up] .pe--button--wrapper .pb--handle span,
    .button--simple.hover--default .pe--button--wrapper .pb--handle span {
        display: block;
        white-space: nowrap;
    }

    .pe--button[data-text-hover=slide-down] .pe--button--wrapper .pb--handle span.button--text--hover {
        top: unset;
        bottom: 100%;
    }

    .pe--button[data-text-hover=slide-down] .pe--button--wrapper .pb--handle:hover .pe--button--text .button--text--wrap {
        transform: translateY(100%);
    }

    .pe--button[data-text-hover=slide-left] .pe--button--wrapper .pb--handle span.button--text--hover {
        top: 0;
        right: 100%;
        left: unset;
    }

    .pe--button[data-text-hover=slide-left] .pe--button--wrapper .pb--handle:hover .pe--button--text .button--text--wrap {
        transform: translateX(100%);
    }

    .pe--button[data-text-hover=slide-right] .pe--button--wrapper .pb--handle span.button--text--hover {
        top: 0;
        left: 100%;
    }

    .pe--button[data-text-hover=slide-right] .pe--button--wrapper .pb--handle:hover .pe--button--text .button--text--wrap {
        transform: translateX(-100%);
    }




    /* Chars  */
    span.button--text--wrap span.button_char {
        display: inline-block !important;
        transition: transform .3s ease;
        transition-delay: calc(0.02s * var(--c));
    }

    .pe--button[data-text-hover=chars-down] .pe--button--wrapper .pb--handle span.button--text--hover {
        top: unset;
        bottom: 100%;
    }


    .pe--button[data-text-hover=chars-up] .pe--button--wrapper .pb--handle:hover .pe--button--text .button--text--wrap span.button_char {
        transform: translateY(-1em);
    }

    .pe--button[data-text-hover=chars-down] .pe--button--wrapper .pb--handle:hover .pe--button--text .button--text--wrap span.button_char {
        transform: translateY(1em);
    }


    .pe--button[data-text-hover=chars-right] .pe--button--wrapper .pb--handle .pe--button--text .button--text--wrap span.button--text--hover,
    .pe--button[data-text-hover=chars-left] .pe--button--wrapper .pb--handle .pe--button--text .button--text--wrap span.button--text--hover {
        top: 0;
        --l: 12;
        --length: calc(var(--l)* 0.01s)
    }

    .pe--button[data-text-hover=chars-left] .pe--button--wrapper .pb--handle .pe--button--text .button--text--wrap span.button_char {
        transition: all 0.3s cubic-bezier(0.79, 0.04, 0.31, 1);
        transition-delay: calc(0.01s * var(--c));
    }

    .pe--button[data-text-hover=chars-left] .pe--button--wrapper .pb--handle .pe--button--text .button--text--wrap span.button--text--hover span.button_char {
        transform: translateX(-1em);
        opacity: 0;
    }

    .pe--button[data-text-hover=chars-left] .pe--button--wrapper .pb--handle:hover .pe--button--text .button--text--wrap span.button--text--hover span.button_char {
        transform: translateX(0em);
        opacity: 1;
        transition-delay: calc(var(--length) - 0.01s * var(--c));
    }

    .pe--button[data-text-hover=chars-left] .pe--button--wrapper .pb--handle:hover .pe--button--text .button--text--wrap span.button--text--main span.button_char {
        transform: translateX(1em);
        opacity: 0;
        transition-delay: calc(var(--length) - 0.01s * var(--c));

    }

    /* Chars Right  */

    .pe--button[data-text-hover=chars-right] .pe--button--wrapper .pb--handle .pe--button--text .button--text--wrap span.button--text--hover span.button_char {
        transform: translateX(0em);
        opacity: 0;
    }

    .pe--button[data-text-hover=chars-right] .pe--button--wrapper .pb--handle .pe--button--text .button--text--wrap span.button_char {
        transition: all 0.3s cubic-bezier(0.79, 0.04, 0.31, 1);
        transition-delay: calc(0.01s * var(--c));

    }

    .pe--button[data-text-hover=chars-right] .pe--button--wrapper .pb--handle .pe--button--text .button--text--wrap span.button--text--hover span.button_char {
        transform: translateX(1em);
        opacity: 0;
    }

    .pe--button[data-text-hover=chars-right] .pe--button--wrapper .pb--handle:hover .pe--button--text .button--text--wrap span.button--text--hover span.button_char {
        transform: translateX(0em);
        opacity: 1;
        transition-delay: calc(0.01s * var(--c));
    }

    .pe--button[data-text-hover=chars-right] .pe--button--wrapper .pb--handle:hover .pe--button--text .button--text--wrap span.button--text--main span.button_char {
        transform: translateX(-1em);
        opacity: 0;
        transition-delay: calc(0.01s * var(--c));

    }

    .pe--button[data-text-hover=chars-expand] .pe--button--wrapper .pb--handle {
        transition: all .4s ease;
    }

    .pe--button[data-text-hover=chars-expand] .pe--button--wrapper .pb--handle:hover {
        letter-spacing: 0.1em
    }

    /* Background Hover Effects  */


    /* Slides  */
    .pe--button[data-background-hover=slide-right] .pe--button--wrapper .pb--handle .pe--button--icon,
    .pe--button[data-background-hover=slide-left] .pe--button--wrapper .pb--handle .pe--button--icon,
    .pe--button[data-background-hover=slide-down] .pe--button--wrapper .pb--handle .pe--button--icon,
    .pe--button[data-background-hover=slide-up] .pe--button--wrapper .pb--handle .pe--button--icon,
    .pe--button[data-background-hover=slide-right] .pe--button--wrapper .pb--handle,
    .pe--button[data-background-hover=slide-left] .pe--button--wrapper .pb--handle,
    .pe--button[data-background-hover=slide-down] .pe--button--wrapper .pb--handle,
    .pe--button[data-background-hover=slide-up] .pe--button--wrapper .pb--handle {
        transition: color .5s cubic-bezier(0.95, 0.01, 0.12, 1);
    }

    .pe--button[data-background-hover]:not([data-background-hover=none]) .pe--button--wrapper .pb--handle:hover svg {
        fill: var(--secondaryBackground)
    }

    .pe--button[data-background-hover=slide-right] .pe--button--wrapper .pb--handle::after,
    .pe--button[data-background-hover=slide-left] .pe--button--wrapper .pb--handle::after,
    .pe--button[data-background-hover=slide-down] .pe--button--wrapper .pb--handle::after,
    .pe--button[data-background-hover=slide-up] .pe--button--wrapper .pb--handle::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0%;
        border-radius: var(--radius);
        background: var(--mainColor);
        transition: all .5s cubic-bezier(0.95, 0.01, 0.12, 1);
        z-index: 1;
    }

    .pe--button[data-background-hover=slide-up] .pe--button--wrapper .pb--handle::after {
        top: unset;
        bottom: 0
    }

    .pe--button[data-background-hover=slide-right] .pe--button--wrapper .pb--handle::after,
    .pe--button[data-background-hover=slide-left] .pe--button--wrapper .pb--handle::after {
        width: 0%;
        height: 100%;
    }

    .pe--button[data-background-hover=slide-left] .pe--button--wrapper .pb--handle::after {
        left: unset;
        right: 0
    }

    .pe--button[data-background-hover=slide-right] .pe--button--wrapper .pb--handle.sb--active::after,
    .pe--button[data-background-hover=slide-left] .pe--button--wrapper .pb--handle.sb--active::after,
    .pe--button[data-background-hover=slide-down] .pe--button--wrapper .pb--handle.sb--active::after,
    .pe--button[data-background-hover=slide-up] .pe--button--wrapper .pb--handle.sb--active::after,
    .pe--button[data-background-hover=slide-right] .pe--button--wrapper .pb--handle:hover::after,
    .pe--button[data-background-hover=slide-left] .pe--button--wrapper .pb--handle:hover::after,
    .pe--button[data-background-hover=slide-down] .pe--button--wrapper .pb--handle:hover::after,
    .pe--button[data-background-hover=slide-up] .pe--button--wrapper .pb--handle:hover::after {
        width: 100%;
        height: 100%;
        border-radius: var(--radius);
    }

    .pe--button[data-background-hover=slide-right] .pe--button--wrapper .pb--handle:hover,
    .pe--button[data-background-hover=slide-left] .pe--button--wrapper .pb--handle:hover,
    .pe--button[data-background-hover=slide-down] .pe--button--wrapper .pb--handle:hover,
    .pe--button[data-background-hover=slide-up] .pe--button--wrapper .pb--handle:hover {
        color: var(--secondaryBackground);
    }

    /* Zooms  */
    .pe--button[data-background-hover=zoom-out] .pe--button--wrapper,
    .pe--button[data-background-hover=zoom-out] .pe--button--wrapper .pb--handle,
    .pe--button[data-background-hover=zoom-in] .pe--button--wrapper,
    .pe--button[data-background-hover=zoom-in] .pe--button--wrapper .pb--handle {
        overflow: visible;
    }

    .pe--button[data-background-hover=zoom-in] .pe--button--wrapper .pb--handle::before,
    .pe--button[data-background-hover=zoom-out] .pe--button--wrapper .pb--handle::before {
        transition: all .3s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .pe--button[data-background-hover=zoom-in] .pe--button--wrapper .pb--handle:hover::before {
        width: 110%;
        height: 110%;
    }

    .pe--button[data-background-hover=zoom-out] .pe--button--wrapper .pb--handle:hover::before {
        width: 95%;
        height: 95%;
    }

    /* Reveal/Conceal  */

    .pe--button[data-background-hover=background-conceal] .pe--button--wrapper .pb--handle::before,
    .pe--button[data-background-hover=background-reveal] .pe--button--wrapper .pb--handle::before {
        content: "";
        display: block;
        position: absolute;
        border-radius: var(--radius);
        background: var(--secondaryBackground);
        z-index: -1;
        border: 1px solid var(--linesColor);
        left: 50%;
        transform: translate(-50%);
    }



    .pe--button[data-background-hover=background-reveal] .pe--button--wrapper .pb--handle::before {
        width: 0%;
        height: 00%;
        transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);

    }

    .pe--button[data-background-hover=background-reveal] .pe--button--wrapper .pb--handle:hover::before {
        width: 100%;
        height: 100%;


    }

    .pe--button[data-background-hover=background-conceal] .pe--button--wrapper .pb--handle::before {
        transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);

    }

    .pe--button[data-background-hover=background-conceal] .pe--button--wrapper .pb--handle:hover::before {
        width: 0%;
        height: 00%;

    }

    /* Icon Hover Effects  */
    .pe--button--wrapper .pb--handle>span.pe--button--icon span {
        line-height: 1;
        display: inline-block;
    }

    .pe--button--wrapper .pb--handle>span.pe--button--icon span.button--icon--hover {
        position: absolute;
        left: 0;
        top: 100%;
    }


    /* Slides  */

    .pe--button[data-icon-hover=slide-down-left] .pe--button--wrapper .pb--handle .pe--button--icon>span,
    .pe--button[data-icon-hover=slide-down-right] .pe--button--wrapper .pb--handle .pe--button--icon>span,
    .pe--button[data-icon-hover=slide-up-left] .pe--button--wrapper .pb--handle .pe--button--icon>span,
    .pe--button[data-icon-hover=slide-up-right] .pe--button--wrapper .pb--handle .pe--button--icon>span,
    .pe--button[data-icon-hover=slide-left] .pe--button--wrapper .pb--handle .pe--button--icon>span,
    .pe--button[data-icon-hover=slide-right] .pe--button--wrapper .pb--handle .pe--button--icon>span,
    .pe--button[data-icon-hover=slide-down] .pe--button--wrapper .pb--handle .pe--button--icon>span,
    .pe--button[data-icon-hover=slide-up] .pe--button--wrapper .pb--handle .pe--button--icon>span {
        transition: all .4s cubic-bezier(0.68, -0.55, 0.27, 1.55)
    }

    .pe--button[data-icon-hover]:not([data-icon-hover=none]) .pe--button--icon {
        --pTop: var(--paddingTop);
        --pLeft: var(--paddingLeft);
        --pBottom: var(--paddingBottom);
        --pRight: var(--paddingRight);
    }

    .pe--button[data-icon-hover=slide-up] .pe--button--wrapper .pb--handle .pe--button--icon span.button--icon--hover {
        left: var(--pLeft)
    }

    .pe--button[data-icon-hover=slide-up] .pe--button--wrapper .pb--handle:hover .pe--button--icon>span {
        transform: translateY(calc(-100% - var(--pTop)))
    }

    .pe--button[data-icon-hover=slide-down] .pe--button--wrapper .pb--handle .pe--button--icon span.button--icon--hover {
        top: unset;
        bottom: 100%;
        left: var(--pLeft)
    }

    .pe--button[data-icon-hover=slide-down] .pe--button--wrapper .pb--handle:hover .pe--button--icon>span {
        transform: translateY(calc(100% + var(--pTop)))
    }

    .pe--button[data-icon-hover=slide-left] .pe--button--wrapper .pb--handle .pe--button--icon span.button--icon--hover {
        top: var(--pTop);
        left: 100%;
    }


    .pe--button[data-icon-hover=slide-left] .pe--button--wrapper .pb--handle:hover .pe--button--icon>span {
        transform: translateX(calc(-100% - var(--pLeft)))
    }

    .pe--button[data-icon-hover=slide-right] .pe--button--wrapper .pb--handle .pe--button--icon span.button--icon--hover {
        top: var(--pTop);
        left: unset;
        right: 100%;
    }

    .pe--button[data-icon-hover=slide-right] .pe--button--wrapper .pb--handle:hover .pe--button--icon>span {
        transform: translateX(calc(100% + var(--pRight)))
    }

    .pe--button[data-icon-hover=slide-up-right] .pe--button--wrapper .pb--handle .pe--button--icon span.button--icon--hover {
        top: 100%;
        right: 100%;
        left: unset;
    }

    .pe--button[data-icon-hover=slide-up-left] .pe--button--wrapper .pb--handle .pe--button--icon span.button--icon--hover {
        top: 100%;
        right: unset;
        left: 100%;
    }

    .pe--button[data-icon-hover=slide-up-left] .pe--button--wrapper .pb--handle:hover .pe--button--icon>span {
        transform: translateY(calc(-100% - var(--pTop))) translateX(calc(-100% - var(--pLeft)))
    }

    .pe--button[data-icon-hover=slide-up-right] .pe--button--wrapper .pb--handle:hover .pe--button--icon>span {
        transform: translateY(calc(-100% - var(--pTop))) translateX(calc(100% + var(--pRight)))
    }


    .pe--button[data-icon-hover=slide-down-right] .pe--button--wrapper .pb--handle .pe--button--icon span.button--icon--hover {
        top: unset;
        right: 100%;
        left: unset;
        bottom: 100%;
    }

    .pe--button[data-icon-hover=slide-down-right] .pe--button--wrapper .pb--handle:hover .pe--button--icon>span {
        transform: translateY(calc(100% + var(--pTop))) translateX(calc(100% + var(--pRight)))
    }

    .pe--button[data-icon-hover=slide-down-left] .pe--button--wrapper .pb--handle .pe--button--icon span.button--icon--hover {
        top: unset;
        right: unset;
        left: 100%;
        bottom: 100%;
    }

    .pe--button[data-icon-hover=slide-down-left] .pe--button--wrapper .pb--handle:hover .pe--button--icon>span {
        transform: translateY(calc(100% + var(--pTop))) translateX(calc(-100% - var(--pLeft)))
    }


    .pe--button[data-icon-hover=background-conceal] .pe--button--wrapper .pb--handle .pe--button--icon,
    .pe--button[data-icon-hover=background-reveal] .pe--button--wrapper .pb--handle .pe--button--icon {
        overflow: visible;
        margin-left: 0.35em
    }

    .pe--button[data-icon-hover=background-conceal] .pe--button--wrapper .pb--handle .pe--button--icon::after,
    .pe--button[data-icon-hover=background-reveal] .pe--button--wrapper .pb--handle .pe--button--icon::after {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0em;
        height: 0em;
        transform: translate(-50%, -50%);
        background: var(--secondaryBackground);
        z-index: -1;
        border-radius: 50%;
        transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .pe--button[data-icon-hover=background-conceal] .pe--button--wrapper .pb--handle .pe--button--icon::after {
        width: 1.5em;
        height: 1.5em;
    }

    .pe--button[data-icon-hover=background-reveal] .pe--button--wrapper .pb--handle:hover .pe--button--icon::after {
        width: 1.5em;
        height: 1.5em;
    }

    .pe--button[data-icon-hover=background-conceal] .pe--button--wrapper .pb--handle:hover .pe--button--icon::after {
        width: 0em;
        height: 0em;
    }

    /* Special Styles Handles  */

    .pe--button[data-text-hover=chars-expand].button--seperated span.button--text--wrap,
    .pe--button[data-text-hover=chars-up].button--seperated span.button--text--wrap,
    .pe--button[data-text-hover=chars-down].button--seperated span.button--text--wrap {
        overflow: hidden;
    }


    .pe--button[data-text-hover=slide-left].button--seperated .pe--button--wrapper .pb--handle span.button--text--hover {
        transform: translateX(calc(-1 * var(--paddingLeft)));
    }

    .pe--button[data-text-hover=slide-left].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--text .button--text--wrap {
        transform: translateX(calc(100% + var(--paddingRight)));
    }


    .pe--button[data-text-hover=slide-down].button--seperated .pe--button--wrapper .pb--handle span.button--text--hover {
        transform: translateY(calc(-1 * var(--paddingTop)))
    }

    .pe--button[data-text-hover=slide-down].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--text .button--text--wrap {
        transform: translateY(calc(100% + var(--paddingTop)));
    }

    .pe--button[data-text-hover=slide-right].button--seperated .pe--button--wrapper .pb--handle span.button--text--hover {
        transform: translateX(calc(var(--paddingRight)));
    }

    .pe--button[data-text-hover=slide-right].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--text .button--text--wrap {
        transform: translateX(calc(-100% - var(--paddingRight)));
    }

    .pe--button[data-text-hover=slide-right].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--text .button--text--wrap {
        transform: translateX(calc(-100% - var(--paddingLeft)));
    }

    .pe--button[data-text-hover=slide-up].button--seperated .pe--button--wrapper .pb--handle span.button--text--hover {
        transform: translateY(var(--paddingTop))
    }

    .pe--button[data-text-hover=slide-up].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--text .button--text--wrap {
        transform: translateY(calc(-100% - var(--paddingTop)));
    }

    .pe--button[data-icon-hover=slide-up-left].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--icon>span {
        transform: translateY(calc(-100% - var(--paddingTop))) translateX(calc(-50% - var(--paddingLeft)))
    }

    .pe--button[data-icon-hover=slide-up-right].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--icon>span {
        transform: translateY(calc(-100% - var(--paddingTop))) translateX(calc(100% + var(--paddingTop)))
    }

    .pe--button[data-icon-hover=slide-down-right].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--icon>span {
        transform: translateY(calc(100% + var(--paddingTop))) translateX(calc(100% + var(--paddingTop)))
    }

    .pe--button[data-icon-hover=slide-down-left].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--icon>span {
        transform: translateY(calc(100% + var(--paddingTop))) translateX(calc(-100% - var(--paddingTop)))
    }



    .pe--button[data-icon-hover=slide-up].button--seperated .pe--button--wrapper .pb--handle>span.pe--button--icon span.button--icon--hover {
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translateX(-50%)
    }

    .pe--button[data-icon-hover=slide-down].button--seperated .pe--button--wrapper .pb--handle>span.pe--button--icon span.button--icon--hover {
        position: absolute;
        left: 50%;
        transform: translateX(-50%)
    }


    .pe--button[data-icon-hover=slide-up].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--icon>span.button--icon--hover {
        transform: translateY(calc(-100% - var(--paddingTop))) translateX(-50%)
    }

    .pe--button[data-icon-hover=slide-up].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--icon>span.button--icon--main {
        transform: translateY(calc(-100% - var(--paddingTop)))
    }

    .pe--button[data-icon-hover=slide-down].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--icon>span.button--icon--hover {
        transform: translateY(calc(100% + var(--paddingTop))) translateX(-50%)
    }

    .pe--button[data-icon-hover=slide-down].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--icon>span.button--icon--main {
        transform: translateY(calc(100% + var(--paddingTop)))
    }


    .pe--button[data-icon-hover=slide-left].button--seperated .pe--button--wrapper .pb--handle>span.pe--button--icon span.button--icon--hover {
        top: 50%;
        transform: translateY(-50%)
    }

    .pe--button[data-icon-hover=slide-left].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--icon>span {
        transform: translateX(calc(-100% - var(--paddingLeft)))
    }

    .pe--button[data-icon-hover=slide-left].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--icon>span.button--icon--hover {
        transform: translateX(calc(-50% - var(--paddingLeft))) translateY(-50%)
    }

    .pe--button[data-icon-hover=slide-right].button--seperated .pe--button--wrapper .pb--handle>span.pe--button--icon span.button--icon--hover {
        top: 50%;
        transform: translateY(-50%)
    }

    .pe--button[data-icon-hover=slide-right].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--icon>span {
        transform: translateX(calc(100% + var(--paddingRight)))
    }

    .pe--button[data-icon-hover=slide-right].button--seperated .pe--button--wrapper .pb--handle:hover .pe--button--icon>span.button--icon--hover {
        transform: translateX(calc(100% + var(--paddingRight))) translateY(-50%)
    }



    @-webkit-keyframes toggleLine {
        0% {
            -webkit-clip-path: inset(0% 0% 0% 0%);
            clip-path: inset(0% 0% 0% 0%);
        }

        50% {
            -webkit-clip-path: inset(0% 0% 0% 100%);
            clip-path: inset(0% 0% 0% 100%);
        }

        51% {
            -webkit-clip-path: inset(0% 100% 0% 0%);
            clip-path: inset(0% 100% 0% 0%);
        }

        100% {
            -webkit-clip-path: inset(0% 0% 0% 0%);
            clip-path: inset(0% 0% 0% 0%);
        }

    }

    @keyframes toggleLine {
        0% {
            -webkit-clip-path: inset(0% 0% 0% 0%);
            clip-path: inset(0% 0% 0% 0%);
        }

        50% {
            -webkit-clip-path: inset(0% 0% 0% 100%);
            clip-path: inset(0% 0% 0% 100%);
        }

        51% {
            -webkit-clip-path: inset(0% 100% 0% 0%);
            clip-path: inset(0% 100% 0% 0%);
        }

        100% {
            -webkit-clip-path: inset(0% 0% 0% 0%);
            clip-path: inset(0% 0% 0% 0%);
        }

    }

    .pb--marquee.no-button {
        width: 100%;
        height: 1em;
        position: relative;
        background: var(--secondaryBackground);
        padding: 1em;
        border-radius: 25px;
        border: 1px solid var(--linesColor);
    }

    .pb--marquee.no-button i.material-icons.md-fiber_manual_record {
        margin-left: 15px;
    }

    .pe--button.pb--marquee .pe--button--wrapper .pb--handle>span {
        visibility: hidden;
    }


    .pb--marquee--wrap {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        overflow: hidden;
        pointer-events: none;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 99999;
        --gap: 1em;
    }

    .pb--marquee__inner {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        --duration: 5s;
        --offset: 1rem;
        --move-initial: calc(-25% + var(--offset));
        --move-final: calc(-50% + var(--offset));
        -webkit-transform: translate3d(var(--move-initial), 0, 0);
        transform: translate3d(var(--move-initial), 0, 0);
        -webkit-animation: pbMarquee var(--duration) linear infinite;
        animation: pbMarquee var(--duration) linear infinite;
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
        opacity: 0;
        gap: var(--gap);
    }

    .pb--marquee__inner svg {
        width: 1em;
        height: 1em;
        display: block;
        line-height: 1
    }

    .pb--marquee--wrap.left-to-right .pb--marquee__inner {
        --move-initial: calc(-50% + var(--offset));
        --move-final: calc(-25% + var(--offset));
    }

    .pb--marquee--wrap span {
        text-align: center;
        white-space: nowrap;
        padding: 0 0.25em;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: var(--gap);
    }

    @-webkit-keyframes pbMarquee {
        0% {
            -webkit-transform: translate3d(var(--move-initial), 0, 0);
            transform: translate3d(var(--move-initial), 0, 0);
        }

        100% {
            -webkit-transform: translate3d(var(--move-final), 0, 0);
            transform: translate3d(var(--move-final), 0, 0);
        }
    }

    @keyframes pbMarquee {
        0% {
            -webkit-transform: translate3d(var(--move-initial), 0, 0);
            transform: translate3d(var(--move-initial), 0, 0);
        }

        100% {
            -webkit-transform: translate3d(var(--move-final), 0, 0);
            transform: translate3d(var(--move-final), 0, 0);
        }
    }

    .pb--marquee__inner {
        -webkit-animation-play-state: running;
        animation-play-state: running;
        opacity: 1;
        -webkit-transition-duration: 0.6s;
        -o-transition-duration: 0.6s;
        transition-duration: 0.6s;
    }

    .pe--button i {
        font-size: 1em;
        line-height: 1;
        vertical-align: sub;
        width: 1em;
        padding-left: 0.4em;
    }

    .pe--button.icon__left i {
        padding-left: 0;
        padding-right: 1.4em;
    }

    .pe--button.pb--small {
        font-size: 15px;
    }

    .pe--button.pb--medium {
        font-size: 22px;
    }

    .pe--button.pb--large {
        font-size: 28px;
    }

    .pe--button.pb--underlined.pb--icon.icon__right a {
        padding-right: 0.4em;
    }

    /** Project Widgets
      ------------------------------ */
    .justify-last {
        -moz-text-align-last: justify;
        text-align-last: justify;
    }

    /***** Project Media
      ------------------------------ */
    .project-featured-image img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        display: block;
    }

    .project-featured-image.parallax--image img {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }

    .project--link--scroll a {
        pointer-events: none;
    }

    .project-featured-image.parallax--image {
        overflow: hidden;
    }

    .project-featured-image div {
        height: 100%;
    }

    .project--image--gallery {
        display: block;
        height: 100%;
        height: auto;
        overflow: hidden;
    }

    .project--image--gallery--wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        height: 100%;
        width: max-content;
        gap: 50px;
    }

    .project--image--gallery--wrapper>div {
        display: block;
        overflow: hidden;
    }

    .project--gallery--image {
        width: auto;
        height: 100%;
        z-index: 2;
        flex-shrink: 5;
        overflow: hidden;
    }

    .project--archive--gallery--image {
        width: auto;
        height: 100%;
        z-index: 1
    }

    .project--archive--gallery--image img {
        height: 100%;
        width: auto;
        object-fit: cover;
    }

    .project--gallery--image img {
        height: 100%;
        width: auto;
        object-fit: cover;
    }

    .pe--slider--wrapper .project--archive--gallery--image img {
        width: 100%;
    }



    .pr--gallery--vertical .project--image--gallery--wrapper .project--gallery--image {
        width: 100%;
        height: auto
    }

    @media only screen and (min-width: 576px) {

        .pr--gallery--vertical .project--image--gallery {
            max-height: 100vh
        }

        .pr--gallery--vertical .project--image--gallery--wrapper {
            flex-direction: column;
            height: fit-content;
            width: 100%;

        }

        .pr--gallery--vertical .project--image--gallery--wrapper .project--gallery--image {
            width: 100%;
            height: auto
        }

        .pr--gallery--vertical .project--image--gallery img {
            width: 100%;
        }




    }

    @media only screen and (max-width: 576px) {
        .project--gallery--image img {
            height: 100%;
            width: auto;
            object-fit: cover !important;
        }
    }



    /** Carousel
      ------------------------------ */
    .pe--carousel {
        display: block;
        width: 100%;
        height: auto;
    }

    .carousel--wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        --itemsWidth: auto;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        gap: 50px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        will-change: transform;
        border-color: var(--linesColor);
        border-width: 1px;
    }

    .carousel--wrapper .carousel--item:not(.product--masonry--item) {
        width: var(--itemsWidth) !important;
        overflow: hidden;
        border-color: var(--linesColor);
        border-width: 1px;
        flex-shrink: 0;
    }

    .carousel--wrapper .carousel--item .single-image {
        overflow: hidden;
        border-radius: var(--radius);
        overflow: hidden;
        height: 100%;
    }

    .parallax--images .carousel--item .single-image img {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }

    .eq--height--yes .carousel--item .single-image img {
        display: block;
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center;
        object-position: center;
    }

    .carousel--item.cr--item.cr--taxonomy--brand {
        text-align: center;
    }

    .carousel--item.cr--item.cr--taxonomy--brand a {
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

    /* .carousel--item.cr--item.cr--taxonomy--brand:hover a {
        -webkit-filter: invert(1);
        filter: invert(1);
    } */

    .carousel--item.cr--taxonomy--product_cat a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1em;
        padding: 1em;
        position: relative;
    }

    .carousel--item.cr--item.cr--taxonomy--brand a img,
    .carousel--item.cr--taxonomy--product_cat a img {
        width: auto;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .term_name-positioned span.carousel--term--name {
        position: absolute;
        transform: translate(var(--transformX), var(--transformY))
    }

    .pe--carousel.cr--portfolio .carousel--wrapper {
        --itemsWidth: 20vw;
    }

    /** Carousel/Slider Controls
      ------------------------------ */
    .pe--sc--controls {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        color: var(--mainColor);
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .pe--sc--controls .sc--progressbar {
        display: block;
        width: 100%;
        height: 1px;
        margin: 1em 0;
        position: relative;
    }

    .pe--sc--controls span.sc--full {
        width: 100%;
        height: 100%;
        display: block;
        background: var(--mainColor);
        opacity: .3;
    }

    .elementor-widget-pesccontrols {
        width: 100%;
    }

    .pe--sc--controls span.sc--prog {
        width: 0%;
        height: 100%;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        background: var(--mainColor);
    }

    .sc--fraction i {
        display: inline-block;
        vertical-align: middle;
    }

    .sc--navigation {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: auto;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0.5em;
        font-size: 25px;
        cursor: pointer;
        width: 100%;
    }

    .sc--navigation.nav_text {
        font-size: 1em;
    }

    .sc--navigation>span {
        display: block;
        line-height: 1rem;
    }

    .sc--navigation>span svg {
        fill: var(--mainColor);
    }

    .sc--navigation>span i {
        display: block;
        width: auto;
        height: auto;
        line-height: 1;
    }

    .portfolio--pagination {
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
        margin-top: 25px;
    }

    .portfolio--pagination.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .portfolio--pagination.loading {
        opacity: 0.5;

    }

    .portfolio--pagination.loading a {
        cursor: wait
    }

    .pe--sc--controls.brackets--on>div::before {
        content: "[";
        margin-right: 5px;
    }

    .pe--sc--controls.brackets--on>div::after {
        content: "]";
        margin-left: 5px;
    }

    /** Google Maps
      ------------------------------ */
    .lenis-scrolling #pe--google--map {
        pointer-events: none;
    }

    .pe--google--maps--wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 25px;
        overflow: hidden;
        position: relative;
    }

    .map--multi--locations--wrapper {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        width: 35%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 25px;
        overflow: auto;
    }

    .map--multi--locations--hold {
        display: flex;
        flex-direction: column;
        width: auto;
        height: fit-content;
    }

    .map--marker--details {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0;
        border-color: var(--linesColor);
        transition: background .4s ease, opacity .4s ease;
        ;
    }

    .map--multi--locations--hold:has(.active) .map--marker--details:not(.active) {
        opacity: .5;
    }

    .map--marker--details.active {
        background: var(--secondaryBackground);
    }

    .locations--has--bg .map--marker--details {
        background: var(--secondaryBackground);
    }

    span.ma--icon {

        line-height: 1;
        margin-right: 0.25em;
        display: inline-block;
        vertical-align: middle;
        width: 1em;
        height: 1em;
    }

    span.ma--icon svg {
        width: 1em;
        height: 1em;
        fill: var(--mainColor);
        line-height: 1;
    }

    .marker--bottom a:not(.location--button) {
        text-decoration: underline;
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease
    }

    .marker--bottom a:hover {
        color: var(--mainColor);
    }

    .locations--pos--bottom.map--layout--horizontal .pe--google--maps--wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .map--layout--horizontal .pe--google--maps--wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .map--layout--horizontal .pe--google--maps--wrapper .map--multi--locations--wrapper {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        height: auto;
    }

    .map--layout--horizontal .pe--google--maps--wrapper .map--multi--locations--wrapper .map--marker--details {
        width: 28vw;
        gap: 0;
        border-radius: 7px;
    }

    .map--layout--horizontal .pe--google--maps--wrapper .map--multi--locations--wrapper .map--marker--details .marker--title {
        padding: 1em;
    }

    .map--layout--horizontal .pe--google--maps--wrapper .map--multi--locations--wrapper .map--marker--details .marker--bottom {
        padding: 1em;
    }

    .map--layout--horizontal .pe--google--maps--wrapper .map--multi--locations--hold {
        flex-direction: row;
        width: fit-content;
    }

    .map--layout--horizontal .pe--google--maps--wrapper .map--multi--locations--wrapper {
        width: 100%;
    }

    .marker--buttons .location--button {
        font-size: 12px;
        text-transform: uppercase;
        border: 1px solid var(--linesColor);
        padding: 1em 1.5em;
        border-radius: 50px;
        line-height: 1;
        display: block;
        user-select: none;
        cursor: pointer;
    }

    .marker--buttons .location--button.view--map--button {
        background: var(--mainColor);
        color: var(--mainBackground);
    }

    .marker--buttons {
        display: flex;
        flex-direction: row;
        gap: 5px;
        margin-top: 2em;
        align-items: center;
    }


    .gm-style .gm-style-iw-c {
        padding: 0;
    }

    .gm-style-iw-d {
        padding-right: 0;
        max-width: 500px;
        display: block;
        padding-bottom: 0;
        overflow: hidden !important;
    }

    .gm-style-iw-chr {
        position: absolute;
        right: 0;
        left: 0;
    }

    .gm-style-iw-d>div {
        width: 100%;
        display: block;
        overflow: hidden;
        height: 100%;
    }

    .gm-style .gm-style-iw-c {
        background: var(--mainBackground);
    }

    .gm-ui-hover-effect>span {
        background-color: var(--mainColor);
        width: 20px !important;
        height: 20px !important;
    }

    .gm-style .gm-style-iw-tc::after {
        background: var(--mainBackground);
    }

    .map-info-window {
        width: 100%;
        display: flex
    }

    .map-info-window a {
        text-decoration: underline;
    }

    .map-info-window:has(.marker--image)>div {
        width: 50%;
    }

    .map-info-window>div>img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .map-info-window>div.marker--dets {
        padding: 1.5em;
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        justify-content: center;
    }

    .map-info-window:not(:has(.marker--image))>div.marker--dets {
        padding: 2em 10em 2em 2em;
    }


    .marker--title {
        font-size: 1.1rem;
        margin-bottom: 10px;
        line-height: 1;
    }

    .marker--adress {
        margin-bottom: 10px;
    }

    .marker--mail {
        margin-bottom: 10px;
    }



    @media only screen and (max-width: 576px) {

        .map--multi--locations--hold {
            flex-direction: row;
        }

        .pe--google--maps--wrapper {
            max-height: unset !important;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;

        }

        .map--multi--locations--wrapper {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            max-height: fit-content !important;
            width: 100% !important;
        }

        .map--multi--locations--wrapper .map--marker--details {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
        }


        .map--marker--details {
            width: 80vw
        }

        .map--multi--locations--wrapper .map--marker--details {
            -webkit-box-orient: vertical !important;
            -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
            flex-direction: column !important;
        }

        .map--layout--horizontal .pe--google--maps--wrapper .map--multi--locations--wrapper .map--marker--details {
            width: 90vw;
        }


    }



    /** Forms
      ------------------------------ */
    .pe--form {
        display: block;
        --paddingLeft: 1em;
        --paddingRight: 1em;
        --paddingTop: 0.75em;
        --paddingBottom: 0.75em;
    }

    .pe--form input[type="text"],
    .pe--form input[type="email"],
    .pe--form input[type="url"],
    .pe--form input[type="password"],
    .pe--form input[type="search"],
    .pe--form input[type="number"],
    .pe--form input[type="tel"],
    .pe--form input[type="range"],
    .pe--form input[type="date"],
    .pe--form input[type="month"],
    .pe--form input[type="week"],
    .pe--form input[type="time"],
    .pe--form input[type="datetime"],
    .pe--form input[type="datetime-local"],
    .pe--form input[type="color"],
    .pe--form textarea,
    .pe--form .pe--selected--wrap,
    .pe--form .pe--select--wrap {
        border: none;
        color: var(--mainColor);
        background: var(--secondarBackground);
        border-width: 1px;
        border-radius: 0;
        padding-top: var(--paddingTop);
        padding-bottom: var(--paddingBottom);
        padding-left: var(--paddingLeft);
        padding-right: var(--paddingRight);
        border-bottom: 1px solid;
        border-color: var(--linesColor);
        border-radius: var(--radius);
    }

    .pe--form .pe--selected--wrap {
        cursor: pointer;
        position: relative;

    }

    .pe--form .pe--selected--wrap::after {
        content: '+';
        position: absolute;
        right: var(--paddingRight);
    }

    .pe--form .pe--select--wrap {
        position: absolute;
        top: 100%;
        background-color: var(--secondaryBackground);
        z-index: 1;
        display: none;
        width: 100%;

    }

    .pe--form .active .pe--select--wrap {
        display: block;
    }

    .pe--form .active .pe--select--wrap>div {
        cursor: pointer;
    }

    .pe--form .active .pe--select--wrap>div:hover {
        opacity: .7;
    }

    .wpcf7-form-control-wrap:has(.pe--select--wrap) {
        position: relative;
        width: 100%;
        display: block;

    }

    div:has(.pe--select--wrap) select,
    span:has(.pe--select--wrap) select {
        display: none;
    }

    .pe--form input[type="text"]::-webkit-input-placeholder,
    .pe--form input[type="email"]::-webkit-input-placeholder,
    .pe--form input[type="url"]::-webkit-input-placeholder,
    .pe--form input[type="password"]::-webkit-input-placeholder,
    .pe--form input[type="search"]::-webkit-input-placeholder,
    .pe--form input[type="number"]::-webkit-input-placeholder,
    .pe--form input[type="tel"]::-webkit-input-placeholder,
    .pe--form input[type="range"]::-webkit-input-placeholder,
    .pe--form input[type="date"]::-webkit-input-placeholder,
    .pe--form input[type="month"]::-webkit-input-placeholder,
    .pe--form input[type="week"]::-webkit-input-placeholder,
    .pe--form input[type="time"]::-webkit-input-placeholder,
    .pe--form input[type="datetime"]::-webkit-input-placeholder,
    .pe--form input[type="datetime-local"]::-webkit-input-placeholder,
    .pe--form input[type="color"]::-webkit-input-placeholder,
    .pe--form textarea::-webkit-input-placeholder {
        color: var(--secondaryColor);
        font-size: 14px
    }

    .pe--form input[type="text"]::-moz-placeholder,
    .pe--form input[type="email"]::-moz-placeholder,
    .pe--form input[type="url"]::-moz-placeholder,
    .pe--form input[type="password"]::-moz-placeholder,
    .pe--form input[type="search"]::-moz-placeholder,
    .pe--form input[type="number"]::-moz-placeholder,
    .pe--form input[type="tel"]::-moz-placeholder,
    .pe--form input[type="range"]::-moz-placeholder,
    .pe--form input[type="date"]::-moz-placeholder,
    .pe--form input[type="month"]::-moz-placeholder,
    .pe--form input[type="week"]::-moz-placeholder,
    .pe--form input[type="time"]::-moz-placeholder,
    .pe--form input[type="datetime"]::-moz-placeholder,
    .pe--form input[type="datetime-local"]::-moz-placeholder,
    .pe--form input[type="color"]::-moz-placeholder,
    .pe--form textarea::-moz-placeholder {
        color: var(--secondaryColor);
        font-size: 14px
    }

    .pe--form input[type="text"]:-ms-input-placeholder,
    .pe--form input[type="email"]:-ms-input-placeholder,
    .pe--form input[type="url"]:-ms-input-placeholder,
    .pe--form input[type="password"]:-ms-input-placeholder,
    .pe--form input[type="search"]:-ms-input-placeholder,
    .pe--form input[type="number"]:-ms-input-placeholder,
    .pe--form input[type="tel"]:-ms-input-placeholder,
    .pe--form input[type="range"]:-ms-input-placeholder,
    .pe--form input[type="date"]:-ms-input-placeholder,
    .pe--form input[type="month"]:-ms-input-placeholder,
    .pe--form input[type="week"]:-ms-input-placeholder,
    .pe--form input[type="time"]:-ms-input-placeholder,
    .pe--form input[type="datetime"]:-ms-input-placeholder,
    .pe--form input[type="datetime-local"]:-ms-input-placeholder,
    .pe--form input[type="color"]:-ms-input-placeholder,
    .pe--form textarea:-ms-input-placeholder {
        color: var(--secondaryColor);
        font-size: 14px
    }

    .pe--form input[type="text"]::-ms-input-placeholder,
    .pe--form input[type="email"]::-ms-input-placeholder,
    .pe--form input[type="url"]::-ms-input-placeholder,
    .pe--form input[type="password"]::-ms-input-placeholder,
    .pe--form input[type="search"]::-ms-input-placeholder,
    .pe--form input[type="number"]::-ms-input-placeholder,
    .pe--form input[type="tel"]::-ms-input-placeholder,
    .pe--form input[type="range"]::-ms-input-placeholder,
    .pe--form input[type="date"]::-ms-input-placeholder,
    .pe--form input[type="month"]::-ms-input-placeholder,
    .pe--form input[type="week"]::-ms-input-placeholder,
    .pe--form input[type="time"]::-ms-input-placeholder,
    .pe--form input[type="datetime"]::-ms-input-placeholder,
    .pe--form input[type="datetime-local"]::-ms-input-placeholder,
    .pe--form input[type="color"]::-ms-input-placeholder,
    .pe--form textarea::-ms-input-placeholder {
        color: var(--secondaryColor);
        font-size: 14px
    }

    .pe--form input[type="text"]::placeholder,
    .pe--form input[type="email"]::placeholder,
    .pe--form input[type="url"]::placeholder,
    .pe--form input[type="password"]::placeholder,
    .pe--form input[type="search"]::placeholder,
    .pe--form input[type="number"]::placeholder,
    .pe--form input[type="tel"]::placeholder,
    .pe--form input[type="range"]::placeholder,
    .pe--form input[type="date"]::placeholder,
    .pe--form input[type="month"]::placeholder,
    .pe--form input[type="week"]::placeholder,
    .pe--form input[type="time"]::placeholder,
    .pe--form input[type="datetime"]::placeholder,
    .pe--form input[type="datetime-local"]::placeholder,
    .pe--form input[type="color"]::placeholder,
    .pe--form textarea::placeholder {
        color: var(--secondaryColor);
        font-size: inherit
    }


    .inputs--has--bg .pe-select,
    .inputs--has--bg .pe--form input[type="text"],
    .inputs--has--bg .pe--form input[type="email"],
    .inputs--has--bg .pe--form input[type="url"],
    .inputs--has--bg .pe--form input[type="password"],
    .inputs--has--bg .pe--form input[type="search"],
    .inputs--has--bg .pe--form input[type="number"],
    .inputs--has--bg .pe--form input[type="tel"],
    .inputs--has--bg .pe--form input[type="range"],
    .inputs--has--bg .pe--form input[type="date"],
    .inputs--has--bg .pe--form input[type="month"],
    .inputs--has--bg .pe--form input[type="week"],
    .inputs--has--bg .pe--form input[type="time"],
    .inputs--has--bg .pe--form input[type="datetime"],
    .inputs--has--bg .pe--form input[type="datetime-local"],
    .inputs--has--bg .pe--form input[type="color"],
    .inputs--has--bg .pe--form label:has(input[type=radio]),
    .inputs--has--bg .pe--form textarea {
        background: var(--secondaryBackground);
        border-radius: var(--radius);
        padding-top: var(--paddingTop);
        padding-bottom: var(--paddingBottom);
        padding-left: var(--paddingLeft);
        padding-right: var(--paddingRight);
    }

    .pe--form form.wpcf7-form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-line-pack: start;
        align-content: flex-start;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 1em;
    }

    .pe--form .wpcf7-form-control-wrap>span {
        position: absolute;
        top: 50%;
        font-size: 1em;
        line-height: 1;
        right: 1.5em;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        font-size: 12px;
    }

    .pe--form form.wpcf7-form p {
        margin: 0;
        width: 100%;
        position: relative;
        border-color: var(--linesColor);
        border-width: 1px;
    }

    .pe--form .wpcf7-response-output {
        position: absolute;
        bottom: 0;
        right: 0;
        border-width: 1px !important;
        padding: .5em 1em !important;
    }

    .pe--form form.wpcf7-form br {
        display: none
    }

    .pe--form form.wpcf7-form label {
        margin: 0;
    }

    .labels--inline .pe--form form.wpcf7-form label {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .labels--inline .pe--form form.wpcf7-form label>span:not(.wpcf7-form-control-wrap) {
        width: 20%;
    }

    .labels--inline .pe--form form.wpcf7-form label>.wpcf7-form-control-wrap {
        width: 80%;
    }

    .pe--form form.wpcf7-form label:has(input[aria-required=true])>span:not(.wpcf7-form-control-wrap)::after {
        content: "*";
        display: inline-block;
        color: red;
        margin-left: 0.2em;
        font-size: 0.9em;
        vertical-align: super;
    }

    .pe--form:not(.focus--label) form.wpcf7-form label span.input--label {
        font-size: 12px;
        margin-bottom: 0.5em;
        display: block;
    }

    .pe--form.focus--outline form input {
        -webkit-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

    .pe--form.focus--outline form input.has-content,
    .pe--form.focus--outline form input:focus {
        border-color: var(--mainColor);
    }

    .pe--form.focus--label form.wpcf7-form label>span:first-child {
        position: absolute;
        top: 50%;
        left: var(--paddingLeft);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        z-index: 5;
    }

    .pe--form.focus--label form.wpcf7-form label:has(textarea.has-content)>span:first-child,
    .pe--form.focus--label form.wpcf7-form label:has(textarea:focus)>span:first-child,
    .pe--form.focus--label form.wpcf7-form label:has(input.has-content)>span:first-child,
    .pe--form.focus--label form.wpcf7-form label:has(input:focus)>span:first-child {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        top: calc(var(--paddingTop) / 3);
        font-size: 12px;
        color: var(--secondaryColor);
    }

    .pe--form.focus--label form.wpcf7-form label:has(textarea)>span:first-child {
        top: var(--paddingTop);
        z-index: 3;
    }

    .pe--form .wpcf7-form-control-wrap>span:has(input[type=checkbox]) {
        position: static;
    }

    .pe--form .wpcf7-form-control-wrap>span:has(input[type=checkbox])>span {
        margin: 0;
        margin-right: 2em;
        font-size: 14px;
        line-height: 28px;
    }

    .pe--form.focus--outline form.wpcf7-form label input[type="checkbox"] {
        background: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 1em;
        height: 1em;
        border: 1px solid var(--mainColor);
        border-radius: 3px;
        margin-right: 7px;
        vertical-align: middle;
        position: relative;
    }

    .pe--form.focus--outline form.wpcf7-form label input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--mainColor);
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        border-radius: 1px;
    }

    .validate--colors input.wpcf7-not-valid {
        border-color: #ff000087 !important;
    }

    .validate--colors input.has-content:not(.wpcf7-not-valid) {
        border-color: green !important;
    }

    .layout--input .pe--form form.wpcf7-form {
        position: relative;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .layout--input .pe--form form.wpcf7-form p {
        width: 100% !important;
    }

    .layout--input .pe--form form.wpcf7-form p:has(.zeyna--form--submit--icon) {
        width: -webkit-fit-content !important;
        width: -moz-fit-content !important;
        width: fit-content !important
    }

    .layout--input .pe--form form.wpcf7-form p:has(input[type="submit"]) {
        position: absolute;
        top: 50%;
        right: 0;
        left: unset;
        display: inline-block;
        width: auto;
        --transformY: -50%;
        -webkit-transform: translateX(var(--transformX)) translateY(var(--transformY));
        -ms-transform: translateX(var(--transformX)) translateY(var(--transformY));
        transform: translateX(var(--transformX)) translateY(var(--transformY));
    }


    .pe--form form.wpcf7-form input[type="submit"] {
        border-color: var(--linesColor);
        border-width: 1px;
        border-radius: var(--radius);
        --radius: 10px;
    }

    .pe--form form.wpcf7-form p:has(input[type="submit"]) {
        width: fit-content;
        height: calc(100% - 4px);
    }

    .submit--style--icon .pe--form form.wpcf7-form input[type="submit"] {
        font-size: 0;
        width: 100%;
        height: 100%;
    }

    .layout--input .pe--form form.wpcf7-form p:has(input[type="submit"]) .wpcf7-spinner {
        display: none
    }

    .pe--form input[type="submit"] {
        border-radius: var(--radius);
    }

    .pe--form input[type="submit"] {
        background: none;
        position: relative;
        color: var(--mainColor);
        border-color: var(--linesColor);
        z-index: 3;
        border-radius: 0;
        -webkit-transition: color .4s ease;
        -o-transition: color .4s ease;
        transition: color .4s ease;
        padding: 1em 2em;
    }

    .pe--form input[type="submit"] {
        position: relative;
        --radius: 10px;
        border-radius: var(--radius);
        overflow: hidden;
        width: auto;
        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease
    }

    .has--bg .pe--form input[type="submit"] {
        background: var(--mainColor);
        color: var(--secondaryColor);
    }

    .has--bg .pe--form p:has(input[type="submit"]) svg {
        fill: var(--secondaryColor);
    }

    .has--bg .pe--form p:has(input[type="submit"]) i {
        color: var(--secondaryColor);
    }

    .pe--form p:has(input[type="submit"]) .wpcf7-spinner {
        display: none;
    }

    .has--hover:not(.has--bg) pe--form input[type="submit"]:hover {
        border-width: 2px;
    }

    .has--bg.has--hover .pe--form input[type="submit"]:hover {
        color: var(--secondaryBackground);
        background: var(--secondaryColor);
    }

    .has--bg.has--hover .pe--form p:has(input[type="submit"]:hover) i {
        color: var(--secondaryBackground);
    }

    .has--bg.has--hover .pe--form p:has(input[type="submit"]:hover) svg {
        fill: var(--secondaryBackground);
    }

    span.zeyna--form--submit--icon {
        display: inline-block;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        line-height: 0;
        position: absolute;
        top: 50%;
        right: 1em;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 99;
        color: var(--mainColor);
    }

    .submit--style--icon .pe--form form.wpcf7-form span.zeyna--form--submit--icon {
        left: 50%;
        right: unset;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }

    .pe--form form.wpcf7-form p:has(span.zeyna--form--submit--icon) input[type="submit"] {
        padding: 1em 3em 1em 2em
    }

    .icon--pos--left .pe--form form.wpcf7-form p:has(span.zeyna--form--submit--icon) input[type="submit"] {
        padding: 1em 2em 1em 3em
    }

    .icon--pos--left span.zeyna--form--submit--icon {
        right: unset;
        left: 1em;
    }

    span.zeyna--form--submit--icon svg {
        fill: var(--mainColor);
        width: 1.5em;
        height: 1.5em;
        line-height: 0;
    }

    .submit--style--text--icon .pe--form form.wpcf7-form input[type="submit"] {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 5px;
    }

    @media only screen and (max-width: 576px) {

        .pe--form form.wpcf7-form p:not(:has(.zeyna--form--submit--icon)) {
            width: 100% !important;
        }

    }

    /* Custom Forms  */

    .pe--form.form--custom form {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 20px;
        column-gap: 20px;
        align-items: start;
        justify-content: space-between;
    }

    .pe--form.form--custom form .form-field {
        width: 100%;
        position: relative;
    }

    .pe--form.form--custom form .form-field a {
        text-decoration: underline
    }

    .pe--form.focus--label form .form-field:has(textarea)>label,
    .pe--form.focus--label form .form-field:has(input[type=url])>label,
    .pe--form.focus--label form .form-field:has(input[type=email])>label,
    .pe--form.focus--label form .form-field:has(input[type=number])>label,
    .pe--form.focus--label form .form-field:has(input[type=tel])>label,
    .pe--form.focus--label form .form-field:has(input[type=text])>label {
        position: absolute;
        top: 50%;
        left: var(--paddingLeft);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        z-index: 5;
        transform-origin: top left;
    }

    .pe--form.focus--label form .form-field:has(textarea)>label {
        top: var(--paddingTop);
        margin: 0;
        transform: none;
    }

    .pe--form.focus--label form .form-field:has(textarea:focus)>label,
    .pe--form.focus--label form .form-field:has(input[type=url]:focus)>label,
    .pe--form.focus--label form .form-field:has(input[type=email]:focus)>label,
    .pe--form.focus--label form .form-field:has(input[type=number]:focus)>label,
    .pe--form.focus--label form .form-field:has(input[type=tel]:focus)>label,
    .pe--form.focus--label form .form-field:has(input[type=text]:focus)>label,
    .pe--form.focus--label form .form-field:has(input[type=url].has-content)>label,
    .pe--form.focus--label form .form-field:has(input[type=email].has-content)>label,
    .pe--form.focus--label form .form-field:has(input[type=number].has-content)>label,
    .pe--form.focus--label form .form-field:has(input[type=tel].has-content)>label,
    .pe--form.focus--label form .form-field:has(input[type=text].has-content)>label {
        transform: translateY(0) scale(.75);
        top: -1rem;
        font-size: 12px;
        color: var(--secondaryColor);
        margin-bottom: 0;
    }


    .pe--form.focus--label form.wpcf7-form label:has(textarea)>label:first-child {
        top: var(--paddingTop);
        z-index: 3;
    }

    .pe--form form .form-field:has(input[aria-required=true]) label::after {
        content: "*";
        display: inline-block;
        color: red;
        margin-left: 0.2em;
        font-size: 0.9em;
        vertical-align: super;
    }


    .pe--form form input[type=radio],
    .pe--form form input[type=checkbox] {
        background: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 1em;
        height: 1em;
        border: 1px solid var(--linesColor);
        border-radius: 3px;
        position: relative;
        margin-top: -1px;
        vertical-align: sub;
        background: var(--secondaryBackground);
    }

    .pe--form form input[type=radio]:checked::after,
    .pe--form form input[type=checkbox]:checked::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--mainColor);
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        border-radius: 3px;
    }

    .pe--form form input[type=radio],
    .pe--form form input[type=checkbox] {
        -moz-appearance: none;
        appearance: none;
        -webkit-appearance: none;
        margin-right: 0.25em;
    }



    .pe--form form .checkbox--button input[type=radio],
    .pe--form form .checkbox--button input[type=checkbox] {
        -moz-appearance: none;
        appearance: none;
        -webkit-appearance: none;
        display: none;
    }

    .pe--form form .checkbox--button label:has(input[type=radio]),
    .pe--form form .checkbox--button label:has(input[type=checkbox]) {
        padding: 15px 30px;
        border-radius: 50px;
        border-color: var(--linesColor);
    }

    .pe--form form .checkbox--button label:has(input[type=radio]:checked),
    .pe--form form .checkbox--button label:has(input[type=checkbox]:checked) {
        background: var(--mainColor);
        color: var(--secondaryBackground);
    }

    .pe--form form .zeyna--file--upload {
        width: 100%;
        height: auto;
        padding: 0.65em;
        margin-bottom: 1em;
        border-radius: 10px;
    }

    .pe--form form .zeyna--file--upload input {
        appearance: none;
        display: none;
    }

    .pe--form form .zeyna--file--upload label {
        width: 100%;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .pe--form form .zeyna--file--upload:has(.has--files) span:not(.upload--main) {
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        background: var(--secondaryBackground);
    }


    .zeyna--file--upload {
        width: 150px;
        height: 150px;
        font-size: 1em;
        background: var(--secondaryBackground);
        border-radius: 15px;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .zeyna--file--upload::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(100% - 1em);
        height: calc(100% - 1em);
        border-width: 1px;
        border-style: dashed;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        border-radius: 10px;
        pointer-events: none;
        opacity: .25;
        transition: opacity .4s ease
    }

    .zeyna--file--upload:hover::after {
        opacity: 1
    }

    .zeyna--file--upload label {
        margin: 0;
        padding: 1em;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-transform: none;
        font-size: 14px;
        line-height: 1.4;
        gap: 10px;
        height: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }

    .zeyna--file--upload svg {
        width: 1.5em;
        height: 1.5em;
        fill: var(--mainColor)
    }

    .zeyna--file--upload span:not(.upload--main) {
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
        white-space: nowrap;
    }

    .upload--style--wide .zeyna--file--upload {
        width: 100%;
        height: auto;
        padding: 0.65em;
        margin-bottom: 1em;
        border-radius: 10px;
    }

    .upload--style--wide .zeyna--file--upload label {
        width: 100%;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .upload--style--wide .zeyna--file--upload:has(.has--files) span:not(.upload--main) {
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        background: var(--secondaryBackground);
    }

    .pe--form form .file-preview {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .pe--form form .file-preview button {
        position: absolute;
        top: 2px;
        left: 2px;
        padding: 0;
        color: #fff;
        border-radius: 50%;
        background: #a10a0a;
        line-height: 0;
        width: 0.7rem;
        height: 0.7rem;
        font-size: 10px;
        font-weight: 500;
        padding: 5px;
        box-sizing: content-box;
        font-family: monospace
    }

    .pe--form form .file-preview .file-item {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 10px;
        width: 75px;
        height: auto;
    }

    .pe--form form .file-preview .file-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .pe--form form .file-preview .file-item>span {

        display: block;
        border-radius: 0;
        box-sizing: content-box;
    }


    .pe--form form .file-preview .file-item:has(span) {
        width: 125px;
        height: auto;
        background: lightgray;
        color: #000;
        padding: 24px 10px 10px 10px;
        border-top-right-radius: 0;
        border-bottom-left-radius: 0
    }

    .pe--form.form--custom form .form-field>label {
        margin-bottom: 1rem;
    }

    .pe--form.form--custom form .form-field .error-message {
        position: absolute;
        top: 50%;
        right: var(--padding-right);
        font-size: 10px;
        color: red;
        transform: translateY(-50%);
    }

    .pe--form.form--custom form .form-field:has(textarea) .error-message {
        top: var(--paddingTop);
        transform: translateY(0);
    }

    .pe--form.focus--outline form input.has-content:not(.field-error) {
        border-color: green;
    }

    .pe--form .pe-select .select-items,
    .pe--form .pe-select {
        border: 1px solid var(--linesColor);
        width: 100%;
        border-radius: var(--radius);
        padding-top: var(--paddingTop);
        padding-bottom: var(--paddingBottom);
        padding-left: var(--paddingLeft);
        padding-right: var(--paddingRight);
    }


    .pe--form .pe-select .select-selected {
        padding: 0
    }

    .labels--inline .pe--form form .form-field {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 2rem;
    }

    .labels--inline .pe--form form .form-field:has(.zeyna--file--upload) {
        flex-direction: column;
    }

    .labels--inline .pe--form form .form-field label.label--main {
        width: 20%;
    }


    .labels--inline .pe--form form .form-field textarea,
    .labels--inline .pe--form form .form-field>input,
    .labels--inline .pe--form form .form-field textarea,
    .labels--inline .pe--form form .form-field>.options--wrap {
        /* width: 80% !important; */
    }

    .labels--hidden .pe--form form .form-field label.label--main {
        display: none;
    }

    .pe--form--submit {
        opacity: .4;
        pointer-events: none;
    }


    .elementor-editor-active .pe--form--submit,
    .form--valid .pe--form--submit {
        opacity: 1;
        pointer-events: all;
    }

    .pe--form--button--wrap {
        display: flex;
        gap: 1rem;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }

    .pe--form--button--wrap .pe--button {
        width: 100%;
    }

    .pre--transform {
        transform: translateY(var(--transformY)) translateX(var(--transformX));
        --transformX: 0%;
        --transformY: 0%;
    }

    button.pe--form--submit {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: auto;
        background: var(--secondaryBackground);
        color: var(--mainColor);
        transition: all .4s ease;
        overflow: hidden;
        border-radius: var(--radius);
        cursor: pointer;
        border-color: var(--linesColor);
        border-width: 1px;
    }

    button.pe--form--submit.success,
    button.pe--form--submit:hover {
        gap: 3rem;
    }


    button.pe--form--submit::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background: transparent;
        transition: width .5s cubic-bezier(0.84, 0.27, 0, 1);
        z-index: -1;
        border-radius: var(--radius)
    }


    .pe--form--button.pe--styled--object {
        width: 100%;
        --radius: 50px;
    }

    .submit--button--icons {
        font-size: 1.5rem;
        width: 1.5rem;
        height: 1.5rem;
        position: relative;
    }

    .submit--button--icons svg {
        width: 100%;
        height: 100%;
        fill: var(--mainColor);
    }

    .submit--button--icons i {
        font-size: 1em;
    }

    .submit--button--icons>span {
        width: 100%;
        height: 100%;
        display: block;
        transition: opacity .4s ease
    }

    .submit--button--icons>span:not(span.submit--icon) {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

    .pe--form--submit.wait .submit--button--icons>span:not(span.wait--icon) {
        opacity: 0;
    }

    .pe--form--submit.wait .submit--button--icons>span.wait--icon {
        opacity: 1;
        animation-name: cartLoading;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        transform-origin: center center;
    }


    button.pe--form--submit.error::before {
        background: #981e1e;
        width: 100%;
        left: unset;
        right: 0
    }

    .pe--form--submit.error .submit--button--icons>span:not(span.error--icon) {
        opacity: 0;
    }

    .pe--form--submit.error .submit--button--icons>span.error--icon {
        opacity: 1;

    }

    button.pe--form--submit.success::before {
        background: #53981e;
        width: 100%
    }

    .pe--form--submit.success .submit--button--icons>span:not(span.success--icon) {
        opacity: 0;
    }

    .pe--form--submit.success .submit--button--icons>span.success--icon {
        opacity: 1;
    }

    .pe-form--submit--message {
        display: block;
        float: left;
        width: auto;
    }

    .pe--form--button.pe--styled--object {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .pe-form--submit--message .error {
        color: red;
    }

    .pe-form--submit--message .success {
        color: green;
    }

    .pe--form--success--popup {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        z-index: 33;
        padding: 50px 75px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        border-radius: 5px;
        text-align: center;
        width: 100%;
        height: 101%;
        display: none;
        border-color: var(--linesColor);
        border-width: 1px;
        --blur: 10px
    }

    .success--popup--has--bg .pe--form--success--popup {
        background: var(--secondaryBackground);
    }

    .success--popup--has--backdrop .pe--form--success--popup {
        background: rgba(0, 0, 0, .35);
        backdrop-filter: blur(var(--blur))
    }


    .elementor-editor-active .popup--preview .pe--form.form--custom .pe--form--success--popup,
    .pe--form.form--custom.form--success .pe--form--success--popup {
        display: flex;
    }


    .pe--form--success--popup svg {
        fill: green;
        width: 10rem;
        height: 10rem
    }

    .pe--form.form--custom form .form-field .options--wrap {
        display: flex;
        align-items: start;
        justify-content: start;
        width: 100%;
        gap: 1rem;
        padding-top: var(--paddingTop);
        padding-bottom: var(--paddingBottom);
        padding-left: var(--paddingLeft);
        padding-right: var(--paddingRight);
    }

    .radios--has--bg label:has(input[type=radio]) {
        background: var(--secondaryBackground);
    }

    @media only screen and (max-width: 550px) {


        .labels--inline .pe--form form .form-field {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 0
        }

        .labels--inline .pe--form form .form-field label.label--main {
            width: 100%;
        }

        .labels--inline .pe--form form .form-field textarea,
        .labels--inline .pe--form form .form-field>input,
        .labels--inline .pe--form form .form-field textarea,
        .labels--inline .pe--form form .form-field>.options--wrap {
            width: 100% !important;
        }


    }

    /* Popups  */

    span.pop--overlay {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #000;
        opacity: 0;
        z-index: 999999 !important;
        visibility: hidden;
        -webkit-transition: all .4s ease-out;
        -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
        z-index: 2;
    }

    .pop-overlay-backdrop-true span.pop--overlay {
        --backdropBlur: 30px;
        backdrop-filter: blur(var(--backdropBlur));
    }

    .pop-overlay-true span.pop--overlay {
        display: block;
    }

    .pop--active span.pop--overlay {
        opacity: .6;
        visibility: visible;
        pointer-events: all;
        display: block;
    }

    .pop-overlay-backdrop-true .pop--active span.pop--overlay,
    .pop-overlay-backdrop-true.pop--active span.pop--overlay {
        opacity: 1;
    }

    span.pop--close {
        position: absolute;
        top: 1em;
        right: 1em;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        z-index: 99999;
        display: none;
        line-height: 0;
        --transformX: 0;
        --transformY: 0;
        -webkit-transform: translateX(var(--transformX)) translateY(var(--transformY));
        -ms-transform: translateX(var(--transformX)) translateY(var(--transformY));
        transform: translateX(var(--transformX)) translateY(var(--transformY));
        --radius: 50%;
        --backdropBlur: 10px;
        border-width: 1px;
        border-color: var(--linesColor);
        border-radius: var(--radius) !important;
    }

    .pop--close---show span.pop--close {
        display: block;
    }

    .close--button--has--backdrop span.pop--close {
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        background: #060606
    }


    .close--button--has--hover.close--button--has--bg span.pop--close {
        -webkit-transition: color .3s ease;
        -o-transition: color .3s ease;
        transition: color .3s ease;
    }

    .close--button--has--hover.close--button--has--bg span.pop--close svg {
        -webkit-transition: fill .3s ease;
        -o-transition: fill .3s ease;
        transition: fill .3s ease;
    }

    .close--button--has--hover.close--button--has--bg span.pop--close::before,
    .close--button--has--bg span.pop--close::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: var(--secondaryBackground);
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: -2;
        border-radius: var(--radius);
    }

    .close--button--has--hover.close--button--has--bg span.pop--close::before {
        width: 0%;
        height: 0%;
        background: var(--mainColor);
        z-index: -1;
        border-radius: var(--radius);
        -webkit-transition: all .4s cubic-bezier(0.86, 0, 0.1, 1);
        -o-transition: all .4s cubic-bezier(0.86, 0, 0.1, 1);
        transition: all .4s cubic-bezier(0.86, 0, 0.1, 1);
    }

    .close--button--has--hover.close--button--has--bg span.pop--close:hover::before {
        width: 100%;
        height: 100%;
    }

    .close--button--has--hover.close--button--has--bg span.pop--close:hover {
        color: var(--mainBackground)
    }

    .close--button--has--hover.close--button--has--bg span.pop--close:hover svg {
        fill: var(--mainBackground)
    }

    .close--button--has--backdrop span.pop--close::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.2);
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: -2;
        border-radius: var(--radius);
        -webkit-backdrop-filter: blur(var(--backdropBlur));
        backdrop-filter: blur(var(--backdropBlur))
    }


    .close--button--outside span.pop--close {
        top: 0;
        right: 0;
        --transformX: 50%;
        --transformY: -50%;
        padding: 5px;
    }

    .pop--close--show span.pop--close {
        display: block;
    }

    span.pop--close svg {
        fill: var(--secondaryColor);
    }

    .pe--account--dropdown ul {
        list-style: none;
        width: 100% !important;
    }

    @media only screen and (max-width: 576px) {

        .pop--close---mobile-show span.pop--close {
            display: block;
        }

        .pe--account--login--popup {
            height: 100svh;
            width: 100vw;
            top: unset;
            left: 0;
            bottom: 0;
            -webkit-transform: translateY(100%);
            -ms-transform: translateY(100%);
            transform: translateY(100%);
            visibility: hidden;
            pointer-events: none;
        }


    }


    /* Popup Behaviors  */

    .pe--pop--button {
        user-select: none;
        cursor: pointer
    }

    .zeyna--popup--template {
        max-height: var(--contMaxHeight);
        overflow: auto;
        scroll-behavior: smooth;
    }

    .pe--styled--popup {
        --leftSpacing: 20px;
        --topSpacing: 20px;
        --bottomSpacing: 40px;
        --rightSpacing: 20px;
        --backdropBlur: 10px;
        border-color: var(--linesColor);
        border-width: 1px;
        position: fixed !important;
        left: var(--leftSpacing);
        top: var(--topSpacing);
        right: var(--rightSpacing);
        bottom: var(--bottomSpacing);
        background: var(--secondaryBackground);
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        min-width: 50vw;
        border-radius: 15px;
        z-index: 999999999 !important;
        padding: var(--popPadding);
        pointer-events: none;
        visibility: hidden;
        color: var(--mainColor);
        --popPadding: 1em;
        opacity: 0;
        min-height: fit-content;
        overflow: hidden;
    }

    .pop--active .pe--styled--popup {
        pointer-events: all;
    }

    .pop--has--backdrop .pe--styled--popup {
        background-color: rgba(255, 255, 255, 0.2);
        -webkit-backdrop-filter: blur(var(--backdropBlur));
        backdrop-filter: blur(var(--backdropBlur));
    }

    .pop--behavior--center .pe--styled--popup {
        left: 50%;
        top: var(--topSpacing);
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        --topSpacing: 50vh
    }

    .pop--behavior--left .pe--styled--popup {
        --bottomSpacing: unset;
        --rightSpacing: unset;
        height: auto;
    }

    .pop--behavior--right .pe--styled--popup {
        --bottomSpacing: unset;
        --leftSpacing: unset;
        height: auto;
    }

    .pop--behavior--top .pe--styled--popup {
        --bottomSpacing: unset;
        --rightSpacing: unset;
        --leftSpacing: 50%
    }


    .pop--behavior--bottom .pe--styled--popup {
        --topSpacing: unset;
        --rightSpacing: unset;
        --leftSpacing: 50%
    }

    .pop--behavior--top .pe--styled--popup {}



    /* Zeyna Lightbox  */
    .preview--lightbox .zeyna--lightbox,
    .lightbox--active {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw !important;
        height: 100vh;
        z-index: 9999;
        /* background: #0000001a; */
        /* -webkit-transition: background-color 1s ease .5s;
        -o-transition: background-color 1s ease .5s;
        transition: background-color 1s ease .5s; */
        /* backdrop-filter: blur(10px); */
    }

    .zeyna--lightbox {
        /* z-index: 4; */
    }

    .preview--lightbox .zeyna--lightbox .product--gallery--wrapper,
    .lightbox--active .product--gallery--wrapper {
        width: 100% !important;
        height: 100% !important;
    }

    .zeyna--lightbox--controls>span {
        position: absolute;
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        cursor: pointer;
        z-index: 5;
        line-height: 0;
        text-align: center;
    }

    span.zeyna--lightbox--close {
        top: 25px;
        right: 25px;
    }

    .zeyna--lightbox--controls svg {
        fill: #fff;
        width: 1em;
        height: 1em;
    }

    span.zeyna--lightbox--prev {
        top: 50%;
        left: 100px;
    }

    span.zeyna--lightbox--next {
        top: 50%;
        right: 100px;
    }

    span.zeyna--lightbox--next svg,
    span.zeyna--lightbox--prev svg {
        width: 1em;
        height: 1em;
    }

    .lightbox--image.active {
        z-index: 22;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .lightbox--nav--init .lightbox--image {
        -webkit-transition: opacity .5s ease;
        -o-transition: opacity .5s ease;
        transition: opacity .5s ease;
        z-index: 3;
    }

    .lightbox--nav--init.lightbox--carousel .lightbox--image:not(.active) {
        opacity: .5;
    }

    .lightbox--nav--init.lightbox--slideshow .lightbox--image:not(.active) {
        opacity: 0;
    }

    .zeyna--lightbox--controls {
        opacity: 0;
        pointer-events: none;
        -webkit-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
        user-select: none;
    }

    .lightbox--active .zeyna--lightbox--controls {
        opacity: 1;
        pointer-events: all;

    }

    .zeyna--lightbox--button {
        position: absolute !important;
        top: 0.5rem;
        left: 0.5rem;
        width: 2rem;
        height: 2rem;
        line-height: 1;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        z-index: 2;

    }

    .zeyna--lightbox--button:has(svg) {
        width: 1em;
        height: 1em;
        padding: 5px;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }

    .zeyna--lightbox--button:has(svg) svg {
        line-height: 1;
        width: 1em;
        height: 1em;
    }

    .lightbox--active .zeyna--lightbox--button {
        opacity: 0
    }

    @media only screen and (max-width: 550px) {
        span.zeyna--lightbox--prev {
            top: unset;
            bottom: 30px;
            left: 30px;
        }

        span.zeyna--lightbox--next {
            top: unset;
            right: 30px;
            bottom: 30px;
        }

        .lightbox--active {
            height: 100svh;
        }
    }

    .lightbox--carousel.lightbox--active>div:not(.zeyna--lightbox--controls) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 74%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: max-content;
        top: 13%;
        z-index: 4;
    }

    .preview--lightbox .zeyna--lightbox.lightbox--slideshow .lightbox--image {
        height: 90vh;
        width: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }


    .preview--lightbox .zeyna--lightbox.lightbox--carousel .lightbox--image {
        height: 100%;
        width: auto;
    }

    .zeyna--lightbox--thumbs {
        position: absolute;
        bottom: 1rem;
        display: flex;
        flex-direction: row;
        width: fit-content;
        gap: 1rem;
        left: 1rem;
        height: fit-content;
    }

    .zeyna--lightbox--thumbs>div {
        width: 75px;
        height: 75px;
        border-radius: 10px;
        overflow: hidden;
        display: block;
        transition: opacity .4s ease;
    }

    .zeyna--lightbox--thumbs:has(.active)>div:not(.active) {
        opacity: .3;
    }

    .zeyna--lightbox--thumbs>div img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .zeyna--lightbox--controls>span.zeyna--lightbox--overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        display: block;
        height: 00%;
        background: #000;
        z-index: -1;
        transition: all .5s cubic-bezier(1, 0, 0, 1) 0s;
    }

    .zeyna--lightbox--controls>span.zeyna--lightbox--overlay.fade {
        opacity: 0;
        height: 100%;
    }

    .zeyna--lightbox--controls>span.zeyna--lightbox--overlay.overlay--backdrop {
        backdrop-filter: blur(var(--blur));
        --blur: 20px;
        background: rgba(0, 0, 0, 0.5);
    }

    .lightbox--active .zeyna--lightbox--controls>span.zeyna--lightbox--overlay {
        height: 100%;
        opacity: 1;
    }

    .zeyna--template--popup .pe--pop--button {
        font-size: 1em;
        line-height: 1;
        padding: 0.25em;
        display: block;
    }

    .button--style--icon_text .zeyna--template--popup .pe--pop--button.pe--styled--object {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0.5em;
    }


    .zeyna--template--popup .pe--pop--button i {
        font-size: var(--iconSize);
    }

    .zeyna--template--popup .pe--pop--button svg {
        width: var(--iconSize);
        height: var(--iconSize);
        fill: var(--mainColor);
        display: block;
    }

    /* Styled Objects  */

    .pe--styled--object {
        position: relative;
        --radius: 0;
        --backdropBlur: 10px;
        border-width: 1px;
        border-color: var(--linesColor);
        border-radius: var(--radius) !important;
        overflow: hidden;
        z-index: 0;
        --paddingTop: 0px;
        --paddingLeft: 0px;
        --paddingBottom: 0px;
        --paddingRight: 0px;
        user-select: none;
    }

    .pe--styled--object>i {
        font-size: 1em;
        display: block;
    }

    .pe--styled--object:not(.site-branding)>* {
        z-index: 3;
        position: relative;
    }

    .pe--pop--button.pe--styled--object {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        --iconSize: 1.3em;
    }

    .pe--pop--button>svg {
        width: var(--iconSize);
        height: var(--iconSize);
    }

    .pe--styled--object::before {
        display: block;
        width: 100%;
        height: 100%;
        background: var(--secondaryBackground);
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 0;
        z-index: -1;
        border-radius: var(--radius);
    }



    /* Styled Objects  */

    .pe--archive--title {
        display: flex;
        align-items: start;
        justify-content: space-between;
    }

    .text-wrapper.archive--desc {
        max-width: 50%;
    }

    @media only screen and (max-width: 550px) {
        .text-wrapper.archive--desc {
            max-width: 100%
        }

    }


    /*====================================
       Image Gallery
    ======================================*/
    .pe--image--gallery--wrapper {
        display: grid;
        grid-template-columns: repeat(var(--columns), 1fr);
        --columns: 4;
        --row-gap: 20px;
        --column-gap: 20px;
        --rowHeight: aut;
        grid-auto-rows: var(--rowHeight);
        row-gap: var(--row-gap);
        column-gap: var(--column-gap);
    }

    .pe--image--gallery[data-build-type="3d--scale--in"] .pe--image--gallery--wrapper {
        transform-style: preserve-3d;
        perspective: 2000px;
    }

    .pe--image--gallery--item {
        display: block;
        overflow: hidden;
        will-change: transform
    }

    .items--box--shadow .pe--image--gallery--item {
        box-shadow: 0 0px 40px 0px rgb(0 0 0 / 53%);
    }

    .pe--image--gallery--item img {
        width: 100%;
        height: auto;
        display: block;

    }

    .align--items--stretch .pe--image--gallery--item img {
        height: 100%;
        object-fit: cover;
    }

    .pe--slider--slide.swiper-slide .pe--image--gallery--item img,
    .pe--slider--slide.swiper-slide .pe--image--gallery--item {
        height: 100%;
        object-fit: cover;
    }

    /*====================================
       Image Gallery
    ======================================*/



    .otgs-development-site-front-end {
        display: none !important;
    }


    /*====================================
       3D Renderer
    ======================================*/

    .lil-gui .controller .widget {
        margin: 0;
        background: none;
        padding: 0;
    }

    .lil-gui .controller.color input[type=text] {
        color: #fff;
        border: none;
        border-radius: 0;
    }

    .lil-gui .controller.number.hasSlider input {
        border-radius: 0;
        border: none;
        background: var(--focus-color);
    }

    .pe--3d--renderer {
        width: 100%;
        height: auto;

        display: block;
    }

    .renderer--container {
        width: 100%;
        height: 100vh;
        /* background-color: #000; */
        display: block;
    }

    .orbit-gizmo {
        top: unset !important;
        right: unset !important;
        left: 0 !important;
        bottom: 0 !important;
    }

    /*====================================
       Spline Loader
    ======================================*/

    .pe--spline--loader canvas.spline--canvas {
        width: 100% !important;
        height: 100% !important;
    }

    div#animation--gui {
        position: fixed;
        top: 50px;
        left: 20px;
        width: auto;
        max-height: calc(100vh - 20px);
        overflow: scroll;
        z-index: 9999999;
        pointer-events: all;
    }

    .tp-lblv_l {
        text-transform: capitalize;
    }

    .tp-lblv.gsap-control-button {
        width: 30.5%;
        display: inline-block !important;
    }

    .tp-txtv_i,
    .tp-p2dpv_p,
    .tp-colswv_sw {
        background-color: var(--in-bg) !important;
        border-radius: var(--bld-br) !important;
        box-sizing: border-box !important;
        color: var(--in-fg) !important;
        font-family: inherit !important;
        height: var(--cnt-usz) !important;
        line-height: var(--cnt-usz) !important;
        min-width: 0 !important;
        width: 100% !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-color: rgba(0, 0, 0, 0) !important;
        border-width: 0 !important;
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        margin: 0 !important;
        outline: none !important;
        padding: 0 !important;
    }

    .tp-sglv_i,
    .tp-mllv_i,
    .tp-grlv_g {
        background-color: var(--mo-bg) !important;
        border-radius: var(--bld-br) !important;
        box-sizing: border-box !important;
        color: var(--mo-fg) !important;
        height: var(--cnt-usz) !important;
        scrollbar-color: currentColor rgba(0, 0, 0, 0) !important;
        scrollbar-width: thin !important;
        width: 100% !important;
    }

    .tp-dfwv {
        position: fixed !important;
        z-index: 999999999;
        min-width: 350px !important;
    }

    .spline--marker {
        display: none !important;
        left: unset !important;
        right: 0 !important;
    }

    .gsap-marker-scroller-start.spline--marker {
        right: 30% !important;
    }

    .gsap-marker-scroller-end.spline--marker {
        right: 10% !important;
    }

    .spline--marker.visible {
        display: block !important;
    }


    .highlight--children {
        position: absolute !important;
        transition: none !important;
    }

    @media only screen and (max-width: 550px) {
        .highlight--children {
            position: relative !important;
            transition: none !important;
        }
    }

    .tp-fldv_c {
        max-height: calc(100vh - 100px) !important;
        overflow: scroll !important;
    }

    .mask--svg {
        width: 0;
        height: 0;
        position: absolute;
        pointer-events: none;
    }

    .mask--svg path {
        --maskX: 0%;
        --maskY: 0%;
        --maskScale: 1;
        --maskRotate: 0deg;
        transform: translate(var(--maskX), var(--maskY)) scale(var(--maskScale)) rotate(var(--maskRotate));
    }




    /*====================================
       Showcase Cards
    ======================================*/

    .showcase--cards {
        height: 100svh;
        position: relative;
        overflow: hidden;
        display: block;
    }

    .showcase--cards .showcase--cards--wrapper {
        position: relative;
        top: 57.5%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        overflow: visible;
        width: 60vw;
        height: 60vh;
        perspective: 2000px;
    }

    .showcase--cards .zeyna--portfolio--project {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        overflow: hidden;
        transform: translateY(calc(var(--transformY) + var(--yProgress))) translateZ(calc(var(--transformZ) + (var(--zProgress))));
    }

    .showcase--cards .zeyna--portfolio--project.clone--project {
        will-change: transform;
    }

    .showcase--cards .zeyna--portfolio--project.showcase--project {
        will-change: transform, top;
    }

    .showcase--cards .zeyna--portfolio--project:last-child {
        top: 0 !important;
    }

    .showcase--cards .zeyna--portfolio--project .portfolio--project--wrapper,
    .showcase--cards .zeyna--portfolio--project .portfolio--project--wrapper a,
    .showcase--cards .zeyna--portfolio--project .portfolio--project--wrapper a .project--image,
    .showcase--cards .zeyna--portfolio--project .portfolio--project--wrapper a .project--image img {
        height: 100%;
        width: 100%;
    }


    .showcase--cards .zeyna--portfolio--project .portfolio--project--wrapper a {
        display: flex;
        flex-direction: column;
    }



    @media only screen and (max-width: 550px) {
        .showcase--cards {
            width: 100% !important;
            max-width: 100% !important;
        }

        .showcase--cards .showcase--cards--wrapper {
            width: 100vw;
            height: 40vh;
            top: 60vh
        }
    }

    /*====================================
    // Showcase Cards
    ======================================*/


 /*====================================
       Showcase Void
    ======================================*/


 .showcase--void {
     height: 100svh;
     display: block;
     overflow: hidden;
     position: relative;
 }

 .showcase--void .showcase--void--wrapper {
     position: relative;
     perspective: 200px;
     width: 100%;
     height: 100%;
 }


 .showcase--void .showcase--void--wrapper .project--container {
     position: absolute;
     width: 40%;
     transform: translateZ(calc(var(--transformZ) + var(--zProgress)));
     opacity: calc(var(--opacity) + var(--opacityProg));
     filter: blur(calc(var(--blur) - var(--filterProg)));
     will-change: filter;
 }

 .showcase--void .showcase--void--wrapper .project--container .portfolio--project--wrapper {
     opacity: calc(var(--innerOpacity) - var(--innerOpacityProg))
 }

 @media only screen and (max-width: 550px) {
     .showcase--void .showcase--void--wrapper .project--container {
         width: 90%
     }
 }

 /*====================================
       Showcase Void
    ======================================*/





    /*==================================== 
       Showcase Table
    ======================================*/


    .showcase--table {
        height: 100vh;
        width: 100%;
        position: relative;
    }

    .showcase--table .showcase--table--wrapper .zeyna--portfolio--project {
        position: absolute;
        width: 20%;
        overflow: hidden;
        float: left;
        top: 100vh;
        left: 50%;
        transform: translateX(-50%);
        will-change: top, left;
    }


    .showcase--table .shuffle--button {
        position: absolute;
        bottom: 50px;
        right: 50px;
        z-index: 9999999999;
        --transformX: 0;
        --transformY: 0;
        -webkit-transform: translateX(var(--transformX)) translateY(var(--transformY));
        -ms-transform: translateX(var(--transformX)) translateY(var(--transformY));
        transform: translateX(var(--transformX)) translateY(var(--transformY));
    }

    @media only screen and (max-width: 550px) {
        .showcase--table .showcase--table--wrapper .zeyna--portfolio--project {
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%);
        }
    }



    /*==================================== 
    // Showcase Table
    ======================================*/













    /*====================================
       Showcase 3D Carousel
    ======================================*/

    .showcase--3d--carousel {
        width: 100%;

        height: 100vh;
        max-height: 100vh;
        overflow: visible;
        position: relative;
        --progress: 0px;
        padding: 0;
        display: block;
        left: 0!important
    }


    .showcase--3d--carousel .showcase--3d--carousel--wrapper {
        width: 100%;
        height: 100%;
        position: relative;
        --spacing: 400
    }

    .showcase--3d--carousel .showcase--3d--carousel--wrapper .project--container {
        position: absolute;
        bottom: 0%;
        left: 0%;
        perspective: 2000px;
        transform: translate(0%, 100%) rotateX(20deg) rotateY(20deg) translateZ(calc(var(--transformZ) - var(--progress)));
        width: 28vw;
        transform-style: preserve-3d;
        will-change: transform;
        overflow: visible;
        /* backface-visibility: hidden; */
    }

    .showcase--3d--carousel .showcase--3d--carousel--wrapper .project--container .zeyna--portfolio--project {
        overflow: visible;
    }

    .showcase--3d--carousel .showcase--3d--carousel--wrapper .zeyna--portfolio--project .portfolio--project--wrapper {
        transition: transform 0.4s ease;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .showcase--3d--carousel .showcase--3d--carousel--wrapper .zeyna--portfolio--project .portfolio--project--wrapper a,
    .showcase--3d--carousel .showcase--3d--carousel--wrapper .zeyna--portfolio--project .portfolio--project--wrapper a>.project--image,
    .showcase--3d--carousel .showcase--3d--carousel--wrapper .zeyna--portfolio--project .portfolio--project--wrapper a>.project--image>img {
        height: 100%
    }

    .showcase--3d--carousel .showcase--3d--carousel--wrapper .project--container:hover .portfolio--project--wrapper {
        transform: translateX(50%);
    }

    .showcase--3d--carousel.is__scrolling .showcase--3d--carousel--wrapper .project--container:hover .portfolio--project--wrapper {
        transform: translateX(0);
    }

    body:has(.showcase--3d--carousel) {
        width: fit-content;
        overflow: scroll;
    }

    @media only screen and (max-width: 550px) {
        
            body:has(.showcase--3d--carousel) {
                width: fit-content;
                overflow: scroll;
            }
    
            body:has(.showcase--3d--carousel) header {
                position: fixed;
                width: 100vw;
                top: 0;
                left: 0;
            }
        
        .showcase--3d--carousel .showcase--3d--carousel--wrapper {
            --spacing: 250px
        }

        .showcase--3d--carousel .showcase--3d--carousel--wrapper .project--container {
            bottom: 50%;
            width: 50vw;
            height: 25vh;
        }
    }





    /*====================================
    // Showcase 3D Carousel
    ======================================*/






    /*====================================
       Showcase Rotate
    ======================================*/

    .showcase--rotate {
        display: block;
        overflow: visible;
        width: 100%;
        height: 100svh;
        margin: 0 auto;
        position: static
    }

    .showcase--rotate .showcase--rotate--wrapper {
        position: relative;
        width: 300%;
        height: 300%;
        overflow: visible;
        transform: scale(0.33333) translate(-100%, -100%);
        transform-origin: center center;
        will-change: transform;
    }

    .showcase--rotate .showcase--rotate--wrapper .zeyna--portfolio--project {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) rotate(calc(var(--progress) + var(--rotate)));
        width: 150vh;
        height: 50vh;
        transform-origin: left center;
        overflow: visible;
        will-change: transform;
    }

    .showcase--rotate .showcase--rotate--wrapper .zeyna--portfolio--project a {
        pointer-events: none;
    }

    .showcase--rotate .showcase--rotate--wrapper .zeyna--portfolio--project .portfolio--project--wrapper {
        position: relative;
        height: 100%;
        width: 40%;
        float: right;
    }

    .showcase--rotate .showcase--rotate--wrapper .zeyna--portfolio--project .portfolio--project--wrapper a {
        width: 100%;
        height: 100%;
        object-fit: cover;
        overflow: hidden
    }

    .showcase--rotate .showcase--rotate--wrapper .zeyna--portfolio--project .portfolio--project--wrapper .project--metas--wrap {
        transform: none;
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--secondaryBackground);
        transition: transform 0.5s ease;
        height: 100%;
        overflow: hidden;
        width: 100%;
        margin: 0;
        z-index: -1;
    }

    .showcase--rotate .showcase--rotate--wrapper .zeyna--portfolio--project .portfolio--project--wrapper a .project--image {
        height: 100%;
        width: 100%;
    }

    .showcase--rotate .showcase--rotate--wrapper .zeyna--portfolio--project .portfolio--project--wrapper a .project--image>* {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .showcase--rotate .showcase--rotate--wrapper .zeyna--portfolio--project.active .portfolio--project--wrapper .project--metas--wrap {
        position: absolute;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        display: block;
        transform: translateX(100%);
        margin: 0
    }

    .showcase--rotate .showcase--rotate--navigation {
        display: flex;
        flex-direction: row;
        position: absolute;
        bottom: 50px;
        left: 50px;
        padding: 5px;
        --secondaryBackground: #ebebeb;
        border-radius: 50px;
        background: var(--secondaryBackground);
        --transformY: 0;
        --transformX: 0;
        -webkit-transform: translateX(var(--transformX)) translateY(var(--transformY));
        -ms-transform: translateX(var(--transformX)) translateY(var(--transformY));
        transform: translateX(var(--transformX)) translateY(var(--transformY));
    }

    .showcase--rotate .showcase--rotate--navigation .navigation--item {
        padding: 20px;
        position: relative;
        z-index: 99;
        transition: color 1s ease
    }

    .showcase--rotate .showcase--rotate--navigation .navigation--item.nav--item--active {
        color: var(--mainBackground)
    }

    .showcase--rotate .showcase--rotate--navigation .active--item--bg {
        position: absolute;
        width: 50%;
        left: 0;
        height: 100%;
        z-index: 0;
        background-color: var(--mainColor);
        border-radius: 50px;
        top: 50%;
        transform: translateY(-50%)
    }

    @media only screen and (max-width: 550px) {
        .showcase--rotate .showcase--rotate--wrapper {
            transform: translateX(-100%) translateY(-33%) !important;
        }

        .showcase--rotate .showcase--rotate--navigation {
            display: none
        }
    }

    /*====================================
    // Showcase Rotate
    ======================================*/


    .zeyna--portfolio--project.active .portfolio--project--wrapper .project--metas--wrap .show--on--hover {
        display: block;
    }

    .zeyna--portfolio--project.active .portfolio--project--wrapper .project--metas--wrap .project--details--wrap.show--on--hover,
    .zeyna--portfolio--project.active .portfolio--project--wrapper .project--metas--wrap .project--taxonomies--wrap.show--on--hover {
        display: flex;
    }

    .zeyna--portfolio--project .portfolio--project--wrapper .project--metas--wrap .show--on--hover {
        display: none;
    }

    /* Nested Tabs  */
    /* .elementor-widget-n-tabs .e-n-tab-title {
        --n-tabs-title-color: var(--mainColor) !important;
        --n-tabs-title-background-color-active: var(--secondaryBackground);
        --n-tabs-title-color-active: var(--mainBackground) !important;
        --n-tabs-title-background-color-hover: transparent !important
    } */

    .e-con.e-parent .elementor-widget-n-tabs .e-n-tabs-heading {
        width: fit-content;
        /* position: absolute; */
        /* z-index: 99 */
    }

    .e-con.e-parent .elementor-widget-n-tabs .e-n-tab-title {
        white-space: nowrap;
        line-height: 1;
    }


    /* Social Share Buttons */

    ul.zeyna--social-share-buttons {
        list-style: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: 10px;
        margin: 0;
    }

    ul.zeyna--social-share-buttons button {
        background: none;
        padding: 0;
        color: var(--mainColor);
    }

    ul.zeyna--social-share-buttons li {
        font-size: 1rem;
    }

    ul.zeyna--social-share-buttons li svg {
        width: 1.25em;
        height: 1.25em;
    }

    span.share--icon svg {
        fill: var(--mainColor);
    }

    .outside--curved:not(.e-con) {
        --outsideCurveWidth: 20px;
        --outsideCurveColor: var(--mainBackground);
    }

    .outside--curved:not(.e-con)::after,
    .outside--curved:not(.e-con)::before {
        content: "";
        width: var(--outsideCurveWidth);
        height: var(--outsideCurveWidth);
        position: absolute;
        border-radius: 0;
        background-image: var(--pseudo-bg);
        z-index: 222222
    }

    .outside--curved:not(.e-con)::before {
        top: calc(-1 * var(--outsideCurveWidth));
        right: 0;
        transform: rotateY(-180deg) rotateX(180deg);
        left: unset;
    }

    .top--curve--left.outside--curved:not(.e-con)::before {
        right: unset;
        left: 0;
        transform: rotateY(0deg) rotateX(180deg);
    }


    .top--curve--right-right.outside--curved::before {
        top: 0;
        right: calc(-1 * var(--outsideCurveWidth));
        transform: rotateY(0deg) rotateX(0deg);
        left: unset;
    }


    .top--curve--left-left.outside--curved:not(.e-con)::before {
        top: 0;
        left: calc(-1 * var(--outsideCurveWidth));
        transform: rotateY(-180deg) rotateX(0deg);
        right: unset;
    }


    .outside--curved:not(.e-con)::after {
        bottom: 0;
        left: calc(-1 * var(--outsideCurveWidth));
        transform: rotateY(-180deg) rotateX(180deg);
    }


    .bottom--curve--right-bottom.outside--curved:not(.e-con)::after {
        left: unset;
        right: 0;
        bottom: calc(-1 * var(--outsideCurveWidth));
        transform: rotateY(180deg) rotateX(0deg);
    }

    .bottom--curve--right.outside--curved:not(.e-con)::after {
        left: unset;
        right: calc(-1 * var(--outsideCurveWidth));
        bottom: 0;
        transform: rotateY(0deg) rotateX(180deg);
    }

    .bottom--curve--left-left.outside--curved:not(.e-con)::after {
        left: 0;
        bottom: calc(-1 * var(--outsideCurveWidth));
        transform: rotateY(0deg) rotateX(0deg);
    }

    div[role=region] .elementor-element,
    div[role=region] {
        transition: none !important;

    }

    .elementor-widget-n-accordion .e-n-accordion-item {
        overflow: hidden !important;
    }

    .elementor-widget-n-accordion .e-n-accordion-item[open]>.e-n-accordion-item-title .e-n-accordion-item-title-icon .e-closed {
        display: flex !important;
    }

    .elementor-widget-n-accordion .e-n-accordion-item[open]>.e-n-accordion-item-title .e-n-accordion-item-title-icon .e-opened {
        display: none !important
    }

    .elementor-widget-n-accordion .e-n-accordion-item[open].is-open>.e-n-accordion-item-title .e-n-accordion-item-title-icon .e-opened {
        display: flex !important
    }

    .elementor-widget-n-accordion .e-n-accordion-item[open].is-open .e-n-accordion-item-title-icon .e-closed {
        display: none !important
    }


    .pe--single--post.psp--elementor a.post--link--wrap:has(>.post-title) {
        position: relative;
        display: block;
        line-height: 0;
    }

    .pe--single--post.psp--elementor a.post--link--wrap:has(>.post-title)>* {
        margin: 0;
    }