/* Базовые настройки */
:root {
    --bg-color: #f2f0eb;
    --text-color: #1a1f2c;
    --active-btn-bg: #111827;
    --active-btn-text: #ffffff;
    --inactive-btn-bg: #ffffff;
  }
  
  /* --- ЛЕВАЯ КОЛОНКА (Контент) --- */
  .customer-tab.customer-tab_active {
    background-color: var(--active-btn-bg);
    color: var(--active-btn-text);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }
  
  .customer-tab svg {
    stroke: currentColor;
  }
  
  /* --- ПРАВАЯ КОЛОНКА (Слайдер) --- */
  .slider-col {
    flex: 1.2;
    /* height: 85vh;
    position: relative;
    display: flex;
    align-items: center; */
  }
  
  .swiper.slider-arc {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  
  .swiper-wrapper {
    /* perspective: 1200px; */
  }
  
  
  .slider-arc .swiper-slide {
    display: flex;
    align-items: center;
    /* Теперь выравниваем по левому краю, чтобы дуга уходила вправо */
    /* justify-content: flex-start;
          box-sizing: border-box;
          backface-visibility: hidden; */
    /* Важно: чтобы слайды не перекрывали друг друга при скролле */
    pointer-events: none;
  }
  
  .swiper-slide-active {
    /* Активный слайд должен реагировать на клики */
    pointer-events: auto;
  }
  
  /* Контейнер картинки */
  .image-card {
    /* width: 520px;
    height: 465px;
    /* aspect-ratio: 3 / 4; */
    border-radius: 20px;
    overflow: hidden;
    position: relative; */
    background: #fff;
  }
  
  .image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Адаптивность */
  @media (max-width: 991px) {
    .swiper-slide, .slider-arc .swiper-slide {
      pointer-events: auto;
    }
  
    .slider-arc .swiper-slide {
      transform: scale(0.85);
      transition: transform 0.4s ease;
      display: flex;
      align-items: center; /* центр по высоте */
    }
    
    .slider-arc .swiper-slide-active {
      transform: scale(1);
    }
  
    .customer-tab-list {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch; /* важно для плавности на iOS */
      scroll-behavior: smooth; /* опционально, но помогает */
    }
    
    .customer-tab {
      flex-shrink: 0; /* критично! */
      white-space: nowrap;
    }
  } 
  
  /* @media (max-width: 1024px) {
    .main-wrapper {
      flex-direction: column;
      height: auto;
      padding: 20px;
      overflow-y: auto;
    }
    .slider-col {
      width: 100%;
      height: 600px;
      order: -1;
    }
    .swiper-slide {
      justify-content: center;
    }
    .content-col {
      padding: 40px 0;
    }
    h1 {
      font-size: 2.5rem;
    }
  } */
  
  @media (min-width: 768px) {
    .reviews-slider .swiper-slide {
      /* Все слайды по умолчанию опущены */
      transform: translateY(64px); 
      transition: transform 0ms; /* Будет управляться из JS */
    }
    .reviews-slider .swiper-slide:first-child {
      /* Первый слайд при загрузке сразу вверху */
      transform: translateY(0);
    }
  }
  
  
  .pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: rgba(200, 200, 200, 1);
    animation: pulse 3s ease-out infinite;
    pointer-events: none;
  }
  
  .pulse-ring:nth-child(2) {
    animation-delay: 1s;
  }
  
  .pulse-ring:nth-child(3) {
    animation-delay: 2.33s;
  }
  
  @keyframes pulse {
    0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.9;
    }
    100% {
      transform: translate(-50%, -50%) scale(1.3);
      opacity: 0;
    }
  }
  
  
  .hover-dropdown__content {
    max-height: 0;
    display: flex;
    position: absolute;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  .nav-bar {
    transition: height 0.3s ease, background-color 0.3s ease;
  }
  
  .hover-dropdown__icon {
    transition: transform 0.3s ease;
  }
  
  .hover-dropdown.active .hover-dropdown__icon {
    transform: rotate(180deg);
  }
  
  html, body {
    scroll-behavior: auto !important; /* Важно для работы GSAP */
  }