html {
    scroll-behavior: smooth
}

@font-face {
    font-family: caveat;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v17/Wnz6HAc5bAfYB2Q7azYYmg8.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}

@font-face {
    font-family: caveat;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v17/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
    font-family: caveat;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v17/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: caveat;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v17/Wnz6HAc5bAfYB2Q7ZjYY.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: caveat;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v17/Wnz6HAc5bAfYB2Q7azYYmg8.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}

@font-face {
    font-family: caveat;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v17/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
    font-family: caveat;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v17/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: caveat;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v17/Wnz6HAc5bAfYB2Q7ZjYY.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: caveat;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v17/Wnz6HAc5bAfYB2Q7azYYmg8.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}

@font-face {
    font-family: caveat;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v17/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
    font-family: caveat;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v17/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: caveat;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v17/Wnz6HAc5bAfYB2Q7ZjYY.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: caveat;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v17/Wnz6HAc5bAfYB2Q7azYYmg8.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}

@font-face {
    font-family: caveat;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v17/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
    font-family: caveat;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v17/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: caveat;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v17/Wnz6HAc5bAfYB2Q7ZjYY.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: AvertaStd-Regular;
    src: url(../font/AvertaStd-Regular.ttf);
    font-display: swap
}

@font-face {
    font-family: AvertaStd-Semibold;
    src: url(../font/AvertaStd-Semibold.ttf);
    font-display: swap
}

@font-face {
    font-family: AvertaStd-Bold;
    src: url(../font/AvertaStd-Bold.ttf);
    font-display: swap
}

.AvertaStd-Regular {
    font-family: avertastd-regular
}

.AvertaStd-Bold {
    font-family: avertastd-bold
}

.AvertaStd-Semibold {
    font-family: avertastd-semibold;
    font-display: swap
}

.caveat {
    font-family: caveat, cursive
}

.swiper-slide {}

body {
    font-family: poppins, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #151515;
    background-color: #fff
}

a {
    text-decoration: none
}

a:hover {
    text-decoration: none
}

p {
    margin-bottom: 0
}

ul {
    padding: 0;
    list-style: none;
    margin: 0
}

.ls1 {
    letter-spacing: 1px
}

.ls2 {
    letter-spacing: 2px
}

.ls9 {
    letter-spacing: 9px
}

.padding0 {
    padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0
}

@media(min-width:240px) {
    .xs8 {
        font-size: 8px
    }

    .xs9 {
        font-size: 9px
    }

    .xs10 {
        font-size: 10px
    }

    .xs11 {
        font-size: 11px
    }

    .xs12 {
        font-size: 12px
    }

    .xs13 {
        font-size: 13px
    }

    .xs14 {
        font-size: 14px
    }

    .xs15 {
        font-size: 15px
    }

    .xs16 {
        font-size: 16px
    }

    .xs17 {
        font-size: 17px
    }

    .xs18 {
        font-size: 18px
    }

    .xs19 {
        font-size: 19px
    }

    .xs20 {
        font-size: 20px
    }

    .xs21 {
        font-size: 21px
    }

    .xs22 {
        font-size: 22px
    }

    .xs23 {
        font-size: 23px
    }

    .xs24 {
        font-size: 24px
    }

    .xs25 {
        font-size: 25px
    }

    .xs27 {
        font-size: 27px
    }

    .xs28 {
        font-size: 28px
    }

    .xs29 {
        font-size: 29px
    }

    .xs30 {
        font-size: 30px
    }

    .xs31 {
        font-size: 31px
    }

    .xs33 {
        font-size: 33px
    }

    .xs35 {
        font-size: 35px
    }

    .xs37 {
        font-size: 37px
    }

    .xs39 {
        font-size: 39px
    }

    .xs40 {
        font-size: 40px
    }

    .xs41 {
        font-size: 41px
    }

    .xs43 {
        font-size: 43px
    }

    .xs45 {
        font-size: 45px
    }

    .xs47 {
        font-size: 47px
    }

    .xs49 {
        font-size: 49px
    }

    .xs51 {
        font-size: 51px
    }

    .xs56 {
        font-size: 56px
    }

    .xs60 {
        font-size: 60px
    }

    .xs70 {
        font-size: 70px
    }

    .xs85 {
        font-size: 85px
    }

    .xsmt1 {
        margin-top: 1%
    }

    .xsmt2 {
        margin-top: 2%
    }

    .xsmt3 {
        margin-top: 3%
    }

    .xsmt4 {
        margin-top: 4%
    }

    .xsmt5 {
        margin-top: 5%
    }

    .xsmt6 {
        margin-top: 6%
    }

    .xsmt8 {
        margin-top: 8%
    }

    .xsmt13 {
        margin-top: 13%
    }

    .xsmt20 {
        margin-top: 20%
    }

    .xsmb1 {
        margin-bottom: 1%
    }

    .xsmb2 {
        margin-bottom: 2%
    }

    .xsmb3 {
        margin-bottom: 3%
    }

    .xsmb4 {
        margin-bottom: 4%
    }

    .xsmb6 {
        margin-bottom: 6%
    }

    .xsmb7 {
        margin-bottom: 7%
    }

    .xsmb8 {
        margin-bottom: 8%
    }

    .xsmb10 {
        margin-bottom: 10%
    }

    .xsmb15 {
        margin-bottom: 15%
    }

    .xsmb0 {
        margin-bottom: 0%
    }

    .xsmt-1 {
        margin-top: -1%
    }

    .xsmt-3 {
        margin-top: -3%
    }

    .xsmt-11 {
        margin-top: -11%
    }

    .mycontainer {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto
    }

    .mycontainer2 {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto
    }

    .mycontainer3 {
        width: 95%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto
    }

    .about-section3-box:nth-child(1) {
        border-bottom: 1px solid #d4ebf6
    }

    .about-section3-box:nth-child(2) {
        border-bottom: 1px solid #d4ebf6
    }

    .about-section3-box:nth-child(3) {
        border-bottom: 1px solid #d4ebf6
    }

    .about-section3-box:nth-child(4) {
        border-bottom: 1px solid #d4ebf6
    }

    .about-section3-box:nth-child(5) {
        border-bottom: 1px solid #d4ebf6
    }

    .about-section3-box:nth-child(6) {}
}

@media(min-width:768px) {
    .sm8 {
        font-size: 8px
    }

    .sm9 {
        font-size: 9px
    }

    .sm10 {
        font-size: 10px
    }

    .sm11 {
        font-size: 11px
    }

    .sm12 {
        font-size: 12px
    }

    .sm13 {
        font-size: 13px
    }

    .sm14 {
        font-size: 14px
    }

    .sm15 {
        font-size: 15px
    }

    .sm16 {
        font-size: 16px
    }

    .sm17 {
        font-size: 17px
    }

    .sm18 {
        font-size: 18px
    }

    .sm19 {
        font-size: 19px
    }

    .sm20 {
        font-size: 20px
    }

    .sm21 {
        font-size: 21px
    }

    .sm22 {
        font-size: 22px
    }

    .sm23 {
        font-size: 23px
    }

    .sm24 {
        font-size: 24px
    }

    .sm25 {
        font-size: 25px
    }

    .sm27 {
        font-size: 27px
    }

    .sm28 {
        font-size: 28px
    }

    .sm29 {
        font-size: 29px
    }

    .sm30 {
        font-size: 30px
    }

    .sm31 {
        font-size: 31px
    }

    .sm32 {
        font-size: 32px
    }

    .sm33 {
        font-size: 33px
    }

    .sm35 {
        font-size: 35px
    }

    .sm37 {
        font-size: 37px
    }

    .sm38 {
        font-size: 38px
    }

    .sm39 {
        font-size: 39px
    }

    .sm40 {
        font-size: 40px
    }

    .sm41 {
        font-size: 41px
    }

    .sm43 {
        font-size: 43px
    }

    .sm44 {
        font-size: 44px
    }

    .sm45 {
        font-size: 45px
    }

    .sm46 {
        font-size: 46px
    }

    .sm47 {
        font-size: 47px
    }

    .sm49 {
        font-size: 49px
    }

    .sm51 {
        font-size: 51px
    }

    .sm55 {
        font-size: 55px
    }

    .sm60 {
        font-size: 60px
    }

    .sm70 {
        font-size: 70px
    }

    .sm80 {
        font-size: 80px
    }

    .sm100 {
        font-size: 100px
    }

    .sm130 {
        font-size: 130px
    }

    .lmt0 {
        margin-top: 0%
    }

    .lmt1 {
        margin-top: 1%
    }

    .lmt2 {
        margin-top: 2%
    }

    .lmt3 {
        margin-top: 3%
    }

    .lmt4 {
        margin-top: 4%
    }

    .lmt5 {
        margin-top: 5%
    }

    .lmt10 {
        margin-top: 10%
    }

    .lmt13 {
        margin-top: 13%
    }

    .lmt6 {
        margin-top: 6%
    }

    .lmt7 {
        margin-top: 7%
    }

    .lmt8 {
        margin-top: 8%
    }

    .lmt9 {
        margin-top: 9%
    }

    .lmt11 {
        margin-top: 11%
    }

    .lmt12 {
        margin-top: 12%
    }

    .lmt16 {
        margin-top: 16%
    }

    .lmt18 {
        margin-top: 18%
    }

    .lmt12 {
        margin-top: 12%
    }

    .lmt13 {
        margin-top: 13%
    }

    .lmt14 {
        margin-top: 14%
    }

    .lmt15 {
        margin-top: 15%
    }

    .lmt18 {
        margin-top: 18%
    }

    .lmt20 {
        margin-top: 20%
    }

    .lmt22 {
        margin-top: 22%
    }

    .lmt25 {
        margin-top: 25%
    }

    .lmt28 {
        margin-top: 28%
    }

    .lmt30 {
        margin-top: 30%
    }

    .lmt34 {
        margin-top: 34%
    }

    .lmt45 {
        margin-top: 45%
    }

    .lmt-15 {
        margin-top: -14%
    }

    .lmt-25 {
        margin-top: -25%
    }

    .lmt-3 {
        margin-top: -3%
    }

    .lmt-1 {
        margin-top: -1%
    }

    .lmt-2 {
        margin-top: -2%
    }

    .lmt-3 {
        margin-top: -3%
    }

    .lmt-4 {
        margin-top: -4%
    }

    .lmt-5 {
        margin-top: -5%
    }

    .lmt-6 {
        margin-top: -6%
    }

    .lmt-7 {
        margin-top: -7%
    }

    .lmt-8 {
        margin-top: -8%
    }

    .lmt-9 {
        margin-top: -9%
    }

    .lmt-11 {
        margin-top: -11%
    }

    .lmt-13 {
        margin-top: -13%
    }

    .lmt-20 {
        margin-top: -20%
    }

    .lmb0 {
        margin-bottom: 0%
    }

    .lmb1 {
        margin-bottom: 1%
    }

    .lmb2 {
        margin-bottom: 2%
    }

    .lmb7 {
        margin-bottom: 7%
    }

    .lmb10 {
        margin-bottom: 10%
    }

    .lmb15 {
        margin-bottom: 15%
    }

    .lmb30 {
        margin-bottom: 30%
    }

    .lmb-8 {
        margin-bottom: -8%
    }

    .lmb-4 {
        margin-bottom: -4%
    }

    .lml-2 {
        margin-left: -2%
    }

    .pc-right {
        text-align: right
    }

    .mobile-center {
        text-align: left
    }

    .mycontainer {
        width: 730px
    }

    .mycontainer2 {
        width: 750px
    }

    .mycontainer3 {
        width: 730px
    }

    .about-section3-box:nth-child(1) {
        border-right: 1px solid #d4ebf6;
        border-bottom: 1px solid #d4ebf6
    }

    .about-section3-box:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid #d4ebf6
    }

    .about-section3-box:nth-child(3) {
        border-right: 1px solid #d4ebf6;
        border-bottom: 1px solid #d4ebf6
    }

    .about-section3-box:nth-child(4) {
        border-right: 0;
        border-bottom: 1px solid #d4ebf6
    }

    .about-section3-box:nth-child(5) {
        border-right: 1px solid #d4ebf6;
        border-bottom: 0
    }

    .about-section3-box:nth-child(6) {
        border-right: 0;
        border-bottom: 0
    }
}

@media(min-width:992px) {
    .arrowBanner {
        max-width: 7%
    }

    .md8 {
        font-size: 8px
    }

    .md9 {
        font-size: 9px
    }

    .md10 {
        font-size: 10px
    }

    .md11 {
        font-size: 11px
    }

    .md12 {
        font-size: 12px
    }

    .md13 {
        font-size: 13px
    }

    .md14 {
        font-size: 14px
    }

    .md15 {
        font-size: 15px
    }

    .md16 {
        font-size: 16px
    }

    .md17 {
        font-size: 17px
    }

    .md18 {
        font-size: 18px
    }

    .md19 {
        font-size: 19px
    }

    .md20 {
        font-size: 20px
    }

    .md21 {
        font-size: 21px
    }

    .md22 {
        font-size: 22px
    }

    .md23 {
        font-size: 23px
    }

    .md24 {
        font-size: 24px
    }

    .md25 {
        font-size: 25px
    }

    .md26 {
        font-size: 26px
    }

    .md27 {
        font-size: 27px
    }

    .md28 {
        font-size: 28px
    }

    .md29 {
        font-size: 29px
    }

    .md30 {
        font-size: 30px
    }

    .md31 {
        font-size: 31px
    }

    .md32 {
        font-size: 32px
    }

    .md33 {
        font-size: 33px
    }

    .md34 {
        font-size: 34px
    }

    .md35 {
        font-size: 35px
    }

    .md36 {
        font-size: 36px
    }

    .md37 {
        font-size: 37px
    }

    .md38 {
        font-size: 38px
    }

    .md39 {
        font-size: 39px
    }

    .md40 {
        font-size: 40px
    }

    .md41 {
        font-size: 41px
    }

    .md42 {
        font-size: 42px
    }

    .md44 {
        font-size: 44px
    }

    .md45 {
        font-size: 45px
    }

    .md46 {
        font-size: 46px
    }

    .md47 {
        font-size: 47px
    }

    .md48 {
        font-size: 48px
    }

    .md49 {
        font-size: 49px
    }

    .md50 {
        font-size: 50px
    }

    .md51 {
        font-size: 51px
    }

    .md52 {
        font-size: 52px
    }

    .md53 {
        font-size: 53px
    }

    .md54 {
        font-size: 54px
    }

    .md55 {
        font-size: 55px
    }

    .md56 {
        font-size: 56px
    }

    .md58 {
        font-size: 58px
    }

    .md66 {
        font-size: 66px
    }

    .md68 {
        font-size: 68px
    }

    .md60 {
        font-size: 60px
    }

    .md64 {
        font-size: 64px
    }

    .md75 {
        font-size: 75px
    }

    .md70 {
        font-size: 70px
    }

    .md80 {
        font-size: 80px
    }

    .md84 {
        font-size: 84px
    }

    .md90 {
        font-size: 90px
    }

    .md106 {
        font-size: 106px
    }

    .md170 {
        font-size: 170px
    }

    .md210 {
        font-size: 240px
    }

    .mmb0 {
        margin-bottom: 0%
    }

    .mmb3 {
        margin-bottom: 3%
    }

    .mmb5 {
        margin-bottom: 5%
    }

    .mmb7 {
        margin-bottom: 7%
    }

    .mmb8 {
        margin-bottom: 8%
    }

    .mmb11 {
        margin-bottom: 11%
    }

    .mmb12 {
        margin-bottom: 12%
    }

    .mmb14 {
        margin-bottom: 14%
    }

    .mmb15 {
        margin-bottom: 15%
    }

    .mmb16 {
        margin-bottom: 16%
    }

    .mmb20 {
        margin-bottom: 20%
    }

    .mmb28 {
        margin-bottom: 28%
    }

    .mmb35 {
        margin-bottom: 35%
    }

    .mmt0 {
        margin-top: 0%
    }

    .mmt1 {
        margin-top: 1%
    }

    .mmt2 {
        margin-top: 2%
    }

    .mmt3 {
        margin-top: 3%
    }

    .mmt4 {
        margin-top: 4%
    }

    .mmt5 {
        margin-top: 5%
    }

    .mmt6 {
        margin-top: 6%
    }

    .mmt7 {
        margin-top: 7%
    }

    .mmt8 {
        margin-top: 8%
    }

    .mmt10 {
        margin-top: 10%
    }

    .mmt11 {
        margin-top: 11%
    }

    .mmt12 {
        margin-top: 12%
    }

    .mmt13 {
        margin-top: 13%
    }

    .mmt14 {
        margin-top: 14%
    }

    .mmt15 {
        margin-top: 15%
    }

    .mmt18 {
        margin-top: 18%
    }

    .mmt11a {
        margin-top: 11.6%
    }

    .mmt20 {
        margin-top: 20%
    }

    .mmt28 {
        margin-top: 28%
    }

    .mmt31 {
        margin-top: 31%
    }

    .mmt36 {
        margin-top: 36%
    }

    .mmt-2 {
        margin-top: -2%
    }

    .mmt-3 {
        margin-top: -3%
    }

    .mmt-4 {
        margin-top: -4%
    }

    .mmt-5 {
        margin-top: -5%
    }

    .mmt-8 {
        margin-top: -8%
    }

    .mmt-9 {
        margin-top: -9%
    }

    .mmt-9a {
        margin-top: -9.5%
    }

    .mmt-12 {
        margin-top: -12%
    }

    .mmb-5 {
        margin-bottom: -5%
    }

    .mmb-6 {
        margin-bottom: -6%
    }

    .mml-4 {
        margin-left: -4%
    }

    .mycontainer {
        width: 880px
    }

    .mycontainer2 {
        width: 922px
    }

    .about-section3-box:nth-child(1) {
        border-right: 1px solid #d4ebf6;
        border-bottom: 1px solid #d4ebf6
    }

    .about-section3-box:nth-child(2) {
        border-right: 1px solid #d4ebf6;
        border-bottom: 1px solid #d4ebf6
    }

    .about-section3-box:nth-child(3) {
        border-right: 0;
        border-bottom: 1px solid #d4ebf6
    }

    .about-section3-box:nth-child(4) {
        border-right: 1px solid #d4ebf6;
        border-bottom: 0
    }

    .about-section3-box:nth-child(5) {
        border-right: 1px solid #d4ebf6
    }

    .about-section3-box:nth-child(6) {}
}

@media(min-width:1200px) {
    .arrowBanner {
        max-width: 8%
    }

    .lg8 {
        font-size: 8px
    }

    .lg9 {
        font-size: 9px
    }

    .lg10 {
        font-size: 10px
    }

    .lg11 {
        font-size: 11px
    }

    .lg12 {
        font-size: 12px
    }

    .lg13 {
        font-size: 13px
    }

    .lg14 {
        font-size: 14px
    }

    .lg15 {
        font-size: 15px
    }

    .lg16 {
        font-size: 16px
    }

    .lg17 {
        font-size: 17px
    }

    .lg18 {
        font-size: 18px
    }

    .lg19 {
        font-size: 19px
    }

    .lg20 {
        font-size: 20px
    }

    .lg21 {
        font-size: 21px
    }

    .lg22 {
        font-size: 22px
    }

    .lg23 {
        font-size: 23px
    }

    .lg24 {
        font-size: 24px
    }

    .lg25 {
        font-size: 25px
    }

    .lg26 {
        font-size: 26px
    }

    .lg28 {
        font-size: 28px
    }

    .lg29 {
        font-size: 29px
    }

    .lg30 {
        font-size: 30px
    }

    .lg31 {
        font-size: 31px
    }

    .lg32 {
        font-size: 32px
    }

    .lg33 {
        font-size: 33px
    }

    .lg34 {
        font-size: 34px
    }

    .lg35 {
        font-size: 35px
    }

    .lg36 {
        font-size: 36px
    }

    .lg37 {
        font-size: 37px
    }

    .lg38 {
        font-size: 38px
    }

    .lg39 {
        font-size: 39px
    }

    .lg40 {
        font-size: 40px
    }

    .lg41 {
        font-size: 41px
    }

    .lg42 {
        font-size: 42px
    }

    ..lg43 {
        font-size: 43px
    }

    .lg44 {
        font-size: 44px
    }

    .lg45 {
        font-size: 45px
    }

    .lg46 {
        font-size: 46px
    }

    .lg47 {
        font-size: 47px
    }

    .lg48 {
        font-size: 48px
    }

    .lg49 {
        font-size: 49px
    }

    .lg50 {
        font-size: 50px
    }

    .lg51 {
        font-size: 51px
    }

    .lg52 {
        font-size: 52px
    }

    .lg53 {
        font-size: 53px
    }

    .lg54 {
        font-size: 54px
    }

    .lg55 {
        font-size: 55px
    }

    .lg56 {
        font-size: 56px
    }

    .lg58 {
        font-size: 58px
    }

    .lg62 {
        font-size: 62px
    }

    .lg60 {
        font-size: 60px
    }

    .lg64 {
        font-size: 64px
    }

    .lg68 {
        font-size: 68px
    }

    .lg71 {
        font-size: 71px
    }

    .lg70 {
        font-size: 70px
    }

    .lg80 {
        font-size: 80px
    }

    .lg82 {
        font-size: 82px
    }

    .lg86 {
        font-size: 86px
    }

    .lg100 {
        font-size: 100px
    }

    .lg106 {
        font-size: 106px
    }

    .lg180 {
        font-size: 180px
    }

    .lg210 {
        font-size: 240px
    }

    .lmtm-3 {
        margin-top: -3%
    }

    .lgmb0 {
        margin-bottom: 0%
    }

    .lgmb2 {
        margin-bottom: 2%
    }

    .lgmb3 {
        margin-bottom: 3%
    }

    .lgmb5 {
        margin-bottom: 5%
    }

    .lgmb11 {
        margin-bottom: 11%
    }

    .lgmb12 {
        margin-bottom: 12%
    }

    .lgmb22 {
        margin-bottom: 22%
    }

    .lgmb25 {
        margin-bottom: 25%
    }

    .lgmb-6 {
        margin-bottom: -6%
    }

    .lgmt5 {
        margin-top: 5%
    }

    .lgmt18 {
        margin-top: 18%
    }

    .lgmt13 {
        margin-top: 13%
    }

    .lgmt15 {
        margin-top: 15%
    }

    .lgmt23 {
        margin-top: 23%
    }

    .lgmt26 {
        margin-top: 26%
    }

    .lgmt29 {
        margin-top: 29%
    }
}

@media(min-width:1500px) {
    .xl8 {
        font-size: 8px
    }

    .xl9 {
        font-size: 9px
    }

    .xl10 {
        font-size: 10px
    }

    .xl11 {
        font-size: 11px
    }

    .xl12 {
        font-size: 12px
    }

    .xl13 {
        font-size: 13px
    }

    .xl14 {
        font-size: 14px
    }

    .xl15 {
        font-size: 15px
    }

    .xl16 {
        font-size: 16px
    }

    .xl17 {
        font-size: 17px
    }

    .xl18 {
        font-size: 18px
    }

    .xl19 {
        font-size: 19px
    }

    .xl20 {
        font-size: 20px
    }

    .xl21 {
        font-size: 21px
    }

    .xl22 {
        font-size: 22px
    }

    .xl23 {
        font-size: 23px
    }

    .xl24 {
        font-size: 24px
    }

    .xl25 {
        font-size: 25px
    }

    .xl26 {
        font-size: 26px
    }

    .xl27 {
        font-size: 27px
    }

    .xl28 {
        font-size: 28px
    }

    .xl29 {
        font-size: 29px
    }

    .xl30 {
        font-size: 30px
    }

    .xl31 {
        font-size: 31px
    }

    .xl32 {
        font-size: 32px
    }

    .xl33 {
        font-size: 33px
    }

    .xl34 {
        font-size: 34px
    }

    .xl35 {
        font-size: 35px
    }

    .xl36 {
        font-size: 36px
    }

    .xl37 {
        font-size: 37px
    }

    .xl38 {
        font-size: 38px
    }

    .xl39 {
        font-size: 39px
    }

    .xl40 {
        font-size: 40px
    }

    .xl41 {
        font-size: 41px
    }

    .xl42 {
        font-size: 42px
    }

    .xl44 {
        font-size: 43px
    }

    .xl45 {
        font-size: 45px
    }

    .xl46 {
        font-size: 46px
    }

    .xl47 {
        font-size: 47px
    }

    .xl48 {
        font-size: 48px
    }

    .xl49 {
        font-size: 49px
    }

    .xl50 {
        font-size: 50px
    }

    .xl51 {
        font-size: 51px
    }

    .xl52 {
        font-size: 52px
    }

    .xl53 {
        font-size: 53px
    }

    .xl55 {
        font-size: 55px
    }

    .xl56 {
        font-size: 56px
    }

    .xl58 {
        font-size: 58px
    }

    .xl65 {
        font-size: 65px
    }

    .xl60 {
        font-size: 60px
    }

    .xl75 {
        font-size: 75px
    }

    .xl70 {
        font-size: 70px
    }

    .xl80 {
        font-size: 80px
    }

    .xl87 {
        font-size: 87px
    }

    .xl170 {
        font-size: 170px
    }

    .xl210 {
        font-size: 240px
    }
}

.mycontainer-left {}

.responsive-video {
    padding-bottom: 56.21%;
    overflow: hidden;
    position: relative;
    z-index: 3;
    box-shadow: 0 19px 40px 0 rgba(0, 0, 0, .24);
    border-radius: 15px
}

.arrowBanner {
    position: absolute;
    right: 95%;
    bottom: 74%;
    z-index: 1
}

.video-box-main-out {
    padding: 0% 3.2%
}

.banner .video-box-main-inn {
    width: 100%;
    background-color: transparent;
    background-size: auto;
    background-size: cover;
    padding: 2.7%;
    border-radius: 30px;
    background-color: #6f99f8;
    margin-top: 6%;
    position: relative
}

.autoplayer-subarea,
.autoplayer-subarea iframe {
    border-radius: 20px !important
}

.video-box-main {
    padding: 0
}

.video-box {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 14px 40px 0 rgb(0 0 0/29%)
}

.videoBg {
    position: absolute;
    top: -2.5%;
    max-width: 123%;
    left: -9.5%
}

.autoplayer-subarea-16-by-9 {
    padding-bottom: 56.25% !important;
    border-radius: 0
}

.video-box iframe {
    border-radius: 15px
}

.demo {
    padding-bottom: 55.21%;
    overflow: hidden;
    position: relative;
    border: 0 solid #ffffff42
}

.demo-video-out {
    padding: 0 2.4%
}

.demo-video {}

.responsive-video iframe,
.responsive-video object,
.responsive-video lite-vimeo,
.responsive-video embed,
.responsive-video1 iframe,
.responsive-video1 object,
.responsive-video1 embed,
.responsive-demo-video embed,
.responsive-demo-video object,
.responsive-demo-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px
}

.autoplayer-area {
    z-index: 2
}

.gray {
    color: #546878
}

.black2 {
    color: #1f2024
}

.mycontainer {
    margin: auto
}

.italic {
    font-style: italic
}

.upper {
    text-transform: uppercase
}

.w100 {
    font-weight: 100
}

.w200 {
    font-weight: 200
}

.w300 {
    font-weight: 300
}

.w400 {
    font-weight: 400
}

.w500 {
    font-weight: 500
}

.w600 {
    font-weight: 600
}

.w700 {
    font-weight: 700
}

.w800 {
    font-weight: 800
}

.w900 {
    font-weight: 900
}

.lh0 {
    line-height: 0%
}

.lh50 {
    line-height: 50%
}

.lh60 {
    line-height: 60%
}

.lh70 {
    line-height: 70%
}

.lh80 {
    line-height: 80%
}

.lh90 {
    line-height: 90%
}

.lh100 {
    line-height: 100%
}

.lh110 {
    line-height: 110%
}

.lh120 {
    line-height: 120%
}

.lh130 {
    line-height: 130%
}

.lh140 {
    line-height: 140%
}

.lh145 {
    line-height: 145%
}

.lh150 {
    line-height: 150%
}

.lh160 {
    line-height: 160%
}

.lh170 {
    line-height: 170%
}

.lh180 {
    line-height: 180%
}

.lh190 {
    line-height: 190%
}

.lh200 {
    line-height: 200%
}

.lh210 {
    line-height: 210%
}

.lh220 {
    line-height: 220%
}

.lh230 {
    line-height: 230%
}

.mycontainer-left {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto
}

.mycontainer-right {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-left: auto
}

.clear {
    clear: both
}

.text-white {
    color: #fff
}

.videoframe {
    position: relative
}

.js-scroll {
    opacity: 0;
    transition: opacity 500ms
}

.js-scroll.scrolled {
    opacity: 1
}

.scrolled.fade-in {
    animation: fade-in .5s ease-in-out both
}

.scrolled.fade-in-bottom {
    animation: fade-in-bottom .5s ease-in-out both
}

.scrolled.fade-in-top {
    animation: fade-in-top .5s ease-in-out both
}

.scrolled.fade-in-left {
    animation: fade-in-left .5s ease-in-out both
}

.scrolled.fade-in-right {
    animation: fade-in-right .5s ease-in-out both
}

.scrolled.slide-left {
    animation: slide-in-left .5s ease-in-out both
}

