/*======NAVBAR MAIN======*/



.nav-top {
  height: 36px;
  padding: 5px 0;
  background-color: #475569;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  @include transition2(all, 0.2s, ease-in-out);

  ul.header-links {
    list-style-type: none;
    padding-inline-start: 0;
    display: inline-flex;
    align-items: center;

    li {
      margin-right: 15px;
    }

    ul.sub-header-links {
      list-style-type: none;
      padding-inline-start: 0;
      display: inline-flex;
      align-items: center;

      li {
        margin-right: 1px;
      }
    }
  }

  .mini-header-btn {
    display: inline-flex;
    align-items: center; /* Vertically center items */
  }

  .left-header-link {

    p {
      margin: 0 0 0 5px;
    }

    color: #CBD5E1;
    font-family: 'Roboto';
    font-size: 12px;
    font-weight: 400;

    //line-height: 10px;
    //margin-top: 40px;

    img {
      margin-right: 5px; /* Adjust as needed */
      margin-top: 3px; /* Adjust as needed */
    }
  }

  .header-links-right {
    float: right;
  }

  .mini-header-btn-language {
    color: #CBD5E1;
  }

  .dropdown-toggle {
    color: #F1F5F9;
    font-family: "Roboto";
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.7px;
  }

  .header-logos {
    padding: 7px 0;
  }

  .dropdown-toggle {
    display: inline-flex;
    cursor: pointer;
  }

  .drop-lang-img {
    margin-top: -5px;
    margin-left: 5px;
  }


}

.nav-main {
  height: 75px;
  padding: 10px 0;
  //z-index: 6;
  background-color: transparent;
  position: fixed;
  top: 36px;
  width: 100%;
  z-index: 100;
  @include transition2(all, 0.2s, ease-in-out);


  .menu-options {
    margin-top: 5px;
    float: right;
    text-align: right;

    li.menu-link {
      padding: 8px 12px 8px 12px;
      border-radius: 33px;
      margin: 0 5px;

    }

    li.search-link {
      padding: 6px 6px 0px 6px;
      border-radius: 33px;
      margin: 0 5px;

    }

    li:hover {
        background-color: #F1F5F9;
        a {
        color: #0F172A;

          //img {
          //  transition: all 0.3s ease-in-out;
          //  content: url("../assets/images/compare_wh.png");
          //}

          //img {
          //  transition: all 0.3s ease-in-out;
          //  content: url("../assets/images/chevron-down_black.png");
          //}

      }
    }

    a {
      color: #F1F5F9;
      font-family: "Roboto";
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.9px;
      display: inline-flex;
    }

    .drop-img {
      margin-left: 5px;
    }
  }

  .search-link-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;

    &:hover {
      opacity: 0.7;
    }

    .search-icon-desktop {
      width: 30px;
      height: 30px;
    }
  }
  //vmx

  .nav-main-menu {
    @include flex-basis(0, 0, auto);
  }



















  .nav-main-menu-icon {
    position: relative;
    display: block;
    width: 40px;
    height: 30px;
    cursor: pointer;
    svg {
        position: absolute;
        top: 50%;
        left:3%;
        transform:translateY(-50%);
      width: 30px;
      height: 20px;
      path {
        fill: $white;
      }
    }
  }



  .nav-main-menu-option-icon {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    opacity: 1;
    @include transition;
    svg {
      width: 20px;
      height: 20px;
      path {
        fill: $white;
      }
    }
    &:not(:first-child) {
      margin-left: 15px;
    }
    &:hover {
      opacity: 0.5;
    }
  }

  .nav-second-menu-list {
    padding: 0 15px;
    &.mobile {
      padding: 15px 0;
      position: relative;
      &:before {
        content: "";
        position: absolute;
        width: 100vw;
        height: 100%;
        top: 0;
        left: 50%;
        margin-left: -50vw;
        background-color: $color01;
      }
      ul {
        width: 100%;
        li {
            width: 30%;
          text-align: center;
          &:not(:first-child) {
            margin-left: 15px;
          }
          a,
          a:focus,
          a:visited,
          a:active {
            font-size: 12px;
          }
        }
      }
    }
    ul {
      li {
        text-align: center;
        &:not(:first-child) {
          margin-left: 15px;
        }
        a,
        a:focus,
        a:visited,
        a:active {
          position: relative;
          display: inline-block;
          font-family: Roboto;
          font-size: 14px;
          color: $white;
          @include transition;
          &:after {
            content: "";
            position: absolute;
            width: 0;
            background: $background-white;
            height: 1px;
            right: 0;
            bottom: -10px;
            @include transition2(width, 0.5s, ease-out);
          }
          &:hover {
            &:after {
              left: 0;
              right: auto;
              width: 100%;
            }
          }
          /*&.router-link-active {
              pointer-events: none;
              font-family: $MontserratBold;
              color: $white;
              &:after {
                content: "";
                width: 100%;
                background: $white;
              }
            }*/
        }
      }
    }
  }

  .nav-main-menu-list {
    @include flex-basis(1, 0, calc(80% - 100px));
    padding: 0 15px;
    ul {
      li {
        text-align: center;
        &:not(:first-child) {
          margin-left: 15px;
        }
        a,
        a:focus,
        a:visited,
        a:active {
          position: relative;
          display: inline-block;
          font-family: Roboto;
          font-size: 14px;
          color: $white;
          @include transition;
          &:after {
            content: "";
            position: absolute;
            width: 0;
            background: $background-white;
            height: 1px;
            right: 0;
            bottom: -10px;
            @include transition2(width, 0.5s, ease-out);
          }
          &:hover {
            &:after {
              left: 0;
              right: auto;
              width: 100%;
            }
          }
          /*&.router-link-active {
              pointer-events: none;
              font-family: $MontserratBold;
              color: $white;
              &:after {
                content: "";
                width: 100%;
                background: $white;
              }
            }*/
        }
      }
    }
  }

  .btn-menu {
    color: #ffffff;
    font-family: Roboto;
    font-size: 12px;
    //line-height: 10px;
    margin-top: 40px;
  }

  .main-logo {
    width: 120px;
  }

  .nav-main-logo {
    a,
    a:focus,
    a:visited {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      svg {
        display: block;
        position: relative;
        width: 100px;
        height: 50px;
        z-index: 1;
      }
    }
    img {
      content: url("../assets/images/logo_3x.svg") !important;
      width: 140px !important;
      margin-top: 10px !important;
    }
  }
  .nav-main-logo-wrapper {
    @include flex-basis(1, 1, 50%);
  }

  .nav-main-options {
    width: 40px;
  }

  &.top {
    @include transition2(all, 0.3s, ease-in-out);
    top: -200px;
  }

  //&.scroll,
  &.header-white {
    // background-color: $background-white;
    background-color: #1a2d3f;
    .nav-main-menu-list {
      ul {
        li {
          a,
          a:focus,
          a:visited,
          a:active {
            // color: $black-clear02;
            color: $white;
            &:after {
              // background: $color01;
              background: $color01;
            }
            /*&.router-link-active {
                pointer-events: none;
                font-family: $MontserratBold;
                color: $color01;
                &:after {
                  content: "";
                  width: 100%;
                  background: $color01;
                }
              }*/
          }
          a:hover {
            color: $color01;
          }
        }
      }
    }

    .nav-main-menu-icon {
      svg {
        path {
          fill: $white;
        }
      }
    }

    .nav-main-options-icons {
      &:before {
        background-color: $background-black-clear02;
      }
    }

    .nav-main-menu-option-icon {
      svg {
        path {
          fill: $black-clear02;
        }
      }
    }

    select.languages-desktop {
      color: $black-clear02;
      background: url("../assets/images/chevron-down_black.png") right center/ 15px
        no-repeat;
    }
  }
}

