.main {
    overflow: hidden;
    background: var(--bg-color-primary);
}
.hero {
    background-image: -o-linear-gradient(bottom, var(--bg-color-primary) 22%, var(--bg-viol) 100%),-o-radial-gradient(0% 50%, 75% 75%, var(--bg-cyan) 0%, #ffffff00 83%),-o-radial-gradient(100% 50%, 75% 75%, var(--bg-yellow) 0%, #FFFFFF00 99%);
    background-image: linear-gradient(0deg, var(--bg-color-primary) 22%, var(--bg-viol) 100%),radial-gradient(75% 75% at 0% 50%, var(--bg-cyan) 0%, #ffffff00 83%),radial-gradient(75% 75% at 100% 50%, var(--bg-yellow) 0%, #FFFFFF00 99%);
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.area{
    background: var(--bg-color-primary);
    position: fixed;
    width: 100%;
    min-height: 95vh;
    z-index: -1;
    
   
}
.hero .hero__area {
    position: fixed;
    background: none;
    z-index: 0;

    
    min-height: 100vh
}

.circles .area__svg {
    position: absolute;
    display: block;
    list-style: none;


    animation: animate 15s linear infinite;
    bottom: -19vw;

}

@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;

        
    }

    100%{
        transform: translateY(calc(-100vh - 19vw)) rotate(720deg);
        opacity: 0;

        
    }

}

.area__svg {
    fill: var(--border-color-20);
    width: 19vw;
    max-width: 7rem;
}
.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 2.5vw;
    height: 2.5vw;
    max-width: 20px;
    max-height: 20px;
    background: var(--border-color-20);
    animation: animate 10s linear infinite;
    bottom: -150px;
    border-radius: 1rem;
    
}
.circles .c-1 {
    left: 25%;

    animation-delay: 3s;
    animation-duration: 8s;
}
.circles .c-2 {
    left: 80%;

    animation-delay: 0s;
    animation-duration: 6s;
}
.circles .c-3 {
    left: 55%;

    animation-delay: 2s;
    animation-duration: 7s;
}
.circles .c-4 {
    left: 95%;

    animation-delay: 4.5s;
    animation-duration: 5s;
}
.circles .c-5 {
    left: 5%;

    animation-delay: .5s;
    animation-duration: 9s;
}
.circles .c-6 {
    left: 17%;

    animation-delay: 3s;
    animation-duration: 7s;
}
.circles .c-7 {
    left: 40%;

    animation-delay: 6s;
    animation-duration: 7s;
}
.circles .c-8 {
    left: 70%;

    animation-delay: 3.5s;
    animation-duration: 5.5s;
}
.circles .c-9 {
    left: 60%;

    animation-delay: 5.5s;
    animation-duration: 7.5s;
}
.circles .c-10 {
    left: 7%;

    animation-delay: 7s;
    animation-duration: 8s;
}
.area__svg:nth-child(1) {
    left: 5%;

    animation-delay: 0s;
    
}

.area__svg:nth-child(2) {
    left: 20%;

    animation-delay: 6s;
    
}

.area__svg:nth-child(3) {
    left: 36%;

    animation-delay: 3s;
    
}

.area__svg:nth-child(4) {
    left: 55%;

    animation-delay: 8s;
    
}

.area__svg:nth-child(5) {
    left: 65%;

    animation-delay: 1.5s;
    
}

.area__svg:nth-child(6) {
    left: 85%;

    animation-delay: 4.5s;
    
}
.area__svg:nth-child(7) {
    left: 10%;

    animation-delay: 10s;
    
}
.area__svg:nth-child(8) {
    left: 87%;

    animation-delay: 12.5s;
    
}
.area__svg:nth-child(9) {
    left: 42%;

    animation-delay: 13.5s;
    
}

