/*---------------------------------------
Template: ARBOR White Paper Landing Page (DE)
Optimized: 2026-02-09
-----------------------------------------*/

body {
	font-family: 'Roboto', 'Roboto Condensed', 'Helvetica', 'Arial',sans-serif;
	font-weight: 300;
	overflow-x: hidden;
	background-color: #ffffff;
}

#ok {
    display:block; width: 100%; height:auto; font-size: 1.75vmin; font-weight: 500; color:#fff; line-height: 4.25vmin; text-align:center; align-items:center; background-color: rgba(85,85,85,0.8); padding:20px 30px; position:fixed; bottom:0; z-index:9000;
}

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

h1,h2,h3,h4,h5,h6,
.navbar-default, .btn {
	font-family: 'Roboto', 'Roboto Condensed', 'Helvetica', 'Arial',sans-serif;
	font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
  font-weight: 400;
  letter-spacing: 1px;
}

h1 {
	color: #FFB718;
	font-size: 42px;
	letter-spacing: 2px;
	padding-bottom: 10px;
	margin-top: 0px;
}

h2 {
	color: #167475;
	font-size: 28px;
}

h3 {
	color: #167475;
	font-size: 22px;
	line-height: 32px;
	padding-bottom: 4px;
}

h4 {
	font-size: 18px;
}

p {
	color: #666666;
	font-size: 16px;
	line-height: 30px;
	font-weight: 300;
}

hr {
	border-bottom-color: #ffffff;
	width: 100%;
	margin-top: 4px;
	margin-bottom: 4px;
}

/* 通用按鈕樣式 */
.section-btn {
	background-color: #167475;
	border: 2px solid transparent;
	border-radius: 100px;
	color: #ffffff;
	font-size: 16px;
	letter-spacing: 1px;
	padding: 14px 30px;
	margin-top: 20px;
	transition: all 0.4s ease-in-out;
}

.section-btn:hover {
  background: transparent;
  border-color: #ffffff;
  color: #31849b;
}

.section-btn2 {
	background-color: #167475;
	border: 2px solid transparent;
	border-radius: 100px;
	color: #ffffff;
	font-size: 14px;
	letter-spacing: 1px;
	transition: all 0.4s ease-in-out;
	padding: 6px 8px;
	margin-left: 10px;
	margin-top: 0;
}

.section-btn2:hover {
  background: transparent;
  border-color: #ffffff;
  color: #31849b;
}

/* [NEW] Unified Hero CTA Button Style (White Paper anfordern) */
.btn-download-hero {
    background-color: #167475;
    color: #ffffff;
    border: 2px solid #167475; /* 預設邊框同色 */
    border-radius: 100px;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 600;
    text-transform:capitalize;
    letter-spacing: 1px;
    display: inline-block;
    margin-top: 30px;
    transition: all 0.3s ease;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-download-hero:hover {
    background-color: transparent;
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.btn-download-hero i {
    margin-right: 10px;
}

/*---------------------------------------
    General               
-----------------------------------------*/

html{
  -webkit-font-smoothing: antialiased;
}

a {
  color: #167475;
  transition: 0.5s;
  text-decoration: none !important;
}
a:hover, a:active, a:focus {
  color: #167475;
  outline: none;
}

* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*:before, *:after {
  box-sizing: border-box;
}

::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  background: #ffffff;
}

.section-title {
	position: relative;
	text-align: left;
	padding-bottom: 20px;
}

#introduction,
#features,
#screenshot,
#application,
#ordering {
	padding-top: 60px;
	padding-bottom: 30px;
}

#introduction, #application {
  text-align: center;
}

/*---------------------------------------
    Preloader section              
-----------------------------------------*/

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  background: none repeat scroll 0 0 #ffffff;
}

.sk-spinner-pulse {
	width: 60px;
	height: 60px;
	background-color: #167475;
	border-radius: 100%;
	animation: sk-pulseScaleOut 1s infinite ease-in-out;
}

@keyframes sk-pulseScaleOut {
  0% { transform: scale(0); }
  100% { transform: scale(1); opacity: 0; } 
}

/*---------------------------------------
    Navigation section              
-----------------------------------------*/

.navbar-default {
    background: #ffffff;
    border: none;
    box-shadow: 0px 0px 10px rgba(000,000,000,0.9), inset 0px -1px 0px rgba(255,255,255,0.5);
    margin: 0 !important;
}

.navbar-default .navbar-brand {
  color: #167475;
  font-size: 26px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 50px;
  margin: 0;
}
.navbar-default img {
	height:auto;
	top: 0;
	margin-top: 10px;
	margin-left: 10px;
}
.navbar-right {
    margin-right: 0px;
}

