/**=========================
        START Content Box 22
    =========================**/

    /** START FLIP BOX **/

    .button.is-play1 {
        height: 5vmax;
        width: 4.5vmax;
    }

    .click-flip {
        position: absolute;
        bottom: 1px;
        right: 1px;
        color: red;
        font-weight: 700;
        font-family: 'JaapokkiRegular';
    }

    .container-flip {
        margin-left: 10%;
        margin-right: 10%;
    }

    .container-flip-price {
        padding: 0 5vmax;
        margin: 0;
    }

    @media only screen and (max-width: 950px) {
        .container-flip-price {
            padding: 0;
            margin: 0;
        }

        .flip-box .title-flip {
            font-size: 14px !important;

        }
    }


    .flip-box {
        position: relative;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-perspective: 1000px;
        perspective: 1000px;
        padding: 0;
        border: 0;
        margin-bottom: 30px;
        box-shadow: 1px 2px 10px #d6d4d4;
        border-radius: 12px;
        margin-top: 1vmax;
    }



    .flip-box-front,
    .flip-box-back {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        min-height: 250px;
        height: auto;
        -webkit-transition: .6s;
        transition: .6s;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        background-color: #fff;
        background-size: cover;
        z-index: 10;
    }

    .flip-box-back {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        border-radius: 2px;
        background: rgba(238, 142, 238, 0.808);
        /* background: linear-gradient(90deg, #0345ff, #03def4); */
        background-size: 200% auto
    }

    .flip-box-back1 {

        background: url(https://vault.uicore.co/nft/wp-content/uploads/sites/20/2022/06/NFT-Blockchain-BG-Image.webp);
        background-position: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -3;
        border-radius: 2px;
        /* background: rgba(238, 142, 238, 0.808); */
        /* background: linear-gradient(90deg, #0345ff, #03def4); */
        /* background-size: 200% auto */

    }

    .flip-box-front .inner1,
    .flip-box-back .inner1 {
        position: absolute;
        left: 0;
        bottom: 0;
        top: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10%;
        letter-spacing: 1px;
        justify-content: center;
        text-align: center;
        border-radius: 2px;
        outline: 1px solid transparent;
        -webkit-perspective: inherit;
        perspective: inherit;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateZ(60px) scale(.94);
        transform: translateZ(60px) scale(.94);
        gap: 1vmax;
    }

    .flip-box-front .inner1 img {
        height: 5vmax;
        animation: movetopbottomm 4s linear infinite;
    }

    .flip-box-front .inner10 img {
        height: 5vmax;
        animation: movetopbottommt 4s linear infinite;
    }

    @media screen and (max-width: 650px) {
        .container-flip {
            margin-left: 0;
            margin-right: 0;
        }

        .flip-box-front .inner1 img {
            height: 10vmax;
        }

        .flip-box-front .inner1 h3 {
            margin-top: 3vmax;
        }

        .flip-box-back .inner1 .desc {
            font-size: 12px;
            line-height: 0.1;
        }
    }

    @keyframes movetopbottomm {

        0%,
        100% {
            transform: translatey(-10px);
        }

        50% {
            transform: translatey(15px);
        }
    }

    @keyframes movetopbottommt {

        0%,
        100% {
            transform: translatey(15px);
        }

        50% {
            transform: translatey(-10px);
        }
    }

    .flip-box-front .inner1 .icon {
        width: 60px;
        height: 60px;
        font-size: 36px;
        border: 1px solid;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin: 0 0 20px;
    }

    .flip-box .title-flip {
        font-size: 1.2rem;
        margin: 0;
        text-transform: uppercase;
        margin-top: .5vmax;
    }

    .flip-box-back .inner1 .desc {
        margin: 20px 0 20px;
        line-height: 1.5;
        text-align: justify;
    }

    .flip-box-back .flip-btn {
        text-decoration: none;
        color: #fff;
        display: inline-block;
        /* padding: 8px 14px; */
        border: 1px solid;
        border-radius: 4px;
    }

    .flip-box-front .title-flip {
        /* color: #343a40; */
        color: #2E3192;
    }

    .flip-box-back .title-flip,
    .flip-box-back .desc {
        color: #000;
        font-weight: 400;
        /* text-align: justify; */
        font-size: 14px;
    }

    /** END FLIP BOX **/

    /** START FLIP BOX: TOP to BOTTOM **/
    .flip-box.flip-up .flip-box-front {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
    }

    .flip-box.flip-up .flip-box-back {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }

    .flip-box.flip-up:hover .flip-box-front {
        -webkit-transform: rotateX(-180deg);
        transform: rotateX(-180deg);
    }

    .flip-box.flip-up:hover .flip-box-back {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
    }

    /** END FLIP BOX: TOP to BOTTOM **/


    /** START FLIP BOX: BOTTOM to TOP **/
    .flip-box.flip-bottom .flip-box-front {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
    }

    .flip-box.flip-bottom .flip-box-back {
        -webkit-transform: rotateX(-180deg);
        transform: rotateX(-180deg);
    }

    .flip-box.flip-bottom:hover .flip-box-front {
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }

    .flip-box.flip-bottom:hover .flip-box-back {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
    }

    /** END FLIP BOX: BOTTOM to TOP **/

    /** START FLIP BOX: RIGHT to LEFT **/
    .flip-box.flip-right .flip-box-front {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }

    .flip-box.flip-right .flip-box-back {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .flip-box.flip-right:hover .flip-box-front {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
    }

    .flip-box.flip-right:hover .flip-box-back {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }

    /** END FLIP BOX: RIGHT to LEFT **/


    /** START FLIP BOX: LEFT to RIGHT **/
    .flip-box.flip-left .flip-box-front {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }

    .flip-box.flip-left .flip-box-back {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
    }

    .flip-box.flip-left:hover .flip-box-front {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .flip-box.flip-left:hover .flip-box-back {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }

    /** END FLIP BOX: LEFT to RIGHT **/

    /**=========================
    END Content Box 20
    =========================**/

    .website-section3-bottom-section1 {
        width: 100%;
        display: flex;

        background: #E5EEFF;
        padding: 23px 40px 40px;
        border-radius: 10px;
        position: relative;
        z-index: 1;
        margin-bottom: 30px;
    }

    .website-section3-bottom-section1:before {
        position: absolute;
        content: "";
        z-index: 1;
        top: 0;
        right: 0;
        width: 0;
        height: 100%;
        background: url(../img/bg-feature\ animetion\ img.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 10px;
        transition: .5s;
    }



    .website-section3-bottom-section1:after {
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        transition: .5s;
    }

    .website-section3-bottom-section1:hover:before {
        left: 0;
        width: 100%;
    }

    .website-section3-bottom-section1 img {
        height: 10vmax;
        z-index: 2;
    }

    .website-section3-bottom-section1 h2 {
        font-size: 24px;
        font-weight: 700;
        transition: .5s;
        z-index: 2;
    }

    .website-section3-bottom-section1 p {
        font-size: 18px;
        font-weight: 400;
        font-style: normal;
        color: rgba(0, 0, 0, 0.71);
        z-index: 2;
    }

    .website-section3-bottom-section1 a {
        display: inline-block;
        color: #fff;
        font-weight: 400;
        padding: 8px 30px;
        background: linear-gradient(to left, #2475FC, #1129B9);
        border-radius: 5px;
        transition: .5s;
        border: 1px solid transparent;
        z-index: 2;
    }

    .website-section3-bottom-section1:hover.website-section3-bottom-section1 h2 {
        color: white;
    }

    .website-section3-bottom-section1:hover.website-section3-bottom-section1 p {
        color: white;
    }

    .website-section3-bottom-section1:hover.website-section3-bottom-section1 a {
        color: white;
        background: transparent;
        border: 1px solid white;
    }

    .website-section3-bottom-section1 a:hover {
        color: white;
    }

    .website-section3-bottom-section1 div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1vmax;
    }