@font-face {
  font-family: "ITC Avant Garde Gothic";
  src: url("../fonts/ITC Avant Garde Gothic LT Book.ttf") format("truetype");
}
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  font-family: "ITC Avant Garde Gothic", sans-serif;
}

html,
body {
  margin: 0 !important;
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

.btn {
  text-decoration: none;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 100px;
  padding: 8px 24px;
  width: fit-content;
}

a,
button {
  text-decoration: none;
  background: none;
  border: none;
}

input,
textarea {
  outline: none;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #001a41;
  font-size: 16px;
  color: #001a41;
  width: 100%;
  transition: all 0.3s ease;
}
input::placeholder,
textarea::placeholder {
  color: #001a41;
}
input:focus,
textarea:focus {
  border-color: #18bde6;
  box-shadow: 0 0 0 3px rgba(24, 189, 230, 0.3);
}

textarea {
  min-height: 84px;
  resize: none;
}

.input-wrapper {
  position: relative;
  width: 100%;
}
.input-wrapper .input-error-message {
  color: #ef4444 !important;
  font-size: 14px !important;
  display: block !important;
  width: 100% !important;
  clear: both !important;
  line-height: 1.4 !important;
  position: absolute;
  bottom: -20px;
}

.conditional-field-wrapper {
  display: none;
}
.conditional-field-wrapper[style*="display: block"], .conditional-field-wrapper[style*="display:block"] {
  display: block !important;
}

.custom-dropdown {
  position: relative;
  width: 100%;
}
.custom-dropdown .dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  background-color: white;
  border: 1px solid #001a41;
  border-radius: 4px;
  color: #001a41;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: all 0.3s ease;
  height: 100%;
}
.custom-dropdown .dropdown-trigger:hover {
  border-color: #18bde6;
}
.custom-dropdown .dropdown-trigger .dropdown-arrow {
  width: 14px;
  height: 8px;
  transition: transform 0.3s ease;
}
.custom-dropdown .dropdown-trigger .dropdown-arrow.rotated {
  transform: rotate(180deg);
}
.custom-dropdown .dropdown-error-message {
  color: #ef4444 !important;
  font-size: 14px !important;
  display: block !important;
  width: 100% !important;
  clear: both !important;
  line-height: 1.4 !important;
  position: absolute;
  bottom: -20px;
}
.custom-dropdown .dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #001a41;
  border-radius: 4px;
  z-index: 99;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  display: none;
}
.custom-dropdown .dropdown-menu.open {
  max-height: 300px;
  overflow-y: auto;
  display: block;
}
.custom-dropdown .dropdown-menu .dropdown-item {
  padding: 16px 24px;
  color: #001a41;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid rgba(0, 26, 65, 0.1);
}
.custom-dropdown .dropdown-menu .dropdown-item:last-child {
  border-bottom: none;
}
.custom-dropdown .dropdown-menu .dropdown-item:hover {
  background-color: rgba(24, 189, 230, 0.1);
}
.custom-dropdown .dropdown-menu .dropdown-item.selected {
  background-color: #18bde6;
  color: white;
  font-weight: 500;
}
.custom-dropdown .dropdown-menu .dropdown-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.custom-dropdown .dropdown-menu .dropdown-item.disabled:hover {
  background-color: transparent;
}

.navbar {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  background-color: #001a41;
  z-index: 1000;
}
.navbar .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to top, #001a41 1px, #18bde6 1px);
}
.navbar .top svg {
  height: 100%;
}
.navbar .top svg.desktop {
  display: none;
}
@media (min-width: 768px) {
  .navbar .top svg.desktop {
    display: flex;
  }
  .navbar .top svg.mobile {
    display: none;
  }
}
.navbar .top .magnifying-glass {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5%;
  gap: 24px;
  cursor: pointer;
}
.navbar .top .magnifying-glass span {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  color: #001a41;
  display: none;
}
@media (min-width: 768px) {
  .navbar .top .magnifying-glass span {
    display: flex;
  }
}
.navbar .top .magnifying-glass:hover {
  opacity: 0.8;
}
.navbar .nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
  width: 100%;
}
.navbar .nav-wrapper .icon {
  bottom: 24px;
  position: relative;
}
.navbar .nav-wrapper .desktop-menu {
  display: none;
}
@media (min-width: 769px) {
  .navbar .nav-wrapper .desktop-menu {
    display: flex;
    gap: 60px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }
  .navbar .nav-wrapper .desktop-menu li a {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    color: white;
  }
  .navbar .nav-wrapper .desktop-menu li.current-menu-item a {
    font-weight: 700;
  }
}
.navbar .nav-wrapper .hamburger-menu {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 30px;
  border: none;
  background: none;
  padding: 0;
  z-index: 1100;
  order: 1;
  display: flex;
}
@media (min-width: 768px) {
  .navbar .nav-wrapper .hamburger-menu {
    display: none;
  }
}
.navbar .nav-wrapper .hamburger-menu .bar {
  width: 30px;
  height: 3px;
  background: white;
  border-radius: 2px;
  margin: 3px 0;
  transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  display: block;
}
.navbar .nav-wrapper .hamburger-menu.active .bar1 {
  transform: rotate(45deg) translate(6px, 6px);
}
.navbar .nav-wrapper .hamburger-menu.active .bar2 {
  opacity: 0;
  transform: translateX(-20px);
}
.navbar .nav-wrapper .hamburger-menu.active .bar3 {
  transform: rotate(-45deg) translate(7px, -7px);
}
.navbar .navbar-menu {
  display: flex;
  position: absolute;
  margin: 0;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  z-index: 1000;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  list-style-type: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 -4px 6px rgba(0, 0, 0, 0.1);
}
@media (min-width: 769px) {
  .navbar .navbar-menu {
    display: none;
  }
}
.navbar .navbar-menu li {
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid #18bde6;
  background-color: white;
  transition: background-color 0.3s ease;
}
.navbar .navbar-menu li:last-child {
  border-bottom: none;
}
.navbar .navbar-menu li a {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  width: 100%;
  display: block;
  color: #001a41;
  padding: 0 5%;
  position: relative;
  transition: color 0.2s ease;
  text-transform: uppercase;
}
.navbar .navbar-menu li a::after {
  content: "";
  position: absolute;
  right: 5%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #9b9b9b;
  border-right: 2px solid #9b9b9b;
  transform-origin: center center;
  transform: translate3d(0, -50%, 0) rotate(45deg);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms ease, opacity 180ms ease;
  will-change: transform, opacity;
}
.navbar .navbar-menu li a:hover, .navbar .navbar-menu li a:focus-visible {
  color: #001a41;
}
.navbar .navbar-menu li a:hover::after, .navbar .navbar-menu li a:focus-visible::after {
  border-top-color: #18bde6;
  border-right-color: #18bde6;
  transform: translate3d(12px, -50%, 0) rotate(45deg) scale(1.04);
  opacity: 1;
}
.navbar .navbar-menu li a::after {
  opacity: 0.95;
}
@media (prefers-reduced-motion: reduce) {
  .navbar .navbar-menu li a::after {
    transition: none;
    transform: translate3d(0, -50%, 0) rotate(45deg);
  }
}
.navbar .navbar-menu.active {
  max-height: fit-content;
  opacity: 1;
  overflow: visible;
}

