@import url('https://fonts.googleapis.com/css2?family=Jost: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,500;1,600;1,700;1,800;1,900&family=Oswald:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* variables */

:root {
    --text-color: rgb(27, 27, 27);
    --field-color: rgb(255, 255, 255);
    --primary-color: linear-gradient(360deg, rgb(103, 23, 205) 0%, rgb(40, 113, 250) 100%);
}

body {
    font-family: "Jost";
    width: 100%;
    position: relative;
    height: auto;
    background-color: rgb(255, 255, 255);
}

.start-wrapper {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 70px 0;
}

.start {
    text-align: center;
    flex: 1;
    display: grid;
   
    height: 100%;
}

.start .start-img {
    width: auto;
}

.start-img img {
    width: auto;
}

.start-text {
   
    margin: 0 auto;
    margin-top: 40px;
    position: relative;
}

.start-text::before {
    content: "";
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

.start-text h2 {
    font-size: 40px;
    color: var(--text-color);
    font-weight: bold;
}

.start-text p {
    font-size: 30px;
    color: var(--text-color);
    margin-top: 20px;
}

.start-btn {
    border-radius: 6px;
    background-color: var(--primary-color);
     /*  background-color:rgb(2, 119, 167);*/
    padding: 0 50px;
    height: 55px;
    border: solid 2px transparent;
    font-size: 25px;
    color: rgb(255, 255, 255);
    font-weight: 500;
    margin: 0 auto;
    margin-top: 50px;
    width: max-content;
}

#steps {
    width: 100%;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

header {
    background-color: var(--secondary-color);
    height: 107px;
    width: 100%;
    display: grid;
    padding: 20px;
    align-content: center;
    justify-content: center;
}

header h1 {
    font-size: 35px;
    color: var(--text-color);
    font-weight: bold;
}

.form-inner {
    flex: 1;
    height: 100%;
    display: grid;
    align-items: center;
    padding: 100px;
}

.form-wrapper {
    width: 68%;
    margin: 0 auto;
}

.steps .label-head {
    font-size: 35px;
    color: var(--text-color);
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

/*.steps .label-head::before {
    content: "C";
    display: inline-block;
    border-radius: 50%;
    background-color: rgb(234, 234, 234);
    min-width: 43px;
    height: 43px;
    font-size: 20px;
    color: rgb(193, 193, 193);
    text-transform: uppercase;
    line-height: 43px;
    text-align: center;
    margin-right: 17px;
}*/

#step1 .label-head::before {
    content: "a";
}

#step2 .label-head::before {
    content: "b";
}

#step3 .label-head::before {
    content: "c";
}

#step4 .label-head::before {
    content: "d";
}

#step5 .label-head::before {
    content: "e";
}

.select-field {
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 40px;
}

.select-field select {
    appearance: none;
    border: 0;
   /* border-bottom: solid 3px var(--primary-color);*/
    border-bottom:  solid 3px rgb(14, 145, 223);
    width: 100%;
    height: 60px;
    font-size: 29px;
    color: rgb(206, 206, 206);
    cursor: pointer;
    transition: 0.4s;
}

.select-field select+span::before {
    content: "\f063";
    font-family: "Font Awesome 5 free";
    font-weight: 900;
    font-size: 18px;
    color: var(--primary-color);
    position: absolute;
    right: 7px;
    top: 20px;
    pointer-events: none;
}

.select-field select:focus {
    outline: none;
    border-color: var(--secondary-color);
}

.select-field select:focus~span::before {
    color: var(--secondary-color);
}

.confirm {
    border-radius: 6px;
    border: solid 2px transparent;
    background-color: rgb(252, 95, 73);
    width: 110px;
    margin-top: 10px;
    height: 65px;
    font-size: 20px;
    color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}

.confirm::after {
    /*content: "?";*/
    display: inline-block;
    margin-left: 7px;
    width: 17px;
}

.confirm.active::after {
    content: "";
    border-left: solid 3px var(--secondary-color);
    border-bottom: solid 3px var(--secondary-color);
    width: 17px;
    height: 10px;
    transform: rotate(-45deg);
    opacity: 0;
    position: relative;
    top: 3px;
}

#step2,
#step3 {
    width: 52%;
    margin: 0 auto;
}

.field-wrap {
    width: 100%;
    margin-left: auto;
}

/*.radio-field {
    width: 100%;
    height: 70px;
    position: relative;
    margin-bottom: 15px;
    display: grid;
    align-items: center;
    padding: 15px 20px 15px 20px;
    opacity: 0;
     transform: translateY(20px);
       transition: opacity 0.5s ease, transform 0.5s ease;
}


.radio-field {
    opacity: 1 !important;
    visibility: visible !important;
    background-color: yellow;
}*/

