html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    padding-top: 80px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* 1. Базові налаштування навбару */
.navbar {
    position: fixed; /* Фіксуємо на екрані */
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Ваша фіксована висота */
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    z-index: 1050; /* Вище за всі елементи сторінки */
    display: flex;
    align-items: center;
}

    /* Додамо м'яку тінь для об'єму */
    .navbar:hover {
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
    }

.nav-container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
}

/* 2. Логотип (завжди зліва) */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #000;
    font-weight: 700;
    flex-shrink: 0;
    z-index: 1001;
}

/* 3. Центрування меню через Bootstrap */
.navbar-collapse {
    /* Це змушує блок займати весь простір, що залишився */
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 32px;
    margin: 0 auto !important; /* Ключове: примусове центрування списку */
    padding: 0;
}

/* 4. Права частина */
.nav-right {
    flex-shrink: 0;
}

/* 5. Стилі посилань та анімація */
.nav-links a, .contact-link {
    text-decoration: none !important;
    color: #212121 !important;
    font-size: clamp(14px, 1.5vw, 18px); /* Зафіксуємо для макета */
    font-weight: 500;
    position: relative;
    padding-bottom: 4px;
    display: inline-block;
}

    .nav-links a::after, .contact-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -2px;
        left: 0; /* Змінимо на розширення зліва направо */
        background: linear-gradient(90deg, #1e90ff, #2ed573); /* Кольори як у логотипу */
        transition: width 0.3s ease;
        transform: none; /* Прибираємо translateX */
    }

    .nav-links a:hover::after, .contact-link:hover::after {
        width: 100%;
    }

/* 6. Адаптивність (Мобільне меню) */
@media (max-width: 991.98px) {
    body {
        padding-top: 80px; /* Наприклад, якщо логотип на мобільних менший */
    }

    .nav-container {
        height: 80px;
        justify-content: space-between;
    }

    .navbar-collapse {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 20px;
        box-shadow: 0 10px 15px rgba(0,0,0,0.05);
        border-top: 1px solid #f0f0f0;
        flex-direction: column;
        align-items: center;
    }

    .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px !important;
    }

    .nav-right {
        width: 100%;
        text-align: center;
    }

}

/* 7. Іконка гамбургера */
.custom-toggler {
    border: none;
    padding: 0;
    outline: none !important;
    box-shadow: none !important;
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 16px;
}

    .hamburger-icon span {
        height: 2px;
        width: 100%;
        background-color: #333;
        transition: 0.3s;
    }

/* Анімація хрестика */
.custom-toggler:not(.collapsed) span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.custom-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
}

.custom-toggler:not(.collapsed) span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.footer {
    position: relative !important;
    bottom: auto !important;
    width: 100% !important;
    background-color: #050a24;
    color: #ffffff;
    padding: 80px 0 60px;
    font-family: 'Manrope', sans-serif;
    line-height: 24px !important;
    display: block !important; /* Щоб він не схлопувався */
}

/* 1. Налаштування сітки для десктопа */
.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    /* По замовчуванню 4 колонки */
    grid-template-columns: 2fr 1fr 1.5fr 2fr;
    gap: 40px;
}

/* 2. Планшетна версія (2 колонки) */
@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: 1fr 1fr; /* Ділимо навпіл */
        gap: 60px 40px;
    }

    .brand-info {
        grid-column: span 2; /* Логотип займає всю ширину зверху */
        text-align: center;
    }
}

/* 3. Мобільна версія (1 колонка) */
@media (max-width: 576px) {
    .footer-container {
        grid-template-columns: 1fr; /* Все в один стовпчик */
        gap: 40px;
        padding: 0 20px;
        text-align: center; /* Центруємо текст для мобільних */
    }

    .brand-info {
        grid-column: span 1;
    }

    /* Вирівнюємо іконки та форму підписки по центру */
    .social-icons {
        justify-content: center;
    }

    .email-box {
        max-width: 100%;
        margin-top: 20px;
    }

    /* Прибираємо великі відступи у заголовків */
    .footer-column h3 {
        margin-bottom: 15px;
    }
}

.footer-column h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 24px;
    color: #ffffff;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-column ul li {
        margin-bottom: 4px;
    }

        .footer-column ul li a {
            display: block; /* Посилання займає весь рядок */
            padding: 10px 0; /* Збільшуємо зону натискання по вертикалі */
            color: #a0a5b8;
            text-decoration: none;
            transition: all 0.2s ease;
            font-size: 15px;
        }

            .footer-column ul li a:hover {
                color: #ffffff;
            }

