@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: default;
}
input{
    cursor: text;
}
:root {
    --grey:  #F2F5F3;
    --white : #FFFFFF;
    --black:  #0D0D0D;
}

body {
    font-family: 'Inter', sans-serif;
}

div img {
    max-width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

.policy ol {
    list-style: none;
    counter-reset: li;
 }
 .policy ol li:before {
    counter-increment: li;
    content: counters(li, ".") ". ";
 }

.site__container{
    margin: 0 auto;
    width: 100%;
    max-width: 1180px;
}
.site__container.policy{
    width: 910px;
}
.site__container.policy h1{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 130%;
    letter-spacing: -0.04em;
    color: #0D0D0D;
    margin-bottom: 40px;
}

.site__container.policy h2{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 130%;
    letter-spacing: -0.04em;
    color: #0D0D0D;
    margin-bottom: 40px;
    margin-top: 40px;
}

.site__container.policy h3{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.04em;
    color: #0D0D0D;
    margin-bottom: 40px;
    margin-top: 40px;
}

.site__container.policy p, .site__container.policy span, .site__container.policy li{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.02em;
    color: #69756D;
}

 .site__container.policy ul{
    margin-left: 17px;
}

.devider{
    width: 100%;
    height: 1px;
    background: #E1E8E3;
}




/* header */

.site__header{
    position: fixed;
    z-index: 3333;
    top: 0;
    left: 0;
    background: transparent;
    right: 0;
    padding-top: 10px;
    height: 80px;
    padding-left: 10px;
    padding-right: 10px;
}

.site__header nav.navigation {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 1300px;
    height: 70px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 22.1462px 44.2923px 221.462px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(30px);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site__header nav .left{
    display: flex;
    align-items: center;
}
.site__header nav .right{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.site__logo{
    width: 100px;
    height: 24px;
    /* margin-right: 66px; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.site__logo .logo{
    height: 23.74px;
    width: 23.9px;
    position: relative;
}
.site__logo .typography{
    width: 67.57px;
    display: block;
    margin-left: 8.5px;
}

.languages{
    margin-right: 40px;
    position: relative;
    
}

.languages p{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 145%;
    letter-spacing: -0.02em;
    color: #0D0D0D;
    cursor: pointer;
}

.languages p::after {
    content: ' ';
    background-image: url('../images/selectarrow.svg');
    position: absolute;
    top: 7px;
    margin-left: 3px;
    width: 12px;
    height: 12px;
    background-size: contain;
    background-repeat: no-repeat;
  }

.languages ul{
    list-style: none;
    position: absolute;
    padding: 30px;
    width: 120px;
    background: #F2F5F3;
    box-shadow: 10px 20px 40px rgba(27, 26, 26, 0.21);
    border-radius: 20px;
    left: -60px;
    display: none;
    flex-direction: column;
    row-gap: 20px;
    align-items: center;
}

.languages .openMenu{
    display: flex;
}

.languages a:hover{
    background: linear-gradient(83.53deg, #80CFBF -4.22%, #6ED490 39.35%, #B6E09F 68.93%, #ACE38D 68.94%, #D7FAA0 99.05%, #7FAD37 99.05%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.languages a{
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.05em;
    color: #69756D;
}

main {
    /* padding-top: 70px; */
    background: #F2F5F3;
    /*padding-top: 118px;*/
}





/* HERO */


#hero {
    background: #F2F5F3;
    width: 100%;
    min-height: 700px;
    padding-top: calc(179px - 118px);
    padding-bottom:195px;
    padding-left: 40px;
    padding-right: 40px;
}


#hero .top {
    margin: 0 auto;
    width: 100%;
    max-width: 730px;
    margin-bottom: 62px;
}

#hero .top h1{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 80px;
    line-height: 110%;
    text-align: center;
    letter-spacing: -0.05em;
    margin-bottom: 30px ;
}


#hero .top .connections{
    display: flex;
    justify-content: center;
    align-items: center;
}   
#hero .top .connections button{
    margin: 5px;
}


#hero .image__container{
    width: 100%;
}
#hero .image__container img{
    width: 100%;
}

/* FOOTER */


.site__footer .top{
    padding-top: 100px;
    padding-bottom: 66px;
}

.site__footer .bottom{
    padding: 30px 0 32px 0;
    min-height: 86px;
}

.copyright{
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 130%;
    color: #B1B1B1;
}



.typical__section{
    position: relative;
    /*margin-top: -100px;*/
    margin-top: -30px;
    border-radius: 40px 40px 0px 0px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /*padding-top: 71px;
     border: 1px solid tomato; 
     padding-top: 130px;
    padding-bottom: 171px;*/
}

#secure {
    background: #FFFFFF;
}

#subscription {
    background: #0D0D0D;
}

