@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap'); /* Імпорт шрифту Inter */

body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; /* Приховуємо горизонтальну прокрутку */
}

.container {
    width: 100%; /* Змінено з 80% на 100%, щоб запобігти білим полям */
    margin: 0 auto;
    padding: 20px; /* Додано відступи для мобільних пристроїв */
    box-sizing: border-box; /* Включає padding в ширину та висоту */
}

header, section {
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    flex-direction: column; 
    text-align: left;
    padding: 100px 20px; /* Відступи з верхньої та лівої сторони */
    box-sizing: border-box; /* Включає padding в ширину та висоту */
}

/* Основні стилі для хедера */
.hero {
    background-color: #1B2C3B;
    position: relative;
    width: 100vw; /* Забезпечує повну ширину вьюпорту */
    overflow: hidden; /* Запобігає виходу з області видимості */
    display: flex;
    justify-content: center;
    align-items: center;
    /*min-height: 100vh; /* Мінімальна висота для повноекранного вигляду */
}

.hero-content {
    position: relative;
    width: 100%; /* Переконайтеся, що контейнер займає повну ширину */
    height: auto;  
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-image img, .hero-logo {
    max-width: 100%;
    height: auto;
}

.header-image img {
    width: 100%;
    height: auto;
    margin-top: -1vw;
}

.hero-logo {
    max-width: 50%;
}

.header-image {
    transform: scale(1.15); /* Збільшуємо зображення */
}

.center-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-logo {
    transform: scale(1.5); /* Збільшуємо розмір логотипу */
    margin-bottom: 4vw; /* Збільшуємо відступ під логотипом */
}

.hero-text {
    color: #FFFFFF;
    font-family: 'Inter', sans-serif; /* Використовуємо шрифт Inter */
    font-weight: 400; /* Встановлюємо вагу шрифту */
    font-size: 2.5vw; /* Встановлюємо розмір шрифту для широких екранів */
    text-align: left; /* Вирівнювання тексту по лівій стороні */
}

@media (max-width: 560px) {
    .header-image {
        transform: scale(1.2);
    }

    .header-image img {
        margin-top: -6.5vh !important;
    }
}

/* Медіа-запити для мобільних пристроїв */
@media (max-width: 767px) {
    .hero-text {
        text-align: left; /* Вирівнювання тексту по лівій стороні */
        font-size: 3vw !important;
        max-width: 100% !important;
    }
    .hero-content {
        padding-bottom: 0px;
    }
    .header-image img {
        margin-top: -10vw;
    }
    .hero {
        height: auto;
        padding-bottom: 2em;
    }

    .hero-logo {
        transform: scale(2);
        margin-bottom: 1vw;
    }
}

@media (min-width: 768px) and (max-width: 880px) {
    .hero-content {
        padding-bottom: 0px;
    }
    .header-image img {
        margin-top: -10vw;
    }
    .hero {
        height: auto;
        padding-bottom: 2em;
    }
}

/* Додаткові медіа-запити для планшетів */
@media (min-width: 881px) and (max-width: 1024px) {
    .hero-content {
        padding-bottom: 0px;
    }
    .header-image img {
        margin-top: -5vw;
    }
}

/* Додаткові медіа-запити для планшетів */
@media (min-width: 1025px) and (max-width: 1366px) {
    .hero-content {
        padding-bottom: 0px;
    }
    .header-image img {
        margin-top: -5vw;
    }
}

/* Додаткові медіа-запити для планшетів */
@media (min-width: 1367px) and (max-width: 1640px) {
    .hero-content {
        padding-bottom: 10px;
    }
    .header-image img {
        margin-top: -2vw;
    }
}

/* Медіа-запити для екранів меншої ширини */
@media (max-width: 1920px) {
    .hero {
        height: auto; /* Висота хедера адаптується до контенту */
    }

    /* .hero-logo {
        width: 20vw;
        max-width: 150px;
    } */

    .hero-text {
        font-size: 2.5vw;  /* Пропорційний розмір тексту для великих екранів */
        max-width: 80%;  /* Максимальна ширина тексту */
    }
}

/* Стилі для секційних заголовків */
.section-title {
    font-family: 'Inter', sans-serif; /* Використовуємо шрифт Inter */
    font-weight: 400; /* Встановлюємо вагу шрифту */
    font-size: 6vw; /* Розмір шрифту для широких екранів */
    margin-left: 0; /* Вирівнювання по лівій стороні */
}

.language-switcher {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
}

.language-switcher select {
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 25px;
    cursor: pointer;
    background-color: #1B2C3B; /* Колір фону для схожості з хедером */
    color: white; /* Колір тексту */
    margin-right: 20px; /* Відступ з правого боку */
}

.language-switcher option {
    background-color: #1B2C3B; /* Колір фону опцій */
    color: white; /* Колір тексту опцій */
}

/* Загальні стилі для секції "expertise" */
.expertise {
    background-color: #0C191C; /* Встановлюємо новий колір фону */
    background-image: url('img/group.svg'); /* Шлях до зображення */
    background-size: cover; /* Забезпечує, щоб зображення покривало всю секцію */
    background-position: center; /* Центрування фонового зображення */
    background-attachment: fixed; /* Робить паралакс-ефект */
    color: #D8E4ED; /* Колір тексту за замовчуванням */
    width: 100vw; /* Забезпечує повну ширину вьюпорту */
    padding: 20px; /* Додаткові відступи зверху і знизу */
}

/* Заголовок в секції "expertise" */
.expertise .section-title {
    color: #EF4223; /* Колір заголовку */
}

.expertise .text {
    margin: 0 5%; /* Вирівнювання полів для збереження тексту всередині секції */
}

/* Текст у секції "expertise" */
.expertise .text p {
    font-family: 'Inter', sans-serif; /* Шрифт Inter */
    font-weight: 400; /* Вага шрифту */
    font-size: 2.344vw; /* Пропорційний розмір шрифту для широких екранів */
    margin: 20px 0; /* Відступи між абзацами */
}

/* Додаємо медіа-запити для менших розмірів екрану */
@media (max-width: 767px) {
    .section-title {
        font-size: 8vw; /* Масштабування для мобільних пристроїв */
        text-align: center; /* Вирівнювання тексту по центру */
    }

    .expertise .text p {
        font-size: 5vw; /* Масштабування для мобільних пристроїв */
        margin: 20px 0; /* Відступи між абзацами для мобільних пристроїв */
    }
}

/* Додаткові медіа-запити для планшетів */
@media (min-width: 768px) and (max-width: 1024px) {

    .section-title {
        font-size: 6vw; /* Масштабування для планшетів */
        text-align: center; /* Вирівнювання тексту по центру */
    }

    .expertise .text p {
        font-size: 3.5vw; /* Масштабування для планшетів */
        margin: 20px 0; /* Відступи між абзацами для планшетів */
    }
}

/* Загальні стилі для секції "About us" */
.about-us {
    background-color: #EF4223;
    color: white;
    width: 100vw; /* Забезпечує повну ширину вьюпорту */
    padding: 20px; /* Додатково додаємо відступи */
}

.about-us .text {
    margin: 0 5%; /* Вирівнювання полів для збереження тексту всередині секції */
}

.about-us .text p {
    font-family: 'Inter', sans-serif; /* Шрифт Inter */
    font-weight: 400; /* Вага шрифту */
    margin-bottom: 20px; /* Відступи між абзацами */
}

/* Перший текст у секції "About us" */
.about-us .text p:first-of-type {
    font-size: 4.427vw; /* Пропорційний розмір шрифту для широких екранів */
}

/* Наступний текст у секції "About us" */
.about-us .text p:nth-of-type(2),
.about-us .text p:nth-of-type(3) {
    font-size: 2.344vw; /* Пропорційний розмір шрифту для широких екранів */
}

/* Додаємо резервні значення для випадків, коли ширина екрану значно менша або більша */
@media (max-width: 767px) {
    .about-us .text p:first-of-type {
        font-size: 8.5vw; /* Забезпечує адекватне масштабування для мобільних пристроїв */
    }

    .about-us .text p:nth-of-type(2),
    .about-us .text p:nth-of-type(3) {
        font-size: 6vw; /* Забезпечує адекватне масштабування для мобільних пристроїв */
    }
}

/* Можливо додавати додаткові медіа-запити для інших розмірів екрану */
@media (min-width: 768px) and (max-width: 1024px) {
    .about-us .text p:first-of-type {
        font-size: 6vw; /* Забезпечує адекватне масштабування для планшетів */
    }

    .about-us .text p:nth-of-type(2),
    .about-us .text p:nth-of-type(3) {
        font-size: 4vw; /* Забезпечує адекватне масштабування для планшетів */
    }
}

.partners {
    display: none; /* Приховуємо секцію "partners" */
    background-color: #1B2C3B;
    color: white;
    width: 100vw; /* Забезпечує повну ширину вьюпорту */
}

/* Стилі для секції "contact-form" */
.contact-form {
    background-color: #1A2F36; /* Зміна фону секції */
    background-image: url('img/contact-form-background.svg'); /* Шлях до вашого зображення */
    background-size: cover; /* Забезпечує, щоб зображення покривало всю секцію */
    background-position: center; /* Центрування фонового зображення */
    background-attachment: fixed; /* Робить паралакс-ефект, якщо необхідний */
    display: flex;
    justify-content: space-between;
    width: 100vw; /* Забезпечує повну ширину вьюпорту */
    padding: 20px; /* Відступи */
    flex-direction: column; /* Вертикальне розташування */
    min-height: 100vh; /* Мінімальна висота для повноекранного вигляду */
}

.contact-form .container {
    flex-direction: row;
    display: flex;
}

.contact-form-left,
.contact-form-right {
    width: 100%; /* Ширина 100% */
    padding: 20px;
    box-sizing: border-box;
    color: #DAE4EC; /* Колір тексту */
    text-align: right; /* Вирівнювання тексту по правій стороні */
}

.contact-form h2 {
    font-family: 'Inter', sans-serif; /* Шрифт Inter */
    font-weight: 400; /* Вага шрифту */
    font-size: 3.646vw; /* Розмір шрифту для широких екранів */
    margin-bottom: 10px; /* Відступ між заголовком і наступним елементом */
    width: 85%;
    float: right;
    margin-top: 0.4em;
}

.contact-form p {
    font-family: 'Inter', sans-serif; /* Шрифт Inter */
    font-weight: 400; /* Вага шрифту */
    font-size: 3.5vw; /* Розмір шрифту для широких екранів */
    margin-bottom: 10px; /* Відступ між абзацами */
}

.contact-form-right {
    text-align: left;    
}

.contact-form-right p {
    font-size: 1.875vw;
    width: 58%;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    box-sizing: border-box; /* Включає padding в ширину та висоту */
    font-family: 'Inter', sans-serif; /* Шрифт Inter */
    font-size: 1.875vw; /* Розмір шрифту */
    color: #1A2F36; /* Колір тексту */
    background-color: #DAE4EC; /* Прозорий фон для інпутів */
    border: 1px solid #DAE4EC; /* Колір рамки інпутів */
}

.contact-form textarea {
    resize: none; /* Запобігає ручному збільшенню користувачем */
    overflow: hidden; /* Приховує смуги прокрутки */
    min-height: 50px; /* Мінімальна висота для текстового поля */
    /* max-height: 300px; Максимальна висота текстового поля */
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #A1A1A1; /* Колір для placeholder тексту */
}

.contact-form button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #DAE4EC; /* Тло кнопки */
    border: 1px solid #DAE4EC; /* Рамка кнопки */
    color: #1A2F36; /* Колір тексту */
    cursor: pointer;
    font-family: 'Inter', sans-serif; /* Шрифт Inter */
    font-size: 3.5vw; /* Розмір шрифту */
}

