:root {
	--main-color: #405FF2;  
}

p, a, span, h1, h2, h3, h4, h5, h6, button{
	font-family: "DM Sans", sans-serif;    
	font-style: normal;
}
ul, p, a, span, h1, h2, h3, h4, h5, h6, button {margin: 0; padding: 0}
.dm-sans-regular {
	font-family: "DM Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
}
.dm-sans-medium {
	font-family: "DM Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
}
.dm-sans-SemiBold {
	font-family: "DM Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
}
.dm-sans-bold {
	font-family: "DM Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
}

.dm-sans-ExtraBold {
	font-family: "DM Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 800;
}
html {scroll-behavior: unset !important;}
a {text-decoration: none; color: #000;}
p, h1, h2, h3, h4, h5, h6 {margin-bottom: 0;}
.main-bg {background-color: var(--main-color);}
.main-clr {color: var(--main-color);}
.main-btn-style {height: 48px;width: max-content;}
.bg-pale-bluish-lavender {background-color: #F0F3FF;}
.section-title {font-size: 46px;}
.cursor-pointer {cursor: pointer;}
.dropdown-toggle::after {display: none;}
/* Start header */
.header {left: 0;top: 0;right: 0;width: 100%;/* height: 90px; */}
.btn-height {height: 47px; width: max-content;}

/* End header */

/* Start main section */

.main-section {
	background-image: url('../images/main-section-bg.png');
	background-size: cover;
	background-repeat: no-repeat;    
}
.main-section .main-section-title {font-size: 70px;}
.form-wrap {max-width: 1000px;}
.location-wrap {max-width: 292px;}
.select-location .ts-control{border: none; border-radius: 12px;}
.select-location, .select-date, .select-location, .ts-dropdown, .ts-control, .ts-control input {font-size: 15px;}
.form-filter .angle-icon, .select-date .angle-icon {right: 5px; top: 50%; transform: translateY(-50%);}
.select-date:focus, .select-time:focus,
.select-date-1:focus, .select-date-2:focus,
.select-time-1:focus, .select-time-2:focus {
	outline: none;
	box-shadow: none; /* remove any shadow added by flatpickr */
	border-color: #ccc; /* optional: set a neutral border */
}
.form-filter .submit-search-btn {background-color: var(--main-color); width: 128px; height: 58px;}
.cards-icon {right: 22px; top: 50%; transform: translateY(-50%);}

/* End main section */

/* Start Browse by make section (brands cars) */
.brands-car-slider .car-image {aspect-ratio: 1 / 1;}
.name-text {top: 20px; left: 20px;}
.name-text p:first-child {font-size: 15px;}
.name-text p:last-child {font-size: 18px;}
.brands-car-slider .content-wrap {border-radius: 1rem; overflow: hidden;}
.brands-car-slider .content-wrap::after {
	content: '';  
	background: linear-gradient(180deg, rgba(34, 34, 34, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
	position: absolute;
	top: 0;
	left:0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

/* End Browse by make section (brands cars) */

/* Start features section */
.features-section {margin-bottom: 80px;}
.features-list li p.for-true-icon {padding-left: 40px;}
.features-list li p.for-true-icon::after {	
	content: '';
	background-image: url('../images/check.svg');
	background-color: #F1F4FE;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 8px;
}

.features-section .image-1, .features-section .image-2{width: 80%;aspect-ratio: 1 / 1;}
.features-section .image-3 {aspect-ratio: 1 / 1.33;}

/* End features section */

/* Start your perfect car Section */
.perfect-car-section {margin-bottom: 80px;}
.perfect-car-section .inner-container {max-width: 950px;}
.perfect-car-section .image-wrap img {aspect-ratio: 1 / 1; max-height: 464px ;}
.perfect-car-section .best-selling-bg {background-color: #F1F4FE;}
/* End your perfect car Section */

/* Start want car section */
.want-car-section {margin-bottom: 80px;}
.want-car-section .lt-box {min-height: 400px;background-color: #E9F2FF;}
.want-car-section .rt-box {min-height: 400px;background-color: #FFE9F3;}
/* End want car section */

/* Start occasions cars section */
.occasions-cars-section {margin-bottom: 80px; background-color: #F7FAFF;}
.occasions-cars-section .car-image {width: 200px; aspect-ratio: 1 / 1;}
/* End occasions cars section */

/* Start Our Premium Brands section */
.brands-logos-section {margin-bottom: 80px;}
.brands-logos-slider .content-wrap {border: 1px solid #E9E9E9; border-radius: 10px; height: 200px;}
.brands-logos-slider .content-wrap .logo-image {max-width: 100%;}
.slider-btns-wrap {min-width: 80px;}
/* End Our Premium Brands section */

/* Start Start Contact us section */
.contact-us-section {background-color: #F7FAFF; margin-bottom: 80px;}
/* End Start Contact us section */

/* Start FAQ questions section */
.faq-section {margin-bottom: 80px;}
.faq-section .question-header {color: var(--main-color); font-size: 18px;}
.faq-section .question-header .plus-svg, .faq-section .question-header.active .minus-svg {min-width: 16px;}
.faq-section .question-header .minus-svg{display: none;}
.faq-section .question-header.active .plus-svg{display: none;}
.faq-section .question-header.active .minus-svg{display: block; margin-top: 8px;}
.faq-section .bottom-line {
	height: 1px;
	width: 100%;
	border-bottom: 0.5px solid #050B2080;
}

.faq-section .faq-list .question-wrap .answer {color: #050B2080}
.faq-section .faq-list .question-wrap:not(:first-child) .answer {display: none;}
/* End FAQ questions section */

/*************************************** Start all cars page ***************************************/

/* page content */
.page-title {font-size: 40px;}
.car-box .car-image {border-radius: 10px 10px 0 0; aspect-ratio: 1.235 / 1;}
.car-box .image-details {border-radius: 0 0 10px 10px; border: 1px solid #050B2080; border-top: none;}
.car-box .car-name, .car-box .car-price {font-size: 35px;}



/*************************************** End all cars page ***************************************/

/*************************************** Start car Details page ***************************************/
.not-home-page {padding-top: 150px;}
.car-images-section {margin-bottom: 80px;}
.big-image-wrap img {aspect-ratio: 1.57 / 1; border-radius: 16px 0 0 16px;}
.small-images-wrap img{height: 50%;}
.small-images-wrap img:first-child{border-top-right-radius: 16px;}
.small-images-wrap img:last-child{border-bottom-right-radius: 16px;}

.text-details-section {margin-bottom: 80px;}
.text-details-section .features-list li a{ background: #050B200F;}
.text-details-section .features-list-1 li:not(:last-child) {margin-bottom: 20px;}
.title-select-time {color: #050B2080;}
.edit-address-icon {border: 1px solid #050B2080;}

/*************************************** End car Details page ***************************************/

/*************************************** Start Checkout page ***************************************/
[for="mobile_number"] + input {border-radius: 12px;}
.select-option-wrap .select2-container--default .select2-selection--single{height: 57px; border-radius: 12px; border-color: #050B2080; background-color: transparent;}
.select-option-wrap .select2-container--default .select2-selection--single .select2-selection__rendered
{line-height: 57px;}
.select-option-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {height: 57px; right: 16px;}
.select-option-wrap .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select-option-wrap .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.select2-container--open .select2-dropdown--below {
  border-top: 1px solid #aaa !important; border-top-left-radius: 4px; border-top-right-radius: 4px;
}
.select-option-wrap .select2-container .select2-selection--single .select2-selection__rendered {padding-left: 22px;}
.select2-container--default .select2-selection--single .select2-selection__arrow b {border: none !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: "";
  background: url('../images/select-arrow.svg') no-repeat center center;
  width: 14px;
  height: 14px;
  display: block;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {background-color: #03092F;}
.input-border {border-color: #050B2080;}
.input-radius-12 {border-radius: 12px;}
.checkout-form .for-max-width, #form_pay .for-max-width {max-width: 572px;}
.note-text {background: #B6C3FF33;}
.cvc_code_icon {right: 10px; bottom: 16px;}


/*************************************** End Checkout page ***************************************/

/*************************************** Start Contact page ***************************************/
.contact-form-wrap {max-width: 572px;}
.contact-page-image {border-top-right-radius: 1rem;aspect-ratio: 1.22 / 1;}
.contact-method-list .icon-wrap {width: 40px; height: 40px;}
.contact-methods-box {border-bottom-right-radius: 1rem;}
/*************************************** End Contact page ***************************************/

/*************************************** Start login page ***************************************/
.login-section {min-height: 100vh;}
.login-form-wrap {max-width: 404px;}
.login-page-image {
	position: absolute;
	right: 0;
	top: 0;
	border-radius: 1rem 0 0 1rem;
}
.or-divider{border-bottom: 1px solid #050B2080;}
.or-divider .or-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.social-media-login-btn {border: 1px solid #050B2080; height: 56px;}
/*************************************** End login page ***************************************/

/*************************************** Start about page ***************************************/
.our-features-section {margin-bottom: 80px;}
.about-page .about-image-wrap {max-width: 85%;}
.about-page .about-image-wrap .about-image {
	border-radius: 1rem;
	max-width: 100%;
	aspect-ratio: 1.5 / 1;
	transform: translate(70px, 40px);
}
.find-your-car-section {margin-bottom: 80px;}
.find-your-car-section .content-wrap {
	padding-block: 50px;
	background-image: url('../images/about/find-car-bg.svg');
	background-size: 141px;
}
.find-your-car-section .content-wrap .text-content {max-width: 1000px;}
.our-message-section {margin-bottom: 80px;}
/*************************************** End about page ***************************************/

/*************************************** Start Dashboard page ***************************************/
.dashboard-content {max-width: 1184px;}
.dashboard-list li:not(:last-child) {margin-bottom: 5px;}
.dashboard-list li a.active, .dashboard-list li button.active,
.dashboard-list li a:hover, .dashboard-list li button:hover
{background-color: #F0F3FF !important; color: var(--main-color) !important;}
.dashboard-list li a.active::before, .dashboard-list li button.active::before,
.dashboard-list li a:hover::before, .dashboard-list li button:hover::before
{
	content: '';
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 3px;
	background-color: var(--main-color);
}
.dashboard-list li a.active svg path, .dashboard-list li a:hover svg path, .dashboard-list li button:hover svg path {fill: var(--main-color);}
.tab-content-wrap {max-width: 600px;}
.borderd-btn {border: 1px solid var(--main-color);}
.info-form input {padding-block: 12px !important;}
.tabs-container .tab:not(:first-child) {display: none;}

.reservation-list li:not(:last-child) {border-bottom: 1px solid #050B201A}
.reservation-list .car-image {width: 131px; max-height: 104px;}

/*************************************** End Dashboard page ***************************************/

/*************************************** Start Change password page ***************************************/
.change-password-content {max-width: 600px;}
/*************************************** End Change password page ***************************************/

/*************************************** Start Success Payment page ***************************************/
.success-payment-content {
	max-width: 600px;
	box-shadow: 0px 13.32px 53.29px 0px #00000029;
}
.success-payment-content .check-icon {
    background-color: #fff;
    box-shadow: 0px 9.99px 26.65px 0px #00000029;
    left: 50%;
    top: -45px;
    height: 90px;
    width: 90px;
    transform: translateX(-50%);
}
.details-payment-success .info-box {	
	border: 1.67px solid #050B2080;
	font-size: 20px;
}
.details-payment-success .info-box .info-title {
	color: #050B20B8;
	margin-bottom: 6px;
}
.success-payment-content .download-pdf{font-size: 24px; color: #050B20B8;}
.bg-image {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;	
}

/*************************************** End Success Payment page ***************************************/


/* Start footer */

.footer {background-color: #050B20;}
.newsletter-form-wrap {
    background: #FFFFFF21;
    backdrop-filter: blur(20px);
    min-width: 400px;
}
.newsletter-form-wrap input {color: #fff; width: 200px;}
.newsletter-form-wrap input:focus {outline: none; border: none; background-color: transparent;}
.newsletter-form-wrap button {height: 48px; width: 128px;}
.footer .footer-content {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
.app-link {	
	background: #FFFFFF12;
	min-height: 60px;
	max-width: 245px;
}
.store-icon {min-width: 30px;}
.app-link .store-name p:first-child{font-size: 12px;}
.app-link .store-name p:last-child{font-size: 15px;}

/* End footer */