@charset "utf-8";

/* CSS Document */

/******* fonts *********/
@import url('../fonts/dmsans-stylesheet.css');
@import url('../fonts/cormorant-stylesheet.css');
/******* fonts *********/

/* CSS Variables */
:root {
  --color-primary: #A67100;
  --color-black: #151515;
  --color-white: #FFFFFF;
  --heading-color: #000000;
  --paragraph-color: #323232;

  --primary-font: 'DM Sans', sans-serif;
  --secondary-font: 'Cormorant', serif;
}

/* Global Reset & Base */
body {
  font-family: var(--primary-font);
  color: var(--paragraph-color);
  background-color: var(--color-white);
  font-size: 13px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.sec_padding{
  padding-top: 54px;
  padding-bottom: 54px;
}

.bg_dark{
  background-color: #0F0F0F;
}

.grey_box{
  background-color: #f4f4f4;
  border-radius: 20px;
  padding: 30px;
}

a{
  text-decoration: none !important;
}

.heading{
  font-family: var(--secondary-font);
  font-size: 36px;
  font-weight: 600;
  color: var(--heading-color);
}

.sub_heading{
  font-family: var(--secondary-font);
  font-size: 30px;
  font-weight: 600;
  color: var(--heading-color);
}

h5{
  font-family: var(--primary-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--heading-color);
  transition: transform 0.4s ease;
}

p{
  font-size: 14px;
  color: var(--paragraph-color);
}

/* ========================================================
   Common Utility & Header Styles
   ======================================================== */

.site-header {
  z-index: 1030;
  background-color: var(--color-white);
}

.site-logo-img {
  max-height: 50px;
  width: auto;
  object-fit: contain;
}

/* Search Box */
.header-search-form {
  width: 100%;
}

.search-input-group {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fcfcfc;
  transition: all 0.25s ease-in-out;
}

.search-input-group:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(166, 113, 0, 0.15);
  background-color: #ffffff;
}

.form-control-search {
  border: none;
  background: transparent;
  font-size: 13px;
  padding: 14px 16px;
  color: #475569;
}

.form-control-search::placeholder {
  color: #94a3b8;
  font-size: 13px;
}

.form-control-search:focus {
  outline: none;
  box-shadow: none;
  background: transparent;
}

.btn-search {
  background-color: var(--color-primary);
  border: none;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.btn-search:hover,
.btn-search:focus {
  background-color: #8c5f00;
}

.search-btn-icon {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

/* Action Icons (User & Cart) */
.header-action-item {
  color: var(--color-black);
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.user-action {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.user-action:hover,
.user-action:focus {
  background-color: rgba(166, 113, 0, 0.1); /* light shade of primary color */
}

.header-action-item:hover {
  color: var(--color-primary);
}

.action-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.action-divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background-color: #cbd5e1;
}

.cart-label {
  font-size: 13px;
  color: #1e293b;
}

.cart-action:hover .cart-label {
  color: var(--color-primary);
}

/* Navigation Links */
.main-navbar {
  /* border-top: 1px solid #f1f5f9; */
}

.main-nav-list {
  justify-content: center;
}

.main-nav-list .nav-link {
  color: #2b2b2b;
  font-size: 14px;
  padding: 12px 18px;
  letter-spacing: -0.1px;
  transition: color 0.2s ease;
}

.main-nav-list .nav-link:hover,
.main-nav-list .nav-link:focus,
.main-nav-list .nav-link.active {
  color: var(--color-primary);
}

/* Multi-Level Hover Dropdown Styles */
.dropdown-mega-hover {
  position: relative;
}

.main-dropdown-menu {
  border: 1px solid #edf2f7;
  border-radius: 8px;
  padding: 8px 0;
  min-width: 220px;
  margin-top: 4px !important;
}

.main-dropdown-menu .dropdown-item {
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  color: #334155;
  transition: all 0.2s ease;
}

.main-dropdown-menu .dropdown-item:hover,
.main-dropdown-menu .dropdown-item:focus {
  background-color: #faf5eb;
  color: var(--color-primary);
}

/* Submenu positioning & hover trigger */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .submenu-arrow {
  font-size: 11px;
  color: #94a3b8;
  transition: transform 0.2s ease, color 0.2s ease;
}

.dropdown-submenu:hover > .has-submenu .submenu-arrow {
  color: var(--color-primary);
  transform: translateX(3px);
}

.sub-dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: 0;
  border-radius: 8px;
  border: 1px solid #edf2f7;
  padding: 8px 0;
  min-width: 190px;
  display: none;
}

/* Invisible bridge between main item and submenu to prevent losing hover on diagonal mouse movements */
.dropdown-submenu .sub-dropdown-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: -15px;
  width: 15px;
  height: 100%;
}

/* Desktop Hover Interaction */

.dropdown-mega-hover::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 10px;
}

/* Show main dropdown on hover */
.dropdown-mega-hover:hover > .main-dropdown-menu {
    display: block;
    animation: fadeInDropdown 0.15s ease-in-out forwards;
}

