@font-face {
  font-family: curveFont;
  src: url(../fonts/Christmas-Bell.otf);
}
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
.offer-announce-section .webContent .subHeading {
/*  font-family:"Lobster", sans-serif;*/
  font-family: curveFont;
  font-weight: 400;
  font-size: 2.2rem;
}
.main-banner .webContent .mainHeading{ font-size: 2.5rem; }
.offer-announce-brands-list li{margin: 0 10px}
.offer-announce-brands-list li img{
	padding: 0;
    height: 40px;
    object-fit: scale-down;
}
.announce-img{width: 120px;height: 120px;}
.main-banner{margin-top: 0}

.banner-img img{border-radius: 15px;}
/*############ dealCards style ##############*/
.dealCards{
position:relative;
display: flex;    
justify-content: center;
align-items: center; 
}
.dealCards img{
min-height: 168px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;    
}
.dealCards .brandLogo{
width:100px;
height:100px;
position: absolute;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
display: flex;
border-radius: 50%;
justify-content: center;
align-items: center;    
}
.dealCards .brandLogo img{
max-width: 75%;
object-fit: contain;
height:auto;
border-radius: 0;
}
.dealBadge.topDeal{background-color:var(--color-first);}
.dealBadge.exclusiveDeal{background-color:var(--color-second);}
.dealBadge{
padding:5px;
font-size:.65rem;
font-weight:600;
border-radius: 3px;
display: inline-flex;
color: #fff;
text-transform: uppercase;
height: 15px;
white-space: nowrap;
align-items: center;
position: absolute;
top: 12px;
right: 12px;
}
.brandName{
font-size:.85rem;
font-weight:600;
text-transform:uppercase;
padding-bottom:0.5rem;
}
.dealsTitle{
font-size:1.2rem;
font-weight:700;
text-transform:capitalize; 
color:var(--color-first);  
padding-bottom:1.5rem;
margin-bottom: 10px;      
}
.dealsInfo{
display:flex;
justify-content:space-between;
}
.dealsInfo .usage, .dealsInfo a{
font-size:0.75rem;
font-weight:500;
line-height:2;
color:#0F0F0F;
display: flex;
justify-content: center;
align-items: center;
}
.dealsInfo .usage .fa-circle{font-size:0.3rem}
.dealsInfo .toggle-icon{
display: inline-block;
margin-left: 2px;
font-size: 0.75em;
}

ul.dates, ul.dealinfo{
list-style:none;
font-size:0.75rem;
font-weight:500;  
color:#0F0F0F;
padding-left:0px;
}

ul.dates li, .dates li span, ul.dealinfo li{
list-style:none;
font-size:0.75rem;
font-weight:500;  
color:#0F0F0F;    
}
/*############ article-card style ##############*/
.article-card .card img {
max-width: 100%;
object-position: center;
object-fit: cover;
height: 100%;
border-radius: 10px;
}

