/*-----------------------------------------------------------------------------------

[Table of contents]

1. Font
2. Css Variable for colors
3. Common CSS
4. Heading CSS
5. Button CSS
6. Preloader CSS
7. Animation CSS 
8. Header - Main Navigation Section
9. Hero Slider 
10. Typing Text Section
11. USP section
12. Program Section
13. Audio Sample Section
14. Video Popup Model 
15. Scrolling Text Section
16. Features Section
17. Services Section
18. Center CTA Section
19. Advanced Features Section
20. Pricing Section
21. Key Features Section
22. CTA Section
23. Footer Section
24. Faq Section
25. Download Section

-----------------------------------------------------------------------------------*/

/*----custom container --------*/
.container-wide {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* 與 .container 相同的響應式 max-width，只有 xl 改更寬 */
@media (min-width: 576px) {
  .container-wide {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container-wide {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container-wide {
    max-width: 960px;
  }
}

/* 關鍵：在 xl 變更寬（介於 container-xl=1140px 和 fluid 之間） */
@media (min-width: 1200px) {
  .container-wide {
    max-width: 1320px;
  }
}

.font18 {
  font-size: 18px;
}

/* --------Font--------------- */

.shippori-antique-regular {
  font-family: "Shippori Antique", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* -----------Css-variable------ */

:root {
  --primery: #e76b49;
  --secondary: #f28411;
  --secondary-lighter: #604551;
  --nutral: #ffffff;
  --light-primery: #fbe9e4;
  --body-text: #2a2732;
  --white: #fff;
  --black: #000000;
  --dark-greay: #9599ab;
  --greay: #c7c9e0;
  --red-color: #ff0000;
  --green: #28b90c;

  --border: #efe2de;
  --border-dark: #bbafab;
  --shadow: #f8e1db;

  --header-h: 80px;
  --main-color: #f4a261;
  --text-color: #5a4635;
  --bg-light: #fff9f1;
  --border-color: #e6e2dc;
}

/* ------Common-Css------------- */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.7;
  font-family: "Manrope", sans-serif;
  color: var(--body-text);
  background-color: var(--nutral);
  font-variant-ligatures: none;
}

.row_am {
  padding: 30px 0;
}

.page_wrapper {
  width: 100%;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: var(--secondary);
  transition: 0.4s all;
}

a:hover {
  text-decoration: none;
  color: var(--primery);
}

ul,
li {
  padding: 0;
  list-style-type: none;
  margin: 0;
}

button:focus,
.btn.focus,
.btn:focus {
  outline: none;
  box-shadow: none;
}

/* heading */
h4,
h5,
h6 {
  color: var(--secondary);
  font-weight: 700;
  line-height: 1.3;
}

h1 {
  font-size: 55px;
  letter-spacing: normal;
  font-family: "Shippori Antique", sans-serif;
  font-weight: 400;
  color: var(--secondary);
}

h2 {
  font-size: 45px;
  letter-spacing: normal;
  font-family: "Shippori Antique", sans-serif;
  font-weight: 400;
  color: var(--secondary);
}

h3 {
  font-size: 40px;
  letter-spacing: normal;
  font-family: "Shippori Antique", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  color: var(--secondary);
}

h4 {
  font-size: 26px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 18px;
}

.white_text p,
.white_text .section_title h2,
.white_text span,
.white_text h3,
.white_text h4 {
  color: var(--white);
}

.section_title {
  text-align: center;
}

.section_title p {
  padding: 0 250px;
  font-size: 18px;
}

.section_title.white_text h2,
.section_title.white_text p {
  color: var(--white);
}

.title_badge {
  color: var(--white);
  display: inline-block;
  padding: 2px 18px;
  border-radius: 100px;
  background-color: var(--primery);
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 12px;
}

/* purple button */
.btn {
  font-weight: 700;
}

.puprple_btn {
  background-color: var(--primery);
  color: var(--white);
  border-radius: 100px;
  padding: 12px 30px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-weight: 600;
  font-size: 16px;
}

.puprple_btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: var(--white);
  border-radius: 6px;
  transition: 0.6s all;
  z-index: -1;
}

.puprple_btn:hover::before {
  width: 100%;
}

.puprple_btn:hover {
  color: var(--secondary);
}

/* light button */
.white_btn .puprple_btn {
  background-color: var(--white);
  border: solid 1px var(--primery);
  color: var(--primery);
  border-radius: 100px;
  padding: 12px 30px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-weight: 600;
  font-size: 16px;
}

.white_btn .puprple_btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: var(--primery);
  border-radius: 6px;
  transition: 0.6s all;
  z-index: -1;
  color: var(--white);
}

.white_btn .puprple_btn:hover::before {
  width: 100%;
}

.white_btn .puprple_btn:hover {
  color: var(--white);
  border: solid 1px var(--white);
}

.btn_block {
  position: relative;
  display: inline-block;
}

.btn_bottom {
  z-index: 1;
  border: 1px solid var(--primery);
  border-radius: 100px;
  position: absolute;
  top: -8px;
  left: 8px;
  right: -12px;
  transform: translate(-0.52em, 0.52em);
  width: 100%;
  height: 100%;
}

/* slider controls */
.owl-carousel .owl-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 20px;
}

.owl-carousel .owl-dots button {
  display: block;
  width: 15px;
  height: 15px;
  background-color: transparent;
  border: 1px solid var(--primery);
  border-radius: 15px;
  margin: 0 5px;
}

.owl-carousel .owl-dots button.active {
  background-color: var(--primery);
}

.container.container-sm {
  max-width: 900px;
}