/* Global Language Switcher */
.navbar-right-lang {
    float: right !important;       
    position: relative;            
    z-index: 1050;                 
    margin-top: 15px;              
}

.navbar-right-lang .dropdown-menu {
    right: 0;
    left: auto;
}

.navbar-default .navbar-nav li a {
	color: #666666;
	font-size: 14px;
	font-weight: 500;
	line-height: 50px;
	letter-spacing: 1px;
	transition: all 0.4s ease-in-out;
	padding-right: 6px;
	padding-left: 6px;
}

.navbar-default .navbar-nav > li a:hover {
	color: #167475;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a {
    color: #167475;
    background-color: transparent;
}

.navbar-default .navbar-toggle {
     border: none;
     padding-top: 10px;
}
.navbar-default .navbar-toggle .icon-bar {
    border-color: transparent;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { 
  background-color: transparent;
}


/*---------------------------------------
    Home section              
-----------------------------------------*/

#home {
	background-image: url(../images/home-bg.jpg);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: cover;
	background-position: center top;
	color: #ffffff;
	display: flex;
	align-items: center;
	width: 100%;
	/* Optimized height */
	height: auto !important;       
    min-height: 65vh !important;   
    padding-bottom: 210px !important; 
}

#home h1 {
    text-shadow: 0px 0px 7px rgba(000,000,000,1), 0px 0px 0px rgba(255,255,255,0.8);
}
		
#home .overlay {
	position: absolute;
	height: 65vh;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
}

#home img {
	width: 100%;
	height: auto;
}
#home .home-thumb {
	padding-top: 0;
	padding-left: 0;
}

#home p, #newsletter p {
  color: #167475;
  letter-spacing: 1px;
}

/*---------------------------------------
   introduction section              
-----------------------------------------*/

#introduction {
	background-color: #FFFFFF;
	text-align: left;
}

#introduction p {
	color: #666666;
	font-size: 16px;
	line-height: 30px;
	margin-bottom: 20px;
}

#introduction img {
	width: 100%;
	height: auto;
	margin-top: 4%;
}
#introduction ul {
	font-size: 16px;
	padding-left: 20px;
	line-height: 30px;
	color: #666666;
}
#introduction .introduction-thumb {
	position: relative;
	text-align: left;
}
#introduction-thumb2 {
	position: relative;
	clear: both;
	margin-top: auto;
	margin-bottom: auto;
}

/*---------------------------------------
   features section              
-----------------------------------------*/
#features{
	background-color: #f5f5f5;
	background-image: url(../images/features_bg.png);
	background-repeat: no-repeat;
	background-position: center top;
}
#features h1{
 color: #167475;
}
#features img {
	width: 100%;
	height: auto;
	margin-top: 10px;
	margin-bottom: 30px;
}
#features .features-thumb {
	position: relative;
	text-align: center;
}
#features .features-overlay {
  background-color: rgba(250,250,250,0.9);
  border-radius: 2px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 100px;
  overflow: hidden;
  transition: height 450ms;
}
#features .features-thumb:hover .features-overlay {
  height: 100%;
  background-color: #ffffff;
  color: #222;
  padding-top: 30%;
  opacity: 0.9;
}
#features .features-thumb:hover h4 {
  color: #167475;
}

/*---------------------------------------
    Screenshot section              
-----------------------------------------*/
#screenshot .col-md-3 {
  display: block;
  width: 100%;
  padding-bottom: 1rem;
}
#screenshot img {
  background-color: #ffffff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  cursor: pointer;
  display: block;
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  transition: all 0.4s ease-in-out;
}
#screenshot img:hover {
  box-shadow: 0px 16px 22px 0px rgba(0, 0, 0, 0.3);
  top: -6px;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container { opacity: 1; }
.mfp-with-zoom.mfp-ready.mfp-bg { opacity: 0.8; }
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0; }

/*---------------------------------------
   application section         
-----------------------------------------*/
#application {
	background-color: #167475;
	background-image: url(../images/app-bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
#application P { color: #ffffff; }
#application .container .row .wow.fadeInUp.col-md-4.col-sm-4 P {
	font-size: 14px;
	line-height: 16px;
	padding-top: 4%;
}
#application img {
	width: 100%;
	height: auto;
	border: 2px solid #ffffff;
}

