/*@import url('https://fonts.googleapis.com/css2?family=Akrobat:wght@200;300;400;500;600&display=swap');*/

* {padding : 0; margin: 0}
html { scroll-behavior: smooth; }

:root {
    --primaryClr: #0f62ac;
    --secondaryClr: #0695d7;
    --whiteClr: #fff;
    --darkClr: #373435;
    --darkYellowClr: #d49216;
    --lightYellowClr: #f5df4c;
    --siteGrdntClr: #ee6562;
}

@font-face {
    font-family: 'Akrobat';
    src: url('../fonts/Akrobat-Black.ttf');
}

@font-face {
    font-family: 'Akrobat';
    src: url('../fonts/Akrobat-Black.ttf');
    src: url('../fonts/Akrobat-Bold.ttf'),
         url('../fonts/Akrobat-ExtraBold.ttf'),
         url('../fonts/Akrobat-ExtraLight.ttf'),
         url('../fonts/Akrobat-Light.ttf'),
         url('../fonts/Akrobat-Regular.ttf'),
         url('../fonts/Akrobat-SemiBold.ttf'),
         url('../fonts/Akrobat-Thin.ttf');
}


/*=============== Common CSS ===============*/
html, body {
    font-size: 14px;
    font-family: 'Akrobat';
}
*:focus {
    outline: none;
    box-shadow: none;
}
ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
a {
    transition: all 0.5s ease-in-out;
}
a:hover {
    text-decoration: none;
}
button:focus, button:active {
    outline: none;
    box-shadow: none;
}
img {
    image-rendering: -webkit-optimize-contrast;
}
.form-group input::placeholder {
    color: #aaa;
}
.burger {
    padding: 40px 0 0;
}
.padTop {
    padding-top: 88px;
}
.primaryBtn {
    background: linear-gradient(90deg, rgb(212 146 22) 0%, rgb(245 223 76 / 95%) 50%, rgb(212 146 22) 100%);
    color: var(--darkClr);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 8px 20px;
    border: 0;
    border-radius: 50px;
    transition: all 0.4s ease-in-out;
}
.joinBtn {
    background: var(--whiteClr);
    color: var(--darkClr);
    font-size: 16px;
    font-weight: 500;
    border-radius: 10px;
    padding: 5px 10px;
}


/*=============== Header CSS ===============*/
#myBtn {
    display: none;
    position: fixed;
    bottom: 107px;
    right: 10px;
    z-index: 99;
    font-size: 18px;
    border: 0;
    cursor: pointer;
    background: no-repeat;
}
#myBtn img {
    width: 35px;
}
.header .topHead {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 80px;
    line-height: 52px;
    background: linear-gradient(90deg, var(--primaryClr) 35%, rgb(58 175 227) 50%, var(--primaryClr) 65%);
    z-index: 9999;
}
.topHead .navbar {
    padding-left: 0;
    padding-right: 0;
}
.topHead .logoBox {
    text-align: center;
    position: relative;
}
.navbar-brand {
    margin: 0;
    padding: 0;
}
.navbar-brand img {
    position: absolute;
    top: 6px;
    left: 0;
    width: 160px;
}
.collapse.navbar-collapse {
    justify-content: flex-end;
}
.navbar .navbar-nav .nav-link {
    color: var(--whiteClr);
    font-size: 16px;
}
.navbar-nav .nav-item.active .nav-link, .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link:focus {
    color: var(--whiteClr);
}
.navbar-toggler {
    position: relative;
    padding: .25rem .5rem;
    top: 8px;
    border: 0;
}
.navbar-toggler span {
    display: block;
    background-color: var(--whiteClr);
    height: 2px;
    width: 20px;
    margin: 4px 0;
    -webkit-transform: rotate0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    position: relative;
    left: 0;
    opacity: 1;
    -webkit-transition: transform .35s ease-in-out;
    -moz-transition: transform .35s ease-in-out;
    -o-transition: transform .35s ease-in-out;
    transition: transform .35s ease-in-out;
}
.navbar-toggler:not(.collapsed) span:nth-child(1) {
    position: absolute;
    left: 8px;
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    opacity: 0.7;
}
.navbar-toggler:not(.collapsed) span:nth-child(2) {
    height: 12px;
    visibility: hidden;
    background-color: transparent;
}
.navbar-toggler:not(.collapsed) span:nth-child(3) {
    position: absolute;
    left: 8px;
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    opacity: 0.7;
}
.banner {
    padding-top: 79px;
}
.comnBG {
    background: url(../images/lightBG-img.jpg);
    background-repeat: repeat;
    min-height: calc(100vh - 79px);
    padding: 110px 0 60px;
}


