.header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 8.2rem;
    width: 100%;
    background-color: var(--headerBg);
    border-bottom: 1px solid #FFFFFF1A
}

.header__inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.header__logo {
    width: 37rem;
    height: 4.2rem;
}

.header__logo img,
.header__logo svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header__info {
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-gap: 2.4rem;
}

.header__info-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-gap: 1rem;
    justify-content: flex-end;
}

.header__info-item svg {
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    object-fit: contain;
}

.header__info-link {
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 120%;
    color: #fff;
    text-decoration: none;
    margin: 0;
}

.hero {
    width: 100%;
    position: relative;
    margin-bottom: 8rem;
}

.hero__image {
    height: min(77rem, calc(100dvh - 8.2rem));
}

.hero picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
}

.hero__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 2.4rem;
    padding: 10rem 0 4rem;
    margin: 0 auto;
    height: 100%;
}

.hero__content-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2.4rem;
}

.hero__title {
    font-weight: 700;
    font-size: 7.2rem;
    line-height: 100%;
    text-align: center;
    color: #fff;
    margin: 0;
}
.hero__title .nowrap {
    font-weight: 700;
    font-size: 7.2rem;
    line-height: 100%;
    text-align: center;
    color: #fff;
    margin: 0;
    white-space: nowrap;
}
.hero__subtitle {
    font-weight: 400;
    font-size: 3.2rem;
    line-height: 120%;
    text-align: center;
    color: #fff;
}

.hero__disclaimer {
    flex: 0 0 auto;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 120%;
    text-align: center;
    color: #FFFFFF80;
}

.chat {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.chat.visible {
    opacity: 1;
    transform: translateY(0);
}

.chat__header {
    display: flex;
    flex-direction: row;
    border-width: 1px, 1px, 0px, 1px;
    border-style: solid;
    border-color: #00000066;
    background-color: var(--primary);
    padding: 2rem;
    flex-wrap: wrap;
}

.chat__header-item {
    display: flex;
    flex-direction: column;
    min-height: 10.2rem;
}

.chat__header-item:nth-child(1),
.chat__header-item:nth-child(2) {
    padding-right: 1.6rem;
    border-right: 1px solid #FFFFFF1A;
}

.chat__header-item:nth-child(2),
.chat__header-item:nth-child(3) {
    padding-left: 1.6rem;
}

.chat__header-item:nth-child(1),
.chat__header-item:nth-child(2),
.chat__header-item:nth-child(3) {
    width: calc(33.333%);
}

.chat__header-item:nth-child(4) {
    padding-right: 1.6rem;
    border-right: 1px solid #FFFFFF1A;
    border-top: 1px solid #FFFFFF1A;
}

.chat__header-item:nth-child(4),
.chat__header-item:nth-child(5),
.chat__header-item:nth-child(6),
.chat__header-item:nth-child(7) {
    width: calc(25%);
    padding-top: 3rem;
}

.chat__header-item:nth-child(5) {
    padding-left: 1.6rem;
    border-right: 1px solid #FFFFFF1A;
    border-top: 1px solid #FFFFFF1A;
}
.chat__header-item:nth-child(6) {
    padding-left: 1.6rem;
    border-right: 1px solid #FFFFFF1A;
    border-top: 1px solid #FFFFFF1A;
}
.chat__header-item:nth-child(7) {
    border-top: 1px solid #FFFFFF1A;
    padding-left: 1.6rem;
}

.chat__header-ico {
    width: 4rem;
    height: 4rem;
    flex: 0 0 auto;
    margin-bottom: 1.6rem;
}

.chat__header-ico svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.chat__header-content {
    display: flex;
    flex-direction: column;
}
.chat__header-title {
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 110%;
    color: #fff;
}

.chat__header-text {
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 120%;
    margin-top: .8rem;
    color: #FFFFFF80;
}

.chat__body {
    width: 100%;
    min-width: 0;
}

#chat {
    min-height: 48.4vh;
    width: 100%;
    padding: 4rem 4rem 4rem 14.8rem;
    background-color: #0B101621;
    backdrop-filter: blur(3px);
    overflow-y: auto;
    scroll-behavior: smooth;
    transition: all .2s ease-in-out;
}

#chat::-webkit-scrollbar {
    width: .7rem;
}

#chat::-webkit-scrollbar-track {
    background: #fff;
    border-left: 1px solid #aaaaaa60;
}

#chat::-webkit-scrollbar-thumb {
    background: #aaaaaa;
    cursor: pointer;
    border-radius: .25rem;
}

