.sr-cards-team-04 .blaze-slider {
	--slides-to-show: 5 !important;  /* Forces 5 cards */
	--slide-gap: 10px !important;    /* Forces a smaller gap */
}


.sr-cards-team-04 .blaze-arrow {
	color: var(--arrows-color, var(--primary));
	border-radius: 100%;
	border: 2px solid var(--arrows-color, var(--primary));
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 500ms ease;
	background: none;
	background-color: transparent;
	appearance: none;
	-webkit-appearance: none;
	padding: 0;
  
}

/* 1. The Text: High Z-index and absolute white */
/* 

/* Apply the mask to the container holding the sliding track */
.blaze-track-container {
  -webkit-mask-image: linear-gradient(to right, 
    transparent 0%, 
    black 30%, 
    black 70%, 
    transparent 100%
  );
  mask-image: linear-gradient(to right, 
    transparent 0%, 
    black 30%, 
    black 70%, 
    transparent 100%
  );
  
  /* Required for some browsers to render masks correctly over moving parts */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  overflow: hidden;
}

.sr-cards-team-04 .blaze-track {
    display: flex;
    align-items: stretch; /* Forces all children to be the height of the tallest one */
  transition-property: transform;
} 
.sr-cards-team-04 .blaze-arrow {
	position: absolute;
	top: 50%;
	font-size: 30px;
	z-index: 1;
	cursor: pointer;
}

.sr-cards-team-04 .blaze-arrow svg {
	color: var(--arrows-color, var(--primary));
	fill: currentColor
}

.sr-cards-team-04 .blaze-arrow:hover svg {
	color: #fff;
}

.sr-cards-team-04 .blaze-arrow:hover {
	color: #fff;
border-color: #333333; 
	background-color: #333333;
}

.sr-cards-team-04 .chevron-left {
	left: 0.5rem;
	transform: translateY(-50%) translateX(-50%);
}

.sr-cards-team-04 .chevron-right {
	right: 0.5rem;
	transform: translateY(-50%) translateX(50%);
}


.sr-cards-team-04 .content-wrapper>a {
	color: inherit
}

.sr-cards-team-04 .sr-cards-team__image {
	position: relative;
  width: 100%;
  height: 100%;;
}

.sr-cards-team__image .image-link {
  display: block;
  position: relative;
}

.sr-cards-team__image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

/* Overlay */
.sr-cards-team__image .image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Overlay Text */
.sr-cards-team__image .overlay-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Hover Effects */
.sr-cards-team__image .image-link:hover img {
  transform: scale(1.05);
}

.sr-cards-team__image .image-link:hover .image-overlay {
  opacity: 1;
}

.sr-cards-team-04 .blaze-pagination button {
	padding: 0 !important;
}

/* 1. Set the card to a fixed aspect ratio (Portrait like the image) */
.sr-cards-team-04 .content-wrapper {
    width: 100%;
    aspect-ratio: 5/ 6; /* This keeps them all the same shape */
    overflow: hidden;    /* Clips any "leaking" image parts */
}

/* 2. Style the Info Box as a floating overlay at the bottom */
/* Container for the text overlay - Full Width */
.sr-cards-team-04 .sr-cards-team__info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  /* Keep the fade but ensure it's BEHIND the text layer */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%) !important;
  z-index: 5; 
  padding: 20px;
}

/* 4. Make the image cover the entire card background */
.sr-cards-team-04 .sr-cards-team__image,
.sr-cards-team-04 .sr-cards-team__image img {
   width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures no white gaps around the image */
   object-position: center;
}

.sr-cards-team-04 .blaze-track .sr-cards-team__image,
.sr-cards-team-04 .blaze-track .content-wrapper,
.sr-cards-team-04 .blaze-track .content-wrapper>a {
	height: 100%;
	display: block
}

@media(min-width: 1200px) {
	.sr-cards-team-04 .chevron-left {
		left: -1rem
	}
	.sr-cards-team-04 .chevron-right {
		right: -1rem
	}
}

@media(min-width: 1300px) {
	.sr-cards-team-04 .chevron-left {
		left: -0.5rem
	}
	.sr-cards-team-04 .chevron-right {
		right: -0.5rem
	}
}