.pageForProvider {
  position: relative;
  position: relative;
  justify-content: space-between;
  gap: 32px;
  margin: 0 auto;
  max-width: 1320px;
  padding: 0 24px;
  height: clamp(100vh, 100%, max-content);
  /* height: clamp(100vh, 100%, max-content); */
}
.pageForProviderMain {
  display: flex;
  justify-content: center;
  padding-top: 72px;
  padding-bottom: calc(3vw + 38.4px);
  width: clamp(300px, calc(100% - 124px), 1240px);
  flex-direction: column;
  gap: 16px;
  margin: 0 auto;
  position: absolute;
  top: 0;
  right: 24px;
}

.pageForPrivate {
  justify-content: center;
  padding-top: calc(1vw + 52.8px);
  padding-bottom: calc(3vw + 38.4px);
  width: calc(23.3vw + 628px);
  flex-direction: column;
  /* gap: calc(1vw + 36.8px); */
  margin: 0 auto;
  gap: 24px;
}

.pageForPrivateChild {
  display: flex;
  flex-direction: column;
}
.pageForPrivateChild ul li {
  margin-left: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
/* Выход со странички поставщика. Верхняя часть страницы _____*/
/* Слайдер ____________________________________*/
.slideshow-container {
  max-width: 1000px;
  position: relative;
  width: calc(23.3vw + 628px);
}
.mySlides {
  display: none;
}
.mySlides img {
  width: calc(23.3vw + 628px);
  height: calc(8vw + 142.4px);
}
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin: 0 8px;
  margin-top: -22px;
  padding: 4px 8px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 8px 8px 0;
  user-select: none;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.dotBox {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: -60px;
}
.dot {
  cursor: pointer;
  padding: 0;
  width: calc(0.25vw + 10.2px);
  height: calc(0.25vw + 10.2px);
  background-color: rgba(226, 226, 226, 0.35);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
  border-radius: 100%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.activeForSlider,
.dot:hover {
  background-color: var(--white);
}
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

/* Слайдер ____________________________________*/
.goToMainPage {
  border: 1px solid var(--secondary-hover);
  border-radius: 8px;
  padding: 8px 12px;
  width: max-content;
  transition: border 0.5s;
  cursor: pointer;
}
.sliderForProviderHeader .goToMainPage {
  margin-bottom: calc(0.95vw + 12.6px);
}
.goToMainPage:hover {
  border: 1px solid var(--color-grey-550);
}
.goToMainPage:active {
  border: 1px solid var(--secondary-click);
}
.goToMainPage {
  border: 1px solid var(--secondary-hover);
  border-radius: 8px;
  padding: 8px 12px;
  width: max-content;
}
.goToMainPage button {
  display: flex;
  align-items: center;
  gap: 5px;
}
.goToMainPage img {
  height: 12px;
}
.goToMainPage p {
  font-weight: 400;
  font-size: 14px;
  line-height: 143%;
  color: #b4b4b4;
}
/* Выход со странички поставщика. Верхняя часть страницы _____*/

/* Тело странички поставщика  ________________________________*/
.pageForProviderBody {
  display: flex;
  flex-direction: column;
  gap: calc(0.9vw + 21px);
}
.pageForProviderBodyHeader {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.discountDelivery {
  position: absolute;
  top: 0;
  right: 0;
  align-items: center;
  gap: 16px;
}
.discountProviderPage {
  border-radius: 4px;
  padding: 4px 8px;
  background: #06482a;
  font-weight: 400;
  font-size: 14px;
  line-height: 143%;
  color: #00ff1a;
}
.deliveryProviderPage {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.deliveryProviderPage img {
  margin-top: 2px;
  width: 24px;
}

.pageForProviderBodyTitle {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pageForProviderBodyTitle h3 {
  font-weight: 600;
  font-size: calc(0.9vw + 21px);
  line-height: 125%;
  max-width: 752px;
  overflow: hidden; /* Скрываем часть текста, которая не помещается */
  display: -webkit-box; /* Используем флекс-контейнер */
  -webkit-box-orient: vertical; /* Вертикальная ориентация контейнера */
  text-overflow: ellipsis; /* Добавляем многоточие */
  word-wrap: break-word; /* Разрываем слова при необходимости */
  word-break: break-all; /* Принудительный разрыв слов, если они не помещаются */
}
.pageForProviderBodyCategory {
  max-width: 752px;
  flex-wrap: wrap;
}
.pageForProviderBodyCategory p {
  font-weight: 400;
  font-size: 14px;
  line-height: 143%;
  color: var(--grayColor);
}
.providerCatagRender {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: var(--color-grey-300);
  box-sizing: border-box;
  padding-right: 10px;
}
.providerCategRenderPopup {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 9999;
}
.providerCatalogRender {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(80vh - 100px);
  overflow: auto;
}
#providerCategRenderPopup .providerCatagRender {
  overflow: auto;
  max-height: calc(80vh - 100px);
}
.providerCatagRender p {
  height: min-content;
}
.categCloseBtn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 999;
  cursor: pointer;
}
.popupCategoryBoxBody {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px;
  width: 100%;
  min-height: 40vh;
  max-width: 752px;
  box-sizing: border-box;
  border-radius: 16px;
  background: var(--surface);
}
.popupCategoryBoxBody h3 {
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  line-height: 150%;
}
.providerCatagRender p {
  border-radius: 4px;
  background: var(--color-grey-775);
  padding: 8px 12px;
}
.providerCatagRender button {
  padding: 8px 12px;
  cursor: pointer;
}
.pageForProviderBodyContent {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 40px;
}
.pageForProviderBodyContentLeft {
  display: flex;
  flex-direction: column;
  /* gap: calc(0.9vw + 21px); */
  gap: 32px;
}
.providerContentBox {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.providerContentBoxHeader {
  display: flex;
  gap: 8px;
}
.contentPartImg img {
  width: 24px;
}
.contentPartTitle h5 {
  font-weight: 700;
  /* font-size: calc(0.23vw + 13.3px); */
  line-height: 143%;
  color: var(--white);
}
.providerContentBoxBody {
  font-weight: 400;
  font-size: calc(0.23vw + 13.3px);
  line-height: 143%;
}

.providerContentBoxBody li {
  list-style: disc;
  margin-bottom: 8px;
}
.providerContentBoxBody ul {
  margin-left: 23px;
}
.providerContentFlexBody {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
}
.providerContacts {
  display: flex;
  align-items: center;
  gap: 12px;
}
.providerContactsLinks {
  display: flex;
  align-items: center;
  gap: 12px;
}
.providerContacts img {
  height: 25px;
}
.pageForProviderBodyContentRight .providerContacts img {
  padding-bottom: 16px;
}
.pageForProviderBodyContentRight .providerContacts p,
.pageForProviderBodyContentRight .providerContacts a {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--secondary-hover);
  width: 100%; /* Ограничиваем ширину элемента */
  box-sizing: border-box;
}
.urlForProviderCard {
  cursor: pointer;
  white-space: nowrap; /* Запрещаем перенос текста */
  overflow: hidden; /* Прячем все, что выходит за пределы элемента */
  text-overflow: ellipsis;
}
.pageForProviderBodyContentRight .providerEmail {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--secondary-hover);
  width: 100%;
}

.providerEmail {
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  color: var(--white);
  /* border-bottom: 1px solid var(--white); */
}
.providerSocialLinksArray {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.providerSocialLinksArray a {
  display: flex;
  gap: 8px;
  border-radius: 20px;
  background: var(--secondary-click);
  padding: 8px 16px;
  text-decoration: none;
  width: max-content;
}
.contactFlex1 {
  flex: 1;
}
.providerSocialLinksArray a p {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: var(--white);
}
.telNumberForProviderCard {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: var(--white);
  text-decoration: none;
}
.grayText {
  color: var(--grayColor);
}

.pageForProviderBodyContentRight {
  position: relative;
  min-width: 368px;
  box-sizing: border-box;
}
.pageForProviderLinkBoxes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 368px;
  height: min-content;
  box-sizing: border-box;
}

.pageForProviderLinkBox {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 368px;
  height: min-content;
  border-radius: 16px;
  padding: 24px;
  background: var(--color-grey-775);
  box-sizing: border-box;
}
.pageForProviderLinkBoxHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  position: relative;
}
.linkBoxFirst img {
  width: 56px;
  height: 56px;
  border-radius: 32px;
}

.linkBoxSecond {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.linkBoxSecond h6 {
  font-weight: 400;
  font-size: calc(0.23vw + 13.3px);
  line-height: 143%;
}
.linkBoxSecond p {
  font-weight: 400;
  font-size: calc(0.125vw + 11.6px);
  line-height: 133%;
  color: var(--grayColor);
}
.textFiveBox {
  display: none;
}
.pageForProviderLinkBoxFooter {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 8px;
}
.pageForProviderLinkBoxFooter button {
  display: flex;
  align-items: center;
}
.pageForProviderLinkBoxFooter button svg {
  height: 17px;
}
.pageForProviderLinkBoxFooter button {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  gap: 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.5s;
}
.pageForProviderLinkBoxFooter .secBtn button {
  background: var(--secondary-hover);
}
.pageForProviderLinkBoxFooter .mainBtn button {
  background: var(--white);
  color: var(--blackText-100);
}
.pageForProviderLinkBoxFooter .secBtn button:hover {
  background: var(--secondary);
}
.pageForProviderLinkBoxFooter .secBtn button:active {
  background: var(--secondary-click);
}
.pageForProviderLinkBoxFooter .mainBtn button:hover {
  background: var(--white-hover);
}
.pageForProviderLinkBoxFooter .mainBtn button:active {
  background: var(--gray-light);
}
/* #telNumberForProviderCard {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 120%;
  padding: 20px 10px;
  border-radius: 12px;
  background: var(--blackText-200);
} */
.root {
  display: flex;
  gap: 4px;
  align-items: center;
}
.root a,
.root p {
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-grey-500);
}
.root a {
  text-decoration: none;
  cursor: pointer;
}
/* Тело странички поставщика  ________________________________*/

/* Нижняя часть странички поставщика  ________________________*/
@media (min-width: 960px) and (max-width: 1200px) {
  .pageForProviderMain {
    /* width: calc(91.66vw - 180px); */
  }
  .pageForPrivate {
    width: calc(91.66vw - 180px);
  }
  .slideshow-container {
    width: calc(91.66vw - 180px);
  }
  .mySlides img {
    width: calc(91.66vw - 180px);
  }
}
@media (max-width: 900px) {
  .textFiveBox {
    display: block;
  }
  #providerContactSecondBox.pageForProviderLinkBox {
    display: none;
  }
  .pageForProviderBodyContent {
    flex-wrap: wrap-reverse;
  }
  .pageForProviderBodyContentRight {
    width: 100%;
  }
  .pageForProviderBodyContentLeft {
    width: 100%;
  }
  .pageForProviderLinkBox {
    width: 100%;
  }
  .pageForProviderBodyContentRight {
    min-width: 100%;
  }
  .pageForProviderLinkBoxes {
    min-width: 100%;
  }
}
@media (min-width: 640px) and (max-width: 960px) {
  .pageForProviderMain {
    /* width: calc(93.75vw - 70px); */
  }
  .pageForPrivate {
    width: calc(93.75vw - 70px);
  }
  .slideshow-container {
    width: calc(93.75vw - 70px);
  }
  .mySlides img {
    width: calc(93.75vw - 70px);
  }
}

