/* ================= ABOUT ROOT ================= */
.dr1057about {
	padding: 60px 20px;
	background: radial-gradient(circle at top, #071020, #02040a);
	color: #fff;
	font-family: "Segoe UI", sans-serif;
}

/* ================= CONTAINER ================= */
.dr1057about-container {
	max-width: 1100px;
	margin: auto;
}

/* ================= SPLIT LAYOUT ================= */
.dr1057about-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	margin-bottom: 50px;
}

/* ================= IMAGE BOX ================= */
.dr1057about-image {
	border-radius: 20px;
	background: radial-gradient(circle, #0a1a2f, #02040a);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
}

/* ================= IMAGE (NO CROP FIX) ================= */
.dr1057about-image img {
	width: 100%;
	height: auto;          /* ✅ NO CROPPING */
	max-height: 500px;     /* prevents over stretching */
	object-fit: contain;

	display: block;
	margin: auto;

	transition: transform 0.6s ease;
}

/* HOVER EFFECT */
.dr1057about-image:hover img {
	transform: scale(1.05);
}

/* ================= CARD ================= */
.dr1057about-card {
	padding: 25px;
	border-radius: 18px;

	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(0, 212, 255, 0.2);
	backdrop-filter: blur(12px);

	transition: all 0.4s ease;

	opacity: 0;
	transform: translateY(40px);
}

/* 3D HOVER */
.dr1057about-card:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 15px 40px rgba(0, 212, 255, 0.25);
}

/* ================= HERO TITLE ================= */
.dr1057about-card.hero-card h1 {
	font-size: 2.4rem;
	margin-bottom: 15px;

	background: linear-gradient(90deg, #00d4ff, #ffffff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ================= TEXT ================= */
.dr1057about-card p,
.dr1057about-card li {
	color: #cfd8dc;
	line-height: 1.7;
}

.dr1057about-card ul {
	padding-left: 18px;
}

/* ================= GRID ================= */
.dr1057about-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 25px;
}

/* ================= HIGHLIGHT ================= */
.dr1057about-card.highlight {
	margin-top: 40px;
	border: 1px solid rgba(255, 215, 0, 0.5);
	box-shadow: 0 10px 35px rgba(255, 215, 0, 0.2);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {

	.dr1057about-split {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.dr1057about-image img {
		max-height: 350px;
	}

	.dr1057about-card.hero-card h1 {
		font-size: 2rem;
	}
}

@media (max-width: 600px) {

	.dr1057about {
		padding: 40px 12px;
	}

	.dr1057about-image {
		padding: 10px;
	}

	.dr1057about-image img {
		max-height: 260px;
	}

	.dr1057about-card {
		padding: 18px;
	}

	.dr1057about-card.hero-card h1 {
		font-size: 1.6rem;
	}
}