body,
html {
    height: 100%;
    width: 100%
}

.position-relative,
body {
    position: relative
}

.clamp-1,
.links-content .links a,
.merchant-card-details h6,
.profile-detail .user-name {
    white-space: nowrap;
    text-overflow: ellipsis
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline
}

body,
textarea {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@font-face {
    font-family: Poppins;
    src: url("poppins_regular.ttf");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Poppins;
    src: url("poppins_medium.ttf");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Poppins;
    src: url("poppins_semi_bold.ttf");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Poppins;
    src: url("poppins_bold.ttf");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

html {
    touch-action: manipulation
}

textarea {
    font-family: Roboto, sans-serif
}

body {
    line-height: 1;
    font-size: 100%;
    outline: 0;
    font-family: Roboto, sans-serif
}

sup {
    font-size: xx-small;
    vertical-align: super
}

.clamp-1 {
    -webkit-line-clamp: 1;
    width: 100%;
    overflow: hidden
}

.no-op {
    pointer-events: none;
    touch-action: none;
    filter: grayscale(1)
}

.hide-ui {
    position: absolute !important;
    visibility: hidden !important;
    z-index: -10 !important
}

.grecaptcha-badge,
.grecaptcha-logo {
    visibility: hidden !important;
    pointer-events: none !important
}

ol,
ul {
    list-style: none
}

@media (min-width:801px) {
    .show-mb {
        display: none !important
    }
}

@media (max-width:800px) {
    body {
        padding: 0
    }

    .hide-mb {
        display: none !important
    }

    .show-mb {
        display: default !important
    }
}

:focus {
    outline: 0
}

::-moz-focus-inner {
    border: 0
}

[placeholder] {
    text-overflow: ellipsis
}

:not(.show-scrollbars)::-webkit-scrollbar {
    display: none
}

:not(.show-scrollbars) {
    -ms-overflow-style: none;
    scrollbar-width: none
}

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0
}

a {
    text-decoration: none;
    color: #333
}

.breadcrumbs a:hover,
.orderhere-desc .app-link {
    text-decoration: underline
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url("KFOmCnqEu92Fr1Mu4mxK.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium'), url("KFOlCnqEu92Fr1MmEU9fBBc4.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'), url("KFOlCnqEu92Fr1MmWUlfBBc4.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

.site-header {
    width: 100%;
    background-color: #fff;
    padding: 16px 7.4%;
    margin-top: 0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    position: fixed;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
    font-family: Poppins, sans-serif
}

.profile-detail .hello,
.profile-detail .user-name {
    font-family: Roboto;
    text-align: left;
    color: #333;
    width: 100px
}

.header-placeholder {
    height: 69px;
    width: 100%;
    transition: all 1s ease-in-out
}

@media(max-width:800px) {
    .header-placeholder {
        height: 56px
    }
}

.site-header .container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    overflow: initial
}

.site-header .container .header {
    width: 100%;
    display: flex
}

.header .logo {
    height: 34px;
    width: auto;
    transition: .2s transform linear
}

.header .logo:hover {
    transform: scale(1.1)
}

.header .logo.phonepe {
    height: 36px
}

.header .search {
    background: 0 0;
    position: absolute;
    right: 12%;
    padding: 6px 16px;
    color: #fff;
    border: 0;
    cursor: pointer;
    outline: 0;
    z-index: 101
}

.header .show-nye-tickets {
    color: #338aed;
    position: absolute;
    top: 12px;
    right: 12%;
    cursor: pointer;
    background: #fff;
    border: none;
    font-size: 16px;
    border-radius: 4px;
    padding: 8px 16px;
    font-weight: 500
}

.header .tickets-dropdown {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    font-weight: 700;
    width: 150px;
    background: #fff;
    position: absolute;
    top: 56px;
    right: 11%;
    text-align: center;
    font-size: 12px;
    display: none;
    z-index: 1;
    border: 1px solid #ddd;
    border-radius: 8px
}

.tickets-dropdown li,
.tickets-dropdown li:hover {
    padding: 15px 0;
    border-bottom: #ddd 1px solid;
    display: block
}

.tickets-dropdown li {
    color: #666
}

.tickets-dropdown a:last-child li {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px
}

.tickets-dropdown li:hover {
    background: #f1f1f1
}

.header .wallet-balance-holder {
    position: absolute;
    right: 14%;
    top: 50%;
    transform: translateY(-50%);
    animation: .7s ease-out 0s 1 fadeIn
}

.wallet-balance-holder .wallet-balance {
    background-color: #fce0b2;
    border-radius: 36px;
    padding: 6px 32px 6px 10px;
    position: relative;
    display: block;
    margin-top: 14px
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.wallet-balance .balance {
    color: #1c1c1c;
    font-size: 12px
}

.wallet-balance-holder .savings {
    font-size: 10px;
    margin-top: 2px;
    padding-left: 10px
}

.wallet-balance .magic-coin {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 28px;
    width: 28px
}

@media (max-width:800px) {
    .header .show-nye-tickets {
        font-size: 10px;
        top: 16px;
        right: 32%
    }

    .site-header .container .header {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .logo-location-holder .affiliates-header-content {
        display: inline-block;
        align-self: center
    }

    .site-header.nye-open {
        margin-top: 62px
    }

    .header .tickets-dropdown {
        font-size: 10px;
        right: 30%;
        top: 48px;
        width: 112px
    }

    .tickets-dropdown li,
    .tickets-dropdown li:hover {
        padding: 6px
    }
}

.header .hamburger-holder {
    background: 0 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    color: #fff;
    border: 0;
    padding: 8px 0;
    transition: .5s background-color;
    border-radius: 50%
}

.hamburger-holder .hamburger {
    background: 0 0;
    position: relative;
    top: 0;
    right: 0;
    color: #fff;
    border: 0;
    cursor: pointer;
    outline: 0;
    z-index: 1;
    padding: 0
}

.homepage-hamburger {
    margin-left: 20px;
    padding-top: 4px
}

.header .user-holder,
.homepage-hamburger .hamburger {
    border: 0;
    padding: 0;
    background: 0 0
}

.hamburger img {
    height: 30px;
    width: 30px
}

.homepage-hamburger .hamburger img {
    width: 24px;
    height: 24px
}

.header .user-holder {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5%;
    color: #fff;
    cursor: pointer;
    outline: 0;
    z-index: 1;
    transition: .5s background-color;
    border-radius: 50%
}

.user-holder.login:hover {
    background: 0 0
}

.user.logged-in {
    padding-top: 0;
    padding-bottom: 0
}

.user.logged-in .user-icon {
    width: 30px;
    height: 30px;
    border-radius: 4px
}

.user.logged-in.pro {
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 28px
}

.user.logged-in.pro img {
    height: 36px;
    border-radius: 8px
}

.user.logged-in.pro .magic-pro {
    height: 36px;
    position: relative;
    right: -6px
}

.coin-info span {
    vertical-align: middle
}

.header .user-image {
    width: 42px;
    height: 42px;
    border-radius: 50%
}

.header .user-menu {
    width: 100px;
    padding: 16px;
    box-shadow: 0 3px 6px 0 rgba(61, 85, 97, .5)
}

.profile-detail .hello {
    height: 16px;
    font-size: 12px;
    line-height: 1.33
}

.profile-detail .user-name {
    height: 20px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.43
}

.profile-detail .user-image-popover {
    top: -2px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%
}

.user-menu .logout {
    width: 100%;
    font-family: Roboto;
    padding: 4px 4px 4px 0;
    color: #3e5561
}

.header .user,
.site-footer {
    font-family: Poppins, sans-serif
}

.user-menu .logout:hover {
    background: #fff
}

.user-menu .detail-divider {
    width: 100%;
    border: 1px solid #e5e5e5
}

.header-blog .user-image {
    width: 30px;
    height: 30px;
    border-radius: 50%
}

.search-container {
    width: 30%;
    margin-left: 84px
}

@media (max-width:800px) {
    .homepage-hamburger {
        margin-left: 4px
    }

    .universalSearchWrapper .homePageUniversalSearch {
        width: 100%;
        background: url("search.svg") 12px 10px no-repeat #F7F7F7;
        padding: 10px 6px 10px 38px;
        border: 1px solid rgba(0, 0, 0, .12);
        border-radius: 8px;
        color: red;
        font-size: 14px;
        line-height: 20px
    }

    .universalSearchWrapper input.homePageUniversalSearch::placeholder {
        color: #5C5C5C;
        font-size: 14px;
        line-height: 20px;
        font-family: Poppins, sans-serif
    }

    .hamburger img {
        height: 20px;
        width: 20px
    }

    .homepage-hamburger .hamburger img {
        width: 16px;
        height: 16px
    }

    .site-header {
        padding: 8px 16px
    }

    .header .action-cta-holder {
        display: flex;
        align-items: center;
        justify-content: flex-end
    }

    .header .search,
    .header .user-holder {
        display: inline-block
    }

    .site-header.phonepe {
        padding: 12px 8px 12px 12px
    }

    .header .search {
        right: auto;
        top: auto;
        padding: 0 16px 0 20px;
        position: relative
    }

    .search.phonepe {
        right: 0;
        top: 0;
        z-index: 101
    }

    .search.paytm {
        right: 0
    }

    .header .hamburger-holder,
    .header .user-holder {
        padding: 0;
        right: auto;
        transform: none;
        top: auto;
        position: relative
    }

    .header .user-image {
        width: 32px;
        height: 32px
    }

    .header .logo {
        height: 16px;
        transition: .2s transform linear
    }

    .header .back-arrow {
        height: 24px;
        margin-right: 8px
    }

    .header .user {
        font-size: 12px;
        padding: 4px 12px 6px;
        line-height: initial;
        position: relative
    }

    .location-header-react .location {
        display: inline-block;
        font-size: 14px;
        font-weight: 400
    }

    .location-header-react .dropdown-image {
        vertical-align: middle
    }

    .user.logged-in.pro .magic-pro {
        height: 34px
    }

    .site-footer {
        padding: 16px 8px;
        background-color: #2e108e;
        background-image: none
    }
}

@media (max-width:1000px) {
    .header .logo {
        height: 30px
    }

    .site-header {
        padding: 16px 3.5%
    }

    .homepage-hamburger {
        margin-left: 4px
    }
}

.site-footer {
    width: 100%;
    padding: 32px 16px;
    background-image: url("footer-bg.svg");
    background-size: cover;
    position: relative
}

.site-footer .site-footer-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto
}

.site-footer header {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    margin-bottom: 20px;
    align-items: center;
    font-weight: 500
}

.orderhere-container .orderhere-desc,
.site-footer header .footer-categories,
.site-footer header .footer-social {
    display: inline-block
}

.orderhere-container .logo {
    height: 30px;
    vertical-align: middle
}

.orderhere-container .orderhere-desc {
    vertical-align: middle;
    font-size: 18px;
    color: #ef1c74;
    margin-left: 8px
}

.orderhere-desc .app-link {
    color: #ef1c74
}

.footer-categories a,
.footer-categories p {
    display: inline-block;
    padding: 0 8px;
    font-size: 16px;
    line-height: 20px;
    color: #fff
}

.footer-categories p.label {
    color: #ef1c74;
    padding-left: 0;
    font-weight: 500
}

.footer-social a {
    padding: 0 8px
}

@media (max-width:800px) {
    .site-footer header .footer-social {
        float: none;
        padding-top: 16px;
        text-align: center;
        width: 100%
    }

    .footer-social a {
        padding: 0 16px 0 0
    }

    .site-footer header .footer-categories {
        padding: 0 24px
    }

    .footer-categories p.label {
        display: block
    }

    .footer-categories a,
    .footer-categories p {
        padding-right: 8px;
        padding-top: 8px;
        padding-left: 0
    }
}

.site-footer .footer-links {
    width: 100%;
    display: flex;
    padding: 32px 0;
    gap: 10px
}

.footer-links .links-content {
    flex: 1
}

.links-content .links-header {
    font-size: 16px;
    line-height: 20px;
    color: #ef1c74
}

.links-content .links a {
    font-size: 12px;
    line-height: 16px;
    color: #fff;
    padding-right: 32px;
    width: 100%;
    overflow: hidden;
    display: inline-block
}

@media (max-width:800px) {
    .site-footer .footer-links {
        flex-direction: column;
        width: 100%;
        text-align: left;
        padding: 0 2px
    }

    .links-content .links-header {
        padding: 16px 0 0
    }

    .links-content .links a {
        padding: 0
    }
}

.site-footer .footer-nav {
    width: 100%;
    border-top: 1px solid #9098B8;
    border-bottom: 1px solid #9098B8;
    margin: 16px auto 4px;
    text-align: center
}

.footer-nav a {
    display: inline-block;
    padding: 8px;
    font-size: 13px;
    line-height: 1.38;
    color: #fff
}

@media (max-width:800px) {
    .site-footer .footer-nav {
        text-align: left;
        padding: 0
    }
}

.site-footer .footer-directory {
    width: 100%;
    text-align: center;
    padding: 16px 0
}

.footer-directory p {
    display: block;
    font-size: 16px;
    line-height: 1.25;
    text-align: center;
    color: #ef1c74;
    padding: 8px 0
}

.footer-directory .directory-link {
    display: block
}

.directory-link a {
    display: inline-block;
    padding: 0 8px;
    font-size: 13px;
    line-height: 1.38;
    letter-spacing: 2px;
    text-align: center;
    color: #fff
}

@media (max-width:800px) {
    .site-footer .footer-directory {
        text-align: left;
        padding: 0 24px
    }

    .footer-directory p {
        text-align: left
    }
}

.site-footer .app-links {
    margin-top: 20px;
    text-align: center
}

.app-links a {
    width: 120px;
    height: 34px;
    overflow: hidden
}

.app-links img {
    width: fit-content;
    height: 36px
}

@media (max-width:800px) {
    .site-footer .app-links {
        margin-top: 10px
    }
}

.clearfix:after,
.clearfix:before {
    content: "";
    display: table
}

.clearfix,
.clearfix:after {
    clear: both
}

.loader,
.loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em
}

.loader {
    margin: 0 auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, .2);
    border-right: 1.1em solid rgba(255, 255, 255, .2);
    border-bottom: 1.1em solid rgba(255, 255, 255, .2);
    border-left: 1.1em solid #fff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

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

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

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

.merchant-card-holder {
    padding: 8px;
    width: 50%;
    display: inline-block;
    float: left
}

.voucher-footer {
    background: #f7f7fa;
    margin: 24px 12px 12px;
    padding: 12px;
    position: relative;
    text-align: left;
    display: block;
    border-radius: 4px
}

.merchant-card-holder .merchant-card {
    width: 100%;
    background-color: #fff;
    display: inline-block;
    position: relative;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .12);
    border-radius: 4px;
    height: auto;
    min-height: 104px
}

.merchant-card.missing-voucher {
    padding: 10px
}

.merchant-card .merchant-banner-holder {
    display: inline-block;
    width: 24%;
    vertical-align: middle;
    position: inherit;
    margin-left: 12px;
    margin-top: 12px
}

.merchant-banner-holder .magicorder-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 50px
}

