/* new */
.bg-color-page {
    background-color: #F1F5EC;
}

.create-box-outer #step-1 .card {
    width: 100%;
    max-width: 1170px;
    min-height: 760px;
    border-radius: 40px !important;
}

.create-box-outer.bg-pattern-top::before,
.create-box-outer.bg-pattern-top::before,
.create-box-outer.bg-pattern-top::before,
.create-box-outer.bg-pattern-top::before,
.create-box-outer.bg-pattern-top::before,
.create-box-outer.bg-pattern-top::before,
.create-box-outer.bg-pattern-top::before,
.create-box-outer.bg-pattern-top::before,
.create-box-outer.bg-pattern-top::before,
.create-box-outer.bg-pattern-top::before {
    content: '';
    background-image: url("../images/Rectangle 20.png");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    position: absolute;
    min-height: 457px;
    z-index: 0;
}

.create-box-outer .steps {
    z-index: 3;
}

#step-1 .card,
#step-2 .card,
#step-3 .card,
#step-2 .card,
#step-4 .card,
#step-5 .card,
#step-6 .card,
#step-7 .card,
#step-8 .card {
    z-index: 999;
}

#step-2 .out-box-radio-button label,
#step-3 .out-box-radio-button label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#step-1::before {
    bottom: 530px;
}

#step-2 progress,
#step-3 progress,
#step-4 progress,
#step-5 progress {
    width: 100%;
    max-width: 657px;
    position: relative;
    left: 0px;
    bottom: 94px;
    height: 2px;
    display: flex;
    justify-content: center;
    margin: auto;
    align-items: center;
    z-index: 222;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid #FFF;
}

.steps .radius-container {
    width: 100%;
    max-width: 320px;
    max-height: 72px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.steps .sub-heading {
    padding: 0px 68px 40px !important;
}

.banner-btn svg {
    display: flex;
    align-items: center;
}

#step-3 .sub-heading {
    padding-bottom: 40px !important;
}

#step-4 label {
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#step-4 .premium-types.checkbox-group {
    padding: 0;
}

#step-4 .bottom-heading {
    padding-top: 20px !important;
}

#step-6 progress {
    width: 100%;
    max-width: 983px;
    position: relative;
    left: 0px;
    bottom: 94px;
    height: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    z-index: 222;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.weight-input-wrapper {
    display: flex;
    flex-direction: column;
}

#step-2 .weight-input-wrapper .weight {

}

#step-2 .weight-input-wrapper .weight span {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #06021F4D;
    font-size: 16px;
    pointer-events: none;
    line-height: 24px;
    font-weight: 400;
}

#step-7::before {
    bottom: 430px;
}

#step-2 .weight-input-wrapper .weight-input {
    font-family: 'Instrument Sans',sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    padding: 12px 16px;
    color: #06021F;
    width: 100%;
    border: 1px solid #D9D9D9;
    max-width: 100%;
    border-radius: 10px;
    height: 56px;
    margin: 0;
}

#step-8 {
    background-color: #F1F5EC;
    padding-top: 0 !important;
}

#step-8::before {
    content: '';
    background-image: url("../images/Rectangle 20.png");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    position: absolute;
    min-height: 457px;
    z-index: 1;
    top: 0;
}

#step-6 .outer-box-heading {
    margin: 0;
}

#step-7 .dog-gender {
    display: flex;
    justify-content: center;
    gap: 24px;
}

#step-6 .content-box-weight {
    margin: 0;
}

.dog-side-background img {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#step-7 .saving-plan .plan-content {
    color: rgb(6, 2, 31);
    padding: 16px 0px 0px 0px;
}

#step-6 .content-day {
    color: rgb(6, 2, 31);
    margin: 0;
}

#step-6 .outer-box-bottom-content {
    color: rgb(6, 2, 31) !important;
    margin: 0;
}

#step-6 .bottom-heading {
    margin: 0;
    padding: 24px 0px 8px !important;
}

#step-6 .outer-box-col1 img {
    padding-top: 0;
}

#step-6 .outer-box-subheading {
    padding-bottom: 24px;
    margin: 0;
}

#step-6 .step-6-green {
    margin-bottom: 0;
}

.dog-age-type .dog-gender-label {
    width: 100%;
    max-width: 224px;
}

.dog-age-type,
.puppy-age-type {
    padding-bottom: 0 !important;
}

.dog-gender-label::after {
    content: "";
    position: absolute;
    left: 309px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: rgba(4, 120, 87, 1);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s;
}

input[type="radio"]:checked+.dog-gender-label::after {
    opacity: 1;
}


input[type="radio"]:checked+.dog-gender-label::before {
    border-color: #007BFF;
}

.dog-age-type .dog-gender-label::after {
    left: 189px;
}

.steps .card-content-heading {
    color: rgba(6, 2, 31, 1);
}

.dog-age-type input[type="number"] {
    padding: 16px;
    border: 1px solid rgba(217, 217, 217, 1);
    width: 100%;
    max-width: 344px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 1);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    outline: none;
    height: 56px;
}

.dog-age-type {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

#step-4 .premium-types input[type="checkbox"]:checked+label {
    color: #047857;
    font-weight: 500;
}

.apply-coupon-input input[type="text"] {
    max-width: 100%;
    border-radius: 8px;

}

#step-12 .card-main-content {
    padding-bottom: 30px;
}

#step-12::before {
    top: 0 !important;
}

#step-9 .heading {
    padding-bottom: 12px;
}

#step-9 .card {
    max-width: 1080px !important;
}

#step-9 .step-8-coupon {
    padding-right: 0 !important;
}

.step-9-form-container #wc_user_email {
    height: 56px;
}

.steps .card .heading {
    font-family: "Instrument Sans",sans-serif !important;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    text-align: center;
    color: rgb(6, 2, 31);
    margin-bottom: 0;
}

#step-8 .discount {
    display: flex;
    display: flex;
    gap: 12px;
    padding: 0px 16px;
}

#step-8 .discount-code {
    padding: 4px 12px;
    background-color: #fff;
    border-radius: 8px;
    height: 100%;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    display: flex;
    align-items: center;
    color: #06021F;
}

#step-8 .add-cart-trash-data {
    display: flex;
    flex-direction: column;
    text-align: end;
}

#step-8 .apply-coupon-input {
    display: flex;
    gap: 12px;
}

.rude-dog-container {
    align-items: center;
    display: block !important;
    margin: auto;
    max-width: 100%;
    width: 100%;
}

#step-8 .sub-heading {
    padding-top: 12px !important;
}

.steps .card {
    border: none;
}

#step-8 p.price-container-heading {
    margin-bottom: 6px;
}

.step-8-price-container .amount bdi {
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0%;
    color: #06021F;
}

#step-8 .add-cart-heading-content .main-heading,
#step-8 .side-heading {
    margin-bottom: 0;
}

.step-8-price-container {
    color: #06021F;
}

#step-8 .discount-heading {
    margin-bottom: 0;
}

.step-8-button {
    gap: 12px;
}

.step-8-content-wrapper {
    height: fit-content;
}

#step-8 .discount-heading {
    color: #06021F;
}

.step-8-instruction {
    color: #333239;
    text-align: justify;
}

#step-8 span.woocommerce-Price-amount.amount {
    color: #06021F;
    font-weight: 500;
}

#step-8 a.remove::before {
    left: 15px;
}

#step-8 .trash-main-heading {
    margin-bottom: 5px;
}

#step-6 .bottom-sub-heading {
    padding: 0;
    margin: 0;
}

.dog-side-background {
    position: relative;
    display: none;
}

#step-8 .discount-amount {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #06021F;
    margin-bottom: 0;
    height: 100%;
}

#step-8 .discount {
    display: flex;
    gap: 12px;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
}
#step-4 .dog-profile-content .allery-heading {
    padding-top: 0 !important;
}
#step-8 .discount-head {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #06021F;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.create-box-outer #step-2 .card,
.create-box-outer #step-5 .card,
.create-box-outer #step-6 .card {
    width: 100%;
    max-width: 800px;
}

body.wp-singular.page-template.page-template-templates.page-template-template-step-form.page-template-templatestemplate-step-form-php.page.page-id-18460.logged-in.admin-bar.no-customize-support.wp-custom-logo.wp-embed-responsive.wp-theme-ziggy.wp-child-theme-ziggy-child.theme-ziggy.woocommerce-no-js.woo-variation-swatches.wvs-behavior-blur.wvs-theme-ziggy-child.wvs-show-label.chrome.group-blog.woocommerce-active.product-block-style-1.elementor-default.elementor-kit-16207 {
    background-color: #F1F5EC;
}

#step-8 input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::webkit-inner-spin-button {
    -appearance: none;
    margin: 0;
}

#step-1,
#step-7,
#step-8 {
    position: relative;
    width: 100%;
}

#step-1{
    padding: 68px 0px 100px 0px;
}

.steps .card {
    margin: auto;
    padding: 48px;
    border-radius: 24px !important;
    background-color: #fff;
}

#step-2,
#step-5,
#step-6,
#step-4,
#step-3 {

    position: relative;
    width: 100%;
    padding: 0px 0px 100px 0px;
    display: none;
}

.card-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 108px;
}

#step-1 .sub-heading {
    padding-bottom: 60px !important;

}

#step-2 .create-box-outer-radius {
    padding: 40px 0px;
    display: flex;
    gap: 16px;
    width: 100%;
    max-width: 1008px;
    margin: auto;
}

#step-2 progress {
    bottom: 94px;
}

.summary-heading {
    font-size: 16px;
    color: rgba(6, 2, 31, 1);
    font-weight: 600;
    margin: 0;
    padding-bottom: 8px;
    line-height: 24px;
}

.card .card-main-content {
    align-items: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

#step-1 .steps .sub-heading {
    padding: 0;
}

#step-1 .card-col-2 {
    width: 100%;
    max-width: 279px;
}

#step-1 .card-col-1 {
    width: 100%;
    max-width: 279px;
}

.card-col-1,
.card-col-2 {
    text-align: center;
    display: flex;
    gap: 8px;
    flex-direction: column;
    justify-content: center;
}

.steps .card-heading {
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    font-family: 'Instrument Sans',sans-serif !important;
}

.steps .card-content {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    font-family: 'Instrument Sans',sans-serif !important;
}
#step-1 .card-content{
    color: rgba(51, 50, 57, 1);
    margin: 0;
}
.card-row .card-col-1 img {
    width: 100%;
    max-width: 96px;
    margin: 0 auto;
    padding-bottom: 16px;
}

.card-row .card-col-2 img,
.card-row .card-col-3 img {
    max-width: 80px;
    margin: 0 auto;
    width: 100%;
    padding-bottom: 16px;
}

#step-3 .outer-box-btn .active {
    background: #047857;
}

#step-4 .step-check-content label {
    display: flex;
    justify-content: space-between;
}

.banner-btn {
    background: #047857;
    width: 100%;
    gap: 8px;
    border-radius: 10px;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    max-width: 480px;
    display: block;
    margin: 30px auto 0px;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

#getStartedBtn {
    height: 56px;
    margin-top: 48px;
}

.steps .sub-heading,
#step-4 .sub-heading {
    font-family: "Instrument Sans",sans-serif !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    margin: 0;
    padding: 0;
    color:rgba(6, 2, 31, 1);
    max-width: unset !important;
}

#step-4 .bottom-content-btn {
    padding-top: 0px;
}

#step-9 .wc_payment_methods.payment_methods.methods.stripe-small {
    background-color: #FFF;
    padding: 16px !important;
    border-radius: 10px;
}

#step-4 .bottom-heading {
    margin: 0;
    padding-top: 10px;
}

/* #payment .payment_methods li > label::before{
    content: '' !important;
} */
#getStartedBtn:hover {
    background-color: #047857;
}

#step-9 li.wc_payment_method.payment_method_stripe_googlepay.wc-stripe-no-desc,
#step-9 li.wc_payment_method.payment_method_stripe_cc.wc-stripe-no-desc {
    padding: 16px 16px !important;
    align-items: center;
}

.wc_payment_methods label,
.payment_box.payment_method_cod {
    padding: 0 !important;
}

#step-9 .woo-custom-payment label {
    width: 100%;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(6, 2, 31, 1) !important;
}

#step-9 #payment .payment_methods li img {
    max-height: 20px;
}

#step-9 .wc_payment_method.wc_payment_method.payment_method_cod {
    padding: 16px !important;
}

#step-9 .payment_box.payment_method_cod {
    padding-left: 10px !important;
}

#step-4 .premium-types {
    margin-bottom: 0;
}

#form-step-5 label {
    color: rgb(6, 2, 31);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    padding: 24px 0px 8px;
}

#step-3 .out-box-radio-button {
    padding-bottom: 0;
}

#form-step-5 input[type="text"],
#step-5 .phone-numb {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    border-radius: 10px !important;
    color: #06021F;
    max-width: 100%;
    height: 56px;
    outline: none;
    margin: 0;
}

#step-3 .create-box-outer {
    margin: 0 !important;
    padding: 32px 0px 12px;
}

#step-3 .acie-content .create-box-outer {
    padding: 32px 0px 12px;
}

#step-2 .sub-heading,
#step-3 .sub-heading,
#step-7 .sub-heading,
#step-8 .sub-heading {
    padding-bottom: 15px;
}

.heading-span {
    color: #047857;
    position: relative;
}

#step-4 .card,
#step-5 .card {
    width: 100%;
    max-width: 800px;
    margin: auto;
}

.create-box-outer .steps label,
.create-box-outer {
    font-family: "Instrument Sans",sans-serif !important;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: rgba(6, 2, 31, 1);
}

.create-box-outer form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-error-message,
#step-2 .dog-gender {
    margin: 0 !important;
}

#step-2 form {
    gap: 0px;
    margin: 0;
}

#step-2 label {
    padding: 24px 0px 8px 0px;
}

#dog_name,
#form-step-3 .create-box-outer label {
    margin-bottom: 10px;
}

.create-box-outer {
    margin: 0px 0px 10px 0px !important;
}

#form-step-6 .premium-types {
    padding-bottom: 24px;
    margin: 0;
    gap: 8px;
}

#form-step-6 .bottom-content-btn {
    margin-top: 10px;
    padding-top: 0;
}

