/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/

:root {
  --primary-color: #062e39;
  --tertiary-color: #f0f0e9;
  --steps-gray-color: #201f1f;
  /* --primary-color: #FE980F; */
  /* --accent-color: #fd5523; */
  /* --primary-color: #F0F0E9; */
  --secondary-color: #f4f5f9;
  --text-color: #565969;
  --white-color: #ffffff;
  --black-color: #000;
  --orange-color: #fe980f;
  --orange-border-color: #fbcf94;
  --orange-hover-color: #e48b18;
  --orange-bg-dark-color: #d27904;
  --orange-bg-light-color: #fff8ef;

  /* --orange-border-color: #fbcf94; */
  --orange-disabled-text: #9a6a2f;

  --red-danger-color: #cb0000;
  --red-danger-lite-color: #ff5b5b;
  --red-danger-hover-color: #a60000;

  --divider-color: #56596924;
  --dark-divider-color: #ffffff24;
  /* --divider-color: #FE980F;
	--dark-divider-color: #FE980F; */
  --error-color: rgb(230, 87, 87);
  --default-font: "DM Sans", serif;
  --main-font: "Fira Sans", sans-serif;
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

body {
  font-family: var(--default-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1em;
  background-color: var(--white-color);
  color: var(--text-color);
}

p {
  line-height: 1.6em;
  margin-bottom: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  /* font-weight: 700; */
  line-height: 1.1em;
  color: var(--primary-color);
  font-family: var(--main-font) !important;
}
p,span,a,strong,label,li,button,b,div{
  font-family: var(--main-font) !important;
}

figure {
  margin: 0;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none !important;
  color: var(--orange-color);
}

a:hover {
  text-decoration: none;
  outline: 0;
}

a:focus {
  text-decoration: none;
  outline: 0;
}

html,
body {
  width: 100%;
  overflow-x: clip;
}

::-webkit-scrollbar-track {
	background-color: var(--white-color);
	border-left: 1px solid var(--white-color);
}
::-webkit-scrollbar {
	width: 7px;
	background-color: var(--white-color);
}
::-webkit-scrollbar-thumb {
	background: var(--orange-color);
}

::selection {
  color: var(--white-color);
  background-color: var(--orange-color);
  filter: invert(1);
}

.read-more-link,
.abs-link {
  cursor: pointer;
  color: var(--orange-color);
}
.read-more-link:hover,
.abs-link:hover {
  color: var(--orange-color);
}
.read-more-link-prod {
  cursor: pointer;
  color: var(--orange-color);
}
.read-more-link-prod:hover {
  color: var(--orange-color);
}
.container {
  max-width: 1300px;
}
.container-page-padding {
  padding-top: 85px;
}
.navbar-container {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 10;
  width: 100%;
}

.navbar {
  margin-bottom: 0 !important;
}

.navbar-login-section {
  display: flex;
  width: auto;
  align-items: center;
  justify-content: center;
  padding-right: 30px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  padding-right: 15px;
  padding-left: 15px;
}
.product-image-container{
  height: 30vh;
  aspect-ratio: 0.9;
}
.image-anime {
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-anime:after {
  content: "";
  position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 1;
}

.image-anime:hover:after {
  height: 250%;
  transition: all 600ms linear;
  background-color: transparent;
}

.reveal {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  /*visibility: hidden;*/
  overflow: hidden;
}

.reveal img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transform-origin: left;
  transform-origin: left;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}
.row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.row > * {
  padding-right: 15px;
  padding-left: 15px;
}

.row.no-gutters {
  margin-right: 0px;
  margin-left: 0px;
}

.row.no-gutters > * {
  padding-right: 0px;
  padding-left: 0px;
}

.btn-default,
.login-btn {
  position: relative;
  display: inline-block;
  border-radius: 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1em;
  text-transform: capitalize;
  color: var(--secondary-color) !important;
  background: var(--orange-color) !important;
  border: none;
  padding: 17px 20px 17px 20px;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
  z-index: 0;
}
.login-btn {
  border-radius: 8px;
  padding: 7px 20px 7px 20px;
}

.btn-default:hover,
.login-btn:hover {
  background: transparent !important;
  color: var(--white-color) !important;
}

.btn-default::before,
.login-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 24px;
  height: 24px;
  transform: translate(-20px, -50%);
  transition: all 0.4s ease-in-out;
}
.btn-default:hover::before,
.login-btn:hover::before {
  transform: translate(-17px, -50%);
}

.btn-default::after,
.login-btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -15%;
  right: 0;
  width: 0;
  height: 106%;
  background: var(--orange-color);
  transform: skew(30deg);
  transition: all 0.4s ease-in-out;
  z-index: -1;
}

.btn-default:hover:after,
.login-btn:hover:after {
  width: 100%;
  transform: skew(0deg);
  left: 0;
}

.btn-default.btn-highlighted:hover,
.login-btn.btn-highlighted:hover {
  color: var(--primary-color);
}

.btn-default.btn-highlighted:hover:before,
.login-btn.btn-highlighted:hover:before {
  filter: brightness(1) invert(1);
}

.btn-default.btn-highlighted::after,
.login-btn.btn-highlighted::after {
  /* background: var(--white-color); */
  background-color: #e67f0c;
}

.btn-default,
.logout-btn {
  position: relative;
  display: inline-block;
  border-radius: 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1em;
  text-transform: capitalize;
  color: var(--secondary-color) !important;
  background: var(--orange-color) !important;
  border: none;
  padding: 17px 20px 17px 20px;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
  z-index: 0;
}
.logout-btn {
  border-radius: 8px;
  padding: 7px 20px 7px 20px;
}

.btn-default:hover,
.logout-btn:hover {
  background: transparent !important;
  color: var(--white-color) !important;
}

.btn-default::before,
.logout-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 24px;
  height: 24px;
  transform: translate(-20px, -50%);
  transition: all 0.4s ease-in-out;
}

.btn-default:hover::before,
.logout-btn:hover::before {
  transform: translate(-17px, -50%);
}

.btn-default::after,
.logout-btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -15%;
  right: 0;
  width: 0;
  height: 106%;
  background: var(--orange-color);
  transform: skew(30deg);
  transition: all 0.4s ease-in-out;
  z-index: -1;
}

.btn-default:hover:after,
.logout-btn:hover:after {
  width: 100%;
  transform: skew(0deg);
  left: 0;
}

.btn-default.btn-highlighted:hover,
.logout-btn.btn-highlighted:hover {
  color: var(--primary-color);
}

.btn-default.btn-highlighted:hover:before,
.logout-btn.btn-highlighted:hover:before {
  filter: brightness(1) invert(1);
}

.btn-default.btn-highlighted::after,
.logout-btn.btn-highlighted::after {
  /* background: var(--white-color); */
  background-color: #e67f0c;
}

.btn-default,
.account-btn {
  position: relative;
  display: inline-block;
  border-radius: 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1em;
  text-transform: capitalize;
  color: var(--secondary-color) !important;
  background: var(--orange-color) !important;
  border: none;
  padding: 17px 20px 17px 20px;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
  z-index: 0;
}
.account-btn {
  border-radius: 8px;
  padding: 7px 20px 7px 20px;
}

.btn-default:hover,
.account-btn:hover {
  background: transparent !important;
  color: var(--white-color) !important;
}

.btn-default::before,
.account-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 24px;
  height: 24px;
  transform: translate(-20px, -50%);
  transition: all 0.4s ease-in-out;
}

.btn-default:hover::before,
.account-btn:hover::before {
  transform: translate(-17px, -50%);
}

.btn-default::after,
.account-btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -15%;
  right: 0;
  width: 0;
  height: 106%;
  background: var(--orange-color);
  transform: skew(30deg);
  transition: all 0.4s ease-in-out;
  z-index: -1;
}

.btn-default:hover:after,
.account-btn:hover:after {
  width: 100%;
  transform: skew(0deg);
  left: 0;
}

.btn-default.btn-highlighted:hover,
.account-btn.btn-highlighted:hover {
  color: var(--primary-color);
}

.btn-default.btn-highlighted:hover:before,
.account-btn.btn-highlighted:hover:before {
  filter: brightness(1) invert(1);
}

.btn-default.btn-highlighted::after,
.account-btn.btn-highlighted::after {
  /* background: var(--white-color); */
  background-color: #e67f0c;
}
.cb-cursor:before {
  background: var(--orange-color);
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  /* background: var(--orange-color); */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-container,
.loading {
  height: 100px;
  position: relative;
  width: 100px;
  border-radius: 100%;
}

.loading-container {
  margin: 40px auto;
}

.loading {
  border: 1px solid transparent;
  border-color: transparent var(--orange-color) transparent var(--orange-color);
  animation: rotate-loading 1.5s linear 0s infinite normal;
  transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading {
  transition: all 0.5s ease-in-out;
}

#loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 66px;
  transform: translate(-50%, -50%);
}

@keyframes rotate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.section-row {
  margin-bottom: 80px;
}

.section-row .section-title {
  margin-bottom: 0;
}

.section-row .section-title.section-title-center {
  width: 100%;
  max-width: 640px;
  text-align: center;
  margin: 0 auto;
}

.section-title {
  margin-bottom: 40px;
}

.section-title b {
  display: inline-block;
  position: relative;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6em;
  text-transform: uppercase;
  color: var(--text-color);
  padding-left: 34px;
  margin-bottom: 10px;
}

.section-title b::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url("../img/icon/wheel.svg") no-repeat;
  background-position: left center;
  background-size: cover;
  width: 24px;
  height: 24px;
}

.section-title h1 {
  /* font-size: 60px; */
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

.section-title h2,
.section-title h3 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}
.section-title h3,
.section-title h2 {
  margin-bottom: 20px;
}

.section-title-subheading {
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  margin-bottom: 20px !important;
}

.section-title h1 span,
.section-title h2 span,
.section-title h3 span {
  color: var(--orange-color);
}

.section-title span {
  /* margin-top: 20px; */
  margin-bottom: 0;
}

.section-title-content p {
  margin: 0;
}

.section-btn {
  text-align: right;
}

.section-content-btn .section-btn {
  text-align: left;
  margin-top: 30px;
}

.dark-section {
  background-color: var(--steps-gray-color);
}

.dark-section .section-title h3 {
  color: var(--secondary-color);
}

.dark-section .section-title h2,
.dark-section .section-title h1,
.dark-section .section-title p {
  color: var(--white-color);
}

.help-block.with-errors ul {
  margin: 0;
  text-align: left;
}

.help-block.with-errors ul li {
  color: var(--error-color);
  font-weight: 500;
  font-size: 14px;
}

/************************************/
/**** 	   03. Header css		 ****/
/************************************/
header.main-header {
  position: absolute;
  top: 0;
  width: 100%;
  border-bottom: 1px solid var(--dark-divider-color);
  z-index: 100;
}

header.main-header .header-sticky {
  position: relative;
  top: 0;
  z-index: 100;
}

header.main-header .header-sticky.hide {
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
  border-radius: 0;
}

header.main-header .header-sticky.active {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  transform: translateY(0);
  background-color: var(--primary-color);
  border-bottom: 1px solid var(--dark-divider-color);
}

.navbar {
  padding: 10px 0;
  align-items: center;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.4);
  position: sticky;
  top: 0;
  z-index: 999;
}

.navbar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 60px !important;
  margin: 0;
}

