main {
	padding: 40px;
}

.darkblue {
	background: rgb(30 41 59/var(--tw-bg-opacity, 1));
}

.hero-text {

	width: 64%;
	margin-top: 4rem;

}

.managementhero {
	display: flex;
	padding: 3rem 4rem 0rem 4rem;
	gap: 7rem;
}

.hero-text h1 {
	font-size: 36px;
	margin-bottom: 20px;
}

.hero-text p {
	font-size: 16px;
	color: #fff;
	text-align: left;
}

.features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 40px;
}

.feature {
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 20px;
}

.feature h3 {
	font-size: 20px;
	margin-bottom: 10px;
}

.hero-text h1 {
	font-weight: 600;
	font-size: 32px !important;
	line-height: 1.1;
	font-size: 16px;
}

.managementhero .hero-image {
	width: 24rem;
	margin: 0 0 -2.8rem 0;

}


.hero-text {
	color: white;
}

.dots {
	height: 35px;
	width: 35px;
	fill: #fff;
}

.hero-text svg {
	margin-right: 10px;
}

.grid-container {
	display: grid;
	margin: 4rem 0;
	/* Enable CSS Grid */
	grid-template-columns: repeat(2, 1fr);
	/* Create 2 equal-width columns */
	grid-template-rows: repeat(2, auto);
	/* Create 2 rows with height determined by content */
	gap: 16px;
	/* Optional: Space between grid items */
}

.grid-item {
	text-align: left;
	margin: 1rem 0;
}