.scrolled.slide-right {
    animation: slide-in-right .5s ease-in-out both
}

@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes fade-in-top {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

#more {
    display: none
}

#text {
    display: none
}

@media(max-width:500px) {
    section {
        font-size: 80%
    }
}

button.scrollToTopBtn.showBtn {
    background: #a854a5ab;
    border: none;
    font-size: 40px;
    border-radius: 59px;
    height: 60px;
    width: 60px;
    float: right;
    cursor: pointer;
    margin: -100px 20px 0 0;
    outline: none;
    color: #fff
}

button.scrollToTopBtn.showBtn:hover {
    background: #a854a5
}

.bounce {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    -moz-animation: bounce 2s infinite;
    -o-animation: bounce 2s infinite
}

@-webkit-keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        -webkit-transform: translateY(0)
    }

    40% {
        -webkit-transform: translateY(20px)
    }

    60% {
        -webkit-transform: translateY(15px)
    }
}

@-moz-keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        -moz-transform: translateY(0)
    }

    40% {
        -moz-transform: translateY(20px)
    }

    60% {
        -moz-transform: translateY(15px)
    }
}

@-o-keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        -o-transform: translateY(0)
    }

    40% {
        -o-transform: translateY(20px)
    }

    60% {
        -o-transform: translateY(15px)
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0)
    }

    40% {
        transform: translateY(20px)
    }

    60% {
        transform: translateY(15px)
    }
}

.banner-title {
    border-width: 1px;
    border-color: #8680f9;
    border-style: solid;
    display: inline-block;
    border-radius: 50px;
    padding: .4% 1.7%
}

.typewrite {
    color: #37beff
}

.gradient-text1 {
    padding: 0;
    background-image: linear-gradient(to right, #04d3dd 0%, #9f14f7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.cl-effect-3 a {
    padding: 8px 0
}

.cl-effect-3 a::after {
    position: absolute;
    top: 115%;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgb(51 189 255);
    content: '';
    opacity: 0;
    -webkit-transition: opacity .3s, -webkit-transform .3s;
    -moz-transition: opacity .3s, -moz-transform .3s;
    transition: opacity .3s, transform .3s;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    transform: translateY(10px)
}

.cl-effect-3 a:hover::after,
.cl-effect-3 a:focus::after {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px)
}

.header {
    z-index: 1;
    position: relative;
    margin: auto;
    padding: 1.5% 0% 10px
}

.menu {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 15px 2% 15px 0
}

a.navbar-brand {
    width: 11%
}

.btnn {
    margin: 0 18px 0 0%
}

.Arrowtext {
    position: absolute;
    top: -29%;
    left: 2%;
    z-index: 5;
    overflow: hidden;
    padding: 5px 0
}

.revoicertext {}

.arrow1 {
    position: absolute;
    top: -8%;
    left: 2%
}

.navbar-light .navbar-brand {
    color: rgba(0, 0, 0, .9)
}

.navbar-light .navbar-nav .nav-link {
    color: #222;
    position: relative;
    padding: 5px 10px;
    transition-duration: .3s
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #1fb6ff;
    transition-duration: .3s
}

a.nav-link {
    margin: 0 0 0 35px
}

.getlink {
    border-radius: 30px;
    background-color: #1fb6ff;
    padding: 11.5px 25.5px !important;
    color: #fff !important;
    box-shadow: 0 11px 18px 0 rgb(31 182 255/16%);
    transition-duration: .5s;
    text-align: center;
    display: inline-block
}

.getlink:hover {
    background-color: #26a5e2;
    box-shadow: 0 11px 18px 0 rgb(31 182 255/5%);
    transform: scale(1.1);
    transition-duration: .3s
}

.video-title {
    display: none
}

.banner {
    background: url(../images/banner2.jpg) no-repeat center top;
    background-size: auto;
    background-size: cover;
    padding: 3% 0%;
    margin-top: 0;
    overflow: hidden
}

.bannar-box {
    padding: 0%
}

.voiceline {
    position: relative;
    z-index: 1
}

.lwb-col--link {
    position: relative
}

.lwb-col--link::after {
    border-bottom: 10px solid;
    bottom: 2px;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    width: 100%;
    color: #fff;
    z-index: 0
}

.lwb-col--link::before {
    border-bottom: 10px solid #c1ebff;
    bottom: 2px;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    width: 100%;
    transition: transform .3s;
    z-index: 1;
    transform-origin: left center;
    animation: right-animate1 .5s ease alternate;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 1s
}

@keyframes right-animate1 {
    0% {
        transform: scaleX(0)
    }

    100% {
        transform: scaleX(1)
    }
}

img.img-fluid.d-block.salesline {
    position: absolute;
    bottom: -8px;
    right: 30%;
    overflow: hidden !important;
    z-index: 56
}

.zoom-effect-container {
    float: left;
    position: relative;
    width: 640px;
    height: 360px;
    margin: 0 auto;
    overflow: hidden
}

.image-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px
}

.image-card img {
    -webkit-transition: .4s ease;
    transition: .2s ease
}

.zoom-effect-container:hover .image-card img {
    -webkit-transform: scale(1.08);
    transform: scale(1.08)
}

a {}

.videoWrapper {
    position: relative;
    width: 100%;
    height: 0;
    background-color: #000;
    padding-top: 56%;
    border-radius: 15px
}

.videoIframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent
}

.videoPoster {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 0;
    outline: none;
    background-position: 50% 50%;
    background-size: 100% 100%;
    background-size: cover;
    text-indent: -999em;
    overflow: hidden;
    opacity: 1;
    -webkit-transition: opacity 800ms, height 0s;
    -moz-transition: opacity 800ms, height 0s;
    transition: opacity 800ms, height 0s;
    -webkit-transition-delay: 0s, 0s;
    -moz-transition-delay: 0s, 0s;
    transition-delay: 0s, 0s;
    border-radius: 15px
}

.videoWrapperActive .videoPoster {
    opacity: 0;
    height: 0;
    -webkit-transition-delay: 0s, 800ms;
    -moz-transition-delay: 0s, 800ms;
    transition-delay: 0s, 800ms
}

.videoIframe {
    position: absolute;
    top: 0;
    border-radius: 15px
}

.ele1 {
    position: absolute;
    right: -16%;
    top: -6%
}

.ele2 {
    position: absolute;
    bottom: -7%;
    left: 5%
}

.stroke-dotted {
    stroke-dasharray: 4, 5;
    stroke-width: 1px;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: spin 4s infinite linear;
    animation: spin 4s infinite linear;
    -webkit-transition: opacity 1s ease, stroke-width 1s ease;
    transition: opacity 1s ease, stroke-width 1s ease
}

.stroke-solid {
    stroke-dashoffset: 0;
    stroke-dasharray: 300;
    stroke-width: 4px;
    -webkit-transition: stroke-dashoffset 1s ease, opacity 1s ease;
    transition: stroke-dashoffset 1s ease, opacity 1s ease;
    opacity: 0
}

.vid-icon {
    -webkit-transition: -webkit-transform 200ms ease-out;
    transition: -webkit-transform 200ms ease-out;
    transition: transform 200ms ease-out;
    transition: transform 200ms ease-out, -webkit-transform 200ms ease-out
}

.play-vid:hover .icon {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1
}

.play-vid {
    cursor: pointer;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: .85;
    width: 110px;
    height: 60px
}

.popicon {}

.popup ul li {
    display: inline-block;
    margin: 0 -8px
}

.starbox.p-0 {
    margin: 0;
    display: inline-block
}

.popup {
    margin: 2% 0 0 0
}

.people-img {
    margin-top: -2%
}

.star-icon i {
    color: #fdb022;
    font-size: 14px;
    margin: 0 0 10px 1px
}

.star-icon {
    margin: 0 0 0 3px
}

.mybutton1 {
    margin-top: 5px
}

.mybutton1 a {
    border-radius: 50px;
    background-color: #1fb6ff;
    box-shadow: 0 20px 35px 0 rgb(31 182 255/29%);
    color: #fff;
    padding: 2.3% 6.1%;
    transition: all .5s;
    position: relative;
    overflow: hidden;
    display: table;
    margin: auto
}

.mybutton1 a:hover {
    background-color: #26a5e2;
    box-shadow: 0 11px 18px 0 rgb(31 182 255/5%);
    transform: scale(1.05)
}

.payment {}

.slider {
    background-color: #fff;
    position: relative;
    animation: slideColor 10s forwards infinite
}

.caption {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    background: #fff
}

.text-box {
    display: inline-block;
    position: relative;
    width: 80%
}

.text-box div {
    display: inline-block;
    position: absolute;
    bottom: -100px;
    transform: rotateX(-10deg);
    opacity: 0;
    animation-timing-function: ease;
    margin: 0 0 6px
}

.text-box div:nth-child(1) {
    animation: rollDown 6s forwards infinite
}

.text-box div:nth-child(2) {
    animation: rollDown2 6s forwards infinite
}

.text-box div:nth-child(3) {
    animation: rollDown3 6s forwards infinite
}

@keyframes rollDown {
    0% {
        bottom: -100px;
        transform: rotateX(-10deg);
        opacity: 0
    }

    11% {
        bottom: -25px;
        transform: rotateX(0deg);
        opacity: .9
    }

    22% {
        bottom: -25px;
        transform: rotateX(0deg);
        opacity: 1
    }

    33% {
        bottom: 0;
        transform: rotateX(10deg);
        opacity: 0
    }
}

@keyframes rollDown2 {
    33% {
        bottom: -100px;
        transform: rotateX(-10deg);
        opacity: 0
    }

    44% {
        bottom: -25px;
        transform: rotateX(0deg);
        opacity: .9
    }

    55% {
        bottom: -25px;
        transform: rotateX(0deg);
        opacity: 1
    }

    66% {
        bottom: 0;
        transform: rotateX(10deg);
        opacity: 0
    }
}

@keyframes rollDown3 {
    66% {
        bottom: -100px;
        transform: rotateX(-10deg);
        opacity: 0
    }

    77% {
        bottom: -25px;
        transform: rotateX(0deg);
        opacity: .9
    }

    88% {
        bottom: -25px;
        transform: rotateX(0deg);
        opacity: 1
    }

    99% {
        bottom: 0;
        transform: rotateX(10deg);
        opacity: 0
    }
}

.imgButton {
    position: relative
}

.popicon {
    border-radius: 50%;
    box-shadow: 0 5px 16px 0 rgb(0 0 0/19%)
}

.popup ul li {
    display: inline-block;
    margin: 0 -6px
}

.people-img {
    margin-top: -3%;
    max-height: 75px
}

.star-icon i {
    color: #fdb022;
    font-size: 16px
}

.modal-dialog-centered {}

.section2 {
    background: url(../imageswebp/section2bg.webp) no-repeat center top;
    background-size: cover;
    padding: 2% 0 0
}

.section2B {
    background: url(../imageswebp/section2B.webp) no-repeat center top;
    background-size: cover;
    padding: 0
}

.voiceline2 {
    position: relative
}

.voiceline2-img {
    position: absolute;
    left: 0;
    bottom: 0
}

#assinatura {
    stroke-dasharray: 272;
    stroke-dashoffset: 272;
    animation: assinatura 4s infinite forwards
}

@keyframes assinatura {
    to {
        stroke-dashoffset: 0
    }
}

.check-title1-out {
    background-image: linear-gradient(to right, #08c1ff, #9286ff);
    padding: 2px;
    border-radius: 50px;
    overflow: hidden;
    display: inline-block;
    margin-top: -4%;
    box-shadow: 0 5px 10px 0 rgb(0 0 0/13%)
}

.check-title2-out {
    background-image: linear-gradient(to right, #f56caf, #796ef6);
    padding: 2px;
    border-radius: 50px;
    overflow: hidden;
    display: inline-block;
    margin-top: -4%;
    box-shadow: 0 5px 10px 0 rgb(0 0 0/13%)
}

.check-title {
    background-color: #fff;
    border-radius: 50px;
    display: inline-block;
    width: 100%;
    padding: 3px 19px
}

.section2-main-box {
    padding-right: 14%;
    margin-top: 4%;
    transition: .5s
}

.section2-box {
    text-align: center;
    position: relative;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 2%;
    transition-duration: .3s;
    transform: translateX(0%) translateY(0%);
    box-sizing: content-box
}

.section2-box-text {
    padding: 0 17px;
    text-align: right
}

.section2-box-text p {
    transform: rotate(-10deg);
    position: relative;
    margin-top: -14%
}

.voiceImg {}

.why-text {
    position: relative;
    z-index: 1
}

.section2-box-text svg {
    width: 80px;
    height: 80px;
    margin: -16px auto;
    transform: rotate(-50deg)
}

.section2-box-text svg .draw-arrow {
    stroke-width: 2px;
    stroke: #4a4a4a;
    fill: none;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.section2.active .section2-box-text svg .draw-arrow {
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-name: draw;
    animation-name: draw
}

.section2.active .section2-box-text svg .draw-arrow.tail-1 {
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.section2.active .section2-box-text svg .draw-arrow.tail-2 {
    -webkit-animation-delay: .7s;
    animation-delay: .7s
}

@-webkit-keyframes draw {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes draw {
    to {
        stroke-dashoffset: 0
    }
}

.section2-box .play-icon {
    position: absolute;
    top: 50%;
    left: 57%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: .82
}

.section2-box .play-icon:hover {
    opacity: 1
}

.section2-box .button {
    border: 0;
    background: 0 0;
    box-sizing: border-box;
    width: 0;
    height: 21px;
    border-color: transparent transparent transparent #fff;
    transition: 100ms all ease;
    cursor: pointer;
    border-style: solid;
    border-width: 10px 0 10px 20px
}

.section2-box a.paused input {
    border-style: double;
    border-width: 0 0 0 20px
}

.section2-box .button:hover {
    border-color: transparent transparent transparent #fff
}

.section2-box .btnContainer {
    border: 1px solid #000;
    height: 100px;
    border-radius: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 130px;
    text-align: center;
    margin: 10% 0;
    align-items: center
}

.sctioin2Bg {
    border-radius: 22px;
    background-image: -webkit-linear-gradient(0deg, rgb(31 182 255/10%) 4%, rgb(177 109 246/10%) 95%);
    padding: 4% 5%;
    max-width: 99.6%;
    margin-top: 5%;
    position: relative
}

.dotShap1 {
    position: absolute;
    bottom: -7%;
    right: -2.5%
}

.voiceicon-row {
    padding-top: 4%
}

.voice {
    padding: 1.7%
}

.voice-inn {
    border-radius: 14px;
    background-color: #fff;
    box-shadow: 0 7px 38px 0 rgb(43 184 255/10%);
    padding: 9% 4% 9% 7%;
    height: 100%
}

.voiceicon {}

.icon {
    max-width: 20%
}

.icon-box {
    padding: 0 0 0 4%
}

.voice:nth-child(4) .voice-inn {
    padding: 8.6% 4% 7.6% 7%
}

.voice:nth-child(5) .voice-inn {
    padding: 5.6% 4% 5.6% 7%
}

.voice:nth-child(6) .voice-inn {
    padding: 8.6% 4% 7.6% 7%
}

.b1 img {
    border: 8px solid #fff4df;
    border-radius: 50%
}

.b2 img {
    border: 8px solid #ffebed;
    border-radius: 50%
}

.b3 img {
    border: 8px solid #f1fae2;
    border-radius: 50%
}

.b4 img {
    border: 8px solid #e2f2fa;
    border-radius: 50%
}

.section2-box:hover {
    box-shadow: 0 11px 18px 0 rgb(31 182 255/5%);
    transform: scale(1.2);
    transition-duration: .3s;
    overflow: hidden;
    position: relative
}

.section2-box {}

.section2-box:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 105px;
    height: 105px;
    border-radius: 50%
}

.b1:before {
    background: #ffcd68;
    animation: pulse-border 1500ms ease-out infinite
}

.b2:before {
    background: #e04d68;
    animation: pulse-border 1700ms ease-out infinite
}

.b3:before {
    background: #aae04d;
    animation: pulse-border 1900ms ease-out infinite
}

.b4:before {
    background: #48b0e2;
    animation: pulse-border 1950ms ease-out infinite
}

.section2-box img {
    position: relative;
    max-width: 100%;
    width: auto;
    height: auto
}

.section2-box .b1:hover {
    animation: pulseanim2 2s infinite cubic-bezier(.4, 0, 1, 1) both
}

.input-button {
    border-radius: 50px;
    background-color: #1fb123;
    color: #fff;
    padding: 18px 3.1%;
    transition: all .5s;
    position: relative;
    overflow: hidden;
    display: table;
    box-shadow: 0 20px 35px 0 rgb(25 140 52/29%);
    margin: auto;
    border: 0;
    cursor: pointer
}

.input-button::hover {
    background-color: #1a9737;
    box-shadow: 0 11px 18px 0 rgb(31 182 255/5%);
    transform: scale(1.05)
}

#myModal4 .modal-body {
    padding: 15% 1%
}

.connection2 {
    padding: 4% 0 0 10%
}

.connection3 {
    padding: 4% 10% 0 0
}

.video-overlay {
    position: fixed;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .8);
    opacity: 0;
    transition: all ease 500ms
}

.video-overlay.open {
    position: fixed;
    z-index: 1000;
    opacity: 1
}

.video-overlay-close {
    position: absolute;
    z-index: 1000;
    top: 15px;
    right: 20px;
    font-size: 36px;
    line-height: 1;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: all 200ms
}

.video-overlay-close:hover {
    color: #fa183d
}

.video-overlay iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-shadow: 0 0 15px rgba(0, 0, 0, .75)
}

.voiceline3 {
    position: relative;
    padding: 0 0 .7%
}

.voiceline3-img {
    position: absolute;
    left: 0;
    bottom: 0
}

.heading3 {
    margin-top: 9%
}

input#vehicle1 {
    height: 17px;
    width: 17px
}

input#vehicle2 {
    height: 17px;
    width: 17px
}

.video1 {
    margin: 6% 0 0
}

.vid-box2 {
    width: 100px !important;
    height: 100px !important
}

.bottomtext {
    margin-top: -3%
}

.Casttext {
    color: #1fb6ff;
    text-decoration: underline;
    margin-top: 3%;
    display: block
}

.Casttext:hover {
    color: #1580b4;
    text-decoration: underline
}

.clicktext {
    position: absolute;
    margin: -5px 0 0 6px
}

.title2 {
    background-color: #c1ebff;
    display: inline-block;
    padding: 1.5px 43px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 16px
}

.v1-out {
    padding: 0 2.7%;
    margin-top: 2%
}

.v2-out {
    padding: 0 2.7%;
    margin-top: 2%
}

.v1 {
    background-size: cover;
    border-radius: 10px;
    transition: all .2s;
    padding: 0% 11%;
    z-index: 1
}

.v2 {
    background-size: cover;
    border-radius: 10px;
    padding: 0% 11%;
    transition: all .2s;
    z-index: 1
}

.v1:hover {
    transform: scale(1.05)
}

.v2:hover {
    transform: scale(1.05)
}

.dotShap {
    position: absolute;
    top: -6.2%;
    left: -.5%
}

.check-box-area {
    border-bottom: 1px solid #b2d7fa;
    padding: 0
}

.check-box-area-last {
    border: 0
}

[type=checkbox]:not(:checked),
[type=checkbox]:checked {
    position: absolute;
    left: -9999px
}

[type=checkbox]:not(:checked)+label,
[type=checkbox]:checked+label {
    position: relative;
    overflow: hidden;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    padding-top: 1.5%;
    padding-bottom: 3%;
    line-height: 150%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    margin-bottom: 0;
    text-align: left;
    border-radius: 4px
}

[type=checkbox]+label:before,
[type=checkbox]+label:after {
    content: '';
    position: absolute;
    left: 7px;
    z-index: 1;
    margin-top: 7px;
    -webkit-transition: .2s;
    transition: .2s;
    border-radius: 4px
}

[type=checkbox]:not(:checked)+label:before {
    top: 2px;
    width: 22px;
    height: 22px;
    border: 1px solid #2b83af;
    background-color: #fff
}

[type=checkbox]:not(:checked)+label:after {
    top: 2px;
    width: 22px;
    height: 22px;
    border: 2px solid #706f6f;
    z-index: 0;
    animation: pulse 2s infinite;
    background-color: #fff
}

#test1[type=checkbox]:not(:checked)+label:before {
    border: 1px solid #2b83af
}

#test2[type=checkbox]:not(:checked)+label:before {
    border: 1px solid #ab4487
}

#test1[type=checkbox]:not(:checked)+label:after {
    border: 1px solid #2b83af
}

#test2[type=checkbox]:not(:checked)+label:after {
    border: 1px solid #ab4487
}

[type=checkbox]:checked+label:before {
    top: -4px;
    width: 10px;
    left: 8px;
    height: 25px;
    border-top: 0 solid transparent;
    border-left: 0 solid transparent;
    border-right: 3.5px solid #fff;
    border-bottom: 3.5px solid #fff;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 20% 40%;
    transform-origin: 100% 100%;
    border-radius: 0
}

[type=checkbox]:checked+label:after {
    top: 2px;
    width: 22px;
    height: 22px;
    border: 2px solid #fff;
    z-index: 0
}

[type=checkbox]:disabled:not(:checked)+label:before,
[type=checkbox]:disabled:checked+label:before {
    top: 0;
    box-shadow: none;
    background-color: #444;
    width: 22px;
    height: 22px;
    border: 3px solid #444;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg)
}

[type=checkbox]:disabled+label {
    color: #555
}

[type=checkbox]:disabled:not(:checked)+label:hover:before {
    border-color: red
}

.table-check-box {
    padding: 0 14%;
    margin-bottom: 6%
}

.table-check-box [type=checkbox]:not(:checked)+label:before {
    background-color: transparent
}

.usecase-mask {
    overflow-x: auto !important;
    overflow-y: hidden !important
}

.usecase-container {
    width: 100%;
    display: inline-flex !important;
    justify-content: start !important
}

.expansion {
    opacity: 0
}

.expansion .usecase-audio-spectrum {
    width: 100%
}

.expand .expansion {
    opacity: 1;
    width: 100%
}

.expand .expansion .usecase-audio-spectrum {
    width: 100%
}

