* {margin:0; padding:0; box-sizing:border-box;-webkit-transition-property: all;-moz-transition-property:all; }
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite,
code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details,embed,figure, 
figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
margin:0; padding:0;border:0; scroll-behavior:smooth; font-family:"system-ui", sans-serif; Line-height:35.007px;color:#666; }  
body { min-height: 100vh; font-size:20px ;background-color:#f8f9fa;color:#333;scroll-behavior:smooth;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Open Sans", "Noto Sans", "Noto Naskh Arabic", "Amiri", Tahoma, "Noto Sans SC", "Noto Sans TC", "Microsoft YaHei", "PingFang SC", "Noto Sans JP", "Yu Gothic", Meiryo, "Noto Sans KR", "Malgun Gothic", "Noto Sans Hebrew", "Noto Sans Thai", sans-serif;
}
.wrapper, .container { width:100%; min-height:100%; background:#f8f9fa;  position:relative; margin:0; padding:0; font-size:20px;color:#020617 ; 
justify-content: center;align-items: center;  -webkit-text-size-adjust: 100%; 
-ms-text-size-adjust: 100%;-moz-text-size-adjust: 100%;text-size-adjust: 100%;
font:inherit;vertical-align:baseline;white-space: normal;}
.responsive{height:auto;display:block;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;
width:100%;justify-content:center;align-items:center; 
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Open Sans", "Noto Sans", "Noto Naskh Arabic", "Amiri", Tahoma, "Noto Sans SC", "Noto Sans TC", "Microsoft YaHei", "PingFang SC", "Noto Sans JP", "Yu Gothic", Meiryo, "Noto Sans KR", "Malgun Gothic", "Noto Sans Hebrew", "Noto Sans Thai", sans-serif;}

.responsive{height:auto;display:block;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;
width:99.8%;justify-content:center;align-items:center;}

nav {font-size:1.3rem; background-color:#0532e6;color:#F8F9FA; display:flex; 
justify-content:space-between; align-items: center; padding:10px 20px;flex-wrap: wrap; position:-webkit-sticky; position:sticky;top:0; z-index:9999999;}
.logo {font-size:1.4rem; color:#F8F9FA; font-weight:bold;text-decoration:none; }
.hamburger { display:none; cursor:pointer; flex-direction:column; gap:8px;}
.hamburger div { width:35px; height:3px;  background-color:#FFFFFF;}
ul.menu { display:flex; gap:8px; list-style: none; }
ul.menu li { position:relative;list-style:none; }
ul.menu li a { text-decoration:none; color:white; padding:2px 12px; display:block; transition:color 0.3s;}
ul.menu li a:hover { color:#000; }
ul.menu li ul.dropdown { position:absolute; top:100%; left:0; background-color: #ffffff; min-width:368px; opacity:0; visibility:hidden;
transform: translateY(-20px); transition:opacity 0.4s ease; transform 0.4s ease; box-shadow:0 8px 16px rgba(0, 0, 0, 0.2);z-index: 1000;}
ul.menu li:hover ul.dropdown { opacity:1; visibility:visible; transform:translateY(0);}
ul.menu li ul.dropdown li a { color:#000; background-color:#f8f9fa; padding:7px 8px; border-bottom:1px solid #e0e0e0; }
ul.menu li ul.dropdown li a:hover { background-color:#d4f1f4; color:#000; transition:0.5s ease;}
 /* Responsive */
@media (max-width:800px) {
nav {flex-direction:column; align-items:stretch; }
.nav-header {width:100%; display:flex;  justify-content:space-between; align-items:center; }
  /*.logo {margin-left: auto;float:none; }*/
  .logo { position:absolute;top:5px;right: 10px;float: none;z-index: 1000; /* Ensures it stays on top */}
.hamburger { display:flex; }
ul.menu { display:none;  flex-direction:column;  width:100%; }
ul.menu.open { display:block;}
ul.menu li {list-style:none; width:100%;}}

/* Animation for dropdown items */
ul.menu li ul.dropdown  {opacity:0;transition:opacity 0.3s ease, transform 0.3s ease;transform:translateX(-20px);}
ul.menu li ul.dropdown  :focus-within .dropdown li {opacity:1;transform:translateX(0);}
/* Staggered animation for dropdown items */
ul.menu li ul.dropdown :nth-child(1) {transition-delay:0.1s;}
ul.menu li ul.dropdown :nth-child(2) {transition-delay:0.2s;}
ul.menu li ul.dropdown :nth-child(3) {transition-delay:0.3s;}
ul.menu li ul.dropdown :nth-child(4) {transition-delay:0.4s;}
ul.menu li ul.dropdown :nth-child(5) {transition-delay:0.5s;}
ul.menu li ul.dropdown :nth-child(6) {transition-delay:0.6s;}
ul.menu li ul.dropdown :nth-child(7) {transition-delay:0.6s;}
ul.menu li ul.dropdown :nth-child(8) {transition-delay:0.7s;}
ul.menu li ul.dropdown :nth-child(9) {transition-delay:0.9s;}


section {background-color:#E6F7FF;padding: 20px;z-index:1;}
.content-section {display:flex;flex-wrap:wrap; gap:16px;padding:16px;box-sizing:border-box; background-color:#fafafa;}
.card {background:#fff; padding:12px; flex: 1 1 calc(25% - 12px); box-sizing:border-box; display:flex; flex-direction:column; word-wrap: break-word;}
.card img {width:90%; height:auto; object-fit:cover;display:block;border-radius:1%;}
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 { margin: 10px 0;text-align: center;}
.card h1 { font-size: 26px; color: #f45325; }
.card h2 { font-size: 24px; color: #000; }
.card h3, .card h4, .card h5, .card h6 { font-size: 19px; color: #000; text-align: left; }
.card p { margin-bottom: 10px; overflow-wrap: break-word; max-width: 100%;}

form {margin-top: 15px;}
.input-row {margin-bottom: 10px; display: flex; flex-direction: column;}
.input-row label {font-weight: bold; margin-bottom: 5px;}
.input-row input, .input-row textarea {padding: 8px;  font-size: 16px; border: 1px solid #ccc; border-radius: 4px; }
.input-row input[type="submit"] {  background-color: #f45325;  color: white;  border: none;  cursor: pointer;  width: 120px;}
@media (max-width: 999px) {
 .card {flex: 1 1 calc(50% - 10px); }}
@media (max-width: 799px) {
.card {flex: 1 1 100%; padding: 10px;} }
@media (max-width: 515px) { .content-section { padding: 8px; }
.card { flex: 1 1 100%;padding: 8px;}
.card img {width: 100%;height: auto;} }


#myBtn {display:none; position:fixed;bottom:20px;left:20px; z-index:99;  border:none; outline:none; background-color:#ff6f61;color:white; cursor: pointer; padding: 15px;  border-radius: 10px; font-size: 18px; }
#myBtn:hover { background-color:#555;transition: 1s; }

footer {
    background-color: #0532e6;
    color: #fff;
    text-align: center;
    padding: 110px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

.footer-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 30px;
}

.footer-content p {
    margin: 5px 0;
    color: #fff;
}

.footer-content a {
    color: #fff;
    text-decoration: none;
}

.footer-content a:hover {
    text-decoration: underline;
}


/* used for animation*/
.content-section .card { animation:appear 2s ease-out 0s 1 ; animation-timeline: view(); animation-range: entry 0% cover 25%; }
.content-section .card p ,h1 ,h2 ,h3 ,h4 ,h5 ,h6 { animation:appear 2s ease-out 0s 1 ; animation-timeline: view(); animation-range: entry 0% cover 25%; }
.content-section .card img{ animation:appear 2s ease-out 0s 1 ; animation-timeline: view(); animation-range: entry 0% cover 30%; }
.animated {animation-duration: 2s;animation-duration: var(--animate-duration);animation-fill-mode: both;}
@keyframes appear {
from {opacity: 0;transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
25% {opacity: 1;transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);}
}
}