html, body {margin: 0;padding: 0;font-family: Verdana, sans-serif;color:#1a1a1a;line-height:1.5;}
    p, ul, li {text-align:justify;margin-top:0px;padding-top:0px;}
    * {box-sizing: border-box; }
    a {text-decoration:none;font-size: calc(1vw + 1px);}
    u {text-decoration-color:red;}
    ul, li {margin-bottom:16px;}
    input, select {width:100%;height:38px;padding:0 16px;border:1px solid #ddd;border-radius:3px;background:#ffffff;}
    textarea {width:100%;height:150px;padding:16px;border:1px solid #ddd;border-radius:3px;background:#ffffff;resize: none;}
    .book-now {background:gold;color:#000000;font-size:16px;font-weight:bold;width:100%;height:38px;padding:0 16px;border:1px solid gold;border-radius:3px;margin-top:16px;}
    .cols {display: grid;grid-gap:8px}
    .cols>div {padding: 0.5rem;backgrdound: ss#ffffff;}
    .row {padding:0;margin:32px 0 0 0;}
    .center {text-align:center;}
    .left {text-align:left;}
    .right {text-align:right;}
    .img1, .img2 {filter:grayscale(100%);}
    .img-floatleft {float:left;width:100%;height:auto;margin-bottom:16px;}
    a.learnmore {text-decoration:none;font-size: 16px;color:#2b2b2b;}
    article.services {margin-bottom:25px;border:1px solid #ddd;border-radius:5px;padding:0 12px;}
    article.services:hover {background-color: rgba(16,90,55, 0.1);border:1px solid #ffffff;}
    .row-breadcrumbs { padding:3px calc(8vw + 4px);}
    .breadcrumbs, .breadcrumbs a {color:#105a37;font-size:11px;text-align:right;}
    
/* Header */
    h1 {margin: 0;color:rgb(255, 255, 255);text-shadow: 5px 5px 10px rgb(0, 0, 0, 0.8);font-weight:bold;}
    .img-background-home {background-image: url('/image/image-1680x680.png');background-size: cover;background-position: center left;position: relative;overflow: hidden;}
    .img-background-home::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(16,90,55, 0.8);z-index: 1;}
    header.home {display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;height: 70vh;color: #ffffff;position: relative;z-index: 2;padding: 0 calc(5vw + 4px);}
    .img-background-subpage {background-color: #105a37;background-size: cover;background-position: center left;position: relative;overflow: hidden;} 
    .img-background-subpage::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(16,90,55, 0.8);z-index: 1;}
    header.subpage {display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;color: #ffffff;position: relative;z-index: 2;padding: 0 calc(5vw + 4px);}
/* Menu | Navbar */
    .menu {display: flex;justify-content: space-between;align-items: center;padding:0px 0;position: fixed;z-index: 999;width:100%;}
    .menu a, .menu button {color: #ffffff;text-decoration: none;margin-left: calc(1.2vw + 10px);font-size:calc(0.9vw + 2px);background:transparent;border:none;}
    .menu a:hover {color: gold;}
    .menu-dropdown {position: relative;display: inline-block;}
    .menu-dropdown-content {display: none;position: absolute;background-color: rgba(16, 90, 55, 0.8);min-width: 350px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);padding: 12px 12px; z-index: 1;}
    .menu-dropdown:hover .menu-dropdown-content {display: block;}
    .hotlines, .hotlines a {font-size:calc(0.8vw + 2px);}
    .hotlines {text-align:right;margin-bottom:calc(1.5vh - 4px);color:#ffffff;}
    .mobileNav {display: none;height: 100%;width: 100%;position: fixed;z-index: 9999;top: 0;left: 0;background-color: #105a37;overflow-x: hidden;padding-top: 0;}
    .mobileNav a {padding: 16px 16px 16px 16px;text-decoration: none;font-size: 16px;color: #ffffff;display: block;}
    .mobileNav a:hover, .dropdown-btn:hover {color: #f1f1f1;}
    .mobileNav .closebtn {position: absolute;top: 0;right: 16px;font-size: 14px;margin-left: 50px;}
    .dropdown-btn{padding: 16px 16px 16px 16px;text-decoration: none;font-size: 18px;color: #ffffff;display: block;background-color: transparent;border:none;}
    .dropdown-container {background-color: #000000;padding-left: 24px;margin:16px 0;}
    .mobileTopNav {overflow: hidden;background-color: #105a37;position: relative;padding: 16px 16px 16px 16px;}
    .mobileTopNav span.icon {background: transparent;color:#ffffff;font-size:40px;cursor:pointer;display: block;position: absolute;right: 16px;top: 0;}
    @media screen and (max-height: 450px) {.mobileNav {padding-top: 15px;}.mobileNav a {font-size: 18px;}}
/* Footer */
    footer, footer a {color:#ffffff;background-color:#000000;padding:0 0 0 0;}
    .sub-footer {background-color:#105a37;color:#ffffff;}
    .quicklinks {column-count: 2;list-style-type: none;margin:0 0 3px 0;padding:0;}
    .quicklinks a:hover {color:gold;}
/* The Modal */
    .modal {display: none;position: fixed;z-index: 1;padding-top: 100px;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);z-index:9999;}
    .modal-content {background-color: #fefefe;margin: auto;padding: 20px;border: 1px solid #888;}
    .modal-close {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold;}
    .modal-close:hover,.modal-close:focus {color: #000;text-decoration: none;cursor: pointer;}
    .modalBtn {font-size:16px;font-weight:bold;padding:16px 16px;color:#000000;background-color:gold;border:none;border-radius:5px;margin:32px 0;}
/* Blockquote */    
    div:has(> blockquote) {margin: 10px auto;padding: 15px;text-align:center;text-shadow: 5px 5px 10px rgb(0, 0, 0, 0.2);}
    blockquote p::before {content: '\201C';}
    blockquote p::after {content: '\201D';}
    blockquote + p {text-align: right;}
        
@media only screen and (max-width: 639px){
    .menu {display:none;}
    .s12 {grid-template-columns: repeat(auto-fit,minmax(100%, 1fr));}
    .s6 {grid-template-columns: repeat(auto-fit,minmax(40%, 1fr));}
    .s5 {grid-template-columns: repeat(auto-fit,minmax(15%, 1fr));}
    .s4 {grid-template-columns: repeat(auto-fit,minmax(20%, 1fr));}
    .s3 {grid-template-columns: repeat(auto-fit,minmax(25%, 1fr));}
    .row-content-0 {padding:0 calc(1vw + 4px);}
    .row-content-32 {padding:32px calc(1vw + 4px);}
    .row-padding {padding-bottom:32px;}
    .container {padding:0 8px;}
    h1 {font-size: calc(5.5vw + 18px);}
    h2 {font-size: calc(1vw + 14px);}
    .h1-sub {font-size: calc(0.78vw + 9px);}
    .logo {height:90px;width:auto;}
    .contact-bar {display:none;}
    .img1, .img2, .img-aboutus {width:100%;height:auto;margin-bottom:8px;}
    footer, footer a {font-size: 12px;}
    .footerReserved, .footerPowered {text-align:center;}
    .footerPowered {margin-bottom:16px;color:rgb(255, 255, 255);text-shadow: 5px 5px 10px rgb(0, 0, 0, 0.8);font-weight:bold;}
    header.home {height: 70vh;line-height:1.3;}
    .img-background-home {height: 100vh;}
    header.subpage {height: 50vh;}
    .img-background-subpage {height: 50vh;}
    .modal-content {width: 95%;}
    div:has(> blockquote) {font-size:28px;}
}

@media only screen and (min-width: 640px){
    .mobileNav, .mobileTopNav {display:none;}
    .l12 {grid-template-columns: repeat(auto-fit,minmax(100%, 1fr));}
    .l6 {grid-template-columns: repeat(auto-fit,minmax(40%, 1fr));}
    .l5 {grid-template-columns: repeat(auto-fit,minmax(17%, 1fr));}
    .l4 {grid-template-columns: repeat(auto-fit,minmax(25%, 1fr));}
    .l3 {grid-template-columns: repeat(auto-fit,minmax(20%, 1fr));}
    .l2 {grid-template-columns: repeat(auto-fit,minmax(15%, 1fr));}    
    .row-content-0 {padding:0 calc(8vw + 4px);}
    .row-content-32 {padding:32px calc(8vw + 4px);}
    .row-padding {padding-bottom:64px;}
    h1 {font-size: calc(1vw + 28px);}
    .h1-sub {font-size: calc(0.8vw + 12px);}
    .logo {height:calc(6vw + 8px);width:auto;}
    .contact-bar {padding:8px 24px;text-align:right;}
    .img1 {float:right;width:calc(30vw + 4px);height:auto;padding:8px;}
    .img2 {float:left;width:calc(25vw + 4px);height:auto;margin-right:16px;border-radius:360px;}
    .img-aboutus {float:right;width:calc(30vw + 4px);height:auto;margin-left:18px;}
    footer, footer a {font-size: calc(0.8vw + 1px);}
    .footerPowered {text-align:right;}
    header.home {height: 100vh;line-height:1.0;}
    .img-background-home {height: 100vh;}
    header.subpage {height: 62vh;}
    .img-background-subpage {height: 52vh;}
    .modal-content {width: 500px;}
    div:has(> blockquote) {font-size:32px;}
    .two-columns {column-count: 2;}
}