@media (max-width:800px) {
    .merchant-banner-holder .magicorder-tag {
        left: 4px;
        top: 12px
    }
}

.missing-voucher .merchant-banner-holder {
    margin: 0
}

.merchant-banner-holder .rating {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 50px;
    height: 22px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .6);
    border: 1px solid #00bfa5;
    padding: 1px 3px
}

.rating .star {
    width: 12px;
    height: 12px;
    object-fit: contain;
    margin: 2px 2px 0 4px;
    vertical-align: 8%
}

.rating .rating-value {
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    color: #fff;
    vertical-align: 18%
}

.rating.search {
    position: absolute;
    border-radius: 4px;
    padding: 2px;
    top: 12px;
    right: 12px;
    line-height: unset
}

.rating.search .star {
    width: 10px;
    height: 10px
}

.rating.search .rating-value {
    margin-right: 4px;
    vertical-align: 10%
}

.merchant-banner-holder .merchant-banner {
    height: 76px;
    width: 100%;
    overflow: hidden;
    object-fit: cover;
    border-radius: 4px
}

.merchant-card .merchant-card-details {
    position: relative;
    min-height: 50px;
    display: inline-block;
    width: 65%;
    vertical-align: middle
}

.merchant-card-details h4,
.merchant-card-details h5 {
    text-align: left;
    display: -webkit-box;
    padding: 0 8px;
    -webkit-line-clamp: 1
}

.merchant-card-details .merchant-card-logo {
    position: absolute;
    top: 0;
    left: 50%;
    height: 40px;
    width: 40px;
    border-radius: 4px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 20;
    overflow: hidden
}

.merchant-card-details .result-seperator {
    width: 24px;
    height: 1px;
    background-color: #d8dae1;
    margin: 12px
}

.merchant-card-details h4 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: rgba(0, 0, 0, .87);
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
    -webkit-box-orient: vertical;
    margin-top: 0
}

.merchant-card-details .cashback {
    padding: 0 8px;
    margin-top: 2px;
    color: #ef1c74;
    font-size: 12px;
    font-weight: 500
}

.merchant-card-details h5,
.merchant-card-details h6 {
    font-size: 14px;
    color: rgba(0, 0, 0, .54);
    overflow: hidden;
    -webkit-box-orient: vertical
}

.merchant-card-details h5 {
    line-height: 1.43;
    margin: 0
}

.merchant-card-details h6 {
    padding: 4px 4px 4px 0;
    font-weight: 500;
    -webkit-line-clamp: 2;
    max-height: 36px;
    margin: 0 0 0 8px
}

.merchant-card-details .subcategory-url {
    color: #ef1c74
}

.merchant-card-details h6:first-child {
    margin-top: 20px
}

.merchant-card-details .merchant-actions {
    padding: 0 8px;
    margin-top: 12px
}

.voucher-merchant-details .merchant-actions {
    margin-top: 6px
}

.merchant-actions .merchant-action {
    display: inline-block;
    margin-left: 16px
}

.merchant-actions .merchant-action:first-child {
    margin-left: 0
}

.merchant-action .action-icon {
    vertical-align: middle;
    height: 16px;
    width: 16px
}

.merchant-action .action-text {
    font-size: 10px;
    font-weight: 500;
    vertical-align: middle;
    border-bottom: 1px dashed;
    color: rgba(0, 0, 0, .54);
    padding: 1px 2px;
    text-align: center;
    margin-left: 4px
}

.merchant-card .voucher-footer {
    border-radius: 4px
}

@media (max-width:800px) {
    .merchant-card-holder {
        width: 100%;
        padding: 0;
        display: inline-block;
        float: none
    }

    .merchant-card-details h5,
    .merchant-card-details h6 {
        font-size: 10px
    }

    .merchant-card-holder .merchant-card {
        border-radius: 0;
        height: auto;
        box-shadow: none;
        float: none;
        padding: 16px 8px;
        border-bottom: .5px solid rgba(0, 0, 0, .12)
    }

    .merchant-card .merchant-banner-holder {
        display: inline-block;
        width: 24%;
        vertical-align: middle;
        position: inherit;
        margin: 0
    }

    .merchant-banner-holder .merchant-banner {
        height: 76px;
        width: 100%;
        overflow: hidden;
        object-fit: cover;
        border-radius: 4px
    }

    .merchant-banner-holder .rating {
        padding: 0;
        top: 16px;
        border-radius: 4px;
        width: 40px;
        height: 20px;
        text-align: center
    }

    .rating .star {
        width: 10px;
        height: 10px;
        object-fit: contain;
        margin: 0 2px 0 0;
        vertical-align: middle
    }

    .rating .rating-value {
        font-size: 12px;
        font-weight: 700;
        text-align: left;
        color: #fff;
        vertical-align: middle
    }

    .rating.search {
        padding: 0;
        border-radius: 2px;
        top: 10px;
        line-height: unset
    }

    .rating.search .star {
        vertical-align: 0
    }

    .rating.search .rating-value {
        vertical-align: 6%;
        font-size: 10px
    }
}

.breadcrumbs a {
    font-size: 12px;
    line-height: 1.43;
    color: #767676;
    cursor: pointer
}

.breadcrumbs ol {
    list-style-type: none
}

.breadcrumbs li {
    display: inline
}

.breadcrumbs li::after {
    content: '/';
    color: rgba(0, 0, 0, .38);
    font-size: 12px
}

.breadcrumbs li:last-child::after {
    content: '';
    margin-left: 4px
}

.breadcrumbs li:last-child {
    pointer-events: none;
    font-weight: 700;
    font-size: 12px
}

.lazy {
    object-fit: cover
}

.user-login-dialog,
.user-otp-dialog {
    z-index: 100000 !important
}

.user-login-dialog h3 {
    background-color: #f7f7fa;
    border: 1px solid #d8dae1;
    padding: 12px 24px 8px !important
}

.user-login-dialog .dialog-text-heading {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.75;
    text-align: left;
    color: #3e5561;
    margin-top: 16px
}

.user-login-dialog .dialog-text {
    font-size: 14px;
    line-height: 1.43;
    text-align: left;
    color: #637e8c
}

.user-login-dialog .std-code,
.user-login-dialog input {
    font-size: 16px;
    color: #3e5561;
    padding: 8px;
    display: inline-block;
    margin-top: 8px;
    background-color: #fff;
    line-height: 1.25
}

.user-login-dialog .std-code {
    width: 66px;
    border-radius: 4px;
    border: 1px solid #d8dae1;
    text-align: center;
    margin-right: 16px
}

.user-login-dialog input {
    border-radius: 4px;
    border: 1px solid #d8dae1;
    width: 180px;
    text-align: left
}

.user-login-dialog .send-otp-button {
    border: none;
    background-color: #338aed;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    height: 48px;
    border-radius: 4px;
    text-align: center;
    width: 100%;
    margin-top: 24px;
    cursor: pointer
}

.user-otp-dialog h3 {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background-color: #f7f7fa;
    border: 1px solid #d8dae1;
    padding: 12px 24px 8px !important
}

.user-otp-dialog .dialog-text-heading {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.75;
    text-align: left;
    color: #3e5561;
    margin-top: 24px
}

.user-otp-dialog .dialog-text {
    font-size: 14px;
    line-height: 1.43;
    text-align: left;
    color: #637e8c
}

.user-otp-dialog .std-code {
    width: 66px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #d8dae1;
    font-size: 16px;
    line-height: 1.25;
    text-align: center;
    color: #3e5561;
    padding: 8px;
    display: inline-block;
    margin-right: 16px;
    margin-top: 8px
}

.user-otp-dialog .email,
.user-otp-dialog .name,
.user-otp-dialog input {
    background-color: #fff;
    font-size: 16px;
    line-height: 1.25;
    color: #3e5561;
    padding: 12px;
    display: inline-block
}

.user-otp-dialog input {
    border-radius: 4px;
    border: 1px solid #d8dae1;
    margin-top: 24px;
    width: 48px;
    text-align: center;
    margin-right: 12px
}

.user-otp-dialog input[type=number]::-webkit-inner-spin-button,
.user-otp-dialog input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
}

.user-otp-dialog .email,
.user-otp-dialog .name {
    border-radius: 4px;
    border: 1px solid #d8dae1;
    margin-top: 8px;
    width: 100%;
    text-align: left;
    margin-right: 12px
}

.user-otp-dialog .name {
    margin-top: 20px
}

.user-otp-dialog .send-otp-button {
    border: none;
    background-color: #338aed;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    height: 48px;
    border-radius: 4px;
    text-align: center;
    width: 100%;
    margin-top: 24px;
    cursor: pointer
}

.user-otp-dialog .error-msg {
    font-size: 12px;
    line-height: 1.33;
    text-align: center;
    color: #ff455f;
    display: block;
    margin-top: 8px
}

.centre {
    text-align: center;
    clear: both
}

.centre .pagination {
    display: inline-block;
    text-align: center;
    margin-bottom: 16px
}

.best-offers-holder {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    border-radius: 50%;
    background: #ef1c74;
    padding: 12px 6px;
    height: 68px;
    display: flex;
    align-items: center;
    width: 68px;
    color: #fff;
    overflow: hidden;
    border: 2px solid #fff;
    font-weight: 700;
    box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
    z-index: 101
}

.scroll-top-btn,
.snackbar {
    display: none;
    position: fixed
}

.best-offers-holder.fall-animation {
    animation: fall 1.5s ease-in-out 1s 1
}

.best-offers-holder .best-offers {
    font-size: 12px;
    text-align: center;
    margin-top: 4px;
    line-height: 16px;
    animation: breathe 1s linear 0s infinite
}

@keyframes breathe {
    50% {
        transform: scale(1.1, 1.1)
    }
}

@keyframes fall {
    0% {
        transform: translateY(-100vh)
    }

    70% {
        transform: translateY(20px)
    }

    80% {
        transform: scaleY(.7)
    }
}

.magicpin-loader .loading,
.snackbar {
    transform: translateX(-50%);
    text-align: center
}

.scroll-top-btn {
    bottom: 34px;
    right: 34px;
    cursor: pointer;
    border-radius: 50%;
    background: rgba(0, 0, 0, .4);
    padding: 12px 10px
}

.scroll-top-btn:hover {
    background: rgba(0, 0, 0, .6)
}

.scroll-top-btn .top-arrow {
    height: 12px;
    width: 20px
}

.snackbar {
    width: 250px;
    background-color: #333;
    color: #fff;
    border-radius: 2px;
    padding: 16px;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 16px
}

.snackbar.show {
    display: block;
    -webkit-animation: fadein .5s, fadeout .5s 4.5s;
    animation: fadein .5s, fadeout .5s 4.5s
}

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0
    }

    to {
        bottom: 30px;
        opacity: 1
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0
    }

    to {
        bottom: 30px;
        opacity: 1
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1
    }

    to {
        bottom: 0;
        opacity: 0
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1
    }

    to {
        bottom: 0;
        opacity: 0
    }
}

