@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Black.woff2') format('woff2'),
        url('../fonts/Roboto-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.woff2') format('woff2'),
        url('../fonts/Roboto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

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

body{
  font-family: 'Roboto';  font-weight: 500;
}

body, div, p, li, ul, ol, span, strong, h1, h2, h3, h4, h5, h6{
  padding: 0px;
  margin: 0px;
}
button:focus, button:active, .btn-check:focus+.btn{
    outline: none;
    box-shadow: none !important;

}
a{
text-decoration: none;}
li, ul, ol{
list-style: none;}
button, button:focus, button:hover, button:active{
    outline: none;
}
body, html {
    width: 100%;
    overflow-x: hidden;
}
img { max-width:100%; }


.btn-theme { background-color:#FF9400; color:#fff; font-size:18px; padding:10px 20px; border-radius:10px;  font-weight: 500; border:1px solid #FF9400; }

.btn-theme:hover { background-color:#fff; color:#FF9400;}


.navbar ul li .nav-link  { font-weight: 500; font-size:18px; color:#fff !important; }

.navbar ul li .nav-link:hover{  color:#FF9400 !important;}

.navbar-nav { align-items:center !important; }

#navbarNav {
    justify-content: end;
}
.logo img { width:200px; height:auto; }

.btn-theme.download { margin-left:15px; }



.select-country .form-select {
    max-width: 90px !important; height: 60px; font-size: 18px; font-weight: 500;
}
.select-country .form-select {
    background-color: #FF9400;
    color: #fff;     border: 1px solid #ff9400; border-radius: 10px
}

.form-select { background-image:url(../images/download.svg);}

h1 {
    font-weight: 900;
    color: #FF9400;
    font-size: 70px;
    line-height: 94px;
    text-transform: uppercase;
}

.form-control {
    border-radius: 10px;}


.top-banner {
    height:780px; position: relative; margin-top: -95px;
}

.top-banner p {
    font-size: 24px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 10px;
}

input.form-control {
    max-width: 300px;
}

.get-app-link {
    margin-top: 30px;
}


.get-app-link button {margin-left:10px;  }

.get-app-link .input-group {
    width: inherit;
}

button.btn-theme.get-link {
    padding: 16px 30px;
    height: fit-content;
    border-radius: 10px;
}

.top-banner .content-sec {
    margin-top: 200px;
}

.download-btn.d-flex {
    margin-top: 10px;
}

.download-doc span {font-size: 24px;
    color: #fff;
    font-weight: 500; margin-right: 18px;}

    .download-doc.d-flex {
    background-color: #483500;
    padding: 10px 20px;
    border-radius: 10px;
    width: fit-content;
    border: 1px solid #FFE9C9;
    margin-top: 20px;
}



.top-banner:after {
    background: url(../images/main-img.webp) left/cover no-repeat;
    content: "";
    width: 54%;
    height: 83%;
    position: absolute;
    bottom: 0;
    right: 0;
}

nav.navbar.navbar-expand-lg.navbar-light {
    background-color: #000;
    z-index: 999;
    border: 1px solid #613800;
    border-radius: 30px;
    padding: 12px 20px;
}

header {
    position: sticky;
    z-index: 999;
    top: 15px;
}


.app-flow-col span {font-size: 24px; margin-left: 20px;
    font-weight: 500;}



  .app-flow .app-flow-col {
    background-color: #FFF3D1;
    display: flex;
    width: fit-content;
    align-items: center;
    border-radius: 40px;  padding: 4px 30px 4px 4px;
}

 .app-flow .icon-app-flow {
    background-color: #000;
    border-radius: 40px 0 0 40px;
    padding: 10px 20px 10px 20px;
}


.app-flow {
    display: flex;
    justify-content: center;
    margin-top: -38px;
    z-index: 9;
    position: relative;
}

 .app-flow .col-2 {
    margin: 0 30px;
}

.about-app { background-color:#000; padding-bottom: 30px;}

.app-features h2 {
    font-size: 46px;
    color: #ffffff;
    font-weight: 900;
    text-align: center;
    max-width: 80%;
    margin: auto;
    line-height: 66px;
}

.app-features-col span { font-weight: 900; font-size:24px; color:#fff;  }

.app-features-col p {  font-size:20px; color:#fff; margin-top:5px; font-weight: 500;} 

.app-features-col .text-data { margin-top:10px; }





.hex::before {
    content: "";
    display: block;
    background: url(../images/polygon.png) center /cover no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
}

.data-col { position:relative; z-index: 99;}

.app-features-col {
    position: relative;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.app-features { margin-top:30px; }

.app-features img { width:70px; height:auto; }

.cmn-heading h2 {font-weight: 900; font-size:50px; }
.cmn-heading h3 {font-weight: bold; font-size:30px;}


.mt-cmn { margin-top:80px;}

.how-to-play .col-play {
    background-color: #EFEFEF;
    border-radius: 40px;
}

.how-to-play .col-play img { padding: 20px 10px 0 10px; }
.col-how-to-play .cmn-heading {
    position: relative;
    margin-top: 20px;
 
}

    .col-how-to-play .cmn-heading .text {      
        position: relative;
        color: #fff;
        padding: 8px 15px;
    }

    .col-how-to-play .cmn-heading:before {
        position: absolute;
        content: "";
        background-color: #000;
        color: #fff;
        border-radius: 35px;
        width: 100%;
        height: 160px;
        left: 0;
    }
  .col-how-to-play .cmn-heading h3{ margin-top:10px; }


  .col-how-to-play { margin-top:40px; }


.game-titles.mt-cmn {
    height: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-titles .cmn-heading h2{ font-size:100px;}

.game-titles .cmn-heading h2 .dark-bg {
    display: block;
    background-color: #000;
    width: fit-content;
    color: #FF9400;
    padding: 0 14px;
    margin: auto;
}


.about-rosterup p { margin-top:20px; }

.about-rosterup { position:relative; }

.policy-wrapper { border-radius:40PX; padding:40PX; color: #fff;}

.policy-wrapper p { margin:20px 0; } 

     .abt-text .download-btn { margin-top:20px; }
}

.user-col img { width:150px; height:150px; border-radius:100%; }







.testimonial .item {
    background-color: #E5E5E5;
    padding: 40px;
    text-align: center;
    border-radius: 20px;
    margin-left: 15px;
}



/*.testimonial .active .item  { background-color:#FFEACC; }*/

.testimonial .item img {
    width: 150px !important;
    height: 150px;
    border-radius: 100%; margin: auto;
}

.testimonial .item h3 { margin:10px 0 4px 0px; }
.testimonial p{
    margin-top:10px;
}
.testimonial .owl-carousel {
    margin-top: 30px;
}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
    background: #ffeacc;
    color: inherit;
    border: none;
    padding: 0!important;
    font: inherit;
    width: 15px;
    height: 15px;
    border-radius: 5px;
    margin: 4px;
}

button.owl-dot.active { background: #ff9400; }

.owl-nav {
    display: none;
}

.owl-dots {
    position: absolute;
    top: -60px;
    right: 11%;
}

.more-question {
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-radius: 15px;
    color: #fff;
    margin-top: 30px;
}

.ftr-menu h2 { color:#fff;  margin-bottom: 10px;}

.ftr-menu ul li  {  font-weight:500; font-size:20px;  margin-bottom:10px; }

.ftr-menu ul li a { color:#fff; }

.ftr-menu ul li a:hover { color:#FF9400; }

footer .footer-wrapper {
    padding: 30px;
}

ul.more-menu {
    column-count: 2;
}

.btm-ftr-con { display:flex; justify-content: space-between;}

.btm-ftr { background-color:#000; padding:30px 0; color:#fff; }

.smo-icn { margin-top:15px; display:flex; }

.ftr-logo img { width:200px;  }

.smo-icn  a { margin-right:10px; }

.navbar-light .navbar-toggler {
    background-color: #ffff !important;
}

nav.navbar.navbar-expand-lg.navbar-light {
    border-radius: 10px;
}


.coming-soon-btn span {
    background-color: #000;
    color: #fff;
    font-size: 50px;
    font-weight: 900;
    border-radius: 100px;
    padding: 10px 40px;
    border: 1px solid;
   
}

.coming-soon-btn 
{ margin:30px 0;}

.game-titles p {
    text-align: center;
    font-size: 34px;
    margin-top: 20px !important;
    max-width: 40%;
    margin: auto;
    line-height: 40px;
}


.flip-card-inner h3 { font-weight:600; margin-bottom:15px;}

.faq-warpper .cmn-heading {
    margin-bottom: 40px;
}

.roster-work ul li {
    padding-top: 12px;
    font-weight: 600;
    font-size: 16px;
}

.roster-work span {
    font-weight: 600;
    font-size: 18px;
}



    .flip-card {
        background-color: #FFEACC;
        padding: 30px;
        border-radius: 20px;
    }

    .flip-card.right-2 {
        margin-top: 10px;
    }
.img-faq {
    text-align: end;
    margin-top: 12px;
    width: 400px;
}

.flip-card-inner {
    display: flex;
    align-items: center;
}

p {
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
}

.max-80 {
    max-width: 80%;
    margin: auto;
}

.rosterup-data-heading h1 {
    font-size: 40px;
    line-height: 73px;
    margin-top: 40px;
}
.important-privacy h2 {
    font-weight: 900;
    font-size: 30px;
    line-height: 46px;
}
.important-privacy li{
    list-style-type:decimal;
    margin-left:30px;
    margin-top:10px;
    font-size:18px;
}
.important-privacy h3 {
    font-weight: 900;
    font-size: 23px;
    margin: 13px 0px;
    line-height: 34px;
}
.table tr th {
    background-color: #FFEACC;
    padding: 15px 0;
}

.table tr td, .table tr th {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 18px;
}
.points_title h2 {
    margin: 15px 0px;
    font-weight: 900;
}
.point-system-section {
    margin-top: 60px;
}
.contact-data {
    margin-top: 40px;
    padding: 20px;
    background-color: #FFEACC; 
    display: grid;
    text-align: center;
    border-radius: 20px;
    color: black;
}
    .contact-data span {
        font-size: 25px;
        margin-top: 15px;
    }
.faq-data {
    margin-top: 50px;
}
.accordion-flush .accordion-item {
    padding: 5px 0px;
    margin-bottom: 20px;
}
button.accordion-button.collapsed, .accordion-button:not(.collapsed) {
    font-weight: 700;
    font-size: 20px;

}
.accordion-button:not(.collapsed) {
    color: #000000;
    background-color: #ffeacc;
   box-shadow: none;
}
.accordion-flush .accordion-item .accordion-button {
    background-color: #ffeacc;
    border-radius: 10px !important;
}
.accordion-item {
    background-color: #fff;
    border: none;
}
.accordion-flush .accordion-item:first-child {
    border-top: 1 !important;
}
.accordion-flush .accordion-item:last-child {
    border-bottom: 1 !important;
}  
.accordion-flush .accordion-item {
    padding:0px;
    border: 1px solid #ff9400;
    border-radius: 10px;
}
.accordion-button::after {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 7px;
    margin-left: auto;
    content: "";
    background-size:1rem;
    background-image: url(../images/Down.png) !important;
}
.accordion-button:not(.collapsed)::after {
    margin-top: -4px;
    transform: rotate(-180deg);
}

.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit;
}

.accordion-flush .accordion-item:first-child {
    border-top: 1px solid #ff9400;
}

.accordion-flush .accordion-item:last-child {
    border-bottom: 1px solid #ff9400;
    border-radius: 10px !important;
}
.accordion-item p {
    font-size: 1rem;
}
.table tr td:nth-child(2), .table tr th:nth-child(2) {
  text-align:right;
}

.points_title {
    max-width: 565px;
    margin: auto;
    padding: 30px 0px;
    position: relative;
    text-align: center;
}

    .points_title::before {
        top: 50%;
        width: 100%;
        height: 1px;
        background: #000;
        content: "";
        position: absolute;
        left: 0;
        z-index: 0;
    }

    .points_title h2 {
        color: #fff;
        display: inline-block;
        position: relative;
        background: #ff9400;
        border-radius: 35px;
        padding: 15px 30px;
        min-width: 200px;
        font-size: 25px;
        font-weight: 700;
    }
#more {
    display: none;
  
}