html {
  overscroll-behavior: none;
}

img {
  max-width: 100%;
  height: auto;
}
a {
  color: #1f2937;
  text-decoration: none;
  font-weight: 500;
}
@font-face {
  font-family: "Montserrat";
  src: url("/static/css/fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/static/css/fonts/Montserrat-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/static/css/fonts/Montserrat-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Golos-text";
  src: url("/static/css/fonts/GolosText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Golos-text";
  src: url("/static/css/fonts/GolosText-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Golos-text";
  src: url("/static/css/fonts/GolosText-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Шрифты */

.h1 {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(3rem, 3.33vw, 4rem);
  font-weight: 700;
  line-height: 117%;
  margin: 0;
}

.h2 {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2rem, 2.22vw, 2.5rem);
  font-weight: 500;
  line-height: 125%;
  margin: 0;
  letter-spacing: 0.01em;
}

.h3 {
  font-family: "Golos-text", sans-serif;
  font-size: clamp(1.375rem, 1.53vw, 1.75rem);
  font-weight: 500;
  line-height: 118%;
  margin: 0;
  letter-spacing: 0.01em;
}

.h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 133%;
  margin: 0;
  letter-spacing: 0.01em;
}

.h5 {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 150%;
  margin: 0;
  letter-spacing: 0.01em;
}

.p {
  font-family: "Golos-text", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 150%;
  margin: 0;
  letter-spacing: 0.01em;
}

.small {
  font-family: "Golos-text", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 143%;
  margin: 0;
  letter-spacing: 0.01em;
}

.nav {
  font-family: "Golos-text", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
  margin: 0;
  letter-spacing: 0.01em;
}

.button {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 24px;
  font-style: normal;
  margin: 0;
  letter-spacing: 0.01em;
}

.highlight {
  font-family: "Golos-text", sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 48px;
  margin: 0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

body {
  color: #1f2937;
  margin: 0;
  background-color: #ffffff;

  display: grid;
  grid-template-columns: 10% 80% 10%;
  grid-template-rows: auto auto;
}

.container {
  width: 90%;
  margin: 0 auto;
}

.header {
  height: auto;
  position: relative;

  grid-column: 1/4;
}

.header .container {
  display: flex;
  justify-content: space-between;
  padding: 1.25rem 0;
}

/* общие стили для кнопок */
.btn {
  appearance: none;
  outline: none;
  border: none;
  padding: 1rem 2.9375rem;
  width: auto;
  height: 3.5rem;
  margin: 0;
  cursor: pointer;
  box-sizing: border-box;
}

/* кнопка "выйти" */
.btn-exit {
  color: #ffffff;
  background-color: transparent;
  border: 1px solid #ffffff;
}

/* при наведении */
.btn-exit:hover {
  background-color: #ffffff;
  color: #1f2937;
  border: 1px solid #ffffff;
}

/* при нажатии */
.btn-exit:active {
  background-color: #d1d5db;
  color: #1f2937;
  border: 1px solid #d1d5db;
  transform: scale(1.01);
}

/* тут весь первый блок */
.welcome {
  grid-column: 1/4;
  background-image: url("/static/images/cabinet/laptop-in-empty-room.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  display: grid;
  grid-template-columns: 12% 1fr 12%;
  grid-template-rows: 15% 1fr 7rem;
  grid-row-gap: 5vh;

  min-height: 100vh;

  margin-bottom: -4rem;
}

section.user-info {
  grid-column: 2;
  display: grid;
  grid-template-columns: 39% 1fr 39%;
  position: relative;
}

/* содержимое слева*/
.container-left {
  grid-column: 1;
  margin-top: 15%;

  height: fit-content;
}

.user-name {
  width: 100%;
  margin-bottom: 2.5rem;
}

.content-contract {
  justify-content: space-between;
  display: flex;
  align-items: center;
  padding: 1.8125rem 1.5rem;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.container-contract {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(2px) saturate(100%);
  box-shadow:
    inset 3px 3px 10px rgba(255, 255, 255, 0.1),
    0px 8px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
/* "договор" */
.contract {
  color: #1f2937;
  margin-bottom: 0.3125rem;
}
.nomber-contract {
  color: #6b7280;
  margin-bottom: 0;
}
.pencil {
  cursor: pointer;
}

/* правая часть баланс */
.container-right {
  grid-column: 3;
  background: rgba(255, 255, 255, 0.1);
  height: fit-content;

  backdrop-filter: blur(5px) saturate(100%);
  box-shadow:
    inset 3px 3px 10px rgba(255, 255, 255, 0.4),
    0px 8px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5.34rem 0;
  gap: 3.8125rem;
  width: auto;
  height: auto;
}

.container-balance {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 0.625rem;
  width: auto;
  height: auto;
}

.text-balance {
  width: auto;
  height: auto;
  color: #ffffff;
}

.balance {
  width: auto;
  height: auto;
  text-align: center;
  color: #ffffff;
}

.two-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 1.25rem;
  width: 65%;
  height: auto;
}

.a-btn {
  width: 100%;
}
.top-up-btn {
  background-color: #ff8632;
  color: #ffffff;
  border: 0;
  padding: 1rem 0;
  text-align: center;
  width: 100%;
  cursor: pointer;
}

/* при наведении */
.top-up-btn:hover {
  background-color: #f57c28;
}

/* при нажатии */
.top-up-btn:active {
  background-color: #f57c28;
  transform: scale(1.01);
}
.transaction-history-btn {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  padding: 1rem 0;
  width: 100%;
  height: auto;
  cursor: pointer;
  text-align: center;
}
/* при наведении */
.transaction-history-btn:hover {
  background-color: #ffffff;
  color: #1f2937;
  border: 1px solid #ffffff;
}

/* при нажатии */
.transaction-history-btn:active {
  background-color: #d1d5db;
  color: #1f2937;
  border: 1px solid #d1d5db;
  transform: scale(1.01);
}

/* Новости */

.last-news {
  grid-column: 2;
  display: grid;
  grid-row: 3;

  margin-bottom: 5rem;
  margin-top: 1rem;

  height: auto;
  background-color: #ffffff;
  box-shadow:
    0 8px 18px 0 rgba(0, 0, 0, 0.02),
    0 33px 33px 0 rgba(0, 0, 0, 0.02),
    0 75px 45px 0 rgba(0, 0, 0, 0.01),
    0 134px 54px 0 rgba(0, 0, 0, 0),
    0 209px 59px 0 rgba(0, 0, 0, 0);
}

.content-news {
  padding: 2rem 5rem;
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 1.3rem;
  justify-items: start;
}

.news-text {
  display: grid;
  column-gap: 2rem;
  align-items: start;
}

.news-message.active {
  display: block;
}

.news {
  grid-column: 1;
  align-self: center;
  color: #1f2937;
}

.news-message {
  grid-column: 3;
  display: none;
}

.news-report {
  margin-bottom: 0.6rem;
}

.news-title {
  color: #1f2937;
  margin-bottom: 0.3rem;
}

.news-txt {
  color: #6b7280;
}

.news-signature {
  color: #1f2937;
}

.navigation-arrows {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  justify-self: end;
}

.previous-news {
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.next-news {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.main {
  grid-column: 1/4;
  width: 85%;
  margin: 0 auto;
}

/* подключенные услуги */

.connected-services-block {
  margin-top: 2vh;
  margin-bottom: 3vh;
  background-color: #fff;
}

.conneted-services-title {
  text-align: center;
  margin-bottom: 3rem;
  padding-top: 2rem;
}

.connected-services-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: 2rem;
  justify-items: stretch;
  align-items: stretch;
}

.service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 2.25rem 2.8rem;
  background-color: #ffffff;
  box-shadow:
    0 9px 20px 0 rgba(0, 0, 0, 0.03),
    0 37px 37px 0 rgba(0, 0, 0, 0.03),
    0 83px 50px 0 rgba(0, 0, 0, 0.02),
    0 147px 59px 0 rgba(0, 0, 0, 0),
    0 229px 64px 0 rgba(0, 0, 0, 0);
}

.connected-services-list > a {
  display: flex;
}

.service-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.status-active {
  color: #7dcb1e;
}
.status-suspended {
  color: #ec7777;
}

.status-awaiting-payment {
  color: #e19a79;
}
.service-details {
  margin-bottom: 2.5rem;
}

.service-name {
  max-width: 100%;
  word-wrap: break-word;
}
.tariff {
  display: flex;
  justify-content: space-between;
  align-self: flex-start;
  margin-bottom: 1.25rem;
}

.address {
  display: flex;
  justify-content: space-between;
  align-self: flex-start;
}

.tariff-value {
  color: #6b7280;
  text-align: right;
}

.address-value {
  text-align: end;
  max-width: 100%;
  word-wrap: break-word;

  color: #6b7280;
}

.go-to-service {
  display: block;
  width: 60%;
  min-width: 16rem;

  margin-left: auto;
  margin-right: auto;

  border: 1px solid #d1d5db;
  background-color: transparent;
}
.go-to-service:hover {
  background-color: #f4f5f6;
  border: 1px solid #f4f5f6;
  color: #1f2937;
}

.go-to-service:active {
  background-color: #d1d5db;
  color: #1f2937;
  transform: scale(1.01);
}

.btn-plus {
  display: block;
  min-width: 5rem;
  margin-left: auto;
  margin-right: auto;

  background-color: transparent;
  border: none;
  cursor: pointer;

  margin-bottom: 1.5rem;
}

.add-service-title {
  text-align: center;
  margin-bottom: 1.5rem;
}

.add-service-text {
  text-align: center;
  color: #6b7280;
}

.add-service:hover {
  box-shadow:
    0px 181px 72px rgba(0, 0, 0, 0.01),
    0px 102px 61px rgba(0, 0, 0, 0.05),
    0px 45px 45px rgba(0, 0, 0, 0.09),
    0px 11px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* реклама */

.additional-services-block {
  grid-column: 1/4;
  margin: 7rem auto 0 auto;
}
.additional-services-intro {
  margin-bottom: 4.5rem;
  margin-left: 7rem;
}
.upsell-title {
  margin-bottom: 1rem;
}
.upsell-description {
  color: #6b7280;
}

.upsell-list {
  position: relative;
  align-items: center;
  min-height: 80vh;
  display: flex;
  overflow: hidden;
  padding-bottom: 10rem;
}

.promo-card {
  display: none;

  position: absolute;
  transition:
    transform 1s ease,
    opacity 0.6s ease,
    z-index 0.6s ease;

  flex-direction: column;
  justify-content: space-between;

  background-color: #fff;

  padding: 1.4rem 5.3rem 2.5rem 2.25rem;
  box-shadow:
    0 14px 30px 0 rgba(0, 0, 0, 0.05),
    0 55px 55px 0 rgba(0, 0, 0, 0.04),
    0 125px 75px 0 rgba(0, 0, 0, 0.03),
    0 222px 89px 0 rgba(0, 0, 0, 0.01),
    0 346px 97px 0 rgba(0, 0, 0, 0);
}

.promo-card.active {
  z-index: 2;
  opacity: 1;
  display: flex;

  margin-left: 7rem;
}

.promo-card.next {
  z-index: 1;
  transform: translateX(50%) scale(0.9);
  opacity: 0.8;
  display: flex;
}

.promo-card.next .card-actions .slider-navigation {
  pointer-events: none;
}

.internet-highlight-top {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: flex-start;
}
.promo-header {
  position: relative;
  width: 100%;
  min-height: 21rem;
  align-items: center;

  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.wifi-icon {
  position: absolute;
  left: 0;
  z-index: 1;
}
.highlight-txt {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  align-items: flex-end;
  z-index: 3;
}
.highlight-text {
  color: #ff8632;
}
.product-description {
  max-width: 50rem;
  margin-bottom: 2rem;
}
.product-title {
  margin-bottom: 0.5rem;
}
.product-text {
  color: #6b7280;
}
.card-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
}
.details-button {
  background-color: #ff8632;
  color: #ffffff;
  padding: 1rem 4rem;
}
.details-button:hover {
  background-color: #f57c28;
}

.details-button:active {
  background-color: #f57c28;
  transform: scale(1.01);
}

.previous-promocard,
.next-promocard {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

/* 24tv */

.tv24-highlight-top {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  align-items: flex-start;
}

/* 
!
Регистрация
!
*/

.background {
  height: 100vh;
  width: 100vw;

  position: absolute;

  background-image: url("/static/images/cabinet/laptop-in-empty-room.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  overflow: hidden;
}

.sign-up {
  min-height: 100vh;

  grid-column: 1/4;
  background-image: url("/static/images/cabinet/laptop-in-empty-room.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  display: grid;
  grid-template-columns: 12% 1fr 12%;
  grid-template-rows: 20% 1fr 13%;

  overflow: hidden;
}

.form-container {
  grid-column: 2;
  grid-row: 2;

  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px) saturate(100%);
  box-shadow:
    inset 3px 3px 10px rgba(255, 255, 255, 0.4),
    0px 8px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);

  height: 27rem;
}

#signup-form-container,
#signin-form-container {
  background-color: #ffffff;
  padding: 2.6rem 2.2rem 3rem;

  display: flex;
  flex-direction: column;

  position: absolute;
  z-index: 2;

  height: 28rem;
  width: 31rem;
  margin-top: -1.5rem;

  opacity: 0;
  transition:
    transform 1s ease,
    opacity 0.6s ease,
    z-index 0.6s ease;
}

#signup-form-container {
  margin-left: 1.5rem;
  left: 0;
  transform: translateX(100%);
  gap: 0.5rem;
}

#signup-form-container .signup-fields-group {
  gap: 1rem;
}

#signup-form-container.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 3;

  padding: 2rem 2.2rem 4rem;
  margin-top: -2rem;
}

#signin-form-container {
  right: 0;
  margin-right: 1.5rem;
  transform: translateX(-100%);
  gap: 3.25rem;
}

#signin-form-container.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 3;
}

.form-title {
  text-align: center;
}
.signup-fields-group {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.name-input-block,
.phone-input-block,
.city-input-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.name-input,
.phone-input,
.city-input {
  padding: 1.7rem 1.5rem;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  outline: none;
}

#signup-form-container .name-input,
#signup-form-container .phone-input,
#signup-form-container .city-input {
  padding: 1rem;
}

.name-input:focus,
.phone-input:focus,
.city-input:focus {
  border-color: #d1d5db;
  box-shadow: 0 0 5px #ffc975;
}

.primary-cta-button {
  margin-left: auto;

  background-color: transparent;
  border: 1px solid #ff8632;
  color: #ff8632;
}
.primary-cta-button:hover {
  background-color: #ff8632;
  border: 1px solid #ff8632;
  color: #ffffff;
}

.primary-cta-button:active {
  background-color: #f57c28;
  color: #ffffff;
  border: 1px solid #f57c28;
  transform: scale(1.01);
}

.alternative-action-block-bg {
  padding: 4rem 5.3rem 8rem 5.3rem;
}

.alternative-action-block {
  max-width: 25rem;
  min-width: 20rem;

  display: flex;
  flex-direction: column;
  gap: 2.6rem;
  align-items: left;

  position: absolute;
  opacity: 0;
  transition:
    transform 1s ease,
    opacity 0.6s ease,
    z-index 0.6s ease;

  z-index: 0;
}

.alternative-action-block#action-signup {
  right: 0;
  transform: translateX(-100%);
}

.alternative-action-block#action-signup.active {
  transform: translateX(0);
  opacity: 1;
  z-index: 1;
}

