/* =============================================================
   CUSTOM STYLES — Ceylon Vanilla (Pvt) Ltd
   All styles extracted from inline HTML to keep markup clean.
   ============================================================= */


/* ---------------------------------------------------------------
   1. TRANSPARENT HEADER  (index.html hero overlay)
   Moved from inline <style> block in <head>
--------------------------------------------------------------- */
.header-transparent.header-stack #Top_bar:not(.is-sticky) {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 999;
}

.header-transparent.header-stack #Top_bar:not(.is-sticky),
.header-transparent.header-stack #Top_bar:not(.is-sticky) .menu_wrapper,
.header-transparent.header-stack #Top_bar:not(.is-sticky) nav#menu,
.header-transparent.header-stack #Top_bar:not(.is-sticky) ul.menu {
   background-color: transparent !important;
   border: none !important;
}

/* Invert dark logo to white over the hero image */
.header-transparent.header-stack #Top_bar:not(.is-sticky) .logo img {
   filter: brightness(0) invert(1);
}

/* Menu links — 70% white when over hero */
.header-transparent.header-stack #Top_bar:not(.is-sticky) .menu>li>a,
.header-transparent.header-stack #Top_bar:not(.is-sticky) .menu>li>a span {
   color: rgba(255, 255, 255, 0.7) !important;
}

/* Full white on active / hover */
.header-transparent.header-stack #Top_bar:not(.is-sticky) .menu>li.current-menu-item>a,
.header-transparent.header-stack #Top_bar:not(.is-sticky) .menu>li.current-menu-item>a span,
.header-transparent.header-stack #Top_bar:not(.is-sticky) .menu>li:hover>a,
.header-transparent.header-stack #Top_bar:not(.is-sticky) .menu>li:hover>a span {
   color: rgba(255, 255, 255, 1) !important;
}


/* ---------------------------------------------------------------
   2. HR SPACERS
   Usage: add class alongside existing "no_line"
--------------------------------------------------------------- */
.hr-spacing-sm {
   margin: 0 auto 5px;
}

.hr-spacing-md {
   margin: 0 auto 15px;
}

.hr-spacing-lg {
   margin: 0 auto 20px;
}


/* ---------------------------------------------------------------
   3. SECTION LAYOUTS — Home page (index.html)
   Note: background-image paths are relative to this CSS file.
--------------------------------------------------------------- */

/* Top spacer strip */
.section-spacer-top {
   padding-top: 75px;
   padding-bottom: 0;
   background-color: #ffffff;
}

/* "A Distinctive Origin" intro section */
.section-home-intro {
   padding-top: 100px;
   padding-bottom: 100px;
   background-color: #fff;
   background-image: url(../images/cvanilla-home-vanilla-bg.png);
   background-repeat: no-repeat;
   background-position: left top;
}

