html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

*, *::after, *::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

ul[class], ol[class] {
    padding: 0
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
    margin: 0
}

ul[class] {
    list-style: none
}

img {
    display: block
}

input, button, textarea, select {
    font: inherit
}

a {
    text-decoration: none
}

.subtitle, .btn {
    font-family: "Montserrat", sans-serif;
    font-weight: 400
}

.reviews__review, .reviews__date span, .faq__quest, .title {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-style: italic
}

html, body {
    scroll-behavior: smooth
}

body {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    background-color: rgb(229 249 255);
    line-height: 130%
}

a {
    color: #fff
}

.container {
    max-width: 1220px;
    padding: 0;
    margin: 0 auto
}

.btn {
    font-size: 17px;
    border-radius: 10px;
    color: #fff;
    text-transform: uppercase;
    border: 2px solid #546c81;
    padding: 13px 30px;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    background-color: #546c81;
}

.btn:hover {
    background-color: rgb(120 113 108);
    color: #000
}

.title {
    margin-bottom: 10px;
    color: rgb(55 65 81);
    text-transform: uppercase;
    font-size: 37px;
    line-height: 120%
}

.subtitle {
    margin-bottom: 50px;
    font-size: 22px;
    color: rgb(55 65 81);
    line-height: 125%;
    text-transform: uppercase
}

.title, .subtitle {
    padding-left: 30px;
    padding-right: 150px
}

.prev, .about, .item, .enter, .faq, .reviews {
    margin-bottom: 50px
}

.faq__item.faq__item--active {
    background-color: #323232
}

.header {
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    position: fixed;
    left: 0;
    right: 0;
    background-color: rgb(231 229 228);
    z-index: 1000
}

.header__inner {
    padding: 5px 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.header__logo {
    opacity: 0.99;
}

.header__menu {
    background-color: #546c81;
    padding: 20px 0;
    -webkit-box-shadow: 1px 5px 7px rgba(0, 0, 0, .2);
    box-shadow: 1px 5px 7px rgba(0, 0, 0, .2);
    position: relative;
    z-index: 1;
    border-radius: 0;
}

.header__menu-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 80px;
    text-transform: uppercase
}

.header__menu-link {
    font-size: 17px;
    color: #fcfcfc;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s
}

.header__menu-link:hover {
    color: #ffa928
}

.header__menu-link:active {
    color: #ffa928
}

.header__menu-itembtn {
    display: none
}

.header__burger {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    display: none;
    position: relative;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    width: 30px;
    height: 30px;
    cursor: pointer
}

.header__burger span {
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    height: 2px;
    width: 30px;
    background-color: #fff;
    position: absolute
}

.header__burger span:nth-child(1) {
    -webkit-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    transform: translateY(-7px)
}

.header__burger span:nth-child(3) {
    -webkit-transform: translateY(7px);
    -ms-transform: translateY(7px);
    transform: translateY(7px)
}

.prev {
    padding-top: 116px
}

.prev__inner {
    color: rgb(55 65 81);
    height: auto;
    overflow: hidden;
    background-image: url(/img/catalog2.png);
    background-repeat: no-repeat;
    background-size: cover;
    /*background-position: -30% -30%;*/
    border-radius: 0 0 30px 30px
}

.prev__window {
    padding: 50px 20px 50px 50px;
    max-width: 60%;
    background: rgb(125 130 147 / 80%);
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px)
}

.prev__textbox {
    max-width: 500px
}

.prev__title {
    font-size: 40px;
    line-height: 120%;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 20px
}

.prev__descr {
    font-size: 20px;
    line-height: 135%;
    letter-spacing: 2px;
    opacity: .8;
    margin-bottom: 60px
}

.about__inner {
    padding: 0 50px;
    margin: 0 auto;
    text-align: start
}

.about__content {
    background-color: #546c81;
    border: 2px solid rgba(204, 204, 204, .05);
    border-radius: 20px;
    color: #fff;
    padding: 100px 70px;
    position: relative;
    overflow: hidden
}

.about__content::after {
    content: url(../img/logomini.svg);
    position: absolute;
    opacity: .02;
    top: 40px;
    right: 30px
}

.about__title {
    font-size: 27px;
    text-transform: uppercase;
    margin-bottom: 50px;
    line-height: 120%;
    display: inline-block;
    position: relative
}

.about__title::before {
    content: "";
    width: 80%;
    height: 3px;
    background-color: #e5e7eb;
    position: absolute;
    bottom: -25px;
    left: 0
}

.about__text {
    font-size: 17px;
    letter-spacing: 1.5px;
    line-height: 125%
}

