/******************************************************************************
 ******************************************************************************
 ******************************************************************************
 ****
 ****   All style selectors/attributes will be placed here!
 ****
 ****
 ****   Developed by RMDM © 2025 - ?
 ****
 ******************************************************************************
 ******************************************************************************
 *****************************************************************************/


* {
    font-family: 'Lato', sans-serif;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html, body {
    height: 100vh; /* Make sure both the html and body take 100% of the viewport height */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    background-color: #000;
    overflow-y: auto;
}

/*header {
    pointer-events: none !important;
}*/

.container-fluid > a > img.logo-main,
.logo-main {
    width: 180px;
    left: 0 !important;
    position: relative !important;
}

footer {
    font-size: 0.9rem;
    line-height: 16px !important;
    margin-bottom: 10px;
}

.logo {
    width: 8em;
}

.navbar-brand .subtitle {
    font-size: .75em;
    color: #fff;
    margin-left: auto;
}

.p-r {
    position: relative;
}

.p-r-i {
    position: relative !important;
}

.proximas-sessoes-carousel {
    height: 100%; /* Fullscreen height */
    overflow: hidden;
}

    .proximas-sessoes-carousel .overlay {
        text-align: left;
    }

#section1 {
    padding: 0 !important;
}

/* Each slide should take up the entire viewport */
.slide {
    height: 100vh; /* Fullscreen height */
    width: 100vw; /* Fullscreen height */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

    .slide .video {
        /*position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        object-fit: cover;*/ /* Ensures video maintains aspect ratio and covers entire slide */

        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw; /* Full width of the viewport */
        height: 56.25vw; /* 16:9 aspect ratio (56.25 = 9/16 * 100) */
        transform: translate(-50%, -50%); /* Center the video */
    }

/* Scale the inner YouTube video to cover the whole iframe */
iframe .html5-main-video {
    width: 100% !important; /* Force the video width to fill the iframe */
    height: 100% !important; /* Force the video height to fill the iframe */
}

.slick-dots li.slick-active button:before {
    color: #fff !important;
}

.overlay-intro {
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    z-index: 2;
    padding: 0.5rem;
}

.overlay-intro #skip-sect {
    position: absolute;
    right: 5rem;
}

.square-border-btn {
    border: 2px solid #fff;
    padding: 1rem 1.5rem;
    color: #fff;
    transition-duration: 0.2s;
}

.btn.square-border-btn:hover {
    color: #fff;
    background-color: rgba(255,255,255,0.2);
    transition-duration: 0.2s;
}


/* Overlay for content on top of the slide */
.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    text-align: center;
    z-index: 2;
    /*background: rgba(0, 0, 0, 0.5);*/ /* Optional background for contrast */
    padding: 20px;
}

    .overlay span, h1 {
        line-height: 25px;
    }

    .overlay h1 {
        margin: 0;
        font-size: 2em;
    }

    .overlay .header {
        margin: 0;
        font-size: .9em;
        font-weight: 300;
        font-style: italic;
    }

    .overlay .title {
        margin: 0;
        font-size: 2em;
        font-weight: 1000;
        text-shadow: -2px 2px 10px rgba(255,255,255,0.55);
    }

    .overlay .day {
        margin: 0;
        font-size: 1.1em;
        font-weight: 300;
        font-style: italic;
    }

    .overlay .season {
        margin: 0;
        font-size: 1em;
        font-weight: 300;
        font-style: italic;
        /*color: #C0BFBF;*/
    }

    .overlay .year {
        margin: 0;
        font-size: .65em !important;
    }

    .overlay p {
        font-size: 1.5em;
    }

.overlay-fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: #fff;
    text-align: center;
    z-index: 2;
    /*background: rgba(0, 0, 0, 0.5);*/ /* Optional background for contrast */
    padding: 20px;
}

    .overlay-fullscreen.closed {
        /*background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjni8sqzZEh9ERE8xmB-4SKDrfWRxebBAzVJZX_V1-vJq_JWWxGVRfXkk-FJPtc6Lb9J99N9kJIG0-2wEAHIGb-uRtS0fPN8G8dV5hsAGnES9KhZrejCSDIF2bhzWKV8XSdX_BsvCNqw9E/w467-h640/12.jpg) no-repeat center;*/
        background: url(https://thumbs.dreamstime.com/b/be-right-back-sign-store-window-red-blue-shop-saying-269564912.jpg) no-repeat center;
        background-size: 100%;
        background-position: 0 90%;
    }

.dotted-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows interaction with the video through the overlay */
    background: radial-gradient(circle, transparent 1px, rgba(255,255,255,0.3) 1px);
    background-size: 5px 5px;
    opacity: 0.4; /* Adjust opacity to make it more subtle */
    z-index: 1;
}

/* Custom styling for Slick's arrows to prevent overflow */
.slick-prev, .slick-next {
    z-index: 1; /* Ensure they stay on top */
}

.slick-list,
.slick-slider .slick-track {
    height: 100% !important;
}

.slick-prev {
    left: 25px !important; /* Adjust positioning to prevent horizontal scroll */
}

.slick-next {
    right: 25px !important; /* Adjust positioning to prevent horizontal scroll */
}

/* Custom styling for Slick dots */
.slick-dots {
    bottom: 20px;
}

/* Prevent horizontal scrolling caused by slick */
.slick-list {
    overflow: hidden;
}

.slick-prev:before {
    content: '\f104' !important;
}

.slick-next:before {
    content: '\f105' !important;
}