.hometop {
  .nav-main {
    transition: all 0.3s ease-in-out;
    height: 80px;
    background-color: #ffffff!important;
    position: fixed;
    @include transition2(all, 0.2s, ease-in-out);

    .search-link-desktop img {
      content: url("../assets/images/glass-black.png");
    }
    .nav-main-logo img {
      //transition: all 0.3s ease-in-out;
      //content: url("../assets/images/logo-black.png");
      content: url("../assets/images/logo_3x.svg");
      //width: 120px;
      width: 140px;
      margin-top: 10px;
      //margin-left: 15px;
    }

    .search-link-mobile img {
      content: url("../assets/images/glass-black.png");
    }

    .menu-options {

      img {
        transition: all 0.3s ease-in-out;
        //content: url("../assets/images/chevron-down_black.png");
      }

      li:hover {
        background-color: #F1F5F9;


        a {
          color: #475569;
          img {
            transition: all 0.3s ease-in-out;
            //content: url("../assets/images/chevron-down_black.png");
          }

        }
      }

      a {
        color: #475569;
        font-family: "Roboto";
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.9px;
        display: inline-flex;
      }

      .drop-img {
        margin-left: 5px;
      }
    }
  }
}

.top {
  .nav-main {
    transition: all 0.3s ease-in-out;
    height: 80px;
    background-color: #ffffff!important;
    position: fixed;
    @include transition2(all, 0.2s, ease-in-out);

    .search-link-desktop img {
      content: url("../assets/images/glass-black.png");
    }
    .nav-main-logo img {
      //transition: all 0.3s ease-in-out;
      //content: url("../assets/images/logo-black.png");
      content: url("../assets/images/logo_3x.svg");
      //width: 120px;
      width: 140px;
      margin-top: 10px;
      //margin-left: 15px;
    }

    .search-link-mobile img {
      content: url("../assets/images/glass-black.png");
    }

    .menu-options {

      img {
        transition: all 0.3s ease-in-out;
        //content: url("../assets/images/chevron-down_black.png");
      }

      li:hover {
        background-color: #F1F5F9;


        a {
          color: #475569;
          img {
            transition: all 0.3s ease-in-out;
            //content: url("../assets/images/chevron-down_black.png");
          }

        }
      }

      a {
        color: #475569;
        font-family: "Roboto";
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.9px;
        display: inline-flex;
      }

      .drop-img {
        margin-left: 5px;
      }
    }



  }
}
.allways-white {
  .nav-main {

    height: 80px;
    background-color: #ffffff!important;
    position: fixed;
    @include transition2(all, 0.2s, ease-in-out);

    .search-link-desktop img {
      content: url("../assets/images/glass-black.png");
    }
    .nav-main-logo img {
      transition: all 0.3s ease-in-out;
      //content: url("../assets/images/logo-black.png");
      content: url("../assets/images/logo_3x.svg");
      //margin-left: 15px;
      //width: 120px;
      width: 140px;
      margin-top: 10px;
    }

    .search-link-mobile img {
      content: url("../assets/images/glass-black.png");
    }

    .menu-options {

      img {
        transition: all 0.3s ease-in-out;
        //content: url("../assets/images/chevron-down_black.png");
      }

      li:hover {
        background-color: #F1F5F9;


        a {
          color: #475569;
          img {
            transition: all 0.3s ease-in-out;
            //content: url("../assets/images/chevron-down_black.png");
          }

        }
      }

      a {
        color: #475569;
        font-family: "Roboto";
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.9px;
        display: inline-flex;
      }

      .drop-img {
        margin-left: 5px;
      }
    }
  }
}
.back-white {
  border-bottom: 1px solid #F1F5F9!important;
  height: 80px;
  background-color: #ffffff!important;
  position: fixed;
  -webkit-transition: all 0.3s ease-in-out;

  .search-link-desktop img {
    content: url("../assets/images/glass-black.png");
  }
  .nav-main-logo img {
    transition: all 0.3s ease-in-out;
    //content: url("../assets/images/logo-black.png");
    content: url("../assets/images/logo_3x.svg");
  }

  .menu-options {

    img {
      transition: all 0.3s ease-in-out;
      //content: url("../assets/images/chevron-down_black.png");
    }

    li:hover {
      background-color: #F1F5F9;


      a {
        color: #475569;
        img {
          transition: all 0.3s ease-in-out;
          //content: url("../assets/images/chevron-down_black.png");
        }

      }
    }

    a {
      color: #475569;
      font-family: "Roboto";
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.9px;
      display: inline-flex;
    }

    .drop-img {
      margin-left: 5px;
    }
  }
}