.hero__container {
    width: 100%;
    padding: 1.5rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.hero__text {
    opacity: 0;
    background: -o-linear-gradient(left, var(--text-viol) 0%,var(--text-pink) 25%, var(--text-viol) 50%, var(--text-pink) 75%, var(--text-viol) 100%);
    background: linear-gradient(90deg, var(--text-viol) 0%,var(--text-pink) 25%, var(--text-viol) 50%, var(--text-pink) 75%, var(--text-viol) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    -webkit-animation: appearLeft 0.5s ease-in-out 0s 1 forwards, backgroundChange 5s ease infinite;
    animation: appearLeft 0.5s ease-in-out 0s 1 forwards, backgroundChange 5s ease infinite;
    
}


.hero_slogan {
    text-align: center;
    font-weight: 700;
    font-size: clamp(var(--text-size-300), 7vw, var(--text-size-400));
    font-family: 'Montserrat', sans-serif;
}

.hero_slogan span {
    font-family: 'Montserrat', sans-serif;
}


.hero__description {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    font-family: 'Montserrat', sans-serif;
}


.review {
    display: flex;
    align-items: center;
    justify-content: center;
}
.review__container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.review__svg {
    width: 5vw;
    max-width: 1.2rem;
    fill: var(--yellow-color);
    padding-bottom: .1rem;
}

.review__mark {
    margin-left: .5rem;
    font-family: 'Montserrat', sans-serif;
}
.review .vc {

    height: 10vw;
    max-height: 3rem;
    margin-inline: calc(1rem + 2vw);
}

.review__element {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-decoration: none;
    transform: translateY(0px);
    transition: .4s cubic-bezier(.28,-0.03,0,.99) !important;
}


.review__element .bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 0.5rem;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;

    -webkit-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.bottom svg {
    width: 5vw;
    max-width: 2rem;
    margin-right: 0.4rem;
}

.review__element .bottom .m-r {
    margin-right: 0.7rem;
}
.review__element .bottom .text {
    text-decoration: none;
    color: var(--border-color-primary);

}

.review__element:hover {
    
    transform: translateY(-5px);
    
    
    
    
    
    
    
    
}


@media (prefers-reduced-motion) {
    .review {
        -webkit-animation: none;
                animation: none;
        opacity: 1;
    }
}

@media (prefers-reduced-motion) {
    .set-bg .container-gr .container-m-1 h2{
        -webkit-animation: none ;
                animation: none ;
        opacity: 1;
    }
}


@media (min-width: 1200px) {
    .hero__container {
        
        row-gap: 2rem;
    }
    .hero__description {
        font-size: clamp(var(--text-size-300), 1.3vw, var(--text-size-400));
    }
    .hero_slogan {
        font-weight: 700;
        font-size: clamp(var(--text-size-700), 3vw, var(--text-size-1000));
    }
    .hero_slogan .second-line {

    }
    .hero__review {
        
    }
    .review__container {
        column-gap: .1rem;
    }
    .review__svg {
        max-width: 1.7rem;
    }
}
.set-bg .container-gr .container-m-1 .title {
    opacity: 0;
    background: -webkit-gradient(linear, left top, right top, from(#8e2de2),color-stop(25%, #e00083), color-stop(50%, #8e2de2), color-stop(75%, #e00083), to(#8e2de2));
    background: -o-linear-gradient(left, var(--text-viol) 0%,var(--text-pink) 25%, var(--text-viol) 50%, var(--text-pink) 75%, var(--text-viol) 100%);
    background: linear-gradient(90deg, var(--text-viol) 0%,var(--text-pink) 25%, var(--text-viol) 50%, var(--text-pink) 75%, var(--text-viol) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    -webkit-animation: appearLeft 0.5s ease-in-out 0s 1 forwards, backgroundChange 5s ease infinite;
            animation: appearLeft 0.5s ease-in-out 0s 1 forwards, backgroundChange 5s ease infinite;
}

@media (prefers-reduced-motion) {
    .set-bg .container-gr .container-m-1 .title {
        -webkit-animation: none ;
                animation: none ;
        opacity: 1;
    }
}




@media (min-width: 700px) {
    
    .set-bg .container-gr .container-m-1 .review .element img {
        height: 20px;
    }
}
            
        
        
@media (min-width: 1300px) {
    .set-bg .container-gr .container-m-1 h2{
                
                        
        max-width: 750px;

    }
    .set-bg .container-gr .container-m-1 .review .element img {
        height: 23px;
    }
    .set-bg .container-gr .container-m-1 .review .element .bottom svg {
        width: 35px;
    }
    .set-bg .container-gr .container-m-1 .review .element .bottom .text {
        font-size: 22px;
    }
}




.container-m-2 {

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    color: var(--border-color-primary);
    border: none;



    background: var(--bg-color-primary);
    width: 100%;
}

.picture__container {
    max-width: 1300px;
    margin: 5rem auto 0;
    position: relative;
    width: 100%;

    height: 100%;
}

.container-m-2 .picture {
    position: relative;
    width: 100%;
    height: calc(180px + 20vw);
    margin-bottom: 1rem;
    
}

.container-m-2 .picture .border {
        position: absolute;
        width: calc(100% + 2px);
        height: calc(100% + 2px);
        top: -1px;
        left: -1px;
        fill: var(--bg-color-primary)
    }
    .container-m-2 .picture img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        -o-object-fit: cover;
           object-fit: cover;
    }

    .container-m-2 .picture .img-desktop {
        display: none;
    }


    .container-m-2 .body {
        padding: 0 1.5rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        max-width: 580px;
    }
    .container-m-2 .body h2 {
        margin-bottom: 1rem;
    }

    .container-m-2 .body .zayavka {
        margin: 1.5rem 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
        .container-m-2 .body .zayavka .btn {
            color: white;
            padding: 0.5rem 1rem;
            background-image: -webkit-gradient(linear, left top, right top, color-stop(33%, var(--accent-color)), to(#ce1270));
            background-image: -o-linear-gradient(left, var(--accent-color) 33%, #ce1270 100%);
            background-image: linear-gradient(90deg, var(--accent-color) 33%, #ce1270 100%);
            background-size: 200% 200%;
            border-radius: .5rem;
            -webkit-transition: .4s cubic-bezier(.28,-0.03,0,.99) ;
            -o-transition: .4s cubic-bezier(.28,-0.03,0,.99) ;
            transition: .4s cubic-bezier(.28,-0.03,0,.99) ;
            
        }

        .container-m-2 .body .zayavka .btn:hover {
            -webkit-transform: translateY(-5px);
                -ms-transform: translateY(-5px);
                    transform: translateY(-5px);
            background-size: 100% 100%;
            -webkit-transition: background-size .3s ease-in-out, -webkit-transform .4s cubic-bezier(.28,-0.03,0,.99);
            transition: background-size .3s ease-in-out, -webkit-transform .4s cubic-bezier(.28,-0.03,0,.99);
            -o-transition: transform .4s cubic-bezier(.28,-0.03,0,.99), background-size .3s ease-in-out ;
            transition: transform .4s cubic-bezier(.28,-0.03,0,.99), background-size .3s ease-in-out ;
            transition: transform .4s cubic-bezier(.28,-0.03,0,.99), background-size .3s ease-in-out, -webkit-transform .4s cubic-bezier(.28,-0.03,0,.99);
        }
    

        .container-m-2 .body .switch {
            position: relative;
            width: 100%;
            height: calc(90px + 1vw);
        }
        .container-m-2 .body .switch .element {
            position: absolute;
            visibility: hidden;
            opacity: 0;
            top: 50%;
            right: 50%;
            -webkit-transform: translate(25%, -50%);
                -ms-transform: translate(25%, -50%);
                    transform: translate(25%, -50%);
            width: 100%;
        }

        .container-m-2 .body .switch .first {
            -webkit-animation-name: firstSwitch;
                    animation-name: firstSwitch;
            -webkit-animation-duration: 30s;
                    animation-duration: 30s;
            -webkit-animation-iteration-count: infinite;
                    animation-iteration-count: infinite;
            -webkit-animation-timing-function: ease-in-out;
                    animation-timing-function: ease-in-out;
        }

        .container-m-2 .body .switch .second {
            -webkit-animation-name: secondSwitch;
                    animation-name: secondSwitch;
            -webkit-animation-duration: 30s;
                    animation-duration: 30s;
            -webkit-animation-iteration-count: infinite;
                    animation-iteration-count: infinite;
            -webkit-animation-timing-function: ease-in-out;
                    animation-timing-function: ease-in-out;
        }

        .container-m-2 .body .switch .third {
            -webkit-animation-name: thirdSwitch;
                    animation-name: thirdSwitch;
            -webkit-animation-duration: 30s;
                    animation-duration: 30s;
            -webkit-animation-iteration-count: infinite;
                    animation-iteration-count: infinite;
            -webkit-animation-timing-function: ease-in-out;
                    animation-timing-function: ease-in-out;
        }




@media (min-width:800px) {
    
    .container-m-2 .picture {
            height: 450px;

    }
    .container-m-2 .picture .img-desktop {
                display: block;
            }

            .container-m-2 .picture .img-mobile {
                display: none;
            }
        

        .container-m-2 .body {
            position: absolute;
            color: white;
            left: 4%;
            top: 15%;
            width: 45%;
        }
        .container-m-2 .body h2 {
                margin-bottom: 1.5rem;
                
            }

            .container-m-2 .body .zayavka {
                margin: 2rem 0;
            }
}


@media (min-width:1100px) {
    
        .container-m-2 .picture {
            height: 580px;
        }

        .container-m-2 .body {
            left: 5%;
        }
        .container-m-2 .body h2 {
                margin-bottom: 2rem;
            }
            
            .container-m-2 .body .zayavka {
                margin:  2.5rem 0;
            }
}


@media (min-width:1300px) {
    
        .container-m-2 .picture {
            height: 620px;
        }

        .container-m-2 .body {
            left: 6%;
        }
            .container-m-2 .body h1 {
                margin-bottom: 2.5rem;
            }
            
            .container-m-2 .body .zayavka {
                margin:  3rem 0;
            }
            .container-m-2 .body .zayavka .btn {
                    padding: 0.7rem 1.5rem;
                }
}



.container-wt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0rem 2rem;
    padding-top: 6rem;
    background: var(--bg-color-primary);
    z-index: 0;
    position: sticky;
}
.container-wt .container-m-1 {
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            text-align: center;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            row-gap: 1.5rem;
            
}
.container-wt .container-m-1 .arrow {
                display: none;
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                height: 100%;
}
.container-wt .container-m-1 .arrow svg {
                    
    width: 50px;
}


.container-wt .container-m-1 .header h2 {
    margin-bottom: 0.5rem;
}

.container-wt .container-m-1 .header .vr {
    margin: 2rem auto 0.5rem;
    
}

.header .vr {
    max-width: 1200px;
    background: var(--border-color-20);
}


.container-wt .container-m-1 .work-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: start;
    -webkit-column-gap: 1rem;
       -moz-column-gap: 1rem;
            column-gap: 1rem;
}
.container-wt .container-m-1 .work-section label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 2.2rem;
    min-width: 2.2rem;
    height: 2.2rem;
    color: var(--border-color-primary);
    background: var(--bg-color-secondary);
    border: none;
    border-radius: 50%; 
}

.container-wt .container-m-1 .work-section svg {
    display: none;
    width: 100px;
}
.container-wt .container-m-1 .work-section span {
    text-align: center;
    margin: 12px;
}
            

@media (min-width: 1400px) {
    .container-wt {
        padding-top: 8rem;
    }
    
    .container-wt .container-m-1 {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 19% 1.5rem auto 1.5rem 19% 1.5rem auto 1.5rem 19% 1.5rem auto 1.5rem 19%;
        grid-template-columns: 19% auto 19% auto 19% auto 19%;
        -webkit-column-gap: 1.5rem;
           -moz-column-gap: 1.5rem;
                column-gap: 1.5rem;
    }
               
    .container-wt .container-m-1 .header {
        -ms-grid-column: 1;
        -ms-grid-column-span: 7;
        grid-column: 1/8;
    }
        .container-wt .container-m-1 .header .vr {
            margin-bottom: 2rem;
        }
    
    .container-wt .container-m-1 .arrow {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        
    }

    .container-wt .container-m-1 .work-section {
        max-width: 300px;
        text-align: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
        .container-wt .container-m-1 .work-section label {
            display: none;
        }

        

        .container-wt .container-m-1 .work-section svg {
            display: block;
            margin-bottom: 1rem;
        }

        .container-wt .container-m-1 .work-section h4 {
            margin-bottom: .5rem;
        } 
}

    @media (min-width: 1800px) {
        .container-wt .container-m-1{
            
                -webkit-column-gap: 3rem;
            
                   -moz-column-gap: 3rem;
            
                        column-gap: 3rem;
            
        }
    }

    .container-gd {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        background: var(--dark-color-1);
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        padding-bottom: 3rem;
        width: 100%;
    }
        .container-gd .container-m-1 {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }

        .container-gd .container-m-1 .header {
                text-align: center;
                padding: 1.5rem 2rem 0;
                color: white;
        }
        .container-gd .container-m-1 .header h2 {
                    margin-bottom: .5rem;
                }

                .container-gd .container-m-1 .header .vr {
                    margin: 2rem auto;

                }

        .container-gd .tab-bar {
            width: 100%;
            max-width: 1200px;
        }
        .container-gd .tab-bar .media-scroller {
                
                display: -webkit-box;
                
                display: -ms-flexbox;
                
                display: flex;
                margin: 0 1rem;
                max-width: -webkit-fit-content;
                max-width: -moz-fit-content;
                max-width: fit-content;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                    -ms-flex-direction: row;
                        flex-direction: row;
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                overscroll-behavior-inline: contain;
                
                position: relative;
        }
        .container-gd .tab-bar .media-scroller .tab {
                    display: -webkit-inline-box;
                    display: -ms-inline-flexbox;
                    display: inline-flex;
                    white-space: nowrap;
                    -webkit-column-gap: 2rem;
                       -moz-column-gap: 2rem;
                            column-gap: 2rem;
                    overflow-x: scroll;
                    max-width: 1200px;
                    -webkit-user-select: none;
                       -moz-user-select: none;
                        -ms-user-select: none;
                            user-select: none;
                    padding: 1rem 1rem;
                    cursor: grab;
        }

        
        .container-gd .tab-bar .media-scroller .tab.dragging .element{
            pointer-events: none;
            cursor: grab;
        }
        .container-gd .tab-bar .media-scroller .tab .left-btn, .right-btn {
                        fill: white;
                        position: absolute;
                        cursor: pointer;
                        width: 4rem;
                        background: rgba(129, 129, 129, 0.397);
                        border-radius: 50%;
                        backdrop-filter: blur(5px);
                        -webkit-backdrop-filter: blur(5px);
                        display: none;
                        -webkit-transform: translateY(-50%);
                            -ms-transform: translateY(-50%);
                                transform: translateY(-50%);
                        top: 50%; 
                        -webkit-transition: .3s ease-in-out; 
                        -o-transition: .3s ease-in-out; 
                        transition: .3s ease-in-out;
                    }
                    
                        
                        
                    
                    .container-gd .tab-bar .media-scroller .tab .left-btn {
                        left: 0;
                         
                        display: -webkit-box;
                         
                        display: -ms-flexbox;
                         
                        display: flex;
                        opacity: 0;
                        visibility: hidden;
                        
                        
                    }
                    .container-gd .tab-bar .media-scroller .tab .left-bg {
                        position: absolute;
                        left: -1rem;
                        width: 2rem;
                        height: 100%;
                        background: -webkit-gradient(linear, right top, left top, from(transparent), color-stop(50%, var(--dark-color-1)));
                        background: -o-linear-gradient(right, transparent 0%, var(--dark-color-1) 50%);
                        background: linear-gradient(to left, transparent 0%, var(--dark-color-1) 50%);
                    }
                    .container-gd .tab-bar .media-scroller .tab .right-btn {
                        right: 0;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        opacity: 0;
                        visibility: hidden;
                    }
                    .container-gd .tab-bar .media-scroller .tab .right-btn svg {
                            -webkit-transform: translate(-2rem, -25%);
                                -ms-transform: translate(-2rem, -25%);
                                    transform: translate(-2rem, -25%);
                        }
                    

                    .container-gd .tab-bar .media-scroller .tab .right-bg {
                        position: absolute;
                        right: -1rem;
                        width: 2rem;
                        height: 100%;
                        background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, var(--dark-color-1)));
                        background: -o-linear-gradient(left, transparent 0%, var(--dark-color-1) 50%);
                        background: linear-gradient(to right, transparent 0%, var(--dark-color-1) 50%);
                    }

                    .container-gd .tab-bar .media-scroller .tab .left-btn:hover {
                        background: rgba(129, 129, 129, 0.726);
                        scale: 1.05;
                    }

                    .container-gd .tab-bar .media-scroller .tab .right-btn:hover {
                        background: rgba(129, 129, 129, 0.726);
                        scale: 1.05;
                    }

                    .container-gd .tab-bar .media-scroller .tab .element {
                        scroll-snap-align: start;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        position: relative;
                        -webkit-box-orient: vertical;
                        -webkit-box-direction: normal;
                            -ms-flex-direction: column;
                                flex-direction: column;
                        -webkit-user-select: none;
                           -moz-user-select: none;
                            -ms-user-select: none;
                                user-select: none;
                        text-decoration: none;
                        min-width: 100%;
                        
                        border-radius: 2rem;
                        cursor: pointer;
                        background: var(--dark-color-2);
                        overflow: hidden;
                        color: white;
                        -webkit-transition: .2s ease-in-out;
                        -o-transition: .2s ease-in-out;
                        transition: .2s ease-in-out;
                        -webkit-user-drag: none;
                    }

                    

                    .container-gd .tab-bar .media-scroller .tab .element img {
                            aspect-ratio: 14/9;
                            width: 100%;
                            -webkit-user-select: none;
                               -moz-user-select: none;
                                -ms-user-select: none;
                                    user-select: none;
                            -o-object-fit: cover;
                               object-fit: cover;
                            -webkit-user-drag: none;
                        }
                    
                    .container-gd .tab-bar .media-scroller .tab .element .date {
                            position: absolute;
                            background: var(--dark-color-2);
                            border-radius: 2rem;
                            padding: 10px;
                            -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.226);
                                    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.226);
                            top: 5%;
                            left: 3%;
                        }
                    
                    .container-gd .tab-bar .media-scroller .tab .element .article {
                            white-space: normal;
                            
                            margin: 1rem 1.5rem;
                    }
                    .container-gd .tab-bar .media-scroller .tab .element .article .vr {
                                color: white !important; 
                                opacity: 20%; 
                            }
                    .container-gd .tab-bar .media-scroller .tab .element .article p {
                                padding: 5px 0px;
                            }
                        
                    

                    .container-gd .tab-bar .media-scroller .tab .element:hover {
                        -webkit-box-shadow: rgba(255, 255, 255, 0.45) 0px 0px 20px 0px;
                                box-shadow: rgba(255, 255, 255, 0.45) 0px 0px 20px 0px;
                        -webkit-transition: .15s ease-in;
                        -o-transition: .15s ease-in;
                        transition: .15s ease-in;
                    }
                
                    .container-gd .tab-bar .media-scroller .tab .element.disabled:hover {
                        box-shadow: none;
                        cursor: default;
                    }
               

                .container-gd .tab-bar .media-scroller .tab::-webkit-scrollbar {
                    display: none;
                }
            
            & .container-gd .tab-bar .media-scroller .snaps-inline {
                -ms-scroll-snap-type: inline mandatory;
                    scroll-snap-type: inline mandatory;
                scroll-padding-inline-start: 1rem;
            }

        
@media (min-width:800px) {
            
    .container-gd .tab-bar .media-scroller .tab .element{
                        min-width: 48%;
                    }
    }


@media (min-width:1000px) {
            
    .container-gd .tab-bar .media-scroller .tab .element{

                        min-width: 48.3%;
                    }
                }


@media (min-width:1200px) {
    .container-gd .tab-bar {
                max-width: 1630px;
            }
            .container-gd .tab-bar .media-scroller .tab{
                        max-width: 1630px;
            }
            .container-gd .tab-bar .media-scroller .tab .element {
                            min-width: calc(32% - 0.5vw);
                        }

                        
                    }

@media (min-width:1200px) {

    .container-gd .tab-bar .media-scroller .tab .element{
                        

        min-width: calc(32% - 0.3vw);
                        
                    }
     }


@media (min-width:1630px) {

    .container-gd .tab-bar .media-scroller .tab .left-btn{
                        
        width: 5rem;
        left: -1.5rem
    }  

    .container-gd .tab-bar .media-scroller .tab .right-btn {
                            right: -1.5rem;
                            width: 5rem;
                        }

    .container-gd .tab-bar .media-scroller .tab .element {
            min-width: calc(32% - 1px);
        }
}

    

.sector {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background: var(--bg-color-primary);

    position: sticky;
    padding-top: 3rem;
}
.sector .container-wt-2 {
        display: -ms-grid;
        display: grid;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding: 2rem 2rem;
        
        max-width: 1900px;

}
.sector .container-wt-2 .header {
            text-align: center;
            margin: 0 0 2rem;
            -ms-grid-row: 1;
            grid-row: 1/1;
            -ms-grid-column: 1;
            -ms-grid-column-span: 2;
            grid-column: 1/3;
        }
.sector .container-wt-2 .column-1 {
            -ms-grid-row: 2;
            grid-row: 2/2;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            
        }
        
.sector .container-wt-2 .column-2 {
            -ms-grid-row: 3;
            grid-row: 3/3;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            
        }
        .sector .container-wt-2 .vr {
            margin: 1.5rem auto;
            opacity: 30%;
        }
        
        .sector .container-wt-2 .service {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            gap: 0.5rem;
            padding: 0rem 0rem .5rem;
        }
            .sector .container-wt-2 .service svg {
                width: 28px;
                height: 28px;
            }

            .sector .container-wt-2 .service a {

                text-decoration: none;
                cursor: pointer;
                -webkit-transition: .3s ease-in;
                -o-transition: .3s ease-in;
                transition: .3s ease-in;
            }

            .sector .container-wt-2 .service .first:hover {
                text-shadow: rgb(39, 255, 85 ) 0 0 10px;
                
            }

            .sector .container-wt-2 .service .second:hover {
                text-shadow: rgb(97, 255, 250) 0 0 10px;
                
            }

            .sector .container-wt-2 .service .third:hover {
                text-shadow: rgb(245, 97, 255) 0 0 10px;
                
            }

            .sector .container-wt-2 .service .fourth:hover {
                text-shadow: rgb(255, 219, 41) 0 0 10px;
                
            }


@media (min-width: 1300px) {
    .sector .container-wt-2 {

       
        grid-auto-columns: 50% 50%;
        padding-top: 7rem;
    }
    .sector .container-wt-2 .vr {
                display: none;
            }

            .sector .container-wt-2 .header {
                margin-bottom: 3rem;
                -ms-grid-row: 1;
                grid-row: 1/1;
            }
            .sector .container-wt-2 .column-1 {
                -ms-grid-row: 2;
                grid-row: 2/2;
                -ms-grid-column: 1;
                grid-column: 1/1;
                margin: 0rem 1.5rem;
            }

            .sector .container-wt-2 .column-2 {
                -ms-grid-row: 2;
                grid-row: 2/2;
                -ms-grid-column: 2;
                grid-column: 2/2;
                margin: 0rem 1.5rem;
            }

            .sector .container-wt-2 .container-m-1 {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
                height: 10rem;
            }

            .sector .container-wt-2 .service {
                gap: 0.7rem;
            }
                .sector .container-wt-2 .service svg {
                    width: 35px;
                    height: 35px;
                }
}



#sell-items-active, #form-active {
    display: none;
}

#overlay-2 {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    visibility: hidden;
    -webkit-backdrop-filter: brightness(100%);
    backdrop-filter: brightness(100%);
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#sell-items-active:checked ~ * {
    & .sell-items {
        visibility: visible;
        opacity: 100%;
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0);
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

}

#sell-items-active:checked ~ #overlay-2 {
    visibility: visible;
    -webkit-backdrop-filter: brightness(50%) blur(3px);
    backdrop-filter: brightness(50%) blur(3px);
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#overlay-3 {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    visibility: hidden;
    opacity: 0%;
    -webkit-backdrop-filter: brightness(100%);
    backdrop-filter: brightness(100%);
    -webkit-backdrop-filter: brightness(50%) blur(3px);
    backdrop-filter: brightness(50%) blur(3px);
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}