.alternative-action-block#action-signin {
  left: 5rem;
  transform: translateX(100%);
}

.alternative-action-block#action-signin.active {
  transform: translateX(0);
  opacity: 1;
  z-index: 1;
}

.back-arrow-signup {
  max-width: 6rem;
  border: none;
  background-color: transparent;
  padding: 0;
  display: flex;
  justify-content: flex-start;
}
.prompt-text-block {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.prompt-description {
  color: #6b7280;
}

.secondary-cta-button {
  margin-right: auto;

  background-color: transparent;
  border: 1px solid #1f2937;
}

.secondary-cta-button:hover {
  background-color: #1f2937;
  border: 1px solid #1f2937;
  color: #ffffff;
}

.secondary-cta-button:active {
  background-color: #141e2c;
  border: 1px solid #141e2c;
  color: #ffffff;
  transform: scale(1.01);
}

@media (max-width: 1280px) {
  html {
    font-size: 15px;
  }
}

@media (max-width: 70rem) {
  .alternative-action-block {
    display: none;
  }

  .alternative-action-block-bg {
    min-width: 26.25rem;
  }

  .form-container {
    display: block;
    padding-right: 1.5rem;
  }
}

.consent-block {
  display: flex;
  align-items: center;
}

.consent-check {
  width: 2rem;
  height: 2rem;
  margin: 0 0.5rem 0 0;
}

.consent-check::after {
  accent-color: #6b7280;
}

input[type="checkbox"] {
  accent-color: #c2ff70;
}

.consent {
  color: #6b7280;
  max-width: 28rem;
}

.link-consent {
  color: #1f2937;
}

/* 
*
Изменение пароля
*
*/

.change-password {
  grid-column: 1/4;

  display: grid;
  grid-template-columns: 19% 1fr 19%;
  grid-template-rows: 1fr 7%;
  min-height: 70vh;
}

.change-password-form {
  grid-column: 2;
  grid-row: 1;
  padding: 2.5rem 6rem;

  background-color: #fff;
}

.change-password-content {
  display: grid;
  grid-template-rows: auto auto auto;
  row-gap: 1.5rem;
}

.change-password-head {
  display: flex;
  text-align: center;
  align-items: center;
}

.back-arrow-signup {
  width: 2.8rem;
  cursor: pointer;
}

.change-password-txt {
  margin: 0 auto;
}

.change-password-inputs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.password-input-block {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.password-input {
  padding: 1.7rem 1.5rem;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  outline: none;
}

.change-password-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 2.6rem;
  align-items: center;
}

.cancel {
  border: 1px solid #141e2c;
  color: #141e2c;
  background-color: transparent;
  cursor: pointer;
}

.cancel:hover {
  background-color: #1f2937;
  border: 1px solid #1f2937;
  color: #ffffff;
}

.cancel:active {
  background-color: #141e2c;
  border: 1px solid #141e2c;
  color: #ffffff;
  transform: scale(1.01);
}

.change {
  background-color: #141e2c;
  border: 1px solid #1f2937;
  color: #fff;
  cursor: pointer;
}

.change:hover {
  background-color: #1f2937;
  border: 1px solid #1f2937;
  color: #ffffff;
}

.change:active {
  background-color: #141e2c;
  border: 1px solid #1f2937;
  color: #fff;
  transform: scale(1.01);
}

/* 
*
История операций
*
*/

.history {
  border: solid 1px #711f4c;
  color: #711f4c;
}

.history:hover {
  border: solid 1px #711f4c;
  color: #fff;
  background-color: #711f4c;
}

.history:active {
  background-color: #51182c;
}

.history-of-operation {
  grid-column: 1/4;
  display: grid;
  grid-template-columns: 6% 1fr 6%;
  grid-template-rows: auto 1fr auto;
}
.head-history {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  text-align: center;
  margin-bottom: 3rem;
  margin-top: 1rem;
}
.back {
  align-items: flex-start;
  cursor: pointer;
}
.history-txt {
  margin: 0 auto;
}
.history-table {
  grid-column: 2;

  display: inline-table;
  border-collapse: separate;
  border-spacing: 1rem 0.5rem;
}

.history-table th,
.history-table td {
  padding: 1rem 1.5rem;
  text-align: left;
  border: none;
}

.history-table thead th {
  background-color: #1f2937;
  color: #fff;
  border-radius: 10px;
  display: table-cell;
  vertical-align: middle;
}

.history-table tbody td {
  background-color: #f4f5f6;
  border-radius: 10px;
  box-sizing: border-box;
}

#pagination-container {
  grid-column: 2;
  grid-row: 3;

  margin-top: 2.5rem;
  text-align: center;
  clear: both;
  margin-bottom: 5rem;
}

