@use "../autoprefixer/autoprefixer" as *;
@use "../variables/variables" as *;

body,
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/*====================
   Whats News Card
  ====================*/
.news-blog-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;

  &.v1 {
    height: 400px;
  }

  &.v2 {
    height: 257px;
  }

  &.v3 {
    height: 257px;
    padding: 16px;
    background: $color-white4 ;

    &::before {
      display: none;
    }
  }

  &.v4 {
    height: 300px;
  }

  .card-bg-color {
    background: $color-green;
  }

  .news-blog-card-img {
    position: relative;
    min-width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &::before {
      content: "";
      background: linear-gradient(4deg, rgba(0, 0, 0, 0.83) -1%, rgba(0, 13, 56, 0.00) 51.04%);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

  }

}

/*====================
   News Blog Content
  ====================*/
.news-blog-content {

  padding: 0 10px 20px 20px;

  &.position-absolate {
    position: absolute;
    bottom: 0;
    left: 0;
  }

  &.v2 {
    padding: 20px;
  }

  &.v3 {
    background: $color-white;
    padding: 30px;
    width: 100%;

    .blog-title {
      a {
        color: $color-black;
      }
    }

    .news-date-admin {

      .date,
      .admin {
        color: $color-paragraph;

        a {
          color: $color-paragraph;

          &:hover {
            color: $color-primary;
          }
        }
      }
    }
  }

  .blog-title {
    font-family: $title-font;
    font-weight: 600;
    text-transform: capitalize;
    margin-top: 11px;

    &.title-font-size-20 {
      font-size: 20px;
      line-height: 30px;
    }

    &.title-font-size-30 {
      font-size: 20px;
      line-height: 30px;
    }

    &.title-font-size-26 {
      font-size: 20px;
      line-height: 30px;
    }

    &.title-font-size-36 {
      font-size: 20px;
      line-height: 30px;
    }

    &.title-font-size-45 {
      font-size: 20px;
      line-height: 30px;
    }

    a {
      color: $color-white;

      &:hover {
        color: $color-primary;
      }
    }

    &.v1 {
      width: calc(100% - 10px);
    }

    &.v2 {
      width: calc(100% - 15px);
    }

    &.v3 {
      a {
        color: $color-secondary;
      }
    }
  }


}

/*====================
   News Date Amin
  ====================*/
.news-date-admin {
  @include d-flex;
  @include align-items;
  gap: 10px;
  margin-top: 9px;

  .date,
  .admin {
    color: $color-white;
    font-family: $body-font;
    font-size: 14px;
    font-weight: 600;
    line-height: 26px;
    text-transform: uppercase;
    @include d-flex;
    @include align-items;
    gap: 8px;

    a {
      color: $color-white;

      &:hover {
        color: $color-primary;
      }
    }

    .date-icon,
    .admin-icon {
      font-size: 16px;
      font-weight: 400;
    }

    &.v2 {
      color: $color-black;

    }
  }
}

/*====================
   Update Post
  ====================*/
.update-news {
  @include d-flex;
  @include align-items;
  width: 90%;
  margin: 60px auto;
}

/*====================
   Update Card Img
  ====================*/
.update-news-card {
  position: relative;

  img {
    border-radius: 23px;
    width: 100%;
  }

  .card-content {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);

    a {
      color: $color-white;
      font-family: $body-font;
      font-size: 16px;
      font-weight: 700;
      line-height: 26px;
      text-transform: uppercase;
      position: relative;
      z-index: 1;

      &:hover {
        color: $color-primary;
      }

      &::before {
        content: "";
        background: url("../../assets/img/update-news/news-bg-img.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 166px;
        height: 39px;
        position: absolute;
        left: -47px;
        bottom: -11px;
        z-index: -1;
      }
    }
  }

}

/*====================
  Hero Section
  ====================*/
.hero-section {
  width: 97%;
  margin: 0 auto;
  padding: 40px 0;
  border-radius: 50px;
  border: 1px solid $color-white5;

  .hero-logo {
    @include d-flex;
    @include justify-content-center;
    align-content: center;
    margin-bottom: 45px;
  }
}

/*====================
   Custom Margin
  ====================*/
.my-100 {
  margin: 100px 0;
}

.py-100 {
  padding: 100px 0;
}

/*====================
   Hero Slider
  ====================*/
