.faq_box {
	.faqQuestion {
		position: relative;
		background: #fff;
		padding: 10px 0 10px 10px;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
		border-radius: 0.5em;
		overflow: hidden;

		input {
		    all: unset;
			appearance: none;

			&:before {
			    all: unset;
			}
		}

		label {
			display: flex;
			align-items: center;
			cursor: pointer;
			position: unset;

			h2 {
				width: 40px;
				height: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 1.25em;
				border-radius: 5px;
				margin: 0;
				margin-right: 10px;
				background-color: navy;
				background: linear-gradient(135deg, #3da1fc, #aed7fc);
			}

			h3 {
				position: relative;
				font-weight: 500;
				color: #333;
				z-index: 10;
			}
		}

		label:after {
			content: '+';
			position: absolute;
			right: 20px;
			font-size: 4em;
			color: rgba(0, 0, 0, 0.1);
			transition: transform 1s;
		}

        &:hover label:after {
			color: #333;
		}

		.faqAnswer {
			max-height: 0;
			overflow: hidden;
			transition: 1s;

			p {
				position: relative;
				padding-inline: 10px;
				padding-top: 10px;
				color: #333;
				z-index: 10;
			}
		}

		input:checked ~ label:after {
			transform: rotate(135deg);
			color: white;
		}

		input:checked ~ label h2 {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: rgba(255, 255, 255, 0.2);
			font-size: 8em;
			justify-content: flex-end;
			padding: 20px;
		}

		input:checked ~ label h3 {
			padding: 0.5em;
			background-color: white;
			border-radius: 0.5em;
		}

		input:checked ~ .faqAnswer {
			max-height: 100vh;

			p {
				color: white;
			}
		}
	}
}