:root {
        --white: #ffffff;
        --border: #e5e5e5;
        --dark: #1f2937;
        --gold: #c8a165;
    }

/* ================= RESET ================= */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body.white-theme {
        font-family: 'Montserrat', sans-serif;
        background: #fff;
        color: var(--dark);
    }

/* ================= HEADER ================= */

    .main-header {
        position: sticky;
        top: 0;
        background: #fff;
        border-bottom: 1px solid var(--border);
        z-index: 9999;
    }
    
    .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 72px;
    }
    
    /* allow dropdown overflow */
    .main-header,
    .header-inner,
    .main-nav,
    .menu-center {
        overflow: visible !important;
    }

/* ================= LOGO ================= */
    .logo img {
        max-height: 52px;
    }

/* ================= DESKTOP NAV ================= */
    .main-nav {
        width: 100%;
    }
    
    .menu-center {
        list-style: none;
        display: flex;
        justify-content: center; /* CENTER MENU */
        align-items: center;
        gap: 26px;
    }

    .menu-center > li {
        position: relative;
    }

    .menu-center > li > a,
    .menu-center > li > span.more-link {
        font-size: 16px;
        font-weight: bold; /*500;*/
        color: #54999d;
        /*color: #e39216;   var (--gold);*/
        text-decoration: none;
        cursor: pointer;
        padding: 6px 0;
        white-space: nowrap;
    }

    .menu-center > li > a:hover,
    .menu-center > li > span.more-link:hover {
        color: var(--dark);
    }

/* ================= DESKTOP DROPDOWN ================= */
    .menu-center > li.has-sub > .sub-menu {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        min-width: 210px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 20px 45px rgba(0,0,0,.18);
        padding: 8px 0;
        display: none;
        z-index: 99999;
        pointer-events: auto;
    }
    
    .menu-center > li.has-sub:hover > .sub-menu {
        display: block;
    }

/* dropdown items */
    .sub-menu li {
        list-style: none;
    }

    .sub-menu li a {
        display: block;
        padding: 10px 18px;
        font-size: 14px;
        font-weight: bold;
        color: #54999d;
        /*color: #e39216;*/
        /*color: var(--gold);*/
        text-decoration: none;
        pointer-events: auto;
    }

    .sub-menu li a:hover {
        background: #f7f7f7;
        color: var(--dark);
    }

/* ================= MOBILE TOGGLE ================= */
    .menu-toggle {
        display: none;
        font-size: 26px;
        background: none;
        border: none;
        cursor: pointer;
    }

/* ================= MOBILE ================= */
    @media (max-width: 991px) {
    
        /* toggle visible */
        .menu-toggle {
            display: block;
        }
    
        /* mobile nav panel */
        .main-nav {
            position: absolute;
            top: 72px;
            left: 0;
            width: 100%;
            background: #fff;
            border-top: 1px solid var(--border);
            display: none;
        }
    
        .main-nav.open {
            display: block;
        }
    
        /* stack menu */
        .menu-center {
            flex-direction: column;
            align-items: flex-start;
            gap: 0;
            width: 100%;
        }
    
        .menu-center > li {
            width: 100%;
        }
    
        .menu-center > li > a,
        .menu-center > li > span.more-link {
            width: 100%;
            padding: 5px 15px;
            border-bottom: 1px solid var(--border);
        }

        /* mobile submenu */
        .menu-center > li.has-sub > .sub-menu {
            position: static;
            border: none;
            box-shadow: none;
            border-top: 1px solid var(--border);
            border-radius: 0;
            padding-left: 20px;
            display: none;
        }
        
        .menu-center > li.has-sub.open > .sub-menu {
            display: block;
        }
    }
    
    /* ================= OPTIONAL ANIMATION ================= */
    .sub-menu {
        animation: dropFade .2s ease;
    }

    @keyframes dropFade {
        from {
            opacity: 0;
            transform: translateY(6px);
        }
    
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ===============================
   ROYAL STYLE FOOTER
================================ */

    .main-footer {
        background: #54999d; 
        padding: 70px 0 0;
        font-size: 25px;
        color: #ffffff;
    }
    
    .footer-row {
        padding-bottom: 40px;
    }
    
    /* Logo */
    .footer-logo {
        max-width: 220px;
        margin-bottom: 18px;
    }
    
    /* Description */
    .footer-desc {
        color: #dbe7f1;
        line-height: 1.8;
        max-width: 320px;
    }
    
    /* Titles */
    .footer-title {
        font-size: 25px;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 18px;
        position: relative;
    }

    .footer-title::after {
        content: "";
        width: 40px;
        height: 2px;
       /* background: #c8a165;*/ 
        display: block;
        margin-top: 8px;
    }

/* Text */
    .main-footer p {
        margin-bottom: 10px;
        font-size: 12px;
        color: #ffffff;
        font-weight: bold;
    }
    
    /* Links */
    .main-footer a {
        color: #ffffff;
        text-decoration: none;
    }

    .main-footer a:hover {
        text-decoration: underline;
    }

/* ===============================
   SOCIAL ICONS – SIMPLE ROYAL
================================ */

    .footer-social-real {
        display: flex;
        gap: 16px;
        margin-top: 20px;
        align-items: center;
    }

    .footer-social-real a {
        background: none !important;
        width: auto;
        height: auto;
        padding: 0;
        border-radius: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .footer-social-real img {
        width: 40px;
        height: 40px;
        transition: opacity 0.2s ease;
    }

    @media (min-width: 992px) {
        .footer-social-real {
            justify-content: flex-end;
        }
    }
    
    /* Mobile center */
    @media (max-width: 768px) {
        .footer-social-real {
            justify-content: center;
        }
    }
/* ===============================
   FOOTER BOTTOM BAR
================================ */

    .footer-bottom {
        background: #58acb1;
        padding: 16px 0;
        text-align: center;
        font-size: 13px;
        color: #cfdcec;
        margin-top: 30px;
    }
    
    .footer-icon {
        margin-right: 8px;
        color: red;  
        font-size: 16px;
    }


/* ===============================
   MOBILE
================================ */

    @media (max-width: 768px) {
        .main-footer {
            text-align: center;
            padding: 50px 20px 0;
        }
    
        .footer-logo {
            margin-left: auto;
            margin-right: auto;
        }
    
        .footer-desc {
            margin: auto;
        }
    
        .footer-title::after {
            margin-left: auto;
            margin-right: auto;
        }
    
        .footer-social-real {
            justify-content: center;
        }
    
        .footer-social-real a:hover img {
            opacity: 0.75;
        }
    }

/* ===============================
   BRAND COLUMN (LOGO + SOCIAL)
================================ */

    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: flex-end; 
        justify-content: center;
    }
    
    /* Logo */
    .footer-logo {
        max-width: 200px;
        margin-bottom: 18px;
    }

/* ===============================
   MOBILE FIX
================================ */

    @media (max-width: 991px) {
        .footer-brand {
            align-items: center; 
            text-align: center;
            margin-top: 30px;
        }
    }

/* ================= WHATSAPP FLOAT ================= */

    .whatsapp-float {
        position: fixed;
        width: 64px; 
        height: 64px;
        bottom: 22px;
        left: 22px;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    
    .whatsapp-float img {
        width: 58px; 
        height: 58px;
    }
    
    @media (max-width: 767px) {
        .whatsapp-float {
            width: 60px;
            height: 60px;
            bottom: 18px;
            left: 18px; 
        }
    
        .whatsapp-float img {
            width: 56px;
            height: 56px;
        }
    }