.option::after,
.option2::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0.296875C12.5726 0.299604 15.0393 1.3225 16.8584 3.1416C18.6775 4.9607 19.7004 7.42741 19.7031 10C19.7031 11.9191 19.1336 13.795 18.0674 15.3906C17.0012 16.9862 15.4859 18.2305 13.7129 18.9648C11.9401 19.6991 9.98939 19.8909 8.10742 19.5166C6.2252 19.1422 4.49568 18.2183 3.13867 16.8613C1.78167 15.5043 0.857795 13.7748 0.483398 11.8926C0.10913 10.0106 0.300937 8.0599 1.03516 6.28711C1.76954 4.51414 3.01376 2.99881 4.60938 1.93262C6.10528 0.933083 7.84743 0.370157 9.64062 0.303711L10 0.296875ZM13.75 6.95312C13.6454 6.95313 13.542 6.97368 13.4453 7.01367C13.3486 7.05374 13.2606 7.11249 13.1865 7.18652L8.5 11.873L6.81348 10.1865C6.66396 10.037 6.46145 9.95312 6.25 9.95312C6.03855 9.95313 5.83604 10.037 5.68652 10.1865C5.537 10.336 5.45313 10.5385 5.45312 10.75L5.45703 10.8291C5.47522 11.0115 5.55577 11.1827 5.68652 11.3135L7.93652 13.5635C8.01053 13.6376 8.09858 13.6962 8.19531 13.7363C8.29198 13.7764 8.39537 13.7979 8.5 13.7979C8.60463 13.7979 8.70802 13.7764 8.80469 13.7363C8.90142 13.6962 8.98947 13.6376 9.06348 13.5635L14.3135 8.31348C14.3875 8.23944 14.4463 8.15142 14.4863 8.05469C14.5263 7.95803 14.5469 7.85461 14.5469 7.75C14.5469 7.64539 14.5263 7.54197 14.4863 7.44531C14.4463 7.34858 14.3875 7.26056 14.3135 7.18652C14.2394 7.11249 14.1514 7.05374 14.0547 7.01367C13.958 6.97368 13.8546 6.95312 13.75 6.95312Z' fill='%23047857' stroke='%2306021F' stroke-width='0.09375'/%3E%3C/svg%3E");
    font-size: 14px;
    color: white;
    /* background-color: #047857; */
    border-radius: 50%;
    background-size: cover;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    position: absolute;
    right: 12px;
    opacity: 0;
    margin: 10px auto;

}

::selection {
    text-shadow: none;
    color: #fff;
    background: var(--e-global-color-primary);
}

element {}

#step-3 .option2 {
    align-items: start;
}

.form-adult-senior-fields input[type="number"] {
    height: 56px;
    font-weight: 500;
}

.create-box-outer .steps label,
.create-box-outer {
    font-family: "Instrument Sans",sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: rgba(6, 2, 31, 1);
}

input[type="checkbox"]+label,
input[type="radio"]+label {
    margin: 0 !important;
}

#step-4 .premium-types label {
    color: rgb(6, 2, 31);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.step-check-content .option {
    font-family: "Instrument Sans";
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: rgb(6, 2, 31);
}

.step-check-content {
    padding-bottom: 20px;
}

#step-3 .step-check-content {
    padding-bottom: 0;
}

.step-check-content .field-error-message {
    padding-bottom: 0px 0px 20px 0px !important;
}

#step-4 .bottom-heading {
    font-size: 16px;
    font-weight: 500;
    color: rgb(6, 2, 31);
}

.create-box-outer form input[type=text],
select {
    width: 100%;
    max-width: 704px;
    padding: 16px 16px;
    font-size: 16px;
    font-weight: 500;
    color: #06021F;
    border-radius: 10px;
    border: 1px solid rgba(217, 217, 217, 1);
    /* margin: 0px 0px 20px 0px; */
}

.dog-gender .radio-group label {
    padding: 16px;
}

.select-option {
    display: flex;
    gap: 16px;
}

.create-box-outer form select {
    width: 100%;
    max-width: 344px;
    background-color: #fff;
    color: rgba(6, 2, 31, 0.3);
}

.create-box-outer ::placeholder {
    color: black;
}

.steps form ::placeholder {
    color: rgba(6, 2, 31, 0.3);
}

#step-9 .checkout.woocommerce-checkout.new-checkout-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#step-2 #names {
    width: 100%;
    max-width: 100%;
    background-color: #fff;
}

.Login_page .login-page-input,
.Forget_page .forget-page-input,
.login-page-form-group input[type="email"] {
    max-width: 100%;
    width: 100%;
}

.forget-page-form-group label,
.Login_page .login-page-form-group label,
.Login_page .login-page-checkbox-label {
    padding-left: 0;
}

.create-box-outer .steps .card {
    position: relative;
}

.dog-gender,
.premium-types {
    display: flex;
    column-gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    row-gap: 8px;
}

.premium-types {
    flex-wrap: wrap;
    padding-top: 15px;
    column-gap: 8px;
}

.delivery-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    color: rgb(6, 2, 31);
}

.free-delivery-highlighted {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
}

#step-9 .wc-delivery-ul {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#step-9 .delivery-text-heading {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: rgb(6, 2, 31);
    margin-bottom: 0;
    padding: 10px 0px 5px 0px;
}

#step-2 .adult-age-box .ad-1 span {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #06021F4D;
    font-size: 16px;
    pointer-events: none;
    line-height: 24px;
    font-weight: 400;
}

#step-8 a.remove {
    display: block;
    width: 100%;
    height: 1.618em;
    line-height: 1.618;
    font-weight: var(--e-global-typography-text-font-weight);
    text-indent: -9999px;
    position: relative;
    left: 0;
    right: 0;
}

#step-9 .consent-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

#step-9 .consent-check label {
    color: rgb(51, 50, 57);
    cursor: pointer;
    padding-bottom: 24px;
}

#step-9 .wc-delivery-ul label {
    color: rgba(6, 2, 31, 1);
}

#step-9 .wc-custom-btn-check {
    background-color: rgb(4, 120, 87);
    padding: 12px 32px;
    text-align: center;
    border-radius: 10px;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0%;
    color: rgb(255, 255, 255);
}

.wc-delivery-day-wrapper {
    padding: 16px;
    margin: 24px 0px;
}

.wc-checkout-billing-tag {
    margin-top: 0;
}

#step-9 .delivery-address-wrapper {
    padding-left: 0;
}

#step-9 .deliveriy-instruction input[type="text"] {
    height: 56px;
}

#step-9 .wc-delivery-li input[type="radio"]:checked+label {
    background-color: rgba(241, 246, 246, 1);
    border: border 1px solid rgba(0, 125, 89, 1);
}

#step-9 .wc-delivery-li input[type="radio"] {
    float: right;
}

#step-8 a.remove::before {
    left: 16px;
    right: -33px;
}

body.wp-singular.page-template.page-template-templates.page-template-template-new-cart.page-template-templatestemplate-new-cart-php.page.page-id-18457.logged-in.admin-bar.wp-custom-logo.wp-embed-responsive.wp-theme-ziggy.wp-child-theme-ziggy-child.theme-ziggy.woocommerce-js.woo-variation-swatches.wvs-behavior-blur.wvs-theme-ziggy-child.wvs-show-label.chrome.group-blog.woocommerce-active.product-block-style-1.elementor-default.elementor-kit-16207.dialog-body.dialog-buttons-body.dialog-container.dialog-buttons-container.has-scrollbar.customize-support.e--ua-blink.e--ua-chrome.e--ua-webkit {
    background-color: #F1F5EC;
}

.active-premium-types {
    background-color: rgba(241, 246, 246, 1);
    max-width: 346px;
    width: 100%;
    text-align: center;
    padding: 14px;
    font-size: 16px;
    margin: 0;
    border-radius: 10px;
    border: 1px solid rgba(4, 120, 87, 1);
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 16px;
    color: rgba(4, 120, 87, 1);
    font-weight: 500;
}

.premium-types .basic-span {
    background-color: #fff;
    color: black;
    border: 1px solid rgba(217, 217, 217, 1);
}

.step-check-content input[type="radio"]:checked+label,
.premium-types input[type="checkbox"]:checked+label,
#step-4 .premium-types input[type="checkbox"]:checked+label {
    font-weight: 500 !important;
}

#step-overview .profile-card .accordion-item:last-of-type {
    margin-bottom: 0;
}

.dog-gender label,
.out-box-radio-button label,
.premium-types label,
.puppy-age-type .puppy-age-label {
    border: 1px solid rgb(217, 217, 217);
    padding: 12px 16px;
    width: 100%;
    max-width: 344px;
    border-radius: 10px;
    background-color: #fff;
    cursor: pointer;
    height: 56px;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.dog-gender label {
    color: rgb(0, 0, 0);
}

.step-check-content label {
    border: 1px solid rgb(217, 217, 217);
    padding: 12px 16px;
    width: 100%;
    border-radius: 10px;
    background-color: #fff;
    cursor: pointer;
}

.premium-types label {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.step-3-validate label {
    display: flex;
    flex-direction: column;
}

.step-3-validate {
    display: flex;
    gap: 16px;
    flex-direction: column;
}

.dog-gender input[type="radio"],
.out-box-radio-button input[type="radio"],
.premium-types input[type="checkbox"],
#step-4 .premium-types input[type="checkbox"],
.step-check-content input[type="radio"],
.step-3-validate input[type="checkbox"],
.acie-card input[type="checkbox"],
.option input[type="radio"] {
    display: none;
}

.acie-card-info label {
    border: none;
    padding: 0;
}

#step-7 .dog-gender label {
    text-align: center;

}

.dog-gender input[type="radio"]:checked+label,
.out-box-radio-button input[type="radio"]:checked+label,
.premium-types input[type="checkbox"]:checked+label,
#step-4 .premium-types input[type="checkbox"]:checked+label,
.step-check-content input[type="radio"]:checked+label,
.step-3-validate input[type="checkbox"]:checked+label,
.acie-card input[type="checkbox"]:checked+label,
.puppy-age-type input[type="radio"]:checked+.puppy-age-label {
    background-color: rgba(241, 246, 246, 1) !important;
    border: 1px solid rgba(0, 125, 89, 1) !important;
}

.acie-card input[type="checkbox"]:checked+label svg,
.out-box-radio-button input[type="radio"]:checked+label svg {
    color: rgba(4, 120, 87, 1);
    /* background-color:rgba(4, 120, 87, 1);  */
}

.acie-card input[type="checkbox"]+label svg,
.out-box-radio-button input[type="radio"]label+svg {
    color: #000;
}

.premium-types input[type="checkbox"]:checked+label {
    color: rgba(4, 120, 87, 1);
}

.option,
.option2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

#step-3 .option2 {
    align-items: start;
}

.steps input[type="text"] {
    height: 56px;
}
.progress-container {
    position: relative;
    width: 100%;
    max-width: 760px;
    display: flex;
    justify-content: space-between;
    padding: 48px 0px;
    margin: auto;
}

#createbox-progress-wrapper .progress-line {
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    position: absolute;
    top: 41%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 0;
    width: 100%;
}

.progress-line::-webkit-progress-bar {
    background-color: rgba(255, 255, 255, 0.3);
}

/* 3. WebKit (Chrome, Safari, Edge) - The Filled Value */
.progress-line::-webkit-progress-value {
    background-color: #FFFFFF;
    opacity: 1; /* Note: I changed your 0 to 1 so the filled part is visible */
}

/* 4. Mozilla (Firefox) - The Filled Value */
/* Note: Firefox uses -bar for the filled portion, not the track! */
.progress-line::-moz-progress-bar {
    background-color: #FFFFFF;
    opacity: 1; 
}

#createbox-progress-wrapper .step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 100%;
    padding: 0;
    max-width: 40px;
}

#createbox-progress-wrapper .icon-box {
    width: 100%;
    max-width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    box-shadow: 0 2px 0px rgba(10, 13, 18, 0.05);
    border: 1px solid rgba(233, 234, 235, 1);
}

#createbox-progress-wrapper .step-label {
    color: rgb(255, 255, 255);
    font-size: 14px;
    transition: color 0.3s ease;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0%;
    text-align: center;
}

#createbox-progress-wrapper .step.filled .step-label {
    color: rgb(255, 255, 255, 0.4);
}

#createbox-progress-wrapper progress::-webkit-progress-value {
    background-color: white;
    border-radius: 10px;
}

#createbox-progress-wrapper progress::-moz-progress-bar {
    background-color: white;
}

.option::after,
.option2::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0.296875C12.5726 0.299604 15.0393 1.3225 16.8584 3.1416C18.6775 4.9607 19.7004 7.42741 19.7031 10C19.7031 11.9191 19.1336 13.795 18.0674 15.3906C17.0012 16.9862 15.4859 18.2305 13.7129 18.9648C11.9401 19.6991 9.98939 19.8909 8.10742 19.5166C6.2252 19.1422 4.49568 18.2183 3.13867 16.8613C1.78167 15.5043 0.857795 13.7748 0.483398 11.8926C0.10913 10.0106 0.300937 8.0599 1.03516 6.28711C1.76954 4.51414 3.01376 2.99881 4.60938 1.93262C6.10528 0.933083 7.84743 0.370157 9.64062 0.303711L10 0.296875ZM13.75 6.95312C13.6454 6.95313 13.542 6.97368 13.4453 7.01367C13.3486 7.05374 13.2606 7.11249 13.1865 7.18652L8.5 11.873L6.81348 10.1865C6.66396 10.037 6.46145 9.95312 6.25 9.95312C6.03855 9.95313 5.83604 10.037 5.68652 10.1865C5.537 10.336 5.45313 10.5385 5.45312 10.75L5.45703 10.8291C5.47522 11.0115 5.55577 11.1827 5.68652 11.3135L7.93652 13.5635C8.01053 13.6376 8.09858 13.6962 8.19531 13.7363C8.29198 13.7764 8.39537 13.7979 8.5 13.7979C8.60463 13.7979 8.70802 13.7764 8.80469 13.7363C8.90142 13.6962 8.98947 13.6376 9.06348 13.5635L14.3135 8.31348C14.3875 8.23944 14.4463 8.15142 14.4863 8.05469C14.5263 7.95803 14.5469 7.85461 14.5469 7.75C14.5469 7.64539 14.5263 7.54197 14.4863 7.44531C14.4463 7.34858 14.3875 7.26056 14.3135 7.18652C14.2394 7.11249 14.1514 7.05374 14.0547 7.01367C13.958 6.97368 13.8546 6.95312 13.75 6.95312Z' fill='%23047857' stroke='%2306021F' stroke-width='0.09375'/%3E%3C/svg%3E");
    font-size: 14px;
    color: white;
    /* background-color: #047857; */
    border-radius: 50%;
    width: 24px;
    background-size: cover;
    height: 24px;
    display: flex;
    justify-content: center;
    position: absolute;
    right: 12px;
    opacity: 0;
    margin: 10px auto;
}

