/* Watts Training Portal — Front Page Overrides
   Loaded only on the front page. Uses !important to override Bootstrap utility classes. */

/* ----------------------------------------------------------------
   Global front-page dark background
   ---------------------------------------------------------------- */

body.home,
body.home .site-container {
	background: #0d0b1a !important;
	background-color: #0d0b1a !important;
}





/* ----------------------------------------------------------------
   Hero Section
   ---------------------------------------------------------------- */

body.home .site-inner,
body.home .site-inner .content {
	background: #0d0b1a !important;
	background-color: #0d0b1a !important;
}

body.home section.py-5 {
	background: #0d0b1a !important;
	background-color: #0d0b1a !important;
}

/* Hero heading — white */
body.home .resp-title,
body.home .resp-title.text-primary,
body.home h1.text-primary,
body.home .text-primary.fw-boldest {
	color: #ffffff !important;
}

/* Section body text */
body.home .lead {
	color: #b0b0c0 !important;
}

/* ----------------------------------------------------------------
   Buttons — gradient style matching branded pages
   ---------------------------------------------------------------- */

body.home .btn.bg-primary,
body.home a.bg-primary {
	background: linear-gradient(135deg, #ff1493, #8b5cf6) !important;
	background-color: transparent !important;
	border: none !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	transition: opacity 0.2s, transform 0.1s !important;
}

body.home .btn.bg-primary:hover,
body.home a.bg-primary:hover {
	opacity: 0.9 !important;
}

body.home .btn.bg-secondary,
body.home a.bg-secondary {
	background: transparent !important;
	background-color: transparent !important;
	border: 2px solid rgba(255, 255, 255, 0.25) !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	transition: border-color 0.2s, background 0.2s !important;
}

body.home .btn.bg-secondary:hover,
body.home a.bg-secondary:hover {
	border-color: rgba(255, 255, 255, 0.5) !important;
	background: rgba(255, 255, 255, 0.05) !important;
	background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ----------------------------------------------------------------
   Hero image — pink accent border
   ---------------------------------------------------------------- */

body.home .glowcard img {
	border-color: #ff1493 !important;
}

body.home .glowcard::after {
	background: linear-gradient(135deg, #ff1493, #8b5cf6, #ff1493) !important;
}

/* ----------------------------------------------------------------
   Blob colors — pinks/purples instead of blues
   ---------------------------------------------------------------- */

body.home .shape-blob {
	background: #ff1493 !important;
}

body.home .shape-blob.one {
	background: #8b5cf6 !important;
}

body.home .shape-blob.two {
	background: #a855f7 !important;
}

body.home .shape-blob.three {
	background: #c026d3 !important;
}

body.home .shape-blob.four {
	background: #7c3aed !important;
}

body.home .shape-blob.five {
	background: #6d28d9 !important;
}

body.home .shape-blob.six {
	background: #ec4899 !important;
}

/* ----------------------------------------------------------------
   Partners section
   ---------------------------------------------------------------- */

.watts-partner-label {
	padding: 10px 20px;
}

.watts-partner-logo {
	padding: 10px 24px;
}

.watts-partner-logo img {
	height: 60px;
	width: auto;
	object-fit: contain;
}

a.watts-partner-logo {
	text-decoration: none !important;
	color: inherit !important;
	transition: opacity 0.2s;
}

a.watts-partner-logo:hover {
	opacity: 0.7;
}

/* ----------------------------------------------------------------
   Feature section images — force 1:1 aspect ratio for circles
   ---------------------------------------------------------------- */

body.home .glowcard img.rounded-circle {
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
}

body.home .glowcard img[src*="fp2"] {
	object-position: right center !important;
}

/* ----------------------------------------------------------------
   CTA Banner — bottom section
   ---------------------------------------------------------------- */

.watts-cta-section {
	background: #0d0b1a !important;
}

.watts-cta-card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 48px 40px;
}

.watts-cta-heading {
	color: #ffffff !important;
	font-size: 32px;
	font-weight: 900;
	line-height: 1.2;
	margin: 0 0 12px;
}

.watts-cta-highlight {
	background: linear-gradient(135deg, #ff1493, #8b5cf6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.watts-cta-text {
	color: #b0b0c0 !important;
	font-size: 15px;
	margin: 0;
}

.watts-cta-register {
	background: linear-gradient(135deg, #ff1493, #8b5cf6) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	border: none !important;
	white-space: nowrap;
}

.watts-cta-register:hover {
	opacity: 0.9;
}

.watts-cta-login {
	background: transparent !important;
	border: 2px solid rgba(255, 255, 255, 0.25) !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	white-space: nowrap;
}

.watts-cta-login:hover {
	border-color: rgba(255, 255, 255, 0.5) !important;
	background: rgba(255, 255, 255, 0.05) !important;
}

.watts-cta-help {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 13px;
	color: #6b6b80;
	text-align: center;
}

.watts-cta-help a {
	color: #ff6b9d !important;
	text-decoration: none;
}

.watts-cta-help a:hover {
	color: #ff8cb3 !important;
}

@media (max-width: 767px) {
	.watts-cta-card {
		padding: 32px 24px;
	}

	.watts-cta-heading {
		font-size: 26px;
	}
}