.hero-slider {
  padding: 0 5px;
  position: relative;
  overflow: hidden;

  .news-blog-card-content {
    @include d-flex;
    @include align-items;
    flex-direction: column;
    position: absolute;
    bottom: 5px;

    .content-title {
      text-align: center;
      font-family: $title-font;
      font-size: 15px;
      font-weight: 700;
      line-height: 25px;
      text-transform: capitalize;

      a {
        text-decoration-line: underline;
        color: $color-white;

        &:hover {
          color: $color-primary;
        }

      }
    }
  }

  .hero-img {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    height: 300px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &::before {
      position: absolute;
      left: 0;
      top: 0;
      content: "";
      background: linear-gradient(7deg, #000 -3.61%, rgba(0, 0, 0, 0.00) 46.25%);
      width: 100%;
      height: 100%;
    }
  }
}

.latest-news {
  background: $color-white6 ;
}

/*====================
   Feature Posts
  ====================*/
.feature-posts {
  width: 97%;
  margin: 100px auto;
}

.feature-posts-wrapper {
  @include d-flex;
  flex-wrap: wrap;
  border-radius: 30px;
  overflow: hidden;

  .health-news-left-img {
    position: relative;
    min-height: 100%;

    &::before {
      content: "";
      background: linear-gradient(5deg, #141212 -13.62%, rgba(17, 17, 17, 0.12) 37.9%);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

/*====================
   Feature News Card
  ====================*/
.feature-news-card {
  position: relative;
  background: $color-fashion;
  padding-top: 30px;
  padding-right: 30px;
  @include transition;

  &:hover {
    background: $color-secondary;
  }

  .news-card-img {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    margin-left: 30px;

    img {
      width: 100%;
    }
  }

  &.v2 {
    background: $color-sports;
    border-top: 1px solid $color-white;
    min-height: 100%;

    &:hover {
      background: $color-secondary;
    }
  }
}

.feature-posts-right-content {
  width: 100%;

  .news-right-top-img {
    position: relative;

    &::before {
      content: "";
      background: linear-gradient(5deg, #141212 -13.62%, rgba(17, 17, 17, 0.12) 37.9%);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    img {
      width: 100%;
      height: 300px;
      object-fit: cover;

    }
  }
}

.news-blog-footer {
  @include d-flex;
  @include align-items;
  justify-content: space-between;
  flex-wrap: wrap;

  .footer-icon {
    margin-top: 20px;
  }
}

/*====================
   Weekend Wrapper
  ====================*/
.weekend-wrapper {
  @include d-flex;

  .row [class*="col-"] {
    padding: 0;
    margin: 0;
  }
}

/*====================
   Weelend Card
  ====================*/
.weekend-card {
  padding: 30px 30px 40px 30px;

  .news-blog-content {
    padding: 0;
  }

  .news-blog-content {
    .news-date-admin {

      .date,
      .admin {
        color: $color-paragraph;
      }
    }
  }

  .card-wrapper {
    @include d-flex;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 10px;

    .card-icon {
      a {
        @include d-flex;
        @include justify-content-center;
        @include align-items;
        width: 96px;
        height: 96px;
        border-radius: 100px;
        background: $color-white7 ;
        transform: rotate(0deg);

        &:hover {
          transform: rotate(24deg);
        }
      }
    }


  }

  .weekend-img {
    margin-top: 24px;
    border-radius: 10px;
    overflow: hidden;
    width: 250px;
    height: 250px;

    img {
      width: 100%;
      border-radius: 10px;
    }
  }
}


/*=========================
   Tranding Stories Card
  =========================*/
.tranding-stories-card {
  position: relative;

  .stories-card-title {
    font-family: $title-font;
    font-size: 60px;
    line-height: 70px;
    font-style: italic;
    font-weight: 600;
    margin-bottom: 26px;

    a {
      color: $color-secondary;

      &:hover {
        color: $color-primary;
      }
    }
  }

  .stories-card-img {

    img {
      border-radius: 10px;
      width: 100%;
    }
  }

  .stories-card-icon {
    position: absolute;
    bottom: 5px;
    left: 5px;

    a {
      border-radius: 100px;
      width: 96px;
      height: 96px;
      background: $color-secondary;
      @include d-flex;
      @include justify-content-center;
      @include align-items;
      transform: rotate(0deg);
      @include transition;

      &:hover {
        transform: rotate(25deg);
      }
    }
  }
}

/*=============================
   Trending Pagination Wrapper
  =============================*/
.trending-pagination-wrapper {
  @include d-flex;
  @include align-items;
  margin-top: 100px;
  margin-left: 30px;

  .pagination-wrap {
    margin-bottom: 16px;
  }

  .pagination-icon-right {
    margin-right: 48px;
    display: none;
  }

  .pagination-icon-left {
    margin-left: 48px;
    display: none;
  }

  .swiper-pagination-bullet {
    background: transparent;
    color: $color-black;
    opacity: 1;
    width: 30px;
    height: 30px;
    font-family: $title-font;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    font-size: 40px;
    margin-right: 20px;
  }

  .swiper-pagination-bullet-active {
    color: $color-primary;
  }

}

.swiper-pagination {
  position: inherit;
}


/*====================
   Fashion Sale Wrapper
  ====================*/
.fashion-sale-wrapper {
  width: 100%;
  margin: 0 auto;

  img {
    width: 100%;
  }
}

/*====================
   Most Popular
  ====================*/
.most-popular-right-content {
  margin-top: 30px;
}

.most-popular-left-content {
  .most-popular-left-img {
    img {
      width: 100%;
      border-radius: 20px;
    }
  }

  .news-blog-content {
    margin-top: 30px;
    padding: 0;

    .news-date-admin {

      .date,
      .admin {
        color: $color-paragraph;

        a {
          color: $color-paragraph;

          &:hover {
            color: $color-primary;
          }
        }
      }
    }

    .blog-title {

      a {
        color: $color-secondary;

        &:hover {
          color: $color-primary;
        }
      }
    }
  }
}

/*====================
   Most Popular List
  ====================*/
.most-popular-list {
  border-radius: 10px;
  background: $color-white6;

  li {

    border-bottom: 1px solid $color-white;

    &:last-child {
      border-bottom: none;
    }
  }

  .most-popular-card {
    padding: 30px 0;

    .popular-card-img {
      width: 114px;
      height: 114px;
      margin: 0 auto;

      img {
        width: 100%;
      }

      margin-bottom: 16px;
    }

    .card-wrapper {
      width: 80%;
      margin: 0 auto;

      .popular-tag {
        font-family: $body-font;
        font-size: 14px;
        font-weight: 700;
        line-height: 26px;
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 2px;

        a {
          color: $color-paragraph;

          &:hover {
            color: $color-primary;
          }
        }
      }

      .popular-title {
        text-align: center;
        font-family: $title-font;
        font-size: 16px;
        line-height: 26px;
        font-weight: 600;
        text-transform: capitalize;

        a {
          color: $color-secondary;

          &:hover {
            color: $color-primary;
          }
        }

      }
    }
  }
}

.category-news-wrapper {
  @include d-flex;
  @include align-items;
  @include justify-content-center;
  flex-wrap: wrap;
  gap: 10px;
}

.subscribe-instagram-title {
  margin: 0 auto;

  .big-title {
    color: $color-secondary;
    text-align: center;
    font-family: $title-font;
    font-size: 35px;
    line-height: 45px;
    font-weight: 500;
  }
}

/*========================
   Subscribe Logo Wrapper
  ========================*/
.subscribe-logo-wrapper {
  @include d-flex;
  @include justify-content-center;
  @include align-items;
  margin-top: 32px;

  ul {
    @include d-flex;
    @include align-items;
    @include justify-content-center;
    flex-wrap: wrap;
    gap: 10px;

    li {
      a {

        @include d-flex;
        @include align-items;
        gap: 5px;
        border-radius: 30px;
        border: 0.5px solid $color-paragraph;
        padding: 3px 12px;

        .social-title {
          color: $color-paragraph;
          font-family: $body-font;
          font-size: 14px;
          font-weight: 700;
          line-height: 26px;
          text-transform: uppercase;
          @include transition;

        }

        .social-icon {
          color: $color-paragraph;
          @include transition;
        }

        &:hover {

          .social-title,
          .social-icon {
            color: $color-primary;
          }

        }
      }
    }
  }
}

/*=======================
   Instagram Card Wrapper
  =======================*/
.instagram-card-wrapper {
  .instagram-img {
    position: relative;
    border-radius: 10px;
    overflow: hidden;

    img {
      border-radius: 10px;
      width: 100%;
    }

    &:hover {
      .instagram-icon {
        opacity: 1;
      }

    }

    .instagram-icon {
      @include transition;
      opacity: 0;

      a {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 68px;
        height: 68px;
        @include d-flex;
        @include justify-content-center;
        @include align-items;
        background: linear-gradient(180deg, #A40C77 0%, #C1281C 100%);
        font-size: 26px;
        font-weight: 400;
        color: $color-white;
        border-radius: 100px;
      }
    }
  }
}

.subscribe-to-instagram-slider-wrapper {
  margin-top: 60px;
}

/*====================
   Hero Slider Wrapper
  ====================*/
.hero-slider-wrapper {
  margin-top: 60px;

  .swiper-button-next,
  .swiper-button-prev {
    display: none;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background: $color-white;
    color: $color-secondary;
    font-family: $title-font;
    font-size: 15px;
    font-weight: 500;
    line-height: 25px;
    @include transition;
    top: 45%;

    &::after {
      display: none;
    }

    &:hover {
      color: $color-primary;
    }
  }

  .swiper-button-next {
    right: -20px;
  }

  .swiper-button-prev {
    left: -20px;
  }
}

/*=======================
   Tranding Post Wrapper
  =======================*/
.trending-posts-wrapper {
  width: 97%;
  margin: 0 auto;
  position: relative;
}

.trending-post-card {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50px;
  padding: 300px 20px 300px 20px;

  .news-blog-content {
    padding: 0;

    .blog-title {
      margin-top: 30px;
      font-size: 30px;
      font-weight: 600;
      line-height: 40px;
      text-transform: capitalize;
      width: 100% !important;
    }

    .news-date-admin {
      margin-top: 20px;
    }
  }
}


.trending-posts-swiper2 {
  position: relative;

  .swiper-wrapper {
    .swiper-slide {
      img {
        width: 100%;
      }
    }
  }
}

.post-mini-img {
  width: 150px;
  height: 150px;
  cursor: pointer;

  img {
    width: 100%;
  }
}

.trending-posts-swiper {
  padding-left: 40px;
  position: absolute;
  top: 164px;
  right: 68px;
  display: none;

  &::before {
    position: absolute;
    left: 0;
    content: "";
    border-radius: 2.5px;
    background: #BFBFBF;
    height: 100%;
    width: 5px;
  }

  .swiper-slide {
    width: 100% !important;

    &.swiper-slide-thumb-active {
      img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
      }
    }
  }

  .swiper-wrapper {
    flex-direction: column;
    gap: 20px;
  }
}

.trending-posts-swiper-button {
  position: absolute;
  bottom: 170px;
  left: 108px;

  .swiper-button-next,
  .swiper-button-prev {
    width: 80px;
    height: 80px;

    background: $color-white8;
    color: $color-paragraph;
    border-radius: 100px;
    font-family: $title-font;
    font-size: 25px;
    line-height: 35px;
    font-weight: 500;
    @include transition;

    &:hover {
      background: $color-secondary;
      color: $color-white;
    }

    &::after {
      display: none;
    }
  }
}

.swiper-container {
  width: 50%;
  overflow: hidden;
  height: 100%;
  position: relative;

  .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
    position: relative;
  }

  .swiper-slide {
    text-align: center;
    font-size: 33px;
    @include d-flex;
    @include justify-content-center;
    @include align-items;
    width: auto;
    position: relative;
    overflow: hidden;

  }
}


/*=======================
  Post Wrapper
  =======================*/
.page-wrapper {
  padding: 35px 0;
}

/*=======================
  Post Content Wrapper
  =======================*/
.post-content-wrapper {
  padding: 30px;

  .post-footer {
    .post-read-more {
      margin-top: 10px;
    }
  }
}

/*=======================
  Post Meta
  =======================*/
.post-meta {
  margin-bottom: 15px;
}

.post-meta ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-meta ul li {
  display: inline-block;
  margin-right: 15px;
  text-transform: capitalize;
  color: var(--color-body);
}

@media screen and (max-width: 425px) {
  .post-meta ul li {
    margin-right: 6px;
  }
}

.post-meta {
  ul {
    li {
      a {
        color: var(--color-body);

        &:hover {
          color: $color-primary;
        }
      }

      i {
        margin-right: 6px;
        font-size: 14px;
        font-weight: 400;
        color: $color-primary;
      }
    }
  }
}

/*=======================
  Single Post Item
  =======================*/
.single-post-item {
  margin-bottom: 35px;
  overflow: hidden;
  box-shadow: 0px 0px 33px rgba(0, 0, 0, 0.1098039216);
  border-radius: 10px;
  background-color: $color-white;
}

.single-post-item {
  .post-content-wrapper {
    .post-title {
      font-size: 20px;
      line-height: 30px;
      font-weight: 400;
      margin-bottom: 20px;
      font-family: $body-font;

      a {
        color: $color-secondary;

        &:hover {
          color: $color-primary;
        }
      }
    }
  }
}


.single-post-item {
  .post-content-wrapper {
    .post-footer {
      @include d-flex;
      @include justify-content-between;
      margin-top: 23px;
      border-top: 1px solid $color-white3;
      padding-top: 19px;
      align-items: center;
    }
  }
}

@media screen and (max-width: 570px) {
  .single-post-item {
    .post-content-wrapper {
      .post-footer {
        display: block;
      }
    }
  }
}

.single-post-item {
  .post-content-wrapper {
    .post-footer {
      .post-read-more {
        a {
          font-size: 16px;
          color: $color-black;

          &:hover {
            color: $color-primary;
          }

          i {
            font-size: 15px;
            position: relative;
            top: 2px;
            margin-left: 5px;
            color: $color-primary;
          }
        }
      }

      span {
        &.tag-title {
          font-weight: 600;
          color: $color-secondary;
        }
      }
    }
  }
}

.tags-links {
  a {
    background: $color-primary;
    margin: 5px;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 14px !important;
    color: $color-white;

    &:hover {
      background-color: var(--color-black);
      color: var(--color-white);
    }
  }
}


/*=====================
  Post Thumbnail Wrapper
  =====================*/

.post-thumbnail-wrapper {
  position: relative;

  img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
  }

  .post-gallery-item {
    img {
      height: 480px;
      object-fit: cover;
    }
  }

  .video-button {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background-color: $color-primary;
    border-radius: 100%;
    text-align: center;
    vertical-align: middle;
    line-height: 101px;
    color: $color-white;

    &:hover {
      background-color: $color-white;
      color: $color-primary;
    }
  }
}


/*=====================
  Widget Block
  =====================*/
.widget_block {
  padding: 30px 40px;

  .wp-block-search__inside-wrapper {
    display: flex;
    margin: 10px 0;
    background: $color-white;
    border-radius: 10px;

    .search-input {
      color: $color-black;
      border: 1px solid var(--color-thard);
      border-radius: 5px;
      padding: 15px;
      box-shadow: none;
      outline: none;
      width: 100%;
    }

    .search-iocn {
      padding: 18px 35px;
      font-weight: 600;
      line-height: 1;
      font-size: 16px;
      border: 2px solid transparent;
      border-radius: 3px;
      color: $color-white;
      display: inline-flex;
      align-items: center;
      text-transform: capitalize;
      z-index: 2;
      background-color: $color-primary;
    }
  }

}

.block-8 {
  .widget-title {
    margin-bottom: 13px;
  }
}

#block-9 {
  .widget-title {
    margin-bottom: 21px;
  }
}

.widget_block h2 {
  font-size: 24px;
  line-height: 34px;
  color: $color-secondary;
  font-weight: 600;
  position: relative;
}

.widget_block {
  .wp-block-latest-comments {
    padding-left: 0;
    margin-top: 17px;
  }
}

.wp-block-archives-dropdown,
.wp-block-categories-dropdown {
  margin-bottom: 10px;
}

.widget {
  margin-bottom: 35px;
  padding: 30px 40px;
  background-color: $color-white3;
  border-radius: 5px;
  overflow: hidden;

  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      border-top: 1px solid;
      position: relative;
      padding-bottom: 8px;
      border-color: transparent;
      font-weight: 500;

      &:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
      }
    }

    ul {
      padding-left: 15px;
    }
  }
}

