body {
      font-family: "Noto Sans TC", sans-serif;
      scroll-behavior: smooth;
      background-color: #fdfdfd;
    }
    .navbar {
      background: linear-gradient(90deg, #007b8a, #005f6a);
    }
    .navbar-brand img { height: 42px; }
    .navbar-nav .nav-link { color: #fff !important; font-weight: 500; }
    .hero {
      background: linear-gradient(180deg, #0099A8, #00BCD4);
      color: white;
      padding: 150px 0;
      text-align: center;
      /*background-image: url('https://images.unsplash.com/photo-1556761175-129418cb2dfe');*/ 
      background-image: url('https://picsum.photos/1600/900?blur=2');
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.4);
    }
    .hero .content { position: relative; z-index: 1; }
    .hero h1 { font-size: 3rem; font-weight: 800; }
    .hero p { font-size: 1.25rem; margin-top: 1rem; }
    .btn-cta {
      background-color: #F7941D;
      color: white;
      border: none;
      transition: all 0.3s ease;
    }
    .btn-cta:hover { background-color: #e68000; }
    h2.section-title {
      color: #0099A8;
      font-weight: 700;
      text-align: center;
      margin-bottom: 50px;
    }
    section { padding: 90px 0; }
    iframe {
      width: 100%;
      border-radius: 12px;
      aspect-ratio: 16/9;
    }
    footer {
      background-color: #003840;
      color: #ccc;
      text-align: center;
      padding: 25px;
    }
    footer a { color: #F7941D; text-decoration: none; }

    #services .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 1rem;
    }
    #services .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }
    #services .service-icon i {
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
    }
    #services .card:hover .service-icon i {
    transform: scale(1.15);
    color: #a71d1d; /* hover 時更深的紅色 */
    }

    #contact .card {
  border-radius: 1rem;
  background-color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#contact .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
#contact a {
  text-decoration: none;
}
#contact a:hover {
  text-decoration: underline;
}