.slick-prev:before, .slick-next:before {
    font-family: 'fontawesome' !important;
    font-size: 35px !important;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slide .slide-gradient-bg {
    position: absolute;
    height: 100vh;
    top: 0;
    left: 0;
    width: 60%;
    background: linear-gradient(90deg, #141212 40%, transparent 100%);
    z-index: 1;
}

.video-gradient-bg {
    position: absolute;
    height: 100vh;
    top: 0;
    left: 0;
    width: 100%;
    /*background: radial-gradient(ellipse 50% 45% at center, transparent, #141212);*/
    background: radial-gradient( ellipse 55% 50% at center, rgba(0,0,0, 0) 0%, /* Start fully transparent */
    rgba(0,0,0, 0.2) 30%, /* Gradually increase opacity */
    rgba(0,0,0, 0.7) 55%, /* Darker, almost opaque at 70% */
    #000 100% /* Fully opaque at the edges */
    );
    z-index: 1;
}

.default-btn {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 200px;
    padding: 8px 25px;
    font-weight: 300;
    font-size: .9em;
    transition-duration: 0.2s;
}

.default-btn-sm {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 200px;
    padding: 10px 20px;
    font-weight: 300;
    font-size: 0.8em;
    transition-duration: 0.2s;
}

    .default-btn:hover,
    .default-btn-sm:hover {
        background-color: #fff;
        color: #424242;
        font-weight: 500;
        transition-duration: 0.2s;
    }

.simple-btn {
    background-color: transparent;
    color: #fff;
    font-weight: 300;
    font-size: .9em;
    outline: none !important;
    border: none !important;
    cursor: pointer;
    transition-duration: 0.2s;
}

    .simple-btn:hover {
        border: 1px solid #fff !important;
        /*font-weight: 500;*/
        transition-duration: 0.2s;
    }

a.simple-btn:hover {
    padding: 5px;
    color: #000 !important;
    transition-duration: 0.2s;
    background-color: #fff;
    border-radius: 4px;
    /*margin-top: 5px;*/
    /*color: #fff !important;
        transition-duration: 0.2s;*/
}

.filled-btn {
    background-color: #fff;
    color: #424242;
    border: 2px solid #fff;
    border-radius: 200px;
    padding: 8px 25px;
    font-weight: 600;
    font-size: .9em;
    transition-duration: 0.2s;
}

.filled-btn-sm {
    background-color: transparent;
    color: #424242;
    border: 2px solid #fff;
    border-radius: 200px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: .8em;
    transition-duration: 0.2s;
}

    .filled-btn:hover,
    .filled-btn-sm:hover {
        background-color: #C0BFBF;
        color: #424242;
        font-weight: bold;
        transition-duration: 0.2s;
    }

.darkened-bordered-btn {
    cursor: pointer;
    border: 2px solid #141212;
    background-color: #fff;
    color: #141212;
    border-radius: 200px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: .8em;
    box-shadow: -2px 2px 6px rgba(0,0,0,0.2);
    transition-duration: 0.2s;
}

    .darkened-bordered-btn-sm:hover,
    .darkened-bordered-btn:hover {
        background-color: #C0BFBF;
        color: #424242;
        font-weight: bold;
        transition-duration: 0.2s;
    }

.darkened-bordered-btn-sm {
    cursor: pointer;
    border: 2px solid #141212;
    background-color: #fff;
    color: #141212;
    border-radius: 200px;
    padding: 5px 10px;
    font-weight: 600;
    font-size: .7em;
    box-shadow: -2px 2px 6px rgba(0,0,0,0.2);
    transition-duration: 0.2s;
}

.site-section {
    height: 100vh;
}

nav#main-nav {
    background-color: transparent !important;
    color: #fff !important;
    border: none !important;
    position: sticky;
    top: 0;
    z-index: 2;
    padding-top: 10px;
    height: 60px;
    transform-origin: top;
    /*background: linear-gradient(180deg, #000 50%, transparent 100%);*/
    padding: 10px 0;
    box-shadow: none !important;
}

    nav#main-nav button,
    nav#main-nav a {
        color: #fff !important;
    }

.section-title-sticky {
    position: -webkit-sticky; /* Support for older Safari */
    position: sticky;
    top: 0; /* Stick to the top of the viewport */
    z-index: 10; /* Ensure it's above other content */
    padding-top: 10px;
    height: 75px;
    pointer-events: none !important;
    /*opacity: 0 !important;*/
    /*transition: opacity 0.3s ease, transform 0.3s ease;*/
    /*transition: opacity 0.2s ease-in-out;*/
    /*background: linear-gradient(180deg, #141212 65%, transparent 110%);*/ /* Prevent transparency issues */
    /*padding: 10px 0;*/
}

#sticky6 {
    opacity: 1 !important;
    transform: translateX(0px) !important;
}

.section-header-title {
    color: #fff;
    font-weight: 400;
    /*line-height: 20px;*/
    z-index: 2;
    position: relative;
    font-size: 1.5rem !important;
    line-height: 28px;
    text-shadow: 0px 0px 16px rgba(255, 255, 255, .85);
}

.dashed-bg {
    display: none;
    position: absolute;
    z-index: 0;
    left: -5%;
    top: 25%;
    opacity: 0.35;
}

.reg-txt {
    color: #fff;
    font-size: 1em;
}

.sm-txt {
    color: #fff;
    font-size: .85em;
}

.xs-txt {
    color: #fff;
    font-size: .7em;
}

.md-txt {
    color: #fff;
    font-size: 1.3em;
}

.reg-txt-i {
    color: #fff;
    font-style: italic;
}

.link {
    color: #C0BFBF;
    font-style: italic;
    border-color: #C0BFBF !important;
}

.flex-flow-column {
    flex-flow: column;
}

.flex-flow-row {
    flex-flow: row;
}

#prox-sessoes-grid div.w-100 {
    margin: 0;
    line-height: 15px;
}

#prox-sessoes-grid .block {
    padding: 10px 20px;
}

.block-all {
    border: 2px dashed #424242;
}

.block-left {
    border-left: 2px dashed #424242;
}

.block-right {
    border-right: 2px dashed #424242;
}

.block-top {
    border-top: 2px dashed #424242;
}

.block-bottom {
    border-bottom: 2px dashed #424242;
}

