/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 23 2026 | 11:46:24 */
/* ========================================= SLIDER - SHORTCUTS ========================================= */
.slider-shortcuts-section {
	background-color: var(--gray-light-3-dyn-1);
	
	.shortcut-nav__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		aspect-ratio: 1/1;
		padding: 0.5rem;
		border: 0;
		cursor: pointer;
		background-color: transparent;
		outline: none;
		transition: background-color 0.3s ease;

		&:focus-visible,
		&:hover {
			background-color: var(--green-dark-1);
		}
				
		svg {
			display: block;
			width: 1rem;
			height: auto;
			
			path {
				fill: var(--green-light-1);
			}
		}
	}
	
	.shortcuts-heading {
		color: var(--green-dark-1-dyn-1);
		margin-top: auto;
		margin-bottom: auto;
		
		&:has(+ div) {
			margin-bottom: unset;
		}
	}
	
	.shortcuts-swiper {
		.swiper-scrollbar {
			--swiper-scrollbar-sides-offset: calc(var(--adjustive-padding) / 2);
			--swiper-scrollbar-size: 2px;
			--swiper-scrollbar-bg-color: var(--gray-light-1);
			left: 0 !important;
			
			.swiper-scrollbar-drag {
				--swiper-scrollbar-drag-bg-color: var(--green-light-1);
				top: -50%;
				height: 200%;
			}
		}
	}
	
	.shortcuts-wrapper {
		.shortcut-box {
			text-decoration: none;
			
			.shortcut-image {
				aspect-ratio: 2 / 3;
				object-fit: cover;
				width: 100%;
				margin-bottom: 1rem;
				transition: all 0.3s;
			}
			
			.shortcut-title {
				font-size: 1.5rem;
				font-weight: 700;
				line-height: 1.1;
				color: var(--green-dark-1-dyn-1);
				text-align: center;
				transition: all 0.3s;
			}
			
			&:hover {
				.shortcut-image {
					filter: brightness(0.9);
				}
				
				.shortcut-title {
					transform: translateY(-5px);
				}
			}
		}
	}
}