body {
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; 
  min-height:100vh;
  color: #000;
}

 

a {color:#000;
  text-decoration: none;
}

html {
  font-size: clamp(14px, 1.2vw, 16px);
}

body, p, a, h1, h2, h3, h4, h5, h6, span {
  font-size: 1em;
}

 .fa-bars{color:#000!important;}
 .small .text-muted {color:#fff!important;}


 .top-bar{background: #ffffff;
background: radial-gradient(circle, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.64) 100%);
}

.navbar-dark{background: #ffffff;
background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.39) 100%);
      color:#000!important;
 
}
  .filter-card  {
    border-radius: 5px;
    padding: 5px;
    
    margin-bottom:15px;
  }
  .card-film {
 
  border-radius: 5px;
  overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
  cursor: pointer;
  position: relative;
 
}


.card-film:hover  {
  transform: scale(1.03);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

 .card-film .info {
  position: absolute;
  inset: 0;
   color: #000;
   
  padding: 5px;
   flex-direction: column;
  justify-content: end;
  transition: all 0.3s ease;
     border-radius: 5px;
background: #ffffff;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.93) 100%);
}

 
 
.card-film .info .rating {
 
  color: #ffca28;
  font-weight: bold;
  margin-top: 4px;
}

.card-film .info small {
 
  margin-top: 6px;
  line-height: 1.6;
  color: #000;
}

 
 
.card-film h6, .card-film .rating, .card-film small {
  margin: 0;
  line-height: 1.4;
}
   .card-film img {
    width: 100%;
    height: auto;
     border-radius: 5px;
  }
.hero-header {
  
background-size: cover;
  background-position: center;
  position: relative;
   border-radius: 10px 10px 0 0; /* فقط بالا گرد */
  overflow: hidden;
  padding: 15px;

  min-height:50vh;
 
}

.hero-header::before {
    
  content: '';
  position: absolute;
  inset: 0;
background: #ffffff;
background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.54) 99%);
  z-index: 1;
  
}
.hero-content {
  position: relative;
  z-index: 2;
 
}
 
