@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {
    --font-sans:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;

    /* Brand */
    --brand-blue: #2789d9;
    --brand-blue-dark: #176db8;
    --brand-green: #35b66f;

    --brand-gradient:
        linear-gradient(
            135deg,
            #db91ff 0%,
            #389fd5 52%,
            #357fd3 100%
        );

    --brand-gradient-hover:
        linear-gradient(
            135deg,
            #2eaa69 0%,
            #318fc4 52%,
            #2f72c2 100%
        );

    /* Neutral palette */
    --page-bg: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f8f9fb;
    --surface-blue: #f5f8fd;

    --text-primary: #0f1c2e;
    --text-secondary: #4f5f73;
    --text-muted: #7d899a;

    --border: #e1e6ed;
    --border-hover: #cdd6e2;

    /* Layout */
    --content-width: 1320px;
    --page-gutter: clamp(20px, 4vw, 56px);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    /* Shadows */
    --shadow-xs:
        0 1px 2px rgba(15, 28, 46, 0.025);

    --shadow-sm:
        0 5px 18px rgba(15, 28, 46, 0.055);

    --shadow-hover:
        0 12px 30px rgba(15, 28, 46, 0.08);

    --shadow-dropdown:
        0 18px 50px rgba(15, 28, 46, 0.13);

    --transition:
        180ms cubic-bezier(.2, .65, .3, 1);


    /* -----------------------------------------------------
       Compatibility with existing Help Scout CSS
       ----------------------------------------------------- */

    --color-white: #ffffff;
    --color-black: #111827;

    --color-gray-1: #f7f8fa;
    --color-gray-3: #e1e6ed;
    --color-gray-5: #cfd7e2;
    --color-gray-7: #7d899a;

    --color-blue-5: #2789d9;
    --color-blue-7: #176db8;

    --color-green-5: #35b66f;
    --color-green-7: #289459;

    --color-red-5: #ef4444;

    --global-spacing-4: 4px;
    --global-spacing-8: 8px;
    --global-spacing-12: 12px;
    --global-spacing-16: 16px;
    --global-spacing-20: 20px;
    --global-spacing-24: 24px;
    --global-spacing-32: 32px;
    --global-spacing-40: 40px;
    --global-spacing-52: 52px;
    --global-spacing-60: 60px;

    --global-border-radius-small: 6px;
    --global-border-radius-medium: 10px;
    --global-border-radius-large: 14px;

    --global-transition-duration-default: 0.18s;
}


/* =========================================================
   02. RESET / GLOBAL
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    min-height: 100%;

    background:
        var(--page-bg);

    scroll-behavior:
        smooth;
}


body {
    min-height: 100%;

    margin: 0;

    padding: 0 !important;

    background:
        var(--page-bg) !important;

    color:
        var(--text-primary);

    font-family:
        var(--font-sans);

    font-size:
        16px;

    line-height:
        1.6;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;
}


img {
    display: block;

    max-width: 100%;

    height: auto;
}


a {
    color:
        var(--brand-blue-dark);

    text-underline-offset:
        3px;
}


button,
input,
select,
textarea {
    font:
        inherit;
}


.container-fluid {
    width: 100%;

    max-width:
        var(--content-width);

    margin-inline:
        auto;
}


::selection {
    background:
        rgba(53, 142, 211, 0.18);

    color:
        var(--text-primary);
}


a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        3px solid
        rgba(53, 142, 211, 0.22);

    outline-offset:
        3px;
}


.sr-only {
    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(0, 0, 0, 0) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;
}


/* =========================================================
   03. STICKY HEADER
   ========================================================= */

.navbar {
    position:
        sticky;

    top:
        0;

    z-index:
        2000;

    width:
        100%;

    margin:
        0;

    padding:
        0 var(--page-gutter);

    border:
        0;

    border-bottom:
        1px solid
        rgba(225, 230, 237, 0.85);

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        none;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        background-color 200ms ease,
        box-shadow 200ms ease;
}


.navbar .navbar-inner {
    width:
        100%;

    max-width:
        var(--content-width);

    min-height:
        76px;

    margin:
        0 auto;

    padding:
        0;

    border:
        0;

    background:
        transparent !important;

    box-shadow:
        none;
}


.navbar .navbar-inner .container-fluid {
    min-height:
        76px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        32px;
}


.navbar .brand {
    float:
        none;

    display:
        flex;

    align-items:
        center;

    margin:
        0;

    padding:
        12px 0;
}


.navbar .brand img {
    display:
        block;

    width:
        178px;

    height:
        auto;

    transition:
        width 200ms ease;
}


.navbar .nav-collapse {
    margin-left:
        auto;
}


.navbar .nav {
    float:
        none;

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

    margin:
        0;

    padding:
        0;
}


.navbar .nav > li {
    float:
        none;

    margin:
        0;
}


.navbar .nav li a,
.navbar .nav li a:visited {
    position:
        relative;

    display:
        block;

    margin:
        0;

    padding:
        27px 0 24px;

    border:
        0;

    background:
        transparent !important;

    color:
        #26364b !important;

    font-family:
        var(--font-sans);

    font-size:
        14px;

    font-weight:
        500;

    line-height:
        24px;

    letter-spacing:
        -0.01em;

    text-decoration:
        none;

    text-shadow:
        none;

    transition:
        color var(--transition),
        padding var(--transition);
}