#prox-sessoes-grid {
    display: grid;
    /*grid-template-columns: 17rem 27rem 9rem;*/
    /*grid-template-columns: auto 1fr 0.4fr;*/ /* 3 columns: 1st (poster), 2nd (details), 3rd (date/summary) */
    grid-template-columns: 17rem 26rem 10rem;
    grid-template-rows: auto 1fr; /* 2 rows: auto adjust for content height */
    /*gap: 1rem;*/ /* Space between grid items */
    align-items: start; /* Align items to the start of their cells */
}

.additionalInfo {
    width: auto;
    margin: 8px 0 !important;
    color: #142121 !important;
}

    .additionalInfo .details {
        background-color: #fff;
        width: auto !important;
        color: #142121 !important;
        padding: 5px;
    }

    .additionalInfo.dark {
        color: #fff !important;
    }

        .additionalInfo.dark .details {
            background-color: #141212;
            width: auto !important;
            color: #fff !important;
            padding: 4px;
        }

#prox-sessoes-grid .header {
    margin: 0;
    font-size: .9em;
    font-weight: 300;
    font-style: italic;
}

#prox-sessoes-grid .title {
    margin: 0;
    font-size: 1.5em;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
}

#prox-sessoes-grid .day {
    margin: 0;
    font-size: 1.1em;
    font-weight: 300;
    font-style: italic;
}

#prox-sessoes-grid #date {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    #prox-sessoes-grid #date .day {
        color: #C0BFBF;
    }

    #prox-sessoes-grid #date .actualday {
        font-size: .9em;
        font-weight: bold;
    }

    #prox-sessoes-grid #date .time {
        font-size: .8em;
        font-weight: 400;
    }

    #prox-sessoes-grid #date .icon {
        font-size: 2em;
        color: #C0BFBF;
    }

#prox-sessoes-grid .details {
    margin: 0;
    font-size: .9em;
    font-weight: 300;
    color: #fff;
}

#prox-sessoes-grid #title_details {
    height: 100%;
}

#prox-sessoes-grid #summary {
    grid-column: 2 / 4;
    height: 100%;
}

#prox-sessoes-grid #poster {
    grid-row: 1 / 3;
    height: 100%;
    width: 100%;
}


#prox-sessoes-grid #summary p {
    margin: 0;
    font-size: .9em;
    font-weight: 300;
    color: #fff;
    text-align: justify;
}

#prox-sessoes-grid .info {
    margin: 0;
    font-size: .8em;
    font-weight: 300;
    color: #C0BFBF;
}

#prox-sessoes-grid .year {
    margin: 0;
    font-size: .65em !important;
}

#prox-sessoes-nav {
    display: flex; /* Arrange items horizontally */
    max-width: 100vw; /* Constrain to viewport width */
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Prevent vertical scrolling */
    white-space: nowrap; /* Avoid line breaks for inline items */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    list-style: none; /* Remove bullets */
}

    #prox-sessoes-nav .nav-item {
        flex: 0 0 auto; /* Prevent shrinking */
        margin-bottom: 5px;
        /*margin-right: 10px;*/ /* Optional spacing between items */
    }

    #prox-sessoes-nav li a {
        background-color: transparent;
        color: #fff;
        border: 2px solid #fff;
        border-radius: 200px;
        margin-right: 7px;
        font-size: .9em;
        padding: 5px 20px;
        transition-duration: 0.2s;
    }

        #prox-sessoes-nav li a:hover {
            background-color: #fff;
            color: #424242;
            font-weight: 500;
            transition-duration: 0.2s;
        }

        #prox-sessoes-nav li a.active {
            background-color: #fff;
            color: #141212;
            font-weight: bold;
            border: 2px solid #fff;
            border-radius: 200px;
            transition-duration: 0.2s;
        }

.section-subtitle {
    margin: 20px 0 40px 0;
}

    .section-subtitle span {
        color: #C0BFBF;
        margin: 0;
        font-size: 1.1em;
    }

    .section-subtitle hr {
        margin: 1px 0;
        color: #C0BFBF;
    }

#prox-sessoes-div .btns {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    gap: 15px;
}

.nav-tabs {
    border-bottom: none !important;
}

.disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

#section2,
#section3,
#section4 {
    /*#section5,*/
    /*#section6 {*/
    position: relative;
    height: 100vh; /* Ensure the section takes up the entire viewport height */
    /*overflow: hidden;*/ /* Hide any overflow */
    padding: 0 8em;
    z-index: 1;
}

#section5 {
    padding: 0 1.5em !important;
}

#section6 {
    padding: 0 8em;
}

#section3-container {
    min-height: 35vh;
    position: relative;
}


/*#section4 {
        background: url('https://a.ltrbxd.com/resized/backdrop/1/5/5/2/7/9/2/5/shard/blob-1200-1200-675-675-crop-000000.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }*/
#section4::before {
    content: ''; /* Create the pseudo-element */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://a.ltrbxd.com/resized/backdrop/1/5/5/2/7/9/2/5/shard/blob-1200-1200-675-675-crop-000000.jpg') no-repeat center center;
    background-size: cover;
    opacity: 0.2; /* Adjust opacity here */
    z-index: 0; /* Ensure the background is behind the content */
}

#section2 .video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none; /* Disable interaction with the video */
    overflow: hidden;
    opacity: 0.08;
}

#section2 iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw; /* Full width of the viewport */
    height: 56.25vw; /* 16:9 aspect ratio (56.25 = 9/16 * 100) */
    transform: translate(-50%, -50%); /* Center the video */
}

    #section2 iframe .html5-main-video {
        width: 100% !important; /* Force the video width to fill the iframe */
        height: 100% !important; /* Force the video height to fill the iframe */
    }

#section4 .accordion-body {
    background-color: rgba(255, 255, 255, 0.1);
}

