body
{
    font-family: 'Poppins', sans-serif  !important;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
/*.curve-1 {*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    overflow: hidden;*/
/*    line-height: 0;*/
/*    transform: rotate(180deg);*/
/*}*/

/*.curve-1 svg {*/
/*    position: relative;*/
/*    display: block;*/
/*    width: calc(140% + 1.3px);*/
/*    height: 90px;*/
/*}*/

/*.curve-1 .shape-fill {*/
/*    fill: #FFFFFF;*/
/*}*/

/** For tablet devices **/
/*@media (min-width: 768px) and (max-width: 1023px) {*/
/*    .curve-1 svg {*/
/*        width: calc(140% + 1.3px);*/
/*        height: 82px;*/
/*    }*/
/*}*/

/** For mobile devices **/
/*@media (max-width: 767px) {*/
/*    .curve-1 svg {*/
/*        width: calc(140% + 1.3px);*/
/*        height: 160px;*/
/*    }*/
/*}*/
#file {
    display: inline-block;
    width: 100%;
    padding: 120px 0 0 0;
    height: 50px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 20px;
    background-size: 60px 60px;
}

.spa
{
    background-color: white;
    width: 30px;
    height: 30px;
    padding: 5px 1px 0 3px;
    border-radius: 30px;
    text-align: center;
    font-size: 20px;

}
#viewcart
{
    display: flex;
    justify-content: center;
    align-content: center;

}
#viewcart button
{

    outline: none;
    position:fixed;
    bottom: 0;
    width: 85%;
}


.view
{
    font-size: 18px;
    padding: 20px;
}
.view i
{
    /*background-color: whitesmoke;*/
    border-radius: 5px;
    margin-top: 15px;
    padding:0px 5px 0px 5px;
    color:white;
    padding: 5px;

}


.subtitle{
    width: 200px;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden !important;
    white-space: nowrap;
}

@media only screen and (max-width: 425px) {

    .subtitle {
        width: 100px;
    }
    .head{
        font-size: 30px;
    }
}
/*.ww-45 p*/
/*{*/
/*    line-height:20px;*/
/*}*/


@media only screen and (max-width: 768px) {
    .test
    {
        flex-wrap: wrap;

    }
    .ww-45{
        width: 50%;
    }
    .banner{
        flex-direction: column-reverse;

    }

}


@media only screen and (min-width: 960px) {
    .card-button {
        margin-left: 40px;
    }
    .scan {
        padding: 0 5em 1.5em 8em;
    }
}

@media only screen and (min-width: 1440px) {
    .card-button {
        margin-left: 10px;
    }
}

@media only screen and (min-width: 2000px) {
    .card-button {
        margin-left: 10px;
    }
}

@media only screen and (max-device-width: 480px) {
    .card-button {
        margin-left: 15px;
    }
    .scan {
        padding: 0 5em 1.5em 5em;
    }
}

@media only screen and (device-width: 768px) {
    .card-button {
        margin-left: 10px;
    }
}


/* different techniques for iPad screening */

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
    .card-button {
        margin-left: 40px;
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
    .card-button {
        margin-left: 10px;
    }
    .scan {
        padding: 0 5em 1.5em 5em;
    }
}

div#social-links {
    margin: 0 auto;
    max-width: 500px;
    text-align: center;
}

div#social-links ul li {
    display: inline-block;
}

div#social-links ul li a {
    padding: 5px;
    border: 1px solid #ccc;
    margin: 5px;
    font-size: 20px;
    border-radius: 50%;
}

.custom-menu {
    position: relative;
    z-index: 10;
    position: fixed;
    width: 100%;
    top:0;
}

.lang-menu {
    color: #ffffff;
    width: 75px;
}

.lang-menu:hover {
    background-color: #111827;
    color: #fff;
}

#journal-scroll::-webkit-scrollbar {
    width: 4px;
    cursor: pointer;
    /*background-color: rgba(229, 231, 235, var(--bg-opacity));*/
}

#journal-scroll::-webkit-scrollbar-track {
    background-color: rgba(229, 231, 235, var(--bg-opacity));
    cursor: pointer;
    /*background: red;*/
}

#journal-scroll::-webkit-scrollbar-thumb {
    cursor: pointer;
    background-color: #a0aec0;
    /*outline: 1px solid slategrey;*/
}

img.profile {
    /*margin-left: 105px;*/
    display: flex;
    margin: 0 auto;
    justify-content: center;
}


.qr-code-download {
    margin: 0 5.8em;
}



.head-border
{
    height: 4px;
    width: 100%;
    /* background: rgb(33,148,226);
    background: linear-gradient(90deg, rgba(33,148,226,1) 0%, rgba(150,65,166,1) 75%); */
    background: rgb(227,30,36);
    background: linear-gradient(90deg, rgba(227,30,36,0.989233193277311) 0%, rgba(29,56,153,1) 100%);
    position: fixed;
    top:0;
    z-index:15;
}

.theme-gradient
{
    /* background: rgb(33,148,226);
    background: linear-gradient(90deg, rgba(33,148,226,1) 0%, rgba(150,65,166,1) 75%); */
    background: rgb(227,30,36);
    background: linear-gradient(90deg, rgba(227,30,36,0.7567401960784313) 0%, rgba(29,56,153,0.7091211484593838) 100%);
}
.theme-text-gradient
{
    /* background: #2194E2;
    background: -webkit-linear-gradient(to right, #2194E2 30%, #9641A6 40%);
    background: -moz-linear-gradient(to right, #2194E2 30%, #9641A6 40%);
    background: linear-gradient(to right, #2194E2 30%, #9641A6 40%); */
    background: rgb(227,30,36);
    background: linear-gradient(90deg, rgba(227,30,36,0.7567401960784313) 0%, rgba(29,56,153,0.7091211484593838) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.theme-border-gradient{
    border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}
.icon-color
 {
    color: #1D3899;
    position: absolute;
    top: 25px;
    right: 25px;
 }
.prize-gradient
{
    /* background: rgb(150,65,166);
    background: linear-gradient(355deg, rgba(150,65,166,0.8239670868347339) 15%, rgba(33,148,226,0.7679446778711485) 60%); */
    background: rgb(227,30,36);
    background: linear-gradient(0deg, rgba(227,30,36,0.6138830532212884) 40%, rgba(29,56,153,0.6166841736694677) 60%);
    writing-mode: vertical-rl;
    transform: rotate(180deg)
}
.prize-gradient
{
    display: flex;
    justify-content: center;
    align-content: center;
    width:20%;
    height:200px;
}
.prize-gradient h4
{
    right: 15px;
}
.banner-gradient
{
    /* background: rgb(150,65,166);
    background: linear-gradient(279deg, rgba(150,65,166,0.2049194677871149) 20%, rgba(33,148,226,0.15449929971988796) 50%); */
    background: rgb(227,30,36);
    background: linear-gradient(90deg, rgba(227,30,36,0.3309698879551821) 0%, rgba(29,56,153,0.3701855742296919) 100%);
}
.bx
{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /*border: 3px solid;*/
    background: linear-gradient(to right, #2194E2, #9641A6);
    border-radius: 10px;
    /*border-image: linear-gradient(to right, #2194E2, #9641A6) 30 30 round;*/
    /*border-image-slice: 1;*/
    /*-webkit-border-radius: 10px;*/
}
.howItWork
{
    width:33.625rem;
    height: 10.938rem;
    border: 1px #2194E27A solid;
}
.howItWork-gradient
{
    width:33.625rem;
    height: 10.938rem;
    border: 1px #2194E27A solid;
}
.howItWork:hover
{
    /* background: rgb(33,148,226); */
    /* background: linear-gradient(90deg, rgba(33,148,226,1) 0%, rgba(150,65,166,1) 75%); */
  background: rgb(227,30,36);
    background: linear-gradient(90deg, rgba(227,30,36,0.7567401960784313) 0%, rgba(29,56,153,0.7091211484593838) 100%);
}
.howItWork:hover .howItWork-text h4
{

    color:white !important;
    -webkit-text-fill-color : white !important;
}
.howItWork:hover .howItWork-text p
{
    color: white;
}

.howItWork-gradient:hover
{
 background: white;
}
.howItWork-gradient:hover .howItWork-text-gradient h4
{
    /* background: #2194E2; */
    /* background: -webkit-linear-gradient(to right, #2194E2 30%, #9641A6 40%);
    background: -moz-linear-gradient(to right, #2194E2 30%, #9641A6 40%);
    background: linear-gradient(to right, #2194E2 30%, #9641A6 40%); */
    background: rgb(227,30,36);
    background: linear-gradient(90deg, rgba(227,30,36,0.7567401960784313) 0%, rgba(29,56,153,0.7091211484593838) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.howItWork-gradient:hover .howItWork-text-gradient p
{
    color: gray;
}

whytijarath-img img
{
    position:absolute;
    left:60px;
}
.signup
{
    padding: 2px;
}
#how-it-works
{
    background-color: #F7FCFF;
}
.whytijarath-h1
{
    /* background: #2194E2;
    background: -webkit-linear-gradient(to left, #2194E2 75%, #9641A6 100%);
    background: -moz-linear-gradient(to left, #2194E2 75%, #9641A6 100%);
    background: linear-gradient(to left, #2194E2 75%, #9641A6 100%); */
    background: rgb(227,30,36);
background: linear-gradient(80deg, rgba(227,30,36,0.773546918767507) 10%, rgba(29,56,153,0.7511379551820728) 30%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media only screen and (min-width: 1024px) {
    .w-400{
        width: 400px;
    }
    .w-525{
        width:525px;
    }
}
@media only screen and (max-width: 481px) {
    .icon-color
    {
        color: #1D3899;
        position: absolute;
        top: 40px;
        right: 25px;
    }
    .whytijarath-slide
    {
        max-width:100vh;
        max-height: 50px;
        overflow-x: scroll;
        overflow-y: hidden;
        justify-content:normal !important;
    }
    .whytijarath-btn
    {
        padding-right: 0;
    }
    .whytijarath-btn button
    {
        width:200px;
    }
    .howItWork
    {
        flex-direction: column;
        height: 100%;
        width: 100%;
    }
    .howItWork-gradient
    {
        flex-direction: column;
        height: 100%;
        width: 100%;
    }
    .prize
    {
        width: 100%;
    }
    .prize-box
    {
        width: 100%;
    }
    #prize-box
    {
        flex-direction: column !important;
        width: 100% !important;
    }
    .prize-gradient
    {
        writing-mode: initial;
        transform: none;
        width:80%!important;
        height: 40px !important;
        border-radius: 10px 10px 0 0 !important;
        margin-left:auto;
        margin-right: auto;
    }
    .prize-gradient h4
    {
        padding: 5px;
        font-size: 15px ;
    }
    .howItWork-text-gradient
    {
        width: 16rem;
    }
    .howItWork-text
    {
        width: 16rem;
    }
    .prize-gradient
    {
        padding: 5px;
    }
    .prize-gradient h4
    {
        right:auto !important;
        left: auto !important;
    }
}

@media only screen and (max-width: 784px) {
    .whytijarath-img
    {
     display: none;
    }

    .dash
    {
        width: 80%;
    }
    .whytijarath
    {
        width: 100%;
    }
    .whytijarath-icon
    {
        justify-content: space-evenly;
    }
    .whytijarath-slide
    {
        justify-content: space-evenly;
    }
    .signup
    {
        margin-right: auto;
        margin-left: auto;
    }
    .navi
    {
        position: static;
    }
}

@media only screen and (max-width: 375px) {
    .mail-logo
    {
        margin-left: 6rem;
    }
}
@media only screen and (max-width: 320px) {
    .signup
    {
        width: 100%;
    }
    .howItWork-text
    {
        width: 12rem;
    }
    .howItWork-text-gradient
    {
        width: 12rem;
    }
    .signupin
    {
        width: 100%;
    }
    .banner-h1
    {
        font-size: 29px;
    }
    .mail-logo
    {
        margin-left: 5rem;
    }
}