html {
  font-size: 20px;
}

/* scroll-behavior: smooth;
text-indent: 15px;   overflow: hidden; */
body {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  background: #fff;
  margin: 0 auto;
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

ul {
  padding-inline-start: 0;
  list-style-type: none;
}

p {
  margin: 0 0 10px;
  text-indent: 20px;
  text-align: justify;
}

/* */
.container {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}

/* Page   height: 100vh;  
    min-height: 770px;

=================*/

.page {
  width: 100%;
  position: relative;
  background: #fff;
}

/* Header    border-radius: 20px 20px 0;

=================*/

.header {
  align-content: end;
  margin: 0 auto;
  max-width: 1440px;
  height: 432px;
  background: #ebebeb url("../img/banner.jpg") top no-repeat;
}

/* Menu
=================*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

a {
  text-decoration: none;
  color: inherit;
}

.hList {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
}

.hList > * {
  margin: 0; /* Відступи між пунктами меню */
}

.hList > * + * {
  margin: 0;
}

.menu {
  display: block;
  position: relative;
  cursor: pointer;
}

.menu-title {
  display: block;
  width: 210px;
  height: 48px;
  padding: 6px 0 0;
  background: #579032;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  transition: 0.3s background-color;
}

.menu-title:before {
  content: "";
  display: block;
  height: 0;
  border-top: 5px solid #579032;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 0 solid #dddddd;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 101;
  transition: 0.2s 0.2s border-top ease-out, 0.3s border-top-color;
}

.menu-title:hover {
  background: #8db842;
}

.menu-title:hover:before {
  border-top-color: #8db842;
}

.menu:hover > .menu-title:before {
  border-top-width: 0;
  transition: 0.2s border-top-width ease-in, 0.3s border-top-color;
}

.menu-title:after {
  content: "";
  display: block;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 0 solid #ebebeb;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 101;
  transition: 0.2s border-bottom ease-in;
}

.menu:hover > .menu-title:after {
  border-bottom-width: 5px;
  transition: 0.2s 0.2s border-bottom-width ease-out;
}

.menu-title_2nd {
  background: #4275a2;
}

.menu-title_2nd:hover {
  background: #3e86a3;
}

.menu-title_2nd:before {
  border-top-color: #4275a2;
}

.menu-title_2nd:hover:before {
  border-top-color: #3e86a3;
}

.menu-title_3rd {
  background: #da3436;
}

.menu-title_3rd:hover {
  background: #b96666;
}

.menu-title_3rd:before {
  border-top-color: #da3436;
}

.menu-title_3rd:hover:before {
  border-top-color: #b96666;
}

.menu-title_4th {
  background: #e6d432;
}

.menu-title_4th:hover {
  background: #cb9b48;
}

.menu-title_4th:before {
  border-top-color: #e6d432;
}

.menu-title_4th:hover:before {
  border-top-color: #cb9b48;
}

.menu-title_5th {
  background: #ec72ab;
}

.menu-title_5th:hover {
  background: #e0b5c9;
}

.menu-title_5th:before {
  border-top-color: #ec72ab;
}

.menu-title_5th:hover:before {
  border-top-color: #e0b5c9;
}

.menu-dropdown {
  padding: 10px 0;
  position: absolute;
  background: #ebebeb;
  z-index: 100;
  transition: 0.5s padding, 0.5s background;
}

.menu-dropdown:after {
  content: "";
  display: block;
  height: 0;
  border-top: 5px solid #ebebeb;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 101;
  transition: 0.5s border-top;
}

.menu:not(:hover) > .menu-dropdown {
  padding: 0;
  background: #dddddd;
  z-index: 99;
}

.menu:not(:hover) > .menu-dropdown:after {
  border-top-color: #dddddd;
}

.menu:not(:hover) > .menu-title:after {
  border-bottom-color: #dddddd;
}

.menu-dropdown > * {
  overflow: hidden;
  height: 34px;
  padding: 0 5px;
  background: rgba(0, 0, 0, 0);
  white-space: nowrap;
  transition: 0.5s height cubic-bezier(0.73, 0.32, 0.34, 1.5),
    0.5s padding cubic-bezier(0.73, 0.32, 0.34, 1.5),
    0.5s margin cubic-bezier(0.73, 0.32, 0.34, 1.5), 0.5s 0.2s color,
    0.2s background-color;
}

.menu-dropdown > *:hover {
  background: rgba(0, 0, 0, 0.1);
}

.menu:not(:hover) > .menu-dropdown > * {
  visibility: hidden;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  color: rgba(25, 25, 25, 0);
  transition: 0.5s 0.1s height, 0.5s 0.1s padding, 0.5s 0.1s margin, 0.3s color,
    0.6s visibility;
  z-index: 99;
}

/* Content    width: 100%;  height: 100vh;
=================*/

.content {
  height: 100%;
  padding: 1em;
}

.subtitle {
  font-size: 1.2rem;
  color: #4275a2;
  font-weight: 500;
  padding-bottom: 16px;
}

.title {
  margin-bottom: 10px;
  font-size: 2rem;
  color: #000;
  font-weight: 500;
  line-height: 1.2;
}

.text span {
  color: #5f011d;
}

.text {
  font-size: 1rem;
  color: #000;
}

.img {
  width: 100%;
  border: solid 2px #5f011d;
  border-radius: 50px;
  box-shadow: -1px 3px 9px 0px rgba(0, 0, 0, 0.75);
}
.img:hover {
  box-shadow: none;
}

.news {
  padding: 1em 40px 0 0;
  margin-bottom: 1em;
  border-bottom: 1px solid #ccc;
}

