main .menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

	main .menu > *:not(span:last-of-type) {
		font-size: 16px;
	}

section {
	margin: 19px 0;
}


/*#region progressBar*/
.progressBar {
	display: flex;
	flex-direction: column;
	align-items: center
}

.circular {
	position: relative;
	margin: 10px 0;
	border-radius: 50%;
	height: 80px;
	width: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: conic-gradient(var(--saa-lightBlue) 358deg, var(--saa-blue) 0deg);
}

	.circular::before {
		content: "";
		position: absolute;
		height: 40px;
		width: 40px;
		border-radius: 50%;
		background: var(--saa-blue);
		z-index: 1;
	}

	.circular::after {
		content: "";
		position: absolute;
		height: 60px;
		width: 60px;
		border-radius: 50%;
		background: #fff;
		z-index: 0;
	}

.progressBar > span {
	color: #676767;
	font-weight: 700;
	font-size: 12px;
}

	.progressBar > span.text {
		position: relative;
		color: var(--saa-blue);
		font-size: 12px;
		text-align: center;
	}

.value {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	font-size: 13px;
	color: #fff;
	font-weight: 500;
}


	.value::before {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		border: 10px solid #19446e;
		outline: 10px solid #183e63;
		background: #1d5181;
		z-index: -1;
		border-radius: 50%;
	}

/*#endregion */

/*#region GeneralFeatures*/
#GeneralFeatures {
	margin-top: 50px;
}

	#GeneralFeatures > div {
		display: flex;
		gap: 1rem;
		justify-content:center;
	}

		#GeneralFeatures > div > div:first-of-type {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 1rem;
			width: 50%;
		}

		/*	#GeneralFeatures > div > div:first-of-type > img {
				width: 75px;
				position: absolute;
				top: -45px;
				left: 0;
			}
*/
/*#endregion */

/*#region Table*/
table {
	border: 2px solid #0000001a;
	border-collapse: collapse;
	width: 50% !important;
}

	table > tbody > tr > th > i {
		color: var(--saa-blue);
		font-size: 15px;
	}


	table > tbody > tr > th:nth-of-type(2) > i {
		transform: rotate(220deg);
	}

	table > tbody > tr > th:last-of-type > i {
		transform: rotate(90deg);
	}

	table > tbody > tr > th {
		border: 2px solid #0000001a;
		font-size: 13px;
		color: var(--saa-blue);
		font-weight: 500;
		padding: 10px 20px;
	}

		table > tbody > tr > th > span {
			display: block;
			margin-top: 10px;
			color: var(--saa-blue);
			font-size: 13px;
		}

	table > tbody > tr:not(tr:first-of-type) > th:first-of-type {
		padding-left: 50px;
		text-align: start;
		font-size: 13px;
	}

#GeneralFeatures > table:last-of-type > tbody > tr > th {
	padding-left: 50px;
	text-align: start;
	font-size: 13px;
}
/*#endregion */

/*#region Comments */
#Comments {
	background: var(--saa-lightBlue);
	padding: 0 0 50px 0;
}

	#Comments > p {
		text-align: center;
		margin-top: 45px;
	}

		#Comments > p > a {
			border: 1px solid var(--saa-blue);
			padding: 4px 15px;
			border-radius: 25px;
			background: transparent;
			font-size: 14px;
			transition: 300ms;
			transition-property: background, color;
			cursor: pointer;
			margin-top: 10px;
			color: var(--saa-blue);
		}

			#Comments > p > a:hover {
				color: var(--saa-blue);
				background: var(--saa-yellow);
				border: 1px solid var(--saa-yellow);
			}

	#Comments > div {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
		overflow-x: hidden;
		overflow-y: auto;
	}

		#Comments > div::-webkit-scrollbar {
			width: 6px;
		}

		#Comments > div::-webkit-scrollbar-thumb {
			background-color: var(--saa-yellow);
			border-radius: 6px;
			width: 15px;
		}

		#Comments > div::-webkit-scrollbar-track {
			background-color: #cdd8e1;
			width: 5px;
			border-radius: 20px;
		}


