/* USER VARIABLES SECTION */



:root {

	--accent: #3a53a5;

	--accent-dark: #314890;

	--accent-link: #3954a5;

	--text: #293237;

	--regular-text: 18px;

	--text-14: 14px;

	--text-16: 16px;

	--text-20: 20px;

	--text-22: 22px;

	--text-28: 28px;

	--lineheight: 1.3;

	--userfont: Onest, sans-serif;

	--systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif;

}





/* GENERAL CSS SETTINGS */



::placeholder {

	color: #1b1843;

	font-weight: normal;

	font-size: var(--text-14);

	line-height: 25px;

}



::selection {

	background-color: var(--accent);

	color: #fff;

}



input,

textarea {

	outline: none;

}



input:focus:required:invalid,

textarea:focus:required:invalid {

	border-color: red;

}



input:required:valid,

textarea:required:valid {

	border-color: green;

}



body {

	font-family: var(--userfont);

	font-size: var(--regular-text);

	line-height: var(--lineheight);

	color: var(--text);

	font-weight: normal;

	min-width: 320px;

	position: relative;

	overflow-x: hidden;

	font-weight: 500;

}



/* USER STYLES */



img {

	max-width: 100%;

}


span, p, ul, ol, li, h1, h2, h3, h4, h5, h6, a {
		font-family: var(--userfont)!important;
}

a:hover span {
	color: var(--accent-link)!important;
}

a,

button {

	transition: .25s;

	text-decoration: none;

}



a:hover,

button:hover {

	opacity: .75;

}



.container {

	width: 1580px;

	max-width: 100%;

	margin: 0 auto;

	display: block;

	padding: 0 20px;

}



.flex {

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	justify-content: space-between;

}



.top {

	background: var(--accent-dark);

	width: 100%;

	color: #fff;

}



.top p {

	margin-bottom: 0;

	font-size: var(--text-14);

}



.top-right {

	gap: 10px;

	position: relative;

}



.search-block {

	position: relative;

}



.search-block form {

	position: relative;

	display: flex;

	justify-content: flex-end;

	align-items: center;

	overflow: visible;

}



.search-block input {

	position: absolute;

	right: 40px;

	/* ширина кнопки */

	height: 40px;

	width: 0;

	padding: 0 10px;

	border: 1px solid #ccc;

	background: #fff;

	opacity: 0;

	transform: scaleX(0);

	transform-origin: right center;

	transition: transform 0.3s ease, opacity 0.3s ease;

	z-index: 1;

}



.search-block input.active {

	width: 260px;

	/* Ширина поля, можна змінити */

	opacity: 1;

	transform: scaleX(1);

}



.search-block button {

	position: relative;

	height: 40px;

	width: 40px;

	color: #fff;

	border: none;

	cursor: pointer;

	background: var(--accent);

	padding: 8px;

	z-index: 2;

}



.search-block button svg {

	width: 16px;

	height: 16px;

	fill: #fff;

	transition: transform 0.3s ease;

}



.search-block button svg path {

	fill: #fff;

}





.accessibility-panel {

	display: flex;

	gap: 5px;

	align-items: center;

}



.accessibility-panel button {

	width: 30px;

	height: 30px;

	border: 1px solid #ffffff;

	background-color: transparent;

	color: white;

	cursor: pointer;

	font-family: var(--systemfont);

	font-weight: bold;

	font-size: var(--text-14);

	transition: background-color 0.3s ease;

	display: flex;

	align-items: center;

	justify-content: center;

}



.accessibility-panel button.no-border {

	border: 1px solid transparent;



}



.accessibility-panel-list {

	display: none;

	gap: 10px;

	flex-wrap: wrap;

	align-items: center;

	position: absolute;

	background: var(--accent-dark);

	right: 35px;

	z-index: 3;

	width: 180px;

	height: 40px;

	padding: 0 10px;

	justify-content: center;

}



.eye-icon {

	width: 24px;

	height: 24px;

	fill: white;

}



.header {

	background: var(--accent);

	width: 100%;

	color: #fff;

}