.main-menu .nav-menu-wrapper {
  flex: 1;
  text-align: center;
  margin: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-menu .nav-menu-wrapper > ul {
  align-items: center;
  display: inline-flex;
}

.main-menu ul li {
  margin: 0;
  position: relative;
}

.main-menu ul li a {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2em;
  /* padding: 14px 20px !important; */
  padding-bottom: 0px !important;
  padding-top: 0px !important;
  color: var(--black-color);
  text-transform: capitalize;
  transition: all 0.3s ease-in-out;
  margin: 0 16px 0 16px;
}

.main-menu ul li.submenu > a:after {
  content: "\f107";
  font-family: "FontAwesome";
  font-weight: 900;
  font-size: 14px;
  margin-left: 8px;
  margin-top: 1px;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus {
  color: var(--black-color);
}

.main-menu ul ul {
  visibility: hidden;
  opacity: 0;
  transform: scaleY(0.8);
  transform-origin: top;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 230px;
  border-radius: 16px;
  position: absolute;
  left: 0;
  top: 100%;
  background: var(--orange-color);
  transition: all 0.3s ease-in-out;
  text-align: left;
}
/* NAV LINK BASE */
.main-menu .nav-link {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}

/* Underline (hidden by default) */
.main-menu .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 3px;
  background-color: #fe980f;
  transition: width 0.3s ease;
}

/* Show on hover */
.main-menu .nav-link:hover::after {
  width: 100%;
}

/* Show when ACTIVE */
.main-menu .nav-item.active .nav-link::after {
  width: 100%;
}

.main-menu ul li.submenu:first-child ul {
  width: 230px;
}

.main-menu ul ul ul {
  left: 100%;
  top: 0;
  text-align: left;
}
.main-menu ul li:hover > ul {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
  padding: 5px 0;
}

.main-menu ul li.submenu ul li.submenu > a:after {
  content: "\f105";
  float: right;
}

.main-menu ul ul li {
  margin: 0;
  padding: 0;
}

.main-menu ul ul li a {
  color: var(--white-color);
  padding: 8px 20px !important;
  transition: all 0.3s ease-in-out;
}

.main-menu ul li:hover > ul {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
  padding: 5px 0;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus {
  color: var(--primary-color);
  background-color: transparent;
  padding: 8px 20px 8px 23px !important;
}

.main-menu ul li.highlighted-menu {
  display: none;
}

.responsive-menu,
.navbar-toggle {
  display: none;
}

.responsive-menu {
  top: 0;
  position: relative;
}

.slicknav_btn {
  background: var(--orange-color);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: 8px;
}

.slicknav_icon .slicknav_icon-bar {
  display: block;
  width: 100%;
  height: 3px;
  width: 22px;
  background-color: var(--white-color);
  border-radius: 6px;
  margin: 4px auto !important;
  transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child {
  margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child {
  margin-bottom: 0 !important;
}

.navbar-toggle
  a.slicknav_btn.slicknav_open
  .slicknav_icon
  span.slicknav_icon-bar:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle
  a.slicknav_btn.slicknav_open
  .slicknav_icon
  span.slicknav_icon-bar:nth-child(2) {
  opacity: 0;
}

.navbar-toggle
  a.slicknav_btn.slicknav_open
  .slicknav_icon
  span.slicknav_icon-bar:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu {
  position: absolute;
  width: 100%;
  padding: 0;
  background: var(--orange-color);
}

.slicknav_menu ul {
  margin: 5px 0;
}

.slicknav_menu ul ul {
  margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a {
  position: relative;
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
  padding: 8px 20px;
  color: var(--white-color);
  line-height: normal;
  margin: 0;
  border-radius: 0 !important;
  transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover {
  background-color: transparent;
  color: var(--primary-color);
}

.slicknav_menu ul ul li a {
  padding: 8px 20px 8px 30px;
}

.slicknav_arrow {
  font-size: 0 !important;
}

.slicknav_arrow:after {
  content: "\f107";
  font-family: "FontAwesome";
  font-weight: 900;
  font-size: 12px;
  margin-left: 8px;
  color: var(--white-color);
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease-out;
}

.slicknav_open > a .slicknav_arrow:after {
  transform: translateY(-50%) rotate(-180deg);
  color: var(--primary-color);
}

/************************************/
/***        04. Hero css	      ***/
/************************************/
.hero {
  position: relative;
  background: url("../img/banners/falgar-page.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 225px 0 120px;
  /* min-height: 100vh; */
  align-content: end;
}
.hero.hero-video .hero-bg-video {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.hero.hero-video .hero-bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*.hero.hero-slider-layout {
  background: none;
  padding: 0;
}

.hero.hero-slider-layout .hero-slide {
  position: relative;
  padding: 225px 0 120px;
  min-height: 90vh;
  align-content: end;
}
.hero.hero-slider-layout .hero-slide .hero-slider-image {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.hero.hero-slider-layout .hero-slide .hero-slider-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 */
.hero.hero-slider-layout {
    background: none;
    padding: 0;
    overflow: hidden;
}

.hero.hero-slider-layout .hero-slide {
    position: relative;
    padding: 0;
    width: 100%;
    height: calc(100vw * 9 / 16);
    max-height: calc(100vh - 75px);
    min-height: 650px;
    overflow: hidden;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image {
    position: absolute;
    inset: 0;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center bottom;
}

.hero.hero-slider-layout .hero-pagination {
  position: absolute;
  bottom: 50px;
  text-align: center;
  z-index: 2;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: var(--white-color);
  opacity: 1;
  transition: all 0.3s ease-in-out;
  margin: 0 5px;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active {
  background-color: var(--orange-color);
}

.hero-content-box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 80px;
  z-index: 2;
}

.hero-content {
  position: relative;
  width: calc(50% - 40px);
  text-align: right;
}

.hero-content::before {
  content: "";
  position: absolute;
  right: -40px;
  top: 0;
  bottom: 0;
  background: var(--orange-color);
  width: 2px;
  height: 100%;
}

.hero-content .section-title {
  margin-bottom: 0;
}

.hero-content .section-title p {
  max-width: 45%;
  font-size: 20px;
  font-weight: 700;
  margin: 0 auto;
  margin-right: 0;
  margin-top: 20px;
}

.hero-customer-box {
  width: calc(50% - 40px);
}

.hero-customer-content {
  margin-bottom: 25px;
}

.hero-customer-content p {
  color: var(--white-color);
  margin: 0;
}
.hero-btn {
  margin-top: 30px;
}

/************************************/
/***       05. About Us css       ***/
/************************************/

.about-image {
  width: 100% !important;
}

.about-us {
  position: relative;
  padding: 40px 0px 10px 10px;
}

.about-us-image {
  position: relative;
  margin-right: 25px;
  z-index: 1;
}

.about-us-image figure {
  display: block;
  border-radius: 40px;
}

.about-us-image img {
  width: 100%;
  aspect-ratio: 1 / 0.9244;
  object-fit: cover;
  border-radius: 40px;
}

.about-counter-box {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
}

.about-counter-item {
  width: calc(50% - 15px);
}

.about-counter-item h2 {
  font-size: 46px;
  color: var(--orange-color);
  margin-bottom: 5px;
}

.about-counter-item h2 span {
  color: var(--primary-color);
}

.about-counter-item p {
  margin: 0;
}

.about-us-btn {
  margin-top: 40px;
}

.about-owner-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 60px;
  margin-top: 40px;
}

.about-owner-image,
.about-owner-info {
  width: calc(50% - 30px);
}

.about-owner-content p {
  font-size: 20px;
  font-weight: 500;
  color: var(--primary-color);
  margin: 0;
}
.about-owner-image img {
  width: 100%;
  aspect-ratio: 1 / 0.51;
  object-fit: cover;
  border-radius: 40px;
}

/************************************/
/***      06. Footer css    ***/
/************************************/
.footer-container {
  width: 100% !important;
  display: flex;
  flex-direction: column !important;
}
.footer-container .single-widget{
 padding-top: 10px;
}
.footer-container .nav-stacked{
  display: flex !important;
  flex-direction: column !important;
}
.footer-container .nav-stacked li{
  margin: 0;
}
.footer-pages-links {
  display: contents;
}

.dark-section .section-footer-text p {
  color: var(--white-color);
}

.dark-section .section-footer-text p a:hover {
  color: var(--white-color);
}

.section-footer-text .btn-default {
  margin-top: 40px;
}
/************************************/
/***    08. Work Process css	  ***/
/************************************/
.our-work-process {
  padding: 100px 0;
  background-image: url("../img/work-process-bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.wrok-process-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.work-process-item {
  position: relative;
  text-align: center;
  padding-top: 10px;
  width: calc(25% - 22.5px);
}

.work-process-item:nth-child(odd) {
  margin-top: 90px;
}

.work-process-item:after {
  position: absolute;
  content: "";
  top: -30px;
  right: -65px;
  width: 100px;
  height: 50px;
  background: url("../img/icon/dotted-arrow.svg") no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 0;
}

.work-process-item:last-child:after,
.work-process-item:nth-child(4n + 4):after {
  display: none;
}

.work-process-item:nth-child(even):after {
  top: 132px;
  transform: rotateX(180deg);
}

.work-process-item .icon-box {
  position: relative;
  width: 162px;
  height: 162px;
  background: #000000;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.work-process-item .icon-box:before {
  content: "";
  position: absolute;
  height: calc(100% + 20px);
  width: calc(100% + 20px);
  border: 2px dashed var(--secondary-color);
  border-radius: 50%;
}


.work-process-item .icon-box img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;
}

.work-process-item .icon-box .work-process-number {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  background: var(--white-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.work-process-item .icon-box .work-process-number h3 {
  color: var(--orange-color);
  font-size: 18px;
}

.work-process-content strong {
  color: var(--orange-color);
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 600;
  margin-bottom: 15px;
}

.work-process-content span {
  color: var(--secondary-color);
  margin: 0;
}

/************************************/
/***    	09. Our Skill css	  ***/
/************************************/

.our-skill {
  padding: 100px 0;
}

.our-skill-images {
  position: relative;
  padding: 0 155px 200px 0;
}

.our-skill-image-1 figure,
.our-skill-image-2 figure {
  display: block;
}

.our-skill-image-1 img,
.our-skill-image-2 img {
  width: 100%;
  object-fit: cover;
}

.our-skill-image-1 figure {
  border-radius: 40px;
}

.our-skill-image-1 img {
  border-radius: 40px;
  aspect-ratio: 1 / 1.052;
}

.our-skill-image-2 {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 364px;
  border: 10px solid var(--white-color);
  border-radius: 40px;
  overflow: hidden;
  z-index: 1;
}

.our-skill-image-2 img {
  aspect-ratio: 1 / 1.29;
}

.contact-us-circle {
  position: absolute;
  bottom: 153px;
  left: 200px;
  z-index: 3;
}

.contact-us-circle a {
  display: block;
  border-radius: 50%;
}

.contact-us-circle a img {
  width: 100%;
  max-width: 136px;
  border-radius: 50%;
  animation: infiniterotate 25s infinite linear;
}

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

.our-skill-content {
  margin-left: 20px;
}

.our-skill-body {
  margin-bottom: 60px;
}

.skills-progress-bar {
  margin-bottom: 30px;
}

.skills-progress-bar:last-child {
  margin-bottom: 0px;
}

.skills-progress-bar .skill-data {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.skills-progress-bar .skill-data .skill-title {
  font-weight: 500;
  color: var(--primary-color);
  text-transform: capitalize;
}

.skills-progress-bar .skill-data .skill-no {
  font-weight: 500;
  color: var(--primary-color);
}

.skills-progress-bar .skillbar .skill-progress {
  position: relative;
  width: 100%;
  height: 16px;
  background: var(--secondary-color);
  border-radius: 100px;
  overflow: hidden;
}

.skills-progress-bar .skillbar .skill-progress .count-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: var(--orange-color);
  border-radius: 100px;
}
/************************************/
/***    11. Our Testimnials css	  ***/
/************************************/
.our-testimonials {
  position: relative;
  padding: 100px 0 50px;
  background: url("../img/banners/testimonial-bg.png") no-repeat;
  background-position: center center;
  background-size: auto;
}

.testimonial-slider {
  position: relative;
}

.testimonial-slider .swiper {
  position: static;
  margin: 0 110px;
}

.testimonial-slider .swiper-wrapper {
  cursor: none;
}

.testimonial-item {
  position: relative;
  background-color: var(--white-color);
  text-align: center;
  border: 1px solid var(--divider-color);
  border-radius: 40px;
  box-shadow: 0px 0px 40px 0px #062e390d;
  margin-top: 40px;
  padding: 60px 40px 40px;
}

.author-image {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
}

.author-image figure {
  display: block;
  border-radius: 50%;
}

.author-image img {
  max-width: 80px;
  border-radius: 50%;
}

.author-content {
  margin-bottom: 20px;
}

.author-content .author-title {
  margin-bottom: 20px;
}

.author-content .author-title h3 {
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  margin: 0;
}

.author-rating i {
  color: var(--orange-color);
  font-size: 20px;
}

.testimonial-content p {
  margin: 0;
}

.testimonial-btn-prev,
.testimonial-btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: var(--orange-color);
  border-radius: 50%;
  transition: all 0.4s ease-in-out;
  z-index: 1;
}

.testimonial-btn-prev {
  left: 0;
}

.testimonial-btn-next {
  right: 0;
}

.testimonial-btn-prev:hover,
.testimonial-btn-next:hover {
  background-color: var(--primary-color);
}

.testimonial-btn-prev::before,
.testimonial-btn-next::before {
  font-family: "FontAwesome";
  content: "\f053";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 16px;
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease-in-out;
}

.testimonial-btn .testimonial-btn-next::before {
  transform: rotate(180deg);
}
/************************************/
/***   		14. Our Team css	  ***/
/************************************/
.our-listing {
  padding: 10px 0 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.our-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
} 

.listing-container{
	width: 85%;
}
.paketBand{
  z-index: 1000 !important;
  left: -18px !important;
  top: -18px !important;
}
.pd-paketBand {
  z-index: 1 !important;
  left: 5px !important;
  top: 5px !important;
}
.listing-item,
.dack-card {
  border: 1px solid rgb(223, 220, 220);
  border-radius: 2vh;
  padding: 2vh;
  /* max-height: 700px; */
  /* margin-bottom: 30px; */
  display: flex;
  flex-direction: column;
  height: 100%;
}
.dack-card {
  gap: 2vh;
  flex-direction: row;
}
.tires-list,
.accessories-list,
.dack-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.staggered-tires-list{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.staggered-tires-list > div{
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.staggered-tires-list > div span{
  font-size: 18px;
  font-weight: bold;
  color: var(--orange-color);
}

.tires-price-section,
.accessories-price-section,
.dack-price-section {
  margin-top: auto;
}

.tires-list p:nth-of-type(2),
.accessories-list p:nth-of-type(2),
.dack-list p:nth-of-type(2) {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* how many lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-image,
.tire-image,
.accessories-image {
  position: relative;
  border-radius: 40px;
  margin-bottom: 20px;
  overflow: hidden;
}
.tire-image,
.accessories-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: max-content;
}

.team-image a,
.tire-image a,
.accessories-image a {
  display: block;
  /* cursor: none; */
  overflow: hidden;
}

.team-image img,
.tire-image img,
.accessories-image img,
.dack-image img {
  width: 100%;
  /* aspect-ratio: 1 / 1.15; */
  object-fit: cover;
  transition: all 0.4s ease-in-out;
}

.listing-item:hover .team-image img,
.dack-card:hover .dack-image img {
  transform: scale(1.1);
}
.listing-item:hover .tire-image img,
.listing-item:hover .accessories-image img,
.dack-card:hover .dack-image img {
  transform: scale(1.1);
}

.team-social-icon {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  z-index: 1;
}

.listing-item:hover .team-social-icon,
.dack-card:hover {
  bottom: 40px;
  opacity: 1;
  visibility: visible;
}
.tires-list h3,
.tires-list p,
.accessories-list h3,
.accessories-list p,
.dack-list h2 {
  color: var(--orange-color);
  font-size: 20px;
  text-transform: capitalize;
  margin-bottom: 5px;
  text-align: center;
}
.accessories-list h3{
  min-height: 70px;
}
.tires-list p a,
.accessories-list p a{
  color: var(--orange-color) !important;
}

.dack-list h2 {
  text-align: left;
}

.tires-list h3 a,
.dack-list h2 a {
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: calc(1.4em * 2);
}

.tires-list h2 p,
.dack-list h2 p {
  color: var(--black-color);
  /* text-transform: capitalize; */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0;
}
.tires-price-section,
.accessories-price-section,
.dack-price-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
  justify-content: space-between;
}
.dack-price-section {
  flex-direction: row !important;
  margin-top: 20px;
}

.tires-price-section a,
.accessories-price-section a,
.dack-price-section a {
  color: var(--white-color);
  background-color: var(--orange-color);
  border-radius: 1vh;
}
.tire-price,
.accessories-price {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tire-price p,
.accessories-price p {
  /* font-style: italic; */
  color: var(--black-color);
  margin: 0;
  padding-right: 5px;
}
.tire-price h4,
.accessories-price h4 {
  color: var(--orange-color);
  line-height: 0;
}
.tire-price h4 span p{
  color: var(--orange-color);
}

.tire-classes span {
  display: inline-block;
  line-height: 40px;
  text-align: center;
  color: #0192d5;
  font-weight: bold;
  font-size: 16px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  margin-right: 5px;
}

/* Individual backgrounds */
.besparing {
  width: 30px;
  height: 30px;
  background-image: url("../images/abs-wheels/arivo/besparing.png");
}

.grip {
  width: 30px;
  height: 30px;
  background-image: url("../images/abs-wheels/arivo/grip.png");
}

.noisesound {
  width: 60px;
  height: 30px;
  background-image: url("../images/abs-wheels/arivo/B.png");
}

.tire-classes h6 {
  color: var(--orange-color);
  margin: 5px 0 5px 0;
}

.product-price-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.product-price h4 {
  font-weight: normal;
  color: var(--orange-color);
}
.product-buy-now {
  display: flex;
  gap: 5vh;
  margin-top: 3vh;
  align-items: flex-end;
  justify-self: center;
}
.product-buy-now a {
  font-size: 16px;
  font-weight: bold;
  padding-left: 7vh;
  padding-right: 7vh;
}
.product-buy-now input {
  width: 40px;
  font-size: 14px;
  border: 1px solid rgb(220, 217, 217);
  height: 45px;
  text-align: center;
}

.product-link {
  margin: 1vh 0 1vh 0;
  text-align: center !important;
}
.product-link:hover {
  color: var(--orange-color);
  transition: 0.2s ease-in;
}
.centered-product-title {
  display: block; /* Ensures margin works properly */
  text-align: center; /* Center the text */
  margin-bottom: 15px; /* Adjust vertical spacing as needed */
  font-weight: 600; /* Optional: make it look like a product title */
  font-size: 16px; /* Optional: adjust size */
  color: #333; /* Optional: set text color */
  text-decoration: none; /* Optional: remove underline */
}

/* Search box  */
.search-overlay-box {
  background: rgba(255, 255, 255, 0.6);
  padding: 30px;
  border-radius: 8px;
  max-width: 500px;
  color: white;
  text-align: center;
}

.search-buttons {
  margin-bottom: 20px;
}
.search-buttons button {
  /* width: 30vh; */
  margin-bottom: 2vh;
}

.search-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  margin-right: 10px;
}

.search-btn.primary {
  background-color: #fe980f;
}

.search-btn.secondary {
  background-color: #444;
}

.search-input-wrapper-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 75px;
}
.wide-search-input{
  width: 70vh !important;
}

.search-icon {
  position: relative;
  /* left: 0px; */
  width: 45px;
  height: 60px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.search-input {
  width: 70%;
  padding: 15px 15px 15px 38px;
  border: none;
  font-size: 26px;
  text-align: center;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.search-with-reg-no {
  display: flex;
  align-items: center;
  font-weight: 500;
  margin: 15px 0;
  color: var(--black-color);
  font-size: 18px;
}
.icon-group {
  display: flex;
  gap: 12px; /* space between icons */
  align-items: center;
  font-size: 20px; /* adjust icon size */
  color: #333; /* icon color */
  cursor: pointer;
  margin-left: 2vh;
  color: var(--orange-color);
}
.icon-group-item,
.icon-group-item:hover,
.icon-group-item:focus {
  color: var(--orange-color);
}
/************************************/
/***   		16. Footer css  	  ***/
/************************************/
.main-footer {
  background: url("../img/footer-bg.png"), var(--tertiary-color);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  padding: 100px 0 0;
  font-size: 14px;
}

.about-footer {
  margin-right: 20px;
}

.about-footer img {
    width: 100%;
}

.footer-logo {
  margin-bottom: 30px;
}

.footer-logo img {
  width: 100%;
  max-width: 145px;
}

.about-footer-content p {
  color: var(--black-color);
  margin-bottom: 0;
}

.footer-links span {
  font-size: 20px;
  font-weight: 500;
  color: var(--black-color);
  text-transform: capitalize;
  margin-bottom: 20px;
}

.footer-links p {
  color: var(--black-color);
  margin-bottom: 10px;
}

.footer-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
  padding-top: 3px;
}

.footer-links ul li {
  color: var(--black-color);
  text-transform: capitalize;
  line-height: 1.5em;
  margin-bottom: 12px;
}

.footer-links ul li:last-child {
  margin-bottom: 0;
}

.footer-links ul li a {
  display: inline-block;
  color: inherit;
  transition: all 0.3s ease-in-out;
}

.footer-links ul li a:hover {
  color: var(--orange-color);
}

.footer-contact-item {
  display: flex;
  align-items: baseline;
  margin-bottom: 20px;
}

.footer-contact-item:last-child {
  margin-bottom: 0;
}

.footer-contact-item .icon-box {
  margin-right: 10px;
}

.footer-contact-item .icon-box img {
  width: 100%;
  max-width: 20px;
}

.footer-contact-content {
  width: calc(100% - 30px);
}

.footer-contact-content p {
  color: var(--black-color);
  margin-bottom: 0;
}

.footer-contact-content p a {
  color: inherit;
  transition: all 0.4s ease-in-out;
}

.footer-contact-content p a:hover {
  color: var(--orange-color);
}

.footer-newsletter-form .form-group .form-control {
  padding: 13px 20px;
  border: none;
  background: var(--white-color);
  color: var(--text-color);
  border-radius: 8px;
  line-height: 1.5em;
  box-shadow: none;
  margin-bottom: 20px;
}

.footer-newsletter-form .form-group .form-control::placeholder {
  color: var(--text-color);
}

.footer-copyright {
  display: flex;
  gap: 15px 20px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--dark-divider-color);
  padding: 20px 0 40px;
  margin-top: 60px;
}

.footer-copyright-text p {
  color: var(--black-color);
  margin-bottom: 0;
}

.footer-social-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-social-links ul li {
  display: inline-block;
  margin-right: 20px;
}

.footer-social-links ul li:last-child {
  margin-right: 0;
}

.footer-social-links ul li a {
  width: 40px;
  height: 40px;
  /* color: var(--primary-color); */
  color: var(--white-color);
  background: var(--orange-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
.footer-social-links ul li a i {
  font-size: 18px;
  color: inherit;
  background-color: transparent !important;
}
.footer-payment-img {
  width: 30px;
  height: 20px;
}

/************************************/
/***   	17. About Us Page css	  ***/
/************************************/

.page-header {
  position: relative;
  background: url("../images/page-header-bg.jpg") no-repeat center center;
  background-size: cover;
  padding: 225px 0 120px;
}

.page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background:
    linear-gradient(
      180deg,
      rgba(6, 46, 57, 0) 44.56%,
      rgba(6, 46, 57, 0.9) 79.22%
    ),
    linear-gradient(
      180deg,
      rgba(6, 46, 57, 0.6) 7.55%,
      rgba(6, 46, 57, 0) 24.9%
    );
  width: 100%;
  height: 100%;
}

.page-header-box {
  position: relative;
  text-align: center;
  z-index: 1;
}

.page-header-box h1 {
  display: inline-block;
  font-size: 60px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white-color);
  margin-bottom: 10px;
  cursor: none;
}

.page-header-box ol {
  margin: 0;
  padding: 0;
  justify-content: center;
}

.page-header-box ol li.nav-breadcrumb-item {
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
  color: var(--secondary-color);
}

.page-header-box ol li.nav-breadcrumb-item a {
  color: inherit;
}

.page-header-box ol .nav-breadcrumb-item + .nav-breadcrumb-item::before {
  color: var(--secondary-color);
}

.about-us.page-about-us::before {
  display: none;
}  

.abs-logo-a {
  width: auto;
  height: auto;
}
.abs-logo {
  max-width: unset !important;
  width: 25vh;
}

label.form-label {
  color: var(--primary-color);
  font-weight: 500;
  font-size: 14px;
}

/* ===== Prevent ANY parent from clipping the zoom ===== */
.listing-item {
  overflow: visible !important;
  position: relative !important;
}
.tire-image,
.accessories-image {
  overflow: visible !important;
  position: relative !important;
}
.tire-image a,
.accessories-image a {
  display: block !important;
  overflow: visible !important;
  position: relative !important;
}
/* ===== Make figure the zoom surface ===== */
.tire-image .image-anime ,
.accessories-image .image-anime,
.dack-image .image-anime {
  overflow: hidden !important;          /* keeps clean edges */
  position: relative !important;
  border-radius: 10px !important;
  transform: scale(1) !important;
  transition: transform 0.35s ease !important;
  will-change: transform !important;
  z-index: 1 !important;
}
.dack-image-anime{
  height: auto !important;
}
/* ===== Keep image stable (do NOT scale image itself) ===== */
.tire-image .image-anime img,
.accessories-image .image-anime img,
.dack-image .image-anime img {
  width: 210px;
  height: 210px;
  display: block !important;
  transform: none !important;
  transition: none !important;
}
/* ===== Zoom the container instead of the image ===== */
.listing-item:hover .tire-image .image-anime,
.listing-item:hover .accessories-image .image-anime,
.dack-card:hover .dack-image .image-anime {
  transform: scale(1.08) !important;
  z-index: 9 !important;
  /* This allows visual overflow without layout breaking */
  /* clip-path: inset(-40px -40px -40px -40px round 10px) !important; */
}

/*
.hero-slider-image{
    position:relative;
}

.hero-typewriter{
    position:absolute;
    top:35%;
    left:70%;
    transform:translateX(-50%);
    z-index:5;
}

.hero-typewriter span{
    color:#fff;
    font-size:36px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    white-space:nowrap;
    overflow:hidden;
    display:inline-block;


    width:0;
    animation: typing 1.0s steps(38,end) forwards;

    text-shadow:0 2px 10px rgba(0,0,0,.5);
}

@keyframes typing{
    from{
        width:0;
    }

    to{
        width:100%;
    }
} */


.hero-slider-image{
    position:relative;
}
.hero-typewriter{
    position:absolute;
    top:20%;
    left:65%;
    transform:translateX(-50%);
    z-index:5;
}
#typewriter-text{
    font-size:48px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    white-space:nowrap;
    display:flex;
    align-items:center;
    overflow:hidden;
    width:0;
    /* Runs ONCE and stops */
    animation:mainTyping 2s steps(45,end) forwards;
}
.black-white{
    color:#000;
    -webkit-text-stroke:1.5px #fff;
    text-shadow:
        -1px -1px 0 #fff,
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff;
}
.orange-black{
    color:var(--orange-color);
    text-shadow:
        1px 1px 0 #000,
        2px 2px 0 #000,
        3px 3px 0 #000,
        4px 4px 6px rgba(0,0,0,0.45),

        /* White lighting/glow */
        0 0 6px rgba(255,255,255,0.9),
        0 0 12px rgba(255,255,255,0.7),
        0 0 18px rgba(255,255,255,0.5);

    position:relative;
    top:-1px;
}
.rotating-text{
    position:relative;
    display:inline-block;
    width:410px;
    height:70px;
    margin-left:-10px;
    overflow:hidden;
}
.rotating-text span{
    position:absolute;
    left:0;
    top:0;
    white-space:nowrap;
    overflow:hidden;
    width:0;
    opacity:0;
    animation:typingWords 6s infinite;
}
.rotating-text span:nth-child(1){
    animation-delay:1s;
}

.rotating-text span:nth-child(2){
    animation-delay:3s;
}

.rotating-text span:nth-child(3){
    animation-delay:5s;
}

@keyframes mainTyping{
    from{
        width:0;
    }
    to{
        width:100%;
    }
}
@keyframes typingWords{
    0%{
        width:0;
        opacity:1;
    }
    10%{
        width:100%;
        opacity:1;
    }
    30%{
        width:100%;
        opacity:1;
    }
    40%{
        width:0;
        opacity:0;
    }
    100%{
        width:0;
        opacity:0;
    }
}
.mobile-typewriter{
    display:inline-block;
    overflow:hidden;
    white-space:nowrap;
    font-size:18px;
    width:0;
    animation:mobileTypingLoop 4s steps(28,end) infinite;
}
@keyframes mobileTypingLoop{
    0%{
        width:0;
    }
    40%{
        width:100%;
    }
    60%{
        width:100%;
    }
    100%{
        width:0;
    }
}

/************************************/
/***      32. Responsive css      ***/
/************************************/

@media only screen and (max-width: 991px) {
  .abs-logo {
    max-width: unset !important;
    width: 20vh;
  }
  .navbar {
    /* padding: 20px 0; */
    padding: 0;
    border: 0 !important;
  }

  .slicknav_nav li,
  .slicknav_nav ul {
    display: block;
  }

  .responsive-menu,
  .navbar-toggle {
    display: block;
  }

  .header-btn {
    display: none;
  }

  .btn-default {
    /* padding: 14px 45px 14px 14px; */
    padding: 14px 14px 14px 14px;
  }

  .btn-default::before {
    right: 0px;
    width: 22px;
    height: 22px;
  }

  .section-row {
    margin-bottom: 40px;
  }

  .section-title-content {
    margin-top: 15px;
  }

  .section-row .section-btn {
    text-align: left;
    margin-top: 15px;
  }

  .section-title {
    margin-bottom: 30px;
  }

  .section-title h1 {
    font-size: 45px;
  }

  .section-title h2 {
    font-size: 36px;
  }

  .section-title p {
    margin-top: 15px;
  }

  .hero {
    padding: 300px 0 100px;
    /* min-height: auto; */
  }

  .hero.hero-slider-layout .hero-slide {
    padding: 300px 0 100px;
  }

  .hero.hero-slider-layout .hero-pagination {
    bottom: 30px;
  }

  .hero-content-box {
    gap: 40px;
  }

  .hero-customer-box,
  .hero-content {
    width: calc(50% - 20px);
  }

  .hero-content::before {
    right: -20px;
  }

  .hero-content .section-title p {
    font-size: 18px;
    margin-top: 10px;
    max-width: 75%;
  }
  .hero-customer-content {
    margin-bottom: 15px;
  }
  .hero-btn {
    margin-top: 20px;
  }
  .about-us {
    padding: 50px 0;
  }
  .about-us::before {
    display: none;
  }
  .about-us-content {
    margin-bottom: 30px;
  }
  .about-counter-item h2 {
    font-size: 36px;
  }
  .about-us-btn {
    margin-top: 30px;
  }
  .about-us-image {
    margin-right: 0;
  }
  .about-us-image figure,
  .about-us-image img {
    border-radius: 26px;
  }
  /* .about-us-image img {
    aspect-ratio: 1 / 0.7;
  } */
  .about-owner-box {
    gap: 30px;
    margin-top: 30px;
  }
  .about-owner-image,
  .about-owner-info {
    width: 100%;
  }
  .about-owner-content p {
    font-size: 18px;
  } 
  .about-owner-image figure,
  .about-owner-image img {
    border-radius: 26px;
  }
  .our-work-process {
    padding: 50px 0;
  }
  .work-process-item {
    width: calc(50% - 15px);
  }
  .work-process-item:nth-child(odd) {
    margin-top: 50px;
  }
  .work-process-item:nth-child(even):after {
    display: none;
  }
  .work-process-item .icon-box {
    width: 132px;
    height: 132px;
  }
  .work-process-item .icon-box img {
    max-width: 130px;
  }
  .work-process-item .icon-box .work-process-number h3 {
    font-size: 20px;
  }
  .work-process-content strong {
    font-size: 18px;
    margin-bottom: 10px;
    /* font-weight: lighter; */
  }
  .our-skill {
    padding: 50px 0;
  }
  .our-skill-images {
    max-width: 80%;
    margin: 0 auto;
    margin-bottom: 30px;
  }
  .our-skill-image-1 figure,
  .our-skill-image-1 img {
    border-radius: 26px;
  }
  .our-skill-image-2 {
    border-radius: 26px;
  }
  .contact-us-circle a img {
    max-width: 110px;
  }
  .our-skill-content {
    margin-left: 0px;
  }
  .our-skill-body {
    margin-bottom: 30px;
  }
  .skills-progress-bar {
    margin-bottom: 20px;
  }
  .our-testimonials {
    padding: 50px 0 25px;
  }
  .testimonial-slider .swiper {
    margin: 0 50px;
  }
  .testimonial-item {
    margin-top: 30px;
    padding: 45px 20px 20px;
    border-radius: 26px;
  }
  .author-image {
    top: -30px;
  }
  .author-content,
  .author-content .author-title {
    margin-bottom: 10px;
  }
  .author-image img {
    max-width: 60px;
  }
  .author-rating i {
    font-size: 18px;
  }
  .our-listing {
    padding: 50px 0 20px;
  }
  .team-image,
  .tire-image,
  .accessories-image {
    border-radius: 26px;
    margin-bottom: 15px;
  }
  .team-image img,
  .tire-image img,
  .accessories-image img {
    aspect-ratio: 1 / 1.01;
  }
  .team-social-icon {
    left: 30px;
    right: 30px;
  }
  .listing-item:hover .team-social-icon {
    bottom: 30px;
  }
  .main-footer {
    padding: 50px 0 0;
    margin-bottom: 0px;
  }
  .about-footer {
    margin: 0 0 30px 0;
    text-align: center;
  }
  .about-footer img {
    width: 50%;
  }
  .footer-logo {
    margin-bottom: 20px;
  }
  .footer-links {
    margin-bottom: 30px;
  }
  .footer-links span {
    margin-bottom: 15px;
  }
  .footer-links ul li {
    margin-bottom: 8px;
  }
  .footer-newsletter-form .form-group .form-control {
    padding: 10px 16px;
    margin-bottom: 15px;
  }
  .footer-social-links ul li {
    margin-right: 15px;
  }
  .footer-copyright {
    margin-top: 0px;
    padding: 20px 0;
  }
  .page-header {
    padding: 170px 0 80px;
  }
  .page-header-box h1 {
    font-size: 45px;
  }
  .service-solution-step-item {
    border-radius: 26px;
    padding: 20px;
    margin-bottom: 30px;
  }
  .service-solution-step-item .icon-box {
    height: 50px;
    width: 50px;
  }
  .service-solution-step-item .icon-box img {
    max-width: 26px;
  }
  .margin-top-5 {
    margin-top: 20px !important;
  }
  .row-reverse {
    flex-direction: column;
  }
 
  .navbar-brand {
    padding: 0 !important;
  }
  .cs-container {
    padding-right: 10px !important;
    left: 0 !important;
  }
  .footer-pages-links {
    display: flex;
    gap: 12px;
    width: 100%;
  }
  .padding-left-0 {
    padding-left: 0 !important;
  }
  .padding-right-0 {
    padding-left: 0 !important;
  }
  .dack-card {
    flex-direction: column !important;
    align-items: center !important;
  }
  .navbar-container {
    /* flex-direction: row-reverse; */
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
  }
  .logo-container{
		width: 100%;
		display: flex;
		justify-content: center;
    padding-top: 12px;
		/* padding-right: 5vh; */
	}
	.dack-image{
		width: 100% !important;
	}
  .car-search-padding{
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .filter-dropdown-res {
    width: 100%;
  }
  .selected-filter-car{
    width: 100% !important;
  }
  .selected-filter-dropdown{
    width: 100% !important;
    padding: 0 !important;
  }
  .spans-wrap{
    gap: 3px !important;
  }
  .seperator-line{
    height: 2px !important;
    width: 100% !important;
    border-radius: 8px !important;
  }
  .car-selected-filter.panel {
    flex-direction: column !important;
    padding: 12px !important;
  }
  .car-filter-content img {
    width: 70px !important;
    height: 70px !important;
  }
  .navbar-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    width: 100%;
  }
   .navbar-toggle {
    grid-column: 1;
    justify-self: start;
  }
  .logo-container {
    grid-column: 3;
    justify-self: center;
    text-align: center;
    padding-left: 20px;
  }
  .navbar-login-section {
    grid-column: 5;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 0 !important;
    padding-right: 8px;
  }
  .navbar-toggle {
    margin-right: 0 !important;
    margin-top: 0 !important;
  }
  .navbar-brand{
    padding: 0 !important;
  }
  .icon-group{
    margin-left: 0;
  }
  .product-car-search{
    flex-direction: column;
    align-items: center;
    gap: 1vh;
  }
  .product-car-search #regnrSearchDiv{
    width: 100%;
  }
  .product-car-search-btn,
  .product-car-search-btn button{
    width: 100% !important;
  }
  .feature-table-row-items{
    width: 100% !important;
  }
  .feature-video-section{
    width: 100% !important;
    padding-top: 0 !important;
  }
  .product-reg-label{
    display: flex;
  }
  .product-information span{
    /*display: flex !important;*/
    align-items: baseline !important;
    gap: 1vh;
  }
}


@media only screen and (max-width: 1200px) {
  .about-footer {
    margin: 0 0 30px 0;
    text-align: center;
  }
  .about-footer img {
    width: 50%;
  }
}

@media only screen and (max-width: 1300px) {
  .navbar-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    width: 100%;
  }
   .navbar-toggle {
    grid-column: 1;
    justify-self: start;
  }
  .logo-container {
    grid-column: 3;
    justify-self: center;
    text-align: center;
    padding-left: 20px;
    padding-top: 12px;
  }
  .navbar-login-section {
    grid-column: 5;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 0 !important;
    padding-right: 8px;
  }
  .navbar-toggle {
    margin-right: 0 !important;
    margin-top: 0 !important;
  }
  .icon-group{
    margin-left: 0;
  }
  .navbar-brand{
    padding: 0 !important;
  }
  .header-btn {
    display: none;
  }
  .fa-search,.fa-cart{
    font-size: 24px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-slider-image{
    display: none;
  }

  .hero.hero-slider-layout .hero-slide {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 40px 0 40px !important;
  }

  .mobile-hide {
    display: none !important;
  }
  .mobile-padding {
    padding-top: 30px !important;
  }
  .mobile-padding-pages {
    padding-top: 70px !important;
  } 					 
  .carsearch-box-inner{
    border: 1px solid var(--orange-color) !important;
    border-radius: 16px !important;
    background: #ffefd1 !important;
  }
  .header-btn {
    display: none;
  }
  .abs-logo {
    max-width: unset !important;
    width: 20vh;
  }
  .section-title h1 {
    font-size: 30px;
  }
  .section-title h2 {
    font-size: 26px;
  }
  .hero {
    padding: 250px 0 80px;
  }
  .hero.hero-slider-layout .hero-slide {
    /* padding: 250px 0 80px;
    min-height: 650px; */
    padding: 100px 0 0 0;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero.hero-slider-layout .hero-pagination {
    text-align: left;
    padding-left: 15px;
  }
  .hero-content-box {
    gap: 20px;
  }
  .hero-customer-box,
  .hero-content {
    width: 100%;
  }
  .hero-content {
    text-align: left;
  }
  .hero-content .section-title p {
    font-size: 16px;
    max-width: 100%;
  }
  .about-us::before {
    display: none;
  }
  .about-counter-box {
    gap: 20px;
  }
  .about-counter-item {
    width: calc(50% - 10px);
  }
  .about-counter-item h2 {
    font-size: 26px;
  }
  .about-owner-content p {
    font-size: 16px;
  }
  .about-owner-signature img {
    max-width: 120px;
  }
  .about-owner-info-content h3 {
    font-size: 18px;
  }
  .work-process-item {
    width: 100%;
  }
  .work-process-item:nth-child(odd) {
    margin-top: 0px;
  }
  .work-process-item:after {
    display: none;
  }
  .work-process-item .icon-box {
    width: 102px;
    height: 102px;
  }
  .work-process-item .icon-box img {
    max-width: 110px;
  }
  .work-process-item .icon-box .work-process-number {
    width: 30px;
    height: 30px;
    display: none;
  }
  .work-process-item .icon-box .work-process-number h3 {
    font-size: 16px;
  }
  .our-skill-images {
    max-width: 100%;
    padding: 0 55px 100px 0;
  }
  .our-skill-image-2 {
    max-width: 210px;
    border-width: 5px;
  }
  .contact-us-circle {
    bottom: 53px;
    left: 100px;
  }
  .contact-us-circle a img {
    max-width: 80px;
  }
  .skills-progress-bar .skillbar .skill-progress {
    height: 10px;
  }
  .testimonial-slider .swiper {
    margin: 0px;
    padding-bottom: 60px;
  }
  .author-rating i {
    font-size: 16px;
  }
  .testimonial-btn-prev,
  .testimonial-btn-next {
    top: auto;
    transform: translateY(0);
    bottom: 0px;
  }
  .testimonial-btn-prev {
    left: calc(50% - 25px);
    transform: translateX(-50%);
  }
  .testimonial-btn-next {
    right: calc(50% - 25px);
    transform: translateX(50%);
  }
  .listing-item:hover .team-social-icon {
    bottom: 20px;
  }
  .footer-logo {
    margin-bottom: 15px;
  }
  .footer-links span {
    font-size: 18px;
  }
  .footer-copyright {
    flex-direction: column;
    padding: 15px 0;
    margin-top: 0;
  }
  .page-header-box h1 {
    font-size: 30px;
  }
  .service-solution-step-item {
    align-items: start;
    border-radius: 15px;
    padding: 15px;
  }
  .service-solution-step-item .icon-box {
    margin-left: 10px;
  }
  .about-image img {
    height: 40vh;
  }
  .margin-top-5 {
    margin-top: 20px !important;
  }
  .row-reverse {
    flex-direction: column;
  }
  .navbar-brand {
    padding: 0 !important;
  }
  .cs-container {
    padding-right: 10px !important;
    left: 0 !important;
  }
  .footer-pages-links {
    display: flex;
    gap: 12px;
    width: 100%;
  }
  .padding-left-0 {
    padding-left: 0 !important;
  }
  .padding-right-0 {
    padding-left: 0 !important;
  }
  .dack-card {
    flex-direction: column !important;
    align-items: center !important;
  }
  .navbar-container {
    /* flex-direction: row-reverse; */
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    border-bottom: 2px solid var(--orange-color);
  }
 	.logo-container{
		width: 100%;
		display: flex;
		justify-content: center;
    padding-top: 12px;
		/* padding-right: 5vh; */
	}
	.dack-image{
    height: 260px !important;
    width: 260px !important;
	}
  .car-search-padding{
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .logo-container {
    padding-left: 24px;
  }
  .image-anime{
    height: auto;
    aspect-ratio: 0;
  }
  .team-image img,
  .tire-image img,
  .accessories-image img {
    height: 320px !important;
    width: 320px !important;
    aspect-ratio: 0.9 !important;
  }
  .listing-item{
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    height: auto;
  }
  
  /* Kill hover zoom on touch devices */
  .listing-item:hover .tire-image .image-anime,
  .listing-item:hover .accessories-image .image-anime {
    transform: none !important;
    clip-path: none !important;
  }

  /* Also prevent accidental tap-triggered hover on some phones */
  .listing-item .tire-image .image-anime,
  .listing-item .accessories-image .image-anime {
    transform: none !important;
    transition: none !important;
  }
  .listing-item:hover .tire-image img,
  .listing-item:hover .accessories-image img,
  .dack-card:hover .dack-image img{
    transform: none !important;
  }
  .tires-list,
  .accessories-list{
    flex: none;
  }
  .tire-info-section {
    gap: 0 !important;  
  }
  .tires-price-section,
  .accessories-price-section{
    gap: 1vh;
    margin-top: 8px;
  }
  .rim-price-section{
    gap: 0.3vh !important;
    margin-top: 0 !important;
  }
  .kop-nu-section,
  .accessories-kop-nu-section {
    width: 100%;
    padding: 0 2vh 0 2vh;
  }
  .tire-sizes-dropdown {
    width: 100%;
    padding: 0 2vh;
  }
  .tire-price h4,
  .accessories-price h4 {
    margin: 0;
  }
  .tire-sizes-dropdown .kop-nu-section{
    padding: 0;
  }
  .listing-container {
    width: 100%;
    padding: 0 2vh;
  }
  .card-mobile-row{
    width: 100vw;
  }

  .card-mobile-row #responseDiv{
    padding-right: 0px;

  }
  .card-filterSelVal{    
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: -12px;
  }

  .category-tab .nav-tabs {
    display: flex !important;
    flex-wrap: wrap !important; /* allow rows */
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .category-tab ul {
      border-bottom: 0 !important;
  }

  /* Each li acts as a tab box */
  .category-tab .nav-tabs > li {
      flex: 0 0 50% !important;       /* always 2 per row */
      max-width: 50% !important;
      box-sizing: border-box !important;
      margin: 0 !important;
      text-align: center !important;
      cursor: pointer !important;
      border: 1px solid orange !important;
  }

  /* Add divider between left and right tab */
  .category-tab .nav-tabs > li:nth-child(odd) {
      border-right: 1px solid orange !important;
  }

  /* Tab link styling */
  .category-tab .nav-tabs > li > a {
      display: block !important;
      padding: 10px !important;
      border-radius: 0 !important;
      background: #fff !important;
      color: #333 !important;
      transition: all 0.3s ease !important;
      width: 100% !important;
      box-sizing: border-box !important;
  }

  /* Hover effect */
  .category-tab .nav-tabs > li > a:hover {
      background: #fff5ec !important;
      color: #f7931e !important;
  }

  /* Active tab */
  .category-tab .nav-tabs > li.active > a {
      background: #fff5ec !important;
      color: #f7931e !important;
      font-weight: 600 !important;
  }

  /* Last row full width if odd number of tabs */
  .category-tab .nav-tabs > li:last-child:nth-child(odd) {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      border-right: 1px solid orange !important;
  }
  #similar-product{
    margin-bottom: 0 !important;
  }
  .dack-image .image-anime img {
    height: auto !important;
    width: auto !important;
  }
  .eu-dackmarkning-description img{
    margin-top: 4px;
    margin-bottom: 0;
  }
  .open-filter-link{
    flex-direction: column;
  }
  .paketBand{
    left: -6px !important;
    top: -18px !important;
  }
  .pd-paketBand{
    top: 10px !important;
    left: 13px !important;
  }
  /*.product-btn-row{
    display: none !important;
  }*/
  .mobile-sticky-cart{
    display:block !important;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    z-index:9999;
    padding:12px 14px;
    background:rgba(255,255,255,0.75);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(0,0,0,0.08);
  }
  .mobile-cart-inner{
    display:flex;
    gap:10px;
    align-items:center;
  }
  .mobile-cart-inner .quantity-input{
    width:70px;
    height:44px;
    text-align:center;
  }
  .mobile-add-cart{
    flex:1;
    padding:12px;
    font-weight:600;
  }
  .product-information,
  .shop-details-tab{
    padding-bottom: 0 !important;
  }
  .desc-box{
    margin-top: 0 !important;
  }
  .wide-search-input{
    width: auto !important;
  }
  .product-detail-dropdowns{
    flex-direction: column;
  }
  .product-detail-dropdowns p{
    width: 100% !important;
  }

}
@media only screen and (max-width: 350px) {
  .tire-image img,
  .accessories-image img {
    height: 280px !important;
    width: 280px !important;
    aspect-ratio: 0.9 !important;
  }
  #carsearchTab li.segment-btn a {
    width: 35vw !important;
  }
  .paketBand{
    top: -14px !important;
  }
  .pd-paketBand{
    top: 30px !important;
    left: 10px !important;
  }
}
@media (max-width: 1300px) {
  .main-header .navbar .main-menu {
    display: none !important; /* hide desktop menu */
  }
  .main-header .navbar .navbar-toggle {
    display: block !important; /* show hamburger */
  }
  .responsive-menu,
  .navbar-toggle {
    display: block;
  }
}
@media (min-width: 1301px) {
  .main-header .navbar .main-menu {
    display: flex !important;
  }
  .main-header .navbar .navbar-toggle {
    display: none !important;
  }
}
/* Custom Classes */
.margin-top-5 {
  margin-top: 64px;
}
.wheel-features img {
  width: 14px;
  height: 14px;
}
.wheel-features li{
  display: flex;
  gap: 4px;
  padding: 2px 0;
}
.wheel-features {
  padding-left: 0;
  list-style: none;
  line-height: normal;
}

/* Toggle Pill */
.segment-toggle {
  position: relative;
  display: inline-flex;
  width: 280px;
  height: 44px;
  background: #f3f3f3;
  border-radius: 50px;
  padding: 4px;
}

.segment-btn {
  flex: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  font-weight: 600;
  border-radius: 50px;
  transition: color 0.25s ease;
}

.segment-btn.active {
  color: white;
}

.segment-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: #fe980f;
  border-radius: 50px;
  z-index: 1;
  transition: transform 0.3s ease;
}

/* Step Views */
.view {
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.25s ease;
  margin-top: 14px;
}

.view.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Dropdowns */
.dropdown-label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  color: #222;
}

.car-dropdown {
  width: 100%;
  /* width: fit-content; */
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #d2d2d2;
  background: #fafafa;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  outline: none;
  transition:
    border-color 0.9s,
    box-shadow 0.2s;
  cursor: pointer;
}
.car-dropdown-option {
  color: #fe980f;
  font-weight: bold;
}
.car-dropdown-option:hover {
  background: #fe980f;
  color: white;
  cursor: pointer;
}

option:checked {
  background: #fe980f;
  color: white;
}

.car-dropdown:focus {
  border-color: #fe980f;
  box-shadow: 0 0 0 3px rgba(254, 152, 15, 0.35);
}

/* Final Step */
.summary-selected {
  font-size: 35px;
  font-weight: 700;
  font-style: italic;
  margin-bottom: 12px;
  color: black;
}

.product-type-group {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.ptype-btn {
  flex: 1;
  padding: 10px 8px;
  border-radius: 8px;
  background: #f4f4f4;
  border: 1px solid #ccc;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.ptype-btn.active {
  background: #fe980f;
  color: white;
}

.search-btn {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #fe980f;
  color: white;
  font-size: 15px;
  border: none;
  cursor: pointer;
}

.bottom-icons {
  margin-top: 10px;
}

.kop-nu-section,
.accessories-kop-nu-section {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 1vh;
  width: 100%;
}
.accessories-kop-nu-section a,
.kop-nu-section a{
	font-size: 18px;
  border-radius: 1vh;
  width: 100%;
  text-align: center;
}
.accessories-kop-nu-section ul{
  padding: 0 !important;
  width: 100%;
}
.accessories-kop-nu-section ul li{
  display: flex;
  gap: 8px;
}

.tire-sizes-dropdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.kop-nu-icon {
  width: 3vh;
  margin-right: 1vh;
}
.btn-default {
  padding-top: 1.5vh;
  padding-bottom: 1.5vh;
}
.quantity-input {
  width: 6vh;
  border-radius: 1vh;
  padding: 1vh;
  font-size: larger;
  font-weight: 400;
  text-align: center;
  border: 1px solid #fe980f;
}
.quantity-input:focus-within {
    border: 1px solid #fe980f !important;
  box-shadow: 0 0 0 4px rgba(254, 152, 15, 0.25);
  outline: none; 
}
.tire-type {
  color: var(--black-color) !important;
  /* font-weight: lighter; */
  font-size: 18px;
}

.tire-infos {
  display: flex;
  align-items: start;
  justify-content: center;
  gap: 12px;
}

.tire-info-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.tire-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-color: var(--orange-border-color);
  border: 1px solid var(--orange-bg-dark-color);
  padding: 4px;
  border-radius: 16px;
}
.tire-info img {
  width: 16px;
  height: 16px;
}
.tire-info p {
  margin: 2px 0 0 0;
  /* font-weight: lighter; */
  font-family: sans-serif;
  font-size: 16px;
  line-height: 0;
  color: var(--orange-bg-dark-color) !important;
}
.tire-info b {
  font-size: xx-small;
  font-weight: bolder !important;
  color: var(--orange-bg-dark-color);
}

.cs-container {
  position: absolute;
  /*z-index: 100000;*/
  top: 150px;
  left: 100px;
}

.carsearch-box-inner {
  height: auto;
  padding: 24px;
}

/* .carsearch-box-inner {
    background: rgba(255, 255, 255, 0.7) !important;
} */

.carsearch-box-inner img.innerimage {
  padding-top: 20px;
  margin-top: 0px !important;
}

.car-toggle {
  position: relative;
  display: inline-flex;
  gap: 0;
  background: #f2f4f7;
  border-radius: 10px;
  padding: 4px;
  list-style: none;
  border: 1px solid #d6d6d6;
  overflow: hidden;
}

.car-toggle li {
  position: relative;
  z-index: 2;
  flex: 1;
  text-align: center;
}

.car-toggle li a {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #4a4a4a;
  text-decoration: none;
  user-select: none;
}

.car-toggle li.active a {
  color: #fff;
}

.car-toggle .pill {
  position: absolute;
  z-index: 1;
  width: 50%;
  height: 100%;
  border-radius: 8px;
  background: #ff7d00; /* ABS Orange */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Kill Bootstrap tab look */
#carsearchTab.nav {
  border-bottom: none !important;
  width: 100%;
  background-color: white !important;
}
.carsearch-box-inner ul li.active:after {
  display: none;
}

#carsearchTab.nav > li > a {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Container */
#carsearchTab {
  position: relative;
  display: inline-flex;
  width: 280px;
  height: 44px;
  background: #f3f3f3;
  border-radius: 50px;
  padding: 4px;
  align-items: center;
  list-style: none;
  overflow: hidden;
}

/* Items */
#carsearchTab li.segment-btn {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  border-radius: 50px;
  cursor: pointer;
  transition: color 0.25s ease;
}

#carsearchTab li.segment-btn.active a {
  color: #fff;
}

/* Link */
#carsearchTab li.segment-btn a {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  user-select: none;
  height: auto;
}

/* Sliding Pill */
#carsearchTab .segment-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: #fe980f;
  border-radius: 50px;
  z-index: 1;
  transition: transform 0.3s ease;
}

.carsregnrsearch {
  padding-left: 0 !important;
}
.countryFlag {
  height: -webkit-fill-available;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  width: 9vh;
}

.carsregnrsearch:focus-within {
  border: 1px solid #fe980f;
  box-shadow: 0 0 0 4px rgba(254, 152, 15, 0.25);
}

/* ******************************** */
/* ========== ABS CAR FLOW – BASE ========== */

.absCarFlow {
  background: transparent;
  border-radius: 12px;
  padding: 10px 0;
  font-family: inherit;
}

.absCarFlow-step {
  opacity: 0;
  transform: translateY(10px);
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    max-height 0.25s ease;
}

.absCarFlow-step--active {
  opacity: 1;
  transform: translateY(0);
  max-height: 600px;
  pointer-events: auto;
}

.absCarFlow-stepHeader {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.absCarFlow-backLink {
  border: none;
  background: none;
  font-size: 12px;
  color: var(--orange-color);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.absCarFlow-summary {
  font-size: 13px;
  margin-bottom: 12px;
}

.absCarFlow-summaryLabel {
  font-weight: 600;
  margin-right: 4px;
}

.absCarFlow-summaryValue {
  color: #333;
}

.absCarFlow-summaryValue span + span {
  margin-left: 4px;
}

.absCarFlow-fieldRow {
  margin-bottom: 12px;
}

.absCarFlow-fieldRow--twoCols {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.absCarFlow-fieldCol {
  flex: 1 1 0;
  min-width: 0;
}

.absCarFlow-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
  color: #555;
}

.absCarFlow-select {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #d0d0d0;
  background-color: #fff;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("../img/icon/chevron-big-down.svg");
  background-repeat: no-repeat;
  background-size: 18px 18px !important;
  background-position: calc(100% - 10px) 50%;
  background-size: 12px 12px;
  cursor: pointer;
}

.absCarFlow-select:focus {
  border-color: #fe980f;
  box-shadow: 0 0 0 3px rgba(254, 152, 15, 0.25);
}

.absCarFlow-optionButtonsRow {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.absCarFlow-optionButtonsRow--split .absCarFlow-optionButton {
  flex: 1;
}

.absCarFlow-optionButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
  flex: 1;
}

.absCarFlow-optionButton--full {
  width: 100%;
}

.absCarFlow-optionButton--active {
  background: #fe980f;
  border-color: #fe980f;
  color: #fff;
  box-shadow: 0 4px 10px rgba(254, 152, 15, 0.35);
}

.absIcon {
  width: 16px;
  height: 16px;       
}

.absCarFlow-optionButton:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.absCarFlow-optionButton--active:hover {
  box-shadow: 0 5px 14px rgba(254, 152, 15, 0.45);
}

.absCarFlow-optionIcon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.absCarFlow-optionButton:focus-within {
  /*color: white;*/
}

.absCarFlow-searchRow {
  margin-top: 12px;
}

.absCarFlow-searchButton {
  width: 100%;
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(90deg, #fe980f, #ffb24a);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(254, 152, 15, 0.45);
  transition:
    transform 0.1s ease,
    box-shadow 0.2s ease,
    filter 0.15s ease;
}

.absCarFlow-searchButton:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 6px 16px rgba(254, 152, 15, 0.55);
}

.absCarFlow-searchButton:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(254, 152, 15, 0.35);
}

@media (max-width: 767px) {
  .absCarFlow-fieldRow--twoCols {
    flex-direction: column;
  }
  .absCarFlow-stepHeader {
    flex-direction: column;
    align-items: flex-start;
  }
  .absCarFlow-backLink {
    align-self: flex-start;
  }
  .cs-container{
    /* top: 90px; */
    top: 0px !important; 
    position: relative !important;
  }

}

#absCarFlow {
  display: none;
}

.absCarFlow-seasonHidden {
  display: none !important;
}

.absCarFlow-carSummary {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  margin-top: 12px;
}

.absCarFlow-carImage {
  width: 80px;
}

.absCarFlow-carImage img {
  width: 100%;
  object-fit: contain;
}

.absCarFlow-carText {
  flex: 1;
  position: relative;
  font-size: 14px;
}

.absCarFlow-remove {
  position: absolute;
  right: 0;
  top: -5px;
  border: none;
  background: none;
  font-size: 22px;
  color: #e74c3c;
  cursor: pointer;
}

/* car list dropdown */
/* =========================================================
   REG NO → CAR BRAND SEARCH (ABS STYLE)
   Targets ONLY existing PHP structure
   ========================================================= */

/* ---------- Header + Body Wrapper ---------- */

#carSearchHeader,
#carSearchBody {
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
#carSearchBody {
  background: #fff;
  border: 1px solid #eee;
}

