/* Brands Page */
.brands-container {
  /* Desktop View */
  .brands-desktop-container {
    width: 100%;
    max-width: 1145px;
    margin: 0 auto;
    .tabs-slider-arrow-wrapper {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      .prev-button,
      .next-button {
        cursor: pointer;
      }
      .custom-tabs-dots-wrapper {
        flex: 1;
        .slick-dots {
          padding: 0;
          margin: 0;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 16px;
          position: relative;
          top: 0;
          bottom: 0;
          list-style: none;
          li {
            display: flex;
            align-items: center;
            list-style: none;
            flex: 1;
            cursor: pointer;
            margin: 0;
            width: 100%;
            height: 100%;
            button {
              width: 100%;
              font-size: 0;
              background: #f0f0f0;
              border: 1px solid #f0f0f0;
              border-radius: 50px;
              height: 7px;
              cursor: pointer;
              min-height: 100%;
              padding: 0;
              &::before {
                display: none;
              }
            }
            &:hover {
              button {
                background: var(--brown);
                border: 1px solid var(--brown);
              }
            }
            &.slick-active {
              button {
                background: var(--brown);
                border: 1px solid var(--brown);
              }
            }
          }
        }
      }
    }
    .brands-slider-content-wrapper {
      margin-top: 50px;
      .slider-content-wrapper {
        font-size: 22px;
        line-height: 26px;
        font-family: var(--font-myriad);
        font-weight: 300;
        color: var(--grey);
        .slider-item-wrapper {
          .company-flex-wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 50px;
            .company-description {
              flex: 0 0 52.75%;
              p {
                margin-top: 0;
                strong {
                  font-weight: 600;
                }
              }
            }
          }
          .jewellery-flex-wrapper {
            display: flex;
            flex-wrap: wrap;
            /* justify-content: space-between; */
            gap: 38px;
            .jewellery-image {
              width: 472px;
              .jewellery-image-wrapper {
                width: 472px;
                height: 512px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .designation-wrapper {
                .name {
                  font-family: var(--font-skia);
                  font-weight: 200;
                  font-size: 24px;
                  line-height: 100%;
                  color: var(--brown);
                  margin: 8px 0;
                }
                .designation {
                  font-family: var(--font-skia);
                  font-weight: 200;
                  font-size: 24px;
                  line-height: 100%;
                  color: #767676;
                  margin: 0;
                }
              }
            }
            .jewellery-description {
              flex: 0 0 52.75%;
              h2 {
                font-family: var(--font-skia);
                font-weight: 200;
                font-size: 42px;
                line-height: 100%;
                color: var(--brown);
              }
              p {
                margin-top: 0;
                font-family: var(--font-myriad);
                font-weight: 300;
                font-size: 22px;
                line-height: 26px;
                color: var(--grey);
                &:not(:last-child) {
                  margin-bottom: 20px;
                }
              }
            }
          }
        }
      }
    }
  }
  /* Mobile View */
  .brands-mobile-container {
    display: none;
  }
}

.brand-slider-images {
  .elementor-widget-container {
    .wd-nav-arrows {
      .wd-btn-arrow {
        opacity: 1 !important;
        transform: translate(0) !important;
      }
    }
  }
}

@media screen and (max-width: 1199px) {
  /* Brands Page */
  .brands-container {
    .brands-desktop-container {
      .tabs-slider-arrow-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        .prev-button,
        .next-button {
          cursor: pointer;
          width: 35px;
          height: 35px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .next-button {
          scale: 0.64;
        }
        .custom-tabs-dots-wrapper {
          flex: 1;
          .slick-dots {
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 5px;
            li {
              display: flex;
              align-items: center;
              list-style: none;
              flex: 1;
              cursor: pointer;
              button {
                width: 100%;
                font-size: 0;
                background: #f0f0f0;
                border: 1px solid #f0f0f0;
                border-radius: 50px;
                height: 7px;
                cursor: pointer;
              }
              &:hover {
                button {
                  background: var(--brown);
                  border: 1px solid var(--brown);
                }
              }
              &.slick-active {
                button {
                  background: var(--brown);
                  border: 1px solid var(--brown);
                }
              }
            }
          }
        }
      }
      .brands-slider-content-wrapper {
        .slider-content-wrapper {
          font-size: 20px;
          line-height: 24px;
          .slider-item-wrapper {
            .company-flex-wrapper {
              gap: 20px;
              margin-bottom: 50px;
              .company-logo {
                width: 300px;
                height: 150px;
                img {
                  width: 150px;
                  margin-right: auto;
                  height: 100%;
                }
              }
              .company-description {
                flex: 1 0 52.75%;
                p {
                  margin-top: 0;
                }
              }
            }
            .jewellery-flex-wrapper {
              gap: 20px;
              .jewellery-image {
                width: 300px;
                .jewellery-image-wrapper {
                  width: 300px;
                  height: 300px;
                  img {
                    width: 300px;
                    height: 100%;
                    margin-right: auto;
                  }
                }
                .designation-wrapper {
                  .name {
                    font-size: 22px;
                  }
                  .designation {
                    font-size: 22px;
                  }
                }
              }
              .jewellery-description {
                flex: 1 0 52.75%;
                h2 {
                  font-size: 28px;
                }
                p {
                  margin-top: 0;
                  &:not(:last-child) {
                    margin-bottom: 20px;
                  }
                }
              }
            }
          }
        }
      }
    }
    /* Mobile View */
    .brands-mobile-container {
      display: none;
    }
  }
  .brand-slider-images {
    .elementor-widget-container {
      .wd-nav-arrows {
        .wd-btn-arrow {
          &.wd-prev {
            inset-inline-end: unset;
            left: 0px;
          }
          &.wd-next {
            inset-inline-start: unset;
            right: 0px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  /* Brands Page */
  .brands-container {
    .brands-desktop-container {
      display: none;
    }
    /* Mobile View */
    .brands-mobile-container {
      display: block;
      .mobile-slider-wrapper {
        .slick-arrow {
          position: absolute;
          top: 16%;
          transform: translateY(0%);
          z-index: 99;
          cursor: pointer;
          background: var(--white);
          padding: 0;
          width: 34px;
          height: 34px;
          min-height: 34px;
          border-radius: 100%;
          &.prev-button {
            left: 10px;
            img {
              margin-right: 2px;
            }
          }
          &.next-button {
            right: 10px;
            img {
              margin-left: 2px;
            }
          }
        }
        .slider-item-mobile {
          .image-wrapper {
            height: 356px;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center top;
            }
          }
          .description-wrapper {
            .logo-wrapper {
              width: 113px;
              height: 104px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            h2 {
              font-family: var(--font-skia);
              font-weight: 200;
              font-size: 22px;
              line-height: 100%;
              margin: 0 0 8px;
              color: var(--brown);
            }
            p {
              font-family: var(--font-myriad);
              font-weight: 300;
              font-size: 16px;
              line-height: 20px;
              color: var(--grey);
              strong {
                font-weight: 600;
              }
            }
          }
        }
      }
      .navigation-items-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        .nav-item {
          font-family: var(--font-skia);
          font-weight: 300;
          font-size: 24px;
          line-height: 100%;
          color: var(--grey);
          margin: 0;
        }
      }
    }
  }
  .brand-slider-images {
    .elementor-widget-container {
      .wd-carousel.wd-grid.wd-initialized.wd-horizontal.wd-watch-progress.wd-backface-hidden {
        width: 300px;
        margin: 0 auto;
      }
    }
  }
}