.header,
.footer {
	display: none;
}

body {
	padding: 0 !important;
}

.engagment-form-section {
	display: flex;

	min-height: 100vh;

	align-items: start;
}

.engagment-form-section aside {
	background-color: #f7f7f7;

	padding: 3rem;

	width: 30%;

	position: sticky;

	top: 0;

	height: 100vh;
}

.engagment-form-section main {
	background-color: var(--white-color);

	padding: 3rem;

	width: 70%;
}

.engagment-form-section aside img {
	max-width: 250px;

	margin: 0 auto 20px auto;
}

.engagment-form-section aside .form-tab {
	display: flex;

	gap: 20px;

	color: #636363;

	border: 0;

	background-color: unset;

	margin-bottom: 30px;

	align-items: center;

	position: relative;
}

.engagment-form-section aside .form-tab span {
	border-radius: 12px;

	border: 1px solid #dce2f3;

	padding: 10px;

	width: 40px;

	height: 40px;

	display: flex;

	align-items: center;

	justify-content: center;
}

.engagment-form-section aside .form-tab:after {
	content: "";

	left: 19px;

	top: 39px;

	background-color: #dce2f3;

	position: absolute;

	width: 1px;

	height: 31px;
}

.engagment-form-section aside .form-tab::before {
	content: "";

	left: 19px;

	top: 39px;

	background-color: #dce2f3;

	position: absolute;

	width: 1px;

	height: 0;
}

.engagment-form-section aside .form-tab.active {
	color: var(--secondary-color);

	font-weight: 600;
}

.engagment-form-section aside .form-tab.active span {
	border-color: var(--secondary-color);
}

.engagment-form-section aside .form-tab.active:after,
.engagment-form-section aside .form-tab.active::before {
	background-color: var(--secondary-color);
}

.engagment-form-section main .form-outer-wrapper .heading {
	text-align: center;

	margin-bottom: 30px;
}

.engagment-form-section main .form-outer-wrapper .heading h3 {
	font-size: 2.4rem;

	font-weight: bold;
}

.engagment-form-section main .form-outer-wrapper {
	max-width: 650px;

	width: 100%;

	margin: 0 auto;
}

.engagment-form-section .form-group-lable {
	color: var(--secondary-color);

	border-bottom: 2px solid var(--secondary-color);

	padding-bottom: 10px;

	margin-bottom: 20px;

	font-weight: 600;

	text-transform: uppercase;
}

.engagment-form-section .form-label {
	color: var(--black-color);

	font-weight: 600;
}

.engagment-form-section .form-control,
.engagment-form-section .form-select {
	border-radius: 12px;

	padding: 12px 20px;

	border-color: #e0e0e0;
}

.form-select:focus,
.form-control:focus {
	border-color: var(--secondary-color);

	outline: 0;

	box-shadow: 0 0 0 0.25rem rgb(0 47 16 / 19%);
}

.engagment-form-section aside .form-tab:last-of-type.active:after,
.engagment-form-section aside .form-tab:last-of-type:after {
	display: none;
}

.input-wrapper .form-check-input[type="checkbox"] {
	padding: 0.7rem;

	border-radius: 7px;
}

.input-wrapper .form-check {
	margin-bottom: 16px;
}

.input-wrapper .form-check label {
	margin-left: 10px;

	margin-top: 3px;

	font-weight: bold;

	color: var(--black-color);
}

.transparent-button {
	padding: 14px 35px !important;
}

.upload-container {
	border: 2px dashed #ccc;

	border-radius: 8px;

	padding: 15px 20px;

	text-align: center;

	cursor: pointer;

	transition: border-color 0.3s;

	width: 100%;

	margin: 0 auto;
}

.upload-container:hover {
	border-color: #666;
}

.upload-label {
	display: block;

	cursor: pointer;
}

.upload-icon {
	font-size: 40px;

	color: #666;

	margin-bottom: 10px;
}

.upload-text {
	font-size: 16px;

	font-weight: 500;

	margin-bottom: 5px;
}

.upload-accepted {
	font-size: 14px;

	color: #888;
}

.upload-input {
	display: none;
}

div#file-list {
	display: flex;

	gap: 10px;

	margin: 10px 0;
}

div#file-list .file-item {
	background-color: #d3d3d35e;

	padding: 8px 20px;

	border-radius: 50px;

	border: 1px dashed #b1b1b1;

	display: flex;
}

div#file-list .file-item .remove-file {
	border: 1px solid #eee;

	border-radius: 50%;

	margin-left: 10px;

	font-size: 1.4rem;

	line-height: 1;
}

#signature-pad {
	border: 1px solid #f4f4f4;

	border-radius: 10px;

	width: 100%;

	height: 180px;

	touch-action: none;

	background-color: #f4f4f4;
}

.fade:not(.show) {
	display: none;
}

.text-danger {
	margin: 10px 0 0 0;
}

#clear-btn {
	margin: 10px 0 0 0;
}