.movie-showing-grid {
    display: flex;
    flex-flow: column;
    align-items: center;
}

    .movie-showing-grid .header {
        margin: 0;
        font-size: .9em;
        font-weight: 300;
        font-style: italic;
    }

    .movie-showing-grid #poster {
        width: 165px;
        height: 244px;
    }

    .movie-showing-grid .title {
        margin: 0;
        font-size: 1.5em;
        font-weight: 600;
        color: #fff;
    }

    .movie-showing-grid .day {
        margin: 0;
        font-size: 1.1em;
        font-weight: 300;
        font-style: italic;
    }

    .movie-showing-grid #date {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .movie-showing-grid #date .day {
            color: #C0BFBF;
        }

        .movie-showing-grid #date .actualday {
            font-size: .9em;
            font-weight: bold;
        }

        .movie-showing-grid #date .time {
            font-size: .8em;
            font-weight: 400;
        }

        .movie-showing-grid #date .icon {
            font-size: 2em;
            color: #C0BFBF;
        }

    .movie-showing-grid.slick-slide.slick-active {
        display: flex !important;
    }

/*.sessoes-anteriores-carousel .slick-list {
    display: flex !important;
    justify-content: space-evenly !important;
}
*/

.sessoes-anteriores-carousel .movie-showing-grid {
    position: relative;
}

    .sessoes-anteriores-carousel .movie-showing-grid .cancelled-event-msg {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
        font-weight: bold;
    }

.sessoes-anteriores-carousel .slick-prev {
    left: 0 !important; /* Adjust positioning to prevent horizontal scroll */
}

.sessoes-anteriores-carousel .slick-next {
    right: 0 !important; /* Adjust positioning to prevent horizontal scroll */
}

.slider-header-row {
    justify-content: space-between;
    align-items: flex-end;
}

/*.imagens-pne-modal-carousel img {
    height: inherit !important;
    width: auto !important;
    margin: auto;
}*/

#modal-sobre-carousel .modal-body {
    padding: 0;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black; /* Ensures a black background behind images */
}

#modal-sobre-carousel .imagens-pne-modal-carousel img {
    width: 100%;
    height: 100vh; /* Full viewport height */
    object-fit: contain; /* Keeps the entire image visible without distortion */
}

#modal-sobre-carousel .modal-footer {
    position: absolute;
    z-index: 5;
    left: 0;
    bottom: 0;
}

#modal-sobre-carousel .modal-header {
    position: absolute;
    z-index: 5;
    right: 0;
    top: 0;
}

#prox-sessoes-grid #poster img {
    width: 230px;
}

.sm-txt {
    margin: 0;
    font-size: .9em;
    font-weight: 300;
    color: #fff;
    text-align: justify;
}

#faq-accordion .accordion-item {
    background-color: transparent !important;
    color: #fff !important;
}

#faq-accordion .accordion-button {
    background-color: transparent !important;
    border: none;
    color: #fff !important;
    font-weight: 600;
    border-bottom: 1px dashed rgba(255,255,255,0.3);
    outline: none !important;
    box-shadow: none !important;
}

    #faq-accordion .accordion-button::after {
        filter: brightness(0) invert(1) !important;
    }

/*.gallery-item:nth-child(1) {
    background-image: url('/images/sobre_item1.jpg');
}

.gallery-item:nth-child(2) {
    background-image: url('/images/sobre_item2.jpg');
}

.gallery-item:nth-child(3) {
    background-image: url('/images/sobre_item3.jpg');
}

.gallery-item:nth-child(4) {
    background-image: url('/images/sobre_item4.jpg');
}*/

.gallery-item {
    background-size: cover;
    background-position: center;
    height: 250px; /* Example height, adjust as needed */
    margin-right: 6px;
    border: 2px solid rgb(32 32 32);
    cursor: pointer !important;
    transition-duration: 0.2s;
}

    .gallery-item:hover {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }

#socials-div {
    display: flex;
    flex-flow: row;
    justify-content: center;
    margin: 25px 0;
}

.socials-item {
    /*display: flex;
    flex-flow: row;*/
    width: auto;
    text-align: center;
    text-decoration: none;
    margin: 0 8px;
    color: #fff !important;
}

    .socials-item img {
        width: 28px;
        height: 28px;
    }

#address-div {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-bottom: 15px;
}

#contact-logo {
    display: flex;
    align-items: center;
    margin: 15px 0;
    color: #fff;
}

    #contact-logo small {
        color: #fff;
        padding-left: 4.7em;
    }

.patrocinios-carousel {
    /*background: url('/images/bg_patrocinios_ai.png') no-repeat center center;*/
    background-size: cover;
    background-position: 0 0;
    height: 250px;
}

    .patrocinios-carousel .slide {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

.patrocinio {
    height: 120px !important;
    width: auto !important;
}

.ticket-modal p {
    text-align: justify !important;
    font-family: Figtree, Arial, sans-serif !important;
    font-size: .95rem !important;
}

.ticket-modal .modal-dialog {
    min-width: 43rem;
}

.ticket-modal .modal-content,
.modal-content {
    /*background: linear-gradient(90deg, #242424 29%, #424242 100%);*/
    background-color: #242424;
}

.ticket-modal .modal-header,
.ticket-modal .modal-footer,
.modal-header,
.modal-footer {
    border-color: transparent !important;
    display: flex;
    justify-content: space-between;
}

.modal-close-btn {
    background-color: transparent !important;
    outline: none !important;
    border: none !important;
}

.black-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.8) !important;
    z-index: 0;
    transition-duration: 0.2s;
}

    .black-overlay.blurred {
        filter: blur(1px) !important;
    }

    .black-overlay.darker {
        background-color: rgba(0,0,0,.9) !important;
    }

.blur-1p {
    filter: blur(1px);
}

.formatted-pre {
    font-family: 'Figtree', arial, sans-serif;
    font-size: .85rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: left;
    overflow-x: hidden;
}

