:root {

    --primary: #333;

    --secondary: #333;

    --errorColor: red;

    --stepNumber: 6;

    --containerWidth: 600px;

    --bgColor: #333;

    --inputBorderColor: lightgray;

}



body {

    background: #F3F3F3;

    font-family: 'Lato', sans-serif;

}



.step-form .container {

    max-width: 100%;

}

h1{

    font-size: 55px;

    font-weight: 700;

}

h2{

    font-size: 36px;

    font-weight: 700;

}

h3{

    font-size: 20px;

    font-weight: 400;

}

p{

    font-size: 18px;

    font-weight: 400;

}

.page.active,

.page.long-page,

.page.long-page2{

    display: none;

}

.page{

    display: block;

}





/* <!-- header Style Start --> */

.header {

    background: #B6502E;

    padding: 31px 20px;

}

.header .logo {

    max-width: 192px;

}

.header .progress-bar {

    display: flex;

}

.header .progress-bar {

    flex-direction:row;

    justify-content: space-evenly;

    overflow: hidden;

    color: #fff;

    text-align: center;

    white-space: nowrap;

    background-color: transparent;

    transition: width .6s ease;

}

.header .progress-bar .step .bullet {

    height: 30px;

    width: 30px;

    border: none;

    display: inline-block;

    border-radius: 50%;

    position: relative;

    transition: 0.2s;

    background-color: #FEFEFE;

    font-size: 14.118px;

    font-weight: 700;

    line-height: 2.2;

    color: #D14C00;

}

.header .progress-bar .step .bullet.active {

    border-color: #FEFEFE;

    background: #FEFEFE;

}

.header .progress-bar .step p.active {

    color: #FEFEFE !important;

    transition: 0.2s linear;

}

.header .progress-bar .step p {

    color:  #FEFEFE;

    font-size: 12.878px;

    font-weight: 900;

    line-height: 1.3;

    margin-bottom: 8px;

}

.header .progress-bar .step .bullet:before, .progress-bar .step .bullet:after {

    position: absolute;

    content: "";

    bottom: 8px;

    right: -77px;

    height: 6.93px;

    width: 56px;

    background: #FEFEFE;

    border-radius: 46.2px;

}

.header .progress-bar .step .bullet.active:after {

    background: #FEFEFE;

    transform: scaleX(0);

    transform-origin: left;

    animation: animate 0.3s linear forwards;

}

.header .progress-bar .step .bullet span {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

}

.header .progress-bar .step .bullet.active span {

    display: none;

}



@keyframes animate {

    100% {

        transform: scaleX(1);

    }

}

.header .progress-bar .step:last-child .bullet:before,

.progress-bar .step:last-child .bullet:after {

    display: none;

}

.header .progress-bar .step .check {

    position: absolute;

    left: 50%;

    top: 15px;

    font-size: 15px;

    transform: translate(-50%, -50%);

    display: none;

}

.header .progress-bar .step .check.active {

    display: block;

    color: #B6502E;

}



.header .form-header-button a {

    border-radius: 8.375px;

    background:  #FFF;

    box-shadow: 0px 0.837px 1.675px 0px rgba(15, 23, 42, 0.06);

    color: #B6502E;

    font-size: 21px;

    font-weight: 400;

    line-height: 1.3; 

    letter-spacing: -0.24px;

    padding: 9px 13px;

    text-decoration: none;

}

.header .form-header-button a img {

    width: 22px;

}

.header .step {

    position: relative;

}



/* <!-- header Style End --> */

/* <!-- Form Banner Style Start --> */

.form-banner{

    background-image: url(../images/form-banner.jpg);

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    padding: 131px 20px 198px;

}

.form-banner .form-banner-heading h2 {

    color: #FFF;

    text-align: center;

    font-weight: 700;

    line-height: 1.4;

    max-width: 1100px;

    margin: auto;

}

/* <!-- Form Banner Style End --> */

/* <!-- Month to month Style Start --> */



.month-to-month {

    margin: -80px 0px 60px;

}

.month-to-month .month-box {

    border-radius: 10px;

    background: var(--White, #FFF);

    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);

    padding: 30px;

    display: flex;

    height: 100%;

}

.month-to-month .boxes{

    max-width: 1140px;

    margin: auto;

}

.month-to-month .month-description {

    padding-left: 17px;

}

.month-to-month .month-description h3 {

    color:  #232233;

    font-weight: 700;

    line-height: 1.4;

    text-transform: uppercase;

    margin-bottom: 15px;

}

.month-to-month .month-description p {

    color:  #475569;

    font-size: 16px;

    font-weight: 900;

    line-height: 24px;

    margin: 0;

}

/* <!-- Month to month Style End --> */

/* <!-- Month to month Style Start --> */

.piolat .become-piolat-heading {

    margin-bottom: 46px;

}

