/* setup */
@font-face {
    font-family: "Arial Narrow";
    font-weight: 400;
    font-style: normal;

    src:
        url("../fonts/arialnarrow.ttf") format("truetype");
    font-display: swap;
}
@layer reset,
timer,
fancybox,
ui,
base,
responsive;

body {
	font-family: 'Arial', sans-serif;
	line-height: 1.2;
}

html {
	scroll-behavior: smooth;
}

/* variables */

:root {
	--color-accent: #473781;

	--color-primary: #a59ebd;

	--color-secondary: #181231;

	--color-gray: #949494;

	--color-white: #fff;

	--color-black: #000;
}

/* modificators & ui */

.d-none {
	display: none;
}

@layer ui {
	/* container */

	.container {
		width: 100%;
		max-width: 1280px;
		height: 100%;
		display: block;
		margin: 0 auto;
	}

	.svgs {
		display: none;
	}

	strong {
		font-weight: 700;
	}

	.btn {
		background: none;
		border: none;
		border-radius: 0;
		font-family: 'Arial Narrow', sans-serif;
		text-transform: uppercase;
		/* color: var(--color-white); */
		cursor: pointer;
		transition: all 0.3s;
		white-space: nowrap;
	}

	.btn:not(.btn_border, .btn_light) {
		color: var(--color-white);
	}

	.btn.btn_dark {
		background-color: #181231;
		padding: 17px 20px;
		width: 100%;
	}

	.btn.btn_border {
		border: 1px solid #181231;
		padding: 17px 40px;
		width: 100%;
		color: var(--color-black);
	}
	.btn.btn_light {
		background-color: var(--color-white);
		padding: 17px 40px;
		width: 100%;
		color: var(--color-black);
	}

	@media (hover: hover) {
		.btn:hover {
			scale: 1.1;
		}

		.btn:not(.btn-accent):hover {
			background-color: var(--color-accent);
			color: #fff;
		}
	}

	.btn:disabled {
		opacity: 0.3;
		cursor: not-allowed;
	}

	.btn-accent {
		background-color: var(--color-accent);
	}

	.btn-primary {
		background-color: var(--color-primary);
		color: var(--color-secondary);
	}

	.btn-secondary {
		background-color: var(--color-secondary);
	}

	.border-accent {
		background: none;
		border: 1px solid var(--color-accent);
		color: var(--color-accent);
	}

	.border-secondary {
		background: none;
		border: 1px solid var(--color-secondary);
		color: var(--color-secondary);
	}

	.border-white {
		background: none;
		border: 1px solid var(--color-white);
		color: var(--color-white);
	}

	.section {
		margin-top: 150px;
		overflow: hidden;
	}

	.section__title {
		text-transform: uppercase;
		color: var(--color-accent);
		font-size: 36px;
		width: 100%;
		position: relative;
		margin-bottom: 80px;
		font-family: 'Arial Narrow', sans-serif;
	}

	.section__title::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateX(calc((100vw - 1280px) / 2));
		height: 1px;
		width: 58vw;
		background-color: var(--color-black);
	}

	/* fancybox */

	.fancybox-button.fancybox-close-small {
		color: var(--color-primary);
	}
}

.desc-hide {
	display: none;
}

/* base styles */