.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
    background:
        transparent !important;

    color:
        var(--text-primary) !important;
}


.navbar .nav li.active a {
    font-weight:
        600;
}


.navbar .nav li.active a::after {
    content:
        '';

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -1px;

    height:
        2px;

    border-radius:
        2px 2px 0 0;

    background:
        var(--brand-gradient);
}


.navbar .nav .caret,
.navbar .nav li.active a .caret {
    display:
        none;
}


/* =========================================================
   04. HEADER SHRINK ON SCROLL
   Progressive enhancement for Chrome / modern browsers
   ========================================================= */

@supports (animation-timeline: scroll()) {

    .navbar {
        animation:
            navbar-scroll
            linear
            both;

        animation-timeline:
            scroll();

        animation-range:
            0 150px;
    }


    .navbar .navbar-inner,
    .navbar .navbar-inner .container-fluid {
        animation:
            navbar-height-scroll
            linear
            both;

        animation-timeline:
            scroll();

        animation-range:
            0 150px;
    }


    .navbar .brand img {
        animation:
            navbar-logo-scroll
            linear
            both;

        animation-timeline:
            scroll();

        animation-range:
            0 150px;
    }


    .navbar .nav li a {
        animation:
            navbar-link-scroll
            linear
            both;

        animation-timeline:
            scroll();

        animation-range:
            0 150px;
    }


    @keyframes navbar-scroll {

        from {
            background:
                rgba(255, 255, 255, 0.96);

            box-shadow:
                0 0 0
                rgba(15, 28, 46, 0);
        }

        to {
            background:
                rgba(255, 255, 255, 0.78);

            box-shadow:
                0 8px 28px
                rgba(15, 28, 46, 0.07);
        }

    }


    @keyframes navbar-height-scroll {

        from {
            min-height:
                76px;
        }

        to {
            min-height:
                60px;
        }

    }


    @keyframes navbar-logo-scroll {

        from {
            width:
                178px;
        }

        to {
            width:
                152px;
        }

    }


    @keyframes navbar-link-scroll {

        from {
            padding-top:
                27px;

            padding-bottom:
                24px;
        }

        to {
            padding-top:
                18px;

            padding-bottom:
                15px;
        }

    }

}


/* =========================================================
   05. MOBILE NAV BUTTON
   ========================================================= */

.navbar .btn-navbar {
    float:
        none;

    display:
        none;

    width:
        42px;

    height:
        42px;

    margin:
        0;

    padding:
        0;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        4px;

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

    border-radius:
        9px;

    background:
        #ffffff;

    box-shadow:
        none;
}


.navbar .btn-navbar .icon-bar {
    display:
        block;

    width:
        18px;

    height:
        2px;

    margin:
        0;

    border-radius:
        2px;

    background:
        var(--text-primary);

    box-shadow:
        none;
}


/* =========================================================
   06. HERO
   ========================================================= */

#docsSearch {
    position:
        relative;

    z-index:
        20;

    width:
        calc(
            100% -
            (var(--page-gutter) * 2)
        );

    max-width:
        var(--content-width);

    min-height:
        360px;

    margin:
        40px
        auto
        0;

    padding:
        clamp(48px, 5.5vw, 76px)
        clamp(32px, 6vw, 80px);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        flex-start;

    /*
       IMPORTANT:
       visible allows search results to escape the hero
       instead of being clipped inside it.
    */

    overflow:
        visible;

    border:
        1px solid
        #dfe6f0;

    border-radius:
        var(--radius-xl);

    background-color:
        #f5f8fc;

    /*
       The photo is rendered at hero height rather than stretched
       across the entire 1320px container.

       This greatly reduces the "low-resolution" appearance.
    */

    background-image:
        linear-gradient(
            90deg,
            rgba(245, 248, 253, 1) 0%,
            rgba(245, 248, 253, 0.99) 32%,
            rgba(245, 248, 253, 0.91) 48%,
            rgba(245, 248, 253, 0.58) 64%,
            rgba(245, 248, 253, 0.08) 85%
        ),
        url(
            'https://i.postimg.cc/52D2Dhq6/Design-sem-nome-1.png'
        );

    background-repeat:
        no-repeat,
        no-repeat;

    background-position:
        center,
        right center;

    background-size:
        cover,
        auto 100%;

    box-shadow:
        none;
}


/*
   A background itself respects border-radius even while the
   element allows overflowing children, so the autocomplete
   can extend below without losing the rounded hero.
*/

#docsSearch h1 {
    width:
        min(
            680px,
            100%
        );

    margin:
        0 0 30px;

    padding:
        0;

    color:
        #0d1b2d;

    font-family:
        var(--font-sans);

    font-size:
        clamp(
            38px,
            4.5vw,
            58px
        );

    font-weight:
        600;

    line-height:
        1.07;

    letter-spacing:
        -0.045em;

    text-align:
        left;
}


