@import url(css2-1);
@import url(css2-2);
@import url(css2-1);
@import url(css2-2);
@import url(css2-1);
@import url(css2-2);
/* SIDEBAR BLOCK */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    background-image: url(asset/02d5a46237feba4fba14.webp);

    background-size: cover;
    background-repeat: no-repeat;
    z-index: 98;
    /* transition: all 0.5s ease; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 250px;
    overflow: visible;

    @media screen and (max-width: 620px) {
        opacity: 0;
    }
}

/* Ensure the sidebar hides smoothly when the checkbox is unchecked */
.toggle-checkbox:not(:checked)~.sidebar {
    @media screen and (max-width: 620px) {
        transform: translateX(-100%);
        /* Move off-screen */
        opacity: 0;
        /* Hide the sidebar */
        transition: transform 0.5s ease-in-out, opacity 4s;
        /* Smooth transition */
    }
}

/* Ensure the side_icon hides smoothly when the checkbox is unchecked */
/*.toggle-checkbox:not(:checked) + .side_icon {*/
/*    @media screen and (max-width: 620px) {*/
/*        transform: translateX(0); !* Move to initial position *!*/
/*        opacity: 1; !* Ensure it is fully visible *!*/
/*        transition: transform 0.5s ease-in-out; !* Smooth transition *!*/
/*    }*/
/*}*/

.sidebar_top {
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    flex-direction: column;
}

.sidebar_top i {
    align-self: end;
    font-size: 30px;
}

.sidebar_top img {
    margin-top: 25px;
    width: 150px;
    align-self: center;
}

.sidebar_links {
    display: flex;
    /*padding-left: 20px;*/
}

.sidebar_links ul {
    list-style: none;
    align-self: center;
    padding: 0;
    width: 100%;
}

.sidebar_links ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
    padding-top: 10px;
    position: relative;
    cursor: pointer;

    /* Needed to position the pseudo-element */
    /*background-color: #f8f8f8; !* Light background to enhance shadow visibility *!*/
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.sidebar_links ul li::before,
.sidebar_links ul li .submenu_contacts::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-start-end-radius: 12px;
    border-end-end-radius: 12px;
    /*background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.63), rgba(230, 230, 230, 0.89)); !* Subtle gradient *!*/
    /*mask-image: radial-gradient(circle, #000, transparent);*/
    z-index: -1;
    /* Ensure it does not cover the content */
}

.sidebar_links ul li::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 86%;
    /* Adjust as necessary */
    height: 0.5px;
    /* Same thickness as your original border */
    background-color: #ffffff;
    /* Same color as your original border */
    left: 7%;
    /* Centers the border */
}

.sidebar_links ul li:last-child::after {
    content: none;
}

.submenu {
    display: none;
    position: absolute;
    z-index: 10;
    left: 100%;
    /* Submenu appears to the right of the menu item */
    top: 0;
    min-width: 190px;
    max-width: 210px;
    z-index: 1000;
    background-image: url(asset/02d5a46237feba4fba14.webp);
    background-size: cover;
    background-repeat: no-repeat;
    border-start-end-radius: 12px;
    border-end-end-radius: 12px;
    flex-direction: column;

    /* Ensures submenu items are stacked vertically */
    @media screen and (max-width: 620px) {
        min-width: 170px;
        max-width: 190px;
    }
}

.submenu::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #000000bb;
}

.submenu_contacts {
    display: none;
    position: absolute;
    left: 100%;
    /* Submenu appears to the right of the menu item */
    top: 0;
    min-width: 190px;
    max-width: 250px;
    z-index: 1000;
    background-image: url(asset/02d5a46237feba4fba14.webp);
    background-size: cover;
    background-repeat: no-repeat;
    border-start-end-radius: 12px;
    border-end-end-radius: 12px;
    flex-direction: column;

    /* Ensures submenu items are stacked vertically */
    @media screen and (max-width: 620px) {
        min-width: 180px;
        max-width: 200px;
    }
}

.submenu_contacts::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #000000bb;

}

.sidebar_font {
    @media screen and (max-width: 620px) {
        font-size: 13px;
    }
}

.sidebar_links ul li:hover .submenu,
.sidebar_links ul li:hover .submenu_contacts {
    display: flex;
    /* Displays the submenu as a flex container */
}

.submenu li a,
.submenu_contacts li a {
    display: block;
    /* Ensures links in submenu take up full width of the submenu */
    padding: 10px;
    /* Consistent padding */
    color: white;
    /* Text color */
    white-space: normal;
    word-wrap: break-word;
}

.submenu li,
.submenu_contacts li {
    /*border-bottom: 1px solid #888; !* Adds a separator between submenu items *!*/
    width: 10px;
}

.sidebar_links ul li a {
    display: flex;
    /* Enables flexbox */
    flex-direction: column;
    /* Stacks child elements vertically */
    align-items: center;
    /* Centers them horizontally */
    text-align: center;
    /* Ensures text alignment is centered */
    padding: 5px;
    text-decoration: none;
    color: #fff;
}

.sidebar_links ul li:hover>a {
    text-decoration: none;
    color: #b7b7b7;
    /*text-decoration: underline;*/
}


.sidebar_links ul li i {
    font-size: 25px;
    padding-bottom: 5px;
}

.sidebar_contacts {
    margin: 10px;
}

.info_blocks_item {
    margin-bottom: 20px;
}

/*add*/
.info_blocks_item_details {
    color: #fff;
    margin-top: 2px;
    /*text-shadow: 1px 1px 2px #ffffff; !* Shadow adds depth *!*/

}

.info_blocks_item_title span {
    text-decoration: underline;
}