.badge {
  background-color: var(--badge-bg);
  color: var(--badge-text);
  font-size: 0.8rem;
  padding: 0.4em 0.8em;
  border-radius: 999px;
}
.icon-info i {
  color: #e63643;
  margin-left: 4px;
}
.actor-card img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.2s ease;
}
.actor-card:hover img {
  transform: scale(1.05);
}
  .nav-link {
   color:#000!important;
  border:0px!important;
  border: none;
 border-radius:5px !important;;
  margin-right: 5px;
}
.nav-tabs .nav-link.active {
  color: #000;
  background: rgba(255,255,255,0.8);
  font-weight: bold;
}
.tab-content > .tab-pane {
  padding: 5px;
  border-radius: 0px;
  background:transparent;
 
}
 .nav-tabs{border:0px!important; background:#cee4eb;padding:10px;}
    .watchlist-icon {
      position: absolute;
      top: 3px;
      left: 3px;
      z-index: 999!important;
      font-size: 20px;
   
  
      border-radius: 50%;
      padding: 6px 7px;
      cursor: pointer;
      transition: color 0.2s ease;
    }
    .watchlist-icon.active {
      color: gold;
    }
   

  
  .toggle-buttons .btn.active {
    background-color: #0d6efd;
    color: white;
  }
  
  .genre-section {
background: #ffffff;
background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(230, 252, 252, 0.82) 100%);
 
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 1rem;
    
    overflow: hidden;
  }
  .genre-slider {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 1rem;
    -webkit-overflow-scrolling: touch;
    
  }
  .genre-slider::-webkit-scrollbar { display: none; }
  .scroll-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .scroll-left { left: 10px; }
  .scroll-right { right: 10px; }
  .scroll-arrow:hover {
    background: #0d6efd;
    color: #fff;
  }
 
     .watchlist-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
  font-size: 1.2rem;
  color: #fff;
  z-index: 1000;
  
}
.watchlist-icon.active i {
  color: red;
}

 
.btn-sm{color:#000 !important;}
.form-select,.form-control{
    background: rgba(255,255,255,0.9)!important;
    color:#000!important;
    border:0px;
    backdrop-filter: blur(5px);
    
}
.form-control::-webkit-input-placeholder { color: #000; }
.form-control::-moz-placeholder { color: #000; }
.form-control:-ms-input-placeholder { color: #000; }
.toggle-buttons .btn.active,.zard,.scroll-arrow{background:#e63643;border:0px;color:#fff;}
.btn-outline-primary,.btn-outline-light{color:#000;border: 0px solid #000 !important; rgba(255,255,255,0.6)!important ;}
.zard:hover{background:#dd313d;border:0px;}


.download-box {
 
  border-radius: 12px;
  padding: 5px;
  margin: 10px 0;
  
  color: #000;
}
.download-list {
  list-style: none;
  padding: 0;
}
.download-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #333;
}
 .btn {background: rgba(255,255,255,0.6);color:#000!important;border:0px!important;}
.btn-download, .btn-pay,.zard {
  background: #ed3d4c!important;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
}
 
 
.login-alert {
  background: #ffefef;
  color: #c0392b;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
}
.price-tag {
  display: inline-block;
  font-size: 16px;
  background: #eee;
  padding: 3px 8px;
  border-radius: 6px;
  margin-right: 10px;
  color: #555;
}


#tsparticles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  z-index: -1;
}
.fa-bookmark{color:#000;}
.card{border:0px!important;}
.ziadark {background: #fff7f7;
background: radial-gradient(circle, rgba(255, 247, 247, 1) 0%, rgba(230, 252, 252, 0.82) 100%);  backdrop-filter:  blur(8px);}
.list-group-item {background: rgba(255,255,255,0.6) !important;}
.card-header {color:#696969!important; font-size:20px;}
.float-end{color:#696969!important;}
.small,.fw-bold{color:#000!important;}
.list-group-item.active{color:#000}
.ziaadark  {background: #1b1b1b;
 background-blend-mode: multiply;
   background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; 
  min-height:100vh;
  color: #fff !important;
}
.ziaadark a,
.ziaadark .text-muted,.ziaadark p, .ziaadark div, .ziaadark span,.ziaadark  .fa, .ziaadark .fw-bold {
  color: #fff !important;
}
.ziaadark .top-bar{background: #000000;
background: radial-gradient(circle, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 100%);}
.ziaadark .navbar-dark{background: #000000;
background: radial-gradient(circle, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.16) 100%);}
.ziaadark .genre-section{background: #1f1f1f;
background: radial-gradient(circle, rgba(31, 31, 31, 0.31) 0%, rgba(35, 41, 41, 0.36) 100%);}

.ziaadark .ziadark {background: #1f1f1f!important;;
background: radial-gradient(circle, rgba(31, 31, 31, 0.31) 0%, rgba(35, 41, 41, 0.36) 100%)!important;color:#fff!important;}

.ziaadark .btn-sm {color:#fff!important;}
.ziaadark .card-film .info {background: #000000;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0.66) 82%);}
.ziaadark .card-film .info small{color:#fff;}
 
.ziaadark .dropdown-menu {background: #1f1f1f;
background: radial-gradient(circle, rgba(31, 31, 31, 1) 0%, rgba(35, 41, 41, 1) 100%);}
.ziaadark .dropdown-item:hover{background:#000;}
.ziaadark .form-select,.ziaadark .form-control{
    background: rgba(0,0,0,0.8)!important;
    color:#fff!important;}
.ziaadark .hero-header::before {background: #000000;
background: radial-gradient(circle, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.54) 99%);}
.ziaadark .nav-link{color:#fff!important;border:0px;}
.ziaadark .nav-link.active{color:#fff;background: #000;border:0px;}

 
 
 
.ziaadark .btn {background: rgba(0,0,0,0.3);color:#fff!important;border:0px!important;}
.ziaadark .form-control::-webkit-input-placeholder { color: #fff; }
.ziaadark .form-control::-moz-placeholder { color: #fff; }
.ziaadark .form-control:-ms-input-placeholder { color: #fff; }
.ziaadark .list-group-item{background: #1f1f1f!important;
background: radial-gradient(circle, rgba(31, 31, 31, 0.31) 0%, rgba(35, 41, 41, 0.36) 100%)!important;color:#fff;border:0px!important;}
.card input {background:rgba(0,0,0,0.1)!important;}
.ziaadark .card {color:#fff!important;background:rgba(0,0,0,0.2)!important;}
.ziaadark .alert-info, .ziaadark .alert-warning{color:#000!important;}
  .ziabg{background:rgba(255,255,255,0.9);border-radius:10px}
.ziaadark .ziabg{background:rgba(0,0,0,0.4); backdrop-filter: blur(4px);}
.ziaadark  .nav-tabs{background:#681f25;}
.ziaadark .fa-bookmark{color:#fff;}
.container {
  max-width: 2025px!important; /* یا 1440px یا هر مقداری که بخوای */
  width: 100%!important;
 
}



.bg {
  animation:slide 10s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #e6c5c5 50%, #d3dae0 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:10s;
}

.bg3 {
  animation-duration:10s;
}

  
@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}
.ziaadark .bg {

  background-image: linear-gradient(-60deg, #2c2d2e 50%, #141212 50%);
 
}
 .en-title{float:left;left:3px;text-align:left;font-size:0.8em}
    .zia-card-title{position:absolute;bottom:5px;left:4px;right:4px;padding:5px} .ziabadge {
  position: absolute;
  bottom: 5px;
 
  font-size: 0.8em;
  border-radius: 4px;
  
  
}

.ziabadge.fa {
  left: 5px;
  right: auto;
}

.ziabadge.en {
  right: 5px;
  left: auto;
}