/**
 * Public side of the plugin.
 *
 * @package    jgfs_flexible_slider
 * @subpackage jgfs_flexible_slider/public
 * @author     Jumping Giraffe Ltd
 */
 body {
     font-size: 2vw;
     color: red;
 }
.🦒_jgfs_slider_container {
    width: 100%;
    overflow: hidden; /* Hides the non-active slides */
    position: relative;
    line-height: 1;
}

.jg_jgfs_slider {
    display: flex; /* Aligns slides in a row */
    transition: transform 0.5s ease-in-out;
    user-select: none; /* Prevent text selection during drag */
    cursor: grab; /* Cursor style indicating draggable */	
}

.jg_jgfs_slider:active, .jg_jsfs_slider.grabbing {cursor: grabbing;}
.jg_jgfs_slide {min-width: 100%; position: relative;}
.jg_jgfs_slide p {margin: 5px 0;}
.container .jg_jgfs_large_image {
    width: 100%;
    height: 400px; /* Initial height, will be adjusted by JS */
    object-fit: cover;
}

.jg_jgfs_slide_overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        pointer-events: none;
}

.jg_jgfs_small_image {
    position: absolute;
 /*   width: 100px;
    height: 100px;*/
}

.jg_jgfs_small_image_container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Ensure it doesn't extend beyond the slide */
    overflow: hidden;
}

.🦒_jgfs_button {
    position: absolute;
    top: 42%;
    z-index: 10;
    background-color: #FFF;
    color: #000;
    border: 1px solid #000;
    padding: 5px 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.🦒_jgfs_button#jg_jgfs_prev {left: 10px;}
.🦒_jgfs_button#jg_jgfs_next {right: 10px;}
.🦒_jgfs_slider_container:hover .🦒_jgfs_button {opacity: 1;}
.🦒_jgfs_slide_title p {margin: 0; z-index: 1;  position: relative;}
.jg_jgfs_slider_indicators {
    text-align: center;
    position: absolute;
    bottom: 10px; /* Adjust as needed */
    width: 100%;
    z-index: 10;
}

.jg_jgfs_slider_indicator {
    display: inline-block;
    width: 10px; /* Adjust size as needed */
    height: 10px; /* Adjust size as needed */
    border-radius: 50%;
    background-color: gray;
    margin: 0 5px; /* Adjust spacing as needed */
    cursor: pointer;
}

.jg_jgfs_slider_indicator.active {background-color: red;}

@media (max-width: 640px) {
    .jg_jgfs_slide span {
        display: block;
        transform: scale(0.7);
    }
}