:root {
    --space-x: 2rem;
    --width-c: 240rem;
}

.single-wrap {
    margin-top: clamp(2.4rem, 2vw, 4rem) !important;
}

.single-title-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid #C0D0DA;
}

.single-title.main-title .title-heading {
    font-weight: 600;
    color: #000000;
    font-size: 2.4rem;
    line-height: 1.34;
}

.socials-share {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.socials-share a,
.socials-share i.icon-share {
    width: 4rem;
    height: 4rem;
    background-color: #EBEFF7;
    color: #697F8D;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 2rem;
}

.socials-share i.icon-share {
    background-color: var(--c-primary);
    color: #fff;
}

.socials-share a:hover {
    color: var(--c-primary);
}

.category_post {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.category_post i.icon-category {
    background-color: var(--c-primary);
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
}

.category_post a {
    color: #697F8D;
    transition: all 0.3s ease;
    font-size: 1.4rem;
    line-height: 2.3;
    align-items: center;
    display: flex;
}

.category_post a:not(:last-child)::after {
    content: '';
    width: 0.6rem;
    height: 0.6rem;
    background-color: var(--c-primary);
    display: inline-block;
    border-radius: 50%;
    margin-left: 0.8rem;
}

.category_post a:hover {
    color: var(--c-primary);
}

.thumbnail-post-img {
    margin: 2rem 0 3.2rem;
}

.thumbnail-post-img img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.editor-content.main-content.single-content {
    border: 2px solid #DDE8EF;
    padding: 4.8rem;
}

.tag_post {
    display: flex;
    align-items: center;
    margin: 2.4rem 0 0 4.8rem;
    gap: 1.2rem;
}

.tag_post span i {
    color: var(--c-primary);
    font-size: 1.8rem;
}

.tag_post span {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--c-primary);
    font-size: 1.8rem;
    line-height: 2rem;
}

.tag_post a {
    color: #697F8D;
    transition: all 0.3s ease;
    font-size: 1.5rem;
    line-height: 2rem;
    align-items: center;
    display: flex;
}

.tag_post a:hover {
    color: var(--c-primary);
}

.tag_post a:not(:last-child)::after {
    content: '';
    width: 0.6rem;
    height: 0.6rem;
    background-color: var(--c-primary);
    display: inline-block;
    border-radius: 50%;
    margin-left: 0.8rem;
}

.sidebar.sidebar-post .help-heading {
    background-color: #E7F2F8;
    padding: 1.6rem 1.6rem 3.2rem;
}

.sidebar.sidebar-post .help-heading .help-heading-title {
    height: 7.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #000000;
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.sidebar.sidebar-post .help-heading ul {
    margin: 0 2.2rem;
}

.sidebar.sidebar-post .help-heading ul li {
    list-style: disc;
}

.sidebar.sidebar-post .help-heading ul li::marker {
    color: var(--c-primary);
    font-size: 1.6rem;
}

.sidebar.sidebar-post .help-heading ul li:not(:last-child) {
    margin-bottom: 1.8rem;
}

.sidebar.sidebar-post .help-heading ul li a {
    color: #000000;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.65;
    transition: all 0.3s ease;
}

.sidebar.sidebar-post .help-heading ul li a:hover {
    color: var(--c-primary);
}

.sidebar.sidebar-post .access_item {
    display: flex;
    flex-direction: column;
    margin: 2rem 0;
    gap: 2rem;
}

.sidebar.sidebar-post .access_item li {
    background-color: #E7F2F8;
    padding: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar.sidebar-post .access_item li a {
    height: 7.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
    width: 100%;
}

.sidebar.sidebar-post .access_item li a:hover {
    color: var(--c-primary);
}

.widget-side-mobile.widget_media_image {
    width: 100%;
}

.widget-side-mobile.widget_media_image img {
    width: 100%;
}

.single-wrap .sidebar.sidebar-post {
    top: 10rem;
}


/* Related Articles Section */
.section-related-articles {
    position: relative;
    margin: 7rem 0;
    padding: 7rem 0 3rem;
}

.section-related-articles__bg {
    background: #E7F2F8;
    position: absolute;
    top: 3rem;
    left: 0;
    bottom: 3rem;
    width: 100%;
    padding: 7.5rem 0;
    pointer-events: none;
}

.section-related-articles__bg::before,
.section-related-articles__bg::after {
    content: '';
    width: 100%;
    background: url(../../front-page/imgs/pattern.svg) no-repeat center center;
    display: block;
    height: 10rem;
    position: absolute;
    background-size: 100% 100%;
}

.section-related-articles__bg::before {
    transform: scale(-1, 1);
    top: -3rem;
}

.section-related-articles__bg::after {
    bottom: -3rem;
}

.section-related-articles .container {
    max-width: var(--width-c);
    margin: 0 auto;
    padding: 0 var(--space-x);
    position: relative;
    z-index: 2;
}

.section-related-articles .sw {
    max-width: var(--width-c);
    margin: 0 auto;
    padding: 0 var(--space-x);
    position: relative;
    z-index: 2;
}

.single-wrap .editor-content {
    line-height: 2;
    font-size: min(16px, 4vw);
}

@media (min-width: 1024px) {
    :root {
        --space-x: 5rem;
    }

    .section-related-articles {
        padding: 6rem 0 11rem;
        margin: 17rem 0 4rem;
    }

    .section-related-articles .container {
        padding: 0 calc(var(--space-x) + 2rem);
    }

    .section-related-articles .sw {
        padding: 0 calc(var(--space-x) / 2);
    }
}

@media (min-width: 1440px) {
    :root {
        --space-x: 14rem;
    }
}

.section-related-articles .section-desc {
    margin-top: 1.6rem;
}

.section-related-articles .section-desc .description {
    font-size: 1.6rem;
    line-height: 1.6;
    color: #697F8D;
}

@media (max-width: 1199.99px) {
    .single-wrap .sidebar.sidebar-post {
        position: unset;
    }
}

@media (max-width: 991.99px) {
    /* .single-title.main-title .title-heading {
        font-size: 26px;
    } */

    .single-title.main-title {
        padding-bottom: 20px;
        border-bottom: 1px solid #C0D0DA;
        margin-bottom: 16px;
    }

    .thumbnail-post-img {
        margin: 16px 0;
    }

    .socials-share {
        margin-bottom: 28px;
        justify-content: center;
    }

    .sidebar.sidebar-post .help-heading .help-heading-title {
        height: 56px;
        justify-content: flex-start;
        position: relative;
        padding: 0 18px;
        margin-bottom: 0;
    }

    .help-heading .caticon {
        top: 50%;
        transform: translateY(-50%) rotate(90deg);
        right: 18px;
        color: #C0D0DA;
        font-size: 2rem;
    }

    .help-heading .caticon.active {
        transform: translateY(-50%) rotate(270deg) !important;
    }

    .sidebar.sidebar-post .help-heading {
        display: none;
        /* padding: 16px;
        margin-bottom: 24px; */
    }

    .sidebar.sidebar-post .help-heading ul {
        margin-top: 12px;
    }

    .sidebar.sidebar-post .help-heading ul li:not(:last-child) {
        margin-bottom: 12px;
    }

    .editor-content.main-content.single-content {
        border: none;
        padding: 0;
    }

    .tag_post {
        margin: 24px 0 0;
        padding-top: 12px;
        border-top: 1px solid #C0D0DA;
    }
}