:root {
    --cassiopeia-color-primary: #112855;
    --cassiopeia-color-link: #ffbfbf;
    --link-color: #ffbfbf;
    --link-color-rgb: 255,191,191;
    --cassiopeia-color-hover: #FF2D2D;
    --link-hover-color:#FF2D2D;
    --link-hover-color-rgb: 255,45,45;
  --secondary-color: #999a9bbf;
}
      
:root,[data-bs-theme=light] {
      --info-bg-subtle: #e6f2fb;
}
:root {
    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 500;
    --cassiopeia-font-weight-normal: 400;
}

body, html {
    overflow-x: hidden;
}
.container-banner {
    margin: 0;
}
nav.mod-breadcrumbs__wrapper {
    background-color: #000000;
}
.breadcrumb {
    background-color: #000000;
    margin-bottom: 0;
    color: #898989;
}

.breadcrumb a {
  color: #c4b9b9
}

.btn-danger {
    --btn-color: #fff;
    --btn-bg: #CE2828;
    --btn-border-color: #CE2828;
    --btn-hover-color: #fff;
  transition: all 0.3s ease;
}
.btn-danger:hover {
    background: linear-gradient(45deg, #CE2828, #df4646);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.4);
}

.btn-outline-danger {
    --btn-color: #CE2828;
    --btn-border-color: #CE2828;
    --btn-hover-color: #fff;
    --btn-hover-bg: #CE2828;
    --btn-hover-border-color: #CE2828;
    --btn-focus-shadow-rgb: 165, 31, 24;
    --btn-active-color: #fff;
    --btn-active-bg: #CE2828;
    --btn-active-border-color: #CE2828;
    --btn-active-shadow: inset 0 3px 5px #00000020;
    --btn-disabled-color: #CE2828;
    --btn-disabled-bg: transparent;
    --btn-disabled-border-color: #CE2828;
    --gradient: none;
}

a:not([class]) {
    text-decoration: none;
}
.bg-1{
  background-color: #15181C;
  color:#fff;
}
.bg-2{
  background-color: #22262C;
  color:#fff;
}
.bg-3{
  background-color: #010101;
  color:#fff;
}
.text-danger {
    color: #FF2D2D!important;
}
.text-secondary {
    color: #afb5ba !important;
}
.logo {
  display: block;
  margin-right: 15px;
  margin-bottom: 7px;
}
.container-header .container-nav .container-search, .container-header .container-nav nav {
  margin-top: 0px;
}
.address-schedule {
  display: flex;
  justify-content: space-between;
  padding: 15px 16px 2px 16px;
  font-weight: 400;
  font-size: 13px;
  color: #898989;
}
.navbar-dark, .navbar[data-bs-theme=dark] {
    --navbar-color: #ffffff;
    --navbar-hover-color: #ffffffbf;
    --navbar-disabled-color: #ffffff40;
    --navbar-active-color: #fff;
    --navbar-brand-color: #fff;
    --navbar-brand-hover-color: #fff;
    --navbar-toggler-border-color: #ffffff1a;
    --navbar-toggler-icon-bg: url(../../../../../images/ic_sharp-menu.svg);
}

.metismenu.mod-menu .mm-collapse {
    background-color: #22262c;
    border-radius: 6px;
}

.metismenu-item a{
  color: #fff;
}

.logo-image {
  width: 125px;
}
.phone-menu {
  display: flex;
  flex-direction: column;
}
.phone-modal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.phone-modal a {
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}
.phone-number {
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  text-wrap: nowrap;
  color: #ffffff;
}
a.phone-number:hover {
  color: #f1bdbd;
}
.contacts-phone, .contacts-mail {
    color: var(--body-color);
    text-decoration: none;
}
.contacts-phone:hover, .contacts-mail:hover {
    color: #a90707;
    text-decoration: none;
}
.fullscreen-video-container {
  position: relative;
  height: 58vh;
  width: 98.9vw;
  min-height: 645px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(/images/banners/banner-1680.jpg);
  background-size: cover;
  background-position: center center;
}

.fullscreen-video-container video {
  position: absolute;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.fullscreen-video-content {
  color: #fff;
  padding: 30px;
  border-radius: 5px;
  z-index: 5;
} 
.metismenu.mod-menu .metismenu-item {
    padding: .3em 1em;
}
.hero-block{
  display: flex;
  padding: 50px 16px 50px 16px;
  position: relative;
  width: 100vw;
  max-height: calc(100vh - 134px);
  left: 50%;
  right: 50%;
  margin-top: -17px;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: #010101;
  overflow: hidden;

}
.hero-block-container {
  padding-top: 210px;
  align-content: end;
  background-image: url(../../../../../images/banners/bg-hero-360.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top center;
}


.hero-title {
  color: #ffffff;
  font-weight: 600;
  font-size: 29px;
  line-height: 120%;
  text-transform: uppercase;
}
.hero-title span{
  color: #FF2D2D;
}
.hero-text{
  color: #ffffff;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom:20px;
}
.hero-title-2 {
  color: #ffffff;
  font-weight: 600;
  font-size: 29px;
  line-height: 120%;
  text-transform: uppercase;
  margin-top: 20px;
}
.hero-title-2 span{
  color: #FF2D2D;
}
.hero-text-1{
  color: #ffffff;
  font-size: 18px;
  margin-top: 10px;
  margin-bottom:20px;
}
.hero-text-2{
  color: #ffffff;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom:20px;
}
.container-box {
  padding: 40px 16px 40px 16px;
}
.container-box-b {
  padding: 40px 16px 40px 16px;
  color:#ffffff;
}
.discount-text {
  color:#ffb2ae;
}
.discount-15 {
  padding: 0 16px 40px 16px;
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
/*  margin-top: 40px;*/
  margin-left: -50vw;
  margin-right: -50vw;
/*  margin-bottom: 40px;*/
  background-color: #DCDCDC;
  overflow: hidden;
}
.discount-16 {
  padding: 50px 16px 0 16px;
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: #000000;
  overflow: hidden;
}
.discount-images {
    margin-top: 0;
}
.full-services, .full-block {
  padding: 40px 16px 40px 16px;
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  color: #ffffff;
}
.full-block-hero {
  padding: 15px 16px 40px 16px;
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-top: -17px;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  color: #ffffff;
}

.why-choose-us {
  padding: 40px 16px 40px 16px;
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  color: #ffffff;
}
.why-choose-us-list {
    padding: 0;
    list-style: none;
}
.why-choose-us-list-item {
    padding: 0 12px;
}
.why-choose-us-list-item p {
    margin-top: 10px;
    color: #aaaaaa;
}
.why-choose-us-list-item p b {
    color: #fff;
}
.discount-cta {
  padding: 40px 16px 40px 16px;
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
 /* margin-top: 40px;*/
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: 40px;
  background-color: #DCDCDC;
  overflow: hidden;
}
.discount-cta.discount-cta-map {
  margin-bottom: 0;
}
.discount-15.discount-cta-map {
  margin-bottom: 0;
}
.discount-title, .discount-title-b, .discount-title-cta, .discount-title-cta-b, .reviews-title, .title-h2 {
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 20px;
}

.title-h2 {
  color: #ffffff;
  margin-top: 20px;
}
.title-h3 {
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
  margin-top: 18px;
}
.title-h2  span, .title-h3  span{
  color: #FF2D2D;
  display: inline-block;
}
.discount-title-b {
  color: #ffffff;
}

.discount-title-b  span{
  color: #FF2D2D;
  display: block;
}
.discount-title-cta-b {
  margin-top:40px;
  color:#ffffff;
}
.discount-title-cta-b span {
    color: #FF2D2D;
    display: block;
}
  .discount-desc-b {
    color:#ffffff
}
.discount-title-cta {
  margin-top:40px;
}
.discount-title span, .discount-title-cta span{
  color: #a51f18;
  display: block;
}

.reviews-title span {
  color: #FF2D2D;
  display: block;
}

.section-FAQ {
  padding: 40px 0 40px 0;
}
.map{
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}

/* Отзывы */
.reviews {
  padding: 40px 16px 40px 16px;
  position: relative;
  width: 100vw;
  margin-top: -8px;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}
.reviews-container{
  display: flex;
  flex-direction: column;
}
.reviews-desc {
  width: 91%;
}
.reviews-title,
.reviews-text {
  color: #ffffff;
}
.reviews-title {
margin-bottom: 20px;
}
.rating {
  margin-top: 28px;
}
.RatingBadgeWidget {
    display: block;
    height: 84px;
    cursor: pointer;
}
.RatingBadgeWidget:hover {
    cursor: pointer;
}
.reviews-content {
  border-radius: 4px;
  margin-top: 30px;
  padding: 20px;
  height: 690px;
  overflow: auto;
  background-color: #ffffff;
}
.reviews-content::-webkit-scrollbar {
  width: 0;
}
.reviews-widget {
    height: 1300px;
}

/* Отзывы*/
.full-services-list {
  padding: 0;
  margin-bottom: 0;
  list-style: none;
  display: flex;
  align-items: stretch;
}
.full-services-list-item {
  margin: 0px;
}
.full-services-list-item a {
    color: #ffffff;
}
.full-services-wrap{
  background-color: #22262C;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  height: 92%;
  text-decoration: none;
  padding: 10px 10px 10px 10px;
  margin-bottom: 15px;
  font-size: 15px;
  justify-content: center; 
  align-items: center;
}

.full-services-wrap:hover{
  background-color: #323840;
}

.zakaz.modal-title {
    margin: 15px 0;
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.5;
}
.carousel-control-button {
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
}
button.carousel-control-next-1, button.carousel-control-prev-1 {
    background-color: transparent;
    border: 0;
}
.carousel-indicators-1 {
    z-index: 2;
    justify-content: end;
    margin-bottom: -30px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.carousel-indicators-1 [data-bs-target] {
    box-sizing: content-box;
    text-indent: -999px;
    cursor: pointer;
    opacity: .5;
    background-color: #fff;
    background-clip: padding-box;
    border: 10px solid #0000;
    border-left: 0;
    border-right: 0;
    flex: 0 auto;
    width: 30px;
    height: 3px;
    margin-left: 3px;
    margin-right: 3px;
    padding: 0;
    transition: opacity .6s;
}
.carousel-indicators-1 .active {
    opacity: 1;
}
.icon-list {
    min-width: 40px;
}
.text-margin-top {
  margin-top: 30px;
}

.repair-selection {
    display: flex;
}

.repair-selection-wrap {
    background-color: #323840;
    padding: 30px;
    border-radius: 12px;
}
.list-reasons {
  padding: 30px 0 30px 0;
  list-style: none;
}
.list-reasons-item {
    display: flex;
}
.list-reasons-wrap {
  display: flex;
  padding: 30px;
  background-color: #22262C;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}
.symptom {
  display: block;
  width: 45%;
  color: #FF2D2D;
  margin: 0;
}
.reason {
  display: block;
  width: 45%;
  margin: 0;
}
.arrow-svg {
    margin: 0 12px 0 12px;
}
.advantages-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}
.advantages-item {
    background-color: #323840;
    padding: 20px;
    border-radius: 12px;
    flex-basis: 100%;
}
.advantages-item p {
    margin-top: 10px;
}

.stages-list {
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.stages-item {
    background-color: #323840;
    padding: 20px;
    border-radius: 12px;
    flex-basis: 100%;
}
h3.footer-category__title {
  font-size: 20px;
  color: #b3b3b3;
}
.footer-menu__item {
    font-size: 16px;
}

ul.footer-menu {
  color: #808080;
  list-style: none;
  padding-left: 0;
}

a.footer-menu__link {
    text-decoration: none;
}
a.contact-link {
    text-decoration: none;
}
.advantage-card {
    background-color: #323840;
}

.advantage-card p {
    margin-bottom: 0;
}
/* Мобильные 428*/
@media (min-width: 427px) {
  .hero-block-container {
    padding-top: 245px;
  }
}


@media (min-width: 576px) {
  .footer-navigation {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
}
/* Планшеты и выше */
@media (min-width: 768px) {
  .logo {
    margin-bottom: 0;
}
  .logo-image {
    width: 225px;
}
  .phone-number {
    font-size: 17px;
  }
  .address-schedule {
    justify-content: end;
  }
  .hero-block{
    padding: 70px 34px 70px 34px;
    min-height: calc(100vh - 134px);
}
  
  .full-block-hero {
    padding: 70px 34px 70px 34px;
    min-height: calc(100vh - 134px);
  }
  
  .hero-block-container {
    padding-top: 0;
    background-image: url(../../../../../images/banners/bg-hero-768.jpg);
    background-size: 100%;
}
  .hero-title {
    font-size: 60px;
}
  .hero-text{
    font-size: 20px;
}
  .hero-title-2 {
    font-size: 60px;
}
  
  .hero-text-1{
    font-size: 22px;
}
  .hero-text-2{
    font-size: 20px;
}
  .container-box {
  padding: 70px 0 70px 0;
}
  .container-box-b {
  padding: 70px 0 70px 0;
}
 .discount-15 {
   padding: 0 34px 70px 34px;
  }
 .discount-16 {
   padding: 70px 34px 70px 34px;
  }
  .full-services, .why-choose-us, .full-block {
    padding: 70px 34px 70px 34px;
  }
 .discount-cta {
   padding: 70px 34px 70px 34px;
  }
  .reviews {
  padding: 70px 34px 70px 34px;
  }
 .discount-title,  .discount-title-b, .discount-title-cta, .discount-title-cta-b, .reviews-title, .title-h2  {
   font-size: 40px;
   margin-bottom: 30px;
}
  .title-h3 {
    font-size: 34px;
  }
  .section-FAQ {
  padding: 70px 0 70px 0;
}
  .reviews-desc {
   display: flex;
   justify-content: space-between;
   align-items: start;
   gap: 30px;
   width: 100%;
    }
  .reviews-text {
    width: 95%;
  }
  .text-margin-top {
    margin-top: 40px;
  }
  .list-reasons {
    padding: 40px 0 40px 0;
}
  .advantages-list {
    gap: 20px;
    margin-bottom: 20px;
}

.advantages-item {
    flex-basis: 48%;
}
  .stages-list {
    gap: 20px;
}

.stages-item {
    flex-basis: 48%;
}

  .footer-navigation {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
}
/* ПК 868 и выше */
@media (min-width: 868px) {
  .reviews-container{
    flex-direction: row;
    justify-content: space-between;
  }
  .reviews-desc {
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
  }
  .reviews-content {
    margin-top: 0;
}
  .reviews-widget {
    width: 450px;
}
  .zakaz.modal-title {
    font-size: 30px;
}
  .carousel-indicators-1 {
    margin-bottom: -12px;
}
  .footer-navigation {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
}

/* ПК 1366 и выше */
@media (min-width: 1366px) {
  .address-schedule {
    max-width: 1320px; 
    margin: 0 auto;
    padding: 15px 0 2px 0;
  }
 .breadcrumb {
    max-width: 1320px;
    margin: 0 auto;
}
  /*
  .hero-block {
    padding: 100px 0 100px 0;
    min-height: calc(100vh - 134px);
    background-image: url(../../../../../images/banners/bg-hero-1366.jpg);
    background-position-x: 75%;
    background-size: contain;
  }*/
  
  .hero-block-container {
    background-image: url(../../../../../images/banners/bg-hero-1366.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: 100%;
}
  
  .hero-block-container {
    align-content: center;
}
  .full-block-hero {
    padding: 100px 0 100px 0;
    min-height: calc(100vh - 134px);
  }
  .hero-title {
    width: 53%;
  }
  .hero-text {
    width: 50%;
  }
  .hero-title-2 {
    margin-top: 0;
}
  .container-box {
  padding: 100px 0 100px 0;
}
  .container-box-b {
  padding: 100px 0 100px 0;
}
 .discount-15, .discount-16 {
   padding: 0;
  /* margin-top: 80px;*/
  }
  .full-services, .why-choose-us, .full-block {
    padding: 100px 34px 100px 34px;
  }
  .full-services-text{
    width: 60%;
  }
  .discount-cta {
    padding: 100px 34px 100px 34px;
    margin-bottom: 0;
  }
  .reviews {
  padding: 100px 34px 100px 34px;
  }
  .discount-container, .full-services-container, .hero-block-container, .full-block-container{
   max-width: 1320px;
   margin: 0 auto;
  }
 .discount-title-cta-b {
    margin-left: 15px;
  }
  .why-choose-us-list.row {
    margin-left: 6px;
  }
  .discount-title,  .discount-title-b, .discount-title-cta, .discount-title-cta-b, .reviews-title, .title-h2  {
    font-size: 40px;
  }
  
  .title-h2 {
    margin-top: 0;
}
  .discount-title-b {
    width: 90%;
  }
  .discount-title-cta, .discount-title-cta-b {
    margin-top:0px;
}
  
  .discount-desc-b {
    width: 80%;
}
  .discount-desc {
    width: 80%;
}
  .discount-images {
    margin-top: 0;
}
  .section-FAQ {
  padding: 100px 0 100px 0;
}
  .reviews-container{
    flex-direction: row;
    max-width: 1320px;
    margin: 0 auto;
  }
  .reviews-desc {
    flex-direction: column;
    width: 50%;
  }
  .reviews-widget {
    width: 602px;
    height: 1300px;
}
  .title-h2 {
    max-width: 800px;
}
   section p {
    max-width: 800px;
}
  .col-right {
    padding-left: 20px;
}
  .text-margin-top {
    margin-top: 60px;
  }
  .advantages-list {
    gap: 30px;
    margin-bottom: 30px;
}

.advantages-item {
   padding: 30px;
   flex-basis: 23%;
}
  .stages-list {
    gap: 30px;
}

.stages-item {
    flex-basis: 30%;
}
}

/* Широкие экраны 1920 и выше */
@media (min-width: 1920px) {
  .address-schedule {
    max-width: 1336px; 
    margin: 0 auto;
    padding: 15px 15px 2px 0;
  }
  .hero-block{
    padding: 130px 0 140px 0;
    min-height: calc(100vh - 134px);
}
  .hero-block-container {
    align-content: center;
   }
  .hero-text{
    font-size: 24px;
}
 .container-box {
  padding: 130px 0 130px 0;
}
  .container-box-b {
  padding: 130px 0 130px 0;
}
 .discount-15, .discount-16 {
    padding: 130px 0 140px 0;
  }
  .full-services, .why-choose-us {
    padding: 130px 0 140px 0;
  }
  .full-services-text{
    width: 60%;
  }
  .discount-cta {
   padding: 130px 0 140px 0;
  }
  .reviews {
  padding: 130px 34px 130px 34px;
  }
  .discount-container, .reviews-container, .full-services-container, .hero-block-container{
   max-width: 1336px;
   margin: 0 auto;
  }
  .discount-title,  .discount-title-b, .discount-title-cta, .discount-title-cta-b, .reviews-title, .title-h2  {
    font-size: 48px;
  }
  .section-FAQ {
  padding: 130px 0 140px 0;
}
}

@media (min-width: 1400px) {
  .fullscreen-video-container {
    height: 50vh; 
    width: 98.9vw;
    background-image: url(/images/banners/banner-1680.jpg);
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px){
  .fullscreen-video-container {
    width: 100vw;
    background-image: url(/images/banners/banner-1200.jpg);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .fullscreen-video-container {
    width: 100vw;
    background-image: url(/images/banners/banner-1140.jpg);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .fullscreen-video-container {
    width: 100vw;
    background-image: url(/images/banners/banner-960.jpg);
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .fullscreen-video-container {
    width: 100vw;
    background-image: url(/images/banners/banner-720.jpg);
  }
}

@media screen and (max-width: 650px) {
  .fullscreen-video-container {
    width: 100vw;
    background-image: url(/images/banners/banner-720.jpg);
    background-position: -420px center;
}
   .fullscreen-video-container video {
   display: none;
   }
}

@media (max-width: 575.98px) {
.fullscreen-video-container {
   height: 62vh;
   width: 100vw;
   background-image: url(/images/banners/banner-580.jpg);
   background-position: center;
 }
}

@media screen and (max-width: 450px) {
  .fullscreen-video-container {
    height: 76vh;
    background-position: center;
}
}
 
@media screen and (max-width: 360px) {
  .fullscreen-video-container {
    background-image: url(/images/banners/banner-440.jpg);
    height: 86vh;
    width: 100vw;
    background-position: center;
  }
}
 
.container-header .navbar-toggler {
    border: none;
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 1px;
}
.navbar-toggler {
  padding: 1px 6px;
}
.hero__background {
    position: static;
    height: 560px;
}

.hero__media:after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #0000004d;
}
.hero__media {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.video-background {
    position: relative;
    height: 130px;
}

#myVideo {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: 860px;
    transform: translateX(-50%) translateY(-50%);
}

.video-content {
  color: #fff;
  position: absolute;
  top: 7%;
  padding: 50px 30px;
  width: 50%;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  background-color: #00000054;
}

.container-header {
    z-index: 10;
    background-color: var(--black);
    background-image: var(--black);
    position: relative;
    box-shadow: inset 0 5px 5px #00000008;
}
.offcanvas.navbar-dark.bg-dark.text-bg-dark.offcanvas-end.show {
  background-color: var(--black);
  background-image: var(--black);
}
nav.navbar.navbar-expand-md {
    width: 100%;
}
.quality {
    list-style: none;
    padding-left: 0;
}
.quality-item {
    display: flex;
    align-items: center;
}
.quality-img {
  width: 2.5em;
  margin-right: 15px!important;
}
.video-services {
  width: 100%;
  height: auto;
  max-height: 100%;
}
.quality-text {
    margin: 0 auto;
    padding: 30px;
    backdrop-filter: blur(4px);
    background: #3e3d3d87;
    border-radius: 6px;
}
.services-list {
  list-style: none;
  padding: 0;
}
.services-item {
  display: flex;
  flex-direction: column;
}
/*.services-item a {
    color: var(--body-color);
}*/
.services-item a {
    color: #ffffff;
}
@media screen and (max-width: 360px) {
  .services-item {
  align-items: center;
}

}

.services-item h3 {
  align-self: start;
  font-size: 20px;
  margin-top: 15px;
}
.reviews-1 {
    background-image: url(/images/banners/reviews.jpg);
}

.container-banner .quality-bg.banner-overlay {
    color: #fff;
    background-position: top, 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 60vh;
}
@media (max-width: 991.98px) {
  .container-banner .quality-bg.banner-overlay {
    height: 100vh;
}
}
.quality-bg {
    background-image: url(/images/banners/car-1.webp);
}

.reviews-text-1 {
    margin: 0 auto;
    padding: 30px;
    backdrop-filter: blur(4px);
    background: #3e3d3d87;
    border-radius: 6px;
}

.reviews-text-1 p {
    width: 86%;
}

.reviews.banner-overlay {
    height: 100%;
}
.price-list {
    list-style: none;
    padding: 0;
    max-width: 80%;
    margin: auto;
}
.price-list .price-list-header, .price-list .price-list-item, .price-list .price-list-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.price-list .price-list-item .price-list-text {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.price-list .price-list-item .price-list-title {
    max-width: 80%;
}
.price-list-header {
    color: #54595F;
    font-weight: 400;
}
.price-list-separator {
  border-bottom-style: dotted;
  border-bottom-width: 2px;
  margin-left: 3px;
  margin-right: 3px;
  flex-grow: 1;
}
.price-list .price-list-item .price-list-header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 19px;
    margin-bottom: 10px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
@media (width >= 768px) {
  nav.navbar.navbar-expand-md {
    width: 100%;
}
}  
  
/*@media (max-width: 767.98px){
     .container-header .mod-menu {
      flex-direction: row;
      flex: 1;
      display: flex;
      overflow: auto;
      max-width: 460px;
    }
  }  

@media (width >= 992px) {
    .container-header .mod-menu {
        max-width: 1005px;
    }
}*/
.moduletable.mod-phone {
  display: flex;
  /*align-items: center;*/
  margin-top: 20px;
}


@media (max-width: 360px) {
.reviews-text {
  padding: 20px;
}
  }
@media (width <= 360px) {
.phone-number.d-md-none {
    font-size: 15px;
}
}
.offcanvas.show .phone{
  margin-left: 16px;
}
.messenger-icons{
  fill: #fff;
}
svg.messenger-icons:hover {
  fill: #f1bdbd;
}


.footer1 {
  text-align: center;
  margin-top: 20px;
  color: #ffffff80;
  font-size: 14px;
}
.footer1 p{
  margin-top:20px;
  color: #ffffff60;
}
.footer {
    color: #fff;
    background-color: var(--black);
    background-image: var(--black);
    margin-top: 0;
}
.footer-phone {
  display: flex;
  flex-direction: column;
  justify-self: end;
}
.whatsapp-button {
    position: fixed;
    right: -10px;
    bottom: 50px;
    transform: translate(-50%, -50%);
    background: #25D366; /*цвет кнопки*/
    border-radius: 50%;
    width: 55px; /*ширина кнопки*/
    color: #fff;
    text-align: center;
    line-height: 53px; /*центровка иконки в кнопке*/
    /*font-size: 35px; размер иконки*/
    z-index: 9;
}
.telegram-button {
    position: fixed;
    right: -10px;
    bottom: 120px;
    transform: translate(-50%, -50%);
    background: #24A1DE;
    border-radius: 50%;
    width: 55px;
    color: #24A1DE;
    text-align: center;
    line-height: 53px;
    /*font-size: 55px;*/
    z-index: 9;
}
.max-button {
    position: fixed;
    right: -10px;
    bottom: 190px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 55px;
    color: #24A1DE;
    text-align: center;
    line-height: 53px;
    z-index: 9;
}
/*.telegram-button {
    position: fixed;
    right: -10px;
    bottom: 120px;
    transform: translate(-50%, -50%);
    background: #24A1DE; /*цвет кнопки*/
    /*border-radius: 50%;
    width: 55px; /*ширина кнопки*/
    /*color: #fff;
    text-align: center;
    line-height: 53px; /*центровка иконки в кнопке*/
    /*font-size: 35px; /*размер иконки*/
    /*z-index: 9;
}*/
.phone-button {
    position: fixed;
    right: -10px;
    bottom: 260px;
    transform: translate(-50%, -50%);
    background: #019b01; /*цвет кнопки*/
    border-radius: 50%;
    width: 55px; /*ширина кнопки*/
    color: #fff;
    text-align: center;
    line-height: 53px; /*центровка иконки в кнопке*/
    font-size: 26px; /*размер иконки*/
    z-index: 9;
}
.zapis-button {
    position: fixed;
    right: -10px;
    bottom: 330px;
    transform: translate(-50%, -50%);
    background: #24a1de; /*цвет кнопки*/
    border-radius: 50%;
    width: 55px; /*ширина кнопки*/
    color: #fff;
    text-align: center;
    line-height: 53px; /*центровка иконки в кнопке*/
    font-size: 26px; /*размер иконки*/
    z-index: 9;
}
.whatsapp-button a, .telegram-button a, .phone-button a, .zapis-button a {
    color: #fff;
}

.max-button:before,
.max-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #24A1DE; /*цвет анимированных волн от кнопки*/
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}

.whatsapp-button:before,
.whatsapp-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #25D366; /*цвет анимированных волн от кнопки*/
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}
.telegram-button:before,
.telegram-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #24A1DE; /*цвет анимированных волн от кнопки*/
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}
.phone-button:before,
.phone-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #019b01; /*цвет анимированных волн от кнопки*/
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}
.zapis-button:before,
.zapis-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #24a1de; /*цвет анимированных волн от кнопки*/
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}
 
.whatsapp-button:after, .telegram-button:after,  .phone-button:after, .zapis-button:after, .max-button:after {
    animation-delay: .5s;
}

.telegram {
    position: relative;
    top: -1px;
    left: -2px;
}

.whatsapp {
    position: relative;
    top: -1px;
}

@keyframes animate
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}
@media (max-width : 800px) {  
  .phone-button {   
    bottom: 2px; /*отступ кнопки снизу от экрана*/
    left: 36px; /*отступ кнопки слева от экрана(right - справа)*/
  }
  
  .max-button {
    bottom: 2px; /*отступ кнопки снизу от экрана*/
    left: 96px;
  }
.whatsapp-button {   
    bottom: 2px; /*отступ кнопки снизу от экрана*/
    left: 156px; /*отступ кнопки слева от экрана(right - справа)*/
  }
.telegram-button {   
    bottom: 2px; /*отступ кнопки снизу от экрана*/
    left: 216px; /*отступ кнопки слева от экрана(right - справа)*/
  }  
.zapis-button{   
    bottom: 2px; /*отступ кнопки снизу от экрана*/
    left: 276px; /*отступ кнопки слева от экрана(right - справа)*/
  }  
}

@keyframes uk-shake {
 0%, 100% { transform: translateX(0); }
 10% { transform: translateX(-9px); }
 20% { transform: translateX(8px); }
 30% { transform: translateX(-7px); }
 40% { transform: translateX(6px); }
 50% { transform: translateX(-5px); }
 60% { transform: translateX(4px); }
 70% { transform: translateX(-3px); }
 80% { transform: translateX(2px); }
 90% { transform: translateX(-1px); }
}


textarea.uk-form-danger,
input.uk-form-danger {
 border-color: red;
 animation-duration: .5s;
 animation-timing-function: ease-out;
 animation-fill-mode: both;
 animation-name: uk-shake;
}

.form-check-label {
    font-size: 12px;
}
.rf-form label {
    font-size: 11px;
}

.modal-form-dark {
    background-color: #22262C !important;
}
.metismenu.mod-menu .mm-toggler:after {
    content: "";
    border-top: .3em solid;
    border-left: .3em solid #0000;
    border-right: .3em solid #0000;
    width: 0;
    height: 0;
    margin-inline-start: .5em;
    transition: all .3sease-out;
}
.container-header .metismenu>li>button:hover:before, .container-header .metismenu>li.active>button:before {
    background:none;
}
.footer .grid-child {
    display: block;
}

.container-banner .banner-overlay .overlay.overlay-services {
    text-align: left;
    align-items: flex-start;
}

/*.fa-telegram:before {
  content: "";
  background-image: url(../../../../../images/telegram.svg);
  background-repeat: no-repeat;
  background-position: 0px 3px;
}
.fa-whatsapp:before {
  content: "";
  background-image: url(../../../../../images/whatsapp.svg);
  background-repeat: no-repeat;
  background-position: 2px 2px;
}

.fa-pencil:before {
  content: "";
  background-image: url(../../../../../images/pencil-square.svg);
  background-repeat: no-repeat;
  background-position: -3px -3px;
}*/


.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-responsive  iframe,
.video-responsive object,
.video-responsive embed {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.card-info {
  position: relative;
  display: flex;
  justify-content: center;
  cursor: pointer;
  /*width: 22em;
  max-width: 80%;*/
  padding: 2em 0;
  background: #22262C;
  box-shadow: 0 0 6px 0 rgba(32, 32, 36, 0.12);
  transition: all 0.35s ease;
}
.card-info::before, .card-info::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #ff2d2d;
  height: 4px;
}
.card-info::before {
  width: 0;
  opacity: 0;
  transition: opacity 0 ease, width 0 ease;
  transition-delay: 0.5s;
}
.card-info::after {
  width: 100%;
  background: #565656;
  transition: width 0.5s ease;
}
.card-info .content {
  /*width: 18em;*/
  max-width: 85%;
}
.card-info .logo {
  margin: 0 0 1em;
  width: 10.625em;
  transition: all 0.35s ease;
}
.card-info h6 {
  color: #999;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 2px;
}
.card-info .hover_content {
  overflow: hidden;
  max-height: 0;
  transform: translateY(1em);
  transition: all 0.55s ease;
}
.card-info .hover_content p {
  margin: 1.5em 0 0;
  color: #dbdbdb;
  line-height: 1.4em;
}
.card-info:hover {
 /* width: 24em;*/
  box-shadow: 0 10px 20px 0 rgba(32, 32, 36, 0.12);
}
.card-info:hover::before {
  width: 100%;
  opacity: 1;
  transition: opacity 0.5s ease, width 0.5s ease;
  transition-delay: 0;
}
.card-info:hover::after {
  width: 0;
  opacity: 0;
  transition: width 0 ease;
}
.card-info:hover .img-info {
  margin-bottom: 0.5em;
}
.card-info:hover .hover_content {
  max-height: 30em;
  transform: none;
}

.mm-collapsed:hover .mm-collapse {
    display: block;
}

ul.mm-collapse {}

.metismenu-item.level-1.deeper.parent:hover .mm-collapse {
    display: block;
     animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
.benefit-item {
    background-color: #22262C;
    padding: 30px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.address-top {
    font-size: 1rem;
    opacity: 0.8;
}

li.metismenu-item.item-104.level-1.deeper.parent {
    flex-wrap: nowrap;
}
#mod-custom116 {
    height: 0px;
}
@media (width <= 992px) {
    nav.navbar.navbar-expand-lg {
        order: 3;
    }
}



.services-item {
  position: relative; /* Важно для абсолютного позиционирования плашки */
  overflow: hidden; /* Скрывает выходящий контент */
  border-radius: 0.375rem; /* Как в Bootstrap */
}

.services-img {
  width: 100%;
  height: 300px; /* Фиксированная высота, как в HTML */
  object-fit: cover; /* Пропорции картинок */
  display: block;
}

.services-overlay {
  position: absolute;
  bottom: 0;
  left: 8px;
  right: 0;
  backdrop-filter: blur(20px);
  background: rgba(79, 91, 117, 0.2);
  color: white;
  padding: 15px;
  width: calc(100% - 16px);
  max-height: 82px;
  overflow: visible;
  transition: max-height 0.3s ease;
}

.services-item:hover .services-overlay {
  max-height: 300px; /* Полная высота при hover (равна высоте картинки) — раскрывает всё */
}

.services-overlay h3 {
  margin: 0 0 10px 0; /* Заголовок без отступов снизу */
  font-size: 1.25rem;
  line-height: 1.2; /* Чтобы влез в 60px */
}

.services-overlay p, .services-overlay button,  .services-overlay a{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* Показываем текст при hover */
.services-item:hover .services-overlay p, .services-item:hover .services-overlay button, .services-item:hover .services-overlay a{
  max-height: 200px; /* или auto, но auto не анимируется */
  opacity: 1;
}
.services-item:hover  .services-overlay p {
  font-weight: 300;
  margin-bottom: 5px;
}
.services-item:hover  .services-overlay button{
  margin-right: 5px;
}

.price-chip {
  position: absolute;
  top: -199px;    /* Отступ сверху */
  right: 15px;  /* Отступ справа */
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.15);
  color: white;
  padding: 5px 10px;
  border-radius: 3px; 
  font-weight: bold;
  font-size: 0.875rem; /* чуть меньше */
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  z-index: 10; /* Чтобы был поверх */
  pointer-events: none; /* Чтобы не мешал наведению, если надо */
}


/* Тёмная тема для аккордеона */
.accordion-dark .accordion-item {
  background-color: #212529; /* Тёмный фон */
  border-color: #495057; /* Тёмная граница */
  color: #ffffff; /* Светлый текст */
}

.accordion-dark .accordion-header {
  background-color: #343a40; /* Фон заголовка */
}

.accordion-dark .accordion-button {
  background-color: #343a40; /* Фон кнопки */
  color: #ffffff; /* Светлый текст кнопки */
  border-color: #495057; /* Граница кнопки */
}

.accordion-dark .accordion-button:not(.collapsed) {
  background-color: #495057; /* Фон развёрнутой кнопки */
  color: #ffffff;
}

.accordion-dark .accordion-body {
  background-color: #212529; /* Фон тела */
  color: #ffffff; /* Светлый текст тела */
}
.accordion-button:not(.collapsed):after {
 background-image: url(../../../../../images/icons/accordion-btn-icon.svg);
}

.accordion-button:after {
  background-image: url(../../../../../images/icons/accordion-btn-icon.svg);
}
.accordion-button:focus {
    box-shadow: 0 0 0 .25rem #CACACA;
}

/*Баннер*/
/* Баннер */
/* Стиль для минимизированной полоски */
.promo-minibar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(45deg, #CE2828, #ff4a40);
    color: white;
    z-index: 10000;
    padding: 10px 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translateY(100%);
    opacity: 0;
}

.promo-minibar.minibar-visible {
    transform: translateY(0);
    opacity: 1;
}

.minibar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.minibar-text {
    display: flex;
    align-items: center;
    gap: 15px;
}

.minibar-icon {
    font-size: 24px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.minibar-timer {
    display: flex;
    gap: 10px;
    margin-left: 20px;
}

.minibar-timer-item {
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    min-width: 35px;
    text-align: center;
}

/* Кнопки в полоске */
.minibar-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 2;
}

.minibar-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.compact-toggle {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 2;
}

.compact-toggle:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Компактный режим полоски */
.promo-minibar.compact {
    padding: 5px 0;
    height: 30px;
}

.promo-minibar.compact .minibar-content {
    padding: 0 10px;
}

.promo-minibar.compact .minibar-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}

.promo-minibar.compact .minibar-icon {
    font-size: 18px;
}

.promo-minibar.compact .minibar-timer {
    display: none;
}

/* Скрытие полоски */
.minibar-hidden {
    transform: translateY(100%);
    opacity: 0;
}

/* Стили для полноценного попапа */
.popup-banner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.popup-content {
    color: #ffffff;
    background-color: #22262C;
    border-radius: 15px;
    padding: 30px;
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    background: none;
    border: none;
    z-index: 2;
}

.close-btn:hover {
    color: #fff;
}

.timer {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.timer-item {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    padding: 20px 15px;
    min-width: 90px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.timer-number {
    font-size: 36px;
    font-weight: bold;
    line-height: 1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.timer-label {
    font-size: 14px;
    opacity: 0.9;
    margin-top: 5px;
}

.popup-footer {
    font-size: 14px;
    color: #666;
    margin-top: 25px;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #444;
}

/* Адаптивность */
@media (max-width: 768px) {
    .minibar-content {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 0 60px 0 10px; /* Место для кнопок */
    }
    
    .minibar-text {
        flex-direction: column;
        gap: 5px;
    }
    
    .minibar-timer {
        margin-left: 0;
        justify-content: center;
    }
    
    .minibar-timer-item {
        min-width: 30px;
        padding: 3px 6px;
        font-size: 14px;
    }
    
    .timer {
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .timer-item {
        min-width: 70px;
        padding: 15px 10px;
    }
    
    .timer-number {
        font-size: 28px;
    }
    
    .popup-content {
        padding: 20px;
        width: 95%;
    }
    
    /* На мобильных кнопки ближе */
    .compact-toggle {
        right: 35px;
    }
    
    .minibar-close {
        right: 5px;
    }
}

/*Темная тема*/
/* В user.css добавь: */
[data-bs-theme="dark"] {
  color-scheme: dark;
  
  /* Основные цвета Bootstrap 5 тёмной темы */
  --bs-body-color: #dee2e6;
  --bs-body-color-rgb: 222, 226, 230;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(222, 226, 230, 0.75);
  --bs-secondary-color-rgb: 222, 226, 230;
  --bs-secondary-bg: #343a40;
  --bs-secondary-bg-rgb: 52, 58, 64;
  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
  --bs-tertiary-color-rgb: 222, 226, 230;
  --bs-tertiary-bg: #2b3035;
  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-primary-text: #6ea8fe;
  --bs-secondary-text: #dee2e6;
  --bs-success-text: #75b798;
  --bs-info-text: #6edff6;
  --bs-warning-text: #ffda6a;
  --bs-danger-text: #ea868f;
  --bs-light-text: #f8f9fa;
  --bs-dark-text: #dee2e6;
  --bs-primary-bg-subtle: #031633;
  --bs-secondary-bg-subtle: #343a40;
  --bs-success-bg-subtle: #051b11;
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #332701;
  --bs-danger-bg-subtle: #2c0b0e;
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-primary-border-subtle: #084298;
  --bs-secondary-border-subtle: #495057;
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #087990;
  --bs-warning-border-subtle: #997404;
  --bs-danger-border-subtle: #842029;
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;
  --bs-link-color: #6ea8fe;
  --bs-link-hover-color: #8bb9fe;
  --bs-link-color-rgb: 110, 168, 254;
  --bs-link-hover-color-rgb: 139, 185, 254;
  --bs-code-color: #e685b5;
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
}

/* Примени к body и элементам */
[data-bs-theme="dark"] body {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .section-bg-2 {
  background-color: var(--bs-secondary-bg) !important;
}

/* === Mobile (по умолчанию) === */
.video-vertical {
  position: relative;
  width: 100%;
  padding-top: 133%;     /* 9:16 */
  margin: 0 auto 20px;      /* центр + отступ */
}

.video-vertical iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* === Tablet ≥768px === */
@media (min-width: 768px) {
  .video-vertical {
    max-width: 100%;
    margin: 0;
  }
}

/* === Desktop ≥1366px === */
@media (min-width: 1366px) {
  .video-vertical {
    max-width: 100%;
  }
}

/* === Mobile (по умолчанию) === */
.video-horizontal {
  position: relative;
  width: 100%;
  padding-top: 56%;    
  margin: 0 auto 20px;      /* центр + отступ */
}

.video-horizontal iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* === Tablet ≥768px === */
@media (min-width: 768px) {
  .video-horizontal {
    max-width: 100%;
    padding-top: 133%;
    margin: 0;
  }
}

/* === Desktop ≥1366px === */
@media (min-width: 1366px) {
  .video-horizontal {
    max-width: 98%;
    padding-top: 133%;
  }
}