/*!
Theme Name: Dual Ride
Author: gotchamobi.com
Author URI: http://gotchamobi.com
Description: Description
Version: 1.0.0

*/
/*---------------- FONTS --------------*/
@font-face {
    font-family: 'Teko';
    src: url('fonts/Teko-Medium.woff2') format('woff2'),
        url('fonts/Teko-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Teko';
    src: url('fonts/Teko-Regular.woff2') format('woff2'),
        url('fonts/Teko-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Teko';
    src: url('fonts/Teko-SemiBold.woff2') format('woff2'),
        url('fonts/Teko-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Medium.woff2') format('woff2'),
        url('fonts/Roboto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.woff2') format('woff2'),
        url('fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* ----------------- Reset CSS Start ----------------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, address,strong, sub, sup, var,
b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, footer, header, hgroup, menu, nav, section {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
.btn-check:focus + .btn, .btn:focus {
  outline: 0;
  box-shadow: none;
}
body { font-family: 'Roboto', sans-serif;line-height:1;overflow-x:hidden;}
footer,header {display:block;}


* {box-sizing: border-box;}

/*  ----------------- Typography ----------------- */

h1, h2, h3, h4, h5, h6, 
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { font-family: 'Teko', sans-serif;font-weight:600; margin: 0;padding: 0; color:#010E33;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
p, span {font-family: 'Roboto', sans-serif;}
p img, p:empty {margin: 0;}
strong, b {font-weight: bold;}
em, i {font-style: italic;}
p  {font-size:20px; line-height:28px; margin-bottom: 20px;color:#000;}
h2 {
  font-size: 58px;
  line-height: 68px;
  color: #050502;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1.24px;
  margin-bottom: 10px;
}
h2 span {
    color: #af2826;
}
h4 {
  font-size: 24px;
  color: #010E33;
  margin-bottom: 20px ;
  line-height: 43px;
}

/* ----------------- Links ----------------- */
a,
a:visited,
a:hover,
a:focus {
  color: inherit;
  font-family: 'Roboto', sans-serif;
  text-decoration: none !important;
  outline: 0;
}
button {
  background-color: transparent;
  border: 0 none;
  border-radius: 0;
  color: inherit;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
button:visited,
button:hover,
button:focus {
  color: inherit;
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 transparent;
  border: 0 none;
}

/* ----------------- Transisiton for Links ----------------- */
#sidebar a,
#footer a,
#title a,
#header a,
#copyright a{
  -webkit-transition: all 0.07s ease-in;
       -moz-transition: all 0.07s ease-in;
        -ms-transition: all 0.07s ease-in;
         -o-transition: all 0.07s ease-in;
            transition: all 0.07s ease-in;
}

p a,
p a:visited {line-height: inherit;}

ul {list-style: outside none none;margin: 0;padding-left: 15px;}
ul > li {    font-family: 'Roboto', sans-serif;vertical-align: top;font-size:18px;line-height:28px;position:relative;}
input, textarea, label {font-family: 'Roboto', sans-serif;}

img {max-width: 100%;height: auto;}


/* ----------------- Header CSS Start ----------------- */
.current_page_item .nav-link.active {
  color: #dfe20d !important;
  border-bottom: 2px solid #dfe20d !important;
}
#mob-navbar {
   background:#fdfdfd !important;
  position: absolute;
  top: 54px;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 9999;
}
#mob-nav {
  background: #fdfdfd;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.17);
}
.mbb-nn {
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
}
.mbb-nn .nav-link {
  border-bottom: 1px solid #ccc;
  color: #000 !important;
}
.m-men .nav-link {
  font-size: 18px !important;
  color: #fff !important;
  font-weight: 500;
  padding: 16px !important;
  font-family: 'Teko';
  text-transform: uppercase;
}
#mainnav-wrap {
  padding: 8px 0;
  background: #050502;
 /* box-shadow: 15px 15px 20px 0 rgba(0, 0, 0, 0.1);
  top:44px ;*/
  transition: margin-top 0.3s ease;
}
.navbar .nav-item:hover .dropdown-menu {
top: 100%;
visibility: visible;
transition: .5s;
opacity: 1;
}
.navbar .nav-item .dropdown-menu {
  display: block;
  border: none;
  margin-top: 0;
  top: 150%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  box-shadow: 0 4px 24px 0 rgba(0, 102, 102, 0.08);
  background: #fff;
  border-radius: 8px !important;
}
.dropdown-item {
  font-weight: 500;
  color: #13262a;
  font-size: 14px;
}
.dropdown-item:focus, .dropdown-item:hover {
  color: #fff;
  background-color: #010077;
}
.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #010077;
}
#menu-main-menu {
  margin-right: 20px;
}
.top-bar {
  padding: 10px 0;
  height: 44px;
  position: fixed;
  z-index: 1030;
  top: 0;
  left: 0;
  right: 0;
  background: #010077;
  text-align: center;
}
.top-bar p {
  color: #fff;
  margin: 0 !important;
  font-size: 16px;
  font-weight: bold;
}
.btn.btn-yellow {
  font-size: 18px;
  font-weight: 600;
  color: #050502;
  letter-spacing: 0.36px;
  background: #dfe20d;
  padding: 10px 32px;
  border-radius: 100px;
  text-transform: uppercase;
}
/* ----------------- Header CSS End ----------------- */
/* ----------------- Home CSS Start ----------------- */
.banner-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  color: #fff;
}
.banner-section.home-page-slider {
  margin-top: 86px;
}
.hero-slide {
  position: relative;
  height: 100vh;
}

/* background image */
.hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero-sec .hero-bg-image {
  object-fit: contain;
  object-position: right center;
}

/* container ABOVE image */
.hero-slide .container {
  position: relative;
  z-index: 3;
}

/* left text column */
.hero-slide h1,
.hero-slide h2,
.hero-slide p,
.hero-slide .btn {
  position: relative;
  z-index: 4;
  color: #fff;
}
.hero-slide h1, .hero-slide h2 {
  font-size:66px;
  line-height:76px;
  color:#ebebeb !important;
  letter-spacing: 1.64px;
}
.hero-slide p {
  font-size:24px;
  line-height:34px;
  color:#ebebeb !important;
  letter-spacing: 0.48px;
}
.hero-slide .btn.btn-color {
  background: #dfe20d;
  border-radius: 100px;
  padding: 12px 50px 12px 16px;
  font-size: 16px;
  color: #050502;
  font-weight: 600;
  letter-spacing: 0.48px;
  position: relative;
  text-transform: uppercase;
}
.hero-slide .btn.btn-color:after {
  content: "";
  width: 40px;
  height: 40px;
  background-image: url('/wp-content/uploads/2026/02/button-icon-hero.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  right: 4px;
  top: 4px;
}
/* ======================
   RIGHT CALLOUT
   ====================== */
.hero-callout {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    pointer-events: none;
}
.callout-box {
    display: flex;
    flex-direction: column;
    gap: 120px;
    transition: opacity 0.3s ease;
}
.callout-group {
    position: relative;
    display: flex;
    align-items: center;
}
.callout-group::before {
    content: "";
    position: absolute;
    right: 66%;
    width: 370px;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.7);
    border-width: 0;
    margin-right: 20px;
}
.top-path::before {
    bottom: 100%; 
    height: 100px;    
  border-top-width: 2px;
    border-right-width: 2px;
}
.bottom-path::before {
    top: 100%; 
  height: 100px;
    border-bottom-width: 2px;
    border-right-width:2px;
}
.callout-icon {
    position: absolute;
    color: #e2f700;
    font-size: 20px;
    left: -204px;
    z-index: 10;
}
.top-path .callout-icon { top: -110px; }
.bottom-path .callout-icon { bottom: -110px; }
.callout-title {
    color: #e2f700;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.callout-desc {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.2;
    margin: 0;
}

/********************************/
.py-5 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.engineered-for-the-road p {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: #050502;
}
.engineered-for-the-road img {
  margin-top: 40px;
}
.engineered-for-the-road p {
  padding: 0 200px !important;
}
.engineered-for-the-road p:last-child {
  padding: 0 !important;
}
.engineered-for-the-road {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.built-for-harley-touring-riders {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  min-height: 77vh;
}
.built-for-harley-touring-riders h2 {
   color: #ebebeb;
}
.built-for-harley-touring-riders  p {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
   color: #ebebeb;
}
.built-for-harley-touring-riders .title-desc.text-center {
  width: 62%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin: 0 auto;
  height: 60vh;
}
.gform_required_legend {
  display: none;
}
.need-help-before-you-buy {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.need-help-before-you-buy {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.need-help-before-you-buy .title-desc.text-center {
  width: 70%;
  margin: 0 auto;
}
.need-help-before-you-buy h2 {
  color: #ebebeb;
  margin-bottom: 10px;
}
.need-help-before-you-buy p {
  font-size: 20px;
  line-height: 30px;
  color: #ebebeb;
}
#gform_wrapper_1 {
  box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.25);
  border: solid 1px rgba(254, 255, 219, 0.55);
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(19.3px);
  -webkit-backdrop-filter: blur(19.3px);
  border-radius: 15px;
  padding: 42px 52px;
}
.need-help-before-you-buy .large {
  border-bottom: rgba(202, 202, 182, 0.35);
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  text-align: left !important;
  font-size: 14px !important;
  color: rgba(181, 181, 152, 0.5) !important;
  padding-left: 0 !important;
  border-radius: 0 !important;
	width: 88% !important;
}
.need-help-before-you-buy .textarea {
  border-bottom: 1px solid rgba(202, 202, 182, 0.35);
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  text-align: left !important;
  font-size: 14px !important;
  color: rgba(181, 181, 152, 0.5) !important;
  padding-left: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 90px !important;
}
.need-help-before-you-buy .gfield_label.gform-field-label {
  color: #ebebeb;
  font-size: 20px;
  letter-spacing: 0.4px;
  font-family: 'Teko', sans-serif;
  font-weight: normal;
}
.gfield_required {
  display: none !important;
}
.gform_button.button {
  background-color: #dfe20d !important;
  border-radius: 100px !important;
  padding: 15px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #050502 !important;
  margin: 0 auto !important;
  text-transform: uppercase !important;
}
.dualride-image-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
}
.dualride-owl .owl-dot {
  background: #e8e9bf !important;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  margin: 0px 4px;
}
.dualride-owl .owl-dots {
  text-align: center;
  margin-top: 24px;
}
.dualride-owl .owl-dot.active {
  background: #dfe20d !important;
}
.dualride-image-wrap img {
  width: 100%;
  display: block;
}
.dualride-image-content h4 {
  font-size: 40px;
  line-height: 50px;
  color: #ebebeb;
}
.dualride-image-content {
  position: absolute;
  inset: 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.25));
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.dualride-image-group {
  display: flex;
  gap: 20px;
}
.dualride-image-group img {
  height: 100%;
  border-radius: 16px;
}
.dualride-testimonial {
  background: #f3f3e7;
  padding: 35px 31px;
  border-radius: 16px;
}
.dualride-testimonial h5 {
  font-size: 32px;
  font-weight: normal;
  margin-bottom: 10px;
  color: #050502;
  letter-spacing: 3px;
}
.dualride-testimonial p {
  font-size: 18px;
  line-height: 28px;
  color: #363636;
}
.dualride-testimonial strong {
  font-size: 20px;
  line-height: 20px;
  color: #363636;
  font-weight: 600;
}
.dualride-col {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.dualride-col > .dualride-image-group,
.dualride-col > .dualride-testimonial {
  flex: 1;
}
.dualride-image-group {
  flex: 1;
  align-items: stretch;
}
.dualride-image-wrap {
  flex: 1;
  display: flex;
}
.dualride-image-wrap img {
  object-fit: cover;
}
.dualride-testimonial {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.q-i {
  width: 21px !important;
  margin-bottom: 22px;
}
.btn-color-with-icon {
  background: #dfe20d;
  border-radius: 100px;
  padding: 12px 50px 12px 16px;
  font-size: 16px;
  color: #050502;
  font-weight: 600;
  letter-spacing: 0.48px;
  position: relative;
}
.btn-color-with-icon:after {
  content: "";
  width: 40px;
  height: 40px;
  background-image: url('/wp-content/uploads/2026/02/button-icon-hero.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  right: 4px;
  top: 4px;
}
.conten-column-right .content {
  background-image: url('/wp-content/uploads/2026/03/THE-STOCK-FIXED-MOUNT-2.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 100px 40px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  height:100%;
}
.conten-column-left .form-wrap {
  background-image: url('/wp-content/uploads/2026/02/THE-STOCK-FIXED-MOUNT.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 100px 40px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  height:100%;
}
.conten-column-right {
  padding-right: 0;
}
.conten-column-left {
  padding-left: 0;
}
.full-width-image-section h2 {
  font-size: 42px;
  letter-spacing: 1px;
  line-height: 52px;
  margin-bottom: 10px;
  color: #050502;
}
.full-width-image-section li {
  position: relative;
  font-size: 23px;
  line-height: 33px;
  margin-bottom: 10px;
  font-weight: 500;
  padding-left: 12px;
}
.full-width-image-section ul {
	padding-left:30px;
}
.conten-column-right .content li::before {
  content: "";
  background-image: url('/wp-content/uploads/2026/02/tick-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 32px;
  height: 32px;
  position: absolute;
  left: -32px;
  top: 3px;
}
.conten-column-left .form-wrap li::before {
  content: "";
  background-image: url('/wp-content/uploads/2026/02/cross-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 32px;
  height: 32px;
  position: absolute;
  left: -32px;
  top: 4px;
}
/* ----------------- Home CSS End ----------------- */
/*-------------------- Inner Pages CSS Start -------------*/
.seat-clearance-section {
  overflow: hidden;
}

.seat-clearance-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  position: relative;
}

/* IMAGE */
.seat-image-area {
  width: 58%;
}

.seat-image-wrap {
  position: relative;
}

.seat-image-wrap img {
  width: 100%;
  display: block;
}

/* DOT */
.seat-marker {
  position: absolute;
  top: 36%;
  right: 17%;
  width: 18px;
  height: 18px;
  background: #c9cf00;
  border-radius: 50%;
  box-shadow: 0 0 0 10px #fff, 0 4px 12px rgba(0,0,0,0.2);
  z-index: 5;
}

/* LINE */
.seat-line-horizontal {
  position: absolute;
  top: calc(36% + 9px);
  left: 83%;
  width: 58%;
  border-top: 2px dotted rgba(0,0,0,0.7);
}

.seat-line-diagonal {
  position: absolute;
  top: calc(36% + 9px);
  left: calc(83% + 58%);
  width: 120px;
  border-top: 2px dotted rgba(0,0,0,0.7);
  transform: rotate(-55deg);
  transform-origin: left center;
}

/* CONTENT */
.seat-content-area {
  width: 42%;
  position: relative;
  z-index: 6;
}

 .seat-content-box {
  background: rgba(255, 255, 255, 0.68);
  border-radius: 15px;
  padding: 30px 24px;
  box-shadow: 0 6px 15px 0 rgba(174, 177, 12, 0.31);
  position: relative;
}

/* notch
.seat-content-box::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 45%;
  width: 22px;
  height: 22px;
  background: #b7bf00;
  transform: rotate(45deg);
  z-index: -1;
} */

/* TEXT */
.seat-content-box p {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.54px;
  color: #363636;
}
.seat-content-box p strong {
  font-weight: 700;
  color: #000;
}
/* RESPONSIVE */
@media (max-width: 991px) {
  .seat-clearance-wrap {
    flex-direction: column;
  }

  .seat-image-area,
  .seat-content-area {
    width: 100%;
  }

  .seat-marker,
  .seat-line-horizontal,
  .seat-line-diagonal {
    display: none;
  }
 .seat-content-box {
  background: rgba(255, 255, 255, 0.68);
  border-radius: 15px;
  padding: 30px 24px;
  box-shadow: 0 6px 15px 0 rgba(174, 177, 12, 0.31);
  position: relative;
}
  .seat-content-box::after {
    display: none;
  }
}
.store-policy-content .title-desc.text-center {
  text-align: left !important;
}
.store-policy-content .title-desc.text-center h3 {
  font-size:28px;
  line-height:38px;
  color: #050502;
}
.woocommerce-checkout .page {
  margin-top: 120px;
}
.trusted-on-the-highwa {
  padding-top: 0 !important;
}
.inner-banner-section {
  height: 56vh;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin-top: 90px;
  position: relative;
  overflow: hidden;
}
.inner-banner-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); 
  z-index: 0; 
  pointer-events: none; 
}
.inner-banner-section > * {
  position: relative;
  z-index: 1;
} 
.inner-banner-section .banner-content {
  height: 56vh !important;
}
.inner-banner-section .banner-content h1 {
  color: #fff;
  font-size: 66px;
  line-height: 76px;
  text-transform: capitalize;
  margin-bottom: 20px;
}
.inner-banner-section .banner-content  p {
  color: #fff;
  font-size: 20px;
  line-height: 30px;
}
.left-image {
  flex-direction: row-reverse;
}
.width-70 .title-desc.text-center {
  width: 70%;
  margin: 0 auto;
}
.icon-boxes .benefits-content img {
  width: 100px;
  margin-bottom: 20px;
}
.icon-boxes .benefits-content h3 {
  font-size: 32px;
  line-height: 42px;
  color: #050502;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.gfield_label.gform-field-label {
  font-size: 18px;
  letter-spacing: 0.4px;
  color: #050502;
  font-family: 'Teko', sans-serif;
}
.large::placeholder {
  color: #b5b598 !important;
}
.icon-boxes .benefits-content p {
  font-size: 16px;
  line-height: 26px;
  color: #363636;
}
.icon-boxes .benefits-content {
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 6px 15px 0 rgba(174, 177, 12, 0.31);
  padding: 32px;
  border-radius: 15px;
  height: 100%;
}
.padding-left-60 {
	 padding-left: 60px;
}
.inner-banner-section.contact-hero::before {
  content: none;
}
.inner-banner-section.contact-hero h1 {
  color: #050502;
}
.inner-banner-section.contact-hero p {
  color: #050502;
}
.inner-banner-section.contact-hero .banner-content {
  width: 52%;
  margin: 0 auto;
}
.form-div-cont {
  background: #fff;
  border: solid 1px rgba(254, 255, 219, 0.55);
  padding: 50px;
  box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.25);
  border-radius: 15px;
}
.form-div-cont .large {
  border: none !important;
    border-bottom-width: medium;
    border-bottom-style: none;
    border-bottom-color: currentcolor;
  box-shadow: none !important;
  border-bottom: 1px solid #cacab6 !important;
  border-radius: 0 !important;
  font-size: 14px;
  color: #b5b598;
  padding-left: 0 !important;
}
.form-div-cont .textarea {
  border: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid #cacab6 !important;
  border-radius: 0 !important;
  font-size: 14px;
  color: #363636;
  height: 90px !important;
  padding-left: 0 !important;
}
.form-div-cont .textarea::placeholder {
	color: #b5b598;
}
.form-div-cont p {
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 20px;
  color:  #363636;
}
.contact-section.contact-section-page .row {
  position: relative;
  top: -100px;
}
.get-in-touch-content {
  background: #050502;
  padding: 44px 32px;
  box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.25);
  border-radius: 15px;
  backdrop-filter: blur(19.3px);
  -webkit-backdrop-filter: blur(19.3px);
  height: 100%;
}
.get-in-touch-content h3 {
  font-size: 30px;
  line-height: 40px;
  color: #ebebeb;
  text-transform: uppercase;
}
.get-in-touch-content ul {
	padding-left:0px !important;
	margin-top:30px;
}
.get-in-touch-content ul li {
  border: solid 1px #dfe20d;
  margin-bottom: 20px;
  border-radius: 100px;
  padding: 10px;
  display: flex;
  gap: 20px;2
  align-items: center;
}
.contact-text{
  display: flex;
  flex-direction: column;
}
.get-in-touch-content ul li img {
  width: 60px;
}
.get-in-touch-content ul li h6 {
  font-size: 20px;
  line-height: 30px;
  color: #b5b598;
  margin: 0;
  font-weight:normal;
}
.cont-pe {
  margin: 0;
  font-size: 14px;
  color: #ebebeb;
  font-weight: 600;
  line-height: 24px;
}
.get-in-touch-content hr {
  background-color: #fff;
  opacity: 1px !important;
  margin: 2rem 0;
}
.get-in-touch-content h4 {
  font-size: 18px;
  line-height: 28px;
  color: #ebebeb;
  font-family: 'Roboto', sans-serif;
}
.social-link.contact-social {
  justify-content: start;
  margin-top: 10px;
}
.social-link.contact-social li {
  border: none;
  padding: 0;
  margin-bottom: 0;
}
.social-link.contact-social img {
  width: 36px !important;
}
.contact-section.contact-section-page {
  padding-bottom: 0 !important;
}
.accordion-item {
  border-radius: 15px !important;
  margin-bottom: 20px;
  border: solid 1px #cacab6 !important;
}
.accordion-button {
  border-radius: 15px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 28px;
  color: #050502 !important;
  font-family: 'Teko', sans-serif;
  line-height: 38px;
  font-weight: 500;
}
.accordion-button::after {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-left: auto;
  content: "";
 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform .2s ease-in-out;
  background-color: #050502;
  border-radius: 4px;
  background-position: center;
  padding: 8px 5px;
}
.accordion-button:not(.collapsed)::after {
 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
  background-color: #dfe20d;
}
.accordion-content p {
  font-size: 16px;
  line-height: 26px;
  color: #363636;
}
.product-section {
  margin-top: 130px;
}
.product_title.entry-title {
  font-size: 42px;
  margin-bottom: 10px;
  line-height: 52px;
  color: #050502;
  text-transform: uppercase;
}
.summary.entry-summary p {
  font-size: 16px;
  line-height: 26px;
  color: #363636;
}
.summary.entry-summary .price {
  font-size: 42px !important;
  line-height: 52px !important;
  color: #050502 !important;
  font-family: 'Teko', sans-serif !important;
  font-weight: bold !important;
}
.woocommerce-Price-currencySymbol {
  font-family: 'Teko', sans-serif !important;
}
.woocommerce-Price-amount.amount {
  font-family: 'Teko', sans-serif !important;
}
.single_add_to_cart_button.button.alt {
  background: #dfe20d !important;
  width: 100%;
  padding: 18px 10px 18px 10px;
  border-radius: 100px;
  color: #050502 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  margin-bottom: 20px;
}
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  gap: 14px;
  margin-top: 20px;
}
.woocommerce div.product div.images .flex-control-thumbs li {
  width: auto;
  float: none;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  cursor: pointer;
  opacity: 1;
  margin: 0;
  background: #f7f7f7;
  padding: 16px;
  border: solid 0.5px rgba(20, 15, 14, 0.2);
}
.woocommerce div.product div.images .flex-control-thumbs li .flex-active {
  border-bottom: 4px solid #dfe20d;
}
.acf-below-cart hr {
  background: #cdd5df;
  height: 3px;
  margin: 2rem 0;
}
.acf-below-cart h3 {
  font-size: 32px;
  line-height: 42px;
  margin-bottom: 14px;
  color: #050502;
}
.breadcrumb-product {
  margin-bottom: 60px;
}
.wc-block-components-order-meta.css-0.e19lxcc00 {
  display: none;
}
.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained {
  background: #dfe20d;
  font-size: 18px;
  font-weight: 500;
  border-radius: 50px;
}
.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained {
  background: #dfe20d;
  font-size: 18px;
  font-weight: 500;
  border-radius: 50px;
}
.editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__header th, table.wc-block-cart-items .wc-block-cart-items__header th {
  font-weight: 500;
  font-size: 26px;
  font-family: 'Teko', sans-serif !important;
}
.wc-block-cart-items__header th span {
  font-family: 'Teko', sans-serif;
}
.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title {
  font-family: 'Teko', sans-serif !important;
  font-size: 26px !important;
}
.cart-close .clse-btn {
  width: 22px;
  opacity: 0.4;
}
.cart-footer.pym-det {
  padding: 15px 25px 5px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.cart-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
opacity:0;
visibility:hidden;
transition:.3s;
z-index:9998;
}
.cart-drawer{
position:fixed;
top:0;
right:-420px;
width:420px;
height:100%;
background:#f5f5f5;
z-index:9999;
transition:.4s;
display:flex;
flex-direction:column;
}
.cart-drawer.open{
right:0;
}
.cart-header{
display:flex;
justify-content:space-between;
padding:25px;
border-bottom:2px solid #ddd;
}
.cart-header h3 {
  font-weight: 600;
  font-size: 32px;
  color: #050502;
  line-height: 42px;
}
.cart-close{
cursor:pointer;
font-size:22px;
}
.cart-items{
flex:1;
overflow:auto;
padding:20px;
}
.cart-item{
display:flex;
gap:15px;
align-items:center;
padding:20px 0;
border-bottom:1px solid #ddd;
}
.cart-img img{
width:100px;
}
.cart-details h4 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #050502;
}	
.cart-price{
font-weight:600;
margin-bottom:10px;
}
.cart-price .woocommerce-Price-currencySymbol {
  font-family: 'Roboto', sans-serif !important;
}
.cart-price .woocommerce-Price-amount.amount {
  font-family: 'Roboto', sans-serif !important;
}
.cart-price {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 20px;
  color: #363636;
  font-family: 'Roboto', sans-serif !important;
}
.cart-qty {
  display: flex;
  align-items: center;
  border: solid 1px #363636 !important;
  border-radius: 40px;
  overflow: hidden;
  width: 120px;
  padding: 10px 20px;
}
.cart-qty button{
background:none;
border:none;
width:35px;
cursor:pointer;
font-size:20px;
}
.cart-qty input{
border:none;
width:40px;
text-align:center;
background:transparent;
}
.cart-remove {
  margin-top: 18%;
  font-size: 20px;
  opacity: 1;
}
.cart-remove img {
  width: 24px;
}
.woocommerce-notices-wrapper {
  display: none;
}
.cart-footer{
padding:25px;
border-top:1px solid #ddd;
}
.cart-total {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}
.cart-total .woocommerce-Price-amount.amount {
  font-family: 'Roboto', sans-serif !important;
}
.cart-total .woocommerce-Price-currencySymbol {
  font-family: 'Roboto', sans-serif !important;
}
.checkout-btn{
display:block;
background:#d6df00;
padding:18px;
text-align:center;
font-weight:800;
border-radius:40px;
color:#000;
text-decoration:none;
margin-top:20px;
}
.checkout-btn:hover{
background:#c3cc00;
}
.cart-drawer .cart-img {
  padding: 20px;
  background: #ebebeb;
  margin-left: 20px;
}
.cart-overlay.open{
opacity:1;
visibility:visible;
}
.check-title {
  text-align: center;
  color: #050502;
  letter-spacing: 1.64px;
  font-size: 62px;
  line-height: 72px;
  margin-bottom: 20px;
}
.wp-block-woocommerce-checkout-order-summary-block {
  background: #ebebeb;
  border-radius: 30px !important;
  padding: 20px;
  border-color: #ebebeb !important;
}
.wc-block-components-product-metadata {
  display: none !important;
}
.wc-block-cart-item__prices {
  display: none !important;
}
.fitment-box {
  border-radius: 20px;
  overflow: hidden;
  border: solid 1px #cacab6;
}
.fitment-row {
  display: flex;
  border-bottom: solid 1px #cacab6;
}
.fitment-row:last-child {
  border-bottom: none;
}
.fitment-left {
  width: 35%;
  background: #f3f3e7;
  padding: 40px 30px;
  display: flex;
  align-items: center;
}
.fitment-left h4 {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  margin: 0;
}
.fitment-right {
  width: 65%;
  padding: 40px;
}
.fitment-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 16px;
  color: #363636;
}
.fitment-item:last-child {
  margin-bottom: 0;
}
.fitment-item .check {
  flex-shrink: 0;
  margin-top: 3px;
}
.fitment-item .check img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
/* Responsive */
@media (max-width: 768px) {
	.dimensions-and-clearances .title-desc.text-center {
  width: 100%;
}
  .fitment-row {
    flex-direction: column;
  }

  .fitment-left,
  .fitment-right {
    width: 100%;
    padding: 20px;
  }
}
.dimensions-and-clearances .title-desc.text-center {
  width: 60%;
  margin: 0 auto;
}
.known-incompatibilities .benefits-content {
  display: flex;
  gap: 14px;
  border: solid 1px #ccc;
  background: rgba(255, 255, 255, 0.68);
  border-radius: 15px;
  padding: 30px 24px;
  height:100%;
}
.known-incompatibilities .benefits-content img {
  width: 36px;
  height: 36px;
}
.known-incompatibilities  .benefits-content p {
  font-size: 18px;
  line-height: 28px;
  color: #050502;
  margin-bottom: 0;
}
.known-incompatibilities .benefits-common {
  margin-bottom: 26px;
}
.confirmed-on-the-road .benefits-content img {
  border-radius: 15px;
  margin-bottom: 20px;
}
.confirmed-on-the-road .benefits-content h3 {
  font-size: 32px;
  line-height: 42px;
  color: #050502;
  text-transform: uppercase;
}
/* Target each option */
.wc-block-checkout__shipping-method-option {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}