.widget ul ul li:first-of-type {
  padding-top: 10px;
  border-color: transparent;
  margin-top: 5px;
}

.widget ul ul li:first-of-type {
  margin-top: 10px;
}

.widget.widget_archive li a,
.widget .wp-block-archives li a,
.widget.widget_categories li a,
.widget .wp-block-categories li a {
  padding: 0px 0 0 23px;
  color: $color-secondary;

  &:hover {
    color: $color-primary;
  }
}

.widget.widget_archive li a:before,
.widget .wp-block-archives li a:before,
.widget.widget_categories li a:before,
.widget .wp-block-categories li a:before,
.widget.widget_pages li a:before,
.widget.widget_meta li a:before,
.widget.widget_nav_menu li a:before,
.widget.widget_recent_entries li a:before,
.widget.widget_recent_comments li:before,
.wp-block-latest-comments__comment:before,
.wp-block-latest-posts li a:before {
  position: absolute;
  content: "\f101";
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  left: 0;
  font-size: 14px;
}


.widget.widget_tag_cloud a,
.wp-block-tag-cloud a {
  font-size: 13px !important;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 5px;
  padding: 5px 16px 3px 16px;
  border-radius: 5px;
  margin-bottom: 10px;
  color: $color-white;
  font-weight: 600;
  background-color: $color-primary;

  &:hover {
    background: $color-secondary;
  }
}


