/*!
Theme Name: The Storefront Woocommerce
Theme URI: https://www.revolutionwp.com/products/storefront-woocommerce
Author: revolutionwp
Author URI: https://www.revolutionwp.com/
Description: The Storefront WooCommerce Theme is a sleek, modern, and minimal eCommerce solution that combines elegance, sophistication, and functionality for a variety of online stores. With a clean, clutter-free layout, it guarantees a seamless and user-friendly shopping experience, enhanced by stunning, retina-ready visuals across all devices. This theme is ideal for a wide range of WooCommerce stores—from fashion boutiques and electronics shops to beauty brands and home décor marketplaces. It supports mobile-friendly designs for retail businesses, digital downloads, appointment bookings, and diverse product offerings. Built with fully responsive and mobile-optimized layouts, Storefront ensures accessibility on desktops, tablets, and smartphones while maintaining fast, secure performance through clean code. This ecommerce theme simplifies the setup of product catalogs, shopping carts, and checkout systems, offering extensive customization options via Bootstrap support and rich shortcodes for tailoring layouts, colors, and typography to align with brand identity. With key features like promotional banners, testimonials, and strategically placed Call-to-Action buttons, it effectively enhances conversions and builds customer trust. Additionally, integrated social media links and interactive elements contribute to the shop's visual appeal, while translation-ready functionality ensures a global reach for businesses. Whether launching a fashion store, tech shop, or specialty ecommerce venture, the Storefront WooCommerce Theme empowers entrepreneurs and developers to create a secure, fast-loading, and visually captivating online store that delivers an exceptional shopping experience for customers worldwide.
Version: 2.3.2
Requires at least: 5.5
Tested up to: 7.0
Requires PHP: 5.6
License: GNU General Prefer License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-storefront-woocommerce
Template: wp-shop-woocommerce
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, grid-layout, full-width-template, wide-blocks, editor-style, custom-background, custom-colors, custom-header, custom-logo, custom-menu, sticky-post, featured-images, footer-widgets, flexible-header, post-formats, theme-options, threaded-comments, translation-ready, rtl-language-support, e-commerce, portfolio, blog

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

a{
    text-decoration: none;
    color: var(--color-primary1);
}
:root {
  --primary-color: #30BFBF;
  --secondary-color: #212A39;
  --body-font: 'Montserrat', sans-serif;
}
#main-slider-wrap button.owl-prev i{
  color: #fff;
}
#main-slider-wrap .owl-prev, #main-slider-wrap .owl-next{
  background: var(--primary-color);
  border:1px solid var(--primary-color);
}
#main-slider-wrap .owl-prev:hover, #main-slider-wrap .owl-next:hover{
  background: transparent;
  border:1px solid #fff;
  color: #fff;
}
.site-header .return-btn a {
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.site-header .return-btn a:hover {
  color: var(--primary-color);
}
.site-header .topbar-text {
  color: rgb(255 255 255 / 90%);
  font-size: 15px;
  padding-left: 5px;
}
.nav-box-header-right p{
  font-weight: 400;
}
.nav-box-header-right p.email-id {
  border-left: 1px solid #a39e9e;
  padding-left: 35px;
}
.site-branding .site-title{
  font-weight: 600;
  font-size: 32px;
  text-transform: capitalize;
}
.main-slider-content-box {
    top: 50%;
    transform: translateY(-50%);
    left: 5%;
    right: 50%;
    color: #fff;
}
.main-slider-content-box hr{
  background: var(--primary-color);
}
.main-slider-content-box p.slider-content{
  font-weight: 300;
  margin: 35px 0;
}
.main-slider-inner-box {
  background: var(--secondary-color);
}
.main-slider-inner-box img{
  opacity: 0.5;
}
.main-slider-button a{
  background: var(--primary-color);
  font-weight: 200;
  padding:10px 20px;
  letter-spacing: 1px;
  display: inline-block;
  margin-top: 10px;
}
.main-slider-button a:hover{
  background: var(--secondary-color);
}

/*owl nav*/
#main-slider-wrap .owl-dots {
  position: absolute;
    top: 90%;
    flex-direction: row;
    display: flex;
    left: 5%;
    right: auto;
    bottom: auto;
    text-align: center;
}
#main-slider-wrap .owl-dots .owl-dot {
  background: transparent;
  border-radius: 50%;
  height: 11px;
  margin: 10px;
  width: 11px; 
  border: 2px solid #fff;
}
#main-slider-wrap .owl-dots .owl-dot.active {
  border: 2px solid #fff;
  background: #fff;
}
h4.product-head {
    font-size: 22px;
    margin: 8px 0px;
    letter-spacing: 1px;
    font-weight: 200;
}
.main-expert-button a{
  font-weight: 200;
  font-size: 16px;
}
.box img{
  width: 90%;
  height: 492px;
}
.heading-expert-wrap h5{
  font-weight: 300;
}
.product-image {
  padding: 16px;
  background: #F7F7F7;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}
.product-box-content:hover h6.product-heading-text a{
  color: var(--primary-color);
}



.grid-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 20px;
}