/* Create radio circle */
.wc-block-checkout__shipping-method-option::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid #333;
  border-radius: 50%;
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}

/* Inner dot when selected */
.wc-block-checkout__shipping-method-option[aria-checked="true"]::after {
  content: "";
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
}
.wc-block-checkout__shipping-method-option--selected.wc-block-checkout__shipping-method-option::before {
  border: 5px solid #dfe20d;
}
.wc-block-checkout__shipping-method-option-title-wrapper {
  margin-left: 20px;
}
/* ----------------- Footer CSS Start ----------------- */
#footer {
  background: #050502;
  padding: 60px 0 30px;
}
.fot-logo-cont {
  border-bottom: 1px solid #434343;
  padding-bottom: 40px;
}
.menu-fot {
  display: flex !important;
  gap: 40px;
  justify-content: center;
}
.menu-fot li a {
  font-size: 16px;
  color: #fffbfb;
  font-weight: 500;
  letter-spacing: 0.8px;
  font-family: 'Teko';
  text-transform: uppercase;
}
.social-links-foter {
  margin-top: 30px;
}
.social-link {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.social-link a img {
  width: 36px;
}
.footer-call {
  display: flex;
  justify-content: center;
  padding: 30px 0 0;
}
.footer-call .footer-call-link {
  font-size: 16px;
  line-height: 26px;
  color: #fff;
  font-weight: 600;
}
.footer-call .footer-call-icon {
  width: 20px;
  margin-right: 4px;
}
.copyright-content {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  line-height: 24px;
}
/* ----------------- Footer CSS End ----------------- */
/*-------------------- Media Queries -------------*/
@media (max-width: 1580px) {

}
@media (max-width: 1401px) {
.navbar-expand-xl .navbar-toggler {
    display: block;
}
#mainnav-wrap {
  display: none !important;
}
#mob-nav {
  display: block !important;
}
#sticky-menu {
 display: none !important;
}
.navbar-toggler {
  background: #dfe20d;
  margin-right: 10px;
}
.banner-section.home-page-slider {
  margin-top: 56px;
}
#mob-nav .btn {
  margin-bottom: 10px;
  margin-left: 30px;
  margin-right: 30px;
}
.mbb-nn {
  margin-bottom: 30px;
} 
.navbar .nav-item {
    position: relative;
}
.navbar-nav {
  display: flex;
  flex-direction: column !important;
  margin-bottom: 30px;
}
.navbar .nav-item .dropdown-menu {
    position: absolute;
    display: none;  /* Hide it completely */
    border: none;
    margin-top: 0;
    top: 100%;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
  font-size: 12px;
}
.navbar .nav-item:hover .dropdown-menu {
    display: block;  /* Show it on hover */
    opacity: 1;
}
.dropdown-item {
  font-size: 12px;
}
}
@media (max-width: 991px) {
	.dualride-testimonial h5 {
  font-size: 24px;
 }
	.dualride-testimonial strong {
  font-size: 16px;
 }
p {
  font-size: 16px !important;
  line-height: 26px !important;
}
.built-for-harley-touring-riders p {
  font-size: 16px;
  line-height: 26px;
}
.engineered-for-the-road p {
  font-size: 16px;
  line-height: 26px;
 }
	.confirmed-on-the-road .benefits-content h3 {
  font-size: 24px;
  line-height: 34px;
}
	.check-title {
  font-size: 34px;
  line-height: 44px;
  }
	.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
	  .dimensions-and-clearances .title-desc.text-center {
    width: 100% !important;
  }
.fitment-box {
  margin-bottom: 30px;
}
.inner-banner-section.contact-hero .banner-content {
  width: 100%;
}
.icon-boxes .benefits-common {
  margin-bottom: 20px;
}
.menu-fot {
  gap: 4px;
  flex-direction: column;
}
.need-help-before-you-buy .title-desc.text-center {
  width: 100%;
  margin: 0 auto;
}
.conten-column-left .form-wrap {
  border-radius: 0;
  padding: 40px;
}
.conten-column-right .content {
  border-radius: 0 !important;
  padding: 40px;
}
.full-width-image-section.content-and-image-section.py-5 {
  padding-bottom: 0 !important;
}
.conten-column-right, .conten-column-left {
  padding: 0 !important;
}
.full-width-image-section li {
  font-size: 18px;
  line-height: 28px;
}
.conten-column-right .content li::before {
  top: 2px;
}
h2 {
  font-size: 28px;
  line-height: 38px;
}
.dualride-col {
    height: auto;
  }
.dualride-image-group,
.dualride-testimonial {
    flex: unset;
  }
.dualride-image-group {
    flex-direction: column;
  }
.built-for-harley-touring-riders .title-desc.text-center {
  width: 100%;
}
  .engineered-for-the-road p {
  padding: 0px !important;
}
  .hero-callout {
    right: 20px;
    top: auto;
    bottom: 80px;
  }
.form-div-cont {
  margin-bottom: 30px;
}
.product-section {
  margin-top: 40px;
}
}