/*=======================
   Post Details Wrapper
  =======================*/

.post-details-wrapper {
  margin: 35px 0;

  .has-post-thumbnail {
    .post-content-wrapper {
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      border-top-right-radius: 0;
      border-top-left-radius: 0;

    }
  }

  .post-content-wrapper {
    padding: 30px;
    overflow: hidden;
    box-shadow: 0px 0px 33px rgba(0, 0, 0, 0.1098039216);
    border-radius: 10px;

    .post-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}



@media screen and (max-width: 570px) {
  .post-details-wrapper {
    .post-content-wrapper {
      .post-footer {
        display: block;
      }
    }
  }
}

.post-details-wrapper {
  .post-content-wrapper {
    .post-footer {
      span {
        &.tag-title {
          display: none;
        }

        &.tags-links {
          a {
            &:first-of-type {
              margin-left: 0;
            }
          }
        }
      }
    }
  }
}


@media screen and (max-width: 570px) {
  .post-details-wrapper {
    .post-content-wrapper {
      .post-footer {
        .share-this-post {
          margin-top: 20px;
        }
      }
    }
  }
}

.post-details-wrapper {
  .post-content-wrapper {
    .post-footer {
      .share-this-post {
        ul {
          margin: 0;
          padding: 0;
          list-style: none;

          li {
            display: inline-block;
            margin-left: 5px;

            a {
              display: block;
              width: 35px;
              height: 35px;
              color: $color-white;
              text-align: center;
              padding: 6px;
              border-radius: 100%;

              &.social-facebook {
                background: #175BEB;
              }

              &.social-twitter {
                background: #1DA1F2;
              }

              &.social-pintarest {
                background: #c8232c;
              }

              &.social-linkedin {
                background: #0072B1;
              }
            }
          }
        }
      }
    }
  }
}



/*=======================
   Post Thumbail Wrapper
  =======================*/
.post-thumbnail-wrapper {
  position: relative;

  img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .post-gallery-item {
    img {
      height: 480px;
      object-fit: cover;
    }
  }

  .video-button {
    &:hover {
      background-color: $color-white;
      color: $color-primary;
    }
  }
}


.post-details-wrapper {
  .entry-content {
    img {
      margin-top: 20px;
      margin-bottom: 5px;
      width: 100%;
    }
  }
}

.post-details-wrapper {
  article {
    .post-title {
      font-size: 20px;
      line-height: 30px;
      margin-bottom: 20px;
      margin-top: 0;
      font-weight: 500;
    }
  }
}

.entry-content {
  p {
    margin-bottom: 16px;

    a {
      text-decoration: underline;
      color: $color-secondary;
      font-weight: 500;

      &:hover {
        color: $color-primary;
      }
    }
  }
}

/*=======================
   Author Info Wrapper
  =======================*/
.author-info-wrapper {
  box-shadow: 0px 0px 33px rgba(0, 0, 0, 0.1098039216);
  margin-top: 40px;
  padding: 30px;
  border-radius: 10px;

  .author-info-box {
    display: inline-flex;
    align-items: center;

    .author-image {
      max-width: 150px;
      width: 100%;
      margin-right: 30px;
      max-height: 150px;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 100%;
        filter: drop-shadow(5px 5px 33px rgba(24, 24, 27, 0.15));
      }
    }

    .author-info {
      display: inline-block;

      a {
        color: $color-black;

        &:hover {
          color: $color-primary;
        }
      }
      h2 {
        font-size: 25px;
        font-weight: 600;
        margin-bottom: 6px;
        text-transform: capitalize;
      }
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
          display: inline-block;
        }
      }
    }
  }
}


