*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body, html{
    height: -webkit-fill-available;
}

body{
    height: 100vh;
}

/* Colors: styles - figma */
:root{
    --dark-blue: ;
    --light-blue: ;
    --white: #fff;
    --black: #000;
    --black-lighter: #333333;
    --gray-primary: #CAC9C9 ;
    --gray-secondary: rgba(255, 255, 255, 0.10);
    /* --gray-tertiary:; */
    --gray-light: #B9C0C2;
    --gray-lighter:;
}
.text-start.w-100.h-100.top-0.position-absolute.align-items-center.d-flex.px-lg-5 {
    background-image: none !important;
}
/* text styles */
.text--black-lighter{
    color: var(--black-lighter);
}
.text--gray-light{
    color: var(--gray-light);
}

/* background */
.bg--black {
    background-color: var(--black) !important;
}
.bg--gray-secondary {
    background-color: var(--gray-secondary);
}
.bg--gray-light {
    background-color: var(--gray-light);
}

  /* FONTS */
@font-face { 
    font-family: "NobelBook";
    src: url(../fonts/Nobel-Book.otf);
    font-display: swap;
}
@font-face { 
    font-family: "NobelBold";
    src: url(../fonts/Nobel-Bold.otf);
    font-display: swap;
}
@font-face { 
    font-family: "NobelLight";
    src: url(../fonts/Nobel-light.otf);
    font-display: swap;
}
@font-face { 
    font-family: "Nobel";
    src: url(../fonts/Nobel-Regular.otf);
    font-display: swap;
}

.--NobelBook{
    font-family: NobelBook;
}
.--NobelBold{
    font-family: NobelBold;
}
.--NobelLight{
    font-family: NobelLight;
}
.--Nobel{
    font-family: Nobel !important;
}

/* boostrap SVG */
@font-face {
    font-family: Bootstrap-icons ;
    src: url(../vendors/bootstrap-icons/fonts/bootstrap-icons.woff2);
}



/* HEADER STYLES */
    body:has(.navbar-Menu[aria-modal="true"]){
        padding-right: 0px !important;
    }

    .hover--none{
        background: none;
        --bs-dropdown-link-hover-bg: none;
        --bs-dropdown-link-active-bg: none;
    }

    .bg--black-60{
        background-color: rgba(0, 0, 0, 0.60);
    }

    .bg--blur{
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px) ;
    }

    .navbar-Menu{
        width:340px !important;
        position:fixed;
        height: calc(100vh + 200px);
        /* removed hideShow animation of Popup Collapse */
        -webkit-transition: none !important;
        transition: none;
    }

    #hamburgerMenu .offcanvas-body{
        height: calc(100vh + 100px);
    }

    #submenus + .show{
        transform:none !important;
        background: none;
    }

    /* dropdownIcon */
    #submenus .icon-after--arrow::after{
        font-family:'Bootstrap-icons' !important;
        content: '\F282';
    }

    #submenus[aria-expanded="true"] .icon-after--arrow::after{
        content: '\F286';
    }

    #submenus-Category .icon-after--plus::after{
        font-family:'Bootstrap-icons' !important;
        content: '\F4FE';
    }



    /* scroll of ourcars design and navbar*/
    #ourCarsList::-webkit-scrollbar, .offcanvas-body::-webkit-scrollbar{
        width: 5px;
    }
    #ourCarsList::-webkit-scrollbar-thumb, .offcanvas-body::-webkit-scrollbar-thumb{
        background: rgba(255, 255, 255, 0.199); 
        border-radius: 10px;
    }
    #ourCarsList::-webkit-scrollbar-thumb:hover, .offcanvas-body::-webkit-scrollbar-thumb:hover{
        background: rgba(248, 246, 246, 0.377); 
    }

    /* ourCars content */
    #ourCarsList{
        left:340px; 
        width: calc(90vw - 290px); 
        min-height: calc(100vh + 200px) !important; 
        max-height: 100% !important; 
        z-index:1005; 
        overflow-y: scroll;
        /* removed hideShow animation of Popup Collapse */
        -webkit-transition: none;
        transition: none;
        padding-bottom: 200px !important;
    }
    #tab-category .slick-list .slick-track li .active{
        color: white;
        font-weight: 700 !important;
        text-decoration: underline !important;
        text-decoration-thickness: 2px !important;
        text-underline-offset: 5px; 
    }
    .pb-10--custom{
        padding-bottom: 85px;
    }
    /* slick Category */
    .slick-carousel--ourCars .slick-list .slick-track{
        display: flex ;
        justify-content: center;
    }
    li.nav-item.w-auto.px-xl-4.px-2.py-1.slick-slide.slick-current.slick-active {
        font-size: 18px;
    }
    li.nav-item.w-auto.px-md-4.px-1.py-1.slick-slide.slick-active {
        font-size: 18px;
    }
    /* DISTANCE FOR HEADER */
    .pt-10{
        padding-top: 98px;
    }
    #ourCarsList ul li a:hover{
        color: white;
    }
    .pb--2-4{
        padding-bottom: 38px;
    }
    