@media (max-width: 576px) {
  .heroslider-content {
    height: auto;
    min-height: 80vh;
  }

  .hero-callout {
    position: static;
    margin-top: 20px;
  }

  .callout-box {
    opacity: 1 !important;
    transform: none !important;
  }
}
/*Hero Section Start*/

.hero-sec .slide-callout-raw-data {
    position: absolute;
    top: 109px;
    right: 0;
    z-index: 99;
    display: flex;
    flex-flow: column;
    gap: 15px;
    padding: 30px;
}
.hero-sec h6.callout-title {
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.48px;
    text-align: left;
    color: #dfe20d;
}
.hero-sec p.callout-desc {
    font-size: 18px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.54px;
    text-align: left;
    color: #ebebeb;
}
.hero-sec .callout-group {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 267px;
}
.hero-sec .callout-group:first-child{
  margin-bottom: 15px;
}
.hero-sec .callout-group::before {
    content: "";
    position: absolute;
    right: 85%;
    width: 328px;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.7);
    /*border-width: 0;*/
    margin-right: 20px;
    border-top: 0 !important;
    display: none;
}
.hero-sec .callout-group:nth-of-type(1)::before{
  height: 50px;
  display: none;
}
.hero-sec .stay-line {
    position: absolute;
    width: 36px;
    bottom: -118px;
    left: -330px;
}
.hero-sec .icon-shap {
    content: "";
    position: absolute;
    right: 85%;
    width: 328px;
    border-color: rgba(255, 255, 255, 0.7);
    border-width: 0;
    margin-right: 0px;
    top: -30px;
    height: 150px;
    border-top: 2px solid rgba(255, 255, 255, 0.7);
    border-left: 2px solid rgba(255, 255, 255, 0.7);
    border-style: dashed;
}
.hero-sec .icon-shap img {
    position: absolute;
    width: 36px !important;
    top: 100%;
    left: -18px;
  max-width: unset !important;
  height: 38px !important
}
img.banner-one {
    max-width: 54%;
    margin-left: auto;
    max-height: 700px;
    top: 50%;
    transform: translateY(-44%);
}
img.banner-two {
    max-width: 54%;
    margin-left: auto;
    max-height: 700px;
    top: 50%;
    transform: translateY(-44%);
}
.hero-sec .hero-slide {
    position: relative;
    height: 100vh;
    max-height: 900px;
}
.banner-two-content{
  position: absolute;
  top: 30px;
}
.icon-shap:before {
    content: "";
    position: absolute;
    right: 0;
    width: 0;
    border-color: rgba(255, 255, 255, 0.7);
    border-left: 0;
    border-bottom: 0;
    border-top: 0;
    border-right: 2px solid rgba(255, 255, 255, 0.7);
    border-style: dashed;
    height: 54px;
    top: 0;
}
.slide-callout-raw-data::after {
    content: "";
    position: absolute;
    right: 85%;
    width: 370px;
    border-color: rgba(255, 255, 255, 0.7);
    margin-right: 0;
    border-top: 0 !important;
    border-right: 2px solid rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    border-left: 0;
    border-style: dashed;
    top: 89%;
    height: 120px;
}
.hero-sec .hero-slide::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url(/wp-content/uploads/2026/02/rectangle-18.png);
    width: 100%;
    height: 100%;
    background-position: right top;
    background-repeat: no-repeat;
    z-index: 9;
    background-size: 70% auto !important;
}
/* Dot marker (2026-10-04) was being covered by the rectangle-18.png decorative
   overlay above (z-index:9) - the dot was in DOM with a correct position but
   invisible underneath it. Lift it above that overlay. */
