/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 09 2026 | 19:51:28 */
/*
========= 1. 404 TEMPLATE        ==========
========= 2. USER SELECT         ==========
========= 3. BREADCRUMBS         ==========
========= 4. CONTAINER           ==========
========= 5. HERO & PAGE BANNER  ==========
========= 6. CONTACT BANNER      ==========
========= 7. MEDIA PLAYER        ==========
========= 8. OPEN POST           ==========
========= 9. CONTACT COLUMNS     ==========
========= 10. STEP GROUP         ==========
========= 11. BAMBOOHR           ==========
*/


/* ============================= 1. 404 TEMPLATE ============================= */
.wrapper-404 {
	position: relative;
	background-color: var(--white-dyn-1);
	transition: all 0.4s;
	z-index: 2;
	
	.background-404 {
		position: absolute;
		left: 0;
		top: 50%;
		right: 0;
		height: 100%;
		z-index: -1;
		transform: translatey(-44%);
		
		svg {
			width: 100%;
			height: auto;
			fill: var(--gray-light-2-dyn-1);
			transition: all 0.4s;
		}
	}
	
	.icon-404 {
		width: 6rem;
		height: auto;
	}
	
	.title-404 {
		font-weight: 800;
		font-size: 3rem;
		color: var(--green-light-2);
		text-align: center;
		margin-bottom: 3rem;
	}
	
	.number-404 {
		font-weight: 700;
		font-family: 'Montserrat', sans-serif;
		font-size: 16rem;
		color: var(--green-dark-2-dyn-1);
		margin-top: 3rem;
		line-height: 1;
		transition: all 0.4s;
	}
	
	.link-404 {
		font-weight: 800;
		font-size: 1.25rem;
		color: var(--green-light-2);
	}
}


/* ============================= 2. USER SELECT ============================= */
img {
	user-select: none;
}


/* ============================= 3. BREADCRUMBS ============================= */
.breadcrumbs-wrapper {
	background-color: var(--white-dyn-1);
	transition: all 0.4s;
	
	.breadcrumbs-nav {
		display: flex;
		flex-wrap: nowrap;
		overflow: auto;
		padding-bottom: 0.3rem;

		@media screen and (min-width: 768px) {
			flex-wrap: wrap;
			overflow: unset;
			padding-bottom: 0;
		}

		&::-webkit-scrollbar {
			height: 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);
		}

		.breadcrumb-link {
			position: relative;
			z-index: 10;
			font-size: 1.1rem;
			font-weight: 600;
			color: var(--gray-dark-1-dyn-2);
			text-decoration: none;
			transition: all 0.4s;
			white-space: nowrap;

			&.active, &:hover {
				color: var(--teal-dark-dyn-1);
			}

			&::before {
				content: '-';
				padding-left: 0.5rem;
				padding-right: 0.5rem;
				color: var(--gray-dark-1-dyn-2);
				transition: all 0.4s;
			}

			&:first-child {
				&::before {
					content: '';
					padding: 0;
				}
			}
		}
	}
}


/* ============================= 4. CONTAINER ============================= */
.small-container {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	
	@media screen and (min-width: 1200px) {
		max-width: 1200px;
	}
}