.product-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.product-image img {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover;
}

/* Owl Products Carousel Navigation */
.product-list .owl-nav {
    position: absolute;
    top: -7em;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}
.product-list .owl-carousel .owl-nav button.owl-prev,
.product-list .owl-carousel .owl-nav button.owl-next {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    font-size: 25px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
/* Next Button (Filled Style) */
.product-list .owl-carousel .owl-nav button.owl-next, 
.product-list .owl-carousel .owl-nav button.owl-prev {
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: #fff;
}
/* Hover Effects */
.product-list .owl-carousel .owl-nav button.owl-prev:hover,
 .product-list .owl-carousel .owl-nav button.owl-next:hover {
    background: #fff;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);;
}
#product-sec .product-image img{
  object-fit: contain;
}
/*single product sale*/
.product-box{
  position: relative;
  z-index: 9;
}
.top-expert-wrap .owl-carousel{
  display: block !important;
}
  .product-box-content-one h2 {
  margin: 0;
  line-height: 1;
  }
  .product-box-content-one h2 a {
  margin: 0;
  text-transform: capitalize;
  letter-spacing: 1px;
  font-size: 30px;
  color: var(--secondary-color);
  font-weight: 500;
  text-decoration: none;
  }
  .product-box-content-one .product-image-one {
  position: relative;
  z-index: 9;
  background-color: #fff;
  margin: 0 15px;
  }
  .product-box-content-one .product-image-one img {
  height: 500px;
  width: 100%;
  object-fit: cover;
  opacity: 0.5;
  }
  .product-box-content-one .content-over-image {
  position: absolute;
  top: 10%;
  right: 30%;
  left: 10%;
  text-align: left;
  z-index: 9999;
  }
  .product-box-content-one .sale-tag {
  font-size: 33px;
  color: var(--secondary-color);
  font-family: "Caveat Brush", cursive;
  margin-bottom: 5px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
  }
  .product-box-content-one .sale-percentage {
  font-size: 18px;
  letter-spacing: 4px;
  color: var(--secondary-color);
  }
  
  .product-box-content-one .product-price {
  color: var(--secondary-color);
  font-weight: 500;
  font-family: "Caveat Brush", cursive;
  }
  .product-box-content-one .product-price del span {
  font-size: 15px;
  font-weight: 500;
  }
  .product-box-content-one .product-price ins span {
  font-size: 22px;
  font-weight: 500;
  }
  .main-shop-now a {
  padding: 10px 20px;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  background: var(--primary-color);
  border-radius: 30px;
  font-family: 'Caveat Brush', cursive;
  display: inline-block;
  }
  
  .main-shop-now a:hover,
  .main-shop-now a:focus {
  background: var(--secondary-color);
  color: #fff;
  }
  
  .product-box-content-one:hover .sale-tag,
  .product-box-content-one:hover h2 a,
  .product-box-content-one:hover .product-price,
  .product-box-content-one:hover .sale-percentage {
  color: #fff;
  }
  
  .product-box-content-one:hover .product-image-one {
  background-color: #000;
  }
  
  .product-box-content:hover .product-image-one img {
  opacity: 0.5;
  }
  
