/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.5.1.1792428545
Updated: 2026-10-19 16:49:05

*/

:root {
	--e-global-color-uicore_primary: #246BFD;
}
 
.feature-callout-block .elementor-widget-icon-box .elementor-icon-box-icon {
	display: none !important;
}

.feature-callout-block .elementor-widget-icon-box .elementor-icon-box-icon {
	display:none !important;
}


.feature-callout-block .elementor-widget-icon-box .elementor-icon-box-icon {
	display: none !important;
}
 
/* Add your custom style here */
 
.golden-ratio {
	aspect-ratio: 1.618;
}
 
.square-ratio {
	aspect-ratio: 1;
}
 
/* ------------------------------------------------------------------
 * NEW – Base text spacing carried over from the old UiCore theme.
 * Hello adds ~14px under the last paragraph of every Text Editor
 * widget and indents lists 40px. UiCore had no trailing space,
 * 16px between paragraphs and an 18px list indent.
 * ------------------------------------------------------------------ */
 
.elementor-widget-text-editor p {
	margin-block: 0 1rem;
}
 
.elementor-widget-text-editor p:last-child {
	margin-block-end: 0;
}
 
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
	padding-inline-start: 18px;
}
 
/* OUR PRODUCT LINES - START */
 
#our-product-lines .img-card {
	border-radius: 5px;
	padding: 40px 20px 10px 20px;
	box-shadow: 0px 72px 64px -16px rgba(0, 0, 0, 0.08);
}
 
@media screen and (max-width: 767px) {
	#our-product-lines .img-card {
		max-width: 350px;
	}
}
 
/* UPDATED – falls back to Elementor's Primary colour if the UiCore colour is gone */
#our-product-lines .img-card:hover {
	background-color: var(--e-global-color-uicore_primary, var(--e-global-color-primary));
}
 
#our-product-lines .img-card:hover .img-card__title h4 {
	color: white;
}
 
/* FIXED – was var(--uicore-typography--p-c, "#070707"). That UiCore variable
   no longer exists, and the quoted fallback is invalid, so the colour was ignored. */
#our-product-lines .img-card__txt {
	color: #070707;
}
 
#our-product-lines .img-card:hover .img-card__txt {
	color: #DEE4ED;
}
 
/* FIXED – same issue as above */
#our-product-lines .img-card__btn {
	color: #070707;
}
 
#our-product-lines .img-card__btn:hover {
	color: #DEE4ED;
}
 
#our-product-lines .img-card:hover .img-card__btn {
	color: white;
}
 
#our-product-lines .img-card__thumbnail {
	aspect-ratio: 1;
}
 
/* OUR PRODUCT LINES - END */
 
/* OUR PRODUCTS - START */
 
@media (max-width: 767px) {
	/* FIXED – the ID was misspelled "#aour-products-tabs", so this rule never applied.
	   Check the product tabs on mobile after updating. */
	#our-products-tabs .elementor.elementor .elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tab-title {
		order: unset;
	}
 
	#our-products-tabs .e-n-tabs-heading {
		display: flex;
		flex-direction: row;
	}
 
	#our-products-tabs .e-n-tabs-content {
		display: flex;
	}
}
 
#our-products-tabs .e-n-tabs-heading {
	top: 0;
	z-index: 99;
	width: 100%;
	background-color: white;
	height: fit-content;
}
 
#our-products-tabs .e-n-tab-title {
	width: 100%;
	max-width: 150px;
	flex-grow: 1;
	flex-direction: column !important;
	gap: 20px;
	justify-content: start;
	margin: 0;
}
 
#our-products-tabs .e-n-tab-title::before {
	content: "";
	width: 100%;
	aspect-ratio: 1;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
 
#wheel-hub-assembly-tab.e-n-tab-title::before {
	background-image: url("/wp-content/uploads/2026/02/515119BHD.jpg");
	background-position: center left;
}
 
#spindle-kits-tab.e-n-tab-title::before {
	background-image: url("/wp-content/uploads/2026/02/BR930511K_MAIN.png");
	background-position: center left;
}
 
#wheel-bearings-tab.e-n-tab-title::before {
	background-image: url("/wp-content/uploads/2025/11/510020x2_MAIN.avif");
}
 
#wheel-flange-tab.e-n-tab-title::before {
	background-image: url("/wp-content/uploads/2025/11/BF930107_MAIN-1.avif");
}
 
