/* style.css */

/* Базові стилі */
body {
    font-family: 'Unbounded', sans-serif;
    background-color: #1a1a1a; /* Змінено: Темний фон для всього body */
    color: #f0f0f0; /* Змінено: Світлий текст для темного фону */
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header styles */
header {
    background-color: #000; /* Змінено: Чисто чорний фон для хедера */
    color: #fff;
    padding: 20px 0;
    text-align: center;
    position: relative;
    margin-bottom: 30px;
}

.fullscreen-hero {
    height: 100vh; /* Робить його висотою усього екрану */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрує вміст по вертикалі */
    align-items: center; /* Центрує вміст по горизонталі */
    padding: 0 20px; /* Додайте внутрішній відступ для тексту */
    box-sizing: border-box; /* Враховує padding у висоті */
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header h1 {
    margin-bottom: 10px;
    font-size: 4em;
    color: #ffd700;
}

header p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

/* Language Switcher */
.language-switcher {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 1000;
}

.language-switcher button {
    padding: 8px 15px;
    border: none;
    background-color: #ffd700; /* Змінено: Золотисто-жовтий колір для кнопок перемикання мови */
    color: #1a1a1a; /* Змінено: Темний текст на жовтих кнопках */
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Unbounded', sans-serif;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.language-switcher button:hover {
    background-color: #e0b800; /* Змінено: Темніший жовтий при наведенні */
}

/* General button style (для CTA кнопок) */
.main-cta-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #ffd700; /* Змінено: Золотисто-жовтий колір для головних CTA кнопок */
    color: #1a1a1a; /* Змінено: Темний текст на жовтих кнопках */
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.2em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 20px;
}

.main-cta-button:hover {
    background-color: #e0b800; /* Змінено: Темніший жовтий при наведенні */
    transform: translateY(-2px);
}

.roadmap-cta-container {
    text-align: center; /* Центруємо кнопку всередині контейнера */
    margin-top: 50px; /* Додаємо відступ зверху, щоб вона з'явилася після прокрутки */
    margin-bottom: 50px; /* Відступ знизу */
}
/* Секції */
section {
    padding: 40px 20px;
    margin-bottom: 20px;
    background-color: #2a2a2a; /* Змінено: Темніший фон для секцій */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Змінено: Темніша тінь */
}

section h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #ffd700; /* Змінено: Жовтий колір для заголовків секцій */
    border-bottom: 2px solid #555; /* Змінено: Темніша лінія */
    padding-bottom: 15px;
}

section p {
    margin-bottom: 15px;
    color: #f0f0f0; /* Забезпечити, що текст видно на темному фоні */
}

.highlight {
    color: #ffd700; /* Змінено: Жовтий для виділеного тексту */
    font-weight: bold;
}

/* Секція героїв */
/* Заголовок секції героїв */
#heroes h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #ffd700;
    border-bottom: 2px solid #555;
    padding-bottom: 15px;
}

/* Контейнер сітки для карток героїв */
#heroes .image-container { /* Використовуємо ваш існуючий клас .image-container */
    display: grid;
    /* Змінено: На великих екранах (за замовчуванням) 5 колонок */
    grid-template-columns: repeat(5, 1fr);
    gap: 20px; /* Відстань між картками */
    max-width: 1400px; /* Обмежуємо максимальну ширину всієї сітки для 5 колонок */
    margin: 0 auto; /* Центруємо сітку по горизонталі */
    padding: 0 20px; /* Додайте невеликий відступ від країв */
    box-sizing: border-box; /* Враховуємо padding в загальній ширині */
}

/* Кожна картка героя всередині контейнера */
#heroes .image-container > div {
    background-color: #3a3a3a; /* Темніший фон для карток героїв */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    text-align: center;

    /* Властивості Flexbox для вирівнювання вмісту всередині картки */
    display: flex;
    flex-direction: column; /* Елементи будуть розташовані вертикально */
    justify-content: space-between; /* Розподіляє простір, штовхаючи кнопку донизу */
}

.hero-image {
    max-width: 100%;
    height: auto; /* Зберігає пропорції зображення */
    border-radius: 4px;
    margin-bottom: 15px;
}

.hero-image.small {
    max-width: 150px;
    display: block;
    margin: 0 auto 15px auto;
}

.image-description {
    font-size: 0.95em;
    color: #ccc;
    margin-bottom: 10px;
    flex-grow: 1; /* Дозволяє опису займати стільки місця, скільки потрібно, штовхаючи кнопку вниз */
}

/* Кнопки "Дізнатися більше про..." */
.hero-story-link {
    display: block; /* Зробив block, щоб max-width і margin auto працювали надійно */
    background-color: #ffd700; /* Жовтий */
    color: #1a1a1a; /* Темний текст */
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-size: 0.95em;
    font-weight: bold;

    /* Важливо для вирівнювання та центрування кнопки всередині картки */
    margin: 15px auto 0 auto; /* Відступ зверху, центрування по горизонталі */
    max-width: 200px; /* Обмежуємо максимальну ширину кнопки */
    width: 100%; /* Займає всю доступну ширину до max-width */
    box-sizing: border-box; /* Враховує padding у ширині */
}

.hero-story-link:hover {
    background-color: #e0b800;
    transform: translateY(-2px);
}

/* Roadmap specific styles */
.roadmap-section {
    margin-bottom: 40px;
    padding: 20px;
    background-color: #2a2a2a; /* Змінено: Темніший фон для секцій дорожньої карти */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.roadmap-section h2 {
    border-bottom: 2px solid #555; /* Змінено: Темніша лінія */
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #ffd700; /* Змінено: Жовтий для заголовків секцій */
    text-align: left;
}

