/* Page-template - Contact 3.0 */

.page-template-contact-3-0 {
	.page-wrapper {
		.header {
			.background-image {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				@media only screen and (max-width: 768px) {
					position: relative;
				}
				
				img {
					width: 100%;
					height: 100vh;
					object-fit: cover;
					@media only screen and (max-width: 768px) {
						height: 280px;
					}
				}
			}
			
			.form {
				display: flex;
				justify-content: center;
				position: relative;
				padding-top: 30vh;
				@media only screen and (max-width: 1024px) {
					padding-top: 10vh;
			    padding-left: 20px;
			    padding-right: 20px;
				}
				@media only screen and (max-width: 768px) {
					padding-top: 20px;
			    padding-left: 0;
			    padding-right: 0;
				}
				
				.inner {
					width: fit-content;
					
					.wpcf7 {
						padding: 60px;
						@media only screen and (max-width: 768px) {
							padding: 20px;
						}
					}
				}
			}
		}
		
		.faq-wrap {
			max-width: 1100px;
			margin: 0 auto;
			padding: 0 40px;
			font-family: var(--tl-general-font);
			line-height: 1.6;

			.faq {
				border-top: 1px solid #000;
			}

			.faq-item {
				border-bottom: 1px solid #000;

				.faq-q {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 24px;

					background: transparent;
					border: 0;
					padding: 26px 0;
					text-align: left;
					cursor: pointer;

					font-size: 28px;
					line-height: 1.15;
					font-weight: 700;
					color: #000;
					transition: opacity 500ms ease;

					.faq-q-text {
						display: inline-block;
						font-family: var(--tl-general-font);
						font-size: 16px;
					}

					.faq-icon {
						flex: 0 0 auto;
						width: 28px;
						height: 28px;
						display: grid;
						place-items: center;
						font-weight: 400;
						font-size: 28px;
						line-height: 1;
						user-select: none;
						transform: translateY(-1px);
					}
					
					&:focus {
						outline: none;
					}
					
					&:hover {
						opacity: 500ms;
					}
				}

				.faq-a {
					display: none;
					padding: 0 0 26px 0;
					text-align: left;
					
					p {
						margin: 0 0 12px 0;

						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}

			@media (max-width: 900px) {
				padding: 0 20px;

				.faq-item {
					.faq-q {
						font-size: 22px;
						padding: 20px 0;

						.faq-icon {
							width: 24px;
							height: 24px;
							font-size: 24px;
						}
					}

					.faq-a {
						font-size: 16px;
					}
				}
			}
		}
		
		.section-faq {
			padding: 80px 0 120px 0;
			@media only screen and (max-width: 1024px) {
				padding: 60px 0 100px 0;
			}
			@media only screen and (max-width: 768px) {
				padding: 40px 0 60px 0;
			}
		}
	}
}