.elementor-289 .elementor-element.elementor-element-460e2b7{--display:grid;--min-height:0px;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-289 .elementor-element.elementor-element-460e2b7:not(.elementor-motion-effects-element-type-background), .elementor-289 .elementor-element.elementor-element-460e2b7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#67007A;}.elementor-289 .elementor-element.elementor-element-33b5c77{--e-image-carousel-slides-to-show:1;width:100%;max-width:100%;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-289 .elementor-element.elementor-element-460e2b7{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-289 .elementor-element.elementor-element-460e2b7{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for image-carousel, class: .elementor-element-33b5c77 *//* =========================================================
   ECI CENTER SLIDER
   ========================================================= */


/* ================================
   WIDGET UTAMA = FULL WIDTH
   ================================ */

.elementor-289 .elementor-element.elementor-element-33b5c77 {
    --eci-width: 84vw;
    --eci-max-width: 1450px;

    position: relative !important;

    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding: 35px 0 60px 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    isolation: isolate !important;
}


/* ================================
   BACKGROUND BLUR
   FULL WIDTH
   ================================ */

.elementor-289 .elementor-element.elementor-element-33b5c77::before {
    content: "";

    position: absolute !important;

    z-index: -2 !important;

    top: -80px !important;
    left: -80px !important;
    right: -80px !important;
    bottom: -80px !important;

    background-image: var(--eci-bg) !important;

    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;

    filter: blur(35px) !important;

    transform: scale(1.15) !important;

    opacity: .85 !important;

    pointer-events: none !important;

    transition: background-image .5s ease !important;
}


/* ================================
   OVERLAY
   ================================ */

.elementor-289 .elementor-element.elementor-element-33b5c77::after {
    content: "";

    position: absolute;

    z-index: -1;

    inset: 0;

    background: rgba(255,255,255,.08);

    pointer-events: none;
}


/* =========================================================
   INI BAGIAN PALING PENTING
   AREA SLIDER = 84VW
   ========================================================= */

.elementor-289 .elementor-element.elementor-element-33b5c77 .elementor-image-carousel-wrapper,
.elementor-289 .elementor-element.elementor-element-33b5c77 .elementor-main-swiper,
.elementor-289 .elementor-element.elementor-element-33b5c77 .swiper {

    width: var(--eci-width) !important;

    max-width: var(--eci-max-width) !important;

    min-width: 0 !important;

    height: auto !important;

    margin-left: auto !important;

    margin-right: auto !important;

    box-sizing: border-box !important;

}


/* =========================================================
   SWIPER HARUS CLIP DI 84VW
   JANGAN overflow: visible
   ========================================================= */

.elementor-289 .elementor-element.elementor-element-33b5c77 .elementor-image-carousel-wrapper,
.elementor-289 .elementor-element.elementor-element-33b5c77 .elementor-main-swiper,
.elementor-289 .elementor-element.elementor-element-33b5c77 .swiper {

    overflow: hidden !important;

}


/* =========================================================
   WRAPPER SLIDE
   ========================================================= */

.elementor-289 .elementor-element.elementor-element-33b5c77 .swiper-wrapper {

    width: 100% !important;

    align-items: center !important;

}


/* =========================================================
   SLIDE
   ========================================================= */

.elementor-289 .elementor-element.elementor-element-33b5c77 .swiper-slide {

    box-sizing: border-box !important;

    opacity: .65 !important;

    transform: scale(.88) !important;

    transition:
        transform .55s cubic-bezier(.22,.61,.36,1),
        opacity .55s ease !important;

    z-index: 1 !important;

}


/* =========================================================
   SLIDE TENGAH
   ========================================================= */

.elementor-289 .elementor-element.elementor-element-33b5c77 .swiper-slide-active {

    opacity: 1 !important;

    transform: scale(1) !important;

    z-index: 10 !important;

}


/* =========================================================
   GAMBAR
   ========================================================= */

.elementor-289 .elementor-element.elementor-element-33b5c77 .swiper-slide img {

    display: block !important;

    width: 100% !important;

    height: auto !important;

    max-width: 100% !important;

    object-fit: cover !important;

    border-radius: 16px !important;

}


/* =========================================================
   HAPUS ARROW ELEMENTOR
   ========================================================= */

.elementor-289 .elementor-element.elementor-element-33b5c77 .elementor-swiper-button-prev,
.elementor-289 .elementor-element.elementor-element-33b5c77 .elementor-swiper-button-next {

    display: none !important;

}


/* =========================================================
   CUSTOM ARROW
   ========================================================= */

.elementor-289 .elementor-element.elementor-element-33b5c77 .eci-arrow {

    position: absolute !important;

    top: 50% !important;

    width: 42px !important;

    height: 42px !important;

    margin: 0 !important;

    padding: 0 !important;

    border: none !important;

    border-radius: 50% !important;

    background: rgba(255,255,255,.95) !important;

    color: #000 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    z-index: 9999 !important;

    cursor: pointer !important;

    transform: translateY(-50%) !important;

    box-shadow: 0 3px 15px rgba(0,0,0,.18) !important;

    transition: all .25s ease !important;

}


/* =========================================================
   POSISI ARROW
   84VW = menyisakan 8vw kiri dan kanan
   Panah diletakkan di area tersebut.
   ========================================================= */

.elementor-289 .elementor-element.elementor-element-33b5c77 .eci-prev {

    left: calc(8vw - 21px) !important;

}


.elementor-289 .elementor-element.elementor-element-33b5c77 .eci-next {

    right: calc(8vw - 21px) !important;

}


/* =========================================================
   ICON PANAH
   HITAM
   ========================================================= */

.elementor-289 .elementor-element.elementor-element-33b5c77 .eci-arrow svg {

    width: 19px !important;

    height: 19px !important;

    fill: none !important;

    stroke: #000000 !important;

    stroke-width: 2.5 !important;

    stroke-linecap: round !important;

    stroke-linejoin: round !important;

}


/* =========================================================
   HOVER
   ========================================================= */

.elementor-289 .elementor-element.elementor-element-33b5c77 .eci-arrow:hover {

    background: #ffffff !important;

    transform:
        translateY(-50%) scale(1.08) !important;

}


/* =========================================================
   PAGINATION
   ========================================================= */

.elementor-289 .elementor-element.elementor-element-33b5c77 .swiper-pagination {

    position: absolute !important;

    left: 0 !important;

    bottom: 15px !important;

    width: 100% !important;

    z-index: 100 !important;

}


/* =========================================================
   DOT
   ========================================================= */

.elementor-289 .elementor-element.elementor-element-33b5c77 .swiper-pagination-bullet {

    width: 9px !important;

    height: 9px !important;

    margin: 0 4px !important;

    opacity: .55 !important;

    transition: all .3s ease !important;

}


/* =========================================================
   DOT AKTIF
   ========================================================= */

.elementor-289 .elementor-element.elementor-element-33b5c77 .swiper-pagination-bullet-active {

    width: 27px !important;

    border-radius: 20px !important;

    opacity: 1 !important;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .elementor-289 .elementor-element.elementor-element-33b5c77 {

        --eci-width: 88vw;

        padding-top: 25px !important;

        padding-bottom: 55px !important;

    }


    .elementor-289 .elementor-element.elementor-element-33b5c77 .eci-prev {

        left: calc(6vw - 19px) !important;

    }


    .elementor-289 .elementor-element.elementor-element-33b5c77 .eci-next {

        right: calc(6vw - 19px) !important;

    }


    .elementor-289 .elementor-element.elementor-element-33b5c77 .eci-arrow {

        width: 38px !important;

        height: 38px !important;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .elementor-289 .elementor-element.elementor-element-33b5c77 {

        --eci-width: 92vw;

        padding-top: 15px !important;

        padding-bottom: 50px !important;

    }


    .elementor-289 .elementor-element.elementor-element-33b5c77 .eci-prev {

        left: 4px !important;

    }


    .elementor-289 .elementor-element.elementor-element-33b5c77 .eci-next {

        right: 4px !important;

    }


    .elementor-289 .elementor-element.elementor-element-33b5c77 .eci-arrow {

        width: 32px !important;

        height: 32px !important;

    }


    .elementor-289 .elementor-element.elementor-element-33b5c77 .eci-arrow svg {

        width: 15px !important;

        height: 15px !important;

    }


    .elementor-289 .elementor-element.elementor-element-33b5c77 .swiper-slide img {

        border-radius: 12px !important;

    }

}

/* =========================================================
   CUSTOM DOTS
   ========================================================= */

.elementor-289 .elementor-element.elementor-element-33b5c77 .eci-dots {

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;

    bottom: 15px !important;

    width: 100% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px !important;

    z-index: 999 !important;

}


/* DOT TIDAK AKTIF */

.elementor-289 .elementor-element.elementor-element-33b5c77 .eci-dot {

    width: 9px !important;

    height: 9px !important;

    padding: 0 !important;

    margin: 0 !important;

    border: 0 !important;

    border-radius: 50% !important;

    background: #b8b8b8 !important;

    opacity: .75 !important;

    cursor: pointer !important;

    transition:
        width .3s ease,
        background .3s ease,
        opacity .3s ease !important;

}


/* DOT AKTIF */

.elementor-289 .elementor-element.elementor-element-33b5c77 .eci-dot.active {

    width: 27px !important;

    height: 9px !important;

    border-radius: 20px !important;

    background: #f58220 !important;

    opacity: 1 !important;

}


/* HOVER */

.elementor-289 .elementor-element.elementor-element-33b5c77 .eci-dot:hover {

    opacity: 1 !important;

}


/* MOBILE */

@media (max-width: 767px) {

    .elementor-289 .elementor-element.elementor-element-33b5c77 .eci-dots {

        bottom: 12px !important;

        gap: 5px !important;

    }


    .elementor-289 .elementor-element.elementor-element-33b5c77 .eci-dot {

        width: 7px !important;

        height: 7px !important;

    }


    .elementor-289 .elementor-element.elementor-element-33b5c77 .eci-dot.active {

        width: 22px !important;

        height: 7px !important;

    }

}/* End custom CSS */