@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Oleo+Script:wght@700&display=swap');

 /* Montserrat for all typography */
 .my-hub-form-container * {
     font-family: 'Montserrat', sans-serif !important;
 }

 /* Specific elements to ensure they inherit */
 .my-hub-form-container body,
 .my-hub-form-container .container,
 .my-hub-form-container .step,
 .my-hub-form-container .left-col,
 .my-hub-form-container .right-col,
 .my-hub-form-container .form-card,
 .my-hub-form-container .step-form-card,
 .my-hub-form-container .confirmation-card,
 .my-hub-form-container input,
 .my-hub-form-container select,
 .my-hub-form-container textarea,
 .my-hub-form-container button,
 .my-hub-form-container label,
 .my-hub-form-container p,
 .my-hub-form-container span,
 .my-hub-form-container h1,
 .my-hub-form-container h2,
 .my-hub-form-container h3,
 .my-hub-form-container h4,
 .my-hub-form-container h5,
 .my-hub-form-container h6 {
     font-family: 'Montserrat', sans-serif !important;
 }

 /* Keep Oleo Script for the logo only */
 .my-hub-form-container .logo,
 .my-hub-form-container .step-logo {
     font-family: 'Oleo Script', cursive !important;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Montserrat', sans-serif;
     background: #fff;
     color: #000;
     line-height: 1.6;
 }

 .container {
     max-width: 1320px;
     margin: 0 auto;
     padding: 40px 20px;
     min-height: 100vh;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
 }

 .step {
     display: none;
     grid-column: 1 / -1;
 }

 .step.active {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }

 /* ===== STEP 0: LANDING ===== */
 .left-col {
     position: relative;
     padding-left: 40px;
     padding-top: 40px;
     margin-top: 40px;
     display: flex;
     flex-direction: column;
 }

 .logo {
     font-family: 'Oleo Script', cursive;
     font-weight: 700;
     font-size: 28.37px;
     color: #293D93;
     position: absolute;
     top: -15px;
     left: 40px;
 }

 .title {
     font-weight: 500;
     font-size: 45.11px;
     line-height: 55px;
     color: #293D93;
     margin-bottom: 20px;
     max-width: 570px;
 }

 .title span {
     color: #E70B75;
 }

 .subtitle {
     font-weight: 500;
     font-size: 16.98px;
     line-height: 28px;
     color: #000;
     max-width: 415px;
     text-align: justify;
     margin-bottom: 40px;
 }

 .image-wrapper {
     width: 416px;
     height: 416px;
     transform: rotate(-4.03deg);
     margin-left: 28px;
 }

 .image-wrapper img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
 }

 .right-col {
     display: flex;
     flex-direction: column;
     padding-top: 40px;
 }

 .form-title {
     font-weight: 700;
     font-size: 33.36px;
     line-height: 41px;
     color: #293D93;
     margin-bottom: 30px;
     text-align: left;
 }

 .form-card {
     background: #FBFBFB;
     border-radius: 16.68px;
     padding: 50px 40px;
     width: 100%;
     max-width: 539px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
 }

 .form-group {
     margin-bottom: 25px;
 }

 .form-label {
     display: block;
     font-weight: 600;
     font-size: 13.34px;
     color: #293D93;
     margin-bottom: 8px;
 }

 .input-field {
     width: 100%;
     padding: 9.17px 41.7px;
     font-size: 10.84px;
     color: #333;
     border: 0.834px solid #C0C0C0;
     border-radius: 8.34px;
     outline: none;
     transition: border .3s;
 }

 .input-field::placeholder {
     color: #D9D9D9;
     font-size: 10.84px;
 }

 .input-field:focus {
     border-color: #293D93;
 }

 .btn {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0.834px 53.37px;
     gap: 13.34px;
     height: 44.2px;
     border-radius: 31.69px;
     font-weight: 600;
     font-size: 13.34px;
     cursor: pointer;
     transition: all .3s;
     width: 100%;
     margin-top: 20px;
 }

 .btn-primary {
     background: #293D93;
     color: #fff;
     border: none;
 }

 .btn-primary:hover {
     background: #1e2d70;
 }

 .btn-outline {
     background: transparent;
     color: #293D93;
     border: 0.834px solid #293D93;
 }

 .btn-outline:hover {
     background: #293D93;
     color: #fff;
 }

 .legal-text {
     font-size: 10.01px;
     line-height: 20px;
     color: #000;
     text-align: center;
     max-width: 411px;
     margin: 30px auto 0;
 }

 /* ===== STEP 1 & 2: LEFT ===== */
 .step-left {
     position: relative;
     /*padding-left: 96px;*/
     padding-top: 79px;
     display: flex;
     flex-direction: column;
 }

 .step-logo {
     font-family: 'Oleo Script', cursive;
     font-weight: 700;
     font-size: 28.37px;
     color: #293D93;
     margin-bottom: 20px;
 }

 .step-title {
     font-weight: 500;
     font-size: 45.11px;
     line-height: 55px;
     color: #293D93;
     margin-bottom: 10px;
     max-width: 510px;
 }

 .step-subtitle {
     font-weight: 500;
     font-size: 16.98px;
     line-height: 28px;
     color: #000;
     max-width: 346px;
     text-align: justify;
     margin-bottom: 40px;
 }

 .rocket-img {
     width: 549px;
     height: 549px;
     margin-left: -34px;
     margin-top: 20px;
 }

 .rocket-img img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 /* ===== PROGRESS BAR ===== */
 .progress-container {
     position: absolute;
     top: 299px;
     /*left: 88px;*/
     width: 150px;
 }

 .progress-item {
     display: flex;
     align-items: center;
     margin-bottom: 10px;
     font-size: 14px;
     line-height: 21px;
 }

 .progress-item.completed {
     font-weight: 600;
     color: #293D93;
 }

 .progress-item.active {
     font-weight: 600;
     color: #293D93;
 }

 .progress-item.inactive {
     font-weight: 500;
     color: #868686;
 }

 .circle {
     width: 16.83px;
     height: 16.83px;
     border-radius: 50%;
     margin-right: 10px;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }

 .circle.active {
     border: 2px solid #293D93;
     background: #fff;
 }

 .circle.inactive {
     border: 1.4px solid #868686;
     background: #fff;
 }

 .circle.completed {
     background: #293D93;
     border: 2px solid #293D93;
 }

 .check-icon {
     width: 10px;
     height: 10px;

 }

 .progress-item.completed .check-icon {
     display: block;
 }

 /* ===== RIGHT: STEP 1 & 2 ===== */
 .step-right {
     padding-top: 77px;
     display: flex;
     justify-content: flex-end;
 }

 .step-form-card {
     background: #FBFBFB;
     border-radius: 20.43px;
     padding: 60px 50px;
     width: 660px;
     height: 902px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
     position: relative;
     display: flex;
     flex-direction: column;
 }

 .step-form-title {
     font-weight: 700;
     font-size: 30.83px;
     line-height: 42px;
     color: #293D93;
     margin-bottom: 20px;
     max-width: 494px;
 }

 /* ===== BADGE ===== */
 .info-badge {
     display: flex;
     align-items: center;
     gap: 6.7px;
     width: 493.34px;
     height: 54.69px;
 }

 .eclipse {
     width: 54.69px;
     height: 54.69px;
     border: 1.11616px solid #293D93;
     border-radius: 50%;
     background: url('https://www.garanty.iusp6955.odns.fr/wp-content/uploads/2025/11/Eclipse.png') center/cover no-repeat;
     flex-shrink: 0;
 }

 .union-bg {
     position: relative;
     width: 431.96px;
     height: 43.41px;
     background: url('https://www.garanty.iusp6955.odns.fr/wp-content/uploads/2025/11/Union.png') center/cover no-repeat;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .badge-text {
     position: absolute;
     width: 339px;
     left: 51.74px;
     top: 40%;
     transform: translateY(-50%);
     font-weight: 400;
     font-size: 14px;
     line-height: 21px;
     color: #293D93;
 }

 /* ===== FORM ===== */
 .step-form {
     margin-top: 20px;
 }

 .form-group-lg {
     display: flex;
     flex-direction: column;
     gap: 19px;
     margin-bottom: 19px;
     width: 536.16px;
 }

 .form-label-lg {
     font-weight: 600;
     font-size: 16.34px;
     line-height: 25px;
     color: #293D93;
 }

 .input-lg,
 .select-lg,
 .textarea-lg {
     padding: 11.23px 51.06px;
     font-size: 13.28px;
     color: #333;
     border: 1.02px solid #C0C0C0;
     border-radius: 10.21px;
     width: 100%;
     outline: none;
 }

 .input-lg::placeholder,
 .textarea-lg::placeholder {
     color: #D9D9D9;
 }

 .select-lg {
     appearance: none;
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23293D93' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E") no-repeat right 20px center;
     background-size: 12px;
 }

 .textarea-lg {
     height: 120px;
     resize: none;
 }

 /* ===== NAV BUTTONS ===== */
 .nav-buttons {
     position: absolute;
     bottom: 50px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 20px;
     width: 536px;
     justify-content: space-between;
 }

 .btn-nav {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     gap: 16px;
     width: 137px;
     height: 35px;
     padding: 0.66px 26px;
     background: #293D93;
     border-radius: 25.19px;
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .btn-next span {
     width: 59px;
     height: 16px;
     align-items: center;
     justify-content: center;
     font-family: 'Montserrat', sans-serif;
     font-style: normal;
     font-weight: 600;
     padding: 0.66px 26px;
     font-size: 15px;
     line-height: 16px;
     color: #FFFFFF;
     flex: none;
     order: 0;
     flex-grow: 0;
 }

 .btn-next {
     background: #293D93;
     color: #fff;
     padding: 0.66px 59px 0.66px 26px;
 }

 .btn-next:hover {
     background: #1f2f72;
     transform: translateY(-2px);
 }

 .btn-next .icon-next {
     width: 13px;
     height: 13px;
     flex: none;
     order: 1;
     flex-grow: 0;
     margin-left: 18px;
     margin-right: -8px;
 }

 .btn-prev {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 16px;
     /* 21px can push the icon too far, reduce slightly */
     width: 137px;
     height: 35px;
     padding: 0.66px 26px;
     /* balanced padding — avoids overflow */
     border: 1px solid #293D93;
     border-radius: 25.19px;
     background: transparent;
     cursor: pointer;
     transition: all 0.3s ease;
     box-sizing: border-box;
     /* ✅ ensures padding is included inside width */
     overflow: hidden;
     /* ✅ ensures nothing spills outside */
 }

 /* Text styling */
 .btn-prev span {
     width: 59px;
     height: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Montserrat', sans-serif;
     font-style: normal;
     font-weight: 600;
     font-size: 15px;
     line-height: 16px;
     color: #293D93;
     flex: none;
     order: 1;
     flex-grow: 0;
 }

 /* Icon styling */
 .btn-prev .icon-prev {
     width: 13px;
     height: 13px;
     flex-shrink: 0;
     margin: 0;
     /* ✅ remove negative margins that push it out */
     position: relative;
     top: 0.5px;
     /* optional visual fine-tune */
 }

 /* Hover effect (optional, same tone as next) */
 .btn-prev:hover {
     background: #293D93;
 }

 .btn-prev:hover span {
     color: #fff;
 }

 .btn-prev:hover .icon-prev {
     filter: brightness(0) invert(1);
 }


 /* ===== RESPONSIVE ===== */
 @media (max-width:992px) {

     .container,
     .step.active {
         grid-template-columns: 1fr !important;
         gap: 20px;
        padding: 0px;
     }

     .step-left,
     .step-right {
         padding: 0 !important;
         text-align: center;
         margin-top: 0;
     }

     .step-logo {
         position: static;
         margin-bottom: 15px;
     }

     .step-title {
         font-size: 36px;
         line-height: 44px;
         text-align: center;
     }

     .step-subtitle {
         text-align: center;
         margin-bottom: 30px;
     }

     .rocket-img {
         width: 300px;
         height: 300px;
         margin: 0 auto 40px;
     }

     .step-form-card {
         padding: 40px 25px;
         width: 100%;
         max-width: 100%;
         height: auto;
     }

     .step-form-title {
         font-size: 28px;
         text-align: center;
         margin-bottom: 15px;
     }

     .info-badge {
         width: 100%;
         justify-content: center;
         margin: 15px auto;
     }

     .union-bg {
         width: 80%;
     }

     .badge-text {
         font-size: 13px;
         left: 50px;
         width: 200px;
     }

     .form-group-lg {
         width: 100%;
     }

     .nav-buttons {
         position: static;
         transform: none;
         margin: 30px auto 0;
         width: 100%;
         max-width: 400px;
     }

     .progress-container {
         position: static;
         margin: 20px auto;
         width: 100%;
         text-align: left;
     }
 }

 @media (max-width:576px) {
     .step-title {
         font-size: 28px;
         line-height: 36px;
     }

     .step-form-title {
         font-size: 26px;
     }

     .rocket-img {
         width: 250px;
         height: 250px;
     }

     .step-form-card {
         padding: 35px 20px;
     }

     .info-badge {
         flex-direction: column;
         text-align: center;
         gap: 10px;
     }

     .eclipse {
         margin: 0 auto;
     }

     .union-bg {
         width: 100%;
     }

     .badge-text {
         left: 20px;
         padding-top: 10px;
         padding-bottom: 10px;
     }
 }

 .nav-buttons-fixed {
     position: absolute;
     bottom: 50px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 20px;
     width: 536px;
     justify-content: space-between;
     z-index: 10;
 }

 /* QUESTION & RADIO BUTTONS */
 .question-container {
     text-align: center;
     margin-top: 80px;
 }

 .question-title {
     font-family: 'Montserrat';
     font-weight: 600;
     font-size: 35.89px;
     line-height: 54px;
     text-align: center;
     color: #E70B75;
     width: 473px;
     height: 108px;
     margin: 0 auto 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* RADIO BUTTONS STYLISÉS – TEXTE DANS LE BOUTON */
 .radio-group {
     display: flex;
     justify-content: center;
     gap: 40px;
     margin-top: 40px;
 }

 .radio-option {
     position: relative;
 }

 .radio-input {
     opacity: 0;
     position: absolute;
     width: 100%;
     height: 100%;
     cursor: pointer;
     z-index: 2;
 }

 .radio-label {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 222.47px;
     height: 29.99px;
     background: #FFFFFF;
     border: 1.24876px solid #A3A3A3;
     border-radius: 124.876px;
     font-family: 'Montserrat';
     font-weight: 600;
     font-size: 16px;
     color: #A3A3A3;
     cursor: pointer;
     transition: all 0.3s ease;
     user-select: none;
 }

 /* ÉTAT SÉLECTIONNÉ */
 .radio-input:checked+.radio-label {
     background: #293D93;
     color: #FFFFFF;
     border-color: #293D93;
 }

 /* HOVER */
 .radio-label:hover {
     border-color: #293D93;
     color: #293D93;
 }

 /* Responsive */
 @media (max-width: 992px) {
     .radio-group {
         flex-direction: column;
         align-items: center;
         gap: 20px;
     }

     .radio-label {
         width: 200px;
         height: 28px;
         font-size: 15px;
     }

     .left-col {
         padding-left: 0px;
     }

     .my-hub-form-container .logo,
     .my-hub-form-container .step-logo {
         left: 0px
     }

     .my-hub-form-container .image-wrapper,
     .my-hub-form-container .rocket-img,
     .my-hub-form-container .rocket-img img,
     .my-hub-form-container .image-wrapper img {
         max-width: 100% !important;
         height: 200px !important;
     }
 }

 /* ===== STEP 7: CONFIRMATION ===== */
 .confirmation-card {
     background: #293D93;
     border-radius: 20.43px;
     padding: 60px 50px;
     width: 660px;
     height: 939px;
     position: relative;
     display: flex;
     flex-direction: column;
 }

 .confirmation-title {
     font-weight: 700;
     font-size: 24px;
     line-height: 29px;
     color: #FFFFFF;
     text-align: center;
     margin-bottom: 30px;
 }

 /* Calendar Styles */
 .calendar-container {
     background: white;
     border-radius: 10px;
     padding: 20px;
     margin: 20px 0;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 .calendar-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 15px;
 }

 .current-month {
     font-weight: 600;
     font-size: 18px;
     color: #293D93;
     margin: 0;
 }

 .nav-btn {
     background: #293D93;
     color: white;
     border: none;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .calendar-weekdays {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     text-align: center;
     font-weight: 600;
     font-size: 14px;
     color: #293D93;
     margin-bottom: 10px;
 }

 .calendar-dates {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 5px;
 }

 .calendar-date {
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 5px;
     cursor: pointer;
     font-size: 14px;
 }

 .calendar-date:hover {
     background-color: #f0f0f0;
 }

 .calendar-date.selected {
     background-color: #293D93;
     color: white;
 }

 .calendar-date.other-month {
     color: #ccc;
 }

 .calendar-date.today {
     border: 1px solid #293D93;
 }

 /* Email Confirmation Styles */
 .email-confirmation {
     display: none;
     text-align: center;
     margin-top: 30px;
 }

 .confirmation-email-title {
     font-weight: 700;
     font-size: 38px;
     line-height: 46px;
     color: #FFFFFF;
     margin-bottom: 20px;
 }

 .confirmation-email-text {
     font-weight: 500;
     font-size: 13.5px;
     line-height: 20px;
     color: #FFFFFF;
     margin-bottom: 20px;
     max-width: 474px;
     margin-left: auto;
     margin-right: auto;
 }

 .confirmation-email-resend {
     font-weight: 500;
     font-size: 12px;
     line-height: 15px;
     color: #FFFFFF;
 }

 /* Responsive adjustments for Step 7 */
 @media (max-width: 992px) {
     .confirmation-card {
         width: 100%;
         height: auto;
         padding: 40px 25px;
     }

     .calendar-container {
         padding: 15px;
     }

     .confirmation-email-title {
         font-size: 28px;
         line-height: 34px;
     }
 }

 /* Calendar Date States */
 .calendar-date.unavailable {
     color: #ccc;
     cursor: not-allowed;
     background-color: #f5f5f5;
 }

 .calendar-date.available {
     cursor: pointer;
 }

 .calendar-date.available:hover {
     background-color: #f0f0f0;
 }

 .calendar-date.selected {
     background-color: #293D93;
     color: white;
 }

 .calendar-date.today {
     border: 2px solid #E70B75;
 }

 .calendar-date.other-month {
     color: #aaa;
 }

 .title span {
     color: #E70B75;
 }

 input.input-lg {
     border: 1px solid #6666666e !important;
 }

 /* Step 0 Button Styles Fix */
 #step0 .btn {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     padding: 0.833956px 53.3732px;
     gap: 13.34px;
     width: 437.83px;
     height: 44.2px;
     border-radius: 31.6903px;
     font-weight: 600;
     font-size: 13.34px;
     cursor: pointer;
     transition: all .3s;
     margin-top: 20px;
     position: relative;
     left: auto;
     top: auto;
     transform: none;
 }

 #step0 .btn-primary {
     background: #293D93;
     color: #fff;
     border: none;
 }

 #step0 .btn-outline {
     background: transparent;
     color: #293D93;
     border: 0.833956px solid #293D93;
 }

 #step0 .btn-primary:hover {
     background: #1e2d70;
 }

 #step0 .btn-outline:hover {
     background: #293D93;
     color: #fff;
 }

 /* Remove the absolute positioning that was causing issues */
 #step0 .form-card .btn {
     position: static;
     width: 100%;
     max-width: 437.83px;
     margin-left: auto;
     margin-right: auto;
     display: block;
 }


 input[type=date],
 input[type=email],
 input[type=number],
 input[type=password],
 input[type=search],
 input[type=tel],
 input[type=text],
 input[type=url],
 select,
 textarea {
     border: 1px solid #66666e3b !important;
 }

 /* -------------------------------------------------
   1. GLOBAL CONTAINER – never overflow the screen
   ------------------------------------------------- */
 .my-hub-form-container,
 .my-hub-form-container .container,
 .my-hub-form-container .step,
 .my-hub-form-container .step.active {
     max-width: 100% !important;
     /* keep inside viewport   */
     overflow-x: hidden !important;
     /* cut any horizontal overflow */
     box-sizing: border-box;
 }
 @media (max-width: 576px) {
 /* -------------------------------------------------
   2. STEP-LEFT / STEP-RIGHT – fluid on mobile
   ------------------------------------------------- */
 .my-hub-form-container .step-left,
 .my-hub-form-container .step-right {
     width: 100% !important;
     padding-left: 15px !important;
     padding-right: 15px !important;
 }

 /* -------------------------------------------------
   3. CARD WIDTHS – 100% on small screens
   ------------------------------------------------- */
 .my-hub-form-container .form-card,
 .my-hub-form-container .step-form-card,
 .my-hub-form-container .confirmation-card {
     width: 100% !important;
     max-width: none !important;
     min-width: 0 !important;
     /* allow shrinking */
     box-sizing: border-box;
 }

 /* -------------------------------------------------
   4. FORM GROUPS – never exceed parent
   ------------------------------------------------- */
 .my-hub-form-container .form-group-lg,
 .my-hub-form-container .input-lg,
 .my-hub-form-container .select-lg,
 .my-hub-form-container .textarea-lg {
     width: 100% !important;
     max-width: none !important;
 }

 /* -------------------------------------------------
   5. NAV BUTTONS – stay inside card
   ------------------------------------------------- */
 .my-hub-form-container .nav-buttons,
 .my-hub-form-container .nav-buttons-fixed {
     position: static !important;
     width: 100% !important;
     max-width: 100% !important;
     padding: 0 15px;
     box-sizing: border-box;
     transform: none !important;
     justify-content: space-between;
 }

 /* -------------------------------------------------
   6. BADGE – responsive width
   ------------------------------------------------- */
 .my-hub-form-container .info-badge {
     width: 100% !important;
     max-width: 100% !important;
     flex-wrap: wrap;
     justify-content: center;
 }

 .my-hub-form-container .union-bg {
     width: calc(100% - 70px) !important;
     height: 190px;

     /* leave room for the eclipse */
 }

 /* -------------------------------------------------
   7. PROGRESS BAR – wrap on very small screens
   ------------------------------------------------- */
 .my-hub-form-container .progress-container {
     position: static !important;
     width: 100% !important;
     max-width: 100% !important;
     padding: 0 15px;
     box-sizing: border-box;
 }

 /* -------------------------------------------------
   8. IMAGES – never force overflow
   ------------------------------------------------- */
 .my-hub-form-container .image-wrapper,
 .my-hub-form-container .rocket-img,
 .my-hub-form-container .rocket-img img,
 .my-hub-form-container .image-wrapper img {
     max-width: 100%;
     height: auto;
 }

 /* -------------------------------------------------
   9. RADIO GROUP – stack on mobile
   ------------------------------------------------- */

     .my-hub-form-container .radio-group {
         flex-direction: column;
         align-items: center;
     }

     .my-hub-form-container .radio-label {

         max-width: 260px;
         margin-bottom: 25px;
     }

     .question-title {
         font-size: 30px;
         width: fit-content;
         line-height: 1.1;
     }
 }

 /* -------------------------------------------------
   10. FINAL CLEAN-UP – remove any leftover fixed sizes
   ------------------------------------------------- */
 .my-hub-form-container * {
     min-width: 0;
     /* allow flex items to shrink */
 }
 .confirmimg {
    margin-top: 170px;
 }
@media (max-width: 576px) {
     .confirmimg {
    margin-top: 0px;
 }
 .confirmimgicon{
    width: 200px;
 }
}