/*!
Theme Name: Kronos
Theme URI: http://underscores.me/
Author: SeoMadePlace
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kronos
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Kronos is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
.blog-section .header {
	font-weight: 700;
	font-size: 100px;
	line-height: 100%;
	text-align: center;
	text-transform: uppercase;
}



.nav-menu p {
  font-size: 11px;
  color: #a8a8a8;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.fs-section {
        min-height: 700px;
    }

@media (max-width: 768px) {
    .fs-section {
        min-height: 600px;
    }
}

.fs-section .header {
	line-height: 160px;
}

.fs-section .description {
	line-height: 46px;
}

.fs-section .buttony {
	width: 200px;
	text-align: center;
	padding: 16px 20px;
	font-weight: 400;
	font-size: 40px;
	line-height: 100%;
	letter-spacing: 0px;
	text-align: center;
	border: 3px solid rgb(255,255,255);
	height: 80px;
	text-transform: uppercase;
}


.heroes > div > p:nth-of-type(1) {
	font-size: 25px;
	letter-spacing: 3px;
}

.heroes > div > p:nth-of-type(2) {
	font-size: 12px;
	font-weight: 300;
	line-height: 1.3em;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.heroes .social > img {
	width: 26px;
  height: 26px;
  margin-right: 5px;
}

.vectors .header, .credentails .header {
	font-weight: 600;
  font-size: 45px;
  line-height: 1.3em;
  letter-spacing: 10px;
  text-transform: uppercase;
  text-align: center;
}

.vectors img {
  width: 150px;
  height: 150px;
}

.lc .subheader {
	letter-spacing: 3px;
	font-weight: 700;
	font-size: 30px;
	line-height: 36px;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.lc .text, .credentails .contact-intro-text, .credentails .contact-text {
	font-size: 16px;
  	margin-bottom: 100px;
	line-height: 26px;
}
.credentails .contact-text {
	margin-bottom: unset;
}

.lc ul li {
	font-size: 16px;
}


.blog-section .header {
	font-weight: 600;
	font-size: 45px;
	line-height: 1.3em;
	letter-spacing: 10px;
	text-transform: uppercase;
	text-align: center;
}

#mainHeader {
    background-color: transparent;
    transition: background-color 0.4s ease-in-out, transform 0.4s ease-in-out;
    height: 65px; /* Висота хедера */
    z-index: 100;
}

#mainHeader .navbar {
    height: 100%; /* Забезпечуємо, що навбар займає всю висоту хедера */
}

#mainHeader .navbar-brand .header-logo {
    width: 250px; /* Ширина логотипу */
    object-fit: contain; /* Забезпечуємо правильне масштабування */
}

#mainHeader .nav-link {
    color: white; /* Колір тексту меню (залишаємо білим за замовчуванням) */
    padding: 0.5rem 1rem; /* Відступи для елементів меню */
    transition: color 0.3s ease;
}

#mainHeader .nav-link:hover {
    color: #c4c4c4; /* Колір тексту меню при наведенні */
}

#mainHeader .lang-icon {
    width: 25px; /* Ширина іконки мови */
    height: 16px;
    margin-right: 10px;
}

#mainHeader .lang-switch {
    background-color: white;
    padding: 2px 8px;
    border-radius: 4px;
    color: black;
    width: fit-content;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#mainHeader .lang-switch li {
    list-style: none;
}

#mainHeader .lang-switch a {
    color: black;
    text-decoration: none;
    text-transform: uppercase;
}

/* Стилі для фіксованого хедера при прокрутці */
#mainHeader.scrolled {
    background-color: black;
    transform: translateY(0); /* Залишаємо на місці, якщо вже fixed */
}

#mainHeader.scrolled .nav-link {
    color: white; /* Колір тексту меню при прокрутці (залишаємо білим) */
}

#mainHeader.scrolled .nav-link:hover {
    color: #ccc; /* Колір тексту меню при прокрутці при наведенні */
}

#mainHeader.scrolled .lang-switch {
    background-color: white; /* Фон перемикача мови при прокрутці */
    color: white;
}