.radio-field {
    width: 100%;
    height: 50px;
    position: relative;
    margin-bottom: 15px;
    display: flex; /* Use flex for alignment */
    align-items: center;
    padding: 15px 20px; /* Simplified padding */
     /*opacity: 0; Start invisible */
    transform: translateY(20px); /* Start 20px below */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transition */
}
.radio-field input {
    appearance: none;
    border: solid 1px rgb(255, 221, 216);
    border-radius: 6px;
    background-color: rgb(255, 249, 248);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.4s;
    cursor: pointer;
   /* overflow: hidden;*/
}

.radio-field label {
    color: var(--primary-color);
    font-size: 25px;
    position: relative;
    z-index: 10;
    pointer-events: none;
    transition: 0.4s;
}

.radio-field label::before {
  content: attr(data-content);
    border: solid 1px rgb(255, 221, 216);
    background-color: rgb(255, 255, 255);
    display: inline-block;
    color: var(--primary-color);
    text-align: center;
    line-height: 43px;
    width: 43px;
    height: 43px;
    margin-right: 25px;
    transition: 0.4s;
    text-transform: uppercase;
}

.radio-field .op1::before {
    content: "a";
}

.radio-field .op2::before {
    content: "b";
}

.radio-field .op3::before {
    content: "c";
}

.radio-field .op4::before {
    content: "d";
}

.radio-field .op5::before {
    content: "e";
}

.radio-field .op6::before {
    content: "f";
}

.radio-field input::before {
    content: "";
    width: 0;
    height: 100%;
    background-color: var(--primary-color);
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.4s;
}

.radio-field input:checked {
    border-color: var(--primary-color);
}

.radio-field input:checked::before {
    width: 100%;
}

.radio-field input:checked~label {
    color: white;
}

/* step 4 */

.step-width {
    width: 85%;
}

.pricing-table {
    margin-top: 40px;
}

.table-single {
    border-radius: 6px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 3px 73px 0px rgba(0, 0, 0, 0.06);
    width: 100%;
    min-height: 430px;
    text-align: center;
    cursor: pointer;
    border: solid 2px transparent;
    transition: 0.5s;
    overflow: hidden;
    opacity: 0;
}

.table-single .table-heading {
    background-color: rgb(0, 191, 111);
    height: 110px;
    width: 100%;
    position: relative;
    overflow: hidden;
    text-align: center;
    position: relative;
    z-index: 2;
}

.table-single .table-heading h3 {
    font-size: 25px;
    color: rgb(255, 255, 255);
    line-height: 70px;
    position: relative;
    z-index: 10;
}

.table-single .table-heading::before {
    content: "";
    width: 102%;
    height: 100%;
    position: absolute;
    left: -2px;
    top: 0px;
    background-color: rgb(255, 255, 255);
    clip-path: ellipse(50% 40% at 50% 100%);
    pointer-events: none;
    z-index: 1;
}

.table-single .table-heading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: var(--primary-color);
    z-index: 0;
    transition: 0.4s;
}

.table-2 .table-heading {
    background-color: rgb(5, 70, 126) !important;
}

.table-3 .table-heading {
    background-color: rgb(83, 34, 91) !important;
}

.table-price {
    font-size: 20px;
    color: rgb(51, 51, 51);
    font-weight: bold;
    margin-top: 20px;
}

.table-single p {
    font-size: 25px;
    font-weight: 500;
    color: rgb(60, 60, 60);
    width: 90%;
    margin: 30px auto;
}

.active {
    border-color: var(--primary-color);
}

.active .table-heading::after {
    height: 100%;
}

.step5img {
    width: 100%;
}

#step5 {
    margin-left: 100px;
}

.step-width-2 {
    width: 90%;
}

footer {
    background-color: var(--secondary-color);
    height: 68px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.next-prev {
    display: flex;
    width: auto;
    height: 68px;
    justify-content: space-between;
    position: absolute;
    left: 0;
    flex-wrap: wrap;
    bottom: 0;
}

.next-prev button {
    background-color: var(--primary-color);
    padding: 0 80px;
    height: 100%;
    width: max-content;
    font-size: 19px;
    color: rgb(255, 255, 255);
    font-weight: bold;
    border: 0;
    margin-right: 1px;
}

.next-prev button i {
    position: relative;
    top: 2px;
    margin: 0 10px;
}

.step-bar {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: end;
    margin-right: 180px;
}

.fa-arrow-right::before {
  content: "\f061";
}

.bar-inner {
    background-color: rgb(255, 205, 197);
    width: 50%;
    height: 16px;
    border-radius: 50px;
}

.bar-inner .fill {
    border-radius: inherit;
    height: 100%;
    background-color: var(--primary-color);
    transition: 0.4s;
}

.complete-rate {
    font-size: 19px;
    color: rgb(36, 36, 36);
    font-weight: bold;
    margin-left: 50px;
}

.thankyou .start-btn {
    font-weight: normal;
    text-transform: uppercase;
}

.thankyou .start-text p {
    color: rgb(84, 84, 84);
    width: 90%;
    margin: 0 auto;
}

#error {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 20;
}

