/* =========================================
       1. Variables & Global
       ========================================= */
    /* 品牌色 (範例) - 如需修改請調整 :root */
    :root {
      /* --brand-blue: #0b57a4;
      --brand-accent: linear-gradient(135deg, #0b57a4 0%, #7fb1ff 100%); */
      --brand-blue: #3a88d7ff;
      --brand-accent: linear-gradient(135deg, #3a88d7ff 0%, #7fb1ff 100%);
      /* --brand-hsfit: linear-gradient(to bottom, #176acf, #00264c); */
      --brand-hsfit: rgb(76, 148, 219);
    }

    body {
      font-family: "Noto Sans TC", system-ui, -apple-system, "Microsoft JhengHei", "Helvetica Neue", Arial;
      color: #00264c;
      margin: 0;
    }

    /* =========================================
       2. Navigation
       ========================================= */
    .navbar-brand img {
      height: 44px;
    }

    /* 導覽列隱藏/陰影樣式 */
    #siteNavbar {
      transition: transform .28s ease, box-shadow .28s ease;
      z-index: 1030;
      border-bottom: none;
      background-clip: padding-box;
    }

    .hide-nav {
      transform: translateY(-110%);
    }

    .nav-elevated {
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22) !important;
    }

    /* Navbar Item Hover Effect */
    .navbar-nav .nav-link {
      transition: color 0.3s ease;
      padding: 8px 16px !important;
      border-radius: 5px;
      margin: 0 4px;
      position: relative;
      z-index: 1;
      /* Ensure text stays on top */
    }

    /* Pseudo-element for smooth gradient transition */
    .navbar-nav .nav-link::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, #176acf, #00264c);
      border-radius: 5px;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .navbar-nav .nav-link:hover {
      color: #ffffff !important;
      /* background property removed here, handled by ::before */
    }

    .navbar-nav .nav-link:hover::before {
      opacity: 1;
    }

    /* 導覽列字型大小：僅於桌面套用 */
    @media (min-width: 768px) {
      #siteNavbar .nav-link {
        font-size: 16px;
      }
    }

    /* =========================================
       3. Hero Section
       ========================================= */
    .hero {
      position: relative;
      min-height: 60vh;
      display: flex;
      align-items: center;
      color: #fff;
      overflow: hidden;
      background: transparent;
    }

    .hero .hero-carousel {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .hero .hero-slides-container {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .hero-carousel-wrap {
      /* Default for mobile (will be overridden for desktop) */
      max-width: 100%;
      margin: 0;
      height: auto;
    }

    /* Slides positioning: absolute stacking for fade effect */
    .hero .hero-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1.2s ease-in-out;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background: transparent;
    }

    /* Active Slide */
    .hero .hero-slide.active {
      opacity: 1;
      z-index: 2;
    }

    /* 避免 fade 時圖片閃爍 */
    .hero .hero-slide img {
      will-change: opacity;
      width: 100%;
      height: auto;
      max-height: 580px;
      object-fit: contain;
      display: block;
    }

    .hero .overlay {
      position: absolute;
      inset: 0;
      /* background: linear-gradient(180deg, rgba(11, 87, 164, 0.6), rgba(0, 0, 0, 0.15)); */
      pointer-events: none;
      /* 允許觸控事件穿透到下方的 Swiper */
      z-index: 1;
    }

    .hero .content {
      position: relative;
      z-index: 2;
    }

    /* --- Carousel Dots --- */
    .carousel-dots {
      position: absolute;
      bottom: 14px;
      left: 0;
      right: 0;
      text-align: center;
      z-index: 10;
      display: flex;
      justify-content: center;
      gap: 12px;
    }

    .carousel-dots .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.24);
      cursor: pointer;
      transition: background 0.3s;
    }

    .carousel-dots .dot.active {
      background: var(--brand-blue);
    }

    /* --- Carousel Caption --- */
    .carousel-caption {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-align: center;
      padding: 1.5rem;
      pointer-events: none;
    }

    .carousel-caption .caption-bg {
      pointer-events: auto;
      background: rgba(0, 0, 0, 0.45);
      padding: 1rem 1.25rem;
      border-radius: 10px;
      max-width: 880px;
      width: calc(100% - 48px);
    }

    .carousel-caption h2,
    .carousel-caption p {
      text-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
      margin: 0;
    }

    .carousel-caption .btn {
      margin-top: 12px;
    }

    /* --- Hero Animations (Fade In) --- */
    .fade-in {
      opacity: 0;
      transform: translateY(10px);
      animation: fadeInUp .6s forwards ease-out;
    }

    .fade-in.delay-1 {
      animation-delay: .25s;
    }

    .fade-in.delay-2 {
      animation-delay: .5s;
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* --- Hero Desktop Styles (min-width: 769px) --- */
    @media (min-width: 769px) {

      /* Desktop fixed hero height and remove gap under navbar */
      .hero {
        min-height: 580px !important;
        height: 580px !important;
        /* Consolidated from multiple rules */
        overflow: hidden;
      }

      .hero .hero-carousel {
        max-width: 1200px;
        margin: 0 auto;
      }

      .hero .hero-slide {
        height: 580px !important;
        /* Consolidated */
        height: 100% !important;
        /* Note: conflicting rule in original, usually last wins. 580px seems preferred for fixed height */
        /* Let's keep 100% inside the 580px container */
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .hero-carousel-wrap {
        max-width: 1366px;
        width: 100%;
        /* The Fix */
        margin: 0 auto;
        height: 580px;
        position: relative;
      }
    }

    /* --- Hero Mobile Styles (max-width: 768px) --- */
    @media (max-width: 768px) {
      .hero-carousel-wrap {
        max-width: 100%;
        margin: 0;
        height: auto;
      }

      .hero,
      .hero .hero-carousel {
        height: auto !important;
      }

      /* Sliding container */
      .hero-slides-container {
        display: flex;
        overflow-x: auto;
        /* Scroll snap */
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;

        /* Hide scrollbar */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
      }

      .hero-slides-container::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
      }

      .hero .hero-slide {
        /* Reset positioning for slider */
        position: relative;
        display: block;
        /* Removing grid/flex center from fade/desktop logic if needed, or keep flex for internal alignment */
        min-width: 100%;
        width: 100%;
        scroll-snap-align: start;

        opacity: 1 !important;
        /* Always visible */
        transform: none !important;
        pointer-events: auto !important;
        z-index: 1 !important;
      }

      .hero .hero-slide.active {
        /* JS tracks active state, transparency handled by parent */
        opacity: 1;
      }

      .hero .hero-slide img {
        width: 100%;
        height: auto;
        object-fit: cover;
        margin: 0 auto;
        display: block;
      }
    }


    /* =========================================
       4. Feature Cards & Animations
       ========================================= */
    /* 置中卡片樣式 */
    .feature-card {
      border-radius: 14px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
      /* position: relative; */
      /* overflow: hidden; */
    }

    /* 共用背景設定 */
    .feature-card.eiken-bg,
    .feature-card.yuskin-bg,
    .feature-card.trans-bg {
      background-size: cover;
      background-position: center;
      color: #fff;
    }

    .feature-card.eiken-bg {
      background-image: url('../images/eiken/eiken_h1.jpg');
    }

    .feature-card.yuskin-bg {
      background-image: url('../images/yuskin/yuskin_h1.jpg');
    }

    .feature-card.trans-bg {
      background-image: url('../images/trans/trans_h1.jpg');
    }

    .feature-card.eiken-bg .p-3,
    .feature-card.yuskin-bg .p-3,
    .feature-card.trans-bg .p-3 {
      background: rgba(0, 0, 0, 0.18);
    }

    /* 浮動微動畫 */
    .float-anim {
      transform: translateY(0);
      transition: transform .6s ease;
    }

    .float-anim:hover {
      transform: translateY(-8px);
    }

    /* Desktop: Match height with About section */
    @media (min-width: 768px) {
      .feature-card {
        min-height: 220px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }

    /* =========================================
       5. News Section
       ========================================= */
    /* Remove old max-width container if unused, or keep for legacy pages. 
       For the new layout, we rely on the parent .container + grid */


    /* New Layout Styles */
    #news {
      position: relative;
      background: transparent;
      /* removed legacy bg if any */
      z-index: 1;
    }

    /* #news::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--brand-hsfit);
      opacity: 0.3;
      z-index: -1;
    } */

    /* Mobile: Default behavior (img takes width, auto height) */
    .news-img-cover {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Desktop: ensure match height */
    @media (min-width: 768px) {
      .news-img-cover {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }
    }

    .news-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .news-item {
      padding: 10px 0;
      border-bottom: 1px solid #e9ecef;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .news-item:last-child {
      border-bottom: none;
    }

    .news-item a {
      color: #333;
      text-decoration: none;
      transition: color 0.2s;
    }

    .news-item a:hover {
      color: var(--brand-blue);
    }


    /* =========================================
       6. About Section
       ========================================= */
    .about-box {
      /* 桌機預設背景圖 */
      background-image: url('../images/about/about_h_pc.jpg');
      background-size: cover;
      background-position: center;
      min-height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* 共用卡片樣式 */
    .card-style {
      border-radius: 12px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
    }

    .card-style-img {
      border-radius: 12px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.50);
    }

    /* Action: Mobile Background */
    @media (max-width: 768px) {
      .about-box {
        background-image: url('../images/about/about_h_sp.jpg');
        min-height: 180px;
      }
    }

    .about-box .about-content {
      background: rgba(0, 0, 0, 0.42);
      color: #fff;
      padding: 18px 20px;
      border-radius: 8px;
      max-width: 880px;
      text-align: center;
    }

    .about-box .about-content h4 {
      margin: 0 0 8px 0;
      font-size: 20px;
      font-weight: 600;
    }

    .about-box .about-content p {
      margin: 0;
      font-size: 14px;
      opacity: 0.95;
    }


    /* =========================================
       7. Footer
       ========================================= */
    footer {
      background: #0e3c6e;
      /* background-image: url('../images/footer/contactus.jpg'); */
      background-size: cover;
      background-position: center;
      color: #fff;
      padding: 28px 0;
    }

    .footer-fb-icon {
      width: 36px;
      height: 36px;
      fill: #fff;
      opacity: 0.95;
      transition: transform .12s ease, opacity .12s ease;
    }

    .footer-fb-icon a:hover img {
      transform: scale(1.06);
      opacity: 1;
    }

    .footer-logo {
      max-width: 160px;
    }

    .footer-title {
      display: flex;
      align-items: center;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .footer-title-icon {
      width: 24px;
      height: 24px;
      margin-right: 8px;
    }

    .footer-links li {
      margin-bottom: 6px;
    }

    .footer-links a {
      color: #ffffff;
      text-decoration: none;
      opacity: 0.9;
    }

    .footer-links a:hover {
      opacity: 1;
      text-decoration: underline;
    }


    /* =========================================
       8. Misc / Utilities
       ========================================= */
    /* parallax on large screens */
    @media(min-width:992px) {
      .parallax {
        background-attachment: fixed;
      }
    }

    /* =========================================
       9. Buttons
       ========================================= */
    .btn-gradient-blue {
      position: relative;
      z-index: 1;
      border: none;
      /* background: transparent; */
      background: var(--brand-blue);
      border-radius: 5px;
      /* Ensure text color is managed, though .text-white is used in HTML */
      color: #fff;
    }

    /* Base Background (Default Blue) */
    .btn-gradient-blue::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--brand-blue);
      z-index: -2;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }

    /* Hover Gradient Effect (Fades In) */
    .btn-gradient-blue::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, #176acf, #00264c);
      z-index: -1;
      opacity: 0;
      transition: opacity 0.3s ease;
      border-radius: 5px;
    }

    .btn-gradient-blue:hover::before {
      opacity: 1;
    }

    .btn-gradient-blue:hover {
      color: #fff;
    }

    /* =========================================
       10. Related Links (h_link.php)
       ========================================= */
    .related-links {
      color: #333;
    }

    .related-links a {
      color: var(--brand-blue);
      text-decoration: none;
      font-weight: 500;
    }

    .related-links a:hover {
      color: #00264c;
    }

    /* Desktop: Increase Link Card Height (~30%) */
    @media (min-width: 768px) {
      #link .card-style {
        min-height: 220px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }