* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.5em;
    text-decoration: none;
    list-style-type: none;
}

body {
    font-family: 'Open Sans', Verdana, sans-serif;
    font-style: normal;
    font-weight: 400;
    background-color: #DBDBDB;
    font-size: 13px;
}

p {
    color: #000000;
    line-height: 1.5em;
    font-size: 13px;
}

a,
p,
span,
strong,
li,
pre,
button,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Open Sans', Verdana, sans-serif;

}

/******* Header Nav Css Begins ********/

.navbar {
    background-image: linear-gradient(to right, #CF7500, #F0A500);
    display: flex;
    padding: 0 1em;
    height: 80px;
    position: fixed;
    width: 100%;
    right: 0;
    left: 0;
    top: 30px;
    z-index: 10000;
}

.navbar .navitem {
    display: flex;
}

.notice {
    display: flex;
    height: 30px;
    background-color: #000000;
    position: fixed;
    width: 100%;
    right: 0;
    left: 0;
    top: 0;
    z-index: 1000;
    align-items: center;
}



.notice p {
    color: #ffffff;
    height: 100%;
}

.noticesb {
    height: 100%;
    width: 65%;
    overflow: hidden;
    position: relative;
    margin: 0 0.6em 0 0;
    color: white;
}

.noticesa {
    width: 35%;
}

.noticesa p {
    margin: 0 0.5em;
    color: white;
}

.notice p a {
    color: #F0A500;
    color: white;
    animation: glow .5s linear infinite;

}

.navitem {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 100;

}

.noticesb p {
    display: flex;
    flex-grow: 2;
    color: #ffffff;
    position: relative;
    width: 100%;
    white-space: nowrap;
    height: 100%;
    margin: 0;
    padding: 0;
    right: 0;
    line-height: 30px;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    animation: scrollText 15s linear infinite;
    transition: .2s all ease-in-out;
    visibility: visible;
    opacity: 1;
}


.noticesbc {
    width: 70%;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.noticesbc p {
    font-size: 12px;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    display: inline-block;
    padding-left: 100%;
    animation: header-scroller 20s linear infinite;
    transition: .2s all ease-in-out;


}

.noticesbc:hover p {
    animation-play-state: paused;
}

@keyframes header-scroller {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}


.navitem {
    width: 65%;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.logo {
    width: 35%;
    display: flex;
    align-items: center;
}

.logo img {
    width: 12em;

}

.navdropdown {
    display: none;
    position: absolute;
    top: 60%;
    width: 8.5em;
    box-shadow: rgba(207, 117, 0, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    border-radius: 4px;
    background-color: #ffffff;
}


.navitem li a {
    color: #fff;
    justify-content: space-between;
}

.navitem a:hover {
    color: #222222;
    transition: .5s;
}


.navitem li:hover .navdropdown {
    display: block;
    margin-top: 4px;
    transition: .5s;
}

.navdropdown li:not(:nth-last-child(1)) {
    border-bottom: .5px solid #222222;
}

.navitem .nada::after {
    content: '';
    display: inline-block;
    margin-left: .5em;
    vertical-align: middle;
    border-top: .3em solid #fff;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
}

.navdropdown li a {
    display: block;
    color: #F0A500;
    text-align: left;
    color: #222222;
    padding: 0.9em 0.5em;
    width: 100%;
}

.navdropdown li a::not(last-child) {
    border-bottom: 1px solid #F0A500;
}

.navdropdown li a:hover {
    background-color: #222222;
    color: #F0A500;
    border-radius: 2px;
    transition: .5s;
}

#navbtn {
    display: none;
    transition: .5s all ease-in-out;
}

.trackicon {
    display: none;
}

.nav-auth-link {
    color: #fff;
    padding: 0.6em 1em;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
    background: linear-gradient(to right, #CF7500, #F0A500);
    color: #000;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.nav-auth-link:hover {
    background: #F0A500;
    color: #222;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}


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

    .navbtn {
        position: absolute;
        align-items: center;
        top: 50%;
        right: 1.5em;
        height: 2.5em;
        width: 2.5em;
        transform: translateY(-50%);
        transition: .5s all ease-in-out;
    }

    .navbar :checked~.navitem {
        bottom: 0;
        transition: .5s all ease-in-out;
    }

    .navbar :checked~.navbtn .icon:nth-child(1) {
        transform: translateY(10px) rotate(225deg);
    }

    .navbar :checked~.navbtn .icon:nth-child(2) {
        opacity: 0;
    }

    .navbar :checked~.navbtn .icon:nth-child(3) {
        transform: translateY(-10px) rotate(-225deg);
    }

    .navbar {
        position: fixed;
        width: 100%;
        right: 0;
        left: 0;
        top: 30px;
    }

    .icon {
        width: 2.5em;
        height: 4px;
        border-radius: 5px;
        background-color: #fff;
        margin: 6px 0;
        transition: .5s all ease-in-out;
    }

    .logo {
        /*margin-left: -0.9em;*/
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
    }

    .trackicon {
        display: block;
        border-radius: 50%;
        background-color: #F0A500;
        padding: 0.6em 0.7em;
        position: absolute;
        color: #f7f7f7;
        left: 0;
        transform: translateX(-0.3em);
        font-size: 15px;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        /*      box-shadow: rgba(255, 255, 255, 0.4) 0px 2px 4px, rgba(255, 255, 255, 0.3) 0px 7px 13px -3px, rgba(255, 255, 255, 0.2) 0px -3px 0px inset;
*/
    }

    .trackicon:hover {
        /*background-color: #f7f7f7;*/
        box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
        color: #CF7500;
        transition: .3s all ease-in-out;
    }

    .navitem {
        position: fixed;
        top: 110px;
        width: 100%;
        height: auto;
        z-index: 9;
        left: 0;
        right: 0;
        bottom: 100%;
        background-color: #000000;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        overflow: hidden;
        z-index: 9;
        transition: all .5s ease-in-out;
    }

    .navitem li a:hover {
        padding: 0.3em 1em;
        transform: scale(1.1);
        background-color: unset;
        color: #F0A500;

    }

    .navitem li:nth-child(3) {
        margin-bottom: 2em;
    }

    .navdropdown li:nth-child(3) {
        margin-bottom: unset;
    }

    .navdropdown {
        /*display: block;*/
        position: relative;
        top: unset;
        width: 100%;
        text-align: center;
        box-shadow: none;
        border-radius: unset;
        transition: .5s;
        color: #fff;
        width: unset;
        background-color: unset;

    }

    .navitem li:hover .navdropdown {
        display: block;
    }

    .navdropdown li a {
        color: #fff;
        text-align: center;
        border: none;
        border-radius: unset;
        margin: 0;
        width: 100%;
        padding: 0.6em 0.3em;
        width: 100%;

    }

    .navdropdown li {
        margin: 0;
        padding: 0;
    }

    .navdropdown li a:hover {
        background-color: unset;
        color: #F0A500;
        border-radius: unset;
        transition: .5s;
    }

    #navbtn:checked~.navitem li .navdropdown {
        display: block !important;
    }

}

@media screen and (min-width: 1120px) {
    .notice {
        padding: 0.2em 10em;
    }

    .noticesb p {
        animation: scrollText 20s linear infinite;
    }

    .navbar {
        padding: 0 10em;
    }


    .logo img {
        width: 15em;
    }
}



/******* Header Css Ends ********/



/******* Footer Css Begins ********/

footer {
    background-color: #000000;
    height: 100%;
    width: 100%;


}

.footerthree {
    background-color: #000000;
    text-align: center;
    padding: 0.5em 0.5em 3em;
    color: #f7f7f7;

}

.footerthree p {
    color: #f7f7f7;
}

.footerone {
    background-color: #CF7500;
    display: flex;
    padding: 2em 0.5em;
    align-items: center;
}

.footertwo {
    margin: 1em 0 0;
    /*background-color: #222222;*/
    /*background-color: #CF7500;*/
    padding: 1em 0.5em;

}

.footertwo i {
    color: #289672;
}

.footertwo h3 {
    width: fit-content;
    height: auto;
    padding-bottom: 1em;
    margin-bottom: 1em;
    color: #DBDBDB;
    border-bottom: 1px transparent;
    position: relative;
}

.footertwo h3::before {
    content: '';
    display: block;
    bottom: 0;
    width: 60%;
    position: absolute;
    z-index: 1;
    border-bottom: 2px solid #F0A500;
}

.footertwo li {
    color: #f7f7f7;
    white-space: pre-line;
    padding: 0.4em 0;
    margin: 0.6em 0;
}

.advise {
    margin: 1em 0;
}

.style-two {
    width: 100%;
    margin: 2em 0;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}

.style-one {
    width: 100%;
    margin: 2em 0;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}

.hh4 {
    padding: 1em;
    margin: 0.5em 0;
    color: #DBDBDB;
    width: 100%;
    background-color: rgba(240, 165, 0, 0.5);
}

.shippingtime i {
    color: #ffffff;
}

.shippingtime ul li {
    margin: 0.6em 0;
}

.shippingdates {
    margin: 0.8em 0;
}

.footerbuy {
    margin: 0.6em 0;
}

.footerbuy i {
    color: #fff;
}

.footerbuy ul li a {
    color: #F0A500;
    padding: 0 0.3em;
}

.footerbuy ul li {
    margin: 0.6em 0;
}

.footerbuy ul li a:hover {
    color: #CF7500;
    transform: scale(1.2);
    transition: all .3s ease-in-out;
}

.show {
    display: none !important;
}

.footerlinkswidget a {
    color: #F0A500;
}

.footerlinkswidget a:hover {
    color: #CF7500;
    transition: .2s all ease-in-out;
}

#username {
    background-color: #CF0A0A;
    padding: 0.8em;
    color: #ffffff;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 180px;
    display: none;
    border-radius: 18px 0 0 0;
    z-index: 9990;
}

#username p {
    color: #ffffff;
}

@media screen and (min-width: 1120px) {

    footer {
        padding: 6.5em 10em 0;
        height: 100%;
        width: 100%;
    }

    .footertwo {
        display: flex;
        width: 100%;
        flex-direction: row;
        flex-grow: 1;
        justify-content: space-evenly;
    }

    .footerwidget {
        width: 33% !important;
    }

    .style-two {
        display: none;
    }

    .show {
        display: block !important;
    }

    .advise,
    .shippingtime,
    .footerbuy {
        margin: 0;
        padding: 0;
        width: 36%;

    }

    .advise {
        margin: 0 3%;
    }

    .footerbuy {
        width: 20%;
    }


}

.volume {
    width: 75%;
    z-index: 1;
    overflow: hidden;

}

.volume h3 {
    margin-bottom: 0.3em;
    color: #f7f7f7;
    overflow: hidden;
}


.globe {
    margin-right: 2em;
    width: 20%;
    position: relative;
    display: flex;
    justify-content: center;
    justify-items: center;
}


.meter {
    width: 100%;
    border: 3px solid #E21818;
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    height: 40px;
    background-color: transparent;
    text-align: right;
    display: flex;
    /*justify-content: flex-end;*/
    align-items: center;

}

.meter::before {
    content: var(--stat-read);
    position: absolute;
    background-color: #E21818;
    top: 0;
    color: #fff;
    width: <?=$statread;
    ?>;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
}

.globe i {
    color: #f7f7f7;
    transition: .2s ease-in-out;
    animation: bounce 5s linear infinite;
}



@media screen and (min-width: 1120px) {

    footer {
        position: relative;
    }

    .footerone {
        position: absolute;
        top: -1em;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
        width: 70%;
        padding: 2.4em 0.5em;
        border-radius: 2px;
    }

    .volume h3 {
        margin-bottom: 0.3em;
        color: #f7f7f7;
        overflow: hidden;
    }

}





/******* Footer Css Ends ********/





/******* Home Css Begins ********/


.main {
    margin-top: 30px;
    margin-bottom: 3em;
}

.homeimage {
    width: 100%;
    height: 100%;
}

.homeimage img {
    width: 100%;
    height: 100%;
}

.home {
    padding: 0 0.5em;
}

.home-item h2 {
    width: fit-content;
    height: 100%;
    margin-bottom: 0.5em;
    position: relative;
    border-bottom: 4px solid transparent;
}

.home-item h2::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    transform: translateY(8px);
    height: 100%;
    width: 60%;
    border-bottom: 4px solid #F0A500;
}

