.section.section--first .container .row div.vip::before {
      z-index: 40 !important;
}

body{
   --tf-vip: black !important;
}


    .vip {
        padding: 120px !important;
    }
}
.swiper-slide .mini-game.mini-game--carousel.mini-game-- {
    background-color: #0d0311 !important;
    min-height: 160px !important;
}
.mini-game.mini-game--carousel.mini-game--no-layer{
  background-color: #0d0311 !important;
    min-height: 160px !important;
}
.swiper .swiper-wrapper .swiper-slide .mini-game--carousel .mini-game__img img {
    height: auto !important;
    object-fit: contain !important;
    width: 100% !important;
}

.swiper-slide img {
    width: 100%;
    height: auto;
}

.slide-content.mid-me {
    height: auto !important;
}

.swiper.swiper-initialized.swiper-horizontal .swiper-slide .partner {
    min-height: 90px;
}

.swiper.swiper-initialized.swiper-horizontal .swiper-slide.mini-swiper .slide-content.mid-me{
  width: auto !important;
}



.col-12.mt-2 .swiper.swiper-initialized.swiper-horizontal .swiper-wrapper .swiper-slide {
  background:#120b18 !important;
}

@media (max-width: 500px) {

    .swiper .swiper-wrapper .swiper-slide .mini-game--carousel .mini-game__img img {
        height: -webkit-fill-available !important;
    }
  .modal-content .modal__img {
    max-width: 360px !important;
}
}

.ranking img {
    height: 4.5rem !important;
    object-fit: contain !important;
    width: auto !important;
}

.header__logo {
    min-width: 100px !important;
}

@media (min-width: 1200px) {
    .sidebar__logo {
        width: 200px !important;
        height: 60px !important;
        background-size: auto 60px !important;
    }
}

.slot__img img {
    width: auto !important;
}

.slot__img img {
    height: 100% !important;
}
.section.section--first .container .row div.vip {
    position: relative; /* Overlay'in doğru konumlanması için */
    overflow: hidden; /* İçerik taşmasını engelle */
}

.section.section--first .container .row div.vip::before {
    content: ""; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background-image: url('https://girisdarkbet.com/assets/betifa-vip-tablo.png'); /* Görsel URL */
    background-size: contain; /* Görseli tam göster, kırpmadan */
    background-position: center center; /* Görseli tam ortala */
    background-repeat: no-repeat; /* Görselin tekrar etmesini engelle */
    z-index: 100; /* Üste gelmesini sağlar */
  filter: none !important;
}


.ranking::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: -120px;
  right: -120px;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  opacity: 0.1;
  transform: rotate(-20deg);
  transition: all 0.4s;
}
.ranking:hover::after {
  bottom: -100px;
  right: -100px;
  transform: rotate(-10deg);
  opacity: 0.2;
}
.ranking p {
  transition: all 0.4s;
}
.ranking:hover p {
  color: #babbc4;
}


.state-slug-player::after {
    background-image: url('https://girisdarkbet.com/assets/betifa-player.png');
}
.state-slug-rookie::after {
    background-image: url('https://girisdarkbet.com/assets/betifa-rookie.png');
}

.state-slug-leader::after {
    background-image: url('https://girisdarkbet.com/assets/betifa-leader.png');
}


.state-slug-champ::after {
    background-image: url('https://girisdarkbet.com/assets/betifa-champ.png');
}


.state-slug-master::after {
    background-image: url('https://girisdarkbet.com/assets/betifa-master.png');
}

.state-slug-boss::after {
    background-image: url('https://girisdarkbet.com/assets/betifa-boss.png');
}


.state-slug-bull::after {
    background-image: url('https://girisdarkbet.com/assets/betifa-bull.png') ;
}

.state-slug-npc::after {
    background-image: url('https://girisdarkbet.com/assets/betifa-npc.png');
}


@media (min-width: 0px) and (max-width: 600px) {

  #mini-games-wrapper .mySwiper .swiper-slide {
    width: 208px !important;
    margin-right: -6px !important;
    margin-left: 6px !important;
}
  
      .betifa-banner {
            display: none !important;
        }
    }

    @media (min-width: 600px) and (max-width: 1000px) {
       .betifa-banner .div {
            left: 44% !important;
        }
    }

    @media (min-width: 1025px) and (max-width: 1799px) {
        .betifa-banner .div {
            left: 34% !important;
        }
    }

    @media (min-width: 1800px) {
        .betifa-banner .div {
            left: 42% !important;
        }
    }


.modal-content .modal__img{
  max-width: 600px ;
}

.vip{
 
  background-color: black !important;
}
.vip__title{
  color: black !important;
}
.vip__btn{
  color: black !important;
  background-color: black !important;
}