/*!
Theme Name: SPA and Wellness Centre
Theme URI: https://www.revolutionwp.com/products/spa-and-wellness-centre
Author: revolutionwp
Author URI: https://www.revolutionwp.com/
Description: SPA and Wellness Centre Theme is designed with layouts for presenting wellness services, treatment information, and business details in a clear website structure. It includes customizable sections that can be used for service descriptions, image galleries, pricing, appointment information, contact details, and other relevant content. The responsive layout adjusts website elements across different screen sizes, helping maintain consistent navigation on desktop, tablet, and mobile devices. Typography, colors, menus, and page sections can be customized to align the website with an established visual identity. The SPA and Wellness Centre Theme can present information about spa and wellness centres through dedicated service and treatment sections. Content layouts can also describe programs offered by health and wellness clinics, including treatment details, schedules, and appointment procedures. Additional page sections can be adapted for yoga studios or meditation centres to display class schedules, instructor information, and program details. Fitness and wellness centres can use structured layouts for describing facilities, memberships, activities, and operating information. The overall design focuses on organizing service-related content into accessible sections without relying on complex page structures.
Version: 0.4
Requires at least: 6.1
Tested up to: 7.1
Requires PHP: 7.2
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: spa-and-wellness-centre
Template: massage-wellness-retreat
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, blog, e-commerce, education

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

:root {
    --primary-color: #284746;
    --secondary-color: #000;
    --body-font: "Montserrat", sans-serif;
    padding: 0;
}
body {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    overflow-x: hidden;
    word-wrap: break-word;
}
a{
    text-decoration: none;
    color: var(--primary-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Cormorant", serif;
    font-weight: 600;
    clear: both;
    word-wrap: break-word;
}
.site-branding .site-title a{
    font-family: "Cormorant", serif;
    font-size: 30px;
}
.header-menu-box .flex-row{
    border-bottom: 1px solid #ccc;
}
.header-menu-box .container-fuild,.top-head,#our-products,
#slider .container-fuild{
    margin: 0 100px;
}
.page-template-front-page .search-block form.search-form{
    border: 1px solid #fff;
}
.top-head p{
    background-color: var(--primary-color);
}
.header-details i, .search-block form.search-form,
.main-navigation ul#primary-menu li.current-menu-item a, .main-navigation ul#primary-menu li.current_page_item a{
    border: 1px solid #000;
}
.site-header a.viewall-btn i, .main-navigation ul#primary-menu>li>a, .main-navigation div#primary-menu>ul>li>a, .page-template-revolution-home .main-navigation ul#primary-menu>li>a, .page-template-revolution-home .main-navigation div#primary-menu>ul>li>a{
    color: #000;
}
.nav-menu-header-center{
    background: none;
}
.search-block .search-form input::placeholder {
  color: #000; /* Change to your desired color */
}
a.viewall-btn i:hover, .main-navigation ul#primary-menu>li>a:hover, .main-navigation div#primary-menu>ul>li>a:hover{
    color: var(--primary-color);
}
.search-block [type="submit"] {
  padding: 5px 12px;
  background: url(revolution/assets/images/search.png) no-repeat scroll 0 5px;
  font-size: 13px;
  text-align: center;
  text-indent: -9999px;
  border: none;
}
.search-block {
    width: 50%;
    justify-content: end;
    display: flex;
}
.search-block form.search-form{
    width: 92%;
}
.main-navigation{
    justify-content: left;
}
.header-details, .search-block {
    margin-left: 22px;
}
.header-details i{
    width: 42px;
    height: 40px;
}
.header-details i:hover{
    color: #fff;
}
.nav-menu-header-center{
    padding: 10px 20px;
}
.main-navigation ul#primary-menu>li>a, .main-navigation div#primary-menu>ul>li>a{
    margin: 5px 0;
}
.page-template-revolution-home .main-navigation ul#primary-menu>li>a:hover, .page-template-revolution-home.main-navigation div#primary-menu>ul>li>a:hover{
    color: var(--primary-color);
}
#slider .slider-carousel .image-overlay{
    background: #28474687;
}
#our-products h3 a{
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 20px;
    margin-top: 10px;
    font-family: "Montserrat", sans-serif;
    display: inline-block;
}
#main-expert-wrap h3 a {
    font-size: 20px;
}
#our-products h3 a:hover{
    color: #000;
}
#our-products h2{
    color: var(--primary-color);
    font-size: 35px;
}
#main-expert-wrap {
    padding: 20px 0 60px;
}
.tagcloud a, p.wp-block-tag-cloud a, .post_tag a{
    border: 1px solid #fff;
}
.page-template-revolution-home .main-navigation li.menu-item-has-children:after, .page-template-revolution-home .main-navigation li.page_item_has_children:after{
    color: #000;
}
.main-slider-button{
    margin-top: 2em;
}
.main-slider-button a{
    padding: 10px 40px;
    color: #fff;
    border-radius: 0;
}
.main-slider-button a:hover{
    color: #fff;
}
#slider .slide_text{
    line-height: 1.7;
}
#our-products{
    padding: 40px 0;
    background: #D1E4E0;
    margin: 40px 100px;
}
#our-products .heading-expert-wrap{
    text-align: center;
    margin-bottom: 20px;
}
#our-products .heading-expert-wrap h2 {
    color: var(--primary-color);
    font-size: 35px;
    margin: 0;
    font-weight: 600;
}
.products-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.product-box-image {
    background: #fff;
    text-align: center;
    padding: 40px 0;
    height: 360px;
}
.product-box-image img {
    height: 280px !important;
    width: 280px !important;
    margin: 0 auto;
    object-fit: contain;
}
.product-box-image img,
.product-box-image img[src] {
    max-width: 100%;
    height: auto;
    display: inline-block;
}
.product-box-content{
    margin-top: 10px;
}
.product-box-content h3{
    font-size: 18px;
    text-align: center;
    margin: 0;
}
.product-box-content h3 a{
    color: var(--primary-color);
    text-decoration: none;
}
.product-box-content h3 a:hover{
    color: #000;
}
.site-branding {
    padding-left: 0;
}
.card-item a.read-btn,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt:hover, .woocommerce span.onsale, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt, .woocommerce .cart .button, .woocommerce .cart input.button, .wp-block-woocommerce-cart .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-components-totals-coupon__button{
    border-radius: 0;
    text-transform: capitalize !important;
}

