/* ========= BLOG SEARCH CSS============== */
    .blog--section.blog--search {
        position: relative;
        z-index: 7;
    }

    .blog--section.blog--search form {
        position: relative;
        max-width: 250px;
        margin: auto;
    }

    .blog--section.blog--search span.search--icon {
        width: 16px;
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translate(0, -50%);
    }

    .blog--section.blog--search input {
        border: unset;
        outline: unset;
        border-radius: 0.5em;
        padding: 0.5em 1em;
        width: 100%;
        padding-left: 2.5em;
        box-shadow: rgba(27, 40, 63, 0.15) 0px 15px 25px, rgba(27, 40, 63, 0.15) 0px 5px 10px;
    }

    /* ========= END BLOG SEARCH CSS============== */

    /* ========= BLOG CATEGORIES CSS============== */
    .blog__categories__wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem 0.2rem;
    }

    .section.blog--section.blog--categories {
        margin-top: unset;
    }

    .blog__category__item.active a {
        background: var(--crl-text-primary);
    }

    .blog__category__item.active a.secondary__description {
        color: var(--crl-text-white);
    }

    .blog__category__item a {
        cursor: pointer;
        padding: 0.2em 1em;
        border-radius: 25px;
        transition: 0.5s;
    }

    .blog__category__item a:hover {
        opacity: 1;
        background: var(--crl-text-primary);
    }

    .blog__category__item .secondary__description {
        transition: 0.5s;
    }

    .blog__category__item:hover .secondary__description {
        opacity: 1;
        color: var(--crl-text-white);
    }

    /* ========= END BLOG CATEGORIES CSS==============*/
    /* ========= BLOG BTN CSS==============*/
    .blog--next--prev--btn {
        flex-direction: row;
        gap: 1rem;
        margin-top: 2rem;
    }

    .page-numbers {
        padding: 0.5em 1em;
        border: 2px solid var(--crl-text-primary);
        border-radius: 0.4em;
        font-weight: var(--font-semibold);
    }

    .page-numbers.current {
        background: var(--crl-text-primary);
        color: var(--crl-text-white);
    }

    /* ========= END BLOG BTN CSS==============*/

    /* ========= END PRELOADING CSS==============*/
    .preloading--wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* ========= END PRELOADING CSS==============*/



    /* 2xs */
    @media (min-width: 375px) {

        /* ========= BLOG BTN CSS==============*/
        .blog--next--prev--btn {
            flex-direction: row;
        }

        /* ========= END BLOG BTN CSS==============*/
    }

    /* xs */
    @media (min-width: 475px) {

        /* ========= BLOG BTN CSS==============*/
        .blog--next--prev--btn {
            margin-top: 4rem;
        }

        /* ========= END BLOG BTN CSS==============*/
    }

    /* sm */
    @media (min-width: 640px) {

        /* ========= BLOG SEARCH CSS============== */
        .blog--section.blog--search form {
            max-width: 350px;
        }

        .blog--section.blog--search span.search--icon {
            width: 20px;
        }

        .blog--section.blog--search input {
            padding: 1em 1em;
            padding-left: 2.5em;
        }

        /* ========= END BLOG SEARCH CSS============== */
    }

    /* md */
    @media (min-width: 768px) {

        /* ========= BLOG CATEGORIES CSS============== */

        .blog__category__item a {
            padding: 0.5em 2em;
        }

        /* ========= END BLOG CATEGORIES CSS============== */
    }

    /*lg */
    @media (min-width: 1024px) {

        /* ========= BLOG SEARCH CSS============== */
        .blog--section.blog--search form {
            max-width: 450px;
        }

        /* ========= END BLOG SEARCH CSS============== */

        /* ========= BLOG CATEGORIES CSS============== */
        .blog__categories__wrap {
            gap: 0.5rem 1rem;
        }

        /* ========= END BLOG CATEGORIES CSS============== */
    }

    /* xl */
    @media (min-width: 1200px) {

        /* ========= BLOG SEARCH CSS============== */
        .blog--section.blog--search form {
            max-width: 500px;
        }


        /* ========= END BLOG SEARCH CSS============== */
    }

    /* 2xl */
    @media (min-width: 1280px) {

        /* ========= BLOG SEARCH CSS============== */
        .blog--section.blog--search form {
            max-width: 600px;
        }

        .blog--section.blog--search span.search--icon {
            width: 25px;
        }

        /* ========= END BLOG SEARCH CSS============== */
    }

    /* 3xl */
    /* @media (min-width: 1536px) {} */