:root {
--swiper-pagination-color: black;
/*  --swiper-pagination-bullet-size: 8px;*/
--swiper-pagination-bullet-width: 6px;
--swiper-pagination-bullet-height: 6px;
--swiper-pagination-bullet-inactive-color: black;
--swiper-pagination-bullet-inactive-opacity: 0.06;
--swiper-pagination-bullet-opacity: 0.5;
--swiper-pagination-bullet-horizontal-gap: 4px;
--swiper-pagination-bullet-vertical-gap: 6px;

}

.swiper {
  width: 100%;
  height: auto;
  max-height: 700px;
}

.swiper-slide img {
	display: block;
	margin: auto;
	max-width:100%;
	max-height:625px;
	width: auto;
	height: auto;
}

.swiper-slide p {
	display: inline-block;
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 97%;
  margin: auto;
}	

.custom-button-next, .custom-button-prev {
	position: absolute;  
	display: flex;
	top: 0;  
	width: 36px;  
	height: 26px;  
	z-index: 10;
	align-items: center;
	justify-content: center;
	background: rgba(188,188,188,0.5);
	background-blend-mode: overlay;
}
.custom-button-next {
	right: 0px; /* Default right position */  
}
.custom-button-pref {
	left: 10px; /* Default left position */  
}

.custom-button-next::after {  
	content: '→'; /* Or use SVG: content: url("data:image/svg+xml,..."); */  
	font-size: 16px;  
	color: #333;
	font-weight: bold;  
}
.custom-button-prev::after {  
	content: '←'; /* Or use SVG: content: url("data:image/svg+xml,..."); */  
	font-size: 16px;  
	color: #333;
	font-weight: bold;  
}  

/* Hover effect */  
.custom-button-next:hover, .custom-button-prev:hover {  
  background: white;
  color:black;
}  

.swiper-wrapper {
	width: 100%;
	overscroll-behavior-y: none;
	padding-top: 32px;
}