/* ==========================================
PORTFOLIO SECTION
========================================== */
.dr1portfolio {
	padding: 120px 20px;

	background:
		radial-gradient(circle at top,
			rgba(56, 189, 248, .10),
			transparent 40%),
		linear-gradient(180deg, #020617, #030712);

	font-family: 'Poppins', sans-serif;

	position: relative;
	overflow: hidden;

	text-align: center;
}

/* ==========================================
BACKGROUND GLOW
========================================== */
.dr1portfolio::before {
	content: "";

	position: absolute;

	width: 700px;
	height: 700px;

	top: -250px;
	left: -250px;

	background:
		radial-gradient(circle,
			rgba(56, 189, 248, .18),
			transparent 70%);

	filter: blur(40px);

	pointer-events: none;
}

.dr1portfolio::after {
	content: "";

	position: absolute;

	width: 600px;
	height: 600px;

	bottom: -220px;
	right: -220px;

	background:
		radial-gradient(circle,
			rgba(99, 102, 241, .16),
			transparent 70%);

	filter: blur(50px);

	pointer-events: none;
}

/* ==========================================
HEADING
========================================== */
.dr1portfolio .portfolio-heading {
	position: relative;
	z-index: 2;

	margin-bottom: 60px;
}

.dr1portfolio .portfolio-heading h2 {
	font-size: clamp(2.2rem, 5vw, 3.3rem);

	font-weight: 800;
	line-height: 1.2;

	letter-spacing: -1px;

	color: #ffffff;

	margin: 0;
}

/* ==========================================
PORTFOLIO HERO IMAGE
========================================== */
.dr1portfolio .portfolio-hero-image {
	position: relative;

	max-width: 1400px;
	margin: 0 auto 100px;

	border-radius: 38px;
	overflow: hidden;

	border: 1px solid rgba(255, 255, 255, .10);

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, .05),
			rgba(255, 255, 255, .02)
		);

	backdrop-filter: blur(20px);

	box-shadow:
		0 40px 120px rgba(0, 0, 0, .65),
		0 0 80px rgba(56, 189, 248, .08);

	z-index: 2;
}

.dr1portfolio .portfolio-hero-image img {
	width: 100%;
	display: block;

	object-fit: cover;

	min-height: 380px;
	max-height: 700px;

	transition:
		transform .8s ease,
		filter .5s ease;
}

/* ==========================================
IMAGE OVERLAY
========================================== */
.dr1portfolio .portfolio-hero-image::after {
	content: "";

	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			180deg,
			rgba(2, 6, 23, .05),
			rgba(2, 6, 23, .55)
		);

	pointer-events: none;

	z-index: 1;
}

/* ==========================================
HERO CONTENT
========================================== */
.dr1portfolio .portfolio-hero-content {
	position: absolute;

	left: 50%;
	bottom: 42px;

	transform: translateX(-50%);

	z-index: 3;

	width: calc(100% - 80px);
	max-width: 950px;

	padding: 28px 36px;

	border-radius: 28px;

	background:
		linear-gradient(
			145deg,
			rgba(15, 23, 42, .88),
			rgba(15, 23, 42, .68)
		);

	backdrop-filter: blur(18px);

	border: 1px solid rgba(255, 255, 255, .08);

	box-shadow:
		0 18px 60px rgba(0, 0, 0, .45),
		0 0 30px rgba(56, 189, 248, .08);
}

.dr1portfolio .portfolio-hero-content p {
	margin: 0;

	color: #e2e8f0;

	font-size: 1.08rem;
	font-weight: 400;

	line-height: 1.9;

	text-align: center;
}

/* ==========================================
HOVER EFFECT
========================================== */
@media (hover:hover) {

	.dr1portfolio .portfolio-hero-image:hover img {
		transform: scale(1.03);

		filter: brightness(1.05);
	}
}

/* ==========================================
GRID
========================================== */
.dr1portfolio .portfolio-grid {
	display: grid;

	grid-template-columns:
		repeat(auto-fit, minmax(320px, 1fr));

	gap: 38px;

	max-width: 1350px;
	margin: 0 auto;

	position: relative;
	z-index: 2;
}

/* ==========================================
CARD
========================================== */
.dr1portfolio .card {
	position: relative;

	border-radius: 30px;
	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, .06),
			rgba(255, 255, 255, .02)
		);

	border: 1px solid rgba(255, 255, 255, .10);

	backdrop-filter: blur(18px);

	box-shadow:
		0 30px 90px rgba(0, 0, 0, .65);

	transition:
		transform .45s ease,
		box-shadow .45s ease,
		border-color .45s ease;

	transform-style: preserve-3d;

	will-change: transform;
}

/* ==========================================
CARD IMAGE
========================================== */
.dr1portfolio .card-image {
	height: 240px;

	overflow: hidden;
	position: relative;
}