.article-card .card {
height: 300px;
border-radius: 10px;
width: 100%;
border: 0px;
margin-bottom: 20px;
transition: 0.3s ease-out;
}
.article-card .card .card-body {
position: absolute;
background: rgba(72, 0, 200, 0.4);
bottom: 0;
padding: 0.7rem;
border-radius: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

.article-card .card-body .subHeading{
color:#fff ;
font-size:1.4rem;
font-weight:700;
}
/*########## popular stores #############*/
.popularStoresList{
display: flex;
flex-wrap: wrap;     
justify-content: center; 
}
.popularStoresList li{
margin: 0 0.5rem 0.5rem 0;
}
.popularStoresList li a{
box-shadow: 5px 5px 10px #00000014;
background: #fff;     
width: 65px;
height: 65px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.popularStoresList li a img{
max-width:80%;
overflow: hidden;
/*border-radius: 50%; */   
}
.mt-6{margin-top:6rem;}
/*########## coupons #############*/
.brandLogo{
padding: 5px 5px;
box-shadow: 5px 5px 10px #00000014;
background: #fff;     
width:110px;
height:110px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;    
}
.brandLogo li a img{
max-width:100%;
overflow: hidden;
}
.dealValue{
border-radius: 50%;
border: 3px solid var(--color-first);
padding: 1rem;
font-size:1.2rem;
font-weight:bold;
line-height:1.2;
color:var(--color-first);
width:85px;
height:85px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.dealValue .icon{
position: absolute;
bottom: -16px;
left: 0;
width: 100%;
}
.icon .fa-tag{
font-size: 1.3rem;
color: var(--color-second);
}

.couponModal button:hover{
color:#fff;
}
.merchantLink{
font-size:0.85rem;
font-weight:500;
text-decoration:underline;
padding-top:0.5rem;
color:var(--color-content);    
}
.merchantLink:hover{
 color:var(--color-content);   
text-decoration:underline;
}
.cashbackImg{width: 150px;}
.c-code input{
text-align: center;
font-size:1.1rem;
font-weight: 600;
border: 2px dotted #7d5dee;
}
.c-code button{height:46px;}
/*########## Hot Deals Stores #############*/
.hotDealsList{
display: flex;
flex-wrap: wrap;    
justify-content: center;
padding: 1rem 0 0 0;
}
.hotDealsList li{
margin:0 0.3rem 0.5rem 0.3rem;
}
.hotDealsList li a{
padding: 2px 2px;
box-shadow: 5px 5px 10px #00000014;
background: #fff;     
width:95px;
height:95px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.hotDealsList li a img{
max-width:90%;
overflow: hidden;
}
.hotDealsList li .coupon-count{
font-size: 0.75rem;
font-weight: 500;
display: flex;
justify-content: center;
color:var(--color-content);
}
/*########## ALL STORE #############*/
.search_cloud {
  display: flex;
  flex-wrap: wrap
}
.search_cloud li {
  border: 1px solid #e6dfff;
  background: #f2efff;
  margin: 0 7px 10px 0
}
.search_cloud li a {
  color: var(--color-first);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 2px 7px;
  display: block
}
.search_cloud li:hover,.search_cloud li.active a {
  color: #fff;
  border-color:var(--color-first);
  background-color: var(--color-first);
  background-position: left bottom
}
.search_cloud li:hover a {color: #fff}
/*########## SPECIAL EVENT PAGE #############*/
.eventBanner{
  background: url(../img/events-img/event-banner.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.eventBanner .mainHeading{font-size: 2rem}
.eventBanner img{width: 300px}
.event-deals-block button.btn-code:hover{background: var(--color-second) !important;color: #fff;border: 1px solid var(--color-second);}
/*########## SPECIAL BUTTON #############*/
.coupon__action {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  height: 35px;
  line-height: 35px;
  width: 150px;
  text-transform: uppercase;
  border-radius: 3px;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
}
.coupon__action--coupon {
  position: relative;
  background: #f5f5f5;
}
.coupon__action button {
  display: inline-block;
  width: 100%;
  color: #fff;
  text-align: center;
}
.coupon__action--coupon button {
  background: var(--color-first);
  position: relative;
  width: 80%;
  z-index: 2;
  font-weight: 500;
  overflow: hidden;
}
.coupon__action--coupon button:before,.coupon__action--coupon button:after{
  content: "";
  z-index: 3;
  width: 0;
  height: 0;
  position: absolute;
}
.coupon__action--coupon button:before {
  border-top: 25px solid #3b2390;
  border-left: 35px solid transparent;
  border-right: 25px solid transparent;
  right: -10px;
  top: 0;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}
.coupon__action--coupon button:after {
  right: 0;
  top: 0;
  border-style: solid;
  border-width: 0 40px 14px 0;
  border-color: transparent #f5f5f5 transparent transparent;
}
.coupon__code {
  position: absolute;
  right: 20px;
  top: 4px;
  bottom: 0;
  font-size: 1.143em;
  font-weight: 700;
  color: #111;
}
.coupon__action--coupon button:hover { background-color: var(--color-second); }
.coupon__action--coupon button:hover:before{border-top: 25px solid #40c8f1  ;}
@media only screen and (max-width:992px){
/*  .offer-announce-section{ margin-top: 45px; }*/
}
@media only screen and (max-width:768px){
  .main-banner .webContent .mainHeading { font-size: 2rem;}
  .popularStoresList li a img{max-width: 60%}
  .merchantSection .nav-item .nav-link {
    color: #fff;
    font-weight: 500;
    font-size: 0.9rem;
  }
  .article-card .articles-carousel .card{height: 250px;margin-bottom: 10px}
  .article-card .card-body .subHeading{font-size: 1.2rem}
  .popularStoresList li{margin:0 0rem 0.5rem 0}
  .merchants-nav{display: none;}
}
@media only screen and (max-width:400px){
  .popularStoresList{padding-left: 0}
  .offer-announce-brands-list li{margin:0 5px;}
  .offer-announce-brands-list li img{height: 60px}
  .merchantSection .nav-item .nav-link {font-size: 0.65rem;}
}