/* ================= MOBILE RESPONSIVE ================= */

@media (min-width: 768px) and (max-width: 991px) {
    .category-bar {
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .category-bar::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width:767px){

.footer-logo img{

    max-width:150px;

}

.footer-logo h2{

    font-size:28px;

}

.footer-logo p{

    font-size:15px;
    line-height:1.7;

}

.footer-nav{

    margin:20px 0 20px;

}


.footer-link{
    font-size:17px;
}
.footer-social{

    gap:12px;
    margin-bottom:30px;

}

.footer-social a{

    width:44px;
    height:44px;
    font-size:17px;

}

.footer-bottom{

    gap:10px;

}

.footer-bottom span{

    font-size:13px;

}

.search-panel{
    width:100%;
    max-width:100%;
    padding:16px;
    height:100%;
}

.search-header{
    gap:12px;
    align-items:center;
    margin-bottom:20px;
}

.back-btn{
    width:46px;
    height:46px;
    min-width:46px;
    font-size:24px;
}

.drawer-search-form{
    flex:1;
    width:100%;
}

.search-input-wrap{
    width:100%;
}

.drawer-search-form input{
    width:100%;
    height:50px;
    border-radius:30px;
    font-size:15px;
    padding:0 18px 0 48px;
}

.search-icon{
    left:16px;
    width:18px;
}

.drawer-body{
    margin-top:18px;
}

.drawer-title{
    font-size:22px;
    margin-bottom:16px;
}

/* Category Slider */

.drawer-categories{
    margin-bottom:20px;
}

.drawer-categories .category-wrapper{
    padding:0 !important;
}

.drawer-categories .category-bar{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    gap:10px;
    padding:6px 2px;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.drawer-categories .category-bar::-webkit-scrollbar{
    display:none;
}

.drawer-categories .cat-card{
    flex:0 0 auto;
    width:74px;
    min-width:74px;
    padding:10px 8px;
    border-radius:16px;
}

.drawer-categories .cat-img{
    width:38px;
    height:38px;
}

.drawer-categories .cat-name{
    font-size:12px;
    margin-top:8px;
    line-height:1.2;
}

/* Games */

.search-games{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.search-game img{
    border-radius:14px;
}

.search-game h6{
    font-size:13px;
    margin-top:8px;
}




   .live-game img{

        width:60px;

        height:60px;

    }


    .live-game span{

        font-size:14px;

    }

}

/*=========================================
            MOBILE
=========================================*/

@media (max-width:991px){
.site-footer .container{

    padding:50px 20px;

}

.footer-menu{

    gap:16px 24px;

}

.footer-bottom{

    flex-direction:column;
    text-align:center;

}

 .new-games-section .games-big-card,
    .new-games-section .games-small-card{
        height: 220px;
    }

    .new-games-section .right-column{
        margin-top: 12px;
    }
.mobile-margin{
margin:0;
}
}

@media(max-width:768px) {


  h1,
  h2 {
    font-size: var(--font-size-base) !important;
  }

  .category-bar {
    display: flex;
    overflow-x: auto;
    gap: 12px;
  }

  .cat-card {
    flex: 0 0 auto;
    width: 90px;
  }

  #moreCategories .category-bar {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .ad-horizontal {
    margin: 20px 0;
    padding: 15px 10px;
    border-radius: 10px;
  }

  .ad-box {
    min-height: 70px;
  }

  .top-games-slider .img-wrap {
    height: 80px;
  }

  .left-btn-wrap,
  .right-group {
    height: 80px;

  }

  .slider-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }



  .left-btn-wrap,
  .right-group {
    height: 70px;
  }

  .trend-img {
    width: 70px;
    height: 70px;
  }

  .trend-img img {
    width: 60%;
    height: 60%;
  }
    .category-description-card{
        padding:20px;
    }

    .category-description-title{
        font-size:26px;
    }

    .category-description-content{
        font-size:15px;
    }
}


/* =========================
   MOBILE
========================= */

@media(max-width: 576px){

    .new-games-section .games-big-card,
    .new-games-section .games-small-card{
        height: 180px;
    } 
.mobile-margin{
margin:0;
}
@media (max-width: 375px) {

    .navbar .container.no-gutter{
        display: flex;
        align-items: center;
        gap: 8px; /* Reduce the space */
    }

    .logo-img{
        width: 100px;
        height: auto;
    }

    .navbar-brand{
        margin-right: 0 !important;
        flex-shrink: 0;
    }

    .search-box,
    .search-container{
        flex: 1;
        width: auto;
    }
}