/* =========================
   BUTTONS
========================= */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 28px;

    border-radius:999px;

    font-weight:600;

    transition:.3s ease;

    cursor:pointer;

}

.btn-primary{

    background:var(--color-accent);

    color:#fff;

}

.btn-primary:hover{

    background:var(--color-accent-hover);

    transform:translateY(-3px);

}

.btn-secondary{

    background:transparent;

    border:1px solid var(--color-border);

    color:#fff;

}

.btn-secondary:hover{

    border-color:rgba(255,255,255,.15);

    transform:translateY(-3px);

}

/* =========================
   SECTION ELEMENTS
========================= */

.section-label{

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

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:12px;

    display:inline-block;

    margin-bottom:16px;

}

/* =========================
   LINKS
========================= */

.portfolio-link{

    display:inline-block;

    margin-top:18px;

    color:#fff;

    font-weight:600;

    transition:.3s ease;

}

.portfolio-link:hover{

    opacity:.75;

}

/* =========================
   CATEGORY BADGE
========================= */

.portfolio-category{

    display:inline-block;

    margin-bottom:12px;

    color:var(--color-accent);

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

}

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

.filter-btn{

    background:#101010;

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

    color:#fff;

    padding:12px 24px;

    border-radius:999px;

    cursor:pointer;

    transition:.3s ease;

}

.filter-btn:hover{

    border-color:rgba(255,255,255,.2);

}

.filter-btn.active{

    background:#fff;

    color:#000;

}

/* =========================
   PAGINATION
========================= */

.pagination{

    display:flex;

    justify-content:center;

    gap:12px;

}

.pagination a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#101010;

    border:1px solid var(--color-border);

    color:#fff;

    transition:.3s ease;

}

.pagination a:hover{

    border-color:rgba(255,255,255,.15);

}

.pagination a.active{

    background:#fff;

    color:#000;

}

/* =========================
   FORM ELEMENTS
========================= */

.form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.form-group label{

    font-size:14px;

}

.form-group input,
.form-group textarea{

    background:#0a0a0a;

    border:1px solid var(--color-border);

    border-radius:14px;

    padding:16px;

    color:#fff;

    outline:none;

}

.form-group input:focus,
.form-group textarea:focus{

    border-color:var(--color-accent);

}

/* =========================
   COMMON CARD
========================= */

.card{

    background:var(--color-surface);

    border:1px solid var(--color-border);

    border-radius:30px;

}

/* =========================
   CONTACT
========================= */

.contact-form-wrapper .wpcf7 {
    width: 100%;
}

.contact-form-wrapper .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form-wrapper .form-group {
    display: flex;
    flex-direction: column;
}

.contact-form-wrapper label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.contact-form-wrapper input,
.contact-form-wrapper textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
}

.contact-form-wrapper textarea {
    min-height: 180px;
    resize: vertical;
}

.contact-form-wrapper .wpcf7-submit {
    cursor: pointer;
}