/* спільні стилі */

ul,
ol {
  list-style: none;
  margin-block-start: 0;
  padding-inline-start: 0;
  margin-bottom: 0;
}
p {
  margin-bottom: 0;
}
button {
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

a {
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

a:hover,
a:focus {
  text-decoration: none;
}

.section {
  padding-top: 50px;
  padding-bottom: 50px;
}

.section__title {
  max-width: 740px;
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 16px;
  line-height: 100%;
}

.section__text {
  font-weight: 300;
  font-size: 16px;
}

/* картка card-item */
.card-item {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  padding: 20px;
  gap: 20px;
}

.card-icon {
}

.card-title {
  font-weight: 700;
  font-size: 22px;
  text-align: center;
}
.card-text {
  font-weight: 300;
  font-size: 16px;
  text-align: center;
}
.card-btn {
  display: block;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  padding: 10px 30px;
  background-color: #000000;
  border-radius: 20px;
  border: none;
  color: #ffffff;
}

.card-btn:hover,
.card-btn:focus {
  background-color: #d7f64d;
  color: #000000;
}
/* кінець картка card-item */
/* кінець спільні стилі */
@media screen and (min-width: 768px) {
  .section__title {
    font-size: 48px;
    margin-bottom: 35px;
  }

  @media screen and (min-width: 1024px) {
  }

  @media screen and (min-width: 1440px) {
  }
}
/* "Головна" */
.holovna {
  padding-top: 100px;
  padding-bottom: 166px;
  background-image: url(../image/bdb/holovna-bgc.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  position: relative;
}

.holovna::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background-color: rgba(255, 248, 228, 0.6); /* #FFF8E4 60% */
  z-index: 0;
}
.container {
}

.holovna__container {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}

.holovna__subtitle {
  text-align: center;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  padding: 7px 20px;
  background-color: #d7f64d;
  margin-bottom: 24px;
  max-width: 254px;
  border-radius: 25px;
  border: 1px solid #ffffff4d;
}

.holovna__title {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  text-align: center;
  margin-bottom: 24px;
}
.holovna__text {
  font-weight: 500;
  font-size: 20px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .holovna__title {
    font-size: 40px;
  }

  @media screen and (min-width: 1024px) {
  }

  @media screen and (min-width: 1440px) {
  }
}

/* кінець "Головна" */

/* "Законодавство */
.zakonodavstvo {
}
.container {
}
.zakonodavstvo__title {
}
.zakonodavstvo__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 35px;
}
.zakonodavstvo__item {
  min-height: 250px;
}

.zakonodavstvo__item-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.zakonodavstvo__img {
  width: 30px;
}
.zakonodavstvo__item-title {
}
.zakonodavstvo__item-text {
}
.zakonodavstvo__item-btn {
}

.zakonodavstvo__item-btn:hover,
.zakonodavstvo__item-btn:focus {
  /* background-color: #d7f64d;
  color: #000000; */
}
@media screen and (min-width: 768px) {
  .zakonodavstvo__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px 30px;
  }
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1440px) {
}
/* кінець "Законодавство */

/* суб'єкту внесення інформації */
.subiektu {
  background-color: #e6ebe6;
}
.container {
}
.subiektu__title {
}
.subiektu__list {
  display: flex;
  flex-direction: column;
  gap: 35px;
}
.subiektu__item {
  border-top: 2px solid #000;
  padding-top: 20px;
}
.subiektu__item-title {
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 20px;
}
.subiektu__item-text {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
  text-align: justify;
}
@media screen and (min-width: 768px) {
  .subiektu__item-title {
    font-size: 30px;
  }
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1440px) {
}
/* кінець суб'єкту внесення інформації */

/* "Показники" */
.pokaznyky {
  background-image: url(../image/bdb/pokaznyky-bg-img.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-top: 96px;
  padding-bottom: 96px;
}

.pokaznyky::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background-color: rgba(0, 0, 0, 0.8); /* #FFF8E4 60% */
  z-index: 0;
}

.container {
}
.pokaznyky__list {
  display: flex;
  gap: 60px;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.pokaznyky__item {
  text-align: center;
  width: 296px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #fff;
}
.pokaznyky__value {
}
.pokaznyky__label {
}
@media screen and (min-width: 768px) {
  .pokaznyky__list {
    flex-direction: row;
  }
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1440px) {
}
/* кінець "Показники" */

/* "інструкція з підключення" */
.instruktsiia {
}
.container {
}
.instruktsiia__title {
}

.instruktsiia__container {
  padding: 20px;
  margin-bottom: 35px;
}

.instruktsiia__subtitle {
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 10px;
}

.іnstruktsiia__info-text {
}
.instruktsiia__info-list {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  gap: 8px;
}

.instruktsiia__info-item {
  list-style: circle;
}

.instruktsiia__text {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
}
.instruktsiia__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 35px;
}
.instruktsiia__item {
  min-height: 280px;
}
.instruktsiia__item-title {
}
.instruktsiia__item-text {
}
.instruktsiia__item-btn {
  padding: 10px 50px;
}

