@import url('https://fonts.googleapis.com/css2?family=Vend+Sans:ital,wght@0,300..700;1,300..700&display=swap');

    body{
        font-family: "Vend Sans", sans-serif;
    }

    a{
        text-decoration: none !important;
    }

	.form-step {
    display: none;
    animation: fadeIn 600ms ease;
    padding: 0px 0px;
}

.form-check-input:checked:before, 
.form-check-input:checked:after {
    content: "";
    position: absolute;
    height: 2px;
    background: #fff;
    margin-top: -1px;
    margin-left: 0px;
}

.form-check-input:checked[type=radio]:before{
	content: "";
    position: absolute;
    height: 2px;
    background: #fff;
    margin-top: -1px;
    margin-left: 0px;
}

.form-check-input:checked[type=radio]:after {
    display: none;
}

.form-check-input:checked[type=radio]:before {
    content: "";
    position: absolute;
    height: 10px;
    background: #ffffff;
    margin-top: 0;
    margin-left: 1px;
    width: 10px;
    transform: initial;
    top: 4px;
    border-radius: 100px;
}

.form-check-input:checked:before {
    width: 6px;
    top: 11px;
    left: 2px;
    transform: rotate(44deg);
}

.form-check-input:checked:after {
    width: 10px;
    top: 8px;
    left: 5px;
    transform: rotate(-55deg);
}

#addNewRole .select2-container--default .select2-selection--multiple {
    background-color: white !important;
    border: 1px solid #aaa !important;
    border-radius: 4px !important;
    cursor: text !important;
    padding-bottom: 5px !important;
    padding-right: 5px !important;
    position: relative !important;
    height: 50px !important;
    line-height: 22px !important;
    padding-left: 9px !important;
    padding-top: 8px;
}

button#saveNewRoles {
    padding: 11px 21px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0px;
    background: #000;
    border-color: #000;
  	color: #fff;
}

