body {
    display: block;
    margin: 0;
}

#allrecords ul {
    padding-left: 0;
}

h1, ul{
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    list-style-type: none;   
    padding-inline-start: 0;
}

@media (min-width: 320px) and (max-width: 479px) {
    .footer{
        height: 1085px;
    }

    .footer-info{
        position: relative;
        justify-content: center;
        padding-top:25px;
    }
    
    .footer-menu{
        position: relative;
        justify-content: center;
        padding-top:25px;
    }
    .footer-wk{
        position: relative;
        justify-content: center;
        padding-top:25px;
    }

    .footer-logo-copyright-svg{ 
        width:120px;
        height:50px;
    }
    .footer-logo-copyright{
        width:250px;
        height:70px;
        margin: 25px 0 0 0 ;
    }
}

@media (min-width: 480px) and (max-width: 639px) {
    .footer{
        height: 1100px;
    }

    .footer-info{
        position: relative;
        justify-content: center;
        padding-top:25px;
    }
    
    .footer-menu{
        position: relative;
        justify-content: center;
        padding-top:25px;
    }
    .footer-wk{
        position: relative;
        justify-content: center;
        padding-top:25px;
    }
    .footer-logo-copyright-svg{ 
        width:120px;
        height:50px;
    }
    .footer-logo-copyright{
        width:250px;
        height:70px;
        margin: 50px 0 0 0 ;
    }
}

@media (min-width: 640px) and (max-width: 959px) {
    .footer{
        height: 740px;
    }

    .footer-info{
        position: absolute;
        float:right;
        margin:25px 0 0 110px;
    }

    .footer-menu{
        position: relative;
        float:right;
        margin: 25px 100px 0 0;
    }
    .footer-wk{
        position: absolute;
        left:100px;
        margin-top: 420px;
    }
    .footer-logo-copyright-svg{ 
        width:120px;
        height:50px;
    }
    .footer-logo-copyright{
        width:250px;
        height:70px;
        margin: 650px 0 0 0 ;
    }
}

@media (min-width: 960px) and (max-width: 1199px) {
    .footer{
        height: 730px;
    }

    .footer-info{
        position: absolute;
        float:right;
        margin:25px 0 0 110px;
    }

    .footer-menu{
        position: absolute;
        margin: 25px 0 0 350px;
    }
    .footer-wk{
        position: relative;
        float:right;
        margin: 25px 150px 0 0;
    }
    .footer-logo-copyright-svg{ 
        width:120px;
        height:50px;
    }
    .footer-logo-copyright{
        width:250px;
        height:70px;
        margin: 650px 0 0 0 ;
    }
}

@media screen and (min-width: 1200px) {
    .header-top{
        height: 35px;
    }
    .header-s4t{
        font-size: 1.85rem;
        margin-left: 50px;
    }
    .header-top-menu-left a, .header-top-menu-right a{
        padding: 9px 20px 8px 20px;
        font-size: 0.9em;
    }
    .header-top-menu-tel{
        font-size: 1.5em;
        margin: 0.18em 2em 0 0;
    }
    .header-bottom{
        height: 47px;
    }
    .header-bottom-menu >ul li a{
        padding:15px 10px;
        font-size: .9rem;
    }
.footer{
        height: 750px;
    }

    .footer-info{
        position: absolute;
        float:right;
        margin:25px 0 0 110px;
    }

    .footer-menu{
        position: absolute;
        margin: 25px 0 0 400px;
    }
    .footer-wk{
        position: relative;
        float:right;
        margin: 25px 150px 0 0;
    }
    .footer-logo-copyright-svg{ 
        width:120px;
        height:50px;
    }
    .footer-logo-copyright{
        width:250px;
        height:70px;
        margin: 670px 0 0 0 ;
    }
}


.header-top{
    width: 100%;
    background: #18191F;
}

.header-s4t{
    display: inline;
    float:left;
    color:#ed7d31!important;
}

