.container,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 1440px;
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Open Sans";

  font-style: normal;

  font-weight: 300;

  src: url("../fonts/open-sans-v44-latin_symbols-300.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/open-sans-v44-latin_symbols-300.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/open-sans-v44-latin_symbols-300.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/open-sans-v44-latin_symbols-300.woff") format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/open-sans-v44-latin_symbols-300.ttf") format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/open-sans-v44-latin_symbols-300.svg#OpenSans") format("svg"); /* Legacy iOS */
}

/* open-sans-regular - latin_symbols */

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Open Sans";

  font-style: normal;

  font-weight: 400;

  src: url("../fonts/open-sans-v44-latin_symbols-regular.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/open-sans-v44-latin_symbols-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/open-sans-v44-latin_symbols-regular.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/open-sans-v44-latin_symbols-regular.woff") format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/open-sans-v44-latin_symbols-regular.ttf") format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/open-sans-v44-latin_symbols-regular.svg#OpenSans")
      format("svg"); /* Legacy iOS */
}

/* open-sans-500 - latin_symbols */

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Open Sans";

  font-style: normal;

  font-weight: 500;

  src: url("../fonts/open-sans-v44-latin_symbols-500.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/open-sans-v44-latin_symbols-500.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/open-sans-v44-latin_symbols-500.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/open-sans-v44-latin_symbols-500.woff") format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/open-sans-v44-latin_symbols-500.ttf") format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/open-sans-v44-latin_symbols-500.svg#OpenSans") format("svg"); /* Legacy iOS */
}

/* open-sans-600 - latin_symbols */

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Open Sans";

  font-style: normal;

  font-weight: 600;

  src: url("../fonts/open-sans-v44-latin_symbols-600.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/open-sans-v44-latin_symbols-600.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/open-sans-v44-latin_symbols-600.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/open-sans-v44-latin_symbols-600.woff") format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/open-sans-v44-latin_symbols-600.ttf") format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/open-sans-v44-latin_symbols-600.svg#OpenSans") format("svg"); /* Legacy iOS */
}

/* open-sans-700 - latin_symbols */

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Open Sans";

  font-style: normal;

  font-weight: 700;

  src: url("../fonts/open-sans-v44-latin_symbols-700.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/open-sans-v44-latin_symbols-700.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/open-sans-v44-latin_symbols-700.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/open-sans-v44-latin_symbols-700.woff") format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/open-sans-v44-latin_symbols-700.ttf") format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/open-sans-v44-latin_symbols-700.svg#OpenSans") format("svg"); /* Legacy iOS */
}

/* open-sans-800 - latin_symbols */

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Open Sans";

  font-style: normal;

  font-weight: 800;

  src: url("../fonts/open-sans-v44-latin_symbols-800.eot"); /* IE9 Compat Modes */
  src:
    url("../fonts/open-sans-v44-latin_symbols-800.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/open-sans-v44-latin_symbols-800.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/open-sans-v44-latin_symbols-800.woff") format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/open-sans-v44-latin_symbols-800.ttf") format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/open-sans-v44-latin_symbols-800.svg#OpenSans") format("svg"); /* Legacy iOS */
}

/*

variable

*/
.main-wrapper {
  margin-left: 10px;
  margin-right: 10px;
}

:root {
  --primary-color1: #fe0742;

  --primary-color2: #090619;

  --primary-color3: #d9d9d980;
  --primary-color3-1: #d9d9d9;

  --primary-color4: #495867;

  --primary-color5: #577399;

  --primary-color6: #bdd5ea;

  --primary-color7: #707070;

  --primary-color8: #fe5f55;

  --primary-color9: #c3c3c3;

  --primary-color10: #f7f7ff;

  --primary-color11: #f5f5f5;

  --primary-color12: #58585a;
  --primary-color13: rgba(88, 88, 90, 0.7);

  --primary-color14: #332f46;

  --primary-color15: #e7e4e4;
  --primery-color16: rgba(88, 88, 90, 0.5);
  --primery-color17: #d9d9d9;

  font-size: 16px;

  --padding-default: 4rem;

  --padding-small: 1rem;

  --swiper-navigation-sides-offset: 15px;

  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

  /* Bootstrap's default dark mode variable (optional, but safer) */

  --bs-navbar-dark-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --shadow-4x: box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.px-lg-6 {
  padding-left: 4rem;
  padding-right: 4rem;
}

body,
html,
a,
p,
span,
button,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Open Sans" !important;
}

html {
  background: white;

  scroll-behavior: smooth;
}

.shadow-4x {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.flex-d-row {
  display: flex;

  justify-content: center;

  align-items: center;
}

.px-66 {
  padding-right: var(--padding-default);

  padding-left: var(--padding-default);
}

.title-h2 {
  font-size: 20px;

  font-weight: 600;

  color: var(--primary-color2);
}

.title-section {
  font-size: 16px;

  font-weight: bold;

  text-align: left;

  color: var(--primary-color2);
}

h1.h1 {
  font-size: 24px;

  font-weight: bold;
}

/*

header

*/

a {
  text-decoration: none;
}

header {
  padding: 0 !important;
  z-index: 2;
  position: relative;
  background: var(--primary-color10);
  overflow: visible;
}

.hero-mobile > div {
  padding-top: 50px;
}

.header-top .header-top-row {
  display: flex;

  justify-content: flex-start;
}

.call .t-call {
  font-size: 14px;

  font-family: "open-sans", sans-serif;

  font-weight: 400;
}

.call i {
  font-size: 18px;
}

.call:hover {
  text-decoration: none !important;
}

.tagline {
  font-size: 16px;

  font-weight: 600;
}

.header-top {
  height: 40px;
}

#discountCode .swiper-slide {
  text-align: center;
}

#discountCode .swiper-button-prev {
  position: absolute;

  border: none;

  left: var(--swiper-navigation-sides-offset, 10px);

  right: auto;

  top: 25px;

  z-index: 10;
  width: 20px;
  height: 20px;
}

#discountCode .swiper-button-next {
  position: absolute;

  border: none;

  right: var(--swiper-navigation-sides-offset, 10px);

  left: auto;

  top: 20px;

  z-index: 10;
}

#discountCode .swiper-button-next:after,
#discountCode .swiper-button-prev:after {
  color: white;

  font-size: 16px;

  width: 20px;

  height: 20px;
}

.track {
  font-size: 14px;

  font-weight: 600;
}

.header-logo {
  padding-inline: 66px;

  height: 60px;
}

#search-desktop {
  height: 30px;

  padding: 0 10px !important;

  border: 1px solid var(--primary-color9);

  width: 100%;
}

#search-desktop .input-group {
  justify-content: center;
  position: relative;
  width: 100% !important;
}
#search-form .btn {
  position: absolute;
  right: 0;
}

.submit-search {
  background-color: var(--primary-color12);

  color: white;

  border-radius: 0 10px 10px 0;

  height: 32px;
  width: 90px;
  padding: 0 15px !important;
}

.submit-search:hover {
  background-color: var(--primary-color12);
  color: white;
}

.header-desktop {
  border-bottom: 0.5px solid var(--primary-color13);
}

.header-nav-desktop {
  height: 50px;
}

.navbar,
menu-primary-menu-1 {
  height: 50px;
  padding: 0;
}

.factory .btn {
  border-right: 0;
  border-radius: 10px 0 0 10px;
}

/* =========================================

1. MAIN MENU (Products, Deals...)

========================================= */

.menu {
  display: flex;

  justify-content: flex-start;

  align-items: center;

  list-style: none;

  padding: 0;

  margin: 0;

  background: var(--primary-color10);

  position: relative;
}

.menu > li > a {
  color: var(--primary-color2);

  font-size: 16px;

  font-weight: 600;
}

.menu > li {
  padding: 12px 25px 12px 0;

  position: relative; /* Anchor for the first dropdown */
}

.menu > li > a::after {
  content: "";

  width: 80%;

  height: 3px;

  position: absolute;

  bottom: 0;

  left: 0;

  background-color: var(--primary-color1);

  display: none;
}

.menu > li:hover > a::after {
  display: flex;

  transition: all 0.5s ease;
}

/* =========================================

 2. GENERIC SUB-MENU SETUP (Hide All)

 ========================================= */

.menu ul {
  display: none; /* Hide ALL submenus by default */

  list-style: none;

  padding: 0;

  margin: 0;

  position: absolute;

  background: #fff;

  /* box-shadow: 0 5px 15px rgba(0,0,0,0.1); */

  z-index: 99;
}

/* =========================================

 3. FIRST DROPDOWN (Products -> Tire, Wheels, Accessories)

 ========================================= */

/* Only show the direct child UL when hovering the Main LI */

.menu > li:hover > ul {
  display: block;

  top: 100%;

  left: 0;

  width: 220px; /* Width of the vertical dropdown */
}

.menu > li > ul > li {
  position: relative; /* Anchor for the Mega Menu Flyout */

  padding-left: 2px;
}

.menu > li > ul > li > a {
  display: block;

  padding: 10px 15px;

  text-decoration: none;

  color: var(--primary-color2);
}

.sub-menu.depth-0 li a {
  position: relative;
}

.sub-menu.depth-0 > li > a::before {
  content: "";

  width: 5px;

  height: 18px;

  position: absolute;

  bottom: 50%;

  transform: translateY(50%);

  left: 0;

  background-color: var(--primary-color12);

  display: none;
}

.sub-menu.depth-0 > li:hover > a::before {
  display: block;
}

/* =========================================

 4. MEGA MENU (Accessories -> Brands, Top Sellers)

 ========================================= */

/* This is the class you add in WP Admin to 'Accessories' */

.menu .mega-menu-parent {
  position: static; /* Optional: If you want full width, use static. If Flyout, keep relative */
}

/* Only show the Mega Menu when hovering 'Accessories' */
.menu > li > ul > li.mega-menu-parent > ul {
  background-color: #eeeeee;
}

.menu > li > ul > li.mega-menu-parent:hover > ul {
  display: flex; /* Makes it Horizontal */

  flex-direction: row;

  gap: 40px;

  /* Position: Flyout to the Right */

  top: 0;

  left: 100%;

  /* Size */

  width: max-content; /* Width of the columns area */

  padding: 20px;
}

/* =========================================

 5. COLUMNS (Brands, Brand New...)

 ========================================= */

/* These are the LI items inside the Mega Menu */

.menu > li > ul > li.mega-menu-parent > ul > li {
  flex: 1; /* Equal width columns */

  border: none;
}