/*.form-check-input:checked[type=checkbox] {
    background: url(../images/mark-check.png) !important;
}


*/
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .form-step.active { 
        display: block; 
    }

    .multistepForm {
        font-family: "Vend Sans", sans-serif;
    }

    .multistepForm .form-group input {
        height: 60px;
        border-width: 2px;
        font-size: 18px;
        color: #000;
        border-radius: 0px;
        transition: initial;
    }

    .multistepForm .form-group {
        margin-bottom: 20px;
        padding-left: 0;
    }

    .multistepForm .form-step h4 {
        margin-bottom: 27px;
        color: #000;
    }

    .multistepForm .form-group .form-check-input:focus {
        box-shadow: initial;
    }

    .multistepForm .form-group .form-check input {
        width: 20px;
        height: 20px;
        padding: 0;
        position: absolute;
        top: 15px;
        left: 40px;
    }

    .multistepForm .form-check {
        position: relative;
    }

 .multistepForm .form-check label {
    width: 100%;
    padding: 15px 45px;
    height: 60px;
    border-radius: 0px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-width: 2px;
    cursor: pointer;
    transition: all 300ms ease-in-out;
    font-weight: 500;
    color: #000;
    font-weight: 500 !important;
    font-size: 15px !important;
}

    .multistepForm .form-check {
        display: flex;
        cursor: pointer;
        position: relative;
        width: 100%;
        padding-left: 0;
    }

    .form-group .form-check-input:checked {
        background-color: green !important;
        border-color: green !important;
    }

    .form-group .form-check-input:checked + .form-check-label {
        color: green !important;
        border-color: green;
    }

    .form-group .form-check:has(.form-check-input:checked) {
    border-color: green !important;
    }

    .skills {
        background: transparent;
        border-radius: 14px;
        padding: 5px 29px;
    }

    .multistepForm .form-group .skills .form-check {
        background: transparent;
        padding: 22px 43px;
        height: 14px;
        position: relative;
        border: 2px solid #e1e1e1;
        margin-left: 49px;
        margin-bottom: 13px;
    }

    .multistepForm .form-check-input:checked + .form-check::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    border: 2px solid #000;
    background: #000; 
    }


    .multistepForm .form-group .skills .form-check::before {
        position: absolute;
        left: -25px;
        height: 10.1vh;
        width: 1px;
        background: #e1e1e1;
        content: "";
    }

    .hire-talent .form-check {
        height: 100% !important;
        padding: 0px 0px !important;
    }

    .hire-talent .form-check .form-check-input[type=radio] {
        display: none;
    }

    .multistepForm .form-group .skills .form-check::after {
        position: absolute;
        left: -25px;
        width: 21px;
        content: "";
        height: 2px;
        background: #e1e1e1;
        top: 21px;
    }

    .skills .form-check:has(.form-check-input:checked) {
        border-color: green !important;
    }

    .skills .form-check-input:checked + .form-check-label {
        color: #000;
    }

    .skills .form-check-input:checked {
        background-color: #000;
        border-color: #000;
    }

    .skills label b {
        margin-bottom: 33px !important;
        display: block;
        font-size: 18px;
        font-weight: 500;
        color: #1e1e1e;
    }

    .form-check-input:focus {
        box-shadow: inherit;
    }

    .form-step .next-step,
    .form-step .prev-step,
    .form-step .submit-step,
    .form-step .add-role-btn{
    	padding: 13px 30px;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-radius: 0px;
        color: #fff;
    }

     .form-step .next-step,
    .form-step .prev-step,
    .form-step .submit-step,
    .form-step .add-role-btn:focus{
        box-shadow: initial;
    }

        .btn.focus, .btn:focus {
            outline: 0;
            box-shadow: initial !important;
        }

    .next-step,
    .next-step:hover{
        background: #ff3c00;
        border-color: #ff3c00;
        color: #fff;
    }

    a.add-role-btn {
        background: #000;
    }

    .is-normal{
        border: 1px solid #999;
    }

    .button-group {
        display: flex;
        justify-content: space-between;
    }

    #priceSummary {
        border: 1px solid #e5e5e5;
        padding: 26px 22px;
        border-radius: 10px;
    }

    #priceSummary h5 {
        color: #000;
        margin-bottom: 10px;
    }

    .hire-talent {
        text-align: center;
        padding: 30px 0;
    }

   .hire-talent h3 {
    font-size: 20px;
    color: #343434;
    font-weight: 400;
    margin-bottom: 0;
}

    .hire-talent p {
        margin-bottom: 0;
    }


    .hire-talent .form-check {
        /* height: auto !important; */
        /* padding: 50px 30px !important; */
    }

    .option-icon {
        margin: 0 auto 20px;
        display: table;
        width: 100px;
    }

    .option-heading h4 {
        margin-bottom: 13px !important;
        font-size: 24px;
    }

    .hire-talent p {
        margin-bottom: 29px;
    }

    .hire-talent .option-heading p {
        margin-bottom: 0;
    }

    .hire-talent .radio-group-option .form-check input {
        display: none;
    }

    .hire-talent .form-check-input:checked + .form-check-label{
        color: white !important;
    }

    .hire-talent .form-check-input:checked + .form-check-label h3{
        color: white !important;
    }

	.hire-talent .form-check-input:checked + .form-check-label {
		background: green;
		border-color: green;
	}

    .hire-talent .form-check:has(.form-check-input:checked) {
    /* border-color: green !important; */
    /* background: green !important; */
    }

    .member-details {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 39px;
        border: 2px solid #e1e1e1;
        padding: 27px 0px;
        border-radius: 15px;
        align-items: center;
        background-color: #fff;
    }

    .member-details select {
        border: none;
        padding: 0;
    }

   .team-member-details {
    margin-bottom: 0;
}

    .item-member-heading {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 52px;
        margin-bottom: 13px;
    }

    .required-staff .quantity button {
        padding: 0;
        background: transparent;
        font-size: 22px;
        outline: none;
    }

    .required-staff .quantity input::-webkit-outer-spin-button,
    .required-staff .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    }

    .required-staff .quantity input {
        text-align: center;
        border: none;
    }


    .select-job-role select {
        padding-left: 13px;
    }

    .hire-price span {
        color: green;
        font-size: 18px;
    }

    
    .price-approxmite-item{
        padding: 40px 0;
        text-align: end;
        border-radius: 16px;
    }
    
    .price-approxmite-item h2 {
        font-size: 25px;
        font-weight: 500;
        color: #21202e;
        margin-bottom: 18px;
    }
    
    .price-approxmite-item h2 span {
        font-weight: 800;
        color: #000;
    }
    
    .price-approxmite-item p {
        margin-bottom: 0;
    }
    
    .card-item{
        background-position: 100% 0% !important;
        background-size: 45% !important;
        background-repeat: no-repeat !important;
    }
    
    .card-item h3 {
        margin: 0;
    }
    
    .call-to-action-section {
        padding: 58px 70px 97px;
        text-align: end;
        background: linear-gradient(to left, rgb(16 16 46 / 76%), rgb(255 60 0 / 90%));
        border-radius: 21px;
        height: 223px;
    }
    
    .cta-section {
        margin-bottom: 60px;
    }
    
    .card-item img {
        width: 100%;
    }
    
    .call-to-action-section h3 {
        font-size: 34px;
        font-weight: 200;
        color: #fff;
        margin: 0 0 16px;
    }
    
    span.cta-number a {
        font-size: 26px;
        display: block;
        color: #000;
    }
    
    a.cta-btn-1 {
        color: #fff;
        background: #Ff3C00;
        text-transform: capitalize;
        padding: 12px 21px;
        display: inline-block;
        font-size: 18px;
        border-radius: 6px;
    }
    
    span.cta-number {
        display: block;
        margin-bottom: 19px;
    }
    
	.price-approxmite-item {
	    padding: 9px 0 32px;
	    text-align: end;
	    border-radius: 16px;
	}

    .price-approxmite-item h2 {
        font-size: 25px;
        font-weight: 500;
        color: #21202e;
        margin-bottom: 18px;
    }

    .price-approxmite-item h2 span {
        font-weight: 800;
        color: #000;
    }

    .price-approxmite-item p {
        margin-bottom: 0;
    }

    .card-item h3 {
        margin: 0;
    }

    .call-to-action-section {
	    padding: 30px 36px;
	    text-align: end;
	    background: linear-gradient(to left, rgb(16 16 46 / 76%), rgb(255 60 0 / 90%));
	    border-radius: 18px 12px 10px 4px;
	    height: auto;
	    position: relative;
	    outline: 1px solid #e3c1ba;
	    outline-offset: 5px;
	}

    .call-to-action-section::before{
    position: absolute;
    content: "";
    left: 26%;
    top: 22%;
    width: 140px;
    height: 140px;
    background: url(../images/call-icon.png);
    background-size: cover;
    opacity: 0.1;
    }

    .cta-section {
        margin-bottom: 60px;
    }

    .card-item img {
        width: 100%;
    }

    .card-item {
	    position: absolute;
	    left: 18px;
	    width: 26%;
	    bottom: -3px;
	    overflow: hidden;
	}

    .call-to-action-section h3 {
        font-size: 38px;
        font-weight: 200;
        color: #fff;
        margin: 0 0 18px;
    }

    span.cta-number a {
        font-size: 26px;
        display: block;
        color: #000;
    }

    a.cta-btn-1 {
        color: #000000;
        background: #ffffff;
        text-transform: uppercase;
        padding: 12px 19px;
        display: inline-block;
        font-size: 17px;
        border-radius: 1px;
        letter-spacing: 1px;
        outline: 1px solid rgb(255 255 255 / 27%);
        outline-offset: 3px;
    }

    span.cta-number {
        display: block;
        margin-bottom: 19px;
    }

    .form-step .next-step,
    .form-step .next-step:hover,
    .form-step .submit-step{
        background: #Ff3C00;
        border-color: #Ff3C00;
        color: #fff;
    }

    .form-step .prev-step {
        background: #343232;
        border-color: #343232;
    }

    .multistepForm .form-group input:focus,
    .multistepForm .form-check-input:focus{
        box-shadow: inherit !important;
        border-color: #FF3C00;
        transition: all 400ms ease-in-out;
    }

    .option-icon img {
        width: 100%;
    }

    .form-select:focus{
        box-shadow: inherit !important;
    }

	.multistepForm .form-step h2 {
		font-size: 34px;
		margin-bottom: 45px;
	}

    .select2-container{
        z-index: 10000;
        width: 100% !important;
    }
    
