@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&amp;display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&amp;display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter&amp;display=swap");

/*TOP AREA - Desktop*/
.top1 h2{font-size:75px; text-transform:uppercase; font-weight:900; color:white;}
.top1 .txt1{font-size:20px;}
.top1 .txt2{font-size:15px;}
.hero{height:85vh;}

/*TOP AREA - Tab*/
@media only screen and (max-width: 1200px) {
  	.top1 h2{font-size:45px; text-transform:uppercase; font-weight:900; color:white;}
	.top1 .txt1{font-size:15px;}
	.top1 .txt2{font-size:12px;}
	.hero{height:auto;}
}

/*TOP AREA - Mobile*/
@media only screen and (max-width: 800px) {
  	.top1 h2{font-size:45px; text-transform:uppercase; font-weight:900; color:white;}
	.top1 .txt1{font-size:15px;}
	.top1 .txt2{font-size:12px;}
	.hide_sm{display:none;}
	.hero{height:auto;}
}

/*Calculator - Desktop*/
.calculator .label{ color: #788694; font-size:18px; font-family: "Roboto", sans-serif; font-size: 16px; font-weight: 400;}
.calculator .rangeInput::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background-color: #1E874A; border-radius: 50%; cursor: pointer; box-shadow:1px 3px 5px #1E874A; }

.calculator .btn-light{ font-family: "Roboto", sans-serif; font-weight: 400; background-color: transparent; border: 1px solid grey; color:grey;}
.calculator .btn-light:hover{ background-color:#1E874A; border: 1px solid #1E874A; color:white;}
.calculator .btn-light.active{ background-color:#1E874A; border: 1px solid #1E874A; color:white; box-shadow:2px 2px 10px #1E874A; }

.calculator .total1 { width: 200px; height: 200px; border: 15px solid #00B140; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.calculator .total1 .label { margin: 0; color: #788694; font-family: "Roboto", sans-serif; font-size: 16px; font-weight: 400; }
.calculator .total1 .amount { margin: 0; font-size: 16px; font-weight: bold; color: #000; }

.calculator .btn-dark{ font-family: "Roboto", sans-serif; font-weight: 400; background-color:#1E874A; border: 1px solid grey; color:white;}
.calculator .btn-dark:hover{ background-color:#00B140; border: 1px solid #1E874A; color:white;}