/* Show sub-dropdown on hovering parent item */
.dropdown-submenu:hover > .sub-dropdown-menu {
    display: block;
    animation: fadeInDropdown 0.15s ease-in-out forwards;
}

@keyframes fadeInDropdown {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================================
   Banner Slider (Swiper + Video Support | 3.2 / 1 Aspect Ratio)
   ======================================================== */

.hero_slider {
  width: 100%;
  position: relative;
}

.hero-swiper {
  width: 100%;
  aspect-ratio: 3.2 / 1;
  border-radius: 16px;
  overflow: hidden;
  background-color: #0b0f19;
  position: relative;
}

.hero-slide {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Slide Images */
.hero-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slide Videos */
.hero-media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pagination (Dots on bottom-right matching design) */
.hero-swiper-pagination {
  position: absolute;
  bottom: 24px !important;
  right: 36px !important;
  left: auto !important;
  width: auto !important;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
}

.hero-swiper-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.7);
  opacity: 1;
  border-radius: 50%;
  transition: all 0.35s ease;
  margin: 0 !important;
  cursor: pointer;
}

.hero-swiper-pagination .swiper-pagination-bullet-active {
  width: 32px;
  border-radius: 10px;
  background: #ffaa00;
  /* box-shadow: 0 0 8px rgba(255, 170, 0, 0.5); */
}

/* ========================================================
   Values / Features Strip Section
   ======================================================== */

.values_section {
  background-color: #151515;
  color: #ffffff;
  border-top: 1px solid #242424;
  border-bottom: 1px solid #242424;
}

/* Common Icon Class */
.small_icon {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.value-item {
  padding: 8px 12px;
  transition: transform 0.2s ease;
}

.value-title {
  font-size: 13px;
  font-weight: 500;
  color: #f1f5f9;
  white-space: nowrap;
}

.values-row > .value-col {
  position: relative;
}

.values-row > .value-col:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.25);
}

/* ========================================================
   Responsive Values Marquee Section
   ======================================================== */

.values_marquee_section {
  display: none;
  background-color: #151515;
  color: #ffffff;
  border-top: 1px solid #242424;
  border-bottom: 1px solid #242424;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.values_marquee_track {
  display: flex;
  width: max-content;
  user-select: none;
}

.values_marquee_content {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  animation: valuesMarqueeScroll 28s linear infinite;
  will-change: transform;
}

.values_marquee_section:hover .values_marquee_content {
  animation-play-state: paused;
}

.values_marquee_item {
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 500;
  color: #f1f5f9;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.values_marquee_separator {
  color: #c9932a;
  font-size: 13px;
  margin: 0 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

@keyframes valuesMarqueeScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* ========================================================
   Category Slider Section
   ======================================================== */

.category_slider {
  position: relative;
  width: 100%;
}

.category-swiper {
  width: 100%;
  padding: 6px 2px 14px 2px;
}

.category-card {
  display: flex;
  flex-direction: column;
  background: #f4f5f7;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eef0f4;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  height: 100%;
  text-align: center;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  border-color: #e2e8f0;
}

.category-card-img-wrap {
  width: 100%;
  /* aspect-ratio: 1 / 1; */
  overflow: hidden;
  background: #f4f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.category-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.4s ease;
}

.category-card:hover .category-card-img {
  transform: scale(1.03);
}

.category-card-title {
  font-family: var(--primary-font);
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0;
  padding: 12px 10px 14px;
  letter-spacing: -0.1px;
  transition: color 0.2s ease;
}

.category-card:hover .category-card-title {
  color: var(--color-primary);
}

/* Prevent initial layout flash */
.category-swiper:not(.swiper-initialized) {
    visibility: hidden;
}

/* ========================================================
   Common Slider Navigation Arrows (Header Top-Right)
   ======================================================== */

.slider-nav-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #f7ede8;
  border: none;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2b2b2b;
  font-size: 15px;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
  line-height: 1;
}

.slider-nav-btn i {
  display: block;
  font-size: 14px;
  color: #2b2b2b;
  transition: transform 0.2s ease, color 0.2s ease;
}

.slider-nav-btn:hover:not(.swiper-button-disabled) {
  background-color: #151515;
  color: #ffffff;
}

.slider-nav-btn:hover:not(.swiper-button-disabled) i {
  color: #ffffff;
}

.slider-nav-prev:hover:not(.swiper-button-disabled) i {
  transform: translateX(-1px);
}

.slider-nav-next:hover:not(.swiper-button-disabled) i {
  transform: translateX(1px);
}

/* Swiper automatically adds .swiper-button-lock when slides <= slidesPerView */
.slider-nav-group.slider-nav-locked,
.slider-nav-btn.swiper-button-lock {
  display: none !important;
}

.slider-nav-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Dark Section Variant for Slider Navigation */
.slider-nav-btn-dark {
  background-color: #222222;
  color: #d1d5db;
}

.slider-nav-btn-dark i {
  color: #d1d5db;
}