.commentsBox {
	background: #fff;
	border: 3px solid #e9f0f6;
	border-radius: 1rem;
	padding: 1rem;
	width: 80%;
	margin: auto;
	box-shadow: 0px 0px 10px 0px rgba(193,213,230,1);
}

	.commentsBox > div:first-of-type {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

		.commentsBox > div:first-of-type > div:first-of-type {
			display: flex;
			gap: 10px;
			align-items: center;
		}

			.commentsBox > div:first-of-type > div:first-of-type > img {
				width: 27px;
				border: 1px solid var(--saa-blue);
				padding: 8px;
				border-radius: 50%;
				margin-right: 10px;
				overflow: visible;
			}

			.commentsBox > div:first-of-type > div:first-of-type > h5 {
				color: var(--saa-blue);
				font-size: 16px;
			}

			.commentsBox > div:first-of-type > div:first-of-type > span:first-of-type {
				height: 5px;
				width: 5px;
				background: var(--saa-blue);
				border-radius: 50%;
			}

			.commentsBox > div:first-of-type > div:first-of-type > span:last-of-type,
			.commentsBox > div:first-of-type > div:last-of-type > span:first-of-type {
				color: #666666;
				font-size: 13px;
			}

		.commentsBox > div:first-of-type > div:last-of-type {
			display: flex;
			gap: 5px;
			align-items: center;
		}


			.commentsBox > div:first-of-type > div:last-of-type > p {
				display: flex;
				align-items: center;
			}

				.commentsBox > div:first-of-type > div:last-of-type > p > i {
					color: var(--saa-yellow);
					font-size: 12px;
				}

	.commentsBox > div:last-of-type {
		width: 81%;
		margin: auto;
	}

		.commentsBox > div:last-of-type > p {
			color: var(--saa-blue);
			font-size: 16px;
			line-height: 22px;
			word-break: break-word;
		}

		.commentsBox > div:last-of-type > span {
			display: flex;
			gap: 15px;
			margin: 15px 0;
			color: var(--saa-blue);
		}

			.commentsBox > div:last-of-type > span > span {
				cursor: pointer;
				padding: 8px;
			}

		.commentsBox > div:last-of-type > form > div:first-of-type {
			display: none;
			flex-direction: column;
			gap: 5px;
		}

		.commentsBox > div:last-of-type > form > div > textarea {
			resize: none;
			width: 98%;
			padding: 1%;
			height: 100px;
			margin: 20px 0;
			border: 1px solid #ccd2d9;
			border-radius: 4px;
			outline: none;
			font-family: inherit;
		}

		.commentsBox > div:last-of-type > form > div > button {
			text-align: center;
			background-color: var(--saa-blue);
			transition: background-color .3s cubic-bezier(.25, .46, .45, .94), border-color .3s cubic-bezier(.25, .46, .45, .94);
			border-radius: 4px;
			font-size: 16px;
			padding: 10px 20px;
			cursor: pointer;
			color: #fff;
			font-weight: bold;
			border: none;
			width: 200px;
		}

		.commentsBox > div:last-of-type > span > span:first-of-type {
			padding-left: 0;
		}

		.commentsBox > div:last-of-type > span > a:first-of-type,
		.commentsBox > div:last-of-type > span > a:nth-of-type(2),
		.commentsBox > div:last-of-type > span > a:nth-of-type(3) {
			font-weight: 300;
			font-size: 13px;
		}

		.commentsBox > div:last-of-type > div {
			display: flex;
		}

			.commentsBox > div:last-of-type > div > span {
				display: inline-block;
				width: 20px;
				height: 35px;
				margin-left: 20px;
				border-left: 3px solid gray;
				border-bottom: 3px solid gray;
				opacity: 0.2;
			}

			.commentsBox > div:last-of-type > div > div {
				margin: 30px 0 15px 25px;
			}

				.commentsBox > div:last-of-type > div > div > p:first-of-type {
					color: var(--saa-blue);
					font-size: 16px;
					font-weight: 700;
				}


				.commentsBox > div:last-of-type > div > div > span {
					margin: 5px 0 11px 0;
					display: block;
					color: var(--saa-blue);
				}

				.commentsBox > div:last-of-type > div > div > p:last-of-type {
					display: flex;
					gap: 10px;
				}

					.commentsBox > div:last-of-type > div > div > p:last-of-type > a {
						padding: 5px;
						cursor: pointer;
						font-size: 13px;
						color: var(--saa-blue);
					}

#Comments > form {
	background: #fff;
	border: 3px solid #e9f0f6;
	border-radius: 1rem;
	padding: 1rem;
	width: 80%;
	margin: auto;
	box-shadow: 0px 0px 10px 0px rgba(193,213,230,1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 50px;
}

	#Comments > form > h1 {
		color: var(--saa-blue);
		font-size: 20px;
		font-weight: 700;
	}

	#Comments > form > p {
		display: flex;
		gap: 5px;
	}

		#Comments > form > p > i {
			cursor: pointer;
			color: #caebff;
			font-size: 15px;
		}

			#Comments > form > p > i.starActive {
				color: var(--saa-yellow);
			}

	#Comments > form > textarea {
		width: 50%;
		height: 70px;
		outline: none;
		border: 1px solid var(--saa-blue);
		border-radius: 17px;
		padding: 10px;
		font-size: 15px;
		resize: none;
	}


		#Comments > form > textarea::-webkit-scrollbar,
		#Comments > form > textarea::-webkit-scrollbar-thumb,
		#Comments > form > textarea::-webkit-scrollbar-track {
			width: 0;
		}

	#Comments > form > button {
		background: #fff;
		border: 1px solid var(--saa-blue);
		border-radius: 30px;
		font-size: 16px;
		font-weight: 500;
		padding: 2px 18px;
		cursor: pointer;
		transition: 300ms;
	}

		#Comments > form > button:hover {
			background: var(--saa-yellow);
			border-color: var(--saa-yellow);
		}