.uc-pause {
    background-image: url(https://uploads-ssl.webflow.com/6215d56ae85caa0a3026a433/62414d3d89526c77bdd16ffc_pause_circle.svg)
}

.spacer {
    flex: 1 1 auto
}

.lg {
    height: 373px
}

.usecase-container {
    display: inline-flex !important;
    width: 100%
}

.usecase-test-block {
    text-overflow: ellipsis
}

.usecase-block {
    display: inline-block;
    overflow: hidden;
    margin-right: 13px;
    margin-left: 13px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    border-radius: 15px;
    background-color: #b8d6ff;
    box-shadow: 0 2px 4px -2px rgb(23 37 69/12%);
    -webkit-transition: box-shadow .2s, height .5s, width .5s;
    transition: box-shadow .2s, height .5s, width .5s;
    cursor: pointer;
    transition-duration: .3s;
    position: relative;
    overflow: hidden
}

.usecase-title {
    height: 48px;
    margin-top: 14px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-weight: 500;
    font-family: avertastd-bold;
    height: 48px;
    margin-top: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-weight: 500;
    text-align: center;
    order: 1;
    margin-bottom: 8px;
    margin-top: 8%;
    transition: .2s ease-in;
    margin-left: 4%
}

.usecase-subtitle {
    height: 48px;
    margin-top: 14px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-weight: 500;
    height: 48px;
    margin-top: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    text-align: center;
    order: 1;
    margin-bottom: 8px;
    margin-top: 3%;
    padding: 0 15px;
    font-size: 14px;
    opacity: 1;
    color: #e1eefd
}

.uc-play {
    width: 62px;
    height: 66px;
    margin-top: 0;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -ms-flex: 0 0 auto;
    background-image: url(../imageswebp/playIcon2.webp);
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    background-position: 16% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    transition: .2s ease-in;
    z-index: 1
}

.usecase-avatar {
    order: 2
}

.expand .uc-play {
    background-image: url(../imageswebp/pushIcon2.webp)
}

.usecase-target {
    position: relative;
    left: 0;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 240px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-top: 5px
}

.expand .usecase-target {}

.expansion {
    padding: 14px 30px 54px 10px;
    -ms-flex-item-align: end;
    -ms-flex: 0 0 auto;
    width: 330px;
    opacity: 0
}

.usecase-text-block {
    overflow: hidden;
    line-height: 24px;
    color: #fff;
    font-family: avertastd-bold;
    margin-left: auto;
    margin-top: 59px;
    position: relative;
    z-index: 1
}

.usecase-mask {
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow: auto;
    width: 100%;
    height: 400px;
    margin-right: auto;
    margin-left: auto;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.usecase-layout {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 22px 0;
    cursor: pointer
}

.usecase-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.icon1 {
    position: absolute;
    right: 9%;
    top: 4.1%;
    opacity: 1;
    transition: opacity .3s .2s ease-in
}

.usecase-block.expand .icon1 {
    opacity: 0;
    transition: opacity .3s ease-in;
    transition: width .3s .2s ease-in
}

.usecase-block.expand .uc-play {
    background-position: 50% 50%
}

.usecase-block.expand .usecase-subtitle {
    opacity: 0
}

.usecase-block:nth-child(2) .usecase-title {}

.usecase-block:nth-child(3) .usecase-title {}

.usecase-block:nth-child(4) .usecase-title {}

.usecase-block:nth-child(5) .usecase-title {}

.usecase-block:nth-child(6) .usecase-title {}

.usecase-block:nth-child(7) .usecase-title {}

.usecase-block:nth-child(2) .usecase-subtitle {
    color: #e1eefd;
    margin-top: -10%
}

.usecase-block:nth-child(3) .usecase-subtitle {
    color: #d6d5fc;
    margin-top: -10%
}

.usecase-block:nth-child(4) .usecase-subtitle {
    color: #ffdbd0;
    margin-top: -10%
}

.usecase-block:nth-child(5) .usecase-subtitle {
    color: #ffe8d3;
    margin-top: -10%
}

.usecase-block:nth-child(6) .usecase-subtitle {
    color: #e4ffd6;
    margin-top: -10%
}

.usecase-block:nth-child(7) .usecase-subtitle {
    color: #ffccd6;
    margin-top: -10%
}

.usecase-block:nth-child(2) .usecase-avatar {
    margin-top: 8%
}

.usecase-block:nth-child(3) .usecase-avatar {}

.usecase-block:nth-child(4) .usecase-avatar {
    margin-top: 8%
}

.usecase-block:nth-child(5) .usecase-avatar {}

.usecase-block:nth-child(6) .usecase-avatar {}

.usecase-block:nth-child(7) .usecase-avatar {
    margin-top: 8%
}

@media screen and (min-width:1920px) {
    .usecase-block {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
        -webkit-flex: 0 auto;
        -ms-flex: 0 auto;
        flex: 0 auto;
        cursor: pointer
    }
}

@media screen and (max-width:991px) {
    .usecase-title {
        padding-right: 12px;
        padding-left: 12px;
        font-size: 14px;
        line-height: 21px
    }
}

#bars,
#bars2,
#bars3,
#bars4,
#bars5,
#bars6 {
    position: relative;
    top: 50%;
    left: 10%;
    height: 14px;
    width: 60%
}

.bar-line,
.bar-line2,
.bar-line3,
.bar-line4,
.bar-line5,
.bar-line6 {
    position: absolute;
    bottom: 0;
    height: 3px;
    width: 1px;
    background: #fff;
    animation: sound 0ms -800ms linear infinite alternate;
    transform: translateY(50%)
}

@keyframes sound {
    0% {
        opacity: .35;
        height: 3px
    }

    100% {
        opacity: 1;
        height: 28px
    }
}

.section3 {
    background-color: #050038;
    padding: 5% 0%;
    max-width: 97%;
    margin: auto;
    margin-top: 7%;
    border-radius: 30px
}

.voiceline4 {
    position: relative;
    padding: 0 0 .7%
}

.voiceline4-img {
    position: absolute;
    left: 0;
    bottom: 0
}

.usecase-avatar {
    margin-top: 8%;
    margin-left: -28%
}

.section3 ::-webkit-scrollbar {
    height: 4px;
    width: 4px;
    background: #848484
}

.section3 ::-webkit-scrollbar-track {
    background: #fff
}

.section3 ::-webkit-scrollbar-thumb {
    background: #848484
}

.section3 ::-webkit-scrollbar-thumb:hover {
    background: #848484
}

.section3 ::-webkit-scrollbar-thumb:horizontal {
    background: #848484;
    border-radius: 10px
}

.bgicon1 {
    position: relative;
    -webkit-animation: glide1 2s ease-in-out alternate infinite
}

@-webkit-keyframes glide1 {
    from {
        left: 18em;
        top: 30em
    }

    100% {
        left: 18em;
        top: 31em
    }
}

.bgicon2 {
    position: relative;
    -webkit-animation: glide2 2s ease-in-out alternate infinite
}

@-webkit-keyframes glide2 {
    from {
        left: 18em;
        top: 8em
    }

    100% {
        left: 18em;
        top: 9em
    }
}

.bgicon3 {
    position: relative;
    -webkit-animation: glide3 2s ease-in-out alternate infinite
}

@-webkit-keyframes glide3 {
    from {
        left: 11em;
        top: 23em
    }

    100% {
        left: 13em;
        top: 23em
    }
}

.bgicon5 {
    position: relative;
    -webkit-animation: glide5 2s ease-in-out alternate infinite
}

@-webkit-keyframes glide5 {
    from {
        left: 0;
        top: 11em
    }

    100% {
        left: 0;
        top: 12em
    }
}

.bgicon4 {
    position: relative;
    -webkit-animation: glide4 2s ease-in-out alternate infinite
}

@-webkit-keyframes glide4 {
    from {
        left: 8em;
        bottom: 2em
    }

    100% {
        left: 9em;
        bottom: 6em
    }
}

.bgicon6 {
    position: relative;
    -webkit-animation: glide6 2s ease-in-out alternate infinite
}

@-webkit-keyframes glide6 {
    from {
        right: 10em;
        top: 24em
    }

    100% {
        right: 10em;
        top: 25em
    }
}

.bgicon8 {
    position: relative;
    -webkit-animation: glide8 2s ease-in-out alternate infinite
}

@-webkit-keyframes glide8 {
    from {
        right: 18em;
        bottom: 6em
    }

    100% {
        right: 17em;
        bottom: 6em
    }
}

.bgicon7 {
    position: relative;
    -webkit-animation: glide7 2s ease-in-out alternate infinite
}

@-webkit-keyframes glide7 {
    from {
        right: 20em;
        bottom: 5em
    }

    100% {
        right: 20em;
        bottom: 6em
    }
}

.bgicon9 {
    position: relative;
    -webkit-animation: glide9 2s ease-in-out alternate infinite
}

@-webkit-keyframes glide9 {
    from {
        right: 10em;
        bottom: 10em
    }

    100% {
        right: 9em;
        bottom: 10em
    }
}

.bgicon10 {
    position: relative;
    -webkit-animation: glide10 2s ease-in-out alternate infinite
}

@-webkit-keyframes glide10 {
    from {
        right: 0;
        top: 13em
    }

    100% {
        right: 0;
        top: 14em
    }
}

.results {
    display: flex;
    width: calc(100% - 2rem);
    padding: 0;
    margin: 0;
    list-style-type: none
}

li {
    padding: 0
}

.results img {
    max-width: 85%;
    width: 85%;
    object-fit: cover;
    transition: all .2s ease
}

.results:is(:hover, :focus-within) img {
    opacity: calc(0.1 + (var(--active-lerp, 0) * 0.9));
    filter: grayscale(calc(1 - var(--active-lerp, 0)))
}

:root {
    --lerp-0: 1;
    --lerp-1: 0.5787037;
    --lerp-2: 0.2962963;
    --lerp-3: 0.125;
    --lerp-4: 0.037037;
    --lerp-5: 0.0046296;
    --lerp-6: 0
}

a {
    outline-offset: 4px
}

.results li {
    flex: calc(1.1 + (var(--active-lerp, 0) * 1));
    transition: flex .2s ease;
    margin: 0 0 0 15px;
    border-radius: 7px;
    height: 350px;
    overflow: hidden
}

.audiotext {
    margin-top: 10%
}

.audioimg {
    margin-top: 7%
}

.audio {
    margin-top: 14%
}

li:is(:hover, :focus-within) {
    --active-lerp: var(--lerp-0);
    z-index: 7
}

li:has(+li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li {
    --active-lerp: var(--lerp-1);
    z-index: 6
}

li:has(+li+li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li+li {
    --active-lerp: var(--lerp-2);
    z-index: 5
}

li:has(+li+li+li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li+li+li {
    --active-lerp: var(--lerp-3);
    z-index: 4
}

li:has(+li+li+li+li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li+li+li+li {
    --active-lerp: var(--lerp-4);
    z-index: 3
}

li:has(+li+li+li+li+li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li+li+li+li+li {
    --active-lerp: var(--lerp-5);
    z-index: 2
}

li:has(+li+li+li+li+li+li:is(:hover, :focus-within)),
li:is(:hover, :focus-within)+li+li+li+li+li+li {
    --active-lerp: var(--lerp-6);
    z-index: 1
}

.play-layer-wrapper {
    position: relative
}

.play-layer {
    background-color: rgba(0, 0, 0, .3);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100%;
    height: 100vh
}

.sound-wave {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative
}

.sound-wave:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 40rem;
    z-index: -1;
    top: 0;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(#1389e933, transparent 60%, transparent 100%)
}

.d-none {
    display: none
}

@keyframes scale1 {
    0% {
        transform: scaleY(.6)
    }

    40% {
        transform: scaleY(1.2)
    }

    100% {
        transform: scaleY(.6)
    }
}

.bar-scale1 {
    animation: scale1 .6s infinite;
    transform-origin: center
}

@keyframes scale2 {
    0% {
        transform: scaleY(.5)
    }

    30% {
        transform: scaleY(1.6)
    }

    100% {
        transform: scaleY(.5)
    }
}

.bar-scale2 {
    animation: scale2 .6s infinite;
    transform-origin: center
}

@keyframes scale3 {
    0% {
        transform: scaleY(1.5)
    }

    70% {
        transform: scaleY(.5)
    }

    100% {
        transform: scaleY(1.5)
    }
}

.bar-scale3 {
    animation: scale3 .6s infinite;
    transform-origin: center
}

.stop-animation {
    animation-duration: 0s
}

.audio-buttons {
    position: relative
}

.play-button {}

.play-button,
.pause-button {
    width: 46px;
    height: 46px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%)
}

.sound-wave:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 40rem;
    z-index: -1;
    top: 0;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(#1389e933, transparent 60%, transparent 100%)
}

.section4 {
    background: url(../imageswebp/section4bg.webp) no-repeat center top;
    background-size: cover;
    padding: 1.7% 0 9%;
    margin-top: 4%
}

.voiceline5 {
    position: relative;
    padding: 0 0 .7%
}

.voiceline5-img {
    position: absolute;
    left: 0;
    bottom: 0
}

.checklist1 li {
    background: url(../imageswebp/checklist1.webp) no-repeat left 5px;
    padding-left: 25px;
    padding-right: 0%;
    list-style: none;
    margin-left: 0%;
    padding-top: 0;
    padding-bottom: 20px;
    margin-bottom: 0;
    text-align: left
}

.checklist2 li {
    background: url(../imageswebp/checklist2.webp) no-repeat left 5px;
    padding-left: 25px;
    padding-right: 0%;
    list-style: none;
    margin-left: 0%;
    padding-top: 0;
    padding-bottom: 20px;
    margin-bottom: 0;
    text-align: left
}

.humanvoice1 {
    padding: 0 2.1%
}

.humanvoice2 {
    padding: 0 2.1%
}

.human {
    height: 100%
}

.humanvoice1-inn {
    border-radius: 10px;
    background-color: #fdeef0;
    padding: 10% 12% 11%;
    position: relative
}

.humanvoice2-inn {
    border-radius: 10px;
    background-color: #e6f6e9;
    padding: 10% 12% 11%;
    position: relative
}

.dotShap2 {
    position: absolute;
    top: -4.5%;
    left: -6.5%
}

.dotShap3 {
    position: absolute;
    bottom: -4.5%;
    right: -6.5%
}

.voicebox ul li {
    display: inline-block;
    margin: 0 0 0 12px;
    border-radius: 9px
}

.voicebox ul .voicebg {
    display: inline-block;
    padding: 11px 28.5px
}

.arrowA {
    position: absolute;
    right: 49%;
    top: -35%
}

.arrowB {
    position: absolute;
    right: 36%;
    bottom: -34%
}

.arrowC {
    position: absolute;
    top: -72%;
    right: 26.5%
}

.humanimg2 {
    max-width: 120%;
    margin-left: -12% !important
}

.humanimg {
    max-width: 106%;
    margin-left: -4% !important
}

.section5 {
    background: url(../imageswebp/section5Bg.webp) no-repeat center top;
    border-radius: 30px;
    background-size: cover;
    padding: 5% 0;
    max-width: 97%;
    margin: auto
}

.voicebox {
    position: relative
}

.voiceline6 {
    position: relative;
    padding: 0 0 .7%
}

.voiceline6-img {
    position: absolute;
    left: 0;
    bottom: 0
}

.stepbg1 {
    border-radius: 5px;
    background-color: rgb(31 182 255/16%);
    padding: 6px 14.5px
}

.stepbg2 {
    border-radius: 5px;
    background-color: #dedbfbb5;
    padding: 6px 14.5px
}

.stepbg3 {
    border-radius: 5px;
    background-color: #c2ede7e8;
    padding: 6px 14.5px
}

.speechbox1 {
    padding: 0% 0% 0% 5%
}

.speechbox2 {
    padding: 0% 3% 0% 0%
}

.speechtext {
    margin-top: 8%
}

.border1 {
    border-bottom: 1px solid #d3dbf5;
    padding-bottom: 4%
}

.speech-row {
    padding-top: 7%
}

.section6 {
    background-color: #fff;
    margin: 5% 0;
    position: relative
}

.mybutton2 a {
    border-radius: 30px;
    box-shadow: 0 20px 35px 0 rgb(31 182 255/29%);
    background-color: #1fb6ff;
    color: #fff;
    padding: 18px 4%;
    transition: all .5s;
    position: relative;
    overflow: hidden;
    display: table;
    margin: auto
}

.mybutton2 a:hover {
    background-color: #26a5e2;
    box-shadow: 0 11px 18px 0 rgb(31 182 255/5%);
    transform: scale(1.05)
}

.emotionlePg {
    padding: 0 18%
}

.bgicon1 {
    position: absolute;
    bottom: 8%;
    left: 18%
}

.bgicon2 {
    position: absolute;
    top: 27%;
    left: 18%
}

.bgicon3 {
    position: absolute;
    top: 55%;
    left: 9.5%
}

.bgicon4 {
    position: absolute;
    top: -3%;
    left: 8%
}

.bgicon5 {
    position: absolute;
    top: 35%;
    left: -1%
}

.bgicon6 {
    position: absolute;
    top: 15%;
    right: 17%
}

.bgicon7 {
    position: absolute;
    bottom: 18%;
    right: 18%
}

.bgicon8 {
    position: absolute;
    top: 30%;
    right: 10.5%
}

.bgicon9 {
    position: absolute;
    top: -1%;
    right: 8%
}

.bgicon10 {
    position: absolute;
    top: 38%;
    right: .1%
}

.modal-open #myModal2.modal .modal-body.bodypop {
    padding: 4% 5%
}

.modal-open #myModal2.modal .modal-body.bodypop .flagBoxpop-inner {
    padding: 15px 15px 15px 12px
}

[data-animate-in] {
    opacity: 0;
    transition: transform .8s ease, opacity .8s ease
}

[data-animate-in=up] {
    transform: translate3d(0, 24px, 0)
}

[data-animate-in=left] {
    transform: translate3d(-65%, 0, 0)
}

[data-animate-in=right] {
    transform: translate3d(85%, 0, 0)
}

[data-animate-in=down] {
    transform: translate3d(0, -24px, 0)
}

[data-animate-in=fadeIn] {
    transform: translate3d(0, 0, 0)
}

[data-animate-in].in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transition: transform .6s ease, opacity .6s ease
}

.fade-in {
    opacity: 0;
    transition: opacity 1s ease
}

.page-loaded .fade-in,
.page-loaded.fade-in {
    opacity: 1
}

.isSafari.isTouch [data-animate-in],
.isSafari.isTouch [data-animate-in=up] {
    opacity: 1;
    transition: none;
    transform: none
}

*/ .section7 {
    background-color: #fff;
    padding: 0% 0 5%
}

.emotional-box {
    padding: 0 1.8%
}

.emotional-box-inner {
    padding: 8% 8% 10%;
    border-radius: 18px;
    background-color: #f7f1fd
}

.emotional-box-inner2 {
    padding: 8% 8% 10%;
    border-radius: 18px;
    background-color: #e8f5fd
}

.star-box i {
    color: #fdb022;
    margin: 0 5px 0 0;
    font-size: 16px
}

.border2 {
    border-bottom: 1px solid #d6ccf9;
    padding-bottom: 4%
}

.border3 {
    border-bottom: 1px solid #b4dff5;
    padding-bottom: 4%
}

.bar {
    width: .5px;
    height: 100px;
    margin: 0 2px;
    background-color: #fff;
    border-radius: 10px;
    animation-name: musicWave;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transition: height 1s;
    display: inline-block
}

.bar:nth-child(1) {
    animation-duration: 1200ms
}

.bar:nth-child(2) {
    animation-duration: 1300ms
}

.bar:nth-child(3) {
    animation-duration: 1600ms
}

.bar:nth-child(4) {
    animation-duration: 1100ms
}

.bar:nth-child(5) {
    animation-duration: 1260ms
}

.bar:nth-child(6) {
    animation-duration: 1300ms
}

.bar:nth-child(7) {
    animation-duration: 1280ms
}

.bar:nth-child(8) {
    animation-duration: 1190ms
}

.bar:nth-child(9) {
    animation-duration: 1402ms
}

.pause-music-wave {
    animation-play-state: paused
}

@keyframes musicWave {
    0% {
        height: 10px
    }

    25% {
        height: 10px
    }

    50% {
        height: 30px
    }

    75% {
        height: 20px
    }

    80% {
        height: 30px
    }

    90% {
        height: 10px
    }

    100% {
        height: 5px
    }
}

.btn-wrapper {
    position: fixed;
    z-index: 10;
    bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center
}

.btn {
    margin: 0 10px
}

.hav {
    margin-top: -11%;
    left: 12%;
    position: relative
}

.hav span {
    display: block;
    bottom: 0;
    width: 2px;
    height: 10px;
    background: #8a78f0;
    position: absolute;
    animation: audio-wave 2s infinite ease-in-out
}

.hav span:nth-child(1) {
    left: 6px;
    animation-delay: .3s
}

.hav span:nth-child(2) {
    left: 12px;
    animation-delay: .6s
}

.hav span:nth-child(3) {
    left: 18px;
    animation-delay: .9s
}

.hav span:nth-child(4) {
    left: 24px;
    animation-delay: 1.2s
}

.hav span:nth-child(5) {
    left: 30px;
    animation-delay: 1.5s
}

.hav span:nth-child(6) {
    left: 36px;
    animation-delay: 1.8s
}

.hav span:nth-child(7) {
    left: 42px;
    animation-delay: 2.1s
}

.hav span:nth-child(8) {
    left: 48px;
    animation-delay: 2.4s
}

.hav span:nth-child(9) {
    left: 54px;
    animation-delay: 2.7s
}

.hav span:nth-child(10) {
    left: 60px;
    animation-delay: 3s
}

.hav span:nth-child(11) {
    left: 66px;
    animation-delay: 3.3s
}

.hav span:nth-child(12) {
    left: 72px;
    animation-delay: 3.6s
}

.hav span:nth-child(13) {
    left: 78px;
    animation-delay: 3.9s
}

.hav span:nth-child(14) {
    left: 84px;
    animation-delay: 4.2s
}

.hav span:nth-child(15) {
    left: 90px;
    animation-delay: 4.5s
}

@-moz-keyframes audio-wave {
    0% {
        height: 15px;
        transform: translateY(0px)
    }

    25% {
        height: 60px;
        transform: translateY(20px)
    }

    50% {
        height: 15px;
        transform: translateY(0px)
    }

    100% {
        height: 10px;
        transform: translateY(0px)
    }
}

@-webkit-keyframes audio-wave {
    0% {
        height: 15px;
        transform: translateY(0px)
    }

    25% {
        height: 60px;
        transform: translateY(20px)
    }

    50% {
        height: 15px;
        transform: translateY(0px)
    }

    100% {
        height: 10px;
        transform: translateY(0px)
    }
}

@keyframes audio-wave {
    0% {
        height: 5px;
        transform: translateY(0px)
    }

    25% {
        height: 45px;
        transform: translateY(20px)
    }

    50% {
        height: 5px;
        transform: translateY(0px)
    }

    100% {
        height: 5px;
        transform: translateY(0px)
    }
}

@keyframes audio-wave {
    0% {
        height: 5px;
        transform: translateY(0px)
    }

    25% {
        height: 45px;
        transform: translateY(20px)
    }

    50% {
        height: 5px;
        transform: translateY(0px)
    }

    100% {
        height: 5px;
        transform: translateY(0px)
    }
}

.animate-text {
    height: 100px;
    overflow: hidden
}

.animate-text span {
    font-size: 100px;
    font-weight: 700;
    line-height: 100px;
    display: none;
    background-image: linear-gradient(to right, #04d3dd 0%, #9f14f7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-family: lobstertwo-bold
}

.animate-text span.text-in {
    display: block;
    animation: textIn .5s ease;
    transition-duration: .5s
}

.animate-text span.text-out {
    animation: textOut 1s ease;
    transition-duration: .5s
}

@keyframes textIn {
    0% {
        transform: translateY(100%)
    }

    100% {
        transform: translateY(0%)
    }
}

@keyframes textOut {
    0% {
        transform: translateY(0%)
    }

    100% {
        transform: translateY(-100%)
    }
}

.musicbox {
    background-image: -webkit-linear-gradient(0deg, rgb(31 182 255/15%) 4%, rgb(177 109 246/15%) 95%);
    border-radius: 8px;
    padding: 5% 6% 8%;
    position: relative;
    max-width: 88.5%;
    margin: auto
}

.musicbox a i {
    border-radius: 50%;
    box-shadow: 0 5px 8px 0 rgb(138 120 240/20%);
    background-color: #fff;
    padding: 10px 12px;
    color: #8a78ef;
    font-size: 12px
}

.musicbox a:hover {
    background-color: #fff !important;
    color: #33b4f3
}

.musicbox.mg a i {
    color: #33b4f3
}

.musicbox a {
    display: contents
}

.sonudicon {
    float: right;
    margin: 10px 0 0 0%;
    padding-right: 15px
}

.emotional-text {
    padding: 0 30px
}

.swiper1 .swiper-slide.swiperBg1 {
    margin-bottom: 10%
}

.swiper1-button-prev,
.swiper1-button-next {
    font-size: 12px;
    color: #8a78f0 !important;
    background: #fff;
    padding: 0;
    border-radius: 50px;
    height: 41px !important;
    width: 41px !important;
    top: 48% !important;
    box-shadow: 0 0 23px rgb(33 33 33/20%)
}

.swiper1-button-prev {
    transform: rotate(180deg)
}

.swiper1-button-prev:hover,
.swiper1-button-next:hover {
    color: #8a78ef !important
}

.swiper1Speech {
    padding: 0 1% !important
}

.audioBox {
    position: relative
}

.audioBox-inn {
    padding: 3%
}

.section7-box1 {
    border-radius: 18px;
    background-color: #f7f1fd;
    padding: 6% 4% 5%;
    margin: auto;
    margin-top: -5%
}

.section7-box2 {
    border-radius: 18px;
    background-color: #e8f5fd;
    padding: 6% 4% 5%;
    width: 81.2%;
    margin: auto;
    margin-top: -5%
}

.section7-box3 {
    border-radius: 18px;
    background-color: #e4fae5;
    padding: 6% 4% 5%;
    width: 81.2%;
    margin: auto;
    margin-top: -5%
}

.section7-box4 {
    border-radius: 18px;
    background-color: #fdf1eb;
    padding: 6% 4% 5%;
    width: 81.2%;
    margin: auto;
    margin-top: -5%
}

.section7-box5 {
    border-radius: 18px;
    background-color: #eef0fd;
    padding: 6% 4% 5%;
    width: 81.2%;
    margin: auto;
    margin-top: -5%
}

.section7-box6 {
    border-radius: 18px;
    background-color: #faf7e4;
    padding: 6% 4% 5%;
    width: 81.2%;
    margin: auto;
    margin-top: -5%
}

.speech-img {
    position: relative;
    z-index: 1
}

.swiper1-button-prev {
    left: 1.1% !important
}

.swiper1-button-next {
    right: 1.1% !important
}

.section8 {
    background: url(../imageswebp/section8.webp) no-repeat center top;
    background-size: cover;
    background-color: #050038;
    padding: 5% 3% 4.5%;
    max-width: 97%;
    margin: auto;
    margin-top: 5.4%;
    border-radius: 30px
}

.mybutton5 a {
    border-radius: 30px;
    box-shadow: 0 20px 35px 0 rgb(31 182 255/29%);
    background-color: #1fb6ff;
    color: #fff;
    padding: 18px 2.9%;
    transition: all .5s;
    position: relative;
    overflow: hidden;
    display: table;
    margin: auto
}

.mybutton5 a:hover {
    background-color: #26a5e2;
    box-shadow: 0 11px 18px 0 rgb(31 182 255/5%);
    transform: scale(1.05)
}

.portfolio {
    padding: 0 12px 5%
}

.portfolio-inner {
    height: 100%;
    background: #fff;
    border-radius: 30px;
    position: relative
}

.port-row {
    margin-top: 5%
}

.portimg {
    position: relative;
    border-radius: 30px 30px 0 0;
    text-align: right
}

.portfolio-text {
    background-color: #fff;
    padding: 10% 8% 13% 10%;
    border-radius: 0 0 30px 30px
}

.section8pg {
    margin-top: 10%
}

.onee {
    text-align: left
}

.twoo {
    text-align: right;
    float: right
}

.titlebg {
    background-color: #d8e8ff;
    display: inline-block;
    padding: 1px 10px;
    border-radius: 15px
}

.portfolio-box ul li {
    display: table-cell;
    padding: 0 0 0 25px
}

.portfolioimg {
    margin: -20px 0 0
}

.video-play-button {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: content-box;
    display: block;
    width: 20px;
    height: 22px;
    border-radius: 50%;
    padding: 18px 20px 18px 28px
}

.video-play-button:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 63px;
    height: 63px;
    background-image: -webkit-linear-gradient(44deg, rgb(63 187 254/83%) 0%, rgb(165 65 255/83%) 100%);
    border-radius: 50%;
    transition: all 200ms
}

.video-play-button .vd16::after {
    background-image: none;
    background-color: #0000
}

.video-play-button img {
    position: relative;
    z-index: 3;
    max-width: 100%;
    width: auto;
    height: auto
}

.video-play-button span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 15px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent
}

.video-play-buttonvd16 {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: content-box;
    display: block;
    width: 1px;
    height: 8px;
    border-radius: 50%;
    padding: 18px 20px 18px 28px
}

.video-play-buttonvd16::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 63px;
    height: 63px;
    border-radius: 50%;
    transition: all 200ms
}

.video-play-button .vd16::after {
    background-image: none;
    background-color: #0000
}

.video-play-buttonvd16 img {
    position: relative;
    z-index: 3;
    max-width: 100%;
    width: auto;
    height: auto
}

.video-play-buttonvd16 span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 0 solid #fff;
    border-top: 0 solid transparent;
    border-bottom: 0 solid transparent
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0
    }
}

.video-overlay {
    position: fixed;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .8);
    opacity: 0;
    transition: all ease 500ms
}

.video-overlay.open {
    position: fixed;
    z-index: 1000;
    opacity: 1
}

.video-overlay-close {
    position: absolute;
    z-index: 1000;
    top: 15px;
    right: 20px;
    font-size: 36px;
    line-height: 1;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: all 200ms
}

.portimg .video-play-button:hover:after {
    background-color: #000;
    transform: scale(1.1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 105%;
    height: 120%;
    overflow: hidden
}

.video-overlay iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 48%;
    height: 25%;
    box-shadow: 0 0 15px rgb(0 0 0/75%)
}

.modal-open #videoModal.modal,
.modal-open #myModal.modal {
    overflow-y: hidden
}

.modal-open #myModal.modal,
.modal-open #myModal2.modal {
    background-color: rgb(0 0 0/76%)
}

.crown {
    position: relative;
    top: -1px;
    left: 0
}

#myModal3 .titlebg {
    position: relative;
    left: 4%;
    top: -2px;
    padding: 4px 14px 3px
}

#myModal3 .flagBoxpop-inner {
    padding: 15px 20px 15px 10px
}

.section9 {
    background-color: #fff;
    padding: 6.5% 0 5%;
    overflow: hidden
}

.CheckoutText {
    text-decoration: underline;
    color: #646876
}

.CheckoutText:hover {
    color: #000
}

.voiceline7 {
    position: relative;
    padding: 0 0 .7%
}

.voiceline7-img {
    position: absolute;
    left: 0;
    bottom: 0
}

.sctioin9Bg {
    padding: 5% 0%;
    margin-top: 3%
}

.flagRow {
    padding-top: 2.5%
}

.flagBox-out {
    padding: 15px
}

.flagBox {
    border-style: solid;
    border-width: 1px;
    border-color: #deecf3;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 11px 46px 0 rgb(12 68 95/17%);
    padding: 20px 15px;
    margin: auto;
    position: relative;
    transition-duration: .3s;
    height: 100%
}

.flagBox:hover {
    box-shadow: 0 11px 18px 0 rgb(31 182 255/5%);
    transform: scale(1.1);
    transition-duration: .3s;
    overflow: hidden
}

.btnBg {
    background-color: #cfedfc;
    display: inline-block;
    padding: 7px;
    border-radius: 20px;
    float: right
}

.btnBg i {
    background-color: #33b4f3;
    color: #fff;
    padding: 9px 10px;
    border-radius: 15px;
    font-size: 8px
}

.Arrowtext2 {
    position: absolute;
    top: -5%;
    right: -5.5%;
    z-index: 5;
    overflow: hidden
}

.voicetext {
    width: 100%;
    height: 100px;
    -ms-transform: skewY(20deg);
    transform: skewY(8deg);
    margin: 9px 10px 0 0
}

.arrow2 {
    position: absolute;
    top: 8%;
    right: -4.5%
}

.btnBg:hover {
    transform: scale(1.1)
}

.section8 ::-webkit-scrollbar,
.section9 ::-webkit-scrollbar {
    height: 4px;
    width: 4px;
    background: #848484;
    border-radius: 50px
}

.section8 ::-webkit-scrollbar-track,
.section9 ::-webkit-scrollbar-track {
    background: #f4f4f4;
    border-radius: 50px
}

.section8 ::-webkit-scrollbar-thumb,
.section9 ::-webkit-scrollbar-thumb {
    background: #c7c7c7;
    border-radius: 50px
}

.section8 ::-webkit-scrollbar-thumb:hover,
.section9 ::-webkit-scrollbar-thumb:hover {
    background: #848484;
    border-radius: 50px
}

.section8 ::-webkit-scrollbar-thumb:horizontal,
.section9 ::-webkit-scrollbar-thumb:horizontal {
    background: #848484;
    border-radius: 50px
}

.fa-arrow-right {
    -webkit-animation: bounceRight 2s infinite;
    animation: bounceRight 2s infinite;
    float: right
}

.fa-arrow-left {
    -webkit-animation: bounceLeft 2s infinite;
    animation: bounceLeft 2s infinite
}

.fa-chevron-down {
    -moz-animation: bounceDown 2s infinite;
    -webkit-animation: bounceDown 2s infinite;
    animation: bounceDown 2s infinite;
    text-align: center;
    display: block
}

.credits {
    padding-top: 50px;
    display: block;
    clear: both
}

@-webkit-keyframes bounceRight {

    0%,
    20%,
    50%,
    80%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    40% {
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px)
    }

    60% {
        -webkit-transform: translateX(-15px);
        transform: translateX(-15px)
    }
}

@-moz-keyframes bounceRight {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(0)
    }

    40% {
        transform: translateX(-30px)
    }

    60% {
        transform: translateX(-15px)
    }
}

@keyframes bounceRight {

    0%,
    20%,
    50%,
    80%,
    100% {
        -ms-transform: translateX(0);
        transform: translateX(0)
    }

    40% {
        -ms-transform: translateX(-10px);
        transform: translateX(-10px)
    }

    60% {
        -ms-transform: translateX(-10px);
        transform: translateX(-10px)
    }
}

.arrowpop {
    animation: bounceRight 2s infinite;
    position: relative;
    left: 8px;
    fill: #646876
}

.CheckoutText:hover .arrowpop {
    fill: #000
}

@media(min-width:576px) {

    #myModal .modal-dialog-centered,
    #myModal2 .modal-dialog-centered,
    #myModal3 .modal-dialog-centered {}

    #myModal4 .modal-lg {
        max-width: 90%
    }

    #myModal2 .modal-lg {
        max-width: 90%
    }

    #myModal3 .modal-lg {
        max-width: 90%
    }

    #myModal .modal-lg {
        max-width: 90%
    }
}

.section9 .scrolpopup {
    padding: 4% 4% 0%
}

.section10 {
    background-color: #fff;
    padding: 6% 0 5%
}

.voiceline8 {
    position: relative;
    padding: 0 0 .3%
}

.voiceline8-img {
    position: absolute;
    left: 0;
    bottom: 0
}

.revoicerText {
    text-align: right
}

.revoicerText2 {
    text-align: left
}

.revoicerPg {
    margin-top: 7%
}

.extraSpace {
    padding: 0 10px 0 0
}

.section11 {
    background-color: #fff;
    padding: 2% 0 5%
}

.voiceline9 {
    position: relative;
    padding: 0 0 .5%
}

.voiceline9-img {
    position: absolute;
    left: 0;
    bottom: 0
}

