body {
     height: 100vh;
 }

 .left-column {
     background-color: #fff;
     padding: 20px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     border-right: 1px solid #ddd;
 }

 .right-column {
     background-color: #f8f9fa;
     padding: 20px;
 }

 .step {
     display: none;
 }

 .step.active {
     display: block;
 }

 .btn-group-custom {
     display: flex;
     gap: 10px;
 }

 .right-column {
     height: 100vh;
     /* or any fixed height you want */
     position: relative;
     overflow: hidden;
 }

 #forgeViewer {
     width: 100%;
     height: 100%;
     overflow: hidden;
 }

 .progress-container {
     display: flex;
     align-items: flex-start;
     /* 🔁 change from center to top-align titles */
     justify-content: space-between;
     /* ✅ space out pills evenly */
     width: 100%;
     margin-bottom: 15px;
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
     gap: 8px;

     /** ✅ NEW: Make sure it stretches fully */
     flex-grow: 1;
     flex-wrap: nowrap;
     padding-top: 12px;
 }

 .progress-container > div {
     flex: 1;
 }

 .progress-container .progress-step {
     width: 100%;
 }

 .progress-step {
     flex: 1;
     height: 6px;
     background-color: #ccc;
     margin: 0 0px;
     border-radius: 3px;
 }

 .progress-step.active {
     background-color: black;
 }

 .progress-step.previous {
     background-color: lightgray;
 }

 .progress-label {
     font-size: 14px;
     font-weight: bold;
     margin-bottom: 5px;
 }

 .step {
     height: 75%;
     display: block;
 }

 .step-container {
     height: 100%;
     overflow-y: scroll;
     scroll-behavior: smooth;
     scroll-snap-type: y mandatory;
 }

 .step-container .sub-step {
     height: max-content;
     display: flex;
     flex-direction: column;
     justify-content: center;
     border-bottom: none;
     padding-bottom: 3rem;
     padding-top: 3rem;
     padding-right: 2rem;
 }

 .step-container .sub-step:last-child {
     border-bottom: none;
 }

 /* Keep navigation buttons fixed at the bottom */
 .navigation {
     position: absolute;
     bottom: 15px;
     left: 0;
     width: 100%;
     padding: 15px;
     background: white;
     border-top: 1px solid #ddd;
     display: flex;
     justify-content: space-between;
 }

 .left-column {
     position: relative;
     height: 100vh;
     display: flex;
     flex-direction: column;
 }

 .content-wrapper {
     flex-grow: 1;
     overflow: hidden;
     padding-bottom: 60px;
     /* Ensure space for buttons */
 }

#scrollableSteps {
  scroll-snap-type: start !important;
  -webkit-overflow-scrolling: auto; /* Optional: disables momentum on iOS */
  overflow-y: scroll;
}

