:root { --main: #5b935f; --second: #3f46c2; --green: #8ABE53;}
html { font-size: 13px; }
body { font-size: 0.92rem; font-family: 'Open Sans',sans-serif; background-color: #f1f1f1; }
a, a:focus { color: var(--main); -webkit-transition: 0.25s; transition: 0.25s; text-decoration: none; outline: 0; }
.clear { clear: both; }
.btn, input.form-control { border-radius: 2px; }

/* Responsive Font Sizes */
@media (min-width: 576px) {
  html { font-size: 14px; }
}

@media (min-width: 768px) {
  html { font-size: 15px; }
}

@media (min-width: 992px) {
  html { font-size: 15px; }
}

.bg-primary { background-color: var(--main)!important; }
.btn-primary { color: #fff; border-color: var(--main); }
.btn-primary:hover { background-color: var(--main)!important; border-color: var(--main); }

/* Navigation Styles */
header { color: #fff; }
#navbarNav{justify-content: center;}
.navbar-brand { font-size: 1.6rem; line-height: 1.5; font-weight: 800; color: inherit; }
.navbar-brand:focus, .navbar-brand:hover { color: inherit; }
.navbar-nav { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
/* footer */
.footer_heading{text-align: left; font-weight: bold;}

/* Search */
#headerSearchInput { padding: 10px; width: 100%; font-size: 16px; }
#headerSearchInput:focus{outline: none;} 
#popupSearchInput{border: 2px solid skyblue; padding: 10px; width: 100%; font-size: 16px; }
#popupSearchInput:focus{outline:transparent;  border: 2px solid #009ffd;}
.search-popup { display: none; width: 100%; height: 100%; position: fixed; z-index: 2; left: 0; top: 0; background-color: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.3s ease-in-out; }
.popup-content { background-color: #fefefe; margin: 3% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 80%; height: auto; max-height: 80vh; overflow-y: auto; transform: scale(0.7); transition: transform 0.3s ease-in-out; }
.search-popup.show { display: block; opacity: 1; }
.search-popup.show .popup-content { transform: scale(1);}
.search-close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; position: absolute; right: 20px; top:5px}
.search-close:focus, .search-close:hover { color: #000; text-decoration: none; cursor: pointer; }
.search-box.ion-ios-search::before { color: #737373; position: absolute; font-size: 20px; top: 50%; left: 9px; width: 18px; height: 18px; margin: -9px 0 0; text-align: center; }
.search-box input { height: inherit; border: none; padding: 7px; }
body.popup-open { overflow: hidden;}
/*  End Search */

@media screen and (max-width: 500px) {
  .header-container { gap: 0; }
  .search-box { display: inline-block; vertical-align: middle; position: relative; z-index: 1; background: #fff; height: 35px; border: 0; padding: 0 0 0 30px; padding-left: 34px; font-weight: 400; border-radius: 2px; }
  #login-div { display: none; }
  .section-heading h2 { font-size: 18px; }
  .navbar { background: #fff; border-bottom: 1px solid #d5d8db; padding: 0; margin: 0; z-index: 1; min-height: 35px; }
  .popup-content { background-color: #fefefe; margin:0; padding: 20px; border: 1px solid #888; width: 100%; max-width: 100%; height: auto; max-height: 100vh; overflow-y: auto; transform: scale(0.7); transition: transform 0.3s ease-in-out; }
  .footerbox1, .footerbox2, .footerbox3, .footerbox4 { position: relative; width: 100%; padding: 0 10px; }
  .deals-slider .deal-slide-image { position: relative; overflow: hidden; height: 115px; }
  #halloween-div { cursor: pointer; position: relative; top: -10px; }
  .footer_heading{text-align: center;font-weight: bold;}
  .footer_list{display: flex; flex-direction: column; text-align: center; font-size: 14px;}
  .mobile-hidden{display: none;}
  .navbar-nav { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: column; }
}
@media (min-width: 501px) and (max-width: 900px) {
  .header-container { gap: 5px; justify-content: space-around; }
  .search-form { width: 100%; }
  .mainContainer { padding: 18px 0; }
  .search-box { display: inline-block; vertical-align: middle; position: relative; z-index: 1; background: #fff; height: 35px; border: 0; padding: 0 0 0 30px; padding-left: 34px; font-weight: 400; border-radius: 2px; }
  .section-heading h2 { font-size: 1.6rem; }
  .footerbox1 { position: relative; width: 50%; padding: 0 20px; }
  .footerbox2 { position: relative; width: 50%; padding: 0 20px; }
  .footerbox3 { position: relative; width: 50%; padding: 0 20px; }
  .footerbox4 { position: relative; width: 50%; padding: 0 20px; }
  .deals-slider .deal-slide-image { position: relative; overflow: hidden; height: 180px; }
  .navbar-nav { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: column; }
}
@media screen and (min-width: 901px) {
  .header-container { gap: 30px; justify-content: space-around; }
  .search-form { width: 50%; }
  .mainContainer { padding: 26px 0; }
  .search-box { display: inline-block; vertical-align: middle; position: relative; z-index: 1; background: #fff; height: 35px; border: 0; padding: 0 0 0 30px; padding-left: 34px; font-weight: 400; border-radius: 2px; }
  .top-container { margin: 20px 0; }
  .section-heading h2 { font-size: 1.8rem; }
  .footerbox1 { position: relative; width: 35%; padding: 0 20px; }
  .footerbox2 { position: relative; width: 25%; padding: 0 20px; }
  .footerbox3 { position: relative; width: 20%; padding: 0 20px; }
  .footerbox4 { position: relative; width: 20%; padding: 0 20px; }
  .deals-slider .deal-slide-image { position: relative; overflow: hidden; height: 250px; }
}




.navbar-nav li { font-weight: 600; }
.navbar-expand-lg .navbar-nav .nav-link { padding-right: 0.8rem; padding-left: 0.8rem; }
a.active{border-bottom:2px solid var(--main);}
.navbar-nav li::after { content: ''; height: 3px; width: calc(100% - 0.6rem); display: block; background: transparent; margin: 0 auto; }
.navbar-nav li.active::after { background: var(--main); }

/* Slider */
.slider { position: relative; }
.deal-carousel { position: static; }
.deal-carousel .deals-slider { -webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.75); box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.75); }
.owl-nav [class*='owl-'] { color: #fff; font-size: 14px; margin: 5px; padding: 4px 7px; background: #d6d6d6; display: inline-block; cursor: pointer; border-radius: 3px; }
.deal-carousel .owl-nav { position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.deal-carousel .owl-nav button.owl-next, .deal-carousel .owl-nav button.owl-prev { display: block; height: 50px; width: 50px; border-radius: 50%; margin: 0 40px; border: 1px solid #8c8c8c; background: #fff; color: #8c8c8c; }
.deal-carousel .owl-nav button.owl-next:hover, .deal-carousel .owl-nav button.owl-prev:hover { border: 1px solid #119fb5; color: var(--main); }
.deal-carousel .owl-nav button i { font-size: 31px; line-height: 1.3; }
.deal-carousel .owl-dots { text-align: center; margin: 8px 0; }
.deal-carousel .owl-dots .owl-dot { display: inline-block; zoom: 1; }
.deal-carousel .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 3px; background: #d6d6d6; display: block; -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; border-radius: 30px; }
.deal-carousel .owl-dots .owl-dot.active span, .deal-carousel .owl-dots .owl-dot:hover span { background: var(--main); }
.deals-slider .discount-ribbon { position: absolute; top: 13px; right: 13px; z-index: 11; background-color: #ef6464; color: #fff; width: 55px; height: 55px; text-align: center; font-size: 13px; font-weight: 400; line-height: 55px; vertical-align: center; border-radius: 50%; }
.deals-slider .deal-slide-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background-color: rgba(115, 115, 115, 0.14); }
.deals-slider .bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }

/* Section - Trending Deals and Offers */

.section-heading p.lead { font-size: 1.2rem; }

.excoffer { cursor: pointer; display: block; background: #5e5e5e; }

.exoffer-image { height: 220px; }
#login-div { float: right; font-size: 14px; }
.login { color: #fff; font-size: 14px; text-decoration: none; font-weight: bold; }
.exoffer-bottom { padding: 5px; height: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.exoffer-bottom .exoffer-logo { height: 100%; }
.exoffer-bottom .exoffer-logo img { height: 100%; }
.exoffer-bottom .exoffer-text p { margin: 0.4rem 0; color: #fff; }
.exoffer-bottom .exoffer-text p.lead { font-size: 1.1rem; }
.trending-item { -webkit-box-shadow: 0 0 2px rgba(142, 140, 140, 0.5); box-shadow: 0 0 2px rgba(142, 140, 140, 0.5); }
.trending-item p { color: #fff; background-color: #5e5e5e; padding: 9px 0; }
.owl-dots.disabled, .owl-nav.disabled { display: none; }
.trending-slider .owl-dots { text-align: center; margin: 8px 0; }
.trending-slider .owl-dots .owl-dot { display: inline-block; zoom: 1; }
.trending-slider .owl-dots .owl-dot span { width: 9px; height: 9px; margin: 3px; background: #d6d6d6; display: block; -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; border-radius: 30px; }
.trending-slider .owl-dots .owl-dot.active span { width: 18px; }
.trending-slider .owl-dots .owl-dot.active span, .trending-slider .owl-dots .owl-dot:hover span { background: var(--main); }
.owl-carousel.trending-slider .owl-stage-outer { padding: 5px 3px; }

/* Section - TOP OFFERS */

.topoffer-item { border: 1px solid #ccc; background: #fff; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 25px; margin-bottom: 25px; }
.topoffer-item:hover { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.topoffer-item .topoffer-item-image { height: 120px; min-height: 0; margin-right: 0; margin-bottom: 18px; }
.topoffer-item .topoffer-item-image img { height: 100%; width: auto; vertical-align: middle; }
.topoffer-item a { font-weight: 500; line-height: 1.2; word-wrap: break-word; }

/*=-footer-=*/
footer { color: #fff; background-color: var(--main); }
footer a { color: #fff; text-decoration: none; }
footer a:hover { color: var(--second); }
.social-pet li { display: inline-block; margin-right: 10px; }
.social-pet li a { height: 35px; width: 35px; border-radius: 50%; font-size: 1.3rem; text-align: center; display: block; line-height: 34px; background-color: #3a5a95; color: #fff; }
.social-pet li:nth-child(2) a { background-color: #57aced; }
.social-pet li:nth-child(3) a { background-color: #dd4f43; }
.social-pet li:nth-child(4) a { background-color: #6b27b2; }
.social-pet li a:hover i { transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); }
footer .input-group-addon { background-color: #313131; color: #fff; padding: 7px; }

/*=-Copyright-=*/
.copyright { background-color: var(--second); padding: 12px 0; font-size: 14px; }
.copyright-text { font-weight: 600; }
#footer-about-company { text-align: justify; }

footer ul { list-style-type: none; padding: 5px; }

/* emailSubscribeModal Modal */

#emailSubscribeModal .newsletter { background: var(--main); }
#emailSubscribeModal .newsletter .content h2 { color: #fff; margin: 0; font-weight: 700; }
#emailSubscribeModal .newsletter .content .form-control { height: 50px; border-color: #fff; border-radius: 0; }
#emailSubscribeModal .newsletter .content .form-control { margin: 5px 5px 5px 0; }
#emailSubscribeModal .newsletter .content.form-control:focus { -webkit-box-shadow: none; box-shadow: none; border: 2px solid #243c4f; }
#emailSubscribeModal .newsletter .content .input-group-btn { margin: 5px 0 5px 0; }
#emailSubscribeModal .newsletter .content .btn { min-height: 50px; border-radius: 0; background: #243c4f; color: #fff; font-weight: 600; }

/* Coupon Stores Page */
.stores-wrapper .storetablist, .stores-wrapper .tab-content { background-color: #fff; color: #555; border: 1px solid #e7e7e7; padding: 18px; }
.stores-wrapper .storetablist { background-color: #fafafa; border-bottom: none; padding: 0 18px; }
.stores-wrapper .nav-link { color: #5e5e5e; font-weight: 600; padding: 0; }
.stores-wrapper .nav-link span { display: block; padding: 0.5rem 1rem; }
.stores-wrapper .nav-link.active::after { content: ''; height: 3px; width: calc(100% - 1rem); background-color: #119fb5; display: block; margin: 0 auto; }
.stores-wrapper .nav-link.active { color: var(--main); background: transparent; }
.storetablist { display: none; }
.stores-wrapper .card .card-body a, .stores-wrapper .card .card-header a { color: #5e5e5e; }
.stores-wrapper .card .card-body a::before { margin-right: 0.7rem; }

@media (min-width: 1200px) {
  .storetablist { display: -webkit-box; display: -ms-flexbox; display: flex; }
  .stores-wrapper .card { border: none; }
  .stores-wrapper .card .card-header { display: none; }
  .stores-wrapper .card .collapse { display: block; }
}

@media (max-width: 1200px) {
  .stores-wrapper .card { border: none; border-radius: 2px; }
  .stores-wrapper .card .collapse { border-bottom: 1px solid rgba(0, 0, 0, 0.125); }
  .stores-wrapper .card .card-header { cursor: pointer; }
  .stores-wrapper .card .card-header [aria-expanded='true'] { color: var(--main); font-weight: 600; }
  .stores-wrapper .tab-content>.tab-pane { display: block!important; opacity: 1; }
  .stores-wrapper .storetablist, .stores-wrapper .tab-content { padding: 0; }
}

/* Store detail page */
/*Store page css*/

.percentage-sqaure-store { border: 1px solid #ccc; padding: 15px; margin: 10px; font-size: 2rem; }

/*
This is where we define the fill, color, thickness,
and stroke pattern of the SVG when there is no hover.
The dasharray and offset together define the line position
under the words. Here's also where the transition speed is set.
*/

.shape { /*stroke-width: 2px;*/ fill: transparent; stroke: #009ffd; stroke-dasharray: 85 400; stroke-dashoffset: -220; -webkit-transition: 1s all ease; transition: 1s all ease; }

/* 
Pushing the text up into the SVG. Without this the
text would be below the div's.
*/

.textbtncode { margin-top: -35px; text-align: center; background: #119fb5; padding: 5px; }
.coupon-btn { background: #f1f2f1; border: 1px solid #000; }
.deal-btn { color: #fff; }
.textbtncode a { color: #fff; text-decoration: none; font-weight: 100; font-size: 1.1em; }
.coupon-btn a { color: #222; }

/* 
Changing the shape on hover. I change the color of the stroke,
make it thinner, then set it to again wrap around the entire parent element.
*/

.deal-card .svg-wrapper:hover .shape { stroke-dasharray: 50 0; stroke-width: 3px; stroke-dashoffset: 0; stroke: #119fb5; }
.red { background-color: #e80707; }
.red:after { border-right-color: #e80707; }
#store-about { padding: 5px; display: block!important; }

/* Category detail page */
.deals_category { list-style: none; }
.deals_category li { background:var(--main);  border-color: #119fb5; border-radius: 2px; padding: 3px 13px; color: #fff; margin-bottom: 5px; }
.deals_category li a::before { margin-right: 12px; }
.deals_category li a { color: inherit; display: block; }
.deals_category li a:hover { color:var(--second) }