.campaign-gamification {
     margin-top: 85px;
 }

 .campaigns-wrapper.gamification {
     padding-top: 30px;
 }
.iti__country, .iti__country-list {
  display: none;
}

 /* Score Modal - Combined with .score-modal, fixed centered with scroll blocking and overlay */
 #scoreModal,
 .campaign-gamification .score-modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.6);
     z-index: 999999;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     opacity: 1;
     transition: opacity 0.5s ease;
 }
 
 /* Score modal content - centered using transform with absolute positioning */
 #scoreModal .score-modal-content,
 .campaign-gamification .score-modal-content {
     background-color: #fff;
     padding: 20px;
     border-radius: 8px;
     width: 90%;
     max-width: 540px;
     max-height: 80vh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     text-align: center;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
 }

 /* iOS-specific modal positioning fix - for iPhones only, not iPads */
 @supports (-webkit-touch-callout: none) {
     @media (max-width: 767px) {
         #scoreModal .score-modal-content,
         .campaign-gamification .score-modal-content {
             top: 35%;
         }
     }
 }

.logoimage .instructions {
  margin: 0 auto;
  color: #01016E;
  font-size: 2.4rem;
  font-weight: 900;
  font-family: var(--v-primary-font);
}

@media screen and (max-width: 767px){
  .logoimage .instructions {
      font-size: 1.4rem;
  }
}

 } /* Block scrolling when modal is visible */
 body.modal-open {
     overflow: hidden;
 }

 /* Distance Indicator - Top of canvas position */
 #distance-indicator {
     position: absolute;
     top: 10px;
     left: 50%;
     transform: translateX(-50%);
     -webkit-transform: translateX(-50%);
     background: rgba(0, 0, 0, 0.85);
     color: white;
     padding: 12px 25px;
     border-radius: 8px;
     font-size: 16px;
     font-weight: 600;
     z-index: 999998;
     text-align: center;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
     display: none;
     pointer-events: none;
     white-space: nowrap;
 }

 .campaigns-wrapper {
     padding: 0;
     background: #ffffff;
 }

 #edit-campaign-loader {
     margin-bottom: 0;
 }

 .campaigns-wrapper.gamification {
     background-color: #00B2F2;
 }

 .campaigns-wrapper.gamification .bannerwithcampaignimage img.desktop_img,
 .campaigns-wrapper.gamification .bannerwithcampaignimage img.tablet_img {
     max-width: 422px;
     width: 90%;
     margin: 0 auto;
     max-height: 228px;
 }

 .campaigns-wrapper.gamification .bannerwithcampaignimage img.mobile_img {
     max-width: 224px;
     width: 90%;
     margin: 0 auto;
     max-height: 116px;
 }

 /* Canvas should not be flipped */
 .campaign-gamification #canvas {
     will-change: transform;
     -webkit-transform: none;
     transform: none;
 }

 .campaign-gamification .disabled {
     pointer-events: none;
     opacity: 0.6;
 }

 .campaigns-wrapper .campaign_entry_page input.error {
     font-size: 1.3rem;
     border: 1px solid #d12e26;
     transition: border .1s;
     outline: none;
 }

 .campaigns-wrapper .campaign_entry_page input.valid.error {
     border: 1px solid #BDBDBD;
 }

 .campaign-gamification .content-section {
     display: flex;
     justify-content: space-evenly;
     flex-direction: row;
     max-width: 1084px;
     width: 100%;
     margin: 30px auto 0 auto;
     gap: 16px;
     /* padding: 16px; */
     box-sizing: border-box;
 }

 .campaign-gamification .logoimage img {
     width: 250px;
     height: 150px;
     margin: 0 auto;
     object-fit: contain;
 }

 .campaign-gamification .content1,
 .campaign-gamification .content2,
 .campaign-gamification .content3 {
     display: flex;
     flex-direction: column;
     background-color: #FF1F8F;
     color: white;
     border-radius: 50%;
     width: calc((100% - 65px) / 3);
     aspect-ratio: 1 / 1;

 }

 .campaign-gamification .content-img {
     width: 16.3%;
 }

 .campaigns-wrapper .form-item input[type=radio]:checked {
     appearance: none;
     background-color: #00B2F2;
 }

 .campaign-gamification .content1>:first-child,
 .campaign-gamification .content2>:first-child,
 .campaign-gamification .content3>:first-child {
     margin: 13.8% auto 1.6%;
     width: 16.3%;
 }

 .campaign-gamification .content-desc {
     font-size: 2rem;
     font-family: var(--v-secondary-font);
     color: #FFF;
     text-align: center;
     font-style: normal;
     font-weight: 400;
     line-height: 1.1;
     margin: 7px 11.3% 11%;
 }

 .campaign-gamification .content-title {
     margin: 0 10px;
     color: #FFF;
     text-align: center;
     font-family: var(--v-heading-font);
     font-size: 2.4rem;
     font-style: normal;
     font-weight: 500;
     line-height: 1.34;
 }


 .campaign-gamification .disclaimer{
     margin: 30px auto 44px auto;
     text-align: center;
     font-size: 1.2rem;
     font-weight: 900;
     line-height: 2;
     max-width: 623px;
     color: #6C137D;
     font-family: var(--v-primary-font);
     border-bottom: none;
 }

