/*
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 versatile website template designed for various auto care services, including mechanic workshops, auto repair shops, and vehicle maintenance businesses. Whether your focus is on car mechanics, bike repair, or electric vehicle maintenance, this modern theme effectively showcases your services, from engine repair and brake services to oil changes and vehicle diagnostics. It enhances your garage's professional image while providing an easy-to-navigate layout so visitors can effortlessly find essential information and book appointments. With its clean, customizable design, the Mechanic Car Repair theme aligns with your brand identity and ensures a great appearance on desktops, tablets, and smartphones. Furthermore, its SEO-friendly structure, fast-loading performance, and cross-browser compatibility enhance your online presence. The theme also integrates seamlessly with the WooCommerce Bookings plugin, enabling customers to schedule their auto parts repairs or service appointments online conveniently. Perfect for contemporary auto service providers, this user-friendly platform helps attract and retain clients while elevating your car cleaning and repair operations.
Requires at least: 6.1
Tested up to: 7.0
Requires PHP: 7.2
Version: 3.8.2
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%;
  object-fit: cover;
}

.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: #ffffff00;
  }
  .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;
  }
}

@media screen and (min-width: 1100px) and (max-width: 1200px) {
  .banner-cover {
    min-height: 450px !important;
  }
  .homepage-header button {
    padding: 9px 0px !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;
}

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

/* Pagination CSS */
.wp-block-query-pagination {
  margin: 40px 0;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers {
  margin: 0;
  display: inline-block;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-query-pagination .wp-block-query-pagination-previous {
  padding: 12px 16px;
  background: var(--wp--preset--color--primary);
  line-height: 1;
  margin: 0 3px;
  text-decoration: inherit;
  display: inline-block;
  box-shadow: 0 0 15px #1E1E1E2b;
  border-radius: 6px;
  color: #fff;
}

.wp-block-query-pagination .page-numbers.current,
.wp-block-query-pagination a:hover,
.wp-block-query-pagination a:focus,
.wp-block-query-pagination a:active {
  background-color: #000000;
  color: #ffffff !important;
}

@media screen and (min-width: 782px) and (max-width: 1420px) {
  .wp-block-query-pagination .page-numbers, .wp-block-query-pagination .wp-block-query-pagination-next, .wp-block-query-pagination .wp-block-query-pagination-previous{
    padding: 8px 10px;
  }
}