/* =========================================================
   07. HERO SEARCH
   ========================================================= */

#docsSearch #searchBar {
    position:
        relative;

    z-index:
        100;

    display:
        flex;

    align-items:
        stretch;

    width:
        min(
            670px,
            100%
        );

    max-width:
        100%;

    margin:
        0;

    padding:
        0;

    border:
        1px solid
        #d2dae6;

    border-radius:
        12px;

    background:
        #ffffff;

    box-shadow:
        0 4px 18px
        rgba(21, 39, 68, 0.065);

    text-align:
        left;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}


#docsSearch #searchBar:focus-within {
    border-color:
        #90b9d9;

    box-shadow:
        0 0 0 3px
        rgba(56, 159, 213, 0.12),
        0 7px 22px
        rgba(21, 39, 68, 0.07);
}


#docsSearch #searchBar .search-query {
    float:
        none;

    flex:
        1 1 auto;

    width:
        auto;

    min-width:
        0;

    height:
        58px;

    margin:
        0 !important;

    padding:
        0 18px;

    border:
        0;

    border-radius:
        11px 0 0 11px;

    background:
        #ffffff;

    color:
        var(--text-primary);

    font-family:
        var(--font-sans);

    font-size:
        15px;

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -0.01em;

    box-shadow:
        none;
}


#docsSearch #searchBar .search-query:focus {
    outline:
        none;

    box-shadow:
        none;
}


#docsSearch #searchBar .search-query::placeholder {
    color:
        #8a96a7;

    opacity:
        1;

    font-family:
        var(--font-sans);

    font-size:
        15px;

    font-weight:
        400;
}


/* =========================================================
   08. SEARCH BUTTON — SOFTER BRAND GRADIENT
   ========================================================= */

#docsSearch #searchBar button {
    position:
        relative;

    float:
        none;

    flex:
        0 0 auto;

    width:
        auto;

    min-width:
        114px;

    height:
        58px;

    top:
        auto;

    right:
        auto;

    margin:
        0;

    padding:
        0 22px;

    border:
        0;

    border-radius:
        0 11px 11px 0;

    background:
        var(--brand-gradient);

    color:
        #ffffff;

    font-family:
        var(--font-sans);

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1;

    text-align:
        center;

    text-shadow:
        none;

    box-shadow:
        none;

    transition:
        background var(--transition),
        filter var(--transition);
}


#docsSearch #searchBar button::before {
    display:
        none !important;
}


#docsSearch #searchBar button:hover {
    background:
        var(--brand-gradient-hover);

    filter:
        saturate(0.97);
}


#docsSearch #searchBar button:active {
    filter:
        brightness(0.96);
}


#docsSearch #searchBar button .icon-search {
    margin-right:
        6px;

    color:
        currentColor;
}


#docsSearch #searchBar button span {
    position:
        static;
}


/* =========================================================
   09. AUTOCOMPLETE DROPDOWN
   Fix:
   - can extend outside hero
   - one scrollbar only
   - proper width
   - separate from search field
   ========================================================= */

#serp-dd {
    position:
        absolute !important;

    z-index:
        5000 !important;

    top:
        calc(100% + 8px) !important;

    left:
        0 !important;

    right:
        auto !important;

    width:
        100% !important;

    max-width:
        none !important;

    height:
        auto !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        6px !important;

    overflow:
        visible !important;

    border:
        1px solid
        var(--border) !important;

    border-radius:
        12px !important;

    background:
        #ffffff !important;

    box-shadow:
        var(--shadow-dropdown) !important;
}


#serp-dd .result {
    width:
        100%;

    max-height:
        310px;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    list-style:
        none;

    overscroll-behavior:
        contain;

    scrollbar-width:
        thin;

    scrollbar-color:
        #c6ced8
        transparent;
}


#serp-dd .result::-webkit-scrollbar {
    width:
        7px;
}


#serp-dd .result::-webkit-scrollbar-track {
    background:
        transparent;
}


#serp-dd .result::-webkit-scrollbar-thumb {
    border:
        2px solid
        #ffffff;

    border-radius:
        999px;

    background:
        #c6ced8;
}


#serp-dd .result > li {
    margin:
        0 !important;

    padding:
        0;
}


#serp-dd .result > li:first-child {
    margin-top:
        0 !important;
}


#serp-dd .result > li:last-child {
    margin-bottom:
        0 !important;
}


#serp-dd .result a {
    display:
        block;

    margin:
        0 !important;

    padding:
        12px 14px !important;

    border-radius:
        8px;

    background:
        transparent;

    color:
        var(--text-secondary) !important;

    font-family:
        var(--font-sans);

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.5;

    letter-spacing:
        -0.008em;

    text-decoration:
        none;

    transition:
        background-color var(--transition),
        color var(--transition);
}


#serp-dd .result a:hover,
#serp-dd .result > li.active,
#serp-dd .result > li.active a {
    background:
        #f5f7fa !important;

    color:
        var(--text-primary) !important;
}


#serp-dd .noResults {
    margin:
        0;

    padding:
        12px 14px;

    color:
        var(--text-muted);

    font-family:
        var(--font-sans);

    font-size:
        14px;

    font-weight:
        400;
}


