@charset "UTF-8";

/*
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.0
Requires PHP: 5.6
Version: 1.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/**
 * SETTINGS
 * File-header..........The file header for the themes style.css file.
 * Fonts................Any font files, if the project needs specific fonts.
 * Global...............Project-specific, globally available variables.
 *
 * TOOLS
 * Functions............Global functions.
 * Mixins...............Global mixins.
 *
 * GENERIC
 * Normalize.css........Normalise browser defaults.
 * Breakpoints..........Mixins and variables for responsive styles
 * Vertical-margins.....Vertical spacing for the main components.
 * Reset................Reset specific elements to make them easier to style in other contexts.
 * Clearings............Clearings for the main components.
 *
 * ELEMENTS
 * Blockquote...........Default blockquote.
 * Forms................Element-level form styling.
 * Headings.............H1–H6
 * Links................Default links.
 * Lists................Default lists.
 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
 *
 * BLOCKS
 * Audio................Specific styles for the audio block.
 * Button...............Specific styles for the button block.
 * Code.................Specific styles for the code block.
 * Columns..............Specific styles for the columns block.
 * Cover................Specific styles for the cover block.
 * File.................Specific styles for the file block.
 * Gallery..............Specific styles for the gallery block.
 * Group................Specific styles for the group block.
 * Heading..............Specific styles for the heading block.
 * Image................Specific styles for the image block.
 * Latest comments......Specific styles for the latest comments block.
 * Latest posts.........Specific styles for the latest posts block.
 * Legacy...............Specific styles for the legacy gallery.
 * List.................Specific styles for the list block.
 * Media text...........Specific styles for the media and text block.
 * Navigation...........Specific styles for the navigation block.
 * Paragraph............Specific styles for the paragraph block.
 * Pullquote............Specific styles for the pullquote block.
 * Quote................Specific styles for the quote block.
 * Search...............Specific styles for the search block.
 * Separator............Specific styles for the separator block.
 * Spacer...............Specific styles for the spacer block.
 * Table................Specific styles for the table block.
 * Verse................Specific styles for the verse block.
 * Video................Specific styles for the video block.
 * Utilities............Block alignments.
 *
 * COMPONENTS
 * Header...............Header styles.
 * Footer...............Footer styles.
 * Comments.............Comment styles.
 * Archives.............Archive styles.
 * 404..................404 styles.
 * Search...............Search styles.
 * Navigation...........Navigation styles.
 * Footer Navigation....Footer Navigation styles.
 * Pagination...........Pagination styles.
 * Single...............Single page and post styles.
 * Posts and pages......Misc, sticky post styles.
 * Entry................Entry, author biography.
 * Widget...............Widget styles.
 * Editor...............Editor styles.
 *
 * UTILITIES
 * A11y.................Screen reader text, prefers reduced motion etc.
 * Color Palette........Classes for the color palette colors.
 * Editor Font Sizes....Editor Font Sizes.
 * Measure..............The width of a line of text, in characters.
 */

/* Categories 01 to 03 are the basics. */

/* Variables */
:root{
    --body-color: #666666;
    --primary-color: #e94141;
    --black-color: #000000;
    
}
body{ color: var(--body-color);}
h1, h2, h3, h4, h5, h6{font-weight: 600; color: var(--black-color); text-transform: uppercase;}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{font-weight: 300;}

h2{color: var(--body-color); text-transform: inherit;}
a{color: var(--primary-color);}
a:hover{color: var(--primary-color); text-decoration: none;}

.fs-14{font-size: 0.8rem !important;}
.fw-600{font-weight: 600 !important;}
.w-30{width: 30%;}

.text-primary{color: var(--primary-color) !important;}
.text-secondary{color: var(--black-color) !important;}
.btn-primary{background-color: var(--primary-color); border-color: var(--primary-color); padding-left: 1.5rem; padding-right: 1.5rem; font-weight: 500;}
.btn-primary:hover{background-color: var(--primary-color); border-color: var(--primary-color);}
.btn-primary:focus{box-shadow: none!important}

.btn-secondary{background-color: var(--black-color); border-color: var(--black-color); padding-left: 1.5rem; padding-right: 1.5rem; font-weight: 500;}
.btn-secondary:hover{background-color: var(--black-color); border-color: var(--black-color);}
.btn-secondary:focus{box-shadow: none!important}

.bg-primary{background-color: var(--primary-color) !important;}
.bg-black{background-color: var(--black-color);}

.border-primary{border-color: var(--primary-color) !important;}
.dropdown-item{color: var(--body-color);}

.login-tab li .nav-link{font-weight: 400; font-size: 1.25rem; color: var(--body-color);}
.login-tab li .nav-link.active{border-bottom: 3px solid var(--primary-color) !important; color: var(--primary-color);}