.home-item p {
    margin-top: 1.5em;
    line-height: 25px;
}

.home-item ul {
    margin: 0.5em 0;
}

.home-item ul li {
    margin: 0.5em 0;
}

.home-item ul li a {
    color: #CF7500;
    font-weight: 500;
}

.home-item ul li a:hover {
    color: white;
    font-size: 15px;
    transition: .5 all ease-in-out;
}

.width {
    width: 100%;
}

.abit {
    margin-top: 0.9em;
}

.amore {
    margin-top: 2em;
}

.breadcrumb {
    display: block;
    color: red;
}

.headerimage {
    width: 100%;
    margin-top: 110px;
    position: relative;
    height: 100%;
}

.headerimage::before {
    content: '';
    background-color: #000000;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    opacity: 0.6;
}

.headerimage img {
    width: 100%;
    height: 100%;
}

.headerimage h2 {
    color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}



@media screen and (min-width: 1120px) {
    .main {
        margin-bottom: 8em;
        margin-left: 10.5em;
        margin-right: 10.5em;
        display: flex;
        position: relative;


    }

    .sidebar {
        display: block;
        flex: 0 0 30%;
        /*background-color: red;*/
        padding: 0 0 0 0.5em;
        position: relative;

    }


}


/******* Home Css Ends ********/





/******* Sidebar Css Begins ********/

.widget {
    border-radius: 4px;
    padding-bottom: 1em;
    margin-bottom: 2em;
    background-color: #DBDBDB;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.widget:first-child {
    margin-top: 2.5em;
}


.nolink {
    box-shadow: unset !important;
    border: 1px solid #f7f7f7;
    /*s*/
}

.widget h3 {
    text-align: left !important;
    padding: 0.5em;
    border-bottom: 1px solid #fff;
}