.logoBox1 {
    border-radius: 13px;
    background-color: #fff;
    box-shadow: 0 15px 81px 0 rgb(44 30 106/17%);
    padding: 38.2px 73.5px;
    display: inline-block
}

.logotext {
    margin-top: 30%
}

.slider1 {
    position: relative;
    width: 100%;
    top: 0;
    overflow: hidden
}

.slider1 .slider-row {
    width: 2204px;
    height: 279px;
    background-size: 2204px 279px;
    animation: slide 70s linear infinite;
    background-repeat: repeat-x
}

@keyframes slide {
    from {
        background-position-x: 0
    }

    to {
        background-position-x: -2204px
    }
}

.slider2 {
    position: relative;
    width: 100%;
    top: 9%;
    overflow: hidden
}

.slider2 .slider-row {
    width: 2204px;
    height: 279px;
    background-size: 2204px 279px;
    animation: slide2 70s linear infinite;
    background-repeat: repeat-x
}

@keyframes slide2 {
    from {
        background-position-x: -2204px
    }

    to {
        background-position-x: 0
    }
}

.slider-img {
    visibility: hidden
}

.section12 {
    background-color: #fff;
    padding: 5% 0;
    margin-top: -3%
}

.voiceline10 {
    position: relative;
    padding: 0 0 .5%
}

.voiceline10-img {
    position: absolute;
    left: 0;
    bottom: 0
}

.video2 {
    padding: 0 7%
}

.vdiconbox {}

.vd-row {
    padding-top: 3%
}

.videoBox1 {
    border-right: 1px dashed #bcbfd2;
    position: relative;
    margin-top: 1%;
    padding: 4% 15px
}

.vd1 {
    position: relative;
    background: #000;
    border-radius: 15px;
    background-color: #000;
    box-shadow: 0 13px 21px 0 rgb(0 0 0/22%)
}

.videoBox2 {
    border-left: 1px dashed #bcbfd2;
    position: relative;
    padding-top: 10%;
    margin: 0 0 0 -.5px
}

.videoBox3 {
    border-right: 1px dashed #bcbfd2;
    position: relative;
    padding-top: 10%
}

.videoText {
    position: relative
}

.videoText2 {
    position: relative;
    text-align: right
}

.videoText3 {
    position: relative
}

.videoDot1 {
    position: absolute;
    left: -1.5%;
    top: 2%;
    z-index: 1
}

.videoDot2 {
    position: absolute;
    top: 24%;
    right: -1.8%
}

.videoDot3 {
    position: absolute;
    left: -1.5%;
    top: 24%;
    z-index: 1
}

.videoDot4 {
    position: absolute;
    top: 25%;
    right: -1.8%
}

.videoDot5 {
    position: absolute;
    left: -1.5%;
    top: 24.5%;
    z-index: 1
}

.videoDot6 {
    position: absolute;
    top: 27%;
    right: -1.8%
}

.videoDot7 {
    position: absolute;
    left: -1.5%;
    top: 24.5%;
    z-index: 1
}

.videoDot8 {
    position: absolute;
    top: 25%;
    right: -1.8%
}

.videoDot9 {
    position: absolute;
    left: -1.5%;
    top: 26.5%;
    z-index: 1
}

.videoDot10 {
    position: absolute;
    top: 23.5%;
    right: -1.8%
}

.videoDot11 {
    position: absolute;
    left: 98.5%;
    top: -42%;
    z-index: 1
}

.modal .close {
    width: 35px;
    height: 35px;
    position: absolute;
    z-index: 1;
    right: -2%;
    background-color: #fff;
    border-radius: 50%;
    padding: 0;
    opacity: .8;
    color: #212d6c;
    font-size: 30px;
    top: -3%
}

.modal .close span {}

.modal .fade {
    background-color: #0000007a
}

.modal .modal-content {
    border-radius: 15px
}

.modal .embed-responsive {
    border: 3px solid #ffffff5c;
    border-radius: 15px
}

.modal button:focus {
    outline: 0;
    outline: 0
}

.mybutton3 a {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 63px;
    height: 63px;
    background: url(../imageswebp/popupicon.webp) no-repeat center top;
    background-size: cover;
    border-radius: 50%;
    transition: all 200ms;
    transition-duration: .3s
}

.mybutton3 a.paused {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 63px;
    height: 63px;
    background: url(../imageswebp/pause_over_face.webp) no-repeat center top;
    background-size: cover;
    border-radius: 50%;
    transition: all 200ms;
    transition-duration: .3s
}

.portimg:hover .mybutton3 a {
    transform: scale(1.2);
    transition-duration: .3s;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px
}

.section12-slider {
    padding: 0 1% 0 2%
}

.pcBg-box {}

.pcBg {}

[class^=swiper-button-],
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::before {
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.section12 .swiper-container {}

.section12 .swiper-container.loading {}

.section12:hover .swiper-button-prev,
.section12:hover .swiper-button-next {}

.section12 .swiper-button-next {
    right: 8px
}

.section12 .swiper-button-prev {
    left: 8px
}

.section12.swiper-slide {
    background-position: center;
    background-size: cover
}

.section12 .swiper-slide img {}

.section12 .swiper-slide .content {
    position: absolute;
    top: 40%;
    left: 0;
    width: 50%;
    padding-left: 5%;
    color: #fff
}

.section12 .swiper-slide .content .title {
    font-size: 2.6em;
    font-weight: 700;
    margin-bottom: 30px
}

.section12 .swiper-slide .content .caption {
    display: block;
    font-size: 13px;
    line-height: 1.4
}

.section12 .ratioWrapper {
    position: relative;
    width: 100%;
    height: 0;
    background-color: #000;
    padding-top: 56%
}

.section12 .ratioWrapper img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.section12 .swiper-slide.swiper-slide-active .slide-caption {
    margin-top: 1%
}

.section12 [class^=swiper-button-] {
    width: 26px;
    border-radius: 50%;
    height: 26px;
    top: 46%
}

.swiperNew-button-prev,
.swiperNew-button-next {
    background-color: #93a3f8
}

.swiperNew2-button-prev,
.swiperNew2-button-next {
    background-color: #aae5da
}

.swiperNew3-button-prev,
.swiperNew3-button-next {
    background-color: #e5c552
}

.swiperNew4-button-prev,
.swiperNew4-button-next {
    background-color: #fe98b1
}

.swiperNew5-button-prev,
.swiperNew5-button-next {
    background-color: #6dce5e
}

.swiperNew6-button-prev,
.swiperNew6-button-next {
    background-color: #5ec7e1
}

.swiperNew7-button-prev,
.swiperNew7-button-next {
    background-color: #fe8bff
}

.swiperNew8-button-prev,
.swiperNew8-button-next {
    background-color: #ffac99
}

.swiperNew9-button-prev,
.swiperNew9-button-next {
    background-color: #9e8ef0
}

.swiperNew10-button-prev,
.swiperNew10-button-next {
    background-color: #6ec9d7
}

.swiperNew11-button-prev,
.swiperNew11-button-next {
    background-color: #c7d472
}

.section12 .swiper-slide {}

.section12 .swiper-slide.swiper-slide-active {}

.section12 .vid-box {
    padding: 7.5% 7.5% 9.5%;
    border: 0;
    border-radius: 15px;
    position: relative
}

.section12 .videoBox1 .vid-box {}

.section12 .videoBox2 .vid-box {}

.section12 .videoBox3 .vid-box {}

.section12 .videoBox4 .vid-box {}

.section12 .videoBox5 .vid-box {}

.section12 .videoBox6 .vid-box {}

.section12 .videoBox7 .vid-box {}

.section12 .videoBox8 .vid-box {}

.section12 .videoBox9 .vid-box {}

.section12 .videoBox10 .vid-box {}

.section12 .videoBox11 .vid-box {}

.swiperNew {
    background: url(../imageswebp/bg1.webp) no-repeat center top;
    background-size: contain
}

.swiperNew2 {
    background: url(../imageswebp/bg2.webp) no-repeat center top;
    background-size: contain
}

.swiperNew3 {
    background: url(../imageswebp/bg3.webp) no-repeat center top;
    background-size: contain
}

.swiperNew4 {
    background: url(../imageswebp/bg4.webp) no-repeat center top;
    background-size: contain
}

.swiperNew5 {
    background: url(../imageswebp/bg5.webp) no-repeat center top;
    background-size: contain
}

.swiperNew6 {
    background: url(../imageswebp/bg6.webp) no-repeat center top;
    background-size: contain
}

.swiperNew7 {
    background: url(../imageswebp/bg7.webp) no-repeat center top;
    background-size: contain
}

.swiperNew8 {
    background: url(../imageswebp/bg8.webp) no-repeat center top;
    background-size: contain
}

.swiperNew9 {
    background: url(../imageswebp/bg9.webp) no-repeat center top;
    background-size: contain
}

.swiperNew10 {
    background: url(../imageswebp/bg10.webp) no-repeat center top;
    background-size: contain
}

.swiperNew11 {
    background: url(../imageswebp/bg11.webp) no-repeat center top;
    background-size: contain
}

@media(max-width:1023px) {
    .section12 .swiper-container {
        height: auto
    }

    .section12 .swiper-container.swiper-container-coverflow {
        margin-top: 0
    }

    .section12 .slide-caption {
        font-size: 12px
    }
}

.section12 .swiper-pagination-bullet {
    background: #fff
}

.section12 .swiper-pagination-bullet-active {
    background: #fff
}

.section12 .videoWrapper,
.section2B .videoWrapper {
    position: relative;
    width: 100%;
    height: 0;
    background-color: #000;
    padding-top: 56.2%
}

.section12 .videoIframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent
}

.section12 .videoPoster {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 0;
    outline: none;
    background-position: 50% 50%;
    background-size: 100% 100%;
    background-size: cover;
    text-indent: -999em;
    overflow: hidden;
    opacity: 1;
    -webkit-transition: opacity 800ms, height 0s;
    -moz-transition: opacity 800ms, height 0s;
    transition: opacity 800ms, height 0s;
    -webkit-transition-delay: 0s, 0s;
    -moz-transition-delay: 0s, 0s;
    transition-delay: 0s, 0s
}

.section12 .videoWrapperActive .videoPoster {
    opacity: 0;
    height: 0;
    -webkit-transition-delay: 0s, 800ms;
    -moz-transition-delay: 0s, 800ms;
    transition-delay: 0s, 800ms
}

.section12 .videoIframe {
    position: absolute;
    top: 0
}

.section12 .stroke-dotted {
    stroke-dasharray: 4, 5;
    stroke-width: 1px;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: spin 4s infinite linear;
    animation: spin 4s infinite linear;
    -webkit-transition: opacity 1s ease, stroke-width 1s ease;
    transition: opacity 1s ease, stroke-width 1s ease
}

.section12 .stroke-solid {
    stroke-dashoffset: 0;
    stroke-dasharray: 300;
    stroke-width: 4px;
    -webkit-transition: stroke-dashoffset 1s ease, opacity 1s ease;
    transition: stroke-dashoffset 1s ease, opacity 1s ease;
    opacity: 0
}

.section12 .vid-icon {
    -webkit-transition: -webkit-transform 200ms ease-out;
    transition: -webkit-transform 200ms ease-out;
    transition: transform 200ms ease-out;
    transition: transform 200ms ease-out, -webkit-transform 200ms ease-out
}

.section133 .play-vid:hover .icon,
.section12 .play-vid:hover .icon,
.section2B .play-vid:hover .icon {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1
}

.section133 .play-vid,
.section12 .play-vid,
.section2B .play-vid {
    cursor: pointer;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 1;
    width: 90px;
    height: 90px;
    background-color: #63636321;
    padding: 28px 27px 28px 36px;
    border-radius: 50px;
    backdrop-filter: blur(4px)
}

.section13 {
    background: url(../imageswebp/section13Bg.webp) no-repeat center top;
    background-size: cover;
    border-radius: 30px;
    padding: 5% 0;
    max-width: 95%;
    margin: auto;
    margin-top: 2%
}

.moneybackBOx {
    background-size: contain;
    border-radius: 15px;
    padding: 5.5% 1%;
    background-repeat: no-repeat;
    background-position: center top
}

.section14 {
    background: #fff;
    background: linear-gradient(155deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(230, 224, 250, 1) 53%, rgba(255, 255, 255, 1) 53%, rgba(230, 224, 250, 1) 87%, rgba(255, 255, 255, 1) 87%, rgba(255, 255, 255, 1) 92%, rgba(255, 255, 255, 1) 100%);
    background-size: cover;
    padding: 5% 0 10%;
    margin-top: 0
}

.voiceline13 {
    position: relative;
    padding: 0 0 .5%
}

.voiceline13-img {
    position: absolute;
    left: 0;
    bottom: 0
}

.plantitle {
    margin: 0 0 0 -18px
}

.planiconBox ul li {
    display: inline-block;
    margin: 0 15px 0 0
}

.planmainBox {
    padding: 0 2%
}

.planBox1 {
    border-width: 1px;
    border-color: #cfd8dc;
    border-style: solid;
    border-radius: 17px;
    background: url(../imageswebp/playBg1.webp) no-repeat center top;
    background-size: contain;
    box-shadow: 0 27px 62px 0 rgb(52 43 139/27%);
    padding: 14% 12% 6%;
    background-color: #fff;
    height: 100%;
    transition-duration: .3s
}

.plan2 {
    margin: -40px 0
}

.mostBg2 {
    border-radius: 6px;
    background-image: -webkit-linear-gradient(0deg, rgb(70, 191, 250) 0%, rgb(127, 153, 253) 39%, rgb(184, 114, 255) 100%);
    display: inline-block;
    padding: 2px 14px
}

.mostBg {
    margin-top: -25.5%;
    margin-bottom: 20%
}

.planBox2 {
    border-width: 1px;
    border-color: #22b2ff;
    border-style: solid;
    border-radius: 17px;
    background: url(../imageswebp/playBg1.webp) no-repeat center top;
    background-size: contain;
    box-shadow: 0 27px 62px 0 rgb(52 43 139/27%);
    padding: 16% 12% 6%;
    background-color: #fff;
    height: 100%;
    transition-duration: .3s
}

.checklist3 {
    margin-top: 18%
}

.checklist3 li {
    background: url(../imageswebp/checklist3.webp) no-repeat left 7px;
    padding-left: 30px;
    padding-right: 0%;
    list-style: none;
    margin-left: 0%;
    padding-top: 0;
    padding-bottom: 20px;
    margin-bottom: 0;
    text-align: left
}

.mybutton-plan1 a {
    border-width: 1px;
    border-color: #46bffa;
    border-style: solid;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 20px 35px 0 rgb(70 51 255/10%);
    color: #46bffa;
    padding: 4.1% 27.5%;
    display: inline-block;
    text-align: center;
    transition: .5s;
    text-transform: uppercase;
    margin-top: 8%;
    transition-duration: .3s
}

.mybutton-plan1 a:hover {
    background-color: #26a5e2;
    box-shadow: 0 20px 25px 0 rgb(206 200 233/60%);
    color: #fff;
    transition-duration: .3s;
    transform: scale(1.05)
}

.mybutton-plan a {
    border-radius: 12px;
    background-color: rgb(70 191 250);
    box-shadow: 0 20px 25px 0 rgb(206 200 233/60%);
    color: #fff;
    padding: 5.3% 32.2%;
    display: inline-block;
    margin: auto;
    transition: .5s;
    text-transform: uppercase;
    margin-top: 6%;
    transition-duration: .3s
}

.mybutton-plan a:hover {
    background-color: #26a5e2;
    box-shadow: 0 11px 18px 0 rgb(31 182 255/5%);
    transform: scale(1.05);
    transition-duration: .3s
}

.swiper-button-next.swiprNextAi {
    background-color: #ffffff4a !important;
    border-radius: 50%;
    height: 26px;
    width: 26px
}

.swiper-button-next.swiprNextAi::after {
    color: #fff !important;
    font-size: 8px !important
}

.swiper-button-prev.swiprPrevAi {
    background-color: #ffffff4a !important;
    border-radius: 50%;
    height: 26px;
    width: 26px
}

.swiper-button-prev.swiprPrevAi::after {
    color: #fff !important;
    font-size: 8px !important
}

.swiper-pagination.paginationAi.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
    --swiper-theme-color: #fff;
    margin: 0 0 6px
}

.section15 {
    background: url(../imageswebp/section15Bg.webp) no-repeat center top;
    background-size: cover;
    border-radius: 30px;
    padding: 7% 0 8%;
    max-width: 95%;
    margin: auto
}

.voiceline11 {
    position: relative;
    padding: 0 0 .5%
}

.voiceline11-img {
    position: absolute;
    left: 0;
    bottom: 0
}

.card {
    background-color: transparent !important;
    border: 0;
    padding: 0
}

.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word
}

.card-header {
    background-color: transparent;
    border-bottom: 0
}

.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgb(0 0 0/0%)
}

.collapse {
    display: none
}

.footer-section .fa {
    color: #5f5481;
    position: absolute;
    margin-top: .5%;
    right: 2%;
    font-size: 26px;
    font-weight: 500
}

.card button {
    white-space: break-spaces;
    text-align: left;
    padding: 0;
    color: #fff;
    width: 100%;
    margin: 0;
    border: 0
}

.btn-link:hover {
    color: #fff !important;
    text-decoration: none !important
}

.footer-section hr {
    border-top: 1px solid #130d54
}

hr.hrr {
    margin: 15px 0 0
}

.section16 {
    background-color: #fff;
    padding: 6% 0 5%
}

.voiceline12 {
    position: relative;
    padding: 0 0 .5%
}

.voiceline12-img {
    position: absolute;
    left: 0;
    bottom: 0
}

.storiesBox {
    padding-top: 6%
}

.testi-box {
    padding: 7% 5%
}

.swiper {
    width: 100%;
    height: 100%
}

.swiper-slide .swiperBg2 {
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

.swiper-slide img {
    object-fit: cover
}

.swiper-button-prev:after {
    display: none
}

.swiper-button-next:after {
    display: none
}

.swiper3-button-prev,
.swiper3-button-next {
    color: #9188ec !important;
    font-size: 40px;
    top: 31% !important
}

.section17 {
    background-image: -webkit-linear-gradient(0deg, hsl(200deg 100% 56%/9%) 4%, hsl(270deg 88% 70%/9%) 95%);
    padding: 6% 0 1%
}

.flagbox .button {
    border: 0;
    background: 0 0;
    box-sizing: border-box;
    width: 0;
    height: 10px;
    border-color: transparent transparent transparent #fff;
    transition: 100ms all ease;
    cursor: pointer;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    text-align: center;
    margin: 0 0 0 3px
}

.flagmain {
    padding: 0 8px
}

.play-icon.flagbox {
    padding: 7px;
    background: #cfecfc;
    border-radius: 60px
}

.flagbox-inner {
    background: #33b4f3;
    padding: 8px;
    border-radius: 62px;
    height: 27px
}

.flagbox .button.paused {
    border-style: double;
    border-width: 0 0 0 9px;
    margin: 0 0 0 1px
}

.flagmain-Pop {
    padding: 0 10px
}

.speech-img {
    max-width: 12%
}

:root {
    --swiper-theme-color: #8a78ef !important
}

.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 20px !important
}

.swiper-slide.speech {
    height: 585px
}

.elitText {
    margin-top: -1%
}

.modal-body.bodypop {
    border-radius: 15px !important;
    background-color: rgb(255 255 255);
    box-shadow: 0 23px 62px 0 rgb(0 0 0/11%) !important;
    border: 1px solid #fff;
    padding: 0 10px 4%
}

.audioPlayer-time.audioPlayer-time-current {
    display: none
}

.modal-dialog-scrollable.modal-Pop {
    max-width: 71.6%;
    margin: auto
}

.audioPlayer-time.audioPlayer-time-duration {
    display: none
}

.audioPlayerpop {
    margin: 0 0 -35px
}

.flagBoxpop {
    padding: 1.2% 1%;
    margin: auto
}

.scrolpopup {
    padding: 4% 4% 3.5%;
    overflow-y: scroll;
    height: 695px
}

.section8 .scrolpopup {
    padding: 4% 4% 0%
}

.flagBoxpop-inner {
    border-style: solid;
    border-width: 1px;
    border-color: #deecf3;
    border-radius: 27px;
    background-color: #fff;
    box-shadow: 0 11px 46px 0 rgb(12 68 95/17%);
    padding: 15px 10px 15px 5px;
    margin: auto;
    position: relative;
    transition-duration: .3s;
    height: 100px
}

.flagBoxpop-inner:hover {
    box-shadow: 0 11px 18px 0 rgb(31 182 255/5%);
    transform: scale(1.1);
    transition-duration: .3s;
    overflow: hidden
}

.flgpop-Row {
    padding-top: 2%
}

.modal .close18 {
    width: auto;
    position: absolute;
    z-index: 1;
    background-color: #fff;
    border-radius: 50%;
    padding: 2px 8px;
    opacity: .8;
    color: #1f2024;
    font-size: 25px;
    top: 20px;
    right: 40px
}

.crosspop {
    max-width: 90%
}

.swiper1Speech {
    position: relative
}

i.fa.fa-angle-right {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 0 4px
}

i.fa.fa-angle-left {
    font-size: 20px;
    font-weight: 600;
    margin: 0 4px 0 0
}

.flagmain-Box2 {
    padding: 5px;
    width: 20%
}

.flagmain-Box2-inner {
    background-color: #fff;
    flex-direction: row;
    box-sizing: border-box;
    margin: 0 0;
    padding: 5% 8%;
    align-items: center;
    border-radius: 8px;
    height: 100px;
    position: relative
}

.flagmain2 {
    width: 22%
}

.songEmotion2 {
    position: absolute;
    top: 20%;
    left: 30%;
    font-size: 15px
}

.play-icon.flagbox2 {
    padding: 7px;
    background: #cfecfc;
    border-radius: 60px
}

.flagbox-inner2 {
    background: #33b4f3;
    padding: 8px;
    border-radius: 62px
}

.flagbox2 .button.paused {
    border-style: double;
    border-width: 0 0 0 9px;
    margin: 0 0 0 1px
}

.flagbox2 .button {
    border: 0;
    background: 0 0;
    box-sizing: border-box;
    width: 0;
    height: 10px;
    border-color: transparent transparent transparent #fff;
    transition: 100ms all ease;
    cursor: pointer;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    text-align: center;
    margin: 0 0 0 3px
}

.CopyrightText {
    color: #adb4ba;
    margin-top: 16%;
    text-align: left;
    display: block
}

.CopyrightText:hover {
    color: #000
}

.footerlinks ul li {
    margin-bottom: 25px;
    padding: 0 3%
}

.footerlinks ul li a {
    text-align: left;
    color: #000
}

.footerlinks ul li a:hover {
    color: #8b81eb;
    text-decoration: underline
}

.socialicon {
    margin-top: 12%
}

.socialicon ul li {
    display: inline-block
}

.socialicon ul li i {
    font-size: 25px;
    margin: 0 15px 0 0;
    color: #000
}

.logoFooter {
    margin-bottom: 6%
}

.section17 i.fa.fa-facebook-square:hover {
    color: #3b5998;
    transform: scale(1.09);
    transition-delay: .1s
}

.section17 i.fa.fa-twitter:hover {
    color: #55acee;
    transform: scale(1.09);
    transition-delay: .1s
}

.section17 i.fa.fa-instagram:hover {
    color: #e4405f;
    transform: scale(1.09);
    transition-delay: .1s
}

.section17 i.fa.fa-youtube-play:hover {
    color: red;
    transform: scale(1.09);
    transition-delay: .1s
}

.aiBox {
    position: relative
}

.audioPlayerai:hover {
    cursor: pointer;
    background-image: -webkit-linear-gradient(0deg, hsl(200deg 100% 56%/23%) 4%, hsl(270deg 88% 70%/23%) 95%)
}

.songEmotion {
    cursor: pointer
}

.audioPlayerai {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    margin: 0 0;
    padding: 0% 10% 10%;
    align-items: center;
    border-radius: 8px;
    background: #fff
}

.audioPlayerai-playpause {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    transition: all .2s ease-in-out
}

.audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-playpause {
    background: transparent;
    border: none;
    border-radius: 50%;
    box-shadow: 0 5px 8px 0 rgb(138 120 240/20%);
    background-color: #8a78ef;
    outline: none
}

.audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-playpause:hover {
    background: rgb(138 120 239/74%)
}

.audioPlayerai-playing .audioPlayerai-playpause {
    background: transparent;
    border: 1px solid #8a78ef
}

.audioPlayerai-playing .audioPlayerai-playpause:hover {
    background: rgb(138 120 239/8%)
}

.audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-playpause a {
    content: '';
    justify-content: center;
    width: 18px;
    height: 0;
    margin-left: 15px;
    border-top: 4px solid transparent;
    border-right: none;
    border-bottom: 4px solid transparent;
    border-left: 7px solid #fff
}

.audioPlayerai-playing .audioPlayerai-playpause a {
    content: '';
    display: flex;
    justify-content: space-between;
    width: 12px;
    height: 14px
}

.audioPlayerai-playing .audioPlayerai-playpause a::before,
.audioPlayerai-playing .audioPlayerai-playpause a::after {
    content: '';
    width: 4px;
    height: 14px;
    background-color: #8a78ef
}

.audioPlayerai-time {
    display: flex;
    width: 40px;
    justify-content: center;
    font-size: 12px;
    color: rgba(51, 51, 51, .6)
}

.audioPlayerai-time-current {
    margin-left: 24px
}

.audioPlayerai-time-duration {
    margin-right: 24px
}

.audioPlayerai-bar {
    position: relative;
    display: flex;
    margin: 35% 24px 0 -26px;
    height: 12px;
    flex-basis: 0;
    flex-grow: 1;
    cursor: pointer
}

.audioPlayerai-bar::before {
    content: '';
    position: absolute;
    top: 5px;
    width: 100%;
    height: 2px;
    background-color: #dde2e6
}

.audioPlayerai-bar>div {
    position: absolute;
    left: 0;
    top: 5px
}

.audioPlayerai-bar-loaded {
    z-index: 1;
    height: 2px;
    background: #bec8d2
}

