@font-face {
    font-family: customFont;
    src: url(/front/assets/fonts/barnacle-boy.otf);
}
@font-face {
    font-family: hobo;
    src: url(/front/assets/fonts/hobostd.otf);
}
body{
    margin: 0;
    padding: 0;
}
  
  h1 {
    font-family: customFont;
    color: #FFFFFF;
    -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #FFFFFF;
  }

  .no-side-margin{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .label-text{
      font-size: 22px;
      font-family: hobo;
    color: #FFFFFF;
  }

  .input-box{
      width: 60%;
      background-color: #F0AA3D;
      border: 1px #D87330;
  }

.img-button{
    width: 30%;
}

.keep-button{
    width: 65%;
}

.icon-button{
    width: 20%;
}

.footer-img {
    position:fixed;
    right: 0;
    bottom:0;
    width:20%;
}

.footer-img1 {
    position:fixed;
    right: 0;
    bottom:0;
    width:20%;
}

.footer-left{
    position: fixed;
    left: 2rem;
    bottom: 0;
    width: 15%;
}

.home-icon{
    width: 100%;
}

.header-img {
    position:absolute;
    right: 2rem;
}

  .home-background{
    background: url(/front/assets/images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover !important;
    width: 100%;
  }
  
  .home_page_background{
      background: url(/front/assets/images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover !important;
    width: 100%;
  }


  .board-img{
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
  }

.floor-img{
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
  }

.center-text{
    text-align: center;
}

.mt-6{
    margin-top: 8rem;
}

.instruction-heading{
    position: absolute;
    top: 20%;
    left: 45%;
}

.instruction-content{
    position: absolute;
    color: #FFFFFF;
    font-family: hobo;
    top: 30%;
    left: 20%;
    right: 40%;
    width: 100%;
}
/*  */
/*  */
/* First Page with Floor */
.main-row img{
    width: 70%;
}

.game{
    position: absolute;
    top: 410px;
    right: 60%;
}

.nagam{
    position: absolute;
    top: 200px;
    left: 80px;
}

.main{
    position: absolute;
    top: 20px;
    left: 900px;
}

.lagna{
    position: absolute;
    top: 400px;
    right: 40%;
}

.nodanna{
    position: absolute;
    top: 0;
    right: 40%;
}

.nakath{
    position: absolute;
    top: 200px;
    right: 0;
}

/* End Main Row  */
@media only screen and (max-width: 992px){
    .main-row img{
        width: 100%;
    }
    .game{
        position: absolute;
        top: 300px;
        left: 0;
    }
    
    .nagam{
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .main{
        position: absolute;
        top: 70px;
        left: 200px;
    }
    
    .lagna{
        position: absolute;
        top: 280px;
        right: 20px;
    }
    
    .nodanna{
        position: absolute;
        top: 0;
        left: 200px;
    }
    
    .nakath{
        position: absolute;
        top: 250px;
        right: 500px;
    }
}
@media only screen and (max-width: 768px){
    .main-row img{
        width: 50%;
    }
    
    .game{
        position: absolute;
        top: 10px;
        left: 0;
    }
    
    .nagam{
        position: absolute;
        top: 600px;
        left: 0;
    }
    
    .main{
        position: absolute;
        top: 300px;
        left: 10px;
    }
    
    .lagna{
        position: absolute;
        top: 600px;
        left: 350px;
    }
    
    .nodanna{
        position: absolute;
        top: 0;
        right: 0;
    }
    
    .nakath{
        position: absolute;
        top: 400px;
        left: 380px;
    }
}

@media only screen and (max-width: 480px){
    .main-row img{
        width: 70%;
    }
    
    .game{
        position: absolute;
        top: 10px;
        left: 0;
    }
    
    .nagam{
        position: absolute;
        top: 500px;
        left: 0;
    }
    
    .main{
        position: absolute;
        top: 250px;
        left: 0;
    }
    
    .lagna{
        position: absolute;
        top: 600px;
        left: 280px;
    }
    
    .nodanna{
        position: absolute;
        top: 0;
        left: 300px;
    }
    
    .nakath{
        position: absolute;
        top: 380px;
        left: 280px;
    }
}
/* End Home Page */

/*  */

/*  */

/* Game Page */
.game-row img{
    width: 90%;
}

.aliya{
    position: absolute;
    top: 0;
    left: 300px;
}

.boruwa{
    position: absolute;
    top: 320px;
    right: 250px;
}

.gaslabu{
    position: absolute;
    top: 480px;
    left: 150px;
}

.kanamutti{
    position: absolute;
    top: 300px;
    left: 128px;
}

.puzzle{
    position: absolute;
    top: 0px;
    left: 224px;
}

.sagawanu{
    position: absolute;
    top: 150px;
    right: 480px;
}

/* End Main Row  */
@media only screen and (max-width: 992px){
    .game-row img{
        width: 100%;
    }
    
    .aliya{
        position: absolute;
        left: 200px;
    }
    
    .boruwa{
        position: absolute;
        top: 200px;
        right: 200px;
    }
    
    .gaslabu{
        position: absolute;
        top: 250px;
        left: 0;
    }
    
    .kanamutti{
        position: absolute;
        top: 200px;
        left: 100px;
    }
    
    .puzzle{
        position: absolute;
        left: 150px;
    }
    
    .sagawanu{
        position: absolute;
        right: 350px;
        top: 0;
    }
}
@media only screen and (max-width: 768px){
    .game-row img{
        width: 55%;
    }
    
    .aliya{
        position: absolute;
        left: 250px;
    }
    
    .boruwa{
        position: absolute;
        top: 550px;
        right: 280px;
    }
    
    .gaslabu{
        position: absolute;
        top: 300px;
    }
    
    .kanamutti{
        position: absolute;
        top: 500px;
        left: 300px;
    }
    
    .puzzle{
        position: absolute;
        top: 200px;
        left: 300px;
    }
    
    .sagawanu{
        position: absolute;
        left: 0;
    }
}

@media only screen and (max-width: 480px){
    .game-row img{
        width: 55%;
    }
    
    .aliya{
        position: absolute;
        left: 250px;
    }
    
    .boruwa{
        position: absolute;
        top: 550px;
        right: 200px;
    }
    
    .gaslabu{
        position: absolute;
        top: 300px;
    }
    
    .kanamutti{
        position: absolute;
        top: 500px;
        left: 250px;
    }
    
    .puzzle{
        position: absolute;
        top: 200px;
        left: 250px;
    }
    
    .sagawanu{
        position: absolute;
        left: 0;
    }
}

/* END Game page with Floor */


.instruction-text{
    position:absolute;
    top: 25%;
    left: 48%;
}

.instruction-para{
    position:absolute;
    top: 35%;
    left: 25%;
    right: 10%;
}

.instruction-arrow{
    position: absolute;
    bottom: 0;
    left: 40%;
}

.instruction{
    background: url(/front/assets/images/board1.png);
    background-repeat: no-repeat;
    background-size: 100% 100% !important;
    width: 100%;
}


  .modal {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(77, 77, 77, .7);
    transition: all .4s;
  }
  
  .modal:target {
    visibility: visible;
    opacity: 1;
  }
  
  .modal__content {
    border-radius: 4px;
    position: relative;
    width: 500px;
    max-width: 90%;
    background: url(/front/assets/images/wood.png);
    padding: 1em 2em;
  }
  
  .modal__footer {
    text-align: right;
  }
    .modal__footer a {
      color: #585858;
    }
    .modal__footer i {
      color: #FFFFFF;
    }
  
  .modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #585858;
    font-size:40px;
    text-decoration: none;
  }
  


@media only screen and (max-width: 600px) {

    .home-background{
        background: url(/front/assets/images/bg.jpg);
        background-repeat: no-repeat;
        background-size: cover !important;
        width: 100%;
      }

    .header-img {
        position:relative;
        top: 35%;
    } 

    
    
    .floor-image{
        background: url(/front/assets/images/bg_mobi.png);
        background-repeat: no-repeat;
        /* background-size: 100% 100% !important; */
        width: 100%;
        
    }

    
} 


/*
home page
*/
.home_page_background {

    /*
        background-size: contain; 
    */
        /*linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,179,0,1) 100%)*/
        background: url(/front/assets/images/background_all.png);
        height: -webkit-fill-available;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        
    }
    @media only screen and (max-width: 992px){
        .home_page_background {
    /*
        background-size: contain; 
    */
        background: url(/front/assets/images/background_md_all.png) , linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,179,0,1) 100%) !important ;
        height: -webkit-fill-available;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
    }
    @media only screen and (max-width: 768px){
        .home_page_background {
    /*
        background-size: contain;
    */
        background: url(/front/assets/images/background_sm_all.png), linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,179,0,1) 100%)  !important;
        height: -webkit-fill-available;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
    }
    .set-heght-min{
            height: 500px;
    }
    }
    
    @media only screen and (max-width: 480px){
        .home_page_background {
    /*
        background-size: contain;
    */
        background: url(/front/assets/images/bg_mobi_all.png), linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,179,0,1) 100%) !important;
    /*
        height: -webkit-fill-available;
    */
        background-size: 100% 100% !important;
    /*
        min-height: 20px;
    */
        background-repeat: no-repeat !important;
    }
    }
    
    /*
instruction page
*/
.instruction-background {

    /*
        background-size: contain; 
    */
    
        background: url(/front/assets/images/background_all-1.png), linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,179,0,1) 100%);
        height: -webkit-fill-available;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        
    }
    @media only screen and (max-width: 992px){
        .instruction-background {
    /*
        background-size: contain; 
    */
        background: url(/front/assets/images/background_md_all-1.png), linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,179,0,1) 100%) !important ;
        height: -webkit-fill-available;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
    .heading-image{
        width: 40%;
    }
    }
    @media only screen and (max-width: 768px){
        .instruction-background {
    /*
        background-size: contain;
    */
        background: url(/front/assets/images/background_sm_all-1.png), linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,179,0,1) 100%) !important;
        height: -webkit-fill-available;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
    }
    .heading-image{
        width: 40%;
    }

    .set-heght-min{
            height: 500px;
    }
    }
    
    @media only screen and (max-width: 480px){
        .instruction-background {
    /*
        background-size: contain;
    */
        background: url(/front/assets/images/bg_mobi_all-1.png), linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,179,0,1) 100%) !important;
    /*
        height: -webkit-fill-available;
    */
        background-size: 100% 100% !important;
    /*
        min-height: 20px;
    */
        background-repeat: no-repeat !important;
    }
    .heading-image{
        width: 80%;
    }
    }

    .home-blog {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    @media (min-width: 992px) {
        .home-blog {
            padding-top: 100px;
            padding-bottom: 100px;
        }
    }
    .home-blog .section-title {
        padding-bottom: 15px;
    }
    .home-blog .media {
        margin-top: 50px;
    }
    @media (min-width: 768px) {
        .home-blog .media {
            margin-top: 30px;
        }
    }
    
    .media.blog-media {
        margin-top: 30px;
        position: relative;
        display: block;
    }
    @media (min-width: 992px) {
        .media.blog-media {
            display: table;
        }
    }

    .media.blog-media > a {
        position: relative;
        display: block;
    }
    @media (min-width: 992px) {
        .media.blog-media > a {
            display: table-cell;
            vertical-align: top;
            min-width: 200px;
        }
    }
    @media (min-width: 1200px) {
        .media.blog-media > a {
            min-width: 230px;
        }
    }
    .media.blog-media > a:before {
        position: absolute;
        content: "";
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        opacity: 0;
        transform: scale(0);
        transition: transform 0.3s ease, opacity 0.3s;
        background: rgba(255, 211, 108, 0.7);
    }
    .media.blog-media > a img {
        width: 100%;
    }
    .media.blog-media:hover > a:before {
        opacity: 1;
        transform: scale(1);
    }
   
    .media.blog-media:hover .media-body h5 {
        color: #D60000;
    }
    .media.blog-media:hover .media-body a.post-link {
        color: #D60000;
        text-decoration: underline;
    }
    .media.blog-media .media-body {
        border: 1px solid #efeff3;
        padding: 30px 30px 10px;
        font-size: 14px;
        background: #fff;
        border-top: none;
    }
    @media (min-width: 992px) {
        .media.blog-media .media-body {
            padding: 15px 20px 10px;
            border-top: 1px solid #efeff3;
            border-left: none;
            display: table-cell;
            vertical-align: top;
        }
    }
    @media (min-width: 1200px) {
        .media.blog-media .media-body {
            padding: 30px 20px 10px;
        }
    }
    .media.blog-media .media-body h5 {
        transition: color 0.3s ease;
        margin-bottom: 15px;
    }
    @media (min-width: 992px) {
        .media.blog-media .media-body h5 {
            font-size: 15px;
        }
    }
    @media (min-width: 1200px) {
        .media.blog-media .media-body h5 {
            margin-bottom: 15px;
            font-size: 18px;
        }
    }
    .media.blog-media .media-body a.post-link {
        display: block;
        color: #222;
        font-size: 11px;
        padding: 23px 0;
        text-transform: uppercase;
        font-weight: 400;
    }
    @media (min-width: 992px) {
        .media.blog-media .media-body a.post-link {
            padding: 7px 0;
        }
    }
    @media (min-width: 1200px) {
        .media.blog-media .media-body a.post-link {
            padding: 23px 0;
        }
    }
   
.black{
    color: #000000;
    font-weight: bold;
}

    .nakath-background {

        /*
            background-size: contain; 
        */
        
            background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,179,0,1) 100%);
            height: -webkit-fill-available;
            background-size: cover !important;
            background-repeat: no-repeat !important;
            
        }
        @media only screen and (max-width: 992px){
            .instruction-background {
        /*
            background-size: contain; 
        */
            background: url(/front/assets/images/background_md_all-1.png), linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,179,0,1) 100%) !important ;
            height: -webkit-fill-available;
            background-size: cover !important;
            background-repeat: no-repeat !important;
        }
        .heading-image{
            width: 40%;
        }
        }
        @media only screen and (max-width: 768px){
            .instruction-background {
        /*
            background-size: contain;
        */
            background: url(/front/assets/images/background_sm_all-1.png), linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,179,0,1) 100%) !important;
            height: -webkit-fill-available;
            background-size: 100% 100% !important;
            background-repeat: no-repeat !important;
        }
        .heading-image{
            width: 40%;
        }
    
        .set-heght-min{
                height: 500px;
        }
        }
        
        @media only screen and (max-width: 480px){
            
            body{
    margin-top: 20%;
    padding: 0;
}
            .instruction-background {
        /*
            background-size: contain;
        */
            background: url(/front/assets/images/bg_mobi_all-1.png), linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,179,0,1) 100%) !important;
        /*
            height: -webkit-fill-available;
        */
            background-size: 100% 100% !important;
        /*
            min-height: 20px;
        */
            background-repeat: no-repeat !important;
        }
        .heading-image{
            width: 80%;
        }
        
        .nakath-background {

        /*
            background-size: contain; 
        */
        
            background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,179,0,1) 100%);
            height: -webkit-fill-available;
            background-size: cover !important;
            background-repeat: no-repeat !important;
            margin-bottom:120px;
            
        }
        }
    
    
    .card{
        /*border-radius: 15px;*/
    -webkit-box-shadow: 6px 8px 13px -1px rgb(0 0 0);
    -moz-box-shadow: 6px 8px 13px -1px rgba(0,0,0,1);
    box-shadow: 3px 2px 5px -1px rgb(0 0 0);
    }
    
    .pulse{
        animation: pulse 4s linear infinite;
    }
    @-webkit-keyframes "pulse" {
    0% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
    50% {
       -webkit-transform: scale(0.90);
       transform: scale(0.90);
    }
    }

.logo{
    width:100px;
}

.ayubowan{
    width:10%;
}