/* This page
-------------------------------------------------- */
html, body {height:100%;scroll-behavior: smooth;}
body {background-color:#fff;color:#000;text-align:left;font-family:"Open Sans", Arial, Helvetica, sans-serif;font-weight:400;line-height:1.5em;font-size:16px;}
h1, h2, h3, h4, h5 {font-family:"Open Sans", Arial, Helvetica, sans-serif; margin-top:0.5em;}
h1 {
  font-size:2.2rem;
  font-weight:800;
  line-height:1.3em;
  margin-bottom:0.5em;
  text-transform:uppercase;
}
h2 {
  font-size:1.8em;
  font-weight:700;
  margin-bottom:1em;
}
h3 {
  font-size:1.4em;
  font-weight:600;
}

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center; 
  justify-content: center;
  flex-direction: column;
}


#info ul h5 {font-size:1.6em;font-weight:400;color:#656b7b;}

/* Hero Block
-------------------------------------------------- */
#heropage {
    position: relative;
	font-size:18px;
	text-align: left;
	height: 700px;
	min-height: 54vw;
    overflow: hidden;
	padding:0;
}
#heropage .hero-image {
    position: absolute;
	left:0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% center;
    z-index: 0;
}
#heropage .container {
    position: relative;
    z-index: 1;
}
#heropage .row {
	overflow:hidden;
	position:relative;
	width:100%;
	height: 85vh;
	min-height: 50vw;
	margin:0;
	padding:0;
}
#heropage h1 {
	color:#000;
	margin-top:10vw;
	font-weight:700;
	margin-bottom:0.2em; 
	
}
#heropage h1 .logo-text-replace {    
    display: inline-block;/* 1. 讓搜尋引擎能讀取文字 */
    text-indent: -9999px;
    overflow: hidden;
    width: 260px; 
    height: 77px;
    background: url('../images/YamahaMT/MambaX.png') no-repeat center center;
    background: url('../images/YamahaMT/MambaX.svg') no-repeat center center;
    background-size: contain;
    vertical-align: top;/
}
#heropage h1 .light-sub {
	font-weight:400;
	text-transform: none;
	font-size: 0.8em;
	display: block;
}


/* Head banner
-------------------------------------------------- */
.full-banner  {
	width:100%;
	background-color:#000;
	color:#fff;
	text-align:left;
	padding:3em 1em 3em 1em;
}
.full-banner  p {
	color:#eee;
}



/* Sub-Hero Block
-------------------------------------------------- */
#subhero {
	text-align: left;
}
#subhero .row.align-items-center {
	display: flex;
	align-items: stretch !important;
}
#subhero h2 {
	text-indent:-1.4em;
	margin-left: 1.4em;
}
#subhero .txt p, 
#subhero .txt div {
	margin-left: 1.9em;
}
#subhero ul {
	display: inline-block;
	margin-left: 1.4em;
	padding-inline-start: 2em;
}
#subhero ul li {
	list-style-position: outside;
}
#subhero .block-dark,
#subhero .block-light {
	padding:1.5em 3em 38vw 3em;
	text-align: left;
	line-height:2em;
}
#subhero .block-dark {
	background: url("../images/YamahaMT/bg-MambaX-bar-end-mirrors-Yamaha-MT-07.webp") center bottom #4b4b4d no-repeat;
	background-size: 101% auto;
	color:#fff;
}
#subhero .block-light {
	background: url("../images/YamahaMT/bg-MambaX-bar-end-mirrors-Yamaha-MT-09.webp") center bottom #fff no-repeat;
	background-size: 101% auto;
}
#subhero .block-dark h2::before,
#subhero .block-light h2::before {
	content: "";
	display: inline-block;
	width: 1em;              /* 寬度先給 1em，或視圖片比例調整 */
	height: 1em;             /* ✅ 讓圖片和文字等高 */
	margin-right: 0.4em;     /* 圖片與文字的間距 */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;  /* ✅ 讓圖和文字對齊 */
}
#subhero .block-dark h2::before {
	background-image: url("../images/YamahaMT/ul-checkmark-wht.png");
}
#subhero .block-light h2::before {
	background-image: url("../images/YamahaMT/ul-checkmark.png");
}