/* END - HEADER STYLES */

/* FOOTER STYLES */
    #Footer-submenus + .show, #Footer-submenus + ul{
        transform:none !important;
        background: none;
    }
/* END - FOOTER STYLES */



/* STYLES FOR RESPONSIVE*/
/* DESK CUSTOM RESPONSIVE for FIGMA 1920*/
    @media (min-width: 1800px) {
        /* HEADER STYLES */
            .btn--width{
                padding: 14.5px 2.22rem !important;
            }
        /* END - HEADER STYLES */
    }
/* DESK XL RESPONSIVE MIN1200*/
    @media (min-width: 1200px) {
        /* MODEL NAME FONT-SIZE FOR MIN1200 */
        .VMName {
            font-size: 1.625rem!important;
        }
         /* All and Category name FONT-SIZE FOR MIN1200 */
        .CategoryName {
            font-size: 1.125rem!important;
        }
        /* Padding styling for the Vehicle IMG and model name and description. */
        .Content {
            padding-right: 2rem!important;
            padding-left: 2rem!important;
        }
        .Under-Line-Bottom {
            margin-right: 6rem!important;
            margin-left: 6rem!important;
        }
    }

/*  DESK LARGE RESPONSIVE MIN768*/
    @media (min-width: 992px) {
    /* HEADER STYLES */
        .fs-md-5{
            font-size: 1.25rem;
        }
    /* END - HEADER STYLES */
    /* FOOTER STYLES */
        /* underline of Title*/
            #Footer-submenus p::after, .title--underline-desk::after{
                content: " ";
                position: absolute;
                bottom: 0;
                left: 0;
                height: 1px;
                background: white;
            }
            #Footer-submenus p::after{
                width: 160px;
            }
            .title--underline-desk::after{
                width: 120%;
            }
            #Footer-submenus p, .title--underline-desk{
                position: relative;
            }

        .w--80{
            width:80%;
        }
        .border--bottom-desk{
            border-bottom: 1px solid white;
        }
    /* END - FOOTER STYLES */
    

    }

/*  DESK MEDIUM RESPONSIVE MIN768*/
    @media (min-width: 768px) {
    /* HEADER STYLES */
        /* CENTERING MARGIN LEXUS LOGO */
        .Lexuslogo{
            margin-left: 18rem !important;
        }
        /* active dropdown */
        .mainMenu[aria-expanded="true"]> h1, .mainMenu[aria-expanded="true"]> p{
            text-decoration: underline;
            text-underline-offset: 3px; 
        }
        .py--md-3-20{
            padding: 20px 0;
        }
        .px--md-4-40{
            padding-right: 40px !important;
            padding-left: 40px !important;
        }
    /* END - HEADER STYLES */


    }
    

/* MID APPLIED in 1799~992*/
@media screen and (max-width: 1799px) and (min-width: 992px){
    /* HEADER STYLES */
        .btn--width{
            padding: .5rem 1rem !important;
        }
    /* END - HEADER STYLES */
}

/* MOB ALMOST < XL */
    @media (max-width: 1399px) {
    /* HEADER STYLES */
        /* ourCars content */
        .pb-10--custom{
            padding-bottom: 114px;
        }
    /* END - HEADER STYLES */


    }

/* MOB XL (1200~1399) RESPONSIVE MAX1999 */
    @media (max-width: 1199px) {

    }