.widget a {
    margin: 1em 0.5em;
    background-color: #CF7500;
    color: #ffffff;
    padding: 0.5em;
    border-radius: 5%;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.widget p {
    line-height: 25px;
    padding: 0.5em;
}

.widget .perks {
    margin: 0 0.5em 1em;
    border: 1px solid #CF7500;

}

.widget .perks li {
    padding: 0.5em;
    border-bottom: 1px solid #CF7500;
}

.widget a:hover {
    border: none;
    /*color: #F0A500;*/
    background-color: #F0A500;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
    transition: all .3s ease-in-out;
}

.buys a {
    position: relative;
    overflow: hidden;
}

.buys a:nth-child(1) span {
    transition-delay: 2s;
}

.buys a:nth-child(2) {
    transition-delay: 4s;
}

.buys a:nth-child(3) {
    transition-delay: 6s;
}

.buys a:nth-child(4) {
    transition-delay: 8s;
}

.buyOne:nth-child(1) a span:nth-child(1),
.buyOne:nth-child(1) a span:nth-child(3) {
    animation-delay: 1s !important;
}

.buyOne:nth-child(1) a span:nth-child(2),
.buyOne:nth-child(1) a span:nth-child(4) {
    animation-delay: 3s !important;
}

.buyOne:nth-child(2) a span:nth-child(1),
.buyOne:nth-child(2) a span:nth-child(3) {
    animation-delay: 3s !important;
}

.buyOne:nth-child(2) a span:nth-child(2),
.buyOne:nth-child(2) a span:nth-child(4) {
    animation-delay: 5s !important;
}

.buyOne:nth-child(3) a span:nth-child(1),
.buyOne:nth-child(3) a span:nth-child(3) {
    animation-delay: 5s !important;
}

.buyOne:nth-child(3) a span:nth-child(2),
.buyOne:nth-child(3) a span:nth-child(4) {
    animation-delay: 7s !important;
}

.buyOne:nth-child(4) a span:nth-child(1),
.buyOne:nth-child(4) a span:nth-child(3) {
    animation-delay: 7s !important;
}

.buyOne:nth-child(4) a span:nth-child(2),
.buyOne:nth-child(4) a span:nth-child(4) {
    animation-delay: 9s !important;
}


/*.buyOne:nth-child(2) a span {
    animation-delay: 3s !important;
}
.buyOne:nth-child(3) a span {
    animation-delay: 5s !important;
}
.buyOne:nth-child(4) a span {
    animation-delay: 7s !important;
}*/

.buys a span {
    position: absolute;
}

.buys a span:nth-child(1) {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(240, 165, 0, 0)), to(#FFE15D));
    background: linear-gradient(to left, rgba(240, 165, 0, 0), #FFE15D);
    animation: 4s animateTop linear infinite;
    -webkit-animation: 4s animateTop linear infinite;
}

@-webkit-keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

.buys a span:nth-child(2) {

    top: 0px;
    right: 0px;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(240, 165, 0, 0)), to(#FFE15D));
    background: linear-gradient(to top, rgba(240, 165, 0, 0), #FFE15D);
    -webkit-animation: 4s animateRight linear -1s infinite;
    animation: 4s animateRight linear -2s infinite;
}

@-webkit-keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

.buys a span:nth-child(3) {

    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(240, 165, 0, 0)), to(#FFE15D));
    background: linear-gradient(to right, rgba(240, 165, 0, 0), #FFE15D);
    -webkit-animation: 4s animateBottom linear infinite;
    animation: 4s animateBottom linear infinite;
}

@-webkit-keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

.buys a span:nth-child(4) {

    top: 0px;
    left: 0px;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(240, 165, 0, 0)), to(#FFE15D));
    background: linear-gradient(to bottom, rgba(240, 165, 0, 0), #FFE15D);
    -webkit-animation: 4s animateLeft linear -1s infinite;
    animation: 4s animateLeft linear -2s infinite;
}

@-webkit-keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}

@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}





.tracking i {
    color: #CF7500;
}

.buys i,
.buys strong {
    color: unset;
    padding-right: 0.4em;
}

.inv-level {
    margin-top: 1em;
    padding-bottom: 1em;
}

.inv-level li {
    border-radius: 1px;
    margin: 0 0.5em;
    padding: 0.7em;
}

.contact strong {
    margin: 0 0.5em;
}

.inv-level i {
    color: #ffffff;
}

.usd {
    background-color: #0074c8;
    color: #75bee9;
}

.eur {
    background-color: #9FCDCD;
    color: #0F52BA;
}

.gbp {
    background-color: #818081;
    color: #C0FEFC;
}

.chf {
    background-color: #FDD2BF;
    color: #FF6B6B;
}

.customerspeak {
    margin: 1em 0.5em 0;
    text-align: right;
    padding: 0.2em 0.5em 0.2em 0;
}

.customerspeak p strong {
    color: #CF7500;
}

.cspeak {
    border-right: 4px solid #f7f7f7;
    padding: 0.2em 0.5em 0.2em 0;
    height: 100%;
    margin-bottom: 1em;
}

.cspeak li {
    line-height: 25px;
}

.style-three {
    width: 100%;
    margin: 0.4em 0;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}

.faqs {
    margin: 1em 0.5em 0;
}

@media screen and (max-width: 900px) {
    .widget {
        margin-top: 0.5em;
        margin-left: 0.5em;
        margin-right: 0.5em;
        margin-bottom: 2em;
    }
}

@media screen and (min-width: 1120px) {

    .widget:first-child {
        margin-top: 0;
    }
}

/******* Sidebar Css Ends ********/



/******* Crypto Guide Css Begins ********/

.guide {
    width: 100%;
}

.guidehead h2 {
    position: relative;
    width: fit-content;
    padding-bottom: 0.5em;
}

.guidehead h2:before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 60%;

    background-color: #F0A500;
    border-bottom: 2px solid #F0A500;

}

.guidecontent {
    margin-top: 1em;
}

.guidecontent p {
    margin-bottom: 0.5em;
}

.guideimage {
    width: 100%;
    height: auto;
}

.guideimage img {
    width: 100%;
    height: auto;
}

.guideways ul {
    padding: 0 2em;
}

.guideways h3 {
    margin-bottom: 0.5em;
}

.guideways li {
    list-style-type: square;


}

.guideways li a {
    color: #CF7500;
    margin-bottom: 0.5em;

}

.guidecontent a {
    color: #CF7500;
    margin-bottom: 0.5em;
}

.guidehow a,
.guideways a {
    color: #CF7500;
}

.guideways li a:hover,
.guidecontent a:hover,
.guidehow a:hover {
    color: #000000;
    transition: all .3s ease-in-out;
}

.guidehow {
    margin-bottom: 1em;
}

.guidehow ul,
.guidetips ul,
.guidefaq ul {
    padding: 0 2em;
}

.guidehow h3,
.guidetips h3,
.guidefaq h3 {
    margin-bottom: 1em;
}

.guidehow li,
.guidetips li,
.guidefaq li {
    list-style-type: decimal;
    font-weight: 600;
    margin-bottom: 0.3em;

}

.guidetips li {
    font-weight: 500 !important;
}

.guidetips li,
.guidefaq li {
    margin-bottom: 0.6em;
}

.guidehow p,
.guidetips p,
.guidefaq p {
    margin-bottom: 0.5em;
}

.guidehow p:last-child {
    border-bottom: none;
}

@media screen and (max-width: 1120px) {
    .guide {
        padding: 0 0.5em;
    }
}

/******* Crypto Guide Css Ends ********/




/******* Countries Css Begins ********/

.countries {}

.count .countries p {
    padding: 0.5em 0;
    width: 97%;
    border-bottom: 2px solid #fff;
}

/******* Countries Ends ********/




/******* Proof Page Css Begins ********/

.proof {
    margin: 0 0.5em;
}

.prooftext p {
    margin-bottom: 1em;

}

.prooftext a {
    color: #CF7500;
}

.prooftext a:hover {
    color: #000000;
    transition: .5s all ease-in-out;
}

.prooftext a:hover .prooftext a i {
    color: #CF7500;
}

.prooftext ul {
    margin: 0.7em 2em;
}

.prooftext ul li {
    margin-bottom: 0.5em;
    list-style-type: square;
}

.prooftext h3 {
    margin-bottom: 1em;
}


/******* Proof Page Css Ends ********/

/******* FAQ Css Begins ********/

.faq {
    width: 100%;
    padding: 0 0.5em;
}

.faqhead {
    margin-bottom: 1em;
}

.faqwarn a {
    color: #CF7500;
}

.faqwarn a:hover {
    color: #000000;
    transition: .3s all ease-in-out;
}

.faqwarn ul li:not(last-child) {
    margin-bottom: 1em;
}

.faqitem,
.faqitem1,
.faqitem2,
.faqitem3,
.faqitem4,
.faqitem5,
.faqitem6,
.faqitem7,
.faqitem8,
.faqitem9,
.faqitem9,
.faqitem10,
.faqitem11,
.faqitem12,
.faqitem13,
.faqitem14,
.faqitem15,
.faqitem16,
.faqitem17,
.faqitem18,
.faqitem19,
.faqitem20,
.faqitem21,
.faqitem22,
.faqitem23,
.faqitem24,
.faqitem25 {
    position: relative;
    padding: 0 0.5em;
    margin-bottom: 1.5em;
    background-color: #f7f7f7;
    border-radius: 4px;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.faqitem h3,
.faqitem1 h3,
.faqitem2 h3,
.faqitem3 h3,
.faqitem4 h3,
.faqitem5 h3,
.faqitem6 h3,
.faqitem7 h3,
.faqitem8 h3,
.faqitem9 h3,
.faqitem9 h3,
.faqitem10 h3,
.faqitem11 h3,
.faqitem12 h3,
.faqitem13 h3,
.faqitem14 h3,
.faqitem15 h3,
.faqitem16 h3,
.faqitem17 h3,
.faqitem18 h3,
.faqitem19 h3,
.faqitem20 h3,
.faqitem21 h3,
.faqitem22 h3,
.faqitem23 h3,
.faqitem24 h3,
.faqitem25 h3 {
    padding: 1.3em 0;
    position: relative;
}

.faqitem p,
.faqitem1 p,
.faqitem2 p,
.faqitem3 p,
.faqitem4 p,
.faqitem4 p,
.faqitem5 p,
.faqitem6 p,
.faqitem7 p,
.faqitem8 p,
.faqitem9 p,
.faqitem10 p,
.faqitem11 p,
.faqitem12 p,
.faqitem13 p,
.faqitem14 p,
.faqitem15 p,
.faqitem16 p,
.faqitem17 p,
.faqitem18 p,
.faqitem19 p,
.faqitem20 p,
.faqitem21 p,
.faqitem22 p,
.faqitem23 p,
.faqitem24 p,
.faqitem25 p {
    border-top: 1px solid #ffffff;
    padding: 1em 0 1em 1.5em;
    display: none;
}

.faqitem i,
.faqitem1 i,
.faqitem2 i,
.faqitem3 i,
.faqitem4 i,
.faqitem5 i,
.faqitem6 i,
.faqitem7 i,
.faqitem8 i,
.faqitem9 i,
.faqitem10 i,
.faqitem11 i,
.faqitem12 i,
.faqitem13 i,
.faqitem14 i,
.faqitem15 i,
.faqitem16 i,
.faqitem17 i,
.faqitem18 i,
.faqitem19 i,
.faqitem20 i,
.faqitem21 i,
.faqitem22 i,
.faqitem23 i,
.faqitem24 i,
.faqitem25 i {
    padding: 1em 1em 1em 100%;
    position: absolute;
    width: all;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
}

.faqdrop,
.faqdrop1,
.faqdrop2,
.faqdrop3,
.faqdrop4,
.faqdrop5,
.faqdrop6,
.faqdrop7,
.faqdrop8,
.faqdrop9,
.faqdrop10,
.faqdrop11,
.faqdrop12,
.faqdrop13,
.faqdrop14,
.faqdrop15,
.faqdrop16,
.faqdrop17,
.faqdrop18,
.faqdrop19,
.faqdrop20,
.faqdrop21,
.faqdrop22,
.faqdrop23,
.faqdrop24,
.faqdrop25 {
    display: none;
}

.faqitem :checked~.faqdownitem,
.faqitem1 :checked~.faqdownitem1,
.faqitem2 :checked~.faqdownitem2,
.faqitem3 :checked~.faqdownitem3,
.faqitem4 :checked~.faqdownitem4,
.faqitem5 :checked~.faqdownitem5,
.faqitem6 :checked~.faqdownitem6,
.faqitem7 :checked~.faqdownitem7,
.faqitem8 :checked~.faqdownitem8,
.faqitem9 :checked~.faqdownitem9,
.faqitem10 :checked~.faqdownitem10,
.faqitem11 :checked~.faqdownitem11,
.faqitem12 :checked~.faqdownitem12,
.faqitem13 :checked~.faqdownitem13,
.faqitem14 :checked~.faqdownitem14,
.faqitem15 :checked~.faqdownitem15,
.faqitem16 :checked~.faqdownitem16,
.faqitem17 :checked~.faqdownitem17,
.faqitem18 :checked~.faqdownitem18,
.faqitem19 :checked~.faqdownitem19,
.faqitem20 :checked~.faqdownitem20,
.faqitem21 :checked~.faqdownitem21,
.faqitem22 :checked~.faqdownitem22,
.faqitem23 :checked~.faqdownitem23,
.faqitem24 :checked~.faqdownitem24,
.faqitem25 :checked~.faqdownitem25 {
    display: block;

}

/******* FAQ Css Ends ********/


/******* Competition Css Begins ********/
.comp {
    padding: 0 0.5em;
    width: 100%;
}

.compitems p {
    margin-bottom: 1em;
    line-height: 22px;
}

.proofimage {
    object-fit: contain;
    border-radius: 4px;
    padding: 1em;
}

.proofimage img {
    width: 100%;
    height: auto;
    border: none;
    object-fit: contain;
}

.compitems ul {
    margin-top: 1em;
    margin-left: 2em;
    margin-bottom: 1.5em;
}

.compitems ul li {
    line-height: 22px;
    word-break: break-word;
    list-style-type: square;
    margin-bottom: .5em;
}

.compitems ul ul li {
    list-style-type: circle;
}

.compitems h2 {
    margin-bottom: 1.5em;
}

.compitems h3 {
    margin-bottom: 1em;
}

.compitems img {
    width: 100%;
    height: auto;
}

.com a {
    color: #CF7500;
}

.com a:hover {
    color: #000000;
}

/******* Competition  Css Ends ********/




/******* Buy USD Css Begins ********/

.buyusd {
    display: block;
    padding: 0 0.5em;
    width: 100%;

}

.usdhead {
    display: flex;
    background-color: #CF7500;
    width: 100%;
    height: auto;
    position: relative;
}

.usdhead p {
    color: #f7f7f7;
    line-height: 40px;
    padding: 0 0.5em;
}

.usdhead p:last-child {
    display: flex;
    position: absolute;
    right: 0;
}

.usdplanitem {
    background-color: #F5F5F5;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 2em;
    margin-right: 2em;
    line-height: 40px;
    margin-bottom: 4em;
    margin-top: 3em;
    padding-top: 2em;
    padding-bottom: 1em;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
    /*box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;*/
}

.usdplanitem h2 {
    position: relative;
    width: fit-content;
    margin-bottom: 0.7em;
    font-size: 2em;
    padding: 0 0.5em 0.7em 0.5em;
    border-bottom: 2px solid #BDC7C9;


}

.standard {
    position: absolute;
    top: -1.3em;
    background-color: #CF7500;
    padding: 0.5em;
    border-radius: 2px;

}

.standard p {
    color: #f7f7f7;
}

.where {
    padding: 0 0.5em;
    text-align: center;
}

.usdtext {
    margin-bottom: 1em;
}

.usdtext a {
    background-color: #CF7500;
    padding: 0.5em 2em;
    margin-bottom: 1em;
    border-radius: 2px;
    color: #f7f7f7;
}

.usdtext a:hover {
    background-color: #F0A500;
    transition: all .3s ease-in-out;
}

.newbie {
    background-color: #CF7500;
    width: 100%;
    padding: 0.5em;
    margin-top: 1em;
    margin-bottom: -2em;
    border: 1px solid #CF7500;
}

.newbie p {
    color: #f7f7f7;
}



.buyst {
    display: flex;
    margin-top: 2em;
    width: 100%;
    justify-content: ;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 0 15%;
}

.buyst i {
    color: #A7BBC7;
    flex-grow: 2;
}

.buystepp {
    margin: 0 0.5em;
}

.buystepp p {
    margin: 1em 0 0 0;
    display: block;
}

.buystep {
    margin-top: 1em;
    margin-bottom: 3em;
    padding: 0 0.5em;
}



.packsample {
    height: auto;
    margin: 0 14.9% 0.5em;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.packsample h3 {
    margin-bottom: 2em;
    width: fit-content;
    border-bottom: 2px solid #F0A500;
    padding: 1em 2em 1em;
}

.packsample img {
    object-fit: contain;
    width: 100%;
    height: 400px;
}

.steptobuy {
    margin: 2em 15%;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

.steptobuy1 {
    padding-bottom: 1em;
}

.steptobuy1 h3,
.thewarninghead h3 {
    margin-bottom: 0.5em;
    background-color: #CF7500;
    padding: 0.3em 0.7em;
    color: #f7f7f7;
}

.steptobuy ul {
    padding: 0 0.5em;
    margin: 0 2em;
}

.stepsmall {
    margin-left: -.5em;
}

.steptobuy1 a {
    color: #CF7500;
}

.steptobuy1 a:hover {
    color: #F0A500;
}

.steptobuy ul ul li {
    margin-left: -1em;
    list-style-type: square;
}

.steptobuy ul li {
    list-style-type: decimal;
    margin-bottom: 0.7em;
}

.buywarning {
    background-color: #A2DBFA;
    margin: 2em 14.9%;
}

.buywarning p {
    padding: 0.7em 0.5em;
    margin: 0 0.3em;
    color: #000000;
}

.buywarning a {
    color: #CF7500;
}

.buywarning a:hover {
    color: #F0A500;
    transition: .3s ease-in-out;
}

.thewarning {
    margin: 0.5em 14.9%;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.thewarning a {
    color: #CF7500;
}

.thewarning a:hover {
    color: #F0A500;
    transition: .2s all ease-in-out;
}

.thewarningtext ul {
    padding: 0.5em 0.5em;
}

.thewarningtext ul li {
    list-style-type: decimal;
    padding-bottom: 1.2em;
    margin: 0 1em 0 2.1em;
}

.usdtext a {
    background-color: #DC0000;
    animation: radiant 3s linear infinite;
    border-radius: 2px;
}

.usdtext a:hover,
.usdtext a:active {
    background-color: #FF1E1E;
    transition-delay: 0 !important;
}

.usdImg {
    position: relative;
}

.usdImg img {
    width: 180px;
    height: 100px;
    object-fit: contain;
}

#SmallLink {
    display: none;
    color: #F0A500;
    padding-left: 8px;
}

#SmallLink:hover,
#SmallLink:active {
    color: #ffffff;
}

.usdplanitem:hover .usdheader h2 {
    color: #CF7500;
}

.usdplanitem:hover .usdtext a {
    transform: scale(2.0);
}

.livePrice {
    margin: 14px 8px 10px;
    border: 2px solid #fff;
    border-radius: 3px;
}

.livePriceList {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 3px;
    border-bottom: 1px solid whitesmoke;
}

.livePriceList:hover,
.livePriceList:active {
    background-color: #fff;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.livePriceList:last-child {
    border-bottom: none;
}

.livePriceList p:first-child {
    width: 35%;
    border-right: 1px solid whitesmoke;
    font-weight: 600;
}

.livePriceList p:last-child {
    font-size: 14px;
    font-weight: 400;
}

.faqitems h3 {
    padding-right: 10%;
    border-bottom: 2px solid black;
}



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

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1.0);
    }
}

/* Media query for screens larger than 400px */
@media (max-width: 450px) {
    .notice .noticesa p {
        display: none !important;
    }

    .notice #SmallLink {
        display: block !important;
        width: 10%;
    }

    .noticesb {
        width: 90%;
    }
}