#chat::-webkit-scrollbar-thumb:hover {
    background: #222;
}
.operator-avatar {
    width: 8.8rem;
    height: 8.8rem;
    object-fit: contain;
    border-radius: 50%;
    position: absolute;
    left: -10.8rem;
    top: calc(50% - 4.4rem);
}
.message {
    font-size: 2rem;
    line-height: 120%;
    padding: 2rem;
    position: relative;
    /*width: fit-content;*/
    max-width: 57rem;
}
.message:not(.typing) {
}

.message.typing {
    color: #0B1016;
}

.bot-message {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    color: #0B1016;
    opacity: 0;
    animation: fadeIn 1s forwards;
    border-radius: 0 1.2rem 1.2rem 1.2rem;
}
.bot-message:not(:first-child):not(.empty-message + .bot-message):not(.options-checkboxes) {
    margin: 1.6rem 0 0;
}
.question-message {
    margin-bottom: 2rem;
    font-size: 2.4rem;
    line-height: 110%;
    color: #0B1016;
    /*width: fit-content;*/
}

.options {
    display: flex;
    opacity: 0;
    animation: fadeIn 1s forwards 0.5s;
}
.options-texts {
    color: #000;
    opacity: 0;
    animation: fadeIn 1s forwards;
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.question-terms .options-texts {
    gap: 1.2rem;
}
.options:not(.options-images) {
    flex-direction: column;
    align-items: flex-start;
}
.option-card-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    position: relative;
    transition: background-color .3s ease;
}
.option-card-text:not(.question-terms .option-card-text) {
    padding: 1.2rem 1.6rem;
}
@media (min-width: 1281px) {
    .option-card-text:not(.question-terms .option-card-text):hover {
        background-color: #0B10161A;
    }
}
.option-card-text:not(:last-child):not(.question-terms .option-card-text) {
    border-bottom: 1px solid #0B10161A
}
.option-card-text .option-label {
    font-weight: 400;
    font-size: 2rem;
    line-height: 120%;
}

.option-card-text input[type="checkbox"] {
    margin-right: 1rem;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    pointer-events: all;
}

.option-card-text input[type="checkbox"] + label {
    font-size: 1.4rem;
    font-weight: 400;
}

.option-card input[type="radio"] {
    position: absolute;
    left: 0;
    opacity: 0;
}

.user-message {
    background-color: var(--primary);
    border-radius: 1.2rem 0 1.2rem 1.2rem;
    text-align: right;
    color: #fff;
    margin: 4rem 0 4rem auto;
    width: fit-content;
}

.options-images {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .4rem;
}
.option-card-image {
    display: flex;
    flex-direction: column;
    width: 26.3rem;
    min-height: 27.6rem;
    height: auto;
    opacity: 0;
    animation: fadeIn 1s forwards;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    position: relative;
    justify-content: space-between;
    border: 2px solid transparent;
}
.option-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.option-card-image .option-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;

    padding: 1.6rem;
    min-height: 7.8rem;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    flex: 0 0 auto;
    color: #fff;
}

.option-card-image .option-label {
    font-weight: 400;
    font-size: 2rem;
    text-align: center;
    line-height: 120%;
}

.option-card-image:has(input:checked) {}

.option-card-image:hover {
    border-color: #0B1016;
}

.options-checkboxes .options-texts .option-card-text {
    gap: 1.2rem;
}
.question-used-brands .options-texts {
    flex-wrap: wrap;
    flex-direction: row;
}
.question-used-brands .options-texts .option-card-text{
    width: 50%;
    justify-content: center;
}
.question-used-brands .options-texts .option-card-text:nth-child(odd){
    border-right: 1px solid #0B10161A;
}

.question-used-brands .options-texts .option-card-text:nth-child(7) {
    border-bottom: none;
}

.chat-section {
    margin-bottom: 8rem;
}


