@use "../abstracts" as *;

.breadcrumb-section {
  position: relative;
  width: 100%;
  padding: rem(230) 0 rem(135);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 1;
  margin-top: -97px;


  @media (max-width: 1699px) {
    margin-top: -110px;
    padding: rem(230) 0 rem(135);
  }


  &__content {
    position: relative;
    z-index: 2;
  }

  &__breadcrumb {
    display: inline-flex;
    align-items: center;
    background: #fff;
    padding: rem(10) rem(30);
    border-radius: rem(50);
    margin-bottom: rem(25);

    &-dash {
      width: rem(15);
      height: rem(4);
      background: #121117;
      margin-right: rem(15);
      border-radius: rem(2);
    }

    &-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      align-items: center;
      gap: rem(8);
    }

    &-item {
      font-size: rem(13);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: rem(1);

      a {
        color: $color-primary;
        text-decoration: none;
        transition: color 0.3s ease;

        &:hover {
          color: darken($color-primary, 15%);
        }
      }

      &.active {
        color: $color-primary;
      }
    }

    &-sep {
      color: $color-primary;
      font-weight: 700;
    }
  }

  &__title {
    font-size: rem(80);
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.1;

    @media (max-width: 991px) {
      font-size: rem(60);
    }

    @media (max-width: 767px) {
      font-size: rem(48);
    }

    @media (max-width: 575px) {
      font-size: rem(36);
    }
  }
}