/*.underline{*/
/*    text-decoration: underline;*/
/*}*/

.messengers_block {
    display: flex;
    /*flex-direction: column;*/
    align-items: center;
    justify-content: space-around;
    /*margin-top: 30px;*/
}

.social {
    display: flex;
    flex-direction: column;
}

.social_btn {
    height: 40px;
    display: flex;
    /* Сделать ссылку блочным элементом */
    align-items: center;
    /* Выровнять текст по центру */
    justify-content: center;
    color: #fff;
    /* Пример цвета текста (опционально) */
    text-decoration: none;
    /* Убрать подчеркивание (опционально) */
    border: none;
    /* Убрать границу (опционально) */
    border-radius: 5px;
    /*margin-bottom: 25px;*/
    /*width: 200px;*/
}

.social_btn.quiz {
    background-color: #d60404;
    width: 200px;
    padding-top: 5px;
    font-size: 14px;
}

.whatsapp_btn,
.telegram_btn {
    width: 100%;
    /* Full width of their container */
    height: 100%;
    /* Full height of their container */
    border-radius: 5px;
}

.whatsapp_btn {
    background-color: #30BF39;
}

.telegram_btn {
    background-color: #33AAE0;
}


.quiz_btn {
    width: 150px;
    height: 40px;
}


.sidebar.close {
    width: 100px;

    @media screen and (max-width: 620px) {
        width: 85px;
    }
}

.sidebar.close .sidebar_top img {
    /*margin: 25px;*/
    margin-bottom: 10px;
    width: 100%;
    align-self: center;
}

.sidebar.close .sidebar_links ul li span {
    color: #fff;
    display: inline;
    font-size: 12px;

    @media screen and (max-width: 620px) {
        font-size: 12px;
    }
}

.sidebar.close .sidebar_links {
    justify-content: center;
}

.sidebar.close .sidebar_links ul {
    padding: 0;
}

.sidebar.close .sidebar_links ul li {
    width: 100%;
}


.sidebar.close .sidebar_contacts i {
    font-size: 20px;
}

.sidebar.close .sidebar_contacts span {
    display: none;
}

.sidebar.close .sidebar_contacts .social_btn {
    width: 50px;
    height: 50px;
}

.sidebar.close .sidebar_contacts .social_btn.quiz {
    width: 40px;
    height: 40px;
    padding: 0;
}

.sidebar.close .sidebar_contacts .social_btn.quiz i {
    margin-top: 10px;
    padding: 0;
    font-size: 20px;
}

.btrr {
    border-top-right-radius: 12px;
}

.bbrr {
    border-bottom-right-radius: 12px;
}

/* MAIN PART */
.main {
    position: relative;
    left: 100px;
    padding-left: 20px;
    padding-right: 20px;
    width: calc(100% - 100px);
}

/* ADAPTIVE PART */
@media (max-width: 420px) {
    .sidebar {
        width: 100%;
        font-size: 14px;
    }

    .social_btn {
        width: 40px;
    }

    /*.social, .messengers_block {*/
    /*    flex-direction: column;*/
    /*}*/

    /*.sidebar.close .social, .sidebar.close .messengers_block {*/
    /*    flex-direction: column;*/
    /*}*/

    /*.social_btn {*/
    /*    margin-right: 30px*/
    /*}*/


}


.header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    background: #fff
}

.header__top {
    overflow: hidden;
    transition: .5s
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: center
}

.header__inner-nav {
    justify-content: space-between;
    flex-wrap: wrap
}

.header__contacts {
    display: flex
}

.header__item {
    display: flex;
    padding: 0 30px
}

@media screen and (max-width: 370px) {
    .header__item {
        padding-right: 0
    }
}

.header__item:not(:last-child) {
    border-right: 1px solid #eee
}

.header__item-icon {
    margin-right: 6px
}

.header__item-title {
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
    color: #2c2f37;
    margin-bottom: 3px
}

@media screen and (max-width: 655px) {
    .header__item-title {
        font-size: 11px
    }
}

.header__item-info {
    font-weight: 700
}

@media screen and (max-width: 655px) {
    .header__item-info {
        font-size: 11px
    }
}

@media screen and (max-width: 1055px) {
    .header__item:last-child {
        display: none
    }
}

@media screen and (max-width: 855px) {
    .header__item:nth-child(3) {
        display: none
    }
}

@media screen and (max-width: 655px) {
    .header__item:nth-child(2) {
        display: none
    }
}

.header__nav {
    background-color: #464648;
    padding: 15px 0;
    color: #fff
}

.header a {
    color: #000
}

.header__link-to-messanger {
    display: flex
}

.nav {
    text-transform: uppercase;
    display: flex;
    list-style: none;
    gap: 30px;
    transition: .4s;
    overflow: hidden
}

@media screen and (max-width: 1055px) {
    .nav {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        max-height: 0
    }
}

.nav__active {
    max-height: 100vh;
    margin-bottom: 10px
}

.nav__item {
    transition: .3s;
    cursor: pointer
}

.nav__item:hover {
    color: rgba(255, 255, 255, .5)
}

.nav a {
    color: #fff
}

.logo {
    width: 130px;
    flex-grow: 1
}

.logo img {
    width: 130px;
    height: 100px
}

.social__icon {
    width: 38px;
    height: 38px
}

.connect {
    display: flex;
    align-items: center;
    gap: 10px
}

.connect__item {
    width: 46px;
    height: 46px;
    transition: .3s
}

.connect__item:hover {
    transform: scale(1.1)
}

@media screen and (max-width: 1055px) {
    .connect {
        margin-right: auto
    }
}

