/*==================================================
    CORXOR DOCUMENTATION DESIGN SYSTEM
==================================================*/

/*==============================
    ROOT
==============================*/

:root {

    --primary: #0B63F6;
    --primary-light: #4DA3FF;

    --dark: #08111F;
    --dark-2: #0F1E33;
    --dark-3: #16263D;

    --text: #586879;
    --heading: #08111F;

    --white: #ffffff;

    --border: #E6EDF5;

    --background: #F7F9FC;

    --shadow:
        0 18px 45px rgba(8, 17, 31, .08);

    --radius: 18px;

    --transition: .35s ease;

}


/*==============================
    GLOBAL
==============================*/

.documentation-page,
.documentation-content {

    font-family: "Poppins", sans-serif;

}

.documentation-page * {

    box-sizing: border-box;

}

.documentation-page .container {

    width: min(92%, 980px);

    margin: auto;

}


/*==============================
    HERO
==============================*/

.documentation-page {

    padding: 145px 0 90px;

    background:
        linear-gradient(180deg,
            #071321 0%,
            #0B2038 55%,
            #08111F 100%);

}

.documentation-page {

    position: relative;

}

.documentation-page::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 1px;

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

}

/*====================================
    DOCUMENTATION TYPOGRAPHY
====================================*/

.documentation-content {

    background: #fff;

    padding: 90px 0 120px;

}

.documentation-content .container {

    max-width: 950px;

    margin: auto;

}

/*========================*/

.documentation-content h1 {

    font-family: "Poppins", sans-serif;

    font-size: 56px;

    font-weight: 700;

    line-height: 1.2;

    color: #08111F;

    margin-bottom: 28px;

}

/*========================*/

.documentation-content h2 {

    font-family: "Poppins", sans-serif;

    font-size: 36px;

    font-weight: 700;

    line-height: 1.25;

    color: #08111F;

    margin: 70px 0 24px;

}

/*========================*/

.documentation-content h3 {

    font-family: "Poppins", sans-serif;

    font-size: 26px;

    font-weight: 600;

    line-height: 1.35;

    color: #08111F;

    margin: 45px 0 18px;

}

/*========================*/

.documentation-content p {

    font-family: "Poppins", sans-serif;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.85;

    color: #586879;

    margin-bottom: 24px;

}

/*========================*/

.documentation-content li {

    font-family: "Poppins", sans-serif;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.85;

    color: #586879;

    margin-bottom: 14px;

}

.documentation-content strong {

    font-weight: 600;

    color: #08111F;

}


/*==============================
    SECTION TAG
==============================*/

.section-tag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 22px;

    border-radius: 999px;

    background:
        rgba(77, 163, 255, .10);

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

    color: #71B5FF;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    backdrop-filter: blur(12px);

}


/*==============================
    HERO TITLE
==============================*/

.documentation-page h1 {

    margin:

        28px 0 24px;

    color: #fff;

    font-size: 56px;

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -1px;

}


/*==============================
    INTRO
==============================*/

.page-intro {

    max-width: 880px;

    color: #B8C6D9;

    font-size: 18px;

    line-height: 1.9;

}


/*==============================
    BACK BUTTON
==============================*/

.doc-back {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 45px;

    text-decoration: none;

    color: #8FC4FF;

    font-weight: 600;

    transition: var(--transition);

}

.doc-back i {

    font-size: 15px;

}

.doc-back:hover {

    color: #fff;

    transform: translateX(-5px);

}


/*==============================
    CONTENT
==============================*/








/*==============================
    LIST
==============================*/

.documentation-content ul {

    margin: 28px 0 40px;

    padding-left: 24px;

}



/*==================================================
    DOCUMENTATION COMPONENTS
==================================================*/

/*==============================
    CODE BLOCK
==============================*/