.header-top-menu-left{
    display: inline-block;
    margin-left: 30px;
    box-sizing: border-box;
}

.header-top-menu-left ul, .header-top-menu-right ul {
    display:flex;
}

.header-top-menu-left li, .header-top-menu-right li{
    position: relative;
}

.header-top-menu-left a, .header-top-menu-right a{
    display: block;
    color:#B2B3B3!important;
    text-decoration: none;
}

.header-top-menu-left li:after, .header-top-menu-right li:after{
    position: absolute;
    content: '';
    background: #ed7d31;
    height: 1px;
    pointer-events:none;
}

.header-top-menu-left li:after, .header-top-menu-right li:after{
    width: 0;
    transition:.35s;
}

.header-top-menu-left li:hover:after, .header-top-menu-right li:hover:after{
    width: 100%;
    transition:.35s;
}

.header-top-menu-tel{
    text-decoration: none;
    color:#ed7d31!important;
}

.header-top-menu-tel:hover, .header-top h1:hover{
    color:gray!important;
    transition: 0.35s;
}

.header-top-menu-right, .header-top-menu-tel {
    display: inline;
    float:right;
}

.header-top-menu-right{
    margin-right: 30px;
}

.header-bottom{
    width: 100%;
    background: #1D1F26;
    position:relative;
}

.header-bottom-menu{
    width:100%;
    display:block;
    position:absolute;
    z-index:99999;
    font-family: Alegreya, serif;
    left:15.5%;
}

.header-bottom-menu ul{
    display:flex;
}


.header-bottom-menu >ul li a{
    display: block;
    text-decoration: none;
}

.header-bottom-menu >ul li a{
    color:white!important;
    transition: 0.35s;
}

.header-bottom-menu li a:hover{
    color:#ed7d31!important;
    background: #3F4252;
    transition: 0.35s;
}

.header-bottom-menu li ul {
    min-width: 180px;
    position: absolute;
    display: block;
}

.header-bottom-menu li >ul li a{
    display: block;
    color:white!important;
    padding: 7px 12%;
    font-size: .8em;
    text-transform: none;
}

.header-bottom-menu-2-1{
    position:absolute;
    left:100%;
    top:0;
}

.header-bottom-menu-2-2{
    position:absolute;
    left:100%;
    top:45px;
}

.header-bottom-menu-2-3{
    position:absolute;
    left:100%;
    top:75px;
}

.header-bottom-menu-2-4{
    position:absolute;
    left:100%;
    top:105px;
}

.header-bottom-menu-2-5{
    position:absolute;
    left:100%;
    top:135px;
}

.header-bottom-menu-2-7{
    position:absolute;
    left:100%;
    top:180px;
}

.header-bottom-menu-2::before{
    content:'';
    position: absolute;
    border:5px solid;
    border-color:transparent transparent transparent #eee;
    margin:6% 0 0 90%;
    transition:0.5s;
}

.header-bottom-menu-2:hover::before{
    transform: scalex(-1);
    transition:0.5s;
}

.header-bottom-menu li >ul li a{
    color:#ed7d31!important;
    background: #1D1F26;
}
.header-bottom-menu li > ul li a:hover{
    color:white!important;
    background: #3F4252;
}

.header-bottom-menu li ul {
    opacity: 0;
    visibility: hidden;
    transition: 0.35s opacity, 0.35s visibility;
}

.header-bottom-menu li:hover > ul{
    opacity: 1;
    visibility: visible;
    transition: 0.35s opacity, 0.35s visibility;
}

/*FOOTER*/

.footer{
    width: 100%;
    background: #1d1f26;
    margin-top: 20px;
}

.footer a{
    color: white !important;
    text-decoration: none!important;
    transition:.4s;
}
.footer a:hover{
    color: #ed7d31 !important;
    text-decoration: underline!important;
    transition:.4s;
}
.footer-start{
    display: flex;
}