.contact-form button:hover {
    background-color: #1A2F36; /* Зміна кольору кнопки при наведенні */
    color: #DAE4EC; /* Колір тексту при наведенні */
    border: 1px solid #DAE4EC; /* Рамка кнопки при наведенні */
}

#contact-form {
    text-align: center;
}

/* Додаємо медіа-запити для змінної ширини контейнера */
@media (max-width: 767px) {
    .contact-form h2 {
        font-size: 8vw; /* Масштабування для мобільних пристроїв */
    }

    .contact-form p,
    .contact-form input,
    .contact-form textarea,
    .contact-form button {
        font-size: 5vw; /* Масштабування для мобільних пристроїв */
    }

    .contact-form-left, .contact-form-right {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .contact-form h2 {
        font-size: 6vw; /* Масштабування для планшетів */
    }

    .contact-form p,
    .contact-form input,
    .contact-form textarea,
    .contact-form button {
        font-size: 4vw; /* Масштабування для планшетів */
    }
}
@media (max-width: 1080px) {
    .contact-form .container {
        display: block;
    }
    .contact-form-right {
        display: flow-root;
    }

    .contact-form h2 {
        width: 100%;
    }

    .contact-form-right p {
        width: 100%;
        text-align: right;
    }
}

/* Загальні стилі для футера */
.footer {
    background-color: #000000;
    color: white;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw; /* Забезпечує повну ширину вьюпорту */
    padding-top: 3em;
}

.footer-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2em;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    line-height: 1.6; /* Відступ між рядками */
    margin-bottom: 3em; /* Відступ знизу */
}

