/* ===================================
   VARIABLES
   =================================== */
:root {
    --bg-dark-light: hsl(0, 0%, 17%);
    --bg-dark-darker: hsl(0, 0%, 11%);

    /* article */
    --article-max-width: 720px;
    --avatar-size: 3rem;
}

/* ===================================
   SPACING
   =================================== */
.py-6 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

/* ===================================
   BACKGROUND COLORS
   =================================== */
.bg-dark-light {
    background-color: var(--bg-dark-light) !important;
}

.bg-dark-darker {
    background-color: var(--bg-dark-darker) !important;
}

/* ===================================
   HEADER
   =================================== */
.user-badge {
    background-color: #238636;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.875rem;
}


/* ===================================
   HERO SECTION
   =================================== */
.hero-section {
    min-height: 500px;
    display: flex;
    align-items: center;
}

.profile-img-wrapper {
    position: relative;
    max-width: 250px;
    margin: 0 auto;
}

.profile-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border: 6px solid #374151;
}

/* ===================================
   CARDS
   =================================== */
.service-icon {
    width: 80px;
    height: 80px;
}

/* ===================================
   PROCESS SECTION
   =================================== */
.process-number > div {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
}

.process-step {
    padding: 1.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.process-step:hover {
    background-color: rgba(255, 255, 255, 0.03);
}


/* ===================================
   BLOG PAGES AND ARTICLES
   =================================== */
.article-container {
    width: min(90%, var(--article-max-width));
}

.author-avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
}