/*========================================================================== * All Side Bar ========================================================================== */ .all__sidebar { &-item { padding: 30px 35px 35px 35px; margin-bottom: 25px; background: var(--color-2); border: 1px solid var(--border-color-1); border-radius: 10px; > h4 { position: relative; padding-bottom: 15px; margin-bottom: 30px; border-bottom: 1px solid var(--border-color-1); &::before { position: absolute; content: ''; left: 0; right: 0; bottom: 0; height: 1px; width: 70px; background: var(--primary-color-1); } } &-search { form { display: flex; position: relative; input { background: var(--bg-white); } button { padding: 0; position: absolute; top: 0; right: 0; width: 60px; height: 60px; border-radius: 6px; } } } &-post { .post__item { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color-1); display: flex; align-items: center; gap: 20px; &:last-child { margin: 0; padding: 0; border: 0; } &-image { width: 90px; height: 90px; min-width: 90px; img { width: 100%; height: 100%; object-fit: cover; } } &-title { h6 { a { color: var(--text-heading-color); &:hover { color: var(--primary-color-1); } } } span { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 23px; i { color: var(--primary-color-1); } } } } } &-category { ul { padding: 0; margin: 0; li { list-style: none; margin-bottom: 10px; a { background: var(--bg-white); display: flex; font-family: var(--heading-font); font-size: 20px; font-weight: 500; line-height: 32px; padding: 14px 20px; align-items: center; justify-content: space-between; border-radius: 5px; color: var(--color-1); i { font-size: 25px; color: var(--text-white); transition: 0.4s; } &:hover { background: var(--primary-color-1); i { color: var(--color-1); } } } &:last-child { margin-bottom: 0; } } } } &-tag { ul { padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; li { list-style: none; a { transition: 0.4s; padding: 4px 18px 5px 18px; display: inline-block; font-size: 15px; line-height: 25px; font-weight: 500; border-radius: 4px; color: var(--text-heading-color); border: 1px solid var(--border-color-1); background: var(--bg-white); &:hover { color: var(--color-1); background: var(--primary-color-1); } } } } } &-help { height: 430px; padding: 35px; border-radius: 10px; h3 { color: var(--text-white); } } &-download { ul { padding: 0; margin: 0; li { list-style: none; a { transition: 0.4s; display: flex; align-items: center; font-family: var(--heading-font); font-size: 20px; font-weight: 500; line-height: 32px; margin-bottom: 10px; padding: 14px 20px; border-radius: 6px; justify-content: space-between; background: var(--color-1); color: var(--text-white); &:hover { color: var(--color-1); background: var(--primary-color-1); } span { float: right; font-size: 25px; } } &:last-child a { margin: 0; } } } } &:last-child { margin: 0; } } } @media (max-width: 1299px) { .all__sidebar { &-item { padding: 40px 30px; } } } @media (max-width: 1199px) { .all__sidebar-item-post-item { gap: 15px; &-content h6 { font-size: 18px; line-height: 28px; } &-image img { width: 80px; height: 85px; max-width: 80px; } } } @media (max-width: 575px) { .all__sidebar { &-item { padding: 30px 20px; } } }