input[type="radio"]:checked+.option,
input[type="checkbox"]:checked+.option2 {
    background-color: #f0fdfa;
    border-color: #047857;
}

input[type="radio"]:checked+.option::after,
input[type="checkbox"]:checked+.option2::after {
    opacity: 1;
}

.dog-gender span {
    max-width: 460px;
    width: 100%;
    margin: 0px 6px;
    text-align: start;
    padding: 14px;
    font-size: 16px;
    margin: 0;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid rgba(217, 217, 217, 1);
}

.dog-gender svg,
.out-box-radio-button input[type=radio] {
    float: right;
}

.adult-age-box {
    display: flex;
    gap: 15px;
    align-items: center;
}

.outer-box-btn button {
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    border-radius: 10px;
    opacity: 1;
    padding: 13px 24px;
    border-width: 1px;
    width: 100%;
    max-width: 200px;
    border: 1px solid rgba(217, 217, 217, 1);
    display: flex;
    justify-content: center;
    gap: 8px;
}

.outer-box-btn .active {
    background-color: rgba(4, 120, 87, 1);
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
    align-items: center;
}

.outer-box-btn .back-btn {
    background-color: rgba(4, 120, 87, 1);
    align-items: start;
    text-transform: none;
    
}

.steps button {
    cursor: pointer;
}

#step-2 .select-option #dog-age,
#names,
#dog-age-months {
    border-radius: 10px;
}

.outer-box-btn {
    display: flex;
    justify-content: center;
    padding: 24px 0px 0px 0px;
    border-top: 1px solid rgb(217, 217, 217);
    margin-left: -48px;
    margin-right: -47px;
    gap: 38%;
}

.out-box-radio-button {
    padding-bottom: 15px;
    display: flex;
    column-gap: 16px;
    flex-wrap: wrap;
    row-gap: 8px;
}

.select-single-dropdown {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.outer-box-btn button svg {
    margin: 0 !important;
}

.out-box-radio-button p {
    border: 1px solid rgba(217, 217, 217, 1);
    padding: 17px 16px;
    width: 100%;
    max-width: 344px;
    border-radius: 10px;
    color: rgba(6, 2, 31, 0.3);
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.outer-radius {
    background-color: rgb(233, 234, 235);
    max-width: 40px;
    min-height: 40px;
    border-radius: 8px;
    width: 40px;
    align-items: center;
    margin: auto 150px;
    justify-content: center;
    display: flex;
    position: relative;
    z-index: 999;
}

.create-box-outer-radius {
    display: flex;
    justify-content: center;
    padding: 40px 0px 40px;
    gap: 16px;
    max-width: 1008px;
    margin: auto;
    width: 100%;
}

#step-9 .create-box-outer-radius {
    max-width: fit-content;
    padding: 0;
}

.bottom-active {
    text-decoration: underline;
}

.create-box-outer-radius .inside-radius-active {
    background-color: rgba(76, 76, 76, 1);
    max-width: 18px;
    min-height: 18px;
    border-radius: 50px;
    width: 24px;
}

.create-box-outer-radius .inside-radius,
.inside-radius-validate {
    border: 1.5px solid;
    max-width: 18px;
    min-height: 18px;
    border-radius: 50px;
    width: 24px;
}

.radius-container .active {
    text-align: center;
    font-family: "Instrument Sans";
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    padding-top: 15px;
    position: relative;
    z-index: 999;
}

#step-3 .step-check-content {
    gap: unset;
}

.radio-fill {
    position: relative;
}

#step-3 radio-fill::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #888;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

/* Inner filled circle when checked */
#step-3 radio-fill::after {
    content: "";
    position: absolute;
    left: 5px;
    top: calc(50% + 1px);
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #007BFF;
    /* Blue */
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show filled circle if checked */
#step-3 radio-fill::after:checked {
    opacity: 1;
}

/* Optional: Change border color when checked */
#step-3 .radio-fill::before:checked {
    border-color: #007BFF;
}

.radius-container .normal {
    text-align: center;
    font-family: "Instrument Sans";
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: rgb(202, 200, 200);
    padding-top: 15px;
    position: relative;
    z-index: 999;
}

#step-5 button:disabled {
    opacity: 1 !important;
    background-color: #9A9A9A;
}

.checkbox-data {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.no-padding {
    padding-top: 0px !important;
}

.step-3-validate label {
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #06021F !important;
    line-height: 28px !important;
}

.step-3-sub-title {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #06021F;
}

.bottom-title,
.outer-box-subheading,
.content-day,
.outer-box-bottom-content,
.bottom-sub-heading {
    color: rgba(76, 76, 76, 1);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

#step-5 .checkbox-data label {
    color: rgba(76, 76, 76, 1);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    padding: 0;
}

.outer-box-bottom-content {
    padding: 24px 56px 0px;
    text-align: center;
}

.outer.outer-box-bottom-content {
    padding: 20px 106px 0px;
    text-align: center;
}

.step-7-content-row {
    padding-top: 0;
}

#form-step-6 .premium-types label {
    font-weight: 400;
    max-width: 348px;
}

#step-7 .dog-gender input[type="radio"]:checked+label {
    background: #F1F5EC !important;
}

#step-3 .dog-profile-content .out-box-radio-button label,
#step-2 .dog-profile-content .decision-box label {
    font-weight: 400;
    color: #06021F4D;
}

#step-3 .dog-profile-content .out-box-radio-button input[type="radio"]:checked+label,
#step-2 .dog-profile-content .decision-box input[type="radio"]:checked+label {
    font-weight: 500;
    color: #06021F;
}

.content-box {
    text-align: center;
    width: 100%;
    max-width: 100%;
}

.outer-box-heading {
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
}

.outer-box-subheading {
    text-align: center;
    color: rgba(53, 53, 53, 1);
    padding: 10px 0px;
}

#step-6 .outer-box-subheading {
    padding: 4px 0px 24px;
}

.outer-box-col,
.outer-box-row-content {
    padding: 40px 40px 0px;
    background-color: rgb(241, 246, 246);
    border-radius: 24px;
}

#step-6 .outer-box-col {
    height: 306px;
}

#step-6 .content-box-weight {
    padding-top: 6px;
}

.outer-box-col1 img {
    margin: auto;
    display: flex;
    padding-top: 25px;
}

.create-box-outer #step-6 .sub-heading {
    padding: 20px 45px 30px;
}

.step-3-validate input[type=radio]:checked+.option2::after {
    opacity: 1;
}

/* Chrome, Edge, Safari */

progress::-webkit-progress-value {
    background-color: #fff;
    /* Color of the filled portion */
}

/* Firefox */
progress::-moz-progress-bar {
    background-color: #fff;
    /* Filled portion color */
    border-radius: 5px;
}

.outer-box-row-content {
    background-color: rgba(241, 245, 236, 1);
    border: 1px solid rgba(217, 217, 217, 1);

}

.outer-box-row-content {
    margin: 0 !important;
}

.outer-box-row {
    display: flex;
    justify-content: center;
}

.outer-box-row .content-box:nth-of-type(-n+2) {
    border-right: 1px solid #E9E9E9;
}

.content-box-weight,
.bottom-heading,
.acie-heading {
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
}

.bottom-heading {
    text-align: start;
}

.bottom-sub-heading {
    padding: 10px 0px;
}

.step-6-img-content {
    text-align: center;
    position: relative;
    bottom: 95px;
}

#step-6 .outer-box-row-content {
    margin-top: 24px !important;
    padding-bottom: 40px;
}

.acie-card.\.active-card {
    background-color: rgb(241, 246, 246);
    border: 1px solid rgb(0, 125, 89);
}

#step-3 .active-step {
    border: none;
    background-color: rgb(241, 246, 246);
}

.step-3-validate-step {
    background-color: rgb(241, 246, 246);
    border: 1px solid rgb(0, 125, 89);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px 0px 0px;
}

#step-7 .active-input {
    background-color: rgb(241, 246, 246);
    border: 1px solid rgb(0, 125, 89);
}

#step-2 .active-detail {
    background-color: rgb(241, 246, 246);
    border: 1px solid rgb(0, 125, 89);
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.step-6-img-content .step-6-green {
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: rgb(4, 120, 87);
}

.step-6-normal,
.create-box-outer #step-4 .bottom-heading,
.create-box-outer-check {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    margin-top: 0 !important;
}

#step-4 .bottom-heading {
    padding-bottom: 8px;
}

.create-box-outer #step-4 .card {
    width: 100%;
    max-width: 800px;
    gap: 0;
}

.outer-box-btn button svg {
    display: block;
    margin: auto;
    margin-left: 5px;
}

#step-4 .create-box-outer form {
    gap: 0 !important;
}

.bottom-content-btn {
    padding-top: 30px;
}

.step-check-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* padding: 20px 0px 30px 0px; */
}

.create-box-outer-check,
.create-box-outer-check-step-3 {
    padding: 12px 16px;
    border-radius: 10px;
}

#step-3 .bottom-heading {
    margin-bottom: 0;
    color: rgb(6, 2, 31);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    padding-bottom: 12px;
    font-family:"Instrument Sans",sans-serif;
}

#step-3 form,
#step-4 form,
#step-6 form {
    margin: 0;
}

#step-4 .option {
    height: 56px;
}

#step-6 form {
    gap: 0;
}

.create-box-outer-check,
.create-box-outer-check-step-3 {
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(217, 217, 217, 1);
}

#step-7 .saving-plan .plan-content {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

#step-7 .heading {
    margin-bottom: 12px;
}

.step-check-content .active,
.out-box-radio-button .active {
    background-color: rgb(241, 246, 246);
    border: 1px solid rgb(0, 125, 89);
}

.step-check-content .active svg {
    float: right;
}

#step-4 .create-box-outer-radius .inside-radius-active {
    background-color: transparent;
}

#step-7 .heading-shadow-basic {
    position: relative;
    left: 48px;
    bottom: 0;
    top: -25px;
    display: block;
    height: 0;
}

.create-box-outer #step-3 .card {
    width: 100%;
    max-width: 800px;
}

.create-box-outer-check-step-3 {
    display: flex;
    flex-direction: column;
}

.create-box-outer-check-step-3 {
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
}

.acie-card label {
    width: 100%;
    max-width: 344px;
    padding: 15px 24px;
    border-radius: 10px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.acie-content-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 24px;
}

#step-3 .acie-card svg {
    width: 100%;
    max-width: 132px;
}

#step-7 .card {
    width: 100%;
    max-width: 1040px;
    margin: auto;
}

#step-7 .radio-weeks {
    width: 100%;
}

.step-7-content-row {
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 24px 0px;
}

.step-7-content-box {
    padding: 20px 40px;;
    background-color: #F1F6F6;
    border-radius: 24px;
    border: 1px solid rgb(217, 217, 217);
}

.saving-plan {
    border-right: 1px solid #E9E9E9;
    width: 100%;
    padding: 10px;
}
#step-3 .card #form-step-3 .is-saved {
    padding-top: 8px;
}
#step-3 .acie-card span {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    color: rgba(6, 2, 31, 1);
}

#step-3 .acie-heading {
    margin-bottom: 0;
}

.apply-coupon-input .apply-btn:hover {
    background-color: #047857;
    color: #FFFFFF;
}

#step-1 .card-heading {
    margin-bottom: 0;
}

#step-3 .bottom-title {
    color: rgb(6, 2, 31);
}

.step-7-content-data {
    display: flex;
    gap: 24px;
    justify-content: center;
}

#step-7 .delivery-heading {
    font-family: Instrument Sans;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #06021F;
}

.step-7-btn {
    width: 100%;
    max-width: 816px;
    opacity: 1;
    border-radius: 10px;
    gap: 8px;
    padding: 14px 32px;
    background-color: #047857;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    margin-top: 24px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.step-7-btn:hover {
    color: #fff;
}

.step-7-input {
    width: 100%;
    max-width: 186px;
    border-radius: 10px;
    text-align: center;
    padding: 12px 24px;
    border: 1px solid #D9D9D9;
}

.content-data-wrapper {
    padding: 24px;
    background-color: #FFFFFF;
    border-radius: 16px;
    margin-bottom: 16px;
}

p.step-7-bottom-heading {
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    margin-top: 10px;
}

.add-cart-weight {
    display: flex;
    gap: 12px;
}

.card-content-heading,
.card-content-sub-heading {
    margin: 0;
}

.card-content-heading {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

.card-content-sub-heading a {
    font-weight: 500;
    font-size: 12px;
    color: #516350;
}

.cart-add-discard {
    display: flex;
    gap: 10px;
    padding: 4px;
    background-color: #F1F5EC;
    width: 100%;
    max-width: 95px;
    justify-content: center;
    border-radius: 8px;
    margin-top: 5px;
}

.step-8-content-wrapper {
    padding: 24px;
    background-color: rgba(241, 245, 236, 1);
    width: 100%;
    max-width: 472px;
    border-radius: 24px;
}

#form-step-2 label {
    position: relative;
    cursor: pointer;
    font-size: 16px;
    /* display: inline-block; */
}

#step-2 .weight-input {
    font-family: Instrument Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #06021F4D;
}

#step-2 .just-a-guess.checkbox-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0 0;
}

button.add-sibling svg {
    background: #047857;
    width: 20px;
    height: 20px;
    border-radius: 50px;
}

