/*
Theme Name: The9 Pet Veterinary
Author: aThemeArt
Author URI: https://athemeart.com/
Theme URI: https://athemeart.com/downloads/the9-pet-veterinary/
Description: The9 Pet Veterinary is a modern, responsive child theme designed for any pet-related business site, including pet centers, shelters, shops, salons, and vet clinics. Perfectly crafted for animal care, cats grooming, dog grooming, and general pet care, this theme features a clean, Bootstrap-based design optimized for speed and SEO. Showcase galleries, service descriptions, training courses, and vaccination programs with style. Built to work seamlessly with Elementor, The9 Pet Veterinary makes creating pages intuitive and flexible. It’s fully compatible with popular plugins like WooCommerce for shoppable stores, Yoast for SEO, Contact Form 7, Mailchimp for WordPress, and WPML, enabling you to build blogs, news sections, and interactive communities. Customize templates, and posts effortlessly while keeping your website fast and responsive across all devices. With a modern design and ready-to-use shopping cart features, The9 Pet Veterinary is ideal for pet shops, veterinary stores, and pet shelters looking for a professional, customizable, and fully shoppable online presence.
Template: the9-store
Version: 1.0.1
Requires at least: 5.0
Tested up to: 7.0
Requires PHP: 7.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl.html
Tags: blog, e-commerce, three-columns, grid-layout, left-sidebar, right-sidebar, sticky-post, custom-background, custom-header, custom-colors, custom-menu, featured-images, full-width-template, translation-ready, theme-options, threaded-comments, custom-logo, portfolio, footer-widgets
Text Domain: the9-pet-veterinary
*/
:root {
    --primary-color: #515151;
    --secondary-color: #FF4907;
    --nav-h-color: #FF4907;
}

/* Container */
.container {
	max-width: 1200px;
}

/*---------------- Custom Header & Footer Background Styles -------------*/

/* Footer info section and top bar */
.site_info,
.top-bar-wrap {
    background-color: #F9E3C0;
}

/* Main header and footer widget area */
#masthead,
.footer_widget_wrap,
#navbar .nav-wrap {
    background-color: #F7F0E5;
}


/* Navbar */
#navbar {
    background: none;
}

#navbar ul > li > a {
    border: none !important;
    color: #000;
    text-align: left;
    border-radius: 3px;
    margin: 0 1px;
    padding: 7px 14px;
    line-height: 30px;
}

#navbar ul.the9_store-main-menu > li > a:hover,
#navbar ul.the9_store-main-menu > li > a:focus,
#navbar ul.the9_store-main-menu > li:hover > a,
#navbar ul.the9_store-main-menu > li:focus > a,
#navbar ul.the9_store-main-menu > li.current-menu-item > a,
#navbar ul.the9_store-main-menu > li.current_page_parent > a {
    background: var(--nav-h-color);
    color: #fff;
}
#navbar ul.sub-menu li a{
	background: none!important;
}
#navbar .navigation-menu > li a::after {
    display: none;
}

/* Mini Cart */
.top-form-minicart.box-icon-cart {
    padding: 0;
    width: auto;
    margin-left: 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-form-minicart:before,
.top-form-minicart:after {
    display: none !important;
}

.top-form-minicart.box-icon-cart .icofont-cart {
    color: var(--secondary-color);
    height: 40px;
    width: 40px;
    background-color: #F7F7F7;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    position: relative;
    margin-right: 15px;
    font-size: 18px;
}

.top-form-minicart.box-icon-cart .cart-contents {
    text-align: left;
}

.top-form-minicart.box-icon-cart .cart-contents .amount {
    display: block;
    font-size: 0.8em;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 20px;
}

.top-form-minicart.box-icon-cart .cart-contents .count {
    display: block;
    font-family: var(--nav-font);
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 20px;
}

.top-form-minicart a.cart-contents {
    color: #000 !important;
}

/* --------- Slider & Featured Posts Styles --------- */
#content {
    padding-top: 50px;
}

#static_header_banner {
    border-radius: 3px;
    margin-top: 30px;
}

.the9-featured-posts .the9-featured-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin: 30px 0 20px;
    min-height: 450px;
}

.the9-featured-posts .featured-row:last-child {
    margin-bottom: 0;
}

.the9-featured-posts .featured-side {
    height: calc(50% - 10px);
    display: flex;
    margin-bottom: 20px;
}

.the9-featured-posts .featured-side:last-child {
    margin-bottom: 0;
}

