/* ============================================================
   PORTFOLIO CAROUSEL — SPLIDE VERSION
   ============================================================ */

/* --- Wrapper --- */
.portfolio-carousel-wrapper {
  position: relative;
  overflow: hidden;
  //margin: 0.3rem 0;
}

/* --- Splide Track Margin (similar to Slick margin push) --- */
.portfolio-carousel-wrapper .splide__track {
  margin: 0;
  overflow: visible !important;
}

.portfolio-title {
  text-align: left;
  padding: 1rem 0;
}
.portfolio-item a:hover {
color:#39BFBB;
}
/* ------------------------------------------------------------
   SLIDES
------------------------------------------------------------ */
.portfolio-carousel-splide .splide__list {
  display: flex;
  align-items: center;
}

.portfolio-carousel-splide .splide__slide {
  width: 250px;
  margin: 4rem;
  text-align: center;
  backface-visibility: hidden;
  will-change: transform, opacity;

  /* Base appearance */
  transform: scale(1);
  opacity: 0.4;

  /* Smooth, elegant, slower transition */
  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Center Slide Enlargement --- */
.splide__slide.is-enlarged {
  transform: scale(1.2);
  opacity: 1;
  z-index: 5;
}

/* ------------------------------------------------------------
   PORTFOLIO ITEM INNER CONTENT
------------------------------------------------------------ */
.portfolio-carousel-splide img {
  max-width: 100%;
  height: auto;
  display: block;
}

.portfolio-carousel-splide h3 {
  margin: 1.8rem 0;
  color: #fff;
  text-align: left;
  transition: color 0.3s ease;
}

.splide__slide.is-enlarged h3 {
  font-weight: bold;
  color: #fff;
}

/* Link styling */
.portfolio-carousel-splide a {
  text-decoration: none;
  color: #fff; /* always white */
}

/* ------------------------------------------------------------
   CUSTOM ARROWS (same as image carousel)
------------------------------------------------------------ */
.portfolio-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 110px;
  height: 110px;
  background-color: #39bfbb;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s ease;
  overflow: hidden;
}

.portfolio-arrow-left {
  left: -60px;
}

.portfolio-arrow-right {
  right: -60px;
}

/* Material Icons */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 4rem;
  line-height: 1;
  display: inline-block;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  color: #00425D;
}

.portfolio-arrow .material-symbols-outlined {
  font-size: 3rem;
}

/* Move icon inside circle */
.portfolio-arrow-left .material-symbols-outlined {
  padding-left: 4rem;
}

.portfolio-arrow-right .material-symbols-outlined {
  padding-right: 4rem;
}

/* Hover */
.portfolio-arrow:hover {
  background: #fff;
}

.portfolio-arrow:hover .material-symbols-outlined {
  color: #00425D;
}

/* ------------------------------------------------------------
   ARROW ANIMATIONS
------------------------------------------------------------ */
.portfolio-arrow-left span,
.portfolio-arrow-right span {
    animation: none !important;
    transform: none !important;   /* ← restores original position */
}

@keyframes arrow-wiggle-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-6px); }
}

@keyframes arrow-wiggle-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

.portfolio-arrow-left span {
  animation: arrow-wiggle-left 1.6s ease-in-out infinite;
}

.portfolio-arrow-right span {
  animation: arrow-wiggle-right 1.6s ease-in-out infinite;
}

 .portfolio-carousel-splide .splide__slide {
  width: 100%;
  margin: 2rem auto;
  padding:2rem 4rem;
}

/* ------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
------------------------------------------------------------ */

@media (max-width: 960px) {
  /* Disable zoom on small screens */
  .portfolio-carousel-splide .splide__slide,
  .portfolio-carousel-splide .splide__slide.is-enlarged {
    transform: scale(1) !important;
    opacity: 1 !important;
  }
  
  .portfolio-carousel-splide .splide__slide {
    width: 100%;
    margin: 1rem auto;
    padding:0 2rem;
  }
  
}

@media (max-width: 768px) {
  
  .portfolio-carousel-splide .splide__slide {
    width: 100%;
    /* margin: 2rem auto; */
    /* padding:1.5rem; */
  }
  
  .portfolio-arrow {
    width: 80px;
    height: 80px;
  }
  .portfolio-arrow-left {
    left: -50px;
  }
  .portfolio-arrow-right{
    right: -50px;
  }
  .portfolio-arrow .material-symbols-outlined {
    font-size: 2rem;
  }
  /* Icon nudging */
  .portfolio-arrow-left .material-symbols-outlined {
    padding-left: 3.5rem;
  }
  .portfolio-arrow-right .material-symbols-outlined {
    padding-right: 3.5rem;
  }
  .portfolio-carousel-wrapper .splide__track {
    margin: 0rem auto;
  }
}

@media (max-width: 480px) {
  .portfolio-carousel-splide .splide__slide {
    width: 100%;
    /* margin: 2rem auto; */
    padding:0 1rem;
  }
  .portfolio-carousel-splide h3 {
      text-transform: none !important;
  }
  .portfolio-carousel-splide h3 {
    font-size: 1.2rem;   /* tighter, no left padding */
  }

}