.page {
  padding-inline: 15px;
  padding-block-end: 15px;
  color: var(--main-text-color, #2d313c);
  font-family: var(
    --Montserrat,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif
  );
  font-weight: 500;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
  background-color: var(--main-background-color, #fff);
  scroll-margin-top: 120px;
}

.header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 1440px; 
  max-width: 100%; 
  background-color: transparent;
  padding-inline: 15px;
}

.header__contain {
  display: flex;
  gap: 45px;
  border-radius: 0 0 16px 16px;
  padding: 10px 50px;
  background-color: var(--submain-background-color, #f1f4f8);
  border-bottom: 2px solid red;
}

.header__logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header__logo-link-image {
  width: 67.34px;
  height: 79px;
}

.header__logo-link-text {
  color: var(--accent-text-color, #ed0e16);
  font-weight: 700;
  font-size: clamp(1.6rem, 0.6154rem + 1.5385vw, 2rem);
  text-transform: uppercase;
}

.header__navigation {
  align-content: center;
  font-weight: 600;
  font-size: clamp(0.75rem, 0.4423rem + 0.4808vw, 0.875rem);
  text-transform: uppercase;
}

.header__navigation-list {
  display: flex;
  gap: 26px;
}

.header__contact {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-inline-start: 22px;
  text-align: end;
}

.header__contact-button {
  padding: 18px 24px;
  border-radius: 8px;
}

.header__contact-block-title {
  display: block;
  font-size: 10px;
}

.header__contact-block-telephone {
  color: var(--accent-text-color, #ed0e16);
  font-weight: 600;
  font-size: clamp(0.75rem, 0.4423rem + 0.4808vw, 0.875rem);
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-block: 16px;
  border-radius: 16px;
  padding: 130px 100px 180px;
  color: var(--submain-text-color, #fff);
  background: linear-gradient(270deg, rgba(25, 27, 34, 0) 0%, #191b22 100%),
    url(../images/heroblockimg.png);
  background-color: var(--accent-background-color, #2d313c);
  background-repeat: no-repeat;
  background-position: 50% 44%;
  background-size: cover;
  margin-block-start: 115px;
}

.hero__title {
  max-width: 900px;
  font-weight: 700;
  font-size: 64px;
  text-transform: uppercase;
}

.hero__text {
  max-width: 507px;
}

.hero__button {
  position: absolute;
  bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 18px 44px;
}

.why-us {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  border-radius: 16px;
  padding: 50px 100px;
  background-color: var(--submain-background-color, #f1f4f8);
}

.why-us__title {
  font-weight: 700;
  font-size: 42px;
  text-transform: uppercase;
}

.why-us__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
  padding-block: 20px;
}

.why-us__list-item {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 311px;
}

.why-us__list-item::before {
  content: "";
  display: inline-block;
  min-width: 63px;
  height: 63px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.why-us__item--proffesional::before {
  background-image: url("../images/icon-wrench.svg");
}

.why-us__item--experience::before {
  background-image: url("../images/icon-case.svg");
}

.why-us__item--individual::before {
  background-image: url("../images/icon-people.svg");
}

.why-us__item--fast::before {
  background-image: url("../images/icon-smile.svg");
}

.why-us__item--time::before {
  background-image: url("../images/icon-lightning.svg");
}

.service__information-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-block: 15px;
  border-radius: 16px;
  padding: 50px 100px;
  color: var(--submain-text-color, #fff);
  text-align: center;
  text-transform: uppercase;
  background-color: var(--accent-background-color, #2d313c);
}

.service__information-container-title {
  font-weight: 700;
  font-size: 64px;
}

.service__information-container-text {
  max-width: 681px;
  font-weight: 600;
}

.surveillance {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 140px;
  border-radius: 16px;
  padding: 50px 100px;
  background-color: var(--submain-background-color, #f1f4f8);
}

.surveillance-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 103px;
}

.surveillance__header {
  font-weight: 700;
  font-size: 42px;
  text-transform: uppercase;
}

.surveillance__text {
  opacity: 0.7;
}

.surveillance__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.surveillance__list-item {
  position: relative;
  padding-left: 20px;
}

.surveillance__button {
  position: absolute;
  bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 18px 44px;
}

.surveillance__image {
  max-width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
  object-position: 100% 50%;
}

.control {
  position: relative;
  margin-block: 15px;
  border-radius: 16px;
  padding: 50px 100px;
  color: var(--submain-text-color, #fff);
  background: linear-gradient(270deg, rgba(25, 27, 34, 0) 0%, #191b22 100%),
    url(../images/SKYD.png);
  background-color: var(--accent-background-color, #2d313c);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.control__information {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
  padding-block: 55px;
}

.control__information-header {
  font-weight: 700;
  font-size: 42px;
  text-transform: uppercase;
}

.control__information-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control__information-list-item {
  position: relative;
  padding-left: 20px;
}

.domofon {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 140px;
  border-radius: 16px;
  padding: 50px 100px;
  background-color: var(--submain-background-color, #f1f4f8);
}

.domofon-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 50px;
}

.domofon__header {
  font-weight: 700;
  font-size: 42px;
  text-transform: uppercase;
}

.domofon__text {
  opacity: 0.7;
}

.domofon__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.domofon__list-item {
  position: relative;
  padding-left: 20px;
}

.domofon__button {
  position: absolute;
  bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 18px 44px;
}

.domofon__image {
  max-width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
  object-position: 100% 50%;
}

.iptv {
  position: relative;
  margin-block: 15px;
  border-radius: 16px;
  padding: 50px 100px;
  color: var(--submain-text-color, #fff);
  background: linear-gradient(270deg, rgba(25, 27, 34, 0) 0%, #191b22 100%),
    url(../images/TV.png);
  background-color: var(--accent-background-color, #2d313c);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.iptv__information {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 714px;
  padding-block-start: 115px;
  padding-block-end: 110px;
}

.iptv__information-header {
  font-weight: 700;
  font-size: 42px;
  text-transform: uppercase;
}

.iptv__information-text {
  max-width: 500px;
}

.iptv__information-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.iptv__information-list-item {
  position: relative;
  padding-left: 20px;
}

.paid {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin-block-end: 15px;
  padding: 50px 100px;
}

.paid__title {
  font-size: 42px;
  text-align: center;
  text-transform: uppercase;
}

.paid__tarifs-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: 20px;
}

.paid__tarifs-list-item {
  border: 2px solid #f1f4f8;
  border-radius: 8px;
  padding: 18px;
}

.paid__tarifs-card-list-standart {
  padding-bottom: 165px;
}

.paid__tarifs-card-title {
  display: flex;
  justify-content: space-between;
  margin-block-end: 25px;
  border-radius: 8px;
  padding: 15px 20px;
}

.tarifs-card-title-standart {
  background-color: var(--submain-background-color, #f1f4f8);
}

.tarifs-card-title-pro {
  color: var(--submain-text-color, #fff);
  background-color: var(--main-button-color, #ed0e16);
}

.paid__tarifs-card-price {
  color: var(--accent-text-color, #ed0e16);
}

.paid__tarifs-card-list {
  display: flex;
  flex-direction: column;
  gap: 23px;
}

.paid__tarifs-card-title-title {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
}

.tarifs-button {
  display: inline-block;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 18px 24px;
  text-align: center;
  inline-size: 100%;
}

.paid__tarifs-list-item-button {
  grid-column: 2;
  grid-row: 4;
}

.paid__tarifs--tv {
  grid-column: 1;
  grid-row: 3/-1;
}

.tarifs-pro {
  grid-column: 2;
  grid-row: 1/4;
}

.tarifs-standart {
  grid-column: 1;
  grid-row: 1/3;
}

.paid__methods {
  border-radius: 16px;
  padding: 50px 100px;
  background-color: var(--submain-background-color, #f1f4f8);
}

.paid__methods-title {
  font-weight: 700;
  font-size: 42px;
  text-align: center;
  text-transform: uppercase;
}

.dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block-start: 45px;
}

.dropdown-list--decoration {
  border: 2px solid #f5f5f5;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.dropdown-list-item {
  display: grid;
  grid-template-columns: 1fr min-content;
  align-items: center;
  gap: 15px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding-inline: 20px;
  padding-block: 15px;
  background-color: var(--main-background-color, #fff);
  cursor: pointer;
}

.dropdown {
  height: 0;
  padding-inline: 25px;
  padding-block: 0;
  overflow: hidden;
  transition: height 0.4s ease, padding-block 0.4s ease;
}

.dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.dropdown-text-link {
  color: var(--accent-text-color, #ed1c24);
}

.show-dropdown {
  border: 2px solid white;
  border-radius: 0 0 8px 8px;
  padding-block: 10px;
}

.paid__methods-text {
  padding-block-start: 25px;
  color: rgba(10, 9, 9, 0.5);
}

.information {
  position: relative;
  margin-block: 15px;
}

.information__map {
  border-radius: 16px;
  overflow: hidden;
}

.information__text {
  position: absolute;
  bottom: 50px;
  left: 100px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 357px;
  border-radius: 16px;
  padding: 50px;
  background: var(--main-background-color, #fff);
}

.information__text-logo {
  max-width: 157px;
}

.information__text-title {
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
}

.information__text-address-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  opacity: 0.7;
  font-style: normal;
}

.feedback {
  padding: 45px 100px;
}

.feedback__title {
  font-weight: 700;
  font-size: 42px;
  text-align: center;
  text-transform: uppercase;
}

.feedback__subtitle {
  padding-block-start: 50px;
}

.feedback__form {
  padding-block-start: 20px;
}

.feedback__form-input {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.feedback__input {
  border: 1px solid var(--accent-gray-color, #ebebeb);
  border-radius: 8px;
  padding: 20px;
  opacity: 0.7;
  background-color: var(--main-background-color, #fff);
}

.feedback__textarea {
  grid-column: 1/-1;
  height: 150px;
  border: 1px solid var(--accent-gray-color, #ebebeb);
  border-radius: 8px;
  padding: 20px;
  opacity: 0.7;
  font-family: Montserrat;
  font-size: 14px;
  background-color: var(--main-background-color, #fff);
  resize: none;
}

.feedback-check {
  display: flex;
  gap: 20px;
  font-size: 12px;
   cursor: pointer;
   align-items: center;
}

.feedback__actions-text {
  opacity: 0.7;
  color: var(--main-text-color, #2d313c);
}

.feedback__actions {
  display: grid;
  grid-template-columns: min-content 1fr;
  align-items: center;
  gap: 25px;
  margin-block-start: 18px;
}

.feedback__button {
  border-radius: 8px;
  padding: 18px 24px;
  text-align: center;
}

.faq {
  margin-block: 20px;
  border-radius: 16px;
  padding: 50px 100px;
  background-color: var(--submain-background-color, #f1f4f8);
}

.faq__title {
  font-weight: 700;
  font-size: 42px;
  text-align: center;
  text-transform: uppercase;
}

.footer {
  display: flex;
  gap: 80.5px;
  border-radius: 16px;
  padding: 50px 100px;
  background-color: var(--accent-background-color, #2d313c);
}

.footer__information-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: center;
  height: 100%;
  border-radius: 8px;
  padding: 10px 20px;
  background-color: var(--main-background-color, #fff);
}

.footer__information-logo-text-title {
  font-weight: 700;
  font-size: 28px;
  text-transform: uppercase;
}

.footer__contact {
  align-self: center;
  color: var(--submain-text-color, #fff);
}

.footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer__documents {
  color: var(--white-accent-color, #fff);
}

.footer__documents-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer__documents-list-item-docs {
  padding-inline-start: 35px;
}

.submitted-window__content-button {
  border-radius: 8px;
  padding: 20px 0;
  text-align: center;
  inline-size: 80%;
}

@media (width <=1439px) {

  .header__contain {
    justify-content: space-between;
    padding: 20px 40px;
    gap: 25px;
  }

  .header__logo-link-image {
    width: 53.875px;
    height: 63.2px;
  }

  .header__logo-link-text {
    font-size: clamp(1.28rem, 0.32rem + 2vw, 1.6rem);
  }

  .header__navigation {
    font-size: clamp(0.625rem, 0.25rem + 0.7813vw, 0.75rem);
  }

  .header__contact-block-title {
    font-size: clamp(0.5rem, 0.125rem + 0.7813vw, 0.625rem);
  }

  .header__contact-block-telephone {
    font-size: clamp(0.625rem, 0.25rem + 0.7813vw, 0.75rem);
  }

  .header__contact {
    padding: 0;
  }

  .header__contact-button {
    display: none;
  }

  .hero {
    padding: 130px 50px 180px;
    margin-block-start: 120px;
  }

  .hero__title {
    font-size: clamp(2.625rem, -1.5rem + 8.5938vw, 4rem);
  }

  .surveillance {
    gap: 50px;
    padding: 50px 50px 88px;
  }

  .surveillance-container {
    padding-block: 51px;
  }

  .control {
    padding: 50px 50px 103px;
  }

  .control__information {
    max-width: 590px;
    padding-block: 0;
  }

  .domofon {
    gap: 50px;
    padding: 65px 50px 100px;
  }

  .domofon-container {
    padding-block: 0;
  }

  .iptv {
    padding: 50px 50px 100px;
  }

  .iptv__information {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;
    padding-block: 35px;
  }

  .paid {
    padding: 50px;
  }

  .paid__tarifs-card-list-standart {
    padding-bottom: 130px;
  }

  .red-stars::before {
    top: 135%;
  }

  .paid__methods {
    padding: 50px;
  }

  .information__map {
    max-height: 500px;
  }

  .information__text {
    left: 50px;
  }

  .feedback {
    padding: 50px;
  }

  .feedback-check {
    font-size: 10px;
  }

  .faq {
    margin-block: 15px;
    padding: 53px;
  }

  .footer {
    display: grid;
    grid-template-columns: 1fr 3fr;
    row-gap: 20px;
    column-gap: 45px;
    padding: 50px;
    background-color: var(--accent-background-color, #2d313c);
  }

  .footer__documents {
    grid-column: 2;
    grid-row: 1/3;
  }
}

@media (width <=1023px) {
  .page {
    font-size: clamp(0.75rem, 0.6307rem + 0.5089vw, 0.875rem);
  }

  .header__contain {
    gap: 15px;
    padding: 13px 10px;
  }

  .header__logo-link-image {
    width: 43px;
    height: 50px;
  }

  .header__logo-link {
    gap: 5px;
  }

  .header__navigation-list {
    gap: 15px;
  }

  .hero {
    margin-block-start: 90px;
    padding: 100px 25px 153px;
  }

  .hero__title {
    font-size: clamp(1.5rem, 0.4265rem + 4.5802vw, 2.625rem);
  }

  .why-us {
    gap: 25px;
    padding: 25px;
  }

  .why-us__title {
    font-size: clamp(1.5rem, 0.4265rem + 4.5802vw, 2.625rem);
  }

  .service__information-container {
    padding: 25px;
  }

  .service__information-container-title {
    font-size: clamp(1.5rem, -0.8855rem + 10.1781vw, 4rem);
  }

  .surveillance {
    display: flex;
    flex-direction: column-reverse;
    gap: 25px;
    padding: 25px 25px 78px;
  }

  .surveillance__header {
    font-size: clamp(1.5rem, 0.4265rem + 4.5802vw, 2.625rem);
  }

  .surveillance-container {
    padding: 0;
  }

  .surveillance__image {
    width: 100%;
    max-height: 244px;
  }

  .control {
    padding: 25px 25px 103px;
    background: linear-gradient(270deg, rgba(25, 27, 34, 0.70) 0%, rgba(25, 27, 34, 0.70) 100%),
    url(../images/SKYD.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .control__information-header {
    font-size: clamp(1.5rem, 0.4265rem + 4.5802vw, 2.625rem);
  }

  .control__information {
    max-width: 688px;
  }

  .domofon {
    display: flex;
    flex-direction: column-reverse;
    padding: 25px 25px 85px;
  }

  .domofon__header {
    font-size: clamp(1.5rem, 0.4265rem + 4.5802vw, 2.625rem);
  }

  .domofon__text {
    max-width: 588px;
    /* Удалить */
  }

  .domofon__image {
    width: 100%;
    max-height: 244px;
  }

  .iptv {
    padding: 25px 25px 85px;
    background: linear-gradient(270deg, rgba(25, 27, 34, 0.70) 0%, rgba(25, 27, 34, 0.70) 100%),
    url(../images/TV.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .iptv__information-header {
    font-size: clamp(1.5rem, 0.4265rem + 4.5802vw, 2.625rem);
  }

  .iptv__information {
    max-width: 688px;
    padding-block: 0px;
  }

  .paid {
    gap: 25px;
    padding: 25px;
  }

  .paid__title {
    font-size: clamp(1.5rem, 0.4265rem + 4.5802vw, 2.625rem);
  }

  .paid__tarifs-card-title-tv {
    flex-direction: column;
    gap: 5px;
    margin: 8px;
    padding-top: 0px;
  }

  .paid__tarifs-card-list-standart {
    padding-bottom: 80px;
  }

  .paid__tarifs-card-title-title {
    font-size: clamp(0.75rem, 0.6307rem + 0.5089vw, 0.875rem);
  }

  .red-stars::before {
    top: 115%;
  }

  .paid__methods {
    padding: 25px;
  }

  .paid__methods-title {
    font-size: clamp(1.5rem, 0.4265rem + 4.5802vw, 2.625rem);
  }

  .dropdown-list {
    padding-top: 25px;
  }

  .paid__methods-text {
    padding-top: 20px;
  }

  .information__map {
    max-height: 389px;
  }

  .information__text {
    top: 25px;
    left: 25px;
  }

  .feedback {
    padding: 25px;
  }

  .feedback__title {
    font-size: clamp(1.5rem, 0.4265rem + 4.5802vw, 2.625rem);
  }

  .feedback__subtitle {
    padding-top: 25px;
  }

  .feedback__textarea {
    font-size: clamp(0.75rem, 0.6307rem + 0.5089vw, 0.875rem);
  }

  .faq {
    margin-block: 15px;
    padding: 25px;
  }

  .faq__title {
    font-size: clamp(1.5rem, 0.4265rem + 4.5802vw, 2.625rem);
  }

  .footer {
    row-gap: 25px;
    column-gap: 25px;
    padding: 25px;
  }
}

@media (width <=767px) {
  .burger {
    display: flex;
  }

  .header {
    z-index: 10;
  }

  .header__contain {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 20;
  }

  .header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

  .header__navigation {
    display: none;
  }

  .header__contact {
    display: none;
  }

  .hero {
    gap: 5px;
    padding: 50px 25px 103px;
  }

  .why-us__title {
    max-width: 275px;
    text-align: center;
  }

  .why-us__list {
    gap: 20px;
  }

  .why-us__list-item {
    border-bottom: 2px solid #dfe2e5;
    padding-bottom: 25px;
  }

  .why-us__list-item::before {
    min-width: 34px;
    height: 34px;
    margin-inline: 5px;
  }

  .why-us__item--fast {
    flex-direction: row-reverse;
  }

  .why-us__item--individual {
    flex-direction: row-reverse;
  }

  .service__information-container-text {
    text-align: start;
  }

  .surveillance {
    gap: 30px;
    /* Удалить */
  }

  .surveillance__image {
    height: 244px;
  }

  .surveillance__list {
    gap: 11px;
  }

  .control__information-list {
    gap: 12px;
  }

  .domofon {
    gap: 25px;
  }

  .domofon__list {
    gap: 12px;
  }

  .iptv__information-list {
    gap: 13px;
  }

  .paid__tarifs-list {
    display: flex;
    flex-direction: column;
  }

  .tarifs-pro {
    order: -1;
    padding-bottom: 135px;
  }

  .paid__tarifs-card-list-standart {
    padding-bottom: 10px;
  }

  .information {
    display: flex;
    flex-direction: column;
    border-radius: 8px 8px 8px 8px;
    background-color: var(--submain-background-color, #f1f4f8);
  }

  .information__text {
    position: relative;
    top: 0;
    left: 0;
    gap: 23px;
    padding: 25px;
    background-color: var(--submain-background-color, #f1f4f8);
  }

  .information__text-address-list {
    gap: 10px;
  }

  .information__map {
    max-height: 423px;
    border-radius: 8px 8px 0 0;
  }

  .feedback__form-input {
    display: flex;
    flex-direction: column;
  }

  .feedback__actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .feedback__button {
    box-sizing: border-box;
    inline-size: 100%;
  }

  .dropdown-list {
    gap: 25px;
  }

  .footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .footer__information-logo {
    align-self: self-start;
  }

  .footer__contact {
    align-self: self-start;
  }

  .footer__contact-list {
    gap: 10px;
  }

  .footer__documents-list {
    gap: 15px;
  }

}