#ticket-main-div {
    display: flex;
    flex-flow: column;
}

    #ticket-main-div #banner {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        background-color: #000;
        height: 120px;
        position: relative;
        background: url('https://m.media-amazon.com/images/M/MV5BNGFmYzA5NzktOTc1Ni00YTIxLWJiZTEtNmEyZjBjNDM2MjRlXkEyXkFqcGc@.jpg') no-repeat center 0px;
        background-size: cover;
    }

        #ticket-main-div #banner #sessao-escolhida {
            position: absolute;
            top: 5px;
            left: 10px;
            font-size: 0.85em;
            color: rgba(255,255,255,0.55);
            z-index: 1;
        }

    #ticket-main-div .title {
        margin: 0;
        font-size: 1.2em;
        font-weight: 600;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        z-index: 1;
    }

    #ticket-main-div #date {
        height: auto;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2em;
        z-index: 1;
    }

        #ticket-main-div #date .day {
            color: #C0BFBF;
        }

        #ticket-main-div #date .actualday {
            font-size: .9em;
            font-weight: bold;
        }

        #ticket-main-div #date .time {
            font-size: .8em;
            font-weight: 400;
        }

        #ticket-main-div #date .icon {
            font-size: 2em;
            color: #C0BFBF;
        }

form label {
    color: #fff;
    font-size: 0.9em;
}

#tickets {
    color: #fff;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

    #tickets #ticket-input-container {
        display: flex;
        flex-flow: row;
        position: relative;
        height: 80px;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }

    #tickets input {
        -webkit-appearance: inner-spin-button !important;
        -moz-appearance: textfield;
        appearance: auto;
        max-width: 65px;
        font-weight: bold;
        /*padding-left: 20px*/
    }

    #tickets #input,
    #tickets #total {
        position: relative;
        z-index: 1;
        width: auto;
    }

    #tickets #input {
        margin-right: 5px;
    }

    /* #tickets #input::before {
            content: '\f145';
            font-family: 'fontawesome' !important;
            font-size: 1em !important;
            transform: rotate(-90deg);
            color: #000;
            position: absolute;
            top: 7px;
            left: 3px;
        }*/

    #tickets #total #total-txt {
        font-size: 1em;
        font-weight: 400;
        margin: 0;
        text-align: right;
        z-index: 1;
    }

    #tickets #total #total-val {
        font-size: 1.8em;
        font-weight: bolder;
        margin: 0;
        text-align: right;
        z-index: 1;
    }

    #tickets #icon {
        color: #545454;
        position: absolute;
        font-size: 7em;
        top: -40px;
        opacity: 0.35;
        z-index: 0;
    }

    #tickets #ticket-max-info {
        font-size: 0.85em;
    }

.input-shadow-left {
    box-shadow: -2px 2px 6px rgba(0,0,0,0.95);
}

.green-hr {
    height: 4px !important;
    color: #17A531;
    opacity: 1;
}

.tabc2 #header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#tickets-bg {
    position: absolute;
    top: -25px;
    display: flex;
    justify-content: center;
}

    #tickets-bg .ticket-icon {
        font-size: 3em;
    }

    #tickets-bg #ticket1 {
        position: absolute;
        color: #0c671c;
        transform: rotate(88deg);
        left: 47%;
        z-index: 0;
    }

    #tickets-bg #ticket2 {
        position: absolute;
        color: #18812b;
        transform: rotate(100deg);
        left: 50%;
        z-index: 1;
    }

.tabc2 #intro {
    text-align: justify !important;
}

    .tabc2 #intro small,
    .tabc2 #rest small {
        font-size: 0.9em;
        text-align: justify !important;
        color: #fff;
    }

    .tabc2 #intro #ticket-total,
    .tabc2 #intro #pne-number {
        font-size: 1.2em;
    }

.yellow-bg {
    background-color: #F6F041;
}

.tabc2 #warning {
    /*display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;*/
    padding: 0.9em;
    margin: 0.3em 0;
}

    .tabc2 #warning #txt i,
    .tabc2 #warning #txt svg {
        font-size: 1.7em !important;
        color: #2E2E2E;
    }

    .tabc2 #warning #txt {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 1.1em;
        font-weight: bolder;
        color: #2E2E2E;
    }

.tabc2 #rest,
.tabc2 #outro {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.crumpled {
    position: relative;
}

    .crumpled::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100%;
        background-image: url('https://img.glyphs.co/img?src=aHR0cHM6Ly9zMy5tZWRpYWxvb3QuY29tL3Jlc291cmNlcy9EYXJrLUNydW1wbGVkLVBhcGVyLVRleHR1cmVzLVByZXZpZXctMS5qcGc&q=70&enlarge=true&h=777&w=1200');
        background-size: cover;
        background-position: center;
        z-index: 2;
        opacity: 0.2; /* You can adjust opacity */
        mix-blend-mode: screen;
    }

#main-row-temporadas {
    border-bottom: 3px solid #fff !important;
}

#main-row-temporadas,
#temporadas-nav,
#filters {
    padding: 0; /* Reset padding */
    margin: 0; /* Reset margin */
    /*width: auto;*/ /* Ensure columns take up the correct space */
}

    #filters,
    #filters .filter-buttons,
    #filters #buttons {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

        #filters #buttons,
        #filters .filter-buttons {
            margin-right: 10px;
        }

.order-btn {
    color: #767676;
    transition-duration: 0.2s;
}

    .order-btn.active {
        color: #fff !important;
    }

#temporadas-nav .nav-link span {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

#temporadas-nav .nav-link small {
    font-size: 0.95em;
    font-weight: normal;
    color: #818181;
}

#temporadas-nav .nav-link.active .temporada {
    font-weight: bold !important;
    color: #2E2E2E !important;
}

#temporadas-nav .nav-link.active .ano {
    color: #2E2E2E !important;
}

