/* Page-template - Why us 2 */

:root {
	--tl-why-us-2-grey-dark: #1d1d1b;
	--tl-why-us-2-grey-light: #d0d1d1;
	--tl-why-us-2-padding: 200px;
	--tl-why-us-2-padding-tablet: 140px;
	--tl-why-us-2-padding-phone: 80px;
}

html, body {
	height: auto;
	overflow: visible !important;
}

body {
	margin: 0;
}

#smooth-content {
	will-change: transform;
}

.page-template-why-us-2 {
	overflow-x: visible !important;
	
	#smooth-content {
		background-color: #fff;
	}
	
	.page-wrapper {
		overflow: visible !important;
		
		.section {
			width: 100%;
			padding-top: var(--tl-why-us-2-padding);
			padding-bottom: 0;
			padding-left: 20px;
			padding-right: 20px;
			@media only screen and (max-width: 1024px) {
				padding-top: var(--tl-why-us-2-padding-tablet);
			}
			@media only screen and (max-width: 768px) {
				padding-top: var(--tl-why-us-2-padding-phone);
			}
			
			.inner {
				width: 100%;
				max-width: 1240px;
				margin: 0 auto;
				font-size: 16px;
			}
		}
		
		
		.section-block-texts {
			.inner {
				display: flex;
				flex-direction: column;
				gap: 26px;
				
				.text {
					font-family: var(--tl-font-bodoni);
					font-size: 18px;
					font-weight: 600;
					font-variation-settings: 'wght' 600;
					text-transform: uppercase;
					text-align: center;
					color: var(--tl-why-us-2-grey-dark);
					will-change: opacity;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					backface-visibility: hidden;
					transform: translateZ(0);
					@media only screen and (max-width: 1024px) {
						br {
							display: none;
						}
					}
					@media only screen and (max-width: 768px) {
						font-size: 16px;
					}
					
					p {
						margin-bottom: 0;
					}
				}
			}
		}
		
		
		.section-title-image-text {
			.inner {
				.item {
					position: relative;
					margin-bottom: var(--tl-why-us-2-padding);

					@media only screen and (max-width: 1024px) {
						height: 1000px;
						margin-bottom: 60px;
					}

					.image {
						position: relative;
						height: 100vh;

						@media only screen and (max-width: 1024px) {
							position: sticky;
							top: 15vh;
							height: 70vh;
							transform: none;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						img {
							display: block;
							width: 100%;
							max-width: 800px;
							height: 70vh;
							object-fit: cover;
							margin: 0 auto;

							@media only screen and (max-width: 1024px) {
								max-width: none;
								width: 100%;
								height: 70vh;
								margin: 0;
							}
						}
					}

					&.text-normal {
						.image {
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 0;

							img {
								margin: 0;
							}
						}

						.title {
							@media only screen and (max-width: 768px) {
								height: 90vh;
							}

							.title-inner {
								@media only screen and (max-width: 768px) {
									position: sticky;
									top: 40vh;
								}
							}
						}
					}

					&.text-centering {
						.image {
							padding-top: 100px;
							padding-bottom: 100px;
							transform: none;

							@media only screen and (max-width: 1024px) {
								top: 80px;
								height: auto;
							}

							img {
								height: 70vh;
							}
						}

						.title-text {
							flex-direction: column;
							justify-content: space-between;
							height: 60vh;

							@media only screen and (max-width: 1024px) {
								height: 40vh;
							}

							.title,
							.text {
								width: 100%;
								min-width: 100%;
							}

							.title {
								.title-inner {
									max-width: none;
									margin: 0 auto;

									@media only screen and (max-width: 768px) {
										position: relative;
										z-index: -2;
									}

									h2 {
										text-align: center;
									}

									.stripe {
										width: 1px;
										height: 150px;
										margin: 0 auto;

										@media only screen and (max-width: 768px) {
											height: 150px;
										}
									}
								}
							}

							.text {
								.text-inner {
									max-width: 500px;
									margin: 0 auto;
								}
							}
						}
					}

					.title-text {
						display: flex;
						gap: 20px;
						position: absolute;
						inset: 0;

						@media only screen and (max-width: 1024px) {
							padding: 0 20px;
						}

						.title,
						.text {
							display: flex;
							flex-direction: column;
							justify-content: center;
							width: calc(50% - 10px);
							min-width: calc(50% - 10px);
						}

						.title {
							@media only screen and (max-width: 768px) {
								width: calc(45% - 10px);
								min-width: calc(45% - 10px);
								z-index: 1;
							}

							.title-inner {
								width: 100%;
								max-width: 350px;
								margin-right: auto;

								h2 {
									margin-bottom: 16px;
									color: #fff;
									font-size: 20px;
									font-weight: bold;
									text-align: left;
									text-transform: uppercase;
									position: relative;
									z-index: 3;

									@media only screen and (max-width: 768px) {
										font-size: 16px;
									}
								}

								.stripe {
									display: block;
									width: 100%;
									height: 1px;
									background-color: #fff;
									position: relative;
									z-index: 1;
								}
							}
						}

						.text {
							color: #fff;

							@media only screen and (max-width: 768px) {
								width: calc(55% - 10px);
								min-width: calc(55% - 10px);
							}

							.text-inner {
								width: 100%;
								max-width: 350px;
								margin-left: auto;
								line-height: 2.2;

								@media only screen and (max-width: 768px) {
									font-size: 16px;
									line-height: 1.6;
									text-align: left;
								}
							}
						}
					}

					&:last-of-type {
						margin-bottom: 0;
					}
				}
			}
		}
		
		
		.section-image-statistics {
			.inner {
				display: flex;
				gap: 40px;
				@media only screen and (max-width: 1024px) {
					gap: 60px;
				}
				@media only screen and (max-width: 768px) {
					display: block;
				}
				
				.left {
					width: calc(25% - 20px);
					min-width: calc(25% - 20px);
					@media only screen and (max-width: 1024px) {
						width: calc(25% - 30px);
						min-width: calc(25% - 30px);
					}
					@media only screen and (max-width: 768px) {
						width: 100%;
						min-width: 100%;
					}
					
					.title {
						margin-bottom: 60px;
						@media only screen and (max-width: 768px) {
							margin-bottom: 40px;
						}
						
						.title-inner {
							h2 {
								margin-bottom: 16px;
								color: var(--tl-why-us-2-grey-dark);
								font-size: 20px;
								font-weight: bold;
								text-align: left;
								text-transform: uppercase;
								@media only screen and (max-width: 768px) {
									font-size: 16px;
								}
							}
				
							.stripe {
								display: block;
								width: 100%;
								height: 1px;
								background-color: var(--tl-why-us-2-grey-dark);
							}
						}
					}
					
					.statistics {
						display: flex;
						flex-direction: column;
						gap: 50px;
						@media only screen and (max-width: 768px) {
							display: block;
						}
						
						.statistic {
							display: flex;
							flex-direction: column;
							@media only screen and (max-width: 768px) {
								display: block;
								margin-bottom: 36px;
							}
							
							span {
								color: var(--tl-why-us-2-grey-dark);
								
								&.number {
									display: inline-flex;
									align-items: flex-start;
									line-height: 1;
									margin-bottom: 16px;
									font-size: 60px;
									line-height: 1;
									font-weight: bold;
									@media only screen and (max-width: 768px) {
										margin-bottom: 10px;
										font-size: 50px;
									}
			
									.digit-wrap {
										position: relative;
										display: inline-block;
										overflow: hidden;
										height: 1em;
										width: 0.62em;
										vertical-align: top;
									}
			
									.digit-track {
										display: flex;
										flex-direction: column;
										will-change: transform;
										@media only screen and (max-width: 768px) {
											display: block;
										}
				
										span {
											display: flex;
											align-items: center;
											justify-content: center;
											height: 1em;
											line-height: 1;
											@media only screen and (max-width: 768px) {
												display: block;
											}
										}
									}
			
									.number-suffix {
										display: inline-block;
										line-height: 1;
									}
								}
								
								&.label {
									display: block;
									text-align: left;
								}
							}
						}
					}
				}
				
				.right {
					width: calc(75% - 20px);
					min-width: calc(75% - 20px);
					display: flex;
					flex-direction: column;
					align-self: flex-end;
					gap: 30px;
					@media only screen and (max-width: 1024px) {
						width: calc(75% - 30px);
						min-width: calc(75% - 30px);
					}
					@media only screen and (max-width: 768px) {
						display: block;
						width: 100%;
						min-width: 100%;
					}
					
					.image {
						@media only screen and (max-width: 768px) {
							margin-bottom: 30px;
						}
						
						img {
							display: block;
							width: 100%;
							object-fit: contain;
							object-position: left;
							@media only screen and (max-width: 768px) {
								height: 200px;
							}
						}
					}
					
					.bulletpoints {
						align-self: flex-start;
						@media only screen and (max-width: 768px) {
							margin-left: 20px;
						}
								
						ul {
							columns: 2;
							list-style-position: inside;
							margin-bottom: 0;
							@media only screen and (max-width: 1024px) {
								list-style-position: outside;
							}
							@media only screen and (max-width: 768px) {
								columns: auto;
							}
							
							li {
								width: auto;
								text-align: left;
							}
						}
					}
				}
			}
		}
		
		
		.section-title-image-text-slider {
			padding-top: 150px;
			overflow: hidden;

			.inner {
				display: flex;
				flex-wrap: nowrap;
				gap: 40px;
				width: max-content;
				@media only screen and (max-width: 1024px) {
					flex-wrap: wrap;
					width: auto;
					gap: 150px;
				}
				@media only screen and (max-width: 768px) {
					gap: 60px;
				}
			}

			.item {
				position: relative;
				width: 60vw;
				min-width: 60vw;
				@media only screen and (max-width: 1024px) {
					width: 100%;
					min-width: 100%;
				}
			}
			
			.end-spacer {
				flex: 0 0 120px;
				width: 120px;
				height: 1px;
			}

			.image {
				padding-top: 10svh;
				padding-bottom: 8svh;
				height: 70svh;
				display: flex;
				align-items: center;
				justify-content: center;
				@media only screen and (max-width: 1024px) {
					display: block;
	        padding-top: 100px;
	        padding-bottom: 100px;
				}
				@media only screen and (max-width: 768px) {
					height: auto;
					padding-bottom: 0;
				}

				img {
					display: block;
					width: 100%;
					max-width: 800px;
					height: 50svh;
					object-fit: cover;
					margin: 0 auto;
					position: relative;
					z-index: 2;
					@media only screen and (max-width: 1024px) {
						height: 70svh;
						max-width: none;
					}
					@media only screen and (max-width: 768px) {
						height: 400px;
					}
				}
			}

			.title-text {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				@media only screen and (max-width: 1024px) {
					height: 70svh;
					z-index: 2;
				}
				@media only screen and (max-width: 768px) {
					display: flex;
					height: auto;
				}

				.title,
				.text {
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 100%;
					min-width: 100%;
					@media only screen and (max-width: 768px) {
						display: block;
					}
				}

				.title {
					z-index: 2;
					
					.title-inner {
						width: 100%;
						max-width: none;
						margin: 0 auto;

						h2 {
							margin-bottom: 16px;
							color: #fff;
							font-size: 20px;
							font-weight: bold;
							text-align: center;
							text-transform: uppercase;
							position: relative;
							z-index: 3;
							@media only screen and (max-width: 768px) {
								font-size: 16px;
							}
						}

						.stripe {
							display: block;
							width: 1px;
							height: 150px;
							margin: 0 auto;
							background-color: #fff;
							position: relative;
							z-index: 1;

							@media only screen and (min-width: 1025px) {
								transform: scaleY(0);
								transform-origin: top center;
								will-change: transform;
								backface-visibility: hidden;
							}
							@media only screen and (max-width: 768px) {
								height: 100px;
							}
						}
					}
				}

				.text {
					color: #fff;
					@media only screen and (max-width: 1024px) {
						padding: 0 40px 40px 40px;
					}
					@media only screen and (max-width: 768px) {
						padding: 0 20px 20px 20px;
					}

					.text-inner {
						width: 100%;
						max-width: 500px;
						margin: 0 auto;
						line-height: 2.2;
						position: relative;
						z-index: 3;
						@media only screen and (max-width: 768px) {
							line-height: 1.6;
						}
					}
				}
			}
		}
		

		.section:last-of-type {
			padding-bottom: var(--tl-why-us-2-padding);
		}
		
		
		.title-inner,
		.text-inner,
		.inner,
		.image img {
			will-change: transform, opacity;
		}
	}

	
	.footer {
		position: relative;
	}
}