.row.cars_carousel { 
    padding: 100px 0;
    position: relative;
  }
  .row.cars_carousel.black-section{
    background-color: #000;
  }
  /* Row + FOUC fix */
  .cars-carousel .carousel-row {
    overflow: hidden;
    margin: 18px 0;
  }
  
  .cars-carousel .js-carousel {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .cars-carousel .js-carousel.slick-initialized { 
    opacity: 1;
  }
  
  /* Let expanded tiles spill over cleanly */
  .cars-carousel .slick-list {
    overflow: visible;
  }  
  
  .cars-carousel .slick-slide {
    outline: none;
  }
  
  /* Base tile — square 400x400. We animate ONLY width. */
  .cars-carousel .carousel-slide {
    width: 400px;
    height: 400px;
    padding: 8px 10px;
    transition: width 0.25s ease;
    position: relative;
    z-index: 1;
  }
  
  /* Hover state — double width, same 400px height */
  .cars-carousel .carousel-slide.is-expanded {
    width: 800px;
    z-index: 3;
  }
  
  /* Card + image fill the tile box */
  .cars-carousel .carousel-card {
    display: block;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .cars-carousel .carousel-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Help Slick with RTL rows (for alternating direction) */
  .cars-carousel .carousel-row[data-direction="rtl"] .js-carousel {
    direction: rtl;
  }


  .carousel-intro{
    margin-bottom: 55px;
  }

  .row.cars_carousel.black-section .carousel-intro p,
  .row.cars_carousel.black-section .carousel-intro h1,
  .row.cars_carousel.black-section .carousel-intro h2,
  .row.cars_carousel.black-section .carousel-intro h3,
  .row.cars_carousel.black-section .carousel-intro h4,
  .row.cars_carousel.black-section .carousel-intro h5,
  .row.cars_carousel.black-section .carousel-intro h6,
  .row.cars_carousel.black-section .carousel-intro ul,
  .row.cars_carousel.black-section .carousel-intro li,
  .row.cars_carousel.black-section .carousel-intro a{
    color: #fff;
  }
  
.cars_carousel .sbtn{
    max-width: 300px;
    margin: 50px auto 0 auto;
}

  /* Breakpoints: keep the 2× width relationship, height fixed */
  @media (max-width: 1200px) {
    .cars-carousel .carousel-slide {
      width: 340px;
      height: 340px;
    }
  
    .cars-carousel .carousel-slide.is-expanded {
      width: 680px;
    }
  }
  
  @media (max-width: 992px) {
    .cars-carousel .carousel-slide {
      width: 300px;
      height: 300px;
    }
  
    .cars-carousel .carousel-slide.is-expanded {
      width: 600px;
    }
  }
  @media (max-width: 980px) {
    .row.cars_carousel{
      padding: 50px 0;
    }
  }
  @media (max-width: 640px) {
    .cars-carousel .carousel-slide {
      width: 220px;
      height: 220px;
    }
  
    .cars-carousel .carousel-slide.is-expanded {
      width: 440px;
    }
  }