@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;600;700;800;900&display=swap');

body{
  font-family: 'Red Hat Display', sans-serif;  
}
:root{
  --main-color:#8c142b;
  --s-main-color: #ae2541;
  --fff:#fff;
  --a111:#323232fe;
}

header{
  width: 100%;
  background: var(--fff);
  color: var(--a111);
  transition: 0.9s;
}
.mobile-header{
  width: 100%;
  background: var(--fff);
  color: var(--a111);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  transition: 0.9s;
}
.banner-text{
  position: absolute;
  top: 0;
  left: 0;
}

.banner-form{
  background: var(--s-main-color);
}
.banner-form h2,
.banner-form p{
  color: var(--fff);
}
.banner-form::after{
  content: "";
  width: 100%;
  height: 200px;
  background: var(--main-color);
  position: absolute;
  top: -95px;
  left:0;
  border-radius: 100px;
}

.button-style{
  background: var(--main-color);
  border: 1px solid var(--fff);
  color: var(--fff);
  transition: 0.6s;
}

.button-style:hover{
  color:var(--main-color) ;
  background: var(--fff);
}

.banner-img::after{
  content: "";
  width: 100%;
  height: 100%;
  background: #00000064;
  position: absolute;
  top: 0;
  left: 0;
}

.banner-heading{
  color: var(--fff);
}
.button-style{
  background-color: var(--main-color);
  color: var(--fff);
}

.banner-form form .form-control{
  padding:  10px;
  height: 33px;
}
.banner-form form .form-control::-webkit-input-placeholder { 
 color: #323232fe;
 font-size: 14px;
}
.banner-form form .form-control::-moz-placeholder { 
 color: #323232fe;
 font-size: 14px;
}
.banner-form form .form-control:-ms-input-placeholder {
 color: #323232fe;
 font-size: 14px;
}
.banner-form form .form-control:-moz-placeholder {
 color: #323232fe;
 font-size: 14px;
}

p{
  font-family: sans-serif;
  font-size: 15px;
  word-spacing: 0.1rem;
}

.hover-zoom{
  -webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out; 
}
.hover-zoom:hover{
  -webkit-transform: scale(1.1);
  transform: scale(1.1);  
  text-decoration: none; 
}

.steps3{
  background:#e3ddcf;
}

.common-head{
  color: var(--a111);
}

.common-head span{
  color: var(--main-color);
}

.steps-num{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.testimonials-svg{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--fff);

}
.testimonials-box{
  background: var(--main-color);
  color:var(--fff);
  padding: 20px;

}

.slider-w100{
  background: var(--s-main-color);
}

.f-ul li::after{
  content: "";
  width: 17px ;
  height: 17px;
  background:url(../img/arrow.png) no-repeat center;
  background-size: cover;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
footer{
  background: var(--main-color);
  color: var(--fff);
}
footer p{
  font-size: 12px;
}
footer p a:hover,
footer p a{
  color: var(--fff);
  text-decoration: none;
}

footer p a:hover{
  font-weight: 600;
}


.iti{
  width: 100%;
}

.iti__dial-code,
.iti__country-name{
  font-size: 11px;
}

.iti__country-list{
  width: 200px;
  overflow: auto;
}

.phone-num{
  padding-left: 45px !important;
}
.footerlink a,
.footerlink span{
  color: var(--fff);
}

.footerlink a:hover,
.footerlink span:hover{
  color: var(--fff);
}

.modal-content .banner-form{
  width: 100%;
}

.modal-body .close{
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  font-size: 25px;
  color: var(--fff);
}


/****************Loan Calculator *************/




/* .sub-container {
	display: flex;
	width: 100%;
	gap: 50px;
	height: max-content;
} */


.view,
.breakup {
	width: 50%;
}
.detailss input,
.details input {
	width: 100%;
  padding: 10px 15px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom:2px solid var(--s-main-color);

}

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

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

/*----- Styling the sliders ----*/
input[type="range"] {
	-webkit-appearance: none;
	margin: 10px 0;
	width: 100%;
}

input[type="range"]:focus {
	outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	background: var(--s-main-color);
	border-radius: 10px;
}

input[type="range"]::-webkit-slider-thumb {
	box-shadow: 2px 2px 5px #b3b3b3, -1px -1px 3px grey;
	border: 5px solid #ffffff;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: var(--s-main-color);
	cursor: pointer;
	margin-top: -6px;
	-webkit-appearance: none;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
	background: #b3b3b3;
}

input[type="range"]::-moz-range-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	background: var(--s-main-color);
	border-color: transparent;
	border-width: 16px 0;
	color: transparent;
	border-radius: 10px;
}

