.navbar-collapse{
    flex-grow: unset;
}
.navbar-collapse .nav-link{
    font-size: 15px;
    font-weight: 500;
}
.top-navigation {
    position: absolute;
    padding: 1rem 3rem;
    z-index: 10;
}
.top-navigation a {
    color: white;
    text-decoration: none;
}
.top-navigation a:hover {
    color: #FDCC00;
    text-decoration: underline;
}

/*  */

.scrolled {
    background: rgba(89, 89, 89, .4)!important;
    padding-top: 1rem !important;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
    /* transition: padding-top 1s, background 2s; */

}
.scrolled .nav-link {
    color: white !important;
}
.scrolled .show .nav-link {
    color: black !important;
}
.scrolled .nav-link:hover {
    color: #FDCC00 !important;
}
.fixed-nav {
    /* padding-top: 3rem !important; */
    /* transition: padding-top 1s, background 2s; */
}
/*  */
main{
    /* background: linear-gradient(180deg, #00000E 19.6%, #1E1E22 100%); */
    /* background: linear-gradient(180deg, #00000E 10%, #1E1E22 100%); */
}
.no-margin{
    margin: 0;
}
.full-width{
    width: 100%;
}
.px-5rem{
    padding-left: 5rem;
    padding-right: 5rem;
}
.px-4rem{
    padding-left: 4rem;
    padding-right: 4rem;
}
.py-5rem{
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.pr-0{
    padding-right: 0;
}
.pr-5rem{
    padding-right: 5rem;
}
.pt-5rem{
    padding-top: 5rem;
}
.pt-4rem{
    padding-top: 4rem;
}
.pb-5rem{
    padding-bottom: 5rem;
}
.pb-1{
    padding-bottom: 1rem;
}
.pl-2{
    padding-left: 2rem;
}

.pl-5{
    padding-right: 2rem;
}
.mt-5rem{
    margin-top: 5rem;
}
.mt-4rem{
    margin-top: 4rem;
}
.my-5{
    margin-left: .5rem;
    margin-right: .5rem;
}
.pb-3rem{
    /* margin-top: .5rem; */
    margin-bottom: 3rem;
}

.banner-overlay{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .6;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
.banner-content{
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.top-banner{
    background: url('../img/top_bg.jpg');
}
.navbar-logo{
    height: 30px;
    width: auto;
}
footer{
    color: white;
}
footer a{
    color: inherit;
    text-decoration: none;
}
.full-height{
    height: 100%;
}
/* Important */
/* Top Banner */
.img-fluid-sm{
    width: 65%;
}
.img-fluid-lg{
    width: 80%;
}
.img-button-sm{
    width: 60%;
}
.img-button-md{
    width: 60%;
}
.img-button-lg{
    width: 80%;
}
.img-button-xl{
    width: 100%;
}
.banner_top{
    height: 100vh;
    position: relative;
}
.banner_top_secondary{
    height: 100vh;
    position: relative;
}
.secondary-banner-overlay{
    background: url('../img/secondary_banner.png');
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .8;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
.top-banner{
    object-fit: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
/* About */
#about{
    z-index: 5;
    position: relative;
}
.ribbon{
    position: relative;
    top: 0;
    content: url('../img/ribbon.png');
    object-fit: cover;
    width: 100%;
}
#about .about-bg{
    padding: 0 0 4rem 0;
}
/* Tournament */
#tournaments{
    padding: 5rem 0 0 0;
    background: url('../img/arena_tournament_bg.jpg');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}
/* Ready to Win */
#register_now{
    margin-top: 8rem;
    background: url('../img/register_now-bg.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}
/* Text */
.text-gradient {
    /* color: linear-gradient(to bottom, #F6D563 -16.67%, #D39A32 -1.67%, #F6D563 13.33%, #D39A32 28.33%, #F6D563 43.33%, #D39A32 58.33%, #F6D563 73.33%, #D39A32 88.33%, #F6D563 103.33%, #D39A32 118.33%); */
    background: #3A169D;
    background: linear-gradient(90deg, 
     rgba(58, 22, 157, 1) 0%,
     rgba(108, 91, 232, 1) 20%,
     rgba(31, 190, 107, 1) 40%, 
     rgba(82, 184, 234, 1) 60%,
     rgba(180, 71, 190, 1) 80%,
     rgba(61, 2, 148, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-family: sans-serif;
}

.text-gradient-yellow {
    /* color: linear-gradient(to bottom, #F6D563 -16.67%, #D39A32 -1.67%, #F6D563 13.33%, #D39A32 28.33%, #F6D563 43.33%, #D39A32 58.33%, #F6D563 73.33%, #D39A32 88.33%, #F6D563 103.33%, #D39A32 118.33%); */
    background: #FFBF00;
    background-image: linear-gradient(to bottom, 
    #FFBF00 0%,
    #A25800 37%,
    #905B07 75%,
    #F29100 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* text-shadow: 2px 2px 3px rgba(255,255,255,0.5); */
}
.fw-700{
    font-weight: 700;
    font-style: bold;
}
.font-anything{
    font-family: Anything !important;
}
/* list-group */
.list-group-custom
{
    color: white;
    list-style: none;
}
.list-group-custom a{
    color: inherit;
    text-decoration: none;
}
/* Accordion */
.accordion{
    height: 100%;
}
.accordion .accordion-item{
    height: inherit;
}
.accordion-collapse{
    height: calc(100% - 50px);
    position: relative;
}
.accordion-body{
    height: 100%;
    position: relative;
}
.img-nav-btn{
    height: 45px;
}
.img-nav-btn:hover,.img-nav-btn:active{
    content: url('../img/play_now-hover.png');
}
/* misc */
.btn-info{
    background: rgba(0, 226, 255, 1);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
    padding: 8px 3rem;
    font-family: Inter;
    font-weight: bold;
}
.btn-info:active, .btn-info:hover{
    background: rgb(17, 158, 176);
}
.btn-info img{
    height: 15px;
    width: auto;
}
.btn-bg{
    background-image: url('../img/btn-bg.png');
    background-size: cover;       /* or 'contain' */
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    vertical-align: middle;
    color: white;
    font-family: Tektur;
    font-weight: 800;
    width: 220px;
    height: 50px;
    line-height: 31px;
    text-shadow: 2px 0px black;
}
.btn-sm:hover{
    background-image: url('../img/btn-bg-hover.png');
}
.btn-lg:hover{
    background-image: url('../img/btn-bg-hover.png');
}
.btn-xl:hover{
    background-image: url('../img/btn-xl-hover.png');
}
.btn-xxl:hover{
    background-image: url('../img/btn-xxl-hover.png');
}
.btn-sm{
    background-image: url(../img/btn-sm.png);
    width: 280px;
    height: 60px;
    font-size: 1.7rem;
    line-height: 2.5rem;
}
.btn-lg{
    width: 320px;
    height: 60px;
    font-size: 2rem;
    line-height: 2.5rem;
}
.btn-xl{
    background-image: url(../img/btn-xl.png);
    width: 400px;
    height: 70px;
    font-size: 2rem;
    line-height: 3.5rem;
}
.btn-xxl{
    background-image: url('../img/btn-xxl.png');
    width: 700px;
    height: 102px;
    font-size: 3rem;
    line-height: 5rem;
}
.learn_play{
    content: url('../img/learn_and_play_button.png');
}
.learn_play:hover, .learn_play:active {
    content: url('../img/learn_and_play_button_hover.png');
}
.learn_play_button{
    position: absolute;
    bottom: 20px;
    text-align: center;
}
#steps-mobile{
    display: none;
}
.steps-btn-group{
    display: flex;
    justify-content: center;
}
.btn-custom-secondary{
    color: black;
    background: #ffffff;
    background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(189, 185, 185, 1) 50%, rgba(255, 255, 255, 1) 100%);
    padding: 4px 3rem;
    margin: 0 1rem;
    border-radius: 0;
    font-family: Anything;
    font-weight: bold;
}
.btn-custom-primary{
    color: black;
    background: #1E54BE;
    background: linear-gradient(347deg,rgba(30, 84, 190, 1) 0%, rgba(45, 196, 246, 1) 50%);
    padding: 4px 3rem;
    margin: 0 1rem;
    border-radius: 0;
    font-family: Anything;
    font-weight: bold;
}
.content-bg{
    /* background: linear-gradient(180deg, #00000E 19.6%, #1E1E22 100%); */
    position: relative;
}
/* Collapse */
#steps .accordion{
    background: linear-gradient(0deg, rgba(35, 31, 32, 0.85), rgba(35, 31, 32, 0.85)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.75) 39.36%, #46C2FF 193.46%);
}
#steps-mobile .accordion{
    background: linear-gradient(0deg, rgba(35, 31, 32, 0.85), rgba(35, 31, 32, 0.85)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.75) 39.36%, #46C2FF 193.46%);
}
/* Cards */
.card{
    /* background: linear-gradient(0deg, rgba(35, 31, 32, 0.85), rgba(35, 31, 32, 0.85)),
linear-gradient(90deg, rgba(0, 0, 0, 0.75) 39.36%, #46C2FF 193.46%); */
background: #231F20D9;
    background: linear-gradient(0deg, rgba(70, 194, 255, .6) -12%, rgba(35, 31, 32, 1) 36%);
    border: 1px solid rgba(0, 226, 255, 1);
    padding: 3px;
}
.card .card-body{
    border: 1px solid rgba(0, 226, 255, 1);
}
/* modal */
.modal-content{
    /* background: linear-gradient(0deg, rgba(35, 31, 32, 0.85), rgba(35, 31, 32, 0.85)),
        linear-gradient(90deg, rgba(0, 0, 0, 0.75) 39.36%, #46C2FF 193.46%); */
    background: #231f20;
    /* background: linear-gradient(0deg, rgba(70, 194, 255, .6) -12%, rgba(35, 31, 32, 1) 36%); */
    /* border: 1px solid rgba(0, 226, 255, 1); */
}
.modal .btn-close{
    color: white;
}
.modal-header{
    border: none;
}
.modal-body{
    padding: 2rem;
}
.modal-div{
    margin: 20px;
    border: 1px solid rgba(212, 195, 124, 1);
}
.modal .btn-close{
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
    opacity: 1;
    /* width: 10px;
    height: 15px; */
    padding: 0;
}
.bg-blue-gradient{
    background: linear-gradient(90deg,#00526D 0%, #4CB8DB 100%);
    padding: .4rem 1rem;
    position: relative;
    color: white;
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 700;
}
/*  */
.social-media-btn{
    background: white;
    border-radius: 3px;
    padding: 3px;
    color: black !important;
    margin-right: 3px;
}
.social-media-btn:last-child{
    margin-right: 0;
}

/*  */
#btn-to-top {
    display: inline-block;
    background-color: rgba(0, 226, 255, 1);;
    width: 50px;
    height: 50px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, 
        opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}
#btn-to-top::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #000;
}
#btn-to-top:hover {
    cursor: pointer;
    background-color: rgb(6, 143, 161);
}
#btn-to-top:active {
    background-color: rgb(6, 143, 161);
}
#btn-to-top.show {
    opacity: 1;
    visibility: visible;
}
.border-white{
    -webkit-text-stroke: 2px white;
    font-weight: 900;
}
.fw-900{
    font-weight: 900;
}
.img-fluid{
    object-fit: cover;
}
.quest-item{
    width: 100%;
}
.quest-1:hover{
    filter: drop-shadow(-4px 2px 15px #6A57E5);
}
.quest-2:hover{
    filter: drop-shadow(-4px 2px 15px #33BD7E);
}
.quest-3:hover{
    filter: drop-shadow(-4px 2px 15px #4AB6D9);
}
.tournament-card:hover{
    filter: drop-shadow(-4px 2px 15px #4AB6D9);
}
.girl-model{
    position: absolute; left: 0; bottom: 0; width: 25%;
}
.boy-model{
    position: absolute; right: 0; bottom: 0; width: 25%;
}
.center-model{
    width: 50%;
}
.video_preview{
    width: 100%;
    height: 350px;
}
#guide nav{
    background: #060728;
    background: linear-gradient(0deg, rgba(6, 7, 40, 1) 0%, rgba(0, 0, 10, 1) 100%);
}