/*---------------------------------------
   ordering section         
-----------------------------------------*/
#ordering {
	background-color: #f5f5f5;
	background-image: url(../images/ELIT-1900_bk.png);
	background-repeat: no-repeat;
	background-position: center top;
}
#ordering h1, #ordering h2 { color: #167475; }
#ordering img {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}
#ordering .ordering-plan {
	background-color: rgba(255,255,255,0.7);
	border-radius: 2px;
	margin-bottom: 32px;
	padding: 15px;
	height: auto;
}
#ordering .ordering-month {
	padding: 14px 10px 6px 10px;
}
#ordering h5 {
	color: #F7AC2E;
	font-size: 12px;
	font-style: normal;
}
#ordering ul {
	padding-left: 14px;
	font-size: 16px;
}
.icon_as { margin-bottom: 30px; }

/*---------------------------------------
   6. Contact / Footer 優化 (DE)
-----------------------------------------*/
#contact {
    background-color: #167475; /* 墨綠色背景 */
    color: #fff;
    padding-top: 40px;
    padding-bottom: 20px;
}

/* --- 大標題 Contact Us 強制居中 --- */
#contact .contact-title {
    width: 100%;         /* 確保標題容器佔滿整行 */
    text-align: center;  /* 讓內部文字置中 */
    margin-bottom: 30px;
}

#contact .contact-title h3 {
    color: #ffffff;      /* 確保標題是白色 */
    font-weight: 700;
    margin: 0;
}

/* --- Footer 5欄排版邏輯 (桌機版 Flex) --- */
#contact .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* 每一欄的寬度與設定 */
.col-md-15 {
    width: 19%;
    padding: 0 10px;
    margin-bottom: 20px;
    text-align: left;
}

/* 桌機版：最後一個欄位 (About ARBOR / Contact Info) 置中 */
@media (min-width: 768px) {
    #contact .col-md-15:last-child {
        text-align: center;
    }
}

/* 小標題樣式 */
#contact .section-title h5 {
    color: #ffffff;      /* 強制白色 */
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

/* 分隔線樣式 */
#contact hr {
    margin: 8px 0 10px 0; 
    border-top: 1px solid rgba(255,255,255,0.3);
}

/* --- 強制連結與文字為白色 --- */
#contact .section-title p, 
#contact .section-title a {
    color: #ffffff !important;  /* ★關鍵：強制覆蓋原本的深綠色 */
    font-size: 13px;
    line-height: 1.4;
    display: block;
    margin-bottom: 5px;
    text-decoration: none;
    font-weight: 300;
}

/* 滑鼠移過去的效果 (加上底線與變亮) */
#contact .section-title a:hover {
    color: #FFB718 !important;  /* 懸停時變金黃色，增加辨識度 */
    text-decoration: underline !important;
}

/*---------------------------------------
   7. Bottom Copyright
-----------------------------------------*/
footer {
    padding: 15px 0;
    background: #fff;
    border-top: 1px solid #eee;
}

footer p {
    font-size: 12px;
    color: #888;
    margin: 0;
    line-height: 30px; /* 對齊 icon */
}

.social-icon {
    margin: 0;
    padding: 0;
    text-align: right;
}
.social-icon li {
    display: inline-block;
    margin-left: 10px;
}
.social-icon li a {
    color: #666;
    font-size: 18px;
    transition: color 0.3s;
}
.social-icon li a:hover {
    color: #167475;
}

/*---------------------------------------
   8. Utilities
-----------------------------------------*/
.go-top {
    background-color: #167475;
    color: #fff;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    position: fixed;
    z-index: 999;
    display: none;
    cursor: pointer;
}

.max_inquiry_box, iframe {
    width: 100% !important;
    overflow: hidden;
}

/*---------------------------------------
   Mobile Responsive (Optimized)
-----------------------------------------*/

@media (max-width: 1920px) {
    h1 { font-size: 40px; line-height: 58px; }
    #home .home-thumb { padding-top: 27%; }
    #home, #home .overlay { height: 60vh; }
    .col-md-15 { width: 20%; float: left; position: relative; padding: 0 15px; min-height: 1px; }
    .col-md-9 { width: 100%; }
    .container { width: 1280px; }
    .icon_as { margin-bottom: 10px; }
}

@media (max-width: 1440px) {
    h1 { font-size: 38px; line-height: 48px; }
    #home .home-thumb { padding-top: 35%; }
    #home, #home .overlay { height: 70vh; }
    .container { width: 1010px; }
    #ordering .ordering-plan { height: 340px; }
    .icon_as { margin-bottom: 30px; }
}
 
@media (max-width: 1280px) {
    h1 { font-size: 30px; line-height: 40px; }
    #home .home-thumb { padding-top: 22%; }
    #home, #home .overlay { height: 58vh; }
    .container { width: 1010px; } 
}

