.multistep-btn-end {
    display: flex;
    justify-content: end;
    align-items: end;
    text-align: end;
    gap: 20px;
}

.progressbar-step-form-sec .payment_select .theme-blue-btn {
    padding: 12px 35px;
}

.theme-blue-btn.active {
    background-color: var(--brown-theme-color);
    border: unset;
    color: #fff;
}

.theme-blue-btn.active:hover {
    background-color: var(--blue-theme-color);
    border: unset;
    color: var(--brown-theme-color);
}

.progressbar-step-form-sec {
    margin-top: 40px;
}

.enroll-now-multistep-form .progress {
    margin-top: 40px;
}

.payment_select {
    display: flex;
    list-style-type: none;
    justify-content: space-between;
}

.range-slider {
    display: block;
    margin-top: 40px;
    padding: 0;
}


.multistep-btn-end-first {
    flex-direction: column;
}

/* .range-slider {
    display: none;
} */

.price-range .range-slider {
    width: 100%;
    text-align: center;
    position: relative;
}

.range-slider .rangeValues {
    display: inline;
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 600;
    background: var(--brown-theme-color);
    color: #fff;
    padding: 0 10px 3px;
    border-radius: 4px;
}

.range-slider input[type=range] {
    -webkit-appearance: none;
    border: none;
    width: 100%;
    position: relative;
    left: 0;
    height: 8px;
    background: #EFEFEF;
}

.range-slider input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 1px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

.range-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 2px solid #fff;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background: var(--brown-theme-color);
    margin-top: -10px;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.range-slider input[type=range]:focus {
    outline: none;
}

.range-slider input[type=range]:focus::-webkit-slider-runnable-track {
    background: var(--brown-theme-color);
}

.range-slider input[type=range]::-moz-range-track {
    width: 300px;
    height: 5px;
    background: var(--brown-theme-color);
    border: none;
    border-radius: 3px;
}

.range-slider input[type=range]::-moz-range-thumb {
    border: none;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background: var(--brown-theme-color);
}

/*hide the outline behind the border*/
.range-slider input[type=range]:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
}

.range-slider input[type=range]::-ms-track {
    width: 300px;
    height: 5px;
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;
    /*remove default tick marks*/
    color: transparent;
    z-index: -4;
}

.range-slider input[type=range]::-ms-fill-lower {
    background: var(--brown-theme-color);
    border-radius: 10px;
}

.range-slider input[type=range]::-ms-fill-upper {
    background: var(--brown-theme-color);
    border-radius: 10px;
}

.range-slider input[type=range]::-ms-thumb {
    border: none;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background: var(--brown-theme-color);
}

.range-slider input[type=range]:focus::-ms-fill-lower {
    background: var(--brown-theme-color);
}

.range-slider input[type=range]:focus::-ms-fill-upper {
    background: var(--brown-theme-color);
}

.price-range {
    display: none;
}


@media only screen and (min-width: 0px) and (max-width: 519px) {
    .price-range {
        display: none;
    }

    .range-slider {
        display: block;
        padding: 0 20px;
    }
}