#subscription .default {
    color: var(--white);
}

#integration {
    background: #F2F5F3; 
}

#support{
    background: #FFFFFF;
    padding-top: 80px;
    padding-bottom: 110px;
}

#analytics{
    background: #0D0D0D;
}

#analytics p {
    color: #F1F1F1;
}

#payment-solutions{
    background: #F2F5F3;
}

#customized-page{
    background: #FFFFFF;
    padding-top: 60px;
    padding-bottom: 90px;
}


#alternative-methods{
    background: #0D0D0D;
}

#alternative-methods p {
    color: #F1F1F1;
}
#alternative-methods   .default {
    color: #F1F1F1;
}



#features {
    background: #F2F5F3;
    padding-bottom: 127px;
    padding-top: 150px;
}


.contact__form--wrapper {
    background: #7FD99F;
    border-radius: 40px;
    padding: 133px 60px 118px 60px;
    position: relative;
    overflow: hidden;
    min-height: 520px;
}

.contact__form--wrapper::after{
    content: "";
    position: absolute;
    z-index: 0;
    width: 496px;
    height: 100%;
    background-image: url(../images/form-circule.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    right: 0;
    top: 0;
}

.contact__form {
    width: 100%;
    max-width: 426px;
    position: relative;
    z-index: 1;

}

.contact__form  legend {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 50px;
    line-height: 110%;
    letter-spacing: -0.05em;
    color: #0D0D0D;
    margin-bottom: 40px;
}

.contact__form .form__row{
    width: 100%;
    min-height: 48px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}



.contact__form .form__row input {
    outline: none;
    background: #FFFFFF;
    border: 1px solid #E1E8E3;
    border-radius: 12px;
    font-family: 'Inter';
    font-style: normal;
     font-weight: 500;
    font-size: 14px;
    line-height: 145%;
    letter-spacing: -0.02em;
    color: #767676;
    padding: 14px 16px;
    height: 48px;
    width: 100%;
    max-width: 320px;
    margin-right: 8px;
    margin-bottom: 16px;
}

.contact__form .form__row button {
    width: 98px;
    height: 48px;
    background: #0D0D0D;
    border-radius: 12px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.02em;
    color: #F1F1F1;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    border: 1px solid #0D0D0D;
}

.typical__padding{
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    padding-top: 50px ;
}

.contact__form .form__row button:hover {
    background: #373434;
    border: 1px solid #373434;
    color: #F1F1F1;
}


section h2 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 50px;
    line-height: 110%;
    letter-spacing: -0.05em;
    margin-bottom: 40px;


    /* font-size: 25px;
line-height: 110%; */
}




section p.description{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.04em;
    color: #0D0D0D;
    margin-bottom: 40px;
    /*width: 100%;*/
    /*max-width: 450px;*/
}


#subscription p {
    color: #F1F1F1;
}

section p.description.small {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.02em;
}
section p.detail{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.02em;
    color: #B1B1B1;
}

.detailed--list {
    margin: 0;
    padding-left: 24px;

}

.detailed--list.simple {
    list-style: none;
    padding-left: 0 !important;
}


.detailed--list li{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.02em;
    color: #B1B1B1;
}

