@font-face {
    font-family: iconset;
    src: url(../fonts/iconset.eot);
    src: url(../fonts/iconset.eot#iefix) format("embedded-opentype"), url(../fonts/iconset.woff2) format("woff2"), url(../fonts/iconset.woff) format("woff"), url(../fonts/iconset.ttf) format("truetype"), url(../images/iconset.svg#iconset) format("svg")
}

[class*=" iconset-"], [class^=iconset-] {
    font-family: iconset !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.iconset-calendar:before {
    content: "\ea01"
}

.iconset-checkmark:before {
    content: "\ea02"
}

.iconset-checkmark2:before {
    content: "\ea03"
}

.iconset-danger:before {
    content: "\ea04"
}

.iconset-delivery-fast:before {
    content: "\ea05"
}

.iconset-delivery:before {
    content: "\ea06"
}

.iconset-dots:before {
    content: "\ea07"
}

.iconset-eye:before {
    content: "\ea08"
}

.iconset-info:before {
    content: "\ea09"
}

.iconset-question-int:before {
    content: "\ea0a"
}

.iconset-quotation:before {
    content: "\ea0b"
}

.iconset-star-half:before {
    content: "\ea0c"
}

.iconset-star:before {
    content: "\ea0d"
}

.iconset-success:before {
    content: "\ea0e"
}

.iconset-thumb-up:before {
    content: "\ea0f"
}

.iconset-time:before {
    content: "\ea10"
}

.iconset-warning:before {
    content: "\ea11"
}

.iconset-world:before {
    content: "\ea12"
}

html {
    scroll-behavior: smooth !important
}

#order .shadow {
    box-shadow: 0 0 8px 0 #0003
}

#ribbon path {
    fill: var(--ribbon-color)
}

#ribbon rect {
    fill: var(--ribbon-dark-color)
}

#order .order {
    --background-color: var(--color-primary, #5287f6);
    --border-radius: 16px;
    --form-radius: calc(var(--border-radius) / 4);
    --font-size: 18px;
    --ribbon-size: 150px;
    --ribbon-color: #af0000;
    --ribbon-dark-color: #7d0000;
    --grad-from: #dcdcdc;
    --grad-to: var(--background-color);
    --grad-direction: to bottom right;
    --form-gap: 18px;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 40px 0;
    padding: 24px;
    background-color: #fff;
    gap: 32px 64px;
    box-sizing: border-box
}

#order .order, #order .order__left {
    display: flex;
    border-radius: var(--border-radius)
}

#order .order__left {
    position: relative;
    flex: 1 1 min(40%, 210px);
    padding: 8px;
    background: linear-gradient(var(--grad-direction), var(--grad-from), var(--grad-to));
    background-color: var(--background-color);
    box-sizing: inherit
}

#order .order__inner {
    position: absolute;
    left: -17px;
    top: -17px;
    width: var(--ribbon-size);
    height: var(--ribbon-size)
}

#order .order__ribbon {
    width: 100%;
    height: 100%
}

#order .order__discount {
    position: absolute;
    left: 40%;
    top: 40%;
    margin: 0;
    width: auto;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
    color: #fff;
    transform: translate(-50%, -50%) rotate(-45deg)
}

#order .order__product {
    display: block;
    margin-top: auto;
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
    max-height: 450px;
    -o-object-fit: contain;
    object-fit: contain
}

#order .order__right {
    flex: 1 1 min(50%, 260px);
    align-self: center;
    min-width: 260px;
    box-sizing: inherit
}

#order .order__prices {
    margin: 0;
    padding: 0
}

#order .order__form, #order .order__prices {
    margin-bottom: var(--form-gap);
    border-bottom: 1px solid #d5d5d5;
    padding-bottom: var(--form-gap)
}

#order .order__form {
    box-sizing: inherit
}

#order .order__prod-left {
    margin: 0;
    padding: 0
}

#order .prod-left {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: calc(var(--font-size) - 2px);
    text-align: center
}

#order .prod-left__text {
    margin-right: 6px
}

#order .prod-left__pad {
    flex: 0 0 auto;
    border-radius: 5px;
    padding: 8px 8px 6px;
    box-sizing: border-box;
    line-height: 1;
    color: #fff;
    background-color: var(--background-color)
}

#order .prod-left__pad b {
    animation: blink 1s ease-in-out infinite
}

