/*============================================ 
Template Name: Nipom
Version: 1.0
Description: Nipom - Auto Parts & Accessories Html Template 

/*** 
=====================================================
Scss Start
=====================================================
***/
:root {
  --baseColor: #D70934;
  --blackColor: #000000;
  --blackColor2: #0E0D10;
  --whiteColor: #ffffff;
  --whiteColor2: #eeeeee;
  --whiteColor3: #F5F5F5;
  --whiteColor4: #EBEBEB;
  --whiteColor5: #DBDBDB;
  --whiteColor6: #E3E8EB;
  --whiteColor7: #e8e8e8;
  --whiteColor8: #dcdcdc;
  --whiteColor9: #e9ecef;
  --whiteColor10: #e5e5e5;
  --whiteColor11: #eeeeee;
  --grayColor1: #777777;
  --grayColor2: #707070;
  --grayColor3: #565656;
  --grayColor4: #252525;
  --grayColor5: #273246;
  --grayColor6: #a7a7a7;
  --grayColor7: #424141;
  --grayColor8: #2e343d;
  --grayColor9: #555555;
  --grayColor10: #817f7f;
  --grayColor11: #dddddd;
  --blueColor: #245CED;
  --yellowColor: #FFBC00;
  --gray1: rgba(121, 121, 121, 0.5);
  --gray2: rgba(255, 255, 255, 0.2);
  --gray3: rgba(255, 255, 255, 0.3);
  --gray4: rgba(196, 196, 196, 0.8);
  --black1: rgba(0, 0, 0, 0.1);
  --black2: rgba(0, 0, 0, 0.4);
  --black3: rgba(0, 0, 0, 0.70);
  --black4: rgba(0, 0, 0, .15);
  --black5: rgba(0, 0, 0, 0.4);
  --black6: rgba(0, 0, 0, 0.45);
  --black7: rgba(85, 85, 85, 0.3);
  --black8: rgba(85, 85, 85, 0);
  --white1: rgb(238, 238, 238);
  --white2: rgba(255, 255, 255, 0.8);
  --red1: rgba(189, 8, 29, 0.3);
}

/*** 
=====================================================
01. Normalize Css Start 
=====================================================
***/


=====================================================
Normalize Css End  
=====================================================
***/
/*** 
=====================================================
02. Global Css Start
=====================================================
***/
html {
  height: 100%;
  scroll-behavior: smooth;
}


/*** 
=====================================================
Global Css End 
=====================================================
***/
/*==============================================
Button Css
===============================================*/

/* Padding Margin */

/*==============================================
 Ratting
===============================================*/


/*==============================================
Slick Arrrows
===============================================*/
.globalarrow .slick-prev:focus,
.globalarrow .slick-next:focus,
.globalarrow .slick-prev,
.globalarrow .slick-next,
.globalarrow .arrow-back,
.globalarrow .arrow-next {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 30px;
  line-height: 0px;
  font-size: 20px;
  font-weight: 700;
  color: var(--blackColor);
  z-index: 9;
  cursor: pointer;
  border-radius: 3px;
}
.globalarrow .slick-prev,
.globalarrow .arrow-back {
  left: 30px;
}
.globalarrow .slick-next,
.globalarrow .arrow-next {
  left: unset;
  right: 30px;
}

