@charset "UTF-8";
.navbar {
  position: sticky;
  top: 0;
  background: transparent; /* Начальное состояние */
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease; /* Добавим плавность для фона, тени и отступов */
  z-index: 1000; /* Убедимся, что навбар над всем остальным */
  padding: 1rem 0; /* Установим изначальные отступы */
}

.navbar.scrolled {
  background: rgb(255, 255, 255); /* Фон при скролле */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Тень для акцента */
  padding: 0.5rem 0; /* Уменьшаем отступы при скролле */
}

[id] {
  scroll-margin-top: 120px;
}

.login-btn {
  margin-top: -3px;
  margin-left: 10px;
}

@media (max-width: 1200px) {
  .login-btn {
    margin-left: 0px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
}
.hero-header {
  font-size: 64px;
  font-weight: 900;
  color: #4d141f;
  padding-bottom: 20px;
}

@media (max-width: 992px) {
  .hero-header {
    font-size: 35pt;
  }
}
.header {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)), url("../images/hero_bg_06.jpg") left center no-repeat;
  background-size: cover;
  height: 600px;
}

.lead {
  font-weight: 400;
}

.vertical-decoration {
  top: 15%;
  width: 24px;
}

@media (max-width: 576px) {
  .hero-btn {
    margin-bottom: 20px !important;
  }
}
.about {
  margin-top: 80px;
}

@media (max-width: 992px) {
  .about-992 {
    margin-bottom: 0px !important;
  }
}
/* Убираем изначальную тень у card */
.card {
  box-shadow: none !important; /* Убираем все тени */
  border: none; /* Если Bootstrap добавляет бордер */
  transition: box-shadow 0.3s ease, border-color 0.3s ease; /* Добавляем плавный переход */
}

/* Стили для card-body */
.card-body {
  border: 1px solid #dbdbdb; /* Бордер вокруг card-body */
  border-radius: 4px; /* Скруглённые углы */
  padding: 20px; /* Внутренний отступ */
  transition: box-shadow 0.3s ease, border-color 0.3s ease; /* Плавный переход */
}

/* Тень появляется при наведении */
.card-body:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень при наведении */
  border-color: #ccc; /* Изменение цвета бордера */
}

.how-icon {
  width: 90px;
  padding-top: 60px;
  padding-bottom: 30px;
}

.brands {
  background-color: #4c1e36; /* Цвет фона */
  padding: 60px 0; /* Отступы сверху и снизу */
}

.h1-all {
  color: #fff; /* Белый цвет заголовка */
}

.brand-logo {
  height: 75px !important;
  transition: transform 0.3s ease; /* Плавные эффекты */
}

.brand-logo:hover {
  transform: scale(1.05); /* Увеличение при наведении */
}

.brand-logo img {
  max-width: 100%; /* Адаптивный размер изображений */
  height: auto;
}