.hero-sec .icon-shap.flexible-line,
.hero-sec .hero-icon.stay-line {
    z-index: 10;
}
img.banner-one, img.banner-two{
  max-width: 50%;
}
.hero-sec .h-100{
  z-index: 99;
}
@media (max-width: 400px) {
	.cart-drawer {
  width: 300px;
  }
}
@media (max-width: 1680px) {
  img.banner-one, img.banner-two { max-width: 61%;}
}

@media (max-width: 1440px) {
	.hero-sec .slide-callout-raw-data{
		top: 139px;
	}
}

@media (max-width: 1366px) {
img.banner-one, img.banner-two {
    max-width: 69%;
    height: unset;
    transform: translateY(-41%);
}
.hero-sec .slide-callout-raw-data{
		top: 70px;
	}
}
@media (max-width: 1280px) {
.hero-sec p.callout-desc {
    font-size: 14px;
}
.hero-sec h6.callout-title {
    font-size: 14px;
}
.hero-sec .slide-callout-raw-data {
    top: 70px;
}
.hero-sec .icon-shap {
    width: 272px;
}
.slide-callout-raw-data::after {
    content: "";
    position: absolute;
    right: 85%;
    width: 250px;
    border-color: rgba(255, 255, 255, 0.7);
    margin-right: 0;
    border-top: 0 !important;
    border-right: 2px solid rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    border-left: 0;
    border-style: dashed;
    top: 89%;
    height: 42px;
}
.hero-sec .stay-line {
    position: absolute;
    width: 36px;
    bottom: -46px;
    left: -230px;
}
.hero-sec .hero-slide, .banner-section {
    max-height: 780px;
}
	.hero-sec .slide-callout-raw-data{
		top: 50px
	}
}