/* Features Block
-------------------------------------------------- */
#features {
	text-align: left;
	width:100%;
	background-color:#e0e6ea;
	padding:3em 1em 3em 1em;
}

#features img {
	border: 1px solid #a2a2a2;
}
/* 讓整個 features 清單有自己的編號計數 */
.features {
  counter-reset: feature;
  margin: 0;
  padding: 0; /* 移除多餘縮排 */
}

/* 第一層 <li> 不要 list-style，但仍保留 block 結構 */
.features > li {
  list-style: none;
  counter-increment: feature;
  margin-bottom: 2rem;
}

/* 把編號顯示在 h3 前 */
.features > li h3 {
  position: relative;
  padding-left: 2rem; /* 可調整數字與文字距離 */
  margin-bottom: 1rem;
}

.features > li h3::before {
  content: counter(feature) ".";
  position: absolute;
  left: 0;
  font-weight: bold;
}
.features > li p {
  padding-left: 2em;
}
.features > li > div > div > div {
  padding-left: 2em;
  line-height: 1.8em;
}
.features ul {
  list-style: disc outside;
  padding-left: 3.5em;
  margin-top: .5rem;
  margin-bottom: .5rem;
  line-height: 1.8em;
}
.features > li > div > div > div + ul {
	margin-top: 0;
}



/* Installation Block
-------------------------------------------------- */
#installation {
	color: #fff;
}
/* Section 設定滿螢幕 */
.full-video {
  width: 100%;
  min-height: 56.25vw; /* Full-HD高度 */
  overflow: hidden;
  background-color: #000;
  position: relative;
}
/* 背景影片 */
#installation .installation-video {
  width: 100%;
  height: auto;
  min-height: 56.25vw;
  min-height: 100%;
  object-fit: cover; /* 影片裁切覆蓋整個容器 */
}
/* 文字區塊 */
#installation .installation-text {
  top: 0;
  left: 0;
  z-index: 2; /* 文字置於影片上層 */
}
#installation .installation-text .txt {
  background-color: rgba(0, 0, 0, 0.65);
  padding: 1em 1em 1em 5em; 
}
#installation .installation-text-mobile {
	background-color: rgba(0, 0, 0, 0);
	padding: 1em;
}
#installation .installation-text-mobile h2 {text-align:center;}


/* FAQ Block
-------------------------------------------------- */
#FAQ {
	background: url("../images/YamahaMT/bg-FAQ-xl.webp") right bottom #fff no-repeat;
	background-size: cover;
	min-height: 53vw;
}
#FAQ h2 {
	text-align: center;
}
#FAQ h3 {	
	margin:0;
	padding:0;
}
/* FAQ 卡片間隔 */
#faqAccordion .card {
  margin-bottom: 1em;
  border: none; /* 去掉 Bootstrap 默認 border */
  overflow: hidden; /* 讓圓角顯示正確 */
  background: transparent;
}
/* FAQ header */
#faqAccordion .faq-header {
  background-color: #4b698d;
  border-radius: 8px 8px 0px 0px;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  position: relative;
}
#faqAccordion .faq-header.collapsed {
	border-radius: 8px 8px 8px 8px;
}
#faqAccordion .faq-header.active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* FAQ body 样式 */
#faqAccordion .faq-body {
  background-color: #dcfdf6;
  border-radius: 0 0 8px 8px;
  color: #1f1f1f;
}

/* 小三角形，靠右 */
#faqAccordion .faq-triangle {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #fff; /* 顏色白色 */
  margin-right:0.5em;
  transition: transform 0.3s ease;
  display: inline-block;
}
/* 展開時旋轉 90deg 向下 */
.faq-header.active .faq-triangle {
  transform: rotate(90deg);
}


