/*
Theme Name: Bixol Child
Theme URI: http://demo.casethemes.net/bixol/
Author: Case-Themes
Author URI: https://themeforest.net/user/case-themes/portfolio/
Description: Cleaning Services WordPress theme is a modern, clean and professional WordPress theme which is specially created to spread and represent your cleaning services business to your potential customers. <b>Bixol</b> theme is fully responsive, and it looks attractive on all types of screens and devices. It comes with a lot of user-friendly and customizable features those will help you to create a robust website to achieve the main goal of online business.   
Version: 1.6.0
License: ThemeForest
License URI: https://themeforest.net/licenses
Template: bixol
Text Domain: bixol-child
Tags: cleaner, cleaning, cleaning agency, cleaning business, cleaning company, cleaning service, building, floor cleaning, house cleaning, window cleaning, housekeeping, washing, maintenance, janitor
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@font-face {
  font-family: 'ESRebondGrotesque-Regular';
  src: url('assets/fonts/ESRebondGrotesqueBold.otf');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'ESRebondGrotesque-Regular';
  src: url('assets/fonts/ESRebondGrotesqueBold.otf');
  font-weight: 700;
  font-style: normal;
}

.flexed {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.flexed--between {
	justify-content: space-between;
}

.flexed--center {
	justify-content: center;
}

.coupons-wrap h1 {
    font-size: 44px;
    color: #000;
}

.coupons-heading {
    padding-bottom: 5px;
}

.tabs-lg-wrap {
    padding: 8px;
    border: 0.5px solid rgba(0,0,0,0.2);
    border-radius: 16px;
    align-items: stretch;
    background: #fff;
    gap: 8px;
}

.tab-lg-nav {
    max-width: 400px;
    width: 100%;
    background: #F0F0F0;
    border-radius: 12px;
    padding: 8px;
}

.tabs-lg-contents {
    flex: 1;
    position: relative;
}


.tab-lg-nav-item {
    padding: 10px 12px;
    width: 100%;
    border-radius: 10px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
    gap: 8px;
    position: relative;
    transition: 0.3s;
    font-family: "ESRebondGrotesque-Regular" !important;
}

.tab-lg-nav-item:not(:last-child) {
    margin-bottom: 8px;
}

.tab-lg-nav-item.active, .tab-lg-nav-item:hover {
    background: #fff;
}

.coupons-wrap {
    color: #000;
    font-family: 'Roboto';
}

.tab-lg-nav-item svg {
    position: absolute;
    right: 16px;
    transform: translateX(-16px);
    opacity: 0;
    transition: 0.3s;
}

.tab-lg-nav-item.active svg, .tab-lg-nav-item:hover svg {
    opacity: 1;
    transform: translateX(0);
}

.tab-lg-info-brand {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    flex: 1;
    gap: 16px;
}

.btn a {
    font-size: 14px;
    color: #000;
    padding: 10px 20px;
    background: #fff;
    border-radius: 100px;
    transition: 0.3s;
    line-height: 20px;
    display: block;
}

.btn.btn--accent a {
    background: #e8ff77;
    color: #000;
    font-size: 16px;
    text-transform: uppercase;
}

.btn {
    background: none !important;
    padding: 0 !important;
}

.btn:after {
	display: none;
}

.btn a:hover {
    background: #000;
    color: #fff;
}

.btn.btn--accent a:hover {
    background: #000;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
}

.tab-lg-info {
    gap: 16px;
    height: 100%;
    align-items: flex-end;
    padding: 20px;
    position: relative;
    line-height: 1.1em;
    font-size: 20px;
}

.tab-lg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.tabs-lg-content {
    position: absolute;
    height: 100%;
    width: 100%;
}

.tab-lg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section.coupon-section {
    margin-bottom: 64px;
}

.coupons-wrap h2 {
    font-size: 32px;
    line-height: 1.1em;
    color: #000;
    margin-bottom: 8px;
}

.coupon-section-inner header p {
    font-size: 16px;
    color: #808178;
}

.coupons-wrap h1, .coupons-wrap h2, .coupons-wrap h3 {
    font-family: "ESRebondGrotesque-Regular" !important;
}

.tab-lg-info-brand-img {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50px;
}

.tab-lg-info-brand-img img {
    width: auto;
    padding: 10px;
}

.tab-lg-info-brand span {
    flex: 1;
}

section.coupon-section.coupon-section-padding {
    padding: 64px 0;
}

.coupon-list-tab-nav-item {
    flex: 1;
    padding: 4px;
    border: 1px solid transparent;
    position: relative;
    border-radius: 12px;
    font-family: "ESRebondGrotesque-Regular" !important;
    cursor: pointer;
    transition: 0.3s;
    overflow: hidden;
}

.coupon-list-tab-nav-item img {
    height: 112px;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: 0.3s;
}

.coupons-list-tabs-nav {
    gap: 6px;
}

.coupon-list-tab-nav-item.active, .coupon-list-tab-nav-item:hover {
    border-color: #000;
}

.coupon-list-tab-nav-item span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px;
    text-align: center;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    z-index: 2;
}

.coupon-list-tab-nav-item:after {
    content: '';
    position: absolute;
    width: calc(100% - 8px);
    background: rgba(0, 0, 0, 0.3);
    left: 4px;
    top: 4px;
    height: calc(100% - 8px);
    border-radius: 8px;
}

.coupon-section-inner header {
    margin-bottom: 20px;
}

.col-brand {
    flex: 1;
    padding: 8px;
    border: 0.5px solid rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    text-align: center;
}

.cols-brands {
    gap: 12px;
}

.col-brand img {
    height: 100%;
    width: 100%;
    transition: 0.3s;
    object-fit: contain;
}

.col-brand-subtitle {
    color: #808178;
    font-size: 12px;
    padding-bottom: 12px;
}

.col-brand-title {
    padding: 12px 0 6px;
    font-size: 18px;
    color: #000;
    font-weight: 500;
}

.col-brand-img {
    height: 120px;
    background: #F0F0F0;
    border-radius: 16px;
    overflow: hidden;
}

.col-brand:hover .col-brand-img img {
    transform: scale(1.05);
}

section.coupon-section:has(.faq-list) .coupon-section-inner {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
}

section.coupon-section:has(.faq-list) .coupon-section-inner header {
    max-width: 400px;
    width: 100%;
    padding-top: 40px;
}

.faq-list {
    max-width: 590px;
    flex: 1;
    padding: 40px 0 65px 30px;
}

.faq-list-item {
    padding: 16px 16px 16px 24px;
    margin-bottom: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.08);
}

.faq-list-item-q span {
    padding: 3px 0;
    font-family: ESRebondGrotesque-Regular;
    font-weight: 600;
    font-size: 20px;
    flex: 1;
}

.faq-list-item-q button {
    width: 28px;
    height: 28px;
    padding: 0;
    text-indent: -999999px;
    background: #D2C7FF !important;
    border-radius: 20px;
    transition: 0.3s;
}

.faq-list-item-q button:after, .faq-list-item-q button:before {
    content: '';
    width: 10px;
    height: 2px;
    position: absolute;
    top: calc(50% - 1px);
    left: calc(50% - 5px);
    background: #000;
    border-radius: 8px;
    transform: none;
    animation: none !important;
    transition: 0.2s;
}

.faq-list-item-q button:before {
	transform: rotate(90deg);
}

.faq-list-item.active button:before {
    transform: none;
}

.faq-list-item-a {
    padding: 8px 8px 0 0;
    color: #5B5B5B;
    line-height: 1.5em;
}

.faq-list-item-q {
    cursor: pointer;
}

.faq-list-item-q {
    cursor: pointer;
    gap: 8px;
}

.cta-inner {
    background: #E8FF77;
    padding: 40px;
    border-radius: 20px;
    gap: 20px;
}

.cta-info p {
    margin: 0;
}

.cta-info {
    padding-left: 68px;
    flex: 1;
}

.cta-action {
    max-width: 440px;
    width: 100%;
    position: relative;
}

.cta-action form input {
    background: #fff;
    box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.12);
    border-radius: 100px;
    padding: 15px 32px;
    line-height: 1.5em;
    font-size: 16px;
    color: #000;
    height: auto;
}

.cta-action form input[type="submit"] {
    padding: 10px 20px;
    background: #000;
    line-height: 1.4;
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 14px;
    color: #fff;
}

.wpcf7-form .wpcf7-form-control-wrap {
    margin: 0 !important;
}

.cta-form p {
    margin: 0;
}

span.wpcf7-spinner {
    position: absolute;
    right: 0;
}

.coupon-heading-top {
    background: #000;
    padding: 16px 0;
}

header.coupons-wrap-heading ul {
    display: flex;
    align-items: center;
    margin: 0;
    list-style: none;
}

li.header-top-cta-btn a {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 100px;
    display: inline-block;
    font-size: 14px;
    line-height: 1.4em;
    font-weight: 700;
    transition: 0.2s;
}

li.header-top-cta-btn a:hover {
	opacity: 0.8;
}


.coupon-heading-bottom {
    background: #E8FF77;
    padding: 16px 0 0;

}

ul#menu-coupons {
    gap: 32px;
/*    overflow: auto;*/
    scrollbar-color: #333333 #e8ff77;
    scrollbar-width: thin;
}

