/* Normal Laptop Screen */
@media (max-width: 1920px) {
    /* .mobile-menu-main {
        display: block;
        position: fixed;
        left: -260px;
        width: 260px;
        height: 100%;
        transition: 0.3s ease;
        overflow: auto;
        background: #017dfb;
        z-index: 100;
        top:0;
    } */
  
}
@media (max-width: 1680px) {
    /* .mobile-menu-main {
        display: block;
        position: fixed;
        left: -260px;
        width: 260px;
        height: 100%;
        transition: 0.3s ease;
        overflow: auto;
        background: #017dfb;
        z-index: 100;
        top:0;
    } */
    .grid-wrapper{
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        grid-auto-rows: 190px;
    }
    .top-menu-data .popular-games{
        max-width: 80px;
    }
  }

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) { 
    .nav-item:not(:last-child){
        margin-right: 3rem;
    }
        .grid-wrapper {
            grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
            grid-auto-rows: 168px;
        }
        /* .mobile-menu-main {
            display: block;
            position: fixed;
            left: -260px;
            width: 260px;
            height: 100%;
            transition: 0.3s ease;
            overflow: auto;
            background: #017dfb;
            z-index: 100;
            top:0;
        } */
        .top-menu-data .popular-games{
            max-width: 70px;
            height: 70px;
        }
        .game-slider .game-item img{
            height: 364px;
        } 
      
    
 }

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) { 
    html{
        font-size: 20px;
    }
    .nav-item:not(:last-child){
        margin-right: 2rem;
    }
    .custom-container{
        padding: 0 30px;
    }
    
    .top-menu-data .popular-games{
        max-width: 70px;
        height: 70px;
    }
    /* .grid-wrapper{
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
        grid-auto-rows: 118px;
    } */
   
    /* .mobile-menu-main {
        display: block;
        position: fixed;
        left: -260px;
        width: 260px;
        height: 50%;
        transition: 0.3s ease;
        overflow: auto;
        background: #017dfb;
        z-index: 100;
        top:0;
    } */
    .top-menu-data{
        gap: 20px;
    }
    .top-menu-data .popular-games{
        max-width: 56px;
        height: 56px;
    }

   
 }

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { 
    .offcanvas.hiding, .offcanvas.show, .offcanvas.showing{
        width: 100%;
    }
    .grid-wrapper{
        grid-template-columns: repeat(auto-fit, minmax(134px, 1fr));
    }
    .my-nav.navbar{
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .my-nav.navbar .nav-link{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 23px 30px !important;
        background-color: var(--secondary);
        border-radius: 20px;
        margin-bottom: 20px;
        min-height: unset;
    }
    .my-nav.navbar .nav-link:not(:last-child){
        margin-bottom: 20px;
    }
    .offcanvas-header{
        background-color: var(--white);
    }
    .offcanvas-body{
        background-color: var(--white);
    }
    .my-nav.navbar .nav-link .icon{
        margin-bottom: 0;
        margin-right: 10px;
    }
    .my-nav.navbar .nav-link.active{
        background-color: var(--primary);
    }
    .my-nav.navbar .nav-link.active::after{
        content: unset;
    }
    .my-nav.navbar .nav-link.active .regular-icon{
        display: block;
    }
    .my-nav.navbar .nav-link.active .active-icon{
        display: none;
    }
    .my-nav.navbar .nav-link.active .link{
        color: var(--white);
    }
    .nav-item:not(:last-child){
        margin-right: 0;
    }
    .cmn-box.mr-20{
        margin-right: 0px;
    }
    .responsive-top-60{
        margin-top: 60px;
    }


        /* .toggle-btn {
            position: fixed;
            display: block;
            width: 30px;
            height: 30px;
            background: url('../img/magnifying-glass-solid.svg') no-repeat center;
            border: none;
            z-index: 100;
        }
        */
    
    
        /* .menu-open .toggle-btn {
            display: block;
            width: 30px;
            height: 30px;
            background: url('../img/xmark-solid.svg') no-repeat center;
            left: 90%;
            top:4%;
        } */
    
        /* .mobile-menu-main {
            display: block;
            position: fixed;
            left: -260px;
            width: 260px;
            height: 50%;
            transition: 0.3s ease;
            overflow: auto;
            background: #017dfb;
            z-index: 100;
            top:0;
        } */
    
         .menu-open .mobile-menu-main {
            left: 0;
            width: 50%;
        }
        /* .game-bio{
            visibility: hidden;
        } */
        .mb-gamename{
            grid-column: span 4;
            display: block;
        }
       
       
    
/*     
        .mobile-link-main-bx {
            padding: 30px 30px;
            overflow: auto;
        } */
        .top-menu-data{
            justify-content: start;
            gap: 20px;
        }
        .top-menu-data .popular-games{
            max-width: 40px;
            height: 40px;
        }
        .grid-wrapper .wide{
            grid-column: span 5;
            grid-row: span 3;
        }
        .mb-gamename > a{
            padding: 20px;
         }
         .play-btn{
            position: absolute;
            content:"";
            transform: translate(-50%, -50%);
            left:50%;
            top:50%;
            max-width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            display: block;
        }
        .play-btn i{
            display: block;
        }
        .game-slider .game-item img{
            width: 100%;
            height: 264px;
        }
        .contact{
            padding: 70px 0;
        }
        .contact:before{
            width: 100%;
        }
       
       
 }
 @media only screen and (min-width: 769px) {
    /* Styles for screens wider than 768px (Desktop) */
    body.fullscreen {
        /* Reset fullscreen styles for desktop */
        /* height: auto !important;
        overflow: visible !important; */
    }
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 
    .title-btn-section .btn-container{
        display: none;
    }
    .bottom-btn{
        display: flex;
    }
    .footer-sec .nav .nav-item:not(:last-child){
        margin-right: 0rem;
        margin-bottom: 10px;
    }
    .footer-sec .nav {
        display: block;
        text-align: center;
        margin-top: 20px;
    }
    .cmn-section .cmn-box{
        border-radius: 30px;
        padding: 30px 30px;
    }
    .slider-box .slider-img img{
        border-radius: 1rem;
    }
    .menu-open .mobile-menu-main{
        width: 100%;
    } 
    .menu-open .toggle-btn {
            position: fixed;
            display: block;
            width: 50px;
            height: 50px;
            background:  #fff url('../img/xmark-solid.svg') no-repeat center;
            background-size: 20px;
            border: none;
            z-index: 100;
            transform: translate(-50%, 50%);
            border-radius: 50%;
            left: 90%;
            top:2%;
        }
        .top-menu-data{
            justify-content: start;
            gap: 20px;
        }
       
        .search-bar i{
            left: 90%;
        }
        
           .grid-wrapper{
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            grid-auto-rows: 134px;
        }   
        .mb-gamename {
            grid-column: span 3;
            display: block;
 }
 .grid-wrapper .wide{
    grid-column: span 4;
    grid-row: span 4;
 }
 .play-btn{
    position: absolute;
    content:"";
    transform: translate(-50%, -50%);
    left:50%;
    top:50%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    display: block;
}
.play-btn i{
    display: block;
}
.game-player{
    max-height: calc(100% - 70px);
}
.contact{
    padding: 70px 0;
}

  
}

@media (max-width: 739px) {
    .mb-gamename{
        grid-column: span 3;
    }
  } 

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .menu-open .mobile-menu-main{
        width: 100%;
    } 
    .toggle-btn {
            position: fixed;
            display: block;
            width: 24px;
            height: 24px;
            background: url('../img/magnifying-glass-solid-2.svg') no-repeat center;
            border: none;
            z-index: 100;
            
        }
        .top-menu-data{
            justify-content: start;
            gap: 20px;
        }
        
        .search-bar i{
            left: 90%;
        }
        /* .mb-gamename{
            grid-column: span 3;
            display: block;
        } */
        .game-subscribe-list > a{
            margin: 0 16px 0 0;
        }
      
        /* i.fa-solid.fa-magnifying-glass{
            top:15%;
            right: 32%;
        } */
        .mb-gamename{
            grid-column: span 3;
        }
        .grid-wrapper {
            /* grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); */
            /* grid-auto-rows: 80px; */
        }
        .grid-wrapper .cmn-div{
            grid-column: span 2;
            /* grid-row: span 2; */
        }
        .grid-wrapper .tall{
            grid-row: span 3;
            grid-column: span 2;
        }
        
      
        .play-btn{
            z-index: 3;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .play-now{
            display: flex;
            width: 50px;
            height: 50px;
            background-color: white;
            border-radius: 50%;
            justify-content: center;
            align-items: center;
        }
        .wide::before{
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.7;
            z-index: 2;
        }
        .wide.fullscreen::before{
            content: unset;
        }
        .play-btn > h2{
            display: block;
            color: var(--white);
            font-family: var(--font-Primary-Medium);
            font-size: var(--fs-20);
        }
        /* .play-btn .game-cover{
            width: 100%;
            height: 100%;
            position: absolute;
            content: "";
            left: 0;
            top:0;
            object-fit: contain;
            z-index: 1;
        }*/
        .header img{
            width: 35%;
        }
        .game-slider .slick-slide{
            /* margin: unset; */
        }
        .game-slider .game-item img{
            width: 100%;
            height: 250px;
        }
        .my-nav.navbar{
            padding: unset;
        }
        .contact{
            padding: 50px 0;
        }
        .my-nav .navbar-toggler{
            display: none;
        }
                     
 }

 @media (max-width: 480px) {
.top-menu-data .popular-games{
    max-width: 40px;
    height: 40px;
}

.search-bar{
    width: 100%;
}
.search-bar input{
    padding: 14px;
}

/* i.fa-solid.fa-magnifying-glass{
    top:15%;
    right: 10%;
} */

 }