@media screen and (max-width: 767px){
  .main-slider-content-box p{
    font-size: 10px;
  }
  .main-navigation ul#primary-menu>li>a, .main-navigation div#primary-menu>ul>li>a{
    padding-left: 0;
  }
  .nav-box-header-right p{
    margin-bottom: 10px;
  }
  .product-cat{
    height: auto;
  }
  .box{
    margin: 10px 0;
  }
  .box img{
    width: 100%;
  }
  .grid-box {
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
}
  .main-slider-content-box h3{
    line-height: 1.2;
    font-size: 34px;
  }
  .main-slider-content-box p.slider-content{
    display: none;
  }
  #main-slider-wrap .owl-nav, #main-slider-wrap .owl-dots .owl-dot{
    display: none;
  }
  .main-slider-content-box{
    left: 10%;
    right: 10%;
    text-align: center;
  }
  .slider-divide{
    padding: 0;
  }
  .main-navigation{
    text-align: center;
  }
  .nav-box-header-right p.email-id{
    border-left: none;
  }
}
@media screen and (min-width: 767px) and (max-width: 999px){
  .product-box-content-one .product-image-one img{
    height: 450px;
  }
  .product-box-content-one h2 a{
    font-size: 25px;
  }
  .product-box-content-one .sale-percentage{
    font-size: 10px;
  }
  .main-navigation ul#primary-menu>li>a, .main-navigation div#primary-menu>ul>li>a{
    padding-left: 0;
  }
  .product-image{
    margin-right: 5px;
  }
  h6.product-heading-text a{
    line-height: 1.2;
    font-size: 19px;
  }
  .main-expert-button a{
    font-size: 10px;
  }
  .box-content{
    right: 20%;
  }
  .product-image img {
    width: 55px !important;
    height: 55px !important;
  }
  .product-list .owl-carousel .owl-nav button.owl-prev, .product-list .owl-carousel .owl-nav button.owl-next{
    width: 34px !important;
    height: 34px !important;
  }
  .categry-title strong{
    font-size: 15px;
  }
  #main-slider-wrap .owl-nav{
    display: none;
  }
  .main-slider-content-box{
    right: 30%;
  }
  .main-slider-content-box h3{
    line-height: 1.4;
    font-size: 35px;
  }
  .main-slider-inner-box img{
    height: 500px;
  }
  .product-cat{
    height: 450px;
  }
  .main-navigation{
    text-align: center;
  }
  .main-header-wrap .flex-row{
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .nav-box-header-left, .nav-box-header-right{
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 10px;
  }

}
@media screen and (min-width: 1000px) and (max-width: 1024px){
  .product-box-content-one .product-image-one img{
    height: 450px;
  }
  .product-box-content-one h2 a{
    font-size: 25px;
  }
  .product-box-content-one .sale-percentage{
    font-size: 10px;
  }
  .product-image{
    margin-right: 5px;
  }
  h6.product-heading-text a{
    line-height: 1.2;
    font-size: 19px;
  }
  .main-expert-button a{
    font-size: 10px;
  }
  .box-content{
    right: 20%;
  }
  .product-image img {
    width: 55px !important;
    height: 55px !important;
  }
  .product-list .owl-carousel .owl-nav button.owl-prev, .product-list .owl-carousel .owl-nav button.owl-next{
    width: 34px !important;
    height: 34px !important;
  }
  .categry-title strong{
    font-size: 15px;
  }
.main-slider-content-box{
    right: 30%;
  }
  .main-slider-content-box h3{
    line-height: 1.4;
    font-size: 35px;
  }
  .account a{
    font-size: 14px;
  }
  .main-navigation ul#primary-menu>li>a, .main-navigation div#primary-menu>ul>li>a{
    font-size: 16px;
  }
  .main-navigation a{
    padding: 11px 40px;
  }
}