ul#menu-coupons li a {
    color: #000;
    font-weight: 600;
    line-height: 1.5em;
    display: block;
    padding: 0 0 16px;
    border-bottom: 2px solid transparent;
    transition: 0.3s;
}

ul#menu-coupons li.current-menu-item a {
    border-bottom: 2px solid #000;
}

ul#menu-coupons li a:hover {
	border-bottom-color: #000;
}

ul#menu-coupons li {
    position: relative;
}

ul#menu-coupons li ul {
    position: absolute;
    left: -15px;
    top: 100%;
    z-index: 3;
    width: 200px;
    background: #e8ff77;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
}

ul#menu-coupons li li a {
    border: none !important;
    padding: 10px 15px;
    display: block;
    width: 100%;
}

ul#menu-coupons li ul li {
    width: 100%;
}

ul#menu-coupons li:hover ul {
    visibility: visible;
    opacity: 1;
}

ul#menu-coupons li.menu-item-has-children > a {
    position: relative;
    padding-right: 18px;
}

ul#menu-coupons li.menu-item-has-children > a:after {
    content: '';
    width: 7px;
    height: 7px;
    position: absolute;
    border: 2px solid #000;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    top: 7px;
    right: 0;
    transition: 0.3s;
}

ul#menu-coupons li.menu-item-has-children:hover > a:after {
    transform: rotate(-135deg) translate(-3px, -4px);
}

