/* --- DUAL THEME VARIABLES --- */
        :root {
            /* Default Theme (Dark Brown) */
            --bg-main: #574233; 
            --bg-card: #685242; 
            --primary-accent: #D0C3B4; 
            --button-accent: #885E48; 
            --text-light: #ffffff; 
            --nav-text-color: #D0C3B4; 
            
            /* Colorful Icons */
            --icon-blue: #2d88ff;
            --icon-green: #25d366;
            --icon-red: #ea4335;
            --icon-orange: #fbbc04;
            --icon-purple: #833ab4;
        }

        /* Toggled Theme (Beige) */
        [data-theme="yellow"] {
            --bg-main: #D0C3B4; 
            --bg-card: #BFB0A0; 
            --primary-accent: #574233; 
            --button-accent: #885E48; 
            --text-light: #1a1e33; 
            --nav-text-color: #D0C3B4; 
        }

        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; }
        body { background-color: var(--bg-main); color: var(--text-light); transition: background-color 0.3s, color 0.3s; overflow-x: hidden; }

        /* --- WHITE TO BLACK TOP NAVIGATION BAR --- */
        .new-top-nav {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            background-color: #000000; 
            height: 60px;
            width: 100%;
            border-bottom: 2px solid #333;
        }
        .nav-left-brand {
            background-color: #000000; 
            display: flex;
            align-items: center;
            padding: 0 20px;
            gap: 15px;
            text-decoration: none;
            min-width: 250px;
        }
        .nav-left-brand img {
            height: 45px;
            border-radius: 4px;
            background-color: #fff;
            padding: 2px;
        }
        
        /* MULTI-COLOR AUTOMATIC ANIMATION REVERSED (LEFT TO RIGHT) */
        .nav-left-brand span {
            font-size: 28px; 
            font-weight: 800;
            letter-spacing: 0.5px;
            white-space: nowrap; 
            background: linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0000ff, #8000ff, #ff00ff, #ff0000);
            background-size: 400% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: colorCycle 6s linear infinite;
        }
        @keyframes colorCycle {
            0% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .nav-center-links {
            display: flex;
            align-items: center;
            gap: 20px; 
            flex-grow: 1;
            justify-content: center;
            flex-wrap: wrap; 
        }
        .nav-center-links a {
            text-decoration: none;
            color: #ffffff; 
            font-weight: 700;
            font-size: 13px; 
            text-transform: uppercase;
            transition: color 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }
        .nav-center-links a:hover, .nav-center-links a.active {
            color: #d32f2f;
        }
        
        /* LOGIN NAVIGATION AREA */
        .nav-right-logins {
            display: flex;
            align-items: stretch;
        }
        .nav-login-btn {
            display: flex;
            align-items: center;
            padding: 0 15px;
            cursor: pointer;
            color: #ffffff;
            text-decoration: none;
            font-weight: 700;
            font-size: 12px;
            text-transform: uppercase;
            gap: 6px;
            transition: opacity 0.2s;
        }
        .nav-login-btn:hover { opacity: 0.8; }
        .bg-client { background-color: #d32f2f; }
        .bg-franchise { background-color: #fbbc04; color: #000; }

        @media (max-width: 1024px) {
            .new-top-nav { flex-direction: column; height: auto; }
            .nav-left-brand { justify-content: center; padding: 15px; }
            .nav-center-links { flex-wrap: wrap; padding: 15px; gap: 15px; }
            .nav-right-logins { justify-content: center; flex-wrap: wrap; }
            .nav-login-btn { padding: 15px; }
        }

        /* --- RUNNING AD (MARQUEE) --- */
        .top-running-ad { 
            background: var(--button-accent); 
            color: white; 
            padding: 6px 15px; 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
            gap: 15px; 
            border-bottom: 1px solid var(--primary-accent);
        }
        .top-running-ad marquee { 
            flex-grow: 1; 
            font-weight: bold; 
            font-size: 14px; 
        }
        .top-running-ad .datetime { 
            font-size: 13px; 
            font-weight: bold; 
            white-space: nowrap; 
            background-color: #000000; 
            color: #D0C3B4; 
            padding: 4px 12px;
            border-radius: 5px;
        }

        /* --- SOCIAL BAR --- */
        .top-social-bar {
            background-color: #171412; 
            padding: 8px 20px; 
            display: flex;
            align-items: center;
            justify-content: space-between; 
            flex-wrap: nowrap; 
            overflow-x: auto; 
            width: 100%;
            border-bottom: 2px solid var(--primary-accent);
        }
        .top-social-bar::-webkit-scrollbar { display: none; }
        
        .social-left, .social-right { display: flex; align-items: center; gap: 8px; }
        .social-center { display: flex; align-items: center; gap: 10px; justify-content: center; flex-grow: 1; }
        
        .icon-btn { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #fff; font-size: 10px; gap: 3px; font-weight: bold; }
        .icon-circle { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: white; transition: transform 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.2); }
        .icon-circle:hover { transform: scale(1.1); }

        .bg-blue { background-color: var(--icon-blue); }
        .bg-whatsapp { background-color: var(--icon-green); }
        .bg-red { background-color: var(--icon-red); }
        .bg-orange { background-color: var(--icon-orange); }
        .bg-purple { background-color: var(--icon-purple); }
        .bg-fb { background-color: #1877F2; }
        .bg-yt { background-color: #FF0000; }
        .bg-insta { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
        .bg-x { background-color: #000; border: 1px solid #444; }
        .bg-telegram { background-color: #0088cc; }
        .bg-g { background-color: #34A853; }

        .top-rect-btn { background-color: var(--bg-main); border: 1px solid var(--primary-accent); color: white; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: bold; display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; transition: 0.3s;}
        .top-rect-btn:hover { background-color: var(--button-accent); border-color: var(--button-accent); }
        
        .google-reviews { background-color: #171412; border: 1px solid #444; color: white; padding: 6px 12px; border-radius: 6px; display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: bold; white-space: nowrap; }
        .google-reviews span:nth-child(1) { color: #4285F4; } 
        .google-reviews span:nth-child(2) { color: #EA4335; } 
        .google-reviews span:nth-child(3) { color: #FBBC05; } 
        .google-reviews span:nth-child(4) { color: #4285F4; } 
        .google-reviews span:nth-child(5) { color: #34A853; } 
        .google-reviews span:nth-child(6) { color: #EA4335; } 
        .stars { color: #fbbc04; letter-spacing: 1px; }

        .theme-btn { background: var(--primary-accent); color: var(--bg-main); border: none; padding: 8px 18px; border-radius: 20px; cursor: pointer; font-weight: bold; transition: 0.3s; font-size: 14px; white-space: nowrap;}
        .theme-btn:hover { background: var(--text-light); color: var(--bg-main); }

        /* --- DEEP LOCATION FILTERS --- */
        .location-filters { background-color: var(--bg-card); padding: 15px 20px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; border-bottom: 1px solid var(--primary-accent); margin-bottom: 20px; }
        .location-filters select { background-color: var(--bg-main); color: var(--text-light); border: 1px solid var(--primary-accent); padding: 10px; border-radius: 5px; outline: none; flex: 1; min-width: 130px; font-size: 14px; font-weight: bold; }

        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px 20px 20px; }
        .section-title { color: var(--primary-accent); font-size: 22px; margin-bottom: 15px; border-left: 4px solid var(--primary-accent); padding-left: 10px; }

        /* --- SEARCH BOX --- */
        .search-hero { text-align: center; margin-bottom: 40px; }
        .search-hero h2 { font-size: 32px; color: var(--text-light); font-weight: bold; }
        .search-hero .location-tag { color: var(--primary-accent); font-size: 16px; font-weight: bold; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 8px;}
        
        .custom-search-wrapper { display: flex; align-items: center; background-color: var(--bg-card); border: 2px solid var(--primary-accent); border-radius: 50px; max-width: 800px; margin: 0 auto; padding: 5px; }
        .custom-search-input { flex-grow: 1; background: transparent; border: none; color: var(--text-light); font-size: 18px; padding: 15px 25px; outline: none; }
        .custom-search-input::placeholder { color: #aaa; }
        
        .custom-mic-container { background-color: #000000; padding: 8px 12px; border-radius: 4px; margin-right: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
        .custom-mic-container:hover { transform: scale(1.05); }
        .custom-mic { color: red !important; font-size: 20px; }
        
        .custom-search-btn { background-color: var(--primary-accent); color: var(--bg-main); border: none; border-radius: 40px; padding: 15px 35px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.3s; }
        .custom-search-btn:hover { background-color: var(--button-accent); color: white; }

        /* --- CATEGORIES & PROVIDERS --- */
        .category-container { max-height: 250px; overflow-y: auto; background: var(--bg-card); padding: 15px; border-radius: 10px; border: 1px solid var(--primary-accent); display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
        .category-container::-webkit-scrollbar { width: 6px; }
        .category-container::-webkit-scrollbar-thumb { background: var(--primary-accent); border-radius: 10px; }
        
        .cat-chip { background: var(--bg-main); color: var(--text-light); border: 1px solid var(--primary-accent); padding: 8px 16px; border-radius: 20px; text-decoration: none; font-size: 14px; transition: 0.3s; cursor: pointer; display: inline-block; font-weight: 500;}
        .cat-chip:hover { background: var(--primary-accent); color: var(--bg-main); }

        .provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
        .provider-card { background: var(--bg-card); border: 1px solid var(--primary-accent); border-radius: 10px; padding: 20px; position: relative; overflow: hidden; transition: 0.3s; display: flex; flex-direction: column; }
        .provider-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

        .provider-header { display: flex; align-items: center; margin-bottom: 15px; }
        .provider-img { width: 70px; height: 70px; border-radius: 50%; border: 3px solid var(--primary-accent); object-fit: cover; margin-right: 15px; }
        .provider-info h3 { font-size: 18px; color: var(--primary-accent); margin: 0 0 5px 0; }
        .provider-info .category { font-size: 13px; color: var(--text-light); margin-bottom: 5px; text-transform: uppercase; opacity: 0.8;}
        .rating { color: #fbbc04; font-size: 14px; }
        
        .contact-box { background: var(--bg-main); border: 1px dashed var(--primary-accent); text-align: center; padding: 10px; border-radius: 5px; margin-bottom: 15px; font-size: 18px; font-weight: bold; color: var(--text-light); }
        .call-btn { background: var(--button-accent); color: white; text-align: center; padding: 12px; border-radius: 5px; text-decoration: none; font-weight: bold; display: block; transition: 0.3s;}
        .call-btn:hover { opacity: 0.8; }

        /* --- NEW PAGES STYLING --- */
        .page-section { display: none; padding: 40px 20px; text-align: center; background: var(--bg-card); border: 1px solid var(--primary-accent); border-radius: 10px; margin-bottom: 40px;}
        .page-section.active { display: block; }
        .page-section h2 { color: var(--primary-accent); margin-bottom: 20px; font-size: 28px;}
        .page-section p { font-size: 16px; line-height: 1.6; margin-bottom: 20px; }
        
        /* Pricing Cards */
        .pricing-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 30px;}
        .pricing-card { background: var(--bg-main); border: 2px solid var(--primary-accent); padding: 30px 20px; border-radius: 10px; width: 300px;}
        .pricing-card h3 { color: var(--primary-accent); font-size: 24px; margin-bottom: 10px;}
        .pricing-card .price { font-size: 32px; font-weight: bold; margin-bottom: 20px; color: var(--text-light);}
        .pricing-card button { background: var(--button-accent); color: white; border: none; padding: 10px 20px; border-radius: 5px; font-weight: bold; width: 100%; cursor: pointer;}
        
        /* Forms */
        .custom-form { max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
        .custom-form input { padding: 12px; border-radius: 5px; border: 1px solid var(--primary-accent); background: var(--bg-main); color: var(--text-light); font-size: 16px;}
        .custom-form button { padding: 15px; background: var(--button-accent); color: white; border: none; border-radius: 5px; font-size: 16px; font-weight: bold; cursor: pointer;}
        
        .hero-heading-row { position: relative; display: flex; justify-content: center; align-items: center; margin-bottom: 15px; width: 100%; min-height: 45px; }
        .register-service-btn { position: absolute; right: 0; background: linear-gradient(45deg, #8A2387, #E94057, #F27121); color: white !important; text-decoration: none; padding: 10px 20px; border-radius: 25px; font-size: 15px; font-weight: bold; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: transform 0.2s; }
        .register-service-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.4); }
        @media (max-width: 768px) { .hero-heading-row { flex-direction: column; gap: 15px; } .register-service-btn { position: static; } }
		
		/* =========================================
   PROVIDER GRID & PROFILE CARDS
========================================= */

/* The main container holding all profiles */
.provider-grid {
    display: grid;
    /* This creates a responsive grid that automatically adjusts columns based on screen width */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

/* Individual Profile Card */
.profile_box {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect to make the card "lift" up */
.profile_box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* Provider Image */
.profile_box img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f4f4f4;
    flex-shrink: 0; /* Prevents image from squishing */
}

/* Wrapper for text content */
.profile_box > div {
    flex: 1;
}

/* Typography */
.profile_name {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
    line-height: 1.2;
}

.profile_category {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 6px;
    font-weight: 500;
}

.profile_rating {
    font-size: 14px;
    color: #f39c12; /* Gold color for stars */
    margin-bottom: 12px;
    letter-spacing: 2px;
}

/* Call & WhatsApp Buttons Container */
.profile_btn_holder {
    display: flex;
    gap: 12px;
}

/* Individual Buttons */
.profile_btn_holder a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.profile_btn_holder a:hover {
    opacity: 0.85;
    transform: scale(1.05);
}

/* Target the Phone link by looking at the href attribute */
.profile_btn_holder a[href^="tel:"] {
    background-color: #3498db; /* Blue */
    box-shadow: 0 4px 6px rgba(52, 152, 219, 0.3);
}

/* Target the WhatsApp link by looking at the href attribute */
.profile_btn_holder a[href*="whatsapp"] {
    background-color: #25d366; /* WhatsApp Green */
    box-shadow: 0 4px 6px rgba(37, 211, 102, 0.3);
}

/* "No Data" Alert Box */
.alert.danger {
    background-color: #fdf3f2;
    color: #e74c3c;
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid #fadbd8;
    text-align: center;
    font-weight: 500;
    grid-column: 1 / -1; /* Forces the alert to span the whole grid width */
}

/* Basic fade-in animation for scroll */
.animation_onscroll {
    animation: fadeUp 0.6s ease-out forwards;
}

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