/*=============== main-content CSS ===============*/
.main-content {
    padding-bottom: 79px;
}
.bgImg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    min-height: calc(100vh - 148px);
    position: relative;
}
.btmimgBox {
    width: 100%;
}

/* onlineLudoSec CSS Start*/
.onlineLudoSec.bgImg, .howToPlaySec.bgImg {
    background-image: url(../images/turquoiseBG-img.jpg);
}
.onlineLudoSec .logoImgBox {
    width: 70%;
    margin: 60px auto;
}
.onlineLudoSec .btmimgBox {
    margin: 0 auto;
}

/* LudoChallangeSec CSS Start*/
.LudoChallangeSec.bgImg, .aboutSec.bgImg, .faqSec.bgImg {
    background-image: url(../images/greenBG-img.jpg);
}
.LudoChallangeSec .btmimgBox {
    margin: 50px auto -20px;
}

/* kheloLudoSec CSS Start*/
.kheloLudoSec.bgImg {
    background-image: url(../images/redBG-img.jpg);
}
.kheloLudoSec .btmimgBox {
    margin: 50px auto -5px;
}

/* aboutSec CSS Start*/
.aboutSec .aboutText {
    padding: 15px;
    border: 1px solid var(--whiteClr);
    position: relative;
}
.aboutText p {
    color: var(--whiteClr);
    font-size: 17px;
    font-weight: 400;
    line-height: 25px;
    text-align: justify;
}
.aboutText p b {
    font-size: 18px;
}
.aboutSec .btmimgBox {
    margin: 0 auto;
}

/* featuresSec CSS Start*/
.featuresSec.bgImg, .referEarnSec.bgImg {
    background-image: url(../images/yellowBG-img.jpg);
    display: flex;
    align-items: center;
}
.featuresSec .imgBox {
    width: 70%;
    margin: 15px auto 0;
}
.featuresDetails {
    width: 280px;
    margin: 30px auto 20px;
}
.featuresContent {
    background: linear-gradient(90deg, var(--primaryClr) 20%, rgb(249 35 31) 50%, var(--primaryClr) 80%);
    padding: 4px 5px 4px 30px;
    margin-bottom: 20px;
    position: relative;
    border-radius: 10px;
}
.featuresContent span {
    position: absolute;
    top: -5px;
    left: -20px;
    background: var(--whiteClr);
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
}
.featuresContent span img {
    width: 22px;
}
.featuresContent p {
    color: var(--whiteClr);
    font-size: 16px;
    font-weight: 300;
    text-align: left;
    margin-bottom: 0;
}

/* howToPlaySec CSS Start*/
.howToPlayDetails {
    width: 320px;
    margin: 30px auto 20px;
}
.howToPlayContent {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
}
.howToPlayContent p {
    color: var(--whiteClr);
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 0;
}
.howToPlayContent span {
    background: var(--whiteClr);
    color: var(--darkClr);
    font-size: 18px;
    font-weight: 600;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    margin-right: 10px;
}
.howToPlayDetails .btmText {
    color: var(--whiteClr);
    text-align: left;
    padding-left: 33px
}
.howToPlaySec .btmimgBox {
    margin: 0 auto -5px;
}

/* reviewSec CSS Start*/
.reviewSec.bgImg {
    background-image: url(../images/redPureBG-img.jpg);
}
.reviewSec h3 {
    color: var(--whiteClr);
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 20px;
}
.reviewSlider .carousel-item {
    background: var(--whiteClr);
    border-radius: 10px;
}
.carousel-item .reviewContent {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    padding: 15px 40px;
}
.reviewSlider h6 {
    font-size: 16px !important;
    margin: 10px 0 0;
    text-align: left;
}
.reviewContent img {
    margin-right: 20px;
    width: 70px;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 1px 16px rgb(0 0 0 / 22%);
}
.reviewContent p {
    color: var(--darkClr);
    font-weight: 300;
    text-align: left;
    line-height: 20px;
    margin-bottom: 0;
}
.carousel-control-prev-icon {
    background-image: url(../images/chevron-left.png);
    width: 12px;
    height: 20px;
}
.carousel-control-next-icon {
    background-image: url(../images/chevron-right.png);
    width: 12px;
    height: 20px;
}
.carousel-control-next, .carousel-control-next:focus, .carousel-control-prev, .carousel-control-prev:focus {
    opacity: 1 !important;
}
.carousel-control-next, .carousel-control-prev {
    width: 8%;
}
.reviewSec .btmimgBox {
    margin: 25px auto -10px;
}

