/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 03 2026 | 11:32:04 */
/* ========================================= HORIZONTAL ACCORDION ========================================= */
.horizontal-accordion-section {
	--transition-lenght: 0.5s;
	
	@media screen and (min-width: 1200px) {
		--transition-lenght: 1s;
	}

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
	.accordion-overlay {
		position: relative;
	}
	
	.header-wrapper {
		color: var(--white);
		z-index: 10;
		padding: 1rem var(--adjustive-padding);
		background-color: var(--green-dark-transparent-1);
		border-bottom: 1px solid var(--teal-light);
		
		h2 {
			color: inherit;
		}
		
		@media screen and (min-width: 1200px) {
			position: absolute;
			top: 6rem;
			left: var(--adjustive-padding);
			padding: unset;
			background-color: unset;
			border-bottom: unset;
		}
	}
	
	.accordion-wrapper {
		display: flex;
		flex-direction: column;
		min-height: fit-content;
		
		@media screen and (min-width: 1200px) {
			flex-direction: row;
			height: clamp(500px, 90vh, 1000px);
		}
		
		.accordion-section {
			position: relative;
			transition: all var(--transition-lenght) cubic-bezier(0.25, 1, 0.5, 1);
			display: flex;
			flex-direction: column;
			cursor: pointer;
			padding: 1rem var(--adjustive-padding);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			
			&::before {
				content: "";
				position: absolute;
				inset: 0;
				z-index: 0;
				pointer-events: none;
				background-color: var(--green-dark-transparent-1);
				transition: background-color var(--transition-lenght) cubic-bezier(0.25, 1, 0.5, 1);
			}

			> * {
				position: relative;
				z-index: 1;
			}
			
			@media screen and (min-width: 1200px) {
				flex: 1;
				padding: unset;
				flex-direction: row;
				align-items: end;
			}
			
			.title-icon {
				object-fit: contain;
				aspect-ratio: 1/1;
				width: 3rem;
				
				@media screen and (min-width: 1200px) {
					width: 5rem;
				}
			}
			
			.title-vertical {
				width: 100%;
				font-size: 1.5rem;
				font-weight: 600;
				color: var(--white);
				opacity: 1;
				display: flex;
				align-items: center;
				gap: 1.5rem;
				pointer-events: none;
				
				&::after {
					content: "+";
					font-size: 2rem;
					line-height: 1;
					transition: transform var(--transition-lenght) ease;
					margin-left: auto;
					padding-bottom: 5px;

					@media screen and (min-width: 1200px) {
						content: none;
					}
				}
				
				@media screen and (min-width: 1200px) {
					position: absolute;
					left: 50%;
					transform-origin: left;
					transform: rotate(-90deg);
					width: max-content;
					white-space: nowrap;
					font-size: 2rem;
					max-width: 100%;
				}
				
				.title-icon {
					@media screen and (min-width: 1200px) {
						transform: rotate(90deg);
					}
				}
			}
			
			.section-content {
				display: grid;
				grid-template-rows: 0fr;
				transition: grid-template-rows var(--transition-lenght) ease, opacity var(--transition-lenght) ease;
				opacity: 0;
				width: 100%;
				overflow: hidden;
				
				@media screen and (min-width: 1200px) {
					display: block;
					grid-template-rows: unset;
					overflow: visible;
					padding: 2rem 1.5rem;
					transition-delay: 0.1s;
				}
				
				.section-content-inner {
					min-height: 0;
					overflow: hidden;
				}
				
				.section-title {
					display: none;
					font-size: 2rem;
					font-weight: 600;
					color: var(--white);
					margin-bottom: 1rem;
					line-height: 1.2;
					
					p {
						color: inherit;
					}
					
					@media screen and (min-width: 1200px) {
						display: block;
					}
					
					.title-icon {
						margin-bottom: 1.5rem;
					}
				}
				
				.section-description {
					font-size: 1rem;
					color: var(--white);
					margin-top: 1rem;
					
					p {
						color: inherit;
					}
					
					@media screen and (min-width: 1200px) and (max-width: 1400px ) {
						font-size: 1rem;
					}
					
					@media screen and (min-width: 1200px) {
						margin-top: 0;
					}
				}
			}
			
			&.is-active {
				&::before {
					background-color: var(--green-light-transparent-1);
				}

				.title-vertical {
					&::after {
						transform: rotate(135deg);
					}
				}

				.section-content {
					opacity: 1;
					grid-template-rows: 1fr;
				}
			}
			
			&:not(:last-of-type) {
				border-bottom: 1px solid var(--teal-light);
			}
			
			@media screen and (min-width: 1200px) {
				&:not(:last-of-type) {
					border-bottom: unset;
				}

				&:not(:first-of-type) {
					border-left: 1px solid var(--teal-light);
				}

				&:first-of-type {
					.section-content {
						padding-left: 3rem;
					}
				}

				&:last-of-type {
					.section-content {
						padding-right: 3rem;
					}
				}

				.title-vertical {
					opacity: 1;
				}

				.section-content {
					opacity: 0;
					transition: none;
				}

				&.is-active {
					&::before {
						background-color: var(--green-dark-transparent-1);
					}
					
					.title-vertical { 
						margin-bottom: unset; 
					}
					
					.section-content { 
						opacity: 0; 
						transition: none; 
					}
				}

				&:hover {
					flex: 2;
					
					&::before {
						background-color: var(--green-light-transparent-1);
					}
					
					.section-content { 
						opacity: 1; 
						
						transition: opacity var(--transition-lenght) ease;
					}
					.title-vertical { 
						opacity: 0; 
					}
				}
			}

			@media screen and (min-width: 1400px) {
				&:first-of-type {
					.section-content {
						padding-left: var(--adjustive-padding);
					}
				}

				&:last-of-type {
					.section-content {
						padding-right: var(--adjustive-padding);
					}
				}
			}
		}
	}
}