/*declare Variables*/
:root {
    --Color-BODY-BG:#F8FAFC; /* Soft White */
    --Color-Text:#1E293B; /* Deep Navy */

    --Color-HF-BG:#1E293B; /* Deep Navy */
    --Color-HF-Fore:#F8FAFC; /* Soft White */
    
    /*button Style Link */
    --Color-BTNLNK-BG:#3B82F6; /* Muted Blue */ 
    --Color-BTNLNK-Hover-BG:#2563EB; /* Darker Blue */
    --Color-RTNLNK-Fore:#F8FAFC; /* Soft White */

    /*(Tip of the day)*/
    --Color-TIP-BG:#D97706; /* Warm Beige */
    --Color-TIP-Fore:#F8FAFC; /* Soft White */

    /*(Special Offer Btn)*/
    --Color-Special-Offer: #34D399; /* Mint Green icon */
    --Color-TIP-Fore:#1E293B; /* Deep Navy */

    /*(Special Block)*/
    --Color-Special-block: #FACC15; /* Warm Sand */
    --Color-TIP-Fore:#1E293B; /* Deep Navy */
}

* { box-sizing: border-box;margin: 0;padding: 0;}

body {background-color: var(--Color-BODY-BG);color:var(--Color-Text);font-family: 'Roboto', sans-serif;margin: 0;padding: 0;}

html {font-family: Roboto;scroll-behavior: smooth;}

.sticky-header {position: sticky;top: 0;z-index: 1020;text-align:center;}

.topline {display:flex;align-items:center;justify-content:space-between;padding:10px 20px;}

.toprow { background-color: var(--Color-HF-Fore); color:var(--Color-HF-BG);border: 0px solid red; }

.logo img{max-height: 100px;display: block;min-width: 150px;border: 0px solid blue;}

.adarea {flex:1; /*The item will grow to fill extra space*/
    border:0px solid blue;
}

