Untitled

@import "../../../../assets/scss/media";
#performanceSection {
  background-color: #182046;
  padding: 1rem 1.5rem 8rem;
  @include x-767-tablet {
    padding: 3rem 1.5rem 8rem;
  }
  .performanceContainer {
    .slick-slider {
      position: relative;

      .slick-arrow {
        width: 3.6rem;
        height: 3.6rem;

        &.slick-prev {
          left: 45%;
          top: unset;
          bottom: -65px;
          z-index: 11;

          @include d-desktop {
            left: 42%;
          }

          @include x-767-tablet {
            left: 42%;
          }

          &.slick-disabled {
            opacity: 0.75;
          }

          &:before {
            font-size: 3.6rem;
            opacity: 1;
            color: #fff;
          }
        }

        &.slick-next {
          left: 50%;
          top: unset;
          bottom: -65px;
          z-index: 11;

          @include d-desktop {
            left: 52%;
          }

          @include x-767-tablet {
            left: 52%;
          }

          &.slick-disabled {
            opacity: 0.75;
          }

          &:before {
            font-size: 3.6rem;
            opacity: 1;
            color: #fff;
          }
        }
      }

      .slick-list {
        .slick-track {
          width: 7885px;
          opacity: 1;
          transform: translate3d(-6640px, 0px, 0px);
          // height: 35rem;
          .slick-slide {
            padding: 0 1rem;

            @include x-767-tablet {
              padding: 0;
            }
          }
        }
      }

      .slick-dots {
        position: relative;
        display: flex !important;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        gap: 0.2rem;

        li {
          width: 3.5rem;
          height: 0.5rem;
          background-color: #9e9999;
          border-radius: 1rem;

          &.slick-active {
            background-color: #fff;
          }

          button {
            width: 3.5rem;
            height: 0.5rem;
            padding: 0;
            border-radius: 1rem;

            &::before {
              content: none;
            }
          }
        }
      }
    }
  }
}

.performanceTitle .sectionTitle {
  text-align: center;
  padding-bottom: 1rem;
  color: #fff;
}

.performance-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.performance-card {
  background-color: #0c116d;
  cursor: pointer;
  border-radius: 1.4rem;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  height: 29.6rem;
  border: 0.2rem solid #fbe29a;
  // @include x-767-tablet{
  //   height: 45vh;
  // }
  // @include min-d-desktop{
  //   height: 50vh;
  // }
}


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