.sticky-top{box-shadow: 0 0 3px rgba(0,0,0,0.2);}
.main-nav .navbar-nav .nav-link{color: var(--body-color); text-transform: uppercase; padding-left: 1rem; padding-right: 1rem; font-size: 1.10rem; font-weight: 500;}
.main-nav .navbar-nav .nav-link:focus, .main-nav .navbar-nav .nav-link:hover{color:var(--primary-color);}
.main-nav .navbar-nav .dropdown-menu{border-top: 2px solid var(--primary-color) !important; top: 80px; }
.main-nav .navbar-nav .dropdown-menu.mega-menu{width: 1000px; margin-left: -500px;}
.main-nav .navbar-nav .dropdown-menu ul{list-style: none;}
.main-nav .navbar-nav .dropdown-menu li{border-bottom: 1px solid #f8f9fa;}
.main-nav .navbar-nav .dropdown-menu li a{font-weight: 500; color: var(--body-color); font-size: 1rem; padding: 1rem;}
.main-nav .navbar-nav .dropdown-menu li a:hover{background-color: #f8f9fa;}

.main-nav .navbar-nav ul.grid-col{display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr));}
.main-nav .navbar-nav ul.grid-col li{border-bottom: 1px solid #f8f9fa;}
.main-nav .navbar-nav ul.grid-col li a{padding: 2rem; text-align: center; font-weight: 700; color: var(--body-color); font-size: 1.2rem;}

.main-nav .shop-dd ul.grid-col li:not(:nth-child(3n)){border-right: 1px solid #f8f9fa;}
.main-nav .shop-dd .nav-tabs .nav-link{border:none; font-weight: 600; font-size: 1.2rem;}
.main-nav .shop-dd .nav-tabs .nav-link.active{border-bottom: 2px solid var(--primary-color); color: var(--primary-color);}

.main-nav .brand-dd ul.grid-col li:not(:nth-child(5n)){border-right: 1px solid #f8f9fa;}

.main-nav .type-dd{width: 1200px; margin-left: -600px;}
.main-nav .type-dd ul li:not(:nth-child(6n)){border-right: 1px solid #f8f9fa;}

.navbar-expand-md .navbar-collapse i{color: var(--body-color);}
.header-login .dropdown-toggle:after, .header-search .dropdown-toggle:after{display: none;}
.search-form{width: 260px;}
.search-form input{padding-right: 2.5rem;}
.search-form .btn{right: 0;}

.login-form{z-index: 1050;}

.header-cart a{color: var(--body-color); position: relative; text-decoration: none;}
.header-cart a span{background: var(--primary-color); width: 1.5rem; height: 1.5rem; border-radius: 50%; color: #FFF; text-align: center; line-height: 24px; position: absolute; font-size: 12px; top: -12px; left: 12px;}

/*.main-container{padding-top: 124px;}*/
.home-carousel .carousel-caption{ width: 570px; top: 50%; bottom: auto; transform: translate(0, -50%);}
.home-carousel .carousel-caption h3{font-size: 3rem;}
.home-carousel .carousel-item:after{content:""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0) 70%);}
.home-carousel .carousel-item .carousel-caption{z-index: 1;}

.section{padding-top: 100px; padding-bottom: 100px;}
.home-offer-detail{position: absolute;}
.ribbon{position: absolute; background-color: var(--primary-color); color: #FFF; left: 0; top: 20px; padding: 5px 20px 5px 10px; font-size: 0.8rem; clip-path: polygon(0 0, 0 50%, 0 100%, 100% 100%, 90% 50%, 100% 0);}


.footer{background-image: url("assets/images/footer-bg.png"); background-repeat: no-repeat; background-position: 0 bottom;}
.footer-top ul{list-style: none;}
.footer-top ul li{position: relative; padding-left: 20px;}
.footer-top ul li:not(:last-child){margin-bottom: 10px;}
.footer-top ul li:before{content: ""; display: block; width: 4px; height: 4px; background-color: var(--primary-color); position: absolute; left: 0; top: 10px;}
.footer-top a{color: #FFF; text-decoration: none;}
.footer-top a:hover{color: var(--primary-color);}

.subscribe .form-control{border: 1px solid #313131; color: #FFF;}
.subscribe .form-control:focus{box-shadow: none !important;}
.subscribe .btn{right: 0; top: 0;}

.payment-info img{max-width: 60px;}
.payment-info img + img{margin-left: 10px;}

.border-bot{border-top: 1px solid #313131;}



.check-list{list-style: none;}
.check-list > li{line-height: 1.5rem; padding-left:2rem; position: relative;}
.check-list > li:not(:last-child){margin-bottom: 10px;}
.check-list > li:before{content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 0; color: var(--primary-color); font-size: 20px;}

.cart-image img{max-width: 115px;}

.detail-tire-price{border-left: 1px solid #dee2e6; border-right:1px solid #dee2e6;}

.post-detail h2 a{text-decoration: none; font-size: 1.5rem; line-height: 1.2; margin-top: 0.5rem; display: inline-block;}
.post-detail p{margin-bottom: 0;}
.post-detail .entry-meta{font-size: 0.75rem;}
.single-post .post .entry-footer a, .post-detail .entry-meta a{text-decoration: none;}

.single-post .post .entry-title{color: var(--primary-color); margin-bottom: 1rem;}
.single-post .post .entry-footer .date{display: none;}

.widget-area h3{color: var(--black-color); text-transform: uppercase; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #dee2e6; position: relative;}
.widget-area h3:after{content: ''; width: 100px; height: 4px; background-color: var(--primary-color); position: absolute; left: 0; bottom: -1px;}
.widget-area .wp-block-latest-posts li{display: flex;}
.widget-area .wp-block-search__label{display: none;}
.widget-area .wp-block-search__input{border: none;}
.widget-area .wp-block-search__button{border: none; background: var(--primary-color); color: #FFF; font-weight: 500; margin: 0;}
.widget-area .wp-block-latest-posts li .wp-block-latest-posts__featured-image{max-width: 80px; min-width: 80px;}
.widget-area .wp-block-latest-posts li .wp-block-latest-posts__featured-image img{height: auto !important;}
.widget-area .wp-block-latest-posts li a{color: var(--body-color); margin-left: 1rem;}
.widget-area .wp-block-categories li + li, .widget-area .wp-block-latest-posts li + li{border-top: 1px dashed #dee2e6; margin-top: 1rem; padding-top: 1rem;}

.widget-area .wp-block-categories{padding-left: 0; list-style: none;}
.widget-area .wp-block-categories li a{color: var(--body-color); text-decoration: none;}

@media (min-width: 1200px){
    .custom-logo-link{padding-top: 1.5rem !important; padding-bottom: 1.5rem !important;}
}

@media (min-width: 992px){
    .navbar-expand-lg .offcanvas{position: inherit; z-index: 1000; flex-grow: 1; visibility: visible !important; background-color: transparent; border-right: 0; border-left: 0; transition: none; transform: none; width: auto;}
    .navbar-expand-lg .offcanvas-header{display: none;}
    .navbar-expand-lg .offcanvas-body{display: flex; flex-grow: 0; padding: 0; overflow-y: visible;}
    
    
    
}

@media only screen and (max-width: 992px){
    .main-nav .navbar-nav .nav-link{padding-left: 0.5rem; padding-right: 0.5rem;}
    .navbar-brand img{height: 35px;}
    .custom-logo-link{padding-top: 1rem !important; padding-bottom: 1rem !important;}
    .main-nav .navbar-nav > li:not(:last-child){border-bottom:1px solid #f8f9fa;}
    .main-nav .navbar-nav .dropdown-menu{box-shadow: none !important;}
    .main-nav .navbar-nav .dropdown-menu.mega-menu{width: 100%; margin-left: auto;}
    .main-nav .brand-dd ul.grid-col li:not(:nth-child(5n)){border-right: none;}
    
    .home-carousel .carousel-caption{margin: 0; width: 85vh; top: 0;}
    .home-carousel .carousel-caption h3{font-size: 2rem;}

}

@media only screen and (max-width: 767px){
    .section{padding-top: 60px; padding-bottom: 60px;}
    .about-section{background-size: cover;} 
    
    .home-carousel .carousel-caption h3{font-size: 1.5rem;}
    .home-carousel .carousel-caption{width: 40vh;}
    .home-carousel .carousel-inner{min-height: 230px;}
    .home-carousel .carousel-inner img{min-height: 230px;}
     
    .footer-support br{display: none;}
}

@media (max-width: 576px){
    .search-form{width: 100%;}
    .home-carousel .carousel-inner{min-height: 260px;}
    .home-carousel .carousel-inner img{min-height: 260px;}
    
    .detail-tire-price{border-left: none; border-right:none; border-top: 1px solid #dee2e6; border-bottom:1px solid #dee2e6; padding-top: 1rem; padding-bottom: 1rem;}
}

@media (max-width: 480px){
    .header-top .nav-link{padding-left: 0; padding-right: 0;}
    .home-carousel .carousel-caption{width: 32vh;}
}

.blog-body, .blog-list-card, .blog-detail {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}

.blog-body > h2 , .blog-body > p , .blog-body > ul, .blog-list-card > h2, .blog-list-card > ul, .blog-list-card > p, .blog-detail > ul, .blog-detail > h2, .blog-detail > p{
    margin-bottom: 1.5rem!important;
}

.blog-body > ul > li, .blog-list-card > ul > li, .blog-detail > ul > li {
    width: 100%;
    margin-bottom: 12px;
    font-size: 15px;
    color: #0a2540;
    font-weight: 500;
    padding-left: 35px;
    position: relative;
    line-height: 24px;
}

.blog-body > ul > li:after, .blog-list-card > ul > li:after, .blog-detail > ul > li:after {
    position: absolute;
    left: 0;
    top: 2px;
    font-weight: 900;
    background-image: url(https://globalwholesalemachinery.com/assets/media/dozer-list-icon-black.png);
    background-repeat: no-repeat;
    background-position: left top;
    width: 25px;
    height: 16px;
    content: "";
}

.top-block .align-items-center a {
    color: #000;
}
.top-block .align-items-center a:hover {
    color: #e94141;
}
.latest-category{
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
}
#block-8{
    margin-top: 25px;
}