// Search Overlay
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;

  &.open {
    opacity: 1;
    visibility: visible;
  }
}

// Search Popup
.search-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 95%;
  max-width: 1200px;
  background: #ffffff;
  border-radius: 0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;

  &.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
  }

  .search-popup-content {
    position: relative;
    padding: 60px 80px;
  }

  .search-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
  }

  .search-popup-title {
    font-family: "Roboto";
    font-size: 24px;
    font-weight: 600;
    color: #1a2d3d;
    margin: 0;
  }

  .search-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;

    &:hover {
      background: #f1f5f9;
    }

    img {
      width: 24px;
      height: 24px;
    }
  }

  .search-popup-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  .search-popup-input {
    width: 100%;
    height: 80px;
    padding: 24px 100px 24px 30px;
    font-family: "Roboto";
    font-size: 22px;
    color: #1a2d3d;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    outline: none;
    transition: all 0.2s ease;

    &:focus {
      border-color: #2563eb;
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
    }

    &::placeholder {
      color: #94a3b8;
    }
  }

  .search-popup-btn {
    position: absolute;
    right: 12px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease;

    &:hover {
      background: #1d4ed8;
    }

    img {
      width: 28px;
      height: 28px;
      filter: brightness(0) invert(1);
    }
  }

  .search-popup-footer {
    margin-top: 30px;
    text-align: center;
  }

  .search-advanced-btn {
    display: inline-block;
    padding: 16px 40px;
    font-family: "Roboto";
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    background: #2563eb;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.2s ease;

    &:hover {
      background: #1d4ed8;
    }
  }

  // Tablet adjustments
  @media (max-width: 992px) {
    .search-popup-content {
      padding: 40px 50px;
    }

    .search-popup-title {
      font-size: 28px;
    }

    .search-popup-input {
      height: 65px;
      font-size: 18px;
    }
  }

  // Mobile adjustments
  @media (max-width: 576px) {
    width: 95%;

    .search-popup-content {
      padding: 25px;
    }

    .search-popup-header {
      margin-bottom: 25px;
    }

    .search-popup-title {
      font-size: 22px;
    }

    .search-popup-close img {
      width: 28px;
      height: 28px;
    }

    .search-popup-input {
      height: 55px;
      font-size: 16px;
      padding: 16px 70px 16px 20px;
    }

    .search-popup-btn {
      width: 45px;
      height: 45px;

      img {
        width: 22px;
        height: 22px;
      }
    }
  }
}

// Hamburger Button
.hamburger-link {
  padding: 0px 6px 0px 6px;
  border-radius: 33px;
  margin: 0 5px;

  &:hover {
    background-color: transparent !important;
  }
}

.hamburger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  .hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18px;
    height: 14px;

    span {
      display: block;
      width: 100%;
      height: 2px;
      background-color: #F1F5F9;
      border-radius: 2px;
      transition: all 0.3s ease;
    }
  }
}

// Hamburger icon color for white backgrounds
.hometop .hamburger-btn .hamburger-icon span,
.top .nav-main .hamburger-btn .hamburger-icon span,
.allways-white .hamburger-btn .hamburger-icon span,
.back-white .hamburger-btn .hamburger-icon span {
  background-color: #475569;
}

// Sidebar Overlay
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;

  &.open {
    opacity: 1;
    visibility: visible;
  }
}

// Sidebar Menu
.sidebar-menu {
  position: fixed;
  top: 0;
  right: -350px;
  width: 350px;
  height: 100%;
  background: #ffffff;
  z-index: 1002;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
  transition: right 0.3s ease-in-out;
  padding-top: 40px;

  &.open {
    right: 0;
  }

  .sidebar-header {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
  }

  .sidebar-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;

    &:hover {
      background: #f1f5f9;
    }

    img {
      width: 24px;
      height: 24px;
    }
  }

  .sidebar-nav {
    padding: 30px 30px 30px 30px;

    ul {
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        margin-bottom: 10px;

        &:last-child {
          margin-bottom: 0;
        }

        a {
          display: block;
          font-family: "Roboto";
          font-size: 14px;
          font-weight: 700;
          letter-spacing: 0.9px;
          color: #1a2d3d;
          text-decoration: none;
          padding: 10px 0;
          border-bottom: 1px solid #e2e8f0;
          transition: color 0.2s ease;

          &:hover {
            color: #2563eb;
          }
        }
      }
    }
  }

  .sidebar-submenu-item {
    .sidebar-submenu-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .sidebar-arrow {
        font-size: 12px;
        transition: transform 0.3s ease;

        &.open {
          transform: rotate(180deg);
        }
      }
    }

    .sidebar-submenu {
      list-style: none;
      padding: 0;
      margin: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;

      &.open {
        max-height: 600px;
      }

      li {
        margin-bottom: 0;

        a {
          font-size: 13px;
          font-weight: 400;
          padding: 6px 0 6px 15px;
          border-bottom: 1px solid #f1f5f9;
        }
      }
    }
  }

  // Mobile adjustments
  @media (max-width: 400px) {
    width: 100%;
    right: -100%;
  }
}