/* spacing between input & list */
#carSearchHeader {
  margin-bottom: 8px;
}

/* ---------- Error Message ---------- */

#carSearchErrorbox {
  font-size: 13px;
  font-weight: 500;
  /*color: #d32f2f;*/
  margin-bottom: 8px;
  display: none;
}

#carSearchErrorbox:not(:empty) {
  display: block;
}

/* ---------- Search Form ---------- */

#searchCarFrm {
  position: relative;
}

#carSearchString {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #d0d0d0;
  background-color: #fff;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#carSearchString::placeholder {
  color: #999;
}

#carSearchString:focus {
  border-color: var(--orange-color);
  box-shadow: 0 0 0 3px rgba(254, 152, 15, 0.25);
}

.carsregnrsearch input {
	height: auto !important;
  padding-left: 25px !important;
}
/* ---------- Optional Back Link Area ---------- */

#searchbackdiv {
  font-size: 12px;
  color: var(--orange-color);
}

/* ---------- Dropdown Body ---------- */

#carSearchBody {
  border: 1px solid #eee;
  /* max-height: 280px;
  overflow-y: auto; */
}
/* #carSearchBody {
  box-sizing: border-box;
  overflow-y: auto;
} */

/* ---------- Brand List Container ---------- */
#carmakediv {
  max-height: 280px;
  overflow-y: auto; /* ⬅️ scrollbar lives here */
  margin: 0;
  padding: 0;
}

