body {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    background: #e7ebeb;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.70);
    font-style: normal;
}

body.no-scroll #innerbody::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 899;
    opacity: 1;
    transition: opacity 0.4s ease;
}

body.page-template-front-page,
body.page-template-sell-car,
body.page-template-about,
body.page-template-contacts {
    background: #17191C;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Onest", sans-serif;
    font-weight: 400;
}

.button {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 6px 6px 6px 24px;
    border-radius: 33px;
    text-decoration: none;
    height: 66px;
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    font-weight: 600;
    transition: background 0.3s ease;
    letter-spacing: 1px;
    justify-content: space-between;
}

.button.primary {
    background: #F4C533;
}

.button.secondary {
    background: #fff;
}

.button.bordered {
    background: transparent;
    border: 1px solid #FDC200;
    padding: 6px 24px;
}

.button.bordered.button--with-circle {
    padding: 6px 6px 6px 24px;
}

.button.bordered:hover {
    background: rgba(253, 194, 0, 0.10);
}

.button.text-white .button-text {
    color: #fff;
}

.button-text {
    color: #040405;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 20px;
    letter-spacing: 0.16px;
}

.button-circle {
    width: 54px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #040405;
    border-radius: 27px;
    flex-shrink: 0;
    transition: all 0.3s ease 0s;
}

.button:hover .button-circle {
    transform: rotate(45deg) scale(1.1);
}

.heading-1 {
    color: #000;
    font-family: Onest, sans-serif;
    font-size: 62px;
    font-weight: 700;
    /*text-transform: capitalize;*/
    line-height: 68px;
}

.heading-1.text-white {
    color: #fff;
}

.heading-1 span.highlighted {
    color: #F4C533;
}

.heading-2 {
    color: #000;
    font-size: 57px;
    font-weight: 300;
    line-height: 100%;
    letter-spacing: -2.85px;
}

.heading-2.font-inter {
    font-family: Inter, sans-serif;
}

.heading-2.font-onest {
    font-family: Onest, sans-serif;
}

.heading-2.text-white {
    color: #fff;
}

.font-size-s {
    font-size: 16px;
    line-height: 125%;
    /* 20px */
}

.font-size-m {
    font-size: 18px;
    letter-spacing: -0.9px;
    line-height: 115%;
    /* 20,7px */
}

.text-white-70 {
    color: rgba(255, 255, 255, 0.70);
}

/* ============================================================
   # HEADER
   ============================================================ */
.header {
    padding: 48px 0;
}

.header_logo img {
    width: 249px;
}

.header_logo .logo {
    position: relative;
}
.header_logo img.logo-black {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity .2s linear;
}
.header--light:not(.sticky) .header_logo img.logo-black {
    opacity: 1;
}
.header--light.sticky .header_logo img.logo-black {
    opacity: 0;
}

.header a {
    transition: all 0.3s ease 0s;
    display: block;
    position: relative;
}

.header nav a:after {
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 1px;
    background: #fdc200;
    content: "";
    transition: all 0.3s ease 0s;
    width: 0;
}

.header nav a:hover:after,
.header nav li.current_page_item a:after {
    width: 100%;
    transition: all 0.3s ease 0s;
}

.header nav a:hover,
.header nav li.current_page_item a {
    transition: all 0.3s ease 0s;
    color: #fdc200;
}

.header a svg path {
    transition: all 0.3s ease 0s;
}

.header a svg {
    display: block;
    width: 56px;
    height: 56px;
    position: relative;
}

.header a:not(.header-phone-pill):hover path {
    transition: all 0.3s ease 0s;
    fill: #fdc200;
}

.header .header_city,
.header .header_languages {
    position: relative;
}

.header .header_city span,
.header .header_languages span {
    background: #e7ebeb;
    padding: 16px 40px 16px 15px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 6px;
    color: #17191c;
    font-family: "VelaSans", sans-serif;
    position: relative;
    font-weight: 500;
    display: block;
    letter-spacing: 0;
}

.header .header_city span:after,
.header .header_languages span:after {
    position: absolute;
    width: 16px;
    height: 12px;
    content: "";
    right: 11px;
    background-repeat: no-repeat;
    top: 22px;
    background-size: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.33341 1.41675L5.50008 5.58341L9.66675 1.41675' stroke='%2317191C' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.header .header_dropdowns {
    gap: 16px;
}

.header nav {
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
}

.header nav ul.flex {
    gap: 45px;
}

.header nav ul li{
    position: relative;
}

.header--light:not(.sticky) nav ul li a {
    color: #000;
}
.header--light.sticky nav ul li a {
    color: #fff;
}
.header--light:not(.sticky) nav ul li:before {
    position: absolute;
    content: '';
    height: 56px;
    left: -20px;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 28px;
    background: rgba(60, 60, 60, 0.10);
    transition: background-color .2s linear;
}
.header--light.sticky nav ul li:before {
    background: transparent;
}
.header .socials a{
    position: relative;
}
.header--light:not(.sticky) .socials a:before {
    position: absolute;
    content: '';
    top: 1px;
    left: 1px;
    width: calc(100% - 2px);
    background: #000000;
    border-radius: 50%;
    height: calc(100% - 2px);
}
.header--light.sticky .socials a:before {
    display: none;
}
.header--light:not(.sticky) .socials svg path {
    fill: rgb(213 217 217);
}
.header--light:not(.sticky) .header_languages span {
    background : #d5d9d9;
}
.header .content {
    grid-template-columns: 300px 1fr;
    gap: 210px;
}

.header .header_controls {
    gap: 48px;
}

.header .header_controls .dropdown-wr:hover .dropdown {
    display: block;
}

.header .header_controls .dropdown {
    background: #e7ebeb;
    z-index: 2;
    position: absolute;
    top: 36px;
    width: 100%;
    border-radius: 6px;
    left: 0;
    display: none;
    overflow: hidden;
    border: 2px solid #e7ebeb;
}

.header .header_controls .dropdown li {
    padding: 8px 12px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.header .header_controls .dropdown li:hover {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background: #fff;
}

.header .header_controls .socials ul {
    gap: 14px;
}

.header .toggler {
    border-radius: 50%;
}

.header .toggler svg {
    display: block;
}

.toggler {
    width: 64px;
    height: 64px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 10001;
}

.burger {
    position: relative;
    width: 19.8px;
    height: 13.2px;
}

.burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #27292e;
    border-radius: 1.1px;
    transition: 0.3s ease;
}

.burger span:nth-child(1) {
    top: 0;
}

.burger span:nth-child(2) {
    top: 5.5px;
}

.burger span:nth-child(3) {
    top: 11px;
}

.toggler.opened .burger span:nth-child(1) {
    top: 5.5px;
    transform: rotate(45deg);
}

.toggler.opened .burger span:nth-child(2) {
    opacity: 0;
}

.toggler.opened .burger span:nth-child(3) {
    top: 5.5px;
    transform: rotate(-45deg);
}

.header-phone-pill {
    display: none;
}

.header--figma {
    position: absolute;
    left: var(--viewport-offset, 0);
    top: 0;
    width: var(--viewport-base-width, 1920px);
    z-index: 1000;
    padding: 37px 0 0;
}

.header--figma .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    grid-template-columns: none;
}

.header--figma .header_logo {
    flex-shrink: 0;
    height: 59px;
}

.header--figma .header_logo img {
    width: 276px;
}

.header--figma .header_navigation-controls {
    flex: 1;
    justify-content: space-between;
    min-width: 0;
    height: 56px;
}

.header--figma nav {
    color: #fff;
    font-size: 14px;
}

.header--figma nav ul.flex {
    gap: 5px;
}

.header--figma nav a {
    position: relative;
    z-index: 0;
    min-height: 56px;
    padding: 0 20px;
    /*border: 1px solid rgba(255, 255, 255, 0.18);*/
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    display: flex;
    align-items: center;
    font-family: "Inter", "Onest", sans-serif;
    font-size: 16px;
    font-weight: 500;
    backdrop-filter: blur(14px);
}
.header--figma nav a:before {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 0px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to bottom right, #fff 0%, #ffffff00 46%, #ffffff00 50%, #fff 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
}

.header--figma nav a:after {
    display: none;
}


.header--figma nav a:hover,
.header--figma nav li.current_page_item a {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.28);
}

.header--figma .header_controls {
    gap: 12px;
    align-items: center;
}

.header--figma .socials {
    order: 1;
}

.header--figma .header_controls .socials ul {
    gap: 12px;
    align-items: center;
}

.header--figma .socials a {
    position: relative;
    z-index: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(14px);
}
.header--figma .socials a:before {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 0px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to bottom right, #fff 0%, #ffffff00 46%, #ffffff00 50%, #fff 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
}

.header--figma .socials a svg {
    width: 30px;
    height: 30px;
}

.header--figma .header-icon {
    color: #fff;
}

.header--figma .header-phone-pill {
    order: 2;
    height: 56px;
    padding: 0 3px 0 32px;
    border-radius: 50px;
    background: #F4C533;
    color: #040405;
    display: flex;
    align-items: center;
    gap: 24px;
    font-family: "Onest", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
}

.header--figma .header-phone-pill__icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #040405;
    color: #F4C533;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header--figma .header-phone-pill__icon svg {
    width: 30px;
    height: 30px;
}

.header--figma .header_dropdowns {
    order: 3;
    gap: 8px;
}

.header--figma .header_languages span {
    position: relative;
    z-index: 0;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    background:
            radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.10) 46%, rgba(255, 255, 255, 0.04) 100%),
            rgba(255, 255, 255, 0.12);
    box-shadow:
            inset 1px 1px 0.5px rgba(255, 255, 255, 0.65),
            inset -1px -1px 0.5px rgba(255, 255, 255, 0.24),
            0 12px 28px rgba(0, 0, 0, 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Onest", sans-serif;
    font-size: 20px;
    font-weight: 500;
    backdrop-filter: blur(14px);
}
.header--figma .header_languages span:before {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 0px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to bottom right, #fff 0%, #ffffff00 46%, #ffffff00 50%, #fff 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
}

.header--figma .header_languages span:after {
    display: none;
}

.header--figma .header_controls .dropdown {
    top: 68px;
    left: auto;
    right: 0;
    min-width: 86px;
    width: auto;
}

/* Invisible hit-area bridging the gap between the language circle and its
   dropdown, so moving the mouse down to the dropdown doesn't lose :hover. */
.header--figma .header_languages.dropdown-wr:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 20px;
}

.header--figma .toggler {
    display: none;
    order: 4;
}

.header--figma.header--light:not(.sticky) .header_logo img.logo-black {
    opacity: 1;
}

.header--figma.header--light nav ul li:before {
    display: none;
}


/*.header--figma.header--light:not(.sticky) nav a:hover,*/
/*.header--figma.header--light:not(.sticky) nav li.current_page_item a {*/
/*    color: #040405;*/
/*    background: rgba(4, 4, 5, 0.11);*/
/*}*/

.header--figma.header--light:not(.sticky) .socials a {
    /*border-color: rgba(4, 4, 5, 0.10);*/
    /*background: rgba(4, 4, 5, 0.08);*/
    background: rgb(152 152 152 / 10%) linear-gradient(136deg, rgba(216, 219, 219, 1) 0%, rgba(231, 234, 234, 1) 100%);
    color: #040405;
    box-shadow: none;
}

.header--figma.header--light:not(.sticky) .socials a:before {
    display: block;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: inherit;
    background: linear-gradient(to bottom right, #fff 0%, #ffffff00 46%, #ffffff00 50%, #fff 100%);
}

.header--figma.header--light:not(.sticky) .socials svg path,
.header--figma.header--light:not(.sticky) .header-icon path {
    fill: #040405;
}

.header--figma.header--light:not(.sticky) .header_languages span,
.header--figma.header--light:not(.sticky) nav a,
.header--figma.header--light:not(.sticky) .socials a{
    background: rgb(152 152 152 / 10%) linear-gradient(136deg, rgba(216, 219, 219, 1) 0%, rgba(231, 234, 234, 1) 100%);
    color: #040405;
    box-shadow: none;
}


.header--figma.header--light:not(.sticky) .header_controls .dropdown {
    background: #f3f5f5;
    border-color: rgba(4, 4, 5, 0.08);
}

.header--figma.header--light:not(.sticky) .header_controls .dropdown a {
    color: #040405;
}

.header--figma.header--light.sticky .header_logo img.logo-black {
    opacity: 0;
}

.header--figma.header--light.sticky .socials a:before {
    display: block;
}


/* --- Home --- */
.main-screen_home {
    background: url(../img/new-design/main-screen_home.jpg) no-repeat center;
    margin-bottom: 140px;
}

.main-screen_home .inside {
    height: 1040px;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.main-screen_home .hero-intro {
    display: inline-flex;
    flex-direction: column;
    gap: 24px;
}

.main-screen_home .hero-intro__heading {
    max-width: 727px;
}

.main-screen_home .hero-intro__description {
    max-width: 613px;
}

.main-screen_home .hero-intro__buttons {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 16px;
}

.main-screen_home .directions {
    display: flex;
    gap: 17px;
    color: #ffffff;
}

.main-screen_home .directions a.item {
    display: flex;
    width: 360px;
    height: 292px;
    padding: 28px 30px;
    flex-direction: column;
    justify-content: space-between;
    align-items: self-start;
    position: relative;
    border-radius: 28px;
}

.main-screen_home .directions a.item:nth-child(1) {
    background: #fff;
    color: #000;
}

.main-screen_home .directions a.item:nth-child(2) {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.65), inset -1px -1px 0.5px rgba(255, 255, 255, 0.3);
}

.main-screen_home .directions a.item:after {
    content: "";
    display: flex;
    width: 72px;
    height: 72px;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 30.498px;
    bottom: 28px;
    border-radius: 36px;
    background: #FDC200 url(../img/new-design/icon-arrow.svg) no-repeat center;
    transition: all 0.3s ease 0s;
}

.main-screen_home .directions a.item:hover:after {
    transform: rotate(45deg) scale(1.1);
}

.main-screen_home .directions a.item .icon {
    width: 158px;
    height: 104.699px;
}

.main-screen_home .directions a.item strong {
    letter-spacing: -1px;
}

.main-screen_home .directions a.item .text {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 21px;
    margin-top: -8px;
}

.main-screen_home .directions a.item:nth-child(2) p {
    max-width: 160px;
}

.main-screen_home .directions a.item p {
    color: #8C8C8C;
    font-weight: 300;
    max-width: 200px;
}

/* ============================================================
   # CARS SHOWCASE
   ============================================================ */
.cars-showcase {
    background: linear-gradient(180deg, #E8EBEB 0%, #ECE8E3 100%);
    border-radius: 48px;
    overflow: hidden;
    padding: 80px 0;
}

.cars-showcase__inner {
    display: flex;
    flex-direction: column;
    gap: 65px;
}

.cars-showcase__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.cars-showcase__desc {
    max-width: 699px;
}

.cars-showcase__content {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

/* --- Main slide --- */
.cars-showcase__main {
    position: relative;
    height: 1000px;
    width: 1343px;
    background: #7D7D7D;
    overflow: hidden;
    border-radius: 48px;
}

.cars-showcase__main-img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    will-change: opacity;
}

.cars-showcase__main-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 49%, rgba(0, 0, 0, 1) 95%);
}

.cars-showcase__progress-track {
    position: absolute;
    left: 50px;
    bottom: 50px;
    width: calc(100% - 100px);
    height: 5px;
    background: #D9D9D9;
    border-radius: 20px;
    overflow: hidden;
    z-index: 2;
}