/*#endregion */

/*#region hardwarePackages*/
#HardwarePackages > div {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	gap: 2rem;
}

	#HardwarePackages > div > div {
		/*height: 250px;*/
		width: calc(100% - 10px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #fff;
		border: 4px solid #e9f0f6;
		border-radius: 1rem;
		box-shadow: 0px 0px 10px 0px rgb(193 213 230 / 45%);
		gap: 15px;
		padding: 1rem 0;
	}

		#HardwarePackages > div > div > h6 {
			text-align: center;
			font-size: 19px;
			color: #000000;
			font-weight: 100;
			padding: 0 2rem 0 2rem;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			width: 88%;
		}

			#HardwarePackages > div > div > h6 > span {
				display: block;
				margin-top: 5px;
				font-weight: 600;
			}

		#HardwarePackages > div > div > div {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

			#HardwarePackages > div > div > div:first-of-type {
				margin: 8px 0 15px 0;
				gap: 2rem;
			}

				#HardwarePackages > div > div > div:first-of-type > span {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 5px;
					font-size: 13px;
					font-weight: 600;
					color: #414141;
				}

					#HardwarePackages > div > div > div:first-of-type > span > b {
						font-size: 20px;
						font-weight: 900;
					}

				#HardwarePackages > div > div > div:first-of-type > b {
					background: #414141;
					height: 2px;
					width: 11px;
				}

			#HardwarePackages > div > div > div > p {
				white-space: nowrap;
				margin: 15px 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 10px;
				text-align: center;
				color: #414141;
				font-weight: 600;
				font-size: 14px;
				width: 25%;
			}

				#HardwarePackages > div > div > div > p:not(p:last-of-type) {
					border-right: 2px solid #80808024;
				}

				#HardwarePackages > div > div > div > p > span {
					font-weight: 300;
				}

		#HardwarePackages > div > div > p {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			gap: 1rem;
		}

			#HardwarePackages > div > div > p > a {
				background: var(--saa-yellow);
				color: var(--saa-blue);
				font-size: 13px;
				padding: 8px 2px;
				border-radius: 30px;
				font-weight: 500;
				width: 130px;
				white-space: nowrap;
				text-align: center;
			}

				#HardwarePackages > div > div > p > a:last-of-type {
					background: var(--saa-blue);
					color: #fff;
				}