.footer-wk{
    font-size:19px;
    color: #B2B3B3 !important;
    font-weight: bold; 
    text-align: center;
}
.footer-wk-t{
    margin-top:5px;
    font-size:1.2rem;
    color: white !important;
}
.footer-other{
    margin-top:25px;
    line-height:30px;
    font-size:1.1rem;
}
.footer-other a{
    color:#ed7d31!important;
    text-decoration: none;
    transition:.4s;
}
.footer-other a:hover{
    color: #B2B3B3 !important;
    text-decoration: underline;
    transition:.4s;
}
.footer-info{
    font-size: 19px;
    color: #B2B3B3 !important;
    font-weight: bold;
    text-align: center;
}

.footer-info a{
    display: flex;
    flex-direction: column;
    text-decoration: none;
    font-size:17px;
    font-weight: normal;
    padding:8px 0 8px 0;
}

.footer-menu{
    font-size: 19px;
    color: #B2B3B3 !important;
    font-weight: bold;
    text-align: center;
}

.footer-menu a{
    display: flex;
    flex-direction: column;
    text-decoration: none;
    font-size:17px;
    font-weight: normal;
    padding:8px 0 8px 0;
}

.footer-logo-copyright{
    display:block;
    position: absolute;
    right:50%;
    transform:translate(50%,0);
}

.footer-logo-copyright-svg{
    position: absolute;
    right:50%;
    transform:translate(50%,0);
}

.footer-copyright{
    color: white !important;
    letter-spacing: 3px;
    margin: 60px 0 0 30px;
}



/* =====================  Фирменные цвета  ===================== */
:root {
  /* === Основные фирменные цвета === */
  --primary: #0077cc;       /* основной акцент — кнопки, ссылки */
  --primary-dark: #005fa3;          /* тёмный акцент — hover, градиенты */
  --primary-light: #43b8fe;         /* голубой hover — меню, кнопки */
  --menu-bg: #1a1a1a;            /* фон меню — чуть светлый черный */
  --submenu-bg: #2e2e2e;         /* фон подменю — темнее, но не черный */
  --text-dark: #333333;          /* основной текст на светлом фоне */
  --text-light: #ffffff;         /* текст на темном фоне */

  /* === Дополнительные цвета для элементов сайта === */
  --header-top-bg: #f2f2f2;      /* верхний блок */
  --header-top-text: #555555;    /* текст верхнего блока */
  --header-middle-bg: #ffffff;   /* средний блок с логотипом */
  --header-border: #dddddd;      /* разделительные линии */

  /* === Кнопки === */
  --btn-bg: var(--primary);         /* фон кнопок */
  --btn-bg-hover: var(--primary-dark);      /* hover кнопок */
  --btn-text: #ffffff;                   /* текст кнопок */

  /* === Ссылки и навигация === */
  --link-color: var(--text-light);       /* обычная ссылка */
  --link-hover: var(--primary-light);       /* hover ссылки */
  --menu-active: var(--primary-light);      /* активный пункт меню */
  --submenu-hover: var(--primary-light);    /* hover подменю */

  /* === Соцсети / Иконки === */
  --social-bg: #eaeaea;                  /* фон иконок соцсетей */
  --social-bg-hover: var(--primary); 
  --social-color: #333333;
  --social-color-hover: #ffffff;

  /* === Карточки, блоки, фоны === */
  --card-bg: #2a2a2a;        /* фон карточек/блоков */
  --card-bg-hover: #3a3a3a;  /* hover карточек */
  --card-text: #ffffff;      /* текст на карточках */

  /* === Градиенты / уведомления === */
  --notice-bg-gradient-start: #0077cc;  
  --notice-bg-gradient-end: #005fa3;

  /* === Тени и акценты === */
  --shadow: rgba(0,0,0,0.3);   /* тень под подменю, карточки */
  --highlight: #ffaa00;         /* яркий акцент, например кнопки special */

  /* === Опционально для деталей === */
  --border-light: #444444;      /* тонкая граница на темных блоках */
  --border-dark: #222222;       /* граница на светлом фоне */
  --hover-soft: #5cb3ff;        /* мягкий hover для элементов */
  --disabled: #888888;           /* неактивные кнопки / ссылки */
  --success: #28a745;            /* зеленый успех */
  --warning: #ffc107;            /* желтый warning */
  --error: #dc3545;              /* красный error */
  
}