@media screen and (max-width: 300px) {
    .usdplan {
        flex-direction: column;
    }

    .usdplanitem {
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
    }

    .usdhead {
        display: flex;
        flex-direction: column;
        background-color: #CF7500;
        width: 100%;
        height: auto;
        position: relative;
    }

    .usdhead p {
        color: #f7f7f7;
        line-height: 28px;
        padding: 0 0.5em;
    }

    .usdhead p:last-child {
        display: flex;
        position: relative;
        right: 0;
    }

    .logo img {
        width: 100px;
        object-fit: cover;

    }

    .trackicon {
        padding: 0.3em 0.4em;
    }

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

    .navbtn {
        right: 0;
    }

    .navbtn .icon {
        width: 18px;
        right: 0;
    }

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


}

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

    .thewarning {
        margin: 1em 0.5em;
    }

    .steptobuy {
        margin: 0 0.5em;
    }

    .buyst {
        padding: 0 5%;
    }

    .buywarning {
        margin: 2em 0.3em;
    }

    .buywarning h3 {
        padding: 0.5em;
        margin: 0 0;
    }

    .packsample {
        margin: 2em 0.5em 1em;
    }

    .standard {
        position: absolute;
        top: 100%;
        width: 100%;
        height: 30px;
        background-color: #CF7500;
        padding: 0.3em;
        border-radius: 2px;

    }

    .standard p {
        color: #f7f7f7;
    }

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

    .usdplanitem {
        width: 48%;
        margin-left: 0;
        margin-right: 0;
    }

    .proofimages {
        background-color: white;
        padding: 18px 8px;
        display: flex;
        flex-wrap: wrap;
    }

    .proofimage {
        object-fit: contain;
        flex-grow: 2;
        flex-basis: auto;
        flex-shrink: 1;
        margin: 0;
        padding: 0;
    }

    .proofimage img {
        width: 100%;
        max-height: 300px;
        object-fit: cover;
    }

}

@media screen and (min-width: 900px) and (max-width: 1120px) {
    .usdplan {
        display: flex;
        flex-wrap: wrap;
    }

    .usdplanitem {
        width: 25%;
        flex-grow: 1;
        flex-basis: auto;
        flex-shrink: 1;
        margin-left: 1em;
        margin-right: 1em;
    }

    .proofimages {
        background-color: white;
        padding: 18px 8px;
        display: flex;
        flex-wrap: wrap;
    }

    .proofimage {
        object-fit: contain;
        flex-grow: 2;
        flex-basis: auto;
        flex-shrink: 1;
        margin: 0;
        padding: 0;
    }

    .proofimage img {
        width: 100%;
        max-height: 400px;
        object-fit: cover;
    }
}

@media screen and (min-width: 1120px) {

    .usdplan {
        display: flex;
        flex-grow: 1;
    }

    .usdplanitem {
        flex-grow: 1;
        flex-basis: auto;
        flex-shrink: 1;
        margin-left: 1em;
        margin-right: 1em;
    }

    .usdplanitem:hover {
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        transition: .0.5s all ease-in-out;
    }

    .newbie {
        position: absolute;
        word-break: break-word;
        bottom: -2em;
        width: 100%;
    }

    @supports (-webkit-touch-callout: none) {

        .newbie {
            margin-top: 2em;
        }

    }



    .where {
        margin-top: 2em;
    }

}



/******* Buy USD Css Ends ********/




/******* Set USD Css Begins ********/

.setusd {
    width: 100%;

}

.setusdmain {
    width: 100%;
    padding: 0 0.5em;
}

.setusdhead {
    width: 100%;
    display: flex;
    background-color: #CF7500;
    position: relative;
    padding: 0 0.5em;
}

.setusdhead p {
    line-height: 40px;
    color: #f7f7f7;
    border-radius: 2px;
}

.setusdhead p:last-child {
    position: absolute;
    right: 0.5em;
}

.checkhead {
    margin: 1em 0 0;
}

.checkhead h2 {
    width: fit-content;
    margin-bottom: 1.3em;
    padding-bottom: 0.7em;
    border-bottom: 2px solid transparent;
    position: relative;
}

.checkhead h2:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
    border-bottom: 2px solid #F0A500;
}

.checkhead a {
    color: #CF7500;
}

.checkhead a :hover {
    color: #F0A500;
    transition: .2s all ease-in-out;
}

.checkhead p {
    margin-bottom: 0.5em;
}

.checkoutproccess {
    display: flex;
    text-align: center;
}

.checkoutproccess .proccessstep {
    padding: 0.5em 0;
    width: 33%;
}

.checkoutproccess .proccessstep {}

.checkoutusd {
    margin: 2em 0;
    position: relative;
}

.stepA {
    color: #000000;
}

.stepD {
    color: #A6A9B6;
}

.stepP {
    color: #00C897;
}