.menu-btn {

	display: none;

}

.logo {

	margin: 5px 0;

}





nav.main-nav ul .sub-menu {

	display: none;

}



nav.main-nav ul {

	display: flex;

	align-items: center;

	margin-bottom: 0;

	padding-left: 0;

	list-style-type: none;

	justify-content: space-between;

}



nav.main-nav ul li a {

	color: #fff;

	font-size: var(--text-16);

	line-height: 1.3;

	padding: 10px 15px;

	display: block;

	transition: color .25s ease-in-out;

	text-transform: uppercase;

	display: flex;

	height: 110px;

	align-items: center;

	justify-content: center;

	transition: .25s;

	gap: 5px;

	position: relative;

}



header nav li.menu-item-has-children a {

	padding-right: 20px;

}



header nav li.menu-item-has-children a i {

	transition: all 0.35s;

	width: 8px;

	height: 8px;

	background: url("../images/arr.svg") 50% 50% no-repeat;

	background-size: auto;

	background-size: 20px;

}





nav.main-nav ul li.active {

	background: var(--accent-dark);

}



header nav li.menu-item-has-children.active a i {

	transform: rotate(180deg);

}



nav.main-nav ul li .sub-menu {

	position: absolute;

	top: 150px;

	left: 0;

	background: var(--accent-dark);

	width: 100%;

	z-index: 10;

	display: none;

	justify-content: center;

	transition: .25s;

	flex-wrap: wrap;

}



nav.main-nav ul li.active .sub-menu {

	display: flex;

}



nav.main-nav ul li .sub-menu li a {

	color: #fff;

	height: 60px;

	padding: 0px 10px;

	font-size: var(--text-14);

	line-height: 1.3;

	text-transform: none;

}



.section {

	margin: 50px 0;

}



.header-flex {

	display: flex;

	align-items: center;

	justify-content: space-between;

}



.bt {

	text-transform: uppercase;

	font-size: var(--text-28);

	color: var(--accent-link);

}



.more {

	color: var(--accent-link);

	font-size: var(--text-14);

	font-weight: 600;

}



.news-list {

	display: flex;

	flex-wrap: wrap;

	list-style: none;

	padding: 0;

	margin: 30px 0;

	border-bottom: 1px dashed #ccc;

	padding-bottom: 30px;

	gap: 30px;

}



.news-item {

	display: flex;

	flex-direction: column;

	justify-content: space-between;

	flex: 1 1 calc(25% - 30px);

	/* 4 колонки */

	box-sizing: border-box;

	height: 100%;

	gap: 10px;

	-webkit-transition: -webkit-transform .6s;

	transition: -webkit-transform .6s;

	transition: transform .6s;

	transition: transform .6s, -webkit-transform .6s;

}





.news-item:hover {

	-webkit-transition: -webkit-transform .6s;

	transition: -webkit-transform .6s;

	transition: transform .6s;

	transition: transform .6s, -webkit-transform .6s;

	-webkit-transform: translateX(2%);

	-ms-transform: translateX(2%);

	transform: translateX(2%);

}



.news-item img {

	width: 100%;

	height: 200px;

	object-fit: cover;

}



.news-link {

	color: var(--text);

	font-size: var(--regular-text);

	line-height: 19px;

	font-weight: 600;

}



.news-date {

	color: #c1c4d0;

	font-size: var(--text-14);

	font-weight: 300;

}





#main-home .grid {

	display: grid;

	grid-template-columns: 300px 1fr 300px;

	gap: 20px;

}



.main-user {

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 20px;

	text-align: center;

}



.main-user img {

	width: 80%;

	max-width: 300px;

}



.main-user .name {

	font-size: var(--text-20);

	font-weight: 600;

	color: var(--text);

}



.main-user .position {

	font-size: var(--text-16);

	color: #8d8d8e;

	width: 100%;

	max-width: 400px;

}



#main-home .info-block {

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 5px;

}



#main-home .info-links {

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 5px;

}



#main-home .info-links img {

	max-width: 200px;

}



