/* main.css - Landing page styles */

.hero {
	background: linear-gradient(135deg, #1a56db 0%, #3b82f6 100%);
	color: white;
	padding: 5rem 0;
	position: relative;
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,192C1248,192,1344,128,1392,96L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
	background-size: cover;
	background-position: center;
	z-index: 1;
}
.hero-content {
	position: relative;
	z-index: 2;
	padding-top: 70px;
}
@media (max-width: 767.98px) {
	.hero-content {
		padding-top: 56px;
	}
}

/* .hero h1 {
	font-size: 3.5rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
}
.hero p {
	font-size: 1.2rem;
	margin-bottom: 2rem;
	opacity: 0.9;
} */

.hero h1 {
	font-size: clamp(2rem, 3.5vw, 2.4rem);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 1rem;
	max-width: 600px;
}

.hero h1 .text-highlight {
	display: block;
	margin-top: 0.3rem;
	font-weight: 600;
	color: #f8f9fa;
}

.hero p {
	font-size: 1rem;
	margin-bottom: 1.8rem;
	opacity: 0.9;
	max-width: 600px;
}

.hero img {
	width: 100%;
	/* max-width: 90%; */
	max-width: 520px;
	height: auto;
}

/* Section spacing */
.pain-points,
.solution-section,
.how-it-works,
.testimonials,
.cta-section {
	padding: 5rem 0;
	clear: both;
}
.pain-points,
.how-it-works {
	background-color: #f9fafb;
}
.cta-section {
	background: linear-gradient(135deg, #1a56db 0%, #1a56db 100%);
	color: white;
	text-align: center;
}
.employer-cta {
	background: linear-gradient(135deg, #1a56db 0%, #1a56db 100%);
	color: white;
	border-radius: 10px;
	padding: 2rem;
	margin: 2rem 0;
	text-align: center;
}

/* Cards */
.pain-point-card,
.testimonial-card {
	background: white;
	border-radius: 10px;
	padding: 2rem;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s;
}
.pain-point-card:hover,
.testimonial-card:hover {
	transform: translateY(-5px);
}
.testimonial-avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.hero h1 {
		font-size: 2.5rem;
	}
	.hero p {
		font-size: 1rem;
	}
	.pain-points-column {
		margin-bottom: 2rem;
	}
	.pain-point-card {
		margin-bottom: 1.5rem;
	}
}

@media (min-width: 992px) {
	.hero img {
		width: 80%;
	}
}

/* Override navbar background for landing page */
/*.navbar {
	background: #ffffff !important; /* solid white background */
/*	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* keep subtle shadow */
/*}*/

/* Adjust text/icon colors for contrast */
/*.navbar .nav-link,
.navbar .btn-outline-danger {
	color: #202124 !important; /* dark text for readability */
/*}
.navbar .nav-link:hover {
	color: #202124 !important; /* primary blue on hover */
/*}*/

/* Navbar overrides */
.navbar {
	background: #ffffff !important; /* solid white background */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.navbar .nav-link {
	font-weight: 500;
	margin: 0 0.5rem;
	font-family: "Inter", sans-serif;
	color: #202124 !important;
}
.navbar .nav-link:hover {
	color: var(--primary) !important;
}

/* Feature cards */
.feature-card {
	border: none;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	padding: 2rem;
	height: 100%;
	transition: transform 0.3s;
}
.feature-card:hover {
	transform: translateY(-5px);
}
.feature-icon {
	width: 70px;
	height: 70px;
	background: rgba(26, 86, 219, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	color: var(--primary);
	font-size: 1.8rem;
}

/* steps */
.step-card {
	text-align: center;
	padding: 2rem;
}

.step-number {
	width: 50px;
	height: 50px;
	background: var(--primary);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
	font-weight: 700;
}

/* Pain Points section */
.pain-points {
	background-color: var(--light);
	padding: 5rem 0;
	clear: both;
}

.pain-points-column {
	height: 100%;
	margin-bottom: 2rem; /* for spacing on smaller screens */
}

.pain-point-card {
	background: white;
	border-radius: 10px;
	padding: 2rem;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	margin-bottom: 2rem;
	height: auto;
	transition: transform 0.3s;
}
.pain-point-card:hover {
	transform: translateY(-5px);
}