@font-face {
    font-family: 'Involve';
    src: url('/static/fonts/Involve-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Involve';
    src: url('/static/fonts/Involve-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Involve';
    src: url('/static/fonts/Involve-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Involve';
    src: url('/static/fonts/Involve-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


body {
    font-family: 'Involve', sans-serif;
    overflow-y: scroll;
}

h1,
.text-content h1 {
    font-size: 2.25rem;
    /* text-4xl */
    font-weight: 700;
    /* font-bold */
    color: #111827;
    /* text-gray-900 */
    margin-bottom: 1rem;
    /* mb-4 */
}

h2,
.text-content h2 {
    font-size: 1.875rem;
    /* text-3xl */
    font-weight: 600;
    /* font-semibold */
    color: #1f2937;
    /* text-gray-800 */
    margin-bottom: 0.75rem;
    /* mb-3 */
}

h3,
.text-content h3 {
    font-size: 1.5rem;
    /* text-2xl */
    font-weight: 600;
    /* font-semibold */
    color: #374151;
    /* text-gray-700 */
    margin-bottom: 0.5rem;
    /* mb-2 */
}

h4,
.text-content h4 {
    font-size: 1.25rem;
    /* text-xl */
    font-weight: 500;
    /* font-medium */
    color: #374151;
    /* text-gray-700 */
    margin-bottom: 0.5rem;
    /* mb-2 */
}

h5,
.text-content h5 {
    font-size: 1.125rem;
    /* text-lg */
    font-weight: 500;
    /* font-medium */
    color: #4b5563;
    /* text-gray-600 */
    margin-bottom: 0.25rem;
    /* mb-1 */
}

h6,
.text-content h6 {
    font-size: 1rem;
    /* text-base */
    font-weight: 500;
    /* font-medium */
    color: #4b5563;
    /* text-gray-600 */
    margin-bottom: 0.25rem;
    /* mb-1 */
}

p,
.text-content p {
    font-size: 1rem;
    /* text-base */
    color: #374151;
    /* text-gray-700 */
    line-height: 1.625;
    /* leading-relaxed */
    margin-bottom: 1rem;
    /* mb-4 */
}

a,
.text-content a {
    color: #2563eb;
    /* text-blue-600 */
    text-decoration: underline;
}

a:hover,
.text-content a:hover {
    color: #1d4ed8;
    /* hover:text-blue-800 */
}

strong,
.text-content strong {
    font-weight: 600;
    /* font-semibold */
    color: #111827;
    /* text-gray-900 */
}

em,
.text-content em {
    font-style: italic;
    color: #374151;
    /* text-gray-700 */
}

blockquote,
.text-content blockquote {
    font-size: 1.125rem;
    /* text-lg */
    color: #4b5563;
    /* text-gray-600 */
    border-left: 4px solid #d1d5db;
    /* border-l-4 border-gray-300 */
    padding-left: 1rem;
    /* pl-4 */
    font-style: italic;
    margin: 1rem 0;
    /* my-4 */
}

ul,
ol,
.text-content ul,
.text-content ol {
    list-style-position: inside;
    color: #374151;
    /* text-gray-700 */
    margin-bottom: 1rem;
    /* mb-4 */
}

ul,
.text-content ul {
    list-style-type: disc;
    /* list-disc */
}

ol,
.text-content ol {
    list-style-type: decimal;
    /* list-decimal */
}

li,
.text-content li {
    margin-bottom: 0.5rem;
    /* mb-2 */
}

small,
.text-content small {
    font-size: 0.875rem;
    /* text-sm */
    color: #6b7280;
    /* text-gray-500 */
}

.text-primary {
    color: #2653f2;
}

.text-primary-hover:hover {
    color: #0431D0;
}

.bg-primary {
    background-color: #2653f2;
}

.bg-primary-hover:hover {
    background-color: #0431D0;
}

.border-primary {
    border-color: #2653f2;
}

.button-primary {
    background-color: #2653f2;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 40px;
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    transition: all ease 0.2s;
}

.button-primary:hover {
    background-color: #0431D0;
}

.button-secondary {
    backdrop-filter: blur(80px);
    background-color: rgba(45, 45, 45, 0.9);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 40px;
    display: flex;
    gap: 12px;
    align-items: center;
    transition: all ease 0.2s;
}

.button-secondary:hover {
    background: linear-gradient(180deg, rgba(45, 45, 45, 0.9) 0%, rgba(45, 45, 45, 0.8) 100%);

}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: rgba(209, 209, 209, 0.05);
}

::-webkit-scrollbar-thumb {
    background-color: #2653f2;
    border-radius: 0;
    border: 3px solid #2653f2;
}

.documentation {
    line-height: 1.6;
}

.documentation h1 {
    color: #333;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
}

.documentation h2 {
    color: #555;
    margin-top: 30px;
    margin-bottom: 15px;
}

.documentation h3 {
    color: #666;
    margin-top: 25px;
    margin-bottom: 10px;
}

.documentation ul,
.documentation ol {
    margin: 10px 0;
    padding-left: 20px;
}

.documentation li {
    margin: 5px 0;
}

.documentation code {
    background-color: #f8f9fa;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
}

.documentation pre {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
}

.documentation blockquote {
    border-left: 4px solid #007bff;
    margin: 20px 0;
    padding-left: 20px;
    color: #666;
}

.documentation a {
    color: #007bff;
    text-decoration: none;
}

.documentation a:hover {
    text-decoration: underline;
}

.custom-select {
    position: relative;
}

.custom-select .custom-select-dropdown {
    left: 0;
    right: 0;
}

.custom-select-option {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.875rem;
}

.custom-select-option:hover {
    background: #f3f4f6;
}

.custom-select-option.selected {
    background: #eff6ff;
    color: #1d4ed8;
}

.bx-livechat-copyright {
    display: none !important;
}