/* Стиль поля підписки */
.email-box {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 30px;
    padding: 5px 5px 5px 20px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .email-box input {
        background: none;
        border: none;
        color: white;
        width: 100%;
        outline: none;
    }

    .email-box button {
        background: linear-gradient(90deg, #1e40af, #3b82f6); /* Синій градієнт */
        border: none;
        width: 45px;
        height: 40px;
        border-radius: 20px;
        color: white;
        cursor: pointer;
    }

        .email-box button:hover {
            /* 1. Насиченіший градієнт при наведенні */
            background: linear-gradient(90deg, #2563eb, #60a5fa);
            /* 3. Синє світіння навколо кнопки */
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
        }

        .email-box button:active {
            /* Ефект натискання (трохи зменшуємо) */
            transform: scale(0.95);
        }

        .email-box button i {
            transition: transform 0.3s ease;
        }

/* Соціальні іконки */
.social-icons {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

    .social-icons a {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.05); /* Ледь помітний фон */
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px; /* Закруглені кути як на макеті */
        color: white;
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Плавна анімація */
    }

        .social-icons a:hover {
            /* Використовуємо синій градієнт з вашого брендингу */
            background: linear-gradient(135deg, #1e40af, #3b82f6);
            /* Ефект підняття вгору */
            transform: translateY(-5px);
            /* Світіння (shadow) під іконкою */
            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
        }

        .social-icons a i {
            transition: transform 0.3s ease;
        }

        .social-icons a:hover i {
            /* Невелике збільшення самої іконки при наведенні */
            transform: scale(1.1);
        }

/* Стан помилки */
.email-box.invalid {
    border-color: #ff4d4d !important;
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.2);
}

/* Стан успіху */
.email-box.valid {
    border-color: #2ed573 !important;
}

/* Анімація "трясіння" при помилці */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.shake {
    animation: shake 0.2s ease-in-out 0s 2;
}

.hero-section {
    padding: 100px 0 120px; /* Великі відступи для "повітря" як на макеті */
    background-color: #f4f7ff; /* Світло-блакитний фон */
    text-align: center;
}

.hero-content {
    max-width: 1100px;
    margin: 0 auto;
}

    .hero-content h1 {
        font-size: clamp(32px, 5vw, 56px); /* Адаптивний розмір шрифту */
        font-weight: 700;
        color: #1a1a1a;
        line-height: 1.2;
        margin-bottom: 24px;
    }

    .hero-content p {
        font-size: clamp(16px, 2vw, 20px);
        color: #4b5563; /* Сірий колір тексту */
        line-height: 1.6;
        margin-bottom: 40px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

/* Стилі кнопок */
.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.btn-primary-custom {
    background-color: #1e40af; /* Темно-синій як у футері */
    color: white;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .btn-primary-custom:hover {
        background-color: #1e3a8a;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(30, 64, 175, 0.2);
    }

.btn-secondary-custom {
    background-color: #e0e7ff; /* Світло-синій фон */
    color: #1e40af;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .btn-secondary-custom:hover {
        background-color: #d1d5db;
        transform: translateY(-2px);
    }

/* Адаптивність для мобільних */
@media (max-width: 576px) {
    .hero-section {
        padding: 60px 20px;
    }

    .hero-buttons {
        flex-direction: column; /* Кнопки одна під одною на мобільних */
    }

    .btn-primary-custom, .btn-secondary-custom {
        width: 100%;
    }
}

.features-section {
    padding: 100px 0;
    background-color: #ffffff; /* Контраст із Hero-секцією */
    text-align: center;
}

.section-header {
    text-align: center; /* Центрує текст всередині блоку */
    margin-bottom: 60px; /* Відступ до наступних елементів */
    width: 100%;
}

    .section-header h2 {
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 16px;
    }

    .section-header p {
        color: #4b5563;
        max-width: 900px;
        margin: 0 auto;
    }

/* Сітка карток */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 колонки */
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.feature-card {
    background: #E9EDF8; /* Новий темніший колір фону */
    padding: 40px 30px;
    border-radius: 20px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03); /* Тонка межа для чіткості */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-image {
    width: 60px; /* Або інший розмір згідно з вашими картинками */
    height: 60px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .feature-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* Зберігає пропорції картинки */
    }

    .feature-card:hover {
        transform: translateY(-10px);
        background: #ffffff;
        border-color: #e0e7ff;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    }

.feature-icon {
    font-size: 32px;
    color: #1a1a1a;
    margin-bottom: 24px;
}

.feature-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1a1a1a;
}

.feature-card p {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.5;
}

/* Адаптивність для мобільних */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr; /* Одна колонка на мобільних */
        padding: 0 20px;
    }
}

.solutions-section {
    padding: 100px 0;
    background-color: #f9fbff;
    overflow: hidden;
}

.solutions-content {
    position: relative;
    max-width: 900px;
    margin: 60px auto 0;
}

/* Стилі для елементів списку */
.solution-item {
    max-width: 500px;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}

.item-left {
    text-align: left;
    margin-right: auto;
}

.item-right {
    text-align: right;
    margin-left: auto;
}

.solution-item h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1a1a1a;
}

.solution-item p {
    font-size: 18px;
    color: #4b5563;
    line-height: 1.6;
}

/* Декоративна лінія (SVG) */
.solution-path {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
}

/* Посилання внизу */
.solution-footer {
    text-align: right;
    margin-top: 40px;
}

.explore-link {
    /* Базові стилі */
    color: #1a1a1a;
    text-decoration: none; /* Прибираємо стандартне підкреслення */
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Фіксований відступ */
    /* Підготовка для кастомного підкреслення */
    position: relative;
    padding-bottom: 2px; /* Місце для лінії */
}

    /* Кастомне підкреслення через псевдоелемент ::after */
    .explore-link::after {
        content: '';
        position: absolute;
        width: 0; /* Спочатку лінія невидима */
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #1a1a1a; /* Колір лінії */
        transition: width 0.3s ease; /* Плавна анімація */
    }

    /* Ефект при наведенні (Hover) */
    .explore-link:hover {
        gap: 8px; /* Відступ залишається фіксованим */
    }

        .explore-link:hover::after {
            width: 100%; /* Лінія розширюється на всю ширину тексту */
        }

/* Адаптивність */
@media (max-width: 768px) {
    .solution-item {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .solution-path {
        display: none; /* Прибираємо лінію на малих екранах */
    }

    .solution-footer {
        text-align: center;
    }
}

.why-choose-section {
    padding: 100px 0;
    background-color: #ffffff; /* Чистий білий фон */
    text-align: center;
}

.text-blue {
    color: #1e40af; /* Ваш брендовий синій колір */
}

/* Сітка переваг */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки на десктопі */
    gap: 30px;
    margin-top: 60px;
}

.benefit-card {
    background: #ffffff; /* Чистий білий фон для контрасту з основним фоном секції */
    padding: 40px 30px;
    border-radius: 20px;
    /* Додаємо об'єм через тінь */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* М'яка, але помітна тінь */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавна анімація */

    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.07); /* Дуже тонка межа для чіткості */
}

    .benefit-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

/* Ваші картинки */
.benefit-image {
    width: 100px;
    height: 100px;
    margin-bottom: 24px;
}

    .benefit-image img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Картинка вписується в 100x100 */
    }

