/* Colors: styles - figma */
:root{
    --red: #eb0b1e;
    --dark-red: #A8000E;
    --white: #fff;
    --black: #000;
    --gray: #2e2e33;
    --gray2: #424247;
    --gray3: #f0f0f0;
}

/* Font Colors */

.text--red{
    color: var(--red);
}
.text--gray{
    color:  var(--gray);
}
.text--gray2{
    color:  var(--gray2);
}
.text--gray3{
    color:  var(--gray3);
}


/* FONTS */

@font-face {

    font-family: Toyota_Display_REGULAR;
    src: url('/fonts/Display_fonts/Display_Regular/ToyotaDisplay_Rg.ttf') format("truetype");
}

@font-face {

    font-family: Toyota_Display_BOLD;
    src: url('/fonts/Display_fonts/Display_Bold/ToyotaDisplay_Bd.ttf') format("truetype");
}

@font-face {

    font-family: Toyota_Display_HEAVY;
    src: url('/fonts/Display_fonts/Display_Heavy/ToyotaDisplay_He.ttf') format("truetype");
}

@font-face {

    font-family: Toyota_Text_BOLD_ITALIC;
    src: url('/fonts/Text_fonts/Text_Bold_Italic/ToyotaText_BdIt.ttf') format("truetype");
}

@font-face {

    font-family: Toyota_Text_BOLD;
    src: url('/fonts/Text_fonts/Text_Bold/ToyotaText_Bold.ttf') format("truetype");
}

@font-face {

    font-family: Toyota_Text_Italic;
    src: url('/fonts/Text_fonts/Text_Italic/ToyotaText_It.ttf') format("truetype");
}

@font-face {

    font-family: Toyota_Text_REGULAR;

    src: url('/fonts/Text_fonts/Text_Regular/ToyotaText_Rg.ttf') format("truetype");

}


.--Toyota_Display_REGULAR{
    font-family: Toyota_Display_REGULAR!important;
}

.--Toyota_Display_BOLD{
    font-family: Toyota_Display_BOLD!important;
}

.--Toyota_Display_HEAVY{
    font-family: Toyota_Display_HEAVY!important;
}

.--Toyota_Text_BOLD_ITALIC{
    font-family: Toyota_Text_BOLD_ITALIC!important;
}

.--Toyota_Text_BOLD{
    font-family: Toyota_Text_BOLD!important;
}

.--Toyota_Text_Italic{
    font-family: Toyota_Text_Italic!important;
}
.--Toyota_Text_REGULAR{
    font-family: Toyota_Text_REGULAR!important;
    src: url('/fonts/Text_fonts/Text_Regular/ToyotaText_Rg.ttf') format("truetype");
}


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

/* INSERT HERE HEADER STYLES */
.sticky-top {
    z-index: 10 !important;
}
header a {
    text-decoration: none;
}
.navbar {
    height: 91px;
    background-color: #fff !important;
}
/* .navbar-logo {
    object-fit: contain;
} */
.navbar .collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}
.navbar-collapse {
    font-size: 18px;
}
.navbar {
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2) !important;    
}
.navbar .nav-item {
    padding: 0 1.5rem !important;
}
.navbar .nav-link{
    padding: 2.1rem 0rem !important;
    color: var(--black);
    /* font-size: 18px; */
    font-size: 0.94vw;
}
.navbar .nav-link:hover{
    box-shadow: 0px -4px 0px red inset;
    font-weight: bold;
    color: var(--black);
}

.nav-ls {
    border-bottom: 1px solid rgba(32, 31, 31, 0.2)!important;
}

.test-drive-btn {
    background: var(--red);
    color: var(--white);
    height: 91px;
    width: 16rem;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-size: 16px;
}
.test-drive-btn:hover {
    background: var(--dark-red);
    color: var(--white);
}
nav .models-btn-header{
    text-transform: uppercase;
    border: none;
    background: none;
    font-size: 12px;
    color: var(--black);
}
nav #navbarNavDropdown .dropdown-menu {
    border-radius: 0px;
    top: 94% !important;
    left: 13% !important;
    border-top: var(--red) 4px solid;
    width: auto;
    background: var(--white);
    padding: 0.5rem 0;
}
nav #navbarNavDropdown .submenu {
    position: absolute;
    top: -1.4rem !important;
    left: 105% !important;
}
nav #navbarNavDropdown .dropdown-item {
    font-size: 18px;
    margin-right: 16px; /* Ensures space for the icon */
}
nav #navbarNavDropdown .dropdown-item:hover {
    font-size: 18px;
    color: var(--black);
    background: #e9ecef !important;
}
nav #navbarNavDropdown .dropdown-item.active, .dropdown-item:active {
    background: transparent !important;
}
.px-3 {
    position: relative;
}
.ls-nav .dropdown-item {
    padding: 16px 0 !important;
}

