@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*============ GENERAL STYLE ==========================*/
  /*========== ROOT & GENERAL STYLE ===================*/
    :root{
      --color-first:#330b7e;
      --color-second:#ff9e3e;
      --color-content: #101010;
      --color-light-first:#008009;
      --bg-1:#f9f9f9;
      --bg-2:#ffe4ca;
      --bg-3:#f1f4ff;
      --bg-4:#ffc58b;
      --font-family-heading:"Noto Serif Display", serif;
      --font-family:'Poppins', sans-serif;
      --shadow: 0 1px 2px 0 rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.13);
    }
    *, ::after, ::before{box-sizing: border-box;}
    * {
      margin: 0; 
      padding: 0;
      font-family: var(--font-family);
      font-weight: 300;
      font-style: normal;
      font-size: 16px;
      letter-spacing: 0.01em;
      line-height: 1.5;
      color: var(--color-first);
      text-transform: none;
    }
    a, a:hover, a:focus, a:focus-visible { text-decoration: none; outline:none;
  /*  color: var(--color-second);*/}
    html {scroll-behavior: smooth;font-family: sans-serif;}
    body{margin-top: 65px;background: #fff;}
    img { object-fit: cover;object-position: center;}
    .pad-top{padding-top: 50px}  
    ul li { list-style: none; }
    ul.point-list  li,ul.list li { list-style:disc;color:var(--color-content);}
    ul.list li strong{ font-weight:600; color: var(--color-content);}
    .box-shadow{ box-shadow: 0 1px 2px 0 rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.13);} 
    .margin-first{ padding-top: 50px}
  /*========== BUTTON STYLE ==========================*/
    .button,input[type="submit"].button,.btn-outline-first,.btn-outline-second,.btn-outline-third{
      border: 0;
      padding:10px 20px;
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0;
      line-height: 1.2;
      border: 1px solid transparent;
      text-transform: capitalize;
      font-style: italic;
      border-radius: 3px;
    }
    .button.btn-first,.bg-first,input[type="submit"].button.btn-first,.button.btn-first:hover{ 
      background:var(--color-first);
      border-color: var(--color-first);
    }
    .button.btn-second,.bg-second,input[type="submit"].button.btn-second,.button.btn-second:hover{ 
      background: var(--color-second); 
      border-color: var(--color-second);
    }
    .button i,.button:hover { color: #fff; }  
    .btn-outline-first,.btn-outline-second{font-weight: 500;background: var(--bg-2);}
    .btn-outline-first,.btn-outline-second:hover{color: var(--color-first);border-color: var(--color-first);}
    .btn-outline-second,.btn-outline-first:hover{ color: var(--color-second);border-color: var(--color-second);}
    button.button:focus,button.btn:focus,input.form-control:focus,select.form-select:focus,textarea:focus {
      outline: 0 !important;
      box-shadow: none !important;
    }
  /*========== HEADING STYLE =========================*/
    .webContent .mainHeading{    
      font-size:2.3rem;
      font-weight:500;
      line-height:1.2;
      letter-spacing: -2px;
      text-transform: capitalize;
      color:var(--color-first);
      font-family: var(--font-family); 
    }
    .webContent .mainHeading mark{
      font-size: 2.3rem;
      font-weight:600;
      color:var(--color-second);
      font-family: var(--font-family-heading);
      font-style: italic;
      text-transform: capitalize;
      padding: 0;
      background: transparent;
    }
    .webContent .subHeading {
      font-size: 1.4rem;
      color: var(--color-second);
      letter-spacing: 0.5px;
      font-weight: 600;
    }
    .webContent p {
      font-weight: 400;
      color: var(--color-content);
      white-space: pre-line;
      font-size: 1rem;
      line-height: 1.6;
    }
    .webContent .mainHeading.largeHeading { font-size: 3.5rem;}
    .webContent .subHeading.largeHeading { font-size: 1.6rem;}
    .webContent p.largeHeading { font-size: 1.3rem;}
    .webContent .line{
      width: 100px;
      margin-bottom: 5px;
      height: 1.5px;
    }
    .webContent .smallHeading {
      font-size: 1.2rem;
      color: var(--color-first);
      letter-spacing: 0.5px;
      font-weight: 600;
      text-transform: capitalize;
    }
    .webContent ul li, .webContent ul li strong, .webContent ol li, .webContent ol li strong, 
    .webContent em, .webContent em u, .webContent u{
      font-weight: 400;
      color: var(--color-content);
      white-space: pre-line;
      font-size: 1rem;
      line-height: 1.6;
    }
    ul.list li { list-style: disc; color: var(--color-content); }
    .hideInMobile{display: block;}
    .hideInWeb{display: none;}
  /*========== COLOR, BG AND BORDER COLOR STYLE =====================*/   
    .bg-1{background-color: var(--bg-1);} 
    .bg-2{background-color: var(--bg-2);}     
    .bg-3{background-color: var(--bg-3);} 
    .bg-4{background-color: var(--bg-4);}     
    .bg-color-gradient{background:linear-gradient(90deg,#330b7e 40%,#ff9e3e);} 
    .color-first,.color-first:hover{color: var(--color-first) !important;}
    .color-second,.color-second:hover{ color: var(--color-second) !important;}
    .border-first{border-color: var(--color-first) !important;}
    .border-second{ border-color: var(--color-second) !important;}
  /*========== FONT STYLE STYLE =====================*/    
    .font-family-first{font-family: var(--font-family-heading); font-style: italic;}
    .font-family-second{font-family: var(--font-family);}
  /*========== INPUT FIELD STYLE =====================*/  
    input.form-control, select.form-select{ height: 40px; border-radius: 0;font-size: 0.85rem}
    input.form-control,input.form-control:focus,select.form-select,select.form-select:focus,
    textarea.form-control,textarea.form-control:focus { background-color: #fff; }
    textarea.form-control { resize: none; border-radius: 0; }
    .form-check-input {width: 1em;height: 1em;}
    .form-check-input:checked { background-color: var(--color-first);border-color:var(--color-first); }
    label strong{ font-size: 1rem; font-weight: 500; }
    .form-check-input:focus{box-shadow:none}
    /*.h-45{ height: 45px; }*/
    .form-control.is-valid, .was-validated .form-control:valid,.form-select.is-valid, .was-validated .form-select:valid,
    .form-control.is-invalid, .was-validated .form-control:invalid,.form-select.is-invalid, .was-validated .form-select:invalid {background: transparent;}
    .martop{margin-top: 65px}
  /*========== TEXT LIMIT STYLE ======================*/
    .text-limit-1,.text-limit-2,.text-limit-3,.text-limit-4{
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .text-limit-1{ -webkit-line-clamp: 1; }
    .text-limit-2{ -webkit-line-clamp: 2; }
    .text-limit-3{ -webkit-line-clamp: 3; }
    .text-limit-4{ -webkit-line-clamp: 4; }
  /*========== OWL CAROUSEL STYLE ====================*/
    .owl-theme .owl-nav{margin-top:0 !important }
    .owl-theme .owl-nav [class*=owl-] { margin: 0!important; }
    .owl-carousel .owl-nav button span {
      opacity: 0;
      width: 0;
      height: 0
    }
    .owl-carousel .owl-nav button:focus {
      outline: 0!important;
      border: 0!important
    }
    .owl-carousel .owl-nav button.owl-next::after,.owl-carousel .owl-nav button.owl-prev::after {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      top: 10px;
      right: 5px;
      bottom: 5px;
      left: 20px;
      transform: rotate(45deg);
      border-radius: 0;
      border: 2px solid #fff;
      border-left: 0;
      border-bottom: 0;
      margin-left: -9px;
      margin-bottom: 2px
    }
    .owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev {
      width: 35px;
      height: 35px;
      background: var(--color-second) !important;
      position: absolute;
      border-radius: 50%;
      box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.6);
      top: 35%
    }
    .owl-carousel .owl-nav button.owl-prev {transform: rotate(180deg)}
    .owl-theme .owl-nav .owl-prev {
      right: initial;
      left: -1%;
    }
    .owl-theme .owl-nav .owl-next { right: -1%; }
/*============ BANNER STYLE ==========================*/
  .main-banner{background-color: #fcfcfd;}
  .largeButton.btn-outline-second{
    background: var(--color-second); 
    color: #fff;
    padding: 10px 40px;
    font-size: 1.3rem;
  }
/*============ HOME PAGE STYLE ==========================*/  
  /*============ EXCLUSIVE OFFERS STYLE ==========================*/
    .stores-logo img{ padding: 0; height: 65px;object-fit: scale-down;}
    .stores-logo .btn-sm {padding: .15rem .25rem;font-size:0.8rem;font-weight:600;}
  /*============ CATEGORY STYLE ==========================*/
    .category-list-Carousel img{
      width: 100px !important;
      height: 100px;
      border-radius: 50%;
      margin: 0 auto;
    }
    .category-list-Carousel .category-name{font-weight: 500;font-size: 0.9rem}
  /*============ FAQ STYLE ==========================*/  
    .accordion-item:first-of-type>.accordion-header .accordion-button,.accordion-button:focus{
      border: 0;
      outline: 0;
      box-shadow: none;
    }
  /*============ POPULAR CATEOGRIES LIST STYLE ==========================*/ 
    .popular-category-list{
      column-count: 3;
      column-fill: balance;
    }
    .popular-category-list li a{
      position: relative;
      padding-left: 20px;
      display: inline-block;
      color: var(--color-first);
      font-size: 1rem;
      font-weight: 500;
    }
    .popular-category-list li a:before{
      position: absolute;
      font-family: "FontAwesome";
      content: "\f101";
      font-size: 1.2rem;
      color: var(--color-second);
      top: -10%;
      left: 0;
    } 
  /*============ TOP SEARCH LIST STYLE ==========================*/ 
    .top-search-list li {
      border: 1px solid var(--color-first);
      margin: 0 9px 9px 0;
      background-color: transparent;
      border-radius: 2px
    }
    .top-search-list{ display: flex; flex-wrap: wrap; } 
    .top-search-list li {
      border: 1px solid var(--color-first);
      margin: 0 9px 9px 0;
      background-color: transparent;
      border-radius: 2px;
    }
    .top-search-list li a{
      color: var(--color-first);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.5;
      padding: 7px 12px;
      display: block;
    }
    .top-search-list li:hover{background:var(--color-second);border: 1px solid var(--color-second);}
    .top-search-list li:hover a{color:#fff }  
  /*============ MERCHANT STYLE ==========================*/   
    .brand-retailers{ display: flex;}
    .brand-retailers .brand-retailers-image{
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
      border-radius: 10px;
      background-color: #fff;
      text-align: center;
      border: 1px solid #b9b9b9;
    }
    .brand-retailers .brand-retailers-image:hover{box-shadow: 0px 1px 5px rgb(0 0 0 / 30%);}
    .brand-retailers .brand-retailers-image img{
      max-width: 100%;
      max-height: 80px;
      margin: 0 auto;
    }
  /*============ DEALS STYLE ==========================*/   
    .webContent p.small-coupon-details{font-size: 0.8rem}
    .deals-coupon-card .subHeading{font-size: 1rem}
    .deals-coupon-card .offer-desc{font-weight: 500;font-size: 0.85rem}
/*============ LISITNG STYLE ==========================*/   
  .stores-tab .nav-tabs { gap: 5px }
  .stores-tab a.nav-link {
    font-size: 14px;
    padding: 0;
    text-transform: capitalize;
    font-weight: 700;
    color: #353535;
    height: 28px;
    width: 28px;
    line-height: 27px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #f1f1f1;
    border-color: #bababa!important;
    border-radius: 4px
  }
  .stores-tab .nav-tabs .nav-link.active {
    color: #fff !important;
    background-color: var(--color-second) !important;
    border-color: var(--color-second) !important;
    border: 1px dashed var(--color-second);
  }     
  .all-stores .offers img {
    width: 100%;
    height: 50px;
    object-fit: contain;
    display: block;
    margin: 0 auto
  }
  .coupons-title {
    font-size: .9rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 5px;
    color: var(--color-content);
  }
  .coupon-info {
    color: var(--color-first);
    font-weight: 600;
    font-size: .8rem;
  }
  .categories-sidebar .nav-item .nav-link {
    font-size: 14px;
    padding: 3px 15px;
    color:#000;
    letter-spacing: 0;
    font-weight: 500;
    text-transform: capitalize
  }
  .categories-sidebar .navbar-nav .nav-item.active,.categories-sidebar .nav-item:hover {
    background-color: var(--color-first)!important;
    border-color: var(--color-first)!important;
  }
  .categories-sidebar .navbar-nav .nav-item.active .nav-link,.categories-sidebar .nav-item:hover .nav-link{ color: #fff; }
/*============ COUPONS STYLE ==========================*/     
  .merchant-brand-logo img {
    width: 150px;
    height: 100px;
    object-fit: scale-down;
  }
/*============ BLOG STYLE ==========================*/   
  /*** author ***/
    .author-details{
      display: flex;
      align-items: center;
      margin: 10px 0;
    }
    .author-details .author-img{
      display: inline-block;
      width: 35px;
      height: 35px;
    }
    .author-details .author-txt{margin-left: 10px;width: 80%;}
    .author-details .author-img,.author-details .author-txt{clear: both;}
    .author-details .author-img img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }
    .author-details .author-txt span{color: #333}
    .author-details .author-txt a{color: #3557ff;}
    .seperatorLine{border-right: 1px solid #333; padding-right: 5px;margin-right: 5px}
    .author-details-desc img {
      width: 150px;
      height: 150px;
      float: left;
      margin:0 20px 20px 0px;
      margin-left:0;
      border-radius:50%;
      object-fit: cover;
      object-position: center;
    }
    .author-details-desc{width:100%}
  /*** pagination ***/
    .pagination .page-item.active .page-link, .allTopicsSection .pagination .page-item.active .page-link, .paginationBlock .pagination .page-item.active .page-link {
      background: var(--color-second);
      border-color: var(--color-second);
      color: #fff;
/*      margin-right:5px;*/
    }
    .article-details h1,.article-details h2,.article-details h3,.article-details h4,.article-details h5,.article-details h6{
      color: var(--color-third);
      font-weight: 700;
      font-family: var(--font-family);
      letter-spacing: 0;
      line-height: 1.2;
      margin-bottom: 0.5rem;    
    }
.article-details p, .article-details p span, .article-details span p, .article-details p strong, .article-details span, .article-details a, .article-details p a, .article-details ul li, .article-details ul li strong, .article-details ul li a, .article-details ul li a strong, .article-details ol li, .article-details ol li strong, .article-details ol li a, 
.article-details ol li a strong{
  color: var(--color-content);
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: 1.4;
  /*white-space: pre-line;*/ 
  margin-bottom: 0.5rem;
  padding-bottom: 0rem;
}
.article-details ul, .article-details ol{padding-left: 1rem;}   
.article-details ul{padding-left: 15px}
.article-details ul li{list-style:disc}
.article-details a, .article-details p a, .article-details ul li a, .article-details ol li a, .article-details span a{color:#3557ff;}
.article-details img{
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: 1rem;
}
.article-card .card{
  width: 100%;
  margin-bottom: 1rem;
  transition: 0.3s ease-out;
}
.article-card .card img {
  max-width: 100%;
  border-top-left-radius:0.375rem;
  border-top-right-radius:0.375rem;    
  object-position: center;
  object-fit: cover;
  height: 275px;
  display: block;
  margin: 0 auto;
}
.article-card .category-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-second);
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.article-card .subHeading{
  text-transform: capitalize;
  color: var(--color-first);
}

.deals-coupon-card small{
font-size: .675em;
text-align: center;  
padding-top:0.5rem;
}

.merchantSection .nav-item.active .nav-link, .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
background: var(--color-second);
}
.merchantSection .nav-pills li+li {
margin-left: 10px;
}
.merchantSection .nav-item {
background: var(--color-first);
white-space: normal;
}
.merchantSection .nav-item .nav-link {
color: #fff;
font-weight: 500;
width:120px;
}
.code-image{
  width: 120px;
  height: auto;
  object-fit: contain;
  }
  .pagination li{white-space: normal!important;}