.slider-nav-btn-dark:hover:not(.swiper-button-disabled) {
  background-color: var(--color-primary);
  color: #ffffff;
}

.slider-nav-btn-dark:hover:not(.swiper-button-disabled) i {
  color: #ffffff;
}

/* ========================================================
   Product Card / Tyre Slider Section
   ======================================================== */

.tyres_slider {
  position: relative;
  width: 100%;
}

.tyres-swiper {
  width: 100%;
  padding: 6px 2px 14px 2px;
}

.product-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  padding: 12px;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  height: 100%;
  border: 1px solid transparent;
}

.product-card:hover {
  /* transform: translateY(-5px); */
  border-color: var(--color-primary);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32), 0 0 18px rgba(166, 113, 0, 0.18);
}

.product-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 40%, #ffffff 0%, #F5F5F5 70%, #EFEFEF 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  overflow: hidden;
  perspective: 800px;
  transition: background 0.4s ease;
}

.product-card:hover .product-card-img-wrap {
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, #fffbf0 60%, #faecd0 100%);
}

/* Grounded 3D Elliptical Shadow under the tyre (100% GPU-accelerated) */
.product-card-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate3d(-50%, 0, 0) scale3d(0.65, 0.35, 1);
  width: 72%;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 75%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease;
  will-change: transform, opacity;
}

.product-card:hover .product-card-img-wrap::after {
  transform: translate3d(-50%, 4px, 0) scale3d(0.85, 0.5, 1);
  opacity: 0.75;
}

/* Tyre Image with pure-transform 3D float (Zero raster repaint) */
.product-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.product-card:hover .product-card-img {
  transform: translate3d(0, -6px, 0) scale(1.06);
}

/* Add to Cart Container & Badge */
.add-to-cart-wrapper {
  position: absolute;
  bottom: 10px;
  right: 8px;
  z-index: 4;
  display: inline-flex;
}

.add-to-cart-wrapper .add-to-cart-btn {
  position: static;
  bottom: auto;
  right: auto;
}

.cart-item-badge {
  position: absolute;
  top: -8px;
  right: -4px;
  width: 19px;
  height: 19px;
  min-width: 19px;
  background-color: #d32f2f;
  color: #ffffff;
  font-family: var(--primary-font);
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* line-height: 1; */
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 5;
}

/* Add to Cart Button: Morph from circular "+" into animated pill */
.add-to-cart-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  height: 34px;
  min-width: 34px;
  width: 34px;
  padding: 0 10px;
  border-radius: 30px;
  background-color: #383838;
  color: #ffffff;
  border: none;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 13px;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
              background-color 0.25s ease, 
              box-shadow 0.25s ease, 
              gap 0.3s ease, 
              padding 0.35s ease,
              transform 0.2s ease;
  overflow: hidden;
  white-space: nowrap;
}

.add-to-cart-btn i {
  font-size: 13px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

/* "Add to Cart" Label smoothly expanding on hover */
.add-to-cart-btn::after {
  content: 'Add to Cart';
  font-family: var(--primary-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  display: inline-block;
  transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease 0.05s;
}

/* Hover Morph State */
.add-to-cart-btn:hover {
  width: 108px;
  gap: 6px;
  padding: 0 12px;
  background-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(166, 113, 0, 0.45);
}

.add-to-cart-btn:hover i {
  transform: rotate(90deg);
}

.add-to-cart-btn:hover::after {
  max-width: 75px;
  opacity: 1;
}

.add-to-cart-btn:active {
  transform: scale(0.96);
}

/* Product Card Body */
.product-card-body {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  /* flex-grow: 1; */
}

.product-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 2px;
  line-height: 1.3;
  transition: 0.4s ease-in-out;
}

.product-card-sub {
  font-size: 11px;
  font-weight: 500;
  color: #888888;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.product-card-pricing {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.price_main {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.price_old {
  font-size: 12px;
  font-weight: 600;
  color: #999999;
  text-decoration: line-through;
}

.product-card-title:hover{
  color: var(--color-primary);
}

/* ========================================================
   Advanced Search, Find a Dealer & Track Order Section
   ======================================================== */

/* Advanced Search Card */
.adv_search_card {
  background-color: #f7f7f7;
  border-radius: 20px;
  padding: 36px 32px 28px;
}

/* Bootstrap 5 Pill Tabs Styling */
.search-pills {
  background: #ffffff;
  padding: 4px;
  border-radius: 30px;
  display: inline-flex;
  width: fit-content;
  border: 1px solid #e2e8f0;
}

.search-pills .nav-link {
  border-radius: 24px;
  padding: 8px 24px;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  background: transparent;
  transition: all 0.25s ease;
}

.search-pills .nav-link.active {
  background-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(166, 113, 0, 0.3);
}

.search-pills .nav-link:hover:not(.active) {
  color: var(--color-primary);
}

/* Form Select Dropdown */
.custom_form .form-select, .custom_form .form-control {
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 8px;
  font-size: 13px;
  color: var(--paragraph-color);
  height: 50px;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease; 
}

.custom_form .form-select:focus, .custom_form .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(166, 113, 0, 0.15);
  outline: none; 
} 