/* Стилі для кнопки мобільного меню */
.navbar-toggler {
    border: 1px solid #fff; /* Бордюр кнопки (білий за замовчуванням) */
    color: #fff; /* Колір іконки бургера (білий за замовчуванням) */
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border-radius: 0.25rem;
    transition: box-shadow .15s ease-in-out, border-color 0.3s ease;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    /* Залишаємо білим для початкового стану */
}

/* Колір іконки бургера для чорного фону (при прокрутці) */
#mainHeader.scrolled .navbar-toggler {
    border-color: white;
}

#mainHeader.scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#mainHeader button:focus:not(:focus-visible) {
    outline: unset;
}

#mainHeader .navbar-toggler:focus {
    text-decoration: unset;
    outline: unset;
    box-shadow: unset;
}

/* Стиль для іконки пошуку, якщо вона є (приклад) */
/* Вам потрібно додати відповідний клас до вашої іконки пошуку в HTML */
.search-icon {
    color: white; /* Початковий колір - білий */
    transition: color 0.3s ease;
}

#mainHeader.scrolled .search-icon {
    color: white; /* Колір при прокрутці - білий */
}


/* Медіазапити для мобільної версії */
@media (max-width: 991.98px) { /* breakpoint для lg */
    #mainHeader .navbar-brand .header-logo {
        width: 150px; /* Менший розмір логотипу на мобільних */
        height: auto;
    }

    #mainHeader .navbar-collapse {
        background-color: white; /* Фон меню при відкритті на мобільних (білий) */
        padding: 0; /* Змінено: Прибираємо відступи по боках */
        margin-top: 1rem;
        /* border-radius: 0.5rem; */ /* Ви можете прибрати, якщо не потрібні заокруглення */
    }

    #mainHeader.scrolled .navbar-collapse {
        background-color: black; /* Фон меню при відкритті на мобільних після прокрутки */
    }

    #mainHeader:not(.scrolled) .navbar-collapse.collapse #searchIcon {
        filter: invert(1);
    }


    #mainHeader .nav-link {
        text-align: center;
        width: 100%;
        padding: 0.75rem 0;
        color: black; /* Змінено: Колір тексту в мобільному меню (коли відкрито) на ЧОРНИЙ */
    }

    #mainHeader.scrolled .nav-link {
        color: white; /* Колір тексту в мобільному меню (коли відкрито і прокручено) */
    }

    #mainHeader .lang-switch {
        margin: 1rem auto; /* Центруємо перемикач мови на мобільних */
        /* Додатково: якщо хочете, щоб "En" також був чорним у відкритому білому меню */
        color: black;
        list-style: none;
    }

    #mainHeader.scrolled .lang-switch {
        color: white; /* При прокрутці, якщо меню чорне */
    }
}



/* Swiper Container Styles */
.blog-slider-container {
    padding: 0; /* Видаляємо padding для контейнера слайдера */
}

.mySwiper {
    width: 100%;
    height: auto; /* Дозволяємо висоті адаптуватися */
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #eee; /* Базовий фон для слайдів, якщо зображення не завантажиться */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Вирівнюємо слайди зверху */
    flex-direction: column; /* Щоб контент був стовпчиком */
    position: relative; /* Для stretched-link */
}

/* Styles for blog post slides */
.blog-slide-inner {
    width: 100%;
    position: relative;
}

.blog-slide-bg {
    height: 1100px; /* Висота фонового зображення */
    width: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Вирівнюємо контент внизу зображення */
    padding-bottom: 20px; /* Відступ від низу зображення */
}

.blog-content-wrapper {
    height: auto; /* Висота обгортки контенту */
    width: 100%; /* Ширина обгортки контенту */
    padding: 0 15px; /* Невеликі горизонтальні відступи для тексту */
}

.blog-title {
    font-family: Roboto, sans-serif; /* Використовуємо Roboto, якщо він доступний */
    font-weight: 700;
    font-size: 55px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: white;
    margin-bottom: 0; /* Прибираємо зайвий нижній відступ */
}

.blog-meta {
    width: 100%;
    text-align: center;
    padding-top: 60px; /* Відступ від низу зображення */
    padding-bottom: 30px; /* Відступ до пагінації */
}

