/*
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 WordPress Theme is a robust and versatile website template designed specifically for auto repair shops, mechanic workshops, and vehicle maintenance businesses. Whether you’re a car mechanic, motorcycle mechanic, diesel mechanic, or specialize in electric vehicle repair, this theme is built to showcase your services and help attract new customers. Ideal for businesses offering services such as engine repair, brake repair, oil change services, tire repairs, and more, the theme presents a professional image for your business. This theme provides an easy-to-navigate layout that allows visitors to quickly find the information they need about your mechanic services, from transmission repairs and clutch repairs to vehicle diagnostics and emission testing. The theme includes customizable features to help you highlight specific services like roadside assistance, mechanical inspections, and vehicle performance tuning. Visually, the Mechanic Car Repair WordPress Theme boasts a clean and modern design that can be personalized to match your brand. The responsive layout ensures your website looks great on any device, whether on a desktop, tablet, or smartphone. Additionally, the theme supports integration with booking systems, making it simple for customers to schedule appointments online. With SEO-friendly structure, fast-loading pages, and cross-browser compatibility, the theme is designed to improve your online visibility, making it easier for people to find your auto repair shop and mechanic services.
Requires at least: 6.1
Tested up to: 6.8
Requires PHP: 7.2
Version: 2.0
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: one-column, custom-background, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, translation-ready, sticky-post, threaded-comments, wide-blocks, block-styles, style-variations, 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;
  }
}

/*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;
}