/* import fonts */
   @import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

   /* import poppins font */

   /* variables  */
   :root {
   	--primary-color: #65BF76;
   	--secondary-color: #FFAA46;
   	--color-gray: #4e5565;
   	--maven-font: 'Maven Pro', sans-serif;
   	--poppins-font: 'Poppins', sans-serif;
   }

   /* defaults */
   .multistep-form * {
   	margin: 0;
   	padding: 0;
   	box-sizing: border-box;
   	font-size: 16px;
   	font-family: var(--poppins-font);
   }

   .multistep-form {
   	--primary-color: #65BF76;
   	--secondary-color: #FFAA46;
   	--color-gray: #4e5565;
   	--maven-font: 'Maven Pro', sans-serif;
   	--poppins-font: 'Poppins', sans-serif;
   	display: flex;
   	justify-content: center;
   	align-items: center;
   	height: fit-content;
   	margin-top: 25px;
   	margin-left: auto;
   	margin-right: auto;
   	max-width: 550px;
   	/* box-shadow: 1px 1px 11px #efefef; */
   }

   .multistep-form .h5 {
   	text-align: center;
   	font-size: 20px;
   	font-weight: 600;
   	color: #000;
   	margin-bottom: 15px;
   }

   .multistep-form .h1.text-large {
   	color: var(--primary-color);
   	text-align: center;
   	font-size: 28px;
   	font-weight: 700;
   }

   .multistep-form .btn.btn-primary {
   	background-color: var(--secondary-color) !important;
   	color: #fff;
   	font-size: 20px;
   	border: 1px solid var(--secondary-color);
   	cursor: pointer;
   	transition: all .3s ease-in-out;
   	text-transform: uppercase;
   	font-weight: 700;
   }

   .multistep-form .btn.btn-primary.outline {
   	background-color: #fff !important;
   	color: var(--color-gray);
   	font-size: 20px;
   	border: 1px solid var(--color-gray);
   	cursor: pointer;
   	transition: all .3s ease-in-out;
   	text-transform: uppercase;
   	font-weight: 700;
   }

   .multistep-form .btn.btn-primary.outline:hover {
   	background-color: var(--color-gray);
   	color: #fff;
   	border: 1px solid var(--color-gray);
   }

   .multistep-form .btn.btn-primary:hover {
   	background-color: #fff;
   	color: var(--primary-color);
   	border: 1px solid var(--primary-color);
   }

   .multistep-form__form {
   	display: flex;
   	flex-direction: column;
   	align-items: center;
   	width: 100%;
   	padding: 35px 20px;
   	/* border: 1px solid #000; */
   	position: relative;
   	background: rgba(255, 255, 255, .95);
   	border-radius: 10px;
   	box-shadow: 1px 1px 11px #efefef;
   }

   .multistep-form__step {
   	display: none;
   	width: 100%;
   }

   .multistep-form__step.active {
   	display: flex;
   	flex-direction: column;
   	align-items: center;
   }

   .multistep-form__step h5 {
   	text-transform: uppercase;
   	font-weight: 400;
   	font-size: 18px;
   }

   .multistep-form__step input {
   	margin-bottom: 10px;
   	padding: 10px;
   	width: 90%;
   }

   .multistep-form__step button {
   	padding: 10px;
   	width: 100%;
   	margin-bottom: 10px;
   }

   /* progress bar */
   .progress-bar {
   	position: absolute;
   	top: 0;
   	left: 0;
   	width: 0;
   	height: 5px;
   	background-color: var(--primary-color);
   	transition: width .3s ease-in-out;
   }

   .button-multi-container {
   	display: flex;
   	justify-content: center;
   	align-items: center;
   	width: 80%;
   }

   .button-multi-container button {
   	margin: 0 5px;
   }

   .multistep-form .form-check {
   	display: flex;
   	align-items: flex-start;
   	padding-left: 0;
   	margin-top: 10px;
   	margin-bottom: 10px;
   }

   .multistep-form .form-check-label {
   	color: #000;
   	font-size: 11px;
   	line-height: 1.5;
   }

   .multistep-form .form-check-input {
   	position: relative !important;
   	width: fit-content !important;
   	margin-right: 5px;


   }

   .error-text {
   	color: red;
   	text-align: center;
   	margin-top: 10px;
   }

   .ezquote {
   	text-align: center;
   	margin-bottom: 15px;
   }

   .ezquote .title {
   	font-family: "Maven Pro", sans-serif;
   	font-size: 60px;
   	color: var(--primary-color);
   	font-weight: 600;
   }

   .ezquote .subtitle {
   	font-size: 20px;
   	color: #fff;
   	font-weight: 700;
   	background: var(--secondary-color);
   	padding: 2px 8px;
   	border-radius: 8px;
   	margin-top: 15px;
   }

   .multistep-form .checkbox-container {
   	display: flex;
   	justify-content: center;
   	margin-top: 10px;
   	flex-wrap: wrap;
   }

   .multistep-form .checkbox-container label {
   	display: block;
   	position: relative;
   	cursor: pointer;
   	background-color: #fff;
   	margin: 0 5px;
   	clip-path: circle(50%);
   	width: 100px;
   }

   .multistep-form .checkbox-container>div {
   	display: flex;
   	flex-direction: column;
   	justify-content: center;
   	align-items: center;
   	flex: 0 0 33%;
   }

   .multistep-form .checkbox-container .title {
   	margin-top: 10px;
   	font-size: 16px;
   	text-align: center;
   }


   .multistep-form .checkbox-container input[type="checkbox"] {
   	position: absolute;
   	opacity: 0;
   	cursor: pointer;
   }

   .multistep-form .checkbox-container img {
   	width: 100px;
   	height: 100px;
   	border: 4px solid #e2e2e2;
   	transition: border-color 0.3s;
   	border-radius: 50%;
   	object-fit: contain;
   	background: #fff;
   	/* padding: 10px; */
   	clip-path: circle(50%);
   }

   .multistep-form .checkbox-container input[type="checkbox"]:checked+img {
   	border-color: var(--primary-color) !important;
   	/* Green border when checked */
   	border-radius: 50%;
   }

   .multistep-form__next.btn {
   	background: var(--secondary-color);

   	padding-top: 15px;
   	padding-bottom: 15px;
   	font-size: 2rem;
   	font-weight: 700;
   }

   .multistep-form__prev.btn {
   	padding-top: 15px;
   	padding-bottom: 15px;
   	font-size: 2rem;
   	font-weight: 700;
   }

   .checkbox-list {
   	list-style-type: none;
   	padding: 0;
   }

   .checkbox-list li {
   	display: flex;
   	align-items: center;
   	margin-bottom: 10px;
   }

   .checkbox-list input[type="checkbox"] {
   	appearance: none;
   	/* Remove default checkbox */
   	width: 20px;
   	/* Set the size */
   	height: 20px;
   	/* Set the size */
   	background-color: white;
   	/* Background color */
   	border: 2px solid green;
   	/* Border color */
   	margin-right: 10px;
   	/* Adjust margin to bring the label closer */
   	display: inline-block;
   	position: relative;
   	margin-bottom: 0;
   }

   .checkbox-list input[type="checkbox"]:checked::after {
   	content: '\2714';
   	/* Unicode for check mark */
   	position: absolute;
   	top: 0;
   	left: 4px;
   	font-size: 18px;
   	color: green;
   }

   .checkbox-list label {
   	font-size: 16px !important;
   	color: #000;
   	margin-bottom: 0 !important;
   	line-height: 1em !important;
   }