@media (max-width: 1200px) {
.hero-sec .slide-callout-raw-data{
  top: 175px;
}
}
@media (max-width: 1080px) {
.hero-sec .slide-callout-raw-data {
    top: 160px;
    padding-left: 0;
    padding-right: 0;
}
}

@media (max-width: 991px) {
	#wc-stripe-payment-method-instructions-card {
  font-size: 16px !important;
}
.wp-block-woocommerce-checkout-order-summary-block {
  margin-bottom: 30px;
}
.inner-banner-section {
  margin-top: 60px;
}
.inner-banner-section .banner-content h1 {
  font-size: 46px;
  line-height: 56px;
}
.padding-left-60 {
  padding-left: 20px;
}
.width-70 .title-desc.text-center {
  width: 100%;
  margin: 0 auto;
}
.hero-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    bottom: -98;
    top: auto !important;
    transform: none !important;
}
img.banner-one, img.banner-two {
    max-width: 84%;
    height: unset;
    transform: translateY(-41%);
}
.col-lg-6.col-md-8 {
    width: 100% !important;
}
.hero-sec .h-100 {
    height: auto !important;
}
.hero-sec .slide-callout-raw-data {
    top: 370px;
    right: 0;
}
.icon-shap.flexible-line, .slide-callout-raw-data::after, img.hero-icon.stay-line.img-fluid{
  display: none !important;
}
.hero-sec{
  padding-top: 4rem !important;
}
.hero-sec .hero-slide, .banner-section {
    max-height: 650px;
}
}