/* #step-2 .just-a-guess.checkbox-group input[type="checkbox"],
#step-5  input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color:#516350 ;
} */
#step-2 .just-a-guess.checkbox-group input[type="checkbox"],
#step-5 input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 16px;
    border: 1.5px solid #516350;
    background: #fff;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

#step-2 .just-a-guess.checkbox-group input[type="checkbox"]:checked,
#step-5 input[type="checkbox"]:checked {
    background: #516350 ;
}

#step-2 .just-a-guess.checkbox-group input[type="checkbox"]:checked::after,
#step-5 input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5.5px;
    top: 2.1px;
    width: 4.5px;
    height: 8.5px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

#step-2 .delete-btn {
    border: 1px solid #C0080833;
    background: #FFFFFF;
    padding: 12px 24px;
    font-family: 'Instrument Sans',sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0%;
    color: #C00808;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#step-2 .add-sibling {
    padding: 13px 24px;
    background-color: #F1F5EC;
    border: 1px solid #047857;
    border-radius: 10px;
    font-family: 'Instrument Sans',sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0%;
    color: #047857;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin: 0;
    text-transform: unset;
}

#step-2 .just-a-guess {
    font-family: Instrument Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #333239;
    padding: 0;
}

.step-8-coupon .coupon-data .checkout_coupon.woocommerce-form-coupon {
    margin: 0px 0px 10px 0px !important;
}

.steps .card {
    border-radius: 24px !important;
    padding: 48px;
}

#step-3 .outer-box-btn button svg {
    margin-left: 0;
    margin-right: 0;
}
#step-overview {
    padding-top: 40px;
}
.coupon-sub-head,
.coupon-main-head {
    margin-bottom: 0;
}
#step-7 {
    padding: 64px 0 78px;
}
.hide-progressbar .wc-progressbar {
    display: none;
}
.cart-add-discard input[type="number"]::marker {
    display: none;
}

.steps .heading-shadow,
.heading-shadow-basic {
    display: flex;
    text-align: center;
}

.add-cart-card {
    padding: 16px;
    border-bottom: 1px solid #D9D9D9;
    display: flex;
    justify-content: space-between;
}

.add-cart-card:last-child {
    border-bottom: none !important;
}

#step-8 .add-product {
    background-color: #ffff;
    border-radius: 16px;
}

/* 
#step-8 .btn-upd-cart-form {
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 1);
    padding: 12px 32px;
    max-width: 179px;
    height: 56px;
    border-radius: 10px;
    gap: 8px;
    width: 100%;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: rgba(6, 2, 31, 1);
    border: 1px solid rgba(4, 120, 87, 1);
    display: flex;
    justify-content: center;
    align-items: center;
} */

#step-8 .btn-upd-cart-form {
    margin-top: 20px;
    background-color: #047857;
    padding: 12px 32px;
    max-width: 179px;
    height: 56px;
    border-radius: 10px;
    gap: 8px;
    width: 100%;
    /* font-weight: 500; */
    /* font-size: 18px; */
    line-height: 28px;
    /* color: rgba(6, 2, 31, 1); */
    border: 1px solid rgba(4, 120, 87, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}

#step-2 .dog-profile-block.is-saved:not(:first-child) {
    margin-top: 24px;
}   

.add-cart-heading-content {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    align-items: center;
}

#step-2 .dog-age-type label,
#step-2 .out-box-radio-button label {
    font-weight: 400;
    color: #06021F;
}

#step-2 .out-box-radio-button input[type="radio"]:checked+label {
    font-weight: 500; 
}

.add-cart-heading-content .main-heading {
    font-size: 24px;
    line-height: 32px;
    color: rgba(6, 2, 31, 1);
}

.add-cart-heading-content .main-heading.cart-item-count {
    font-size: 18px;
    font-weight: 600;
    font-style: SemiBold;
    line-height: 28px;
    letter-spacing: 0%;
    padding-bottom: 2px;
}

.back-btn {
    background-color: #fff !important;
    color: rgba(6, 2, 31, 1) !important;
    font-weight: 500 !important;
    align-items: center;
    gap: 8px;
}

#step-2 .select-option select::-webkit-scrollbar-button {}

.custom-select {
    position: relative;
}

select::marker {
    appearance: none;
}

.custom-select select {
    width: 100%;
    appearance: none;
    cursor: pointer;
}

/* Add custom icon*/
/* .custom-select::after {
    content: ""; 
    font-size: 14px;
    position: absolute;
    right: 10px;
    top: 50%;
    pointer-events: none; 
    display: inline-block;
    width: 24px !important;
    height: 24px !important;
    background: url('data:image/svg+xml;utf8,<svg fill="%23000" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16.003 18.626l7.081-7.081L25 13.46l-8.997 8.998-9.003-9 1.917-1.916z"/></svg>') no-repeat center;
    background-size: contain;  */

#step-2 select:not([size]):not([multiple]) {
    background-size: 24px 24px !important;
}

#step-9 small {
    font-size: 85%;
}

#step-8 .card {
    width: 100%;
    max-width: 1080px;
    align-items: center;
    margin: auto;
    z-index: 999;
    position: relative;
    top: 64px;
}

.step-8-content-row {
    display: flex;
    gap: 32px;
}

#step-8 progress#file {
    bottom: 94px !important;
    border: 1px solid rgba(255, 255, 255, .3);
    background-color: transparent !important;
}

.step-8-instruction svg {
    margin-right: 2px;
}

#step-8 progress {
    border: 1px solid rgba(255, 255, 255, .3);
}

#step-8 .discount-data {
    display: flex;
    border-bottom: 1px solid #d9d9d9;
    padding: 12px 0;
    gap: 12px;
}

a.step-8-instructions {
    text-decoration: underline;
    color: #000000;
    font-weight: 500;
    text-underline-position: from-font;
}

.create-box-outer #step-9 {
    top: 0 !important;
}
#step-4 .sub-heading{
    color:rgba(51, 50, 57, 1);
}
.radius-container .active {
    margin-bottom: 0 !important;
}

.discount-green-text {
    margin: 0 !important;
    margin: 20px 0px 15px 0px !important;
}

#step-8 discount-head {
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

#step-9 .guest-heading {
    padding-bottom: 20px;
    margin: 0;
}

#step-9 .continue-guest {
    gap: 0 !important;
}

#step-9 .guest-sub-heading {
    margin: 0 !important;
}

#step-9 form {
    margin: 0;
    gap: 0 !important;
}

#step-9 label {
    padding-bottom: 6px;
    padding-left: 0;
}

.apply-coupon-input label {
    padding: 0;
}

#step-9 .already-account {
    margin: 0 !important;
}

#step-9 p.already-account {
    padding: 0px 0px 24px;
}

#step-9 .vertical-form-cont {
    gap: 0 !important;
}

.step-8-summary {
    max-width: 480px;
    width: 100%;
    border-radius: 16px;
    border-width: 1px;
    opacity: 1;
    padding: 24px;
    border: 1px solid #D9D9D9;
    gap: 6px;
    display: flex;
    flex-direction: column;
    height: fit-content;
}

.discount-heading {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

#step-8 .discount-price {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

#step-8 .discount-data {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #D9D9D9;
    padding: 12px 0px;
}

#step-8 .discount-green-text {
    background-color: #F1F5EC;
    border-radius: 10px;
    padding: 16px 10px;
    width: 100%;
    border: 1px solid #047857;
    margin-top: 10px;
    color: #047857;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    margin: 11px 0px 1px 0px !important;
}

#step-8 .card-content-sub-heading a {
    display: flex;
    align-items: center;
    line-height: 16px;
    width: fit-content;
    -webkit-width: fit-content;
    border-bottom: 0.5px solid #516350;
    text-decoration: none;
}

#step-8 .card-content-heading a {
    text-decoration: none;
}


#step-8 .coupon-sub-head,
.proceed-btn,
.share-basket {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding-bottom: 4px;
}

.step-8-coupon {
    display: flex;
    justify-content: space-between;
    background-color: #F1F6F6;
    border-radius: 8px;
    justify-content: space-between;
    opacity: 1;
    padding: 16px 0;
    /* height: 56px; */
    align-items: center;
}

#step-9 .card {
    margin-top: 0 !important;
    padding: 48px !important;
}

.jet-checkboxes-list-wrapper .jet-checkboxes-list__item {
    padding-left: 0;
}

#step-9 #custom_checkout_field {
    display: none;
}

#step-9 .step-9-form-container {
    padding: 0 !important;
}

#step-8 .coupon-data {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    color: #047857;
    border-bottom: 1px solid #047857;
}

.step-8-price-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
}

.step-8-instruction {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    margin:0 0 10px 0;
}

#step-8 .proceed-btn {
    background-color: #047857;
    border-radius: 10px;
    opacity: 1;
    gap: 8px;
    padding: 14px 32px;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: #ffff;
    border: none;
    align-items: center;
}

#step-7 #noThanks {
    margin-bottom: 0;
    padding-bottom: 20px;
}

.step-7-btn:hover {
    background-color: #047857;
}

#step-7 .dog-gender label {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: rgb(0, 0, 0);
    border: 1px solid #D9D9D9;
    justify-content: center;
    border-radius: 10px;
    height: 48px;
}

#step-3 .dog-gender-label {
    position: relative;
}

#step-3 .card-main-content {
    padding-bottom: 0;
}

#step-8 .share-basket {
    border-radius: 10px;
    opacity: 1;
    gap: 8px;
    padding: 13px 32px;
    font-weight: 500;
    font-size: 18px;
    color: #333239;
    line-height: 28px;
    border: 1px solid #D9D9D9;
    align-items: center;
}

.step-8-button {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#step-8 .side-heading {
    color: #047857;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

#step-8 .trash-main-heading {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    text-decoration: line-through;
    color: #333239;
}

#step-8 .trash-sub-heading {
    color: #047857;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
}

#step-8 .coupon-main-head {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    color: #06021F;
    line-height: 20px;
}

#step-8 .cart-add-discard svg {
    padding: 4px;
    background-color: #FFFFFF;
    border-radius: 5px;
}

#step-8 .cart-add-discard .input-text {
    height: fit-content;
}

#step-8 .add-cart-trash-data {
    gap: 16px;
}

#step-8 .discard,
.cart-add-discard .add-product {
    margin: auto;
    display: flex;
}

.step-check-content input[type=radio]:checked+label svg {
    color: rgba(4, 120, 87, 1);
}

#step-2 .delete-btn img {
    width: 24px;
    height: 24px;
}

#step-3 .step-check-content label {
    padding: 16px 24px;
    gap: 16px;
}

#step-8 .add-content {
    font-size: 16px;
    font-weight: 600;
}

#step-1 .heading {
    margin-bottom: 12px;
    padding-top: 24px;
}

#step-1 .heading-shadow-basic {
    position: relative;
    left: 145px;
    top: -18px;
    bottom: 0px;
    height: 0;
}

#step-2 .heading-shadow-basic {
    position: relative;
    left: 154px;
    bottom: 0px;
    top: 0px;
}

#step-5 .border-light {
    border: 1px solid #599c80;
}

.dog-old {
    padding-top: 0px !important;
}

#step-2 .out-box-radio-button {
    padding-bottom: 24px;
    margin-bottom: 0;
}

.dog-gender label,
.out-box-radio-button label {
    padding: 16px !important;
}

#step-4 .heading-shadow {
    position: relative;
    bottom: 124px;
    left: 346px;
    display: flex;
    height: 0;
}

#step-4 .sub-heading {
    text-align: center;
    padding: 10px 0px;
    margin-top: 12px;
}

#step-6 .heading-shadow {
    position: relative;
    left: 285px;
    top: -5px;
}

#step-5 .heading-shadow {
    position: relative;
    left: 285px;
    top: -17px;
    height: 0;
}
#step-5 .heading{
    margin-bottom: 12px;
}
#step-5 #step-5-label {
    padding-bottom: 24px;
}

#step-5 #step-5-label label {
    padding-bottom: 0px;
}

#step-5 #form-step-5 {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    margin: 0;
}

#step-5 .checkbox-data {
    padding: 24px 0px;
    gap: 12px;
    align-items:flex-start;
}

#step-5 .bottom-title {
    font-family: "Instrument Sans",sans-serif !important;
    padding: 0px 0px 24px;
    color: rgb(6, 2, 31);
    margin: 0;
    text-underline-position: under;
}

#step-3 .step-3-validate input[type="radio"]:checked+label {
    font-weight: 600 !important;
}
#step-3 .heading{
    margin-bottom: 12px;
}
#step-3 .heading-shadow {
    position: relative;
    left: 0;
    top: -18px;
    width: 96%;
    display: flex;
    justify-content: end;
    height: 0;
}

#step-8 .heading-shadow-basic {
    position: relative;
    left: 550px;
    bottom: -5px;
}

.acie-card input[type="checkbox"]+label,
#step-4 .premium-types input[type="checkbox"]+label,
#step-6 .premium-types input[type="checkbox"]+label {
    margin: 0 !important;
}

#step-5 .inside-radius,
#step-6 .inside-radius-validate,
#step-4 .inside-radius-active,
#step-3 .inside-radius-validate {
    border: none;
    align-items: center;
    display: flex;
}

.wave-bg-bottom,
.done-food-cont-left,
.dog-bone-top-left,
.dog-bone-top-right,
.dog-paw-top-left {
    display: none;
}

.create-box-outer.dog-side .dog-side-background {
    display: block;
    position: absolute;
    width: clamp(0px, calc(50vw - 400px - 30px), 485px);
    aspect-ratio: 485 / 496;
    right: 0;
    bottom: 95px;
    opacity: 1;
}
/* body:has(#step-1) .dog-side-background {
    display: none;
} */

#step-form-bg-elements{
    position: relative;
}

.create-box-outer.dog-bone-left,
.create-box-outer.done-food-cont,
.create-box-outer.dog-bone,
.create-box-outer.dog-paw {
    position: relative;
}

.create-box-outer.dog-paw .dog-paw-top-left {
    display: block;
    position: absolute;
    top: 20%;
    left: 17%;
    color: white;
}

.create-box-outer.dog-bone .dog-bone-top-right {
    display: block;
    position: absolute;
    top: 14%;
    right: 5%;
}

.create-box-outer.dog-bone-left .dog-bone-top-left {
    display: block;
    position: absolute;
    top: 34%;
    left: 15%;
}

