/*--------------------------------------------------------------
  26. Blog
----------------------------------------------------------------*/
.cs-blog-section-wrapper.blog-style-1 {
  .cs-blog-content-container {
    .cs-blog-items-container {
      .cs-blog-item {
        .cs-blog-img-area {
          position: relative;
          margin-bottom: 25px;
          .cs-blog-img {
            clip-path: polygon(10% 0, 85% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0% 80%, 0 10%);
            max-width: 630px;
            &.no-clip-img{
              clip-path: none;
            }
          }
        }
        .cs-blog-meta {
          position: absolute;
          bottom: 30px;
          left: 30px;
          display: flex;

          .cs-blog-date {
            background: $accent;
            padding: 5px 10px;
            margin-right: 15px;
            color: $white;
            p {
              margin: 0px;
            }
          }
          .cs-blog-author-meta {
            background: $accent;
            padding: 5px 10px;
            color: $white;
            p {
              margin: 0px;
            }
          }
        }
        .cs-blog-content {
          .cs-blog-title {
            margin-bottom: 10px;
            a{
              h6{
                transition: all 0.3s ease;
              }
              &:hover{
                h6{
                  color: $accent;
                  transition: all 0.3s ease;
                }
              }
            }
            &:hover {
              h4{
                color: $accent;
                transition: all 300ms ease-in-out;
              }
            }
          }
          .cs-blog-excerpt-text {
            margin-bottom: 25px;
          }
          .cs-blog-btn {
            span {
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 991px) {
  .cs-single-widget-wrap{
    padding-left: 0px !important;
  }
}

// animations (for animation styles)
.cs-img-anim-wrap {
  .cs-img-anim-img-in {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: block;

    img {
      position: relative;
      width: auto;
      transition: all 0.6s ease;
      background-size: cover;

      &:nth-child(1) {
        transform: translateX(-50%) scaleX(2);
        opacity: 0;
        filter: blur(0);
        position: absolute;
        top: 0;
        left: 0;
      }

      &:nth-child(2) {
        transform: translateX(0) scaleX(1);
        opacity: 1;
        filter: blur(0);
      }
    }
  }

  .cs_portfolio_img.active,
  .cs-img-anim-img-in:hover {
    img {
      &:nth-child(1) {
        transform: translateX(0) scaleX(1);
        opacity: 1;
        filter: blur(0);
      }

      &:nth-child(2) {
        transform: translateX(50%) scaleX(2);
        opacity: 0;
        filter: blur(20px);
        clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
        transition: all 0.5s;
      }
    }
  }
}



@media screen and (max-width: 630px) {
  .cs-blog-items-container{
    .cs-blog-item{
      padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
      padding-left: calc(var(--bs-gutter-x) * 0.5) !important;  
    }
  }
}


// Blog Page 1
.cs-item6-cal2 > *:nth-child(-n+4) {
  padding-bottom: 45px;
}

.cs-item6-cal2 > *:nth-last-child(-n-4) {
  padding-bottom: 0;
}
@media screen and (max-width: 991px) {
  .cs-item6-cal2 > *:nth-child(-n+5) {
    padding-bottom: 45px;
  }
  
  .cs-item6-cal2 > *:nth-last-child(-n-1) {
    padding-bottom: 0px;
  }
}
// Blog Page 2