/* Container for the carousels */
.carousel-container {
    width: 520px;
    height: 380px;
    margin: 0 auto; /* Center horizontally */
    display: flex; /* Use flexbox to split content */
    gap: 20px; /* Space between the sub-windows */
    position: relative; /* For positioning child elements */
    align-items: center;
    justify-content: center;
}

/* Basic styling for each carousel */
.carousel {
    position: relative; /* Allows z-index manipulation */
    /*width: 600px;*/
    /*height: 400px;*/
    overflow: hidden;
    transition: transform 0.3s ease, z-index 0.3s ease;
    cursor: pointer;
    z-index: 0; /* Default z-index */
}

/*!* Enlarge carousel on hover *!*/
/*.carousel:hover {*/
/*    transform: scale(2.1);*/
/*    z-index: 10000; !* Bring the hovered carousel to the front *!*/
/*}*/

.carousel-center {
    position: relative; /* Allows z-index manipulation */
    width: 600px;
    height: 400px;
    overflow: hidden;
    transition: transform 0.3s ease, z-index 0.3s ease;
    cursor: pointer;
    z-index: 0; /* Default z-index */
}

/* Left sub-window hover effect */
.carousel-left:hover {
    transform: translate(25%, 50%) scale(2.1); /* Shift towards the center from the left */
    z-index: 10000; /* Bring to front */
}

/* Right sub-window hover effect */
.carousel-right:hover {
    transform: translate(-25%, 50%) scale(2.1); /* Shift towards the center from the right */
    z-index: 10000; /* Bring to front */
}

/* Zoom effect when the "zoomed" class is added */
.carousel.zoomed {
    transform: scale(2.1); /* Zoom in */
    z-index: 10000; /* Bring to front */
}

/* Initial state of the video container */
#enlarge-window {
    transition: transform 0.5s ease-in-out;
    transform-origin: center center;
}

/* Keyframes for zoom-in effect */
@keyframes zoomIn {
    from {
        transform: translate(0%, 0%) scale(1);
    }
    to {
        transform: translate(0%, 0%) scale(1.4); /* Adjust scale as needed */
    }
}

/* Keyframes for zoom-out effect */
@keyframes zoomOut {
    from {
        transform: translate(0%, 0%) scale(1.4);
    }
    to {
        transform: translate(0%, 0%) scale(1);
    }
}

/* Zoomed-in state */
#enlarge-window.zoomed {
    position: fixed;
    /*top: 50%;*/
    /*left: 50%;*/
    width: 80%;
    height: auto;
    z-index: 10000;
    animation: zoomIn 0.5s forwards; /* Trigger zoom-in animation */
}

/* Unzoom (reverse) */
#enlarge-window.unzoomed {
    animation: zoomOut 0.5s forwards; /* Trigger zoom-out animation */
}


/* Slide container */
.carousel-slides {
    display: flex;
    height: 100%; /* Ensures that the slides fill the carousel height */
    transition: transform 0.5s ease;
}

/* Each individual slide */
.slide {
    flex: 1 0 100%; /* Ensures slide takes up full width */
    height: 100%; /* Matches the full height of the carousel */
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
}

.slide-c {
    flex: 1 0 100%; /* Ensures slide takes up full width */
    height: 100%; /* Matches the full height of the carousel */
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
}

.slide img, .slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-c img, .slide-c video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*.carousel, .carousel-slides, .slide {*/
/*    border: 1px solid red; !* Temporary border for debugging *!*/
/*}*/

/* Navigation buttons */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: bold;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 2;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}


/* Icon container positioned over the video */
.icon-container {
    position: absolute;
    bottom: 10px;
    right: 20px;
    width: 50px;
    z-index: 100000;
}

/* Icon styling */
.icon {
    width: 30px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.icon:hover {
    transform: scale(1.5);
    opacity: 0.8;
}


.threeD-container { width: 100%; height: 24.5vh; background-color: #f0f0f0; }
/*.btn-3D { position: absolute; top: 20px; right: 20px; padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #007BFF; color: #ffffff; border: none; border-radius: 5px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); }*/
/*.btn-3D:hover { background-color: #0056b3; }*/

/*@font-face {*/
/*    font-family: 'DejaVu Serif';*/
/*    src: url('static/fonts/DejaVuSerif.woff2') format('woff2');*/
/*         url('static/fonts/DejaVuSerif.woff') format('woff');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/


.slide-title {
    position: absolute;
    top: 30px;
    left: 0px;
    width: 100%;
    font-weight: bold;
    text-align: center;
    color: honeydew;
    font-size: x-large;
    font-family: "DejaVu Serif";
    /*font-family: 'DejaVu Serif', serif;*/
}

.social-icon {
    width: 100%; /* Set the desired width */
    height: auto; /* Maintains the aspect ratio */
    transition: filter 1s ease; /* Smooth transition for filter */
    animation: bounce 1s infinite; /* Apply the bounce animation */
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0); /* Original position */
    }
    40% {
        transform: translateY(-2px); /* Move up */
    }
    60% {
        transform: translateY(-1px); /* Slightly move down */
    }
}

/* Change to color on hover */
.q_social_icon_holder:hover .social-icon {
    filter: grayscale(0%); /* Remove grey on hover */
}

/* Styles for each deck */
.deck {
    top: 12px;
    width: calc(50% - 10px); /* Each panel takes up half the width minus half the gap */
    height: 100%; /* Full height of the container */
    border: 2px solid #888; /* Bounding box for each sub-window */
    padding: 10px; /* Add padding inside the bounding box */
    overflow: hidden; /* Ensure slides fit within each panel */
    position: relative;
    transition: transform 0.3s ease, z-index 0s; /* Smooth transition for scaling and moving */
    /*box-sizing: border-box; !* Include padding and border in element's total width/height *!*/
}

/* Scaling effect on hover */
.deck1:hover {
    transform: scale(1.8) translateX(22%) translateY(22%); /* Shift right for the left deck */
    z-index: 100000; /* Bring to front */
}

.deck2:hover {
    transform: scale(1.8) translateX(-22%) translateY(22%); /* Shift left for the right deck */
    z-index: 100000; /* Bring to front */
}

/* Ensure Reveal.js presentations fill their containers */
.reveal {
    width: 100%;
    height: 100%;
}

.slide-title {
    /*position: fixed;*/
    /*top: 0px;*/
    /*left: 0px;*/
    width: 100%;
    font-weight: bold;
    text-align: center;
    color: honeydew;
    font-size: x-large;
    font-family: "DejaVu Serif";
    /*font-family: 'DejaVu Serif', serif;*/
}

.abstract {
    /*position: fixed;*/
    /*top: 0px;*/
    /*left: 0px;*/
    width: 100%;
    text-align: left;
    color: gray;
    font-family: "DejaVu Serif";
    font-size: larger;
    /*font-family: 'DejaVu Serif', serif;*/
}