.header-button {
  width: 160px
}

header .navbar-nav .nav-item .nav-link {
  font-size: 13px
}

@media only screen and (max-width: 1400px) {
  header .navbar-nav .nav-item {
    padding: 0 5px
  }
}

@media only screen and (max-width: 320px) {
  * {
    font-size: 14px
  }

  #productDetailTabs.nav-pills .nav-link {
    font-size: .8rem
  }

  .navbar .navbar-brand .logo {
    width: 100px
  }

  .get-cashback-Section .tab-content img {
    width: 150px
  }

}

@media screen and (min-width: 320px) and (max-width:767px) {

  /*    .navbar .navbar-brand .logo {width:140px;}*/
  .stores-name ul {
    grid-template-columns: repeat(2, 1fr)
  }

  .shop-items p,
  button.btn {
    font-size: 14px
  }

  .bonus-price,
  .refer-bonus h2,
  .step-number {
    font-size: 22px
  }

  .title-2 {
    font-size: 20px !important
  }

  .mainBanner {
    height: 300px !important
  }

  .storeImg {
    height: 120px
  }

  .storeImg img {
    width: 120px !important
  }

  .nav.flex-column.brandButtons {
    flex-basis: 100%
  }

  #brand-tabContent.tab-content {
    margin-left: 0;
    flex-basis: 100%
  }

  .footerCategoryList ul.nav {
    margin-bottom: 15px
  }

  .popular-store .owl-carousel .owl-nav button.owl-prev {
    left: -3%
  }

  .popular-store .owl-carousel .owl-nav button.owl-next {
    right: -3%
  }

  .webContent .cashback-offers-carousel p {
    font-size: 0.8rem
  }

  .card.generalCard {
    height: auto
  }

  .btn-subscribe {
    width: 100%
  }

  .blogSection .blogCard.blogCardLarge,
  .categoryCard.card .categoryImg {
    height: 250px
  }

  .footerCategoryblock {
    background-image: none
  }

  .coupons-sec .nav-tabs .nav-link {
    font-weight: 600;
    padding: 8px 14px
  }

  .navCategoryBlock {
    display: block
  }

  .payment-setting-tabs.nav-pills .nav-link.active:after,
  .subcategoryList {
    display: none
  }

  .categories-name ul {
    grid-template-columns: repeat(1, 1fr) !important
  }

  .stores-name ul {
    grid-template-columns: repeat(1, 1fr)
  }

  .copyrightContent {
    font-size: 13px;
    color: #000
  }

  .blogSection .blogCard.blogCardLeft img.card-img,
  .blogSection .blogCard.blogCardRight img.card-img {
    height: 200px
  }

  .subscribeInput input.form-control {
    width: 100%;
    margin-bottom: 10px
  }

  .exp-date {
    margin-bottom: 10px
  }

  .benefit-icon {
    height: 60px
  }

  .get-cashback-Section .tab-content img {
    width: 150px
  }

  .merchantSection .nav-item {
    margin: 0px;
    text-align: center
  }

  .merchantSection .nav-link {
    padding: .5rem .5rem;
  }

  header .user-login-name {
    width: 100px;
    font-size: 13px
  }

}