.event {
    background: var(--bg-color-primary);
    position: sticky;
    padding-top: 8rem;
    
}
.event__header {
    width: fit-content;
    margin-inline: auto;
    padding-bottom: 1.5rem;
}

.event__container {
    position: relative;
    margin-inline: auto;
}

.event__list {
    display: flex;
    overflow-x: scroll;
    align-items: stretch;
    row-gap: 1.5rem;
    column-gap: 1.5rem;
    width: unset;
    margin-inline: auto;
    scroll-behavior: auto;
    padding: 1.5rem;

}

@media (min-width: 1000px) {
    .event__container {
        width: fit-content;
    }
}

.event__list::-webkit-scrollbar {
    display: none;
}

.event__list.active {
    cursor: grabbing ;
}

.controls {

    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 0;
    top:0;
    bottom: 0;;
    right: 0;
    display: flex;
    z-index: 4;
    pointer-events: none;
}
.controls__btn {
    background: var(--bg-color-secondary-10);
    backdrop-filter: blur(10px);
    display: flex;
    border-radius: .5rem;
    padding: .5rem;
    pointer-events: none;
    margin-inline: .5rem;
    
    transition: .15s linear;
    cursor: default;
}
.controls__btn svg {
    width: 1.5rem;
    fill: var(--border-color-20);
    transition: .15s linear;
    
}