.hire-talent .form-check-label {
    height: 100% !important;
    padding: 76px 10px !important;
    font-size: 16px !important;
}

.form-step .next-step i,
.form-step .prev-step i{
    width: 19px;
    text-align: center;
    height: 19px;
    line-height: 19px;
    border-radius: 100px;
    font-size: 13px;
}


.business-form-banner {
    height: 320px !important;
    background-position: top !important;
}

.u-form-section {
    padding: 80px 0 35px;
}

.price-approxmite-item h2 {
    margin-bottom: 21px !important;
}


    @media screen and (max-width: 991px){

        .call-to-action-section h3 {
            font-size: 20px;
            margin: 0 0 13px;
        }
        
        .card-item {
            position: absolute;
            left: 0;
            width: 190px;
            top: 10px;
            bottom: 0;
            overflow: hidden;
        }

        a.cta-btn-1 {
            padding: 8px 12px;
            font-size: 11px;
            letter-spacing: 1px;
        }
        
        .call-to-action-section::before {
            left: 25%;
            top: 22%;
            width: 80px;
            height: 80px;
            opacity: 0.1;
        }
        
        .price-approxmite-item {
            padding: 31px 0 0;
            text-align: center;
        }
        
		.u-form-section {
		    padding: 40px 0 15px;
		}

        .call-to-action-section {
            padding: 50px 20px 44px;
            height: auto;
        }
        
        .item-member-heading {
            display: none;
        }
        
        .select-job-role select {
            padding-left: 0;
        }
        
        .member-details {
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;
            border: 2px solid #e1e1e1;
            padding: 27px 19px;
            border-radius: 15px;
            align-items: center;
            background-color: #fff;
            overflow-y: auto;
            width: 100%;
        }


        
    }

