/* --- SHARED BASE --- */
body {
    background: #000000;
    margin: 0;
    padding: 0;
}

.bna-image {
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}
.bna-image:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
@media (min-width: 1231px) and (max-width: 1700px) {
    .bna-container {
        width: calc(100% - 300px);
        margin: 0 auto;
    }

    .bna-before {
        color: #ffffff;
        font-size: 26px;
        width: 150px;
        margin-top: 70px;
        margin-left: -150px;
    }

    .bna-after {
        color: #ffffff;
        font-size: 26px;
        width: 150px;
        margin-top: 320px;
        margin-left: -150px;
    }

}


@media (min-width: 1701px) {

    .bna-before {
        color: #ffffff;
        font-size: 36px;
        width: 220px;
        margin-top: 50px;
        margin-left: -220px;
    }

    .bna-after {
        color: #ffffff;
        font-size: 36px;
        width: 220px;
        margin-top: 350px;
        margin-left: -220px;
    }

}

@media (min-width: 1231px) {
    .mobile {
        display: none;
    }

    .bna-content {
        padding-top: 150px;
        text-align: center;
    }

    .bna-title {
        color: #ffffff;
        font-size: 48px;
        font-weight: 800;
        display: block;
        text-align: center;
        margin-top: 50px;
        padding: 30px;
    }

    /* Before/After Header Row logic */
    .bna-row {
        position: relative;
        margin-bottom: 80px;
        display: flex;
        justify-content: center;
    }

}

/* --- MOBILE/CAROUSEL SECTION (<= 1230px) --- */
@media (max-width: 1230px) {
    .desktop {
        display: none;
    }

    /* The Carousel Container - Positioned between header and footer */
    #carouselExampleIndicators {
        position: fixed;
        top: 110px;
        /* Height of your title bar */
        bottom: 120px;
        /* Height of your bottom controls */
        left: 0;
        right: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel-inner,
    .carousel-item {
        height: 100% !important;
        width: 100% !important;
    }

    /* THE FIX: Background image settings */
    .carousel-item.full-screen {
        background-size: contain !important;
        /* Forces full image to show */
        background-repeat: no-repeat !important;
        background-position: center center !important;
        height: 100% !important;
        width: 100% !important;
        transition: transform 0.3s ease-out, top 0.2s linear, left 0.2s linear;
    }

    /* Nav Title Mobile */
    .nav-bna-title-mobile {
        position: fixed;
        top: 40px;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        left: 0;
        right: 0;
        z-index: 25;
        font-family: monbaiti, serif !important;
        font-size: 1.7rem;
        color: #ffffff;
    }

    .carousel-control-prev {
        position: absolute;
        width: 20.75px !important;
        height: 37.5px;
        top: calc(71.5vw - 19px);
        left: 1vw;
        background: url('../assets/images/L-B.svg');
        z-index: 13;
    }

    .carousel-control-next {
        position: absolute;
        width: 20.75px !important;
        height: 37.5px;
        top: calc(71.5vw - 19px);
        right: 1vw;
        background: url('../assets/images/R-B.svg');
        z-index: 13;
    }

    .bottom,
    .bna-bottom {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 100px;
        background: black;
        z-index: 10;
    }

    .bna-container-mobile {
        margin-left: 21px;
        margin-right: 21px;
    }

}
