.features{
    background: #000;
    overflow:hidden;
}
.features *, .features{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #FFF;
}
html{
    scroll-behavior: smooth;
    scroll-padding-top: min(6.94vw, 111.04px);
}
button{
    appearance: none;
    border: none;
    outline: none;
    background:none;
}


/* Index */
.features-index{
    padding: min(7.43vw, 118.88px) 0 min(7.5vw, 120px);
    position: relative;
}
.index-gradient1{
    position: absolute;
    top: min(22.29vw, 356.64px);
    left: 52%;
    width: min(76.23vw, 1219.68px);
    height: min(46.43vw, 46.43vw);
    transform: rotate(34.477deg) translateX(-50%);
    border-radius: min(76.23vw, 1219.68px);
    background: radial-gradient(50% 50% at 50% 50%, #261788 0%, rgba(38, 23, 136, 0.00) 100%);
    filter: blur(min(6.94vw, 111.04px));
    z-index: 0;
    user-select: none;
    pointer-events: none;
}
.index-gradient2{
    position: absolute;
    top: min(12.57vw, 201.12px);
    left: 82%;
    width: min(70.83vw, 1133.28px);
    height: min(52.78vw, 844.48px);
    transform: rotate(34.477deg) translateX(-50%);
    border-radius: min(70.83vw, 1133.28px);
    background: radial-gradient(50% 50% at 50% 50%, #261788 0%, rgba(38, 23, 136, 0.00) 100%);
    filter: blur(min(6.94vw, 111.04px));
    z-index: 0;
    user-select: none;
    pointer-events: none;
}
.features-index-wrapper{
    position: relative;
    z-index: 1;
    width: min(86.67vw, 1386.72px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.features-index-heading{
    font-size: min(4.17vw, 66.72px);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: max(-0.02vw, -0.32px);
}
.features-index-descr{
    margin-top: min(1.11vw, 17.76px);
    opacity: .8;
    font-size: min(1.67vw, 26.72px);
    font-weight: 450;
    line-height: 110%;
    letter-spacing: min(0.15px, 0.16px);
}
.features-index-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: min(3.33vw, 53.28px);
    border-radius: min(0.69vw, 11.04px);
    width: min(17.5vw, 280px);
    height: min(3.89vw, 62.24px);
    background: #FFF;
    color: #000 !important;
    font-size: min(1.25vw, 20px);
    font-weight: 500;
    line-height: 133.333%;
    transition: 300ms all;
}
.features-index-btn:hover{
    background: #d9d9d9 !important;
}
.features-index-img{
    display: block;
    width: min(53.82vw, 861.12px);
    height: auto;
    margin-right: max(-6.67vw, -106.72px);
    margin-top: max(-2.99vw, -47.84px)
}

/* Cards */
.features-cards{
    position: relative;
}
.features-cards-wrapper{
    width: min(86.11vw, 1377.76px);
    margin: 0 auto;
}
.features-card{
    width: 100%;
    max-height: min(25vw, 400px);
    border-radius: min(3.47vw, 55.52px);
    background-color: #18111B;
    overflow: hidden;
    box-shadow:none;
    transition: box-shadow 300ms, transform 300ms;
    position: relative;
}

.features-card:not(.show){
    transform: scale(0.97);
}
.features-card:not(.show):before{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.42);
    z-index: 11;
    opacity: 1;
    transition: 300ms opacity;
    pointer-events: none;
    user-select: none;
}
.features-card.active:not(.show):before{
    opacity: 0;
}
.features-card:not(.show).active{
    opacity: 1;
    transform: scale(1);
}
.features-card:not(:first-child){
    margin-top: min(1.39vw, 22.24px);
}
.feature-main{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 min(5.56vw, 88.96px) 0 min(3.47vw, 55.52px);
    opacity: 1;
    z-index: 10;
    transform:translateY(0%);
    transition: 800ms all;
    cursor: pointer;

    position: absolute;
    top: 0;
    left: 0;
}
.show .feature-main{
    opacity: 0;
    user-select: none;
    pointer-events: none;
}
.feature-main-l{
    align-self: center;
    width: min(35.42vw, 566.72px);
}
.feature-heading-h3{
    font-size: min(2.64vw, 42.24px);
    font-weight: 500;
    line-height: 120%;
}
.feature-text{
    margin-top: min(1.39vw, 22.24px);
    font-size: min(1.53vw, 24.48px);
    font-weight: 450;
    line-height: 130%;
    letter-spacing: min(0.03vw, 0.48px);
}
.feature-text + .feature-text{
    margin-top: min(0.56vw, 8.96px) !important;
}
.feature-notes{
    margin-top: min(1.04vw, 16.64px);
    color: rgba(255, 255, 255, 0.60);
    font-size: min(0.97vw, 15.52px);
    font-weight: 450;
    line-height: 130%;
    letter-spacing: min(0.03vw, 0.48px);
}
.feature-dev-img{
    display: block;
    width: min(33.82vw, 541.12px);
    height: auto;
    margin-top: min(1.6vw, 25.6px);
}
.feature-more{
    color: #22C3B1;
    font-size: min(1.53vw, 24.48px);
    font-weight: 450;
    line-height: 130%;
    letter-spacing: min(0.03vw, 0.48px);
    text-decoration: underline;
    text-underline-offset: min(0.21vw, 3.36px);
    margin-top: min(2.78vw, 44.48px);
    transition: 300ms all;
}
.feature-more:hover{
    color: #6fd8cc;
}
.feature-extended{
    position: relative;
    transition: 500ms all;
    border-radius: min(3.47vw, 55.52px);
    overflow: hidden;
}
.feature-extended-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.feature-extended-content{
    position: relative;
    z-index: 2;
    padding: min(6.25vw, 100px) 0 min(2.78vw, 44.48px) 0;
}
.feature-extended-h2{
    text-align: center;
    font-size: min(3.33vw, 53.28px);
    font-weight: 500;
    line-height: 120%;
}
.feature-extended-block{
    display: flex;
    justify-content: space-between;
    margin-top: min(7.71vw, 123.36px);
    position: relative;
    padding: 0 min(3.47vw, 55.52px);
}
.feature-ext-img{
    display: block;
    width: min(40.87vw, 653.92px);
    height: auto;
    margin-right: max(-3.47vw, -55.52px);
    position: relative;
    z-index: 1;
}
.feature-extended-block--rev{
    margin-right: 0;
    margin-left: max(-3.47vw, -55.52px);
}
.feature-extended-block-l{
    align-self: center;
    width: min(37.15vw, 594.4px);
}
.feature-extended-subtitle{
    font-size: min(2.78vw, 44.48px);
    font-weight: 500;
    line-height: 110%;
    margin-top: min(2.08vw, 33.28px);
}
.feature-extended-block .feature-text {
    margin-top: min(1.04vw, 16.64px);
}
.feature-extended-block-r{
    position: relative;
    display: flex;
}
.feature-less{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(0.83vw, 13.28px);
    font-size: min(1.53vw, 24.48px);
    font-weight: 450;
    line-height: 130%;
    letter-spacing: min(0.03vw, 0.48px);
    margin-top: min(7.29vw, 116.64px);
    position: relative;
    z-index: 1;
    transition: 300ms opacity;
}
.feature-less svg{
    width: min(1.6vw, 25.6px);
    height: min(0.9vw, 14.4px);
}
.feature-less:hover{
    opacity: 0.75;
}




/* Card 1 */
.feature-devices .feature-main-l{
    width: min(38.19vw, 611.04px);
}
.dev-number{
    margin-top: min(10.56vw, 168.96px);
}
.dev-history{
    margin-top: min(10.42vw, 166.72px);
}
.dev-number .feature-ext-img{
    width: min(36.08vw, 577.28px);
}
.dev-number .feature-extended-subtitle{
    margin-top: 0;
}
.dev-history .feature-ext-img{
    width: min(42.29vw, 676.64px);
}
.dev-history .feature-extended-block-l{
    align-self: start;
    margin-top: min(0.83vw, 13.28px);    
}


/* Card 2 */

.record-programm{
    margin-top: min(3.75vw, 60px);
}
.record-nav{
    margin-top: min(11.67vw, 186.72px);
    margin-bottom: min(8.4vw, 134.4px);
}
.record-panel .feature-ext-img{
    width: min(37.15vw, 594.4px);
    margin-left: min(2.22vw, 35.52px);
    margin-top: max(-3.4vw, -54.4px);
}
.record-programm .feature-ext-img{
    width: min(34.06vw, 544.96px);
    margin-right: max(-0.42vw, -6.72px);
}
.record-nav .feature-ext-img{
    width: min(32.36vw, 517.76px);
}
.record-panel .feature-extended-block-l{
    align-self: start;
    margin-top: max(-1.32vw, -21.12px);
}
.record-programm .feature-extended-subtitle{
    margin-top: 0;
}
.record-nav .feature-extended-subtitle{
    margin-top: min(2.99vw, 47.84px);
}
.feature-record .feature-extended .feature-text{
    margin-top: min(1.39vw, 22.24px);
}


/* Card 3 */
.feature-favorites .feature-main-l{
    width: min(38.89vw, 622.24px);
}
.feature-favorites-img{
    width: min(29.35vw, 469.6px);
    height: auto;
    margin-right: min(5.9vw, 94.4px);
    margin-top: min(1.25vw, 20px);
}
.favorites-movies{
    margin-top: min(1.67vw, 26.72px);
}
.favorites-movies .feature-ext-img{
    width: min(38.33vw, 613.28px);
}
.favorites-movies .feature-extended-block-l{
    align-self: start;
    margin-top: min(8.89vw, 142.24px);
}
.feature-favorites .feature-extended .feature-text{
    margin-top: min(1.39vw, 22.24px);
}
.favorites-watch{
    margin-top: min(6.32vw, 101.12px);
}
.favorites-watch .feature-extended-block-l{
    margin-top: max(-0.69vw, -11.04px);
}
.favorites-filters{
    margin-top: min(11.11vw, 177.76px);
    margin-bottom: min(9.17vw, 146.72px);
}
.favorites-filters .feature-ext-img {
    width: min(35.63vw, 570.08px);
}
.favorites-filters .feature-extended-block-l{
    align-self: start;
    margin-top: min(4.86vw, 77.76px);
}

/* Card 4 */

.feature-recomendation .feature-main-r{
    display: flex;
    align-items: center;
}
.feature-recomendation .feature-dev-img{
    width: min(36.18vw, 578.88px);
    margin-top: 0;
}
.feature-recomendation .feature-main-l {
    width: min(36.88vw, 590.08px);
    margin-right: max(-1.46vw, -23.36px);
}
.recomendations-panel {
    margin-top: min(6.6vw, 105.6px);
    margin-bottom: max(-0.97vw, -15.52px);
}
.recomendations-panel .feature-ext-img{
    width: min(37.75vw, 604px);
    margin-left: min(3.96vw, 63.36px);
}
.recomendations-panel  .feature-extended-block-r{
    align-items: start;
}
.recomendations-panel .feature-extended-block-l {
    width: min(33.89vw, 542.24px);
    margin-top: max(-2.78vw, -44.48px);
}
.feature-list{
    margin-top: min(2.08vw, 33.28px);
    list-style-type: none;
    padding: 0;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    gap: min(0.69vw, 11.04px);
}
.feature-list li{
    display: flex;
    align-items: center;
    gap: min(0.42vw, 6.72px);
    font-size: min(1.53vw, 24.48px);
    font-weight: 450;
    line-height: 130%;
    letter-spacing: min(0.03vw, 0.48px);
}
.feature-list-icon{
    width: min(1.81vw, 28.96px);
    height: min(1.81vw, 28.96px);
}


/* Card 5 */

.feature-m-playlist .feature-dev-img{
    width: min(39.22vw, 627.52px);
    margin-top: min(8.19vw, 131.04px);
    margin-right: max(-3.75vw, -60px);
}
.mchannels-block{
    margin-top: min(3.13vw, 50.08px);
    margin-bottom: max(-0.69vw, -11.04px)
}
.mchannels-block .feature-ext-img{
    width: min(38.68vw, 618.88px);
}
.mchannels-block .feature-extended-block-l{
    align-self: start;
    margin-top: min(1.74vw, 27.84px);
}
.feature-list-with-dots{
    margin-top: min(1.39vw, 22.24px);
    gap: 0;
    padding-left: min(0.76vw, 12.16px);
}
.feature-list-with-dots li:before{
    content: '';
    display: block;
    width: min(0.42vw, 6.72px);
    height: min(0.42vw, 6.72px);
    background-color: #fff;
    border-radius: 50%;
    margin-right: min(0.69vw, 11.04px);
}

/* Card 6 */

.feature-parent .feature-dev-img{
    margin-top: min(3.19vw, 51.04px);
    width: min(17.78vw, 284.48px);
    margin-left: min(7.01vw, 112.16px);
}
.feature-parent-block{
    margin-top: min(7.22vw, 115.52px);
    margin-bottom: min(8.82vw, 141.12px);
}
.feature-parent-block .feature-ext-img{
    width: min(17.67vw, 282.72px);
    margin-left: min(10.42vw, 166.72px);
}
.feature-parent-block  .feature-extended-block-l{
    align-self: start;
    margin-top: 0;
}
.feature-parent-block .feature-text {
    line-height: 120%;
    letter-spacing: 0;
}
.feature-parent-block .feature-text + .feature-text{
    margin-top: min(1.74vw, 27.84px) !important;
}


/* Card 7 */

.feature-settings .feature-favorites-img{ 
    width: min(24.31vw, 388.96px);
    margin-top: min(2.43vw, 38.88px);
    margin-right: min(6.94vw, 111.04px);
}
.feature-settings .feature-extended-block .feature-text{
    margin-top: min(1.39vw, 22.24px);
}
.settings-audio{
    margin-top: min(6.53vw, 104.48px);
    justify-content: flex-start;
}
.settings-audio .feature-extended-block{
    justify-content: flex-start;
}
.settings-audio .feature-extended-block-l{
    align-self: start;
    margin-top: min(1.74vw, 27.84px);
}
.settings-audio .feature-ext-img{
    width: min(24.31vw, 388.96px);
    margin-left: max(-0.63vw, -10.08px);
}
.settings-quality{
    margin-top: min(18.4vw, 294.4px);
}
.settings-quality .feature-ext-img{
    width: min(20.49vw, 327.84px);
    margin-left: min(8.47vw, 135.52px);
}
.settings-quality .feature-extended-block-l{
    align-self: start;
}
.settings-speed{
    margin-top: min(14.86vw, 237.76px);
    margin-bottom: max(-3.06vw, -48.96px);
}
.settings-speed .feature-ext-img{
    margin-right: max(-3.06vw, -48.96px);
    width: min(40.17vw, 642.72px);
}
.settings-speed .feature-extended-subtitle{
    margin-top: min(0.9vw, 14.4px);
}


/* Card 8 */
.feature-profiles  .feature-main-r {
    display: flex;
    align-items: center;
}
.feature-profiles .feature-favorites-img{
    width: min(37.74vw, 603.84px);
    margin-left: max(-3.47vw, -55.52px);
    margin-top: 0;
}
.feature-profiles .feature-text{
    margin-top: min(1.39vw, 22.24px);
}
.profiles-universe{
    margin-top: min(2.71vw, 43.36px);
}
.profiles-universe .feature-ext-img{
    width: min(36.46vw, 583.36px);
    margin-left: min(0.21vw, 3.36px);
}
.profiles-universe .feature-extended-block-l{
    align-self: flex-start;
    margin-top: min(3.96vw, 63.36px);
}
.profiles-avatars{
    margin-top: min(0.9vw, 14.4px);
}
.profiles-avatars .feature-ext-img{
    width: min(33.82vw, 541.12px);
    margin-right: min(3.13vw, 50.08px);
}
.profiles-avatars .feature-extended-block-l{
    align-self: flex-start;
    margin-top: min(9.93vw, 158.88px);
}
.profiles-default{
    margin-top: min(8.68vw, 138.88px);
    margin-left: min(0.21vw, 3.36px);
    margin-bottom: max(-4.51vw, -72.16px);
}
.profiles-default .feature-ext-img{
    width: min(35vw, 560px);
}
.profiles-default .feature-extended-block-l{
    align-self: flex-start;
    margin-top: max(-0.97vw, -15.52px);
}



/* Card 9 */
.feature-offline .feature-dev-img {
    width: min(46.18vw, 738.88px);
    margin-right: max(-4.31vw, -68.96px);
    margin-top: min(0.14vw, 2.24px);
}
.offline-block {
    margin-top: min(6.53vw, 104.48px);
    margin-bottom: max(-11.32vw, -181.12px);
}
.offline-block .feature-extended-block-l{
    align-self: start;
    margin-top: max(-1.39vw, -22.24px);
}
.offline-block .feature-ext-img{
    width: min(45.59vw, 729.44px);
    margin-left: max(-3.47vw, -55.52px);
}
.offline-block .feature-list{
    margin-top: min(1.53vw, 24.48px);
    margin-left: min(0.49vw, 7.84px); 
    gap: 0; 
}
.offline-block .feature-list li{
    align-items: flex-start;
}


/* Card 10 */
.feature-discounts .feature-dev-img{
    width: min(20.83vw, 333.28px);
    margin-top: min(6.94vw, 111.04px);
    margin-left: min(10.9vw, 174.4px);
}
.discounts-block{
    margin-top: min(3.33vw, 53.28px);
}
.discounts-block .feature-extended-block-l{
    align-self: start;
    margin-top: min(4.03vw, 64.48px);
    width: auto;
}
.discounts-block .feature-ext-img{
    width: min(37.36vw, 597.76px);
    margin-right: max(-3.47vw, -55.52px);
    margin-top: max(-1.81vw, -28.96px);
}



/* Contacts */

.features-contacts{
    padding: min(4.17vw, 66.72px) 0 min(6.94vw, 111.04px);
}
.features-contacts-wrapper{
    width: min(78.47vw, 1255.52px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: min(8.19vw, 131.04px);
}
.features-contacts-heading{
    font-size: min(3.33vw, 53.28px);
    font-weight: 600;
    line-height: 120%;
}
.features-contacts-text{
    margin-top: min(0.9vw, 14.4px);
    font-size: min(1.53vw, 24.48px);
    font-weight: 450;
    line-height: 130%;
    letter-spacing: min(0.03vw, 0.48px);
}
.features-contacts-title{
    color: rgba(255, 255, 255, 0.60);
    font-size: min(1.25vw, 20px);
    font-weight: 600;
    line-height: 120%;
    text-transform: uppercase;
}
.features-contacts-links{
    margin-top: min(0.69vw, 11.04px);
    display: flex;
    flex-direction: column;
}
.features-contacts-row{
    font-size: min(1.94vw, 31.04px);
    font-weight: 450;
    line-height: 120%;
    color: #fff !important;
    transition: 300ms all;
}
.features-contacts-socials{
    display: flex;
    gap: min(1.39vw, 22.24px);
    margin-top: min(0.69vw, 11.04px);
}
.features-contacts-social{
    display: flex;
    transition: 300ms all;
}
.social-telegram img{
    width: min(10vw, 160px);
    height: min(2.5vw, 40px);
    display: block;
}
.features-contacts-row:hover, .features-contacts-social:hover{
    opacity: 0.75;
}