span.colorized{
    background: linear-gradient(83.53deg, #80CFBF -4.22%, #6ED490 39.35%, #B6E09F 68.93%, #ACE38D 68.94%, #D7FAA0 99.05%, #7FAD37 99.05%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
}

.split {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lg {
   /* -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;*/
    animation: spin 4s linear infinite;
}

.lg-green{
    position: absolute;
    top: -1px;
    left: -1px;
    right: 0;
    bottom: 0;
    opacity: 1;
    transform:rotate(90deg); 
    animation: spingreen 4s linear  infinite;
}
/* @-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}

@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
} */
@keyframes spin { 
    0%{transform:rotate(0deg); opacity: 1;}
    10%{transform:rotate(0deg); opacity: 1;}
    20%{transform:rotate(90deg); opacity: 1;}
    30%{transform:rotate(180deg); opacity: 1;}
    40%{transform:rotate(180deg); opacity: 1;}
    50%{transform:rotate(180deg); opacity: 1;}
    60%{transform:rotate(270deg); opacity: 0;}
    70%{transform:rotate(270deg); opacity: 0;}
    80%{transform:rotate(315deg); opacity: 0;}
    90%{transform:rotate(360deg); opacity: 1;}
    100%{transform:rotate(360deg); opacity: 1;}
}

@keyframes spingreen { 
    0%{transform:rotate(90deg); opacity: 0;}
    10%{transform:rotate(90deg); opacity: 0;}
    20%{transform:rotate(90deg); opacity: 0;}
    30%{transform:rotate(90deg); opacity: 0;}
    40%{transform:rotate(90deg); opacity: 0;}
    50%{transform:rotate(90deg); opacity: 0;}
    60%{transform:rotate(90deg); opacity: 1;}
    70%{transform:rotate(90deg); opacity: 1;}
    80%{transform:rotate(135deg); opacity: 1;}
    90%{transform:rotate(135deg); opacity: 0;}
    100%{transform:rotate(135deg); opacity: 0;}
}
.langs__switcher {
    margin-right: 20px;
}


.site__container.grid{
    display: flex;
    flex-wrap: wrap;
} 

.site__container.grid .left{
    width: 50%;
    /* border: 1px solid tomato; */
    /* display: flex;
    justify-content: center;
    align-items: center; */
} 

.content{
    width: 100%;
}

.site__container.grid .right{
    width: 50%;
    max-width: 580px;
    position: relative;
    /* border: 1px solid tomato; */
    /* min-height: 380px; */
}

.features__grid--wrapper {
    width: 100%;
}

.features__grid{
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-left: -10px;
    margin-right: -10px;
}

.features__grid-card{
    padding: 10px;
    width: calc( 100% / 3 );
}

.features__grid-card-content{
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    padding: 40px;
    border-radius: 20px;
}

.features__grid-card-content .icon{
    width: 36px;
    height: 36px;
    margin-bottom: 40px;

}

.features__grid-card-content h3{
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 130%;
    letter-spacing: -0.04em;
    color: #0D0D0D;
    margin-bottom: 10px;
}

.features__grid-card-content p{
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.02em;
    color: #767676;
}
#contact {
    position: relative;
    background: #F2F5F3;
    /* margin-top: -424px; */
}

#contact .site__container{
    z-index: 2;
}
#contact::after{
    display: block;
    content: "";
    height: 196px;
    position: absolute;
    bottom: 0;
    z-index: 0;
    left: 0;
    right: 0;
    border-radius: 40px 40px 0px 0px;
    background: #FFFFFF;
}


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

.footer__nav--list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.footer__nav--list li {
    width: 50%;

}

.footer__nav--list li h2{
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 145%;
    letter-spacing: -0.02em;
    color: #767676;
    margin-bottom: 18px;
}
.footer__nav--list li ul {
    margin-bottom: 34px;
}
.footer__nav--list li ul li {
    padding: 6px 6px 6px 0;
    width: 100%;
}

.footer__nav--list li ul li a {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 145%;
    letter-spacing: -0.02em;
    color: #0D0D0D;
    text-decoration: none;
    position: relative;
}

.footer__nav--list li ul li a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #0D0D0D;;
    transform-origin: bottom left;
    transition: transform 0.25s ease-out;
  }
 
  .footer__nav--list li ul li a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }

footer .bottom .right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