/* ---------- Brand Item ---------- */

#carmakediv .list-group-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 10px;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

#carmakediv .list-group-item:last-child {
  border-bottom: none;
}

/* ---------- Hover State ---------- */

#carmakediv .list-group-item:hover {
  background: #fff7ee;
}

/* ---------- Active / Selected ---------- */

#carmakediv .list-group-item.active {
  /*background: var(--orange-color);
  color: #fff;*/
}

#carmakediv .list-group-item.active span {
  /* color: #fff;*/
}

/* ---------- Brand Icon ---------- */

#carmakediv .list-group-item img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ---------- Brand Name ---------- */

#carmakediv .list-group-item span {
  font-size: 14px;
  white-space: nowrap;
}

/* ---------- Scrollbar (Optional, subtle) ---------- */
#carmakediv::-webkit-scrollbar {
  width: 6px;
}

#carmakediv::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}

#carmakediv::-webkit-scrollbar-track {
  background: transparent;
}

.brand-select {
  font-size: 13px;
  font-weight: bold;
  margin: 10px 0px;
}

.brand-select.hidden {
  display: none;
}

.brand-select.visible {
  display: block;
}

.modal-backdrop {
  display: none !important;
}

.cart-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--orange-color);
  text-decoration: none;
}

.cart-icon-wrapper:hover,
.cart-icon-wrapper:focus {
  color: var(--orange-color);
  text-decoration: none;
}

