/*
Theme Name: Mechanic Car Repair
Theme URI: https://www.titanthemes.net/products/free-mechanic-wordpress-theme
Author: Titan Themes
Author URI: https://www.titanthemes.net/
Description: The Mechanic Car Repair theme is a robust and versatile website template designed for auto repair shops, mechanic workshops, vehicle maintenance businesses, car service centers, auto garages, and automotive repair companies. Whether you’re a car mechanic, motorcycle mechanic, diesel mechanic, or specialize in electric vehicle repair, this theme is built to showcase services such as engine repair, brake repair, oil change services, tire repairs, transmission repairs, clutch repairs, vehicle diagnostics, emission testing, roadside assistance, mechanical inspections, car washing, detailing, and vehicle performance tuning while presenting a professional image for your business. It provides an easy-to-navigate layout that allows visitors to quickly find essential service information and book appointments with ease. Visually, the Mechanic Car Repair theme features a clean, modern, and customizable design that can be tailored to match your brand. The responsive layout ensures your site looks great on desktops, tablets, and smartphones, while its SEO-friendly structure, fast-loading performance, and cross-browser compatibility improve online visibility. For enhanced functionality, it integrates seamlessly with the WooCommerce Bookings plugin, enabling customers to schedule repair appointments or service slots online. Perfect for modern auto repair shops and vehicle service providers, the Mechanic Car Repair theme delivers a professional, functional, and user-friendly platform to attract and retain clients.
Requires at least: 6.1
Tested up to: 6.8
Requires PHP: 7.2
Version: 2.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: mechanic-car-repair
Tags: grid-layout, one-column,  two-columns, left-sidebar, right-sidebar, wide-blocks, block-patterns, custom-background, custom-colors, custom-menu, custom-logo, editor-style, block-styles, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, style-variations, theme-options, threaded-comments, translation-ready,, blog, photography, portfolio
*/

.wp-site-blocks {
  padding: 0 !important;
}
.wp-block-woocommerce-customer-account,.wc-block-mini-cart.wp-block-woocommerce-mini-cart {
    display: none;
}

.header-top p {
  align-items: center;
  display: flex;
}

.slider-banner h2 span {
  background: var(--wp--preset--color--primary);
  padding: 0px 12px;
  margin-right: 10px;
}

.header-top p span {
  font-size: 22px;
  margin-right: 10px;
}

a:hover {
  color: var(--wp--preset--color--primary) !important;
}

.social-box ul {
  font-size: 20px !important;
}

.photolancer-footer-list {
  gap: 25px;
}

.right-box ul li a {
  position: relative;
}

.right-box ul li a:hover {
  text-decoration: none;
}

.project-box {
  box-shadow: 0 0px 8px #00000029;
}

.right-box ul li a:hover:after {
  content: "";
  left: 0px;
  right: 0px;
  position: absolute;
  margin: 0 auto;
  background-color: var(--wp--preset--color--primary);
  width: 100%;
  height: 6px;
  bottom: -27px;
}

.homepage-header {
  position: relative;
  gap: 0px;
  margin: 0 auto;
}

form.wp-block-search__button-only.wp-block-search__icon-button.alignright.wp-block-search {
  width: 100%;
}

.wp-block-search__inside-wrapper {
  justify-content: right;
}

.logo-box h1 {
  text-align: left;
}

.home .homepage-header {
  position: absolute;
  width: 100%;
  z-index: 999;
  margin: 0 auto;
  background-color: transparent !important;
  right: 0px;
  gap: 0px;
  left: 0px;
  border-radius: 0;
}

.project-box img {
  width: 100%;
}

.project-box .service-overlay {
  background-color: var(--wp--preset--color--primary);
}

.project-box:hover .service-overlay img {
  opacity: 0.3 !important;
}

.project-box:hover .project-content h4,
.project-box:hover .project-content p {
  color: #fff !important;
}

.project-box:hover .project-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
  right: 0px;
}

.project-box:hover .service-btn {
  display: block !important;
  text-align: center;
}

.project-box {
  position: relative;
}

.project-box img {
  height: 400px;
  width: 100%;
}

.project-box:hover img {
  height: 513px;
  object-fit: cover;
}

.service-btn {
  display: none !important;
}

.wp-header-search-social ul li:last-child a {
  border-right: 0px !important;
  padding-right: 0px;
}

.topheader p span {
  margin-right: 10px;
  font-size: 18px;
  color: var(--wp--preset--color--primary);
}

.homepage-header button.wp-block-search__button.has-icon.wp-element-button {
  background: transparent;
  padding: 0px;
  color: #fff;
}