footer .bottom.site__container.grid .left{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

footer .bottom.site__container.grid .left img:first-child{
    margin-right: 12px;
}


/* 404 */

.notfound {
    width: 100%;
    min-height: 100vh;
    background: #363636;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 30px;
}

.notfound-box {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.notfound-box h1{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: -0.04em;
    color: #B1B1B1;
    text-align: center;
    margin-bottom: 20px;
}

.notfound-box .image__container{
    width: 100%;
    max-width: 616px;
    margin-bottom: 110px;
}


footer .top .site__logo{
    margin-bottom: 40px;
}


/* BUTTONS */


.site__btn {
    cursor: pointer;
    display: inline-block;
    background: transparent;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.02em;
    color: #0D0D0D;
    border: 1px solid #0D0D0D;
    border-radius: 12px;
    padding: 14px 32px;
}

.site__btn.black{
    background: #0D0D0D;
    color: #F1F1F1;
}


.cointy-btn{
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer;
    font-family: 'Inter';
    font-style: normal;
    letter-spacing: -0.02em;
    font-weight: 500;
    border-radius: 12px;
    transition: all 0.4s ease-in-out;
}

.cointy-btn.sm{
    padding: 12px 24px;
    font-size: 12px;
    line-height: 16px;
}

.cointy-btn.xl{
    font-size: 14px;
    line-height: 20px;
    padding: 14px 32px;
}


.cointy-btn.default-btn{
    background: #0D0D0D;
   
    color: #F1F1F1;
}

.cointy-btn.default-btn:hover{
    background: #D7F3E1;
    color: #0D0D0D;
}


.cointy-btn.secondary-btn{
    background: #D7F3E1;
    color: #0D0D0D;
}

.cointy-btn.secondary-btn:hover{
    background: #7FD99F;
    color: #0D0D0D;
}

.cointy-btn.transparent-btn--black{
    background: transparent;
    border: 1px solid #0D0D0D;
    color: #0D0D0D;
}

.cointy-btn.transparent-btn--black:hover{
    background: #0D0D0D;
    color: #F1F1F1;
}

.cointy-btn.transparent-btn--white{
    background: transparent;
    border: 1px solid #0D0D0D;
    color: #F1F1F1;
}

.cointy-btn.transparent-btn--white:hover{
    background: var(--white);
    border: 1px solid var(--white);
    color: #7FD99F;
}


.temporary{
    position: relative;
    display: inline-block;
}
.soon-btn{
    background: #7FD99F;
    border-radius: 59px;
    font-weight: 500;
    font-size: 12px;
    display: block;
    line-height: 130%;
    color: #0D0D0D;
    position: absolute;
    z-index: 1;
    top: -12px;
    right: -24px;
    padding: 4px 10px;

}


.fluid__wrapper {
    margin: 0 auto;
    width: 100%;
    display: block;
    position: relative;
    max-width: 580px;
}
.right picture img{
    max-height:662px
}
.right .scan__wrapper{
    width: fit-content;
    height: 72px;
    position: absolute;
    top: 0;
    bottom: 0px;
    left: 0;
    right: 0;
    border-radius: 20px;
    box-shadow: 10px 20px 100px -20px rgba(0, 0, 0, 0.3);
}
.right .scan__wrapper picture{
    display: flex;
    justify-content: center;
    background-color: black;
    border-radius: 20px;
    width: 100%;
    min-width: 72px;
    height: 72px;
}
.right .scan__wrapper img{
    width: 32px;
}



.right .cloud__wrapper{
    width: fit-content;
    height: 40px;
    position: absolute;
    bottom: 20px;
    left: 5px;
    right: 0;
    border-radius: 14px;
    box-shadow: 10px 20px 100px -20px rgba(0, 0, 0, 0.3);
}

.right .cloud__wrapper picture{
    display: flex;
    justify-content: center;
    background-color: black;
    border-radius: 14px;
    width: 100%;
    min-width: 40px;
    height: 40px;
}

.right .cloud__wrapper img{
    width: 20px;
}

.right .fraud-score__wrapper, .right .decision__wrapper{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    gap: 10px;
    max-width: 214px;
    bottom: 55px;
    right: 0;
    background-color: #FFFFFF;
    box-shadow: 11.6667px 23.3333px 116.667px -23.3333px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
  /*  animation: move 6s linear infinite;*/
}

.right .decision__wrapper{
    bottom: -20px;
}

.right .fraud-score__wrapper img, .right .decision__wrapper img{
    width: 42px;
}
.right .fraud-score__wrapper p, .right .decision__wrapper p{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 145%;
    color: #000000;}

    @keyframes move { 
        0%{transform:translateY(0%); opacity: 1;}
        15%{transform:translateY(0%); opacity: 1;}
        25%{transform: translateY(100%); opacity: 0.5;}
        50%{transform: translateY(200%); opacity: 0;}
        60%{transform: translateY(200%); opacity: 0;}
        75%{transform: translateY(100%); opacity: 0.5;}
        100%{transform:translateY(0%); opacity: 1;}
    }

    @keyframes moveshadowcloud { 
        0%{transform:translateY(0%); opacity: 1; height: 40px;}
        15%{transform:translateY(0%); opacity: 1; height: 40px;}
        25%{transform: translateY(100%); opacity: 0.5; height: 122px;}
        50%{transform: translateY(200%); opacity: 0;}
        60%{transform: translateY(200%); opacity: 0;}
        75%{transform: translateY(100%); opacity: 0.5;}
        100%{transform:translateY(0%); opacity: 1;}
    }

    @keyframes moveshadowscan { 
        0%{transform:translateY(0%); opacity: 1; height: 40px;}
        15%{transform:translateY(0%); opacity: 1; height: 40px;}
        25%{transform: translateY(100%); opacity: 0.5; height: 122px;}
        50%{transform: translateY(200%); opacity: 0;}
        60%{transform: translateY(200%); opacity: 0;}
        75%{transform: translateY(100%); opacity: 0.5;}
        100%{transform:translateY(0%); opacity: 1;}
    }

.left .content--wrapper{
    width: 100%;
    min-height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.customizeWrapper{
    max-width: 424px;
    background: #FFFFFF;
    box-shadow: 10px 20px 100px 10px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 56px 32px 76px;
}
.customizeFont{
    width: 160px;
    outline: none;
    border: unset;
    box-shadow: 10px 20px 100px 10px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: -25px;
    left: -80px;
    border-radius: 12px;
    padding: 14px 16px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 145%;
    letter-spacing: -0.02em;
    color: black;
    appearance: none;
    background: url(../images/selectarrow.svg) no-repeat right #FFFFFF !important;
    background-position-x: calc(100% - 20px) !important;
    background-size: contain;
}

.uploadLogo{
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 20px;
    background-color: #FFFFFF;
    border: 1px dashed #B1B1B1;
    border-radius: 8px;
}

.uploadLogo input{
    display: none;
}

.uploadLogo .uploadText{
    display: flex;
    justify-content: space-between;
}

.uploadLogo .uploadText p{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 145%;
    letter-spacing: -0.02em;
    color: #69756D;
}

.cardContainer{
    position: relative;
    width: 100%;
    height: 204px;
}
.card{
    opacity: 0;
    position: absolute;
    transition: opacity 1s ease-in-out;
}
.card.active{
    opacity: 1;
}
.emailField{
    margin-top: 20px;
    margin-bottom: 20px;
}
.emailField label{
    display: block;
    margin-bottom: 4px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 130%;
    color: #888895;
}

.emailField .input{
    width: 100%;
    outline: none;
    background: #FFFFFF;
    border: 1px solid #E1E8E3;
    border-radius: 12px;
    padding: 14px 16px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 145%;
    letter-spacing: -0.02em;
    color: #69756D;
}

.payContainer{
    position: relative;
    width:100%;
    height: 54px;
}

.pay{
    width: 100%;
    padding: 15px 24px;
    border-radius: 12px;
    text-align: center;
    opacity: 0;
    position: absolute;
    transition: opacity 1s ease-in-out;
}
.pay.active{
    opacity: 1;
}

.pay p{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 140%;
    letter-spacing: -0.04em;
    color: #FFFFFF;
}

.customizeColor{
    width: 174px;
    padding: 15px 25px;
    background: #FFFFFF;
    box-shadow: 10px 21px 106px 10px rgba(0, 0, 0, 0.1);
    border-radius: 21px;
    position: absolute;
    bottom: -25px;
    right: -95px;
    text-align: center;
}

.customizeColor p{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 145%;
    letter-spacing: -0.02em;
    color: #0D0D0D;
    margin-bottom: 10px;
}

.customizeColor .customizeColorCircle {
    display: flex;
    gap: 10px;
}
.customizeColor .customizeColorCircle circle{
    stroke: #E1E8E3;
    stroke-width: 6px;
    stroke-opacity: 0;
    r:16.9756;
    transition: stroke-opacity 1s, r 1s ease-in-out;
}
.customizeColor .customizeColorCircle .active{
    r:14;
    stroke-opacity: 1;
}


.fluid__wrapper.paymentMethodContainer{
    max-width: 442px;
}

.fluid__wrapper.supportContainer{
    max-width: 424px;
    background: #FFFFFF;
    box-shadow: 10px 20px 100px 10px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    position: relative;
    padding: 40px;
    padding-bottom: 20px;
    transform: translateY(8%);
    /*animation: movemessagewindow 8s linear infinite;*/
}

.notifyAboutSupport{
    padding: 20px;
    position: absolute;
    top: -60px;
    z-index: 2;
    left: -20px;
    width: 204px;
    height: 130px;
    background: #FFFFFF;
    box-shadow: 10px 20px 100px 10px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    opacity: 1;
   /* animation:movemessagenotify 8s linear infinite ;*/
}

.notifyAboutSupport p{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 140%;
    letter-spacing: -0.04em;
    color: #0D0D0D;
    margin-top: 12px;
}

.sendBackground{
    width: 71px;
    height: 71px;
    background-color: #7FD99F;
    border-radius: 35px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: -60px;
    right: 45px;
    opacity: 1;
    z-index: 1;
   /* animation:movemessagenotify 8s linear infinite ;*/
}


.message{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.messageContext{
    display: flex;
}

.message .time{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 8.79551px;
    line-height: 160%;
    letter-spacing: -0.02em;
    color: #0D0D0D;
    opacity: 0.5;
    
}
.message .time.client{
    align-self: flex-end;
}

.message .time.consultant{
    align-self: flex-start;
}
.messageContext img{
    border-radius: 35px;
    max-width: 63px;
    height: 63px;
}
.messageContext.client img{
    margin-right: 14px;
}
.messageContext.consultant img{
    margin-left: 14px;
    order: 2;
}
.messageText{
    padding: 14px 21px;
    width: 100%;
}
.messageText.client{
    background: #7FD99F;
    border-radius: 0px 10.5546px 10.5546px 10.5546px;
}
.messageText.consultant{
    background: #0D0D0D;
    border-radius: 12px 0px 12px 12px;
}
.messageText p{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 140%;
    letter-spacing: -0.02em;
}
.messageText.client p{
    color: #0D0D0D;
}
.messageText.consultant p{
color: white;
}

/*div.message:nth-child(2){
    opacity: 0;
    animation: movetwo 8s linear infinite;
}
div.message:nth-child(3){
    opacity: 0;
    animation: movethree 8s linear infinite;
}
div.message:nth-child(4){
    opacity: 0;
    animation: movefour 8s linear infinite;
}*/

@keyframes movemessagewindow { 
    0%{transform:translateY(0%); }
    15%{transform:translateY(8%); }
    25%{transform: translateY(8%); }
    50%{transform: translateY(8%); }
    60%{transform: translateY(8%); }
    75%{transform: translateY(8%); }
    90%{transform:translateY(0%); }
    100%{transform:translateY(0%); }
}

@keyframes movemessagenotify { 
      
   0%{transform:translateY(40%); opacity: 0;}
    15%{transform:translateY(0%); opacity: 1; }
    25%{transform: translateY(0%); opacity: 1;}
    50%{transform: translateY(0%); opacity: 1;}
    60%{transform: translateY(0%); opacity: 1;}
    75%{transform: translateY(0%); opacity: 1;}
    90%{transform: translateY(0%); opacity: 1;}
    100%{transform:translateY(0%); opacity: 1;}

}

@keyframes movetwo { 
    0%{transform:translateY(40%); opacity: 0;}
    15%{transform:translateY(40%); opacity: 0; }
    25%{transform: translateY(0%); opacity: 1;}
    50%{transform: translateY(0%); opacity: 1;}
    60%{transform: translateY(0%); opacity: 1;}
    75%{transform: translateY(0%); opacity: 1;}
    90%{transform: translateY(20%); opacity: 0;}
    100%{transform:translateY(20%); opacity: 0;}
}

@keyframes movethree { 
    0%{transform:translateY(40%); opacity: 0;}
    15%{transform:translateY(40%); opacity: 0; }
    25%{transform: translateY(40%); opacity: 0;}
    50%{transform: translateY(0%); opacity: 1;}
    60%{transform: translateY(0%); opacity: 1;}
    75%{transform: translateY(0%); opacity: 1;}
    90%{transform: translateY(20%); opacity: 0;}
    100%{transform:translateY(20%); opacity: 0;}
}

@keyframes movefour { 
    0%{transform:translateY(40%); opacity: 0;}
    15%{transform:translateY(40%); opacity: 0; }
    25%{transform: translateY(40%); opacity: 0;}
    50%{transform: translateY(40%); opacity: 0;}
    60%{transform: translateY(0%); opacity: 1;}
    75%{transform: translateY(0%); opacity: 1;}
    90%{transform: translateY(20%); opacity: 0;}
    100%{transform:translateY(20%); opacity: 0;}
}




.cookieNotify{
    width:80vw !important;
    left:10vw !important;
    bottom: 10px !important; 
    box-shadow: 10px 20px 100px 10px rgba(0, 0, 0, 0.3);
    background: white !important;  
    color:black !important;
    border-radius:20px;
    padding:0px 30px ;
    align-items: center !important;
    z-index: 8888 !important;
}
.cookieContent{
    flex: 1 0 60% !important;
}
.cookieContent span{
    font-size:17px;
    font-family: 'Inter';
    font-style: normal; 
    font-weight: 500; 
}

.cookieContent p{
    font-size:15px;
    font-family: 'Inter';
    font-style: normal; 
    font-weight: 300; 
    padding-top: 5px;
}

.btnCookie{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.btnAccept{
    order: 1;
    border:1px solid #0D0D0D !important; 
    background: #0D0D0D !important;
    color: #F1F1F1 !important; 
    font-size:14px; 
    font-family: 'Inter';
    font-style: normal; 
    font-weight: 500; 
    border-radius: 12px !important; 
    padding: 14px 23px !important; 
    width:200px;
    margin: unset !important;
}
.btnDecline{
    order: 2;
    border:1px solid #0D0D0D !important; 
    background: #F2F5F3 !important;
    color: #0D0D0D !important;  
    font-size:14px; 
    font-family: 'Inter';
    font-style: normal; 
    font-weight: 500; 
    border-radius: 12px !important; 
    padding: 14px 23px !important; 
    width:200px;
    margin: unset !important;
}
.backgroundForCookie, .settingsCookie{
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.7);
    position: fixed;
    top:0;
    left: 0;
    z-index: 5555;
    align-items: center;
    justify-content: center;
    
}
.backgroundForCookie{
    display: block;
}
.settingsCookie{
    z-index: 9999;
}

.settingsList{
    width: 50vw;
    margin: 50px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: white;
    border-radius: 20px;
    padding: 16px 32px;
    box-shadow: 10px 20px 100px 10px rgba(0, 0, 0, 0.3);
  }
  .settingsList h2{
    font-family: 'Inter';
    font-style: normal; 
    font-weight: 500; 
    font-size: 20px;
    padding-bottom: 10px;
  }

  .settingsList .headerSettings{
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-bottom: 0.5px solid lightgray;
    padding-bottom: 10px;
  }
  .settingsList .headerSettings p, .settingsList .headerSettings p a{
    font-family: 'Inter';
    font-style: normal; 
    font-weight: 400; 
    font-size: 15px;
    color: #687278;
  }
  .settingsList .headerSettings .closeSettings{
    padding: 0;
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
    text-align: center;
    border: unset;
    border-radius: 4px;
    background-color: #eaeff2;
    transition: background-color .25s ease!important;
  }
  .settingsList .headerSettings .closeSettings:hover{
    background-color:#d8e0e6;
  }
  .settingsList .headerSettings .closeSettings::before{
    content: '';
    position: absolute;
    left: 20px;
    top: 10px;
    height: 20px;
    width: 1.5px;
    background: #444d53;
    transform: rotate(45deg);
    margin: 0 auto;
  }
  .settingsList .headerSettings .closeSettings::after{
    content: '';
    position: absolute;
    left: 20px;
    top: 10px;
    height: 20px;
    width: 1.5px;
    background: #444d53;
    transform: rotate(-45deg);
    margin: 0 auto;
  }
  .settingsList .mainSettings{
    width: 100%;
    padding-top: 20px;
    padding-bottom: 10px;
  }
  .settingsList .mainSettings p{
    font-family: 'Inter';
    font-style: normal; 
    font-weight: 400; 
    font-size: 17px;
    padding-bottom: 20px;
  }
  .settingsList .mainSettings .selectWrapper{
    width: 100%;
    display: flex;
    padding: 15px;
    border: 1px solid black;
    background: white;
    border-radius: 10px;
    margin-top: 10px;
  }
  .settingsList .mainSettings .selectWrapper select{
    flex: 0 1 90%;
    direction: rtl;
    border: unset;
    outline: unset;
    background: white;
    direction: rtl;
    font-size: 15px;
    font-weight: 400;
    padding-left: 10px;
  }
  .settingsList .mainSettings .selectWrapper label{
    flex: 0 1 10%;
}
  .settingsList .mainSettings .selectWrapper select option{
    direction:ltr;
    font-size: 15px;
    font-weight: 400;
  }
  .MuiSwitch-root.settingSwitch{
    width: 75px;
  }
  .MuiSwitch-root.settingSwitch .MuiSwitch-switchBase{
    left: 0px !important;
    right: 26px !important;
  }
  .MuiSwitch-root.settingSwitch .MuiSwitch-switchBase.Mui-checked{
    right: 13px !important;
  }
  .MuiSwitch-root.settingSwitch .MuiSwitch-track{
        width: 55px !important;
  }
  .MuiSwitch-root.settingSwitch .MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track{
    background-color: #242424 !important;
  }
  .settingsList .footerSettings{
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 0.5px solid lightgray;
  }
  .settingsList .footerSettings .controlBtn{
    display: flex;
    gap: 10px;
  }

  .settingsList .footerSettings button{
    width: 130px;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
 
@media screen and (max-width: 1200px) {
    .customizeColor{
        right: -45px;
    }
}
@media screen and (max-width: 1110px) {
    .sendBackground{
        right: 35px;
    }
}
@media screen and (max-width: 1050px) {
    .sendBackground{
        right: 15px;
    }
}
@media screen and (max-width: 991px) {
    #secure .right{
        margin-top: 40px;
        margin-bottom: 40px;
    }
    #features {
        padding-top: 130px;
    }
    #support .right{
        margin-top: 125px;
    }
    .features__grid-card{
        width: calc( 100% / 1);
    }
    .site__container.grid{
        justify-content: center;
    }
    .site__container.grid .left,  .site__container.grid .right{
        width: 100%;
      /*  max-width: 100%;*/
        border: none;
        margin-top: 20px;
    } 
    .site__footer .top{
        padding-bottom: 0;
        padding-top: 0;
    }
    footer .bottom .left{
        margin-bottom: 20px;
    }
    #hero .top h1 {
        font-size: 40px;
    }

    .notfound-box .image__container{
        margin-bottom: 51px;
    }
    .sendBackground{
        right: 45px;
    }
}


.contact__form--wrapper::before {
    display: none;
}

@media screen  and (max-width: 945px){
    .footerSettings{
        flex-direction: column;
        row-gap: 10px;
        align-items: center;
    }
    .footerSettings .controlBtn{
        flex-direction: column;
    }
}


@media screen and (max-width: 768px) {
    section h2 {
        margin-bottom: 40px;
        font-size: 25px;
    }
    #features{
        padding-bottom: 70px;
        padding-top: 50px;
    }
    #hero{
        padding-bottom: 100px;
    }
    .features__grid-card-content{
        padding: 20px;
    }
    .features__grid-card-content .icon{
        margin-bottom: 20px;
    }
    .features__grid-card-content h3{
        font-size: 18px;
    }
    .features__grid-card-content p {
        font-size: 14px;
    }
    .contact__form {
        padding-left: 20px;
        padding-right: 20px;
    }
    .typical__padding{
        padding-left: 30px;
        padding-right: 30px;
    }

    #hero {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .typical__section {
      /*  padding-top: 60px;
         padding-bottom: 80px; */
    }
    .contact__form{
        margin: 0 auto;
    }
    .contact__form  legend {
            font-size: 25px;
            width: 100%;
            margin: 0 auto;
            margin-bottom: 40px;
            max-width: 260px;
    }
    .contact__form .form__row{
        width: 100%;
        max-width: 260px;
        flex-direction: column;
        margin: 0 auto;
    }
    .contact__form .form__row button{
        width: 100%;
    }

    .contact__form--wrapper{
        padding:  40px 0 0 0;
        min-height: 300px;
    }

    .contact__form--wrapper {
        display: flex;
        flex-direction: column;
    }
    .contact__form--wrapper  form{
        order: 1
    }
    .contact__form--wrapper::before{
        content: "";
        width: 100%;
        display: block;
        order: 2;
        height: 300px;
        margin-top: 40px;
        background: url(../images/contactform-mobile.svg) 0 0 repeat;
        background-size: cover;
    }

    .contact__form--wrapper::after{
      display: none;
    }
}
@media screen  and (max-width: 700px){
    .settingsList{
       width: 80vw;
    }
}
@media screen and (max-width: 600px) {
#customized-page .right{
max-width: 330px;
}
#customized-page .right .cardContainer{
    height: 155px;
}
.right .fraud-score__wrapper img, .right .decision__wrapper img {
    width: 30px;
}
.right .fraud-score__wrapper p, .right .decision__wrapper p{
    font-size: 12px;
}
.right .scan__wrapper picture{
    border-radius: 15px;
    min-width: 55px;
    height: 55px;
}
.right .scan__wrapper img{
    width: 25px;
}
.right .fraud-score__wrapper, .right .decision__wrapper{
    height: 40px;
    max-width: 150px;
    border-radius: 7px;
    box-shadow: 11.6667px 23.3333px 116.667px -8px rgb(0 0 0 / 30%);

}
.right .fraud-score__wrapper{
    bottom: 20px;
}
.right .decision__wrapper{
    bottom: -25px;
}
}
@media screen and (max-width: 560px) {
    #hero {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 60px;
    }
    #alternative-methods{
        padding-bottom: 70px;
    }
    .footer__nav--list li {
        width: 100%;
        max-width: 100%;
    }
    .sendBackground {
        right: 25px;
    }

}
@media screen and (max-width: 479px){
    #support .right {
        margin-top: 85px;
    }