@media (max-width: 767px) {
.hero-slide h1, .hero-slide h2 {
    font-size: 46px;
    line-height: 56px;
}
.hero-slide p {
    font-size: 18px;
}
.hero-sec .slide-callout-raw-data{
  top: 270px;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}
img.banner-one, img.banner-two{
  max-width: 100%;
}
}
@media (max-width: 576px) {

}
/*Hero Section End*/




/* Mobile fix: reduce dead space between hero button and callout box (was fixed 270px offset sized for desktop) */
@media (max-width: 767px) {
  .hero-sec .slide-callout-raw-data {
    top: 240px !important;
  }
}

/* Force consistent h2 sizing across all sections on mobile */
@media (max-width: 991px) {
  h2 {
    font-size: 28px !important;
    line-height: 38px !important;
  }
}

/* Mobile hero fix (2026-09-14): three problems, one root cause.
   1) The callout box (".slide-callout-raw-data") was pinned with a guessed absolute
      top offset (240-370px) sized for a fixed hero-text height, so on narrow screens
      the reflowed heading/paragraph pushed underneath it -> text overlapped text.
   2) The section had a fixed max-height + overflow:hidden, so once the callout box
      was correctly placed in-flow, anything past that fixed height got clipped ->
      the last caption line got cut off mid-sentence.
   3) Naively switching the section to auto-height/overflow:visible (to fix #2) broke
      the bike product image, because that image's height:100% was tracking the
      section's now-dynamic height and inflated to match it -> the image grew and
      bled into the next section.
   Fix: let the section grow to fit its content (auto height, overflow visible, with
   a 100vh floor) so text is never clipped and the callout flows after the hero text
   instead of a guessed offset -- but pin the bike image to a fixed 100vh band (not a
   percentage of the now-variable section height) so it can never grow past that,
   regardless of how tall the text content makes the section. */
