/* BLOCK all horizontal scroll */
html, body {
    overflow-x: hidden !important;
}

/* extra safety — in case swiper overflows */
#projects, .swiper {
    overflow-x: hidden !important;
    max-width: 100vw;
}


/* Container & Layout */
#projects {

  /*background: url('../assets/images/projects/background_projects2.jpeg') no-repeat left center/cover; */
  height: auto !important;
  min-height: 100vh; /* optional: make sure it's at least full screen */
  position: relative;
  padding-bottom: 80px; /* space for pagination circle */
}

/* Title styling */
.projects-title {
  font-size: 20px;
  font-weight: bold;
  transform: rotate(270deg);
  position: absolute;
  text-align: left;
  margin-left: 150px;
  margin-top: 50px;
  z-index: 10;
}
/*------------------------------------------------------------ SWIPER CARDS FUNCTIONALITY*/ 
/* Swiper container */
.swiper {
  height: auto !important;
  height: 100vh;
  overflow: visible !important;
  padding: 0 5vw; /* padding is fine */
  padding-bottom: 40px !important; /* <<< Add this to give extra space below */
}

.swiper-wrapper {
  display: flex;
  align-items: flex-start !important;
}

/* Base hidden slide style */
.swiper-slide {
  height: auto !important;
  width: 27vw; /* responsive width */
  max-width: 500px;
  min-width: 300px;

  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease, margin-top 0.5s ease;
}

/* Immediate neighbors (1st neighbors) */
.swiper-slide-prev,
.swiper-slide-next,
.swiper-slide-duplicate-prev,
.swiper-slide-duplicate-next {
  pointer-events: none;
  z-index: 5;
  opacity: 0.1 !important;
  filter: blur(5px) !important;
  transform: scale(0.85) !important;
  margin-top: -50px !important;
}

/* No styles for 2nd neighbors — they'll remain opacity 0 and scale 0 */

/* Active slide */
.swiper-slide-active,
.swiper-slide-duplicate-active {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
  z-index: 10 !important;
  filter: none !important;
  margin-top: 0 !important;
}

/* Card content — vertically centered content */
.swiper-slide > .projects-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: auto;
}
/*------------------------------------------------------------*/
/* Pagination Dots */
/* Position pagination near projects-title (left side, vertical) */
/* Position pagination near projects-title */
.swiper-pagination {
  position: absolute;
  top: 140px !important; /* adjust as needed */
  left: 185px !important;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  pointer-events: auto;
  user-select: none;
  /* Remove default flex styles */
  display: block;
  transform: rotate(270deg); /* align vertically */
  z-index: 1000;
}

.swiper-pagination-bullet {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #333;
  border-radius: 50%;
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  background: #000 !important;
  transform: scale(1.5);
  opacity: 1;
}

/* Position bullets in a circle around center of .swiper-pagination */


/*------------------------------------------------------------*/
/* Project content */
.projects-content {
  width: 100%; /* Use full width of slide */
  padding: 20px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}

.projects-content h3 {
  margin-bottom: 5px;
  font-size: 1.5rem;
  color: #000;
}

.projects-content p {
  font-size: 0.9rem;
  color: #000;
  line-height: 1.4;
  margin-top: 0px;
}

.bullet-points {
  list-style-type: square;
  margin-left: -10px;
  margin-top: -6px;
  margin-bottom: -10px;
}

.bullet-points li {
  font-size: 0.8rem;
  color: #000;
  margin-bottom: 5px;
}

.links-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
  width: 100%;
}

.external-link img {
  width: 40px;
  height: auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
  pointer-events: auto; /* force links hoverable/clickable */
}

.external-link img:hover {
  transform: scale(1.3);
  opacity: 0.8;
}

#proj_img {
  margin-top: 15px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

/*------------------------------------------------------------*/
@media (max-width: 1120px) {
  .swiper {
        margin-left: -40px !important; /* anchor right on mobile */
    }

  .swiper-pagination {
        margin-left: 40px !important;
    }
}

@media (max-width: 920px) {

    /* Move the title closer to center */
    .projects-title {
        margin-left: -30px;
    }

    /* Move the circular pagination to center */
    .swiper-pagination {
        top: 140px !important; /* adjust as needed */
        margin-left:-235px !important;
    }

    .swiper {
        padding-left: 155px !important; /* anchor left on mobile */
        padding-right: 175px !important; /* anchor right on mobile */
        margin-left:55px !important; /* center the swiper */
    }
    .swiper-slide {
      min-width: 150px;
    }

}

@media (max-width: 720px) {
    .swiper {
        padding-left:40px !important; /* anchor left on mobile */
        padding-right: 120px !important; /* anchor right on mobile */
        margin-left:55px !important; /* center the swiper */
    }
        .swiper-pagination {
        margin-left:-235px !important;
    }

}

@media (max-width: 520px) {
    .swiper {
        padding-left:0px !important; /* anchor left on mobile */
        padding-right: 100px !important; /* anchor right on mobile */

    }

    .projects-content p {
        font-size: 0.75rem; /* smaller text for mobile */
    }

    .bullet-points li {
  font-size: 0.65rem;
}
  
}