/* =====================  Общие стили  ===================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: var(--text-dark) !important;
}

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

/* Контейнер */
.container {
  width: 100%;
  padding: 0 2.5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* =====================  Верхний блок  ===================== */
.head-top {
  width: 100%;
  background-color: var(--header-top-bg) !important;
  font-size: 13px;
  color: #555 !important;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}

.head-top .left,
.head-top .right {
  display: flex;
  gap: 25px;
}

.head-top a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dark) !important;
  font-size: 13px;
  position: relative;
  transition: color 0.3s;
}

.head-top a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: var(--primary) !important;
  transition: width 0.3s;
}

.head-top a:hover {
  color: var(--primary) !important;
}

.head-top a:hover::after {
  width: 100%;
}

.head-top .container a i {
  transition: transform 0.2s; /* плавное увеличение иконки */
}

.head-top .container a:hover i {
  transform: scale(1.2); /* увеличиваем на 20% */
}

/* =====================  Средний блок  ===================== */
.head-middle {
  width: 100%;
  background-color: #fff !important;
  border-bottom: 1px solid #ddd;
}

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

.head-middle .logo {
  height: 60px;
}

.head-middle .right {
  display: flex;
  align-items: center;
  gap: 50px;
}

.social-icons {
  display: flex;
  gap: 10px;
}

.social-icons a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background-color: var(--social-bg) !important;
  border-radius: 50%;
  color: var(--text-dark) !important;
  font-size: 16px;
  transition: all 0.3s;
}

.social-icons a:hover {
  background-color: var(--primary) !important;
  color: var(--text-light) !important;
}

.btn-account {
  padding: 10px 25px;
  background-color: var(--primary) !important;
  color: var(--text-light) !important;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-account:hover {
  background-color: var(--primary-dark) !important; 
}

/* =====================  Нижний блок — меню  ===================== */
.menu-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--menu-bg) !important;
  padding: 10px 10px;
  width: 100%;
}

.main-menu .menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
    margin: 0;
    padding: 0;
}

.main-menu .menu > li {
  position: relative;
}

.main-menu a {
  text-decoration: none;
  font-size: 14px;
  color: var(--text-light) !important;
  font-weight: 600;
  padding: 10px 15px;
  display: block;
  transition: all 0.3s;
  text-align: center;
}

.main-menu a:hover {
  background-color: var(--primary-light) !important;
  border-radius: 5px;
}

.main-menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--submenu-bg) !important;
  padding: 10px 0;
  border-radius: 5px;
  min-width: 180px;
  z-index: 1000;
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

.main-menu li:hover > ul {
  display: block;
}

.main-menu ul ul li {
  width: 100%;
  text-align: center;
}

.main-menu ul ul a {
  padding: 8px 15px;
  color: var(--text-light) !important;
  font-weight: 400;
}

.main-menu ul ul a:hover {
  background-color: var(--primary-light) !important;
}

/* =====================  Уведомление  ===================== */
.header-notice {
  background: linear-gradient(90deg, var(--primary-light), var(--primary-dark));
  color: var(--text-light) !important;
  text-align: center;
  padding: 5px 0;
  font-weight: 600;
  font-size: 12px;
}

/* =====================  Адаптив  ===================== */
@media (max-width: 1200px) {
  .container,
  .main-menu {
    min-width: 1200px;
  }
}


/* ------------------- Футер ------------------- */
.futer {
  background-color: #1a1a1a !important;
  color: #fff !important;
  font-family: Arial, sans-serif;
  position: relative;
}

/* Верхняя часть футера */
.futer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px 10%;
  min-height: 200px;
  position: relative;
}

/* Левая колонка */
.futer-left {
  flex: 1;
  text-align: left;
}