@media(max-width:800px) {
    .location-holder .selected-location {
        background-position: 8px 6px;
        background-size: 24px
    }

    .city-selection-dialog .select-city {
        padding-top: 0
    }

    .city-selection-dialog .cities-container {
        text-align: center
    }

    .city-selection-dialog .search-location {
        float: none;
        width: 100%
    }

    .city-selection-dialog .location-holder .selected-location {
        padding-right: 80px
    }

    .city-selection-dialog .detect-location {
        float: none;
        width: 100%;
        margin-top: 12px
    }

    .search-location-container .search-city {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%
    }

    .cities-container .city {
        margin: 8px 4px 0 0;
        display: inline-block
    }

    .cities-container .city:last-child {
        margin: 0 auto
    }

    .cities-container .city {
        padding: 12px;
        font-size: 14px;
        cursor: pointer;
        margin-bottom: 2px
    }

    .city-selection-dialog .search-location input.location {
        padding-right: 80px
    }

    .city-selection-dialog .divider {
        width: 20%;
        margin-top: 10px;
        margin-bottom: 8px
    }

    .city-selection-dialog .logo-container {
        margin: 10px 0 30px
    }

    .logo-container .mp-logo {
        height: 70%;
        display: block;
        margin: 0 auto
    }
}

.rating5 {
    background-color: #008a3b
}

.rating4 {
    background-color: #00ae28
}

.rating3 {
    background-color: #8bcc00
}

.rating2 {
    background-color: #ffc20f
}

.rating1 {
    background-color: #ee5350
}

.magicpin-loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url("") center no-repeat #fff;
    background-size: 132px
}

.magicpin-loader .loading {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 64%;
    line-height: 1.4;
    font-weight: 500;
    color: rgba(0, 0, 0, .87)
}

.comma-separator::after {
    content: ', '
}

.comma-separator:last-child::after {
    content: ''
}

.mobile-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .7);
    height: 100vh;
    width: 100vw;
    z-index: 999999999;
    display: none
}

.mobile-loader-overlay .mobile-loader-holder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.mobile-loader-holder .mobile-loader {
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #ef1c74;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

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

.page-loading::before {
    content: " ";
    display: block;
    position: fixed;
    z-index: 12;
    height: 4px;
    width: 98%;
    top: 0;
    left: 0;
    background-color: rgba(239, 28, 116, 1);
    animation: page-load ease-out 2s;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .2)
}

@keyframes page-load {
    0% {
        width: 30%;
        background-color: rgba(239, 28, 116, .8)
    }

    40% {
        width: 60%
    }

    100% {
        width: 98%;
        background: rgba(239, 28, 116, .9)
    }
}

.header .logo-location-holder {
    display: inline-block;
    align-self: center
}

.header .search {
    line-height: normal
}

.header .user-holder {
    font-size: inherit
}

.header .user-holder:hover {
    background-color: initial
}

.header .user {
    min-width: 110px;
    box-sizing: border-box;
    background: #EB0F69;
    border: 1px solid #E8E8E8;
    color: #FFF;
    border-radius: 12px;
    font-size: 16px;
    line-height: 22px;
    padding: 12px 8px 12px 12px;
    cursor: pointer;
    font-weight: 600
}

.user-holder.login {
    right: 4%
}

.user.logged-in {
    background: 0 0;
    position: relative;
    border: none;
    color: #fff
}

.user .coin-info {
    position: absolute;
    background: #ef1c74;
    background: linear-gradient(152deg, rgba(239, 28, 116, 1) 0, rgba(46, 16, 142, 1) 100%);
    width: 70px;
    font-size: 12px;
    border-radius: 22px;
    right: -10px;
    bottom: -10px;
    padding: 1px 2px;
    font-weight: 500;
    border: .6px solid #fff
}

.logged-in .coin-info {
    left: 50%;
    transform: translateY(-60%) translateX(-50%);
    width: 50px;
    padding: 2px
}

.coin-info .header-coin {
    height: 10px;
    vertical-align: middle
}

@media (max-width:800px) {

    .location-holder .location .locality,
    .location-holder.home .location {
        max-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical
    }

    .site-header {
        padding: 8px 16px
    }

    .header .action-cta-holder {
        display: flex;
        align-items: center;
        justify-content: flex-end
    }

    .header .search,
    .header .user-holder {
        right: auto;
        display: inline-block;
        top: auto;
        position: relative
    }

    .header .search {
        padding: 6px 16px 6px 20px
    }

    .coin-info .header-coin {
        height: 8px
    }

    .search .search-cta {
        padding: 0
    }

    .header .user-holder {
        padding: 0;
        transform: none
    }

    .header .user {
        font-size: 12px;
        padding: 4px 12px 6px;
        line-height: initial;
        position: relative;
        margin-right: 12px
    }

    .user.logged-in {
        padding: 0;
        text-align: center
    }

    .user .coin-info {
        font-size: 8px;
        width: auto;
        bottom: -8px;
        right: -10px
    }

    .logged-in .coin-info {
        width: 38px;
        bottom: 0;
        transform: translateX(-50%)
    }

    .header .hamburger-holder {
        right: auto;
        top: auto;
        position: relative;
        transform: none;
        padding: 0
    }

    .site-header .location-header-holder .location-holder {
        display: inline-flex;
        width: auto;
        padding: 0;
        font-size: 14px;
        align-items: center;
        margin-top: 2px
    }

    .site-header .location-holder .location {
        font-family: Poppins, sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 400;
        display: inline-flex;
        align-items: center;
        gap: 2px
    }

    .location-holder .location .locality {
        display: -webkit-box
    }

    .site-header .location-holder .location .pin {
        height: 16px
    }

    .company-details-holder {
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }

    .location-holder.home {
        display: flex;
        gap: 4px;
        align-items: center;
        position: relative;
        left: -4px;
        top: 2px;
        max-width: 70%
    }

    .location-holder.home .location {
        line-height: 16px;
        font-size: 12px;
        color: #fff;
        float: none;
        font-weight: 500;
        display: -webkit-box
    }

    .location-holder.home .dropdown-image {
        height: 12px;
        width: 12px;
        margin-left: 0
    }

    .site-header .location-holder .dropdown-image {
        height: 16px;
        width: 16px;
        margin-left: 4px
    }

    .site-header .universal-search .back {
        margin-right: 8px
    }

    .user .user-icon {
        height: 32px
    }

    .header .toolTipContainer {
        position: absolute
    }

    .logo-location-holder .affiliates-header-content {
        display: inline-block
    }

    .site-footer header {
        grid-template-columns: 1fr;
        margin-bottom: 16px
    }

    .site-footer .orderhere-container {
        text-align: center;
        padding: 12px 0
    }

    .user.logged-in.pro {
        padding: 0
    }
}

.collection_data_container .right-arrow,
.floating_banners .right-arrow,
.one_click_discover_collections .right-arrow {
    right: -10px
}

.site-footer .legal-info {
    margin-top: 20px
}

.legal-info p {
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    margin: 4px 0
}

#discover-strip-home-react {
    height: 96px;
    gap: 10px;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-top: 10px;
    padding-right: 20px
}

#discover-strip-home-react .category {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    max-width: 70px;
    min-width: 70px
}

.category .category_icon {
    max-width: 100%;
    height: 50px;
    width: 50px
}

.category .category_name {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    text-align: center;
    color: #333
}

.floating_banners {
    width: 80%;
    margin: 40px auto auto;
    min-height: 180px;
    position: relative
}

.floating_banners .banner_container {
    overflow-y: hidden;
    overflow-x: scroll;
    display: flex;
    scroll-behavior: smooth
}

.floating_banners .floating_banner {
    margin: 10px;
    border-radius: 24px;
    display: block
}

.floating_banner .floating_banner_image {
    border-radius: 24px;
    object-fit: contain;
    min-width: 120px
}

.collection_data_container .left-arrow,
.collection_data_container .right-arrow,
.floating_banners .left-arrow,
.floating_banners .right-arrow {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .12);
    background-color: #fff;
    padding: 4px;
    top: calc(50% - 10px)
}

.collection_data_container .left-arrow,
.floating_banners .left-arrow {
    left: -10px;
    transform: rotate(180deg);
    display: none
}

.wallet_intro {
    margin-top: 80px;
    display: flex;
    height: 165px;
    justify-content: center;
    max-height: 165px;
    padding: 10px
}

.wallet_intro .wallet_intro_image {
    max-width: 100%;
    max-height: 166px
}

.deal_trends {
    width: 80%;
    margin: 80px auto auto;
    position: relative
}

.deal_trends .left-arrow,
.deal_trends .right-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .12);
    padding: 4px;
    top: 50%;
    background-color: #fff
}

.deal_trends .right-arrow {
    position: absolute;
    right: -10px
}

.deal_trends .left-arrow {
    position: absolute;
    left: -10px;
    transform: rotate(180deg);
    display: none
}

.trend .trend_img,
.trends_container .trend {
    height: 220px;
    width: 220px
}

.deal_trends .deal_trend_title {
    line-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 28px;
    font-weight: 600;
    text-align: left;
    color: #333
}

.deal_trends .trends_container {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth
}

.trend .trend_img {
    border-radius: 20px;
    max-height: 220px
}

.browse_headers {
    width: 80%;
    display: flex;
    align-items: center;
    column-gap: 16px;
    margin: 80px auto;
    overflow-x: scroll
}

.collection_data_subtitle,
.collection_data_title.title_1,
.collection_data_title.title_2 {
    display: block;
    overflow: hidden;
    font-family: Poppins, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap
}

.data_discover_collections {
    width: 80%;
    margin: 80px auto auto
}

.collection_data_title.title_1 {
    font-size: 16px;
    font-weight: 400;
    color: #333;
    padding: 8px 0 0;
    line-height: 24px;
    height: 56px
}

.collection_data_title.title_2 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    padding: 4px 0 8px;
    line-height: 28px;
    height: 38px
}

.collection_data_subtitle {
    font-size: 16px;
    color: #767676;
    padding: 8px 0;
    font-weight: 400;
    max-width: 100%;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-wrap: break-word;
    margin-top: 2px;
    line-height: 20px
}

.collection_data_additional_info,
.collection_data_cta {
    font-size: 16px;
    font-weight: 600;
    font-family: Poppins, sans-serif;
    line-height: 24px
}

.collection_data_additional_info {
    color: #333;
    display: flex
}

.collection_data_cta {
    text-align: center;
    color: #6561E8;
    border: 1px solid #6561E8;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 2px 0 0 #6561E8;
    padding: 4px 8px;
    margin-top: 12px
}

.collection_small {
    width: 200px;
    height: 132px;
    object-fit: cover
}

.collection_large {
    width: 180px;
    height: 180px;
    object-fit: cover
}

.voucher_offer {
    padding: 8px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Poppins, sans-serif
}

.browse_header_title,
.limited-stocks {
    font-family: Poppins, sans-serif;
    font-style: normal
}

.card-tag {
    width: 120px;
    position: absolute;
    bottom: 12px;
    left: 8px
}

.voucher_offer span {
    font-size: 14px
}

.limited-stocks {
    color: #6561e8;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px
}

.user-rating-holder {
    display: flex
}

.progress {
    border-radius: 21px;
    background: #6561e8;
    height: 100%
}

.collections_data_collection_save_discount {
    font-size: 14px;
    color: #858587;
    line-height: 18px
}

.data_collection_widget {
    position: relative
}

.collection_data_container {
    display: flex;
    gap: 16px;
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    overflow-x: scroll;
    align-items: flex-start;
    scroll-behavior: smooth
}

.collection_data_container.collection_brand_data_container {
    gap: 12px
}

.collection_data_medium {
    width: 224px;
    height: 132px;
    object-fit: cover
}

.collection_card_container {
    position: relative;
    width: 100%
}

.collection_card_layout {
    margin: 16px 8px 8px;
    border-radius: 16px;
    width: min-content
}

.collection_card_layout img {
    max-width: 310px
}

.browse_header_title {
    color: #191C32;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding-left: 4px
}

.collection_card_info,
.primary-header {
    font-family: Poppins, sans-serif
}

.cardtag {
    position: absolute;
    bottom: 10px;
    left: 10px
}

.title_container {
    display: flex;
    align-items: center
}

.rating_label {
    padding-left: 8px;
    font-size: 14px;
    color: #858587
}

.rating-star {
    width: 16px;
    height: 16px
}

.data_discover_collections .data_discover_collections_heading {
    line-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 28px;
    font-weight: 600;
    text-align: left;
    color: #333;
    padding-bottom: 8px;
    padding-left: 10px;
    padding-right: 10px
}

.data_discover_collections_heading .home-brands-title {
    text-align: center;
    color: #383580;
    font-size: 30px;
    line-height: 44px;
    font-weight: 600;
    font-family: Poppins, sans-serif
}

.home-brands-title .home-brands-title-span {
    color: #D4236A
}

.data_discover_collections .dicover_data_container {
    display: flex;
    gap: 30px
}

.data_discover_collections .dicover_data_container.small {
    flex-wrap: wrap
}