/* Оновлені стилі для класу .footer-contact */
.footer-contact p, /* Додаємо селектор для p у .footer-contact */
.footer-contact a {
    font-family: 'Inter', sans-serif;  /* Шрифт Inter */
    font-weight: 400;  /* Вага шрифту */
    font-size: 1.927vw;  /* Пропорційний розмір шрифту для широких екранів */
    margin: 0;  /* Прибираємо зовнішні відступи */
}

.footer-contact a {
    color: white;
    text-decoration: none;
}

/* Стилі для класу .footer-bottom */
.footer-bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;  /* Шрифт Inter */
    font-weight: 400;  /* Вага шрифту */
    font-size: 1.094vw;  /* Пропорційний розмір шрифту для широких екранів */
    margin: 0;
}

.footer-left {
    text-align: left;
    margin: 0;
}

.footer-right {
    text-align: right;
    margin: 0 20px;
}

.footer-right a {
    color: white;
    text-decoration: none;
}

/* Медіа-запити для адаптивного дизайну в футері */
@media (max-width: 767px) {
    .footer-contact p, 
    .footer-contact a {
        font-size: 4.5vw; /* Збільшено пропорційно */
    }

    .footer-bottom {
        font-size: 3.5vw; /* Збільшено пропорційно */
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .footer-contact p, 
    .footer-contact a {
        font-size: 4vw; /* Масштабування для планшетів */
    }

    .footer-bottom {
        font-size: 2.5vw; /* Масштабування для планшетів */
    }
}

/* Для більших розмірів екранів (більше 1920px), піклуючись про крайні значення */
@media (min-width: 1921px) {
    .footer-contact {
        font-size: 37px; /* Фіксований розмір шрифту для екранів більше 1920px */
    }

    .footer-bottom {
        font-size: 21px; /* Фіксований розмір шрифту для екранів більше 1920px */
    }
}

/* Popup styles */
.popup {
    display: none;
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.popup-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    text-align: center;
}

.popup-content p {
    font-family: 'Inter', sans-serif; /* Використовуємо шрифт Inter */
    font-weight: 400; /* Встановлюємо вагу шрифту */
    font-size: 2.344vw; /* Пропорційний розмір шрифту для широких екранів */
    margin: 0; /* Прибираємо зовнішні відступи */
    color: #333; /* Колір тексту */
}

.popup-content p.submitted {
    color: #155724; /* Темно-зелений текст для успішного повідомлення */
}

.popup-content p.error {
    color: #721c24; /* Темно-червоний текст для помилкового повідомлення */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Стилі для відображення попапу після успішного відправлення форми */
.popup.submitted .popup-content {
    background-color: #d4edda; /* Світло-зелений фон для успішного повідомлення */
    border-color: #c3e6cb; /* Світло-зелена рамка */
}

/* Стилі для відображення попапу після помилки відправлення */
.popup.submitted.error .popup-content {
    background-color: #f8d7da; /* Світло-червоний фон для помилкового повідомлення */
    border-color: #f5c6cb; /* Світло-червона рамка */
}

/* Медіа-запити для масштабу на менших екранах */
@media (max-width: 767px) {
    .popup-content p {
        font-size: 6vw; /* Масштабування для мобільних пристроїв */
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .popup-content p {
        font-size: 4vw; /* Масштабування для планшетів */
    }
}

/* Media Queries for Landscape Mode */
/* @media (orientation: landscape) {
    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .header-image img {
        width: 100%;
        height: auto;
        margin-top: -1%;
    }

    .hero-logo {
        max-width: 50%;
    }
} */

/* Додаємо основні медіа-запити для змінного шрифту */
@media (min-width: 1920px) {


    .section-title {
        font-size: 64px;
    }
}

/* Використаймо vw для пропорційного масштабування */
@media (max-width: 1919px) {


    .section-title {
        font-size: 3.33vw; /* Пропорційно до 64px на 1920px (64px / 1920px * 100vw) */
    }
}

/* Використання min-height замість height для секцій для динамічної висоти */
header, section {
    min-height: auto;  /* Замість height: 100vh; */
    padding: 60px 20px; /* Вистачить менше padding для загального вигляду */
}

/* Видаляємо висоту для певних елементів */
header, section {
    min-height: auto;
}

/* Медіа-запити для адаптивності тексту в секціях */
@media (max-width: 767px) {
    .section-title {
        font-size: 8vw;
        text-align: left;
        margin-bottom: 10px;
    }
    
    .section .text p {
        font-size: 5vw;
        margin: 10px 0;
    }

    .about-us .text,
    .expertise .text {
        margin: 0;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .section-title {
        font-size: 6vw;
        text-align: left;
        margin-bottom: 10px;
    }

    .section .text p {
        font-size: 4vw;
        margin: 10px 0;
    }

    .about-us .text,
    .expertise .text {
        margin: 0;
    }
}