@media (max-width: 992px) {
  .brand-logo {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
.h1-all {
  font-size: 32px;
  font-weight: 900;
  color: #333;
}

.brands h1 {
  color: #fff;
}

.commission-models {
  background-color: #f8f8f8; /* Светлый фон */
  padding: 60px 0;
}

.nav-tabs .nav-link {
  border: none; /* Убираем границы кнопок */
  font-weight: 500;
  color: #333;
  padding: 12px 20px; /* Внутренние отступы для кнопок */
  transition: background-color 0.3s ease, color 0.3s ease;
  flex: 1; /* Равномерное распределение ширины */
  text-align: center; /* Центрируем текст */
  border-radius: 0; /* Убираем скругления */
}

.nav-tabs .nav-link.active {
  background-color: #e21b49; /* Активный цвет */
  color: #fff; /* Цвет текста активного таба */
  border-radius: 0; /* Убираем скругления у активной кнопки */
}

.nav-tabs .nav-link:hover {
  background-color: #e21b49; /* Цвет при наведении */
  color: #fff; /* Цвет текста активного таба */
}

.tabs-container {
  overflow: hidden;
  border-radius: 0; /* Убираем скругление всего блока */
  margin: 0; /* Убираем белые поля */
  padding: 0; /* Убираем внутренние отступы */
}

.tab-content {
  border-top: none; /* Убираем лишние границы */
  margin-top: 0; /* Убираем разрыв между табами и содержимым */
}

/* Стили для мобильной версии */
@media (max-width: 576px) {
  .nav-tabs {
    flex-direction: column; /* Табами друг под другом */
  }
  .nav-tabs .nav-link {
    flex: none; /* Отключаем равную ширину табов */
    width: 100%; /* Таб занимает всю ширину блока */
    text-align: left; /* Текст выравнивается по левому краю */
    padding: 10px 15px; /* Компактные отступы для мобильных устройств */
    margin: 0; /* Убираем промежутки между табами */
    border-left: none; /* Отключаем левый бордер */
    border-right: none; /* Отключаем правый бордер */
  }
}
.tools {
  background-color: #fff;
}
.tools .accordion-button {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  background-color: transparent;
  border: none;
  box-shadow: none;
}
.tools .accordion-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.tools .accordion-button:not(.collapsed) {
  color: #333;
  background-color: transparent;
}
.tools .accordion-button::after {
  font-size: 1rem;
  color: #333;
}
.tools .accordion-body {
  font-size: 16px;
  line-height: 1.6;
  border-top: none;
  padding-left: 40px;
}
.tools .accordion-item {
  border: none;
}
@media (max-width: 768px) {
  .tools {
    flex-direction: column;
  }
  .tools .second-column {
    margin-top: -34px;
  }
}

.acc-img {
  margin-right: 25px;
}

.testimonials {
  background-color: #f8f9fa;
}

.testimonial-text {
  font-style: italic;
}

.testimonial {
  padding: 60px;
  height: 420px; /* Фиксированная высота для всех отзывов */
}

@media (max-width: 576px) {
  .testimonial {
    height: 480px; /* Табами друг под другом */
  }
}
.testimonial p {
  font-size: 16px;
  line-height: 1.5;
}

.testimonial a {
  display: block;
  margin-top: 10px;
  font-size: 14px;
}

/* Стили для стрелок */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: transparent;
  border: none;
  width: 30px;
  height: 30px;
  background-size: contain;
  transition: filter 0.3s ease; /* Плавный переход на ховер */
  filter: brightness(50%); /* Изначально светлый цвет */
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23212121' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23212121' viewBox='0 0 16 16'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Ховер-эффект для стрелок */
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  filter: brightness(100%); /* Делает насыщенный цвет при наведении */
}

/* Убираем фон у кнопок */
.carousel-control-prev.no-bg,
.carousel-control-next.no-bg {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.test-a {
  font-size: 16px !important;
}

.contact-us {
  background-color: #ffffff; /* Белый фон */
}

.contact-us p {
  font-size: 14px;
  color: #333; /* Цвет текста */
}

.contact-us a {
  font-weight: bold;
  transition: color 0.3s ease;
}

@media (max-width: 576px) {
  .contact-item {
    padding-bottom: 25px; /* Табами друг под другом */
  }
}
.footer {
  background-color: #333; /* Тёмный фон */
  color: #ccc; /* Светлый текст */
}

.footer .nav-link {
  color: #ccc; /* Цвет ссылок */
  font-size: 14px;
  padding: 5px 8px;
}

.footer .nav-link:hover {
  color: #e21b49; /* Цвет при наведении */
}

.p-footer {
  font-size: 12px;
}

.modal-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.modal-title {
  font-weight: bold;
}

.modal-body {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  max-height: 70vh;
  overflow-y: auto;
}

.modal-footer {
  border-top: 1px solid #dee2e6;
}

@media (max-width: 992px) {
  .footer-btn {
    margin-top: 20px !important;
  }
}
::selection {
  background: #4c1e36;
  color: #ffffff;
}