.code-block {

    position: relative;

    margin: 40px 0;

    padding: 28px;

    overflow-x: auto;

    border-radius: 18px;

    background:
        linear-gradient(180deg,
            #101827,
            #0B1220);

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

    border-left: 5px solid var(--primary);

    box-shadow:
        0 18px 40px rgba(8, 17, 31, .20);

    color: #D8E4F5;

    font-family:
        Consolas,
        Monaco,
        monospace;

    font-size: 15px;

    line-height: 2;

    white-space: pre-line;

}

.code-block::before {

    content: "Example";

    display: inline-block;

    margin-bottom: 18px;

    padding: 6px 14px;

    border-radius: 999px;

    background:
        rgba(77, 163, 255, .12);

    color: #7EC2FF;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

}


/*==============================
    NOTE
==============================*/

.note-box {

    margin: 45px 0;

    padding: 30px;

    border-radius: 18px;

    background: #F4F9FF;

    border: 1px solid #D8E8FF;

    border-left: 6px solid #0B63F6;

    box-shadow: var(--shadow);

}

.note-box h4 {

    margin-bottom: 14px;

    color: #0B63F6;

    font-size: 22px;

    font-weight: 700;

}

.note-box p {

    margin: 0;

}


/*==============================
    INFO
==============================*/

.info-box {

    margin: 45px 0;

    padding: 30px;

    border-radius: 18px;

    background: #F2FCFE;

    border: 1px solid #D8F4F8;

    border-left: 6px solid #00ACC1;

    box-shadow: var(--shadow);

}

.info-box h4 {

    margin-bottom: 14px;

    color: #008BA3;

    font-size: 22px;

}

.info-box p {

    margin: 0;

}


/*==============================
    TIP
==============================*/

.tip-box {

    margin: 45px 0;

    padding: 30px;

    border-radius: 18px;

    background: #F3FCF6;

    border: 1px solid #D8F2DF;

    border-left: 6px solid #18A957;

    box-shadow: var(--shadow);

}

.tip-box h4 {

    margin-bottom: 14px;

    color: #188A4A;

    font-size: 22px;

}

.tip-box p {

    margin: 0;

}


/*==============================
    WARNING
==============================*/

.warning-box {

    margin: 45px 0;

    padding: 30px;

    border-radius: 18px;

    background: #FFF8EE;

    border: 1px solid #FFE4B6;

    border-left: 6px solid #F59E0B;

    box-shadow: var(--shadow);

}

.warning-box h4 {

    margin-bottom: 14px;

    color: #C87900;

    font-size: 22px;

}

.warning-box p {

    margin: 0;

}


/*==============================
    TABLE
==============================*/

.doc-table {

    width: 100%;

    margin: 45px 0;

    border-collapse: collapse;

    overflow: hidden;

    border-radius: 18px;

    box-shadow: var(--shadow);

}

.doc-table thead {

    background: #08111F;

}

.doc-table th {

    padding: 18px;

    color: #fff;

    text-align: left;

    font-size: 16px;

    font-weight: 600;

}

.doc-table td {

    padding: 18px;

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

    color: var(--text);

    font-size: 16px;

    background: #fff;

}

.doc-table tbody tr {

    transition: .25s;

}

.doc-table tbody tr:hover {

    background: #F8FBFF;

}


/*==============================
    HIGHLIGHT
==============================*/

.doc-highlight {

    color: var(--primary);

    font-weight: 700;

}


/*==============================
    DIVIDER
==============================*/

.doc-divider {

    width: 100%;

    height: 1px;

    margin: 80px 0;

    background:
        linear-gradient(90deg,
            transparent,
            #DCE7F5,
            transparent);

}


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

.documentation-content a {

    color: var(--primary);

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.documentation-content a:hover {

    color: #2A84FF;

}


/*==============================
    IMAGE
==============================*/

.documentation-content img {

    width: 100%;

    margin: 35px 0;

    border-radius: 18px;

    box-shadow: var(--shadow);

}


/*==============================
    BLOCKQUOTE
==============================*/

.documentation-content blockquote {

    margin: 40px 0;

    padding: 25px 30px;

    border-left: 5px solid var(--primary);

    background: #F8FBFF;

    border-radius: 14px;

    color: var(--text);

    font-style: italic;

}


/*==============================
    HOVER EFFECT
==============================*/

.note-box,
.warning-box,
.tip-box,
.info-box {

    transition: .35s;

}

.note-box:hover,
.warning-box:hover,
.tip-box:hover,
.info-box:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 50px rgba(8, 17, 31, .12);

}

/*==================================================
    FOOTER BUTTON
==================================================*/

.documentation-footer {

    margin-top: 90px;

    display: flex;

    justify-content: center;

}

.documentation-footer .doc-back {

    padding: 16px 30px;

    background: var(--dark);

    color: #fff;

    border-radius: 12px;

    transition: var(--transition);

}

.documentation-footer .doc-back:hover {

    background: var(--primary);

    transform: translateY(-3px);

}


/*==================================================
    SELECTION
==================================================*/

::selection {

    background: var(--primary);

    color: #fff;

}


/*==================================================
    SCROLLBAR
==================================================*/

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #eef2f7;

}