.badge_cart {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: red;
  color: white;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.badge-span {
  line-height: 1;
}

body.modal-open {
  padding-right: 0 !important;
  overflow: hidden; /* Keep scrollbar hidden if needed */
}

/**************************** Pagination Control *****************************/ 
.pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
}

.pagination-numbers {
  display: flex;
  gap: 6px;
}

/* li style */
.page-number {
  list-style: none;
}

/* anchor becomes the actual button */
.page-number a,
.page-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--orange-color);
  background: var(--white-color);
  color: var(--orange-color);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.25s ease;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Prev / Next buttons */
.page-btn {
  background: var(--orange-color);
  color: var(--white-color);
}

/* ✅ ACTIVE PAGE (correct target) */
.page-number.active a {
  background: var(--orange-color);
  color: var(--white-color);
  border-color: var(--orange-color);
}

/* Hover state */
.page-number:not(.active) a:hover,
.page-btn:hover {
  background-color: var(--orange-color);
  color: var(--white-color);
}

/* dots */
.page-dots {
  display: flex;
  align-items: center;
  padding: 0 6px;
  color: var(--orange-color);
}

/* Selected Filters */
.panel-body {
	padding: 0 !important;
}
select.input-lg {
  line-height: normal !important;
}
.input-lg {
  line-height: normal !important;
}

/* ********* Small Modals ********* */
#searchProductModel form{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Root Scoped Variable */
#searchProductModel {
  --sp-orange: #fe980f;
}

/* Overlay background */
#searchProductModel.modal {
  background: rgba(0, 0, 0, 0.65) !important;
}

/* Modal dialog positioning */
#searchProductModel .modal-dialog {
  transition: all 0.3s ease !important;
}

/* Modal box */
#searchProductModel .modal-content {
  border-radius: 14px !important;
  border: 2px solid var(--sp-orange) !important;
  box-shadow: 0 10px 40px rgba(254, 152, 15, 0.35) !important;
  overflow: hidden !important;
}

/* Modal body */
#searchProductModel .modal-body {
  padding: 25px !important;
  background: #ffffff !important;
}

/* Section headings */
#searchProductModel strong {
  font-size: 16px !important;
  color: #222 !important;
  letter-spacing: 0.3px !important;
}

/* Divider line */
#searchProductModel hr {
  margin: 18px 0 !important;
  border-top: 1px solid #eee !important;
}

/* Inputs */
#searchProductModel input[type="text"] {
  height: 38px !important;
  border-radius: 8px !important;
  border: 1px solid #ddd !important;
  padding: 6px 10px !important;
  transition: all 0.25s ease !important;
}

/* Input focus */
#searchProductModel input[type="text"]:focus {
  border-color: var(--sp-orange) !important;
  box-shadow: 0 0 0 3px rgba(254, 152, 15, 0.2) !important;
  outline: none !important;
}

/* Select dropdowns */
#searchProductModel select {
  height: 38px !important;
  border-radius: 8px !important;
  border: 1px solid #ddd !important;
  background: #fff !important;
  transition: all 0.25s ease !important;
  background-image: url("../img/icon/chevron-big-down.svg") !important;
  background-repeat: no-repeat !important;
  background-size: 18px 18px !important;
  background-position: calc(100% - 10px) 50% !important; 
  background-size: 12px 12px !important;
  cursor: pointer !important;
  -webkit-appearance: none;
}

/* Select focus */
#searchProductModel select:focus {
  border-color: var(--sp-orange) !important;
  box-shadow: 0 0 0 3px rgba(254, 152, 15, 0.2) !important;
  outline: none !important;
}

/* Search buttons */
#searchProductModel .web_btn,
#searchProductModel button[type="submit"] {
  height: 38px !important;
  border-radius: 8px !important;
  background: var(--sp-orange) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  transition: all 0.25s ease !important;
}

/* Button hover */
#searchProductModel .web_btn:hover,
#searchProductModel button[type="submit"]:hover {
  background: #e4870d !important;
  box-shadow: 0 6px 18px rgba(254, 152, 15, 0.45) !important;
  transform: translateY(-1px);
}

/* Button click */
#searchProductModel .web_btn:active {
  transform: scale(0.98);
  box-shadow: 0 3px 10px rgba(254, 152, 15, 0.35) !important;
}

/* Grid spacing cleanup */
#searchProductModel .row {
  margin-left: -5px !important;
  margin-right: -5px !important;
}

#searchProductModel .row > div {
  padding-left: 5px !important;
  padding-right: 5px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  /* font-family: 'PT Sans', sans-serif !important; */
  margin-bottom: 1vh !important;
}

/* Small helper spacing */
#searchProductModel .pbottom-5 {
  margin-bottom: 10px !important;
}

/* Smooth appearance animation */
#searchProductModel.modal.in .modal-dialog {
  animation: spModalFade 0.35s ease-out;
}

@keyframes spModalFade {
  from {
    opacity: 0;
    transform: translateY(-25px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Mobile Optimization */
@media (max-width: 480px) {
  #searchProductModel .modal-dialog {
    width: 92% !important;
    margin: 20px auto !important;
  }
  .product-information{
    margin-top: 0 !important;
  }
}

/* ********* Login Modal ********* */ 
#loginFrmDiv{
  margin: 0 !important;
}

#loginModel.modal.in::before,
#recommendFriendModel.modal.in::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.65) !important;
  z-index: 1040 !important;
}

#loginModel .modal-dialog ,
#recommendFriendModel .modal-dialog {
  position: relative !important;
  z-index: 1050 !important;
  transition: all 0.3s ease !important;
}

/* ---------- Modal Container ---------- */
#recommendFriendModel .modal-content {
  min-width: 500px;
}
#recommendFriendModel .modal-dialog {
    display: flex;
    justify-content: center;
}

#loginModel .modal-content, 
#recommendFriendModel .modal-content {
  border-radius: 14px !important;
  border: 2px solid var(--orange-color) !important;
  box-shadow: 0 12px 45px rgba(254,152,15,0.35) !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* ---------- Header ---------- */
#loginModel .modal-header ,
#recommendFriendModel .modal-header {
  background: #fff7ec !important;
  border-bottom: 1px solid #f1f1f1 !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row-reverse !important;
}

#loginModel .modal-title,
#recommendFriendModel .modal-title {
  font-size: 16px !important;
  color: #222 !important;
  letter-spacing: 0.3px !important;
  /* font-family: 'PT Sans', sans-serif !important; */
}

/* Close button */
#loginModel .close,
#recommendFriendModel .close {
  font-size: 22px !important;
  opacity: 0.6 !important;
  transition: all 0.25s ease !important;
}

#loginModel .close:hover,
#recommendFriendModel .close:hover {
  opacity: 1 !important;
  color: var(--orange-color) !important;
}

/* Form layout */
#loginModel .login-form,
#recommendFriendModel .login-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Inputs */
#loginModel .login-form input.form-control,
#recommendFriendModel .login-form input.form-control {
  height: 40px !important;
  border-radius: 8px !important;
  border: 1px solid #ddd !important;
  padding: 6px 12px !important;
  transition: all 0.25s ease !important;
  box-shadow: none !important;
}

/* Input focus (orange glow like search modal) */
#loginModel .login-form input.form-control:focus,
#recommendFriendModel .login-form input.form-control:focus {
  border-color: var(--orange-color) !important;
  box-shadow: 0 0 0 3px rgba(254,152,15,0.2) !important;
  outline: none !important;
}

/* ---------- Forgot Password Link ---------- */
#loginModel #forgotPassAnch {
  font-size: 13px !important;
  letter-spacing: 0.3px !important;
  /* font-family: 'PT Sans', sans-serif !important; */
  color: #666 !important;
  text-decoration: none !important;
  margin-top: 4px !important;
  transition: all 0.25s ease !important;
}

#loginModel #forgotPassAnch:hover {
  color: var(--orange-color) !important;
}

/* Error container */
#loginModel #loginFailErrorDiv,
#recommendFriendModel #loginFailErrorDiv {
  margin-top: 10px !important;
  font-size: 13px !important;
}

/* ---------- Footer ---------- */
#recommendFriendModel .modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#loginModel .modal-footer,
#recommendFriendModel .modal-footer {
  border-top: 1px solid #f1f1f1 !important;
  padding: 16px 18px !important;
  background: #fff !important;
}

/* Login Button */
#loginModel #loginSubmit,
#recommendFriendModel #emailSendBtn,
#recommendFriendModel #cartModalCloseBtn,
#finishOrderFrm button, #loginCloseBtn{
  width: 100% !important;
  height: 40px !important;
  border-radius: 8px !important;
  background: var(--orange-color) !important;
  border: none !important;
  color: #fff !important;  
  font-size: 16px !important;
  letter-spacing: 0.3px !important;
  /* font-family: 'PT Sans', sans-serif !important; */
  line-height: 0;
  transition: all 0.25s ease !important;
}

/* Hover */
#loginModel #loginSubmit:hover,
#recommendFriendModel #emailSendBtn:hover,
#recommendFriendModel #cartModalCloseBtn:hover,
#loginModel #loginCloseBtn:hover,
#finishOrderFrm button:hover {
  background: #e4870d !important;
  box-shadow: 0 6px 18px rgba(254,152,15,0.45) !important;
  transform: translateY(-1px);
}

/* Click */
#loginModel #loginSubmit:active,
#recommendFriendModel #emailSendBtn:active,
#loginModel #loginCloseBtn:active{
  transform: scale(0.98) !important;
  box-shadow: 0 3px 10px rgba(254,152,15,0.35) !important;
}
#loginModel #loginSubmit:is(:focus, :active),
#recommendFriendModel #emailSendBtn:is(:focus, :active),
#loginModel #loginCloseBtn:is(:focus, :active) {
  outline: none !important;
  box-shadow: 0 6px 18px rgba(254,152,15,0.45) !important;
}
  
#loginModel.modal.in .modal-dialog,
#recommendFriendModel.modal.in .modal-dialog {
  animation: loginModalFade 0.35s ease-out;
}

@keyframes loginModalFade {
  from {
    opacity: 0;
    transform: translateY(-25px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 480px) {
  #loginModel .modal-dialog {
    width: 92% !important;
    margin: 25px auto !important;
  }
}
/* ********* Cart Added Modal ********* */
#basicModal.modal.in::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,0.65) !important;
  z-index: 1040 !important;
}

#basicModal .modal-dialog {
  position: relative !important;
  z-index: 1050 !important;
  transition: all 0.3s ease !important;
}

/* Modal container */
#basicModal .modal-content {
  border-radius: 14px !important;
  border: 2px solid var(--orange-color) !important;
  box-shadow: 0 12px 45px rgba(254,152,15,0.35) !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* Header */
#basicModal .modal-header {
  background: #fff7ec !important;
  border-bottom: 1px solid #f1f1f1 !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 15px !important;
  /* font-family: 'PT Sans', sans-serif !important; */
  color: #222 !important;
}

/* Cart icon */
#basicModal .modal-header i {
  color: var(--orange-color) !important;
  font-size: 18px !important;
}

/* Close button */
#basicModal .close {
  font-size: 22px !important;
  opacity: 0.6 !important;
  margin-left: auto !important;
  transition: all 0.25s ease !important;
}

#basicModal .close:hover {
  opacity: 1 !important;
  color: var(--orange-color) !important;
}

/* Body */
#basicModal .modal-body {
  padding: 20px !important;
  /* font-family: 'PT Sans', sans-serif !important; */
}

/* Links */
#basicModal .modal-body a {
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}
/* Go to cart button */
#basicModal .modal-body a {
  background: var(--orange-color) !important;
  color: #fff !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  display: inline-block !important;
  transition: all 0.25s ease !important;
}

#basicModal .modal-body a:hover {
  background: #e4870d !important;
  box-shadow: 0 6px 18px rgba(254,152,15,0.45) !important;
  transform: translateY(-1px);
}

/* Animation */
#basicModal.modal.in .modal-dialog {
  animation: cartModalFade 0.35s ease-out;
}

@keyframes cartModalFade {
  from {
    opacity: 0;
    transform: translateY(-25px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Mobile */
@media (max-width:480px) {
  #basicModal .modal-dialog {
    width: 92% !important;
    margin: 25px auto !important;
  }
}

/* ************* Selected Filter Section ************* */
/* .selected-filter-row{
  display: flex;
  justify-content: center;
  margin-bottom: 4vh;
  gap: 24px;
} */

.selected-filter-car{
  width: 40%;
}

.car-selected-filter {
    border-radius: 14px !important;
}

.car-selected-filter.panel {
	  display: flex;
    flex-direction: row;
	  align-items: center;
    border: 1px solid var(--orange-color) !important;
    box-shadow: 0 6px 18px rgba(254, 152, 15, 0.25);
    padding: 0 16px 0 16px;
}
.car-selected-regnr {
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: space-between;
}
.close-filter {
  font-size: 26px;
  background: none;
  border: none;
  color: var(--orange-color);
  cursor: pointer;
}
.selected-close-filter{
  width: 100%;
  display: flex;
  align-items: center;
}
.selected-close-cross {
  opacity: 1; 
  position: absolute; 
  top: -10px; 
  right: 0; 
  width: auto;
}
.selected-filter-sizes{
  flex-wrap: wrap;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.car-filter-content {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 24px;
}
/*.car-filter-content img {
  width: 120px;
  height: 120px;
} */

.car-filter-content::-webkit-scrollbar {
  height: 6px;
}

.car-filter-content::-webkit-scrollbar-thumb {
  background: var(--orange-border-color);
  border-radius: 10px;
}

.car-filter-content::-webkit-scrollbar-track {
  background: transparent;
}

.filter-car-name {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* .filter-car-name h4 {
  font-weight: lighter;
} */
.selected-filter-dropdown{
  width: 60%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 0 12px 0;
}

.filter-heading-main{
  color: orange !important;
  font-size: 18px;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  /*margin-bottom: 8px;*/
}

.filter-dropdown, .filter-dropdown-res {
  width: 20vh;
}

.checkbox-filter-content{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.open-filter-link{ 
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  padding-top: 1vh;
}
.open-filter-link label,
.checkbox-filter-content label,
#addServicesDiv .styled-checkbox label{
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom:0px;
}
.recomm-size-btn {
  text-decoration: none !important;
  text-transform: capitalize !important;
  color: var(--secondary-color) !important;
  background: var(--orange-color) !important;
  border: 2px solid var(--orange-border-color) !important;
  box-shadow: none !important;
  width: fit-content !important;
  display: flex !important;
  align-items: center !important; 
  justify-content: center !important;
  gap: 12px !important;
  font-size: 18px !important;
  border-radius: 8px !important;
  padding: 10px 10px 10px 10px !important;
  line-height: normal !important;
  cursor: pointer !important;
}
.recomm-size-btn:hover {
  background-color: var(--orange-hover-color) !important;
  transition: 0.2s ease-out !important;
}
.recomm-size-selected {
  background-color: var(--orange-bg-dark-color) !important;
  color: var(--white-color) !important;
  border-color: var(--orange-bg-dark-color) !important;
  box-shadow: 0 4px 12px rgba(254, 152, 15, 0.35) !important;
  transform: translateY(-1px) !important;
}
.recomm-size-btn.disabled {
  background: var(--orange-border-color) !important;
  color: var(--orange-disabled-text) !important;
  border-color: var(--orange-border-color);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

/* Prevent hover effect */
.recomm-size-btn.disabled:hover {
  background: var(--orange-border-color) !important;
}

/* Checkbox styling*/
/* Container alignment */
.styled-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}

input[type="checkbox"] {
  margin: 0 !important;
}

/* Hide native checkbox */
.styled-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #fe980f;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Hover */
.styled-checkbox input[type="checkbox"]:hover {
  background: #fbcf94;
  transform: scale(1.05);
}

/* Checked state */
.styled-checkbox input[type="checkbox"]:checked {
  background: #fe980f;
  border-color: #fe980f;
  box-shadow: 0 4px 10px rgba(254, 152, 15, 0.35);
}

/* Tick mark */
.styled-checkbox input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s ease;
}

/* Show tick */
.styled-checkbox input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

/* Accessibility focus */
.styled-checkbox input[type="checkbox"]:focus {
  outline: 3px solid #fbcf94;
  outline-offset: 2px;
}
.styled-checkbox label {
  margin: 0;
}

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  margin: 0;
  outline: none;

  width: 22px;
  height: 22px;

  border: 2px solid #fe980f;
  border-radius: 50%;

  background: #fff;
  background-image: none;

  cursor: pointer;
  position: relative;

  transition: all 0.25s ease;

  box-shadow: 0 2px 6px rgba(0,0,0,0.08);

  /* remove mobile highlight */
  -webkit-tap-highlight-color: transparent;
}
input[type="radio"]:hover {
  background: #fbcf94;
  transform: scale(1.05);
}
input[type="radio"]:checked {
  background: #fff;
  border-color: #fe980f;
  box-shadow: 0 4px 10px rgba(254,152,15,0.35);
}
input[type="radio"]::before {
  content: "";
  position: absolute;

  width: 10px;
  height: 10px;

  border-radius: 50%;
  background: #fe980f;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease;
}
input[type="radio"]:checked::before {
  transform: translate(-50%, -50%) scale(1);
}
input[type="radio"]:focus,
input[type="radio"]:active {
  outline: none !important;
  box-shadow: none;
}
input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(254,152,15,0.35);
}
input[type="radio"]::-moz-focus-inner {
  border: 0;
}

.filter-btn {
  width: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* height: -webkit-fill-available; */
  font-size: 18px;
  border-radius: 8px;
}

.filter-btn:hover {
  background: var(--orange-color);
}

/* Top Controls */
.list-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}
.spans-wrap{
  /*width: 90%;*/
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
}

@media only screen and (max-width: 1500px) {
    .filter-dropdown-res {
      width: 100%;
    }
}

/* ****************** navbar css ***************** */
.mobile-login-item {
  display: none;
}

/* **** Seperator Line *************/
.seperator-line{  
  height: 30vh;
  background: orange;
  width: 2px;
  margin: 20px !important;
}

/* Product Detail Page */
.view-product-falgar,
.view-product-dack,
.view-product-accessory{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
				   
}
.view-product-falgar img,
.view-product-dack img,
.view-product-accessory img {
  border: none !important;
}
.view-product-falgar img,
.view-product-dack img {
  width: 350px !important;
}
.view-product-falgar img,
.view-product-accessory img {
  height: 350px !important;
}
.view-product-dack img{
  height: 400px !important;
}

.view-product-falgar em,
.view-product-dack em{
  color: orange;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
}
.category-tab{
  border: none !important;
}
/* Hover only for non-active tabs */
.nav-tabs li:not(.active) a:hover {
  background-color: transparent !important;
  color: var(--orange-color) !important;
}
.nav-tabs li.active a,
.nav-tabs li a:hover{
    border-radius: 8px 8px 0 0;
}

.product-name{
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8px;		   
}
.product-name a{
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-name h1{
  font-size: 20px !important;
  font-weight: normal;
  margin-bottom: 0;
}
.back-arrow{
  width: 14px;
  height: 14px;
  margin-bottom: 2px;
}
.bulletlist{
  font-size: 16px !important;
}
.product-details{
  margin-top: 10vh !important;
}
.product-information{
  padding-left: 0 !important;
}
.product-information-list{
  display: flex;
  flex-direction: column;
}
.product-information-list p {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.product-information-list p strong,
.product-information-list h2{
  font-size: 14px !important;
  font-weight: 400 !important; 
}
.product-detail-dropdowns{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.product-detail-dropdowns p{
  width: 50%;
}
.product-detail-dropdowns p select{
  width: 100% !important;
}

.eu-dackmarkning{
  display: flex;
  gap: 8px;
  width: 100%;
  padding-top: 10px;
}
.eu-dackmarkning-description{
  width: 70%;
}
.eu-dackmarkning-description > div{
  display: flex;
  gap: 4px;
}

.eu-dackmarkning-image{
  width: 30%;
}
.bult-och-mutter-description p,
.tpms-description p,
.abs-360-description p{
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.product-information-list img,
.bult-och-mutter-description img,
.tpms-description img,
.abs-360-description img,
.eu-dackmarkning-description img{
  width: 20px !important;
  height: 20px !important;
  margin-bottom: 2px;
}
.eu-dackmarkning img{
  width: 120px;
  height: 120px;
}
.add-to-cart-btn{
  width: 100%;
}
.product-information span span{
  font-weight: 400 !important;
  font-size: 40px !important;
}
.product-btn-row{
  display: flex;
  width: 100%;
  gap: 8px;
}
.mobile-sticky-cart{
  display:none;
}

.desc-box{
  position:relative;
  max-width:100%;
  margin: 20px 20px 20px 20px;
}
/* text clamp */
.desc-text{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  line-height:1.6;
  margin:0;
}
.desc-box::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:35px;

  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,1)
  );
  pointer-events:none; /* IMPORTANT */
}
.accessories-product-desc{
  margin-top: 10px;
}
.accessories-product-desc p{
  margin: 0 !important;
}
.text-orange {
  color: var(--orange-color) !important;
}
/* show more */
.show-more{
  position:absolute;
  right:0;
  bottom:0;
  background:#fff;
  padding-left:6px;
  z-index:2; /* above overlay */
}

.show-more a{
  color:#fe980f;
  text-decoration:none;
  cursor:pointer;
}

/* expanded */
.desc-box.expanded .desc-text{
  -webkit-line-clamp:unset;
  line-clamp:unset;
}

.desc-box.expanded::after{
  display:none;
}
.desc-box.expanded .show-more{
  display:none;
}

.product-reg-label{
  padding-left: 0 !important;
}
.product-reg-label span label{
  font-weight: 400 !important;
}
.product-car-search-btn button{
  padding: 15px 45px;
}
/* Section just centers the video */
.feature-video-section {
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  width: 50%;
}
/* Controls the width only */
.feature-video-container {
  width: 100%;
  max-width: 1100px; /* adjust as needed */
}
/* Video wrapper with rounded corners ONLY */
.youtube-video-place {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;   /* ← rounded edges */
  overflow: hidden;      /* ← ensures iframe follows the radius */
}
/* Video fills perfectly */
.youtube-video-place iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.content h3{
  color: var(--orange-color);
}
.category-tab ul {
  margin: 0 !important;
}
.search-bil-box{
  border: 1px solid var(--orange-color) !important;
  border-radius: 8px !important;
  background: var(--orange-bg-light-color) !important;
  padding: 16px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.search-bil-box #carSearchBtn{
  border: 1px solid var(--orange-color);
  background: transparent;
  color: var(--orange-color);
}
/*.search-bil-box .product-detail-car-search-result:not(:empty){
  border: 1px solid orange; */
  /*padding: 2vh !important;
  margin: 2vh;*/
  /*border-radius: 12px;
}*/

.search-bil-box .product-detail-car-search-result{
  border: 1px solid var(--orange-color) !important;
  /*padding: 2vh !important;
  margin: 2vh;*/
  border-radius: 12px !important;
  background: transparent !important;
}

/* ===== Product Feature Table Layout ===== */
.product-feature-table .row {
  display: flex;
  flex-wrap: wrap;
}
.feature-table-row-items{
  width: 50%;
}
/* Left content column */
.product-feature-table .col-sm-6.col-md-8 {
  padding-right: 25px;
}
/* Each feature row behaves like a table row */
.product-feature-table .pbottom-5,
.product-feature-table .pbottom-15 {
  display: flex;
  align-items: stretch;
  margin: 0;
}
/* Label cell (acts like TH) */
.product-feature-table .pbottom-5 > div:first-child,
.product-feature-table .pbottom-15 > div:first-child {
  background: #ffe8cc;          /* light orange */
  font-weight: 600;
  padding: 12px 15px;
  min-width: 180px;
  display: flex;
  align-items: center;
}
/* Value cell (acts like TD) */
.product-feature-table .pbottom-5 > div:last-child,
.product-feature-table .pbottom-15 > div:last-child {
  background: #fff;
  padding: 12px 15px;
  flex: 1;
  display: flex;
  align-items: center;
}
/* Remove Bootstrap extra vertical spacing */
.product-feature-table .ptop-5,
.product-feature-table .pbottom-5 {
  padding: 0;
}
/* Link styling inside table */
.product-feature-table a {
  color: #f7931e;
  text-decoration: none;
  font-weight: 500;
}
.product-feature-table a:hover {
  text-decoration: underline;
}
/* Accordion container */
.product-accordion{
  border:1px solid #eee;
  border-radius:8px;
  overflow:hidden;
  padding-bottom: 0 !important;
}
/* Accordion item */
.product-accordion .accordion-header{
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  padding:14px 18px;
  background: var(--orange-bg-light-color);
  border: 1px solid var(--orange-border-color);
  cursor:pointer;
  position:relative;
  transition:.25s;
}
/* Icon */
.product-accordion .accordion-header:after{
  content:"";
  position:absolute;
  right:20px;
  top:50%;
  width:18px;
  height:18px;

  transform:translateY(-50%) rotate(0deg);
  transition:transform 0.3s ease;

  background-image:url('../img/icon/chevron-big-down.svg'); /* your svg */
  background-size:contain;
  background-repeat:no-repeat;
}
/* Active */
.product-accordion .accordion-item.active .accordion-header{
  background:#ffe8cc;
}
.product-accordion .accordion-item.active .accordion-header:after{
  transform:translateY(-50%) rotate(180deg);
}
.product-accordion .accordion-body{
  max-height:0;
  overflow:hidden;
  /* padding:0 20px; */
  background:#fff;
  transition: 0.8s ease-in-out;
  margin-bottom: 8px;
}
/* Open state */
.product-accordion .accordion-item.active .accordion-body{
  max-height:1500px; /* large enough for content */
  padding:10px;
  border: 1px solid var(--orange-border-color);
  /* background: #fff8ea; */
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
/* Feature table */
.product-feature-table .row{
  display:flex;
  flex-wrap:wrap;
}

.feature-table-row-items{
  width:50%;
}

.product-feature-table .pbottom-5,
.product-feature-table .pbottom-15{
  display:flex;
  border-bottom:1px solid var(--orange-border-color);
}

.product-feature-table .pbottom-5 > div:first-child,
.product-feature-table .pbottom-15 > div:first-child{
  background:#ffe8cc;
  min-width:170px;
  padding:12px 15px;
  font-weight:600;
}

.product-feature-table .pbottom-5 > div:last-child,
.product-feature-table .pbottom-15 > div:last-child{
  flex:1;
  padding:12px 15px;
}

/* Video */

.feature-video-side{
  flex:1;
  display:flex;
  justify-content:flex-end;
}

/* Responsive */

@media (max-width:850px){

  .product-feature-table .row{
    flex-direction:column;
  }

  .feature-table-row-items{
    width:100%;
  }

}
.product-car-search{
  display: flex;
  /*flex-direction: column;*/
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 2vh;
}
.product-car-search-frm{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 8vh;
}
.carsregnrsearch.regnr {
    background: url("../img/regsearch.png") no-repeat #fff !important;
    background-size: auto 100% !important;
    margin-top: 0 !important;
}
/* ===== Right Side Video ===== */
.feature-video-side {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.feature-video-side .feature-video-container {
  width: 100%;
  max-width: 420px;
}
/* Responsive video with rounded look */
.feature-video-side iframe {
  width: 100%;
  height: 240px;
  border-radius: 10px;
  border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

/* ===== Responsive ===== */

@media (max-width: 992px) {
  .feature-video-side {
    margin-top: 20px;
  }

  .feature-video-side iframe {
    height: 220px;
  }

  /* KEEP table rows horizontal */
  .product-feature-table .pbottom-5,
  .product-feature-table .pbottom-15 {
    flex-direction: row;
  }

  /* Adjust column widths for smaller screens */
  .product-feature-table .pbottom-5 > div:first-child,
  .product-feature-table .pbottom-15 > div:first-child {
    min-width: 140px;
    font-size: 14px;
  }

  .product-feature-table .pbottom-5 > div:last-child,
  .product-feature-table .pbottom-15 > div:last-child {
    flex: 1;
    font-size: 14px;
    word-break: break-word;
  }
  .product-detail-container{
    padding: 0 !important;
    width: 95% !important;
  }
}

@media (max-width: 850px) {
  /* Stack table + video vertically */
  .product-feature-table .row {
    flex-direction: column;
  }  
  .feature-video-side {
    justify-content: center;
  }
/* KEEP table rows horizontal */
  .product-feature-table .pbottom-5,
  .product-feature-table .pbottom-15 {
    flex-direction: row;
  }

  /* Adjust column widths for smaller screens */
  .product-feature-table .pbottom-5 > div:first-child,
  .product-feature-table .pbottom-15 > div:first-child {
    min-width: 140px;
    font-size: 14px;
  }

  .product-feature-table .pbottom-5 > div:last-child,
  .product-feature-table .pbottom-15 > div:last-child {
    flex: 1;
    font-size: 14px;
    word-break: break-word;
  }
  .product-feature-table .row .col-sm-4 {
    width: auto !important;
  }
  .product-details .col-sm-5,
  .product-details .col-sm-7{
    width: 100%;
  }
}

 /* =======================
   FEATURE CARDS WRAPPER
   ======================= */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* two columns */
  gap: 22px;
  align-items: stretch; /* equal height per row */
}
/* Make cards participate directly in grid */
.feature-cards .col-md-6 {
  display: contents; /* remove default column behavior */
}
/* ===== Card Base Style ===== */
.feature-cards .single {
  display: flex;
  gap: 18px;
  padding: 22px;
  border-radius: 14px;
  transition: all 0.25s ease;
  height: 100%;
  background: #fff6ed; 
  border-color: #ffe2c7;
}
/* Hover Lift Effect */
.feature-cards .single:hover {
  transform: translateY(-4px);
}
/* ===== Icon / Image ===== */
.feature-cards .advantage {
  flex: 0 0 60px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: fit-content;
}
.feature-cards .advantage > div {
  width: 48px;
  height: 48px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* ===== Content Area ===== */
.feature-cards .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: fit-content;
  padding: 0;
}
.feature-cards .content h3 {
  font-size: 15px !important;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.4px;
}
.feature-cards .content p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin: 0;
} 
@media (max-width: 768px) {
  .feature-cards {
    grid-template-columns: 1fr; /* single column */
  }

  .feature-cards .single {
    padding: 18px;
    flex-direction: column;
  }

  .feature-cards .advantage {
    flex: 0 0 44px;
  }

  .feature-cards .advantage > div {
    width: 36px;
    height: 36px;
  }

  .feature-cards .content h3 {
    font-size: 14px !important;
    text-align: center;					   
  }

  .feature-cards .content p {
    font-size: 13.5px;
    text-align: justify;						
  }
  .pagination-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .product-btn-row{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 1000;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 0 !important;
  }
}

/* ************************** Recommend Friend ************************************ */
#recommendFriedDiv {
  background: #fff7ef !important;
  border: 1px solid #ffe1c7 !important;
  border-radius: 12px !important;
  padding: 25px !important;
  margin-top: 15px !important;
}
/* ===== Heading ===== */
#recommendFriedDiv p b {
  font-size: 18px !important;
  color: #333 !important;
  display: block !important;
  margin-bottom: 15px !important;
  /* font-weight: lighter !important; */
}
/* ===== Form Layout ===== */
#tellAfriendFrm span {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
@media (max-width: 767px) {
  #tellAfriendFrm span {
    flex-direction: column !important;
  }
}