.item__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px
}

.item__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 2px solid rgba(204, 204, 204, .05);
    max-width: 49%;
    padding: 30px 30px 30px 30px;
    border-radius: 30px;
    color: #fff;
    background-color: #546c81
}

.item__img {
    width: 30px;
    height: 40px;
    margin-right: 30px;
    border: 2px solid rgba(204, 204, 204, .05);
    background-color: #dee8ff;
    width: 120px;
    height: 90px;
    border-radius: 15px;
    padding: 20px 25px
}

.item__text-title {
    font-size: 18px;
    line-height: 130%;
    text-transform: uppercase;
    margin-bottom: 10px
}

.item__text-descr {
    font-size: 15px
}

.enter {
    color: #fff
}

.enter__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px
}

.enter__subtitle {
    margin-bottom: 140px
}

.enter__item {
    border: 2px solid rgba(204, 204, 204, .05);
    border-radius: 32px;
    background-color: #546c81;
    max-width: 33%;
    padding: 70px 30px 70px 25px;
    min-height: 350px;
    position: relative
}

.enter__item:nth-child(1)::before {
    content: "1"
}

.enter__item:nth-child(2)::before {
    content: "2"
}

.enter__item:nth-child(3)::before {
    content: "3"
}

.enter__item::before {
    position: absolute;
    border-bottom: 1px solid #546c81;
    font-size: 60px;
    width: 95px;
    height: 95px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50px;
    padding-bottom: 10px;
    background-color: #546c81;
    top: -55px;
    left: 40px
}

.enter__item-title {
    color: rgb(156 163 175);
    font-size: 22px;
    margin-bottom: 22px;
    text-transform: uppercase;
    line-height: 130%
}

.enter__item-descr {
    font-size: 15px;
    letter-spacing: 1.7px;
    color: #ccc
}

.faq {
    color: #fff
}

.faq__item {
    border: 2px solid rgba(204, 204, 204, .05);
    padding: 40px 50px 40px 30px;
    border-radius: 10px;
    margin-bottom: 10px;
    max-width: 80%;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    background-color: #202020
}

.faq__quest {
    font-size: 20px;
    text-transform: uppercase;
    position: relative;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    color: rgb(156 163 175)
}

.faq__answer {
    font-size: 17px;
    letter-spacing: 1.5px;
    color: #ccc;
    padding-right: 50px;
    margin-top: 20px
}

.faq__answer li {
    padding-right: 50px
}

.faq__answer-torlink {
    display: inline-block;
    margin-bottom: 10px;
    word-break: break-all
}

.reviews__caro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.reviews__img {
    display: inline-block;
    width: 69px;
    height: 69px
}

.reviews__item {
    max-width: 33%;
    padding: 40px 30px 40px 30px;
    border: 2px solid rgba(204, 204, 204, .05);
    background-color: #546c81;
    border-radius: 20px;
    color: #fff
}

.reviews__item-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 40px
}

.reviews__author {
    font-size: 20px;
    word-break: break-all;
    line-height: 120%;
    margin-bottom: 10px
}

.reviews__date span {
    color: rgb(156 163 175);
}

.reviews__review {
    opacity: .8
}

.footer {
    padding: 0 0 30px 0;
    background-color: #232323;
    color: #fff;
    opacity: .5;
    text-align: center;
    font-size: 12px
}

.footer__inner {
    border-bottom: 2px solid rgba(204, 204, 204, .05);

    padding-bottom: 20px
}

