:root{
    --primary:#0f4c81;
    --primary-light:#2b6cb0;
    --secondary:#2563eb;
    --bg:#f8fafc;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:
        "Noto Sans TC",
        "Microsoft JhengHei",
        Arial,
        sans-serif;
    background:var(--bg);
    color:#1f2937;
}

.hero{
    position:relative;
    overflow:hidden;
    border-radius:1rem;
}

.hero img{
    width:100%;
    display:block;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to right,
        rgba(15,76,129,.75),
        rgba(15,76,129,.15)
    );
}

.section-title{
    font-size:2rem;
    font-weight:700;
    color:var(--primary);
}

.card-hover{
    transition:.25s;
}

.card-hover:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.active-menu{
    color:#fbbf24;
    font-weight:bold;
}

.fade-enter{
    animation:fade .35s;
}

@keyframes fade{

    from{

        opacity:0;
        transform:translateY(10px);

    }

    to{

        opacity:1;
        transform:none;

    }

}