.container {
	height: auto;
	width: 100%;
	border-radius: 20px;
	padding: 20px;
	margin: 50px 0;
}
.sub-container {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
	gap: 50px;
	height: max-content;
}
.bannercal{
	background: url("/media/EMI.jpg") no-repeat;
  background-size: 100%;
  height: 700px;
}
#container-h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 30px;
    color: #004998;
}

.breakup {
	position: relative;
	width: 350px;
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: 40px;
	margin-top: 60px;
	
}

.breakup h2 {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -55%);
	width: 100px;
	height: 100px;
	text-align: center;
}

.details input {
	width: 100%;
}

/* .view {
	background-color: #E6EDF6;
	padding: 15px;
	width: 500px;
	height: 350px;
	display: flex;
	flex-direction: column;
	align-items: center;
		border-radius: 20px;
} */

.details {
	border: 1px solid #E6EDF6;
	border-radius: 20px;
	padding: 10px 50px 30px 40px;
	background-color: white;
	width: 450px;
	display: flex;
	flex-direction: column;
	row-gap: 30px;
	margin-top: 0px;
	 box-shadow: 0px 0px 10px #535353;
	border: 2px solid white;
}



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

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

input[type="range"] {
  -webkit-appearance: none;
  appearance: none; 
  width: 100%;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 16px;
  display: flex;
  align-items: center;
  background: #fff;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 15px;
  background: #aacaffcb;
}

input[type="range"]::-moz-range-track {
  height: 15px;
  background: #aacaffcb;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none; 
  height: 30px;
  width: 30px;
  background-image: url("../assets/progress-bar-car.png");
  background-size: cover;
  box-shadow: -407px 0 0 400px #4682E3;
  border: none;
  border-radius: 50%;
  position: relative;
  bottom: 7px;
}


input[type="range"]::-moz-range-thumb {
  height: 35px;
  width: 35px;
  background-image: url("/media/progress-bar-car.png");
  background-size: cover;
  box-shadow: -407px 0 0 400px #4682E3;
}


/* #price {
	color: #130f31;
	font-size: 25px;
} */

.loan-details-wrapper {
	width: 300px;
}

.loan-details {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	background-color: #567fc0;
	border-radius: 10px;
	text-align: center;
	height: 300px;
	padding-top: 10px;
	font-family: poppins;
	font-weight: 600;
	  box-shadow: 0px 0px 10px #535353;
	border: 2px solid white;
}

.loan-details1 {
	display: none;
}

/* #price-container {
	color: #9088d2;
	margin-top: 50px;
} */

/* #pieChart {
	width: 400px !important;
	height: 400px !important;
} */


#cp {
	font-size: 17px;
}

.chart-details p {
	font-size: 16px;
}
.cibilscore{
	display: flex;
	justify-content: space-around;
}
.carimgg img{
	width: 900px;
	padding-top: 15%;
	padding-left: 20%;
	/* box-shadow: 0px 0px 10px #535353; */
}

@media (max-width:1700px){
	.bannercal{
	background: url("/media/EMI.jpg") no-repeat;
  background-size: 100%;
  height: 520px;
}
.cibilscore{
	display: flex;
	justify-content: space-around;
	margin-top: 40px;
}
.carimgg img{
	width: 600px;
	padding-top: 35%;
	padding-left: 10%;
	
}
} 
@media (max-width: 1400px) {
	.breakup {
		width: 500px;
	}

}

@media (max-width: 1000px) {
	.view, .breakup {
		width: 350px;
	}

	.view {
		padding: 0;
		width: 750px;
		margin-left: 35%;
	}
.bannercal{
	background: url("/media/EMI.jpg") no-repeat;
  background-size: 100%;
  height: 320px;
}

	.sub-container {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
		
	.breakup {
		display: flex;
		justify-content: center;
	}

	#pieChart {
		width: 300px !important;
		height: 300px !important;
	}

	.breakup img {
		width: 80px;
		height: 80px;
		transform: translate(-50%, -50%);
	}

	.view {
		width: 100%;
		margin-bottom: 30px;
		background-color: transparent;
	}

	.loan-details-wrapper {
		width: 104%;
	}

		.sub-container {
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}
		.cibilscore{
	display: flex;
	flex-direction: column;
}
.carimgg img{
	width: 650px;
	padding-top: 5%;
	padding-left: 11%;
	/* box-shadow: 0px 0px 10px #535353; */
}

}

@media (max-width: 768px) {
	.container {
		width: 400px;
		margin-bottom: 0;
	}

	.sub-container {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
		
	.breakup {
		display: flex;
		justify-content: center;
	}

	#pieChart {
		width: 300px !important;
		height: 300px !important;
	}

	.breakup img {
		width: 80px;
		height: 80px;
		transform: translate(-50%, -50%);
	}

	.view {
		width: 100%;
		margin-bottom: 30px;
		background-color: transparent;
	}

	.loan-details-wrapper {
		width: 104%;
	}
	.carimgg img{
display: none;
}
		.sub-container {
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}
}

@media (max-width: 478px) {
	.container {
		width: 300px;
	}
	.sub-container .view {
		width: 100%;
	}

	#cp {
		font-size: 14px;
	}
.bannercal{
	background: url("/media/EMI.jpg") no-repeat;
  background-size: 100%;
  height: 170px;
}
	.breakup {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	#pieChart {
		width: 300px !important;
		height: 300px !important;
	}

	.breakup img {
		width: 60px;
		height: 60px;
	}

	.view {
		padding: 0;
	}

	.loan-details-wrapper {
		width: 118%;
	}
	.cibilscore{
	display: flex;
	flex-direction: column;
}
.carimgg img{
display: none;
}
.details {
	border: 1px solid #E6EDF6;
	border-radius: 20px;
	padding: 10px 50px 30px 40px;
	background-color: white;
	width: 360px;
	display: flex;
	flex-direction: column;
	row-gap: 30px;
	margin-top: 0px;
	 box-shadow: 0px 0px 10px #535353;
	border: 2px solid white;
}


.loan-details {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	background-color: #567fc0;
	border-radius: 10px;
	text-align: center;
	height: 300px;
	width: 350px;
	margin-left: 40px;
	padding-top: 10px;
	font-family: poppins;
	font-weight: 600;
	  box-shadow: 0px 0px 10px #535353;
	border: 2px solid white;
}

}