.campaningBox {
}
/*#endregion*/
/*#region Color*/
#Color {
	display: flex;
	flex-direction: column;
	align-items: center;
}

	#Color > img {
		width: 600px;
		object-fit: contain;
	}

	#Color > img {
	}

	#Color > p {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
	}

		#Color > p > span {
			height: 20px;
			width: 20px;
			border-radius: 50px;
			background: var(--car-color);
			cursor: pointer;
			border: 1px solid gray;
		}

			#Color > p > span.active {
				border: 2px solid gray;
			}

	#Color > span {
		margin-top: 15px;
		color: var(--saa-blue);
		font-weight: 500;
	}
/*#endregion */

/*#region carpopup*/
#CarOffer {
	position: fixed;
	background: #00000080;
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	z-index: 999999999999999999;
	display: flex;
	align-items: center;
	justify-content: center;
	display: none;
}

	#CarOffer > div {
		position: relative;
		width: 700px;
		height: max-content;
		background: #fff;
		border-radius: 20px;
		padding: 2rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: start;
		gap: 1rem;
		overflow: auto;
	}


		#CarOffer > div:last-of-type::-webkit-scrollbar {
			width: 5px;
		}

		#CarOffer > div:last-of-type::-webkit-scrollbar-thumb {
			background-color: var(--saa-blue);
			border-radius: 6px;
		}

		#CarOffer > div:last-of-type::-webkit-scrollbar-track {
			background-color: #e9e9e9;
			border-radius: 20px;
			width: 10px;
		}


		#CarOffer > div > i {
			position: absolute;
			right: 14px;
			top: 14px;
			font-size: 20px;
			color: var(--saa-blue);
			padding: 5px;
			cursor: pointer;
		}

		#CarOffer > div > h2 {
			font-size: 25px;
			font-weight: 500;
			color: var(--saa-blue);
			text-align: center;
		}

			#CarOffer > div > h2 > span {
				font-weight: 600;
			}



		#CarOffer > div > div {
			display: flex;
			gap: 1rem;
		}

			#CarOffer > div > div > div {
				border-radius: 10px;
				background: #f6f6f6;
				width: 50%;
				padding: 1rem;
				display: flex;
				justify-content: center;
			}

				#CarOffer > div > div > div:first-of-type > img {
					width: 90%;
					object-fit: contain;
					transform: rotateY(180deg);
				}

				#CarOffer > div > div > div:last-of-type {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 10px;
				}

					#CarOffer > div > div > div:last-of-type > span:first-of-type {
						color: var(--sal-dark-blue);
						font-size: 16px;
						font-weight: 700;
						text-align: center;
					}

						#CarOffer > div > div > div:last-of-type > span:first-of-type > span {
							font-weight: 100;
							display: block;
							font-size: 23px;
						}

					#CarOffer > div > div > div:last-of-type > p {
						font-size: 14px;
						text-align: center;
						color: #666666;
						margin-top: 7px;
					}

					#CarOffer > div > div > div:last-of-type > div {
						display: flex;
						gap: 10px;
						align-items: center;
						justify-content: center;
						flex-wrap: wrap;
						color: #666666;
						font-size: 14px;
						margin-top: -2px;
					}

					#CarOffer > div > div > div:last-of-type > span:last-of-type {
						font-size: 20px;
						color: var(--sal-dark-blue);
						font-weight: 700;
						margin-top: 7px;
					}

		#CarOffer > div > form {
			display: flex;
			flex-direction: column;
			width: 100%;
			gap: 1rem;
		}

			#CarOffer > div > form > div {
				display: flex;
				gap: 1rem;
			}

				#CarOffer > div > form > div > label {
					display: flex;
					flex-direction: column;
					gap: 5px;
					width: 23.3%;
					font-size: 13px;
					color: #666666;
				}

					#CarOffer > div > form > div > label > input {
						height: 30px;
						border-radius: 20px;
						background: #f6f6f6;
						padding: 0 10px;
						border: solid 1px #dfdfdf;
						outline: none;
					}

			#CarOffer > div > form > p {
				height: 70px;
				overflow: auto;
				font-size: 9px;
				width: 100%;
				color: #b8b8b8;
			}


				#CarOffer > div > form > p:last-of-type::-webkit-scrollbar {
					width: 6px;
				}

				#CarOffer > div > form > p:last-of-type::-webkit-scrollbar-thumb {
					background-color: var(--saa-yellow);
					border-radius: 6px;
				}

				#CarOffer > div > form > p:last-of-type::-webkit-scrollbar-track {
					background-color: #e9e9e9;
					border-radius: 20px;
					width: 10px;
				}

			#CarOffer > div > form > label {
				display: flex;
				align-items: center;
				gap: 5px;
				width: max-content;
				color: #666666;
				font-size: 14px;
				padding: 0;
			}

			#CarOffer > div > form > button {
				width: max-content;
				margin: auto;
				background: var(--saa-blue);
				color: var(--saa-lightBlue);
				padding: 11px 24px;
				border: 0;
				border-radius: 11px;
				font-size: 12px;
				cursor: pointer;
			}
