.blog-detail-sec {
    .tagicon-block {
        border-radius: 8px;
        background: #eaeaec;
        padding: clamp(12px, 0.833vw, 32px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        .tag {
            padding: clamp(4px, 0.417vw, 16px) clamp(12px, 0.833vw, 32px);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            border-radius: 4px;
            background-color: $black;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
            color: $white;
            &:hover {
                background-color: $accent-1;
            }
        }
        .social-icon {
            .icon {
                background-color: $white;
                &::before {
                    background-color: #2c3e50 !important;
                }
            }
        }
    }
    .post-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: $gap-24;
        @include media-query(1025px) {
            flex-wrap: wrap;
        }
        .left-block {
            display: flex;
            align-items: center;
            gap: $gap-24;
            @include media-query(1025px) {
                flex-wrap: wrap;
                justify-content: center;
            }
            .image-effect {
                width: clamp(80px, 6.354vw, 254px);
                flex-shrink: 0;
                img {
                    width: 100%;
                }
            }
            .l-icon {
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid $black;
                border-radius: 4px;
                width: clamp(40px, 2.5vw, 54px);
                height: clamp(40px, 2.5vw, 54px);
                transition: $transition;
                svg {
                    width: clamp(16px, 1.042vw, 40px);
                    height: clamp(16px, 1.042vw, 40px);
                    path {
                        transition: $transition;
                        fill: $light-black;
                    }
                }
                &:hover {
                    background-color: #2c3e50;
                    svg {
                        path {
                            fill: $white;
                        }
                    }
                }
            }
        }
    }
}
.heading-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 12px;
    @include media-query(599px) {
        justify-content: center;
    }
    .search-form {
        width: clamp(216px, 19.063vw, 440px);
        padding: 4px 4px 4px clamp(12px, 0.833vw, 32px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: $br-16;
        border: 1px solid $dark-gray;

        .newsvector {
            svg {
                width: clamp(16px, 1.042vw, 40px);
                height: clamp(16px, 1.042vw, 40px);
            }
        }

        input {
            color: $dark-gray;
            width: 100%;
            border: none;
            background-color: transparent;
            outline: none;
            box-shadow: none;

            &:focus {
                border: none;
                background-color: transparent;
                outline: none;
                box-shadow: none;
            }

            &::placeholder {
                color: $dark-gray;
                font-family: $font-primary;
                font-size: clamp(14px, 0.938vw, 36px);
                /* 18px */
                font-style: normal;
                font-weight: 400;
                line-height: 150%;
            }
        }

        .news-button {
            flex-shrink: 0;
            transition: $transition;
            border: none;
            display: flex;
            padding: 11.667px;
            align-items: center;
            flex-shrink: 0;
            background-color: $accent-3;
            border-radius: $br-12;
            svg {
                width: clamp(18px, 1.25vw, 48px);
                height: clamp(18px, 1.25vw, 48px);

                path {
                    fill: $white;
                }
            }

            &:hover {
                background-color: $accent-1;
            }
        }
    }

    .filter-btn {
        padding: clamp(8px, 0.5vw, 24px) clamp(18px, 1.25vw, 48px);
        border-radius: $br-12;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: $gap-12;
        background-color: $accent-1;

        &:hover {
            background-color: $accent-3;

            .text-18 {
                color: $white !important;
            }

            svg {
                path {
                    fill: $white;
                }
            }
        }
    }
}
.sidebar {
    border-radius: $br-12;
    border: 1px solid #eaeaec;
    background: #fafafa;
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.1);
    padding: clamp(10px, 1.25vw, 48px);

    .category-block {
        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
        }
    }

    .tags-block {
        display: flex;
        align-items: center;
        gap: $gap-16;
        flex-wrap: wrap;

        .tag1 {
            padding: clamp(6px, 0.417vw, 16px) clamp(12px, 0.833vw, 32px);
            border: 1px solid $black;
            background-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: $transition;
            border-radius: 4px;

            span {
                transition: $transition;
                color: $black;
                font-size: clamp(14px, 0.833vw, 32px);
            }

            &:hover,
            &.active {
                border: 1px solid $accent-1;
                background-color: $accent-1;

                span {
                    color: $white !important;
                }
            }
        }
    }

    .search-form {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: $br-16;
        border: 1px solid $light-gray;
        padding: 4px;
        padding-left: clamp(12px, 0.833vw, 32px);

        .newsvector {
            svg {
                width: clamp(16px, 1.042vw, 40px);
                height: clamp(16px, 1.042vw, 40px);
            }
        }

        input {
            color: $dark-gray;
            width: 100%;
            border: none;
            background-color: transparent;
            outline: none;
            box-shadow: none;

            &:focus {
                border: none;
                background-color: transparent;
                outline: none;
                box-shadow: none;
            }

            &::placeholder {
                color: $light-gray;
                font-family: $font-primary;
                font-size: clamp(14px, 0.938vw, 36px);
                /* 18px */
                font-style: normal;
                font-weight: 400;
                line-height: 150%;
            }
        }

        .news-button {
            flex-shrink: 0;
            background-color: transparent;
            transition: $transition;
            border: none;
            width: clamp(38px, 2.5vw, 54px);
            height: clamp(38px, 2.5vw, 54px);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: $br-12;
            background-color: $accent-3;
            svg {
                width: clamp(18px, 1.25vw, 48px);
                height: clamp(18px, 1.25vw, 48px);

                path {
                    fill: $white;
                }
            }

            &:hover {
                background-color: $accent-1;

                svg {
                    path {
                        fill: $white;
                    }
                }
            }
        }
    }

    .recent-blogs {
        p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-clamp: 3;
            -webkit-line-clamp: 3;
        }
    }

    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
        display: none;
    }
}
.shop-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 999;

    &.active {
        display: block;
        opacity: 1;
    }
}

.shop-sidebar {
    &.toggle-sidebar {
        position: fixed;
        top: 0;
        left: -800px;
        width: clamp(300px, 22.604vw, 650px);
        height: 100vh;
        background-color: $white;
        z-index: 99999;
        overflow-y: scroll;
        .sidebar {
            box-shadow: none;
            border: none;
            border-radius: 0;
        }
        &::-webkit-scrollbar {
            width: 5px;
        }

        &::-webkit-scrollbar-track {
            background-color: $light-black;
            -webkit-border-radius: 1px;
            border-radius: 1px;
        }

        &::-webkit-scrollbar-thumb {
            -webkit-border-radius: 1px;
            border-radius: 1px;
            background: $accent-1;
            border-radius: 5px;
        }

        &.active {
            left: 0;
        }

        .blog-sidebar {
            background-color: $black;
            border-radius: 0;
            padding: 34px clamp(16px, 1.042vw, 40px);
        }
    }
}
