:root {
    --bg-main: #141618;
    --bg-secondary: #1a1d21;
    --accent-red: #e10600;
    --accent-red-light: #ff3b30;

    --text-main: #eaeaea;
	--text-warning: #fff;
    --text-muted: #b5b5b5;
    --text-soft: #9d9d9d;
	--color-main: #fff;

    --border-soft: rgba(255,255,255,0.08);
}
@font-face {
    font-family: 'MyFont';
    src: url('/css/DeutschGothicRegular.otf') format('opentype');
}
html {
    background-color: var(--bg-main);
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-main) !important;

    background-attachment: fixed;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 
                 "Segoe UI", Roboto, Ubuntu, sans-serif;
    color: var(--text-main);
}
	.logo {
		display: inline-block;
		text-align: center;
		text-decoration: none;
		line-height: 1.2;
	}

	.logo-top,
	.logo-bottom {
		display: block;
		font-size: 16px;
		letter-spacing: 1px;
		color: var(--color-main);
		opacity: 0.8;
	}

	.logo-main {
		display: block;
		font-family: 'MyFont', sans-serif;
		font-size: 28px;
		font-weight: bold;
		color: var(--color-main);
		margin: 2px 0;
	}
	.film-description {
		text-align: justify;
		font-size: 14px;
		width: 100%;
		color: var(--text-soft);
	}

	.film-trailer iframe {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
  h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: 1px;
	} 
	p {
		line-height: 1.7;
	}
	.text_muted {
		color: var(--text-muted);
	}
	.text-soft{
		color: var(--text-soft);
	}
	 .text-color{
	color: var(--text-warning);
   }
     
      .menu_md_text {
       color: var(--color-main);
       text-transform: uppercase;
       justify-content: center;
       align-items: center;
       display: flex;
       font-size: 1.2em;
       font-weight: bold;
       height: 60px;
	   margin-bottom: 0.5rem;
   }
   .text-custom {
    font-family: 'MyFont', Arial, sans-serif;
    font-size: 32px;
    line-height: 1.5;
    color: #fff;
}
   .menu_md_text:hover {
       color: #b3b6b1;
   }
   
    .main_text {
       color: var(--color-main);
   }
  .color1 {
       color: var(--color-main);
   } 
   .color_black {
       background-color: var(--bg-main);
   }
    .color2 {
       color: var(--color-main);
   }
   .grow:hover {
       -webkit-transform: scale(1.2);
       -ms-transform: scale(1.2);
       transform: scale(1.2);
       transition: all 0.8s ease;
   }
   .card {
	border: 0px !important; 
   }

   hr {
  border: none;
  height: 1px;
  color: var(--text-soft);
	}
	
   .link-ease-in-out a {
       display: inline-block;
       color: var(--color-main);
       line-height: 1;
       text-decoration: none;
       cursor: pointer;
       font-size: 1.3em;
   }

   .button {
       -webkit-transition-duration: 0.4s;
       transition-duration: 0.4s;
       color: #fff;
       background-color: var(--bg-main);
       border: 1px solid #fa0000;
       border-radius: 5px;
   }
      .button2 {
	   -webkit-transition-duration: 0.4s;
       transition-duration: 0.4s;
       color: #fff;
       background-color: var(--bg-main);
       border: 1px solid var(--bg-main);
   }
   
   .button:hover {
       background-color: #212529;
       border: 1px solid #fff; /*#0D6EFD*/
	   color: #fff;
   }
  
     .button2:hover {
       background-color: #212529;
       border: 1px solid #fff; /*#0D6EFD*/
       color: #fff;
   }
   .data_80 {
	    display: inline-flex;
	    flex-direction: column;
	    align-items: center;

	    -webkit-transition-duration: 0.4s;
	    transition-duration: 0.7s;

	    color: #fff;
	    background-color: #fa0000;
	    font-size: 1.3em;
		line-height: 1; /* Убираем межстрочный интервал */
	    border: 1px solid #fa0000;
	    border-radius: 5px;
	    padding: 4px 15px;
	    margin-right: 10px;
	    text-decoration: none;
   }
   
   .data_80:hover {
       background-color: #0f4efc;
       color: #fff;
   }
    .data_80 span:last-child {
    font-size: 0.7em;
	}
      .data_110{
	    display: inline-flex;
	    flex-direction: column;
	    align-items: center;

	    -webkit-transition-duration: 0.4s;
	    transition-duration: 0.7s;

	    color: #fff;
	    background-color: #fa0000;
	    font-size: 1.3em;
		line-height: 1; /* Убираем межстрочный интервал */
	    border: 1px solid #fa0000;
	    border-radius: 5px;
	    padding: 4px 15px;
	    margin-right: 10px;
	    text-decoration: none;
   }
   
   .data_110:hover {
       background-color: #fa0000;
       color: #b3b6b1;
   }
   .data_110 span:last-child {
    font-size: 0.7em;
	}
      .data_647 {
	    display: inline-flex;
	    flex-direction: column;
	    align-items: center;

	    -webkit-transition-duration: 0.4s;
	    transition-duration: 0.7s;

	    color: #fff;
	    background-color: #fa0000;
	    font-size: 1.3em;
		line-height: 1; /* Убираем межстрочный интервал */
	    border: 1px solid #fa0000;
	    border-radius: 5px;
	    padding: 4px 15px;
	    margin-right: 10px;
	    text-decoration: none;
   }
   
   .data_647:hover {
       background-color: #fcf80f;
       color: #fff;
   }
   .data_647 span:last-child {
    font-size: 0.7em;
	}
      .data_722 {
	    display: inline-flex;
	    flex-direction: column;
	    align-items: center;

	    -webkit-transition-duration: 0.4s;
	    transition-duration: 0.7s;

	    color: #fff;
	    background-color: #fa0000;
	    font-size: 1.3em;
		line-height: 1; /* Убираем межстрочный интервал */
	    border: 1px solid #fa0000;
	    border-radius: 5px;
	    padding: 4px 15px;
	    margin-right: 10px;
	    text-decoration: none;
   }
   
   .data_722:hover {
       background-color: #2ffc0f;
       color: #fff;
   }
   .data_722 span:last-child {
    font-size: 0.7em;
	}
   .button_red_menu {
       background-color: rgba(33, 37, 41, 0.902);
       border: 0px solid #fff;
   }
   
   
   .button_red_md {
       -webkit-transition-duration: 0.4s;
       transition-duration: 0.4s;
       color: #ffa51d;
       background-color: #212529;
       padding: 10px;
   }
   
   .button_red_md:hover {
       background-color: #212529;
       color: #fff;
   }
   	.data {
	    display: inline-flex;
	    flex-direction: column;
	    align-items: center;

	    -webkit-transition-duration: 0.4s;
	    transition-duration: 0.7s;

	    color: #fff;
	    background-color: #fa0000;
	    font-size: 1.3em;
		line-height: 1; /* Убираем межстрочный интервал */
	    border: 1px solid #fa0000;
	    border-radius: 5px;
	    padding: 4px 15px;
	    margin-right: 10px;
	    text-decoration: none;
	}
   
   .data:hover {
       background-color: #212529;
       color: #b3b6b1;
   }
   .data span:last-child {
    font-size: 0.7em;
	}
	
   .vertical-line {
       border-left: 0px solid white;
       height: 40px;
       /* Задайте бажану висоту */
       margin-top: 5px;
       margin-bottom: 5px;
   }
   
   .image {
       height: 60px;
       width: 60;
       padding: 0px 0px 0px 0px;
       transition: opacity 0.3s ease;
   }
   
   .image:hover {
       opacity: 0.9;
       border: 1px solid black;
       padding: 1px;
   }
  .tooltip .tooltip-inner {
    background-color: #212529 !important;  /* цвет фона */
    color: #fff !important;             /* цвет текста */
    font-size: 14px !important;         /* размер шрифта */
    padding: 8px 12px !important;       /* отступы */
    border-radius: 4px !important;      /* скругление углов */
}