/*#endregion*/

/*#region ToCompare*/
#ToCompare > h3 {
	margin-bottom: 33px;
}

#ToCompare > div {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(533px, 1fr));
	gap: 15px;
}

	#ToCompare > div > a {
		border: 6px solid transparent;
		overflow: hidden;
		text-decoration: none;
		position: relative;
		border-radius: 2rem;
	}

		#ToCompare > div > a > div:first-child > img:first-of-type,
		#ToCompare > div > a > div:first-child > img:last-of-type {
			position: relative;
			z-index: 3;
			top: 55px;
		}

		#ToCompare > div > a > div:first-child > img {
			transition: 450ms;
		}

			#ToCompare > div > a > div:first-child > img:first-of-type {
				width: 230px;
				left: 0;
			}

			#ToCompare > div > a > div:first-child > img:last-of-type {
				width: 230px;
				transform: rotateY(180deg);
				right: 0;
			}

		#ToCompare > div > a:hover > div:first-child > img:first-of-type {
			transform: scale(1.05);
			left: 10px;
		}

		#ToCompare > div > a > div:first-child > img:nth-last-of-type(2) {
			height: 100%;
			position: relative;
			z-index: 3;
		}

		#ToCompare > div > a:hover > div:first-child > img:nth-last-of-type(2) {
			filter: brightness(0) invert(1);
		}


		#ToCompare > div > a:hover > div:first-child > img:last-of-type {
			transform: rotateY(180deg) scale(1.05);
			right: 10px;
		}


		#ToCompare > div > a > div:first-child {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			background: #153655;
			height: 155px;
		}

			#ToCompare > div > a > div:first-child:after {
				content: "";
				display: inline-block;
				position: absolute;
				top: 60px;
				left: 13%;
				height: 300px;
				width: 70%;
				background: #1d5181;
				border: 20px solid #19446e;
				outline: 20px solid #183e63;
				border-radius: 50%;
				z-index: 1;
				transition: 500ms ease,border 300ms ease;
			}

		#ToCompare > div > a:hover > div:first-child:after {
			top: 30px;
			border: 30px solid #19446e;
			outline: 30px solid #183e63;
		}

		#ToCompare > div > a > div:last-child {
			background: #f1f8fe;
			padding: 2rem;
			padding-top: 3rem;
			position: relative;
			z-index: 2;
			height: 50%;
		}


			#ToCompare > div > a > div:last-child > div {
				display: flex;
				align-items: center;
				gap: 19px;
				border-radius: 1rem;
				border: 5px solid #eaf0f6;
				padding: 1rem;
				background: white;
			}

				#ToCompare > div > a > div:last-child > div > div:nth-child(2) {
					background: #eaf0f6;
					color: var(--saa-blue);
					font-weight: 600;
					border: 0;
					padding: 3px 9px;
					border-radius: 1rem;
					position: relative;
					z-index: 2;
					flex: 0.5;
					transition: 300ms;
					font-size: 14px;
				}

		#ToCompare > div > a:hover > div:last-child > div > div:nth-child(2) {
			background: var(--saa-yellow);
		}



		#ToCompare > div > a > div:last-child > div > div:nth-child(2):hover {
			filter: brightness(1.15);
			color: var(--saa-primary);
		}

		#ToCompare > div > a > div:last-child > div > div {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: var(--saa-primary);
			flex: 1;
		}


			#ToCompare > div > a > div:last-child > div > div > span {
				font-size: 17px;
				font-weight: bold;
				color: var(--saa-blue);
			}

			#ToCompare > div > a > div:last-child > div > div > b {
				margin-top: 0;
				font-size: 22px;
				font-weight: 100;
				color: var(--saa-blue);
			}

			#ToCompare > div > a > div:last-child > div > div > small {
				font-size: 12px;
				font-weight: 500;
				text-align: center;
				color: var(--saa-blue);
				margin-top: 5px;
			}