/* MOB LARGE (992~1999) RESPONSIVE MAX991 */
    @media (max-width: 991px) {
    /* HEADER STYLES */
        /* brand icon height */
        .brand-height--mob{
            height: 32px;
        }
        .fs-md-5{
            font-size: 1.125rem;
        }
        /* ourCars content */
        #ourCarsList{
            width: calc(91vw - 290px);
        }
        .font--mob-14{
            font-size: 14px !important;
        }
        .btn--width{
            padding: 9px 16.27px !important;
        }
        /* slick Category */
        .slick-carousel--ourCars .slick-list .slick-track{
            justify-content: space-evenly;
        }
        /* DISTANCE FOR HEADER */
            .pt-10{
                padding-top: 84px;
            }
    /* END - HEADER STYLES */

    /* FOOTER STYLES */
         /* dropdownIcon */
        #Footer-submenus .icon-after--arrow::after{
            font-family:'Bootstrap-icons' !important;
            content: '\F282';
        }

        #Footer-submenus[aria-expanded="true"] .icon-after--arrow::after{
            content: '\F286';
        }

        #Footer-submenus-Category .icon-after--plus::after{
            font-family:'Bootstrap-icons' !important;
            content: '\F4FE';
        }

        /* accordion */
        .border--bottom-mob{
            border-bottom: 1px solid white;
        }

        .Footer-M{
            margin-right: 3rem!important;
            margin-left: 3rem!important;
        }
    /* END - FOOTER STYLES */

    /* FLOATING BUTTON - for initializing minwidth and right value JS - instead d-none */
        .d-lg-visible{
            visibility:hidden;
        }
    /* FLOATING BUTTON */
    }
    
    @media (max-width: 768px) {
        .Details-btton {
            margin-left: 11rem !important;
            margin-right: 11rem !important;
        }
    }
/* MOB MEDIUM (768~991) RESPONSIVE MAX767*/
    @media (max-width: 767px) {
    /*HEADER STYLES */
    /* MODEL NAME FONTSIZE IN MIN768 */ 
        .VMName {
            font-size: 1.25rem !important;
        }
        /* All and Category name FONT-SIZE FOR MIN1200 */
        .CategoryName {
            font-size: 1rem!important;
        }
         /* Padding styling for the Vehicle IMG and model name and description. */
         .Content {
            padding-right: 1rem!important;
            padding-left: 1rem!important;
        }
        /* fixed navbar*/
        .navbar-Menu{
            width:100% !important;
            position:fixed;
            height: 100vh !important;
        }
        #hamburgerMenu .offcanvas-body{
            height: calc(100vh - 270px);
        }
        .px--md-4-40{
            padding-right: 1.5rem !important;
            padding-left: 1.5rem !important;
        }

        /* submenu overlay */
        #submenus + .show{
            position:fixed !important;
            top:105px !important; 
            width: 100vw;
            height: calc(100vh - 270px);
            overflow-y: scroll;
        }
        .invisible-md{
            visibility: hidden;
        }
        .py--md-3-20{
            padding: 1rem 0;
        }

        /* ourCars content */
        #ourCarsList{
            top: 103px ;
            left: 0px; 
            width: 100vw;
            min-height: calc(100vh - 270px) !important;
            max-height: calc(100vh - 270px) !important; 
            position: fixed !important;
            background-color: transparent !important;
            padding-bottom: 0px !important;
        }
        #tab-category .slick-list .slick-track li .active{
            text-decoration: underline !important;
            text-decoration-thickness: 5px !important;
        }
        
    /* END - HEADER STYLES */
    .Details-btton {
        margin-left: 11rem !important;
        margin-right: 11rem !important;
    }
    .FooterBtn{
        padding-bottom: 8rem!important;
    }
    }

/* MOB SMALL (576~767) RESPONSIVE MAX575*/
    @media (max-width: 575px) {
        .Details-btton {
            margin-left: 0.8rem !important;
            margin-right: 0.8rem !important;
        }
        .Lexuslogo{
            margin-left: 1.2rem !important;
        }
    
    }

/* MOB MOBILE SIZE IN FIGMA RESPONSIVE MAX420*/
    @media (max-width: 420px) {
        .Details-btton {
            margin-left: 0.5rem !important;
            margin-right: 0.5rem !important;
        }
        .Lexuslogo{
            margin-left: 1rem !important;
           
        }
    }