/* ====== Base / Vars ====== */
    :root{
      --primary-green:#2ECC71;
      --primary-dark:#27AE60;
      --accent-blue:#3498DB;
      --accent-orange:#F39C12;

      --white:#fff;
      --light-gray:#F8F9FA;
      --medium-gray:#6C757D;
      --dark-gray:#343A40;
      --black:#1A1A1A;

      --font-primary:'Noto Sans TC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
      --font-secondary:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;

      --container-max-width:1200px;
      --section-padding:100px 0;
      --border-radius:16px;
      --border-radius-small:8px;

      --shadow-light:0 4px 16px rgba(0,0,0,.08);
      --shadow-medium:0 8px 32px rgba(0,0,0,.12);
      --shadow-strong:0 16px 48px rgba(0,0,0,.15);

      --transition-fast:.2s ease;
      --transition-medium:.3s cubic-bezier(0.4, 0, 0.2, 1);
      --transition-slow:.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    *{margin:0;padding:0;box-sizing:border-box;}
    body{
      font-family:var(--font-primary);
      color:var(--dark-gray);
      line-height:1.7;
      background:var(--white);
      font-size:16px;
      overflow-x:hidden;
    }
    img{max-width:100%;display:block;}

    .container{
      max-width:var(--container-max-width);
      margin:0 auto;
      padding:0 24px;
    }
    .text-center{text-align:center;}

    /* ====== Animations ====== */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeInLeft {
      from { opacity: 0; transform: translateX(-30px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes fadeInRight {
      from { opacity: 0; transform: translateX(30px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes slideInFromTop {
      from { opacity: 0; transform: translateY(-50px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes scaleIn {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }

    .animate-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .animate-on-scroll.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Header & Navigation */
    header{
      position:fixed;top:0;left:0;right:0;
      background:#000;color:#fff;z-index:1000;
      transition:all .3s;
    }
    nav.container{
      display:flex;align-items:center;justify-content:space-between;
      padding:15px 20px;
    }
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 20px;
    }

    .logo {
      text-decoration: none;
      display: flex;
      align-items: center;
      transition: transform var(--transition-fast);
    }

    .logo:hover {
      transform: translateY(-2px);
    }

    .logo-image {
      height: 40px;
      width: auto;
    }

    .nav-links {
      display: flex;
      list-style: none;
      gap: 32px;
      align-items: center;
    }

    .nav-links a {
      text-decoration: none;
      color: white;
      font-weight: 500;
      font-size: 15px;
      transition: all var(--transition-fast);
      position: relative;
      padding: 8px 0;
    }

    .nav-links a:hover {
      color: var(--accent-blue);
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--accent-blue);
      transition: width var(--transition-medium);
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    .cta-nav {
      background: var(--accent-blue);
      color: var(--white) !important;
      padding: 12px 24px !important;
      border-radius: var(--border-radius-small);
      font-weight: 600;
      box-shadow: var(--shadow-light);
      transition: all var(--transition-medium);
    }

    .cta-nav::after {
      display: none;
    }

    .cta-nav:hover {
      background: #2980b9;
      transform: translateY(-2px);
      box-shadow: var(--shadow-medium);
    }

    /* Hamburger */
    .nav-toggle{
      display:none;flex-direction:column;gap:6px;width:32px;height:24px;
      background:none;border:0;cursor:pointer;z-index:1100;
    }
    .nav-toggle span{
      display:block;width:100%;height:3px;background:#fff;border-radius:2px;
      transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .nav-toggle.active span:nth-child(1){transform:translateY(9px) rotate(45deg);}
    .nav-toggle.active span:nth-child(2){opacity:0;transform:translateX(-20px);}
    .nav-toggle.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

    /* ====== Hero ====== */
    .hero-about{
      background:linear-gradient(135deg,var(--primary-green) 0%,var(--accent-blue) 50%,#8B5CF6 100%);
      color:#fff;text-align:center;padding:140px 0 120px;position:relative;overflow:hidden;
    }
    .hero-about::before{
      content:'';position:absolute;top:0;left:0;right:0;bottom:0;
      background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
      opacity:0.3;
    }
    .hero-content {
        background-image: url('assets/about-bg2.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 120px 0;
        color: white;
        text-align: center;
        position: relative;
        width: 100%;
        }

        .hero-content::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1;
        }

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

        .hero-content h1,
        .hero-content p {
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
        }

    .hero-about h1{
      font-size:clamp(2.8rem,6vw,4.2rem);font-weight:900;margin-bottom:24px;
      background:linear-gradient(45deg,#fff,rgba(255,255,255,0.8));
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
      background-clip:text;animation:slideInFromTop 1s ease-out;
    }
    .hero-subtitle{
      font-size:clamp(1.1rem,2.5vw,1.4rem);margin-bottom:16px;
      opacity:0.95;max-width:800px;margin-left:auto;margin-right:auto;
      animation:fadeInUp 1s ease-out 0.3s both;
    }
    .hero-subtitle-en{
      font-size:clamp(1rem,2.2vw,1.2rem);font-family:var(--font-secondary);
      opacity:0.85;max-width:900px;margin:0 auto;font-style:italic;
      animation:fadeInUp 1s ease-out 0.6s both;
    }
    
    /* Floating elements */
    .hero-float{
      position:absolute;opacity:0.1;animation:float 6s ease-in-out infinite;
    }
    .hero-float:nth-child(1){top:20%;left:10%;animation-delay:0s;}
    .hero-float:nth-child(2){top:60%;right:15%;animation-delay:2s;}
    .hero-float:nth-child(3){bottom:20%;left:20%;animation-delay:4s;}
    
    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(10deg); }
    }

    
    .value-statements {
    padding: 60px 20px;
    background-color: #ffffff;
    text-align: center;
    }

    .grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    }

    .value-box h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #111;
    }

    .value-box p {
    font-size: 1rem;
    color: #555;
    }

    /* ====== Sections ====== */
    section{padding:var(--section-padding);}
    
    /* About Section */
    .about-section{background:linear-gradient(to bottom,#fff,var(--light-gray));}
    .content-grid{
      display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
    }
    .text-content{position:relative;}
    .text-content::before{
      content:'';position:absolute;left:-20px;top:0;width:4px;height:60px;
      background:linear-gradient(to bottom,var(--primary-green),var(--accent-blue));
      border-radius:2px;
    }
    .text-content h2{
      font-size:clamp(2.2rem,4vw,3rem);font-weight:800;color:var(--dark-gray);
      margin-bottom:32px;line-height:1.2;
    }
    .text-content p{
      font-size:18px;line-height:1.8;margin-bottom:24px;color:var(--medium-gray);
    }
    .text-content .highlight{
      color:var(--primary-green);font-weight:600;
    }
    
    .image-content{position:relative;}
    .image-placeholder{
      aspect-ratio:4/3;background:linear-gradient(135deg,var(--light-gray),#e9ecef);
      border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;
      color:var(--medium-gray);font-size:16px;box-shadow:var(--shadow-light);
      position:relative;overflow:hidden;
    }
    .image-placeholder::before{
      content:'';position:absolute;top:0;left:0;right:0;bottom:0;
      background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21,15 16,10 5,21"/></svg>') center/60px no-repeat;
      opacity:0.3;
    }
    .image-placeholder img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    /* (optional) hide the icon overlay */
    .image-placeholder::before{ display:none; }

    /* Features Grid */
    .features-grid{
      display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      gap:40px;margin-top:80px;
    }
    .feature-card{
      background:#fff;padding:40px;border-radius:var(--border-radius);
      text-align:center;box-shadow:var(--shadow-light);
      transition:all var(--transition-medium);position:relative;overflow:hidden;
    }
    .feature-card::before{
      content:'';position:absolute;top:0;left:0;right:0;height:4px;
      background:linear-gradient(90deg,var(--primary-green),var(--accent-blue));
    }
    .feature-card:hover{
      transform:translateY(-8px);box-shadow:var(--shadow-strong);
    }
    .feature-icon{
      font-size:3rem;margin-bottom:24px;display:block;
      background:linear-gradient(135deg,var(--primary-green),var(--accent-blue));
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
      background-clip:text;
    }
   

        .feature-icon img {
        height: 100%;
        width: auto;
        display: block;
        margin: 0 auto;
        }
    .feature-card h3{
      font-size:1.4rem;margin-bottom:16px;font-weight:700;color:var(--dark-gray);
    }
    .feature-card p{color:var(--medium-gray);line-height:1.6;}

    /* Values Section */
    .values{
      background:linear-gradient(135deg,var(--light-gray) 0%,#fff 100%);
      position:relative;
    }
    .values::before{
      content:'';position:absolute;top:0;left:0;right:0;bottom:0;
      background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(46,204,113,0.1)"/></pattern></defs><rect width="60" height="60" fill="url(%23dots)"/></svg>');
    }
    .values .container{position:relative;z-index:2;}
    .section-header{text-align:center;margin-bottom:80px;}
    .section-header h2{
      font-size:clamp(2.4rem,4vw,3.2rem);font-weight:800;color:var(--dark-gray);
      margin-bottom:20px;
    }
    .section-header p{
      font-size:1.2rem;color:var(--medium-gray);max-width:600px;margin:0 auto;
    }
    
    .values-grid{
      display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:40px;
    }
    .value-card{
      background:#fff;padding:50px 40px;border-radius:var(--border-radius);
      text-align:center;box-shadow:var(--shadow-light);
      transition:all var(--transition-medium);position:relative;
    }
    .value-card:hover{
      transform:translateY(-10px) scale(1.02);
      box-shadow:var(--shadow-strong);
    }
    .value-icon{
      font-size:4rem;margin-bottom:24px;display:block;
      filter:drop-shadow(0 4px 8px rgba(46,204,113,0.3));
    }
    .value-card h3{
      font-size:1.5rem;margin-bottom:16px;font-weight:700;color:var(--dark-gray);
    }
    .value-card p{color:var(--medium-gray);line-height:1.7;font-size:16px;}

    /* Team Section */
    .team{background:#fff;}
    .team-grid{
      display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:50px;
    }
    .team-member{
      background:linear-gradient(135deg,#fff,var(--light-gray));
      padding:50px 40px;border-radius:var(--border-radius);
      text-align:center;box-shadow:var(--shadow-light);
      transition:all var(--transition-medium);position:relative;overflow:hidden;
    }
    .team-member::before{
      content:'';position:absolute;top:0;left:0;right:0;height:3px;
      background:linear-gradient(90deg,var(--primary-green),var(--accent-blue),var(--primary-green));
    }
    .team-member:hover{
      transform:translateY(-8px);
      box-shadow:var(--shadow-strong);
    }
    .member-photo{
      width:140px;height:140px;border-radius:50%;
      background:linear-gradient(135deg,var(--light-gray),#e9ecef);
      margin:0 auto 24px;display:flex;align-items:center;justify-content:center;
      color:var(--medium-gray);font-size:14px;position:relative;
      box-shadow:0 8px 24px rgba(0,0,0,0.1);
    }
    .member-photo::before{
      content:'👤';font-size:3rem;opacity:0.5;
    }
    .team-member h3{
      font-size:1.4rem;margin-bottom:8px;font-weight:700;color:var(--dark-gray);
    }
    .member-title{
      color:var(--primary-green);margin-bottom:20px;font-weight:600;
      font-size:1.1rem;
    }
    .team-member p{
      color:var(--medium-gray);line-height:1.7;
    }

    /* Timeline Section */
    .timeline-section{
      background:linear-gradient(135deg,var(--light-gray),#fff);
      padding:120px 0;
    }
    .timeline{
      position:relative;max-width:800px;margin:0 auto;
    }
    .timeline::before{
      content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;
      background:linear-gradient(to bottom,var(--primary-green),var(--accent-blue));
      transform:translateX(-50%);
    }
    .timeline-item{
      position:relative;margin-bottom:60px;
    }
    .timeline-item:nth-child(odd) .timeline-content{
      margin-right:50%;padding-right:40px;text-align:right;
    }
    .timeline-item:nth-child(even) .timeline-content{
      margin-left:50%;padding-left:40px;
    }
    .timeline-dot{
      position:absolute;left:50%;top:20px;width:16px;height:16px;
      background:var(--primary-green);border-radius:50%;transform:translateX(-50%);
      box-shadow:0 0 0 6px #fff,0 0 0 10px var(--primary-green);
    }
    .timeline-content{
      background:#fff;padding:30px;border-radius:var(--border-radius);
      box-shadow:var(--shadow-light);transition:all var(--transition-medium);
    }
    .timeline-content:hover{
      transform:translateY(-5px);box-shadow:var(--shadow-medium);
    }
    .timeline-year{
      color:var(--primary-green);font-weight:700;font-size:1.1rem;
      margin-bottom:8px;
    }
    .timeline-content h4{
      font-size:1.3rem;margin-bottom:12px;color:var(--dark-gray);
    }

    /* CTA Section */
    .cta-block{
      background:linear-gradient(135deg,var(--accent-blue) 0%,var(--primary-green) 50%,#8B5CF6 100%);
      color:#fff;padding:100px 0;text-align:center;position:relative;overflow:hidden;
    }
    .cta-block::before{
      content:'';position:absolute;top:0;left:0;right:0;bottom:0;
      background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="waves" width="100" height="20" patternUnits="userSpaceOnUse"><path d="M0 10 Q25 0 50 10 T100 10 V20 H0Z" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23waves)"/></svg>');
    }
    .cta-content{position:relative;z-index:2;}
    .cta-block h2{
      font-size:clamp(2rem,4vw,2.8rem);margin-bottom:20px;font-weight:800;
    }
    .cta-block p{
      font-size:1.2rem;margin-bottom:32px;opacity:0.9;max-width:600px;
      margin-left:auto;margin-right:auto;
    }
    .cta-button{
      display:inline-block;background:#fff;color:var(--accent-blue);
      padding:18px 40px;border-radius:50px;text-decoration:none;
      font-weight:700;font-size:1.1rem;transition:all var(--transition-medium);
      box-shadow:0 8px 32px rgba(0,0,0,0.2);
    }
    .cta-button:hover{
      transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.3);
      background:linear-gradient(135deg,#fff,#f8f9fa);
    }

    
    /* ====== Responsive ====== */
    @media (max-width:768px){
      .nav-links{display:none;}
      .nav-toggle{display:flex;}

      nav.container{
        flex-direction:row !important;align-items:center !important;
        justify-content:space-between !important;gap:0 !important;
        padding:12px 20px !important;
      }
      #primary-nav.open{
        display:flex !important;flex-direction:column;position:absolute;
        top:100%;left:0;right:0;background:rgba(0,0,0,0.98);
        backdrop-filter:blur(20px);padding:30px;gap:20px;
        border-top:1px solid rgba(255,255,255,0.1);
      }

      :root{--section-padding:80px 0;}
      .hero-about{padding:120px 0 100px;}
      .stats-bar{padding:50px 0;margin-top:-50px;}
      .content-grid{grid-template-columns:1fr;gap:60px;}
      .values-grid{grid-template-columns:1fr;gap:30px;}
      .team-grid{grid-template-columns:1fr;gap:40px;}
      .features-grid{grid-template-columns:1fr;gap:30px;}
      .footer-content{text-align:center;grid-template-columns:1fr;gap:40px;}
      
      .timeline::before{left:20px;}
      .timeline-item:nth-child(odd) .timeline-content,
      .timeline-item:nth-child(even) .timeline-content{
        margin:0;padding-left:50px;text-align:left;
      }
      .timeline-dot{left:20px;}
      
      .text-content::before{display:none;}
    }

    @media (max-width:480px){
      .container{padding:0 16px;}
      .hero-about{padding:100px 0 80px;}
      .stats-grid{grid-template-columns:1fr 1fr;gap:30px;}
      .value-card,.team-member{padding:30px 20px;}
      .cta-button{padding:16px 32px;font-size:1rem;}
    }
  

    .feature-icon {
  font-size: 3rem;
  margin-bottom: 24px;
  display: block;
  background: linear-gradient(135deg, var(--primary-green), var(--accent-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  /* Add these properties for proper image container */
  height: 180px;
  width: 200px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
}

.feature-icon img {
  height: 100%;
  width: 100%;
  object-fit: cover; /* This ensures proper scaling */
  display: block;
  margin: 0;
  border-radius: 8px;
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
  .feature-icon {
    height: 60px;
    width: 60px;
    margin-bottom: 20px;
  }
  
  .feature-card {
    padding: 30px 20px;
    text-align: center;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}

@media (max-width: 480px) {
  .feature-icon {
    height: 50px;
    width: 50px;
    margin-bottom: 16px;
  }
  
  .feature-card {
    padding: 25px 15px;
  }
  
  .feature-card h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
  }
  
  .feature-card p {
    font-size: 14px;
    line-height: 1.5;
  }
}