.filter-elements .box.filter-red,
.filter-elements .btn-filter.filter-red {
  background: $secondary-color !important;
}

@include media-breakpoint-up(lg) {
  .aside.attraction-details-11 {
    padding-right: 55px;
  }
}

.attraction-details {

  .owl-carousel .owl-nav button.owl-prev:before,
  .owl-carousel .owl-nav button.owl-next:before {
    background: $black;
    border: 2px solid $black;
    color: $white;
  }

  .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:hover:before,
  .owl-carousel .owl-nav button.owl-prev:focus:before,
  .owl-carousel .owl-nav button.owl-prev:active:before,
  .owl-carousel .owl-nav button.owl-next:hover:before,
  .owl-carousel .owl-nav button.owl-next:focus:before,
  .owl-carousel .owl-nav button.owl-next:active:before {
    color: $white;
  }

  @include media-breakpoint-up(md) {
    .figure {
      top: 100px;
    }
  }

  .figure::before {
    display: inline-block;
    opacity: 1;
    width: 100%;
    height: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: bottom;
    background: $secondary-color;
    mask-size: 100% 100%;

    @include media-breakpoint-down(xl) {
      mask-size: 100% 65%;
    }

    @include media-breakpoint-down(lg) {
      mask-size: 100% 45%;
    }

    @include media-breakpoint-down(sm) {
      mask-size: 100% 30%;
    }
  }
}

.tx-wabs-attractions {
  .filter-elements .box h3 {
    font-family: $font-family-primary;
  }

  p {
    padding-bottom: 16px !important;
  }

  .iconbox {
    display: none;
  }
}

.headline-details-11 {
  padding-top: 7em;

  @include media-breakpoint-down(md) {
    padding-top: 2em;
  }
}

// tx-wabs-attractions :nandu
.tx-wabs-attractions {
  .filter-elements {
    .container {
      .filter {
        .btn {
          &.btn-filter {
            &.filter-red {
              background-color: $red-dark !important;
              color: $white !important;

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

            .filter-options {
              background-color: $red-dark !important;

              >div:hover {
                background-color: $secondary-color;
              }
            }
          }
        }

        .filter-active-options {
          >div {
            border: 1px solid $red-dark !important;
            color: $red-dark !important;

            .icon {
              background-color: $red-dark !important;
            }
          }
        }
      }
    }

    .row {
      .box {
        &.filter-element {
          &.filter-red {
            background-color: $red-dark !important;
            position: relative;

            img.slider-content-icon {
              width: 80px;
              height: 80px;
              position: absolute;
              left: 10px;
              top: 10px;

              @include media-breakpoint-down(md) {
                width: 40px !important;
                height: 40px !important;
              }
            }

            .title-with-icon {
              h3.attraction-title {
                color: $white !important;

                @include media-breakpoint-down(md) {
                  font-size: 1rem !important;
                }

                &:hover {
                  opacity: 0.9;
                  text-shadow: 0 0 3px $white, 0 0 1px $white;
                }
              }
            }
          }
        }
      }
    }
  }

  .hero-inner {
    &.hero-main {
      &.attraction-details {
        &.owl-carousel {
          margin-top: -24px;

          @include media-breakpoint-down(md) {
            margin-top: 60px !important;
          }

          .figure {
            top: 0px !important;
          }
        }
      }
    }
  }

  section.section {
    .container {
      .row {
        .details {
          header {
            h1 {
              @include media-breakpoint-down(xl) {
                // font-size: 3.236rem !important;
              }

              @include media-breakpoint-down(md) {
                // font-size: 2rem !important;
              }
            }
          }

          p {
            color: $black;
          }
        }
      }
    }
  }
}

.card {
  &.attraction-features {
    height: auto;

    .content {
      .icon-list {
        ul {
          li {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 20px;
          }
        }
      }
    }
  }
}

.container {
  .row {
    &.row-center {
      .heading-txt {
        .aside {
          h2 {
            text-align: center;
            color: $secondary-color;
          }
        }
      }

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

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