/****** Common Css Start ******/
html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}
img{max-width: 100%;}
@font-face {
    font-family: 'Montserrat';
    src: local("Montserrat-Medium"), local("Montserrat Medium"),
        url('../fonts/Montserrat-Medium.woff2') format('woff2'),
        url('../fonts/Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src:local("Montserrat-Bold"), local("Montserrat Bold"), 
        url('../fonts/Montserrat-Bold.woff2') format('woff2'),
        url('../fonts/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src:local("Montserrat-Regular"), local("Montserrat Regular"),  
        url('../fonts/Montserrat-Regular.woff2') format('woff2'),
        url('../fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src:local("Montserrat-Light"), local("Montserrat Light"),  
        url('../fonts/Montserrat-Light.woff2') format('woff2'),
        url('../fonts/Montserrat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
body {
    overflow-x: hidden;
    font-weight: normal;
    font-size: initial;
    font-family: 'Montserrat';
    background: rgb(61,190,238);
    background: radial-gradient(circle, rgba(61,190,238,1) 0%, rgba(0,75,182,1) 100%);
    color: var(--whiteColor);
}
:root{
    --primaryColor: #f8dc52;
    --secondaryColor: #1D1D1B;
    --blueColor: #004BB6;
    --whiteColor: #ffffff;
    --blackColor: #000000;
    --borderColor: #D4D4D4;
    --lightBg: #fbfbfb;
    --footerColor: #152C1A;
    --footerText: #bfbfbf;
    --bodyColor: #1d3924;
}
a, button, input[type=reset], input[type=submit], input[type=button] {
   -webkit-transition: all ease-in-out 0.4s;
   -moz-transition: all ease-in-out 0.4s;
   -ms-transition: all ease-in-out 0.4s;
   -o-transition: all ease-in-out 0.4s;
   transition: all ease-in-out 0.4s;
   cursor: pointer;
}
a, a:hover, a:focus {
   text-decoration: none;
}
figure{
    margin: 0;
}
.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none;
}
button:hover, button:focus,
input:hover, input:focus,
textarea:hover, textarea:focus{
    outline: 0 !important;
    box-shadow: none !important;
}
.section-title{
    padding-bottom: 5rem;
}
.section-title .h2{
    margin-bottom: 0.5rem;
    font-size:  5rem;
    color: var(--whiteColor);
    font-weight: bold;
    font-family: 'Teko', sans-serif;
}
.section-title .section-des{
    color: var(--textColor);
    margin-bottom: 0;
}
.btn{
    font-size: 2.3rem;
    padding: 1rem 2rem .6rem 2rem;
    border-radius: 100px;
    font-family: 'Teko', sans-serif;
    text-transform: uppercase;
}
.btn-yellow{
    background: var(--primaryColor);
    color: var(--blackColor);
}
.btn-yellow:hover{
    background: var(--whiteColor);
    color: var(--blackColor);
}
.btn-white{
    background: var(--whiteColor);
    color: var(--blueColor);
}
.container{
    padding-left: 15px;
    padding-right: 15px;
}
@media (min-width: 1200px){
    .container-2{
        max-width: 1160px;
    }
}
@media (min-width: 1400px){
    .container-2{
        max-width: 1200px;
    }
}
@media (min-width: 1500px){
    .container-2{
        max-width: 1366px;
    }
}
.row {
    --bs-gutter-x: 2.4rem;
}
.pad-tb-70{
    padding-top: 7rem;
    padding-bottom: 7rem;
}
.pad-tb-100{
    padding-top: 10rem;
    padding-bottom: 10rem;
}
.pad-t-100{
    padding-top: 10rem;
}
.pad-b-100{
    padding-bottom: 10rem;
}
.pad-t-70{
    padding-top: 7rem;
}
.pad-b-70{
    padding-bottom: 7rem;
}
.checkbox-input label{
    position: relative;
    display: flex;
    align-items: center;
    line-height: 2.2rem;
    font-size: 14px;
    color: var(--textColor);
    padding-left: 3rem;
    cursor: pointer;
}
.checkbox-input label:before {
    content: "";
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--tableBorderColor);
    border-radius: 5px;
    background: var(--whiteColor);
    position: absolute;
    left: 0;
}
.checkbox-input input[type="checkbox"] {
    display: none;
}

.checkbox-input input[type="checkbox"]:checked +label:after {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    left: 5px;
    color: #fff;
    font-size: 13px;
    top: 50%;
    transform: translateY(-50%);
}

.checkbox-input input[type="checkbox"]:checked + label:before {
    background: var(--secondaryColor);
    border-color: var(--secondaryColor);
}
select.form-control {
    padding: 5px 38px 5px 18px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-image: url(../images/select-arrow.html);
}
.form-group{
    margin-bottom: 2.5rem;
}
.form-group label{
    font-size:  18px;
    color:  var(--textColor);
    margin-bottom: 5px;
}
.form-control:not(textarea) {
    height: 6rem;
}
.form-control {    
    border-radius: 5px;
    border: 1px solid var(--tableBorderColor);
    font-size: 15px;
    padding: 5px 18px;
}
textarea.form-control{
    padding: 18px;
    line-height: 1.8;
    height: 15rem;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

::-webkit-input-placeholder {
  color: var(--textColor) !important;
}

:-ms-input-placeholder {
  color: var(--textColor) !important;
}

::placeholder {
  color: var(--textColor) !important;
}
/****** Common Css End ******/


/********** Top To Bottom Arrow Start **********/
.to-top-container a {
    height: 3em;
    width: 3em;
    display: none;
    border-radius: 100px;
    text-align: center;
    line-height: 3em;
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: #fff;
    background: var(--secondaryColor);
    z-index: 98;
}
.to-top-container a:hover i {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}
/********** Top To Bottom Arrow End **********/

/********* Header Start ************/
.site-header {
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    transition: 0.4s;
    position: relative;
    z-index: 5;
    padding: 1rem 0;
    position: absolute;left: 0;top: 0;width: 100%;
}
.site-header.sticky {
    position: fixed;
    background: radial-gradient(circle, rgba(61,190,238,1) 0%, rgba(0,75,182,1) 100%);
    width: 100%;
    left: 0;
    top: 0;
    padding: 8px 0;
    box-shadow: rgb(0 0 0 / 25%) 0px 0px 5px 0px;
    z-index: 999;
}
.navbar-brand img {
    width: 15rem;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
}
.sticky .navbar-brand img {
    width: 15rem;
}
.taglink-block p {
    margin: 0;
    font-size: 2rem;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    color: #fff;
}
.sticky .taglink-block p{
    font-size: 2rem;
}
.taglink-block p span {
    font-weight: bold;
    text-transform: uppercase;
    color: var(--lightBg);
}

/********* Header End ************/

/********* Home Banner Start ************/
.homeBanner-sec{
    background: url("../images/ground-banner.png") no-repeat center center/cover;
    position: relative;
    padding: 15rem 0 11rem;
    display: flex;
    align-items: center;
}
.banner-img{text-align: center;}
/*.homeBanner-sec:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.41;
    z-index: -1;
}*/
.banner-caption .h1 {
    color: var(--whiteColor);
    font-size: 6.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    font-family: 'Teko', sans-serif;
    text-transform: uppercase;
}

.banner-caption p {
    color: var(--whiteColor);
    font-size: 2.2rem;
}
.banner-caption .form {
    margin-top: 4rem;
}
.banner-caption .form label {
    color: var(--whiteColor);
    margin-bottom: 1rem;
}
.banner-caption .form .form-group input {
    border-radius: 5px 0 0 5px;
}
.banner-caption .form .form-group .btn {
    white-space: nowrap;
    border-radius: 0 5px 5px 0;
}

.banner-img img{max-height: 63.1rem;}
/********* Home Banner End ************/



/******* Feature Section Start **********/
.features-item {
    margin-bottom: 2rem;
    display: flex;
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    padding: 2rem;
    background: rgb(255 255 255 / 10%);
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 3rem;
}
.feature-icon{
    /* background: rgba(255, 255, 255, 0.3); */
    border-radius: 6px;
    height: 8rem;
    min-width: 8rem;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}
.feature-icon img{
    width: 5rem;
}
.feature-content h3 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    font-weight: bold;
    color: var(--whiteColor);
}
.feature-content p {
    font-size: 15px;
    margin: 0;
    color: var(--whiteColor);
    line-height: 1.7;
}
.feature-col:nth-child(odd) .feature-content p{
    margin: 0 6rem 0 0;
}
/* .feature-col:nth-child(even) .features-item{
    margin-left: 6rem;
} */
/******* Feature Section End **********/

/******* How It Work Start ************/
.htp-item{
    padding: 0 1.5rem;
}
.htp-content {
    padding: 1.5rem 0;
    text-align: center;
    background: var(--whiteColor);
    color: var(--secondaryColor);
}
.htp-content h3{
    font-size: 2.5rem;
    font-weight: 500;
}
.htp-content p{
    margin: 0;
    font-size: 16px;
}
.slick-dots {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 3.5rem 0 0;
}
.slick-dots li button {
    font-size: 0;
    width: 4rem;
    height: 0.4rem;
    border: none;
    margin: 0 0.6rem;
    background: rgba(255,255,255, 0.3);
}
.slick-dots li.slick-active button {
    background: var(--whiteColor);
}
/******* How It Work Start ************/

/******* About Us Section Start ************/
.homeAbout-content p,
.referEarn-content p {
    color: var(--whiteColor);
    line-height: 1.8;
}
/******* About Us Section End ************/


/*********** Refer Earn Section Start ***********/
.referEarn-content{
    padding-left: 3rem;
}
.checkPoint-block {
    display: block;
    list-style: none;
    padding: 0;
}
.checkPoint-block li:before {
    display: inline-block;
    content: '';
    min-width: 2.2rem;
    height: 2.2rem;
    background: url("../images/tick-circle.svg");
    background-size: cover;
    margin-right: 12px;
    vertical-align: middle;
    
}
.checkPoint-block li {
    padding: 8px 0;
    color: var(--whiteColor);
    display: flex;
}
/*********** Refer Earn Section End ***********/



/* faq page css */

.repeat-section{padding: 7rem 0;}
.accordion-item{background: rgba(255, 255, 255, 0.17);color: var(--whiteColor);border: 1px solid rgba(255, 255, 255, 0.17)!important;border-radius: 1rem!important;}
.accordion-item + .accordion-item{margin-top: 2rem;}
.accordion-button{background: transparent;font-size: 2rem;color: var(--whiteColor);padding: 2rem;font-weight: 500;}
.accordion-button:not(.collapsed){background: transparent;color: var(--whiteColor);box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.17)!important;}
.accordion-button::after{width: 2rem;height: 2rem;background-size: cover;filter: brightness(0) invert(1);opacity: 0.5;}
.accordion-body{padding: 2rem;line-height: 1.8;}


.faq-heading{padding: 1rem 2rem; background: rgba(255,255,255,0.2);border-top: 1px solid rgba(255, 255, 255, 0.2);border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.faq-body{padding: 2rem;}
.faq-body p{margin: 0;}
.faq-body p + p{margin-top: 1rem;}

.innerpageBanner{text-align: center;padding-top: 20rem;}

/* contact page css */
.form-control{background: rgba(255, 255, 255, 0.17);border: 1px solid rgba(255, 255, 255, 0.17)!important;color: var(--whiteColor);transition: 0.3s;}
.form-control:focus{border-color: var(--whiteColor);background: var(--whiteColor);color: var(--secondaryColor);}
.form-control::placeholder{color: #2c4432;}
.btn-lg{width: 20rem;padding: 1.5rem 2rem 1rem 2rem;}
.contact-form>h2{font-size: 2.5rem;margin-bottom: 3rem;}
.contact-details h4{ font-size: 2.8rem;margin-top: 2rem; margin-bottom: 1.5rem; color: var(--whiteColor); display: inline-block; width: 100%; vertical-align: bottom; }
.contact-details p{ display: inline-block; width: 100%; vertical-align: bottom; }
.social-links{ display: flex; list-style: none; font-size: 3rem;padding: 0;margin: 0;}
.social-links li:not(:last-child){ margin-right: 2.5rem; }
.social-links li a{ color: var(--whiteColor); transition: 0.4s; }
.social-links li a:hover{ color: #fff; }


/* points table */
.about-content table { width: 100%; text-align: center; margin-top: 0; margin-bottom: 2rem; border: 1px solid #484848; background: #fff; }
.about-content table th { background: #1d1d1b; color: #fff; padding: 10px 15px; font-weight: normal; text-transform: uppercase; text-align: center; border: none;white-space: nowrap;}
.about-content table tr th:first-child, .about-content table tr td:first-child { text-align: left; }
.about-content table tr td { padding: 10px 15px; text-align: center; color: #000; border: none;}
.about-content table tr:nth-child(even) td { background: rgb(245 245 245); }
.about-content h3{margin: 2rem 0 1rem 0;font-weight: 700;font-size: 2.3rem;}
/*.about-content strong{color: var(--primaryColor);}*/
.about-content ul li{margin-bottom: 1rem;line-height: 1.8;margin-bottom: 1rem;}


/* become an affiliate */
.BenefitsBx{padding: 4rem 3rem;background: var(--whiteColor);border-radius: 1rem;text-align: center;color: var(--secondaryColor);}
.BenefitsIcon{width: 10rem;height: 10rem;display: flex;align-items: center;justify-content: center;margin: 0 auto;background: #ccdbf0;border-radius: 50%;}
.BenefitsBx h2{margin: 2rem 0 1rem 0;font-size: 2rem;font-weight: 500;}
.BenefitsBx p{opacity: 0.8;margin-bottom: 0;}


.What-do-img{position: relative;}
.What-do-img::after{content: "";width: 22.4rem;height: 22.1rem;background: url(../images/dotted-shape.png);background-size: cover;position: absolute;top: -5rem;left: -5rem;filter: brightness(0) invert(1);}
.What-do-img img{position: relative;z-index: 1;max-width: 50rem;width: 100%;}
.What-do-txt h2{font-size: 3rem;margin-bottom: 1rem}
.mt-10{margin-top: 10rem;}

.what-do-section .row:nth-child(odd) .What-do-img img{margin-left: auto;display: block;}
.what-do-section .row:nth-child(odd) .What-do-img::after{left: auto;right: -5rem;}

.join-now-section{background: url(../images/become-bg.jpg);background-size: cover; padding: 3rem 0;position: relative;}
.join-now-section::after{content: "";left: 0;top: 0;width: 100%;height: 100%;background: var(--secondaryColor);opacity: 0.8;position: absolute;}
.join-now-section .container{display: flex;align-items: center;justify-content: space-between;position: relative;z-index: 2;}
.join-now-section h2{font-size: 5rem;font-family: 'Teko', sans-serif;line-height: 1;}

/* content pages */
.contentPages{ display: block; clear: both; }
.contentPages.black{color: var(--blackColor);}
.cell_content{ display: block; width: 100%; clear: both; padding-bottom: 4rem; }
.cell_content:before,.contentPages:after{ content: ""; display: block; clear: both; }
.heading_contents{ display: block; clear: both; font-size: 3.2rem;font-weight: 600; padding-bottom: 10px; font-family: 'Teko', sans-serif;}
.contentPages ul{ display: block; padding-top: 10px; padding-bottom: 10px; clear: both;}
.contentPages ul:before,.contentPages ul:after{ content: ""; display: block;clear: both; }
.contentPages ul>li{ display: block; clear: both; padding-left: 26px; background:url(../images/right-arrow.svg) 0 3px no-repeat; background-size: 14px; line-height: 1.4;  }
.contentPages.black ul>li{ background:url(../images/right-arrow-black.svg) 0 3px no-repeat;background-size: 14px;}

.contentPages ul>li + li{ margin-top: 18px; }
.contentPages ul ul{ display: block; width: 100%; padding-left: 25px; }
.contentPages ul ul li{ display: block; clear: both; background:none; position: relative;}
.contentPages ul ul li:before{ content: ""; width: 8px; height: 8px; background:var(--whiteColor); border-radius: 40px; position: absolute; left: 0; top: 6px; }
.contentPages ul ul li + li{ margin-top: 7px; }
.contentPages p{ padding-bottom: 10px; line-height: 2;}
/*.contentPages p strong{color: var(--primaryColor);}*/
.contentPages a{ color: var(--primaryColor) }

.LeaderboardTable td{vertical-align: middle;}

.r-0 { white-space: nowrap; border-radius: 0; }
.refer-img form{max-width: 60rem;margin: 0 auto;margin-top: 4rem;}

.refer-bx{padding: 3rem;border-radius: 3rem;min-height: 25rem; max-width: 50rem;margin: 0 auto;background: var(--whiteColor);position: relative;margin-bottom: 10rem;display: flex;align-items: center;justify-content: center;}
.refer-bx::after{content: "";left: -3rem;top: 0;width: 9rem;height: 100%;background: url(../images/gift-wrap.png) no-repeat left top;background-size: 100%;position: absolute;}
.refer-bx h2{color: var(--secondaryColor);font-size: 3.2rem;padding: 0 4rem;font-family: 'Teko', sans-serif;}
.refer-bx p{color: var(--secondaryColor);font-size: 2rem;}
.refer-bx strong{font-size: 3rem;font-weight: 700;margin-bottom: 1rem;font-family: 'Teko', sans-serif;color: #0c6cd4;}

.refer-step-bx{padding: 2rem;text-align: center;background: var(--whiteColor);color: var(--secondaryColor);border-radius: 2rem;margin-bottom: 8rem;}
.step-count{width: 8rem;height: 8rem;display: inline-flex;background: var(--whiteColor);color: #0c6cd4;border-radius: 50%;align-items: center;justify-content: center;font-size: 4rem;margin-top: -5rem;transform: translateY(-2rem);position: relative;}
.step-count::after{content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 6rem;height: 6rem;border-radius: 50%;border: 2px solid #0c6cd4;}
.refer-step-bx img{max-height: 35rem;margin-bottom: 3rem;max-width: 100%;}
.refer-step-bx h2{font-size: 3rem;font-weight: 700;margin-bottom: 1rem;font-family: 'Teko', sans-serif;}
.refer-step-bx p{font-size: 16px;}

.refer-friend-text{text-align: left;}
.refer-friend-text h2{font-size: 4rem;font-weight: 700;font-family: 'Teko', sans-serif;}



.nav-tabs{justify-content: space-between;padding: 2rem; background: var(--whiteColor); border-radius: 3rem;}
.nav-tabs .nav-link{font-size: 2.5rem;font-weight: 500;border-radius: 1rem 1rem 0 0;background: transparent;color: #3a3a3a;padding:0;border: none;position: relative;width: 100%;text-align: center;filter: grayscale(1);font-family: 'Teko', sans-serif;}
/* .nav-tabs .nav-link::after{content: "";width: 0;height: 2px;background: var(--blackColor);position: absolute;left: 0;bottom: 0;transition: 0.3s;} */
.nav-tabs .nav-link.active{background:transparent;color: var(--blackColor);filter: none;}
.nav-tabs .nav-link.active::after{width: 100%;}
.nav-tabs .nav-link span{display: flex;width: 6rem;height: 6rem;background: #c8e6ff;margin: 0 auto;align-items: center;justify-content: center;border-radius: 50%;margin-bottom: 1rem;}
.nav-tabs .nav-link img{max-width: 3rem;max-height: 3rem;}
.nav-tabs .nav-item{min-width: 25rem;text-align: center;margin-bottom: 0!important;line-height: 1!important;}

.leaderboard-tab{padding: 2rem; background: var(--whiteColor); border-radius: 3rem;margin-top: 2rem;}
.point-system-tab-content{padding-top: 4rem;}

.nav-tabs.point-system-tabs{border-radius: 1rem;padding: 0;justify-content: initial;overflow: hidden;margin-top: 4rem;background: var(--whiteColor);flex-wrap: nowrap;overflow-X: auto;border: none;}
.nav-tabs.point-system-tabs .nav-item{min-width: auto;border-right: 1px solid var(--borderColor);flex: 1 1 auto;}
.nav-tabs.point-system-tabs .nav-item:last-child{border: none;}
.nav-tabs.point-system-tabs .nav-item .nav-link{padding: 2rem;border-radius: 0;border: none;white-space: nowrap;}
.nav-tabs.point-system-tabs .nav-item .nav-link:hover,
.nav-tabs.point-system-tabs .nav-item .nav-link.active{background: var(--blackColor);color: var(--whiteColor);}


.banner-images{margin-bottom: 7rem;}
.banner-images img{width: 100%;}
.carousel-indicators{margin-bottom: 0;bottom: -3rem;}

.get-link-section{padding: 4rem 0;}

.refer-friend-section{border-top: 3px solid rgba(255, 255, 255, 0.2);padding: 3rem 0;}
.how-it-works-img{text-align: center;}
.how-it-works-img img{width: 50rem;}
.how-it-works-txt{position: relative;padding: 2rem 3rem 4rem 3rem;color: var(--whiteColor);}
.how-it-works-txt::after{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.2);border-radius: 2rem;transform: rotate(2deg);border: 1px solid rgba(255, 255, 255, 0.4);}
.how-it-works-txt *{position: relative;z-index: 1;}
.how-it-works-txt>span{font-size: 8rem;font-weight: 700;opacity: 0.15; position: absolute; right: 1rem; top: 0;}
.how-it-works-txt h2{font-size: 2.5rem;margin-bottom:1.5rem;font-weight: 600;}
.how-it-works-txt p{font-size: 1.8rem;line-height: 1.7;}

.how-it-works-row:nth-child(odd) .how-it-works-txt{padding: 4rem 3rem 3rem 3rem;}
.how-it-works-row:nth-child(odd) .how-it-works-txt::after{transform: rotate(-2deg);}


.offer-main-outer + .offer-main-outer{padding-top: 5rem;margin-top: 5rem;border-top: 3px solid rgba(255, 255, 255, 0.5);}

.how-to-play-main{color: #1a1a1a;}
.how-to-play-header{margin-bottom: 3rem;}
.how-to-play-header img{max-width: 6rem;margin-bottom: 2rem;}
.how-to-play-header h2{font-size: 2.8rem;font-weight: 600;font-family: 'Teko', sans-serif;color: var(--blackColor);}

.how-to-play-main p{font-size: 16px;color: #797979;}
.how-to-play-main p strong{color: var(--blackColor);}
.how-to-play-main .tab-pane>h3{font-weight: 700;margin: 3rem 0 1rem 0;font-family: 'Teko', sans-serif;color: var(--blackColor);}
.how-to-play-main .tab-pane>h2{font-weight: 700;margin: 3rem 0 1rem 0;font-size: 2.5rem;font-family: 'Teko', sans-serif;color: var(--blackColor);}
.how-to-play-main.leaderboard-tab{padding: 4rem;}

.how-to-play-main .accordion-button{background: var(--blackColor);font-family: 'Teko', sans-serif;font-size: 2.6rem;}

.sticky-btns{position: sticky;bottom: 10px;max-width: 270px; margin: 0 auto;display: flex;padding: 1rem;z-index: 99;background: rgba(255, 255, 255, 0.4);border-radius: 1rem;border: 1px solid var(--primaryColor);margin-bottom: 2rem;}
.sticky-btns a{width: 100%;}
.sticky-btns a img{width: 100%;}

.accordion-button small { margin-left: 1rem; }

.contact-info-bx { display: flex; align-items: center; padding: 2rem; border-radius: 1rem;  border: 2px solid transparent; position: relative;transition: 0.3s;}
.contact-info-bx{background: rgb(255 255 255 / 16%); border-color: #f8dc52;}
.contact-info-bx i{margin-right: 1rem;font-size: 3rem;min-width: 36px;text-align: center;color: #ffffff;}
.contact-info-bx p{margin-bottom: 0;}
.contact-info-bx p a{color: #ffffff;word-break: break-all;}
.contact-info-bx p a::after{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.contact-info-bx + .contact-info-bx{margin-top: 2rem;}
.fa-phone{transform: rotate(100deg) ;}


/******* Footer Start ********/
.site-footer {      
    padding-top: 6rem;
    background: var(--blueColor);
}
.footer-head h3 {
    font-size: 3rem;
    color: var(--whiteColor);
    margin-bottom: 2.5rem;
    text-transform: uppercase;
    font-family: 'Teko', sans-serif;
}
.footer-links ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.footer-links .quickLinks{
    column-count: 2;
}
.footer-links ul li + li {
    margin-top: 1.2rem;
}
.footer-links ul li a, .contactUs-link li span {
    color: var(--whiteColor);
    display: block;
    font-size: 15px;    
}
.contactUs-link li span{
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    font-weight: bold;
}
.contactUs-link li a{
    font-size: 18px;
}
.footer-links ul li a:hover {
    color: var(--primaryColor);
}
.socialMedia-link {
    display: flex;
    align-items: center;
    margin-top: 2rem;
}
.socialMedia-link a {
    width: 3.5rem;
    height: 3.5rem;
    background: var(--whiteColor);
    text-align: center;
    line-height: 3.5rem;
    color: var(--whiteColor);
    border-radius: 100px;
    margin-right: 1rem;
    font-size: 14px;
}
.socialMedia-link a i {
    transition: 0.3s;
}

.socialMedia-link a .fa-facebook-f {
   color: #3a559f
}
.socialMedia-link a .fa-twitter {
   color: #03A9F4
}
.socialMedia-link a .fa-telegram-plane {
   color: #0E76A8
}
.socialMedia-link a .fa-youtube {
   color: #DC472E
}
.socialMedia-link a .fa-instagram {
   color: #C536A4
}
.socialMedia-link a .fa-whatsapp {
   color: #4CAF50
}
.socialMedia-link a:hover{
    background: var(--secondaryColor);
    border-color: var(--secondaryColor);
}
.socialMedia-link a:hover i{
    color: var(--whiteColor);
}

.copyright-block {
    border-top: 1px solid rgba(255, 255, 255, 0.17);
    padding: 2rem 0;
    text-align: center;
    margin-top: 5rem;
}
.copyright-block * {
    color: var(--footerText);
    font-size: 13px;
}
.copyright-text p {
    margin: 0;
}
.copyright-text p + p {
    margin-top: 2rem;
}

.copyright-text p a{text-decoration: underline!important;}
.copyright-text p a:hover{color: var(--primaryColor);}
/******* Footer Start ********/




.all-sports-list {
    display: contents;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 10px;
}
.sport-list-item {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    width: calc(16.25% - 9.4px);
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
    cursor: pointer;
    transition: .8s;
    font-size: 16px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #495057;
}
.sport-list-item img {
    height: 60px;
    max-width: 90px;
}