body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

h1, h2 {
    color: #333;
}

footer {
    border-top: 1px solid #ddd;
}

.navbar-brand img {
    margin-right: 10px; /* Відступ між логотипом і текстом */
}

.hero-section {
    position: relative;
}


/*4*/
.hero-section {
    color: #ffffff; /* Білий текст */
    padding: 3rem 0; /* Відступи зверху і знизу */
}

.hero-section h1 {
    font-size: 2.5rem;
    line-height: 1.3;
}

.hero-section p {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.hero-section .btn {
    font-size: 1rem;
}

.hero-section img {
    max-width: 90%; /* Робить ілюстрацію адаптивною */
    height: auto; /* Зберігає пропорції */
}


/*5*/

.hero-section p {
    color: #212529; /* Темний текст підзаголовку */
}

.hero-section .btn-outline-primary {
    border-color: #007bff; /* Колір рамки кнопки */
}

.hero-section .btn-outline-primary:hover {
    background-color: #007bff; /* Колір фону при наведенні */
    color: #ffffff; /* Білий текст при наведенні */
}


/* section 2 - about */
.about-section {
    background-color: #f8f9fa;
}

.about-section h2 {
    font-size: 2.5rem;
    color: #333;
}

.about-section ul {
    padding-left: 0; /* Видалити стандартні відступи списків */
}

.about-section li {
    font-size: 1.1rem;
    line-height: 1.8;
}

.about-section i {
    margin-right: 10px; /* Відступ іконок від тексту */
}

.row.g-3 > [class^="col-"] {
    margin-right: 10px; /* Мінімальний відступ між колонками */
}




.about-section ul {
    padding-left: 0; /* Прибирає стандартний відступ списку */
    margin-left: 0; /* Прибирає відступи колонки */
}

.about-section li {
    line-height: 1.8; /* Інтервал між рядками */
    padding-left: 0; /* Забезпечує вирівнювання нових рядків */
}

.about-section h4 {
    margin-bottom: 1rem;
    padding-left: 0; /* Вирівнює заголовок по тексту списку */
}


/* modals */
.modal-body img {
    max-height: 80vh; /* Максимальна висота, щоб не виходити за межі екрану */
    margin: 0 auto; /* Центрування */
}

.modal-header {
    background-color: #333; /* Темний фон для контрасту */
    color: #fff; /* Білий текст */
}

.modal-title {
    color: #fff; /* Білий текст для заголовка */
}


/* buttons */

.btn-primary {
    background-color: #ee9e61 !important;
    border-color: #ee9e61 !important;
    color: #fff !important; /* Білий текст */
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #d88d55 !important; /* Трохи темніший відтінок */
    border-color: #d88d55 !important;
}


.btn-outline-primary {
    color: #ee9e61 !important;
    border-color: #ee9e61 !important;
}

.btn-outline-primary:hover {
    background-color: #ee9e61 !important;
    color: #fff !important; /* Білий текст на помаранчевому фоні */
    border-color: #ee9e61 !important;
}

/* hint color in modal windows */
.modal-body .mb-3 {
    color: #ee9e61 !important;
}




/*two column About*/

/*new 2 columns*/

/* Загальний стиль (залишено без змін) */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

h1, h2 {
    color: #333;
}

footer {
    border-top: 1px solid #ddd;
}

/* Стилізація двоколонного розділу */
.two-column-section {
    padding: 50px 20px;
    text-align: center;
    background-color: #f8f9fa; /* Такий самий фон, як у "about-section" */
}

.section-title {
    font-size: 2.5rem; /* Відповідає "about-section h2" */
    margin-bottom: 20px;
    color: #333;
}


.section-description {
    font-size: 1.25rem;
    margin: 0 auto 40px; /* Відцентровує текст і додає відступ знизу */
    color: #555;
    line-height: 1.8; /* Збільшує міжрядковий інтервал для покращення читабельності */
    max-width: 800px; /* Обмежує ширину тексту */
    text-align: center; /* Центрує текст */
}


/* Контейнер для колонок */
.columns-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap; /* Для адаптивності */
}

/* Колонки */
.column {
    flex: 1;
    min-width: 300px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
    border: 1px solid #ddd; /* Легка рамка для узгодження з іншими секціями */
}

/* Заголовки колонок */
.column-title {
    font-size: 1.75rem; /* Трохи менший, ніж "section-title" */
    margin-bottom: 20px;
    color: #333;
    line-height: 1.3;
}

/* Елементи всередині колонки */
.item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px; /* Узгоджено з іншими розділами */
}