/*#endregion*/

/*#region CarImg*/
#CarImg {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	overflow: hidden; /* Taşma durumunu engelle */
}

	#CarImg > div {
		display: flex;
		/*flex-wrap: wrap;*/ /* Resimleri satırlara yaymak için */
		justify-content: center; /* Ortalamak için */
		width: 100%;
		gap: 1rem;
		overflow: hidden; /* Taşmayı engelle */
	}

		#CarImg > div > img {
			width: 33.33%;
			object-fit: cover;
			max-height: 350px;
		}

	#CarImg > a {
		border: 1px solid var(--saa-blue);
		color: var(--saa-blue);
		border-radius: 30px;
		padding: 3px 14px;
		font-size: 14px;
		font-weight: 600;
		transition: 300ms;
	}

/*#endregion */

/*#region Sss*/
#Sss > div {
	background: var(--saa-blue);
	padding: 0.7rem 2rem;
	padding-right: 6rem !important;
	border-radius: 1rem;
	color: #fff;
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: 500ms;
	cursor: pointer;
	gap: 1rem;
}

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

	#Sss > div > div:first-of-type {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

		#Sss > div > div:first-of-type > i {
			cursor: pointer;
			position: relative;
			left: 40px;
			font-size: 14px;
		}

	#Sss > div > div:last-of-type {
		display: none;
		margin-top: 10px;
		font-size: 14px;
		font-weight: 500;
		width: 100%;
		color: #666666;
		line-height: 18px;
	}




.sssActive {
	background: var(--saa-lightBlue) !important;
	flex-direction: column;
	color: var(--sal-dark-blue) !important;
}

	.sssActive > div:first-of-type > span {
		font-weight: bold !important;
	}

	.sssActive > div:first-of-type > i:before {
		content: "\f068" !important;
	}

	.sssActive > div:last-of-type {
		display: block !important;
	}

/*#endregion*/

#Information {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

	#Information > div {
		height: 550px;
		overflow: hidden;
	}

	#Information > button {
		cursor: pointer;
		position: relative;
		bottom: -20px;
		border: 1px solid var(--saa-blue);
		padding: 4px 15px;
		border-radius: 25px;
		background: transparent;
		font-size: 14px;
		transition: 300ms;
		transition-property: background, color;
		cursor: pointer;
		margin-top: 10px;
		color: var(--saa-blue);
	}
		#Information > button:hover {
			background: var(--saa-yellow);
			border-color: var(--saa-yellow);
		}
		#Information > p {
			width: 100%;
			height: 100px;
			position: absolute;
			background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.34) 100%);
			bottom: 28px;
		}

	.commentAdd {
		cursor: pointer;
	}

@media(max-width:1400px) {
	/*#region ToCompare*/

	#ToCompare > div > a > div:first-child > :is(img:first-of-type,img:last-of-type) {
		width: 200px;
	}

	#ToCompare > div > a:hover > div:first-child:after {
		top: 52px;
		border: 25px solid #19446e;
		outline: 25px solid #183e63;
	}

	#ToCompare > div > a > div:last-child > div > div > span {
		font-size: 16px;
	}

	#ToCompare > div > a > div:last-child > div > div > b {
		font-size: 20px;
	}
	/*#endregion */
	/*#region Comments*/

	/*#endregion*/
}

@media(max-width:1200px) {
	/*#region ToCompare */

	#ToCompare > div > a > div:first-child > :is(img:first-of-type,img:last-of-type) {
		width: 300px;
	}
	/*#endregion */
	.circular {
		height: 100px;
		width: 100px;
	}

		.circular::after {
			height: 80px;
			width: 80px;
		}

		.circular::before {
			height: 60px;
			width: 60px;
		}

	.value {
		font-size: 20px;
	}

	.progressBar > span.text {
		font-size: 13px;
		text-align: center;
	}

	HardwarePackages {
		grid-template-columns: repeat(auto-fill, minmax(431px, 1fr));
	}

		HardwarePackages > div > div > p {
			padding: 15px 10px;
		}
}