/* ========================================= 5. HERO & PAGE BANNER ========================================= */
.hero-section {	
	&:not(.page-banner) {
		overflow: hidden;
	}
	
	.hero-wrapper {
		max-height: 85vh;
		display: flex;
		align-items: end;
		position: relative;
		z-index: 2;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		
		.hero-video {
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -1;
		}
		
		.hero-heading {
			font-size: clamp(4rem, 14vw, 200px);
			line-height: 0.85;
			font-weight: 700;
			color: var(--white);
			font-family: 'Montserrat', sans-serif;
			text-transform: uppercase;
			text-box: trim-both cap alphabetic;
			margin-bottom: 0;
			position: relative;
			
			@media screen and (min-width: 991px) {
				font-size: clamp(4rem, 11vw, 200px);
			}
		}
		
		.hero-heading[data-fit-heading] {
			display: inline-block;
			color: transparent;
			width: auto;
			max-width: 100%;
			white-space: nowrap;
			
			&::before,
			&::after {
				content: attr(data-text);
				position: absolute;
				inset: 0;
				text-box: trim-both cap alphabetic;
				pointer-events: none;
			}

			&::before {
				z-index: 1;
				color: var(--white);
				clip-path: inset(-50% -50% -2% -50%);
			}

			&::after {
				z-index: 2;
				color: var(--white);
				clip-path: inset(101% -50% -100% -50%);
				transition: color 0.4s;
				
				@media screen and (min-width: 991px) {
					color: var(--gray-light-1-dyn-1);
				}
			}
		}
		
		.hero-text {
			font-size: 1.5rem;
			color: var(--white);
			font-weight: 700;
			text-transform: uppercase;
			text-align: left;
		}
	}
	
	&.page-banner {
		.page-banner-wrapper {
			padding-top: calc(var(--header-height) + 100px);
			width: 100%;
			
			@media screen and (min-width: 991px) {
				padding-left: var(--adjustive-padding);
			}
		}
		
		.hero-wrapper {
			min-height: 50vh;
			
			.hero-heading {
				font-size: clamp(3rem, 10vw, 200px);
				margin-left: var(--adjustive-padding);
				margin-right: var(--adjustive-padding);
				text-indent: -0.8vw;
				
				@media screen and (min-width: 991px) {
					font-size: clamp(4rem, 8vw, 200px);
					margin: 0;
				}
			}
		}
		
		.page-shortcuts {
			background-color: var(--green-dark-2);
			padding: 2rem var(--adjustive-padding);
			width: 100%;
			
			@media screen and (min-width: 991px) {
				padding-left: 2.5rem;
				padding-right: 2.5rem;
				width: auto;
				min-width: 400px;
			}
			
			ul {
				--shortcut-gap: 1rem;
				padding: 0;
				margin-bottom: 0;
				list-style: none;
				width: 100%;
				display: flex;
                flex-wrap: wrap;
				flex-direction: column;
				row-gap: 0.75rem;
				
				@media screen and (min-width: 576px) {
					row-gap: calc(var(--shortcut-gap) * 2);
					column-gap: var(--shortcut-gap);
					flex-direction: row;
				}
				
				li {
					width: 100%;
					display: flex;
					align-items: center;
					column-gap: 0.75rem;
					
					@media screen and (min-width: 576px) {
						width: calc(50% - var(--shortcut-gap) / 2);
					}
					
					&::before {
						content: url("data:image/svg+xml,%3Csvg%20width%3D%225%22%20height%3D%2210%22%20viewBox%3D%220%200%205%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200L5%203.72093V6.27907L0%2010V7.46124L4.54918%204.16667V5.83333L0%202.53876V0Z%22%20fill%3D%22%238EC645%22/%3E%3C/svg%3E");
						transition: all 0.3s;
					}
					
					a {
						color: #fff;
						font-weight: 700;
						font-size: 1.25rem;
						text-decoration: none;
						transition: all 0.3s;
					}
					
					&:hover a, &.page-active a{
						color: var(--green-light-1);
					}
					
					&:hover::before {
						transform: translateX(4px);
					}
				}
			}
		}
	}
}