#pagination-container button {
  padding: 0.5rem 1rem;
  margin: 0 0.4rem;

  background-color: #f4f5f6;
  border: 2px solid #f4f5f6;
  border-radius: 8px;

  cursor: pointer;
  transition: all 0.2s;
}

#pagination-container button:hover:not(.active) {
  background-color: #d1d5db;
}

#pagination-container button.active {
  background-color: #141e2c;
  color: #fff;
  border-color: #1f2937;
}

/* 
*
Пополнить
*
 */

.balance-payment-page {
  display: grid;
  grid-template-columns: 13% 1fr 13%;
  grid-template-rows: 5% 1fr 15%;
}

.payment-container {
  grid-column: 2;
  grid-row: 2;

  /* фон */
  backdrop-filter: blur(5px) saturate(100%);
  box-shadow:
    inset 3px 3px 10px rgba(255, 255, 255, 0.4),
    0px 8px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);

  display: grid;
  grid-template-rows: 28% 1fr;
}

.payment-container-head {
  grid-row: 1;
  margin-top: 1.6rem;
  margin-left: 5.25rem;
  margin-right: 5.25rem;
}

.payment-head {
  display: flex;
  align-items: center;
}

.top-up-balace-txt {
  margin: 0 auto;
}

.payment-method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
}

