/* Training Manager Portal v2 */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
--tm-blue:#081E3C;
--tm-gold:#C8A96A;
--tm-bg:#F5F7FA;
--tm-text:#2D3748;
}
body{font-family:'Poppins',sans-serif;background:var(--tm-bg);color:var(--tm-text);overflow-x:hidden}
.container{width:min(92%,1320px);margin:auto}
.header{position:fixed;top:0;left:0;width:100%;z-index:1000;transition:.35s}
.header .container{display:flex;justify-content:space-between;align-items:center;height:72px}
.header.scrolled{background:#fff;box-shadow:0 8px 25px rgba(0,0,0,.08)}
.logo,.navbar a,.btn-login{color:#fff;text-decoration:none}
.logo{font-size:1.45rem;font-weight:700}
.logo span{opacity:.85}
.navbar{display:flex;gap:34px}
.navbar a:hover{opacity:.75}
.btn-login{border:1.5px solid rgba(255,255,255,.8);padding:12px 24px;border-radius:40px}
.header.scrolled .logo,.header.scrolled .navbar a,.header.scrolled .btn-login{color:var(--tm-blue)}
.header.scrolled .btn-login{border-color:var(--tm-blue)}
.menu-button{display:none;font-size:2rem;color:#fff}
.header.scrolled .menu-button{color:var(--tm-blue)}

/*==========================================================
    HERO
==========================================================*/
.hero {
	position: relative;
	height: 620px;
	min-height: 620px;
	display: flex;
	align-items: center;
	overflow: visible;
	background: url('../images/hero1.jpg') center center/cover no-repeat;
	transition: background-image .8s ease-in-out;
}

.hero-content {
	position: relative;
	top: -30px;
	z-index: 2;
	width: min(90%,700px);
	margin-left: 8%
}
	.hero-content h1 {
		font-size: 3.8rem;
		color: #fff;
		line-height: 1.08;
		margin-bottom: 22px
	}

		.hero-content h1 span {
			display: block
		}

	.hero-content p {
		color: #eef2f7;
		max-width: 560px;
		line-height: 1.8;
		margin-bottom: 34px
	}

/*==========================================================
    HERO INDICATORS
==========================================================*/

.hero-indicators {
	position: absolute;
	left: 8%;
	bottom: 150px;
	display: flex;
	gap: 12px;
	z-index: 15;
}

	.hero-indicators span {
		width: 48px;
		height: 4px;
		border-radius: 4px;
		background: rgba(255,255,255,.35);
		transition: .35s;
		cursor: pointer;
	}

		.hero-indicators span.active {
			background: #fff;
			width: 70px;
		}


.overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, rgba(6,20,40,.72) 0%, rgba(6,20,40,.45) 30%, rgba(6,20,40,.12) 55%, rgba(6,20,40,0) 100% );
}

.hero-buttons{display:flex;gap:16px;flex-wrap:wrap}
.btn-primary,.btn-secondary{padding:15px 30px;border-radius:40px;text-decoration:none;font-weight:600;transition:.3s}
.btn-primary{background:#fff;color:var(--tm-blue)}
.btn-primary:hover{background:#f2f4f6;transform:translateY(-3px)}
.btn-secondary{border:2px solid rgba(255,255,255,.75);color:#fff}
.btn-secondary:hover{background:#fff;color:var(--tm-blue)}

/*==========================================================
    MODULES
==========================================================*/

.modules {
	position: absolute;
	left: 50%;
	bottom: -220px;
	transform: translateX(-50%);
	width: 100%;
	z-index: 20;
}
	.modules .container {
		max-width: 1440px;
		width: 90%;
	}

.module-icon {
	position: absolute;
	left: 50%;
	top: 136px;
	transform: translateX(-50%);
	width: 50px;
	height: 58px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	box-shadow: 0 8px 25px rgba(0,0,0,.12);
	z-index: 5;
}

.module-card {
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 15px 40px rgba(0,0,0,.08);
	transition: .35s;
	position: relative;
	padding: 6px;
	background: #fff;
}

	.module-card:hover {
		transform: translateY(-8px);
		box-shadow: 0 25px 45px rgba(0,0,0,.12);
	}

	.module-card img {
		width: 100%;
		height: 165px;
		object-fit: cover;
		border-radius: 16px;
	}
	.module-card:hover img {transform: scale(1.05)}

.module-body {
	padding: 10px 5px 5px;
}

	.module-body h3 {
		font-size: 0.9rem;
		color: var(--tm-blue);
		margin-bottom: 10px;
		font-weight: 700;
		line-height: 1.25;
	}

	.module-body p {
		font-size: .75rem;
		line-height: 1.3;
		color: #6b7280;
		margin-bottom: 16px;
	}

	.module-body a {
		color: var(--tm-blue);
		font-size: .9rem;
		text-decoration: none;
		font-weight: 600;
	}

		.module-body a:hover {
			transform: translateX(4px);
		}

.modules-grid {
	display: grid;
	grid-template-columns: repeat(6,1fr);
	gap: 18px;
	align-items: stretch;
}

.section-title{text-align:center;max-width:700px;margin:0 auto 50px}
.section-title h2{font-size:2.4rem;color:var(--tm-blue);margin-bottom:16px}
.section-title p{color:#6b7280;line-height:1.8}

.module-overlay{padding:28px;background:#fff}
.module-overlay h3{color:var(--tm-blue);font-size:1.3rem;margin-bottom:12px}
.module-overlay h3:before{content:'';display:block;width:42px;height:3px;background:var(--tm-gold);margin-bottom:14px}
.module-overlay p{color:#6b7280;line-height:1.7;margin-bottom:20px}
.module-overlay a{text-decoration:none;color:var(--tm-blue);font-weight:600}

@media(max-width:992px){
.navbar,.btn-login{display:none}
.menu-button{display:block}
.hero{min-height:560px}
.hero-content{margin:auto;text-align:center;padding:0 20px}
.modules-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
.hero{height:78vh}
.hero-content h1{font-size:2.5rem}
.modules-grid{grid-template-columns:1fr}
.btn-primary,.btn-secondary{width:100%;text-align:center}
}

.benefits {
	padding: 140px 0 40px;
}

	.benefits .container {
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 30px;
	}

.benefit {
	display: flex;
	margin-top: 160px;
	align-items: center;
	gap: 20px;
	background: #fff;
	padding: 18px;
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

	.benefit i {
		font-size: 2.2rem;
		color: var(--tm-blue);
		min-width: 50px;
	}

	.benefit h3 {
		color: var(--tm-blue);
		font-size: 1.1rem;
		margin-bottom: 6px;
	}

	.benefit p {
		font-size: .85rem;
		line-height: 1.5;
		color: #6b7280;
	}


/*==============================================
    STATISTICS
==============================================*/

.stats {
	margin: 0px 0 80px;
	background: #19365B;
	color: #fff;
	border-radius: 18px;
	box-shadow: 0 20px 45px rgba(0,0,0,.12);
}

	.stats .container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30px 40px;
		gap: 50px;
	}

.stats-message {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	flex: 1;
}

	.stats-message i {
		font-size: 2rem;
		opacity: .45;
	}

	.stats-message h3 {
		font-size: 1.45rem;
		font-style: italic;
		font-weight: 400;
		margin-bottom: 10px;
	}

	.stats-message p {
		opacity: .8;
	}

.stats-items {
	display: flex;
	gap: 60px;
}

.stat-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-left: 40px;
	border-left: 1px solid rgba(255,255,255,.15);
}

	.stat-item:first-child {
		border-left: none;
		padding-left: 0;
	}

	.stat-item i {
		font-size: 2.2rem;
		opacity: .75;
	}

	.stat-item strong {
		display: block;
		font-size: 2rem;
		font-weight: 700;
		line-height: 1;
	}

	.stat-item span {
		font-size: .88rem;
		opacity: .75;
	}


/*==============================================
    WHY TRAINING MANAGER
==============================================*/

.why {
	padding: 0px 0;
}

.why-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 15px;
	margin-top: 35px;
}

.why-card {
	background: #fff;
	border-radius: 18px;
	padding: 35px;
	box-shadow: 0 12px 35px rgba(0,0,0,.06);
	transition: .3s;
}

	.why-card:hover {
		transform: translateY(-8px);
		box-shadow: 0 18px 40px rgba(0,0,0,.10);
	}

	.why-card i {
		width: 60px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(8,30,60,.05);
		color: var(--tm-blue);
		font-size: 1.8rem;
		margin-bottom: 30px;
	}

	.why-card h3 {
		font-size: 1.25rem;
		line-height: 1.3;
		color: var(--tm-blue);
		margin-bottom: 18px;
	}

	.why-card p {
		color: #6b7280;
		line-height: 1.6;
		font-size: .90rem;
	}


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

.footer {
	background: #081E3C;
	color: #fff;
	margin-top: 80px;
}

	.footer .container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28px 0;
	}

	.footer p {
		font-size: .90rem;
		opacity: .75;
	}

	.footer nav {
		display: flex;
		gap: 28px;
	}

	.footer a {
		color: #fff;
		text-decoration: none;
		font-size: .90rem;
		opacity: .75;
		transition: .25s;
	}

		.footer a:hover {
			opacity: 1;
		}