body {
    background-image: url('../images/Bg.webp');
    background-size: cover;
    background-position: top;
    padding: 20px 0rem;
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
}

button,
a {
    cursor: pointer;
}

section {
    padding: 0 80rem;
}

header {
    display: flex;
    justify-content: space-between;
    height: 50rem;
    align-items: center;
}

header menu {
    display: flex;
}

header menu ul {
    display: flex;
    gap: 40rem;
}


header .logo img {
    display: flex;
    gap: 20rem;
    height: 36rem;
    position: relative;
    z-index: 999;
}

.Deco-Top-Left {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transform: translate(-40%, -0%);
    width: 10%;
}

header menu li {
    font-size: 16px;
    color: #D0CCD0;
    display: flex;
    align-items: center;
    gap: 8rem;
    white-space: nowrap;
    position: relative;
    justify-content: space-between;

}

header menu li:hover {
    font-size: 16px;
    color: #6C70DC;

}

header menu ul li>svg {

    display: none;
}

header menu ul li.has-submenu>svg {

    display: flex;

    transition: transform 0.3s ease-in-out;
}

header menu li ul {
    position: absolute;
    background-color: #FFF;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    padding: 20rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10rem;
    display: none;
    z-index: 999;

}

.header {
    padding-top: 10px;
    padding-bottom: 10px;
    transition: all 0.3s ease-in-out;
    top: -100px;
}

.header.active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #FFF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

header menu li:hover ul {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    width: max-content;
    min-width: 200px;

}


header menu li:hover>svg {
    transform: translateY(-10%) rotate(-180deg);

}

header .right {
    display: flex;
    gap: 25rem;
    align-items: center;
}

header .right button {
    display: flex;
    color: #6C70DC;
    height: 48rem;
    align-items: center;
    justify-content: center;
    text-align: 16px;
    font-weight: bold;
    cursor: pointer;

}

header .right button.out {
    width: 125rem;
    border-radius: 15rem;
    border: solid 1rem #6C70DC;
}

.hero {
    /* overflow: hidden; */
    padding-bottom: 100rem;
}

.hero>p {
    font-family: 16px;
    font-weight: bolder;
    color: #1B256D;
    margin: auto;
    margin-top: 90rem;
    text-align: center;
    opacity: 0.27;
    font-size: 16px;
}

.hero .flex {
    display: flex;
    margin-top: 70rem;
    align-items: stretch;
}

.hero .flex .Hero-pc {
    width: 50%;
    object-fit: contain;
    transform: scale(1);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: relative;


}

.hero .flex .Hero-pc .Hero-pc-img {

    animation: zoom 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes zoom {
    0% {
        transform: scale(0);
    }

    100% {}
}

@keyframes scrolls {

    0%,
    10%,
    28%,
    50%,
    100% {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    20%,
    23% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -20px, 0) scaleY(1.1);
        transform: translate3d(0, -20px, 0) scaleY(1.1);
    }

    35% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -10px, 0) scaleY(1.05);
        transform: translate3d(0, -10px, 0) scaleY(1.05);
    }

    40% {
        -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translateZ(0) scaleY(.95);
        transform: translateZ(0) scaleY(.95);
    }

    45% {
        -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
        transform: translate3d(0, -4px, 0) scaleY(1.02);
    }
}