/* The Heading (h4 generated by Walker) */

.mega-title {
  display: none;

  margin: 0 0 10px 0;

  font-size: 16px;

  text-transform: uppercase;

  border-bottom: 2px solid #333;
}

/* The Links inside the columns */

.menu > li > ul > li.mega-menu-parent > ul > li ul {
  /* Reset the sub-menu styles so it is NOT a popup */

  position: static;

  display: block;

  box-shadow: none;

  background: transparent;

  width: max-content;
}

.column-title li {
  margin-bottom: 5px;
}

.menu > li > ul > li.mega-menu-parent > ul > li ul li a {
  padding: 5px 0;

  color: #666;

  border: none;
}

.sub-menu.depth-1 {
  height: 132px;
}

/* Target the new link item within the flex row */

.menu > li > ul > li.mega-menu-parent > ul > li.mega-more-link {
  /* Style to make it look like a feature box or button */

  flex: 0 0 150px; /* Gives it a fixed, smaller width (adjust as needed) */

  padding: 0px;

  text-align: center;

  align-self: flex-end; /* Makes it fill the full height of the row */
}

/* Style the actual link element inside */

.mega-more-link a {
  color: var(
    --primary-color1
  ) !important; /* White text on your primary color */

  font-weight: bold;

  text-decoration: none;

  display: block;

  margin-top: 10px;

  font-size: 14px;
}

/* Remove hover effect from the link itself, if desired */

.mega-more-link a:hover {
  color: var(--primary-color1) !important;
}

/* =========================================

   MOBILE MEDIA QUERY (Max-width: 767.98px)

   ========================================= */

/* menu end  */

.find-btn {
  background-color: var(--primary-color12);

  border-radius: 10px;

  height: 30px;

  width: 200px;
}

.find-btn:hover {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.find-btn span {
  color: white;
}

.install-btn {
  background-color: var(--primary-color1);

  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 200px;
}

.install-btn:hover {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.install-btn span {
  color: white;
  font-size: 12px;
}

/*
herro section

*/

.hero-img {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  height: 480px;
}

.hero-img-tab {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  height: 480px;
}

.hero-mobile {
  height: 575px;

  background-position: center center !important;

  background-repeat: no-repeat !important;

  background-size: cover !important;
  margin-top: -50px;
}

.hero-mobile .ratting {
  padding-top: 230px;
  justify-content: space-evenly !important;
}

.hero-mobile .ratting img {
  width: 100px;
}

.text-hero {
  padding: 66px;
}

.text-hero h2 {
  font-size: 16px;
  font-weight: bold;
}

.text-hero ul li {
  margin-bottom: 10px;
  list-style-type: none;
  font-size: 12px;
  font-weight: 600;
  margin-left: -25px;
}

.hero .text-hero ul li i {
  font-size: 12px;

  padding-right: 8px;

  margin-bottom: 10px;
}

.hero-btn {
  width: 300px;

  height: 40px;

  border-radius: 10px;

  margin-left: 50px;

  background-color: var(--primary-color1);

  border: 0;

  color: white;
}

.find-tire {
  width: 160px;

  height: 30px;

  border-radius: 10px;

  background-color: var(--primary-color1);

  color: white;

  border: unset;

  font-size: 12px;

  padding-block: 3px;
}

.hero .ratting img {
  width: 100px;
  height: auto;
}

/* search tire wheal */
/*.select-size{
    width: 200px;
    padding: 5px 10px 10px 15px;
}*/
/*
search tire7
*/
.select-size {
  max-width: 220px;
}

#size-search-form #vehicle-search-form,
#licence-search-form {
  background-color: var(--primary-color10);
  padding-inline: 5px;
}

#search-tire {
  margin-inline: 66px;
}

#search-tire > div {
  background-color: var(--primery-color17);

  border-radius: 20px;

  margin-top: -40px;

  margin-right: 66px;

  margin-left: 66px;
}

#search-tire a,
#wheal a {
  color: var(--primary-color2);
}

#sidebar {
  width: 80px;
}

#sidebar li a {
  font-family: "open sans";

  font-weight: 600;

  font-size: 16px;
}

#sidebar .nav-item {
  position: relative;
}

#sidebar .nav-item a:before {
  content: "";

  width: 8px;

  height: 30px;

  background-color: var(--primary-color8);

  position: absolute;

  left: 0;

  top: 15%;

  display: none;

  transition: all 0.5s ease;
}

#sidebar .nav-item .active:before {
  display: flex;
}

#content-area {
  padding: 0 30px 0px 30px;

  border-radius: 20px;

  margin: 15px 10px;

  background-color: var(--primary-color10);

  box-shadow:
    5px -4px 20px rgba(0, 0, 0, 0.25),
    0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

#tire .nav-item .nav-link,
#wheal .nav-item .nav-link {
  display: flex;

  justify-content: center;

  align-items: center;
  padding-inline: 0;
  font-size: 12px;
}

#tire .nav-link,
#wheal .nav-link {
  border-radius: 0 0 10px 10px;

  background-color: var(--primary-color3);

  height: 30px;

  width: 200px;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:focus {
  background-image: none !important;

  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);

  background-color: var(--primary-color10) !important;
}

#tire-content .nav-tabs,
#wheal-content .nav-tabs {
  border: 0;
}

.content-section {
  border-color: var(--primary-color10) !important;

  background-color: var(--primary-color10) !important;
}

.tab-content {
  border: 0 !important;

  background-color: var(--primary-color10) !important;

  padding: 0 !important;
}

label,
select {
  font-family: "open sans";

  font-size: 14px;
  background: white;
  font-weight: 400;
  color: var(--primary-color13);
}

select {
  max-width: 100%;
  height: 30px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--primary-color12);
}

select option {
  font-size: 14px;
  font-weight: 400;
  color: var(--primary-color13);
  background-color: var(--primary-color12);
}
.sort select{
  width: 200px;
}
.form-select option:checked,
.form-select option:hover {
  background-color: rgba(80, 80, 90, 0.25);
  color: rgba(80, 80, 80, 1);
  font-size: 12px;
}

select:not(:-internal-list-box) option:disabled {
  font-size: 12px;
  color: rgba(80, 80, 90, 0.5);
}

.form-label,
.form-check-label,
label {
  background-color: var(--primary-color10);
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 130px;
  border-width: 1px;
  border-top: 0px;
  border-radius: 0 0 10px 10px;
  border-color: var(--primary-color2);
  margin-bottom: 10px;
  margin-left: 10px;
}

.select2-container--default
  .select2-search--dropdown
  .select2-search__field:focus,
.select2-container--default
  .select2-search--dropdown
  .select2-search__field:active,
.select2-container--default
  .select2-search--dropdown
  .select2-search__field:hover {
  border: 0 !important;
  border-radius: 5px;
}

.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--primary-color3) !important;
  color: var(--primary-color13);
}

.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--open.select2-container--below .select2-selection--multiple {
  border-width: 1px 1px 0 1px !important;
  border-radius: 10px 10px 0 0 !important;
}

.select2-results__option {
  padding: 2px !important;
  border-top-width: 0;
}

.select2-container.select2-container--open .select2-dropdown--below {
  border: 1px solid var(--primary-color2);
  border-radius: 0 0 20px 20px;
  border-top-width: 0px;
}

.select2-results__option--selectable {
  border-radius: 5px;
}

.select2-container--default.select2-container--disabled
  .select2-selection--single {
  background-color: var(--primary-color17);
}

.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  font-size: 14px;
}

.form-label {
  font-size: 16px;
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 0.3rem;
  color: var(--primary-color13);
  margin-inline: 5px auto;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 25px !important;
  border: 1px solid var(--primary-color2) !important;
  border-radius: 5px !important;
}

.select2-search--dropdown {
  border: 0;
}

.toggle {
  margin-top: 32px;
}

.form-select {
  border: 1px solid var(--primary-color2);

  border-radius: 10px;

  height: 30px;

  width: 300px;

  padding: 2px 5px;
}

.form-check-input:checked {
  background-color: var(--primary-color1);
  border-color: var(--primary-color1);
}
.zipcode{
  border:1px solid var(--primary-color13);
  margin-bottom: 1rem;
border-radius: 10px;


}
.zipcode h3{
  font-weight: 600;
  font-size: 16px;
}
.zipcode p{
  font-size: 14px;
}
.zipcode .zipcode-input{
  border-radius: 10px;
  border: 1px solid var(--primary-color12);
  height: 40px;;
  width: 100%;

}
.zipcode .zipcode-btn{
  background-color: var(--primary-color1);
  color:var(--primary-color10);
height: 40px;
border-radius: 0 10px 10px 0;
border:0;
width: 125px;

}
#moreOptions {
  height: 2px;
  width: 2px;
}

#moreOptions-label {
  color: var(--primary-color1);
}

/*  sliding */
.js-toggle-switch {
  position: relative;
  max-width: 100%;
  width: 100%;
  height: 30px;
}

.toggle-options {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color10);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--primary-color2);
}

.toggle-option {
  flex: 1;
  border: none;
  background: transparent;
  font-weight: 600;
  color: var(--primary-color2);
  cursor: pointer;
  transition: color 0.3s;
  position: relative;
  z-index: 2;
}

.toggle-option.active {
  color: white !important;
  font-weight: 600;
}

#size-search-form {
  background: var(--primary-color10);
  padding-inline: 5px;
}

.toggle-slider {
  position: absolute;
  width: 50%;
  height: 100%;
  background: var(--primary-color1);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.toggle-hidden-input {
  display: none;
}

.row-group.toggle {
  display: flex;
  flex-direction: column;
  background-color: var(--primary-color10);
  margin-top: 36px;
}

/*end*/
#licence {
  max-width: 100%;
  width: 100%;
  border-radius: 10px;

  border: 1px solid var(--primary-color12);
}

#licence:focus,
#licence:hover,
#licence:active {
  border: 1px solid var(--primary-color12);
}

#vehicle-search-form {
  background-color: var(--primary-color10);
}

/* edn sliding */

.submit-v {
  max-width: 100% !important;
  width: 100%;
  border-radius: 10px;

  background-color: var(--primary-color1);

  border: 0;
  color: white;

  height: 30px;

  padding: 2px 5px;

  margin-top: 20px;
}