/* =========================================================
   10. HOME CONTENT
   ========================================================= */

#contentArea {
    position:
        relative;

    z-index:
        1;

    width:
        calc(
            100% -
            (var(--page-gutter) * 2)
        );

    max-width:
        var(--content-width);

    margin:
        0 auto;

    padding:
        0;
}


#noResults {
    margin:
        40px 0;

    padding:
        18px 20px;

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

    border-radius:
        var(--radius-md);

    background:
        var(--surface-soft);

    color:
        var(--text-secondary);
}


/* =========================================================
   11. COLLECTION SECTIONS
   ========================================================= */

.collection-category {
    margin:
        72px
        0
        0;

    padding:
        0;
}


.collection-category h2 {
    margin:
        0
        0
        28px;

    padding:
        0;

    color:
        var(--text-primary);

    font-family:
        var(--font-sans);

    font-size:
        clamp(
            26px,
            2.2vw,
            32px
        );

    font-weight:
        600;

    line-height:
        1.2;

    letter-spacing:
        -0.035em;

    text-align:
        left;
}


.collection-category h2 a,
.collection-category h2 a:visited {
    color:
        inherit;

    text-decoration:
        none;
}


.collection-category h2 a:hover {
    color:
        var(--brand-blue-dark);

    text-decoration:
        none;
}


/* =========================================================
   12. CATEGORY GRID
   ========================================================= */

.collection-category .category-list {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        22px;

    margin:
        0;

    padding:
        0;

    align-items:
        stretch;
}


section#collection-category-269 .category-list {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}


/* =========================================================
   13. CATEGORY CARDS
   No background movement on hover
   ========================================================= */

.category-list .category {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    min-width:
        0;

    margin:
        0 !important;

    /*
       Existing images are 458 × 200.
       This keeps the artwork's exact aspect ratio.
    */

    padding:
        43.668% 0 0;

    overflow:
        hidden;

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

    border-radius:
        var(--radius-lg);

    background-color:
        #f6f7f9;

    background-repeat:
        no-repeat !important;

    background-position:
        center top !important;

    background-size:
        100% auto !important;

    color:
        var(--text-primary);

    text-decoration:
        none;

    box-shadow:
        none;

    /*
       Do NOT transition background-position or background-size.
       The illustration stays completely locked in place.
    */

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}


.category-list .category:hover {
    border-color:
        var(--border-hover);

    background-position:
        center top !important;

    background-size:
        100% auto !important;

    box-shadow:
        var(--shadow-hover);

    transform:
        translateY(-3px);

    text-decoration:
        none;
}


.category-list .category:active {
    transform:
        translateY(-1px);
}


.category-list .category:focus-visible {
    border-color:
        #9bbfdc;

    box-shadow:
        0 0 0 3px
        rgba(56, 159, 213, 0.11);

    outline:
        none;
}


.category-list .category > p:empty {
    display:
        none;
}


/* Kill original hover pseudo-border */

.category-list .category:hover h3::before,
.category-list .category h3::before {
    display:
        none !important;

    content:
        none !important;
}


/* =========================================================
   14. CATEGORY CARD TEXT
   ========================================================= */

.category-list h3 {
    position:
        relative;

    flex:
        0 0 auto;

    height:
        auto !important;

    min-height:
        0;

    margin:
        0;

    padding:
        19px
        20px
        6px;

    border:
        0;

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

    border-radius:
        0;

    background:
        #ffffff;

    color:
        var(--text-primary);

    font-family:
        var(--font-sans);

    font-size:
        15px;

    font-weight:
        600;

    line-height:
        1.45;

    letter-spacing:
        -0.018em;

    text-align:
        left;
}


.category-list .category .article-count {
    position:
        static;

    display:
        block !important;

    flex:
        1 1 auto;

    margin:
        0;

    padding:
        0
        20px
        19px;

    border:
        0;

    border-radius:
        0;

    background:
        #ffffff;

    color:
        var(--text-muted) !important;

    font-family:
        var(--font-sans);

    font-size:
        12px;

    font-weight:
        400;

    line-height:
        1.4;

    text-align:
        left;

    text-transform:
        none;
}


.category-list .category:hover .article-count {
    color:
        var(--text-muted) !important;
}


/* =========================================================
   15. VERSION SECTION
   Remove the mismatching grey container
   ========================================================= */

#collection-category-269 {
    margin-top:
        82px;

    padding:
        0;

    border:
        0;

    border-radius:
        0;

    background:
        transparent;

    box-shadow:
        none;
}


#collection-category-269 h2 {
    margin-bottom:
        28px;
}


#collection-category-269 .category {
    background-color:
        #f6f7f9;
}


/* =========================================================
   16. CATEGORY ARTWORK
   ========================================================= */

#category-6 {
    background-image:
        url('https://i.postimg.cc/prdZxVMF/Design-sem-nome-21.png');
}


#category-5 {
    background-image:
        url('https://i.postimg.cc/5970t9M2/Design-sem-nome-22.png');
}


