/**********************************Fonts
*******************************************************************************************/

/**********************************Main elements
*******************************************************************************************/

@font-face {
    font-family: 'Bebas';
    src: url('../fonts/bebasneue_bold.eot');
    src: local('BebasNeueBold'), local('Bebas Neue Bold'), url('../fonts/bebasneue_bold.woff') format('woff'), url('../fonts/bebasneue_bold.ttf') format('truetype'), url('../fonts/bebasneue_bold.svg') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Gilroy';
    src: local('Gilroy Regular'), local('Gilroy-Regular'),
    url('../fonts/gilroy-regular.woff2') format('woff2'),
    url('../fonts/gilroy-regular.woff') format('woff'),
    url('../fonts/gilroy-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: local('../fonts/gilroy-semibold'), local('Gilroy-Semibold'),
    url('../fonts/gilroy-semibold.woff2') format('woff2'),
    url('../fonts/gilroy-semibold.woff') format('woff'),
    url('../fonts/gilroy-semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
body{
    color: #fff;
    background: #050411;
}
a{
    color: #ABAFE5;
}a:hover{
     color: #fff;
     text-decoration: none;
 }

/**********************************Spacing
*******************************************************************************************/
.pt-150{
    padding-top: 150px;
}
.pt-140{
    padding-top: 140px;
}
.pt-130{
    padding-top: 130px;
}
.pt-120{
    padding-top: 120px;
}
.pt-110{
    padding-top: 110px;
}
.pt-100{
    padding-top: 100px;
}
.pt-90{
    padding-top: 90px;
}
.pt-80{
    padding-top: 80px;
}
.pt-70{
    padding-top: 70px;
}
.pt-60{
    padding-top: 60px;
}
.pt-50{
    padding-top: 50px;
}
.pt-40{
    padding-top: 40px;
}
.pt-30{
    padding-top: 30px;
}
.pt-20{
    padding-top: 20px;
}
.pt-10{
    padding-top: 10px;
}
.pb-150{
    padding-bottom: 150px;
}
.pb-140{
    padding-bottom: 140px;
}
.pb-130{
    padding-bottom: 130px;
}
.pb-120{
    padding-bottom: 120px;
}
.pb-110{
    padding-bottom: 110px;
}
.pb-100{
    padding-bottom: 100px;
}
.pb-90{
    padding-bottom: 90px;
}
.pb-80{
    padding-bottom: 80px;
}
.pb-70{
    padding-bottom: 70px;
}
.pb-60{
    padding-bottom: 60px;
}
.pb-50{
    padding-bottom: 50px;
}
.pb-40{
    padding-bottom: 40px;
}
.pb-30{
    padding-bottom: 30px;
}
.pb-20{
    padding-bottom: 20px;
}
.pb-10{
    padding-bottom: 10px;
}
.py-150{
    padding-bottom: 150px;
    padding-top: 150px;
}
.py-140{
    padding-bottom: 140px;
    padding-top: 140px;
}
.py-130{
    padding-bottom: 130px;
    padding-top: 130px;
}
.py-120{
    padding-bottom: 120px;
    padding-top: 120px;
}
.py-110{
    padding-bottom: 110px;
    padding-top: 110px;
}
.py-100{
    padding-bottom: 100px;
    padding-top: 100px;
}
.py-90{
    padding-bottom: 90px;
    padding-top: 90px;
}
.py-80{
    padding-bottom: 80px;
    padding-top: 80px;
}
.py-70{
    padding-bottom: 70px;
    padding-top: 70px;
}
.py-60{
    padding-bottom: 60px;
    padding-top: 60px;
}
.py-50{
    padding-bottom: 50px;
    padding-top: 50px;
}
.py-40{
    padding-bottom: 40px;
    padding-top: 40px;
}
.py-30{
    padding-bottom: 30px;
    padding-top: 30px;
}
.py-20{
    padding-bottom: 20px;
    padding-top: 20px;
}
.py-10{
    padding-bottom: 10px;
    padding-top: 10px;
}
/**********************************Main elements
*******************************************************************************************/
.btn_type1 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #36C0E7 6.68%, #4B51EA 84.84%, #4B51EA 87.36%);
    box-shadow: 0 15px 60px rgba(66, 130, 233, .45);
    border-radius: 15px;
    width: 100%;
    border: 0;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    line-height: 21px;
    padding: 20px 28px;
}

.btn_type1:hover, a.btn_type1:hover, a.btn_type2:hover{
    color: #fff;
    box-shadow: 0 15px 60px rgba(66, 130, 233, .65)
}
.primary-btn{
    display: inline-block;
    background: linear-gradient(90deg,#36C0E7 6.68%,#4B51EA 84.84%,#4B51EA 87.36%);
    box-shadow: 0 15px 60px rgba(66,130,233,.45);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    color: #fff;
    border: 0;
}.primary-btn:hover {
     box-shadow: 0 15px 80px rgba(57, 182, 231, 0.67);
     color: #fff;
 }
.primary-xl-btn{
    display: inline-block;
    background: linear-gradient(90deg,#36C0E7 6.68%,#4B51EA 84.84%,#4B51EA 87.36%);
    box-shadow: 0 15px 60px rgba(66,130,233,.45);
    border-radius: 15px;
    border: 0;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    line-height: 21px;
    padding: 25px 68px;
}.primary-xl-btn:hover{
     box-shadow: 0 15px 80px rgba(57, 182, 231, 0.67);
     color: #fff;
 }
 .dark-btn{
     border:1px solid #36C0E7;
     background-color:  transparent;
     box-shadow: 0 15px 60px rgba(66,130,233,.45);
     color: #fff;
 } .dark-btn:hover{
        box-shadow: 0 15px 80px rgba(57, 182, 231, 0.67);
        background: linear-gradient(90deg,#36C0E7 6.68%,#4B51EA 84.84%,#4B51EA 87.36%);
        color: #fff;
    }
.primary-link{
    color: #ABAFE5;
    text-decoration: none;
    font-weight: 600;
}.primary-link:hover {
     color: #fff;
     text-decoration: none;
 }

 /*

 */

.navbar-dark{
    background: rgba(5,4,17,0.63)!important;
    color: #fff;
}
.navbar-dark .navbar-nav .nav-link{
    display: block;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #ABAFE5;
    font-size: 16px;
    line-height: 19px;
    margin: 0 25px;
}
.game-thumbnail{
    color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 25px;
}

.game-name{
    font-family: 'Bebas';
    display: inline-block;
    color: #fff;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 0.34px;
    font-weight: 700;
    padding-right: 45px;
    background: url(/img/arrow_event.svg) no-repeat center right;
    background-size: 30px auto;
    padding-top: 4px;
}
.game-thumbnail:hover .game-name{
    padding-right: 55px;
}
.game-thumbnail:hover .game-img-container img{
    box-shadow: 0 15px 60px rgba(66,130,233,.45);
}
.game-img-container{
    width: 264px;
    height: 353px;
    display: block;
    margin-bottom: 16px;
}.game-img-container img, .game-name{
     transition: 300ms;
     -webkit-transition: 300ms;
     -moz-transition: 300ms;
     -ms-transition: 300ms;
     -o-transition: 300ms;
     -khtml-transition: 300ms;
     max-width: 100%;
     height: auto;
     border-radius: 15px;
 }
 .btn-back{
     position: fixed;
     left: 25px;
     top: 40px;
 }
.btn{
    transition: 400ms;
    -webkit-transition: 400ms;
    -moz-transition: 400ms;
    -ms-transition: 400ms;
    -o-transition: 400ms;
    -khtml-transition: 400ms;
}.btn:hover{
     transition: 400ms;
     -webkit-transition: 400ms;
     -moz-transition: 400ms;
     -ms-transition: 400ms;
     -o-transition: 400ms;
     -khtml-transition: 400ms;
 }
.form-control {
    background: #1f2032;
    border-radius: 15px;
    border: 0;
    padding: 0 45px;
    height: 52px;
    color: #abafe5;
    box-sizing: border-box;
    width: 100%;
}

input.form-control:focus,
input.form-control:hover {
    background: #292a40;
    color: #abafe5;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    background-color: #1f2032;
    color: #abafe5;
}
.btn-outline-dark {
    color: #eff7ff;
    background-color: #2f314c;
    border-color: #1f2032;
}

.guest-count-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    background-color: #1A1B2B;
    border-radius: 15px;
    width: 68px;
    height: 68px;
    margin-right: 15px;
}.guest-count-btn:hover, .guest-count-btn.active{
}.guest-count-btn:hover, .guest-count-btn.active{
    background-color: #ABAFE5;
     color: #1A1B2B;
 }.guest-count-btn:hover img, .guest-count-btn.active img{
       filter: brightness(0);
   }.guest-count-btn img{
        filter: brightness(10);
    }
.booking-section-title{
    font-family: Bebas;
    font-style: normal;
    font-weight: bold;
    font-size: 60px;
    line-height: 110%;
    letter-spacing: 2px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 60px;
    margin-top: 50px;
}.booking-section-title span{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    width: 76px;
    font-family: Gilroy;
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    color: #fff;
    border: 6px solid #672ef196;
    border-radius: 50%;
    margin-right: 24px;
 }
.datepicker{
    width: 500px;
    background: #050412;
    border: none;
}
.-other-month-{
    opacity: 0!important;
}
.datepicker--day-name{
    font-family: Gilroy;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    margin: 5px;
    display: flex;
    width: 60px;
    align-items: center;
    letter-spacing: 0.34px;
    color: #ABAFE5!important;
}
.datepicker--nav-title, .datepicker--nav-title i{
    font-family: Gilroy;
    font-style: normal;
    font-weight: 600;
    font-size: 21px;
    line-height: 21px;
    letter-spacing: 0.34px;

    color: #FFFFFF;
}
 .btn-day{
     margin: 5px;
     height: 60px;
     width: 60px;
     color: #fff;
     background: #1F2032;
     border-radius: 15px;
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
     font-family: Bebas Neue;
     font-style: normal;
     font-weight: bold;
     font-size: 36px;
     line-height: 110%;
     letter-spacing: 2px;
 }.btn-day.-disabled-, .-disabled-.btn-day:hover{
       background-color: #000000!important;
       color: #131212!important;
       border-color: #292929;
       cursor: auto;
   }.btn-day:hover, .btn-day.-selected-{
       background-color: #1f2132!important;
       color: #ffffff!important;
       border: 2px solid #8556ff;
       }
    .air-datepicker{
        display: flex;
        align-items: center;
        justify-content: center;

    }
.datepicker--cell.-current- {
    color: #8556fe;
}
/********************* Type Cards************************/

.type-card{
    background: #1A1B2B;
    color: #ABAFE5;
    height: 260px;
    border-radius: 15px;
    margin: 15px 0px;
    padding: 38px 21px 40px 21px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}.type-card h2{
     font-family: Gilroy;
     font-style: normal;
     font-weight: bold;
     font-size: 22px;
     letter-spacing: -0.41px;
     color: #FFFFFF;
 }
.type-card .type-card-title {
    min-height: 60px;
}
.type-card.active{
    /*background-color: #ABAFE5;*/
    /*color: #1A1B2B;*/

    color: #ffffff;
    box-shadow: 0px 0px 20px 10px #250f5d;
    border: 2px solid #8556ff;
}
.type-card.active .game-info-item,
.type-card.active h2{
    color: #fff;
}
.type-card .game-info-item{
    font-family: Gilroy;
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 21px;
    letter-spacing: -0.41px;
    color: #FFFFFF;
}.type-card .game-info-item img{
    margin-right: 10px;
    width: 25px;
 }
.btn-time{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.btn-time:before{
    content: url('/img/icons/clock.png');
    width: 20px;
    height: 20px;
    margin-right: 5px;
    z-index: 2;
    display: flex;
    justify-content: center;
}
.bg-black{
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    padding-top: 20px;
    background: linear-gradient(#1a1c2b,#1a1c2b) padding-box,linear-gradient(
    90deg
    ,#36C0E7 6.68%,#4B51EA 84.84%,#4B51EA 87.36%) border-box;
    border: 2px solid transparent;
}
.booking-info-bar{
    position: sticky;
    top: 30px;
    font-family: Gilroy;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}.booking-info-bar h1{
     font-family: Gilroy;
     font-style: normal;
     font-weight: bold;
     font-size: 24px;
     line-height: 40px;
     letter-spacing: -0.41px;
     margin-bottom: 36px;
 }.booking-info-bar .game-type{
       letter-spacing: 0.2px;
       margin-bottom: 36px;
   }
  .booking-date{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 36px;
  }.booking-date img, .booking-time img{
    margin-right: 10px;
     }
   .booking-time{
       margin-bottom: 36px;
   }
   .booking-price span{
       font-weight: 300;
   }
.guest-counter-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


.form_line input {
    background: #1F2032;
    border-radius: 15px;
    border: 0;
    padding: 0 45px;
    height: 52px;
    color: #ABAFE5;
    box-sizing: border-box;
    width: 100%;
    position: relative;
}
.form_line textarea{
    background: #1F2032;
    border-radius: 15px;
    border: 0;
    padding: 0 45px;
    height: 100%;
    padding-top: 15px;
    color: #ABAFE5;
    box-sizing: border-box;
    width: 100%;
    position: relative;

}
.form_line input:focus,
.form_line input:hover,
.form_line textarea:hover,
.form_line textarea:focus
{
    background: #292a40!important;
}

.form_line {
    margin-bottom: 10px
}

.icon_c:before,
.icon_p:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 19px;
    left: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
}

.icon_c:before {
    content: url('/img/icons/icon_c.svg');
}

.icon_p:before {
    content: url('/img/icons/icon_p.svg');
}



.room-card .vr_game_name{
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 21px;
    transition: 0.5s;
}
.room-card .bottom-container{
    position: absolute;
    bottom: 0px;
    left: 0px;
    border-top: 0.5px solid #696C9D;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 21px 0px;
    width: 100%;
}
.room-card:hover .vr_game_name {
    padding-right: 57px;
    transition: 0.5s;
}
.room{
    width: 287px;
}
.room-card{
    color: #fff;
    height: 470px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 26px;
    box-shadow: 0 15px 22px rgb(66 130 233 / 45%);
    background-color: #000;
}a.room-card:hover{
     color: #fff;
 }

.owl-carousel .owl-item .room-card img.room-img, .room-card img.room-img{
    height: 520px;
    position: absolute;
    top: -60px;
    max-width: initial;
    width: initial;
}
.room-card-overlay {
    position: absolute;
    z-index:2;
    height: 100%;
    width: 100%;
    opacity: 0.8;
    background: linear-gradient(171deg, transparent 32.68%, #000 69.84%, #000 87.36%);
    /*background: linear-gradient(171deg, #36c0e773 32.68%, #4b51ea7a 69.84%, #4b51ea82 87.36%);
    #0f1265 69.84%, #0c0e44 87.36%);
    */
}
.room-card .room-info{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    bottom: 0px;
    padding: 20px 30px;
    height: 140px;
    width: 100%;
    z-index: 5;
}
.room-card .room-info h3{
    font-size: 32px;
    margin-bottom: 40px;
}
.room-card .room-info .desc{
    display: none;
    text-align: center;
    margin-bottom: 20px;
}
.room-card .type_room_icons img{
    width: 36px;
    margin-right: 18px;
    margin-left: 12px;
}
.room-card .type_room_icons{
    margin-bottom: 43px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    position: absolute;
    width: 100%;
    padding: 20px 3px;
    z-index: 10;
    top: 25px;
}
.room-card .type_room_icons div{
    font-weight: 400;
    font-size: 30px;
    color: #fff;
    line-height: 35px;
}
.room .room_description{
    padding: 37px 15px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.room .btn{
    opacity: 0;
    transition: 0.8s;
    position: absolute;
    top: 37px;
    border: 2px solid #fff;
    border-radius: 34px;
    font-weight: 600;
    font-size: 18px;
    height: 52px;
    line-height: 37px;
    min-width:225px;
}.room .btn-outline-light:hover{
     background: linear-gradient(#050412,#050412) padding-box, linear-gradient(
         90deg
         , #36C0E7 6.68%, #4B51EA 84.84%, #4B51EA 87.36%) border-box;
     color: #36C0E7;
     box-shadow: 1px 16px 60px 4px rgb(66 130 233 / 45%);
     border: 2px solid transparent;
 }
.room .room-info .btn{
    opacity: 1;
    position: initial;
    margin-top: 15px;
}
.room .room_description .desc{
    color: #ABAFE5;
    font-size: 12px;
    text-align: center;
    transition: 0.1s ease-out;
}.room:hover .room_description .desc{
     opacity: 0;
     transition: 0.1s ease-out;
     visibility: hidden;
 }.room:hover .room_description .btn{
      opacity: 1;
      box-shadow: 0 15px 60px rgb(66 130 233 / 45%);
      transition: 0.8s;
  }
.room-card .room-card-icons{
    display: flex;
    align-items: center;
    justify-content: center;
}.room-card .room-card-icons .room-card-icon{
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     -ms-flex: 0 0 33.333333%;
     flex: 0 0 33.333333%;
     max-width: 33.333333%;
     margin-bottom: 10px;
 }.room-card .room-card-icons .room-card-icon img{
      margin-bottom: 10px;
  }
.rooms_image{
    height: 825px;
    position: absolute;
    width: 100%;
    z-index: -9;
    top: -60px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-color: #050411;
}
.rooms_image_mobile{
    display: none;
}
.game-card-all{
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    background-color: #1A1B2B;
    height: 220px;
}
.game-card-all p{
    margin-bottom: 50px;
    color: #ABAFE5;
}
.game-card{
    border-radius: 15px;
    width: 166px;
    color: #fff;
}.game-card img{
     max-height: 220px;
     width: 100%;
     border-radius: 15px;
    margin-bottom: 16px;
 }.game-card h1{
       font-family: Bebas;
       font-style: normal;
       font-weight: bold;
       font-size: 24px;
       line-height: 24px;
       letter-spacing: 1px;
       color: #FFFFFF;

   }
.game-card.active img {
    /*box-shadow: 0px 0px 20px 10px #250f5d;*/
    /*border: 5px solid #250f5d;*/
    box-shadow: 0px 0px 20px 10px #250f5d;
    border: 2px solid #8556ff;
}
.game-card-all.game-card.active img{
    border: none;
    box-shadow: none;
}.game-card-all.game-card.active{
     /*box-shadow: 0px 0px 20px 10px #250f5d;*/
     /*border: 5px solid #250f5d;*/
     box-shadow: 0px 0px 20px 10px #250f5d;
     border: 2px solid #8556ff;
 }
 .booking-result{
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 50px 0px;
     border-radius: 15px;
     padding-top: 20px;
     background: linear-gradient(#1a1c2b,#1a1c2b) padding-box,linear-gradient(
         90deg
         ,#36C0E7 6.68%,#4B51EA 84.84%,#4B51EA 87.36%) border-box;
     border: 2px solid transparent;
 }

.map-container{
    overflow: hidden;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    margin: 50px 0px;
    position: relative;
}.map-container .map-overlay{
    z-index: 2;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    opacity: 1;
    transition: 0.5s;
    width: 100%;
     background: linear-gradient(rgba(26, 28, 43, 0.5), rgba(75, 81, 234, 0.6));
 }.map-container:hover .map-overlay{
    opacity: 0;
   }
  .map-container.active{
      border: 2px solid #4B51EA;
      box-shadow: 0px 0px 20px 10px #250f5d;
  }
 .map-content h2{
     color: #fff;
     z-index: 6;
     position: absolute;
     top: 0px;
     left: 0px;
     padding: 20px;
     display: flex;
     align-items: flex-end;
     justify-content: flex-start;
     width: 100%;
     height: 100%;
 }
@media (max-width: 475px) {
    .map-container{
        height: 230px;
        margin: 30px 0px;
    }
    .game-card{
        width: 137px;
    }
    .datepicker {
        width: 320px;
        background: #050412;
        border: none;
    }
    .btn-day {
        margin: 3px;
        height: 38px;
        width: 38px;
        color: #fff;
        background: #1F2032;
        border-radius: 15px;
        display: flex;
        align-items: flex-start;
        padding: 6px;
        justify-content: flex-start;
        font-family: Bebas Neue;
        font-style: normal;
        font-weight: bold;
        font-size: 17px;
        line-height: 110%;
        letter-spacing: 2px;
    }
    .booking-section-title span {
        height: 40px;
        width: 40px;
        border: 3px solid #672ef196;
        border-radius: 50%;
        margin-right: 24px;
        font-size: 12px;
    }
    .booking-section-title {
        font-size: 18px;
    }
}
@media (max-width: 320px) {
    .game-card{
        width: 130px;
    }
    .datepicker {
        width: 270px;
        background: #050412;
        border: none;
    }
    .btn-day {
        margin: 3px;
        height: 31px;
        width: 31px;
        color: #fff;
        background: #1F2032;
        border-radius: 3px;
        display: flex;
        align-items: flex-start;
        padding: 6px;
        justify-content: flex-start;
        font-family: Bebas Neue;
        font-style: normal;
        font-weight: bold;
        font-size: 17px;
        line-height: 110%;
        letter-spacing: 2px;
    }
}