.submit-l {
  background-color: var(--primary-color12) !important;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
  background-color: var(--primary-color1);
  color: white;
  border: none;
}
.btn.qty-minus:disabled,.btn.qty-plus:disabled{
  background-color: var(--primary-color11);
  color: var(--primary-color12);
}

.submit-v:hover {
  background-color: var(--primary-color1);

  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

#submit-button-new-location {
  margin-top: 5px;
}

.state-img {
  margin-top: 10px;
}

/* parent MUST be relative */
.select-wrapper {
  position: relative;
}

.select-wrapper .field-loader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  z-index: 9999;
}

.select-wrapper .field-loader::after {
  content: "";
  width: 32px;
  height: 32px;
  border: 3px solid #ccc;
  border-top-color: #111;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.select-wrapper .field-loader.actived {
  display: flex !important;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* discount section */

#discount {
  margin-top: 50px;
}

.discount-header {
  padding-bottom: 40px;
}

.view-all {
  height: 30px;

  width: 150px;

  border: 1px solid var(--primary-color12);

  border-radius: 10px;

  color: var(--primary-color12);

  text-align: center;
}

.wpcf7-form-control {
  height: 30px;
  border-radius: 10px;
}

#contactModal .wpcf7-form-control {
  background-color: var(--primary-color3);
  border: 1px solid var(--primary-color2);
}

#contactModal .wpcf7-form .submit-form {
  margin-top: 20px;

  background-color: var(--primary-color12);

  color: white;

  text-align: center;

  width: 100%;

  height: 30px;
  padding-block: 3px;
}

.mobile-contact-trigger .btn {
  width: 280px;

  height: 30px;

  border-radius: 10px;

  background-color: var(--primary-color12);

  border: unset;

  font-weight: 600;

  color: white;

  padding: 3px;
}

.view-all:hover {
  background-color: var(--primary-color1) !important;
  color: white !important;
}

.view-all a {
  width: 100%;
}

.discount {
  column-gap: 26px;
}

.swiper-slide,
.swiper-wrapper {
  box-sizing: border-box;
}

#discountSwiper .swiper-slide {
  /*max-width: 245px!important;*/
  width: 245px !important;
}

.loop-dicount {
  width: 245px;
  /*width: 100%;*/

  height: 300px;

  border-radius: 20px;

  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);

  padding: 0;
}

.loop-dicount .discount-image {
  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

  padding-top: 60%; /* Use padding-top for responsive aspect ratio */

  height: auto;
  border-radius: 20px 20px 0 0;
}

.discount-logo {
  height: 55px;

  width: 150px;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  border-radius: 0 0 10px 10px;

  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);

  background-color: var(--primary-color11);
}

.discount-logo img {
  width: 100%;
}

.discount-tire {
  right: 20px;

  bottom: -10px;

  row-gap: 0;
}

.discount-tire .shadow-img {
  margin-top: -10px;
}

.discount-rate {
  right: 39%;
  bottom: 12%;

  background-color: var(--primary-color10);

  border-radius: 100%;

  width: 46px;

  height: 46px;
}

.discount-rate > div {
  border: 1px solid var(--primary-color1);

  border-radius: 100%;

  margin: 2px;

  width: 42px;

  height: 42px;
}

.discount-rate p {
  margin: 0;

  padding: 0;

  font-family: "open sans";

  font-size: 12px;
}

.discount-rate > div > p:nth-child(2) {
  color: var(--primary-color1);
}

.discount-content {
  margin-top: 40px;

  padding-bottom: 10px;

  padding-left: 20px;
}

.dis-title h2 {
  font-size: 14px;

  font-weight: 500;

  margin-bottom: 0px;
  color: var(--primary-color2);
}

.dis-date span {
  font-size: 10px;

  font-weight: 400;
}

.dis-link {
  color: var(--primary-color1);

  font-family: "open sans";

  font-size: 12px;

  font-weight: 600;

  padding-left: 10px;

  padding-top: 35px;
}

#discountSwiper {
  padding-bottom: 65px;
}

/*.swiper-wrapper{
    width: 100%;
    padding: 0;      make sure no extra padding 
    margin: 0;
    box-sizing: border-box;*/
/*}*/
.pagination-wrapper {
  display: flex;

  justify-content: flex-end;

  align-items: baseline;

  column-gap: 3px;

  width: 100%;

  position: absolute;

  bottom: 24px;

  right: -10px;
}

.swiper-button-next,
.swiper-button-prev {
  height: 30px;

  width: 30px;

  border: 0;

  border-radius: 100%;

  position: relative;

  left: unset;

  right: unset;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 14px;

  color: var(--primary-color12);
}

.swiper-pagination-numbers {
  display: flex;

  align-items: center;

  justify-content: center;

  column-gap: 3px;

  min-width: 0; /* allows shrinking */
}

.swiper-pagination-numbers .first-slide,
.swiper-pagination-numbers .last-slide {
  font-weight: bold;

  white-space: nowrap;
}

.swiper-pagination-numbers .custom-bullets {
  display: flex;
  justify-content: center;
  column-gap: 3px;
  flex-direction: row;
}

.swiper-pagination-numbers .custom-bullet {
  display: flex;
  width: 10px;

  height: 2px;

  border-radius: 0;

  padding-inline: 3px;

  background-color: var(--primary-color9);

  flex-shrink: 1;

  flex-grow: 1; /* bullets stretch evenly */

  max-width: 16px; /* prevents giant bullets */

  transition: background-color 0.3s;
  column-gap: 2px;
}

.swiper-pagination-numbers .custom-bullet.active {
  background-color: var(--primary-color1);

  transform: scale(1.2);
}

.custom-pagination {
  display: flex;

  align-items: center;

  gap: 12px;
}

.pag-current,
.pag-total {
  font-weight: bold;

  font-size: 14px;
}

.pag-bullets {
  display: flex;

  gap: 6px;
}

.mypag-bullet {
  width: 8px;

  height: 8px;

  background: #ccc;

  border-radius: 50%;

  display: block;
}

.mypag-bullet.active {
  background: #000;
}

/* buy pay  */

#buypay {
  margin-top: -80px;

  margin-bottom: 0px;
}

#buypay .pay-left {
  background-color: rgba(217, 217, 217, 0.5);
  padding: 68px 15px 50px 15px;
  margin-top: -63%;
  border-radius: 20px;
  width: 100%;
}

#buypay p {
  font-size: 10px;

  font-weight: 600;

  color: var(--primary-color12);
}

.payment {
  margin-top: 30px;

  margin-bottom: 40px;
}

.pay-icon {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  row-gap: 20px;
  padding-inline: 2px;
}

.pay-icon p {
  font-size: 10px;

  font-weight: 600;

  color: var(--primary-color12);

  text-align: center;
}

.credit-img {
  max-width: 100%;
  height: 380px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
}

@media (min-width: 320px) {
}

.credit-img img {
  width: 100%;
  margin-left: 0%;
  z-index: 2;

  /* Step 2: Pull the image back by 50% of its own width and height */
}

/* best seller */

#bestSellerSwiper {
  padding-bottom: 65px;
}

.image-loop {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);

  border-radius: 20px;
}

#bestSellerSwiper .swiper-slide {
  /*max-width: 125px!important;*/
  width: 175px !important;
}

.product-loop {
  /*max-width: 125px;*/
  width: 175px;
  height: 325px;

  border-radius: 20px;

  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);

  padding: 0;

  background-color: var(--primary-color10);
}

/*@media(min-width:374.98px){
    .product-loop {
        max-width: 210px;
        height: 325px;
    }
}*/
.product-loop .image-loop {
  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

  padding-top: 60%; /* Use padding-top for responsive aspect ratio */

  height: auto;

  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.product-loop .card-body {
  justify-content: space-between;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  padding-top: 25px;
}

.product-loop .product-title {
  font-size: 12px;

  font-weight: 600;

  color: var(--primary-color14);
}

.product-loop .sku {
  font-size: 12px;

  font-weight: 400;

  color: var(--primary-color1);
}

.product-loop .price-product {
  display: flex;

  align-items: center;

  column-gap: 8px;
}

.product-loop del {
  text-decoration: line-through;

  font-size: 12px;

  font-weight: 400;

  text-decoration-color: var(--primary-color1);

  color: var(--primary-color2);
}

.product-loop ins {
  color: var(--primary-color1);

  font-size: 12px;

  font-weight: 400;

  text-decoration: none;
}

.product-loop .add-to-cart {
  width: 150px;

  height: 30px;

  border-radius: 10px;

  background-color: var(--primary-color1);

  color: white;

  font-size: 14px;

  font-weight: 600;

  padding: 4px 5px;

  text-align: center;

  margin-top: 15px;
}

/* tire agent */

#tire-agent {
  margin-top: 40px;
  padding-inline: 0;
}

#tire-agent h2 {
  padding-bottom: 50px;
}

.tire-agent-card {
  background-color: white;

  padding: 25px 45px;

  border-radius: 20px;

  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);

  column-gap: 4rem;
}

.tire-agent {
  position: relative;

  background-color: #d9d9d980;

  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);

  border-radius: 20px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding: 20px 0px 10px 0px;
}

#tire-agent .all-step {
  box-shadow: 0 4px 4px 1px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  padding: 2rem 0rem;
  justify-content: center !important;
}

.step-agent {
  max-width: 340px;
  width: 100%;
}

.step-no {
  position: absolute;

  color: var(--primary-color1);

  font-size: 20px;

  font-weight: 600;

  top: 20px;

  left: 20px;
}

.tire-agent .card-body {
  margin-inline: auto;
}

.tire-agent .card-body h3 {
  text-align: center;

  font-size: 10px;

  font-weight: 600;

  color: var(--primary-color12);
}

.tire-agent .card-body p {
  text-align: center;

  font-size: 16px;

  font-weight: 600;

  color: var(--primary-color7);
}

.modal-header .btn-close {
  border-radius: 100%;
  border: 1px solid var(--primary-color2);
}

#mobile-banner {
  margin-top: 50px;
}

.mobile-install {
  padding: 70px 10px 40px 10px;

  background-color: #d9d9d980;

  border-radius: 20px;
  width: 100%;
  z-index: 1;
  margin-top: -65px;
}

.mobile-blog .bg-image-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.mobile-install > p {
  padding-right: 80px;
}

.pay-icon img {
  width: auto;
  height: 35px;
}

.shop-now {
  height: 30px;

  width: 150px;

  padding: 3px;

  border-radius: 10px;

  color: white;

  text-align: center;

  background-color: var(--primary-color1);

  border: 0;

  font-size: 14px;

  font-weight: 600;
}

.installer:hover,
.shop-now:hover {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.shop-now a,
.installer a {
  width: 100%;
}

.installer:hover {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.row-group {
  display: flex;
  flex-direction: column;
  background-color: var(--primary-color10);
  align-items: center;
}

.select2-container {
  z-index: 9999;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 10px !important;
  color: var(--primary-color13) !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered:hover {
  background-color: var(--primary-color3) !important;
  color: var(--primary-color13) !important;
}

.select2-container .select2-search--inline .select2-search__field {
  border: 1px solid var(--primary-color2) !important;
  border-radius: 10px !important;
}

.select2-container--default .select2-selection--single {
  border-radius: 10px !important;
  border: 1px solid var(--primary-color2) !important;
  height: 30px !important;
}

.form-select option:hover,
select option:hover {
  background-color: red !important;
}

.form-select:focus,
input.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 2px var(--primary-color3) !important;
  border-color: var(--primary-color3);
}

select option:hover {
  background-color: var(--primary-color12);
}

.installer {
  height: 30px;

  width: 150px;

  padding: 3px;

  border-radius: 10px;

  color: var(--primary-color12);

  text-align: center;

  background-color: transparent;

  border: 1px solid var(--primary-color2);

  font-size: 14px;

  font-weight: 600;
}

.tires-img {
  max-width: 100%;

  height: auto;

  width: 100%;

  z-index: 10;

  margin-right: -19%;
}

.tire-agent-img img {
  width: 35px;
  height: 35px;
}

.tires-img img {
  width: 100%;

  object-fit: cover;
}

/* contact us */

#contactUs {
  margin-top: 50px;
  padding: 0;
}

/* .contact {

  background-color: var(--primary-color3);



} */

.contact-text {
  background-color: var(--primary-color3);
  border-radius: 20px;
  padding: 20px 15px;
}

.header-contact h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 19px;
  text-align: center;
}

.contacts {
  width: 100%;
}

.contacts > div.col-6 {
  display: flex;

  flex-direction: column;
}

.worktime {
  padding: 0px;
  margin-top: -28px;
  margin-left: 10px;
}

.worktime p {
  margin-bottom: 3px;

  color: var(--primary-color1);

  font-weight: 600;

  font-size: 10px;
}

.tel {
  color: var(--primary-color12);

  margin-bottom: 15px;

  font-size: 20px;
  display: flex;
  justify-content: flex-start;
  column-gap: 3px;
  font-weight: 600;
  align-items: center;
}

.tel i {
  background-color: var(--primary-color2);

  color: white;

  padding: 10px 5px;

  border-radius: 100%;

  width: 40px;

  height: 40px;

  text-align: center;

  vertical-align: middle;

  margin-right: 10px;

  font-size: 18px;
}

.email {
  color: var(--primary-color1);

  font-size: 20px;
  column-gap: 3px;
  font-weight: 600;
}

.email i {
  background-color: var(--primary-color1);

  color: white;

  padding: 10px 5px;

  border-radius: 100%;

  width: 40px;

  height: 40px;

  text-align: center;

  vertical-align: middle;

  margin-right: 10px;

  font-size: 18px;
}

.form-contact {
  margin-top: 15px;
}

.form-contact p {
  font-size: 18px;

  font-weight: 600;
}

.form-contact .form-control {
  border: 1px solid var(--primary-color2);

  border-radius: 10px;

  background: var(--primary-color3);

  margin-bottom: 15px;

  height: 30px;
}

.form-contact .submit-form {
  border-radius: 10px;
  margin-top: 20px;

  background-color: var(--primary-color2);

  color: white;

  text-align: center;

  width: 100%;

  height: 40px;
}

.contact-img {
  margin-left: 0px;
  margin-right: 0;
  margin-top: -10px;
  z-index: 10;
}

.contact-img img {
  width: 100%;

  height: auto;

  object-fit: cover;
  margin-top: -5%;
}

.form-contact-wrapper {
  display: block;
  margin-inline: auto;
}

/* banner road */

#roadBanner {
  margin-top: 50px;
}

.banner {
  margin-top: -25px;
  background-color: var(--primary-color3);

  border-radius: 20px;

  padding: 70px 30px 30px 30px;
  width: 100%;
}

.banner h2 {
  margin-bottom: 30px;
}

.banner p {
  font-size: 12px;

  font-weight: 600;

  color: var(--primary-color12);
}

.banner .title-red {
  color: var(--primary-color8);

  font-size: 12px;

  font-weight: 600;
}

.banner ul {
  list-style-type: none;
  margin-bottom: 25px;
  margin-left: -25px;
}

.banner ul li {
  margin-bottom: 10px;
}

.banner ul li:before {
  /* content: '✓'; */

  content: "\2713\0020";
}

.road-img {
  margin-left: 0px;

  max-width: 570px;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.road-img img {
  width: 100%;

  object-fit: cover;

  height: auto;

  margin-top: 0px;

  border-radius: 20px;
}

#contactModal .modal-content {
  background: #cecece;
}

/* copratner */

#copratner {
  margin-top: 50px;

  margin-bottom: 50px;
}

#copratner > div {
  box-shadow: 0px 4px 4px -3px rgba(0, 0, 0, 0.25);
  padding: 25px 0;
  background: #ffffff80;
}

#copartnerSwiper .swiper-slide {
  max-width: 166px;
  width: 166px;
  height: 60px;

  border-radius: 20px;
}

#copartnerSwiper .swiper-slide img {
  max-width: 166px;
  width: 100%;
}

#copratner .hr {
  width: 100%;

  height: 1px;

  background-color: var(--primary-color3);

  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);

  margin-top: 20px;
}

/* FAq */

#faq {
  margin-top: 50px;
}

#faq .faq-title {
  padding-bottom: 40px;
}

.accordion-item {
  margin-bottom: 8px;

  border-radius: 10px;
}

.accordion-header {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.accordion-header .accordion-button {
  padding: 6px 10px;

  background-color: var(--primary-color7);

  border-radius: 10px 10px 0 0;

  color: var(--primary-color11);

  font-size: 18px;

  font-weight: 600;
}

.accordion-item:first-of-type > .accordion-header .accordion-button {
  border-radius: 10px 10px 0 0;
}

.accordion-body {
  background-color: var(--primary-color15);

  color: #332f46;

  font-size: 18px;

  font-weight: 600;

  border-radius: 0 0 10px 10px;
}

.accordion-button:not(.collapsed) {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);

  border-radius: 10px;
}

.accordion-collapse {
  border-radius: 0 0 10px 10px;
}

.accordion-button.collapsed::after {
  filter: brightness(0) invert(1);
}

.accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}

#blog {
  margin-top: 50px;
}

#blog > div > div {
  margin-top: 0px;
}

.latest-blog {
  position: relative;

  height: 520px;

  max-width: 630px;
}

.latest-blog img {
  width: 100%;

  height: auto;
  display: block;
}

.latest-blog .img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  border-radius: 20px;
  transition: background 0.3s ease;
  pointer-events: none;
}

.first-content {
  position: absolute;

  bottom: 30px;

  left: 0;

  background-color: #09061980;
}

.first-content .date {
  color: var(--primary-color11);

  font-size: 1rem;

  font-weight: 600;

  margin-bottom: 0;
}

.first-content .h4 a {
  font-size: 1.25rem;

  font-weight: 600;

  color: white;
}

.first-content .first-excerpt {
  color: white;

  font-size: 0.875em;

  font-weight: 600;

  padding-right: 50px;
}

img.bg-image {
  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 1;

  border-radius: 20px;
}

.latest-blog .blog-content {
  position: absolute;

  background-color: rgba(0, 0, 0, 0.5);

  z-index: 2;

  top: auto;

  bottom: 50px;

  padding: 20px 100px 20px 40px;
}

.blog-content .date {
  color: white;

  font-size: 14px;

  font-weight: 600;

  margin-bottom: 0;
}

.blog-content h3 a {
  color: white;

  font-size: 20px;

  font-weight: 600;
}

.blog-content .excerpt {
  font-size: 14px;

  font-weight: 600;

  color: white;
}

.small-blog {
  flex-direction: row;

  flex-wrap: nowrap;

  column-gap: 0px;

  row-gap: 20px;

  justify-content: flex-start;

  border: 2px solid #e9e9e9;

  border-radius: 10px;
}

.small-blog .col-4 {
  padding-left: 0;

  border-radius: 10px 0 0 10px;
}

.small-blog .img-s {
  width: 180px;
}

.small-blog .col-8 {
  align-self: center;
}

.small-blog img {
  width: 160px;

  height: 160px;

  border-radius: 10px 0 0 10px;
}

.blog-content-small {
  padding-right: 50px;
}

.small-blog .date {
  font-size: 14px;

  color: var(--primary-color12);

  font-weight: 600;

  margin-bottom: 0;
}

.small-blog h3 a {
  font-size: 16px;

  color: var(--primary-color1);

  font-weight: 600;
}

.small-blog .excerpt {
  font-size: 14px;

  color: var(--primary-color12);

  font-weight: 600;
}

.mobile-blog .mobile-blog-data,
.mobile-blog .excerpt {
  font-size: 10px;
  font-weight: 600;
}

/* list icon text */

#list-icon {
  margin-top: 0px;

  padding-block: 50px;

  margin-bottom: 50px;
}

#list-icon .icon {
  display: flex;

  justify-content: center;

  align-items: center;

  row-gap: 25px;
  flex-direction: column-reverse;
}

/* footer */

.go-top {
  height: 50px;

  background-color: var(--primary-color3);

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;
}

.go-top a {
  display: block;
  width: 40px;
  height: 40px;
  background: var(--primary-color12);

  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
}

.all-link {
  padding: 40px 66px;
}

.contact-link a {
  color: var(--primary-color2);

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 8px;
}

.contact-link a img {
  padding-right: 15px;

  width: 35px;

  height: 35px;
}

.social-links img {
  width: 35px;

  height: 35px;
}

.subscrip {
  margin-top: 0px;
}

.news {
  display: flex;

  justify-content: flex-start;

  align-items: baseline;
}

.news .wpcf7-email {
  margin-top: 15px;

  height: 36px;

  border-radius: 10px;

  padding-left: 10px;

  border-color: var(--primary-color12);
}

.news .submit-btn {
  z-index: 1;

  margin-left: -92px;

  position: relative;
}

