/* =====================================
   PORTFOLIO SECTION
===================================== */

.portfolio-section{

position:relative;

max-width:1200px;

margin:auto;
margin-top: 80px;
min-height:420px;

border-radius:40px;

overflow:hidden;

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

padding:80px 40px;

background:
radial-gradient(circle at center,
rgba(212,175,55,.12),
transparent 40%),

linear-gradient(
180deg,
#070b1a,
#0b1430
);

border:1px solid rgba(212,175,55,.15);

box-shadow:
0 30px 80px rgba(0,0,0,.35);
}

.portfolio-section{

opacity:0;

transform:translateY(100px);

will-change:transform,opacity;
}

.portfolio-section{
opacity:0;
transform:translateY(100px);
}

.portfolio-label,
.portfolio-title,
.portfolio-description,
.portfolio-btn{
opacity:0;
transform:translateY(40px);
}
.portfolio-content > *{

opacity:0;

transform:translateY(40px);
}

/* =====================================
   BIG BACKGROUND TEXT
===================================== */

.portfolio-bg-text{

position:absolute;
left:50%;
top:50%;

transform:translate(-50%,-50%);

font-family:'Cinzel',serif;

font-size:clamp(90px,12vw,180px);

font-weight:900;

letter-spacing:5px;

width:100%;

text-align:center;

color:rgba(255,255,255,.03);

white-space:nowrap;
}

/* =====================================
   GLOW EFFECTS
===================================== */

.glow{

position:absolute;

width:700px;
height:700px;

background:#d4af37;

border-radius:50%;

filter:blur(180px);

opacity:.12;

z-index:1;

animation:glowMove 8s ease-in-out infinite;
}

@keyframes glowMove{

0%,100%{
transform:scale(1);
}

50%{
transform:scale(1.25);
}

}

.light{

position:absolute;

border-radius:50%;

background:#d4af37;

filter:blur(60px);

opacity:.25;

z-index:1;
}

.light1{

width:160px;
height:160px;

top:10%;
left:10%;

animation:float1 8s ease-in-out infinite;
}

.light2{

width:120px;
height:120px;

right:10%;
bottom:10%;

animation:float2 10s ease-in-out infinite;
}

@keyframes float1{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-40px);
}
}

@keyframes float2{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(40px);
}
}

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

.portfolio-content{

position:relative;

z-index:5;

text-align:center;

max-width:850px;
}

.portfolio-label{

display:inline-block;

font-size:13px;

font-weight:700;

letter-spacing:4px;

color:#d4af37;

margin-bottom:20px;
}

.portfolio-title{

font-family:'Cinzel',serif;

font-size:clamp(60px,9vw,140px);

font-weight:900;

line-height:1.1;

letter-spacing:4px;

text-transform:uppercase;

display:inline-block;

background:
linear-gradient(
90deg,
#d4af37,
#fff3b0,
#173d6d,
#d4af37,
#fff6ca
);

background-size:300% auto;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:portfolioGoldFlow 6s linear infinite;

position:relative;

margin-bottom:20px;
}

/* Moving Gold + Navy Shine */

@keyframes portfolioGoldFlow{

0%{
background-position:0% center;
}

100%{
background-position:300% center;
}

}.portfolio-description{

max-width:700px;

margin:auto;

font-size:16px;

line-height:1.9;

color:rgba(255,255,255,.75);

margin-bottom:35px;
}

/* =====================================
   BUTTON
===================================== */

.portfolio-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:16px 36px;

border-radius:14px;

text-decoration:none;

font-weight:700;

font-size:15px;

color:#050816;

background:
linear-gradient(
135deg,
#d4af37,
#fff3b0
);

transition:.4s;

box-shadow:
0 10px 30px rgba(212,175,55,.25);
}

.portfolio-btn:hover{

transform:translateY(-6px);

box-shadow:
0 20px 50px rgba(212,175,55,.4);
}

.portfolio-btn::after{
content:"→";
}

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

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

.portfolio-section{

padding:60px 20px;

min-height:380px;

border-radius:25px;
}

.portfolio-bg-text{

font-size:22vw;
}

.portfolio-title{

font-size:60px;

letter-spacing:3px;
}

.portfolio-description{

font-size:14px;
line-height:1.8;
}
}
 */
 @media (max-width:768px){

.portfolio-section{
min-height:320px;
padding:40px 20px;
margin:40px 15px;
border-radius:25px;
}

.portfolio-bg-text{
font-size:20vw;
letter-spacing:0;
}

.portfolio-title{
font-size:clamp(40px,12vw,70px);
letter-spacing:2px;
}

.portfolio-description{
font-size:14px;
line-height:1.7;
}

}

@media (max-width:480px){

.portfolio-title{
font-size:36px;
}

.portfolio-btn{
padding:14px 24px;
font-size:14px;
}

}