@media (min-width: 640px) {
  .providerCategRenderPopup {
    height: 100vh;
  }
}

@media (max-width: 640px) {
  .goToMainPage {
    margin-top: calc(2vw + 9.6px);
  }
  #exitFromSpecialProductCard {
    margin-left: calc(2vw + 9.6px);
  }
  .linkBoxFirst img {
    width: 48px;
    height: 48px;
  }
  .textFiveBox {
    display: block;
  }
  .popupCategoryBoxBody {
    height: 100vh;
  }
  .providerCategRenderPopup {
    padding: 0;
  }
  .providerCatalogRender {
    max-height: calc(100vh - 100px);
  }
  #providerCategRenderPopup .providerCatagRender {
    max-height: calc(100vh - 90px);
  }
  .popupCategoryBoxBody {
    gap: 20px;
    padding: 20px;
    border-radius: 0;
  }
  .popupCategoryBoxBody h1 {
    font-size: 20px;
  }
  .pageForProviderBodyContentLeft {
    gap: 24px;
  }
  .pageForProviderLinkBox {
    border-radius: 16px;
    padding: 16px;
  }
  .pageForProviderMain {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    margin: 0 auto;
  }
  .pageForPrivate {
    width: calc(96.8vw - 20px);
    margin: 0 auto;
  }
  .slideshow-container {
    width: calc(96.8vw - 20px);
  }
  .mySlides img {
    width: calc(96.8vw - 20px);
  }
  .pageForProviderMain {
    width: 100%;
    right: 0;
    padding-top: 80px;
  }
}