#hero-section {
	background-image: url("pics/speech.jpg");
	background-repeat: no-repeat;
	background-position: 40% top;
	background-size: cover;
}

@keyframes tada {
	from {
		transform: scale3d(1, 1, 1);
	}

	10%,20% {
		transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
	}

	30%, 50%, 70%, 90% {
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}

	40%, 60%, 80% {
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}

	to {
		transform: scale3d(1, 1, 1);
	}
}


@keyframes tada-left {
	from {
		transform: scale3d(1, 1, 1);
	}

	10%,20% {
		transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg) translateX(-7px);
	}

	30%, 50%, 70%, 90% {
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) translateX(-7px);
	}

	40%, 60%, 80% {
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) translateX(-7px);
	}

	to {
		transform: scale3d(1, 1, 1);
	}
}

@keyframes tada-right {
	from {
		transform: scale3d(1, 1, 1);
	}

	10%,20% {
		transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg) translateX(7px);
	}

	30%, 50%, 70%, 90% {
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) translateX(7px);
	}

	40%, 60%, 80% {
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) translateX(7px);
	}

	to {
		transform: scale3d(1, 1, 1);
	}
}


.btn-engagement {
	background-color: #1fffaa;
	color: black;
	font-weight: bold;
	transition: transform 0.5s ease, background-color 0.3s ease, color 0.3s ease;
	margin-right: 10px;
}

.anim-tada-left {
	animation: tada-left 1s ease-in-out 1;
}
.anim-tada-right {
	animation: tada-right 1s ease-in-out 1;
	animation-delay: 0.085s;
}


@media (hover: hover) and (pointer: fine) {
	.btn-engagement:hover {
		background-color: #1fffaa;
		color: black;
		transform: scale(1.1);
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
		/* stronger shadow on hover */
	}
}

.btn-mp {
	background-color: #00aaee;
	color: white;
	font-weight: bold;
	transition: transform 0.5s ease, background-color 0.3s ease, color 0.3s ease;
	/* margin: 10px;  */
}

@media (hover: hover) and (pointer: fine) {
	.btn-mp:hover {
		background-color: #00aaee;
		color: white;
		transform: scale(1.1);
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
		/* stronger shadow on hover */
	}
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 60px;
}

body {
	font-family: 'Nunito', sans-serif;
}

.rounded-card {
	border-radius: 20px;
}

.text-mpblue {
	color: #00aaee;
}

.text-orange {
	color: #ff7839;
}

.text-deep-blue {
	color: #00668f;
}

.bg-mpblue {
	background-color: #00aaee;
}

.bg-mpdark {
	background-color: #355b6a;
}

footer a {
	color: white;
	transition: color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
	footer a:hover {
		color: #00aaee;
	}
}

main {
	padding-top: 60px;
}

.carousel-wrapper {
	scroll-behavior: smooth;
}

.navbar .nav-link {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

/* Base nav links (non-social and social) */
.navbar .nav-link {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

/* Active + hover for all nav links */
.navbar .nav-link.active {
	color: #00aaee;
	font-weight: bold;
}

@media (hover: hover) and (pointer: fine) {
	.navbar .nav-link:hover {
		color: #000;
		font-weight: bold;
	}
}

/* OVERRIDES: social links inside the navbar */
.navbar .social .nav-link {
	color: gray;
	text-decoration: none;
	font-weight: 400;
	/* prevent bolding from base rules */
	transition: color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
	.navbar .social .nav-link:hover {
		color: #00aaee;
		/* your intended hover color */
		text-decoration: none;
		font-weight: 400;
		/* keep non-bold on hover */
	}
}

.navbar .nav-link::after {
	content: attr(data-label);
	font-weight: 700;
	visibility: hidden;
	display: block;
	height: 0;
	overflow: hidden;
}

.navbar .social a {
	color: gray;
	text-decoration: none;
	transition: color 0.3s ease;
}

.social a {
	text-decoration: none;
	transition: color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
	.social a:hover {
		color: #00aaee;
		text-decoration: none;
	}
}

.img-thumb {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.img-thumb::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.15);
	pointer-events: none;
}

.play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 40px;
	color: white;
	transform: translate(-50%, -50%);
	pointer-events: none;
	opacity: 1;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 1);
}

.video-title-overlay {
	position: absolute;
	left: 50%;
	top: calc(50% + 26px);
	transform: translateX(-50%);
	color: white;
	font-size: 1.4rem;
	font-weight: 700;
	opacity: 1;
	pointer-events: none;
	text-align: center;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 1);
}

.card-expand {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
}

.card-expand:hover {
	transform: scale(1.03);
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .25);
}