@media screen and (max-width: 425px) {
  .author-info-wrapper {
    .author-info-box {
      justify-content: center;
      flex-wrap: wrap;

      .author-image {
        margin-right: 0;
      }

      .author-info {
        text-align: center;
        margin-top: 20px;

      }
    }
  }
}


.author-info-wrapper .author-info-box .author-info ul li a {
  margin-right: 10px;
}

.author-info-wrapper .author-info-box .author-info ul li a[data-original-title=facebook-f] {
  color: #175BEB;
}

.author-info-wrapper .author-info-box .author-info ul li a[data-original-title=twitter] {
  color: #1DA1F2;
}

.author-info-wrapper .author-info-box .author-info ul li a[data-original-title=linkedin] {
  color: #0072B1;
}

.author-info-wrapper .author-info-box .author-info ul li a[data-original-title=pinterest] {
  color: #C8232C;
}

.author-info-wrapper .author-info-box .author-info ul li a[data-original-title=instagram] {
  color: #EF00A2;
}

.author-info-wrapper .author-info-box .author-info ul li a[data-original-title=dribbble] {
  color: #ea4c89;
}

.author-info-wrapper .author-info-box .author-info ul li a[data-original-title=whatsapp] {
  color: #25D366;
}



/*=======================
   Comments Respond
  =======================*/