/* faqSec CSS Start*/
.faqSec .card {
    background: var(--whiteClr);
    border: 0;
    margin-bottom: 10px;
    border-radius: 10px;
}
.faqSec .card-header {
    padding: .25rem;
}
.faqSec .card-header .btn-link {
    color: var(--darkClr);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
}
.faqSec .card-header .btn-link span {
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}
.faqSec .card-header .btn-link:focus {
    box-shadow: none;
}
.faqSec .card-header .btn-link img {
    width: 20px;
    transition: all 0.4s ease-in-out;
}
.faqSec .card-header .btn-link[aria-expanded="true"] img {
    transform: rotate(180deg);
}
.faqSec .card-body {
    text-align: left;
    font-weight: 300;
    line-height: 18px;
}
.faqSec .card-body b {
    font-size: 16px;
}
.faqSec .btmimgBox {
    margin: 0 auto;
}

/* referEarnSec CSS Start*/
.referEarnSec p {
    color: #211f1f;
    font-size: 16px;
    font-weight: 500;
    text-align: justify;
}
.referEarnSec .btmimgBox {
    margin: 30px auto 0;
}

/* earnMonySec CSS Start */
.earnMonySec.bgImg {
    background-image: url(../images/turquoiseDarkBG-img.jpg);
    text-align: center;
    padding-bottom: 100px;
}
.earnMonySec p {
    color: var(--whiteClr);
}
.earnMonySec p.winBig {
    font-size: 30px;
    font-weight: 400;
    line-height: 35px;
    margin-bottom: 0;
}
.copyright {
    font-size: 18px !important;
    line-height: 24px !important;
    margin-top: 25px;
}
.copyright p a {
    color: var(--whiteClr);
}
.socialLinks {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(180deg, #f9bb07 0%, #fde250 50%, #f9bb07 100%);
    padding: 25px 0;
}
.socialLinks ul {
    display: flex;
    justify-content: center;
}
.socialLinks li {
    background: var(--darkClr);
    width: 35px;
    height: 35px;
    line-height: 42px;
    border-radius: 50%;
    margin: 0 3px;
}
.socialLinks a {
    display: block;
}
.socialLinks a i {
    color: #fde250;
    font-size: 22px;
}
.earnMonySec .btmimgBox {
    position: absolute;
    bottom: 80px;
    right: 0px;
    width: 45%;
}


/*=============== Inner Pages CSS ===============*/
.topHeading {
    color: #333;
}
.comnBG h6 {
    color: #000;
    font-size: 17px;
    margin-top: 25px;
}
.comnBG p, .comnBG ul li {
    color: #000;
    font-size: 16px;
    font-weight: 300;
}
.comnBG ul li {
    padding-top: 10px;
}
.comnBG ul li:first-child {
    padding-top: 0;
}
.comnBG a {
    color: var(--primaryClr);
}
.comnBG a:hover {
    color: #777;
}
.contactUsSec h3 {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.contactUsSec .add, .contactUsSec .support, .contactUsSec .mail {
    background: var(--whiteClr);
    height: 100%;
    padding: 40px 25px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0 25px 0 25px;
    box-shadow: 0 1px 12px rgba(0 0 0 / 22%);
}
.contactUsSec .add {
    border-radius: 25px 0 25px 0;
}
.contactUsSec .support a, .contactUsSec .mail a {
    color: var(--primaryClr);
}
.howToPlaySec .table {
    border: 1px solid #000;
    margin-top: 20px;
}
.howToPlaySec .table thead th {
    border-bottom: 2px solid #000;
    border-bottom-width: 2px;
}
.howToPlaySec .table tr th, .howToPlaySec .table tr td {
    border: 1px solid #000;
}
.howToPlaySec .table tr th, .howToPlaySec .table tr td {
    border: 1px solid #000;
}


/*=============== Footer CSS ===============*/
.footerSec {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(90deg, var(--primaryClr) 0%, rgb(58 175 227) 50%, var(--primaryClr));
    z-index: 999;
}
.dwnldAppBtn {
    display: flex;
    justify-content: center;
    height: 50px;
    margin: 15px 0;
}
.dwnldAppBtn a {
    color: var(--whiteClr);
    padding: 8px 15px;
    margin: 0 5px;
    min-width: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    position: relative;
}
.dwnldAppBtn a i {
    font-size: 40px;
    margin-right: 10px;
}
.dwnldAppBtn a span {
    font-weight: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 20px;
}
.dwnldAppBtn a span strong {
    font-size: 22px;
    font-weight: 300;
}