.close-menu {
    margin-right: 1.7rem !important;
    width: 40px;
    height: 40px;
}
.navbar-toggler {
    border: none !important;
}
.navbar-toggler:focus,
.navbar-toggler-icon:focus {
    outline: none !important;
    box-shadow: none !important;
}
/* models menu */
.mobile-models-content {
    background: #F5F5F5;
    height: auto;
    width: 100%;
}
.mobile-models-content a .mobile-models-text{
    color: var(--black) !important;
}
.mobile-models-content .text-left:hover img{
    transform: scale(1.1);
    transition: transform .2s;
}
.fadeIn{
    animation: fadeIn .3s;
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.mobile-models-category .mobile-models-btn:last-of-type {
    border-right: none;
}
.mobile-models-btn {
    border: none;
    color: #767676;
    background: none;
    border-right: 1px solid #767676;
    padding: 0rem 1.5rem;
    font-size: 22px;
}
.mobile-models-btn-active span {
    font-weight: bold;
    color: var(--red);
    border-bottom: 2px solid var(--red) ;
    padding-bottom: 8px;
}
.mobile-models-btn:hover span {
    font-weight: bold;
    color: var(--red);
    /* border-bottom: 2px solid var(--red) ; */
    padding-bottom: 8px;
}
@keyframes zoomFade {
    0% {
      opacity: 0;
      transform: scale(0.8) translateY(100%);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  .animation {
    opacity: 0;
    animation: zoomFade 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    transform: scale(0.8);
  }
@media(max-width: 1024px) {
    .navbar-nav .nav-item {
        font-size: 1rem;
    }
}
@media(max-width: 991px) {
    #dxp-myaccount-mini-container {
        padding-right: 0 !important;
        position: absolute;
        left: 82%;
        transform: translateX(-82%);
    }
    /* .navbar .container-fluid {
        position: relative;
    } */
    .navbar-toggler {
        padding: 0 !important;
    }
    .hamburger-menu {
        flex-basis: calc(100vw/3);
        text-align: end;
    }
    .navbar-nav .nav-item {
        font-size: 1.2rem;
    }
    nav .hamburger-nav {
        position: fixed;
        top: 0;
        width: 100%;
        background: var(--white);
        box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2) !important;    
        z-index: 1050;
    }
    #navbarNavDropdown {
        position: fixed;
        top: 91px;
        height: 100vh;
        width: 100%;
        background-color: var(--white);
        z-index: 20;
        overflow-y: scroll !important;
        padding-bottom: 8rem;
    }
    #navbarNavDropdown .nav-item:hover {
        background: #e9ecef !important;
    }
    nav #navbarNavDropdown .dropdown-menu li:hover {
        background: #e9ecef !important;
    } 
    nav li a {
        color: var(--black);
    }
    .navbar .nav-link {
        padding: 1.5rem 0rem !important;
        border-bottom: 1px solid rgba(32, 31, 31, 0.2);
        color: var(--black) !important;
        font-size: 18px;
    }
    .navbar .nav-link:hover{
        font-weight: normal;
    }
    nav #navbarNavDropdown .dropdown-menu {
        position: fixed !important;
        top: 0px !important;
        left: 0px !important;
        padding-top: 91px;
        height: 100%;
        width: 100%;
        background-color: var(--white);
        border-top: none;
        z-index: 10;
        overflow-y: auto;
        padding-bottom: 15rem;
        margin-top: 0 !important;
        transition: 1s linear !important;
    }
    nav #navbarNavDropdown .dropdown-item {
        padding: 1.5rem 0 !important;
        margin: 0 1.5rem;
        padding-bottom: 1.5rem;
        font-size: 18px;
        border-bottom: 1px solid rgba(100, 100, 100, 0.2);
        width: 90%;
    }
    .navbar .nav-link:hover{
        box-shadow: none;
        /* box-shadow: 0px -3px 0px red inset; */
    }
    .nav-back {
        color: var(--red) !important;
    }
    .models-menu-header {
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 91px;
        background: var(--white);
        box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2) !important;    
        z-index: 1050;
    }
    .models-menu-header p {
        padding-left: 4rem;
    }
    .models-menu-content {
        position: fixed;
        top: 91px;
        left: 0;
        height: 95vh;
        width: 100%;
        background-color: #F5F5F5;
        z-index: 1040;
        overflow-y: auto;
        padding-bottom: 5rem;
    }
    .mobile-models-category {
        background: var(--white);
    }
    .models-menu-content .mobile-models-category h3 {
        font-size: 22px;
    }
    .models-menu-content .mobile-models-category p {
        font-size: 14px;
    }
    /* .mobile-container .navbar-logo {
        margin-left: 2rem !important;
    } */
    .mobile-models-toyota {
        /* margin: 0 0 0 1rem; */
        /* width: 33.33%; */
        flex-basis: calc(100vw/3);
    }
    .mobile-logo-toyota {
        /* width: 33.33%; */
    }
    .navbar-brand {
        padding: 0 !important;
    }
}
@media(max-width: 768px) {
    .test-drive-btn {
        height: 91px;
        width: 159px;
    }
    .mobile-models-btn {
        font-size: 16px;
    }
    .mobile-models-text h3{
        font-size: 22px;
        font-family: 'Toyota_Text_BOLD'!important;
    }
    h3.fw-bold.ps-2 {
        font-size: 22px;
        font-family: 'Toyota_Text_BOLD'!important;
    }
    .mobile-models-text p{
        font-size: 14px
    }
    .mobile-models-toyota {
        margin-right: 0;
    }
}
@media(max-width: 767px) {
    #dxp-myaccount-mini-container {
        position: absolute;
        left: 74%;
        transform: translateX(-74%);
    }
}
@media(max-width: 575px) {
    .mobile-models-btn {
        padding: 0 1rem;
    }
    /* .mobile-container .navbar-logo {
        margin-left: 0.8rem !important;
    } */
}
@media(max-width: 490px) {
    .mobile-models-btn {
        padding: 0 0.8rem;
    }
}
@media(max-width: 420px) {
    .mobile-models-btn {
        font-size: 14px
    }
}
@media(max-width: 395px) {
    .mobile-models-btn {
        padding: 0 0.5rem;
    }
}
@media(max-width: 340px) {
    .mobile-models-btn {
        font-size: 13px;
        padding: 0 0.4rem;
    }
}
/* @media(max-width: 430px) {
    .mobile-models-btn {
        padding: 0 0.8rem;
    }
}
@media(max-width: 390px) {
    .mobile-models-btn {
        font-size: 14px;
    }
}
@media(max-width: 360px) {
    .mobile-models-btn {
        padding: 0 0.5rem;
    }
}
@media(max-width: 320px) {
    .mobile-models-btn {
        padding: 0 0.3rem;
    }
} */
/* INSERT HERE FOOTER STYLES */
footer {
    background: var(--gray);
    color: var(--white); 
}
footer a {
    text-decoration: none;
    color: var(--white);
}
footer ul {
    padding:0;
    line-height: 2rem !important;
}
footer li {
    list-style: none;

}
.footer-sitemap {
    padding: 5rem 0rem 5rem 5rem;
}
.footer-sitemap .footer-head {
    font-weight: 700 !important;
}
.footer-sitemap .footer-head:hover {
    color: var(--white) !important;
    cursor: auto !important;
}
#footer-accordion .accordion-item {
    border: none;
}
#footer-accordion .collapsed{
    background: var(--gray) !important;
    color: var(--white) !important;
}
/* #footer-accordion .collapsed:hover{
    background: var(--white) !important;
    color: var(--gray) !important;
} */
#footer-accordion .accordion-button {
    background: var(--white);
    color: var(--gray);
    font-size: 18px;
    font-weight: 400 !important;
    padding-top: 32px;
    position: unset;
    border-bottom: 1px solid rgba(255,255,255,.25);    
} 
#footer-accordion .accordion-body {
    background: var(--gray);
    color: var(--white);
}
#footer-accordion :focus {
    outline: 0 !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}
