.blog-section .card {
        transition: all .3s ease;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        overflow: hidden
      }

      .blog-section .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, .1);
        border-color: #dee2e6
      }

      .blog-section .overlay-1 {
        position: relative;
        overflow: hidden
      }

      .blog-section .overlay-1:hover .from-top {
        transform: translateY(0);
        opacity: 1
      }

      .blog-section .from-top {
        position: absolute;
        bottom: 20px;
        left: 20px;
        transform: translateY(100%);
        opacity: 0;
        transition: all .3s ease;
        background: rgba(13, 110, 253, .9);
        color: #fff;
        padding: 8px 16px;
        border-radius: 6px;
        font-weight: 600;
        font-size: .9rem
      }

      .blog-section .hover-scale {
        transition: transform .3s ease
      }

      .blog-section .hover-scale:hover {
        transform: scale(1.05)
      }

      .blog-section .post-category {
        font-size: .8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .5px
      }

      .blog-section .post-category a {
        color: #0d6efd;
        text-decoration: none
      }

      .blog-section .post-category a:hover {
        color: #0b5ed7
      }

      .blog-section .post-meta {
        font-size: .8rem;
        color: #6c757d
      }

      .blog-section .post-meta i {
        margin-right: .25rem
      }

      .blog-section .widget {
        margin-bottom: 2rem;
        padding: 1.5rem;
        background: #fff;
        border-radius: 12px;
        border: 1px solid #e9ecef
      }

      .blog-section .image-list li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e9ecef
      }

      .blog-section .image-list li:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none
      }

      .blog-section .image-list .rounded {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
        margin-right: 1rem
      }

      .blog-section .tag-list .btn {
        margin: .25rem;
        font-size: .8rem
      }

      @media (max-width:768px) {
        .blog-section .image-list li {
          flex-direction: column
        }

        .blog-section .image-list .rounded {
          margin-right: 0;
          margin-bottom: .5rem;
          width: 100%;
          height: 120px
        }

        .blog-section .sidebar {
          margin-top: 3rem
        }
      }

      @media (max-width:576px) {
        .blog-section .post-meta {
          flex-wrap: wrap
        }

        .blog-section .post-meta li {
          margin-bottom: .25rem
        }
      }