#category-254 {
    background-image:
        url('https://i.postimg.cc/Z5JCrYXP/General-information.png');
}


#category-255 {
    background-image:
        url('https://i.postimg.cc/DfqvBkrx/Getting-Started.png');
}


#category-256 {
    background-image:
        url('https://i.postimg.cc/7LyJtMCz/Content-Manager.png');
}


#category-257 {
    background-image:
        url('https://i.postimg.cc/m2X0S85d/Listing-Template.png');
}


#category-259 {
    background-image:
        url('https://i.postimg.cc/yx7PqCkF/Activities-Center.png');
}


#category-260 {
    background-image:
        url('https://i.postimg.cc/bvtrPGnh/Promotion-Center.png');
}


#category-258 {
    background-image:
        url('https://i.postimg.cc/2SN5CjzR/Design-Center.png');
}


#category-261 {
    background-image:
        url('https://i.postimg.cc/nz2mDjhD/Configuration-Center.png');
}


#category-265 {
    background-image:
        url('https://i.postimg.cc/tgK1ndbJ/Mobile-Apps.png');
}


#category-262 {
    background-image:
        url('https://i.postimg.cc/cLK47KXn/Sitemgr-Administration-Area.png');
}


#category-263 {
    background-image:
        url('https://i.postimg.cc/pVq2gQSj/Sponsor-Area.png');
}


#category-264 {
    background-image:
        url('https://i.postimg.cc/qRpTFgXQ/User-Profile-Area.png');
}


#category-266 {
    background-image:
        url('https://i.postimg.cc/P5H82Qvw/e-Directory-Plugins.png');
}


#category-267 {
    background-image:
        url('https://i.postimg.cc/qR2Tby3N/Installation-and-Hosting.png');
}


#category-268 {
    background-image:
        url('https://i.postimg.cc/SQ5P2J25/Your-Account-with-e-Directory.png');
}


#category-619 {
    background-image:
        url('https://i.postimg.cc/yxmR58jQ/AI-Features-(1).png');
}


#category-274 {
    background-image:
        url('https://i.postimg.cc/7PpnQX8w/v13-5.png');
}


#category-273 {
    background-image:
        url('https://i.postimg.cc/9QBP0h4Q/v13-6.png');
}


#category-272 {
    background-image:
        url('https://i.postimg.cc/zXCK2rFF/v13-7.png');
}


#category-527 {
    background-image:
        url('https://i.postimg.cc/Fs3ZbS35/v13-7.jpg');
}


#category-555 {
    background-image:
        url('https://i.postimg.cc/3J3xYLb7/image.jpg');
}


#category-589 {
    background-image:
        url('https://i.postimg.cc/JzvCf7LK/v14.png');
}


#category-610 {
    background-image:
        url('https://i.postimg.cc/X7rhMxBm/image.jpg');
}


#category-664 {
    background-image:
        url('https://i.postimg.cc/BbKHJfyW/14-2.png');
}


/* =========================================================
   17. INNER PAGE SPACING
   Category + article pages

   Adds intentional space below the sticky header so the
   header divider does not sit against the inner search area.
   ========================================================= */

.row-fluid {
    display:
        grid;

    grid-template-columns:
        240px
        minmax(0, 1fr);

    grid-template-areas:
        'aside main';

    gap:
        64px;

    width:
        100%;

    margin-top:
        46px;
}


.row-fluid .span3,
.row-fluid .span9 {
    float:
        none;

    width:
        100%;

    margin:
        0;
}


/* =========================================================
   18. SIDEBAR SEARCH
   ========================================================= */

#sidebar {
    grid-area:
        aside;

    margin:
        0;
}


#searchBar.sm {
    position:
        relative;

    margin:
        0
        0
        34px;
}


#sidebar form .search-query {
    width:
        100%;

    height:
        46px;

    margin:
        0;

    padding:
        0
        44px
        0
        14px;

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

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        var(--text-primary);

    font-family:
        var(--font-sans);

    font-size:
        14px;

    font-weight:
        400;

    box-shadow:
        none;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}


#sidebar form .search-query::placeholder {
    color:
        var(--text-muted);
}


#sidebar form .search-query:focus {
    outline:
        none;

    border-color:
        #9ebfd9;

    box-shadow:
        0 0 0 3px
        rgba(56, 159, 213, 0.1);
}


#searchBar.sm button,
#sidebar form button {
    position:
        absolute;

    top:
        0;

    right:
        0;

    left:
        auto;

    width:
        46px;

    height:
        46px;

    margin:
        0;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        var(--text-muted);
}


#sidebar #searchBar button .icon-search,
#searchBar.sm button .icon-search {
    color:
        currentColor;
}


/* Sidebar autocomplete */

#serp-dd.sb {
    top:
        54px !important;

    width:
        100% !important;
}


/* =========================================================
   19. SIDEBAR NAVIGATION
   ========================================================= */

#sidebar h3 {
    margin:
        0
        0
        14px;

    color:
        var(--text-primary);

    font-family:
        var(--font-sans);

    font-size:
        15px;

    font-weight:
        600;

    line-height:
        1.4;

    text-transform:
        none;
}