.the9-featured-posts .featured-main,
.the9-featured-posts .featured-side {
    padding: 20px;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.the9-featured-posts .featured-main::before,
.the9-featured-posts .featured-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.the9-featured-posts .desc_wrap {
    position: relative;
    z-index: 2;
    padding-bottom: 20px;
    color: var(--quaternary-color);
    transition: padding 0.3s ease-in-out;
}

.the9-featured-posts .featured-main:hover .desc_wrap,
.the9-featured-posts .featured-side:hover .desc_wrap {
    padding-bottom: 30px;
}

.the9-featured-posts .post-meta-wrap ul.post-meta,
.the9-featured-posts .entry_title a {
    color: var(--quaternary-color);
}

.the9-featured-posts .entry_title a:hover,
.the9-featured-posts .entry_title a:focus,
.the9-featured-posts ul.post-meta li.category {
    color: var(--secondary-color);
}

.the9-featured-posts ul.post-meta li::before {
    background: var(--quaternary-color);
}
#static_header_banner{
    min-height: 34vh;
    height: auto!important;
    padding:2vh 0px;
}
#static_header_banner{
    height: auto!important;
    padding: 0px;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    background: none;
}
#static_header_banner:before{
    display: none;
}
#static_header_banner .content-text{
   min-height: 54vh;
   background-color: #282E34;
   position: relative;
}
#static_header_banner .content-text:before {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: rgba(0,0,0,0.5);
  z-index: -1;
}
#static_header_banner.homepage .content-text{
    overflow: unset!important;
    min-height: 50vh;
}
#static_header_banner .apsw-search-wrap{
    max-width: 600px;
}
/*---------- Blog Post Side Layout Styles -----------*/
.the9-store-post.side {
    background: none;
    align-items: stretch;
}

/* Post content area */
.the9-store-post.side .post {
    background: var(--bg-color);
}
.the9-store-post.side .post.width{
    width: 100%;
}

/* Image container */
.the9-store-post.side .img-box {
    flex: 0 0 45%; /* shorthand for grow, shrink, basis */
    position: relative;
}

/* Make link fill the image box */
.the9-store-post.side .img-box a {
    position: absolute;
    inset: 0; /* shorthand for top, right, bottom, left: 0 */
    border: 1px solid transparent;
    display: block;
}

/* Hover effect on image link */
.the9-store-post.side .img-box a:hover,
.the9-store-post.side .img-box a:focus {
    border-color: var(--secondary-color);
}

/* Hide image if background-style is applied */
.the9-store-post.side .img-box.bg-style img {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .the9-store-post.side .img-box a {
        position: static;
    }

    .the9-store-post.side .img-box {
        background: none !important;
    }

    .the9-store-post.side .img-box.bg-style img {
        display: block;
    }
}

/*---------------- Responsive Adjustments for Small Screens ----------------*/

/* For very small screens (max-width: 510px) */
@media only screen and (max-width: 510px) {
    /* Adjust top form and mini cart */
    .top-form-minicart {
        width: auto !important;
        line-height: 60px !important;
    }

    /* Navbar adjustments */
    #navbar {
        width: 100%;
    }

    #navbar .ml-auto {
        margin-left: auto;
    }
}

/* For small to medium screens (max-width: 670px) */
@media only screen and (max-width: 670px) {
    /* Adjust top form and mini cart */
    .top-form-minicart {
        width: auto !important;
        line-height: 60px !important;
    }

    /* Center logo in header */
    #masthead .logo-wrap {
        margin: auto;
        margin-left: 0;
    }

    /* Ensure navbar items align properly */
    #navbar .ml-auto {
        margin-left: auto;
    }

    /* Featured posts layout adjustments */
    .the9-featured-posts .the9-featured-row {
        display: block !important;
    }

    .the9-featured-posts .featured-main,
    .the9-featured-posts .featured-side {
        min-height: 200px;
        margin-bottom: 20px;
    }
}

/*---------------------------------
    Preloader Styles
-----------------------------------*/
body.overlay--enabled {
    overflow: hidden;
}
#the9_preloader {
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Preloader background and animation container */
#the9_preloader .preloader-animation {
    background: #F2F3F5;
}

/* Center content using Flexbox */
#the9_preloader .preloader-animation,
#the9_preloader .loader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#the9_preloader .preloader-animation {
    flex-direction: column; /* Spinner & text stacked vertically */
}

#the9_preloader .loader {
    flex-direction: row; /* Loader sections side by side */
}

/* Loader sections for the sliding background effect */
#the9_preloader .loader .loader-section {
    padding: 0;
    height: 100%;
    flex: 0 0 25%;
    max-width: 25%;
}

#the9_preloader .loader .loader-section .bg {
    background-color: #F2F3F5;
    height: 100%;
    width: 100%;
    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}

/* Hide animation after load */
#the9_preloader.loaded .animation-preloader {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* Collapse loader sections after load */
#the9_preloader .loader.loaded .loader-section .bg {
    width: 0;
    transition: width 0.7s 0.3s cubic-bezier(0.1, 0.1, 0.1, 1);
}

/* Spinner Styles */
#the9_preloader .spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--secondary-color);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

/* Loading text animation */
#the9_preloader .loading-text {
    font-size: 18px;
    color: #555;
    animation: blink 1.5s infinite;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    #the9_preloader #the9_preloader-animation #the9_preloader-spinner {
        height: 12rem;
        width: 12rem;
        margin: 0 auto 1.5rem auto;
    }
    #the9_preloader #the9_preloader-animation #the9_preloader-text {
        font-size: 4rem;
    }
}

/* Spinner rotation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Blink animation for text */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}