.dr1portfolio .card-image img {
	width: 100%;
	height: 100%;

	object-fit: cover;

	display: block;

	transition:
		transform .7s ease,
		filter .5s ease;
}

/* ==========================================
CARD IMAGE OVERLAY
========================================== */
.dr1portfolio .card-image::after {
	content: "";

	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			180deg,
			transparent,
			rgba(2, 6, 23, .45)
		);
}

/* ==========================================
FLOATING CONTENT PANEL
========================================== */
.dr1portfolio .card-content {
	position: relative;

	margin: -45px 24px 24px;
	padding: 30px;

	border-radius: 24px;

	background:
		linear-gradient(
			145deg,
			rgba(15, 23, 42, .88),
			rgba(15, 23, 42, .65)
		);

	backdrop-filter: blur(18px);

	border: 1px solid rgba(255, 255, 255, .08);

	box-shadow:
		0 18px 60px rgba(0, 0, 0, .45);

	z-index: 2;
}

.dr1portfolio .card h3 {
	font-size: 1.25rem;

	font-weight: 700;
	line-height: 1.5;

	color: #ffffff;

	margin-bottom: 14px;
}

.dr1portfolio .card p {
	color: #cbd5e1;

	font-size: .96rem;
	line-height: 1.8;
}

/* ==========================================
CTA BUTTON
========================================== */
.dr1portfolio .project-link {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 8px;

	margin-top: 24px;
	padding: 13px 24px;

	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			#38bdf8,
			#6366f1
		);

	color: #ffffff;

	text-decoration: none;

	font-weight: 600;
	font-size: .95rem;

	box-shadow:
		0 14px 35px rgba(56, 189, 248, .35);

	transition:
		transform .35s ease,
		box-shadow .35s ease,
		filter .35s ease;
}

/* ==========================================
HOVER EFFECTS
========================================== */
@media (hover:hover) {

	.dr1portfolio .card:hover {
		transform: translateY(-14px) scale(1.02);

		box-shadow:
			0 60px 140px rgba(0, 0, 0, .85),
			0 0 50px rgba(56, 189, 248, .18);

		border-color:
			rgba(56, 189, 248, .35);
	}

	.dr1portfolio .card:hover img {
		transform: scale(1.08);

		filter: brightness(1.08);
	}

	.dr1portfolio .card:hover .project-link {
		transform: translateY(-3px);

		box-shadow:
			0 28px 65px rgba(56, 189, 248, .55);

		filter: brightness(1.05);
	}
}

/* ==========================================
PORTFOLIO CONTACT MESSAGE
========================================== */

.dr1portfolio .portfolio-contact-box {
	position: relative;

	max-width: 1200px;
	margin: 110px auto 0;

	padding: 70px 70px;

	border-radius: 36px;

	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			rgba(15,23,42,0.92),
			rgba(15,23,42,0.72)
		);

	border: 1px solid rgba(255,255,255,0.08);

	backdrop-filter: blur(22px);

	box-shadow:
		0 40px 120px rgba(0,0,0,0.7),
		0 0 70px rgba(56,189,248,0.08);

	z-index: 2;
}

/* ==========================================
BACKGROUND GLOW
========================================== */

.dr1portfolio .portfolio-contact-glow {
	position: absolute;
	inset: 0;

	background:
		radial-gradient(
			circle at 20% 20%,
			rgba(56,189,248,0.18),
			transparent 45%
		),

		radial-gradient(
			circle at 80% 80%,
			rgba(99,102,241,0.18),
			transparent 50%
		);

	pointer-events: none;
}

/* ==========================================
CONTENT
========================================== */

.dr1portfolio .portfolio-contact-content {
	position: relative;
	z-index: 3;

	max-width: 920px;
	margin: 0 auto;

	text-align: center;
}

/* ==========================================
HEADING
========================================== */

.dr1portfolio .portfolio-contact-content h3 {
	font-size: clamp(2rem, 4vw, 3rem);

	font-weight: 800;
	line-height: 1.15;

	color: #ffffff;

	margin-bottom: 26px;

	letter-spacing: -0.8px;

	text-shadow:
		0 10px 35px rgba(0,0,0,0.55);
}

/* ==========================================
PARAGRAPHS
========================================== */