.roadmap-item {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    border: 1px solid #444; /* Змінено: Темніша рамка */
    padding: 15px;
    border-radius: 6px;
    background-color: #333; /* Змінено: Ще темніший фон для елементів дорожньої карти */
}

.roadmap-item.planned {
    opacity: 0.7;
}

.roadmap-image {
    flex: 0 0 200px;
    margin-right: 20px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.roadmap-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.roadmap-content {
    flex: 1;
    color: #f0f0f0; /* Забезпечити, що текст видно */
}

.roadmap-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #ffd700; /* Змінено: Жовтий для підзаголовків елементів дорожньої карти */
}

.features-list {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 15px;
}

.features-list li {
    margin-bottom: 5px;
    color: #f0f0f0; /* Забезпечити, що текст видно */
}

.status {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9em;
    text-transform: uppercase;
}

.status.in-progress {
    background-color: #2ecc71; /* Залишено зеленим, якщо підходить */
    color: #fff;
}

.status.planned {
    background-color: #f39c12; /* Залишено помаранчевим, якщо підходить */
    color: #fff;
}

.roadmap-updates {
    padding: 20px;
    background-color: #2a2a2a; /* Змінено: Темніший фон */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 30px;
}

.roadmap-updates h2 {
    border-bottom: 2px solid #555; /* Змінено: Темніша лінія */
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #ffd700; /* Змінено: Жовтий */
}

.back-to-main {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

.back-to-main .main-cta-button {
    padding: 12px 25px;
    font-size: 1.1em;
}
/* General Vacancies Page Styles */
.vacancies-page {
    padding: 60px 20px; /* Додати відступи */
    max-width: 900px;  /* Обмежити ширину для читабельності */
    margin: 0 auto;    /* Центрувати на сторінці */
    color: #f0f0f0;    /* Колір тексту, якщо фон темний */
    background-color: #1a1a1a; /* Темний фон для сторінки */
    line-height: 1.6;
}

.vacancies-section h1,
.vacancies-section h2 {
    color: #ffd700; /* Жовті заголовки */
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5em;
}

.vacancies-section h2 {
    font-size: 2em;
    margin-top: 50px;
}

.vacancies-section p {
    margin-bottom: 20px;
    font-size: 1.1em;
}

.role-list {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Відступи між ролями */
    margin-top: 40px;
    margin-bottom: 40px;
}

.role-item {
    background-color: #2a2a2a; /* Темніший фон для блоку ролі */
    padding: 25px;
    border-radius: 10px;
    border-left: 5px solid #ffd700; /* Жовта смужка зліва */
}

.role-item h3 {
    color: #ffd700; /* Жовтий заголовок ролі */
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5em;
}

.role-item p {
    margin-bottom: 0; /* Прибрати зайвий відступ */
    font-size: 1em;
}

.ukraine-moto {
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 40px;
    color: #ffd700; /* Жовтий колір для гасла */
}

/* Адаптація для мобільних пристроїв */
@media (max-width: 768px) {
    .vacancies-page {
        padding: 40px 15px;
    }

    .vacancies-section h1 {
        font-size: 1.8em;
    }

    .vacancies-section h2 {
        font-size: 1.5em;
    }

    .role-item {
        padding: 20px;
    }
}
/* Секція CTA (Contact) */
.cta {
    text-align: center;
    background-color: #222; /* Змінено: Темніший фон для CTA */
    padding: 50px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cta h2 {
    color: #ffd700; /* Змінено: Жовтий колір заголовка CTA */
    border-bottom: none;
    padding-bottom: 0;
}

.cta p {
    font-size: 1.1em;
    margin-bottom: 25px;
    color: #f0f0f0; /* Змінено: Світлий текст */
}

.email-link {
    color: #ffd700; /* Змінено: Жовтий для посилання на email */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
    transition: color 0.3s ease;
}

.email-link:hover {
    color: #e0b800; /* Змінено: Темніший жовтий при наведенні */
}

/* Footer styles */
footer {
    background-color: #000; /* Змінено: Чисто чорний футер */
    color: #fff;
    text-align: center;
    padding: 15px 0;
    width: 100%;
    margin-top: 50px;
}

/* Медіа-запити для адаптивності */
@media (max-width: 1440px) { /* Якщо екран менше 1440px, переходимо на 4 колонки */
    #heroes .image-container {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1200px; /* Зменшуємо max-width для 4 колонок */
    }
}

@media (max-width: 1024px) { /* Якщо екран менше 1024px, переходимо на 3 колонки */
    #heroes .image-container {
        grid-template-columns: repeat(3, 1fr);
        max-width: 900px; /* Зменшуємо max-width для 3 колонок */
    }
}
@media (max-width: 768px) {
    /* Цей блок тепер також включає #heroes .image-container */
    .language-switcher {
        position: absolute;
        top: 10px;;
        right: 10px;   
     }
    .header-content {
        padding-top: 60px;
    }

    .roadmap-item {
        flex-direction: column;
        text-align: center;
    }

    .roadmap-image {
        margin-right: 0;
        margin-bottom: 20px;
        max-width: 100%;
    }

    /* Змінено: Якщо екран менше 768px (планшети), 2 колонки */
    #heroes .image-container {
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px; /* Зменшуємо max-width для 2 колонок */
    }
}

@media (max-width: 480px) { /* Якщо екран менше 480px (мобільні), 1 колонка */
    #heroes .image-container {
        grid-template-columns: repeat(1, 1fr);
        max-width: 300px; /* Зменшуємо max-width для 1 колонки */
    }
}