/*
Theme Name: Nova Autocare
Theme URI: https://www.novathemes.net/products/nova-autocare
Author: Nova Themes
Author URI: https://www.novathemes.net/
Description: Nova Autocare Theme is designed for automotive businesses that need a structured and functional website layout. It includes sections for vehicle listings, service information, pricing details, customer inquiries, and contact forms. The theme suits car dealerships, used car dealers, and car rental agencies that want to display inventory with organized categories and image galleries. The layout also supports businesses such as auto repair shops, car mechanics, auto detailing services, and auto parts retailers by providing dedicated areas for services, testimonials, operating hours, and booking details. Responsive design compatibility helps the website adjust across desktops, tablets, and mobile devices. Customization options include editable banners, color settings, typography controls, and widget-ready sections for adding business information or promotions. The theme supports navigation menus, blog integration, and social media links to improve content accessibility. It is also compatible with common ecommerce and appointment management plugins, making it suitable for businesses that offer online bookings, product catalogs, or service scheduling.
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 7.0
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nova-autocare
Tags: photography, portfolio, blog, template-editing, style-variations, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, block-patterns, block-styles, editor-style, wide-blocks, full-width-template, footer-widgets, featured-images, full-site-editing, featured-image-header, flexible-header, custom-background, custom-colors, custom-header, custom-menu, custom-logo, post-formats, sticky-post, threaded-comments, translation-ready, theme-options, rtl-language-support
*/


html {
	scroll-behavior: smooth;
}
.logo-box h1 a:hover{
	color: var(--wp--preset--color--contrast-one) !important;
}
.single .wp-block-post-terms a:hover,a:hover{
	color: var(--wp--preset--color--primary);
}
.image-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.banner-content h2 span{
	color: var(--wp--preset--color--primary) !important;
}
.banner-content h2{
	border-left: 5px solid var(--wp--preset--color--primary);
	padding-left: 20px !important;
}
.topbar-social{
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
}
.logo-column{
    box-shadow: -304px 0px 0px var(--wp--preset--color--primary);
}
.header-main ul li a:hover{
	color: var(--wp--preset--color--contrast-one) !important;
}
.header-main ul li ul li a:hover{
	color: var(--wp--preset--color--base) !important;
}
.header-main ul li{
	position: relative;
}

