/* Mobile-first styles (default) - Extra small devices (phones, less than 576px) */
.about-page-container {
	height: 100%;
	min-height: fit-content;
	background-color: var(--white-primary);
	padding: 50px var(--spacing-sm) 0 var(--spacing-sm);
	gap: 2rem;
}

.about-layout {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl);
}

.about-left {
	width: 100%;
}

.about-right {
	width: 100%;
	height: 100%;
}

.about-section {
	align-items: flex-start;
}

#primary > div > div > div.about-section > div.management-team.col-12.col-lg-6 > div:nth-child(1) > div.manager-image {
	transform: translateX(7%);
}

.about-page-title {
	width: 100%;
	font-family: var(--font-family-primary);
	font-size: 28px;
	font-weight: 700;
	font-style: bold;
	line-height: 110.00000000000001%;
	letter-spacing: -1%;
	text-align: left;
	background: var(--dark-to-light-violet-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: var(--spacing-md);
}

.about-text p {
	font-family: var(--font-family-primary);
	font-size: 0.85rem;
	line-height: 150%;
	color: var(--primary-violet-dark);
	font-weight: 500;
	letter-spacing: -2%;
	margin-bottom: var(--spacing-sm);
	text-align: justify;
}

.management-team {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
}

.manager-card {
	text-align: center;
	position: relative;
	overflow: hidden;
	background: var(--grey-primary);
	border-radius: 4px;
	height: fit-content;
}

.manager-image {
	/* margin-bottom: var(--spacing-sm); */
	position: relative;
	overflow: hidden;
	border-radius: 0;
	cursor: pointer;
}

.manager-image img {
	width: 100%;
	max-width: 120px;
	height: 150px;
	border-radius: 0;
	object-fit: contain;
	object-position: center center;
	margin: 0 auto;
	display: block;
}

.manager-info {
	text-align: center;
}

.manager-name {
	font-family: var(--font-family-primary);
	font-size: 14px;
	font-weight: 700;
	color: var(--primary-violet-dark);
	text-wrap: nowrap;
}

.manager-role {
	font-family: var(--font-family-primary);
	font-size: 12px;
	color: var(--primary-violet-dark);
	margin: 0;
}

/* LinkedIn Hover Bar */
.linkedin-hover-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(0deg, rgba(43, 5, 72, 0.6), rgba(43, 5, 72, 0.6)), linear-gradient(0deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04));
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transform: translateY(100%);
	height: 40px;
	border: 1px solid;
	border-image-source: linear-gradient(263.25deg, rgba(255, 255, 255, 0) 2.18%, #8a38f5 97.82%);
	backdrop-filter: blur(20px);
}

@media (max-width: 576px) {
	.front-page-contact-wrapper {
		margin-bottom: 3.125rem;
	}
}