.data_discover_collections .dicover_data_container.medium {
    overflow-x: scroll;
    overflow-y: hidden;
    gap: 16px
}

.dicover_data_container .discover_data_collection {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24px
}

.discover_data_collection .discover_data_collection_subtitle {
    display: none
}

.discover_data_collection.small .discover_data_collection_title {
    font-size: 16px;
    font-weight: 500;
    color: #191C32;
    text-align: center
}

.discover_data_collection.small .discover_data_collection_subtitle {
    display: inline-block;
    position: relative;
    width: max-content;
    text-align: center;
    border-radius: 10px;
    background-color: #6561E8;
    color: #fff;
    font-size: 12px;
    line-height: 14px;
    font-weight: 600;
    padding: 4px 6px;
    transform: translateY(calc(-20px - 50%))
}

.discover_data_collection.medium .discover_data_collection_title {
    width: 68%;
    text-align: center;
    height: 32px;
    background: linear-gradient(46.38deg, #6D6BED 20.46%, #8F8BF2 52.47%, #DBD0FE 110.16%);
    position: relative;
    box-shadow: 0 3.78px 0 #8E8CFE;
    border-radius: 10px;
    font-size: 16px;
    line-height: 32px;
    font-weight: 600;
    color: #fff;
    top: -16px
}

.dicover_data_container .discover_data_collection.small {
    max-width: 128px;
    width: 128px;
    height: 128px;
    gap: 20px
}

.discover_data_collection.small .dicover_data_image {
    height: 128px;
    width: 128px;
    border-radius: 40px
}

.dicover_data_container .discover_data_collection.medium {
    max-width: 280px;
    width: 280px;
    min-width: 280px
}

.discover_data_collection.medium .dicover_data_image {
    height: 130px;
    min-height: 130px
}

.discover_data_collection .dicover_data_image {
    object-fit: fill;
    max-width: 100%
}

.one_click_discover_collections {
    width: 80%;
    margin: 80px auto auto;
    position: relative
}

.one_click_discover_collections .left-arrow,
.one_click_discover_collections .right-arrow {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .12);
    background-color: #fff;
    padding: 4px;
    top: 50%;
    cursor: pointer
}

.one_click_discover_collections .left-arrow {
    left: -10px;
    transform: rotate(180deg);
    display: none
}

.one_click_discover_collections .one_click_collections_heading {
    line-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 28px;
    font-weight: 600;
    text-align: left;
    color: #333
}

.one_click_discover_collections .one_click_container {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    gap: 16px;
    margin-top: 16px;
    padding: 0 10px;
    scroll-behavior: smooth
}

.one_click_container .one_click_item {
    min-width: 170px;
    width: 170px
}

.one_click_item .item_image_holder {
    width: 100%;
    max-width: 100%;
    min-height: 220px;
    max-height: 220px;
    position: relative;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    background: #fff;
    display: flex;
    align-items: flex-end;
    margin-bottom: 6px
}

.info .item_name,
.info .merchant_name {
    line-height: 20px;
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.item_image_holder.square {
    min-height: 170px;
    max-height: 170px
}

.one_click_item .home_delivery_tag {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    height: 20px
}

.item_image_holder .item-primary-type {
    position: absolute;
    top: 8px;
    left: 8px
}

.one_click_item .info {
    color: #191C32;
    max-width: 192px
}

.info .item_name {
    font-weight: 500;
    max-height: 40px;
    min-height: 40px;
    -webkit-line-clamp: 2
}

.info .merchant_name {
    font-weight: 600;
    max-height: 20px;
    min-height: 20px;
    -webkit-line-clamp: 1
}

.info .subtitle {
    font-size: 14px;
    line-height: 16px;
    color: #a0a0a0;
    margin: 2px 0
}

.container .price_info {
    width: 100%
}

.price_info .price {
    font-size: 16px;
    line-height: 20px;
    color: #191C32;
    font-weight: 600
}

.price_info .mrp {
    color: #a0a0a0;
    font-size: 12px;
    line-height: 16px;
    text-decoration: line-through;
    font-weight: 500;
    margin: 0 2px
}

.discover_data_collection_save_discount {
    margin-top: -32%;
    font-size: 12px;
    text-decoration: line-through;
    color: #858587;
    line-height: 18px
}

.vertical_image_container .banner-image-holder {
    width: 100%
}

.vertical_image_container .banner-image-holder img {
    width: 100%;
    display: block
}

.vertical_image_container {
    width: 80%;
    margin: 80px auto auto
}

@media (max-width:1000px) {
    .data_discover_collections_heading .home-brands-title {
        font-size: 32px;
        line-height: 48px
    }
}

@media (max-width:800px) {

    .deal_trends,
    .floating_banners,
    .one_click_discover_collections,
    .wallet_intro {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 40px
    }

    .data_discover_collections {
        width: 100%;
        margin-top: 40px
    }

    .data_discover_collections .data_discover_collections_heading {
        padding-left: 16px;
        padding-right: 16px
    }

    .data_discover_collections.data_collection_widget {
        padding-left: 0;
        padding-right: 0
    }

    .vertical_image_container {
        width: 100%;
        margin-top: 20px
    }

    .deal_trends .trends_container,
    .dicover_data_container .discover_data_collection {
        margin-top: 12px
    }

    .collection_data_container {
        gap: 0
    }

    .data_discover_collections .data_discover_collections_heading,
    .deal_trends .deal_trend_title,
    .one_click_discover_collections .one_click_collections_heading {
        line-height: 28px;
        font-size: 20px;
        padding-bottom: 4px
    }

    .discover_data_collection.small .discover_data_collection_title {
        font-size: 12px;
        line-height: 16px
    }

    .data_discover_collections .dicover_data_container {
        display: grid;
        overflow-x: scroll;
        overflow-y: hidden;
        gap: 24px;
        padding-right: 10px
    }

    .dicover_data_container .discover_data_collection.medium {
        width: 100%
    }

    .data_discover_collections .dicover_data_container.small {
        grid-template-columns: repeat(6, auto);
        padding-left: 16px;
        padding-right: 16px;
        row-gap: 0
    }

    .collection_data_title.title_2 {
        font-size: 16px
    }

    .data_discover_collections .dicover_data_container.medium {
        display: flex;
        padding-left: 16px;
        padding-right: 16px
    }

    .dicover_data_container .discover_data_collection.small {
        width: 84px;
        height: 94px;
        max-width: 84px;
        gap: 8px
    }

    .discover_data_collection.small .dicover_data_image {
        height: 84px;
        width: 84px
    }

    .discover_data_collection.medium .dicover_data_image {
        height: 104px;
        min-height: 104px
    }

    .discover_data_collection.medium .discover_data_collection_title {
        font-size: 12px
    }

    .discover_data_collection.small .discover_data_collection_subtitle {
        font-size: 10px;
        transform: translateY(calc(-8px - 50%))
    }

    .card-tag {
        width: 100px
    }
}

@media (max-width:700px) {
    .data_discover_collections_heading .home-brands-title {
        font-size: 16px;
        line-height: 24px
    }
}

#share-social-container-floating {
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 100px;
    right: 27px;
    z-index: 10
}

#share-social-main-cta {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .4);
    position: fixed;
    bottom: 100px;
    right: 27px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2)
}

.share-social-main-cta-img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: auto;
    line-height: 65px;
    transition: all .4s;
    animation: share-social-main-cta-img-out .6s
}

@keyframes share-social-main-cta-img-in {
    from {
        transform: rotateZ(-360deg)
    }

    to {
        transform: rotateZ(0)
    }
}

@keyframes share-social-main-cta-img-out {
    from {
        transform: rotateZ(0)
    }

    to {
        transform: rotateZ(-360deg)
    }
}

.share-social-container-node {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: fixed;
    z-index: 300;
    transform: scale(0);
    cursor: pointer;
    right: 36px;
    animation-fill-mode: forwards
}

.share-social-container-node3 {
    bottom: 180px
}

.share-social-container-node2 {
    bottom: 240px;
    animation: bounce-out-share-social-container-node 412ms linear
}

.share-social-container-node1 {
    bottom: 300px;
    animation: bounce-out-share-social-container-node 256ms linear
}

@keyframes bounce-share-social-container-node {
    from {
        opacity: 0
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes bounce-out-share-social-container-node {
    from {
        opacity: 1;
        transform: scale(1)
    }

    to {
        opacity: 0;
        transform: scale(0)
    }
}

@media (max-width:800px) {

    #share-social-container-floating,
    #share-social-main-cta {
        bottom: 120px;
        right: 20px
    }

    #share-social-main-cta {
        width: 45px;
        height: 45px
    }

    .share-social-main-cta-img {
        animation: none
    }

    .share-social-container-node-logo {
        width: 40px;
        height: 40px
    }

    .share-social-container-node {
        right: 20px
    }

    .share-social-container-node3 {
        bottom: 175px
    }

    .share-social-container-node2 {
        bottom: 235px
    }

    .share-social-container-node1 {
        bottom: 295px
    }

    .show-social-container-node {
        animation: bounce-share-social-container-node .1s linear;
        animation-fill-mode: forwards
    }

    .show-social-container-node3 {
        animation-delay: 64ms
    }

    .show-social-container-node2 {
        animation-delay: 128ms
    }

    .show-social-container-node1 {
        animation-delay: 256ms
    }

    .collection_data_container.collection_brand_data_container {
        gap: 0
    }
}

@media (min-width:800px) {
    .share-social-container-node3 {
        transform: scale(1)
    }

    #share-social-container-floating:hover {
        height: 400px;
        width: 90px;
        padding: 30px
    }

    #share-social-container-floating:hover .share-social-main-cta-img {
        animation: share-social-main-cta-img-in .4s;
        animation-delay: .2s;
        animation-fill-mode: forwards
    }

    .share-social-container-node:active,
    .share-social-container-node:focus,
    .share-social-container-node:hover {
        right: 40px
    }

    #share-social-container-floating:hover .share-social-container-node {
        animation: bounce-share-social-container-node .1s linear;
        animation-fill-mode: forwards
    }

    #share-social-container-floating:hover .share-social-container-node2 {
        animation-delay: 64ms
    }

    #share-social-container-floating:hover .share-social-container-node1 {
        animation-delay: 128ms
    }

    .collection_data_title {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1
    }
}

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

    .collection_data_subtitle,
    .collection_data_title {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .collection_data_medium {
        width: 224px;
        height: 132px
    }

    .collection_large {
        width: 180px;
        height: 180px
    }

    .collection_data_title {
        font-size: 16px;
        display: -webkit-box;
        padding: 0
    }

    .collection_data_subtitle {
        font-size: 14px;
        display: block;
        white-space: nowrap;
        max-width: 100%;
        text-overflow: ellipsis
    }
}

.vertical-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - 64px)/ 5), 1fr));
    padding-left: 0;
    padding-right: 0
}

.collection-buddles-layout img {
    max-width: 100%;
    height: auto
}

.vertical-grid-layout .left-arrow,
.vertical-grid-layout .right-arrow {
    display: none
}

.primary-header .site-header,
.site-header .get-app {
    display: flex;
    align-items: center
}

@media (max-width:1000px) {
    .vertical-grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - 32px)/ 3), 1fr))
    }
}

@media (max-width:800px) {
    .vertical-grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - 16px)/ 3), 1fr));
        padding-left: 8px;
        padding-right: 8px;
        gap: 8px
    }
}

@media (max-width:600px) {
    .vertical-grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(calc((100% - 8px)/ 2), 1fr))
    }
}

.primary-header {
    width: 100%;
    position: relative;
    margin: 0 auto;
    background-position: bottom;
    background-repeat: no-repeat;
    border-bottom-left-radius: 200px;
    border-bottom-right-radius: 200px;
    box-sizing: border-box
}

.overlay {
    z-index: -1;
    width: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    transition: opacity .5s
}

.primary-header.loaded {
    background: rgba(0, 0, 0, .2)
}

.primary-header.loaded .overlay {
    opacity: 1;
    animation: animate-move-bg 30s;
    animation-timing-function: linear;
    animation-fill-mode: forwards
}

@keyframes animate-move-bg {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-200px)
    }
}

@media (max-width:800px) {
    .primary-header {
        height: 700px;
        background-size: 172%;
        background-position: bottom left
    }

    .overlay {
        height: 134%;
        width: auto
    }
}

body {
    background: #fff
}

.primary-header .site-header {
    width: 100%;
    padding: 32px 108px;
    background: 0 0;
    margin: 0 auto;
    box-shadow: none;
    position: initial;
    justify-content: space-between;
    gap: 16px
}

.site-header.open {
    margin-top: 44px
}

.site-header.nye-open {
    margin-top: 50px
}

.site-header .logo {
    height: 50px;
    width: auto;
    transition: .2s transform;
    margin-right: 30px
}

.site-header .logo:hover {
    transform: scale(1.1)
}

.site-header .logo-text {
    color: #fff;
    line-height: 20px;
    position: relative;
    top: 22px;
    left: -108px
}

.search-loader {
    top: 16px !important
}