@media (max-width: 991px) {
  .hero-sec,
  .hero-sec .hero-slide {
    height: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  .hero-bg-image {
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    object-fit: cover !important;
    transform: none !important;
    z-index: 1 !important;
  }
  .hero-sec .slide-callout-raw-data {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-top: 24px;
  }
  /* Dark scrim behind the text so it stays readable over the busy bike photo. */
  .hero-sec .hero-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
    pointer-events: none;
  }
}

/* 2026-10-05 (validated on staging first): fixed desktop bike size/position so
   the two dot markers (calibrated once, as fixed pixel offsets) stay correctly
   anchored to the bike graphic at every desktop width, instead of drifting as
   the bike's own render size changed across the 1680/1366/1280px breakpoints
   above. 933x700 matches the image's native 4:3 ratio at its max-height:700 cap.
   Scoped to >=992px; mobile is untouched (handled separately, later). */
@media (min-width: 992px) {
  img.banner-one, img.banner-two {
    width: 933px !important;
    max-width: 933px !important;
    height: 700px !important;
    max-height: 700px !important;
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
  }
  .hero-sec .hero-slide, .banner-section.home-page-slider {
    height: 900px !important;
    max-height: 900px !important;
  }
  .hero-sec .slide-callout-raw-data {
    top: 260px !important;
  }
  .hero-sec .icon-shap {
    /* width intentionally NOT locked here - GSAP animates .flexible-line's
       width (60% <-> 110%) in footer.php for the dashed-line reveal motion;
       an !important width here would freeze that animation. */
    height: 150px !important;
    top: -30px !important;
  }
  .slide-callout-raw-data::after {
    width: 370px !important;
    top: 89% !important;
    height: 120px !important;
  }
  .hero-sec .stay-line {
    bottom: -118px !important;
    left: -330px !important;
  }
}