.custom_form .form-label{
  font-weight: 700;
  font-size: 13px;
}

/* Search Tyres Button */
.btn-search-tyres {
  background-color: #000000;
  color: #ffffff;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  height: 100%;
}

.btn-search-tyres:hover {
  background-color: var(--color-primary);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(166, 113, 0, 0.25);
}

/* Tyre Size Guide Link */
.tyre-guide-link {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: underline !important;
  transition: color 0.2s ease;
}

.tyre-guide-link:hover {
  color: var(--color-primary);
}

.tyre-guide-link i {
  font-size: 14px;
}

/* ========================================================
   Right Column: Find a Dealer & Track Order Cards
   ======================================================== */

/* Find a Dealer Card */
.dealer_banner_card {
  border-radius: 20px;
  min-height: 250px;
  flex: 1 1 auto;
}

.dealer_banner_img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.dealer_banner_card:hover .dealer_banner_img {
  transform: scale(1.03);
}

/* Glassmorphism Bar on Dealer Banner */
.dealer_glass_bar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: background-color 0.3s ease;
}

.dealer_banner_card:hover .dealer_glass_bar {
  background: rgba(255, 255, 255, 0.95);
}

.dealer_title {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
}

/* Track Order Card */
.track_order_card {
  background-color: #ffffff;
  border-radius: 18px;
  border: 1px solid #eef2f6;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  padding: 16px 20px !important;
}

.track_order_card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-color: #e2e8f0;
}

.track_title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}

.track_icon_wrap img{
  height: 45px;
  width: 45px;
}

/* arrow btn */
.arrow_button {
  cursor: pointer;
  border: none;
  background: var(--color-primary);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: grid;
  place-content: center;
  transition:
    background 300ms,
    transform 200ms;
  font-weight: 600;
}

.button__circle {
  position: relative;
  width: 36px;
  height: 36px;
  overflow: hidden;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.button__icon--copy {
  position: absolute;
  transform: translate(-170%, 170%);
}

a:hover .arrow_button, .border_btn:hover .arrow_button {
  background: #67745B;
  transform: scale(1.05);
}

@keyframes text-rotation {
  to {
    rotate: 360deg;
  }
}

a:hover .button__icon, .border_btn:hover .button__icon {
  color: #ffffff;
}

a:hover .button__icon:first-child, .border_btn:hover .button__icon:first-child {
  transition: transform 0.3s ease-in-out;
  transform: translate(170%, -170%);
}

a:hover .button__icon--copy, .border_btn:hover .button__icon--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: translate(0);
}

a:hover .button__circle, .border_btn:hover .button__circle {
  background: var(--color-black);
}

.border_btn{
  border: 1px solid #000000;
  border-radius: 100px;
  height: 50px;
  font-size: 14px;
  padding: 0px 6px 0px 22px;
  color: #000000;
  background-color: #ffffff;
  transition: 0.3s ease-in-out;
}
/* arrow btn */

.ins_slider_section{
  background-repeat: no-repeat; 
  background-size: contain; 
  background-position: right;
}

.ins_slider_section h2{
  font-family: var(--secondary-font);
  font-size: 48px;
}

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

.yello_text{
  color: #FFAE00;
}

/* ========================================================
   Installments Bank Logos Slider
   ======================================================== */

.bank-swiper {
  width: 100%;
  padding: 10px 0;
}

/* Linear transitions for continuous smooth infinite scrolling */
.bank-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

.bank-logo-card {
  background: #ffffff;
  border-radius: 14px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bank-logo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.bank-logo-img {
  max-width: 100%;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: contrast(102%);
}

.faq_section, .half_round_bg{
  background-color: #f4f4f4;
  border-radius: 0px 0px 20px 20px;
}

/* ========================================================
   Custom FAQ Accordion Styles
   ======================================================== */

.custom_accordion {
  border: none;
  background: transparent;
}

.custom_accordion .accordion-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid #d9d9d9;
  border-radius: 0 !important;
  padding: 8px 0;
}

.custom_accordion .accordion-item:first-child {
  padding-top: 0;
}

.custom_accordion .accordion-item:first-child .accordion-button {
  padding-top: 0;
}

.custom_accordion .accordion-item:last-child {
  border-bottom: 1px solid #d9d9d9;
}

/* Accordion Button / Title (18px) */
.custom_accordion .accordion-button {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 14px 0;
  font-family: var(--primary-font);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  line-height: 1.4;
  transition: color 0.25s ease;
}

/* Remove default Bootstrap arrow */
.custom_accordion .accordion-button::after {
  display: none !important;
}

.custom_accordion .accordion-button:not(.collapsed) {
  color: #1a1a1a;
  background: transparent;
  box-shadow: none;
}

.custom_accordion .accordion-button:hover {
  color: var(--color-primary);
}

.custom_accordion .faq_question_text {
  flex: 1 1 auto;
  padding-right: 20px;
}