.sessoes-listagem-grid {
    display: grid;
    width: 100%;
    /*grid-template-columns: repeat(auto-fit, 160px);*/ /* Fixed width for each poster */
    grid-template-columns: repeat(auto-fill, minmax(160px, max-content));
    grid-auto-rows: auto;
    gap: 5px; /* No gap between items */
    justify-content: start; /* Align posters to the left */
}

    .sessoes-listagem-grid .movie {
        /*width: 100%;*/
        width: 160px;
        /*max-height: 240px;*/
        cursor: pointer;
        position: relative;
    }

.session-order-number {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    padding: 3px;
    background-color: #141212;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
}

button.sold-out {
    position: relative;
    opacity: 0.5;
    pointer-events: none !important;
}

.p-relative {
    position: relative;
}

.p-relative-imp {
    position: relative !important;
}

.new-session-date {
    /*background-color: rgba(0,0,0,0.65);*/
    /*border: 4px solid #d61f1f;
    color: #d61f1f;*/
    /*border: 4px solid forestgreen;*/
    background-color: #ffd44d;
    color: #141212;
    /*box-shadow: -2px 2px 8px forestgreen;*/
    font-weight: bold !important;
    /*margin-left: 7px;*/
    padding: 7px;
    position: absolute;
    top: -5px;
    left: 20px;
    white-space: nowrap;
}

    .new-session-date.p-r {
        position: relative;
        top: 0;
        left: 0;
    }

.sold-out-session {
    background-color: rgba(0,0,0,0.65);
    border: 4px solid #d61f1f;
    color: #d61f1f;
    box-shadow: -2px 2px 8px #d61f1f;
    font-weight: bold !important;
    border-radius: 8px;
    padding: 7px;
    position: absolute;
    top: -10px;
    left: 0;
    z-index: 3;
    white-space: nowrap;
    transform: rotate(-20deg);
}

    .sold-out-session h6 {
        font-weight: bold !important;
    }

#section2 .sold-out-session {
    top: 3px;
    left: -10px;
}

.low-ticket-warning {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    /*background-color: #ffd300;
    color: #141212;
    padding: 4px 8px;
    border-radius: 4px;*/
    /*background-color: rgba(0,0,0,0.65);*/
    /*border: 4px solid #ffd300;*/
    /*border-bottom: 3px solid #ffd300;*/
    color: #ffd300;
    /*box-shadow: -2px 2px 8px #ffd300;*/
    font-weight: bold !important;
    /*border-radius: 8px;*/
    z-index: 3;
    white-space: nowrap;
    font-size: 1rem;
}

    .low-ticket-warning.centered {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .low-ticket-warning.relative {
        display: flex;
        align-items: center;
        width: auto;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

/*.movie .crumpled,
.movie img {*/
/*height: 100%;
width: 100%;*/
/*height: inherit;
width: inherit;
transition-duration: 0.2s;
}*/

.movie .crumpled {
    height: 100%;
    width: 100%;
}

.movie img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire area without stretching */
    transition-duration: 0.2s;
}

.movie .crumpled:hover > img,
.movie .crumpled:hover > #poster {
    /*filter: brightness(1.5);*/
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    box-shadow: -3px 3px 8px rgba(0,0,0,.3);
}

.movie .crumpled > #poster {
    transition-duration: 0.2s;
}

/*.movie .crumpled:hover > #poster {
        width: 100%;
        transition-duration: 0.2s;
    }*/

.movie-showing-grid .crumpled {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 185px;
    height: 290px;
}

    .movie-showing-grid .crumpled::after {
        /*width: auto;*/
        /*width: calc(100vh - 33.5rem) !important;*/
        width: 185px !important;
        height: 290px !important;
        left: auto;
    }

#modal-sessao #header {
    position: relative;
    padding: 0.85em 0.75em;
    background: url('https://m.media-amazon.com/images/M/MV5BNGFmYzA5NzktOTc1Ni00YTIxLWJiZTEtNmEyZjBjNDM2MjRlXkEyXkFqcGc@.jpg') no-repeat center 0px;
    background-size: cover;
}

#modal-sessao .header {
    margin: 0;
    font-size: .9em;
    font-weight: 300;
    font-style: italic;
}

#modal-sessao #movie-details,
#modal-sessao #session-details {
    z-index: 1;
}

    #modal-sessao #movie-details .title {
        margin: 0;
        font-size: 1.3em;
        font-weight: 600;
        color: #fff;
    }

    #modal-sessao #movie-details .w-100 {
        font-size: 0.9em;
    }

    #modal-sessao #movie-details .info {
        color: #8f8f8f;
    }

    #modal-sessao #movie-details .day {
        margin: 0;
        font-size: 1em;
        font-weight: 300;
        font-style: italic;
    }

    #modal-sessao #movie-details .year {
        margin: 0;
        font-size: .65em !important;
    }

#modal-sessao #date,
#modal-sessao #season {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: flex-end !important;
    align-items: center;
}

#modal-sessao #season {
    flex-flow: column;
    align-items: flex-end;
    margin-top: 10px;
}

#modal-sessao #date {
    color: #fff;
}

    #modal-sessao #date #day {
        font-weight: bold;
    }

    #modal-sessao #date .day {
        color: #C0BFBF;
    }

    #modal-sessao #date .actualday {
        font-size: .9em;
        font-weight: bold;
    }

    #modal-sessao #date .time {
        font-size: .8em;
        font-weight: 400;
    }

    #modal-sessao #date .icon {
        font-size: 2em;
        color: #C0BFBF;
    }

#modal-sessao .details {
    margin: 0;
    font-size: .9em;
    font-weight: 300;
    color: #fff;
}

/*#modal-sessao #summary {
    grid-column: 2 / 4;
}

#modal-sessao #poster {
    grid-row: 1 / 3;*/
/*height: 100%;
    width: 100%;*/
/*}*/

img.lazyloaded[src="videos/LoadingSpinner_AGIF.gif"] {
    width: 100%; /* Adjust width as needed */
    height: 100%; /* Adjust height as needed */
    object-fit: contain; /* Ensure it fits within its container */
}

#modal-sessao .modal-dialog {
    max-width: 55%;
    margin: auto;
    padding: 6px 0;
}

