/* COLORS */

:root {
    --white: #FFFFFF;
    --black: #000000;
    --red: #AB2322;
    --purple: #CE272A;
    --orange: #E84C26;
    --pink: #E84C26;
}

.navbar-toggler .icon-bar {
    background-color: var(--purple);
}

@media (max-width: 991px) {

    header .navbar .container #main-navbar-collapse {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: end;
        flex-basis: auto;
        padding: 0.5rem 1rem;
        flex-grow: inherit;
        height: inherit !important;
    }

    header .navbar .container #main-navbar-collapse > div > a,
    header .navbar .container #main-navbar-collapse > button.navbar-toggler {
        padding: 0.5rem 1rem;
    }
    
    header .navbar .container #main-navbar-collapse > button.navbar-toggler,
    header .navbar .container #main-navbar-collapse > button.navbar-toggler:focus {
        top: inherit;
        right: inherit;
        outline: none;
    }
    
    header .navbar .container #main-navbar-collapse .navbar-nav {
        position: absolute;
        background-color: var(--white);
        padding: 1rem;
        border-radius: 35px;
        z-index: 2;
        right: 0;
        width: 100%;
        overflow: auto;
        transition: opacity 300ms, visibility 300ms, display 0ms;
        top: 4rem;
        opacity: 0;
        visibility: hidden;
    }  

    header .navbar .container #main-navbar-collapse.show .navbar-nav {
        display: block;
        visibility: visible;   
        opacity: 1;
    }

    header .navbar .container {
        width: 100%;
    }

    header .navbar .container #main-navbar-collapse .navbar-nav > .nav-item {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    header .main-nav .dropdown:hover > .dropdown-menu.collapse:not(.show) {
        display: none;
    }

    header .navbar .container #main-navbar-collapse .navbar-nav > .nav-item .toggle-menu {
        width: 2rem;
        height: 2rem;
        border: 1px solid var(--purple);
        z-index: 1010;
        position: relative;
    }
    
    header .navbar .container #main-navbar-collapse .navbar-nav > .nav-item .toggle-menu:before {
        content: "";
        display: inline-block;
        width: 0; 
        height: 0;
        border-left: 6px solid transparent; /* Left side of the arrow */
        border-right: 6px solid transparent; /* Right side of the arrow */
        border-top: 6px solid var(--purple); /* Top side of the arrow (arrow color) */
        margin-left: 8px; /* Spacing between text and arrow */
        transition: transform 0.3s ease; /* Optional smooth rotation */
    }

    header .navbar .container #main-navbar-collapse .navbar-nav > .nav-item .dropdown-menu,
    header .navbar .container #main-navbar-collapse .navbar-nav > .nav-item .dropdown-menu,
    header .navbar .container #main-navbar-collapse .navbar-nav > .nav-item .dropdown-menu:hover {
        position: relative;
        top: 0;
        left: 0;
        grid-column-start: 1;
        grid-column-end: 3;
    }
    
    .header-section,
    .home-slider,
    .home-slider .slick-slide {
        height: 80vh !important;
    }
    
    .home-slider .slick-slide .slick-slide-inner {
        grid-template: auto / 100%;
    }
    
    .home-slider .slick-slide .slick-slide-inner .slide-slick-title * {
        font-size: 2rem;
    }
    
    .home-slider .slick-slide .slick-slide-inner .slide-slick-content {
        max-width: 100%;
    }
    
    .home-slider .slick-slide .slick-slide-inner .slide-btn {
        transform: translate(0, 1rem) !important;
    }
    
    .middle-text {
        max-width: 90%;
    }
    
    .btn-center {
        width: 100%;
    }
    
    .page-product .categories-grid .categories-item-wrapper,
    .categories-grid .categories-item-wrapper {
        width: 100%;
    }
    
    .row-subcategories {
        gap: 0.5rem;
    }
    
    .single-product-row {
        flex-direction: column;
    }
    
    .single-product-row .single-product-image-col,
    .single-product-row .product-summary {
        max-width: 100%;
    }
    
    .cart-row .cart-content .cart-item .cart-item-inner {
        display: grid;
        grid-template-columns: 1fr 60%;
        grid-gap: 10px; /* Optional: Spacing between grid items */
    }
    
    .cart-row .cart-content .cart-item .cart-item-inner .item-qty,
    .cart-row .cart-content .cart-item .cart-item-inner .item-value,
    .cart-row .cart-content .cart-item .cart-item-inner .item-remove {
        grid-column: span 1; /* Each takes 1 column equally */
    }
    
    .cart-row .cart-content .cart-item .cart-item-inner .item-qty {
        grid-column: 1 / span 1;
        grid-row-start: 2;
        grid-row-end: 4;
    }
    
    .cart-row .cart-content .cart-item .cart-item-inner .item-value {
        grid-column-start: 2;
    }
    
    .cart-row .cart-content .cart-item .cart-item-inner .item-remove {
        grid-column-start: 2;
    }

    
    footer .footer-lbb-logo {
        justify-content: center;
    }
    
    footer .footer-contact, footer .footer-links, footer .sol-anpc {
        padding: 2rem;
    }

}