.cars-showcase__progress-fill {
    height: 100%;
    width: 0;
    background: #FDC200;
    border-radius: 20px;
}

.cars-showcase__main-topbar {
    position: absolute;
    left: 50px;
    top: 50px;
    right: 50px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 2;
}

.cars-showcase__logo img {
    height: 55px;
    width: auto;
}

.cars-showcase__new-badge {
    padding: 10px 14px;
    background: #fff;
    border-radius: 50px;
    border: 1px solid #F4C533;
    color: #000;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 20px;
}

.cars-showcase__main-info {
    position: absolute;
    left: 50px;
    bottom: 83px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2;
}

.cars-showcase__verified {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 20px;
}

.cars-showcase__verified-icon {
    width: 34px;
    height: 34px;
    background: url(../img/new-design/verified-outline.svg) no-repeat center / contain;
    flex-shrink: 0;
}

.cars-showcase__verified span:last-child {
    color: #fff;
    font-family: Onest, sans-serif;
    font-size: 24px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 30px;
}

.cars-showcase__main-name {
    color: #fff;
    font-family: Onest, sans-serif;
    font-size: 40px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 40px;
}

.cars-showcase__main-specs {
    color: rgba(255, 255, 255, 0.70);
    font-family: Onest, sans-serif;
    font-size: 40px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 40px;
}

.cars-showcase__main-price {
    color: #fff;
    font-family: Onest, sans-serif;
    font-size: 44px;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 44px;
}

.cars-showcase__main-price em {
    font-size: 24px;
    font-weight: 300;
    line-height: 44px;
    text-transform: capitalize;
}

.cars-showcase__calc-btn {
    position: absolute;
    right: 50px;
    bottom: 89px;
}

/* --- Thumbnails --- */
.cars-showcase__thumbs {
    display: flex;
    gap: 30px;
    flex-direction: column;
    width: 427px;
}

.cars-showcase__thumb {
    flex: 1;
    height: 314px;
    position: relative;
    background: #7D7D7D;
    overflow: hidden;
    border-radius: 28px;
    padding: 28px 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

.cars-showcase__thumb-img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    /* top: -87px; */
    object-fit: cover;
}

.cars-showcase__thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 1) 100%);
}

.cars-showcase__thumb-info {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cars-showcase__thumb-name {
    color: #fff;
    font-family: Onest, sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 20px;
}

.cars-showcase__thumb-specs {
    color: rgba(255, 255, 255, 0.70);
    font-family: Onest, sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 20px;
}

.cars-showcase__thumb-price {
    color: #fff;
    font-family: Onest, sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 20px;
}

.cars-showcase__thumb-btn {
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    background: #F4C533;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.cars-showcase__thumb-btn:hover {
    transform: rotate(45deg) scale(1.1);
}

.cars-showcase__thumb.active .cars-showcase__thumb-overlay {
    background: linear-gradient(180deg, rgba(253, 194, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 100%);
}

/* ============================================================
   # KOMIS ABOUT
   ============================================================ */
.komis-about {
    margin: 140px 0 141px;
}

.komis-about__inner {
    position: relative;
    display: flex;
    align-items: flex-end;
}

.komis-about__photo-card {
    width: 684px;
    height: 944px;
    position: relative;
    left: 0;
    top: 0;
    border-radius: 48px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 50px 40px;
    margin-right: 111px;
}

.komis-about__photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
}

.komis-about__photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 1) 100%);
}

.komis-about__photo-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.komis-about__photo-title {
    color: #fff;
    font-family: Onest, sans-serif;
    font-size: 56px;
    font-weight: 500;
    line-height: 62px;
}

.komis-about__photo-desc {
    color: #fff;
    line-height: 129%;
}

.komis-about__title {
    font-weight: 600;
    line-height: 66px;
    position: absolute;
    left: 0;
    top: -309px;
    width: 620px;
}

.komis-about__arrow {
    position: absolute;
    right: 0;
    top: 0;
    width: 85px;
    height: 85px;
    background: #FDC200;
    border-radius: 42.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.komis-about__arrow:hover {
    transform: rotate(45deg);
}

.komis-about__cars-block {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    width: 529px;
    height: 637px;
    padding: 72px 50px;
}

.komis-about__cars-content {
    display: contents;
}

.komis-about__cars-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 529px;
    height: 637px;
    pointer-events: none;
    z-index: -1;
}

.komis-about__cars-title {
    max-width: 399px;
    font-family: Onest, sans-serif;
    font-size: 62px;
    font-weight: 500;
    line-height: 62px;
    letter-spacing: -3.1px;
}

.komis-about__google-card {
    padding: 40px;
    background: rgb(255 255 255);
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    align-items: center;
    align-self: center;
    margin-top: 153px;
    margin-left: 100px;
    width: 373px;
    height: 248px;
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.65), inset -1px -1px 0.5px rgba(255, 255, 255, 0.3);
}

.komis-about__google-card{
    overflow: hidden;
    position: relative;
}

.komis-about__google-card img{
    width: 90%;
    display: block;
    height: auto;
}

.komis-about__google-desc {
    max-width: 267px;
    color: rgba(255, 255, 255, 0.70);
    font-family: Inter, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 20.7px;
}

.komis-about__socials {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.komis-about__socials a{
    background: rgba(152, 152, 152, 0.20);
}

.komis-about__socials-label {
    color: rgba(255, 255, 255, 0.50);
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.socials-list {
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.socials-list a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background 0.3s ease;
    text-decoration: none;
    border: none !important;
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.65), inset -1px -1px 0.5px rgba(255, 255, 255, 0.3);
}

.socials-list a:hover {
    background: rgba(255, 255, 255, 0.20);
}

.socials-list .icon {
    width: 20px;
    height: 20px;
    fill: #fff;
}


/* ============================================================
   # MAIN SCREEN
   ============================================================ */

/* --- Sell Car --- */
.main-screen_sell-car {
    background: url(../img/new-design/main-screen_sell-car.jpg) no-repeat center / cover;
    margin-bottom: 90px;
}

.main-screen_sell-car .inside {
    height: 1073px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 170px;
}

.sell-hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-top: 309px;
}

.sell-hero__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 613px;
    align-items: flex-start;
}

.sell-hero__buttons {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 16px;
    flex-wrap: wrap;
}

.sell-hero__socials {
    display: flex;
    flex-direction: column;
    gap: 23px;
}

.sell-hero__socials-label {
    color: #B3B3B3;
    font-size: 14px;
    line-height: 24px;
}

.sell-hero__card {
    width: 623px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 28px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.65), inset -1px -1px 0.5px rgba(255, 255, 255, 0.3);
}

.sell-hero__card-icon {
    width: 72px;
    height: 72px;
    background: #FDC200;
    border-radius: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.sell-hero__card-text {
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 37px;
    font-weight: 300;
    line-height: 37px;
}

/* ============================================================
   # SKUP AUT
   ============================================================ */
.skup-aut {
    position: relative;
    background: linear-gradient(180deg, #E8EBEB 0%, #ECE8E3 100%);
    border-radius: 48px;
    overflow: hidden;
    padding: 81px 0;
    margin-top: -120px;
}

.skup-aut .inside {
    display: flex;
    gap: 59px;
    align-items: flex-end;
}

.skup-aut__photo {
    width: 812px;
    min-width: 812px;
    height: 898px;
    border-radius: 48px;
    overflow: hidden;
    position: relative;
}

.skup-aut__photo img {
    width: 830px;
    height: 1037px;
    object-fit: cover;
    display: block;
}

.skup-aut__photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 1) 100%);
}

.skup-aut__title {
    font-family: Onest, sans-serif;
    font-size: 62px;
    font-weight: 500;
    line-height: 62px;
    width: 100%;
    color: #000;
    margin-bottom: 27px;
    /* max-width: 270px; */
}

.skup-aut__cards {
    width: -webkit-fill-available;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-content: flex-start;
    /* padding-top: 17px; */
}

.skup-aut__card {
    width: calc(50% - 15px);
    padding: 40px;
    background: rgba(0, 0, 0, 0.10);
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.skup-aut__card h3 {
    max-width: 330px;
}

.skup-aut__card-icon {
    width: 60px;
    height: 60px;
    background: #F4C533;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: 18px;
}

.skup-aut__card-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ============================================================
   # ABOUT APPROACH
   ============================================================ */
.about-approach {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #E8EBEB 0%, #ECE8E3 100%);
    border-radius: 48px;
    overflow: hidden;
    padding: 80px 0;
    /* margin-top: 140px; */
}

.about-approach .inside {
    display: flex;
    gap: 59px;
    align-items: flex-start;
}

.about-approach__photo {
    width: 812px;
    min-width: 812px;
    height: 898px;
    border-radius: 48px;
    overflow: hidden;
    position: relative;
    background: #fff;
}

.about-approach__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-approach__photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 1) 100%);
    pointer-events: none;
}

.about-approach__content {
    flex: 1;
    min-width: 0;
}

.about-approach__title {
    color: #000;
    font-family: Onest, sans-serif;
    font-size: 62px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -3.1px;
    margin: 0 0 52px;
    white-space: nowrap;
}

.about-approach__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.about-approach__card {
    min-height: 329px;
    padding: 40px;
    background: rgba(0, 0, 0, 0.10);
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.about-approach__card-icon {
    width: 60px;
    height: 60px;
    background: #F4C533;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.about-approach__card-icon img {
    width: 22px;
    height: 22px;
}

.about-approach__card-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-approach__card h3 {
    max-width: 369px;
}

.about-approach__card p {
    max-width: 369px;
}

.about-service {
    margin-top: 0;
}

.about-service .inside {
    display: grid;
    grid-template-columns: minmax(0, 928px) minmax(0, 812px);
    gap: 58px;
    align-items: start;
}

.about-service__content {
    min-width: 0;
    padding-top: 0;
}

.about-service__intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 928px;
}

.about-service__title {
    max-width: 717px;
    margin: 0;
    white-space: normal;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -1.1px;
}

.about-service__text {
    max-width: 925px;
    color: rgba(0, 0, 0, 0.70);
    line-height: 1.25;
}

.about-service__text p,
.about-service__text br {
    margin: 0;
}

.about-service__cards {
    margin-top: 40px;
}

.about-service__card {
    min-height: 0;
}

.about-service__photo {
    width: 100%;
    min-width: 0;
    height: 745px;
}

.about-service__photo img {
    object-position: center;
}

/* ============================================================
   # ABOUT WHY CHOOSE
   ============================================================ */
.about-why-choose {
    position: relative;
    z-index: 1;
    background: #17191C;
    padding: 140px 0;
}

.about-why-choose .inside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.about-why-choose__image,
.about-why-choose__card {
    /* flex: 1 1 0; */
    min-width: 0;
    border-radius: 28px;
    overflow: hidden;
}

.about-why-choose__image {
    min-height: 606px;
    background: rgba(255, 255, 255, 0.10);
}

.about-why-choose__image img {
    width: 100%;
    height: 100%;
    min-height: 606px;
    object-fit: cover;
    display: block;
}

.about-why-choose__card {
    padding: 40px;
    background: rgba(255, 255, 255, 0.10);
    display: flex;
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.65), inset -1px -1px 0.5px rgba(255, 255, 255, 0.3);
    flex-direction: column;
    gap: 40px;
}

.about-why-choose__icon {
    width: 110px;
    height: 110px;
    border-radius: 28px;
    background: #F4C533;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.about-why-choose__icon img {
    width: 60px;
    height: 80px;
}

.about-why-choose__content,
.about-why-choose__heading,
.about-why-choose__list {
    display: flex;
    flex-direction: column;
}

.about-why-choose__content {
    gap: 30px;
}

.about-why-choose__heading {
    gap: 20px;
}

.about-why-choose__heading h2 {
    max-width: 578px;
    font-size: 57px;
    line-height: 1;
    font-weight: 300;
    letter-spacing: -2.85px;
    margin: 0;
}

.about-why-choose__heading p {
    max-width: 746px;
    margin: 0;
    letter-spacing: -0.9px;
}

.about-why-choose__list {
    width: 650px;
    max-width: 100%;
    gap: 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.about-why-choose__list li {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 21.5px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -1.07px;
}

.about-why-choose__list-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: #F4C533;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-why-choose__list-icon svg {
    width: 16px;
    height: 12px;
}

/* ============================================================
   # SERVICE AREA
   ============================================================ */
.service-area {
    position: relative;
    z-index: 1;
    background: #17191C;
    padding: 140px 0;
}

.service-area .inside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.service-area__image,
.service-area__card {
    min-width: 0;
    border-radius: 28px;
    overflow: hidden;
}

.service-area__image {
    min-height: 606px;
    background: rgba(255, 255, 255, 0.10);
}

.service-area__image img {
    width: 100%;
    height: 100%;
    min-height: 606px;
    object-fit: cover;
    display: block;
}

.service-area__card {
    padding: 40px;
    background: rgba(255, 255, 255, 0.10);
    display: flex;
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.65), inset -1px -1px 0.5px rgba(255, 255, 255, 0.3);
    flex-direction: column;
    gap: 40px;
}

.service-area__icon {
    width: 110px;
    height: 110px;
    border-radius: 28px;
    background: #F4C533;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.service-area__icon img {
    width: 60px;
    height: 80px;
}

.service-area__content,
.service-area__heading,
.service-area__list {
    display: flex;
    flex-direction: column;
}

.service-area__content {
    gap: 30px;
}

.service-area__heading {
    gap: 20px;
}

.service-area__heading h2 {
    max-width: 578px;
    font-size: 57px;
    line-height: 1;
    font-weight: 300;
    letter-spacing: -2.85px;
    margin: 0;
}

.service-area__heading p {
    max-width: 746px;
    margin: 0;
    letter-spacing: -0.9px;
}

.service-area__list {
    width: 650px;
    max-width: 100%;
    gap: 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.service-area__list li {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 21.5px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -1.07px;
}

.service-area__list-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: #F4C533;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-area__list-icon img {
    width: 16px;
    height: 16px;
}

/* ============================================================
   # CATALOG INFO
   ============================================================ */
.catalog-info {
    position: relative;
    z-index: 1;
    margin: 140px 0;
}
.catalog-info.catalog-info--dark {
    margin-top: 70px;
}
.catalog-info .inside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.catalog-info__card,
.catalog-info__image {
    min-width: 0;
    border-radius: 28px;
    overflow: hidden;
}

.catalog-info__card {
    padding: 40px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.catalog-info__icon {
    width: 110px;
    height: 110px;
    border-radius: 28px;
    background: #F4C533;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.catalog-info__icon img {
    width: 60px;
    height: 80px;
}

.catalog-info__content,
.catalog-info__heading {
    display: flex;
    flex-direction: column;
}

.catalog-info__content {
    gap: 30px;
}

.catalog-info__heading {
    gap: 20px;
}

.catalog-info__heading h2 {
    max-width: 631px;
    font-size: 57px;
    line-height: 1;
    font-weight: 300;
    letter-spacing: -2.85px;
    margin: 0;
}

.catalog-info__heading p {
    max-width: 746px;
    margin: 0;
    letter-spacing: -0.9px;
}

.catalog-info__image {
    min-height: 727px;
}

.catalog-info__image img {
    width: 100%;
    height: 100%;
    min-height: 727px;
    object-fit: cover;
    display: block;
}

.catalog-info--dark .catalog-info__card {
    background: #17191C;
}

/* ============================================================
   # SKUP WHY CHOOSE
   ============================================================ */
.skup-why-choose {
    position: relative;
    z-index: 1;
    background: #17191C;
    padding: 140px 0 0;
}

.skup-why-choose .inside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.skup-why-choose__image,
.skup-why-choose__card {
    min-width: 0;
    border-radius: 28px;
    overflow: hidden;
}

.skup-why-choose__image {
    min-height: 606px;
    background: rgba(255, 255, 255, 0.10);
}

.skup-why-choose__image img {
    width: 100%;
    height: 100%;
    min-height: 606px;
    object-fit: cover;
    display: block;
}

.skup-why-choose__card {
    padding: 40px;
    background: rgba(255, 255, 255, 0.10);
    display: flex;
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.65), inset -1px -1px 0.5px rgba(255, 255, 255, 0.3);
    flex-direction: column;
    gap: 40px;
}