.invalid {
    border: solid 2px #ff4444 !important;
    position: relative;
}

/*ravali added*/

/* Button container styling */
.button-container {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* Label styling */
.label-head {
    font-size: 18px; /* Adjust font size as needed */
    font-weight: bold;
    margin-bottom: 15px;
}

/* Radio button and dropdown styling */
.radio-options label,
.field-wrap label {
    display: block;
  /*  margin-bottom: 10px;*/
    font-size: 16px;
}

.revealfield select-field select,
.revealfield input[type="text"] {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Form styling */
.form {
    position: relative;
    margin-top: 40px;
    flex: 1;
}

/* Radio button container */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.col-md-6 {
    flex: 0 0 calc(50% - 10px); /* 2 columns with gap */
    max-width: calc(50% - 10px);
}

/* Radio button styling
.form-radio {
    width: 100%;
    font-size: 24px;
    font-family: "Jost", sans-serif;
    color: rgb(47, 49, 70);
    margin: 7px 0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    font-weight: 600;
    transition: 0.5s ease;
    cursor: pointer;
   /*  opacity: 0 *
} */

.form-radio {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-family: "Jost", sans-serif;
    color: rgb(47, 49, 70);
    margin: 7px 0;
    cursor: pointer;
}

.form-radio label {
    font-size: 24px; /* Adjust font size as needed */
    color: rgb(47, 49, 70); /* Ensure text color is visible */
    opacity: 1; /* Ensure opacity is set to 1 */
    margin-left: 10px; /* Add spacing between radio button and label */
    transition: 0.5s ease; 
}

.form-radio input {
    -webkit-appearance: none;
    border: solid 2px rgb(47, 49, 70);
    border-radius: 50%;
    min-width: 30px;
    height: 30px;
    margin-right: 15px;
    background-color: rgb(255, 255, 255);
    transition: 0.5s ease;
    position: relative;
    cursor: pointer;
}

.form-radio input:checked {
    background: linear-gradient(#fff 0 0) padding-box, linear-gradient(360deg, rgb(103, 23, 205) 0%, rgb(40, 113, 250) 100%) border-box !important;
    border: 2px solid transparent !important;
}


.form-radio input:checked~label {
   /* background: var(--primary-color);  Gradient or solid color */
     background:rgb(49, 137, 231);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.form-radio input:checked::after {
    content: "\f00c";
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: rgb(255, 255, 255);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 15px;
    line-height: 30px;
    background-image: linear-gradient(45deg, rgb(103, 23, 205) 0%, rgb(40, 113, 250) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
 
}

/* Label styling */
.label-head {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: rgb(47, 49, 70);
}
.label-headd {
    font-size: 44px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #1E3B73;
}

.active-field label {
    background: var(--primary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.delay-100ms {
   transition-delay: 100ms;
}

.delay-200ms {
    transition-delay: 200ms;
}

.delay-300ms {
    transition-delay: 300ms;
}

.delay-400ms {
    transition-delay: 400ms;
}

/* Container for the form */
.steps.form-wrapper {
    display: flex;
    flex-direction: column;
   /* height: 100vh; *//* Full height of the viewport */
    padding: 10px;
    box-sizing: border-box;
}

/* Container for the question and options */
fieldset {
    flex: 1; /* Take up remaining space */
    display: flex;
    flex-direction: column;
}

/* Container for the options */
.options-container {
    flex: 1; /* Take up remaining space */
   /* overflow-y: auto;*/
     /* Add scroll if content overflows */
   /* margin-bottom: 20px;*/ /* Space between options and buttons */
}

/* Container for the buttons */
.button-container {
    display: flex;
    gap: 10px;
    /*justify-content: flex-end;  Align buttons to the right */
    padding: 10px;
    background-color: #f9f9f9; /* Light background for footer */
   /* border-top: 1px solid #ddd;  Separator line */
    position: sticky;
    bottom: 0; /* Stick to the bottom */
}

.step-counter {
    margin-left: 20px; /* Add spacing between buttons and step counter */
    font-size: 14px;
    color: #666; /* Adjust color as needed */
    align-self: center; /* Center vertically */
}

.thank-you-container {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.thank-you-heading {
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 15px;
}

.thank-you-message {
    font-size: 16px;
    color: #34495e;
    margin-bottom: 10px;
}

.thank-you-wishes {
    font-size: 14px;
    color: #7f8c8d;
    font-style: italic;
}