.dr1portfolio .portfolio-contact-content p {
	font-size: 1.05rem;

	line-height: 1.95;

	color: #cbd5e1;

	margin-bottom: 22px;

	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================
TAGS
========================================== */

.dr1portfolio .portfolio-contact-tags {
	display: flex;
	flex-wrap: wrap;

	align-items: center;
	justify-content: center;

	gap: 16px;

	margin-top: 34px;
}

.dr1portfolio .portfolio-contact-tags span {
	padding: 13px 22px;

	border-radius: 999px;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,0.08),
			rgba(255,255,255,0.03)
		);

	border: 1px solid rgba(255,255,255,0.08);

	color: #e2e8f0;

	font-size: .95rem;
	font-weight: 500;

	backdrop-filter: blur(12px);

	box-shadow:
		0 12px 30px rgba(0,0,0,0.35);

	transition:
		transform .35s ease,
		border-color .35s ease,
		background .35s ease;
}

/* ==========================================
DESKTOP HOVER
========================================== */

@media (hover:hover) {

	.dr1portfolio .portfolio-contact-box:hover {

		box-shadow:
			0 60px 140px rgba(0,0,0,0.85),
			0 0 80px rgba(56,189,248,0.16);

		border-color:
			rgba(56,189,248,0.18);
	}

	.dr1portfolio .portfolio-contact-tags span:hover {
		transform: translateY(-4px);

		background:
			linear-gradient(
				145deg,
				rgba(56,189,248,0.16),
				rgba(99,102,241,0.12)
			);

		border-color:
			rgba(56,189,248,0.24);
	}
}

/* ==========================================
TABLET
========================================== */

@media (max-width:768px) {

	.dr1portfolio {
		padding: 90px 18px;
	}

	.dr1portfolio .portfolio-heading {
		margin-bottom: 50px;
	}

	.dr1portfolio .portfolio-hero-image {
		display: flex;
		flex-direction: column;

		overflow: visible;

		background: transparent;
		border: none;
		box-shadow: none;
		backdrop-filter: none;

		margin-bottom: 70px;
	}

	.dr1portfolio .portfolio-hero-image::after {
		display: none;
	}

	.dr1portfolio .portfolio-hero-image img {
		min-height: 260px;

		border-radius: 28px;
	}

	.dr1portfolio .portfolio-hero-content {
		position: relative;

		left: auto;
		bottom: auto;

		transform: none;

		width: calc(100% - 36px);

		margin: -35px auto 0;

		padding: 22px;

		border-radius: 22px;

		z-index: 5;
	}

	.dr1portfolio .portfolio-hero-content p {
		font-size: .96rem;
		line-height: 1.75;
	}

	.dr1portfolio .portfolio-grid {
		gap: 28px;
	}

	.dr1portfolio .card-image {
		height: 210px;
	}

	.dr1portfolio .card-content {
		margin: -35px 18px 18px;

		padding: 24px;
	}

	.dr1portfolio .card h3 {
		font-size: 1.12rem;
	}

	.dr1portfolio .card p {
		font-size: .92rem;
	}

	.dr1portfolio .portfolio-contact-box {

		margin-top: 80px;

		padding: 50px 28px;

		border-radius: 28px;
	}

	.dr1portfolio .portfolio-contact-content h3 {
		font-size: 2rem;
		line-height: 1.25;
	}

	.dr1portfolio .portfolio-contact-content p {
		font-size: .98rem;
		line-height: 1.85;
	}

	.dr1portfolio .portfolio-contact-tags {
		gap: 12px;
	}

	.dr1portfolio .portfolio-contact-tags span {
		font-size: .88rem;

		padding: 11px 18px;
	}
}

/* ==========================================
SMALL MOBILE
========================================== */

@media (max-width:480px) {

	.dr1portfolio {
		padding: 80px 14px;
	}

	.dr1portfolio .portfolio-heading h2 {
		font-size: 2rem;
		line-height: 1.3;
	}

	.dr1portfolio .portfolio-grid {
		grid-template-columns: 1fr;

		gap: 24px;
	}

	.dr1portfolio .portfolio-hero-image img {
		min-height: 220px;

		border-radius: 22px;
	}

	.dr1portfolio .portfolio-hero-content {
		width: calc(100% - 20px);

		margin-top: -28px;

		padding: 18px;

		border-radius: 18px;
	}

	.dr1portfolio .portfolio-hero-content p {
		font-size: .9rem;
		line-height: 1.7;
	}

	.dr1portfolio .portfolio-contact-box {

		padding: 42px 20px;

		border-radius: 24px;
	}

	.dr1portfolio .portfolio-contact-content h3 {
		font-size: 1.7rem;
	}

	.dr1portfolio .portfolio-contact-content p {
		font-size: .92rem;
		line-height: 1.8;
	}

	.dr1portfolio .portfolio-contact-tags {
		flex-direction: column;

		align-items: stretch;
	}

	.dr1portfolio .portfolio-contact-tags span {
		width: 100%;

		text-align: center;
	}
}

/* ==========================================
REDUCED MOTION
========================================== */

@media (prefers-reduced-motion:reduce) {

	.dr1portfolio * {
		transition: none !important;
		animation: none !important;
	}
}