.data {
  font-size: 15px;
  padding: 10px 0;
}

.link1 {
  position: fixed;
  bottom: 0;
  right: 50px;
  font-size: 1rem;
  color: #4275a2;
  text-decoration: none;
  font-weight: 500;
}

.link {
  font-size: 1rem;
  color: #4275a2;
  text-decoration: none;
  font-weight: bold;
}

.link:hover {
  color: #fff;
  background-color: #4275a2;
}

main hr {
  border: 0;
  height: 3px;
  background: linear-gradient(to left, #f0f0f0, #888, #f0f0f0);
}

/*main hr {
  border: 0;
  height: 8px;
  box-shadow: 0 8px 8px -8px #222 inset;
}
*/

/* Fotos
=================*/
.small {
  width: 50%;
}

/* Form
=================*/
.form {
  width: 100%;
  max-width: 300px;
  padding-bottom: 20px;
}

.input {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 1em;
  padding: 10px;
  border-radius: 10px;
  box-shadow: inset;
  box-shadow: -1px 3px 6px 0px rgba(0, 0, 0, 0.75);
}

.textarea {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 1em;
  padding: 10px;
  border-radius: 10px;
  height: 150px;
  resize: vertical;
  box-shadow: -1px 3px 6px 0px rgba(0, 0, 0, 0.75);
}

.btn {
  display: block;
  width: 100%;
  padding: 13px;
  font-family: inherit;
  font-size: 1em;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  background-color: #4275a2;
  border: 0;
  border-radius: 10px;
  box-shadow: -1px 3px 6px 0px rgba(0, 0, 0, 0.75);
  transition: background 0.2s linear;
}

.btn:hover {
  background-color: #3e86a3;
}

/* Footer
=================*/

.footer {
  width: 100%;
  padding: 1em 0;
  background: #ebebeb;
}

.copyr {
  font-size: 16px;
  color: #000;
  padding-left: 80px;
}

/* Contacts
=================*/

.contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Центрирование по горизонтали */
  width: 100%; /* Важно, чтобы контейнер занимал всю ширину */
  text-align: center; /* Центрирование текста внутри элементов */
  color: inherit;
}

.contacts-link {
  margin-right: 2rem;
  font-size: 1rem;
  color: #000;
  text-decoration: none;
  font-weight: bold;
}

.contacts-link:hover {
  color: #4275a2;
  text-decoration: underline;
}

.contacts-icon {
  margin-right: 5px;
}

/* Animation */

.line-blue {
  width: 3px;
  height: 100px;
  background-color: #4275a2;
  position: absolute;
  left: 0;
  top: 0;

  animation-name: line-blue;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
}

@keyframes line-blue {
  0% {
    transform: translateY(0);
    background-color: #4275a2;
    opacity: 1;
  }
  100% {
    transform: translateY(120vh);
    background-color: #ebebeb;
    opacity: 0;
  }
}

.line-red {
  width: 3px;
  height: 100px;
  background-color: #da3436;
  position: absolute;
  right: 0;
  top: 0;

  animation-name: line-red;
  animation-delay: 5s;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
}

@keyframes line-red {
  0% {
    transform: translateY(0);
    background-color: #da3436;
    opacity: 1;
  }
  100% {
    transform: translateY(120vh);
    background-color: #ebebeb;
    opacity: 0;
  }
}

/* Gallery */

.gal-colums {
  flex-wrap: wrap;
  padding-top: 10px;
  gap: 14px;
  text-align: center;
}

.gal-item {
  width: 33%;
}

.mem-item {
  height: 33%;
}

#gallery img {
  max-height: 300px;
  align-items: center;
}

#gallery [class*="col-"] {
  padding: 0;
}

#gallery a {
  position: relative;
  overflow: hidden;
}

#gallery a:hover img {
  /* opacity: 0.15;
  -moz-backface-visibility: hidden; 
   */
  transform: scale(1.2);
  overflow: hidden;
}

/* Media     height: auto;
=================*/

@media (max-width: 768px) {
  .page {
    min-height: 100vh;
  }

  .container {
    width: 100%;
    padding: 0 10px;
  }

  /* Header */
  .header {
    position: relative;
    align-content: end;
    padding-bottom: 1rem;
    margin: 0 auto;
    height: 300px;
    background: #ebebeb;
  }

  /* Адаптация навигационного меню */
  .hList {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    position: relative;
  }

  .hList > * {
    float: none;
    margin-bottom: 6px;
    width: 100%;
    position: relative; /* Важно для корректной работы z-index */
  }
  .menu-title {
    width: 100%;
  }

  /* Адаптация выпадающего меню */
  .menu-dropdown {
    width: 100%;
    position: relative; /* Меняем на относительное позиционирование на мобильных */
    z-index: 1001; /* Выше, чем у основного меню */
  }

  /* Корректировка для контейнера меню */
  .menu {
    position: relative;
    z-index: 999; /* Обеспечиваем, чтобы меню было поверх других элементов */
  }

  .menu:hover .menu-dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Content */
  .content {
    max-width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .content img {
    width: 100%;
  }

  .article {
    padding: 0;
    margin: 0;
  }

  /* Footer */

  .footer .copyr {
    display: none;
  }

  .footer {
    width: 100%;
    padding: 0;
  }

  /* Contacts */
  .contacts > * {
    width: 100%;
    margin: 1px 0;
  }

  .contacts-link img {
    margin: 0;
    display: none;
  }

  .contacts-link:last-child:after {
    display: none;
  }
}