.create-box-outer.done-food-cont .done-food-cont-left {
    display: block;
    position: absolute;
    bottom: 14%;
    left: 8%;
    z-index: 2;
}

#step-8 .dog-cart-wrapper .is-closed {
    padding-bottom: 12px;
}

.create-box-outer.wave-bottom .wave-bg-bottom {
    display: block;
    position: relative;
}

#step-12 .woocommerce-Price-amount .amount {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    color: rgb(6, 2, 31);
}

#step-12 .price-container-heading .amount {
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    margin: 0 !important;
}

.create-box-outer.wave-bottom .wave-bg-bottom::after {
    content: '';
    background-image: url("../images/Bottom bg.png");
    background-position: top;
    background-repeat: no-repeat;
    padding: 62px 0px;
    width: 100%;
    position: absolute;
    background-size: cover;
    bottom: 0px;
    min-height: 274px;
    z-index: 1;
}

#form-step-7 {
    margin-bottom: 0;
}

#form-step-7 .content-data-wrapper {
    border: 1px solid #D9D9D9;
}

#form-step-7 .content-data-wrapper .dog-gender {
    flex-wrap: unset;
}

.saving-plan-no-border {
    border: none;
}

#step-8 .add-cart-heading-content .main-heading {
    font-weight: 600;
}

#step-8 .product-title-cont-cart {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#step-8 .cart-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vertical-form-cont {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#step-6 .bottom-sub-heading {
    color: #06021F;
}

.wrap-vertical-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wrap-vertical-form input[type="text"],
.wrap-vertical-form input[type="email"],
.wrap-vertical-form input[type="tel"],
.wrap-vertical-form input[type="password"] {
    background-color: #fff;
    border-radius: 10px;
    border-color: #E7E7E7;
}

/* Container for the password input and the toggle icon */
.wrap-vertical-form .password-container {
    position: relative;
    width: 100%;
}

/* Style for the password input field */
.wrap-vertical-form .password-container input {
    width: 100%;
    padding-right: 30px;
    /* Space for the icon */
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#step-9 input[type="email"],
#step-9 input[type="password"] {
    max-width: 100%;
}

/* Style for the toggle icon (eye icon) */
.wrap-vertical-form .password-container .toggle-password {
    position: absolute;
    right: 15px;
    top: 49%;
    cursor: pointer;
    font-size: 20px;
    user-select: none;
}

/* Optional: Style for the eye icon when the password is visible */
.wrap-vertical-form .password-container .toggle-password.visible {
    color: #527A75;
}

/* Optional: Style for the eye icon when the password is hidden */
.wrap-vertical-form .password-container .toggle-password.hidden {
    color: #ccc;
}

.consent-box-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0;
}

.consent-box-wrapper .consent-box {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    align-items: baseline;
}

.checkout-review-order-table-wrapper table tr {
    border-bottom: 1px solid #E5E5E5 !important;
    border-top: none !important;
}

.checkout-review-order-table-wrapper table td,
.checkout-review-order-table-wrapper table th {
    border-bottom: none !important;
}

#step-9 .account-page-container .account-page-my-form {
    margin-top: 0;
}

.wcsatt-add-cart-to-subscription-form {
    display: none;
}

#step-9 .payment_box.payment_method_cod {
    display: none;
}

.apply-coupon-input {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

#step-9 .wc_payment_method.wc_payment_method.payment_method_cod {
    padding: 16px !important;
    display: flex;
    align-items: center;
    gap: 0px !important;
}

#step-9 .apply-coupon-input input[type=text] {
    max-width: 100% !important;
}


.apply-coupon-input .apply-btn {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 12px 12px;
}

.page-id-16384 #cfw-side-cart-floating-button .cfw-side-cart-floating-button-anchor {
    display: none !important;
}

button.add-sibling {
    background-color: #F1F5EC;
    padding: 23px 38px;
    border-radius: 10px;
    border: 1px solid #047857;
    color: #047857;
    margin-top: 15px;
}
#step-2 .profile-actions {
    display: flex;
    justify-content: space-between;
}
button.add-sibling:hover {
    background-color: #F1F5EC;
    padding: 23px 38px;
    border-radius: 10px;
    border: 1px solid #047857;
    color: #047857;
}

#step-2 .card {
    border-radius: 24px;
}

#step-4 .step-check-content {
    gap: 16px;
}

#step-4 .premium-types.checkbox-group {
    padding-bottom: 12px;
}

/* profile section*/
#step-overview .container {
    position: relative;
    z-index: 999;
    background: #FFF;
    padding: 48px 43px;
    max-width: 800px;
    width: 100%;
    border-radius: 24px;
    height: 100%;
    margin-bottom: 30px;
}

/* #step-overview {
    padding: 40px 0;
} */

.page-header {
    text-align: center;
    margin-bottom: 24px;
}

.page-header h1 {
    margin: 0 0 8px 0;
    color: rgba(6, 2, 31, 1);
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    text-align: center;
}

.page-header p {
    color: rgba(6, 2, 31, 1);
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 40px;
}

.profile-card {
    overflow: hidden;
}

.accordion-item {
    margin-bottom: 24px;
    border-radius: 12px;
}



/* Header (Clickable part) */
.accordion-header {
    background-color: rgb(241, 245, 236);
    padding: 15px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 8px;
}

.accordion-title {
    color: rgba(6, 2, 31, 1);
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0%;
}

.accordion-icon {
    transition: transform 0.3s ease;
    color: #555;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    overflow: hidden;
    padding: 16px 24px;
    transition: all 0.6s ease-in-out;
}

.accordion-item.active .accordion-content {
    max-height: 500px;
    overflow-y: scroll;
}

.accordion-item.active .accordion-content {
    display: block;
}
#step-overview .accordion-item:not(:first-of-type){
    border: 1px solid rgba(0, 0, 0, .125) ;
}
.data-row {
    padding: 12px 0;
    border-bottom: 1px solid rgba(229, 231, 235, 1);
    display: flex;
    flex-direction: column;
    align-items: start;
}

.data-row:last-of-type {
    border-bottom: none;
}

.label {
    display: block;
    color: #333239;
    padding-bottom: 2px;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.value {
    display: block;
    color: rgba(6, 2, 31, 1);
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.edit-container {
    display: flex;
    justify-content: flex-end;
    margin: 16px 0 0;
}

#step-overview .profile-card .accordion-item {
    border-radius: 12px;
    overflow: hidden;
}

#step-overview .profile-card .btn-edit-profile {
    background: #F1F6F6;
    border: 1px solid rgba(4, 120, 87, 1);
    display: flex;
    align-items: center;
    cursor: pointer;
    max-width: fit-content;
    height: 48px;
    border-radius: 10px;
    padding: 12px 24px;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    width: 100%;
    color: rgba(4, 120, 87, 1);
    gap: 8px;
}

.btn-edit:hover {
    background-color: #f0fdf4;
}

#step-overview .profile-card .accordion-item:last-of-type {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

@media(max-width:1432px) {

    .create-box-outer #step-2 .card,
    .create-box-outer #step-5 .card,
    .create-box-outer #step-6 .card,
    .create-box-outer #step-3 .card,
    .create-box-outer #step-5 .card,
    .create-box-outer #step-7 .card,
    .create-box-outer #step-8 .card,
    .create-box-outer #step-4 .card {
        width: unset;
        margin: auto;
        border-radius: 24px;
    }

    .card-row {
        gap: 32px;
        flex-wrap: wrap;

    }

    #step-1 .card-row {
        align-items: flex-start;
        justify-content: space-between;

    }
}
@media(max-width:1200px) {
    .create-box-outer #step-1 .card, #step-8 .card {
        width: 100%;
        max-width: 980px;
    }
    .create-box-outer #step-7 .card{
        max-width: 810px;
    }
}

@media(max-width:1024px) {
    .create-box-outer .outer-radius {
        margin: auto 80px;
    }

    #step-8 .heading-shadow-basic {
        position: relative;
        left: 270px;
        bottom: -5px;
    }

    .create-box-outer.dog-side .dog-side-background{
        position: relative;
        width: clamp(140px, 37.5vw, 250px);
        bottom: 12px;
        left: 60%;
    }

    /* .dog-side-background img {
        width: 100%;
        max-width: 200px;
        left: 450px;
        top: 15px
    } */

    #step-2,
    #step-5,
    #step-6,
    #step-4,
    #step-3 {
        padding: 0px 0px 30px 0px;
    }

    #step-1::before {
        bottom: 766px;
    }

    #step-8::before {
        bottom: 980px;

    }

    #step-7::before {
        bottom: 454px;
    }

    .create-box-outer #step-1 .card,
    #step-8 .card {
        width: 100%;
        max-width: 810px;
    }

    #step-2 progress,
    #step-3 progress,
    #step-4 progress,
    #step-5 progress {
        max-width: 645px;
        left: 0px;
        bottom: 93px;
    }

    #step-6 progress {
        max-width: 563px;
        left: 2px;
        bottom: 106px;
    }

    #step-8 progress#file {
        width: 100%;
        max-width: 545px !important;
    }

    .create-box-outer.done-food-cont .done-food-cont-left{
        bottom: 1%;
    }
    .create-box-outer.done-food-cont .done-food-cont-left svg{
        width: 120px;
        height: 55px;
    }
}

@media(max-width:860px) {

    .create-box-outer #step-1 .card,
    .create-box-outer #step-2 .card,
    .create-box-outer #step-5 .card,
    .create-box-outer #step-6 .card,
    .create-box-outer #step-3 .card,
    .create-box-outer #step-5 .card,
    .create-box-outer #step-7 .card,
    .create-box-outer #step-8 .card,
    .create-box-outer #step-4 .card {
        width: unset;
        margin: 16px;
    }

    #step-2 progress,
    #step-3 progress,
    #step-4 progress,
    #step-5 progress {
        max-width: 520px;
        left: 0px;
        bottom: 93px;
    }

    #step-6 progress {
        max-width: 563px;
        left: 1px;
        bottom: 106px;
    }

    /* .dog-side-background img {
        width: 100%;
        max-width: 200px;
        left: 360px;
        top: 15px
    } */

    #step-7::before {
        bottom: 483px;
    }

    #step-2,
    #step-5,
    #step-6,
    #step-4,
    #step-3 {
        padding: 0px 0px 30px 0px;
    }

    .outer-box-btn {
        gap: 35%;
    }

    #step-1,
    #step-8 {
        padding: 35px 0px 100px 0px;
    }

    #step-7 {
        padding: 51px 0px 100px 0px;
    }

    .out-box-radio-button {
        gap: 12px;
    }
}
@media (min-width: 768px) and (max-width:1024px){
#step-1 .card-row{
    gap: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.create-box-outer #step-1 .card{
    padding: 40px 30px;
    min-height: unset;
}
#step-1 .card-col-2,#step-1 .card-col-1{
    max-width: unset;
}
}
@media (min-width: 768px) and (max-width: 860px) {
    .dog-age-type .dog-gender-label{
        max-width: 100%;
    }
    .out-box-radio-button, .dog-gender {
        flex-wrap: nowrap;
    }
    .dog-gender-label::after {
        left: unset;
        right: 6.6%;
    }
    .premium-types label{
        flex: 0 0 calc(50% - 4px);
    }
    .acie-content-row .acie-card{
        flex: 0 0 calc(50% - 8px);
    }
}

@media(max-width:768px) {
    .create-box-outer .steps .card {
        width: unset;
        max-width: 100%;
        margin: 30px;
    }

  #step-6  #form-step-6 .premium-types{
        padding-bottom: 20px;
    }
        input[type="checkbox"]#same_as_delivery{
        width: 14px;
        height: 14px;
         border: 1px solid #4C4C4C;
}
#step-3 .card #form-step-3 .is-saved{
    padding-top: 0;
}
    input[type="checkbox"]#same_as_delivery:checked::after {
        left: 4.5px;
    top: 1.2px;
    width: 3.5px;
    height: 7.5px;
    }
   
    #step-overview{
        padding: 24px 0;
    }
    #step-2 .ad-1 {
        width: 100%;
        margin: 0;
    }

    #step-2 .adult-age-box .ad-1 input {
        margin: 0;
    }

    #step-2 .adult-age-box .ad-1 span {
        top: 50%;
    }

    #step-2 .adult-age-box {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 12px;
    }
    .add-cart-heading-content{
        flex-direction: column;
        align-items: flex-start;
    }
    .add-cart-heading-content.user-data-edit{
        flex-direction: row;
        /* align-items: flex-start; */
    }

    #step-8 .side-heading{
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    #step-8 .coupon-main-head{
        line-height: 20px;
    }

    .wc-progressbar {
        padding: 0 50px;
    }

    #createbox-progress-wrapper .step-label {
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
    }

    .progress-container {
        padding: 32px 0;
    }

    #createbox-progress-wrapper .step {
        max-width: 32px;
    }

    #step-1 .sub-heading {
        font-size: 14px;
        line-height: 20px;
    }
    .page-header p{
        margin-bottom: 24px;
    }
    #step-4 .premium-types label,
    #step-4 .step-check-content label {
        font-weight: 400;
        line-height: 24px;
    }

    #step-2 .add-sibling,
    #step-2 .delete-btn {
        padding: 11px 17px;
        border-radius: 10px;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0%;
        gap: 8px;
        width: 100%;
        max-width: fit-content;
    }

    #form-step-5 input[type="text"],
    #step-5 .phone-numb {
        height: 48px;
    }

    #step-2 .dog-profile-block.is-saved {
        margin-top: 16px;
    }

    .form-adult-senior-fields input[type="number"] {
        height: 48px;
    }

    .create-box-outer .steps .heading {
        font-size: 24px;
        line-height: 32px;
        padding-bottom: 12px;
    }

    .step-3-validate label {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    #step-3 .step-check-content label {
        padding: 16px 24px;
        gap: 1px;
    }
    .acie-card svg {
        margin-right: 24px;
    }
    .outer-box-btn .active,
    .outer-box-btn .back-btn {
        margin: 0px 16px
    }

    #step-9 .add-cart-heading-content .main-heading.cart-item-count {
        font-size: 16px;
        margin: 0;
        line-height: 24px;
        padding-bottom: 0;
    }

    .card-row .card-col-1 img,
    .card-col-2 img {
        width: 100%;
        max-width: 60px;
        max-height: 60px;
        padding-bottom: 6px;
    }

    .card-col-1,
    .card-col-2 {
        gap: 8px;
        max-width: 100% !important;
    }

    .dog-gender-label::after {
        right: 23px;
        left: unset !important;
    }

    .outer-box-btn {
        gap: 10%;
        margin-left: -16px;
        margin-right: -16px;
    }
    

    #step-2 .card,
    #step-3 .card,
    #step-2 .card,
    #step-4 .card,
    #step-5 .card,
    #step-6 .card,
    #step-7 .card,
    #step-8 .card {
        padding: 16px;
        border-radius: 16px !;
    }

    /* .dog-side-background img {
        left: 310px;
        top: -157px;
    } */
