.brand-section {
          width: 100%;
          padding: 48px 20px;
      }

      .brand-wrap {
          max-width: 1170px;
          margin: 0 auto;
      }

      .brand-title {
          text-align: center;
          font-size: 26px;
          font-weight: 700;
          margin-bottom: 22px;
      }

      /* Slider container */
      .carousel {
          position: relative;
          overflow: hidden;
          background: transparent;
          padding: 18px 0;
      }

      /* Track */
      .carousel-track {
          display: flex;
          align-items: center;
          gap: var(--gap);
          transition: transform 450ms cubic-bezier(0.22, 0.9, 0.3, 1);
          will-change: transform;
          padding: 6px 12px;
      }

      /* Slide */
      .carousel-slide {
          flex: 0 0 auto;
          width: 220px;
          /* base width (overridden by JS for perfect fit) */
          height: var(--slide-height);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: var(--bg);
          box-shadow: 0 6px 20px rgba(14, 20, 25, 0.08);
          padding: 12px;
          transition: transform 0.25s ease, box-shadow 0.25s ease;
      }

      .carousel-slide img {
          max-width: 90%;
          max-height: 90%;
          object-fit: contain;
          /* display: block; */
          filter: grayscale(0.15);
          transition: filter 0.25s ease, transform 0.25s ease;
          border: 1px solid black;
      }

      .carousel-slide:hover img {
          filter: grayscale(0);
          transform: scale(1.03);
      }

      .carousel-slide:focus {
          outline: 2px solid rgba(0, 0, 0, 0.06);
      }

      /* Buttons */
      .carousel-btn {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: var(--arrow-size);
          height: var(--arrow-size);
          border-radius: 50%;
          border: none;
          background: linear-gradient(135deg, #fff, #f3f3f3);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          z-index: 40;
          transition: all 0.25s ease;
      }

      .carousel-btn:hover {
          transform: translateY(-50%) scale(1.04);
      }

      .carousel-btn:active {
          transform: translateY(-50%) scale(0.98);
      }

      .carousel-btn svg {
          width: 18px;
          height: 18px;
          color: var(--accent);
      }

      .carousel-prev {
          left: 8px;
      }

      .carousel-next {
          right: 8px;
      }

      /* Dots (optional) */
      .carousel-dots {
          display: flex;
          gap: 8px;
          justify-content: center;
          margin-top: 14px;
      }

      .carousel-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #d9d9d9;
          border: none;
          cursor: pointer;
      }

      .carousel-dot.active {
          background: #111;
          width: 20px;
          border-radius: 999px;
          transition: width 0.25s ease;
      }

      /* Responsive: adjust slide width base */
      @media (max-width: 1200px) {
          .carousel-slide {
              width: 200px;
          }
      }

      @media (max-width: 992px) {
          .carousel-slide {
              width: 230px;
          }
      }

      @media (max-width: 768px) {
          .carousel-slide {
              width: 260px;
          }
      }

      @media (max-width: 600px) {
          .carousel-slide {
              width: 86%;
              height: 180px;
              margin: 0 auto; 
          }

          .carousel-track {
              gap: 12px;
              justify-content: center;
          }

          .carousel-btn {
              display: block;
          }

          /* hide big arrows on tiny screens */
      }