/*
Theme Name:     xCommerce
Theme URI:      https://sparklewpthemes.com/wordpress-themes/xcommerce/
Author:         sparklewpthemes
Author URI:     https://sparklewpthemes.com/
Description:    Spark Commerce is lite lightweight, fast, fully customizable & beautiful WordPress theme suitable for online business, online store. It is very lightweight and offers unparalleled speed. Built with SEO in mind, xCommerce comes with Schema.org code integrated so search engines will love your site. It offers special features and templates so it works perfectly with all page builders like Elementor, Beaver Builder, Visual Composer, SiteOrigin, Divi, etc. Some of the other features: # WooCommerce Ready # Responsive # RTL & Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained. Looking for a perfect base theme? Look no further. xCommerce is fast, fully customizable and WooCommerce ready theme that you can use for building any kind of website!
Version:        1.0.1
Tested up to:   6.2
Requires PHP:   7.4
License:        GNU General Public License v3 or later
License URI:    http://www.gnu.org/licenses/gpl-3.0.html
Template:       spark-multipurpose
Text Domain:    xcommerce
Tags:           one-column, two-columns, right-sidebar, left-sidebar, custom-header, custom-background, custom-menu, translation-ready, featured-images, theme-options, custom-logo, e-commerce, footer-widgets

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.

xCommerce is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
sparklewpthemes is distributed under the terms of the GNU GPL v3 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/
/* WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.grid-6 {
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

@media(max-width: 768px) {

    .grid-6,
    .grid-5,
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

@media(max-width: 600px) {

    .grid-6,
    .grid-5,
    .grid-4,
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media(max-width: 575px) {

    .grid-6,
    .grid-5,
    .grid-4,
    .grid-3,
    .grid-2 {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
    }
}

@media(min-width: 678px) {
    .banner-slider .slider-item .slider-content {
        width: 50% !important
    }
}

.promoservice-wrap .feature-list .bottom-content {
    background-color: #fff;
    display: flex;
    align-items: center;
    gap: 1em;
    text-align: left;
}

@media(max-width: 768px) {
    .promoservice-wrap .feature-list .bottom-content {
        display: block;
        text-align: center;
    }
}

.promoservice-wrap .feature-list .box.image-enable .bottom-content {
    background: transparent;
}

.promoservice-wrap .feature-list .bottom-content h4 {
    margin: 0;
}

.promoservice-wrap .feature-list .icon-box {
    background: transparent !important;
    height: unset !important;
    width: unset !important;
}

.promoservice-wrap .feature-list .icon-box i {
    color: var(--theme-color);
}

.promoservice-wrap .feature-list .box.image-enable .icon-box {
    margin: unset !important;
}

.widget ul.product_list_widget li {
    display: block !important;
}

.full-search-wrapper .widget-search input,
.widget-search input {
    border-color: var(--theme-color);
}

.search-layout-two.close-icon {
    background: var(--theme-color);
    color: var(--white-color);
}

/** slider dots **/
.owl-carousel .owl-dots,
.owl-carousel .owl-dots,
.owl-carousel .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 30px;
}

.owl-carousel .owl-dots,
.owl-carousel .owl-dots {
    margin-bottom: 40px;
}

.owl-carousel .owl-dots button,
.owl-carousel .owl-dots button,
.owl-carousel .owl-dots button {
    display: block;
    width: 15px;
    height: 15px;
    background-color: var(--light-color);
    border-radius: 15px;
    margin: 0 5px;
}

.owl-carousel .owl-dots button.active,
.owl-carousel .owl-dots button.active,
.owl-carousel .owl-dots button.active {
    background-color: var(--theme-color);
}