.checkoutusd {
    padding-top: 1em;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

.checkoutusd1 {
    margin: 2em 15%;

}

.usd1 {
    background-color: #F5F5F5;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3em 0;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.usd1 h2 {

    width: fit-content;
    padding: 0.5em 1em;
    border-bottom: 2px solid #BDC7C9;
    margin-bottom: 2em;
}

.usd1item {
    margin-bottom: 2em;
}

.checkoutusd2 {}

.usd2 {
    margin: 2em 1em;
}



.usd2 button {
    padding: 0.7em;
    width: 100%;
    margin-bottom: 2em;
    color: #f7f7f7;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    border-radius: 3px;
    background-color: #CF7500;
}

.usd2 button:hover {
    background-color: #F0A500;
    transition: .2s all ease-in-out;
}

.torcheckout {
    display: flex;
    justify-content: center;
    margin-bottom: 2em;
}

.torcheckout p {
    color: #92A9BD;
    margin-bottom: 2.5em;
    transform: translateY(7px);
}

.torcheckout img {
    width: 25px;
    height: 25px;
}

.checkoutdivider {
    display: flex;
}

.divided {
    width: 48%;
}

.divided:first-child {
    margin-right: 2%;
}

.divided:last-child {
    margin-left: 2%;
}

.errors {
    margin: 0.5em 0;
}

.errors li {
    padding: 0.2em 0.5em;
    width: 100%;
    margin: 0.2em 0;
    box-shadow: rgba(232, 58, 20, 0.25) 0px 0.0625em 0.0625em, rgba(232, 58, 20, 0.25) 0px 0.125em 0.5em, rgba(232, 58, 20, 0.1) 0px 0px 0px 1px inset;
}

.errors li i {
    color: #E83A14;
    padding-right: 0.3em;
}



input,
textarea,
select {
    width: 100%;
    margin: 0.5em 0 1.3em;
    padding: 0.5em;
    border-radius: 2px;
    border: none;
    background-color: #f7f7f7;
}

.checkoutproccess {}

.loaderGif {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.4;
    align-items: center;
    justify-content: center;
    z-index: 2;
    display: none;
}

.loaderGif img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

@media screen and (min-width: 1120px) {


    .checkoutproccess {
        width: 100%;
    }

    .checkout {
        display: flex;
        padding-bottom: 3em;
    }

    .checkoutusd1 {
        display: flex;
        flex-direction: column;
        width: 35%;
        /*align-items: center;*/
        justify-content: center;
    }

    .checkoutusd2 {
        margin-right: 4em;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    }



}


/******* Set USD Css Ends ********/

/******* Payment Page Css Begins ********/

.orderpay {
    margin: 2em 0;
    padding: 1em;

}

.monero-pay {
    text-align: left;
}

.orderid {
    text-align: right !important;
    position: relative;
    margin-bottom: 2em;
}

.payorder {
    padding: 30px 10px 20px;
    text-align: center;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    border-radius: 6px;
}

.payinfo {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    word-break: break-word;
    gap: 0.75rem;
}

/* Optional: Stack vertically on smaller screens */
@media (max-width: 600px) {
    .payinfo {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}


.refcode {
    padding: 1em 0 2em;
}

.payorder .qrcode img {
    height: 200px;
    width: 200px;
}

.monero-pay a {
    color: #CF7500;
}

.monero-pay a:hover {
    color: #F0A500;
    transition: all .1s ease-in-out;
}

.btcaddr {
    border: 2px solid #A6A9B6;
    margin: 0.5em 0 1em;
    padding: 0.5em 0.5em;
    width: 100%;
    word-break: break-word;
    word-wrap: break-word;


}

.xmrCheckForm {
    display: block;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

#XMRhash {
    display: block;
    flex-grow: 2;
    width: all;
    min-width: 200px;
    width: 100%;
}

.adrs p {
    word-break: break-word;
    word-wrap: break-word;
    font-weight: bold;
}

.btcprogress .paystatus {
    width: 100%;
}

.btcprogress .paystatus {
    margin-bottom: 1em;
}

.btcprogress .paystatus progress {
    width: 100%;
    height: 1.2em;
    -webkit-appearance: none;
    appearance: none;
}

.btcprogress .paystatus progress::-webkit-progress-bar {
    background-color: #f3f3f3;
    border-radius: 3px;
}

.btcprogress .paystatus progress::-webkit-progress-value {
    background-color: #4CAF50;
    border-radius: 3px;
}

.btcprogress .paystatus progress::-moz-progress-bar {
    background-color: #4CAF50;
    border-radius: 3px;
}

.order-info {
    background-color: #F7F7F7;
    border-radius: 10px;
    padding: 1.5em;
}

.order-info h3 {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1.5em;
}

.order-info__details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1.5em;
}

.order-info__detail {
    display: flex;
    flex-direction: column;
}

.order-info__label {
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 0.5em;
}

.order-info__value {
    font-size: 1.2em;
    color: #333333;
}

@media (max-width: 767px) {
    .order-info__details {
        grid-template-columns: 1fr;
    }
}

.paymentmade {
    margin: 2em 0;
    text-align: center;
}

.paymentmade button {
    padding: 0.5em 1em;
    color: #ffffff;
    border: 1px solid #CF7500;
    background-color: #CF7500;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.paymentmade button:hover {
    background-color: #F0A500;
    transition: all .1s ease-in-out;
}

.Invalididd {
    padding: 7em 1em;
    text-align: center;
}

.Invalididd p {
    margin-bottom: 1em;
}

.Invalididd a {
    color: #CF7500;
}

.Invalididd a:hover {
    color: #F0A500;
    transition: .2s all ease-in-out;
}

.mata {
    margin-top: 1.5em;
}

@media screen and (min-width: 1120px) {

    .payorder {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 42px 3em 10px;
    }

    .qr {
        width: 35%;

    }

    .textadd {
        width: 65%;
        margin-right: 1em;
    }

    .orderpay {
        margin: 2em 5%;
        padding: 1em;

    }

}




/******* Payment Page Css Ends ********/




/******* Track Pay Css Begins ********/

.confirmm {
    margin-bottom: 2em;
}

.confirmm img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.checkPaymentStat {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
}

.checkPaymentStat form {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 5%;
}


.checkPaymentStat button,
.checkPaymentStat a {
    background-color: #CF7500;
    color: #ffffff;
    padding: 0.5em 18px;
    border-radius: 5%;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.checkPaymentStat button:hover,
.checkPaymentStat button:active,
.checkPaymentStat a:hover,
.checkPaymentStat a:active {
    background-color: #F0A500;
}

#refresh {
    color: #000;
    font-weight: 600;
    margin: 0 18px;
}

.loaderButton {
    opacity: 0.4;
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    display: none;
}

.loaderButton img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.confirmations {
    width: 52px;
    height: 52px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.confirma {
    width: 12px;
    height: 12px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/******* Track Pays Css Ends ********/



/******* Tracking page Css Begins ********/


.trackpage {
    width: 100%;
    padding: 0 0.5em;
    overflow: hidden;
    word-break: break-all;

}

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

.trackpage2 {
    overflow: visible !important;
    word-break: keep-all !important;
}

.checkOrderPage {
    border-radius: 8px;
    width: 440px;
}

.subtracking button {
    display: block;
    width: 100%;
    padding: 0.7em 1em;
    margin: 0.5em 0 1em;
    color: #ffffff;
    border: 1px solid #CF7500;
    background-color: #CF7500;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.subtracking button:hover {
    background-color: #F0A500;
    transition: .2s all ease-in-out;
}

.subtracking {
    margin-top: 1em;
    margin-bottom: 1.5em;
}

.trackpage form {
    padding: 0.5em;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.trackpage h3 {
    margin-top: 0.5em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #ffffff;
}

.status-header p {
    border-bottom: .5px solid #ffffff;
    margin: 1em 0 1em;
    padding-bottom: 8px;

}

.status-header p:first-child {
    margin: 1em 0 1em;

}

.paymentAddress {
    word-break: break-all;
}

.status-header {
    border-bottom: unset !important;
}

.status-header a {
    color: #CF7500;
}

.status-header a:hover {
    color: #F0A500;
}

.con button {
    color: #ffffff;
    padding: 0.5em 1.5em;
    background-color: #CF7500;
    border: none;
}

.con {
    margin-bottom: 2em;
}

.review-shift,
.review {
    padding: 1em 0.5em;
    margin-bottom: 2em;
    background-color: #F7F7F7;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.review-shift .rating {
    color: #CF7500;
}

.review-shift .name {
    margin-bottom: 0.5em;
}

.review-shift .homes,
.review p {
    margin-top: 0.3em;
    background-color: #DBDBDB;
    padding: 0.5em;
}

.review p {
    margin-bottom: 1em;
    word-break: break-all;
}

.review {
    word-break: break-all;

}

.review a {
    pointer-events: none;
    color: #CF7500 !important;
    word-break: break-all;
}

.con button:hover {
    background-color: #F0A500;
    transition: .2s all ease-in-out;
}

@media screen and (max-width: 900px) {
    .checkOrderPage {
        margin-top: 1em;
        margin-bottom: 4em;
    }
}

@media screen and (max-width: 440px) {
    .checkOrderPage {
        width: 99%;
    }
}

@media screen and (min-width: 900px) {
    .subtracking {
        margin: 5em;
    }
}

@media screen and (min-width: 1120px) {
    .subtracking {
        margin: 5em;
    }

    .trackpage {
        /*margin: 0 15%;*/
        padding: 0 0.5em;
    }
}



/******* Tracking page Css Ends ********/



/**** Javascript warning    *****/

.Javascriptwarning {
    background-color: #009EFF;
    color: #DFF6FF;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 20000;
    height: 60px;
    /*display: none;*/
}

.Javascriptwarning p {
    color: #ffffff;
    padding: 3.5px;
}

.Javascriptwarning i {
    color: #000000;
    padding-left: 18px;
}

/**** Javascript warning    *****/


/******* Reviews Css Begins ********/

.reviewpage {
    width: 100%;
    padding: 0.5em;
    overflow: hidden;
}

.genrating {
    padding: 0.5em;
    margin-bottom: 1.5em;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

.reviews {
    padding: 0.5em;
}

.write_review .ratings {
    display: flex;
    flex-direction: row;
    margin-bottom: 1em;

}

.write_review button {
    display: block;
    width: 100%;
    padding: 0.7em 1em;
    margin: 0.5em 0;
    color: #ffffff;
    border: 1px solid #CF7500;
    background-color: #CF7500;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

}

.write_review button:hover {
    background-color: #F0A500;
    transition: .2s all ease-in-out;
}

.write_review .rating {
    margin-right: 2em;

}

.write_review .rating label {
    margin-left: 0.5em;
    display: flex;

}

.overall_rating {
    margin-bottom: 2em;
}

.overall_rating span {
    margin-top: 3em;
    margin-right: 1em;
    font-size: 14px;
    font-weight: 700;
}

.num,
.stars {
    color: #CF7500;
}

@media screen and (min-width: 1120px) {
    .reviewpage {
        margin: 0 15%;
    }

    .trackk {
        margin: 0 15%;
    }
}

/******* Reviews Css Ends ********/

/******* PGP page Css Begins ********/
.pgp {
    width: 100%;
    /*overflow: hidden;*/
}

.pgpitem {
    margin: 1em;
    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
    width: 100%;
    word-break: break-all;
}

@media screen and (min-width: 900px) {
    .pgp {
        margin: 0 15%;
    }

    .pgpitem {
        padding: 1em;
    }
}

/******* PGP page Css Ends ********/


/******* Language Change Css Begins ********/

#langType {
    position: fixed;
    bottom: 2%;
    left: 2%;
    max-width: 80px;
    z-index: 100;
}

.language-select {
    margin-bottom: 0px;
    background-color: #FFF6C3;
    color: #000000;
}

.language-submit {
    background-color: #DF2E38;
    border: none;
    padding: 5px 10px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    border-radius: 1px;
    margin-bottom: 0px;
}

.language-submit:hover {
    background-color: #850000;
}

@media screen and (min-width: 1120px) {

    #langType {
        left: 9%;
        max-width: 40%;
        bottom: 5%;
    }

    #langType form {
        display: flex;
        align-items: center;
    }

    .language-select {
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 5px;
        border: none;
        outline: none !important;
        width: 100px;
    }

    .language-submit {
        border-radius: 3px;
    }
}

#spam {
    background-color: green;
    color: yellow;
    padding: 10px;
    margin-bottom: 1em;
    animation: glowSlate 8s infinite;
}

@keyframes glowSlate {

    0%,
    100% {
        background-color: green;
        color: yellow;
    }

    50% {
        background-color: #5BB318;
        color: #fff;
    }
}



/******* Language Change Css Ends ********/

/****  THe prev-next button css begins here *****/

.prev-next {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 10px;
}

.prev-next a {
    background-color: #CF7500;
    padding: 8px 28px;
    border: 1px solid #CF7500;
    color: #fff;
    transition: .2s all ease-in-out;
    border-radius: 3px;
}

.prev-next a:hover,
.prev-next a:active,
.prev-next a:focus {
    background-color: #F0A500;
}

/****  THe prev-next button css Ends here *****/


/***** Footer Out Of Stock Css  Begins Here ******/
.outOfOrder {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-flow: column;
}

.outOfOrder img {
    margin-top: 10px;
    height: 22px;
    width: 22px;
}

.outOfOrder li {
    margin: 12px 0;
}

/***** Footer Out Of Stock Css Ends Here******/


/*Css for the message sent pop up*/

#unique-popup {
    position: fixed;
    top: 27%;
    right: 10%;
    padding: 12px 20px;
    background-color: #F2EAD3;
    color: white;
    border: 0.5px solid #3F2305;
    border-radius: 5px;
    transition: opacity 1s ease-in-out;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeOut 12s;
    animation-fill-mode: forwards;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    98% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#unique-popup i {
    color: #862B0D;
    margin-right: 10px;
}