@media screen and (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

/* -------------Preloader-Css-Start-------------- */

/* Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 999999;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--primery);
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--secondary);
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--dark-greay);
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

.spin_text {
  transform-origin: 50% 50% 0;
  transform: rotate(0deg);
  -webkit-animation: spin 15s linear infinite;
  -moz-animation: spin 15s linear infinite;
  animation: spin 15s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

/* ------Round Animation------- */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

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

/* --------Object-Moving-Animation-Css-Start----- */
.moving_animation {
  animation: moving_object 6s infinite linear;
}

.moving_position_animatin {
  position: relative;
  animation: moving_position_animatin 6s infinite linear;
  z-index: -1;
}

@keyframes moving_object {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes moving_position_animatin {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

.devider {
  position: relative;
  text-align: center;
}

.no_bottom_padding {
  padding-bottom: 0 !important;
}

/* -----------Header-Css-Start------------------- */
/* header wraper */
header {
  position: absolute;
  width: 100%;
  z-index: 99999;
  transition: 0.4s all;
}

header.fix_style {
  position: fixed;
  top: 0;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0;
  transition: none;
  opacity: 0;
  pointer-events: none;
}

header.fixed {
  pointer-events: all;
  opacity: 1;
  transition: 0.4s all;
}

header.fixed .navbar {
  padding: 0;
}

/* navigation bar */
/* ---------- Navbar 基本設定 ---------- */
.navbar {
  padding: 0;
}

.navbar-expand-lg .navbar-nav {
  align-items: center;
}

.navbar-expand-lg .navbar-nav .nav-link {
  /*padding: 30px 12px;*/
  font-weight: 600;
  transition: 0.4s all;
  color: var(--black);
}

.navbar-expand-lg .navbar-nav .nav-link:hover {
  color: var(--primery);
}

.navbar-expand-lg .navbar-nav .nav-item .btn_block {
  margin-left: 30px;
}

/* ---------- 會員專區按鈕 (dark_btn) ---------- */
/* ---------- Navbar 共用 ---------- */
.navbar {
  padding: 0;
}

.navbar-expand-lg .navbar-nav {
  align-items: center;
}

.navbar-expand-lg .navbar-nav .nav-link {
  /*padding: 30px 12px;*/
  font-weight: 600;
  transition: 0.4s all;
  color: var(--black);
}

.navbar-expand-lg .navbar-nav .nav-link:hover {
  color: var(--primery);
}

/* ---------- Navbar 共用 ---------- */
.navbar {
  padding: 0;
}

.navbar-expand-lg .navbar-nav {
  align-items: center;
}

.navbar-expand-lg .navbar-nav .nav-link {
  /*padding: 30px 12px;*/
  font-weight: 600;
  transition: 0.4s all;
  color: var(--black);
}

.navbar-expand-lg .navbar-nav .nav-link:hover {
  color: var(--primery);
}

/* ---------- 會員專區按鈕 (dark_btn) ---------- */
.navbar-expand-lg .navbar-nav .nav-link.dark_btn {
  color: var(--white);
  background-color: var(--primery);
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 100px;
  position: relative;
  transition: 0.4s all;
  z-index: 6;
  overflow: hidden;
  border: solid 1px var(--primery);
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* hover 白底動畫 */
.navbar-expand-lg .navbar-nav .nav-link.dark_btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: var(--white);
  border-radius: 100px;
  transition: width 0.6s ease;
  z-index: -1;
}

.navbar-expand-lg .navbar-nav .nav-link.dark_btn:hover::before {
  width: 100%;
}

.navbar-expand-lg .navbar-nav .nav-link.dark_btn:hover {
  background-color: var(--white);
  color: var(--primery);
  border-color: var(--primery);
}

/* ---------- 1. 頂層選單定位 (第一層) ---------- */
.navbar-expand-lg .navbar-nav .nav-item.has_dropdown {
  display: flex;
  align-items: center;
  position: relative;
  transition: 0.4s all;
  z-index: 5;
}

/* 第一層的下拉按鈕 (維持 58px 高度) */
.nav-item.has_dropdown>.drp_btn {
  height: 58px;
}

/* ---------- 2. 下拉選單基礎設定 (通用) ---------- */
.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu {
  position: absolute;
  z-index: 10;
  background-color: #fff;
  border-radius: 10px;
  min-width: 210px;
  max-width: 250px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border-bottom: 3px solid var(--primery);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.25s ease;
  background-clip: padding-box;
}

/* ---------- 3. 分層顯示邏輯 (核心修正) ---------- */

.navbar-expand-lg .navbar-nav>.nav-item.has_dropdown {
  display: flex;
  align-items: center;
  position: relative;
  height: 58px;
  /* 固定導航欄高度，避免被撐開 */
  padding: 0 10px;
}

/* 修正第一層箭頭：確保它緊貼文字且垂直居中 */
.navbar-expand-lg .navbar-nav>.nav-item.has_dropdown>.drp_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  height: 100%;
  /* 跟隨父層高度 */
  cursor: pointer;
}

/* ---------- 2. 通用子選單設定 ---------- */
.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu {
  position: absolute;
  z-index: 100;
  background-color: #fff;
  border-radius: 8px;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-bottom: 3px solid var(--primery);
  transition: all 0.2s ease;
  padding: 10px 0;
  /* 減少上下間距 */
}

/* ---------- 3. 分層展開邏輯 (防止全部彈出) ---------- */

/* 第一層 -> 第二層：向下彈出，靠左對齊 */
.navbar-nav>.nav-item.has_dropdown:hover>.sub_menu {
  top: 100%;
  /* 貼在主導航下方 */
  left: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}

/* 第二層內部項目：改為相對定位基準，避免 Flex 佈局干擾 */
.sub_menu ul li.has_dropdown {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}

/* 第二層 -> 第三層：向右貼齊框邊彈出 */
.sub_menu .has_dropdown:hover>.sub_menu {
  top: -10px !important;
  /* 與父選項頂部微調對齊 */
  left: 100% !important;
  /* 貼在右側框邊 */
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(0);
}

/* ---------- 4. 列表與文字優化 ---------- */
.sub_menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sub_menu ul li {
  height: auto !important;
  min-height: 45px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px !important;
  margin: 0;
  position: relative;
}

.sub_menu ul li a {
  flex: 1;
  text-align: left;
  line-height: 1.4;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  display: block;
}

/* 第二層以後的加號按鈕樣式 */
.sub_menu .drp_btn {
  width: 30px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 10px;
  cursor: pointer;
}

.sub_menu .has_dropdown .sub_menu {
  top: 0 !important;
  left: 100% !important;
  margin-top: -5px;
  margin-left: -2px;
}

.navbar-expand-lg .navbar-nav .has_dropdown .sub_menu {
  min-width: 230px;
}

/* 箭頭旋轉動畫 */
.has_dropdown:hover>.drp_btn i {
  transform: rotate(180deg);
}

.has_dropdown>a[href^="javascript"],
.has_dropdown>a[href="#"] {
  cursor: default;
}

/* ---------- 手機版導航修正 (991px 以下) ---------- */
@media (max-width: 991px) {

  /* 1. 基礎字體與樣式統一 */
  .sub_menu ul li a,
  .sub_menu .sub-link,
  .sub_menu .nav-link {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.5 !important;
    display: block !important;
    padding: 10px 0 !important;
  }

  /* 2. 第一層 (父層) 回歸區塊佈局 */
  .navbar-nav .has_dropdown {
    display: block !important;
    height: auto !important;
    position: relative !important;
    padding: 0 !important;
  }

  .navbar-nav .has_dropdown>a,
  .navbar-nav .has_dropdown .nav-link {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;

  }

  .navbar-nav .has_dropdown>.drp_btn {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 50px !important;
    height: 54px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    z-index: 5;
  }

  .navbar-expand-lg .navbar-nav .has_dropdown .sub_menu {
    position: static !important;
    display: none;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
    padding: 0 !important;
    background: transparent !important;
  }


  .navbar-expand-lg .navbar-nav .sub_menu,
  .navbar-expand-lg .navbar-nav .sub_menu ul {
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
  }

  /* ========== LV3 開 LV4 往下推 ========== */

  .navbar-expand-lg .navbar-nav .sub_menu ul li {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 0 20px !important;
    position: relative !important;
    border-bottom: 1px dashed #eee;
  }


  .navbar-expand-lg .navbar-nav .sub_menu ul li a {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 42px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-decoration: none !important;
    flex: 1;
  }

  /* 內層選單的箭頭按鈕 */
  .navbar-expand-lg .navbar-nav .sub_menu .drp_btn {
    height: 42px !important;
    width: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 層級縮排 */
  .sub_menu ul {
    padding-left: 20px !important;
    width: 100% !important;
    /* 確保寬度佔滿 */
  }

  /* 深層選單 (LV4) 的容器設定：強制往下推 */
  .sub_menu .has_dropdown .sub_menu {
    position: static !important;
    /* 確保不是 absolute */
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    /* 強制佔滿整行，把下面擠下去 */
    display: none;
  }
}

/* ---------- 會員專區覆寫 ---------- */
.navbar-expand-lg .navbar-nav .has_dropdown.member_dropdown:hover>a,
.navbar-expand-lg .navbar-nav .has_dropdown.member_dropdown:hover>.drp_btn {
  color: var(--primery) !important;
}

.member_dropdown:hover>.nav-link.dark_btn {
  background-color: var(--white);
  color: var(--primery);
  border-color: var(--primery);
}

/* 對齊所有 dropdown 高度 */
.member_dropdown .sub_menu {
  top: 100% !important;
}

/* ---------- Logo ---------- */
.navbar-brand img {
  width: 165px;
}

.navbar-brand h3 {
  color: var(--primery);
  font-weight: 800;
  font-size: 34px;
  margin: 0;
}

/* ---------- 手機版漢堡選單 ---------- */
.toggle-wrap {
  padding: 10px;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.toggle-bar,
.toggle-bar::before,
.toggle-bar::after,
.toggle-wrap.active .toggle-bar,
.toggle-wrap.active .toggle-bar::before,
.toggle-wrap.active .toggle-bar::after {
  transition: all 0.2s ease-in-out;
}

.toggle-bar {
  width: 25px;
  margin: 10px 0;
  position: relative;
  border-top: 4px solid var(--secondary);
  display: block;
}

.toggle-bar::before,
.toggle-bar::after {
  content: "";
  display: block;
  background: var(--secondary);
  height: 4px;
  width: 30px;
  position: absolute;
  top: -12px;
  right: 0;
  transform: rotate(0deg);
  transform-origin: 13%;
}

.white_header .toggle-bar,
.white_header .toggle-bar::before,
.white_header .toggle-bar::after {
  border-top: 4px solid var(--white);
}

.toggle-bar::after {
  top: 4px;
}

.toggle-wrap.active .toggle-bar {
  border-top: 6px solid transparent;
}

.toggle-wrap.active .toggle-bar::before {
  transform: rotate(45deg);
}

.toggle-wrap.active .toggle-bar::after {
  transform: rotate(-45deg);
}

/* ---------Hero-Slider-Css-Start------------------ */

/*------- banner-girl -----*/
.hero2 {
  position: relative;

  overflow: hidden;
}

.hero2__inner {
  position: relative;
  height: 100%;
}

.hero2__girl {
  position: absolute;
  right: min(3vw, 40px);
  bottom: 0;
  /* 貼著波浪底緣 */
  height: min(92vh, 880px);
  /* 控制人物高度 */
  max-height: 92%;
  object-fit: contain;
  /* 色彩微調，讓膚色更貼背景基調（可視覺調整） */
  filter: saturate(1.03) contrast(1.02);
  pointer-events: none;
}

/* ----- 若改用 girl.png（直線底）→ 加遮罩讓下緣變柔或波浪 ----- */
/* 方案 1：柔和淡出（最簡單） */
.hero2__girl.mask-fade {
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 1) 0 78%,
      rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 1) 0 78%,
      rgba(0, 0, 0, 0) 100%);
}

/* RWD 調整 */
@media (max-width: 1200px) {
  .hero2__girl {
    height: 76vh;
    right: 0.5rem;
  }
}

@media (max-width: 992px) {
  .hero2 {
    min-height: 760px;
  }

  .hero2__girl {
    height: 56vh;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* -----Typing Text------- */
.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* --------- USP section ---------- */
.usp_section {
  background: var(--secondary);
  padding: 50px 0;
  position: relative;
  z-index: 1;
}

.usp_section .usp_box {
  display: flex;
  align-content: center;
  color: #fff;
  position: relative;
}

.usp_section .usp_box:after {
  background: var(--white);
  content: "";
  width: 1px;
  height: 70%;
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0.3;
}

.usp_section .col-md-4:last-child .usp_box:after {
  display: none;
}

.usp_section .usp_icon {
  margin-right: 15px;
}

.usp_section .usp_text {
  line-height: 1.4em;
}

/* --------- Program section ---------- */

.program_section {
  position: relative;
  padding-top: 100px;
}

.program_section .program_blocks {
  position: relative;
  margin-top: 30px;
}

.program_section .program_blocks .program_box {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  border: solid 1px var(--border);
  padding: 25px 15px 25px 15px;
  text-align: center;
  box-shadow: 0px 8px 30px var(--shadow);
}

.program_section .program_blocks .program_box:hover {
  border: solid 1px var(--primery);
  transition: all ease-in-out 0.3s;
}

.program_section .program_blocks .program_box:hover .program_text {
  color: var(--primery);
  transition: all ease-in-out 0.3s;
}

.program_section .program_blocks .program_box .program_text {
  text-align: center;
  font-weight: 600;
}

.program_section .program_blocks .program_box .program_icon img {
  max-width: 100%;
}

/* --------- audio sample section ---------- */

.aud_section {
  position: relative;
}

.aud_section .aud_listing {
  padding-top: 20px;
}

.aud_section .aud_listing .aud_block {
  position: relative;
  margin-bottom: 30px;
  background: var(--white);
  border-radius: 12px;
  border: solid 1px var(--border);
  padding: 30px;
  box-shadow: 0px 8px 30px var(--shadow);
}

.aud_section .aud_listing .aud_block:hover {
  border: solid 1px var(--primery);
  transition: 0.4s all;
}

.aud_section .aud_listing .aud_block .aud_content {
  display: flex;
  text-align: left;
}

.aud_section .aud_listing .aud_block .aud_content .img {
  position: relative;
  width: 80px;
  margin-right: 20px;
}

.aud_section .aud_listing .aud_block .audio_player {
  margin-top: 20px;
}

audio {
  width: 100%;
}

/* how it works video model   */
.modal {
  z-index: 999999;
}

.modal-backdrop.show {
  z-index: 99999;
  opacity: 0.7;
}

.youtube-video .modal-dialog {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  padding: 0 15px;
  height: 100%;
  max-width: 1240px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#video-container {
  position: relative;
  padding-bottom: 50%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

iframe#youtubevideo {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.youtube-video .modal-footer {
  border: none;
  text-align: center;
  display: block;
  padding: 0;
}

.youtube-video .modal-content {
  background: none !important;
  border: none;
}

#close-video {
  color: #fff;
  font-size: 30px;
}

/* ---------- text List Flow Css Start ------------- */

.text_list_section {
  margin-top: -40px;
  overflow: hidden;
}

.text_list_section .slider_block {
  background-color: var(--secondary);
  padding: 20px 0;
  transform: rotate(-1.5deg);
  /* pointer-events: none; */
  width: 100%;
  overflow-x: hidden;
}

.text_list_section .down_fix {
  transform: rotate(-5deg);
  position: relative;
  bottom: -30px;
  z-index: 9;
}

.text_list_section.rotet_down {
  transform: rotate(0.5deg);
}

.text_list_section .owl-stage,
.text_list_section .owl-stage-outer,
.textFlow_list .owl-stage,
.textFlow_list .owl-stage-outer {
  height: 55px;
}

.text_block {
  display: flex;
  align-items: center;
}

.text_block span {
  color: var(--white);
  font-size: 50px;
  font-family: var(--font-bebas);
  font-weight: 700;
  line-height: 1;
}

.text_block .mark_star {
  margin: 0 60px;
  font-family: "Playball", cursive;
}

/* ----------Feature-Detail-Section-start------ */

/* features section wraper */
.features_section .feature_detail {
  background-color: var(--white);
  border-radius: 40px;
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  padding: 90px 0;
  border: solid 1px var(--border);
  align-items: center;
  -webkit-box-shadow: 0px 10px 40px -5px var(--shadow);
  -moz-box-shadow: 0px 10px 40px -5px var(--shadow);
  box-shadow: 0px 10px 40px -5px var(--shadow);
}

/* features section image */
.features_section .feature_detail .feature_img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.features_section .feature_detail .feature_img img {
  max-width: 100%;
}

/* features section box */

.features_section .feature_detail .feature_box {
  max-width: 440px;
  text-align: left;
}

.features_section .feature_detail .feature_box .data_block {
  margin: 25px 0 25px 0;
  border-radius: 20px;
  padding: 30px;
}

.features_section .feature_detail .feature_box .data_block.color1 {
  background: #ffdddf;
}

.features_section .feature_detail .feature_box .data_block.color2 {
  background: #bde7f8;
}

.features_section .feature_detail .feature_box .data_block.color3 {
  background: #dde1ff;
}

.features_section .feature_detail .feature_box .data_block.color4 {
  background: #eeeab6;
}

.features_section .feature_detail .feature_box .data_block h4 {
  font-weight: 700;
  line-height: 1.5;
}

.features_section .feature_detail .data_block .text {
  padding-top: 10px;
}

.features_section .feature_detail .left_data {
  text-align: left;
  padding-left: 100px;
}

.features_section .feature_detail .right_data {
  padding-right: 100px;
}

.features_section .feature_detail .left_data .data_block .icon {
  margin-right: -15px;
}

.features_section .container {
  max-width: 1370px;
}

/* ------------Service App Section Css------------ */
.service_section {
  position: relative;
}

.service_section .service_blocks {
  padding: 50px 0;
  align-items: center;
}

.service_section .service_badge {
  padding: 0;
  display: inline-block;
}

.service_section .service_badge span {
  margin-left: 3px;
}

.service_section .service_blocks .img img {
  max-width: 100%;
  border-radius: 20px;
}

.service_section .service_text {
  padding-right: 50px;
}

.service_section .service_text.right_side {
  padding-left: 100px;
  padding-right: 0;
}

.service_section .service_text h3 {
  margin: 15px 0 25px 0;
}

.service_section .service_text .text_badge {
  font-size: 14px;
  color: var(--primery);
  margin: 25px 0 0 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
}

.service_section .service_text .listing_block li {
  display: flex;
  gap: 15px;
}

.service_section .service_text .listing_block li .icon span {
  display: block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  color: var(--white);
  background-color: var(--secondary);
  border-radius: 100px;
  font-size: 8px;
  margin-top: 3px;
}

.service_section .service_text .listing_block li .text {
  width: calc(100% - 50px);
}

.service_section .service_text .feature_list li {
  display: flex;
  align-items: start;
  gap: 5px;
}

.service_section .service_text .feature_list li .icon span {
  color: var(--primery);
  font-size: 18px;
}

.service_section .service_text .feature_list li p {
  margin: 0;
  padding-top: 2px;
}

/* service section ui list */
.service_section .service_text .design_block {
  padding-top: 20px;
}

.service_section .service_text .design_block li {
  padding-left: 40px;
  position: relative;
  margin-bottom: 25px;
}

.service_section .service_text .design_block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../images/right_icon.webp);
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.service_section .service_text .design_block li h4 {
  font-size: 18px;
  color: var(--secondary);
  font-weight: 700;
  margin-bottom: 8px;
}

.service_section .service_text .design_block li p {
  margin-bottom: 0;
}

.service_section .service_text .btn_block {
  margin-top: 30px;
}

.service_section .service_text .btn {
  text-transform: capitalize;
  font-weight: 700;
}

/* ==============Service Images Css Start ======================== */
.service_blocks .inner_block {
  position: relative;
  text-align: center;
}

.service_blocks .inner_block .img {
  position: relative;
}

.service_blocks .inner_block .img img {
  position: relative;
}

/* -------------ctr Section Css Start------------- */

.ctr_app_btn_block {
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  text-align: center;
}

.ctr_app_btn_block .app_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}