#step-2 .profile-actions {
    display: flex;
    justify-content: start;
    gap: 8px;
    flex-direction: row-reverse;
}
    #step-9 .apply-coupon-input .apply-btn {
        height: 48px;
    }

    #step-1::before {
        bottom: 680px;

    }

    #step-7::before {
        bottom: 635px;
    }

    #step-5 #file {
        border: 1px solid rgba(255, 255, 255, 0.9);
    }

    .banner-btn,
    .step-7-btn {
        font-size: 16px;
        margin: 25px auto 0;

    }

    #step-7 .content-data-wrapper {
        margin: 12px 0 0;
        padding: 16px;
    }

    #step-7 #noThanks {
        padding-top: 16px;
    }

    .card-main-content img {
        max-width: 77px;
        height: 96px;
        width: 100%;
    }

    #form-step-7 .content-data-wrapper .dog-gender {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 16px;
    }

    #step-8::before {
        bottom: 1445px;
    }

    #form-step-5 label {
        font-size: 14px;
    }

    .card-row {
        gap: 32px;
        flex-wrap: wrap;
    }

    #step-5 .checkbox-data label {
        font-size: 12px;
    }

    #step-5 .bottom-title {
        font-weight: 500;
        padding: 0 0 20px;
        line-height: 16px;
    }

    #step-3 .step-3-validate {
        gap: 12px;
    }

    #step-1 .heading-shadow-basic {
        position: relative;
        left: 70px;
        top: -12px;
    }

    #step-1 .heading {
        margin-bottom: 0;
        padding-top: 16px;
    }

    #step-6 .heading-shadow {
        left: 215px;
        top: 0px;
        height: 0;
    }

    .acie-card label {
        max-width: unset;
    }

    .create-box-outer #step-1 .card,
    .create-box-outer #step-2 .card,
    .create-box-outer #step-5 .card,
    .create-box-outer #step-6 .card,
    .create-box-outer #step-3 .card,
    .create-box-outer #step-5 .card,
    .create-box-outer #step-7 .card,
    .create-box-outer #step-8 .card,
    .create-box-outer #step-4 .card {
        width: unset;
        max-width: 700px;
        margin: auto 35px;
    }

    .outer-box-btn button {
        font-weight: 700;
        font-size: 16px;
    }

    .out-box-radio-button {
        gap: 16px;
    }

    #step-3 .step-3-validate.checkbox-group label {
        font-size: 16px;
    }

    .active-premium-types {
        max-width: 296px;
    }

    .acie-card {
        width: 100%;
    }

    .step-8-content-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .step-7-content-row {
        flex-wrap: wrap;
    }

    .step-7-input {
        padding: 12px 20px;
    }

    .step-8-summary {
        width: 100%;
        max-width: 100%;
    }

    .acie-card {
        gap: 32px;
    }

    .dashboard-box-top .account-details-form .btn-save,
    .account-details-form .btn-change {
        height: 40px;
    }

    .download-invoice-btn a {
        height: 40px;
        width: fit-content;
        padding: 12px 12px 12px 20px;
    }

    #step-8 .heading-shadow-basic {
        left: 225px;
        bottom: 2px;
        text-align: center;
        height: 0;
    }

    #step-7 .heading-shadow-basic {
        left: 45px;
        bottom: -5px;
        top: -18px
    }

    #step-3 .heading-shadow {
        /* left: 110px;
        bottom: -10px;
        text-align: center;
        display: inline; */
        top: -23px;
    }

    .mt-4 {
        margin: 0;
    }

    #step-4 .heading-shadow {
        bottom: -8px;
        text-align: center;
        left: 200px;
        top: -11px;
    }

    #step-4 .option {
        height: 48px;
        font-size: 16px;
    }

    .bottom-content-btn {
        padding: 0;
    }

    #createbox-progress-wrapper .icon-box {
        max-width: 32px;
        height: 32px;
        border-radius: 6px;
    }

    .create-box-outer .steps label,
    .create-box-outer,
    #step-4 .step-check-content .bottom-heading,
    #step-3 .step-check-content .bottom-heading,
    .step-3-sub-title {
        font-size: 14px;
        width: 100%;
        max-width: unset;
        line-height: 20px;
    }

    .outer-box-btn {
        padding: 20px 0px 0px 0px;
    }

    .premium-types label {
        max-width: unset;
    }

    #step-2 progress,
    #step-3 progress,
    #step-4 progress,
    #step-5 progress {
        max-width: 485px;
        left: 0px;
        bottom: 92px;
    }

    #step-4 label {
        height: 48px;
    }

    #step-6 progress {
        left: 0px;
        bottom: 77px;
    }

    #step-9 p.already-account {
        padding: 0 0 16px;
    }

    #step-9 .consent-box-wrapper {
        margin: 6px 0 10px;
    }

    #step-9 .woocommerce-Price-amount bdi {
        line-height: 26px;
        font-size: 18px;
    }

    .create-box-outer .outer-radius {
        margin: auto 52px;
    }

    #step-4 label {
        height: 48px;
    }

    #step-5 .heading-shadow {
        left: 121px;
        top: -15px;
    }

    .create-box-outer.wave-bottom .wave-bg-bottom::after {
        min-height: 79px;
    }

    #step-2 .heading-shadow-basic {
        left: 90px;
        bottom: 0px;
        top: -12px;
        height: 0;
    }

    #step-2 .just-a-guess {
        font-size: 14px;
        line-height: 20px;
    }

    #step-3 .heading-shadow svg {
        max-width: 80px;
    }

    .done-food-cont-left svg {
        width: 63px;
        height: 31px;
    }

    #step-6 .done-food-cont-left {
        bottom: 4%;
        left: 10%;
    }

    #step-6 .dog-side-background img {
        left: 205px;
    }

    .steps .card-content {
        margin: 0 !important;
    }

    .saving-plan svg {
        width: 100%;
        max-width: 48px;
        min-height: 48px;
    }

    #step-8 .discount-green-text {
        font-size: 14px;
        align-items: center;
        margin: 0 !important;
        margin-top: 14px !important;
    }

    .apply-coupon {
        height: fit-content;
        margin-top: 12px;
    }

    .apply-coupon-input input[type="text"] {
        margin: 0;
    }

    #step-8 .apply-coupon-input {
        gap: 12px;
    }

    .create-box-outer #step-9 .card {
        padding: 16px !important;
        margin-top: 16px !important;
    }

    

    #step-9 .wc_payment_method.payment_method_stripe_googlepay.wc-stripe-no-desc {
        height: 56px;
        display: flex;
    }

    .hero-dogbox-wrapper img {
        width: 78px;
        height: 81px;
        margin-bottom: 16px;
    }

    #step-9 .my-form-container {
        background-color: rgb(241, 246, 246);
        padding: 16px !important;
        border-radius: 16px !important;
        border: 1px solid rgb(217, 217, 217);
    }

    .step-8-add-cart .add-cart-card {
        padding: 12px;
    }

    #step-overview .container {
        padding: 20px 16px;
        border-radius: 16px;
    }
    .step-8-coupon{
        padding: 0;
    }
    #step-overview .container .page-header h1 {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 12px;
    }

    #step-overview .container .accordion-header {
        padding: 12px 16px;
    }

    #step-overview .container .accordion-title {
        font-size: 18px;
        line-height: 26px;
    }

    #step-overview .container .accordion-content {
        padding: 4px 16px 16px;
    }

   #step-overview .profile-card .btn-edit-profile {
    max-width: fit-content;
    padding: 12px 23px;
    gap: 8px;
}

    .accordion-item {
        margin-bottom: 20px;
    }

    #step-3 .dog-profile-header {
        margin-bottom: 24px;
    }

    .acie-content-row {
        padding-bottom: 20px;
        gap: 12px;
    }
    #step-9 .heading{
        padding-bottom: 0;
    }
}