.Central-cash-desk {
  max-width: 11rem;
  text-align: center;
}

.sberbank {
  margin-right: 5.5rem;
}

.payment-selector-central,
.payment-selector-sber,
.payment-selector-vtb {
  height: 0.7rem;
  background-color: #fff;
  box-shadow:
    0 -2px 5px 0 rgba(255, 255, 255, 0.49),
    0 -9px 9px 0 rgba(255, 255, 255, 0.43),
    0 -19px 11px 0 rgba(255, 255, 255, 0.25),
    0 -34px 14px 0 rgba(255, 255, 255, 0.07),
    0 -53px 15px 0 rgba(255, 255, 255, 0.01);
  opacity: 0;
  transform: translateY(4rem);
  transition:
    transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    width 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s ease;
}

.payment-selector-central.active {
  width: 11rem;
  opacity: 1;
  transform: translateY(0.3rem);
}

.payment-selector-sber.active {
  width: 7.8rem;
  opacity: 1;
  transform: translateY(1.2rem);
}

.payment-selector-vtb.active {
  width: 4rem;
  opacity: 1;
  transform: translateY(1.2rem);
}

.payment-bg {
  grid-row: 2;
  background-color: #fff;
  padding: 4.25rem 5rem 4.3rem 5.25rem;
  height: 16rem;
}

.payment-details {
  display: grid;
  grid-template-columns: 27% 1fr;
  column-gap: 2rem;
}

.pm-det-label {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.pm-det {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 1.6rem;
}

.pay-form {
  margin-top: 2rem;
}

.pay-head {
  margin-bottom: 1rem;
}

.pay-form-details {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.money-input {
  padding: 1.1rem 1.5rem;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  outline: none;
}

.pay-btn {
  background-color: transparent;
  border: 1px solid #ff8632;
  color: #ff8632;
}

.pay-btn:hover {
  background-color: #ff8632;
  border: 1px solid #ff8632;
  color: #fff;
}
.pay-btn:active {
  background-color: #f57c28;
  border: 1px solid #f57c28;
  color: #fff;
  transform: scale(1.01);
}

.personal-data-agree {
  color: #6b7280;
  max-width: 20rem;
}

.method {
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.method:hover {
  transform: translateY(-2px);
}

.pay-btn-vtb {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 0.5rem;
  background-color: #0663ef;
  border: 1px solid #0663ef;
  color: #fff;
  min-width: 18rem;
}

.pay-btn-vtb:hover {
  background-color: #0148d4;
  border: 1px solid #0148d4;
  color: #fff;
}

.pay-btn-vtb:active {
  background-color: #0148d4;
  border: 1px solid #0148d4;
  color: #fff;
  transform: scale(1.01);
}

#form-central.active,
#form-vtb.active,
#form-sber.active {
  display: block;
}

#form-vtb,
#form-central,
#form-sber {
  display: none;
}

.details-sber {
  display: grid;
  grid-template-columns: 1fr 20% 15%;
  gap: 8rem;
}
.previous-step {
  display: flex;
  align-items: flex-start;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.step-description {
  color: #6b7280;
}
.next-step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-width: 8rem;
}
.next-step-arrow {
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
}
.img-det {
  margin-top: -3rem;
  grid-column: 2;
  max-height: 22rem;
  box-shadow:
    0 7px 14px 0 rgba(0, 0, 0, 0.15),
    0 26px 26px 0 rgba(0, 0, 0, 0.13),
    0 59px 35px 0 rgba(0, 0, 0, 0.08),
    0 105px 42px 0 rgba(0, 0, 0, 0.02),
    0 164px 46px 0 rgba(0, 0, 0, 0);
}

.img-det.mobile {
  display: none;
}

.next-step-txt {
  white-space: nowrap;
}

#one-step.active,
#two-step.active,
#three-step.active {
  display: grid;
}
#one-step,
#two-step,
#three-step {
  display: none;
}
.payment-form-sber {
  display: grid;
  grid-template-columns: 1fr 20% 20%;
  gap: 8rem;
}

.left-details {
  display: grid;
  grid-template-rows: 80% 20%;
}

.det {
  display: grid;
  grid-template-rows: 20% auto;
  row-gap: 1.5rem;
}
.step {
  display: grid;
  grid-template-rows: 10% auto;
  row-gap: 1.2rem;
}

