html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* background-image: url('https://static.wixstatic.com/media/eed8aa_a8319b4b09ca4914871c2f50b7fa66f6~mv2.png'); */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.25;
    /* 👈 Прозорість фону */
    z-index: -1;
    /* 👈 Щоб фон не перекривав вміст */
}

body {
    background-color: #21252a;
    color: white;
    font-family: sans-serif;
}

:root {
    --safe-top: env(safe-area-inset-top);
    --navbar-height: 60vh;
}

/* BASAD — прикріплений до самого верху */
#basad {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* direction: rtl; */
    padding-top: var(--safe-top);
    background-color: #21252a;
    /* або твій */
    z-index: 1050;
}

/* Картинка займає весь контейнер */
#basad img {
    /* padding-top: 10px; */
    padding-right: 14px;
    display: block;
    /* width: 100%; */
    float: right;
    height: auto;
}

/* NAVBAR — одразу під #basad */
header.navbar {
    position: fixed;
    top: calc(var(--safe-top));
    /* 40px — реальна висота basad-картинки */
    left: 0;
    width: 100%;
    z-index: 1040;
    background-color: #21252a;
}

/* Усьому body додаємо відступ, щоб контент не ховався під хедером */
body {
    padding-top: calc(var(--safe-top) + 20px + 28px);
    /* basad + navbar */
}

.content {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.btn-muted {
    background-color: #4a90e2;
    color: white;
    border: none;
}

.btn-muted:hover {
    background-color: #3b7dd8;
    color: white;
}

#basad img {
    max-height: 8px;
    filter: invert(100%);
}

.tab-button {
    color: white !important;
}

.tab-button.active {
    color: #373b3f !important;
}

#djc {
    width: 44px;
    height: 44px;
    background-image: url('https://static.wixstatic.com/media/eed8aa_df92b86481854b7790c949c3a8eb53de~mv2.png');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

#fjc {
    width: 44px;
    height: 44px;
    background-image: url('https://static.wixstatic.com/media/eed8aa_45c43cd0b5a440d0ab5176c4920988c4~mv2.png');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.offcanvas-start {
    padding-top: 2.5em !important;
    background-color: #373b3f !important;
    width: 100% !important;


    /* або 56px, в залежності від вашого navbar */

    /* Щоб не вилізло за екран */
}

.accordion-item {
    background-color: #21252a;
    color: white;
}

.accordion-button {
    background-color: #21252a !important;
    color: white !important;
}