*{ box-sizing:border-box;}
html, body{margin: 0;}
html{font-smoothing:antialiased;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased; scroll-behavior: smooth;}
body{font:normal 16px/18px 'Baloo Thambi 2', Helvetica, sans-serif; margin: 0; background: var(--primary-color); color: #fff;  counter-reset: my-sec-counter;}
.clear{content:".";display:block;clear:both;height:0;visibility:hidden;}
img{max-width:100%;width:auto\9;height:auto;border:0;-ms-interpolation-mode:bicubic; vertical-align: middle;}
p{margin:5px 0;}

a{ text-decoration:none; color: #2d2d2d;}
i{ color:#6b6b6b; font-size: 16px; vertical-align: middle;}
ul{ padding: 0; margin:0;}
ul, ul li{ list-style:none;  padding: 0; margin:0;}
h1, h2, h3, h4, h5, h6{ margin: 5px 0;}
/************ Commom var declarations ************/
:root {
    --primary-color: #525252;
    --option-txt: #404040;
    --white: #ffffff;
    --light-red: #fedcde;
    --dark-black: #000;
    --black: #58595c;
    --light-black: #58595c;
    --grey: #b9b9b9;
    --green: #2cab64;
    --red: #ff0000;
    --light-grey: #f3f3f2;
    --purple: #5c009f;
    --space1: 6px;
    --space2: 12px;
    --space3: 18px;
    --space4: 24px;
    --space5: 30px;
    --space6: 36px;
    --space7: 42px;
    --space8: 48px;
    --space9: 54px;
    --space10: 60px;
}
.container{ max-width: 970px; margin: 0 auto;}
.align-right{ text-align: right;}
.align-center{ text-align: center;}
.mandatory{ color: var(--red); display: inline-block; font-size: 20px; margin-left: 2px;}
/************ Header styles ************/
header { box-shadow: 0 9px 12px 0 rgba(0, 0, 0, 0.16); text-align: center; background: var(--primary-color); padding: var(--space2) var(--space1);}
header img{ width: 240px;}

.content-wrapper { background: url("https://gumlet.assettype.com/vikatan/2022-06/f0ccd720-7542-40ce-b8c7-3748ddaa79be/background.png") no-repeat #202020; background-size: 100%; max-width: 80%; margin: var(--space6) auto; border-radius: var(--space2); padding: var(--space8); overflow-y: auto; /*display: grid;*/ align-items: center;}
.table-grid{ display: table; vertical-align: middle; overflow: hidden;}
.content-wrapper.main-page {position: relative; padding-bottom: 50px;}
.content-wrapper.main-page:before, .content-wrapper.main-page:after{ content: ''; position: absolute; bottom: 0;}
.content-wrapper.main-page:before{ background: url("https://gumlet.assettype.com/vikatan/2022-06/3436db18-ebc2-479e-a2fd-1ea1a1cdf1d6/main_page_left_img.png") no-repeat; left: 0; width: 295px; height: 245px; }
.content-wrapper.main-page:after{ background: url("https://gumlet.assettype.com/vikatan/2022-06/e8077cd9-d087-4a01-bfbf-8231fec583d7/main_page_right_img.png") no-repeat; right: 0; width: 268px; height: 290px;}

.main-page-title { color: var(--white); text-align: center;}
.main-page-title h1{ display: inline-block; vertical-align: middle; font-weight: bold; font-size: 50px; margin: 0 10px;}
.main-page-title h2{ font-size: 30px; font-weight: bold;}
.main-page-title p{ max-width: 50%; margin: var(--space7) auto; color: #e9e9e9; font-weight: normal; font-size: 18px; line-height: 26px;}

.cta-align{text-align: center; margin: var(--space6) 0 0;}
.cta-btn{ display: inline-block; background: var(--green); color: var(--white); padding: var(--space2) var(--space5); border-radius: var(--space2); font-size: 18px; font-weight: bold; display: none; }
.cta-btn-2{ display: inline-block; background: var(--green); color: var(--white); padding: var(--space2) var(--space5); border-radius: var(--space2); font-size: 18px; font-weight: bold; display: none; }
.nav-btn{ display: inline-block; background: var(--green); color: var(--white); padding: var(--space2) var(--space5); border-radius: var(--space2); font-size: 18px; font-weight: bold; border:0; }
.submit-btn{ display: inline-block !important; background: var(--green); color: var(--white); padding: var(--space2) var(--space5); border-radius: var(--space2); font-size: 18px; font-weight: bold; border:0; }


/*.questions-wrapper{ display: table-cell; vertical-align: middle;}*/
.questions-wrapper .item { display: grid; grid-template-columns: 4fr 8fr; align-items: center; grid-gap: var(--space8);}
.questions-wrapper .item .question{ color: var(--white); max-width: 75%;  margin: 0 auto;}
.questions-wrapper .item .question h1{ display: grid; grid-template-columns: max-content auto; align-items: center; grid-gap: var(--space3); font-size: 22px; line-height: 34px; margin: 0 0 var(--space6) 0;}
.questions-wrapper .item .question .count{ width: 50px; height: 50px; line-height: 50px; border-radius: 50%; text-align: center; background: var(--white); color: var(--black); font-size: 40px;}
.questions-wrapper .item img{ border-radius: var(--space2);}

.options{ padding: 0 var(--space2) 0 70px; counter-reset: section;}
.options li{ background: var(--white); border-radius: 60px; color: var(--option-txt); padding: var(--space2); margin: var(--space3) 0; font-weight: 600; display: grid; width: 100%; align-items: center; grid-template-columns: max-content auto; font-size: 14px; line-height: 20px;}
.options li:before{counter-increment: section;  content: counter(section, upper-alpha); background: #b6b9b7; width: 32px; height: 32px; line-height: 32px; border-radius:50%; display: inline-block; color: var(--white); text-align: center; font-weight: bold; font-size: 20px; margin-right: var(--space1); float: left;}
.options p{ color: #fcfcfc; font-size: 14px; line-height: 22px; display: none;}
.options > div{ position: relative;}
.options > div img{ width: 100px !important; height: 100px; border-radius: 50% !important; position: absolute; top: -25px; border: solid 2px #b6b9b7;}
.options.img-options > div{ margin: var(--space10) 0;}
.options.img-options li{ padding-left: 68px;}
.options.img-options p{ margin-top: var(--space5);}

.image-list {display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; grid-gap:10px;}
.image-list img{width: auto !important; border-radius:0 !important;}

.actor-list {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; grid-gap:10px;}
.actor-list img{width: auto !important; border-radius:0 !important;}

.result-content{ display: grid; grid-template-columns: max-content auto; grid-gap: var(--space8); align-items: center;}
.result-content > div h4{ font-size: 20px; font-weight: normal; margin-bottom: var(--space4);}
.result-content ul{ margin-top: var(--space6);}
.result-content ul li{ padding-left: 40px; margin: var(--space4) 0; position: relative; color: #dbdbdb;}
.result-content ul li:before{content: ""; position: absolute; left:0; top:0; font-family: 'icomoon'; font-size: 20px; background: url(https://gumlet.assettype.com/vikatan/2022-06/649e7101-2c4e-4318-a5bb-701b998a2f4c/nft_right_arrow.png); background-size: 100%; width: 20px; height: 20px;}

.result{display: grid; grid-template-columns: max-content max-content 400px; align-items: center; justify-content: center; grid-gap: var(--space6); text-align: center;}
.score-wrapper{}
.score-wrapper h5{ font-size: 22px;}
.score-wrapper h2{color: #ffc200; font-size: 34px; line-height: 40px;}
.score-div { position: relative; margin: var(--space5) 0;}
.score-display{ position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); text-shadow: 0 3px 6px rgba(0, 0, 0, 0.42); font-size: 4.6rem; font-weight: bold;} 
.result p{color: #dbdbdb; font-size: 20px; line-height: 30px; margin-bottom: var(--space4);}

footer{ max-width: 80%; display: grid; grid-template-columns: max-content auto; align-items: center; margin: 0 auto; color: var(--white); padding: 0 var(--space4);}
.footer-links{ text-align: right;}
.footer-links a{color: var(--white);}

.purple-theme{ background-image: url("https://gumlet.assettype.com/vikatan/2022-06/92a01db6-28eb-4e76-9dd0-8701f7829308/quiz_pattern.png"); background-size: 100%;}
.purple-theme,.purple-theme header{ background-color: var(--purple);}
.purple-theme .content-wrapper{ background: none;}
.two-grid{display: grid; grid-template-columns: 4fr 8fr; align-items: center; grid-gap: var(--space8);}
.content-section { max-width: 75%; margin: 0 auto;}
.content-section h2{ color: #ffc841; font-size: 44px; line-height: 56px; font-weight: bold; margin-bottom: var(--space5);}
.content-section p{ font-size: 22px; line-height: 38px; }

.purple-theme .questions-wrapper .item .question h1{color:#ffc841;}
.purple-theme .questions-wrapper .item .question .count{background:#ffc841; color: var(--dark-black);}

.purple-theme .questions-wrapper .owl-stage .owl-item:not(first-of-type) .options { display: block; grid-template-columns: repeat(2, 1fr); grid-gap: var(--space2); grid-row-gap: 0;}

.steps-content{display: grid; grid-template-columns: auto max-content; padding: 0 var(--space8); margin-bottom: var(--space4);}
.multi-steps > li.is-active ~ li:before, .multi-steps > li.is-active:before { font-family: inherit; font-weight: 700;}
.multi-steps > li.is-active ~ li:after, .multi-steps > li.is-active:after {background-color: #ededed;}

.multi-steps {display: table;table-layout: fixed;width: 100%;}
.multi-steps > li {text-align: center;display: table-cell;position: relative;color: var(--black);}
.multi-steps > li span {position: absolute;top: 50%;transform: translate(-50%, -50%);left: 50%;font-weight: bold;font-size: 22px;}
.multi-steps > li:before {content: "";display: block;margin: 0 auto 4px;background-color: #fff;width: 36px;height: 36px;line-height: 32px;text-align: center;font-weight: bold;border-width: 0px;border-style: solid;border-color: tomato;border-radius: 50%;}
.multi-steps > li:after {content: "";height: 2px;width: 100%;background-color: var(--white);position: absolute;top: 16px;left: 50%;z-index: -1;}
.multi-steps > li:last-child:after {
  display: none;}
.multi-steps > li.is-active:before {background-color: #fff;border-color: tomato;}
.multi-steps > li.is-active ~ li {color: #808080;}
.multi-steps > li.is-active ~ li:before {background-color: #ededed;border-color: #ededed;}
.multi-steps li:nth-last-of-type(1).is-active{ color: var(--white);}
.multi-steps li:nth-last-of-type(1).is-active:before{background: var(--green);}
.multi-steps li:nth-last-of-type(2).is-active{ color: var(--white);}
.multi-steps li:nth-last-of-type(2).is-active:before{background: var(--green);}
.multi-steps li:nth-last-of-type(3).is-active{ color: var(--white);}
.multi-steps li:nth-last-of-type(3).is-active:before{background: #ff9e03;}
.multi-steps li:nth-last-of-type(4).is-active{ color: var(--white);}
.multi-steps li:nth-last-of-type(4).is-active:before{background: #c71818;}
.multi-steps li:nth-last-of-type(5).is-active{ color: var(--white);}
.multi-steps li:nth-last-of-type(5).is-active:before{background: #c71818;}

.form-wrapper{background-image: linear-gradient(to bottom, #8c00b7, #5c009f 101%); padding: var(--space4); border-radius: var(--space2); }
.form-page form{max-width: 80%; margin: 0 auto;}
.form-page form { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; grid-gap: var(--space6); grid-row-gap: 0; text-align: left;}
.form-page form > div{margin: var(--space2) 0; position: relative; padding-bottom: var(--space4);}
.form-page form input,.form-page form select{ width: 100%; padding: var(--space2); border-radius: var(--space1); border:0; background: var(--white); height: 40px;}
.form-page form input:focus,.form-page form select:focus{ outline: none;}
.form-page form label{display: block; font-size: 14px; margin-bottom: var(--space1);}
.form-submit {margin-top: var(--space3); }
.form-intro-cnt h2{ margin: 0; font-size: 20px; line-height: 32px;}
.form-intro-cnt h3{margin: var(--space2) 0; font-size: 18px; line-height: 30px;}
.form-intro-cnt h4{font-size: 14px; line-height: 24px; margin-bottom: var(--space4); max-width: 80%; margin: 0 auto var(--space4) auto;}

.article-wrapper{}
.article-wrapper-grid{ display: inline-flex; flex-wrap: wrap; grid-gap:var(--space6); justify-content: center; margin: var(--space6) 0;}
.article-wrapper-grid a{ width: 300px; background: var(--white); display: block; border-radius: var(--space1);}
.article-wrapper-grid a img{ border-radius: var(--space1) var(--space1) 0 0;}
.article-wrapper-grid a h6{ padding: var(--space2); font-size: 14px; line-height: 22px;}

.popup-wrapper{background: rgba(0,0,0,0.9); position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9;}
.popup-div{ background: var(--white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: var(--space1); padding: var(--space8); max-width: 700px; text-align: center;}
.popup-content p {color: var(--dark-black); font-size: 18px; line-height: 26px; font-weight: bold;}

.success{background: #1e8804 !important; color: #fff !important;}
.error{background: #f00 !important; color: #fff !important;}
form .error {color: red !important; margin-left: 5px; position: absolute; left: 0; bottom: 0; background: transparent !important; }
.form-submit{grid-column: span 2;}
.quiz_options {
  cursor: pointer;
}

.owl-carousel {
    display: none;
}
.no-js .owl-carousel {
    display: block;
}
.owl-carousel.owl-loaded {
    display: block;
}
.owl-dots{pointer-events: none;}
@media only screen and (max-width: 1530px) { 
    .main-page-title > div img {width: 100px;}
    .main-page-title h1{ font-size: 44px; }
    .result img{width: 200px;}
}
@media only screen and (max-width: 1024px) {
    .content-wrapper{ max-width: 94%; padding: var(--space3);}
    .main-page-title > div img {width: 50px;}
    .main-page-title h1{font-size: 24px;}
    .main-page-title h2 { font-size: 20px; margin: var(--space4) 0 0;}
    .main-page-title p{ margin: var(--space4) auto; font-size: 14px; max-width: 100%;}
    .content-wrapper.main-page:before{width: 150px; height: 124px; background-size: 100%;}
    .content-wrapper.main-page:after{width: 110px; height: 118px; background-size: 100%;}
    footer{ display: block; max-width: 100%; text-align: center;}
    .footer-links{text-align: center; padding: var(--space1) 0;}
    .questions-wrapper .item{grid-gap: var(--space3);}
    .questions-wrapper .item .question{ max-width: 100%;}
    .questions-wrapper .item .question h1{ font-size: 18px; line-height: 30px;}
    .result{grid-template-columns: auto auto; grid-gap: var(--space2);}
    .score-div{display: inline-block; vertical-align: middle;}
    .result img {width: 145px; display: inline-block; vertical-align: middle;}
    .score-wrapper h2{ display: inline-block; vertical-align: middle; margin-left: 30px;}
    .score-display{font-size: 4.0rem;}
    .result > div:last-of-type{grid-column: span 2;}
    .intro-section{ text-align: center;}
    .two-grid{ display: block;}
    .intro-section .two-grid img {margin-bottom: var(--space4);}
    .purple-theme .questions-wrapper .owl-stage .owl-item:not(first-of-type) .options{ display: block;}
}
@media only screen and (max-width: 767px) {
    header{padding: var(--space1);}
    header img {width: 120px; }
    .content-wrapper{ max-width: 94%; background: #202020; padding: var(--space5); margin-top: var(--space4);}
    .content-wrapper.main-page{ padding-bottom: var(--space5);}
    .content-wrapper.main-page:before,.content-wrapper.main-page:after{ background: none; content: none;}
    .main-page-title > div img{display: none;}
    .main-page-title h1{ font-size: 20px;}
    .main-page-title h2 { font-size: 16px; margin: var(--space3) 0;}
    .main-page-title p{ max-width: 100%; margin:0 0 var(--space4); font-size: 14px; line-height: 22px;}
    .cta-btn{ font-size: 14px;}
    .questions-wrapper .item{display: block;}
    .questions-wrapper .item {}
    .questions-wrapper .item .question{max-width: 100%; margin: var(--space4) 0 0;}
    .questions-wrapper .item .question .count { width: 35px; height: 35px; line-height: 35px; font-size: 26px; }
    .questions-wrapper .item .question h1 {font-size: 16px; line-height: 24px; margin: 0 0 var(--space2) 0;}
    .options{padding:0 var(--space2) 0 0px;}
    .options > div img{width: 70px !important; height: 70px; top: -5px;}
    .options.img-options li { padding-left: 38px; }
    .options.img-options > div { margin: var(--space4) 0; }
    .result-content{display: block;}
    .result-content .coin-img{ text-align: center; margin: 0 auto var(--space4);}
    .result-content > div h4{ font-size: 16px;}
    .result-content ul{ margin-top: 0;}
    .result-content ul li{ font-size: 14px; line-height: 22px; margin: var(--space2) 0;}
    .result{ display: block; }
    .score-wrapper h2{font-size: 24px; line-height: 30px; margin-bottom: var(--space3);}
    .two-grid{ display: block;}
    .content-section{ max-width: 100%; }
    .content-section h2{ font-size: 26px; line-height: 34px; margin: var(--space4) 0;}
    .content-section p { font-size: 18px; line-height: 30px; margin-bottom: var(--space4);}
    .purple-theme .questions-wrapper .owl-stage .owl-item:not(first-of-type) .options{ display: block;}
    .form-page .content-section h2 { font-size: 20px; line-height: 32px; }
    .form-page form{ max-width: 100%; display: block;}
    .article-wrapper h2{ font-size: 20px; line-height: 24px;}
    .article-wrapper-grid{ grid-gap: var(--space2); margin: var(--space6) 0 0;}
    .article-wrapper-grid a{ width: 190px;}
    
    .form-page .content-section h2{ margin: 0; font-size: 16px; line-height: 24px;}
    .purple-theme .content-wrapper{margin-top: 0; padding: var(--space4);}
    .form-intro-cnt h3{ font-size: 14px; line-height: 22px; }
    .form-intro-cnt h4{ max-width: 100%; font-size: 12px; line-height: 20px;}
    .owl-dots{right: 6px;}
    .steps-content{padding: 0; margin-bottom: var(--space2); font-size: 12px;}
    
}
@media only screen and (max-width: 380px) {
   .article-wrapper-grid a{ width: 300px;}
}    
.country{
  color:#000 !important;
}