/* Swiper needs explicit height */
.projects-carousel,
.projects-carousel .swiper-wrapper,
.projects-carousel .swiper-slide {
  height: auto;
  min-height: 1px;
}

/* Make wrapper flex so slides sit side by side */
.projects-carousel .swiper-wrapper {
  display: flex;
}




/* Carousel wrapper */
.projects-carousel {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}




/* Each slide has a fixed width (not 100%) */
.projects-carousel .swiper-slide {
  width: 75%;              /* controls how much of neighbours you see */
  max-width: 1240px;       /* your design limit */
  /*text-align: center;*/
  transition: transform 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: start;
}

/* Active slide (center) */
.projects-carousel .swiper-slide-active {
  transform: scale(1);
  z-index: 2;
}

/* Neighbour slides (left + right) */
.projects-carousel .swiper-slide-prev,
.projects-carousel .swiper-slide-next {
  transform: scale(0.8);       /* shrink */
  /*transform-origin: center center;*/
  opacity: 0.9;
  z-index: 1;
}

.projects-carousel .swiper-slide-prev{
    transform-origin: center right;
}
.projects-carousel .swiper-slide-next{
    transform-origin: center left;
}



/* Project image */
.projects-carousel .project-image img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Info below image */
/* Hide all slide info by default */
.projects-carousel .project-info {
  display: none;
}

/* Show info only on active slide */
.projects-carousel .swiper-slide-active .project-info {
  display: block;
  margin-top: 15px;
}

.projects-carousel .project-title {
   font-family: "PP Neue Montreal", sans-serif;
  font-weight: 500;
  font-style: normal;   /* "Medium" is weight 500 */
  font-size: 14px;
  line-height: 120%;
  letter-spacing: 0;
  color: #000;          /* keep black for title */
  margin: 0 0 4px;
}
.projects-carousel.black .project-title{
    color:#fff;
}


.projects-carousel .project-desc {
 font-family: "PP Neue Montreal", sans-serif;
  font-weight: 400;
  font-style: normal;   /* "Regular" is weight 400 */
  font-size: 14px;
  line-height: 120%;
  letter-spacing: 0;
  color: #a5a5a5;       /* grey */
  margin: 0;
}

.projects-carousel .project-desc-title {
 font-family: "PP Neue Montreal", sans-serif;
  font-weight: 400;
  font-style: normal;   /* "Regular" is weight 400 */
  font-size: 14px;
  line-height: 120%;
  letter-spacing: 0;
  color: #a5a5a5;       /* grey */
  margin: 0;
  padding-left:10px;
}



/*Buttons*/
/* Desktop (default) */
.projects-carousel .swiper-button-prev,
.projects-carousel .swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
}

.projects-carousel .swiper-button-prev::after,
.projects-carousel .swiper-button-next::after {
  color: #FF3A00;    /* orange arrows */
  font-size: 20px;
  font-weight: bold;
}






/* Tablet (768px – 1024px) */
@media (min-width: 768px) {
  .projects-carousel .swiper-button-prev { left: 9%; }
  .projects-carousel .swiper-button-next { right: 9%; }
  .projects-carousel .swiper-button-prev::after,
  .projects-carousel .swiper-button-next::after {
    font-size: 18px;
  }
}

@media (min-width: 1200px) {
  .projects-carousel .swiper-button-prev { left: 9%; }
  .projects-carousel .swiper-button-next { right: 9%; }
}

@media (min-width: 1325px) {
  .projects-carousel .swiper-button-prev { left: 10%; }
  .projects-carousel .swiper-button-next { right: 10%; }
}

@media (min-width: 1400px) {
  .projects-carousel .swiper-button-prev { left: 9%; }
  .projects-carousel .swiper-button-next { right: 9%; }
}

@media (min-width: 1700px) {
  .projects-carousel .swiper-button-prev { left: 11%; }
  .projects-carousel .swiper-button-next { right: 11%; }
}

@media (min-width: 1850px) {
  .projects-carousel .swiper-button-prev { left: 15%; }
  .projects-carousel .swiper-button-next { right: 15%; }
}


@media (max-width: 767px) {
  .projects-carousel .swiper-button-prev { left: 40px; }
  .projects-carousel .swiper-button-next { right: 40px; }
  .projects-carousel .swiper-button-prev::after,
  .projects-carousel .swiper-button-next::after {
    font-size: 16px;
  }
}


/* Mobile (<768px) */
@media (max-width: 480px) {
  .projects-carousel .swiper-button-prev { left: 20px; }
  .projects-carousel .swiper-button-next { right: 20px; }
  .projects-carousel .swiper-button-prev::after,
  .projects-carousel .swiper-button-next::after {
    font-size: 16px;
  }
}