#order .prod-left__pad--low {
    color: #fff;
    background-color: #b51111
}

#order .form {
    width: 100%;
    font-family: inherit
}

#order .form__group {
    position: relative;
    margin-bottom: calc(var(--form-gap) / 2);
    padding: var(--form-gap) 0 0;
    box-sizing: inherit;
    max-width: 320px;
    margin-right: auto;
    margin-left: auto
}

#order .form__group:last-of-type {
    margin-bottom: calc(var(--form-gap) * 1.5)
}

#order .form__field {
    box-sizing: inherit;
    display: block;
    border: 1px solid var(--background-color);
    border-radius: var(--form-radius);
    padding: 8px 16px;
    width: 100%;
    font-family: inherit;
    font-size: var(--font-size);
    line-height: 1;
    text-align: left;
    outline: none
}

#order .form__field::-moz-placeholder {
    color: #0000
}

#order .form__field::placeholder {
    color: #0000
}

#order .form__field:-moz-placeholder-shown ~ .form__label {
    top: calc(var(--form-gap) * 1.5);
    left: 1rem;
    font-size: var(--font-size);
    color: #00000080;
    cursor: text
}

#order .form__field:placeholder-shown ~ .form__label {
    top: calc(var(--form-gap) * 1.5);
    left: 1rem;
    font-size: var(--font-size);
    color: #00000080;
    cursor: text
}

#order .form__field:focus ~ .form__label {
    position: absolute;
    top: 0;
    left: .5rem;
    display: block;
    font-size: 12px;
    color: #333
}

#order .form__field:invalid, #order .form__field:required {
    box-shadow: none
}

#order .form__label {
    position: absolute;
    top: 0;
    left: .5rem;
    display: block;
    font-family: inherit;
    transition: .2s;
    font-weight: 700;
    font-size: 12px;
    color: #333
}

#order .form__label > span {
    color: var(--grad-to)
}

#order .form__btn {
    box-sizing: inherit;
    display: block;
    margin-right: auto;
    margin-left: auto;
    border-radius: var(--form-radius);
    padding: 10px 16px;
    width: 100%;
    max-width: 320px;
    font-weight: 700;
    font-size: var(--font-size);
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--background-color);
    border: 1px solid #0000;
    cursor: pointer;
    transition-property: color, background-color, border-color;
    transition-duration: .3s;
    transition-timing-function: ease-in-out
}

#order .form__btn:focus, #order .form__btn:hover {
    color: var(--background-color);
    background-color: #fff;
    border-color: currentColor
}

#order .prices {
    box-sizing: inherit;
    display: flex;
    justify-content: center;
    gap: 16px
}

#order .prices__column {
    box-sizing: inherit;
    display: flex;
    flex-direction: column;
    width: 50%
}

#order .prices__column.old {
    opacity: .7
}

#order .prices__title {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 22px
}

#order .prices__price, #order .prices__title {
    box-sizing: inherit;
    padding: 0;
    text-align: center
}

#order .prices__price {
    margin: auto 0 0;
    line-height: 1;
    white-space: nowrap
}

#order .prices__price--new {
    font-weight: 700;
    font-size: 28px;
    color: #b51111;
    transform: translatey(3px)
}

#order .prices__price--old {
    font-size: 24px
}

#order .prices__price--old > span {
    text-decoration: line-through;
    text-decoration-color: #b61717;
    text-decoration-thickness: 3px
}

@media screen and (min-width: 576px) {
    #order .prices__price--new {
        font-size: 34px
    }

    #order .prices__price--old {
        font-size: 28px
    }
}

@keyframes blink {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.comments {
    --comment-border: #cdcdcd;
    margin-bottom: 30px;
    padding: 30px;
    background-color: #fff
}

.comments__title {
    margin: 0 0 30px;
    font-size: 35px
}

.comments__list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0
}

.comments__item:not(:last-child) {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--comment-border)
}

.comments__item.answered {
    border-bottom-width: 0
}

.reply .comments__item-inner {
    position: relative;
    margin-left: 38px
}

