:root {
    /* === PRIMARY COLORS === */
    --primary-50: #fdebec;
    --primary-100: #fac0c4;
    --primary-200: #f8a1a7;
    --primary-300: #f4767f;
    --primary-400: #f25c66;
    --primary-500: #ef3340;
    --primary-600: #d92e3a;
    --primary-700: #aa242d;
    --primary-800: #831c23;
    --primary-900: #64151b;

    /* === SECONDARY COLORS === */
    --secondary-50: #e6e8f1;
    --secondary-100: #b0b7d3;
    --secondary-200: #8a95be;
    --secondary-300: #5464a0;
    --secondary-400: #33468d;
    --secondary-500: #001871;
    --secondary-600: #001667;
    --secondary-700: #001150;
    --secondary-800: #000d3e;
    --secondary-900: #000a2f;
}

.text-primary-500 {
    color: var(--primary-500);
}

.text-secondary-500 {
    color: var(--secondary-500);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--secondary-500);
}

.content-wrapper {
    color: var(--secondary-500);
}

section {
    padding: 40px 0;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    section {
        padding: 50px;
    }
}


.breadcrumb {
    padding-top: 0;
}

/* Breadcrumb */
.breadcrumb-item {
    font-size: 10px;
    font-family: 'NexaHeavy', sans-serif;
}
/* Header */
.header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    transform: translateY(0);
}

/* Only apply hide/show behavior on screens larger than 768px */
@media (min-width: 769px) {
    .header-wrapper.hidden-navbar {
        transform: translateY(-100%);
    }
}

/* Ensure body has proper padding to account for fixed header */
body {
    padding-top: 0; /* Will be adjusted by JavaScript based on header height */
}