.get-app div {
    display: inline-block;
    font-size: 14px;
    line-height: 1.43;
    color: #FBFBFB;
    vertical-align: top
}

.get-app .store-logo {
    cursor: pointer
}

.store-logo img {
    height: 24px;
    width: 24px
}

.site-header .site-nav {
    font-family: Poppins, sans-serif;
    display: flex;
    align-items: center;
    gap: 32px;
    background-color: #2A0C8E;
    padding: 10px 24px;
    border-radius: 40px;
    flex-wrap: nowrap;
    white-space: nowrap
}

.site-nav .site-links {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: #FBFBFB
}

.site-nav .nye-button {
    position: absolute;
    display: inline-block;
    padding: 10px 14px;
    color: #FFF;
    background: #1c003d;
    border-radius: 4px;
    font-weight: 700;
    margin-left: -100px;
    font-size: 14px;
    border: none;
    overflow: hidden;
    top: -4px;
    -webkit-animation: zoominout 2.5s ease-out infinite normal;
    animation: zoominout 2.5s ease-out infinite normal;
    -moz-animation: zoominout 2.5s ease-out infinite normal
}

@-webkit-keyframes zoominout {

    0%,
    100% {
        -webkit-transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.2)
    }
}

@-moz-keyframes zoominout {

    0%,
    100% {
        -moz-transform: scale(1)
    }

    50% {
        -moz-transform: scale(1.2)
    }
}

@keyframes zoominout {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.2)
    }
}

.site-nav .nye-button::before {
    position: absolute;
    content: "";
    width: 40px;
    height: 100%;
    z-index: 10;
    background: linear-gradient(to right, rgba(255, 255, 255, .13) 0, rgba(255, 255, 255, .63) 40%, rgba(255, 255, 255, .63) 60%, rgba(255, 255, 255, .13) 100%);
    -webkit-animation: shimmereffect 2.5s infinite;
    animation: shimmereffect 2.5s infinite;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    top: 0
}

.site-nav .about-link,
.site-nav .business-link {
    display: none;
    background: #fff;
    min-width: 150px;
    border-radius: 4px;
    box-shadow: 0 3px 8px 0 rgb(0 0 0 / 12%);
    position: absolute;
    z-index: 1
}

.site-nav .nav-arrow {
    vertical-align: middle
}

.site-nav .business-link {
    top: 50px
}

.site-nav .about-link {
    text-transform: capitalize
}

.about-link .links:hover,
.business-link .links:hover {
    background: #eee
}

.about-link:after,
.business-link:after {
    bottom: 100%;
    left: 50%;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border: 8px solid transparent;
    border-bottom-color: #fff;
    margin-left: -8px;
    z-index: 1
}

.about-link .links:first-child:hover,
.business-link .links:first-child:hover {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px
}

.about-link .links:last-child:hover,
.business-link .links:last-child:hover {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px
}

.site-nav .mp-about {
    display: inline-block
}

.site-nav .mp-about:hover {
    display: block
}

.site-nav .mp-business {
    display: inline-block
}

.site-nav .mp-about:hover .about-link,
.site-nav .mp-business:hover .business-link {
    top: auto;
    display: block
}

.about-link .links,
.business-link .links {
    padding: 12px 8px;
    font-size: 12px;
    display: block;
    transition: 1s all;
    float: none
}

.links .link-arrow {
    float: right;
    padding-top: 6px;
    width: 6px
}

.site-nav a.highlight {
    padding: 10px 12px;
    border: 1px solid #fcfcfc;
    border-radius: 4px
}

.primary-header .home-login-popup {
    display: inline-block;
    margin-left: 8px
}

.primary-header .login-cta {
    display: flex;
    font-size: 16px;
    background: #ef1c71;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    padding: 4px 8px;
    color: #FFF;
    line-height: 24px;
    font-weight: 600;
    cursor: pointer
}

@media (max-width:1200px) {
    .primary-header .site-header {
        padding: 32px 60px
    }

    .site-header .site-nav {
        gap: 20px;
        padding: 8px 16px
    }

    .site-header .logo {
        margin-right: 10px
    }

    .site-nav .site-links {
        font-size: 14px
    }

    .primary-header .home-login-popup {
        margin-left: 8px
    }

    .primary-header .login-cta {
        font-size: 14px;
        line-height: 20px
    }
}

@media (max-width:1000px) {
    .primary-header .site-header {
        padding: 32px
    }

    .site-header .site-nav {
        gap: 12px;
        padding: 8px 12px
    }

    .get-app div,
    .site-nav .site-links {
        font-size: 12px
    }

    .site-header .logo {
        margin-right: 0;
        height: 35px;
        width: auto
    }

    .primary-header .login-cta {
        font-size: 12px;
        line-height: 18px
    }
}

@media (max-width:800px) {
    .primary-header .site-header {
        padding: 8px;
        display: flex
    }

    .site-header.open {
        margin-top: 62px
    }

    .site-header.open-job {
        margin-top: 66px
    }

    .site-header .get-app {
        float: none;
        vertical-align: middle;
        margin: auto 8px auto auto
    }

    .site-header .logo {
        height: 32px
    }

    .logo-holder .logo {
        height: 35px;
        margin-left: 20px
    }

    .primary-header .home-login-popup {
        display: inline-block;
        padding: 16px 0
    }

    .primary-header .logo-holder {
        display: block;
        text-align: center
    }

    .primary-header .login-cta {
        display: inline-block;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        margin-left: 8px
    }
}

.mobile-header {
    width: 100%;
    height: 310px;
    position: relative;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: auto;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    font-family: Poppins, sans-serif
}

.mobile-header .home-header-section {
    width: 100%;
    position: relative;
    text-align: center;
    padding: 40px 16px
}

.mobile-header .home-header-section h1 {
    font-size: 14px;
    color: #fff;
    line-height: 20px;
    margin: 42px auto 32px;
    font-weight: 500
}

.mobile-header .home-header-section h1 span {
    color: #EF1C74
}

.home-header-section .home-login-popup {
    position: absolute;
    top: 16px;
    right: 16px
}

.home-header-section .logo-holder {
    position: absolute;
    top: 16px;
    left: 16px
}

.home-header-section .header-bg-img {
    width: 100%;
    min-height: 170px
}

.home-header-section .mgp-logo-white {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 56px
}

.mobile-header .location-container {
    position: absolute;
    top: 0;
    max-width: 60%
}

.home-header-section .header-title {
    line-height: 24px;
    font-size: 14px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 700
}

.mobile-header .login-cta {
    background-color: #ef1c74;
    padding: 4px 12px;
    top: 16px;
    right: 22px;
    border-radius: 4px;
    line-height: 16px;
    font-size: 12px;
    color: #fff
}

.mobile-header .search-bar-holder {
    height: 40px;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    position: absolute;
    width: calc(100% - 56px);
    margin-left: 28px;
    margin-right: 28px;
    z-index: 100;
    bottom: 60px;
    background: #fff
}

.search-bar-holder .home-search-bar {
    height: 40px;
    border: none;
    padding-left: 42px;
    background: url("search.svg") 12px 50% no-repeat;
    width: 100%
}

.mobile-header .stick-home-search-bar {
    position: fixed;
    box-shadow: none;
    top: 150px;
    height: 58px;
    width: 100%;
    margin-left: 0;
    border-radius: 0
}

.mobile-header .sticky-header {
    background: linear-gradient(#240a7a, #2e108e);
    display: none;
    position: fixed;
    z-index: 101;
    width: 100%;
    height: 56px;
    top: 0;
    justify-content: space-between;
    padding: 8px 20px
}

.company-details-holder .company-logo {
    height: 24px
}

.company-details-holder .sticky-header-title {
    font-weight: 700;
    color: #fff;
    line-height: 16px;
    font-size: 10px;
    text-align: center
}

.primary-header .header-content {
    width: 100%;
    font-size: 48px;
    line-height: 56px;
    text-align: center;
    margin: 0 auto;
    max-width: 1400px
}

.header-content h1 {
    font-size: 36px;
    color: #fff;
    line-height: 44px;
    margin: 32px auto;
    font-weight: 800
}

.header-content h1 span {
    color: #ef1c74
}

.header-content .home-search {
    width: 100%
}

.home-search .header-search {
    margin: 0 auto;
    line-height: 0;
    display: flex;
    justify-content: center;
    height: 50px
}

.header-search .search-location,
.header-search .search-query {
    display: inline-block;
    position: relative;
    border-radius: 0
}

.header-search .search-location {
    border-right: 1px solid rgba(0, 0, 0, .12);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.header-search .search-query {
    margin-left: 0;
    border-radius: 0
}

.header-search button,
.header-search input {
    display: inline-block;
    background: #fff;
    border: none;
    padding: 12px 8px;
    font-size: 16px
}

.header-search .search-button {
    color: #ef1c74;
    background: #fff;
    cursor: pointer;
    text-align: center;
    padding: 12px 16px 12px 20px;
    height: auto;
    margin-left: 0;
    font-size: 16px;
    border: 1px solid;
    border-radius: 4px;
    width: 170px;
    font-weight: 600
}

.header-search .search-button:hover {
    background: #cd0b5b
}

.search-location input.location {
    width: 200px;
    background: url("") 16px 12px no-repeat;
    background-size: 24px;
    padding-left: 48px
}

.search-query input.query {
    width: 550px;
    background: url("search.svg") 16px 12px no-repeat;
    padding-left: 42px
}

.search-location .location-holder {
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    height: 100%;
    width: 100%;
    border-radius: 8px 0 0 8px
}

.location-holder .selected-location {
    width: 100%;
    height: 100%;
    background: url("") 16px 12px no-repeat;
    background-size: 24px;
    padding: 12px 16px 16px 48px;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    border: 0
}

.search-location .search-location-results,
.search-query .search-query-results {
    width: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    top: 52px;
    z-index: 1000;
    list-style: none;
    max-height: 500px;
    overflow: auto;
    border-radius: 8px
}

.search-location-results li,
.search-query-results li {
    text-overflow: ellipsis;
    padding: 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
    line-height: 18px;
    border-bottom: 1px solid #ECEEF4;
    color: #3e5561;
    position: relative;
    text-align: left
}

.search-query-results li .query-item-description {
    font-size: 12px;
    color: #637e8c
}

.search-location-results li:hover,
.search-query-results li:hover {
    background: #ECEEF4
}

.search-query-results li:hover {
    background: #fff
}

@media (max-width:800px) {

    .header-content .header-search,
    .primary-header .header-content {
        width: 100%
    }

    .header-content h1 {
        font-size: 50px
    }

    .header-search .search-location,
    .header-search .search-query {
        width: 80%;
        margin: 0 auto
    }

    .header-search .search-query {
        margin-top: 16px
    }

    .header-search input.location,
    .header-search input.query,
    .search-location .location-holder {
        width: 100%;
        overflow: hidden;
        font-size: 16px
    }

    .header-search .search-button {
        margin: 16px 0;
        font-size: 20px;
        width: 80%;
        border-radius: 4px;
        border: none
    }

    .location-holder .selected-location {
        background-size: 24px
    }

    .search-location .search-location-results,
    .search-query .search-query-results {
        max-height: 286px
    }

    .header-search .search-location,
    .header-search .search-query {
        border-radius: 4px
    }
}

.header-content .header-categories {
    margin: 50px auto 100px;
    line-height: 20px;
    display: flex;
    justify-content: center;
    position: relative;
    top: 85px;
    z-index: 2
}

.header-categories .header-category {
    display: flex;
    width: 144px;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    line-height: 20px;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, .87);
    margin: 0 8px
}

.header-category .category-logo {
    width: 110px;
    height: 110px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .24);
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center
}

.home-section-ads-ft-link {
    display: flex;
    justify-content: center;
    margin: 0 auto 48px;
    width: 80%;
    padding: 0 8px
}

.home-section-ads-img {
    width: 100%
}

.home-section-ft {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 18px 0
}

.home-section-ft .carousel-viewport {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative
}

.home-section-ft .carousel-track {
    display: flex;
    align-items: center;
    will-change: transform
}

.home-section-ft .carousel-slide {
    flex: 0 0 auto;
    box-sizing: border-box;
    transition: transform .6s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    padding: 0 12px
}

@media (max-width:800px) {
    .home-section-ft {
        padding: 0
    }

    .home-section-ft .carousel-slide {
        width: 90%;
        padding: 0 10px
    }

    .home-section-ads-ft-link {
        width: 100%;
        margin: 0 0 26px;
        padding: 0
    }

    .home-section-ads-img {
        width: 100%
    }
}

.home-section-ft .carousel-slide>.home-section-ads-ft-link {
    width: 100%
}

.home-section-ft.paused .carousel-track {
    cursor: grabbing
}

.lowest-price-container {
    width: 100%;
    display: flex;
    justify-content: center
}

.lowest-price-container .underline-container {
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #F6F6FB;
    font-family: Poppins, sans-serif
}

.lowest-price-container .underline-container .lowest-price-message {
    font-size: 40px;
    line-height: 44px;
    font-weight: 600;
    color: #3716A8
}