.audioPlayerai-bar-played {
    flex-direction: row-reverse;
    z-index: 2;
    height: 2px;
    background: -webkit-linear-gradient(left, #0059FF, #09B1FA)
}

.audioPlayerai-bar-played::after {
    display: flex;
    position: absolute;
    content: '';
    box-sizing: border-box;
    top: -5px;
    right: -1px;
    margin-right: -5px;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 6px
}

.audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-bar-played::after {
    border: 2px solid #bec8d2
}

.audioPlayerai-playing .audioPlayerai-bar-played::after {
    border: 2px solid #0059ff
}

.audioPlayerai-volume {
    display: flex;
    align-items: center;
    margin: 0 0 0 -40px
}

.audioPlayerai-volume-button {
    display: flex;
    align-items: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    padding: 5px 15px 0 0
}

.audioPlayerai-volume-button a {
    display: flex;
    width: 6px;
    height: 8px;
    background-color: #9a9fb0;
    position: relative
}

.audioPlayerai-volume-button a:before,
.audioPlayerai-volume-button a:after {
    content: '';
    position: absolute
}

.audioPlayerai-volume-button a:before {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 9px solid #9a9fb0;
    border-bottom: 8px solid transparent;
    border-left: none;
    top: -4px
}

.audioPlayerai:not(.audioPlayerai-mute) .audioPlayerai-volume-button a:after {
    left: 11px;
    top: 1px;
    width: 6px;
    height: 6px;
    border: 6px double #9a9fb0;
    border-width: 6px 6px 0 0;
    border-radius: 0 12px 0 0;
    transform: rotate(45deg)
}

.audioPlayerai-mute .audioPlayerai-volume-button a {
    background-color: #fd4f1a
}

.audioPlayerai-mute .audioPlayerai-volume-button a:before {
    border-right: 9px solid #fd4f1a
}

.audioPlayerai-volume-adjust {
    display: flex;
    align-items: center;
    margin-left: 8px
}

.audioPlayerai-volume-adjust>div {
    position: relative;
    display: flex;
    width: 60px;
    height: 2px;
    cursor: pointer;
    background-color: #bec8d2
}

.audioPlayerai-volume-adjust div div {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    background-color: #0059ff
}

@media screen and (max-width:679px) {
    .audioPlayerai-volume-adjust {
        display: none
    }
}

.audioPlayerai-time.audioPlayerai-time-current {
    display: none !important
}

.audioPlayerai-time.audioPlayerai-time-duration {
    display: none !important
}

.audioPlayerai-volume-adjust {
    display: none
}

.songEmotion {
    position: absolute;
    top: 27%;
    left: 25%
}

.aiBox2 {
    position: relative
}

.audioPlayerai2-bar-played {
    display: none
}

.audioPlayerai2-bar {
    display: none !important
}

.audioPlayerai2 {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    align-items: center;
    background-color: #cfedfc;
    display: inline-block;
    padding: 7px;
    border-radius: 20px;
    float: right
}

.audioPlayerai2-playpause {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    transition: all .2s ease-in-out
}

.audioPlayerai2:not(.audioPlayerai2-playing) .audioPlayerai2-playpause {
    background: transparent;
    border: none;
    border-radius: 50%;
    box-shadow: 0 5px 8px 0 rgb(138 120 240/20%);
    background-color: #33b4f3;
    outline: none
}

.audioPlayerai2:not(.audioPlayerai2-playing) .audioPlayerai2-playpause:hover {
    background: rgb(51 180 243/62%)
}

.audioPlayerai2-playing .audioPlayerai2-playpause {
    background: transparent
}

.audioPlayerai2-playing .audioPlayerai2-playpause:hover {
    background: rgb(138 120 239/8%)
}

.audioPlayerai2:not(.audioPlayerai2-playing) .audioPlayerai2-playpause a {
    content: '';
    justify-content: center;
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 5px solid transparent;
    border-right: none;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #fff
}

.audioPlayerai2-playing .audioPlayerai2-playpause a {
    content: '';
    display: flex;
    justify-content: space-between;
    width: 12px;
    height: 14px
}

.audioPlayerai2-playing .audioPlayerai2-playpause a::before,
.audioPlayerai2-playing .audioPlayerai2-playpause a::after {
    content: '';
    width: 4px;
    height: 14px;
    background-color: #33b4f3
}

.audioPlayerai2-time {
    display: flex;
    width: 40px;
    justify-content: center;
    font-size: 12px;
    color: rgba(51, 51, 51, .6)
}

.audioPlayerai2-time-current {
    margin-left: 24px
}

.audioPlayerai2-time-duration {
    margin-right: 24px
}

.audioPlayerai2-bar {
    position: relative;
    display: flex;
    margin: 11% 12px 0;
    height: 12px;
    flex-basis: 0;
    flex-grow: 1;
    cursor: pointer
}

.audioPlayerai2-bar::before {
    content: '';
    position: absolute;
    top: 5px;
    width: 100%;
    height: 2px;
    background-color: #dde2e6
}

.audioPlayerai2-bar>div {
    position: absolute;
    left: 0;
    top: 5px
}

.audioPlayerai2-bar-loaded {
    z-index: 1;
    height: 2px;
    background: #bec8d2
}

.audioPlayerai2-bar-played {
    flex-direction: row-reverse;
    z-index: 2;
    height: 2px;
    background: -webkit-linear-gradient(left, #0059FF, #09B1FA)
}

.audioPlayerai2-bar-played::after {
    display: flex;
    position: absolute;
    content: '';
    box-sizing: border-box;
    top: -5px;
    right: -1px;
    margin-right: -5px;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 6px
}

.audioPlayerai2:not(.audioPlayerai2-playing) .audioPlayerai2-bar-played::after {
    border: 2px solid #bec8d2
}

.audioPlayerai2-playing .audioPlayerai2-bar-played::after {
    border: 2px solid #0059ff
}

.audioPlayerai2-volume {
    display: flex;
    align-items: center
}

.audioPlayerai2-volume-button {
    display: flex;
    align-items: center;
    width: 24px;
    height: 24px;
    cursor: pointer
}

.audioPlayerai2-volume-button a {
    display: flex;
    width: 6px;
    height: 8px;
    background-color: #9a9fb0;
    position: relative
}

.audioPlayerai2-volume-button a:before,
.audioPlayerai2-volume-button a:after {
    content: '';
    position: absolute
}

.audioPlayerai2-volume-button a:before {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 9px solid #9a9fb0;
    border-bottom: 8px solid transparent;
    border-left: none;
    top: -4px
}

.audioPlayerai2:not(.audioPlayerai2-mute) .audioPlayerai2-volume-button a:after {
    left: 10px;
    top: -2px;
    width: 6px;
    height: 6px;
    border: 6px double #9a9fb0;
    border-width: 6px 6px 0 0;
    border-radius: 0 12px 0 0;
    transform: rotate(45deg)
}

.audioPlayerai2-mute .audioPlayerai2-volume-button a {
    background-color: #fd4f1a
}

.audioPlayerai2-mute .audioPlayerai2-volume-button a:before {
    border-right: 9px solid #fd4f1a
}

.audioPlayerai2-volume-adjust {
    display: flex;
    align-items: center;
    margin-left: 8px
}

.audioPlayerai2-volume-adjust>div {
    position: relative;
    display: flex;
    width: 60px;
    height: 2px;
    cursor: pointer;
    background-color: #bec8d2
}

.audioPlayerai2-volume-adjust div div {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    background-color: #0059ff
}

@media screen and (max-width:679px) {
    .audioPlayerai2-volume-adjust {
        display: none
    }
}

.audioPlayerai2-time.audioPlayerai2-time-current {
    display: none !important
}

.audioPlayerai2-time.audioPlayerai2-time-duration {
    display: none !important
}

.audioPlayerai2-volume {
    display: none !important
}

.songEmotion {
    position: absolute;
    top: 27%;
    left: 25%
}

.w-lightbox-hide {
    display: none
}

.w-lightbox-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
    border: 5px solid rgba(0, 0, 0, .4);
    border-radius: 50%;
    -webkit-animation: .8s linear infinite spin;
    animation: .8s linear infinite spin
}

.about-banner {
    background-color: #fff;
    padding: 2% 2.6%
}

.about-banner-inn {
    background: url(../imageswebp/aboutBg.webp) no-repeat center top;
    background-size: cover;
    border-radius: 30px;
    padding: 4.5% 0;
    background-color: #698ff6
}

.about-img {
    text-align: right
}

.about-section2 {
    background: url(../imageswebp/aboutSection2.webp) no-repeat center top;
    background-size: cover;
    padding: 3.5% 0 5%
}

.about-section2-box-main {
    padding: 0 4.6%;
    margin-top: 3%
}

.about-section2-box {
    padding: 0 1.8%;
    margin-top: 3%
}

.about-section2-box-inn {
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 8px 73px 0 rgb(46 97 121/17%);
    text-align: center;
    padding: 15% 6% 19%;
    height: 100%
}

.about-section2-box h2 {
    color: #1f2024;
    margin-top: 9%
}

.about-section2-box p {
    color: #646876;
    margin-top: 2%
}

.about-section2-box:nth-child(4) .about-section2-box-inn {
    padding: 14% 6%
}

.about-section3 {
    background-color: #fff;
    padding: 2% 2.6%
}

.about-section3-inn {
    background-color: #f8fafb;
    border-radius: 30px;
    padding: 4.5% 0 5%
}

.about-section3-box-main {
    margin-top: 3%
}

.about-section3-box {}

.about-section3-box h2 {
    color: #1f2024;
    margin-top: 5%
}

.about-section3-box p {
    color: #646876;
    margin-top: 5%
}

.blog-banner {
    background-color: #fff;
    padding: 2% 2.6%
}

.blog-banner-inn {
    background: url(../imageswebp/blogBg.webp) no-repeat center top;
    background-size: cover;
    border-radius: 30px;
    padding: 5% 0 24.5%;
    background-color: #698ff6
}

.blog-section2 {
    margin-top: -21%;
    padding-bottom: 6%
}

.blog-box {
    padding: 11px
}

.blog-box-inn {
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 12px 70px 0 rgba(12, 76, 106, .14);
    padding: 7%
}

.blog-text1 {
    text-align: left
}

.blog-text2 {
    text-align: center
}

.blog-text3 {
    text-align: right
}

.blog-box h3 {
    margin-top: 7%;
    margin-bottom: 4%
}

.blog-box h5 {
    color: #636363;
    display: contents
}

.blog-box h5 span {
    border-radius: 4px;
    background-color: #f5f5f5;
    display: inline-block;
    padding: 4% 6%;
    position: relative;
    margin-top: -4px
}

.blog-box p {
    color: #646876;
    margin-top: 5%;
    padding-right: 1%;
    margin-bottom: 10%
}

.blog-box h6 {
    color: #1f2024
}

.blogIcon {
    max-width: 110%
}

.careers-banner {
    background-color: #fff;
    padding: 2% 2.6%
}

.careers-banner-inn {
    background: url(../imageswebp/careersBg.webp) no-repeat center top;
    background-size: cover;
    border-radius: 30px;
    padding: 6% 0 7%;
    background-color: #698ff6
}

.careers-section2 {
    background: url(../imageswebp/careersSection2.webp) no-repeat center top;
    background-size: cover;
    padding: 4.5% 0 5%
}

.hiring-detail {
    padding: 0 2%
}

.hiring-img {
    text-align: right
}

.careers-section3 {
    background-color: #fafafa;
    padding: 6% 0
}

.careers-section4 {
    background: url(../imageswebp/careersSection4.webp) no-repeat center top;
    background-size: cover;
    padding: 5.5% 0 5%
}

.careers-section4-box {}

.careers-section4-box-inn {
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 8px 57px 0 rgb(0 0 0/7%);
    padding: 3.2% 4%
}

.careers-section4-box-details {
    padding: 0
}

.time-location-box {
    padding: 0
}

.time-location-box p {
    margin: 11% 0
}

.timeIcon {
    position: relative;
    margin-right: 2%;
    left: -1%
}

.locationIcon {
    position: relative;
    margin-right: 6%
}

.mybutton6 {
    text-align: right
}

.mybutton6 a {
    border-radius: 30px;
    box-shadow: 0 11px 18px 0 rgba(31, 182, 255, .16);
    background-color: #1fb6ff;
    color: #fff;
    padding: 7.2% 2%;
    transition: all .5s;
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin-left: auto;
    width: 109%;
    left: -4%
}

.mybutton6 a:hover {
    background-color: #26a5e2;
    box-shadow: 0 11px 18px 0 rgb(31 182 255/5%);
    transform: scale(1.05)
}

.contact-banner {
    background-color: #fff;
    padding: 2% 2.6%
}

.contact-banner-inn {
    background: url(../imageswebp/contactBg.webp) no-repeat center top;
    background-size: cover;
    border-radius: 30px;
    padding: 6% 0 0%;
    background-color: #698ff6
}

.contact-box {
    padding: 1% 2.4%;
    margin-bottom: -5%;
    margin-top: 4%
}

.contact-box-inn {
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 12px 70px 0 rgba(12, 76, 106, .14);
    padding: 11% 12%;
    text-align: center
}

.contact-box h2 {
    margin-top: 5.1%
}

.contact-box p {
    margin-top: 8%;
    color: #646876
}

.mybutton7 {
    margin-top: 12%
}

.mybutton7 a {
    border-radius: 30px;
    box-shadow: 0 9px 29px 0 rgba(39, 157, 214, .29);
    background-color: #1fb6ff;
    color: #fff;
    padding: 2.9% 2%;
    transition: all .5s;
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin-left: auto;
    width: 89%
}

.mybutton7 a:hover {
    background-color: #26a5e2;
    box-shadow: 0 11px 18px 0 rgb(31 182 255/5%);
    transform: scale(1.05)
}

.contact-section2 {
    background: url(../imageswebp/contactSection2.webp) no-repeat center top;
    background-size: cover;
    padding: 7% 0 6.5%
}

.contact-section2-main-box {
    margin-top: 4%
}

.contact-section2-box {
    padding: 3% 3.5%
}

.contact-section2-box h2 {
    margin-top: 6%
}

.contact-section2-box p {
    margin-top: 5%;
    color: #646876
}

.contact-section2-box h6 {
    margin-top: 6%;
    color: #959bad
}

.recently-box-out {
    padding: 0 3%
}

.recently-box {
    border-width: 1px;
    border-color: rgb(158 178 188/31%);
    border-style: solid;
    border-radius: 10px;
    background-color: #fff;
    margin-top: 6%
}

.recently-box h2 {
    margin-bottom: 4%
}

.recently-box h4 {
    color: #1f2024
}

.recently-box p {
    margin-top: 4%;
    color: #959bad
}

.swiper2-button-next,
.swiper2-button-prev {
    top: 12% !important;
    color: #97d4f2 !important
}

.swiper2-button-next {
    right: 0 !important;
    left: auto !important
}

.swiper2-button-prev {
    transform: rotate(180deg);
    right: 25px !important;
    left: auto !important
}

.swiper2-button-next:hover,
.swiper2-button-prev:hover {
    color: #3ab8f5 !important
}

.single-blog-section {
    background: url(../imageswebp/singleBlogSection.webp) no-repeat center top;
    background-size: cover;
    padding: 4% 0 6%;
    background-color: #f1f6f8
}

.blgIcon2 {
    position: relative;
    margin-right: 7px;
    border-radius: 50px;
    background-color: rgb(255 255 255);
    box-shadow: 0 4px 13px 0 rgb(16 39 50/32%)
}

.singleBlogImg {
    border-style: solid;
    border-width: 4px;
    border-color: #fff;
    background-color: #005d71;
    box-shadow: 0 10px 51px 0 rgb(12 27 35/19%);
    width: 100%
}

.single-blog-section-box {
    padding: 0 3%
}

.single-blog-video {
    border-style: solid;
    border-width: 4px;
    border-color: #fff;
    background-color: #000;
    box-shadow: 0 10px 51px 0 rgb(12 27 35/19%);
    margin-top: 6%
}

.single-blog-section-box2 {
    padding: 0 2%;
    margin-top: 6%
}

.single-blog-section-box2-inn {
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 10px 73px 0 rgb(12 27 35/8%);
    padding: 6% 5% 5%;
    text-align: center;
    margin-top: -4%
}

.singleBlogIcon {
    border-radius: 50px;
    background-color: #fff;
    box-shadow: 0 13px 21px 0 rgb(24 28 30/14%);
    position: relative;
    z-index: 1
}

ul.single-blog-list {
    list-style: disc;
    padding: 0 15px
}

.single-blog-list li {
    padding: 4px 0
}

.social-icon {
    margin-top: 1.5%
}

.social-icon li {
    display: inline-block;
    margin: 0 2px
}

.social-icon li a {}

.social-icon li a .fa {
    color: #fff;
    width: 22px;
    height: 22px;
    padding: 6px 0;
    border-radius: 50px;
    font-size: 12px
}

.social-icon li a .fa-facebook {
    background-color: #3c5a9a
}

.social-icon li a .fa-twitter {
    background-color: #55acee
}

.social-icon li a .fa-linkedin {
    background-color: #0a7bba
}

.social-icon li a .fa-facebook:hover {
    background-color: #2b4172
}

.social-icon li a .fa-twitter:hover {
    background-color: #4893cb
}

.social-icon li a .fa-linkedin:hover {
    background-color: #096598
}

.social-icon2 {}

.social-icon2 li {
    display: inline-block;
    margin: 0 4px
}

.social-icon2 li .fa {
    font-size: 19px;
    color: #1f2024;
    background-color: #e3e5e6;
    width: 40px;
    height: 40px;
    padding: 10px 0;
    border-radius: 50px
}

.social-icon2 li .fa-twitter:hover {
    background-color: #55acee;
    color: #fff
}

.social-icon2 li .fa-facebook:hover {
    background-color: #3b5998;
    color: #fff
}

.social-icon2 li .fa-linkedin-square:hover {
    background-color: #0077b5;
    color: #fff
}

.social-icon2 li .fa-link:hover {
    background-color: #1769ff;
    color: #fff
}

.swiper4-box {
    color: #1f2024;
    border-width: 1px;
    border-color: #d7dcde;
    border-style: solid;
    border-radius: 12px;
    padding: 12% 8% 6%
}

.swiper-slide.swiper-slide-duplicate.swiper-slide-active {}

.swiper-slide.swiper-slide-next.swiper-slide-duplicate-prev {
    text-align: right
}

.swiper4-button-next,
.swiper4-button-prev {
    top: 24% !important;
    color: #1fb6ff !important
}

.swiper4-button-next:hover,
.swiper4-button-prev:hover {
    color: #189bda !important
}

.swiper4-button-next {
    right: 6% !important
}

.swiper4-button-prev {
    left: 6% !important
}

.swiper4-button-prev span {
    transform: rotate(180deg)
}

.thankyou-section1 {
    background: url(../imageswebp/thankyouSection1.webp) no-repeat center top;
    background-size: cover;
    padding: 3% 0;
    background-color: #f1f6f8
}

.thankyou-section1-box {
    margin-top: 4%
}

.thankyou-section1-box-inn {
    background: url(../imageswebp/thankyouBox.webp) no-repeat center top;
    background-size: cover;
    padding: 9% 2%;
    background-color: #7198f8;
    border-radius: 15px
}

.thankyou-section1-video {
    padding: 0 2.7%
}

.voiceline14 {
    position: relative;
    padding: 0 0 .5%
}

.voiceline14-img {
    position: absolute;
    left: 0;
    bottom: 0
}

.mybutton8 {
    margin-top: 3.5%
}

.mybutton8 a {
    border-radius: 50px;
    box-shadow: 0 9px 29px 0 rgb(39 157 214/29%);
    background-color: #1fb6ff;
    color: #fff;
    padding: 1.8% 5.3%;
    transition: all .5s;
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin-left: auto
}

.mybutton8 a:hover {
    background-color: #26a5e2;
    box-shadow: 0 11px 18px 0 rgb(31 182 255/5%);
    transform: scale(1.05)
}

.arrowLeft2 {
    position: relative;
    margin-top: -9%;
    left: -1%
}

.arrowRight2 {
    position: relative;
    margin-top: -9%;
    right: -1%
}

.thankyou-section2-main-box {
    padding: 0 4%;
    margin-top: 6%
}

.thankyou-section2 {
    background-color: #fff;
    padding: 2% 2.6%
}

.thankyou-section2-inn {
    background: url(../imageswebp/thankyouSection2.webp) no-repeat center top;
    background-size: cover;
    border-radius: 30px;
    padding: 5% 0 6.5%;
    background-color: #f1f5ff
}

.voiceline15 {
    position: relative;
    padding: 0 0 .7%
}

.voiceline15-img {
    position: absolute;
    left: 0;
    bottom: 0
}

.thankyou-section2-box {
    padding: 0 1.5%
}

.thankyou-section2-box-inn {
    border-radius: 13px;
    background-color: #fff;
    box-shadow: 0 12px 70px 0 rgb(12 76 106/14%);
    padding: 5% 5% 11%
}

.thankyou-section2-box-detail {
    padding: 9% 4% 0
}

.checklist4 {
    margin-top: 6%
}

.checklist4 li {
    background: url(../imageswebp/checklist4.webp) no-repeat left 9px;
    padding-left: 26px;
    padding-right: 0%;
    list-style: none;
    margin-left: 0%;
    padding-top: 0;
    padding-bottom: 12px;
    margin-bottom: 0;
    text-align: left;
    color: #646876
}

.mybutton9 {
    margin-top: 5%
}

.mybutton9 a {
    border-radius: 50px;
    box-shadow: 0 9px 29px 0 rgb(39 157 214/29%);
    background-color: #1fb6ff;
    color: #fff;
    padding: 3.7% 5.3%;
    transition: all .5s;
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin-left: auto;
    width: 100%
}

.mybutton9 a:hover {
    background-color: #26a5e2;
    box-shadow: 0 11px 18px 0 rgb(31 182 255/5%);
    transform: scale(1.05)
}

.thankyou-section3 {
    padding: 5% 0
}

.thankyou-section3-main-box {
    padding: 0 5%;
    margin-top: -1%
}

.thankyou-section2 {}

.thankyou-section3-box1 {
    padding: 0 1.6%;
    margin-bottom: 2%
}

.thankyou-section3-box-inn {
    border-radius: 13px;
    background-color: #fff;
    box-shadow: 0 12px 70px 0 rgb(12 76 106/14%);
    padding: 11%;
    text-align: center;
    height: 100%
}

.thankyou-section3-box h4 {
    margin-top: 7%
}

.thankyou-section3-box p {
    margin-top: 4%
}

.mybutton10 {
    margin-top: 10%
}

.mybutton10 a {
    border-radius: 50px;
    box-shadow: 0 9px 29px 0 rgb(39 157 214/29%);
    background-color: #1fb6ff;
    color: #fff;
    padding: 3.7% 5.3%;
    transition: all .5s;
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin-left: auto;
    width: 100%
}

.mybutton10 a:hover {
    background-color: #26a5e2;
    box-shadow: 0 11px 18px 0 rgb(31 182 255/5%);
    transform: scale(1.05)
}

.thankyou-section4-box {
    background: url(../imageswebp/thankyouSection4.webp) no-repeat center top;
    background-size: cover;
    border-radius: 30px;
    padding: 9% 2%;
    background-color: #f1f5ff;
    text-align: center
}

.mybutton11 {
    margin-top: 3%
}

.mybutton11 a {
    border-radius: 50px;
    box-shadow: 0 9px 29px 0 rgb(39 157 214/29%);
    background-color: #ffe325;
    color: #222;
    padding: 1.8% 6%;
    transition: all .5s;
    position: relative;
    overflow: hidden;
    display: inline-block
}

.mybutton11 a:hover {
    background-color: #e1c821;
    box-shadow: 0 11px 18px 0 rgb(31 182 255/5%);
    transform: scale(1.05)
}

.thankyou-section5 {
    background: url(../imageswebp/thankyouSection5.webp) no-repeat center top;
    background-size: cover;
    padding: 4.5% 0 5%
}

.voiceline16 {
    position: relative;
    padding: 0 0 .4%
}

.voiceline16-img {
    position: absolute;
    left: 0;
    bottom: 0
}

.thankyou-section5-line {
    margin: 5% 0
}

.submit-btn {}

.submit-btn {
    border-radius: 50px;
    box-shadow: 0 9px 29px 0 rgb(39 157 214/29%);
    background-color: #1fb6ff;
    color: #fff;
    padding: 3.7% 5.3%;
    transition: all .5s;
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin-left: auto;
    width: 100%;
    border: 0;
    margin-top: 3%;
    margin-bottom: 2%;
    cursor: pointer
}

.submit-btn:hover {
    background-color: #26a5e2;
    box-shadow: 0 11px 18px 0 rgb(31 182 255/5%);
    transform: scale(1.05)
}

.input-container {
    position: relative
}

.input-container .fa {
    position: absolute;
    top: 35%;
    left: 8%;
    color: #bdbdbd;
    font-size: 15px
}

.input-container input {
    border-width: 1px;
    border-color: #e5e5e5;
    border-style: solid;
    border-radius: 24px;
    background-color: #fff;
    padding: 4% 1% 4% 15%;
    width: 100%;
    margin: 2% 0
}

.thankyou-section3-box2 .mybutton10 {
    margin-top: 19%
}

.thankyou-section1-video .responsive-video {
    border-radius: 15px;
    background-color: #000
}

.clone-section {
    background: url(../images/clonebg.png) no-repeat center top;
    background-size: cover;
    padding: 2.5% 0% 7%;
    overflow: hidden
}

.clone-section-box {
    background: url(../images/clonebox.png) no-repeat center top;
    background-size: cover;
    border-radius: 30px;
    padding: 6% 15px
}

.clone-box {
    width: 39%;
    padding: 20px 20px 0;
    margin-top: 5%
}

.clone-box-inn {
    border-radius: 26px;
    background-color: #fff;
    padding: 31px;
    height: 100%
}

.clone-box h4 {
    margin-top: 7%
}

.clone-box p {
    margin-top: 3%;
    padding: 0 3%
}

.technology-title {}

.mybutton4 {}

.mybutton4 a {
    border-radius: 50px;
    background-color: #1fb6ff;
    box-shadow: 0 20px 35px 0 rgba(31, 182, 255, .29);
    color: #fff;
    padding: 18px 43px;
    transition: all .5s;
    position: relative;
    overflow: hidden;
    display: table;
    margin: auto
}

.mybutton4 a:hover {
    background-color: #26a5e2;
    transform: scale(1.05)
}

.faq-box {
    border-radius: 34px;
    background-color: #d7f0ff
}

.faq-box .card button,
.faq-box .card button:hover {
    color: #1f2024 !important
}

.faq-box .footer-section .fa {
    color: #1f2024
}

.faq-box .btn-link.focus,
.faq-box .btn-link:focus {
    text-decoration: none
}

.faq-box .hrr {
    border-color: #c2dfff
}

.faq-box .footer-section .fa {
    margin-top: .5%;
    right: 4%
}

.faq-box .card-body {
    padding-top: 10px
}

.title-box {
    margin-top: 14%
}

.title-span1 {
    border-radius: 10px;
    background-color: #46c9fa;
    color: #fff;
    display: inline-block;
    padding: 9px 9px 11px;
    position: relative;
    line-height: 90%
}

.title-span2 {
    border-radius: 10px;
    background-color: #8a78f0;
    color: #fff;
    padding: 9px 9px 11px;
    position: relative;
    display: inline-block;
    line-height: 90%
}

.title-span3 {
    border-radius: 10px;
    background-color: #19c185;
    color: #fff;
    padding: 9px 9px 11px;
    position: relative;
    display: inline-block;
    line-height: 90%
}

.textconnection1 {
    position: absolute;
    bottom: 110%;
    right: -44%
}

.textconnection2 {
    position: absolute;
    top: 110%;
    right: -61%
}

.textele {
    position: absolute;
    top: -81%;
    left: 92%
}

.secure-box {
    margin-top: 4.5%
}

.secure-box-inn {
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 7px 38px 0 rgba(18, 80, 111, .1);
    height: 100%;
    padding: 9%
}

.secure-box h4 {
    margin-top: 7%
}

.secure-box p {}

.video-section {
    background-color: #fff;
    max-width: 97%;
    margin: auto
}

.video-section-main-box {
    background: url(../images/videoboxbg.png) no-repeat center top;
    background-size: cover;
    border-radius: 30px;
    padding: 6% 15px;
    text-align: center
}

.demo-video-box {
    background: url(../images/videobg.png) no-repeat center top;
    background-size: cover;
    border-radius: 30px;
    margin: auto;
    padding: 38px;
    margin-top: 2%
}

.cloning-box {
    border-radius: 30px;
    background-color: #fff;
    padding: 3% 2% 2%;
    margin-top: 4%;
    overflow: hidden
}

.cloning-img {
    width: 33%;
    cursor: pointer
}

.cloning-details {
    width: 57%;
    padding: 0 21px
}

.originalvoice-img {
    border-radius: 25px;
    width: 100%
}

.clonevoice-img {
    border-radius: 25px;
    position: relative;
    z-index: 1
}

.cloning-img-inn {
    position: relative
}

.clone-imgbg {
    position: absolute;
    bottom: 0;
    margin: auto;
    left: 0;
    z-index: 0;
    transition: .5s
}

.cloning-box-right:hover .clone-imgbg {
    rotate: -5deg;
    left: -13px;
    transform: rotateY(7deg);
    bottom: 9px
}

.original-name {
    font-family: avertastd-bold;
    font-size: 13px;
    border-width: 2px;
    border-color: #fff;
    border-style: solid;
    border-radius: 6px;
    background-color: #33b4f3;
    color: #fff;
    padding: 1px 12px;
    display: inline-block;
    position: relative;
    top: -11px
}

.cloning-name {
    font-family: avertastd-bold;
    font-size: 13px;
    border-width: 2px;
    border-color: #fff;
    border-style: solid;
    border-radius: 6px;
    background-color: #7870ff;
    color: #fff;
    padding: 1px 12px;
    display: inline-block;
    position: relative;
    top: -11px;
    z-index: 1
}

.original-voice-song {
    font-family: avertastd-bold;
    font-size: 17px
}

.original-voice-title,
.clone-voice-title {
    font-size: 14px;
    font-family: avertastd-regular;
    margin-top: 7px;
    margin-bottom: 32px
}

.original-voice-title span {
    border-radius: 10px;
    background-color: #ceeeff;
    display: inline-block;
    padding: 4px 16px
}

.clone-voice-title span {
    border-radius: 10px;
    background-color: #e3e1ff;
    display: inline-block;
    padding: 5px 17px
}

.cloning-box-right {
    position: relative
}

.cloning-box-right::before {
    content: url(../images/divider.png);
    position: absolute;
    top: -35px;
    left: 0
}

.pp-span {
    display: flow-root
}

.ppbutton {
    font-size: 50px;
    cursor: pointer;
    display: inline-block;
    margin: 0 0%;
    position: relative;
    background-color: #33b4f3;
    padding: 11px 0;
    color: #fff !important;
    border-radius: 50px;
    width: 36px;
    height: 36px;
    text-align: center;
    box-shadow: 0 0 0 10px rgb(51 180 243/17%);
    float: right
}

.cloning-box-right .ppbutton {
    background-color: #948ef7;
    box-shadow: 0 0 0 10px rgb(148 142 247/17%)
}

#bars-1,
#bars-2,
#bars-3,
#bars-4,
#bars-5,
#bars-6,
#bars-7,
#bars-8 {
    position: absolute;
    top: 50%;
    right: 35%;
    height: 14px;
    margin: -14px 40px 0 0
}

.bar-wave {
    position: absolute;
    bottom: 0;
    height: 3px;
    width: 1px;
    transform: translateY(50%)
}

.ppbutton.fa-play .bar-wave {
    animation: none;
    background: #b4b4b4
}

.ppbutton.fa-square .bar-wave {
    animation: sound 0ms -800ms linear infinite alternate;
    background: #33b4f3
}

.cloning-box-right .ppbutton.fa-play .bar-wave {
    animation: none;
    background: #b4b4b4
}

.cloning-box-right .ppbutton.fa-square .bar-wave {
    animation: sound 0ms -800ms linear infinite alternate;
    background: #948ef7
}

@keyframes sound {
    0% {
        opacity: .35;
        height: 3px
    }

    100% {
        opacity: 1;
        height: 28px
    }
}

.cloning-box-main .originalvoice-img {
    border: 3px solid #fff
}

.cloning-box-main.voice-active .originalvoice-img {
    border: 3px solid #33b4f3;
    transition: .5s
}

.cloning-box-main .clonevoice-img {
    border: 3px solid #fff
}

.cloning-box-main.voice-active .clonevoice-img {
    border: 3px solid #7870ff;
    transition: .5s
}

.cloning-box-main.voice-active .clone-imgbg {
    opacity: 0
}

.vscustom-check label {
    margin: 0
}

input[type=checkbox].myCustomCheckbox2 {
    display: none
}

.myCustomCheckbox2+.custom-checkbox2 {
    width: 50px;
    height: 50px;
    border: 1px solid #d4d4d4;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border-radius: 7px;
    background: #fff;
    margin-top: 0;
    margin-right: 0
}

.myCustomCheckbox2:checked+.custom-checkbox2::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 30px;
    border: solid #33b4f3;
    border-width: 0 4px 4px 0;
    transform: rotate(45deg);
    margin: auto;
    inset: -10px 0 0 0
}

.vsflexmy-cbox {
    align-items: center;
    gap: 15px;
    justify-content: center;
    padding-top: 15px
}

.containervoice {
    padding: 15px;
    height: auto;
    border-radius: 17px;
    box-shadow: 0 17px 22px 0 rgba(52, 43, 139, .27);
    background: #8a78ef;
    color: #fff;
    margin: 10px -30px
}

.containervoice {
    background-image: linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
    background-position: left top, right bottom, left bottom, right top;
    animation: border-dance 1s infinite linear
}

@keyframes border-dance {
    0% {
        background-position: left top, right bottom, left bottom, right top
    }

    100% {
        background-position: left 15px top, right 15px bottom, left bottom 15px, right top 15px
    }
}

.containervoice-inn {}

.floating-menu {
    background: #e7f1ff;
    padding: 10px;
    margin: 0;
    width: 100%;
    z-index: 100;
    position: fixed;
    bottom: 0;
    right: 0;
    text-align: center
}

.vscustom-check {
    width: 18%
}

.containervoice-row label {
    text-align: left;
    width: 74%
}

.strip_footer {
    background-color: #1e1f21;
    padding: 4% 0 2%
}

@media only screen and (max-width:1100px) {

    .bgicon4,
    .bgicon9 {
        display: none !important
    }
}

@media only screen and (max-width:1400px) {

    .bgicon2,
    .bgicon8 {
        display: none !important
    }
}

@media only screen and (max-width:1600px) {
    .bgicon1 {
        max-width: 3%
    }

    .bgicon2 {
        max-width: 3%
    }

    .bgicon3 {
        max-width: 4%
    }

    .bgicon4 {
        max-width: 4%
    }

    .bgicon5 {
        max-width: 5%
    }

    .bgicon6 {
        max-width: 3%
    }

    .bgicon7 {
        max-width: 3%
    }

    .bgicon8 {
        max-width: 4%
    }

    .bgicon9 {
        max-width: 4%
    }

    .bgicon10 {
        max-width: 5%
    }
}

@media only screen and (max-width:993px) {
    .banner {
        padding: 6% 0% 9%;
        margin-top: 0
    }

    .results li {
        height: 180px
    }

    a.navbar-brand {
        width: 90%
    }

    .slider {
        height: 130px
    }

    .text-box div {
        margin: 0 0 15px
    }

    img.img-fluid.d-block.salesline {
        bottom: -5px;
        right: 28%;
        max-width: 55%
    }

    .bannar-box {}

    .playIcon {
        max-width: 70%
    }

    .vid-box2 {
        height: 70px !important
    }

    .popup {
        margin: 3% 0 0 0
    }

    .star-icon i {
        font-size: 12px;
        margin: 0 0 5px 0
    }

    .dotShap1 {
        bottom: -5.3%;
        right: -3.3%;
        max-width: 14%
    }

    .play-vid2 {
        width: 70px;
        height: 70px
    }

    .video1 {
        margin: 6% 0 -20%
    }

    div#navbarSupportedContent {
        text-align: center
    }

    .arrow1 {
        top: -10%;
        left: 2%;
        max-width: 6%
    }

    .Arrowtext {
        top: -35%;
        left: 1%
    }

    .menu {
        padding: 0 0% 0
    }

    .clicktext {
        margin: -3px 0 0 6px
    }

    .v1 {
        max-width: 100%;
        margin: 0%
    }

    .v2 {
        max-width: 100%;
        margin: 0%
    }

    .audioPlayerai-playpause {
        width: 30px;
        height: 30px
    }

    .audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-playpause a {
        margin-left: 13px
    }

    .audioBox {
        width: 25%
    }

    .emotional-box-inner {
        padding: 8% 4% 10%
    }

    .audioBox {
        padding: 0 8px
    }

    .emotional-box-inner2 {
        padding: 8% 4% 10%
    }

    .audioPlayerai {
        padding: 0% 8% 10%
    }

    .audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-playpause a {
        margin-left: 12px
    }

    .songEmotion {
        top: 30%;
        left: 30%;
        font-size: 15px
    }

    .audioPlayerai-bar {
        margin: 40% 24px 0 -18px
    }

    .audioPlayerai-volume-button {
        width: 18px;
        height: 18px;
        padding: 5px 0 0 0
    }

    .planiconBox {
        margin-bottom: 5%
    }

    .mybutton-plan a {
        padding: 5% 28%
    }

    .mybutton-plan1 a {
        padding: 5% 28%
    }

    .mybutton-plan a {
        box-shadow: 0 12px 12px 0 rgb(60 57 90/25%)
    }

    .payment2 {
        max-width: 85%
    }

    .plan2 {
        margin: -30px 0
    }

    .footerlinks ul li {
        padding: 0 0%
    }

    .speechbox1 {
        padding: 0% 1%
    }

    .speechbox2 {
        padding: 0% 1%
    }

    a.nav-link {
        margin: 0
    }

    .btnn {
        margin: 0%
    }

    .star-box i {
        font-size: 12px
    }

    .emotionlePg {
        padding: 0 14%
    }

    .bgicon1 {
        max-width: 5%
    }

    .bgicon2 {
        max-width: 6%
    }

    .bgicon3 {
        max-width: 7.5%
    }

    .bgicon4 {
        max-width: 6%
    }

    .bgicon5 {
        max-width: 8%
    }

    .bgicon6 {
        max-width: 8%
    }

    .bgicon7 {
        max-width: 5%
    }

    .bgicon8 {
        max-width: 7.5%;
        display: none !important
    }

    .bgicon9 {
        max-width: 6%
    }

    .bgicon10 {
        max-width: 7%
    }

    .section2 {
        margin-top: 0%;
        padding: 0 0 5%;
        overflow: hidden
    }

    .b1:before {}

    .section2-box {
        margin: 0 6px
    }

    .dotShap {
        top: -5.5%;
        left: -1.5%;
        max-width: 22%
    }

    .dotShap1 {
        bottom: -5%;
        right: -3.3%;
        max-width: 13%
    }

    .humanvoice1-inn {
        padding: 10% 6%
    }

    .humanvoice2-inn {
        padding: 10% 6%
    }

    .dotShap2 {
        top: -3.5%;
        left: -5.5%;
        max-width: 26%
    }

    .dotShap3 {
        bottom: -3.5%;
        right: -6.5%;
        max-width: 26%
    }

    .arrow3 {
        max-width: 40%
    }

    .bottomtext {}

    .connection2 {
        position: relative;
        padding: 20% 0 0 0%;
        left: -3%
    }

    .connection3 {
        position: relative;
        padding: 20% 0 0 0%;
        right: -3%
    }

    .bottomtext {
        margin-top: -4%
    }

    [type=checkbox]:not(:checked)+label,
    [type=checkbox]:checked+label {
        padding-top: 2.6%
    }

    .section2-box .button {}

    .section2-box .play-icon {}

    .section2-box-text {
        padding: 0 5px;
        width: 20%
    }

    .arrowB {
        right: 28%
    }

    .arrowC {
        top: -93%;
        right: 12.5%
    }

    .portfolio-text {}

    .portfolio {
        width: 33%;
        padding: 0 12px 5%
    }

    .video-play-button:after {
        width: 50px;
        height: 50px;
        left: 46%;
        top: 46%
    }

    .video-play-button span {
        border-left: 12px solid #fff;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent
    }

    .arrow2 {
        top: 5%;
        right: -3.5%;
        max-width: 4%
    }

    .revoicerBg {
        padding: 4% 1%
    }

    .revoicerBg2 {
        padding: 4% 1%
    }

    .logoBox1 {
        padding: 15px 25px
    }

    .vdiconbox {}

    .videoBox1 {
        padding: 9% 0
    }

    .videoBox3 {
        padding: 12% 5% 4% 0%;
        margin-top: -1%
    }

    .videoText {
        padding: 0% 3%
    }

    .videoText2 {
        padding: 6% 3% 0%
    }

    .videoText3 {
        padding: 6% 3% 0%
    }

    .videoBox2 {
        margin: -5px 0 0 -1.5px
    }

    .videoDot1 {
        left: -3%;
        top: .5%
    }

    .videoDot2 {
        top: 14%;
        right: -2.8%
    }

    .videoDot3 {
        left: -3%;
        top: 14%
    }

    .videoDot4 {
        top: 14.5%;
        right: -2.8%
    }

    .videoDot5 {
        left: -3%;
        top: 14.5%
    }

    .videoDot6 {
        top: 18%;
        right: -2.8%
    }

    .videoDot7 {
        left: -3%;
        top: 15.5%
    }

    .videoDot11 {
        left: 97%;
        top: -74%
    }

    .videoDot8 {
        top: 15%;
        right: -2.8%
    }

    .videoDot9 {
        left: -3%;
        top: 16.5%
    }

    .videoDot10 {
        top: 13.5%;
        right: -2.8%
    }

    .sonudicon {
        margin: 10px 0 0 0%;
        padding-right: 5px
    }

    .musicbox a i {
        padding: 6px 7px;
        font-size: 8px
    }

    .musicbox {
        max-width: 92%
    }

    .expansion {
        padding: 14px 15px 54px
    }

    .usecase-text-block {
        line-height: 18px;
        margin-top: 70px
    }

    .usecase-1 .usecase-text-block {
        background-color: #67abff
    }

    .usecase-2 .usecase-text-block {
        background-color: #7673fe
    }

    .usecase-3 .usecase-text-block {
        background-color: #e9724d
    }

    .usecase-4 .usecase-text-block {
        background-color: #e1914a
    }

    .usecase-5 .usecase-text-block {
        background-color: #74bf4b
    }

    .usecase-6 .usecase-text-block {
        background-color: #ff5474
    }

    #bars,
    #bars2,
    #bars3,
    #bars4,
    #bars5,
    #bars6 {
        top: 50%;
        left: 30%;
        height: 12px;
        width: 60%
    }

    .planmainBox {
        padding: 0 0%
    }

    .planBox1 {
        padding: 12% 3% 6%;
        text-align: center
    }

    .planBox2 {
        padding: 14% 3% 6%;
        text-align: center
    }

    .checklist3 li {
        background: url(../imageswebp/checklist3.webp) no-repeat left 5px;
        padding-left: 24px;
        margin-left: 4%
    }

    .plan1 {
        padding: 0 10px
    }

    .plan2 {
        padding: 0 5px
    }

    .mostBg {
        margin-top: -18.5%;
        margin-bottom: 9%
    }

    .plantitle {
        margin: 0 0 0 -5px
    }

    .ele1 {
        right: -6%;
        top: -5%;
        max-width: 20%
    }

    .ele2 {
        bottom: -4%;
        left: 0%;
        max-width: 20%
    }

    .socialicon ul li i {
        font-size: 18px;
        margin: 0 12px 0 0
    }

    .sctioin9Bg {
        max-width: 100%
    }

    .audioPlayerai2 {
        padding: 5px
    }

    .Arrowtext2 {
        right: -2.5%;
        top: -1%
    }

    .usecase-block {
        margin-right: 5px;
        margin-left: 5px
    }

    .revoicerText {
        text-align: left
    }

    .section12 .play-vid,
    .section2B .play-vid {
        width: 60px;
        height: 60px;
        padding: 20px 17px 19px 26px
    }

    .padding0 {
        padding: 0 15px
    }

    .mybutton6 {
        text-align: center;
        margin-top: 3%
    }

    .mybutton6 a {
        padding: 2.2% 2%;
        width: 30%;
        left: 0
    }

    .swiper-container.swiper1Speech {
        padding: 3% 0 !important
    }

    .connection2 {
        left: -8%
    }

    .connection3 {
        right: -8%
    }

    .flagmain {
        padding: 0 18px
    }

    .flagmain-Pop {
        padding: 0 17px
    }

    .humanimg {
        max-width: 100%;
        margin-left: 0% !important
    }

    .humanimg2 {
        max-width: 100%;
        margin-left: 0% !important
    }

    .swiper1Speech::before {
        box-shadow: 0 0 10px 10px #fff
    }

    .swiper1Speech::after {
        box-shadow: 0 0 10px 10px #fff
    }

    .arrowLeft2,
    .arrowRight2 {
        max-width: 6%
    }

    .thankyou-section2-main-box {
        padding: 0
    }

    .thankyou-section3-main-box {
        padding: 0
    }

    .audioBox-inn {
        padding: 3% 0
    }

    .textconnection1 {
        max-width: 80%
    }

    .textconnection2 {
        max-width: 74%
    }

    .textele {
        max-width: 23%
    }

    .cloning-box-main {
        padding: 0 8px
    }

    #bars-1,
    #bars-2,
    #bars-3,
    #bars-4,
    #bars-5,
    #bars-6,
    #bars-7,
    #bars-8 {
        transform: scale(.9) translateX(10%)
    }

    .ppbutton {
        padding: 8px 0;
        width: 30px;
        height: 30px;
        box-shadow: 0 0 0 8px rgb(51 180 243/17%)
    }

    .secure-box {
        margin-top: 4.5%;
        padding: 0 7px !important
    }

    .section2-box-text svg {
        width: 25px;
        margin: -29px auto;
        transform: rotate(-50deg)
    }

    .section2-main-box {
        padding-right: 15px;
        position: relative;
        left: -5%
    }

    .containervoice {
        margin: 10px auto !important;
        width: 100%
    }

    .myCustomCheckbox2+.custom-checkbox2 {
        width: 40px;
        height: 40px
    }

    .vscustom-check {
        width: 22%
    }
}

@media only screen and (max-width:767px) {
    .video-title {
        display: block;
        margin-top: 5%;
        margin-bottom: -4%
    }

    .banner-title {
        padding: 7px 12px 5px
    }

    .video-box-main-out {
        padding: 0
    }

    .header {
        padding: 1.5% 5px 10px
    }

    .bannar-box {
        padding: 0 15px
    }

    a.navbar-brand {
        max-width: 78%
    }

    .text-box {
        width: 70%;
        text-align: left
    }

    .text-box div {
        display: block
    }

    .bannar-box {
        text-align: center
    }

    .section2-box {
        margin: 10px
    }

    .v1-out {
        padding: 0 3%;
        margin-top: 10%
    }

    .results li {
        height: 490px
    }

    button.scrollToTopBtn.showBtn {
        font-size: 30px;
        height: 45px;
        width: 45px
    }

    .Arrowtext2 {
        display: none !important
    }

    .banner {
        padding: 8% 0 10%;
        background-color: #fff;
        background-image: none
    }

    .ele1 {
        display: none
    }

    .ele2 {
        display: none
    }

    .mybutton1 a {
        margin: auto;
        padding: 3.5% 8% 3%
    }

    .payment {
        margin-bottom: 10%
    }

    .section2-box-text svg,
    .connection1,
    .connection2,
    .connection3,
    .arrowBanner {
        display: none !important
    }

    .Arrowtext {
        display: none !important
    }

    .arrow1 {
        display: none !important
    }

    .starbox.p-0 {
        margin: 0;
        display: inline-block
    }

    .section2 {
        padding: 0% 0 5%;
        margin-top: 0%
    }

    .section2-main-box {
        padding: 0;
        left: 0
    }

    .sctioin2Bg {
        padding: 6% 5%;
        max-width: 94%;
        margin-top: 5%;
        background-image: none;
        background-color: #e5f6ff
    }

    .b1:before {}

    .title2 {
        padding: 5.5px 30px 5px
    }

    .usecase-block {
        margin-right: 4px;
        margin-left: 9px
    }

    .arrow3 {
        display: none
    }

    .section2-box-text {
        padding: 2% 0;
        width: 100%
    }

    .section2-box-text p {
        transform: none;
        position: relative;
        text-align: center;
        margin: 0 0 3%
    }

    .section2-box .play-icon {}

    .section2-box-text p {
        line-height: 110%
    }

    .voiceicon-row {
        padding-top: 0%
    }

    .video1 {
        margin: 5% 0 0%
    }

    .btnn {
        margin: 0
    }

    .clicktext {
        margin: -3px 0 0 6px
    }

    a.nav-link {
        margin: 0
    }

    .emotionlePg {
        padding: 0%
    }

    .bgicon1 {
        display: none !important
    }

    .bgicon2 {
        display: none !important
    }

    .bgicon3 {
        display: none !important
    }

    .bgicon4 {
        display: none !important
    }

    .bgicon5 {
        display: none !important
    }

    .bgicon6 {
        display: none !important
    }

    .bgicon7 {
        display: none !important
    }

    .bgicon8 {
        display: none !important
    }

    .bgicon9 {
        display: none !important
    }

    .bgicon10 {
        display: none !important
    }

    .v1 {
        margin: auto;
        margin-bottom: 5%
    }

    .v2-out {
        padding: 0 3%;
        margin-bottom: 11%
    }

    .v2 {
        margin: auto
    }

    .results {
        display: block;
        width: calc(80% - 0rem)
    }

    .section4 {
        padding: 8% 0%
    }

    .section5 {
        padding: 8% 0;
        max-width: 95%;
        background-image: none;
        background-color: #eff6ff;
        margin-bottom: 10%
    }

    .speechimg {
        margin-top: 5%
    }

    .speechtext {
        margin-top: 5%
    }

    .speechbox1 {
        padding: 0% 3%;
        text-align: center;
        margin-top: 5%
    }

    .speechbox2 {
        padding: 0% 3%;
        text-align: center;
        margin-top: 5%
    }

    .mybutton2 a {
        padding: 16px 6%
    }

    .emotional-box-inner {
        padding: 8% 2% 10%
    }

    .songEmotion {
        top: 27%;
        left: 30%
    }

    .emotional-box {
        padding: 0 3%;
        margin-bottom: 3%;
        margin-top: 3%
    }

    .star-box {
        margin-top: 0%;
        margin-right: 8%
    }

    .star-box i {
        font-size: 16px
    }

    .audiotext {
        margin-top: 25%
    }

    .audioimg {
        margin-top: 0%
    }

    .dotShap {
        display: none !important
    }

    .dotShap1 {
        display: none !important
    }

    .dotShap2 {
        display: none !important
    }

    .dotShap3 {
        display: none !important
    }

    .humanvoice1 {
        max-width: 95%;
        margin: 0 0 5%;
        padding: 0%
    }

    .humanvoice2 {
        max-width: 95%;
        margin: 0 0 5%;
        padding: 0%
    }

    .voicebox ul .voicebg {
        padding: 8px 15px
    }

    .arrowA {
        display: none !important
    }

    .arrowB {
        display: none !important
    }

    .arrowC {
        display: none !important
    }

    .portfolio {
        margin-top: 5%;
        width: 50%;
        padding: 0 5px 0%
    }

    .port-row {
        margin-top: 0%
    }

    .portfolioimg {
        margin: 0
    }

    .flagRow {
        padding-top: 0%
    }

    .flagBox-out {
        padding: 8px 0
    }

    .flagBox {
        padding: 10px 15px;
        max-width: 100%;
        margin-bottom: 5%;
        text-align: left;
        border-radius: 10px
    }

    .voicetext {
        display: none
    }

    .arrow2 {
        display: none !important
    }

    .revoicerBg {
        padding: 8% 1%
    }

    .revoicerText {
        text-align: center;
        margin-top: 6%
    }

    .revoicerPg {
        margin-top: 3%
    }

    .revoicerText2 {
        text-align: center;
        margin-top: 6%
    }

    .extraSpace {
        padding-right: 15px;
        padding-left: 15px
    }

    .revoicerBg2 {
        padding: 8% 1%
    }

    .logoBox1 {
        margin: 0 5px
    }

    .videoDot1 {
        display: none !important
    }

    .videoDot2 {
        display: none !important
    }

    .videoDot3 {
        display: none !important
    }

    .videoDot4 {
        display: none !important
    }

    .videoDot5 {
        display: none !important
    }

    .videoDot6 {
        display: none !important
    }

    .videoDot7 {
        display: none !important
    }

    .videoDot8 {
        display: none !important
    }

    .videoDot9 {
        display: none !important
    }

    .videoDot10 {
        display: none !important
    }

    .videoDot11 {
        display: none !important
    }

    .videoBox1 {
        padding: 3% 0% 0;
        border: none
    }

    .videoText {
        padding: 6% 5%;
        text-align: center
    }

    .videoText2 {
        padding: 6% 5%;
        text-align: center
    }

    .videoText3 {
        padding: 6% 5%;
        text-align: center
    }

    .videoBox2 {
        margin: 0;
        padding: 0;
        border: none
    }

    .videoBox3 {
        padding: 0%;
        margin-top: 0%;
        border: none
    }

    .section7 {
        padding: 8% 0
    }

    .section8 {
        padding: 10% 3%;
        max-width: 94%;
        margin-top: 0
    }

    .section3 {
        margin-top: 12%;
        padding: 8% 0% 10%
    }

    .port {
        padding: 5px
    }

    .mybutton3 a {
        width: 45px;
        height: 45px
    }

    .mybutton3 a span {}

    .portfolio-text {
        padding: 15px 10px;
        text-align: center
    }

    .section8pg {
        margin-top: 6%
    }

    .titlebg {
        display: inline-block;
        margin: auto
    }

    .twoo {
        text-align: center;
        float: none
    }

    .section9 {
        padding: 10% 0 12%
    }

    .clone-section-box {
        padding: 10% 15px
    }

    .sctioin9Bg {
        max-width: 84%;
        text-align: center
    }

    .audioPlayerai2 {
        padding: 7px
    }

    .section11 {
        padding: 8% 0 10%
    }

    .planiconBox ul li {}

    .planicon {
        max-width: 90%
    }

    .plan1 {
        padding: 0 20px
    }

    .plan2 {
        margin: 10% 0 0;
        padding: 0 15px
    }

    .planBox1 {
        padding: 10%;
        text-align: center
    }

    .planBox2 {
        padding: 10% 2%;
        text-align: center
    }

    .mostBg {
        margin-top: -15%
    }

    .section15 {
        background-image: none;
        background-color: #050038;
        padding: 10% 0
    }

    .angelimg {
        margin: auto;
        margin-bottom: 3%
    }

    .testi-box {
        text-align: center
    }

    .CopyrightText {
        margin-top: 2%
    }

    .footerlinks {
        margin-top: 30%
    }

    .footerlinks ul {
        font-size: 12px
    }

    .footerbox {
        max-width: 33%;
        padding: 0 15px
    }

    .section14 {
        padding: 10% 0 6%;
        margin-top: 0%;
        background-color: #fff;
        background-image: none
    }

    .section13 {
        padding: 10% 2%;
        margin-top: 0%;
        background-color: #eff6ff;
        background-image: none
    }

    .moneybackBOx {
        padding: 5% 3%;
        background-size: cover;
        margin-bottom: 6%
    }

    .moneybackLogo {
        max-width: 40%
    }

    .section17 {
        background-color: #eaf7fe;
        background-image: none;
        padding: 10% 0
    }

    .expansion {
        width: 0
    }

    .expansion {
        padding: 5px 10px
    }

    .usecase-text-block {
        margin-top: 40px;
        font-size: 12px
    }

    .expand .expansion {
        width: 65%
    }

    #bars,
    #bars2,
    #bars3,
    #bars4,
    #bars5,
    #bars6 {
        top: 50%;
        left: -40%;
        height: 19px
    }

    .section16 {
        padding: 10% 0 5%
    }

    .section12 .swiper-pagination {
        bottom: 22% !important
    }

    .voicebox ul li {
        display: block;
        margin: 5px
    }

    .portfolio-inner {
        border-radius: 10px
    }

    .portimg {
        border-radius: 10px 10px 0 0
    }

    .mybutton5 {
        margin-top: 6%
    }

    .swiper-button-next {
        right: 0 !important
    }

    .swiper-button-prev {
        left: 0 !important
    }

    .audioPlayerai-bar {
        margin: 26% 24px 0 -18px
    }

    .mybutton5 a {
        padding: 4% 5%;
        width: 100%
    }

    .input-button {
        padding: 4.5% 5% 4%;
        width: 100%
    }

    .mybutton2 a {
        width: 80%
    }

    .section8 .scrolpopup {
        padding: 4% 0% 0%
    }

    .section9 .modal-body.bodypop,
    .section8 .modal-body.bodypop {
        padding: 0;
        border-radius: 5px !important
    }

    .modal-open #myModal2.modal .modal-body.bodypop {
        padding: 4% 0
    }

    .modal .close18 {
        top: 0;
        right: 0
    }

    #myModal3,
    #myModal,
    #myModal2 {
        padding-right: 0 !important
    }

    .about-banner-inn {
        border-radius: 10px;
        padding: 4.5% 0;
        text-align: center
    }

    .about-section2-box-inn {
        border-radius: 10px;
        padding: 8% 6% 9% !important
    }

    .about-section2-box h2 {
        margin-top: 3%
    }

    .about-img {
        margin-top: 6%;
        text-align: center
    }

    .blog-banner-inn {
        border-radius: 10px;
        text-align: center
    }

    .blog-box {
        padding: 11px 15px
    }

    .careers-banner-inn {
        border-radius: 10px;
        padding: 4.5% 0;
        text-align: center
    }

    .careers-section2 {
        text-align: center
    }

    .hiring {
        margin-top: 5%
    }

    .careers-section4-box-inn {
        padding: 5% 6%
    }

    .time-location-box p {
        margin: 4% 0
    }

    .timeIcon {
        left: 0
    }

    .locationIcon {
        margin-right: 3%;
        margin-left: 1%
    }

    .mybutton6 a {
        padding: 4.2% 2%;
        width: 55%
    }

    .contact-banner-inn {
        padding: 6% 0
    }

    .contact-box {
        margin-bottom: 0
    }

    .contact-section2-box {
        padding: 5% 3.5%
    }

    .contact-section2-box h2 {
        margin-top: 4%
    }

    .contact-section2-box p {
        margin-top: 2%
    }

    .contact-section2-box h6 {
        margin-top: 2%
    }

    .swiper2-button-next {
        right: 0 !important;
        left: auto !important
    }

    .swiper2-button-prev {
        right: 25px !important;
        left: auto !important
    }

    .swiper4-button-next {
        right: 6% !important
    }

    .swiper4-button-prev {
        left: 10% !important
    }

    .arrowLeft2,
    .arrowRight2,
    .thankyou-section3-box1,
    .line-img {
        display: none !important
    }

    .thankyou-section2-box,
    .thankyou-section3-box {
        padding: 10px 15px
    }

    .mybutton10 {
        margin-top: 6% !important
    }

    .thankyou-section3,
    .thankyou-section5 {
        text-align: center
    }

    .bonus-img {
        margin-top: 4%
    }

    .demo-video-box {
        border-radius: 20px
    }

    .mybutton4 a {
        padding: 12px 25px
    }

    .faq-box .footer-section {
        padding: 0
    }

    .plan2 {
        width: 32%
    }

    .cloning-box-main {
        padding: 0 8px
    }

    #bars-1,
    #bars-2,
    #bars-3,
    #bars-4,
    #bars-5,
    #bars-6,
    #bars-7,
    #bars-8 {
        transform: scale(.85) translateX(14%)
    }

    .ppbutton {
        padding: 8px 0;
        width: 30px;
        height: 30px;
        box-shadow: 0 0 0 8px rgb(51 180 243/17%)
    }

    .secure-box {
        margin-top: 4.5%;
        padding: 0 15px !important
    }

    .video-section-main-box {
        padding: 9% 15px 10%
    }

    .clone-section {
        padding: 0% 0% 12%
    }

    .textconnection1,
    .textconnection2,
    .textele {
        display: none
    }

    .title-span1,
    .title-span2,
    .title-span3 {
        border-radius: 5px
    }

    .section8Main-box {
        padding: 0
    }

    .section8 .emotional-text {
        margin-top: 8%
    }

    .cloning-box-right::before {
        display: none
    }
}

@media only screen and (max-width:575.98px) {
    .audioPlayerai-playpause {
        width: 25px;
        height: 25px
    }

    .audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-playpause a {
        margin-left: 11px;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 6px solid #fff
    }

    .audioPlayerai-bar>div {
        position: absolute;
        left: 5px;
        top: 10px
    }

    .audioPlayerai-bar::before {
        top: 10px
    }

    .speech-img {
        max-width: 20%
    }

    .star-img {
        max-width: 25%;
        margin-bottom: 5%
    }

    .audioBox-inn {
        padding: 0 8% 5% 0
    }

    .speechBox {
        padding: 0 8px
    }

    .songEmotion {
        top: 20%;
        left: 24%;
        font-size: 14px
    }

    .audioPlayerai {
        padding: 0% 4% 10% 5%
    }

    .audioBox {
        width: 50%
    }

    .audioBox-inn {
        padding: 0 0% 5% 0
    }

    .section7-box1,
    .section7-box2,
    .section7-box3,
    .section7-box4,
    .section7-box5,
    .section7-box6,
    .section7-box7 {
        padding: 13% 3% 5%
    }

    .section7-box1,
    .section7-box2 {
        margin-top: -10%
    }

    .section7-box1 {
        margin-bottom: 6%
    }

    .usecase-block {
        margin-right: 10px;
        margin-left: 10px
    }

    .section10 {
        padding: 10% 10px 6%
    }

    .slider1 .slider-row {
        background-size: 1700px 210px;
        height: 205px
    }

    .slider2 .slider-row {
        background-size: 1700px 210px;
        height: 205px
    }

    .flagmain {
        padding: 0 4px
    }

    .flagmain-Pop {
        padding: 0 5px
    }

    .section9 .scrolpopup {
        padding: 8% 4%
    }

    .flagBox {
        padding: 20px 15px;
        margin: 0
    }

    .flagBoxpop-inner {
        padding: 20px 15px
    }

    .crosspop {
        max-width: 70%
    }

    .swiper1Speech::before {
        box-shadow: 0 0 0 0 #fff
    }

    .swiper1Speech::after {
        box-shadow: 0 0 0 0 #fff
    }

    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next {}

    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev {}

    .moneybackBOx {
        padding: 12% 3%
    }

    .moneybackLogo {
        max-width: 15%
    }

    .audioPlayerai-bar {
        margin: 28% 24px 0 -18px
    }
}

@media(min-width:240px) {
    .slidText {
        font-size: 28px
    }

    .Arrowtext h3 {
        font-size: 21px
    }

    .arrow1 {
        max-width: 4%
    }

    .section2-box {
        width: 37%
    }

    .section2-box-text {
        width: 100%
    }

    .revoicerBg {
        padding: 8% 4% 10%
    }

    .revoicerBg2 {
        padding: 8% 4% 10%
    }

    .usecase-block {
        width: 170px
    }

    .usecase-block.expand {
        width: 525px
    }

    .usecase-target {
        width: 170px
    }

    .usecase-title {
        font-size: 14px;
        line-height: 123%;
        margin-left: 0
    }

    .usecase-text-block {
        font-size: 14px
    }

    #bars,
    #bars2,
    #bars3,
    #bars4,
    #bars5,
    #bars6 {
        margin: 0 0 48px 0;
        transform: scale(1.8) translateX(46%)
    }

    .connection1 {
        max-width: 100%
    }

    .connection2,
    .connection3 {
        max-width: 37%
    }

    .flagBoxpop {
        width: 100%
    }

    .section7-box1,
    .section7-box2,
    .section7-box3,
    .section7-box4,
    .section7-box5,
    .section7-box6 {
        width: 100%
    }

    .audioBox {
        width: 50%
    }

    .swiper-slide.speech {
        height: 535px
    }

    .about-section3-box-main {
        padding: 0
    }

    .about-section3-box:nth-child(1) {
        padding: 9% 7%
    }

    .about-section3-box:nth-child(2) {
        padding: 9% 7%
    }

    .about-section3-box:nth-child(3) {
        padding: 9% 7%
    }

    .about-section3-box:nth-child(4) {
        padding: 9% 7%
    }

    .about-section3-box:nth-child(5) {
        padding: 9% 7%
    }

    .about-section3-box:nth-child(6) {
        padding: 9% 7%
    }

    .careers-section4-box {
        padding: 1% 3%
    }

    .contact-section2-main-box {
        padding: 0
    }

    .recently-box {
        padding: 4% 5%
    }

    .demo-video-box {
        width: 100%;
        padding: 15px
    }

    .clone-box {
        width: 100%;
        margin-bottom: 0;
        padding: 10px 10px 0
    }

    .technology-title {
        margin-top: 12%
    }

    .clone-box-inn {
        border-radius: 26px
    }

    .faq-box {
        max-width: 94.3%;
        padding: 7% 4% 5%
    }

    .plan2 {
        width: 100%
    }

    .cloning-img {
        width: 33%
    }

    .cloning-details {
        width: 67%;
        padding: 0 8px 0 21px
    }

    #bars-1,
    #bars-2,
    #bars-3,
    #bars-4,
    #bars-5,
    #bars-6,
    #bars-7,
    #bars-8 {
        width: 180px
    }

    .cloning-box {
        width: 95%
    }

    .original-voice-title,
    .clone-voice-title {
        margin-bottom: 24px
    }

    .cloning-box-right:hover .clone-imgbg {
        rotate: -3deg;
        left: -9px;
        transform: rotateY(7deg);
        bottom: 7px
    }

    .secure-box {
        margin-top: 4.5%;
        padding: 0 15px
    }
}

@media(min-width:480px) {
    .mainvideo {
        position: static;
        width: 100%;
        height: 0;
        padding-bottom: 280px
    }

    .video {
        width: 485px;
        height: 273px;
        top: 23px;
        left: 28px;
        margin-bottom: 8%
    }

    .section2-box {}

    .section2-box-text {}

    .revoicerBg {
        padding: 4%
    }

    .revoicerBg2 {
        padding: 4%
    }

    .usecase-block {
        width: 170px
    }

    .usecase-block.expand {
        width: 525px
    }

    .usecase-target {
        width: 170px
    }

    .usecase-title {
        font-size: 20px;
        line-height: 123%
    }

    .usecase-text-block {
        font-size: 14px
    }

    #bars,
    #bars2,
    #bars3,
    #bars4,
    #bars5,
    #bars6 {
        margin: 0 0 64px 0;
        transform: scale(2) translateX(50%)
    }

    .connection1 {
        max-width: 100%
    }

    .connection2,
    .connection3 {
        max-width: 37%
    }
}

@media only screen and (min-width:768px) {
    .arrowBanner {
        max-width: 10%
    }

    .slidText {
        font-size: 29px
    }

    .videosection {
        position: relative;
        right: 0;
        bottom: 0
    }

    .mainvideo {
        position: absolute;
        width: 504px;
        height: 271px;
        top: 18px;
        left: 31px;
        padding-bottom: 0
    }

    .video {
        width: 315px;
        height: 117px;
        top: 15px;
        left: 7px;
        margin-bottom: 12%
    }

    .Arrowtext h3 {
        font-size: 14px
    }

    .arrow1 {
        max-width: 4%
    }

    .section12 .swiper-pagination {
        bottom: 23% !important
    }

    .section2-box {
        width: 19%
    }

    .section2-box-text {
        width: 16%
    }

    .revoicerBg {
        padding: 4%
    }

    .revoicerBg2 {
        padding: 4%
    }

    .section8Main-box {
        padding: 0 1.6%
    }

    .sctioin9Bg {
        max-width: 100%
    }

    .usecase-block {
        width: 170px
    }

    .usecase-block.expand {
        width: 525px
    }

    .usecase-target {
        width: 170px
    }

    .usecase-title {
        font-size: 15px;
        line-height: 123%;
        margin-left: 0%
    }

    .usecase-text-block {
        font-size: 14px
    }

    #bars,
    #bars2,
    #bars3,
    #bars4,
    #bars5,
    #bars6 {
        margin: 0 0 48px 0;
        transform: scale(2) translateX(-11%)
    }

    .connection1 {
        max-width: 50%
    }

    .connection2,
    .connection3 {
        max-width: 30%
    }

    .v1-out {
        padding: 0 1.7%
    }

    .v2-out {
        padding: 0 1.7%
    }

    .flagBoxpop {
        width: 50%
    }

    .section7-box1,
    .section7-box2,
    .section7-box3,
    .section7-box4,
    .section7-box5,
    .section7-box6 {
        width: 95%
    }

    .audioBox {
        width: 25%
    }

    .swiper-slide.speech {
        height: 475px
    }

    .audioPlayerai-playpause {
        width: 24px;
        height: 24px
    }

    .audioPlayerai {
        padding: 0 4% 6%
    }

    .audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-playpause a {
        margin-left: 10px
    }

    .songEmotion {
        top: 32%;
        left: 26%;
        font-size: 13px
    }

    .about-section3-box-main {
        padding: 0 5%
    }

    .about-section3-box:nth-child(1) {
        padding: 1% 6% 3% 4%
    }

    .about-section3-box:nth-child(2) {
        padding: 1% 4% 3% 6%
    }

    .about-section3-box:nth-child(3) {
        padding: 5% 6% 5% 4%
    }

    .about-section3-box:nth-child(4) {
        padding: 5% 4% 5% 6%
    }

    .about-section3-box:nth-child(5) {
        padding: 5% 6% 5% 4%
    }

    .about-section3-box:nth-child(6) {
        padding: 5% 4% 5% 6%
    }

    .careers-section4-box {
        padding: 1% 3%
    }

    .recently-box {
        padding: 4% 5%
    }

    .demo-video-box {
        width: 85%;
        padding: 25px
    }

    .clone-box {
        width: 47%;
        margin-bottom: -17.5%;
        padding: 20px 15px 0
    }

    .technology-title {
        margin-top: 24%
    }

    .clone-box-inn {
        border-radius: 26px
    }

    .faq-box {
        max-width: 94.3%;
        padding: 7% 4% 5%
    }

    .plan2 {
        width: 45%
    }

    .cloning-img {
        width: 33%
    }

    .cloning-details {
        width: 67%;
        padding: 0 16px
    }

    #bars-1,
    #bars-2,
    #bars-3,
    #bars-4,
    #bars-5,
    #bars-6,
    #bars-7,
    #bars-8 {
        width: 176px
    }

    .cloning-box {
        width: 100%
    }

    .clonevoice-img {
        border-radius: 16px
    }
}

@media only screen and (min-width:800px) {}

@media only screen and (min-width:860px) {}

@media only screen and (min-width:892px) {}

@media only screen and (min-width:992px) {
    .mycontainer3 {
        width: 960px
    }

    .slidText {
        font-size: 55px
    }

    .mainvideo {
        position: absolute;
        width: 543px;
        height: 292px;
        top: 18px;
        left: 33px
    }

    .video {
        width: 429px;
        height: 162px;
        top: 21px;
        left: 11px;
        margin-bottom: 10%
    }

    .Arrowtext h3 {
        font-size: 13px
    }

    .arrow1 {
        max-width: 4%
    }

    .videoText {
        padding: 0% 13% 0% 5%
    }

    .videoText2 {
        padding: 6% 5% 0% 13%
    }

    .videoText3 {
        padding: 6% 13% 0% 5%
    }

    .section12 .swiper-pagination {
        bottom: 18% !important
    }

    .section2-box {
        width: 13.5%
    }

    .section2-box-text {
        width: 24%
    }

    .revoicerBg {
        padding: 4% 2% 4% 4%
    }

    .revoicerBg2 {
        padding: 4% 4% 4% 2%
    }

    .section8Main-box {
        padding: 0
    }

    .sctioin9Bg {
        max-width: 86%
    }

    .slider {
        height: 230px
    }

    .usecase-block {
        width: 170px
    }

    .usecase-block.expand {
        width: 525px
    }

    .usecase-target {
        width: 170px
    }

    .usecase-title {
        font-size: 16px;
        line-height: 123%;
        margin-left: 0%
    }

    .usecase-text-block {
        font-size: 14px
    }

    #bars,
    #bars2,
    #bars3,
    #bars4,
    #bars5,
    #bars6 {
        margin: 0 0 48px 0;
        transform: scale(2) translateX(-10%)
    }

    .connection1 {
        max-width: 52%
    }

    .connection2,
    .connection3 {
        max-width: 28%
    }

    .portfolio {
        width: 32%
    }

    #myModal4 .modal-lg {
        max-width: 720px
    }

    #myModal2 .modal-lg {
        max-width: 85%
    }

    #myModal3 .modal-lg {
        max-width: 85%
    }

    #myModal .modal-lg {
        max-width: 85%
    }

    .flagBoxpop {
        width: 33%
    }

    .section7-box1,
    .section7-box2,
    .section7-box3,
    .section7-box4,
    .section7-box5,
    .section7-box6 {
        width: 95%
    }

    .audioBox {
        width: 25%
    }

    .swiper-slide.speech {
        height: 565px
    }

    .about-section3-box-main {
        padding: 0
    }

    .about-section3-box:nth-child(1) {
        padding: 1% 3% 3% 2%
    }

    .about-section3-box:nth-child(2) {
        padding: 1% 3% 3%
    }

    .about-section3-box:nth-child(3) {
        padding: 1% 2% 3% 3%
    }

    .about-section3-box:nth-child(4) {
        padding: 3% 3% 1% 2%
    }

    .about-section3-box:nth-child(5) {
        padding: 3% 3% 1%
    }

    .about-section3-box:nth-child(6) {
        padding: 3% 2% 1% 3%
    }

    .careers-section4-box {
        padding: 1% 0%
    }

    .recently-box {
        padding: 4% 5%
    }

    .flagmain {
        padding: 0
    }

    .flagmain-Pop {
        padding: 0
    }

    .clone-box {
        width: 47%;
        margin-bottom: -17.5%;
        padding: 20px 15px 0
    }

    .technology-title {
        margin-top: 24%
    }

    .clone-box-inn {
        border-radius: 26px
    }

    .faq-box {
        max-width: 95%;
        padding: 7% 4% 5%
    }

    .plan2 {
        width: 48%
    }

    .cloning-img {
        width: 33%
    }

    .cloning-details {
        width: 64%;
        padding: 0 21px
    }

    #bars-1,
    #bars-2,
    #bars-3,
    #bars-4,
    #bars-5,
    #bars-6,
    #bars-7,
    #bars-8 {
        width: 180px
    }

    .cloning-box {
        width: 100%
    }
}

@media only screen and (min-width:1000px) {
    .slidText {
        font-size: 35px
    }

    .slider {
        padding: 0 2% 0 0
    }

    .text-box {
        margin: 0 0 8px
    }

    .arrowC {
        top: -85%;
        right: 16.5%;
        max-width: 100%
    }

    .songEmotion {
        position: absolute;
        top: 31%;
        left: 22%;
        font-size: 15px
    }

    .audioPlayerai {
        padding: 0% 4% 10%
    }

    .audioPlayerai-playpause {
        width: 25px;
        height: 25px
    }

    .audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-playpause a {
        margin-left: 10px
    }

    .audioPlayerai-bar {
        margin: 35% 24px 0 -15px
    }

    .videoDot1 {
        left: -2.5%;
        top: 1.5%
    }

    .videoDot2 {
        top: 18.5%;
        right: -2.5%
    }

    .videoDot3 {
        left: -2.5%;
        top: 19%
    }

    .videoDot4 {
        top: 21%;
        right: -2.5%
    }

    .videoDot5 {
        left: -2.5%;
        top: 19.5%
    }

    .videoDot6 {
        top: 18%;
        right: -2.5%
    }

    .videoDot7 {
        left: -2.5%;
        top: 21.5%
    }

    .videoDot8 {
        top: 20%;
        right: -2.5%
    }

    .videoDot9 {
        left: -2.5%;
        top: 23.5%
    }

    .videoDot10 {
        top: 18.5%;
        right: -2.5%
    }

    .videoDot11 {
        left: 97.8%;
        top: -62%
    }

    .ele1 {
        right: -14%;
        top: -6%
    }

    .Arrowtext h3 {
        font-size: 15px
    }

    .arrow1 {
        max-width: 4%
    }

    .videoText {
        padding: 0% 0% 0% 5%
    }

    .videoText2 {
        padding: 6% 5% 0% 0%
    }

    .videoText3 {
        padding: 6% 0% 0% 5%
    }

    .section12 .swiper-pagination {
        bottom: 20% !important
    }

    .section2-box {
        width: 13.5%
    }

    .section2-box-text {
        width: 24%
    }

    .revoicerBg {
        padding: 4% 3% 4% 1%
    }

    .revoicerBg2 {
        padding: 4% 1% 4% 3%
    }

    .section8Main-box {
        padding: 0
    }

    .sctioin9Bg {
        max-width: 90%
    }

    .slider {
        height: 165px
    }

    .usecase-block {
        width: 170px
    }

    .usecase-block.expand {
        width: 525px
    }

    .usecase-target {
        width: 170px
    }

    .usecase-title {
        font-size: 16px;
        line-height: 123%;
        margin-left: 0%
    }

    .usecase-text-block {
        font-size: 14px
    }

    #bars,
    #bars2,
    #bars3,
    #bars4,
    #bars5,
    #bars6 {
        margin: 0 0 48px 0;
        transform: scale(2) translateX(4%)
    }

    .connection1 {
        max-width: 51%
    }

    .connection2,
    .connection3 {
        max-width: 28%
    }

    .portfolio {
        width: 27.8%
    }

    #myModal4 .modal-lg {
        max-width: 720px
    }

    #myModal2 .modal-lg {
        max-width: 85%
    }

    #myModal3 .modal-lg {
        max-width: 85%
    }

    #myModal .modal-lg {
        max-width: 85%
    }

    .about-section3-box:nth-child(1) {
        padding: 1% 3% 3% 2%
    }

    .about-section3-box:nth-child(2) {
        padding: 1% 3% 3%
    }

    .about-section3-box:nth-child(3) {
        padding: 1% 2% 3% 3%
    }

    .about-section3-box:nth-child(4) {
        padding: 3% 3% 1% 2%
    }

    .about-section3-box:nth-child(5) {
        padding: 3% 3% 1%
    }

    .about-section3-box:nth-child(6) {
        padding: 3% 2% 1% 3%
    }

    .careers-section4-box {
        padding: 1% 3%
    }

    .recently-box {
        padding: 4% 5%
    }

    .swiper-slide.speech {
        height: 595px
    }

    .flagmain {
        padding: 0
    }

    .flagmain-Pop {
        padding: 0
    }

    .demo-video-box {
        width: 80%;
        padding: 35px
    }

    .clone-box {
        width: 39%;
        margin-bottom: -17.5%;
        padding: 20px 20px 0
    }

    .technology-title {
        margin-top: 29%
    }

    .clone-box-inn {
        border-radius: 26px
    }
}

@media only screen and (min-width:1100px) {
    .arrowBanner {
        max-width: 12%
    }

    .mycontainer {
        width: 1000px
    }

    .mycontainer2 {
        width: 1050px
    }

    .mycontainer3 {
        width: 1050px
    }

    .slidText {
        font-size: 38px
    }

    .arrowC {
        top: -85%;
        right: 17.5%;
        max-width: 100%
    }

    .songEmotion {
        top: 29%;
        left: 25%;
        font-size: 14px
    }

    .audioPlayerai-playpause {
        width: 28px;
        height: 28px
    }

    .audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-playpause a {
        margin-left: 12px
    }

    .Arrowtext h3 {
        font-size: 15px
    }

    .videoText {
        padding: 0% 1% 0% 5%
    }

    .videoText2 {
        padding: 6% 5% 0% 1%
    }

    .videoText3 {
        padding: 6% 1% 0% 5%
    }

    .section2-box {
        width: 13.5%
    }

    .section2-box-text {
        width: 24%
    }

    .revoicerBg {
        padding: 4% 4% 4% 2%
    }

    .revoicerBg2 {
        padding: 4% 2% 4% 4%
    }

    .section8Main-box {
        padding: 0 2%
    }

    .sctioin9Bg {
        max-width: 90%
    }

    .slider {
        height: 160px
    }

    .usecase-block {
        width: 170px
    }

    .usecase-block.expand {
        width: 525px
    }

    .usecase-target {
        width: 170px
    }

    .usecase-title {
        font-size: 16px;
        line-height: 123%;
        margin-left: 0%
    }

    .usecase-text-block {
        font-size: 14px
    }

    #bars,
    #bars2,
    #bars3,
    #bars4,
    #bars5,
    #bars6 {
        margin: 0 0 48px 0;
        transform: scale(2) translateX(2%)
    }

    .connection1 {
        max-width: 51%
    }

    .connection2,
    .connection3 {
        max-width: 32%
    }

    .portfolio {
        width: 26.8%
    }

    .flagBoxpop {
        width: 33%
    }

    .section7-box1,
    .section7-box2,
    .section7-box3,
    .section7-box4,
    .section7-box5,
    .section7-box6 {
        width: 95%
    }

    .audioBox {
        width: 20%
    }

    .swiper-slide.speech {
        height: 505px
    }

    #myModal4 .modal-lg {
        max-width: 720px
    }

    #myModal2 .modal-lg {
        max-width: 80%
    }

    #myModal3 .modal-lg {
        max-width: 80%
    }

    #myModal .modal-lg {
        max-width: 80%
    }

    .about-section3-box:nth-child(1) {
        padding: 1% 4% 3% 3%
    }

    .about-section3-box:nth-child(2) {
        padding: 1% 3% 3%
    }

    .about-section3-box:nth-child(3) {
        padding: 1% 3% 3% 4%
    }

    .about-section3-box:nth-child(4) {
        padding: 3% 4% 1% 3%
    }

    .about-section3-box:nth-child(5) {
        padding: 3% 3% 1%
    }

    .about-section3-box:nth-child(6) {
        padding: 3% 3% 1% 4%
    }

    .careers-section4-box {
        padding: 1% 3%
    }

    .recently-box {
        padding: 4% 5%
    }

    .flagmain {
        padding: 0
    }

    .flagmain-Pop {
        padding: 0
    }

    .demo-video-box {
        width: 82%;
        padding: 30px
    }

    .clone-box {
        width: 45%;
        margin-bottom: -17.5%
    }

    .technology-title {
        margin-top: 25%
    }

    .clone-box-inn {
        border-radius: 26px
    }

    .faq-box {
        max-width: 100%;
        padding: 7% 6% 5%
    }

    .plan2 {
        width: 42%
    }

    .cloning-img {
        width: 33%
    }

    .cloning-details {
        width: 64%;
        padding: 0 21px
    }

    #bars-1,
    #bars-2,
    #bars-3,
    #bars-4,
    #bars-5,
    #bars-6,
    #bars-7,
    #bars-8 {
        width: 180px
    }

    .cloning-box {
        width: 100%
    }
}

@media only screen and (min-width:1200px) {
    .mycontainer {
        width: 1100px
    }

    .mycontainer2 {
        width: 1050px
    }

    .mycontainer3 {
        width: 1150px
    }

    .mainvideo {
        position: absolute;
        width: 441px;
        top: 20px;
        left: 80px
    }

    .video {
        width: 403px;
        height: 196px;
        top: 1px;
        left: 0;
        margin-bottom: 0
    }

    .mycontainer-left,
    .mycontainer-right {
        max-width: 1163px
    }

    .slidText {
        font-size: 42px
    }

    .slider {
        padding: 0 0% 0 0
    }

    .text-box {
        margin: 0 0 7px
    }

    .arrowC {
        top: -72%;
        right: 14.5%;
        max-width: 100%
    }

    .songEmotion {
        top: 31%;
        left: 24%;
        font-size: 15px
    }

    .audioPlayerai-playpause {
        width: 28px;
        height: 28px
    }

    .audioPlayerai {
        padding: 0% 4% 10%
    }

    .audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-playpause a {
        margin-left: 12px
    }

    .audioPlayerai-bar {
        margin: 40% 24px 0 -15px
    }

    .videoDot1 {
        left: -2.5%;
        top: 1.5%
    }

    .videoDot2 {
        top: 18.5%;
        right: -2.5%
    }

    .videoDot3 {
        left: -2.5%;
        top: 19%
    }

    .videoDot4 {
        top: 20%;
        right: -2.5%
    }

    .videoDot5 {
        left: -2.5%;
        top: 20%
    }

    .videoDot6 {
        top: 22%;
        right: -2.5%
    }

    .videoDot7 {
        left: -2.5%;
        top: 22.5%
    }

    .videoDot8 {
        top: 20%;
        right: -2.5%
    }

    .videoDot9 {
        left: -2.5%;
        top: 21.5%
    }

    .videoDot10 {
        top: 19.5%;
        right: -2.5%
    }

    .videoDot11 {
        left: 98.2%;
        top: -50%
    }

    .Arrowtext h3 {
        font-size: 14px
    }

    .arrow1 {
        max-width: 4%
    }

    .videoText {
        padding: 0% 0% 0% 3%
    }

    .videoText2 {
        padding: 6% 3% 0% 0%
    }

    .videoText3 {
        padding: 6% 0% 0% 3%
    }

    .section2-box {
        width: 13.5%
    }

    .section2-box-text {
        width: 24%
    }

    .revoicerBg {
        padding: 4%
    }

    .revoicerBg2 {
        padding: 4%
    }

    .section8Main-box {
        padding: 0 2%
    }

    .sctioin9Bg {
        max-width: 90%
    }

    .slider {
        height: 180px
    }

    .usecase-block {
        width: 170px
    }

    .usecase-block.expand {
        width: 525px
    }

    .usecase-target {
        width: 170px
    }

    .usecase-title {
        font-size: 16px;
        line-height: 123%;
        margin-left: 0%
    }

    .usecase-text-block {
        font-size: 14px
    }

    #bars,
    #bars2,
    #bars3,
    #bars4,
    #bars5,
    #bars6 {
        margin: 0 0 48px 0;
        transform: scale(2) translateX(2%)
    }

    .connection1 {
        max-width: 52%
    }

    .connection2,
    .connection3 {
        max-width: 22%
    }

    .portfolio {
        width: 23.8%
    }

    .flagBoxpop {
        width: 33%
    }

    .section7-box1,
    .section7-box2,
    .section7-box3,
    .section7-box4,
    .section7-box5,
    .section7-box6 {
        width: 95%
    }

    .audioBox {
        width: 20%
    }

    .swiper-slide.speech {
        height: 565px
    }

    #myModal4 .modal-lg {
        max-width: 720px
    }

    #myModal2 .modal-lg {
        max-width: 70.3%
    }

    #myModal3 .modal-lg {
        max-width: 70.3%
    }

    #myModal .modal-lg {
        max-width: 70.3%
    }

    .about-section3-box:nth-child(1) {
        padding: 1% 4% 3% 3%
    }

    .about-section3-box:nth-child(2) {
        padding: 1% 3% 3%
    }

    .about-section3-box:nth-child(3) {
        padding: 1% 3% 3% 4%
    }

    .about-section3-box:nth-child(4) {
        padding: 3% 4% 1% 3%
    }

    .about-section3-box:nth-child(5) {
        padding: 3% 3% 1%
    }

    .about-section3-box:nth-child(6) {
        padding: 3% 3% 1% 4%
    }

    .careers-section4-box {
        padding: 1% 3%
    }

    .recently-box {
        padding: 4% 5%
    }

    .flagmain {
        padding: 0 3px
    }

    .flagmain-Pop {
        padding: 0
    }

    .demo-video-box {
        width: 80%;
        padding: 35px
    }

    .clone-box {
        width: 45%;
        margin-bottom: -17.5%
    }

    .technology-title {
        margin-top: 22%
    }

    .clone-box-inn {
        border-radius: 26px
    }

    .faq-box {
        max-width: 94.3%;
        padding: 7% 8% 5%
    }

    .plan2 {
        width: 42%
    }

    .cloning-img {
        width: 33%
    }

    .cloning-details {
        width: 57%;
        padding: 0 21px
    }

    #bars-1,
    #bars-2,
    #bars-3,
    #bars-4,
    #bars-5,
    #bars-6,
    #bars-7,
    #bars-8 {
        width: 180px
    }

    .cloning-box {
        width: 96%
    }
}