.burger {
    display: none;
    border: none;
    outline: none;
    background-color: rgba(0, 0, 0, 0);
    width: 37px;
    height: 27px;
    cursor: pointer
}

@media screen and (max-width: 1055px) {
    .burger {
        display: block
    }
}

.burger:hover .burger__item {
    background-color: rgba(255, 255, 255, .5)
}

.burger__item {
    display: block;
    width: 100%;
    background-color: #fff;
    height: 2px;
    position: relative;
    transition: .3s
}

.burger__item:before,
.burger__item:after {
    content: "";
    position: absolute;
    background-color: inherit;
    width: 100%;
    height: 100%
}

.burger__item:before {
    left: 0;
    top: -8px
}

.burger__item:after {
    left: 0;
    bottom: -8px
}

.quiz-link {
    text-align: center;
    display: inline-flex;
    align-content: center;
    justify-content: center;
    padding: 5px 10px;
    color: #fff;
    background: #3e5e18;
    border-radius: 20px;
    font-size: 24px;
    margin: 0 auto;
}

.quiz-link-promo {
    padding: 15px 60px;
    margin-top: 20px;
    border-radius: 14px;
    font-size: 20px;
}

.quiz-link-second {
    font-size: 20px;
    padding: 15px 60px;
    border-radius: 14px;
}

.quiz-link-chance {
    padding: 10px 60px;
    font-size: 24px;
}

.quiz-link-last {
    font-size: 20px;
    margin: 0 auto;
    padding: 10px 30px;
}

.quiz-link-modal {
    padding: 5px 20px;
    display: inline-flex;
    align-content: center;
    justify-content: center;
    font-size: 16px;
}

.quiz-link-box {
    text-align: center;
}

.preview {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom-left-radius: 75px;
    border-top-left-radius: 75px;
    margin-top: 10px;
    margin-left: 10px;
    padding-top: 60px;
    padding-bottom: 60px;
    overflow: hidden
}

.preview::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    background-image: url(asset/promo.webp);
    background-position: center;

    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(2px) brightness(65%);
    z-index: -1;
    border-bottom-left-radius: 75px
}

@media screen and (max-width: 1055px) {
    .preview {
        border-bottom-left-radius: 0px;
        border-top-left-radius: 0px;
        margin-top: 0px;
        margin-left: 0px;
    }

    .preview::before {
        border-bottom-left-radius: 0px;
        border-top-left-radius: 0px;
    }
}

.preview__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

@media screen and (max-width: 1055px) {
    .preview__inner {
        flex-direction: column
    }
}

.preview__info {
    /* max-width: 680px */
}

@media screen and (max-width: 1055px) {
    .preview__info {
        text-align: center
    }
}

.preview__title {
    font-size: 45px;
    line-height: 60px;
    font-weight: 600;
    margin-bottom: 70px;
    text-shadow: 1px 1px 3px #5c5858;
    color: #fff
}

@media screen and (max-width: 1055px) {
    .preview__title {
        font-size: 35px
    }
}

@media screen and (max-width: 655px) {
    .preview__title {
        font-size: 26px;
        line-height: 36px;
        margin-bottom: 30px
    }
}

.preview__paragraph {
    font-size: 24px;
    line-height: 31px;
    margin-bottom: 24px;
    color: #fff
}

@media screen and (max-width: 1055px) {
    .preview__paragraph {
        font-size: 18px
    }
}

@media screen and (max-width: 655px) {
    .preview__paragraph {
        font-size: 16px;
        line-height: 26px
    }
}

.form {
    width: 350px;
    padding: 50px 40px;
    background-color: #fff;
    border-radius: 15px;
    position: relative
}

@media screen and (max-width: 425px) {
    .form {
        max-width: 120%;
        padding: 40px 30px
    }
}

.form__title {
    margin-bottom: 24px;
    text-align: center
}

.form__input {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #d3d3d3;
    height: 41px;
    padding: 5px
}

.form__input::-moz-placeholder {
    color: #d3d3d3
}

.form__input::placeholder {
    color: #d3d3d3
}

.form__button-block {
    display: flex;
    justify-content: center;
    gap: 10px
}

.form__subtitle {
    color: gray;
    text-align: center
}

.form__or {
    display: inline-block;
    position: relative;
    color: gray
}

.form__or::before,
.form__or::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 40px;
    background-color: gray;
    transform: translateY(-50%);
    top: 50%
}

.form__or::before {
    left: -45px
}

.form__or::after {
    right: -45px
}

.form--horizontal {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 15px;
    background-color: rgba(0, 0, 0, 0);
    padding: 0
}

@media screen and (max-width: 820px) {
    .form--horizontal {
        flex-wrap: wrap
    }
}

.form--start {
    border-radius: 12px;
    width: 550px;
    padding: 50px
}

@media screen and (max-width: 590px) {
    .form--start {
        border-radius: 12px;
        padding: 30px
    }
}

@media screen and (max-width: 400px) {
    .form--start {
        padding: 20px
    }
}

.form__email-container {
    width: 100%;
    display: flex;
    gap: 5px
}

.form__mail-select {
    height: 40px;
    border-radius: 8px;
    border-color: #d3d3d3
}

.block {
    padding: 40px 0;
    border-top-left-radius: 75px;
    border-bottom-left-radius: 75px
}

@media screen and (max-width: 1055px) {
    .block {
        border-top-left-radius: 65px;
        border-bottom-left-radius: 65px
    }
}

.block__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px
}

@media screen and (max-width: 855px) {
    .block__inner {
        flex-direction: column;
        gap: 20px;
        text-align: center
    }
}