/* Custom Circular Toggle Icon (Plus & Minus) */
.custom_accordion .acc_toggle_icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  background: transparent;
}

/* Collapsed: subtle black/grey '+' */
.custom_accordion .accordion-button.collapsed .acc_toggle_icon::before,
.custom_accordion .accordion-button.collapsed .acc_toggle_icon::after {
  content: '';
  position: absolute;
  background-color: #555555;
  transition: all 0.25s ease;
}

.custom_accordion .accordion-button.collapsed .acc_toggle_icon::before {
  width: 14px;
  height: 1.8px;
}

.custom_accordion .accordion-button.collapsed .acc_toggle_icon::after {
  width: 1.8px;
  height: 14px;
}

/* Expanded state: Golden/warm circle with '-' */
.custom_accordion .accordion-button:not(.collapsed) .acc_toggle_icon {
  background-color: var(--color-primary);
  box-shadow: 0 3px 8px rgba(166, 113, 0, 0.3);
}

.custom_accordion .accordion-button:not(.collapsed) .acc_toggle_icon::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 2px;
  background-color: #ffffff;
}

.custom_accordion .accordion-button:not(.collapsed) .acc_toggle_icon::after {
  display: none;
}

.custom_accordion .accordion-body {
  padding: 0 45px 16px 0;
  font-size: 14px;
  color: var(--paragraph-color);
  line-height: 1.6;
}

/* ========================================================
   SEO Content Read More / Read Less
   ======================================================== */

.seo_content_wrapper {
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.seo_content_wrapper.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.seo_content_wrapper p:last-child {
  margin-bottom: 0;
}

.text_link {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-black);
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
  transition: color 0.25s ease;
}

.text_link:hover {
  color: var(--color-primary);
}

/* ========================================================
   Modern Scroll to Top Button
   ======================================================== */
.scroll-to-top-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #1a1a1a;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  outline: none;
}

.scroll-to-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top-btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(166, 113, 0, 0.35);
}

.scroll-to-top-btn:active {
  transform: translateY(0) scale(0.95);
}

/* ========================================================
   Mobile Floating Bottom Navigation Bar (XS screens only)
   ======================================================== */
.mobile_bottom_bar {
  display: none; /* hidden by default, enabled on xs */
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0 16px;
  z-index: 1050;
  pointer-events: none; /* let clicks through outer wrapper */
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, calc(100% + 24px), 0);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.4s ease, 
              visibility 0.45s ease;
  will-change: transform, opacity;
}

.mobile_bottom_bar.show {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}

.mobile_bottom_bar_inner {
  pointer-events: auto;
  max-width: 440px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.bottom_nav_item {
  text-decoration: none !important;
  color: #1a1a1a;
  flex: 1;
  padding: 6px 4px;
  border-radius: 26px;
  transition: all 0.25s ease;
  position: relative;
  opacity: 0.6; /* Inactive items opacity reduced to 60% */
}

.bottom_nav_icon_wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-bottom: 2px;
}

