/**
 * Homepage About section styles.
 */

.vj-about {
	position: relative;
	overflow: hidden;
	z-index: var(--z-base);
	background-color: var(--surface-brand-emphasis);
	padding-block: var(--padding-section);
}

.vj-about::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('../../../assets/images/tour-bg.webp');
	background-position: 0 bottom;
	background-repeat: repeat-x;
	background-size: auto;
	opacity: 0.90;
	filter: brightness(0) invert(1);
	z-index: 1;
	animation: vjSlideLeft 100s linear infinite;
	pointer-events: none;
}

@keyframes vjSlideLeft {
	0% {
		background-position: 0 bottom;
	}
	100% {
		background-position: -1846px bottom;
	}
}

.vj-about .container {
	position: relative;
	z-index: 2;
}

.vj-about__shape {
	position: absolute;
	z-index: 1;
	opacity: 0.6;
}

@media screen and (max-width: 1199.98px) {
	.vj-about__shape {
		display: none;
	}
}

.vj-about__shape--one {
	top: 115px;
	left: 118px;
}

@media (max-width: 1650px) {
	.vj-about__shape--one {
		top: 85px;
		left: 60px;
	}
}

.vj-about__shape--two {
	right: 157px;
	top: 110px;
}

@media (max-width: 1650px) {
	.vj-about__shape--two {
		right: 75px;
	}
}

.vj-about__header {
	margin-bottom: var(--margin-2xl);
}

.vj-about__sub-title {
	display: block;
	color: var(--color-brand-secondary);
	font-family: var(--font-family-accent);
	font-size: var(--fs-3xl);
	text-align: center;
}

.vj-about__title {
	color: var(--color-text-inverse);
	font-family: var(--font-family-primary);
	font-size: var(--fs-3xl);
	text-align: center;
}

.vj-about__body {
	margin-top: var(--margin-2xl);
}

.vj-about__image-wrapper {
	margin-bottom: var(--margin-xl);
}

@media (min-width: 1200px) {
	.vj-about__image-wrapper {
		margin-bottom: 0;
	}
}

.vj-about__image-wrapper img {
	border-radius: var(--radius-lg);
	width: 100%;
	height: auto;
	object-fit: cover;
}

.vj-about__content {
	padding-left: var(--padding-xl);
}

@media screen and (max-width: 1199.98px) {
	.vj-about__content {
		padding-left: 0;
	}
}

.vj-about__text-box {
 
}

.vj-about__text {
	margin-bottom: var(--margin-xl);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-inverse);
}

@media (max-width: 1650px) {
	.vj-about__text {
		margin-bottom: var(--margin-lg);
	}
}

.vj-about__btn-wrapper {
	margin-top: var(--margin-lg);
}

.vj-icon-box {
	padding: var(--padding-lg) var(--padding-lg);
	border-radius: var(--radius-lg);
	/* Specific stylistic requirement from design */
	border: 1px solid var(--surface-grey-default);
	transition: background-color var(--transition-base), border-color var(--transition-base);
	height: 100%;
}

@media (max-width: 1650px) {
	.vj-icon-box {
		padding: var(--padding-lg) var(--padding-md);
	}
}

.vj-icon-box:hover {
	background-color: var(--surface-grey-subtle);
	border-color: var(--border-brand-emphasis);
}

.vj-icon-box__icon {
	margin-bottom: var(--margin-lg);
	color: var(--color-brand-secondary);
}

.vj-icon-box__icon svg {
	width: 50px;
	height: 50px;
}

.vj-icon-box__title {
	color: var(--color-text-inverse);
	margin-bottom: var(--margin-md);
	font-family: var(--font-family-body);
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);
	transition: color var(--transition-base);
}

.vj-icon-box:hover .vj-icon-box__title {
	color: var(--color-brand-primary);
	font-weight: var(--fw-bold);
}

.vj-icon-box__text {
	color: var(--color-text-inverse);
	line-height: var(--line-height-relaxed);
	transition: color var(--transition-base);
}

.vj-icon-box:hover .vj-icon-box__text {
	color: var(--color-text-canvas-muted);
}

.vj-icon-left-box {
	display: flex;
	align-items: center;
	margin-bottom: var(--margin-lg);
}

.vj-icon-left-box__icon {
	flex: 0 0 auto;
	color: var(--color-brand-secondary);
	margin-right: var(--gap-inline-lg);
}

.vj-icon-left-box__icon svg {
	width: 50px;
	height: 50px;
}

.vj-icon-left-box__title {
	color: var(--color-text-inverse);
	font-family: var(--font-family-body);
	font-size: var(--type-h6);
	margin: 0;
}