/* Іконка (гармонія з кнопками) */
.icon {
    width: 50px;
    height: 50px;
    min-width: 50px; /* Запобігає стисканню */
    min-height: 50px;
    border-radius: 50%;
    background-color: #ee9e61; /* Відповідає кольору кнопок */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.25rem;
    margin-right: 15px;
    fill: white;
}

.icon img {
    filter: invert(100%) brightness(200%);
    width: 24px;
    height: 24px;
}

/* Контент елементу */
.content {
    flex-grow: 1;
}

.item-title {
    font-size: 1.1rem; /* Трохи менший розмір */
    font-weight: 500; /* Зменшена жирність */
    margin-bottom: 5px; /* Легкий відступ знизу */
    color: #444; /* Темно-сірий, менш контрастний */
}

.item-description {
    font-size: 0.95rem; /* Зберігаємо розмір для зручності читання */
    color: #666; /* Світліший відтінок сірого */
    line-height: 1.6; /* Оптимальний міжрядковий інтервал */
}



/*demo video*/
.demo-video-section {
    padding: 50px 20px;
    text-align: center;
    background-color: #f8f9fa;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
}

.section-description {
    font-size: 1.25rem;
    margin-bottom: 40px;
    color: #555;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    justify-items: center;
}

.video-item {
    display: flex; /* Активує Flexbox для батьківського елемента */
    justify-content: center; /* Центрує дочірні елементи горизонтально */
    align-items: center; /* Центрує дочірні елементи вертикально (за потреби) */
    flex-direction: column; /* Розташовує елементи вертикально */
    text-align: center; /* Вирівнює текстові елементи в центрі */
}

.phone-frame {
    position: relative;
    width: 300px;
    height: 700px;
    /*background: url('../images/frame_phone_trimmed_1000_2.png') no-repeat center center / contain;*/
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
}

.phone-frame video {
    width: 85%; /* Вписується всередину рамки */
    height: 85%;
    object-fit: cover;
    border-radius: 16px;
    z-index: 1; /* Відео не перекриває фон */
}


/*.phone-frame {*/
/*    position: relative;*/
/*    width: 300px; !* Ширина рамки *!*/
/*    height: 600px; !* Висота рамки *!*/
/*    background: url('../images/frame_phone_trimmed_1000.png') no-repeat center center;*/
/*    background-size: contain; !* Масштаб рамки відповідно до розміру *!*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    padding: 2px; !* Мінімальний відступ всередині рамки *!*/
/*    box-sizing: border-box; !* Враховує padding у розмірах елемента *!*/
/*}*/

/*.phone-frame video {*/
/*    width: 100%; !* Вписується у внутрішню область рамки *!*/
/*    height: 100%;*/
/*    object-fit: contain; !* Масштабує відео без спотворення *!*/
/*    border-radius: 8px; !* Трохи закруглені кути відео *!*/
/*}*/


.video-title {
    font-size: 1.2rem;
    margin: 15px 0 5px;
    color: #333;
}

.video-description {
    font-size: 1rem;
    color: #555;
}


/*Section - Our process*/

.process-section {
    padding: 50px 20px;
    text-align: center;
    background-color: #f8f9fa;
}

.process-steps {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.step {
    display: flex;
    align-items: center; /* Вирівнює всі елементи по верхньому краю */
    gap: 20px;
    width: 100%;
    max-width: 600px;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    min-height: 120px; /* Встановлює однакову висоту */
}

/* Фіксований розмір іконки */
.step-icon {
    font-size: 2rem;
    min-width: 50px;
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Фіксований розмір заголовка */
.step-title {
    font-size: 1.1rem;
    font-weight: bold;
    width: 200px; /* Фіксована ширина заголовків */
    text-align: left;
}

/* Фіксований розмір опису */
.step-description {
    font-size: 1rem;
    color: #555;
    flex-grow: 1; /* Заповнює доступний простір */
    max-width: 300px; /* Обмеження, щоб не виходило за межі */
}

.process-section .btn-primary {
    display: inline-block; /* Вирівнювання кнопки */
    margin-top: 30px; /* Відступ зверху */
    padding: 12px 24px; /* Комфортний розмір кнопки */
    font-size: 1.1rem; /* Чіткий текст */
    text-align: center; /* Вирівнювання тексту */
}


@media (max-width: 768px) {
    .step {
        flex-direction: column; /* Перемикає в стовпчик на мобільних */
        text-align: center; /* Вирівнює весь контент */
    }

    .step-description {
        max-width: 90%; /* Зменшує ширину опису */
    }

    .step-title {
        width: auto; /* Дозволяє заголовкам змінювати ширину */
    }
}

/*RTL*/
.rtl {
    direction: rtl;
    text-align: right;
}