.quizWrap {
    padding-block: 7.5rem;
}

.quizWrap_inner {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    align-items: center;
}

.data .quizWrap_inner,
.brand .quizWrap_inner {
    gap: 3rem;
}

.quiz_header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.quiz_price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 35.625rem;
}

.quiz_price h4,
.text-link a {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #252525; 
    font-weight: 400;
}

.text-link a {
    display: inline-block;
}

.text-link a::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid #252525;
}

.quiz_price p {
    font-size: 0.875rem;
    line-height: 1.7;
    color: #252525;
}

.quiz_price_card {
    border-radius: 1.25rem;
    padding: 2.5rem;
    background-image: linear-gradient( 135deg, #029BDF, #935FA9 );
    max-width: 400px;
    width: 100%;
}

.brand .quiz_price_card  {
    padding-block: 5rem;
}

.quiz_price_card h2 {
    color: #fff;
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 400;
    z-index: 2;
}

.brand .quiz_price_card h2 {
    padding-right: 14rem;
}

.quiz_price_card img {
    position: absolute;
    right: 4%;
    bottom: 0;
    width: 7.5rem;
}

.brand .quiz_price_card img {
    right: 0%;
    bottom: -5rem;
    height: 13rem;
    width: 13rem;
}

.pageTitle {
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.1;
    background: var(--btnGradient3);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: capitalize;
    margin: 0;
}

.sponsor {
    background: #fff;
    border-radius: 1.25rem;
    padding: 2.5rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
}

.sponsor img {
    width: 20rem;
}

.sponsor h4 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 400;
}

.quiz_body_outer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
}

.data .quiz_body_outer {
    gap: 3rem;
}