.blog-date-author {
    font-weight: 300;
    font-size: 35px;
    line-height: 100%;
    margin-bottom: 0; /* Прибираємо зайвий нижній відступ */
}

/* Styles for "All Posts" slide */
.blog-all-posts-slide {
    background-color: #f8f9fa; /* Світлий фон для останнього слайда */
    height: auto; /* Дозволяємо висоті адаптуватися до контенту */

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Для посилання */
}

.all-posts-link {
    text-decoration: none;
    color: #333; /* Колір тексту для посилання */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: color 0.3s ease;
}

.all-posts-text {
    font-size: 45px; /* Збільшений розмір тексту */
    font-weight: 700;
    margin-bottom: 20px;
}

.bi-arrow-right-circle {
    width: 80px; /* Збільшуємо розмір іконки */
    height: 80px;
}

/* Swiper Pagination Styles */
.swiper-pagination1 {
    position: static; /* Робимо пагінацію статичною, щоб вона була під слайдером */
    margin-top: 30px; /* Відступ від слайдерів */
    display: flex;
    justify-content: center;
}

.swiper-pagination1 .swiper-pagination-bullet {
    width: 45px; /* Ширина елемента пагінації */
    height: 45px; /* Висота елемента пагінації */
    font-size: 25px; /* Розмір цифри */
    font-weight: bold;
    color: #000; /* Колір цифр */
    background-color: transparent; /* Прозорий фон для неактивних */
    opacity: 1; /* Повна прозорість для неактивних */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6; /* Бордюр як у вашої пагінації */
    border-radius: 0.25rem; /* Заокруглення кутів */
    margin: 0 5px; /* Відступ між кнопками */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.swiper-pagination1 .swiper-pagination-bullet-active {
    background-color: #0d6efd; /* Колір активної кнопки Bootstrap Primary */
    color: white; /* Колір тексту активної кнопки */
    border-color: #0d6efd; /* Колір бордюру активної кнопки */
}

/* Arrow for Next Slide in Pagination (For the "»" arrow in your original pagination) */
.swiper-pagination1 .swiper-pagination-bullet:last-child {
    border-radius: 0 0.25rem 0.25rem 0; /* Заокруглення для останнього елемента */
}

.swiper-pagination1 .swiper-pagination-bullet:first-child {
    border-radius: 0.25rem 0 0 0.25rem; /* Заокруглення для першого елемента */
}

/* Медіазапити для адаптивності */
@media (max-width: 768px) {
    .blog-title {
        font-size: 30px; /* Зменшуємо розмір заголовка на мобільних */
    }

    .blog-date-author {
        font-size: 20px; /* Зменшуємо розмір дати/автора */
    }

    .blog-slide-bg {
        height: 500px; /* Зменшуємо висоту зображення на мобільних */
    }

    .swiper-pagination-bullet {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }

    .all-posts-text {
        font-size: 30px;
    }

    .bi-arrow-right-circle {
        width: 40px;
        height: 40px;
    }


}



.vectors .title {
	letter-spacing: 3px;
	font-weight: 700;
	font-size: 24px;
	line-height: 36px;
	text-transform: uppercase;
	margin-bottom: 20px;
    text-align: center;
}

.vectors .description {
  font-size: 16px;
  margin-bottom: 100px;
  line-height: 20px;
}

.blog-slide-bg {
	height: 400px;
}

@media (max-width: 1199px) {
	.fs-section .header {
		font-size: 70px;
	}

	.fs-section .description {
		font-size: 25px;
	}

	.fs-section .buttony {
		width: 140px;
		text-align: center;
		padding: 16px 20px;
		font-weight: 400;
		font-size: 25px;
		line-height: 100%;
		letter-spacing: 0px;
		text-align: center;
		border: 3px solid rgb(255,255,255);
		height: 60px;
	}
}

@media (max-width: 768px) {
	.fs-section .header {
		font-size: 40px;
   	 	line-height: 60px;
	}
	.fs-section .description {
		font-size: 16px;
	}
	.fs-section .buttony {
		font-size: 16px;
	}
}

/* Contact Section Styles */
.contact-section {
    background-color: #f8f9fa; /* Світлий фон для секції */
    padding: 80px 0; /* Відступи зверху/знизу */
}

.contact-intro-text {
    font-weight: 300;
    font-size: 30px;
    line-height: 1.2; /* Змінено на 1.2 для кращої читабельності */
    max-width: 710px;
    letter-spacing: 2px;
    margin-bottom: 60px; /* Відступ до контактних елементів */
}

.contact-item {
    margin-bottom: 30px; /* Відступ між телефоном та поштою */
}

.contact-icon-wrapper {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.contact-icon-wrapper img {
   max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

.contact-text {
    font-size: 35px; /* Розмір тексту для телефону/email */
    margin-bottom: 0; /* Прибираємо стандартний нижній margin <p> */
}

/* Form Styles */
.contact-form .contact-input {
  background-color: transparent;
  border: 1px solid white;
  border-radius: 0;
  padding: 16px 10px;
  font-size: 16px;
  color: white;
}

.contact-form .contact-input::placeholder {
    opacity: 1; /* ЗАСТОСОВАНО ВАШ СТИЛЬ: opacity */
    font-size: 16px; /* ЗАСТОСОВАНО ВАШ СТИЛЬ: font-size */
    color: white; /* ЗАСТОСОВАНО ВАШ СТИЛЬ: color */
}


.contact-form textarea.contact-input {
    resize: vertical; /* Дозволити змінювати висоту textarea по вертикалі */
}

.contact-submit-btn {
    background-color: white; /* Білий фон для кнопки */
    color: black; /* Чорний текст на кнопці */
    border: 4px solid white; /* Білий бордюр */
    border-radius: 0; /* Без заокруглень */
    padding: 16px 10px;
  	font-size: 16px;
    font-weight: 700;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Form message styles */
#formMessage {
    font-size: 1.1rem;
    font-weight: bold;
}
#formMessage.success {
    color: green;
}
#formMessage.error {
    color: red;
}

.credits {
	font-size: 16px;
  margin-bottom: 100px;
  line-height: 26px;
  color: white;
  text-align: center
}

.pt-6 {
	padding-top: 60px;
}

.pb-6 {
	padding-bottom: 60px;
}

.search-form {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.4s ease, opacity 0.4s ease;
    margin-left: 10px;
    flex-shrink: 0;
    white-space: nowrap; /* щоб кнопка не падала вниз */
}

.search-form.show {
    max-width: 260px; /* більше ніж 220, бо gap враховується */
    opacity: 1;
}

.search-form input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 14px;
}