.footer__sociallink {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 15px;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media (max-width: 1100px) {
    .title, .subtitle {
        padding-right: 250px
    }

    .header__menu-list {
        gap: 50px
    }

    .prev__inner {
        background-position: top 0px right 0
    }

    .item__item {
        max-width: 80%;
        margin: 0 auto
    }

    .enter__inner {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .enter__item {
        max-width: 60%;
        margin: 0 auto 80px auto
    }

    .faq__item {
        margin: 0 auto 10px auto
    }

    .faq__quest {
        font-size: 18px
    }

    .faq__quest::after {
        right: 20px
    }

    .faq__answer {
        font-size: 15px
    }

    .reviews__caro {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .reviews__item {
        max-width: 50%
    }

    .reviews__item-box {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }
}

@media (max-width: 900px) {
    .title {
        font-size: 30px
    }

    .subtitle {
        font-size: 19px
    }

    .header {
        -webkit-box-shadow: 1px 5px 7px rgba(0, 0, 0, .2);
        box-shadow: 1px 5px 7px rgba(0, 0, 0, .2)
    }

    .header__logo-img {
        max-width: 90%
    }

    .header__menu {
        display: none
    }

    .prev {
        padding-top: 58px
    }

    .prev__window {
        padding: 50px 30px 70px 30px;
        max-width: 100%;
        background: rgb(156 163 175 / 80%)
    }

    .prev__title {
        font-size: 35px
    }

    .prev__descr {
        font-size: 17px
    }

    .about__inner {
        padding: 0 25px
    }

    .faq__item {
        max-width: 90%
    }

    .faq__quest {
        font-size: 17px;
        padding-right: 100px;
        line-height: 130%
    }

    .faq__answer {
        padding-right: 80px
    }
}

@media (max-width: 720px) {
    .prev, .about, .item, .enter, .faq, .reviews {
        margin-bottom: 70px
    }

    .title, .subtitle {
        padding: 0 50px 0 10px
    }

    .subtitle {
        margin-bottom: 50px;
        font-size: 16px
    }

    .header.header--active .header__menu {
        left: 0
    }

    .header.header--active {
        background-color: rgba(32, 32, 32, .96)
    }

    .header.header--active .header__burger span {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        background-color: #ffa928
    }

    .header.header--active .header__burger span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .header.header--active .header__burger span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

    .header.header--active .header__burger span:nth-child(2) {
        opacity: 0
    }

    .prev__window {
        max-width: 100%
    }

    .prev__title {
        font-size: 27px
    }

    .prev__descr {
        font-size: 15px
    }

    .about__inner {
        padding: 0 10px
    }

    .about__content {
        padding: 70px 35px
    }

    .about__title {
        font-size: 21px
    }

    .about__title::before {
        width: 60%
    }

    .about__text {
        font-size: 14px
    }

    .item__item {
        max-width: 100%
    }

    .item__text-title {
        font-size: 15px
    }

    .item__text-descr {
        font-size: 13px;
        letter-spacing: 1.2px
    }

    .enter__subtitle {
        margin-bottom: 100px
    }

    .enter__item {
        max-width: 100%;
        min-height: 300px
    }

    .faq__item {
        max-width: 100%;
        padding: 25px 10px 25px 25px
    }

    .faq__quest {
        font-size: 15px;
        padding-right: 60px
    }

    .faq__quest::after {
        top: 3px;
        right: 10px
    }

    .faq__answer li {
        padding-right: 50px
    }

    .reviews__item {
        max-width: 100%
    }
}

@media (max-width: 450px) {
    .title {
        font-size: 19px
    }

    .subtitle {
        font-size: 15px
    }

    .header__btn {
        font-size: 16px;
        padding: 12px 22px
    }

    .prev__inner {
        height: 500px;
        background-position: 15% 10%
    }

    .prev__window {
        padding: 130px 20px 130px 20px
    }

    .prev__btn {
        font-size: 17px;
        padding: 13px 20px
    }

    .about__inner {
        padding: 0
    }

    .about__content {
        padding: 40px 10px 40px 20px
    }

    .about__content::after {
        right: -20px;
        top: 20px
    }

    .about__title {
        font-size: 17px
    }

    .about__text {
        font-size: 13px
    }

    .item__item {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
        padding: 50px 20px
    }

    .item__img {
        padding: 20px 0;
        display: inline-block;
        width: 100px;
        margin-right: 0;
        margin-bottom: 30px
    }

    .enter__item {
        padding-right: 20px
    }

    .enter__item-title {
        font-size: 18px
    }

    .enter__item-descr {
        font-size: 14px
    }

    .faq__quest::after {
        top: 10px
    }

    .faq__answer {
        padding-right: 30px
    }
}

@media (max-width: 350px) {
    .faq__answer {
        font-size: 12px
    }

    .reviews__author {
        font-size: 16px;
        margin-bottom: 5px
    }

    .reviews__date {
        font-size: 14px
    }

    .reviews__review {
        font-size: 16px
    }
}

@media (max-width: 340px) {
    .btn {
        font-size: 14px;
        padding: 11px 17px
    }

    .prev__window {
        padding: 100px 20px
    }
}

@media (max-height: 580px) {
    .header__menu {
        padding: 20px 0 20px 20px
    }
}

.icon {
    background-image: url(/spritesheet-min.png);
}
.icon-logo-32 {
    background-position: -57px -195px;
    height: 32px;
    width: 32px;
}
.icon {
    background-repeat: no-repeat;
    display: inline-block;
    flex-shrink: 0;
    transition-duration: 0ms;
    vertical-align: middle;
}

.logoh1 {
    display: inline-block;
}
.logoh1 {
    vertical-align: middle;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    margin-left: .25rem;
    color: rgb(168 162 158);
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
}