.ctr_app_btn_block .app_btn li a {
  display: block;
  padding: 15px 35px;
  background-color: var(--black);
  border: none;
  position: relative;
  border-radius: 12px;
  transition: 0.4s all;
}

.ctr_app_btn_block .app_btn li a:hover {
  background-color: var(--primery);
  transition: 0.4s all;
}

.ctr_app_btn_block .app_btn li:last-child {
  margin-left: 25px;
}

.ctr_app_btn_block .app_btn li a img {
  transition: 0.4s all;
  height: 36px;
}

/* --- section element ------- */

.section_element {
  position: absolute;
}

.section_element.left_sd {
  top: 200px;
  left: -20px;
}

.section_element.left_sd_2 {
  bottom: 600px;
  left: -20px;
}

.section_element.right_sd {
  top: 900px;
  right: 0px;
  animation: mymove 15s infinite;
}

/* --------- Advanced key features Section Css Start---------- */
.advance_feature_section {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.advance_feature_section .af_innner {
  background: var(--white);
  max-width: 1370px;
  margin: 0 auto;
  border-radius: 40px;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  border: solid 1px var(--border);
  -webkit-box-shadow: 0px 10px 40px -5px var(--shadow);
  -moz-box-shadow: 0px 10px 40px -5px var(--shadow);
  box-shadow: 0px 10px 40px -5px var(--shadow);
}

.advance_feature_section .af_listing {
  padding: 20px 0 0 0;
}

.advance_feature_section .af_listing .row {
  align-items: flex-start;
}

.advance_feature_section .af_listing .listing_inner {
  display: flex;
  flex-wrap: wrap;
  gap: 5%;
}

.advance_feature_section .af_listing .listing_inner .af_block {
  background-color: var(--white);
  padding: 20px;
  border-radius: 20px;
  width: 20%;
  border: solid 1px var(--border);
  box-shadow: 0px 8px 30px var(--border);
}

.advance_feature_section .af_listing .listing_inner .af_block:hover {
  border: solid 1px var(--primery);
  transition: 0.4s all;
  box-shadow: 0px 4px 5px var(--border);
}

/*.advance_feature_section .af_listing .listing_inner .af_block .img {
  border-radius: 20px 20px 0 0;
  max-width: 100%;
  width: 100%;
  text-align: center;
}*/

.af_block .img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  /* 可選：圓角 */
}

.af_block .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 保留比例裁切填滿 */
  display: block;
}

.advance_feature_section .af_listing .listing_inner .af_block .text {
  text-align: center;
}

.advance_feature_section .af_listing .af_block h5 {
  margin: 20px 0 10px 0;
  padding: 0;
  text-align: center;
}

.advance_feature_section .af_listing .af_block p {
  margin-bottom: 40px;
}

.advance_feature_section .af_listing .af_block .process_num {
  position: absolute;
  text-align: center;
  background: var(--primery);
  color: var(--white);
  border-radius: 50px 50px 0 0;
  margin: 0 auto;
  width: 50px;
  padding: 10px 0px;
  bottom: 0;
  left: 0;
  right: 0;
}

/* -------------Review Section Css Start-------------- */
.review_section {
  position: relative;
}

.review_section .positive_inner {
  padding: 50px 0 0 0;
  border-bottom: 1px solid var(--greay);
}

.review_section .positive_inner .row {
  align-items: flex-start;
}

.review_section .positive_inner .row .sticky-top {
  top: 30px;
}

.review_section .google_rating {
  display: flex;
  align-items: center;
  gap: 5px;
}

.review_section .google_rating .star {
  display: flex;
  align-items: center;
}

.review_section .google_rating .star span,
.review_section .review_side .review_block .coustomer_info .star span {
  color: #fc9400;
}

.review_section .google_rating p {
  margin: 0;
  font-weight: 700;
}

.review_section .google_rating p img {
  height: 16px;
  nav-left: 5px;
}

.review_section .user_review {
  margin-bottom: 60px;
}

.review_section .user_review p {
  font-weight: 700;
}

.review_section .user_review p a {
  color: var(--primery);
}

.review_section .review_side .review_block {
  background-color: var(--white);
  border: solid 2px var(--border);
  border-radius: 20px;
  padding: 50px;
  margin-bottom: 30px;
  box-shadow: 0px 8px 30px var(--shadow);
}

.review_section .review_side .review_block .coustomer_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30px 0 0 0;
}

.review_section .review_block .star {
  width: 100px;
  display: flex;
  justify-content: left;
  color: #fc9400;
  margin-bottom: 15px;
}

.review_section .coustomer_info .quote {
  width: 100px;
  display: flex;
  justify-content: end;
  color: var(--secondary);
  font-size: 40px;
}

.review_section .coustomer_info .avtar {
  display: flex;
  align-items: center;
  gap: 15px;
  width: calc(100% - 120px);
}

.review_section .coustomer_info .avtar img {
  width: 80px;
  aspect-ratio: 1/1;
  border-radius: 150px;
}

.review_section .coustomer_info .avtar .text {
  width: calc(100% - 100px);
  text-align: left;
}

.review_section .coustomer_info .avtar .text h6 {
  margin-bottom: 0px;
}

.review_section .coustomer_info .avtar .text h3 {
  margin-bottom: 0;
}

.review_section .coustomer_info .avtar .text span {
  font-size: 14px;
}

.review_section .review_block p {
  margin: 0;
}

/* ------------inner page review Section Css Start---------- */

.review_section.page_ban {
  position: relative;
}

.review_section .review_side.innerpage_block {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
}

.review_section .review_side.innerpage_block .review_block {
  width: 48%;
}

.review_section .positive_inner.in_page {
  border-bottom: none;
  padding-top: 30px;
}

.review_section.page_ban .google_rating {
  display: block;
}

.review_section.page_ban .google_rating .star {
  display: block;
}

.review_section.page_ban .google_rating .rate_link {
  color: var(--primery);
  font-weight: normal;
}