.skup-why-choose__icon {
    width: 110px;
    height: 110px;
    border-radius: 28px;
    background: #F4C533;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.skup-why-choose__icon img {
    width: 60px;
    height: 80px;
}

.skup-why-choose__content,
.skup-why-choose__heading,
.skup-why-choose__list {
    display: flex;
    flex-direction: column;
}

.skup-why-choose__content {
    gap: 30px;
}

.skup-why-choose__heading {
    gap: 20px;
}

.skup-why-choose__heading h2 {
    max-width: 578px;
    font-size: 57px;
    line-height: 1;
    font-weight: 300;
    letter-spacing: -2.85px;
    margin: 0;
}

.skup-why-choose__heading p {
    max-width: 746px;
    margin: 0;
    letter-spacing: -0.9px;
}

.skup-why-choose__list {
    width: 650px;
    max-width: 100%;
    gap: 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.skup-why-choose__list li {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 21.5px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -1.07px;
}

.skup-why-choose__list-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: #F4C533;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skup-why-choose__list-icon img {
    width: 16px;
    height: 16px;
}

/* ============================================================
   # ABOUT OFFER
   ============================================================ */

.about-offer__card {
    margin-top: 142px;
    padding: 40px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.10);
}

.about-offer__title {
    margin: 0 0 35px;
    white-space: nowrap;
}

.about-offer__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.about-offer__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.about-offer__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.about-offer__item-main {
    display: flex;
    align-items: center;
    gap: 30px;
    min-width: 0;
}

.about-offer__icon {
    width: 110px;
    height: 110px;
    min-width: 110px;
}

.about-offer__text {
    max-width: 1075px;
    color: #fff;
    font-family: Onest, sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 36px;
    margin: 0;
}

.about-offer__button {
    flex-shrink: 0;
    align-self: flex-start;
}

/* ============================================================
   # SELL STEPS
   ============================================================ */
.sell-steps {
    padding: 140px 0 156px;
}

.sell-steps__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-bottom: 80px;
}

.sell-steps__header h2 {
    max-width: 1122px;
}

.sell-steps__header p {
    max-width: 613px;
    text-align: center;
}

.sell-steps__grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.sell-steps__grid::before {
    content: "";
    position: absolute;
    left: 110px;
    right: 110px;
    width: 1449px;
    top: 55px;
    height: 1.5px;
    background-image: repeating-linear-gradient(90deg,
    #F4C533 0px,
    #F4C533 9px,
    transparent 9px,
    transparent 18px);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 1) 13.33%, rgba(0, 0, 0, 0.10) 26.96%, rgba(0, 0, 0, 1) 48.76%, rgba(0, 0, 0, 0.10) 64.46%, rgba(0, 0, 0, 1) 84.74%, rgba(0, 0, 0, 0.10) 99.28%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 1) 13.33%, rgba(0, 0, 0, 0.10) 26.96%, rgba(0, 0, 0, 1) 48.76%, rgba(0, 0, 0, 0.10) 64.46%, rgba(0, 0, 0, 1) 84.74%, rgba(0, 0, 0, 0.10) 99.28%);
    z-index: 0;
}

.sell-steps__item {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 266px;
    position: relative;
    z-index: 1;
}

.sell-steps__number {
    width: 110px;
    height: 110px;
    background: #F4C533;
    border-radius: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    font-family: Inter, sans-serif;
    font-size: 40px;
    font-weight: 300;
    line-height: 40px;
}

.sell-steps__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ============================================================
   # SKUP INFO
   ============================================================ */
.skup-info {
    background: linear-gradient(180deg, #E8EBEB 0%, #ECE8E3 100%);
    border-radius: 48px;
    overflow: hidden;
}

.skup-info .inside {
    display: flex;
    align-items: flex-start;
    gap: 52px;
    padding-top: 80px;
    padding-bottom: 80px;
}

.skup-info__left {
    width: 625px;
    min-width: 625px;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.skup-info__icon {
    width: 110px;
    height: 110px;
    background: #F4C533;
    border-radius: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.skup-info__icon img {
    width: 60px;
    height: 80px;
}

.skup-info__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.skup-info__text p {
    margin: 0;
}

.skup-info__text p + p {
    margin-top: 20px;
}

.skup-info__photo {
    flex: 1;
    height: 779px;
    border-radius: 48px;
    overflow: hidden;
    position: relative;
}

.skup-info__photo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
}

.skup-info__badge {
    position: absolute;
    left: 30px;
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 28px;
    padding: 40px;
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.65), inset -1px -1px 0.5px rgba(255, 255, 255, 0.3);
}

.skup-info__badge-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    background: #FDC200;
    border-radius: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.skup-info__badge-icon img {
    width: 44px;
    height: 44px;
}

.skup-info__badge-text {
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 37px;
    font-weight: 300;
    line-height: 100%;
    letter-spacing: -0.05em;
    max-width: 533px;
}

/* ============================================================
   # SELL CONTACT
   ============================================================ */
.sell-contact {
    background: linear-gradient(180deg, #E8EBEB 0%, #ECE8E3 100%);
    border-radius: 48px;
    overflow: hidden;
}

.sell-contact .inside {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 80px;
    padding-bottom: 80px;
    gap: 80px;
}

.sell-contact__left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 42px;
    min-width: 0;
}

.sell-contact__header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1036px;
}

.sell-contact__header p {
    max-width: 613px;
}

.sell-contact__form-area {}

.sell-contact__photo {
    width: 610px;
    height: 962px;
    flex-shrink: 0;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
}

.sell-contact__photo img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}

.sell-contact__badge {
    position: absolute;
    left: 40px;
    bottom: 40px;
    padding: 30px;
    background: #fff;
    border-radius: 28px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.sell-contact__badge-icon {
    width: 72px;
    height: 72px;
    background: #FDC200;
    border-radius: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.sell-contact__badge-icon img {
    width: 44px;
    height: 44px;
    position: relative;
    left: 0;
    top: 0;
}

.sell-contact__badge-text {
    width: 270px;
    color: #000;
    font-family: Inter, sans-serif;
    font-size: 37px;
    font-weight: 300;
    line-height: 37px;
}

.sell-contact__badge-text strong {
    font-weight: 500;
}

/* ============================================================
   # SELL REVIEWS
   ============================================================ */
.page-template-front-page .sell-reviews {
    margin-top: 0;
}

.sell-reviews {
    margin: 140px 0 86px;
}
.sell-reviews .inside > .sell-reviews-head2 {
    max-width: 613px;
}

.sell-reviews .inside {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sell-reviews .inside > p {
    max-width: 613px;
}

/* Reviews block */
.sell-reviews__block {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Summary card */
.sell-reviews__summary {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 32px;
    padding: 32px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 234px;
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.65), inset -1px -1px 0.5px rgba(255, 255, 255, 0.3);
}

.sell-reviews__summary-stats {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sell-reviews__summary-row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.sell-reviews__count {
    font-size: 32px;
    font-weight: 800;
    color: rgba(212, 212, 216, 0.8);
    line-height: 40px;
    white-space: nowrap;
}

.sell-reviews__count span {
    color: #fff;
}

.sell-reviews__stars {
    display: flex;
    align-items: center;
}

.sell-reviews__star {
    display: block;
    flex-shrink: 0;
}

.sell-reviews__rating {
    font-size: 40px;
    font-weight: 800;
    color: #fff;
    line-height: 40px;
    white-space: nowrap;
}

.sell-reviews__forward {
    display: block;
    flex-shrink: 0;
}

.sell-reviews__avatars {
    display: flex;
    align-items: center;
}

.sell-reviews__avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.95);
    margin-right: -16px;
    flex-shrink: 0;
    overflow: hidden;
    object-fit: cover;
    border: 2px solid #FC0;
}

.sell-reviews__avatar--count {
    background: #7866c4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    margin-right: 0;
}

/* Cards grid */
.sell-reviews__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 29px;
    align-items: start;
}

.sell-reviews__card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 32px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.65), inset -1px -1px 0.5px rgba(255, 255, 255, 0.3);
}

.sell-reviews__card-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.sell-reviews__card-avatar {
    width: 51px;
    height: 51px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    overflow: hidden;
    object-fit: cover;
}

.sell-reviews__card-meta {
    display: flex;
    flex-direction: column;
}

.sell-reviews__card-name {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    line-height: 20px;
}

.sell-reviews__card-time {
    font-size: 14px;
    color: #868686;
    line-height: 18px;
    margin-top: 6px;
}

.sell-reviews__card-text {
    font-size: 12px;
    color: #e0e0e0;
    line-height: normal;
}

.sell-reviews__card-photos {
    display: flex;
    gap: 8px;
}

.sell-reviews__card-photo {
    width: 106px;
    height: 130px;
    background: #d9d9d9;
    border-radius: 15px;
    flex-shrink: 0;
}

.sell-reviews__col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* ============================================================
   # SELL CONTACTS
   ============================================================ */
.sell-contacts {
    margin: 86px 0 70px;
}

.sell-contacts__header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
}

.sell-contacts__header h2 {
    max-width: 727px;
}

.sell-contacts__header p {
    max-width: 613px;
}

.sell-contacts__body {
    display: flex;
    gap: 35px;
    align-items: flex-start;
}

.sell-contacts__map {
    width: 894px;
    height: 817px;
    flex-shrink: 0;
    border-radius: 48px;
    overflow: hidden;
}

.sell-contacts__map iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

.sell-contacts__cards {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
}

.sell-contacts__card {
    height: 392px;
    padding: 46px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 35px;
    position: relative;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right top;
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.65), inset -1px -1px 0.5px rgba(255, 255, 255, 0.3);
}

.sell-contacts__card:nth-child(1) {
    background-image: url(../img/new-design/contact-phone.svg);
}

.sell-contacts__card:nth-child(2) {
    background-image: url(../img/new-design/contact-telegram.svg);
}

.sell-contacts__card:nth-child(3) {
    background-image: url(../img/new-design/contact-watsap.svg);
}

.sell-contacts__card:nth-child(4) {
    background-image: url(../img/new-design/contact-email.svg);
}

/*.sell-contacts__card::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: 476px;*/
/*    height: 495px;*/
/*    left: 55px;*/
/*    top: -158px;*/
/*    background: radial-gradient(ellipse 50% 50% at 50% 50%, #F4C533 0%, rgba(244, 197, 51, 0) 100%);*/
/*    border-radius: 50%;*/
/*    pointer-events: none;*/
/*    !*opacity: 0.15;*!*/
/*    opacity: 0;*/
/*}*/

.sell-contacts__card-title {
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

.sell-contacts__card .button {
    padding: 6px 24px;
    width: fit-content;
    position: relative;
    z-index: 1;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
}

.sell-contacts__card .button:hover {
    transform: translateY(-3px);
    background: #e8b820;
}

.single-cars .sell-contacts .heading-1.text-white,
.single-cars .sell-contacts__header p,
.single-cars .sell-contacts__card-title{
    color: #000;
}
.single-cars .sell-contacts__card::after {
    content: "";
    position: absolute;
    width: 120%;
    height: 160%;
    left: -30px;
    top: -70px;
    pointer-events: none;
    box-shadow: inset 60px 90px 100px rgba(0, 0, 0, 0.1);
    border-radius: 100px 0 0 0;
}


/* =====================================================
   Buy on credit
   ===================================================== */

.buy-on-credit {
    background: #E8EBEB;
    padding-top: 80px;
    padding-bottom: 77px;
    border-radius: 48px;
    overflow: hidden;
}

.buy-on-credit__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 60px;
    z-index: 10;
    position: relative;
}

.buy-on-credit__intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 740px;
    align-items: flex-start;
}

.buy-on-credit__desc {
    color: rgba(0, 0, 0, 0.70);
    line-height: 1.5;
}

.buy-on-credit__social {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 720px;
    padding-top: 8px;
}

.buy-on-credit__clients {
    display: flex;
    align-items: center;
    gap: 40px;
}

.buy-on-credit__clients-img {
    width: min(100%, 190px);
    height: auto;
    display: block;
}

.buy-on-credit__clients-text {
    display: flex;
    flex-direction: column;
    line-height: 0.9;
    white-space: nowrap;
}

.buy-on-credit__clients-text span {
    color: #F4C533;
    font-family: var(--font-onest);
    font-size: 24px;
    font-weight: 500;
}

.buy-on-credit__clients-text strong {
    color: #000;
    font-family: var(--font-onest);
    font-size: 24px;
    font-weight: 800;
}

.buy-on-credit__social-desc {
    font-size: 18px;
    line-height: 1.18;
    color: rgba(0, 0, 0, 0.70);
    max-width: 720px;
}

/* Scene — full-width image with interactive spots */
.buy-on-credit__scene {
    position: relative;
    height: 845px;
    margin-top: -76px;
    z-index: auto;
}

.buy-on-credit__scene-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.buy-on-credit__fade {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 1;
}

.buy-on-credit__fade--top {
    top: 0;
    height: 130px;
    background: linear-gradient(to bottom, #E8EBEB 0%, rgba(232, 235, 235, 0) 100%);
}

.buy-on-credit__fade--bottom {
    bottom: -50px;
    height: 310px;
    background: linear-gradient(to top, #E8EBEB 0%, rgba(232, 235, 235, 0) 100%);
}

/* Interactive spots */
.credit-spot {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.credit-spot--1 {
    left: 25%;
    top: 72%;
}

.credit-spot--2 {
    left: 57.4%;
    top: 39%;
}

.credit-spot--3 {
    left: 8.8%;
    top: 51.5%;
}
.credit-spot:hover,
.credit-spot:focus-within {
    z-index: 50;
}

.credit-spot__btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #000;
    border: none;
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: 51px;
    padding-bottom: 8px;
    font-weight: 200;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    position: relative;
    z-index: 3;
    box-shadow: 0 0 0 35px rgba(255, 255, 255, 0.22);
    transition: all 0.3s ease;
}

.credit-spot:hover .credit-spot__btn {
    background: #F4C533;
    color: #040405;
}

.credit-spot:hover .credit-spot__btn {
    transform: rotate(45deg);
    box-shadow: 0 0 0 24px rgba(255, 255, 255, 0.15);
}

/* Popup card */
.credit-spot__card {
    position: absolute;
    bottom: calc(100% + 24px);
    left: 0;
    width: 280px;
    background: #fff;
    border-radius: 24px;
    padding: 28px 32px;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 60;
}

/* Spot 2 is near the top — popup opens below the button */
.credit-spot__card--below {
    bottom: auto;
    top: calc(100% + 24px);
    transform: translateY(-10px);
}

.credit-spot:hover .credit-spot__card {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.credit-spot__title {
    font-family: Inter, sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.1;
    color: #040405;
    margin-bottom: 12px;
}

.credit-spot__text {
    /* font-size: 16px; */
    line-height: 1.5;
    /* color: rgba(0, 0, 0, 0.70); */
}

/* =====================================================
   Why Us section
   ===================================================== */

.why-us {
    padding: 134px 0 140px;
}

.why-us__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 449px 449px 449px;
    gap: 30px;
    align-items: start;
}

.why-us__intro {
    grid-column: 1 / 4;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-top: 8px;
}

.why-us__desc {
    max-width: 353px;
}

.why-us__buttons {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 16px;
}

.why-us__card {
    min-width: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.65), inset -1px -1px 0.5px rgba(255, 255, 255, 0.3);
}

.why-us__card--big  { grid-column: 4; grid-row: 1; }
.why-us__card--sm-1 { grid-column: 2; grid-row: 2; }
.why-us__card--sm-2 { grid-column: 3; grid-row: 2; }
.why-us__card--sm-3 { grid-column: 4; grid-row: 2; }

.why-us__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    min-width: 60px;
    background: #F4C533;
    border-radius: 30px;
}

