body {
  font-family: "Open Sans", sans-serif;
  background: #f6f9ff;
  color: #444444;
}

body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main {
    padding-top: 70px; /* Відступ зверху для уникнення перекриття навбаром */
}

.fixed-navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
}

.main-section {
    display: flex;
    justify-content: space-between; /* Розподіл простору між блоками */
    padding: 20px; /* Горизонтальні та вертикальні відступи */
    margin: 0; /* Вилучено будь-які зовнішні відступи */
}

.main-content {
    display: flex;
    width: 100%;
    margin: 0; /* Вилучено будь-які зовнішні відступи */
}

.main-div {
    width: 70%; /* Ширина блоку main-div */
    margin: 0; /* Вилучено будь-які зовнішні відступи */
}

.right-content {
    width: 30%; /* Ширина блоку right-content */
    margin: 0; /* Вилучено будь-які зовнішні відступи */
    box-sizing: border-box; /* Включення padding у загальну ширину */
}

/* Стилі для додаткового контенту */
.additional-content {
    padding-left: 5%;
    padding-right: 5%;
}

/* Мобільна адаптивність */
@media (max-width: 768px),
       (max-width: 820px),
       (max-width: 864px),
       (max-width: 960px),
       (max-width: 1152px) {
    .main-section {
        flex-direction: column; /* Вертикальне розташування блоків */
        padding: 10px; /* Зменшення відступів */
    }

    .main-content {
        flex-direction: column; /* Зміна напрямку флекс-контейнера */
    }

    .main-div,
    .right-content {
        width: 100%; /* Блоки займають всю ширину */
    }

    .right-content {
        order: -1; /* Відображення блока right-content перед main-div */
        margin-bottom: 20px; /* Відступ знизу */
    }

    .additional-content {
        padding-left: 0;
        padding-right: 0;
    }
}