.bottom_nav_icon_img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.bottom_nav_label {
  font-family: var(--primary-font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.1px;
  line-height: 1.2;
}

/* Active Nav Item */
.bottom_nav_item.active {
  background-color: #ede2cf; /* Warm beige pill container */
  opacity: 1 !important;
  color: #1a1a1a;
}

/* Cart Badge: Always 100% opacity, crisp gold/brown circular indicator */
.bottom_nav_badge {
  position: absolute;
  top: -7px;
  right: -10px;
  width: 16px;
  height: 16px;
  min-width: 16px;
  background-color: #b87b14;
  color: #ffffff;
  font-family: var(--primary-font);
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border: 1.5px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  opacity: 1 !important;
  pointer-events: none;
}

/* ========================================================
   Tyre Size Guide Modal
   ======================================================== */
.guide-nav-group {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
}

/* ========================================================
   Continuous Autoplaying Brand Logo Slider
   ======================================================== */
.brand_slider_wrapper {
  position: relative;
  overflow: hidden;
}

.brand-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

.brand-logo-item {
  width: 100%;
  padding: 10px 20px;
  text-decoration: none !important;
}

.brand-logo-img {
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ========================================================
/* ========================================================
  Mobile Offcanvas Menu
  ======================================================== */
.navbar-toggler{
  height: 40px;
  width: 40px;
  background-color: var(--color-black);
  border-radius: 100%;
}

.navbar-toggler img{
  height: 25px;
  width: 25px;
}

.mobile_offcanvas_menu {
  width: 360px !important;
  max-width: 88vw !important;
  background-color: #ffffff;
  border-left: 1px solid #ececec;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
  font-family: var(--primary-font);
}

.mobile_offcanvas_menu .offcanvas-header {
  padding: 24px 28px 16px 28px;
  background-color: #ffffff;
  border-bottom: none !important;
}

.offcanvas-logo {
  max-height: 40px;
}

/* Circular Close Button with DSI Soft Gold Accent */
.custom_offcanvas_close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #faf3e0;
  color: var(--color-primary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.25s ease;
  cursor: pointer;
}

.mobile_offcanvas_menu .offcanvas-body {
  padding: 8px 28px 28px 28px;
  overflow-y: auto;
}

/* Rounded Pill Search Bar */
.offcanvas_search_wrapper {
  position: relative;
}

.offcanvas_search_pill {
  background-color: #f7f7f8;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  height: 48px;
  padding: 0 44px 0 16px;
  font-size: 14px;
  color: var(--color-black);
  box-shadow: none;
  transition: all 0.2s ease;
}

.offcanvas_search_pill::placeholder {
  color: #8c8c8c;
  font-size: 13.5px;
}

.offcanvas_search_pill:focus {
  background-color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(166, 113, 0, 0.12);
}

.offcanvas_search_btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 48px;
  width: 44px;
  background: transparent;
  border: none;
  color: var(--color-black);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease;
}

.offcanvas_search_btn:hover {
  color: var(--color-primary);
}

/* Navigation Items & Accordions */
.mobile_nav_accordion {
  background: transparent;
}

.mobile_nav_single_item {
  border-bottom: 1px solid #f2f2f2;
}

.mobile_nav_single_item .mobile_nav_link {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #5d5d5d;
  text-decoration: none;
  padding: 14px 0;
  transition: all 0.2s ease;
}

.mobile_nav_single_item .mobile_nav_link.active {
  color: var(--color-primary);
}

.mobile_nav_single_item .mobile_nav_link:hover {
  color: var(--color-primary);
  padding-left: 4px;
}

.mobile_nav_acc_item {
  border: none !important;
  background: transparent !important;
  border-bottom: 1px solid #f2f2f2 !important;
}

.mobile_nav_acc_btn {
  background: transparent !important;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 600;
  color: #5d5d5d !important;
  padding: 14px 0;
  transition: color 0.2s ease;
}

.mobile_nav_acc_btn:not(.collapsed) {
  color: var(--color-primary) !important;
}

.mobile_nav_acc_btn::after {
  width: 12px;
  height: 12px;
  background-size: 12px;
  opacity: 0.7;
  transition: transform 0.25s ease;
}

/* Nested Sub-Accordions */
.nested_mobile_accordion {
  margin-left: 12px;
  border-left: 2px solid #f3f4f6;
  padding-left: 14px;
  margin-bottom: 6px;
}

.nested_mobile_accordion .accordion-item {
  background: transparent;
  border: none;
}

.nested_acc_btn {
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 600;
  color: #4b5563 !important;
  padding: 10px 0;
  transition: color 0.2s ease;
}

.nested_acc_btn:not(.collapsed) {
  color: var(--color-primary) !important;
}

.nested_acc_btn::after {
  width: 10px;
  height: 10px;
  background-size: 10px;
  opacity: 0.6;
}

/* Submenu Links */
.nested_child_list {
  list-style: none;
  padding: 2px 0 8px 12px;
  margin: 0;
}

.nested_child_list li {
  margin-bottom: 4px;
}

.nested_child_list a {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  padding: 6px 0;
  transition: all 0.2s ease;
}

.nested_child_list a:hover {
  color: var(--color-primary);
  padding-left: 4px;
}

/* Rounded Info Card */
.offcanvas_info_box {
  background-color: #ffffff;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  padding: 20px 22px;
}

.info_box_item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.info_box_item:last-child {
  margin-bottom: 0;
}

.info_box_icon {
  font-size: 15px;
  color: var(--color-primary);
  width: 18px;
  text-align: center;
}

.info_box_text,
.info_box_link {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  text-decoration: none;
  transition: color 0.2s ease;
}

.info_box_link:hover {
  color: var(--color-primary);
}

/* Follow Us Social Icons */
.social_heading {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}

.social_icon_circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.social_icon_circle:hover {
  background-color: var(--color-black);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Copyright Note */
.offcanvas_copyright p {
  font-size: 12px;
  color: #9ca3af !important;
  line-height: 1.5;
}

.inner_header{
  border-bottom: 2px solid var(--color-primary) !important;
}

.map-container iframe{
  border-radius: 16px;
}

/* Contact Us Section */
.contact_info_divider {
  border-top: 1px solid #ECECEC;
  margin: 24px 0 28px 0;
}

.round_icon_div {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background-color: #F8F1E7;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.round_icon_div img{
  height: 25px;
  width: 25px;
}

.contact_info_desc {
  font-size: 14px;
  color: var(--paragraph-color);
  margin-bottom: 0;
}

.contact_info_desc a {
  color: var(--paragraph-color);
  transition: color 0.2s ease;
}

.contact_info_desc a:hover {
  color: var(--color-primary);
}

/* Blog Cards */
.card_box {
  background-color: #f4f4f4;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 16px;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card_box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
}

.card_img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
}

.card_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card_box:hover .card_img img {
  transform: scale(1.05);
}

.card_date {
  font-family: var(--primary-font);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: block;
}

.card_box:hover h5 {
  color: var(--color-primary);
}

.card_desc {
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Blog Pagination */
.blog_pagination_hr {
  border-top: 1px solid #E5E5E5;
  opacity: 1;
  margin: 28px 0 28px 0;
}

.blog_page_indicator {
  font-family: var(--primary-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--paragraph-color);
}

.pagination_btn {
  background-color: var(--color-black);
  color: #ffffff !important;
  border-radius: 8px;
  height: 44px;
  padding: 0 20px;
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  min-width: 114px;
}

.pagination_btn i {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.pagination_btn:hover:not(.disabled) {
  background-color: var(--color-primary);
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(166, 113, 0, 0.25);
}

.pagination_btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Blog Detail Page */
.blog-detail-swiper {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.blog_detail_img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  object-fit: cover;
  display: block;
}

.custom_ul {
    list-style: none;
    padding-left: 0;
}

.custom_ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--paragraph-color);
}

.custom_ul li::before {
    content: "⬤";
    color: var(--color-primary);
    font-weight: bold;
    font-size: 11px;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 3px;
}

/* About Us Section */
.common_img_wrap, .common_img_wrap img  {
  border-radius: 20px;
}

.about_card {
  border-radius: 20px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
}

.vision_card {
  background-color: #FAF3E9;
}

.mission_card {
  background-color: #f4f4f4;
}

.about_card_text {
  font-size: 22px;
  font-weight: 500;
  color: var(--heading-color);
}

/* ============================================= */
/* ========== Awards Coverflow Slider ========== */
/* ============================================= */
.awards_section {
  background-color: #0d0d0d;
  padding-top: 70px;
  padding-bottom: 70px;
  position: relative;
}

.awards_bg_gradient_ball {
  top: -15%;
  right: 5%;
  width: 650px;
  max-width: 50vw;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  mix-blend-mode: screen;
}

.awards_bg_gradient_ball img {
  width: 100%;
  height: auto;
}

.awards_slider_container {
  padding-top: 20px;
  /* padding-bottom: 20px; */
  margin-left: auto;
  margin-right: auto;
}

.awards-swiper {
  width: 100%;
}

.award_slide {
  width: 17rem;
  height: 25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: grab;
}

.award_slide:active {
  cursor: grabbing;
}

.award_card {
  width: 100%;
  height: 100%;
  background-color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 24px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.award_slide.swiper-slide-active .award_card {
  background-color: #1e1e1e;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7);
}

.award_img_box {
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
}

.award_img {
  max-width: 100%;
  max-height: 210px;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5));
  transition: transform 0.5s ease;
}