@media (max-width: 980px) {
    h1 { font-size: 32px; line-height: 42px; }
    .container { width: 92%; }  
    .section-btn { padding: 10px 34px 12px; }
    #home .home-thumb { padding-top: 46%; }
    #home, #home .overlay { height: 30vh; }
    #features { text-align: left; }
    #introduction .col-sm-offset-1 { margin-left: 0; }
    #ordering .ordering-plan { height: 460px; }
}

@media (max-width: 800px) {
    #home, #home .overlay { height: 30vh; }
    #home .home-thumb { padding-top: 50%; }
    h1 { font-size: 26px; line-height: 38px; }
    h2 { font-size: 22px; line-height: 32px; }
    .container { width: 100%; } 
    #application .container .row .wow.fadeInUp.col-md-4.col-sm-4 P { font-size: 12px; }
    #ordering .ordering-plan { height: 420px; }
}

/* 合併後的 768px 與 767px 邏輯 */
@media (max-width: 768px) {
    h1 { font-size: 24px; line-height: 36px; }
    h2 { font-size: 20px; line-height: 32px; }
    p { font-size: 14px; line-height: 24px; }
    #home, #home .overlay { height: 34vh; }
    #features { text-align: left; }
    #features .features-thumb { margin-top: 32px; }
    .container { width: 100%; }
    #ordering .ordering-plan { height: 400px; } 
}

/* --- 手機版與平板直向 (767px 以下) --- */
@media (max-width: 767px) {
    body { padding-top: 0px; text-align: center; }
    .navbar-default { text-align: center; padding-top: 0px; }
    .navbar-default .navbar-brand { line-height: 20px; }
    
    /* 手機版 Hero 高度優化 */
    #home, #home .overlay {
        height: 80vh;
        min-height: 60vh !important;
        padding-bottom: 180px !important;
    }
    #home .home-thumb { padding-top: 30%; }
    #home .home-thumb h1 { 
        font-size: 22px !important; /* ★ 德文單字較長，縮小字體 */
        line-height: 1.3 !important; 
        margin-bottom: 15px !important; 
    }
    #home .home-thumb h1 span {
        font-size: 14px !important;
        margin-bottom: 5px !important;
    }

    /* 手機版語系按鈕置中 */
    .navbar-right-lang {
        float: none !important;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
        display: block;
        width: 100%;
    }
    .hero-image-container { margin-top: 30px !important; }
    
    #ordering ul { text-align: left; margin-left: -10px; }
    #ordering .container .row div .wow.fadeInUp.col-md-6.col-sm-6 .img-responsive { padding-top: 10px; }

    /* --- 手機版 Footer 垂直堆疊 --- */
    #contact .row { display: block; } /* 取消 Flex，改回堆疊 */
    .col-md-12 { width: 100%; text-align: center; } /* 標題置中 */
    
    /* 讓那 5 欄變成單欄垂直排列 */
    .col-md-15 {
        width: 100%;
        text-align: center; /* 手機版全部置中 */
        margin-bottom: 30px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 20px;
    }
    
    /* 確保最後一個欄位在手機版也是置中 */
    #contact .col-md-15:last-child {
        text-align: center;
    }
    
    /* 最下方版權區塊 */
    footer .col-md-7, footer .col-md-5 {
        width: 100%;
        text-align: center;
    }
    .social-icon { text-align: center; margin-top: 10px; }
}

@media (max-width: 650px) {
    h1 { font-size: 24px; line-height: 30px; }
    #ordering ul { padding-left: 24px; }
    #home { background-size: center; background-position: -870px top; }
    #home, #home .overlay { height: 75vh; }
    #home img { width: 90%; margin-top: 14%; }
    #home .home-thumb { padding-top: 24%; }
    .social-icon { text-align: center; }
    .col-md-15 { width: 50%; float: left; position: relative; padding: 0 15px; }
    #ordering .ordering-plan { height: auto; }
}

@media (max-width: 360px) {
    #home { background-position: -760px top; }
    #home img { margin-top: 38%; }
    #home .home-thumb { padding-top: 42%; }
}

@media (max-width: 320px) {
    #home { background-position: -740px top; }
    #home, #home .overlay { height: 86vh; }
    #home img { margin-top: 40%; }
    #home .home-thumb { padding-top: 40%; }
}

@media \0screen\,screen\9 { /* IE6-8 Support */
  #ordering .ordering-plan { background-color:#ffffff; filter:Alpha(opacity=70); position:static; *zoom:1; }
  #ordering .ordering-plan .ordering-month { position: relative; }  
}

.form-control2 {
	display: block;
	width: 100%;
	height: 30px;
	font-size: 12px;
	line-height: 1.42857;
	color: #ffffff;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	padding-left: 12px;
	text-align: left;
}