.controls__btn.active {
    background: var(--bg-color-secondary-60);
    pointer-events: all;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
}

.controls__btn.active svg {
    fill: var(--border-color-60);
}
.controls__btn.active:hover {
    background: var(--bg-color-primary);
}

.controls__btn.active:hover svg {
    fill: var(--border-color-primary);
}

.controls__left {
}
.controls__right {
}
.active {
}

.event__element {
    background: var(--bg-color-secondary);
    overflow: hidden;
    border-radius: .5rem;
    max-width: 400px;
    flex: 0 0 100%; 
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-drag: none;
    padding-bottom: 1rem;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
    transform: translateY(0%);
    transition: transform .3s cubic-bezier(.28,-0.03,0,.99), box-shadow .2s cubic-bezier(.28,-0.03,0,.99);

}

.event__element:hover {
    box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 20px;
    transform: translateY(-1%);
}

.element__image {
    position: relative;

}
.element__image-container {
    position: absolute;
    margin: .5rem;
    display: flex;
    align-items: center;
}
.element__image-date {

    background: var(--bg-color-secondary);
    border-radius: .5rem;
    padding: .5rem;

}
.element__image-timer {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    
    border-radius: .2rem;
}

.timer {
    display: flex;
    background: var(--bg-color-secondary);
    padding: .2rem .5rem;
    column-gap: .3rem;
    visibility: hidden;
    opacity: 0;
    transition: .3s ease-in-out;
}
.timer.active {
    visibility: visible;
    opacity: 1;
}
.timer__status {
}
.timer__time {
}
.element__image-url {
    aspect-ratio: 5/3;
    width: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}
.element__name {
    padding: .5rem 1rem;
}
.element__description {
    padding-inline: 1rem;
    height: 100%;
}
.element__utils {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.element__utils-button {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    padding: .5rem;
    border-radius: .5rem;
    background: var(--bg-color-secondary-active);
    margin: 1rem 1rem .5rem 1rem;
}
.delete-button {
    fill: var(--accent-color-80);
}
.element__utils-svg {
    width: 1.2rem;
    
}
.edit-button {
    fill: var(--border-color-80);
}

.event__create {
}
.event__create-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--border-color-80);
    max-width: 600px;
    margin-inline: auto;
    border-radius: .5rem;
    padding: .5rem 1.5rem;
    column-gap: .5rem;
}
.event__create-svg {
    width: 1.5rem;
    fill: var(--bg-color-80);
}
.event__create-text {
    color: var(--bg-color-80);
}