@media (min-width: 320px) and (max-width:991px) {

  .card.generalCard .generalImg img {
    width: 100%;
    height: 100px
  }

  .savingSection .card.generalCard .generalImg {
    width: 50%
  }
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .owl-carousel .owl-nav button.owl-prev {
    left: -1%
  }

  .owl-carousel .owl-nav button.owl-next {
    right: -1%
  }

  .stores-name ul {
    grid-template-columns: repeat(2, 1fr)
  }

  .bonus-price,
  .refer-bonus h2,
  .step-number {
    font-size: 22px
  }

  .title-2 {
    font-size: 24px !important
  }

  .shop-items p,
  .step-title {
    font-size: 14px
  }

  .coupons-title,
  .offers .offers-caption {
    font-size: 16px
  }

  .active-submenu li a {
    font-size: 14px !important;
    padding: 6px 6px 6px 23px !important
  }

  .mainBanner {
    height: 300px !important
  }

  .brandButtons button.nav-link,
  .button {
    padding: 5px 16px;
    font-size: 16px
  }

  #brand-tabContent.tab-content {
    margin-left: 0
  }

  .footerNav li {
    margin-right: 6px
  }

  .footerCategoryList ul.nav a,
  .footerNav li a {
    font-size: 13px
  }

  .coupons-sec .nav-tabs .nav-link {
    padding: 8px 24px
  }

  button.btn-code {
    padding: 6px 22px
  }

  .benefit-icon {
    height: 80px
  }

  .merchantSection .nav-pills li+li {
    margin-left: 3px
  }

  .owl-theme .owl-nav {
    top: 50%;
    width: 100%;
    left: 0
  }

  .owl-carousel .owl-nav button.owl-prev {
    left: 0
  }

  .owl-carousel .owl-nav button.owl-next {
    right: 0
  }

  header .user-login-name {
    width: 150px
  }
}

@media screen and (min-width: 992px) and (max-width:1200px) {
  .navigation .navbar-collapse .nav-item {
    padding: 0 12px
  }

  .navigation .navbar-collapse .nav-item .nav-link,
  .sideBar .nav-link {
    font-size: 12px
  }
}

@media screen and (min-width: 1200px) and (max-width:1370px) {
  header .navbar-nav .nav-item {
    padding: 0 6px
  }

  header .navbar-nav .nav-item .nav-link {
    font-size: 12px
  }
}

@media screen and (min-width: 1024px) and (max-width:1365px) {

  .bonus-price,
  .refer-bonus h2,
  .step-number {
    font-size: 26px
  }

  .title-2 {
    font-size: 26px !important
  }

  .step-title {
    font-size: 14px
  }

  .active-submenu li a {
    font-size: 14px !important;
    padding: 6px 6px 6px 23px !important
  }

  .offers .offers-caption {
    font-size: 17px
  }

  .coupons-title {
    font-size: 16px;
    margin-bottom: 6px
  }

  button.btn-code {
    padding: 6px 24px
  }

  .navbar .navbar-search-box {
    width: 270px
  }

  header .navbar-collapse .nav-item {
    padding: 0 6px
  }

  .sideBar .nav-link,
  header .navbar-collapse .nav-item .nav-link {
    font-size: 12px
  }

  .mart-50 {
    margin-top: 50px
  }
}

@media only screen and (max-width: 1400px) {
  * {
    font-size: 15px
  }

  .playstoreImgs img {
    width: 110px
  }

  .benefitCarousel {
    padding-top: 50px
  }

  .benefitContent {
    margin: 0 2px
  }

  .couponcard button.btn {
    font-size: .8rem
  }

  .navbar .navbar-search-box {
    width: 300px
  }

  header .nav-item .nav-link {
    font-size: 13px
  }
}

@media only screen and (max-width: 1367px) {
  .productDetails .card .webContent .subHeading.font-weight-bold {
    font-size: 1.1em
  }

  .categoryList .list-group .list-group-item a {
    font-size: .8rem
  }

  .howItWorksSection .container {
    left: 8%
  }

  .claimingListSection {
    padding-top: 100px
  }

  .mainBanner .mainBannerContent {
    top: 16%;
    left: 30px
  }

  .videoSection .embed-responsive:before {
    width: 80%
  }

  .header-button {
    font-size: 12px
  }
}

@media screen and (min-width: 1360px) and (max-width:1399px) {
  .navbar .navbar-brand .logo {
    width: 130px
  }

  .sideBar .nav-link,
  header .navbar-nav .nav-item .nav-link {
    font-size: 12px
  }

  .navbar .navbar-search-box {
    width: 300px
  }
}

@media only screen and (max-width: 1279px) {
  * {
    font-size: 14px
  }

  .productDetails .card {
    height: 330px
  }

  .navbar-nav.justify-content-end .nav-item .btn.btn-purple {
    padding: 10px 20px
  }

  .card.couponcard {
    height: 350px
  }

  .card.couponcard.rewardcard {
    height: auto
  }

  .card.couponcard .card-body .webContent p {
    height: 50px
  }

  .related-blog-carousel.owl-theme .owl-nav {
    top: -40px
  }
}

