/* custom-optimizations.css */

/* --- Extracted from header_.php --- */
.controls-lv.text-center li a {
    color: white;
}

.controls-lv.text-center li a {
    font-size: small;
}

.logo {
    margin-left: 6px;
}

.controls-lv li {
    margin-right: 10px;
    margin-top: 3px;
}

.user-log:before {
    display: none;
}

#cart_items>li {
    width: 100%;
}

#cart_items {
    max-height: 350px;
    overflow: scroll;
}

.dropdown-menu.show {
    top: 15px !important;
}

.dropdown-toggle::after {
    display: none;
}

.badge#badge_cart {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 5px 10px;
    border-radius: 50%;
    background-color: black;
    border: 1px solid black;
}

@media (max-width: 1366px) {
    .menu_logo {
        width: 25%;
    }
}

@media (max-width: 480px) {
    .menu_logo {
        width: 45%;
    }

    #mobile_dropdown {
        display: contents;
    }
}

@media (max-width: 573px) {
    #mobile_dropdown {
        display: contents !important;
    }

    #about_us_paragraph {
        display: none;
    }
}

.website_bg,
.hp_1 .top_bar.scroll {
    background-color: #a60b00;
    color: white;
}

#categories_search>div {
    height: fit-content;
    overflow: scroll;
    max-height: 300px;
}

::-webkit-scrollbar {
    display: none;
}

video {
    background-color: maroon !important;
    height: 400px;
}

a:hover {
    color: maroon !important;
    pointer-events: painted;
}

.btn-default:hover,
.btn:hover {
    background-color: maroon !important;
    color: white !important;
    border:1px solid black;
}

.cart>div>ul {
    height: 75% !important;
    overflow: scroll;
}

.cart {
    position: fixed;
    top: 0;
    right: -265px;
    width: 300px;
    background-color: #faf8f8;
    height: 100%;
    z-index: 99999999999999;
    border-left: 0;
    opacity: 0;
    visibility: hidden;
    display: block !important;
}

.cart.active {
    opacity: 1;
    visibility: visible;
    right: 0;
}

.dropdown-item.btn.btn-light:hover {
    background-color: maroon;
}

#categories_search_name::placeholder {
    color: white;
    opacity: 0.7;
}

.btn-maroon,
.btn-maroon:hover {
    background-color: maroon !important;
    color: white !important;
}

/* --- Extracted from index.php --- */

/* video background */
#background-video {
    height: 90vh;
    width: 100%;
    object-fit: cover;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

/* page content */
#baground_text {
    text-align: center;
    margin-top: -50vh;
    width: 100%;
    font-family: "sans-serif";
    color: #fff;
}

#baground_text>h1 {
    font-size: 20px;
}

#baground_text>a {
    background: transparent;
    color: #fff;
    border: 1px solid;
}

.controls-lv.text-center li a {
    font-size: medium;
    cursor: grab;
}

#background_section {
    height: 100vh;
}

@media (max-width: 480px) {
    #background-video {
        height: 40vh;
    }

    #background_section {
        height: 50vh;
    }

    #baground_text {
        margin-top: -30vh;
    }
}

@media (max-width: 800px) {
    .container {
        max-width: 100%;
        padding: 0;
    }
}

.list_img {
    width: 100%;
    max-width: 400px;
    float: right;
}

.img_card {
    background-color: white;
    height: 70px;
    width: 60px;
    float: right;
    position: absolute;
    right: 51%;
    font-size: larger;
    padding-top: 10px;
    text-align: center;
    font-weight: 500;
    font-style: italic;
    margin-top: 10px;
    background-color: maroon;
}

.list_img_ {
    width: 100%;
    max-width: 400px;
    max-height: 400px;
    float: left;
}

.img_card_ {
    background-color: maroon;
    position: absolute;
    width: 38%;
    right: 17%;
    top: 36%;
}

.text-left.text-large,
.text-right.text-large {
    font-size: xx-large;
    font-weight: 200;
}

.text_width {
    max-width: 360px;
}

.row.pt-4 {
    position: relative;
}

.label_b_s {
    border-bottom: 0.5px solid maroon;
}

.label_b_s.active {
    border-bottom: 2px solid maroon;
    font-weight: bolder;
}

@media (max-width: 800px) {
    .text_width {
        padding: 0px !important;
        line-height: 1.2;
        padding-top: 10% !important;
    }

    .text-left.text-large,
    .text-right.text-large {
        margin-top: -25%;
    }

    .img_card,
    .img_card_ {
        width: 50%;
        right: 11%;
    }
}

@media (max-width: 480px) {
    .text_width {
        padding: 0px !important;
        line-height: 1.2;
        padding-top: 10px !important;
        font-size: small;
    }

    .text-left.text-large,
    .text-right.text-large {
        margin-top: -55px;
        font-size: 20px;
    }

    .img_card,
    .img_card_ {
        width: 50%;
        right: 8%;
        top: 65px;
    }

    .w-50 {
        padding: 1% !important;
        padding-top: 5% !important;
    }
}