.hero .flex .Hero-pc img {
    /* height: 100%; */
    width: 100%;
    object-fit: contain;
    max-height: 480px;
    filter: drop-shadow(-10px 0px 6px #0001);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(0.8);

}
.hero .flex .Hero-pc img:hover {
    transform: scale(0.9);
    filter: drop-shadow(-10px 0px 60px #0001);

}

.hero .flex .Hero-pc .phone-hero {
    position: absolute;
    right: 12%;
    top: 0%;
    width: auto;
    height: 100%;

    transform: scale(1);
    z-index: -1;

    filter: drop-shadow(0px 0px 6px #23186550);
}

.hero .flex .Hero-mo {
    display: none;


    filter: drop-shadow(0px 0px 6px #23186550);
    animation: zoom 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero .flex h1 {
    font-size: 52rem;
    font-family: "Poppins";
    margin-bottom: 32rem;
    text-transform: uppercase;
    color: #1B256D;
    font-weight: bold;
    filter: drop-shadow(4rem 3rem 15rem #0005);
    line-height: 120%;
}

.hero .flex h1 span {
    display: inline;
    font-weight: bold;
    color: #6C70DC
}

.hero .flex h5 {
    font-size: max(20rem, 18px);
    font-family: "Nunito Sans";
    color: #64607D;
    font-weight: 300;
    line-height: 140%;
    margin-bottom: 30rem;
}

.hero .flex h5 p {
    display: inline;

    font-weight: bold;
}

.hero .flex .text-style {

    font-family: "Square Peg";
    font-size: 30rem;
    color: #6C70DC;
}

.hero .flex button {
    background-color: #FF733B;
    font-family: "Nunito Sans";
    font-weight: bold;
    padding: 18rem 30rem;
    margin-top: 2rem;
    font-size: 16px;
    color: #fff;
    border-radius: 16px;
    height: max(60rem, 50px);
    position: relative;
    cursor: pointer;
}

.hero .flex button:hover {
    color: #FF733B;
    background-color: #FFF0;
    border: solid 1px #FF733B;
}

.hero .flex button::after {
    content: url('/assets/images/Vector.svg');
    position: absolute;
    left: 100%;
    bottom: 30%;
    pointer-events: none;
    object-fit: contain;
}

.hero h3 {
    color: #1B256D;
    font-weight: bolder;
    font-size: 23rem;
    text-align: center;
    width: 980rem;
    max-width: 90%;
    margin: auto;
    margin-top: 100rem;
    text-transform: uppercase;
    line-height: 160%;
    opacity: 50%;
    font-family: "Onest";

}

.hero .social {
    display: flex;
    margin-top: 80rem;
    gap: 60rem;
}

.hero .social .item {
    display: flex;
    align-items: center;
    gap: 20rem;
    flex: 1;
}

.hero .social .item h4 {
    font-family: "Poppins";
    font-weight: 700;
    font-size: 32rem;
    color: #1B256D;
    margin-bottom: 10rem;
}

.hero .social .item p {
    display: inline;
    font-family: "Nunito Sans";
    font-size: 14px;
    color: #64607D;
}

.hero .social .item .bg {
    border-radius: 30rem;
    height: max(90rem, 60px);
    width: max(90rem, 60px);
    min-width: max(90rem, 60px);
    display: flex;
    align-items: center;
    justify-content: center;

}

.hero .social .item .bg img {
    height: 60%;

}

.hero .txt {
    font-size: max(20rem, 12px);
    text-align: center;
    margin-top: 80rem;
    color: #E54F13;
}

header .menu-button {
    display: none;
}

header menu .account {
    display: none;
}

.hero .scroll {
    animation: scrolls 2s infinite;
    transform: translateZ(0);

}


@media (max-width:1200px) {



    header menu {
        display: flex;
        position: fixed;
        left: -100vw;
        /* opacity: 0; */
        top: 0;
        bottom: 0;
        width: 300px;
        max-width: 90%;
        z-index: 99;

        transition: left 0.4s;
        box-shadow: 0 10px 100px #0005;

    }


    header menu .overlay {
        display: flex;
        position: absolute;
        left: 0;
        z-index: -10;
        /* opacity: 0; */
        top: 0;
        bottom: 0;
        width: 100vw;
        background-color: #0005;

    }

    header menu.active {
        left: 0;
        opacity: 1;
    }

    header menu ul {
        flex-direction: column;
        padding: 80rem;
        background-color: white;
        height: 100%;
        width: 100%;
        padding-top: 100px;

    }

    header menu.active li {
        font-size: 18px;
        flex-direction: column;
        align-items: flex-start;

    }

    header menu.active li svg {
        position: absolute;
        right: 0px;
        top: 2.5px;

    }

    header menu li:hover ul {
        position: relative;
        top: 0;
        left: 0;
        padding: 0;
        box-shadow: none;
        transform: none;
        padding-left: 20px;
        padding-top: 10px;

    }


    header menu li ul li {
        font-size: 16px;

    }

    header .menu-button {
        display: flex;
        height: 22px;
        width: 27px;
        flex-direction: column;
        gap: 5.5px;
        position: relative;
    }

    header .menu-button.active div {
        transform: rotate(45deg);
        position: absolute;
        top: 50%;
        left: 0%;
        z-index: 99;
    }

    header .menu-button.active div:last-child {
        transform: rotate(-45deg);
    }

    header .menu-button.active div:nth-child(2) {
        opacity: 0;
    }

    header .menu-button div {
        display: flex;
        height: 3px;
        border-radius: 2px;
        background-color: #6C70DC;
        width: 27px;
        transform-origin: center;

        /* transition: transform   0.4s; */

    }




    header .right {
        display: none;
    }

    header menu .account {
        display: flex;
        color: #6C70DC;
    }


    .hero .social {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .hero .social .item {
        min-width: 40%;
    }


}

@media (max-width:720px) {

    .hero .flex {
        flex-direction: column;
    }

    .hero .flex .Hero-pc>img {
        display: none;
    }

    .hero .flex .Hero-pc .download {
        margin: auto;
    }

    .hero .flex .Hero-pc {
        width: 100%;
        margin-top: 40px;
    }

    .hero .flex .Hero-mo {
        display: flex;

        width: 20%;
        transform: scale(2.4);
        transform-origin: 80%;
        margin-left: auto;

    }

    .hero .flex .Hero-mo img {
        max-height: 140px;
        display: flex;
        object-fit: contain;
        width: 100%;


    }

    .hero .scroll {
        display: none;
    }

    .hero .flex h5 {
        margin-top: 60px;
        font-size: 16px;
        text-align: center;
    }

    .hero .social .item {
        min-width: 80%;
    }


    .hero .flex .text-style {

        font-size: 24px;
        text-align: center;
    }

    .hero .flex button {
        margin: auto;
        display: flex;
        align-items: center;
        margin-top: 20px;

    }

    .hero .flex button::after {
        display: none;

    }

    .hero .flex h5 {
        font-size: 16px;
        text-align: center;
    }


}

.hero .download {
    display: flex;
    padding: 5px;
    gap: 21px;
    border-radius: 14px;
    background-color: #FFF;
    width: fit-content;
    margin-left: auto;
    box-shadow: 10px 20px 40px #0001;

}

.hero .download .items {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 62px;
    width: 62px;
    justify-content: space-between;
    font-family: "Onest";
    font-size: 8px;
    border-radius: 10px;
    padding: 9px;
    box-sizing: border-box;
    white-space: nowrap;
    color: #D0CCD0;
    cursor: pointer;
}

.hero .download .items:hover {

    background-color: #5B469B20;

}


.hero .download .items img {
    height: 26px;
    width: 26px;
}



.grids .end {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform: translateY(-64rem);

}

.grids .end img {
    width: 200rem;
}

.grids .end .img-i {
    position: absolute;
    top: 100%;

}

.grids {
    margin-top: 40rem;
    position: relative;
    z-index: 10;
    background-color: #C5BDE522;
    box-shadow: 0 -1px 1px #0001;
}

.grids .items {
    padding: 40rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 60rem;
    max-width: 1000px;
    margin: auto;
}

.grids .items .item {
    flex: 1;
    display: flex;
    min-width: 40%;
    align-items: center;
    gap: 20px;
}

.grids .items .item img {
    width: 90rem;
}

.grids .items .item span {
    color: #0005;
    font-size: max(13px, 16rem);
    font-family: "Onest";
    font-weight: bold;
    line-height: 250%;
    text-transform: uppercase;
}

@media (max-width:980px) {
    .grids .items .item {

        min-width: 80%;
    }


}

.grids .Triangles {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(95%);
    height: 34px;
    object-fit: cover;
    width: 100%;
    z-index: -1;
}

.cards {
    margin-top: 200rem;
    overflow: hidden;
    padding-bottom: 200rem;
}

.cards h1 {
    font-size: 34rem;
    color: #1B256D;
    text-align: center;
    margin: auto;
    text-transform: uppercase;
    line-height: 200%;
    font-family: "Poppins";
    font-weight: bold;
    position: relative;
    max-width: 1200px;
    filter: drop-shadow(4px 5px 10px #1B256DA0);

}

.cards h1 span {
    color: #6C70DC;
    display: inline;
}

.cards h1::after {
    content: url('/assets/images/v2.svg');
    position: absolute;
    right: 5%;
    bottom: calc(100% - 60rem);

}

.cards .card {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-top: 200rem;
    flex-direction: row-reverse;
    max-width: 100%;
    position: relative;
}


.cards .card:nth-child(2n+1) {
    flex-direction: row;
}

.cards .card .title {
    font-size: max(16px, 26rem);
    line-height: 150%;
    text-transform: uppercase;
    margin-bottom: 20rem;
    font-family: "Poppins";
    font-weight: bold;
    color: #1B256D;
}

.cards .card .title p {
    color: #6C70DC;
    display: inline;

}

.cards .card .txt {
    color: #64607D;
    font-size: max(14px, 20rem);
    line-height: 200%;
    font-family: "Nunito Sans";
    font-weight: 400;

}

.cards .card img {
    display: flex;
    width: 100%;

}

.cards .card>div {
    flex: 1;

}

.cards .card>div {
    transform: translateX(-100vw);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1);

}

.cards .card:nth-child(2n+1) .img {
    transform: translateX(-100vw);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1);
}

.cards .card .img {
    transform: translateX(+100vw);


}

.cards .card:nth-child(2n+1)>div {
    transform: translateX(100vw);
}

.cards .card.active div {
    transform: translateX(0%) !important;

}




.FAQ {
    margin-top: 10rem;
    /* overflow: hidden; */
}

.FAQ .h2 {
    font-size: 48rem;
    font-family: "Poppins";
    text-transform: uppercase;
    display: flex;
    color: #6C70DC;
    line-height: 150%;
    gap: 10px;
    position: relative;
    width: fit-content;
}

.FAQ>.h2 img {
    display: none;
}

.FAQ .h2 strong {
    font-size: 100rem;
    line-height: 150%;

}

.FAQ .h4 {
    font-family: "Nunito Sans";
    font-weight: bold;
    font-size: max(24rem, 16px);
    margin-top: 20px;
}


.FAQ p {
    font-family: "Nunito Sans";
    font-weight: 400;
    font-size: max(18rem, 14px);
    margin-top: 20px;
}

.FAQ button {
    background-color: #6C70DC;
    font-family: "Nunito Sans";
    font-weight: bold;
    padding: 18rem 30rem;
    margin-top: 2rem;
    font-size: 14px;
    color: #fff;
    border-radius: 16px;
    height: max(60rem, 50px);
    position: relative;
    cursor: pointer;
    margin-top: 20px;
}

.FAQ button:hover {
    color: #6C70DC;
    background-color: #FFF0;
    border: solid 1px #6C70DC;
}

.FAQ>img {
    width: 100%;
    transform: translateY(-30%);


}

@keyframes move {

    0%,
    10% {
        transform: translate(0);
    }

    30%,
    40% {
        transform: translate(-30%);
    }

    60%,
    70% {
        transform: translate(-60%);
    }
}

@media (max-width:720px) {

    .Hero-pc .Hero-pc-img{
        display: none;
    }

    .cards .card {
        flex-direction: column !important;
        text-align: center;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .cards .card .img {
        width: 90%;
    }

    .cards .card .img img {
        border-radius: 20px !important;
        border: solid 6px #FFF !important;
    }

    .FAQ>img {

        width: 200%;
        transform: translateY(0%);
    }

    .FAQ .card.active {
        animation: move infinite 6s;
    }
}


.FAQ .flex {
    display: flex;
    gap: 40px;
}

.FAQ .items {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.FAQ .items .item {
    min-width: 40%;
    display: flex;
    gap: 20px;
    align-items: center;
    flex: 1;

}

.FAQ .items .item:nth-child(n+3) {
    justify-content: flex-end;

}

.FAQ .items .item .img {
    height: 40px;
    width: 40px;
    border-radius: 10px;
    background-color: #DEE1E6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.FAQ .items .item p {
    font-size: 15px;
    font-family: "Nunito Sans";
    color: #64607D;
    margin-top: 0;
    line-height: 150%;
}

.FAQ .img-pc {
    display: none;
}




footer {
    background-color: #1B256DA0;
    color: white;
    padding: 100rem;

    margin-top: 300px;
    position: relative;

}

footer .flex {
    display: flex;
    justify-content: space-between;
    flex: 1;
    gap: 30px;
    margin-top: 100rem;
}

footer .flex .links {
    display: flex;
    flex-direction: column;
    gap: 40rem;
    font-family: "Nunito Sans";
    flex: 1;
}


footer .flex .links {
    display: flex;
    flex-direction: column;
    gap: 40rem;
    font-family: "Nunito Sans";
    flex: 1;
}


footer .flex .links ul {
    display: flex;
    flex-direction: column;
    gap: 40rem;
    font-family: "Nunito Sans";
    flex: 1;
}

footer .flex .flex {
    margin-top: 0;
}

footer .flex .links .site-nav__link--main {
    font-weight: bold;
}


footer .social-data {
    display: flex;
    margin-top: 30px;
    gap: 10px;

}

footer .left {
    flex: 1;

}

footer .left p {
    margin-top: 10px;

}

footer .before {
    background-color: #1B256D;
    border-radius: 20px;
    height: 400px;
    min-height: fit-content;
    position: relative;
    max-width: 95%;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0%);
    width: 800px;
    padding: 40px 20px;
    box-sizing: border-box;
    text-align: center;
    margin-top: -300px;

}

footer .before h3 {
    font-size: max(40rem, 20px);
    text-transform: uppercase;
    font-weight: bold;
    font-family: "Poppins";
    margin-bottom: 30px;
}

footer .before p {
    font-size: 14px;
    font-family: "Poppins";
    margin-bottom: 30px;
}

footer #menu-footer {
    flex: 3;
}



@media (min-width:720px) {


    .FAQ .img-pc {
        display: flex;
    }

    .design-l,
    .design-l1 {
        position: relative;
    }

    .design-l:after,
    .design-l1:after {
        content: url(../icons/desgn/l1.svg);
        position: absolute;
        transform: translate(-50%, -50%) scale(0.8);
        top: 100%;
        left: 50%;
        z-index: -1;
        display: block;

    }


    .design-l1:after {
        content: url(../icons/desgn/l2.svg);
        top: 60%;
    }

    .FAQ>.h2 img {
        position: absolute;
        content: url('../icons/desgn/arr1.svg');
        position: absolute;
        top: 50%;
        left: 90%;
        transform: translateY(-100%);
        height: 480rem;
        display: flex;
        z-index: -1;
    }


    .cards .card::after {
        content: "";
        background: url("../icons/desgn/sh1.svg");
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: 100%;
        left: 0%;
        transform: scale(0.6) translateY(-50%);
        width: 50%;
        height: 400rem;
        pointer-events: none;
        transform-origin: center;

    }

    .cards .card.card-item-2::after {
        content: "";
        background-image: url("../icons/desgn/sh2.svg");

    }

    .cards .card.card-item-3 .img {
        position: relative;

    }

    .cards .card.card-item-3 .img::after {
        content: "";
        background-image: url("../icons/desgn/sh3.svg");
        top: 0;
        left: 54%;
        position: absolute;
        transform: translate(-100%, -60%) scale(0.6);
        z-index: -1;

    }



    .cards .card.card-item-3::after {
        content: "";
        background-image: url("../icons/desgn/sh4.svg");
        left: 50%;

    }


    .cards .card.card-item-3::before {
        content: "";
        background-image: url("../icons/desgn/sh9.svg");
        left: 0%;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: 100%;
        left: 0%;
        transform: scale(0.6) translateY(-50%);
        width: 50%;
        height: 400rem;
        pointer-events: none;
        transform-origin: center;

    }


    .cards .card.card-item-4::after {
        content: "";
        background-image: url("../icons/desgn/sh11.svg");
        left: 40%;

    }


    .cards .card.card-item-5::after {
        content: "";
        background-image: url("../icons/desgn/sh5.svg");
        left: 0%;

    }


    .cards .card.card-item-6::after {
        content: "";
        background-image: url("../icons/desgn/sh6.svg");
        left: 0%;

    }


    .cards .card.card-item-7::after {
        content: "";
        background-image: url("../icons/desgn/sh7.svg");
        left: 0%;

    }





}



@media (max-width:600px) {
    .FAQ .flex {
        flex-direction: column;
    }
}

@media (max-width:1000px) {
    .FAQ .flex .items {
        flex-direction: column;
    }

    .FAQ .flex .items .item {
        justify-content: flex-start !important;
    }

    footer .flex .links:nth-child(n+2) {
        display: none;

    }

    footer #menu-footer {
        flex: 1 !important;
    }

}


@media (max-width:560px) {
    body {
        /* background: #FFF; */

    }

    footer .flex {
        flex-direction: column;
        align-items: center;
    }

    footer .flex .links {
        width: 200px;
    }

    footer .flex .left {
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    footer {

        padding: 100rem 10px;

    }
}