#footer-accordion .accordion-button:hover::after {
    background-image: url("/media/kmidukjs/material-symbols_keyboard-arrow-down-rounded.png");
}
#footer-accordion .accordion-button::after {
    background-image: url("/media/kmidukjs/material-symbols_keyboard-arrow-down-rounded.png");
}
#footer-accordion .accordion-button:not(.collapsed)::after  {
    background-image:url("/media/kmidukjs/material-symbols_keyboard-arrow-down-rounded.png");
}
#footer-accordion .accordion-button:not(.collapsed)  {
    background-color: var(--gray) ;
    color: var(--white);
}
#footer-accordion .accordion{
    --bs-accordion-btn-icon-width: 33px !important;
    --bs-accordion-border-color: none;
    --bs-accordion-border-radius: none;
}
#footer-accordion .accordion-item:last-of-type {
    border-radius: 0px !important;
}
#hybridFAQ .accordion-button {
    border-radius: 0px !important;
}
hr {
    margin: 0rem 3rem !important;
}
.footer-legal {
    padding: 3.5rem 7rem 5rem 7rem;
}

.f-link:hover {
    color: #EB0B1E;
}

.b-link:hover {
    color: #363636;
}
@media(max-width: 992px) {
    .footer-sitemap {
        padding: 2rem 0rem;
    }
    hr {
        margin: 0rem 1.5rem !important;
    }
}
@media(max-width: 576px) {
    .footer-legal {
        padding: 2rem 2rem 5rem 2rem;
    }
    hr {
        margin: 0rem 1.5rem !important;
    }
}

#language-dropdown .dropdown-toggle::after {
border:none!important;
}
#language-dropdown ul li:hover{
    background-color: transparent!important;
}
#language-dropdown .dropdown-item:focus, .dropdown-item:hover {
    background: transparent !important;
}

.colorpicker .nav-pills {
    flex-wrap: wrap !important;
}