/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 10 2026 | 14:47:33 */
/* ========================================= STACKING CARDS ========================================= */
.stacking-cards-section {
	.card-wrapper {
		display: flex;
		flex-direction: column-reverse;
		
		@media screen and (min-width: 768px) {
			position: -webkit-sticky;
			position: sticky;
			top: 0;
			height: 100vh;
			flex-direction: row;
		}
		
		.card-content {
			padding: 3rem var(--adjustive-padding);
			display: flex;
			align-items: center;
			background-color: var(--teal-light);
			
			@media screen and (min-width: 768px) {
				padding-right: 2rem;
			}
		}
		
		.card-image-wrapper {
			.card-image {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
			}
		}
		
		.card-text-wrapper {
			p, a, li {
				font-size: 1rem;
				font-weight: 400;
				color: var(--gray-dark-2);
			}
		}
		
		&.card-large {
			.card-text-wrapper {
				max-height: 100%;
				overflow: auto;
				padding-right: 10px;
                margin-right: -10px;
				
				&::-webkit-scrollbar {
					width: 5px;
				}

				&::-webkit-scrollbar-track {
					background: var(--gray-light-1);
				}

				&::-webkit-scrollbar-thumb {
					background: var(--green-light-1);
				}

				@supports not selector(::-webkit-scrollbar) {
					scrollbar-width: thin;
					scrollbar-color: var(--green-light-1) var(--gray-light-1);
				}
			}
			
			.card-text {	
				* {
					color: var(--white);
				}
			}
		}
		
		&.card-small {
			.card-content {
				padding-top: 0;
				padding-bottom: 3rem;
				padding-right: var(--adjustive-padding);
				height: 100%;
				
				@media screen and (min-width: 768px) {
					padding-right: 0;
					padding-top: 3rem;
				}
				
				.card-text-wrapper {
					display: flex;
					column-gap: 1rem;
					row-gap: 1.5rem;
					flex-direction: column;
					position: relative;
					margin-top: -3rem;					
					max-height: 70%;
					height: 100%;
					
					@media screen and (min-width: 768px) {
						margin-top: 0rem;
						margin-right: -7.5rem;
					}
					
					@media screen and (min-width: 991px) {
						flex-direction: row;
						margin-right: -2.5rem;
					}
					
					h3 {
						color: var(--gray-dark-2) !important;
					}
					
					.card-text {
						background-color: var(--white);
						flex: 1;
					}
					
					&.col-multiple {
						.card-text {
							padding: 3.5rem 1.5rem;
							overflow: auto;
							display: flex;
							flex-direction: column;
						}
					}
					
					&.col-single {
						flex: 1;
						min-height: 80%;
						
						.card-text {
							display: flex;
							flex-direction: column;
							justify-content: center;
							padding: 1rem;
							
							@media screen and (min-width: 768px) {
								padding: 2rem;
							}
						}
					}
				}
			}
		}
		
		&.card-reverse {
			@media screen and (min-width: 768px) {
				flex-direction: row-reverse;
			}
			
			.card-content { 
				@media screen and (min-width: 768px) {
					padding-right: var(--adjustive-padding) !important;
					padding-left: 2rem !important;
				}	
			}
			
			&.card-small {
				.card-content {
					@media screen and (min-width: 768px) {
						padding-left: 0 !important;
					}
					
					.card-text-wrapper {
						@media screen and (min-width: 768px) {
							margin-left: -7.5rem;
							margin-right: 0;
						}

						@media screen and (min-width: 991px) {
							margin-left: -2.5rem;
							margin-right: 0;
						}
					}
				}
			}
		}
	}
}