.benefit-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1a1a1a;
    line-height: 1.4;
}

.benefit-card p {
    font-size: 15px;
    color: #4b5563;
    line-height: 1.6;
}

/* Адаптивність для планшетів та мобільних */
@media (max-width: 992px) {
    .benefits-grid {
        grid-template-columns: 1fr; /* Всі картки в одну колонку */
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

.section-footer {
    text-align: right; /* Вирівнює вміст по правому краю */
    margin-top: 50px; /* Відступ від сітки карток */
    width: 100%; /* Займає всю ширину контейнера */
    max-width: 1140px; /* Або max-width вашої сітки */
    margin-left: auto; /* Центрування самого футера */
    margin-right: auto;
    padding-right: 15px; /* Невеликий відступ від краю */
}

.explore-link {
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Відступ до іконки */
    position: relative;
    padding-bottom: 2px;
}

/* Адаптивність для мобільних */
@media (max-width: 992px) {
    .section-footer {
        text-align: center; /* На мобільних кнопка по центру для зручності натискання */
        padding-right: 0;
    }
}

.roi-boost-section {
    padding: 0;
    background-color: #f9fbff; /* Світлий фон для контрасту з білою карткою */
}

.roi-display-card {
    background: #ffffff;
    border-radius: 40px; /* Дуже м'які кути */
    padding: 60px;
    display: flex;
    gap: 50px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05); /* Глибокий об'єм */
    align-items: center;
    max-width: 1100px;
    margin: 60px auto 0;
}

.roi-visual {
    flex: 2;
}

    .roi-visual h3 {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 30px;
        color: #1a1a1a;
    }

.graph-container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.roi-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.stat-item {
    background: #ffffff;
    padding: 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03); /* Маленькі картки всередині теж мають об'єм */
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.stat-icon {
    color: #a855f7; /* Фіолетовий колір для стрілочок */
    font-size: 20px;
}

.stat-info h4 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #1a1a1a;
}