.why-us__card-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.why-us__card-body p {
    max-width: 260px;
}

/* ==========================================
   Order Calculation Form (car-pawnshop)
   ========================================== */

.order-calculation_form {
    background: linear-gradient(180deg, #E8EBEB 0%, #ECE8E3 100%);
    padding: 80px 0;
}

.order-calculation_form .grid.component {
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

.sto-auto-form {
    flex: 0 0 1110px;
    display: flex;
    flex-direction: column;
    gap: 31px;
}

.sto-auto-form__head {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sto-auto-form__title {
    font-family: Onest, sans-serif;
    font-weight: 700;
    font-size: 62px;
    line-height: 68px;
    text-transform: capitalize;
    color: #000000;
    max-width: 1036px;
}

.sto-auto-form__text {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.70);
    max-width: 613px;
}

.sto-auto-form__grid {
    display: grid;
    row-gap: 32px;
    column-gap: 30px;
}

.sto-auto-form__grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.sto-auto-form__grid--3 {
    grid-template-columns: repeat(3, 350px);
    gap: 30px;
}

.sto-auto-form__field {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.sto-auto-form__field .wpcf7-form-control-wrap {
    margin-top: -6px;
}
.sto-auto-form__field p {
    display: flex;
    flex-direction: column;
}

.sto-auto-form__field label {
    font-family: Onest, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0.16px;
    color: #000000;
}

.sto-auto-form__field input[type="text"],
.sto-auto-form__field input[type="tel"],
.sto-auto-form__field input[type="email"],
.sto-auto-form__field input[type="number"],
.sto-auto-form__field select {
    background: #F4F4F4;
    border: 1px solid #949597;
    border-radius: 99px;
    padding: 26px 30px;
    font-family: Onest, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: rgba(0, 0, 0, 0.70);
    width: 100%;
    appearance: none;
    outline: none;
    max-width: 540px;
}

.sto-auto-form__field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M3 5L7.5 10L12 5' stroke='%23090909' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 30px center;
    padding-right: 55px;
    cursor: pointer;
}

.sto-auto-form__field input[type="number"]::-webkit-inner-spin-button,
.sto-auto-form__field input[type="number"]::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

.sto-auto-form__field input[type="number"] {
    -moz-appearance: textfield;
}

.sto-auto-form__field textarea {
    background: #F4F4F4;
    border: 1px solid #949597;
    border-radius: 28px;
    padding: 20px 30px;
    height: 136px;
    font-family: Onest, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: rgba(0, 0, 0, 0.70);
    width: 100%;
    resize: none;
    outline: none;
}

.sto-auto-form__bottom {
    display: flex;
    align-items: flex-start;
    margin-top: 8px;
    justify-content: space-between;
    gap: 30px;
}

.sto-auto-form__acceptance {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.sto-auto-form__acceptance .wpcf7-acceptance input[type="checkbox"] {
    width: 23px;
    height: 23px;
    min-width: 23px;
    border: 1px solid #949597;
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    flex-shrink: 0;
    margin: 0;
}

.sto-auto-form__acceptance .wpcf7-acceptance input[type="checkbox"]:checked {
    background: #FDC200;
    border-color: #FDC200;
}

.sto-auto-form__acceptance span {
    font-family: Onest, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    text-transform: capitalize;
    color: #000000;
    max-width: 350px;
    margin: 0;
}
.sto-auto-form__acceptance span label {
    display: flex;
    gap: 15px;
}

.sto-auto-form__acceptance a {
    text-decoration: underline;
}

.sto-auto-form__button input[type="submit"] {
    background: #FDC200;
    border: none;
    border-radius: 50px;
    padding: 20px 32px;
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #040405;
    cursor: pointer;
    white-space: nowrap;
}

/* Photo card */
.calculation-photo {
    flex: 0 0 610px;
    height: 962px;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
}

.calculation-photo > img {
    position: absolute;
    left: -88px;
    top: -42px;
    width: 803px;
    height: 1004px;
    object-fit: cover;
}

.calculation-photo__badge {
    position: absolute;
    bottom: 40px;
    left: 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: #FFFFFF;
    border-radius: 28px;
    padding: 30px;
}

.calculation-photo__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    min-width: 72px;
    background: #FDC200;
    border-radius: 50%;
}

.calculation-photo__icon img {
    width: 44px;
    height: 44px;
}

.calculation-photo__badge span {
    font-family: Inter, sans-serif;
    font-weight: 300;
    font-size: 37px;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: #000000;
    max-width: 270px;
}

/* =====================================================
   Test Drive (new design)
   ===================================================== */

.test-drive-new {
    background: linear-gradient(180deg, #E8EBEB 0%, #ECE8E3 100%);
    border-radius: 48px;
    overflow: hidden;
    padding: 80px 0;
}

.test-drive-new__inner {
    display: flex;
    gap: 40px;
    align-items: stretch;
}

.test-drive-new__content {
    flex: 0 0 638px;
    display: flex;
    flex-direction: column;
    gap: 168px;
    padding-top: 10px;
    height: 100%;
    align-self: stretch;
}

.test-drive-new__top {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.test-drive-new__desc {
    max-width: 420px;
}

.test-drive-new__buttons {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 16px;
}

.test-drive-new__steps {
    display: flex;
    gap: 17px;
}

.test-drive-new__step {
    position: relative;
    width: 281px;
    min-width: 276px;
    height: 292px;
    border-radius: 49px;
    padding: 40px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    overflow: hidden;
}

.test-drive-new__step--1 {
    background: #ffffff;
}

.test-drive-new__step--2 {
    background: rgba(0, 0, 0, 0.1);
}

.test-drive-new__step-number {
    font-family: Inter, sans-serif;
    font-size: 57px;
    font-weight: 300;
    line-height: 100%;
    color: #000000;
}

.test-drive-new__step-text {
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: -0.9px;
    line-height: 115%;
    color: #8c8c8c;
    max-width: 180px;
}

.test-drive-new__step-arrow {
    position: absolute;
    bottom: 23px;
    right: 24px;
    width: 72px;
    height: 72px;
    background: #FDC200;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.test-drive-new__photo {
    flex: 1;
    min-width: 0;
    border-radius: 49px;
    overflow: hidden;
    height: 727px;
    align-self: flex-end;
}

.test-drive-new__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =====================================================
   FAQ Section (eighth block)
   ===================================================== */

.faq-section {
    margin: 140px 0;
}

.faq-section__inner {
    display: flex;
    gap: 126px;
    align-items: flex-start;
}

.faq-section__left {
    flex: 0 0 625px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 100px;
}

.faq-section__desc {
    max-width: 420px;
}

.faq-section__items {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 21px;
}

.faq-section__item {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #040405;
    border-radius: 32px;
    padding: 35px 32px;
    cursor: pointer;
    position: relative;
}

.faq-section__item:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 36px 0 0 0;
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.35);
}

.faq-section__item:after{
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 36px;
    height: 36px;
    border-radius:  0 0 36px 0 ;
    box-shadow: inset -1px -1px 0.5px rgba(255, 255, 255, 0.3);
}
.faq-section__item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.faq-section__item-question {
    font-family: Onest, sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 36px;
    color: #ffffff;
}

.faq-section__item-icon {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 36px;
    background: #FDC200;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
}

.faq-section__item-icon img {
    transform: rotate(225deg);
    transition: transform 0.25s ease;
}

.faq-section__item.is-open .faq-section__item-icon {
    background: #ffffff;
}

.faq-section__item.is-open .faq-section__item-icon img {
    transform: rotate(45deg);
}

.faq-section__item-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    font-size: 16px;
    line-height: 175%;
    color: rgba(255, 255, 255, 0.7);
    transition: max-height 0.4s ease, opacity 0.35s ease, padding-top 0.35s ease;
}

.faq-section__item.is-open .faq-section__item-answer {
    max-height: 400px;
    opacity: 1;
}

.footer {
    padding: 120px 0 60px;
    color: #fff;
    background: #17191c;
}

.footer .logo .footer_logo{
    width: 330px;
}

.footer__socials-label{
    color: rgba(255, 255, 255, 0.50);
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin: 50px 0 30px;
}

.footer .footer__socials-list {
    gap: 12px;
}

.footer .footer__socials-list a {
    position: relative;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: rgba(152, 152, 152, 0.20);
    border: 0;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
            inset 1px 1px 0.5px rgba(255, 255, 255, 0.65),
            inset -1px -1px 0.5px rgba(255, 255, 255, 0.25),
            0 4px 12px rgba(0, 0, 0, 0.12);
}

.footer .footer__socials-list a:before {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to bottom right, #fff 0%, #ffffff00 46%, #ffffff00 50%, #fff 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.footer .footer__socials-list a:hover {
    transform: scale(1.1);
}


.footer h6{
    font-family: Onest;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 33px;
}




.footer .coll-3 p a,
.footer .nav a {
    transition: all 0.3s;
    color: rgba(255, 255, 255, 0.50);
}
.footer .coll-3 p a:hover,
.footer .nav a:hover {
    transition: all 0.3s;
    color: #fdc200;
}
.footer .content {
    grid-template-columns: 350px 850px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.footer .content .collumns {
    grid-template-columns: 0.73fr 1fr 1fr;
}
.footer .content .collumns ul.grid {
    gap: 20px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.50);
}
.footer .content .collumns .coll-3 p {
    margin: 20px 0;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.50);
}

.mobile-navigation{
    display: none;
}

