@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');
*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
:root{
   --primary-color: #db091b;
   --body-bg: #fafafa;
   --border-radius: 5px;
   --box-shadow: 0 4px 6px #73737340;  
}

html,body{
   font-family: "Libre Franklin", sans-serif;
}

body{
   background-color: var(--body-bg);
}

a{
   color: #000;
   text-decoration: none;
}

.btn-theme-dark{
   background-color: #050000;
   border: 1px solid #000;
   padding: 10px 20px;
   color: #fff;
   border-radius: var(--border-radius);
}
.btn-theme-dark:hover{
   background-color: var(--primary-color);
   border-color: var(--primary-color);
}

.btn-theme-outline-dark{
   background-color: #fff;
   border: 1px solid #050000;
   padding: 10px 20px;
   color: #000;
   border-radius: var(--border-radius);
}

.btn-theme-outline-dark:hover{
   background-color: #050000;
   color: #fff;
}

.btn-theme-primary{
   background-color: var(--primary-color);
   border: 1px solid var(--primary-color);
   padding: 10px 20px;
   color: #fff;
   border-radius: var(--border-radius);
}

/* owl carousel */
.owl-carousel{
   position: relative;
}
.owl-nav .owl-prev{
   position: absolute;
   left: -30px;
   top:50%;
   transform: translateY(-50%); 
}

.owl-nav .owl-next{
   position: absolute;
   right: -30px;
   top:50%;
   transform: translateY(-50%); 
}

.owl-nav .owl-prev span,
.owl-nav .owl-next span
{
   background-color: rgba(255,255,255,.6);
   color: #000;
   font-size: 3rem;
   padding: 10px 5px;
   box-shadow: var(--box-shadow);
} 
.owl-nav .owl-prev:hover span,
.owl-nav .owl-next:hover span {
   background-color: rgba(255,255,255,1);
}



 /* custom card */
 .custom-card{
   background-color: #fff;
   box-shadow: var(--box-shadow);
   border-radius: var(--border-radius);
   overflow: hidden;
   /* padding: 20px */
 }
 .custom-card-body{
   padding: 20px;
 }

 .breadcrumb-area{
   margin-bottom: 50px; 
 }

 .section-padding-50{
   padding-top:50px;
   padding-bottom: 50px;
 }

/* header */
.top-bar{
   border-top: 5px solid var(--primary-color);
   border-bottom: 2px solid #ededed;
   font-size: 13px;
   font-weight: 300;
   padding-top: 15px;
   padding-bottom: 15px;
}

.top-bar .social-icons{
   display: flex;
   justify-content: flex-end;
   column-gap: 14px;
}
.top-bar .social-icons i{
   font-size: 15px;
}

.navbar{
   border-bottom: 1px solid #ededed;
   padding-top: 15px;
   padding-bottom: 15px;
}
.nav-right-icons i{
   font-size: 2rem;
}
.navbar-brand img{
   height: 40px;
}

.navbar .nav-link{
   font-size: .9rem;
   font-weight: 700;
   text-transform: uppercase;
   color: #050000;
}
.dropdown{
   transition: .3s;
}
.dropdown-menu{
   padding: 10px;
   padding-top: 145px;
   border:none;
   box-sizing: var(--box-shadow);
   padding: 00px;
}

.dropdown-menu .dropdown-item{
   padding-right: 140px;
   padding-top: 10px;
   padding-bottom: 10px;
}
.dropdown:hover .dropdown-menu{
   display: block;
}
.dropdown-item:active{
   background-color: #000;
}
.about{
   background: url('../img/bg-black.png');
   color: #fff;
   padding: 50px 0;
   text-align: center;
}
.about .about-title{
   font-size: 55px;
   margin-bottom: 35px;
   text-transform: uppercase;
   font-weight: bold;
}
.about .about-content{
   font-size: 16px;
   max-width: 700px;
   margin:auto;
}