#unique-popup.success {
    color: green !important;
}

#unique-popup.error {
    color: red !important;
}

.widget-shoot-message button {
    width: 100%;
    background-color: #CF7500;
    padding: 8px;
    border-radius: 8px;
    border: none;
}

.widget-shoot-message button:hover {
    background-color: #F0A500;
    transition: .2s all ease-in-out;
}

/*Css for the message sent pop up*/


/******* Home Css Begins ********/


/******* Home Css Ends ********/

/******* Home Css Begins ********/


/******* Home Css Ends ********/

/******* Home Css Begins ********/


/******* Home Css Ends ********/

/******* Home Css Begins ********/


/******* Home Css Ends ********/

.message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
}

.message.success {
    background: #d4edda;
    color: #155724;
}

.message.error {
    background: #f8d7da;
    color: #721c24;
}

.message-output {
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    background: #f1f1f1;
}

/* Message Box Styles */
.message-box {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.message-box.read {
    background: #e9ecef;
}

.message-box.unread {
    background: #fff3cd;
}

.message-box .status {
    margin-top: 5px;
    font-size: 0.9em;
    color: #6c757d;
}

/* Responsive Styles */
@media (max-width: 600px) {
    .widget {
        padding: 15px;
    }

    button {
        width: 100%;
    }
}

/******* Home Css Begins ********/


/******* Home Css Ends ********/

/******* Messages Css Begins ********/

/* Main Container */
.reach_container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f7f7f7;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Widget Styling */
.reach_widget {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Tracking Form */
.reach_tracking h3 {
    margin-bottom: 15px;
    color: #333;
    text-align: center;
}

.reach_tracking form {
    width: 100%;
}

.reach_tracking form label {
    display: block;
    margin-bottom: 5px;
    color: #666;
}

.reach_tracking form input,
.reach_tracking form textarea,
.reach_tracking form button {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
    color: #333;
}

.reach_tracking form button {
    background-color: #CF7500;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.reach_tracking form button:hover {
    background-color: #F0A500;
}

/* Message Notification */
.reach_message {
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
    color: #fff;
    text-align: center;
}

.reach_message.success {
    background-color: #28a745;
}

.reach_message.error {
    background-color: #dc3545;
}

/* Message Output */
.reach_message-output {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 15px;
    margin: 20px 0;
    border-radius: 8px;
}

.reach_message-output .reach_message-box {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
    text-align: left;
}

.reach_message-box p {
    margin: 0 0 10px;
    color: #333;
}

.reach_message-box .reach_message-status {
    display: flex;
    align-items: center;
}

.reach_message-box .reach_message-status i {
    margin-right: 5px;
}

.reach_message-box.read {
    background: #e0e0e0;
}

.reach_message-box.unread {
    background: #fff9c4;
}

/* Refresh Button */
#refreshButton {
    padding: 10px 20px;
    margin-top: 10px;
    border: none;
    background-color: #CF7500;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: block;
    width: 100%;
    text-align: center;
}

#refreshButton:hover {
    background-color: #F0A500;
}

@media (max-width: 768px) {
    .reach_widget {
        padding: 15px;
    }

    .reach_tracking form input,
    .reach_tracking form textarea,
    .reach_tracking form button {
        width: 100%;
    }
}

.reach_message-box.sender {
    background-color: #e0f7fa;
    border-right: 5px solid #00acc1;
    margin-left: auto;
    text-align: right;
    border-radius: 10px 10px 0 10px;
    width: fit-content;
    max-width: 75%;
}

.reach_message-box.sender .reach_message-status {
    text-align: right;
}

.reach_message-box.receiver {
    background-color: #fce4ec;
    border-left: 5px solid #d81b60;
    margin-right: auto;
    text-align: left;
    border-radius: 10px 10px 10px 0;
    width: fit-content;
    max-width: 75%;
}

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

.reach_message_header form {
    margin: 0;
}

.logout-button {
    display: inline-block;
    padding: 10px 15px;
    margin-left: 20px;
    border: none;
    border-radius: 5px;
    background: #CF7500;
    color: #ffffff;
    text-decoration: none;
    transition: background 0.3s;
}

.logout-button:hover {
    background: #F0A500;
}


.reach_tracking #reach_sendMessage {
    width: 100%;
    overflow: hidden;
}

.reach_tracking textarea {
    resize: vertical;
    width: 100%;
    min-height: 100px;
}

#anon_chat_fixed_button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #CF7500;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

#anon_chat_fixed_button:hover {
    background: #F0A500;
}

#anon_chat_button_link {
    color: #ffffff;
    font-size: 24px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

#anon_chat_button_link i {
    font-size: 24px;
    color: #fff;
}

#anon_chat_send_message {
    display: block;
    width: 100%;
    color: #CF7500;
    text-decoration: none;
    margin-top: 12px;
    font-weight: normal;
    text-align: center;
}

#anon_chat_send_message:hover {
    text-decoration: underline;
}



/******* Messages Css Ends ********/



/******* User Dash Css Begins ********/

.user-dash-container {
    display: flex;
    min-height: 90vh;
    width: 100%;
}

.user-dash-sidebar {
    width: 30%;
    background-color: #1c1f2e;
    padding: 20px;
    color: #fff;
}

.user-dash-sidebar ul {
    list-style: none;
    padding: 0;
}

.user-dash-sidebar li {
    margin: 20px 0;
}

.user-dash-sidebar a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.user-dash-sidebar a:hover {
    text-decoration: underline;
}

.user-dash-content {
    width: 65%;
    flex: 1;
    padding: 30px;
    background: #f5f7fa;
}

