@import url('https://fonts.googleapis.com/css2?family=Battambang&family=Koulen&display=swap');

* {
  padding: 0;
  margin: 0;
}


body {

  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  height: 100vh;
}

@media screen and (max-width:991px) {
  /* Targetting container */

  #container {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    z-index: 2;
    position: relative;
  }

  /* Targetting menu */
  .menu-mobile {
    grid-column: 1/3;
  }

  /* Unoder list */
  .tab ul {
    list-style: none;
  }

  .tab li {
    text-align: center;
    color: #ebc76e;
    font-size: 10px;
    font-family: "Nokora", sans-serif;
    transition: .5s;
    margin-top: 0.8rem;
    padding: 3px;
    border-radius: 17px;
    box-shadow: 0 5px 7px 0 #000000;
    list-style: none;
    line-height: 17px;
    width: 70px;
  }

  .tab li img {
    margin-top: 0;
  }

  .tab {
    position: relative;
    left: 15px;
  }

  /* Hovering list */
  .tab li:hover {
    cursor: pointer;
    background: linear-gradient(to bottom, #e7d39d, #b19560);
    color: #000;
  }

  /* making the tab list active */
  .tab li.active {
    color: #000;
    background: linear-gradient(180deg, rgb(193, 170, 139) 0%, rgb(193, 170, 139) 50%, rgb(226, 210, 195) 100%);
  }

  /* Targetting content */
  .content {
    grid-column: 3/-1;
  }

  /* Targetting the .inner-content */
  .inner-content {
    display: grid;
    grid-template-rows: repeat(1, 2fr);
    /* margin-top: 0.5rem; */
    margin-left: 2.5em;
    margin-right: 1rem;
  }

  .btn-text-2,
  .btn-text-3,
  .btn-text-4 {
    color: white;
  }

  .sport {
    width: 100%;
    height: auto;
    padding: 5px 0;
  }

  .sport .allsport {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
  }

  .sport .allsport .boxsport {
    padding: 0;
  }

  .sport .allsport img {
    width: 100%;
    box-shadow: 0px 5px 10px rgb(0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0.808);
    border-radius: 10px;
    border: 1px solid #3d3d3d;
  }

  .promotion_mo {
    color: #ebc76e;
    text-decoration: none;
  }

  /* ----------Sport1 Start ---------- */
  .sport1 {
    width: 100%;
    height: auto;
  }

  .sport1 .allsport1 {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 10px 0px;
    gap: 0.5em;
  }

  .sport1 .allsport1 .boxsport1 {
    margin: 0;
  }

  .sport1 .allsport1 img {
    width: 100%;
    border-radius: 10px;
  }

  .sport1 .allsport2 {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 10px 0px;
    gap: 0.5em;
  }

  .sport1 .allsport2 .boxsport1 {
    margin: 0;
  }

  .sport1 .allsport2 img {
    width: 100%;
    box-shadow: 5px 5px 10px #000;
    border: 1px solid rgba(0, 0, 0, 0.808);
    border-radius: 10px;
  }
}