.stat-info p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.roi-stats .btn-primary-custom {
    margin-top: 10px;
    text-align: center;
}

/* Адаптивність */
@media (max-width: 992px) {
    .roi-display-card {
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
    }

    .stat-item {
        text-align: left;
    }
}

/* Основний контейнер секції */
.roi-main-card {
    background: #ffffff;
    border-radius: 30px;
    padding: 60px 50px; /* Збільшуємо відступи для візуального об'єму */
    display: flex;
    flex-direction: row; /* На десктопі в рядок */
    gap: 60px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    /* ГОЛОВНЕ: Вирівнюємо графік по центру щодо правої колонки */
    align-items: center;
    max-width: 1200px;
    margin: 0px auto;
}

/* Контейнер графіка */
.roi-visual-container {
    flex: 1.4; /* Графік займає більше місця */
    width: 100%;
}

.roi-graph-img {
    width: 100%;
    height: auto; /* Зберігаємо пропорції картинки */
    display: block;
}

/* Права колонка з показниками */
.roi-stats-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* АДАПТИВНІСТЬ ДЛЯ МОБІЛЬНИХ */
@media (max-width: 992px) {
    .roi-main-card {
        flex-direction: column; /* Стекуємо елементи вертикально */
        padding: 40px 20px;
        gap: 40px;
        text-align: center;
    }

    .roi-visual-container, .roi-stats-column {
        flex: none;
        width: 100%;
    }

    .graph-labels {
        justify-content: space-between;
        padding: 0 10px;
    }

    .stat-card {
        justify-content: center; /* Центруємо вміст карток на мобільних */
    }
}

.roi-stats-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stat-card {
    background: #ffffff;
    padding: 16px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    /* Об'єм картки */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
}

.stat-arrow {
    color: #a855f7; /* Фіолетовий з макета */
    font-size: 20px;
    font-weight: bold;
}

.stat-text {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
}

.stat-label {
    font-size: 13px;
    color: #6b7280;
}

/* Кнопка під картками */
.btn-demo {
    background: #1e40af;
    color: white;
    border: none;
    padding: 16px;
    border-radius: 50px;
    font-weight: 600;
    margin-top: 10px;
    cursor: pointer;
    transition: 0.3s;
}

    .btn-demo:hover {
        background: #1e3a8a;
        transform: translateY(-2px);
    }

.roi-visual-container {
    flex: 2;
}

.graph-wrapper {
    position: relative;
    padding-bottom: 30px; /* Місце для підписів */
}

.graph-labels {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
    font-weight: 500;
    color: #1a1a1a;
    font-size: 16px;
}

.separator-main {
    height: 60px;
    width: 100%;
    background-color: rgb(175, 195, 251, 0.2);
    display: flex;
    align-items: center; /* Центрування по вертикалі */
    justify-content: center;
    margin: 0;
}
    .separator-main .container {
        display: flex;
        justify-content: center; /* Центрування по горизонталі */
        align-items: center; /* Центрування по вертикалі */
        width: 100%;
    }

    .separator-main h2 {
        font-size: 32px;
        font-weight: 500;
        color: #1a1a1a;
        margin: 0;
        letter-spacing: -0.5px;
        line-height: 1;
    }

.pricing-section {
    padding: 100px 0;
    background-color: #f4f7ff;
    text-align: center;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

/* Базова картка */
.pricing-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* Початкова тінь */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .pricing-card:hover {
        transform: translateY(-10px);
        border-color: #3b82f6; /* Синя рамка при наведенні */
        box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15); /* Синє світіння */
    }

    /* Акцент на Enterprise (синій фон) */
    .pricing-card.enterprise {
        background: #BDCEFF;
    }

    .pricing-card h3 {
        font-size: 28px;
        margin-bottom: 10px;
    }

.plan-desc {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 30px;
}

/* Білий внутрішній блок з показниками */
.plan-features-box {
    background: #ffffff;
    border-radius: 18px;
    padding: 25px;
    margin: 20px 0;
    border: 1px solid #f3f4f6;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); /* Внутрішній об'єм */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .plan-features-box ul {
        list-style: none;
        padding: 0;
        margin: 0 0 20px 0;
        text-align: left;
    }

    .plan-features-box li {
        font-size: 14px;
        color: #4b5563;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .plan-features-box li::before {
            content: "";
            display: inline-block;
            width: 6px;
            height: 6px;
            background-color: #1a1a1a;
            border-radius: 50%; /* Чітке коло */
            flex-shrink: 0;
        }

