/* ==========================================
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;
}


/* HEADING */

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

.dr1portfolio h2{

font-size:clamp(2rem,4vw,2.8rem);

font-weight:800;

color:#fff;

margin-bottom:25px;
}

.dr1portfolio .portfolio-heading p{
color:#cbd5e1;
font-size:1.05rem;
}


/* GRID */

.dr1portfolio .portfolio-grid{

display:grid;

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

gap:38px;

max-width:1300px;

margin:0 auto;
}


/* ==========================================
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:.45s ease;

transform-style:preserve-3d;
}


/* 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;
}


/* 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;

color:#fff;

margin-bottom:14px;
}

.dr1portfolio .card p{

color:#cbd5e1;

font-size:.96rem;

line-height:1.7;
}


/* CTA */

.dr1portfolio .project-link{

display:inline-block;

margin-top:24px;

padding:12px 22px;

border-radius:999px;

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

color:#fff;

text-decoration:none;

font-weight:600;

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

transition:.35s ease;
}


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

@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);

}

}


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

@media(max-width:768px){

.dr1portfolio{
padding:90px 18px;
}

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

.dr1portfolio .card-content{

margin:-35px 18px 18px;

padding:24px;
}

}


@media(max-width:480px){

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

}


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

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

.dr1portfolio *{
transition:none !important;
}

}