/* ===============================
PROJECT SECTION
================================ */

.project-section{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:120px 40px;
}

/* ===============================
PROJECT CARD
================================ */

.project-glass-card{
width:min(1200px,95%);
padding:60px;
border-radius:32px;
background:rgba(56,122,43,.55);
backdrop-filter:blur(26px) saturate(160%);
box-shadow:0 40px 120px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.12);
display:flex;
flex-direction:column;
gap:36px;
position:relative;
}

/* ===============================
CAREERFLOW CARD COLOR
================================ */

.purple-card{
background:rgba(98,43,122,.65);
}

/* ===============================
HEADER
================================ */

.project-header{
display:flex;
align-items:center;
gap:24px;
flex-wrap:wrap;
}

/* ===============================
LOGOS
================================ */

.project-icon{
width:72px;
height:72px;
border-radius:18px;
object-fit:contain;
}

.project-icon-large{
height:70px;
width:auto;
object-fit:contain;
}

/* ===============================
TITLE
================================ */

.project-title{
font-size:3.4rem;
font-weight:900;
line-height:1;
}

.project-title-block{
display:flex;
flex-direction:column;
gap:6px;
}

/* ===============================
VIEW CODE LINK
================================ */

.project-code-link{
color:white;
text-decoration:none;
font-weight:600;
}

.project-code-link:hover{
text-decoration:underline;
}

/* ===============================
TECH STACK
================================ */

.project-tech{
position:absolute;
top:32px;
right:36px;
display:flex;
gap:18px;
align-items:center;
}

/* ===============================
TECH ICONS
================================ */

.tech-icon{
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
animation:floatTech 6s ease-in-out infinite;
}

.tech-icon img{
width:100%;
}

/* ===============================
DESCRIPTION
================================ */

.project-description{
font-size:1.15rem;
line-height:1.7;
max-width:850px;
color:rgba(255,255,255,.9);
}

/* ===============================
CAROUSEL (Just Bean It)
================================ */

.carousel-wrapper{
display:flex;
justify-content:center;
}

.carousel-track{
display:flex;
gap:28px;
padding:12px;
}

.carousel-item img{
width:230px;
border-radius:22px;
box-shadow:0 20px 50px rgba(0,0,0,.5);
}

/* ===============================
CAREERFLOW PREVIEW
================================ */

.careerflow-preview{
display:flex;
justify-content:center;
margin-top:40px;
}

.careerflow-image img{
width:600px;
max-width:95%;
border-radius:20px;
box-shadow:0 25px 70px rgba(0,0,0,.55);
}

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

.demo-link{
display:block;
margin-top:30px;
font-weight:600;
}