.price-tag {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #f3f4f6;
    margin-top: auto;
}

    .price-tag strong {
        display: block;
        font-size: 24px;
        color: #111827;
        margin-bottom: 4px;
    }

    .price-tag span {
        font-size: 14px;
        color: #6b7280;
    }

/* Кнопка Sign Up */
.btn-signup {
    background: #3b82f6; /* Синій колір бренду */
    color: white;
    padding: 14px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 10px;
    transition: background 0.2s;
}

    .btn-signup:hover {
        background: #2563eb;
    }

/* Адаптивність */
@media (max-width: 992px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}

.trusted-section {
    padding: 80px 0;
    background-color: #ffffff; /* Чистий білий фон */
    text-align: center;
}

.logos-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Для адаптивності на мобільних */
    gap: 60px;
    margin-top: 50px;
}

.logo-item {
    flex: 0 1 auto;
    max-width: 150px;
    filter: grayscale(100%); /* Робимо логотипи сірими за замовчуванням */
    opacity: 0.6;
    transition: all 0.3s ease;
}

    .logo-item:hover {
        filter: grayscale(0%); /* Повертаємо колір при наведенні */
        opacity: 1;
        transform: scale(1.05);
    }

    .logo-item img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

/* Адаптивність */
@media (max-width: 768px) {
    .logos-grid {
        gap: 40px;
    }

    .logo-item {
        max-width: 120px;
    }
}

.final-cta-full {
    width: 100%;
    margin: 0; /* Прибираємо зовнішні відступи */
    padding: 100px 20px; /* Внутрішні відступи для контенту */
    background: #000835; /* Глибокий синій колір фону */
    background-image: url('/images/cta.png'); /* Накладання градієнта на ваші хвилі */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.cta-inner-content {
    max-width: 800px;
    color: #ffffff;
}

    .cta-inner-content h2 {
        font-size: 42px;
        font-weight: 700;
        margin-bottom: 24px;
        letter-spacing: -0.5px;
    }

    .cta-inner-content p {
        font-size: 18px;
        opacity: 0.85;
        margin-bottom: 40px;
    }

/* Яскраво-синя кнопка з макета */
.btn-cta-blue {
    display: inline-block;
    background-color: #5b86ff;
    color: white;
    padding: 18px 40px;
    border-radius: 12px; /* Квадратна з легким заокругленням */
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s, background 0.2s;
    box-shadow: 0 8px 20px rgba(91, 134, 255, 0.3);
}

    .btn-cta-blue:hover {
        background-color: #4a74ef;
        transform: translateY(-2px);
    }

/* Скидання відступів для сусідніх секцій */
.pricing-section + .final-cta-full {
    margin-top: 0;
}

.page-hero-section {
    height: 400px; /* Фіксована висота секції */
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Ефект закріплення картинки */
    background-attachment: scroll;
    position: relative;
    margin: 0;
    padding: 0;
}

/* Затемнення фону для читабельності тексту */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Темний фільтр поверх фото */
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-title {
    color: #ffffff;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
    text-align: center;
}

/* Вимкнення фіксованого фону на мобільних для кращої продуктивності */
@media (max-width: 1024px) {
    .page-hero-section {
        background-attachment: scroll;
        height: 300px;
    }
}

.info-content-section {
    padding: 100px 0 50px 0; /* Великі відступи зверху та знизу */
    background-color: #ffffff;
    text-align: left; /* Вирівнювання по лівому краю за макетом */
}

.info-wrapper {
    max-width: 1100px; /* Обмежуємо ширину для зручності читання */
    margin: 0;
}

.info-title {
    font-size: 32px; /* Великий, але не перевантажений заголовок */
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 50px; /* Великий відступ від тексту */
    letter-spacing: -0.5px;
}

.info-description p {
    font-size: 18px; /* Розмір основного тексту */
    color: #4b5563; /* М'який сірий колір */
    line-height: 1.8; /* Високий міжрядковий інтервал */
    margin-bottom: 25px;
    font-weight: 400;
}

/* Адаптивність для планшетів та мобільних */
@media (max-width: 768px) {
    .info-content-section {
        padding: 60px 20px;
    }

    .info-title {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .info-description p {
        font-size: 16px;
    }
}

.benefits-grid {
    display: grid;
    /* repeat(auto-fit...) дозволяє карткам перестрибувати на новий рядок самостійно */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.benefit-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); /* М'яка тінь з макета */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}

@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: 1fr; /* Одна картка на рядок */
        gap: 20px;
    }

    .benefit-card {
        padding: 30px 20px;
    }

    /* Кнопка стає по центру для зручності на телефоні */
    .section-footer-actions {
        justify-content: center; 
        width: 100%;
    }

    .btn-request-blue {
        width: 100%; /* Кнопка на всю ширину для легкого натискання пальцем */
        max-width: 300px;
    }
}

    .benefit-card h3 {
        font-size: 18px;
        font-weight: 600;
        margin: 20px 0 15px;
        color: #111827;
    }

    .benefit-card p {
        font-size: 14px;
        line-height: 1.6;
        color: #4b5563;
    }

