.elementor-9729 .elementor-element.elementor-element-538bb8d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--flex-wrap:nowrap;}/* Start custom CSS for html, class: .elementor-element-ad5d7ab */.body {
      margin: 0;
      
      display: flex;
      justify-content: center;
      align-items: center;
      height: auto;
      font-family: sans-serif;
    }

    .carousel {
      position: relative;
      width: 90%;
      max-width: 900px;
      perspective: 1000px;
      overflow: visible;
    }

    .carousel-track {
      position: relative;
      width: 100%;
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
      transform-style: preserve-3d;
      transition: transform 0.6s ease;
    }

    .carousel-item {
      position: absolute;
      width: 60%;
      max-width: 500px;
      transition: transform 0.6s ease, opacity 0.6s ease;
      opacity: 0;
      z-index: 0;
    }

    .carousel-item img {
      width: 100%;
      border-radius: 14px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    }

    /* Position states */
    .center {
      transform: translateX(0) scale(1.2);
      opacity: 1;
      z-index: 3;
    }
    .left {
      transform: translateX(-120%) scale(0.9);
      opacity: 0.7;
      z-index: 2;
    }
    .right {
      transform: translateX(120%) scale(0.9);
      opacity: 0.7;
      z-index: 2;
    }
    .back {
      transform: translateX(0) scale(0.8) translateZ(-200px);
      opacity: 0;
      z-index: 1;
    }

    /* Controls */
    .carousel-controls {
      position: absolute;
      bottom: -50px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .arrow {
      background: white;
      border: none;
      border-radius: 50%;
      padding: 8px 12px;
      box-shadow: 0 3px 8px rgba(0,0,0,0.2);
      cursor: pointer;
      font-size: 18px;
    }

    .dots {
      display: flex;
      gap: 8px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #bbb;
      cursor: pointer;
      transition: background 0.3s;
    }

    .dot.active {
      background: #333;
    }

    /* Mobile: show only 1 image */
    @media (max-width: 768px) {
      .left, .right, .back {
        display: none;
      }
      .center {
        transform: translateX(0) scale(1.1);
      }
    }/* End custom CSS */