.search-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.search-modal.active {
  display: flex;
}
.search-modal .search-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 26, 65, 0.85);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
}
.search-modal .search-modal-content {
  position: relative;
  background: white;
  border-radius: 16px;
  padding: 32px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
  z-index: 10001;
}
@media (max-width: 768px) {
  .search-modal .search-modal-content {
    padding: 24px;
    max-width: 100%;
  }
}
.search-modal .search-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #001a41;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border-radius: 50%;
}
.search-modal .search-modal-close:hover {
  background-color: rgba(0, 26, 65, 0.1);
  transform: rotate(90deg);
}
.search-modal .search-modal-close svg {
  width: 24px;
  height: 24px;
}
.search-modal .search-modal-header {
  margin-bottom: 24px;
}
.search-modal .search-modal-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: #001a41;
  margin-bottom: 8px;
}
@media (max-width: 768px) {
  .search-modal .search-modal-header h2 {
    font-size: 24px;
  }
}
.search-modal .search-modal-header p {
  font-size: 14px;
  color: #6b7280;
}
.search-modal .search-modal-form {
  margin-bottom: 24px;
}
.search-modal .search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 50px;
  padding: 4px 4px 4px 20px;
  transition: all 0.3s ease;
}
.search-modal .search-input-wrapper:focus-within {
  border-color: #18bde6;
  box-shadow: 0 0 0 4px rgba(24, 189, 230, 0.1);
}
.search-modal .search-input-wrapper .search-input-icon {
  flex-shrink: 0;
  color: #9ca3af;
  width: 20px;
  height: 20px;
}
.search-modal .search-input-wrapper input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  color: #001a41;
  padding: 12px 8px;
  background: transparent;
}
.search-modal .search-input-wrapper input::placeholder {
  color: #9ca3af;
}
.search-modal .search-input-wrapper input:focus {
  box-shadow: none !important;
}
.search-modal .search-input-wrapper .search-submit-btn {
  flex-shrink: 0;
  background: #001a41;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.search-modal .search-input-wrapper .search-submit-btn:hover {
  background: rgb(0, 46.4, 116);
  transform: scale(1.02);
}
@media (max-width: 768px) {
  .search-modal .search-input-wrapper .search-submit-btn {
    padding: 12px 20px;
    font-size: 14px;
  }
}
.search-modal .search-suggestions .suggestions-title {
  font-size: 14px;
  font-weight: 600;
  color: #001a41;
  margin-bottom: 12px;
}
.search-modal .search-suggestions .suggestions-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-modal .search-suggestions .suggestions-tags .suggestion-tag {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  color: #001a41;
  cursor: pointer;
  transition: all 0.2s ease;
}
.search-modal .search-suggestions .suggestions-tags .suggestion-tag:hover {
  background: #18bde6;
  border-color: #18bde6;
  color: #001a41;
  transform: translateY(-2px);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-banner {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-height, 72px));
  display: block;
  overflow: hidden;
}
.hero-banner .decoration {
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  left: 0;
  bottom: 27px;
  z-index: 5;
}
@media (min-width: 768px) {
  .hero-banner .decoration {
    display: none;
  }
}
.hero-banner svg {
  display: none;
}
@media (min-width: 768px) {
  .hero-banner svg {
    display: flex;
    position: absolute;
    bottom: 18px;
    z-index: 5;
  }
}
.hero-banner .swiper-wrapper {
  height: 100%;
}
.hero-banner .swiper-wrapper .swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-banner .swiper-wrapper .swiper-slide .mobile-only {
  display: block;
}
@media (min-width: 480px) {
  .hero-banner .swiper-wrapper .swiper-slide .mobile-only {
    display: none;
  }
}
.hero-banner .swiper-wrapper .swiper-slide .tablet-only {
  display: none;
}
@media (min-width: 480px) and (max-width: 1080px) {
  .hero-banner .swiper-wrapper .swiper-slide .tablet-only {
    display: block;
  }
}
.hero-banner .swiper-wrapper .swiper-slide .desktop-only {
  display: none;
}
@media (min-width: 1081px) {
  .hero-banner .swiper-wrapper .swiper-slide .desktop-only {
    display: block;
  }
}
.hero-banner .swiper-wrapper .swiper-slide .slide-image,
.hero-banner .swiper-wrapper .swiper-slide .slide-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-banner .swiper-wrapper .swiper-slide .slide-video {
  z-index: 2;
}
.hero-banner .swiper-wrapper .swiper-slide .btn {
  position: absolute;
  background: #18bde6;
  color: #001a41;
  z-index: 9;
  bottom: 51px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
@media (min-width: 768px) {
  .hero-banner .swiper-wrapper .swiper-slide .btn {
    top: 10%;
    left: 5%;
    bottom: auto;
    transform: none;
  }
}
.hero-banner .swiper-wrapper .swiper-slide .hero-overlay {
  position: relative;
  z-index: 6;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  align-items: center;
  width: 100%;
}
.hero-banner .swiper-wrapper .swiper-slide .hero-overlay .hero-cta {
  position: absolute;
  background: #18bde6;
  color: #001a41;
  z-index: 9;
  bottom: 51px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
@media (min-width: 768px) {
  .hero-banner .swiper-wrapper .swiper-slide .hero-overlay .hero-cta {
    top: 10%;
    left: 5%;
    bottom: auto;
    transform: none;
  }
}
.hero-banner .swiper-wrapper .swiper-slide img.hero-img,
.hero-banner .swiper-wrapper .swiper-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-banner .swiper-wrapper .swiper-slide video.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-banner .swiper-wrapper .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(270deg, rgba(0, 26, 65, 0) 59.76%, rgba(0, 26, 65, 0.5) 91.11%);
}
.hero-banner .navigation {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 5%;
  z-index: 9;
}
@media (min-width: 768px) {
  .hero-banner .navigation {
    top: auto;
    right: 5%;
    bottom: 5%;
    left: auto;
    transform: none;
    padding: 0;
    width: fit-content;
    gap: 16px;
  }
}
.hero-banner .navigation .swiper-button-next,
.hero-banner .navigation .swiper-button-prev {
  position: relative;
  left: unset;
  right: unset;
  top: unset;
  margin: 0;
  background-color: #001a41;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  color: white;
}
.hero-banner .navigation .swiper-button-next::after,
.hero-banner .navigation .swiper-button-prev::after {
  font-size: 20px;
  font-weight: bold;
}
.hero-banner .navigation .swiper-button-next.swiper-button-disabled,
.hero-banner .navigation .swiper-button-prev.swiper-button-disabled {
  background: #374650;
  opacity: 1;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px 5% 40px;
  /* Desktop-only: embed the decorative SVG to the right and lift the container up */
}
@media (min-width: 768px) {
  .filters {
    padding: 0;
  }
}
.filters .up {
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (min-width: 768px) {
  .filters .up {
    transform: translateY(-131px);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='608' height='131' viewBox='0 0 608 131' fill='none'><path d='M608 131C575.845 131 545.363 115.038 526.569 88.9468L504.403 58.1744C478.093 21.647 435.822 0 390.805 0H-1V131H608Z' fill='white'/></svg>");
    background-repeat: no-repeat;
    background-position: left bottom;
    z-index: 10;
    background-color: transparent;
    background-size: contain;
    height: 100%;
    padding: 52px 5% 7px 5%;
    margin: 0 0 -131px 0;
    width: 609px;
    height: 131px;
  }
}
.filters .up h1 {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #18bde6;
}
@media (min-width: 768px) {
  .filters .up h1 {
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}
.filters .up p {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #001a41;
}
@media (min-width: 768px) {
  .filters .up p {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}
.filters form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .filters form {
    gap: 40px;
    padding: 0 5% 100px 5%;
  }
}
@media (min-width: 1024px) {
  .filters form {
    flex-direction: row;
  }
}
.filters form button {
  background-color: #001a41;
  color: white;
}
.filters form button span {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.brands {
  gap: 24px;
  padding: 24px 5%;
  align-items: center;
  justify-content: center;
  display: flex;
  position: relative;
  /* Mobile placement: 3 - 5 - 3 - 5 pattern using an 8-item cycle */
  /* Desktop placement: map items into a 3-5-3 visual pattern using a 5-column grid.
     Pattern repeats every 11 items (3 + 5 + 3 = 11). Mobile remains flex-based above. */
}
@media (min-width: 768px) {
  .brands {
    padding: 40px 5% 24px 5%;
  }
}
.brands .bg {
  display: none;
}
@media (min-width: 768px) {
  .brands .bg {
    display: flex;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
.brands .content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  row-gap: 24px;
  align-items: center;
  max-width: 600px;
  width: 100%;
}
@media (min-width: 768px) {
  .brands .content {
    gap: 40px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    justify-items: center;
    column-gap: 40px;
    row-gap: 40px;
  }
}
.brands .content a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  /* grid children: take full column width and center content */
  width: 100%;
  justify-self: center;
  min-height: 48px;
}
.brands .content a.brand {
  /* Default: prefer mask-based recolor when supported. We'll use @supports to handle both cases. */
  transition: background-color 200ms ease, transform 180ms ease;
  /* Mask-based coloring (preferred). Set background-color only and use the image as a mask so the icon is painted with the background color. */
  background-color: #001a41;
  -webkit-mask-image: var(--logo);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--logo);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  /* Fallback for browsers without mask support: show the image as background and keep the <img> visible. */
  /* by default keep the <img> visually available; we'll hide it in supported browsers using @supports */
  /* When the browser supports mask-image, hide the <img> (keeps alt text for screen readers) */
}
@supports not (-webkit-mask-image: none) {
  .brands .content a.brand {
    /* no-op here; we'll override below with a negative support clause */
  }
}
.brands .content a.brand img {
  display: block;
  max-height: 32px;
  width: auto;
  height: auto;
  height: 100%;
}
@supports (-webkit-mask-image: none) or (mask-image: none) {
  .brands .content a.brand img {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}
.brands .content a.brand:hover, .brands .content a.brand:focus-visible {
  background-color: #18bde6;
}
.brands .content a img {
  max-height: 32px;
  width: auto;
  height: auto;
  display: block;
}
.brands a:nth-child(8n+1) {
  grid-column: 2;
}
.brands a:nth-child(8n+2) {
  grid-column: 3;
}
.brands a:nth-child(8n+3) {
  grid-column: 4;
}
.brands a:nth-child(8n+4) {
  grid-column: 1;
}
.brands a:nth-child(8n+5) {
  grid-column: 2;
}
.brands a:nth-child(8n+6) {
  grid-column: 3;
}
.brands a:nth-child(8n+7) {
  grid-column: 4;
}
.brands a:nth-child(8n+8) {
  grid-column: 5;
}
@media (min-width: 768px) {
  .brands {
    /* Row 1: 3 items centered -> place them in columns 2,3,4 */
    /* Row 2: 5 items full width across columns 1..5 */
    /* Row 3: 3 items centered -> place them in columns 2,3,4 */
    /* ensure logos inside cells are centered */
  }
  .brands a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px 0;
  }
  .brands a:nth-child(11n+1) {
    grid-column: 2;
  }
  .brands a:nth-child(11n+2) {
    grid-column: 3;
  }
  .brands a:nth-child(11n+3) {
    grid-column: 4;
  }
  .brands a:nth-child(11n+4) {
    grid-column: 1;
  }
  .brands a:nth-child(11n+5) {
    grid-column: 2;
  }
  .brands a:nth-child(11n+6) {
    grid-column: 3;
  }
  .brands a:nth-child(11n+7) {
    grid-column: 4;
  }
  .brands a:nth-child(11n+8) {
    grid-column: 5;
  }
  .brands a:nth-child(11n+9) {
    grid-column: 2;
  }
  .brands a:nth-child(11n+10) {
    grid-column: 3;
  }
  .brands a:nth-child(11n+11) {
    grid-column: 4;
  }
  .brands a img {
    max-height: 48px;
  }
}

.renew {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 5%;
}
@media (min-width: 768px) {
  .renew {
    padding: 40px 5% 100px 5%;
    gap: 40px;
  }
}
.renew .up {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
@media (min-width: 768px) {
  .renew .up {
    gap: 40px;
  }
}
.renew .up .invitation {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: #001a41;
}
@media (min-width: 768px) {
  .renew .up .invitation {
    gap: 24px;
  }
}
.renew .up .invitation p {
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.renew .up .invitation h2 {
  text-align: center;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
@media (min-width: 768px) {
  .renew .up .invitation h2 {
    text-align: center;
    font-size: 64px;
    font-style: normal;
    font-weight: 700;
    line-height: 72px;
  }
}
.renew .up a {
  background-color: #18bde6;
  color: #001a41;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.renew .renew-swiper {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
@media (min-width: 768px) {
  .renew .renew-swiper {
    padding: 0;
  }
}
.renew .renew-swiper .swiper-wrapper {
  display: flex;
}
.renew .renew-swiper .swiper-wrapper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}
.renew .renew-swiper .swiper-wrapper .swiper-slide .img-container {
  position: relative;
  aspect-ratio: 411/252;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid transparent;
}
.renew .renew-swiper .swiper-wrapper .swiper-slide .img-container .car-frame {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 411/252;
  object-fit: cover;
  border-radius: 24px;
}
.renew .renew-swiper .swiper-wrapper .swiper-slide .img-container .more-info {
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg width='89' height='90' viewBox='0 0 89 90' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M89 90H0C16.5685 90 29.9999 76.3165 30 59.748C30 43.7103 42.7979 30.4213 58.7383 30.0098L60.2617 29.9902C76.2021 29.5862 89 16.5377 89 0.5V90Z' fill='white'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 89px;
  aspect-ratio: 89/90;
}
.renew .renew-swiper .swiper-wrapper .swiper-slide .img-container .more-info a {
  height: 48px;
  width: 48px;
  position: absolute;
  right: 2px;
  bottom: 0;
  background-color: #374650;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.renew .renew-swiper .swiper-wrapper .swiper-slide .content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0 16px 16px;
  width: 100%;
}
.renew .renew-swiper .swiper-wrapper .swiper-slide .content .up {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.renew .renew-swiper .swiper-wrapper .swiper-slide .content .up .price {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #18bde6;
}
.renew .renew-swiper .swiper-wrapper .swiper-slide .content .up a {
  color: #001a41;
  background-color: #18bde6;
}
.renew .renew-swiper .swiper-wrapper .swiper-slide .content h3 {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #001a41;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
}
.renew .renew-swiper .swiper-wrapper .swiper-slide .content h3 span {
  max-width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
}
.renew .renew-swiper .swiper-wrapper .swiper-slide .content .items {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.renew .renew-swiper .swiper-wrapper .swiper-slide .content .items span {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: #001a41;
}
.renew .renew-swiper .swiper-wrapper .swiper-slide .content.sustainable .up .price {
  color: #b7d100;
}
.renew .renew-swiper .swiper-wrapper .swiper-slide .content.sustainable .up .btn {
  background-color: #b7d100;
}
.renew .renew-swiper .swiper-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  position: relative;
}
.renew .renew-swiper .swiper-navigation .swiper-button-next,
.renew .renew-swiper .swiper-navigation .swiper-button-prev {
  position: relative;
  left: unset;
  right: unset;
  top: unset;
  margin: 0;
  background-color: #18bde6;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  color: white;
}
.renew .renew-swiper .swiper-navigation .swiper-button-next::after,
.renew .renew-swiper .swiper-navigation .swiper-button-prev::after {
  font-size: 20px;
  font-weight: bold;
}
.renew .renew-swiper .swiper-navigation .swiper-button-next.swiper-button-disabled,
.renew .renew-swiper .swiper-navigation .swiper-button-prev.swiper-button-disabled {
  background: #374650;
  opacity: 1;
}

.assess {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 5%;
  background-color: #18bde6;
}
.assess .message {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.assess .message p {
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: #001a41;
}
.assess .message h2 {
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  color: #001a41;
}
@media (min-width: 768px) {
  .assess .message h2 {
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}
.assess .buttons {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.assess .buttons .btn {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.assess .buttons .btn:first-child {
  background-color: #ebedee;
  color: #001a41;
}
.assess .buttons .btn:last-child {
  background-color: #001a41;
  color: white;
}

.reasons {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 80px 5%;
  position: relative;
}
.reasons .bg {
  display: none;
}
@media (min-width: 768px) {
  .reasons .bg {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    object-fit: cover;
    z-index: -1;
    height: 100%;
  }
}
@media (min-width: 768px) {
  .reasons {
    padding: 100px 5%;
  }
}
.reasons .up {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
}
.reasons .up h2 {
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  color: #18bde6;
}
@media (min-width: 768px) {
  .reasons .up h2 {
    font-weight: 700;
    font-style: Bold;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
  }
}
.reasons .up p {
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: lowercase;
  color: #001a41;
}
@media (min-width: 768px) {
  .reasons .up p {
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    text-transform: lowercase;
  }
}
.reasons .reasons-swiper {
  display: flex;
  width: 100%;
}
.reasons .reasons-swiper .swiper-wrapper {
  display: flex;
  width: 100%;
}
.reasons .reasons-swiper .swiper-wrapper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) {
  .reasons .reasons-swiper .swiper-wrapper .swiper-slide:hover {
    z-index: 999;
  }
  .reasons .reasons-swiper .swiper-wrapper .swiper-slide:hover .element {
    background: #e8f8fc;
  }
  .reasons .reasons-swiper .swiper-wrapper .swiper-slide:hover .element .up,
  .reasons .reasons-swiper .swiper-wrapper .swiper-slide:hover .element p {
    max-width: 100%;
  }
  .reasons .reasons-swiper .swiper-wrapper .swiper-slide:hover .element .up .number,
  .reasons .reasons-swiper .swiper-wrapper .swiper-slide:hover .element p .number {
    color: #001a41;
  }
  .reasons .reasons-swiper .swiper-wrapper .swiper-slide:hover .element .text {
    display: flex;
    color: #001a41;
  }
  .reasons .reasons-swiper .swiper-wrapper .swiper-slide:hover .element .title {
    display: none;
    color: #001a41;
  }
}
.reasons .reasons-swiper .swiper-wrapper .swiper-slide .element {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 446px;
  border-radius: 1000px;
  border: 4px solid rgba(24, 189, 230, 0.1);
  background: linear-gradient(0deg, rgba(24, 189, 230, 0.1) 0%, rgba(24, 189, 230, 0.1) 100%), #fff;
  padding: 7vw;
  transition: transform 200ms ease, background 200ms ease;
}
@media (min-width: 768px) {
  .reasons .reasons-swiper .swiper-wrapper .swiper-slide .element {
    padding: 43px;
  }
}
@media (min-width: 1024px) {
  .reasons .reasons-swiper .swiper-wrapper .swiper-slide .element {
    background: transparent;
  }
}
.reasons .reasons-swiper .swiper-wrapper .swiper-slide .element .up {
  display: flex;
  flex-direction: row;
  gap: 8;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) {
  .reasons .reasons-swiper .swiper-wrapper .swiper-slide .element .up {
    max-width: 45%;
  }
}
.reasons .reasons-swiper .swiper-wrapper .swiper-slide .element .up .number {
  text-align: center;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 72px;
  color: #001a41;
}
@media (min-width: 1024px) {
  .reasons .reasons-swiper .swiper-wrapper .swiper-slide .element .up .number {
    color: #18bde6;
  }
}
.reasons .reasons-swiper .swiper-wrapper .swiper-slide .element .up .icon {
  aspect-ratio: 1/1;
  max-height: 64px;
  max-width: 64px;
}
.reasons .reasons-swiper .swiper-wrapper .swiper-slide .element .title {
  display: none;
}
@media (min-width: 1024px) {
  .reasons .reasons-swiper .swiper-wrapper .swiper-slide .element .title {
    display: flex;
    max-width: 45%;
    color: #18bde6;
  }
}
.reasons .reasons-swiper .swiper-wrapper .swiper-slide .element .text {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: #001a41;
}
@media (min-width: 1024px) {
  .reasons .reasons-swiper .swiper-wrapper .swiper-slide .element .text {
    display: none;
    max-width: 45%;
    color: #18bde6;
  }
}
.reasons .swiper-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  position: relative;
}
.reasons .swiper-navigation .swiper-button-next,
.reasons .swiper-navigation .swiper-button-prev {
  position: relative;
  left: unset;
  right: unset;
  top: unset;
  margin: 0;
  background-color: #18bde6;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  color: white;
}
.reasons .swiper-navigation .swiper-button-next::after,
.reasons .swiper-navigation .swiper-button-prev::after {
  font-size: 20px;
  font-weight: bold;
}
.reasons .swiper-navigation .swiper-button-next.swiper-button-disabled,
.reasons .swiper-navigation .swiper-button-prev.swiper-button-disabled {
  background: #374650;
  opacity: 1;
}

.featured {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 5%;
  background-color: #001a41;
  position: relative;
}
.featured .bg {
  display: none;
}
@media (min-width: 768px) {
  .featured .bg {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    object-fit: cover;
    z-index: 1;
    height: 100%;
  }
}
@media (min-width: 768px) {
  .featured {
    padding: 100px 5%;
  }
}
.featured .up {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  z-index: 2;
}
.featured .up h2 {
  text-align: center;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #f2e400;
}
@media (min-width: 768px) {
  .featured .up h2 {
    text-align: center;
    font-size: 64px;
    font-style: normal;
    font-weight: 700;
    line-height: 72px;
  }
}
.featured .featured-swiper {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.featured .featured-swiper .swiper-wrapper {
  display: flex;
}
.featured .featured-swiper .swiper-wrapper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}
.featured .featured-swiper .swiper-wrapper .swiper-slide .img-container {
  position: relative;
  aspect-ratio: 411/252;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid transparent;
}
.featured .featured-swiper .swiper-wrapper .swiper-slide .img-container .car-frame {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 411/252;
  object-fit: cover;
  border-radius: 24px;
}
.featured .featured-swiper .swiper-wrapper .swiper-slide .img-container .more-info {
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg width='89' height='90' viewBox='0 0 89 90' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M89 90H0C16.5685 90 29.9999 76.3165 30 59.748C30 43.7103 42.7979 30.4213 58.7383 30.0098L60.2617 29.9902C76.2021 29.5862 89 16.5377 89 0.5V90Z' fill='%23001A41'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 89px;
  aspect-ratio: 89/90;
}
.featured .featured-swiper .swiper-wrapper .swiper-slide .img-container .more-info a {
  height: 48px;
  width: 48px;
  position: absolute;
  right: 2px;
  bottom: 0;
  background-color: #374650;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.featured .featured-swiper .swiper-wrapper .swiper-slide .content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0 16px 16px;
  width: 100%;
}
.featured .featured-swiper .swiper-wrapper .swiper-slide .content .up {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.featured .featured-swiper .swiper-wrapper .swiper-slide .content .up .price {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #f2e400;
}
.featured .featured-swiper .swiper-wrapper .swiper-slide .content .up a {
  color: #001a41;
  background-color: #f2e400;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.featured .featured-swiper .swiper-wrapper .swiper-slide .content h3 {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
}
.featured .featured-swiper .swiper-wrapper .swiper-slide .content .items {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.featured .featured-swiper .swiper-wrapper .swiper-slide .content .items span {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: white;
}
.featured .featured-swiper .swiper-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  position: relative;
}
.featured .featured-swiper .swiper-navigation .swiper-button-next,
.featured .featured-swiper .swiper-navigation .swiper-button-prev {
  position: relative;
  left: unset;
  right: unset;
  top: unset;
  margin: 0;
  background-color: #18bde6;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  color: white;
}
.featured .featured-swiper .swiper-navigation .swiper-button-next::after,
.featured .featured-swiper .swiper-navigation .swiper-button-prev::after {
  font-size: 20px;
  font-weight: bold;
}
.featured .featured-swiper .swiper-navigation .swiper-button-next.swiper-button-disabled,
.featured .featured-swiper .swiper-navigation .swiper-button-prev.swiper-button-disabled {
  background: #374650;
  opacity: 1;
}

.team {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 5%;
  position: relative;
}
@media (min-width: 768px) {
  .team {
    padding: 100px 5%;
  }
}
.team .bg {
  display: none;
}
@media (min-width: 768px) {
  .team .bg {
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    object-fit: contain;
    z-index: -1;
  }
}
.team .up {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.team .up .message {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 768px) {
  .team .up .message {
    max-width: 45%;
  }
}
.team .up .message h2 {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #18bde6;
}
@media (min-width: 768px) {
  .team .up .message h2 {
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}
.team .up .message p {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: #001a41;
}
.team .up .swiper-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: flex-end;
}
.team .up .swiper-navigation .swiper-button-next,
.team .up .swiper-navigation .swiper-button-prev {
  position: relative;
  left: unset;
  right: unset;
  top: unset;
  margin: 0;
  background-color: #18bde6;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  color: white;
}
.team .up .swiper-navigation .swiper-button-next::after,
.team .up .swiper-navigation .swiper-button-prev::after {
  font-size: 20px;
  font-weight: bold;
}
.team .up .swiper-navigation .swiper-button-next.swiper-button-disabled,
.team .up .swiper-navigation .swiper-button-prev.swiper-button-disabled {
  background: #374650;
  opacity: 1;
}
.team .swiper-container {
  width: 100%;
  position: relative;
  padding-left: 16px;
}
@media (min-width: 768px) {
  .team .swiper-container {
    padding: 0;
    position: unset;
  }
}
.team .swiper-container .decoration {
  position: absolute;
  left: 0;
  top: -12px;
}
@media (min-width: 768px) {
  .team .swiper-container .decoration {
    top: 73px;
    left: calc(5% - 23px);
  }
}
.team .swiper-container .team-swiper {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  border-radius: 16px;
}
.team .swiper-container .team-swiper .swiper-wrapper {
  display: flex;
}
.team .swiper-container .team-swiper .swiper-wrapper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  overflow: hidden;
}
.team .swiper-container .team-swiper .swiper-wrapper .swiper-slide .img-container {
  position: relative;
  border-radius: 16px;
  aspect-ratio: 308/252;
  border: 1px solid transparent;
  border-radius: 24px;
}
.team .swiper-container .team-swiper .swiper-wrapper .swiper-slide .img-container .person-frame {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 308/252;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid transparent;
}
.team .swiper-container .team-swiper .swiper-wrapper .swiper-slide .img-container .more-info {
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg width='89' height='90' viewBox='0 0 89 90' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M89 90H0C16.5685 90 29.9999 76.3165 30 59.748C30 43.7103 42.7979 30.4213 58.7383 30.0098L60.2617 29.9902C76.2021 29.5862 89 16.5377 89 0.5V90Z' fill='white'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 89px;
  aspect-ratio: 89/90;
}
.team .swiper-container .team-swiper .swiper-wrapper .swiper-slide .img-container .more-info a {
  height: 48px;
  width: 48px;
  position: absolute;
  right: 2px;
  bottom: 0;
  background-color: #18bde6;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team .swiper-container .team-swiper .swiper-wrapper .swiper-slide .content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0 16px 16px;
  width: 100%;
  color: #001a41;
}
.team .swiper-container .team-swiper .swiper-wrapper .swiper-slide .content .name {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.team .swiper-container .team-swiper .swiper-wrapper .swiper-slide .content .role {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.discover {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 5%;
  background-color: #ebedee;
  align-items: center;
  position: relative;
}
@media (min-width: 768px) {
  .discover {
    padding: 48px 5%;
  }
}
.discover .bg1 {
  display: none;
}
@media (min-width: 768px) {
  .discover .bg1 {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 1;
    height: 100%;
  }
}
.discover .bg2 {
  display: none;
}
@media (min-width: 768px) {
  .discover .bg2 {
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    object-fit: contain;
    z-index: 1;
  }
}
.discover .up {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
@media (min-width: 768px) {
  .discover .up {
    max-width: 70%;
  }
}
.discover .up h2 {
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #001a41;
}
@media (min-width: 768px) {
  .discover .up h2 {
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}
.discover .up h3 {
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: black;
}
@media (min-width: 768px) {
  .discover .up h3 {
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
}
.discover a {
  background-color: #18bde6;
  color: #001a41;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.faq {
  padding: 24px 5%;
  background-color: #18bde6;
  display: flex;
  justify-content: center;
}
@media (min-width: 768px) {
  .faq {
    padding: 40px 5%;
  }
}
.faq .content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 768px) {
  .faq .content {
    max-width: 70%;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
  }
}
.faq .content .message {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #001a41;
}
@media (min-width: 768px) {
  .faq .content .message {
    max-width: 55%;
  }
}
.faq .content .message h2 {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.faq .content .message p {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.faq .content .btn {
  background-color: #001a41;
  color: white;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  align-self: flex-end;
}

.gallery-swiper {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding: 40px 5%;
  align-items: center;
  overflow: hidden;
}
@media (min-width: 768px) {
  .gallery-swiper {
    padding: 100px 5%;
  }
}
.gallery-swiper .decoration-1 {
  display: none;
}
@media (min-width: 768px) {
  .gallery-swiper .decoration-1 {
    display: flex;
    position: absolute;
    left: calc(5% - 16px);
    top: 84px;
  }
}
.gallery-swiper .decoration-2 {
  display: none;
}
@media (min-width: 768px) {
  .gallery-swiper .decoration-2 {
    display: flex;
    position: absolute;
    right: calc(5% - 16px);
    bottom: 84px;
  }
}
.gallery-swiper .swiper-navigation {
  position: relative;
  margin: -60px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  width: 220px;
  z-index: 6;
  padding: 20px 0 0 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg width='200' height='60' viewBox='0 0 200 60' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M170.49 29.2246C170.08 13.0138 156.81 -0.00182537 140.5 -0.00195312H59.5001C42.9316 -0.00195052 29.5003 13.4297 29.5001 29.998C29.5001 46.5666 16.5685 59.998 0 59.998L200 59.999C183.69 59.9989 170.921 46.984 170.51 30.7734L170.49 29.2246Z' fill='white'/></svg>");
}
.gallery-swiper .swiper-navigation .swiper-button-next,
.gallery-swiper .swiper-navigation .swiper-button-prev {
  position: relative;
  margin: 0;
  background-color: #001a41;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-swiper .swiper-navigation .swiper-button-next::after,
.gallery-swiper .swiper-navigation .swiper-button-prev::after {
  font-size: 20px;
  font-weight: bold;
}
.gallery-swiper .swiper-navigation .swiper-button-next.swiper-button-disabled,
.gallery-swiper .swiper-navigation .swiper-button-prev.swiper-button-disabled {
  background: #374650;
  opacity: 1;
}
.gallery-swiper .swiper-wrapper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}
.gallery-swiper .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 473px;
  display: block;
  border-radius: 16px;
  object-fit: cover;
}
.gallery-swiper .swiper-slide {
  position: relative;
  overflow: hidden;
}
.gallery-swiper .swiper-slide .text {
  position: absolute;
  left: 5%;
  bottom: 65px;
  display: flex;
  flex-direction: column;
  color: white;
  z-index: 3;
}
.gallery-swiper .swiper-slide .text h3 {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
@media (min-width: 768px) {
  .gallery-swiper .swiper-slide .text h3 {
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}
.gallery-swiper .swiper-slide .text p {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
@media (min-width: 768px) {
  .gallery-swiper .swiper-slide .text p {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}
.gallery-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-swiper .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(0, 26, 65, 0) 65.86%, #001a41 97.57%);
  mix-blend-mode: normal;
  opacity: 0.95;
}

footer {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px 5%;
}
@media (min-width: 768px) {
  footer {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 48px 5%;
    gap: 0;
  }
}
footer .info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
@media (min-width: 768px) {
  footer .info {
    gap: 40px;
    align-items: flex-start;
  }
}
footer .info a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
footer .info a .icon {
  width: 160px;
}
@media (min-width: 768px) {
  footer .info a .icon {
    width: 210px;
  }
}
footer .info .rrss {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
@media (min-width: 768px) {
  footer .info .rrss {
    align-items: flex-start;
  }
}
footer .info .rrss span {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  color: black;
  text-align: center;
}
@media (min-width: 768px) {
  footer .info .rrss span {
    text-align: left;
  }
}
footer .info .rrss .social-menu {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin: 0;
  padding: 0;
  justify-content: center;
}
@media (min-width: 768px) {
  footer .info .rrss .social-menu {
    gap: 8px;
    justify-content: flex-start;
  }
}
footer .info .rrss .social-menu li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: fit-content;
  position: relative;
}
footer .menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 0;
  align-items: center;
}
@media (min-width: 768px) {
  footer .menu {
    width: fit-content;
    padding: 8px;
    align-items: flex-start;
  }
}
footer .menu span {
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: black;
  text-align: center;
}
@media (min-width: 768px) {
  footer .menu span {
    font-size: 24px;
    text-align: left;
  }
}
footer .menu .internal-menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style-type: none;
  align-items: center;
  width: 100%;
}
@media (min-width: 768px) {
  footer .menu .internal-menu {
    align-items: flex-start;
  }
}
footer .menu .internal-menu li {
  text-align: center;
}
@media (min-width: 768px) {
  footer .menu .internal-menu li {
    text-align: left;
  }
}
footer .menu .internal-menu li.contact-item {
  padding: 4px;
}
footer .menu .internal-menu li span {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: black;
}
footer .menu .internal-menu li a {
  color: black;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.form-contact {
  display: flex;
  flex-direction: column;
  padding: 40px 5%;
  gap: 24px;
  position: relative;
}
.form-contact .bg {
  display: none;
}
@media (min-width: 768px) {
  .form-contact .bg {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    object-fit: contain;
    z-index: -1;
  }
}
@media (min-width: 768px) {
  .form-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 24px;
    padding: 100px 5%;
  }
  .form-contact .title {
    grid-column: 1/-1;
    margin-bottom: 16px;
  }
  .form-contact .title h2 {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  .form-contact .textarea-wrapper {
    grid-column: 1/-1;
  }
  .form-contact .legal-section {
    grid-column: 1/-1;
  }
  .form-contact button {
    grid-column: 1/-1;
    justify-self: start;
  }
}
.form-contact .title {
  display: flex;
  flex-direction: column;
}
.form-contact .title h1 {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #18bde6;
}
@media (min-width: 768px) {
  .form-contact .title h1 {
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}
.form-contact .title h2 {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #001a41;
}
@media (min-width: 768px) {
  .form-contact .title h2 {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}
.form-contact button {
  background-color: #18bde6;
  color: #001a41;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.form-contact .legal-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.form-contact .legal-section .legal-text {
  font-weight: 500;
  line-height: normal;
  font-size: 14px;
  color: #001a41;
  max-height: 65px;
  overflow: scroll;
}
@media (min-width: 768px) {
  .form-contact .legal-section .legal-text {
    max-height: none;
    overflow: auto;
  }
}
.form-contact .legal-section .authorization-options {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-direction: row;
  padding: 0 0 8px 8px;
}
.form-contact .legal-section .authorization-options .radio-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #374650;
  font-weight: 500;
}
.form-contact .legal-section .authorization-options .radio-option input[type=radio] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
}
.form-contact .legal-section .authorization-options .radio-option .checkmark {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: white;
  border: 2px solid #001a41;
  border-radius: 50%;
  margin-right: 8px;
  transition: all 0.3s ease;
}
.form-contact .legal-section .authorization-options .radio-option .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M11.2105 5.91453C11.2628 5.96677 11.3043 6.02881 11.3326 6.0971C11.3609 6.16538 11.3754 6.23858 11.3754 6.3125C11.3754 6.38642 11.3609 6.45962 11.3326 6.5279C11.3043 6.59619 11.2628 6.65823 11.2105 6.71047L7.27297 10.648C7.22073 10.7003 7.15869 10.7418 7.09041 10.7701C7.02212 10.7984 6.94892 10.8129 6.875 10.8129C6.80108 10.8129 6.72789 10.7984 6.6596 10.7701C6.59131 10.7418 6.52928 10.7003 6.47703 10.648L4.78953 8.96047C4.68399 8.85492 4.62469 8.71177 4.62469 8.5625C4.62469 8.41323 4.68399 8.27008 4.78953 8.16453C4.89508 8.05898 5.03824 7.99969 5.1875 7.99969C5.33677 7.99969 5.47992 8.05898 5.58547 8.16453L6.875 9.45477L10.4145 5.91453C10.4668 5.86223 10.5288 5.82074 10.5971 5.79244C10.6654 5.76413 10.7386 5.74956 10.8125 5.74956C10.8864 5.74956 10.9596 5.76413 11.0279 5.79244C11.0962 5.82074 11.1582 5.86223 11.2105 5.91453ZM15.3125 8C15.3125 9.44628 14.8836 10.8601 14.0801 12.0626C13.2766 13.2651 12.1346 14.2024 10.7984 14.7559C9.46219 15.3093 7.99189 15.4541 6.57341 15.172C5.15492 14.8898 3.85196 14.1934 2.82928 13.1707C1.80661 12.148 1.11017 10.8451 0.828011 9.4266C0.545857 8.00811 0.690668 6.53781 1.24413 5.20163C1.7976 3.86544 2.73486 2.72339 3.9374 1.91988C5.13993 1.11637 6.55373 0.6875 8 0.6875C9.93877 0.689547 11.7975 1.46063 13.1685 2.83154C14.5394 4.20246 15.3105 6.06123 15.3125 8ZM14.1875 8C14.1875 6.77623 13.8246 5.57994 13.1447 4.56241C12.4648 3.54488 11.4985 2.75181 10.3679 2.2835C9.23724 1.81518 7.99314 1.69264 6.79288 1.93139C5.59262 2.17014 4.49012 2.75944 3.62478 3.62478C2.75944 4.49011 2.17014 5.59262 1.93139 6.79288C1.69265 7.99314 1.81518 9.23724 2.2835 10.3679C2.75182 11.4985 3.54488 12.4648 4.56241 13.1447C5.57994 13.8246 6.77623 14.1875 8 14.1875C9.64046 14.1856 11.2132 13.5331 12.3732 12.3732C13.5331 11.2132 14.1856 9.64046 14.1875 8Z' fill='%2318BDE6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.form-contact .legal-section .authorization-options .radio-option input:checked ~ .checkmark {
  border: none;
  background-color: transparent;
}
.form-contact .legal-section .authorization-options .radio-option input:checked ~ .checkmark::after {
  display: block;
}
.form-contact .legal-section .authorization-options .radio-option:hover .checkmark {
  border-color: #18bde6;
}

.form-sell-vehicle {
  display: flex;
  flex-direction: column;
  padding: 40px 5%;
  gap: 24px;
  position: relative;
}
.form-sell-vehicle .bg {
  display: none;
}
@media (min-width: 768px) {
  .form-sell-vehicle .bg {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    object-fit: contain;
    z-index: -1;
  }
}
@media (min-width: 768px) {
  .form-sell-vehicle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 24px;
    padding: 100px 5%;
  }
  .form-sell-vehicle .title {
    grid-column: 1/-1;
    margin-bottom: 16px;
  }
  .form-sell-vehicle .textarea-wrapper {
    grid-column: 1/-1;
  }
  .form-sell-vehicle .legal-section {
    grid-column: 1/-1;
  }
  .form-sell-vehicle button {
    grid-column: 1/-1;
    justify-self: start;
  }
}
.form-sell-vehicle .title {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-sell-vehicle .title h1 {
  font-size: 24px;
  font-weight: 700;
  color: #001a41;
  text-align: center;
}
@media (min-width: 768px) {
  .form-sell-vehicle .title h1 {
    font-weight: 700;
    font-style: Bold;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
  }
}
.form-sell-vehicle .title h2 {
  font-size: 18px;
  font-weight: 700;
  color: #001a41;
  text-align: center;
}
@media (min-width: 768px) {
  .form-sell-vehicle .title h2 {
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
  }
}
.form-sell-vehicle button {
  background-color: #18bde6;
  color: #001a41;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.form-sell-vehicle .legal-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.form-sell-vehicle .legal-section .legal-text {
  font-weight: 500;
  line-height: normal;
  font-size: 14px;
  color: #001a41;
  max-height: 65px;
  overflow: scroll;
}
@media (min-width: 768px) {
  .form-sell-vehicle .legal-section .legal-text {
    max-height: none;
    overflow: auto;
  }
}
.form-sell-vehicle .legal-section .authorization-options {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-direction: row;
  padding: 0 0 8px 8px;
}
.form-sell-vehicle .legal-section .authorization-options .radio-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #374650;
  font-weight: 500;
}
.form-sell-vehicle .legal-section .authorization-options .radio-option input[type=radio] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
}
.form-sell-vehicle .legal-section .authorization-options .radio-option .checkmark {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: white;
  border: 2px solid #001a41;
  border-radius: 50%;
  margin-right: 8px;
  transition: all 0.3s ease;
}
.form-sell-vehicle .legal-section .authorization-options .radio-option .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M11.2105 5.91453C11.2628 5.96677 11.3043 6.02881 11.3326 6.0971C11.3609 6.16538 11.3754 6.23858 11.3754 6.3125C11.3754 6.38642 11.3609 6.45962 11.3326 6.5279C11.3043 6.59619 11.2628 6.65823 11.2105 6.71047L7.27297 10.648C7.22073 10.7003 7.15869 10.7418 7.09041 10.7701C7.02212 10.7984 6.94892 10.8129 6.875 10.8129C6.80108 10.8129 6.72789 10.7984 6.6596 10.7701C6.59131 10.7418 6.52928 10.7003 6.47703 10.648L4.78953 8.96047C4.68399 8.85492 4.62469 8.71177 4.62469 8.5625C4.62469 8.41323 4.68399 8.27008 4.78953 8.16453C4.89508 8.05898 5.03824 7.99969 5.1875 7.99969C5.33677 7.99969 5.47992 8.05898 5.58547 8.16453L6.875 9.45477L10.4145 5.91453C10.4668 5.86223 10.5288 5.82074 10.5971 5.79244C10.6654 5.76413 10.7386 5.74956 10.8125 5.74956C10.8864 5.74956 10.9596 5.76413 11.0279 5.79244C11.0962 5.82074 11.1582 5.86223 11.2105 5.91453ZM15.3125 8C15.3125 9.44628 14.8836 10.8601 14.0801 12.0626C13.2766 13.2651 12.1346 14.2024 10.7984 14.7559C9.46219 15.3093 7.99189 15.4541 6.57341 15.172C5.15492 14.8898 3.85196 14.1934 2.82928 13.1707C1.80661 12.148 1.11017 10.8451 0.828011 9.4266C0.545857 8.00811 0.690668 6.53781 1.24413 5.20163C1.7976 3.86544 2.73486 2.72339 3.9374 1.91988C5.13993 1.11637 6.55373 0.6875 8 0.6875C9.93877 0.689547 11.7975 1.46063 13.1685 2.83154C14.5394 4.20246 15.3105 6.06123 15.3125 8ZM14.1875 8C14.1875 6.77623 13.8246 5.57994 13.1447 4.56241C12.4648 3.54488 11.4985 2.75181 10.3679 2.2835C9.23724 1.81518 7.99314 1.69264 6.79288 1.93139C5.59262 2.17014 4.49012 2.75944 3.62478 3.62478C2.75944 4.49011 2.17014 5.59262 1.93139 6.79288C1.69265 7.99314 1.81518 9.23724 2.2835 10.3679C2.75182 11.4985 3.54488 12.4648 4.56241 13.1447C5.57994 13.8246 6.77623 14.1875 8 14.1875C9.64046 14.1856 11.2132 13.5331 12.3732 12.3732C13.5331 11.2132 14.1856 9.64046 14.1875 8Z' fill='%2318BDE6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.form-sell-vehicle .legal-section .authorization-options .radio-option input:checked ~ .checkmark {
  border: none;
  background-color: transparent;
}
.form-sell-vehicle .legal-section .authorization-options .radio-option input:checked ~ .checkmark::after {
  display: block;
}
.form-sell-vehicle .legal-section .authorization-options .radio-option:hover .checkmark {
  border-color: #18bde6;
}

.legal-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.legal-modal .modal-content {
  background-color: white;
  border-radius: 12px;
  padding: 32px;
  max-width: 1040px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
  gap: 24px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .legal-modal .modal-content {
    padding: 80px 100px;
  }
}
.legal-modal .modal-content h3 {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #18bde6;
}
@media (min-width: 768px) {
  .legal-modal .modal-content h3 {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}
.legal-modal .modal-content .modal-body ol {
  padding-left: 24px;
  margin-bottom: 24px;
}
.legal-modal .modal-content .modal-body ol li {
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: #001a41;
}
.legal-modal .modal-content .modal-body .contact-info {
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.legal-modal .modal-content .modal-body .policy-link {
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.legal-modal .modal-content .modal-body .modal-link {
  color: #18bde6;
  text-decoration: underline;
}
.legal-modal .modal-content .modal-body .modal-link:hover {
  text-decoration: none;
}
.legal-modal .modal-content .modal-btn {
  background-color: #18bde6;
  color: #001a41;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0 auto;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.map {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
}
.map .bg {
  display: none;
}
@media (min-width: 768px) {
  .map .bg {
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    object-fit: contain;
    z-index: 2;
  }
}
@media (min-width: 768px) {
  .map {
    height: 600px;
  }
}
.map .map-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.map .map-background iframe {
  width: 100%;
  height: 100%;
  filter: grayscale(30%) brightness(0.9);
  transition: filter 0.3s ease;
}
.map .map-background iframe:hover {
  filter: grayscale(0%) brightness(1);
}
.map .map-content {
  position: absolute;
  justify-content: center;
  align-items: center;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 40px 5%;
  width: 90%;
  height: fit-content;
  background-color: #374650;
  top: 50%;
  border-radius: 24px;
  transform: translateY(-50%);
  left: 5%;
  max-width: 470px;
}
.map .map-content .location-info {
  max-width: 100%;
  color: white;
}
.map .map-content .location-info h2 {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 16px;
}
.map .map-content .location-info .location-subtitle {
  color: #60d1ee;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 16px;
}
.map .map-content .location-info .location-description {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: white;
  margin-bottom: 40px;
}
.map .map-content .location-info .address-container {
  margin-bottom: 8px;
}
.map .map-content .location-info .address-container .address-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  border: 1px solid #18bde6;
  border-radius: 4px;
  padding: 8px 16px;
  justify-content: space-between;
}
.map .map-content .location-info .address-container .address-info .address-text {
  font-size: 16px;
  font-weight: 700;
  color: white;
}
.map .map-content .location-info .address-container .address-info .copy-btn {
  color: #18bde6;
  border: none;
  width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.map .map-content .location-info .address-container .address-info .copy-btn:hover {
  transform: translateY(-2px);
}
.map .map-content .location-info .address-container .address-info .copy-btn:active {
  transform: translateY(0);
}
.map .map-content .location-info .address-container .address-info .copy-btn svg {
  width: 19px;
  height: 19px;
}
.map .map-content .location-info .address-container .schedule {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: white;
  margin-bottom: 40px;
}
.map .map-content .location-info .maps-btn {
  background: #18bde6;
  color: #001a41;
  font-size: 16px;
  font-weight: 700;
}

.faq-contact {
  padding: 40px 5% 100px 5%;
  background-color: white;
  position: relative;
}
.faq-contact .bg-1 {
  display: none;
}
@media (min-width: 768px) {
  .faq-contact .bg-1 {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    object-fit: contain;
    z-index: 1;
  }
}
.faq-contact .bg-2 {
  display: none;
}
@media (min-width: 768px) {
  .faq-contact .bg-2 {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;
    z-index: -1;
  }
}
.faq-contact .faq-header {
  text-align: center;
  margin-bottom: 40px;
}
.faq-contact .faq-header .faq-intro {
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: #001a41;
  margin-bottom: 16px;
}
.faq-contact .faq-header h2 {
  text-align: center;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #001a41;
}
.faq-contact .faq-swiper {
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .faq-contact .faq-swiper .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    transform: none !important;
  }
}
@media (min-width: 768px) {
  .faq-contact .faq-swiper .swiper-wrapper .swiper-slide {
    width: auto !important;
    margin-right: 0 !important;
  }
}
.faq-contact .faq-swiper .swiper-wrapper .swiper-slide .faq-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  .faq-contact .faq-swiper .swiper-wrapper .swiper-slide .faq-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
}
.faq-contact .faq-swiper .faq-item {
  background: white;
  border-radius: 4px;
  border: 1px solid #c6c7c2;
  overflow: hidden;
  transition: all 0.3s ease;
}
.faq-contact .faq-swiper .faq-item:hover {
  border-color: rgba(24, 189, 230, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.faq-contact .faq-swiper .faq-item.active {
  border-color: #18bde6;
}
.faq-contact .faq-swiper .faq-item.active .faq-toggle svg {
  transform: rotate(45deg);
}
.faq-contact .faq-swiper .faq-item .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  cursor: pointer;
}
.faq-contact .faq-swiper .faq-item .faq-question span {
  color: #1d1f1e;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.064px;
  padding-right: 16px;
}
.faq-contact .faq-swiper .faq-item .faq-question .faq-toggle {
  background: none;
  border: none;
  color: #001a41;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.faq-contact .faq-swiper .faq-item .faq-question .faq-toggle:hover {
  color: #18bde6;
}
.faq-contact .faq-swiper .faq-item .faq-question .faq-toggle svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}
.faq-contact .faq-swiper .faq-item .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-contact .faq-swiper .faq-item .faq-answer p {
  padding: 0 32px 24px 32px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 26, 65, 0.8);
  line-height: 1.6;
}
@media (min-width: 768px) {
  .faq-contact .faq-swiper .faq-item .faq-answer p {
    padding: 0 32px 32px 32px;
    font-size: 16px;
  }
}
.faq-contact .faq-swiper .faq-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  position: relative;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .faq-contact .faq-swiper .faq-navigation {
    display: none;
  }
}
.faq-contact .faq-swiper .faq-navigation .swiper-button-next,
.faq-contact .faq-swiper .faq-navigation .swiper-button-prev {
  position: relative;
  left: unset;
  right: unset;
  top: unset;
  margin: 0;
  background-color: #18bde6;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  color: white;
}
.faq-contact .faq-swiper .faq-navigation .swiper-button-next::after,
.faq-contact .faq-swiper .faq-navigation .swiper-button-prev::after {
  font-size: 20px;
  font-weight: bold;
}
.faq-contact .faq-swiper .faq-navigation .swiper-button-next.swiper-button-disabled,
.faq-contact .faq-swiper .faq-navigation .swiper-button-prev.swiper-button-disabled {
  background: #374650;
  opacity: 1;
}

.vehicle-banner {
  height: calc(100vh - var(--header-height, 72px));
  background-color: gray;
  overflow: hidden;
  position: relative;
}
.vehicle-banner .vehicle-banner-media {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.vehicle-banner .vehicle-banner-media .vehicle-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  display: none;
}
@media (min-width: 1080px) {
  .vehicle-banner .vehicle-banner-media .vehicle-banner-img.desktop-only {
    display: block;
  }
}
@media (min-width: 480px) and (max-width: 1080px) {
  .vehicle-banner .vehicle-banner-media .vehicle-banner-img.tablet-only {
    display: block !important;
  }
}
@media (max-width: 480px) {
  .vehicle-banner .vehicle-banner-media .vehicle-banner-img.mobile-only {
    display: block !important;
  }
}
.vehicle-banner svg {
  display: none;
}
@media (min-width: 768px) {
  .vehicle-banner svg {
    display: flex;
    position: absolute;
    bottom: 18px;
    z-index: 5;
  }
}
.vehicle-banner h1 {
  display: none;
}
@media (min-width: 768px) {
  .vehicle-banner h1 {
    display: flex;
    position: absolute;
    font-weight: 700;
    font-style: Bold;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: white;
    left: 5%;
    bottom: 194px;
    max-width: 632px;
  }
}

.vehicle-basic-information {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 40px 5%;
}
@media (min-width: 768px) {
  .vehicle-basic-information {
    padding: 0;
  }
}
.vehicle-basic-information h1 {
  font-weight: 700;
  font-style: Bold;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #18bde6;
}
@media (min-width: 768px) {
  .vehicle-basic-information h1 {
    display: none;
  }
}
.vehicle-basic-information .features-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.vehicle-basic-information .features-container .title {
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (min-width: 768px) {
  .vehicle-basic-information .features-container .title {
    transform: translateY(-131px);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='608' height='131' viewBox='0 0 608 131' fill='none'><path d='M608 131C575.845 131 545.363 115.038 526.569 88.9468L504.403 58.1744C478.093 21.647 435.822 0 390.805 0H-1V131H608Z' fill='white'/></svg>");
    background-repeat: no-repeat;
    background-position: left bottom;
    z-index: 10;
    background-color: transparent;
    background-size: contain;
    height: 100%;
    padding: 52px 5% 7px 5%;
    margin: 0 0 -131px 0;
    width: 609px;
    height: 131px;
  }
}
.vehicle-basic-information .features-container .title h2 {
  font-weight: 700;
  font-style: Bold;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #18bde6;
}
@media (min-width: 768px) {
  .vehicle-basic-information .features-container .title h2 {
    font-weight: 700;
    font-style: Bold;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
  }
}
.vehicle-basic-information .features-container .title p {
  font-weight: 700;
  font-style: Bold;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #001a41;
}
@media (min-width: 768px) {
  .vehicle-basic-information .features-container .title p {
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
  }
}
.vehicle-basic-information .features-container .features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px) {
  .vehicle-basic-information .features-container .features {
    padding: 0 5% 40px 5%;
    grid-template-columns: repeat(4, 1fr);
  }
}
.vehicle-basic-information .features-container .features .feature {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.vehicle-basic-information .features-container .features .feature span {
  font-weight: 500;
  font-size: 40px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #001a41;
}
@media (min-width: 768px) {
  .vehicle-basic-information .features-container .features .feature span {
    font-size: 64px;
  }
}
.vehicle-basic-information .features-container .features .feature span small {
  font-size: 18px;
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
}
@media (min-width: 768px) {
  .vehicle-basic-information .features-container .features .feature span small {
    font-size: 24px;
  }
}
.vehicle-basic-information .features-container .features .feature p {
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #001a41;
}
@media (min-width: 768px) {
  .vehicle-basic-information .features-container .features .feature p {
    font-size: 24px;
  }
}

.vehicle-quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 5%;
  background-color: #18bde6;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .vehicle-quote {
    padding: 40px 15%;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.vehicle-quote .message {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #001a41;
}
@media (min-width: 768px) {
  .vehicle-quote .message {
    max-width: 70%;
  }
}
.vehicle-quote .message h2 {
  font-weight: 700;
  font-style: Bold;
  font-size: 40px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .vehicle-quote .message h2 {
    font-weight: 700;
    font-style: Bold;
    font-size: 64px;
    line-height: 72px;
    letter-spacing: 0%;
    vertical-align: middle;
  }
}
.vehicle-quote .message h2 small {
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .vehicle-quote .message h2 small {
    font-weight: 500;
    font-size: 24px;
    line-height: 72px;
    letter-spacing: 0%;
    vertical-align: middle;
  }
}
.vehicle-quote .message h3 {
  font-weight: 700;
  font-style: Bold;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .vehicle-quote .message h3 {
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
  }
}
.vehicle-quote .message p {
  font-weight: 500;
  font-style: Regular;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
}
@media (min-width: 768px) {
  .vehicle-quote .message p {
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
  }
}
.vehicle-quote .actions {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .vehicle-quote .actions {
    flex-direction: column;
  }
}
.vehicle-quote .actions .btn {
  font-weight: 700;
  font-style: Bold;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
}
.vehicle-quote .actions .btn-1 {
  background-color: #001a41;
  color: white;
}
.vehicle-quote .actions .btn-2 {
  background: #ebedee;
  color: #001a41;
}

.vehicle-details {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 5%;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .vehicle-details {
    padding: 100px 5%;
  }
}
.vehicle-details .bg {
  display: none;
}
@media (min-width: 768px) {
  .vehicle-details .bg {
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    object-fit: contain;
    z-index: -1;
  }
}
.vehicle-details .up {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  .vehicle-details .up {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}
.vehicle-details .up .message {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 768px) {
  .vehicle-details .up .message {
    max-width: 45%;
  }
}
.vehicle-details .up .message h2 {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #18bde6;
}
@media (min-width: 768px) {
  .vehicle-details .up .message h2 {
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}
.vehicle-details .up .message p {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: #001a41;
}
.vehicle-details .up .swiper-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: flex-end;
}
.vehicle-details .up .swiper-navigation .swiper-button-next,
.vehicle-details .up .swiper-navigation .swiper-button-prev {
  position: relative;
  left: unset;
  right: unset;
  top: unset;
  margin: 0;
  background-color: #18bde6;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  color: white;
}
.vehicle-details .up .swiper-navigation .swiper-button-next::after,
.vehicle-details .up .swiper-navigation .swiper-button-prev::after {
  font-size: 20px;
  font-weight: bold;
}
.vehicle-details .up .swiper-navigation .swiper-button-next.swiper-button-disabled,
.vehicle-details .up .swiper-navigation .swiper-button-prev.swiper-button-disabled {
  background: #374650;
  opacity: 1;
}
.vehicle-details .swiper-container {
  width: 100%;
  position: relative;
}
@media (min-width: 768px) {
  .vehicle-details .swiper-container {
    padding: 0;
    position: unset;
  }
}
.vehicle-details .swiper-container .decoration {
  position: absolute;
  left: -9px;
  top: -9px;
}
@media (min-width: 768px) {
  .vehicle-details .swiper-container .decoration {
    top: 73px;
    left: calc(5% - 23px);
  }
}
.vehicle-details .swiper-container .vehicle-details-swiper {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  border-radius: 24px;
}
.vehicle-details .swiper-container .vehicle-details-swiper .swiper-wrapper {
  display: flex;
}
.vehicle-details .swiper-container .vehicle-details-swiper .swiper-wrapper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  overflow: hidden;
}
.vehicle-details .swiper-container .vehicle-details-swiper .swiper-wrapper .swiper-slide .img-container {
  position: relative;
  border-radius: 16px;
  aspect-ratio: 358/252;
  border: 1px solid transparent;
  border-radius: 24px;
}
.vehicle-details .swiper-container .vehicle-details-swiper .swiper-wrapper .swiper-slide .img-container .vehicle-frame {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 358/252;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid transparent;
}

.vehicle-description {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 5% 8px 5%;
  background-color: white;
  position: relative;
}
.vehicle-description .bg-1 {
  display: none;
}
@media (min-width: 768px) {
  .vehicle-description .bg-1 {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
}
.vehicle-description .bg-2 {
  display: none;
}
@media (min-width: 768px) {
  .vehicle-description .bg-2 {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
  }
}
@media (min-width: 768px) {
  .vehicle-description {
    padding: 100px 5%;
    flex-direction: row;
  }
}
.vehicle-description .description-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  .vehicle-description .description-container {
    width: 50%;
  }
}
.vehicle-description .description-container .title {
  display: flex;
  flex-direction: column;
}
.vehicle-description .description-container .title h2 {
  font-weight: 700;
  font-style: Bold;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #18bde6;
}
@media (min-width: 768px) {
  .vehicle-description .description-container .title h2 {
    font-weight: 700;
    font-style: Bold;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
  }
}
.vehicle-description .description-container .title h3 {
  font-weight: 700;
  font-style: Bold;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #001a41;
}
@media (min-width: 768px) {
  .vehicle-description .description-container .title h3 {
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
  }
}
.vehicle-description .description-container p {
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #001a41;
}
@media (min-width: 768px) {
  .vehicle-description .description-container p {
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
  }
}
.vehicle-description .tech-information {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background-color: #ebeced;
  border-radius: 16px;
  padding: 16px;
  transition: all 0.3s ease;
  z-index: 2;
}
@media (min-width: 768px) {
  .vehicle-description .tech-information {
    width: 50%;
    padding: 24px 40px;
  }
}
.vehicle-description .tech-information .title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.vehicle-description .tech-information .title:hover {
  opacity: 0.8;
}
.vehicle-description .tech-information .title span {
  font-weight: 700;
  font-style: Bold;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #001a41;
}
@media (min-width: 768px) {
  .vehicle-description .tech-information .title span {
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
  }
}
.vehicle-description .tech-information .title svg {
  transition: transform 0.3s ease;
  cursor: pointer;
  user-select: none;
}
.vehicle-description .tech-information .title svg.collapsed {
  transform: rotate(180deg);
}
@media (min-width: 768px) {
  .vehicle-description .tech-information .title svg {
    display: none;
  }
}
.vehicle-description .tech-information .items {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
  opacity: 1;
}
.vehicle-description .tech-information .items.collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
}
.vehicle-description .tech-information .items .item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vehicle-description .tech-information .items .item span {
  font-weight: 700;
  font-style: Bold;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
}
.vehicle-description .tech-information .items .item p {
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
}
.vehicle-description .tech-information.collapsed {
  gap: 0;
}

.vehicle-technology {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.vehicle-technology .decoration-1 {
  display: none;
}
@media (min-width: 768px) {
  .vehicle-technology .decoration-1 {
    display: flex;
    position: absolute;
    left: calc(5% - 16px);
    top: 84px;
  }
}
.vehicle-technology .decoration-2 {
  display: none;
}
@media (min-width: 768px) {
  .vehicle-technology .decoration-2 {
    display: flex;
    position: absolute;
    right: calc(5% - 16px);
    bottom: 84px;
  }
}
.vehicle-technology h3 {
  font-weight: 700;
  font-style: Bold;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #18bde6;
  padding: 40px 5% 0 5%;
}
@media (min-width: 768px) {
  .vehicle-technology h3 {
    padding: 100px 5% 0 5%;
  }
}
.vehicle-technology .categories {
  display: flex;
  flex-direction: row;
  gap: 32px;
  list-style: none;
  padding: 0 5% 40px 5%;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
  white-space: nowrap;
  justify-content: space-between;
}
.vehicle-technology .categories li {
  padding: 8px 0;
  color: #001a41;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}
.vehicle-technology .categories li:hover {
  opacity: 0.8;
}
.vehicle-technology .categories li.active {
  font-weight: 700;
  font-style: Bold;
  border-bottom-color: #18bde6;
}
.vehicle-technology .vehicle-technology-swiper {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding: 0 5%;
  align-items: center;
  overflow: hidden;
  width: 100%;
}
@media (min-width: 768px) {
  .vehicle-technology .vehicle-technology-swiper {
    order: 1;
    padding: 0 5% 100px 5%;
  }
}
.vehicle-technology .vehicle-technology-swiper .swiper-navigation {
  position: relative;
  margin: -60px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  width: 220px;
  z-index: 6;
  padding: 20px 0 0 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg width='200' height='60' viewBox='0 0 200 60' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M170.49 29.2246C170.08 13.0138 156.81 -0.00182537 140.5 -0.00195312H59.5001C42.9316 -0.00195052 29.5003 13.4297 29.5001 29.998C29.5001 46.5666 16.5685 59.998 0 59.998L200 59.999C183.69 59.9989 170.921 46.984 170.51 30.7734L170.49 29.2246Z' fill='white'/></svg>");
}
.vehicle-technology .vehicle-technology-swiper .swiper-navigation .swiper-button-next,
.vehicle-technology .vehicle-technology-swiper .swiper-navigation .swiper-button-prev {
  position: relative;
  margin: 0;
  background-color: #001a41;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vehicle-technology .vehicle-technology-swiper .swiper-navigation .swiper-button-next::after,
.vehicle-technology .vehicle-technology-swiper .swiper-navigation .swiper-button-prev::after {
  font-size: 20px;
  font-weight: bold;
}
.vehicle-technology .vehicle-technology-swiper .swiper-navigation .swiper-button-next.swiper-button-disabled,
.vehicle-technology .vehicle-technology-swiper .swiper-navigation .swiper-button-prev.swiper-button-disabled {
  background: #374650;
  opacity: 1;
}
.vehicle-technology .vehicle-technology-swiper .swiper-wrapper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}
.vehicle-technology .vehicle-technology-swiper .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 473px;
  display: block;
  border-radius: 16px;
  object-fit: cover;
}

.vehicle-features-swiper {
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .vehicle-features-swiper {
    height: calc(100vh - var(--header-height, 72px));
  }
}
.vehicle-features-swiper .swiper-wrapper .swiper-slide {
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (min-width: 768px) {
  .vehicle-features-swiper .swiper-wrapper .swiper-slide {
    flex-direction: row;
  }
}
.vehicle-features-swiper .swiper-wrapper .swiper-slide .content {
  display: flex;
  flex-direction: column;
  padding: 40px 5%;
  background-color: #ebedee;
  z-index: 2;
  position: relative;
  gap: 16px;
}
@media (min-width: 768px) {
  .vehicle-features-swiper .swiper-wrapper .swiper-slide .content {
    width: 50%;
    backdrop-filter: blur(20px);
    justify-content: center;
    align-items: flex-start;
    padding: 5% 10%;
  }
}
.vehicle-features-swiper .swiper-wrapper .swiper-slide .content .title h2 {
  font-weight: 700;
  font-style: Bold;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #18bde6;
  text-align: left;
}
@media (min-width: 768px) {
  .vehicle-features-swiper .swiper-wrapper .swiper-slide .content .title h2 {
    font-weight: 700;
    font-style: Bold;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
  }
}
.vehicle-features-swiper .swiper-wrapper .swiper-slide .content .title h3 {
  font-weight: 700;
  font-style: Bold;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #001a41;
}
@media (min-width: 768px) {
  .vehicle-features-swiper .swiper-wrapper .swiper-slide .content .title h3 {
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
  }
}
.vehicle-features-swiper .swiper-wrapper .swiper-slide .content .description {
  font-weight: 500;
  font-style: Regular;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #001a41;
}
@media (min-width: 768px) {
  .vehicle-features-swiper .swiper-wrapper .swiper-slide .content .description {
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
  }
}
.vehicle-features-swiper .swiper-wrapper .swiper-slide .content .swiper-navigation {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  position: relative;
  margin-top: 24px;
}
.vehicle-features-swiper .swiper-wrapper .swiper-slide .content .swiper-navigation .swiper-button-next,
.vehicle-features-swiper .swiper-wrapper .swiper-slide .content .swiper-navigation .swiper-button-prev {
  position: relative;
  left: unset;
  right: unset;
  top: unset;
  margin: 0;
  background-color: #18bde6;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  color: white;
}
.vehicle-features-swiper .swiper-wrapper .swiper-slide .content .swiper-navigation .swiper-button-next::after,
.vehicle-features-swiper .swiper-wrapper .swiper-slide .content .swiper-navigation .swiper-button-prev::after {
  font-size: 20px;
  font-weight: bold;
}
.vehicle-features-swiper .swiper-wrapper .swiper-slide .content .swiper-navigation .swiper-button-next.swiper-button-disabled,
.vehicle-features-swiper .swiper-wrapper .swiper-slide .content .swiper-navigation .swiper-button-prev.swiper-button-disabled {
  background: #374650;
  opacity: 1;
}
.vehicle-features-swiper .swiper-wrapper .swiper-slide .image-container {
  aspect-ratio: 1/1;
  width: 100%;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .vehicle-features-swiper .swiper-wrapper .swiper-slide .image-container {
    width: 50%;
    position: relative;
  }
}
.vehicle-features-swiper .swiper-wrapper .swiper-slide .image-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.catalogo-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 5%;
}
.catalogo-section .title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.catalogo-section .title h2 {
  font-weight: 700;
  font-style: Bold;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #001a41;
}
.catalogo-section .title span {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: black;
}
.catalogo-section .title .search-active-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, #e0f7ff 0%, #b3e5fc 100%);
  border: 2px solid #18bde6;
  border-radius: 12px;
  padding: 12px 20px;
  margin-top: 16px;
  animation: slideInDown 0.3s ease;
}
@media (max-width: 768px) {
  .catalogo-section .title .search-active-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }
}
.catalogo-section .title .search-active-banner .search-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #001a41;
}
.catalogo-section .title .search-active-banner .search-banner-content svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.catalogo-section .title .search-active-banner .search-banner-content span {
  font-size: 15px;
  font-weight: 500;
}
.catalogo-section .title .search-active-banner .search-banner-content span strong {
  font-weight: 700;
  color: #001a41;
}
.catalogo-section .title .search-active-banner .clear-search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  color: #001a41;
  border: 1px solid #001a41;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.catalogo-section .title .search-active-banner .clear-search-btn svg {
  width: 16px;
  height: 16px;
}
.catalogo-section .title .search-active-banner .clear-search-btn:hover {
  background: #001a41;
  color: white;
  transform: scale(1.02);
}
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 1024px) {
  .catalogo-section .down-section {
    display: flex;
    flex-direction: row;
    gap: 100px;
  }
}
.catalogo-section .down-section .filters-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 1024px) {
  .catalogo-section .down-section .filters-container {
    position: sticky;
    top: 140px;
    height: fit-content;
    padding: 0;
  }
}
.catalogo-section .down-section .filters-container .action-btn-container {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.catalogo-section .down-section .filters-container .action-btn-container .custom-dropdown {
  height: 40px;
  width: 50%;
}
.catalogo-section .down-section .filters-container .action-btn-container .custom-dropdown .dropdown-trigger {
  overflow: hidden;
}
.catalogo-section .down-section .filters-container .action-btn-container .custom-dropdown .dropdown-trigger span {
  white-space: nowrap;
  text-overflow: ellipsis;
}
.catalogo-section .down-section .filters-container .action-btn-container .btn {
  width: 100%;
  padding: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid #001a41;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.0509803922);
  border-radius: 4px;
  height: 40px;
}
@media (min-width: 769px) {
  .catalogo-section .down-section .filters-container .action-btn-container .btn {
    cursor: default;
    pointer-events: none;
  }
}
.catalogo-section .down-section .filters-container .action-btn-container .btn span {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #001a41;
}
@media (min-width: 769px) {
  .catalogo-section .down-section .filters-container .action-btn-container .order-dropdown {
    display: none;
  }
}
.catalogo-section .down-section .filters-container .selected-items {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}
.catalogo-section .down-section .filters-container .selected-items .item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  background-color: rgba(24, 189, 230, 0.1019607843);
  border-radius: 100px;
  padding: 8px 8px 8px 16px;
}
.catalogo-section .down-section .filters-container .selected-items .item svg {
  cursor: pointer;
}
.catalogo-section .down-section .filters-container .filters-menu {
  display: flex;
  flex-direction: column;
  padding: 48px 5%;
  position: relative;
  justify-content: space-between;
}
@media (min-width: 769px) {
  .catalogo-section .down-section .filters-container .filters-menu {
    padding: 0;
  }
}
.catalogo-section .down-section .filters-container .filters-menu .filters-mobile-close {
  position: absolute;
  right: 5%;
  padding: 0;
  top: 16px;
  outline: none !important;
}
@media (min-width: 769px) {
  .catalogo-section .down-section .filters-container .filters-menu .filters-mobile-close {
    display: none;
  }
}
.catalogo-section .down-section .filters-container .filters-menu .filter {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.catalogo-section .down-section .filters-container .filters-menu .filter:first-child .title {
  border-top: none;
}
.catalogo-section .down-section .filters-container .filters-menu .filter.expanded .filter-content {
  opacity: 1;
  transform: translateY(0);
  margin-bottom: 16px;
}
.catalogo-section .down-section .filters-container .filters-menu .filter.expanded .title svg {
  transform: rotate(180deg);
  transition: transform 360ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.catalogo-section .down-section .filters-container .filters-menu .filter .title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid rgba(55, 70, 80, 0.1019607843);
  border-top: 1px solid rgba(55, 70, 80, 0.1019607843);
  user-select: none;
  cursor: pointer;
}
.catalogo-section .down-section .filters-container .filters-menu .filter .title span {
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #001a41;
}
.catalogo-section .down-section .filters-container .filters-menu .filter .range-container {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.catalogo-section .down-section .filters-container .filters-menu .filter .range-container input {
  width: 100%;
  border: 1px solid #18bde6;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.5%;
  color: #374650;
}
.catalogo-section .down-section .filters-container .filters-menu .filter ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.catalogo-section .down-section .filters-container .filters-menu .filter ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #374650;
  cursor: pointer;
}
.catalogo-section .down-section .filters-container .filters-menu .filter ul li .checkbox {
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  border-radius: 50%;
  border: 1px solid #374650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  transition: border-color 220ms ease, background 220ms ease;
}
.catalogo-section .down-section .filters-container .filters-menu .filter ul li .label {
  flex: 1 1 auto;
}
.catalogo-section .down-section .filters-container .filters-menu .filter ul li.selected .checkbox {
  border-color: #18bde6;
  background: #18bde6;
}
.catalogo-section .down-section .filters-container .filters-menu .filter ul li.selected .checkbox svg.check {
  opacity: 1;
  transform: scale(1);
}
.catalogo-section .down-section .filters-container .filters-menu .filter ul li .checkbox svg.check {
  width: 10px;
  height: 10px;
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.catalogo-section .down-section .filters-container .filters-menu .filter .search-wrapper {
  display: inline-block;
  position: relative;
}
.catalogo-section .down-section .filters-container .filters-menu .filter .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  display: inline-block;
  line-height: 0;
  pointer-events: none;
}
.catalogo-section .down-section .filters-container .filters-menu .filter .search {
  padding: 8px 16px 8px 43px;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  border-radius: 100px;
}
.catalogo-section .down-section .filters-container .filters-menu .buttons-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
  background-color: white;
}
@media (min-width: 769px) {
  .catalogo-section .down-section .filters-container .filters-menu .buttons-container {
    flex-direction: column;
  }
}
@media (min-width: 769px) {
  .catalogo-section .down-section .filters-container .filters-menu .buttons-container .btn {
    width: 100%;
  }
}
.catalogo-section .down-section .filters-container .filters-menu .buttons-container .btn-1 {
  background-color: #18bde6;
  color: #001a41;
  font-weight: 700;
  font-style: Bold;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
}
.catalogo-section .down-section .filters-container .filters-menu .buttons-container .btn-2 {
  font-weight: 700;
  font-style: Bold;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  background-color: #001a41;
  color: white;
}
.catalogo-section .down-section .vehicles-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.catalogo-section .down-section .vehicles-container .up {
  display: none;
}
@media (min-width: 1024px) {
  .catalogo-section .down-section .vehicles-container .up {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: fit-content;
    align-self: flex-end;
  }
  .catalogo-section .down-section .vehicles-container .up .custom-dropdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .catalogo-section .down-section .vehicles-container .up .custom-dropdown label {
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #374650;
  }
  .catalogo-section .down-section .vehicles-container .up .custom-dropdown .dropdown-trigger {
    width: 200px;
    padding: 8px;
    height: 40px;
    overflow: hidden;
  }
  .catalogo-section .down-section .vehicles-container .up .custom-dropdown .dropdown-trigger span {
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .catalogo-section .down-section .vehicles-container .up .custom-dropdown .dropdown-item {
    padding: 8px;
  }
}
.catalogo-section .down-section .vehicles-container .vehicles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
  margin-top: 24px;
}
@media (min-width: 768px) {
  .catalogo-section .down-section .vehicles-container .vehicles {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .catalogo-section .down-section .vehicles-container .vehicles {
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
  }
}
.catalogo-section .down-section .vehicles-container .vehicles .vehicle-card {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  justify-content: flex-start;
}
.catalogo-section .down-section .vehicles-container .vehicles .vehicle-card .vehicle-image {
  position: relative;
  aspect-ratio: 411/252;
  overflow: hidden;
  border-radius: 16px;
}
.catalogo-section .down-section .vehicles-container .vehicles .vehicle-card .vehicle-image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 411/252;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid white;
}
.catalogo-section .down-section .vehicles-container .vehicles .vehicle-card .vehicle-image .more-info {
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg width='89' height='90' viewBox='0 0 89 90' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M89 90H0C16.5685 90 29.9999 76.3165 30 59.748C30 43.7103 42.7979 30.4213 58.7383 30.0098L60.2617 29.9902C76.2021 29.5862 89 16.5377 89 0.5V90Z' fill='white'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 89px;
  aspect-ratio: 89/90;
}
.catalogo-section .down-section .vehicles-container .vehicles .vehicle-card .vehicle-image .more-info a {
  height: 48px;
  width: 48px;
  position: absolute;
  right: 2px;
  bottom: 0;
  background-color: #374650;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.catalogo-section .down-section .vehicles-container .vehicles .vehicle-card .vehicle-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 5px 0 5px 16px;
  width: 100%;
}
.catalogo-section .down-section .vehicles-container .vehicles .vehicle-card .vehicle-info .up {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}
.catalogo-section .down-section .vehicles-container .vehicles .vehicle-card .vehicle-info .up .price {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.catalogo-section .down-section .vehicles-container .vehicles .vehicle-card .vehicle-info .up .price .vehicle-price {
  font-weight: 700;
  font-style: Bold;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #18bde6;
}
.catalogo-section .down-section .vehicles-container .vehicles .vehicle-card .vehicle-info .up .price .btn {
  font-weight: 700;
  font-style: Bold;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  background-color: #18bde6;
  color: #001a41;
}
.catalogo-section .down-section .vehicles-container .vehicles .vehicle-card .vehicle-info .up .vehicle-name {
  font-weight: 700;
  font-style: Bold;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #001a41;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
}
.catalogo-section .down-section .vehicles-container .vehicles .vehicle-card .vehicle-info .up .vehicle-name span {
  max-width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
}
.catalogo-section .down-section .vehicles-container .vehicles .vehicle-card .vehicle-info .vehicle-specs {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 4px;
}
.catalogo-section .down-section .vehicles-container .vehicles .vehicle-card .vehicle-info.sustainable .up .price .vehicle-price {
  color: #b7d100;
}
.catalogo-section .down-section .vehicles-container .vehicles .vehicle-card .vehicle-info.sustainable .up .btn {
  background-color: #b7d100;
}
.catalogo-section .down-section .vehicles-container .vehicles .no-vehicles-found {
  grid-column: 1/-1;
  text-align: center;
  padding: 60px 20px;
  background: #f9fafb;
  border-radius: 8px;
}
.catalogo-section .down-section .vehicles-container .vehicles .no-vehicles-found p {
  font-size: 18px;
  color: #6b7280;
  margin: 0;
}
.catalogo-section .down-section .vehicles-container .vehicles .pagination {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.catalogo-section .down-section .vehicles-container .vehicles .pagination .pagination-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background-color: #374650;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  border-radius: 50%;
}
.catalogo-section .down-section .vehicles-container .vehicles .pagination .pagination-arrow svg path {
  stroke: white;
}
.catalogo-section .down-section .vehicles-container .vehicles .pagination .pagination-arrow:hover:not(.disabled) {
  background: #374650;
}
.catalogo-section .down-section .vehicles-container .vehicles .pagination .pagination-arrow:hover:not(.disabled) svg path {
  stroke: white;
}
.catalogo-section .down-section .vehicles-container .vehicles .pagination .pagination-arrow.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.catalogo-section .down-section .vehicles-container .vehicles .pagination .pagination-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.catalogo-section .down-section .vehicles-container .vehicles .pagination .pagination-numbers .pagination-number {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 50%;
  color: #374650;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}
.catalogo-section .down-section .vehicles-container .vehicles .pagination .pagination-numbers .pagination-number:hover:not(.active) {
  background: #f9fafb;
}
.catalogo-section .down-section .vehicles-container .vehicles .pagination .pagination-numbers .pagination-number.active {
  background: #18bde6;
  color: white;
  cursor: default;
}
.catalogo-section .down-section .vehicles-container .vehicles .pagination .pagination-numbers .pagination-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  color: #374650;
  font-weight: 500;
}

@media (max-width: 768px) {
  .filters-menu {
    position: fixed !important;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 2000;
    padding: 24px 5%;
    transform: translateY(100%);
    transition: transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
  }
  .filters-menu.mobile-open {
    transform: translateY(0%);
  }
  .filters-menu .filter {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 360ms ease, transform 360ms cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  .filters-menu .filter .title {
    padding: 0 5%;
  }
  .filters-menu.mobile-open .filter {
    opacity: 1;
    transform: translateY(0);
  }
  .filters-menu.mobile-open .filter:nth-child(1) {
    transition-delay: 40ms;
  }
  .filters-menu.mobile-open .filter:nth-child(2) {
    transition-delay: 80ms;
  }
  .filters-menu.mobile-open .filter:nth-child(3) {
    transition-delay: 120ms;
  }
  .filters-menu.mobile-open .filter:nth-child(4) {
    transition-delay: 160ms;
  }
  .filters-menu.mobile-open .filter:nth-child(5) {
    transition-delay: 200ms;
  }
  .filters-menu.mobile-open .filter:nth-child(6) {
    transition-delay: 240ms;
  }
  .filters-menu.mobile-open .filter:nth-child(7) {
    transition-delay: 280ms;
  }
  .filters-menu.mobile-open .filter:nth-child(8) {
    transition-delay: 320ms;
  }
  .filters-menu.mobile-open .filter:nth-child(9) {
    transition-delay: 360ms;
  }
  .filters-menu.mobile-open .filter:nth-child(10) {
    transition-delay: 400ms;
  }
}
.catalogo-hero {
  padding: 24px 5% 40px 5%;
  height: calc(100vh - var(--header-height, 72px));
  position: relative;
}
.catalogo-hero .decoration-1 {
  display: none;
}
@media (min-width: 768px) {
  .catalogo-hero .decoration-1 {
    display: flex;
    position: absolute;
    left: calc(5% - 16px);
    top: 8px;
  }
}
.catalogo-hero .decoration-2 {
  display: none;
}
@media (min-width: 768px) {
  .catalogo-hero .decoration-2 {
    display: flex;
    position: absolute;
    right: calc(5% - 16px);
    bottom: 24px;
  }
}
.catalogo-hero .content {
  padding: 16px 24px;
  display: flex;
  align-items: flex-end;
  border-radius: 24px;
  height: 100%;
}
@media (min-width: 768px) {
  .catalogo-hero .content {
    align-items: center;
    justify-content: flex-end;
    padding: 24px 100px;
  }
}
.catalogo-hero .content .text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  .catalogo-hero .content .text {
    max-width: 45%;
    gap: 24px;
  }
}
.catalogo-hero .content .text h1 {
  font-weight: 700;
  font-style: Bold;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #001a41;
}
@media (min-width: 768px) {
  .catalogo-hero .content .text h1 {
    font-weight: 700;
    font-style: Bold;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
  }
}
.catalogo-hero .content .text p {
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #001a41;
}
@media (min-width: 768px) {
  .catalogo-hero .content .text p {
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
  }
}
.catalogo-hero .content .text a {
  font-weight: 700;
  font-style: Bold;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #001a41;
  background-color: #18bde6;
}

/*# sourceMappingURL=styles.css.map */