.lowest-price-container .underline-container .custom-underline {
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, #3816A800 0, #3716A8 50%, #3716A800 100%)
}

@media (max-width:1000px) {
    .lowest-price-container .underline-container .lowest-price-message {
        font-size: 32px;
        line-height: 48px
    }

    .lowest-price-container .underline-container .custom-underline {
        height: 2px
    }
}

@media (max-width:700px) {
    .lowest-price-container .underline-container .lowest-price-message {
        font-size: 16px;
        line-height: 24px
    }

    .lowest-price-container .underline-container .custom-underline {
        height: 1px
    }
}

.home-content {
    width: 100%;
    position: relative;
    background: #F6F6FB
}

.home-content .content {
    width: 100%;
    white-space: nowrap;
    padding-top: 40px
}

.arrow-holder .arrow-left,
.arrow-holder .arrow-right {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    background: #fff;
    padding: 10px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12);
    z-index: 1;
    border-radius: 50%
}

.arrow-holder .arrow-left {
    left: -14px
}

.arrow-holder .arrow-right {
    right: -14px
}

.home-content .nye-content {
    position: absolute;
    width: 90%;
    height: 176px;
    background-color: #1c003d;
    border-radius: 8px;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate(-50%, -50%);
    text-align: center;
    padding-top: 32px;
    left: 50%;
    top: 34px;
    z-index: 1000
}

.home-content .diwali-banner-holder {
    height: 380px;
    width: 80%;
    position: relative;
    display: block;
    margin: -20px auto auto
}

.diwali-banner-holder .diwali-banner {
    height: 100%;
    width: 100%
}

.diwali-banner-holder .banner-info {
    position: absolute;
    z-index: 1;
    top: 40%;
    right: 15%;
    width: 42%
}

.banner-info .banner-cta {
    display: inline-block;
    color: #fff;
    padding: 16px 48px;
    background: #ef1c74;
    margin-top: 40px;
    border-radius: 4px;
    font-weight: 500
}

.banner-info .info-heading {
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    line-height: 28px
}

.nye-content .know-more::before {
    position: absolute;
    content: "";
    width: 40px;
    height: 100%;
    z-index: 10000;
    background: linear-gradient(to right, rgba(255, 255, 255, .13) 0, rgba(255, 255, 255, .63) 40%, rgba(255, 255, 255, .63) 60%, rgba(255, 255, 255, .13) 100%);
    -webkit-animation: shimmereffect 2.5s infinite;
    animation: shimmereffect 2.5s infinite;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    top: 1px
}

@keyframes shimmereffect {
    0% {
        left: -40px
    }

    100% {
        left: 100%
    }
}

@-webkit-keyframes shimmereffect {
    0% {
        left: -40px
    }

    100% {
        left: 100%
    }
}

.nye-content .nye-header {
    width: 100%;
    height: 24px;
    font-family: Roboto, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 10px;
    color: #fff;
    margin-top: 0
}

.nye-content .nye-subheader {
    width: 100%;
    height: 20px;
    font-family: Roboto sans-serif;
    font-size: 16px;
    line-height: 1.25;
    text-align: center;
    color: #fff;
    margin-bottom: 25px
}

.nye-content .know-more {
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .8px;
    color: #1c003d;
    border: none;
    padding: 12px 28px;
    position: relative
}

@media (max-width:800px) {
    .home-content .nye-content {
        width: 80%;
        height: 127px;
        padding-top: 16px;
        top: 2px;
        transform: translate(-50%, -25%)
    }

    .nye-content .nye-header {
        height: 15px;
        font-size: 16px
    }

    .nye-content .nye-subheader {
        font-size: 12px
    }

    .nye-content .know-more {
        font-size: 12px;
        padding: 8px 12px
    }

    .home-content .diwali-banner-holder {
        width: 96%;
        height: auto;
        margin-top: -52px
    }

    .banner-info .info-heading {
        font-size: 12px;
        font-weight: 500;
        color: #fff;
        line-height: 1.4
    }

    .banner-info .banner-cta {
        display: inline-block;
        color: #fff;
        padding: 6px 18px;
        background: #ef1c74;
        margin-top: 8px;
        border-radius: 4px;
        font-weight: 500;
        font-size: 12px
    }

    .diwali-banner-holder .banner-info {
        position: absolute;
        z-index: 1;
        top: 40%;
        right: 2%;
        width: 56%
    }

    .diwali-banner-holder .diwali-banner {
        height: auto
    }
}

.content .scroll-holder {
    width: 100%;
    display: inline-block;
    overflow: hidden
}

.content .content-holder {
    width: 100%;
    padding: 24px 0;
    overflow: hidden;
    clear: both
}

.content .content-header-container {
    width: 1136px;
    margin: 0 auto;
    padding: 0 8px
}

.content-header-container .content-header {
    font-size: 28px;
    line-height: 24px;
    text-align: left;
    padding-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis
}

.content-header-container .content-subheader {
    font-size: 16px;
    line-height: 20px;
    text-align: left;
    color: rgba(0, 0, 0, .54)
}

.content-header-container .view-more {
    display: inline-block;
    float: right;
    color: #ef1c74;
    padding: 10px 16px;
    border-radius: 4px;
    font-weight: 500;
    background: #fff
}

.collection h3,
.collection h5 {
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .8)
}

.content-header-container .view-more:hover {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
    background: rgba(255, 255, 255, .63)
}

@media (max-width:800px) {
    .content .content-header {
        font-size: 16px;
        font-weight: 700;
        text-align: left;
        padding: 0
    }

    .content .content-subheader {
        font-size: 12px;
        text-align: left;
        padding-bottom: 12px;
        white-space: initial
    }

    .content .content-holder {
        padding-top: 0;
        padding-bottom: 4px
    }

    .home-content .content {
        padding-bottom: 0
    }

    .content .content-header-container,
    .content .scroll-holder {
        width: 100%
    }

    .content-header-container .view-more {
        font-size: 12px;
        margin-right: 0;
        background: 0 0
    }
}

.home-content .save-the-local-banner {
    width: 1136px;
    display: block;
    margin: 64px auto 0
}

.save-the-local-banner .banner {
    width: 100%;
    border-radius: 8px
}

@media (max-width:800px) {
    .home-content .save-the-local-banner {
        width: 96%;
        margin-top: 36px
    }
}

.home-content .collections {
    background-color: #fff;
    height: auto;
    padding-top: 64px;
    overflow: hidden;
    position: relative
}

.collections .content-holder {
    justify-content: center;
    width: 1136px;
    margin: 0 auto
}

.collections .arrow-holder {
    width: 1136px;
    position: relative;
    margin: 0 auto
}

.collections .collection {
    width: 240px;
    height: 140px;
    border-radius: 8px;
    position: relative;
    display: inline-block;
    background: url("") center no-repeat;
    margin: 0 8px;
    cursor: pointer;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .25);
    vertical-align: top
}

.collection .collection-image,
.collection .details-holder,
.collection .overlay-holder {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px
}

.collections .collection:hover {
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .12);
    transform: scale(1.02)
}

.collection .details-holder,
.collection .overlay-holder {
    top: 0;
    left: 0
}

.collection .overlay-holder {
    background-color: rgba(0, 0, 0, .4)
}

.collection .details-holder {
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    flex-direction: column
}

.collection h3 {
    font-size: 20px;
    font-weight: 700;
    text-align: center
}

.collection h5 {
    font-size: 14px;
    line-height: 1.43;
    text-align: center
}

@media (max-width:800px) {
    .collection h3 {
        font-size: 16px
    }

    .collections .arrow-holder,
    .collections .content-holder {
        width: auto
    }

    .home-content .collections {
        padding-bottom: 0;
        padding-top: 36px
    }

    .collections .collection {
        margin: 0 8px
    }
}

.localities {
    width: 100%
}

.localities .content-holder {
    display: flex;
    justify-content: center
}

.localities .locality {
    flex: 1;
    cursor: pointer;
    margin: 0 16px;
    width: 300px
}

.locality .banner-holder {
    height: 180px
}

.locality .banner {
    width: 100%;
    background: #e5e5e5;
    opacity: 0;
    border-radius: 4px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s
}

.blogs .blog,
.deals .deal {
    border-radius: 8px;
    cursor: pointer;
    vertical-align: top
}

.blog .banner-holder,
.deal .banner-holder {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    object-fit: fill
}

.blog .blog-details,
.deal .merchant-details {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}

.locality .banner-holder.loaded .banner {
    opacity: 1
}

.banner-holder.loaded .banner:hover {
    transform: scale(1.1)
}

.locality:hover .banner {
    box-shadow: 0 4px 8px 0 rgba(62, 85, 97, .8)
}

.locality h3 {
    font-size: 20px;
    text-align: center;
    color: #3e5561;
    margin-top: 16px
}

.locality h5 {
    font-size: 14px;
    line-height: 1.43;
    color: #637e8c;
    text-align: center
}

@media (max-width:800px) {
    .localities .content-holder {
        display: block;
        overflow: auto
    }

    .localities .locality {
        display: inline-block;
        width: 280px;
        margin: 0 8px
    }
}

.home-content .blogs {
    width: 100%;
    text-align: center;
    position: relative;
    vertical-align: top;
    padding-top: 64px
}

.home-content .extra-padding {
    padding-top: 90px
}

.blogs .arrow-holder {
    width: 1136px;
    display: inline-block;
    position: relative;
    margin: 0 auto
}

.blogs .blog {
    width: 350px;
    margin: 0 8px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .25);
    display: inline-block;
    transition: .2s all
}

.blogs .blog:hover {
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .12)
}

.blog .banner-holder {
    height: 180px;
    background: #e5e5e5;
    overflow: hidden
}

.blog .blog-details {
    width: 100%;
    padding: 12px 16px;
    height: 60px;
    overflow: hidden;
    background: #fff
}

.blog-details h3 {
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.33;
    color: rgba(0, 0, 0, .87);
    white-space: normal;
    display: block;
    height: 38px;
    overflow: hidden
}

@media (max-width:800px) {
    .blogs .arrow-holder {
        width: 100%
    }

    .blogs .blog {
        width: 280px;
        margin: 0 8px
    }

    .blog .blog-details {
        height: 52px
    }
}

.deals {
    width: 100%;
    text-align: center
}

.deals .arrow-holder {
    width: 1136px;
    display: inline-block;
    position: relative;
    margin: 0 auto
}

.deals .deal {
    width: 250px;
    margin: 0 8px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .25);
    display: inline-block
}

.deals .deal:hover {
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .12)
}

.deal .banner-holder {
    height: 158px;
    background: #e5e5e5;
    overflow: hidden;
    position: relative
}

.banner-holder .banner {
    height: 100%
}

.deal .merchant-details {
    width: 100%;
    padding: 4px 6px 6px 4px;
    position: relative;
    background: #fff
}

.deal .merchant-details .merchant-logo {
    position: absolute;
    top: 0;
    left: 50%;
    height: 40px;
    width: 40px;
    border-radius: 4px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 20
}

.deal .merchant-details h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    color: rgba(0, 0, 0, .87);
    margin-top: 28px;
    overflow: hidden;
    text-overflow: ellipsis
}

.deal .merchant-details h5 {
    font-size: 14px;
    line-height: 1.43;
    text-align: center;
    color: rgba(0, 0, 0, .87);
    margin-bottom: 8px
}

.deal .merchant-details h6 {
    display: block;
    display: -webkit-box;
    height: 48px;
    width: 228px;
    font-size: 14px;
    line-height: 1.43;
    text-align: center;
    color: rgba(0, 0, 0, .54);
    padding: 4px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0 auto
}

@media (max-width:800px) {
    .deals .arrow-holder {
        width: 100%
    }

    .deals .deal {
        margin: 0 8px
    }
}

.home-content .highlights {
    width: 100%;
    text-align: center
}

.highlights .arrow-holder {
    width: 1136px;
    display: inline-block;
    position: relative;
    margin: 0 auto
}

@media (max-width:800px) {
    .highlights .arrow-holder {
        width: 100%
    }
}

.home-content .popular-cuisines {
    overflow: hidden;
    width: 100%;
    text-align: center
}

.popular-cuisines .arrow-holder {
    width: 1136px;
    display: inline-block;
    position: relative;
    margin: 0 auto;
    text-align: left
}

.content-holder .cuisine-card {
    display: inline-block;
    margin: 0 8px;
    width: 200px;
    height: 242px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .25);
    vertical-align: top
}

.content-holder .cuisine-card:hover {
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .12)
}

.cuisine-card .cuisine-container {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.cuisine-card .cuisine {
    height: 100%;
    border-radius: 8px
}

.cuisine-card img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px solid #fff;
    transition: .5s all
}

.cuisine-card img:hover {
    transform: scale(1.1)
}

.cuisine-card h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.33;
    color: #fff
}

.cuisine-card h4 {
    font-size: 14px;
    line-height: 1.43;
    color: #fff
}

@media (max-width:800px) {
    .popular-cuisines .arrow-holder {
        width: 100%
    }

    .content-holder .cuisine-card {
        margin: 0 8px
    }
}