@media only screen and (max-width: 1250px) {
  .card.couponcard .card-body small {
    font-size: 1rem
  }
}

@media only screen and (max-width: 1200px) {
  .wrapper {
    margin-top: 6%
  }

  .playstoreImgs img {
    width: 90px
  }

  .navbar-nav .button {
    padding: 10px 5px
  }

  header .navbar-nav .nav-item {
    padding: 0 5px
  }

  .header-icon-img img {
    width: 30px
  }

  .navbar .navbar-search-box {
    width: 240px
  }
}

@media only screen and (max-width: 1198px) {
  * {
    font-size: 14px
  }

  .productDetails .card .webContent .mainHeading {
    font-size: 1rem
  }

  .mainBanner .mainBannerContent {
    top: 10%;
    left: 10px
  }

  .merchantLogoSection .merchantLogo .dashedBorder {
    padding: 60px 40px
  }

  .videoSection .embed-responsive:before {
    width: 100%
  }

  .categoryListInShop .item {
    margin-right: 7px
  }

  .categoryList {
    padding: 10px
  }

  .categoryListInShop img {
    width: 40px
  }

  /*    .navbar .navbar-brand .logo {
        width: 100px
    }*/

  .header-icon-img img {
    width: 30px
  }

  .cashback-value {
    font-size: .7rem
  }

  .main-banner .webContent .mainHeading {
    font-size: 3rem
  }

  .main-banner .webContent .card .mainHeading {
    font-size: 1.5rem
  }
}

@media only screen and (max-width: 1140px) {
  .navigation .navbar .navbar-search-box {
    flex-basis: 30%
  }

  .navigation .navbar .collapse.navbar-collapse {
    flex-basis: 50%
  }

  .categoryBlock .card-body .subHeading {
    font-size: .85rem
  }

  .webContent .subHeading {
    font-size: 1.1rem
  }

  .mainBanner {
    padding: 0 100px
  }

  .card.placeBlock {
    height: 220px
  }

  .footerLogo {
    width: 150px
  }

  .navbar-nav.justify-content-end .nav-item .btn.btn-purple {
    padding: 5px 20px;
    font-size: .9rem
  }

  .shopCategoryBlock .shopCategoryImg {
    height: 160px
  }

  .shopCategoryTitleBlock h3 {
    font-size: .8rem
  }
}

@media only screen and (max-width: 1070px) {
  .mainBanner .mainBannerContent {
    top: 10%;
    left: 40px;
    padding: 50px 70px
  }

  .mainBanner .mainBannerContent .webContent .mainHeading {
    font-size: 2.1rem
  }
}

@media only screen and (max-width: 1024px) {
  .paddingDiv {
    padding: 30px 0
  }

  .productDetails .card .webContent .subHeading {
    font-size: 1rem
  }

  .productDetails .card {
    height: 340px
  }

  .shopCategoryBlock {
    margin-bottom: 50px
  }

  .navbar-nav.justify-content-end .nav-item .btn.btn-purple {
    font-size: .7rem
  }

  .row.row-reverse-style {
    flex-direction: column-reverse
  }

  .invitationButton {
    height: 41px
  }
}