.quiz_body {
    width: 100%;
    border-radius: 1.25rem;
    padding: 5rem 7.5rem;
    background-image: linear-gradient( 135deg, #935FA9, #029BDF );
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quiz_body_inner {
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.quiz_que {
    color: white;
    font-size: 1.875rem;
    line-height: 1.33;
    font-weight: 500;
    display: flex;
    flex-wrap: nowrap;
    gap: 1.25rem;
}

.quiz_answerList {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.quiz_answerList.optSelected {
    pointer-events: none;
}

.answerList_option,
.topicsSlider h5 {
    border-radius: 1.25rem;
    background: white;
    padding: 1.25rem 2.5rem;
    line-height: 1.2;
    font-size: 1.5rem;
    color: #915EAA;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.25rem;
    font-weight: 400;
    cursor: pointer;
    box-shadow: 0 0.25rem 0.25rem #00000040;
    transition: all 0.2s ease-in-out;
}

.topicsSlider h5 {
    padding: 0;
}

.topicsSlider h5 a {
    padding: 1.25rem 2.5rem;
    display: block;
    width: 100%;
    text-decoration: none;
    color: #915EAA;
}

.answerList_option:hover,
.answerList_option.selected,
.answerList_option.correct,
.topicsSlider h5:hover {
    background: #029BDF;
    color: #fff;
}

.topicsSlider h5:hover a {
    color: #fff;
}

.answerList_option.wrong {
    background: #743738;
    color: #FFFFFF59;
}

.answerList_option.correct::after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    bottom: 0;
    width: 3.5rem;
    background: url(../../pages/tick_mark.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateX(30%);
}

.answerList_option.correct.without-tick::after {
    display: none;
}

.quiz_next,
.quiz_next:active,
.quiz_next:focus {
    border-radius: 1.25rem;
    background: white;
    padding: 0.5em 1.5em;
    line-height: 1.33;
    font-size: 1.5rem;
    color: #029BDF;
    font-weight: 500;
    box-shadow: 0 0.25rem 0.25rem #00000040;
    outline: none;
}

.quiz_next:hover {
    color: white;
    background: #935FA9;
}

.quiz_next.disabled {
    background: #fff;
    color: #029BDF;
}

.p-alt {
    font-size: 1.2rem;
    max-width: 45rem;
    text-align: center;
}

.topicsSlider {
    max-height: 30rem;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 3rem;
}

.searchTab {
    width: 100%;
    max-width: 50rem;
}

.searchTab .form-control {
    border: 1px solid #000;
    outline: none !important;
    box-shadow: none !important;
    color: #111;
    padding: 1.25rem 2.5rem 1.25rem 5.5rem;
    border-radius: 5rem;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 400;
    background: transparent;
}

.searchTab img {
    position: absolute;
    left: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
}

.searchTab .form-control::placeholder {
    color: #25252580;
    opacity: 1;
}
  
.searchTab .form-control::-ms-input-placeholder {
    color: #25252580;
}

.detailsWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
}

.videoSliderWrap {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.videoSlider,
.videoSlider .splide__slide,
.imageSlider,
.imageSlider .splide__slide {
    border-radius: 2rem;
    overflow: hidden;
}

.videoSlider_ctrl {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2.5rem;
}

.videoSlider_ctrl > div {
    width: 3rem;
    padding: 0.25rem;
    cursor: pointer;
}

.videoSlider_ctrl img {
    width: 100%;
}

.imageSliderWrap {
    padding-inline: 3.75rem;
}

.imageSlider_prev,
.imageSlider_next {
    position: absolute;
    top: 50%;
    width: 2.5rem;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 3;
}

.imageSlider_prev {
    left: 0;
}

.imageSlider_next {
    right: 0;
}

.detailsContent {
    padding-top: 2.5rem;
    max-width: 56.25rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
}

.detailsContent h3 {
    margin: 0;
    font-weight: 400;
    font-size: 3.125rem;
    color: #029BDF;
    text-transform: capitalize;
}

.detailsContent p {
    font-size: 1.5rem;
    line-height: 1.5;
    margin: 0;
}

.detailsWrap .quiz_card h2 {
    text-transform: none;
}

.detailsWrap .quiz_card .quiz_card_btn {
    background-size: 200% 400%;
}

.detailsWrap .quiz_card:hover .quiz_card_btn {
    background-size: cover;
}



/*timer*/

.timerClock {
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 0px;
    right: 50%;
    transform: translate(50%, -170%);
}

.timerClock_body {
    z-index: 1;
    position: absolute;
    inset: -0.6rem;
}

.timerClock_body::before {
    position: absolute;
    content: "";
    inset: 0;
    z-index: 9;
    background: #2f2830;
    border-radius: 50%;
}

.timerClock_body::after {
    position: absolute;
    content: "";
    inset: 0.3rem;
    z-index: 10;
    background: #57535e;
    border-radius: 50%;
}

.timerClock_btn {
    display: block;
    position: absolute;
    z-index: 1;
    inset: 0;
    transform-origin: center center;
}

.timerClock_btn::after {
    position: absolute;
    content: "";
    left: 50%;
    top: 0;
    transform: translate(-50%,-40%);
    width: 0.8rem;
    height: 1rem;
    background: #574d4c;
}

.timerClock_btn::before {
    position: absolute;
    content: "";
    left: 50%;
    top: 0;
    transform: translate(-50%,-150%);
    width: 1.1rem;
    height: 0.5rem;
    background: #2c2930;
    z-index: 2;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}

.timerClock_btn_left {
    transform: rotate(-45deg);
}

.timerClock_btn_right {
    transform: rotate(45deg);
}

.timerClock_hook {
    display: block;
    position: absolute;
    z-index: 2;
    inset: 0;
    transform-origin: center center;
}

.timerClock_hook::after {
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    top: -1.1rem;
    width: 1.4rem;
    height: 0.85rem;
    border: 0.2rem solid #594c56;
    border-radius: 0.3rem;
}

.timerClock_hook::before {
    position: absolute;
    content: "";
    z-index: 2;
    width: 0.4rem;
    height: 0.4rem;
    background: #584a59;
    left: 50%;
    transform: translateX(-50%);
    top: -0.35rem;
    border-radius: 50%;
}

.pie {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    background-color: #b62528;
    border: 2px solid white;
    position: relative;
    z-index: 2;
}

.pie .block{
    position:absolute;
    background:#2a2b2f;
    width: 0.75rem;
    height: 0.75rem;
    display:block;
    border-radius:50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#time{
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  color: black;
  opacity: 0;
}

.degree{
      background-image:
        linear-gradient(90deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

@media( max-width: 1399px ) {
    .quizWrap {
        padding-block: 5rem 7.5rem;
    }
}

@media( max-width: 767px ) {
    .quizWrap {
        padding-block: 4rem;
    }
    .quiz_price_card {
        padding: 2rem;
    }
    .quiz_price_card h2 {
        font-size: 1.75rem;
    }
    .quiz_body {
        padding: 5rem 1.5rem;
    }
    .answerList_option {
        padding: 1.25rem 1.5rem;
    }
    .sponsor {
        padding: 2rem;
        flex-direction: column;
        text-align: center;
    }
    .sponsor h4 {
        font-size: 2rem;
    }
    .sponsor img {
        width: 100%;
    }
    .brand .quiz_price_card  {
        padding-block: 1.5rem;
    }
    .brand .quiz_price_card h2 {
        padding-right: 6rem;
        font-size: 1.5rem;
    }
    .brand .quiz_price_card img {
        right: -12%;
        bottom: -1.5rem;
        height: 9rem;
        width: 9rem;
    }
    .videoSlider_ctrl > div {
        width: 2.25rem;
        padding: 0.25rem;
    }
    .imageSliderWrap {
        padding-inline: 2.75rem;
    }
    .imageSlider_prev,
    .imageSlider_next {
        width: 1.75rem;
    }
    .quizWrap_inner {
        gap: 3rem;
    }
    .quiz_header {
        gap: 1.5rem;
    }
    .quiz_price h4 {
        font-size: 1rem;
    }
    .quiz_price_card {
        padding: 1.5rem 2.5rem;
    }
    .quiz_price_card img {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 7.5rem;
    }
    .sponsor {
        padding: 1.5rem 2.5rem;
        gap: 1rem;
    }
    .sponsor img {
        width: 15rem;
    }
    .sponsor h4 {
        font-size: 1.2rem;
    }   
    .searchTab .form-control {
        padding: 1.25rem 1.25rem 1.25rem 4rem;
    } 
    .searchTab img {
        left: 1.5rem;
    }
}

.scrollWrap {
    overflow: hidden;
}

.scrollWrap > div {
    margin-right: -3rem !important;
}

.topicsSlider h5.attempted::after {
    position: absolute;
    z-index: 5;
    content: attr(data-note);
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: block !important;
    color: #000;
    text-transform: capitalize;
    font-style: italic;
    line-height: 1;
    font-size: 0.6em;
}

.topicsSlider h5.attempted {
    opacity: 0.7;
    pointer-events: none;
}