.tooltip .tooltip-arrow::before {
    border-top-color: #333 !important;  /* цвет стрелки для top */
}
   #drag-container,
   #spin-container {
       margin: auto;
       transform-style: preserve-3d;
       transform: rotateX(-10deg);
   }
   
   #drag-container a {
       transform-style: preserve-3d;
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 10px 16px rgba(0, 0, 0, 0.1);
       border: 1px solid #fff;
       border-radius: 10px;
   }
   
   #drag-container img {
       width: 100%;
       height: 100%;
       transition: filter 0.3s;
       border-radius: 10px;
   }
   
   #drag-container a:hover img {
       filter: grayscale(0) contrast(1);
   }
   
   #drag-container p {
       line-height: 1;
       font-size: 50px;
       font-weight: bold;
       text-align: center;
       font-family: Serif;
       position: absolute;
       top: 100%;
       left: 50%;
       transform: translate(-50%, -50%) rotateX(90deg);
       color: #212529;
       font-family: Verdana, sans-serif;
   }
   
   #ground {
       width: 900px;
       height: 900px;
       position: absolute;
       top: 100%;
       left: 50%;
       transform: translate(-50%, -50%) rotateX(90deg);
   }
  
  #navbar {
    position: absolute;   /* поверх слайдера */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;        /* выше слайдера */
    background: rgba(20,22,24,0.45);
	padding: 0;
}
ol {
    counter-reset: item;
    list-style: none;
    padding-left: 20px;
}

ol li {
    counter-increment: item;
}

ol li:before {
    content: counters(item, ".") ". ";
}
@media (min-width: 768px) {
  .content-after-navbar {
    padding-top: 60px; /* высота вашего navbar */
  }
}
.actor-card {
    width: 138px;
}
.actors-row .actor-card {
    max-width: 20%; /* 5 карточек */
    flex: 0 0 20%;
}
.actor-photo {
    width: 138px;
    height: 184px;
    object-fit: cover;
    border-radius: 6px;
    transition: transform 0.2s ease;
}

.actor-photo:hover {
    transform: scale(1.05);
}

.actor-name {
    margin-top: 8px;
    font-size: 0.95rem;
    color: #ffffff;
}
.actor-role {
    font-size: 0.85rem;
    color: #bbbbbb;
}