#modal-sessao #info {
    /*max-height: calc(100vh - 340px);*/
    /*max-height: calc(100vh - 23rem);*/
    overflow-y: auto;
    height: auto;
}

    /*#modal-sessao #info #poster,
    #modal-sessao #info #poster .crumpled,
    #modal-sessao #info #poster img {
        max-height: calc(100vh - 340px);
    }*/

    #modal-sessao #info #poster .crumpled::after {
        width: auto;
    }

    #modal-sessao #info #poster img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    #modal-sessao #info #text {
        margin: 0;
        font-size: .9em;
        font-weight: 300;
        color: #fff;
        text-align: justify;
        max-height: calc(100vh - 22rem);
        overflow-y: auto;
    }

/*#modal-sessao .modal-body {
    max-height: calc(100vh - 13rem);
}*/

.view-session-btn {
    cursor: pointer;
}

#spinner {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0,0,0,.95);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    z-index: 10;
}

    #spinner::before {
        content: '';
        position: relative;
        top: 0;
        left: 0;
        width: 130px;
        height: 80px;
        /*background: url('/videos/LoadingSpinner_AGIF.gif') no-repeat center center;*/
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        filter: blur(0.5);
        z-index: 2;
        /*content: url('/videos/LoadingSpinner_V1.gif');  Replace with your actual GIF path 
        position: absolute;
        top: 0;
        left: 0;
        width: 70px;
        height: 70px;
        object-fit: cover;
        z-index: -1;  Behind the container's content */
    }

    #spinner small {
        font-weight: bold;
        z-index: 2;
    }

    #spinner video {
        width: 90px;
        /*height: 70px;*/
        object-fit: cover;
        z-index: 2;
        pointer-events: none; /* Prevent video from interfering with user interactions */
    }

    #spinner .background {
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        width: 100%;
        background: url('https://localporto.com/wp-content/uploads/unique-trendy-bar-porto-passos-manuel-1.jpg.png') no-repeat center center;
        background-size: cover;
        object-fit: cover;
        z-index: 1;
        pointer-events: none; /* Prevent video from interfering with user interactions */
        mix-blend-mode: soft-light;
    }

.tab-content {
    position: relative !important;
}

.error-field {
    background-color: rgba(178,34,34, 0.2);
    border: 1px solid firebrick;
    color: #fff;
    transition-duration: 0.2s;
}

.proximas-sessoes-carousel .slide {
    position: relative;
}

.cancelled-event {
    height: 200px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    z-index: 10;
    width: 100%;
    top: 36.5%;
    border-top: 2px solid firebrick;
    border-bottom: 2px solid firebrick;
    background-color: rgba(178,34,34,0.9);
    box-shadow: 0px 0px 16px rgba(178,34,34,1);
    color: #fff;
    font-size: 3em;
    font-weight: bold;
    transform-origin: center;
    padding: 10px;
    pointer-events: none;
}

    /*.cancelled-event::before {
        content: "\f071";
        font-family: 'fontawesome' !important;
        position: absolute;*/
    /*width: 100%;*/
    /*text-align: center;
        z-index: 0;
        font-size: 3.2em;
        color: #ffc10770;
        opacity: 0.5;*/
    /*top: 25%;*/
    /*}*/

    .cancelled-event h2 {
        z-index: 1;
        margin: 0;
        text-align: center;
    }

.cancelled-event-msg {
    display: flex;
    align-items: center;
    /*position: absolute;*/
    position: relative;
    /*top: calc(50% - 90px);*/
    justify-content: center;
    flex-flow: column;
    width: auto;
    max-width: 52.9rem;
    margin: auto;
    border-top: 2px solid firebrick;
    border-bottom: 2px solid firebrick;
    background-color: rgb(178 34 34 / 90%);
    box-shadow: 0px 0px 16px rgba(178, 34, 34, 1);
    color: #fff;
    padding: 10px 20px;
    z-index: 3;
    text-align: center !important;
}

    .cancelled-event-msg.absolute {
        position: absolute !important;
        top: 0 !important;
    }

    .cancelled-event-msg pre {
        text-align: center;
        font-size: 0.9rem;
        margin: 0;
    }

iframe.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video content covers the iframe */
    object-position: center;
    z-index: -1; /* Places video behind other content */
}

.bold {
    font-weight: bold !important;
}

/*.slide.cancelled::before {
    content: "\f071";
    font-family: 'fontawesome' !important;
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: 9;
    top: 32%;*/
/*left: 33.3%;*/
/*color: firebrick;*/
/*color: firebrick;
    font-size: 10em;
    font-weight: bold;*/
/*border: 2px solid firebrick;*/
/*background-color: rgba(178,34,34,0.35);
    padding: 0 190px;
}*/




.porExibir {
    background-color: yellow !important;
    padding: 4px 6px;
    color: #141212 !important;
    border-radius: 4px;
}

.finalizada {
    background-color: forestgreen !important;
    padding: 4px 6px;
    color: #fff !important;
    border-radius: 4px;
}

.cancelada {
    background-color: firebrick !important;
    padding: 4px 6px;
    color: #fff !important;
    font-weight: bold !important;
    border-radius: 4px;
}

/* Default Logo Styling */
#main-logo {
    transition: width 0.1s ease; /* Smooth resizing with small delay */
    max-width: 200px; /* Optional: cap the maximum size */
    min-width: 50px; /* Optional: cap the minimum size */
    transform-origin: top;
    transition-duration: 0.5s;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.slide {
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Ensure no content overflows the container */
}

.fullscreen-video {
    width: 100vw; /* Oversize the iframe */
    height: 110vh;
    position: absolute;
    top: -10vh;
    left: 0;
}

.reservation-cancelled-bg {
    background-color: #f8d7da;
}

.reservation-cancelled-txt {
    color: #f8d7da;
}

.reservation-undefined-bg {
    background-color: #eee;
}

.reservation-undefined-txt {
    color: #eee;
}

