

body{
	font-family: 'Noto Sans TC', sans-serif;
	background: #262423;
}
  
h1, h2, h3, h4, h5, h6, .custom-font {
	font-family: 'Noto Sans TC', sans-serif;
}

/* Global heading color override (exclude h6) */
h1, h2, h3, h4, h5 {
	color: #fff !important;
}
  
p {
	color: #999999;
	font-size: 14px;
	font-weight: 400;
}

/* Paragraph color overrides for sections that forced white */
.about-ar p,
.about-ar .content p,
.serv-arch p,
.feat p,
.min-area p,
.blog p,
.blog .item .cont p,
.work-carousel p,
.portfolio p,
.call-action p,
.testimonials p,
.team p {
	color: #999999 !important;
}
  
.navbar {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
  
.nav-scroll {
	background: #121212;
}
  
.navbar .dropdown-menu {
	background: #121212;
  box-shadow: 0px 10px 30px rgba(0,0,0,0.1);
}
  
.navbar .navbar-nav .dropdown-item:hover,
.main-color,
.progress-wrap::after,
.nav-scroll .navbar-collapse .active,
.light .navbar-collapse .active{
	color: #c5a47e !important;
}

/* Ensure navbar links are white */
.navbar .navbar-nav .nav-link{
	color: #fff !important;
}

/* Bigger brand logo (global) */
.navbar .logo{ width: 180px !important; }
.navbar .logo img{ width: 100%; height: auto; max-height: 68px; border-radius: 50%; object-fit: cover; }
@media (max-width: 991px){
  .navbar .logo{ width: 100px !important; }
  .navbar .logo img{ max-height: 56px; }
  
}

/* Slider caption headings force white */
.slider .parallax-slider .caption h1,
.slider .parallax-slider .caption h2,
.slider .parallax-slider .caption h3,
.slider .parallax-slider .caption h4,
.slider .parallax-slider .caption h5,
.slider .parallax-slider .caption h6{
	color: #fff !important;
}

/* Light sections: restore dark headings & paragraph colors */
.about-ar .content h1,
.about-ar .content h2,
.about-ar .content h3,
.about-ar .content h4,
.about-ar .content h5,
.about-ar .content h6{
	color: #121212 !important;
}
.about-ar .content p{
	color: #999999 !important;
}

/* About section experience block: force text to #111111 */
.about-ar .img .exp h2,
.about-ar .img .exp p{
	color: #111111 !important;
	-webkit-text-fill-color: #111111 !important;
	-webkit-text-stroke-width: 0 !important;
}
  
.navbar .dropdown-menu .dropdown-item:after, 
.back-color,
.line,
  .cursor-inner,
  .pace .pace-progress{
	background: #c5a47e !important;
}

.cursor-outer,
.testimonials .arrows .next:hover, .testimonials .arrows .prev:hover{
      border-color: #c5a47e !important;
}
  
.main-content {
	background: #121212;
}
  
.color-font {
	color: #c5a47e;
	-webkit-text-fill-color: #c5a47e;
	background: none;
}

/* Section: 實體門市 title block style */
.portfolio .sec-head{
	position: relative;
	padding: 32px 32px;
	background: #0f0f11;
	max-width: 640px;
	margin: 0 auto 40px auto;
}
.portfolio .sec-head::before{
	content: "";
	position: absolute;
	top: -12px; left: -12px; right: -12px; bottom: -12px;
	border: 8px solid transparent;
	border-image: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59) 1;
}
.portfolio .sec-head h6{ color:#c5a47e !important; letter-spacing:3px; font-weight:600; }
.portfolio .sec-head h3{ color:#fff !important; font-size:42px; font-weight:700; }

/* Portfolio gallery cards hover for richer feel */
.portfolio .gallery .items .item-img{ position: relative; overflow: hidden; }
.portfolio .gallery .items .item-img img{ transition: transform .6s ease, filter .6s ease; filter: saturate(0.9) contrast(1.02); }
.portfolio .gallery .items .item-img:hover img{ transform: scale(1.05); filter: saturate(1.05) contrast(1.06); }
.portfolio .gallery .items .item-img .item-img-overlay{ background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.35) 100%); transition: opacity .4s ease; opacity: .6; }
.portfolio .gallery .items .item-img:hover .item-img-overlay{ opacity: .85; }
.portfolio .gallery .items .cont{ background: #0f0f11; border: 1px solid rgba(255,255,255,0.06); padding: 14px 16px; }
.portfolio .gallery .items .cont h3, .portfolio .gallery .items .cont h6{ margin: 0; font-size: 18px; color:#fff !important; }

/* Unified hero banner styling */
.hero-pic{ position: relative; overflow: hidden; margin: 0 0 40px 0; }
.hero-pic picture, .hero-pic img{ display:block; width:100%; }
.hero-pic picture img{ width:100%; height:420px; object-fit:cover; }
.hero-pic:after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%); pointer-events:none; }
.hero-pic .hero-title{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); text-align:center; padding:0 16px; }
.hero-pic .hero-title h1{ color:#fff !important; font-size:48px; font-weight:700; letter-spacing:2px; text-shadow:0 4px 16px rgba(0,0,0,.45); }

@media (max-width: 991px){
  .hero-pic picture img{ height:300px; }
  .hero-pic .hero-title h1{ font-size:32px; }
}

/* Hero alignment variants */
.hero-pic.hero-right .hero-title{ left: auto; right: 12%; top: 28%; transform: none; text-align: right; }
@media (max-width: 991px){
  .hero-pic.hero-right .hero-title{ left:50%; right:auto; top:50%; transform:translate(-50%, -50%); text-align:center; }
}

/* Page: 九大特色 - 上方區塊加背景圖與卡片框 */
.services.bords.lficon.section-padding{
    position: relative;
    background: url('../image/9大特色/patrn.svg') center center / cover no-repeat;
}
.services.bords.lficon.section-padding:after{
    content: "";
    position: absolute; inset: 0; background: rgba(0,0,0,0.55);
}
.services.bords.lficon.section-padding > .container{ position: relative; z-index: 1; }
.services .sec-head{
    position: relative;
    display: inline-block;
    padding: 28px 28px;
    background: #0f0f11;
}
.services .sec-head:before{
    content: none;
}
.services .sec-head h6{ color:#999999 !important; letter-spacing:3px; font-weight:600; }
.services .sec-head h1{
    font-weight: 700;
    background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* CTA: 讓我們聊聊 → 高亮詞與按鈕 */
.call-action .back-color{
	background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59) !important;
	color:#fff !important;
	padding: 0 6px;
	border-radius: 3px;
}
.call-action.bg-img{
    background: transparent !important;
}

/* Hero block: set photo background and fit width (no crop) */
.block-sec .background.bg-img{
    background-image: url('../image/9大特色/S__21266796-2048x1537.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important; /* like your screenshot: fill & crop */
    background-attachment: fixed !important; /* keep image fixed on scroll */
}

/* Invert colors for the vertical video badge (like ref screenshot) */
.block-sec .vid-area{
    background: #121212 !important;
}
.block-sec .vid-area:after{
    background: transparent !important;
}
.block-sec .vid-area .vid-icon .vid{
    border-color: #fff !important;
}
.block-sec .vid-area .vid-icon .vid span{
    color: #fff !important;
}
.block-sec .vid-area .text{
    color: #fff !important;
}
.butn.dark{
	background: rgba(255,255,255,0.06);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.25);
}
.butn.dark:hover{
	background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
	border-color: transparent;
	color: #121212;
}
.progress-wrap svg.progress-circle path{
      stroke: #c5a47e;
}
  
.sub-bg {
	background: #1f1f1f;
}

/* Footer background override */
footer.sub-bg {
	background: #18191D;
}

/* Footer logo a bit larger */
footer .item .logo img{ width: 140px !important; height: auto; }
@media (max-width: 991px){
  footer .item .logo img{ width: 120px !important; }
}

/* Service flow cards */
.feat .item {
	background: #121212 !important;
	border: 1px solid #121212;
}

.feat .item h5,
.feat .item h6 {
	color: #fff;
}

.feat .item p {
	color: #cfcfcf;
}

.feat .item .icon,
.feat .item .icon i {
	color: #fff;
}

/* Home: service section background */
.feat.sub-bg {
	background: #1f1f1f;
}
  
.line {
	opacity: .1;
}
  
.testimonials .item {
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.1);
}
  
.testimonials .arrows .next, .testimonials .arrows .prev {
	border-color: rgba(0, 0, 0, 0.3);
	border-radius: 0;
}
  
.team .item.cir .img:after {
	display: none;
}

/* (reverted custom title colors to match original design) */

@media screen and (max-width: 991px){

  .navbar .navbar-collapse {
/*      max-height: 340px;*/
      overflow: auto;
      background: #262626;
      text-align: center;
      padding: 10px 15px;
  }

  .navbar .dropdown-menu{
    background: #232323;
  }

  .nav-scroll .navbar-collapse .active,
  .light .navbar-collapse .active,
  .navbar .navbar-nav .nav-link:hover{
    color: #c5a47e !important;
  }

}
