.calculator_section {
	padding: 20px 30px;
	margin-top: 150px;
	margin-bottom: 30px;
}

.calculaor_container {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
	margin: 0 auto;
	max-width: 1000px;
	padding: 30px
}

.calculator_head h2 {
	color: #19191e;
	font-size: 28px;
	margin-bottom: 16px
}

.calculator_head p {
	color: #7d7d82;
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 30px
}

.calculator_progress {
	margin-bottom: 50px;
}

.progress_row {
	display: flex;
	/* flex-wrap: wrap; */
	gap: 20px;
	/* justify-content: center; */
}

.progress_row .progress_item {
	flex: 1;
	position: relative;
	text-align: center
}

.progress_item p {
	color: #c4c4c4;
	font-size: 15px;
	margin-bottom: 0;
	text-align: left;
	white-space: nowrap;
}

.progress_item.active p {
	color: #0083db;
	display: block;
	font-weight: 500;
	white-space: nowrap;
}

.progress_item hr {
	background: #c4c4c4;
	border: 0;
	bottom: -10px;
	height: 2px;
	position: absolute;
	width: 100%;
	margin: 0;
}

.progress_item.active hr {
	background: #0083db
}

.calculator_steps {
	margin-bottom: 20px
}

.calculator_step {
	display: none;
	opacity: 0;
	transition: all .3s ease
}

.calculator_step.active {
	display: block;
	opacity: 1
}

.form_heading h2 {
	color: #19191e;
	font-size: 24px;
	margin-bottom: 16px;
	text-align: left;
}

.form_options {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 20px
}

.form_boxes {
	background-color: #f7f7f7;
	border: 1px solid #c4c4c4;
	border-radius: 6px;
	cursor: pointer;
	flex: 1 1 calc(50% - 20px);
	padding: 30px;
	text-align: center;
	transition: all .2s ease
}

.form_boxes:hover {
	background-color: #e6e6e6
}

.form_boxes:not(.static).active {
	background-color: #0083db;
	border-color: #0083db
}

.form_boxes p {
	color: #19191e;
	margin: 0
}

.form_boxes.active p {
	color: #fff
}

.slider-container {
	margin-top: 20px
}

.slider-wrapper {
	margin-bottom: 30px
}

label {
	display: block;
	font-size: 16px;
	margin: 0
}

.slider-wrapper label {
	margin-bottom: 40px
}

#number-of-estimators {
	border: 1px solid #c4c4c4;
	border-radius: 4px;
	font-size: 16px;
	outline: none;
	padding: 8px;
	text-align: center;
	width: 100px !important;
}

#number-of-estimators:focus {
	border-color: #0083db;
	box-shadow: 0 0 5px rgba(0, 131, 219, .3)
}

.time_savings {
	margin: 30px 0
}

.time_savings_row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between
}

.time_savings_column {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.time_savings_box {
	background-color: #fff;
	border: 1px solid #c4c4c4;
	border-radius: 6px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
	flex: 1 1 calc(50% - 20px);
	padding: 27px;
	text-align: center
}

.time_savings_box p {
	color: #7d7d82;
	font-size: 16px;
	margin-bottom: 20px;
	margin-top: 0
}

.time_savings_box span {
	color: #0083db;
	font-size: 24px;
	font-weight: 700
}

.potential_metrics {
	display: flex;
	gap: 20px;
	margin: 20px 0 0
}

.potential_metrics .time_savings_box {
	margin-bottom: 20px
}

.form_boxes label {
	color: #7d7d82;
	display: block;
	font-size: 14px;
	margin-bottom: 5px
}

.form_boxes input {
	border: 1px solid #c4c4c4;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 16px;
	padding: 10px;
	width: calc(100% - 20px)
}

.time_savings_box:hover {
	background-color: #f0f8ff;
	border-color: #0083db
}

@media (max-width: 767px) {
	.time_savings_row {
		flex-direction: column;
		gap: 10px
	}

	.time_savings_box {
		flex: 1 1 100%
	}
}

.slider {
	align-items: center;
	display: flex;
	position: relative
}

input[type=range] {
	appearance: none;
	background: #c4c4c4;
	border-radius: 10px;
	cursor: pointer;
	height: 4px;
	outline: none;
	width: 100%
}

input[type=range]::-webkit-slider-thumb {
	appearance: none;
	background: #0083db;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	height: 16px;
	width: 16px
}

.slider-tooltip {
	background: #0083db;
	border-radius: 4px;
	color: #fff;
	font-size: 12px;
	left: 0;
	padding: 5px 10px;
	pointer-events: none;
	position: absolute;
	top: -30px;
	transform: translateX(-50%)
}

.contact_row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px
}

