/*! public/css/home/about.css */

.image-wraper {
	padding-top: 5rem;
	padding-inline-end: 5rem;
}

.about-col-1 img {
	width: min(100%, 600px);
	height: auto;
	display: inline-block;
	filter: drop-shadow(var(--shadow-mascot));
}

[dir='rtl'] #about img {
	transform: scaleX(-1);
}

.about-intro p {
	margin-bottom: 1rem;
	line-height: 1.8;
	color: var(--color-text-body);
}

.about-intro p:last-child {
	margin-bottom: 0;
}

.about-intro p:first-child {
	font-size: 1.05rem;
	color: var(--color-text-heading);
}

.about-intro p {
	text-indent: 1.5rem;
}

#about .nav-tabs {
	border-bottom: none;
	gap: 0.75rem;
}

#about .nav-tabs .nav-link {
	border: none;
	border-radius: var(--radius-pill);
	padding: 0.65rem 1.1rem;
	font-weight: 600;
	color: var(--color-text-body);
	background: transparent;
	transition:
		color var(--transition-time-method),
		background-color var(--transition-time-method),
		box-shadow var(--transition-time-method),
		transform var(--transition-time-method);
}

#about .nav-tabs .nav-link:hover {
	color: var(--color-primary);
	background: var(--bg-pill-hover);
	transform: translateY(-1px);
}

#about .nav-tabs .nav-link.active {
	color: var(--color-text-inverse);
	background: linear-gradient(
		135deg,
		var(--color-secondary),
		var(--color-secondary-hover)
	);
	box-shadow: var(--shadow-brand);
}

#about .tab-content {
	margin-top: 1.5rem;
}

#about .tab-pane {
	padding-top: 0.5rem;
}

.about-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1rem;
	color: var(--color-text-muted);
	transition: color var(--transition-time-method);
}

.about-list li > span {
	display: inline-block;
	margin-bottom: 0.35rem;
	font-weight: 700;
	color: var(--color-primary);
}

.about-meta {
	font-style: italic;
	color: var(--color-text-muted);
	transition: color var(--transition-time-method);
}

.div-2:hover .about-meta {
	color: var(--color-text-muted);
}

.about-list a {
	color: var(--color-secondary);
	text-decoration-color: transparent;
	font-weight: 500;
	word-break: break-word;
	transition:
		color var(--transition-time-method),
		text-decoration-color var(--transition-time-method);
}

.about-list a:hover {
	color: var(--color-secondary-hover);
	text-decoration-color: var(--color-secondary-hover);
}

@media (max-width: 991.98px) {
	.image-wraper {
		padding-inline-end: 0;
	}
	.about-background {
		padding: 1.5rem;
	}

	#about .nav-tabs {
		justify-content: center;
	}

	.about-col-1 {
		margin-bottom: 1rem;
	}
}