header.coupons-wrap-heading {
    margin-bottom: 64px;
}

.coupon-section-inner .coupons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.coupon-section-inner .coupons .single-coupon {
    width: calc(50% - 6px);
    padding: 12px 20px 12px 12px;
    border: 0.5px solid rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    transition: 0.2s;
}

.coupon-section-inner .coupons .single-coupon:hover {
	border-color: rgba(0, 0, 0, 0.6);
}

.coupon-section-inner .coupons .single-coupon img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 12px;
}

.coupons-list-list form {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    align-items: center;
    gap: 6px;
    position: absolute;
    top: 8px;
    right: 0;
    color: #808178;
}

.coupons-list-list form .nice-select {
    flex: 1;
    border: none;
    color: #000;
    font-weight: 700;
    padding: 7px 40px 5px 10px;
    text-transform: capitalize;
}

.coupon-section-inner {
    position: relative;
}

.coupons-list-list form .nice-select:after {
    color: #000;
}

.coupons-list-list form + #coupons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.coupons-list-list form + #coupons-container h2 {
    display: none;
}

.coupons-list-list form + #coupons-container .coupon-wrapper {
    width: calc(25% - 9px);
}

.coupons-list-list form + #coupons-container .coupon-wrapper .coupon {
    width: 100%;
    padding: 8px 8px 20px;
    height: 100%;
}

.coupons-list-list form + #coupons-container .coupon-wrapper .coupon > a img {
    height: 200px;
    width: 100%;
}

.coupons-list-list form + #coupons-container .coupon-wrapper .coupon h3 {
    display: none;
}

.coupons-list-tabs-contents {
    margin-top: 20px;
}