.wp-header-search-social ul li a:hover {
  color: #000000 !important;
}

.menu-box nav ul li a:hover {
  color: var(--wp--preset--color--primary) !important;
}

.wp-block-image img {
  vertical-align: middle !important;
}

ul.wp-block-navigation-submenu li a:hover {
  color: #000 !important;
}

ul.wp-block-navigation-submenu li a:hover:after {
  display: none;
}

footer.wp-block-template-part {
  margin-top: 0;
}

@media screen and (min-width: 320px) and (max-width: 599px) {
  span.wp-block-navigation-item__label {
    color: #0ffffff00;
  }
  .right-box ul li a{
    color: #ffffff !important;
  }
  .right-box ul li a:hover:after {
    display: none;
  }
}

@media screen and (min-width: 320px) and (max-width: 781px) {
  .header-top p {
    justify-content: center;
  }

  .wp-header-search-social,
  .banner-btn {
    justify-content: center;
  }

  .right-box ul {
    justify-content: center;
  }

  .home .homepage-header {
    position: relative;
    background: #000000 !important;
  }

  .logo-box h1 {
    text-align: center;
  }

  .right-box {
    padding-right: 0px !important;
    border: 0px !important
  }

  .project-box:hover .project-content {
    left: 20px;
    right: 20px;
  }

  .right-box nav,
  .wp-block-search__inside-wrapper {
    justify-content: center;
  }

  .project-box img {
    height: 250px;
    width: 100%;
  }

  .project-box:hover img {
    height: 379px;
    object-fit: cover;
  }

  .banner-cover {
    min-height: 400px !important;
  }

  .banner-content {
    text-align: center;
  }
}

@media screen and (min-width: 600px) and (max-width: 781px) {
  .service-box {
    display: grid !important;
    justify-content: center;
    grid-template-columns: auto auto !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .project-box img {
    height: 250px;
    width: 100%;
  }

  .project-box:hover img {
    height: 379px;
    object-fit: cover;
  }

  .project-content h4 {
    font-size: 16px !important;
  }

  .home .homepage-header {
    position: relative;
    background: #000000 !important;
  }

  .header-top-box {
    max-width: 90% !important;
  }

  .header-top-box p {
    font-size: 10px !important;
  }

  .main-box-service {
    max-width: 90%;
  }
}

@media screen and (min-width: 992px) and (max-width: 1024px) {
  .slider-banner {
    max-width: 80% !important;
  }

  .topheader {
    gap: 0px !important;
  }

  .right-box nav ul {
    gap: 25px !important;
  }

  .logo-box {
    flex-basis: 20% !important;
  }

  .right-box {
    flex-basis: 80% !important;
  }

  .topheader p {
    font-size: 12px !important;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1500px) {
  .main-box-service {
    max-width: 80%;
  }

  .right-box nav ul {
    gap: 19px !important;
  }

  .slider-banner {
    max-width: 80% !important;
  }

  .topheader p {
    font-size: 12px !important;
  }
}

@media screen and (min-width: 320px) and (max-width: 800px) {

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
  ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
    justify-content: center !important;
    gap: 30px !important;
  }

  .single-image figure{
    width: 100% !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1439px) {
figure.wp-block-post-featured-image img {
    height: 180px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
figure.wp-block-post-featured-image img {
    height: 120px;
  }
}

/*back to top*/
.wp-block-button.scroll-to-top .wp-block-button__link.wp-element-button {
  width: 40px;
  height: 40px;
  position: fixed;
  right: 25px;
  bottom: 25px;
  display: inline-block;
  z-index: 1;
  text-indent: -5000px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.089);
  display: none;
  padding: 0;
  margin-top: 0;
}

.wp-block-button.scroll-to-top .wp-block-button__link.wp-element-button:after {
  content: "";
  width: 40px;
  height: 40px;
  background-color: #fff;
  -webkit-mask-image: url(assets/images/up-arrow.svg);
  mask-image: url(assets/images/up-arrow.svg);
  mask-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
}

/* Blog Section */
.news-section .news-box .wp-block-post-excerpt__excerpt{
  color: #000000;
}
.news-heading-box .news-small-title{
  width: max-content;
}
.news-section .news-heading-box{
  gap: 0;
}
.news-section .news-box .wp-block-post:hover .wp-block-post-title a{
  color: var(--wp--preset--color--primary);
}
.news-section .news-heading-box{
  gap: 0;
}
.recent-btn a {
  background: var(--wp--preset--color--primary);
  padding: 10px 12px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
.recent-btn a:hover{
  background: #000;
}