/* -------------------Pricing-Section---------------------- */
.pricing_section {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.pricing_inner {
  max-width: 1370px;
  padding: 50px 0;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.pricing_section.inner_page .pricing_inner {
  padding-top: 0;
  padding-bottom: 30px;
}

.pricing_inner .section_title {
  position: relative;
}

.pricing_inner .nav-tabs {
  border: solid 1px var(--border);
  justify-content: center;
  background-color: var(--white);
  border-radius: 100px;
  padding: 5px;
  width: 230px;
  margin: 30px auto;
  position: relative;
}

.pricing_inner .nav-tabs button {
  border: transparent;
  border-radius: 10px;
  background-color: transparent;
  font-weight: 700;
  padding: 10px 30px;
  font-size: 14px;
}

.pricing_inner .nav-tabs button.active {
  background-color: var(--primery);
  color: var(--white);
  border-radius: 100px;
}

.pricing_inner .pannel_block {
  background-color: var(--white);
  border-radius: 20px;
  padding: 45px 40px;
  border: solid 1px var(--border);
  box-shadow: 0px 8px 30px var(--shadow);
}

.pricing_inner .pannel_block:not(.highlited_block) span,
.pricing_inner .pannel_block:not(.highlited_block) p,
.pricing_inner .pannel_block:not(.highlited_block) h2,
.pricing_inner .pannel_block:not(.highlited_block) h3 {
  color: var(--secondary);
}

.pricing_inner .pannel_block .pkg_icon {
  position: relative;
  text-align: left;
  margin-bottom: 5px;
}

.pricing_inner .pannel_block .heading {
  position: relative;
}

.pricing_inner .pannel_block .heading h5 {
  margin: 0;
}

.pricing_inner .pannel_block .heading span {
  font-size: 15px;
}

.pricing_inner .pannel_block .pricing {
  padding: 0 0 25px 0;
  border-bottom: 1px solid var(--dark-greay);
}

.pricing_inner .pannel_block .pricing h3 {
  font-family: "Manrope", sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: var(--primery);
  margin: 0;
}

.pricing_inner .pannel_block .pricing span {
  font-size: 15px;
  margin-left: -10px;
  color: var(--primery);
}

.pricing_inner .pannel_block .features {
  margin: 30px 0 35px 0;
}

.pricing_inner .pannel_block .features li {
  display: flex;
  align-items: start;
  margin: 5px 0;
}

.pricing_inner .pannel_block .features li p {
  margin: 0;
  width: calc(100% - 20px);
  font-weight: 500;
  padding-top: 2px;
}

.pricing_inner .pannel_block .features li .icon {
  margin-right: 5px;
  width: 17px;
}

.pricing_inner .pannel_block .features li .icon .icofont-check-circled {
  color: var(--secondary);
}

.pricing_inner .pannel_block .features li .icon .icofont-close-circled {
  color: var(--red-color);
}

.pricing_inner .pannel_block.highlited_block {
  border: 2px solid var(--primery);
  overflow: hidden;
}

.pricing_inner .pannel_block.highlited_block .offer {
  position: absolute;
  right: -30px;
  top: 22px;
  background-color: var(--primery);
  padding: 5px 30px;
  line-height: 1.2;
  font-weight: 600;
  font-size: 13px;
  color: var(--white);
  transform: rotate(45deg);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pricing_inner .pannel_block.highlited_block .features li .icon .icofont-check-circled {
  color: var(--secondary);
}

.pricing_inner .contact_text {
  margin-top: 40px;
  margin-bottom: 0;
}

.pricing_inner .contact_text a {
  color: var(--white);
  text-decoration: underline;
  line-height: 1.5;
}

/* ---------Key Feature Section Css Start---------- */
.key_feature_section {
  padding-left: 15px !important;
  padding-right: 15px !important;
  position: relative;

  background-image: url(../images/template_bg.webp);
  background-size: cover;
  background-repeat: repeat;
  background-attachment: fixed;
}

.key_feature_section .key_innner {
  /*max-width: 1370px;*/
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  padding: 50px 0;
}

.key_innner .section_title {
  margin-bottom: 35px;
  position: relative;
}

.key_feature_section .feature_box {
  padding: 30px;
  text-align: center;
  border-radius: 20px;
  background: var(--secondary-lighter);
  border: solid 1px #907d86;
}

.key_feature_section .feature_box .txt_blk {
  text-align: center;
  padding-bottom: 30px;
}

.key_feature_section .feature_box .txt_blk .rating {
  margin-bottom: 10px;
}

.key_feature_section .feature_box .txt_blk .rating .icofont-star {
  color: #fc9400;
}

.key_feature_section .feature_box h6 {
  padding: 30px 0 0 0;
  margin-bottom: 0;
  color: var(--white);
}

.key_feature_section .feature_box p .story_bold {
  font-weight: 700;
}

.key_feature_section .feature_box .img {
  margin-top: 0;
}

.key_feature_section .feature_box .img img {
  border-radius: 100px;
  margin: 0 auto;
  border: solid 4px var(--primery);
}

.key_feature_section .feature_box .quote_img {
  text-align: center;
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  display: inline-block;
  margin: 0 auto;
  width: 68px;
}

.key_innner .owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 100px;
  border: 1px solid var(--dark-greay) !important;
  transition: 0.4s all;
}

.key_innner .owl-nav button span {
  color: var(--dark-greay);
  font-size: 22px;
  line-height: 1.2;
}

.key_innner .owl-nav button.owl-prev {
  left: -50px;
  background-color: var(--white);
}

.key_innner .owl-nav button.owl-next {
  right: -50px;
  background-color: var(--white);
}

.key_innner .owl-nav button:hover {
  background-color: var(--white);
  border-color: var(--white);
}

.key_innner .owl-nav button:hover span {
  color: var(--primery);
}

.kf_side_element {
  position: absolute;
}

.kf_side_element.left_side {
  top: 300px;
  left: 100px;
}

.kf_side_element.right_side {
  top: 600px;
  right: 50px;
}

/* -------------blog-Section-Css-Start------------- */
.blog_section {
  position: relative;
}

.blog_section .section_title {
  margin-bottom: 50px;
}

.blog_section .blog_listing {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.blog_section .blog_listing.inner_page .blog_post {
  margin-bottom: 40px;
}

.blog_section .blog_listing .blog_post {
  background-color: var(--white);
  border: solid 1px var(--border);
  padding: 0;
  border-radius: 20px;
  width: calc(50% - 40px);
  box-shadow: 0px 8px 30px var(--shadow);
}

.blog_section .blog_listing .blog_post:hover {
  background-color: var(--white);
  transition: all ease-in-out 0.3s;
}

.blog_section .blog_listing .blog_post img {
  border-radius: 20px 20px 0 0;
  max-width: 100%;
}

.blog_section .blog_listing .blog_post .text {
  padding: 40px;
}

.blog_section .blog_listing .blog_post .blog_info {
  display: flex;
  font-size: 14px;
}

.blog_section .blog_listing .blog_post .blog_info li:not(:last-child):after {
  content: "|";
  margin: 0 10px;
}

.blog_section .blog_listing .blog_post h4 {
  margin: 20px 0 25px 0;
  line-height: 1.5;
}

.blog_section .blog_listing .blog_post.editor_choice h4 {
  margin: 20px 0 10px 0;
}

.blog_section .blog_listing .blog_post h4 a {
  transition: 0.4s all;
}

.blog_section .blog_listing .blog_post.editor_choice p {
  padding-bottom: 15px;
}

.blog_section .blog_listing .blog_post .tag_more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: solid 1px var(--border);
  padding: 30px 0 0 0;
}

.blog_section .blog_listing .blog_post .tag_more .tag {
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary);
  background: var(--light-primery);
  padding: 2px 20px;
  border-radius: 100px;
}

.blog_section .blog_listing .blog_post .tag_more a {
  font-weight: 700;
  color: var(--primery);
  transition: 0.4s all;
}

.blog_section .blog_listing .blog_post .tag_more a:hover {
  color: var(--black);
}

/* editor choice */

.blog_section .blog_listing .blog_post.editor_choice {
  position: relative;
  display: flex;
  padding: 50px 35px;
  overflow: hidden;
  align-items: center;
  width: 100%;
}

.blog_section .blog_listing .blog_post.editor_choice h5 {
  margin-bottom: 10px;
}

.blog_section .blog_listing .blog_post.editor_choice img {
  width: 100%;
  max-width: 100%;
  border-radius: 20px;
}

.blog_section .editor_choice .choice_badge {
  position: absolute;
  right: -75px;
  top: -10px;
  background-color: var(--primery);
  color: var(--white);
  padding: 35px 72px 10px 70px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.2;
  transform: rotate(45deg);
  z-index: 100;
  letter-spacing: 1px;
}

/* 卡片外觀 */
.feature_box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 20px;
}

@media (max-width: 575.98px) {
  .feature_box {
    grid-template-columns: 1fr;
  }
}

/* 外卡片 */
.feature_box {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  padding: 0 22px 22px;
}

/* 封面圖（上圓角大圖） */
.fb_cover {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  margin: 12px 0 18px;
  background: #eee;
}

.fb_cover img {
  width: 100%;
  height: 240px;
  /* 依需求改高；或用 aspect-ratio */
  object-fit: cover;
  display: block;
  filter: saturate(1.02);
  transition: transform 0.35s ease;
}

.feature_box:hover .fb_cover img {
  transform: scale(1.02);
}

/* meta：頭像＋名稱｜日期 */
.fb_meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6b6b6b;
  font-size: 14px;
  margin-bottom: 10px;
}

/* 橘色圓角標籤 */
.fb_meta .category {
  background-color: #f28411;
  color: #fff;
  border-radius: 6px;
  padding: 2px 8px;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.4;
}

.fb_meta .category a {
  color: #fff;
  text-decoration: none;
}

.fb_meta .category a:hover {
  text-decoration: underline;
}

.fb_meta .author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fb_meta .avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

.fb_meta .name {
  font-weight: 600;
  color: #443;
}

.fb_meta .sep {
  opacity: 0.35;
}

/* 橘色標題（重點標） */
.fb_title {
  color: #d9660a;
  /* 橘色 */
  font-size: 22px;
  line-height: 1.35;
  margin: 6px 0 10px;
  font-weight: 800;
}

/* 簡易內文 */
.fb_excerpt {
  color: #4d3f3f;
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 28px;
  flex: 1 1 auto;
  /* 撐開，讓 readmore 固定在右下 */
}

/* 右下角 Read More */
.fb_readmore {
  align-self: flex-end;
  color: #e27213;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fb_readmore i {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.fb_readmore:hover i {
  transform: translateX(3px);
}

/* RWD 圖高微調 */
@media (max-width: 575.98px) {
  .fb_cover img {
    height: 200px;
  }
}

/* 讓容器當定位參考 */
#feature_slider.owl-carousel {
  position: relative;
  padding: 0 56px;
  /* 給箭頭留空間（可調） */
}

/* 隱藏預設位置，改為左右置中 */
#feature_slider .owl-nav {
  margin: 0;
  /* 移除預設外距 */
}

#feature_slider .owl-nav button.owl-prev,
#feature_slider .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: #1f1f1f;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  z-index: 3;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#feature_slider .owl-nav button.owl-prev {
  left: 12px;
}

#feature_slider .owl-nav button.owl-next {
  right: 12px;
}

#feature_slider .owl-nav i {
  font-size: 16px;
  line-height: 1;
}

#feature_slider .owl-nav button:hover {
  background: #f28411;
  color: #fff;
  box-shadow: 0 10px 24px rgba(242, 132, 17, 0.35);
}

#feature_slider .owl-nav button:focus {
  outline: none;
}

/* 手機上縮小一點 */
@media (max-width: 575.98px) {
  #feature_slider {
    padding: 0 44px;
  }

  #feature_slider .owl-nav button.owl-prev,
  #feature_slider .owl-nav button.owl-next {
    width: 38px;
    height: 38px;
  }
}

/* ------------- center button section ------------- */

.ctr_cta {
  margin: 0 auto;
  margin-top: 50px;
  text-align: center;
}

/* ------  CTA section ------------- */

.cta_section.new {
  padding-top: 50px;
}

.cta_section.new .cta_box {
  background: var(--primery);
  position: relative;
  z-index: 99;
  border-radius: 20px;
  padding: 60px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: -60px;
}

.cta_section.new .cta_box .section_title {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 80px;
}

.cta_section.new .cta_box .section_title h3 {
  margin-bottom: 0;
  line-height: 1.2;
}

.cta_section.new .cta_box .section_title p {
  padding: 0;
}

.cta_section.new .cta_box .section_title .customer_icon {
  position: absolute;
  left: 0;
  top: 10%;
}

.cta_section.new .cta_box .btn_block {
  display: flex;
  justify-content: end;
  align-content: center;
  height: 100%;
  flex-wrap: wrap;
}

.cta_section.new .cta_box .btn {
  float: left;
  padding: 15px 30px;
  background-color: var(--white);
  border-radius: 100px;
}

.cta_section.new .cta_box .call_btn {
  background-color: var(--secondary);
  margin-right: 15px;
  font-weight: 700;
  border-radius: 100px;
}

.cta_section.new .cta_box .email_btn:hover {
  background-color: var(--secondary);
  transition: all ease-in-out 0.5s;
  color: var(--white);
}

.cta_section.new .cta_box .right {
  width: 54%;
}

.cta_section.new .cta_box .element .element1,
.t_element2 {
  position: absolute;
}

.cta_section.new .cta_box .element .element1 {
  right: 35%;
  top: 10%;
  animation: mymove 15s infinite;
}

.cta_section.new .cta_box .element .element2 {
  left: 20%;
  bottom: 6%;
  animation: mymove 8s infinite;
}

/* ------Footer-Css-Start-------------- */
/* footer wraper */
footer {
  position: relative;
}

footer .top_footer {
  background-image: url(../images/footer-bg.png);
  background-repeat: repeat;
  background-size: cover;
  background-position: center;
  padding: 80px 0 00px 0;
  position: relative;
}

.top_footer::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -130px;
  background-image: url(../images/footer_overlay.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 140px;
  background-position: bottom center;
  z-index: 1;
}

/* footer logo */
footer .top_footer .logo {
  margin-bottom: 40px;
}

footer .top_footer .logo img {
  width: 170px;
}

footer .top_footer .abt_side .app_btn {
  display: flex;
}

footer .top_footer .abt_side .app_btn li {
  margin: 0 20px 0 0;
}

footer .top_footer .abt_side li {
  padding: 0 0 20px 0;
}

footer .top_footer .abt_side p {
  padding: 0 80px 20px 0;
}

/* footer social media icon */
footer .top_footer .social_media {
  display: flex;
  justify-content: center;
}

/* footer link list */
footer .top_footer .social_media li a {
  display: block;
  width: 37px;
  height: 37px;
  text-align: center;
  line-height: 34px;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  margin-right: 10px;
  transition: 0.4s all;
}

footer .top_footer .social_media li a:hover {
  background-color: var(--primery);
  color: var(--white);
}

footer .top_footer .try_out {
  margin-left: -20px;
}

footer .app_btn li a {
  display: block;
  padding: 14px 24px;
  background-color: var(--white);
  position: relative;
  border-radius: 12px;
  transition: 0.4s all;
  text-align: center;
}

footer .app_btn li a img {
  height: 36px;
}

footer .app_btn li a:hover {
  background: var(--primery);
}

footer .app_btn li a:hover img {
  -webkit-filter: invert(100%);
  /* Safari/Chrome */
  filter: invert(100%);
  transition: 0.4s all;
}

footer .app_btn li:last-child {
  margin-top: 20px;
}

footer .news_letter form .form-group {
  max-width: 430px;
  position: relative;
}

footer .news_letter form .form-group .form-control {
  width: 100%;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  min-height: 60px;
  color: var(--white);
  font-weight: 500;
}

footer .news_letter form .form-group .form-control::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