.user-dash-cards {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.user-dash-card {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.user-dash-alert {
    background: #fff9e6;
    border-left: 5px solid #f0c36d;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 14px;
}

.user-dash-meta {
    margin-top: 40px;
    font-size: 13px;
    color: #888;
}

.user-dash-badge {
    background: #e74c3c;
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 20px;
    margin-left: 6px;
}

.user-dash-actions form {
    display: inline-block;
}


@media (max-width: 768px) {

    .user-dash-container {
        flex-wrap: wrap;
    }

    .user-dash-sidebar {
        width: 100%;
        font-size: 12px;
    }

    .user-dash-content {
        width: 100%;
        font-size: 12px;
        padding: 30px 14px;
    }

    .user-dash-card {
        flex: 1 1 100%;
    }

    .user-dash-actions form {
        display: inline-flex;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .user-dash-card {
        flex: 1 1 48%;
    }
}

@media (min-width: 1025px) {
    .user-dash-card {
        flex: 1 1 30%;
    }
}



.user-dash-orders table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
    display: block;
    font-size: 14px;
}

.user-dash-orders thead {
    background-color: #f0f0f0;
    color: #333;
}

.user-dash-orders th,
.user-dash-orders td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    white-space: nowrap;
}

.user-dash-orders td form {
    display: inline;
}

@media (max-width: 768px) {

    .user-dash-orders table,
    .user-dash-orders thead,
    .user-dash-orders tbody,
    .user-dash-orders th,
    .user-dash-orders td,
    .user-dash-orders tr {
        display: block;
        width: 100%;
    }

    .user-dash-orders thead {
        display: none;
    }

    .user-dash-orders tr {
        margin-bottom: 20px;
        border: 1px solid #ccc;
        padding: 10px;
        background: #fff;
        border-radius: 8px;
    }

    .user-dash-orders td {
        position: relative;
        padding-left: 50%;
        text-align: left;
        border: none;
        border-bottom: 1px solid #eee;
    }

    .user-dash-orders td::before {
        content: attr(data-label);
        position: absolute;
        top: 10px;
        left: 10px;
        font-weight: bold;
        color: #333;
    }
}

.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination a {
    padding: 6px 12px;
    background: #eee;
    margin: 0 3px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    color: #333;
}

.pagination a.active {
    background: #2c3e50;
    color: #fff;
}



/* ORDER DETAILS INNER STYLES */
.user-dash-orders-details p {
    margin: 10px 0;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

.user-dash-orders-details p strong {
    display: inline-block;
    width: 160px;
    color: #222;
}

.user-dash-orders-details {
    margin-bottom: 6px;
}

.user-dash-orders-details .user-dash-back {
    display: inline-block;
    margin-top: 20px;
    padding: 8px 14px;
    background-color: #CF7500;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.user-dash-orders-details .user-dash-back:hover {
    background-color: #F0A500;
    transition: background-color .3s fade-in-out;
    text-decoration: underline;
}

/* Status badges */
.status-badge {
    font-weight: bold;
    font-size: 0.85em;
    text-transform: capitalize;
}

.status-pending {
    color: #e17055;
    /* orange */
}

.status-confirmed {
    color: #0984e3;
    /* blue */
}

.status-underpaid {
    color: #d63031;
    /* red */
}

.status-expired {
    color: #636e72;
    /* gray */
}


.user-dash-payment-hint {
    background: #fffbe6;
    color: #aa8800;
    padding: 12px;
    margin-top: 20px;
    border-left: 4px solid #f0c36d;
    font-size: 14px;
    border-radius: 6px;
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
    .user-dash-orders-details p strong {
        display: block;
        margin-bottom: 4px;
        width: 100%;
    }

    .user-dash-orders-details p {
        font-size: 14px;
    }
}

/* Messages Page */

.user-dash-messages {
    margin-top: 20px;
}

.messages-thread {
    background: #fefefe;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.msg-box {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 8px;
}

.user-msg {
    background-color: #eafaf1;
    border: 1px solid #b1f0d3;
    text-align: right;
}

.admin-msg {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    text-align: left;
}

.msg-header {
    font-size: 13px;
    color: #666;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

.msg-body {
    font-size: 15px;
    color: #333;
}

.message-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.message-form textarea {
    width: 100%;
    padding: 10px;
    resize: vertical;
    margin-bottom: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.message-form button {
    background: #CF7500;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background .3s ease;
}

.message-form button:hover {
    background: #F0A500;
}

#char-count {
    display: none;
    margin-top: 5px;
    font-size: 13px;
    color: #666;
    text-align: right;
}

.msg-fallback {
    margin-top: 20px;
    padding: 12px 16px;
    background: #fdf6e3;
    border-left: 4px solid #f39c12;
    color: #7a5c00;
    font-size: 14px;
    border-radius: 5px;
    line-height: 1.6;
    font-style: italic;
}


@media (max-width: 768px) {
    .msg-body {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .message-form textarea {
        resize: none;
    }
}



/* Settings Page */
.user-dash-settings-form {
    max-width: 500px;
    margin-top: 20px;
}

.user-dash-settings-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.user-dash-settings-form button {
    background: #1c1f2e;
    color: white;
    padding: 10px 20px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    border-radius: 6px;
}

.user-dash-success {
    background: #e0fbe0;
    border-left: 4px solid #47c047;
    padding: 10px;
    margin-bottom: 15px;
}

.user-dash-error {
    background: #fdecea;
    border-left: 4px solid #e74c3c;
    padding: 10px;
    margin-bottom: 15px;
}

/*Fund wallet CSS*/

/* ========== FUND WALLET PAGE ========== */

.user-fund-box {
    background: #fff;
    color: #333;
    padding: 25px;
    border-radius: 10px;
    margin: 25px auto;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    max-width: 800px;
}

.user-fund-box h2 {
    color: #2d3436;
    margin-bottom: 15px;
}

.user-fund-balance,
.btc-to-fiat-rate {
    margin-bottom: 10px;
    color: #555;
}

.user-fund-error,
.user-fund-success {
    padding: 12px;
    border-radius: 6px;
    margin: 15px 0;
    font-size: 0.95em;
}

.user-fund-error {
    background: #ffe6e6;
    color: #c0392b;
    border-left: 5px solid #e74c3c;
}

.user-fund-success {
    background: #e7fbe7;
    color: #27ae60;
    border-left: 5px solid #2ecc71;
}

.user-fund-form label {
    font-weight: bold;
    margin-top: 15px;
    display: block;
}

.user-fund-form input[type="number"] {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.user-fund-form button {
    background: #CF7500;
    border: none;
    color: white;
    padding: 12px 20px;
    font-weight: bold;
    border-radius: 6px;
    margin-top: 5px;
    cursor: pointer;
    width: 100%;
    transition: 0.3s ease;
}

.user-fund-form button:hover {
    background: #F0A500;
}

.user-fund-qr img {
    margin-top: 15px;
    width: 180px;
    height: 180px;
    border: 4px solid #eee;
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

.user-fund-card {
    background: #fafafa;
    padding: 20px;
    border-radius: 8px;
    margin-top: 25px;
    border: 1px solid #ddd;
}

.user-fund-card p {
    font-size: 0.95em;
    margin-bottom: 8px;
}

.user-fund-history {
    margin-top: 30px;
}

.user-fund-history ul {
    list-style: none;
    padding: 0;
}

.user-fund-history li {
    background: #f0f0f0;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 6px;
    font-size: 0.9em;
    color: #444;
    border-left: 4px solid #74b9ff;
}

#fund-loading {
    margin-top: 10px;
    font-style: italic;
    font-size: 0.95em;
}

.user-fund-history form button {
    background: #CF7500;
    color: #fff;
    border: none;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.user-fund-history form button:hover {
    background: #F0A500;
}

.user-fund-history form button {
    background: #CF7500;
    color: #fff;
    border: none;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.user-fund-history form button:hover {
    background: #F0A500;
}



/* Mobile & Tablet Responsive */
@media screen and (max-width: 768px) {
    .user-fund-box {
        padding: 20px;
        margin: 1px;
    }

    .user-fund-form button {
        font-size: 1em;
        padding: 10px;
    }

    .user-fund-qr img {
        width: 140px;
        height: 140px;
    }
}


/*Transactions CSS Styling */
.user-transactions-box {
    padding: 20px;
}

.user-transactions-title {
    font-size: 1.6em;
    margin-bottom: 15px;
}

.user-transactions-empty {
    padding: 15px;
    background: #fce4ec;
    color: #b71c1c;
    border-radius: 5px;
}

.user-transactions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.user-transactions-item {
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #0984e3;
    border-radius: 6px;
    margin-bottom: 12px;
    background: #f9f9f9;
}

.user-transactions-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.user-transactions-label {
    font-weight: 600;
    color: #333;
}

.user-transactions-value {
    color: #444;
    word-break: break-all;
}

.user-transactions-status {
    font-weight: 700;
    text-transform: capitalize;
}

.status-confirmed {
    color: green;
}

.status-pending {
    color: #e67e22;
}

.status-failed {
    color: #c0392b;
}

.user-transactions-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 2rem auto;
    padding: 1rem;
}

.user-transactions-page-link {
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    background-color: #f1f1f1;
    color: #333;
    text-decoration: none;
    font-size: 0.95rem;
    border: 1px solid #ccc;
    transition: all 0.3s ease;
}

.user-transactions-page-link:hover {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.user-transactions-page-link.active {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
    border-color: #007bff;
    pointer-events: none;
}


@media (max-width: 600px) {
    .user-transactions-row {
        flex-direction: column;
        gap: 4px;
    }
}



/*Withdrawal PAge */
.user-withdraw-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
}

.user-withdraw-title {
    margin-bottom: 20px;
    color: #2d3436;
    font-weight: 600;
}

.user-withdraw-disclaimer {
    font-size: 0.95em;
    color: #b02d00;
    background: #fff4e6;
    padding: 10px 14px;
    border-left: 4px solid #ff6b6b;
    margin-bottom: 20px;
    border-radius: 5px;
}

.user-withdraw-error,
.user-withdraw-success {
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-size: 0.95em;
}

.user-withdraw-error {
    background-color: #ffe8e8;
    color: #d8000c;
    border-left: 4px solid #ff4d4d;
}

.user-withdraw-error ul {
    margin: 0;
    padding-left: 20px;
}

.user-withdraw-success {
    background-color: #e6ffed;
    color: #207f40;
    border-left: 4px solid #28a745;
}

.user-withdraw-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    margin-top: 16px;
    font-size: 0.95em;
}

.user-withdraw-form input[type="text"],
.user-withdraw-form input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.95em;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 8px;
    transition: border 0.2s ease;
}

.user-withdraw-form input[type="text"]:focus,
.user-withdraw-form input[type="number"]:focus {
    border-color: #0984e3;
    outline: none;
}

.user-withdraw-form button[type="submit"] {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #CF7500;
    color: #fff;
    border: none;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.25s ease;
}

.user-withdraw-form button[type="submit"]:hover {
    background-color: #F0A500;
}

.user-withdraw-form img {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 150px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.user-withdraw-list {
    margin-top: 30px;
}

.user-withdraw-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.user-withdraw-list li {
    border-left: 4px solid #ffeaa7;
    background: #f9f9f9;
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 6px;
    font-size: 0.92em;
    color: #333;
}

.user-withdraw-item-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.user-withdraw-label {
    font-weight: bold;
    color: #555;
    min-width: 120px;
}

.user-withdraw-value {
    color: #2d3436;
    word-break: break-word;
}

.user-withdraw-status {
    font-weight: bold;
    text-transform: capitalize;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
}

.user-withdraw-status.pending {
    color: #e67e22;
}

.user-withdraw-status.approved {
    color: #27ae60;
}

.user-withdraw-status.rejected {
    color: #c0392b;
}

.user-withdraw-status.failed {
    color: #d63031;
}

.user-withdraw-pagination {
    margin-top: 20px;
    text-align: center;
}

.user-withdraw-pagination a {
    margin: 0 5px;
    padding: 6px 10px;
    text-decoration: none;
    border-radius: 4px;
    background: #dfe6e9;
    color: #2d3436;
    font-size: 0.9em;
}

.user-withdraw-pagination a.active {
    background-color: #CF7500;
    color: #fff;
    font-weight: bold;
}

.user-withdraw-pagination a:hover {
    background-color: #F0A500;
}


/*User Login Page */
.user-login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    background: #f9f9f9;
    padding: 40px 15px;
    width: 100%;
}

.user-login-box {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    max-width: 400px;
    width: 100%;
}

.user-login-title {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #2c3e50;
    text-align: center;
}

.user-login-form {
    display: flex;
    flex-direction: column;
}

.user-login-form label {
    margin: 10px 0 5px;
    font-weight: 600;
    color: #333;
}

.user-login-form input[type="email"],
.user-login-form input[type="password"],
.user-login-form input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.user-login-form button {
    margin-top: 20px;
    padding: 10px;
    background-color: #CF7500;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.user-login-form button:hover {
    background-color: #F0A500;
}

.user-login-error {
    background-color: #ffe6e6;
    color: #c0392b;
    padding: 10px;
    margin-bottom: 15px;
    border-left: 4px solid #e74c3c;
    border-radius: 4px;
}

.user-login-captcha {
    display: block;
    margin: 10px 0;
    border: 1px solid #ccc;
    width: fit-content;
    height: auto;
    max-height: 90px;
    border-radius: 4px;
}

.user-login-register-link {
    margin-top: 15px;
    font-size: 0.95em;
    color: #636e72;
    text-align: center;
}

.user-login-register-link a {
    color: #CF7500;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.user-login-register-link a:hover {
    color: #F0A500;
    text-decoration: underline;
}

/*Register Page */

.user-register-box {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    max-width: 480px;
    margin: 20px auto;
}

.user-register-title {
    text-align: center;
    font-size: 1.6em;
    margin-bottom: 20px;
}

.user-register-form input,
.user-register-form select {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    font-size: 1em;
}

.user-register-button {
    background: #CF7500;
    color: #fff;
    border: none;
    padding: 12px;
    width: 100%;
    font-size: 1em;
    cursor: pointer;
    border-radius: 6px;
}

.user-register-button:hover {
    background: #F0A500;
}

.user-register-footer {
    margin-top: 15px;
    text-align: center;
    font-size: 0.95em;
}

.user-login-forgot {
    margin-top: 20px;
}

.user-register-footer a,
.user-login-forgot a {
    color: #CF7500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.user-register-footer a:hover,
.user-login-forgot a:hover {
    color: #F0A500;
    text-decoration: underline;
}

.user-register-error {
    background: #ffe6e6;
    border-left: 4px solid red;
    padding: 10px;
    margin-bottom: 20px;
    color: #d63031;
}

textarea {
    resize: vertical;
}


/* Reset Password CSS */
.user-reset-container {
    max-width: 500px;
    margin: 30px auto;
    padding: 30px;
    background: #fff;
    color: #333;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
    font-family: Arial, sans-serif;
}

.user-reset-box {
    margin: 0 12px;
}

.user-reset-box h2.user-reset-title {
    font-size: 24px;
    color: #F0A500;
    margin-bottom: 20px;
    text-align: center;
}

.user-reset-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #222;
}

.user-reset-form input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f9f9f9;
    color: #333;
    font-size: 14px;
}

.user-reset-form input[type="password"]::placeholder {
    color: #aaa;
}

.user-reset-form button {
    width: 100%;
    padding: 10px;
    background: linear-gradient(to right, #CF7500, #F0A500);
    border: none;
    border-radius: 6px;
    color: #000;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.user-reset-form button:hover {
    box-shadow: 0 0 10px rgba(240, 165, 0, 0.4);
}

.user-reset-error,
.user-reset-success {
    background-color: #fff7e6;
    border-left: 4px solid #CF7500;
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: 14px;
    color: #444;
}

}

/******* User Dash Css Ends ********/


/******* User Pay With Wallet Begins ********/

/* The button */
.pay-with-wallet-btn a {
    display: inline-flex;
    align-items: center;
    color: #CF7500;
    padding: 0.3em;
    font-weight: 600;
    transition: color 0.3s ease-in-out;
}

/* Icon spacing */
.pay-with-wallet-btn i {
    color: #CF7500;
    font-size: 1.1em;
}

/* Hover & focus */
.pay-with-wallet-btn:hover,
.pay-with-wallet-btn:focus {
    text-decoration: underline;
    outline: none;
}


.wallet-pay-page {
    max-width: 600px;
    margin: 2rem auto;
    padding: 1.5rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

.wallet-pay-page h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #333;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.alert--error {
    background: #ffe6e6;
    color: #c00;
    border: 1px solid #e0b4b4;
}

.alert--success {
    background: #e6ffed;
    color: #064;
    border: 1px solid #b4e0b4;
}

.wallet-pay-details {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin: 1.5rem 0;
    min-width: 35%;
}

.wallet-pay-details dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: 0.75rem;
    column-gap: 1.5rem;
}

.wallet-pay-details dt {
    font-weight: 600;
    color: #333;
}

.wallet-pay-details dd {
    margin: 0;
    color: #555;
}

.wallet-pay-details hr {
    grid-column: 1 / -1;
    border: none;
    border-top: 1px solid #eee;
    margin: 1rem 0;
}


.pay-wallet-action {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #CF7500;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 1rem;
}

.pay-wallet-action:hover {
    background: #CF7500;
}

.low-balance-notice {
    color: #c00;
    font-size: 0.95rem;
}

.low-balance-notice a {
    color: #007bff;
    text-decoration: underline;
}

.low-balance-notice a:hover {
    color: #0056b3;
}

.track-link {
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.track-link a {
    color: #007bff;
    text-decoration: underline;
}

.track-link a:hover {
    color: #0056b3;
}

.pay-with-wallet-nutt-btn {
    background-color: #CF7500;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pay-with-wallet-nutt-btn:hover {
    background-color: #F0A500;
    transform: translateY(-1px);
}

#wallet-pay-nutt-form {
    text-align: center;
    margin-top: 1.5rem;
}


@media (min-width: 601px) {

    #pay-with-wallet-btn,
    .pay-with-wallet-btn {
        padding-bottom: 2em;
    }
}

@media (max-width: 600px) {
    .wallet-pay-page {
        padding: 0.5rem 0.7em 0.9em;
        margin: 1rem;
    }

    .wallet-pay-details dl {
        grid-template-columns: 1fr;
    }

    .wallet-pay-details dt {
        margin-top: 0.6rem;
    }

    .wallet-pay-details dd {
        margin-left: 0;
        padding-left: 1rem;
    }

    .pay-wallet-action {
        width: 100%;
        text-align: center;
        padding: 0.75rem;
    }

    .wallet-pay-page h2 {
        font-size: 1.1rem;
        margin-bottom: 0.7rem;
        color: #333;
    }
}


/******* User Pay With Wallet Ends ********/



/******* Animation Css Begins ********/

@keyframes scrollText {
    0% {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-tranform: translateX(100%);
        transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-tranform: translateX(-100%);
        transform: translateX(-100%);
    }
}


@keyframes payMove {
    0% {
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-tranform: translateX(0%);
        transform: translateX(0%);
    }

    100% {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-tranform: translateX(-100%);
        transform: translateX(-100%);
    }
}

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

    100% {
        -webkit-transform: translateX(-150%);
        -moz-transform: translateX(-150%);
        -ms-transform: translateX(-150%);
        -o-tranform: translateX(-150%);
        transform: translateX(-150%);
    }

    0% {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-tranform: translateX(-100%);
        transform: translateX(-100%);
    }

}

@keyframes glow {
    0% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-tranform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1.0);
        -moz-transform: scale(1.0);
        -ms-transform: scale(1.0);
        -o-tranform: scale(1.0);
        transform: scale(1.0);
    }
}

@keyframes bounce {
    0% {
        -webkit-transform: translateY(-3px);
        -moz-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
        -o-tranform: translateY(-3px);
        transform: translateY(-3px);
    }

    50% {
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -ms-transform: translateY(5px);
        -o-tranform: translateY(5px);
        transform: translateY(5px);
    }



    100% {
        -webkit-transform: translateY(-3px);
        -moz-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
        -o-tranform: translateY(-3px);
        transform: translateY(-3px);
    }
}


/******* Animation Css Ends ********/