@use "../utilities" as *;

/* START: Faq CSS */
.h7-faq {
	&-style {
		border: 1px solid var(--tj-color-border-2);
		.accordion-item {
			margin-bottom: 0;

			.accordion-header {
				.accordion-button {
					border: 0;
					padding: 34px 80px 34px 30px;

					@media #{$sm,$xs} {
						padding: 24px 60px 24px 15px;
						font-size: 16px;
					}
					span {
						color: var(--tj-color-common-black-2);
						margin-inline-end: 5px;
					}
					&::before {
						content: "\e905";
						font-family: "solvior-icons";
						border: 1px solid var(--tj-color-border-2);
						height: 36px;
						width: 36px;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						line-height: 1;
						font-size: 22px;
						inset-inline-end: 30px;
						@media #{$sm,$xs} {
							height: 30px;
							width: 30px;
							line-height: 1;
							font-size: 19px;
							inset-inline-end: 15px;
						}
					}

					&.collapsed {
						border: 0;
						border-top: 1px solid var(--tj-color-border-2);
					}
					&:not(.collapsed) {
						box-shadow: none;
						color: var(--tj-color-theme-primary);
						border-color: var(--tj-color-theme-bg);
						span {
							color: var(--tj-color-theme-primary);
						}
						&:before {
							content: "\e904";
							color: var(--tj-color-common-white);
							border-color: var(--tj-color-theme-primary);
							background-color: var(--tj-color-theme-primary);
						}
					}
				}
			}
			&:first-child {
				.accordion-button {
					&.collapsed {
						border-top: 0;
					}
				}
			}
			&:not(:has(.collapsed)) + .accordion-item {
				.accordion-button {
					&.collapsed {
						border-color: var(--tj-color-theme-bg);
					}
				}
			}
		}
		.accordion-button {
			align-items: flex-start;
		}
	}

	.faq-banner {
		position: relative;
		z-index: 0;
		@media #{$md,$sm,$xs} {
			bottom: 40px;
		}
		img {
			width: 100%;
		}

		@media #{$md} {
			img {
				max-height: 600px;
				object-fit: cover;
			}
		}

		&::after {
			content: " ";
			width: 100%;
			height: 40%;
			background: linear-gradient(180deg, rgba(5, 18, 41, 0) 0%, #051229 84%);

			position: absolute;
			inset-inline-start: 0;
			top: 0;
			transition: all 0.4s 0.3s;
			transform: scaleY(-1);
			z-index: 1;
		}
	}
	.sec-heading {
		position: absolute;
		inset-inline-start: 30px;
		inset-inline-end: 30px;
		top: 30px;
		z-index: 2;
		.sec-title {
			color: var(--tj-color-common-white);
		}
	}
}

/* !END: Faq CSS */