.close-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: white;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    flex-shrink: 0;
}

.card-title a {
    color: #000 !important;
    text-decoration: none;
}

.card-title a:hover {
    color: #333;
    text-decoration: none;
}

.search-form-404 {
  max-width: 400px;
  width: 100%;
}

.search-form-404 input {
  padding: 8px 12px;
  font-size: 14px;
  min-width: 0;
  width: calc(100% - 110px);
}

.search-form-404 button {
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
}

.glitch-subtle {
  font-size: 200px;
  font-weight: 900;
  position: relative;
  color: black;
  width: fit-content;
}

.glitch-subtle::before {
  content: "404";
  position: absolute;
  left: 2px;
  top: 2px;
  color: red;
  z-index: -1;
}

.glitch-subtle::after {
  content: "404";
  position: absolute;
  left: -2px;
  top: -2px;
  color: blue;
  z-index: -1;
}

.share-buttons img {
  transition: transform 0.2s ease;
}

.share-buttons img:hover {
  transform: scale(1.1);
}

.post-navigation a {
  min-width: 160px;
  text-align: center;
}

.swiper .page-link:hover, .swiper .page-link:focus {
z-index: unset;
  color: unset;
  background-color: unset;
  outline: unset;
  box-shadow: unset;
  display: none;
}

@media (max-width: 1199px) {
  .contact-item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    margin-bottom: 2rem;
  }

  .contact-icon-wrapper {
    margin-right: 0 !important;
    margin-bottom: 0.5rem;
  }

  .contact-text {
    font-size: 1rem;
  }
}