/* Правая колонка */
.futer-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

/* Списки */
.futer-left ul,
.futer-right ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.futer-left ul li,
.futer-right ul li {
    color: #d7d7d7 !important;
  margin-bottom: 10px;
}

.futer-left ul li a,
.futer-right ul li a {
  color: #d7d7d7 !important;
  text-decoration: none;
  position: relative; /* нужно для псевдоэлемента */
  transition: color 0.3s;
}

.futer-left ul li a:hover,
.futer-right ul li a:hover {
  color: #43b8fe !important;
}

.futer-left h3,
.futer-right h3 {
  margin-bottom: 15px; /* расстояние между заголовком и списком */
}

/* Линия слева направо */
.futer-left ul li a::after,
.futer-right ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;          /* толщина линии */
  width: 0;             /* изначально скрыта */
  background-color: #43b8fe !important; 
  transition: width 0.3s;
}
/* При наведении линия растёт слева направо */
.futer-left ul li a:hover::after,
.futer-right ul li a:hover::after {
  width: 100%;
}
/* Соцсети — в одну линию */
.futer-right .social-icons {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.futer-right .social-icons a {
  width: 36px;
  height: 36px;
  font-size: 16px;
  text-decoration: none;
  font-weight: bold;
  
  background-color: var(--social-bg) !important;
  border-radius: 50%;
  color: var(--text-dark) !important;
  
  
  transition: color 0.3s;
}

.futer-right .social-icons a:hover {
  background-color: var(--primary) !important;
  color: var(--text-light) !important;
}

/* Кнопка Наверх по центру между колонками */
.scroll-top-center {
  position: absolute;
  top: 50%; /* вертикально на уровне середины футер-топ */
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255,255,255,0.1) !important; /* чуть светлее фона */
  color: #fff !important;
  padding: 8px 15px;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.3s, transform 0.2s;
}

.scroll-top-center:hover {
  background-color: rgba(255,255,255,0.2) !important;
  transform: translate(-50%, -50%) translateY(-2px);
}

/* Нижняя линия и копирайт */
.futer-bottom {
  margin-top: 20px;
  padding: 20px 10%;
  text-align: center;
}

.futer-bottom .line {
  height: 1px;
  background-color: #555 !important;
  margin-bottom: 15px;
}


/*Хлебные крошки*/

#breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 20px 0;
  padding-left: 18%;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}

#breadcrumbs a, #breadcrumbs span {
  text-decoration: none;
  transition: all 0.2s ease;
}

#breadcrumbs a {
  color: #003366;       /* тёмно-синий */
  font-weight: 600;
  position: relative;
  padding: 0 5px;
}

#breadcrumbs a:hover {
  color: #0055aa;
  transform: scale(1.05);
}

#breadcrumbs a::after {
  content: '';
  display: block;
  height: 2px;
  width: 0%;
  background: #43b8fe;
  transition: width 0.3s ease;
  position: absolute;
  bottom: -3px;
  left: 0;
}

#breadcrumbs a:hover::after {
  width: 100%;
}

/* Стрелки */
#breadcrumbs .divider {
  margin: 0 12px;
  display: flex;
  align-items: center;
}

#breadcrumbs .divider i {
  color: #43b8fe;
  font-size: 12px;
  transition: transform 0.3s, color 0.3s;
  transform: rotate(0deg);
}

/* Hover на сегмент переворачивает стрелку перед ним */
#breadcrumbs a:hover ~ .divider i,
#breadcrumbs a:hover + .divider i {
  transform: rotate(180deg);
  color: #003366;
}

/* Последний сегмент */
#breadcrumbs span.current {
  color: #7fbfff; /* мягкий светло-синий */
  font-weight: 400;
}

/* Адаптив для мобильных */
@media (max-width: 1199px) {
  #breadcrumbs {
    padding-left: 10%;
    font-size: 12px;
  }
  #breadcrumbs .divider {
    margin: 0 8px;
  }
}