footer .news_letter form .form-group button {
  position: absolute;
  right: 5px;
  top: 5px;
  background-color: var(--primery);
  color: var(--white);
  width: 50px;
  height: 50px;
  border-radius: 10px;
  font-size: 20px;
  transition: 0.4s all;
}

footer .news_letter form .form-group button:hover {
  background-color: var(--white);
  color: var(--primery);
}

footer .news_letter form .note {
  font-size: 14px;
}

/* footer heading and text colors variable */
footer h2,
footer h5,
footer p,
footer a {
  color: var(--white);
}

footer a:hover {
  color: var(--white);
}

/* footer heading h3 */
footer h5 {
  position: relative;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 55px;
  padding-left: 10px;
  line-height: 0.8;
}

footer h5::before {
  content: "";
  width: 3px;
  height: 18px;
  background-color: var(--white);
  position: absolute;
  margin-left: -10px;
}

footer .links ul li a {
  display: block;
  margin-bottom: 16px;
  font-size: 16px;
}

footer .links ul li a:hover {
  text-decoration: underline;
}

/* footer last */
footer .bottom_footer {
  background-color: rgba(0, 0, 0, 0.3);
  margin-top: 20px;
  padding: 30px 0 20px 0;
}

footer .bottom_footer p {
  margin-bottom: 0;
  font-size: 14px;
}

footer .bottom_footer .developer_text {
  text-align: right;
}

footer .bottom_footer .developer_text a {
  text-decoration: underline;
}

/* footer elements animation */

.top_footer .element .element1,
.element2 {
  position: absolute;
}

.top_footer .element .element1 {
  left: 120px;
  top: 200px;
  animation: mymove 15s infinite;
}

.top_footer .element .element2 {
  right: 70px;
  bottom: 200px;
  animation: mymove 10s infinite;
}

@keyframes mymove {
  50% {
    transform: rotate(180deg);
  }
}

/* 快速連結：第二欄 → 兩欄 grid */
.top_footer .row>div:nth-child(2) .links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}

.top_footer .row>div:nth-child(2) .links ul li a {
  display: inline-block;
  text-decoration: none;
  color: #fff;
}

.top_footer .row>div:nth-child(2) .links ul li a:hover {
  text-decoration: underline;
}

/* 聯絡方式：第三欄 → 單欄 + 白字 + 可換行 */
.top_footer .row>div:nth-child(3) .links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  /* 關掉 grid */
}

.top_footer .row>div:nth-child(3) .links ul li {
  color: #fff;
  line-height: 1.9;
  white-space: normal;
  /* 允許正常換行 */
  word-break: break-word;
  /* 長字/Email 可斷行 */
  overflow-wrap: anywhere;
  /* 更強的斷行保險 */
}

/* 手機改回單欄（快速連結） */
@media (max-width: 575.98px) {
  .top_footer .row>div:nth-child(2) .links ul {
    grid-template-columns: 1fr;
  }
}

/* footer go top button */
.go_top {
  position: fixed;
  right: 30px;
  bottom: 110px;
  cursor: pointer;
  transition: 0.4s all;
  display: none;
  z-index: 100;
}

.go_top span {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primery);
  color: var(--white);
  border-radius: 150px;
  font-size: 25px;
}

.go_top:hover {
  bottom: 120px;
}

.go_icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #f28411;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.go_icon:hover {
  background-color: #ff9f32;
  transform: translateY(-2px);
}

.go_icon.phone {
  background-color: #155cdf;
}

.go_icon.line {
  background-color: #00b900;
}

.go_icon i {
  font-size: 20px;
}

/* ===============About Page Css Start================== */

