*{
    font-family: "Vazirmatn", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
      
}

.font-vazirmatn {
  font-family: "Vazirmatn", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

::-webkit-scrollbar {
  width: 10px !important; /* Width of the scrollbar */
}

/* Track */
::-webkit-scrollbar-track {
  background: #111F30 !important; /* Color of the track */
  border-radius: 6px !important; /* Rounded corners for the track */
}

/* Handle (thumb) */
::-webkit-scrollbar-thumb {
  background-color: #1d3047 !important; /* Color of the thumb */
  border-radius: 6px !important; /* Rounded corners for the thumb */
  border: 3px solid #1d3047 !important; /*Padding around the thumb*/
}

/* Handle (thumb) on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #2f4969 !important; /* Color of the thumb on hover */
  border: 3px solid #2f4969 !important; /*Padding around the thumb*/
}



.header__nav-item{
  margin-left: 25px !important;
}

.text-danger{
  color: #eb5757 !important;
}

.text-success{
  color: #29b474 !important;
}

.text-warning{
  color: #ffc312 !important;
}

.text-info{
  color: #2f80ed !important;
}
.text-white{
  color: #fff !important;
}
.text-dark{
  color: #141414 !important;
}

.text-white-eye{
  color: #d7d7d7 !important;
}



.bg-danger{
  background: #eb5757 !important;
}

.bg-success{
  background: #29b474 !important;
}

.bg-warning{
  background: #ffc312 !important;
}

.bg-info{
  background: #2f80ed !important;
}



.x-modal{
  position: fixed;
  z-index: 9999999;
  inset: 0;
  background-color: #121924;
  overflow-y: auto;
  max-height: 90vh;
  height: max-content;
}

/* Scrollbar track */
.scroll-div::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

/* Track */
.scroll-div::-webkit-scrollbar-track {
    background: #111F30; /* Color of the track */
    border-radius: 6px; /* Rounded corners for the track */
}

/* Handle (thumb) */
.scroll-div::-webkit-scrollbar-thumb {
    background-color: #1d3047; /* Color of the thumb */
    border-radius: 6px; /* Rounded corners for the thumb */
    border: 3px solid #1d3047; /*Padding around the thumb*/
}

/* Handle (thumb) on hover */
.scroll-div::-webkit-scrollbar-thumb:hover {
    background-color: #2f4969; /* Color of the thumb on hover */
    border: 3px solid #2f4969; /*Padding around the thumb*/
}





.servers{
  background: #111F30 !important;
}

.servers .server-item{
  background:#121720;
  border-radius: 15px;
  cursor:pointer;
}

.servers .active{
  color:#2f80ed !important;
}

.brad{
  border-radius: 15px !important;
}



.episode-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns, each taking up 1 fraction of the available space */
  gap: 16px; /* Gap between columns and rows */
  margin: 20px; /* Optional: Margin around the grid */
}

.episode-item {
  background: #111F30;
  color: #fff;
  padding: 15px; /* Example padding inside each item */
  border-radius: 8px; /* Example rounded corners */
  text-align: center; /* Center text inside the item */
}

.episode-container .active{
  background: #2f80ed !important;
  color:#fff !important;
}



/* image css container */

.image-container {
    width: 140px;
    height: 140px;
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.h-500{
    height:auto;
}



.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}


@-webkit-keyframes rotating /* Safari and Chrome */ {
  0% {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}




@media (min-width: 576px) {
  .h-500{
        height:200px;
    }
}
@media (min-width: 768px) {
  .h-500{
        height:200px;
    }
}
@media (min-width: 992px) {
  .h-500{
    height:500px;
   }
}
@media (min-width: 1200px) {
    .h-500{
        height:500px;
    }
}