@media screen and (max-width: 992px) {
    .nav-item .active {
        border-bottom-color: var(--bs-border-color) !important;
        border-bottom-left-radius: var(--bs-nav-tabs-border-radius);
        border-bottom-right-radius: var(--bs-nav-tabs-border-radius);
        padding-left: 1rem;
    }
}

.navbar.navbar-dark {
    & .nav-item {
        margin: auto 2rem;
        & .active {
            color: #000
        }
    }
}

.carousel {
   margin: auto;
    & .carousel-inner .carousel-item img {
        width: 100%;
    }
}


#vertical-navbar-container {
    display: none;
}

@media screen and (min-width: 1280px) {
    .carousel {
        & .carousel-inner .carousel-item img {
            width: 65%;
        }
    }

    #vertical-navbar-container {
        display: flex;
    }
}

@media screen and (min-width: 1366px) {
    .carousel {
        & .carousel-inner .carousel-item img {
            width: 75%;
        }
    }
}

@media screen and (min-width: 1440px) {
    .carousel {
        & .carousel-inner .carousel-item img {
            width: 80%;
        }
    }
}

#vertical-navbar-container {
    bottom: 10%;
}

@media screen and (min-height: 720px) {

    #vertical-navbar-container {
        bottom: 20%;
    }
}

@media screen and (min-height: 900px) {

    #vertical-navbar-container {
        bottom: 35%;
    }
}

@media screen and (min-height: 1080px) {

    #vertical-navbar-container {
        bottom: 50%;
    }
}