@media only screen and (max-width: 993px) {
  .wrapper {
    margin-top: 11%
  }

  #sm_menu_ham,
  .hideInWeb {
    display: block
  }

  .button.signup-button {
    width: auto;
    padding: 5px 15px;
    margin-right: 10px;
  }

  .cashbackSection:before,
  .hideInMobile,
  .subscribeSection:before,
  header .navbar-nav {
    display: none
  }

  .navbar .navbar-search-box {
    flex-basis: 60%
  }

  .mainBanner {
    padding: 0 40px
  }

  .mainBanner .bannerContent .form-row {
    padding: 10px 15px
  }

  .generalContent,
  .subscriptionDiv .webContent {
    text-align: center
  }

  .playstoreImgs img {
    width: initial
  }

  .videoSection video {
    height: 360px
  }

  .mainBanner .mainBannerContent {
    width: 55%
  }

  .benefitContent {
    height: 320px
  }

  .merchantLogoSection .merchantLogo .dashedBorder {
    padding: 60px 20px
  }

  .merchantLogoSection .merchantLogo {
    flex-basis: 100%
  }

  .merchantLogocarousel .merchantLogo img {
    width: 60% !important;
    margin: 0 auto
  }

  .cashbackSection .webContent {
    padding-right: 0
  }

  .subCategoryListItems {
    column-count: 2
  }

  .rebategoldlist img {
    width: 30px
  }

  .categoryListInShop .item {
    flex-basis: 32%;
    flex-basis: 31%
  }

  .shopList_i {
    width: 100%
  }

  #footerAccordion.accordion {
    border: 0;
    border-radius: 0
  }

  #footerAccordion .accordion-item,
  #footerAccordion .card,
  #footerAccordion .card .card-header {
    background: 0 0
  }

  #footerAccordion .accordion-header {
    background: 0 0;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .5)
  }

  #footerAccordion .accordion-header button.btn {
    color: #eeba1d;
    font-size: 1.3rem;
    padding: 0 20px;
    letter-spacing: 1px;
    text-transform: capitalize;
    text-decoration: none;
    box-shadow: none;
    border-radius: 0;
    background: 0 0
  }

  #footerAccordion .accordion-header button.btn:focus {
    text-decoration: none
  }

  .detailBlock {
    margin-bottom: 20px
  }

  .shopCategoryTitleBlock h3 {
    font-size: 1rem
  }

  .shopFilter {
    box-shadow: none;
    background: 0 0
  }

  #filterAccordion button {
    color: #905ca6;
    font-weight: 700
  }

  #filterAccordion .form-check-label {
    color: #4f429a
  }

  .productDetailContent.webContent .subHeading {
    font-size: 1.2rem
  }

  .seasonalSavingSection .categoryCard.card .categoryBrandsList {
    width: 100% !important
  }

  .brandButtons button.nav-link {
    font-size: 13px
  }

  .subscribeSection:before {
    width: 95%
  }

  .mart-50 {
    margin-top: 40px
  }

  .exclusiveOffers img,
  .latestOffers img {
    margin: 0 auto 10px
  }

  .subscribeSection:after {
    background-position: right
  }

  .merchantSection .webContent p {
    font-size: .9rem
  }

  .owl-theme .owl-nav {
    right: 10px
  }
}

@media only screen and (max-width: 990px) {
  .categoryBlock .card-body .subHeading {
    font-size: 1rem
  }

  .mainBanner {
    height: 400px
  }

  .mainBanner .mainBannerContent .webContent .mainHeading {
    font-size: 2rem
  }

  .mainBanner .mainBannerContent {
    padding: 30px;
    top: 3%;
    left: 50px
  }

  .navbar .navbar-search-box {
    flex-basis: 100%;
    margin-top: 10px
  }

  .videoSection .embed-responsive:before {
    right: -40px;
    top: 0
  }
}

@media only screen and (max-width: 850px) {
  .wrapper {
    margin-top: 13%
  }

  .mainBanner .mainBannerContent {
    width: 60%
  }

  .sideBar .btn,
  .sideBar .nav-link {
    font-size: 1.1rem
  }

  .sideBar .collapse .navbar-nav .nav-link {
    font-size: .9rem
  }

  .widthFit {
    width: fit-content
  }
}

@media only screen and (max-width: 800px) {
  .mainBanner .mainBannerContent {
    width: 65%
  }

  .mainBanner .mainBannerContent .webContent .mainHeading {
    font-size: 1.5rem
  }

  .productDetails .card {
    height: 300px
  }
}