@media(max-width:992px) {
	#Color > img {
		width: 100%;
	}

	#CarOffer > div > div > div {
		display: none;
	}

		#GeneralFeatures > div > div:first-of-type,
		table,
		#CarOffer > div > div,
		#CarOffer > div > div > div:last-of-type {
			width: 100%;
		}

	#GeneralFeatures > div > div:first-of-type {
		justify-content: space-between;
	}
	/*#region ToCompare*/
	#ToCompare > div > a > div:first-child > :is(img:first-of-type,img:last-of-type) {
		width: 255px;
	}

	#GeneralFeatures > div:first-of-type {
		flex-wrap: wrap;
	}

		#GeneralFeatures > div:first-of-type > img {
			display: block;
		}

		#GeneralFeatures > div:first-of-type > img {
			display: block !important;
			width: 100%;
			height: 125px;
			object-fit: contain;
		}

	/*#region Comments */

	.commentsBox {
		width: 90%;
	}

		.commentsBox > div:first-of-type > div:first-of-type > img {
			width: 30px;
		}

		.commentsBox > div:first-of-type > div:first-of-type > h5 {
			font-size: 20px;
		}

		.commentsBox > div:first-of-type > div:last-of-type > span:first-of-type {
			font-size: 15px;
		}

		.commentsBox > div:first-of-type > div:last-of-type > span:last-of-type,
		.commentsBox > div:first-of-type > div:first-of-type > span:first-of-type {
			height: 5px;
			width: 5px;
		}

		.commentsBox > div:first-of-type > div:last-of-type > p > i,
		.commentsBox > div:last-of-type > div > div > p:last-of-type > a {
			font-size: 13px;
		}

		.commentsBox > div:last-of-type > p {
			font-size: 15px;
		}

		.commentsBox > div:last-of-type > span > a {
			font-weight: 300;
			font-size: 13px;
		}

		.commentsBox > div:last-of-type > div > div > p:first-of-type {
			font-size: 18px;
		}

		.commentsBox > div:last-of-type > div > div > span {
			font-size: 15px;
		}

		.commentsBox > div:first-of-type > div:first-of-type,
		.commentsBox > div:first-of-type > div:last-of-type {
			gap: 5px;
		}
	/*#endregion*/
	HardwarePackages > div > div > p {
		padding: 15px 20px;
	}

	HardwarePackages > div > div > p {
		font-size: 17px;
	}

	#CarOffer > div {
		width: 600px;
	}
}

@media(max-width:768px) {
	/*#region ToCompare */

	#ToCompare > div > a > div:first-child > :is(img:first-of-type,img:last-of-type) {
		width: 215px;
	}
	/*#endregion*/
	table > tbody > tr > th {
		font-size: 15px;
		padding: 10px 0;
	}

	#GeneralFeatures > table:last-of-type > tbody > tr > th,
	table > tbody > tr:not(tr:first-of-type) > th:first-of-type {
		padding-left: 10px;
	}

	table > tbody > tr > th > i {
		font-size: 20px;
	}
	/*#region Comments*/

	.commentsBox > div:first-of-type {
		flex-direction: column;
		align-items: start;
		justify-content: center;
		gap: 15px;
		margin-bottom: 15px;
	}

	.commentsBox > div:last-of-type {
		width: 100%;
		margin: 0;
	}


	#Comments form > h1 {
		font-size: 25px;
	}

	#Comments form > textarea {
		width: 90%;
	}

	#Comments form > button {
		font-size: 17px;
	}
	/*#endregion*/
	#HardwarePackages {
		grid-template-columns: 1fr;
	}

	#CarOffer > div {
		width: 400px;
		max-height: 80%;
	}

		#CarOffer > div > form > div {
			flex-direction: column;
		}

			#CarOffer > div > form > div > label {
				width: 100%;
			}

	#HardwarePackages > div {
		display: flex !important;
		flex-direction: column !important;
	}

	#CarImg > div > img:last-of-type {
		display: none;
	}

	#CarImg > div > img {
		width: 50% !important;
	}
}

