@font-face {
    font-family:"Right Grotesk" ;
    src: url(../font/RIGHTGROTESK-SPATIALBLACK.woff);
}
@font-face {
    font-family: "Futura PT";
    src: url(../font/FuturaPTDemi.woff);
}
@font-face {
    font-family: "Futura PT-BOLD";
    src: url(/font/FuturaPTBold.otf);
}
@font-face {
    font-family: "Futura PT-Medium";
    src: url(/font/FuturaPTMedium.otf);
}
@font-face {
    font-family: "Futura PT-Light";
    src: url(/font/FuturaPTLight.otf);
}
@font-face {
    font-family: "Futura PT-Book";
    src: url(/font/FuturaPTBook.otf);
}

/* * {
    outline: 4px solid green !important;
} */


*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
a {
 text-decoration: none;
}
ul,li,ol {
    list-style: none;
}
img {
    vertical-align: top;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: inherit;
    font-size: inherit;
}
html,body {
    height: 100%;
    line-height: 1;
    scroll-behavior: smooth;
}
body {
    font-size: 24px;
    background-color: #333230;

}


/* ----------------- */
.wrapper {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    /* max-width: 1920px;
    -webkit-box-flex: 1;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: start;
    -webkit-box-align: stretch;
    align-items: flex-start;
    align-items: stretch;
    justify-content: center; */
    align-items: center;
    justify-content: center;
}

/* ----------------- */

.main {
    flex: 1 1 auto;
}

[class*=__container] {
    max-width: 1658px;
    margin: 0 auto;
    padding: 0 15px;
    justify-content: center;
    align-content: center;
}
/* PC */
@media (max-width: 1658px) {
    [class*=__container] {
        max-width: 1500px;
    }
}
/* TABLE */
@media (max-width: 1449.98px) {
    [class*=__container] {
        max-width: 1400px;
    }
}
/* MOBILE */
@media (max-width: 767.98px) {
    [class*=__container] {
        max-width: none;
    }
}
/* MOBILE SMALL */
/* @media (max-width: 499.98px) {
    [class*=__container] {
        max-width: 320px;

    }
} */

/* ERROR */
/* .ERROR__block-text {
    display: flex;
    flex-direction: column;

}
.block-text {
}
.block-text__title-2 {
}
.block-text__title-1 {
}
.block-text__text {
} */


/* ////////////////// */

/* FIXED HEADER */
.header__fixed {
    position: fixed;
    width: 100%;
    max-width: 100%;
    max-height: 96px;
    top: 0px; left: 0;
    background-color: #fff;
    animation: header;
    animation-duration: .2s ;
}
.header__fixed .header__logo {
    position: absolute;
    top: 10px;
    left: 146px;
}
.header__fixed .header__button {
    position: absolute;
    right: 146px;
    top: -10px;
    width: 218px;
    height: 120px;
}
.header__fixed .header__button::after {
    display: none;
}
.header__fixed .header__menu {
    position: absolute;
    top: 10px;
}
@media (max-width: 1650.98px) {
    .header__fixed .header__logo {
        position: absolute;
        left: 20px;
    }
    .header__fixed .header__button {
        position: absolute;
        right: 20px;
        top: -15px;
    }
    .header__fixed .header__menu {
        position: absolute;
        top: 10px;
    }   
}
@media (max-width: 1400.98px) {
    .header__fixed .header__logo {
        position: absolute;
        left: 20px;
        top: 15px;
    }
    .header__fixed .header__button {
        position: absolute;
        right: 20px;
        top: -15px;
    }
    .header__fixed .header__menu {
        position: absolute;
        top: 15px;
    }   
}
@media (max-width: 1200.98px) {
    .header__fixed .header__menu {
        position: absolute;
        top: 20px;
    }   
}
@media (max-width: 1100.98px) {
    .header__fixed .header__logo {
        position: absolute;
        top: 0;
        left: 20px;
    }
    .header__fixed .header__button {
        position: absolute;
        right: 20px;
        top: -15;  
    }
    .header__fixed .header__menu {
        position: absolute;
        top: 0;
        left: 0;
    }   
    .header__fixed .menu__open {
        position: absolute;
        top: 25px;
        left: 30px;
    }
}