@media only screen and (max-width: 769px) {
  .wrapper {
    margin-top: 17%
  }

  .mainBanner {
    height: 250px;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center
  }

  .mainBanner .mainBannerContent {
    position: initial;
    height: auto;
    width: 100%;
    top: initial
  }

  .benefitContent {
    height: 240px
  }

  .videoSection .embed-responsive,
  .videoSection .embed-responsive video {
    margin-top: 0
  }

  .specialBanner,
  .videoSection video {
    height: auto
  }

  .videoSection .embed-responsive:before {
    height: 80%;
    top: -30px
  }

  .merchantSection .merchantLogo {
    height: 120px
  }

  .reabateGoldSection .line {
    width: 250px
  }

  .reabateGoldSection .progressbar-dots span {
    width: 150px;
    font-size: 14px;
    line-height: 16px
  }

  .rebategoldlist img {
    width: 50px
  }

  .rebategoldlist ul {
    flex-wrap: wrap
  }

  .rebategoldlist li {
    flex-basis: 50%
  }

  .categoryListInShop .item {
    flex-basis: 31%
  }

  .categoryList h3 {
    font-size: .8rem
  }

  .cashbackSection .webContent,
  .copyright-text,
  .coupons-sec .coupon-info,
  .coupons-sec .coupons-title,
  .latestOffers .deals,
  .siteAppLink {
    text-align: center
  }

  .extensionSection.autofloatmodal {
    display: none
  }

  .webContent .mainHeading {
    font-size: 1.7rem
  }

  .joinFormSection .webContent .mainHeading {
    font-size: 2.5rem
  }

  .subscribeSection:before {
    width: 90%
  }

  .cd-primary-nav li a i {
    font-size: 15px
  }

  .user-referral-section .input-group input.form-control {
    width: 100%;
    margin-bottom: 10px
  }

  .latestOffers .deals {
    padding: 5px
  }

  .testimonial-carousel.owl-carousel .owl-nav {
    right: 50%;
    top: 110%
  }

  .mostPopularDeal .categoryCard.card .categoryImg {
    height: 150px
  }

  .coupons-title {
    font-size: 1rem
  }
}

@media only screen and (max-width: 650px) {
  .wrapper {
    margin-top: 20%
  }

  .mainBanner .mainBannerContent .webContent {
    margin-top: 20px
  }

  .videoSection video {
    height: auto
  }

  .videoSection .embed-responsive:before {
    display: none
  }

  .rewardDetailSection .rewardImg {
    float: none;
    display: block
  }

  .categoryListInShop {
    padding-left: 15px
  }

  .categoryListInShop .item {
    flex-basis: 48%
  }

  .subscribeSection:before {
    width: 100%;
    left: 0;
    -webkit-transform: skew(0);
    -moz-transform: skew(0);
    -o-transform: skew(0)
  }

  .main-banner .webContent .mainHeading {
    font-size: 2.5rem
  }
}

@media only screen and (max-width: 551px) {
  .wrapper {
    margin-top: 25%
  }

  * {
    font-size: 15px
  }

  .benefitContent {
    height: 220px
  }

  .mainBanner .mainBannerContent .webContent {
    margin-top: 30px
  }

  .merchantLogocarousel .merchantLogo img {
    width: 40% !important
  }

  .benefitContent .webContent .mainHeading {
    font-size: 1.5rem
  }

  .reabateGoldSection .progressbar-dots span {
    padding: 10px;
    font-size: 13px;
    width: 125px
  }

  .internalBanner .webContent .mainHeading,
  .mainBanner .bannerContent .webContent .subHeading {
    font-size: 24px
  }

  .paddingDiv {
    padding: 20px
  }

  .categoryListDropdown {
    width: auto
  }

  .categoryBlock .card-body .subHeading,
  .productDetails .card .card-body h3.subHeading.font-weight-bold,
  .productDetails .card .webContent .mainHeading {
    font-size: 1.2rem
  }

  .socialMedia ul li {
    margin: 5px 20px 0 0
  }

  .socialMedia i {
    font-size: 20px
  }

  .rebategoldlist img {
    width: 40px
  }

  .brandButtons button.nav-link {
    font-size: 13px;
    padding: 5px 10px;
    margin-bottom: 15px
  }

  .reabateGoldSection .line {
    left: 100px;
    width: 230px
  }

  .stores-logo .new-stores-section .offer-cashback-text p {
    font-size: 0.9rem
  }
}