@media(max-width:576px) {
	.circular {
		height: 80px;
		width: 80px;
	}

		.circular::after {
			height: 60px;
			width: 60px;
		}

		.circular::before {
			height: 40px;
			width: 40px;
		}

	/*#region ToCompare */

	#ToCompare > div {
		grid-template-columns: 1fr;
	}

		#ToCompare > div > a > div:first-child {
			height: 120px;
		}

		#ToCompare > div > a > div:last-child {
			padding: 2rem 0 1rem 0;
		}

		#ToCompare > div > a > div:first-child > :is(img:first-of-type,img:last-of-type) {
			width: 44%;
			top: 40px;
		}

		#ToCompare > div > a > div:last-child > div {
			flex-direction: column;
			gap: 15px;
			width: 80%;
			margin: auto;
		}

			#ToCompare > div > a > div:last-child > div > div:nth-child(2) {
				background: var(--saa-yellow);
			}

		#ToCompare > div > a:hover > div:first-child > img:last-of-type {
			transform: rotateY(180deg) scale(1);
			right: 0;
		}

		#ToCompare > div > a:hover > div:first-child > img:first-of-type {
			transform: scale(1);
			left: 0;
		}

		#ToCompare > div > a > div:first-child:after {
			top: 33px;
			left: 11%;
			height: 145px;
			width: 70%;
		}
	/*#endregion*/
	.progressBar {
		width: 18% !important;
	}

	#GeneralFeatures > div:first-of-type {
		row-gap: 1rem;
	}
	/*#region Comments*/
	#Comments {
		padding: 0px !important;
	}

		#Comments > div {
			padding: 0 20px;
		}

	#Sss > div:first-of-type > div > span {
		width: 90%;
	}

	.commentsBox > div:first-of-type > div:first-of-type > img {
		padding: 5px;
		border: 2px solid var(--saa-blue);
	}

	.commentsBox > div:first-of-type > div:first-of-type {
		gap: 5px;
		flex-wrap: wrap;
	}

		.commentsBox > div:first-of-type > div:first-of-type > span:first-of-type {
			display: none;
		}

	#Comments form > h1 {
		font-size: 20px;
	}

	#Comments form > p > i {
		font-size: 17px;
	}

	#Comments form > textarea {
		height: 50px;
		border-radius: 20px;
		font-size: 13px;
	}

	#Comments form > button {
		font-size: 15px;
	}
	/*#endregion*/
	#HardwarePackages {
		grid-template-columns: 1fr;
	}

		#HardwarePackages > div > div {
			flex-direction: column;
			height: max-content;
			padding: 20px 0;
		}


			#HardwarePackages > div > div > p:nth-of-type(2) {
				border: none;
				border-top: 2px solid #80808024;
				border-bottom: 2px solid #80808024;
			}

		#HardwarePackages > div > h6 {
			font-size: 22px;
		}

		#HardwarePackages > div > p > a {
			font-size: 13px;
			width: 100px;
		}

	#CarOffer > div {
		width: 300px;
	}

		#CarOffer > div > div {
			flex-direction: column;
		}

			#CarOffer > div > div > div {
				width: calc(100% - 2rem) !important;
			}

		#CarOffer > div > h2 {
			font-size: 22px;
		}

	#HardwarePackages > div > div > div > p {
		font-size: 13px !important;
		padding: 0px 6px !important;
		margin: 0 0 20px 0;
	}

	#HardwarePackages > div > div > div:last-of-type {
		gap: 0;
		flex-wrap: wrap;
		margin: 23px 0 15px 0;
	}

		#HardwarePackages > div > div > div:last-of-type > p {
			padding: 0;
			width: 41%;
			margin: 0 0 30px 0px;
		}

	#HardwarePackages > div > div > div > p:nth-of-type(2) {
		border: 0;
	}

	#HardwarePackages > div > div > div:first-of-type {
		gap: 1rem;
	}

	#HardwarePackages > div > div > div > p:nth-of-type(2) {
		border-right: 0 !important;
	}
}