#info-pages ul {

	list-style: none;

	padding: 0;

	margin: 0;

	display: grid;

	grid-template-columns: repeat(7, 1fr);

	gap: 20px;

}



#info-pages ul li {

	display: flex;

	flex-direction: column;

	align-items: center;

	text-align: center;

}



#info-pages ul li a {

	color: #fff;

	background: var(--accent);

	font-size: var(--text-16);

	line-height: 1.3;

	text-decoration: none;

	display: flex;

	align-items: center;

	text-align: center;

	height: 100%;

	padding: 20px;

	width: 100%;

	text-transform: uppercase;

	justify-content: center;

	transition: transform .6s, -webkit-transform .6s;

}



#info-pages ul li a:hover {

	-webkit-transition: -webkit-transform .6s;

	transition: -webkit-transform .6s;

	transition: transform .6s;

	transition: transform .6s, -webkit-transform .6s;

	-webkit-transform: translateY(-5%);

	-ms-transform: translateY(-5%);

	transform: translateY(-5%);

	opacity: 1;

}









#useful-links ul {

	list-style: none;

	padding: 0;

	margin: 0;

	display: grid;

	grid-template-columns: repeat(4, 1fr);

	gap: 20px;

	margin-top: 30px;

}



#useful-links ul li {

	display: flex;

	flex-direction: column;

	align-items: center;

	text-align: center;

}



#useful-links ul li a {

	color: #fff;

	background: var(--accent);

	font-size: var(--text-16);

	line-height: 1.3;

	text-decoration: none;

	display: flex;

	align-items: center;

	text-align: center;

	height: 100%;

	padding: 20px;

	padding-left: 90px;

	width: 100%;

	justify-content: center;

	transition: transform .6s, -webkit-transform .6s;

	position: relative;

}



#useful-links ul li a:hover {

	-webkit-transition: -webkit-transform .6s;

	transition: -webkit-transform .6s;

	transition: transform .6s;

	transition: transform .6s, -webkit-transform .6s;

	-webkit-transform: translateY(-5%);

	-ms-transform: translateY(-5%);

	transform: translateY(-5%);

	opacity: 1;

}



#useful-links ul li a::before {

	position: absolute;

	content: '';

	width: 80px;

	height: 100%;

	top: 0;

	left: 0;

	background-color: #fafafa;

	background-image: url('../images/gerb.png');

	transition: opacity .3s ease;

	background-position: center;

	background-repeat: no-repeat;

}



footer {

	background-color: #222;

	color: #c0c0c0;

	font-weight: 300;

	font-size: var(--text-16);

}



footer a {

	color: #c0c0c0;

	font-weight: 300;

	font-size: var(--text-16);

}



footer a:hover {

	color: #fff;

	opacity: 1;

}



.footer-flex {

	display: flex;

	flex-wrap: wrap;

	justify-content: space-between;

	gap: 20px;

	padding: 30px 0;

}



footer .bt {

	color: #fff;

	font-weight: 600;

}



footer .contacts {

	display: flex;

	flex-direction: column;

	gap: 10px;

	padding-right: 20px;

	border-right: 1px dashed #3a53a5;

	margin-right: 20px;

	width: 350px;

}



footer .contacts .bt {

	text-transform: none;

	margin-bottom: 10px;

	font-size: var(--regular-text);

}



.footer-links .bt {

	margin-bottom: 20px;

	font-size: var(--regular-text);

	padding-bottom: 10px;

	border-bottom: 1px dashed #3a53a5;

}



footer ul {

	list-style-type: none;

	padding-left: 0;

	margin-bottom: 0;

	font-size: var(--text-16);

}



footer ul li a {

	font-size: var(--text-16);

	display: block;

	padding: 5px 0;

}



#scrollTopBtn {

	position: fixed;

	bottom: 30px;

	right: 30px;

	width: 50px;

	height: 50px;

	background-color: #333;

	/* тёмный цвет */

	color: #fff;

	border: none;

	border-radius: 50%;

	font-size: 24px;

	cursor: pointer;

	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

	display: none;

	justify-content: center;

	align-items: center;

	transition: opacity 0.3s ease;

	z-index: 999;

}