@media(min-width:1300px) {
    .arrowBanner {
        max-width: 11%
    }

    .mycontainer {
        width: 1120px
    }

    .mycontainer2 {
        width: 1180px
    }

    .mycontainer3 {
        width: 1240px
    }

    .mycontainer-left,
    .mycontainer-right {
        max-width: 1250px
    }

    .mainvideo {
        position: absolute;
        width: 441px;
        top: 20px;
        left: 80px
    }

    .slidText {
        font-size: 44px
    }

    .slider {
        padding: 0 2% 0 0
    }

    .text-box {
        margin: 0 0 6px
    }

    .arrowC {
        top: -72%;
        right: 22.5%;
        max-width: 100%
    }

    .songEmotion {
        top: 30%;
        left: 25%;
        font-size: 14px
    }

    .audioPlayerai-playpause {
        width: 26px;
        height: 26px
    }

    .audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-playpause a {
        margin-left: 11px
    }

    .videoDot1 {
        left: -1.8%;
        top: 2%;
        z-index: 1
    }

    .videoDot2 {
        top: 20%;
        right: -1.8%
    }

    .videoDot3 {
        left: -1.8%;
        top: 20%;
        z-index: 1
    }

    .videoDot4 {
        top: 20%;
        right: -1.8%
    }

    .videoDot5 {
        left: -1.8%;
        top: 20%;
        z-index: 1
    }

    .videoDot6 {
        top: 25%;
        right: -1.8%
    }

    .videoDot7 {
        left: -1.8%;
        top: 21.5%;
        z-index: 1
    }

    .videoDot8 {
        top: 21.5%;
        right: -1.8%
    }

    .videoDot9 {
        left: -1.8%;
        top: 23%;
        z-index: 1
    }

    .videoDot10 {
        top: 19%;
        right: -1.8%
    }

    .videoDot11 {
        left: 98.4%;
        top: -47%;
        z-index: 1
    }

    .ele1 {
        right: -14%;
        top: -6%
    }

    .Arrowtext h3 {
        font-size: 18px
    }

    .arrow1 {
        max-width: 4%
    }

    .videoText {
        padding: 0% 6% 0% 5%
    }

    .videoText2 {
        padding: 6% 5% 0% 6%
    }

    .videoText3 {
        padding: 6% 6% 0% 5%
    }

    .section12 .swiper-pagination {
        bottom: 18% !important
    }

    .section2-box {
        width: 11%
    }

    .section2-box-text {
        width: 17%
    }

    .revoicerBg {
        padding: 4% 4% 4% 2%
    }

    .revoicerBg2 {
        padding: 4% 2% 4% 4%
    }

    .section8Main-box {
        padding: 0 2%
    }

    .sctioin9Bg {
        max-width: 94%
    }

    .usecase-block {
        width: 170px
    }

    .usecase-block.expand {
        width: 525px
    }

    .usecase-target {
        width: 170px
    }

    .usecase-title {
        font-size: 17px;
        line-height: 123%;
        margin-left: 0%
    }

    .usecase-text-block {
        font-size: 14px
    }

    #bars,
    #bars2,
    #bars3,
    #bars4,
    #bars5,
    #bars6 {
        margin: 0 0 48px 0;
        transform: scale(2) translateX(2%)
    }

    .connection1 {
        max-width: 51%
    }

    .connection2,
    .connection3 {
        max-width: 30%
    }

    .portfolio {
        width: 21.8%
    }

    .flagBoxpop {
        width: 33%
    }

    .section7-box1,
    .section7-box2,
    .section7-box3,
    .section7-box4,
    .section7-box5,
    .section7-box6 {
        width: 95%
    }

    .swiper-slide.speech {
        height: 615px
    }

    .audioBox {
        width: 33%
    }

    #myModal4 .modal-lg {
        max-width: 720px
    }

    #myModal2 .modal-lg {
        max-width: 70.3%
    }

    #myModal3 .modal-lg {
        max-width: 70.3%
    }

    #myModal .modal-lg {
        max-width: 70.3%
    }

    .recently-box {
        padding: 4% 5%
    }

    .flagmain {
        padding: 0 4px
    }

    .flagmain-Pop {
        padding: 0
    }

    .demo-video-box {
        width: 74%;
        padding: 38px
    }

    .clone-box {
        width: 43%;
        margin-bottom: -17.5%
    }

    .technology-title {
        margin-top: 23%
    }

    .clone-box-inn {
        border-radius: 26px
    }

    .faq-box {
        max-width: 94.3%;
        padding: 7% 8% 5%
    }

    .plan2 {
        width: 37%
    }
}

@media(min-width:1400px) {
    .arrowBanner {
        max-width: 100%
    }

    .mycontainer {
        width: 1160px
    }

    .mycontainer2 {
        width: 1219px
    }

    .mycontainer3 {
        width: 1360px
    }

    .slidText {
        font-size: 48px
    }

    .mycontainer-left,
    .mycontainer-right {
        max-width: 1298px
    }

    .mainvideo {
        position: absolute;
        width: 441px;
        top: 20px;
        left: 90px
    }

    .slider {
        padding: 0 0% 0 0
    }

    .text-box {
        margin: 0 0 2px
    }

    .arrowC {
        top: -72%;
        right: 23.5%;
        max-width: 100%
    }

    .songEmotion {
        top: 31%;
        left: 24%;
        font-size: 15px
    }

    .ele1 {
        right: -12%;
        top: -6%
    }

    .Arrowtext h3 {
        font-size: 18px
    }

    .arrow1 {
        max-width: 4%
    }

    .videoText {
        padding: 0% 13% 0% 5%
    }

    .videoText2 {
        padding: 6% 5% 0% 13%
    }

    .videoText3 {
        padding: 6% 13% 0% 5%
    }

    .section2-box {
        width: 13%
    }

    .section2-box-text {
        width: 16%
    }

    .revoicerBg {
        padding: 4%
    }

    .revoicerBg2 {
        padding: 4%
    }

    .section8Main-box {
        padding: 0 2%
    }

    .sctioin9Bg {
        max-width: 99%
    }

    .typewrite {
        color: #37beff
    }

    .typewrite .wrap {
        color: #37beff
    }

    .usecase-block {
        width: 185px
    }

    .usecase-block.expand {
        width: 525px
    }

    .usecase-target {
        width: 185px
    }

    .usecase-title {
        font-size: 17px;
        line-height: 123%;
        margin-left: 0%
    }

    .usecase-text-block {
        font-size: 14px
    }

    #bars,
    #bars2,
    #bars3,
    #bars4,
    #bars5,
    #bars6 {
        margin: 0 0 48px 0;
        transform: scale(2) translateX(0%)
    }

    .connection1 {
        max-width: 51%
    }

    .connection2,
    .connection3 {
        max-width: 30%
    }

    .portfolio {
        width: 19.8%
    }

    .flagBoxpop {
        width: 33%
    }

    .section7-box1,
    .section7-box2,
    .section7-box3,
    .section7-box4,
    .section7-box5,
    .section7-box6 {
        width: 95%
    }

    .swiper-slide.speech {
        height: 645px
    }

    .audioBox {
        width: 33%
    }

    #myModal4 .modal-lg {
        max-width: 720px
    }

    #myModal2 .modal-lg {
        max-width: 70.3%
    }

    #myModal3 .modal-lg {
        max-width: 70.3%
    }

    #myModal .modal-lg {
        max-width: 70.3%
    }

    .contact-section2-main-box {
        padding: 0 2%
    }

    .recently-box {
        padding: 4% 5%
    }

    .flagmain {
        padding: 0 6px
    }

    .flagmain-Pop {
        padding: 0
    }

    .audioPlayerai-playpause {
        width: 26px;
        height: 26px
    }

    .audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-playpause a {
        margin-left: 10px
    }

    .demo-video-box {
        width: 70%
    }

    .clone-box {
        width: 39%;
        margin-bottom: -17.5%
    }

    .technology-title {
        margin-top: 26%
    }

    .clone-box-inn {
        border-radius: 26px
    }

    .faq-box {
        max-width: 94.3%;
        padding: 7% 8% 5%
    }
}

@media(min-width:1500px) {
    .mycontainer {
        width: 1310px
    }

    .mycontainer2 {
        width: 1219px
    }

    .mycontainer3 {
        width: 1464px
    }

    .mycontainer-left,
    .mycontainer-right {
        max-width: 1363px
    }

    .arrowBanner {
        max-width: 100%
    }

    .slidText {
        font-size: 50px
    }

    .slider {
        padding: 0 0% 0 0
    }

    .songEmotion {
        top: 29%;
        left: 22%;
        font-size: 14px
    }

    .audioPlayerai-playpause {
        width: 20px;
        height: 20px
    }

    .audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-playpause a {
        margin-left: 8px
    }

    .Arrowtext h3 {
        font-size: 21px
    }

    .arrow1 {
        max-width: 4%
    }

    .videoText {
        padding: 0% 13% 0% 5%
    }

    .videoText2 {
        padding: 6% 5% 0% 13%
    }

    .videoText3 {
        padding: 6% 13% 0% 5%
    }

    .section2-box {
        width: 13%
    }

    .section2-box-text {
        width: 16%
    }

    .revoicerBg {
        padding: 4% 4% 4% 7%
    }

    .revoicerBg2 {
        padding: 4% 7% 4% 4%
    }

    .section8Main-box {
        padding: 0 2%
    }

    .sctioin9Bg {
        max-width: 86%
    }

    .usecase-block {
        width: 185px
    }

    .usecase-block.expand {
        width: 525px
    }

    .usecase-target {
        width: 185px
    }

    .usecase-title {
        font-size: 17px;
        line-height: 123%;
        margin-left: 0%
    }

    .usecase-text-block {
        font-size: 14px
    }

    #bars,
    #bars2,
    #bars3,
    #bars4,
    #bars5,
    #bars6 {
        margin: 0 0 48px 0;
        transform: scale(2) translateX(0%)
    }

    .connection1 {
        max-width: 51%
    }

    .connection2,
    .connection3 {
        max-width: 30%
    }

    .portfolio {
        width: 18.8%
    }

    .flagBoxpop {
        width: 33%
    }

    .section7-box1,
    .section7-box2,
    .section7-box3,
    .section7-box4,
    .section7-box5,
    .section7-box6 {
        width: 95%
    }

    .audioBox {
        width: 25%
    }

    .swiper-slide.speech {
        height: 515px
    }

    .about-section3-box-main {
        padding: 0 4.6%
    }

    .contact-section2-main-box {
        padding: 0 4%
    }

    .recently-box {
        padding: 4% 5%
    }

    .flagmain {
        padding: 0 6px
    }

    .flagmain-Pop {
        padding: 0 4px
    }

    .audioPlayerai-bar {
        margin: 40% 24px 0 -15px
    }

    .demo-video-box {
        width: 65%
    }

    .clone-box {
        width: 39%;
        margin-bottom: -17.5%
    }

    .technology-title {
        margin-top: 29%
    }

    .clone-box-inn {
        border-radius: 26px
    }

    .faq-box {
        max-width: 94.3%;
        padding: 7% 8% 5%
    }
}

@media(min-width:1600px) {
    .mycontainer {
        width: 1310px
    }

    .mycontainer3 {
        width: 1464px
    }

    .slidText {
        font-size: 50px
    }

    .slider {
        padding: 0 0% 0 0
    }

    .arrowC {
        top: -72%;
        right: 23.5%;
        max-width: 100%
    }

    .songEmotion {
        top: 29%;
        left: 22%;
        font-size: 14px
    }

    .audioPlayerai-playpause {
        width: 20px;
        height: 20px
    }

    .audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-playpause a {
        margin-left: 8px
    }

    .text-box {
        margin: 0 0 2px
    }

    .ele1 {
        right: -14%;
        top: -6%
    }

    .Arrowtext h3 {
        font-size: 21px
    }

    .arrow1 {
        max-width: 4%
    }

    .videoText {
        padding: 0% 13% 0% 5%
    }

    .videoText2 {
        padding: 6% 5% 0% 13%
    }

    .videoText3 {
        padding: 6% 13% 0% 5%
    }

    .section2-box {
        width: 13%
    }

    .section2-box-text {
        width: 16%
    }

    .revoicerBg {
        padding: 4% 4% 4% 7%
    }

    .revoicerBg2 {
        padding: 4% 7% 4% 4%
    }

    .section8Main-box {
        padding: 0 2%
    }

    .sctioin9Bg {
        max-width: 88%
    }

    .usecase-block {
        width: 185px
    }

    .usecase-block.expand {
        width: 525px
    }

    .usecase-target {
        width: 185px
    }

    .usecase-title {
        font-size: 17px;
        line-height: 123%
    }

    .usecase-text-block {
        font-size: 14px
    }

    #bars,
    #bars2,
    #bars3,
    #bars4,
    #bars5,
    #bars6 {
        margin: 0 0 48px 0;
        transform: scale(2) translateX(-2%)
    }

    .connection1 {
        max-width: 51%
    }

    .connection2,
    .connection3 {
        max-width: 30%
    }

    .portfolio {
        width: 17.8%
    }

    .flagBoxpop {
        width: 33%
    }

    .section7-box1,
    .section7-box2,
    .section7-box3,
    .section7-box4,
    .section7-box5,
    .section7-box6 {
        width: 95%
    }

    .swiper-slide.speech {
        height: 525px
    }

    .recently-box {
        padding: 4% 5%
    }

    .flagmain {
        padding: 0 7px
    }

    .flagmain-Pop {
        padding: 0 5px
    }

    .demo-video-box {
        width: 63%
    }

    .clone-box {
        width: 39%;
        margin-bottom: -17.5%
    }

    .technology-title {
        margin-top: 29%
    }

    .clone-box-inn {
        border-radius: 26px
    }

    .faq-box {
        max-width: 94.3%;
        padding: 7% 8% 5%
    }
}

@media(min-width:1700px) {
    .mycontainer {
        width: 1380px
    }

    .mycontainer3 {
        width: 1464px
    }

    .slidText {
        font-size: 55px
    }

    .slider {
        padding: 0 2% 0 0
    }

    .arrowC {
        top: -72%;
        right: 23.5%;
        max-width: 100%
    }

    .songEmotion {
        top: 31%;
        left: 24%;
        font-size: 14px
    }

    .videoDot1 {
        left: -1.8%;
        top: 2%;
        z-index: 1
    }

    .videoDot2 {
        top: 20%;
        right: -1.8%
    }

    .videoDot3 {
        left: -1.8%;
        top: 20%;
        z-index: 1
    }

    .videoDot4 {
        top: 20%;
        right: -1.8%
    }

    .videoDot5 {
        left: -1.8%;
        top: 20%;
        z-index: 1
    }

    .videoDot6 {
        top: 25%;
        right: -1.8%
    }

    .videoDot7 {
        left: -1.8%;
        top: 21.5%;
        z-index: 1
    }

    .videoDot8 {
        top: 21.5%;
        right: -1.8%
    }

    .videoDot9 {
        left: -1.8%;
        top: 23%;
        z-index: 1
    }

    .videoDot10 {
        top: 19%;
        right: -1.8%
    }

    .videoDot11 {
        left: 101%;
        top: -47%;
        z-index: 1
    }

    .ele1 {
        right: -14%;
        top: -6%
    }

    .Arrowtext h3 {
        font-size: 22px
    }

    .arrow1 {
        max-width: 4%
    }

    .videoText {
        padding: 0% 13% 0% 5%
    }

    .videoText2 {
        padding: 6% 5% 0% 13%
    }

    .videoText3 {
        padding: 6% 13% 0% 5%
    }

    .section2-box {
        width: 13%
    }

    .section2-box-text {
        width: 16%
    }

    .revoicerBg {
        padding: 4% 4% 4% 7%
    }

    .revoicerBg2 {
        padding: 4% 7% 4% 4%
    }

    .section8Main-box {
        padding: 0 2%
    }

    .sctioin9Bg {
        max-width: 86%
    }

    .usecase-block {
        width: 210px
    }

    .usecase-block.expand {
        width: 525px
    }

    .usecase-target {
        width: 200px
    }

    .usecase-title {
        font-size: 20px;
        line-height: 123%;
        margin-left: 4%
    }

    .usecase-text-block {
        font-size: 14px
    }

    #bars,
    #bars2,
    #bars3,
    #bars4,
    #bars5,
    #bars6 {
        margin: 0 0 48px 0;
        transform: scale(2) translateX(-5%)
    }

    .connection1 {
        max-width: 51%
    }

    .connection2,
    .connection3 {
        max-width: 30%
    }

    .portfolio {
        width: 16.8%
    }

    .flagBoxpop {
        width: 33%
    }

    .section7-box1,
    .section7-box2,
    .section7-box3,
    .section7-box4,
    .section7-box5,
    .section7-box6 {
        width: 95%
    }

    .audioBox {
        width: 25%
    }

    .swiper-slide.speech {
        height: 555px
    }

    .contact-section2-main-box {
        padding: 0 7%
    }

    .recently-box {
        padding: 4% 5%
    }

    .flagmain {
        padding: 0 8px
    }

    .flagmain-Pop {
        padding: 0 6px
    }

    .audioPlayerai-playpause {
        width: 22px;
        height: 22px
    }

    .audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-playpause a {
        margin-left: 9px
    }

    .demo-video-box {
        width: 59%
    }

    .clone-box {
        width: 39%;
        margin-bottom: -17.5%
    }

    .technology-title {
        margin-top: 29%
    }

    .clone-box-inn {
        border-radius: 26px
    }

    .faq-box {
        max-width: 94.3%;
        padding: 7% 8% 5%
    }
}

@media(min-width:1800px) {
    .mycontainer {
        width: 1470px
    }

    .mycontainer3 {
        width: 1464px
    }

    .slidText {
        font-size: 55px
    }

    .slider {
        padding: 0 2% 0 0
    }

    .arrowC {
        top: -72%;
        right: 23.5%;
        max-width: 100%
    }

    .songEmotion {
        top: 31%;
        left: 24%;
        font-size: 14px
    }

    .text-box {
        margin: 0 0 2px
    }

    .videoDot1 {
        left: -1.8%;
        top: 2%;
        z-index: 1
    }

    .videoDot2 {
        top: 20%;
        right: -1.8%
    }

    .videoDot3 {
        left: -1.8%;
        top: 20%;
        z-index: 1
    }

    .videoDot4 {
        top: 20%;
        right: -1.8%
    }

    .videoDot5 {
        left: -1.8%;
        top: 20%;
        z-index: 1
    }

    .videoDot6 {
        top: 25%;
        right: -1.8%
    }

    .videoDot7 {
        left: -1.8%;
        top: 21.5%;
        z-index: 1
    }

    .videoDot8 {
        top: 21.5%;
        right: -1.8%
    }

    .videoDot9 {
        left: -1.8%;
        top: 23%;
        z-index: 1
    }

    .videoDot10 {
        top: 19%;
        right: -1.8%
    }

    .videoDot11 {
        left: 102%;
        top: -47%;
        z-index: 1
    }

    .ele1 {
        right: -14%;
        top: -6%
    }

    .Arrowtext h3 {
        font-size: 24px
    }

    .arrow1 {
        max-width: 100%
    }

    .videoText {
        padding: 0% 13% 0% 5%
    }

    .videoText2 {
        padding: 6% 5% 0% 13%
    }

    .videoText3 {
        padding: 6% 13% 0% 5%
    }

    .section2-box {
        width: 13%
    }

    .section2-box-text {
        width: 16%
    }

    .revoicerBg {
        padding: 4% 4% 4% 7%
    }

    .revoicerBg2 {
        padding: 4% 7% 4% 4%
    }

    .section8Main-box {
        padding: 0 2%
    }

    .sctioin9Bg {
        max-width: 86%
    }

    .usecase-block {
        width: 210px
    }

    .usecase-block.expand {
        width: 525px
    }

    .usecase-target {
        width: 200px
    }

    .usecase-title {
        font-size: 20px;
        line-height: 123%
    }

    .usecase-text-block {
        font-size: 14px
    }

    #bars,
    #bars2,
    #bars3,
    #bars4,
    #bars5,
    #bars6 {
        margin: 0 0 48px 0;
        transform: scale(2) translateX(-5%)
    }

    .connection1 {
        max-width: 51%
    }

    .connection2,
    .connection3 {
        max-width: 32%
    }

    .portfolio {
        width: 16.8%
    }

    .flagBoxpop {
        width: 33%
    }

    .section7-box1,
    .section7-box2,
    .section7-box3,
    .section7-box4,
    .section7-box5,
    .section7-box6 {
        width: 95%
    }

    .audioBox {
        width: 25%
    }

    .swiper-slide.speech {
        height: 585px
    }

    .flagmain {
        padding: 0 10px
    }

    .flagmain-Pop {
        padding: 0 8px
    }

    .demo-video-box {
        width: 57%
    }

    .clone-box {
        width: 39%;
        margin-bottom: -17.5%
    }

    .clone-box-inn {
        border-radius: 26px
    }

    .faq-box {
        max-width: 94.3%;
        padding: 7% 8% 5%
    }
}

@media(min-width:1900px) {

    .mycontainer-left,
    .mycontainer-right {
        max-width: 1363px
    }

    .mycontainer {
        width: 1400px
    }

    .mycontainer2 {
        width: 1384px
    }

    .mycontainer3 {
        width: 1464px
    }

    .mainvideo {
        position: absolute;
        width: 441px;
        top: 20px;
        left: 104px
    }

    .slidText {
        font-size: 55px
    }

    .text-box {
        margin: 0 0 2px
    }

    .arrowC {
        top: -72%;
        right: 26.5%;
        max-width: 100%
    }

    .songEmotion {
        top: 32%;
        left: 26%;
        font-size: 16px
    }

    .audioPlayerai {
        padding: 0% 8% 8%
    }

    .audioPlayerai-playpause {
        width: 25px;
        height: 25px
    }

    .audioPlayerai:not(.audioPlayerai-playing) .audioPlayerai-playpause a {
        margin-left: 10px
    }

    .audioPlayerai-bar {
        margin: 42% 24px 0 -15px
    }

    .videoDot1 {
        left: -1.5%;
        top: 2%;
        z-index: 1
    }

    .videoDot2 {
        top: 24%;
        right: -1.8%
    }

    .videoDot3 {
        left: -1.5%;
        top: 24%;
        z-index: 1
    }

    .videoDot4 {
        top: 25%;
        right: -1.8%
    }

    .videoDot5 {
        left: -1.5%;
        top: 24.5%;
        z-index: 1
    }

    .videoDot6 {
        top: 27%;
        right: -1.8%
    }

    .videoDot7 {
        left: -1.5%;
        top: 24.5%;
        z-index: 1
    }

    .videoDot8 {
        top: 25%;
        right: -1.8%
    }

    .videoDot9 {
        left: -1.5%;
        top: 26.5%;
        z-index: 1
    }

    .videoDot10 {
        top: 23.5%;
        right: -1.8%
    }

    .videoDot11 {
        left: 103%;
        top: -42%;
        z-index: 1
    }

    .ele1 {
        right: -14%;
        top: -6%
    }

    .Arrowtext h3 {
        font-size: 24px
    }

    .arrow1 {
        max-width: 100%
    }

    .videoText {
        padding: 0% 13% 0% 5%
    }

    .videoText2 {
        padding: 6% 5% 0% 13%
    }

    .videoText3 {
        padding: 6% 13% 0% 5%
    }

    .section2-box {
        width: 13%
    }

    .section2-box-text {
        width: 16%
    }

    .revoicerBg {
        padding: 4% 4% 4% 7%
    }

    .revoicerBg2 {
        padding: 4% 7% 4% 4%
    }

    .sctioin9Bg {
        max-width: 86%
    }

    .usecase-block {
        width: 210px
    }

    .usecase-block.expand {
        width: 525px
    }

    .usecase-target {
        width: 200px
    }

    .usecase-title {
        font-size: 19px;
        line-height: 123%;
        margin-left: 4%
    }

    .usecase-text-block {
        font-size: 14px
    }

    #bars,
    #bars2,
    #bars3,
    #bars4,
    #bars5,
    #bars6 {
        margin: 0 0 48px 0;
        transform: scale(2) translateX(-5%)
    }

    .connection1 {
        max-width: 100%
    }

    .connection2,
    .connection3 {
        max-width: 100%
    }

    .portfolio {
        width: 16.8%
    }

    .flagBoxpop {
        width: 33%
    }

    .section7-box1,
    .section7-box2,
    .section7-box3,
    .section7-box4,
    .section7-box5,
    .section7-box6 {
        width: 95%
    }

    .audioBox {
        width: 25%
    }

    .swiper-slide.speech {
        height: 615px
    }

    .flagmain {
        padding: 0 8px
    }

    .flagmain-Pop {
        padding: 0 10px
    }

    .secure-main-box {}

    .demo-video-box {
        width: 52.3%
    }

    .clone-box {
        width: 39%;
        margin-bottom: -17.5%
    }

    .clone-box-inn {
        border-radius: 26px
    }

    .faq-box {
        max-width: 94.3%;
        padding: 7% 8% 5%
    }

    .plan2 {
        width: 32%
    }
}

@media(min-width:2000px) {}

.mt0 {
    margin-top: 0%
}

.mt1 {
    margin-top: 1%
}

.mt2 {
    margin-top: 2%
}

.mt3 {
    margin-top: 3%
}

.mt4 {
    margin-top: 4%
}

.mt5 {
    margin-top: 5%
}

.mt6 {
    margin-top: 6%
}

.mt7 {
    margin-top: 7%
}

.mt8 {
    margin-top: 8%
}

.mt9 {
    margin-top: 9%
}

.mt10 {
    margin-top: 10%
}

.mt11 {
    margin-top: 11%
}

.mt12 {
    margin-top: 12%
}

.mt13 {
    margin-top: 13%
}

.mt14 {
    margin-top: 14%
}

.mt15 {
    margin-top: 15%
}

.mt17 {
    margin-top: 17%
}

.mt20 {
    margin-top: 20%
}

.mt22 {
    margin-top: 22%
}

.mt26 {
    margin-top: 26%
}

.mt28 {
    margin-top: 28%
}

.mtm14 {
    margin-top: -14%
}

.mtm4 {
    margin-top: -4%
}

.mtm1 {
    margin-top: -1%
}

.mtm2 {
    margin-top: -2%
}

.mtm3 {
    margin-top: -3%
}

.mtm6 {
    margin-top: -6%
}

.mtm8 {
    margin-top: -8%
}

.mtm9 {
    margin-top: -9%
}

.mtm20 {
    margin-top: -20%
}

.mtm12 {
    margin-top: -12px
}

.mtm40 {
    margin-top: -40px
}

lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    max-width: 720px
}

lite-youtube::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
    background-position: top;
    background-repeat: repeat-x;
    height: 60px;
    padding-bottom: 50px;
    width: 100%;
    transition: all .2s cubic-bezier(0, 0, .2, 1)
}

lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100%/(16/9))
}

lite-youtube>iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0
}

lite-youtube>.lty-playbtn {
    display: block;
    width: 68px;
    height: 48px;
    position: absolute;
    cursor: pointer;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
    z-index: 1;
    background-color: transparent;
    background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2OCA0OCI+PHBhdGggZD0iTTY2LjUyIDcuNzRjLS43OC0yLjkzLTIuNDktNS40MS01LjQyLTYuMTlDNTUuNzkuMTMgMzQgMCAzNCAwUzEyLjIxLjEzIDYuOSAxLjU1Yy0yLjkzLjc4LTQuNjMgMy4yNi01LjQyIDYuMTlDLjA2IDEzLjA1IDAgMjQgMCAyNHMuMDYgMTAuOTUgMS40OCAxNi4yNmMuNzggMi45MyAyLjQ5IDUuNDEgNS40MiA2LjE5QzEyLjIxIDQ3Ljg3IDM0IDQ4IDM0IDQ4czIxLjc5LS4xMyAyNy4xLTEuNTVjMi45My0uNzggNC42NC0zLjI2IDUuNDItNi4xOUM2Ny45NCAzNC45NSA2OCAyNCA2OCAyNHMtLjA2LTEwLjk1LTEuNDgtMTYuMjZ6IiBmaWxsPSJyZWQiLz48cGF0aCBkPSJNNDUgMjQgMjcgMTR2MjAiIGZpbGw9IndoaXRlIi8+PC9zdmc+);
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, .2, 1);
    border: none
}

lite-youtube:hover>.lty-playbtn,
lite-youtube .lty-playbtn:focus {
    filter: none
}

lite-youtube.lyt-activated {
    cursor: unset
}

lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated>.lty-playbtn {
    opacity: 0;
    pointer-events: none
}

.lyt-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.autoplayer-area {
    position: relative
}

.autoplayer-subarea {
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background-color: #000
}

.autoplayer-subarea-16-by-9 {
    padding-bottom: 59.25%
}

.autoplayer-subarea-4-by-3 {
    padding-bottom: 75%
}

.autoplayer-subarea iframe,
.autoplayer-subarea object,
.autoplayer-subarea embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.autoplayer-subarea,
.autoplayer-subarea iframe {
    line-height: 0;
    border: 0;
    margin: 0
}

.autoplayer-overlay {
    display: none;
    position: absolute;
    color: #fff;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex-direction: column
}

.autoplayer-overlay-background {
    position: absolute;
    background-color: #00000080;
    opacity: .6;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.autoplayer-overlay-show {
    display: flex
}

.autoplayer-overlay-content {
    font-size: 21px;
    font-family: arial;
    z-index: 10;
    text-align: right;
    margin: 4%
}

.autoplayer-overlay-content>img {
    max-width: 25%;
    max-height: 25%
}

.audioPlayerai-playpause {
    margin-top: 15px
}

.flag {
    border-radius: 10px
}

.rowequal {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap
}

.rowequal>[class*=col-] {
    display: flex;
    flex-direction: column
}

.online {
    margin-top: -3px;
    margin-right: 5px
}

.button-18 {
    align-items: center;
    background-color: #0a66c2;
    border: 0;
    border-radius: 100px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: -apple-system, system-ui, system-ui, segoe ui, Roboto, helvetica neue, fira sans, Ubuntu, Oxygen, oxygen sans, Cantarell, droid sans, apple color emoji, segoe ui emoji, segoe ui symbol, lucida grande, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 20px;
    max-width: 480px;
    min-height: 40px;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    touch-action: manipulation;
    transition: background-color .167s cubic-bezier(.4, 0, .2, 1) 0s, box-shadow .167s cubic-bezier(.4, 0, .2, 1) 0s, color .167s cubic-bezier(.4, 0, .2, 1) 0s;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle
}

.button-18:hover,
.button-18:focus {
    background-color: #16437e;
    color: #fff
}

.button-18:active {
    background: #09223b;
    color: rgb(255, 255, 255, .7)
}

.button-18:disabled {
    cursor: not-allowed;
    background: rgba(0, 0, 0, .08);
    color: rgba(0, 0, 0, .3)
}