/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 19 2025 | 18:09:34 */
@use 'bootstrap-variables';
@use 'bootstrap-mixins';


/* Sponsor Ads */

#sponsors-mobile { display: none }
#sponsors,
#sponsors-mobile {
	--slide-width: 100%;
	--button-width: 50px;
	--edge-gap: calc(8vw / 2 - var(--button-width) / 2);
    padding: 6rem 4rem !important;
}

 #sponsors .carousel,
 #sponsors-mobile .carousel{
    position: relative;
    width: var(--slide-width);
    max-width: 1600px;
    height: auto;
	aspect-ratio: 16/5;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid #d1dbe5;
}

#sponsors swiper-slide,
#sponsors-mobile swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
    background-size: cover;
    background-position: center;
    transition: opacity 1s ease-in-out;
    z-index: 0;
}
#sponsors swiper-slide img,
#sponsors-mobile swiper-slide img{
    object-fit: cover;
    height: 100%;
    width: 100%;
}

#sponsors button.custom-nav,
#sponsors-mobile button.custom-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: none;
	border: none;
	width: var(--button-width);
	height: var(--button-width);
	cursor: pointer;
    background: yellow;
    z-index: 10;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	transition: all .2s ease-out;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
#sponsors button.custom-nav:hover,
#sponsors-mobile button.custom-nav:hover {
	transform: scale(1.05) translateY(-50%);
}
#sponsors .swiper-button-prev,
#sponsors-mobile .swiper-button-prev {
  left: var(--edge-gap);
}
#sponsors .swiper-button-next, 
#sponsors-mobile .swiper-button-next {
  right: var(--edge-gap);
}

@media screen and (max-width: 768px) {
	#sponsors { display: none }
	#sponsors-mobile { 
		display: block;
	}
	#sponsors-mobile .carousel {
		aspect-ratio: 4/3;
	}
}