.award_slide.swiper-slide-active .award_img {
  transform: scale(1.05);
}

.award_info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.award_slide.swiper-slide-active .award_info {
  opacity: 1;
  transform: translateY(0);
}

.award_badge {
  display: inline-block;
  background-color: #7b1826;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 50px;
  margin-bottom: 12px;
}

.award_title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 4px;
  font-family: var(--primary-font);
}

.award_desc {
  color: #b0b0b0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

/* Swiper Official Dynamic Pagination */
.awards-swiper-pagination {
  position: relative;
  margin-top: 30px;
  bottom: 0 !important;
}

.awards-swiper-pagination .swiper-pagination-bullet {
  background: #ffffff;
  opacity: 0.4;
  transition: all 0.3s ease;
}

.awards-swiper-pagination .swiper-pagination-bullet-active {
  background: var(--color-primary);
  opacity: 1;
}

.right_img_column img{
  border-radius: 20px;
}

/* ============================================= */
/* ===============Inner Pages CSS=============== */
/* ============================================= */

/* ======================================================== */
/* ========================================================
   Footer Section Styles Start
   ======================================================== */

.footer_section {
  background-color: transparent;
  padding-top: 10px;
  padding-bottom: 16px;
  font-family: var(--primary-font);
}

.footer_card {
  background: radial-gradient(circle at 18% 50%, rgba(70, 38, 10, 0.45) 0%, rgba(16, 16, 16, 1) 40%, #0d0d0d 100%);
  background-color: #0d0d0d;
  border-radius: 28px;
  padding: 56px 52px 38px 52px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

/* Brand Column */
.footer_logo_img {
  max-height: 50px;
  width: auto;
  object-fit: contain;
}

.footer_tagline {
  font-size: 13.5px;
  line-height: 1.5;
  color: #a0a0a0;
  margin-bottom: 0;
}

/* Social Icon Buttons */
.footer_socials {
  gap: 10px;
}

.social_icon_btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  font-size: 14px;
  transition: all 0.3s ease;
}

.social_icon_btn:hover {
  background-color: var(--color-primary);
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* Navigation Columns */
.footer_col_title {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 18px;
  letter-spacing: 0.2px;
}

.footer_links_list li {
  margin-bottom: 10px;
}

.footer_links_list li a {
  color: #E1E1E1;
  font-size: 12.5px;
  line-height: 1.4;
  transition: color 0.25s ease, padding-left 0.25s ease;
  display: inline-block;
}

.footer_links_list li a:hover {
  color: #FFAE00;
  padding-left: 3px;
}

/* ========================================================
   Mobile Footer Accordions Start
   ======================================================== */
.footer_accordions_mobile {
  margin-top: 10px;
  margin-bottom: 20px;
}

.footer_accordions_mobile .custom_accordion .accordion-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 0;
}

.footer_accordions_mobile .custom_accordion .accordion-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer_accordions_mobile .custom_accordion .accordion-button {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 0;
}

.footer_accordions_mobile .custom_accordion .accordion-button.collapsed .acc_toggle_icon::before,
.footer_accordions_mobile .custom_accordion .accordion-button.collapsed .acc_toggle_icon::after {
  background-color: #ffffff;
}

.footer_accordions_mobile .custom_accordion .acc_toggle_icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
}

.footer_accordions_mobile .custom_accordion .accordion-button.collapsed .acc_toggle_icon::before {
  width: 12px;
  height: 1.5px;
}

.footer_accordions_mobile .custom_accordion .accordion-button.collapsed .acc_toggle_icon::after {
  width: 1.5px;
  height: 12px;
}

.footer_accordions_mobile .custom_accordion .accordion-button:not(.collapsed) .acc_toggle_icon::before {
  width: 12px;
  height: 1.5px;
}

.footer_accordions_mobile .custom_accordion .accordion-body {
  padding: 6px 0 14px 0;
}

.footer_accordions_mobile .footer_links_list li:last-child {
  margin-bottom: 0;
}

/* Policy Links Row */
.footer_policy_row {
  margin-top: 14px;
  margin-bottom: 24px;
}

.policy_link {
  color: #8c8c8c;
  font-size: 12px;
  transition: color 0.25s ease;
}

.policy_link:hover {
  color: #ffffff;
}

.policy_sep {
  color: #404040;
  font-size: 12px;
}

/* ========================================================
   Mobile Footer Accordions End
   ======================================================== */

/* Contact Bar */
.footer_contact_bar {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 26px;
  margin-top: 12px;
}

.contact_icon_circle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.footer_contact_item:hover .contact_icon_circle {
  border-color: var(--color-primary);
  background-color: rgba(166, 113, 0, 0.15);
}

.contact_primary_text {
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.25;
  transition: 0.4s ease-in-out;
}

.contact_primary_text:hover{
  color: #FFAE00 !important;
}

.contact_sub_text {
  font-size: 12px;
  color: #8c8c8c;
  display: block;
  margin-top: 2px;
}

.contact_address_text {
  font-size: 13px;
  color: #ffffff;
  line-height: 1.4;
}

.border_right_custom {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* Payment Badges */
.footer_payment_col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pay_partner {
  background: #ffffff;
  height: 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pay_partner_img {
  max-height: 22px;
  width: auto;
  object-fit: contain;
}

/* Copyright Bottom */
.footer_bottom_copyright p {
  font-size: 12.5px;
  color: #7a7a7a;
}

.footer_bottom_copyright a {
  color: #7a7a7a;
  text-decoration: underline !important;
  transition: 0.4s ease-in-out;
}

.footer_bottom_copyright a:hover {
  color: var(--color-primary);
}

/* ========================================================
   Footer Section Styles End
   ======================================================== */

/* ========================================================
   User Guide Section & Video Thumbnails
   ======================================================== */
.video_thumb_wrap {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.video_play_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  background-color: rgba(227, 24, 55, 0.9);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, background-color 0.3s ease;
  z-index: 2;
  text-decoration: none;
}

.video_play_btn i {
  margin-left: 3px; /* visual center for play icon */
}

.video_play_btn:hover {
  background-color: var(--color-primary);
  transform: translate(-50%, -50%) scale(1.1);
  color: #ffffff;
}

.card_box:hover .video_play_btn {
  transform: translate(-50%, -50%) scale(1.1);
}

/* ========================================================
   Equal Height for Card-based Swiper Sliders
   ======================================================== */
.user-guide-swiper .swiper-slide,
.category-swiper .swiper-slide,
.tyres-swiper .swiper-slide {
  height: auto;
  display: flex;
}

.user-guide-swiper .swiper-slide > *,
.category-swiper .swiper-slide > *,
.tyres-swiper .swiper-slide > * {
  width: 100%;
  height: 100%;
}

/* ========================================================
   Floating Cart Button
   ======================================================== */
.floating-cart-btn {
  position: fixed;
  bottom: 84px;
  left: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(166, 113, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 999;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, box-shadow 0.25s ease;
  border: 2px solid #ffffff;
}

.floating-cart-btn:hover {
  background-color: #8c5f00;
  color: #ffffff;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 28px rgba(166, 113, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.2);
}

.floating-cart-btn:active {
  transform: translateY(0) scale(0.96);
}

.floating-cart-icon {
  font-size: 19px;
  color: #ffffff;
}

.floating-cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background-color: var(--color-black);
  color: #ffffff;
  font-family: var(--primary-font);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  line-height: 1;
}

.chat-widget-state-icon {
  bottom: 8dvh !important;
}