@h1: 2rem;
@h2: 1.25rem;
@h3: 1.125rem;
@h4: 1rem;
@p1: 14;
@p2: 12px;
@yellow: #fcdf1c;
@orange: #ffbd59;
@red: #d22f27;
@red-text: #ee3944;
@green: #189a73;
@blue: #255392;
@black: #000;
@white: #fff;
@gray: #2b2b2b;
@deep-gray: #1c1c1c;
@light-gray: #585858;

@mobile: 475px;
@web: 476px;
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

//main css start
* {
  font-family: "Poppins";
  font-style: normal;
}

h1 {
  font-size: @h1;
  font-weight: 700;
  line-height: 2.5rem;
}

h2 {
  font-size: @h2;
  font-weight: 700;
  line-height: 1.5625rem;
}

h3 {
  font-size: 1.125rem;

  font-weight: 700;
  line-height: 1.5625rem;
}

body {
  background-color: @white !important;
  color: @black;
}

header {
  background-color: @black;
}

a {
  text-decoration: none;
}

.bg-black {
  background-color: @black;
}

.text-black {
  color: @black;
}

.bg-white {
  background-color: @white;
}

.text-white {
  color: @white;
}

.bg-orange {
  background-color: @orange;
}

.text-orange {
  color: @orange;
}

.bg-yellow {
  background-color: @yellow;
}

.text-yellow {
  color: @yellow;
}

.bg-gray {
  background-color: @gray;
}

.bg-lightgray {
  background-color: @light-gray;
}

.text-gray {
  color: @gray;
}

.bg-lightgray {
  background-color: @light-gray;
}

.text-lightgray {
  color: @light-gray;
}

.bg-deepgray {
  background-color: @deep-gray;
}

.text-deepgray {
  color: @deep-gray;
}

.bg-red {
  background-color: @red;
}

.text-red {
  color: @red-text;
}

.bg-green {
  background-color: @green;
}

.text-green {
  color: @green;
}

.bg-blue {
  background-color: @blue;
}

.text-blue {
  color: @blue;
}

.pos-rel {
  position: relative;
}

.br-5 {
  border-radius: 5px;
}

.br-10 {
  border-radius: 10px;
}

