.dr1057whyus {
	padding: 80px 20px;
	background: radial-gradient(circle at top, #0f172a, #020617);
	color: #fff;
	overflow: hidden;
	position: relative;
	font-family: "Segoe UI", sans-serif;
}

/* Glow background effects */
.dr1057whyus::before, 
.dr1057whyus::after {
	content: "";
	position: absolute;
	width: 400px;
	height: 400px;
	background: linear-gradient(135deg, #00c6ff, #7f00ff);
	filter: blur(120px);
	opacity: 0.2;
	z-index: 0;
}

.dr1057whyus::before {
	top: -100px;
	left: -100px;
}

.dr1057whyus::after {
	bottom: -100px;
	right: -100px;
}

.dr1057whyus-container {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: auto;
}

.dr1057whyus-header {
	text-align: center;
	margin-bottom: 50px;
}

.dr1057whyus-header h2 {
	font-size: 2.5rem;
	background: linear-gradient(90deg, #00c6ff, #7f00ff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.dr1057whyus-header p {
	opacity: 0.8;
	margin-top: 10px;
}

/* Grid */
.dr1057whyus-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 25px;
}

/* Card */
.dr1057whyus-card {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(20px);
	border-radius: 18px;
	padding: 25px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: all 0.4s ease;
	transform: translateY(40px);
	opacity: 0;
	position: relative;
	overflow: hidden;

	/* ✅ Prevent layout issues */
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* Glossy shine effect */
.dr1057whyus-card::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
		120deg,
		transparent,
		rgba(255, 255, 255, 0.1),
		transparent
	);
	transform: rotate(25deg);
	transition: 0.6s;
}

.dr1057whyus-card:hover::before {
	left: 100%;
}

.dr1057whyus-card:hover {
	transform: translateY(-10px) scale(1.03);
	border-color: rgba(0, 198, 255, 0.4);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dr1057whyus-card .icon {
	font-size: 2rem;
	margin-bottom: 15px;
}

.dr1057whyus-card h3 {
	margin-bottom: 10px;
	font-size: 1.2rem;

	/* ✅ Fix text splitting */
	word-break: normal;
	overflow-wrap: normal;
	white-space: normal;
	line-height: 1.3;
}

.dr1057whyus-card p {
	font-size: 0.95rem;
	opacity: 0.8;
	line-height: 1.5;

	/* ✅ Safe wrapping */
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* Active animation */
.dr1057whyus-card.active {
	transform: translateY(0);
	opacity: 1;
	transition: all 0.6s ease;
}

.no-break {
	white-space: nowrap;
}

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

/* Tablet */
@media (max-width: 1024px) {
	.dr1057whyus-header h2 {
		font-size: 2.2rem;
	}
}

/* Mobile */
@media (max-width: 768px) {

	.dr1057whyus {
		padding: 60px 15px;
	}

	.dr1057whyus-grid {
		grid-template-columns: 1fr; /* ✅ Single column */
	}

	.dr1057whyus-card {
		padding: 20px;
		transform: translateY(20px);
	}

	.dr1057whyus-header h2 {
		font-size: 2rem;
	}

	.dr1057whyus-card h3 {
		font-size: 1.1rem;

		/* Prevent awkward splits on mobile */
		word-break: normal;
		white-space: normal;
	}

	.dr1057whyus-card p {
		font-size: 0.9rem;
	}
}

/* Small mobile */
@media (max-width: 480px) {

	.dr1057whyus-header h2 {
		font-size: 1.8rem;
	}

	.dr1057whyus-card {
		padding: 18px;
	}
}