.contact {
	padding: 4rem 0;

  h2 {
    text-align: center;
    font-size: 200%;
    color: var(--l);
    padding-bottom: 1rem;
  }

  .subheading {
    color: var(--l);
    text-align: center;
    font-size: 130%;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2rem;
  }

	.faq {
		padding: 3rem;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.363);
		backdrop-filter: blur(5px);
		border-radius: 10px;
		color: var(--l);
		border-top: 1px solid rgba(255, 255, 255, 0.459);
		border-left: 1px solid rgba(255, 255, 255, 0.459);

		h2 {
			padding-bottom: 2rem;
			font-size: 200%;
		}

		.content {
			width: 100%;
			height: fit-content;

			.set {
				width: 100%;
				height: fit-content;

				.question {
					width: 100%;
					font-size: 100%;
					text-transform: capitalize;
					font-weight: 600;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: var(--l);
					border-bottom: 2px solid var(--l);
					padding: 1rem;

					.btn {
						flex-shrink: 0;
						width: 40px;
						height: 40px;
						transition: all 0.2s ease-out;

						img {
							object-fit: contain;
							width: 100%;
							height: 100%;
						}
					}

					.btn.rotate {
						rotate: 180deg;
					}
				}

				.answer {
					background-color: var(--b);
					color: var(--l);
					text-transform: capitalize;
					max-height: 0;
					overflow: hidden;
					transition: all 0.2s ease-out;
				}

				.answer.active {
					max-height: fit-content;
					padding: 1rem;
					overflow: auto;
				}
			}
		}
	}

	form {
		background-color: var(--b);
		padding: 1rem;
		border-radius: 10px;
    height: fit-content;
    margin-bottom: 1rem;

		h3 {
			font-size: 200%;
			color: var(--l);
			padding-bottom: 0.5rem;
		}

		p {
			padding-bottom: 1rem;
			color: var(--l);
		}

    label {
      color: var(--l);
    }

		input,
		textarea {
			width: 100%;
			padding: 0.5rem;
			margin-bottom: 0.5rem;
		}

		textarea {
			resize: none;
			overflow: auto;
		}

		button {
			width: 100%;
			padding: 0.5rem;
			text-align: center;
			background-image: var(--y);
			color: var(--d);
			font-weight: 700;
			transition: all 0.1s ease-out;
			margin-left: auto;
			margin-right: auto;
			text-decoration: underline 3px;

			&:hover {
				border-bottom: 5px solid var(--l);
				translate: 0 -5px;
			}
		}
	}
}

@media (min-width: 768px) {
	.contact {
		.contactBox {
			display: flex;
			justify-content: space-evenly;
			gap: 1rem;

      form {
        margin-bottom: 0rem;
      }
		}
	}
}