.block__img {
    max-width: 50%
}

@media screen and (max-width: 855px) {
    .block__img {
        max-width: none
    }
}

@media screen and (max-width: 855px) {
    .block__info {
        text-align: center !important
    }
}

.block__text {
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
    margin-bottom: 35px
}

@media screen and (max-width: 855px) {
    .block__text {
        text-align: center
    }
}

@media screen and (max-width: 600px) {
    .block__text {
        font-size: 18px;
        line-height: 26px
    }
}

.list {
    display: flex;
    flex-direction: column;
    text-align: left
}

.list__item {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 30px
}

.list__item-title {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    margin-bottom: 12px
}

@media screen and (max-width: 520px) {
    .list__item-title {
        font-size: 16px;
        line-height: 22px
    }
}

.list__item-text {
    font-weight: 400;
    font-size: 18px
}

@media screen and (max-width: 520px) {
    .list__item-text {
        font-size: 14px
    }
}

.list__img {
    width: auto;
    min-width: 60px;
    height: 60px;
    margin-right: 10px
}

@media screen and (max-width: 520px) {
    .list__img {
        min-width: 40px;
        max-height: 40px
    }
}

.linked-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-left: 50px;
    border-left: 3px solid #e1e1e1
}

@media screen and (max-width: 560px) {
    .linked-list {
        border-left: none;
        padding-left: 0px;
        gap: 30px
    }
}

.linked-list__item {
    background-color: #f7f7f7;
    padding: 30px;
    position: relative;
    max-width: 800px;
    border-radius: 12px
}

@media screen and (max-width: 820px) {
    .linked-list__item {
        max-width: 100%
    }
}

.linked-list-title {
    font-size: 22px;
    line-height: 32px;
    font-weight: 400;
    margin-bottom: 12px
}

@media screen and (max-width: 520px) {
    .linked-list-title {
        font-size: 16px;
        line-height: 22px
    }
}

.linked-list-text {
    font-weight: 400;
    font-size: 18px
}

@media screen and (max-width: 520px) {
    .linked-list-text {
        font-size: 14px
    }
}

.linked-list__img {
    width: 60px;
    height: 60px;
    margin-right: 10px
}

@media screen and (max-width: 520px) {
    .linked-list__img {
        max-width: 40px;
        max-height: 40px
    }
}

.triangle {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: rgba(0, 0, 0, 0) #f7f7f7 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    left: -15px;
    top: 30%
}

@media screen and (max-width: 560px) {
    .triangle {
        left: 30px;
        top: -20px;
        transform: rotate(90deg)
    }
}

.triangle:before {
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    border: 3px solid #57391f;
    border-radius: 20%;
    background-color: #fff;
    left: -47px;
    top: -10px
}

@media screen and (max-width: 560px) {
    .triangle:before {
        content: none
    }
}

.money-back {
    padding: 40px 0
}

.money-back__inner {
    display: flex;
    justify-content: center;
    gap: 30px
}

@media screen and (max-width: 620px) {
    .money-back__inner {
        flex-direction: column;
        gap: initial
    }
}

.money-back__img {
    max-width: 250px;
    margin-left: 35px;
    margin-right: 35px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -o-object-fit: cover;
    object-fit: cover
}

@media screen and (max-width: 1055px) {
    .money-back__img {
        display: none
    }
}

.difficults {
    border-top-right-radius: 75px;
    border-bottom-right-radius: 75px
}

@media screen and (max-width: 1055px) {
    .difficults {
        border-top-right-radius: 65px;
        border-bottom-right-radius: 65px
    }
}

@media screen and (max-width: 830px) {
    .difficults__inner {
        flex-direction: column
    }
}

.escort__inner {
    gap: 15px
}

@media screen and (max-width: 855px) {
    .escort img {
        display: none
    }
}

.carefully {
    border-top-right-radius: 75px;
    border-bottom-right-radius: 75px
}

@media screen and (max-width: 1055px) {
    .carefully {
        border-top-right-radius: 65px;
        border-bottom-right-radius: 65px
    }
}

.carefully__inner {
    gap: 15px
}

@media screen and (max-width: 1000px) {
    .carefully__inner {
        flex-direction: column
    }
}

.carefully__img {
    width: auto
}

@media screen and (max-width: 640px) {
    .carefully__img {
        display: none
    }
}

.return {
    position: relative;
    overflow: hidden;
    border-top-right-radius: 75px
}

.return::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    background-image: url(asset/4ccf7fece3d2eccc0bb7.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(2px) brightness(75%);
    z-index: -1;
    border-top-right-radius: inherit
}

@media screen and (max-width: 1055px) {
    .return {
        border-top-right-radius: 65px
    }
}

.return__inner {
    display: flex;
    gap: 30px;
    align-items: center;
    position: relative;
    z-index: 1
}

@media screen and (max-width: 900px) {
    .return__inner {
        flex-direction: column
    }
}

.return__info {
    color: #fff;
    text-align: center
}

@media screen and (max-width: 900px) {
    .return__info {
        order: -1
    }
}