.vouchers {
    width: 100%;
    text-align: center
}

.vouchers .arrow-holder {
    width: 1136px;
    display: block;
    position: relative;
    margin: 0 auto;
    text-align: left
}

.arrow-holder .slick-next,
.arrow-holder .slick-prev {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .24);
    padding: 10px;
    z-index: 1
}

.arrow-holder .slick-prev {
    left: -14px
}

.arrow-holder .slick-next {
    right: -14px
}

.vouchers .voucher {
    width: 250px;
    cursor: pointer;
    margin: 0 8px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .25);
    border-radius: 8px;
    display: inline-block;
    background: #fff;
    float: left;
    vertical-align: top;
    padding: 0
}

.vouchers .slick-slide {
    width: 268px
}

.vouchers .voucher:hover {
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .12)
}

.vouchers .banner-holder {
    height: 158px;
    object-fit: fill;
    background: #e5e5e5;
    overflow: hidden;
    position: relative;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px
}

.banner-holder .banner {
    opacity: 0;
    width: 100%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
    display: block
}

.banner-holder.loaded .banner {
    opacity: 1
}

.banner-holder .voucher-banner {
    opacity: 1;
    width: 100%;
    height: 100%
}

.voucher .voucher-merchant-details {
    width: 100%;
    padding: 12px 16px 12px 64px;
    position: relative
}

.voucher-merchant-details.super-saver h5 {
    padding-left: 0
}

.voucher .voucher-merchant-details .merchant-logo {
    position: absolute;
    top: 28px;
    left: 16px;
    height: 40px;
    width: 40px;
    border-radius: 2px;
    border: 1px solid #e5e5e5;
    z-index: 20
}

.voucher-merchant-details.super-saver .merchant-logo {
    top: auto
}

.voucher .voucher-merchant-details h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: rgba(0, 0, 0, .87);
    overflow: hidden;
    text-overflow: ellipsis
}

.voucher .voucher-merchant-details h5 {
    font-size: 14px;
    line-height: 1.43;
    color: rgba(0, 0, 0, .87);
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize
}

.voucher .voucher-details {
    width: 100%;
    padding: 0 16px 12px;
    position: relative
}

.voucher-details h3 {
    font-size: 14px;
    line-height: 1.43;
    color: rgba(0, 0, 0, .54)
}

.voucher-details h3 .voucher-price {
    color: rgba(0, 0, 0, .54);
    font-weight: 700
}

.voucher-details h5 {
    font-size: 14px;
    line-height: 1.43;
    color: rgba(0, 0, 0, .54)
}

.voucher-details .voucher-off {
    position: absolute;
    right: 16px;
    top: 50%;
    border: none;
    border-radius: 2px;
    background-color: #00ACB7;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.43;
    color: #fff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media (max-width:800px) {
    .vouchers .arrow-holder {
        width: 100%
    }

    .vouchers .voucher {
        margin: 0 8px
    }

    .vouchers .voucher:first-child {
        margin-left: 8px
    }

    .vouchers .slick-slide {
        width: 284px
    }
}

.home-content .app-content {
    background-color: #338aed;
    width: 100%;
    height: 400px;
    text-align: center;
    padding: 124px;
    margin-top: 60px
}

.app-content .content-wrapper {
    margin: 0 auto;
    width: 600px;
    padding-right: 200px;
    position: relative
}

.content-wrapper .app-shot {
    position: absolute;
    right: -70px;
    top: -176px;
    height: 428px
}

.content-wrapper h2 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 16px
}

.content-wrapper h3 {
    font-size: 16px;
    line-height: 1.25;
    text-align: center;
    color: #fff;
    margin-bottom: 20px
}

.content-wrapper .app-links {
    margin: 16px 0
}

.app-links img {
    margin: 0 8px
}

@media (max-width:800px) {
    .home-content .app-content {
        padding: 16px;
        height: 320px
    }

    .app-content .content-wrapper {
        width: 100%;
        padding-right: 100px
    }

    .content-wrapper h2 {
        font-size: 16px
    }

    .content-wrapper .app-shot {
        height: 200px;
        top: 16px;
        right: 0
    }

    .app-links img {
        width: 120px
    }
}

.brands-linking {
    background: #fff;
    width: 66%;
    margin: 0 auto;
    display: block;
    padding-bottom: 16px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -106px;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .12);
    border-radius: 8px;
    z-index: 1
}

.brands-linking .content {
    width: 50%;
    display: inline-block;
    padding: 8px;
    text-align: center;
    float: left;
    margin-top: 20px;
    cursor: pointer
}

.brands-linking .content:first-child {
    border-right: 1px solid rgba(0, 0, 0, .12)
}

.content .content-heading {
    color: #ef1c74;
    padding-top: 16px;
    font-weight: 700;
    display: block
}

.content .brands-logo {
    height: 40px;
    width: 40px;
    margin: 2px
}

.content .content-description {
    white-space: normal;
    font-size: 12px;
    color: rgba(0, 0, 0, .54);
    line-height: 1.4;
    padding: 8px 32px
}

.content .link-arrow {
    width: 40px
}

@media (max-width:800px) {
    .brands-linking {
        height: auto;
        bottom: -130px;
        padding-bottom: 0;
        width: 80%
    }

    .brands-linking .content {
        width: 100%;
        margin-top: 8px;
        text-align: left;
        position: relative;
        padding: 8px 16px
    }

    .content .content-heading {
        padding-top: 0
    }

    .content .content-description {
        width: 80%;
        padding: 12px 0
    }

    .content .link-arrow {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%)
    }

    .brands-linking .content:first-child {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, .12)
    }
}

.home-content .download-section {
    font-family: Poppins, sans-serif;
    height: 130px;
    width: 100%;
    background-size: cover;
    position: relative;
    margin-top: 40px
}

.download-section .download-mp {
    color: rgba(0, 0, 0, .87);
    text-align: center;
    padding-top: 40px;
    padding-bottom: 16px;
    font-size: 18px
}

.download-mp span {
    font-weight: 700
}

.download-section .download-description {
    font-size: 28px;
    text-align: center;
    font-weight: 700
}

.download-section .description-detail {
    text-align: center;
    font-size: 18px;
    padding: 16px 0 0
}

.download-section .category-holder {
    position: relative;
    display: block;
    margin: 40px auto;
    width: 50%;
    background-color: #fff;
    border-radius: 50px;
    text-align: center;
    border: 1px solid #ECEEF4
}

.category-holder .category {
    display: inline-block;
    width: 18%;
    margin: 12px 0
}

.category-holder .category:hover {
    font-weight: 700
}

.category .category-image {
    width: 34px;
    height: 34px;
    transform: scale(1.5)
}

.category .category-name {
    padding-top: 4px;
    color: rgba(0, 0, 0, .54)
}

.download-section .download-app-links {
    text-align: center;
    margin-top: 28px
}

.download-app-links .app-image {
    width: 120px;
    margin: 0 16px
}

@media (max-width:800px) {
    .home-content .download-section {
        width: 100%;
        height: 130px
    }

    .home-content .stick-home-discover-strip {
        width: 100%;
        position: fixed;
        z-index: 50;
        box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
        background: #fff;
        top: 56px
    }

    .download-section .category-holder {
        width: 92%;
        height: 72px;
        margin: 24px auto
    }

    .download-section .download-mp {
        font-size: 16px;
        padding-top: 32px;
        padding-bottom: 10px
    }

    .download-mp .link {
        color: #458eff
    }

    .download-section .download-description {
        font-size: 24px
    }

    .download-section .description-detail {
        font-size: 16px;
        padding: 10px 0
    }

    .category-holder .category {
        margin: 14px 0
    }

    .category .category-name {
        font-size: 12px
    }

    .category .category-image {
        height: 24px
    }

    .download-section .download-app-links {
        margin-top: 20px
    }

    .download-app-links .app-image {
        width: 120px;
        margin: 0 8px;
        height: 34px
    }
}

.download-link-container .info-text {
    font-size: 16px;
    text-align: center
}

.download-link-container .download-links {
    text-align: center;
    margin-top: 24px;
    position: relative
}

.download-links .country-code {
    width: 50px;
    text-align: center;
    height: 40px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    font-weight: 700;
    border-right: none
}

.download-links .mobile-number {
    width: 250px;
    padding-left: 12px;
    height: 40px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-left: none
}

.download-links .mobile-number:focus {
    border: 1px solid #458eff
}

.download-links .send-btn {
    width: 90px;
    height: 40px;
    border: none;
    background: #ef1c74;
    color: #fff;
    padding: 10px 12px;
    cursor: pointer;
    margin-left: 20px;
    border-radius: 4px
}

.download-links .errorText {
    position: absolute;
    bottom: -16px;
    left: 38%;
    font-size: 12px;
    text-align: center;
    color: red
}

@media (max-width:800px) {
    .download-link-container .download-links {
        margin-top: 8px
    }

    .download-links .errorText {
        left: 8%
    }

    .download-links .country-code {
        width: 10%;
        padding-left: 0
    }

    .download-links .mobile {
        width: 56%
    }

    .download-links .send-btn {
        width: 18%
    }
}

.site-footer {
    padding-top: 180px
}

::-webkit-scrollbar {
    width: 0;
    background: 0 0
}

.video-popup-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, .8)
}

.video-popup-overlay .popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    background: #000;
    padding: 6px;
    border-radius: 50%
}

.video-popup-overlay .video-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 720px;
    width: 1080px;
    z-index: 1000000;
    border-radius: 4px;
    background: #000
}

@media (max-width:800px) {
    .video-popup-overlay .video-popup {
        width: 100%;
        height: 450px
    }
}

.home-login-popup .wallet-balance-holder {
    border-radius: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.wallet-balance-holder .wallet-balance-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px
}

.wallet-balance-profile .wallet-balance-coin {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    padding: 7px 7px 7px 11px
}

.wallet-balance-holder.pro .userProfilePic {
    height: 40px;
    border-radius: 8px
}

.home-login-popup .wallet-balance-holder.pro {
    margin-top: 0;
    height: auto;
    background: 0 0;
    border-radius: 0
}

.home-login-popup .wallet-menu-balance-holder {
    display: flex;
    align-items: center;
    gap: 12px
}

.wallet-balance-holder.pro .magic-pro {
    height: 40px
}

.home-login-popup .tooltipContainer {
    position: relative;
    cursor: pointer
}

.tooltipContainer .homeTooltipText {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 210px;
    height: 40px;
    border-radius: 4px;
    border: .4px solid rgba(239, 28, 116, .3);
    background: linear-gradient(90deg, #2E108E, #EF1C74);
    color: #fff;
    line-height: 16px;
    font-size: 14px;
    top: 122%;
    left: -32%;
    animation: moveUpDown 5s linear 0s infinite;
    -webkit-animation-fill-mode: both;
    -webkit-animation-duration: 10s
}

.tooltipContainer .homeTooltipText::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 76%;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent rgba(239, 28, 116, .8)
}

.homeTooltipText .magicCoin {
    height: 12px;
    width: 12px;
    margin-left: 2px;
    margin-right: 9px
}

.homeTooltipText .closeIcon {
    height: 16px;
    width: 16px
}

.wallet-balance-holder .user-profile-pic {
    height: 36px;
    width: 38px;
    border-radius: 8px;
    border: 1px solid #FBFCFD
}

.user-profile-pic.default {
    background: #fff
}

.wallet-balance-holder .points-info {
    display: inline-block;
    color: #333;
    font-size: 16px;
    vertical-align: middle;
    font-weight: 600;
    line-height: 20px
}

.wallet-balance-holder .coin-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 2px
}

@media (max-width:800px) {

    .home-login-popup .wallet-balance-holder.pro,
    .homeTooltipText .magicCoin {
        margin-right: 0
    }

    .tooltipContainer .homeTooltipText {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        width: 184px;
        height: 30px;
        border-radius: 2px;
        background: #ef1c71;
        color: #fff;
        line-height: 16px;
        font-size: 12px;
        left: -12%;
        animation: moveUpDown 5s linear 0s infinite;
        -webkit-animation-fill-mode: both;
        -webkit-animation-duration: 10s
    }

    .homeTooltipText .closeIcon {
        margin-left: 2px
    }

    .tooltipContainer .homeTooltipText::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 60%;
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent #ef1c71
    }

    .home-login-popup .wallet-balance-holder {
        margin-top: 0;
        margin-left: 0;
        border-radius: 20px 0 0 20px;
        display: inline-block;
        padding-bottom: 1px;
        padding-top: 1px
    }

    .wallet-balance-holder .user-profile-pic {
        height: 24px;
        width: 24px;
        right: -16px;
        top: -6px
    }

    .wallet-balance-profile .wallet-balance-coin {
        padding: 3px 7px 3px 11px;
        border-radius: 8px
    }

    .wallet-balance-holder .points-info {
        font-size: 12px;
        line-height: 16px;
        font-weight: 600
    }

    .wallet-balance-holder .coin-icon {
        width: 16px;
        height: 16px
    }

    .sticky-header .wallet-balance-holder .user-profile-pic {
        height: 24px;
        width: 24px;
        right: 45%;
        transform: translateX(50%);
        top: -20px;
        border: none
    }

    .sticky-header .wallet-balance-holder .points-info {
        font-size: 10px;
        line-height: 12px;
        margin-bottom: 2px;
        font-weight: 600
    }

    .sticky-header .wallet-balance-holder .coin-icon {
        width: 10px;
        height: 10px;
        margin-bottom: 2px
    }

    .sticky-header .wallet-balance-holder {
        height: 18px;
        background: linear-gradient(270deg, #ef1c74, #2e108e);
        margin-top: 24px;
        margin-right: 0;
        margin-left: 0;
        border-radius: 20px;
        display: inline-block;
        padding-right: 10px;
        padding-bottom: 1px;
        padding-top: 1px;
        border: .5px solid rgba(94, 11, 45, .8)
    }

    .sticky-header .login-cta {
        margin-top: 8px
    }

    #mobile-location-holder-react {
        height: 48px
    }
}