.product-box-image,.box-image {
  position: relative;
  overflow: hidden;
}

.product-box-image img,.box-image img {
  display: block;
  transition: transform 0.5s ease;
}

.product-box-image::before,.box-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.6) 100%);
  transform: skewX(-25deg);
  transition: left 0.75s ease;
}

.product-box:hover .product-box-image::before,.box:hover .box-image::before {
  left: 125%;
}

@media screen and (max-width: 1500px){
    #slider .slider-indicator {
        right: 15%;
    }
    .arrow{
        right: 10%;
    }
    .product-box-image img {
        height: 200px !important;
        width: 200px !important;
    }
    .product-box-image {
        padding: 40px 0;
        height: 280px;
    }
}

@media screen and (max-width: 1150px){
    #slider .carousel-caption {
        left: 5%;
    }
    .site-branding .site-title a {
        font-size: 24px;
    }
    .header-menu-box .container-fuild,.top-head,#our-products,
    #slider .container-fuild{
        margin: 0 70px;
    }
    #our-products {
        margin: 40px 70px;
    }
}
@media screen and (max-width: 950px){
    .main-slider-button a{
        padding: 6px 18px;
    }
    .header-menu-box .container-fuild,.top-head,#our-products,
    #slider .container-fuild{
        margin: 0 40px;
    }
    #our-products {
        margin: 40px 40px;
    }
    button.menu-toggle{
        background: var(--primary-color);
        color: #fff;
    }
    .main-navigation ul#primary-menu li.current-menu-item a, 
    .main-navigation ul#primary-menu li.current_page_item a{
        border: none;
    }
    #slider .arrow{
        right: 11%;
    }
    .products-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 767px){
    .header-menu-box .container-fuild,.top-head,#our-products,
    #slider .container-fuild{
        margin: 0 25px;
    }
    #our-products {
        margin: 30px 25px;
    }
    .search-block{
        width: 100%;
    }
    .header-details, .search-block{
        margin-left: 0;
    }
    .search-block{
        justify-content: center;
    }
    .products-grid{
        grid-template-columns: 1fr;
    }
}
@media screen and (min-width: 767px) and (max-width: 999px){
    .search-block{
        width: 60%;
    }
}

.main-navigation li.menu-item-has-children:after, .main-navigation li.page_item_has_children:after {
    font-weight: 700;
    color: #000;
}

section.footer-top ul li a:hover,
aside#secondary ul li a:hover,
.widget.widget_recent_comments ul li a:hover,
.widget.widget_categories ul li a:hover,
.widget.widget_recent_entries ul li a:hover,
.wp-block-latest-posts li a:hover {
    text-decoration: underline !important;
    text-decoration-line: underline !important;
    color: #ffffff !important;
}

a.added_to_cart.wc-forward {
    padding: 0.450em 1em;
    margin-top: 5px;
    border-radius: 0;
    margin-left: 10px;
}

.site-branding .site-title a:hover {
    text-decoration: underline !important;
}

@media screen and (min-width: 250px) and (max-width: 767px) {
    .main-navigation.toggled #primary-menu {
        width: 100% !important;
	}
}

.footer-col a:hover,.footer-col a:focus {
    color: #fff;
}

.widget-area a:hover,.widget-area a:focus{
    color: #000;
}