/* 2026-10-05 (validated on staging first): show the dot/callout markers on
   mobile too, matching desktop's "contained product shot + callout dots"
   treatment instead of the previous full-bleed background-photo treatment
   (where text sat ON TOP of the photo, so the dots had nowhere meaningful to
   point and were hidden).
   .slide-callout-raw-data holds BOTH the text badges and the dot markers
   together (see base rule above) and was absolutely positioned on top of the
   bike photo on desktop - the 2026-09-14 mobile fix changed it to flow in
   normal document order below the text instead, which is why the dots can't
   just be un-hidden as-is: their nearest positioned ancestor would no longer
   be anywhere near the bike image. This re-establishes that overlay. */
@media (max-width: 991px) {
  /* Shrink the bike to a contained product shot instead of a full-bleed cover
     photo, so the dots can point to a stable spot on it. */
  .hero-bg-image {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 340px !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    transform: none !important;
    z-index: 1 !important;
  }

  /* Scrim was only needed to darken the photo when text sat on top of it;
     not needed now the photo is a separate band below the text. */
  .hero-sec .hero-slide::before {
    display: none !important;
  }

  /* Overlay the badges + dots on the image band (like desktop) instead of
     flowing after the text. Padding/gap/width trimmed to fit a phone screen.
     align-items:flex-end pins the text column to the RIGHT edge of this now
     full-width box (the base rule has no alignment because on desktop the box
     itself is narrow and right-anchored, so it never needed one). */
  .hero-sec .slide-callout-raw-data {
    position: absolute !important;
    inset: auto 0px 0px !important;
    width: 100% !important;
    height: 350px !important;
    margin-top: 0px !important;
    padding: 15px !important;
    gap: 8px !important;
    align-items: flex-end !important;
  }
  .hero-sec .callout-group {
    max-width: 166px;
    text-align: right;
  }
  .hero-sec p.callout-desc {
    font-size: 10px !important;
    line-height: 20px !important;
  }

  /* Safety: make sure the main heading/paragraph/button block paints above
     the now-absolutely-positioned bike image (z-index:1) instead of behind
     it - it has no position/z-index of its own, so without this it could
     end up in the browser's default painting order below the image. */
  .hero-sec .container.h-100 {
    position: relative !important;
    z-index: 5 !important;
  }
  .hero-sec .icon-shap.flexible-line,
  .hero-sec img.hero-icon.stay-line,
  .slide-callout-raw-data::after {
    display: block !important;
  }
  /* Sized at ~0.49x of the desktop values (150/36/370/120px etc.), matching
     the ratio of mobile's 340px image band to desktop's 700px one, so the
     dashed border/dot keep the same visual proportions as on desktop. */
  .hero-sec .icon-shap {
    right: 10%;
    height: 130px;
    top: 10px;
  }
  .hero-sec .icon-shap img {
    position: absolute;
    width: 30px !important;
    top: 100%;
    left: -16px;
    max-width: unset !important;
    height: 30px !important;
  }
  .hero-sec .stay-line {
    width: 30px;
    bottom: 33%;
    left: auto;
    right: 69%;
  }
  .slide-callout-raw-data::after {
    right: 17%;
    width: 192px;
    top: 49%;
    height: 47px;
  }
}