@layer base {
	/* header */

	.header {
		background: black;
		backdrop-filter: blur(20px);
		padding: 10px 0;
		color: var(--color-white);
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 2;
	}

	.header_mob {
		display: none;
	}

	.header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header__links {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	.header__logo {
		width: 122px;
	}

	.header__logo img {
		width: 100%;
	}

	.header__tel {
		font-size: 18px;
		font-weight: 700;
	}

	.header__nav ul {
		display: flex;
		align-items: center;
		gap: 30px;
		font-size: 18px;
		text-transform: uppercase;
	}

	.header__nav li {
		transition: all 0.3s;
	}

	.header__nav li:hover {
		scale: 1.1;
		text-decoration: underline;
	}

	.header__callback {
		color: var(--color-white);
		display: flex;
		align-items: center;
		gap: 5px;
		font-size: 18px;
		font-weight: 700;
		padding: 20px 40px;
	}

	/* hero section */

	.hero {
		height: 800px;
		/* background-image: url(../img/hero.webp); */
		/* background-image: url(../img/hero-1.webp); */
		/* background-image: url(../img/hero-2.webp); */
		/* background-image: url(../img/bg-geely-desk.webp); */
		/* background-image: url(../img/bg-geely-desk2.webp); */
		background-image: url(../img/banner_geely_desk.webp);
		background-size: cover;
		background-position: center;
		color: var(--color-white);
	}

	.hero__inner {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		padding-top: 160px;
		/* padding-bottom: 27px; */
		padding-bottom: 37px;
	}

	.hero__heading {
		/* font-size: 60px; */
		font-size: 40px;
		font-weight: 700;
		text-transform: uppercase;
	}

	.hero__heading span {
		color: var(--color-accent);
	}

	.hero__subheading {
		margin-top: 10px;
		/* font-size: 45px; */
		line-height: 75px;
		font-size: 35px;
		font-weight: 400;
	}

	.hero__benefits {
		/* margin-top: 30px; */
		margin-top: 69px;
		display: flex;
		flex-direction: column;
		gap: 20px;
		font-size: 24px;
		font-weight: 700;
	}

	.hero__benefits li {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.hero__btn {
		font-size: 18px;
		font-weight: 700;
		color: var(--color-white);
		background-color: var(--color-accent);
		padding: 30px 40px;
		width: 407px;
		margin-top: 30px;
		text-wrap: nowrap;
	}

	.hero__text {
		font-size: 24px;
	}

	.hero__text span {
		display: block;
		font-size: 36px;
		font-weight: 700;
		margin-bottom: 5px;
		text-transform: uppercase;
	}

	.hero__bottom {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 50px;
	}

	/* models section */

	.models__grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 40px;
		column-gap: 30px;
	}

    .models__head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 34px;
    }

    .models__nav {
        display: flex;
        column-gap: 34px;
        font-size: 26px;
        line-height: 30px;
        white-space: nowrap;
        text-transform: uppercase;
        color: var(--color-accent);
		font-family: 'Arial Narrow', sans-serif;
		flex-wrap: wrap;
		justify-content: end;
    	flex: auto;
        /* width: 50%; */
    }
	.models__nav:not(.show-more) a:nth-child(n + 6) {
        display: none;
    }
	.models__nav-show-more > svg {
		cursor: pointer;
		transition: transform 0.3s ease-out;
	}
	.models__nav-show-more.show-more > svg {
		transform: rotate(180deg);
		
	}

    .models__nav-itm {

    }

	/* model card */

	.card {
		padding: 30px 20px;
		border: 1px solid var(--color-accent);
		background-color: var(--white);

		display: grid;
		grid-template:
			'photos photos'
			'heading credit'
			'color-select credit'
			'benefits benefits'
			'prices prices'
			'buttons buttons';

		grid-template-columns: 1fr 1fr;
		row-gap: 14px;

		position: relative;
		overflow: hidden;
	}

	.card::after {
		content: '';
		position: absolute;
		right: 0;
		bottom: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 525px 625px;
		z-index: -2;
		border-color: transparent transparent var(--color-gray) transparent;
	}

	.card__photos {
		grid-area: photos;

		display: flex;
		justify-content: space-between;
	}

	.card__main-img {
		max-width: 340px;
		height: 180px;
	}

	.card__main-img img {
		width: 100%;
		display: none;
	}

	.card__main-img img.active {
		display: block;
	}

	.card__gallery {
		display: grid;
		grid-template-columns: repeat(2, 97px);
		gap: 10px;
		height: max-content;
	}

	.card__gallery a {
		overflow: hidden;
	}

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

	.card__heading {
		grid-area: heading;

		/* font-size: 32px; */
		font-size: 24px;
		font-weight: 700;
		color: var(--color-secondary);
		text-transform: uppercase;
	}

	.card__color-select {
		grid-area: color-select;

		font-size: 16px;
		color: var(--color-secondary);
	}

	.card__colors {
		display: flex;
		gap: 10px;
		margin-top: 5px;
	}

	.card__colors .color {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		cursor: pointer;
		box-shadow: 0px 1px 2px var(--color-black);
	}

	.card__colors .color.active {
		border: 2px solid var(--color-accent);
		scale: 1.3;
	}

	.card__credit {
		grid-area: credit;

		font-size: 14px;
		text-transform: uppercase;
		text-align: right;
		color: var(--color-white);
		position: relative;
		padding: 20px 0;
		height: max-content;
		/* transform: translate3d(0,0,0); */
	}

	.card__credit::after {
		content: '';
		position: absolute;
		z-index: -1;
		left: 0;
		top: 0;
		width: 150%;
		height: 100%;
		background-color: var(--color-primary);
		mix-blend-mode: color-burn;
		transform-origin: left;
		transform: skewX(-50deg) translateX(8%);
	}

	.card__credit span {
		display: block;
		font-size: 26px;
		font-weight: 700;
		text-transform: none;
		margin-top: 5px;
	}

	.card__benefits {
		grid-area: benefits;

		display: grid;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 15px;
	}

	.card__benefits li {
		display: flex;
		align-items: center;
		gap: 10px;
		color: var(--color-secondary);
	}

	.card__benefits li:nth-child(even) {
		color: var(--color-white);
	}

	.card__prices {
		grid-area: prices;

		text-align: right;
		color: var(--color-white);
		font-weight: 700;
	}

	.card__prices .old-price {
		font-size: 16px;
	}

	.card__prices .current-price {
		font-size: 32px;
		text-transform: uppercase;
	}

	.card__prices .current-price span {
		color: var(--color-secondary);
	}

	.card__buttons {
		grid-area: buttons;

		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 20px;
	}

	.card__buttons .btn {
		height: 60px;
		font-size: 16px;
	}

	/* selection section */

	.selection {
		color: var(--color-secondary);
	}

	.selection__main {
		position: relative;
		/* height: 745px; */
		height: 785px;
	}

	.selection__inner {
		width: 516px;
	}

	.selection__image {
		position: absolute;
		height: 100%;
		right: 0;
		top: 0;
		width: 55%;
	}

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

	.selection__image .step-num {
		position: absolute;
		bottom: 0;
		left: -30px;
		transform: translateX(-100%);
		color: var(--color-gray);
		font-size: 24px;
		font-weight: 700;

		display: none;
	}

	.selection__image .step-num .current {
		font-size: 45px;
	}

	.selection__form {
		width: 100%;
	}

	.step {
		display: none;
	}

	.step.active {
		display: flex;
		flex-direction: column;
		gap: 30px;
		max-height: 390px;
		/* overflow-y: auto; */
	}

	.selection__heading {
		font-size: 24px;
		font-weight: 700;
		text-transform: uppercase;
		margin-bottom: 40px;
	}

	.radio {
		display: flex;
		align-items: center;
		gap: 15px;
		font-size: 24px;
		text-transform: uppercase;
		cursor: pointer;
	}

	.radio input[type='radio'] {
		display: none;
	}

	.radio input[type='radio'] + span {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		border: 1px solid var(--color-secondary);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.radio input[type='radio']:checked + span::after {
		content: '';
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: var(--color-black);
	}

	.step_final input {
		height: 64px;
		padding: 0 15px;
		font-size: 18px;
		font-weight: 700;
	}

	.step_final .btn {
		margin-top: 20px;
		height: 83px;
		font-size: 24px;
		font-weight: 700;
	}

	.step_final .agreement {
		margin-top: -20px;
	}

	.selection__nav {
		position: absolute;
		/* bottom: 60px; */
		width: 516px;
		display: flex;
		gap: 20px;
		justify-content: space-between;

		bottom: 0;
	}

	.selection__nav .btn {
		height: 36px;
		width: 100%;
	}

	/* credit [program] section */

	.program__inner {
		height: 587px;
		position: relative;
	}

	.program__img {
		position: absolute;
		left: 0;
		top: 0;
		width: 53%;
		height: 100%;
	}

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

	.program__content {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-between;
		height: 100%;
		width: 516px;
		margin-left: auto;
	}

	.program__text {
		width: 100%;
	}

	.program__heading {
		font-size: 34px;
		text-transform: uppercase;
		color: var(--color-secondary);
	}

	.program__benefits {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: 20px;
		font-size: 18px;
	}

	.program__form {
		display: flex;
		flex-direction: column;
		gap: 30px;
		width: 100%;
	}

	.program__form input {
		height: 64px;
		width: 100%;
		padding: 0 15px;
		font-size: 18px;
	}

	.program__form .btn {
		height: 83px;
		font-size: 24px;
		margin-top: 20px;
	}

	.program__form .agreement {
		margin-top: -10px;
		position: relative;
	}

	/* agreement element */

	.agreement {
		display: flex;
		align-items: center;
		gap: 5px;
		color: var(--color-secondary);
		user-select: none;
	}

	.agreement_white {
		color: var(--color-white);
	}

	.agreement input[type='checkbox'] {
		/* display: none; */
		position: absolute;
		opacity: 0;
		width: auto;
	}

	.agreement input[type='checkbox'] + span {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 11px;
		height: 11px;
		border-radius: 50%;
		border: 1px solid var(--color-secondary);
		cursor: pointer;
	}

	.agreement_white input[type='checkbox'] + span {
		border-color: var(--color-white);
	}

	.agreement input[type='checkbox'] + span::after {
		content: '';
		width: 3px;
		height: 3px;
		border-radius: 50%;
		background-color: var(--color-black);
		opacity: 0;
		transition: opacity 0.3s linear;
	}

	.agreement_white input[type='checkbox'] + span::after {
		background-color: var(--color-primary);
	}

	.agreement input[type='checkbox']:checked + span::after {
		opacity: 1;
	}

	.agreement p {
		font-size: 12px;
	}

	.agreement a {
		text-decoration: underline;
	}

	/* trade-in section */

	.trade-in .program__content {
		margin-left: 0;
		margin-right: auto;
	}

	.trade-in .program__img {
		left: auto;
		right: 0;
	}

	.trade-in .program__heading {
		max-width: 360px;
	}

	/* contacts */

	.map {
		height: 570px;
	}

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

	.contacts__list {
		background-color: var(--color-primary);
		padding: 23px 80px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24px;
		color: var(--color-white);
		transform: translateY(-50%);
	}

	.contacts__list li {
		display: flex;
		align-items: center;
		gap: 25px;
	}

	.footer {
		background-color: var(--color-secondary);
		padding: 60px 0;
		color: var(--color-white);
		font-size: 10px;
		margin-top: 130px;
	}

	.footer__inner {
		display: flex;
		justify-content: space-between;
	}

	.footer__links {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.footer__disclaimer {
		max-width: 544px;
	}

	/* modals */

	.modal {
		width: 800px;
		height: 410px;
		padding: 0;
		background-size: cover;
		color: var(--color-white);
	}

	#modal-special {
		background-image: url(../img/modals/special.webp);
	}

	#modal-credit {
		background-image: url(../img/modals/credit.webp);
	}

	#modal-thanks {
		background-image: url(../img/modals/thanks.webp);
	}

	#modal-already {
		background-image: url(../img/modals/already.webp);
	}

	.modal__inner {
		width: 100%;
		height: 100%;
		padding: 30px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.modal__title {
		font-size: 42px;
		font-weight: 700;
		text-transform: uppercase;
	}

	.modal__title span {
		color: var(--color-primary);
	}

	.modal__subtitle {
		font-size: 24px;
		font-weight: 700;
		margin-top: 10px;
		text-transform: uppercase;
	}

	.modal__form {
		width: 328px;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.modal__form input {
		height: 40px;
		font-size: 16px;
		padding: 0 10px;
	}

	.modal__form .btn {
		height: 40px;
		font-weight: 700;
		font-size: 16px;
		color: var(--color-white);
	}

	.modal__form .agreement {
		margin-top: -10px;
	}
}

/* responsive */

@layer responsive {
	@media screen and (max-width: 1400px) {
		/* container */

		.container {
			max-width: 1140px;
		}

		/* section style */

		.section {
			margin-top: 100px;
		}

		.section__title::after {
			transform: translateX(calc((100vw - 1140px) / 2));
		}

		/* header */

		.header__logo {
			width: 100px;
		}

		.header__tel {
			font-size: 16px;
		}

		.header__nav ul {
			font-size: 16px;
		}

		.header__callback {
			font-size: 16px;
			padding: 14px 30px;
		}

		/* hero section */

		.hero__inner {
			padding-top: 120px;
		}

		.hero__heading {
			font-size: 50px;
		}

		.hero__btn {
			width: 340px;
		}

		/* model card */

		.card::after {
			border-width: 0 0 480px 580px;
		}

		.card__main-img {
			max-width: 280px;
			height: 160px;
		}

		.card__buttons .btn {
			font-size: 12px;
			height: 44px;
		}

		/* selection */

		.selection__main {
			height: 496px;
		}

		.selection__inner {
			width: 470px;
		}

		.selection__nav {
			width: 470px;
		}

		.step.active {
			gap: 10px;
			max-height: 250px;
		}

		.radio {
			gap: 10px;
			font-size: 18px;
		}

		.step_final input {
			height: 44px;
		}

		.step_final .btn {
			height: 60px;
		}

		.step_final .agreement {
			margin-top: -10px;
		}

		/* programs */

		.program__inner {
			height: 440px;
		}

		.program__heading {
			font-size: 30px;
		}

		.program__benefits {
			font-size: 16px;
		}

		.program__form {
			gap: 20px;
		}

		.program__form input {
			height: 44px;
		}

		.program__form .btn {
			height: 60px;
		}

		/* contacts */

		.contacts__list {
			padding: 16px 50px;
			font-size: 20px;
		}

		.contacts__list li {
			gap: 12px;
		}

		.contacts__list li svg {
			width: 20px;
		}

		/* footer */

		.footer {
			margin-top: 80px;
		}
	}

	@media screen and (max-width: 1220px) {
		/* container */

		.container {
			max-width: 900px;
		}

		/* section style */

		.section {
			margin-top: 90px;
		}

		.section__title {
			font-size: 30px;
		}

		.section__title::after {
			transform: translateX(calc((100vw - 900px) / 2));
		}

		/* header */

		.header__logo {
			width: 74px;
		}

		.header__nav ul {
			gap: 20px;
			font-size: 12px;
		}

		.header__tel {
			font-size: 12px;
		}

		.header__callback {
			font-size: 12px;
			padding: 10px 30px;
		}

		/* hero section */

		.hero {
			height: 600px;
		}

		.hero__inner {
			padding-top: 100px;
		}

		.hero__heading {
			font-size: 40px;
		}

		.hero__subheading {
			font-size: 30px;
		}

		.hero__benefits {
			gap: 12px;
			font-size: 18px;
		}

		.hero__btn {
			font-size: 16px;
			padding: 16px;
			width: 300px;
		}

		.hero__text {
			font-size: 24px;
		}

		.hero__text span {
			font-size: 34px;
		}

		/* model card */

		.card {
			padding: 20px 10px;
		}

		.card::after {
			border-width: 0 0 405px 485px;
		}

		.card__main-img {
			max-width: 50%;
			height: 120px;
		}

		.card__gallery {
			grid-template-columns: repeat(2, 80px);
		}

		.card__heading {
			font-size: 18px;
		}

		.card__credit {
			font-size: 14px;
		}

		.card__benefits {
			row-gap: 10px;
			font-size: 14px;
		}

		.card__credit span {
			font-size: 20px;
		}

		.card__prices .current-price {
			font-size: 22px;
		}

		/* selection */

		.selection__image {
			width: 45%;
		}

		/* .selection__image img {
            object-position: left;
        } */

		/* programs */

		.program__img {
			width: 45%;
		}

		.program__content {
			width: 470px;
		}

		.program__img img {
			object-position: left;
		}

		/* contacts */

		.contacts__list {
			font-size: 16px;
		}

		/* footer */

		.footer__disclaimer {
			max-width: 330px;
		}
		
	}

	@media screen and (max-width: 992px) {
		/* container */

		.container {
			max-width: 700px;
		}

		/* header */

		.header {
			display: none;
		}

		.header_mob {
			padding: 0px;
			min-height: 53px;
			display: flex;
			align-items: center;
		}

		.header_mob.opened {
			background: var(--color-white);
			color: var(--color-black);
		}

		.header__tel {
			display: flex;
			align-items: center;
			font-size: 14px;
			gap: 20px;
		}

		.header_mob__collapse {
			display: flex;
			flex-direction: column;
			gap: 72px;
			height: 0;
			overflow: hidden;
			transition: all 0.3s linear;
		}

		.header_mob.opened .header_mob__collapse {
			height: 100dvh;
			padding-top: 50px;
			padding-bottom: 20px;
		}

		.header__nav ul {
			flex-direction: column;
			align-items: flex-start;
			gap: 50px;
			text-transform: uppercase;
			font-size: 24px;
		}

		.header__info ul {
			display: flex;
			flex-direction: column;
			gap: 20px;
			font-size: 18px;
			color: var(--color-primary);
		}

		.header__callback {
			margin-top: 20px;
			padding: 20px 0;
			width: 100%;
			font-size: 18px;
			text-align: center;
			justify-content: center;
		}

		.burger {
			width: 24px;
			height: 13px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.burger span {
			width: 100%;
			height: 1px;
			background-color: var(--color-primary);
			transform-origin: left;
			transition: all 0.3s linear;
		}

		.header_mob.opened .burger {
			width: 17px;
			height: 17px;
		}

		.header_mob.opened .burger span {
			width: 23px;
		}

		.header_mob.opened .burger span:nth-child(1) {
			rotate: 45deg;
		}

		.header_mob.opened .burger span:nth-child(2) {
			transform: rotateY(90deg);
		}

		.header_mob.opened .burger span:nth-child(3) {
			rotate: -45deg;
		}

		/* hero section */

		.hero__inner {
			padding-top: 74px;
			padding-bottom: 85px;
			position: relative;
		}

		.hero__heading {
			/* font-size: 30px; */
			font-size: 24px;
		}

		.hero__subheading {
			display: block;
			margin-top: 15px;
			/* font-size: 24px; */
			font-size: 20px;
		}

		.hero__benefits {
			margin-top: 20px;
			gap: 10px;
			/* font-size: 16px; */
			font-size: 15px;
		}

		.hero__benefits li {
			gap: 6px;
		}

		.hero__benefits li svg {
			width: 30px;
			height: 30px;
		}

		.hero__btn {
			position: absolute;
			bottom: 20px;
			left: 0;
			margin-top: 0;
		}

		.hero__text {
			font-size: 16px;
		}

		.hero__text span {
			font-size: 24px;
			margin-bottom: 2px;
		}

		.hero__bottom {
			flex-direction: column;
			align-items: flex-start;
			gap: 20px;
		}

		.hero__timer {
			width: 300px;
		}

		/* section style */

		.section__title {
			font-size: 24px;
			margin-bottom: 60px;
		}

		.section__title::after {
			transform: translateX(calc((100vw - 700px) / 2));
		}

		/* models section */

        .models__nav, .models__nav-show-more {
            display: none;
        }
		.models__grid {
			grid-template-columns: 1fr;
		}

		.card__main-img {
			height: 180px;
		}

		.card__gallery {
			grid-template-columns: repeat(2, 120px);
		}

		.card__heading {
			font-size: 24px;
		}

		.card::after {
			border-width: 0 0 510px 595px;
		}

		/* selection */

		.selection .section__title {
			margin-bottom: 20px;
		}

		.selection__main {
			height: auto;
		}

		.selection__inner {
			width: 100%;
			position: relative;
			padding-bottom: 50px;
		}

		.selection__heading {
			margin-bottom: 20px;
			min-height: 86px;
			display: flex;
			align-items: flex-end;
		}

		.selection__image {
			position: relative;
			width: 100%;
			height: 270px;
		}

		.selection__image .step-num {
			color: var(--color-white);
			right: 16px;
			bottom: 7px;
			left: auto;
			transform: none;
		}

		.selection__nav {
			/* bottom: 0; */
			width: 100%;

			bottom: -50px;
		}

		.step.active {
			padding-top: 20px;
			max-height: unset;
			height: 340px;
		}

		/* programs */

		.program__inner {
			height: auto;
		}

		.program__content {
			width: 100%;
		}

		.program__img {
			position: static;
			width: 100%;
			margin: 20px 0;
		}

		.trade-in .program__heading {
			max-width: 100%;
		}

		/* contacts */

		.contacts__list {
			flex-direction: column;
			gap: 20px;
			transform: translateY(-40px);
			padding: 23px 30px;
		}

		/* footer */

		.footer {
			padding: 30px 0;
		}

		.footer__inner {
			flex-direction: column;
			gap: 20px;
		}

		/* modals */

		.modal {
			width: 100%;
			max-width: 340px;
			height: 410px;
		}

		.modal__inner {
			padding: 20px 10px;
		}

		.modal__title {
			font-size: 32px;
			line-height: 1.1;
		}

		.modal__subtitle {
			font-size: 16px;
			margin-top: 20px;
		}

		.modal__form {
			gap: 10px;
			width: 100%;
		}

		.modal__form input {
			height: 33px;
			font-size: 14px;
		}

		.modal__form .btn {
			height: 33px;
			color: var(--color-white);
			font-size: 16px;
		}

		.modal__form .agreement {
			margin-top: -7px;
		}

		.modal__form .agreement p {
			font-size: 11px;
		}

		#modal-special {
			background-image: url(../img/modals/special-mob.webp);
		}

		#modal-special .modal__title {
			font-size: 24px;
		}

		#modal-credit {
			background-image: url(../img/modals/credit-mob.webp);
		}

		#modal-thanks {
			background-image: url(../img/modals/thanks-mob.webp);
		}

		#modal-already {
			background-image: url(../img/modals/already-mob.webp);
		}

		#modal-already .modal__subtitle {
			margin-top: 10px;
		}
	}

	@media screen and (max-width: 768px) {
		/* container */

		.container {
			max-width: 568px;
		}

		/* section style */

		.section__title::after {
			transform: translateX(calc((100vw - 568px) / 2));
			width: 50vw;
		}

		/* model card */

		.card::after {
			border-width: 0 0 450px 550px;
		}

		.card__gallery {
			grid-template-columns: repeat(2, 100px);
		}

		.section.selection {
			overflow: visible;
		}
	}

	@media screen and (max-width: 600px) {
		/* container */

		.container {
			max-width: calc(100% - 32px);
		}

		/* section style */

		.section__title {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.section__title::after {
			position: static;
			display: block;
			width: unset;
			flex: 1;
			margin-right: -16px;
			transform: none;
		}

		.desc-hide {
			display: block;
		}

		.hero__heading br {
			display: block !important;
		}

		/* hero section */

		.hero {
			height: 743px;
			/* background-image: url(../img/hero-mob.webp); */
			/* background-image: url(../img/hero-mob-1.webp); */
			/* background-image: url(../img/hero-mob-2.webp); */
			/* background-image: url(../img/bg-geely-mob.webp);             */
			background-image: url(../img/banner_geely_mob2.png);
			background-size: cover;
		}

		.hero__btn {
			width: 100%;
			padding: 14px 0;
			color: var(--color-white);
			font-weight: 400;
		}

		.hero__timer {
			width: 100%;
			padding: 0 16px;
		}

		/* model card */

		.card {
			grid-template:
				'heading heading'
				'color-select color-select'
				'photos photos'
				'benefits benefits'
				'credit prices'
				'buttons buttons';
			padding: 10px;
			padding-bottom: 20px;
			row-gap: 10px;
		}

		.card::after {
			border: 0;
			width: 100%;
			height: 100%;
			background-color: gray;
			transform: skewX(-25deg) translateX(53.5%);
		}

		.card__photos {
			flex-direction: column;
		}

		.card__main-img {
			height: 156px;
			max-width: 100%;
		}

		.card__main-img img {
			width: auto;
			height: 100%;
			margin: 0 auto;
		}

		.card__gallery {
			display: flex;
			justify-content: space-between;
		}

		.card__credit {
			text-align: left;
			padding: 10px 0;
			font-size: 16px;
			font-weight: 700;
		}

		.card__credit::after {
			background-color: #8e899f;
			left: -20px;
			width: 100vw;
			transform: none;

			/* left: -35%;
            z-index: -1;
            transform: skewX(-25deg);
            mix-blend-mode: unset; */
		}

		.card__credit::before {
			content: '';
			position: absolute;
			left: -20px;
			top: 0;
			width: 50vw;
			height: 100%;
			z-index: -2;
			background-color: #d1cedb;
		}

		.card__credit span {
			font-size: 12px;
			margin-top: 10px;
			color: var(--color-secondary);
		}

		.card__buttons {
			display: flex;
			flex-direction: column;
			gap: 10px;
			margin-top: 10px;
		}

		.card__buttons .btn {
			font-size: 16px;
			height: 50px;
		}

		.card__prices {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		/* .card__prices::after {
            content: "";
            position: absolute;
            left: -4%;
            top: 0;
            height: 100%;
            width: 150%;
            transform: skewX(-25deg);
            background-color: var(--color-secondary);
            z-index: -1;
        } */

		.card__prices .old-price {
			font-size: 14px;
		}

		.card__prices .current-price {
			font-size: 16px;
		}

		.card__prices .current-price span {
			color: var(--color-white);
		}

		.card__benefits li svg {
			width: 15px;
		}

		.card__benefits li:nth-child(1) {
			order: 3;
		}

		.card__benefits li:nth-child(2) {
			order: 2;
		}

		.card__benefits li:nth-child(3) {
			order: 1;
		}

		.card__benefits li:nth-child(4) {
			order: 4;
		}

		/* selection */

		.selection__image {
			height: 210px;
			margin-left: -16px;
			width: calc(100% + 32px);
		}

		.radio {
			font-size: 16px;
			gap: 15px;
		}

		.step.active {
			height: 280px;
		}

		/* programs */

		.program__heading {
			font-size: 18px;
		}

		.program__benefits {
			font-size: 14px;
		}

		.program__img {
			height: 210px;
			margin-right: -16px;
			width: calc(100% + 32px);
		}

		.program__form .btn {
			margin-top: 10px;
		}

		/* contacts */

		.map {
			height: 470px;
		}

		.contacts__list li {
			width: 100%;
			gap: 25px;
		}

		/* footer */

		.footer {
			margin-top: 60px;
		}
	}

	.modal {
		display: none;
	}
}

@media (max-width: 1741px) {
	.hero__benefits li:nth-child(1) {
		max-width: none;
	}
	.hero__benefits li {
		max-width: 450px;
	}
}

@media (max-width: 768px) {
	.hero__subheading {
		/* font-size: 45px; */
		line-height: 1;
		margin-top: 10px;
	}
	.hero__subheading br {
		display: block !important;
	}
	.hero__text br {
		display: none;
	}
}
@media (min-width: 768px) {
    .models .section__title::after {
		content: none;
	}
	.models .section__title {
			flex: none;
			width: fit-content;
			margin-bottom: 0;
		}
		.models__head {
			margin-bottom: 80px;
		}

}
@media (min-width: 992px) {
	.desk-hide {
		display: none;
	}
}
@media (max-width: 992px) {
	.mob-hide {
		display: none;
	}
	.models-nav-slider {
		display: none;
	}
}

.swiper-upper-wrapper {
    position: relative;
    max-width: 40vw;
	/* max-width: 42.5vw; */
}
.swiper-models-name {
	max-width: 50vw;
}
@media (min-width: 768px) {
    .swiper-models-name .swiper-wrapper, .swiper-models-name {
        position: unset;
    }
	.model-slide {
        max-width: max-content;
    }
	.model-slide a {
        /* font-size: 20px; */
        /* line-height: 14px; */
        /* font-weight: 500; */
        /* color: black; */
        text-decoration: none;
        /* white-space: nowrap; */
        transition: 0.2s ease-in-out all;
    }
	.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
        width: 24px;
        height: 24px;
        color: var(--color-accent);
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        top: 0;
        right: -46px;
    }
}
@media (max-width: 768px) {
    .swiper-upper-wrapper {
        position: relative;
		max-width: 88vw;
    }
}
@media (max-width: 768px) {
	.models__head {
		flex-direction: column;
		gap: 0;
		margin-bottom: 20px;
		align-items: flex-start;
	}
    .swiper-models-name {
        max-width: 88vw;
		margin-top: -30px;
    }
	.swiper-models-name .swiper-wrapper, .swiper-models-name {
        position: unset;
    }
	.swiper-models-name .swiper-wrapper, .swiper-models-name {
        position: unset;
    }
	.model-slide {
        max-width: max-content;
    }
	.model-slide a {
        font-size: 20px;
        line-height: 14px;
        font-weight: 500;
        color: var(--color-accent);
        text-decoration: none;
        white-space: nowrap;
        transition: 0.2s ease-in-out all;
    }
	.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
        width: 24px;
        height: 24px;
        color: var(--color-accent);
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        top: 0px;
        right: -34px;
		top: -20px;
    }
}

.models__nav-itm {
	font-size: 26px;
	line-height: 30px;
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--color-accent);
	font-family: 'Arial Narrow', sans-serif;
	flex-wrap: wrap;
}

.models__nav-itm:hover {
	text-decoration: underline;
}