.home-content .deal-of-the-day-banner {
    padding: 0 12px
}

@media (min-width:800px) {
    #link-provider {
        height: 80px
    }

    .widgetHolder.recommendedWidget {
        width: 70%;
        margin: auto
    }
}

.header-categories .discovery-container {
    max-width: 100%;
    padding: 16px
}

.discovery-container .discovery-row {
    display: flex;
    gap: 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px;
    overflow-y: hidden
}

.discovery-row .discovery-card {
    flex: 0 0 auto
}

.discovery-card .discovery-image {
    width: 160px;
    height: 112px;
    object-fit: cover;
    border-radius: 20px
}

.discovery-card .discovery-link {
    display: inline-block;
    transition: transform .3s ease;
    cursor: pointer
}

.discovery-card .discovery-link:hover {
    transform: scale(1.1)
}

.discovery-card .discovery-link:active {
    transform: scale(.95)
}

.discovery-container .more-items-wrapper {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .5s ease, opacity .5s ease
}

.discovery-container .more-items-wrapper.open {
    max-height: 1000px;
    opacity: 1
}

@media (max-width:800px) {
    .discovery-container {
        background: #F6F6FB
    }

    .discovery-container .discovery-row {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 16px;
        padding: 0 0 20px
    }

    .discovery-row .discovery-card {
        flex: 0 0 calc(50% - 8px);
        box-sizing: border-box
    }

    .discovery-card .discovery-image {
        width: 100%;
        height: auto;
        border-radius: 23px
    }

    .view-more-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border-radius: 8px;
        padding: 4px 16px;
        background: #EBEBFF;
        color: #6561E8;
        font-weight: 600;
        font-size: 14px;
        border: none;
        cursor: pointer;
        width: 100%;
        height: 36px;
        line-height: 20px;
        margin-top: -16px;
        font-family: Poppins, sans-serif
    }

    .view-more-mobile .view-more-arrow {
        width: 16px;
        height: 16px;
        font-size: 20px;
        font-weight: 600
    }
}

@media (min-width:801px) {
    .view-more-mobile {
        display: none
    }
}

.highlight-card {
    width: 280px;
    overflow: hidden;
    height: 300px;
    cursor: pointer;
    margin: 0 8px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .25);
    border-radius: 8px;
    display: inline-block;
    vertical-align: top
}

.highlights .highlight-card:hover,
.voucher-card .voucher-banner-holder {
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .12)
}

.highlight-card .image-holder {
    height: 190px;
    background: #e5e5e5;
    overflow: hidden;
    position: relative
}

.image-holder .highlight-img {
    width: 100%;
    height: 100%;
    transition: .5s all;
    object-fit: cover
}

.image-holder .highlight-img:hover {
    transform: scale(1.1)
}

.highlight-card .highlight-details {
    width: 100%;
    height: 110px;
    padding: 12px;
    position: relative;
    background: #fff
}

.highlight-details h3 {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.33;
    color: rgba(0, 0, 0, .87)
}

.highlight-details span {
    font-size: 14px;
    line-height: 1.71;
    display: block
}

.highlight-details p {
    height: 40px;
    font-size: 14px;
    line-height: 1.43;
    color: rgba(0, 0, 0, .54);
    text-align: center;
    text-overflow: ellipsis;
    white-space: initial;
    overflow: hidden
}

@media (max-width:800px) {
    .highlight-card .image-holder {
        height: 180px
    }

    .highlight-card {
        height: 290px;
        width: 280px;
        margin: 0 8px
    }
}

.home-content .voucher-collection-container {
    width: 80%;
    margin: auto
}

.voucher-collection-container .collections-container {
    width: 100%;
    margin-top: 80px;
    background-color: #fff;
    position: relative
}

.collections-container .collections-header-container {
    width: 100%;
    padding: 0 12px;
    margin: 0 auto
}

.collections-header-container .collection-header-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding-bottom: 8px
}

.collections-header-container .view-more.cta {
    font-size: 14px;
    font-weight: 500;
    color: #6561E8;
    line-height: 24px;
    display: inline-block;
    border-radius: 4px;
    background: #fff
}

.collections-header-container .view-more.cta:hover {
    font-weight: 700
}

.collections-header-container .collections-header {
    line-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 28px;
    font-weight: 600;
    text-align: left;
    color: #333
}

.collections-container .vouchers-holder {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 0;
    margin-top: 16px;
    scroll-behavior: smooth
}

.vouchers-holder .voucher-card {
    width: 236px;
    cursor: pointer;
    display: inline-block;
    background: #fff;
    vertical-align: top;
    padding-right: 12px;
    position: relative;
    padding-left: 12px;
    padding-top: 4px
}

.vouchers-holder .view-more-card {
    width: 130px;
    cursor: pointer;
    height: 220px;
    margin: 8px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(235, 235, 255, 1);
    border-radius: 20px;
    gap: 30px
}

.view-more-card .arrow-holder {
    background-color: #6561E8;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center
}

.arrow-holder .view-more-arrow {
    width: 10px
}

.view-more-card .view-more-text {
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: #6561E8
}

.vouchers-holder .voucher-card:last-child {
    padding-right: 0
}

.voucher-card .voucher-banner-holder {
    height: 136px;
    width: 100%;
    object-fit: fill;
    background: #fff;
    position: relative;
    border-radius: 20px;
    margin-bottom: 16px;
    display: flex;
    justify-content: center
}

.voucher-card .right-arrow {
    height: 56px;
    width: 56px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.voucher-banner-holder .voucher-banner {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 20px
}

.voucher-card .voucher-details {
    width: 100%;
    padding: 0 10px 10px 0;
    text-align: left;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.voucher-details .voucher-merchant-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    color: #191C32;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.voucher-details .voucher-locality {
    min-height: 16px;
    font-size: 14px;
    line-height: 16px;
    color: rgba(51, 51, 51, .8);
    margin-bottom: 8px
}

.voucher-details .voucher-starting-from {
    font-size: 12px;
    line-height: 16px;
    color: rgba(0, 0, 0, .87);
    padding-top: 4px
}

.voucher-details .voucher-save-percent {
    width: 16px
}

.voucher-details .voucher-percent {
    display: inline-block;
    position: relative;
    width: max-content;
    text-align: center;
    border-radius: 10px;
    background-color: #6D6BED;
    color: #fff;
    font-size: 14px;
    line-height: 14px;
    padding: 4px 8px;
    font-weight: 700
}

.voucher-banner-holder .rating-content-header {
    height: 24px;
    border-radius: 20px;
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px
}

.voucher-rating .star {
    width: 12px;
    height: 12px;
    object-fit: contain;
    margin: 4px -2px 2px 2px
}

.voucher-rating .rating-desc {
    font-size: 12px;
    line-height: 12px
}

.rating-content-header .voucher-rating {
    border-radius: 40px;
    padding: 0 4px 0 2px
}

.rating-content-header .merchant-rating-text {
    display: inline-block;
    font-weight: 700;
    vertical-align: top;
    color: #fff;
    padding-top: 4px;
    padding-right: 2px;
    font-size: 14px
}

.voucher-card .voucher-sticker {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    z-index: 1
}

.voucher-card .voucher-sticker-tooltip {
    position: absolute;
    left: 8px;
    top: 22px;
    width: 40%;
    padding: 6px;
    background: #4c567c;
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    display: none;
    border-radius: 4px;
    min-width: 200px;
    z-index: 1;
    white-space: normal
}

.voucher-sticker-container:hover .voucher-sticker-tooltip {
    display: block
}

.voucher-card .voucher-sticker-tooltip::before {
    margin-left: 4px;
    border-color: transparent;
    border-bottom: 5px solid #4c567c;
    content: "";
    position: absolute;
    top: -10px;
    left: 6%;
    border-width: 6px;
    border-style: solid
}

.voucher-card .voucher-tag {
    position: absolute;
    bottom: -12px;
    z-index: 1;
    height: 24px
}

@media (max-width:800px) {
    .voucher-collection-container .collections-container {
        margin-top: 30px
    }

    .collections-container .collections-header-container {
        padding: 0 16px
    }

    .collections-container .vouchers-holder {
        padding: 0 16px;
        margin-top: 10px
    }

    .collections-header-container .collections-header {
        font-size: 20px
    }

    .voucher-sticker-container .voucher-sticker-tooltip {
        width: 70%
    }

    .home-content .voucher-collection-container {
        width: 100%;
        margin-top: 40px
    }

    .rating-content-header .merchant-rating-text {
        font-size: 12px
    }

    .vouchers-holder .voucher-card {
        width: 150px;
        padding-right: 0;
        padding-left: 0;
        margin-right: 16px
    }

    .voucher-card .voucher-sticker {
        height: 16px
    }

    .voucher-card .voucher-banner-holder {
        height: 90px
    }

    .voucher-details .voucher-merchant-name {
        font-size: 14px;
        line-height: 16px
    }

    .voucher-details .voucher-locality {
        font-size: 12px;
        line-height: 14px
    }

    .voucher-details .voucher-percent {
        padding: 2px 6px;
        font-size: 12px
    }

    .voucher-details .voucher-save-percent {
        width: 14px
    }

    .voucher-card .voucher-tag {
        height: 22px
    }

    .voucher-rating .rating-desc {
        font-size: 10px;
        padding-top: 3px
    }

    .voucher-rating .star {
        height: 8px;
        width: 8px
    }

    .voucher-banner-holder .rating-content-header {
        padding: 2px
    }

    .vouchers-holder .view-more-card {
        height: 170px;
        margin: 8px
    }
}

.vouchers-holder .left-arrow,
.vouchers-holder .right-arrow {
    position: absolute;
    top: 40%;
    padding: 4px;
    border-radius: 50%;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .12);
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: #fff
}

.vouchers-holder .right-arrow {
    right: -10px
}

.vouchers-holder .left-arrow {
    left: -8px;
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    display: none
}

.voucher-card .right-arrow {
    box-shadow: none
}

.home-content .herobanners-container {
    width: 70%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    height: 274px;
    margin: 24px auto auto
}

.herobanners-container .herobanner-image-holder {
    cursor: pointer;
    display: inline-block;
    background: #fff;
    vertical-align: top;
    padding: 0 6px
}

.herobanners-container .herobanner-image-holder:first-child {
    padding-left: 12px
}

.herobanner-image-holder .herobanner-image {
    height: 256px;
    width: 220px;
    object-fit: fill;
    background: #e5e5e5;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .12)
}

@media (max-width:800px) {
    .home-content .herobanners-container {
        width: 100%;
        height: 196px;
        margin-top: 10px
    }

    .herobanner-image-holder .herobanner-image {
        width: 156px;
        height: 180px
    }
}

.herobanners-container .left-arrow,
.herobanners-container .right-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    padding: 4px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .12)
}

.herobanners-container .right-arrow {
    right: 15%
}

.herobanners-container .left-arrow {
    left: 15%;
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    display: none
}

.home-content .nux-vouchers-container {
    background-image: url("");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 16px 8px;
    width: 70%;
    margin: auto auto 24px
}

.nux-voucher-holder .nux-voucher-card {
    background-image: url("");
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    height: 110px;
    width: 288px;
    margin-right: 8px;
    margin-top: 4px
}

.nux-voucher-card .description,
.nux-voucher-card .voucher-info {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: rgba(0, 0, 0, .87)
}

.nux-voucher-card .merchant-logo {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 34px;
    left: 24px
}

.nux-voucher-card .merchant-info {
    position: absolute;
    top: 18px;
    left: 104px;
    height: 100%;
    margin-right: 10px
}

.nux-voucher-card .voucher-info {
    position: absolute;
    bottom: 32px
}

.nux-vouchers-container .nux-header {
    color: rgba(0, 0, 0, .87);
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    margin-left: 8px
}

.nux-vouchers-container .nux-voucher-holder {
    margin-top: 8px;
    overflow: auto;
    overflow-y: hidden;
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

.nux-voucher-card .voucher-info.save-percent {
    font-weight: 500;
    color: #821dff
}

@media (max-width:800px) {
    .home-content .nux-vouchers-container {
        width: 100%
    }
}