@media (min-width: @web) {
  .align-items-end-center {
    align-items: end;
  }

  .flex-row-re {
    flex-direction: row;
  }

  .mobile {
    display: none;
  }

  .flex-row-col,
  .flex-row-col-re {
    flex-direction: row;
  }

  .flex-col-row {
    flex-direction: column;
  }

  .flex-re-row-col {
    flex-direction: row-reverse;
  }

  .w-15-50 {
    width: 15%;
  }

  .w-30-48 {
    width: 30%;
  }

  .w-25-50,
  .w-25-75,
  .w-25-100,
  .w-25-auto {
    width: 24%;
  }

  .w-30-100 {
    width: 30%;
  }

  .w-50-25,
  .w-50-75,
  .w-50-100 {
    width: 50%;
  }

  .w-75-50,
  .w-75-25,
  .w-75-100 {
    width: 75%;
  }

  .w-60-100 {
    width: 60%;
  }

  .w-100-50,
  .w-100-25,
  .w-100-75 {
    width: 100%;
  }

  .w-60-80 {
    width: 60%;
  }

  .w-48-100 {
    width: 48%;
  }

  .w-20-40 {
    width: 20%;
  }

  .w-90-100 {
    width: 95%;
  }

  .w-40-100 {
    width: 35%;
  }

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

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

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

@media (max-width: @mobile) {
  .navbar-collapse {
    z-index: 9999;
    position: absolute;
    top: 100%;
    padding: 1rem;
    background: #000;
    right: 10%;
  }

  .align-items-end-center {
    align-items: center;
  }

  .flex-row-re {
    flex-direction: row-reverse;
  }

  main {
    overflow-x: hidden;
  }

  .web {
    display: none;
  }

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

  .flex-row-col,
  .flex-re-row-col {
    flex-direction: column;
  }

  .flex-col-row {
    flex-direction: row;
  }

  .flex-row-col-re {
    flex-direction: column-reverse;
  }

  .w-25-auto {
    width: auto;
  }

  .w-50-25,
  .w-75-25,
  .w-100-25 {
    width: 25%;
  }

  .w-20-40 {
    width: 40%;
  }

  .w-30-48 {
    width: 48%;
  }

  .w-25-50,
  .w-75-50,
  .w-100-50,
  .w-15-50,
  .w-25-50,
  .w-100-50 {
    width: 50%;
  }

  .w-25-75,
  .w-50-75,
  .w-100-75 {
    width: 75%;
  }

  .w-60-80 {
    width: 80%;
  }

  .w-25-100,
  .w-50-100,
  .w-75-100,
  .w-40-100,
  .w-48-100,
  .w-30-100,
  .w-60-100,
  .w-90-100 {
    width: 100%;
  }

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

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

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

  .breadcrumb {
    display: flex;
    flex-wrap: nowrap;
  }

  .breadcrumb .breadcrumb-item:last-child {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000000;
  }
}

.text-right {
  text-align: end;
}

/*top*/
.goTop {
  position: fixed;
  right: 1%;
  bottom: 1%;
  transform: translateX(0);
  transition: transform 0.2s;
  z-index: 999999;
  opacity: 0.6;
}

.goTop:hover {
  opacity: 1;
}

.goTop.hide {
  transform: translateX(200px);
}

.goTop .goTopBtn {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}

.tags>li+li::before {
  content: "、";
}

//main css end
.btn-red {
  background: @red;
  color: @white;
  font-size: 18px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0em;
  text-align: center;
  padding: 0 1rem;
}

.btn-red:hover {
  padding: 0 1.5rem;
  transition: all 0.5s;
}

.btn-black {
  background: @black;
  color: @white;
  font-size: 18px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0em;
  text-align: center;
  padding: 0 1rem;
}

.btn-red:hover,
.btn-black:hover {
  padding: 0 1.5rem;
  transition: all 0.5s;
}

.bg-top {
  background: url(../img/bg/cricket\ banner\ 1.png);
  height: 35vh;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.text-ab {
  position: absolute;
  top: 100%;
  transform: translate(15%, -50%);
}

h4 {
  font-size: @h4;
}

.line-height-5 {
  line-height: 25px;
}

@media (max-width: @mobile) {
  .mx-0-auto {
    margin: auto;
  }

  .mx-3-1 {
    margin: 0 1rem;
  }

  .mx-5-1 {
    margin: 0 1rem;
  }

  .px-3-1 {
    padding: 0 0.5rem;
  }

  .p-4-1 {
    padding: 1rem;
  }

  .py-4-1 {
    padding: 2.5rem 1rem 2.5rem 0;
  }
}

@media (min-width: @web) {
  .mx-0-auto {
    margin: 0;
  }

  .mx-3-1 {
    margin: 0 3rem;
  }

  .mx-5-1 {
    margin: 0 6rem;
  }

  .px-3-1 {
    padding: 0 3rem;
  }

  .p-4-1 {
    padding: 2rem;
  }

  .py-4-1 {
    padding: 2.5rem 1rem 2.5rem 0;
  }
}

.bg-deepgray.text-red.text-center {
  position: relative;
  margin-top: -2rem;
}

.content,
.content-ul>ul>li {
  border: 1.5px solid @red;
  border-left: 0.5rem solid @red;
  padding: 0 1rem;
}

.content-ul>ul>li {
  margin: 0.5rem 0 0.5rem -2rem;
  list-style: none;

  a {
    color: @black;
  }
}

.part-one {
  .bg-img {
    background-image: url(../img/card/Rectangle\ 19.png);
    background-size: cover;
    height: 200px;
    width: 100%;
    background-position: center;
  }
}

.part-two {
  .bg-img {
    background-image: url(../img/card/phone.png);
    background-size: cover;
    height: 200px;
    width: 100%;
    background-position: center;
  }
}

.part-three {
  .bg-img {
    background-image: url(../img/card/cricket.png);
    background-size: cover;
    height: 200px;
    width: 100%;
    background-position: center;
  }

  .w-48-100 {
    margin: 0.5rem 0;
    color: @white;
  }

  .w-48-100:nth-child(1) {
    background-image: url(../img/card/cropped-image-sexy-brunette-woman-summer-hat.webp);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .w-48-100:nth-child(2) {
    background-image: url(../img/card/curly-woman-silver-dress-emotionally-posing-black-background-cheerful-lady-shiny-outfit-looks-happy-isolated-backdrop.png);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .w-48-100:nth-child(3) {
    background-image: url(../img/card/beautiful-blonde-woman-bright-make-up-red-stylish-dress-black-earrings-she-is-showing-fan-hundred-dollar-bills-posing-gray-studio-background-poker-casino-close-up-copy-space.png);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .w-48-100:nth-child(4) {
    background-image: url(../img/card/beautiful-girl-showing-red-manicure-nails-makeup-cosmetics-brunette-girl-with-long-shiny-curly-hair.png);
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.part-four {
  .bg-img {
    background-image: url(../img/card/dollor.png);
    background-size: cover;
    height: 200px;
    width: 100%;
    background-position: center;
  }

  .bg-br-25 {
    background-color: @gray;
    border: 4px solid @white;
    color: @white;
    padding: 0.7rem 0;
    border-radius: 30px;
  }
}

.part-five {
  .bg-img {
    background-image: url(../img/card/hand\ money.png);
    background-size: cover;
    height: 200px;
    width: 100%;
    background-position: center;
  }

  li {
    border-bottom: 1px solid @black;
    margin: 1rem 0 0 0;
    font-size: 700;
    width: 100%;
  }
}

.part-six {
  .bg-img {
    background-image: url(../img/card/glod\ coin.png);
    background-size: cover;
    height: 200px;
    width: 100%;
    background-position: center;
  }

  .tan-blac {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 100px 0 0;
    border-color: #000000 transparent transparent transparent;
  }

  .bg-lightgray {
    position: relative;

    span:nth-child(3) {
      position: absolute;
      left: 100px;
      top: 10%;
    }

    span:nth-child(2) {
      position: absolute;
      left: 1%;
      top: 5%;
      font-weight: 700;
    }
  }
}

.part-seven {
  .bg-img {
    background-image: url(../img/card/poker.png);
    background-size: cover;
    height: 200px;
    width: 100%;
    background-position: center;
  }

  //table
  .tg {
    border-collapse: collapse;
    border-spacing: 0;
  }

  .tg td {
    border-color: black;
    border-style: solid;
    border-width: 0px;

    font-size: 14px;
    overflow: hidden;
    padding: 10px 5px;
    word-break: normal;
  }

  .tg .tg-0x09 {
    background-color: #dadada;
    vertical-align: top;
  }

  .tg .tg-mk6l {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
    text-align: center;
    vertical-align: top;
    font-weight: 600;
  }

  tr {
    border-top: 5px solid #fff;
  }

  tr>td:nth-child(1) {
    font-weight: 600;
    text-align: center;
  }
}

.part-eight {
  .bg-img {
    background-image: url(../img/card/grilqa.png);
    background-size: cover;
    height: 200px;
    width: 100%;
    background-position: center;
  }

  .qa>h4:nth-child(even) {
    background-color: #dadada;
    color: @black;
  }

  .qa>h4:nth-child(odd) {
    background-color: @black;
    color: @white;
  }
}

.part-nine {
  .bg-img {
    background-image: url(../img/card/web.webp),
      linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
    background-size: cover;
    height: 150px;
    width: 100%;
    background-position: center;
  }

  .border-red {
    border: 1px solid @red;

    span {
      font-size: 1.25rem;
      font-weight: 700;
    }
  }
}

h4>a {
  color: @black;
}

.breadcrumb-item+.breadcrumb-item::before {
  // color: #fff;
  content: ">";
}

/*tableeeeee*/
.tg-4rtc {
  background: #d22f27;
  color: #000;
  padding: 0.5rem;
  font-weight: 700;
  text-align: center;
}

.tg-c3ow {
  font-size: 12px;
}

.bg-gray {
  background: #2b2b2b;
}

table.tbl>tbody>tr>td {
  padding: 0.5rem !important;
}

tr {
  border-top: 4px solid #fff;
  border-bottom: 4px solid #fff;
}

table.tbl>tbody>tr:nth-child(odd) {
  background: #dadada;
  color: #000;
  text-align: center;
}

table.tbl>tbody>tr:nth-child(even) {
  background: #dadada;
  color: #000;
  text-align: center;
}

tbody.bg-no>tr {
  border: 0;
}

tbody.bg-no>tr {
  background: #ffffff00 !important;
}

.text-red {
  color: #d22f27;
}

table {
  font-size: 0.7rem;
}

.news-div {
  flex-wrap: wrap;
}

.post-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  flex-wrap: wrap;
}

@media (min-width: 1025px) {
  .news-div {
    flex-wrap: nowrap;
  }
}