@media screen and (max-width: 1200px) {
    .inside {
        width: 1140px;
    }
    .header .content {
        grid-template-columns: auto auto;
    }
    .header {
        padding: 20px 0;
    }
    .header_logo img {
        width: 200px;
    }
    .header nav {
        display: none;
    }
    .header .header_city {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
    }
    /*.header .header_languages span*/
    .header .header_city span {
        padding: 10px 30px 10px 12px;
        font-size: 18px;
    }
    .header .header_city span:after,
    .header .header_languages span:after {
        right: 8px;
        top: 15px;
    }
    .header .header_controls {
        gap: 24px;
    }
    .header .socials a svg {
        width: 44px;
        height: 44px;
    }
    .header .header_controls .socials ul {
        gap: 10px;
    }
    .header--figma {
        padding: 20px 0 0;
    }
    .header--figma .content {
        gap: 24px;
    }
    .header--figma .header_navigation-controls {
        justify-content: flex-end;
        gap: 20px;
    }
    .header--figma .header_controls {
        gap: 12px;
    }
    .header--figma .header-phone-pill {
        display: none;
    }
    .header--figma .toggler {
        display: flex;
    }

    .mobile-navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #e7ebeb;
        z-index: 900;
        padding: 36px 20px;
        top: -110vh;
        display: block;
        -webkit-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    .mobile-navigation .inner {
        height: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .mobile-navigation .inner > div {
        width: 100%;
        margin-top: 50px;
    }
    .mobile-navigation .inner .email,
    .mobile-navigation .inner .phone {
        margin-bottom: 20px;
    }
    .mobile-navigation .inner .social .flex {
        gap: 10px;
        flex-wrap: wrap;
    }
    .mobile-navigation .inner .social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #FDC200;
        color: #17191C;
    }
    .mobile-navigation .inner .social img {
        max-width: 23px;
        max-height: 23px;
        filter: brightness(0);
    }
    .mobile-navigation .inner .social svg {
        display: block;
    }
    .mobile-navigation.opened {
        top: 0;
        -webkit-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    .mobile-navigation .header-bar {
        margin-bottom: 20px;
    }
    .mobile-navigation .nav-links {
        margin-bottom: 30px;
        margin-top: 50px;
    }
    .mobile-navigation .nav-links ul li a {
        color: #27292e;
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
    .mobile-navigation .cities {
        margin-bottom: 30px;
    }
    .mobile-navigation .cities ul {
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.8);
    }
    .mobile-navigation .cities ul a {
        padding: 10px;
        display: block;
        color: rgba(0, 0, 0, 0.8);
        border-radius: 3px;
    }
    .mobile-navigation .cities ul li.active a {
        background: #fdc200;
    }
    .mobile-navigation .languages ul {
        gap: 27px;
        color: #000;
    }
    .mobile-navigation .languages ul li:not(.active) a {
        color: rgba(0, 0, 0, 0.4);
    }

    .button{
        height: 54px;
        border-radius: 27px;
        padding: 4px 4px 4px 24px;
    }

    .button.bordered.button--with-circle {
        padding: 4px 4px 4px 24px;
    }

    .button-circle {
        width: 48px;
        height: 48px;
    }


    .heading-1 {
        font-size: 48px;
        line-height: 58px;
    }

    .heading-2 {
        font-size: 44px;
        letter-spacing: 0;
    }

    .main-screen_home {
        margin-bottom: 80px;
    }
    .main-screen_home .inside {
        height: 800px;
        gap: 30px;
    }
    .main-screen_home .directions a.item {
        width: 260px;
        padding: 28px 25px;
        height: 260px;
    }
    .main-screen_home .directions a.item:after{
        width: 54px;
        height: 54px;
        right: 24px;
        top: 24px;
    }
    .main-screen_home .directions a.item .icon {
        width: 118px;
        height: 75px;
    }
    .main-screen_home .directions a.item .icon img{
        width: 100%;
        height: auto;
    }
    .cars-showcase,
    .cars-showcase__main,
    .komis-about__photo-card,
    .skup-aut,
    .skup-aut__photo,
    .skup-info,
    .skup-info__photo,
    .sell-contact,
    .sell-contacts__map,
    .buy-on-credit,
    .test-drive-new {
        border-radius: 28px;
    }
    .cars-showcase,
    .buy-on-credit,
    .why-us,
    .test-drive-new,
    .sell-steps{
        padding: 80px 0;
    }
    .komis-about,
    .sell-reviews,
    .faq-section,
    .sell-contacts{
        margin: 80px 0;
    }

    .cars-showcase__main{
        height: 590px;
    }
    .cars-showcase__logo img {
        height: 35px;
    }
    .cars-showcase__main-info{
        top: auto;
        bottom: 60px;
        max-width: calc(100% - 310px);
    }
    .cars-showcase__verified span:last-child{
        font-size: 20px;
    }
    .cars-showcase__main-name,
    .cars-showcase__main-specs{
        font-size: 24px;
        line-height: 24px;
    }
    .cars-showcase__main-price {
        font-size: 30px;
    }
    .cars-showcase__progress-track{
        bottom: 36px;
    }
    .cars-showcase__calc-btn {
        bottom: 76px;
    }
    .cars-showcase__thumb-btn{
        width: 54px;
        height: 54px;
    }
    .cars-showcase__thumbs,
    .cars-showcase__content {
        gap: 20px;
    }
    .cars-showcase__thumb{
        padding: 28px 20px;
        height: 240px;
    }
    .cars-showcase__thumb-img {
        width: 100%;
        height: 100%;
        top: 0;
    }
    .cars-showcase__thumb-name,
    .cars-showcase__thumb-specs{
        font-size: 16px;
    }
    .komis-about__cars-title,
    .komis-about__photo-title{
        font-size: 48px;
    }
    .komis-about__photo-card{
        margin-right: 40px;
        height: 620px;
    }
    .komis-about__google-card{
        margin-left: 40px;
        height: 190px;
    }
    .komis-about__google-card > div {
        transform: scale(1.5);
        margin: -9px 0 0 5px;
        width: 240px;
    }
    .komis-about__cars-bg {
        width: 100%;
        height: 100%;
    }
    .komis-about__cars-block{
        width: 353px;
        height: 405px;
        padding: 50px 41px;
    }
    .komis-about__title{
        top: -224px;
    }
    .komis-about__arrow {
        top: -7px;
        width: 75px;
        height: 75px;
    }
    .buy-on-credit__scene {
        height: 535px;
        margin-bottom: -60px;
    }
    .credit-spot__btn {
        width: 48px;
        height: 48px;
    }
    .why-us__card{
        padding: 30px;
    }
    .why-us__card-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }
    .why-us__inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .why-us__intro {
        grid-column: 1 / 3;
    }

    .why-us__card--big  { grid-column: 3; grid-row: 1; }
    .why-us__card--sm-1 { grid-column: 1; grid-row: 2; }
    .why-us__card--sm-2 { grid-column: 2; grid-row: 2; }
    .why-us__card--sm-3 { grid-column: 3; grid-row: 2; }

    .test-drive-new__content{
        gap: 60px;
    }
    .test-drive-new__step{
        height: 250px;
    }
    .test-drive-new__step-arrow {
        width: 48px;
        height: 48px;
    }
    .test-drive-new__photo {
        height: auto;
        align-self: normal;
    }
    .sell-reviews__card-photo {
        width: 66px;
        height: 80px;
        border-radius: 6px;
    }
    .sell-reviews__card {
        border-radius: 20px;
        padding: 20px;
    }
    .sell-reviews__summary {
        border-radius: 20px;
        padding: 20px;
    }
    .sell-reviews__block {
        gap: 20px;
    }
    .sell-reviews__cards {
        gap: 20px;
    }
    .sell-reviews__col {
        gap: 20px;
    }
    .faq-section__inner {
        gap: 30px;
        flex-direction: column;
    }
    .faq-section__left {
        flex: auto;
    }
    .faq-section__item-icon{
        width: 48px;
        height: 48px;
    }
    .faq-section__item-question {
        font-size: 26px;
        line-height: 28px;
    }
    .faq-section__item {
        border-radius: 32px;
        padding: 16px 28px;
    }
    .sell-contacts__map {
        width: 480px;
        height: 480px;
    }
    .sell-contacts__card {
        height: 231px;
        padding: 30px;
        gap: 20px;
    }
    .sell-contacts__cards {
        gap: 20px;
    }
    .sell-contacts__card-title {
        font-size: 26px;
    }
    .footer .content{
        gap: 30px;
        grid-template-columns: 310px 850px;
    }
    .sell-hero {
        padding-top: 160px;
    }
    .main-screen_sell-car .inside {
        height: 750px;
        padding-bottom: 90px;
    }
    .sell-hero__card-icon {
        width: 48px;
        height: 48px;
    }
    .sell-hero__card {
        width: 623px;
        padding: 30px;
    }
    .sell-hero__card-text {
        font-size: 26px;
        line-height: 32px;
    }
    .skup-aut__photo {
        width: 480px;
        min-width: 480px;
        height: 818px;
    }
    .skup-aut .inside {
        gap: 40px;
    }
    .skup-aut__cards {
        gap: 20px;
    }
    .skup-aut__card {
        width: calc(50% - 15px);
        padding: 30px;
    }
    .skup-aut__card-icon{
        margin-bottom: 0;
    }
    .skup-aut__title {
        font-size: 52px;
        margin-bottom: 20px;
    }
    .about-approach .inside {
        gap: 40px;
    }
    .about-approach__photo {
        width: 480px;
        min-width: 480px;
        height: 818px;
    }
    .about-approach__title {
        font-size: 52px;
        margin-bottom: 32px;
        white-space: normal;
    }
    .about-approach__cards {
        gap: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .about-approach__card {
        padding: 30px;
        min-height: 280px;
        gap: 28px;
    }
    .about-service .inside {
        grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
        gap: 40px;
    }
    .about-service__cards {
        margin-top: 60px;
    }
    .about-service__photo {
        height: 745px;
    }
    .about-why-choose__image,
    .about-why-choose__image img {
        max-height: 560px;
    }
    .about-why-choose__heading h2 {
        font-size: 48px;
        letter-spacing: -2.4px;
    }
    .about-why-choose__list li {
        font-size: 19px;
    }
    .about-offer__text {
        font-size: 28px;
    }
    .about-offer__icon {
        width: 88px;
        height: 88px;
        min-width: 88px;
    }
    .about-offer__icon img {
        width: 56px;
        height: 56px;
    }
    .skup-info .inside {
        gap: 40px;
        flex-direction: column;
    }
    .skup-info__left {
        width: 100%;
    }
    .skup-info__photo {
        height: 580px;
        width: 100%;
        flex: unset;
    }
    .skup-info__badge {
        padding: 28px;
        gap: 16px;
    }
    .skup-info__badge-icon {
        width: 56px;
        height: 56px;
        min-width: 56px;
        border-radius: 28px;
    }
    .skup-info__badge-icon img {
        width: 32px;
        height: 32px;
    }
    .skup-info__badge-text {
        font-size: 26px;
        max-width: 320px;
    }
    .sell-steps__number {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        font-size: 33px;
    }
    .sell-steps__item .heading-2{
        font-size: 28px;
    }
    .sell-steps__grid::before {
        left: 60px;
        width: 819px;
        top: 45px;
    }
    .sell-contact__photo{
        display: none;
    }
    .sto-auto-form__field input[type="text"], .sto-auto-form__field input[type="number"], .sto-auto-form__field select{
        padding: 16px 30px;
    }

}

@media (max-width: 992px) {
    .inside {
        width: 932px;
    }

    /* Home */
    .main-screen_home {
        background: linear-gradient(to bottom, rgb(8 9 14), rgba(26, 27, 30, 0.7)), url(../img/new-design/main-screen_home.jpg) no-repeat center / 110%;
        background-blend-mode: color-dodge;
    }
    .main-screen_home .directions {
        flex-direction: column;
    }

    /* Headings */
    .heading-2 {
        font-size: 36px;
    }
    .komis-about__google-card {
        height: 150px;
    }
    .komis-about__google-card > div {
        transform: scale(1.15);
        margin: -29px 0 0 -35px;
    }
    /* Cars Showcase */
    .cars-showcase,
    .cars-showcase__main,
    .komis-about__photo-card,
    .skup-aut,
    .skup-aut__photo,
    .about-approach,
    .about-approach__photo,
    .skup-info,
    .skup-info__photo,
    .sell-contact,
    .sell-contacts__map,
    .buy-on-credit,
    .test-drive-new {
        border-radius: 20px;
    }
    .cars-showcase__content{
        flex-direction: column;
    }
    .cars-showcase__main{
        width: 100%;
    }
    .cars-showcase__thumbs{
        flex-direction: row;
        width: 100%;
    }
    .cars-showcase__progress-track {
        left: 30px;
        width: calc(100% - 60px);
    }
    .cars-showcase__main-info {
        left: 30px;
    }
    .cars-showcase__calc-btn {
        right: 30px;
    }
    .cars-showcase__main-name,
    .cars-showcase__main-specs {
        font-size: 26px;
        line-height: 26px;
    }
    .cars-showcase__main-price {
        font-size: 24px;
    }
    .cars-showcase__thumb {
        border-radius: 20px;
        padding: 20px 15px;
        height: 220px;
    }
    .cars-showcase__thumb-price {
        font-size: 20px;
    }
    .cars-showcase__thumb-btn {
        display: none;
    }

    /* Sell Reviews */
    .sell-reviews__cards {
        grid-template-columns: repeat(3, 1fr);
    }
    .sell-reviews__col {
        flex-direction: row;
        grid-column: span 2;
    }
    .sell-reviews__card-photo {
        width: 80px;
        height: 100px;
    }

    /* Sell Contacts */
    .sell-contacts__card .button span {
        font-size: 14px;
    }
    .sell-contacts__map {
        width: 370px;
    }
    .sell-contacts__card {
        padding: 20px;
    }

    /* Test Drive */
    .test-drive-new__content {
        flex: 0 0 448px;
    }

    /* Footer */
    .footer {
        padding: 70px 0 60px;
    }
    .footer .content .collumns {
        grid-template-columns: 0.7fr 1fr 1fr;
    }
    .footer .content {
        grid-template-columns: 250px 648px;
    }

    /* Sell Car — hero */
    .main-screen_sell-car {
        background: #0000004a url(../img/new-design/main-screen_sell-car.jpg) no-repeat center / cover;
        background-blend-mode: darken;
    }
    .sell-hero__card {
        width: 400px;
    }

    /* Skup Info */
    .skup-info__photo {
        width: 100%;
        height: 360px;
    }
    .skup-info__badge {
        padding: 20px 24px;
        gap: 14px;
        bottom: 20px;
        left: 20px;
        right: 20px;
    }
    .skup-info__badge-text {
        font-size: 20px;
        max-width: none;
    }

    /* Skup Aut */
    .skup-aut .inside {
        flex-direction: column-reverse;
    }
    .skup-aut__photo img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1.8;
    }
    .skup-aut__photo {
        width: 100%;
        height: auto;
        /* aspect-ratio: .5; */
    }
    .skup-aut__card {
        padding: 20px;
    }
    .about-approach .inside {
        flex-direction: column;
    }
    .about-approach__photo {
        width: 100%;
        min-width: 0;
        height: auto;
        aspect-ratio: 1.8;
    }
    .about-approach__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 70%;
        display: block;
    }
    .about-approach__photo.about-approach__photo--first img {
        object-position: center 20%;
    }
    .about-approach__card {
        padding: 20px;
        min-height: 0;
        /* width: 100%; */
    }
    .about-service .inside {
        grid-template-columns: 1fr;
    }
    .about-service__cards {
        margin-top: 32px;
    }
    .about-service__photo {
        width: 100%;
        height: auto;
        aspect-ratio: 1.8;
    }
    .about-service__photo img {
        width: 100%;
        height: 100%;
    }
    .about-why-choose .inside {
        display: flex;
        flex-direction: column;
    }
    .about-why-choose__image {
        /* min-height: 0; */
        /* aspect-ratio: 1.8; */
    }
    .about-why-choose__image img {
        /* min-height: 0; */
    }
    .about-why-choose__card {
        padding: 32px;
    }
    .about-why-choose__heading p {
        max-width: 100%;
    }
    .service-area .inside {
        display: flex;
        flex-direction: column;
    }
    .service-area__card {
        padding: 32px;
    }
    .service-area__heading p {
        max-width: 100%;
    }
    .catalog-info .inside {
        display: flex;
        flex-direction: column;
    }
    .catalog-info.catalog-info--dark .inside {
        flex-direction: column-reverse;
    }
    .catalog-info__card {
        padding: 32px;
    }
    .catalog-info__heading p {
        max-width: 100%;
    }
    .skup-why-choose .inside {
        display: flex;
        flex-direction: column;
    }
    .skup-why-choose__card {
        padding: 32px;
    }
    .skup-why-choose__heading p {
        max-width: 100%;
    }
    .about-offer__item {
        flex-direction: column;
        align-items: flex-start;
    }
    .about-offer__button {
        align-self: flex-start;
    }

    /* Buy on Credit */
    .buy-on-credit__social-desc {
        max-width: 680px;
    }

    /* Sell Steps */
    .sell-steps__grid::before {
        left: 87px;
        width: 609px;
        top: 41px;
    }

    /* Form */
    .sto-auto-form__grid--3 {
        grid-template-columns: repeat(3, 290px);
    }

    /* Catalog Hero */
    .catalog-hero {
        padding-top: 160px;
    }
    .catalog-hero .inside {
        padding-bottom: 80px;
    }
    .catalog-hero__card {
        height: 200px;
        padding: 22px 24px;
    }
    .catalog-hero:after {
        bottom: 250px;
    }
    .catalog {
        margin-top: -60px;
    }
}