.reply .comments__item-inner:before {
    content: url(../images/reply.svg);
    position: absolute;
    left: -35px;
    top: 14px;
    height: 30px;
    width: 30px;
    --tw-scale-x: -1;
    --tw-scale-y: -1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.comments__top {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 16px
}

.comments__avatar {
    display: inline-block;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    -o-object-fit: cover;
    object-fit: cover
}

.comments__info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.comments__author {
    margin-top: 0;
    margin-bottom: 0;
    font-family: inherit;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
    color: #111
}

.comments__stars {
    flex-basis: 100%;
    display: flex;
    align-items: center
}

.comments__stars > img {
    display: block;
    margin-right: 3px;
    width: 24px;
    height: 24px
}

.comments__stars > img:last-of-type {
    margin-right: 8px;
    font-weight: 500
}

.comments__stars > span {
    font-size: 16px
}

@media (min-width: 640px) {
    .comments__content {
        margin-left: 76px
    }
}

.comments__content > p {
    margin: 0
}

.comments__content > p:not(:last-child) {
    margin-bottom: 16px
}

.comments__content a {
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(220 38 38/var(--tw-text-opacity))
}

.comments__img {
    margin-bottom: 20px;
    border-radius: 10px;
    max-height: 350px;
    max-width: 100%
}

.comments__time {
    position: relative;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 24px;
    display: block;
    font-size: 14px;
    color: #555
}

.tw-absolute {
    position: absolute
}

.tw-relative {
    position: relative
}

.tw-left-0 {
    left: 0
}

.tw-left-1\/2 {
    left: 50%
}

.tw-left-\[-35px\] {
    left: -35px
}

.tw-left-\[4px\] {
    left: 4px
}

.tw-top-0 {
    top: 0
}

.tw-top-1\/2 {
    top: 50%
}

.tw-top-\[14px\] {
    top: 14px
}

.tw-top-\[4px\] {
    top: 4px
}

.tw-top-\[87px\] {
    top: 87px
}

.tw-clear-both {
    clear: both
}

.tw-m-0 {
    margin: 0
}

.\!tw-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important
}

.tw-mx-\[16px\] {
    margin-left: 16px;
    margin-right: 16px
}

.tw-mx-auto {
    margin-left: auto;
    margin-right: auto
}

.tw-mb-\[12px\] {
    margin-bottom: 12px
}

.tw-mb-\[16px\] {
    margin-bottom: 16px
}

.tw-mb-\[32px\] {
    margin-bottom: 32px
}

.tw-mb-\[8px\] {
    margin-bottom: 8px
}

.tw-ml-\[38px\] {
    margin-left: 38px
}

.tw-box-border {
    box-sizing: border-box
}

.tw-block {
    display: block
}

.tw-flex {
    display: flex
}

.tw-h-\[10px\] {
    height: 10px
}

.tw-h-\[2px\] {
    height: 2px
}

.tw-h-\[30px\] {
    height: 30px
}

.tw-h-\[70px\] {
    height: 70px
}

.tw-h-\[90px\] {
    height: 90px
}

.tw-h-auto {
    height: auto
}

.tw-h-full {
    height: 100%
}

.tw-max-h-\[350px\] {
    max-height: 350px
}

.tw-max-h-\[400px\] {
    max-height: 400px
}

.\!tw-min-h-0 {
    min-height: 0 !important
}

.tw-w-\[10px\] {
    width: 10px
}

.tw-w-\[30px\] {
    width: 30px
}

.tw-w-\[70px\] {
    width: 70px
}

.tw-w-\[90px\] {
    width: 90px
}

.tw-w-full {
    width: 100%
}

.\!tw-min-w-0 {
    min-width: 0 !important
}

.tw-max-w-\[320px\] {
    max-width: 320px
}

.tw-max-w-\[650px\] {
    max-width: 650px
}

.tw-basis-1\/2 {
    flex-basis: 50%
}

.-tw-translate-x-1\/2 {
    --tw-translate-x: -50%
}

.-tw-translate-x-1\/2, .-tw-translate-y-1\/2 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-tw-translate-y-1\/2 {
    --tw-translate-y: -50%
}

.tw-rotate-45 {
    --tw-rotate: 45deg
}