/* ========================================= 6. CONTACT BANNER ========================================= */
.contact-form-container {
	.row {
		margin: 0;
	}
	
	.contact-image {
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.contact-form {
		input:not([type="checkbox"]), textarea {
			border-radius: 0;
			background-color: transparent;
			border: 1px solid var(--light-blue);
			color: #fff;
			outline: none;
			box-shadow: none;
			resize: none;
			
			&::placeholder {
				color: var(--light-blue);
			}
		}
		
		.form-select {
			border-radius: 0;
			background-color: transparent;
			border: 1px solid var(--light-blue);
			color: var(--white);
			outline: none;
			box-shadow: none;

			appearance: none;
			-webkit-appearance: none;
			padding-right: 2rem;

			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M8 12L2 5h12z'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 0.75rem center;
			background-size: 12px;
			
			option {
				background-color: var(--teal-dark);
				border: 1px solid var(--light-blue);
				
				&:hover {
					background-color: var(--teal);
				}
			}
		}
		
		legend.wsf-hidden-element {
			display: none;
			visibility: hidden;
		}
		
		.form-check {
			label {
				color: #fff;
			}
			
			input {
				border-radius: 0;
				background-color: transparent;
				border: 1px solid var(--light-blue);
				box-shadow: none;
			}
		}
		
		.button {
			width: fit-content;
		}
	}
}


/* ========================================= 7. MEDIA PLAYER ========================================= */
.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {
	background-color: var(--green-dark-1-dyn-2);
	transition: all 0.4s;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
	background-color: var(--green-light-2);
}

.wp-video {
	width: 100% !important;
	max-width: 700px;
	
	.mejs-container {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16/9 !important;
		
		video {
			width: 100% !important;
			height: 100% !important;
		}
	}
}


/* ========================================= 8. OPEN POST ========================================= */
.related-posts {
	padding: 2rem var(--adjustive-padding);
	background-color: var(--gray-light-3-dyn-1);
	transition: all 0.4s;
	
	.post-item {
		width: 100%;
		display: flex;
		justify-content: center;
		
		.post-card {
			position: relative;
			display: flex;
			align-items: end;
			aspect-ratio: 3 / 2;
			min-height: 200px;
			max-width: 550px;
			color: var(--white);
			text-decoration: none;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			
			@media screen and (min-width: 991px) {
				max-width: unset;
			}
		}
		
		.post-card-content {
			background-color: var(--green-dark-transparent-1);
			padding: 1rem;
			
			.post-card-title {
				font-size: 1.25rem;
				font-weight: 600;
				line-height: 1.25;
				margin-bottom: 0.5rem;
				color: var(--white);
				
				@media screen and (min-width: 576px) {
					font-size: 1.5rem;
				}
			}

			.post-card-text {
				margin: 0;
				color: var(--white);
				line-height: 1.2;
				font-size: 0.9rem;
				
				@media screen and (min-width: 576px) {
					font-size: 1rem;
				}
			}
		}
	}
}

.open-post {
	background-color: var(--white-dyn-1);
	transition: all 0.4s;
	
	.post-date {
		color: var(--gray-dark-1-dyn-2);
		font-size: 1.5rem;
		text-align: center;
		transition: all 0.4s;
	}
	
	.post-title {
		text-align: center;
		color: var(--green-dark-1-dyn-1);
		transition: all 0.4s;
	}
	
	.post-content {
		* {
			font-size: 1.5rem;
			color: var(--gray-dark-1-dyn-1);
			transition: all 0.4s;
		}
	}
	
	.open-post-bottom {
		border-top: 1px solid var(--green-light-1);
		padding-top: 1.5rem;
		margin-top: 1.5rem;
		margin-bottom: 4rem;

		a {
			text-decoration: none;
			font-size: 1.5rem;
			font-weight: 600;
			color: var(--green-dark-1-dyn-1);
			transition: all 0.4s;
			display: flex;
            align-items: center;
            column-gap: 0.5rem;
		}
		
		svg path {
			fill: var(--green-dark-1-dyn-1);
			transition: all 0.4s;
		}
	}
}


/* ========================================= 9. CONTACT COLUMNS ========================================= */
.contact-columns {
	background-color: var(--gray-light-3-dyn-3);
	transition: all 0.4s;
	
	& > .wp-block-column:first-of-type {
		padding-left: var(--adjustive-padding);
		padding-block: 2rem;
	}
	
	.wp-block-column {
		padding-right: 1rem;
		color: var(--green-dark-2-dyn-1);
		
		a {
			color: inherit;
		}
		
		@media screen and (min-width: 1200px) {
			font-size: 1.25rem;
		}
	}
}


/* ========================================= 10. STEP GROUP ========================================= */
.step-group {
	border-bottom: 1px solid var(--gray-1);
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	
	* {
		font-weight: 500;
	}
	
	strong {
		font-weight: 700;
		color: var(--green-dark-2-dyn-1);
		transition: all 0.4s;
	}
	
	p:last-of-type {
		margin-bottom: 0;
	}
	
	&.step-group-link {
		margin-bottom: 0.75rem;
		padding-bottom: 0.75rem;
		
		a {
			text-decoration: none;
			
			svg {
				transition: all 0.3s ease-in-out;
			}
			
			&:hover svg {
				transform: translateY(5px);
			}
		}
	}
}


/* ========================================= 11. BAMBOOHR ========================================= */
#BambooHR {
	* {
		color: var(--gray-dark-2-dyn-1) !important;
		transition: all 0.4s;
	}
}