.series-slide-section::before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.95) 66.6%, rgba(255, 255, 255, 1) 100%),url("/images/slider-bg.jpg");
  background-size: cover;
  background-position: center center;
  z-index: -1;
  opacity: 0.5;
}

.series-slide-section{
  height: auto;
  --text-padding-left: 20px;
}

.content-section{
  max-width: 40vw;
  margin-bottom: 30px;
  margin-top: 20px !important;
}

.content-section h1{
  font-size: 2.5 rem;
  font-weight: bold;
}

.text-with-bar{
  border-left: 5px solid var(--yellow) !important;
  padding-left: 1.2rem;
}

.bottom-text:last-child,
#text_partial_8910932{
  font-size: clamp(1rem, 2vw, 18px);
}

.bottom-text{
  padding-left: calc(var(--text-padding-left) + 5px);
}

/*Carousel CSS*/
.mySwiper{
  padding-top: 20px !important;
  --bs-gutter-x:10rem !important;
}


.card-container-box{
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 4/4;
  transition: all 0.2s ease-in-out;

}

.card-container-box:hover {
  transform: scale(1.05);
}

.card-container-box img{
  width: 100%;
  height: 80%;  
  object-fit: cover; 
  border-radius: 12px;

}

.text-box{
  width: 90%;
  max-height: 30vh;
  transform: translateY(-30%);
  background-color: white;
  margin: auto;
  padding: 20px; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: left;
  overflow: hidden;
}
.text-box h5{
  font-weight: 700;
}

.series-text{
  color: gray;
}

.card-info{
  display: flex; 
  justify-content: space-between; 
  margin-bottom: 20px; 
  border-top: solid #eaeaea 1px;
  border-bottom: solid #eaeaea 1px;
  text-align: left;
  padding: 5px 0;
}

.size, .model-count{
  display: flex; 
  flex-direction: column;
}
.text-box h4{
  font-size: 0.8rem !important;
}
.size span:first-child, .model-count span:first-child{
  font-weight: var(--bold);
  font-size: 1.1rem;
}
.card-info .size{
  width: 50%;
}
.card-info .model-count{
  width: 50%;
}

.view-models-btn{
  display: flex; 
  justify-content: flex-start;
}


#carousel-btn-next,
#carousel-btn-prev {
  width: clamp(3.5em, 7vw, 7em);
  height: clamp(3.5em, 7vw, 7em);
  border-radius: 50%; 
  background-color: var(--green); 
  display: block;
  color: transparent;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}

#carousel-btn-next:hover,
#carousel-btn-prev:hover{
  background-color: var(--dark-green) !important;
}

#carousel-btn-next img,
#carousel-btn-prev img {
  border-radius: 50%;
  max-width: 100%; 
  max-height: 100%;
  object-fit: contain;
  padding: 0.5rem;
  filter: invert(100%);
}
.swiper-pagination-bullet{
  opacity: 0.5 !important;
  background-color: var(--graphite) !important;
}
.swiper-pagination-bullet-active{
  opacity: 1 !important;
  background-color: var(--green) !important;
}

#carousel-btn-next {
    right: 10px;
    transform: translateY(100%) translateX(-20%);
}

#carousel-btn-prev {
    left: 10px;
    transform: translateY(100%) translateX(20%) rotate(180deg);
}

@media (max-width: 768px) {
  .text-box{
    display: flex;
    flex-direction: column;
    text-align: center;
    span{
      text-align: center;
    }
    .view-models-btn{
      justify-content: center;
    }
  }
}