@charset "utf-8";
/* CSS Document */
*{ box-sizing:border-box;}
html{font-smoothing:antialiased;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased; scroll-behavior: smooth;}
body{font:normal 13px/18px "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; margin: 0; color: #6f6f6f; counter-reset: my-sec-counter; background: #f7f9fa;}
.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{ color: #404040; text-decoration: none; display: inline-block;}
ul,ul li{ list-style:none; padding: 0; margin: 0;}
i{ font-size:24px;}
h1,h2,h3,h4,h5,h6{margin:0;}

.m-t-3x{ margin-top:30px;}

.main-wrapper {padding-top: 15px;}

header{/* box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); background-color: #2c2f2f; */padding:20px 10px; text-align: left;}
header .logo{ width:250px;}
footer{display: grid; grid-template-columns: auto auto; align-items: center; padding:20px 0 10px 0; font-size: 15px;}
footer > div:nth-of-type(2){ text-align: right;}
.button{border-radius: 30px; background-color: #2bab64; color: #FFF; padding:15px 80px; text-transform: uppercase; font-weight: bold; font-size: 18px; border: 0;
    outline: none;
    cursor: pointer; margin-top:0;}
#cancel-verify-code-button.button{background-color: #fb0404;}
.content-wrapper{max-width: 1240px; width:100%; margin:15px auto;}
.content-section{position: relative;/*background: #FFF;*/ padding:10px; /*display: grid; grid-template-columns: 44% 56%; align-items: center; z-index: 1;*/}
.content-section:before{background: url("https://image.vikatan.com/static/netcore/20210319/pattern.png") repeat; /*background: #f9f9f9;*/ content: none; position: absolute; width:calc(100% - 20px); height: calc(100% - 20px); left: 10px; top:10px; z-index: -1;}
.content-area{text-align: center;}
.show-img{width:100%;}
.main-txt {margin:0px auto 15px; color: #fff;}
.main-txt h1{font: bold 26px/44px 'NotoSansTamil'; color: #faf59e;}
.main-txt h2{font: normal 14px/28px 'NotoSansTamil'; color: #4e4c4c;}
.main-txt h2 span{ display: block;}
.main-txt h5{font-size: 18px; line-height: 34px; margin-top: 25px; font-weight: normal;}
.main-txt{font-size: 12px;}
.main-txt h6{font-size: 14px;margin-top: 10px; color: rgba(0,0,0,0.4);}
.main-txt h6 span{display:block;}

.main-banner-section {margin: 15px 0 40px; padding: 0 30px; text-align: left;}
.main-banner-section h1{ color: #fff; text-transform: uppercase; font-size: 38px; line-height: 52px; font-family: "Baloo Thambi 2", system-ui; font-weight: bold;}
.main-banner-section h2{color: #ffe625; text-transform: uppercase;     font-size: 26px; font-family: "Baloo Thambi 2", system-ui;
    line-height: 38px; margin: 20px 0 30px;}

.welcome-content-section {margin: 0px 0 50px; position: relative;}
.welcome-content-section:before{
    content: "";
    bottom: -134px;
    left: -23%;
    position: absolute;
    background: url(https://images.assettype.com/vikatan/2025-08-20/1sgvhoah/digitalawardstar.png);
    width: 700px;
    height: 680px;
    z-index: -1;
    background-size: 95%;
    background-repeat: no-repeat;}

.category-wrapper {position: relative;}
.category-wrapper:before{     content: "";
    background: url(https://images.assettype.com/vikatan/2025-08-13/haw8faxk/connection.png);
    position: absolute;
    bottom: -44px;
    left: 50%;
    transform: translateX(-50%);
    width: 342px;
    height: 400px;
    background-size: 100%;}
.category-list {background-image: linear-gradient(to left, rgba(2, 38, 40, 0), #022628 13%);
    padding: 40px 0;
    border-radius: 300px;
    box-shadow: 0 0 75px #1a8085; margin: 15px 0 54px 0; overflow: hidden;}
/* Left shadow */
.category-list:before {
       border-radius: 75px;
    content: "";
    position: absolute;
    top: 46%;
    left: 22px;
    width: 180px;
    height: 190px;
    pointer-events: none;
    z-index: 9;
    transform: translateY(-50%);
    background: linear-gradient(to right, #022628 0%, transparent);
}

/* Right shadow */
.category-list:after {  border-radius: 75px;
    content: "";
    position: absolute;
    top: 46%;
    right: 21px;
    width: 180px;
    height: 190px;
    pointer-events: none;
    z-index: 9;
    transform: translateY(-50%);
    background: linear-gradient(to left, #022628 0%, transparent);
}
.category-list h3{color: #ff0; text-transform: uppercase; font-size: 26px; font-weight: bold; margin-bottom: 25px; margin-top: 10px;}
.category-list i{ width: 128px; height: 128px; line-height: 128px; border-radius: 50%; color: #fff; display: inline-block; border: 1px solid #fff; font-size: 80px;}
.category-list .banner-slider{margin: 20px 0;}

.form{ padding:15px 0;}
.form input{border-radius: 6px;  background-color: #ffffff; padding:8px 15px; outline: none;}
.otp input{ width:36px; border: 0;border-bottom: 2px solid #989898; border-radius: 0; margin:0 5px; background: transparent;padding: 5px 0;
text-align: center;}
.resend{ text-transform: uppercase;font-family: 'PFHandbookPro-Regular'; font-size:16px; magin-top:5px;}
.resend button{ color: #ff0000; border:0; background:none; }
.otp-number .main-txt{margin-bottom: 0;}

.questions{ background-color: transparent; border-radius: 10px; margin-top:0px;}

.quiz-panel{font-family: 'NotoSansTamil'; padding: 40px 0 10px;}
.quiz-panel h1{ color: #fff; font-size: 20px; font-weight: bold; display: grid; grid-template-columns: max-content auto; align-items: center; justify-content: center; padding: 0 20px; text-align: left; margin-top:15px;}
.count{ width:35px; height: 35px; line-height: 38px; border-radius: 50%; margin-right: 10px; background: #fff; display: inline-block; color: #000; text-align: center;}
.quiz-panel ul{display: flex; flex-wrap: wrap; grid-template-columns: repeat(5,1fr); justify-content: center; grid-column-gap: 10px; padding: 0 20px;  width: 92%; margin: 0 auto;}
.quiz-panel ul li{font-weight: bold; width: 200px; margin: 15px 0;display:grid; grid-template-rows: max-content 1fr max-content; grid-gap:10px; text-align: center; align-items: center; background: #f2f2f2; border: 4px solid #f2f2f2; padding-bottom: 15px; border-radius: 10px;}
.quiz-panel ul li img {width:100%; height:200px; border-radius: 10px 10px 0 0;}
.quiz-panel ul li span{display: block; vertical-align: middle;}
.question-options{display: grid; grid-template-rows: 60px max-content; align-items: center;}
.award-title { font-size: 11px; padding: 0 10px; margin-bottom: 5px;}
.survey-questions{width:100%; margin:0 auto;}
.thankyou{ position: relative;}
.thankyou h1{position: absolute; max-width: 230px; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'NotoSansTamil'; color: #585656; font-size: 26px; line-height: 33px;}
.thankyou p{font-family: 'NotoSansTamil'; padding: 10px 30px; font-size: 16px; line-height: 22px;}

.quiz-panel ul.multi-options{ display: block;}
.quiz-panel ul.multi-options li{grid-template-columns: 130px auto;}
.quiz-panel ul.multi-options .options{display: grid; grid-template-columns: repeat(4, 1fr); grid-gap:10px; align-items: center;}
.quiz-panel ul.multi-options .options span{margin:0 2px;}
/* Base for label styling */
[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

/* checkbox aspect */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
  content:'';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px;
  background: #b6b9b7;
  border-radius: 50%;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
/* checked mark aspect */
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:after {
  content: '\2713\0020';
  position: absolute;
  width: 30px; height: 30px;
  border-radius:50%;
  top: 50%; transform: translateY(-50%); left: 0;
  font-size: 1.3em;
  line-height: 30px;
  background: #008000;
  text-align:center;
  transition: all .2s;
  color:#FFF;
  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}

/* checked mark aspect changes */
[type="radio"]:not(:checked) + label:after {
  content: '\2713\0020';
  position: absolute;
  top: 50%; transform: translateY(-50%); left: 0;
  font-size: 1.3em;
  line-height: 30px;
  background: transparent;
  transition: all .2s;
  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}
/* disabled checkbox */
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="radio"]:disabled:checked + label:after {
  color: #999;
}
[type="radio"]:disabled + label {
  color: #aaa;
}

.popup-wrapper{ background: rgba(0,0,0,1); position: fixed; top:0; left: 0; width: 100%; height: 100vh; z-index:9999; overflow:auto;}
.popup-section{ background: #fff; width: 450px;  position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 10px; text-align: center;}
.popup-content form .error{ color: #e94447;}


.main-cnt{ font-size: 16px; line-height: 20px; color: #686868; font-weight: normal; margin: 20px 0 10px;}
.main-cnt span{display: block;}
.main-cnt i{font-size: 16px; font-style: normal; font-weight: bold;}
.main-cnt strong{ color: #404040;}

.form{margin: 20px auto 0; width: 100%;}

.input-style{ padding: 10px; border-radius: 5px; border: 1px solid #bfbfbf; width: 100%; margin-bottom: 20px;}
.input-style:focus{box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);}

.edit-mail{ position: relative;}
.edit{  position: absolute; top: 50%; right: 10px;transform: translateY(-50%); cursor: pointer; margin-top: -10px;}
.or{position: relative;}
.or:before, .or:after{content:''; position: absolute; top: 50%; width: 45%; height: 2px; background: #c5c5c5; }
.or:before{ left: 0;}
.or:after{ right: 0;}
.social-icons, .otp-sec{ margin: 15px 0;}
.otp-grid{ display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 10px;}
.otp-grid .input-style{text-align: center;}
.resent-otp { display: grid; grid-template-columns: max-content auto; margin-bottom: 20px; font-size: 12px;}
.resent-otp p{margin: 0;}
.resent-otp p:first-of-type{color: #4e9ff2;}
.resent-otp p:last-of-type{text-align: right; color: #9b9696; font-size: 14px;}
.social-icons a{width: 46px; height: 46px; border-radius: 50%;  border: 1px solid #e0e0e0; padding: 4px;margin: 0 2px;}
.text-red{ color: #e92227;}
input:focus{ outline: 0;}
.cta-btn{ background-color: #269457; border: 0; border-radius: 5px; text-transform: uppercase; display: block;  margin: 0 auto 20px auto; color: #fff; padding: 10px; /*width: 138px;*/ cursor: pointer; font-size: 16px; font-weight: 400;}
.cta-otp {background-color: #939393; border: 0; border-radius: 5px; text-transform: uppercase; display: block;  margin: 0 auto 20px auto; color: #fff; padding: 10px; width: 100%; cursor: pointer; font-size: 16px; font-weight: 400;}
.password-field { position: relative;}
.password-field .view-pwd{ position: absolute; top: 10px; right: 6px;cursor:pointer;}
.intl-tel-input.allow-dropdown + img {
    margin-top: -3px;
}
.otp-section .flag-container{ pointer-events:none;}
.font-normal{ font-family: sans-serif; }
.x-size { font-size: 14px !important; font-style:normal;}
.get-otp{
    margin: 0;
    background: #fff;
    border: 1px solid #269457;
    color: #269457;
    font-weight: bolder;
    font-size: 15px;
}
.otp-parent{
    display: grid;
 grid-template-columns: repeat(2, 1fr);
 align-items: center;
 justify-content: center;
 grid-gap: 15px;
}
.resend{ border: 0px solid #dbdbdb; padding: 0px; border-radius: 6px; position: relative; margin-bottom: 20px;}
.resend-txt {display: inline-flex; width: 100%; grid-gap: 10px; position: absolute; left: 50%; transform: translateX(-50%); justify-content: space-around; top: -10px;}
.resend-txt p{ background: #fff; color: #9b9696; padding: 0 5px; margin: 0;}
.resend-txt p:last-of-type{ color: #000; font-size: 16px; }
.resend .resend-options{ text-align: center; margin-top:10px; display: block; grid-gap: 10px;}
.resend .resend-options > div{ padding: 4px 6px; border-radius: 6px; display: inline-flex; align-items: center; grid-gap: 5px; width: 120px; justify-content: center; font-size: 16px;}
.resend .whatsapp{ border: 1px solid #40c351; color: #40c351;}
.resend .sms{border: 1px solid #bfbfbf; color: #397ef5;}
.resend .resend-options > div img{ width: 30px; margin: 0; vertical-align: middle;}
.link {color: #387df2;}

.close-div{ position: absolute; top: -12px; right: -12px; background: #f00;color: #fff;  width: 30px; height: 30px; line-height: 34px; border-radius: 50%; font-weight: bold; cursor: pointer;}

.thankyou { background: #fff; border-radius: 10px; padding: 20px;}

.terms{color: #fff; background-color: #021719; padding: 30px 50px; width: 100%; margin: 0 auto; border-radius: 10px; text-align: left; position: relative;}
.terms h5{ font-size: 20px; margin-bottom: 15px; text-align: center;}
.terms h5 span{ border-bottom: 0px solid #545454;}
.terms ul{ text-align: left;}
.terms ul li{ margin: 25px 0; position: relative; padding-left: 40px; font-size: 14px; line-height: 26px;}
.terms ul li:before{ content: "";
    position: absolute;
    top: 40%;
    background: #fff;
    width: 31px;
    height: 36px;
    left: 0;
    transform: translateY(-50%);
    background: url(https://images.assettype.com/vikatan/2025-08-14/k42m282q/iconpoint.png);}
.terms ul li:last-of-type{margin-bottom: 0;}

.slogan-section{ text-align: center; width: 60%; margin:0 auto; padding: 20px 0;}
.slogan-section  h1{ padding: 0; margin: 20px 0; font-weight: bold; font-size: 16px; display: block;}
.slogan-section textarea{ width: 100%; height: 150px; border: 1px solid #c7c7c7; border-radius: 5px; padding: 10px;}
.slogan-section input{ width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #c7c7c7;}
.slogan-section textarea:focus{outline: none;}
.slogan-section .slogan-button{margin-top: 20px;}

.intl-tel-input{display: block !important; margin-bottom: 15px;}
.award-title.active{ color: green;}
.resend-whatsapp-otp {
  border: 1px solid #dbdbdb;
  padding: 10px;
  border-radius: 6px;
  position: relative;
  margin-bottom: 20px;
}
.resend-whatsapp-otp .resend-options > div{ padding: 4px 6px; border-radius: 6px; display: inline-flex; align-items: center; grid-gap: 5px; width: 120px; justify-content: center; font-size: 16px;}
.resend-whatsapp-otp .whatsapp{ border: 1px solid #40c351; color: #40c351;}
.resend-whatsapp-otp .sms{border: 1px solid #bfbfbf; color: #397ef5;}
.resend-whatsapp-otp .resend-options > div img{ width: 30px; margin: 0; vertical-align: middle;}

.banner-wrapper .hidden-mobile {margin: 0 auto;}

.quiz-panel ul li{border: 0;}
.award-cat-image{ height: 200px; background: #000;}
.quiz-panel ul li img{height: 100%; object-fit: contain;}
@media only screen and (max-width: 600px) {
    .hidden-mobile{display: none;}
    .m-t-3x{ margin-top:10px;}
    .content-wrapper{margin:0;}
    .content-section{display:block; padding:0;}
    .content-area{padding: 10px 10px 50px;}
    .content-section:before{right: 0;}
    .content-area img{}
    .main-txt {
      margin: 0px auto;
      order: 2;
  }
    .content-section:before{ width:100%; left:0;}
/*    .content-area .button{margin-bottom: 40px;}*/
    footer{ font-size: 12px; display:block; text-align: center;}
    footer span{display: block;}
    footer > div:nth-of-type(2){ text-align: center; margin-top:5px;}
    .main-txt h2 { font: bold 16px/24px 'NotoSansTamil';}
    .survey-questions{width:100%;}
    .quiz-panel{ padding-bottom: 0;}
    .quiz-panel ul{display: block; width:100%;}
    .quiz-panel ul li{margin: 20px 0; width: 100%; display: grid; grid-template-columns: 100px auto; grid-template-rows: auto; padding-bottom: 0; text-align: left; align-items: initial;}
	.question-options{ display: grid; grid-template-rows: 90px max-content; padding: 10px 10px 12px 0; align-items: flex-start;}
	.option-selection{ text-align:center;}
	.quiz-panel ul li img{ border-radius: 10px; height: 126px;}
    .thankyou img{ width:100%;}
    .thankyou h1{font-size: 18px;line-height: 26px;top: 40%;}
    .quiz-panel ul.multi-options li{display: block;}
    .quiz-panel ul.multi-options .options {grid-template-columns: repeat(2, 1fr);grid-gap: 20px;margin-top: 12px;}
	.popup-section{ width: 90%;}
	.questions{ margin-top:0; padding-bottom: 15px;}
	.thankyou{ width: 90%; margin: 0 auto;}
	.main-txt h1{font: bold 16px/28px 'NotoSansTamil';}
	.main-txt h5{font-size: 14px; line-height: 24px;}
	.terms{ width: 100%; padding: 30px 20px;}
	.terms ul li { margin: 20px 0; position: relative; padding-left: 45px; font-size: 13px; line-height: 22px;}
	.form{ width: 100%; }
	.award-title{ padding: 0; font-size: 11px; color: #000; height: 80%; overflow: hidden;}
	[type="radio"]:not(:checked) + label:before, [type="radio"]:checked + label:before{ width: 25px; height: 25px;}
	[type="radio"]:not(:checked) + label:after, [type="radio"]:checked + label:after{ width: 25px; height: 25px; line-height: 25px;}
	.slogan-section{ width: 90%;}
	.slogan-section h1{font-size: 14px; line-height: 24px;}
  .quiz-panel h1{ font-size: 16px; margin-top: 0;}

.title-sponsor{height: 104px;}
.logo-panel{height:104px;}
.welcome-content-section .banner-section img{width: 250px;}

.award-cat-image{ height: 100px; }
    .quiz-panel ul li img {
        border-radius: 10px 0 0 10px;
        height: 100%;
    }
	    .question-options {
        display: grid;
        grid-template-rows: 60px max-content;
        padding: 10px 10px 12px 0;
        align-items: flex-start;
    }
}

.none,.hide{ display:none; }
#forgot_err{
	padding:20px;
	font-size:14px;
}
.reg_err,.submition_err{
	color:#f10808;
	font-weight:bolder;
}
.mobile_validation_err{
	padding-bottom: 20px;
    color: #f10808;
    font-weight: bolder;
}
.registration-form-btn{
	padding-top:12px;
}
.submission_err{
	padding:20px;
	color:#f10808;
	line-height:25px;
}
.disabled {
    pointer-events:none; 
    opacity:0.6;  
}