.dropdown {
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.dropdown__trigger {
    padding: 16px;
    padding-left: 50px;
    border: 1px solid #3e5e18;
    position: relative;
    margin-bottom: 16px;
    margin-top: 8px;
    cursor: pointer;
    border-radius: 12px
}

.dropdown__trigger::before,
.dropdown__trigger::after {
    content: "";
    width: 12px;
    height: 3px;
    background-color: #57391f;
    position: absolute
}

.dropdown__trigger::before {
    transform: rotate(45deg);
    left: 15px;
    top: 45%
}

.dropdown__trigger::after {
    transform: rotate(-45deg);
    left: 21.5px;
    top: 45%
}

.dropdown__body {
    padding: 0 40px;
    transition: all .8s ease-in-out;
    max-height: 0
}

.dropdown__body--active {
    transition: max-height .8s ease-in-out;
    max-height: 300px
}

.footer {
    background-color: #202020;
    position: relative;
    left: 100px;
    width: calc(100% - 100px);
    padding: 30px 0;
    color: #b0b4be;
    font-size: 12px
}

@media screen and (max-width: 620px) {
    .footer {
        left: 0;
        width: 100%
    }
}

.footer__inner {
    display: flex;
    gap: 10px;
    justify-content: space-around
}

@media screen and (max-width: 676px) {
    .footer__inner {
        flex-wrap: wrap
    }
}

.footer__title {
    margin-bottom: 25px;
    font-size: 18px;
    color: #b0b4be;
    position: relative
}

.footer__about {
    width: 70%
}

@media screen and (max-width: 676px) {
    .footer__about {
        width: 100%
    }
}

.footer__about p {
    margin-bottom: 15px
}

.footer__nav {
    width: 25%;
    list-style: none
}

@media screen and (max-width: 676px) {
    .footer__nav {
        width: 100%
    }
}

.footer__nav__item {
    margin-bottom: 12px;
    position: relative;
    transition: .3s;
    cursor: pointer
}

.footer__nav__item:hover {
    color: #fff
}

@media screen and (max-width: 676px) {
    .footer__nav__item {
        padding-left: 15px
    }
}

.footer__nav__item::before,
.footer__nav__item::after {
    content: "";
    width: 8px;
    height: 1px;
    background-color: #57391f;
    position: absolute
}

.footer__nav__item::before {
    transform: rotate(45deg);
    left: -14px;
    top: 36%
}

@media screen and (max-width: 676px) {
    .footer__nav__item::before {
        left: 1px
    }
}

.footer__nav__item::after {
    transform: rotate(-45deg);
    left: -14px;
    top: 63%
}

@media screen and (max-width: 676px) {
    .footer__nav__item::after {
        left: 1px
    }
}

.footer__contacts .list__item {
    padding-left: 0
}

.footer__contacts .list__item-text {
    text-align: left
}

.footer a {
    color: #b0b4be;
    transition: .3s
}

.footer a:hover {
    color: #fff
}

.footer .material-symbols-outlined {
    color: #fff
}

.square {
    min-width: 36px;
    min-height: 36px;
    background-color: rgba(255, 255, 255, .1);
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.footer__about p {
    font-size: 13px
}

.popup {
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, .4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: .5s
}

.popup--active {
    opacity: 1;
    pointer-events: all
}

.popup__content {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    border-radius: 12px;
    background-color: #fff;
    transform: scale(0.5);
    transition: .4s;
    color: #000
}

.popup__content--active {
    transform: scale(1)
}

.news {
    padding-top: 25px
}

.news__container {
    width: 100%;
    max-width: 900px;
    padding: 0 15px;
    margin: 0 auto
}

.news__header {
    margin-bottom: 30px
}

.news__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 70px
}

@media screen and (max-width: 670px) {
    .news__list {
        margin-top: 0
    }
}

@media screen and (max-width: 670px) {
    .news__list {
        margin-bottom: 30px
    }
}

.news__title {
    font-size: 35px;
    line-height: 49px;
    text-transform: uppercase;
    font-weight: 400
}

@media screen and (max-width: 620px) {
    .news__company {
        margin-left: 30px
    }
}

.news__item {
    gap: 30px
}

.news__item-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: #777;
    align-items: center;
    text-align: center
}

.news__item-title {
    font-size: 18px;
    line-height: 24px;
    color: #000;
    transition: .2s
}

.news__item-title:hover {
    color: #007bff
}

.news__item-data {
    font-size: 12px;
    line-height: 19px;
    display: inline-flex;
    gap: 7px
}

.news__item-img {
    min-width: 250px;
    max-width: 750px
}

@media screen and (max-width: 670px) {
    .news__item-img {
        max-width: 100000px
    }
}

.news__item-img img {
    width: 400px;
    border-radius: 25px
}

@media screen and (max-width: 450px) {
    .news__item-img img {
        width: 320px
    }
}

@media screen and (max-width: 670px) {
    .news__item {
        flex-direction: column
    }
}

.float-left {
    float: left !important
}

@media screen and (max-width: 630px) {
    .float-left {
        float: none !important
    }
}

.padding {
    padding: 10px 20px 10px 0
}

.article_text {
    line-height: 2;
    margin-bottom: 50px;
    margin-top: 50px;
    color: #777
}

@media screen and (max-width: 630px) {
    .article_text {
        text-align: justify
    }
}

* {
    font-family: "Comfortaa", sans-serif
}

th {
    color: #b4b3b3;
    font-weight: 300
}

table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: rgba(0, 0, 0, 0)
}

.rating__table-rating {
    color: red;
    margin-bottom: 0
}

.rating__table-link {
    color: #6281c8
}

.rating__table tr {
    border-bottom: 1px solid #e5e5e5
}

.rating__table td {
    min-width: 150px;
    padding: 15px
}

@media screen and (max-width: 500px) {
    .rating__table td {
        max-width: 120px !important
    }
}

.rating__table th {
    padding: 6px
}

.rating__table td {
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5
}

table,
td,
th {
    border: 1px solid #e5e5e5;
    border-collapse: collapse
}

tr>td:nth-child(2) {
    text-align: center
}

tr>td:nth-child(3) {
    min-width: 300px
}

td {
    padding: 15px
}

