/*
|--------------------------------------------------------------------------
| Container
|--------------------------------------------------------------------------
*/

.pc-container{

width:min(
100%,
var(--container-width)
);

margin:auto;

padding-inline:20px;

}



/*
|--------------------------------------------------------------------------
| Section
|--------------------------------------------------------------------------
*/

.pc-section{

position:relative;

padding-block:120px;

}



/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/

.pc-card{

padding:40px;

border-radius:var(--radius-lg);

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

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

transition:var(--transition);

}



/*
|--------------------------------------------------------------------------
| Glass
|--------------------------------------------------------------------------
*/

.pc-glass{

backdrop-filter:blur(20px);

background:rgba(255,255,255,.05);

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

}



/*
|--------------------------------------------------------------------------
| 3D Card
|--------------------------------------------------------------------------
*/

.pc-card-3d{

transform-style:preserve-3d;

}



/*
|--------------------------------------------------------------------------
| Hover Lift
|--------------------------------------------------------------------------
*/

.pc-hover-lift:hover{

transform:
translateY(-10px);

}



/*
|--------------------------------------------------------------------------
| Glow
|--------------------------------------------------------------------------
*/

.pc-hover-glow:hover{

box-shadow:

0 0 40px rgba(55,47,160,.4);

}



/*
|--------------------------------------------------------------------------
| Gradient Background
|--------------------------------------------------------------------------
*/

.pc-gradient-bg{

background:

linear-gradient(
135deg,
var(--color-primary),
var(--color-secondary)
);

}



/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.pc-btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 40px;

border-radius:100px;

background:var(--color-secondary);

color:#fff;

font-weight:600;

text-decoration:none;

transition:var(--transition);

}

.pc-btn-primary:hover{

transform:translateY(-4px);

}



.pc-btn-outline{

display:inline-flex;

padding:18px 40px;

border-radius:100px;

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

color:#fff;

text-decoration:none;

}



/*
|--------------------------------------------------------------------------
| Reveal
|--------------------------------------------------------------------------
*/

.pc-reveal-up{

opacity:0;

transform:translateY(60px);

}

.pc-reveal-left{

opacity:0;

transform:translateX(-60px);

}

.pc-reveal-right{

opacity:0;

transform:translateX(60px);

}