@font-face {
    font-family: 'Quicksand-medium';
    src: url(./meduim/Quicksand-Medium.woff);
    src: url(./meduim/Quicksand-Medium.woff);
}

@font-face {
    font-family: 'Quicksand-bold';
    src: url(./Bold/Quicksand-Bold.woff);
}

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
body,
h1,
h2,
h3,
h4,
h5,
h6,
a,
div,
p,
button,
span,
label,
input :not(.LoginInput) {
    font-family: 'Quicksand-medium' !important;
    color: #000;
    font-weight: 500 !important;
}

b {
    font-family: 'Quicksand-medium' !important;
    color: #000;
}

body.bold,
h1.bold,
h2.bold,
h3.bold,
h4.bold,
h5.bold,
h6.bold,
strong,
p.bold,
label.bold,
span.bold,
a.bold,
button.bold,
input.bold,
canvas {
    font-family: 'Quicksand-bold' !important;
}

body {
    padding: 0;
    margin: 0;
    /* background-image: url(./SVG/u2.svg);
    background-position: center !important;
    background-size: 90% !important; */
    background-repeat: no-repeat;
    width: 100% !important;
    height: 100% !important;
}

.font-size-38 {
    font-size: 38px;
}

.font-size-36 {
    font-size: 36px;
}

.font-size-15 {
    font-size: 15px;
}

.padding-bottom-125 {
    padding-bottom: 120px;
}

.font-size-10 {
    font-size: 10px;
}

.border-2B6FF3 {
    border: 1px solid #2B6FF3;
}

.background-fff {
    background-color: #fff;
}

.padding-left-9 {
    padding-left: 9px;
}

.btn-product-info {
    width: 114px;
    height: 25px;
    border-radius: 12px;
}

td::-webkit-scrollbar,
div::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0.25em;
    margin-left: 10px;
}

td::-webkit-scrollbar-track,
div::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    margin-top: 50px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

td::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background-color: #3576f5;
    outline: 0px solid slategrey;
}

.border-E4E7F2 {
    /* border: 1px solid #E4E7F2 ; */
}

.background-E4E7F2 {
    background-color: #F8FAFC;
}

.circle-div {
    height: 46px;
    width: 46px;
    border-radius: 50%;
}

.margin-top-43 {
    margin-top: 43px;
}

.white-space-nowrap {
    white-space: nowrap;
}

.border-raduis-19-0 {
    /* border-radius: 19px 19px 0px 0px */
}

.margin-left-26 {
    cursor: pointer;
    margin-left: 26px;
}

.font-size-16 {
    font-size: 16px;
    direction: ltr !important;
}

.font-size-45 {
    font-size: 45px;
}

.padding-23-101 {
    padding: 23px 101px;
}

.font-size-13 {
    font-size: 13px;
}

.color-fff {
    color: #fff;
}

.font-size-23 {
    font-size: 23px;
}

.font-size-12 {
    font-size: 12px;
}

.text-align-center {
    text-align: center;
}

.div-mena {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    height: 209px;
    width: 191px;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 34px;
    cursor: pointer;
}

.margin-top-23 {
    margin-top: 23px;
}

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

.margin-left-6 {
    margin-left: 6px;
}

.font-size-24 {
    font-size: 24px;
}

.align-items-center {
    align-items: center;
}

.margin-top-19 {
    margin-top: 19px;
}

.width-79 {
    width: 79%;
}

.margin-top-5 {
    margin-top: 5px
}

.justify-content-center {
    justify-content: center;
}

.flex-column {
    flex-direction: column !important
}

.width-88 {
    width: 88%;
}

.margin-top-43 {
    margin-top: 43px;
}

.padding-left-91 {
    padding-left: 91px;
}

.background-3576F5 {
    background-color: #3576F5;
}

.padding-right-69 {
    padding-right: 69px;
}

.padding-right-81 {
    padding-right: 81px;
}

.line-height-41 {
    line-height: 41px;
}

.padding-top-26 {
    padding-top: 26px;
}

.margin-top-15 {
    margin-top: 15px;
}

.margin-top-34 {
    margin-top: 34px
}

.margin-top-63 {
    margin-top: 63px;
}

.font-size-20 {
    font-size: 20px;
}

.flex-wrap {
    flex-wrap: wrap;
}

.w-40 {
    width: 40%;
}

.w-20 {
    width: 20%;
}

@media only screen and (max-width: 1208px) {
    .w-100-res {
        width: 100%;
    }
    .w-20-res {
        width: 100%!important;
    }
    .margin-top-40-res {
        margin-top: 40px;
    }
    .margin-top-30-res {
        margin-top: 30px;
    }
    .padding-right-0-res {
        padding-right: 0 !important;
    }
}

@media only screen and (min-width: 2000px) {
    .padding-bottom-197-res {
        padding-bottom: 197px
    }
}

@media only screen and (max-width: 1203px) {
    body {
        background-image: none !important;
    }
}

@media only screen and (max-width: 1324px) and (min-width: 1210px) {
    .padding-bottom-197-res {
        padding-bottom: 51px !important;
    }
}

.body-div {
    /* height: 100vh;
width: 100vw; */
    position: absolute;
    z-index: -100;
}

.img-body {
    /* margin-top: 50vh;
    height: 50vh;
    width: 100vw;  */
    position: fixed;
    width: 100vw;
    bottom: 0px;
    left: 0px;
}

.body-body-div {
    /* padding:1%;
 border-radius: 10px; */
}

.body-html {
    /* background-image: url('svg/u2.png');
    background-position:left bottom;
    background-position-x: 0px;
    background-color: #5f5f5f;
    height: fit-content !important; */
}

.margin-top-8 {
    margin-top: 8px;
}

.flip-img {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
.padding-right-17{
    padding-right:17px;
}
.whats_new2{
    cursor: pointer; 
    padding: 4px 16px;
    color: white;  
   position: absolute;
   top:23px;
   text-decoration: none;
}

.animationWhatsNew a {
    
    color: #fff;
    width: 109px;
    text-decoration: none;
    overflow: hidden;
    text-align: center;
}
.animationWhatsNew a:hover {
    
    font-size: 12px;
}
 
.animationWhatsNew a:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    width: 99%;
    background: rgba(255,255,255,0.05);
}
 
.animationWhatsNew a span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #EAF1FE, rgba(255, 255, 255, 0.3));

    animation: animate1 2s linear infinite;
}
 
@keyframes animate1 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
 
.animationWhatsNew a span:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, #EAF1FE, rgba(255, 255, 255, 0.3));
    animation: animate2 2s linear infinite;
    animation-delay: 1s;
}
 
@keyframes animate2 {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}
 
.animationWhatsNew a span:nth-child(3) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to left, #EAF1FE, rgba(255, 255, 255, 0.3));
    animation: animate3 2s linear infinite;
}
 
@keyframes animate3 {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
 
.animationWhatsNew a span:nth-child(4) {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to top, #EAF1FE, rgba(255, 255, 255, 0.3));
    animation: animate4 2s linear infinite;
    animation-delay: 1s;
}
 
@keyframes animate4 {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}