/* ==========================================================
   AA GROUP HUB — LEADERSHIP TIMELINE
========================================================== */

.aahb-leadership-timeline {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 0;
}


/* ==========================================================
   CENTER LINE
========================================================== */

.aahb-leadership-line {
	position: absolute;

	top: 0;
	bottom: 0;

	left: 50%;

	width: 3px;

	transform: translateX(-50%);

	background: #E3E8EF;

	border-radius: 20px;

	overflow: hidden;

	z-index: 1;
}


.aahb-leadership-line-progress {

	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 0;

	background: #1464F4;

	border-radius: inherit;

	transition: height .15s linear;
}


/* ==========================================================
   TIMELINE ITEM
========================================================== */

.aahb-leadership-item {

	position: relative;

	display: flex;

	width: 100%;

	margin-bottom: 75px;

	z-index: 2;
}


.aahb-leadership-item:last-child {

	margin-bottom: 0;
}


/* LEFT */

.aahb-position-left {

	justify-content: flex-start;

	padding-right:
		calc(50% + 55px);
}


/* RIGHT */

.aahb-position-right {

	justify-content: flex-end;

	padding-left:
		calc(50% + 55px);
}


/* ==========================================================
   DOT
========================================================== */

.aahb-leadership-dot {

	position: absolute;

	left: 50%;
	top: 70px;

	width: 20px;
	height: 20px;

	transform:
		translateX(-50%);

	background: #FFFFFF;

	border:
		4px solid #1464F4;

	border-radius: 50%;

	z-index: 5;

	transition:
		background .3s ease,
		transform .3s ease,
		box-shadow .3s ease;
}


.aahb-leadership-item.is-active
.aahb-leadership-dot {

	background: #1464F4;

	box-shadow:
		0 0 0 7px
		rgba(20, 100, 244, .10);
}


.aahb-leadership-item:hover
.aahb-leadership-dot {

	transform:
		translateX(-50%)
		scale(1.15);
}


/* ==========================================================
   CONNECTOR
========================================================== */

.aahb-leadership-connector {

	position: absolute;

	top: 79px;

	height: 2px;

	width: 55px;

	background: #1464F4;

	z-index: 3;
}


.aahb-position-left
.aahb-leadership-connector {

	right: 50%;
}


.aahb-position-right
.aahb-leadership-connector {

	left: 50%;
}


/* ==========================================================
   CARD
========================================================== */

.aahb-leadership-card {

	position: relative;

	width: 100%;

	background: #FFFFFF;

	border:
		1px solid #EAECF0;

	border-radius: 18px;

	padding: 28px;

	box-shadow:
		0 10px 35px
		rgba(16, 24, 40, .08);

	overflow: hidden;

	transition:
		transform .35s ease,
		box-shadow .35s ease,
		border-color .35s ease;
}


.aahb-leadership-card:hover {

	transform:
		translateY(-7px);

	border-color:
		rgba(20, 100, 244, .30);

	box-shadow:
		0 20px 55px
		rgba(16, 24, 40, .14);
}


/* ==========================================================
   PHOTO
========================================================== */

.aahb-leadership-photo {

	position: relative;

	width: 100%;

	height: 260px;

	margin-bottom: 24px;

	border-radius: 13px;

	overflow: hidden;

	background: #F2F4F7;
}


.aahb-leadership-photo img {

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	object-position: center;

	transition:
		transform .5s ease;
}


.aahb-leadership-card:hover
.aahb-leadership-photo img {

	transform: scale(1.045);
}


/* ==========================================================
   MEMBER TYPE
========================================================== */

.aahb-leadership-member-type {

	display: inline-flex;

	align-items: center;

	padding:
		5px 11px;

	margin-bottom: 11px;

	background:
		rgba(20, 100, 244, .08);

	border-radius: 100px;

	color: #1464F4;

	font-size: 12px;

	font-weight: 700;

	letter-spacing: .02em;

	text-transform: uppercase;
}


/* ==========================================================
   NAME
========================================================== */

.aahb-leadership-name {

	margin:
		0 0 6px;

	color: #141B2D;

	font-size: 25px;

	font-weight: 700;

	line-height: 1.3;
}


/* ==========================================================
   DESIGNATION
========================================================== */

.aahb-leadership-designation {

	margin-bottom: 6px;

	color: #1464F4;

	font-size: 16px;

	font-weight: 600;

	line-height: 1.45;
}


/* ==========================================================
   YEAR
========================================================== */

