/*
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 tailored for a variety of auto care services, including auto repair shops, mechanic workshops, vehicle maintenance businesses, car service centers, auto garages, and automotive repair companies. Whether you’re involved in car mechanics, motorcycling repairs, diesel mechanics, or specialize in electric vehicle maintenance, this theme is designed to effectively showcase your services from engine repair and brake services to oil changes, tire repairs, and vehicle diagnostics. It enhances your business's professional image while providing an easy-to-navigate layout for visitors to effortlessly find essential information and book appointments. Visually appealing, the Mechanic Car Repair theme boasts a clean, modern, and customizable design that aligns with your brand identity. Its responsive layout guarantees a great appearance on desktops, tablets, and smartphones, while an SEO-friendly structure, fast-loading performance, and cross-browser compatibility work to boost your online presence. Additionally, the theme integrates seamlessly with the WooCommerce Bookings plugin, allowing customers to conveniently schedule repair or service appointments online. Ideal for contemporary auto repair shops and vehicle service providers, including those specializing in motorcycling, the Mechanic Car Repair theme offers a professional, functional, and user-friendly platform that helps attract and retain clients.
Requires at least: 6.1
Tested up to: 6.9
Requires PHP: 7.2
Version: 3.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%;
  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;
  }
}