.toolsContainer{justify-content:space-between;gap:24px;width:100%;margin-top:50px;margin-bottom:50px;display:flex}.toolsInputGroup,.toolsQuizGroup{width:100%;max-width:calc(50% - 12px)}.toolsInput{min-width:0;padding:16px 22px;font-size:17px}.toolsLabel{font-size:22px}.toolsButton{width:52px;height:52px}.toolsLock{width:36px;height:36px}.toolsOnlineText{font-size:15px}.toolsOnlineCount{font-size:22px}@media (max-width:1550px){.toolsContainer{margin-top:40px;margin-bottom:40px}.toolsLabel{font-size:20px}.toolsInput{padding:14px 20px;font-size:16px}.toolsButton{width:48px;height:48px}.toolsOnlineCount{font-size:20px}.toolsOnlineText{font-size:14px}}@media (min-width:768px) and (max-width:1023px){.toolsInputGroup,.toolsQuizGroup{padding:22px!important}.toolsInput{padding:13px 18px!important;font-size:15px!important}.toolsButton{width:46px!important;height:46px!important}.toolsLabel{font-size:19px!important}.toolsQuizInfo{min-width:0!important}}@media (max-width:767px){.toolsContainer{flex-direction:column;gap:20px;margin-top:40px}.toolsInputGroup,.toolsQuizGroup{max-width:100%!important;padding:28px!important}.toolsLabel{font-size:18px!important}.toolsContainer{gap:16px;margin-top:30px;margin-bottom:30px}.toolsInputGroup,.toolsQuizGroup{border-radius:20px!important;gap:16px!important;padding:22px 16px!important}.toolsLabel{gap:10px!important;font-size:17px!important}.toolsInput{padding:14px 18px!important;font-size:15px!important}.toolsButton{width:44px!important;height:44px!important}.toolsQuizContent{flex-direction:row!important;justify-content:space-between!important;align-items:center!important;gap:12px!important}.toolsOnlineText{font-size:14px!important}.toolsOnlineCount{font-size:20px!important}.toolsLock{width:28px!important;height:28px!important}}@media (max-width:431px){.toolsInputGroup,.toolsQuizGroup{border-radius:18px!important;gap:14px!important;padding:18px 12px!important}.toolsLabel{gap:8px!important;font-size:16px!important}.toolsInput{padding:12px 16px!important;font-size:14px!important}.toolsButton{width:40px!important;height:40px!important}.toolsButton svg{width:20px!important;height:20px!important}}
:root{--primary-blue:#6db5f9;--primary-purple:#bb5eed;--bright-blue:#4db6ff;--dark-blue:#131d30;--dark-gray:#374151}.variantCard{color:var(--dark-blue);cursor:pointer;border-radius:50px;justify-content:center;align-items:center;padding:16px 24px;font-size:17px;font-weight:700;text-decoration:none;transition:all .4s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;overflow:hidden}.variantCard:after{content:"";mix-blend-mode:normal;background:radial-gradient(circle at center,rgba(var(--subject-rgb),.2)0%,rgba(var(--subject-rgb),.1)25%,transparent 50%);opacity:0;z-index:0;width:200%;height:200%;transition:all .5s cubic-bezier(.34,1.56,.64,1);position:absolute;top:-50%;left:-50%;transform:scale(.5)rotate(0)}.variantCard>*{z-index:2;position:relative}@media (hover:hover){.variantCard:hover{color:rgb(var(--subject-rgb))}.variantCard:hover:after{opacity:1;transform:scale(1)rotate(180deg)}}@media (max-width:1600px){.variantCard{padding:14px 20px;font-size:15px}}@media (max-width:1280px){.variantCard{padding:13px 18px;font-size:15px}}@media (max-width:1024px){.variantCard{min-height:54px;padding:14px 20px;font-size:15px}}@media (max-width:768px){.variantCard{border-radius:40px;min-height:50px;padding:12px 16px;font-size:15px}}@media (max-width:640px){.variantCard{border-radius:30px;min-height:48px;padding:12px 14px;font-size:14px}}@media (max-width:480px){.variantCard{border-radius:24px;width:100%;min-height:44px;padding:10px 12px;font-size:14px}}