/* Single Gallery CSS */
/* =========================================
   MAIN PRODUCT SLIDER
========================================= */

.delfee-main-slider {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.delfee-main-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    /* height: 520px; */
    overflow: hidden;
    background: #f8f8f6;
}

.delfee-main-slider .delfee-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


/* =========================================
   VIDEO
========================================= */

.delfee-video-slide {
    background: #f5f5f3;
}

.delfee-product-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


/* =========================================
   THUMBNAILS
========================================= */

.delfee-thumb-slider {
    margin-top: 15px;
    width: 100%;
}

.delfee-thumb-slider .swiper-slide {
    height: 90px;
    cursor: pointer;
    overflow: hidden;
}

.delfee-thumb-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================
   VIDEO THUMBNAIL
========================================= */

.delfee-video-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #eee;
}

.delfee-video-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.delfee-video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background:var(--dark-purple);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    pointer-events: none;
}


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

.delfee-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 7px;

    margin: 12px 0;
}

.delfee-slider-dots .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0 !important;
    opacity: 1;
}

.delfee-slider-dots .swiper-pagination-bullet-active {
    transform: scale(1.25);
}


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

.delfee-slider-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    border: 0;

    cursor: pointer;

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

.delfee-slider-arrow.prev {
    left: 15px;
}

.delfee-slider-arrow.next {
    right: 15px;
}


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

@media (max-width: 768px) {

    .delfee-main-slider .swiper-slide {
        height: 400px;
    }

    .delfee-thumb-slider .swiper-slide {
        height: 70px;
    }

}
/* END CSS HERE */