.news .submit-btn p {
  display: flex;

  flex-direction: column;

  justify-content: end;

  align-items: center;
}

.news .wpcf7-submit {
  border-radius: 0 10px 10px 0;

  width: 92px;

  height: 38px;

  background-color: var(--primary-color1);

  color: white;

  border: 0;
}

.logo {
  row-gap: 40px;
}

.all-link .seperator {
  width: 2px;

  height: 80%;

  background-color: var(--primary-color3);

  display: block;

  right: 0;

  top: 40px;
}

.all-link .space {
  position: absolute;

  width: 2px;

  height: 100%;

  background-color: var(--primary-color3);

  right: 0;

  top: 0px;
}

.all-link .menus {
  display: flex;

  flex-direction: row;

  justify-content: space-evenly;

  align-items: center;

  flex-wrap: nowrap;

  /* column-gap: 30px; */

  border-left: 2px solid var(--primary-color3);

  border-right: 2px solid var(--primary-color3);
}

.all-link .menus ul {
  list-style-type: none;
}

.all-link .menus h4 {
  display: none;
}

.all-link .menus li {
  padding-bottom: 5px;
}

.all-link .menus li a {
  color: var(--primary-color12);

  font-size: 14px;

  font-weight: 600;

  margin-bottom: 15px;
}

.footer-widget .menu {
  display: flex;

  justify-content: flex-start;

  align-items: flex-start;

  list-style: none;

  padding: 0;

  margin: 0;

  background: #fff;

  position: relative;

  flex-direction: column;
}

.trust-logo img {
  width: 110px;

  height: 50px;
}

.copy-write {
  margin-top: 30px;
  height: 50px;

  background-color: var(--primary-color2);

  color: white;

  display: flex;
  align-items: center;
  justify-content: center;
}

.copy-write p {
  font-size: 12px;
}

.social-links {
  display: flex;
  justify-content: flex-start;
  margin-top: 1rem;
  column-gap: 10px;
}

.bestSeller-slider-container {
  padding: 0 !important;
}

.modal-body {
  padding: 10px;
}

.news label {
  background: white;
  font-size: 12px;
}

.modal-body .nav-tabs {
  display: flex;
  justify-content: center;
  column-gap: 3px;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
  z-index: 2;
  background-color: var(--primary-color10);
}

.modal-fullscreen-sm-down .modal-body {
  background-color: var(--primary-color10);
}

.footer-title {
  display: none !important;
}

.wpcf7-form-control.wpcf7-textarea {
  height: 150px !important;
}

.mobile-blogs {
  column-gap: 8px;
  flex-direction: row;
  flex-wrap: nowrap;
}

.mobile-blog {
  padding-inline: 0;

  border: 1px solid var(--primary-color11);
  background-color: var(--primary-color3);

  border-radius: 20px;
}

.mobile-blog:hover {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.mobile-blog .h6 a {
  color: var(--primary-color1);

  font-size: 0.75rem;
}

.mobile-blog .blog-m-img {
  position: relative;
}

.mobile-blog .overlay-img {
  display: none;
}

.mobile-blog:hover .blog-m-img .overlay-img {
  background: #ffffff80;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  font-size: 12px;
}

.mobile-blog .mobile-blog-content {
  padding-inline: 6px;
}

#bestSeller {
  margin-top: 50px;
}

/*
categories

*/
#sidebar-category {
  background: var(--primary-color3);
  border-radius: 20px;
}

#sidebar-category a {
  color: var(--primary-color2);
}

#tire-content-category {
  background: var(--primary-color10);
}
#tire-content-category .tab-pane {
  min-height: 210px;
}
#tire-category-tire {
  border-bottom: 1px solid var(--primary-color2);
}

#tire-category-tire .nav-link {
  color: var(--primary-color12);
  font-size: 12px;
  font-weight: 600;

  position: relative;
  transition: all 0.3s ease;
}

#tire-category-tire .nav-link::after {
  content: "";
  width: 0;
  height: 2px;
  background: var(--primary-color2);
  position: absolute;
  bottom: -3px;
  left: 12px;
}

#tire-content-category .nav-tabs .nav-link {
  border-top: unset;
  border-left: unset;
  border-right: unset;
}

#tire-content-category .nav-tabs .nav-link.active,
#tire-content-category .nav-tabs .nav-link.active:focus,
#tire-content-category .nav-tabs .nav-link.active:hover {
  font-size: 14px;
  font-weight: bold;
  box-shadow: none;
}

#tire-category-tire .nav-item.show .nav-link,
#tire-category-tire .nav-link.active {
  border-bottom-color: var(--primary-color2);
}

#tire-category-tire .nav-link:hover::after {
  width: 80%;
}

#tire-category-tire .nav-link.active::after {
  width: 80%;
  bottom: 0;
}

#tire .nav-link {
  width: 85px;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: 33% !important;
  margin: 0 0 2.992em 0;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product .product-item {
  padding: 0 5px;
}

.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.product-btns {
  top: 15px;
  left: -15px;
}

.best-deal {
  background: var(--primary-color5);
  height: 30px;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  padding: 4px;
  color: var(--primary-color15);
}

.best-deal:hover {
  color: var(--primary-color15);
  background: var(--primary-color5);
}

.clearance {
  font-weight: 600;
  font-size: 14px;
  padding: 4px 3px;
  height: 30px;
  width: 100%;
}

.fa-star {
  font-size: 12px;
}

.product-image {
  height: 215px;
  max-width: 185px;
  width: 100%;
  object-fit: cover;
  margin: auto;
}

.brand-logo img {
  height: 20px;
}

.product-title {
  height: 50px;
}

.product-title a {
  font-size: 14px;
  color: var(--primary-color2);
  line-height: 1.7em;
  font-weight: 800;
}

.stock {
  font-size: 12px;
  color: var(--primary-color5);
  font-weight: 600;
}

.attribut-icon {
  border-bottom: 1px solid var(--primary-color9);
  border-top: 1px solid var(--primary-color9);
  padding-bottom: 6px;
  padding-top: 6px;
}

.attr-season {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  column-gap: 5px;
  text-align: center;
}

.attr-season p {
  font-size: 10px;
  font-weight: 400;
  color: var(--primary-color13);
  margin: 0;
}

.attr-season img {
  max-width: 20px;
  height: 18px;
  width: 100%;
}

.per-tire {
  font-size: 12px;
  font-weight: 400;
  color: var(--primary-color7);
  margin-bottom: 10px;
  margin-left: 5px;
}

.price-text .price {
  display: flex;
  flex-direction: column-reverse;
}

.free-shipping {
  color: var(--primary-color7);
}
#search-form .input-group {
  width: 100% !important;
}
.input-group {
  width: 120px;
  height: 30px;
  border: 1px solid var(--primary-color9);
  border-radius: 10px;
}

.qty-minus {
  height: 30px;
  padding-bottom: 3px;
  padding-top: 3px;
  border: none;
}

.qty-plus {
  height: 30px;
  padding-bottom: 3px;
  padding-top: 3px;
  border: none;
}

.quantity {
  border: none;
  height: 26px;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  margin: 0;
  padding-top: 3px;
  padding-bottom: 3px;
}
/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.add-to-cart-btn {
  width: 170px !important;
  height: 30px !important;
  border-radius: 10px;
  background: var(--primary-color1);
  color: var(--primary-color15);
  padding: 4px;
  border-color: var(--primary-color1);
}

.add-to-cart-btn:hover {
  background: var(--primary-color1);
}
.zip-code a {
  color: var(--primary-color7);
  font-size: 14px;
  margin-bottom: 5px;
}
.zip-code img {
  width: 25px !important;
  height: 18px !important;
}

#view-list .product-item {
  padding-top: 15px;
}
#view-list li.product {
  display: flex;
  flex-direction: column;
  width: 100% !important;
}
#view-list .clearance,
#view-list .best-deal {
  width: 90%;
}
#view-grid {
  display: flex;
  flex-direction: row;
}

.product-specifications .spec-list {
  column-count: 3;
  column-gap: 20px;
}

.product-specifications .spec-list li {
  break-inside: avoid;
}
.spec-list li .attr-tilte {
  font-size: 12px;
  font-weight: 600;
}
.spec-list li .attr-value {
  font-size: 12px;
  font-weight: 400;
}
.attribut-icon .attr-season img {
  object-fit: cover;
}
.spec-list:before {
  content: none !important;
  display: none !important;
}
.specs-toggle i {
  transition: transform 0.2s ease;
  font-size: 12px;
}

.specs-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.price-filter input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
}

.price-filter input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
}

#product-filters .accordion-header .accordion-button {
  background-color: #fff;
  color: var(--primary-color7);
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}
#product-filter .form-switch {
  padding-left: 0;
}
#product-filters .accordion-item {
  background-color: #fff;
  color: var(--primary-color7);
  border: none;
  border-radius: none;
  margin-bottom: 0;
}
#product-filters .accordion-body,
#product-filters .accordion-body ul label {
  background-color: #fff;
}

#product-filters .accordion-header {
  box-shadow: none;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid var(--primary-color3);
  border-bottom: 1px solid var(--primary-color3);
}
#product-filters .accordion-button:not(.collapsed)::after,
#product-filters .accordion-button.collapsed::after {
  filter: none;
  width: 14px;
  height: 14px;
  background-size: 14px;
}
#product-filters .form-label {
  background-color: #fff;
}

#product-filters ul label {
  margin-bottom: 5px;
  color: var(--primary-color7);
  display: flex;
  column-gap: 4px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}
#product-filters .filter-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#active-filters-list .badge {
  font-weight: 500;
  border-radius: 20px;
  padding-left: 12px;
}

#active-filters-container {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}
.filter-section label {
  background-color: #fff;
  padding-left: 12px;
}

.filter-section span {
  background-color: #fff;
}

.view-wrapper {
  border: 1px solid var(--primary-color13);
}
.view-toggle {
  padding: 3px 5px;
}
.view-toggle.active {
  background-color: var(--primary-color3);
  transition: all 0.3s ease-out;
}
.view-options{
  padding-left: 12px;
}
#on_sale_filter,
#on_discounted {
  width: 40px;
  height: 20px;
  border-radius: 10px;
}
.form-check-input:checked {
  background-color: var(--primary-color12);
}
#active-filters-container {
  background-color: #fff;
}
#active-filters-list span.badge {
  background-color: #fff !important;
  border: 1px solid var(--primary-color12);
  color: var(--primary-color12);
}