.reservation-pendingapproval-bg {
    background-color: #fff3cd;
}

.reservation-pendingapproval-txt {
    color: #fff3cd;
}

.reservation-reserved-bg {
    background-color: #c1e0ef;
}

.reservation-reserved-txt {
    color: #c1e0ef;
}

.reservation-paymentfinalized-bg {
    background-color: #d4edda;
}

.reservation-paymentfinalized-txt {
    color: #d4edda;
}

.reservation-reimbursed-txt {
    color: #ffdbae;
}

.reservation-reimbursed-bg {
    background-color: #ffdbae;
}

#user-btn {
    padding-right: 2rem;
}

    #user-btn::after {
        content: "\f0d7";
        font-family: "fontawesome";
        position: absolute;
        right: 0;
        color: #000;
        right: 15px;
        top: 10px;
    }

#logout-btn {
    white-space: nowrap;
}

#main-container-fluid {
    min-height: calc(100vh - 140px);
}

.c-fluid-login {
    min-height: calc(100vh - 156px) !important;
}

.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 50px;
    width: 57px;
    height: 55px;
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer !important;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    z-index: 100;
    transition: opacity 0.3s, visibility 0.3s;
}

    .scroll-to-top.show {
        opacity: 1;
        visibility: visible;
    }

.modal .select2 .select2-selection {
    height: 2.35rem !important;
}

.modal .select2 .select2-selection {
    height: 2.6rem;
}

.modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 35px;
}

.modal .select2-container--default .select2-selection--single .select2-selection__arrow,
.modal .select2-container--default .select2-selection--single .select2-selection__clear {
    height: 35px;
}

.expand-textarea {
    color: #fff;
}

    .expand-textarea.light {
        color: #fff !important;
    }

    .expand-textarea.dark {
        color: #141212 !important;
    }

#intro_sobreopassos {
    font-size: 1rem;
    height: 100% !important;
    white-space: pre-wrap !important; /* Preserve whitespace but wrap text */
    word-wrap: break-word !important; /* Break long words if necessary */
    overflow-wrap: break-word !important; /* Modern equivalent for breaking long words */
    overflow: hidden !important; /* Prevent horizontal scrolling */
    resize: vertical !important; /* Allow vertical resize but not horizontal */
}

.flex-flow-column {
    flex-flow: column;
}

#intro-text-sect-intro {
    position: absolute;
    bottom: 100px;
    left: 7vw;
    display: flex;
    flex-flow: column;
}

#intro-text-sect {
    position: absolute;
    bottom: 100px;
    left: 0;
    display: flex;
    flex-flow: column;
}

    #intro-text {
        font-style: italic;
        line-height: 45px;
    }

/* Sidebar container (starts hidden) */
.sidebar-container {
    position: fixed;
    top: 0;
    left: -500px; /* Hidden by default */
    width: 500px;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9); /* Dark transparent background */
    color: white;
    display: flex;
    transition: left 0.4s ease-in-out;
    z-index: 1050;
    font-size: .9rem;
}

/* Main menu (left) */
.main-menu {
    width: 50%;
    padding: 20px;
    padding-left: 85px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

    .main-menu a {
        font-size: .9rem;
    }

/* Sub-menu (right) */
.sub-menu {
    width: 50%;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    position: relative;
}

    /* Menu links */
    .main-menu a, .sub-menu a {
        color: white;
        text-decoration: none;
        padding: 12px;
        display: block;
    }

        .main-menu a:hover, .sub-menu a:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

    .sub-menu .sub-menu-article {
        position: relative;
        padding: 5px;
        background: #303030;
        border-radius: 4px;
        user-select: none;
        cursor: pointer;
        overflow: hidden;
    }

        .sub-menu .sub-menu-article .overlay::before {
            content: "View Model >";
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #eae7e6;
        }

        .sub-menu .sub-menu-article .overlay {
            position: absolute;
            background-color: rgb(24 24 24 / 85%);
            left: -210px;
            top: 0;
            width: 100%;
            height: 100%;
            transition: transform 0.2s ease-in-out;
        }

            .sub-menu .sub-menu-article:hover .overlay {
                transform: translateX(100%);
                transition-duration: 0.2s;
            }
        
        .sub-menu .sub-menu-article .title {
            color: #0071c1;
            text-shadow: 0px 0px 6px;
            position: absolute;
            left: 15px;
        }

        .sub-menu .sub-menu-article .details {
            display: flex;
            justify-content: flex-end;
            gap: 4px;
        }

        .sub-menu .sub-menu-article .details small {
            background-color: #eae7e696;
            color: #141212;
            padding: 5px;
            border-radius: 4px;
        }

/* Menu Toggle Button */
.menu-btn {
    position: fixed;
    top: 15px;
    left: 15px;
    background: black;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 1100;
}

/* Active menu (visible) */
.sidebar-container.open {
    left: 0;
}

.btn-yellow {
    border: 2px solid #ffe98a !important;
    color: #ffe98a !important;
}

.text-dirty-white {
    color: #eae7e6 !important;
}

.text-justify {
    text-align: justify !important;
}

/* Add horizontal padding to each slide for the gap */
.slick-slide {
    padding: 0 4px;
    box-sizing: border-box; /* ensures padding doesn't affect the width calculation */
}

/* Counteract the extra spacing so the track doesn't overflow */
.slick-list {
    margin: 0 -10px;
}

.text-blue-shadow {
    color: #0071c1;
    text-shadow: 0px 0px 8px;
}


/* In case the video overflows vertically on very wide screens */
@media (min-aspect-ratio: 16/9) {
    .youtube-video {
        height: 100vh; /* Full height of the viewport */
        width: 177.78vh; /* 16:9 aspect ratio (177.78 = 16/9 * 100) */
    }
}

@media (max-width: 812px) {
    .overlay-intro #skip-sect {
        bottom: 75px;
        left: calc(100% - 205px);
    }
}