/* HEADER */
                                    
                                    header {
                                        width: 100%;
                                        display: flex;
                                        justify-content: center;
                                        padding-left: 39px;
                                        padding-right: 39px;
                                        & .container {
                                            display: flex;
                                            border-bottom: 1px solid var(--red-devino);
                                            padding: 14px 0 14px 0;
                                            @media (max-width: 789px) {
                                                align-items: center;
                                                padding: 13px 0 13px 0;
                                            }
                                            @media (max-width: 430px) {
                                                justify-content: space-between;
                                            }
                                        }
                                        & .logo {
                                            max-width: 180px;
                                            width: 100%;
                                            height: 100%;
                                            margin-right: 40px;
                                            margin-top: 12px;
                                            margin-bottom: auto;
                                            @media (max-width: 789px) {
                                                margin-right: 24px;
                                                max-width: 140px;
                                                margin-top: 0;
                                                margin-bottom: 0;
                                            }
                                        }
                                        & .main__navigation {
                                            display: flex;
                                            max-width: 632px;
                                            width: 100%;
                                            /* justify-content: space-between; */
                                            margin-top: auto;
                                            margin-bottom: auto;
                                            gap: 20px;
                                            @media (max-width: 789px) {
                                                margin-top: 0;
                                                padding-bottom: 0;
                                                max-width: 485px;
                                                align-items: center;
                                                margin-bottom: 0;
                                                gap: 15px;
                                            }
                                            & .main__navigation__link {
                                                color: var(--black2-devino);
                                                font-size: var(--h4-s);
                                                line-height: var(--h4-l);
                                                font-weight: var(--h4-w);
                                                transition: 0.4s;
                                                &:hover {
                                                    color: var(--red-devino);
                                                }
                                                &:active {
                                                    color: var(--red-devino);
                                                }
                                            }
                                            & li {
                                                list-style: none;
                                                position: relative;
                                                display: flex;
                                                & p {
                                                    cursor: pointer;
                                                    color: var(--black2-devino);
                                                    font-size: var(--h4-s);
                                                    line-height: var(--h4-l);
                                                    font-weight: var(--h4-w);
                                                    transition: 0.4s;
                                                    &:hover {
                                                        color: var(--red-devino);
                                                    }
                                                    &:active {
                                                        color: var(--red-devino);
                                                    }
                                                }
                                                &:hover ul.sub__menu {
                                                    /* transition: opacity 0.2s, visibility 0.2s; */
                                                    visibility: visible;
                                                    opacity: 1;
                                                }
                                                & ul.sub__menu {
                                                    width: 320px;
                                                    z-index: 3;
                                                    position: absolute;
                                                    visibility: hidden;
                                                    flex-direction: column;
                                                    flex-wrap: wrap;
                                                    display: flex;
                                                    border-radius: 0 0 12px 12px;
                                                    padding: 30px;
                                                    background-color: var(--white-devino);
                                                    box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                                                    margin-top: 57px;
                                                    margin-left: -32px;
                                                    max-height: 356px;
                                                    gap: 20px;
                                                    transition: opacity 0.2s, visibility 0.2s;
                                                    @media (max-width: 789px) {
                                                        margin-top: 35px;
                                                        max-width: 440px;
                                                        padding: 20px;
                                                        max-height: 260px;
                                                    }
                                                    &:hover {
                                                        visibility: visible;
                                                    }
                                                    & li {
                                                        /* margin-bottom: 20px; */
                                                        width: 260px;
                                                        display: flex;
                                                        @media (max-width: 789px) {
                                                            width: 190px;
                                                        }
                                                        & a {
                                                            color: var(--black2-devino);
                                                            font-size: var(--h5-s);
                                                            font-weight: var(--h5-w);
                                                            line-height: var(--h5-l);
                                                            transition: color 0.4s;
                                                            &:hover {
                                                                color: var(--red-devino);
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                        & .search__block {
                                            margin-left: auto;
                                            display: flex;
                                            margin-top: auto;
                                            margin-bottom: auto;
                                            margin-right: 25px;
                                            margin-left: auto;
                                            position: relative;
                                            @media (max-width: 789px) {
                                                margin-bottom: 0px;
                                                margin-top: 0px;
                                                margin-right: 20px;
                                                margin-left: 20px;
                                            }
                                            @media (max-width: 430px) {
                                                display: none;
                                            }
                                            & .search__icon {
                                                width: 28px;
                                                height: 28px;
                                                cursor: pointer;
                                                transition: 0.4s;
                                                @media (max-width: 789px) {
                                                    width: 15px;
                                                    height: 15px;
                                                }
                                                & path {
                                                    transition: 0.4s;
                                                }
                                                &:hover {
                                                    & path {
                                                        fill: #717fff;
                                                    }
                                                }
                                            }
                                            & .close__search__btn {
                                                cursor: pointer;
                                                position: absolute;
                                                visibility: hidden;
                                                display: none;
                                                right: 20px;
                                                bottom: 12px;
                                                & svg rect {
                                                    transition: 0.4s;
                                                }
                                                &:hover svg rect {
                                                    fill: var(--red-devino);
                                                }
                                            }
                                            & .search__input {
                                                visibility: visible;
                                                display: block;
                                                border-radius: 10px;
                                                max-width: 872px;
                                                width: 100%;
                                                color: var(--brown-devino);
                                                font-size: var(--h5-s);
                                                font-weight: var(--h5-w);
                                                line-height: var(--h5-l);
                                                padding: 10px;
                                                outline: none;
                                                border: none;
                                                &::placeholder {
                                                    color: hsla(17, 8%, 35%, 0.3);
                                                }
                                            }
                                        }
                                        & .search__menu_icon {
                                            margin-right: 12px;
                                        }
                                        & .personal__block {
                                            display: flex;
                                            margin-top: auto;
                                            margin-bottom: auto;
                                            margin-right: auto;
                                            cursor: pointer;
                                            @media (max-width: 789px) {
                                                margin-top: 0px;
                                                margin-right: 0px;
                                                & svg {
                                                    width: 100%;
                                                    height: 100%;
                                                }
                                            }
                                            @media (max-width: 430px) {
                                                margin-bottom: 0;
                                                margin-left: auto;
                                                margin-right: 40px;
                                            }
                                            a {
                                                width: 40px;
                                                height: 40px;
                                                position: relative;
                                                @media (max-width: 789px) {
                                                    width: 24px;
                                                    height: 24px;
                                                }
                                            }
                                            &:hover {
                                                & svg path {
                                                    fill: var(--black2-devino);
                                                    /* stroke: var(--black2-devino); */
                                                }
                                            }
                                            & svg path {
                                                transition: 0.4s;
                                            }
                                        }
                                        & .btn {
                                            @media (max-width: 1270px) {
                                                display: none;
                                            }
                                        }
                                    }
                                    /* /HEADER */
                                    /* MAIN */
                                    
                                    main {
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        width: 100%;
                                    }
                                    
                                    .main__slider_sec {
                                        overflow: hidden;
                                        position: relative;
                                        padding-bottom: 0;
                                        @media (max-width: 789px) {
                                            padding-top: 70px;
                                        }
                                        @media (max-width: 430px) {
                                            padding-bottom: 40px;
                                        }
                                        &>.bg__main__slider {
                                            position: absolute;
                                            width: 760px;
                                            margin-left: 900px;
                                            top: 0;
                                            @media (max-width: 789px) {
                                                width: 464px;
                                                height: 464px;
                                                margin-left: 400px;
                                                top: 0;
                                            }
                                            @media (max-width: 425px) {
                                                /* height: 300px; */
                                            }
                                        }
                                        & .main__slider {
                                            height: 760px;
                                            position: relative;
                                            margin-bottom: 0 !important;
                                            @media (max-width: 789px) {
                                                height: 450px;
                                            }
                                            @media (max-width: 425px) {
                                                height: 450px;
                                            }
                                            & .main__slider__item {
                                                position: relative;
                                                height: 760px;
                                                display: flex;
                                                flex-direction: column;
                                                @media (max-width: 789px) {
                                                    height: 450px;
                                                }
                                                @media (max-width: 425px) {
                                                    height: 500px;
                                                }
                                                & h2 {
                                                    font-size: var(--h1-s);
                                                    line-height: var(--h1-l);
                                                    font-weight: var(--h1-w);
                                                    max-width: 770px;
                                                    width: 100%;
                                                    margin-bottom: 80px;
                                                    z-index: 2;
                                                    @media (max-width: 789px) {
                                                        max-width: 570px;
                                                    }
                                                    @media (max-width: 425px) {
                                                        max-width: 320px;
                                                        margin-bottom: 70px;
                                                    }
                                                }
                                                & .btn__container {
                                                    display: flex;
                                                    flex-wrap: wrap;
                                                    z-index: 2;
                                                    @media (max-width: 789px) {
                                                        padding-left: 1px;
                                                    }
                                                    & a:first-of-type {
                                                        margin-right: 30px;
                                                        @media (max-width: 430px) {
                                                            margin-right: 0;
                                                            margin-bottom: 24px;
                                                        }
                                                    }
                                                    & a {
                                                        @media (max-width: 430px) {
                                                            min-width: 100%;
                                                            text-align: center;
                                                        }
                                                    }
                                                }
                                                & img {
                                                    position: absolute;
                                                    height: 700px;
                                                    width: auto;
                                                    right: 0;
                                                    bottom: 0;
                                                    z-index: 1;
                                                    @media (max-width: 789px) {
                                                        display: none;
                                                    }
                                                }
                                            }
                                            & .btn_dots__container {
                                                position: absolute;
                                                display: flex;
                                                justify-content: space-between;
                                                align-items: center;
                                                max-width: 547px;
                                                width: 100%;
                                                bottom: 60px;
                                                left: 0;
                                                overflow: hidden;
                                                @media (max-width: 789px) {
                                                    bottom: 70px;
                                                    left: 10px;
                                                    max-width: 482px;
                                                }
                                                @media (max-width: 430px) {
                                                    bottom: 0;
                                                    left: 0;
                                                    max-width: 440px;
                                                }
                                                & .slick-arrow {
                                                    position: static;
                                                    z-index: 2;
                                                    height: auto;
                                                    width: fit-content;
                                                    display: flex;
                                                    -webkit-transform: translate(0, 0);
                                                    & svg {
                                                        width: 60px;
                                                    }
                                                    &::before {
                                                        display: none;
                                                    }
                                                    &.slick-prev {
                                                        display: flex;
                                                        width: fit-content;
                                                        & svg {
                                                            transform: rotate(180deg);
                                                        }
                                                    }
                                                }
                                                & .slick-dots {
                                                    margin: 0 auto;
                                                    display: flex;
                                                    position: static;
                                                    width: fit-content;
                                                    & .slick-active {
                                                        & button {
                                                            &::before {
                                                                font-size: 14px;
                                                                color: var(--red-devino);
                                                                opacity: 1;
                                                            }
                                                        }
                                                    }
                                                    & button {
                                                        &::before {
                                                            font-size: 7px;
                                                            color: var(--brown2-devino);
                                                            opacity: 1;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    
                                    .stay__main_sec {
                                        & .container {
                                            display: flex;
                                            
                                            /* justify-content: space-between; */
                                            gap: 30px;
                                            @media (max-width: 789px) {
                                                align-items: center;
                                                flex-wrap: wrap;
                                            }
                                            @media (max-width: 430px) {
                                                flex-direction: column-reverse;
                                            }
                                            & .img__content {
                                                max-width: 630px;
                                                max-height: 626px;
                                                width: 100%;
                                                @media (max-width: 789px) {
                                                    max-width: 330px;
                                                }
                                                @media (max-width: 430px) {
                                                    max-width: 320px;
                                                    margin-bottom: 35px;
                                                    padding: 0 45px;
                                                }
                                                & img {
                                                    height: 100%;
                                                }
                                            }
                                            & .text__content {
                                                display: flex;
                                                flex-direction: column;
                                                max-width: 630px;
                                                width: 100%;
                                                @media (max-width: 789px) {
                                                    max-width: 330px;
                                                }
                                                & h2 {
                                                    margin-bottom: 30px;
                                                }
                                                & p {
                                                    margin-bottom: 28px;
                                                    font-size: var(--h5-s);
                                                    line-height: var(--h5-l);
                                                    font-weight: var(--h5-w);
                                                    color: var(--brown-devino);
                                                }
                                                & ul {
                                                    list-style: none;
                                                    display: flex;
                                                    max-width: 629px;
                                                    width: 100%;
                                                    justify-content: space-between;
                                                    margin-bottom: 30px;
                                                    & li {
                                                        list-style: none;
                                                        display: flex;
                                                        flex-direction: column;
                                                        max-width: 300px;
                                                        & .head__text {
                                                            color: var(--red-devino);
                                                            font-size: var(--h1-s);
                                                            font-weight: var(--h1-w);
                                                            line-height: var(--h1-l);
                                                            margin-bottom: 12px;
                                                        }
                                                        & p {
                                                            margin-bottom: 0;
                                                        }
                                                    }
                                                }
                                                & .btn {
                                                    display: flex;
                                                    @media (max-width: 430px) {
                                                        display: flex;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    
                                    .our__product_sec {
                                        & h2 {
                                            text-align: center;
                                            @media (max-width: 430px) {
                                                margin-bottom: 35px !important;
                                            }
                                        }
                                        & .our__product__list {
                                            display: flex;
                                            flex-wrap: wrap;
                                            list-style: none;
                                            width: 100%;
                                            column-gap: 12px;
                                            row-gap: 14px;
                                            @media (max-width: 789px) {
                                                gap: 10px;
                                                max-width: 690px;
                                            }
                                            @media (max-width: 430px) {
                                                gap: 0;
                                                max-width: 690px;
                                                border-radius: 20px;
                                                box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                                            }
                                            & .our__product__list__item {
                                                display: flex;
                                                flex-direction: column;
                                                padding: 30px;
                                                border-radius: 20px;
                                                background-color: #fff;
                                                box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                                                width: 100%;
                                                --widthB: calc(100% - 24px);
                                                max-width: calc(var(--widthB)/3);
                                                @media (max-width: 789px) {
                                                    --widthB: calc(100% - 12px);
                                                    max-width: calc(var(--widthB)/2);
                                                }
                                                @media (max-width: 430px) {
                                                    max-width: 100%;
                                                    border-radius: 0;
                                                    flex-direction: row;
                                                    padding: 22px 20px;
                                                    box-shadow: none;
                                                    justify-content: space-between;
                                                    border-bottom: 1px solid var(--brown2-devino);
                                                }
                                                &:nth-child(1) {
                                                    @media (max-width: 430px) {
                                                        border-radius: 20px 20px 0 0;
                                                    }
                                                }
                                                &:last-child {
                                                    @media (max-width: 430px) {
                                                        border-radius: 0 0 20px 20px;
                                                        border-bottom: 0;
                                                    }
                                                }
                                                &:nth-child(7) {
                                                    margin-left: auto;
                                                    @media (max-width: 789px) {
                                                        margin-left: 0;
                                                    }
                                                }
                                                &:nth-child(8) {
                                                    margin-right: auto;
                                                    @media (max-width: 789px) {
                                                        margin-right: 0;
                                                    }
                                                }
                                                & .head__block {
                                                    display: flex;
                                                    align-items: center;
                                                    margin-bottom: 20px;
                                                    @media (max-width: 430px) {
                                                        margin-bottom: 0;
                                                        width: 60%;
                                                    }
                                                    & img {
                                                        width: 57px;
                                                        height: 57px;
                                                        margin-right: 16px;
                                                    }
                                                    & h3 {
                                                        font-weight: var(--h4-w);
                                                        font-size: var(--h4-s);
                                                        line-height: var(--h4-l);
                                                        color: var(--black2-devino);
                                                    }
                                                }
                                                & p {
                                                    font-size: var(--h5-s);
                                                    font-weight: var(--h5-w);
                                                    line-height: var(--h5-l);
                                                    color: var(--brown-devino);
                                                    margin-bottom: 30px;
                                                    @media (max-width: 430px) {
                                                        display: none;
                                                    }
                                                }
                                                & .btn {
                                                    position: relative;
                                                    margin-top: auto;
                                                    @media (max-width: 430px) {
                                                        margin-top: 0;
                                                        visibility: hidden;
                                                        &::after {
                                                            visibility: visible;
                                                            margin-left: 0;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    
                                    .benefits_sec {
                                        & .container {
                                            /* gap: 90px; */
                                            & .text__content {}
                                        }
                                        & h2 {
                                            text-align: center;
                                            @media (max-width: 789px) {
                                                max-width: 450px;
                                            }
                                        }
                                        & .benefits__list {
                                            display: flex;
                                            flex-direction: column;
                                            width: 100%;
                                            & .benefits__list__item {
                                                display: flex;
                                                justify-content: space-around;
                                                align-items: center;
                                                gap: 30px;
                                                @media (max-width: 430px) {
                                                    flex-direction: column-reverse
                                                }
                                                &:nth-of-type(2n) {
                                                    flex-direction: row-reverse;
                                                    margin: 30px 0;
                                                    @media (max-width: 430px) {
                                                        flex-direction: column-reverse;
                                                    }
                                                }
                                                & .img__content {
                                                    display: flex;
                                                    justify-content: center;
                                                    @media (max-width: 789px) {
                                                        width: 47.8%;
                                                    }
                                                    @media (max-width: 430px) {
                                                        width: 100%;
                                                    }
                                                }
                                                & img {
                                                    /* width: 402px; */
                                                    @media (max-width: 789px) {
                                                        width: 100%;
                                                    }
                                                }
                                                & .text__content {
                                                    max-width: 630px;
                                                    width: 100%;
                                                    display: flex;
                                                    flex-direction: column;
                                                    @media (max-width: 789px) {
                                                        width: 47.8%;
                                                    }
                                                    @media (max-width: 430px) {
                                                        width: 100%;
                                                    }
                                                    & h3 {
                                                        color: var(--black2-devino);
                                                        font-size: var(--h3-s);
                                                        font-weight: var(--h3-w);
                                                        line-height: var(--h3-l);
                                                        margin-bottom: 20px;
                                                        @media (max-width: 430px) {
                                                            text-align: center;
                                                            margin-bottom: 12px;
                                                        }
                                                    }
                                                    & p {
                                                        color: var(--brown-devino);
                                                        font-size: var(--h5-s);
                                                        font-weight: var(--h5-w);
                                                        line-height: var(--h5-l);
                                                        @media (max-width: 430px) {
                                                            text-align: center;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                        & .btn {
                                            margin: 0 auto;
                                            margin-top: 30px;
                                        }
                                    }
                                    
                                    .our__clients_sec {
                                        & h2 {
                                            text-align: center;
                                        }
                                        & .our__clients__list {
                                            display: flex;
                                            flex-wrap: wrap;
                                            width: 100%;
                                            list-style: none;
                                            justify-content: center;
                                            align-items: center;
                                            margin: 0 auto;
                                            padding: 0 30px;
                                            row-gap: 30px;
                                            column-gap: 20px;
                                            @media (max-width: 789px) {
                                                padding: 0;
                                                row-gap: 30px;
                                                column-gap: 20px;
                                            }
                                            & li {
                                                list-style: none;
                                                
                                                max-height: 40px;
                                                margin: 10px 30px;
                                                @media (max-width: 789px) {
                                                    margin: 0;
                                                    max-width: 80px;
                                                    max-height: 22px;
                                                    & img {
                                                        max-height: 22px;
                                                    }
                                                }
                                                & img {
                                                    filter: grayscale(100%);
                                                    transition: 0.4s;
                                                    &:hover {
                                                        filter: grayscale(0%);
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    
                                    .platform_sec {
                                        & h2 {
                                            text-align: center;
                                            margin-bottom: 30px !important;
                                        }
                                        & p {
                                            color: var(--brown-devino);
                                            font-size: var(--h5-s);
                                            font-weight: var(--h5-w);
                                            line-height: var(--h5-l);
                                            margin-bottom: 28px;
                                            text-align: center;
                                            max-width: 630px;
                                            width: 100%;
                                            margin-left: auto;
                                            margin-right: auto;
                                            @media (max-width: 789px) {
                                                max-width: 520px;
                                            }
                                        }
                                        & .platform__list {
                                            display: flex;
                                            flex-wrap: wrap;
                                            width: 100%;
                                            list-style: none;
                                            justify-content: center;
                                            margin-bottom: 52px;
                                            row-gap: 28px;
                                            column-gap: 30px;
                                            @media (max-width: 789px) {
                                                margin-bottom: 48px;
                                            }
                                            & li {
                                                list-style: none;
                                                display: flex;
                                                flex-direction: column;
                                                padding: 30px 20px;
                                                border-radius: 20px;
                                                background-color: #fff;
                                                align-items: center;
                                                max-width: 300px;
                                                width: 100%;
                                                box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                                                @media (max-width: 789px) {
                                                    max-width: 47.8%;
                                                }
                                                & img {
                                                    width: 80px;
                                                    height: 80px;
                                                    margin-bottom: 20px;
                                                }
                                                & p {
                                                    text-align: center;
                                                    color: var(--black2-devino);
                                                    font-size: var(--h5-s);
                                                    line-height: var(--h5-l);
                                                    font-weight: var(--h5-w);
                                                    margin-bottom: 0;
                                                }
                                            }
                                        }
                                        & .btn {
                                            margin: 0 auto;
                                        }
                                    }
                                    
                                    .latest_sec {
                                        & .head_text {
                                            max-width: 630px;
                                            display: flex;
                                            flex-direction: column;
                                            justify-content: flex-start;
                                            @media (max-width: 789px) {
                                                max-width: 330px;
                                            }
                                            @media (max-width: 430px) {
                                                max-width: 100%;
                                                justify-content: center;
                                                align-items: center;
                                                text-align: center;
                                            }
                                            & h2 {
                                                color: var(--red-devino);
                                                margin-bottom: 20px !important;
                                            }
                                            & p {
                                                font-weight: 400;
                                                font-size: var(--h3-s);
                                                line-height: var(--h3-l);
                                                color: var(--brown-devino);
                                                margin-bottom: 30px;
                                            }
                                        }
                                        & form {
                                            display: flex;
                                            width: 100%;
                                            align-items: center;
                                            justify-content: space-between;
                                            @media (max-width: 430px) {
                                                flex-direction: column-reverse
                                            }
                                            & .text__content {
                                                max-width: 630px;
                                                width: 100%;
                                                display: flex;
                                                flex-direction: column;
                                                justify-content: flex-start;
                                                @media (max-width: 789px) {
                                                    width: 47.8%;
                                                }
                                                @media (max-width: 430px) {
                                                    width: 100%;
                                                    justify-content: center;
                                                }
                                                & h2 {
                                                    color: var(--red-devino);
                                                    margin-bottom: 20px !important;
                                                }
                                                & p {
                                                    font-weight: 400;
                                                    font-size: var(--h3-s);
                                                    line-height: var(--h3-l);
                                                    color: var(--brown-devino);
                                                    margin-bottom: 30px;
                                                }
                                                & input:not(input[type="checkbox"], input[type="submit"]) {
                                                    max-width: 520px;
                                                    width: 100%;
                                                    margin-top: 10px;
                                                    outline: none;
                                                    border: none;
                                                    background-color: #fff;
                                                    border-radius: 8px;
                                                    padding: 10px;
                                                    font-size: var(--h5-s);
                                                    line-height: var(--h5-l);
                                                    font-weight: var(--h5-w);
                                                    color: var(--brown-devino);
                                                    margin-bottom: 30px;
                                                    @media (max-width: 789px) {
                                                        max-width: 280px;
                                                    }
                                                    @media (max-width: 430px) {
                                                        min-width: 100%;
                                                    }
                                                    &::placeholder {
                                                        color: var(--brown-devino);
                                                    }
                                                }
                                                & img {
                                                    width: 400px;
                                                    height: 80px;
                                                    margin-bottom: 16px;
                                                    @media (max-width: 789px) {
                                                        width: 100%;
                                                        height: 60px;
                                                    }
                                                }
                                                & label[for="captcha"] {
                                                    display: flex;
                                                    color: var(--brown-devino);
                                                    font-size: var(--h7-s);
                                                    font-weight: var(--h7-w);
                                                    line-height: var(--h7-l);
                                                    margin-bottom: 8px;
                                                    width: 100%;
                                                    @media (max-width: 430px) {
                                                        justify-content: center;
                                                    }
                                                }
                                                & input#captcha {
                                                    max-width: 400px;
                                                    width: 100%;
                                                    outline: none;
                                                    border: none;
                                                    background-color: #fff;
                                                    border-radius: 8px;
                                                    padding: 10px;
                                                    font-size: var(--h5-s);
                                                    line-height: var(--h5-l);
                                                    font-weight: var(--h5-w);
                                                    color: var(--brown-devino);
                                                    margin-bottom: 30px;
                                                    @media (max-width: 789px) {
                                                        max-width: 280px;
                                                    }
                                                    &::placeholder {
                                                        color: var(--brown-devino);
                                                    }
                                                }
                                                & input#agree {
                                                    width: 16px;
                                                    height: 16px;
                                                    margin-right: 8px;
                                                    margin-top: 4px;
                                                }
                                                & label[for="agree"] {
                                                    width: 400px;
                                                    display: flex;
                                                    @media (max-width: 789px) {
                                                        width: 280px;
                                                    }
                                                    @media (max-width: 789px) {
                                                        width: 100%;
                                                        justify-content: center;
                                                    }
                                                    & a {
                                                        color: var(--red-devino);
                                                        @media (max-width: 789px) {
                                                            text-decoration: underline;
                                                        }
                                                        @media (max-width: 430px) {}
                                                    }
                                                    & p {
                                                        font-size: var(--h7-s);
                                                        font-weight: var(--h7-w);
                                                        line-height: var(--h7-l);
                                                        color: var(--brown-devino);
                                                        width: calc(100% - 24px);
                                                        @media (max-width: 789px) {
                                                            font-size: var(--h5-s);
                                                            font-weight: var(--h5-w);
                                                            line-height: var(--h5-l);
                                                        }
                                                        @media (max-width: 430px) {
                                                            width: 260px;
                                                        }
                                                    }
                                                }
                                                & .btn {
                                                    margin-top: 30px;
                                                    @media (max-width: 430px) {
                                                        min-width: 100%;
                                                    }
                                                }
                                                /* & .bottom_block {
                                                    width: 400px;
                                                    @media (max-width: 789px) {
                                                        width: 280px;
                                                    }
                                                } */
                                            }
                                            & .img__content {
                                                @media (max-width: 789px) {
                                                    width: 47.8%;
                                                }
                                                @media (max-width: 430px) {
                                                    width: 100%;
                                                }
                                            }
                                        }
                                    }
                                    
                                    .contactus_sec {
                                        & .container {
                                            display: flex;
                                            @media (max-width: 789px) {
                                                flex-direction: column;
                                            }
                                        }
                                        & .text__img__content {
                                            max-width: 740px;
                                            width: 64%;
                                            @media (max-width: 789px) {
                                                width: 100%;
                                            }
                                            & h2 {
                                                padding-right: 50px;
                                                @media (max-width: 789px) {
                                                    text-align: center;
                                                    max-width: 520px;
                                                    margin-left: auto;
                                                    margin-right: auto;
                                                }
                                                @media (max-width: 430px) {
                                                    text-align: left;
                                                    max-width: 520px;
                                                    margin-left: 0;
                                                    margin-right: 0;
                                                    padding-right: 0;
                                                    margin-bottom: 35px;
                                                }
                                            }
                                            & img {
                                                max-width: 694px;
                                                width: 100%;
                                                @media (max-width: 789px) {
                                                    display: none;
                                                }
                                            }
                                        }
                                        & form {
                                            display: flex;
                                            flex-direction: column;
                                            max-width: 550px;
                                            @media (max-width: 789px) {
                                                max-width: none;
                                            }
                                            & .block {
                                                display: flex;
                                                flex-direction: column;
                                                & h3 {
                                                    font-size: var(--h4-s);
                                                    font-weight: var(--h4-w);
                                                    line-height: var(--h4-l);
                                                    margin-bottom: 20px;
                                                    margin-top: 10px;
                                                    color: var(--black2-devino);
                                                    &:nth-child(1) {
                                                        margin-top: 0;
                                                    }
                                                }
                                                & label {
                                                    color: var(--black2-devino);
                                                    font-size: var(--h5-s);
                                                    font-weight: var(--h5-w);
                                                    line-height: var(--h5-l);
                                                    margin-bottom: 20px;
                                                }
                                                & label[for="web_form_submit"] {
                                                    @media (max-width: 789px) {
                                                        display: flex;
                                                        justify-content: center;
                                                        margin-bottom: 0;
                                                    }
                                                }
                                            }
                                            & select {
                                                max-width: 520px;
                                                width: 100%;
                                                outline: none;
                                                border: none;
                                                background-color: #fff;
                                                border-radius: 8px;
                                                padding: 10px;
                                                font-size: var(--h5-s);
                                                line-height: var(--h5-l);
                                                font-weight: var(--h5-w);
                                                color: var(--brown-devino);
                                                margin-bottom: 30px;
                                                @media (max-width: 789px) {
                                                    max-width: 100%;
                                                }
                                                &::placeholder {
                                                    color: var(--brown-devino);
                                                }
                                                & option {
                                                    outline: none;
                                                    border: none;
                                                    background-color: #fff;
                                                    border-radius: 8px;
                                                    padding: 10px;
                                                    font-size: var(--h5-s);
                                                    line-height: var(--h5-l);
                                                    font-weight: var(--h5-w);
                                                    color: var(--brown-devino);
                                                }
                                            }
                                            & input:not(input[type="checkbox"], input[type="submit"]) {
                                                max-width: 520px;
                                                width: 100%;
                                                margin-top: 10px;
                                                outline: none;
                                                border: none;
                                                background-color: #fff;
                                                border-radius: 8px;
                                                padding: 10px;
                                                font-size: var(--h5-s);
                                                line-height: var(--h5-l);
                                                font-weight: var(--h5-w);
                                                color: var(--brown-devino);
                                                /* margin-bottom: 30px; */
                                                @media (max-width: 789px) {
                                                    max-width: 100%;
                                                }
                                                &::placeholder {
                                                    color: var(--brown-devino);
                                                }
                                            }
                                            & #captacha {
                                                margin-bottom: 30px;
                                            }
                                            & textarea {
                                                height: 125px;
                                                margin-top: 10px;
                                                resize: none;
                                                max-width: 520px;
                                                width: 100%;
                                                outline: none;
                                                border: none;
                                                background-color: #fff;
                                                border-radius: 8px;
                                                padding: 10px;
                                                font-size: var(--h5-s);
                                                line-height: var(--h5-l);
                                                font-weight: var(--h5-w);
                                                color: var(--brown-devino);
                                                /* margin-bottom: 30px; */
                                                @media (max-width: 789px) {
                                                    max-width: 100%;
                                                }
                                                &::placeholder {
                                                    color: var(--brown-devino);
                                                }
                                            }
                                            & img {
                                                width: 330px;
                                                height: 80px;
                                                margin-bottom: 14px;
                                                @media (max-width: 789px) {
                                                    width: 280px;
                                                    height: 60px;
                                                }
                                            }
                                            & label[for="captacha"] {
                                                display: flex;
                                                color: var(--brown-devino);
                                                font-size: var(--h7-s);
                                                font-weight: var(--h7-w);
                                                line-height: var(--h7-l);
                                                margin-bottom: 0;
                                                width: 100%;
                                                @media (max-width: 789px) {
                                                    font-size: var(--h5-s);
                                                    font-weight: var(--h5-w);
                                                    line-height: var(--h5-l);
                                                }
                                            }
                                            & input#captcha {
                                                max-width: 330px;
                                                width: 100%;
                                                outline: none;
                                                border: none;
                                                background-color: #fff;
                                                border-radius: 8px;
                                                padding: 10px;
                                                font-size: var(--h7-s);
                                                line-height: var(--h7-l);
                                                font-weight: var(--h7-w);
                                                color: var(--brown-devino);
                                                margin-bottom: 30px;
                                                &::placeholder {
                                                    color: var(--brown-devino);
                                                }
                                            }
                                            & input#agree {
                                                width: 16px;
                                                height: 16px;
                                                margin-right: 8px;
                                                margin-top: 4px;
                                            }
                                            & label[for="agree"] {
                                                font-size: var(--h7-s);
                                                font-weight: var(--h7-w);
                                                line-height: var(--h7-l);
                                                color: var(--brown-devino);
                                                display: flex;
                                                margin-bottom: 30px;
                                                @media (max-width: 789px) {
                                                    font-size: var(--h5-s);
                                                    font-weight: var(--h5-w);
                                                    line-height: var(--h5-l);
                                                }
                                                & a {
                                                    color: var(--red-devino);
                                                    @media (max-width: 789px) {
                                                        text-decoration: underline;
                                                    }
                                                }
                                                & p {
                                                    font-size: var(--h7-s);
                                                    font-weight: var(--h7-w);
                                                    line-height: var(--h7-l);
                                                    color: var(--brown-devino);
                                                    width: calc(100% - 24px);
                                                    @media (max-width: 789px) {
                                                        font-size: var(--h5-s);
                                                        font-weight: var(--h5-w);
                                                        line-height: var(--h5-l);
                                                    }
                                                    @media (max-width: 430px) {
                                                        width: 260px;
                                                    }
                                                }
                                            }
                                            & .btn {
                                                /* margin: 45px auto 0 auto; */
                                                @media (max-width: 430px) {
                                                    min-width: 100%;
                                                }
                                            }
                                        }
                                    }
                                    
                                    .cases__list_sec_slider {
                                        & h2 {
                                            text-align: center;
                                        }
                                        & .cases__list {
                                            display: flex;
                                            flex-direction: column;
                                            width: 100%;
                                            margin-bottom: 80px;
                                           
                                            
                                            @media (max-width: 789px) {
                                                margin-bottom: 45px;
                                            }
                                            @media (max-width: 430px) {
                                                gap: 24px;
                                            }
                                            & li {
                                                display: flex;
                                                max-width: 410px;
                                                /* width: 100%; */
                                                cursor: pointer;
                                                & .case
                                                {
                                                    list-style: none;
                                                    display: flex;
                                                    flex-direction: column;
                                                    background-color: #fff;
                                                    border-radius: 20px;
                                                    /* max-width: 420px; */
                                                    /* width: 100%; */
                                                    padding: 25px;
                                                    min-height: 445px;
                                                    box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                                                    @media (max-width: 789px) {
                                                        padding: 16px;
                                                        max-width: 222px;
                                                    }
                                                    @media (max-width: 430px) {
                                                        max-width: 100%;;
                                                    }
                                                    & img {
                                                        max-width: 370px;
                                                        width: 100%;
                                                        margin-bottom: 20px;
                                                        border-radius: 20px;
                                                        min-height: 205px;
    
                                                    }
                                                    & p {
                                                        color: var(--black2-devino);
                                                        font-size: var(--h5-s);
                                                        font-weight: var(--h5-w);
                                                        line-height: var(--h5-l);
                                                        margin-bottom: 30px;
                                                    }
                                                    & .btn {
                                                        margin-top: auto;
                                                    }
                                                }
                                            }
                                            & .btn_dots__container
                                            {
                                                /* position: absolute; */
                                                display: flex;
                                                justify-content: space-between;
                                                align-items: center;
                                                max-width: 547px;
                                                width: 100%;
                                                margin-top: 24px;
                                                margin-bottom: 45px;
                                                /* bottom: 60px;
                                                left: 0; */
                                                overflow: hidden;
                                                @media (max-width: 430px) {
                                                   
                                                    margin-top: 24px;
                                                    
                                                }
                                                & .slick-dots {
                                                    margin: 0 auto;
                                                    display: flex;
                                                    position: static;
                                                    width: fit-content;
                                                    
                                                    & .slick-active {
                                                        & button {
                                                            &::before {
                                                                font-size: 14px;
                                                                color: var(--red-devino);
                                                                opacity: 1;
                                                            }
                                                        }
                                                    }
                                                    & li
                                                    {
                                                        margin: 0 15px;
                                                    }
                                                    & button {
                                                        &::before {
                                                            font-size: 7px;
                                                            color: var(--brown2-devino);
                                                            opacity: 1;
                                                        }
                                                    }
                                                }
                                                & .slick-arrow {
                                                    position: static;
                                                    z-index: 2;
                                                    height: auto;
                                                    width: fit-content;
                                                    display: flex;
                                                    -webkit-transform: translate(0, 0);
                                                    & svg {
                                                        width: 60px;
                                                    }
                                                    &::before {
                                                        display: none;
                                                    }
                                                    &.slick-prev {
                                                        display: flex;
                                                        width: fit-content;
                                                        & svg {
                                                            /* transform: rotate(180deg); */
                                                        }
                                                    }
                                                }
                                            }
                                             & .slick-list
                                            {
                                                overflow: visible;
                                                @media (max-width: 430px) {
                                                    overflow: hidden;
                                                    box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%); 
                                                    
                                              }
                                            }
                                            
                                        }
                                        & .container>.btn {
                                            margin: 0 auto;
                                            @media (max-width: 430px) {
                                                min-width: 100%;
                                            }
                                        }
                                        & .btn__container {
                                            display: flex;
                                            width: 100%;
                                            justify-content: center;
                                            & .btn {
                                                margin: 0 15px 0 15px;
                                            }
                                        }
                                    }
                                    .cases__list_sec {
                                        & h2 {
                                            text-align: center;
                                        }
                                        & .cases__list {
                                            display: flex;
                                            flex-direction: row;
                                            width: 100%;
                                            margin-bottom: 80px;
                                            gap: 15px;
                                            
                                            @media (max-width: 789px) {
                                                gap: 12px;
                                                margin-bottom: 45px;
                                            }
                                            @media (max-width: 430px) {
                                                gap: 24px;
                                            }
                                            & li {
                                                display: flex;
                                                max-width: 410px;
                                                /* width: 100%; */
                                                cursor: pointer;
                                                list-style: none;
                                                    flex-direction: column;
                                                    background-color: #fff;
                                                    border-radius: 20px;
                                                    /* width: 100%; */
                                                    padding: 25px;
                                                    min-height: 445px;
                                                    box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                                                    @media (max-width: 789px) {
                                                        padding: 16px;
                                                        max-width: 222px;
                                                    }
                                                    @media (max-width: 430px) {
                                                        max-width: 100%;;
                                                    }
                                                    & img {
                                                        max-width: 370px;
                                                        width: 100%;
                                                        margin-bottom: 20px;
                                                        border-radius: 20px;
                                                        min-height: 205px;
    
                                                    }
                                                    & p {
                                                        color: var(--black2-devino);
                                                        font-size: var(--h5-s);
                                                        font-weight: var(--h5-w);
                                                        line-height: var(--h5-l);
                                                        margin-bottom: 30px;
                                                    }
                                                    & .btn {
                                                        margin-top: auto;
                                                    }
                                            }
                                         
                                            & .btn_dots__container
                                            {
                                                /* position: absolute; */
                                                display: flex;
                                                justify-content: space-between;
                                                align-items: center;
                                                max-width: 547px;
                                                width: 100%;
                                                /* bottom: 60px;
                                                left: 0; */
                                                overflow: hidden;
                                                @media (max-width: 430px) {
                                                   
                                                    margin:24px 0;
                                                    
                                                }
                                                & .slick-dots {
                                                    margin: 0 auto;
                                                    display: flex;
                                                    position: static;
                                                    width: fit-content;
                                                    & .slick-active {
                                                        & button {
                                                            &::before {
                                                                font-size: 14px;
                                                                color: var(--red-devino);
                                                                opacity: 1;
                                                            }
                                                        }
                                                    }
                                                    & button {
                                                        &::before {
                                                            font-size: 7px;
                                                            color: var(--brown2-devino);
                                                            opacity: 1;
                                                        }
                                                    }
                                                }
                                                & .slick-arrow {
                                                    position: static;
                                                    z-index: 2;
                                                    height: auto;
                                                    width: fit-content;
                                                    display: flex;
                                                    -webkit-transform: translate(0, 0);
                                                    & svg {
                                                        width: 60px;
                                                    }
                                                    &::before {
                                                        display: none;
                                                    }
                                                    &.slick-prev {
                                                        display: flex;
                                                        width: fit-content;
                                                        & svg {
                                                            transform: rotate(180deg);
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                        & .container>.btn {
                                            margin: 0 auto;
                                            @media (max-width: 430px) {
                                                min-width: 100%;
                                            }
                                        }
                                        & .btn__container {
                                            display: flex;
                                            width: 100%;
                                            justify-content: center;
                                            & .btn {
                                                margin: 0 15px 0 15px;
                                            }
                                        }
                                    }
                                    
                                    .startHead {
                                        background-image: url(../media/BGPlatform.svg) !important;
                                    }
                                    
                                    .startHeadPlatform {
                                        /* background-image: url(../media/HeadPlatform.svg) !important; */
                                        height: 760px;
                                        @media (max-width: 789px) {
                                            height: 430px;
                                        }
                                        @media (max-width: 430px) {
                                            height: 430px;
                                        }
                                        &>.bg__main__slider {
                                            position: absolute;
                                            width: 1100px !important;
                                            margin-left: 200px !important;
                                            @media (max-width: 789px) {
                                                display: none;
                                            }
                                            @media (max-width: 430px) {
                                                display: none;
                                            }
                                        }
                                        &>.bg__main__slider_BG {
                                            display: none;
                                            position: absolute;
                                            width: 760px;
                                            margin-left: 900px;
                                            top: 0;
                                            height: 760px;
                                            @media (max-width: 789px) {
                                                width: 444px;
                                                margin-left: 392px;
                                                bottom: 20px;
                                                height: 430px;
                                                display: block;
                                            }
                                            @media (max-width: 430px) {
                                                margin-left: 300px;
                                                width: 444px;
                                                height: 430px;
                                                display: block;
                                            }
                                        }
                                        & .img__content {
                                            top: 153px !important;
                                            right: 214px !important;
                                        }
                                    }
                                    
                                    .start_sec.startAbout {
                                        @media (max-width: 789px) {
                                            height: 406px;
                                        }
                                        @media (max-width: 430px) {
                                            height: 367px;
                                        }
                                        & .img__content {
                                            top: 0;
                                            right: 0;
                                        }
                                        & .bg__main__slider {
                                            display: none;
                                            @media (max-width: 789px) {
                                                display: block;
                                                margin-left: 650px;
                                                width: 410px;
                                                height: 410px;
                                                max-width: 410px;
                                                max-height: 410px;
                                            }
                                            @media (max-width: 430px) {
                                                display: block;
                                                margin-left: 350px;
                                                width: 381px;
                                                height: 381px;
                                                max-width: 381px;
                                                max-height: 381px;
                                            }
                                        }
                                    }
                                    
                                    .start_sec {
                                        height: 760px;
                                        position: relative;
                                        overflow: hidden;
                                        @media (max-width: 789px) {
                                            height: 406px;
                                            padding-top: 70px;
                                            padding-bottom: 70px;
                                            overflow: visible;
                                        }
                                        @media (max-width: 430px) {
                                            /* height: 382px; */
                                            /* padding-top: 70px; */
                                            height: 100%; 
                                            padding-top: 50px;
                                            padding-bottom: 50px;
                                            display: flex;
                                            justify-content: center;
                                            padding-bottom: 50px;
                                            /* overflow: visible;  */
                                        }
                                        &>.bg__main__slider {
                                            position: absolute;
                                            width: 760px;
                                            margin-left: 900px;
                                            top: 0;
                                            height: 760px;
                                            @media (max-width: 789px) {
                                                display: none;
                                                width: 492px;
                                                margin-left: 392px;
                                                bottom: 20px;
                                                height: 492px;
                                            }
                                            @media (max-width: 430px) {
                                                display: none;
                                                margin-left: 300px;
                                                max-width: 396px;
                                                max-height: 396px;
                                            }
                                        }
                                        &>.bg__main__slider_BG {
                                            display: none;
                                            position: absolute;
                                            width: 760px;
                                            margin-left: 900px;
                                            top: 0;
                                            height: 760px;
                                            @media (max-width: 789px) {
                                                max-width: 420px;
                                                margin-left: 392px;
                                                bottom: 20px;
                                                max-height: 420px;
                                                display: block;
                                            }
                                            @media (max-width: 430px) {
                                                margin-left: 300px;
                                                max-width: 396px;
                                                max-height: 396px;
                                                display: block;
                                            }
                                        }
                                        & .container {
                                            display: flex;
                                            position: relative;
                                            @media (max-width: 430px) {
                                                max-width: 320px;
                                            }
                                        }
                                        & .text__content {
                                            display: flex;
                                            flex-direction: column;
                                            max-width: 770px;
                                            width: 100%;
                                            z-index: 2;
                                            & .top__text {
                                                text-transform: uppercase;
                                                color: var(--red-devino);
                                                font-size: var(--h5-s);
                                                font-weight: var(--h5-w);
                                                line-height: var(--h5-l);
                                                margin-bottom: 20px;
                                            }
                                            & h2 {
                                                color: var(--black2-devino);
                                                font-size: var(--h1-s);
                                                font-weight: var(--h1-w);
                                                line-height: var(--h1-l);
                                                margin-bottom: 30px;
                                                & span {
                                                    color: var(--red-devino);
                                                }
                                            }
                                            & p {
                                                color: var(--brown-devino);
                                                font-size: var(--h3-s);
                                                font-weight: var(--h3-w);
                                                line-height: var(--h3-l);
                                                max-width: 656px;
                                            }
                                            & .btn {
                                                margin-top: 80px;
                                                @media (max-width: 789px) {
                                                    margin-top: 70px;
                                                }
                                                @media (max-width: 430px) {
                                                    min-width: 100%;
                                                    text-align: center;
                                                }
                                            }
                                        }
                                        & .img__content {
                                            position: absolute;
                                            right: 0;
                                            bottom: 0;
                                            z-index: 1;
                                            @media (max-width: 789px) {
                                                display: none;
                                            }
                                        }
                                    }
                                    
                                    .about__product_sec {
                                        & .container {
                                            display: flex;
                                            /* justify-content: space-between; */
                                            align-items: center;
                                            gap: 30px;
                                            @media (max-width: 789px) {}
                                            @media (max-width: 430px) {
                                                flex-direction: column;
                                            }
                                        }
                                        & h2 {
                                            color: var(--red-devino) !important;
                                            max-width: 630px;
                                            width: 100%;
                                        }
                                        & .img__content {
                                            max-width: 630px;
                                            width: 100%;
                                            display: flex;
                                            justify-content: center;
                                            @media (max-width: 789px) {
                                                max-width: 330px;
                                                /* width: 47.8%; */
                                            }
                                        }
                                        & .text__content {
                                            max-width: 630px;
                                            width: 100%;
                                            display: flex;
                                            justify-content: center;
                                            @media (max-width: 789px) {
                                                max-width: 330px;
                                                /* width: 47.8%; */
                                            }
                                        }
                                    }
                                    
                                    .stay__about_sec {
                                        & .container {
                                            display: flex;
                                            flex-direction: column;
                                            gap: 0px;
                                            align-items: center;
                                            & .content {
                                                display: flex;
                                                flex-direction: row;
                                                gap: 30px;
                                                width: 100%;
                                                @media (max-width: 789px) {
                                                    align-items: center;
                                                }
                                                @media (max-width: 430px) {
                                                    flex-direction: column-reverse;
                                                }
                                                & .img__content {
                                                    max-width: 630px;
                                                    width: 100%;
                                                    display: flex;
                                                    justify-content: center;
                                                    max-height: 592pX;
                                                    @media (max-width: 789px) {
                                                        /* width: calc(100%/2.5); */
                                                        max-width: 330px;
                                                    }
                                                    @media (max-width: 430px) {
                                                        display: none;
                                                    }
                                                    & img {
                                                        max-height: 100%;
                                                    }
                                                }
                                                & .text__content {
                                                    display: flex;
                                                    flex-direction: column;
                                                    max-width: 630px;
                                                    @media (max-width: 789px) {
                                                        max-width: 330px;
                                                    }
                                                    & h2 {
                                                        margin-bottom: 30px;
                                                    }
                                                    & p {
                                                        margin-bottom: 28px;
                                                        font-size: var(--h5-s);
                                                        line-height: var(--h5-l);
                                                        font-weight: var(--h5-w);
                                                        color: var(--brown-devino);
                                                    }
                                                    & ul {
                                                        list-style: none;
                                                        display: flex;
                                                        max-width: 629px;
                                                        width: 100%;
                                                        justify-content: space-between;
                                                        margin-bottom: 30px;
                                                        & li {
                                                            list-style: none;
                                                            display: flex;
                                                            flex-direction: column;
                                                            max-width: 300px;
                                                            & .head__text {
                                                                color: var(--red-devino);
                                                                font-size: var(--h1-s);
                                                                font-weight: var(--h1-w);
                                                                line-height: var(--h1-l);
                                                                margin-bottom: 12px;
                                                            }
                                                            & p {
                                                                margin-bottom: 0;
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                            & .btn {
                                                margin-top: 80px;
                                                @media (max-width: 789px) {
                                                    margin-top: 60px;
                                                }
                                                @media (max-width: 430px) {
                                                    min-width: 100%;
                                                    margin-top: 45px;
                                                }
                                            }
                                        }
                                    }
                                    
                                    .benefits_sec {
                                        & .container {
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            flex-wrap: wrap;
                                            & h2 {
                                                @media (max-width: 789px) {
                                                    margin-bottom: 17px;
                                                }
                                            }
                                        }
                                        & h2 {
                                            display: flex;
                                            width: 100%;
                                            text-align: center;
                                            justify-content: center;
                                        }
                                        & .img__content {
                                            width: 770px;
                                        }
                                        & .text__content {
                                            display: flex;
                                            flex-direction: column;
                                            max-width: 430px;
                                            width: 100%;
                                            & ul {
                                                list-style: none;
                                                display: flex;
                                                flex-direction: column;
                                                & li {
                                                    list-style: none;
                                                    display: flex;
                                                    flex-direction: column;
                                                    margin-bottom: 30px;
                                                    & h3 {
                                                        font-size: var(--h1-s);
                                                        font-weight: var(--h1-w);
                                                        line-height: var(--h1-l);
                                                        color: var(--red-devino);
                                                        margin-bottom: 20px;
                                                    }
                                                    & p {
                                                        font-size: var(--h5-s);
                                                        font-weight: var(--h5-w);
                                                        line-height: var(--h5-l);
                                                        color: var(--black2-devino);
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    
                                    .capa_sec {
                                        & h2 {
                                            text-align: center;
                                        }
                                        & .capa__list {
                                            display: flex;
                                            flex-wrap: wrap;
                                           
                                            list-style: none;
                                            gap: 30px;
                                            @media (max-width: 789px) {
                                                column-gap: 28px;
                                            }
                                            & li {
                                                display: flex;
                                                flex-direction: column;
                                                
                                                border-radius: 20px;
                                                box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                                                background-color: #fff;
                                                align-items: center;
                                                padding: 30px 20px;
                                                width: 100%;
                                                --widthB: calc(100% - 60px);
                                                max-width: calc(var(--widthB)/3);
                                                @media (max-width: 789px) {
                                                    --widthB: calc(100% - 28px);
                                                    max-width: calc(var(--widthB)/2);
                                                }
                                                @media (max-width: 430px) {
                                                    max-width: 100%;
                                                    row-gap: 24px;
                                                }
                                                &:last-child {
                                                    margin: 0 auto;
                                                }
                                                & img {
                                                    width: 80px;
                                                    height: 80px;
                                                    margin-bottom: 18px;
                                                }
                                                & p {
                                                    text-align: center;
                                                    color: var(--black2-devino);
                                                    font-size: var(--h5-s);
                                                    font-weight: var(--h5-w);
                                                    line-height: var(--h5-l);
                                                }
                                                &:last-child {}
                                                & h3 {
                                                    font-size: var(--h4-s) !important;
                                                    font-weight: var(--h4-w) !important;
                                                    line-height: var(--h4-l) !important;
                                                }
                                            }
                                        }
                                        & .btn {
                                            margin: 80px auto 0 auto;
                                            @media (max-width: 789px) {
                                                margin-top: 60px;
                                               
                                            }
                                            @media (max-width: 430px) {
                                                margin-top: 45px;
                                                
                                            }
                                        }
                                    }
                                    
                                    .partnership_sec {
                                        & h2 {
                                            text-align: center;
                                        }
                                        & .partnership__list {
                                            display: flex;
                                            flex-wrap: wrap;
                                            justify-content: space-between;
                                            list-style: none;
                                            width: 100%;
                                            & li {
                                                list-style: none;
                                                display: flex;
                                                max-width: 610px;
                                                width: 100%;
                                                margin-bottom: 30px;
                                                align-items: start;
                                                & img {
                                                    width: 60px;
                                                    margin-right: 30px;
                                                }
                                                & .text__content {
                                                    display: flex;
                                                    flex-direction: column;
                                                    & h3 {
                                                        color: var(--black2-devino);
                                                        font-size: var(--h4-s);
                                                        font-weight: var(--h4-w);
                                                        line-height: var(--h4-l);
                                                        margin-bottom: 16px;
                                                    }
                                                    & p {
                                                        color: var(--brown-devino);
                                                        font-size: var(--h5-s);
                                                        font-weight: var(--h5-w);
                                                        line-height: var(--h5-l);
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    
                                    .profit_sec {
                                        & h2 {
                                            text-align: center;
                                        }
                                        & .profit__list {
                                            list-style: none;
                                            width: 100%;
                                            display: flex;
                                            flex-wrap: wrap;
                                            justify-content: space-between;
                                            & li {
                                                list-style: none;
                                                display: flex;
                                                flex-direction: column;
                                                background-color: #fff;
                                                box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                                                border-radius: 10px;
                                                max-width: 300px;
                                                width: 100%;
                                                padding: 30px 20px;
                                                align-items: center;
                                                & img {
                                                    width: 80px;
                                                    height: 80px;
                                                    margin-bottom: 20px;
                                                }
                                                & h3 {
                                                    font-size: var(--h4-s);
                                                    font-weight: var(--h4-w);
                                                    line-height: var(--h4-l);
                                                    color: var(--black2-devino);
                                                    margin-bottom: 20px;
                                                }
                                                & p {
                                                    text-align: center;
                                                    font-size: var(--h5-s);
                                                    font-weight: var(--h5-w);
                                                    line-height: var(--h5-l);
                                                    color: var(--brown-devino);
                                                }
                                            }
                                        }
                                    }
                                    
                                    .busi_sec {
                                        
                                        & .container {
                                            display: flex;
                                            
                                            flex-direction: column;
                                            align-items: center;
                                            & .content {
                                                display: flex;
                                                flex-direction: row;
                                                gap: 30px;
                                                @media (max-width: 430px) {
                                                    flex-direction: column;
                                                    gap: 24px;
                                                }
                                            }
                                            & .btn {
                                                display: none;
                                                @media (max-width: 430px) {
                                                    margin-top: 60px;
                                                    text-align: center;
                                                    display: block;
                                                }
                                            }
                                        }
                                        & .text__content {
                                            display: flex;
                                            flex-direction: column;
                                            max-width: 630px;
                                            width: 100%;
                                            & h2 {
                                                margin-bottom: 0;
                                            }
                                            @media (max-width: 430px) {
                                                /* max-width: 100%; */
                                            }
                                            & .btn {
                                                display: block;
                                                margin-top: 15px;
                                                margin-top: 80px;
                                                @media (max-width: 430px) {
                                                    display: none;
                                                }
                                            }
                                        }
                                        & .img__content {}
                                        & a {
                                            @media (max-width: 430px) {
                                                min-width: 100%;
                                            }
                                        }
                                    }
                                    
                                    .achi_sec {
                                        & h2 {
                                            text-align: center;
                                        }
                                        & .achi__list {
                                            list-style: none;
                                            display: flex;
                                            flex-direction: column;
                                            width: 100%;
                                            gap: 30px;
                                            @media (max-width: 789px) {
                                                gap: 28px;
                                            }
                                            @media (max-width: 430px) {
                                                gap: 24px;
                                            }
                                            & li {
                                                list-style: none;
                                                width: 100%;
                                                display: flex;
                                                /* flex-wrap: wrap; */
                                                gap: 30px;
                                                align-items: center;
                                                @media (max-width: 789px) {}
                                                @media (max-width: 430px) {
                                                    gap: 12px;
                                                    flex-direction: column-reverse;
                                                }
                                                & .text__content {
                                                    display: flex;
                                                    flex-direction: column;
                                                    max-width: 630px;
                                                    width: 100%;
                                                    @media (max-width: 789px) {
                                                        max-width: 330px;
                                                    }
                                                    @media (max-width: 430px) {
                                                        max-width: 100%;
                                                    }
                                                    & h3 {
                                                        margin-bottom: 20px;
                                                        font-size: var(--h3-s);
                                                        font-weight: var(--h3-w);
                                                        line-height: var(--h3-l);
                                                        color: var(--black2-devino);
                                                    }
                                                    & ul {
                                                        list-style: square !important;
                                                        display: flex;
                                                        flex-direction: column;
                                                        & li {
                                                            padding-left: 32px;
                                                            position: relative;
                                                            max-width: 630px;
                                                            width: 100%;
                                                            justify-content: start;
                                                            text-align: left;
                                                            list-style: square !important;
                                                            display: flex;
                                                            flex-direction: row;
                                                            margin-bottom: 14px;
                                                            font-size: var(--h5-s);
                                                            font-weight: var(--h5-w);
                                                            line-height: var(--h5-l);
                                                            color: var(--brown-devino);
                                                            justify-content: start;
                                                            align-items: start;
                                                            &::before {
                                                                top: 8px;
                                                                left: 0;
                                                                position: absolute;
                                                                content: '';
                                                                background-color: var(--red-devino);
                                                                width: 12px;
                                                                height: 12px;
                                                                border-radius: 50%;
                                                            }
                                                        }
                                                    }
                                                }
                                                & .img__content {
                                                    max-width: 630px;
                                                    width: 100%;
                                                    display: flex;
                                                    justify-content: center;
                                                    
                                                    @media (max-width: 789px) {
                                                        width: 100%;
                                                        --widthB: calc(100% - 30px);
                                                        max-width: calc(var(--widthB)/2);
                                                       
                                                    }
                                                    @media (max-width: 430px) {
                                                        max-width: 100%;
                                                        
                                                    }
                                                }
                                                & img {
                                                    height: 430px;
                                                    @media (max-width: 789px) {
                                                        max-width: 100%;
                                                        width: 330px;
                                                        height: auto;
                                                    }
                                                }
                                                &:nth-of-type(2n) {
                                                    flex-direction: row-reverse;
                                                    @media (max-width: 430px) {
                                                        flex-direction: column-reverse;
                                                    }
                                                }
                                            }
                                        }
                                        & .btn {
                                            margin: 80px auto 0 auto;
                                            @media (max-width: 789px) {
                                                margin-top: 60px;
                                               
                                            }
                                            @media (max-width: 430px) {
                                                margin-top: 45px;
                                                
                                            }
                                        }
                                    }
                                    
                                    .advacapa_sec {
                                        & p {
                                            margin-bottom: 30px;
                                            max-width: 630px;
                                            font-size: var(--h5-s);
                                            font-weight: var(--h5-w);
                                            line-height: var(--h5-l);
                                            text-align: center;
                                            margin-left: auto;
                                            margin-right: auto;
                                            color: var(--brown-devino);
                                        }
                                    }
                                    
                                    .customer_sec {
                                        & h2 {
                                            margin-bottom: 30px !important;
                                        }
                                        & p {
                                            max-width: 850px;
                                            display: flex;
                                            width: 100%;
                                            margin: 0 auto 30px auto;
                                            font-size: var(--h5-s);
                                            font-weight: var(--h5-w);
                                            line-height: var(--h5-l);
                                            color: var(--black2-devino);
                                            text-align: center;
                                        }
                                        & ul {
                                            margin-bottom: 80px !important;
                                        }
                                        & .btn {
                                            margin: 0 auto;
                                        }
                                    }
                                    
                                    .about__platform_sec {
                                        & .container {
                                            display: flex;
                                            align-items: center;
                                            gap: 30px;
                                            /* flex-wrap: wrap; */
                                            @media (max-width: 789px) {}
                                            @media (max-width: 430px) {
                                                max-width: 320px;
                                                flex-wrap: wrap;
                                            }
                                            & .text__content {
                                                display: flex;
                                                flex-direction: column;
                                                max-width: 630px;
                                                width: 100%;
                                                @media (max-width: 789px) {
                                                    max-width: 330px;
                                                }
                                                & h2 {
                                                    font-size: var(--h2-s);
                                                    font-weight: var(--h2-w);
                                                    line-height: var(--h2-l);
                                                    color: var(--red-devino);
                                                    margin-bottom: 20px;
                                                }
                                                & p {
                                                    font-size: var(--h5-s);
                                                    font-weight: var(--h5-w);
                                                    line-height: var(--h5-l);
                                                    color: var(--black2-devino);
                                                }
                                            }
                                            & .img__content {
                                                max-width: 630px;
                                                width: 100%;
                                                display: flex;
                                                justify-content: center;
                                                @media (max-width: 789px) {
                                                    max-width: calc(50%-15px);
                                                }
                                                @media (max-width: 430px) {
                                                    max-width: 100%;
                                                }
                                            }
                                        }
                                    }
                                    
                                    .benefits__list_sec {
                                        & .capa__list {
                                            & li {
                                                /* @media (max-width: 789px) {
                                                    max-width: 100%;
                                                    width: 47.8%;
                                                } */
                                                &:last-of-type {
                                                    /* margin-left: auto;
                                                        margin-right: auto; */
                                                }
                                                & img {
                                                    margin-bottom: 16px;
                                                }
                                                & h3 {
                                                    color: var(--black2-devino);
                                                    font-size: var(--h5-s);
                                                    font-weight: var(--h5-w);
                                                    line-height: var(--h5-l);
                                                    margin-bottom: 16px;
                                                    text-align: center;
                                                }
                                                & p {
                                                    color: var(--brown-devino);
                                                    font-size: var(--h5-s);
                                                    font-weight: var(--h5-w);
                                                    line-height: var(--h5-l);
                                                }
                                            }
                                        }
                                    }
                                    
                                    .capa__platform_sec {
                                        & .capa__platform__list {
                                            /* margin-bottom: 80px; */
                                            & li:not(:last-of-type) {
                                                margin-bottom: 30px;
                                            }
                                            & li {
                                                flex-direction: row;
                                                @media (max-width: 430px) {
                                                    flex-direction: column;
                                                }
                                                & .text__content {
                                                    @media (max-width: 789px) {
                                                        max-width: 330px;
                                                    }
                                                    @media (max-width: 430px) {
                                                        max-width: 100%;
                                                    }
                                                }
                                                & .img__content img {
                                                    @media (max-width: 789px) {
                                                        /* max-width: calc(100%/2); */
                                                    }
                                                }
                                                &:nth-of-type(2n) {
                                                    flex-direction: row-reverse;
                                                    @media (max-width: 430px) {
                                                        flex-direction: column;
                                                    }
                                                }
                                            }
                                        }
                                        & .btn {
                                            margin: 0 auto;
                                            margin-top: 45px;
                                        }
                                    }
                                    
                                    .connection_sec {
                                        & .container {
                                            & h2 {
                                                text-align: center;
                                                @media (max-width: 789px) {
                                                    margin-bottom: 45px;
                                                }
                                            }
                                        }
                                        & .connection__acardion {
                                            display: flex;
                                            width: 100%;
                                            align-items: center;
                                            gap: 30px;
                                            
                                            & .img__content {
                                                position: relative;
                                                overflow: hidden;
                                                display: flex;
                                                max-width: 570px;
                                                height: 565px;
                                                width: 100%;
                                                justify-content: center;
                                                align-items: center;
                                                @media (max-width: 789px) {
                                                    max-width: 330px;
                                                    height: 400px;
                                                }
                                                @media (max-width: 430px) {
                                                    display: none;
                                                }
                                                & img {
                                                    display: block;
                                                    position: absolute;
                                                    right: -600px;
                                                    height: 100%;
                                                    opacity: 0;
                                                    transition: right 0.4s, opacity 0.9s;
                                                    &.active {
                                                        opacity: 1;
                                                        right: 0;
                                                    }
                                                }
                                            }
                                            & .main__content {
                                                & .accordion {
                                                    display: flex;
                                                    background-color: transparent;
                                                    color: var(--black-devino);
                                                    cursor: pointer;
                                                    padding-bottom: 30px;
                                                    padding-top: 30px;
                                                    font-size: var(--h4-s);
                                                    font-weight: var(--h4-w);
                                                    line-height: var(--h4-l);
                                                    width: 100%;
                                                    min-width: 100%;
                                                    text-align: left;
                                                    border: none;
                                                    outline: none;
                                                    transition: 0.4s;
                                                    &:not(:first-of-type) {
                                                        border-top: 1px solid var(--grey-devino);
                                                    }
                                                    &:first-of-type
                                                    {
                                                        padding-top: 0;
                                                    }
                                                    &::after {
                                                        content: '';
                                                        background-image: url(../media/arow_bottom.svg);
                                                        background-size: contain;
                                                        background-position: center;
                                                        background-repeat: no-repeat;
                                                        display: flex;
                                                        min-width: 24px;
                                                        min-height: 24px;
                                                        margin-left: auto;
                                                        transition: 0.4s;
                                                        transform: rotate(0deg);
                                                    }
                                                    &.active::after {
                                                        transform: rotate(180deg);
                                                    }
                                                }
                                                & .active,
                                                .accordion:hover {
                                                    color: var(--red-devino);
                                                }
                                                & .panel {
                                                    color: var(--black2-devino);
                                                    font-size: var(--h5-s);
                                                    font-weight: var(--h5-w);
                                                    line-height: var(--h5-l);
                                                    background-color: transparent;
                                                    max-height: 0;
                                                    overflow: hidden;
                                                    transition: max-height 0.2s ease-out;
                                                }
                                            }
                                        }
                                    }
                                    
                                    .solution__start_sec {
                                        & .img__content {
                                            bottom: 0;
                                        }
                                    }
                                    
                                    .exemple_sec {
                                        & .exemple__list {
                                            display: flex;
                                            flex-direction: row;
                                            width: 100%;
                                            column-gap: 30px;
                                            row-gap: 28px;
                                            flex-wrap: wrap;
                                            margin-bottom: 0;
                                           
                                            & li {
                                               
                                                max-width: 410px;
                                                display: flex;
                                                flex-direction: column;                              
                                                width: 100%;                                      
                                                border-radius: 30px;
                                                padding: 30px;
                                                min-height: 438px;
                                                /* justify-content: space-between; */
                                                height: 100%;
                                                background-color: white;
                                                box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                                                @media (max-width: 1360px) {
                                                    min-height:auto;
                                                    max-width: calc(50% - 15px);
                                                    &:last-of-type {
                                                        position: relative;
                                                        margin-left: auto;
                                                        margin-right: auto;
                                                    }  
                                                }
                                                @media (max-width: 789px) { 
                                                    padding: 20px !important;                                  
                                                    max-width: 330px;                                                 
                                                    min-height: auto;    
                                                    &:last-of-type {
                                                            position: relative;
                                                            margin-left: auto;
                                                            margin-right: auto;
                                                        }                                                                                        
                                                }
                                                @media (max-width: 430px) {
                                                    max-width: 100%;
                                                    min-height: 268px;                                              
                                                }
                                                & .scrin {
                                                    padding: 20px;
                                                    display: flex;
                                                    width: 100%;
                                                    box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                                                    border-radius: 20px;
                                                    margin-bottom: 30px;
                                                    @media (max-width: 789px) {
                                                        margin-bottom: 28px;
                                                        padding:12px;
                                                    }
                                                    @media (max-width: 430px) {
                                                        
                                                        margin-bottom: 24px;
                                                    }
                                                    & img {
                                                        width: 57px;
                                                        height: 57px;
                                                        margin-right: 20px;
                                                        @media (max-width: 789px) {
                                                            width: 40px;
                                                            height: 40px;
                                                            margin-right: 10px;
                                                        }
                                                    }
                                                    & p {
                                                        max-width: 233px;
                                                        width: 100%;
                                                        color: var(--brown-devino);
                                                        font-size: var(--h5-s);
                                                        font-weight: var(--h5-w);
                                                        line-height: var(--h5-l);
                                                    }
                                                }
                                                & h3 {
                                                    height: 100%;
                                                    align-items: center;
                                                    justify-content: center;
                                                    display: flex;
                                                    text-align: center;
                                                    color: var(--red-devino);
                                                    font-size: var(--h4-s);
                                                    font-weight: var(--h4-w);
                                                    line-height: var(--h4-l);
                                                }
                                            }
                                            & .slick-list
                                            {
                                                overflow: visible;
                                                @media (max-width: 430px) {
                                                    overflow: hidden;
                                                    box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%); 
                                                    
                                              }
                                            }
                                            & .btn_dots__container
                                            {
                                                /* position: absolute; */
                                                display: flex;
                                                justify-content: space-between;
                                                align-items: center;
                                                max-width: 100%;
                                                width: 100%;
                                                /* bottom: 60px;
                                                left: 0; */
                                                overflow: hidden;
                                                @media (max-width: 430px) {
                                                   
                                                    margin-top: 24px;
                                                    
                                                }
                                                & .slick-dots {
                                                    margin: 0 auto;
                                                    display: flex;
                                                    position: static;
                                                    width: fit-content;
                                                    & .slick-active {
                                                        & button {
                                                            &::before {
                                                                font-size: 14px;
                                                                color: var(--red-devino);
                                                                opacity: 1;
                                                            }
                                                        }
                                                    }
                                                    & button {
                                                        &::before {
                                                            font-size: 7px;
                                                            color: var(--brown2-devino);
                                                            opacity: 1;
                                                        }
                                                    }
                                                }
                                                & .slick-arrow {
                                                    position: static;
                                                    z-index: 2;
                                                    height: auto;
                                                    width: fit-content;
                                                    display: flex;
                                                    -webkit-transform: translate(0, 0);
                                                    & svg {
                                                        width: 60px;
                                                    }
                                                    &::before {
                                                        display: none;
                                                    }
                                                    &.slick-prev {
                                                        display: flex;
                                                        width: fit-content;
                                                        & svg {
                                                            transform: rotate(180deg);
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    .exemple_sec_slider {
                                        & .exemple__list {
                                            display: flex;
                                            flex-direction: column;
                                            width: 100%;
                                            gap: 30px;
                                            margin-bottom: 0;
                                            & li {
                                               
                                                max-width: 410px;
                                               
                                                
                                                @media (max-width: 789px) {                                   
                                                    max-width: 330px;                                                 
                                                                                                                                                       
                                                }
                                                @media (max-width: 430px) {
                                                    max-width: 100%;                                             
                                                }
                                                & .exemple {
                                                    display: flex;
                                                    flex-direction: column;                              
                                                    width: 100%;                                      
                                                    border-radius: 30px;
                                                    padding: 30px;
                                                    min-height: 438px;
                                                    height: 100%;
                                                    background-color: white;
                                                    box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                                                        @media (max-width: 789px) {
                                                            padding: 20px !important;        
                                                            /* margin-bottom: 28px; */
                                                            min-height: 272px; 
                                                            /* &:last-of-type {
                                                                position: relative;
                                                                margin-left: auto;
                                                                margin-right: auto;
                                                            } */
                                                        }
                                                        @media (max-width: 430px) {
                                                            
                                                            min-height: 268px; 
                                                        }
                                                    & .scrin {
                                                        padding: 20px;
                                                        display: flex;
                                                        width: 100%;
                                                        box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                                                        border-radius: 20px;
                                                        margin-bottom: 30px;
                                                        @media (max-width: 789px) {
                                                            margin-bottom: 28px;
                                                            padding:12px;
                                                        }
                                                        @media (max-width: 430px) {
                                                            
                                                            margin-bottom: 24px;
                                                        }
                                                        & img {
                                                            width: 57px;
                                                            height: 57px;
                                                            margin-right: 20px;
                                                            @media (max-width: 789px) {
                                                                width: 40px;
                                                                height: 40px;
                                                                margin-right: 10px;
                                                            }
                                                        }
                                                        & p {
                                                            max-width: 233px;
                                                            width: 100%;
                                                            color: var(--brown-devino);
                                                            font-size: var(--h5-s);
                                                            font-weight: var(--h5-w);
                                                            line-height: var(--h5-l);
                                                        }
                                                    }
                                                    & h3 {
                                                        height: 100%;
                                                        align-items: center;
                                                        justify-content: center;
                                                        display: flex;
                                                        text-align: center;
                                                        color: var(--red-devino);
                                                        font-size: var(--h4-s);
                                                        font-weight: var(--h4-w);
                                                        line-height: var(--h4-l);
                                                    }
                                                }
                                            }
                                            & .slick-list
                                            {
                                                overflow: visible;
                                                @media (max-width: 430px) {
                                                    overflow: hidden;
                                                    box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%); 
                                                    
                                              }
                                            }
                                            & .btn_dots__container
                                            {
                                                /* position: absolute; */
                                                display: flex;
                                                justify-content: space-between;
                                                align-items: center;
                                                max-width: 100%;
                                                width: 100%;
                                                /* bottom: 60px;
                                                left: 0; */
                                                overflow: hidden;
                                                @media (max-width: 430px) {
                                                   
                                                    margin-top: 24px;
                                                    
                                                }
                                                & .slick-dots {
                                                    margin: 0 auto;
                                                    display: flex;
                                                    position: static;
                                                    width: fit-content;
                                                    & .slick-active {
                                                        & button {
                                                            &::before {
                                                                font-size: 14px;
                                                                color: var(--red-devino);
                                                                opacity: 1;
                                                            }
                                                        }
                                                    }
                                                    & button {
                                                        &::before {
                                                            font-size: 7px;
                                                            color: var(--brown2-devino);
                                                            opacity: 1;
                                                        }
                                                    }
                                                }
                                                & .slick-arrow {
                                                    position: static;
                                                    z-index: 2;
                                                    height: auto;
                                                    width: fit-content;
                                                    display: flex;
                                                    -webkit-transform: translate(0, 0);
                                                    & svg {
                                                        width: 60px;
                                                    }
                                                    &::before {
                                                        display: none;
                                                    }
                                                    &.slick-prev {
                                                        display: flex;
                                                        width: fit-content;
                                                        & svg {
                                                            transform: rotate(180deg);
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    .product__start_sec {
                                        position: relative;
                                        & .container {
                                            position: static;
                                        }
                                        & .img__content {
                                            position: absolute;
                                            bottom: 0;
                                            right: 12%;
                                        }
                                    }
                                    
                                    .about__product_pro_sec {
                                        @media (max-width: 789px) {
                                            padding: 45px 40px;
                                        }
                                        @media (max-width: 430px) {
                                            padding: 35px 28px;
                                        }
                                        & .container {
                                            display: flex;
                                            justify-content: space-between;
                                            align-items: center;
                                            gap: 30px;
                                            @media (max-width: 789px) {
                                                /* height: 418px; */
                                                /* padding: 45px 40px; */
                                            }
                                            @media (max-width: 430px) {
                                                flex-direction: column;
                                                justify-content: center;
                                                gap: 24px;
                                            }
                                        }
                                        & .text__content {
                                            display: flex;
                                            flex-direction: column;
                                            max-width: 630px;
                                            width: 100%;
                                            @media (max-width: 789px) {
                                                max-width: 330px;
                                                /* width: 47.8%; */
                                            }
                                            @media (max-width: 430px) {
                                                /* padding: 45px 40px; */
                                                max-width: 320px;
                                            }
                                            & h2 {
                                                margin-bottom: 30px;
                                                font-size: var(--h2-s);
                                                font-weight: var(--h2-w);
                                                line-height: var(--h2-l);
                                                color: var(--black2-devino);
                                                & span {
                                                    color: var(--red-devino);
                                                }
                                                @media (max-width: 430px) {
                                                    margin-bottom: 12px;
                                                }
                                            }
                                            & p {
                                                font-size: var(--h5-s);
                                                font-weight: var(--h5-w);
                                                line-height: var(--h5-l);
                                                color: var(--brown-devino);
                                                &:not(:last-of-type) {
                                                    margin-bottom: 30px;
                                                }
                                            }
                                        }
                                        & .img__content {
                                            max-width: 630px;
                                            @media (max-width: 789px) {
                                                max-width: 330px;
                                            }
                                            @media (max-width: 430px) {
                                                max-width: 320px;
                                            }
                                        }
                                    }
                                    
                                    .faq_sec {
                                        & .container {
                                            display: flex;
                                            flex-direction: column;
                                            align-items: center;
                                        }
                                        & h2 {
                                            text-align: center;
                                        }
                                        & .connection__acardion {
                                            max-width: 690px;
                                            margin: 0 auto 60px auto;
                                            @media (max-width: 789px) {
                                                max-width: 510px;
                                                margin: 0 auto 60px auto;
                                            }
                                            & .accordion {
                                                max-width: 636px;
                                                &::after {}
                                            }
                                        }
                                        & .btn {
                                            /* margin: 80px auto 0 auto; */
                                        }
                                    }
                                    
                                    .notfound_sec {
                                        & .container {
                                            display: flex;
                                            flex-direction: column;
                                            align-items: center;
                                        }
                                        & img {
                                            max-width: 397px;
                                            width: 100%;
                                            max-height: 464px;
                                            height: 100%;
                                            margin-bottom: 39px;
                                        }
                                        & h2 {
                                            font-size: var(--h2-s);
                                            font-weight: var(--h2-w);
                                            color: var(--black2-devino);
                                            line-height: var(--h2-l);
                                            margin-bottom: 20px !important;
                                            text-align: center;
                                        }
                                        & p {
                                            font-size: var(--h5-s);
                                            font-weight: var(--h5-w);
                                            color: var(--brown-devino);
                                            line-height: var(--h5-l);
                                            margin-bottom: 30px;
                                            text-align: center;
                                        }
                                        & .btn {
                                            margin: 0 auto;
                                        }
                                    }
                                    
                                    .cases__page_sec { 
                                        & .cases__two__list {
                                            display: flex;
                                            width: 100%; 
                                            flex-direction: column;
                                            /* justify-content: space-between; */
                                            /* flex-wrap: wrap; */
                                            /* margin-bottom: -30px; */
                                            & li {
                                                display: flex;
                                                max-width: 410px;
                                                width: 100%;
                                                cursor: pointer;
                                                @media (max-width: 789px) {
                                                    row-gap: 28px;
                                                    max-width: 330px;
                                                }
                                                @media (max-width: 430px) {
                                                    row-gap: 24px;
                                                    max-width: 100%;
                                                }
                                                &:hover
                                                {
                                                    & p 
                                                    {
                                                        color: var(--red-devino);
                                                        transition: 0.4s;
                                                    }
                                                }
                                                & a {
                                                    display: flex;
                                                    flex-direction: column;
                                                    /* max-width: 420px; */
                                                    width: 100%;
                                                    border-radius: 20px;
                                                    box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                                                    background-color: white;
                                                    padding: 25px;
                                                    /* margin-bottom: 30px; */
                                                    & img {
                                                        max-width: 370px;
                                                        width: 100%;
                                                        border-radius: 20px;
                                                        margin-bottom: 20px;
                                                        border-radius: 23px;
                                                        min-height: 205px;
                                                        max-height: 205px;
                                                    }
                                                    & p {
                                                        font-size: var(--h5-s);
                                                        line-height: var(--h5-l);
                                                        font-weight: var(--h5-w);
                                                        color: var(--brown-devino);
                                                    }
                                                }
                                                
                                            }
                                            & .slick-list
                                            {
                                                overflow: visible;
                                                @media (max-width: 430px) {
                                                    overflow: hidden;
                                                    box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%); 
                                                    
                                              }
                                            }
                                            & .btn_dots__container
                                            {
                                                /* position: absolute; */
                                                display: flex;
                                                justify-content: space-between;
                                                align-items: center;
                                                max-width: 547px;
                                                width: 100%;
                                                /* bottom: 60px;
                                                left: 0; */
                                                overflow: hidden;
                                                @media (max-width: 430px) {
                                                   
                                                    margin-top: 24px;
                                                    
                                                }
                                                & .slick-dots {
                                                    margin: 0 auto;
                                                    display: flex;
                                                    position: static;
                                                    width: fit-content;
                                                    & .slick-active {
                                                        & button {
                                                            &::before {
                                                                font-size: 14px;
                                                                color: var(--red-devino);
                                                                opacity: 1;
                                                            }
                                                        }
                                                    }
                                                    & button {
                                                        &::before {
                                                            font-size: 7px;
                                                            color: var(--brown2-devino);
                                                            opacity: 1;
                                                        }
                                                    }
                                                }
                                                & .slick-arrow {
                                                    position: static;
                                                    z-index: 2;
                                                    height: auto;
                                                    width: fit-content;
                                                    display: flex;
                                                    -webkit-transform: translate(0, 0);
                                                    & svg {
                                                        width: 60px;
                                                    }
                                                    &::before {
                                                        display: none;
                                                    }
                                                    &.slick-prev {
                                                        display: flex;
                                                        width: fit-content;
                                                        & svg {
                                                            transform: rotate(180deg);
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                        & .buttons
                                        {
                                            display: flex;
                                            flex-direction: row;
                                            gap:30px;
                                            margin-top: 80px;
                                            justify-content: center;
                                            @media (max-width: 789px) {
                                                gap:28px;
                                                margin-top: 45px;
                                            }
                                            @media (max-width: 430px) {
                                                flex-direction: column;
                                                margin-top: 45px;
                                                align-items:center;
                                                gap:24px;
                                            }
                                            & a 
                                            {
                                                margin: 0;
                                                min-width: 280px;
                                                @media (max-width: 789px) {
                                                    min-width: 244px;
                                                }
                                                @media (max-width: 430px) {
                                                    min-width: 100%;
                                                }
                                            }
                                        }
                                    }
                                    
                                    .case_sec {
                                        & .container {
                                            max-width: 1024px;
                                            display: flex;
                                            flex-direction: column;
                                        }
                                        & p.top__text {
                                            font-size: var(--h5-s);
                                            line-height: var(--h5-l);
                                            font-weight: var(--h5-w);
                                            color: var(--red-devino);
                                            text-transform: uppercase;
                                            margin-bottom: 30px;
                                        }
                                        & h1 {
                                            font-size: var(--h1-s);
                                            line-height: var(--h1-l);
                                            font-weight: var(--h1-w);
                                            color: var(--black2-devino);
                                            margin-bottom: 30px;
                                            & span {
                                                color: var(--red-devino);
                                            }
                                        }
                                        & img {
                                            width: 100%;
                                            margin-bottom: 30px;
                                            border-radius: 58px;
                                            @media (max-width: 789px) {
                                                border-radius: 44px;
                                            }
                                            @media (max-width: 430px) {
                                                border-radius: 23px;
                                            }
                                        }
                                        & .text__content {
                                            display: flex;
                                            flex-direction: column;
                                            width: 100%;
                                            margin-bottom: 30px;
                                            &:last-of-type {
                                                margin-bottom: 0px;
                                            }
                                            & p:last-of-type {
                                                margin-bottom: 0px;
                                            }
                                        }
                                        & h2 {
                                            /* font-size: 36px !important;
                                            line-height: 52px !important;
                                            font-weight: 600 !important; */
                                            margin-top: 20px !important;
                                            color: var(--red-devino) !important;
                                            margin-bottom: 20px !important;
                                        }
                                        & h3 {
                                            font-size: var(--h3-s);
                                            line-height: var(--h3-l);
                                            font-weight: var(--h3-w);
                                            color: var(--black2-devino);
                                            margin-bottom: 20px;
                                        }
                                        & p {
                                            font-size: var(--h5-s);
                                            line-height: var(--h5-l);
                                            font-weight: var(--h5-w);
                                            color: var(--brown-devino);
                                            margin-bottom: 20px;
                                        }
                                        & h4 {
                                            font-size: var(--h4-s);
                                            line-height: var(--h4-l);
                                            font-weight: var(--h4-w);
                                            color: var(--black2-devino);
                                            margin-bottom: 14px;
                                        }
                                        & h5 {
                                            font-size: var(--h6-s);
                                            line-height: var(--h6-l);
                                            font-weight: var(--h6-w);
                                            color: var(--black2-devino);
                                            margin-bottom: 20px;
                                        }
                                        & ul {
                                            list-style: none;
                                            display: flex;
                                            flex-direction: column;
                                            width: 100%;
                                            & li {
                                                display: flex;
                                                list-style: none;
                                                align-items: center;
                                                font-size: var(--h5-s);
                                                font-weight: var(--h5-w);
                                                line-height: var(--h5-l);
                                                color: var(--brown-devino);
                                                &::before {
                                                    content: '';
                                                    display: flex;
                                                    width: 8px;
                                                    height: 8px;
                                                    background-color: var(--red-devino);
                                                    margin-right: 16px;
                                                    border-radius: 50%;
                                                    min-width: 8px;
                                                }
                                                &:not(:last-of-type) {
                                                    margin-bottom: 20px;
                                                }
                                            }
                                        }
                                        & ol {
                                            width: 100%;
                                            & li {
                                                font-size: var(--h5-s);
                                                font-weight: var(--h5-w);
                                                line-height: var(--h5-l);
                                                color: var(--brown-devino);
                                                &:not(:last-of-type) {
                                                    margin-bottom: 20px;
                                                }
                                            }
                                        }
                                    }
                                    
                                    .use__cases_sec {
                                        @media (max-width: 789px) {}
                                        @media (max-width: 430px) {
                                            /* min-height: 100%; */
                                            overflow: visible;
                                        }
                                        & .container>h2 {
                                            text-align: center;
                                        }
                                        & .use__cases__slider {
                                            display: flex;
                                            width: 100%;
                                            min-height: 707px;
                                            height: 100%;
                                            /* max-height: 833px; */
                                            overflow: hidden;
                                            flex-direction: column;
                                            @media (max-width: 789px) {
                                                /* height: 622px; */
                                                max-height: 100%;
                                            }
                                            @media (max-width: 430px) {
                                                /* max-height: 1200px; */
                                                /* overflow: hidden; */
                                                align-items: center;
                                            }
                                            & .product__navigation {
                                                display: flex;
                                                margin-bottom: 30px;
                                                margin-left: auto;
                                                margin-right: auto;
                                                flex-wrap: wrap;
                                                @media (max-width: 789px) {}
                                                @media (max-width: 430px) {
                                                    column-gap: 30px;
                                                    row-gap: 24px;
                                                    justify-content: center;
                                                    max-width: 200px;
                                                }
                                                & .icon__container {
                                                    position: relative;
                                                    display: flex;
                                                    flex-direction: column;
                                                    margin: 0 15px;
                                                    max-width: 57px;
                                                    width: 100%;
                                                    cursor: pointer;
                                                    max-height: 97px;
                                                    @media (max-width: 430px) {
                                                        margin: 0;
                                                        max-width: 40px;
                                                        max-height: 40px;
                                                    }
                                                    &:hover .color__icon {
                                                        opacity: 1;
                                                    }
                                                    &:hover .title__product {
                                                        opacity: 1;
                                                    }
                                                    &.active {
                                                        & .color__icon {
                                                            opacity: 1;
                                                        }
                                                        & .title__product {
                                                            opacity: 1;
                                                        }
                                                    }
                                                    & .color__icon {
                                                        transition: 0.3s;
                                                        position: absolute;
                                                        opacity: 0;
                                                    }
                                                    & .grey__icon {
                                                        margin-bottom: 16px;
                                                        @media (max-width: 430px) {
                                                            margin: 0;
                                                        }
                                                        & img {
                                                            filter: grayscale(100%);
                                                        }
                                                    }
                                                    & .title__product {
                                                        transition: 0.3s;
                                                        text-align: center;
                                                        display: flex;
                                                        width: 100%;
                                                        justify-content: center;
                                                        font-size: var(--h7-s);
                                                        font-weight: var(--h7-w);
                                                        line-height: var(--h7-l);
                                                        color: var(--brown-devino);
                                                        opacity: 0;
                                                        @media (max-width: 430px) {
                                                            display: none;
                                                        }
                                                    }
                                                }
                                            }
                                            & .main__product__slider {
                                                position: relative;
                                                display: flex;
                                                max-width: 1034px;
                                                margin: 0 auto;
                                                width: 100%;
                                                height: 100%;
                                                /* min-height: 560px; */
                                                overflow: hidden;
                                                @media (max-width: 789px) {
                                                    /* max-width: 622px; */
                                                }
                                                @media (max-width: 430px) {
                                                    max-width: 100%;
                                                    margin: 0;
                                                }
                                                & .case__slider__line {
                                                    left: 0;
                                                    transition: 0.3s;
                                                    position: absolute;
                                                    height: auto;
                                                    display: flex;
                                                    @media (max-width: 789px) {
                                                        /* height: 622px; */
                                                    }
                                                    @media (max-width: 430px) {
                                                        width: 100%;
                                                    }
                                                    & .case__slider {
                                                        max-width: 1034px;
                                                        width: 1034px;
                                                        height: 100%;
                                                        display: flex;
                                                        flex-direction: column;
                                                        @media (max-width: 789px) {
                                                            /* height: 622px; */
                                                        }
                                                        @media (max-width: 430px) {
                                                            width: 100%;
                                                        }
                                                        & .case__slide__nav {
                                                            
                                                            display: flex;
                                                            display: -webkit-flex;
                                                            margin: 0 auto 30px auto;
                                                            flex-wrap: wrap;
                                                            -webkit-flex-wrap: wrap;
                                                            -ms-flex-wrap: wrap;
                                                            -webkit-justify-content: center;
                                                            -ms-justify-content: center;
                                                            justify-content: center;
                                                            row-gap: 16px;
                                                            @media (max-width: 789px) {
                                                               
                                                                
                                                                margin: 0 0 12px 0;
                                                                width: 100%;
                                                                max-width: 690px;
                                                                
                                                            }
                                                            @media (max-width: 430px) {
                                                                max-width: 100%;
                                                            }
                                                            & .case__slide__nav_item {
                                                                display: flex;
                                                                width: fit-content;
                                                                font-size: var(--h6-s);
                                                                font-weight: var(--h6-w);
                                                                line-height: var(--h6-l);
                                                                color: var(--brown2-devino);
                                                                cursor: pointer;
                                                                margin: 0 11px;
                                                                transition: 0.3s;
                                                                
                                                                /* margin-bottom: 16px; */
                                                                @media (max-width: 789px) {
                                                                    /* margin-bottom: 16px; */
                                                                }
                                                                @media (max-width: 430px) {
                                                                    text-align: center;
                                                                }
                                                                &.active {
                                                                    color: var(--red-devino);
                                                                }
                                                                &:hover {
                                                                    color: var(--red-devino);
                                                                }
                                                            }
                                                        }
                                                        & .case__slide__slider {
                                                            height: 646px;
                                                            position: relative;
                                                            display: flex;
                                                            max-width: 1034px;
                                                            width: 1034px;
                                                            max-height: 646px;
                                                            overflow: hidden;
                                                            @media (max-width: 789px) {
                                                                height: 530px;
                                                            }
                                                            @media (max-width: 430px) {
                                                                /* max-height: 1200px; */
                                                                height: 1300px;
                                                                max-width: 100%;
                                                            }
                                                            & .case__slide__slider__line {
                                                                top: 0;
                                                                transition: 0.3s;
                                                                width: 1034px;
                                                                position: absolute;
                                                                display: flex;
                                                                flex-direction: column;
                                                                @media (max-width: 789px) {
                                                                    width: 690px;
                                                                }
                                                                @media (max-width: 430px) {
                                                                    width: 100%;
                                                                    max-height: 1200px;
                                                                }
                                                                & .case__slide__slider__item {
                                                                    display: flex;
                                                                    width: 100%;
                                                                    height: 648px;
                                                                    justify-content: space-between;
                                                                    align-items: center;
                                                                    overflow: hidden;
                                                                    @media (max-width: 789px) {
                                                                        height: 530px;
                                                                    }
                                                                    @media (max-width: 430px) {
                                                                        width: 100%;
                                                                        height: 100%;
                                                                        overflow: visible;
                                                                        flex-direction: column-reverse;
                                                                        justify-content: flex-end;
                                                                    }
                                                                    & .screen__container {
                                                                        display: flex;
                                                                        flex-direction: column;
                                                                        align-items: center;
                                                                        position: relative;
                                                                        overflow: hidden;
                                                                        height: 646px;
                                                                        width: 324px;
                                                                        border-radius: 56px;
                                                                        @media (max-width: 789px) {
                                                                            height: 530px;
                                                                        }
                                                                        @media (max-width: 430px) {
                                                                            height: 530px;
                                                                            width: 100%;
                                                                        }
                                                                        & img.back__phone {
                                                                            position: absolute;
                                                                            z-index: 1;
                                                                            width: 324px;
                                                                            min-height: 646px;
                                                                            @media (max-width: 789px) {
                                                                                width: 265px;
                                                                                min-height: 530px;
                                                                            }
                                                                            @media (max-width: 430px) {
                                                                                height: 530px;
                                                                                width: 320px;
                                                                            }
                                                                        }
                                                                        & .screen__line {
                                                                            position: absolute;
                                                                            display: flex;
                                                                            flex-direction: column;
                                                                            transition: 0.6s;
                                                                            top: 0;
                                                                            width: 282px;
                                                                            align-items: center;
                                                                            @media (max-width: 789px) {
                                                                                width: 238px;
                                                                            }
                                                                            @media (max-width: 430px) {
                                                                                width: 238px;
                                                                            }
                                                                        }
                                                                        & img:not(.back__phone) {
                                                                            transition: 0.6s;
                                                                            position: relative;
                                                                            width: 293px;
                                                                            height: 619px;
                                                                            z-index: 0;
                                                                            margin: 14px 0px;
                                                                            border-radius: 41px;
                                                                            margin-bottom: 12px;
                                                                            @media (max-width: 789px) {
                                                                                width: 238px;
                                                                                height: 100%;
                                                                                border-radius: 30px;
                                                                                margin: 14px 0;
                                                                                margin-bottom: 12px;
                                                                            }
                                                                        }
                                                                    }
                                                                    & .steps__container {
                                                                        display: flex;
                                                                        flex-direction: column;
                                                                        max-width: 610px;
                                                                        width: 100%;
                                                                        max-height: 520px;
                                                                        overflow-y: scroll;
                                                                        @media (max-width: 789px) {
                                                                            max-width: 380px;
                                                                        }
                                                                        & .steps {
                                                                            display: flex;
                                                                            padding: 16px 20px;
                                                                            border-left: 1px solid var(--brown2-devino);
                                                                            font-size: var(--h5-s);
                                                                            font-weight: var(--h5-w);
                                                                            line-height: var(--h5-l);
                                                                            color: var(--brown-devino);
                                                                            margin: 10px 0;
                                                                            cursor: pointer;
                                                                            transition: 0.2s;
                                                                            &:hover {
                                                                                border-color: var(--brown2-devino);
                                                                                padding: 16px 20px;
                                                                                color: var(--black2-devino);
                                                                            }
                                                                            &.active {
                                                                                border-color: var(--red-devino);
                                                                                padding: 16px 20px;
                                                                                color: var(--red-devino);
                                                                            }
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    
                                    .about__product__old_sec {
                                        & .container {
                                            display: flex;
                                        }
                                        & .text__content {
                                            display: flex;
                                            flex-direction: column;
                                            width: 100%;
                                            max-width: 630px;
                                            @media (max-width: 789px) {
                                                max-width: 100%;
                                                width: 47.8%;
                                            }
                                            & h2 {
                                                margin-bottom: 30px !important;
                                            }
                                            p {
                                                font-size: var(--h5-s);
                                                font-weight: var(--h5-w);
                                                line-height: var(--h5-l);
                                                color: var(--brown-devino);
                                                &:not(:last-of-type) {
                                                    margin-bottom: 20px;
                                                }
                                            }
                                        }
                                        & .about__old__list {
                                            display: flex;
                                            max-width: 630px;
                                            width: 100%;
                                            align-items: center;
                                            @media (max-width: 789px) {
                                                max-width: 100%;
                                                width: 47.8%;
                                            }
                                            & .img__content {
                                                width: fit-content;
                                                display: flex;
                                                z-index: 1;
                                                & img {
                                                    @media (max-width: 789px) {
                                                        width: 77px;
                                                    }
                                                }
                                            }
                                            & ul {
                                                list-style: none;
                                                display: flex;
                                                flex-direction: column;
                                                max-width: 450px;
                                                width: 100%;
                                                border-radius: 20px;
                                                padding: 40px;
                                                border: 1px solid var(--red-devino);
                                                margin-left: -70px;
                                                position: relative;
                                                @media (max-width: 789px) {
                                                    margin-left: -50px;
                                                }
                                                & li {
                                                    list-style: none;
                                                    position: relative;
                                                    display: flex;
                                                    padding-left: 32px;
                                                    font-size: var(--h5-s);
                                                    font-weight: var(--h5-w);
                                                    line-height: var(--h5-l);
                                                    color: var(--black2-devino);
                                                    &:not(:last-of-type) {
                                                        margin-bottom: 16px;
                                                    }
                                                    &::before {
                                                        position: absolute;
                                                        content: '';
                                                        border-radius: 50%;
                                                        width: 12px;
                                                        height: 12px;
                                                        display: flex;
                                                        background-color: var(--red-devino);
                                                        left: 0;
                                                        top: 6px;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    
                                    .pricing_sec {
                                        @media (max-width: 430px) {
                                            padding-top: 35px;
                                            padding-bottom: 35px;
                                        }
                                        & .container {
                                            display: flex;
                                            flex-direction: column;
                                            justify-content: center;
                                            align-items: center;
                                            & h2 {
                                                text-align: center;
                                                @media (max-width: 789px) {
                                                    margin-bottom: 45px;
                                                }
                                                @media (max-width: 430px) {
                                                    margin-bottom: 35px;
                                                }
                                            }
                                            & .pricing__list {
                                                display: flex;
                                                flex-wrap: wrap;
                                                width: 100%;
                                                list-style: none;
                                                
                                                justify-content: center;
                                                gap: 30px;
                                                @media (max-width: 789px) {
                                                    row-gap: 28px;
                                                    gap: 30px;
                                                }
                                                @media (max-width: 430px) {
                                                    flex-direction: column;
                                                    gap: 24px;
                                                }
                                                & li {
                                                    display: flex;
                                                    flex-direction: column;
                                                    align-items: center;
                                                    list-style: none;
                                                    border-radius: 20px;
                                                    background-color: white;
                                                    padding: 30px 20px;
                                                    
                                                    max-width: 410px;
                                                    width: 100%;
                                                    box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                                                    @media (max-width: 789px) {
                                                        max-width: 330px;
                                                        
                                                    }
                                                    @media (max-width: 430px) {
                                                      
                                                        max-width: 100%;
                                                    }
                                                    & img {
                                                        height: 80px;
                                                        margin-bottom: 20px;
                                                    }
                                                    & p {
                                                        text-align: center;
                                                        color: var(--black2-devino);
                                                        font-size: var(--h5-s);
                                                        font-weight: var(--h5-w);
                                                        line-height: var(--h5-l);
                                                    }
                                                    & h4 {
                                                        text-align: center;
                                                        color: var(--black2-devino);
                                                        font-size: var(--h4-s);
                                                        font-weight: var(--h4-w);
                                                        line-height: var(--h4-l);
                                                    }
                                                }
                                            }
                                            & .btn {
                                                margin-top: 30px;
                                                @media (max-width: 430px) {
                                                    min-width: 100%;
                                                }
                                            }
                                        }
                                    }
                                    
                                    .advantages_sec {
                                        @media (max-width: 430px) {
                                            padding-top: 35px;
                                            padding-bottom: 35px;
                                        }
                                        & .container {
                                            display: flex;
                                            flex-direction: column;
                                            align-items: center;
                                            justify-content: center;
                                            & h2 {
                                                text-align: center;
                                                @media (max-width: 430px) {
                                                    margin-bottom: 35px;
                                                }
                                            }
                                            & .main__content {
                                                width: 100%;
                                                display: flex;
                                                justify-content: space-between;
                                                @media (max-width: 430px) {
                                                    flex-direction: column;
                                                    justify-content: center;
                                                    align-items: center;
                                                }
                                            }
                                            & .img__content {
                                                display: flex;
                                                max-width: 770px;
                                                width: 100%;
                                                @media (max-width: 789px) {
                                                    max-width: 60%;
                                                    /* width: 50%; */
                                                }
                                                @media (max-width: 430px) {
                                                    min-width: 100%;
                                                    /* width: 50%; */
                                                }
                                            }
                                            & .text__content {
                                                display: flex;
                                                flex-direction: column;
                                                justify-content: center;
                                                max-width: 430px;
                                                
                                                @media (max-width: 789px) {
                                                    
                                                }
                                                @media (max-width: 430px) {
                                                    width: 100%;
                                                }
                                                & ul {
                                                    list-style: none;
                                                    display: flex;
                                                    flex-direction: column;
                                                    margin-bottom: 80px;
                                                    @media (max-width: 789px) {
                                                        margin-bottom: 60px;
                                                    }
                                                    @media (max-width: 430px) {
                                                        margin-bottom: 45px;
                                                    }
                                                    & li {
                                                        display: flex;
                                                        flex-direction: column;
                                                        list-style: none;
                                                        @media (max-width: 430px) {
                                                            text-align: center;
                                                        }
                                                        & h3 {
                                                            font-size: var(--h1-s);
                                                            font-weight: var(--h1-w);
                                                            line-height: var(--h1-l);
                                                            color: var(--red-devino);
                                                            margin-bottom: 20px;
                                                        }
                                                        & p {
                                                            font-size: var(--h5-s);
                                                            font-weight: var(--h5-w);
                                                            line-height: var(--h5-l);
                                                            color: var(--black2-devino);
                                                        }
                                                        &:not(:last-of-type) {
                                                            margin-bottom: 30px;
                                                        }
                                                    }
                                                }
                                                & .btn {
                                                    @media (max-width: 430px) {
                                                        min-width: 100%;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    /* / MAIN */
                                    /* FOOTER */
                                    
                                    footer {
                                        display: flex;
                                        justify-content: center;
                                        width: 100%;
                                        padding-top: 100px;
                                        height: 701px;
                                        padding-left: 39px;
                                        padding-right: 39px;
                                        padding-bottom: 120px;
                                        @media (max-width: 789px) {
                                            height: 855px;
                                            padding-bottom: 65px;
                                        }
                                        @media (max-width: 430px) {
                                            height: 100%;
                                            padding-top: 0;
                                            padding-bottom: 60px;
                                        }
                                        & .container {
                                            display: flex;
                                            position: relative;
                                            gap: 60px;
                                            @media (max-width: 789px) {
                                                /* padding-bottom: 600px; */
                                            }
                                            @media (max-width: 430px) {
                                                gap: 0;
                                                flex-direction: column;
                                            }
                                        }
                                        & .logo__footer {
                                            width: 200px;
                                            height: 32px;
                                            /* margin-right: 60px; */
                                            @media (max-width: 789px) {
                                                /* margin-bottom: 35px; */
                                                width: 150px;
                                                height: 24px;
                                            }
                                            @media (max-width: 430px) {
                                                margin-bottom: 35px;
                                                width: 150px;
                                                height: 24px;
                                            }
                                        }
                                        & .footer__navigation {
                                            display: flex;
                                            flex-wrap: wrap;
                                            width: 100%;
                                            /* gap: 14px; */
                                            @media (max-width: 789px) {
                                                row-gap: 45px;
                                                align-content: flex-start;
                                            }
                                            @media (max-width: 430px) {
                                                row-gap: 24px;
                                            }
                                            & .navigation__block {
                                                display: flex;
                                                flex-direction: column;
                                                max-width: 213px;
                                                min-width: 190px;
                                                @media (max-width: 789px) {
                                                    /* margin-bottom: 45px; */
                                                    max-width: 165px;
                                                    min-width: 150px;
                                                    height: fit-content;
                                                }
                                                @media (max-width: 430px) {
                                                    max-width: 100%;
                                                    width: 100%;
                                                }
                                                &.hide__desc {
                                                    display: none;
                                                    @media (max-width: 789px) {
                                                        display: flex;
                                                        & p {
                                                            color: transparent;
                                                            padding-right: 0px;
                                                            width: 100% !important;
                                                        }
                                                    }
                                                }
                                                & .head__text {
                                                    /* padding-right: 137px; */
                                                    padding-bottom: 14px;
                                                    border-bottom: 1px solid var(--red-devino);
                                                    font-size: var(--h4-s);
                                                    font-weight: var(--h4-w);
                                                    line-height: var(--h4-l);
                                                    margin-bottom: 20px;
                                                    color: var(--brown-devino);
                                                    /* width: 150px; */
                                                    @media (max-width: 789px) {
                                                        /* padding-right: 0px;
                                                        width: 100%; */
                                                    }
                                                    @media (max-width: 430px) {
                                                        max-width: 200px;
                                                    }
                                                }
                                                & ul {
                                                    max-width: 213px;
                                                    min-width: 190px;
                                                    list-style: none;
                                                    display: flex;
                                                    flex-direction: column;
                                                    gap: 14px;
                                                    padding-right: 14px;
                                                    @media (max-width: 789px) {
                                                        max-width: 165px;
                                                        min-width: 150px;
                                                        padding-right: 15px;
                                                    }
                                                    @media (max-width: 430px) {
                                                        max-width: 100%;
                                                        width: 100%;
                                                        padding: 0;
                                                        margin-bottom: 24px;
                                                    }
                                                    &:last-child {
                                                        @media (max-width: 430px) {
                                                            margin: 0;
                                                        }
                                                    }
                                                    & a {
                                                        color: var(--brown-devino);
                                                        width: fit-content;
                                                        font-size: var(--h7-s);
                                                        font-weight: var(--h7-w);
                                                        line-height: var(--h7-l);
                                                        transition: 0.4s;
                                                        width: 100%;
                                                        height: 100%;
                                                        display: flex;
                                                        @media (max-width: 789px) {
                                                            font-size: var(--h5-s);
                                                            font-weight: var(--h5-w);
                                                            line-height: var(--h5-l);
                                                            height: 100%;
                                                            display: flex;
                                                        }
                                                        @media (max-width: 430px) {
                                                            width: 100%;
                                                        }
                                                        &:hover {
                                                            color: var(--red-devino);
                                                        }
                                                    }
                                                    & li {
                                                        /* height: 20px; */
                                                        max-height: 48px;
                                                        @media (max-width: 789px) {
                                                            width: 100%;
                                                        }
                                                        @media (max-width: 430px) {
                                                            width: 100%;
                                                        }
                                                    }
                                                }
                                                &:nth-child(3) {
                                                    /* width: 100%; */
                                                    & .head__text {
                                                        @media (max-width: 789px) {
                                                            width: 190px;
                                                        }
                                                        @media (max-width: 430px) {
                                                            width: 100%;
                                                        }
                                                    }
                                                }
                                                &:nth-child(5) {
                                                    & .head__text {
                                                        @media (max-width: 789px) {
                                                            width: 338px;
                                                        }
                                                        @media (max-width: 430px) {
                                                            width: 100%;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                        & .privacy_footer {
                                            position: absolute;
                                            display: flex;
                                            height: 139px;
                                            width: 272px;
                                            bottom: 0;
                                            flex-direction: column;
                                            align-items: flex-start;
                                            right: 47px;
                                            justify-content: space-between;
                                            @media (max-width: 789px) {
                                                width: 367px;
                                                height: 127px;
                                                /*gap: 17px;*/
                                                right: 0;
                                                /*left: 0;*/
                                                bottom: 0;
                                            }
                                            @media (max-width: 430px) {
                                                height: 100%;
                                                position: relative;
                                                width: 100%;
                                                bottom: 0;
                                                margin-top: 45px;
                                            }
                                            & .privacy__copy {
                                                /* position: absolute;
                                                bottom: 68px;
                                                right: 0px; */
                                                color: var(--brown-devino);
                                                font-size: var(--h7-s);
                                                font-weight: var(--h7-w);
                                                line-height: var(--h7-l);
                                                @media (max-width: 789px) {
                                                    font-size: var(--h5-s);
                                                    font-weight: var(--h5-w);
                                                    line-height: var(--h5-l);
                                                    /* position: absolute; */
                                                    left: 70px;
                                                    bottom: 0;
                                                    /* height: 100%; */
                                                    /* position: relative; */
                                                }
                                                @media (max-width: 430px)  {
                                                    position: relative;
                                                    width: 100%;
                                                    display: flex;
                                                    flex-direction: column;
                                                    left: 0;
                                                }
                                                & a {
                                                    text-decoration: none;
                                                    color: var(--brown-devino);
                                                    font-size: var(--h7-s);
                                                    font-weight: var(--h7-w);
                                                    line-height: var(--h7-l);
                                                    margin-bottom: 14px;
                                                    @media (max-width: 789px) {
                                                        display: flex;
                                                        font-size: var(--h5-s);
                                                        font-weight: var(--h5-w);
                                                        line-height: var(--h5-l);
                                                        text-decoration: none;
                                                        margin-bottom: 10px;
                                                    }
                                                    @media (max-width: 420px) {
                                                        margin-bottom: 12px;
                                                    }
                                                }
                                            }
                                            & .social {
                                                /* position: absolute;
                                                bottom: 62px;
                                                right: 305px; */
                                                display: flex;
                                                gap: 30px;
                                                color: var(--brown-devino);
                                                font-size: var(--h7-s);
                                                font-weight: var(--h7-w);
                                                line-height: var(--h7-l);
                                                @media (max-width: 789px) {
                                                    /* width: 50px;
                                                    height: 50px; */
                                                    gap:20px
                                                }
                                                @media (max-width: 430px) {
                                                    gap:20px;
                                                }
                                            }
                                        }
                                        /* /FOOTER */
                                        .popup {
                                            width: 100%;
                                            height: 100%;
                                            position: fixed;
                                            display: none;
                                            z-index: 10;
                                            padding: 0;
                                            margin: 0;
                                            opacity: 0;
                                            transition: 0.4s;
                                            left: 0;
                                            top: 0;
                                            -webkit-width: 100%;
                                            -webkit-height: 100%;
                                            -webkit-position: fixed;
                                            -webkit-display: none;
                                            -webkit-z-index: 10;
                                            -webkit-padding: 0;
                                            -webkit-margin: 0;
                                            -webkit-opacity: 0;
                                            -webkit-transition: 0.4s;
                                            -webkit-left: 0;
                                            -webkit-top: 0;
                                        }
                                        .popup__casa {
                                            width: 100%;
                                            height: 100%;
                                            position: fixed;
                                            display: none;
                                            z-index: 10;
                                            padding: 0;
                                            margin: 0;
                                            opacity: 0;
                                            transition: 0.4s;
                                            left: 0;
                                            top: 0;
                                            -webkit-width: 100%;
                                            -webkit-height: 100%;
                                            -webkit-position: fixed;
                                            -webkit-display: none;
                                            -webkit-z-index: 10;
                                            -webkit-padding: 0;
                                            -webkit-margin: 0;
                                            -webkit-opacity: 0;
                                            -webkit-transition: 0.4s;
                                            -webkit-left: 0;
                                            -webkit-top: 0;
                                        }
                                        .over-block {
                                            width: 100%;
                                            height: 100vh;
                                            position: absolute;
                                            background-color: #272525;
                                            opacity: 0.7;
                                            z-index: 8;
                                            cursor: pointer;
                                            -webkit-width: 100%;
                                            -webkit-height: 100vh;
                                            -webkit-position: absolute;
                                            -webkit-background-color: #272525;
                                            -webkit-opacity: 0.7;
                                            -webkit-z-index: 8;
                                            -webkit-cursor: pointer;
                                        }
                                        .popup-block {
                                            position: relative;
                                            z-index: 9;
                                            background-color: var(--back-main);
                                            border-radius: 12px;
                                            top: 50%;
                                            left: 50%;
                                            margin-right: -50%;
                                            transform: translate(-50%, -50%);
                                            max-width: 892px;
                                            width: 100%;
                                            padding: 40px 48px;
                                            display: flex;
                                            flex-direction: column;
                                            align-items: start;
                                            overflow-y: scroll;
                                            max-height: 95vh;
                                            -webkit-position: relative;
                                            -webkit-z-index: 9;
                                            -webkit-background-color: var(--back-main);
                                            -webkit-border-radius: 12px;
                                            -webkit-top: 50%;
                                            -webkit-left: 50%;
                                            -webkit-margin-right: -50%;
                                            -webkit-transform: translate(-50%, -50%);
                                            -webkit-max-width: 892px;
                                            -webkit-width: 100%;
                                            -webkit-padding: 40px 48px;
                                            -webkit-display: flex;
                                            -webkit-flex-direction: column;
                                            -webkit-align-items: start;
                                            -webkit-overflow-y: scroll;
                                            -webkit-max-height: 95vh;
                                        }
                                        .popup-block::-webkit-scrollbar {
                                            width: 24px;
                                            margin-right: 8px;
                                            -webkit-width: 24px;
                                            -webkit-margin-right: 8px;
                                        }
                                        .popup-block::-webkit-scrollbar-thumb {
                                            width: 8px;
                                            background-color: #D3CFCD;
                                            border-radius: 20px;
                                            border: 8px solid var(--back-main);
                                            height: 32px;
                                            -webkit-width: 8px;
                                            -webkit-background-color: #D3CFCD;
                                            -webkit-border-radius: 20px;
                                            -webkit-border: 8px solid var(--back-main);
                                            -webkit-height: 32px;
                                        }
                                        .close-btn-popup {
                                            display: flex;
                                            position: absolute;
                                            justify-content: center;
                                            align-items: center;
                                            top: 40px;
                                            right: 48px;
                                            width: 20px;
                                            height: 20px;
                                            cursor: pointer;
                                            -webkit-display: flex;
                                            -webkit-position: absolute;
                                            -webkit-justify-content: center;
                                            -webkit-align-items: center;
                                            -webkit-top: 40px;
                                            -webkit-right: 48px;
                                            -webkit-width: 20px;
                                            -webkit-height: 20px;
                                            -webkit-cursor: pointer;
                                        }
                                        .close-btn-popup:hover:after {
                                            opacity: 0.7;
                                            -webkit-opacity: 0.7;
                                        }
                                        .close-btn-popup:hover:before {
                                            opacity: 0.7;
                                            -webkit-opacity: 0.7;
                                        }
                                        .close-btn-popup::before,
                                        .close-btn-popup::after {
                                            content: "";
                                            display: block;
                                            position: absolute;
                                            background-color: var(--green-color);
                                            width: 25px;
                                            height: 2.5px;
                                            transition: 0.2s;
                                            -webkit-content: "";
                                            -webkit-display: block;
                                            -webkit-position: absolute;
                                            -webkit-background-color: var(--green-color);
                                            -webkit-width: 25px;
                                            -webkit-height: 2.5px;
                                            -webkit-transition: 0.2s;
                                        }
                                        .close-btn-popup::before {
                                            transform: rotate(45deg);
                                            -webkit-transform: rotate(45deg);
                                        }
                                        .close-btn-popup::after {
                                            transform: rotate(-45deg);
                                            -webkit-transform: rotate(-45deg);
                                        }
                                        .popup-block h2 {
                                            font-family: Montserrat;
                                            font-size: 48px;
                                            font-style: normal;
                                            font-weight: 500;
                                            line-height: 60px;
                                            text-align: left;
                                            margin-bottom: 16px;
                                            color: var(--text-headers);
                                            -webkit-font-family: Montserrat;
                                            -webkit-font-size: 56px;
                                            -webkit-font-style: normal;
                                            -webkit-font-weight: 500;
                                            -webkit-line-height: 68px;
                                            -webkit-text-align: left;
                                            -webkit-margin-bottom: 16px;
                                            -webkit-color: var(--text-headers);
                                        }
                                        .sign_up form .form_item .select {
                                            height: 46px;
                                        }
                                        .popup-block p {
                                            font-family: Montserrat;
                                            font-size: var(--h7-s);
                                            font-style: normal;
                                            font-weight: var(--h7-w);
                                            line-height: var(--h7-l);
                                            margin-bottom: 52px;
                                            color: var(--brown-devino);
                                            max-width: 600px;
                                            -webkit-font-family: Montserrat;
                                            -webkit-font-size: 28px;
                                            -webkit-font-style: normal;
                                            -webkit-font-weight: 400;
                                            -webkit-line-height: 28px;
                                            -webkit-margin-bottom: 52px;
                                            -webkit-color: var(--text);
                                            -webkit-max-width: 600px;
                                        }
                                        .popup-block form .block {
                                            display: flex;
                                            flex-wrap: wrap;
                                            margin-bottom: 40px;
                                            width: 100%;
                                            justify-content: space-between;
                                            -webkit-display: flex;
                                            -webkit-flex-wrap: wrap;
                                            -webkit-margin-bottom: 40px;
                                            -webkit-width: 100%;
                                            -webkit-justify-content: space-between;
                                        }
                                        .popup-block form .block h3 {
                                            width: 100%;
                                            text-align: left;
                                            margin-bottom: 20px;
                                            font-family: Montserrat;
                                            font-size: 20px;
                                            font-style: normal;
                                            font-weight: 600;
                                            line-height: 28px;
                                            color: var(--text-headers);
                                            width: 100%;
                                            -webkit-width: 100%;
                                            -webkit-text-align: left;
                                            -webkit-margin-bottom: 20px;
                                            -webkit-font-family: Montserrat;
                                            -webkit-font-size: 20px;
                                            -webkit-font-style: normal;
                                            -webkit-font-weight: 600;
                                            -webkit-line-height: 28px;
                                            -webkit-color: var(--text-headers);
                                            -webkit-width: 100%;
                                        }
                                        .popup-block form .block .item {
                                            display: flex;
                                            flex-direction: column;
                                            max-width: 380px;
                                            width: 100%;
                                            -webkit-display: flex;
                                            -webkit-flex-direction: column;
                                            -webkit-max-width: 380px;
                                            -webkit-width: 100%;
                                        }
                                        .popup-block form .block label {
                                            font-family: Montserrat;
                                            font-size: 16px;
                                            font-style: normal;
                                            font-weight: 400;
                                            line-height: 24px;
                                            margin-bottom: 8px;
                                            color: var(--text);
                                            -webkit-font-family: Montserrat;
                                            -webkit-font-size: 16px;
                                            -webkit-font-style: normal;
                                            -webkit-font-weight: 400;
                                            -webkit-line-height: 24px;
                                            -webkit-margin-bottom: 8px;
                                            -webkit-color: var(--text);
                                        }
                                        .popup-block form .block input {
                                            max-width: 386px;
                                            display: block;
                                            width: 100%;
                                            border-radius: 8px;
                                            background-color: #FFF;
                                            padding: 9px 16px;
                                            font-family: Montserrat;
                                            font-size: 16px;
                                            font-style: normal;
                                            font-weight: 400;
                                            line-height: 20px;
                                            color: var(--text);
                                            border: none;
                                            outline: none;
                                            max-height: 38px;
                                            -webkit-max-width: 386px;
                                            -webkit-display: block;
                                            -webkit-width: 100%;
                                            -webkit-border-radius: 8px;
                                            -webkit-background-color: #FFF;
                                            -webkit-padding: 9px 16px;
                                            -webkit-font-family: Montserrat;
                                            -webkit-font-size: 16px;
                                            -webkit-font-style: normal;
                                            -webkit-font-weight: 400;
                                            -webkit-line-height: 20px;
                                            -webkit-color: var(--text);
                                            -webkit-border: none;
                                            -webkit-outline: none;
                                            -webkit-max-height: 38px;
                                        }
                                        .popup-block form .block select {
                                            max-width: 386px;
                                            display: block;
                                            min-width: 245px;
                                            width: 100%;
                                            border-radius: 8px;
                                            background-color: #FFF;
                                            padding: 9px 16px;
                                            font-family: Montserrat;
                                            font-size: 16px;
                                            font-style: normal;
                                            font-weight: 400;
                                            line-height: 20px;
                                            color: var(--text);
                                            border: none;
                                            outline: none;
                                            -webkit-max-width: 386px;
                                            -webkit-display: block;
                                            -webkit-min-width: 245px;
                                            -webkit-width: 100%;
                                            -webkit-border-radius: 8px;
                                            -webkit-background-color: #FFF;
                                            -webkit-padding: 9px 16px;
                                            -webkit-font-family: Montserrat;
                                            -webkit-font-size: 16px;
                                            -webkit-font-style: normal;
                                            -webkit-font-weight: 400;
                                            -webkit-line-height: 20px;
                                            -webkit-color: var(--text);
                                            -webkit-border: none;
                                            -webkit-outline: none;
                                        }
                                        .popup-block form .block.info .item {
                                            max-width: 245px !important;
                                            -webkit-max-width: 245px !important;
                                        }
                                        .popup-block form .block .item .d-flex {
                                            height: 38px;
                                            -webkit-height: 38px;
                                        }
                                        .popup-block form .block input[type="tel"] {
                                            /* border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0; */
                                        }
                                        .popup-block form .block .item .phone-mask {
                                            display: flex;
                                            align-items: center;
                                            height: 37px;
                                            width: 47px;
                                            font-family: Montserrat;
                                            font-size: 16px;
                                            font-style: normal;
                                            font-weight: 400;
                                            line-height: 20px;
                                            padding-left: 15px;
                                            padding-right: 2px;
                                            cursor: pointer;
                                            position: relative;
                                            color: var(--black-color);
                                            opacity: 0.56;
                                            margin: 0;
                                            border-radius: 8px 0 0 8px;
                                            background-color: var(--grey-color);
                                            -webkit-display: flex;
                                            -webkit-align-items: center;
                                            -webkit-height: 37px;
                                            -webkit-width: 47px;
                                            -webkit-font-family: Montserrat;
                                            -webkit-font-size: 16px;
                                            -webkit-font-style: normal;
                                            -webkit-font-weight: 400;
                                            -webkit-line-height: 20px;
                                            -webkit-padding-left: 15px;
                                            -webkit-padding-right: 2px;
                                            -webkit-cursor: pointer;
                                            -webkit-position: relative;
                                            -webkit-color: var(--black-color);
                                            -webkit-opacity: 0.56;
                                            -webkit-margin: 0;
                                            -webkit-border-radius: 8px 0 0 8px;
                                            -webkit-background-color: var(--grey-color);
                                        }
                                        .list__code-country {
                                            position: absolute;
                                            margin-top: 40px;
                                            list-style: none;
                                            padding: 0;
                                            background-color: var(--grey-color);
                                            padding: 4px 4px;
                                            text-align: right;
                                            width: 44px;
                                            max-width: 44px;
                                            max-height: 0px;
                                            overflow-y: scroll;
                                            border-radius: 4px;
                                            transition: 0.4s;
                                            display: none;
                                            -webkit-position: absolute;
                                            -webkit-margin-top: 40px;
                                            -webkit-list-style: none;
                                            -webkit-padding: 0;
                                            -webkit-background-color: var(--grey-color);
                                            -webkit-padding: 4px 4px;
                                            -webkit-text-align: right;
                                            -webkit-width: 44px;
                                            -webkit-max-width: 44px;
                                            -webkit-max-height: 0px;
                                            -webkit-overflow-y: scroll;
                                            -webkit-border-radius: 4px;
                                            -webkit-transition: 0.4s;
                                            -webkit-display: none;
                                        }
                                        .list__code-country::-webkit-scrollbar {
                                            width: 2px;
                                            -webkit-width: 2px;
                                        }
                                        .list__code-country li {
                                            margin: 2px 0;
                                            cursor: pointer;
                                            border-radius: 4px;
                                            padding: 2px;
                                            -webkit-margin: 2px 0;
                                            -webkit-cursor: pointer;
                                            -webkit-border-radius: 4px;
                                            -webkit-padding: 2px;
                                        }
                                        .list__code-country li:hover {
                                            background-color: #ffffff;
                                            -webkit-background-color: #ffffff;
                                        }
                                        .popup-block form .block textarea {
                                            font-size: 16px;
                                            border-radius: 8px;
                                            width: 796px;
                                            padding: 9px 5px;
                                            border: none;
                                            outline: none;
                                            resize: none;
                                            -webkit-border-radius: 8px;
                                            -webkit-width: 796px;
                                            -webkit-padding: 9px 5px;
                                            -webkit-border: none;
                                            -webkit-outline: none;
                                            -webkit-resize: none;
                                        }
                                        .popup-block form .block .item.check {
                                            display: flex;
                                            flex-wrap: nowrap;
                                            flex-direction: row;
                                            max-width: 100%;
                                            align-items: center;
                                            -webkit-display: flex;
                                            -webkit-flex-wrap: nowrap;
                                            -webkit-flex-direction: row;
                                            -webkit-max-width: 100%;
                                            -webkit-align-items: center;
                                        }
                                        .popup-block form .block .item.check input {
                                            width: 16px;
                                            height: 16px;
                                            border-radius: 2px;
                                            margin-right: 8px;
                                            -webkit-width: 16px;
                                            -webkit-height: 16px;
                                            -webkit-border-radius: 2px;
                                            -webkit-margin-right: 8px;
                                        }
                                        .popup-block form .block .item.check label {
                                            max-width: 100%;
                                            margin: 0;
                                            -webkit-max-width: 100%;
                                            -webkit-margin: 0;
                                        }
                                        .popup-block form .red-button {
                                            padding: 16px 30px;
                                            -webkit-padding: 16px 30px;
                                        }
                                        /* =========SELECT============== */
                                        .select {
                                            height: 46px;
                                            max-width: 386px;
                                            min-width: 200px;
                                            width: 100%;
                                            margin: 0 auto;
                                            position: relative;
                                            user-select: none;
                                            -webkit-max-width: 386px;
                                            -webkit-min-width: 200px;
                                            -webkit-width: 100%;
                                            -webkit-margin: 0 auto;
                                            -webkit-position: relative;
                                            -webkit-user-select: none;
                                        }
                                        .popup-block form .block .item {
                                            /* margin-bottom: 15px; */
                                        }
                                        .select__header {
                                            height: 100%;
                                            overflow: hidden;
                                            display: flex;
                                            padding: 8px 16px;
                                            border-radius: 8px;
                                            background-color: #fff;
                                            cursor: pointer;
                                            justify-content: space-between;
                                            -webkit-display: flex;
                                            -webkit-padding: 8px 16px;
                                            -webkit-border-radius: 8px;
                                            -webkit-background-color: #fff;
                                            -webkit-cursor: pointer;
                                            -webkit-justify-content: space-between;
                                        }
                                        .popup .select__current {
                                            font-size: 16px;
                                        }
                                        .select__current {
                                            font-size: 20px;
                                            font-style: normal;
                                            font-weight: 400;
                                            line-height: 28px;
                                            color: rgba(57, 50, 0, 0.56);
                                            -webkit-font-size: 20px;
                                            -webkit-font-style: normal;
                                            -webkit-font-weight: 400;
                                            -webkit-line-height: 28px;
                                            -webkit-color: rgba(57, 50, 0, 0.56);
                                        }
                                        .select__icon {
                                            display: flex;
                                            align-items: center;
                                            -webkit-display: flex;
                                            -webkit-align-items: center;
                                        }
                                        .select__icon svg {
                                            transition: 0.4s;
                                            -webkit-transition: 0.4s;
                                        }
                                        .select__icon svg path {
                                            stroke: var(--default-btn);
                                            -webkit-stroke: var(--default-btn);
                                        }
                                        .select__body_high {
                                            overflow: hidden;
                                            position: absolute;
                                            padding: 2px;
                                            background-color: #fff;
                                            border: 1px solid #D3CFCD;
                                            border-radius: 8px;
                                            width: 100%;
                                            margin-top: 4px;
                                            display: none;
                                            z-index: 20;
                                            max-height: 0px;
                                            padding-bottom: 10px;
                                            -webkit-position: absolute;
                                            -webkit-padding: 2px;
                                            -webkit-background-color: #fff;
                                            -webkit-border: 1px solid #D3CFCD;
                                            -webkit-border-radius: 8px;
                                            -webkit-width: 100%;
                                            -webkit-margin-top: 4px;
                                            -webkit-display: none;
                                            -webkit-z-index: 20;
                                            -webkit-max-height: 0px;
                                            -webkit-padding-bottom: 10px;
                                        }
                                        .select__body {
                                            background-color: #fff;
                                            padding: 4px 0 4px 8px;
                                            max-height: 0px;
                                            overflow-y: scroll;
                                            width: 100%;
                                            display: none;
                                            transition: 0.4s;
                                            z-index: 25;
                                            -webkit-background-color: #fff;
                                            -webkit-padding: 4px 0 4px 8px;
                                            -webkit-max-height: 0px;
                                            -webkit-overflow-y: scroll;
                                            -webkit-width: 100%;
                                            -webkit-display: none;
                                            -webkit-transition: 0.4s;
                                            -webkit-z-index: 25;
                                        }
                                        .select__body::-webkit-scrollbar {
                                            width: 24px;
                                            margin-right: 8px;
                                            -webkit-width: 24px;
                                            -webkit-margin-right: 8px;
                                        }
                                        .select__body::-webkit-scrollbar-thumb {
                                            width: 8px;
                                            background-color: #D3CFCD;
                                            border-radius: 20px;
                                            border: 8px solid #fff;
                                            height: 32px;
                                            -webkit-width: 8px;
                                            -webkit-background-color: #D3CFCD;
                                            -webkit-border-radius: 20px;
                                            -webkit-border: 8px solid #fff;
                                            -webkit-height: 32px;
                                        }
                                        .popup .select__item {
                                            font-size: 16px;
                                            line-height: 24px !important;
                                        }
                                        .select__item {
                                            margin: 4px 0;
                                            display: flex;
                                            padding: 8px;
                                            color: rgba(57, 50, 0, 0.56);
                                            font-size: 20px;
                                            font-style: normal;
                                            font-weight: 400;
                                            line-height: 28px;
                                            border-radius: 8px;
                                            transition: 0.4s;
                                            cursor: pointer;
                                            -webkit-margin: 4px 0;
                                            -webkit-display: flex;
                                            -webkit-padding: 8px;
                                            -webkit-color: rgba(57, 50, 0, 0.56);
                                            -webkit-font-size: 20px;
                                            -webkit-font-style: normal;
                                            -webkit-font-weight: 400;
                                            -webkit-line-height: 28px;
                                            -webkit-border-radius: 8px;
                                            -webkit-transition: 0.4s;
                                            -webkit-cursor: pointer;
                                        }
                                        .select__item:hover {
                                            background-color: #F8F6F5;
                                            -webkit-background-color: #F8F6F5;
                                        }
                                        /* ================================================ */
                                        .res-item {
                                            display: flex;
                                            align-items: center;
                                            margin-bottom: 12px;
                                            justify-content: center;
                                            -webkit-display: flex;
                                            -webkit-align-items: center;
                                            -webkit-margin-bottom: 12px;
                                            -webkit-justify-content: center;
                                        }
                                        .res-item:nth-child(3) {
                                            justify-content: end;
                                            -webkit-justify-content: end;
                                        }
                                        .res-item:nth-child(3) .img {
                                            margin-right: 0;
                                            margin-left: 100px;
                                            -webkit-margin-right: 0;
                                            -webkit-margin-left: 100px;
                                        }
                                        .res-item .img {
                                            margin-right: 100px;
                                            -webkit-margin-right: 100px;
                                        }
                                        .res-item .img img {
                                            max-width: 700px;
                                            -webkit-max-width: 700px;
                                        }
                                        .res-item .text {
                                            max-width: 704px;
                                            -webkit-max-width: 704px;
                                        }
                                        .res-item .text h3 {
                                            font-size: 30px;
                                            font-weight: 500;
                                            line-height: 37px;
                                            margin-bottom: 24px;
                                            color: var(--green-color);
                                            -webkit-font-size: 30px;
                                            -webkit-font-weight: 500;
                                            -webkit-line-height: 37px;
                                            -webkit-margin-bottom: 24px;
                                            -webkit-color: var(--green-color);
                                        }
                                        .res-item .text ul {
                                            padding: 0;
                                            -webkit-padding: 0;
                                        }
                                        .res-item .text ul li {
                                            padding-left: 32px;
                                            margin: 0;
                                            list-style: none;
                                            position: relative;
                                            font-size: 20px;
                                            line-height: 28px;
                                            font-weight: 400;
                                            color: var(--green-color);
                                            -webkit-padding-left: 32px;
                                            -webkit-margin: 0;
                                            -webkit-list-style: none;
                                            -webkit-position: relative;
                                            -webkit-font-size: 20px;
                                            -webkit-line-height: 28px;
                                            -webkit-color: var(--green-color);
                                        }
                                        .res-item .text ul li::before {
                                            position: absolute;
                                            content: "";
                                            display: flex;
                                            border-radius: 50%;
                                            width: 12px;
                                            height: 12px;
                                            background-color: var(--red-color);
                                            margin-top: 5px;
                                            left: 0;
                                            -webkit-position: absolute;
                                            -webkit-content: "";
                                            -webkit-display: flex;
                                            -webkit-border-radius: 50%;
                                            -webkit-width: 12px;
                                            -webkit-height: 12px;
                                            -webkit-background-color: var(--red-color);
                                            -webkit-margin-top: 5px;
                                            -webkit-left: 0;
                                        }
                                        /* ================================================ */
                                        .feedback__btn {
                                            display: flex;
                                            border: none;
                                            outline: none;
                                            background-color: var(--red-color);
                                            color: var(--white-color);
                                            font-size: 20px;
                                            line-height: 28px;
                                            padding: 16px 30px;
                                            border-radius: 8px;
                                            font-weight: 600;
                                            -webkit-display: flex;
                                            -webkit-border: none;
                                            -webkit-outline: none;
                                            -webkit-background-color: var(--red-color);
                                            -webkit-color: var(--white-color);
                                            -webkit-font-size: 16px;
                                            -webkit-padding: 16px 30px;
                                            -webkit-border-radius: 8px;
                                            -webkit-font-weight: 700;
                                        }
                                    }
                                    
                                    .blockContact {
                                        display: flex;
                                        width: 100%;
                                        /* justify-content: space-between; */
                                        /* flex-wrap: wrap; */
                                        gap: 30px;
                                        flex-direction: row;
                                        max-width: 1290px;
                                        @media (max-width: 430px) {
                                            flex-wrap: wrap;
                                        }
                                        & p {
                                            font-size: var(--h5-s);
                                            font-weight: var(--h5-w);
                                            line-height: var(--h5-l);
                                            color: var(--black-devino)
                                        }
                                    }
                                    
                                    .blockContact .one__block {
                                        display: flex;
                                        /* max-width: 49%; */
                                        padding: 50px;
                                        border-radius: 20px;
                                        width: 100%;
                                        /* max-width: 630px; */
                                        background: white;
                                        box-shadow: 0px 0px 10px rgb(113 127 255 / 10%);
                                        justify-content: center;
                                        @media (max-width: 789px) {
                                            padding: 40px 20px;
                                        }
                                    }
                                    
                                    .blockContact .two__block {
                                        display: flex;
                                        /* max-width: 49%; */
                                        padding: 50px;
                                        border-radius: 20px;
                                        /* max-width: 630px; */
                                        width: 100%;
                                        background: white;
                                        box-shadow: 0px 0px 10px rgb(113 127 255 / 10%);
                                        justify-content: center;
                                        @media (max-width: 789px) {
                                            padding: 40px 20px;
                                        }
                                    }
                                    
                                    .map {
                                        display: block;
                                        margin-top: 30px;
                                    }
                                    
                                    #map>ymaps {
                                        border-radius: 20px;
                                        overflow: hidden;
                                    }
                                    
                                    .cabinet_sec {
                                        & .container {
                                            & .pay_personal {
                                                display: flex;
                                                width: 100%;
                                                @media (max-width: 430px) {
                                                    flex-direction: column;
                                                }
                                                & .line {
                                                    display: flex;
                                                    width: 1px;
                                                    height: auto;
                                                    background: var(--red-devino);
                                                    @media (max-width: 430px) {
                                                        display: none;
                                                    }
                                                }
                                                & .tab {
                                                    @media (max-width: 430px) {
                                                        width: 100%;
                                                        margin-right: 0;
                                                    }
                                                    & .block {
                                                        & .item {
                                                            @media (max-width: 430px) {
                                                                max-width: 100%;
                                                            }
                                                        }
                                                    }
                                                }
                                                & .paySystem {
                                                    display: flex;
                                                    max-width: 49%;
                                                    padding: 50px;
                                                    border-radius: 20px;
                                                    width: 100%;
                                                    justify-content: center;
                                                    height: 100%;
                                                    @media (max-width: 430px) {
                                                        max-width: 100%;
                                                        padding: 0;
                                                        margin-top: 30px;
                                                    }
                                                    & form {
                                                        & .radio_block {
                                                            display: flex;
                                                            flex-direction: row;
                                                            align-items: center;
                                                            margin-bottom: 15px;
                                                            & input {
                                                                width: 13px;
                                                                margin-right: 15px;
                                                                margin-bottom: 0;
                                                                height: 100%;
                                                            }
                                                            & p {
                                                                font-size: var(--h5-s);
                                                                font-weight: var(--h5-w);
                                                                line-height: var(--h5-l);
                                                                color: var(--black-devino);
                                                                margin-bottom: 0;
                                                            }
                                                        }
                                                        & .jq-selectbox {
                                                            margin-bottom: 30px;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    
                                    .menuMobile {
                                        display: none;
                                    }
                                    
                                    @media (max-width: 430px) {
                                        .menuMobile {
                                            display: block;
                                            /* margin-top: 15px; */
                                        }
                                        .main__navigation {
                                            display: none !important;
                                        }
                                    }
                                    
                            
                                    .menu {
                                        display: block;
                                        position: absolute;
                                        top: 13px;
                                        right: 36px;
                                        /* background-color: var(--white-devino); */
                                        height: 24px;
                                        width: 24px;
                                        border-radius: 50%;
                                        z-index: 10;
                                        /* box-shadow: 0px 3px 8px #333; */
                                        cursor: pointer;
                                        & .menu__line{
                                            display: block;
                                            position: absolute;
                                            left: 50%;
                                            transform: translateX(-50%);
                                            width: 18px;
                                            height: 2px;
                                            background-color: var(--black-devino);
                                            border-radius: 13px;
                                            transition-duration: .4s;
                                            &:nth-child(1) {
                                                top: 5px;
                                            }
                                            &:nth-child(2) {
                                                top: 11px;
                                            }
                                            &:nth-child(3) {
                                                bottom: 5px;
                                            }
                                        }           
                                        &.active {
                                            background-color: rgba(0, 0, 0, 0);
                                            box-shadow: none;
                                        }
                                        &.active .menu__line:nth-child(1) {
                                            transform: translate(-8px, 6px) rotate(-45deg);
                                        }
                                        &.active .menu__line:nth-child(2) {
                                            transition-duration: 0s;
                                            opacity: 0;
                                        }
                                        &.active .menu__line:nth-child(3) {
                                            transform: translate(-8px, -6px) rotate(45deg);;
                                        }
                                    }

.nav {
        display: flex;
        position: absolute;
        top: 16px;
        right: 16px;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        z-index: 9;
        transition-duration: .3s; 
        &.open {
            background-color: var(--white-devino);
            width: 100%;
            height: 100%;
            position: absolute;
            right: 0px;
            top: 0px;
            border-radius: 0;
            display: flex;
            
            align-items: center;
            flex-direction:column;
        }
        & .nav__header{
            display:none;
            top:0;
            
            padding: 13px 39px;
            width: 100%;
            justify-content: space-between;
            align-items:center;
            &.show
            {
                display:flex;
            }
            & .search__menu_icon
            {
                margin-right:24px;
            }
        }   

        & .nav__list {
            display: none;
            &.show {
                display: flex;
                flex-direction: column;
                list-style: none;
                margin-top: 35px;
                justify-content: flex-start;
                width: 100%;
                padding: 0 28px;
                height: 90vh;
                overflow-y: scroll;
            }
            & .nav__item {
                display: flex;
                align-items: flex-start;
                justify-content: left;
                background-color: transparent;
                width: 100%;
                border-left: 1px solid var(--red-devino);
                list-style: none;
                flex-direction: column;
                & .nav__sub
                {
                    display:none;
                    &.open
                    {
                        display: flex;
                       
                        & .nav__list
                        {
                            display: flex;
                            flex-direction: column;
                            & .nav__item
                            {
                                &.selected
                                {
                                    
                                    & a
                                    {
                                        color: var(--red-devino);
                                    }
                                }
                                border:0;
                                & a
                                {
                                    line-height: var(--h5-l);
                                    font-size: var(--h5-s);
                                    font-weight: var(--h5-w);
                                    
                                }
                            }
                        }
                    }
                }
                & label
                {
                    display: block;
                    text-align: left;
                    padding: 15px 0 15px 15px;
                    line-height: var(--h4-l);
                    font-size: var(--h4-s);
                    font-weight: var(--h4-w);
                    color: var(--black-devino);
                    text-decoration: none;
                    cursor: pointer;
                    border-bottom: 0px solid #e8e8e8;
                    position: relative;
                    &.selected 
                    {
                        color: var(--red-devino);
                    }
                }
                & a
                {
                    display: block;
                    text-align: left;
                    padding: 15px 0 15px 15px;
                    line-height: var(--h4-l);
                    font-size: var(--h4-s);
                    font-weight: var(--h4-w);
                    color: var(--black-devino);
                    text-decoration: none;
                    cursor: pointer;
                    border-bottom: 0px solid #e8e8e8;
                    position: relative;
                    &.selected 
                    {
                        color: var(--red-devino);
                    }
                }
                
            }
        }
        & .search-page {
        
            display: none;
            margin-top: 35px;
            
            padding:0 28px;
            
            position: relative;
            justify-content:center;
            align-items:center;
            
            &>div
            {
                width:100%;
            }
            & .close__search__btn {
                cursor: pointer;
                position: absolute;
                visibility: hidden;
                display: none;
                right: 36px;
                bottom: 9px;
                width:24px;
                & svg rect {
                    transition: 0.4s;
                }
                &:hover svg rect {
                    fill: var(--red-devino);
                }
            }
            & .resultFormError
            {
                position: absolute;
                background: white;
                color: var(--red-devino);
                z-index: 5;
                margin-top: 10px;
                padding:30px;
                border-radius: 10px !important;
                width: calc(100% - 56px);
                max-width:calc(100% - 56px);
                height: 350px !important;
            }
            & .notetext
            {
                position: absolute;
                background: white;
                color: var(--red-devino);
                z-index: 5;
                margin-top: 10px;
                padding:30px;
                border-radius: 10px !important;
                width: calc(100% - 56px);
                max-width:calc(100% - 56px);
                height: 350px !important;
            }
            & .resultForm
            {
                position: absolute;
                background: white;
                color: var(--red-devino);
                z-index: 5;
                margin-top: 8px;
                padding:30px;
                border-radius: 10px !important;
                width: calc(100% - 56px);
                height: 350px !important;
                max-width:calc(100% - 56px);
                overflow-y: auto;
                overflow-x: hidden;
            }
            & .search__input {
                visibility: visible;
                display: block;
                border-radius: 10px;
                max-width: 872px;
                width: 100%;
                color: var(--brown-devino);
                font-size: var(--h5-s);
                font-weight: var(--h5-w);
                line-height: var(--h5-l);
                padding: 10px;
                outline: none;
                border: none;
                &::placeholder {
                    color: hsla(17, 8%, 35%, 0.3);
                }
            }
        }
    }



    .container_page_policy {
        overflow-x: hidden;
        max-width: 1290px;
        width: 90%;
        /*margin-left: 150px;
        margin-right: 50px;
        padding-right: 50px;
        padding-top: 150px;*/
        /* color: var(  --black2-devino);
         --h7-s: 16px;
        --h7-l: 24px;
        --h7-w: 400;  */
        font-size: var(--h5-s);
                line-height: var(--h5-l);
                font-weight: var(--h5-w);
                color: var(--brown-devino);
        /* color: var(--black2-devino);
                    font-size: var(--h7-s);
                    font-weight: var(--h7-w);
                    line-height: var(--h7-l); */
                
    }
         
    /* Медиа-запрос для планшетов (medium screens) */
    @media (max-width: 1024px) {
        .container_page_policy {
          width: 95%; /* Занимает больше места на экране */
          margin-left: auto;
          margin-right: auto;
          padding-right: 25px; /* Уменьшаем отступ справа */
          padding-top: 100px;  /* Уменьшаем отступ сверху */
        }
      }
      
      /* Медиа-запрос для мобильных телефонов (small screens) */
      @media (max-width: 768px) {
        .container_page_policy {
          width: 100%; /* Занимает всю ширину экрана */
          margin-left: 0; /* Убираем отступы */
          margin-right: 0;
          padding-right: 15px; /* Еще меньше отступ справа */
          padding-left: 15px; /* Добавляем отступ слева, чтобы контент не прилипал к краю */
          padding-top: 50px;   /* Еще меньше отступ сверху */
        }
      }
      
      /* Медиа-запрос для очень маленьких экранов (например, старые телефоны) */
      @media (max-width: 480px) {
          .container_page_policy {
              padding-top: 30px; /* Минимальный отступ сверху */
              padding-right: 10px;
              padding-left: 10px;
          }
      }  
      
    .block_main-name-head {
    line-height: 1.1; /* Значение может быть другим, подберите оптимальное */
    color: var(--red-devino);
                    font-size: var(--h1-s);
                    font-weight: var(--h1-w);
                    line-height: var(--h1-l);
    overflow-x: hidden; /* Скрывает горизонтальную прокрутку */
    }
    
    .block_main-thin-line {
        height: 2px;
        background-color: var(--brown-devino);
        /*width: calc(100% + (100vw - 100%)); /* Увеличиваем ширину на оставшуюся часть экрана */
        /*width: 100vw;*/
        width: 100%;
        /*margin-top: 15px;*/
        margin-bottom: 40px;
        overflow-x: hidden !important;
      }
    
      .block_down{
        margin-top: 20px;
        margin-bottom: 50px;
      }
      .block_main-text {
        display: flex;
        justify-content: left;
        width: 70%;
    
    }
    
    .block_down-text{
        display: block;
        justify-content: left;
        margin: 25px 150px;
    }
    
    .block_down-select-text{
        display: block;
        justify-content: left;
        margin: 10px 150px 10px 135px;
    
    }
    
    .block_dows-ul{
        list-style-type: disc; /* Тип маркера (можно circle, square) */
        list-style-position: inside; /* Размещаем точки внутри блока */
        padding-left: 0; /* Убираем отступ слева */
        /*background-color: var(--red-devino);*/
    }

    .block_dows-ul li::marker {
        color: var(--red-devino); /* Меняем цвет кружков */
        /*font-size: 1.2em; /* Можно изменить размер */
    }

    .block_dows-ol{
        /*padding-left: 15px;  Оставляем место для цифр */
        margin-left: 0; /* Убираем возможный внешний отступ */
        list-style-position: inside; /* Размещаем цифры внутри блока */
        word-wrap: break-word; /* Перенос длинных слов */
        
    }
    .block_dows-ol li::marker {
        color: var(--red-devino); /* Меняем цвет кружков */
        /*font-size: 1.2em; /* Можно изменить размер */
    }
    

    
    .block_main-name-select{
        margin-left: 50px;
        color: var(--red-devino);
                    font-size: var(--h1-s);
                    font-weight: var(--h1-w);
                    line-height: var(--h1-l);
    }
     
    @media (max-width: 1024px) { /* Планшеты */
        .block_main-text {
            width: 90%; /* Расширяем блок текста */
            
        }
    
        .block_down-text,
        .block_down-select-text {
            margin: 10px 50px; /* Уменьшаем отступы */
        }
    
        .block_main-name-select {
            margin-left: 30px; /* Корректируем отступ */
        }
    }
    
    @media (max-width: 768px) { /* Смартфоны в горизонтальном положении */
        .block_main-text {
            width: 95%; /* Почти на всю ширину */
        }
    
        .block_down-text,
        .block_down-select-text {
            margin: 10px 20px; /* Еще меньше отступы */
        }
    
        .block_main-thin-line {
            width: 100%; /* Делаем линию на всю ширину экрана */
          /* width: 100%;*/
        }
    
        .block_main-name-select {
            margin-left: 20px; /* Корректируем отступ */
        }
    }
    
    @media (max-width: 480px) { /* Смартфоны в вертикальном положении */
        .block_main-text {
            width: 100%; /* Полная ширина */
            text-align: left; /* Выравнивание */
        }
    
        .block_down-text,
        .block_down-select-text {
            margin: 10px; /* Минимальные отступы */
        }
    
        .block_main-thin-line {
            width: 100%; /* Полная ширина экрана */
           /* width: 100%;*/
        }
    
        .block_main-name-select {
            margin-left: 10px; /* Минимальный отступ */
        }
    }
    
    
    @media screen and (max-width: 768px) { 
        .block_main-text {
            width: 100%;
        }
    }
    .slick-dotted.slick-slider
    {
        margin-bottom: 0 !important;
    }

    .capa_sec.slider
    {
        & .capa__list_slider
        {
            display: flex;
            flex-direction: column;
           
            list-style: none;
            & .block
            {
                display: flex !important;
                flex-direction: column;

                width: 100%;
                height: 100%;
                gap:24px;
                min-height: 238px;
                padding: 10px 10px 20px 10px;
                justify-content: center;
                & li
                {
                    display: flex;
                    max-height: 238px;
                    width: 100%;
                    height: 100%;
                    & .capa {
                        display: flex;
                        flex-direction: column;
                        
                        border-radius: 20px;
                        box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                        background-color: #fff;
                        align-items: center;
                        padding: 30px 20px;
                        width: 100%;
                        min-height: 238px;

                        & img {
                            width: 80px;
                            height: 80px;
                            margin-bottom: 18px;
                        }
                        & p {
                            text-align: center;
                            color: var(--black2-devino);
                            font-size: var(--h5-s);
                            font-weight: var(--h5-w);
                            line-height: var(--h5-l);
                        }
                        &:last-child {}
                        & h3 {
                            font-size: var(--h4-s) !important;
                            font-weight: var(--h4-w) !important;
                            line-height: var(--h4-l) !important;
                        }
                    }
                }
            }
            & .btn_dots__container
            {
                /* position: absolute; */
                display: flex;
                justify-content: space-between;
                align-items: center;
                max-width: 547px;
                width: 100%;
                margin-top: 24px;
                /* bottom: 60px;
                left: 0; */
                overflow: hidden;
                @media (max-width: 430px) {
                    
                    margin-top: 24px;
                    
                }
                & .slick-dots {
                    margin: 0 auto;
                    display: flex;
                    position: static;
                    width: fit-content;
                    & .slick-active {
                        & button {
                            &::before {
                                font-size: 14px;
                                color: var(--red-devino);
                                opacity: 1;
                            }
                        }
                    }
                    & button {
                        &::before {
                            font-size: 7px;
                            color: var(--brown2-devino);
                            opacity: 1;
                        }
                    }
                }
                & .slick-arrow {
                    position: static;
                    z-index: 2;
                    height: auto;
                    width: fit-content;
                    display: flex;
                    -webkit-transform: translate(0, 0);
                    & svg {
                        width: 60px;
                    }
                    &::before {
                        display: none;
                    }
                    &.slick-prev {
                        display: flex;
                        width: fit-content;
                        & svg {
                            transform: rotate(180deg);
                        }
                    }
                }
            }
            & .slick-list
            {
              
                    overflow: hidden;
                    /* box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);  */
                    
                
            }
            & .slick-slide
            {
                height:auto;
                display: flex;
            }
            & .slick-track
            {
                display: flex;
            }     
            
        }
        & .btn {     
                margin-top: 45px;
                min-width: 100%;

        }
    }


    .capability_sec {
        & h2 {
            text-align: center;
        }
        & .capa__list {
            display: flex;
            flex-wrap: wrap;
           
            list-style: none;
            gap: 30px;
            @media (max-width: 789px) {
                column-gap: 28px;
            }
            & li {
                display: flex;
                flex-direction: column;
                
                border-radius: 20px;
                box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                background-color: #fff;
                align-items: center;
                padding: 30px 20px;
                width: 100%;
                --widthB: calc(100% - 60px);
                max-width: calc(var(--widthB)/3);
                @media (max-width: 789px) {
                    --widthB: calc(100% - 28px);
                    max-width: calc(var(--widthB)/2);
                }
                @media (max-width: 430px) {
                    max-width: 100%;
                    row-gap: 24px;
                }
                &:last-child {
                    margin: 0 auto;
                }
                & img {
                    width: 80px;
                    height: 80px;
                    margin-bottom: 20px;
                }
                & p {
                    text-align: center;
                    /* color: var(--black2-devino); */
                    color: var(--brown-devino);
                    font-size: var(--h5-s);
                    font-weight: var(--h5-w);
                    line-height: var(--h5-l);
                }
                &:last-child {}
                & h3 {
                    font-size: var(--h4-s);
                    font-weight: var(--h5-w);
                    line-height: var(--h4-l);
                    color: var(--black2-devino);

                    margin-bottom: 16px;
                    text-align: center;
                }
            }
        }
        & .btn {
            margin: 80px auto 0 auto;
            @media (max-width: 789px) {
                margin-top: 60px;
               
            }
            @media (max-width: 430px) {
                margin-top: 45px;
                
            }
        }
    }


    .capability_sec.slider {

        & h2 {
            text-align: center;
        }
        & .capability__list_slider {
            display: flex;
            flex-direction: column;
            /* flex-wrap: wrap; */
            list-style: none;
            & li {
                height: 100%;
                width: 100%;
                & .capa {
                    display: flex;
                    flex-direction: column;
                    min-height: 236px;
                    border-radius: 20px;
                    box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                    background-color: #fff;
                    align-items: center;
                    padding: 30px 20px;
                    width: 100%;                   
                    &:last-child {
                        margin: 0 auto;
                    }
                    & img {
                        width: 80px;
                        height: 80px;
                        margin-bottom: 20px;
                    }
                    & p {
                        text-align: center;
                        /* color: var(--black2-devino); */
                        color: var(--brown-devino);
                        font-size: var(--h5-s);
                        font-weight: var(--h5-w);
                        line-height: var(--h5-l);
                    }
                    &:last-child {}
                    & h3 {
                        font-size: var(--h4-s);
                        font-weight: var(--h5-w);
                        line-height: var(--h4-l);
                        color: var(--black2-devino);
    
                        margin-bottom: 16px;
                        text-align: center;
                    }
                }
            }
            & .slick-list
            {
                overflow: hidden;             
                box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%); 

            }
            & .btn_dots__container
            {
                /* position: absolute; */
                display: flex;
                justify-content: space-between;
                align-items: center;
                max-width: 547px;
                width: 100%;
                /* bottom: 60px;
                left: 0; */
                overflow: hidden;
                @media (max-width: 430px) {
                   
                    margin-top: 24px;
                    
                }
                & .slick-dots {
                    margin: 0 auto;
                    display: flex;
                    position: static;
                    width: fit-content;
                    & .slick-active {
                        & button {
                            &::before {
                                font-size: 14px;
                                color: var(--red-devino);
                                opacity: 1;
                            }
                        }
                    }
                    & button {
                        &::before {
                            font-size: 7px;
                            color: var(--brown2-devino);
                            opacity: 1;
                        }
                    }
                }
                & .slick-arrow {
                    position: static;
                    z-index: 2;
                    height: auto;
                    width: fit-content;
                    display: flex;
                    -webkit-transform: translate(0, 0);
                    & svg {
                        width: 60px;
                    }
                    &::before {
                        display: none;
                    }
                    &.slick-prev {
                        display: flex;
                        width: fit-content;
                        & svg {
                            transform: rotate(180deg);
                        }
                    }
                }
            }
        }
        & .btn {     
                margin-top: 45px;
                min-width: 100%;
        }
    }
    .partnership_sec.slider {
        & h2 {
            text-align: center;
        }
        & .partnership__list_slider {
            display: flex;
            flex-direction: column;
            
            list-style: none;
            width: 100%;
            & .block
            {
                display: flex !important;
                flex-direction: column;

                width: 100%;
                height: 100%;
                gap:24px;
                justify-content: center;
                & li {
                    display: flex;
                    
                    & .partner
                    {
                        list-style: none;
                        display: flex;
                        flex-direction: column;
                        max-width: 610px;
                        min-height: 256px;
                        width: 100%;
                        align-items: start;
                        
                        & img {
                            width: 60px; 
                            height: 50px;
                            width: 50px;
                            margin-bottom: 12px;
                        }
                        & .text__content {
                            display: flex;
                            flex-direction: column;
                            & h3 {
                                color: var(--black2-devino);
                                font-size: var(--h4-s);
                                font-weight: var(--h4-w);
                                line-height: var(--h4-l);
                                margin-bottom: 16px;
                            }
                            & p {
                                color: var(--brown-devino);
                                font-size: var(--h5-s);
                                font-weight: var(--h5-w);
                                line-height: var(--h5-l);
                            }
                        }
                    }
                }
            }     
            & .btn_dots__container
            {
                /* position: absolute; */
                display: flex;
                justify-content: space-between;
                align-items: center;
                max-width: 547px;
                width: 100%;
                /* bottom: 60px;
                left: 0; */
                overflow: hidden;
                @media (max-width: 430px) {
                   
                    margin-top: 24px;
                    
                }
                & .slick-dots {
                    margin: 0 auto;
                    display: flex;
                    position: static;
                    width: fit-content;
                    & .slick-active {
                        & button {
                            &::before {
                                font-size: 14px;
                                color: var(--red-devino);
                                opacity: 1;
                            }
                        }
                    }
                    & button {
                        &::before {
                            font-size: 7px;
                            color: var(--brown2-devino);
                            opacity: 1;
                        }
                    }
                }
                & .slick-arrow {
                    position: static;
                    z-index: 2;
                    height: auto;
                    width: fit-content;
                    display: flex;
                    -webkit-transform: translate(0, 0);
                    & svg {
                        width: 60px;
                    }
                    &::before {
                        display: none;
                    }
                    &.slick-prev {
                        display: flex;
                        width: fit-content;
                        & svg {
                            transform: rotate(180deg);
                        }
                    }
                }
            }
            & .slick-slide {
                height: auto;
                display: flex;
            }
            & .slick-track
            {
                display: flex;
            }
        }
    }

    .pricing_sec.slider {
        @media (max-width: 430px) {
            padding-top: 35px;
            padding-bottom: 35px;
        }
        & .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            & h2 {
                text-align: center;
                
                margin-bottom: 35px;
                
            }
            & .pricing__list_slider {
                display: flex;
                flex-direction: column;
                width: 100%;
                list-style: none;
 
                & li 
                {
                    display: flex;
                    width: 100%;
                    height: 100%;
                    & .prici
                    {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        list-style: none;
                        border-radius: 20px;
                        background-color: white;
                        padding: 30px 20px;
                        
                        max-width: 410px;
                        width: 100%;
                        box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                        @media (max-width: 789px) {
                            max-width: 330px;
                            
                        }
                        @media (max-width: 430px) {
                            
                            max-width: 100%;
                        }
                        & img {
                            height: 80px;
                            margin-bottom: 20px;
                        }
                        & p {
                            text-align: center;
                            color: var(--black2-devino);
                            font-size: var(--h5-s);
                            font-weight: var(--h5-w);
                            line-height: var(--h5-l);
                        }
                        & h4 {
                            text-align: center;
                            color: var(--black2-devino);
                            font-size: var(--h4-s);
                            font-weight: var(--h4-w);
                            line-height: var(--h4-l);
                        }
                    }
                }

                & .slick-list
                {
                    overflow: hidden;             
                    box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%); 
    
                }
                & .btn_dots__container
                {
                    /* position: absolute; */
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    max-width: 547px;
                    width: 100%;
                    /* bottom: 60px;
                    left: 0; */
                    overflow: hidden;
                    @media (max-width: 430px) {
                    
                        margin-top: 24px;
                        
                    }
                    & .slick-dots {
                        margin: 0 auto;
                        display: flex;
                        position: static;
                        width: fit-content;
                        & .slick-active {
                            & button {
                                &::before {
                                    font-size: 14px;
                                    color: var(--red-devino);
                                    opacity: 1;
                                }
                            }
                        }
                        & button {
                            &::before {
                                font-size: 7px;
                                color: var(--brown2-devino);
                                opacity: 1;
                            }
                        }
                    }
                    & .slick-arrow {
                        position: static;
                        z-index: 2;
                        height: auto;
                        width: fit-content;
                        display: flex;
                        -webkit-transform: translate(0, 0);
                        & svg {
                            width: 60px;
                        }
                        &::before {
                            display: none;
                        }
                        &.slick-prev {
                            display: flex;
                            width: fit-content;
                            & svg {
                                transform: rotate(180deg);
                            }
                        }
                    }
                }
          
            }
            & .btn {
                margin-top: 24px;
                min-width: 100%;
            }
        }
    }
    .advacapa_sec {
        & h2 {
            text-align: center;
        }
        & .advacapa_list {
            display: flex;
            flex-wrap: wrap;
           
            list-style: none;
            gap: 30px;
            @media (max-width: 789px) {
                column-gap: 28px;
            }
            & li {
                display: flex;
                flex-direction: column;
                
                border-radius: 20px;
                box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                background-color: #fff;
                align-items: center;
                padding: 30px 20px;
                width: 100%;
                --widthB: calc(100% - 60px);
                max-width: calc(var(--widthB)/3);
                @media (max-width: 789px) {
                    --widthB: calc(100% - 28px);
                    max-width: calc(var(--widthB)/2);
                }
                @media (max-width: 430px) {
                    max-width: 100%;
                    row-gap: 24px;
                }
                &:last-child {
                    margin: 0 auto;
                }
                & img {
                    width: 80px;
                    height: 80px;
                    margin-bottom: 18px;
                }
                & p {
                    text-align: center;
                    color: var(--black2-devino);
                    font-size: var(--h5-s);
                    font-weight: var(--h5-w);
                    line-height: var(--h5-l);
                }
                &:last-child {}
                & h3 {
                    font-size: var(--h4-s) !important;
                    font-weight: var(--h4-w) !important;
                    line-height: var(--h4-l) !important;
                }
            }
        }
        & .btn {
            margin: 80px auto 0 auto;
            @media (max-width: 789px) {
                margin-top: 60px;
               
            }
            @media (max-width: 430px) {
                margin-top: 45px;
                
            }
        }
    }
    .advacapa_sec_slider {
        & h2 {
            text-align: center;
        }
        & .advacapa_list_slider {
            display: flex;
            flex-direction: column;
           
            list-style: none;
           
            & .block
            {
                display: flex !important;
                flex-direction: column;
                justify-content: center;
                gap:24px;
                padding: 10px;
                & li {
                    & .advacapa
                    {
                        display: flex;
                        flex-direction: column;
                        min-height: 218px;
                        border-radius: 20px;
                        box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                        background-color: #fff;
                        align-items: center;
                        padding: 30px 20px;
                        width: 100%; 
                        & img {
                            width: 80px;
                            height: 80px;
                            margin-bottom: 18px;
                        }
                        & p {
                            text-align: center;
                            color: var(--black2-devino);
                            font-size: var(--h5-s);
                            font-weight: var(--h5-w);
                            line-height: var(--h5-l);
                        }
                        &:last-child {}
                        & h3 {
                            font-size: var(--h4-s) !important;
                            font-weight: var(--h4-w) !important;
                            line-height: var(--h4-l) !important;
                        }
                    }
                }
            }
            & .slick-list
            {
                /* overflow: hidden;             
                box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);  */

            }
            & .btn_dots__container
            {
                /* position: absolute; */
                display: flex;
                justify-content: space-between;
                align-items: center;
                max-width: 547px;
                width: 100%;
                /* bottom: 60px;
                left: 0; */
                overflow: hidden;
                @media (max-width: 430px) {
                
                    margin-top: 24px;
                    
                }
                & .slick-dots {
                    margin: 0 auto;
                    display: flex;
                    position: static;
                    width: fit-content;
                    & .slick-active {
                        & button {
                            &::before {
                                font-size: 14px;
                                color: var(--red-devino);
                                opacity: 1;
                            }
                        }
                    }
                    & button {
                        &::before {
                            font-size: 7px;
                            color: var(--brown2-devino);
                            opacity: 1;
                        }
                    }
                }
                & .slick-arrow {
                    position: static;
                    z-index: 2;
                    height: auto;
                    width: fit-content;
                    display: flex;
                    -webkit-transform: translate(0, 0);
                    & svg {
                        width: 60px;
                    }
                    &::before {
                        display: none;
                    }
                    &.slick-prev {
                        display: flex;
                        width: fit-content;
                        & svg {
                            transform: rotate(180deg);
                        }
                    }
                }
            }
        }
        & .btn {
           
                margin-top: 45px;
                min-width: 100%;
            
        }
    }

    .use__cases_sec_slider {
        @media (max-width: 430px) {
            /* min-height: 100%; */
            overflow: visible;
        }
        & .container>h2 {
            text-align: center;
        }
        & .use__cases__slider {
            display: flex;
            width: 100%;
            min-height: 684px;
            height: auto;
            /* max-height: 664px; */
            overflow: visible;
            flex-direction: column;
            @media (max-width: 789px) {
                /* height: 622px; */
                max-height: 100%;
            }
            @media (max-width: 430px) {
                /* max-height: 1200px; */
                /* overflow: hidden; */
                align-items: center;
            }
            & .product__navigation {
                display: flex;
                margin-bottom: 30px;
                margin-left: auto;
                margin-right: auto;
                flex-wrap: wrap;
                @media (max-width: 430px) {
                    column-gap: 30px;
                    row-gap: 24px;
                    justify-content: center;
                    max-width: 200px;
                }
                & .icon__container {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    margin: 0 15px;
                    max-width: 57px;
                    width: 100%;
                    cursor: pointer;
                    max-height: 97px;
                    @media (max-width: 430px) {
                        margin: 0;
                        max-width: 40px;
                        max-height: 40px;
                    }
                    &:hover .color__icon {
                        opacity: 1;
                    }
                    &:hover .title__product {
                        opacity: 1;
                    }
                    &.active {
                        & .color__icon {
                            opacity: 1;
                        }
                        & .title__product {
                            opacity: 1;
                        }
                    }
                    & .color__icon {
                        transition: 0.3s;
                        position: absolute;
                        opacity: 0;
                    }
                    & .grey__icon {
                        margin-bottom: 16px;
                        @media (max-width: 430px) {
                            margin: 0;
                        }
                        & img {
                            filter: grayscale(100%);
                        }
                    }
                    & .title__product {
                        transition: 0.3s;
                        text-align: center;
                        display: flex;
                        width: 100%;
                        justify-content: center;
                        font-size: var(--h7-s);
                        font-weight: var(--h7-w);
                        line-height: var(--h7-l);
                        color: var(--brown-devino);
                        opacity: 0;
                        @media (max-width: 430px) {
                            display: none;
                        }
                    }
                }
            }
            & .main__product__slider {
                position: relative;
                display: flex;
                max-width: 1034px;
                margin: 0 auto;
                width: 100%;
                height: 1px;
                
                overflow: hidden;
                @media (max-width: 789px) {
                   
                }
                @media (max-width: 430px) {
                    max-width: 100%;
                    margin: 0;
                }
                & .case__slider__line {
                    left: 0;
                    transition: 0.3s;
                    position: absolute;
                    height: auto;
                    display: flex;
                    @media (max-width: 789px) {
                        
                    }
                    @media (max-width: 430px) {
                        width: 100%;
                    }
                    & .case__slider {
                        max-width: 1034px;
                        width: 1034px;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        @media (max-width: 789px) {
                            /* height: 622px; */
                        }
                        @media (max-width: 430px) {
                            width: 100%;
                        }
                        & .case__slide__nav {
                            display: flex;
                            justify-content: center;
                            /* margin-bottom: 16px; */
                            & .block_title
                            {
                                display: flex;
                                flex-direction: row;
                                width: 100%;
                                justify-content: center;
                                /* margin-bottom: 16px; */
                               
                                & .case__slide_title
                                {
                                    display: flex;
                                    border: 0;
                                    background: none;
                                    color: var(--red-devino);
                                    text-align: center;
                                    /* width: fit-content; */
                                    align-items: center;
                                    font-size: var(--h6-s);
                                    font-weight: var(--h6-w);
                                    line-height: var(--h6-l);
                                    cursor: pointer;
                                    width: 100%;
                                    justify-content: center;
                                    position: absolute;
                                    /* left: -24px; */
                                    max-width: 276px;
                                    
                                }
                                & .arrow_container
                                {
                                    display: flex;
                                    flex-direction: row;
                                    justify-content: space-between;
                                    align-items: center;
                                    position: relative;
                                    right: 0;
                                    width: 100%;
                                    height: 100%;
                                    & .arrow{
                                        width: 24px;
                                        height: 24px;
                                        position: absolute;
                                        right: 0;
                                        &::after
                                        {
                                            content: '';
                                            background-image: url(../media/arow_bottom.svg);
                                            background-size: contain;
                                            background-position: center;
                                            background-repeat: no-repeat;
                                            display: flex;
                                            width: 24px;
                                            height: 24px;
                                            /* margin-left: auto; */
                                            transition: 0.4s;
                                            transform: rotate(0deg);
                                            position: static;
                                            /* left: 27px; */
                        
                                        }
                                        &.active::after {
                                            transform: rotate(180deg);
                                        }
                                    }
                                }
                              
                            }
                            & .case__slide__drop
                            {

                                display: none;
                                width: 100%;
                                justify-content: center;
                                position: absolute;
                                flex-direction: column;
                                align-items: center;
                                background-color: var(--white-devino);
                                z-index: 3;
                                flex-wrap: wrap;
                                border-radius: 20px;
                                opacity:0;
                                transition: opacity 2s ease-out;
                                box-shadow: 0px 10px 20px 0px rgb(113 127 255 / 10%);
                                top: 32px;
                                padding: 20px;
                                &.active{
                                    display: flex;
                                    opacity:1;
                                }
                                
                                & .case__slide__nav_item {
                                    display: flex;
                                    width: fit-content;
                                    font-size: var(--h3-s);
                                    font-weight: var(--h3-w);
                                    line-height: var(--h3-l);
                                    color: var(--brown2-devino);
                                    cursor: pointer;
                                    margin: 0 11px;
                                    transition: 0.3s;
                                    @media (max-width: 789px) {
                                        margin-bottom: 16px;
                                    }
                                    @media (max-width: 430px) {
                                        text-align: center;
                                    }
                                    &.active {
                                        color: var(--red-devino);
                                    }
                                    &:hover {
                                        color: var(--red-devino);
                                    }
                                }
                            }
                        }
                        & .case__slide__slider {
                            position: relative;
                            display: flex;
                            max-width: 100%;
                            width: 1034px;
                            overflow: hidden;
                            height: 598px;
                          
                            & .case__slide__slider__line {
                                top: 0;
                                transition: 0.3s;
                                width: 1034px;
                                position: absolute;
                                display: flex;
                                flex-direction: column;
                                @media (max-width: 789px) {
                                    width: 690px;
                                }
                                @media (max-width: 430px) {
                                    width: 100%;
                                    max-height: 1200px;
                                }
                                & .case__slide__slider__item {
                                    display: flex;
                                    width: 100%;
                                    height: 648px;
                                    justify-content: space-between;
                                    align-items: center;
                                    overflow: hidden;
                                    @media (max-width: 789px) {
                                        height: 530px;
                                    }
                                    @media (max-width: 430px) {
                                        width: 100%;
                                        height: 100%;
                                        overflow: visible;
                                        flex-direction: column-reverse;
                                        justify-content: flex-end;
                                    }
                                    & .screen__container {
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        position: relative;
                                        overflow: hidden;
                                        height: 646px;
                                        width: 324px;
                                        border-radius: 56px;
                                        @media (max-width: 789px) {
                                            height: 530px;
                                        }
                                        @media (max-width: 430px) {
                                            height: 530px;
                                            width: 100%;
                                        }
                                        & img.back__phone {
                                            position: absolute;
                                            z-index: 1;
                                            width: 324px;
                                            min-height: 646px;
                                            @media (max-width: 789px) {
                                                width: 265px;
                                                min-height: 530px;
                                            }
                                            @media (max-width: 430px) {
                                                height: 530px;
                                                width: 320px;
                                            }
                                        }
                                        & .screen__line {
                                            position: absolute;
                                            display: flex;
                                            flex-direction: row;
                                            /* overflow: hidden; */
                                            transition: 0.6s;
                                            top: 0;
                                            transform:translateX(0);
                                            width: 282px;
                                            align-items: center;
                                            @media (max-width: 789px) {
                                                width: 238px;
                                            }
                                            @media (max-width: 430px) {
                                                width: 238px;
                                            }
                                        }
                                        & img:not(.back__phone) {
                                            transition: 0.6s;
                                            /* display: none; */
                                            position: relative;
                                            width: 293px;
                                            height: 619px;
                                            z-index: 0;
                                            opacity: 0;
                                            margin: 14px 0px;
                                            border-radius: 41px;
                                            margin-bottom: 12px;
                                            @media (max-width: 789px) {
                                                width: 238px;
                                                height: 100%;
                                                border-radius: 30px;
                                                /* margin:0 14px; */
                                                margin-bottom: 12px;
                                            }
                                            &.active
                                            {
                                                opacity: 1;
                                            }
                                        }
                                    }
                                    & .steps__container {
                                        display: flex;
                                        flex-direction: column;
                                        max-width: 610px;
                                        width: 100%;
                                        max-height: 520px;
                                        overflow-y: scroll;
                                        @media (max-width: 789px) {
                                            max-width: 380px;
                                        }
                                        & .btn_dots__container
                                        {
                                            /* position: absolute; */
                                            display: flex;
                                            justify-content: space-between;
                                            align-items: center;
                                            max-width: 547px;
                                            width: 100%;
                                            /* bottom: 60px;
                                            left: 0; */
                                            overflow: hidden;
                                            @media (max-width: 430px) {
                                            
                                                margin-top: 24px;
                                                margin-bottom: 24px;
                                                
                                            }
                                            & .slick-dots {
                                                margin: 0 auto;
                                                display: flex;
                                                position: static;
                                                width: fit-content;
                                                & .slick-active {
                                                    & button {
                                                        &::before {
                                                            font-size: 14px;
                                                            color: var(--red-devino);
                                                            opacity: 1;
                                                        }
                                                    }
                                                }
                                                & li
                                                {
                                                    margin: 0 15px;
                                                }
                                                & button {
                                                    &::before {
                                                        font-size: 7px;
                                                        color: var(--brown2-devino);
                                                        opacity: 1;
                                                    }
                                                }
                                            }
                                            & .slick-arrow {
                                                position: static;
                                                z-index: 2;
                                                height: auto;
                                                width: fit-content;
                                                display: flex;
                                                -webkit-transform: translate(0, 0);
                                                & svg {
                                                    width: 30px;
                                                }
                                                &::before {
                                                    display: none;
                                                }
                                                &.slick-prev {
                                                    display: flex;
                                                    width: fit-content;
                                                    & svg {
                                                        /* transform: rotate(180deg); */
                                                    }
                                                }
                                            }
                                        }

                                        & .steps {
                                            display: flex;
                                            padding: 16px 20px;
                                            border-left: 1px solid var(--brown2-devino);
                                            font-size: var(--h5-s);
                                            font-weight: var(--h5-w);
                                            line-height: var(--h5-l);
                                            color: var(--brown-devino);
                                            margin: 10px 0;
                                            cursor: pointer;
                                            transition: 0.2s;
                                            &:hover {
                                                border-color: var(--brown2-devino);
                                                padding: 16px 20px;
                                                color: var(--black2-devino);
                                            }
                                            &.active {
                                                border-color: var(--red-devino);
                                                padding: 16px 20px;
                                                color: var(--red-devino);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        & .text
                        {
                            margin-top: 32px;
                        }
                        & .text p
                        {
                            
                            text-align: center;
                            color: var(--black2-devino);
                            font-size: var(--h5-s);
                            font-weight: var(--h5-w);
                            line-height: var(--h5-l);
                        }
                    }
                }
            }
        }
    }