body {
     font-family: "Montserrat", sans-serif;
 }

 button {
     padding: 10px 20px;
     border: none;
 }

 /* Backdrop (initially hidden) */
 .backdrop {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     justify-content: center;
     align-items: center;
 }

 /* Popup box */
 .popup {
     background: #fff;
     padding: 0;
     border-radius: 0;
     min-width: 300px;
     max-width: 1129px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     animation: fadeIn 0.3s ease;
 }

 /* Simple fade animation */
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: scale(0.9);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }



 /* =======================================
   Bootstrap 5.3 Flex Utilities (Standalone)
   ======================================= */
 .text-uppercase {
     text-transform: uppercase !important;
 }

 .text-lowercase {
     text-transform: lowercase !important;
 }

 .text-decoration-none {
     text-decoration: none !important;
 }

 .text-decoration-underline {
     text-decoration: underline !important;
 }

 .text-reset {
     all: unset !important;
 }

 /* Display Flex */
 .d-flex {
     display: flex !important;
 }

 .d-inline-flex {
     display: inline-flex !important;
 }

 /* Flex Direction */
 .flex-row {
     flex-direction: row !important;
 }

 .flex-row-reverse {
     flex-direction: row-reverse !important;
 }

 .flex-column {
     flex-direction: column !important;
 }

 .flex-column-reverse {
     flex-direction: column-reverse !important;
 }

 /* Flex Wrap */
 .flex-wrap {
     flex-wrap: wrap !important;
 }

 .flex-nowrap {
     flex-wrap: nowrap !important;
 }

 .flex-wrap-reverse {
     flex-wrap: wrap-reverse !important;
 }

 /* Justify Content */
 .justify-content-start {
     justify-content: flex-start !important;
 }

 .justify-content-end {
     justify-content: flex-end !important;
 }

 .justify-content-center {
     justify-content: center !important;
 }

 .justify-content-between {
     justify-content: space-between !important;
 }

 .justify-content-around {
     justify-content: space-around !important;
 }

 .justify-content-evenly {
     justify-content: space-evenly !important;
 }

 /* Align Items */
 .align-items-start {
     align-items: flex-start !important;
 }

 .align-items-end {
     align-items: flex-end !important;
 }

 .align-items-center {
     align-items: center !important;
 }

 .align-items-baseline {
     align-items: baseline !important;
 }

 .align-items-stretch {
     align-items: stretch !important;
 }

 /* Align Self */
 .align-self-start {
     align-self: flex-start !important;
 }

 .align-self-end {
     align-self: flex-end !important;
 }

 .align-self-center {
     align-self: center !important;
 }

 .align-self-baseline {
     align-self: baseline !important;
 }

 .align-self-stretch {
     align-self: stretch !important;
 }

 /* Align Content */
 .align-content-start {
     align-content: flex-start !important;
 }

 .align-content-end {
     align-content: flex-end !important;
 }

 .align-content-center {
     align-content: center !important;
 }

 .align-content-between {
     align-content: space-between !important;
 }

 .align-content-around {
     align-content: space-around !important;
 }

 .align-content-stretch {
     align-content: stretch !important;
 }

 /* Flex Grow & Shrink */
 .flex-grow-0 {
     flex-grow: 0 !important;
 }

 .flex-grow-1 {
     flex-grow: 1 !important;
 }

 .flex-shrink-0 {
     flex-shrink: 0 !important;
 }

 .flex-shrink-1 {
     flex-shrink: 1 !important;
 }

 /* Order */
 .order-first {
     order: -1 !important;
 }

 .order-0 {
     order: 0 !important;
 }

 .order-1 {
     order: 1 !important;
 }

 .order-2 {
     order: 2 !important;
 }

 .order-3 {
     order: 3 !important;
 }

 .order-4 {
     order: 4 !important;
 }

 .order-5 {
     order: 5 !important;
 }

 .order-last {
     order: 6 !important;
 }

 /* Gap Utilities (Bootstrap spacing scale: 0–5) */
 .gap-0 {
     gap: 0 !important;
 }

 .gap-1 {
     gap: 0.25rem !important;
 }

 .gap-2 {
     gap: 0.5rem !important;
 }

 .gap-3 {
     gap: 1rem !important;
 }

 .gap-4 {
     gap: 1.5rem !important;
 }

 .gap-5 {
     gap: 3rem !important;
 }

 .row-gap-0 {
     row-gap: 0 !important;
 }

 .row-gap-1 {
     row-gap: 0.25rem !important;
 }

 .row-gap-2 {
     row-gap: 0.5rem !important;
 }

 .row-gap-3 {
     row-gap: 1rem !important;
 }

 .row-gap-4 {
     row-gap: 1.5rem !important;
 }

 .row-gap-5 {
     row-gap: 3rem !important;
 }

 .column-gap-0 {
     column-gap: 0 !important;
 }

 .column-gap-1 {
     column-gap: 0.25rem !important;
 }

 .column-gap-2 {
     column-gap: 0.5rem !important;
 }

 .column-gap-3 {
     column-gap: 1rem !important;
 }

 .column-gap-4 {
     column-gap: 1.5rem !important;
 }

 .column-gap-5 {
     column-gap: 3rem !important;
 }

 .mx-10-0-auto {
     margin: 5% auto 0;
 }

 .h-100 {
     height: 100%;
 }

 .d-none {
     display: none;
 }

 .vton-text-white {
     color: #fff;
 }

 .vton-text-black {
     color: #292929;
 }

 .vton-guide-landing {
     background-position: top left;
     background-size: cover;
     background-repeat: no-repeat;
     height: 577px;
     background-image: url(../images/guide_landing_bg.jpg);
 }

 .vton-guide-landing-content {
     padding-left: 120px;
     padding-right: 120px;
 }

 .vton-guide-welcome {
     padding-top: 105px;
 }

 .vton-1anding-footer {
     margin-top: 15px;
 }

 .guide-flex .form-check-input {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;

     width: 18px;
     height: 18px;
     border: 1px solid #fff;
     background-color: transparent;
     border-radius: 3px;
     display: inline-block;
     vertical-align: middle;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
 }

 /* Checked state (white background + tick) */
 .guide-flex .form-check-input:checked {
     background-color: #fff;
     position: relative;
 }

 /* Custom checkmark */
 .guide-flex .form-check-input:checked::after {
     content: '';
     position: absolute;
     left: 5px;
     top: 1px;
     width: 4px;
     height: 9px;
     border: solid #000;
     /* black tick for contrast */
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }

 /* Optional hover and focus effects */
 .guide-flex .form-check-input:hover {
     border-color: #ddd;
 }

 .guide-flex .form-check-input:focus {
     outline: none;
     box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
 }

 /* Label styling */
 .guide-flex label {
     color: #fff;
     margin-left: 6px;
     cursor: pointer;
 }

 .vton-guide-landing-content button {
     background: transparent;
     border: 1px solid #fff;
     border-radius: 0;
     font-size: 16px;
     font-weight: 500;
 }

 .vton-guide-welcome {
     padding-top: 105px;
     font-size: 23px;
     font-weight: 500;
     line-height: 1.4;
 }

 .vton-guide-main {
     display: none;
     padding: 50px;
     height: 577px;
 }



 /*  Popup Content Styling */

 .example-img {
     position: relative;
 }

 .slide-section {
     display: none;
     transition: all 0.5s ease;
 }

 .slide-section.active {
     display: block;
 }

 .nav-step {
     color: #9D9D9D;
     font-weight: 500;
     font-size: 14px;
 }

 .nav-step.active {
     color: #292929;
     font-weight: 700;
 }

 .upload-box {
     border: 2px dashed #ccc;
     border-radius: 0;
     text-align: center;
     padding: 0;
     width: 308px;
     height: 406px;
     position: relative;
 }

 .upload-btn {
     background: #FFD500;
     border: none;
     font-weight: 600;
 }


 .vton-md-6 {
     width: 50%;
 }

 .vton-gt-1-txt {
     font-size: 32px;
     line-height: 1.4;
     font-weight: 400;
     max-width: 299px;
     text-align: left;
 }

 .example-img .vton-gt-type-icon {
     position: absolute;
     right: -10px;
     bottom: -10px;
 }

 .vton-col-9 {
     width: 80%;
 }

 .vton-col-3 {
     width: 20%;
     text-align: right;
 }

 .example-img img {
     width: 100%;
 }

 .vton-col-9 p.fw-semibold {
     text-align: left;
 }

 .vtonGtButton button {
     background: transparent;
     padding: 0;
     cursor: pointer;
 }

 #slide3 .upload-box {
     padding: 0;
     height: auto;
     width: auto;
     border-radius: 0;
     border: none;
 }

 .vton-col-9 .mt-4 {
     text-align: left;
     padding-top: 6%;
 }

 .vton-md-6.vton-w-auto {
     width: auto;
 }

 #slide2 .upload-box button,
 #slide1 .upload-box button {
     position: absolute;
     bottom: 0;
     width: 100%;
     left: 0;
     border-radius: 0;
     color: #292929;
     background-image: url(../images/button_bg.gif);
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
 }

 .vtonNewButton {
     padding: 4px;
     background: #FFF49F;
     color: #292929;
     font-size: 14px;
     border: none;
     font-weight: 600;
     border-radius: 0;
     cursor: pointer;
     width: 165px;
 }

 #closeLanding {
     padding: 10px 20px;
     border-radius: 6px;
     color: #fff;
     border-radius: 0;
     border: 1px solid #fff;
     cursor: pointer;
 }

 .vton-gt-middle-area {
     background-image: url(../images/zigzag_arrow.svg);
     background-repeat: no-repeat;
     background-position: 46% center;
 }

 .slide2-text-area {
     position: relative;
     top: -100px;
 }

 .tryonvirtually-box img {
     margin-bottom: 60px;
 }

 .tryonvirtually-box p.mt-3 {
     padding-bottom: 50px;
     padding-left: 18px;
     padding-right: 18px;
     font-size: 13px;
     font-weight: 500;
 }

 #slide2 .slide2-text-area p {
     color: #707070;
     max-width: 304px;
 }

 #slide3 .vton-gt-1-txt {
     position: relative;
     top: -75px;
 }

 .nav-step span {
     width: 16px;
     height: 16px;
     background: #000;
     color: #fff;
     border-radius: 50%;
     text-align: center;
     font-size: 12px;
     font-weight: 600;
     display: none;
 }

 .vtonGtButton.vtonMobileOnly {
     display: none !important;
 }

 @media (max-width: 1100px) {
     .vtonGtButton.vtonMobileOnly {
         display: flex !important;
     }

     .vton-guide-main {
         height: auto;
     }

     .vtonMobileColumnOnly {
         flex-direction: column;
     }

     .vtonGtButton.vtonDesktopOnly {
         display: none !important;
     }

     .vton-md-6 {
         width: 100%;
     }
     .vtonMobileColumnOnly .d-flex.gap-3 {
    justify-content: space-between;
}

     .vton-gt-1-txt {
         width: 100%;
         max-width: 100%;
     }
     .vton-guide-main{padding: 25px;}

     .vton-gt-middle-area {
         background-size: 21%;
         width: 100%;
         order: 1;
     }
     .slide2-text-area { 
    top: 0;
}

     #slide3 .vton-gt-1-txt {
         top: 0;
     }

     .nav-step span {
         display: inline-block;
     }

     .nav-step label {
         display: none;
     }

     .nav-step.active label {
         display: inline-block;
     }


     .vton-guide-landing-content {
         padding-left: 25px;
         padding-right: 25px;
     }

     .vton-guide-landing .lrv-vton-guide-landing-inner {
         width: 100%;
         display: block !important;
     }

     .vton-1anding-footer {
         width: 100%;
         justify-content: space-between;
     }

     .vton-guide-landing {
         background-image: url(../images/guide_landing_bg_mobile.jpg);
     }

     .vton-guide-main .d-flex.w-100.h-100 .vton-col-9.d-flex.h-100.flex-column.justify-content-end.vton-gt-middle-area {
         order: 1;
         width: 100%;
         flex-wrap: wrap;
     }

     .vton-guide-main .d-flex.w-100.h-100 .vton-col-3 {
         order: 0;
         width: 100%;
         flex-wrap: wrap;
         justify-content: center !important;
         text-align: start;
         flex-direction: row;
     }

     .vton-guide-main .d-flex.align-items-end.justify-content-end.flex-column.mt-4.w-100 {
         justify-content: start !important;
     }

     .slide-section .d-flex.vton-row.w-100.justify-content-between {
         flex-direction: column;
     }

     #stepTexts {
         display: flex;
     }

     .vton-guide-main .d-flex.w-100.h-100 {
         flex-wrap: wrap;
     }

     .d-flex.align-items-end.justify-content-end.flex-row.flex-xl-column.mt-4.w-100 .d-flex.justify-content-center.align-items-center.mt-3.gap-3.vtonGtButton {
         display: none !important;
     }
     .backdrop {overflow: scroll;}

 }