#sidebar .nav-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

    margin:
        0
        0
        56px;

    padding:
        0;
}


#sidebar .nav-list li {
    margin:
        0;
}


#sidebar .nav-list li a {
    display:
        block;

    padding:
        8px
        10px;

    border-radius:
        7px;

    color:
        var(--text-secondary);

    font-family:
        var(--font-sans);

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.5;

    text-decoration:
        none;

    transition:
        color var(--transition),
        background-color var(--transition);
}


#sidebar .nav-list li a:hover {
    background:
        #f6f7f9;

    color:
        var(--text-primary);
}


#sidebar .nav-list li.active a,
#sidebar .nav-list .active a:hover {
    background:
        #edf5fa;

    color:
        #176db8;

    font-weight:
        500;
}


#sidebar .nav-list li a .icon-arrow {
    display:
        none;
}


/* =========================================================
   20. MAIN INNER CONTENT
   ========================================================= */

#main-content {
    grid-area:
        main;

    min-width:
        0;

    max-width:
        none;

    margin:
        0;

    padding:
        0;

    background:
        transparent;
}


#main-content .contentWrapper {
    min-height:
        0;

    border:
        0;

    border-radius:
        0;

    background:
        transparent;

    box-shadow:
        none;
}


#main-content #categoryHead {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        24px;

    margin-bottom:
        22px;
}


#main-content h1 {
    max-width:
        780px;

    margin:
        0;

    overflow:
        hidden;

    color:
        var(--text-primary);

    font-family:
        var(--font-sans);

    font-size:
        clamp(
            30px,
            3vw,
            42px
        );

    font-weight:
        600;

    line-height:
        1.15;

    letter-spacing:
        -0.04em;

    text-overflow:
        ellipsis;
}


/* =========================================================
   21. SORT SELECT
   ========================================================= */

#categoryHead .sort {
    position:
        static;

    flex:
        0 0 auto;
}


#categoryHead .sort form {
    position:
        relative;

    margin:
        0;
}


#categoryHead .sort form::after {
    content:
        '';

    position:
        absolute;

    right:
        15px;

    top:
        50%;

    width:
        6px;

    height:
        6px;

    border-right:
        1.5px solid
        var(--text-secondary);

    border-bottom:
        1.5px solid
        var(--text-secondary);

    transform:
        translateY(-70%)
        rotate(45deg);

    pointer-events:
        none;
}


#categoryHead .sort form select {
    width:
        250px;

    height:
        44px;

    margin:
        0;

    padding:
        0
        38px
        0
        13px;

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

    border-radius:
        9px;

    background:
        #ffffff;

    color:
        var(--text-secondary);

    font-family:
        var(--font-sans);

    font-size:
        13px;

    font-weight:
        400;

    appearance:
        none;

    -webkit-appearance:
        none;

    -moz-appearance:
        none;
}


/* =========================================================
   22. ARTICLE LIST
   ========================================================= */

#main-content .icon-article-doc {
    display:
        none;
}


#main-content .articleList {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


#main-content .articleList li {
    margin:
        0 !important;

    padding:
        0;

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


#main-content .articleList li:last-child {
    border-bottom:
        0;
}


#main-content .articleList a {
    display:
        block;

    margin:
        0;

    padding:
        15px 4px;

    color:
        var(--text-secondary);

    font-family:
        var(--font-sans);

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.55;

    text-decoration:
        none;

    transition:
        color var(--transition),
        padding-left var(--transition);
}


#main-content .articleList a:hover {
    color:
        var(--brand-blue-dark);

    padding-left:
        7px;
}


#main-content .articleList li a span {
    display:
        block;

    padding-left:
        27px;

    background-image:
        url(
            'https://mobile.doma.ai/api/mobile/support/icons/file-text.svg'
        );

    background-repeat:
        no-repeat;

    background-position:
        left 2px;

    background-size:
        17px 17px;
}


/* =========================================================
   23. ARTICLE TYPOGRAPHY
   ========================================================= */

#fullArticle {
    max-width:
        900px;

    color:
        var(--text-secondary);
}


#fullArticle h2,
#fullArticle h3,
#fullArticle h4,
#fullArticle h5,
#fullArticle h6 {
    color:
        var(--text-primary);

    font-family:
        var(--font-sans);

    font-weight:
        600;

    line-height:
        1.3;

    letter-spacing:
        -0.025em;
}


#fullArticle h2 {
    margin:
        38px
        0
        14px;

    font-size:
        27px;
}


#fullArticle h3 {
    margin:
        34px
        0
        13px;

    font-size:
        22px;
}


#fullArticle h4 {
    margin:
        30px
        0
        12px;

    font-size:
        19px;
}


#fullArticle h5 {
    margin:
        28px
        0
        10px;

    font-size:
        17px;
}


#fullArticle h6 {
    margin:
        26px
        0
        10px;

    font-size:
        15px;
}


#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
    color:
        var(--text-secondary);

    font-family:
        var(--font-sans);

    font-size:
        15px;

    font-weight:
        400;

    line-height:
        1.75;
}


#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle blockquote,
#fullArticle table {
    margin-bottom:
        20px;
}