.instruktsiia__item-btn:hover,
.instruktsiia__item-btn:focus {
  /* background-color: #d7f64d;
  color: #000000; */
}

@media screen and (min-width: 768px) {
  .instruktsiia__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px 30px;
  }
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1440px) {
}
/* кінець "інструкція з підключення" */

/* "матеріали" */
.materialy {
  background-color: #e6ebe6;
}
.container {
}
.materialy__list {
  display: flex;
  flex-direction: column;
  gap: 35px;
}
.materialy__item {
  border-top: 2px solid #000;
  padding-top: 20px;
}
.materialy__item-title {
  font-weight: 500;
  font-size: 30px;
  margin-bottom: 20px;
}
.materialy__item-text {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
  text-align: justify;
  margin-bottom: 20px;
}
.materialy__item-link {
  display: block;
  max-width: 252px;
}
@media screen and (min-width: 768px) {
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1440px) {
}
/* кінець "матеріали" */

/* "реєстр відомостей про будівлі та споруди" */
.reiestr {
}
.container {
}
.reiestr__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.reiestr__info {
}
.reiestr__title {
}
.reiestr__info-action {
  padding: 20px;
}
.reiestr__text {
  margin-bottom: 30px;
}
.reiestr__link {
  display: block;
  max-width: 292px;
}
.reiestr__img {
  display: none;
}

@media screen and (min-width: 768px) {
  .reiestr__img {
    display: block;
  }
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1440px) {
}
/* кінець "реєстр відомостей про будівлі та споруди" */

/* "статистика */

.statystyka__wrapper {
  display: flex;
  gap: 8px;
  width: 100%;
  flex-direction: column;
  width: 100%;
}

/* Оверлей завжди видно */
.statystyka__wrapper::before {
  opacity: 1;
}

.statystyka__img {
  width: 100%;
  height: auto;
}

/* Кнопка завжди видима */
.statystyka__btn {
  opacity: 1;
  pointer-events: auto;
  padding: 14px 20px;
  font-size: 16px;
  width: 90%;
  max-width: 280px;
  text-align: center;
}

/* сторінка статистики */
.statystyka__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.statystyka__close {
  background-color: transparent;
  border: none;
  padding: 0;
}

.statystyka__close {
  transition: transform 0.25s ease;
}

.statystyka__close:hover,
.statystyka__close:focus {
  transform: scale(1.2);
}

.statystyka__header .section__title{
  margin-bottom: 16px;
}

.statystyka.is-closing {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}
.statystyka {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.statystyka.is-closing {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}

.statystyka__container{
  padding: 0 20px;
}
/*  */

@media screen and (min-width: 768px) {
  @media (min-width: 768px) and (max-width: 1024px) {
    .statystyka__wrapper {
      width: 100%;
    }

    /* Легкий оверлей навіть без hover */
    .statystyka__wrapper::before {
      opacity: 0.4;
    }

    .statystyka__btn {
      opacity: 1;
      pointer-events: auto;
      font-size: 16px;
      padding: 12px 24px;
    }

    /* Підсилення ефекту при hover */
    .statystyka__wrapper:hover::before {
      opacity: 1;
    }
  }
}

@media screen and (min-width: 1024px) {
  .statystyka__wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
  }

  .statystyka__img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
  }

  .statystyka__wrapper::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background-color: rgba(230, 235, 230, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .statystyka__btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* щоб кнопка не блокувала hover на контейнері */
  }

  .statystyka__wrapper:hover::before {
    opacity: 1;
  }

  .statystyka__wrapper:hover .statystyka__btn {
    opacity: 1;
    pointer-events: auto; /* кнопка стає клікабельною */
  }
}

@media screen and (min-width: 1440px) {
}

/* кінець "статистика */