/* Page Banner Css Start */
.bred_crumb {
  background-image: url(../images/header_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 400px;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.bred_crumb::after {
  content: "";
  background-image: url(../images/hero_overlay_bg.webp);
  position: absolute;
  bottom: -1px;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 89px;
  background-position: bottom center;
}

.bred_crumb .bred_text {
  text-align: center;
  z-index: 1000;
  position: relative;
}

.bred_crumb .bred_text h1 {
  color: var(--primery);
}

.bred_crumb .bred_text h1+p {
  color: var(--secondary);
  margin-top: -5px;
}

.bred_crumb .bred_text ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bred_crumb .bred_text ul li {
  margin: 0 5px;
}

.bred_crumb .bred_text ul li a,
.bred_crumb .bred_text ul li span {
  color: var(--black);
  font-size: 14px;
  transition: 0.4s all;
}

.bred_crumb .bred_text ul li a:hover {
  text-decoration: underline;
}

/* Inner Page banner shape animation */
.bred_crumb .banner_shape1,
.banner_shape2,
.banner_shape3 {
  position: absolute;
}

.bred_crumb .banner_shape1 {
  bottom: 25%;
  left: 10%;
}

.bred_crumb .banner_shape2 {
  top: 100px;
  right: 10%;
  /*animation: mymove 5s infinite;*/
}

.bred_crumb .banner_shape3 {
  top: 350px;
  right: 20%;
}

/* ===============About Page Css Start================== */
.about_us_section {
  padding-top: 50px;
  position: relative;
}

.about_us_section .section_title {
  text-align: left;
}

.about_us_section .section_title p {
  padding: 0 300px 0 0;
  margin-top: 20px;
}

.about_us_section .section_title_custom p {
  padding: 20px 0px 20px 0;
  margin-top: 20px;
  font-weight: 600px;
  color: #3a1b02;
}

.about_us_section #about_slider .abt_slides img {
  height: 350px;
  object-fit: cover;
  width: 100%;
  border-radius: 15px;
}

.about_us_section .abt_text h2 {
  font-size: 35px;
  font-weight: 700;
  letter-spacing: -1px;
  max-width: 375px;
}

.about_us_section .abt_text h2 span {
  color: var(--primery);
}

/* ===============Why Choose Us Section Css Start================== */
.why_choose {
  position: relative;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.why_choose .why_choose_inner {
  max-width: 1370px;
  margin: 0 auto;
  background-image: url(../images/template_bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 100px 0;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.why_choose .why_choose_inner .company_statistics ul {
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  margin: 30px auto 0 auto;
}

.why_choose .why_choose_inner .company_statistics ul li {
  width: 25%;
  aspect-ratio: 1/1;
  border-radius: 20px;
  background-color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 4;
  padding: 30px;
}

.why_choose .why_choose_inner .company_statistics ul li:not(:last-child) {
  margin-left: 30px;
}

.why_choose .why_choose_inner .company_statistics ul li p span {
  font-size: 35px;
  font-weight: 700;
  color: var(--secondary);
}

.why_choose .why_choose_inner .company_statistics ul li p {
  font-size: 18px;
  color: var(--black);
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.why_choose .why_choose_inner .company_statistics .usp_img {
  margin: 0 0 20px 0;
}

/* ==============About Service Section Css Start============== */
.about_service .video_player {
  position: relative;
}

.about_service .video_player .play_icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.about_service .video_player .play_icon img {
  width: 128px;
  aspect-ratio: 1/1;
  opacity: 0.9;
}

.service_section.about_service .service_blocks {
  padding-top: 0;
  padding-bottom: 0;
}

.service_section.about_service .service_blocks .inner_block {
  background: none;
  border: none;
}

.service_section.about_service .service_blocks .service_text h2 {
  margin: 0 0 20px 0;
}

/* ===============Testimonial Section Css Start============= */
.testimonial_section {
  position: relative;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin-top: 80px;
}

.testimonial_section .testimonial_inner {
  max-width: 1370px;
  margin: 0 auto;
  background-color: var(--white);
  border: solid 1px var(--border);
  padding: 100px 0;
  border-radius: 20px;
  overflow: hidden;
  position: relative;

  -webkit-box-shadow: 0px 10px 40px -5px var(--shadow);
  -moz-box-shadow: 0px 10px 40px -5px var(--shadow);
  box-shadow: 0px 10px 40px -5px var(--shadow);
}

.testimonial_section .testimonial_side_element {
  position: absolute;
  right: 50px;
  top: 50px;
}

.testimonial_section .testimonial_inner .testimonial_slides {
  padding-top: 40px;
}

.testimonial_section .title {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  width: 100%;
  text-align: center;
}

.testimonial_section .title .star {
  display: flex;
  justify-content: center;
  transform: rotate(-3deg);
  margin-bottom: -20px;
}

.testimonial_section .title .star span,
.testimonial_section .testimonial_box .testi_text .star span {
  color: #fc9400;
}

.testimonial_section .title .star .sub_title {
  padding: 2px;
}

.testimonial_section .title .sub_title {
  transform: rotate(-3deg);
  position: relative;
  bottom: -20px;
  z-index: 9;
}

.testimonial_section .title .sub_title {
  color: var(--white);
  display: inline-block;
  padding: 2px 20px;
  border-radius: 100px;
  background-color: var(--primery);
}

.testimonial_box {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 950px;
  margin: 0 auto;
  gap: 60px;
}

.testimonial_box .testi_img {
  width: 255px;
  position: relative;
}

.testimonial_box .testi_img .play_icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.testimonial_box .testi_img .play_icon img {
  width: 80px;
  aspect-ratio: 1/1;
  opacity: 0.9;
}

.testimonial_box .testi_img .user_img {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 20px;
  object-fit: cover;
}

.testimonial_box .testi_text {
  width: calc(100% - 315px);
}

.testimonial_box .testi_text .star {
  display: flex;
}

.testimonial_box .testi_text p {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.5;
}

.testimonial_box .user_info {
  display: flex;
  gap: 5px;
}

.testimonial_box .user_info h6 {
  margin: 0;
}

.testimonial_box .user_info span {
  font-size: 15px;
}

/* -----------Meet Our Team Section Css---------- */
.experts_team_section {
  margin-top: 50px;
  position: relative;
}

.experts_team_section .section_title {
  margin-bottom: 40px;
}

.experts_team_section .col-md-4 {
  padding-left: 25px;
  padding-right: 25px;
}

.experts_team_section .experts_box {
  position: relative;
  text-align: center;
  padding: 10px 10px 30px 10px;
  border-radius: 20px;
  transition: 0.4s all;
  background-color: var(--white);
  border: solid 1px var(--border);
  box-shadow: 0px 8px 30px var(--shadow);
}

.experts_team_section .experts_box img {
  margin-bottom: 30px;
  max-width: 100%;
  border-radius: 20px;
  border: solid 1px var(--border);
}

.experts_team_section .experts_box .text h6 {
  color: var(--secondary);
  transition: 0.4s all;
  margin: 0;
}

.experts_team_section .experts_box .text span {
  color: var(--black);
}

.experts_team_section .experts_box .social_media {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.experts_team_section .experts_box .social_media a {
  display: block;
  width: 33px;
  height: 33px;
  border: 1px solid var(--greay);
  border-radius: 50px;
  text-align: center;
  line-height: 31px;
  color: var(--black);
  margin: 0 5px;
  transition: 0.4s all;
  font-size: 15px;
  background-color: var(--white);
}

.experts_team_section .experts_box .social_media a:hover {
  border-color: var(--primery);
  background-color: var(--primery);
  color: var(--white);
}

.experts_team_section .experts_box:hover {
  background-color: var(--secondary);
}

.experts_team_section .experts_box:hover h6 {
  color: var(--white);
}

.experts_team_section .experts_box:hover span {
  color: var(--white);
}

.experts_team_section .experts_box:hover .social_media {
  opacity: 1;
}

/* ===============FAQ Section Css Start============ */

.faq_section .section_title {
  margin-bottom: 50px;
}

.faq_section .nav-tabs {
  justify-content: center;
  margin-bottom: 30px;
  border: none;
}

.faq_section .nav-tabs .nav-item.show .nav-link,
.faq_section .nav-tabs .nav-link.active,
.faq_section .nav-tabs .nav-link:hover,
.faq_section .nav-tabs .nav-link {
  border: none;
  margin: 0;
}

.faq_section .nav-tabs .nav-item {
  position: relative;
}

.faq_section .nav-tabs .nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  z-index: -1;
}

.faq_section .nav-tabs .nav-item button {
  background-color: #fff;
  padding: 10px 36px;
  border-radius: 10px;
  font-weight: 500;
}

.faq_section .nav-tabs .nav-item:first-child:before {
  border-radius: 10px 0 0 10px;
}

.faq_section .nav-tabs .nav-item:last-child:before {
  border-radius: 0 10px 10px 0;
}

.faq_section .nav-tabs .nav-item.show .nav-link,
.faq_section .nav-tabs .nav-link.active {
  background-color: var(--secondary);
  color: #fff;
}

.faq_section .accordion {
  margin-bottom: -20px;
}

.faq_section .card {
  border: none;
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 10px;
  border: solid 1px var(--border);
}

.faq_section .card .card-header {
  background-color: #fff;
  border: none;
  border-radius: 10px;
  padding: 15px 20px;
}

.faq_section .card .card-header button {
  width: 100%;
  text-align: left;
  color: var(--secondary);
  text-decoration: none;
  padding: 0;
  font-weight: 700;
  position: relative;
  padding-right: 72px;
  font-size: 20px;
}

.faq_section .card .card-header button.collapsed {
  color: #000;
}

.faq_section .card .card-header button:focus {
  outline: none;
  box-shadow: none;
}

.faq_section .card .card-header button .icons i {
  position: absolute;
  right: 0;
  top: 4px;
  color: var(--secondary);
}

.faq_section .card .card-header button.collapsed .icons .icofont-minus,
.faq_section .card .card-header button .icons .icofont-plus {
  display: none;
}

.faq_section .card .card-header button .icons .icofont-minus,
.faq_section .card .card-header button.collapsed .icons .icofont-plus {
  display: block;
}

.faq_section .card .card-body {
  padding-top: 0;
}

/* =======================Our App Download Section Css Start======================= */
.download_app {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.download_app .section_title p {
  padding: 0;
}

.download_app .task_block {
  max-width: 1370px;
  margin: 0 auto;
  padding: 50px 110px;
  position: sticky;
  z-index: 99;
  border-radius: 30px;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.2);
  /* 半透明白底 */
  backdrop-filter: blur(20px);
  /* 背景模糊效果 */
  -webkit-backdrop-filter: blur(20px);
  /* Safari 支援 */

  border: 1px solid rgba(255, 255, 255, 0.3);
  /* 淡邊框 */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  /* 柔和陰影 */
}

.download_app .frame_img {
  text-align: center;
}

.download_app .frame_img img {
  max-width: 100%;
}

.download_app .task_block .row {
  align-items: center;
}

.download_app .task_block .title_badge {
  background: var(--secondary);
}

.download_app .task_block .section_title {
  text-align: left;
}

.download_app .app_btn {
  display: flex;
  align-items: center;
  margin-top: 40px;
}

.download_app .app_btn li a {
  display: block;
  padding: 20px 30px;
  background-color: var(--white);
  border: none;
  position: relative;
  border-radius: 12px;
  transition: 0.4s all;
}

.download_app .app_btn li a:hover {
  background-color: var(--secondary);
}

.download_app .app_btn li a:hover img {
  -webkit-filter: invert(100%);
  /* Safari/Chrome */
  filter: invert(100%);
}

.download_app .app_btn li:last-child {
  margin-left: 15px;
}

.download_app .app_btn li a img {
  transition: 0.4s all;
  height: 36px;
}

.download_element {
  position: absolute;
}

.download_element.elm1 {
  top: 30px;
  left: 600px;
  animation: mymove 15s infinite;
}

.download_element.elm2 {
  bottom: 30px;
  left: 100px;
  animation: mymove 10s infinite;
}

/* =============Our Resource Section=============== */
.our_resource {
  position: relative;
  padding: 80px 0 40px 0;
}

.our_resource .section_title {
  text-align: left;
}

.our_resource .mail_block {
  margin: 0 auto;
  background-color: var(--black);
  padding: 70px 60px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.our_resource .mail_block .text {
  position: relative;
  z-index: 2;
  text-align: center;
}

.our_resource .mail_block .icon {
  display: block;
  margin-bottom: 20px;
}

.our_resource .mail_block h3 {
  font-size: 26px;
}

.our_resource .mail_block form .form-group {
  max-width: 100%;
  position: relative;
  margin-bottom: 5px;
}

.our_resource .mail_block form .form-group .form-control {
  width: 100%;
  background-color: var(--white);
  border: 1px solid var(--white);
  border-radius: 10px;
  min-height: 60px;
  color: var(--black);
  font-weight: 500;
}

.our_resource .mail_block form .form-group button {
  position: absolute;
  right: 5px;
  top: 5px;
  background-color: var(--primery);
  color: var(--white);
  width: 50px;
  height: 50px;
  border-radius: 10px;
  font-size: 20px;
  transition: 0.4s all;
}

.our_resource .mail_block form .form-group button:hover {
  background-color: var(--white);
  color: var(--primery);
  border-color: var(--primery);
}

.our_resource .mail_block form .note {
  color: #7a7a7a;
  text-align: left;
  margin: 0;
}

/* ===========Articles Section Start===================== */
.articles_section {
  position: relative;
}

.articles_section .section_title {
  text-align: left;
}

.articles_section .section_title h2 {
  font-size: 35px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #cfcbc4;
}

.articles_section .filter_tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0 50px 0;
}

.articles_section .filter_tags li a {
  display: block;
  padding: 10px 22px;
  background-color: var(--white);
  border-radius: 10px;
  color: var(--greay);
  transition: 0.4s all;
}

.articles_section .filter_tags li a:hover,
.articles_section .filter_tags li a.active {
  background-color: var(--primery);
  color: var(--white);
}

.blog_listings .listing_block {
  display: flex;
  padding: 30px;
  border-radius: 20px;
  background-color: var(--white);
}

.blog_listings .listing_block:not(:last-child) {
  margin-bottom: 40px;
}

.blog_listings .listing_block .img {
  width: 350px;
}

.blog_listings .listing_block .img img {
  width: 100%;
  border-radius: 20px;
}

.blog_listings .listing_block .blog_text {
  width: calc(100% - 600px);
  padding: 0 15px 0 60px;
}

.blog_listings .listing_block .blog_text .tag {
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary);
  background: var(--light-primery);
  padding: 2px 18px;
  border-radius: 100px;
}

.blog_listings .listing_block .blog_text h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 25px 0;
}

.blog_listings .listing_block .blog_text h2 a {
  color: var(--black);
}

.blog_listings .listing_block .blog_text h2 a:hover {
  color: var(--primery);
}

.blog_listings .listing_block .blog_text a {
  font-weight: 700;
  color: var(--primery);
  transition: 0.4s all;
}

.blog_listings .listing_block .blog_text a:hover {
  color: var(--primery);
  text-decoration: underline;
}

.blog_listings .listing_block .authore_info {
  width: 250px;
}

.blog_listings .listing_block .authore_info {
  width: 250px;
}

.blog_listings .listing_block .authore_info .blog_info {
  display: flex;
  flex-wrap: wrap;
}

.blog_listings .listing_block .authore_info .blog_info li {
  position: relative;
  padding: 0 10px 0 15px;
  font-size: 15px;
}

.blog_listings .listing_block .authore_info .blog_info li::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: var(--black);
  border-radius: 10px;
  left: 0;
  position: absolute;
  top: calc(50% - 2.5px);
}

.blog_listings .listing_block .authore_info .avtar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
}

.blog_listings .listing_block .authore_info .avtar img {
  width: 50px;
  aspect-ratio: 1/1;
  border-radius: 100px;
}

.blog_listings .listing_block .authore_info .avtar .text {
  width: calc(100% - 60px);
}

.blog_listings .listing_block .authore_info .avtar .text h3 {
  margin-bottom: 0;
  font-size: 18px;
}

.blog_listings .listing_block .authore_info .avtar .text span {
  font-size: 14px;
}

.pagination_block {
  padding: 0 15px;
  margin: 50px 0 0 0;
}

.pagination_block ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.pagination_block ul li a {
  display: block;
  padding: 10px 15px;
  background-color: var(--white);
  color: var(--black);
  border-radius: 5px;
  transition: 0.4s all;
  line-height: 1;
}

.pagination_block ul li .prev,
.pagination_block ul li .next {
  padding: 10px 20px;
}

.pagination_block ul li a:hover,
.pagination_block ul li a.active {
  background-color: var(--primery);
  color: var(--white);
}

/* =============Blog Single Css Start==================== */

.page_wrapper.blog_dt {
  overflow-x: visible;
}

.blog_detail_section {
  position: relative;
  padding: 80px 0 50px 0;
  margin-top: -200px;
  z-index: 100;
}

.blog_detail_section .blog_block {
  background-color: var(--white);
  border: solid 1px var(--border);
  padding: 50px;
  border-radius: 30px;
  box-shadow: 0px 8px 30px var(--shadow);
}

.blog_head {
  margin-bottom: 35px;
}

.blog_head .tags_info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog_body .tags_info .tag {
  font-size: 14px;
  font-weight: 500;
  padding: 4px 20px;
  border-radius: 100px;
  color: var(--secondary);
  background: var(--light-primery);
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-block;
}

.blog_head .tags_info ul {
  display: flex;
  align-items: center;
}

.blog_head .tags_info ul li {
  position: relative;
  padding: 0 10px 0 15px;
  font-size: 15px;
}

.blog_head .tags_info ul li::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: var(--black);
  border-radius: 10px;
  left: 0;
  position: absolute;
  top: calc(50% - 2.5px);
}

.blog_head .tags_info ul li:first-child::before {
  content: inherit;
}

.blog_head .tags_info ul li:first-child {
  padding-left: 0px;
}

.blog_head h2 {
  margin: 15px 0 15px 0;
}

.blog_body .img {
  margin-top: 40px;
  margin-bottom: 40px;
}

.blog_body .img img {
  width: 100%;
  border-radius: 20px;
}

.blog_body .listings {
  padding-left: 30px;
  margin: 30px 0;
}