#fullArticle ul,
#fullArticle ol {
    padding-left:
        23px;
}


#fullArticle a {
    color:
        var(--brand-blue-dark);

    font-weight:
        500;
}


#fullArticle a:hover:not(.printArticle) {
    color:
        #115b9c;

    text-decoration:
        underline;

    border:
        0;
}


#fullArticle hr {
    margin:
        34px 0;

    border:
        0;

    border-top:
        1px solid
        var(--border);
}


/* =========================================================
   24. ARTICLE IMAGES
   ========================================================= */

#fullArticle figure,
#fullArticle figure.image,
#fullArticle p:has(img) {
    width:
        100%;

    height:
        auto;

    margin:
        26px 0;

    padding:
        24px;

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

    border-radius:
        14px;

    background:
        var(--surface-soft);
}


#fullArticle figure img,
#fullArticle figure.image img,
#fullArticle p:has(img) img {
    max-width:
        100%;

    margin:
        0 auto;

    padding:
        0;

    border:
        0;

    border-radius:
        6px;
}


/* =========================================================
   25. ARTICLE TABLES
   ========================================================= */

#fullArticle table {
    width:
        100%;

    border-collapse:
        collapse;
}


#fullArticle table th,
#fullArticle table td {
    padding:
        10px 12px;

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

    text-align:
        left;
}


#fullArticle table th {
    background:
        var(--surface-soft);

    color:
        var(--text-primary);

    font-weight:
        600;
}


/* =========================================================
   26. ARTICLE CALLOUTS
   ========================================================= */

#fullArticle .callout,
#fullArticle .callout-blue,
#fullArticle .callout-yellow,
#fullArticle .callout-red,
#fullArticle .callout-green {
    border-radius:
        10px;
}


#fullArticle .callout-blue {
    border-color:
        #cfe1ee;

    background:
        #f2f8fc;
}


/* =========================================================
   27. ARTICLE FOOTER
   ========================================================= */

.articleFoot {
    margin-top:
        48px;
}


.articleFoot p.lu,
.articleFoot time.lu {
    margin:
        0;

    color:
        var(--text-muted);

    font-family:
        var(--font-sans);

    font-size:
        12px;

    font-weight:
        400;

    line-height:
        1.6;

    font-style:
        normal;
}


.related {
    position:
        relative;

    padding:
        24px 0;

    border:
        0;

    background:
        transparent;
}


#fullArticle .printArticle .icon-print::before {
    display:
        none;
}


#printprint {
    background-image:
        url(
            'https://mobile.doma.ai/api/mobile/support/icons/print.svg'
        );
}


/* =========================================================
   28. CUSTOM ARTICLE CATEGORY LISTS
   ========================================================= */

#fullArticle:has(
    div[data-html-block] > ul.my-category-list
) {
    max-width:
        none;
}


#fullArticle .my-category-list {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


#fullArticle .my-category-list h5 {
    margin:
        0
        0
        18px;

    color:
        var(--text-primary);

    font-size:
        17px;

    font-weight:
        600;
}


#fullArticle .my-category-list > li {
    margin-bottom:
        46px;
}


#fullArticle
.my-category-list
li
ul.articleList {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        8px
        24px;
}


#fullArticle
.my-category-list
li
ul.articleList
li {
    margin:
        0;
}


#fullArticle:has(.my-category-list)
.printArticle {
    display:
        none;
}


.category-list.two-col .category {
    width:
        100%;
}


/* =========================================================
   29. FOOTER
   ========================================================= */

footer {
    position:
        relative;

    left:
        auto;

    bottom:
        auto;

    margin:
        88px
        0
        0;

    padding:
        26px
        0
        36px;

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

    color:
        var(--text-muted);

    font-family:
        var(--font-sans);

    font-size:
        12px;

    font-weight:
        400;

    line-height:
        1.6;
}


footer.center p,
footer p {
    margin:
        0;

    padding:
        0;

    color:
        var(--text-muted);

    font-size:
        inherit;

    text-align:
        left;
}


footer p a,
footer p a:visited {
    color:
        var(--text-secondary);

    font-weight:
        500;
}


footer p a:hover {
    color:
        var(--brand-blue-dark);
}


/* =========================================================
   30. TABLET
   ========================================================= */

@media (max-width: 1120px) {

    .collection-category .category-list {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    section#collection-category-269 .category-list {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .row-fluid {
        grid-template-columns:
            210px
            minmax(0, 1fr);

        gap:
            42px;
    }


    #docsSearch {
        background-size:
            cover,
            auto 100%;

        background-position:
            center,
            85% center;
    }

}


/* =========================================================
   31. SMALL TABLET
   ========================================================= */

@media (max-width: 860px) {

    .collection-category .category-list,
    section#collection-category-269 .category-list {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .row-fluid {
        grid-template-columns:
            1fr;

        grid-template-areas:
            'aside'
            'main';

        gap:
            36px;

        margin-top:
            34px;
    }


    #sidebar .nav-list {
        margin-bottom:
            22px;
    }


    #main-content #categoryHead {
        flex-direction:
            column;
    }

}