.comment-respond{
  .comments-heading {
    font-size: 25px;
    line-height: 35px;
    font-weight: 700;
    margin-bottom: 6px;
  }
}

#cancel-comment-reply-link {
  margin-left: 10px;
  font-size: 20px;
  font-weight: 700;
}

#cancel-comment-reply-link:hover {
  text-decoration: underline;
}

.comment-respond {
  margin-top: 30px;
  padding: 35px 45px 30px 45px;
  background-color: $color-white3;
  color: $color-secondary;
  border-radius: 5px;
}

.newscope-comment-input {
  position: relative;
}

.newscope-comment-input input,
.newscope-comment-input textarea {
  margin-bottom: 0;
}

li.comment .comment-respond {
  margin-bottom: 45px;
  margin-top: 45px;
}

.comment-form .comment-form-wrap {
  margin: 0 -45px 0 -42px;
  padding: 12px 30px 0 30px;
}

.comment-form input,
.comment-form textarea {
  background: $color-white;
  color: $color-black;
}

.comment-message textarea {
  height: auto;
}

.comment-form-cookies-consent {
  label {
    display: inline;
    margin-left: 10px;
  }
}

.comment-form .comment-message {
  margin-top: 30px;
  margin-bottom: 30px;

}

.comment-form-wrap ::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: $color-black;
}