.blog_body .listings li {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.blog_body .listings li .icon {
  color: var(--primery);
}

.blog_body .listings li p {
  margin: 0;
}

.blog_body h4 {
  margin-bottom: 10px;
  margin-top: 30px;
}

.blog_body .yt_video {
  margin: 30px 0;
}

.blog_body .yt_video iframe {
  width: 100%;
  aspect-ratio: 1/0.5;
  border-radius: 20px;
}

.blog_body .highlight_text {
  padding: 50px;
  border-left: 5px solid var(--primery);
  margin: 30px 0;
  background: var(--secondary);
  border-radius: 20px;
}

.blog_body .highlight_text h6 {
  line-height: 1.5;
  color: var(--white);
}

.blog_body .social_media {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

.blog_body .social_media li a {
  width: 35px;
  height: 35px;
  background-color: var(--secondary);
  border-radius: 100px;
  color: var(--white);
  display: block;
  text-align: center;
  line-height: 35px;
  transition: 0.4s all;
}

.blog_body .social_media li a:hover {
  background-color: var(--primery);
  color: var(--white);
}

/* comment section Css Start */

.comment_section .comment_block {
  background-color: var(--white);
  border: solid 1px var(--border);
  padding: 50px;
  border-radius: 30px;
  box-shadow: 0px 8px 30px var(--shadow);
}

.comment_section .section_title h3 {
  text-align: left;
}

.comment_section ul {
  margin-top: 30px;
}

.comment_section ul li {
  display: flex;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid var(--greay);
}

.comment_section ul li:last-child {
  border-bottom: 1px solid var(--greay);
}

.comment_section ul li.replay_comment {
  margin-left: 110px;
}

.comment_section ul li .authore_info {
  display: flex;
  align-items: center;
  width: 260px;
}

.comment_section ul li .authore_info .avtar {
  width: 88px;
  margin-right: 20px;
}

.comment_section ul li .authore_info .avtar img {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 100%;
  object-fit: cover;
}

.comment_section ul li .authore_info .text {
  width: calc(100% - 108px);
}

.comment_section ul li .authore_info .text h4 {
  font-size: 20px;
  font-weight: 600;
  color: var(--dark-purple);
}

.comment_section ul li .authore_info .text span {
  font-size: 14px;
}

.comment_section ul li .comment {
  width: calc(100% - 310px);
  margin-left: 50px;
}

.comment_section ul li .comment p {
  margin-bottom: 0;
}

.comment_form_section .section_title {
  text-align: left;
}

.comment_form_section .section_title p {
  padding: 0;
}

.comment_form_section .comment_form_block {
  background-color: var(--white);
  border: solid 2px var(--border);
  padding: 50px;
  border-radius: 30px;
  box-shadow: 0px 8px 30px var(--shadow);
}

.comment_form_section form .form-group {
  margin-bottom: 30px;
}

.comment_form_section form .form-group .form-control {
  border-radius: 10px;
  border: 1px solid var(--border-dark);
  color: var(--black);
  height: 60px;
  padding: 10px 20px;
}

.comment_form_section form .form-group .form-control::placeholder {
  color: var(--black);
}

.comment_form_section form .form-group textarea.form-control {
  min-height: 135px;
}

.comment_form_section form .puprple_btn {
  padding: 9px 50px;
}

/* ==============Contact Us page Css Start==================== */

.contact_page_section .contact_inner {
  position: relative;
}

.contact_page_section .contact_form {
  width: 100%;
  padding: 50px 60px;
  border-radius: 20px;
  background-color: var(--white);
  border: solid 1px var(--border);
  box-shadow: 0px 8px 30px var(--shadow);
}

.contact_page_section .contact_form h2 {
  margin-bottom: 0;
}

.contact_page_section .contact_form form {
  margin-top: 30px;
}

.contact_page_section .contact_form form .form-group {
  margin-bottom: 20px;
}

.contact_page_section .contact_form form .form-group .form-control {
  height: 60px;
  padding: 5px 20px;
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  background: var(--white);
}

.contact_page_section .contact_form form .form-group .form-control:focus {
  box-shadow: none;
  border-color: var(--secondary);
}

.contact_page_section .contact_form form .form-group textarea.form-control {
  height: 140px;
  padding-top: 15px;
}

.contact_page_section .contact_form form .term_check {
  display: flex;
  align-items: center;
}

.contact_page_section .contact_form form .term_check input {
  width: 17px;
  height: 17px;
  accent-color: var(--purple);
}

.contact_page_section .contact_form form .term_check label {
  font-size: 13px;
  margin-bottom: 0;
  margin-left: 7px;
}

.contact_page_section .contact_form form .form-group button {
  width: 240px;
  margin: 0 auto;
  display: block;
  margin-top: 10px;
  margin-bottom: 0;
}

.contact_page_section .contact_info .ticket_box {
  position: relative;
  border-radius: 20px;
  padding: 40px;
  margin-top: 60px;
  overflow: hidden;
  background-color: var(--white);
  border: solid 1px var(--border);
  box-shadow: 0px 8px 30px var(--shadow);
}

.contact_page_section .contact_info .ticket_box .pattern-rotate {
  position: absolute;
  top: -65%;
  right: -50%;
  /*transform: translateX(-50%);*/
}

.contact_page_section .contact_info .ticket_box .icon {
  margin-bottom: 20px;
  position: relative;
  z-index: 100;
}

.contact_page_section .contact_info .ticket_box .icon img {
  width: 70px;
}

.contact_page_section .contact_info {
  width: 90%;
}

.contact_page_section .contact_info .section_title {
  text-align: left;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.contact_page_section .section_title p {
  padding: 0px;
}

.contact_page_section .contact_info .btn {
  /*width: 180px;*/
  margin: 10px 0 0 0;
}

.contact_page_section .contact_info .contact_info_list li {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.contact_page_section .contact_info .contact_info_list li:last-child {
  margin-bottom: 0;
}

.contact_page_section .contact_info .contact_info_list li .img {
  width: 70px;
  margin-right: 20px;
}

.contact_page_section .contact_info .contact_info_list li .img img {
  max-width: 70px;
}

.contact_page_section .contact_info .contact_info_list li .text {
  width: calc(100% - 85px);
}

.contact_page_section .contact_info .contact_info_list li .text span {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: var(--dark-purple);
}

.contact_page_section .contact_info .contact_info_list li .text p,
.contact_page_section .contact_info .contact_info_list li .text a {
  margin: 0;
}

.contact_page_section .contact_info .contact_info_list li .text a:hover {
  color: var(--dark-purple);
}

/* ===========SignUp Section Css Start=============== */

.signup_section {
  padding: 75px 0;
}

.signup_section .top_part {
  padding-bottom: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.signup_section .top_part .back_btn {
  position: absolute;
  left: 0;
}

.signup_section .form_block {
  display: flex;
  align-items: center;
  background-color: var(--white);
  border-radius: 20px;
}

.signup_section .form_block .form_side {
  width: 50%;
  text-align: left;
  padding: 15px 100px;
}

.signup_section .form_block .form_side .section_title {
  text-align: left;
  margin-bottom: 30px;
}

.signup_section .form_block .form_side .section_title p {
  font-weight: 500;
  padding: 0;
}

.signup_section .form_block .form_side form .form-control {
  border: none;
  background: var(--whitish);
  border-radius: 8px;
  padding: 23px 16px;
  border: solid 1px var(--border-dark);
}

.signup_section .form_block .form_side form .form-group {
  margin-bottom: 20px;
}

.signup_section .form_block .form_side form .form-control::placeholder {
  color: var(--black);
  font-weight: 500;
}

.signup_section .form_block .form_side form .form-control:focus {
  box-shadow: none;
  color: var(--black);
  border-color: var(--primery);
  font-weight: 500;
}

.signup_section .form_block .form_side form .forgate_check {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 30px;
}

.signup_section .form_block .form_side form .forgate_check a {
  text-decoration: underline;
  font-weight: 500;
  font-size: 14px;
}

.signup_section .form_block .form_side form .forgate_check .coustome_checkbox {
  padding-top: 0;
}

.signup_section .form_block .form_side form .forgate_check .coustome_checkbox label {
  font-size: 14px;
  color: var(--black);
  font-weight: 500;
}

.signup_section .form_block .form_side form .forgate_check .checkmark {
  top: 5px;
  border-radius: 4px;
}

.signup_section .form_block .coustome_checkbox input:checked~.checkmark {
  background-color: var(--primery);
  border-color: var(--primery);
}

.signup_section .form_block .form_side .puprple_btn,
.signup_section .form_block .form_side .btn_block {
  width: 100%;
}

.signup_section .form_block .form_side .google_btn {
  width: 100%;
  text-align: center;
  border-radius: 50px;
  color: var(--black);
  border: 1px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: 20px 0 30px 0;
}

.signup_section .form_block .form_side .google_btn img {
  height: 20px;
  margin-right: 10px;
}

.signup_section .form_block .form_side .google_btn:hover {
  border-color: var(--primery);
}

.signup_section .form_side .sign_in_here p {
  margin: 0;
  color: #999ca6;
  font-weight: 500;
  font-size: 14px;
}

.signup_section .form_side .sign_in_here p a {
  color: var(--primery);
  text-decoration: underline;
}

.signup_section .form_side .sign_in_here p a:hover {
  color: var(--black);
}

.signup_section .form_block .side_screen {
  width: 50%;
  background-image: url(../images/template_bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 120px 50px;
  border-radius: 0 22px 22px 0;
  overflow: hidden;
  position: relative;
}

.signup_section .form_block .side_screen .left_icon {
  position: absolute;
  left: 10px;
  bottom: 150px;
  z-index: 9999;
}

.signup_section .form_block .side_screen .right_icon {
  position: absolute;
  right: 50px;
  top: 120px;
  z-index: 10;
}

.signup_section .form_block .side_screen .left_icon img,
.signup_section .form_block .side_screen .right_icon img {
  /*filter: invert(1);*/
}

.signup_section .form_block .side_screen .scrren {
  text-align: center;
  position: relative;
  z-index: 9;
}

.signup_section .form_block .side_screen .scrren img {
  max-width: 100%;
}

.signup_section .form_block .side_screen .scrren::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background-color: var(--light-yellow);
  z-index: -5;
  border-radius: 100%;
}

/*------slider ----------------*/

.banner_section {
  position: relative;
  padding: 0;
  margin: 0;
  /* 從最頂開始 */
}

.hero_fw {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero_fw .item {
  aspect-ratio: 16 / 9;
  /* 每張保持 16:9 */
  background-size: cover;
  background-position: center;
  width: 100%;
}

/* 波浪：滿版置底且不蓋住點擊 */
.hero_wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}



/* Owl 的預設外距拿掉（避免位移） */
#hero_slider .owl-stage-outer,
#hero_slider .owl-stage,
#hero_slider .owl-item {
  margin: 0;
}

/* RWD 高度微調 */
@media (max-width: 991.98px) {
  .hero_fw .item {
    height: 56vh;
  }
}

@media (max-width: 575.98px) {
  .hero_fw .item {
    height: 46vh;
  }
}

/* 置中左右的圓形箭頭 */
#hero_slider .owl-nav button.owl-prev,
#hero_slider .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #1f1f1f;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  z-index: 5;
}

#hero_slider .owl-nav button.owl-prev {
  left: 16px;
}

#hero_slider .owl-nav button.owl-next {
  right: 16px;
}

#hero_slider .owl-nav i {
  font-size: 16px;
  line-height: 1;
}

#hero_slider .owl-nav button:hover {
  background: #f28411;
  color: #fff;
  box-shadow: 0 10px 24px rgba(242, 132, 17, 0.35);
}

#hero_slider .owl-nav button:focus {
  outline: none;
}

/* 小螢幕縮小一點避免擋內容 */
@media (max-width: 575.98px) {

  #hero_slider .owl-nav button.owl-prev,
  #hero_slider .owl-nav button.owl-next {
    width: 38px;
    height: 38px;
  }
}

/*---------product section -------------*/
.product_page_section {
  background: #fff9f1;
  padding: 60px 0;
}

.product_page_section .product_inner {
  position: relative;
}

.sidebar {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.filter_box h5 {
  font-weight: 700;
  margin-bottom: 10px;
}

.search_box {
  position: relative;
}

.search_box input {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 40px 10px 12px;
}

.search_box button {
  position: absolute;
  right: 10px;
  top: 8px;
  border: none;
  background: transparent;
  color: #888;
}

.category_list a {
  color: #000;
  text-decoration: none;
  display: inline-block;
  transition: color 0.3s ease;
}

.category_list a:hover {
  color: #f28311;
}

.category_list li {
  padding: 6px 0;
}

.category_list li:hover {
  background-color: rgba(242, 131, 17, 0.08);
  /* 淡橘背景 */
}

.product_content {
  padding-left: 30px;
}

.product_topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.product_topbar select {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.product_card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  transition: 0.3s;
  margin-bottom: 40px;
}

.product_card:hover {
  transform: translateY(-5px);
}

.product_img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: #f9f9f9;
}

.product_img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.badge.blue {
  background: #2196f3;
}

.badge.hot {
  background: #2979ff;
}

.badge.out {
  background: #ff7043;
}

.product_title {
  font-size: 14px;
  margin: 12px 0 6px;
  font-weight: 500;
  color: #111;
}

.rating {
  color: #ffc107;
  font-size: 14px;
}

.price {
  color: #e53935;
  font-weight: 600;
  margin: 8px 0;
}

.price-index {
  color: #e53935;
  font-weight: 600;
}

.cart_btn {
  border: none;
  background: #fdefe3;
  color: var(--primery);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}

.cart_btn:hover {
  background: var(--secondary);
  color: #fff;
}

.cart_btn i {
  pointer-events: none;
  /* 關鍵：讓 icon 不攔截點擊事件 */
}

/*---------   end  ---------------------*/
/*-------product-single -----------*/