.mw-300 {
    min-width: 300px
}

.w-200 {
    width: 200px
}

.star {
    height: 15px;
    width: 15px;
    display: inline-block;
    margin: 0
}

.ratings {
    padding-top: 220px
}

.overview {
    padding-top: 25px
}

.overview__company {
    margin-bottom: 16px
}

@media screen and (max-width: 620px) {
    .overview__company {
        margin-left: 30px
    }
}

.ratings__container,
.overview__container {
    width: 100%;
    max-width: 900px;
    padding: 0 15px;
    margin: 0 auto;
    margin-bottom: 30px
}

.ratings__header,
.overview__header {
    margin-bottom: 30px
}

.rating__table-link {
    font-size: 18px;
    font-weight: 600
}

@media screen and (max-width: 670px) {
    .ratings__list {
        margin-topm: 0
    }
}

@media screen and (max-width: 670px) {
    .ratings__list {
        margin-bottom: 30px
    }
}

.ratings__title,
.overview__title {
    font-size: 35px;
    line-height: 49px;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 16px
}

.ratings__item {
    display: flex;
    gap: 30px
}

.ratings__item-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: #777
}

.overview__description {
    margin-bottom: 50px;
    text-align: justify
}

.overview__title {
    text-align: center
}

.overview__descr {
    font-size: 16px;
    line-height: 24px;
    color: #777
}

.overview__block {
    display: flex;
    border: 1px solid #b4b3b3;
    padding: 25px;
    border-radius: 6px;
    max-width: 750px;
    margin: 0 auto;
    margin-bottom: 30px
}

.overview__block-logo {
    display: flex;
    align-items: center;
    margin-right: 20px
}

.overview__block-linkimg {
    min-width: 120px;
    max-width: 150px
}

@media screen and (max-width: 670px) {
    .overview__block {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px
    }

    .overview__block-linkimg {
        width: 100%
    }

    .overview__block-linktitle {
        font-size: 18px
    }

    .overview__block-logo {
        width: 100%;
        justify-content: center
    }
}

.overview__block-linktitle {
    text-decoration: none;
    color: #111;
    font-weight: 600;
    font-size: 20px
}

.overview__block-info {
    color: #777;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.overview__block-linkread {
    font-size: 12px;
    text-decoration: none
}

* {
    font-family: "Comfortaa", sans-serif
}

.article__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto
}

.article__logo {
    max-width: 500px;
    margin: 0 auto
}

.article__logo img {
    max-width: 200px
}

.article__descr,
.article__block-header {
    font-size: 24px;
    margin-bottom: 16px
}

@media screen and (max-width: 670px) {

    .article__descr,
    .article__block-header {
        font-size: 25px
    }
}

.article__block-header {
    text-align: center;
    margin: 1.8rem
}

.article__title {
    font-size: 35px;
    line-height: 39px
}

h3 {
    font-size: 22px
}

p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 1rem
}

section {
    margin-bottom: 0px
}

.article {
    padding-top: 220px;
    padding-left: 15px;
    padding-right: 15px
}

.article__block p {
    text-align: justify
}

.article__block ul {
    margin: 25px 0px
}

.article__block li {
    margin: 1rem
}

.article__info {
    display: flex;
    justify-content: center
}

.article__inner {
    margin: 30px 0
}

.article__info>div {
    display: flex;
    align-items: center;
    gap: 20px
}

@media screen and (max-width: 530px) {
    .article__info>div {
        flex-direction: column
    }
}

.article__info-logo img {
    width: 200px
}

.article__info-rating {
    display: flex;
    align-items: center
}

.article__info-rating>p {
    color: red;
    font-weight: 500;
    margin: 0
}