.comment-form-wrap :-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: $color-black;
  opacity: 1;
}

.comment-form-wrap ::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: $color-secondary;
  opacity: 1;
}

.comment-form-wrap :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: $color-secondary;
}

.comment-form-wrap ::-ms-input-placeholder {
  /* Microsoft Edge */
  color: $color-secondary;
}

.comment-form-wrap ::placeholder {
  /* Most modern browsers support this now. */
  color: $color-secondary;
}

#message-cmt::placeholder {
  /* Most modern browsers support this now. */
  color: $color-secondary;
}

.comments-area button.newscope-button i,
.woocommerce-Reviews button.newscope-button i {
  font-size: 14px;
}



/*=======================
   Input Focus
  =======================*/

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: $color-black;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  width: 100%;
}

.comment-respond {
  input {
    padding: 15px;
  }

  textarea {
    padding: 15px;
  }
}

textarea {
  height: 120px;
  width: 100%;
}

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;
}

input:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=url]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=date]:focus,
textarea:focus {
  box-shadow: none;
  outline: 1px solid;
}

form.search-form label,
form.search-form input {
  margin-bottom: 0;
  width: 100%;
  border-radius: 5px;
}

form.search-form {
  position: relative;
}

form.search-form .search-submit {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 60px;
  font-size: 18px;
}

.header-inner {
  .header-menu-wrapper {
    margin-top: 40px;
  }
}

/*=================
  Top to bottom
  =================*/
.bottom-to-top {
  @include d-flex;
  @include align-items;
  @include justify-content-center;
}

