/home/moonrcjl/public_html/test/wp-content/themes/arsha/assets/scss/components/_breadcrumb.scss
@use "../utils" as *;

/*----------------------------------------*/
/*  2.11 Breadcrumb
/*----------------------------------------*/

.mt-breadcrumb {
  &-space {
    padding-top: 230px;
    padding-bottom: 120px;

    @media #{$md,$xs} {
      padding-top: 150px;
      padding-bottom: 80px;
    }
  }

  &-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    &::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: "";
      background-color: rgb(0, 0, 0);
      opacity: 0.7;
      &-bg {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
    }
  }

  &-title {
    font-size: 76px;
    color: var(--mt-common-white);

    @media #{$xl,$lg} {
      font-size: 80px;
    }

    @media #{$xs} {
      font-size: 50px;
    }
  }

  &-list {
    & span {
      margin: 0 2px;
      display: inline-block;
      color: var(--mt-common-white);
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;

      &.active {
        & a {
          color: var(--mt-theme-1);
        }
      }

      &.dvir {
        margin: 0 2px;
      }
    }
  }

  &-thumb {
    margin-right: -80px;

    @media #{$md,$xs} {
      margin-right: 0;
    }
  }
}