/* Hover effect tylko na desktopach */
@media (min-width: 992px) {
	.manager-card:hover .linkedin-hover-bar {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

/* Active class dla mobile toggle */
.linkedin-hover-bar.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.linkedin-hover-bar a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.linkedin-icon-wrapper {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.linkedin-icon {
	width: 20px;
	height: 20px;
	filter: brightness(0) invert(1);
	transition: transform 0.2s ease-in-out;
	display: inline-block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.about-page-container {
		padding-top: 3.125rem;
	}

	/* Reset margin-top na większych ekranach */
	.about-us-contact-section {
		margin-top: 0;
	}
}

.about-page-title {
	font-size: 32px;
}

.about-text p {
	font-size: 0.9rem;
	margin-bottom: var(--spacing-md);
	color: var(--primary-violet-dark);
}

.management-team {
	flex-direction: row;
}

.manager-card {
	margin-bottom: var(--spacing-lg);
}

.manager-image img {
	max-width: 250px;
}

.manager-name {
	font-size: 14px;
}

.manager-role {
	font-size: 0.8rem;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.about-page-container {
		/* height: 100vh; */
		padding-top: 70px;
	}

	.about-section {
		margin: 2.5rem 0;
	}

	.about-page-title {
		font-size: 48px;
	}

	.about-text p {
		font-size: 18px;
		margin-bottom: var(--spacing-lg);
		text-align: left;
		font-weight: 500;
		color: var(--primary-violet-dark);
	}

	.management-team {
		margin-top: 0;
		justify-content: space-between;
	}

	.manager-card {
		margin-bottom: var(--spacing-xl);
	}

	.manager-image {
		margin-bottom: var(--spacing-md);
	}

	.manager-image img {
		max-width: 300px;
	}

	.manager-name {
		font-size: 1.05rem;
	}

	.manager-role {
		font-size: 0.85rem;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.about-page-container {
		margin-top: 5rem;
		margin-bottom: 100px;
	}

	.about-us-contact-section {
		width: 100%;
		max-width: 1600px;
		/* margin: 0 auto 6rem auto; */
	}
	.linkedin-hover-bar {
		height: 80px;
	}

	.linkedin-icon-wrapper {
		width: 60px;
		height: 60px;
	}

	.linkedin-icon {
		width: 30px;
		height: 30px;
	}

	.about-layout {
		flex-direction: row;
		align-items: flex-start;
		gap: 4rem;
	}

	.about-left {
		flex: 1;
		max-width: 50%;
	}

	.about-right {
		flex: 1;
		max-width: 50%;
	}

	.about-page-title {
		font-size: 56px;
		/* margin-bottom: var(--spacing-xl); */
	}

	.about-text p {
		font-size: 1rem;
		margin-bottom: var(--spacing-lg);
		color: var(--primary-violet-dark);
	}

	.management-team {
		height: 100%;
		display: flex;
		flex-direction: row;
		gap: var(--spacing-sm);
		align-items: flex-start;
		justify-content: flex-end;
		padding-left: 1rem;
	}

	.manager-card {
		text-align: center;
		max-width: 350px;
		height: fit-content;
		transform: translateY(5%);
	}

	.manager-image img {
		height: 100%;
		max-width: 450px;
	}

	.manager-name {
		font-size: 1.1rem;
	}

	.manager-role {
		font-size: 0.9rem;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.about-page-container {
		margin-bottom: 100px;
	}
	.about-page-title {
		font-size: 64px;
	}

	.about-section {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.about-text p {
		/* width: 75%; */
		font-size: 18px;
		margin-bottom: 1rem;
		font-weight: 500;
		letter-spacing: -2%;
		color: var(--primary-violet-dark);
	}

	.manager-card {
		height: fit-content;
		margin-bottom: 0;
		padding: 0.5rem 0 1rem 0;
	}

	.manager-image img {
		width: 100%;
		height: 35vh;
		object-position: center center;
	}

	#primary > div > div > div.about-section > div.management-team.col-12.col-lg-6 > div:nth-child(1) > div.manager-image {
		transform: translateX(7%);
	}

	.manager-info {
		padding: 0 0.5rem;
	}

	.manager-name {
		font-size: 28px;
	}

	.manager-role {
		font-size: 18px;
		color: var(--primary-violet-dark);
	}
}

/* Extra extra large devices (1400px and up) */
@media (min-width: 1400px) {
	.about-page-container {
		padding: 0 2rem;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin-bottom: 100px;
	}

	.about-section {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		margin: 2.5rem 0 0 0;
	}

	.about-text {
		flex: 1;
		max-width: 50%;
		font-weight: 500;
		text-align: left;
		line-height: 150%;
		font-size: 18px;
		color: var(--primary-violet-dark);
	}

	.about-text p {
		width: 100%;
		font-size: 18px;
		font-weight: 500;
		color: var(--primary-violet-dark);
	}

	.management-team {
		flex: 1;
		width: 100%;
		justify-content: center;
		align-items: flex-start;
		margin-left: 8rem;
		gap: 1rem;
	}

	.manager-card {
		width: 100%;
		width: 550px;
	}

	.manager-image img {
		height: 40vh;
	}

	.manager-info {
		padding: 0;
	}

	.main-content-container {
		align-items: flex-start;
	}

	.manager-name {
		font-size: 30px;
	}
	.about-page-title {
		font-size: 72px;
		margin-left: 0.5rem;
		margin-bottom: 2rem;
	}

	.manager-role {
		font-size: 20px;
	}

	#primary > div > div > div.about-section > div.management-team.col-12.col-lg-6 > div:nth-child(1) > div.manager-image {
		transform: translateX(7%);
	}
}

@media (min-width: 1800px) {
	.manager-card {
		width: 100%;
	}
	.manager-image img {
		width: 100%;
		height: 30vh;
		transform: translateY(0);
	}
	
	.about-page-title {
		margin-bottom: 4rem;
	}

	.about-text p {
		line-height: 150%;
	}

	.management-team {
		gap: 1rem;
	}
}