/* =========================================================
   TRAINING SECTION
========================================================= */

.training-section {
	padding: 55px 0 70px;
}


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

.training-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--bs-white);
	border: 1px solid var(--cs-border);
	border-radius: 18px;
	overflow: hidden;
	box-shadow:
		0 5px 18px rgba(15, 35, 65, .06);
	transition:
		transform .25s ease,
		box-shadow .25s ease;
}

.training-card:hover {
	transform: translateY(-6px);
	box-shadow:
		0 18px 40px rgba(15, 35, 65, .13);
}


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

.training-image-wrapper {
	position: relative;
	height: 205px;
	overflow: hidden;
}

.training-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}

.training-card:hover .training-image {
	transform: scale(1.05);
}

.training-image-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, .05) 20%,
			rgba(0, 0, 0, .48) 100%
		);
}


/* =========================================================
   DATE BADGE
========================================================= */

.training-date {
	position: absolute;
	top: 15px;
	left: 15px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 13px;
	background: rgba(7, 26, 53, .94);
	color: var(--bs-white);
	border-radius: 12px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, .18);
}

.training-date i {
	color: var(--bs-gold);
	font-size: 18px;
}

.training-date-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.training-date-text strong {
	font-size: 14px;
	font-weight: 800;
}

.training-date-text small {
	margin-top: 3px;
	color: rgba(255, 255, 255, .8);
	font-size: 11px;
	font-weight: 600;
}

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

.training-card-body {
	padding: 22px 20px 18px;
	flex: 1;
}

.training-card-title {
	color: var(--bs-navy);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.35;
	margin-bottom: 10px;
}

.title-line {
	width: 36px;
	height: 3px;
	background: var(--bs-gold);
	border-radius: 5px;
	margin-bottom: 13px;
}

.training-description {
	color: var(--bs-dark-grey);
	font-size: 14px;
	line-height: 1.65;
	margin-bottom: 0;
	min-height: 70px;
}


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

.training-card-footer {
	margin-top: auto;
	padding: 14px 16px;
	border-top: 1px solid var(--cs-border);
	background: var(--bs-white);
}


/* Main footer layout */

.training-footer-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: 8px;
	width: 100%;
}


/* =========================================================
   BROCHURE
========================================================= */

.brochure-link {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
	color: var(--bs-navy);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	min-width: 0;
}

.brochure-link i {
	flex-shrink: 0;
	font-size: 17px;
}

.brochure-link:hover {
	color: var(--bs-gold-dark);
}


/* =========================================================
   STATUS
========================================================= */

.training-status-wrapper {
	display: flex;
	justify-content: center;
	min-width: 0;
}

.training-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 8px 9px;
	border-radius: 8px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	min-width: 0;
}

.training-status i {
	flex-shrink: 0;
	font-size: 14px;
}

.training-status.scheduled {
	background: var(--bs-light-green);
	color: var(--bs-green);
}

.training-status.coming {
	background: var(--bs-light-gold);
	color: var(--bs-gold-700);
}

.training-status.completed {
	background: var(--bs-grey);
	color: var(--bs-dark-grey);
}

/* =========================================================
   ACTION
========================================================= */

.training-action-wrapper {
	display: flex;
	justify-content: flex-end;
	min-width: 0;
}

.training-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid var(--bs-dark-navy);
	background: var(--bs-dark-navy);
	color: var(--bs-white);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	transition: all .2s ease;
}

.training-action i {
	flex-shrink: 0;
	font-size: 13px;
	color: var(--bs-gold);
}

.training-action:hover {
	background: var(--bs-navy);
	border-color: var(--bs-navy);
}


/* Interested */

.training-action.interested {
	background: var(--bs-white);
	border-color: var(--bs-gold);
	color: var(--bs-gold-dark);
}

.training-action.interested:hover {
	background: var(--bs-gold);
	border-color: var(--bs-gold);
	color: var(--bs-navy);
}

@media (max-width: 1199.98px) {

	.training-footer-row {
		grid-template-columns: 1fr 1fr;
		row-gap: 8px;
	}

	.brochure-link {
		grid-column: 1;
	}

	.training-status-wrapper {
		grid-column: 2;
		justify-content: flex-end;
	}

	.training-action-wrapper {
		grid-column: 1 / -1;
	}

	.training-action {
		width: 100%;
	}

}

@media (max-width: 575.98px) {

	.training-footer-row {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 9px;
	}

	.brochure-link {
		justify-content: center;
	}

	.training-status-wrapper,
	.training-action-wrapper {
		width: 100%;
		justify-content: center;
	}

	.training-status {
		width: 100%;
	}

	.training-action {
		width: 100%;
	}

}

/* =========================================================
   FEATURES STRIP
========================================================= */

.training-features {
	background: var(--bs-white);
	border: 1px solid var(--cs-border);
	border-radius: 20px;
	padding: 22px 15px;
	box-shadow:
		0 6px 25px rgba(15, 35, 65, .05);
}

.training-feature {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 18px;
}

.training-feature-icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--bs-grey);
	color: var(--bs-navy);
	font-size: 22px;
}

.training-feature h6 {
	color: var(--bs-navy);
	font-size: 14px;
	font-weight: 800;
	margin-bottom: 3px;
}

.training-feature p {
	color: var(--bs-dark-grey);
	font-size: 12px;
	line-height: 1.45;
	margin: 0;
}


/* =========================================================
   MODAL
========================================================= */

.training-modal .modal-content {
	border: 0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 25px 70px rgba(0, 0, 0, .25);
}

.training-modal .modal-header {
	background: var(--bs-navy);
	color: var(--bs-white);
	padding: 22px 25px;
	border-bottom: 0;
}

.training-modal .modal-title {
	font-weight: 800;
}

.training-modal .modal-title span {
	color: var(--bs-gold);
}

.training-modal .btn-close {
	filter: brightness(0) invert(1);
}

.training-modal .modal-body {
	padding: 28px 25px;
}

.training-modal .modal-footer {
	padding: 18px 25px;
	background: #fafbfc;
	border-top: 1px solid var(--cs-border);
}

.training-modal .form-control {
	min-height: 54px;
	border-radius: 10px;
	border: 1px solid #dce2ea;
	box-shadow: none;
}

.training-modal .form-control:focus {
	border-color: var(--bs-gold);
	box-shadow:
		0 0 0 .2rem rgba(233, 184, 63, .15);
}

.training-modal .form-floating > label {
	color: #778397;
}

.modal-submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 25px;
	background: var(--bs-navy);
	border: 0;
	border-radius: 10px;
	color: var(--bs-white);
	font-weight: 700;
}

.modal-submit:hover {
	background: var(--bs-gold);
	color: var(--bs-navy);
}


/* =========================================================
   TOAST
========================================================= */

.training-toast {
	border: 0;
	border-radius: 12px;
	box-shadow:
		0 10px 35px rgba(0, 0, 0, .15);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

	.training-hero-content {
		padding: 40px 0 50px;
	}

	.consultant-wrapper {
		margin-top: 25px;
	}

	.training-feature {
		padding: 12px;
	}
}

@media (max-width: 767.98px) {

	.training-hero {
		border-radius: 0 0 20px 20px;
	}

	.training-hero h1 {
		font-size: 38px;
	}

	.training-hero p {
		font-size: 15px;
	}

	.consultant-btn {
		width: 100%;
		justify-content: center;
	}

	.training-section {
		padding-top: 35px;
	}


	.training-image-wrapper {
		height: 190px;
	}

	.training-features {
		padding: 15px;
	}

	.training-feature {
		padding: 12px 5px;
	}
}