body > div.body-wrapper.hs-content-id-155659616924.hs-site-page.page > main > div > div > div > div > div{ padding: 0px !important; } body,textarea{ font-family: Helvetica, Arial, sans-serif !important; } textarea.form-control{ font-family: Helvetica, Arial, sans-serif !important; font-size: 16px !importat; } .wrapper{ background-color: #eee; /* position: relative; background-image: url(https://20925353.fs1.hubspotusercontent-na1.net/hubfs/20925353/raw_assets/public/project/images/quiz/quiz_bg.png) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important;*/ } .quiz_card{ min-height:450px; } .content{ min-height: calc(100vh - 104px); } /* .quiz-header{ background-color: #ffff; } */ .header_logo { width: 160px; left: 47px; margin: 0px auto; height:auto; } /* Progress Bar Css*/ .progress { position: relative; height: 10px !important; display: block; width: 100%; background-color: #dbdbdb; border-radius: 5px; margin: 0.5rem auto 1rem auto; overflow: hidden; max-width: 870px; } .progress .determinate { position: absolute; top: 0; left: 0; bottom: 0; transition: width .3s linear; background-color: #86BD3E; border-radius: 5px; } .option{ background-color: #f0f5ff !important; } .option-img{ width: 32px !important; } #section2,#section3{ display:none; } .trusted-by{ background-color: #fff; padding: 40px 50px; text-align: center; width: 100%; } .quiz-block label{ cursor: pointer; } .radio_option { width:20px; height:20px; cursor: pointer; } input[type=radio]:checked{ background-image:none; } .radio_option:focus { outline: none; /* Add this line to remove the blue outline on focus */ } .checked:checked[type=radio]{ /* background-image: url('https://20925353.fs1.hubspotusercontent-na1.net/hubfs/20925353/raw_assets/public/project/images/tick.png') !important; background-color: #34c759 !important; border-color: #34c759 !important; */ content: url('https://20925353.fs1.hubspotusercontent-na1.net/hubfs/20925353/raw_assets/public/project/images/tick.png'); background-color: #34c759 !important; border-color: #34c759 !important; width: 20px; appearance: none; border-radius: 50%; border: none; } .bg_selected{ background-color: } .quiz-footer{ background-color: #000; width: 100%; height: 40px; } .grey-color{ color: #ababab !important; } .quiz-block{ cursor: pointer; } .form-control:focus{ box-shadow:none !important; } .others_form textarea, .begin_form textarea{ font-size: 16px; } .myform, .my_form{ width: 50% ; } /* .my_form{ width: 100% !important; } */ .form-group { margin-bottom:15px !important; } .form-group label { color: #2e2e2e !important; font-size: 16px !important; font-family: Helvetica, Arial, sans-serif !important; } .form-group input, .form-group textarea{ height: 40px; font-size:16px !important; } .iti{ width: 100%; } .iti__selected-dial-code{ font-family: Helvetica, Arial, sans-serif !important; font-size: 16px; } .back_btn, .back_btn:hover{ background-color: #fff !important; color: #000 !important; text-decoration: none !important; border: none; border-radius: 10px; padding: 14px 30px; font-size: 18px; } .getStartedBtn, .getStartedBtn:hover{ text-decoration: none !important; border-radius: 10px; font-size: 18px; background-color: #ff3b30 !important; padding: 14px 30px !important; } /* .primary_btn .right_arrow{ width:32px; position:absolute; right:17px; /* / top:18px; / */ top: 30%; } */ .slide-transition { position: absolute; left: 0; right: 0; animation-duration: 0.5s; animation-timing-function: ease-in-out; } .slide-transition { transition: transform 0.9s; } .left-exit{ /* transform: translateX(-100%); */ animation-name: LeftEnter; } .left-enter { /* transform: translateX(100%); */ animation-name: LeftExit; } .unchecked{ appearance: none; background-color: white !important; width: 20px; height: 20px; cursor: pointer; border-radius: 50%; border: 1px solid #705b5b; } .buttons-alignment{ display: flex; justify-content: space-between; } #next{ width:275px; border:none; } .btn_next_bg{ background-color: #ff3b30 !important; border-radius: 10px; height: 55px; } #next:disabled{ opacity:0.5; pointer-events: none; } #next:disabled:hover span{ right: 5px !important; } #back{ width:275px; border:none; } .responsive_back{ display: none; } .normal_back{ display: block; } .tiny_tm{ font-size:7px; } /* .quiz-block.block-checked{ background-color:#5492ff; } */ @keyframes LeftEnter { from { opacity: 0; } to { opacity: 1; } } .banner_hover.getStartedBtn.primary_btn{ display:flex; } .getStartedBtn.banner_hover{ width:245px; } @keyframes LeftExit { from { opacity: 1; } to { opacity: 0; } } .error{ font-family: Helvetica, Arial, sans-serif !important; color:#ff0000; font-size:14px; } @media (max-width: 1520px){ .progress{ width: 95% !important; } } @media (max-width: 1340px){ .progress{ width: 92% !important; } } @media (max-width: 1024px){ .questions, .trusted-by{ padding: 40px !important; } .progress{ width: 90% !important; max-width: 800px !important; } } @media(max-width: 1024px){ .primary_btn .right_arrow { position: absolute; right: 10px !important; } } @media (max-width: 767px){ /* .back_btn, .getStartedBtn{ width: 100% !important; } */ .content{ min-height: calc(100vh - 140px); } .quiz-footer{ height: 60px; } } @media (max-width: 680px){ .primary_btn .right_arrow { width: 34px; } .myform, .my_form{ width: 100% !important; } .content { min-height: calc(100vh - 5px); } } @media (max-width: 550px){ .content { min-height: calc(100vh + 65px); } .primary_btn .right_arrow { position: absolute; } } @media (max-width: 445px){ .progress{ width:84% !important; } .buttons-alignment{ display: block; } .back_btn, .getStartedBtn{ width: 100% !important; } .back_btn{ margin-bottom:15px; } .responsive_back{ display: block; } .normal_back{ display: none !important; } } .hs-tools-menu.hs-collapsed{ display:none; } .getStartedBtn { border: 1px solid #cf571b; position: relative; overflow: hidden; transition: all 0.3s ease; } .getStartedBtn:hover { padding-right: 30px; /* Adjust this value based on your preference */ } .getStartedBtn span { position: relative; top: 0; right: 5px; transition: all 0.3s ease; } .getStartedBtn:hover span { right: -8px; } .normal_back { position: relative; overflow: hidden; transition: all 0.3s ease; } .normal_back :hover { padding-right: 30px; /* Adjust this value based on your preference */ } .normal_back span { position: relative; top: 0; left: 0px; transition: all 0.3s ease; } .normal_back:hover span { left: -10px; }