.contact_col.investment_col {
	flex: 1;
	min-width: calc(40% - 15px);
}

.contact_col.contact_form_col{
	flex: 1;
	min-width: calc(60% - 15px);
}

.investment_image {
	margin-bottom: 20px
}

.investment_image img {
	max-width: 100%
}

.return_investment {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
	padding: 20px;
	text-align: center
}

.return_investment h2 {
	color: #0083db;
	font-size: 72px;
	margin: 0
}

.return_investment h4 {
	color: #19191e;
	font-size: 18px;
	margin: 10px 0 20px
}

.return_investment p {
	color: #7d7d82;
	font-size: 14px
}

.buttons_wrapper {
	margin-top: 30px
}

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

.pagination_buttons a {
	border: 2px solid transparent;
	border-radius: 4px;
	display: inline-block;
	padding: 10px 30px;
	text-align: center;
	text-decoration: none;
	transition: all .2s ease
}

.pagination_buttons a.back_btn {
	border: 1px solid #0083db;
	border-radius: 4px;
	color: #0083db
}

.next_btn,
.pagination_buttons a.back_btn:hover {
	background-color: #0083db;
	color: #fff !important;
}

.next_btn:hover {
	background-color: #006bb3
}

.investment_table {
	position: relative;
	margin-bottom: 30px;
	margin-top: 40px;
	border: 1px solid #ccc;

}

.investment_table table {
	border-collapse: collapse;
	width: 100%
}

.investment_table td,
.investment_table th {
	border-bottom: 1px solid #c4c4c4;
	padding: 10px;
	text-align: left
}

.investment_table th {
	background-color: #f7f7f7;
	color: #19191e;
	font-weight: 500
}

.investment_table td {
	color: #7d7d82
}

input[type=email], input[type=file], input[type=number], input[type=phone], input[type=search], input[type=tel], input[type=text], select, textarea{
      box-sizing: border-box;
    padding: 0 15px;
    min-height: 27px;
    height: 40px;
    color: #33475b;
    border: 1px solid #cbd6e2;
    font-size: 16px;
    font-weight: normal;
    line-height: 22px;
    background-color: #f5f8fa;
}

.hs-form label{
      font-family: Roboto;
    font-size: 15px;
}
  

@media (max-width: 767px) {
	.progress_bar {
		overflow-x: auto;
		overflow-y: visible;
	}

	.progress_row {
		/* flex-wrap:wrap; */
	}

	.form_boxes {
		flex: 1 1 calc(50% - 20px)
	}

	.contact_col {
		min-width: 100%
	}

	.buttons_row {
		gap: 20px
	}

	.pagination_buttons a {
		flex: 1 1 100%;
		margin: 10px 0;
		text-align: center
	}
}

@media (max-width: 576px) {
	.form_boxes {
		flex: 1 1 100%
	}

	.slider-tooltip {
		font-size: 10px;
		padding: 3px 8px
	}
}

.info-tooltip {
	position: relative;
	cursor: pointer;
	color: #0083db;
	font-weight: bold;
	margin-left: 5px;
	font-size: 16px !important;
}

.info-tooltip::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 0;
	background-color: #333;
	color: #fff;
	padding: 6px 8px;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	width: 220px;
	/* adjust as needed */
	font-size: 12px;
	margin-bottom: 5px;
	z-index: 999;
}

.info-tooltip:hover::after {
	opacity: 1;
}

.blurred-content {
	filter: blur(5px);
	/* The blur effect */
	pointer-events: none;
	/* Prev        /* Slightly faded */
	transition: filter 1s ease, opacity 1s ease;
}

.blur-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(255, 255, 255, 0.8);
	padding: 20px 30px;
	border-radius: 6px;
	text-align: center;
	pointer-events: none;
	/* Overlay text isn't clickable */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.blur-overlay p {
	margin: 0;
	font-size: 16px;
	color: #19191e;
	font-weight: 600;
}

#roi_calculator_data-042222ab-bbd5-4239-8435-9b5fee988c80,
.hs_roi_calculator_data{
  display: none;
}