@media only screen and (max-width: 480px) {
  .wrapper {
    margin-top: 30%
  }

  .mainBanner .mainBannerContent {
    padding: 0
  }

  .mainBanner .mainBannerContent .webContent .mainHeading,
  .productDetailContent.webContent .mainHeading {
    font-size: 1.2rem
  }

  .benefitContent.benefitContent1,
  .benefitContent.benefitContent3 {
    padding-left: 150px
  }

  .benefitContent.benefitContent2 {
    padding-right: 120px
  }

  .webContent .mainHeading {
    font-size: 1.6rem
  }

  .webContent .subHeading {
    font-size: 1rem
  }

  .internalBanner .webContent .mainHeading {
    font-size: 22px
  }

  .reabateGoldSection .progressbar-dots {
    margin-right: 130px
  }

  .hideInWeb.filterDetails .webContent .line {
    width: 70px
  }

  .productDetails .card {
    height: 350px
  }

  .coupons-title {
    text-align: center
  }
}

@media only screen and (max-width: 451px) {
  .wrapper {
    margin-top: 28%
  }

  .menuButton i {
    font-size: 1.2rem
  }

  .subCategoryListItems {
    column-count: 1
  }

  .reabateGoldSection .progressbar-dots span {
    width: 100px;
    font-size: 11px
  }

  .reabateGoldSection .line {
    width: 250px;
    left: 60px
  }

  .reabateGoldSection .progressbar-dots {
    margin-right: 100px
  }

  .button.signup-button {
    font-size: 10px;
    padding: 7px 12px
  }
}

@media only screen and (max-width: 415px) {
  .benefitContent .webContent .mainHeading {
    font-size: 1.3rem
  }

  .benefitContent {
    height: 165px
  }

  .benefitContent.benefitContent1,
  .benefitContent.benefitContent3 {
    padding-left: 100px
  }

  .benefitContent.benefitContent2 {
    padding-right: 100px
  }

  .internalBanner .webContent .mainHeading {
    font-size: 1.2rem
  }

  .categoryListInShop .item,
  .rebategoldlist li {
    flex-basis: 100%
  }

  .webContent .mainHeading {
    font-size: 1.4rem
  }

  .contactIcon {
    width: 35px;
    height: 35px;
    line-height: 35px
  }

  .contactLeftSide .row {
    align-items: center
  }

  .productDetailImg {
    height: 300px
  }

  .paddingDiv {
    padding: 20px 15px
  }
}

@media only screen and (max-width: 376px) {
  .wrapper {
    margin-top: 35%
  }

  .benefitContent .webContent .mainHeading,
  .webContent .mainHeading {
    font-size: 1.4rem
  }

  .benefitContent .webContent p {
    font-size: .8rem
  }

  .benefitContent {
    height: 145px
  }

  .categoryCarousel.owl-carousel img,
  .merchantLogocarousel .merchantLogo img {
    width: 100% !important
  }

  .productDetailImg {
    height: 250px
  }

  .multiTabs.nav-pills .nav-link.active,
  .multiTabs.nav-pills .show>.nav-link {
    padding: .5rem 1rem
  }

  .reabateGoldSection .progressbar-dots {
    margin-right: 70px
  }

  .main-banner .webContent .mainHeading {
    font-size: 2rem
  }
}

@media only screen and (max-width: 360px) {
  .benefitContent {
    height: 120px;
    padding: 20px
  }

  .benefitContent .webContent .mainHeading {
    font-size: 1rem
  }

  .benefitContent .webContent p,
  .tabingStyle.nav-pills .nav-link {
    font-size: .7rem
  }

  .benefitContent.benefitContent1,
  .benefitContent.benefitContent3 {
    padding-left: 80px
  }

  .benefitContent.benefitContent2 {
    padding-right: 80px
  }

  .scissorsIconDiv img.scissorsIcon {
    position: absolute;
    width: 30px;
    top: -15px
  }

  .reabateGoldSection .progressbar-dots span {
    width: 90px;
    font-size: 10px
  }

  .reabateGoldSection .line {
    width: 200px
  }
}

@media (max-width: 767px) {
  .hidden-mobile {
    display: none
  }
}