.sub-step {
  scroll-snap-align: start;
  min-height: 100%;
  box-sizing: border-box;
}


 .progress-step:hover {
     background-color: #999;
     /* slightly darker grey */
     cursor: pointer;
     transition: background-color 0.2s ease;
 }

 /* ✅ Prevent hover color on active */
 .progress-step.active:hover {
     background-color: black;
     cursor: default;
 }

 .progress-title {
     display: block;
     /* ⬅️ this forces it to sit above the pill */
     text-align: start;
     font-size: 12px;
     color: #6c757d;
     margin-bottom: 4px;
     transition: color 0.2s ease;
 }

 .progress-title.active {
     color: black;
 }

 .progress-title {
     display: block;
 }

 #left-main::-webkit-scrollbar {
     display: none;
     /* Chrome, Safari, Opera */
 }

 #left-main {
     overflow: auto;
     -ms-overflow-style: none;
     /* IE and Edge */
     scrollbar-width: none;
     /* Firefox */
 }

 #left-main::-webkit-scrollbar {
     width: 0;
     height: 0;
     display: none;
 }

 #loadingOverlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: #f0f0f0;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     opacity: 1;
     transition: opacity 0.5s ease;
 }

 .svg-wrapper {
     width: 308px;
     /* enough to contain diagonal */
     height: 308px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 svg {
     width: 217.68px;
     height: 217.62px;
     animation: rotate 10s linear infinite;
 }

 @keyframes rotate {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .cls-1 {
     fill: #727272;
 }

 @keyframes animate-svg-fill {
     0% {
         fill: transparent;
     }

     100% {
         fill: #727272;
     }
 }

 .svg-elem-1 {
     animation: animate-svg-fill 5s ease-in 0.8s both;
 }

 .svg-elem-2 {
     animation: animate-svg-fill 5s ease-in 0.9s both;
 }

 .svg-elem-3 {
     animation: animate-svg-fill 5s ease-in 1s both;
 }

 .svg-elem-4 {
     animation: animate-svg-fill 5s ease-in 1.1s both;
 }

 .top-logo svg {
     animation: none !important;
 }

 .st0 {
     fill: #000000;
 }

 .st1 {
     fill: url(#SVGID_1_);
 }

 .st2 {
     fill: url(#SVGID_2_);
 }

 .st3 {
     fill: url(#SVGID_3_);
 }

 .st4 {
     fill: none;
 }

 .st5 {
     fill: url(#SVGID_4_);
 }

 .st6 {
     fill: url(#SVGID_5_);
 }

 .st7 {
     fill: url(#SVGID_6_);
 }

 .st8 {
     fill: url(#SVGID_7_);
 }

 .st9 {
     fill: url(#SVGID_8_);
 }

 .st10 {
     fill: url(#SVGID_9_);
 }

 .st11 {
     fill: url(#SVGID_10_);
 }

 .st12 {
     fill: url(#SVGID_11_);
 }

 .st13 {
     fill: url(#SVGID_12_);
 }

 .st14 {
     fill: url(#SVGID_13_);
 }

 .st15 {
     fill: url(#SVGID_14_);
 }

 .st16 {
     fill: url(#SVGID_15_);
 }

 .st17 {
     fill: url(#SVGID_16_);
 }

 .st18 {
     fill: url(#SVGID_17_);
 }

 .st19 {
     fill: url(#SVGID_18_);
 }

 .st20 {
     fill: url(#SVGID_19_);
 }

 .st21 {
     fill: url(#SVGID_20_);
 }

 .st22 {
     fill: url(#SVGID_21_);
 }

 .st23 {
     fill: url(#SVGID_22_);
 }

 .st24 {
     fill: url(#SVGID_23_);
 }

 .st25 {
     fill: url(#SVGID_24_);
 }

 .st26 {
     fill: url(#SVGID_25_);
 }

 .st27 {
     fill: url(#SVGID_26_);
 }

 .st28 {
     fill: url(#SVGID_27_);
 }

 .st29 {
     fill: url(#SVGID_28_);
 }

 .st30 {
     fill: url(#SVGID_29_);
 }

 .st31 {
     fill: url(#SVGID_30_);
 }

 .st32 {
     fill: url(#SVGID_31_);
 }

 .st33 {
     fill: url(#SVGID_32_);
 }

 .st34 {
     fill: url(#SVGID_33_);
 }

 .st35 {
     fill: url(#SVGID_34_);
 }

 .st36 {
     fill: url(#SVGID_35_);
 }

 .st37 {
     fill: url(#SVGID_36_);
 }

 .st38 {
     fill: url(#SVGID_37_);
 }

 .st39 {
     fill: url(#SVGID_38_);
 }

 .st40 {
     fill: url(#SVGID_39_);
 }

 .st41 {
     fill: url(#SVGID_40_);
 }

 .st42 {
     fill: url(#SVGID_41_);
 }

 .st43 {
     fill: url(#SVGID_42_);
 }

 .st44 {
     fill: url(#SVGID_43_);
 }

 .st45 {
     fill: url(#SVGID_44_);
 }

 .st46 {
     fill: url(#SVGID_45_);
 }

 .st47 {
     fill: url(#SVGID_46_);
 }

 .st48 {
     fill: url(#SVGID_47_);
 }

 .st49 {
     fill: url(#SVGID_48_);
 }

 .st50 {
     fill: url(#SVGID_49_);
 }

 .st51 {
     fill: url(#SVGID_50_);
 }

 .st52 {
     fill: url(#SVGID_51_);
 }

 .st53 {
     fill: url(#SVGID_52_);
 }

 .st54 {
     fill: url(#SVGID_53_);
 }

 .st55 {
     fill: url(#SVGID_54_);
 }

 .st56 {
     fill: url(#SVGID_55_);
 }

 .st57 {
     fill: url(#SVGID_56_);
 }

 .st58 {
     fill: url(#SVGID_57_);
 }

 .st59 {
     fill: url(#SVGID_58_);
 }

 .st60 {
     fill: url(#SVGID_59_);
 }

 .st61 {
     fill: url(#SVGID_60_);
 }

 .st62 {
     fill: url(#SVGID_61_);
 }

 .st63 {
     fill: url(#SVGID_62_);
 }

 .st64 {
     fill: url(#SVGID_63_);
 }

 .st65 {
     fill: url(#SVGID_64_);
 }

 .st66 {
     fill: url(#SVGID_65_);
 }

 .st67 {
     fill: url(#SVGID_66_);
 }

 .st68 {
     fill: url(#SVGID_67_);
 }

 .st69 {
     fill: url(#SVGID_68_);
 }

 .st70 {
     fill: url(#SVGID_69_);
 }

 .st71 {
     fill: url(#SVGID_70_);
 }

 .st72 {
     fill: url(#SVGID_71_);
 }

 .st73 {
     fill: url(#SVGID_72_);
 }

 .st74 {
     fill: url(#SVGID_73_);
 }

 .st75 {
     fill: url(#SVGID_74_);
 }

 .st76 {
     fill: url(#SVGID_75_);
 }

 .st77 {
     fill: url(#SVGID_76_);
 }

 .st78 {
     fill: url(#SVGID_77_);
 }

 .st79 {
     fill: url(#SVGID_78_);
 }

 .st80 {
     fill: url(#SVGID_79_);
 }

 .st81 {
     fill: url(#SVGID_80_);
 }

 .st82 {
     fill: url(#SVGID_81_);
 }

 .st83 {
     fill: url(#SVGID_82_);
 }

 .st84 {
     fill: url(#SVGID_83_);
 }

 .st85 {
     fill: url(#SVGID_84_);
 }

 .st86 {
     fill: url(#SVGID_85_);
 }

 .st87 {
     fill: url(#SVGID_86_);
 }

 .st88 {
     fill: url(#SVGID_87_);
 }

 .st89 {
     fill: url(#SVGID_88_);
 }

 .st90 {
     fill: url(#SVGID_89_);
 }

 .st91 {
     fill: url(#SVGID_90_);
 }

 .st92 {
     fill: url(#SVGID_91_);
 }

 .st93 {
     fill: url(#SVGID_92_);
 }

 .st94 {
     fill: url(#SVGID_93_);
 }

 .st95 {
     fill: url(#SVGID_94_);
 }

 .st96 {
     fill: url(#SVGID_95_);
 }

 .st97 {
     fill: url(#SVGID_96_);
 }

 .st98 {
     fill: url(#SVGID_97_);
 }

 .st99 {
     fill: url(#SVGID_98_);
 }

 .st100 {
     fill: url(#SVGID_99_);
 }

 .st101 {
     fill: url(#SVGID_100_);
 }

 .st102 {
     fill: url(#SVGID_101_);
 }

 .st103 {
     fill: url(#SVGID_102_);
 }

 .st104 {
     fill: url(#SVGID_103_);
 }

 .st105 {
     fill: url(#SVGID_104_);
 }

 .st106 {
     fill: url(#SVGID_105_);
 }

 .st107 {
     fill: url(#SVGID_106_);
 }

 .st108 {
     fill: url(#SVGID_107_);
 }

 .st109 {
     fill: url(#SVGID_108_);
 }

 .st110 {
     fill: url(#SVGID_109_);
 }

 .st111 {
     fill: url(#SVGID_110_);
 }

 .st112 {
     fill: url(#SVGID_111_);
 }

 .st113 {
     fill: url(#SVGID_112_);
 }

 .st114 {
     fill: url(#SVGID_113_);
 }

 .st115 {
     fill: url(#SVGID_114_);
 }

 .st116 {
     fill: url(#SVGID_115_);
 }

 .st117 {
     fill: url(#SVGID_116_);
 }

 .st118 {
     fill: url(#SVGID_117_);
 }

 .st119 {
     fill: url(#SVGID_118_);
 }

 .st120 {
     fill: url(#SVGID_119_);
 }

 .st121 {
     fill: url(#SVGID_120_);
 }

 .st122 {
     fill: url(#SVGID_121_);
 }

 .st123 {
     fill: url(#SVGID_122_);
 }

 .st124 {
     fill: url(#SVGID_123_);
 }

 .st125 {
     fill: url(#SVGID_124_);
 }

 .st126 {
     fill: url(#SVGID_125_);
 }

 .st127 {
     fill: url(#SVGID_126_);
 }

 .st128 {
     fill: url(#SVGID_127_);
 }

 .st129 {
     fill: url(#SVGID_128_);
 }

 .st130 {
     fill: url(#SVGID_129_);
 }

 .st131 {
     fill: url(#SVGID_130_);
 }

 .st132 {
     fill: url(#SVGID_131_);
 }

 .st133 {
     fill: url(#SVGID_132_);
 }

 .st134 {
     fill: url(#SVGID_133_);
 }

 .st135 {
     fill: url(#SVGID_134_);
 }

 .st136 {
     fill: url(#SVGID_135_);
 }

 .st137 {
     fill: url(#SVGID_136_);
 }

 .st138 {
     fill: url(#SVGID_137_);
 }

 .st139 {
     fill: url(#SVGID_138_);
 }

 .st140 {
     fill: url(#SVGID_139_);
 }

 .st141 {
     fill: url(#SVGID_140_);
 }

 .st142 {
     fill: url(#SVGID_141_);
 }

 .st143 {
     fill: url(#SVGID_142_);
 }

 .st144 {
     fill: url(#SVGID_143_);
 }

 .st145 {
     fill: url(#SVGID_144_);
 }

 .st146 {
     fill: url(#SVGID_145_);
 }

 .st147 {
     fill: url(#SVGID_146_);
 }

 .st148 {
     fill: url(#SVGID_147_);
 }

 .st149 {
     fill: url(#SVGID_148_);
 }

 .st150 {
     fill: url(#SVGID_149_);
 }

 .st151 {
     fill: url(#SVGID_150_);
 }

 .st152 {
     fill: url(#SVGID_151_);
 }

 .st153 {
     fill: url(#SVGID_152_);
 }

 .st154 {
     fill: url(#SVGID_153_);
 }

 .st155 {
     fill: url(#SVGID_154_);
 }

 .st156 {
     fill: url(#SVGID_155_);
 }

 .st157 {
     fill: url(#SVGID_156_);
 }

 .st158 {
     fill: url(#SVGID_157_);
 }

 .st159 {
     fill: url(#SVGID_158_);
 }

 .st160 {
     fill: url(#SVGID_159_);
 }

 .st161 {
     fill: url(#SVGID_160_);
 }

 .st162 {
     fill: url(#SVGID_161_);
 }

 .st163 {
     fill: url(#SVGID_162_);
 }

 .st164 {
     fill: url(#SVGID_163_);
 }

 .st165 {
     fill: url(#SVGID_164_);
 }

 .st166 {
     fill: url(#SVGID_165_);
 }

 .st167 {
     fill: url(#SVGID_166_);
 }

 .st168 {
     fill: url(#SVGID_167_);
 }

 .st169 {
     fill: url(#SVGID_168_);
 }

 .st170 {
     fill: url(#SVGID_169_);
 }

 .st171 {
     fill: url(#SVGID_170_);
 }

 .st172 {
     fill: url(#SVGID_171_);
 }

 .st173 {
     fill: url(#SVGID_172_);
 }

 .st174 {
     fill: url(#SVGID_173_);
 }

 .st175 {
     fill: url(#SVGID_174_);
 }

 .st176 {
     fill: url(#SVGID_175_);
 }

 .st177 {
     fill: url(#SVGID_176_);
 }

 .st178 {
     fill: url(#SVGID_177_);
 }

 .st179 {
     fill: url(#SVGID_178_);
 }

 .st180 {
     fill: url(#SVGID_179_);
 }

 .st181 {
     fill: url(#SVGID_180_);
 }

 .st182 {
     fill: url(#SVGID_181_);
 }

 .st183 {
     fill: url(#SVGID_182_);
 }

 .st184 {
     fill: url(#SVGID_183_);
 }

 .st185 {
     fill: url(#SVGID_184_);
 }

 .st186 {
     fill: url(#SVGID_185_);
 }

 .st187 {
     fill: url(#SVGID_186_);
 }

 .st188 {
     fill: url(#SVGID_187_);
 }

 .st189 {
     fill: url(#SVGID_188_);
 }

 .st190 {
     fill: url(#SVGID_189_);
 }

 .st191 {
     fill: url(#SVGID_190_);
 }

 .st192 {
     fill: url(#SVGID_191_);
 }

 .st193 {
     fill: url(#SVGID_192_);
 }

 .st194 {
     fill: url(#SVGID_193_);
 }

 .st195 {
     fill: url(#SVGID_194_);
 }

 .st196 {
     fill: url(#SVGID_195_);
 }

 .st197 {
     fill: url(#SVGID_196_);
 }

 .st198 {
     fill: url(#SVGID_197_);
 }

 .st199 {
     fill: url(#SVGID_198_);
 }

 .st200 {
     fill: url(#SVGID_199_);
 }

 .st201 {
     fill: url(#SVGID_200_);
 }

 .st202 {
     fill: url(#SVGID_201_);
 }

 .st203 {
     fill: url(#SVGID_202_);
 }

 .st204 {
     fill: url(#SVGID_203_);
 }

 .st205 {
     fill: url(#SVGID_204_);
 }

 .st206 {
     fill: url(#SVGID_205_);
 }

 .st207 {
     fill: url(#SVGID_206_);
 }

 .st208 {
     fill: url(#SVGID_207_);
 }

 .st209 {
     fill: url(#SVGID_208_);
 }

 .st210 {
     fill: url(#SVGID_209_);
 }

 .st211 {
     fill: url(#SVGID_210_);
 }

 .st212 {
     fill: url(#SVGID_211_);
 }

 .st213 {
     fill: url(#SVGID_212_);
 }

 .st214 {
     fill: url(#SVGID_213_);
 }

 #radio-cards-container {
     margin-top: 5rem;
     display: flex;
     flex-direction: column;
     /* Stack cards vertically */
     width: 100%;
     /* Ensure the container takes full width */
     flex-wrap: wrap;
     justify-content: center;
 }

 .radio-card {
     border: 2px solid rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     width: 100%;
     margin-right: 2rem;
     margin-bottom: 2rem;
     padding: 3rem;
     transition: all 0.3s;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
 }

 .radio-card:hover {
     border: 2px solid #00a9ce;
     cursor: pointer;
 }

 .radio-card-check {
     display: none;
     position: absolute;
     top: 1.5rem;
     left: 1.5rem;
 }

 .radio-card-check i {
     font-size: 1.6rem;
     color: #00a9ce;
 }

 .text-center {
     text-align: center;
 }

 .radio-card-icon img {
     width: 80px;
 }

 .radio-card-label {
     margin-top: 1rem;
     font-weight: 600;
     font-size: 1.2rem;
 }

 .radio-card-label-description {
     margin-top: 0.5rem;
     color: rgba(0, 0, 0, 0.7);
 }

 .radio-card.selected {
     border: 2px solid #00a9ce;
 }

 .radio-card.selected .radio-card-check {
     display: inline-flex;
 }

 .radio-card .products-icons-grid__item svg {
     fill: #a3a3a3;
 }

 .radio-card .radio-card-label {
     color: #a3a3a3;
 }

 .radio-card .radio-card-label-description {
     color: #a3a3a3;
 }

 .radio-card.selected svg {
     fill: #00a9ce;
 }

 .radio-card.selected .radio-card-label {
     color: #1d252d;
 }

 .radio-card.selected .radio-card-label-description {
     color: #6b6b6b;
 }
 
 .card-check {
      position: relative;
      border: 1px solid #ccc;
      border-radius: 0.5rem;
      padding: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .card-check input[type="checkbox"] {
      display: none;
    }

    .card-check .check-icon {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      width: 1.25rem;
      height: 1.25rem;
      border: 1px solid #ccc;
      border-radius: 0.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .card-check input[type="checkbox"]:checked + .check-icon {
      background-color: #000;
      border-color: #000;
      color: #fff;
    }

    .card-check input[type="checkbox"]:checked ~ .card-body {
      border-color: #000;
      color: #000;
    }

    .card-check input[type="checkbox"]:checked ~ .card-body h6 {
      color: #000;
    }

    .card-body h6 {
      margin: 0;
      font-weight: 600;
      color: #333;
    }

    .card-body small {
      color: #777;
    }

    .card-check input[type="checkbox"]:checked + .check-icon i {
      display: block;
    }

    .card-check .check-icon i {
      display: none;
      font-size: 0.75rem;
    }

    .card-group {
      display: flex;
      gap: 1rem;
    }