.to-top {
  background: $color-primary;
  position: fixed;
  bottom: 16px;
  right: 32px;
  opacity: 0;
  pointer-events: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;

  .to-top-icon {
    color: $color-white;
    @include d-flex;
    @include justify-content-center;
    @include align-items;
    line-height: 38px;
  }
}

.to-top.active {
  bottom: 32px;
  pointer-events: auto;
  opacity: 1;
  z-index: 999;
  display: block;
}





/*=======================
   Top Marque Wrapper
  =======================*/
.top-marque-wrapper {
  @include d-flex;
  @include align-items;
  gap: 10px;

  .list-icon {
    font-size: 14px;
    line-height: 24px;
    color: $color-primary;
  }

  .list-title {
    font-family: $title-font;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;

    a {
      color: $color-white;
    }
  }
}

.trending-stories {
  background: $color-white6;
}

/*=======================
   Post Gallery Slider
  =======================*/
.post-gallery-slider {

  .swiper-button-next,
  .swiper-button-prev {
    background: $color-primary;
    border-radius: 100px;
    width: 50px;
    height: 50px;
    color: $color-white;

    &::after {
      display: none;
    }
  }
}

/*=======================
   Top Marque
  =======================*/
/* Define the keyframe animation for marquee */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* Styling for the marquee container */
.marquee {
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
  padding: 1rem 0;
  color: #fff;
}

/* Styling for the items inside the marquee */
.marquee__item {
  display: flex;
  align-items: center;
  gap: 15px;
  will-change: transform;
  animation: marquee 25s linear infinite;
}

/* Styling for the separator inside the marquee */
.marquee__seperator {
  margin: 0 2rem;
}

/* Pause the animation on hover */
.marquee:hover .marquee__item {
  animation-play-state: paused;
}

.news-blog-card {
  .news-blog-card-img {
    position: relative;
  }
}

.news-blog-card-position-relative {
  position: relative;
  left: 0;
  bottom: 0;
}


/*=======================
   Search Popup
  =======================*/
.header-search-popup {
  position: fixed;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 30%;
  z-index: 9999;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  top: 0;
  left: 0;
  transform: translateY(-130%);
  transition: transform 600ms ease, opacity 600ms ease;

  .header-search-popup-content {
    width: 100%;
    max-width: 550px;
    position: relative;

    form {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      background-color: $color_white;
      overflow: hidden;
      max-height: 60px;
      height: 60px;

      input[type="search"] {
        min-width: 500px;
        width: 100%;
        margin: 0;
        padding: 15px;
      }

      button[type="submit"] {
        position: absolute;
        background: var(--color-black);
        right: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border: 1px solid;
        padding: 0;
        width: 55px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: absolute;
        top: 5px;
        border-radius: 0;
        background-color: $color_black;
        color: $color_white;
        right: 5px;
        z-index: 9999;

        i {
          margin-left: 0;
        }

        &:hover {
          i {
            margin: 0;
          }
        }

        &:focus {
          outline: 2px dotted $color_primary;
        }
      }
    }
  }

  .header-search-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $color_primary;
    opacity: 0.98;
    cursor: pointer;
    z-index: -1;

    .closes-button {
      a {
        width: 50px;
        height: 50px;
        margin: 0 auto;
        position: absolute;
        bottom: -22px;
        left: 0;
        right: 0;
        border-radius: 100%;
        text-align: center;
        color: $color_white;
        background: $color_primary;
        padding: 14px 0;
        box-shadow: 0px 0px 33px 0px #0000004f;
        -webkit-transition: .4s;
        transition: .4s;

        &:hover {
          background-color: $color_black;
          color: $color_white;
        }
      }
    }
  }
}

.header-search-popup.active {
  transform: translateY(0%);
}





/*==================== Dark Light Button Implementation ====================*/
.checkbox {
  display: none;
}

.switch {
  background-color: #111;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  position: relative;
  height: 26px;
  width: 50px;
  /* Scale the size to your need */
  transform: scale(0.7);
  .ball {
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    height: 22px;
    width: 22px;
    transform: translateX(0px);
    transition: transform 0.2s linear;
  }
}

.checkbox:checked+.switch .ball {
  transform: translateX(24px);
}

.fa-moon {
  color: #f1c40f;
}

.fa-sun {
  color: #f39c12;
}
/*=======================
   Menu Right
  =======================*/
.menu-right {
  @include d-flex;
  @include justify-content-between;
  gap: 20px;
  width: min-content;
  position: absolute;
  top: 12px;
}