/* ---------- 商品圖片與資訊 ---------- */
.product_gallery {
  position: relative;
  width: 100%;
}

/* 主圖 Slider */
.main-slider {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* ✅ 統一比例，可改 4/3 */
  border-radius: 12px;
  overflow: hidden;
  background: #f8f8f8;
  /* ✅ 預防圖片還沒載入時閃白 */
}

.main-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ✅ 自動裁切填滿不變形 */
  border-radius: 12px;
}

/* 縮圖 Slider */
.thumb-slider {
  margin-top: 12px;
}

.thumb-slider .swiper-slide {
  width: auto;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0.5;
  cursor: pointer;
  transition: 0.3s;
}

.thumb-slider .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid var(--primery);
}

.thumb-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.main-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* ✅ 裁切填滿，不變形 */
  object-position: center;
  /* ✅ 置中顯示，防止偏移 */
  border-radius: 8px;
}

/*----------product dropdown sort -------------*/
.tf-dropdown-sort {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tf-dropdown-sort .btn-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 12px;
  background-color: #fff;
  transition: all 0.3s ease;
}

.tf-dropdown-sort .btn-select:hover {
  border-color: #f28311;
}

.tf-dropdown-sort .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  z-index: 10;
  margin-top: 6px;
}

.tf-dropdown-sort.show .dropdown-menu {
  display: block;
}

.tf-dropdown-sort .select-item {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tf-dropdown-sort .select-item:hover {
  background-color: #fafafa;
  color: #f28311;
}

.tf-dropdown-sort .select-item.active {
  font-weight: 600;
  color: #f28311;
}

/*----------End product dropdown sort -------------*/
/* Swiper 導航箭頭 */
.swiper-button-next,
.swiper-button-prev {
  color: var(--primery);
  transition: 0.3s;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #000;
}

/* ---------- 商品內容 ---------- */
.product_details {
  padding-left: 30px;
}

.product_title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 15px;
}

.twd {
  font-size: 16px;
  font-weight: 600;
  color: var(--primery);
  margin-right: 4px;
}

.price {
  font-size: 18px;
  font-weight: 700;
  color: var(--primery);
}

.price-index {
  font-size: 18px;
}

.product_meta {
  background: #ffffff;
  border: 1px solid #f3d7b2;
  border-radius: 12px;
  padding: 22px 26px;
  box-shadow: 0 6px 18px rgba(241, 160, 64, 0.18);
  margin-top: 30px;
}

.product_meta li strong {
  color: #e6902f;
}

.product_meta .text-wrap {
  white-space: pre-wrap;
  /* 保留使用者原始換行 */
  font-family: inherit;
}

/* 數量 */
.qty_input {
  width: 80px;
  text-align: center;
  margin-left: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 4px;
}

/* 加入購物車 */
.btn_addcart {
  background: var(--primery);
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 10px 24px;
  margin-top: 20px;
  transition: 0.3s;
}

.btn_addcart:hover {
  background: #fff;
  color: var(--primery);
  border: 1px solid var(--primery);
}

/* ---------- 商品描述 ---------- */
.product_description {
  border-top: 1px solid #eee;
  padding-top: 30px;
}

.product_description p,
.product_description ul {
  line-height: 1.8;
  font-size: 15px;
  color: #333;
}

.product_description ul {
  list-style: disc;
  padding-left: 20px;
}

.detail_img {
  width: 100%;
  margin-top: 20px;
  border-radius: 8px;
}

/* ---------- RWD 手機版最佳化 ---------- */
@media (max-width: 991.98px) {
  .font16-sm {
    font-size: 16px;
  }

  .product_details {
    padding-left: 0;
    margin-top: 25px;
  }

  .product_title {
    font-size: 22px;
  }

  .price span {
    font-size: 20px;
  }

  .price-index span {
    font-size: 16px;
  }

  .main-slider {
    aspect-ratio: 1 / 1;
  }

  .thumb-slider .swiper-slide {
    aspect-ratio: 1 / 1;
  }

  .btn_addcart {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .main-slider {
    aspect-ratio: 4 / 3;
  }
}

.back_btn_wrap {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 60px;
}

.btn_back_products {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primery);
  color: #fff;
  border: none;
  border-radius: 40px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 16px rgba(242, 132, 17, 0.25);
  cursor: pointer;
}

.btn_back_products:hover {
  background: #fff;
  color: var(--primery);
  border: 1px solid var(--primery);
  box-shadow: 0 8px 20px rgba(242, 132, 17, 0.35);
  transform: translateY(-2px);
}

@media (max-width: 575.98px) {
  .btn_back_products {
    width: 100%;
    padding: 14px 0;
    font-size: 15px;
  }
}

/*--------- 優惠活動 product-active -------------*/

.promo-list {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.promo-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #d9534f;
  /* 預設紅色 */
}

.promo-item i {
  font-size: 1rem;
  color: #f28411;
  /* 小喇叭橘色 */
}

.promo-item .promo-title {
  font-weight: 600;
  color: #c0392b;
}

.promo-item .promo-date {
  color: #888;
}

.promo-item.text-danger i {
  color: #d9534f;
}

@media (max-width: 768px) {
  .promo-item {
    font-size: 0.85rem;
    flex-wrap: wrap;
  }

  .promo-item .promo-date {
    width: 100%;
    margin-left: 1.5rem;
  }
}

/*---------   end  ---------------------*/

/*------------- 購物車 dropdown-------- */

.cart_dropdown .dropdown-menu {
  width: 320px;
  border: none;
  border-radius: 12px;
  padding: 15px 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: visible;
  /* ✅ 必須打開，否則底色會被切掉 */
}

.cart_dropdown {
  position: relative;
}

.cart_dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 4;
  background-color: #fff;
  border-radius: 10px;
  min-width: 260px;
  max-width: 300px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  border-bottom: 3px solid var(--primery);
  /* ✅ 橘色底線 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: all 0.25s ease;
  padding: 15px 20px;
  background-clip: padding-box;
}

.cart_dropdown_menu h6 {
  font-weight: 700;
  margin-bottom: 12px;
}

.cart_item {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.cart_item:last-child {
  border-bottom: none;
}

.cart_thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 12px;
}

.cart_info p {
  font-size: 15px;
  color: #333;
}

.cart_info small {
  color: #777;
}

.btn_remove {
  border: none;
  background: transparent;
  color: #999;
  transition: 0.3s;
}

.btn_oragne {
  background: #e86b49;
}

.btn_remove:hover {
  color: var(--primery);
}

.cart_total {
  font-size: 16px;
  margin-top: 10px;
}

.cart_count {
  background: var(--primery);
  color: #fff;
  font-size: 12px;
  border-radius: 50%;
  padding: 2px 6px;
  margin-left: 6px;
}

@media (max-width: 576px) {
  .cart_dropdown .dropdown-menu {
    width: 90vw;
  }
}

/*---------   end  ---------------------*/

/*--------- cart page -----------------*/

.section_title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-color);
}

/* 區塊統一風格：卡片樣式 */
.card-section {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  padding: 24px;
  margin-bottom: 25px;
  transition: all 0.3s ease;
}

.card-section:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* 標題 */
.section_title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 20px;
}

/* 購物車表格 */
.cart_table {
  width: 100%;
  border-collapse: collapse;
}

.cart_table th {
  background-color: #fff7e5;
  font-weight: 600;
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
}

.cart_table th,
.cart_table td {
  text-align: center;
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
}

.cart_table td img {
  max-width: 60px;
  border-radius: 8px;
}

/* 按鈕區 */
.cart_actions .btn {
  border-radius: 6px;
  font-size: 14px;
}

.btn-outline-secondary {
  border: 1px solid var(--border-color);
  color: var(--text-color);
  background: #fff;
}

.btn-outline-secondary:hover {
  background-color: var(--main-color);
  color: #fff;
  border-color: var(--main-color);
}

/* 登入提示 */
.alert-login {
  background-color: #fff9e6;
  border: 1px solid #f7e3a2;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  color: var(--text-color);
}

/* 主色按鈕（登入 / 結帳） */
.btn_login,
.btn_checkout {
  color: var(--white);
  background-color: var(--primery);
  font-size: 16px;
  padding: 10px 40px;
  border-radius: 100px;
  position: relative;
  transition: 0.4s all;
  z-index: 2;
  overflow: hidden;
  border: solid 1px var(--primery);
  display: inline-block;
  text-align: center;
}

/* 白色滑入效果 */
.btn_login::before,
.btn_checkout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: var(--white);
  border-radius: 100px;
  transition: 0.6s all;
  z-index: -1;
}

/* hover 時白色滑滿 */
.btn_login:hover::before,
.btn_checkout:hover::before {
  width: 100%;
}

/* hover 狀態：字變深色 */
.btn_login:hover,
.btn_checkout:hover {
  color: var(--text-color);
  /* 建議用深棕色或黑色 */
}

/* 表單區塊 */
.form_section {
  composes: card-section;
}

.form_section h5 {
  border-left: 4px solid var(--main-color);
  padding-left: 8px;
  margin-bottom: 15px;
  font-weight: 700;
}

/* radio 樣式 */
.form-check-inline label {
  margin-right: 20px;
  cursor: pointer;
}

.form-check-input[type="radio"] {
  accent-color: var(--main-color);
}

/* input */
.form-control {
  border-radius: 6px;
  border: 1px solid var(--border-color);
  font-size: 14px;
  padding: 8px 10px;
  transition: all 0.2s ease;
  margin: 10px 0;
}

.form-control:focus {
  border-color: var(--main-color);
  box-shadow: 0 0 0 3px rgba(244, 162, 97, 0.2);
}

/* 訂單摘要 */
.order_summary {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  padding: 24px;
}

.order_summary h4 {
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 16px;
}

.order_summary .total {
  font-size: 1.2rem;
  color: var(--main-color);
  font-weight: 700;
}

/* RWD */
@media (max-width: 991px) {
  .row.align-items-start {
    flex-direction: column;
  }

  .cart_sidebar {
    margin-top: 30px;
  }
}

/*---------   end  ---------------------*/

/*--------- feedback ------------------*/
.recent_post_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recent_post_list li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.recent_post_list a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  transition: 0.3s;
}

.recent_post_list a:hover {
  color: var(--main-color);
}

.recent_post_list img {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
  margin-right: 10px;
}

.recent_post_list .post_info h6 {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}

.recent_post_list .post_info time {
  font-size: 12px;
  color: #999;
  display: block;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .filter_box {
    margin-bottom: 30px;
    /* 分類、近期資料間距 */
  }

  .recent_post_list li {
    margin-bottom: 18px;
    /* 近期資料每項之間的距離 */
  }

  .mb-10 {
    margin-bottom: 10px;
  }

  .mb-20 {
    margin-bottom: 20px;
  }
}

@media (max-width: 991px) {
  .sidebar {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    padding: 20px 18px;
    margin: 20px auto 20px;
    overflow: hidden;
    width: calc(100% - 24px);
  }

  .feedback .row {
    padding-left: 12px;
    padding-right: 12px;
  }

  .blog_content {
    margin-top: 15px;
  }
}

/*----------feedback-single------------*/
.blog_single_wrapper {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  padding: 40px;
  line-height: 1.8;
  color: #333;
}

.blog_title {
  font-weight: 700;
  color: var(--text-color);
}

.blog_meta {
  font-size: 0.9rem;
}

.blog_content img {
  display: block;
  margin: 20px auto;
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.blog_content h4 {
  font-weight: 700;
  color: var(--main-color);
  margin-top: 2rem;
}

.blog_share .btn-outline-secondary {
  border-radius: 100px;
  font-size: 14px;
}

.back_btn_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  /* 手機時自動換行 */
  gap: 10px;
}

.back_btn_wrap a.btn {
  border-radius: 6px;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
}

.back_btn_wrap a.btn:hover {
  background-color: #f28411;
  border-color: #f28411;
  color: #fff;
  transition: all 0.2s ease;
}

/*--------- end ------------------*/