/*Горизонтальне меню*/
.menu-main {
    list-style: none;/*видалення маркерів списку*/
    margin: 0px 0 0px;/*зовнішній відступ від меню*/
    padding: 25px 0 5px;/*внутрішній відступ від меню*/
    text-align: center;/*вирівнювання тексту по центру*/
    
  }
  .menu-main li {display: inline-block;}/*встановлення стилів для елементів списку в меню*/
  .menu-main li:after {/*додавання роздільника між елем. меню*/
    content: "|";/*встан. текст в якості вмісту*/
    color: #44576D;
    display: inline-block;/*робить роздільник блочним елементом*/
    vertical-align:top;/*вирівнювання по верхньому краю елем. меню*/
  }
  .menu-main li:last-child:after {content: none;}/*видалення роздільника після останнього елемента*/
  .menu-main a { /*стилі для посилання меню*/
    text-decoration: none;/*видалення підкреслення з посилання*/
    font-family: 'Ubuntu Condensed', sans-serif;
    letter-spacing: 2px;/*міжсимвольний інтервал*/
    position: relative;/*встановлення позиції елемента як відносної*/
    padding-bottom: 20px;/*внутрішній відступ знизу*/
    margin: 0 34px 0 30px;/*зовнішні відступи для посилання*/
    font-size: 17px;
    text-transform: uppercase;/*перетворення тексту в верхній регістр*/
    display: inline-block;/**робить посилання блочним елементам*/
    transition: color .2s;/**плавна анімація зміни кольору*/
  }
  .menu-main a, .menu-main a:visited {color: #44576D;}/*кольори посилань та відвідуваних посилань*/
  .menu-main a.current, .menu-main a:hover{color:#d1d1e0;}/*стилі для активного посилання та посилання при наведенні*/
  .menu-main a:before,
  .menu-main a:after {/*встановлює підкреслення для посилання*/
    content: "";/*додавання підкреслення*/
    position: absolute;/*встановлення позиції*/
    height: 4px;/*висота підкреслення*/
    top: auto;/*позиціія зверху*/
    right: 50%;/*розміщення підкреслення по центру*/
    bottom: -5px;/*зміщення підкреслення вгору*/
    left: 50%;/*розміщення підкреслення по центру*/
    background: #d1d1e0;
    transition: .8s;/*плавна анімація зміни підкреслення*/
  }
  .menu-main a:hover:before, .menu-main .current:before {left: 0;}/*змінює положення підкресленняпри наведенні*/
  .menu-main a:hover:after, .menu-main .current:after {right: 0;}   
  
  /*Навігація по сторінці*/
  .pills{
  margin-left: 0; /*відступ зліва на*/
  list-style: none;/* забирає маркери списку */
  list-style: none;
  counter-reset: li;/*скидання лічильник li */
  font-family: calibri;
}
.pills li {
  padding: 10px 0;
  position: relative;/*відносне позиціонування елемента*/
  left: 1.5em;
  margin-bottom: 0.75em;
  padding-left: 1em;
  background: #E3DEDC;
  width: 15%;
}
.pills li:before {
  padding: 10px 0;
  position: absolute;/*абсолютне позиціонування елемента*/
  top: 0;
  bottom: 0;
  left: -1.5em;
  width: 1.875em;
  text-align: center;
  color: white;
  font-weight: bold;/*встановлюється жирний начерк тексту*/
  background: #44576D;
  border-bottom-left-radius: 70em;/*радіус закруглення для лівого нижнього кута елемента*/
  border-top-left-radius: 70em;/*радіус закруглення для лівого верхнього кута елемента*/
  counter-increment: li;/*збільшення значення лічильника li*/
  content: counter(li);/*вставленняо значення лічильника li в елемент*/
  }

/*Фон head*/
.fon {
  background-color: #AAC7D8;
}

/*Фон body*/
.fonts {
  background-color: #DFEBF6;
    font-family: "Roboto", sans-serif;
    
}

/*Фон footer*/
.botton{
  background-color: #29353C;
}

/*Заголовки*/
h1{
    margin-bottom: 10px;
    font-family: "Raleway", sans-serif;
    font-size: 45px;
}

h2, h3, h4 {
  font-family: "Raleway", sans-serif;
  margin-left: 15px;
  color: #3e4b53;
}

/*Посилання*/
a {
  text-decoration: none;
  color: #7171da;;
}
a:hover{
  color: #bb99ff;
}
a:visited {
  color: #884dff;
}


p {
text-align: justify;
margin-left: 2%;
margin-right:  2%; 
}

div {
  margin-left: 0%;
  margin-right:  0%; 
}

/*Зображення*/
.image-border {
  border-radius: 10px;  /* закруглення кутів */
    border: 5px solid #5c7cbc; /* колір та ширина рамки */
    box-shadow: 2px 1px 5px #8099cb; /* колір і розмір тіней */
}
.image-border:hover{
  border:5px solid #a4b6da;
}

/*Таблиці*/
table {
  border-collapse: collapse; /* Прибираємо подвійні лінії між осередками */
  }
  td, th {
  padding: 3px; /* Поля навколо вмісту таблиці */
  border: 1px solid #000; /* Параметри рамки */
  }
  tbody tr:hover {
  background: #a4b6da; /* Колір фону при наведенні */
  color: #fff; /* Колір тексту при наведенні */
  }

  /*Підвал*/
  .contact {
    display: flex;
    justify-content: space-around;
  }
  .contact li {
    list-style: none;/* забирає маркери списку */
  }
.contact .image-border{
  border-radius: 10px;  /* закруглення кутів */
  border: 5px solid #152038; /* колір та ширина рамки */
  box-shadow: 2px 1px 5px #8099cb; /* колір і розмір тіней */
}
.contact .image-border:hover{
  border:5px solid #314b81;
}

  /*Переповнення*/
  .block {
    margin: 10px;
    width: 8%;
    height: 5%;
    overflow: auto;
  }

  /*Кнопка*/
  button {
    top:50%;
    background-color:#44576D;
    color: #fff;
    border:none; 
    border-radius:10px; 
    padding:15px;
    min-height:30px; 
    min-width: 120px;
  }
  button:hover {
    background-color:#4967ba;
    transition: 0.7s;
}
button:focus {
  outline-color: transparent;
  outline-style:solid;
  box-shadow: 0 0 0 4px #190161;
}
button:active {
  background-color: #c96cf1;
}

/*Кнопка вверх*/
body {
  min-height: 200px;
}

.btn-up {
  position: fixed;
  background-color: #673ab7;
  right: 20px;
  bottom: 20px;
  border-radius: 22px;
  cursor: pointer;
  width: 44px;
  height: 44px;
}

.btn-up::before {
  content: "";
  text-align: center;
  position: absolute;
  width: 20px;
  height: 20px;
  left: 12px;
  top: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17V4M3 10l7-7 7 7'/%3E%3C/g%3E%3C/svg%3E");
}

  .btn-up_hide {
    display: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .btn-up:hover {
      background-color: #512da8;
    }
  }