.header-main ul li:after {
    position: absolute;
    content: "";
    top: 50%;
    height: 13px;
    transform: translateY(-50%);
    z-index: 0;
    width: 1px;
    background: #c5c2c2;
    right: -12px;
}
.header-main ul li:last-child::after{
	display: none;
}
.short-title ,.right-title{
    display: inline-block;
}
.main-header{
	position: relative;
}
.topbar-social{
	position: relative;
}
.main-header:after {
    position: absolute;
    content: "";
    top: 0px;
    height: 36px;
    z-index: -1;
    width: 410px;
    background: #ffff;
    right: 0px;
    box-shadow: 13px 0px 16px 0px rgba(0, 0, 0, 0.2);
}
.brand-box {
    position: absolute;
    top: -40px;
    box-shadow: 0px 4px 4px 0px #00000040;
    left: -30px;
}
.image-box:after {
    position: absolute;
    content: "";
    width: 100%;
    top: -150px;
    z-index: 2;
    height: 86%;
    right: -14px;
    background-color: var(--wp--preset--color--primary) !important;
    clip-path: circle(50% at 52% 100%);
}
.image-box{
	position: relative;
	text-align: right;
}
.image-box .center-image {
    text-align: right;
}
.logo-box {
    display: flex;
    height: 100%;
    align-items: center;
}
.counter-box {
    position: absolute;
    width: 44%;
    height: auto;
    bottom: -35px;
    right: 0px;
    margin: 0 auto;
}
.tick-icon {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tick-icon span {
    font-size: 29px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.why-choose-image img{
	width: 80% !important;
	object-fit: cover;
}
.image-box .center-image img {
    position: relative;
    z-index: 3;
    bottom: 0px;
    height: 400px;
    width: 100%;
}
.right-title {
    position: absolute;
    bottom: -18px;
    z-index: 2;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    width: 59%;
}
.header-btn a:focus,.banner-btn a:focus{
	outline-color: red
}
.banner-btn a:hover,.header-btn a:hover{
    background: var(--wp--preset--color--contrast-one) !important;
}

/*Media CSS*/

@media screen and  (min-width: 320px) and (max-width: 599px){
	.header-main ul li a:hover{
		color: var(--wp--preset--color--primary) !important;
	}
	header .wp-block-navigation .has-child .wp-block-navigation__submenu-container{
		align-items: flex-start !important;
	}
	header .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item{
		align-items: flex-start !important;
 
	}
	header .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container{
		display: flex;
		align-items: flex-start;
		align-content: flex-start;
		width: 100% !important;
	}
}

@media screen and  (min-width: 320px) and (max-width: 781px){
	.top-header p{
		text-align: center;
	}
	.banner-main {
	    padding-top: 40px !important;
	}
	.header-main ul li:after{
		display: none;
	}
	.image-box{
		min-height: 250px !important;
	}
	.why-choose-image img{
		width: 100% !important;
		height: 300px !important;
		object-fit: cover;
	}
	.top-header{
		max-width: 100% !important;
	}
	.why-choose-column{
		max-width: 90% !important;
	}
	.main-header:after{
		display: none;
	}
	.counter-inner{
		display: flex;
		gap: 20px !important;
		flex-wrap: nowrap !important;
	}
	.counter-inner .wp-block-column.icon-box.is-layout-flow.wp-block-column-is-layout-flow{
		flex-basis: 30% !important;
	}
	.image-box .center-image img {
	    position: relative;
	    z-index: 3;
	    bottom: 0px;
	    height: 250px;
	    width: 100%;
	}
	.counter-box {
	    position: relative;
	    bottom: 0px;
	    width: 100%;
	    margin-top: 25px;
	}
	.logo-box{
		justify-content: center;
		padding-top: 10px !important;
	}
	.top-header .wp-block-social-links {
		justify-content: center;
	}
	.banner-content{
		text-align: center;
	}
	.logo-text h1{
		text-align: center;
	}
	.header-btn,.banner-btn{
		justify-content: center !important;
	}
	.short-title{
		padding-right: 10px !important;
	    padding-left: 10px !important;
	}
	.banner-content h2,.banner-content p{
		text-align: center;
	}
	.banner-content h2{
		border: 0px !important;
		padding-left: 0px !important;
	}
	.image-box:after{
		top: -92px;
	}
	.brand-box {
	    position: relative;
	    top: 0px;
	    box-shadow: 0px 4px 4px 0px #00000040;
	    left: 0px;
	}
	.right-title {
	    position: relative;
	    bottom: 0px;
	    z-index: 2;
	    left: 0px;
	    display: inline;
	    right: 0px;
	    font-size: 11px !important;
	    margin: 0 auto;
	    width: 100%;
	}
	.logos-box img,.logos-box figure{
		text-align: center;
	}
	.topbar-social:after{
		display: none;
	}
	.logo-column{
		box-shadow: none;
	}
}    
@media screen and  (min-width: 576px) and (max-width: 781px){
	.image-box .center-image img {
        position: relative;
        z-index: 3;
        bottom: 0px;
        height: 340px;
        width: 100%;
    }
}

@media screen and  (min-width: 782px) and (max-width: 1024px){
	.image-box .center-image img {
	    height: 330px;
	    width: 100%;
	}
	.logo-column {
	    box-shadow: -116px 0px 0px var(--wp--preset--color--primary);
	}
	.top-header {
		max-width: 25% !important;
	}
	.why-choose-image img{
		width: 100% !important;
		object-fit: cover;
		height: 300px !important;
	}
	.image-box{
		min-height: 330px !important;
	}
	.counter-box{
		padding-top: 30px !important;
	    padding-bottom: 30px !important;
	}
	.counter-inner{
		padding-top: 10px !important;
    	padding-bottom: 10px !important;
	}
	.counter-box {
	    position: relative;
	    width: 100%;
	    bottom: 0px;
	    margin-top: 20px;
	}
}

@media screen and  (min-width: 1025px) and (max-width: 1200px){
	.counter-box {
	    width: 70%;
	}
	.logo-column {
	    box-shadow: -126px 0px 0px var(--wp--preset--color--primary);
	}
	.icon-box{
		flex-basis: 25% !important;
	}
}
@media screen and  (min-width: 1201px) and (max-width: 1440px){
	.counter-box {
	    width: 70%;
	}
	.logo-column {
	    box-shadow: -150px 0px 0px var(--wp--preset--color--primary);
	}
	.icon-box{
		flex-basis: 25% !important;
	}
}

@media screen and  (min-width: 1441px) and (max-width: 1900px){
	.logo-column {
	    box-shadow: -210px 0px 0px var(--wp--preset--color--primary);
	}
}