.iti {
    position: relative;
    display: block !important;
}
    
.select-job-role select {
    padding-left: 13px;
    width: 209px;
    padding-right: 22px;
}

.multistepForm .banner-sec{ text-align: center; margin-bottom: 39px;}
.multistepForm .banner-sec h1{font-size: 47px; margin: 0 0 15px 0; padding: 0; font-family: var(--title_font);  font-weight: 600;  text-transform: capitalize;}
.multistepForm .banner-sec h2 {
    font-size: 22px;
    margin: 0 0 45px 0;
    padding: 0;
    font-family: var(--title_font);
    font-weight: 400;
    color: #666;
}
.multistepForm .banner-sec h1 span{color: #ff3c00;}


/*custom popup*/

.custom-thankyou-popup {
    position: fixed; inset: 0; 
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.custom-thankyou-popup .popup-overlay {
    position: absolute; inset: 0; 
    background: rgba(0,0,0,0.6);
}
.custom-thankyou-popup .popup-box {
    position: relative;
    background: #fff;
    padding: 20px;
    max-width: 400px;
    width: 90%;
    border-radius: 8px;
    text-align: center;
    z-index: 10000;
}

.form-step .submit-step:hover {
    background: #000;
    border-color: #000;
}

.box img {
	height: 190px;
	margin-bottom: -30px;
}

.thanku-page-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.7);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  transition: all 500ms ease-in-out;
}

.box {
	text-align: center;
	width: 750px;
	background: #fff;
	position: relative;
	z-index: 11;
	padding-top: 30px;
	padding-bottom: 60px;
	border-radius: 1px;
	outline: 2px dashed #d0d0d0;
	outline-offset: -15px;
}

.box span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #ff3c00;
  width: 100px;
  height: 100px;
  line-height: 100px;
  margin: -40px auto 0;
  border-radius: 100%;
}
.box span img {
  width: 60%;
  filter: brightness(1) invert(6743343);
}
.thanku-page-popup h1 {
  text-transform: capitalize;
  font-size: 60px;
  color: #000;
  font-weight: 400;
  margin-bottom: 10px;
}
.thanku-page-popup p {
  font-size: 22px;
  width: 50%;
  margin: 14px auto;
  text-transform: capitalize;
  margin-bottom: 30px;
  line-height: 1.7;
}

.thanku-page-popup button {
	width: 88%;
	background: green;
	color: #fff;
	font-size: 22px;
	text-transform: uppercase;
	border: none;
	padding: 15px 0;
   cursor: pointer;
}