/* Page-template - Landrovers story new */

.page-template-landrovers-story-new {
	padding: 0 !important;
	
	&:before {
		height: 100svh;
	}
	
	.page-wrapper {
		height: 100svh;
		
		.section_1__wrapper_2 {
			height: 100svh;
			overflow-x: hidden;
			
			.section_1_row_2 {
				height: 100svh;
			}
			
			.section-footer {
				height: auto;
			}
			
			.footer {
				position: relative;
				bottom: 0;
				z-index: 1;
				
				.footer__inner {
					padding: 30px 25px 25px 25px;
				}
				
				.footer__inner--top ul li {
					margin-bottom: 15px;
				}
			}
		}
		
		.section_1__wrapper_2 {
			section {
				background-position: center;
				
				&:before {
					height: 100svh;
					background-image: none;
					background-color: rgba(0,0,0,0.1);
				}
				
				.button-scroll-down {
					position: relative;
					top: auto;
					right: auto;
					bottom: auto;
					left: auto;
					display: inline;
					vertical-align: text-top;
					line-height: 140%;
					padding-top: 0;
					pointer-events: auto;
					transform: none;
					z-index: 10;
					pointer-events: none;
					@media only screen and (max-width: 1199px) {
						bottom: 60px;
					}
					@media only screen and (max-width: 901px) {
						display: none;
					}
					
					span {
						width: 12px !important;
						height: 12px;
						margin-left: 0;
						border-left: 3px solid #fff;
						border-bottom: 3px solid #fff;
						transform: rotate(-135deg); 
						animation: none;
						transition: transform 300ms ease-in-out, margin 300ms ease-in-out;
					}
					
					&.rotate span {
						margin-left: 6px;
						transform: rotate(-45deg); 
					}
				}
			}
			
			.content_after {
				display: none;
			}
		}
		
		.city-navigation-wrapper {
			@media only screen and (max-width: 768px) {
				display: none;
				top: 18%;
			}
			
			#city-nav {
				width: 230px;
				@media only screen and (max-width: 1024px) {
					width: 180px;
				}

				li {
					padding: 0;
					border: none;

					a {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 35px;
						padding: 7px 0;
						text-align: left;
						text-decoration: none;
						transition: none;
						@media only screen and (max-width: 1200px) {
							height: 30px;
							padding: 3px 0;
						}
						@media only screen and (max-width: 768px) {
							height: 25px;
						}

						&:hover {
							font-weight: normal;
							font-size: inherit;
						}

						span.number {
							display: inline-block;
							width: 55px;
							min-width: 55px;
							text-align: center;
							@media only screen and (max-width: 901px) {
								width: 25px;
								min-width: 25px;
							}
						}

						span.title {
							visibility: hidden;
							text-align: right;
							font-size: 12px;
							opacity: 0;
							transition: opacity 200ms ease-in-out;

							@media only screen and (max-width: 901px) {
								display: none;
							}
						}
					}

					&.current {
						font-weight: normal;
						font-size: inherit;

						a span.title {
							visibility: visible;
							opacity: 1;

							@media only screen and (max-width: 901px) {
								display: none;
							}
						}

						@media only screen and (max-width: 901px) {
							a {
								font-weight: 800;
								font-size: 20px !important;
							}
						}
					}

					&:after {
						content: "";
						display: block;
						border-bottom: 1px solid #fff;
						width: 55px;
						transition: width 300ms ease-in-out;

						@media only screen and (max-width: 901px) {
							width: 100%;
						}
					}

					&:hover {
						&:after {
							width: 100%;
						}

						span.title {
							visibility: visible;
							opacity: 1;

							@media only screen and (max-width: 901px) {
								display: none;
							}
						}
					}

					&.current:after {
						width: 100%;
					}
				}
			}
		}
		
		.contact_form_section {
			.position_title {
				position: relative;
				top: 0;
			}
		}
		
		.section_content {
			@media only screen and (max-width: 901px) {
				margin-bottom: 100px;
			}
			
			.form-container {
				background-color: #fff;
				padding: 30px 25px;
				padding-bottom: 10px;
				width: 500px;
				margin: 0 auto;
				height: auto;
				max-height: 100vh;
				overflow-y: scroll;
				@media (max-width: 992px) {
					width: auto;
					padding: 20px;
					padding-bottom: 10px;
				}
				@media (max-width: 450px) {
					padding: 20px !important;
				}
			
				h2 {
					color: #000;
					margin: 0;
					font-size: 32px;
					font-family: var(--tl-header-font);
					font-weight: 800;
					font-variation-settings: 'wght' 800;
					margin-bottom: 25px;
				
					@media (max-width:992px) {
						margin-bottom: 15px;
					}
				
					@media (max-width:450px) {
						color: #000;
						margin: 0;
						font-size: 24px !important;
						font-family: var(--tl-header-font);
						font-weight: 800;
						font-variation-settings: 'wght' 800;
						margin-top: 90px !important;
						margin-bottom: 15px;
					}
				}
			
				p {
					color: #000;
				
					span {
						a {
							color: #fff;
						}
					}
				}
				
				.form-row {
					p {
						.wpcf7-not-valid-tip {
              margin-top: -7px;
              margin-bottom: 10px;
							font-size: 14px;
              font-weight: 400;
              font-variation-settings: 'wght' 400;
						}
					}
				}
			
				.form-row-checkbox {
					.wpcf7-list-item {
						margin-left: 0;
					}
				
					input[type="checkbox"] {
						width: auto !important;
						-webkit-appearance: auto;
					}
				}
			}
			
			.content {
				p {
					font-size: 14px;
				}
			}
		}
		
		.section_content:has(.form-container) {
			z-index: 1000 !important;
		}
		
		.form-row {
			&.interested {
				h3 {
					font-weight: 400;
					font-variation-settings: 'wght' 400;
				}
			}
		}
		
		.scroll-down {
			display: none;
			right: 0px;
			bottom: 55px;
			
			.scroll-down__inner--scroll_text {
				color: #fff;
			}
		}
	}
}