@media only screen and (max-width: 1255.2px) {
	.engagment-form-section aside {
		padding: 2.5rem 1.25rem;
	}

	.engagment-form-section main {
		padding: 2.5rem 1.25rem 6rem 1.25rem;
	}

	.engagment-form-section aside img {
		max-width: 200px;
	}
}

@media only screen and (max-width: 991.2px) {
	.engagment-form-section main .form-outer-wrapper .heading h3 {
		font-size: 2.25rem;
	}

	.engagment-form-section {
		min-height: unset;
		flex-wrap: wrap;
	}

	.engagment-form-section aside {
		width: 100%;
		height: auto;
		position: static;
		top: unset;
		text-align: center;
		padding: 20px;
	}

	.engagment-form-section aside>div,
	.form-step-wrapper {
		width: 90%;
		margin: 0 auto;
	}

	.engagment-form-section .form-step-wrapper .nav {
		margin: 0 !important;
	}

	.engagment-form-section .form-step-wrapper .nav {
		flex-direction: row !important;
		justify-content: center;
	}

	.engagment-form-section aside .form-tab {
		margin-bottom: 0;
		gap: 8px;
		margin-right: 40px;
		font-size: 15px;
	}

	.engagment-form-section aside .form-tab span {
		font-size: 18px;
	}

	.engagment-form-section aside .form-tab:last-child {
		margin: 0;
	}

	.engagment-form-section aside .form-tab::before,
	.engagment-form-section aside .form-tab::after {
		left: 100%;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		width: 40px;
	}

	.engagment-form-section aside .form-tab::after {
		height: 1px;
	}

	.engagment-form-section main {
		width: 100%;
	}

	.engagment-form-section main .form-outer-wrapper {
		max-width: 90%;
	}
}

@media only screen and (max-width: 901px) {
	.engagment-form-section main .form-outer-wrapper .heading h3 {
		font-size: 2.188rem;
	}

	.engagment-form-section aside>div,
	.form-step-wrapper {
		width: 100%;
	}

	.engagment-form-section aside .form-tab span {
		width: 30px;
		height: 30px;
		font-size: 15px;
		border-radius: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-ms-border-radius: 6px;
		-o-border-radius: 6px;
	}
}

@media only screen and (max-width: 767.2px) {
	.engagment-form-section main .form-outer-wrapper .heading h3 {
		font-size: 2rem;
	}

	.engagment-form-section aside .form-tab {
		font-size: 14px;
	}
}

@media only screen and (max-width: 731px) {
	.engagment-form-section aside .form-tab {
		margin-right: 30px;
	}

	.engagment-form-section aside .form-tab::before,
	.engagment-form-section aside .form-tab::after {
		width: 30px;
	}
}

@media only screen and (max-width: 667px) {
	.engagment-form-section aside .form-tab {
		font-size: 13px;
	}
}

@media only screen and (max-width: 641px) {
	.engagment-form-section aside .form-tab span {
		width: 20px;
		height: 20px;
		font-size: 12px;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-ms-border-radius: 4px;
		-o-border-radius: 4px;
	}

	.engagment-form-section aside .form-tab {
		margin-right: 20px;
		font-size: 12px;
	}

	.engagment-form-section aside .form-tab::before,
	.engagment-form-section aside .form-tab::after {
		width: 20px;
	}

}

@media only screen and (max-width: 575.2px) {
	.engagment-form-section main .form-outer-wrapper .heading h3 {
		font-size: 1.875rem;
	}

	.engagment-form-section .form-control,
	.engagment-form-section .form-select {
		font-size: 14px;
		padding: 10px;
	}

	.input-wrapper .form-check {
		flex-direction: column-reverse !important;
	}

	.input-wrapper .form-check>div.d-flex.align-items-center {
		padding-left: 50px;
		margin-top: 10px;
	}
}

@media only screen and (max-width: 531px) {
	.engagment-form-section aside .form-tab {
		margin-right: 30px;
		font-size: 0;
		gap: 0;
	}

	.engagment-form-section aside .form-tab span {
		width: 30px;
		height: 30px;
		font-size: 15px;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
	}

	.engagment-form-section aside .form-tab::before,
	.engagment-form-section aside .form-tab::after {
		width: 30px;
	}
}

@media only screen and (max-width: 501px) {
	.engagment-form-section main .form-outer-wrapper .heading h3 {
		font-size: 1.75rem;
	}
}

@media only screen and (max-width: 481px) {
	.engagment-form-section main .form-outer-wrapper .heading h3 {
		font-size: 1.563rem;
	}

	div#file-list .file-item {
		width: 100%;
	}

	div#file-list .file-item span {
		font-size: 13px;
	}

	div#file-list .file-item .remove-file {
		font-size: 13px;
		margin-left: 6px;
	}
}

@media only screen and (max-width: 376px) {
	div.col-12.d-flex.justify-content-between {
		flex-direction: column;
		gap: 20px;
	}

	.transparent-button {
		padding: 10px 20px !important;
	}

	.button-style2 {
		padding: 10px 20px;
	}
}