#agri-hub-tab.e-n-tab-title::before {
	background-image: url("/wp-content/uploads/2025/11/Bosda-Agri-Hub-Sample-2-1.avif");
}
 
#knuckle-hub-assembly-tab.e-n-tab-title::before {
	background-image: url("/wp-content/uploads/2025/11/knuckle-hub-2-1.avif");
}
 
#abs-sensor-tab.e-n-tab-title::before {
	background-image: url("/wp-content/uploads/2025/11/ABS-Sensor-2-1.avif");
}
 
/* OUR PRODUCTS - END */
 
/* AFTERMARKET & OES AUTO - START */
/* Element Pack (Advanced Counter) – keep while Element Pack is installed */
 
#aftermarket-oes-counters .bdt-ep-advanced-counter {
	display: flex;
	gap: 10px;
}
 
#aftermarket-oes-counters .bdt-ep-advanced-counter-icon {
	display: flex;
	align-items: center;
}
 
#aftermarket-oes-counters .bdt-ep-advanced-counter-icon-wrap {
	display: flex;
	margin: 0 !important;
}
 
/* AFTERMARKET & OES AUTO - END */
 
@media screen and (max-width: 1023px) {
	.home-masthead {
		height: auto !important;
	}
}
 
/* PARTS TABLE - START */
 
/* NEW – Hello paints zebra stripes and its own hover colour on the table
   cells, which covered the row hover below. Clear them for this table. */
#partsTable tbody > tr > td,
#partsTable tbody > tr > th {
	background-color: transparent;
}
 
/* FIXED – the hover now targets the cells, so it sits on top */
#partsTable tbody tr:hover > td,
#partsTable tbody tr:hover > th {
	background-color: #f8fbff;
}
 
#partsTable tbody tr:hover {
	cursor: pointer;
}
 
/* NEW (optional) – the old UiCore table look. Hello uses 15px padding,
   grey borders on every side and regular-weight cells. Uncomment if the
   table looks different from before. */
/*
#partsTable {
	border: 1px solid #f4f4f4;
	font-size: inherit;
}
 
#partsTable td,
#partsTable th {
	padding: 8px 18px 7px;
	border: 0;
	border-left: 1px solid #f4f4f4;
	border-bottom: 1px solid #f4f4f4;
	font-weight: 600;
	vertical-align: middle;
}
 
#partsTable td:first-child,
#partsTable th:first-child {
	border-left-width: 0;
}
*/
 
#imagePreview {
	position: fixed;
	display: none;
	width: 150px;
	height: 150px;
	pointer-events: none;
	z-index: 99999;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
 
#previewImg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: #fff;
}
 
/* PARTS TABLE - END */
 
/* CSS for Pills */
/* UPDATED – these were defined twice with different values. Merged into
   one copy using the values that were actually showing (the later, orange set). */
 
.parts-app-pills {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	padding-left: 2px;
	padding-top: 2px;
}
 
.parts-app-pill {
	display: inline-block;
	background: #f58220; /* the earlier blue version was #4070d1 */
	color: #ffffff;
	font-size: 10px;
	line-height: 1.2;
	padding: 4px 8px;
	border-radius: 999px;
	text-align: left;
}
 
/* Year styling - slightly muted / different */
.parts-app-pill .pill-year {
	color: rgba(255, 255, 255, 0.75);
	font-weight: 500;
}
 
/* Make + Model stronger */
.parts-app-pill .pill-mm {
	color: #ffffff;
	font-weight: 600;
}
 
/*
.part-card {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  transition: min-height 0.35s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
 
.part-card:hover {
  min-height: 520px;
  z-index: 20;
}
 
.part-card__hover {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    max-height 0.35s ease;
  pointer-events: none;
}
 
.part-card.hover-active .part-card__hover {
  opacity: 1;
  max-height: 400px;
  transform: translateY(0);
  pointer-events: auto;
}
*/
 
.qu-nav-card:hover {
	background-color: rgb(36, 107, 253) !important;
}
 
.qu-nav-card:hover p {
	color: white;
}
 
.qu-nav-card p {
	color: grey;
}
 
/* Element Pack (Advanced Icon Box) – delete once those widgets are rebuilt in Elementor */
.bdt-readmore-on-hover-yes .bdt-ep-advanced-icon-box-readmore {
	margin-top: 12px !important;
}



/* Styling for why choose bosda pages */

