.news {
  padding-bottom: 20px;

  .owl-stage-outer {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .item {
    .card {
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }
  }

  .news-list-view {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 2rem;
    grid-gap: 2rem;
    padding: 2rem;

    @include media-breakpoint-down(lg) {
      grid-template-columns: 1fr 1fr;
    }

    @include media-breakpoint-down(md) {
      grid-template-columns: 1fr;
      padding: 1rem;
    }

    .item {
      .card {
        // background: $secondary-color;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        border-radius: 20px;

        .figure {
          border-radius: 20px 20px 0 0;
          flex: 4 1 0%;
        }

        .content {
          background-color: $secondary-bg;
          filter: brightness(1.1);

          .title {
            h3 {
              line-height: 1;
              padding-bottom: 15px;

              a {
                color: $secondary-color;
                filter: brightness(1.1);
                font-family: $font-family-primary;
                text-decoration: none;
                transition:
                  color 0.2s ease,
                  text-decoration-color 0.2s ease;

                &:hover,
                &:focus-visible {
                  color: $secondary-color;
                }

                &:active {
                  color: $secondary-color;
                }
              }
            }

            .subtitle {
              color: $secondary-color;
              font-weight: 400;
              filter: brightness(1.1);

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

        .gradient-overlay:before {
          display: none;
        }

        .teaser {
          font-weight: 400;
          text-align: left;
        }

        &:hover {
          .content {
            background-color: $secondary-color;

            .title h3 a,
            .title .subtitle {
              color: $white;
            }
          }
        }
      }

      @include media-breakpoint-down(md) {
        .item[style="padding-bottom: 50px;"] {
          padding-bottom: 20px !important;
        }
      }
    }

    .owl-carousel .owl-nav button.owl-prev:hover,
    .owl-carousel .owl-nav button.owl-prev:focus,
    .owl-carousel .owl-nav button.owl-prev:active,
    .owl-carousel .owl-nav button.owl-next:hover,
    .owl-carousel .owl-nav button.owl-next:focus,
    .owl-carousel .owl-nav button.owl-next:active {
      border-color: $black;
    }

    .owl-carousel .owl-nav button.owl-prev:before,
    .owl-carousel .owl-nav button.owl-next:before {
      background: $black;
      box-shadow: inset $black 0 0 0 3px;
      color: $white;
    }

    .mosaic .card {
      .gradient-overlay-left:before {
        background: $background-transparent linear-gradient(180deg, #00000000 0%, #000000b2 100%) 0% 0% no-repeat padding-box;
      }

      .content {
        .title {
          h3 {
            color: $white;
            padding-bottom: 5px;

            a:hover {
              color: $white;
            }
          }

          .subtitle {
            color: $white;
          }
        }

        .btn-inn {
          display: none;
        }
      }

      &.content-on-image-bottom .content,
      &.img-top .content {
        padding: 30px !important;
      }

      .figure {
        border-radius: 20px;
      }

      .teaser {
        color: $white;
        font-weight: 700;
        font-size: 24px;

        @include media-breakpoint-down(lg) {
          font-size: 20px;
        }
      }
    }

    .mosaic-2col .item.h-100 {
      padding-bottom: 0 !important;
    }

    .card .btn-out {
      display: none;
    }

    .news-body .news-teaser p {
      font-weight: 700;
      padding-bottom: 5px;
    }
  }

  ul.f3-widget-paginator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    li {
      display: block;
      line-height: 4rem;
      text-align: center;
      font-size: 1.625rem;
      font-weight: 700;
      width: 70px;
      height: 65px;
      border-radius: 50%;
      position: relative;
      cursor: pointer;
      background-color: $secondary-bg;
      // background: radial-gradient(
      //   circle,
      //   #ffffff 30%,
      //   #d4a02a 32%,
      //   #f4c542 50%,
      //   #b3780d 70%,
      //   #8f5f06 100%
      // );
      // filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
      padding: 0;
      color: $black;
      overflow: hidden;

      a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: $black;
        text-decoration: none;
        font-weight: inherit;
      }

      &::before {
        display: none;
      }
    }

    li.previous::after {
      content: "";
      width: 12px;
      height: 12px;
      border-left: 4px solid $black;
      border-bottom: 4px solid $black;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-40%, -50%) rotate(45deg);
    }

    li.next::after {
      content: "";
      width: 12px;
      height: 12px;
      border-right: 4px solid $black;
      border-top: 4px solid $black;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-60%, -50%) rotate(45deg);
    }

    li.previous a,
    li.next a {
      font-size: 0;
    }
  }

  .news-body {
    hr {
      height: 1px !important;
    }

    ul {
      li {
        &::before {
          background: $black;
        }
      }
    }

    figure.table {
      table.contenttable {
        tr {

          th,
          td {
            padding: 5px 10px;
          }
        }
      }
    }

    p {
      padding-bottom: 20px;
      font-family: $font-family-primary !important;
    }
  }

  .hero-inner {
    &.hero-main {
      &.news-detail {
        .container {
          .aside {
            h1.ce-headline-center {
              color: $secondary-color;
              filter: brightness(1.1);
              text-transform: uppercase;
              letter-spacing: 0.1rem;
              font-family: $font-family-secondary !important;
              font-weight: 400 !important;

              text-shadow:
                1px 1px 0 $blue-dark,
                1px 1px 0 $blue-dark,
                1px 1px 0 $blue-dark,
                1px 1px 0 $blue-dark !important;
              paint-order: stroke;
              margin: 0.05rem 0 0.1rem 0 !important;
              font-weight: 700 !important;
              line-height: 110% !important;
            }
          }
        }
      }
    }
  }

  .owl-stage-outer {
    .owl-item {
      .item {
        .card {
          .content {
            background-color: $secondary-bg;
            filter: brightness(1.1);

            .title {
              h3 {
                color: $white !important;
                filter: brightness(1.1);

                a {
                  color: $white;
                  filter: brightness(1.1);
                  font-family: $font-family-secondary;
                  text-decoration: none;
                  transition:
                    color 0.2s ease,
                    text-decoration-color 0.2s ease;

                  &:hover,
                  &:focus-visible {
                    color: $white;
                  }

                  &:active {
                    color: $white;
                  }
                }
              }

              .subtitle {
                color: $white;
                font-weight: 400;
                filter: brightness(1.1);

                &:hover {
                  color: $white;
                  filter: brightness(1.1);
                }
              }
            }
          }

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

.card {
  .content {
    @include media-breakpoint-down(md) {
      padding: 30px;
    }

    @include media-breakpoint-down(sm) {
      padding: 18px;
    }

    .title {
      h3 {
        font-size: 42px;
        text-transform: none;
        filter: brightness(1.1);
        color: $white;
        font-family: $font-family-primary;

        @include media-breakpoint-down(lg) {
          font-size: 1.75rem;
          text-align: unset !important;
        }
      }

      .subtitle {
        text-transform: none;
        color: $white;
        filter: brightness(1.1);

        @include media-breakpoint-down(md) {
          p {
            text-align: unset !important;
          }
        }
      }
    }
  }

  .figure {
    border-radius: 0 20px 20px 0;

    @include media-breakpoint-down(md) {
      border-radius: 20px 20px 0 0;
    }
  }
}

//General card content style
.item {
  .card {
    background-color: $secondary-color;
    filter: brightness(1.1);
    color: $white;

    &:not(.border-rounded) {
      border-radius: 0;
    }

    &:not(.border-rounded) .figure {
      border-radius: 0;
    }

    &.img-top,
    &.img-right,
    &.img-left,
    &.no-pic {
      color: $white;

      .content {
        .title {
          h3 {
            font-size: 24px;
            font-weight: 500;
            line-height: 28.8px;
            font-family: $font-family-primary;
            color: $white;
            filter: brightness(1.1);
          }
        }
      }
    }

    &.content-on-image,
    &.content-on-image-bottom {
      color: $white;

      .content {
        .title {
          h3 {
            font-size: 24px;
            font-weight: 500;
            line-height: 28.8px;
            font-family: $font-family-primary;
            color: $white;
            filter: brightness(1.1);
          }
        }

        .btn-inn,
        span.subtitle p {
          color: $white !important;
        }
      }
    }

    .content {

      .btn-inn,
      span.subtitle p {
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        font-family: $font-family-primary;
        color: $white !important;
        filter: brightness(1.1);
      }

      .title {
        h3[style="text-align:left"] {
          &~.btn-inn {
            text-align: left;
          }

          &~span.subtitle p {
            text-align: left;
          }
        }
      }
    }

    &:has(.gradient-overlay) {
      &.content-on-image-bottom {
        .content {
          .title {
            h3 {
              font-size: 1.25rem !important;
              text-shadow: 0 0.125em 3px $black;
              font-weight: 700 !important;
            }

            &::after {
              text-shadow: 0 0.125em 3px $black;
            }
          }
        }
      }
    }
  }

  .content {

    .btn-out,
    .btn-inn {

      .fa.fa-arrow-right,
      .fa.fa-arrow-left,
      .fa.fa-chevron-right,
      .fa.fa-chevron-left {
        font-size: 13px;
      }
    }

    .btn {
      &.btn-primary {
        background: $red-dark;
        color: #ffffff;
        max-width: 250px;
        padding: 10px 15px;

        @include media-breakpoint-down(md) {
          min-width: 230px;
        }

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

  .content {

    .btn-out,
    .btn-inn {

      .fa.fa-arrow-right,
      .fa.fa-arrow-left,
      .fa.fa-chevron-right,
      .fa.fa-chevron-left {
        font-size: 13px;
      }

      .btn {
        &.btn-primary {
          background: $red-dark;
          color: #ffffff;
          max-width: 250px;
          padding: 10px 15px;

          @include media-breakpoint-down(md) {
            min-width: 230px;
          }

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

  &:hover {
    .card {
      &:has(.gradient-overlay) {
        &.content-on-image-bottom {
          .content {
            .title {
              h3 {
                color: $white !important;
              }

              &::after {
                color: $white !important;
              }
            }
          }
        }
      }
    }
  }
}

@include media-breakpoint-down(md) {
  .container {

    h2.text-center,
    .text-center.h2,
    h2 strong,
    .h2 strong {
      word-wrap: break-word;
    }

    .container {
      --bs-gutter-x: 0rem;

      .row,
      .owl-carousel {
        .owl-stage-outer {
          .owl-item {
            .item.h-100 {
              padding-bottom: 20px !important;
            }
          }
        }
      }
    }
  }
}

// price-cards adjustments
.card {
  &.cardtype-price {
    background-color: $secondary-color;
    filter: brightness(1.1);

    .content {
      .title {
        h3 {
          color: $white;
          filter: brightness(1.1);
        }

        span.subtitle {
          ul {
            @include media-breakpoint-down(md) {
              padding: 0;
            }

            li {
              color: $white;
              filter: brightness(1.1);
            }
          }
        }
      }

      .price-wrap {
        .price-items {
          .price-style1 {
            font-family: $font-family-primary;
            background-color: $white;
            color: $secondary-color !important;

            .title {
              >p {
                font-weight: 700;
                color: $secondary-color !important;
                filter: brightness(1.1);
              }

              .subtitle {
                p {
                  text-align: left;
                  color: $secondary-color !important;
                  filter: brightness(1.1);
                }
              }
            }

            .price-wrap-inner {
              span.price-old {
                color: $secondary-color !important;
                filter: brightness(1.1);
              }

              .price {
                color: $third-color !important;

                a {
                  color: $third-color !important;

                  span.price {
                    color: $third-color !important;
                  }
                }
              }
            }
          }

          .price-style2 {
            font-family: $font-family-primary;
            background-color: $white;
            color: $third-color !important;

            .title {
              >p {
                font-weight: 500;
                font-size: 20px;
                color: $secondary-color !important;
              }

              .subtitle {
                p {
                  text-align: left;
                  color: $secondary-color !important;
                }
              }
            }

            .price-wrap-inner {
              .price {
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                a {
                  color: $third-color !important;

                  span.price {
                    font-size: 18px;
                    color: $third-color !important;
                  }
                }

                .title {
                  display: flex;
                  font-weight: 500;
                  font-size: 18px;
                  gap: 5px;
                  color: $secondary-color !important;
                }
              }

              span.price-old {
                color: $secondary-color !important;
              }
            }
          }

          &.price-right {
            li.price-style1 {
              display: flex;
              justify-content: space-between;
              padding: 20px 20px 20px 20px;
              margin-bottom: 10px;
              align-items: end;

              span.subtitle {
                padding: 0;
              }

              .price-wrap-inner {
                .price {
                  float: inline-start;
                  padding: 0;
                }
              }
            }
          }

          &.price-left {
            li.price-style1 {
              padding: 20px 20px 20px 20px;
              margin-bottom: 10px;
              display: flex;
              flex-direction: row-reverse;
              justify-content: space-between;
              align-items: center;

              .price-wrap-inner {
                padding: 0;

                .price {
                  float: none;
                }
              }
            }
          }

          &.items-aside {
            li.price-style2 {
              .price-wrap-inner {
                padding: 0px;

                .price {
                  flex-direction: column;
                  color: $third-color !important;

                  .title {
                    margin-top: 20px;
                  }
                }
              }
            }
          }

          &.price-right {
            li.price-style2 {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              margin-bottom: 10px;
              padding: 20px;

              .price-wrap-inner {
                .price {
                  float: none;
                  gap: 45px;
                }
              }
            }
          }

          &.price-left {
            li.price-style2 {
              .price-wrap-inner {
                margin-bottom: 10px;
                padding: 20px;
              }
            }
          }

          p {
            @include media-breakpoint-down(md) {
              text-align: left;
            }
          }

          .title {
            h3 {
              color: $white;
            }

            span.subtitle {
              ul {
                @include media-breakpoint-down(md) {
                  padding: 0;
                }

                li {
                  color: $white;
                }
              }
            }
          }
        }
      }

      .btn-out {
        .btn {
          &.btn-primary {
            background: $red-dark;
            color: #ffffff;
            max-width: 250px;
            padding: 10px 15px;

            @include media-breakpoint-down(md) {
              min-width: 230px;
            }

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

//homepage card with gradient overlay
.card:has(.gradient-overlay) {
  &.content-on-image-bottom {

    // height: 345px;
    @include media-breakpoint-down(md) {
      // height: 292.797px;
    }

    .content {
      .title {

        // padding: 0;
        h3 {
          padding: 0;
          font-size: 20px !important;
          color: $white;
          text-align: left !important;
        }

        &::after {
          right: 0px;
          font-size: 30px !important;
          color: $white;
        }
      }
    }
  }
}

// responsive card : general
@include media-breakpoint-down(md) {
  .card {
    &.content-on-image {
      .figure {
        img {
          height: 100%;
        }
      }
    }
  }
}

.item {
  .card {
    &.border-rounded {
      .figure {
        border-radius: 8px 8px 0 0 !important;
      }
    }

    &.content-on-image.border-rounded {
      .figure {
        border-radius: 8px !important;
      }
    }
  }

  &.newsletter {
    .card {
      &.border-rounded {
        .figure {
          border-radius: 0 8px 8px 0 !important;

          @include media-breakpoint-down(md) {
            border-radius: 20px 20px 0 0 !important;
          }
        }
      }
    }
  }
}

//tab content
.tab-wrapper {
  .row {
    ul.nav {
      &.nav-tabs {
        padding: 0 !important;

        li {
          p {
            color: $white !important;
          }
        }
      }
    }

    .tab-content {
      .tab-pane {
        .container {
          .row {
            .item {
              .card {
                .content {
                  ul {
                    @media (max-width: 1199.98px) {
                      padding: 13px 0 !important;
                    }
                  }

                  .btn-inn {
                    a {
                      padding: 24px 30px;

                      @media (max-width: 1199.98px) {
                        padding: 9px 10px 8px;
                        width: 100% !important;
                        min-width: auto !important;
                        max-width: 100% !important;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.jarallax {
  .container {
    &.twocol-66-33 {
      .section {

        &.section-bg-color[style*="background-color"],
        &[style*="background"] {
          background-color: transparent !important;
          background: transparent !important;
        }
      }
    }
  }
}