.about-us{
   background:  linear-gradient(to left,rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,.8)), url('../img/truck-bg.jpg');
   background-size: cover;
   background-position: right bottom;

}
.about-us .about-us-content-box{
   background-color: var(--primary-color);
   padding: 50px;
   color:#fff;
   margin-top: 100px;
   margin-bottom: 100px;
   box-shadow: var(--box-shadow);
}
.about-us .about-us-content-box p{
   text-align: justify;
}
.about-us-box-title:after{
   content : '';
   width:100px;
   height: 3px;
   background-color:#fff;
   margin-top: 10px;
   margin-bottom: 50px;
   display: block;

}

.section-header{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 40px 0;  
}

.section-header .section-title{
   font-size: 3.1rem;
   font-weight: 600;
   text-transform: uppercase;
}

.inventory{
   background: linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)), url('../img/canada_map.png');
   background-attachment: fixed;
   background-size: cover;
   background-position: top;
}

.row.g-3{
   --bs-gutter-x: 3rem;
}
.listing-item{
   position: relative;
   background-color: #fff;
   border-radius: var(--border-radius);
   box-shadow: 0 4px 6px #73737340;
   overflow: hidden;
   margin-bottom: 30px;
}

.listing-item .layers .label{
   position: absolute;
   left:-20px;
   top:-10px;
   width: 100%;
   height: 40px;
   background: #3bc7ff;
   background: linear-gradient(90deg,rgba(59, 199, 255, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
   z-index: 1111;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #fff;
   font-weight: 500;
   transform: rotate(-45deg) translate(-30%,-100%)
}

.listing-item .layers .label-2{
   background: #a012ff;
   background: linear-gradient(90deg,rgba(160, 18, 255, 1) 0%, rgba(253, 29, 29, 1) 46%, rgba(255, 173, 59, 1) 100%);
}

.listing-item img{
   aspect-ratio: 3/2;
   object-fit: cover;
}
.listing-item .content{
   padding: 50px 20px 20px 20px;
}

.listing-item .content .listing-title{
   font-size: 19px;
   font-weight: bold;
   word-break: break-all;  
   text-transform: uppercase;
}
.listing-item .content .price-area{
   display: flex;
   align-items: center;
   column-gap: 5px;
}
.listing-item .content .price-area i{
   color: #777777;
   font-size: 14px;
}
.listing-item .content .price-area .tax-badge{
   background-color: #8c8c8c;
   font-size: 10px;
   padding: 1px 10px;
   border-radius: 25px;
   color: #fff;
   font-weight: bold;
}

.listing-item .content .listing-price{
   font-size: 22px;
   color: #000;
   font-weight: 700;
}

.listing-item  .content .listing-features{
   display: flex;
   border: 1px solid #000;
   border-radius: var(--border-radius);
   color:#000; 
   text-align: center;
   font-weight: 500;
}
.listing-item  .content .listing-features .listing-feature-item{
   padding: 5px;
}
.listing-item  .content .listing-features .listing-feature-item .title{
   font-size: 14px;
   color:#000; 
}
.listing-item  .content .listing-features .listing-feature-item .value{
   font-size: 10.6px;
   color:#000; 
}
.listing-item  .content .listing-features .listing-feature-item:not(:last-child){
   border-right: 1px solid #000;
}

.listing-footer .listing-info-btn{
   display: block;
   background: #050000;
   width: 100%;
   padding: 10px 15px;
   margin-top:10px;
   color: #fff;
   font-weight: 500;
   text-transform: uppercase;
   font-size: 15px;
   border-radius: var(--border-radius);
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.reviews{
   background: linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)), url('../img/r-bg.jpg');
   background-attachment: fixed;
   background-size: cover;
   background-position: top right;
   padding-bottom: 50px;
}

.review-card{
   position: relative;
   background-color: rgba(255,255,255,.8);
   padding: 40px 30px; 
   text-align: center;
   /* min-height: 450px; */

}
.review-card:before{
   
   content: "“";
   position: absolute;
   top: 0px;
   left: 20px;
   display: block;
   font-size: 3rem;
   color: var(--primary-color);
}
.review-card:after{
   
   content: "”";
   position: absolute;
   bottom: -20px;
   right: 20px;
   display: block;
   font-size: 3rem;
   color: var(--primary-color);
}
.review-card .title{
   font-size: 1.1rem;
   margin-bottom: 20px;
   min-height: 50px;
}

.review-card .content{
   font-size: 16px;
   margin-bottom: 50px;
   min-height: 150px;
}
.review-card .ratings{
   margin-bottom: 10px;
}
.review-card .author-name{
   font-size: 20px;
}
.review-card .author-designation{
   font-size: 14px;
}



.accordion{
   border-radius: 0;
}

.accordion-item{
   border: none;
   border-bottom: 1px solid #ddd;
   border-radius: 0;
}
.accordion-button{
   border-top-left-radius: 0 !important;
   border-top-right-radius: 0 !important;
   box-shadow: none !important;
   outline: none !important;
}

.accordion-button:not(.collapsed){
   background: #fff;
   color: #000;
}
.accordion-button:not(.collapsed):after{
   /* filter: invert(1); */
   background-image: url('../icons/minus.png');
   background-size: 70%;
   transform: rotate(-180deg) translateX(5px);
   transform-origin: center;
   
}

.accordion-button::after{
   background-image: url('../icons/plus.png');
   background-size: 70%;
}

.form-check-input:checked{
   background-color: var(--primary-color);
   border-color: var(--primary-color);
}

.listing-info .listing-location a{
   font-size: 15px;
}

.listing-info .share-items{
   display: flex;
   column-gap: 20px;
  
}
.listing-info .share-items i{
   font-size: 1.4rem;
}
.facebook{
   color: #1877F2;
}
.whatsapp{
   color: #128C7E
}
.instagram{
   color: #FAA61A
}
.mail{
   color: #d36313
}
.listing-info .listing-images{
   box-shadow: var(--box-shadow);
   overflow: hidden;
}
.listing-info .listing-images img{
   width: 100%;
   aspect-ratio: 3/2;
   object-fit: cover;
   border-radius: var(--border-radius);
  
}

/* listing filter sidebar */
.fixed-filter-sidebar {
   width: 344px;
   position: fixed;
   top: 20px;
   z-index: 999;
 }

 .pagination .page-item.active span{
   background-color: var(--primary-color) !important;
   border: var(--primary-color) !important;
   color: #fff;
 }
 .pagination .page-link{
   color: var(--primary-color);
 }

/* page header */

.page-header{
   position: relative;
   padding: 80px 0;
   text-align:left;
   background-size: cover;
   background-position: center center;
   z-index: -1;
}
.page-header-title{
   position: relative;
   font-size: 3rem;
   font-weight: 600;
   color: #fff;
   z-index: 112;
   text-transform: capitalize;
}

.page-header:before{
   content: '';
   background: rgba(0,0,0,.5);
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top:0;
   z-index: 1;
}


footer{
   background-color: #050000;
   padding-top: 15px;
   color: #fff;
}
footer a{
   color: #fff;
   transition: .2s;
}
footer a:hover{
   color: var(--primary-color);
}

footer .footer-content{
   padding: 50px 20px;
}
footer .footer-content .footer-title{
   font-weight: 500;
   text-transform: uppercase;
   margin-bottom: 20px;
}
.footer-content .footer-address .icon{
   margin-right: 10px;
}

.footer-content .footer-social-icons{
   display: flex;
   column-gap: 20px;
   font-size: 1.3rem;
}

.footer-bottom{
   text-align:center;
   background-color: #2d2d2d;
   padding-top: 20px;
   padding-bottom: 5px;
}

.category-area{
   position: relative;
   background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)),  url('../img/truckb2.jpg');
   background-size: cover;
   background-position: center top;
   text-align: center;
   color:#fff;
   z-index: 1;
}
.category-area:before{
   content: '';
   backdrop-filter: saturate(0);
   width: 100%;
   height: 100%;
   position: absolute;
   left:0;
   top:0;
   z-index: -22;
}

.category-area img{
   padding: 30px;
   width: 100%;
   aspect-ratio: 4/2;
   object-fit: contain;
}

.category-box{
   padding: 50px 0;
}
.category-box:hover{
   background-color: rgba(0,0,0,.6);
}