@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
:root {
--font-base: 15px;
}
} @media only screen and (min-width: 992px) and (max-width: 1199.98px) {
:root {
--font-base: 15px;
}
h1 {
font-size: 44px;
}
h2, .h2 {
font-size: 34px;
}
h3, .h3 {
font-size: 22px;
}
h4, .h4 {
font-size: 22px;
}
.hero-banner.hero-banner-1 {
padding-top: 160px;
padding-bottom: 100px;
}
.hero-banner.hero-banner-2 {
padding-top: 160px;
padding-bottom: 0;
}
.hero-banner.hero-banner-2 .right-content {
width: 44%;
}
.hero-banner.hero-banner-2 .banner-filter-form .filter-price-range {
font-size: 12px;
}
.hero-banner.hero-banner-3 {
padding-top: 160px;
padding-bottom: 0;
}
.hero-banner.hero-banner-3 .right-content {
display: flex;
align-items: center;
height: -moz-fit-content;
height: fit-content;
}
.hero-banner .banner-filter-form {
max-width: 100%;
}
.steps-area .card {
margin-inline-start: 0;
margin-top: 60px;
}
.steps-area .card .text-stroke {
top: -60px;
left: 0;
font-size: 50px;
}
.product-column .product-details {
padding-inline-start: 0;
padding-top: 15px;
}
.product-area-2 .product-column .product-details {
padding: 15px !important;
}
.testimonial-area .slider-item .client,
.testimonial-area .slider-item .quote {
padding: 25px;
}
.choose-area.choose-3 .info-list {
padding-inline: 15px;
}
.choose-area.choose-3 .card .card-text {
font-size: var(--font-xsm);
}
.car-list-area .product-column {
padding: 10px !important;
}
.car-list-area .product-column .product-details {
padding-top: 0;
padding-inline-start: 12px;
}
.car-list-area .product-column .product-action {
padding-inline-start: 10px;
}
.car-list-area .product-column .btn-sm {
padding-inline: 12px;
}
.widget-area .widget {
padding: 15px;
}
.widget-area .widget-post .article-item {
flex-direction: column;
gap: 14px;
}
.widget-area .widget-post .article-item .image {
max-width: 100%;
}
.widget-area .widget-post .article-item .content {
max-width: 100%;
padding-inline-start: 0;
}
.shopping-area .shopping-table:not(.order-summery .shopping-table) tbody td:not(.custom-checkbox) {
min-width: 160px;
}
.testimonial-area.testimonial-1 .slider-item .quote::before {
margin-inline-start: 10px;
}
}
@media only screen and (max-width: 991.98px) {
.hero-banner.hero-banner-2 .right-content {
position: relative;
width: 100%;
height: auto;
padding-bottom: 20px;
margin-top: 20px;
}
.hero-banner.hero-banner-2 .right-content .swiper-slide {
padding-top: 50px;
}
.hero-banner.hero-banner-3 .right-content {
position: relative;
width: 100%;
height: auto;
margin-top: 20px;
}
.hero-banner .banner-filter-form .form-group {
margin-bottom: 20px;
border: unset !important;
}
.hero-banner .banner-filter-form input, .hero-banner .banner-filter-form select, .hero-banner .banner-filter-form .nice-select {
width: 100%;
}
.hero-banner .banner-filter-form .btn {
width: 100%;
font-size: 18px;
}
.hero-banner .banner-filter-form .btn span {
font-size: var(--font-base);
}
.product-column .product-details {
padding-inline-start: 0;
padding-top: 15px;
}
.product-area-2 .product-column .product-details {
padding: 15px !important;
}
.car-details-area .product-thumb {
position: static;
padding-inline: 0;
transform: unset;
max-width: 100%;
margin-top: 15px;
}
} @media only screen and (min-width: 768px) and (max-width: 991.98px) {
h1 {
font-size: 44px;
}
h2, .h2 {
font-size: 38px;
}
h3, .h3 {
font-size: 22px;
}
h4, .h4 {
font-size: 22px;
}
.hero-banner.hero-banner-1 {
padding-top: 160px;
padding-bottom: 100px;
}
.hero-banner.hero-banner-3, .hero-banner.hero-banner-2 {
padding-top: 160px;
padding-bottom: 0;
}
.hero-banner .banner-filter-form .filter-price-range {
font-size: 12px;
}
.choose-area .shape {
height: 32%;
}
.steps-area .card {
margin-inline-start: 70px;
}
.steps-area .card .text-stroke {
left: -70px;
font-size: 70px;
}
.testimonial-area .slider-item .client,
.testimonial-area .slider-item .quote {
padding: 25px 30px;
}
.car-list-area .product-column .product-details {
padding-top: 0;
padding-inline-start: 15px;
}
.car-list-area .product-column .product-action {
justify-content: space-between;
padding-top: 15px;
margin-top: 15px;
border-top: 1px solid var(--border-color);
}
.shopping-area .shopping-table:not(.order-summery .shopping-table) tbody td:not(.custom-checkbox) {
min-width: 150px;
}
.tabs-navigation,
.tabs-navigation.tabs-navigation-2 {
overflow: hidden;
overflow-x: auto;
}
.tabs-navigation .nav,
.tabs-navigation.tabs-navigation-2 .nav {
flex-wrap: nowrap;
justify-content: flex-start;
overflow: unset;
}
.tabs-navigation .nav li,
.tabs-navigation.tabs-navigation-2 .nav li {
flex: 0 0 auto;
}
} @media only screen and (max-width: 767.98px) { :root {
--font-base: 15px;
--font-sm: 12px;
--font-xsm: 10px;
--font-lg: 16px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 15px;
}
h1 {
font-size: 36px;
}
h2, .h2 {
font-size: 32px;
}
h3, .h3 {
font-size: 22px;
}
h4, .h4 {
font-size: 20px;
}
h5, .h5 {
font-size: 18px;
}
h6, .h6 {
font-size: 16px;
}
.ptb-100 {
padding-top: 70px;
padding-bottom: 70px;
}
.ptb-70 {
padding-top: 70px;
padding-bottom: 70px;
}
.pt-100 {
padding-top: 70px;
}
.pt-70 {
padding-top: 40px;
}
.pb-100 {
padding-bottom: 70px;
}
.pb-75 {
padding-bottom: 45px;
}
.mb-75 {
margin-bottom: 45px;
}
.pb-70 {
padding-bottom: 40px;
}
.pb-60 {
padding-bottom: 30px !important;
}
.pb-30 {
padding-bottom: 20px !important;
}
.px-5 {
padding-left: 20px !important;
padding-right: 20px !important;
}
.px-60 {
padding-inline: 20px;
}
.btn-lg,
.btn-md {
padding: 12px 26px;
font-size: var(--font-base);
}
.w-sm-100 {
width: 100% !important;
}
.w-sm-75 {
width: 100% !important;
}
.go-top {
width: 35px;
height: 35px;
font-size: 22px;
}
.section-title .title,
.content-title h2 {
margin-top: -4px;
}
.title-md {
font-size: 22px;
}
.header-area .main-responsive-nav .logo {
max-width: 135px;
}
.hero-banner.hero-banner-1 {
padding-top: 125px;
padding-bottom: 90px;
}
.hero-banner.hero-banner-3, .hero-banner.hero-banner-2 {
padding-top: 125px;
padding-bottom: 0;
}
.hero-banner.hero-banner-3 .banner-filter-form .btn-icon {
border-radius: var(--radius-md) !important;
}
.hero-banner .banner-filter-form .btn-icon {
width: 100%;
}
.hero-banner .banner-filter-form .niceselect .list,
.hero-banner .banner-filter-form .form-control .list {
left: 0;
}
.hero-banner .banner-filter-form .nav-tabs .nav-link {
font-size: 12px;
}
.choose-area .shape {
display: none;
}
.testimonial-area .slider-item .client {
padding-inline: 30px;
}
.testimonial-area .slider-item .quote {
padding-inline: 30px;
}
.testimonial-area.testimonial-1 .slider-item .quote::before {
margin-inline-start: 15px;
}
.steps-area .card {
margin-inline: 0;
margin-top: 95px;
}
.steps-area .card .text-stroke {
top: -95px;
left: 0;
right: 0;
font-size: 70px;
}
.car-list-area .product-column .product-action {
justify-content: space-between;
padding-top: 15px;
margin-top: 15px;
border-top: 1px solid var(--border-color);
}
.cookie-bar-inner {
flex-wrap: wrap;
}
.spacer {
padding: 10px 0;
}
.tabs-navigation,
.tabs-navigation.tabs-navigation-2 {
overflow: hidden;
overflow-x: auto;
}
.tabs-navigation .nav,
.tabs-navigation.tabs-navigation-2 .nav {
flex-wrap: nowrap;
justify-content: flex-start;
overflow: unset;
}
.tabs-navigation .nav li,
.tabs-navigation.tabs-navigation-2 .nav li {
flex: 0 0 auto;
}
.blog-details-area .comments .comment-box {
padding: 20px 20px 0;
}
.blog-details-area .comments .comment-list .comment .comment-body .comment-author {
max-width: 60px;
padding-inline-end: 14px;
}
.blog-details-area .widget-area .widget {
padding: 20px;
}
.shopping-area .shopping-table:not(.order-summery .shopping-table) tbody td:not(.custom-checkbox) {
min-width: 160px;
}
.page-title-area {
padding-top: 130px;
}
} @media only screen and (max-width: 575.98px) {
.p-30 {
padding: 20px !important;
}
.p-20, .p-25 {
padding: 15px !important;
}
.hero-banner .banner-filter-form .nav-tabs .nav-link {
font-size: 12px;
}
.banner-sm .banner-content {
max-width: 60%;
}
.banner-sm h3 {
margin-bottom: 18px !important;
font-size: 16px;
}
.banner-sm .btn {
padding: 8px 16px;
font-size: 14px;
}
.authentication-area .link.go-signup {
text-align: start;
}
.widget-area .widget-post .article-item {
flex-direction: column;
}
.widget-area .widget-post .article-item .image {
max-width: 100%;
}
.widget-area .widget-post .article-item .content {
padding: 15px;
}
}