/* Для текстовых элементов лучше использовать SF UI Text */
p, span, div, li, article, section, main, aside {
    font-family: 'SF UI Text Regular', 'SF UI Display Regular', 'Arial', sans-serif !important;
}

/* Жирные элементы */
b, strong, h1, h2, h3, h4, h5, h6, .bold {
    font-family: 'SF UI Display Bold', 'SF UI Text Bold', 'Arial', sans-serif !important;
    font-weight: normal; /* Отключаем стандартное жирное начертание, т.к. шрифт уже Bold */
}

/* Полужирные элементы */
.semibold, .medium {
    font-family: 'SF UI Display Semibold', 'SF UI Text Semibold', 'Arial', sans-serif !important;
}

/* Легкие элементы */
.light, .thin {
    font-family: 'SF UI Display Light', 'SF UI Text Light', 'Arial', sans-serif !important;
}

/* Курсивные элементы */
em, i, .italic {
    font-family: 'SF UI Text Italic', 'Arial', sans-serif !important;
}

/* Все элементы наследуют шрифт от body, если не указано иное */
* {
    font-family: inherit;
}

:root {
    color-scheme: light;
    --bg: #ffffff;
    --black: #000000;
    --gray: #EFEFEF;
    --text_gray: #757575;
    --dots_owl_carousel: #DBDBD9;
    --primary: #B07DFC;
    --primary_dark: #965EEB;
    --radius_1: 1rem;
    --input_bg: #F5F5F6;
}

/* Применяем SF UI Display как основной шрифт для всего документа */
body {
    font-family: 'SF UI Display Regular', 'Arial', sans-serif !important;
    background-color: var(--bg) !important;
}

select,
button,
a,
input,
textarea,
img {
    outline: none !important;
    box-shadow: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
strong {
    font-weight: 800 !important;
}

a,
button {
    text-decoration: none !important;
    transition: .3s all !important;
}

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

.wrapper__block {
    display: flex;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

.wrapper__block > div {
    width: 100%;
    height: 100%;
    min-height: 300px;
}

.wrapper__block > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

.wrapper__block h1 {
    max-width: 500px;
    margin: 0;
}

.wrapper__block p {
    max-width: 440px;
    margin: 0;
}

.wrapper__block > div:last-child {
    background-color: var(--primary_dark);
    position: relative;
}

.wrapper__block > div:last-child picture {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper__block > div:last-child picture img {
    object-fit: contain !important;
    max-width: 75% !important;
    max-height: 75% !important;
}

@media (min-width: 1440px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1300px;
    }
}

@media (max-width: 1400px) {}

@media (max-width: 1200px) {}

@media (max-width: 992px) {
    .wrapper__block {
        flex-direction: column;
    }

    .wrapper__block > div:first-child {
        padding: 1.5rem;
        gap: 1rem;
    }

    .wrapper__block h1 {
        max-width: 100%;
        font-size: 1.5rem;
    }
    .wrapper__block p {
        max-width: 100%;
        font-size: .9rem;
    }
}

@media (max-width: 768px) {}

@media (max-width: 576px) {}