/* ===== Inputs ===== */
#tellAfriendFrm input,
#finishOrderFrm input[type="text"]:not(.quantity-input),
#finishOrderFrm textarea,
#tellAfriendFrm textarea{
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid #ffd7b5 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  font-size: 14px !important;
  transition: all 0.25s ease !important;
  box-shadow: none !important;
}
.reviews form span input:last-child {
  margin: 0 !important;
}
/* ===== Textarea Height ===== */
#tellAfriendFrm textarea {
  min-height: 110px !important;
  resize: vertical !important;
  margin-bottom: 15px !important;
}

/* ===== Focus State ===== */
#tellAfriendFrm input:focus,
#finishOrderFrm input[type="text"]:not(.quantity-input):focus,
#finishOrderFrm textarea:focus,
#tellAfriendFrm textarea:focus{
  border-color: #fe980f !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(254,152,15,0.15) !important;
}

/* ===== Align Button Right Properly ===== */
#tellAfriendFrm {
  display: flex !important;
  flex-direction: column !important;
}

/* *********************************** Review product ************************************ */
#rateProduct_div {
  background: #fff7ef !important;
  border: 1px solid #ffe1c7 !important;
  border-radius: 12px !important;
  padding: 25px !important;
  margin-top: 15px !important;
}

/* ===== Heading ===== */
#rateProduct_div p b {
  font-size: 18px !important;
  color: #333 !important;
  display: block !important;
  margin-bottom: 18px !important;
  font-weight: lighter !important;
}

/* ===== Input Field ===== */
#rateProductFrm input[type="text"] {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid #ffd7b5 !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 14px !important;
  transition: all 0.25s ease !important;
  box-shadow: none !important;
}

/* ===== Textarea ===== */
#ratingComment {
  width: 100% !important;
  min-height: 120px !important;
  margin-top: 15px !important;
  padding: 12px 14px !important;
  border: 1px solid #ffd7b5 !important;
  border-radius: 8px !important;
  resize: vertical !important;
  transition: all 0.25s ease !important;
}

/* ===== Focus State ===== */
#rateProductFrm input:focus,
#ratingComment:focus {
  border-color: #fe980f !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(254,152,15,0.15) !important;
}

/* Base Star Look */
.ratestar {
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  color: #ddd !important;
  margin-right: 4px !important;
  transform-origin: center !important;
}

/* Default Selected Stars */
.ratestar[data-selected="true"],
.ratestar.fa-star {
  color: #fe980f !important;
}

/* Hover Effect = "Pop" Animation */
.ratestar:hover {
  color: #ffb347 !important;
  transform: scale(1.25) rotate(-6deg) !important;
}

/* Add Glow When Hovering */
.ratestar:hover,
.ratestar:hover ~ .ratestar {
  text-shadow: 0 4px 10px rgba(254,152,15,0.35) !important;
}

/* Smooth Reset */
.ratestar.fa-star-o {
  color: #e0e0e0 !important;
}

/* Subtle Idle Animation */
.ratestar {
  animation: starIdle 2.8s ease-in-out infinite;
}

@keyframes starIdle {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Stop animation when user interacts */
.ratestar:hover {
  animation: none !important;
}

/* ===== Align Stars Vertically with Input ===== */
#rateProductFrm .col-sm-6 i {
  vertical-align: middle !important;
}

/* Align Right Cleanly */
#rateProductFrm {
  display: flex !important;
  flex-direction: column !important;
}
/* ===== Placeholder Styling ===== */
#tellAfriendFrm input::placeholder,
#tellAfriendFrm textarea::placeholder {
  color: #999 !important;
}

.product-rating-section{
  display: flex;
  align-items: center;
  gap: 3vh;
}
.stars-container{
  display: flex;
}
.stars-container i{
  font-size: 16px;
}
 

/* ===== Container ===== */
#similar-product {
  position: relative !important;
}

/* ===== Force Horizontal Scroll Layout ===== */
#similar-product .carousel-inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  scroll-behavior: smooth !important;
  padding: 10px 40px !important;

  width: 100% !important;
}

/* ===== Remove Bootstrap Column & Float Behavior ===== */
#similar-product .carousel-inner > div {
  float: none !important;
  flex: 0 0 auto !important;
  width: 100px !important;
  max-width: 100px !important;
  padding: 0 !important;
}

/* Thumbnail default style */
#similar-product .carousel-inner img {
  width: 100% !important;
  height: auto !important;
  display: block !important;

  border: 2px solid transparent !important;
  border-radius: 10px !important;
  background: #f9f9f9 !important;

  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

/* Hover effect */
#similar-product .carousel-inner img:hover {
  border-color: #f7931e !important;
  background: #fff5ec !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-3px) !important;
}

/* Active (clicked) thumbnail */
#similar-product .carousel-inner img.active-thumb {
  border-color: #f7931e !important;
  background: #fff5ec !important;
  box-shadow: 
    0 6px 18px rgba(0,0,0,0.15),
    0 0 0 3px rgba(247,147,30,0.25) !important;
}

/* ===== Hide Scrollbar ===== */
#similar-product .carousel-inner::-webkit-scrollbar {
  display: none !important;
}

#similar-product .carousel-inner {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* ===== Arrow Buttons ===== */
#similar-product button {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 32px !important;
  height: 32px !important;

  border-radius: 50% !important;
  border: none !important;

  background: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;

  cursor: pointer !important;
  z-index: 1000 !important;

  transition: all 0.3s ease !important;
}

#thumbLeft {
  left: 5px !important;
}

#thumbRight {
  right: 5px !important;
}

#similar-product button:hover {
  background: #f7931e !important;
  color: #fff !important;
}

/* *************************** cart page *************************** */
.cart-row{
  margin-top: 10vh;
}
.cart-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
/* =========================================
   CHECKOUT STEPS BASE
========================================= */
#finishOrderFrm .panel {
  border: 0;
  overflow: hidden;
  margin-bottom: 20px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}
/* =========================================
   STEP HEADER
========================================= */

/* PANEL HEADER */
#finishOrderFrm .panel-heading {
  background: var(--orange-bg-light-color);
  border: 1px solid var(--orange-border-color);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  font-size: 18px;
  font-weight: 600;
  padding: 18px 45px 18px 20px; /* extra right padding for chevron */
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
/* LEFT SIDE STEP TITLE */
#finishOrderFrm .panel-heading .step-name{
  display:flex;
  align-items:center;
  gap:8px;
}
/* STEP NUMBER */
#finishOrderFrm .panel-heading .badge {
  font-size: 16px !important;
  border-radius: 16px;
  background-color: var(--orange-color) !important;
  color: var(--white-color) !important;
}
/* RIGHT SIDE LINK */
#finishOrderFrm .panel-heading .pull-right{
  display:flex;
  align-items:center;
}
#finishOrderFrm .panel-heading .pull-right a{
  color: var(--orange-color);
  font-weight:500;
  font-size: 16px;
  text-decoration:none;
}
#finishOrderFrm .panel-heading .pull-right a:hover{
  text-decoration:underline;
}
/* CHEVRON */
#finishOrderFrm .panel-heading::after{
  content:"";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  background-image:url("../img/icon/chevron-big-down.svg");
  background-size:contain;
  background-repeat:no-repeat;
  transition:transform .3s ease;
}
/* ROTATE WHEN STEP OPEN */
#finishOrderFrm .step-active .panel-heading::after{
  transform:translateY(-50%) rotate(180deg);
}

/* =========================================
   STEP BODY
========================================= */
#finishOrderFrm .panel-body {
  padding: 15px !important;
  border-top: 0 !important;
  border: 1px solid var(--orange-border-color);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
/* collapsed step */
#finishOrderFrm .panel:not(.step-active) .panel-body {
  display: none;
}
#addServicesDiv .styled-checkbox label{
  font-size: 14px !important;
}
/* =========================================
   CART ITEM ROW
========================================= */
#addServicesDiv{
  gap: 10px;
}
#finishOrderFrm #cart-items-div .row {
  padding: 14px 10px;
  border-bottom: 1px solid #f3f3f3;
  align-items: center;
}
#finishOrderFrm #cart-items-div .row:last-child {
  border-bottom: none;
}
/* Product image */
#finishOrderFrm #cart-items-div img {
  width: 100%;
  height: 100%;
}

/* Product title */
#finishOrderFrm #cart-items-div a {
  transition: color .2s ease;
}

#finishOrderFrm #cart-items-div a:hover {
  color: var(--orange-color) !important;
}
#finishOrderFrm .checkbox-success:last-child {
  border-bottom: none;
}
#finishOrderFrm .checkbox-success label {
  font-weight: 500;
  cursor: pointer;
}
.cart-input-row{
  padding: 10px 0 0 0;
}
.radio-content-box{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.radio-input{
  display: flex;
  align-items: end;
  gap: 4px;
}
.radio-box{
  border-radius: 10px;
  border: 1px solid var(--orange-color);
  background: var(--orange-bg-light-color);
  padding: 10px;
}
.radio-box label{
  display: flex;
  align-items: flex-start;
}
.radio-box .cart-payment-options{
  margin-left: 10px;
}

#finishOrderFrm #cart_calculation {
  background: var(--orange-bg-light-color);
  border: 1px solid var(--orange-border-color);
  border-radius: 8px;
  padding: 18px;
}
/* Total price */
#finishOrderFrm #totalt {
  color: var(--orange-color);
}
#finishOrderFrm .cart-policies{
  display: flex;
  background: oldlace;
  border: 1px solid orange;
  border-radius: 10px;
  padding: 8px;
}
#finishOrderFrm .cart-policies .checkbox-success{
  min-width: 50%;
  display: flex;
}
@media (max-width:768px) {
  #finishOrderFrm .panel-heading {
    font-size: 16px;
    padding: 16px;
  }
  #finishOrderFrm .panel-body {
    padding: 18px;
  }
  #finishOrderFrm #cart-items-div .row {
    padding: 10px 0;
  }
  .cart-policies{
    margin-left: 10px;
  }
  #finishOrderFrm .cart-policies{
    flex-direction: column;
  }
}