::-webkit-scrollbar-thumb {

    background: #9abcf8;

    border-radius: 999px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--primary);

}


/*==================================================
    SPACING HELPERS
==================================================*/

.mt-0 {

    margin-top: 0 !important;

}

.mt-30 {

    margin-top: 30px;

}

.mt-50 {

    margin-top: 50px;

}

.mt-70 {

    margin-top: 70px;

}

.mb-0 {

    margin-bottom: 0 !important;

}

.mb-30 {

    margin-bottom: 30px;

}

.mb-50 {

    margin-bottom: 50px;

}

.center {

    text-align: center;

}

.w-100 {

    width: 100%;

}


/*==================================================
    SMOOTH SCROLL
==================================================*/

html {

    scroll-behavior: smooth;

}


/*==================================================
    RESPONSIVE
==================================================*/

@media(max-width:992px) {

    .documentation-page {

        padding: 130px 0 80px;

    }

    .documentation-page h1 {

        font-size: 48px;

    }

    .documentation-content {

        padding: 70px 0 100px;

    }

    .documentation-content h2 {

        font-size: 32px;

    }

    .documentation-content h3 {

        font-size: 24px;

    }

    .doc-table {

        display: block;

        overflow-x: auto;

    }

}


@media(max-width:768px) {

    .documentation-page {

        padding: 120px 0 70px;

    }

    .documentation-page h1 {

        font-size: 40px;

    }

    .page-intro {

        font-size: 17px;

    }

    .documentation-content {

        padding: 60px 0 90px;

    }

    .documentation-content h2 {

        font-size: 28px;

        margin-top: 55px;

    }

    .documentation-content h3 {

        font-size: 22px;

    }

    .documentation-content p {

        font-size: 16px;

    }

    .documentation-content li {

        font-size: 16px;

    }

    .code-block {

        padding: 22px;

        font-size: 14px;

        line-height: 1.8;

    }

    .note-box,
    .warning-box,
    .tip-box,
    .info-box {

        padding: 22px;

    }

    .doc-table th,
    .doc-table td {

        padding: 14px;

        font-size: 15px;

    }

    .documentation-footer .doc-back {

        width: 100%;

        justify-content: center;

    }

}


@media (max-width:768px) {

    .documentation-content h1 {
        font-size: 44px;
    }

    .documentation-content h2 {
        font-size: 30px;
    }

    .documentation-content h3 {
        font-size: 24px;
    }

    .documentation-content p,
    .documentation-content li {
        font-size: 17px;
    }

}

@media (max-width:576px) {

    .documentation-content h1 {
        font-size: 36px;
    }

    .documentation-content h2 {
        font-size: 28px;
    }

    .documentation-content h3 {
        font-size: 22px;
    }

    .documentation-content p,
    .documentation-content li {
        font-size: 16px;
    }

}


/*==================================================
    SMALL ANIMATIONS
==================================================*/

.documentation-content img,
.doc-table,
.code-block {

    transition: var(--transition);

}

.documentation-content img:hover {

    transform: translateY(-5px);

}

.code-block:hover {

    transform: translateY(-4px);

    box-shadow:

        0 25px 55px rgba(8, 17, 31, .25);

}

.doc-table:hover {

    box-shadow:

        0 22px 50px rgba(8, 17, 31, .10);

}


/*==================================================
    END
==================================================*/