@media(max-width:560px) {
    .create-box-outer .steps .heading {
        font-size: 24px;
    }

    .create-box-outer.dog-side .dog-side-background{
        left: 50%;
    }

    .meal-list-items .meal-details {
        align-items: flex-start;
    }

    .first-account .heading-arrow-btn {
        width: 32px;
        height: 32px;
    }

    #step-9 .cart-subtotal {
        border-top: none !important;
    }

    #step-8 .card {
        top: 24px;
    }

    .page-id-16384 .mobile-nav-container {
        display: block !important;
    }

    .page-id-16381 .mobile-nav-container {
        display: block !important;
    }

    .page-id-16381 .mobile-nav-container {
        display: none !important;
    }

    #b9uldtg2r3ns1765447946405.widget-visible {
        display: none !important;
    }

    #step-7 .step-7-content-box {
        padding: 0 16px 16px;
        margin: 0;
        border-radius: 16px;
    }

    #step-7 .dog-gender input[type="radio"]:checked+label {
        background: #F1F5EC !important;
    }

    #step-7 .saving-plan .plan-content {
        padding-top: 0;
    }

    #step-7 .plan-content {
        padding: 0;
        margin: 0;
    }

    .outer-box-btn {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .outer-box-btn .active,
    .outer-box-btn .back-btn {
        margin: 0px 16px
    }

    .outer-box-btn {
        margin-right: -16px;
        margin-left: -16px;
        flex-direction: column-reverse;
    }

    #step-8 .step-8-content-wrapper {
        padding: 16px !important;
        border-radius: 16px;
    }

    .checkout-review-order-table-wrapper table tr {
        border-bottom: 1px solid #E5E5E5 !important;
        border-top: 1px solid rgba(217, 217, 217, 1) !important;
    }

    #step-8 .summary-heading {
        padding: 0;
    }

    #step-3 .heading-shadow {
        height: 0;
    }

    #step-6 .outer-box-col1 {
        padding: 0px;
        margin-top: 11px;
    }

    .outer-box-col,
    .outer-box-row-content {
        padding: 20px 20px 0;
        border-radius: 16px;
    }

    #step-3 .heading-shadow {
        height: 0;
    }

    .dog-paw-top-left svg {
        width: 100%;
        height: 28px;
        max-width: 28px;
    }

    .create-box-outer.dog-paw .dog-paw-top-left {
        display: block;
        position: absolute;
        top: 96%;
        left: 8%;
        z-index: 999;
        width: 28px;
        height: 28px;
        color: #047857;
    }

    .outer-box-btn button {
        font-size: 16px;
        max-width: -webkit-fill-available;
        max-width: -moz-available;
        text-align: center;
        justify-content: center;
        display: flex;
        padding: 9px 24px;
    }

    .step-3-validate.checkbox-group label {
        font-size: 16px;
    }

    .create-box-outer form input[type=text] {
        padding: 12px 16px;
        height: 48px;
    }

    .create-box-outer .steps .card-heading {
        font-size: 18px;
    }

    #form-step-5 label {
        padding: 20px 0px 8px;
    }

    #step-5 #form-step-5 {
        margin: 0;
    }

    #step-5 .checkbox-data {
        display: flex;
        justify-content: center;
        gap: 12px;
        padding: 20px 0 24px;
    }

    #step-5 .checkbox-data label {
        font-size: 12px;
        line-height: 16px;
    }

    #step-2 label {
        padding: 20px 0px 8px 0px;
        font-size: 14px;
        line-height: 20px;
    }

    #step-3 .bottom-heading {
        font-size: 14px;
        line-height: 20px;
    }

    .dog-profile-header .dog-title {
        font-size: 16px;
        line-height: 24px;
    }

    .card .card-main-content {
        padding-bottom: 0;
    }

    /* .dog-side-background img {
        max-width: 146px;
    } */

    #step-2 .weight-input-wrapper .weight-input,
    .out-box-radio-button label {
        height: 48px;
    }

    .outer-box-btn button svg {
        display: block;
        margin: auto 10px;
    }

    /* .dog-side-background img {
        left: 240px;
        top: -157px;
    } */

    #step-3 .acie-content .create-box-outer {
        padding: 20px 0px 8px;
    }

    .banner-btn,
    .step-7-btn {
        font-size: 16px;
        margin: auto;
    }

    #step-1 .card-row {
        padding: 8px 0px 40px;
    }

    .dog-gender label,
    .step-7-btn.continue-btn {
        height: 48px;
    }

    #step-6 {
        padding: 0px 0px 187px 0px;
    }

    .content-data-wrapper {
        margin-bottom: 20px;
    }
    .create-box-outer.done-food-cont .done-food-cont-left{
        display: none;
    }


    .create-box-outer #step-5 .card,
    .create-box-outer #step-6 .card,
    .create-box-outer #step-3 .card,
    .create-box-outer #step-5 .card,
    .create-box-outer #step-7 .card,
    .create-box-outer #step-8 .card,
    .create-box-outer #step-4 .card,
    .content-data-wrapper {
        padding:20px 16px;
        margin: 0px 0;
        border-radius: 16px;
    }

    .create-box-outer #step-1 .card {
        padding: 24px;
        margin: 25px 16px 16px;
        border-radius: 16px;
    }

    #step-5 .checkbox-content,
    .bottom-title {
        font-size: 12px;
    }

    .create-box-outer #step-6 .sub-heading {
        padding: 20px 0px;
        padding: 0 16px 16px !important;
        color: rgba(51, 50, 57, 1);
    }

    #step-6 .outer-box-bottom-content {
        margin: 0;
    }

    #step-6 .premium-types label {
        font-size: 16px !important;
    }

    .create-box-outer #step-2 .card {
        padding:20px 16px;
        margin: 0px;
        border-radius: 16px !important;
    }

    #step-2,
    #step-3,
    #step-4,
    #step-5,
    #step-6,
    #step-7,
    #step-8 {
        margin-bottom: 24px;
    }

    #step-6 .outer-box-subheading {
        margin: 0;
    }

    #step-1 .card-col-2 {
        max-width: unset;
    }

  
    #step-7,
    #step-8 {
        padding: 15px 0px 16px 0px;
    }
    #step-1{
        padding: 15px 0px 45px 0px;
    }
    #step-1::before,
    #step-7::before,
    .step-8-content-row {
        padding: 0;
    }

    .outer-box-heading,
    .bottom-heading,
    .create-box-outer-check-step-3,
    p.step-7-bottom-heading,
    #step-8 .trash-sub-heading,
    #step-8 .step-8-button .proceed-btn,
    .share-basket,
    .content-box-weight {
        font-size: 16px;
        line-height: 24px;
    }

    .outer-box-row .content-box:nth-of-type(-n+2) {
        border-right: none;
    }

    #step-6 .content-box-weight {
        padding-top: 0;
    }

    .page-id-16384 #cfw-side-cart-floating-button .cfw-side-cart-floating-button-anchor {
        display: none !important;
    }

    .outer-box-col1,
    .outer-box-row-content,
    .step-7-content-box {
        padding: 20px;
        margin-top: 15px;
    }

    .outer-box-col1 img {
        max-width: 159px;
        max-height: 110px;
    }


    .create-box-outer .steps label,
    .create-box-outer,
    #step-4 .step-check-content .bottom-heading,
    #step-3 .step-check-content .bottom-heading,
    .step-3-sub-title {
        font-size: 14px;
        width: 100%;
        max-width: unset;
    }

    #step-3 .active-step,
    .out-box-radio-button p {
        padding: 12px 15px;
    }

    #step-3 .create-box-outer {
        padding: 20px 0px 8px;
    }

    .acie-heading span {
        color: #06021F;
    }

    .dog-gender,
    .select-option,
    .out-box-radio-button,
    .step-7-content-data {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .select-option,
    .bottom-content-btn {
        padding: 0;
    }

    .outer-box-bottom-content {
        padding: 20px 0px 0px;
    }

    #step-6 .outer-box-row-content {
        padding-bottom: 20px !important;
        margin-top: 16px !important;
    }

    #step-6 .outer-box-col {
        height: 247px;
    }

    .step-7-content-data {
        gap: 16px;
    }

    .step-6-green {
        font-size: 20px;
    }

    .outer-box-subheading .step-6-green {
        font-size: 14px;
    }

    .step-7-input {
        padding: 12px 20px;
        max-width: unset;
    }

    .step-check-content .option::after,
    .step-check-content .option2::after {
        width: 20px !important;
        height: 20px !important;
    }

    .active-premium-types {
        padding: 11px;
        max-width: unset;
    }

    .step-6-img-content {
        bottom: 80px;
    }

    .premium-types {
        gap: 8px;
    }

    .active-premium-types,
    .create-box-outer form select {
        max-width: unset;
    }

    #step-3 .step-check-content {
        padding: 0;
    }

    #step-7 .saving-plan {
        display: flex;
        border: none;
        gap: 16px;
        max-width: unset;
        border-bottom: 1px solid rgba(233, 233, 233, 1);
        align-items: center;
        padding: 20px 0px;
    }

    #step-8 progress#file {
        width: 100%;
        max-width: 235px;
        bottom: 76px;
    }

    .step-7-content-row {
        gap: 0;
        padding: 0 33px;
    }

    #step-7 .saving-plan-no-border {
        border-right: none;
        border-bottom: none;
    }

    #step-7 .delivery-heading {
        margin-bottom: 12px;
    }

    #step-7 .plan-content {
        text-align: start;
    }

    #step-7 .step-7-content-row,
    .add-cart-card,
    #step-6 .outer-box-row {
        flex-direction: column;
    }

    .content-box {
        display: flex;
        text-align: start;
        gap: 16px;
        max-width: 150px;
    }

    #step-6 .outer-box-row {
        align-items: center;
    }


    .step6-tab-btn.active {
        line-height: 22px;
        font-size: 14px;
    }

    #step-6 .outer-box-row-content .active {
        border-top: 1px solid rgba(233, 233, 233, 1);
        border-bottom: 1px solid rgba(233, 233, 233, 1);
        padding: 15px 0px;
    }

    #step-6 .outer-box-row {
        justify-content: center;
        align-items: center;
        gap: 16px;
    }

    #step-8 .trash-main-heading {
        padding: 0;
    }

    .add-cart-heading-content .main-heading {
        font-size: 18px;
    }

    #step-8 .add-cart-trash-data {
        justify-content: space-between;
    }

    #step-8 .price-main-container,
    #step-8 .add-cart-trash-data {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }

    #step-8 .price-main-container {
        gap: 6px;
    }

    #step-8::before {
        bottom: 1353px;
    }

    #step-1::before,
    #step-7::before {
        bottom: 620px;
    }

    .create-box-outer .outer-radius {
        max-width: 32px;
        min-height: 32px;
        margin: auto 50px;
    }

    .create-box-outer-radius .inside-radius,
    .inside-radius-active {
        max-width: 15px;
        min-height: 15px;
    }

    .create-box-outer-radius {
        padding: 24px 0px !important;
    }

    #step-9 .create-box-outer-radius {
        padding: 0px !important;
    }

    #step-6 .outer-radius {
        margin: auto 30px;
    }

    .create-box-outer-radius .inside-radius-active,
    .inside-radius-validate {
        max-width: 15px;
        min-height: 15px;
    }

    #step-2 progress,
    #step-3 progress,
    #step-4 progress,
    #step-5 progress {
        width: 100%;
        max-width: 338px;
        left: 0px;
        bottom: 77px;
    }

    #step-6 progress {
        width: 100%;
        max-width: 418px;
        left: 0px;
        bottom: 77px;
    }

    #step-2 .heading-shadow-basic {
        position: relative;
        left: 90px;
    }

    #step-8 progress#file {
        width: 100%;
        max-width: 250px;
        bottom: 74px !important;
    }

    #step-9 .form-container {
        padding: 0;
    }

    #step-9 .form-container.my-form-container {
        padding: 0;
    }

    #step-2 .heading-shadow-basic svg {
        max-width: 50px;
    }

    #step-5 .heading-shadow {
        left: 195px;
        text-align: center;
    }

    #step-5 .heading-shadow svg {
        max-width: 75px;
    }

    #step-6 .heading-shadow {
        position: relative;
        left: 190px;
        top: -18px;
        text-align: center;
    }

    .apply-coupon-input .apply-btn {
        height: 48px !important;
    }

    #step-9 .wc-custom-btn-check,
    .download-invoice-btn a,
    .woo-process-continue {
        height: 40px !important;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    #step-9 .account-page-container {
        background-color: transparent !important;
    }

    #step-9 .account-page-container .account-page-my-form {
        margin-top: 0 !important;
    }

    #step-9 .account-page-container .form-container {
        border-radius: 0px 0px 16px 16px;
    }

    #step-9 .account-page-container .account-page-my-form {
        gap: 16px;
    }

    #step-9 .account-page-container .mybox-wrapper {
        border-radius: 16px 16px 0px 0px;
    }

    .wc-new-payment-cls {
        background-color: #FFF;
        border-radius: 0px 0px 16px 16px;
    }

    #step-4 .heading-shadow {
        left: 195px;
        text-align: center;
    }

    #step-3 .heading-shadow {
        bottom: 4px;
        display: inline;
    }

    #step-2 .sub-heading,
    #step-3 .sub-heading,
    #step-7 .sub-heading,
    #step-8 .sub-heading,
    #step-1 .sub-heading,
    #step-5 .sub-heading,
    #step-4 .sub-heading,
    #step-6 .sub-heading {
        padding-top: 0;
        padding: 0px 0px 24px !important;
    }

    #step-3 .heading-shadow svg {
        max-width: 75px;
    }

    #step-7 .heading-shadow-basic {
        left: 43px;
        top: -20px;
        text-align: center;
        display: inline;
        height: 0px;
    }

    #step-7 .heading-shadow-basic svg {
        max-width: 100px;
    }

    .radius-container .active,
    .radius-container .normal {
        font-size: 12px;
        margin: 0;
    }

    #step-8 .heading-shadow-basic {
        left: 190px;
        bottom: 5px;
    }

    #step-8 .heading-shadow-basic svg,
    #step-6 .heading-shadow svg,
    #step-4 .heading-shadow svg {
        max-width: 110px;
    }

    #step-1 .heading-shadow-basic {
        position: relative;
        left: 60px;
        top: -15px;
    }

    #step-1 .heading-shadow-basic svg {
        max-width: 100px;
    }

    #step-2 label {
        padding: 20px 0 8px;
    }

    #step-2,
    #step-5,
    #step-4,
    #step-3 {
        padding: 0px 0px 0px 0px;
    }

    .premium-types label,
    .out-box-radio-button .dog-gender-label,
    #step-7 .dog-gender label {
        height: 48px;
    }

}

@media(max-width:460px) {
    #step-3 .heading-shadow {
        /* left: 248px; */
    }

    #step-4 .heading-shadow {
        left: 148px;
    }

    #step-5 .heading-shadow {
        left: 141px;
    }

    #step-6 .heading-shadow {
        left: 130px;
    }

    #step-7 .heading-shadow-basic {
        left: 45px;
        top: -20px;
    }

    #step-8 .heading-shadow-basic {
        left: 136px;
    }

    #step-6 progress {
        max-width: 295px;
        left: 0px;
        bottom: 76px;
    }

    #step-2 progress,
    #step-3 progress,
    #step-4 progress,
    #step-5 progress {
        max-width: 265px;
        left: 0px;
        bottom: 76px;
    }

    #step-2 .sub-heading {
        padding-bottom: 24px !important;
    }

    /* .dog-side-background img {
        left: 205px;
    } */

    #step-6 .bottom-heading {
        margin: 0;
        padding: 24px 0 8px !important;
    }

    .done-food-cont-left svg {
        width: 63px;
        height: 31px;
        position: absolute;
        top: 150px;
    }

    #step-6 .create-box-outer.done-food-cont .done-food-cont-left {
        bottom: 4%;
        left: 10%;
    }

    #step-6 .dog-side-background img {
        left: 205px !important;
    }

    #step-6 {
        padding: 0;
    }

    #step-8 progress#file {
        width: 100%;
        max-width: 249px !important;
        bottom: 76px !important;
    }

    #step-8 .sub-heading {
        padding: 0px 0px 24px !important;
    }

    #step-3 .heading-shadow svg {
        max-width: 80px;
    }

    #step-2 .create-box-outer-radius {
        padding: 24px 0;
        display: flex;
        gap: 16px;
        width: 100%;
        max-width: 390px;
    }
}

@media(max-width:390px) {
    #step-8::before {
        bottom: 1335px;
    }
  
    .step-8-coupon-wrapper {
        padding: 16px;
    }

    .steps .step-8-coupon {
        padding: 0;
    }

    #step-7,
    #step-8 {
        padding: 15px 0px px 0px;
    }

    #step-3 .heading-shadow {
        /* left: 231px; */
    }

    #step-6 .heading-shadow {
        left: 115px;
    }

    #step-6 .dog-side-background img {
        left: 205px !important;
    }

    /* .dog-side-background img {
        left: 150px;
    } */

    #step-7 .heading-shadow-basic {
        left: 43px;
        top: -24px;
    }

    #step-8 .heading-shadow-basic {
        left: 112px;
        bottom: 8px;
    }

    .create-box-outer .outer-radius {
        margin: auto 40px;
    }



    #step-2 progress,
    #step-3 progress,
    #step-4 progress,
    #step-5 progress {
        max-width: 240px;
        left: 0px;
        bottom: 76px;
    }
}

@media(max-width:360px) {

    #step-2 progress,
    #step-3 progress,
    #step-4 progress,
    #step-5 progress {
        max-width: 225px;
        left: 0;
    }

    #step-6 progress {
        max-width: 262px;
    }

    #step-1::before,
    #step-7::before {
        bottom: 620px;
    }

    #step-8::before {
        bottom: 1540px;
    }

    #step-3 .heading-shadow {
        /* left: 107px; */
        top: 0px;
    }

    #step-6 .outer-radius {
        margin: auto 25px;
    }

    .step-7-btn,
    #step-8 .proceed-btn {
        padding: 12px 20px;
        font-size: 12px;
    }

    label.error {
        color: #c0392b;
        /* A standard red color for errors */
        font-size: 0.9rem;
        font-weight: 500;
        margin-top: 5px;
        display: block;
        /* Ensures the message appears on its own line */
        width: 100%;
        /* Makes the error take up the full width */
    }

}

.card {
    background-color: red;
}

/*  new reactivate page css 02-03-2026  */

.hero-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.reactive-hero-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1040px;
    margin: auto;
    align-items: end;
    position: relative;
    left: 15%;
}

.reactive-cart-content:first-child {
    border-right: 1px solid rgba(233, 233, 233, 1);
}

#reactive-hero-section {
    position: relative;
    padding: 40px 0 20px;
    text-align: center;
    overflow: hidden;
    max-width: 1440px;
    width: 100%;
    margin: auto;
}

/* .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(https://staging9.rudedogfood.co.uk/wp-content/uploads/2025/12/new-reactive-bg.png);
    background-blend-mode: color;
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
} */

#reactive-hero-section h1 {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 48px;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    padding: 16px 0 8px;
}

#reactive-hero-section p {
    opacity: 0.9;
    margin-bottom: 32px;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: rgba(241, 246, 246, 1);
}

#reactive-hero-section button {
    background: rgba(255, 255, 255, 1);
    color: rgba(51, 50, 57, 1);
    padding: 12px 24px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0px 8px 4px -1px rgba(12, 12, 13, 0.05);
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    border: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: border-box;
    background-image: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), linear-gradient(12deg, rgb(4, 120, 87), rgb(241, 245, 236), rgb(229, 231, 235));
}

