/* RESET & BASE */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Poppins',sans-serif; line-height:1.6; color:#333; background:#fff; }
h1,h2,h3 { margin-bottom:1rem; text-align:center; }

/* HERO */
.hero { height:100vh; background:url('../img/hero.png') center/cover no-repeat; position:relative; }
.hero .overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,80,0,0.6); display:flex; flex-direction:column; justify-content:center; align-items:center; color:white; }
.btn { display:inline-block; padding:1rem 2rem; background:#4CAF50; color:#000; text-decoration:none; border-radius:5px; margin-top:1rem; font-weight:600; transition:0.3s; }
.btn:hover { opacity:0.85; }

/* SECTIONS */
section { padding:4rem 2rem; }
.about p { max-width:700px; margin:0 auto; text-align:center; }

/* VALUES */
.values .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; margin-top:2rem; }
.card { background:#A8E6A1; padding:2rem; text-align:center; border-radius:10px; transition: transform 0.3s; }
.card:hover { transform:translateY(-5px); }
.card svg { width:60px; margin-bottom:1rem; }

/* JOIN */
.join form { display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; margin-top:1rem; }
.join input { padding:0.8rem; border:1px solid #ccc; border-radius:5px; }
.join input:focus { border-color:#4CAF50; outline:none; }
.join button { padding:0.8rem 1.5rem; background:#4CAF50; color:white; border:none; border-radius:5px; cursor:pointer; font-weight:600; transition:0.3s; }
.join button:hover { opacity:0.85; }
.join .message { text-align:center; margin-bottom:1rem; color:#4CAF50; }

/* FOOTER */
footer { background:#005000; color:white; text-align:center; padding:2rem; }
footer .social a { margin:0 0.5rem; color:white; font-size:1.5rem; text-decoration:none; }
footer .social a:hover { color:#A8E6A1; }

/* RESPONSIVE */
@media (max-width:768px) {
  .hero h1 { font-size:2rem; }
  .hero p { font-size:1rem; }
}

.highlight {
    color: #FFD700; /* z這ty / 鄴速y */
}

.highlight2 {
    color: #FFD700; /* z這ty / 鄴速y */
    background-color: #fff; /* z這ty / 鄴速y */
}

.values .cards a.card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #A8E6A1;
    padding: 2rem;
    text-align: center;
    border-radius: 10px;
    transition: transform 0.3s, background 0.3s;
}
.values .cards a.card:hover {
    transform: translateY(-5px);
    background: #9ada97;
}