.price-range p {

    color: var(--Black, #0F0F0F);

    font-family: Poppins;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    margin: 0;

    line-height: normal;

}



.price-slider {

    width: 100%;

    height: 8px;

    border-radius: 50px;

    background: #EFEFEF;

    margin: 0 0 15px;

    position: relative;

}



.price-range {

    position: relative;

    width: 100%;

}



.price-range span {

    position: absolute;

    color: var(--White, #FFF);

    font-family: Gilroy-SemiBold;

    font-size: 20px;

    font-style: normal;

    font-weight: 400;

    line-height: normal;

    display: inline-flex;

    padding: 10px;

    justify-content: center;

    align-items: center;

    border-radius: 5px;

    background: var(--Pink, var(--brown-theme-color));

    top: -67px;

    left: 47px;

    /* Added transition for smooth movement */

}



.price-range span svg {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    bottom: -9px;

    fill: var(--brown-theme-color);

    width: 14px;

    height: 12px;

}



.price-range .selected-price-text {

    position: absolute;

    top: -30px;

    left: 50%;

    transform: translateX(-50%);

}



.price-range button {

    position: absolute;

    left: 70px;

    background-color: var(--brown-theme-color);

    width: 20px;

    height: 20px;

    content: '';

    border-radius: 50%;

    display: flex;

    top: -7px;

    border: unset;

}

.payment-form {

    display: inline-flex;

    padding: 30px;

    flex-direction: column;

    align-items: flex-start;

    gap: 30px;

    border-radius: 20px;

    background: var(--blue-theme-color);

    margin: 20px 0 0;

}

#payment-form {
    width: 100%;
}

.input-sec {

    margin: 30px 0 0;

    position: relative;

}

.input-sec label {
    display: block;
    color: #fff;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px;
    position: absolute;
    top: -12px;
    left: 19px;
    background-color: var(--blue-theme-color);
    padding: 0 8px;
}

.input-sec input {

    display: flex;

    width: 100%;

    padding: 14px 10px 14px 16px;

    align-items: flex-start;

    gap: 10px;

    border-radius: 10px;

    border: 1px solid var(--brown-theme-color);

    background: var(--blue-theme-color);

    color: var(--White, #FFF);

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 23px;
    /* 143.75% */

}

.input-sec input[type="date"]::-webkit-calendar-picker-indicator {

    filter: invert(100%);
    /* Example: Invert color */

}

.input-sec input::placeholder {

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    color: #fff;

}

.card-details h4 {
    margin: 0;
    color: var(--White, #FFF);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.card-details button {

    display: flex;

    width: 100%;

    height: 50px;

    padding: 10px;

    justify-content: center;

    align-items: center;

    gap: 10px;

    border-radius: 5px;

    background: var(--brown-theme-color);

    margin-top: 30px;

    border: 1px solid transparent;

    color: var(--White, #FFF);

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: normal;

    transition: all 0.5s;

}



.card-details button:hover {

    background-color: transparent;

    border-color: var(--brown-theme-color);
    color: var(--White, #FFF);
}

.card-details button:active {

    background-color: transparent !important;

    border-color: var(--brown-theme-color) !important;
    color: var(--White, #FFF) !important;
}
.card-details button:focus-visible {

    background-color: transparent !important;

    border-color: var(--brown-theme-color) !important;
    color: var(--White, #FFF) !important;
    box-shadow: var(--brown-theme-color);
}

.order-success {
    background: #eff6fb;
    text-align: center;
    padding: 20px;
    margin: 100px 0;
    border-radius: 10px;
  }

  .order-success-img img {
    height: 50px;
    width: 50px;
    margin-bottom: 20px;
    filter: brightness(0) saturate(100%) invert(40%) sepia(15%) saturate(871%) hue-rotate(61deg) brightness(97%) contrast(90%);
  }
  .order-fail-img img {
    height: 75px;
    width: 75px;
    margin-bottom: 20px;
  }
  .cart-page__coupon__continue-shopping {



    font-size: 17px;



    line-height: 1;



    font-weight: 600;



    text-transform: uppercase;



    color: var(--blue-theme-color);



    position: relative;



  }







  .cart-page__coupon__continue-shopping::before,



  .cart-page__coupon__continue-shopping::after {



    content: "";



    position: absolute;



    width: 100%;



    max-width: 100%;



    height: 1px;



    background-color: var(--blue-theme-color);



    z-index: 1;



    left: 0;



    right: 0;



    bottom: 0;



    margin: 0 auto;



    transition: all 0.6s;



  }







  .cart-page__coupon__continue-shopping::after {



    max-width: 0;



    background-color: var(--brown-theme-color);



    transition: all 0.8s;



  }







  .cart-page__coupon__continue-shopping:hover {



    color: var(--brown-theme-color);



  }







  .cart-page__coupon__continue-shopping:hover::before {



    max-width: 0;



  }







  .cart-page__coupon__continue-shopping:hover::after {



    max-width: 100%;



  }
