/*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*/
    text-align:right;
    padding-left:16px;
    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;
}

/* Show submenu on hover (desktop) */

@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;}
}