input[type="range"]::-moz-range-thumb {
	box-shadow: 2px 2px 5px #b3b3b3, -1px -1px 3px grey;
	border: 5px solid #ffffff;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: var(--s-main-color);
	cursor: pointer;
	margin-top: -6px;
}

input[type="range"]::-ms-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	background: var(--s-main-color);
	border-color: transparent;
	border-width: 16px 0;
	color: transparent;
	border-radius: 10px;
}

input[type="range"]::-ms-fill-lower {
	background: var(--s-main-color);
	border-radius: 5px;
}

input[type="range"]::-ms-fill-upper {
	background: var(--s-main-color);
	border-radius: 5px;
}

input[type="range"]::-ms-thumb {
	box-shadow: 2px 2px 5px #b3b3b3, -1px -1px 3px grey;
	border: 5px solid #ffffff;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: var(--s-main-color);
	cursor: pointer;
	margin-top: -6px;
}

input[type="range"]:focus::-ms-fill-lower {
	background: var(--s-main-color);
}

input[type="range"]:focus::-ms-fill-upper {
	background: var(--s-main-color);
}

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

/* .loan-details {
	width: 90%;
	display: flex;
	justify-content: space-between;
	gap: 30px;
} */

/* #price-container {
	color: var(--s-main-color);
}

#price-container::before {
	content: "Monthly Payable:";
	font-size: 12px;
	display: block;
} */

#lineChart{
  display: none !important;
}

.detailss label,
.detail p{
  color: var(--s-main-color);
  margin-bottom: 0px;
  font-size: 20px;
}
.detail-p-11{
  color: var(--main-color);
  border: 1px solid var(--main-color);
  background: #ae254056;
  padding: 5px;
  border-radius: 5px;
  text-align: end;
}
.details input:focus-visible{
  outline: none;
}
.detailss input:focus-visible{
  outline: none;
}

.chart-details p:first-child{
  color: var(--a111);
  font-weight: 600;
  font-size: 20px;
}
.rs,
#price,
.chart-details-p2{
  font-size: 25px;
  color: var(--main-color);
  font-weight: 600;
}

#price-container::before {
	content: "Monthly Payable:";
	font-size: 20px;
	display: block;
  font-weight: 600;
  color: var(--a111);
  text-align: center;
  width: 100%;
}

#price-container{
  font-weight: 600;
  color: var(--a111);
}
.logo-1{
  width: 80px;
  height: 50px;
}
.logo-2{
  width: 159px;
  height: 50px;
}

.Calculator-btn:hover{
  border: 1px solid var(--main-color);
  box-shadow: 0 0 9px 5px #8c142a75;
}

.s7num{
  color: var(--a111);
  font-weight: 600;
}
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
         -webkit-appearance: none;
      }

.btn-link{
  display: block;
  width: 100%;
  text-align: left;
  position: relative;
  background: var(--s-main-color);
  color: var(--fff);
  font-weight: 600;
  padding: 18px 25px;
  font-size: 25px;
  text-decoration: none;
}
#accordion .card .card-header .btn-link.collapsed{
  background: var(--a111);
  color: var(--fff); 
} 

#accordion .card .card-header .btn-link.collapsed::after{
  content:"+";
  color: var(--fff);
  width: 20px;
  height: 20px;
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-75%);
  text-align: center;
} 

 #accordion .card .card-header .btn-link::after{
  content:"-";
  color: var(--fff);
  width: 20px;
  height: 20px;
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-75%);
  text-align: center;
} 

#accordion .card .card-header{
  padding: 0%;
}

#accordion .card .card-header .btn-link:hover{
  text-decoration: none;
  color: var(--fff);
}
#accordion .card .card-header .btn-link{
  text-decoration: none;
}


.header-call{
  color: #8c142b;
  font-weight: 600;
  font-size: 16px;

}
.header-call:hover{
  color: #8c142b;
  
  text-decoration: none;
  
}

/* =============Eligibility calculator============= */

table tbody tr td,
table thead tr th{
  text-align: center;
}

table thead tr th{
  background: #8c142b;
  color: #fff;
}

.main-tab li button{
  font-size: 1.2rem;

}
.main-tab li button.active{
  font-weight: 600;
  position: relative;
  
}

.main-tab li button span{
  display: block;
  width: 0%;
  margin: 0 auto;
  height: 3px;
  border-radius: 10px;
  transition: 0.6s;
}

.main-tab li button.active span{

  width: 100%;
  background: #8c142b;
}

/* Hide the default radio button */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 15px;
  height: 15px;
  border: 2px solid #555;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  margin-right: 5px;
}

/* Define styles for the checked state */
input[type="radio"]:checked {
  background-color: #8c142b;
}


input[type="radio"]:checked {
  background-color: #8c142b;
}

.co-hide{
  display: none;
}