.sp-smart-post-grid-two-contents {
  .sp-smart-post-template-one-content {
    width: 100%;
    height: 100%;
    position: relative;
  }
}

.sp-smart-show-pro {
  &.grid-two-container {
    .sp-smart-post-grid-two-contents {
      .sp-smart-post-dynamic-grid-contents {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        min-height: 200px;
      }
    }
  }
}


//--------- orientation two------------------
.sp-smart-post-grid-two .sp-smart-post-card.overlay-type-orientations-two .image-overlay {
  width: 90%;
  height: 86% !important;

  position: absolute;
  top: 7%;
  left: 5%;
  z-index: 1;
  pointer-events: none;
  z-index: 1;
  pointer-events: none;
}

//--------- orientation three------------------
.sp-smart-post-grid-two .sp-smart-post-card.overlay-type-orientation-three .image-overlay.overlay-custom,
.sp-smart-post-grid-two .sp-smart-post-card.overlay-type-orientation-three:hover .image-overlay.overlay-custom,
.sp-smart-post-grid-two .sp-smart-post-card.overlay-type-orientation-three .image-overlay.overlay-custom::after,
.sp-smart-post-grid-two .sp-smart-post-card.overlay-type-orientation-three:hover .image-overlay.overlay-custom::after {
  background: #00000000 !important;
}

.sp-smart-post-grid-two .sp-smart-post-card.overlay-type-orientation-three .sp-smart-post-card-content {
  background: #00000080;
}

.sp-smart-post-grid-two .sp-smart-post-card.overlay-type-orientation-three:hover .sp-smart-post-card-content {
  background: #000000ad;
}

//--------- orientation four------------------

.sp-smart-post-grid-two .overlay-type-orientations-four .overlay-custom,
.sp-smart-post-grid-two .overlay-type-orientations-four:hover .overlay-custom,
.sp-smart-post-grid-two .overlay-type-orientations-four .overlay-custom::after,
.sp-smart-post-grid-two .overlay-type-orientations-four:hover .overlay-custom::after {
  background: #00000000 !important;
}

.sp-smart-post-grid-two .overlay-type-orientations-four .sp-smart-post-card-content {
  background: #00000080;
  margin: 0% 4% 4% 4%;
}

.sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title {
  transition:
    all 0.4s ease,
    opacity 0.4s ease-out,
    max-height 0.6s ease-out,
    margin 0.4s ease;
}

// single content hover animation........
.sp-smart-post-grid-two .sp-smart-post-card:hover .sp-smart-post-title,
.sp-smart-post-grid-two .sp-smart-post-card:hover .sp-smart-post-category,
.sp-smart-post-grid-two .sp-smart-post-card:hover .sp-meta-data,
.sp-smart-post-grid-two .sp-smart-post-card:hover .sp-smart-post-read-more-button,
.sp-smart-post-grid-two .sp-smart-post-card:hover .sp-smart-post-excerpt-wrapper,
.sp-smart-post-grid-two .sp-smart-post-card:hover .sp-smart-post-social-share {
  opacity: 1;
  transition:
  opacity 0.4s ease-out,
  height 0.9s ease-out;
}



// // title animate effect..................................................
.sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title {
  position: relative;
  display: inline-block;
}

.sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title:after {
  content: "";
  position: absolute;
  transition: width 0.6s ease;
}

.sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title::before {
  content: "";
  position: absolute;
  transition: width 0.6s ease;
}


.sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title .line {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title .line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  // height: 2px;
  // background: linear-gradient(90deg, #ff416c, #ff4b2b);
  // transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.4s ease;
  z-index: -1;
}

.sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title:hover .line::after {
  transform: scaleX(1);
}

/* Using :nth-of-type to target only .line elements */
.sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(1)::after {
  transition-delay: 0s;
}

.sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(2)::after {
  transition-delay: 0.2s;
}

.sp-smart-post-grid-five .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(3)::after {
  transition-delay: 0.4s;
}

.sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(4)::after {
  transition-delay: 0.6s;
}

.sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(5)::after {
  transition-delay: 0.8s;
}

.sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(6)::after {
  transition-delay: 1s;
}




.sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(7)::after {
  transition-delay: 1.2s;
}

.sp-smart-post-grid-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(8)::after {
  transition-delay: 1.4s;
}

.sp-smart-post-grid-two .sp-content-on-hover .overlay-type-orientations-two .sp-smart-post-card-image .image-overlay {
  opacity: 0;
  transition: all 0.3s ease;
}
.sp-smart-post-grid-two .sp-content-on-hover .overlay-type-orientations-two:hover .sp-smart-post-card-image .image-overlay {
  opacity: 1;
}

// Image overlay solid & gradient color transition 
.sp-smart-post-card.overlay-type-orientation-three .sp-smart-post-card-content {
  transition: all 0.3s ease-in-out;
}
.sp-smart-post-card.overlay-type-orientation-three .sp-smart-post-card-content:after,
.sp-smart-post-card.overlay-type-orientations-four .sp-smart-post-card-content:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.sp-smart-post-card.overlay-type-orientation-three:hover .sp-smart-post-card-content:after,
.sp-smart-post-card.overlay-type-orientations-four:hover .sp-smart-post-card-content:after {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}