.checkbox-control {
  width: 19px;
  height: 19px;
  border-radius: 5px;
}
#loadindex-search{
  height: 20px;
  border-radius: 5px;
}
.workhoure-contact{
  border: 1px solid var(--primary-color9);
  padding: 20px;
  border-radius: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
}
.workhoure h3{
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-color12);
 text-align: left;
}
.workhoure p{
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-color7);
 text-align: left;
}
.callto{
  background-color:var(--primary-color1);
  width: 160px;
  height: 30px;
  border-radius: 10px;
  color:#fff;
  border: none;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  padding: 3px 20px;
}
.send-email{
  height: 30px;
  width: 160px;
  border-radius: 10px;
  border: 1px solid var(--primary-color9);
  color: var(--primary-color12);
  margin-top: 20px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
 padding: 3px 25px;
}











/* responsive area */
@media (min-width: 325px) and (max-width: 424.98px) {
  #buypay .pay-left {
    margin-top: -42%;
  }
}

@media (min-width: 425px) and (max-width: 480px) {
  #buypay .pay-left {
    margin-top: -32%;
  }

  .hero-mobile {
    height: 575px;
  }

  #buypay {
    margin-top: -50px;
  }
}

@media (max-width: 575.98px) {
  .card.tire-agent {
    width: 100%;

    background-color: unset;

    box-shadow: unset;

    border: unset;

    border-radius: 0;
  }

  .tire-agent .card-body {
    padding-inline: 0.25rem;
  }

  .text-hero {
    padding: 20px 30px 10px 20px;
  }

  .text-hero h1 {
    font-size: 14px;

    font-weight: bold;
  }

  .hero .text-hero ul li {
    font-size: 12px;

    font-weight: 600;
  }

  .find-btn {
    height: 30px;

    width: 150px;

    border-radius: 10px;

    background-color: var(--primary-color1);

    border: 0;

    color: white;

    margin-left: 4px;
  }

  .view-all {
    width: 100px;

    font-size: 12px;

    padding-block: 4px;

    font-weight: 600;
  }

  .discount-logo {
    left: 50%;
    transform: translateX(-50%);
  }

  #list-icon {
    padding-inline: var(--padding-small);
  }

  .icon p {
    font-size: 14px;
  }

  .icon img {
    height: 52px;
  }

  .small-blog-m img {
    width: 163px;

    height: 120px;

    object-fit: cover;
  }

  .small-blog-m {
    margin-top: 20px;
  }

  .small-blog {
    width: 163px;

    display: flex;

    flex-direction: column !important;

    border-radius: 20px;

    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  }

  .blog-content-m {
    width: 100%;

    padding: 3px;
  }

  .blog-content-m .date-m {
    margin-top: 10px;
  }

  .blog-content-m h3 a {
    font-size: 14px;

    font-weight: 600;

    color: var(--primary-color1);
  }

  .blog-content-m p {
    font-size: 10px;

    font-weight: 600;
  }

  .px-sm-66 {
    padding-inline: 0.5rem;
  }

  .contact-text .tel span,
  .contact-text .email span {
    font-size: 12px;

    font-weight: 600;
  }

  .contact-text i {
    width: 35px;

    height: 35px;
  }

  .credit-logo img {
    width: 68px;

    height: 100%;
  }

  .mobile-btn .view-all {
    width: 120px;
  }

  .all-link {
    padding: 40px 12px;
  }

  .news .wpcf7-email {
    width: 280px;
  }

  .trust-logo img {
    width: 85px;

    height: auto;
  }

  .tagline {
    font-size: 12px;
  }

  .find-btn span {
    font-size: 12px;
  }

  .install-btn {
    width: 160px;

    margin-right: 4px;
  }

  .header-mobile img.user,
  .header-mobile img.basket {
    width: 30px;

    height: 30px;
  }

  .btn.add-to-cart {
    font-size: 12px;
  }

  #tire-agent {
    margin-top: 0px;
  }

  .tires-img {
    margin-right: 0;
  }

  .tires-img img {
    height: auto;
  }

  .mobile-install > p {
    padding-right: 10px;

    display: none;
  }

  .email {
    display: flex;

    align-items: center;
    column-gap: 3px;
    margin-top: 8px;
    justify-content: flex-start;
  }

  .title-h2 {
    font-size: 14px;

    font-weight: 600;
  }

  .accordion-item:first-of-type > .accordion-header .accordion-button,
  .accordion-header .accordion-button {
    font-size: 12px;
  }

  .accordion-body {
    font-size: 12px;
  }

  .tire-agent-card {
    column-gap: 0;
  }

  .payment {
    margin-top: 20px;

    margin-bottom: 20px;
  }

  .banner h2 {
    font-size: 14px;

    font-weight: 600;
  }

  .tel i,
  .email i {
    width: 30px;

    height: 30px;

    padding: 7px 5px;
  }

  .menu > li {
    padding-right: 12px;
  }

  .menu > li > a {
    font-size: 14px;
  }

  .mobile-menu-list,
  .mobile-menu-list ul,
  .mobile-menu-list li {
    /* CRITICAL: Overrides position: absolute/relative from desktop */

    position: static !important;

    /* CRITICAL: Overrides display: flex/grid from desktop */

    display: block !important;

    width: 100% !important;

    padding: 0;

    margin: 0;

    list-style: none;

    flex-direction: column !important;
  }

  /* Target the main navigation container within the Offcanvas body */
  .mobile-main-menu {
    padding: 0;
  }

  /* ===================================================

       2. LIST ITEM STYLING (Borders & Padding)

       =================================================== */
  .mobile-menu-list > li {
    border-top: 1px solid #ddd;
  }

  /* Ensure the link takes up the full width and has padding */
  .mobile-menu-list a {
    display: block;

    padding: 15px 20px;

    text-decoration: none;

    color: var(--primary-color2);

    font-weight: 600;
    position: relative; /* Anchor for the + / - icon */
  }

  /* Sub-menu styling (Level 2, 3) */
  .mobile-menu-list ul {
    /* Controlled by JS slideUp/slideDown */

    display: none;

    background-color: #fff;

    padding: 0;

    margin-left: 10px; /* Optional: Indent sub-menus */
  }

  /* Style links inside sub-menus */
  .mobile-menu-list ul a {
    padding: 10px 20px 10px 30px; /* More padding on the left */

    font-size: 14px;

    font-weight: normal;

    border-top: 1px solid #eee;
  }

  /* ===================================================

       3. ACCORDION ICON (+ / -) STYLING

       =================================================== */
  /* Target the link of any item that has a sub-menu */
  .mobile-menu-list li.menu-item-has-children > a {
    padding-right: 40px; /* Make space for the icon */
  }

  /* Create the plus icon */
  .mobile-menu-list li.menu-item-has-children > a::after {
    content: "+";

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 1.2em;

    line-height: 1;

    color: var(--primary-color2);

    transition: transform 0.3s;
  }

  /* Change the icon to a minus when the menu is active/open */
  .mobile-menu-list li.active > a::after {
    content: "-";
  }

  /* If you want the bottom item to have a border too */
  .mobile-menu-list li:last-child {
    border-bottom: 1px solid #ddd;
  }

  .menu > li:hover > a::after {
    display: none;

    transition: all 0.5s ease;
  }

  #tire-agent h2 {
    padding-bottom: 20px;
  }

  #roadBanner {
    margin-top: 50px;
  }

  #faq {
    margin-top: 0;
  }

  #bestSeller {
    margin-top: 40px;
  }

  .all-link .menus {
    border: none;
    margin-bottom: 25px;
  }

  .menus .footer-title {
    display: none;
  }

  .social-links {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }

  #search-tire > div {
    margin-left: 0;
    margin-right: 0;
    background-color: white;
    margin-top: 0;
  }

  #content-area {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
  }

  #wheal .nav-link {
    width: 110px;
    height: 40px;
  }

  .content-section {
    background-color: white !important;
  }

  .tab-content {
    background-color: white !important;
  }

  .modal-fullscreen-sm-down .modal-content {
    border-radius: 20px;
  }

  #tire .nav-link.navlink-3,
  #wheal .nav-link.navlink-3 {
    width: 135px;
  }
}

@media (min-width: 576px) {
  .find-btn span,
  .install-btn span {
    font-size: 14px;
  }

  #buypay {
    margin-top: 40px;
  }

  /*    .loop-dicount{
            width: 220px;
            height: 302px;
        }*/
  .tire-agent-card {
    column-gap: 3rem;
  }
}

