* {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;}

body {min-height: 100vh;font-size: 20px; background-color:#fefefe;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;}

.container {width:100%;min-height:100%;background:#fefefe;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:99.8%;justify-content:center;align-items:center;}
.pre-header {width:100%;height:44px; background-color:#fff;border-bottom: 1px #fff solid;display:flex;justify-content:center;align-items:center;}
.pre-header a { text-decoration: none;}
.pre-header button {width:80px;height:32px;
margin:0 2px;background-color:#0532e6;border:none;border-radius:5px;color:white;animation:appear 1s ease-out 0s 1;font-size:17px;cursor:pointer;transition:background-color 0.3s ease;}
.pre-header button:hover {background-color: orange;color: #fff;transition: 1s;}
.pre-header button {color: #fff;}

#whatsapp {width:auto;height:32px;display:inline-block;}
#whatsapp p {transition:1s;color:#0073e6;font-size:18px;font-weight:bold;}

@media (max-width:600px) {
#whatsapp p {font-size: 12px;;}
}

.banner {position: relative;width: 100%;background-color: #fff;padding: 0;}
.banner img {width:100%;height:auto;}

#menu {animation: 1s ease-out 0s 1 slideInFromtop;
background: #0532e6;height: 45px;padding-left: 18px;  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
position: -webkit-sticky;position: sticky;top: 0;z-index: 99;}

#menu ul,
#menu li {margin:0 auto;padding: 0;list-style: none}
#menu ul {width: 100%;text-align: left;}
#menu li {display: inline-block; position: relative;}
#menu a {display: block; line-height: 45px; padding: 0 14px; text-decoration: none;color: #ffffff;font-size: 18px;}
#menu a.dropdown-arrow:after {content: "\25BE"; margin-left: 5px;}
#menu li a:hover {color: #000;background: #fff;transition: .3s;}
#menu input {display: none; margin: 0; padding: 0;height: 45px;width: 100%;opacity: 0;cursor: pointer}
#menu label {display:none;line-height:45px;text-align:center;position:absolute;left:35px}
#menu label:before {font-size: 2.6em;color: #FFFFFF;content: "\2261";margin-left: 20px;}
#menu ul.sub-menus {height:auto;overflow:hidden;width:390px;background:#0872db;position:absolute;z-index:99;display:none;}
#menu ul.sub-menus li {display:block; text-align: left;width: 100%;}
#menu ul.sub-menus a {color:#FFFFFF;font-size:18px;}
#menu li:hover ul.sub-menus {/*animation:.1s ease-out 0s 1 slideInFromtop;*/display:block;}
#menu ul.sub-menus a:hover {color: #000;background: #fff;border: .4px solid #0872db;}

@media screen and (max-width:910px) {
#menu { position: relative}
#menu ul { background:#000000;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;text-align:left;}
#menu ul.sub-menus {width: 100%;position: static;}
#menu ul.sub-menus a { padding-left: 30px;}
#menu li {display:block; float:none;width: auto;}
    #menu input,
    #menu label {position: absolute;top: -6px;left: 0;display: block;}
    #menu input {z-index: 4}
    #menu input:checked+label {color: #FFFFFF }
    #menu input:checked+label:before { content: "\00d7" }
    #menu input:checked~ul {display: block }
}

section {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;
font-size:18px;color:#1A202C; background-color: E6F7FF;z-index: 1;}

section::after {content: '';display: table;clear: both;z-index: 0;}
.content-section {display:flex;flex-wrap:wrap;gap:12px;padding:12px;box-sizing:border-box;background-color:#fafafa;}
.content-section .card {color:#333; background:#ffffff;padding:16px; border:1px solid #ccc; border-radius:8px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);
 flex: 1 1 calc(50% - 16px); box-sizing:border-box;o word-wrap:break-word;overflow:visible;display:flex; flex-direction:column;}
.content-section .card img { width:90%;height:80%;object-fit:cover; display:block;margin-left:auto;margin-right:auto;padding:0; border:0;border-radius:1%;overflow:hidden;}
.content-section .card h1 {animation: appear 4s ease-out 0s 1;text-align: center;margin: 10px 0px;font-size: 26px;color: #f45325;}
.content-section .card h2 {text-align:center;margin: 10px 0px;font-size: 24px;color:#000; margin-left:2px;}
.content-section .card h3,
.content-section .card h4,
.content-section .card h5,
.content-section .card h6 {text-align:left;margin:15px 0px;font-size:19px;color:#000;margin-left:10px;}
.content-section .card p,
.content-section .card h1,
.content-section .card h2,
.content-section .card h3,
.content-section .card h4,
.content-section .card h5,
.content-section .card h6 {margin-bottom:10px;overflow-wrap:break-word;max-width:100%;}

@media (max-width:999px) {.card {flex: 1 1 calc(50% - 10px);}}

@media (max-width:699px) {.content-section .card {flex: 1 1 100%;}
}

.form {margin-top:15px;}
.input-row {margin-bottom: 10px; display: flex; flex-direction: column;}
.input-row label {font-weight: bold; margin-bottom:5px; display: block; text-align:left; }
.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;} }

table {width:100%; border-collapse:collapse; margin:20px 0;color: #fff;}
table td { background-color: #fff;color:#000; padding:12px; text-align: left; border: 1px solid #ddd;}
table th {background-color:#BF0060;color: #fff;padding: 12px;text-align: left;border: 1px solid #fff;}
tr:nth-child(even) {background-color: #f9f9f9;}
tr:hover {background-color: #f1f1f1;}

.medical-information {display:flex;flex-wrap:wrap;justify-content:center; margin:20px;}

.box {text-decoration: none;background-color: white; margin: 10px; padding: 10px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
 width: 250px;text-align: center;transition: 0.3s;}
.box:hover {transform: scale(1.05);}
.box a {transition:color 5s; text-decoration:none;background-color:white;margin:10px;text-align:center;transition:0.3s;}
.box a:hover {text-decoration:underline solid #0073e6 50%;transition: color 5s;margin: 10px;text-align: center;}

#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:green;transition: 1s;}

/* used for animation*/
.content-section .card {animation: appear 2s ease-out 0s 1;animation-timeline: view();animation-range: entry 0% cover 5%;}
.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 5%;}

.content-section .card img {animation: appear 1s ease-out 0s 1;animation-timeline: view();animation-range: entry 0% cover 10%;}
.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);
    }
}

}

@keyframes slideInFromLeft { 0% {transform: translateX(-100%);} 100% { transform: translateX(0); }}

@keyframes slideInFromright { 0% { transform: translateX(100%);} 100% {transform: translateX(0);}}

@keyframes slideInFromtop {
    0% { transform:translatey(100%);  }
    100% { transform:translatey(0);}
}

@keyframes slideInFrombottom {
    0% { transform: translatey(-100%); }
    100% {transform: translatey(0); }
}

footer {background-color:#0532e6;color:#fff; text-align:center; padding:30px 0; position:relative;bottom:0;width:100%;}
.footer-content {max-width:800px;margin: 0 auto;padding:0 20px;}
.footer-content p {margin:5px 0;color: #fff;}
.footer-content a {color:#fff;text-decoration: none;}
.footer-content a:hover {text-decoration: underline;}