/*#region Car*/
#Car {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

	#Car > div {
		display: flex;
		height: 224px;
	}


#CarBox {
	min-width: 425px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	align-items: center;
	padding-bottom: 10px;
	position: relative;
	border-bottom-left-radius: 1rem;
	border-top-left-radius: 1rem;
	height: auto;
	margin-left: 15px;
}

	#CarBox > *:not(img,div) {
		margin: 0 10px 7px 10px;
	}

	#CarBox > p:first-of-type {
		margin-top: 32px;
		font-size: 16px;
	}

	#CarBox > img {
		position: relative;
		width: 200px;
		height: 104px;
		z-index: 6;
		top: 30px;
		object-fit: contain;
	}

	#CarBox:after {
		content: "";
		bottom: 0;
		height: 108px;
		width: calc(100%);
		background: #e0ebf4;
		position: absolute;
		z-index: 5;
	}


	#CarBox > div {
		background: linear-gradient(0deg, rgb(255 255 255) 24%, rgba(21, 54, 85, 1) 52%, rgba(21, 54, 85, 1) 100%);
		height: 200px;
		width: 95%;
		position: absolute;
		top: 0;
		z-index: 5;
		transition: 500ms;
		overflow: hidden;
		display: flex;
		justify-content: space-around;
		align-items: start;
		padding: 1.5rem;
	}

		#CarBox > div > p {
			color: white;
			font-size: 12px;
			width: 250px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

			#CarBox > div > p > span {
				display: block
			}

		#CarBox > div > span {
			background: var(--saa-yellow);
			border-radius: 30px;
			padding: 3px 10px;
			font-size: 10px;
			font-weight: 500;
		}


		#CarBox > div:after {
			content: "";
			background: #1d5181;
			position: absolute;
			height: 259px;
			width: 75%;
			left: 36px;
			border-radius: 50%;
			border: 15px solid #19446e;
			outline: 15px solid #183e63;
			top: 27px;
			outline-offset: -1px;
			z-index: -1;
		}




#OfferBox {
	border: 2px solid #e9f0f6;
	width: 100%;
	height: 98%;
	border-radius: 1rem;
	position: relative;
	left: -12px;
	z-index: 6;
	background: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 0;
	min-width: 472px !important;
}

	#OfferBox > div:first-of-type {
		width: 100%;
		display: flex;
		gap: 1rem;
		margin: 25px 0 0 0;
	}

	#OfferBox > div > table {
		width: 100%;
	}

		#OfferBox > div > table > thead > tr > th {
			color: var(--saa-blue);
			font-size: 14px;
			font-weight: 600;
			padding-bottom: 13px;
		}

			#OfferBox > div > table > thead > tr > th:not(:last-child) {
				border-right: 2px solid var(--saa-lightBlue);
			}

		#OfferBox > div > table > tbody {
			text-align: center;
		}

			#OfferBox > div > table > tbody > tr > td {
				padding: 2px 0;
				color: var(--saa-blue);
				font-weight: 100;
				letter-spacing: 0.5px;
				color: #3d3d3d;
				font-size: 14px;
			}

				#OfferBox > div > table > tbody > tr > td > span {
					display: none;
				}

				#OfferBox > div > table > tbody > tr > td:not(:last-child) {
					border-right: 2px solid var(--saa-lightBlue);
				}


	/*#endregion*/
	#OfferBox > div:first-of-type > p {
		border-left: 2px solid #e9f0f6;
		padding: 15px;
		width: 25%;
		text-align: center;
		color: var(--saa-blue);
		font-size: 19px;
		font-weight: 600;
	}

		#OfferBox > div:first-of-type > p:first-of-type {
			border: none;
		}

		#OfferBox > div:first-of-type > p > span {
			display: block;
			margin-top: 10px;
			font-weight: 200;
		}

	#OfferBox > p {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 0px 40px 20px 40px;
		/*margin: 00px 40px 134px 40px;*/
		gap: 2rem;
		color: #b1b0b0;
		font-weight: 100;
		font-size: 12px;
	}

		#OfferBox > p > a {
			font-size: 13px;
			font-weight: 600;
			background: var(--saa-yellow);
			border-radius: 30px;
			padding: 7px 25px;
			cursor: pointer;
			color: var(--saa-blue);
			width: 145px;
			text-align: center;
		}
/*#endregion*/


#CarBox > select {
	background: white;
	font-size: 12px;
	border: 1px solid var(--saa-blue);
	border-radius: 12px;
	padding: 5px 3px;
	width: 165px;
	outline: none;
	z-index: 7;
}