@media (min-width: 576px) and (max-width: 768px) {
  .hero-img-tab .text-hero {
    padding: 90px 26px;
  }

  .hero-img-tab .text-hero .hero-btn {
    margin-top: 60px;
    margin-left: 20px;
  }

  .ratting {
    margin-top: -125px;
  }

  #buypay .pay-left {
    margin-top: -4%;
  }

  .credit-img {
    margin-inline: auto;
  }

  .tire-agent-card {
    column-gap: 1rem;
  }

  .tire-agent .card-body p {
    font-size: 12px;
  }

  .tires-img {
    margin-right: 0;
  }

  .pay-icon p {
    font-size: 12px;
  }

  .pay-icon img {
    height: 42px;
  }

  .shop-now,
  .view-all {
    width: 180px;
  }

  .contact-img {
    margin-top: 0px;
  }

  .contact-text {
    margin-top: -20px;
    padding-top: 35px;
  }

  .header-contact h3 {
    font-size: 20px;
  }

  .tire-agent .card-body h3 {
    font-size: 14px;
  }

  .small-blog img {
    height: 130px;
  }

  .first-content {
    width: 100%;
    bottom: 250px;
  }

  .first-content .first-excerpt {
    display: none;
  }

  .ratting img {
    width: 120px;
  }

  .all-link-mobile .menus {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .header-nav-desktop,
  .header-desktop,
  .header-top {
    padding-right: 15px;
    padding-left: 15px;
  }

  #moreOptions-label,
  .form-check-label {
    font-size: 12px;
  }

  .header-top {
    justify-content: center;
  }

  .tagline {
    font-size: 14px;
  }

  .header-top a.track {
    font-size: 14px;
    text-align: center !important;
  }

  .find-btn,
  .install-btn {
    width: 135px;
  }

  .find-btn span,
  .install-btn span {
    font-size: 12px;
  }

  #search-tire > div {
    margin-top: -25px;
    margin-right: 25px;
    margin-left: 25px;
  }

  #sidebar {
    width: 75px;
  }

  #content-area {
    margin: 15px 0;
    padding: 0 15px;
  }

  #tire-content .nav-tabs,
  #wheal-content .nav-tabs {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  #tire .nav-link,
  #wheal .nav-link {
    width: 180px;
    font-size: 14px;
  }

  select {
    width: 100%;
  }

  .form-label {
    font-size: 12px;
  }

  .select2-container--default
    .select2-selection--single
    .select2-selection__placeholder {
    font-size: 12px;
  }

  .toggle-option {
    font-size: 12px;
  }

  .submit-v {
    width: 100% !important;
  }

  #moreOptions-label,
  .form-check-label {
    font-size: 12px;
  }

  .all-link {
    padding: 40px 20px;
  }

  .social-links img {
    width: 35px;
  }

  .contact-link a {
    font-size: 12px;
  }

  .subscrip {
    margin-top: 0px;
  }

  .credit-img {
    margin-inline: auto;
    max-width: 100%;
  }

  #buypay .pay-left {
    padding: 60px 30px 50px 30px;
    margin-top: 1%;
  }

  .hero-img-tab {
    height: 300px;
  }

  .hero-img-tab .text-hero {
    padding: 25px 25px 15px;
  }

  .title-section {
    font-size: 20px;
  }

  #buypay p {
    font-size: 16px;
  }

  .pay-icon img {
    height: 55px;
  }

  #bestSellerSwiper .swiper-slide {
    /*max-width: 150px!important;*/
    width: 175px !important;
  }

  .product-loop {
    /*max-width: 150px;*/
    width: 175px;
    height: 325px;
  }

  .step-agent {
    width: 200px;
  }

  #tire-agent {
    margin-top: 10px;
  }

  .step-no {
    left: 50px;
  }

  .tire-agent-img img {
    width: 50px;
    height: 50px;
  }

  .pay-icon p {
    font-size: 14px;
  }

  #contactUs {
    margin-top: 70px;
    padding: 0;
  }

  .contact-text {
    padding: 25px 30px;
  }

  .banner p {
    font-size: 16px;
  }

  .banner ul li {
    font-size: 16px;
  }

  .road-img {
    max-width: 100%;
  }

  .small-blog > div {
    padding-left: 0;
  }

  #extra-fields {
    row-gap: 0 !important;
  }

  #searchTireBtn {
    margin-top: 35px;
  }

  #tire .nav-item .nav-link,
  #wheal .nav-item .nav-link {
    font-size: 14px;
  }

  .hero-img-tab .text-hero .hero-btn {
    margin-top: 0px;
    margin-left: 15px;
  }

  .main-wrapper {
    margin-left: 25px;
    margin-right: 25px;
  }

  .input-group {
    align-items: center;
    justify-content: center;
  }

  #search-desktop {
    /* max-width: 200px; */
  }

  .submit-search {
    width: 75px;
  }

  .latest-blog {
    height: 365px;
  }

  .small-blog img {
    height: 115px;
  }

  .first-content {
    bottom: 30px;
  }

  .js-toggle-switch,
  #licence {
    width: 100%;
  }

  .licence-label {
    font-size: 12px;
  }

  .vehicle-img {
    margin: 25px auto;
  }

  .vehicle-img img {
    width: 100%;
    height: auto;
  }

  .tire-agent {
    height: 155px;
  }

  .copy-write p {
    font-size: 14px;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .contack-link {
    display: none;
  }

  .subscrip {
    margin-top: 10px;
  }

  .logo {
    row-gap: 50px !important;
    margin-top: 25px;
  }

  .tire-agent .card-body h3 {
    font-size: 16px;
  }

  .tires-img {
    margin-right: 0;
  }
}

@media (min-width: 992px) {
  #buypay .buypay-bg {
    background-image: url("../images/buypay.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 25px;
  }

  #buypay .pay-left {
    background: none;
  }

  .contactUs-bg {
    background-image: url("../images/contactusd.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 25px;
  }

  .contact-text {
    background: none;
  }

  .mobile-banner-bg {
    background-image: url("../images/mobileinstall.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 25px;
  }

  .road-bg {
    background-image: url("../images/road.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 25px;
  }

  .banner {
    background: none;
  }

  .licence-label {
    font-size: 14px;
  }

  .form-label {
    font-size: 14px;
  }

  .toggle-option {
    font-size: 14px;
  }

  .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    font-size: 14px;
  }

  #buypay {
    margin-top: 10px;
  }

  #tire-content .nav-tabs,
  #wheal-content .nav-tabs {
    justify-content: flex-start !important;
  }

  #search-desktop {
    /* max-width: 325px; */
  }

  .hero-img {
    height: 330px;
  }

  .text-hero {
    padding: 25px 38px;
  }

  .hero-img .ratting {
    margin-top: 215px;
  }

  #buypay .pay-left {
    margin-top: 0;
    padding: 30px 50% 30px 25px;
  }

  .header-nav-desktop,
  .header-desktop,
  .header-top {
    padding-left: 50px;
    padding-right: 50px;
  }

  #search-form > div {
    justify-content: center;
    position: relative;
  }
  #search-form btn {
    position: absolute;
    right: 0;
  }
  .header-btn {
    justify-content: flex-end;
  }

  .find-btn,
  .install-btn {
    width: 180px;
  }

  #search-tire > div {
    margin-top: -25px;
    margin-right: 50px;
    margin-left: 50px;
  }

  .submit-v {
    margin-top: 30px;
  }

  .vehicle-img img {
    width: 70%;
    height: auto;
  }

  .main-wrapper {
    margin-left: 50px;
    margin-right: 50px;
  }

  .credit-img {
    margin-left: -10%;
  }

  #buypay p {
    font-size: 14px;
  }

  .pay-icon img {
    height: 50px;
  }

  .credit-logo img {
    width: 90px;
    height: auto;
  }

  .step-agent {
    width: 100%;
    height: 185px;
  }

  .tire-agent .card-body p {
    font-size: 14px;
  }

  .tire-agent .card-body h3 {
    font-size: 18px;
  }

  .tire-agent {
    height: 185px;
  }

  .tire-agent-card {
    column-gap: 2rem;
  }

  #tire-agent .all-step {
    padding: 2rem 1rem;
  }

  .step-no {
    left: 87px;
  }

  .tires-img {
    max-width: 470px;
    margin-right: -17%;
  }

  .mobile-install {
    padding: 30px 25px 40px 60%;
    margin-top: 0;
    background: none;
  }

  .pay-icon img {
    height: 41px;
  }

  .mobile-install > p {
    padding-right: 20px;
    font-size: 14px;
  }

  .pay-icon p {
    font-size: 12px;
  }

  .title-section {
    font-size: 18px;
  }

  .tel,
  .email {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .tel i,
  .email i {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .worktime p {
    font-size: 12px;
  }

  .form-contact p {
    font-size: 12px;
  }

  .wpcf7-form-control.wpcf7-textarea {
    height: 120px !important;
  }

  .wpcf7-form p {
    margin-bottom: 0;
  }

  .road-img {
    max-width: 600px;
    width: 100%;
    height: auto;
    margin-left: -6%;
  }

  #contactUs-desktop > div > div {
    padding: 0 !important;
  }

  .road-img img {
    margin-top: 0;
    margin-left: -10%;
    margin-right: -12%;
  }

  .banner {
    padding: 30px 50% 30px 30px;
    margin-top: 0;
  }

  .banner p {
    font-size: 13px;
  }

  .banner .title-red {
    font-size: 14px;
  }

  .banner ul li {
    font-size: 14px;
  }

  #bestSellerSwiper .swiper-slide {
    /*max-width: 180px!important;*/
    width: 180px !important;
  }

  .product-loop {
    /*max-width: 180px;*/
    width: 180px;
    height: 335px;
  }

  .contact-text {
    padding: 33px 160px 15px 35px;
  }

  #contactUs-desktop {
    margin-top: 50px;
  }

  .contact-right {
    max-width: 400px;
    margin-left: -25%;
  }

  .blog-list-desktop {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 10px;
  }

  #moreOptions-label,
  .form-check-label {
    font-size: 10px;
  }

  #sidebar-category {
    width: 180px;
    border-radius: 20px;
    min-height: 250px;
  }
  .category-discount img {
    width: 100%;
  }
  .tire-cat {
    padding: 25px 120px 25px 40px;
  }
  #tire-category-tire {
    column-gap: 4rem;
    padding-inline: 40px;
  }
  .vehicle-tire-archive .list-vehicle {
    max-width: 120px;
    width: 100%;
    font-size: 12px;
    color: var(--primary-color12);
    margin-block: 10px;
    row-gap: 10px;
  }
  .list-vehicle:hover img,
  .list-brand img:hover {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
    background-color: var(--primary-color11);
  }
  .list-brand {
    font-size: 12px;
    color: var(--primary-color12);
    border-radius: 20px;
  }
  .list-brand img {
    background-color: transparent;
    border: none;
  }
  .list-size {
    font-size: 12px;
    color: var(--primary-color12);
    width: 10%;
    border: 1px solid var(--primary-color13);
    border-radius: 20px;
    padding: 5px;
  }

  .archive-lists {
    column-gap: 40px;
    row-gap: 40px;
  }
  .vehicle-tire-archive .list-vehicle img {
    width: 100%;
    border: 1px solid var(--primary-color2);
    border-radius: 20px;
    background: var(--primary-color10);
    padding: 10px;
    height: 60px;
    object-fit: fill;
  }
}