.campaign-gamification .disclaimer a{
     color: #6C137D;
     font-family: var(--v-primary-font);
     border-bottom: 1px solid #6C137D;
}

 .campaign-gamification .content-desc span {
     font-family: var(--v-heading-font);
 }

 .campaigns-wrapper .btnContainer {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     gap: 45px;
     margin-top: 30px;
 }

 .success_response_field .prizedraw .step3_content .btnContainer {
     margin-top: 57px;
     gap: 0;
 }

 .campaigns-wrapper .btnContainer p {
     margin: 0;
 }

 .campaigns-wrapper .webform-button--skip,
 .campaign-gamification #skipButton,
 .btnContainer .share,
 .campaigns-wrapper .campaign-gamification .webform-button--next,
 .campaign-gamification .webform-button--prev {
     font-family: var(--v-heading-font);
     text-align: center;
     text-transform: lowercase;
     color: #01016E;
     display: block;
     position: relative;
     padding: 20px 40px;
     min-width: 29.5rem;
     font-size: 20px;
     font-style: normal;
     font-weight: 500;
     line-height: 1.1;
     letter-spacing: 0;
     background-color: #FFFF;
     white-space: normal;
     border: 1px solid #01016E;
     border-radius: 50px;
     margin: 0;
     min-height: unset;
     cursor: pointer;
 }

 .success_response_field .prizedraw .btnContainer .listen {
     margin: 0 39px 0 0;
     display: none;
 }

 .campaign-gamification .btnContainer #playButton,
 .campaign-gamification .btnContainer #startButton,
 .btnContainer .listen {
     font-family: var(--v-heading-font);
     text-align: center;
     text-transform: lowercase;
     color: #fff;
     display: block;
     position: relative;
     padding: 20px 40px;
     min-width: 29.5rem;
     font-size: 20px;
     font-style: normal;
     font-weight: 500;
     line-height: 1.1;
     letter-spacing: 0;
     background-color: #01016E;
     white-space: normal;
     border: 1px solid #01016E;
     border-radius: 50px;
     margin: 0;
     min-height: unset;
     cursor: pointer;
 }

 .campaign-gamification .introSection {
     /* display: flex; */
     /* flex-direction: column; */
     /* max-width: 1254px; */
     margin: 0 auto;
     width: 100%;
     align-items: center;
 }


 @keyframes pulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }

     100% {
         transform: scale(1);
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes slideIn {
     from {
         transform: translateY(20px);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }



 @keyframes countChange {
     0% {
         transform: scale(1);
         color: #ff3333;
     }

     50% {
         transform: scale(1.5);
         color: #ff8800;
     }

     100% {
         transform: scale(1);
         color: #ff3333;
     }
 }



 .campaign-gamification canvas {
     position: absolute;
     top: 0;
     left: 0;
     display: block;
     margin: 0 auto;
     border-radius: 12px;
     /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); */
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     border: 2px solid #ffffff;
 }

 .campaign-gamification video {
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     object-fit: cover;
     opacity: 1 !important;
 }

 .campaign-gamification h1 {
     text-align: center;
     font-size: 2.5em;
     color: #333;
     margin-top: 20px;
     animation: slideIn 0.8s ease-out;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
 }

 /* Base styling */
 .campaign-gamification body {
     margin: 0;
     font-family: 'Segoe UI', Roboto, sans-serif;
     color: #333;
     background-color: #f5f5f5;
     background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
     min-height: 100vh;
     transition: background-color 0.5s ease;
 }

 /* Layout containers */
 .campaign-gamification #wrapper {
     position: relative;
     width: 1034px;
     max-width: 100%;
     border-radius: 12px;
     overflow: hidden;
     transform: translateZ(0);
     margin: 0 auto;
     /* Hardware acceleration */
     transition: all 0.3s ease;
     /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); */
 }

 .campaign-gamification #wrapper:hover {
     transform: translateY(-5px);
 }

 /* Controls wrapper for elements above video */
 .campaign-gamification #controls-wrapper {
     max-width: 1015px;
     width: 100%;
     margin: 0 auto;
     padding: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .campaign-gamification #step2-controls {
     width: 100%;
     animation: fadeIn 0.5s ease;
 }

 /* Ensure chocolate and wrapper images in #step3 always use correct width/height */
 .campaign-gamification #step3 img[alt="chocolate"] {
     width: 175px !important;
     height: 50px !important;
     max-width: none;
     max-height: none;
     min-width: 0;
     min-height: 0;
     object-fit: contain;
     z-index: 2;
 }

 .campaign-gamification #step3 img[alt="chocolateWrap"] {
     width: 75px !important;
     height: 50px !important;
     max-width: none;
     max-height: none;
     min-width: 0;
     min-height: 0;
     object-fit: contain;
     z-index: 1;
 }

 .campaign-gamification #step3-controls .results-container h2 {
     margin: 35px 0 14px 0;
     font-size: 20px;
     line-height: 1.3;
     padding: 5px 0;
     color: #01016e;
 }

 .campaign-gamification #step3-controls .results-container .message {
     font-size: 20px;
     line-height: 26px;
     color: #01016e;
     margin: 24px 0 29px 0;
 }

 .campaign-gamification #step3-controls .action-button {
     min-height: 45px;
     font-size: 16px;
     line-height: 1.5;
     text-align: center;
     margin: 0;
     padding: 9px 0 10px 0;
     /* border: none; */
     background: none;
     color: #FF1F8F;
     font-family: var(--v-heading-font);
 }

 .campaign-gamification #step3-controls .webform-button--next {
     max-height: 45px;
     font-size: 16px;
     line-height: 1.5;
     text-align: center;
     margin: 0;
     padding: 9px 0 10px 0;
     color: #ffffff;
     font-family: var(--v-heading-font);
     min-width: 185px;
     background: #01016E;

 }

 .campaign-gamification #step3-controls .btnContainer {
     margin: 29px 0 29px 0;
     gap: 17px;
 }

 .campaign-gamification #step3-controls .rating {
     margin: 10px 0;
 }

 .campaign-gamification .metrics-container {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 24px;
     border-radius: 10px;
     flex-direction: row;
     color: #01016E;
     /* background-color: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
 }

 /* Media elements */
 .campaign-gamification video {
     display: block;
     width: 100%;
     height: auto;
     visibility: hidden;
     border-radius: 12px;
 }

 .campaign-gamification #openMouthText {
     font-size: 2rem;
     margin-top: 10%;
     color: #fff;
 }

 /* Step panels */
 .campaign-gamification #wrapper section div {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     color: #ff3333;
     z-index: 1;
     transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 }

 .campaign-gamification #step1 {
     animation: fadeIn 0.8s ease forwards;
 }

 .campaign-gamification #startButton:active {
     transform: translateY(1px);
 }

 /* Common elements */
 .campaign-gamification .positionBottom {
     position: absolute;
     bottom: 30px;
     z-index: 2;
 }

 .campaign-gamification #step2 {
     justify-content: space-around;
     padding: 20px;
 }

 .campaign-gamification .metric-box {
     display: flex;
     flex-direction: row;
     align-items: center;
     padding: 30px;
     background-color: rgba(255, 255, 255, 0.8);
     border-radius: 10px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
     width: 100%;
     height: 90px;
     text-align: center;
     justify-content: space-between;
     margin-bottom: 30px;
     gap: 91px;
 }

 .campaign-gamification .count-animation {
     animation: countChange 0.3s ease;
 }

 .campaign-gamification .metric-box span,
 .campaign-gamification #step3 span span {
     font-size: 40px;
     display: inline-flex;
     line-height: 0.6;
     transition: all 0.3s ease;
     font-family: var(--v-heading-font);
 }

 .campaign-gamification #step3 {
     /* Removed background-color to keep canvas visible */
     align-items: center;
     justify-content: center;
 }

 .campaign-gamification #step3 h2 {
     font-size: 36px;
     color: #333;
     margin-bottom: 20px;
     animation: slideIn 0.5s ease-out;
 }

 .campaign-gamification #chewedCount {
     animation: fadeIn 1s ease-out;
 }

 /* New animation elements */
 .campaign-gamification .welcome-text {
     font-size: 32px;
     color: #ffffff;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
     margin-bottom: 15px;
     animation: fadeIn 0.8s ease-out forwards;
 }

 .campaign-gamification .instruction-text {
     font-size: 18px;
     color: #ffffff;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
     margin-bottom: 20px;
     animation: fadeIn 0.8s ease-out 0.2s forwards;
     opacity: 0;
 }

 .campaign-gamification .progress-container {
     width: 100%;
     max-width: 1015px;
     height: 8px;
     background-color: rgba(255, 255, 255, 0.3);
     border-radius: 4px;
     overflow: hidden;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     margin: 0 auto 30px auto;
 }

 .campaign-gamification .progress-bar {
     height: 100%;
     background: linear-gradient(to right, #FFFFFF, #FFFFFF);
     border-radius: 4px;
     transition: width 1s linear;
     box-shadow: 0 0 5px #01016E;
 }


 .campaign-gamification .chew-result {
     margin: 18px 0 24px 0;
     font-size: 64px;
     line-height: 43px;
     color: #ff1f8f;
     font-family: var(--v-heading-font);
 }

 .campaign-gamification .action-button {
     margin-top: 5px;
     margin-bottom: 10px;
     font-family: var(--v-secondary-font);
     text-align: center;
     color: #FFFFFF;
     display: block;
     position: relative;
     border-radius: 0.2rem;
     padding: 16px 50px;
     min-width: 19.7rem;
     font-size: 16px;
     line-height: 22px;
     letter-spacing: 0;
     background-color: #01016E;
     font-weight: bold;
     white-space: normal;
     margin-top: 40px;
     min-height: 36px;
     border: 1px solid #01016E;
     border-radius: 30px;
     cursor: pointer;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
 }

 .campaign-gamification #ContinueButton,
 #skipButton {
     color: #01016E;
     background-color: white;
     cursor: pointer;

 }

 .campaign-gamification .action-button:hover {
     /* background-color: #e64a19; */
     transform: translateY(-2px);
 }

 .campaign-gamification .animation-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 100;
     display: none;
 }

 .campaign-gamification .feedback-messages {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     z-index: 101;
     font-size: 36px;
     font-weight: bold;
     color: #ffffff;
     text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
     pointer-events: none;
     display: none;
     width: 90%;
     text-align: center;
 }

 .campaign-gamification .feedback-good {
     color: #4caf50;
     animation: fadeIn 0.3s, fadeOut 0.3s 0.7s forwards;
 }

 .campaign-gamification .feedback-great {
     color: #ff9800;
     animation: fadeIn 0.3s, fadeOut 0.3s 0.7s forwards, pulse 0.3s infinite;
 }

 .campaign-gamification .mobile-start-modal .btnContainer p {
     margin-top: 0;
 }

 .campaign-gamification .intromodal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, .6);
     z-index: 1500;
     overflow: auto;
     opacity: 1;
     transition: opacity .5s ease;
 }

 .campaign-gamification .intro-modal-content {
     background-color: #fff;
     margin: 4% auto;
     padding: 20px;
     border-radius: 8px;
     width: 95%;
     max-width: 1254px;
     text-align: center;
     letter-spacing: 0;
 }

 #edit-step1-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
 }

 #edit-step1-btn .step1-submit {
     margin: 51px 0 0;
 }


 #edit-step1-btn #test_skills {
     font-family: var(--v-heading-font);
     text-align: center;
     text-transform: lowercase;
     color: #fff;
     display: block;
     position: relative;
     padding: 20px 40px;
     min-width: 29.5rem;
     font-size: 20px;
     font-style: normal;
     font-weight: 500;
     line-height: 1.1;
     letter-spacing: 0;
     background-color: #01016E;
     white-space: normal;
     border: 1px solid #01016E;
     border-radius: 50px;
     margin: 0;
     min-height: unset;
     cursor: pointer;
 }

 #edit-step1-btn #test_skills.disabled{
    background-color: #c4c4c4;
    cursor: default;
    border: none;
}

 .success_response_field .prizedraw .step3_content {
     max-width: 106rem;
 }

 .success_response_field .prizedraw .step3_content h2 {
     font-size: 9rem;
     margin: 14.7rem 0 0;
     font-weight: 400;
     line-height: 1;
     font-family: var(--v-heading-font);
     color: #FF1F8F;
 }

 .campaigns-wrapper section#edit-response-message .failed_response_field {
     font-size: 4.8rem;
     margin: 5.7rem auto;
     font-weight: 400;
     line-height: 1.2;
     font-family: var(--v-heading-font);
     color: #FF1F8F;
 }

 .success_response_field .prizedraw .step3_content h3 {
     font-size: 4.8rem;
     margin: 5.7rem 0 0;
     font-weight: 400;
     line-height: 1.2;
     font-family: var(--v-heading-font);
     color: #FF1F8F;
 }

 .success_response_field .prizedraw .step3_content p {
     font-size: 2rem;
     font-family: var(--v-secondary-font);
     margin: 2.7rem auto .8rem;
     max-width: 90%;
     line-height: 1.25;
     color: #01016E;
 }

 .success_response_field .prizedraw .step3_content p .span1 {
     font-family: var(--v-heading-font);
     color: #01016E;
 }

 .success_response_field .prizedraw .step3_content p .span2 {
     font-family: var(--v-heading-font);
     color: #FF1F8F;
 }

 .success_response_field .prizedraw .step3_content #socialIcons .social-list {
     list-style: none;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-left: 0rem;
     margin-top: 1.6rem;
     padding: 0;
     gap: 1rem;
 }


 .success_response_field .prizedraw .step3_content li {
     width: 47px;
     height: 47px;
     border-radius: 50%;
     border: 2px solid #00B2F2;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: transform 0.2s ease;
 }

 .success_response_field .prizedraw .step3_content li a {
     border-bottom: none;
     height: 24px;
     width: 24px;
 }


 #edit-step1-btn p.faq.faq_btn {
     text-align: center;
     color: #68717D;
     font-family: var(--v-secondary-font);
     font-size: 1rem;
     font-style: normal;
     font-weight: 400;
     line-height: 1.5;
     letter-spacing: 1px;
     padding: 1.9rem 2rem 2rem;
 }

 #edit-step1-btn p.faq.faq_btn a {
     color: #68717D;
     font-size: 1rem;
     font-family: var(--v-primary-font);
     font-style: normal;
     font-weight: 700;
     line-height: 1.5;
     text-decoration-line: underline;
     text-underline-offset: 1px;
     border-bottom: none;
 }

 #edit-step3-btn input#form_submit {
     font-family: var(--v-heading-font);
     text-align: center;
     text-transform: lowercase;
     color: #fff;
     display: block;
     position: relative;
     padding: 20px 40px;
     min-width: 29.5rem;
     font-size: 20px;
     font-style: normal;
     font-weight: 500;
     line-height: 1.1;
     letter-spacing: 0;
     background-color: #01016E;
     white-space: normal;
     border: 1px solid #01016E;
     border-radius: 50px;
     margin: 0 auto;
     min-height: unset;
 }

 #edit-step3-btn p.faq.faq_btn {
     text-align: center;
     color: #68717D;
     font-family: var(--v-secondary-font);
     font-size: 1rem;
     font-style: normal;
     font-weight: 400;
     line-height: 1.5;
     letter-spacing: 1px;
     padding: 0.9rem 2rem 2rem;
 }

 #edit-step3-btn p.faq.faq_btn a {
     color: #68717D;
     font-size: 1rem;
     font-family: var(--v-primary-font);
     font-style: normal;
     font-weight: 700;
     line-height: 1.5;
     text-decoration-line: underline;
     text-underline-offset: 1px;
     border-bottom: none;
 }

 #edit-enter-details {
     margin-bottom: 6.2rem;
 }

 #edit-enter-details .step3_content {
     max-width: 728px;
 }

 #edit-enter-details .step3_content h1 {
     font-size: 4.8rem;
     line-height: 50px;
     color: #FF1F8F;
     margin-top: 7.9rem;
     font-family: var(--v-heading-font);
 }

 .campaigns-wrapper .campaign_entry_page input,
 .campaigns-wrapper .campaign_entry_page select {
     border-radius: 10px;
     color: #68717D;
     font-weight: 400;
     font-size: 1.2rem;
     line-height: 1.2;
     border: 1px solid #BDBDBD;
 }

 .campaigns-wrapper .form-item__description #edit-phone--description,
 .campaigns-wrapper .form-item__description #edit-documents--description {
     color: #6C137D;
     font-size: 1.2rem;
     line-height: 1.2;
     font-family: var(--v-primary-font);
 }

 .campaigns-wrapper .mandatory {
     font-size: 12px;
     line-height: 2;
     color: #FF1F8F;
     margin: 0 0 10px 0;
     letter-spacing: 0;
 }

 .campaigns-wrapper p.campaign-faq.campaign-form-details,
 .campaigns-wrapper .form-item__description #edit-marketing-optin--description {
     font-size: 10px;
     line-height: 15px;
     margin: 0;
     padding-bottom: 16px;
     color: #01016E;
 }

 .campaigns-wrapper .campaign_entry_page input.globalCheckBox {
     width: 1.1rem;
     padding: 0;
     margin: 0;
 }

 .campaigns-wrapper .globalPrivacy .webform-element-description {
     padding-left: 15px;
 }

 .campaigns-wrapper .campaign_entry_page label.form-item__label {
     color: #68717D;
     font-size: 12px;
     line-height: 1.2;
 }

 /* iOS-specific fixes */
 .ios-device video {
     transform: scaleX(-1);
     will-change: transform;
     backface-visibility: hidden;
     -webkit-transform: scaleX(-1);
     -webkit-backface-visibility: hidden;
     -webkit-perspective: 1000;
     perspective: 1000;
     z-index: 1;
 }

 .ios-device canvas {
     transform: translateZ(0);
     will-change: transform;
     backface-visibility: hidden;
     -webkit-transform: translateZ(0);
     -webkit-backface-visibility: hidden;
     -webkit-perspective: 1000;
     perspective: 1000;
     z-index: 1;
 }

 /* Enhanced iOS fixes for modern versions */
 @supports (-webkit-overflow-scrolling: touch) {

     .campaign-gamification #canvas,
     .campaign-gamification #video {
         transform: translate3d(0, 0, 0);
         -webkit-transform: translate3d(0, 0, 0);
         /* position: relative; */
         z-index: 1;
     }

     .campaign-gamification video {
         opacity: 1 !important;
         visibility: visible !important;
     }

     .campaign-gamification #wrapper {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 }

 /* Fix for mobile device camera display */
 @supports (-webkit-touch-callout: none) {
     .campaign-gamification video {
         /* Additional iOS-specific fixes */
         object-fit: cover;
         -webkit-transform: translateZ(0);
         transform: translateZ(0);
     }

     .campaign-gamification #wrapper {
         /* Help with iOS rendering */
         transform: translate3d(0, 0, 0);
         -webkit-transform: translate3d(0, 0, 0);
     }

     /* Fix iOS input delay */
     .campaign-gamification button {
         touch-action: manipulation;
         -webkit-touch-callout: none;
     }
 }

 /* .campaigns-wrapper .campaign_entry_page,
 .campaigns-wrapper .form-fieldset .form-item {
   margin: 0;
 } */

 .campaigns-wrapper .questions .form-item .form-item__label {
     font-family: var(--v-primary-font);
     font-size: 3rem;
     font-style: italic;
     font-weight: 900;
     line-height: 23px;
 }

 #edit-question---wrapper {
     max-width: unset;
     width: 95%;
     margin: 0;
 }

 .campaigns-wrapper .form-item input[type=radio] {
     appearance: none;
     transform: translate(-100%, 75%);
     top: 0;
     left: 0;
     width: 29px;
     height: 29px;
     background: #fff;
     border: 1px solid #BDBDBD;
 }