/* КНОПКА ПРАВОРУЧ */
.section-footer-actions {
    display: flex;
    justify-content: flex-end; /* Вирівнювання вправо */
    margin-top: 20px;
}

.btn-request-blue {
    background-color: #5b86ff; /* Яскраво-синій колір */
    color: white;
    padding: 12px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(91, 134, 255, 0.4);
    transition: all 0.2s ease;
}

    .btn-request-blue:hover {
        background-color: #4a74ef;
        transform: translateY(-2px);
    }

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

.proven-impact-section {
    padding: 100px 0;
    background-color: #f9fbff;
}

.impact-main-card {
    background: #ffffff;
    border-radius: 40px;
    padding: 60px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05); /* М'яка тінь обгортки */
/*    max-width: 1000px;*/
    margin: 0 auto;
}

.impact-item {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    align-items: flex-start;
}

.impact-icon img {
    width: 60px; /* Фіолетові іконки з макета */
    height: auto;
}

.impact-text h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #111827;
}

.impact-stats, .impact-checklist {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stat-positive {
    color: #10b981; /* Зелений колір для показників */
    font-weight: 600;
    font-size: 15px;
}

.impact-text p {
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
}

.impact-footer {
    text-align: center;
    margin-top: 20px;
}

.btn-impact-pure {
    display: inline-block;
    background-color: #5b86ff; /* Насичений синій з макета */
    color: #ffffff;
    padding: 18px 45px; /* Симетричні відступи для збалансованого вигляду */
    border-radius: 50px; /* Повне закруглення */
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease; /* Плавна анімація всіх властивостей */
    box-shadow: 0 4px 15px rgba(91, 134, 255, 0.3); /* Легка кольорова тінь */
}

    /* Ефекти при наведенні (Hover) */
    .btn-impact-pure:hover {
        background-color: #4a74ef; /* Темніший відтінок синього */
        transform: translateY(-3px); /* Кнопка злегка піднімається */
        box-shadow: 0 8px 25px rgba(91, 134, 255, 0.4); /* Тінь стає глибшою */
    }

    /* Ефект при натисканні */
    .btn-impact-pure:active {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(91, 134, 255, 0.3);
    }

/* Адаптивність для мобільних */
@media (max-width: 576px) {
    .btn-impact-pure {
        width: 100%; /* На весь екран для зручності на тачскрінах */
        padding: 16px 20px;
        font-size: 15px;
    }
}

/* Адаптивність */
@media (max-width: 768px) {
    .impact-main-card {
        padding: 30px 20px;
    }

    .impact-item {
        flex-direction: column;
        gap: 15px;
    }
}

.industry-solutions-section {
    padding: 80px 0;
    background-color: #fcfdfe; /* Майже білий фон */
    text-align: center;
}

.solution-group {
    margin-bottom: 80px;
}

.solution-main-title {
    font-size: 24px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 40px;
}

.solution-card {
    background: #ffffff;
    border-radius: 30px; /* Трохи збільшуємо закруглення для м'якості */
    padding: 35px 50px;
    margin-bottom: 25px;
    /* ПІДСИЛЕНА ТІНЬ: робимо її помітнішою, але залишаємо м'якою */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    /* Прибираємо border або робимо його майже прозорим, щоб не "різав" око */
    border: none;
/*    transition: transform 0.3s ease, box-shadow 0.3s ease;*/
}

.card-label {
    font-weight: 600;
    font-size: 16px;
    color: #111827;
    margin-bottom: 12px;
}

.solution-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

/* Стиль для Real Impact */
.impact-card {
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.impact-list {
    list-style: none;
    padding: 0;
}

    .impact-list li {
        font-size: 15px;
        color: #4b5563;
    }

    .impact-list strong {
        color: #10b981; /* Зелений колір для цифр */
    }

.dot {
    color: #10b981;
    margin-right: 5px;
}

/* Адаптивність */
@media (max-width: 768px) {
    .solution-card {
        padding: 25px;
        border-radius: 20px;
    }

    .impact-list {
        flex-direction: column;
        gap: 10px;
    }
}

.faq-section {
    padding: 100px 0;
    background-color: #fcfdfe;
}

.faq-main-title {
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 60px;
    color: #111827;
}

/* Картка акордеона */
.faq-item {
    border: none !important;
    background: transparent !important;
    margin-bottom: 12px;
}

/* Кнопка (Питання) */
.accordion-button {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 24px 35px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    font-size: 18px;
    font-weight: 500;
    color: #111827 !important;
    display: flex;
    align-items: center;
}

    /* Прибираємо стандартний ефект фокусу Bootstrap */
    .accordion-button:focus {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
        border: none;
    }

/* Синій кружечок */
.faq-icon-circle {
    width: 20px;
    height: 20px;
    border: 2px solid #5b86ff;
    border-radius: 50%;
    margin-right: 20px;
    display: inline-block;
    flex-shrink: 0;
}

/* Тіло відповіді */
.faq-answer {
    background-color: #f4f7ff !important;
    padding: 20px 35px 30px 75px !important;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    color: #4b5563;
    line-height: 1.6;
}

/* Нижня картка */
.faq-footer-card {
    text-align: center;
    margin-top: 60px;
    padding: 60px;
    background: #ffffff;
    border-radius: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.btn-primary-blue {
    display: inline-block;
    background-color: #5b86ff;
    color: white;
    padding: 16px 45px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 25px;
    transition: background 0.3s;
}

/* Blog Cards */
.blog-card {
    background: #ffffff;
    border-radius: 30px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.blog-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-body {
    padding: 30px;
    text-align: center;
}

.blog-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #111827;
}

.blog-text {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Кнопка Read More */
.btn-blog {
    display: inline-block;
    background-color: #5b86ff; /* Синій колір з макета */
    color: white;
    padding: 10px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease; /* Плавність для всіх властивостей */
    box-shadow: 0 4px 10px rgba(91, 134, 255, 0.2);
}

    /* Ефекти при наведенні (Hover) */
    .btn-blog:hover {
        background-color: #4a74ef; /* Трохи темніший синій */
        color: white;
        transform: translateY(-2px); /* Кнопка злегка піднімається */
        box-shadow: 0 6px 15px rgba(91, 134, 255, 0.4); /* Тінь стає насиченішою */
        text-decoration: none;
    }

    /* Ефект при натисканні (Active) */
    .btn-blog:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(91, 134, 255, 0.3);
    }

/* Newsletter Block */
.newsletter-card {
    background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%);
    border-radius: 40px;
    padding: 60px 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 40px;
}

.btn-subscribe {
    display: inline-block;
    background-color: #5b86ff; /* Основний синій колір кнопки */
    color: white;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(91, 134, 255, 0.3); /* Початкова тінь */
    /* Плавний перехід для всіх станів */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

    /* Ефекти при наведенні (Hover) */
    .btn-subscribe:hover {
        background-color: #4a74ef; /* Насиченіший відтінок синього */
        color: white;
        /* Ефект "збільшення та підйому" */
        transform: translateY(-4px) scale(1.02);
        /* Глибока тінь для створення об'єму */
        box-shadow: 0 12px 25px rgba(91, 134, 255, 0.45);
        text-decoration: none;
    }

    /* Ефект при натисканні (Active) */
    .btn-subscribe:active {
        transform: translateY(-1px) scale(0.98);
        box-shadow: 0 5px 10px rgba(91, 134, 255, 0.3);
    }

.page-hero-section {
    height: 400px; /* Фіксована висота для блогу */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    color: white;
}

.hero-title {
    font-size: 42px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

.about-main-title {
    font-size: 32px; /* Коригування для відповідності макету */
    font-weight: 600;
    margin-bottom: 20px;
}

.about-main-text, .vision-text {
    font-size: 16px;
    line-height: 1.6;
    color: #4b5563;
}

/* Картка тепер займає 100% ширини своєї колонки */
.mini-cta-card {
    background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%);
    border-radius: 30px;
    padding: 40px;
    width: 100%; /* Займає всю ширину колонки */
    border: 1px solid rgba(91, 134, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.vision-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
}

.rounded-40 {
    border-radius: 40px !important;
}

.btn-primary-blue-sm {
    background-color: #5b86ff;
    color: white;
    padding: 12px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

/* Typography */
.contact-title {
    font-size: 32px;
    font-weight: 600;
    color: #1a1a1a;
}

.contact-description {
    font-size: 16px;
    line-height: 1.6;
    color: #4b5563;
}

/* Input Fields */
.custom-input {
    background-color: #ffffff;
    border: none;
    border-radius: 15px;
    padding: 15px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Легка тінь як на макеті */
    font-size: 15px;
}

    .custom-input:focus {
        box-shadow: 0 4px 15px rgba(91, 134, 255, 0.1);
        outline: none;
    }

/* Form Container */
.contact-form-container {
    background-color: #f8faff; /* Світло-блакитний фон підкладки */
    padding: 20px;
    border-radius: 20px;
}

/* Contact Details Card */
.contact-details-card {
    background: #ffffff;
    border-radius: 30px;
    padding: 50px 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); /* Глибока тінь картки */
}

.details-title {
    font-size: 24px;
    font-weight: 600;
}

.details-list {
    list-style: none;
    padding: 0;
}

    .details-list li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 25px;
        font-size: 15px;
        color: #1a1a1a;
    }

.icon-blue {
    color: #5b86ff;
    margin-right: 15px;
    font-size: 18px;
    margin-top: 3px;
}

.working-hours {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

/* Кнопка Premium Send Message */
.btn-send-message-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #5b86ff; /* Основний синій колір */
    color: white;
    padding: 18px 45px; /* Великі відступи для солідності */
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase; /* Великі літери */
    box-shadow: 0 10px 25px rgba(91, 134, 255, 0.35); /* Глибока тінь */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Плавна анімація */
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Елементи всередині кнопки */
.btn-text {
    margin-right: -10px; /* Приховуємо відступ для ефекту появи */
    transition: transform 0.3s ease;
}

.btn-chevron {
    opacity: 0; /* Прихована за замовчуванням */
    margin-left: -5px;
    font-size: 18px;
    transition: all 0.3s ease; /* Плавна поява */
}

/* Ефекти при наведенні (Hover) */
.btn-send-message-premium:hover {
    background-color: #4a74ef; /* Насиченіший синій */
    transform: translateY(-3px); /* Кнопка піднімається */
    box-shadow: 0 15px 35px rgba(91, 134, 255, 0.5); /* Тінь стає глибшою */
    color: white;
}

    /* Поява стрілки при ховері */
    .btn-send-message-premium:hover .btn-chevron {
        opacity: 1; /* З'являється */
        transform: translateX(15px); /* Зсувається вправо */
    }

    .btn-send-message-premium:hover .btn-text {
        transform: translateX(0px); /* Текст повертається на місце */
    }

/* Ефект при натисканні (Active) */
.btn-send-message-premium:active {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(91, 134, 255, 0.4);
}

.dates-info-section {
    padding: 40px 0; /* Додаємо трохи більше простору зверху та знизу */
    background-color: #ffffff;
}

.dates-wrapper {
    display: inline-block; /* Щоб блок займав тільки ширину тексту для точного центрування */
    text-align: left; /* Текст всередині блоку вирівняний по лівому краю для симетрії */
}

    .dates-wrapper p {
        font-size: 15px; /* Розмір шрифту згідно з макетом */
        color: #333333;
        margin-bottom: 12px; /* Відступ між датами */
        line-height: 1.4;
    }

        .dates-wrapper p:last-child {
            margin-bottom: 0;
        }

/* Styling for validation messages */
.invalid-feedback {
    font-size: 13px;
    color: #dc3545;
    margin-top: 5px;
    padding-left: 5px;
}

/* Red border only when form is validated and field is invalid */
.was-validated .form-control:invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25 margin rgba(220, 53, 69, 0.1);
}

/* Green border for valid fields (optional) */
.was-validated .form-control:valid {
    border-color: #198754;
}

.btn-success-state {
    background-color: #198754 !important;
    box-shadow: 0 10px 25px rgba(25, 135, 84, 0.35) !important;
}

/* Вимикаємо анімацію ховеру, поки кнопка disabled */
.btn-send-message-premium:disabled {
    transform: none !important;
    cursor: not-allowed;
}

.custom-modal-content {
    border-radius: 30px;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal-header .btn-close {
    background-color: #f8faff;
    border-radius: 50%;
    padding: 10px;
    opacity: 1;
}

/* Щоб модалка не виглядала надто вузькою на ПК */
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
    }
}