/* =========================================================
   ARES PANEL — SPLIDE

   Parent:
   .ares-panel-inner

   Slides:
   .ares-panel-item
   ========================================================= */


/* =========================================================
   SPLIDE ROOT
   ========================================================= */

.ares-panel-inner.ares-panel-splide {
    position: relative;
    display: block;
    width: 100%;
}


/* =========================================================
   TRACK
   ========================================================= */

.ares-panel-splide .splide__track {
    width: 100%;
    overflow: hidden;
}


/* =========================================================
   LIST
   ========================================================= */

.ares-panel-splide .splide__list {
    display: flex !important;
    align-items: stretch;

    margin: 0 !important;
    padding: 0 !important;
}


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

.ares-panel-splide .ares-panel-item.splide__slide {
    position: relative;

    flex: 0 0 auto;

    min-width: 0;

    display: block;

    overflow: hidden;

    /*
     * Original images are 800 × 1500.
     *
     * Keeps the cards proportional while
     * the width changes responsively.
     */
    aspect-ratio: 800 / 1500;
}


/* =========================================================
   ELEMENTOR INNER CONTAINER
   ========================================================= */

.ares-panel-splide .ares-panel-item > .e-con {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 100%;
}


/* =========================================================
   CARD IMAGE
   ========================================================= */

.ares-panel-splide .ares-panel-item img {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position: center;
}


/* =========================================================
   ARROWS WRAPPER
   ========================================================= */

.ares-panel-splide .splide__arrows {
    pointer-events: none;
}


/* =========================================================
   ARROWS
   ========================================================= */

.ares-panel-splide .splide__arrow {
    position: absolute;

    top: 50%;

    z-index: 20;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(0, 0, 0, 0.08);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0 6px 20px
        rgba(0, 0, 0, 0.16);

    color: #111;

    cursor: pointer;

    pointer-events: auto;

    transform:
        translateY(-50%);

    opacity: 1;

    visibility: visible;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}


/* =========================================================
   PREVIOUS ARROW
   ========================================================= */

.ares-panel-splide .splide__arrow--prev {
    left: 16px;
}


/* =========================================================
   NEXT ARROW
   ========================================================= */

.ares-panel-splide .splide__arrow--next {
    right: 16px;
}


/* =========================================================
   ARROW SVG
   ========================================================= */

.ares-panel-splide .splide__arrow svg {
    width: 18px;
    height: 18px;

    fill: currentColor;
}


/*
 * Splide's default arrow SVG faces right.
 */
.ares-panel-splide .splide__arrow--prev svg {
    transform: scaleX(-1);
}


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

@media (hover: hover) {

    .ares-panel-splide
    .splide__arrow:not(:disabled):hover {

        background: #fff;

        transform:
            translateY(-50%)
            scale(1.05);
    }

}


/* =========================================================
   HIDE DISABLED ARROWS

   Beginning:
   previous arrow hidden

   Middle:
   both arrows visible

   End:
   next arrow hidden
   ========================================================= */

.ares-panel-splide .splide__arrow:disabled {
    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;
}


/* =========================================================
   DESKTOP
   > 992px

   No arrows.
   ========================================================= */

@media (min-width: 993px) {

    .ares-panel-splide .splide__arrows {
        display: none !important;
    }

}


/* =========================================================
   <= 992px

   Remove Elementor outer padding so the
   carousel can use the entire available width.
   ========================================================= */

@media (max-width: 992px) {

    .ares-panel-items-layer {
        padding: 0 !important;
    }

    .ares-panel-inner {
        padding: 0 !important;
    }

}


/* =========================================================
   <= 768px

   Slightly smaller navigation arrows.
   ========================================================= */

@media (max-width: 768px) {

    .ares-panel-splide .splide__arrow {
        width: 44px;
        height: 44px;
    }

    .ares-panel-splide .splide__arrow--prev {
        left: 10px;
    }

    .ares-panel-splide .splide__arrow--next {
        right: 10px;
    }

}

@media ( max-width: 767px) {
    .ares-panel-inner .splide__track {
        height: 65%!important;
    }
}


/* 599px MOBILE */

@media (max-width: 599px) {

    .ares-panel-splide .splide__arrow {
        width: 40px;
        height: 40px;
    }

    .ares-panel-splide .splide__arrow svg {
        width: 15px;
        height: 15px;
    }

    .ares-panel-splide .splide__arrow--prev {
        left: 8px;
    }

    .ares-panel-splide .splide__arrow--next {
        right: 8px;
    }

}