/* "імпорт" */
.import {
  background-color: #e6ebe6;
}
.container {
}
.import__title {
}
.import__text {
  padding: 20px;
  margin-bottom: 35px;
}
.import__list {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.import__item {
}
.import__item-title {
}
.import__item-text {
}
.import__btn {
}

@media screen and (min-width: 768px) {
  .import__list {
    flex-direction: row;
  }
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1440px) {
}
/* кінець "імпорт" */

/* "інвентарний список */
.spysok {
}
.container {
}
.spysok__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.spysok__info {
}

.spysok__title {
}
.spysok__text {
  margin-bottom: 30px;
}
.spysok__link {
  display: block;
  max-width: 292px;
}
.reiestr__img {
}
/* кінець "інвентарний список */

/* "Питання та відповіді" */
.pytannia__item {
  /* background-color: #fff; */
  padding: 20px;
  border: 1px solid #dcdcdc;
}

.pytannia__question {
  cursor: pointer;
  font-weight: 600;
  padding: 20px 20px 20px 0;
  position: relative;
  list-style: none;
  font-weight: 700;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
}

.pytannia__question::-webkit-details-marker {
  display: none;
}

/* Іконка + / − */

.pytannia {
  background-color: #e6ebe6;
}
.pytannia__title {
}
.pytannia__list-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.pytannia__list{
  list-style: circle;
  padding-inline-start: 20px;
}

.pytannia__item {
}
.pytannia__question {
}

.pytannia__icon {
  position: absolute;
  right: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
}

.pytannia__icon::before,
.pytannia__icon::after {
  content: "";
  position: absolute;
  background: #000;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.pytannia__icon::before {
  width: 20px;
  height: 2px;
  top: 9px;
  left: 0;
}

.pytannia__icon::after {
  width: 2px;
  height: 20px;
  top: 0;
  left: 9px;
}

/* Мінус */

.pytannia__item[open] {
  background-color: #fff;
}

.pytannia__item[open] .pytannia__icon::after {
  opacity: 0;
}

/* Анімація відповіді */
.pytannia__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
  padding-right: 48px;
}

.pytannia__item[open] .pytannia__answer {
  max-height: 500px;
  margin-bottom: 16px;
}

@media screen and (min-width: 768px) {
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1440px) {
}
/* кінець "Питання та відповіді" */

/* "вхід до кабінету" */
.vkhid {
  padding-bottom: 80px;
}
.container {
}
.vkhid__title {
}
.vkhid__text {
  padding: 20px;
  margin-bottom: 24px;
}
.vkhid__link {
  margin-right: auto;
  margin-left: auto;
  width: 228px;
}
/* кінець "вхід до кабінету" */

/* pidtrymka */

.pidtrymka {
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #e6ebe6;
}

.pidtrymka__text {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

/* кінець pidtrymka */

/* "партнери" */
.partneri {
}
.container {
}

.partneri__container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.partneri__img-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.partneri__img--pidtrymka {
  width: 262px;
}
.partneri__vykonavtsi {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.partneri__vykonavtsi-text {
  margin-bottom: 10px;
  padding-left: 50px;
}
.partneri__img--vykonavtsi {
  width: 278px;
  height: 73px;
}

.partneri__img--eef {
  max-width: 292px;
  height: 56px;
  padding-left: 66px;
  padding-right: 66px;
}

@media screen and (min-width: 768px) {
  .partneri__container {
    flex-direction: row;
  }
}

@media screen and (min-width: 1024px) {
  .partneri__img-container {
    flex-direction: row;
  }
}

@media screen and (min-width: 1440px) {
}
/* кінець "партнери" */

/* футер */
.footer-section {
  padding-bottom: 0;
}
.container {
}
.section__container {
  background-color: #000;
}
.footer__logotype {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  max-width: 260px;
  gap: 25px;
}
.footer__logotype-img {
  width: 215px;
}
.footer__logotype-img--miu {
  width: 215px;
}
.footer__logotype-img--mbkd {
  width: 260px;
}
.footer__contacts {
  max-width: 444px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.footer__contacts-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}
.footer__contacts-mail {
  padding: 20px;
}
.footer__contacts-mail-text {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 10px;
  color: #fff;
}
.footer__contacts-mail-container {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mail {
  color: #fff;
  text-decoration: underline;
  font-weight: 300;
  font-size: 16px;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  text-decoration-skip-ink: auto;
}
.mail:hover {
  color: #d7f64d;
  text-decoration: underline;
}
.footer__contacts-social {
  padding: 20px;
}
.footer__contacts-social-text {
  margin-bottom: 10px;
  color: #fff;
}

.footer__contacts-social-list {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  gap: 30px;
}
.footer__contacts-social-item {
}
.footer__contacts-social-link {
}

.youtube-icon:hover,
.youtube-icon:focus {
  fill: #d7f64d;
  stroke: #d7f64d;
}
.facebook-icon:hover,
.facebook-icon:focus {
  fill: #d7f64d;
  stroke: #d7f64d;
}
.footer__contacts-social-link--portal {
  color: #000 !important;
  padding: 7px 10px;
  background-color: #fff;
  border-radius: 20px;
  border: none;
}
.footer__contacts-social-link--portal:hover,
.footer__contacts-social-link--portal:focus {
  background-color: #d7f64d;
}
.copyright-content {
  background-color: #fff;
  padding-top: 30px;
  padding-bottom: 30px;
}

.copyright-text {
  font-weight: 400;
  font-size: 12px;
}
.text-center {
}
@media screen and (min-width: 768px) {
  .footer__contacts-container {
    flex-direction: row;
  }
  .footer__contacts {
    flex-direction: row;
  }
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1440px) {
}

/* кінець футер */