*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html , body{
    height: 100%;
    width: 100%;
}   

    :root{
        --white: #ffffff;
        --whatsapp: #25D366;
        --cream: #FDFBF7;
        --dark-111827: #111827;
        --dark-151A3E: #151A3E;
        --muted-9CA3AF: #9CA3AF;
        --sun-ff9e0b: #f59e0b;
        --shadow-1: rgba(0,0,0,0.18);
        --shadow-2: rgba(0,0,0,0.15);
        --backdrop: rgba(0,0,0,0.45);
        --dark-111827-rgb: 17,24,39;
    }




/* Utility classes that map to CSS variables for explicit hex values used in the HTML */
.bg-cream{background-color:var(--cream) !important}
.bg-dark-151A3E{background-color:var(--dark-151A3E) !important}
.bg-dark-111827{background-color:var(--dark-111827) !important}
.text-muted{color:var(--muted-9CA3AF) !important}
.footer-solar-bg{background:radial-gradient(circle at 30% 70%, var(--sun-ff9e0b) 0%, transparent 50%)}
.overlay-gradient-dark{background:linear-gradient(to top, var(--dark-111827), rgba(var(--dark-111827-rgb),0.3), transparent)}


/* Floating WhatsApp button */
.floating-whatsapp{
    position: fixed;
    right: 18px;
    bottom: 18px;
    background: var(--whatsapp);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 50px;
    box-shadow: 0 10px 30px var(--shadow-1);
    z-index: 60;
    cursor: pointer;
    font-weight: 700;
}
.floating-whatsapp i{font-size:20px}
.floating-whatsapp .help-text{display:none}
@media (min-width:640px){
    .floating-whatsapp .help-text{display:inline-block}
}

/* Mobile drawer styles */
.mobile-drawer{display:block;position:fixed;inset:0;z-index:55;pointer-events:none}
.mobile-drawer .backdrop{position:absolute;inset:0;background:var(--backdrop);opacity:0;transition:opacity .25s ease;pointer-events:none}
.mobile-drawer .mobile-drawer-panel{position:absolute;right:0;top:0;bottom:0;width:80%;max-width:320px;background:var(--white);transform:translateX(100%);transition:transform .3s ease;box-shadow:-10px 0 30px var(--shadow-2);padding:24px;pointer-events:auto;overflow:auto}
.mobile-drawer.open .backdrop{opacity:1;pointer-events:auto}
.mobile-drawer.open .mobile-drawer-panel{transform:translateX(0)}
.mobile-close{background:none;border:none;font-size:28px;line-height:1;position:absolute;right:12px;top:12px;cursor:pointer}
.mobile-links{list-style:none;margin-top:40px;display:flex;flex-direction:column;gap:14px;padding:0}
.mobile-links a{text-decoration:none;color:var(--dark-111827);font-weight:700;font-size:18px;padding:10px 6px;border-radius:8px;display:block}

@media (min-width:768px){
    .mobile-drawer{display:none}
}