#scrollTopBtn:hover {

	background-color: #555;

}



article {

	padding: 50px 0;

}



article h1 {

	margin-bottom: 20px;

}



article h2,

article h3,

article h4,

article h5,

article h6 {

	margin-bottom: 20px;

	margin-top: 40px;

	font-size: var(--text-22);

	color: var(--accent);

	text-transform: uppercase;

}



article p {

	font-weight: inherit;

}



article strong{

	font-weight: 700;

}



.structure-list {

	list-style-type: none;

	padding-left: 0;

	margin-bottom: 30px;

}



.structure-list li {

	margin-bottom: 10px;

	display: block;

	font-weight: inherit;

}

article ul li {

	margin-bottom: 10px;

	font-weight: inherit;

}



.structure-list a,

article a {


	color: var(--text);

	font-weight: inherit;

}



.structure-list a:hover {

	color: var(--accent-link);

	opacity: 1;

}



table {

	width: 100%;

	border-collapse: collapse;

	font-size: var(--regular-text);

	margin-bottom: 20px;

}



table td,

table th {

	border: 1px solid #ccc;

	padding: 12px;

	text-align: left;

	vertical-align: middle;

}





.navigation.pagination {

  text-align: center;

  margin: 40px 0;

  font-family: Arial, sans-serif;

}



.navigation.pagination .nav-links {

  display: inline-flex;

  flex-wrap: wrap;

  gap: 8px;

  justify-content: center;

  align-items: center;

}



.navigation.pagination .page-numbers {

  display: inline-block;

  padding: 8px 14px;

  border: 1px solid #ccc;

  color: #333;

  text-decoration: none;

  transition: all 0.2s ease-in-out;

}



.navigation.pagination .page-numbers:hover {

  background-color: var(--accent-dark);

  color: #fff;

	opacity: 1;

  border-color:  var(--accent-dark);

}



.navigation.pagination .page-numbers.current {

  background-color:  var(--accent-dark);

  color: #fff;

  border-color: var(--accent-dark);

  cursor: default;

}



.navigation.pagination .page-numbers.dots {

  background: transparent;

  border: none;

  pointer-events: none;

}





.navigation.pagination .next.page-numbers:hover {

  background-color: var(--accent-dark);

  color: #fff;

}



.video-list {

	display: grid;

	grid-template-columns: 1fr 1fr

}



.video-frame iframe {

	width: 100%;

	height: 450px;

}







/* Общий стиль формы */

.wpcf7 form {

	max-width: 600px;

	margin: 0;

	font-size: 16px;

	color: #222;

  }

  

  /* Метки */

  .wpcf7 form label {

	display: block;

	margin: 20px 0 5px;

	font-weight: 600;

  }

  

  /* Поля ввода и select */

  .wpcf7 input[type="text"],

  .wpcf7 input[type="email"],

  .wpcf7 input[type="tel"],

  .wpcf7 select,

  .wpcf7 textarea {

	width: 100%;

	padding: 10px 12px;

	border: 1px solid #ccc;

	border-radius: 5px;

	background: #fff;

	font-size: 16px;

	box-sizing: border-box;

	margin-bottom: 10px;

	transition: border-color 0.3s ease;

  }

  

  .wpcf7 input[type="text"]:focus,

  .wpcf7 input[type="email"]:focus,

  .wpcf7 input[type="tel"]:focus,

  .wpcf7 select:focus,

  .wpcf7 textarea:focus {

	border-color: var(--accent-dark);

	outline: none;

  }

  

  /* Текстовая область */

  .wpcf7 textarea {

	resize: vertical;

	min-height: 120px;

  }

  

  /* Кнопка */

  .wpcf7 input[type="submit"] {

	display: block;

	width: fit-content;

	margin-top: 20px;

	padding: 12px 25px;

	background-color: var(--accent-dark);

	color: #fff;

	font-weight: bold;

	font-size: 16px;

	border: none;

	border-radius: 5px;

	cursor: pointer;

	transition: background 0.3s ease;

  }

  

  .wpcf7 input[type="submit"]:hover {

	background-color: var(--accent);

  }

  

  /* reCAPTCHA отступ */

  .wpcf7 .g-recaptcha {

	margin-top: 20px;

	margin-bottom: 20px;

  }

  

  /* Сообщение подтверждения */

  .wpcf7-response-output {

	margin-top: 20px;

	padding: 10px;

	border: 1px solid transparent;

	border-radius: 5px;

  }

  

  /* Примеры успешного/ошибочного сообщения */

  .wpcf7-mail-sent-ok {

	border-color: #52c41a;

	background-color: #f6ffed;

	color: #389e0d;

  }

  

  .wpcf7-validation-errors,

  .wpcf7-mail-sent-ng {

	border-color: #ff4d4f;

	background-color: #fff1f0;

	color: #cf1322;

  }

  

  /* Стили для чекбокса */

  .wpcf7-form .wpcf7-acceptance {

	margin-top: 20px;

	display: flex;

	align-items: center;

	gap: 10px;

  display: inline-block;

  }

  

  .wpcf7-form .wpcf7-acceptance input {

	width: auto;

	margin-left: 0;

  }



  .wpcf7-form .wpcf7-list-item {

	margin-left: 0;

  }

  .search-results.container {

    max-width: 800px;

    margin: 40px auto;

    padding: 0 15px;

    font-family: Arial, sans-serif;

    color: #222;

}



