/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*
* Prefixed by:
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

.gradient-border {
    border: 1px solid;
    border-color: linear-gradient(94deg, #BF5AF2 0%, #64D2FF 48%, #0A84FF 100%);
    }

.gradient-text-hot {
    background: -o-linear-gradient(90deg, #BF5AF2 0%, #FF2D55 49.98%, #FF9F0A 100%);
    background: linear-gradient(90deg, #BF5AF2 0%, #FF2D55 49.98%, #FF9F0A 100%);
    -webkit-background-clip: text;
    color: transparent;
    }

    .gradient-text {
    background: -o-linear-gradient(356deg, #BF5AF2 0%, #64D2FF 48%, #0A84FF 100%);
    background: linear-gradient(94deg, #BF5AF2 0%, #64D2FF 48%, #0A84FF 100%);
    -webkit-background-clip: text;
    color: transparent;
    }

    .gradient-text-chat {
    background: -o-linear-gradient(356deg, #FF3CBD  0%, #FF2D85 48%, #FF7ED3  100%);
    background: linear-gradient(94deg, #FF3CBD 0%, #FF2D85 48%, #FF7ED3 100%);
    -webkit-background-clip: text;
    color: transparent;
    }


    @font-face {
    font-family: "Int";
    src: url("../font/inter.ttf");
    }

    @font-face {
    font-family: "IntR";
    src: url("../font/intR.ttf");
    }

    @media screen and (min-width: 0) and (max-width: 768px) {
    .imgHeader{
        position: relative;
        width: 185px;

    }
    .Page1{
        width: 100%;
        flex-direction: column-reverse;
    }
    .divText{
            position: relative;
    right: 40px;
            height: 356px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    display: inline-flex;
        }
        .mainText1{
         width: 90%;
        position: relative;
        left: 9%;
        font-size: 24px;
    }
        .buttonsApp2Button{
            margin-top: 20px;
    }
    .mainTextBottom1{
        width: 90%;
        position: relative;
        left: 9%;
        font-size: 24px;
    }
    .mainTextBottom2{
        width: 90%;
        position: relative;
        left: 9%;
        font-size: 18px;
    }
    .mainText2{
        width: 90%;
    position: relative;
    left: 8%;
    }
    .mainTextBottom3{
        font-size: 18px;
    }
    .buttonsApp{
        width: 50%;
    justify-content: space-between;
    align-items: flex-start;
    display: inline-flex;
    position: relative;
    flex-direction: column;
    left: 25%;
            margin-left: 10%;

    margin-top: 27px;
    }
    .scrollMouse{
        display: none;
    }
    .phone1{
        width: 141px;
    height: 241px;
    }
     .phone2{
        width: 141px;
    height: 241px;
    }

    .2Page{
            padding-top: 100px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1px;
    display: inline-flex;
    }
    .2PageMainText{
        font-size: 24px;
        font-weight: 600;
        line-height: 30px;
        width: 100%;
        margin-left: 30%;
    }


}

    @media screen and (min-width: 1025px) and (max-width: 1445px) {

        .hotScreen{
            width: 245px;
            height: 465px;
        }
        .hotScreen2{
             width: 245px; height: 465px; position: relative; left: -20px;
         }
         .hotScreen3{
             width: 245px; height: 465px; position: relative; left: -50px;
         }

         .chatScreen{
            width: 245px; height: 465px;
        }
         .chatScreen2{
             width: 245px; height: 465px; position: relative; z-index: 9999;
    left: -55px;
         }
         .chatScreen3{
             width: 245px; height: 465px; position: relative; left: -86px;
         }

    .2PageMainText{
font-size: 40px; font-weight: 600; line-height: 48px;    }

    .Page1{
        width: 1664px;
    }

    .2Page{
         padding: 128px; flex-direction: column; justify-content: flex-start; align-items: center; gap: 104px; display: inline-flex
    }

        .mainTextBottom3{
        font-size: 24px;
    }
        .mainTextBottom1{
        width: 100%;
        font-size: 45px;
    }
         .mainTextBottom2{
        width: 100%
        font-size: 24px;
    }
        .mainText1{
            width: 530px;
            position: relative;
            left: 280px;
        }
         .mainText2{
    width: 568px;
    position: relative;
    left: 275px;
         }
        .divText{
            position: relative;
    right: 40px;
        height: 408px;
        }
        .buttonsApp{
        position: relative;
        /* top: 163px; */
        left: 275px;
        width: 401px;
        }
        .phonesDiv1{
            width: 580px;
            height:502px;
            position: relative;
            right: 190px;
        }

        .phonesDiv1Hot{
            width: 580px;
            height:502px;
            position: relative;
            right: 270px;
        }
        .phone1{width: 282px;
    height: 502px;}
        .phone2{width: 276px;
    height: 502px;}
        .scrollMouse{
            position: relative;
        display: inline-flex;
    top: 80px;
        }
        .text2{
            position: relative;
            left: -40px;
        }
        .Big2Page{
             width: 785px;
    height: 1060px;
    top: -100px;
    left: -46px;
         }
        .Big2PageDiv1{
width: 295px;
    height: 600px;
    padding: 16px;
    left: 274px;
    top: 36px;         }
         .Big2PageDiv2{
width: 295px;
    height: 600px;
    padding: 12px;
    left: 0px;
    top: 200px;         }
        .beforeAfter{
            width: 766px;
            height: 779px;
            position: relative;
            top: -180px;
         }
        .beforeAfterDiv1{
         width: 540.18px;
         }
        .beforeAfterImgDiv1{
        width: 312px;
    height: 220px;
         }
        .beforeAfterImgDivWithImgs1{
width: 299px;
    height: 220px;
}
        .beforeAfterDiv2{
         width: 430.17999999999995px;
         }
        .beforeAfterImgDiv2{
    width: 268px;
    height: 320px;
        }
        .beforeAfterDiv3{
            width: 611.51px;
         }
        .beforeAfterImgDiv3{
             width: 281px;
    height: 220px;
         }
        .beforeAfterDiv4{
    width: 609.18px;
        }
        .beforeAfterImgDiv4{
    width: 312px;
    height: 220px;
        }
    .arr2{
               width: 905px;
    height: 250px;
    position: relative;
    left: 18%;
    transform: rotate(353deg);
    margin-top: -480px;
         }
        .beforeAfterImg41{
            width: 170px;
    height: 255px;
    right: 19px
         }
        .text3Page{
                position: relative;
                left: 250px;
     }
        .Page4{
          left:6.5%;
         }
        .igmStar{
            left: 32%;
        }
    .textAbout{
            position: relative;
            right: 70px;
        }
        .imgAbout{
    width: 700px;
    height: 650px;
    border-radius: 8px;
    margin-right: 133px;
    position: relative;
    right: 30%;        }

        .textAboutBottom{
            width: 510px;
        }
    }
     @media screen and (min-width: 1446px) and (max-width: 2000px) {

         .hotScreen{
            width: 311.588px; height: 600px;
        }
         .hotScreen2{
             width: 311.588px; height: 600px; position: relative; left: -20px;
         }
         .hotScreen3{
             width: 311.588px; height: 600px; position: relative; left: -50px;
         }

         .chatScreen{
            width: 311.588px; height: 600px;
        }
         .chatScreen2{
             width: 311.588px; height: 600px; position: relative; z-index: 9999;
    left: -69px;
         }
         .chatScreen3{
             width: 311.588px; height: 600px; position: relative; left: -108px;
         }

    .2PageMainText{
        font-size: 40px; font-weight: 600; line-height: 48px;
    }
      .mainTextBottom3{
        font-size: 24px;
    }
   .2Page{
         padding: 128px; flex-direction: column; justify-content: flex-start; align-items: center; gap: 104px; display: inline-flex
    }
      .mainTextBottom2{
        width: 100%
        font-size: 24px;
    }
     .Page1{
        width: 1664px;
    }
        .mainTextBottom1{
        width: 100%;
        font-size: 60px;
    }
        .mainText1{
            width: 830px;

        }
        .divText{height: 408px;}
 .scrollMouse{
        display: inline-flex

        }
         .mainText2{
    width: 677px;
         }
.phone1{width: 336px; height: 640px}
        .phone2{width: 380px; height: 640px}

         .buttonsApp{
    top: 56px;
        width: 401px;

        }
         .Big2Page{
         width: 812px; height: 1060px;
         }
         .Big2PageDiv1{
         width: 423px; height: 860px; padding: 24px; left: 389px; top: 0px;
         }
         .Big2PageDiv2{
         width: 423px; height: 860px; padding: 24px; left: 0px; top: 200px;
         }
         .beforeAfter{
         width: 790px; height: 1132px;
         }
         .beforeAfterDiv1{
         width: 726.18px;
         }
         .beforeAfterImgDiv1{
         width: 312px; height: 220px;
         }
.beforeAfterImgDivWithImgs1{
width: 312px; height: 220px;
}
         .beforeAfterDiv2{
         width: 726.18px;
         }
         .beforeAfterImgDiv2{
         width: 312px; height: 220px;
         }
         .beforeAfterDiv3{
         width: 723.51px;
         }
         .beforeAfterImgDiv3{
         width: 312px; height: 220px;
         }
         .beforeAfterDiv4{
         width: 726.18px;
         }
         .beforeAfterImgDiv4{
         width: 312px; height: 220px;
         }
         .arr2{
         width: 1273px; height: 250px;position: relative; left: 18%; top: -100px;
         }
         .beforeAfterImg41{
         width: 228px; height: 255px; right: 40px;
         }

         .Page4{
          left:23.5%;
         }
         .igmStar{
         left: 37.5%;
         }
    .imgAbout{
        width:840px; height: 740px; border-radius: 8px; margin-right:128px;
        }
        .textAboutBottom{
            width: 750px;
        }
     }