.prompt-mobile {
  margin: 2vh auto 1vh auto;
  gap: 2.5vh;
  display: none;
}

.mobile-prompt-text {
  color: #6b7280;
}

.mobile-prompt.button {
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 150%;
  font-weight: 500;
}

.back-arrow-signup.mobile {
  display: none;
}

.table-history-wrapper {
  grid-column: 2;
}

.logo-link {
  display: inline-block;
  align-self: center;
}

a.back {
  align-self: center;
}

#payment-select-mobile {
  display: none;
}

button.previous-step.mobile {
  display: none;
}

#sber-second-step {
  display: none;
}

.payment-head-mobile {
  display: none;
}

.sber-previous-second {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}

@media (max-width: 576px) {
  body,
  html {
    width: 100%;
    overflow-x: hidden;
  }

  .table-history-wrapper {
    overflow-x: auto;
    width: 100%;
  }

  .history-table {
    border-collapse: collapse;
    min-width: 700px;
  }

  .history-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px;
    border-bottom: 2px solid #eee;
  }

  .history-table td,
  .history-table th {
    padding: 8px 12px;
    border: 1px solid #ddd;
  }

  .h1 {
    font-size: clamp(2.5rem, 3vw, 3.5rem);
  }

  .welcome {
    display: block;
    background-attachment: scroll;
    padding: 1rem;
    margin-bottom: 0;
    min-height: auto;
    background-position: right;
  }

  section.user-info {
    display: block;
  }

  .container-left,
  .container-right {
    margin-bottom: 2vh;
  }

  .content-news,
  .news-text {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 2vh;
  }

  .content-news {
    padding: 2vh;
  }

  .additional-services-block {
    display: block;
    margin: 0;
  }

  .additional-services-intro {
    display: block;
    margin: 2vh 3vh;
  }

  .upsell-list {
    position: static;
    display: flex;
    flex-direction: column;
    min-height: auto;
    overflow: visible;
    padding-bottom: 0;
    gap: 2rem;
  }

  .promo-card {
    padding: 1.5rem;
  }

  .promo-card.active {
    margin: 0;
  }

  .promo-header {
    min-height: 17rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .highlight-txt {
    align-items: flex-start;
  }

  .card-actions {
    flex-direction: column;
  }

  .details-button {
    width: 100%;
  }

  .slider-navigation {
    margin-top: 2vh;
  }

  .next-promocard img,
  .previous-promocard img,
  .next-news img,
  .previous-news img {
    width: 9rem;
    height: 3rem;
  }

  .news-message.active {
    padding: 0vh 2vh;
  }

  .prompt-mobile {
    display: flex;
  }

  .sign-up {
    grid-template-columns: 1fr;
    background-position: right;
    grid-template-rows: 15% 1fr 13%;
    height: 100vh;
  }

  .form-container {
    box-shadow: none;
    background: none;
    backdrop-filter: unset;
    border: none;
  }

  #signup-form-container,
  #signin-form-container {
    width: 90%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    height: fit-content;
    overflow: hidden;
    box-sizing: border-box;

    /* анимация */
    transform: translateY(100%);
    opacity: 0;
    transition:
      transform 0.8s ease,
      opacity 0.8s ease;
  }

  .primary-cta-button {
    margin-left: unset;
  }

  /* активная панель появляется */
  #signup-form-container.active,
  #signin-form-container.active {
    transform: translateY(0);
    opacity: 1;
  }

  #signin-form-container.active {
    gap: 2.25rem;
  }

  .name-input,
  .phone-input {
    padding: 1.5rem 1.2rem;
  }

  .back-arrow-signup.mobile {
    display: flex;
    max-width: unset;
    width: 100%;
    align-items: center;
    position: relative;
    margin-bottom: 2vh;
  }

  h3.form-title {
    display: none;
  }

  .back-arrow-signup.mobile img {
    width: 2.5rem;
    height: 1rem;
    justify-self: start;
  }

  .back-arrow-signup.mobile h3.form-title {
    position: absolute;
    left: 50%;
    transform: translateX(-40%);
    display: inline;
    white-space: nowrap;
  }

  .change-password {
    display: flex;
    margin-top: 4vh;
  }

  .change-password-form {
    padding: 2.5vh 2.5vh 5vh 2.5vh;
    margin: 0 auto;
    height: fit-content;

    width: fit-content;
    min-width: 80%;
  }

  .password-input {
    padding: 1rem;
  }

  .background {
    background-position: right;
    overflow-y: scroll;
    min-height: 100vh;
    height: fit-content;
  }

  #sber-second-step {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .payment-container,
  .payment-container-head {
    display: none;
  }

  .payment-head-mobile {
    align-items: center;
    margin-bottom: 3vh;
  }

  #mobile-top-name {
    font-size: 1.5rem;
  }

  .balance-payment-page {
    display: flex;
    margin-top: 15%;
  }

  .payment-select-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10% auto;
    width: 90%;
  }

  .select-window {
    background: #fff;
    width: 90%;
    padding: 2rem;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.3rem;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  }

  .select-title {
    font-size: 1.2rem;
    font-weight: 600;
  }

  .select-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .select-btn {
    width: 100%;
    padding: 1rem 0;
    border-radius: 10px;
    border: none;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    font-size: 1rem;
    transition: 0.2s;
  }

  .select-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
  }

  #payment-select-mobile {
    display: flex;
  }

  .balance-payment-page {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .payment-container {
    grid-column: 1;
    grid-template-rows: auto auto;
    margin: 0;
    width: 100%;
    border-radius: 10px;
  }

  .payment-container-head {
    margin: 1rem;
  }

  .payment-head h2 {
    font-size: 1.3rem;
  }
  .pm-back img {
    width: 18px;
  }

  .payment-method {
    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }
  .method h3 {
    font-size: 0.95rem;
    white-space: nowrap;
  }

  .payment-bg {
    padding: 1.5rem;
    height: auto;
    width: 100%;
  }

  .payment-details {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }

  .pm-det-label,
  .pm-det {
    gap: 0.6rem;
  }

  .pay-form-details {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .pay-btn,
  .pay-btn-vtb {
    width: 100%;
    justify-content: center;
  }

  .details-sber {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .img-det {
    display: none;
  }

  .img-det.mobile {
    margin-top: 0;
    max-height: 55vh;
    width: 100%;
    object-fit: contain;
    display: block;
  }

  .left-details {
    display: flex;
  }

  .next-step {
    display: none;
  }

  .next-step.mobile {
    margin-top: 0.5rem;
    align-items: end;
    display: flex;
  }

  #one-step.active,
  #two-step.active,
  #three-step.active {
    display: flex;
    flex-direction: column;
  }

  button.previous-step {
    display: none;
  }

  button.previous-step.mobile {
    display: block;
    align-self: start;
  }

  .change-password-txt {
    font-size: 1.3rem;
    margin: 0 0 0 2vh;
  }

  .password-input-block .h3 {
    font-size: 1rem;
  }

  .change-password-buttons {
    gap: 0;
    justify-content: space-between;
  }

  .btn.change,
  .btn.cancel {
    max-width: 20vh;
    min-width: 15vh;
    padding: 1.5vh 0;
  }
}

/************** 
cookie
**************/

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);

  backdrop-filter: blur(2px) saturate(100%);
  box-shadow:
    inset 3px 3px 10px rgba(255, 255, 255, 0.1),
    0px 8px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 1rem 1rem;

  z-index: 100;
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.cookie-content-banner {
  max-width: 90rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.cookie-head-banner {
  flex-grow: 1;
}

.cookie-banner a {
  color: #f57c28;
  text-decoration: underline;
}

.accept-cookie-btn {
  background-color: #ff8632;
  color: #ffffff;
  padding: 1rem 4rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s;
}

.accept-cookie-btn:hover {
  background-color: #f57c28;
}

.accept-cookie-btn:active {
  background-color: #f57c28;
  transform: scale(1.01);
}

.cookie-banner.show {
  display: block;
  opacity: 1;
}

/******************
Политика cookie
******************/

.cookie-container {
  grid-column: 1/4;
  display: grid;
  grid-template-columns: 10% 80% 10%;
  margin-top: 5rem;
}

.cookie-head {
  grid-column: 2;
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.cookie-policy {
  margin: 0 auto;
}

.content-cookie {
  grid-column: 2;
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  box-shadow:
    0px 515px 206px rgba(0, 0, 0, 0.01),
    0px 289px 174px rgba(0, 0, 0, 0.05),
    0px 129px 129px rgba(0, 0, 0, 0.09),
    0px 32px 71px rgba(0, 0, 0, 0.1);
  margin-bottom: 5rem;
}

/******************** 
Форма заявки
*********************/

.form-add-service {
  width: 60%;
  padding: 3rem 5.25rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  background: #ffffff;
  box-shadow:
    0px 289px 116px rgba(0, 0, 0, 0.01),
    0px 163px 98px rgba(0, 0, 0, 0.05),
    0px 72px 72px rgba(0, 0, 0, 0.09),
    0px 18px 40px rgba(0, 0, 0, 0.1);
}

.form-add-service-title {
  text-align: center;
}

.group-input-services {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.service-selection,
.address-selection,
.number-selection {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.service-selection-select {
  padding: 1.7rem 1.5rem;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  outline: none;

  color: #1f2937;
  cursor: pointer;

  appearance: none;
  background-image: url(/static/images/cabinet/arrows/selector1.svg);
  background-repeat: no-repeat;
  background-position: right 2.8rem center;
}

.service-selection-select:focus {
  background-image: url(/static/images/cabinet/arrows/selector2.svg);
}
.service-selection-select option {
  color: #6b7280;
  background-color: #fff;
}

.address-selection-field,
.number-selection-field {
  padding: 1.7rem 1.5rem;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  outline: none;
}

.group-of-buttons {
  margin-left: auto;
  display: flex;
  gap: 2.2rem;
}

.add-cancel {
  border: 1px solid #ff8632;
  color: #ff8632;
  background: none;
}
.add-cancel:hover {
  background-color: #ff8632;
  border: 1px solid #ff8632;
  color: #ffffff;
}

.add-cancel:active {
  background-color: #f57c28;
  color: #ffffff;
  border: 1px solid #f57c28;
  transform: scale(1.01);
}
.add-add {
  background: #ff8632;
  color: #fff;
}

.add-add:hover {
  background-color: #f57c28;
}
.add-add:active {
  background-color: #f57c28;
  transform: scale(1.01);
}

/****************
форма заявки
*****************/
.add-service-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: all 0.3s ease;
}
.hidden-add-service {
  display: none;
}

/******************** 
Домофон
********************/

.intercom-container {
  grid-column: 2;
  margin-bottom: 7rem;
}
.intercom-content {
  display: grid;
  gap: 3rem;
}
.head-intercom {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 0.6rem;
}
.head-intercom-active small {
  color: #7dcb1e;
}

.group-intercom {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.intercom-tariff-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.tariff-plan-intercom-head,
.intercom-services-head {
  text-align: center;
}
.tariff-plan-group {
  display: flex;
  gap: 1.5rem;
}
.service-maintenance-card {
  display: flex;
  grid-template-columns: auto auto;
  padding: 2.5rem 4rem;
  gap: 0.7rem;
  flex-direction: column;
  background: #ffffff;
  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.service-maintenance-label {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.service-maintenance-label h3 {
  white-space: nowrap;
}
.service-maintenance-cont {
  display: flex;
  justify-content: space-between;
}
.service-maintenance-value {
  display: flex;
}
.service-maintenance-head-value {
  color: #ff8632;
  white-space: nowrap;
}
.service-maintenance-value-cont {
  color: #6b7280;
}
.login-details-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.5rem 4rem;
  gap: 0.6rem;

  background: #ffffff;
  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.login-details-top {
  margin-bottom: 0.4rem;
}
.login-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.login-details-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}
.login-details-data {
  display: flex;
  gap: 2rem;
  width: 100%;
  justify-content: space-between;
  text-align: right;
}
.login-details-phone-value,
.panel-value,
.use-analog-value {
  color: #6b7280;
  text-align: right;
}
.head-intercom-address {
  color: #6b7280;
}
.intercom-services {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
.intercom-services-group {
  gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: stretch;
}
.use-analog-card,
.use-application-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.5rem 4rem;
  gap: 0.4rem;
  box-sizing: border-box;

  background: #ffffff;
  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.use-analog-head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}

.use-analog-cont {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  width: 100%;
}

.use-analog-label,
.use-analog-value {
  display: grid;
  gap: 0.7rem;
}
.use-analog-value {
  white-space: nowrap;
}

/* *******************
Интернет
******************* */
.inet-container {
  grid-column: 2;
  margin-bottom: 7rem;
}
.inet {
  margin-bottom: 3rem;
}

.head-inet {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 0.6rem;
}

.head-inet-active small {
  color: #7dcb1e;
}
.head-inet h4 {
  color: #70707c;
}
.tarif-plan-inet {
  margin-bottom: 3rem;
}
.tarif-plan-inet h2 {
  text-align: center;
  margin-bottom: 2.5rem;
}

.tarif-plan-card-inet {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 4rem;

  width: fit-content;
  margin-left: auto;
  margin-right: auto;

  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.tpc-inet-content {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.tpc-inet-content-label-head {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 0.4rem;
}
.tpc-inet-content-label {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}
.tpc-inet-content-value {
  color: #ff8632;
}
.tpc-inet-content-cont {
  color: #6b7280;
}

.services-inet h2 {
  text-align: center;
  margin-bottom: 2.5rem;
}
.services-card-inet-group {
  gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: stretch;
}
.services-card-inet {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2.5rem 4rem;
  box-sizing: border-box;
  background-color: #fff;

  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.services-inet-content {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  justify-content: space-between;
}
.services-inet-content-label-head {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  margin-bottom: 0.4rem;
}
.services-inet-content-label {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}
.services-inet-content-value {
  color: #ff8632;
}
.services-inet-content-cont {
  color: #6b7280;
  text-align: right;
}

@media (max-width: 1024px) {
  .tarif-plan-card-inet {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 43rem;
    padding: 2.5rem 2rem;
  }
  .services-card-inet-group {
    gap: 1rem;
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 576px) {
  .tarif-plan-card-inet {
    width: 100%;
    max-width: 100%;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
  }

  .services-card-inet-group {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .services-card-inet {
    padding: 1.5rem 1rem;
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 390px) {
  .inet {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .inet a {
    margin-bottom: 0.5rem;
  }

  .tpc-inet-content-label,
  .tpc-inet-content-label-head,
  .services-inet-content-label,
  .services-inet-content-label-head {
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
  }
  .tarif-plan-card-inet,
  .services-card-inet {
    padding: 1rem 0.5rem;
  }
  .services-inet-content-cont {
    text-align: center;
  }
}
/* *********************
КТВ
********************* */

.ctv-container {
  grid-column: 2;
  margin-bottom: 7rem;
}
.ctv {
  margin-bottom: 3rem;
}

.head-ctv {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 0.6rem;
}

.head-ctv-active small {
  color: #7dcb1e;
}
.head-ctv h4 {
  color: #70707c;
}
.tarif-plan-ctv {
  margin-bottom: 3rem;
}
.tarif-plan-ctv h2 {
  text-align: center;
  margin-bottom: 2.5rem;
}

.tarif-plan-card-ctv {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 4rem;

  width: fit-content;
  margin-left: auto;
  margin-right: auto;

  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.tpc-ctv-content {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.7rem;
}
.tpc-ctv-content-label-head {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 0.4rem;
}
.tpc-ctv-content-label {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}
.tpc-ctv-content-value {
  color: #ff8632;
}
.tpc-ctv-content-cont {
  color: #6b7280;
}

.services-ctv h2 {
  text-align: center;
  margin-bottom: 2.5rem;
}
.services-card-ctv-group {
  gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: stretch;
}
.services-card-ctv {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2.5rem 4rem;
  box-sizing: border-box;
  background-color: #fff;

  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.services-ctv-content {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  justify-content: space-between;
}
.services-ctv-content-label-head {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 0.4rem;
}
.services-ctv-content-label {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
}
.services-ctv-content-value {
  color: #ff8632;
}
.services-ctv-content-cont {
  color: #6b7280;
  text-align: right;
}

@media (max-width: 1024px) {
  .tarif-plan-card-ctv {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 43rem;
    padding: 2.5rem 2rem;
  }
  .services-card-ctv-group {
    gap: 1rem;
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 576px) {
  .tarif-plan-card-ctv {
    width: 100%;
    max-width: 100%;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
  }

  .services-card-ctv-group {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .services-card-inet {
    padding: 1.5rem 1rem;
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 390px) {
  .ctv {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .ctv a {
    margin-bottom: 0.5rem;
  }

  .tpc-ctv-content-label,
  .tpc-ctv-content-label-head,
  .services-ctv-content-label,
  .services-ctv-content-label-head {
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
  }
  .tarif-plan-card-ctv,
  .services-card-ctv {
    padding: 1rem 0.5rem;
  }
  .services-ctv-content-cont {
    text-align: center;
  }
}

/***************************
Смотрёшка 
 ***************************/

.smotreshka-container {
  grid-column: 2;
  margin-bottom: 7rem;
}
.smotreshka-content {
  display: grid;
  gap: 3rem;
}
.head-smotreshka {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 0.6rem;
}
.head-smotreshka-active small {
  color: #7dcb1e;
}

.group-smotreshka {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.smotreshka-tariff-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.tariff-plan-smotreshka-head,
.smotreshka-services-head {
  text-align: inherit;
}
.tariff-plan-group-smotreshka {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  gap: 1.5rem;
}
.service-maintenance-card-smotr {
  display: flex;
  flex: 1;
  padding: 2.5rem 4rem;
  gap: 0.7rem;
  flex-direction: column;
  background: #ffffff;
  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.service-maintenance-label-smotr {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.service-maintenance-cont-smotr {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.service-maintenance-value-smotr {
  display: flex;
}
.service-maintenance-head-value-smotr {
  color: #ff8632;
  white-space: nowrap;
}
.service-maintenance-value-cont-smotr {
  color: #6b7280;
}
.login-details-card-smotr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.5rem 4rem;
  flex: 1;
  gap: 0.6rem;

  background: #ffffff;
  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.login-details-smotr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  gap: 0.7rem;
}

.login-details-top-smotr {
  margin-bottom: 0.4rem;
}

.login-details-content-smotr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}
.email-details-data-smotr {
  display: flex;
  gap: 0.7rem;
  width: 100%;
  flex-direction: column;
  text-align: left;
}

.panel-value-smotr {
  color: #6b7280;
  text-align: right;
}
.head-smotreshka-address,
.login-details-user-value-smotr,
.panel-value-smotr,
.use-analog-value-smotr {
  color: #6b7280;
}

/* доп */

.subscriptions-smotr h2 {
  text-align: center;
  margin-bottom: 2.5rem;
}
.subscriptions-card-smotr-group {
  gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: stretch;
}
.subscriptions-card-smotr {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2.5rem 4rem;
  box-sizing: border-box;
  background-color: #fff;

  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.subscriptions-smotr-content {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  justify-content: space-between;
}
.subscriptions-smotr-content-label-head {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  margin-bottom: 0.4rem;
}
.subscriptions-smotr-content-label {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}
.subscriptions-smotr-content-cont {
  color: #6b7280;
  text-align: right;
}

/* промо */
.promo-smotr h2 {
  text-align: center;
  margin-bottom: 2.5rem;
}
.promo-card-smotr-group {
  gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: stretch;
}
.promo-card-smotr {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2.5rem 2rem;
  box-sizing: border-box;
  background-color: #fff;

  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.promo-smotr-content {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  justify-content: space-between;
}
.promo-smotr-content-label-head {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  margin-bottom: 0.4rem;
}
.promo-smotr-content-label {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}
.promo-smotr-content-cont {
  color: #6b7280;
  text-align: right;
}

/*****************
Видео
******************/

.video-container {
  grid-column: 2;
  margin-bottom: 7rem;
}
.video-content {
  display: grid;
  gap: 3rem;
}
.head-video {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 0.6rem;
}
.head-video-active small {
  color: #7dcb1e;
}

.group-video {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.video-tariff-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.tariff-plan-video-head,
.video-services-head {
  text-align: inherit;
}
.tariff-plan-group-video {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  gap: 1.5rem;
}
.service-maintenance-card-video {
  display: flex;
  flex: 1;
  padding: 2.5rem 4rem;
  gap: 0.7rem;
  flex-direction: column;
  background: #ffffff;
  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.service-maintenance-label-video {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.service-maintenance-cont-video {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.service-maintenance-value-video {
  display: flex;
}
.service-maintenance-head-value-video {
  color: #ff8632;
  white-space: nowrap;
}
.service-maintenance-value-cont-video {
  color: #6b7280;
}
.login-details-card-video {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.5rem 4rem;
  flex: 1;
  gap: 0.6rem;

  background: #ffffff;
  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.login-details-video {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  gap: 0.7rem;
}

.login-details-content-video {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}
.email-details-data-video {
  display: flex;
  gap: 0.7rem;
  width: 100%;
  flex-direction: column;
  text-align: left;
}

.panel-value-video {
  color: #6b7280;
  text-align: right;
}
.login-details-top-video {
  margin-bottom: 0.4rem;
}
.login-details-user-value-video,
.panel-value-video,
.use-analog-value-video {
  color: #6b7280;
}

/* Камеры */

.subscriptions-video h2 {
  text-align: center;
  margin-bottom: 2.5rem;
}
.subscriptions-card-video-group {
  gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: stretch;
}
.subscriptions-card-video {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2.5rem 4rem;
  box-sizing: border-box;
  background-color: #fff;

  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.subscriptions-video-content {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  justify-content: space-between;
}
.subscriptions-video-content-label-head {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  margin-bottom: 0.5rem;
}
.subscriptions-video-content-label {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}
.subscriptions-video-content-cont {
  color: #6b7280;
  text-align: right;
}

/* услуги */
.service-video h2 {
  text-align: center;
  margin-bottom: 2.5rem;
}
.service-card-video-group {
  gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: stretch;
}
.service-card-video {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2.5rem 4rem;
  box-sizing: border-box;
  background-color: #fff;

  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.service-video-content {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  justify-content: space-between;
}
.service-video-content-label-head {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  margin-bottom: 0.4rem;
}
.service-video-content-label {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}
.service-video-content-cont {
  color: #6b7280;
  text-align: right;
}

/*****************
24тв
******************/

.tv24-container {
  grid-column: 2;
  margin-bottom: 7rem;
}
.tv24-content {
  display: grid;
  gap: 3rem;
}
.head-tv24 {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 0.6rem;
}
.head-tv24-active small {
  color: #7dcb1e;
}

.group-tv24 {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.tv24-tariff-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.tariff-plan-tv24-head,
.tv24-services-head {
  text-align: inherit;
}
.tariff-plan-group-tv24 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  gap: 1.5rem;
}
.service-maintenance-card-tv24 {
  display: flex;
  flex: 1;
  padding: 2.5rem 4rem;
  gap: 0.7rem;
  flex-direction: column;
  background: #ffffff;
  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.service-maintenance-label-tv24 {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.service-maintenance-cont-tv24 {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.service-maintenance-value-tv24 {
  display: flex;
}
.service-maintenance-head-value-tv24 {
  color: #ff8632;
  white-space: nowrap;
}
.service-maintenance-value-cont-tv24 {
  color: #6b7280;
}
.login-details-card-tv24 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.5rem 4rem;
  flex: 1;
  gap: 0.6rem;

  background: #ffffff;
  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.login-details-tv24 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  gap: 0.7rem;
}

.login-details-content-tv24 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}
.email-details-data-tv24 {
  display: flex;
  gap: 0.7rem;
  width: 100%;
  flex-direction: column;
  text-align: left;
}

.panel-value-tv24 {
  color: #6b7280;
  text-align: right;
}
.login-details-top-tv24 {
  margin-bottom: 0.4rem;
}
.login-details-user-value-tv24,
.panel-value-tv24,
.use-analog-value-tv24 {
  color: #6b7280;
}

/* доп. подписки */

.subscriptions-tv24 h2 {
  text-align: center;
  margin-bottom: 2.5rem;
}
.subscriptions-card-tv24-group {
  gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: stretch;
}
.subscriptions-card-tv24 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2.5rem 4rem;
  box-sizing: border-box;
  background-color: #fff;

  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.subscriptions-tv24-content {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  justify-content: space-between;
}
.subscriptions-tv24-content-label-head {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  margin-bottom: 0.5rem;
}
.subscriptions-tv24-content-label {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}
.subscriptions-tv24-content-cont {
  color: #6b7280;
  text-align: right;
}

/* промо */

.promo-tv24 h2 {
  text-align: center;
  margin-bottom: 2.5rem;
}
.promo-card-tv24-group {
  gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: stretch;
}
.promo-card-tv24 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2.5rem 4rem;
  box-sizing: border-box;
  background-color: #fff;

  box-shadow:
    0px 148px 59px rgba(0, 0, 0, 0.01),
    0px 83px 50px rgba(0, 0, 0, 0.02),
    0px 37px 37px rgba(0, 0, 0, 0.03),
    0px 9px 20px rgba(0, 0, 0, 0.04);
}
.promo-tv24-content {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  justify-content: space-between;
}
.promo-tv24-content-label-head {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  margin-bottom: 0.4rem;
}
.promo-tv24-content-label {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}
.promo-tv24-content-cont {
  color: #6b7280;
  text-align: right;
}