.after-subscriuption-box .welcome-heading {
    font-family: Instrument Sans;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: rgba(6, 2, 31, 1);
    padding-bottom: 8px;
}

.after-subscriuption-box .welcome-subheading {
    font-family: Instrument Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: rgba(51, 50, 57, 1);
}

#step-9 .mybox-wrapper {
    margin: 0;
}

.after-subscriuption-box .mybox-wrapper {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(241, 245, 236, 1));
    border-radius: 16px 16px 0px 0px;
    margin: 0 !important;
}

.after-subscriuption-box .mybox-user-detail {
    padding: 30px;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, rgba(229, 231, 235, 1), rgba(229, 231, 235, 0));
    border-image-slice: 100%;
    border-image-slice: 100%;
    border-image-slice: 100%;
    border-image-slice: 1;
}

.after-subscription-box-wrapper {
    padding: 30px;
}

.after-subscriuption-box {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    border-radius: 16px;
    max-width: 1040px;
    margin: 24px 0;
}

.after-subscriuption-box .bottom-section-newreactive {
    padding: 0px 30px 30px;
}

.after-subscriuption-box .resume-subscription-heading {
    padding: 0 0 24px 0;
}

.after-subscriuption-box .resume-subscription-heading span {
    font-family: Instrument Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    padding-top: 8px;
    color: rgba(51, 50, 57, 1);
    display: block;
}

.after-subscriuption-box .notice-box {
    background: rgba(241, 246, 246, 1);
    padding: 24px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 60px;
}

.after-subscriuption-box .subscription-wrapper-newreactive {
    display: flex;
    border-radius: 16px;
    padding: 30px;
    background: rgba(241, 245, 236, 1);
    gap: 16px;
}

.after-subscriuption-box .box-card span {
    font-family: Instrument Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: rgba(51, 50, 57, 1);
}

.after-subscriuption-box .box-card p {
    font-family: Instrument Sans;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: rgba(6, 2, 31, 1);
    padding-bottom: 8px;
}

.after-subscriuption-box .notice-box p {
    font-family: Instrument Sans;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    color: rgba(4, 120, 87, 1);
    padding-bottom: 6px;
}

.after-subscriuption-box .notice-box span {
    font-family: Instrument Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: rgba(6, 2, 31, 1);
}

.after-subscriuption-box .notice-box button {
    background: rgba(4, 120, 87, 1);
    color: rgba(255, 255, 255, 1);
    padding: 11px 7px 11px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: Instrument Sans;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    width: 100%;
    max-width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: border-box;
    background-image: linear-gradient(rgba(4, 120, 87, 1), rgba(4, 120, 87, 1)), linear-gradient(195deg, rgba(4, 120, 87, 1), rgba(241, 245, 236, 1), rgba(229, 231, 235, 1));
    box-shadow: 0px 4px 8px -1px rgba(12, 12, 13, 0.05);
}

.after-subscriuption-box .sub-details {
    flex: 1;
    background: rgba(255, 255, 255, 1);
    padding: 24px 20px 22px;
    border-radius: 20px;
    overflow: hidden;

}

.after-subscriuption-box .view-ingredients-rect {
    width: fit-content;
    border-bottom: 1px solid rgba(81, 99, 80, 1);
    margin-bottom: 4px;
}

.new-rect-dog {
    overflow: hidden;
    flex: 1;
    object-fit: cover;
    border-radius: 20px;
}

.after-subscriuption-box .box-card h3 {
    margin-bottom: 10px;
}

.after-subscriuption-box .box-grid {
    display: flex;
    margin-top: 24px;
    background: rgba(241, 246, 246, 1);
    padding: 16px;
    border-radius: 12px;
}

.after-subscriuption-box .reactive-content-img {
    height: 40px;
}

.after-subscriuption-box .box-item {
    display: flex;
    width: 100%;
}

.after-subscriuption-box .reactive-cart-content .weeks-data {
    font-family: Instrument Sans;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: rgba(6, 2, 31, 1);
}

.after-subscriuption-box .reactive-cart-content p {
    font-family: Instrument Sans;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: rgba(6, 2, 31, 1);
    padding: 3px 0px 0px;
}

.after-subscriuption-box .view-box-items {
    width: 100%;
    border-radius: 6px;
    opacity: 1;
    gap: 4px;
    padding: 6px 9px 6px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: fit-content;
    background: rgba(255, 255, 255, 1);
    text-decoration: unset;
    box-shadow: 0px 4px 8px -1px rgba(12, 12, 13, 0.05);
    font-family: Instrument Sans;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: rgba(51, 50, 57, 1);
    border: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: border-box;
    background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)), linear-gradient(12deg, rgb(4, 120, 87), rgb(241, 245, 236), rgb(229, 231, 235));
}

.after-subscriuption-box .view-box-items {
    transition: color 0.2s ease-in-out, transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.15s ease-out;
    position: relative;
}

.after-subscriuption-box .view-box-items::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #047857;
    transition: all .45s cubic-bezier(0.68, 1.50, 0.27, 1.55);
    z-index: -1;
    border-radius: 6px;
}

.after-subscriuption-box .view-box-items:hover {
    color: #fff;
    transform: translateY(1px);
    box-shadow: 0 0px 0px rgba(12, 12, 13, 0);
}

.after-subscriuption-box .view-box-items:hover::before {
    width: 100%;
    overflow: visible;
}

.after-subscriuption-box .current-box-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0 16px;
}

.after-subscriuption-box .current-box-heading p {
    font-family: Instrument Sans;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: rgba(6, 2, 31, 1);
}

.after-subscriuption-box .reactive-cart-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.after-subscriuption-box .new-currentbox-items .card {
    background: rgba(255, 255, 255, 1);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(229, 231, 235, 1);
    transition: 0.3s ease;
    padding: 12px;
    margin: 0;
}

.dog-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #F1F6F6;
    border-radius: 10px;
    margin-bottom: 16px;
    cursor: pointer;
    border: 1px solid #E5E7EB;
}

.all-dogs-container .dog-profile-header:last-of-type {
    margin-bottom: 0;
}

.dog-title {
    margin: 0;
    font-size: 20px;
    color: #06021F;
    font-weight: 600;
    line-height: 27px;
}

.after-subscriuption-box .resume-subscription-heading p {
    font-family: Instrument Sans;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: rgba(6, 2, 31, 1);
}

.after-subscriuption-box .new-currentbox-items .card-img img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1/0.8;
    border-radius: 8px;
}

.after-subscriuption-box .card-content p {
    font-family: Instrument Sans;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: rgba(6, 2, 31, 1);
    padding-bottom: 4px;
}

.after-subscriuption-box .card-content a {
    font-family: Instrument Sans;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: rgba(81, 99, 80, 1);
    width: fit-content;
    /* text-decoration: underline; */
    display: flex;
    align-items: center;
    gap: 2px;
}

.after-subscriuption-box .cart-quantity {
    font-family: Instrument Sans;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: rgba(6, 2, 31, 1);
}

.after-subscriuption-box .new-currentbox-items .card-content {
    padding: 12px 0 0;
    display: flex;
    flex-direction: column;
}

.after-subscriuption-box .new-currentbox-items h3 {
    font-size: 16px;
    margin: 0 0 8px;
    font-weight: 600;
}

.hero-dogbox-wrapper {
    width: 50%;
    position: relative;
    bottom: 0;
    top: 20px;
}

.after-subscriuption-box .resume-subscription-container {
    display: flex;
    gap: 16px;
    background: rgba(241, 245, 236, 1);
    padding: 16px;
    border-radius: 16px;
}

.after-subscriuption-box .resume-left-card,
.after-subscriuption-box .resume-right-card {
    background: rgb(255, 255, 255);
    border-radius: 20px;
    padding: 16px;
}

.after-subscriuption-box .resume-left-card {
    flex: 1.5;
    padding: 16px 16px 22px;
}

.after-subscriuption-box .resume-right-card {
    flex: 1;
    padding: 0;
    overflow: hidden;
}

.after-subscriuption-box .resume-title {
    font-family: Instrument Sans;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: rgba(6, 2, 31, 1);
}

.after-subscriuption-box .resume-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgb(229, 231, 235);
    align-items: center;
}

.after-subscriuption-box .resume-item p {
    font-family: Instrument Sans;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #06021F;
    padding-bottom: 4px;
}

.after-subscriuption-box .resume-item span {
    font-family: Instrument Sans;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(51, 50, 57, 1);
}

.after-subscriuption-box .resume-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.after-subscriuption-box .reactivate-btn {
    margin-top: 16px;
}

.after-subscriuption-box .wc-reactivate-btn {
    margin-top: 16px;
}

.after-subscriuption-box .reactivate-btn:hover {
    background: #0c5a42;
}

.after-subscriuption-box .wc-reactivate-btn:hover {
    background: #0c5a42;
}


.after-subscriuption-box .resume-image img {
    object-fit: cover;
    width: 100%;
}

.after-subscriuption-box .resume-right-content {
    padding: 12px 16px 16px;
}

.after-subscriuption-box .resume-right-content p {
    font-family: Instrument Sans;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: rgb(6, 2, 31);
    padding-bottom: 8px;
}

.after-subscriuption-box .resume-right-content span {
    font-family: Instrument Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: rgba(51, 50, 57, 1);
    padding-bottom: 16px;
    display: block;
}

.after-subscriuption-box .buy-now-btn,
.after-subscriuption-box .reactivate-btn,
.after-subscriuption-box .wc-reactivate-btn {
    background: rgba(4, 120, 87, 1);
    color: rgba(255, 255, 255, 1);
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    align-items: center;
    gap: 10px;
    display: flex;
    font-family: 'Instrument Sans';
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0px 4px 8px -1px rgba(12, 12, 13, 0.05);
}

.after-subscriuption-box .resume-right-card {
    padding: 0;
}

/*canecl subscription*/
.wcs_cancel_subscription .after-subscriuption-box .notice-box p {
    color: rgba(192, 8, 8, 1);
}

.wcs_cancel_subscription .after-subscriuption-box .notice-box {
    background: rgb(254, 242, 242);
}


@media(max-width:768px) {
    .hero-dogbox-wrapper {
        width: 30%;
    }
    #form-step-6 .premium-types label{
        max-width: unset;
    }
    #step-4 .heading-shadow,
    #step-5 .heading-shadow {
        left: 160px;
        height: 0;
        bottom: 135px;
        top: unset;
    }

    .dog-profile-header>*:last-child {
        margin-bottom: 0;
    }

    #step-7 .heading {
        margin: 0;
    }

    #step-4 .premium-types.checkbox-group {
        padding-bottom: 0;
    }

    #step-4 .step-check-content {
        gap: 12px;
        padding-bottom: 24px;
    }

    #form-step-5 input[type="text"],
    #step-5 .phone-numb {
        height: 48px;
    }

    .subscription-cancel .reactive-hero-wrapper {
        flex-direction: column-reverse;
    }

    .card-row .card-col-1 img,
    .card-row .card-col-2 img,
    .card-row .card-col-3 img {
        padding-bottom: 8px;
    }

    .subscription-pause .hero-dogbox-wrapper {
        display: none;
    }

    .dog-profile-header {
        height: 48px;
    }

    .subscription-pause #reactive-hero-section {
        padding: 12px 0 20px;
    }

    #reactive-hero-section h1 {
        font-size: 24px;
        line-height: 32px;
        padding: 8px 0 6px;
    }

    .calander-img img {
        width: 40px;
        height: 40px;
    }

    .subscription-pause::before,
    .subscription-cancel::before {
        max-height: 260px;
    }

    .subscription-active-cls::before {
        max-height: 128px;
    }

    #reactive-hero-section button {
        padding: 7px 21px;
    }

    #reactive-hero-section p {
        margin-bottom: 24px;
    }

    .after-subscriuption-box {
        margin: auto;
        background: transparent;
    }

    .hero {
        position: relative;
        padding: 21px 0 41px;
    }

    .calander-img {
        height: 40px;
    }

    .after-subscriuption-box .mybox-user-detail {
        padding: 20px 20px 20px 16px;
    }

    .after-subscriuption-box .welcome-heading {
        padding-bottom: 4px;
    }

    .after-subscriuption-box .subscription-wrapper-newreactive {
        flex-direction: column-reverse;
        padding: 0;
        border-radius: 0;
        background: transparent;
    }

    .after-subscription-box-wrapper {
        padding: 0;
        background: transparent;
    }

    .after-subscriuption-box .sub-details {
        background: transparent;
        border-radius: 0;
        padding: 0;
    }

    .after-subscriuption-box .notice-box {
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 0;
    }

    .after-subscriuption-box .box-card {
        padding: 16px 16px 23px;
        background: rgba(255, 255, 255, 1);
        border-radius: 16px 16px;
    }

    .after-subscriuption-box .view-box-items {
        padding: 3px 13px 3px 14px;
    }

    .after-subscriuption-box .main-frame {
        height: 261px;
        object-fit: cover;
        border-radius: 16px;
        margin: 8px 0 24px;
    }

    .after-subscriuption-box .bottom-section-newreactive {
        padding: 0;
    }

    .after-subscriuption-box .resume-subscription-container {
        flex-direction: column;
        padding: 0;
    }

    .after-subscriuption-box .resume-left-card {
        padding: 16px;
        border-radius: 16px;
    }

    .after-subscriuption-box .resume-image img {
        max-height: 238px;
    }


    .after-subscriuption-box .hero-content {
        padding: 0 25px;
    }

    .after-subscriuption-box .resume-item:nth-last-child {
        border-bottom: none;
    }

    .after-subscriuption-box .resume-subscription-heading {
        padding: 24px 0 16px 0;
    }

    .reactive-hero-wrapper {
        left: 0;
        padding: 0 16px;
    }

    #reactive-hero-section {
        padding: 0px 0 20px;
    }

    .after-subscriuption-box .new-rect-dog {
        width: 100%;
        aspect-ratio: 1/.6;
        margin-top: 16px;
    }

    .notice-box-wrapper {
        padding: 16px;
        background: rgba(255, 255, 255, 1);
        border-radius: 0px 0px 16px 16px;
        margin-bottom: 24px;
    }

    .after-subscriuption-box .mybox-wrapper .mybox-user-detail {
        padding: 20px 20px 19px 16px !important;
    }
}