/* ---------- carousel.css ---------- */
  :root {
        --card-active-base-width: 260px;
        --active-scale: 1.2;
        --inactive-width: 140px;
        --transition-duration: 0.4s;
        --carousel-height: 400px;
        --card-bg: #eee;
        --card-hover-bg: #ddd;
        --text-color: #333;
        --link-color: #0066cc;
        --arrow-bg: rgba(0,0,0,0.5);
        --arrow-color: #fff;
        --arrow-hover-bg: rgba(0,0,0,0.7);
        --content-blur: 5px;
  }

  /* Layout */
  .portfolio-carousel { position:relative;   overflow: visible; max-width:1200px; margin:0 auto; padding:20px 0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
  .carousel-container { overflow:hidden; position:relative; height:var(--carousel-height); }
  .carousel-track { position:relative; height:100%; transition:transform var(--transition-duration) ease; will-change:transform; }
  .card { position:absolute; top:0; height:100%; overflow:hidden; background:var(--card-bg); border-radius:0px; box-shadow:0 2px 8px
  rgba(0,0,0,0.1); display:flex; flex-direction:column; align-items:stretch; box-sizing:border-box; transition:width
  var(--transition-duration) ease, left var(--transition-duration) ease; transform-origin:left center; user-select:none; }
  .card:hover { background:var(--card-hover-bg); cursor:pointer; }
  .card .title { margin:0; padding:12px 0; font-size:1.2rem; color:var(--text-color); text-align:center; }
  .card .content { flex:1; padding:0px; display:flex; flex-direction:column; justify-content:space-between; }
  .card .content p { margin:0 0 8px; color:var(--text-color); font-size:0.9rem; line-height:1.4; }
  .card .content .btn { display:inline-block; padding:6px 12px; background:var(--link-color); color:#fff; text-decoration:none;
  border-radius:4px; font-size:0.9rem; transition:background .3s ease; }
  .card .content .btn:hover { background:#0055aa; }
  /* Arrow buttons */
  /* Arrow buttons – size and positioning */
.carousel-arrow {
    position: absolute;
     bottom: -60px;
    transform: translateY(-50%);
    background: var(--arrow-bg);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background .3s ease;
}

/* Arrow icon – uses the color variable */
.carousel-arrow svg {
    width: 100%;
    height: 100%;
    fill: var(--arrow-color);
}
  .carousel-arrow:hover { background:var(--arrow-hover-bg); }
 .carousel-arrow.left  { left: calc(50% - 50px); }
.carousel-arrow.right { right: calc(50% - 50px);  }
  @media (max-width:480px) { .carousel-arrow { display:none; } }
  /* Blur for inactive cards – will be toggled by JS */
   .card .content { transition:filter var(--transition-duration) ease; }

/* Image styles */
/* Image styles – override Elementor's default height:auto */
.elementor .slide-img,
body.elementor .slide-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* will be overridden by the widget control */
    display: block;               /* remove inline‑gap */
    border: 5px solid red !important; /* test only – remove later */
}