.single-coupon-details-shop img {
    max-width: 32px;
    height: 32px !important;
    border-radius: 30px !important;
    border: 0.5px solid rgba(0, 0, 0, 0.15);
}

.single-coupon-details-shop {
    gap: 4px;
    margin-bottom: 8px;
    font-size: 14px;
}

.single-coupon a:hover,
.single-coupon a {
    color: #5B5B5B;
}

.single-coupon-left {
    gap: 12px;
    flex: 1;
}

.single-coupon-details {
    flex: 1;
}

.single-coupon-details-text {
    font-size: 18px;
    font-weight: 500;
    color: #000;
    line-height: 1.1em;
}

.single-coupon-img {
    width: 80px;
    height: 80px;
}

.single-coupon-off {
    background: #F0F0F0;
    text-align: center;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 700;
    color: #000;
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid currentColor;
}

.single-coupon-expires {
    margin-top: 8px;
    font-size: 12px;
    text-align: center;
}

.single-coupon-expires b {
    color: #000;
}

.single-coupon > a {
    gap: 12px;
}

button.load-more-coupons {
    margin: 32px auto 0;
    display: block;
    background: #e8ff77;
    color: #000;
    text-transform: uppercase;
    border-radius: 40px;
    padding: 5px 50px;
    transition: 0.3s;
}

button.load-more-coupons:hover {
	background: #000;
	color: #fff;
}

section.coupon-section.coupon-section-padding .single-coupon-off {
    background: #fff;
}

.single-coupon-column a {
    padding: 8px;
    display: block;
    border: 0.5px solid rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    transition: 0.3s;
    height: 100%;
}

.single-coupon-column a:hover {
    border-color: rgba(0,0,0,0.6);
}

.single-coupon-column-img {
    position: relative;
}

.single-coupon-column-img img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.single-coupon-column-title {
    padding: 12px 12px 6px;
    font-size: 18px;
    font-weight: 500;
    color: #000;
    line-height: 1.1em;
}

.single-coupon-column {
    height: 100%;
}

.single-coupon-column-expire {
    padding: 0 12px 12px;
    color: #808178;
    font-size: 12px;
}

.single-coupon-column-expire b {
    color: #000;
    font-weight: 600;
}

.single-coupon.coupon-hidden {
    display: none;
}

.coupon-section-inner .load11 {
    display: none;
}

button.close-popup {
    background: #fff;
    text-indent: -99999px;
    padding: 0;
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 30px;
}

button.close-popup:after, button.close-popup:before {
    content: '';
    width: 16px;
    height: 2px;
    background: #000;
    position: absolute;
    top: calc(50% - 1px);
    left: calc(50% - 8px);
    transform: rotate(45deg);
    border-radius: 10px;
    animation: none !important;
}

button.close-popup:after {
    transform: rotate(-45deg);
}

.coupon-popup-wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 600px;
    background: #fff;
    border-radius: 6px;
    padding: 0 50px 50px;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.coupon-popup-wrap.active {
	opacity: 1;
	visibility: visible;
}

#overlay {
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.7);
	width: 100%;
	height: 100%;
	z-index: 4;
}

.coupon-popup-code > div {
    border: 2px dashed currentColor;
    padding: 10px 20px;
    gap: 8px;
    cursor: pointer;
    position: relative;
    font-size: 20px;
}

.coupon-popup-code > div.clicked:after {
	content: 'Copied';
    position: absolute;
    top: 0;
    font-size: 12px;
    right: 0;
}

.coupon-popup-code {
    text-transform: uppercase;
    margin: 20px 0;
}

.coupon-popup-title {
    text-align: center;
}

.coupon-popup-title h3 {
    color: #000;
}

.coupon-popup-text {
    text-align: center;
}

.coupon-popup-link {
    text-align: center;
    display: block !important;
    margin: 0 auto;
    max-width: 110px;
}

button.close-popup {
	display: block;
	margin-left: auto;
	top: 10px;
	right: -35px;
	border: 1px solid #898888;
	margin-bottom: 20px;
}

button.close-popup:hover:after, button.close-popup:hover:before {
    background: #fff;
}