@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: Poppins;
}

.bg-blue {
	background: #6a28fe;
}

.color-blue {
	color: #6a28fe;
}

.color-black {
	color: #404040;
}

.card-bg {
	background: #404040;
}

.offer-card {
	background: #e50000;
}

.filter-options {
	box-shadow: 0px 11px 55px #00000021;
}

.heading-image {
	background: url('../image/back_image.svg');
	/* background-size: contain; */
	background-position: top;
	background-repeat: no-repeat;
}

/* .card {
	max-width: 400px;
	width: 100%;
} */

.motoring-list li {
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
	align-items: center;
}

.motoring-list li svg {
	margin-right: 0.5rem;
}

.see-deal-btn a,
.see-deal-btn button {
	background: #6a28fe;
	display: block;
	color: #fff;
	text-align: center;
	padding: 0.5rem 1rem;
	border-radius: 50px;
	font-weight: bold;
}

.see-deal-btn > button {
	width: 100%;
	background: #6a28fe;
	display: block;
	color: #fff;
	text-align: center;
	padding: 0.5rem 0;
	border-radius: 50px;
	font-weight: bold;
}

.card-btn-active {
	background: #6a28fe;
	color: #fff;
}

.card-btn-active h3,
.card-btn-active p {
	color: #fff !important;
}

.hover-color:hover {
	border: #6a28fe solid 2px;
}
/*
.hover-color:hover > :first-child,
.hover-color:hover > h3,
.hover-color:hover > p,
.hover-color:hover > h3 > i {
	color: #fff;
} */

.btn-tabs {
	outline: none !important;
}

.ma-card-1 {
	border: 3px solid rgb(35, 248, 255);
	border-top: solid 10px rgb(35, 248, 255);
}

.editors-choice {
	background: rgb(35, 248, 255);
	max-width: 300px;
	width: 100%;
	margin: 0 auto;
}

.rac-top-border {
	border-top: solid 2px rgb(35, 248, 255);
}

.ma-card-2 {
	border: 3px solid rgb(78, 243, 87);
	border-top: solid 10px rgb(78, 243, 87);
}

.best-seller {
	background: rgb(78, 243, 87);
	max-width: 300px;
	width: 100%;
	margin: 0 auto;
}

.color-sky {
	color: rgb(35, 248, 255);
}

.white-car {
	filter: brightness(0) invert(1);
}

.comparemy-form input {
	width: 100%;
	padding: 0.3rem 1rem;
	border: 1px solid #ddd;
	outline: none;
}

.comparemy-form label {
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
	display: block;
	font-weight: 500;
}

/* Chrome, Safari, Edge, Opera */

.comparemy-form input::-webkit-outer-spin-button,
.comparemy-form input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.color-right-gray {
	color: #d6d6d6;
}

.color-right-blue {
	color: #6a28fe;
}

.card-item {
	border-width: 2px;
	border-style: solid;
	border-color: #000;
}

.top-border-10 {
	border-top-width: 10px;
}

.min-h-48 {
	min-height: 160px;
}

.error {
	color: red;
}

.btn-tabs:active,
.btn-tabs.active {
	color: #404040;
	background: #fff;
}

.btn-tabs:not(.active) > img {
	filter: brightness(0) invert(1);
}

.mes-success {
	background: #daf4ed;
	padding: 0.5rem 1rem;
	border-radius: 5px;
	color: #157254;
	font-weight: bold;
	letter-spacing: 1px;
}

/* .company__logo > img {
	max-width: 150px;
} */

/* Firefox */

.comparemy-form input[type='number'] {
	-moz-appearance: textfield;
}

@media (min-width: 1364px) {
	.container {
		max-width: 1364px;
	}
}

@media (min-width: 767px) {
	.iam-sticked {
		position: fixed;
		top: 68px;
		left: 0;
		right: 0;
		z-index: 30;
		background: #ffff;
		width: 100%;
	}
	.iam-sticked .item_types {
		display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox; /* TWEENER - IE 10 */
		display: -webkit-flex; /* NEW - Chrome */
		display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
		padding: 5px;
		align-items: center;
		justify-content: center;
	}
	.iam-sticked .item_types p {
		display: none;
	}
	.iam-sticked .item_types h3 {
		margin-left: 10px;
	}
	.iam-sticked .container > div {
		padding: 1rem 0;
	}
	.iam-sticky.iam-sticked {
		--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
			0 4px 6px -2px rgba(0, 0, 0, 0.05);
		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
			var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	}
}

@media (max-width: 767px) {
	.heading-image {
		background: url(../image/bg-mobile.png);
		background-repeat: no-repeat;
		background-size: contain;
	}
}
@media (max-width: 1023px) {
	.item_types {
		display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox; /* TWEENER - IE 10 */
		display: -webkit-flex; /* NEW - Chrome */
		display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
		/* padding: 5px; */
		align-items: center;
		justify-content: start;
		/* padding-left: 5rem; */
	}
}
/* .cover-card br {
	display: none;
} */

#loading-image {
	position: fixed;
	left: 45%;
	top: 35%;
	width: 10%;
	height: 10%;
	z-index: 9999;
	background: url('../image/loader.gif') 50% 50% no-repeat;
	display: none;
}

/* 
* Martin Amends
*/
.heading-image {
	background-color: #f9f8fa;
}
@media only screen and (max-width: 360px) {
	.hero-text-mobile {
		font-size: 2rem;
		line-height: 2.25rem;
	}
}
.hero-text-large {
	display: none;
}
@media only screen and (min-width: 1024px) {
	.hero-text-large {
		display: unset;
	}
	.hero-text-mobile {
		display: none;
	}
}

.fa-star {
	color: gold !important;
}

/* popup */

.popup {
	position: relative;
	/* display: inline-block; */
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* The actual popup */
.popup .popuptext {
	visibility: hidden;
	width: 180px;
	height: 76px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 8px 2px;
	position: absolute;
	z-index: 1;
	top: -110%;
	left: -650%;
	margin-left: -80px;
	font-size: 13px;
	border: white solid 1px;
}

/* Toggle this class - hide and show the popup */
.popup .show-popup {
	visibility: visible;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
}
@media only screen and (min-width: 1280px) {
	.popup .popuptext {
		width: 246px;
		height: auto;
		top: -88%;
		left: -1102%;
	}
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}