.aahb-leadership-year {

	margin-bottom: 17px;

	color: #1464F4;

	font-size: 14px;

	font-weight: 600;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.aahb-leadership-description {

	margin-bottom: 23px;

	color: #667085;

	font-size: 15px;

	line-height: 1.75;
}


/* ==========================================================
   CARD FOOTER
========================================================== */

.aahb-leadership-footer {

	display: flex;

	align-items: center;

	justify-content:
		space-between;

	gap: 18px;

	flex-wrap: wrap;
}


/* ==========================================================
   DETAILS BUTTON
========================================================== */

.aahb-leadership-button {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 9px;

	padding:
		11px 19px;

	border: 0;

	border-radius: 8px;

	background: #1464F4;

	color: #FFFFFF;

	font-size: 14px;

	font-weight: 600;

	line-height: 1;

	text-decoration: none;

	cursor: pointer;

	transition:
		background .25s ease,
		transform .25s ease,
		box-shadow .25s ease;
}


.aahb-leadership-button:hover {

	background: #0C4FCB;

	color: #FFFFFF;

	transform:
		translateY(-2px);

	box-shadow:
		0 8px 20px
		rgba(20, 100, 244, .20);
}


.aahb-leadership-button span {

	transition:
		transform .25s ease;
}


.aahb-leadership-button:hover span {

	transform:
		translateX(3px);
}


/* ==========================================================
   SOCIALS
========================================================== */

.aahb-social-links {

	display: flex;

	align-items: center;

	gap: 8px;

	flex-wrap: wrap;
}


.aahb-social-link {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 36px;
	height: 36px;

	border-radius: 50%;

	background: #F2F4F7;

	color: #475467;

	text-decoration: none;

	font-size: 15px;

	transition:
		background .25s ease,
		color .25s ease,
		transform .25s ease;
}


.aahb-social-link:hover {

	background: #1464F4;

	color: #FFFFFF;

	transform:
		translateY(-3px);
}


/* ==========================================================
   POPUP
========================================================== */

.aahb-leadership-modal {

	display: none;

	position: fixed;

	inset: 0;

	z-index: 999999;

	padding: 24px;

	align-items: center;

	justify-content: center;
}


.aahb-leadership-modal.is-open {

	display: flex;
}


.aahb-leadership-modal-overlay {

	position: absolute;

	inset: 0;

	background:
		rgba(9, 15, 28, .74);

	backdrop-filter:
		blur(5px);
}


.aahb-leadership-modal-dialog {
	position: relative;
	z-index: 2;

	width: 100%;
	max-width: 950px;
	max-height: 90vh;

	overflow-y: auto;

	padding: 40px;

	background: #ffffff;
	border-radius: 20px;

	box-shadow:
		0 35px 90px rgba(0, 0, 0, .30);

	animation:
		aahbLeadershipModal .28s ease;
}


@keyframes aahbLeadershipModal {

	from {

		opacity: 0;

		transform:
			translateY(25px)
			scale(.98);
	}

	to {

		opacity: 1;

		transform:
			translateY(0)
			scale(1);
	}
}


.aahb-leadership-modal-close {

	position: absolute;

	top: 16px;
	right: 16px;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 42px;
	height: 42px;

	border: none;

	border-radius: 50%;

	background: #F2F4F7;

	color: #344054;

	font-size: 27px;

	line-height: 1;

	cursor: pointer;

	transition:
		background .25s ease,
		color .25s ease,
		transform .25s ease;
}


.aahb-leadership-modal-close:hover {

	background: #1464F4;

	color: #FFFFFF;

	transform: rotate(90deg);
}


.aahb-leadership-modal-grid {
	display: grid;

	grid-template-columns:
		minmax(280px, 320px)
		minmax(0, 1fr);

	gap: 36px;

	align-items: start;
}


.aahb-leadership-modal-image {
	width: 100%;
	max-width: 320px;
	height: auto;

	display: flex;
	align-items: flex-start;
	justify-content: center;

	background: #f2f4f7;

	border-radius: 16px;
	overflow: hidden;
}

.aahb-leadership-modal-image img {
	display: block;

	width: 100%;
	height: auto;

	max-width: 100%;
	max-height: none;

	object-fit: contain;
	object-position: center top;

	border-radius: 16px;
}


.aahb-leadership-modal-content h3 {

	margin:
		0 45px 6px 0;

	color: #141B2D;

	font-size: 31px;

	font-weight: 700;

	line-height: 1.25;
}


.aahb-leadership-modal-designation {

	margin-bottom: 7px;

	color: #1464F4;

	font-size: 17px;

	font-weight: 600;
}


.aahb-leadership-modal-meta {

	margin-bottom: 22px;

	color: #667085;

	font-size: 14px;
}


.aahb-leadership-modal-bio {

	margin-bottom: 25px;

	color: #475467;

	font-size: 15px;

	line-height: 1.8;
}


/* ==========================================================
   BODY LOCK
========================================================== */

body.aahb-leadership-modal-active {

	overflow: hidden;
}


/* ==========================================================
   TABLET
========================================================== */

@media
(max-width: 1024px) {

	.aahb-leadership-line {

		left: 27px;
	}


	.aahb-position-left,
	.aahb-position-right {

		justify-content:
			flex-start;

		padding-left:
			82px;

		padding-right: 0;
	}


	.aahb-leadership-dot {

		left: 27px;
	}


	.aahb-position-left
	.aahb-leadership-connector,

	.aahb-position-right
	.aahb-leadership-connector {

		left: 27px;

		right: auto;

		width: 55px;
	}
}


/* ==========================================================
   MOBILE
========================================================== */

@media
(max-width: 767px) {

	.aahb-leadership-timeline {

		padding:
			10px 0;
	}


	.aahb-leadership-line {

		left: 14px;
	}


	.aahb-position-left,
	.aahb-position-right {

		padding-left:
			48px;
	}


	.aahb-leadership-item {

		margin-bottom:
			45px;
	}


	.aahb-leadership-dot {

		left: 14px;

		top: 50px;

		width: 17px;

		height: 17px;

		border-width: 3px;
	}


	.aahb-position-left
	.aahb-leadership-connector,

	.aahb-position-right
	.aahb-leadership-connector {

		left: 14px;

		top: 58px;

		width: 34px;
	}


	.aahb-leadership-card {

		padding: 20px;
	}


	.aahb-leadership-photo {

		height: 230px;

		margin-bottom: 20px;
	}


	.aahb-leadership-name {

		font-size: 21px;
	}


	.aahb-leadership-footer {

		flex-direction: column;

		align-items: flex-start;
	}


	.aahb-leadership-modal {

		padding: 12px;
	}


	.aahb-leadership-modal-dialog {

		padding:
			55px 22px 25px;
	}


.aahb-leadership-modal-grid {
	grid-template-columns: 1fr;
	gap: 24px;
}

.aahb-leadership-modal-image {
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.aahb-leadership-modal-image img {
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
	object-position: center top;
}
}