.nav-main {

  z-index: 49;

  .dropdown {
    position: relative;
  }

  .dropdown-menu {
    //display: none; /* Hidden by default */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }

  .dropdown-menu li {
    padding: 8px 16px;
  }

  .dropdown-menu li a {
    color: #000;
    text-decoration: none;
  }

  .dropdown-menu li a:hover {
    background-color: #ddd;
  }

}

.sub-nav-main {
  border-top: 1px solid #F1F5F9!important;
  margin-top: 10px;
  height: 120px;
  display: flex;
  align-items: center;
  background-color: #ffffff !important;
  -webkit-transition: all 0.3s ease-in-out;

  .sub-nav-cars {
    ul {
      align-items: center;
    }

    .sub-menu-options {
      li {

        text-align: center;
      }

      .cars-text {
        font-family: Roboto;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.3px;
      }


      .car-menu-image {
        width: 75px;
      }
      .car-menu-image-2 {
        width: 75px;
      }
      .car-menu-image-3 {
        width: 75px;
      }
      .car-menu-image-4 {
        width: 75px;
      }
      .car-menu-image-5 {
        width: 75px;
      }
      .car-menu-image-6 {
        width: 75px;
      }
      .car-menu-image-7 {
        width: 75px;
      }
      .car-menu-image-8 {
        width: 75px;
      }
      .car-menu-image-9  {
        width: 75px;
      }
      .car-menu-image-10  {
        width: 75px;
      }

      .car-menu-image:hover img {
        transition: 0.3s;
        content: url("../assets/images/car-menu-1-hover.png");
      }

      .car-menu-image-2:hover img {
        transition: 0.3s;
        content: url("../assets/images/car-menu-2-hover.png");
      }
      .car-menu-image-3:hover img {
        transition: 0.3s;
        content: url("../assets/images/car-menu-3-hover.png");
      }
      .car-menu-image-4:hover img {
        transition: 0.3s;
        content: url("../assets/images/car-menu-4-hover.png");
      }
      .car-menu-image-5:hover img {
        transition: 0.3s;
        content: url("../assets/images/car-menu-5-hover.png");
      }
      .car-menu-image-6:hover img {
        transition: 0.3s;
        content: url("../assets/images/car-menu-6-hover.png");
      }
      .car-menu-image-7:hover img {
        transition: 0.3s;
        content: url("../assets/images/car-menu-7-hover.png");
      }
      .car-menu-image-8:hover img {
        transition: 0.3s;
        content: url("../assets/images/car-menu-8-hover.png");
      }
      .car-menu-image-9:hover img {
        transition: 0.3s;
        content: url("../assets/images/car-menu-9-hover.png");
      }
      .car-menu-image-10:hover img {
        transition: 0.3s;
        //content: url("../assets/images/car-menu-10-hover.png");
      }
    }
  }

  .sub-nav-brands {
    ul {
      align-items: center;
      flex-wrap: wrap;
      row-gap: 20px;
    }

    .sub-menu-options {
      li {}

      .brand-menu-image img {
        width: 50px;
      }
      .brand-menu-image-2 img {
        width: 70px;
      }
      .brand-menu-image-3 img {
        width: 70px;
      }
      .brand-menu-image-4 img {
        width: 70px;
      }
      .brand-menu-image-5 img {
        width: 125px;
      }
      .brand-menu-image-6 img {
        width: 125px;
      }
      .brand-menu-image-7 img {
        width: 125px;
      }
      .brand-menu-image-8 img {
        width: 125px;
      }
      .brand-menu-image-8_1 img {
        width: 95px;
        //filter: grayscale(100%);
        //-webkit-filter: grayscale(100%); /* Para compatibilidade com navegadores antigos */
        //transition: filter 0.3s ease-in-out;
      }

      .brand-menu-image-11 img {
        width: 125px;
      }
      .brand-menu-image-12 img {
        width: 125px;
      }
      .brand-menu-image-13 img,
      .brand-menu-image-14 img,
      .brand-menu-image-15 img,
      .brand-menu-image-16 img {
        width: 100px;
      }

      .brand-menu-image-8_2 img {
        width: 95px;
        //filter: grayscale(100%);
        //-webkit-filter: grayscale(100%); /* Para compatibilidade com navegadores antigos */
        //transition: filter 0.3s ease-in-out;
      }
      .brand-menu-image-9 img {
        width: 125px;
        border-radius: 10px;
      }
      .brand-menu-image:hover img {
        transition: 0.3s;
        content: url("../assets/images/vw_hover.png");
      }
      .brand-menu-image-2:hover img {
        transition: 0.3s;
        content: url("../assets/images/audi_hover.png");
      }
      .brand-menu-image-3:hover img {
        transition: 0.3s;
        content: url("../assets/images/seat_hover.png");
      }
      .brand-menu-image-4:hover img {
        transition: 0.3s;
        content: url("../assets/images/skoda_hover.png");
      }
      .brand-menu-image-5:hover img {
        transition: 0.3s;
        content: url("../assets/images/vw_vcomerciais_hover.png");
      }
      .brand-menu-image-6:hover img {
        transition: 0.3s;
        content: url("../assets/images/emaco_hover.png");
      }
      .brand-menu-image-11:hover img {
        transition: 0.3s;
        content: url("../assets/images/forthing_preto.svg");
      }
      .brand-menu-image-12:hover img {
        transition: 0.3s;
        content: url("../assets/images/changan_preto.svg");
      }
      .brand-menu-image-13:hover img {
        transition: 0.3s;
        content: url("../assets/images/xpeng_preto.svg");
      }
      .brand-menu-image-14:hover img {
        transition: 0.3s;
        content: url("../assets/images/geely_preto.svg");
      }
      .brand-menu-image-15:hover img {
        transition: 0.3s;
        content: url("../assets/images/dongfeng_preto.svg");
      }
      .brand-menu-image-16:hover img {
        transition: 0.3s;
        content: url("../assets/images/farizon_preto.svg");
      }
      .brand-menu-image-8:hover img {
        transition: 0.3s;
        content: url("../assets/images/audi_plus_hover.png");
      }
      .brand-menu-image-8_1:hover img {
        transition: 0.3s;
        content: url("../assets/images/emac_auto.png");
      }
      .brand-menu-image-8_2:hover img {
        transition: 0.3s;
        content: url("../assets/images/emac_zome.png");
      }
      .brand-menu-image-9:hover img {
        transition: 0.3s;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      }

      //.brand-menu-image-8_1:hover img {
      //  filter: none;
      //  filter: grayscale(0%);
      //  -webkit-filter: grayscale(0%);
      //}
      //.brand-menu-image-8_2:hover img {
      //  filter: none;
      //  filter: grayscale(0%);
      //  -webkit-filter: grayscale(0%);
      //}







    }
  }

  .sub-nav-workshop {
    ul {
      align-items: center;
    }

    .sub-menu-options {
      li {}

      .workshop-link {
        display: inline-flex;
      }

      .workshop-text {
        font-family: Roboto;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.3px;
      }

      .workshop-menu-image img {
        width: 24px;
        margin-right: 10px;
      }
      .workshop-menu-image-2 img {
        width: 24px;
        margin-right: 10px;
      }

      //.workshop-menu-image:hover img {
      //  transition: 0.3s;
      //  content: url("../assets/images/vw_hover.png");
      //}
      //.workshop-menu-image-2:hover img {
      //  transition: 0.3s;
      //  content: url("../assets/images/audi_hover.png");
      //}
    }
  }

}

.nav-menu-mobile {
  position: fixed;
  top: 70px;
  right: -100%;
  width: 100%;
  height: calc(100vh - 70px);
  padding: 0;
  overflow: hidden auto;
  background-color: $color02;
  @include transition2(all, 0.5s, ease-in-out);
  z-index: 100;
  scroll-behavior: smooth;
  scrollbar-color: $black-clear01 $black;
  scrollbar-width: thin;
  opacity: 0;
  visibility: hidden;
  &::-webkit-scrollbar {
    width: 1px;
  }

  /* Track */
  &::-webkit-scrollbar-track {
    background: transparent;
  }

  /* Handle */
  &::-webkit-scrollbar-thumb {
    background: $black-clear01;
  }
  &::-webkit-scrollbar-thumb:window-inactive {
    background: $black-clear01;
    display: block;
  }
  @media (min-width: 768px) {
    top: 90px;
    height: calc(100vh - 90px);
  }
  @media (min-width: 1199px) {
    right: 0;
    top: 95px;
    height: 0;
  }
  .container-fluid {
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in 150ms;
    & > div {
      height: 100%;
    }
  }
  .footer-social {
    margin: 30px 0 0 0;
    @media (min-width: 768px) {
        margin-top: 0;
    }
  }
  &.open {
    opacity: 1;
    visibility: visible;
    right: 0;
    @media (min-width:1199px) {
      height: calc(100vh - 95px);
    }
    .container-fluid {
      opacity: 1;
      visibility: visible;
    }
  }

  .nav-menu-mobile-footer {
    padding: 20px 0 45px 0;
    .col-12 {
      &:not(:first-child) {
        margin-top: 15px;
      }
    }
    @media (min-width: 768px) {
      padding: 40px 0 80px 0;
      .col-12 {
        &:not(:first-child) {
          margin-top: 0;
        }
        &:nth-child(n + 3) {
          margin-top: 50px;
        }
      }
    }
    @media (min-width: 992px) {
      .col-12 {
        &:nth-child(n + 3) {
          margin-top: 0;
        }
      }

      padding: 80px 0 110px 0;
    }
    position: relative;
    &:before {
      content: "";
      position: absolute;
      width: 100vw;
      height: 100%;
      top: 0;
      left: 50%;
      margin-left: -50vw;
      background-color: rgba($white, 0.1);
    }
  }

  .nav-main-menu {
    .nav-main-menu-icon {
      svg {
        path {
          fill: $white;
        }
      }
    }
  }

  .nav-main-options {
    select.languages-desktop {
      color: $white;
      background: url("../assets/images/chevron-down.png") right center/ 15px
        no-repeat;
    }
    .nav-main-options-icons {
      &:before {
        background-color: $white;
      }
    }
    .nav-main-menu-option-icon {
      svg {
        path {
          fill: $white;
        }
      }
    }
  }

  .nav-main-options-icons {
    &:before {
      background-color: $background-black-clear02;
    }
  }

  .nav-menu-mobile-content {
    padding: 25px 0;
    &.footer {
      padding: 0;
      margin: 0;
    }
    .footer-title {
      position: relative;
      display: inline-block;
      font-family: Roboto;
      text-transform: uppercase;
      font-size: 16px;
      margin-bottom: 10px;
      @media (min-width: 768px) {
        font-size: 20px;
        margin-bottom: 15px;
      }
      @media (min-width: 1199px) {
        font-size: 25px;
      }
      color: $white;
      line-height: 1.3;
    }
    ul {
      li {
        text-align: left;
        &:not(:first-child) {
          margin-top: 20px;
        }
        a,
        a:focus,
        a:visited,
        a:active {
          position: relative;
          display: inline-block;
          font-family: Roboto;
          text-transform: initial;
          font-size: 20px;
          @media (min-width: 768px) {
            font-size: 30px;
          }
          @media (min-width: 1199px) {
            font-size: 40px;
          }
          color: $white;
          line-height: 1.3;
          opacity: 1;
          @include transition;
          &:hover {
            //opacity: 0.5;
            color: #1a2d3d;
          }
        }
      }
    }
    &.footer {
      padding: 0;
      li {
        &:not(:first-child) {
          margin-top: 10px;
        }
        a,
        a:focus,
        a:visited,
        a:active {
          position: relative;
          display: inline-block;
          font-family: Roboto;
          font-size: 14px;
          text-transform: initial;
          @media (min-width: 768px) {
            font-size: 16px;
          }
          @media (min-width: 1199px) {
            font-size: 20px;
          }
          color: $white;
          &:hover {
            color: #1a2d3d;
          }
        }
      }
    }
  }
}

.mini-header-btn-language .dropdown-menu {
  background-color: #475569;
  text-align: center;
  z-index: 50;
  width: 60px;
  margin-left: -15px;

  li.dropdown-item {
    padding: 10px 10px 10px 0px;
    cursor: pointer;
    font-family: Roboto;
    font-size: 14px;
    color: $white;
    margin-top: 5px;
  }

  li.dropdown-item:hover {
    background-color: #2563EB;

  }

}

.nav-main-sell {
  height: 90px;
  padding: 35px 0;
  z-index: 6;
  background-color: #1a2d3f;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  @include transition2(all, 0.2s, ease-in-out);
  .nav-main-menu {
    @include flex-basis(0, 0, auto);
  }
  .nav-main-menu-icon {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    cursor: pointer;
    svg {
      position: absolute;
      top: 50%;
      left:0;
      transform:translateY(-50%);
      width: 30px;
      height: 20px;
      path {
        fill: $white;
      }
    }
  }



  .nav-main-menu-option-icon {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    opacity: 1;
    @include transition;
    svg {
      width: 20px;
      height: 20px;
      path {
        fill: $white;
      }
    }
    &:not(:first-child) {
      margin-left: 15px;
    }
    &:hover {
      opacity: 0.5;
    }
  }

  .nav-second-menu-list {
    padding: 0 15px;
    &.mobile {
      padding: 15px 0;
      position: relative;
      &:before {
        content: "";
        position: absolute;
        width: 100vw;
        height: 100%;
        top: 0;
        left: 50%;
        margin-left: -50vw;
        background-color: $color01;
      }
      ul {
        width: 100%;
        li {
          width: 30%;
          text-align: center;
          &:not(:first-child) {
            margin-left: 15px;
          }
          a,
          a:focus,
          a:visited,
          a:active {
            font-size: 12px;
          }
        }
      }
    }
    ul {
      li {
        text-align: center;
        &:not(:first-child) {
          margin-left: 15px;
        }
        a,
        a:focus,
        a:visited,
        a:active {
          position: relative;
          display: inline-block;
          font-family: Roboto;
          font-size: 14px;
          color: $white;
          @include transition;
          &:after {
            content: "";
            position: absolute;
            width: 0;
            background: $background-white;
            height: 1px;
            right: 0;
            bottom: -10px;
            @include transition2(width, 0.5s, ease-out);
          }
          &:hover {
            &:after {
              left: 0;
              right: auto;
              width: 100%;
            }
          }
          /*&.router-link-active {
              pointer-events: none;
              font-family: $MontserratBold;
              color: $white;
              &:after {
                content: "";
                width: 100%;
                background: $white;
              }
            }*/
        }
      }
    }
  }

  .nav-main-menu-list {
    @include flex-basis(1, 0, calc(80% - 100px));
    padding: 0 15px;
    ul {
      li {
        text-align: center;
        &:not(:first-child) {
          margin-left: 15px;
        }
        a,
        a:focus,
        a:visited,
        a:active {
          position: relative;
          display: inline-block;
          font-family: Roboto;
          font-size: 14px;
          color: $white;
          @include transition;
          &:after {
            content: "";
            position: absolute;
            width: 0;
            background: $background-white;
            height: 1px;
            right: 0;
            bottom: -10px;
            @include transition2(width, 0.5s, ease-out);
          }
          &:hover {
            &:after {
              left: 0;
              right: auto;
              width: 100%;
            }
          }
          /*&.router-link-active {
              pointer-events: none;
              font-family: $MontserratBold;
              color: $white;
              &:after {
                content: "";
                width: 100%;
                background: $white;
              }
            }*/
        }
      }
    }
  }

  .btn-menu {
    color: #ffffff;
    font-family: Roboto;
    font-size: 12px;
    line-height: 20px;
  }

  .nav-main-logo {
    a,
    a:focus,
    a:visited {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      svg {
        display: block;
        position: relative;
        width: 100px;
        height: 50px;
        z-index: 1;
      }
    }
  }
  .nav-main-logo-wrapper {
    @include flex-basis(1, 1, 50%);
  }

  .nav-main-options {
    width: 40px;
  }

  &.top {
    @include transition2(all, 0.3s, ease-in-out);
    top: -200px;
  }

  //&.scroll,
  &.header-white {
    // background-color: $background-white;
    background-color: #1a2d3f;
    .nav-main-menu-list {
      ul {
        li {
          a,
          a:focus,
          a:visited,
          a:active {
            // color: $black-clear02;
            color: $white;
            &:after {
              // background: $color01;
              background: $color01;
            }
            /*&.router-link-active {
                pointer-events: none;
                font-family: $MontserratBold;
                color: $color01;
                &:after {
                  content: "";
                  width: 100%;
                  background: $color01;
                }
              }*/
          }
          a:hover {
            color: $color01;
          }
        }
      }
    }

    .nav-main-menu-icon {
      svg {
        path {
          fill: $white;
        }
      }
    }

    .nav-main-options-icons {
      &:before {
        background-color: $background-black-clear02;
      }
    }

    .nav-main-menu-option-icon {
      svg {
        path {
          fill: $black-clear02;
        }
      }
    }

    select.languages-desktop {
      color: $black-clear02;
      background: url("../assets/images/chevron-down_black.png") right center/ 15px
      no-repeat;
    }
  }
}

.nav-menu-mobile-sell {
  position: fixed;
  top: 70px;
  right: -100%;
  width: 100%;
  height: calc(100vh - 70px);
  padding: 0;
  overflow: hidden auto;
  background-color: $color02;
  @include transition2(all, 0.5s, ease-in-out);
  z-index: 100;
  scroll-behavior: smooth;
  scrollbar-color: $black-clear01 $black;
  scrollbar-width: thin;
  opacity: 0;
  visibility: hidden;
  &::-webkit-scrollbar {
    width: 1px;
  }

  /* Track */
  &::-webkit-scrollbar-track {
    background: transparent;
  }

  /* Handle */
  &::-webkit-scrollbar-thumb {
    background: $black-clear01;
  }
  &::-webkit-scrollbar-thumb:window-inactive {
    background: $black-clear01;
    display: block;
  }
  @media (min-width: 768px) {
    top: 90px;
    height: calc(100vh - 90px);
  }
  @media (min-width: 1199px) {
    right: 0;
    top: 95px;
    height: 0;
  }
  .container-fluid {
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in 150ms;
    & > div {
      height: 100%;
    }
  }
  .footer-social {
    margin: 30px 0 0 0;
    @media (min-width: 768px) {
      margin-top: 0;
    }
  }
  &.open {
    opacity: 1;
    visibility: visible;
    right: 0;
    @media (min-width:1199px) {
      height: calc(100vh - 95px);
    }
    .container-fluid {
      opacity: 1;
      visibility: visible;
    }
  }

  .nav-menu-mobile-footer {
    padding: 20px 0 45px 0;
    .col-12 {
      &:not(:first-child) {
        margin-top: 15px;
      }
    }
    @media (min-width: 768px) {
      padding: 40px 0 80px 0;
      .col-12 {
        &:not(:first-child) {
          margin-top: 0;
        }
        &:nth-child(n + 3) {
          margin-top: 50px;
        }
      }
    }
    @media (min-width: 992px) {
      .col-12 {
        &:nth-child(n + 3) {
          margin-top: 0;
        }
      }

      padding: 80px 0 110px 0;
    }
    position: relative;
    &:before {
      content: "";
      position: absolute;
      width: 100vw;
      height: 100%;
      top: 0;
      left: 50%;
      margin-left: -50vw;
      background-color: rgba($white, 0.1);
    }
  }

  .nav-main-menu {
    .nav-main-menu-icon {
      svg {
        path {
          fill: $white;
        }
      }
    }
  }

  .nav-main-options {
    select.languages-desktop {
      color: $white;
      background: url("../assets/images/chevron-down.png") right center/ 15px
      no-repeat;
    }
    .nav-main-options-icons {
      &:before {
        background-color: $white;
      }
    }
    .nav-main-menu-option-icon {
      svg {
        path {
          fill: $white;
        }
      }
    }
  }

  .nav-main-options-icons {
    &:before {
      background-color: $background-black-clear02;
    }
  }

  .nav-menu-mobile-content {
    padding: 25px 0;
    &.footer {
      padding: 0;
      margin: 0;
    }
    .footer-title {
      position: relative;
      display: inline-block;
      font-family: Roboto;
      text-transform: uppercase;
      font-size: 16px;
      margin-bottom: 10px;
      @media (min-width: 768px) {
        font-size: 20px;
        margin-bottom: 15px;
      }
      @media (min-width: 1199px) {
        font-size: 25px;
      }
      color: $white;
      line-height: 1.3;
    }
    ul {
      li {
        text-align: left;
        &:not(:first-child) {
          margin-top: 20px;
        }
        a,
        a:focus,
        a:visited,
        a:active {
          position: relative;
          display: inline-block;
          font-family: Roboto;
          text-transform: initial;
          font-size: 20px;
          @media (min-width: 768px) {
            font-size: 30px;
          }
          @media (min-width: 1199px) {
            font-size: 40px;
          }
          color: $white;
          line-height: 1.3;
          opacity: 1;
          @include transition;
          &:hover {
            opacity: 0.5;
          }
        }
      }
    }
    &.footer {
      padding: 0;
      li {
        &:not(:first-child) {
          margin-top: 10px;
        }
        a,
        a:focus,
        a:visited,
        a:active {
          position: relative;
          display: inline-block;
          font-family: Roboto;
          font-size: 14px;
          text-transform: initial;
          @media (min-width: 768px) {
            font-size: 16px;
          }
          @media (min-width: 1199px) {
            font-size: 20px;
          }
          color: $white;
          &:hover {
            opacity: 0.5;
          }
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .nav-main {
    padding: 15px 0 20px 0;
    max-height: 95px;
    .nav-main-menu {
        @include flex-basis(0, 0, 5%);
      }
    .nav-main-logo {
      a,
      a:focus,
      a:visited {
        svg {
          //width: 225px;
          width: 175px;
          height: 50px;
        }
        &:before {
          width: calc(100% + 50px);
          height: calc(100% + 40px);
          top: -20px;
          left: -25px;
        }
      }
    }
    .nav-main-logo-wrapper {
      @include flex-basis(1, 1, 80%);
    }



    .nav-main-options {
      width: auto;
      @include flex-basis(1, 1, 20%);
    }

    .nav-main-options-icons {
      position: relative;
      margin-right: 20px;
      padding-right: 20px;
      &:before {
        content: "";
        display: none;
        position: absolute;
        width: 1px;
        height: 120%;
        top: -10%;
        right: 0;
        background-color: $background-white;
      }
    }
  }

  .nav-menu-mobile {
    .nav-menu-mobile-content {
      padding: 30px 0;
      ul {
        li {
          &:not(:first-child) {
            margin-top: 40px;
          }
        }
      }
    }
  }
}

@media (max-width: 1680px) {
  .sub-menu-options li {
    margin-right: 15px;
  }
  .sub-nav-main .sub-nav-brands .sub-menu-options .brand-menu-image img {
    width: 40px;
  }
  .sub-nav-main .sub-nav-brands .sub-menu-options .brand-menu-image-2 img {
    width: 60px;
  }
  .sub-nav-main .sub-nav-brands .sub-menu-options .brand-menu-image-3 img {
    width: 60px;
  }
  .sub-nav-main .sub-nav-brands .sub-menu-options .brand-menu-image-4 img {
    width: 60px;
  }
  .sub-nav-main .sub-nav-brands .sub-menu-options .brand-menu-image-5 img {
    width: 115px;
  }
  .sub-nav-main .sub-nav-brands .sub-menu-options .brand-menu-image-6 img {
    width: 115px;
  }
  .sub-nav-main .sub-nav-brands .sub-menu-options .brand-menu-image-7 img {
    width: 145px;
  }
  .sub-nav-main .sub-nav-brands .sub-menu-options .brand-menu-image-8 img {
    width: 115px;
  }

  .sub-nav-main .sub-nav-brands .sub-menu-options .brand-menu-image-11 img {
    width: 145px;
  }
  .sub-nav-main .sub-nav-brands .sub-menu-options .brand-menu-image-12 img {
    width: 145px;
  }
  .sub-nav-main .sub-nav-brands .sub-menu-options .brand-menu-image-13 img,
  .sub-nav-main .sub-nav-brands .sub-menu-options .brand-menu-image-14 img,
  .sub-nav-main .sub-nav-brands .sub-menu-options .brand-menu-image-15 img,
  .sub-nav-main .sub-nav-brands .sub-menu-options .brand-menu-image-16 img {
    width: 90px;
  }

}
@media (min-width: 1199px) {
  .nav-main {
    .nav-main-logo-wrapper {
      @include flex-basis(1, 1, 10%);
    }

    .nav-main-options {
      width: auto;
      @include flex-basis(1, 1, 10%);
    }
  }
  .nav-menu-mobile {
    .nav-menu-mobile-content {
      padding: 30px 0 60px 0;
      ul {
        li {
          &:not(:first-child) {
            margin-top: 50px;
          }
        }
      }
    }
  }
}

@media (min-width: 1680px) {
  .nav-main {
    .nav-main-logo-wrapper {
      @include flex-basis(1, 1, 10%);
    }
    .nav-main-menu-list {
      @include flex-basis(1, 0, calc(75% - 100px));
      ul {
        li {
          &:not(:first-child) {
            margin-left: 25px;
          }
        }
      }
    }
    .nav-main-options {
      width: auto;
      @include flex-basis(1, 1, 10%);
    }
  }
}

@media (max-width: 1000px) {

  .nav-main {
    z-index: 100;
  }

  .nuxt-loading-indicator {
    display: none;
  }

  .nav-main .nav-main-menu-icon svg {
    width: 20px;
    height: 20px;
    left: 5px;
  }

  .allways-white .nav-main .nav-main-logo img {
    //width: 120px;
    width: 140px;
    margin-top: 10px;
  }

  .nav-main .nav-main-logo a svg, .nav-main .nav-main-logo a:focus svg, .nav-main .nav-main-logo a:visited svg {
    width: 100px;
    height: 50px;
  }
  .nav-main .btn-menu {
    font-size: 12px;
    margin-top: 30px;
  }

  .nav-top {
    display: none;
  }
  .nav-main {
    top: 0px;
  }
  .page-cars-list {
    margin-top: 90px!important;
  }
  .page-parts-outlet {
    margin-top: 90px!important;
  }
  .section-7-right-image {
    margin-top: 15px;
  }
}