/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** global overwrite RELATED CSS DEFINITIONS ------------------------------------------------------------------- **/
:root {
  --navbar_height: 40px;
  --bs-primary: #1377b3;
  --bs-primary-rgb: 19, 119, 179;
}
.btn-primary {
  --bs-btn-color: #fff;

  --bs-btn-bg: #1377b3;
  --bs-btn-border-color: #1377b3;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #106090;         /* darker */
  --bs-btn-hover-border-color: #0f5a86;

  --bs-btn-focus-shadow-rgb: 19, 119, 179;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0f5a86;       /* darker still */
  --bs-btn-active-border-color: #0e547c;

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #1377b3;
  --bs-btn-disabled-border-color: #1377b3;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "微軟雅黑體", "Microsoft YaHei", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; 
}	 
/** global overwrite RELATED CSS DEFINITIONS ------------------------------------------------------------------- **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/






/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** utilities RELATED CSS DEFINITIONS -------------------------------------------------------------------------- **/
.shadow_top { box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.15); }
.shadow_sm_top { box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
.text_shadow  {text-shadow: 1px 1px 1px #ffffff;}
.text-white.text_shadow, .text-light.text_shadow {text-shadow: 2px 2px 2px #000000;}



#home_hero_wrapper .carousel-item > img {height:70vh;}  
#home_body_wrapper {min-height:30vh}

#page_404_hero_wrapper .carousel-item > img {height:40vh;}  
#page_404_body_wrapper {min-height:60vh}


.ratio_3x4 {--bs-aspect-ratio: calc(4 / 3 * 100%);}
.blur {filter: blur(8px);}
/** utilities RELATED CSS DEFINITIONS -------------------------------------------------------------------------- **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/





/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** background image & color RELATED CSS DEFINITIONS ----------------------------------------------------------- **/
.bg_img_products {
  min-height: 30vh;
  background: linear-gradient(90deg,rgba(255,255,255,0.7), rgba(255,255,255,0.5)),
  url(https://f001.backblazeb2.com/file/BIT-Magazine-Images/1667992034-BWJR1W.JPG) center center/cover no-repeat;  
}
.bg_img_news {
  min-height: 30vh;
  background: linear-gradient(90deg,rgba(255,255,255,0.7), rgba(255,255,255,0.5)),
  url(https://images.pexels.com/photos/19813735/pexels-photo-19813735/free-photo-of-scrabble-tiles-with-the-words-news-update.jpeg?w=400&h=400&dpr=2) center center/cover no-repeat;  
}

.bg_img_contact {
  min-height: 30vh;
  background: linear-gradient(90deg,rgba(255,255,255,0.7), rgba(255,255,255,0.5)),
  url(https://images.pexels.com/photos/18536259/pexels-photo-18536259/free-photo-of-the-word-contact-is-spelled-out-with-wooden-letters.jpeg?w=750&h=400&dpr=2) center center/cover no-repeat;  
}
.bg_img_service {
  min-height: 30vh;
  background: linear-gradient(90deg,rgba(255,255,255,0.7), rgba(255,255,255,0.5)),
  url(https://www.fortrend.com/Data/fortrend/upload/image/20250314/6387755416092909062919403.jpg) center center/cover no-repeat;  
}



.bg_color_see_through_blur {
  background: rgba(255, 255, 255, 0.55); /* translucent */
  backdrop-filter: blur(10px);          /* main blur */
  -webkit-backdrop-filter: blur(10px);  /* Safari support */
  
  border: 1px solid rgba(255, 255, 255, 0.3); /* subtle edge */
}
/** background image & color RELATED CSS DEFINITIONS ----------------------------------------------------------- **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/









/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** navbar, header, footer RELATED CSS DEFINITIONS ------------------------------------------------------------- **/
header {min-height:var(--navbar_height);}
.navbar_bypass { padding-top:var(--navbar_height); } 
.icon_btn {width:30px;height:30px;}

.navbar .nav-link.active {
  border-bottom:solid 3px rgba(var(--bs-primary-rgb), 0.4); 
  color:rgba(var(--bs-primary-rgb), 0.4); 
}

@media (max-width: 991.98px) { /**  `lg` applies to medium devices (tablets, less than 992px) **/
  .navbar .nav-link.active {
    border-bottom:unset;
    color:rgba(var(--bs-primary-rgb), 1); 
    background-color:rgba(var(--bs-primary-rgb), 0.1); 
   }
}


.navbar-brand, .navbar-brand:hover {
  color:var(--bs-primary);
  padding-left:3em;
  background: transparent url("../images/logo.png") left center/auto 70% no-repeat;  
  opacity:1;
}
.navbar-brand:hover {opacity:0.8;}

footer .navbar-brand, footer .navbar-brand:hover {padding-left:2.3em;}

.navbar .navbar_toggle_menu[aria-expanded="true"] > i.fa-solid::before {content: "\f00d";}
.navbar .navbar_toggle_menu > i {transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);will-change: transform;}
.navbar .navbar_toggle_menu[aria-expanded="true"] > i {transform: scale(1.35) rotate(90deg);}




@media (max-width: 991.98px) { /**  `lg` applies to medium devices (tablets, less than 992px) **/
  .navbar .navbar-collapse .nav-item {border-top: dashed 1px #999999;}
}
/** navbar, header, footer RELATED CSS DEFINITIONS ------------------------------------------------------------- **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/


/** ============================================================================================================ **/
/** ============================================================================================================ **/ 
/** card_hover RELATED CSS DEFINITIONS ------------------------------------------------------------------------- **/

.card_hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card_hover:hover {
  box-shadow: var(--bs-box-shadow) !important;
}

/* ✅ move transition here */
.card_hover > img {
  transition: transform 0.25s ease;
}

/* only scale on hover */
.card_hover:hover > img {
  transform: scale(1.08);
}
/** card_hover RELATED CSS DEFINITIONS ------------------------------------------------------------------------- **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/