/* 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: space-around;
            margin-top: 10px;
        }

        .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;
        }
        .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;
        }