html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-size: 16px;
    font-family: 'SF Pro Display', sans-serif;
    color: var(--main-color)
}

@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

a, a:active, a:visited {
    color: var(--main-color);
    transition: all 0.2s ease-in-out;
    text-decoration: none !important;
}

a:hover {
    color: var(--hover-color);
    text-decoration: none;
}

p {
    margin: 0;
}

img {
    max-width: 100% !important;
}

.scroll-lock {
    overflow: hidden;
    position: absolute; /* зберігає позицію при скролі */
    width: 100%;
    height: 100%;
}

.app-component > * {
    border-top-left-radius: var(--component-border-radius);
    border-top-right-radius: var(--component-border-radius);
}

.app-component--sepia {
    background: var(--background-color);
}

.app-component--sepia > * {
    background: var(--background-secondary-color);
}

.app-component--white {
    background: var(--background-secondary-color);
}

.app-component--white > * {
    background: var(--background-color);
}

.mt-component-offset-top {
    margin-top: var(--component-offset-top);
    background: transparent;
    z-index: 1;
    position: relative;
}

ul.custom-ul li, .about-us__text ul li {
    position: relative;
    display: flex;
    align-items: center;
}

ul.custom-ul li:before, .about-us__text ul li:before {
    content: '';
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: var(--circle-title);
    margin-right: 15px;
}



@media screen and (min-width: 1024px) and (max-width: 1700px) {
    .container {
        max-width: 85% !important;
    }
}

@media screen and (max-width: 768px) {
    .app-component > * {
        border-top-left-radius: var(--component-border-radius--mobile);
        border-top-right-radius: var(--component-border-radius--mobile);
    }

    .mt-component-offset-top {
        margin-top: var(--component-offset-top-mobile);
        background: transparent;
        z-index: 1;
        position: relative;
    }
}

/* Typography */
p {
    font-family: SF Pro Display;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

@media screen and (max-width: 768px) {
    p {
        font-size: 14px;
    }
}