#CarBox > p {
	color: var(--saa-blue);
	font-size: 17px;
	font-weight: 600;
	z-index: 7;
}
/*#endregion*/



#Car {
	margin: 0 0 150px 0;
}

@media(max-width:1400px) {
	#OfferBox > div:first-of-type {
		gap: 10px;
	}

		#OfferBox > div:first-of-type > p {
			white-space: nowrap;
			padding: 10px;
			font-size: 15px;
		}

			#OfferBox > div:first-of-type > p > span {
				font-size: 15px;
			}
}

@media(max-width:1200px) {
	#CarBox {
		min-width: 400px;
	}

		#CarBox > div:after {
			height: 300px;
			width: 83%;
			left: 18px;
		}

		#CarBox > div {
			justify-content: center;
		}



	#OfferBox > p {
		margin: 10px;
	}

	#OfferBox > div:first-of-type > p {
		padding: 5px;
		font-size: 14px;
	}

		#OfferBox > div:first-of-type > p > span {
			font-size: 14px;
		}
}

@media(max-width:992px) {
	#CampaignCar > div:first-of-type {
		flex-wrap: wrap;
	}

		#CampaignCar > div:first-of-type > div {
			width: 100%;
		}

	#Car > div {
		flex-direction: column;
		height: auto;
	}

	#CarBox {
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
		margin: 0;
		overflow: inherit;
	}

		#CarBox > div:after {
			width: 100%;
			left: -16px;
		}

		#CarBox > img {
			width: 350px;
		}

		#CarBox > div {
			justify-content: space-around;
		}


	#CarBox,
	#OfferBox {
		min-width: 100% !important;
	}

		#CarBox > div {
			width: 100%;
			padding: 1.5rem 0;
			border-top-left-radius: 1rem;
			border-top-right-radius: 1rem;
			justify-content:space-between;
		}

	#OfferBox {
		left: -2px;
		top: -9px;
	}


		#OfferBox > div:first-of-type > p,
		#OfferBox > div:first-of-type > p > span {
			font-size: 15px;
		}

		#OfferBox > div > table > tbody > tr > td > span {
			display: block;
			font-weight: 100;
			margin-bottom: 2px;
		}

		#OfferBox > p {
			margin: 10px;
			display: flex;
			flex-direction: column;
			margin-top: 29px;
			gap: 12px;
		}

			#OfferBox > p > a {
				order: -1;
			}

		#OfferBox > div > table > thead {
			display: none;
		}
		#OfferBox > div > table > tbody > tr > td:first-of-type > span {
			display: inline;
		}
		#OfferBox > div > table > tbody > tr > td {
			border: 0 !important;
			font-weight: 600;
			color: var(--saa-blue);
		}

		#OfferBox > div > table > tbody > tr {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			border: 1px solid #304f6d8f;
			border-radius: 13px;
			margin: 8px 11px;
			padding: 5px;
		}
			#OfferBox > div > table > tbody > tr:first-of-type{
				margin-top:0;
			}
			#OfferBox > div > table > tbody > tr > td:first-of-type {
				grid-column: 1 / 5;
				padding-bottom: 11px;
			}
		#OfferBox > div:first-of-type {
			margin-top: 11px;
		}
}

@media(max-width:768px) {
}

@media(max-width:576px) {
	#CampaignCar > div:first-of-type > select {
		width: 100%;
	}

	#CarBox > img {
		width: 100%;
	}

	#CarBox > div > span {
		font-size: 10px;
	}

	#CarBox > div > p {
		width: 50%;
	}

	#OfferBox {
		gap: 1rem;
	}

		#OfferBox > div:first-of-type > p:not(p:last-of-type) {
			display: none !important;
		}

		#OfferBox > div:first-of-type > p:last-of-type,
		#OfferBox > div:first-of-type > p > span {
			width: 100%;
			font-size: 20px;
			border: none;
		}

		#OfferBox > p {
			flex-direction: column;
			align-items: center;
			text-align: center;
		}

			#OfferBox > p > a {
				width: auto;
			}

		#OfferBox > div > table > tbody > tr > td {
			padding: 0px;
		}

		#OfferBox > div > table > thead > tr > th,
		#OfferBox > div > table > tbody > tr > td {
			font-size: 11px;
		}

		#OfferBox > p {
			font-size: 12px;
			margin-top: 0;
		}

			#OfferBox > p > a {
				font-size: 13px;
				padding: 8px 30px;
			}
		#OfferBox > div > table > tbody > tr {
			margin: 8px 2px;
			padding: 5px 3px;
		}
		#OfferBox > div:first-of-type {
			margin-top: 5px;
		}
}