.globalarrow.roundarrow .arrow-back,
.globalarrow.roundarrow .arrow-next,
.globalarrow.roundarrow .slick-prev:focus,
.globalarrow.roundarrow .slick-next:focus,
.globalarrow.roundarrow .slick-prev,
.globalarrow.roundarrow .slick-next {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 30px;
  height: 40px;
  width: 40px;
  border: 1px solid var(--gray1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 50%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-size: 16px;
  color: #0D0D0D;
  background: var(--whiteColor);
  -webkit-box-shadow: 0px 15px 35px rgba(0, 0, 0, 0);
          box-shadow: 0px 15px 35px rgba(0, 0, 0, 0);
}
.globalarrow.roundarrow .arrow-back:hover,
.globalarrow.roundarrow .arrow-next:hover,
.globalarrow.roundarrow .slick-prev:focus:hover,
.globalarrow.roundarrow .slick-next:focus:hover,
.globalarrow.roundarrow .slick-prev:hover,
.globalarrow.roundarrow .slick-next:hover {
  border: 1px solid var(--baseColor) 0;
  background: var(--baseColor);
  color: var(--whiteColor);
  -webkit-box-shadow: 0px 15px 35px var(--black1);
          box-shadow: 0px 15px 35px var(--black1);
}
.globalarrow.roundarrow .slick-prev,
.globalarrow.roundarrow .arrow-back {
  left: -8px;
}
.globalarrow.roundarrow .slick-next,
.globalarrow.roundarrow .arrow-next {
  left: unset;
  right: -8px;
}

.globalarrow.roundarrow.style2 .slick-prev:focus,
.globalarrow.roundarrow.style2 .slick-next:focus,
.globalarrow.roundarrow.style2 .slick-prev,
.globalarrow.roundarrow.style2 .slick-next,
.globalarrow.roundarrow.style2 .arrow-back,
.globalarrow.roundarrow.style2 .arrow-next {
  height: 30px;
  width: 30px;
  top: 33%;
  font-size: 12px;
}

/* Slide Caption Animation */

/*==============================================
newsletterBox with button 
===============================================*/

/*==============================================
Media Box
===============================================*/


/*==============================================
Mega-Hover Start 
===============================================*/

/*==============================================
Components Css End  
===============================================*/
/*=== Menu ===*/


/*==============================================
Menu Left Start
===============================================*/

/*==============================================
QuickView Popup Start
===============================================*/
.
/*** 
=============================================
  Cart Drower Start 
=============================================
***/

/*==============================================
Product Quantity Small 
===============================================*/

/*==============================================
Newsletter Modal Start
===============================================*/

/*==============================================
 Sidebar Start 
===============================================*/

/*==============================================
.anouncement-bar Start
===============================================*/

/*==============================================
Home Page Css Start 
===============================================*/

/*==============================================
Hero-banner Start 
===============================================*/


/*==============================================
Category Start      
===============================================*/

/*==============================================
countdown 
===============================================*/

/*==============================================
Testimonial Start  
===============================================*/


/*==============================================
Partner Slider Start
===============================================*/


/*==============================================
  .Blogs
===============================================*/

/*==============================================
 Product Grid 
===============================================*/

/*==============================================
  .Footer
===============================================*/

/*==============================================
Filters Start 
===============================================*/

/*==============================================
Home Page Css End 
===============================================*/
/*==============================================
  .support-area
===============================================*/
.
/*=============================================
Banner Start
===============================================*/


/*==============================================
Filters Start 
===============================================*/


/*==============================================
Filters Start 
===============================================*/


/*==============================================
Cat Slider  Start 
===============================================*/

/*==============================================
Video Start 
===============================================*/
/*** 
=============================================
    Video Three Css
=============================================
***/

/*** 
=====================================================
breadcrumb-area start
=====================================================
***/

/*==============================================
Blog Single Start
===============================================*/


/*==============================================
Blog Sidebar Start
===============================================*/


/*==============================================
Blog Details Start
===============================================*/

/*==============================================
common-from Start
===============================================*/

/*==============================================
Shop Start 
===============================================*/

/*==============================================
product-quantity
===============================================*/

/*==============================================
Product Details Img  
===============================================*/

/*==============================================
Product Details Img  
===============================================*/

/***
=====================================================
Product List Start
=====================================================
***/

/*** 
=============================================
 size-tabble Css
=============================================
***/
.size-tabble {
  overflow-x: auto;
}
.size-tabble table {
  min-width: 992px;
  width: 100%;
}
.size-tabble thead tr {
  background: var(--blackColor2);
}
.size-tabble thead tr th {
  padding: 10px 20px 10px;
  font-size: 14px;
  color: var(--whiteColor);
  vertical-align: middle;
  text-align: center;
  min-width: 180px;
}
.size-tabble tbody tr td {
  padding: 6px 20px 6px;
  font-size: 12px;
  color: var(--blackColor2);
  vertical-align: middle;
  text-align: center;
  min-width: 180px;
  border: 1px solid var(--whiteColor3);
}

/*** 
=============================================
 Review-single Start
=============================================
***/

/*** 
=============================================
    Shop Details 1 Css
=============================================
***/


/*==============================================
Shop Start 
===============================================*/

/*==============================================
 FaqAccordian Start
===============================================*/

/*==============================================
 Contact Start
===============================================*/


/*** 
=============================================
    Contact Page Info Css
=============================================
***/

/*** 
=============================================
    Contact box Start  
=============================================
***/

/*** 
=============================================
    login-register-form Css
=============================================
***/

/*** 
=============================================
    Wishlist Css
=============================================
***/

/*==============================================
 Order Info Start
===============================================*/

/*** 
=============================================
   Cart area  style
=============================================
***/


/*** 
=============================================
    Compare Css
=============================================
***/

/*** 
=============================================
    Team Css
=============================================
***/

/*==============================================
Shop Sidebar 3 
===============================================*/

/*** 
=============================================
Product Categories One Css 
=============================================
***/
.grid-category {
  margin-top: -80px;
  z-index: 9;
  position: relative;
}

.gridCategoryBox {
  padding: 0px 17px 0px;
  display: inline-block;
}
.gridCategoryBox:hover .inner img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.gridCategoryBox:hover h6 {
  color: var(--baseColor);
}

.grid-category .img-box {
  background: var(--whiteColor);
  border-radius: 50%;
  padding: 15px;
  display: inline-block;
}

.grid-category .inner img {
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.grid-category .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 1px solid #e4e4e4;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -webkit-transition: all 0.4s ease-in-out;
  overflow: hidden;
}
.grid-category .inner img {
  max-width: 80%;
}

.grid-category .gridCategoryBox:hover .inner {
  border: 1px solid var(--baseColor);
}

.grid-category .title {
  display: block;
  margin-top: 10px;
  margin-bottom: -3px;
}

.grid-category .title h6 {
  color: var(--blackColor2);
  text-transform: uppercase;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.grid-category .title h6:hover {
  color: var(--baseColor);
}

.sidebarFollow li {
  width: 30%;
}

.borderBottom {
  border-bottom: 1px solid var(--grayColor11);
}

/*** 
=============================================
About
=============================================
***/

/*** 
=====================================================
Bottom to top Css
=====================================================

/*** 
=====================================================
Bottom to top Css 
=====================================================
***/