.bsp{
      --ink:#101A29; --blue:#246BFD; --blue-deep:#0846C6;
      --text:#3d4653; --muted:#737588;
      --line:#e7ebf1; --line-soft:#eff2f7; --tint:#eef3ff; --panel:#f6f9fd; --white:#fff;
      --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
      font-family:inherit; color:var(--text); width:100%; max-width:none; margin:0; box-sizing:border-box;
      -webkit-font-smoothing:antialiased;
    }
    .bsp *,.bsp *::before,.bsp *::after{box-sizing:border-box;}
    .bsp-program{background:var(--white);border:1px solid var(--line);border-radius:0;
      box-shadow:0 1px 2px rgba(16,26,41,.03);overflow:hidden;margin:0 0 24px;display:flex!important;flex-direction:row;flex-wrap:nowrap;align-items:stretch;}
    .bsp-media{flex:0 0 34%;position:relative;overflow:hidden;background:var(--ink);min-height:260px;}
    .bsp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
    .bsp-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
    .bsp-head{padding:28px 30px 0;}
    .bsp-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
    .bsp-kicker b{color:var(--ink);font-weight:600;}
    .bsp-head h3{margin:8px 0 0;font-family:inherit;font-size:clamp(20px,2vw,23px);line-height:1.2;
      letter-spacing:-.012em;color:var(--ink);font-weight:700;}
    .bsp-intro{margin:9px 0 0;font-size:15px;line-height:1.6;max-width:74ch;color:var(--text);}
    .bsp-body{padding:22px 30px 28px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:26px;align-items:stretch;}

    .bsp-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft);}
    .bsp-list li{margin:0;border-bottom:1px solid var(--line-soft);}
    .bsp-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;
      border:0;border-left:3px solid transparent;cursor:pointer;font:inherit;color:var(--text);
      padding:13px 12px 13px 15px;transition:background .15s ease,border-color .15s ease,color .15s ease;}
    .bsp-row:hover{background:var(--line-soft);}
    .bsp-row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}
    .bsp-txt{flex:1;font-size:14.5px;font-weight:500;line-height:1.35;}
    .bsp-arrow{flex:0 0 auto;font-size:15px;line-height:1;color:#c4cdd9;transition:transform .2s ease,color .15s ease;}
    .bsp-list li.is-active .bsp-row{background:var(--tint);border-left-color:var(--blue);color:var(--ink);}
    .bsp-list li.is-active .bsp-txt{font-weight:600;}
    .bsp-list li.is-active .bsp-arrow{color:var(--blue);transform:translateX(2px);}

    .bsp-panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:28px 30px;
      display:flex;flex-direction:column;justify-content:flex-start;min-height:100%;}
    .bsp-rule{width:30px;height:3px;background:var(--blue);border-radius:2px;margin-bottom:16px;}
    .bsp-panel .eyebrow{margin:0 0 8px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
      text-transform:uppercase;color:var(--muted);}
    .bsp-panel h4{margin:0 0 10px;font-family:inherit;font-size:18px;line-height:1.3;color:var(--ink);
      letter-spacing:-.01em;font-weight:700;}
    .bsp-panel p{margin:0;font-size:14.5px;line-height:1.68;color:var(--text);max-width:58ch;}

    .bsp-inline{overflow:hidden;max-height:0;transition:max-height .28s ease;}
    .bsp-inline > div{padding:2px 14px 14px 15px;font-size:14px;line-height:1.62;color:var(--text);}

    @media (max-width:760px){
      .bsp-program{flex-direction:column!important;}
      .bsp-media{flex:0 0 auto;width:100%;height:220px;min-height:0;}
    }
    @media (max-width:760px){
      .bsp-media{height:180px;}
      .bsp-body{grid-template-columns:1fr;gap:0;padding-top:18px;}
      .bsp-panel{display:none;}
      .bsp-row{border-left-width:0;padding-left:12px;}
      .bsp-list li.is-active .bsp-row{background:transparent;color:var(--ink);}
      .bsp-list li.is-open .bsp-row{background:var(--tint);color:var(--ink);}
      .bsp-list li.is-open .bsp-txt{font-weight:600;}
      .bsp-list li.is-open .bsp-inline{max-height:360px;}
      .bsp-list li.is-open .bsp-arrow{transform:rotate(90deg);color:var(--blue);}
    }
    @media (prefers-reduced-motion:reduce){.bsp *{transition:none !important;}}