.piolat .become-piolat-heading h2 {

    background: linear-gradient(90deg, #FF7000 -7.75%, #B6502E 63.83%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    line-height: 1.4;

    text-align: center;

}

.piolat .become-piolat-heading h3 {

    color: #000;

    text-align: center;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.3;

}

/* <!-- Month to month Style End --> */

/* <!-- form-faq Style Start --> */

.form-faq {

    padding: 40px 0px 50px;

    border-top: 1px solid #D9DBE9;

}

.form-faq .faq-accordion {

    max-width: 1200px;

    margin: auto;

}

.form-faq .faq-heading h2{

    background: linear-gradient(90deg, #FF7000 -7.75%, #B6502E 63.83%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    text-align: center;

    line-height: 1.3;

    margin-bottom: 70px;

}

.form-faq .accordion-item {

    background: #fff;

    border: 1px solid rgba(0,0,0,.125);

    border-radius: 10px;

    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);

    margin-bottom: 11px;

    overflow: hidden;

}

.form-faq .accordion-button {

    padding: 30px;

    color:  #0F172A;

    font-size: 18px;

    font-weight: 600;

    line-height: 1.3;

    letter-spacing: -0.18px;

    box-shadow: none;

}

.form-faq .accordion-body {

    padding: 30px;

    padding-top: 0px;

    color: #484848;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.3;

    letter-spacing: -0.16px;

}



.form-faq .accordion-button:not(.collapsed) {

    color: #0F172A; 

    background-color: transparent;

   box-shadow: none;

}

.form-faq .accordion-button:not(.collapsed)::after{

    transform: rotate(0deg);

    filter: brightness(0);

}

.form-faq .faq-modal {

    border-radius: 10px;

    background: var(--White, #FFF);

    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);

    border: none;

    width: 100%;

    color: #B6502E;

    font-size: 20px;

    font-weight: 400;

    line-height: 1.4;

    letter-spacing: -0.2px;

    position: relative;

    padding: 30px;

    text-align: left;

}

.form-faq .faq-modal .fa {

    position: absolute;

    right: 25px;

    top: 35px;

}

/* .form-faq .faq-modal:hover,:active {

    background-color: var(--White, #FFF) !important;

    color: #B6502E !important;

    border: none;

}

.form-faq .faq-modal:focus {

    box-shadow: none;

    background-color: var(--White, #FFF) !important;

    color: #B6502E !important;

    border: none;

} */



/* <!-- Faq Style End --> */

.thank-you {

    max-width: 670px;

    margin: auto;

    padding: 116px 0px 60px;

}

.thank-you .thank-you-heading {

    padding-bottom: 22px;

    border-bottom: 1px solid #D9DBE9;

}

.thank-you-heading h2 {

    background: linear-gradient(90deg, #FF7000 -7.75%, #B6502E 63.83%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    margin: 12px 0px 20px;

}

.thank-you-heading p {

    color: rgba(0, 0, 0, 0.80);

    text-align: center;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.3;

    margin: 0;

}

.thank-you .final-checkout-box .audi-heading {

    padding-left: 13px;

}

.thank-you .final-checkout-box .audi-a4 .audi-heading h3 {

    color: rgba(0, 0, 0, 0.90);

    font-size: 19px;

    font-weight: 700;

    line-height: 1.2; 

    margin: 0;

}

.thank-you .final-checkout-box .audi-a4 .audi-heading p {

    color: #000;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.1;

    margin: 0;

}

.thank-you .final-checkout-box .Transaction p {

    color: rgba(0, 0, 0, 0.70);

    font-size: 18px;

    font-weight: 600;

    line-height: 1.2;

    margin: 0;

}

.thank-you .final-checkout-box .Transaction  {

    margin-bottom: 10px;

}

.thank-you .final-checkout-box .taxes p {

    color: rgba(0, 0, 0, 0.80);

    font-size: 19px;

    font-weight: 600;

    line-height: 1.2;

    margin: 0;

}

.thank-you .final-checkout-box .payment {

    padding-bottom: 16px;

}

.thank-you .final-checkout-box .payment .payment-heading h4 {

    color: #000;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.3; 

    margin: 0;

    

}

.thank-you .final-checkout-box .payment .payment-price  p {

    color: #000;

    font-size: 20px;

    font-weight: 500;

    line-height: 1.3; 

    margin: 0;

}

.thank-you .final-checkout-box {

    border-radius: 20px;

    background: #FFF;

    padding: 25px 35px;

    padding-bottom: 8px;

    margin: 22px 0px;

}

.thank-you .good-by {

    padding-top: 21px;

    border-top: 1px solid #D9DBE9;

}

.thank-you .good-by h2 {

    background: linear-gradient(90deg, #FF7000 -7.75%, #B6502E 63.83%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    font-size: 30px;

    text-align: center;

    margin-bottom: 31px;

}

.thank-you .list {

    max-width: 515px;

    margin: auto;

    flex-wrap: wrap;

}

.thank-you .list .thankyou-list {

    margin-bottom: 8px;

    padding: 5px;

}

.thank-you .list .thankyou-list p {

    color: #000;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.3;

    margin: 0;

    padding-left: 8px;

}

/* <!-- Form Footer Style Start --> */

.form-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 25px 20px 0;

    max-width: 1100px;

    margin: auto;

    border-top: 1px solid #D9DBE9;

    margin-top: 40px;

}

.form-footer p {

    color: rgba(0, 0, 0, 0.80);

    font-size: 16px;

    font-weight: 600;

    line-height: 1.3;

    text-align: center;

    padding: 10px;

}

/* <!-- Form Footer Style End --> */





/* <!-- Step 1 Style Start --> */

.container .form-outer {

    width: 100%;

    overflow: hidden;

}



/* .form-outer form .page .field {

    width: 100%;

    margin-bottom: 30px;

} */

form .page .field .label {

    color:  #170F49;

    font-family: Lato;

    font-size: 17.774px;

    font-weight: 700;

    line-height: 1.4; 

    margin-bottom: 17px;

}

form .page .field input, .form-select {

    border-radius: 4.611px;

    border: 0.987px solid var(--neutral-300, #EFF0F6);

    box-shadow: 0px 1.975px 5.925px 0px rgba(19, 18, 66, 0.07);

    padding: 23px 20px;

    width: 100%;

    color:  #6F6C90;

    font-size: 17.774px;

    font-weight: 400;

    line-height: 1.3; 

    text-align: left;

}

div.checkout-form .field input,

div.checkout-form .field input::placeholder {

    color: #292929 !important;

}

form .page .field input, .drop-down:hover {

    border: 0.987px solid var(--neutral-300, #EFF0F6);

    background: var(--neutral-100, #FFF) !important;

    color:  #6F6C90 !important;

}

form .page .field button {

    border: none;

    border-radius: 9.045px;

    background: #B6502E;

    box-shadow: 0px 2.434px 9.735px 0px rgba(74, 58, 255, 0.18);

    color:  #FFF;

    text-align: center;

    font-size: 17.616px;

    font-weight: 700;

    line-height: 1.3;

    padding: 15px 27px;

}

.step-one {

    max-width: 600px;

    margin: auto;

}

.step-one .next i,.step-two i {

    font-size: 15px;

    padding-left: 10px;

}

.back i {

    font-size: 15px;

    padding-right: 10px;

}

/* <!-- Step 1 Style End --> */

/* <!-- Step 2-3 Style Start --> */

.step-two {

    padding: 36px 0px;

}

.vehicle-information{

    padding: 80px 0px 36px;

    border-bottom: 1px solid;

    border-color: #D9DBE9;

}

.vehicle-information .vehicle-information-heading h2 {

    background: linear-gradient(90deg, #FF7000 -7.75%, #B6502E 63.83%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    line-height: 1.4;

    margin-top: 10px;

}

.step-two {

    max-width: 680px;

    margin: auto;

}

.step-two .back,.step-three .back {

    color: #5D5D5D !important;

    line-height: 14.736px;

    background: transparent !important;

    box-shadow: none !important;

    padding: 14px 0px !important;

}

.step-two .dropdown-toggle::after {

    right: 18px;

    top: 33px;

    position: absolute;

    vertical-align: 0.255em;

    content: "";

    border-top: 0.3em solid;

    border-right: 0.3em solid transparent;

    border-bottom: 0;

    border-left: 0.3em solid transparent;

}



.step-three {

    max-width: 807px;

    margin: auto;

    padding-top: 23px;

}

.step-three .check-box {

    margin-bottom: 24px;

}

.form-check-inline {

    display: inline-flex;

    margin-right: 24px;

    align-items: center;

}

label.form-check-label {

    color: #000;

    font-size: 18px;

    font-weight: 500;

    line-height: 1.4;

    padding-left: 6px;

}

.check-box p {

    color: #000;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.4;

    margin-bottom: 20px;

}

.mileage  {

    color: rgba(0, 0, 0, 0.70);

    font-size: 16px;

    font-weight: 700;

    line-height: 1.4;

    margin-bottom: 24px;

}

.form-check-input:checked {

    background-color: #000000;

    border-color: #000000;

} 

.form-check-input {

    border: 1px solid #000000;

    width: 22px;

    height: 22px;

    box-shadow: none !important;

}

.process-check-box .form-check-input {

    border: 2px solid #000000;

    width: 20px;

    height: 20px;

    box-shadow: none !important;

}

.field p {

    color: rgba(0, 0, 0, 0.70);

    font-size: 16px;

    font-weight: 300;

    line-height: 1.3;

    margin-top: 14px;

}

.field.vin-no p {

    color: rgba(0, 0, 0, 0.70);

    font-weight: 300;

}

.process-check-box label.form-check-label {

    color: #000;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.4;

    padding-left: 15px;

}

.process-check-box label.form-check-label span {

    color: #CC4B00;

}

.process-check-box {

    padding-bottom: 30px;

    border-bottom: 1px solid #D9DBE9;

}

.form-check {

    display: inline-flex;

    padding-left: 1.5em;

    align-items: center;

}

/* <!-- Step 2-3 Style End --> */





/* <!-- Step 4 Style Start --> */



.form-banner-two{

    background-image: url(../images/form-banner.jpg);

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    padding: 123px 0px 154px;

}

.form-banner-two .form-banner-two-heading h2{

    color: #FFF;

    text-align: center;

    font-size: 40px;

    font-weight: 800;

    line-height: 1.4; 

}

.step-four {

    max-width: 560px;

    margin: auto;

    margin-top: -100px;

    background: white;

    border-radius: 20px;

    padding: 25px;

}

.step-four .field button.prev-1.prev.arrow i {

    font-size: 15px;

}

.step-four .audi-heading{

    padding-left: 13px;

}

.step-four .audi-heading h3 {

    color: rgba(0, 0, 0, 0.90);

    font-size: 19px;

    font-weight: 700;

    line-height: 1;

    margin: 0px;

}

.step-four .audi-heading p {

    color: #000;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.2; 

    margin: 0px;

}

.step-four .Transaction p {

    color: rgba(0, 0, 0, 0.70);

    font-size: 18px;

    font-weight: 600;

    line-height: 1.2;

}

.step-four .taxes.d-flex p {

    color: rgba(0, 0, 0, 0.80);

    font-size: 19px;

    font-weight: 700;

    line-height: 1.2;

}

.step-four .payment.d-flex {

    margin-bottom: 17px;

}

.step-four .payment-heading h4 {

    color: #000;

    font-size: 16px;

    font-weight: 500;

    line-height: 1;

}

.step-four .payment-heading p {

    color: rgba(0, 0, 0, 0.70);

    font-size: 13px;

    font-weight: 400;

    line-height: 1.2;

    margin: 0;

}

.step-four .payment-price p {

    color: #000;

    font-size: 20px;

    font-weight: 500;

    line-height: 1.2;

    margin: 0px;

}

.step-four .Sample a {

    color: #262626;

    font-size: 16px;

    font-weight: 700;

    line-height: 14.736px;

    text-decoration-line: underline;

}



.step-four .field button.prev-1.prev.arrow {

    border-radius: 8.215px !important;

    background: #5D5D5D !important;

    padding: 14px 18px;

}

.step-four .checkout .personalized {

    border-radius: 8.215px !important;

    background: #6C6765 !important;

    font-size: 16px !important;

    padding: 15px !important;

    border: none;

    box-shadow: 0px 2.434px 9.735px 0px rgba(74, 58, 255, 0.18);

    color: #FFF;

    text-align: center;

    font-weight: 700;

    line-height: 1.3;

    display: inline-block;

    text-decoration: none;

}

.step-four .field button.next-3.next.proceed {

    border-radius: 8.215px !important;

    background: #367B39 !important;

    box-shadow: 0px 2.21px 8.841px 0px rgba(74, 58, 255, 0.18) !important;

    font-size: 16px !important;

}



.repair-cost-two {

    padding-top: 87px;

    max-width: 1090px;

    margin: auto;

}

.repair-cost-two .item-box.text-center {

    margin-bottom: 64px;

}

.repair-cost-two .repair-heading h2{

    background: linear-gradient(90deg, #FF7000 -7.75%, #B6502E 63.83%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    text-align: center;

    font-weight: 700;

    line-height: 1.4;

}

.repair-cost-two .repair-heading{

    padding-bottom: 58px;

}

.repair-cost-two .item-box h2{

    color: #000;

    font-size: 21.231px;

    font-weight: 700;

    line-height: 1.3; 

    text-transform: uppercase;

    margin: 5px 0px;

}

.repair-cost-two .item-box h3{

    color: #CD1800;

    font-weight: 600;

    line-height: 1.3;

    margin: 0px;

}



.your-vechile-two{

    padding-top: 50px;

    border-top: solid 1px #D9DBE9;

}

.your-vechile-two .vechile-heading{

    margin-bottom: 86px;

}



.your-vechile-two .vechile-heading h2 {

    background: linear-gradient(90deg, #FF7000 -7.75%, #B6502E 63.83%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    font-weight: 700;

    line-height: 1.3;

    text-align: center;

}

.your-vechile-two .vechile-heading p {

    color:  #262626;

    text-align: center;

    font-size: 20px;

    font-weight: 400;

    line-height: 1.2; 

}

.your-vechile-two .vechile-tabs .nav-pills .nav-link {

    font-size: 24px;

    font-weight: 900;

    padding-right: 35px;

}

.your-vechile-two .vechile-tabs {

    /* MAX-WIDTH: 1075PX;

    MARGIN: auto; */

    padding-bottom: 40px;

}

.your-vechile-two .vechile-tabs .tab-content>.tab-pane .container {

    padding: 0 20px;

    max-width: 1060px;

}



.your-vechile-two .tab-discribtion-one h2{

    background: linear-gradient(90deg, #FF7000 -7.75%, #B6502E 63.83%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    line-height: 1.3;

}

.your-vechile-two .vechile-tabs .nav-pills .nav-link.active,

.your-vechile-two .vechile-tabs .nav-pills .show>.nav-link {

    color: inherit;

    background: none;

}

.your-vechile-two .vechile-tabs .nav-pills span {

    padding: 10px;

    border: 1px solid;

    border-radius: 100%;

    width: 22px;

    height: 22px;

    position: relative;

    display: inline-block;

    top: 3px;

    right: 5px;

}

.your-vechile-two .vechile-tabs .nav-pills span .fa {

    position: absolute;

    z-index: 1;

    left: 4px;

    top: 4px;

    z-index: 222;

    background: transparent;

    width: 12px;

    height: 12px;

    opacity: 0;

    border-radius: 100%;

}

.your-vechile-two .vechile-tabs .nav-pills span .fa:before {

    color: transparent;

}

.your-vechile-two .vechile-tabs .nav-pills .nav-link.active span .fa{

    opacity: 1;

}

.your-vechile-two .vechile-tabs .nav-pills #pills-0-100-tab {

    background: linear-gradient(180deg, #DF6214 0%, #B6502E 100%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.your-vechile-two .tab-discribtion-one h3{

    color: #343A40;

    font-size: 28px;

    font-weight: 600;

    line-height: 1.3;

}

.your-vechile-two .tab-list {

    margin-bottom: 17px;

}

.your-vechile-two .tab-list p{

    color: #000;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.2; 

    margin: 0;

    margin-left: 10px;

}

.your-vechile-two .tab-link p{

    color: #000;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.2;

    margin: 0px 0px 12px 0px;

}

.your-vechile-two .tab-link a{

    color: #343A40;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.2;

    margin: 0px 0px 12px 0px;

}



.testimonial {

    padding-bottom: 40px;

    border-top: 1px solid #D9DBE9;

    padding-top: 40px;

    max-width: 1200px;

    margin: auto;

}

.testimonial .testimonial-heading h2{

    background: linear-gradient(90deg, #FF7000 -7.75%, #B6502E 63.83%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    text-align: center;

    line-height: 1.3;

    margin-bottom: 70px;

}

.testimonial .testimonial-box {

    border-radius: 24px;

    background: var(--White, #FEFEFE);

    padding: 40px;

}

.testimonial .testimonial-box-heading p {

    color: #262626;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.6;

    margin-bottom: 40px;

}

.testimonial .testimonial-box-img p {

    color: #262626;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.3;

    padding-left: 16px;

}

/* <!-- Step 4 Style End --> */

/* <!-- Step 5 Style End --> */

.step-five {

    max-width: 873px;

    margin: auto;

}

.purchase .purchase-heading h2 {

    background: linear-gradient(90deg, #FF7000 -7.75%, #B6502E 63.83%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    line-height: 1.4;

    margin-top: 10px;

}

.purchase .purchase-heading p {

    color: rgba(0, 0, 0, 0.80);

    text-align: center;

    font-size: 20px;

    font-weight: 400;

    line-height: 1.3;

}

.purchase-heading {

    padding: 80px 0px 68px;

} 

.final-checkout-box .audi-heading {

    padding-left: 13px;

}

.final-checkout-box .audi-a4 .audi-heading h3 {

    color: rgba(0, 0, 0, 0.90);

    font-size: 19px;

    font-weight: 700;

    line-height: 1.2; 

    margin: 0;

}

.final-checkout-box .audi-a4 .audi-heading p {

    color: #000;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.1;

    margin: 0;

}

.final-checkout-box .Transaction p {

    color: rgba(0, 0, 0, 0.70);

    font-size: 18px;

    font-weight: 600;

    line-height: 1.2;

    margin: 0;

}

.final-checkout-box .Transaction  {

    margin-bottom: 10px;

}

.final-checkout-box .taxes p {

    color: rgba(0, 0, 0, 0.80);

    font-size: 19px;

    font-weight: 600;

    line-height: 1.2;

    margin: 0;

}

.final-checkout-box .payment {

    padding-bottom: 16px;

}

.final-checkout-box .payment .payment-heading h4 {

    color: #000;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.3; 

    margin: 0;

    

}

.final-checkout-box .payment .payment-price  p {

    color: #000;

    font-size: 20px;

    font-weight: 500;

    line-height: 1.3; 

    margin: 0;

}

.final-checkout-box {

    border-radius: 20px;

    background: #FFF;

    padding: 25px 35px;

    padding-bottom: 8px;

    margin: 0px 30px;

}

.coverage .coverage-list{

    float: left;

    margin-bottom: 10px;

    margin-right: 20px;

}

.coverage p {

    color: rgba(0, 0, 0, 0.80);

    font-size: 19px;

    font-weight: 700;

    line-height: 1.4;

    margin-bottom: 17px;

}

.coverage .coverage-list p {

    color: #000;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.3;

    margin: 0;

    padding-left: 8px;

}

.checkout-form .field .label {

    color: #000 !important;

    font-size: 16px !important;

}

.field p {

    color: rgba(0, 0, 0, 0.70);

    font-size: 16px;

    font-weight: 400;

    line-height: 1.3;

}

.field .form-check-input[type=checkbox] {

    max-width: 18px!important;

    box-shadow: none !important;

    height: 18px !important;

    border: 1px solid #000 !important;

    padding: 0 !important;

}

.field .form-check-input:checked[type=checkbox] {

    background: #000 !important;

}

.page .field button.submit {

    border-radius: 8.215px;

    background: #367B39;

    box-shadow: 0px 2.21px 8.841px 0px rgba(74, 58, 255, 0.18);

    color: #FFF;

    text-align: center;

    font-size: 16px;

    font-weight: 800;

    line-height: 1.3;

    max-width: 474px;

    width: 100%;

}

.step-five .field button.prev.arrow {

    border-radius: 8.215px !important;

    background: #5D5D5D !important;

    padding: 15px 18px;

}



/* <!-- Step 5 Style End --> */



























/* Modaal Style Start */

.modal-dialog {

    max-width: 617px;

}

.modal-header {

    border: none;

}

.modal-body {

    padding: 0px 44px 48px 44px;

}

.modal-content {

    border-radius: 10px;

    background: var(--White, #FEFEFE);

    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.05);

}

.modal-body h2 {

    background: linear-gradient(90deg, #FF7000 -7.75%, #B6502E 63.83%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    text-align: center;

    margin: 0;

}

.modal-body p {

    color: #000;

    font-size: 20px;

    font-weight: 400;

    line-height: 1.3;

    letter-spacing: -0.2px;

    text-align: center;

    margin: 35px 0px;

}

.modal-body a {

    border-radius: 8.375px;

    background: #B6502E;

    box-shadow: 0px 0.837px 1.675px 0px rgba(15, 23, 42, 0.06);

    color: var(--generic-white, #FFF);

    font-size: 24px;

    font-weight: 400;

    line-height: 1.3; 

    letter-spacing: -0.24px;

    padding: 9px 13px;

    text-decoration: none;

}

/* Modaal Style End */



.field {

    margin-bottom: 20px;

}



.container .form-outer form {

    display: flex;

    width: calc(100% * var(--stepNumber));

}

.form-outer form .page {

    width: calc(100% / var(--stepNumber));

    transition: margin-left 0.3s ease-in-out;

}

.form-outer form .page .title {

    text-align: left;

    font-size: 25px;

    font-weight: 500;

}





form .page .field input.invalid-input {

    border-color: var(--errorColor);

}





form .page .field select {

    width: 100%;

    padding-left: 10px;

    font-size: 17px;

    font-weight: 500;

}



form .page .btns button.next {

    margin-left: 3px;

}

.thank-you {

    max-width: 670px;

    margin: auto;

    padding: 116px 0px 60px;

}

.thank-you .thank-you-heading {

    padding-bottom: 22px;

    border-bottom: 1px solid #D9DBE9;

}

.thank-you-heading h2 {

    background: linear-gradient(90deg, #FF7000 -7.75%, #B6502E 63.83%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    margin: 12px 0px 20px;

}

.thank-you-heading p {

    color: rgba(0, 0, 0, 0.80);

    text-align: center;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.3;

    margin: 0;

}

.thank-you .final-checkout-box .audi-heading {

    padding-left: 13px;

}

.thank-you .final-checkout-box .audi-a4 .audi-heading h3 {

    color: rgba(0, 0, 0, 0.90);

    font-size: 19px;

    font-weight: 700;

    line-height: 1.2; 

    margin: 0;

}

.thank-you .final-checkout-box .audi-a4 .audi-heading p {

    color: #000;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.1;

    margin: 0;

}

.thank-you .final-checkout-box .Transaction p {

    color: rgba(0, 0, 0, 0.70);

    font-size: 18px;

    font-weight: 600;

    line-height: 1.2;

    margin: 0;

}

.thank-you .final-checkout-box .Transaction  {

    margin-bottom: 10px;

}

.thank-you .final-checkout-box .taxes p {

    color: rgba(0, 0, 0, 0.80);

    font-size: 19px;

    font-weight: 600;

    line-height: 1.2;

    margin: 0;

}

.thank-you .final-checkout-box .payment {

    padding-bottom: 16px;

}

.thank-you .final-checkout-box .payment .payment-heading h4 {

    color: #000;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.3; 

    margin: 0;

    

}

.thank-you .final-checkout-box .payment .payment-price  p {

    color: #000;

    font-size: 20px;

    font-weight: 500;

    line-height: 1.3; 

    margin: 0;

}

.thank-you .final-checkout-box {

    border-radius: 20px;

    background: #FFF;

    padding: 25px 35px;

    padding-bottom: 8px;

    margin: 22px 0px;

}

.thank-you .good-by {

    padding-top: 21px;

    border-top: 1px solid #D9DBE9;

}

.thank-you .good-by h2 {

    background: linear-gradient(90deg, #FF7000 -7.75%, #B6502E 63.83%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    font-size: 30px;

    text-align: center;

    margin-bottom: 31px;

}

.thank-you .list {

    max-width: 515px;

    margin: auto;

    flex-wrap: wrap;

}

.thank-you .list .thankyou-list {

    margin-bottom: 8px;

    padding: 5px;

}

.thank-you .list .thankyou-list p {

    color: #000;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.3;

    margin: 0;

    padding-left: 8px;

}

@media (min-width: 1200px){

   .container {

        max-width: 1190px;

    }

    }

    @media (max-width: 1199px){

    .header .container {

        max-width: 100%;

    }

    .header .progress-bar .step .bullet:before, .progress-bar .step .bullet:after {

        position: absolute;

        right: -61px;

        width: 42px;

    }

}

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

    .header .form-header-button a img {

        width: 24px;

    }

    .header .form-header-button a {

        font-size: 20px;

    }

    .header .progress-bar .step .bullet:before, .progress-bar .step .bullet:after {

        position: absolute;

        right: -61px;

        width: 42px;

    }

}

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

    .header .progress-bar .step .bullet:before, .progress-bar .step .bullet:after{

        display: none;

    }

    .thank-you .good-by h2 {

        font-size: 32px;

    }

    .header .form-header-button a {

        padding: 9px 11px;

    }

    .header .form-header-button a {

        font-size: 16px;

    }

    .header .form-header-button a img {

        width: 19px;

    }

    .header .progress-bar .step .bullet:before, .progress-bar .step .bullet:after {

        width: 42px;

        right: -59px;

    }

    .month-to-month .month-box {

        margin-bottom: 20px;

        height: auto;

        padding: 30px 20px;

    }

    .piolat .become-piolat-heading h2 {

        font-size: 32px;

    }

    .repair-cost-two .repair-heading h2{

        font-size: 32px;

    }

    .form-faq .faq-heading h2 {

        font-size: 32px;

    }

    .vehicle-information .vehicle-information-heading h2 {

        font-size: 32px;

    }

    .your-vechile-two .vechile-heading h2 {

        font-size: 32px;

    }

    .your-vechile-two .tab-discribtion-one h2 {

        font-size: 32px;

    }

    .your-vechile-two .tab-list p {

        font-size: 16px;

    }

    .piolat .become-piolat-heading h3 {

        font-size: 16px;

    }

    .item-box img {

        width: 70px;

    }

    .repair-cost-two .item-box h2 {

        font-size: 18.231px;

    }

    .repair-cost-two .item-box h3 {

        font-size: 18px;

    }

    .testimonial .testimonial-box {

        margin-bottom: 40px;

    }

    .car-ownership .car-ownership-heading h2 {

        font-size: 30px;

    }

}

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

    .month-to-month .container {

        padding: 15px;

    }

    .thank-you .good-by h2 {

        font-size: 22px;

        line-height: 1.4;

    }

    .purchase-heading {

        padding: 50px 0px 35px;

    }

    .your-vechile-two .vechile-tabs {

        padding-bottom: 0;

    }

    .repair-cost-two .item-box.text-center {

        margin-bottom: 35px;

    }

    .your-vechile-two .vechile-tabs .tab-content>.tab-pane .container {

        padding: 0;

    }

    .testimonial .testimonial-box-heading p {

        margin-bottom: 25px;

    }

    .testimonial .testimonial-box {

        padding: 20px 30px;

        margin-bottom: 30px;

    }

    .your-vechile-two {

        padding: 40px 20px;

    }

    .your-vechile-two .vechile-heading {

        margin-bottom: 45px;

    }

    .form-banner-two {

        padding: 60px 0px 154px;

    }

    .form-faq .faq-modal .fa {

        top: 25px;

    }

    .vehicle-information {

        padding: 40px 0px 20px;

    }

    form .page .field input, .form-select {

        padding: 18px 20px;

    }

    .step-two {

        padding-bottom: 0px;

    }

    .form-faq {

        padding: 40px 0px 40px;

    }

    .accordion-button::after {

        width: 1rem;

        height: 1rem;

        background-size: 1rem;

    }

    .form-footer p {

        margin-bottom: 0;

    }

    .form-faq .accordion-button {

        padding: 20px;

        font-size: 17px;

        line-height: 1.5;

    }

    .form-faq .accordion-body {

        padding: 0 20px 20px;

    }

    .form-faq .faq-heading h2{

        font-size: 32px;

        margin-bottom: 40px;

    }

    .header .logo {

        max-width: 192px;

        margin: 0 auto 13px;

        text-align: center;

    }  

    .form-footer {

        margin-top: 10px;

        justify-content: space-between;

        flex-wrap: wrap;

    }

    .testimonial {

        padding-bottom: 10px;

    }

    .audi-a4 {

        margin-bottom: 20px;

    }

    .thank-you-heading h2{

        font-size: 30px;

    }

    .thank-you .final-checkout-box {

        margin: 22px 0px;

        padding: 25px 25px;

    }

    .thank-you {

        padding: 45px 10px 40px;

    }

    .header .logo img {

        max-width: 100%;

    }

    .header .form-header-button a {

        width: 100%;

        text-align: center;

        justify-content: center;

        font-size: 20px;

        padding: 13px 11px;

    }

    .header .progress-bar {

        margin: 20px 0px;

    }

    .form-banner .form-banner-heading h2 {

        font-size: 28px;

    }

    .form-banner {

        padding: 70px 20px 130px;

        background-position: top center;

    }

    .piolat .become-piolat-heading h2 {

        font-size: 30px;

    }

    .vehicle-information .vehicle-information-heading h2,

    .purchase .purchase-heading h2 {

        font-size: 30px;

    }

    .your-vechile-two .vechile-heading h2 {

        font-size: 30px;

    }

    .form-faq .faq-heading h2 {

        font-size: 30px;

    }

    .repair-cost-two .repair-heading h2 {

        font-size: 30px;

    }

    .your-vechile-two .tab-discribtion-one h2 {

        font-size: 30px;

    }

    .month-to-month {

        margin: -80px 0px 40px;

    }

    .header .progress-bar .step .bullet:before, .progress-bar .step .bullet:after {

        width: 42px;

        right: -84px;

    }

    .form-banner-two .form-banner-two-heading h2 {

        font-size: 36px;

    }

    .repair-cost-two {

        padding-top: 60px;

    }

    .your-vechile-two .vechile-heading p {

        font-size: 18px;

    }

    .form-faq .faq-modal {

        font-size: 18px;

        padding: 20px;

        padding-right: 50px;

    }

    .form-faq.faq-modal .fa {

        top: 24px;

    }

    .testimonial .testimonial-heading h2 {

        margin-bottom: 40px;

    }

    .form-faq .faq-heading h2 {

        margin-bottom: 50px;

    }

    .step-four .audi-a4 {

        margin-bottom: 20px;

    }

    .your-vechile-two .tab-discribtion-one h3 {

        font-size: 24px;

    }

    .final-checkout-box {

        margin: 0px;

        margin-bottom: 40px;

    }

    .final-checkout-box .audi-a4 {

        margin-bottom: 30px;

    }

    .purchase .purchase-heading p {

        font-size: 18px;

    }

    .form-check-input {

        width: 22px;

        height: 22px;

    }

    

    .modal.show .modal-dialog {

        transform: none;

        padding: 20px;

    }

    .modal-body h2{

        font-size: 30px;

    }

    .modal-body p {

        font-size: 18px;

    }

    .modal-body a {

        font-size: 22px;

    }

    .modal-body {

        padding: 0px 30px 30px 30px;

    }

    .modal-header{

        padding: 13px 20px;

    }



}

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

    :root {

        --containerWidth: 400px;

    }

    .progress-bar .step p {

        display: block;

    }

    .header .progress-bar {

        justify-content: space-between;

    }

    .header .progress-bar .step p {

        margin-bottom: 0;

        margin-left: 13px;

    }

    .progress-bar .step .bullet::after,

    .progress-bar .step .bullet::before {

        display: none;

    }

    .progress-bar .step .bullet {

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .progress-bar .step .check {

        position: absolute;

        left: 50%;

        top: 50%;

        font-size: 15px;

        transform: translate(-50%, -50%);

        display: none;

    }

    .step {

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .step-four .checkout {

        display: flex !important;

        flex-wrap: wrap;

    }

    .step-four .field button.next-3.next.proceed {

        width: 100%;

    }

    .field.btns.checkout-button {

    width: 100%;

    }

    .step-four .checkout .personalized {

        width: 100%;

    }

    .field.btns.personalized-button {

        width: 86%;

    }

    .step-four {

        padding: 15px;

    }

}

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

    .form-footer {

        justify-content: space-around;

    }

    .step-four {

        margin: -100px 20px 0px;

    }

}

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

    .thank-you .final-checkout-box .payment .payment-price p {

        font-size: 16px;

    }

    .final-checkout-box {

        padding: 25px 25px;

    }

    .step-four {

        margin: -100px 10px 0px;

    }

    .final-checkout-box .payment .payment-price p {

        font-size: 16px;

    }

.car-ownership .car-ownership-heading h2,

.testimonial .testimonial-heading h2,

.purchase .purchase-heading h2,

.thank-you-heading h2{

    font-size: 28px;

}

}

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



    :root {

        --containerWidth: 100%;

    }

    .form-banner .form-banner-heading h2 {

        font-size: 26px;

    }

    .piolat .become-piolat-heading h2 {

        font-size: 28px;

    }

    .form-faq .faq-heading h2 {

        font-size: 28px;

    }

    .vehicle-information .vehicle-information-heading h2 {

        font-size: 28px;

    }

    .repair-cost-two .repair-heading h2{

        font-size: 24px;

    }

    .your-vechile-two .vechile-heading h2{

        font-size: 24px;

    }

    .your-vechile-two .tab-discribtion-one h2{

        font-size: 24px;

    }

    .text-button {

        display: block !important;

    }

    .text-button .Sample {

        margin-bottom: 10px;

    }

    .field.btns.personalized-button {

        width: 80%;

    }

    .step-four .checkout .personalized {

        font-size: 15px !important;

    }

    .header .progress-bar .step p {

        margin-left: 0;

    }

    .header .step {

        display: block !important;

    }

}

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

    .modal-body a {

        font-size: 20px;

    }

    .modal-body.text-center a img {

        width: 25px;

    }

    .month-to-month .month-description p {

        font-size: 15px;

    }

    .month-to-month .month-description h3{

        font-size: 18px;

    }

}