@keyframes header {
    0% {
        opacity: 0;
        top: -100px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}


/* ///////////////////////////////// */

.header {
    position: absolute;
    width: 100%;
    top: 0px; left: 0;
    z-index: 5000;
    background-image: url(/img/header.webp);
    background-repeat: no-repeat;
    background-position: center;
}
.header__container {
    display: flex;
    height: 264px;
    align-items: flex-start;
    padding-top: 50px;
}
@media (max-width: 660.98px) {
    .header__container {
        display: flex;
        height: 104px;
        align-items: flex-start;
        padding-top: 50px;
    }
}
.header__logo {
    background-image: url(img/Logo.svg);
    width: 282px;
    height: 85px;
}
.header__menu {
    flex: 1 1 auto;
}
.header__button {
    flex: 0 0 auto;
    background-image: url(img/donate_bg.webp);
    background-color: rgb(255,125,0);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    -webkit-mask-image: url(img/donate_bg.webp);
    mask-image: url(img/donate_bg.webp);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    mask-position: center;
    width: 282px;height:154px;
    transform: translate(3%,9%);
    transition: background-color 0.5s ease, color 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Right Grotesk";
    font-size: 32px;
    color: rgb(48,47,45);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.header__button:hover {
    background-color: rgb(48,47,45);
    color: rgb(255,125,0);
}

.menu {
    display: flex;
    /* justify-content: flex-end;
    padding: 0 135px 0 0 ; */
    justify-content: center; 
}

.menu__list {
    display: flex;
}
.menu__list .booble {
    margin: 0px 15px 0px 15px;
    transition: all .2s ;
    &:hover {
        transform: scale(1.1);
    }
}
.menu__link {
    font-family:"Futura PT";
    font-size: 24px;
    font-weight: 500;
    line-height: 3.2;
    color: #1C1616;
    transition: .5s;
    cursor: pointer;
    transform: none;
    display: inline-block;
    /* transition: all .2s ease-in-out; */
    /* &:hover {
        font-family: "Futura PT-BOLD";
    } */

}
.menu__lang {
    display: flex;
    width: 57px; height: 32px;
    align-items: center;
    transform: translate(25px ,25px);
}
.menu__lang .lang {
    background-image: url(img/fix/Rus-L.png);
    width: 44px; height: 24px;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all .3s ease;
}
.menu__lang .lang:hover {
    background-image: url(img/fix/Rus-B.png);
    width: 54px;
}
.lang:hover ~ .trig {
    transform: rotate(180deg);

}
.menu__lang .trig {
    background-image: url(img/triangle.webp);
    background-repeat: no-repeat;
    width: 12px;
    height: 11px;
    transition: .5s;
    top: 8px;
    right: 0;
    position: absolute;
}
.menu__lang a  {
    background-image: url(img/fix/En_L.png);
    width: 44px;
    height: 24px;
    background-repeat: no-repeat;
    transform: translate(5px ,10px);
    display: block;
    transition: all .5s;
}
.menu__lang ul {
    position:absolute;
    left: 0;
    top: 100%;
    display: none;
    padding: 0;
}
.menu__lang li:hover ul {
    display: block; 
}
/* .menu__lang ul:checked ~ .menu__lang li {
    display: block;
} */
@keyframes booble {
    0% {
        margin: 0px 15px 0px 15px;
    }
    20% {
        margin: 0px 20px 0px 20px;
    }
    40% {
        margin: 0px 18px 0px 18px;
    }
    60% {
        margin: 0px 20px 0px 20px;
    }
    80% {
        margin: 0 18px 0 18px ;
    }
    100% {
        margin: 0px 20px 0px 20px;
    }
}


/* ============================================================ */
/* Burger */

.close-icon-menu,
.icon-menu {
    display: none;
}
.lang__mobile {
    display: none;
}
#menu__toggle {
    display: none;
}
@media (max-width: 1400.98px) {
    .header__logo {
        background-image: url(img/fix/logo-fix.png);   
        width: 218px;
        height: 66px;
        background-repeat: no-repeat;
        display: block;
    }
    .header__button {
        margin-top: 0px;
        margin-right: 20px;
        width: 218px;
        height: 120px;
    }
    .header__button::after {
        display: none;
    }
    .menu__list {
        width: 700px;
    }
    .menu__link {
        font-size: 20px;
    }
    .menu__lang {
        scale: .8;
    }
}
@media (max-width: 1200.98px) {
    .header__logo {
        background-image: url(img/fix/logo-fix.png);   
        width: 218px;
        height: 66px;
        background-repeat: no-repeat;
        z-index: 2222222;
    }
    .header__button {
        margin-top: 0px;
        margin-right: 20px;
        width: 218px;
        height: 120px;
    }
    .menu__list {
        width: 615px;
        padding-left: 30px;
    }
    .menu__link {
        font-size: 18px;
    }
    .menu__lang {
        scale: .7;
    }
    .menu__list .booble {
        margin: 0px 10px;
        transition: 0.2s;
    }
}    
@media (max-width: 1100.98px) {
    .radio_engli,.radio_ru {
        display: none;
    }
    .lang__mobile label:hover {
 
        transition: 0.5s;
    }
    .lang__mobile span {
        font-family: "Right Grotesk";
        font-size: 32px;
        color: #6E6D68;    
        margin-left: 16px;
    } 


    .radio_engli:checked+label span {
        transition: 0.5s;
        color: #fffff7;
        transition: none;
        border: none;
    }
    .radio_ru:checked+label span {
        transition: 0.5s;
        color: #fffff7;
        transition: none;
        border: none; 
    }
    .lang__mobile {
        display: block;
        display: flex;
        margin: 0 10px;
        gap: 16px;
    }
    .header__logo {
        display: none;
    }
    .header__button {
        margin-top: 0px;
        margin-right: 20px;
        width: 218px;
        height: 120px;
    }
    .menu__list {
        width: 615px;
        padding-left: 30px;
    }
  
    .menu__lang {
        scale: .7;
    }
    .menu__list .booble {
        margin: 0px 10px;
        transition: 0.2s;
    }

/* ///////////// */
  .menu__open {
    background-image: url(img/Property\ 1=Mobile\ Menu\ Button.png);
    width: 48px;
    height: 48px;
    top: 90px;
    left: 30px;
    position: absolute;
    scale: 1.4;
    cursor: pointer;
  }
  .menu__close {
    background-image: url(img/Close.webp);
    width: 48px;
    height: 48px;
    top: 40px;
    left: 20px;
    position: absolute;
    cursor: pointer;
  }
  header .menu__list {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100%;
    margin: 0;
    padding-top: 120px;
    padding-right: 10px;
    list-style: none;
    background-color: #333230;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transition-duration: .25s;
    align-items: flex-end;
    opacity: 1;
    /* z-index: 2222; */
  }
  .menu__list.open {
    left: 0;
    opacity: 1;

  }
  .header .menu__link {
    font-family: "Right Grotesk";
    font-size: 32px;
    line-height: 29px;
    color: #FFFFF7;
    text-transform: uppercase;
  }
  .header .menu__item {
    display: block;
    padding: 0px 0px 32px 0px;
    text-decoration: none;
    transition-duration: .25s;
  }
} 
  
@media (max-width: 660.98px) {

    .header {
        background-image: url(img/mobile/Header.png);
        top: 0px;
        position: fixed;
        height: 96px;
    }
    .header__logo {
        background-image: url(img/fix/logo-fix.png);   
        width: 218px;
        height: 66px;
        background-repeat: no-repeat;
        z-index: 2222222;
        display: none;
    }
    .header__button {
        position: absolute;
        top: 26px;
        right: 20px;
        margin-top: 0px;
        margin-right: 0px;
        width: 124px;
        height: 68px;
        scale: 1;
        font-size: 20px;
    }
    .header__button::after {
        display: none;
    }
    .radio_engli,.radio_ru {
        display: none;
    }
    .lang__mobile label:hover {
 
        transition: 0.5s;
    }
    .lang__mobile span {
        font-family: "Right Grotesk";
        font-size: 32px;
        color: #6E6D68;    
    } 


    .radio_engli:checked+label span {
        transition: 0.5s;
        color: #fffff7;
        transition: none;
        border: none;
    }
    .radio_ru:checked+label span {
        transition: 0.5s;
        color: #fffff7;
        transition: none;
        border: none; 
    }
    .lang__mobile {
        display: block;
        display: flex;
        margin: 0 10px;
        gap: 16px;
    }
    .header__logo {
        display: none;
    }
    .menu__list {
        width: 615px;
        padding-left: 30px;
    }
  
    .menu__lang {
        scale: .7;
    }
    .menu__list .booble {
        margin: 0px 10px;
        transition: 0.2s;
    }

/* ///////////// */
  .menu__open {
    background-image: url(img/Property\ 1=Mobile\ Menu\ Button.png);
    width: 48px;
    height: 48px;
    top: 40px;
    left: 20px;
    position: absolute;
    scale: 1;
  }
  .menu__close {
    background-image: url(img/Property\ 1=Mobile\ Menu\ Button\ Close.png);
    width: 48px;
    height: 48px;
    top: 40px;
    left: 20px;
    position: absolute;
  }
  .header .menu__list {
    display: flex;
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    margin: 0;
    padding-top: 120px;
    list-style: none;
    background-color: #333230;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transition-duration: .25s;
    justify-items: end;
    z-index: 2222;
  }
  .menu__list.open {
    left: 0;
  }
  .header .menu__link {
    font-family: "Right Grotesk";
    font-size: 32px;
    line-height: 29px;
    color: #FFFFF7;
    text-transform: uppercase;
  }
  .header .menu__item {
    display: block;
    padding: 0px 0px 32px 0px;
    text-decoration: none;
    transition-duration: .25s;
  }
} 



/* ============================================================ BLOCK 1 */

.block-text__title-1 {
    font-family: "Right Grotesk";
    font-size: 40px;
    font-weight: 900;
    line-height: 32px;
    color: #FFECD1;
    width: 850px;
}
.block-text__title-2 {
    font-family: "Right Grotesk";
    font-size: 136px;
    font-weight: 900;
    line-height: 105px;
    color: #EF3054;
}
.welcome .block-text__title-2 {
    transform: translateY(-10px);
}
.welcome .block-text__title-2:not(:last-child) {
    margin: 0px 0px 44px 0px;
}
.block-text__text {
    font-family: "Futura PT";
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color:#FFECD1 ;
}
.welcome .block-text__text {
    color:#FFECD1 ;
}
.block-text__text:not(:last-child) {
    margin: 0px 0px 24px 0px;
}
.welcome__content .block-text__button {
    background-image: url(/img/button_bg.webp);
    background-color: rgb(255,125,0);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    -webkit-mask-image: url(/img/button_bg.webp);
    mask-image: url(/img/button_bg.webp);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 507px; height: 104px;
    position: absolute;
    transition: background-color 0.5s ease, color 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Right Grotesk";
    font-size: 32px;
    color: rgb(48,47,45);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.welcome__content .block-text__button:hover {
    background-color: rgb(48,47,45);
    color: rgb(255,125,0);
}
.welcome__bg-image {
    width: 1920px;
    transform: translate(0px,160px);
    overflow: hidden;
}
.welcome__bg {
    position: relative;
    animation: render10 20s ease-in-out infinite;
}
@keyframes render10 {
    0% {
        top: 0px; left: 0px;
    }

    50% {
        top: 0px; left: -3000px;
    }
    100% {
        top: 0px; left: 0px;
    }
}

.welcome {
    background-color: #333230;
    padding: 30px 0px 110px 10px;
    max-height: 1000px;
}
.welcome__bg-setka {
    transform: translate(0%, -75%);
}
.welcome__container {
    display: grid;
    grid-template-columns: repeat(16, 100px);
    grid-template-rows: repeat(6, 100px);
    transform: translate(-6px,-25px);
    z-index: 100;
    position: relative;
}

.welcome__content {
    grid-column: 1/7;
    z-index: 222;
}
.welcome__block-text {
    width: 650px;
}
.welcome__image {
    grid-column: 6;
    z-index: 2;
    transform: translate(0px,-30px);
}

@media (max-width: 1611.98px) {
    .welcome__content {
        grid-column: 2/7;
    }
}
@media (max-width: 1611.98px) {
    .welcome__content {
        grid-column: 3/8;
    }
    .welcome__image {
        scale: 80%;
        grid-column: 7;
        grid-row: 3;
    }
}
@media (max-width: 1240.98px) {
    .welcome__content {
        grid-column: 4/10;
    }
    .welcome__content .block-text__text {
        font-size: 20px;
    }
    .welcome__content .block-text__title-2 {
        font-size: 90px;
    }
    .welcome .block-text__title-2:not(:last-child) {
        margin: 0;
    }
    .welcome__content .block-text__title-1 {
        font-size: 30px;
    }
    .welcome__image {
        grid-column: 6;
        grid-row: 5;
        transform: translateX(30px);
        scale: 70%;
    }
    .welcome__bg-setka {
        transform: translate(0%, -75%);
        scale: 80%;
    }
}
@media (max-width: 990.98px) {
    .welcome__content {
        grid-column: 6/12;
        
    }
    .welcome__image {
        grid-column: 6;
        grid-row: 6;
        scale: 60%;
    }
}
@media (max-width: 660.98px) {
    .welcome__content .block-text__button {
        width: 234px;
        height: 56px;
        font-size: 14px;
        letter-spacing: 0px;
        background-image: none;
        background-blend-mode: normal;
        background-color: rgb(255,125,0);
        -webkit-mask-image: url(/img/button_bg.webp);
        mask-image: url(/img/button_bg.webp);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
    .welcome__content .block-text__button::after {
        display: none;
    }

    .welcome__content .block-text__text {
        font-size: 16px;
        line-height: 24px;
        width: 264px;
    }
    .welcome__content .block-text__title-1 {
        font-size: 16px;
        line-height: 32px;
    }
    .welcome__content .block-text__title-2 {
        font-size: 48px;
        line-height: 40px;
        width: 320px;
    }
    .welcome__content {
        grid-column: 7/12;
        margin-left: 60px;
    }
    .welcome__image {
        grid-column: 6;
        grid-row: 4;
        scale: 50%;
    }
    .welcome__image {
        grid-column: 6;
        grid-row: 5;
        scale: 50%;
        margin-left: 0px;
    }
    .welcome__bg-setka {
        transform: translate(0%, -190%);
        scale: 40%;
    }
    .welcome__bg-image {
        transform: translate(0px,250px);
        scale: 50%;
    }
    .welcome {
        padding: 0px 0px 0px 0px;
    }
}
@media (max-width: 450.98px) {
    .welcome__image {
        grid-column: 7;
        grid-row: 5;
        scale: 30%;
        margin-left: 10px;
        margin-top: -100px;
    }
    .welcome__bg-setka {
        transform: translate(0%, -180%);
        scale: 40%;
    }
    .welcome {
        height: 880px;
    }
}

/* ====================================================== BLOCK 2*/




.wdp {
    background-color: #333230;
    padding: 285px 0px 0px 0px;
    max-height: 100%;
}
.wdp__container {
    display: flex;
    flex-direction: column;
}
.wdp-image {
    display: flex;
    align-items: center;
}
.gta-mta {
    display: flex;
    padding-bottom: 45px;
}
.what {
    position: absolute;
    transform: translate(157%, -21%);
}
.gte {
    position: absolute;
    transform: translate(193% , -4%);
}
.sky {
    position: absolute;
    transform: translate(86% , 0 );
}
.wdp .block-text__title-2 {
    color: #FFECD1;
    font-size: 104px;
    line-height: 82px;
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
}
.wdp .block-text__text {
    color: #FFFFF7;
}
.wdp__content .block-text__text {
    width: 920px;
}
.gta__content ,.mta__content {
    z-index: 3;
}
.wdp__content {
    padding: 0 0 0px 10px;
}

.gta__content {
    padding: 35px 0 0 10px;
}
.mta__content {
    padding: 35px 0 0 78px;
    align-self: center;
}
.mta__block-text .block-text__text {
    width: 800px;
}

.wdp__image {
    position: relative;
    top: 65px; right: 205px;
}

.gta__block-text .block-text__text {
    width: 770px;
}

.block_2 {
    text-align: center;
}

@media (max-width: 1680.98px) {
    .sky {
        position: absolute;
        transform: translate(70% , -10% );
        scale: .8;
    }
    .gte {
        position: absolute;
        transform: translate(173% , -14%);
        scale: .8;
    }
    .gta__content {
        padding: 35px 0 0 10px;
    }
    .mta__content {
        padding: 35px 0 0 78px;
        align-self: center;
    }

    .wdp .block-text__title-2 {
        color: #FFECD1;
        font-size: 80px;
        line-height: 82px;
        position: relative;
        z-index: 2;
        margin-bottom: 20px;
    }
    .mta__block-text .block-text__text,
    .gta__block-text .block-text__text {
        width: 700px;
    }
    .mta__block-text .block-text__title-2,
    .gta__block-text .block-text__title-2 {
        width: 650px;
    }
}  

@media (max-width: 1450.98px)  {
    .sky {
        position: absolute;
        transform: translate(70% , -10% );
        scale: .7;
    }
    .gte {
        position: absolute;
        transform: translate(173% , -14%);
        scale: .7;
    }
    .what {
        position: absolute;
        transform: translate(157%, -41%);
        scale: .7;
    }
    .wdp__content {
        padding: 0 0 0px 85px;
    }
    .wdp__content .block-text__text {

    }
    .wdp__image {
        scale: .8;
        top: 65px; right: 505px;
    }
    .wdp__container {
        display: flex;
        flex-direction: column;
    }
    .gta__content {
        padding: 35px 0 0 85px;
    }
    .mta__content {
        padding: 35px 0 0 20px;
        align-self: center;
    }
    .wdp .block-text__text {
        font-size: 20px;
    }
    .wdp .block-text__title-2 {
        color: #FFECD1;
        font-size: 60px;
        line-height: 82px;
        position: relative;
        z-index: 2;
        margin-bottom: 20px;
    }
    .mta__block-text .block-text__text,
    .gta__block-text .block-text__text {
        width: 600px;
    }
    .mta__block-text .block-text__title-2,
    .gta__block-text .block-text__title-2 {
        width: 450px;
    }
} 
@media (max-width: 1250.98px)  {
    .sky {
        position: absolute;
        transform: translate(70% , -10% );
        scale: .7;
    }
    .gte {
        position: absolute;
        transform: translate(173% , -14%);
        scale: .7;
    }
    .what {
        position: absolute;
        transform: translate(80%, -41%);
        scale: .7;
    }
    .wdp-image {
        display: flex;
        flex-direction: column;
    }
    .wdp__content {
        padding: 0 0 0px 25px;
    }
    .wdp__content .block-text__text {
        width: 600px;
    }
    .wdp__image {
        scale: .8;
        top: 65px; right: 70px;
    }
    .wdp__container {
        display: flex;
        flex-direction: column;
    }
    .gta__content {
        padding: 0px 0 0 20px;
    }
    .mta__content {
        padding: 35px 0 0 20px;
        align-self: center;
    }
    .wdp .block-text__text {
        font-size: 20px;
    }
    .wdp .block-text__title-2 {
        color: #FFECD1;
        font-size: 60px;
        line-height: 82px;
        position: relative;
        z-index: 2;
        margin-bottom: 20px;
    }
    .mta__block-text .block-text__text,
    .gta__block-text .block-text__text,
    .wdp__content .block-text__text {
        width: 600px;
    }
    .mta__block-text .block-text__title-2,
    .gta__block-text .block-text__title-2,
    .wdp__block-text .block-text__title-2 {
        width: 450px;
    }
    .gta-mta {
        display: flex;
        padding-bottom: 45px;
        flex-direction: column;
        align-items: center;
    }
} 
@media (max-width: 660.98px)  {
    .sky {
        position: absolute;
        transform: translate(12% , -78% );
        scale: .4;
    }
    .gte {
        position: absolute;
        transform: translate(102% , -60%);
        scale: .5;
    }
    .what {
        position: absolute;
        transform: translate(25%, -150%);
        scale: .3;
    }
    .wdp-image {
        display: flex;
        flex-direction: column;
    }
    .wdp {
        padding: 0px 0 0 0;
    }
    .wdp__content {
        padding: 0 0 0px 25px;
    }
    .wdp__content .block-text__text {
        width: 600px;
    }
    .wdp__image {
        scale: .4;
        top: -50px; right: 10px;
        height: 330px;
    }
    .wdp__container {
        display: flex;
        flex-direction: column;
    }
    .gta__content {
        padding: 0px 0 0 20px;
    }
    .mta__content {
        padding: 35px 0 0 20px;
        align-self: center;
    }
    .wdp .block-text__text {
        font-size: 16px;
        line-height: 24px;
    }
    .wdp .block-text__title-2 {
        color: #FFECD1;
        font-size: 32px;
        line-height: 29px;
        position: relative;
        z-index: 2;
        margin-bottom: 16px;
    }
    .mta__block-text .block-text__text,
    .gta__block-text .block-text__text,
    .wdp__content .block-text__text {
        width: 320px;
    }
    .mta__block-text .block-text__title-2,
    .gta__block-text .block-text__title-2,
    .wdp__block-text .block-text__title-2 {
        width: 264px;
    }
    .gta-mta {
        display: flex;
        padding-bottom: 0px;
        margin-bottom: -40px;
        flex-direction: column;
        align-items: center;
    }
} 



/* ====================================================== BLOCK 3*/

.assortiment {
    background-color: #FFFFF7;
    padding: 0px 0px 0px 0px;
    max-height: 100%;
    overflow: hidden;
    z-index: 10;
    position: relative;
}
.assortiment__content { 
    z-index: 5;
    position: relative;
    display: grid;
    grid-template-columns: 40%;
    transform: translate(0,-110px);
}
.assortiment_image {
    transform: translate(35px,-135px);
}
.amazing__content {
    display: grid;
    grid-template-columns: 30% 70%;
    align-items: end;
    transform: translate(0px,-110px);
}
.amazing__image {
    grid-column: 2;
    transform: translate(84px,47px);
}
.amazing__block-text {
    grid-column: 1;
}
.assortiment .block-text__title-2 {
    color: #333230;
    font-size: 104px;
    line-height: 80px;
    z-index: 2;
    position: relative;
    transform: translate(10px,20px);
}
.assortiment .block-text__text {
    color: #333230;
    transform: translate(10px,40px);
    margin: 0;
}

.assortiment__content .block-text__button {
    background-image: url(/img/like_bg.webp);
    background-color: rgb(255,125,0);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    -webkit-mask-image: url(/img/like_bg.webp);
    mask-image: url(/img/like_bg.webp);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 507px; height: 104px;
    position: absolute;
    transition: background-color 0.5s ease, color 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Right Grotesk";
    font-size: 32px;
    color: rgb(48,47,45);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: translate(10px,66px);
    cursor: pointer;
}
.assortiment__content .block-text__button:hover {
    background-color: rgb(48,47,45);
    color: rgb(255,125,0);
}

.assortiment__bg-image {
    width: 1920px;
    position: relative;
    transform: translate(-645px,140px);
}
.big,
.big-liv {
    position: relative;
    animation: render01 10s ease-in-out infinite;
}
@keyframes render01 {
    0% {
        top: 0px; left: 0px;
    }

    50% {
        top: 0px; left: -3000px;
    }
    100% {
        top: 0px; left: 0px;
    }
}


@media (max-width: 1300px) {
    .assortiment__content { 
        z-index: 5;
        position: relative;
        display: grid;
        grid-template-columns: 40%;
        transform: translateX(200px);
    }
    .amazing__content {
        display: grid;
        grid-template-columns: 60%;
        align-items: end;
        transform: translateX(200px);
    }
    .assortiment_image {
        scale: 70%;
        position: relative;
        transform: translate(-70px, -15px);
    }
}
@media (max-width: 1000px) {
    .assortiment__container {
        height: 1650px;
    }
    .assortiment__content { 
        z-index: 5;
        position: relative;
        display: grid;
        grid-template-columns: 40%;
        transform: translateX(300px);
    }
    .assortiment__content .block-text__title-2,
    .amazing__content .block-text__title-2 {
        font-size: 80px;
    }
    .assortiment__content .block-text__text,
    .amazing__content .block-text__text {
        font-size: 20px;
    }
    .assortiment_image {
        scale: 60%;
        position: relative;
        transform: translate(0px, -135px);
    }
    .amazing__image {
        transform: translate(-200px, 147px);
        scale: 70%;
    }
    .amazing__content {
        display: grid;
        grid-template-columns: 60%;
        align-items: end;
        transform: translate(300px,-300px);
        width: 600px;
    }
    .assortiment__content .block-text__button {
        scale: 70%;
        transform: translate(-65px, 66px);
    }
}
@media (max-width: 767px) {
    .assortiment__content { 
        z-index: 5;
        position: relative;
        display: grid;
        grid-template-columns: 40%;
        transform: translateX(600px);
    }
    .assortiment__content .block-text__text {
        width: 600px;
    }
    .assortiment__content .block-text__button {
        scale: 70%;
        transform: translate(-65px, 66px);
    }
    .assortiment_image {
        scale: 60%;
        transform: translate(10%, -30%)
    }
    .assortiment__content .block-text__title-2 {
        width: 100px;
    }
    .amazing__content {
        display: grid;
        grid-template-columns: 60%;
        align-items: end;
        transform: translate(600px,-200px);
        width: 1000px;
        justify-items: center;
    }
    .amazing__image {
        scale: 70%;
    }
}
@media (max-width: 660.98px) {
    .assortiment__block-text {
        transform: translate(26%, -113%);
    }
    .assortiment__content { 
        z-index: 5;
        position: relative;
        display: grid;
        grid-template-columns: 40%;
    }
    .assortiment__content .block-text__text,
    .amazing__content .block-text__text {
        width: 320px;
        font-size: 16px;
        line-height: 24px;
    }
    .assortiment_image {
        scale: 40%;
        transform: translate(17%, -110%)
    }
    .assortiment__content .block-text__title-2,
    .amazing__content .block-text__title-2 {
        font-size: 32px;
        line-height: 29px;
        width: 320px;
    }
    .assortiment__bg-image {
        scale: 40%;
        transform: translate(-1545px, -190px);
    }
    .assortiment__content .block-text__button {
        background-image: url(img/mobile/Button\ Mobile\ Z.png);
        transform: translate(-35px, 66px);
        width: 234px;
        height: 56px;
    }
    .assortiment__content  .block-text__button::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(img/mobile/Button\ Mobile\ Z\ Hov.png);
        background-size: cover;
        opacity: 0; 
        transition: opacity 0.7s ease; /* Плавность перехода */
    }
    .assortiment__content  .block-text__button:hover::after {
        opacity: 1;
    }
    .block_2 {
        height: 260px;
    }

    .amazing__content {
        display: grid;
        align-items: start;
        transform: translate(600px,-350px);
        justify-items: center;
    }
    .amazing__content .amazing__block-text {
        grid-row: 2;
        grid-column: 1;
        transform: translate(19%,-93%);
    }
    .amazing__content .assortiment_image {
        grid-row: 1;
        grid-column: 1;
    }
    .amazing__image {
        scale: 45%;
        grid-row: 3;
        grid-column: 1;
        transform: translate(30%,-120%);
    }
    .assortiment {
        padding: 0px 0px 0px 0px;
        height: 1300px;
    }
    .block_3 {
        height: 60px;
    }
}


.block_3 {
    text-align: center;
    transform: translateY(-100px);
}
/* MODAL */
.modal1 {
    position: fixed;
    left: 0; top: 0;
    width: 100%;   
    height: 100vh;
    z-index: 99998;
    background-color: rgba(0, 0, 0, 0.5);
    display: grid;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s, visbility .4s;
}

.modal__box1 {
    background-image: url(/img/Соnnecting.png);
    width: 1115px;
    height: 944px;
    transform: translateX(2000px);
    transition: .8s;
}
.modal__close-btn1 {
    border: none;
    background-color: transparent;
    padding: 5px;
    position: absolute;
    top: 30px; right: 30px;
    cursor: pointer;
    transition: .8s;
    &:hover {
        transform: rotate(90deg);
    }
}
.modal1.open1 {
    visibility: visible;
    opacity: 1;
}
.modal1.open1 .modal__box1 {
    transform: scale(1);
}
@media (max-width: 1000px) {
    .modal__box1 {
        background-image: url(/img/Соnnecting.png);
        width: 1115px;
        height: 944px;
        transform: translateX(2000px);
        transition: .8s;
        scale: .7;
    }
}
@media (max-width: 800px) {
    .modal1 {
        position: fixed;
        left: 0; top: 0;
        width: 100%;   
        height: 100vh;
        z-index: 99998;
        background-color: rgba(0, 0, 0, 0.5);
        display: grid;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        transition: opacity .4s, visbility .4s;
    }
    
    .modal__box1 {
        background-image: url(img/mobile/Mobile\ Connect\ Pop-up.png);
        width: 360px;
        height: 806px;
        transform: translateX(2000px);
        transition: .8s;
    }
    .modal__close-btn1 {
        border: none;
        background-color: transparent;
        padding: 0px 0px 0 0;
        position: absolute;
        top: 40px; right: 20px;
        cursor: pointer;
        transition: .8s;
        &:hover {
            transform: rotate(90deg);
        }
    }
}

/* ====================================================== BLOCK 4*/

.slider-dp {
    background-color: #333230;
    padding: 0px 0px 0px 0px;
    max-height: 100%;
}
.slider-dp__container {
    display: grid;
    grid-template-columns: repeat(10, 162px);
    grid-template-rows: repeat(9,162px);
}
.slider-dp__content {
    grid-column: 1 / 5;
    grid-row: 1 ;
}

.slider_dp__image {
    grid-column: 6;
    grid-row: 1 ;
    transform: translate(18px,-50px);
}
.slider-swiper,
.slider-swiper__img {
    grid-column: 1 / 9;
    grid-row: 3 ;
    transform: translate(0%,-25px);
}
.slider-swiper__img {
    transform: translate(0% , -25px) rotate(-4deg) ;
}
.slider-swiper__image {
    grid-column: 6;
    grid-row: 4;
    transform: translate(-25px,62px);
}


.slider-dp .block-text__title-2 {
    color: #FFFFF7;
    font-size: 104px;
    font-weight: 900;
    line-height: 80px;
    transform: translate(5px,30px);
}
.slider-dp .block-text__text {
    color: #FFFFF7;
}

.slider-swiper__block-text {
    margin: 12px 0 0 0;
    width: 560px;
}
.slider-swiper__image {
    width: 800px;
    position: relative;
    
}
.slider-swiper__slider-text {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    transform: opacity 1s ease-in-out;
    transition: 0.5s ease;
}
.slider-swiper__slider-text.active {
    opacity: 1;
}
.slider-dp__container .prev,
.slider-dp__container .next {
    cursor: pointer;
    z-index: 2;
}

.slider-dp__container .rigth-1 {
    transform: translate( 45%,-40%);
    grid-column: 4;
    grid-row: 5;
    justify-self: flex-end;
    align-self: center;
    display: block;
    z-index: 1;
    width: 62px; height: 62px;
}


.slider-dp__container .next {
    transform: translate( 45%,-40%);
    grid-column: 4;
    grid-row: 5;
    justify-self: flex-end;
    align-self: center;
    display: block;
    &:hover {
        opacity: 0;
    }
}


.slider-dp__container .left-1 {
    transform: translate(-38% ,-38%);
    grid-column: 1;
    grid-row: 5;
    align-self: center;
    display: block;
    z-index: 1;
    width: 62px; height: 62px;
}

.slider-dp__container .prev {
    transform: translate(-38% ,-38%);
    grid-column: 1;
    grid-row: 5;
    align-self: center;
    display: block;
    width: 64px;
    &:hover {
        opacity: 0;
    }
}
.slider-swiper__image .mobile-block {
    display: none;
}
.slider-swiper__image .slide-desktop {
    display: block;
}

@media (max-width: 1660px) {
    .slider-dp__container {
        display: grid;
        grid-template-columns: repeat(10, 162px);
        grid-template-rows: repeat(10,162px);
        scale: 80%;
        transform: translateY(-400px);
    }
    .slider-dp__content {
        grid-column: 1 / 5;
        grid-row: 2 ;
    }
    .slider-swiper__img {
        grid-column: 1;
        grid-row: 4;
        transform: translate(0% , 85px) rotate(-4deg) ;
    }
    .slider_dp__image {
        grid-column: 6;
        grid-row: 2 ;
    }
    .slider-swiper {
        grid-column: 1 / 9;
        grid-row: 4 ;
        transform: translateY(55%);
    }
    .slider-swiper__image {
        grid-column: 6;
        grid-row: 6 ;
    }

    .slider-dp__container .rigth-1 {
        transform: translate( 45%,390%);
    }
    .slider-dp__container .next {
        transform: translate( 45%,380%);
    }
    .slider-dp__container .prev {
        transform: translate(-38% ,380%);
    }
    .slider-dp__container .left-1 {
        transform: translate(-38% ,390%);
    }
    .slider-dp {
        background-color: #333230;
        padding: 0px 0px 0px 0px;
        height: 1300px;
    }
}


/* ================================================================================= */

.slider-swiper__single {
    position: absolute;
    z-index: 1;
    transition: z-index 0ms 250ms;
}
.slider-swiper__single-image {
    position: relative;
    transition: 500ms ease-in-out;
}
/* left slide */
.slider-swiper__single-image {
    opacity: 0;
    transform: translateX(-300%) scale(1) rotate(-5deg);
}
.slider-swiper__single.preactive {
    z-index: 1;
}
.slider-swiper__single.preactive .slider-swiper__single-image {
    opacity: 1;
    transform: translate(0%) scale(1) rotate(4deg);
}
/* right slide */

.slider-swiper__single.proactive {
    z-index: 1;
}
.slider-swiper__single.proactive .slider-swiper__single-image {
    opacity: 0;
    transform: translateX(200%) scale(1) rotate(15deg);
}
.slider-swiper__single.proactivede .slider-swiper__single-image {
    opacity: 0;
    transform: translateX(-300%) scale(1) rotate(15deg);
}

/* Active slide */
.slider-swiper .active {
    z-index: 12222;
}
.slider-swiper .active .slider-swiper__single-image{
    opacity: 1;
    transform: translateX(0%) scale(1) rotate(0deg);
}
/* ================================================================ СЛАЙДЕР */
@media (max-width: 1660px) {
    .slider-dp__container {
        display: grid;
        grid-template-columns: repeat(10, 162px);
        grid-template-rows: repeat(10,162px);
        scale: 80%;
        transform: translateY(-400px);
    }
    .slider-dp__content {
        grid-column: 1 / 5;
        grid-row: 2 ;
    }
    .slider-swiper__img {
        grid-column: 1;
        grid-row: 4;
        transform: translate(0% , 85px) rotate(-4deg) ;
    }
    .slider_dp__image {
        grid-column: 6;
        grid-row: 2 ;
    }
    .slider-swiper {
        grid-column: 1 / 9;
        grid-row: 4 ;
        transform: translateY(55%);
    }
    .slider-swiper__image {
        grid-column: 6;
        grid-row: 6 ;
    }

    .slider-dp__container .rigth-1 {
        transform: translate( 45%,390%);
    }
    .slider-dp__container .next {
        transform: translate( 45%,380%);
    }
    .slider-dp__container .prev {
        transform: translate(-38% ,380%);
    }
    .slider-dp__container .left-1 {
        transform: translate(-38% ,390%);
    }
    .slider-dp {
        background-color: #333230;
        padding: 0px 0px 0px 0px;
        height: 1300px;
    }
}

@media (max-width: 1430px) {
    .slider-dp__content {
        grid-column: 2 / 5;
        grid-row: 2 ;
    }
    
    .slider_dp__image {
        grid-column: 6;
        grid-row: 2 ;
    }
    .slider-swiper {
        grid-column: 2 / 9;
        grid-row: 4 ;
        transform: translateY(55%);
    }
    .slider-swiper__image {
        grid-column: 7;
        grid-row: 5;
    }
    .slider-swiper__image .slider-swiper__slider-text img {
        scale: 70%;
        transform: translate(-200px,0);
    }
    .slider-swiper__image .slider-swiper__slider-text .block-text__text {
        font-size: 20px;
    }
    .slider-swiper__img {
        grid-column: 2/9;
    }
    .slider-dp__container .rigth-1 {
        transform: translate( 293%,392%);
    }
    .slider-dp__container .next {
        transform: translate( 285%,380%);
    }
    .slider-dp__container .prev {
        transform: translate(212% ,380%);
    }
    .slider-dp__container .left-1 {
        transform: translate(220% ,392%);
    }
    .slider-dp {
        background-color: #333230;
        padding: 0px 0px 0px 0px;
        height: 1300px;
    }
}
@media (max-width: 1100px) {
    .slider-dp__container {
        display: grid;
        grid-template-columns: repeat(10, 162px);
        grid-template-rows: repeat(10,162px);
    }
    .slider-dp__content {
        grid-column: 4 / 5;
        grid-row: 2 ;
        z-index: 6;
    }
    
    .slider_dp__image {
        grid-column: 5;
        grid-row: 2;
        scale: 80%;
    }
    .slider-swiper__img {
        grid-column: 4/9;
        scale: 80%;
        transform: translate(20px , 0px) rotate(-4deg) ;
    }
    .slider-swiper {
        grid-column: 4 / 9;
        grid-row: 4 ;
        transform: translateY(55%);
        scale: 80%;
    }
    .slider-swiper__image {
        grid-column: 4;
        grid-row: 9;
        transform: translateX(70px);
    }
    .slider-dp__container .rigth-1 {
        transform: translate( 40%,0%);
        grid-column: 7;
        grid-row: 6;
        justify-self: center;
    }
    .slider-dp__container .next {
        transform: translate( 40%,0%);
        grid-column: 7;
        grid-row: 6;
        justify-self: center;
    }
    .slider-dp__container .prev {
        transform: translate(0% ,0%);
        justify-self: center;
        grid-column: 4;
        grid-row: 6;
    }
    .slider-dp__container .left-1 {
        transform: translate(0% ,0%);
        justify-self: center;
        grid-column: 4;
        grid-row: 6;
    }
}
@media (max-width: 660px) {
    .slider-dp__container {
        display: grid;
        grid-template-columns: repeat(10, 162px);
        grid-template-rows: repeat(10,162px);
    }
    .slider-dp__content {
        grid-column: 4 / 5;
        grid-row: 3 ;
        z-index: 6;
        transform: translateX(85%);
    }
    .slider-dp__content .block-text__title-2 {
        font-size: 58px;
        line-height: 50px;
    }
    .slider-swiper__image .slider-swiper__slider-text .block-text__text {
        font-size: 18px;
        line-height: 34px;
        width: 360px;
    }
    .slider_dp__image {
        grid-column: 5;
        grid-row: 2;
        scale: 35%;
        transform: translate(120%,200%);
    }
    .slider-swiper__img {
        grid-column: 4;
        grid-row: 3;
        scale: 55%;
        transform: translate(-5px , 50px) rotate(-4deg) ;
    }
    .slider-swiper {
        grid-column: 4;
        grid-row: 4 ;
        transform: translate(120%,15%);
        scale: 55%;
    }
    .slider-swiper__image {
        grid-column: 4;
        grid-row: 7;
        transform: translate(140px,60px);
    }
    .slider-dp__container .rigth-1 {
        transform: translate( 90%,72%);
        grid-column: 6;
        grid-row: 5;
        justify-self: end;
        scale: 70%;
    }
    .slider-dp__container .next {
        transform: translate( 90%,70%);
        grid-column: 6;
        grid-row: 5;
        justify-self: end;
        scale: 70%;
    }
    .slider-dp__container .prev {
        transform: translate(40% ,70%);
        justify-self: end;
        grid-column: 4;
        grid-row: 5;
        scale: 70%;
    }
    .slider-dp__container .left-1 {
        transform: translate(40% ,72%);
        justify-self: end;
        grid-column: 4;
        grid-row: 5;
        scale: 70%;
    }
    .slider-swiper__image .mobile-block {
        display: block;
    }
    .slider-swiper__image .slide-desktop {
        display: none;
    }
    .slider-swiper__image .slider-swiper__slider-text img {
        scale: 1.2;
        transform: translate(40px,0);
    }
    .slider-swiper__image .block-title-mobile {
        font-family: "Right Grotesk";
        font-size: 16px;
        font-weight: 900;
        line-height: 13px;
        color: #333230;
        z-index: 4111;
        position: relative;
        transform: translate(-125px,25px);
    }
    .slider-swiper__image .mobile-block {
        display: flex; 
        transform: translateX(-20px);  
    }
    .slider-dp {
        height: 1170px;
    }
}

/* =======INSTALL================================== */

.install {
    background-color: #333230;
    padding: 0px 0px 260px 0px;
    max-height: 100%; 
}

.install__bg {
    background-image: url(/img/INSTALL.webp);
    background-repeat: no-repeat;
    border-radius: 5px;
    min-height: 1738px;
    transform: translateX(10px);
}
.install__wath {
    padding: 114px 0 0 331px;
}
.install__container {
    height: 1740px;
}
.install__image {
    display: grid;
    grid-template-columns: repeat(2,700px);
    grid-template-rows: repeat(2,600px);
    margin: 126px 120px 0 120px;
}
.install__image .install-cash__content {
    grid-template-rows: 00px;
}



/* GTA */
.install-gta__content {
    transform: translate(20px,12px);
    z-index: 0;
}
.install-gta__content .block-text__button {
    margin-top: 25px;
}
.inst-green {
    transform: translate(20%, -175%);
}
/* MTA */
.install-mta__content {
    grid-column: 2;
    grid-row: 1;
    transform: translate(25px,15px);
}
.install-mta__content .block-text__title-1 {
    transform: translateY(10px);  
}
.install-mta__content .block-text__text {
    transform: translate(0,25px);
}
.install-mta__content .block-text__button {
    margin-top: 35px;
}
.install-mta__content .install-mta__block-text {
    height: 265px;
}
/* CASH */
.install-cash__content {
    grid-column: 1;
    grid-row: 2;
    transform: translate(20px,-20px);
    z-index: 10;
}
.install-cash__content .block-text__button {
    margin-top: 25px;
}
.inst-red {
    transform: translate(9%,-118%);
}
.inst-orange {
    transform: translate(12%,-358%);
}
/* CONECT */
.install-conect__content {
    grid-column: 2;
    grid-row: 2;
    transform: translate(25px,-25px);
    position: relative;
    z-index: 2222;
}
.install-conect__content .block-text__title-1 {
    transform: translateY(12px);
}
.install-conect__block-text .block-text__text {
    transform: translateY(30px);
    width:650px ;
}
.install-conect__content .block-text__button {
    margin-top: 30px;
}


.block-text__button .strelka,
.block-text__button .line_down {
    transition: .5s;
} 
.install-conect__content .block-text__button {
    transform: translateY(15%);
    transition: .5s;
    & .line_down {
        transform: scaleX(103%);
    }
    &:hover .strelka {
        stroke-width: 9;
        transform: translateX(10px);
    }
    &:hover .line_down  {
        transform: scaleX(108%);
    }
    &:hover {
        transform: translateY(15%);
    }
}
.install-gta__content .block-text__button,
.install-cash__content .block-text__button,
.install-mta__content .block-text__button {
    transform: translateX(0%);
    transition: .5s;
    &:hover path {
        stroke-width: 9;
    }
    &:hover .line_down  {
        transform: scaleX(105%);
        width: 400px;
    }
    &:hover {
        width: 300px;
        transform: translateX(-6.5%);
    }
    &:hover .strelka {
        transform: scaleX(105%);
    }
}
.install-conect__content,
.install-mta__content {
    align-self: flex-end;
}

.install-gta__content,
.install-cash__content,
.install-conect__content,
.install-mta__content {
    width: 641px;
}
.install .block-text__title-1,
.install .block-text__text {
    color: #333230;
    line-height: 32px;
}
.install-gta__block-text,
.install-cash__block-text {
    transform: translateY(10px);
    position: relative;
    z-index: 5;
}
.install-gta__block-text .block-text__text,
.install-cash__block-text .block-text__text {
    transform: translateY(17px);
}
.install-conect__image {
    margin-left: -50px;
}

.abzac {
    display: none;
}

/* /////////////////////////////////////// */

@media (max-width: 1660px) {
    .install__bg {
        background-image: url(/img/INSTALL.webp);
        background-repeat: no-repeat;
        border-radius: 40px;
        min-height: 1738px;
        transform: translateX(10px);
        width: 1450px;
    }
    .install__what {
        
    }
    .install-conect__content .block-text__title-1 {
        transform: translateY(12px);
        width: 500px;
        line-height: 35px;
    }
    .install-conect__block-text .block-text__text {
        transform: translateY(30px);
        width:500px ;
    }
    .install-conect__content {
        transform: translate(25px, 25px);
    }
    .install-mta__content .block-text__title-1 {
        transform: translateY(10px);  
    }
    .install-mta__content .block-text__text {
        transform: translate(0,25px);
        width: 500px;
    }
    .install-mta__content {
        transform: translate(25px, 0px);
    }
    .inst-red {
        transform: translate(9%, -128%);
    }
}
@media (max-width: 1450px) {
    .install__bg {
        background-image: url(/img/INSTALL.webp);
        background-repeat: no-repeat;
        border-radius: 40px;
        min-height: 1738px;
        transform: translateX(10px);
        width: 1350px;
    }
    .install__image {
        display: grid;
        grid-template-columns: repeat(2, 600px);
        grid-template-rows: repeat(2, 600px);
        margin: 60px 120px 0 120px;
    }
    .install__wath {
        padding: 114px 193px 0 193px;
    }
    .install-conect__content .block-text__title-1 {
        transform: translateY(12px);
        width: 500px;
        line-height: 35px;
    }
    .install-conect__block-text .block-text__text {
        transform: translateY(30px);
        width:500px ;
    }
    .install-conect__content {
        transform: translate(25px, 25px);
    }
    .install-mta__content .block-text__title-1 {
        transform: translateY(10px);  
        width: 500px;
    }
    .install-mta__content .block-text__text {
        transform: translate(0,25px);
        width: 500px;
    }
    .install-mta__content {
        transform: translate(25px, 0px);
    }
    .inst-red, .inst-green, .inst-orange {
        display: none;
    }
    .install-cash__content .block-text__title-1 { 
        width: 500px;
    }
    .install-cash__content .block-text__text {
        width: 500px;
    }
    .install-cash__content {
        grid-column: 1;
        grid-row: 2;
        transform: translate(20px, 25px);
        z-index: 10;
        width:450px;
    }
    .install-gta__content .block-text__title-1 { 
        width: 500px;
    }
    .install-gta__content .block-text__text {
        width: 500px;
    }
}
@media (max-width: 1100px) {
    .install-gta__content .block-text__text,
    .install-cash__content .block-text__text,
    .install-mta__content .block-text__text,
    .install-conect__content .block-text__text {
        font-size: 20px;
        width: 400px;
    }
    .install-gta__content .block-text__title-1,
    .install-cash__content .block-text__title-1,
    .install-mta__content .block-text__title-1,
    .install-conect__content .block-text__title-1 {
        font-size: 36px;
        width: 400px;
    }
    .install__image {
        display: grid;
        grid-template-columns: repeat(2, 450px);
        grid-template-rows: repeat(2, 600px);
        margin: 60px 120px 0 25px;
    }
    .install__wath {
        padding: 50px 0px 0 0px;
        scale: .7;
    }
    .install__bg {
        background-image: url(/img/INSTALL.webp);
        background-repeat: no-repeat;
        border-radius: 40px;
        min-height: 1738px;
        transform: translateX(210px);
        width: 950px;
    }
    .install-cash__image {
        width: 200px;
    }
}
@media (max-width: 768px) {
    .install-gta__content .block-text__text,
    .install-cash__content .block-text__text,
    .install-mta__content .block-text__text,
    .install-conect__content .block-text__text {
        font-size: 16px;
        line-height: 24px;
        width: 289px;
        transform: translate(0,0);
    }
    .install-gta__content .block-text__title-1,
    .install-cash__content .block-text__title-1,
    .install-mta__content .block-text__title-1,
    .install-conect__content .block-text__title-1 {
        font-size: 32px;
        line-height: 29px;
        width: 289px;
        transform: translate(0,0);
    }
    .install-gta__content ,
    .install-cash__content ,
    .install-mta__content ,
    .install-conect__content {
        transform: translate(0,0);
    }
    .install-conect__image {
        margin: 0;
    }
    .install__bg {
        background-image: url(img/mobile/Install\ mobile.png);
        background-repeat: no-repeat;
        transform: translate(10%,0%);
        width: 400px; height: 2336px;
        margin: auto;
        border-radius: 0px;
    }
    .install__wath {
        display: none;
    }
    .install__image {
        display: flex;
        flex-wrap: wrap;
        padding-top: 144px;
        margin: 0;
        margin-left: 16px;
    }
    .install {
        padding: 0 0 700px 0 ;
        border-radius: none;
    }
    .abzac {
        display: block;
    }
    .install-conect__content .block-text__button {
        scale: .6;
    }
    .install-gta__content .block-text__button,
    .install-cash__content .block-text__button,
    .install-mta__content .block-text__button,
    .install-conect__content .block-text__button {
        scale: .6;
        transform: translate(-32%,0%);
        margin: 0;
    }
    .install-mta__content {
        padding-top: 60px;
        z-index: 2222;
    }
    .install-cash__content {
        padding-top: 100px;
    }
    .install-conect__content {
        padding-top: 60px;
    }
    .block-text__text:not(:last-child) {
        margin: 0px 0px 25px 0px;
    }  
    .install__container .block-text__text {
        margin-top: 16px;
    }  
    .install-conect__content .block-text__button {
        &:hover {
            width: 520px;
            transform: translate(-32%, 0%);
        }
    }
    .install-gta__content .block-text__button, .install-cash__content .block-text__button, .install-mta__content .block-text__button {
        &:hover {
            width: 300px;
            transform: translateX(-35.5%);
        }
    }
}
 
/* MODAL BOX DOWN */
/* GTA */
.modal2 {
    position: fixed;
    left: 0; top: 0;
    width: 100%;   
    height: 100vh;
    z-index: 99998;
    background-color: rgba(0, 0, 0, 0.5);
    display: grid;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s, visbility .4s;
}
.modal__box2 {
    background-color: #333230;
    border-radius: 40px;
    width: 1105px;
    height: 1016px;
    transform: translateX(2000px);
    transition: .8s;
    opacity: 1;
}

.modal__box2 h6 {
    color: #FFFFF7;
    font-size: 104px;
    font-weight: 900;
    width: 900px; height: 151px;
    line-height: 80px;
    margin: 65px 0 80px 80px;
}
.modal__box2 h2 {
    color: #FFFFF7;
    font-size: 40px;
    font-weight: 900;
    line-height: 10px;
    padding: 36px 0 0 35px;
    text-decoration-line: underline;
}
.modal__box2 p {
    color: #B7B7B1;
    font-size: 24px;
    padding: 20px 0 0 35px;
}
.modal__box2 .down__link-1 {
    background-color:#4c4b489f;
    width: 944px; height: 131px;
    border-radius: 24px;
    margin: 26px 0 0 80px;
    display: grid;
    cursor: pointer;
    transform: translateY(0px);
}
.modal__box2 .down__link-1 img {
    transform: translateX(5px);
}
.modal__box2 .down__link-1:hover {
    background-color: #8d8d88;
}
.modal__box2 .but-link {
    width: 64px; height: 64px;
    margin: 33px 0px 0 -45px;
    grid-column: 2;
}   
.modal__close-btn2 {
    border: none;
    background-color: transparent;
    padding: 5px;
    position: absolute;
    top: 75px; right: 75px;
    cursor: pointer;
    transition: .8s;
    &:hover {
        transform: rotate(90deg);
    }
}

.modal2.open2 {
    visibility: visible;
    opacity: 1;
}
.modal2.open2 .modal__box2 {
    transform: scale(1);
}

/* MTA */
.modal3 {
    position: fixed;
    left: 0; top: 0;
    width: 100%;   
    height: 100vh;
    z-index: 99998;
    background-color: rgba(0, 0, 0, 0.5);
    display: grid;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s, visbility .4s;
}

.modal__box3 {
    background-color: #333230;
    border-radius: 40px;
    width: 1105px;
    height: 1016px;
    transform: translateX(2000px);
    transition: .8s;
    opacity: 1;
}
.modal__box3 h6 {
    color: #FFFFF7;
    font-size: 104px;
    font-weight: 900;
    width: 900px; height: 151px;
    line-height: 80px;
    margin: 80px 0 100px 80px;
}
.modal__box3 h2 {
    color: #FFFFF7;
    font-size: 40px;
    font-weight: 900;
    line-height: 10px;
    padding: 36px 0 0 35px;
    text-decoration-line: underline;
}
.modal__box3 p {
    color: #B7B7B1;
    font-size: 24px;
    padding: 20px 0 0 35px;
}
.modal__box3 .down__link-1 {
    background-color:#4c4b489f;
    width: 944px; height: 131px;
    border-radius: 24px;
    margin: 30px 0 0 80px;
    display: grid;
    cursor: pointer;
}
.modal__box3 .down__link-1:hover {
    background-color: #8d8d88;
}
.modal__box3 .but-link {
    width: 64px; height: 64px;
    margin: 33px 0px 0 -45px;
    grid-column: 2;
}   
.modal__close-btn3 {
    border: none;
    background-color: transparent;
    padding: 5px;
    position: absolute;
    top: 75px; right: 75px;
    cursor: pointer;
    transition: .8s;
    &:hover {
        transform: rotate(90deg);
    }
}

.modal3.open3 {
    visibility: visible;
    opacity: 1;
}
.modal3.open3 .modal__box3 {
    transform: scale(1);
}
/* CASH */
.modal4 {
    position: fixed;
    left: 0; top: 0;
    width: 100%;   
    height: 100vh;
    z-index: 99998;
    background-color: rgba(0, 0, 0, 0.5);
    display: grid;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s, visbility .4s;
}

.modal__box4 {
    background-color: #333230;
    border-radius: 40px;
    width: 1105px;
    height: 1016px;
    transform: translateX(2000px);
    transition: .8s;
    opacity: 1;
}
.modal__box4 h6 {
    color: #FFFFF7;
    font-size: 104px;
    font-weight: 900;
    width: 900px; height: 151px;
    line-height: 80px;
    margin: 80px 0 100px 80px;
}
.modal__box4 h2 {
    color: #FFFFF7;
    font-size: 40px;
    font-weight: 900;
    line-height: 10px;
    padding: 36px 0 0 35px;
    text-decoration-line: underline;
}
.modal__box4 p {
    color: #B7B7B1;
    font-size: 24px;
    padding: 20px 0 0 35px;
}
.modal__box4 .down__link-1 {
    background-color:#4c4b489f;
    width: 944px; height: 131px;
    border-radius: 24px;
    margin: 30px 0 0 80px;
    display: grid;
    cursor: pointer;
}
.modal__box4 .down__link-1:hover {
    background-color: #8d8d88;
}
.modal__box4 .but-link {
    width: 64px; height: 64px;
    margin: 33px 0px 0 -45px;
    grid-column: 2;
}   
.modal__close-btn4 {
    border: none;
    background-color: transparent;
    padding: 5px;
    position: absolute;
    top: 75px; right: 75px;
    cursor: pointer;
    transition: .8s;
    &:hover {
        transform: rotate(90deg);
    }
}

.modal4.open4 {
    visibility: visible;
    opacity: 1;
}
.modal4.open4 .modal__box4 {
    transform: scale(1);
}
/* MODAL SERVER */
.modal5 {
    position: fixed;
    left: 0; top: 0;
    width: 100%;   
    height: 100vh;
    z-index: 99998;
    background-color: rgba(0, 0, 0, 0.5);
    display: grid;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s, visbility .4s;
}

.modal__box5 {
    background-image: url(/img/Соnnecting.png);
    width: 1115px;
    height: 944px;
    transform: translateX(2000px);
    transition: .8s;
}
.modal__close-btn5 {
    border: none;
    background-color: transparent;
    padding: 5px;
    position: absolute;
    top: 35px; right: 35px;
    cursor: pointer;
    transition: .8s;
    &:hover {
        transform: rotate(90deg);
    }
}


.modal5.open5 {
    visibility: visible;
    opacity: 1;
}
.modal5.open5 .modal__box5 {
    transform: scale(1);
}
@media (max-width: 1000px) {
    .modal__box2,
    .modal__box3,
    .modal__box4 {
        background-color: #333230;
        border-radius: 40px;
        width: 1105px;
        height: 1016px;
        transform: translateX(2000px);
        transition: .8s;
        opacity: 1;
        scale: .7;
    }
    .modal__box5 {
        background-image: url(/img/Соnnecting.png);
        width: 1115px;
        height: 944px;
        transform: translateX(2000px);
        transition: .8s;
        scale: .7;
    }
}
@media (max-width: 768px) {
    .modal__box2 .down__link-1,
    .modal__box3 .down__link-1,
    .modal__box4 .down__link-1 {
        display: none;
    }
    .modal__box2 h6,
    .modal__box3 h6,
    .modal__box4 h6 {
        display: none;
    }
    .modal__box2,
    .modal__box3,
    .modal__box4,
    .modal__box5 {
        background-image: url(/img/mobile/Mobile\ Connect\ Pop-up.png);
        background-repeat: no-repeat;
        width: 360px;
        height: 806px;
        transform: translateX(2000px);
        transition: .8s;
        border-radius: 0px;
        scale: 1;
    }   
    .modal__close-btn2,
    .modal__close-btn3,
    .modal__close-btn4,
    .modal__close-btn5 {
        border: none;
        background-color: transparent;
        padding: 0px 0px 0 0;
        position: absolute;
        top: 40px; right: 20px;
        cursor: pointer;
        transition: .8s;
        &:hover {
            transform: rotate(90deg);
        }
    }
}

/* ====================================================================================== */


.servers__DP {
    width: 1930px; height: 520px;
    overflow: hidden;
    /* position: absolute; */
    transform: translateY(-100px);
}
.DP-rotate-1 {
    transform: translateY(50px) rotate(3deg);
}
.DP-rotate-2 {
    transform: translateY(-10px) rotate(2deg);
}
.DP-rotate-3 {
    transform: translateY(-345px) rotate(-2deg);
}
.DP-1,
.DP-2,
.DP-3 {
    background-image: url(img/DP.webp);
    height: 250px;
    width: 5500px;
} 
.DP-1 {
    animation: render01 10s ease-in-out infinite;
    position: relative; 
}
.DP-2 {
    animation: render01 20s ease-in-out infinite;
    position: relative;
}
.DP-3 {
    animation: render01 5s ease-in-out infinite;
    position: relative;
}
@keyframes render01 {
    0% {
        top: 0px; left: 0px;
    }

    50% {
        top: 0px; left: -3000px;
    }
    100% {
        top: 0px; left: 0px;
    }
}

@media (max-width: 768px) {
    .servers__DP {
        width: 1930px; height: 300px;
        overflow: hidden;
        /* position: absolute; */
        transform: translateY(-100px);
    }
    .DP-rotate-1 {
        transform: translate(-760px,50px) rotate(2deg);
    }
    .DP-rotate-2 {
        transform: translate(780px,-20px) rotate(-2deg);
    }
    .DP-rotate-3 {
        transform: translate(-620px,-130px) rotate(1deg);
    }
    .DP-1,
    .DP-3 {
    background-image: url(img/mobile/DP-mobile.png);
    height: 135px;
    width: 5500px;
    }
    .DP-2 {
        background-image: url(img/mobile/DP-mobile-2.png);
        height: 135px;
        width: 5500px;
        }
 
    .DP-1 {
        animation: render01 10s ease-in-out infinite;
        position: relative;
        height: 135px;
    }
    .DP-2 {
        animation: render01 20s ease-in-out infinite;
        position: relative;
        height: 135px;
    }
    .DP-3 {
        animation: render01 5s ease-in-out infinite;
        position: relative;
        height: 135px;
    }
    @keyframes render01 {
        0% {
            top: 0px; left: 0px;
        }
    
        50% {
            top: 0px; left: -2000px;
        }
        100% {
            top: 0px; left: 0px;
        }
    }
}

.servers {
    background-image: url(./img/Severs-BG.webp);
    padding: 0px 0px 245px 0px;
    max-height: 100%; 
}
.server__content {
    display: grid;
    grid-template-columns: 1fr 50%;
    grid-template-rows: 550px;
    padding: 135px 0px 17px 0px;
}

.star_red {
    position: absolute;
    transform: translate(810px,170px);
}
.star_orange_1 {
    position: absolute;
    transform: translate(242px,-70px);
}
.server__block-text .block-text__title-2 {
    font-family: "Right Grotesk";
    font-size: 104px;
    font-weight: 900;
    line-height: 80px;
    color: #333230;
    grid-column: 1;
    grid-row: 2;
    padding-left: 10px;
}
.server__block-text .block-text__text {
    color: #333230;
    font-family: "Futura PT";
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    grid-column: 1/8;
    grid-row: 4;
    padding: 60px 0 0 10px;
}
.server__block-text {
    display: grid;
    grid-template-columns: repeat(8,100px);
    grid-template-rows: repeat(6,100px);
    margin-left: 146px;
}
.server__min-max {
    display: grid;
    grid-template-columns: repeat(8,100px);
    grid-template-rows: repeat(5,120px);
    transform: translate(40px,-40px);
}
.min-max-bg {
    grid-column: 6;
    grid-row: 2;
    transform: translate(40px,30px);
}
.server__min {
    font-family: "Right Grotesk";
    font-size: 216px;
    font-weight: 900;
    line-height: 180px;
    color: #333230;
    grid-column: 1;
    grid-row: 3;
    z-index: 5;
}
.server__max {
    font-family: "Right Grotesk";
    font-size: 40px;
    font-weight: 900;
    line-height: 80px;
    text-align: end;
    color: #333230;
    grid-column: 7;
    grid-row: 4;
    align-self:flex-end;
    transform: translate(-35px,10px);
}
.servers__content {
    padding: 0px 0px 0px 0px;
}

.btn-left {
    cursor: pointer;
    background-image: url(/img/slides_1/btn_left.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 42px; height: 42px;
    position: absolute;
}
.btn-right {
    cursor: pointer;
    background-image: url(/img/slides_1/btn_right.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 42px; height: 42px;
    position: absolute;
}
.btn-right:hover {
    background-image: url(/img/rigth_hover.png);
}
.btn-left:hover {
    background-image: url(/img/left-hover.png);
}



.carousel .serv-1 {
   height: 328px; 
   width: 359px;  
}

/* /////// */

.serv-1 {
    background-color: rgba(255, 236, 209,0.5);
    border-radius: 10%;
    border: 2px solid #333230;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: 0.5s;
    transform: translate(50%, 250%);
    font-family: "Right Grotesk";
    color: #333230;
    cursor: pointer;
    overflow: hidden;
}
.card-id {
    width: 359px;
    font-family: "Futura PT";
    font-weight: 700;
    font-size: 24px;  
    text-align: center;
    display: inline-flex;
    flex-direction: column;
    opacity: 0;
    transition: .7s;
    line-height: 32px;
    transform: translate(0px,10px);;
}
.number  {
    font-size: 104px;
    font-weight: 900;
    padding-left: 22px;
    margin-top: -2px;
    margin-bottom: -8px;
    transition: .5s;
}
.server {
    font-size: 40px;
    font-weight: 900;
    padding-left: 22px;
    transition: .5s;
}
.current {
    z-index: 5;
    font-size: 104px;
    font-weight: 900;
    transition: .5s;
    padding-left: 100px;
}
.max {
    z-index: 5;
    font-size: 40px; 
    font-weight: 900;
    transition: .5s;
    text-align: end;
    margin: 0px 0px 0 220px;
}
.max::before {
    content: "/";
}
.players {
    opacity: 0;
    font-family: "Futura PT";
    font-size: 24px;
}
.players-now {
    position: relative;
    top: 30px; left: 22px;
}
.max-players {
    position: relative;
    top: 30px; left: 58px;
}
.serv-1:hover{
    background-color: #43AA8B;
    transition: .5s;
}
.serv-1:hover .players{
    opacity: 1;
    transition: .5s;
}
.reshetka {
    background-image: url(/img/1.png);
    background-repeat: no-repeat;
    width: 100%; height: 100%;
    opacity: 0;
    position: absolute;
    top: 45%;
    left: 0px;
    display: none;
}
.serv-1:hover .card-id {
    opacity: 1;
    padding-top: 20px;
    z-index: 111;
}
.serv-1:hover .reshetka {
    opacity: 1;
    transition: none;
    display: block;

}
.serv-1:hover .max::before{
    content: none;
}
.serv-1:hover .max{
    font-size: 24px; 
    font-weight: 700;
    font-family: "Futura PT-BOLD";
    transition: .3s ease-in-out;
    position: relative;
    top: 30px; left: 25px;
}
.serv-1:hover .current{
    font-size: 24px; 
    font-weight: 700;
    font-family: "Futura PT-BOLD";
    transition: .4s ease-in;
    top: 5px; right: 35px;
    position: relative;
}

.server__container  {
    max-width: 1920px;
    padding: 0;
}

.swiper .swiper-wrapper {
    padding-bottom: 110px;
    margin-left: 146px;
}
.server__container .swiper {
    margin: 0;
    overflow: hidden;
}
.swiper .swiper-pagination-bullet {
    background-color: #1C1616;
    width: 24px; 
    height: 24px;
    opacity: 1;
}
.swiper .swiper-button-prev::after,
.swiper .swiper-button-next::after  {
    display: none;
}
.swiper .swiper-button-prev {
    transform: translate(800px,195px);
}
.swiper .swiper-button-next {
    transform: translate(-785px,195px);
}



/* /////////// */

.swiper .pustishka {
    display: none;
    opacity: 0;
}

@media (max-width: 1450px) {
    .server__min {
        grid-column: 1;
        grid-row: 3;
        font-size: 150px;
    }
    .server__max {
        grid-column: 5;
        grid-row: 4;
        font-size: 30px;
        transform: translate(-10%,-20%);
    }
    .min-max-bg {
        transform: translate(-80%,-10%);
    }
    .server__block-text .block-text__title-2 {
        transform: translate(0%,0%);
        grid-column: 3;
        font-size: 80px;
    }
    .server__block-text .block-text__text {
        grid-column: 3;
        width: 600px;
        font-size: 20px;
    }
    .server__container .swiper {
        margin-left: 210px;
        width: 1500px;
    }
    .swiper .swiper-button-prev {
        transform: translate(580px, 195px);
    }
    .swiper .swiper-button-next {
        transform: translate(-580px,195px);
    }
    
}
@media (max-width: 1200px) {
    .server__content {
        display: grid;
        grid-template-columns: 200px;
        grid-template-rows: 550px;
        padding: 135px 0px 17px 0px;
        transform: translateX(350px);
    }
    .server__min-max {
        grid-row: 2;
        transform: translate(355px,-40px);
    }
    .server__min {
        grid-column: 1;
        grid-row: 3;
        font-size: 150px;
    }
    .server__max {
        grid-column: 5;
        grid-row: 4;
        font-size: 30px;
        transform: translate(-10%,-20%);
    }
    .min-max-bg {
        transform: translate(-80%,-10%);
    }
    .server__block-text .block-text__title-2 {
        transform: translate(0%,0%);
        grid-column: 3;
        font-size: 80px;
    }
    .server__block-text .block-text__text {
        grid-column: 3;
        width: 600px;
        font-size: 20px;
    }
    .server__container .swiper {
        margin-left: 360px;
        width: 1200px;
    }
    .swiper .swiper-wrapper {
        padding-left: 200px;
    }
    .swiper .swiper-button-prev {
        transform: translate(450px, 195px);
    }
    .swiper .swiper-button-next {
        transform: translate(-460px,195px);
    }
}
@media (max-width: 767px) {
    .servers {
        height: 1000px;
    }
    .server__content {
        display: grid;
        grid-template-columns: 200px;
        grid-template-rows: 320px;
        padding: 88px 0px 17px 0px;
        transform: translateX(350px);
    }
    .server__min-max {
        display: grid;
        grid-template-columns: 320px;
        grid-template-rows: 170px;
        transform: translate(460px,0px);
        justify-items: end;
    }
    .server__min {
        grid-column: 1;
        grid-row: 1;
        font-size: 104px;
    }
    .server__max {
        grid-column: 1;
        grid-row: 1;
        font-size: 32px;
        transform: translate(0,20px);
    }
    .min-max-bg {
        grid-row: 1;
        grid-column: 1;
        transform: translate(0%,0%);
        width: 124px;
        height: 127px;
    }
    .server__block-text {
        display: grid;
        grid-template-columns: 320px;
        grid-template-rows: 320px;
        margin-left: 130px;
    }
    .server__block-text .block-text__title-2 {
        transform: translate(0%,0%);
        grid-column: 2;
        grid-row: 1;
        font-size: 48px;
        line-height: 40px;
        width: 320px;
        padding: 0;
    }
    .server__block-text .block-text__text {
        grid-column: 2;
        grid-row: 1;
        width: 600px;
        font-size: 16px;
        line-height: 24px;
        width: 320px;
        padding: 136px 0px 0px 0px;
    }
    .server__container .swiper {
        margin-left: 280px;
        width: 1100px;
    }
    .swiper .swiper-wrapper {
        padding-left: 200px;
    }
    .swiper .swiper-wrapper {
        scale: .6;
    }
    .swiper .swiper-button-next,
    .swiper .swiper-button-prev,
    .swiper .swiper-pagination-bullet {
        display: none;
    }
    .swiper .pustishka {
        display: block;
        opacity: 0;
    }
    .star_red {
        position: absolute;
        transform: translate(1650px,330px);
        scale: .6;
    }
}

/* =================================================================================== */

.support {
    background-color: #43AA8B;
    padding: 0px 0px 140px 0px;
    max-height: 100%;
}
.support .block-text__title-2,.block-text__title-3 {
    color: #333230;
}
.support .block-text__text {
    color: #333230;
}
.support .block-text__title-2 {
    font-family: "Right Grotesk";
    font-size: 104px;
    font-weight: 900;
    line-height: 80px;
}
.block-text__title-3 {
    font-family: "Right Grotesk";
    font-size: 216px;
    font-weight: 900;
    line-height: 160px;
    padding-bottom: 64px;
}
.support li {
    list-style: disc;
    font-family: "Futura PT";
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}
.support ul {
    margin-left: 40px;
}
.support__container {
    display: grid;
}
.support__content { 
    display: grid;
    padding-bottom: 145px;
    padding-left: 90px;
    padding-top: 45px;
    grid-template-columns: repeat(2, 850px);
}
.support__content .block-text__text {
    padding-top: 20px;
}
.support__content .block-text__button {
    background-image: url(/img/button_bg.webp);
    background-color: rgb(255,125,0);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    -webkit-mask-image: url(/img/button_bg.webp);
    mask-image: url(/img/button_bg.webp);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 507px; height: 104px;
    position: absolute;
    transition: background-color 0.5s ease, color 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Right Grotesk";
    font-size: 32px;
    color: rgb(48,47,45);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: translate(9px,10px);
}
.support__content .block-text__button:hover {
    background-color: rgb(48,47,45);
    color: rgb(255,125,0);
}
.support__block-text .block-text__text {
    width: 641px;

}
.support__content .heart {    
    transform: translate(-30%,-15%);
}
.premium__content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1100px;
}
.premium__block-text {
    max-width: 700px;
    z-index: 2;
    padding-left: 90px;
}
.premium__content .badge {
    transform: translate(7%,-17%);
    height: 1100px;
}
.premium__content .badge-1 {
    z-index: 6;
    position: relative;
}
.premium__content .badge-2 {
    transform: translate(20%,-103%);
}
.premium-text {
    width: 782px;
    padding-top: 12px;
    & li {
        line-height: 40px;
    }
}

.coupone__content {
    display: grid;
    grid-template-columns: repeat(2,820px);
    grid-template-rows: repeat(2,1fr);
    justify-content: center;
}
.coupone__content .coupone-1__block-text,.coupone-2__block-text,.coupone-3__block-text{
    max-width: 782px;
}
.coupone__content .coupone-1__block-text{
    grid-column: 2;
    transform: translate(40px,80px);
}
.coupone__content .coupone-2__block-text{
    transform: translate(15px,35px);
}
.coupone__content .coupone-3__block-text{
    transform: translate(40px,35px);  
}
.coupone__content .block-text__title-2 {
    line-height: 80px;
}
.coupone-car-slide {
    position: absolute; width:782px; height:666px;
}
.coupone__cars {
    width: 782px; height: 666px;
    transform: translate(15px,-50px);
}
.coupone__content .block-text__text {
    padding-top: 20px;
}
.coupone__value {
    transform: translate(0,10px);
}
.coupone__up {
    transform: translate(-10px,10px);
}
@media (max-width: 1650px) {
    .support__content {
        justify-content: center;
        grid-template-columns: repeat(2,600px);
    }
    .premium__content {
        justify-content: center;
        grid-template-columns: repeat(2, 600px);
    }
    .premium__block-text {
        padding-left: 40px;
    }
    .premium-text {
        width: 622px;
        padding-top: 12px;
    }
    .support__content .heart {    
        transform: translate(-10%,-15%);
    }
    .coupone__content {          
        grid-template-columns: 782px;
        grid-template-rows: repeat(4, 500px);
        justify-content: center;
    }
    .coupone__content .coupone__cars {
        grid-row: 2;
        transform: translate(0px,0px);
        align-self: center;
    }
    .coupone-car-slide {
        scale: 90%;
    }
    .coupone__content .coupone-1__block-text{
        grid-column: 1;
        transform: translate(0px,0px);
    }
    .coupone__content .coupone-2__block-text{
        transform: translate(0px,0px);
        padding-top: 64px;
    }
    .coupone__content .coupone-3__block-text{
        transform: translate(0px,0px);  
        padding-top: 254px;
    }
    .support {
        background-color: #43AA8B;
        padding: 0px 0px 600px 0px;
        max-height: 100%;
    }
}
@media (max-width: 1200px) {
    .support__content {
        justify-content: center;
        grid-template-columns:782px;
        grid-template-rows: 0px;
        padding-bottom: 0px;
    }
    .support__block-text .block-text__text {
        width: 782px;
    }
    .support__block-text {
        z-index: 4;
    }
    .support__content .heart {    
        transform: translate(0%,-70%);
        scale: 50%;
    }
    .premium__content {
        justify-content: center;
        grid-template-columns:  782px;
        grid-template-rows: 1000px;
    }
    .premium__block-text .block-text__title-3 {
        font-size: 150px;
    }
    .premium__content .badge {
        transform: translate(20%,-30%);
        height: 860px;
    }
    .coupone__content {  
        padding-top: 200px;        
        grid-template-columns: 700px;
        grid-template-rows: repeat(4, 500px);
        justify-content: center;
    }
    .coupone__content .coupone__cars {
        grid-row: 2;
        transform: translate(-40px,0px);
        align-self: center;
    }
    .coupone-car-slide {
        scale: 90%;
    }
    .coupone__content .coupone-1__block-text{
        grid-column: 1;
        transform: translate(0px,0px);
    }
    .coupone__content .coupone-2__block-text{
        transform: translate(0px,0px);
        padding-top: 64px;
    }
    .coupone__content .coupone-3__block-text{
        transform: translate(0px,0px);  
        padding-top: 254px;
    }
    .support {
        background-color: #43AA8B;
        padding: 0px 0px 600px 0px;
        max-height: 100%;
    }
}
@media (max-width: 767px) {
    .support .block-text__title-2{
        font-size: 32px;
        line-height: 40px;
    }
    .support .block-text__title-2:not(:last-child){
        margin: 0 0 16px 0;
    }
    .support .block-text__title-3{
        font-size: 48px;
        line-height: 40px;
        padding-bottom: 16px;
    }
    .support .block-text__text{
        font-size: 16px;
        line-height: 24px;
        padding-top: 0px;
    }
    .support__block-text .block-text__title-2 {
        font-size: 48px;
        line-height: 40px;
        padding-bottom: 16px
    }
    .support li {
        list-style: disc;
        font-family: "Futura PT";
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
    }
    .support__content {
        grid-template-columns: 320px;
        padding-left: 0px;
        padding-top: 0px;
        height: 500px;
    }
    .support__content .block-text__text{
        width: 320px;
    }
    .support__content .block-text__button {
        scale: 50%;
        transform: translate(-50%,-50%);
    }
    .support__content .heart {    
        transform: translate(-30%,-65%);
        scale: 50%;
    }
    .premium__content {
        grid-template-columns:  320px;
        grid-template-rows: 0px;
        margin-left: -80px;
        padding-top: 88px;
    }
    .premium-text {
        width: 300px;
        font-size: 16px;
        padding-top: 0;
    }
    .support ul {
        margin-left: 25px;
    }
    .premium__content .badge {
        transform: translate(50%,50%);
        height: 860px;
        scale: 50%;
    }
    .premium__content .badge-1 {
        transform:translate(-3%,-12%) rotate(30deg);
    }
    .premium__content .badge-2{
        transform: translate(-55%,-190%) rotate(90deg);
        scale: 70%;
    }
    .coupone__content {         
        grid-template-columns: 320px;
        grid-template-rows: repeat(4, 320px);
        justify-content: center;
        align-items: center;
        padding-top:65px;
    }
    .coupone__cars {
        width: 320px; height: 272px;
    }
    .coupone-car-slide {
        padding-top: 0px;
        margin-left: 20px;
        position: absolute; width:320px; height:272px;
        scale: 100%;
    }
    .coupone__content .block-text__title-2 {
        width: 200px;
    }
    .coupone__value,.coupone__up {
        width: 320px; height: 90px;
    }
    .coupone__up {
        margin-left: 7px;
    }
    .coupone__content .coupone-2__block-text {
        transform: translate(0px, 0px);
        padding-top: 154px;
    }
    .coupone__content .coupone-3__block-text {
        transform: translate(0px, 0px);
        padding-top: 434px;
    }
    .support {
        background-color: #43AA8B;
        padding: 0px 0px 345px 0px;
        max-height: 100%;
    }
}


/* ======================================================================================== */

.faq {
    background-color: #EF3054;
    padding: 100px 0px 85px 0px;
    height: 100%;
    max-width: 100%;
}

.faq__container {
    max-width: 1856px;
    max-height: 2830px;
    background-color: #FFFFF7;
    border-radius: 40px;
    transform: translate(10px,25px);
    padding-bottom: 40px;
    margin-bottom: 160px;
}
.faq__content {
    margin-left: 105px;
    padding: 100px 0 0 0;
    display: grid;
}
.faq__image {
    grid-column: 2;
    justify-self: end;
    transform: translate(16px,-105px);
}
.faq-title {
    transform: translate(-30px,-83px);
    height: 240px;
}
.faq-bg {
    width: 815px;
    height: 140px;
    background-color: #FF7D00;
    transform:translate(0,85px) rotate(-3deg);
}
.faq__block-text .block-text__title-3 {
    transform: translate(0,-80px);
    text-align: center;
}
.faq__block-text {
    max-width: 820px;
    height: 100%;
}
.transition, ul li i:before, ul li i:after, p {
    transition: all .5s ease-in-out;
}
  
.flipIn, ul li {
    animation: flipdown 0.5s ease both;
}
 
.faq__content h2 {
    letter-spacing: 1px;
    display: block;
    color: #333230;
    margin: 0;
    cursor: pointer;
    font-family: "Right Grotesk";
    font-size: 40px;
    font-weight: 900;
    line-height: 40px;
    text-decoration: underline;
    width: 660px;
    padding-top: 40px;
    white-space: normal;
}
  
.faq__block-text p {
    color: #333230;
    line-height: 32px;
    letter-spacing: 0px;
    position: relative;
    overflow: hidden;
    max-height: 800px;
    opacity: 1;
    margin: 35px 0px 56px 0 ;
    z-index: 2;
    width: 643px;
}
.faq__block-text li {
    min-height: 143px;
}
.faq__content ul {
    list-style: none;
    perspective: 900;
    padding: 0;
    margin: 0;
}
.faq__content ul li {
    position: relative;
    padding: 0;
    margin: 0;
    padding-top: 0px;
    padding-bottom: 0px;
    border-top: 1px dashed #333230;
}
.faq__content ul li:last-of-type {
    padding-bottom: 0px;
    border-bottom: 1px dashed #333230;
    padding-bottom: 0px;
}
.faq__content ul li i {
    position: absolute;
    transform: rotate(45deg);
    top: 65px;
    right: 40px;
    width: 20px;
    height: 2px;
}
.faq__content ul li i:before, .faq__content ul li i:after {
    content: "";
    position: absolute;
    background-color: #333230;
    width: 24px;
    height: 8px;
}
.faq__content ul li i:before {
    transform: translate(0, 0) rotate(135deg);
}
.faq__content ul li i:after {
    transform: translate(0, 0) rotate(-45deg);
}
.faq__content ul li input[type=checkbox] {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
}
.faq__content ul li input[type=checkbox]:checked ~ p {
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    transform: translate(0, 0);
}
.faq__content ul li input[type=checkbox]:checked ~ i:before {
    transform: translate(1px, 0px) rotate(45deg);
}
.faq__content ul li input[type=checkbox]:checked ~ i:after {
    transform: translate(1px, 0) rotate(-45deg);
}
@keyframes flipdown {
    0% {
        opacity: 0;
        transform-origin: top center;
        transform: rotateX(-90deg);
    }
    5% {
        opacity: 1;
    }
    80% {
        transform: rotateX(8deg);
    }
    83% {
        transform: rotateX(6deg);
    }
    92% {
        transform: rotateX(-3deg);
    }
    100% {
        transform-origin: top center;
        transform: rotateX(0deg);
    }
}

@media (max-width: 1650px) {
    .faq__container {
        max-width: 900px;
        transform: translate(0,0);
    }
    .faq__content {
        margin-left: 0px;
        padding: 102px 0 0 0;
        display: grid;
        justify-items: center;

    }
    .faq__image {
        display: none;
    }
    .faq__content ul li i {
        position: absolute;
        transform: rotate(45deg);
        margin-top: 16px;
        right: 0px;
        width: 20px;
        height: 2px;
    }
}
@media (max-width: 850px) {
    .faq__container {
        max-width: 320px;
        border-radius: 16px;
        padding-bottom: 40px;
    }
    .faq__content {
        margin-left: 0px;
        padding: 121px 0 0 0;
        display: grid;
        justify-items: center;
        grid-template-columns: 288px;
    }
    .faq__block-text .block-text__title-3 {
        font-size: 48px;
        transform: translate(50px,-80px);
    }
    .faq-bg {
        width: 180px; height: 42px;
        transform: translate(55px,25px) rotate(-3deg);
    }
    .faq__content h2 {
        letter-spacing: 1px;
        display: block;
        color: #333230;
        margin: 0;
        cursor: pointer;
        font-family: "Right Grotesk";
        font-size: 15px;
        font-weight: 900;
        line-height: 16px;
        width: 285px;
        word-spacing: -4px;
        text-decoration: none;
        padding-top: 17px;
        word-spacing: 0px;
    }
      
    .faq__block-text p {
        color: #333230;
        line-height: 24px;
        letter-spacing: 1px;
        position: relative;
        overflow: hidden;
        max-height: 800px;
        opacity: 1;
        margin: 15px 0px;
        z-index: 2;
        font-size: 16px;
        width: 280px;
    }
    .faq__content ul li {
        position: relative;
        padding: 0;
        margin: 0;
        padding-bottom: 0px;
        padding-top: 0px;
        border-top: 1px dashed #333230;
        text-decoration: none;
        margin: -0px;
    }
    .faq__content ul li:last-of-type {
        border-bottom: 1px dashed #333230;
        padding-bottom: 10px;
    }
    .faq__content ul li i:before, .faq__content ul li i:after {
        width: 16px;
        height: 6px;
    }

    .faq-title {
        position:absolute;
        transform: translate(0px,-100px);
    }
    .faq__content ul {
        list-style: none;
        perspective: 900;
        padding: 0;
        margin: 0;
        width: 290px;
        padding-top: 0px;
    }
    .faq__block-text li {
        min-height: 60px;
    }
    .faq__content ul li i {
        margin-top: -48px;
        padding-left: 10px;
    }
    .faq {
        padding: 100px 0 1px 0px;
    }
}


/* ====================================================================== Footer */

.footer {
    padding: 180px 0px 80px 0px;
    max-height: 100%;
}
.footer__container {
    width: 1650px;
    padding-left: 20px;
}
.footer-bg {
    position: absolute;
    transform: translateY(-200px);
}

.footer .block-text__title-1, .block-text__text, .block-text__text-1, .block-text__text-2 {
    color: #FFFFF7;
    z-index: 22;
    position: relative;
}
.footer .block-text__title-1 {
    margin-top: 75px;
}
.footer .block-text__text-1 {
    font-family: "Futura PT-Medium";
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}
.footer .block-text__text-2 {
    font-family: "Futura PT-Book";
    font-size: 16px;
    font-weight: 450;
    line-height: 16px;
}
.footer .block-text__text-3 {
    font-family: "Futura PT-BOLD";
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;  
    color: #fffff7;  
    padding-bottom: 7px;
}
.footer__block-text .block-text__text-2 {
    padding-top: 8px;
}
.cards {
    display: grid;
    gap: 70px;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    max-width: 1200px;
    padding-top: 32px;
}
.footer__content .supp, .partnerships, .developer {
    height: 100px;
}
.footer__content {
    z-index: 2;
}
.copyright .block-text__text-2 {
    border-left: 2px solid #FFFFF7;
    padding:3px 16px;
    font-family: "Futura PT-Medium";
    height: 24px;
}
.copyright .block-text__text-2:first-child {
    border-left:none;
    padding-left: 0;
}


.copyright__content {
    padding-top: 80px;
    display: flex;
    z-index: 1111;
    max-width: 1650px;
}
.copyright {
    display: flex;
    flex: 1 1; 
    z-index: 222;
}
.link__content {
    display: flex;
    flex: 0 1 ;
    z-index: 222;
    gap: 16px;
    justify-content: flex-end;
}
.proxy {
    padding-left: 31px;
    display: flex;
}

@media (max-width: 1460px) {
    .footer-bg {
        transform: translate(-200px,-200px);
        scale: 70%;
    }
}
@media (max-width: 1350px) {
    .footer-bg {
        transform: translate(-500px,-200px);
        scale: 50%;
    }
    .footer__container {
        width: 1000px;
    }
}
@media (max-width: 990px) {
    .footer-bg {
        transform: translate(-900px,-200px);
        scale: 40%;
    }
    .footer__container {
        width: 800px;
    }
    .copyright {
        flex-wrap: wrap;
        width: 300px;
    }
    .proxy {
        position: absolute;
        transform: translate(630px,60px);
    }

}
@media (max-width: 780px) {
    .footer {
        padding: 88px 0 45px 0;
    }
    .cards {
        gap: 48px;
    }
    .footer-bg {
        display: none;
    }
    .footer__container {
        width: 400px;
        padding-left: 50px;
    }
    .copyright__content {
        flex-direction:column-reverse ;
        padding: 0;
    }
    .link__content {
        justify-content: flex-start;
        padding: 48px 0;
    }
    .copyright .block-text__text-2 {
        border-left: none;
        padding:22px 0;
    }
    .proxy {
        position: absolute;
        transform: translate(180px,30px);
    }
    .footer__logo {
        width: 208px; height: 64px;
    }
    .footer .block-text__title-1 {
        font-size: 32px;
        line-height: 29px;
        padding-top: 0px;
        width: 200px;
        margin-top: 56px;
    }
    .footer__block-text {
        width: 300px;
    }
    .footer__content .supp, .partnerships, .developer {
        height: 150px;
    }
}





/* ===============Modal Box=============== */

.modal {
    position: fixed;
    left: 0; top: 0;
    width: 100%;    height: 100vh;
    z-index: 99998;
    background-color: rgba(0, 0, 0, 0.5);
    display: grid;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    visibility: hidden;
    opacity: 1;
    transition: opacity .4s, visbility .4s;
}
.modal__box {
    position: relative;
    width:1856px;
    height: 1016px;
    padding: 95px 114px;
    z-index: 1;
    margin: 30px 15px;
    background-color: #333230;
    border-radius: 40px;
    transform: translateX(2000px);
    transition: .8s;
}

.modal.open .modal__box {
    transform: translateX(0);
}
.modal__box h1 {
    font-family: "Right Grotesk";
    color: #FFFFF7;
    font-size: 40px;
    font-weight: 900;
    margin: 0;  
}
.modal__box h4 {
    font-family: "Futura PT";
    color: #FFFFF7;
    font-size: 24px;
    font-weight: 500;
    transform: translate(0px,5px);
}

.modal__box input {
    margin: 0;
    width: 330px;
    padding: 0 0 6px 0;
    background-color: #333230;
    border: none;
    font-family: "Futura PT";
    font-weight: 500;
    font-size: 40px;
    color: #6E6D68;
}
.modal__box input:focus {
    outline: none;
}
.modal__close-btn {
    border: none;
    background-color: transparent;
    padding: 5px;
    position: absolute;
    top: 35px; right: 35px;
    cursor: pointer;
    transition: .8s;
    &:hover {
        transform: rotate(90deg);
    }
}
.modal.open {
    visibility: visible;
    opacity: 1;
}

 
.input_group {
    margin-bottom: 8px;
    width: 100%;
    position: relative;
    display: flex;
    padding: 0px 0;
}

.input_box {
    width: 100%;
    margin-right: 64px;
    position: relative;
}
.sing p{
    padding-top: 00px;
    transform: translate(0,27px);
}
.sing .input_box .name {
    margin-bottom:  70px;
}
.input_box:last-child {
    margin-right: 0;
}
.sing .input_box .mail {
    transform: rotate(25deg);
}
.error-message {
    color: #D34E4E ;
    list-style-type: disc;
    font-family: "Futura PT-Medium";
    font-size:  16px;
    position: relative;
    transform: translateY(0%);
    opacity: 1;
    display: none;
}
.input_box .name,
.input_box .name__mail,
.input_box .name__phone {
    padding: 14px 0px 6px 0px;
    width: 500px;
    border-bottom: 2px solid #FFFFF7;
    outline:none;
    letter-spacing: 1px;
    transition: 0.3s;
    color: #FFFFF7;
    font-size: 24px;
    line-height: 32px;
    margin-top: 26px;
}
.radio_1,.radio_2 {
    display: none;
}
.input_box label {
    width: 318px; height: 104px; 
    background-color: #fff;
    float: left;
    text-align: center;
    border: 1px solid #6E6D68;
    transition: .5s;
    margin-top: 35px;
    padding-top: 25px;

}
.input_box label:hover {
    background-color: #5C5B59; 
    transition: 0.5s;
}
.input_box span h2 {
    font-family: "Right Grotesk";
    font-size: 40px;    
} 
.input_box span {
    display: flex;
    flex-direction: column;
    font-size: 0px;
}
.input_box label:first-of-type {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right: none;
}
.input_box label:last-of-type {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: none;
}
.radio_1 + label,.radio_2 + label{
    background-color: #333230;
    color: #6E6D68;
    cursor: pointer;
}

.input_box p {
    font-family: "Futura PT-Medium";
    font-size: 16px;
}
.radio_1:checked+label {
    background-image: url(/img/RED.webp);
    background-size: contain;
    background-repeat: no-repeat;
    transition: 0.5s;
    color: #1C1616;
    transition: none;
    border: none;
}
.radio_2:checked+label {
    background-image: url(/img/RUSSIA1.png);
    background-size: contain;
    background-repeat: no-repeat;
    transition: 0.5s;
    color: #1C1616;
    transition: none;
    border: none; 
}
.input_box button {
    background-color: #333230;
    transition: all 0.3s ease;
    background-image: url(/img/pay.webp);
    width: 500px; height: 154px;
}
.input_box button:hover {
    cursor: pointer;
    background-image: url(/img/pay_h.webp);
}

.valute {
    display: flex;
    align-items: center;
    width: 435px;
    margin-bottom: 70px;
    margin-top: 10px;
}
.valute i {
    position: relative;
    width: 20px;
    height: 2px;
}
.valute i:before, .valute i:after {
    content: "";
    position: absolute;
    background-color: #ffffff;
    width: 32px;
    height: 8px;
}
.valute i:before {
    transform: translate(16px, 3px) rotate(0deg);
}
.valute i:after {
    transform: translate(16px, 19px) rotate(0deg);
}

.agreement {
    margin-top: 40px;
}
.agreement .input_box label {
    width: auto;
    height: auto;
    background-color: transparent;
    float: none;
    text-align: left;
    border: none;
    margin-top: 0;
    padding-top: 0;
    border-radius: 0;
}
.agreement .input_box label:hover {
    background-color: transparent;
}
.agreement .input_box span {
    display: inline;
    font-size: 14px;
}
.agreement__label {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding-left: 36px;
    user-select: none;
}
.agreement__checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.agreement__checkmark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 2px solid #6E6D68;
    border-radius: 4px;
    background-color: transparent;
    transition: background-color 0.2s, border-color 0.2s;
}
.agreement__checkbox:checked ~ .agreement__checkmark {
    background-color: #FF7D00;
    border-color: #FF7D00;
}
.agreement__checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid #FFFFF7;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.agreement__checkbox:checked ~ .agreement__checkmark::after {
    display: block;
}
.agreement__text {
    font-family: "Futura PT";
    font-size: 14px;
    color: #6E6D68;
}
.agreement__link {
    color: #FF7D00;
    text-decoration: underline;
    transition: color 0.2s;
}
.agreement__link:hover {
    color: #ff9a3c;
}
#donate-submit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pay {
    margin-top: 85px;
}
::-webkit-input-placeholder {  color: #fffff7;}
.input_box .capcha {
    
}
.g-recaptcha {
    border: 2px solid #6E6D68;
    border-radius: 8px;
    width: 334px; height: 104px;
    align-content: center;
    margin-top: 35px;
    padding-left: 15px;
}
.capcha {
    transform: translateX(-125px);
}

/* //////////////////////////////////////// */

@media (max-width: 1400px) {
    .modal__box {
        position: relative;
        width: 360px;
        height: 1508px;
        padding: 0px 0px;
        z-index: 1;
        margin: 30px 15px;
        background-color: #333230;
        border-radius: 0px;
        transform: translateX(2000px);
        transition: .8s;
    }
    .input_group {
        margin-bottom: 0px;
        width: 100%;
        position: relative;
        display: flex;
        padding: 0px 0 0 0;
        flex-direction: column;
    }
    .modal__box h4 {
        font-family: "Futura PT";
        color: #FFFFF7;
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
        transform: translate(0px, 5px);
    }
    .input_box .name,
    .input_box .name__mail,
    .input_box .name__phone {
        padding: 0px 0px 6px 0px;
        width: 320px;
        border-bottom: 2px solid #FFFFF7;
        outline: none;
        letter-spacing: 1px;
        transition: 0.3s;
        color: #FFFFF7;
        font-size: 16px;
        line-height: 24px;
        margin-top: 0px;
    }
    .modal form {
        padding-top: 104px;
        margin: 0 20px;
    }
    .sing p {
        margin-top: 24px;
        transform: translate(0,0);
    }
    .sing .input_box .name  {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .sing .input_box .name__mail  {
        margin-top: 0px;
        margin-bottom: 16px;
    }
    .sing .input_box .name__phone {
        margin-bottom: 80px;
    }
    .input_box {
        width: 100%;
        margin-right: 0px;
        position: relative;
    }
    .modal__box h1 {
        font-family: "Right Grotesk";
        color: #FFFFF7;
        font-size: 16px;
        line-height: 32px;
        font-weight: 900;
        margin: 0;
    }
    .valute {
        margin-top: 24px;
        margin-bottom: 80px;
        gap: 30px;
    }
    .valute i {
        position: relative;
        width: 20px;
        height: 2px;
    }
    .valute i:before, .valute i:after {
        content: "";
        position: absolute;
        background-color: #ffffff;
        width: 32px;
        height: 8px;
    }
    .valute i:before {
        transform: translate(150px, 8px) rotate(0deg);
    }
    .valute i:after {
        transform: translate(150px, -8px) rotate(0deg);
    }
    .radio_1:checked+label {
        background-image: url(/img/mobile/RED_mobile.png);
        width: 320px;
        background-repeat: no-repeat;
        transition: 0.5s;
        color: #1C1616;
        transition: none;
        border: none;
    }
    .radio_2:checked+label {
        background-image: url(/img/mobile/Russian_mobile.png);
        width: 320px;
        background-repeat: no-repeat;
        transition: 0.5s;
        color: #1C1616;
        transition: none;
        border: none;
    }
    .input_box h4 {
        padding-bottom: 24px;
    }
    .input_box label {
        width: 319px;
        height: 80px;
        /* background-color: #fff; */
        float: left;
        text-align: center;
        border: 1px solid #6E6D68;
        transition: .5s;
        margin-top: 0px;
        padding-top: 0px;
    }
    .input_box label:first-of-type {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom-left-radius: 0px;
        border-bottom: none;
        border-right: 1px solid #6E6D68;
    }
    .input_box label:last-of-type {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        border-top: none;
        border-left: 1px solid #6E6D68;
    }
    .input_box span h2{
        font-family: "Right Grotesk";
        font-size: 24px;
        padding-bottom: 0px;
        -moz-font-size:10px;
    }
    .input_box span {
        display: flex; 
        flex-direction: column;  
        font-size: 10px;
        padding-top: 15px;
      }
    .agreement .input_box label {
        width: auto;
        height: auto;
        background-color: transparent;
        float: none;
        text-align: left;
        border: none;
        margin-top: 0;
        padding-top: 0;
        border-radius: 0;
    }
    .agreement .input_box label:hover {
        background-color: transparent;
    }
    .agreement .input_box label:first-of-type,
    .agreement .input_box label:last-of-type {
        border: none;
        border-radius: 0;
    }
    .agreement .input_box span {
        display: inline;
        font-size: 14px;
        padding-top: 0;
    }
    .pay {
        margin-top: 0px;
    }
    .input_box button {
        background-color: #333230;
        transition: all 0.3s ease;
        background-image: url(/img/mobile/Pay\ Mobile.png);
        width: 320px; height: 96px;
    }
    .input_box button:hover {
        cursor: pointer;
        background-image: url(/img/mobile/Pay\ Mobile_Hov.png);
    }
    .g-recaptcha {
        border: 2px solid #6E6D68;
        border-radius: 8px;
        width: 320px; height: 94px;
        align-content: center;
        margin-top: 24px;
        margin-bottom: 80px;
        padding-left: 7px;
    }
    .capcha h4 {
        padding-top: 78px;
        padding-bottom: 0px;
    }
    .capcha {
        transform: translateX(0px);
    }
    .modal__close-btn {
        border: none;
        background-color: transparent;
        padding: 0px 0px 0 0 ;
        position: absolute;
        top: 40px;
        right: 20px;
        cursor: pointer;
        transition: .8s;
        &:hover {
            transform: rotate(90deg);
        }
    }
}