.search-results h1 {

    font-size: 28px;

    margin-bottom: 30px;

    color: #111;

}



.search-results-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.search-result-item {

    border-bottom: 1px solid #ddd;

    padding: 15px 0;

}



.search-result-item:last-child {

    border-bottom: none;

}



.search-result-item a {

    font-size: 20px;

    color: var(--accent);

    text-decoration: none;

    transition: color 0.3s ease;

}



.search-result-item a:hover {

    color: var(--accent-dark);

}



.search-result-item small {

    display: block;

    color: #666;

    margin-top: 5px;

    font-size: 13px;

}



.search-result-item p {

    margin-top: 10px;

    line-height: 1.5;

    color: #444;

}

iframe[src*="youtube.com"] {
  width: 100% !important;
  aspect-ratio: 16/9;
  border: 0;
  max-width: 960px;
}

@media (max-width: 768px) {
    iframe[src*="youtube.com"] {
        aspect-ratio: 16/10;
        max-height: 250px;
    }
}

div:has(> table) {
  overflow-x: auto;
}









/* Стили для страниц записей (новостей) */
.single-post article {
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 20px;
}

.single-post .entry-header {
	margin-bottom: 30px;
}

.single-post .entry-title {
	font-size: var(--text-28);
	color: var(--accent);
	margin-bottom: 20px;
}

.single-post .entry-meta {
	font-size: var(--text-14);
	color: #8d8d8e;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e0e0e0;
}

.single-post .entry-meta span {
	margin-right: 15px;
}

.single-post .post-thumbnail {
	margin-bottom: 30px;
}

.single-post .post-thumbnail img {
	width: 100%;
	height: auto;
	max-height: 500px;
	object-fit: cover;
}

.single-post .entry-content {
	line-height: 1.8;
}

.single-post .entry-footer {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid #e0e0e0;
	font-size: var(--text-14);
}

/* Для архивных страниц (списка новостей) */
.archive article,
.blog article,
.search article {
	max-width: 1200px;
	margin: 0 auto 40px;
	padding: 0 20px;
}






















/* Стили для футера записи */
.entry-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	align-items: center;
}

.entry-footer .cat-links,
.entry-footer .tags-links,
.entry-footer .comments-link,
.entry-footer .edit-link {
	display: inline-block;
}

.entry-footer .comments-link a {
	background: var(--accent);
	color: #fff;
	padding: 8px 15px;
	border-radius: 3px;
	text-decoration: none;
	font-size: var(--text-14);
	transition: all 0.3s ease;
}

.entry-footer .comments-link a:hover {
	background: var(--accent-dark);
	opacity: 1;
}