.article__info-main {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.article__info-stars {
    display: flex;
    margin-left: 25px
}

.article__info-details {
    color: #999
}

.article__info-table {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.article__info-table__item {
    display: flex;
    align-items: center;
    gap: 8px
}

.article__info-value {
    margin-left: 5px
}

.article__info-table>tbody,
tr,
td {
    border: none;
    padding: 0
}

.details_logo {
    height: 16px;
    margin-right: 10px;
    display: inline-block;
    margin-top: 0px;
    margin-bottom: 0px
}

.table {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    width: 100%;
    margin-bottom: 1rem;
    color: var(--bs-table-color);
    vertical-align: top;
    border-color: var(--bs-table-border-color)
}

.table>:not(caption)>*>* {
    padding: .5rem .5rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)
}

.table>tbody {
    vertical-align: inherit
}

.table>thead {
    vertical-align: bottom
}

.table__container {
    overflow-x: scroll
}

.table-responsive {
    overflow-x: auto
}

@media(max-width: 575.98px) {
    .table-responsive-sm {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media(max-width: 767.98px) {
    .table-responsive-md {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media(max-width: 991.98px) {
    .table-responsive-lg {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media(max-width: 1199.98px) {
    .table-responsive-xl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media(max-width: 1399.98px) {
    .table-responsive-xxl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-bottom: 20px
}

.pagination__item {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .08);
    transition: .2s;
    cursor: pointer
}

.pagination__item:hover {
    background-color: #3e5e18;
    color: #fff
}

.pagination__item--active {
    background-color: #57391f;
    transform: scale(1.05);
    color: #fff
}

.overview__item h1 {
    text-align: center;
    text-transform: uppercase
}

.overview__item h3 {
    text-align: center;
    font-size: 20px
}

.overview__item-img {
    margin: 25px 0 15px
}

.overview__item-img img {
    max-height: 75px;
    width: auto
}

.reviews_paragraph {
    font-size: 16px;
    font-family: "Comfortaa", sans-serif;
    padding: 0 20px;
    margin-bottom: 20px
}

.overview__item {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 1px solid #d1d1d1;
    margin: 0px auto 20px auto;
    padding: 5px 30px
}

.overview__list {
    margin-bottom: 50px
}

.policy_block_title {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 20px
}

.policy_block_text {
    font-size: 14px;
    margin-bottom: 14px
}

.policy_block_list li {
    font-size: 14px;
    margin-bottom: 14px;
    margin-left: 20px;
    list-style: none
}

.policy_block_marker {
    max-width: 15px;
    margin-right: 10px
}

.bold_highlight {
    font-weight: 700
}

h2 {
    font-weight: 700;
    margin-bottom: 50px;
    margin-top: 25px;
    font-size: 35px
}

.lead {
    border-top-left-radius: 75px;
    border-bottom-left-radius: 75px
}

@media screen and (max-width: 1055px) {
    .lead {
        border-top-left-radius: 65px;
        border-bottom-left-radius: 65px
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Comfortaa", sans-serif
}

html {
    overflow-x: hidden;
    overscroll-behavior-y: none
}

img {
    width: 100%;
    max-height: 100%
}

.img_br {
    border-radius: 25px
}

a {
    text-decoration: none
}

body {
    font-family: "Comfortaa", sans-serif;
    overflow-x: hidden;
    cursor: default
}

main {
    position: relative;
    left: 100px;
    width: calc(100% - 100px)
}

@media screen and (max-width: 620px) {
    main {
        left: 0;
        width: 100%
    }
}

.material-symbols-outlined {
    font-variation-settings: "FILL"0, "wght"200, "GRAD"0, "opsz"48;
    color: #696cc3
}

.toggle-checkbox {
    display: none
}

@media screen and (max-width: 620px) {
    .side_icon {
        position: fixed;
        left: 0;
        top: 0;
        width: 40px;
        height: 40px;
        background-color: #2a2a2a;
        border-bottom-right-radius: 12px;
        background-image: url(asset/444d0e11927b4093fcb9.svg);
        background-size: cover;
        z-index: 1000;
        transition: background-image .5s ease-in-out, transform .5s ease-in-out, opacity .5s ease-in-out;
        transform: translateX(0);
        opacity: 1
    }
}

.toggle-checkbox:checked+.side_icon {
    background-image: url(asset/fb4cabc3dd433946ff0b.svg);
    transform: translateX(85px)
}

@media screen and (max-width: 620px) {
    .toggle-checkbox:checked~.sidebar {
        transform: translateX(0);
        opacity: 1;
        transition: transform .5s ease-in-out, opacity 0s ease-in-out
    }
}

.container {
    width: 100%;
    max-width: 900px;
    padding: 0 15px;
    margin: 0 auto
}

@media screen and (max-width: 1055px) {
    .container {
        padding: 0 40px;
        margin: 0 0
    }
}

.title {
    font-size: 32px;
    line-height: 42px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center
}

@media screen and (max-width: 855px) {
    .title {
        text-align: center !important
    }
}

@media screen and (max-width: 600px) {
    .title {
        font-size: 26px;
        line-height: 36px
    }
}

.button {
    cursor: pointer
}

.button--big_red {
    color: #fff !important
}

.button--big_red {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 241px;
    height: 41px;
    text-decoration: none;
    background-color: red;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase
}

@media screen and (max-width: 500px) {
    .button--big_red {
        display: none
    }
}

.button--transparent {
    width: 100%;
    border: 1px solid #3e5e18;
    color: #3e5e18;
    border-radius: 8px;
    padding: 10px 0;
    background-color: #fff;
    transition: .3s;
    text-transform: uppercase
}

.button--transparent:hover {
    background-color: #3e5e18;
    color: #fff
}

.button--filled {
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
    padding: 12px 0;
    background: linear-gradient(90deg, #f8c145, #ff9500);
    transition: .3s;
    color: #fff;
    text-transform: uppercase
}

.button--filled--big {
    font-size: 18px;
    padding: 0;
    width: 290px;
    height: 50px
}

.button--filled:hover {
    filter: brightness(95%)
}

.button--filled--sm {
    width: auto;
    padding: 14px 25px
}

.button--sm {
    display: none;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    padding: 14px 20px;
    font-size: 10px;
    text-transform: uppercase
}

@media screen and (max-width: 500px) {
    .button--sm {
        display: flex
    }
}

.button--cancel {
    color: #2a2a2a;
    width: 100%;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    padding: 11px 0
}

.brand-color-span-dark {
    color: #57391f
}

.brand-color-span-light {
    color: #3e5e18;
    text-shadow: .1px .1px 3px #fff
}

.align-right {
    text-align: right
}

.align-center {
    text-align: center
}

.align-left {
    text-align: left
}

.mw-830 {
    max-width: 830px
}

.mw-730 {
    max-width: 730px
}

.mw-550 {
    max-width: 550px
}

.align-centr {
    text-align: center
}

.mw-215px {
    max-width: 215px
}

.mw-350 {
    max-width: 350px
}

.mw-380 {
    max-width: 350px
}

@media screen and (max-width: 620px) {
    .mw-380 {
        max-width: 100%
    }
}

.mw-400 {
    max-width: 400px
}

@media screen and (max-width: 1000px) {
    .mw-400 {
        max-width: 100%
    }
}

.mw-650 {
    max-width: 650px
}

.mw-690 {
    max-width: 690px
}

.w-30 {
    width: 30%
}

.bg-dark-left {
    background: linear-gradient(90deg, rgba(50, 50, 50, 0.85), rgba(170, 170, 170, 0.7) 80%);
    color: #fff
}

.bg-dark-right {
    background: linear-gradient(270deg, rgba(50, 50, 50, 0.85), rgba(133, 129, 129, 0.7) 80%);
    color: #fff
}

.mb-16 {
    margin-bottom: 16px
}

.mb-10 {
    margin-bottom: 10px
}

.mb-25 {
    margin-bottom: 25px
}

.mb-40 {
    margin-bottom: 40px
}

@media screen and (max-width: 620px) {
    .mb-40 {
        margin-bottom: 18px
    }
}

.mb-50 {
    margin-bottom: 40px
}

.mb-65 {
    margin-bottom: 65px
}

@media screen and (max-width: 620px) {
    .mb-65 {
        margin-bottom: 25px
    }
}

.m0-a {
    margin-left: auto;
    margin-right: auto
}

.p40-0 {
    padding: 40px 0
}

.p25 {
    padding: 25px
}

.p60-0 {
    padding: 60px 0
}

.d-flex {
    display: flex
}

.border-left {
    border-left: 5px solid #3e5e18
}

.border-right {
    border-right: 5px solid #3e5e18
}

@media screen and (max-width: 1055px) {
    .border-right {
        border-left: 5px solid #3e5e18;
        border-right: none
    }
}

.w50-percent {
    width: 50%
}

@media screen and (max-width: 820px) {
    .w50-percent {
        width: 100%
    }
}

.gap20 {
    gap: 20px
}

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

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

.justify-content-space-between {
    justify-content: space-between
}

.mh-770 {
    max-height: 700px
}

.lh20 {
    line-height: 20px
}

.w24-h24 {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important
}

@media screen and (max-width: 450px) {
    .w24-h24 {
        width: 18px;
        height: 18px
    }
}

.block {
    display: flex;
    flex-direction: column
}

.fs-12 {
    font-size: 12px
}

.spiner {
    color: #000 !important
}

.spiner {
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .7);
    align-items: center;
    justify-content: center;
    position: absolute;
    border-radius: 8px;
    left: 0;
    top: 0
}

.spiner img {
    width: 100px;
    height: 100px
}

.thanks {
    color: #000 !important
}

.thanks {
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    font-size: 24px;
    position: absolute;
    left: 0;
    top: 0
}

.thanks img {
    width: 60px;
    height: 60px
}

.thanks--modal {
    display: flex;
    padding: 30px;
    position: static
}

.error__message {
    margin-top: 16px;
    font-size: 12px;
    display: none;
    color: red
}

.mb-30 {
    margin-bottom: 30px
}

.mb-0 {
    margin-bottom: 0px
}

.mt-75 {
    margin-top: 75px
}

@media screen and (max-width: 675px) {
    .media-left {
        text-align: left
    }
}

.start {
    border-radius: 25px;
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    z-index: 10000;
    background-color: rgba(157, 103, 58, .33);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 30px
}

.start__title {
    color: #fff4b9;
    font-size: 34px;
    font-weight: 400;
    letter-spacing: 15px;
    max-width: 600px;
    text-align: center;
    margin-bottom: 70px;
    -webkit-animation: fade 1.5s;
    animation: fade 1.5s
}

@media screen and (max-width: 675px) {
    .start__title {
        max-width: auto;
        letter-spacing: 5px;
        font-size: 28px
    }
}

@media screen and (max-width: 400px) {
    .start__title {
        letter-spacing: normal
    }
}

.start__img {
    max-width: 500px;
    -webkit-animation: fade1 1.5s;
    animation: fade1 1.5s
}

.start__hide {
    transition: 2s;
    opacity: 0;
    pointer-events: none
}

.start__hide_fast {
    opacity: 0;
    pointer-events: none
}

@-webkit-keyframes fade {
    from {
        transform: translateY(-100%);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes fade {
    from {
        transform: translateY(-100%);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes fade1 {
    from {
        transform: scale(0.4);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes fade1 {
    from {
        transform: scale(0.4);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes rotation {
    0% {
        transform: rotateY(0)
    }

    25% {
        transform: rotateY(90deg)
    }

    50% {
        transform: rotateY(180deg)
    }

    75% {
        transform: rotateY(270deg)
    }

    100% {
        transform: rotateY(360deg)
    }
}

@keyframes rotation {
    0% {
        transform: rotateY(0)
    }

    25% {
        transform: rotateY(90deg)
    }

    50% {
        transform: rotateY(180deg)
    }

    75% {
        transform: rotateY(270deg)
    }

    100% {
        transform: rotateY(360deg)
    }
}

.left,
.right {
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity 2s ease-in-out
}

.show {
    visibility: visible !important;
    opacity: 1 !important
}

.map {
    max-width: 20px !important;
}




.preview__info {
    /* background: linear-gradient(135deg, rgba(40, 40, 40, 0.9), rgba(20, 20, 20, 0.95)); */
    color: #fff;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); */
    height: 100%;
}

.preview__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.brand-color-span-light {
    color: #f8c145;
    font-weight: 700;
    text-shadow: none;
}

.preview__paragraph {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.quiz-link {
    display: inline-block;
    padding: 14px 24px;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, #f8c145, #ff9500);
    border-radius: 8px;
    transition: 0.3s;
    text-decoration: none;
    /* box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3); */
}

.quiz-link:hover {
    background: linear-gradient(90deg, #ff9500, #f8c145);
    transform: translateY(-2px);
}

.preview__container{
    max-width: 1200px;
}


.preview__info {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  
  .preview__info.visible {
    opacity: 1;
    transform: translateY(0);
  }