.right .fraud-score__wrapper{
    bottom: 0px;
}
.right .decision__wrapper{
    bottom: -45px;
}
.right .fraud-score__wrapper img, .right .decision__wrapper img{
    width: 15px;
}
.right .fraud-score__wrapper p, .right .decision__wrapper p {
    font-size: 10px;
}
.right .fraud-score__wrapper, .right .decision__wrapper{
    height: 25px;
    max-width: 90px;
    border-radius: 5px;
    box-shadow: 11.6667px 23.3333px 116.667px 5px rgb(0 0 0 / 30%);
}
.right .fraud-score__wrapper{
    bottom: 10px;
}
.right .decision__wrapper {
    bottom: -20px;
}

.right .scan__wrapper picture {
    border-radius: 10px;
    min-width: 40px;
    height: 40px;
}
.right .scan__wrapper img {
    width: 20px;
}
.right .cloud__wrapper{
    bottom: -3px;
}
.right .cloud__wrapper picture{
    border-radius: 6px;
    min-width: 25px;
    height: 25px;
}
.right .cloud__wrapper img {
    width: 15px;
}
.sendBackground {
    right: -5px;
    width: 45px;
    height: 45px;
}
.notifyAboutSupport{
    top: -25px;
    width: 140px;
    height: unset;
    padding: 15px;
}
.notifyAboutSupport img{
    width: 20px;
    height: 20px;
}
.notifyAboutSupport p{
    font-size: 14px;
}
.customizeFont{
    top: -35px;
    left: -20px;
}
.customizeColor {
    right: -20px;
}
#customized-page .right .cardContainer {
    height: 140px;
}
.customizeWrapper{
    max-width: 280px;
    padding-left: 20px;
    padding-right: 20px;
}

    .settingsList{
       width: 98vw;
       padding: 16px 10px;
    }

}