.ad-placeholder {width:100%;max-width:728px;height:90px;display:inline-flex;align-items:center;justify-content:center;border:2px dashed #bbb;
    background:#f5f5f5;color:#444;font-weight:600;font-size:14px;}

.CutHeader {display:flex;align-items:center;border:0px solid red;}

.CutHeaderTitle {position: relative;background: var(--Color-BTNLNK-BG);color: var(--Color-HF-Fore);font-weight: bold;
    border-bottom: 3px solid var(--Color-BTNLNK-BG);flex:0 0 auto;overflow: hidden;padding:4px 60px 4px 6px;}
.CutHeaderTitle::after {content: "";position: absolute;top:0px;right:-5px;width:60px;height: 100%;background: var(--Color-HF-Fore);
    transform: skewX(45deg);transform-origin: top left;}
.cutHeaderLink {flex:1;text-align:right;padding: 4px 10px 4px 4px ;border-bottom: 3px solid var(--Color-BTNLNK-BG);}
/* Show submenu on hover (desktop) */

.Carousal {position: relative;overflow: hidden;width:100%;}
.Carousal-track {display: flex;overflow-x: Hidden;overflow-y: hidden;scroll-behavior: smooth;gap:25px;padding:10px 0px;}
.carousel-btn {position: absolute;top:50%;transform: translateY(-50%);background: rgba(0,0,0,0.5);color: #fff;border: none;
    cursor: pointer;font-size: 28px;padding: 10px 5px;border-radius: 5px;opacity: 0.4;transition: opacity 0.3s ease, background 0.3s ease;
    z-index: 10;}
.carousel-btn.prev { left: 5px; }
.carousel-btn.next { right: 5px; }
.carousel-btn:hover {opacity: 1;background: rgba(0,0,0,0.8);}
.Card {flex:0 0 auto;display:flex;flex-direction:column;justify-content:space-between; border-radius:12px;box-shadow: 0 2px 8px rgba(0,0,0,0.5);transition: transform 0.3s;border:1px solid black;background:var(--Color-BODY-BG);}
.Card:hover {transform: translateY(+5px);}
.img-placeholder {background-color:lightgray; /* soft neutral tone */border-top-left-radius: 12px;border-top-right-radius: 12px;}
.img-placeholder img{border-top-left-radius: 12px;border-top-right-radius: 12px;object-fit: fill;max-width: 100%;max-height: 100%;border:0px solid red;}
.Card-info {width:100%;padding: 5px;text-align: center;border:0px solid blue;word-break: break-word;}
.Card-info h3{font-size: 1rem;margin: 0;}
.Card-info p{}
.Card-BaseInfo {text-align:center;padding:0px;color:red;font-size:16px;font-weight: bold;}

.FAQList {display:flex;flex-direction:column;gap:20px;}
.FAQItem {border-bottom: 1px solid black;}
.FAQQ {font-weight:600;cursor:pointer;color:var(--Color-HF-BG)};
.FAQA {font-weight: 100; display:none;margin-top: 5px;line-height:1.5;}
.FAQItem.active .FAQA {display: block;}

a {text-decoration: none;}
a:link {color:black;}
a:visited {color:black;}
a:active {color:black;}
a:hover {color:red;}

.Sectcontainer {display:flex;flex-wrap: wrap;max-width: 1200px;margin: auto;padding: 30px;background: #FFFFFF;border-radius: 12px;
    overflow: hidden;box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);border:1px solid #C92229;}
.contactinfo{flex:1;background: #C92229;color:white;border-top-left-radius: 12px;padding:20px;}
.contact-form{flex:2;background: white;display:block;width:auto;color:white;border-top-right-radius: 12px;padding:20px;}
.contact-form label{display: block;margin-top: 15px;color: #C92229;}

.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
    width: 100%;padding: 10px;margin-top: 5px;border: 1px solid #ccc;border-radius: 5px;}

.section {position: relative;display: grid;grid-template-columns: 1fr 320px;   /* content flexible, ad fixed */
    gap: 30px;align-items: start;margin: 30px;border:0px solid blue;}
.contentBlock {position: relative;background: var(--Color-BODY-BG);border: 0px solid red;border-radius: 6px;padding: 0px;margin:20px 20px 0px 20px;}
.adBlock {position: sticky;padding: 10px;top: 170px; /*Need to adjust everytime according to the height of sticky topbar*/
    background: var(--Color-BODY-BG);border: 2px dashed #888;display: flex;align-items: center;justify-content: center;font-weight: bold;
    color: #333;border-radius: 8px;height: 320px;width: 100%;aspect-ratio: 1 / 1;   /* square on wide screens */}
.contentHeader {position: absolute;background: var(--Color-BTNLNK-BG);left:50%;transform: translate(-50%,-50%);padding:3px 10px;
    border: 2px solid blue;font-size: 30px;font-weight:bold;text-align: center;z-index: 1;text-wrap: nowrap;border-radius: 12px;}
.content {position: relative;padding: 30px;font-size: 17px;line-height: 1.7;border:1px solid blue;box-shadow: 0 2px 6px rgba(0,0,0,0.8);
    background: var(--Color-Special-block);border-radius: 25px;z-index: 0;}

.Footer {
    background-color: #c92229;
    color:#ffffff;
    padding:20px 20px;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: auto;
}
.Footer_links {
    flex: 1 1 250px;
    padding:10px 10px;
}
.Footer_links a{
    text-decoration:none;
    color:white;
}
.Footer_links a:hover{
    text-decoration:none;
    color:#ffcc00;
}

.footer_logo picture, .footer_logo img {
    display: block;
    max-width: 300px;
    width:100%;
    height: auto;
    border:2px solid white;
}

@media (max-width:1000px) {
    .section {grid-template-columns: 1fr;}
    .adBlock {
        position: static;                 /* disable sticky on small screens */
        margin-top: 10px;
        height: 100px;
        aspect-ratio: 3 / 1;              /* rectangular ads for mobile */
    }
}
@media (max-width:800px) {
    .topline { 
        padding:10px 12px;
        flex-direction:column;
        gap:8px;
        align-items:center;
    }
    .ad-placeholder {
        max-width:320px;
        height:100px;
    }
}

@media (max-width:520px) {
    .logo img{max-height: 80px;}
}

@media (max-width: 400px) {
    .footer_logo img {
        max-width:380px;
        height:auto;
    }
}

@media (max-width:300px) {
    .CutHeader {display:block;}
}