@media (min-width: 768px) and (max-width: 1280px){
    .header__logo {
        width: 28rem;
    }
    .hero {
        margin-bottom: 6rem;
    }
    .hero__image {
        height: 47rem;
    }
    .hero__container {
        padding: 3.2rem 0;
    }
    .hero__title {
        font-size: 4.4rem;
        line-height: 100%;
    }
    .hero__title .nowrap {
        font-size: 4.4rem;
        line-height: 100%;
    }
    .hero__subtitle {
        font-size: 2.4rem;
    }
    .hero__disclaimer {
        font-size: 1.2rem;
    }
    .chat-section {
        margin-bottom: 6rem;
    }

    .chat__header-title {
        max-width: 90%;
    }
    .chat__header-item {
        min-height: 14.5rem;
    }
}
@media (max-width: 767px){
    body {
        padding-top: 15.4rem;
    }
    .header {
        padding: 1.6rem 0;
        height: 15.4rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }
    .header__logo {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        padding-bottom: 1.4rem;
        border-bottom: 1px solid #FFFFFF1A;
    }
    .header__logo svg {
        width: 27.4rem;
        height: 3rem;
    }
    .header__inner {
        flex-direction: column;
    }
    .header__info {
        flex-direction: column;
        gap: 1.2rem;
        margin-top: 1.6rem;
        align-items: baseline;
        width: 100%;
    }
    .hero {
        margin-bottom: 0;
    }
    .hero__image {
        height: auto;
    }
    .hero__content {
        align-items: flex-start;
    }
    .hero__container {
        align-items: center;
        gap: 0;
        padding: 3.2rem 0 1.6rem;
        margin: 0 auto auto;
    }
    .hero__content-inner {
        align-items: center;
        gap: 1.2rem;
    }
    .hero__title {
        font-size: 3.2rem;
        line-height: 110%;
        text-align: center;
        width: 90%;
    }
    .hero__title .nowrap {
        font-size: 3.2rem;
        line-height: 110%;
        text-align: center;
    }
    .hero__title br {
        display: none;
    }
    .hero__subtitle {
        font-size: 1.6rem;
        text-align: center;
    }
    .hero__disclaimer {
        font-size: 1.2rem;
    }
    .chat-section .container:not(.container--wide) {
        width: 100%;
    }
    .chat__header {
        flex-direction: column;
    }
    .chat__header-item:nth-child(1),
    .chat__header-item:nth-child(2),
    .chat__header-item:nth-child(3) {
        width: 100%;
    }
    .chat__header-item:nth-child(4),
    .chat__header-item:nth-child(5),
    .chat__header-item:nth-child(6),
    .chat__header-item:nth-child(7) {
        width: 100%;
    }
    .chat__header-item:nth-child(1),
    .chat__header-item:nth-child(2) {
        padding-right: 0;
        border-right: 0;
    }
    .chat__header-item:nth-child(2),
    .chat__header-item:nth-child(3) {
        padding-left: 0;
    }
    .chat__header-item:nth-child(4) {
        padding-right: 0;
        border-right: 0;
        border-top: 0;
    }
    .chat__header-item:nth-child(5) {
        padding-right: 0;
        padding-left: 0;
        border-right: 0;
        border-top: 0;
    }
    .chat__header-item:nth-child(6) {
        padding-right: 0;
        padding-left: 0;
        border-right: 0;
        border-top: 0;
    }
    .chat__header-item:nth-child(7) {
        border-top: 0;
        padding-left: 0;
    }
    .chat__header-item:not(:last-child) {
        padding-bottom: 1.6rem;
        border-bottom: 1px solid #FFFFFF1A;
    }
    .chat__header-item {
        min-height: unset;
    }
    .chat__header-item:not(:first-child) {
        padding-top: 1.6rem;
    }
    .chat__header-item {
        flex-direction: row;
        gap: 1.6rem;
    }
    .chat__header-content {
        justify-content: center;
    }
    #chat {
        padding: 10.4rem 1.6rem 1.6rem;
    }
    .chat__header-ico {
        width: 3.2rem;
        height: 3.2rem;
        margin-bottom: 0;
    }
    .chat__header-title {
        font-size: 2rem;
    }
    .message {
        font-size: 1.6rem;
        padding: 1.2rem;
        max-width: 30.4rem;
        border-radius: 0 .8rem .8rem .8rem;
    }
    .message br {
        /*display: none;*/
    }
    .question-message {
        margin-bottom: 1.2rem;
        font-size: 2rem;
    }
    .option-card-text .option-label {
        font-size: 1.6rem;
    }
    .user-message {
        border-radius: .8rem 0 .8rem .8rem;
        margin: 2.4rem 0 2.4rem auto;
    }
    .operator-avatar {
        width: 6.4rem;
        height: 6.4rem;
        left: 0;
        top: -8rem;
    }
    .option-card-image {
        width: 13.9rem;
        min-height: 15.1rem;
        border: 0;
    }
    .option-card-image .option-wrapper {
        padding: .8rem;
        min-height: 7.4rem;
    }
    .option-card-image .option-label {
        font-size: 1.6rem;
    }
    .options-images {
        gap: .2rem;
    }
    .chat-section {
        margin-bottom: 4rem;
    }

    .bot-message:not(:first-child):not(.empty-message + .bot-message):not(.options-checkboxes) {
        margin: .8rem 0 0;
    }

    .chat__btn-inner {
        margin-top: 1.2rem;
    }



}