/* Full-screen parallax / bottles section */
.section-home-parallax {
   padding-top: 0;
   padding-bottom: 0;
   background-color: #eceded;
   background-image: url(../images/vanilla-bootles-bg.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   background-size: cover;
   -webkit-background-size: cover;
}

/* "A Sustainable Model" section */
.section-home-sustain {
   padding-top: 125px;
   padding-bottom: 125px;
   background-image: url(../images/ceylon-vanilla-sustain.png);
   background-repeat: no-repeat;
   background-position: center;
}


/* ---------------------------------------------------------------
   4. WRAP / COLUMN SPACING
--------------------------------------------------------------- */
.wrap-image-padded {
   padding: 0 5%;
}

.wrap-text-padded {
   padding: 50px 1% 20px;
}

.wrap-content-box {
   padding: 70px 5%;
   background-color: #ffffff;
}


/* ---------------------------------------------------------------
   5. BUTTON COLOUR VARIANTS
   Add alongside existing framework button classes.
--------------------------------------------------------------- */
.btn-light {
   background-color: #284658 !important;
   color: #f4f4f4 !important;
}

.btn-white {
   background-color: #284658 !important;
   color: #f4f4f4 !important;
}

.btn-offwhite {
   background-color: #284658 !important;
   color: #f4f4f4 !important;
}


/* ---------------------------------------------------------------
   6. FOOTER WIDGETS WRAPPER
--------------------------------------------------------------- */
.footer-widgets {
   padding: 100px 0 80px;
}


/* ---------------------------------------------------------------
   7. NEWSLETTER FORM — zero-margin columns
--------------------------------------------------------------- */
.newsletter-col {
   margin: 0;
}


/* =============================================================
   ABOUT PAGE — about.html specific styles
   ============================================================= */

/* ---------------------------------------------------------------
   8. HR SPACERS (additional sizes)
--------------------------------------------------------------- */
.hr-spacing-xs {
   margin: 0 auto 10px;
}

/* 10 px gap  */
.hr-spacing-section {
   margin: 0 auto 400px;
}

/* full-height section divider */


/* ---------------------------------------------------------------
   9. SECTION LAYOUTS — About page / Visit Page
--------------------------------------------------------------- */

/* Full-screen hero banner (top of about page) */
.section-about-hero {
   padding-top: 300px;
   padding-bottom: 300px;
   background-image: url(../images/home-sliderbg-2ab.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   background-size: cover;
   -webkit-background-size: cover;
}

.section-visit-hero {
   padding-top: 300px;
   padding-bottom: 350px;
   background-image: url(../images/visit-slider-bg.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   background-size: cover;
   -webkit-background-size: cover;
}

.section-visit-story {
   padding-top: 0;
   padding-bottom: 300px;
   background-image: url(../images/vanilla-visit-story.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   background-size: cover;
   -webkit-background-size: cover;
}

/* Story / long-view section (overlapping card layout) */
.section-about-story {
   padding-top: 0;
   padding-bottom: 300px;
   background-image: url(../images/vanilla-long-view.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   background-size: cover;
   -webkit-background-size: cover;
}


/* "Our Vision" full-screen split — image left */
.section-about-vision {
   padding-top: 0;
   padding-bottom: 0;
   background-image: url(../images/vanilla-view-n1.jpg);
   background-repeat: no-repeat;
   background-position: left top;
}

/* "Bringing Ceylon to the World" — image right */
.section-about-world {
   padding-top: 0;
   padding-bottom: 0;
   background-image: url(../images/cvanila-lvew-n2.jpg);
   background-repeat: no-repeat;
   background-position: right center;
}


/* ---------------------------------------------------------------
   10. WRAP HELPERS — About page
--------------------------------------------------------------- */

/* Overlapping white card (pulls up over the story image) */
.wrap-about-card {
   padding: 50px;
   background-color: #fff;
   margin-top: -150px;
}

/* Side content panel with generous padding */
.wrap-side-padded {
   padding: 40px 5%;
}


/* ---------------------------------------------------------------
   11. BUTTON VARIANTS — About page
--------------------------------------------------------------- */
.btn-dark {
   background-color: #284658 !important;
   color: #fff;
}


/* =============================================================
   CONTACT PAGE — contact.html specific styles
   ============================================================= */

/* ---------------------------------------------------------------
   12. HR SPACERS (additional sizes)
--------------------------------------------------------------- */
.hr-spacing-xl {
   margin: 0 auto 30px;
}


/* ---------------------------------------------------------------
   13. SECTION LAYOUTS — Contact page
--------------------------------------------------------------- */

/* Page title / address header strip */
.section-contact-header {
   padding-top: 100px;
   padding-bottom: 0;
}

/* Contact details + image row */
.section-contact-details {
   padding-top: 40px;
   padding-bottom: 125px;
}

/* Contact form section */
.section-contact-form {
   padding-top: 0;
   padding-bottom: 100px;
}

/* Outer zero-padding wrapper for the bottom hero */
.section-zero-pad {
   padding-top: 0;
   padding-bottom: 0;
}

/* Full-screen bottom hero image */
.section-contact-hero {
   padding-top: 300px;
   padding-bottom: 300px;
   background-image: url(../images/contact-us-bottom-img.png);
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   background-size: cover;
   -webkit-background-size: cover;
}


/* ---------------------------------------------------------------
   14. FORM ELEMENTS — Contact page
--------------------------------------------------------------- */
.textarea-full {
   width: 100%;
}


/* =============================================================
   GALLERY PAGE — gallery.html specific styles
   ============================================================= */

/* ---------------------------------------------------------------
   15. HR SPACERS (additional sizes)
--------------------------------------------------------------- */
.hr-spacing-2xl {
   margin: 0 auto 55px;
}


/* ---------------------------------------------------------------
   16. SECTION LAYOUTS — Gallery page
--------------------------------------------------------------- */

/* Dark header banner with repeating texture */
.section-gallery-header {
   padding-top: 125px;
   padding-bottom: 150px;
   background-color: #3f3f3f;
   background-image: url("images/vanilla-pattern-1.jpg");
   background-repeat: repeat;
   background-position: left top;
}


/* =============================================================
   VANILLA / PRODUCTS PAGE — Vanilla.html specific styles
   ============================================================= */

/* ---------------------------------------------------------------
   17. HR SPACERS (additional sizes)
--------------------------------------------------------------- */
.hr-spacing-feature {
   margin: 0 auto 50px;
}

/* feature / product separator */


/* ---------------------------------------------------------------
   18. SECTION LAYOUTS — Vanilla products page
--------------------------------------------------------------- */

/* Hero banner with background image */
.section-vanilla-hero {
   padding-top: 100px;
   padding-bottom: 100px;
   background-color: #eaebeb;
   background-image: url("images/products-page-bg-1.jpg");
   background-repeat: no-repeat;
   background-position: center bottom;
}

/* Product row — zero padding, light grey bg */
.section-vanilla-row {
   padding-top: 0px;
   padding-bottom: 0;
   background-color: #eaebeb;
}

/* Last product row — adds bottom breathing room */
.section-vanilla-row-last {
   padding-top: 0;
   padding-bottom: 55px;
   background-color: #eaebeb;
}


/* ---------------------------------------------------------------
   19. WRAP / COLUMN HELPERS — Vanilla & single-product pages
--------------------------------------------------------------- */

/* Centred padding for column_attr hero text */
.column-attr-padded {
   padding: 0 3%;
}

/* Product image column — narrow inline padding */
.wrap-product-img {
   padding: 0 3%;
}

/* Product text / description column */
.wrap-product-text {
   padding: 40px 3%;
}


/* =============================================================
   SINGLE PRODUCT PAGE — products/single-product-templete.html
   ============================================================= */

/* ---------------------------------------------------------------
   20. SECTION LAYOUTS — Single product page
   Note: bg-image path is relative to css/custom.css
--------------------------------------------------------------- */

/* Full-width hero with leaf background */
.section-product-hero {
   padding-top: 75px;
   padding-bottom: 50px;
   background-image: url("images/vanilla-bg-single-pr-2.jpg");
   background-repeat: no-repeat;
   background-position: center;
}

/* Product detail / description section */
.section-product-detail {
   padding-top: 0;
   padding-bottom: 75px;
}


/* ---------------------------------------------------------------
   21. IMAGE HELPERS — Single product page
--------------------------------------------------------------- */

/* Pulls image up to overlap the section above */
.img-neg-margin {
   margin-bottom: -10px;
}

/* =============================================================
   ABOUT PAGE — Our Management Team
   ============================================================= */

.flv_margin_40 {
   margin: 40px 0;
}

.hr_dots.flv_margin_40 span {
   background-color: darkblue;
   /* darker blue dots as requested */
}

/* =============================================================
   SHOP SLIDER & PRODUCT THUMBNAILS
   ============================================================= */

/* Column Wrapper */
.column_shop_slider {
   width: 100%;
   margin-bottom: 40px;
}

/* Shop Slider Container */
.shop_slider .blog_slider_header {
   position: relative;
   height: 43px;
   margin-bottom: 15px;
   overflow: hidden;
   padding-right: 110px;
}

.shop_slider .blog_slider_header .title {
   margin: 9px 0 0;
}

.shop_slider .blog_slider_header a.slider_prev,
.shop_slider .blog_slider_header a.slider_next {
   position: absolute;
   top: 0;
   margin: 0;
   font-size: 13px;
   line-height: 21px;
}

.shop_slider .blog_slider_header a.slider_prev {
   right: 50px;
}

.shop_slider .blog_slider_header a.slider_next {
   right: 0;
}

.shop_slider .slider_pagination {
   margin-top: 15px;
}

.shop_slider .shop_slider_ul {
   margin: 0;
}

.shop_slider .shop_slider_ul li {
   float: left;
   width: 25%;
   list-style: none;
}

/* Item Wrapper & Product Thumbnails */
.shop_slider .shop_slider_ul li .item_wrapper {
   margin: 0 10px;
   position: relative;
   background: #fff;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.product-loop-thumb {
   position: relative;
   overflow: hidden;
   line-height: 0;
}

.product-loop-thumb .image_wrapper {
   position: relative;
   transition: all 0.3s ease-in-out;
}

.product-loop-thumb:hover .scale-with-grid {
   transform: scale(1.05);
}

.shop_slider .shop_slider_ul li .item_wrapper .desc {
   padding: 15px 20px;
}

.shop_slider .shop_slider_ul li .item_wrapper .desc h4 {
   margin-bottom: 5px;
}

.shop_slider .shop_slider_ul li .item_wrapper .price {
   font-size: 18px;
   margin-bottom: 0;
   color: #284658;
}

.shop_slider .shop_slider_ul li .item_wrapper span.onsale {
   position: absolute;
   left: 0;
   top: 0;
   background: #b49861;
   color: #fff;
   padding: 5px 10px;
   z-index: 2;
   font-size: 12px;
}

/* Image links & hover effects */
.image_frame .image_wrapper .image_links {
   position: absolute;
   bottom: -100%;
   left: 0;
   width: 100%;
   background: rgba(40, 70, 88, 0.8);
   transition: all 0.3s ease-in-out;
}

.image_frame:hover .image_links {
   bottom: 0;
}

.image_links a {
   display: inline-block;
   padding: 10px;
   color: #fff;
}

/* Call to Action Ribbon */
.section-cta-ribbon {
   padding: 60px 0;
   text-align: center;
}

.section-cta-ribbon .btn-store {
   background-color: #b49861 !important;
   color: #fff !important;
   padding: 15px 35px;
   font-size: 16px;
   font-weight: 700;
   border-radius: 5px;
   display: inline-block;
   transition: all 0.3s ease-in-out;
}

.section-cta-ribbon .btn-store:hover {
   background-color: #f4f4f4 !important;
   color: #284658 !important;
   transform: translateY(-3px);
}

/* =============================================================
   FARM BOOKING WIZARD — Multi-step booking form
   ============================================================= */

.section-booking-wizard {
    padding: 100px 0;
    background-color: #f6f8f9;
}

.booking-wizard-container {
    max-width: 850px;
    margin: 0 auto;
    background: #ffffff;
    padding: 60px;
    border-radius: 12px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.07);
    position: relative;
    border: 1px solid #f0f0f0;
}

.wizard-header {
    text-align: center;
    margin-bottom: 60px;
}

.wizard-header h3 {
    margin-bottom: 40px;
    color: #284658;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Progress Bar */
.progress-container {
    position: relative;
    margin: 0 auto 50px;
    height: 6px;
    background: #f0f0f0;
    width: 100%;
    border-radius: 10px;
}

.progress-bar {
    position: absolute;
    height: 100%;
    width: 0%;
    background: #b49861;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(180, 152, 97, 0.3);
}

.progress-steps {
    position: absolute;
    top: -17px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.step-item {
    width: 40px;
    height: 40px;
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #bbb;
    position: relative;
    transition: all 0.4s ease;
    z-index: 2;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.step-item.active {
    border-color: #b49861;
    background: #b49861;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 8px 15px rgba(180, 152, 97, 0.3);
}

.step-item.completed {
    border-color: #284658;
    background: #284658;
    color: #fff;
}

.step-item span {
    position: absolute;
    top: 45px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap;
    color: #999;
    font-weight: 600;
}

.step-item.active span {
    color: #284658;
    font-weight: 800;
}

/* Steps Visibility & Body */
.wizard-step {
    display: none;
    animation: slideUpFade 0.6s ease-out;
}

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

.step-body {
    min-height: 220px;
    margin-bottom: 40px;
}

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

/* Form Headings */
.wizard-step h5 {
    margin-bottom: 30px;
    color: #b49861;
    border-bottom: 2px solid #f9f0e0;
    padding-bottom: 12px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Form Grouping */
.form-group {
    margin-bottom: 25px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #284658;
}

.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fcfcfc;
    font-family: inherit;
    font-size: 15px;
    transition: all 0.3s ease;
    color: #444;
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    border-color: #b49861;
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(180, 152, 97, 0.1);
}

/* Validation Styling */
.form-group.invalid input,
.form-group.invalid select {
    border-color: #e74c3c;
    background: #fff5f5;
}

.error-msg {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 8px;
    display: none;
    font-weight: 600;
}

.form-group.invalid .error-msg {
    display: block;
}

/* Footer & Buttons */
.wizard-footer {
    padding-top: 40px;
    margin-top: 40px;
    border-top: 2px solid #f6f6f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wizard-footer button {
    padding: 14px 40px;
    border: none;
    border-radius: 30px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-next, .btn-submit {
    background: #284658;
    color: #fff;
    margin-left: auto; /* Push to right */
}

.btn-next:hover, .btn-submit:hover {
    background: #b49861;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(180, 152, 97, 0.4);
}

.btn-prev {
    background: #f0f0f0;
    color: #666;
}

.btn-prev:hover {
    background: #e0e0e0;
    color: #333;
}

/* Booking Status Message */
.booking-status {
    margin-top: 30px;
    padding: 20px;
    border-radius: 8px;
    display: none;
    text-align: center;
    font-weight: 600;
}

.booking-status.success {
    display: block;
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.booking-status.error {
    display: block;
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

/* BeTheme alignment fix */
.booking-wizard-container .column {
    margin-bottom: 0px !important;
}

/* =============================================================
   MOBILE RESPONSIVE OVERRIDES (max-width: 768px)
   ============================================================= */

@media screen and (max-width: 768px) {
    /* 1. Global Centering & Typography */
    .column, .mcb-column, .mcb-wrap, .column_attr, .mcb-wrap-inner, .section_wrapper,
    .align_left, .align_right, .alignleft, .alignright, .aligncenter,
    [align="justify"], [align="left"], [align="right"],
    h2, h3, h4, h5, h6, p, ul, li, div, section, a {
        text-align: center !important;
    }

    /* Reset floats, widths and margins for all grid elements on mobile */
    .one, .one-second, .one-third, .two-third, .one-fourth, .three-fourth, 
    .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth,
    .column, .mcb-column, .mcb-wrap, .mcb-wrap-inner {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        left: 0 !important;
    }

    p {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        width: 100% !important;
    }

    ul, ol {
        list-style-position: inside !important;
        padding-left: 0 !important;
        display: inline-block !important;
        width: 100% !important;
        margin: 0 auto 20px !important;
    }

    li {
        list-style-type: none !important; 
        margin-bottom: 10px !important;
        width: 100% !important;
    }

    /* Buttons centering */
    .column_button, .button_align, .button_wrapper, .image_links {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        margin: 20px auto !important;
    }

    .button, button, a.button {
        float: none !important;
        display: inline-block !important;
        margin: 0 auto !important;
    }

    h3 { font-size: 28px !important; line-height: 34px !important; }
    h2 { font-size: 32px !important; line-height: 38px !important; }

    /* 2. Section Vertical Spacing */
    .section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .section-spacer-top { padding-top: 40px !important; }
    
    /* Hero Sections — more compact on mobile */
    .section-about-hero,
    .section-visit-hero,
    .section-contact-hero,
    .section-about-story {
        padding-top: 120px !important;
        padding-bottom: 120px !important;
        background-attachment: scroll !important; /* Performance fix for mobile */
    }

    .section-visit-story { padding-bottom: 60px !important; }

    /* 3. Wrap & Column Adjustments */
    .wrap-about-card {
        margin-top: 0 !important; /* Remove large desktop overlap */
        padding: 30px 20px !important;
    }

    .wrap-image-padded,
    .wrap-text-padded,
    .wrap-content-box,
    .wrap-side-padded,
    .column-attr-padded {
        padding: 40px 15px !important;
    }

    /* 4. Home Page Specifics */
    .section-home-intro {
        background-image: none !important; /* Clean up small screen space */
    }

    .section-home-parallax {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
        background-attachment: scroll !important;
    }

    /* 5. About Page / Vision Split Sections */
    .section-about-vision,
    .section-about-world {
        background-image: none !important; /* Prevents text from overlaying poorly on non-center images */
        background-color: #f9f9f9;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* 6. Product & Gallery Specifics */
    .section-gallery-header,
    .section-vanilla-hero,
    .section-product-hero {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }

    /* 7. Contact Page Fixes */
    .section-contact-details {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
    }

    /* 8. Button Alignments */
    .column_button, .button_align {
        text-align: center !important;
        margin-top: 10px;
    }

    .tp-caption {
        text-align: center !important;
        left: 0 !important;
        width: 100% !important;
    }

    /* 9. Booking Wizard Fixes */
    .booking-wizard-container {
        padding: 40px 25px !important;
    }
    
    .wizard-header h3 {
        font-size: 26px !important;
    }
    
    .step-item span {
        display: none !important;
    }
    
    .wizard-footer {
        flex-direction: column-reverse !important;
        gap: 15px !important;
    }
    
    .wizard-footer button {
        width: 100% !important;
        margin-left: 0 !important;
    }
}