.campaigns-wrapper .form-item input[type=radio]:hover,
.campaigns-wrapper .option_numbers .form-item input[type=radio]+label:hover {
  cursor: pointer;
}


 .campaigns-wrapper .option_numbers .form-item input[type=radio]+label {
     text-indent: 0;
     margin-left: 26px;
 }

 .campaigns-wrapper .questions .form-item:nth-child(1) .form-item__label {
     color: #6C13BA;
 }

 .campaigns-wrapper .questions .form-item:nth-child(2) .form-item__label {
     color: #06DB86;
 }

 .campaigns-wrapper .questions .form-item:nth-child(3) .form-item__label {
     color: #FFB433;
 }

 .campaigns-wrapper .questions .form-item:nth-child(4) .form-item__label {
     color: #FF1F8F;
 }

 @media screen and (min-width: 768px) {
     #edit-question- {
         max-width: 27rem;
         margin: 10px auto;
     }
 }

 .campaigns-wrapper #edit-question .step1_content.step_content {
     max-width: 776px;
     margin: 0 auto;
     width: 90%;
 }



 .campaigns-wrapper #edit-question .step1_content.step_content h1 {
     font-family: var(--v-heading-font);
     color: #FF1F8F;
     text-align: center;
     font-size: 4.8rem;
     font-style: normal;
     font-weight: 400;
     line-height: 1.2;
     margin-top: 8rem;
     margin-bottom: 3.9rem;
 }


 .campaigns-wrapper .campaign_entry_page,
 .campaigns-wrapper .form-fieldset .form-item {
     margin: 0 auto;
 }

 .campaigns-wrapper .questions .form-item .form-item__label {
     font-family: var(--v-primary-font);
     font-size: 3rem;
     font-style: italic;
     font-weight: 900;
     line-height: 1;
 }


 #edit-question---wrapper {
     max-width: unset;
     width: 95%;
     margin: 0 auto;
 }


 .campaigns-wrapper .intro-modal-content .btnContainer {
     margin-top: 49px;
 }

 @media screen and (min-width: 768px) and (max-width: 1180px) {
     .campaign-gamification #controls-wrapper {
         width: 95%;
     }

     .campaign-gamification .metrics-container {
         gap: 15px;
     }
 }

 @media screen and (min-width: 1064px) and (max-width: 1180px) {
     .campaign-gamification .content-title {
         font-size: 1.8rem;
     }
 }

 @media screen and (min-width: 768px) and (max-width: 1064px) {
     .campaign-gamification .content-title {
         font-size: 1.8rem;
     }

     .campaign-gamification .content-desc,
     .campaign-gamification .content-desc span {
         font-size: 1.5rem;
         line-height: 1;
     }

     .campaign-gamification .content1,
     .campaign-gamification .content2,
     .campaign-gamification .content3 {
         width: calc((100% - 0px) / 3);
     }

     .campaign-gamification .intro-modal-content {
         padding: 20px 10px;
         width: 97%;
     }

     .campaign-gamification .content-section {
         gap: 5px;
         padding: 0;
     }
 }

 /* Responsive adjustments */
 @media (max-width: 767px) {
     .campaign-gamification {
         margin-top: 70px;
     }

     .campaign-gamification #wrapper,
     .campaign-gamification canvas,
     .campaign-gamification video {
         border-radius: 0;
     }

     /* .campaigns-wrapper #step1-info {
         display: none;
     } */

     /* .campaigns-wrapper .mobile-design #step1-info  {
     position: absolute;
    transform: translate(-50%, -110%);
    z-index: 10;
     left: 50%;
   }
.campaigns-wrapper .mobile-design #step1-info .btnContainer {
  gap: 22px;
  flex-direction: row;
} */
     .campaigns-wrapper.gamification .bannerwithcampaignimage {
         padding-top: 24px;
     }

     .campaign-gamification .content-title {
         margin: 0;
         font-size: 1.8rem;
         line-height: 27px;
     }

     .campaign-gamification .content1>:first-child,
     .campaign-gamification .content2>:first-child,
     .campaign-gamification .content3>:first-child {
         width: 17.3%;
     }

     .campaign-gamification .intro-modal-content {
         width: 86%;
     }

     .campaigns-wrapper .intro-modal-content .btnContainer {
         margin-top: 26px;
         gap: 12px;
     }

     .campaign-gamification .logoimage img {
         width: 221px;
         height: 119px;
         margin-top: 28px;
     }

     .campaign-gamification .content-desc,
     .campaign-gamification .content-desc span {
         font-size: 1.5rem;
         line-height: 1;
     }

     .campaign-gamification #controls-wrapper {
         display: none;
     }

     /* Fix feedback messages positioning for mobile */
     .campaign-gamification .feedback-messages {
         font-size: 24px;
         width: 80%;
     }

     /* Ensure distance indicator is visible and properly positioned on mobile */
     #distance-indicator {
         font-size: 14px;
         padding: 10px 20px;
         top: 15px;
     }

     .campaign-gamification.mobile-design #controls-wrapper {
         width: 60%;
         position: absolute;
         left: 50%;
         z-index: 10;
         color: #fff;
         padding: 10px;
         border-radius: 8px;
         flex-direction: row;
         display: flex;
     }

     .campaign-gamification .mobile-start-modal .btnContainer p {
         margin-top: 15px;
     }

     .campaign-gamification #step3-controls .results-container h2 {
         margin: 10px 0 13px 0;
     }

     .campaign-gamification .metric-box span,
     .campaign-gamification #step3 span span {
         line-height: 1;
         font-size: 24px;
     }

     .campaign-gamification #step3-controls .webform-button--next,
     .campaign-gamification #step3-controls .action-button {
         padding: 8px 0;
         min-height: 40px;
     }

      #scoreModal .score-modal-content, .campaign-gamification .score-modal-content {
         width: 86%;
     }

     .campaign-gamification #step3-controls .results-container .message {
         font-size: 16px;
         line-height: 1.2;
         margin: 0;
         padding: 0 0 20px 0;
     }

     .campaign-gamification .chew-result {
         font-size: 40px;
         line-height: 20px;
         margin: 13px 0 20px 0;
     }

     .campaign-gamification .progress-container {
         /*margin: 36px auto;*/
         display: none;
         margin: 0;
     }

     .campaign-gamification .metrics-container {
         gap: 19px;
         /* flex-wrap: wrap; */
         justify-content: center;
         margin: 0;
     }

     /* .campaign-gamification.mobile-design .metric-box {
     margin: 0;
    padding: 10px;
    gap: 10px;
    height: 50px;

   } */

     .campaign-gamification .btnContainer {
         flex-direction: column;
         gap: 22px;
         margin-top: 64px;
     }

     .campaign-gamification .content-section {
         flex-direction: column;
         gap: 0;
         align-items: center;
     }
   

     .campaign-gamification .content1,
     .campaign-gamification .content2,
     .campaign-gamification .content3 {
         margin-bottom: 38px;
         width: 270px;
         height: 270px;
     }

     .campaign-gamification .btnContainer #playButton,
     .campaign-gamification .btnContainer #startButton,
     .btnContainer .listen,
     .campaigns-wrapper .webform-button--skip,
     .campaign-gamification #skipButton,
     .btnContainer .share,
     .campaigns-wrapper .campaign-gamification .webform-button--next,
     .campaign-gamification .webform-button--prev {
         min-width: 21.1rem;
         line-height: 1;
         font-size: 16px;
     }

     /* .campaign-gamification.mobile-design #step1-info .btnContainer #startButton, .campaigns-wrapper .campaign-gamification.mobile-design #step1-info .webform-button--next {
  min-width: 15rem;
} */

     .campaign-gamification .disclaimer {
         max-width: 239px;
         font-size: 1rem;
         line-height: 1.2;
         margin-top: 26px;
     }

     .campaign-gamification .action-button {
         padding: 12px 20px;
     }

     .campaigns-wrapper .questions .form-item .form-item__label {
         font-size: 2.2rem;
         line-height: 2;
     }

     #edit-step1-btn p.faq.faq_btn {
         letter-spacing: 0;
         padding: 1.2rem 2rem 2rem;
     }

     #edit-step1-btn #test_skills {
         min-width: 21.1rem;
         line-height: 1;
         font-size: 16px;
     }

     #edit-step1-btn .step1-submit {
         margin: 31.3px 0 0;
     }

     div#edit-question- {
         max-width: 20rem;
         margin: 5px auto;
     }

     .campaigns-wrapper .option_numbers .form-item input[type=radio]+label {
         text-indent: 15px;
         margin-left: 19.2px;
     }


     .campaigns-wrapper .form-item input[type=radio] {
         transform: translate(0, 75%);
         width: 21.5px;
         height: 21.5px;
     }

     #edit-question .step1_content.step_content {
         max-width: 292px;
     }

     .campaigns-wrapper #edit-question .step1_content.step_content h1 {
         font-size: 3.2rem;
         line-height: 1.1;
         margin-top: 4.2rem;
         margin-bottom: 0.7rem;
     }

     .campaigns-wrapper #edit-question .step1_content.step_content {
         width: 77.5%;
     }

     .campaigns-wrapper .questions .form-item .form-item__label {
         font-size: 2.2rem;
         line-height: 2;
     }

     .campaigns-wrapper .form-item input[type=radio] {
         transform: translate(0, 75%);
         width: 21.5px;
         height: 21.5px;
     }

     .campaigns-wrapper .option_numbers .form-item input[type=radio]+label {
         text-indent: 15px;
         margin-left: 19.2px;
     }

     /* #edit-step1-btn .step1-submit {
         margin: 31.3px 0 0;
     }

     #edit-step1-btn #test_skills {
         min-width: 21.1rem;
         line-height: 1;
         font-size: 16px;
     } */

     .success_response_field .prizedraw .step3_content {
         max-width: 34rem;
         width: 100%;
     }

     .success_response_field .prizedraw .step3_content h2 {
         font-size: 4.5rem;
         margin: 4.9rem 0 0;
         line-height: 0.8;
     }

     .success_response_field .prizedraw .step3_content h3,
     .campaigns-wrapper section#edit-response-message .failed_response_field {
         font-size: 2.8rem;
         margin: 1.5rem auto 0;
         line-height: 1.07;
     }

     .success_response_field .prizedraw .btnContainer .listen {
        margin: 0;
    }

     .success_response_field .prizedraw .step3_content p {
         font-size: 1.6rem;
         margin: 2rem auto 0;
         line-height: 1.25;
     }

     .success_response_field .prizedraw .step3_content .btnContainer {
         flex-direction: column;
         margin-top: 4.2rem;
         gap: 23px;
     }

     .success_response_field .prizedraw .step3_content #socialIcons .social-list {
         margin-left: 0;
         margin-top: 1.5rem;
         gap: .5rem;
     }

     .success_response_field .prizedraw .step3_content .social-list li {
         width: 36px;
         height: 36px;
     }

     .success_response_field .prizedraw .step3_content .social-list li a {
         height: 18px;
         width: 18px;
     }

     #edit-step1-btn p.faq.faq_btn {
         letter-spacing: 0;
         padding: 1.2rem 2rem 2rem;
     }

     #edit-step3-btn input#form_submit {
         min-width: 21.1rem;
         line-height: 1;
         font-size: 16px;
     }

     #edit-step3-btn p.faq.faq_btn {
         letter-spacing: 0;
         padding: 0.2rem 2rem 2rem;
     }

     #edit-enter-details {
         margin-bottom: 4.2rem;
     }

     #edit-enter-details .step3_content h1 {
         font-size: 3.2rem;
         line-height: 35px;
         margin-top: 4.2rem;
     }

     .campaigns-wrapper .campaign_entry_page input,
     .campaigns-wrapper .campaign_entry_page select,
     .campaigns-wrapper .campaign_entry_page label.form-item__label {
         font-size: 10px;
         line-height: 1.2;
     }

     .campaigns-wrapper .form-item__description #edit-phone--description, 
     .campaigns-wrapper .form-item__description #edit-documents--description {
         font-size: 10px;
         line-height: 1.2;
     }

      .campaigns-wrapper .mobile-design #step1-info {
     position: absolute;
     transform: translate(-50%, -110%);
     z-index: 10;
     left: 50%;
 }

 .campaigns-wrapper .mobile-design #step1-info .btnContainer {
     gap: 22px;
     flex-direction: row;
 }

 .campaign-gamification.mobile-design #step1-info .btnContainer #startButton,
 .campaigns-wrapper .campaign-gamification.mobile-design #step1-info .webform-button--next {
     min-width: 15rem;
 }

 .campaign-gamification.mobile-design .metric-box {
     margin: 0;
     padding: 15px;
     gap: 15px;
     height: 45px;

 }
 }