.tw-rotate-45, .tw-scale-\[-1\] {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.tw-scale-\[-1\] {
    --tw-scale-x: -1;
    --tw-scale-y: -1
}

.tw-items-center {
    align-items: center
}

.tw-justify-center {
    justify-content: center
}

.tw-gap-\[16px\] {
    gap: 16px
}

.tw-overflow-hidden {
    overflow: hidden
}

.tw-rounded-\[16px\] {
    border-radius: 16px
}

.tw-rounded-\[4px\] {
    border-radius: 4px
}

.tw-rounded-full {
    border-radius: 9999px
}

.tw-border {
    border-width: 1px
}

.tw-border-\[2px\] {
    border-width: 2px
}

.tw-border-r-2 {
    border-right-width: 2px
}

.tw-border-t-2 {
    border-top-width: 2px
}

.tw-border-solid {
    border-style: solid
}

.tw-border-\[var\(--comment-border\)\] {
    border-color: var(--comment-border)
}

.tw-border-\[var\(--form-blue-text\)\] {
    border-color: var(--form-blue-text)
}

.tw-border-blue-600 {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235/var(--tw-border-opacity))
}

.tw-bg-\[\#eaede2\] {
    --tw-bg-opacity: 1;
    background-color: rgb(234 237 226/var(--tw-bg-opacity))
}

.tw-bg-\[var\(--form-red-text\)\] {
    background-color: var(--form-red-text)
}

.tw-bg-transparent {
    background-color: initial
}

.tw-bg-no-repeat {
    background-repeat: no-repeat
}

.tw-object-contain {
    -o-object-fit: contain;
    object-fit: contain
}

.tw-p-\[24px\] {
    padding: 24px
}

.tw-p-\[8px\] {
    padding: 8px
}

.tw-px-\[16px\] {
    padding-left: 16px;
    padding-right: 16px
}

.tw-py-\[2px\] {
    padding-top: 2px;
    padding-bottom: 2px
}

.tw-py-\[8px\] {
    padding-top: 8px;
    padding-bottom: 8px
}

.tw-pl-\[24px\] {
    padding-left: 24px
}

.tw-pt-\[90px\] {
    padding-top: 90px
}

.tw-text-center {
    text-align: center
}

.tw-text-\[14px\] {
    font-size: 14px
}

.tw-text-\[15px\] {
    font-size: 15px
}

.tw-text-\[17px\] {
    font-size: 17px
}

.tw-text-\[20px\] {
    font-size: 20px
}

.tw-text-\[24px\] {
    font-size: 24px
}

.tw-text-\[30px\] {
    font-size: 30px
}

.tw-font-bold {
    font-weight: 700
}

.tw-font-semibold {
    font-weight: 600
}

.tw-uppercase {
    text-transform: uppercase
}

.tw-leading-normal {
    line-height: 1.5
}

.tw-leading-tight {
    line-height: 1.25
}

.tw-text-\[var\(--form-blue-text\)\] {
    color: var(--form-blue-text)
}

.tw-text-\[var\(--form-red-text\)\] {
    color: var(--form-red-text)
}

.tw-text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235/var(--tw-text-opacity))
}

.tw-text-primary {
    color: var(--color-primary)
}

.tw-text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38/var(--tw-text-opacity))
}

.tw-shadow-md {
    --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

:root {
    --color-primary: #0b1c4b;
    --color-secondary: #f85a1b
}

*, ::backdrop, :after, :before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #3b82f680;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia:
}

*, :after, :before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb
}

:after, :before {
    --tw-content: ""
}

body {
    min-width: 360px
}

.hl-accent {
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(220 38 38/var(--tw-text-opacity))
}

.hl-secondary {
    font-weight: 700;
    color: var(--color-secondary)
}