@media (max-width: 576px) {
    .inside {
        width: 516px;
    }
    .header .socials {
        display: none;
    }

    /* Global */
    .button {
        gap: 6px;
        padding: 6px 6px 6px 32px;
        height: 64px;
        border-radius: 32px;
    }
    .button-text {
        font-size: 16px;
    }
    .font-size-s {
        font-size: 22px;
        line-height: 140%;
    }
    .font-size-m {
        font-size: 26px;
        line-height: 140%;
    }

    /* Headings */
    .heading-2 {
        font-size: 46px;
    }
    .about-approach {
        padding: 48px 0;
    }
    .about-approach__title {
        font-size: 42px;
        letter-spacing: -1.8px;
        margin-bottom: 24px;
    }
    .about-approach__cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .about-approach__card {
        border-radius: 20px;
        gap: 24px;
        width: 100%;
    }
    .about-approach__card h3 {
        max-width: 100%;
    }
    .about-approach__card p {
        max-width: 100%;
    }
    .about-approach__card-icon {
        width: 52px;
        height: 52px;
    }
    .about-service__intro {
        gap: 18px;
    }
    .about-service__title {
        line-height: 1.05;
    }
    .about-service__cards {
        margin-top: 24px;
    }
    .about-service__photo {
        aspect-ratio: 1.25;
        border-radius: 24px;
    }
    .about-why-choose {
        padding: 80px 0;
    }
    .about-why-choose__image,
    .about-why-choose__card {
        border-radius: 24px;
    }
    .about-why-choose__image {
        aspect-ratio: 1.25;
    }
    .about-why-choose__card {
        padding: 24px;
        gap: 28px;
    }
    .about-why-choose__icon {
        width: 78px;
        height: 78px;
        border-radius: 22px;
    }
    .about-why-choose__icon img {
        width: 50px;
        height: 50px;
    }
    .about-why-choose__heading h2 {
        font-size: 38px;
        letter-spacing: -1.7px;
        max-width: 100%;
    }
    .about-why-choose__heading p {
        letter-spacing: -0.4px;
    }
    .about-why-choose__list li {
        align-items: flex-start;
        font-size: 20px;
        letter-spacing: -0.6px;
    }
    .about-why-choose__list-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        margin-top: 1px;
    }
    .service-area {
        padding: 80px 0;
    }
    .service-area__image,
    .service-area__card {
        border-radius: 24px;
    }
    .service-area__image {
        aspect-ratio: 1.25;
    }
    .service-area__card {
        padding: 24px;
        gap: 28px;
    }
    .service-area__icon {
        width: 78px;
        height: 78px;
        border-radius: 22px;
    }
    .service-area__icon img {
        width: 50px;
        height: 50px;
    }
    .service-area__heading h2 {
        font-size: 38px;
        letter-spacing: -1.7px;
        max-width: 100%;
    }
    .service-area__heading p {
        letter-spacing: -0.4px;
    }
    .service-area__list li {
        align-items: flex-start;
        font-size: 20px;
        letter-spacing: -0.6px;
    }
    .service-area__list-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        margin-top: 1px;
    }
    .catalog-info {
        margin: 80px 0;
    }
    .catalog-info__card,
    .catalog-info__image {
        border-radius: 24px;
    }
    .catalog-info__image {
        aspect-ratio: 1.25;
        max-height: none;
    }
    .catalog-info__card {
        padding: 24px;
        gap: 28px;
    }
    .catalog-info__icon {
        width: 78px;
        height: 78px;
        border-radius: 22px;
    }
    .catalog-info__icon img {
        width: 50px;
        height: 50px;
    }
    .catalog-info__heading h2 {
        font-size: 38px;
        letter-spacing: -1.7px;
        max-width: 100%;
    }
    .catalog-info__heading p {
        letter-spacing: -0.4px;
    }
    .skup-why-choose {
        padding: 80px 0;
    }
    .skup-why-choose__image,
    .skup-why-choose__card {
        border-radius: 24px;
    }
    .skup-why-choose__image {
        aspect-ratio: 1.25;
    }
    .skup-why-choose__card {
        padding: 24px;
        gap: 28px;
    }
    .skup-why-choose__icon {
        width: 78px;
        height: 78px;
        border-radius: 22px;
    }
    .skup-why-choose__icon img {
        width: 50px;
        height: 50px;
    }
    .skup-why-choose__heading h2 {
        font-size: 38px;
        letter-spacing: -1.7px;
        max-width: 100%;
    }
    .skup-why-choose__heading p {
        letter-spacing: -0.4px;
    }
    .skup-why-choose__list li {
        align-items: flex-start;
        font-size: 20px;
        letter-spacing: -0.6px;
    }
    .skup-why-choose__list-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        margin-top: 1px;
    }
    .about-offer__card {
        margin-top: 80px;
        padding: 24px;
        border-radius: 24px;
    }
    .about-offer__title {
        margin-bottom: 28px;
        white-space: normal;
    }
    .about-offer__list {
        gap: 24px;
    }
    .about-offer__item {
        gap: 22px;
        padding-bottom: 24px;
    }
    .about-offer__item-main {
        align-items: flex-start;
        gap: 18px;
    }
    .about-offer__icon {
        width: 68px;
        height: 68px;
        min-width: 68px;
        border-radius: 18px;
    }
    .about-offer__icon img {
        width: 44px;
        height: 44px;
    }
    .about-offer__text {
        font-size: 24px;
        line-height: 1.15;
        letter-spacing: -0.6px;
    }

    /* Header */
    .header .content {
        gap: 110px;
    }
    .header--figma .content {
        gap: 18px;
    }
    /*.header--figma .header_logo img {*/
    /*    width: 190px;*/
    /*}*/
    .header--figma .header_navigation-controls {
        gap: 14px;
    }
    .header_logo img {
        width: 250px;
    }
    .toggler {
        width: 64px;
        height: 64px;
    }
    .mobile-navigation {
        font-size: 22px;
    }
    .mobile-navigation .nav-links {
        margin-top: 50px;
    }
    .mobile-navigation .nav-links ul li a {
        padding: 22px 0;
    }
    .sell-contacts__card {
        background-size: 160px auto;
        background-repeat: no-repeat;
        background-position: right top;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    /* Home */
    .main-screen_home {
        margin-bottom: 0;
        background: linear-gradient(to bottom, rgb(8 9 14), rgb(26 27 30)), url(../img/new-design/main-screen_home.jpg) no-repeat center / 110%;
        background-size: cover;
    }
    .main-screen_home .inside {
        height: auto;
        flex-direction: column;
        padding-top: 150px;
        backdrop-filter: blur(3px) brightness(.6);
        margin: 0;
        padding-left: 30px;
        padding-right: 30px;
        width: 100%;
        padding-bottom: 80px;
    }
    .main-screen_home .hero-intro__buttons {
                align-items: center;
        justify-content: space-between;
    }
    .main-screen_home .directions {
        width: 100%;
    }
    .main-screen_home .directions a.item {
        width: 100%;
        padding: 28px 30px;
        height: auto;
    }
    .main-screen_home .directions a.item:nth-child(2) p {
        max-width: 100%;
    }
    .main-screen_home .directions a.item p {
        max-width: 100%;
    }
    .main-screen_home .directions a.item .icon {
        width: 170px;
        height: 115px;
    }

    /* Cars Showcase */
    .cars-showcase__main {
        height: 440px;
    }
    .cars-showcase__logo img {
        display: none;
    }
    .cars-showcase__main-topbar {
        left: 30px;
        top: 30px;
        right: 30px;
    }
    .cars-showcase__verified {
        margin-bottom: auto;
    }
    .cars-showcase__main-specs {
        display: none;
    }
    .cars-showcase__main-name {
        font-size: 23px;
    }
    .cars-showcase__main-price {
        font-size: 20px;
    }
    .cars-showcase__main-info {
        height: 350px;
        justify-content: flex-end;
        max-width: 100%;
    }
    .cars-showcase__calc-btn {
        top: 78px;
        z-index: 10;
    }
    .cars-showcase__thumbs {
        margin-right: -30px;
        margin-left: -30px;
        overflow: auto;
        width: calc(100% + 90px);
        padding-right: 30px;
        scrollbar-width: none;       /* Firefox */
        -ms-overflow-style: none;    /* IE/Edge */
    }
    .cars-showcase__thumbs::-webkit-scrollbar {
        display: none;               /* Chrome/Safari */
    }
    .cars-showcase__thumb {
        min-width: 270px;
    }
    .cars-showcase__thumb:last-child{
        margin-right: 30px;
    }
    .cars-showcase__thumb:first-child{
        margin-left: 30px;
    }
    .cars-showcase__thumb-specs {
        display: none;
    }
    .cars-showcase__thumb-name {
        font-size: 20px;
    }

    /* Komis About */
    .komis-about__inner {
        flex-direction: column;
        gap: 30px;
    }
    .komis-about__cars-block {
        width: 100%;
        height: auto;
        padding: 0;
        order: 1;
    }
    .komis-about__cars-content {
        position: relative;
        z-index: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 12px;
        width: min(100%, 516px);
        min-height: 624px;
        margin-top: 40px;
        padding: 0 30px 90px;
    }
    .komis-about__cars-title {
        position: relative;
        bottom: auto;
        left: auto;
    }
    .komis-about__cars-title + p {
        position: relative;
        bottom: auto;
        left: auto;
    }
    .komis-about__cars-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin-top: 0;
    }
    .komis-about__title {
        top: 0;
        width: 100%;
        position: relative;
    }
    .komis-about__arrow {
        right: 0;
        bottom: auto;
        width: 110px;
        height: 110px;
        border-radius: 50%;
    }
    .komis-about__photo-card {
        margin-right: 0;
        height: 550px;
        order: 2;
        width: 100%;
    }
    .komis-about__google-card {
        margin-top: 20px;
        margin-left: 0;
        order: 3;
        width: 100%;
    }
    .komis-about__socials {
        position: relative;
        order: 4;
        margin-top: 20px;
    }
    .komis-about__socials-label {
        font-size: 19px;
    }
    .socials-list a {
        width: 64px;
        height: 64px;
    }
    .socials-list a img {
        width: 25px;
        height: 25px;
    }

    /* Sell Reviews */
    .sell-reviews__summary {
        flex-direction: column;
        gap: 30px;
    }
    .sell-reviews__card-text {
        font-size: 18px;
    }
    .sell-reviews__col {
        display: flex;
        flex-direction: column;
    }
    .sell-reviews__cards {
        display: flex;
        flex-direction: column;
    }

    /* Sell Contacts */
    .sell-contacts__body {
        flex-direction: column;
    }
    .sell-contacts__map {
        width: 100%;
    }
    .sell-contacts__card .button span {
        font-size: 15px;
    }

    /* Buy on Credit */
    .buy-on-credit__top {
        flex-direction: column;
    }
    .buy-on-credit__social {
        width: 100%;
        max-width: 100%;
    }
    .buy-on-credit__clients {
        gap: 20px;
    }
    .buy-on-credit__clients-img {
        width: min(52%, 190px);
    }
    .buy-on-credit__social-desc {
        max-width: 680px;
    }

    /* Why Us */
    .why-us__inner {
        display: flex;
        flex-direction: column;
    }
    .why-us__intro {
        grid-column: 1 / 1;
    }
    .why-us__card {
        width: 100%;
    }
    .why-us__card-body p {
        max-width: 100%;
    }

    /* Test Drive */
    .test-drive-new__inner {
        flex-direction: column;
    }
    .test-drive-new__steps {
        flex-direction: column;
    }
    .test-drive-new__step {
        height: auto;
        width: 100%;
    }
    .test-drive-new__step-text {
        font-size: 22px;
        line-height: 140%;
        max-width: 380px;
    }

    /* FAQ */
    .faq-section__item-answer {
        font-size: 22px;
        line-height: 140%;
        padding-top: 20px;
    }
    .faq-section__item-question {
        font-size: 30px;
        line-height: 36px;
    }

    /* Sell Car page */
    .main-screen_sell-car .inside {
        flex-direction: column;
        height: auto;
        padding-bottom: 120px;
        backdrop-filter: blur(3px) brightness(.6);
        margin: 0;
        padding-left: 30px;
        padding-right: 30px;
        width: 100%;
        gap: 40px;
    }
    .sell-hero {
        gap: 70px;
    }
    .sell-hero__card {
        width: 100%;
    }
    .sell-hero__socials-label {
        font-size: 22px;
    }

    /* Sell Steps */
    .sell-steps__grid {
        flex-direction: column;
        gap: 60px;
    }
    .sell-steps__grid::before {
        display: none;
    }
    .sell-steps__item {
        width: 100%;
        flex-direction: row;
    }
    .sell-steps__number {
        min-width: 80px;
    }

    /* Skup Aut cards */
    .skup-aut__card {
        width: 100%;
    }

    /* Form */
    .sto-auto-form__grid--2 {
        grid-template-columns: repeat(1, 1fr);
    }
    .sto-auto-form__grid--3 {
        grid-template-columns: repeat(1, 100%);
    }
    .sto-auto-form__field select {
        font-size: 22px;
    }
    .sto-auto-form__field textarea {
        font-size: 22px;
    }
    .sto-auto-form__field input[type="text"],
    .sto-auto-form__field input[type="number"],
    .sto-auto-form__field select {
        padding: 21px 30px;
        line-height: 1;
    }
    .sto-auto-form__bottom {
        flex-direction: column;
    }
    .sto-auto-form__acceptance span {
        font-size: 18px;
        line-height: 26px;
        max-width: 100%;
    }

    /* Footer */
    .footer {
        font-size: 22px;
    }
    .footer__socials-label {
        font-size: 22px;
    }
    .footer h6 {
        font-size: 28px;
    }
    .footer .coll-3 p a,
    .footer .nav a {
        font-size: 22px;
    }
    .footer .content {
        display: flex;
        flex-direction: column;
        gap: 70px;
    }
    .footer .content .collumns {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    /* Catalog Hero */
    .catalog-hero {
        padding-top: 100px;
    }
    .catalog-hero .inside {
        padding-bottom: 40px;
    }
    .catalog-hero__cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .catalog-hero__card {
        height: auto;
        min-height: 180px;
        padding: 18px 16px;
    }
    .catalog-hero__card .catalog-hero__card-title {
        font-size: 24px;
        letter-spacing: 0;
        line-height: 1.1;
    }
    .catalog-hero__card-desc {
        display: none;
    }
    .catalog-hero__card-img {
        height: 44px;
    }
    .catalog-hero__card-arrow {
        width: 40px;
        height: 40px;
        right: 16px;
        bottom: 16px;
    }
    .catalog-hero:after {
        bottom: 120px;
    }
    .catalog {
        margin-top: 0;
    }
}

/* ---- Catalog Hero ---- */
.page-template-buy-cars .sell-contacts,
.page-template-contacts .sell-contacts{
    display: none;
}
.catalog-hero {
    background: url(../img/new-design/сatalog.jpg) no-repeat top center / contain;
    padding-top: 217px;
    padding-bottom: 0;
    position: relative;
}
.catalog-hero:after{
    content: '';
    position: absolute;
    bottom: 410px;
    background: linear-gradient(0deg, #E8EAEA 0%, rgba(232, 234, 234, 0.00) 100%);
    width: 100%;
    left: 0;
    height: 180px;
}

.catalog-hero .inside {
    padding-bottom: 132px;
}

.catalog-hero__content {
    max-width: 763px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.catalog-hero__title {
    /* max-width: 763px; */
}

.catalog-hero__subtext {
    max-width: 572px;
}

.catalog-hero__buttons {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 16px;
}

.catalog-hero__cards {
    background: transparent;
    padding-bottom: 60px;
    position: relative;
    z-index: 1;
}

.catalog-hero__cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.catalog-hero__card {
    background: #fff;
    border-radius: 28px;
    padding: 28px 30px;
    height: 314px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
    border: none;
    cursor: pointer;
    transition: box-shadow 0.2s;
    position: relative;
}

.catalog-hero__card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
}

.catalog-hero__card-img {
    display: block;
    object-fit: contain;
    filter: brightness(0);
    height: 83px;
}

.catalog-hero__card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}

.catalog-hero__card-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.catalog-hero__card-title {
    display: block;
    letter-spacing: -0.15px;
}

.catalog-hero__card-desc {
    display: block;
}

.catalog-hero__card-arrow {
    content: "";
    display: flex;
    width: 60px;
    height: 60px;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 30.498px;
    bottom: 28px;
    border-radius: 50%;
    background: #FDC200 url(../img/new-design/icon-arrow.svg) no-repeat center;
    transition: all 0.3s ease 0s;
}
.catalog-hero__card-arrow img{
    display: none;
}
.catalog-hero__card:hover .catalog-hero__card-arrow{
    transform: rotate(45deg) scale(1.1);
}
.catalog-hero__card.is-active .catalog-hero__card-arrow {
    background-color: #040405;
    background-image: url(../img/new-design/icon-arrow-yellow.svg);
}
.catalog-hero__card.is-active:hover .catalog-hero__card-arrow {
    transform: rotate(45deg) scale(1.1);
}

.about-hero {
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    background-color: #17191C;
    height: 1203px;
    padding-top: 277px;
}