/* =========================================================
   32. DESKTOP NAV COLLAPSE FIX
   ========================================================= */

@media (min-width: 769px) {

    .navbar .nav-collapse.collapse {
        display:
            block !important;

        height:
            auto !important;

        overflow:
            visible !important;
    }

}


/* =========================================================
   33. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    :root {
        --page-gutter:
            18px;
    }


    .navbar {
        padding-inline:
            var(--page-gutter);
    }


    .navbar .navbar-inner,
    .navbar .navbar-inner .container-fluid {
        min-height:
            66px;
    }


    .navbar .navbar-inner .container-fluid {
        flex-wrap:
            wrap;
    }


    .navbar .brand {
        padding:
            9px 0;
    }


    .navbar .brand img {
        width:
            154px;
    }


    .navbar .btn-navbar {
        display:
            flex;
    }


    .navbar .nav-collapse {
        flex-basis:
            100%;

        width:
            100%;

        margin:
            0;
    }


    .navbar .nav-collapse.collapse:not(.in) {
        display:
            none;
    }


    .navbar .nav-collapse.collapse.in {
        display:
            block;

        height:
            auto !important;

        overflow:
            visible;
    }


    .navbar .nav,
    .collapse.in nav .nav {
        width:
            100%;

        margin:
            0;

        padding:
            3px 0 14px;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;
    }


    .navbar .nav > li,
    .collapse.in nav .nav li {
        width:
            100%;

        padding:
            0;
    }


    .navbar .nav li a {
        width:
            100%;

        padding:
            10px 3px;

        border:
            0;
    }


    .navbar .nav li.active a::after {
        display:
            none;
    }


    /*
       Disable desktop scroll animation on mobile.
       Keeps collapsing navigation predictable.
    */

    .navbar,
    .navbar .navbar-inner,
    .navbar .navbar-inner .container-fluid,
    .navbar .brand img,
    .navbar .nav li a {
        animation:
            none !important;
    }


    /* Hero */

    #docsSearch {
        width:
            calc(
                100% -
                36px
            );

        min-height:
            330px;

        margin-top:
            24px;

        padding:
            42px
            24px;

        border-radius:
            20px;

        background-image:
            linear-gradient(
                90deg,
                rgba(245, 248, 253, 1) 0%,
                rgba(245, 248, 253, 0.98) 50%,
                rgba(245, 248, 253, 0.70) 72%,
                rgba(245, 248, 253, 0.22) 100%
            ),
            url(
                'https://i.postimg.cc/52D2Dhq6/Design-sem-nome-1.png'
            );

        background-size:
            cover,
            auto 100%;

        background-position:
            center,
            74% center;
    }


    #docsSearch h1 {
        max-width:
            460px;

        margin-bottom:
            24px;

        font-size:
            clamp(
                34px,
                9vw,
                44px
            );
    }


    #docsSearch #searchBar {
        width:
            100%;
    }


    #contentArea {
        width:
            calc(
                100% -
                36px
            );
    }


    .collection-category {
        margin-top:
            58px;
    }


    #collection-category-269 {
        margin-top:
            66px;
    }

}


/* =========================================================
   34. SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {

    #docsSearch {
        min-height:
            310px;

        padding:
            38px
            18px;

        background-position:
            center,
            68% center;
    }


    #docsSearch h1 {
        max-width:
            290px;

        font-size:
            36px;
    }


    #docsSearch #searchBar .search-query {
        height:
            54px;

        padding-inline:
            14px;

        font-size:
            14px;
    }


    #docsSearch #searchBar .search-query::placeholder {
        font-size:
            14px;
    }


    #docsSearch #searchBar button {
        width:
            54px;

        min-width:
            54px;

        height:
            54px;

        padding:
            0;
    }


    #docsSearch #searchBar button .icon-search {
        margin:
            0;
    }


    #docsSearch #searchBar button span {
        display:
            none;
    }


    #serp-dd .result {
        max-height:
            260px;
    }


    .collection-category .category-list,
    section#collection-category-269 .category-list {
        grid-template-columns:
            1fr;

        gap:
            16px;
    }


    .category-list .category {
        border-radius:
            16px;
    }


    .category-list h3 {
        padding:
            18px
            18px
            6px;

        font-size:
            15px;
    }


    .category-list .category .article-count {
        padding:
            0
            18px
            18px;
    }


    #categoryHead .sort,
    #categoryHead .sort form,
    #categoryHead .sort form select {
        width:
            100%;
    }


    #fullArticle
    .my-category-list
    li
    ul.articleList {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   35. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }


    .category-list .category:hover {
        transform:
            none;
    }

}


/* =========================================================
   36. PRINT
   ========================================================= */

@media print {

    .navbar,
    #sidebar,
    #docsSearch,
    footer,
    .printArticle {
        display:
            none !important;
    }


    body,
    #contentArea,
    .row-fluid,
    #main-content,
    #fullArticle {
        display:
            block !important;

        width:
            100% !important;

        max-width:
            none !important;

        margin:
            0 !important;

        padding:
            0 !important;

        background:
            #ffffff !important;

        box-shadow:
            none !important;
    }

}