.myth {
    margin-bottom: 20px;
    border-radius: 16px;
    background-color: var(--color-primary);
    padding: 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.375;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.quotation {
    margin-bottom: 1.25rem;
    margin-top: 1.75rem;
    border-radius: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(245 247 247/var(--tw-bg-opacity));
    padding-left: 2rem;
    padding-right: 2rem
}

.quotation__wrap {
    position: relative;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

.quotation__wrap > p:first-child:before {
    content: ",,";
    position: absolute;
    left: 0;
    top: -.75rem;
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    font-size: 100px;
    font-style: normal;
    line-height: 1;
    letter-spacing: -12px
}

.quotation__wrap > p:first-child:after {
    content: "";
    background: url(../images/ava-doc.jpg) no-repeat 50%/contain;
    position: absolute;
    left: 36px;
    top: -24px;
    height: 48px;
    width: 48px;
    border-radius: 9999px;
    --tw-shadow: 0 1px 2px 0 #0000000d;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.quotation__wrap > p {
    margin-bottom: 0;
    font-size: 21px;
    line-height: 1.375
}

.quotation__wrap > p:not(:last-child) {
    margin-bottom: .75rem
}

.quotation__wrap > span {
    font-size: 19px;
    line-height: 1.375
}

.benefits-list {
    padding-left: 16px
}

.benefits-list > li {
    display: flex;
    align-items: center
}

.benefits-list > li:before {
    content: "";
    margin-right: 8px;
    display: inline-block;
    height: 24px;
    width: 24px;
    flex-shrink: 0;
    background: url(../images/checkmark.png) no-repeat 50%/contain
}

.benefits-list > li:not(:last-child) {
    margin-bottom: 12px
}

.hyper {
    margin-bottom: 24px
}

.hyper__title {
    text-align: center
}

.hyper__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px
}

@media (min-width: 768px) {
    .hyper__container {
        gap: 32px
    }
}

.hyper__list {
    list-style-position: inside;
    list-style-type: decimal;
    counter-reset: hyperList
}

.hyper__list > li {
    display: flex;
    align-items: center;
    gap: 16px
}

.hyper__list > li:before {
    content: counter(hyperList);
    counter-increment: hyperList;
    display: flex;
    height: 32px;
    width: 32px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 2px;
    font-size: 30px;
    font-weight: 700
}

@media (min-width: 768px) {
    .hyper__list > li:before {
        height: 48px;
        width: 48px;
        font-size: 36px
    }
}

.hyper__list > li:not(:last-child) {
    margin-bottom: 12px
}

.diagram-list > li {
    display: flex;
    align-items: center;
    gap: .75rem
}

.diagram-list > li:not(:last-child) {
    margin-bottom: .5rem
}

.diagram-list__value {
    width: 70px;
    flex-shrink: 0;
    border-radius: .5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    text-align: center;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    --tw-shadow: 0 1px 2px 0 #0000000d;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.diagram-list > li:first-child .diagram-list__value {
    background-color: #f86633
}

.diagram-list > li:nth-child(2) .diagram-list__value {
    background-color: #cb9965
}

.diagram-list > li:nth-child(3) .diagram-list__value {
    background-color: #99aa32
}

.diagram-list > li:nth-child(4) .diagram-list__value {
    background-color: #f86602
}

.diagram-list > li:nth-child(5) .diagram-list__value {
    background-color: #ab00fe
}

.diagram-list > li:nth-child(6) .diagram-list__value {
    background-color: #f61701
}

.diagram-list > li:nth-child(7) .diagram-list__value {
    background-color: #f93463
}

.dialog {
    --dialog-bg-rgb: 0 28 76;
    --dialog-bg-color: rgb(var(--dialog-bg-rgb)/1);
    --dialog-bg-transp: rgb(var(--dialog-bg-rgb)/0.7);
    --dialog-text-color: #242424;
    margin-bottom: 16px;
    display: flex;
    gap: 16px
}

.dialog__avatar {
    height: 60px;
    width: 60px;
    flex-shrink: 0;
    border-radius: 9999px;
    background-color: var(--dialog-bg-color);
    --tw-shadow: 0 1px 2px 0 #0000000d;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dialog__avatar.dialog__avatar--svg {
    padding: 12px
}

.dialog__avatar-inner {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.dialog__content {
    position: relative;
    --tw-translate-y: 8px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    align-self: flex-start;
    border-radius: 1rem;
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: var(--dialog-bg-color) var(--tw-gradient-from-position);
    --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: var(--dialog-bg-transp) var(--tw-gradient-to-position);
    padding: .75rem 1rem;
    color: var(--dialog-text-color)
}

.dialog__content:before {
    content: "";
    position: absolute;
    top: 8px;
    right: calc(100% - 16px);
    height: 16px;
    width: 16px;
    transform-origin: left;
    --tw-rotate: 45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    background-color: var(--dialog-bg-color)
}

.dialog__content:after {
    content: url(../images/quot.svg);
    position: absolute;
    left: .5rem;
    top: .25rem;
    height: 1.25rem !important;
    width: 1.25rem !important
}

.dialog__content > h2 {
    margin: 0;
    font-size: 19px;
    line-height: 1.15
}

.dialog__content > p {
    margin-bottom: 0;
    color: inherit;
    font-weight: inherit
}

.dialog__content > p:not(:last-child) {
    margin-bottom: 1rem
}

.interviewer.dialog {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.15;
    --dialog-bg-rgb: 0 28 76;
    --dialog-text-color: #fff
}

.interviewer .dialog__content:after {
    content: none
}

.dialog.star {
    --dialog-bg-color: #7dd3fccc
}

.dialog.doctor {
    --dialog-bg-color: #e5e7eb
}

.win-list {
    counter-reset: winList;
    margin-bottom: 1rem
}

.win-list > li {
    position: relative;
    border-radius: .75rem;
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
    --tw-gradient-from: #a3a3a3 var(--tw-gradient-from-position);
    --tw-gradient-to: #a3a3a300 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: #7dd3fc var(--tw-gradient-to-position);
    background-attachment: fixed;
    padding: 1rem;
    --tw-shadow: 0 1px 2px 0 #0000000d;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.win-list > li ul {
    margin-bottom: .5rem
}

.win-list > li ul li {
    list-style-position: inside !important;
    list-style-type: disc !important
}

.win-list > li:before {
    content: counter(winList);
    counter-increment: winList;
    float: left;
    margin-right: 1rem;
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.win-list > li:not(:last-child) {
    margin-bottom: 1rem !important
}

.win-list__heading {
    margin-bottom: 1.25rem;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25
}

.win-list__paragraph:not(:last-child) {
    margin-bottom: .5rem
}

mark {
    --color1: #00ff7f;
    --bg-height: 100%;
    all: unset;
    background-image: linear-gradient(var(--color1), var(--color1));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 var(--bg-height);
    animation: highlight 1.5s ease-out 1;
    animation-fill-mode: forwards;
    animation-play-state: paused
}

@keyframes highlight {
    to {
        background-size: 100% var(--bg-height)
    }
}

.benefit-list > li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-top: .5rem;
    padding-bottom: .5rem
}

.benefit-list > li:before {
    content: "\ea02";
    font-family: iconset;
    flex-shrink: 0;
    font-size: 32px;
    --tw-text-opacity: 1;
    color: rgb(22 163 74/var(--tw-text-opacity))
}

.ingr__list {
    margin: 0 0 16px;
    display: flex;
    list-style-type: none;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0
}

.ingr__item {
    flex-grow: 1;
    flex-basis: calc(50% - 8px);
    list-style-type: none;
    border-radius: 16px;
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-primary) var(--tw-gradient-from-position);
    --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: var(--color-secondary) var(--tw-gradient-to-position);
    padding: 3px
}

.ingr__wrapper {
    position: relative;
    z-index: 0;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: inherit;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    padding: 12px 8px
}

.ingr__image {
    height: 96px;
    width: 96px;
    flex-shrink: 0
}

@media (min-width: 1024px) {
    .ingr__image {
        height: 144px;
        width: 144px
    }
}

.ingr__image > img {
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.ingr__title {
    margin: 0 0 4px;
    font-size: 24px;
    text-transform: uppercase;
    line-height: 1.15
}

.ingr__item:last-child .ingr__title {
    margin-bottom: 0
}

.ingr__descr {
    margin: 0;
    padding: 0
}

.disc-list-style {
    margin-bottom: 16px;
    list-style-type: disc;
    -moz-columns: 2;
    column-count: 2;
    padding-left: 24px
}

.disc-list-style > li:not(:last-child) {
    margin-bottom: 12px
}

@media not all and (min-width: 1024px) {
    .max-lg\:tw-hidden {
        display: none
    }
}

@media (min-width: 640px) {
    .sm\:tw-ml-\[76px\] {
        margin-left: 76px
    }
}

@media (min-width: 768px) {
    .md\:tw-float-right {
        float: right
    }

    .md\:tw-float-left {
        float: left
    }

    .md\:tw-ml-\[16px\] {
        margin-left: 16px
    }

    .md\:tw-mr-\[16px\] {
        margin-right: 16px
    }

    .md\:tw-w-1\/3 {
        width: 33.333333%
    }

    .md\:tw-w-1\/4 {
        width: 25%
    }

    .md\:tw-min-w-\[220px\] {
        min-width: 220px
    }

    .md\:tw-max-w-\[50\%\] {
        max-width: 50%
    }

    .md\:tw-max-w-\[768px\] {
        max-width: 768px
    }
}