@media (min-width: 1200px) {
  .select-size {
    max-width: 280px;
  }

  #buypay {
    margin-top: 25px;
  }

  .trust-logo img {
    width: 80px;
    height: auto;
  }

  .main-wrapper {
    margin-left: 70px;
    margin-right: 70px;
  }

  .header-nav-desktop,
  .header-desktop,
  .header-top {
    padding-left: 70px;
    padding-right: 70px;
  }

  #contactUs {
    flex-direction: row;
    align-items: center; /* vertical centering */
  }

  .header-top a {
    font-size: 16px;
  }

  .tagline {
    font-size: 16px;
  }

  .news .submit-btn {
    margin-left: -88px;
  }

  #buypay .pay-left {
    padding: 49px 14% 40px 30px;
    max-width: 817px;
    width: 100%;
  }

  .pay-icon img {
    height: 62px;
  }

  #search-desktop {
    /* max-width: 500px; */
  }

  .submit-search {
    width: 90px;
  }

  .find-btn,
  .install-btn {
    width: 200px;
  }

  .find-btn span,
  .install-btn span {
    font-size: 16px;
  }

  .header-btn {
    justify-content: flex-end !important;
  }

  #tire .nav-link,
  #wheal .nav-link {
    width: 200px;
    font-size: 16px;
  }

  /*    select {
            width: 100%;
        }*/
  .submit-v {
    width: 100% !important;
  }

  .js-toggle-switch,
  #licence {
    width: 300px;
  }

  .js-toggle-switch,
  #licence {
    width: 100%;
  }

  .create-img {
    height: auto;
    width: 100%;
  }

  .credit-img img {
    margin-left: 0%;
    width: 100%;
    margin-right: 0px;
  }

  #bestSellerSwiper .swiper-slide {
    /*max-width: 200px!important;*/
    width: 210px !important;
  }

  .product-loop {
    width: 210px;
    height: 380px;
  }

  .tire-agent {
    height: 198px;
    padding: 20px;
  }

  .step-agent {
    height: 196px;
  }

  .tire-agent .card-body p {
    font-size: 16px;
  }

  #tire-agent .all-step {
    padding: 2rem 3rem;
  }

  .title-section {
    font-size: 24px;
  }

  #buypay p {
    font-size: 20px;
  }

  .discount-header {
    padding-inline: 10px !important;
  }

  .step-no {
    left: 34%;
  }

  .hero-img {
    height: 450px;
  }

  .mobile-install {
    margin-top: 0;
    padding: 50px 50px 40px 60%;
  }

  #mobile-banner {
    margin-top: 76px;
    padding-inline: 10px;
  }

  #roadBanner {
    margin-top: 65px;
    padding-inline: 10px;
  }

  .contact-right {
    max-width: 688px;
    margin-left: -25%;
  }

  .pay-icon p {
    font-size: 14px !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  .credit-img {
    max-width: 746px;
    width: 100%;
    margin-left: -8%;
  }

  .select-size img {
    height: 250px;
  }

  .vehicle-img img {
    width: 90%;
  }

  .tel,
  .email {
    font-size: 20px;
  }

  .worktime p {
    font-size: 16px;
  }

  .form-contact p {
    font-size: 18px;
  }

  .banner p {
    font-size: 18px;
  }

  .banner ul li {
    font-size: 16px;
  }

  .credit-logo img {
    width: 110px;
    height: auto;
  }

  .mobile-install > p {
    font-size: 14px;
    padding-right: 40px;
  }

  .mobile-install > h2 {
    padding-right: 40px;
  }

  .contact-img {
    margin-top: 0;
    position: relative;
  }

  .contact-img img {
    height: 575px;
    margin-right: 0;
    border-radius: 20px;
    right: -10px;
    max-width: none;
    position: absolute;
    width: 520px;
    object-fit: cover;
  }

  .contact-text {
    padding: 30px 25% 10px 40px;
  }

  .header-contact h3 {
    font-size: 24px;
  }

  .small-blog .col-2 {
    padding-left: 0;
  }

  .text-hero {
    padding: 40px 58px;
  }

  .hero-img ul li {
    margin-bottom: 5px;
  }

  .hero .text-hero h2 {
    margin-bottom: 10px;
    font-size: 24px;
  }

  .hero .text-hero ul li {
    margin-bottom: 6px;
    font-size: 20px;
    font-weight: 600;
  }

  .hero-btn {
    font-size: 20px;
    font-weight: 600;
  }

  .hero .ratting img {
    width: 192px;
    height: 68px;
  }

  .hero-img .ratting {
    margin-top: 46px;
    column-gap: 25px;
    padding-right: 50px;
  }

  #discountSwiper .swiper-slide {
    /*max-width: 310px!important;*/
    width: 310px !important;
  }

  .loop-dicount {
    /*max-width: 310px;*/
    width: 310px;
    height: 400px;
  }

  .dis-title h2 {
    font-size: 18px;
    color: var(--primary-color2);
  }

  .dis-date span {
    font-size: 12px;
    font-weight: 400;
  }

  .dis-date {
    margin-top: 10px;
  }

  .dis-link {
    font-size: 14px;
    padding-top: 20px;
  }

  .swiper-backface-hidden .swiper-slide {
    margin-left: 0px;
  }

  .loop-dicount .discount-image {
    height: 215px;
  }

  .discount-rate {
    right: 27%;
  }

  .pagination-wrapper {
    right: 10px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    border: 1px solid var(--primary-color12);
  }

  #search-tire > div {
    margin-inline: 70px;
    margin-top: -80px;
  }

  #tire-agent {
    margin-top: 10px;
  }

  #tire-agent h2 {
    padding-bottom: 35px;
  }

  .tire-agent-img img {
    width: 68px;
    height: 68px;
  }

  .tire-agent .card-body h3 {
    font-size: 20px;
  }

  #copratner {
    margin-top: 70px;
    margin-bottom: 70px;
  }

  #blog {
    margin-top: 70px;
  }

  #list-icon .icon {
    flex-direction: row;
    column-gap: 15px;
  }

  .social-links {
    column-gap: 10px;
  }

  #tire-size .row {
    justify-content: space-between;
  }

  .select-size img {
    width: 100%;
    height: auto;
  }

  .product-loop .add-to {
    padding-top: 20px;
  }

  #tire-agent .tire-agent-card {
    column-gap: 5rem;
  }

  .banner .p {
    font-size: 18px;
  }

  .banner .title-red {
    font-size: 20px;
  }

  .select2-container {
    width: 300px !important;
  }

  #search-tire {
    margin-inline: 70px;
  }

  contact-right {
    max-width: 670px;
  }

  .tires-img {
    max-width: 675px;
    margin-right: -16%;
  }

  .news label {
    background: white;
    font-size: 14px;
  }

  .subscrip {
    margin-top: 0px;
  }

  #moreOptions-label,
  .form-check-label {
    font-size: 12px;
  }

  latest-blog {
    width: 100%;
  }

  .search-tire {
    max-width: 1320px;
    margin-inline: auto !important;
  }
}

@media (min-width: 1580px) {
  .news .submit-btn {
    margin-left: -88px;
  }

  .hero-img {
    height: 510px;
  }

  .header-nav-desktop,
  .header-desktop,
  .header-top {
    padding-left: 100px;
    padding-right: 100px;
  }

  .text-hero {
    padding: 60px 85px;
  }

  /*    .loop-dicount {
            max-width: 330px;
            height: 400px;
        }*/
  .main-wrapper {
    margin-left: 100px;
    margin-right: 100px;
  }

  .credit-img {
    max-width: 740px;
    width: 100%;
    margin-left: -10%;
    height: auto;
  }

  .credit-img img {
    margin-left: 0;
  }

  #buypay .pay-left {
    padding: 50px 48% 40px 30px;
    max-width: 100%;
    width: 100%;
  }

  /*    .product-loop {
            max-width: 245px;
            height: 380px;
            width: 100%
        }*/
  .product-loop .product-title {
    font-size: 14px;
  }

  .title-section {
    font-size: 26px;
    font-weight: 700;
  }

  .hero .text-hero h2 {
    font-size: 28px;
    font-weight: 700;
  }

  .hero .text-hero ul li {
    font-size: 24px;
    font-weight: 400;
  }

  .hero-btn {
    font-size: 24px;
    font-weight: 700;
  }

  .menu > li > a {
    font-size: 18px;
  }

  .menu > li > ul > li > a {
    font-size: 16px;
  }

  #buypay p {
    font-size: 24px;
  }

  .pay-icon img {
    height: 90px;
  }

  .mobile-install {
    margin-top: 20px;
    padding: 50px 50px 40px 60%;
  }

  .mobile-install > p {
    font-size: 16px;
    font-weight: 600;
  }

  .pay-icon p {
    font-size: 16px !important;
  }

  .view-all {
    width: 200px;
    height: 40px;
    padding-block: 6px;
  }

  .installer,
  .shop-now {
    width: 200px;
    height: 40px;
    padding: 7px 5px;
    font-size: 16px;
  }

  .tel i,
  .email i {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .tel span,
  .email span {
    font-size: 24px;
  }

  .worktime p {
    font-size: 18px;
  }

  .form-contact p {
    font-size: 20px;
  }

  .form-contact .submit-form {
    font-size: 18px;
  }

  .banner p {
    font-size: 20px;
  }

  .banner .title-red {
    font-size: 22px;
  }

  .banner ul li {
    font-size: 18px;
  }

  .road-img {
    max-width: 632px;
    width: 100%;
  }

  .accordion-header {
    font-size: 20px;
    font-weight: 700;
  }

  .tire-agent-img img {
    width: 90px;
    height: 90px;
  }

  /*    #tire-agent .all-step {
            padding: 6rem 3rem;
        }*/
  .step-no {
    left: 31%;
  }

  .tire-agent .card-body h3 {
    font-size: 21px;
    margin-bottom: 15px;
  }

  .accordion-item:first-of-type > .accordion-header .accordion-button {
    padding-block: 13px;
    font-size: 20px;
  }

  accordion-body {
    font-size: 20px;
  }

  .latest-blog {
    height: auto;
    max-width: 100%;
  }

  .small-blog img {
    height: 180px;
    width: 100%;
  }

  .small-blog h3 {
    font-size: 1.2rem;
  }

  .small-blog .excerpt {
    font-size: 16px;
  }

  .latest-blog h3 {
    font-size: 1.5rem;
  }

  .first-content .first-excerpt {
    font-size: 1.2rem;
  }

  #list-icon .icon p {
    font-size: 1.2rem;
  }

  .contact-link a {
    font-size: 18px;
  }

  all-link .menus li a {
    font-size: 18px;
  }

  .news label {
    font-size: 16px;
  }

  .step-agent {
    height: 238px;
  }

  #tire-agent .all-step {
    padding: 3rem 3rem 5rem;
  }

  #tire-agent .tire-agent-card {
    column-gap: 10rem;
  }

  .tire-agent {
    height: 265px;
    padding: 20px;
    width: 366px;
  }

  .blog-list-desktop {
    row-gap: 20px;
  }
}

@media (min-width: 1680px) {
  .hero-img {
    height: 560px;
  }

  .contact-right {
    width: 27%;
    margin-left: -14%;
  }

  .contact-right img {
    margin-left: 4%;
  }

  .road-img {
    max-width: 700px;
    width: 100%;
  }
}