/* action
-------------------------------------------------- */
#action {
	text-align: center;
	padding: 5em 0 5em 0;
}
#action .desc {
	margin-bottom: 2em;
}
#action .products .item {
	text-align: left;
}
#action .products .item a {
	color: #000;
	display: flex;
	flex-direction: column;
	align-items: center; /* 置中所有子元素(包括 .item-desc) */
}
#action .products .item img {
	border: 1px solid #a2a2a2;
}
#action .products .item .item-desc {
	display: inline-block;
	font-size:0.8em;
	margin: 0 auto 4em auto;
	padding-inline-start: 2em;
}
#action .summary {
	align-items: center;
	border-top: 1px solid #e2e2e2;
	font-size:0.8em;
	margin: 0 auto;
	padding: 2em 0 0 2em;
}
#action .summary ul {
	display: inline-block;
	margin: 0.5em auto 0 auto;
	padding-inline-start: 2em;	
	text-align: left;
}
/* 讓圖片區塊能定位 */
#action .item .img-wrap {
  position: relative;
}
/* Buy 按鈕樣式 */
#action .item .buy-btn {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 0.5em 3em;
  background: #d9534f;
  color: #fff;
  font-weight: 500;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background 0.25s ease;
}
/* hover 效果 */
#action .item .buy-btn:hover {
  background: #444;
  color: #fff;
}


/* Info
-------------------------------------------------- */
#info {height:auto;color:#858c9d;background-color: #242629;}
#info ul h5 {color:#fff;}
#info ul li a {color:#82aad2;}
#info strong {color:#a6acba;}


/* effect
-------------------------------------------------- */
section {transition:all 500ms ease-out;}
.fade-ani{opacity:0;position:relative;}
.fade-up{bottom:-50px;}
.fade-up.showing{bottom:0px;opacity:1;}




/* Responsive
-------------------------------------------------- */
/*Users in some browsers/operating systems can express their preference for reduced motion effects with the Reduce Motion API. We can listen for that setting in our CSS, and turn off smooth scrolling for them.*/
@media screen and (prefers-reduced-motion: reduce) {
	html {scroll-behavior: auto;}
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1281px) {
	h2 {font-size:1.9em;}
	#heropage {height:auto;min-height:50vw;}
	#heropage .row {height:auto;min-height: 50vw;}
	#heropage h1 {font-size:2.2rem;}
	#heropage .hero-image {object-position:45% top;}
}
@media (min-width: 768px) and (max-width: 1280.98px) {
	#heropage {font-size:16px;}
	#heropage h1 {margin-top:3em;font-size:2em;}
	#heropage h1 .light-sub {font-size:0.7em;}
	#FAQ {background-image: url("../images/YamahaMT/bg-FAQ-lg.webp");}
}

@media (min-width: 1680px) {	
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {max-width: 900px;}
	h3 {font-size:1.2em;}
	#features .align-items-center {-ms-flex-align: start!important;align-items: start !important;}
	#installation {padding-bottom: 3em;}
	#installation .installation-video {width:90%; min-height:50.625vw;margin: 0 auto; position: relative; display: block;}
	#FAQ {background-image: url("../images/YamahaMT/bg-FAQ-md.webp");}
	
}
/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 767.98px) {
	#heropage .align-items-center {-ms-flex-align:start!important;align-items:start!important}
	#heropage, #heropage .container-fliud, #heropage .row {height:auto; min-height:auto;}
	#heropage {text-align:center; padding-bottom:104vw;}
	#heropage .hero-image {width:100%; height:100%; object-position:center bottom;}
	#heropage h1 {font-size:2.2rem; margin-top:70px; line-height:1em;}
	#heropage p {margin-bottom:0;}
	#subhero .row.align-items-center {display:block; align-items:initial !important;}
	#subhero .block-dark, #subhero .block-light {padding:1.5em 3em 76vw 3em;}
	
	#installation {padding-bottom: 3em;}
	#installation .installation-video {width:90%; min-height:50.625vw;margin: 0 auto; position: relative; display: block;}
	#FAQ {min-height: 80vw; background: url("../images/YamahaMT/bg-FAQ-xs.webp") center bottom #fff no-repeat; background-size:100% auto;}
	
	#action {padding: 3em 0 3em 0;}
	#action .item .buy-btn {width: 85%;}
}