.about-hero::before,
.about-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.about-hero::before {
    inset: 0;
    background:
            linear-gradient(90deg, rgba(23, 25, 28, 0.96) 0%, rgba(23, 25, 28, 0.72) 34%, rgba(23, 25, 28, 0.18) 68%, rgba(23, 25, 28, 0.08) 100%),
            linear-gradient(180deg, rgba(23, 25, 28, 0.85) 0%, rgba(23, 25, 28, 0) 38%, #17191C 100%);
}

.about-hero::after {
    left: 0;
    right: 0;
    bottom: 0;
    height: 454px;
    background: linear-gradient(0deg, #17191C 0%, rgba(23, 25, 28, 0) 100%);
}

.about-hero .inside {
    position: relative;
    z-index: 1;
    padding-bottom: 0;
}

.about-hero__content {
    max-width: 590px;
    gap: 20px;
}

.about-hero__title {
    font-size: 62px;
    line-height: 68px;
}

.about-hero__subtext {
    max-width: 590px;
}

.about-hero__buttons {
    padding-top: 24px;
}

.about-hero__socials {
    padding-top: 56px;
    width: 208px;
    display: flex;
    flex-direction: column;
    gap: 23px;
}

.about-hero__socials-label {
    color: rgba(255, 255, 255, 0.50);
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
    white-space: nowrap;
}

.about-hero__socials .socials-list {
    gap: 12px;
    width: 208px;
}

.about-hero__socials .socials-list a {
    width: 43px;
    height: 43px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
    display: flex;
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.65), inset -1px -1px 0.5px rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 184px;
}
.about-hero__socials .socials-list a {
    position: relative;
    width: 43px;
    height: 43px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(152, 152, 152, 0.20);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
            inset 1px 1px 0.5px rgba(255, 255, 255, 0.65),
            inset -1px -1px 0.5px rgba(255, 255, 255, 0.25),
            0 4px 12px rgba(0, 0, 0, 0.12);
}
.about-hero__socials .socials-list a:before {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 0px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to bottom right, #fff 0%, #ffffff00 46%, #ffffff00 50%, #fff 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}
.about-hero__socials .socials-list a:hover {
    transform: scale(1.1);
}

.about-hero__socials .socials-list img {
    display: block;
}

.about-hero__badge {
    position: absolute;
    right: 0;
    top: 364px;
    z-index: 2;
    min-height: 114px;
    padding: 37px 40px 37px 40px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.65), inset -1px -1px 0.5px rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(18px);
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.about-hero__badge-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #FDC200;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.about-hero__badge-text {
    color: #fff;
    display: flex;
    flex-direction: column;
    font-family: "Onest", sans-serif;
    line-height: 1.05;
    width: 451px;
}

.about-hero__badge-text strong {
    font-size: 37px;
    font-weight: 500;
    font-family: "Inter", "Onest", sans-serif;
}

.about-hero__badge-text span {
    color: #fff;
    font-size: 32px;
    font-weight: 300;
    font-family: "Inter", "Onest", sans-serif;
}

.about-hero__cards {
    padding: 70px 0 80px;
}

.about-hero__cards-grid {
    gap: 30px;
}

.about-hero__card {
    height: 314px;
    padding: 27px 30px 28px 27px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    display: flex;
    flex-direction: column;
    gap: 29px;
}

.about-hero__card:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.about-hero__card-icon {
    width: 110px;
    height: 110px;
    border-radius: 28px;
    background: #F4C533;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-hero__card-img {
    width: 60px;
    height: 80px;
    object-fit: contain;
    filter: brightness(0);
}

.about-hero__card-footer {
    align-items: flex-start;
    align-self: end;
}

.about-hero__card .catalog-hero__card-text {
    gap: 20px;
}

.about-hero__card-title {
    color: #fff;
    font-size: 57px;
    line-height: 1;
    /* letter-spacing: -2.85px; */
    font-weight: 300;
    font-family: "Inter", "Onest", sans-serif;
}

.about-hero__card-desc {
    color: rgba(255, 255, 255, 0.44);
    line-height: 1.18;
    letter-spacing: -0.7px;
}

.contact-hero {
    height: 1037px;
    padding-top: 214px;
    background-position: right top;
}

.contact-hero .inside {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
}

.contact-hero__content {
    max-width: 815px;
}

.contact-hero__content .about-hero__title {
    font-size: 72px;
    line-height: 1.08;
}

.contact-hero__content .about-hero__subtext {
    max-width: 735px;
    font-size: 20px;
    line-height: 1.28;
}

.contact-hero__buttons {
    padding-top: 28px;
}

.contact-blocks .inside{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.contact-blocks {
    margin: -150px 0 0;
    position: relative;
    z-index: 2;
}

.contact-blocks__card {
    min-height: 704px;
    border-radius: 28px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.45), inset -1px -1px 0.5px rgba(255, 255, 255, 0.20);
}

.kontakt__map img,
.kontakt__map iframe,
.kontakt__block-photo img {
    width: 100%;
    height: 100%;
    min-height: 704px;
    display: block;
    border: 0;
}

.kontakt__contacts,
.kontakt__form {
    padding: 40px;
}

.kontakt__contacts {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.kontakt__contacts .heading-2,
.kontakt__form .heading-2 {
    font-size: 62px;
    line-height: 68px;
    font-weight: 700;
    text-transform: capitalize;
}

.contact-blocks__details {
    display: flex;
    flex-direction: column;
}

.contact-blocks__detail {
    min-height: 118px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 0 29px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
}

.contact-blocks__detail:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.contact-blocks__detail > span:last-child,
.contact-blocks__detail > .contact-blocks__detail-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-blocks__detail strong {
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 21px;
    font-weight: 500;
    line-height: 1;
}

.contact-blocks__detail span span {
    color: rgba(255, 255, 255, 0.70);
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 20px;
}

.contact-blocks__detail-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    flex: 0 0 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F4C533;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: inset 1px 1px 0.5px rgba(255, 255, 255, 0.65), inset -1px -1px 0.5px rgba(255, 255, 255, 0.25);
}

.contact-blocks__detail-icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.contact-blocks__socials {
    display: flex;
    gap: 12px;
    padding-top: 2px;
}

.contact-blocks__socials a {
    position: relative;
    z-index: 0;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: rgba(152, 152, 152, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
            inset 1px 1px 0.5px rgba(255, 255, 255, 0.65),
            inset -1px -1px 0.5px rgba(255, 255, 255, 0.25),
            0 4px 12px rgba(0, 0, 0, 0.12);
}

.contact-blocks__socials a:before {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to bottom right, #fff 0%, #ffffff00 46%, #ffffff00 50%, #fff 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
}

.contact-blocks__socials a:hover {
    transform: scale(1.1);
}


.kontakt__form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.kontakt__form .wpcf7,
.kontakt__form .sto-auto-form {
    width: 100%;
}

.kontakt__form .sto-auto-form {
    flex: none;
    gap: 22px;
}

.kontakt__form .sto-auto-form__grid,
.kontakt__form .sto-auto-form__grid--2,
.kontakt__form .sto-auto-form__grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 30px;
}
.kontakt__form .sto-auto-form__field .wpcf7-form-control-wrap {
    margin-top: 0;
}
.kontakt__form .sto-auto-form__field {
    gap: 20px;
}

.kontakt__form .sto-auto-form__field label {
    color: #fff;
    font-size: 18px;
    line-height: 20px;
}

.kontakt__form .sto-auto-form__field input[type="text"],
.kontakt__form .sto-auto-form__field input[type="tel"],
.kontakt__form .sto-auto-form__field input[type="email"],
.kontakt__form .sto-auto-form__field input[type="number"],
.kontakt__form .sto-auto-form__field select,
.kontakt__form .sto-auto-form__field textarea {
    max-width: none;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.38);
    color: #fff;
    padding: 25px 26px;
}

.kontakt__form .sto-auto-form__field input::placeholder,
.kontakt__form .sto-auto-form__field textarea::placeholder {
    color: rgba(255, 255, 255, 0.58);
}

.kontakt__form .sto-auto-form__field select {
    color: rgba(255, 255, 255, 0.70);
}

.kontakt__form .sto-auto-form__field--textarea,
.kontakt__form .sto-auto-form__bottom {
    grid-column: 1 / -1;
}

.kontakt__form .sto-auto-form__field textarea {
    height: 76px;
    border-radius: 99px;
}

.kontakt__form .sto-auto-form__bottom {
    margin-top: 6px;
    flex-wrap: wrap;
}
.kontakt__form .sto-auto-form__bottom .wpcf7-response-output {
    flex: 0 0 100%;
    width: 100%;
    margin: 20px 0 0 0;
}

.kontakt__form .sto-auto-form__acceptance span,
.kontakt__form .sto-auto-form__acceptance a {
    color: rgba(255, 255, 255, 0.72);
}

.kontakt__form .sto-auto-form__button input[type="submit"] {
    padding: 17px 28px;
}

.contact-about {
    margin-top: 120px;
}

.contact-about .inside {
    display: grid;
    grid-template-columns: minmax(0, 928px) minmax(0, 812px);
    gap: 58px;
    align-items: start;
}

.contact-about .about-service__cards {
    margin-top: 86px;
}

.contact-about .about-service__card {
    min-height: 329px;
}

.contact-about__photo {
    height: 745px;
}

.catalog {
    margin-top: -152px;
    margin-bottom: 120px;
    z-index: 100;
    position: relative;
}
.catalog .content {
    display: flex;
    gap: 40px;
    flex-direction: column;
}
.catalog .filter {
    background: #fff;
    border-radius: 28px;
}
.catalog .filter-body{
    display: flex;
    gap: 12px;
}
.catalog .product-list {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
}
.catalog .product-list .car-item .image a {
    height: 258px;
}

.viewed-cars .viewed-cars__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
}
.viewed-cars .car-item__image {
    height: 258px;
}

/* ---- Catalog Responsive ---- */
@media screen and (max-width: 1200px) {
    .catalog-hero {
        background : url(../img/new-design/сatalog.jpg) no-repeat top left / 1390px;
        padding-top: 115px;
    }
    .catalog-hero .inside {
        padding-bottom: 52px;
    }
    .catalog-hero__cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .catalog-hero__card {
        height: 240px;
    }
    .catalog-hero__card-img {
        height: 55px;
    }
}

@media (max-width: 992px) {
    .catalog-hero {
        padding-top: 160px;
    }
    .catalog-hero .inside {
        padding-bottom: 80px;
        position: relative;
        z-index: 1;
    }
    .catalog-hero__card {
        height: 200px;
        padding: 22px 24px;
    }
    .catalog-hero:after {
        bottom: 600px;
    }
    .catalog {
        margin-top: -60px;
    }
}

@media (max-width: 576px) {
    .catalog-hero {
        padding-top: 160px;
        background: url(../img/new-design/сatalog.jpg) no-repeat top center / 3250px;
    }
    .catalog-hero .inside {
        padding-bottom: 40px;
    }
    .car-item__spec span {
        font-size   : 22px;
    }
    .car-item__specs-row .car-item__spec:first-child {
        width : 170px;
    }
    .heading-1 {
        font-size: 42px;
        line-height: 54px;
    }
    .catalog-hero__cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .catalog-hero__card {
        height: auto;
        min-height: 180px;
        padding: 18px 16px;
    }
    .catalog-hero__card .catalog-hero__card-title {
        font-size: 24px;
        letter-spacing: 0;
        line-height: 1.1;
    }
    .catalog-hero__card-desc {
        display: none;
    }
    .catalog-hero__card-img {
        height: 44px;
    }
    .catalog-hero__card-arrow {
        width: 40px;
        height: 40px;
        right: 16px;
        bottom: 16px;
    }
    .catalog-hero:after {
        bottom: 120px;
    }
    .catalog {
        margin-top: 0;
    }
    /*Skup info*/
    .skup-info__left {
        min-width: 0;
    }
    .skup-info__icon {
        width: 80px;
        height: 80px;
    }
    .skup-info__icon img {
        width: 50px;
        height: 60px;
    }
}
/* ============================
   Car detail — redesign
   ============================ */

@media screen and (max-width: 1200px) {
    .about-hero {
        background-position: right center;
        background-size: contain;
        min-height: 980px;
        padding-top: 220px;
    }
    .header--figma .header_languages span {
        width: 50px;
        height: 50px;
    }
    .header--figma .socials a {
        width: 50px;
        height: 50px;
    }
    .header .socials a svg {
        width: 30px;
        height: 30px;
    }
    .about-hero .inside {
        padding-bottom: 0;
    }
    .about-hero__badge {
        right: 50px;
        top: 350px;
        width: 360px;
        padding: 20px 22px;
    }
    .about-hero__badge-text strong {
        font-size: 22px;
    }
    .about-hero__badge-text span {
        font-size: 18px;
    }
    .about-hero__card {
        height: 240px;
    }
    .about-hero__card-icon {
        width: 86px;
        height: 86px;
    }
    .about-hero__card-img {
        width: 52px;
        height: 52px;
    }
    .about-hero__card-title {
        font-size: 40px;
        line-height: 1;
    }
}

@media (max-width: 992px) {
    .about-hero {
        min-height: 940px;
        padding-top: 170px;
    }
    .about-hero::after {
        bottom: 0;
    }
    .about-hero__cards {
        padding-top: 90px;
    }
    .about-hero__badge {
        /* position: static; */
        width: 100%;
        max-width: 420px;
        margin-top: 42px;
    }
}

@media (max-width: 576px) {
    .about-hero {
        background-position: 58% top;
        background-size: cover;
        min-height: auto;
        padding-top: 150px;
    }
    .about-hero::before {
        background:
                linear-gradient(90deg, rgba(23, 25, 28, 0.94) 0%, rgba(23, 25, 28, 0.72) 58%, rgba(23, 25, 28, 0.24) 100%),
                linear-gradient(180deg, rgba(23, 25, 28, 0.78) 0%, rgba(23, 25, 28, 0.08) 46%, #17191C 100%);
    }
    .about-hero .inside {
        padding-bottom: 0;
    }
    .about-hero__content {
        max-width: 100%;
    }
    .about-hero__buttons {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }
    .about-hero__buttons .button {
        width: 100%;
    }
    .contact-hero__buttons {
        margin-top: 70px;
        align-items: flex-start;
    }
    .catalog-hero__buttons.contact-hero__buttons .button {
        width: auto;
    }
    .about-hero__socials {
        padding-top: 36px;
    }
    .about-hero__badge {
        display: none;
        max-width: 100%;
        min-height: 0;
        padding: 18px;
        gap: 14px;
        border-radius: 16px;
    }
    .about-hero__badge-icon {
        width: 48px;
        height: 48px;
    }
    .about-hero__badge-text strong {
        font-size: 20px;
        letter-spacing: -0.8px;
    }
    .about-hero__badge-text span {
        font-size: 16px;
        letter-spacing: -0.4px;
    }
    .about-hero__cards {
        padding: 80px 0 48px;
    }
    .about-hero__card {
        min-height: 178px;
        border-radius: 14px;
        justify-content: space-around;
        gap: unset;
        align-items: center;
    }
    .about-hero__card-icon {
        width: 100px;
        height: 100px;
        border-radius: 18px;
    }
    .about-hero__card-img {
        width: 60px;
        height: 80px;
    }
    .about-hero__card .about-hero__card-title {
        font-size: 28px;
        letter-spacing: -1.4px;
        line-height: 1;
    }
    .about-hero__card-footer {
        justify-content: center;
    }
    .about-hero__card-desc {
        display: none;
    }
    .about-hero::after {
        bottom: 0;
    }
    .about-approach--first {
        margin-top: 420px;
    }
}

@media screen and (max-width: 1200px) {
    .contact-hero {
        height: auto;
        min-height: 920px;
        padding-top: 220px;
        background-position: 60% top;
        background-size: cover;
    }
    .contact-hero .inside {
        gap: 30px;
    }
    .contact-blocks {
        margin-top: -110px;
    }
    .kontakt__contacts .heading-2,
    .kontakt__form .heading-2 {
        font-size: 44px;
        line-height: 50px;
    }
    .contact-blocks__card,
    .kontakt__map img,
    .kontakt__map iframe,
    .kontakt__block-photo img {
        min-height: 560px;
    }
    .kontakt__block-photo img {
        object-fit: cover;
    }
    .kontakt__contacts,
    .kontakt__form {
        padding: 30px;
    }
    .kontakt__form .sto-auto-form__grid,
    .kontakt__form .sto-auto-form__grid--2,
    .kontakt__form .sto-auto-form__grid--3 {
        grid-template-columns: 1fr;
    }
    .contact-about .about-service__cards {
        margin-top: 60px;
    }
    .contact-about .about-service__card {
        min-height: 280px;
    }
}

@media (max-width: 992px) {
    .contact-hero {
        min-height: 0;
        padding-top: 170px;
        padding-bottom: 88px;
    }
    .contact-hero .inside {
        flex-direction: column;
    }
    .contact-blocks {
        margin: 70px 0 0;
    }
    .contact-blocks .inside {
        grid-template-columns: 1fr;
    }
    .contact-blocks__card,
    .kontakt__map img,
    .kontakt__map iframe,
    .kontakt__block-photo img {
        min-height: 480px;
    }
    .kontakt__contacts {
        gap: 28px;
    }
    .contact-about {
        margin-top: 90px;
    }
    .contact-about .inside {
        grid-template-columns: 1fr;
    }
    .contact-about .about-service__cards {
        margin-top: 32px;
    }
    .contact-about .about-service__card {
        min-height: 0;
    }
}

@media (max-width: 576px) {
    .contact-hero {
        padding-top: 150px;
        padding-bottom: 56px;
        background-position: 58% top;
    }
    .contact-hero::before {
        background:
                linear-gradient(90deg, rgba(23, 25, 28, 0.94) 0%, rgba(23, 25, 28, 0.72) 58%, rgba(23, 25, 28, 0.24) 100%),
                linear-gradient(180deg, rgba(23, 25, 28, 0.78) 0%, rgba(23, 25, 28, 0.08) 46%, #17191C 100%);
    }
    .contact-blocks {
        margin: 48px 0 0;
    }
    .contact-blocks .inside {
        gap: 18px;
    }
    .contact-blocks__card {
        border-radius: 18px;
        min-height: 0;
    }
    .kontakt__map img,
    .kontakt__map iframe,
    .kontakt__block-photo img {
        min-height: 320px;
    }
    .kontakt__contacts,
    .kontakt__form {
        padding: 22px;
    }
    .kontakt__contacts .heading-2,
    .kontakt__form .heading-2 {
        font-size: 32px;
        line-height: 38px;
    }
    .contact-blocks__detail {
        min-height: 0;
        gap: 14px;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .contact-blocks__detail-icon {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }
    .contact-blocks__detail-icon img {
        width: 26px;
        height: 26px;
    }
    .contact-blocks__detail strong {
        font-size: 18px;
    }
    .contact-blocks__detail span span {
        font-size: 14px;
        overflow-wrap: anywhere;
    }
    .kontakt__form .sto-auto-form__field input[type="text"],
    .kontakt__form .sto-auto-form__field input[type="tel"],
    .kontakt__form .sto-auto-form__field input[type="email"],
    .kontakt__form .sto-auto-form__field input[type="number"],
    .kontakt__form .sto-auto-form__field select,
    .kontakt__form .sto-auto-form__field textarea {
        padding: 16px 20px;
    }
    .kontakt__form .sto-auto-form__bottom {
        flex-direction: column;
        align-items: stretch;
    }
    .contact-about {
        margin-top: 64px;
    }
    .contact-about .about-service__cards {
        margin-top: 24px;
    }
    .contact-about__photo {
        height: auto;
    }
}

/* 2-column grid */
.car-detail .content {
    grid-template-columns: 1fr 579px;
    gap: 32px;
    align-items: start;
}

.car-detail__main {
    min-width: 0;
}

/* Photo gallery */
.car-detail .car-photos {
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.car-detail .car-photos.is-ready {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.car-detail .car-photos__main {
    position: relative;
    aspect-ratio: 16 / 11;
}
.car-detail .car-photos .big-image-slider {
    margin-bottom: 0;
}
.car-detail .car-photos .big-image-slider:not(.slick-initialized) > div:not(:first-child) {
    display: none;
}
.car-detail .car-photos .big-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1189 / 819;
    object-fit: cover;
    border-radius: 15px;
    overflow: hidden;
}
.car-detail .car-photos .big-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

/* Thumbnails strip */
.car-detail .thumbnails {
    padding: 10px 0 16px;
}
.car-detail .thumbnails .slider {
    margin: 0 -8px;
}
.car-detail .thumbnails .slick-slide {
    padding: 0 8px;
}

.car-detail .thumbnails .slick-current .thumbnail {
    border: 5px solid #F4C533B2;
}
.car-detail .thumbnail {
    height: 134px;
    border: 5px solid transparent;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: #e8e8e8;
    opacity: 0.55;
    transition: opacity 0.2s;
}
.car-detail .thumbnails .slick-current .thumbnail {
    opacity: 1;
}

/* Nav buttons */
.car-photos__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 57px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAFAF9;
    border: 2.59px solid #E7E5E4;
    border-radius: 16px;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}
.car-photos__btn:hover { background: #f0efee; }
.car-photos__btn--prev { left: 21px; }
.car-photos__btn--next { right: 21px; }

/* Counter */
.car-photos__counter {
    position: absolute;
    bottom: 65px;
    right: 21px;
    z-index: 10;
    background: #fff;
    border: 1.29px solid #E7E5E4;
    border-radius: 10px;
    padding: 8px 16px;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    color: #000;
}

/* Car aside */
.car-aside__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.car-aside__title {
    font-family: "Onest", sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    color: #000;
    margin: 0;
}
.car-aside__year {
    font-family: "Onest", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: rgba(0, 0, 0, 0.7);
}

/* Price */
.car-aside__price {
    display: flex;
    justify-content: space-between;
    margin-top: 21px;
}
.car-aside__price-label {
    font-family: "Onest", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 36px;
    color: #000;
}
.car-aside__price-big {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    color: #F4C533;
    padding-top: 36px;
}
.car-aside__price-number {
    font-family: "Onest", sans-serif;
    font-weight: 700;
    font-size: 78px;
    line-height: 78px;
}
.car-aside__price-unit {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    padding-bottom: 6px;

}

/* Leasing card */
.car-leasing {
    border-radius: 28px;
    border: 1.29px solid #E7E5E4;
    box-shadow: 0px 5.17px 31.03px 0px rgba(8, 15, 56, 0.12);
    background: #fff;
    overflow: hidden;
    margin-top: 24px;
}
.car-leasing__header {
    padding: 10px;
    text-align: center;
    font-family: "Onest", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 31px;
    color: #000;
    border-bottom: 1px solid #F5F5F4;
}

.car-finance-card[hidden] {
    display: none;
}

.car-finance__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 2px;
    background: #b2b2b2;
    border-radius: 999px;
}

.car-finance__tabs--single {
    grid-template-columns: minmax(0, 1fr);
}

.car-finance__tabs--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.car-finance__tab {
    min-height: 47px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(0, 0, 0, 0.55);
    font-family: "Onest", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.car-finance__tab.is-active {
    background: #fff;
    color: #000;
    box-shadow: 0px 5.17px 20.69px 0px rgba(8, 15, 56, 0.1);
}

@media(max-width: 480px) {
  .car-finance__tabs--triple .car-finance__tab {
    min-height: 42px;
    font-size: 15px;
    line-height: 18px;
  }
}

.car-leasing__body {
    padding: 28px 21px 21px;
    display: flex;
    flex-direction: column;
}

.car-finance-card--single .car-leasing__body {
    padding: 0;
}

.car-finance-card--single {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.car-leasing__row {
    margin-top: -2px;
    display: flex;
    justify-content: space-between;
}
.car-leasing__row + .car-leasing__row {
    margin-top: 9px;
}

.car-leasing__row + .car-leasing__row .car-leasing__toggle {
    padding-top: 9px;
}
.car-leasing__label {
    font-family: "Onest", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    color: #000;
    padding-top: 17px;
}
.car-leasing__toggle {
    display: flex;
    align-items: center;
    border-radius: 999px;
    margin-top: 9px;
    gap: 2px;
}
.car-leasing__toggle-btn {
    font-family: "Onest", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.3);;
    border: none;
    border-radius: 999px;
    padding: 9px 21px 12px;
    height: 47px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.car-leasing__toggle-btn.is-active {
    background: #fff;
    color: #000;
    box-shadow: 0px 5.17px 20.69px 0px rgba(8, 15, 56, 0.1);
}

/* Slider rows */
.car-leasing__slider-row {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 6px;
}
.car-leasing__slider-row + .car-leasing__slider-row {
    margin-top: 33px;
}
.car-leasing__slider-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.car-leasing__value {
    font-family: "Onest", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 21px;
    color: #000;
}
.car-leasing__track {
    --leasing-progress: 25%;
    height: 13px;
    background: #E7E5E4;
    border-radius: 999px;
    position: relative;
    overflow: visible;
    cursor: pointer;
    touch-action: none;
}
.car-leasing__track-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #000;
    border-radius: 999px;
    width: var(--leasing-progress);
    overflow: hidden;
}
.car-leasing__track-thumb {
    position: absolute;
    left: clamp(55px, var(--leasing-progress), calc(100% - 55px));
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 109px;
    height: 57px;
    padding: 5px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 5.17px 10.35px rgba(8, 15, 56, 0.1);
    transform: translate(-50%, -50%);
    cursor: grab;
    user-select: none;
}
.car-leasing__track-thumb.is-dragging {
    cursor: grabbing;
}
.car-leasing__track-value {
    min-width: 36px;
    font-family: "Onest", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 18px;
    color: #000;
    text-align: center;
    white-space: nowrap;
}
.car-leasing__track-arrow {
    position: relative;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
}
.car-leasing__track-arrow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-left: 2px solid #10194E;
    border-bottom: 2px solid #10194E;
}
.car-leasing__track-arrow--prev::before {
    transform: translate(-35%, -50%) rotate(45deg);
}
.car-leasing__track-arrow--next::before {
    transform: translate(-65%, -50%) rotate(-135deg);
}

/* Rate display */
.car-leasing__rate {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}
.car-leasing__rate-label {
    font-family: "Onest", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #000;
}
.car-leasing__rate-amount {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    color: #F4C533;
}
.car-leasing__rate-number {
    font-family: "Onest", sans-serif;
    font-weight: 700;
    font-size: 78px;
    line-height: 78px;
}
.car-leasing__rate-unit {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    padding-bottom: 6px;
}

/* CTA */
.car-leasing__cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 40px;
}
.car-leasing__cta .button {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 6px 6px 24px;
    border-radius: 50px;
}
.car-leasing__cta .button-text {
    flex: 1;
    text-align: center;
}
.car-leasing__cta .button-circle {
    width: 48px;
    height: 48px;
}
.car-leasing__phone-button .button-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.car-cash .car-leasing__cta {
  padding-top: 0;
}

.car-credit {
    margin-top: 24px;
}

.car-credit .car-leasing__toggle {
    flex-wrap: wrap;
    justify-content: flex-end;
}
.car-credit .car-leasing__row:nth-child(n+2) {
    margin-top: 20px;
}

.car-credit .car-leasing__toggle-btn {
    white-space: normal;
    height: auto;
    min-height: 47px;
}

.car-credit__intro {
    font-family: "Onest", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 31px;
    color: #000;
    margin-bottom: 10px;
}

.car-credit .car-leasing__toggle.car-credit__employment {
    gap: 10px;
    justify-content: flex-start;
}
.car-leasing__column {
    flex-direction: column;
}

.car-credit__loan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
    padding: 18px 0 0;
    border-top: 1px solid #F5F5F4;
}

.car-credit__loan-value {
    font-family: "Onest", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 31px;
    color: #000;
    text-align: right;
}

.car-credit__result {
    margin-top: 24px;
}

.car-credit__benefits {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.7);
}

.car-credit__benefits li::before {
    content: "✓";
    color: #F4C533;
    font-weight: 700;
    margin-right: 8px;
}

.car-credit__notice {
    margin: 22px 0 0;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 18px;
    color: rgba(0, 0, 0, 0.55);
}

/* Characteristics — full-width row below the grid */
.car-detail .car-characteristics {
    padding: 0;
    background: initial;
    max-width: 1189px;
}

.car-detail .content + .car-characteristics {
    display: none;
}

/* Hide old h1.name — title is now in car-aside__title */
.car-detail .car-characteristics .name {
    display: none;
}

/* Characteristic cards */
.car-detail .char-cards {
    display: grid;
    gap: 20px;
    padding: 40px 0 20px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.car-detail .char-cards__item {
    display: grid;
    background: #fff;
    border: 1px solid #E7E5E4;
    border-radius: 16px;
}
.car-detail .char-cards__label {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 16px;
    color: rgba(0, 0, 0, 0.7);
    text-align: center;
    padding: 21px 8px 5px;
    align-self: end;
}
.car-detail .char-cards__value {
    font-family: "Onest", sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 29px;
    color: #000;
    text-align: center;
    padding: 0 8px 21px;
    align-self: start;
}

/* Car detail accordion */
.car-detail .car-tab-list {
    padding-bottom: 21px;
    max-width: 1189px;
}
.car-detail .car-tab {
    padding-top: 52px;
}
.car-detail .car-tab:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.car-detail .car-tab:nth-child(2):not(:last-child) {
    border-bottom-color: #E7E5E4;
    padding-bottom: 21px;
}
.car-detail .car-tab:last-child {
    padding-top: 72px;
}
.car-detail .car-tab__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 21px 0;
    cursor: pointer;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
}
.car-detail .car-tab__title {
    font-family: "Onest", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 36px;
    color: #000;
}
.car-detail .car-tab__icon {
    width: 31px;
    height: 31px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.car-detail .car-tab.is-open .car-tab__icon {
    transform: rotate(180deg);
}
.car-detail .car-tab__body {
    display: none;
    padding-bottom: 31px;
}
.car-detail .car-tab.is-open .car-tab__body {
    display: block;
}
.car-detail .car-tab__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 67px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.car-detail .car-tab__row:last-child {
    border-bottom: none;
}
.car-detail .car-tab__label {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: rgba(0, 0, 0, 0.7);
}
.car-detail .car-tab__value {
    font-family: "Onest", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #000;
    text-align: right;
}
.car-detail .car-tab__body--content {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.7);
}

.car-gallery-fancybox .fancybox-toolbar {
    position: fixed;
    left: var(--car-gallery-close-left, 16px);
    right: auto;
    top: var(--car-gallery-close-top, 16px);
    width: 55px;
    height: 55px;
}

.car-gallery-fancybox .fancybox-button--close {
    width: 45px;
    height: 45px;
    padding: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
}

.car-gallery-fancybox .fancybox-button--close svg {
    pointer-events: none;
}

@media(max-width: 1200px){
    .car-detail .content {
        grid-template-columns : 1fr 450px;
    }
    .car-leasing__toggle-btn{
        font-size: 16px;
    }
    .car-aside__price-number,
    .car-leasing__rate-number{
        font-size: 58px;
        line-height: 58px;
    }
    .viewed-cars .viewed-cars__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .car-detail .thumbnails .slider {
        margin: 0 -5px;
    }
    .car-detail .thumbnails .slick-slide {
        padding: 0 5px;
    }
    .car-detail .thumbnail {
        height : 94px;
    }
    .car-detail .char-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media(max-width: 992px){
    .car-detail .content {
        grid-template-columns: 1fr 400px;
    }
    .car-detail .char-cards__value {
        font-size   : 18px;
        line-height : 22px;
    }
}
@media (max-width: 576px) {
    .car-detail .content {
        grid-template-columns: 1fr;
    }
    .car-cash .car-leasing__cta .button {
        width: 100%;
    }
    .viewed-cars .viewed-cars__list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .test-drive-new__buttons{
        flex-wrap: nowrap;
    }
}