<!--
========================================================
EASY EDIT — CHANGE ONLY THE VALUES BELOW
========================================================

HOW TO EDIT THIS FILE
1. Right-click index.html -> Open with -> Notepad.
2. Change only the text after each "Label:" below.
3. Save the file, then double-click it to open it in your browser.

RULES
- Never change the words before the colon (Title:, Price:, ...).
- Text can continue on the next line: START that line with a space.
- A completely empty line inside a text makes a blank line on the page.
- To hide something, leave its value empty.
- To add a service / FAQ / review / why-item, copy a whole block
  and change the values.
- Images use a web link (https://...). You can paste any image link,
  or a Google Drive / Dropbox share link.

========================================================
CONTENT (browser tab + sidebar)
========================================================

Meta Description: Village Level Entrepreneur offering Aadhaar, PAN, certificates, government schemes and bill payments at your local CSC centre.

Title: Ajay Patil | CSC Digital Seva Centre
Display Name: Ajay Patil
Business Name: VP Online and Jan Seva Kendra
Description: offer multiple services Village Level Entrepreneur offering Aadhaar, PAN, certificates, government schemes and bill payments at your local CSC centre offer multiple services Village Level Entrepreneur offering Aadhaar, PAN, certificates, government schemes and bill payments at your local CSC centre.
Profile Picture URL: https://i.8upload.com/image/39f594b6ed87884b/823yqe3paswncciei3vsjz.png

Call Link: tel:+917028420050
WhatsApp Link: https://wa.me/917028420050
Instagram Link: https://instagram.com/
Facebook Link: https://facebook.com/
Email Link: mailto:hello@example.com
Maps Link: https://www.google.com/maps

========================================================
SIDEBAR TRUST / SERVICE INFO
========================================================

Client Rating: 4.8 / 5
Client Reviews: 130+ reviews

Leave Client Rating empty to hide the rating.
Leave Client Reviews empty to hide the reviews.
Leave both empty to hide the entire section.

========================================================
WHY CHOOSE US (the dark panel below the services)
========================================================

Why Title: Why Choose Us
Why Subtitle: Trusted digital services, right in your neighbourhood

Why Item 1
Title: Authorized CSC Centre
Text: Every application goes through the official Digital Seva portal.

Why Item 2
Title: Same-Day Processing
Text: Most applications are filed and confirmed the same day.

Why Item 3
Title: Transparent Pricing
Text: Clear, printed charges on every slip.

Delete a whole "Why Item" block to remove it.
Delete all Why Items to hide the whole section.

========================================================
REVIEWS (customer feedback cards)
========================================================

Reviews Title: Reviews & feedback
Reviews Subtitle: What customers say about this centre

Review 1
Author: Priya Sharma
Text: Got my Aadhaar address update done here in one visit. The biometric step was quick and they explained every document I needed.
Rating: 5
Date: 2026-08-14
Service: Aadhaar Update Service

Review 2
Author: Amit Verma
Text: Applied for my new PAN card on a Tuesday and the e-KYC finished the same evening. Honest pricing and no repeated trips.
Rating: 5
Date: 2026-07-22
Service: New PAN Card (Form 49A)

Review 3
Author: Sunita Devi
Text: The income certificate was tracked online and delivered before the deadline. Friendly staff, I will come back for bill payments.
Rating: 4
Date: 2026-09-05
Service: Income, Caste & Domicile Certificate

Review 4
Author: Amit Verma
Text: Applied for my new PAN card on a Tuesday and the e-KYC finished the same evening. Honest pricing and no repeated trips.
Rating: 5
Date: 2026-07-22
Service: New PAN Card (Form 49A)

Review 5
Author: Sunita Devi
Text: The income certificate was tracked online and delivered before the deadline. Friendly staff, I will come back for bill payments.
Rating: 4
Date: 2026-09-05
Service: Income, Caste & Domicile Certificate

The rating value is a number from 1 to 5 (leave it empty for no rating).
The date value is written as year-month-day (leave empty to hide it).
The service value is a small tag shown under the name (leave empty to hide it).
Delete all Review blocks to hide the whole section.

========================================================
FAQ (questions and answers)
========================================================

FAQ Title: Frequently asked questions
FAQ Subtitle:

Question 1: What documents do I need for an Aadhaar update?
Answer:
  Bring your original Aadhaar card and a valid proof of identity or address — a PAN card, passport, ration card or latest electricity bill all work.
  Mobile number updates also need an OTP from your currently linked number; if no mobile is linked, we update it with biometric authentication.

Question 2: How long does a new PAN card take?
Answer:
  The e-PAN is usually generated within 1–3 days after e-KYC, and the physical card reaches your address in about 15–20 working days.
  You get the acknowledgement slip the same day you apply.

Delete a whole "Question" block to remove it.
Delete all Question blocks to hide the whole section.

========================================================
CATEGORIES / TABS (buttons above the services)
========================================================

Categories:
1. Government & ID Services
2. Certificates & Documents
3. Banking & Payments
4. Schemes & Insurance
5. Financial & Loan
6. Legal Serives

The first tab should be All so visitors can see every service.

========================================================
SERVICES
========================================================

Service 1
Category: Government & ID Services
Title: Aadhaar Update Service
Price: ₹50
Popular: no
Link: #
Service Image URL: https://i.8upload.com/image/39f594b6ed87884b/823yqe3paswncciei3vsjz.png
Details:
  Bring your existing Aadhaar and a valid proof of identity or address. We capture your biometrics, submit the change through the official UIDAI portal and hand you an acknowledgement slip the same day.
  Mobile number updates need an OTP from your existing linked number. If no mobile is linked, the update is done with biometric authentication.
Processing Time: Same-day print; update in 7–10 days
Documents:
  Original Aadhaar card
  Proof of identity (PAN, Passport, Voter ID, Driving Licence)
  Proof of address (utility bill, ration card, bank statement)
  Mobile number linked to Aadhaar

Service 2
Category: Government & ID Services
Title: New PAN Card (Form 49A)
Price: ₹107
Popular: no
Link: #
Service Image URL: https://placehold.co/900x520/png?text=PAN+Card
Details: Apply for a new Permanent Account Number through the PAN service centre at our desk. Aadhaar e-KYC keeps it paperless — you leave with an acknowledgement, receive the e-PAN PDF within days, and the physical card is posted to your address.
Processing Time: e-PAN in 1–3 days; card in 15–20 days
Documents:
  Aadhaar card (original)
  Passport-size photograph
  Date of birth proof (Aadhaar, birth certificate or 10th marksheet)
  Mobile number linked to Aadhaar

	
SERVICE IMAGE
Service Image URL is optional.
If a URL is present, the image appears on that service card and in its
details window. If the field is blank, no image is shown.

DETAILS
Service Details is shown on the card under the service name
(maximum 2 lines) and in full inside the details window.

PRICE
Write the price exactly as it should appear: ₹107, FREE, ₹50 only, etc.

POPULAR
Set the popular value to yes to add the blue "Popular" badge, no to hide it.

LINK
The link opens from the "Apply online" button inside the details window.
Leave "#" or empty if there is no online form.

HOW TO ADD A SERVICE
Copy one complete Service block (from "Service 1" to the last line
before the next block) and change the values.

HOW TO REMOVE A SERVICE
Delete the whole Service block.

HOW TO CHANGE COLORS
See the MAIN COLORS and OTHER CUSTOM COLORS sections below.

========================================================
MAIN COLORS
========================================================

Sidebar Background: #2c5363
Right Section Background: #f8f6f9
Service Card Background: #ffffff
Active Tab Background: auto
Service Card Arrow Background: auto

========================================================
OTHER CUSTOM COLORS
========================================================

Sidebar Primary Text: #ffffff
Sidebar Secondary Text: #f5f5f5
Sidebar Muted Text: #a9a9a9

Social Icon Color: #f5f5f5
Social Button Background: auto
Social Button Border: rgba(255,255,255,.14)
Social Button Hover Background: rgba(255,255,255,.14)
Social Button Hover Border: rgba(255,255,255,.22)

Tab Inactive Background: transparent
Tab Border Color: #222222
Tab Active Border Color: auto
Tab Inactive Text Color: #666666
Tab Active Text Color: #ffffff
Tab Hover Background: #e8e6df

Service Card Border: #e5e5e5
Service Card Divider: #dddddd
Service Card Primary Color: #111111
Service Card Secondary Color: #666666
Service Card Price Color: #111111
Service Card Arrow Icon Color: #ffffff
Service Card Hover Background: #ffffff
Service Card Hover Border: #cccccc

Popular Badge Background: #eaf2ff
Popular Badge Text: #3769c8

Visual Card Background: #ffffff
Visual Shape 1 Color: #ff7721
Visual Shape 2 Color: #b60025
Visual Shape 3 Color: #ef1a2b

Project Tile Background: #111111

Use "auto" for Active Tab Background, Active Tab Border Color,
Service Card Arrow Background, or Social Button Background when
you want that element to automatically follow the Sidebar Background.

Leave a social link empty to hide that social icon.

========================================================
END EASY EDIT
======================================================== -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" id="metaDescription" content="">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<title id="pageTitle">Ramesh Verma | CSC Digital Seva Centre</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#f0eee6;color:#111}
body{overflow:hidden}
.site-shell{display:flex;flex-direction:column}
.page{
  --page-bg:#f0eee6;
  --sidebar-bg:#202020;
  --sidebar-primary:#ffffff;
  --sidebar-secondary:#f5f5f5;
  --sidebar-muted:#a9a9a9;

  --social-icon:#f5f5f5;
  --social-bg:rgba(255,255,255,.08);
  --social-border:rgba(255,255,255,.14);
  --social-hover-bg:rgba(255,255,255,.14);
  --social-hover-border:rgba(255,255,255,.22);

  --main-bg:#f0eee6;

  --tab-bg:transparent;
  --tab-active-bg:var(--sidebar-bg);
  --tab-border:#222222;
  --tab-active-border:var(--sidebar-bg);
  --tab-inactive-text:#666666;
  --tab-active-text:#ffffff;
  --tab-hover-bg:#e8e6df;

  --card-bg:#ffffff;
  --card-border:#e5e5e5;
  --card-divider:#dddddd;
  --card-primary:#111111;
  --card-secondary:#666666;
  --card-price:#111111;
  --card-arrow-bg:var(--sidebar-bg);
  --card-arrow-icon:#ffffff;
  --card-hover-bg:#ffffff;
  --card-hover-border:#cccccc;

  --popular-bg:#eaf2ff;
  --popular-text:#3769c8;

  --visual-bg:#ffffff;
  --visual-shape-1:#ff7721;
  --visual-shape-2:#b60025;
  --visual-shape-3:#ef1a2b;
  --project-bg:#111111;

  flex:1;min-height:0;height:100vh;display:flex;overflow:hidden
}
.sidebar{
  width:440px;height:100vh;min-height:0;background:#202020;color:#fff;
  padding:38px 36px 60px;display:flex;flex-direction:column;
  position:relative;flex-shrink:0;overflow-y:auto
}
.profile{width:132px;height:132px;border-radius:50%;object-fit:cover;object-position:center;display:block;aspect-ratio:1/1;flex-shrink:0}
.name{font-size:28px;line-height:1.1;font-weight:700;margin:27px 0 15px;letter-spacing:-1.1px}
.business-name{font-size:18px;line-height:1.3;font-weight:600;color:#fff;margin-bottom:10px}
.bio{font-size:18px;line-height:1.5;font-weight:500;max-width:410px;margin:0;color:#f5f5f5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;max-height:108px}

.social-links{display:flex;align-items:center;gap:10px;margin-top:28px;flex-wrap:wrap}
.social-links a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#f5f5f5;border:1px solid #444;background:#292929;text-decoration:none;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.social-links a:hover{background:#363636;border-color:#666;transform:translateY(-1px)}
.social-links i{font-size:17px;line-height:1}
.main{flex:1;min-width:0;height:100vh;overflow-y:auto;overflow-x:hidden;padding:22px 60px 60px;background:#f0eee6}
.filters{display:flex;gap:14px;flex-wrap:wrap;margin:0 auto 50px;max-width:1110px}
.filter{height:48px;padding:0 25px;border:1.5px solid #222;border-radius:14px;background:transparent;font-size:16px;color:#111;white-space:nowrap;cursor:pointer}
.filter.active{background:#000;color:#fff;border-color:#000;font-weight:600}
.grid{width:100%;max-width:1110px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.card{
  background:#fff;border-radius:16px;overflow:hidden;min-height:205px;
  box-shadow:0 14px 30px rgba(0,0,0,.05);display:flex;flex-direction:column;cursor:pointer
}
.card-top{padding:25px 27px 22px;flex:1}
.meta{font-size:14px;color:#666;margin-top:9px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.title{font-size:18px;line-height:1.2;font-weight:800;letter-spacing:-.3px}
.card-bottom{height:68px;border-top:1px solid #ddd;display:flex;align-items:center;justify-content:space-between;padding:0 27px}
.price{font-size:14px;font-weight:800}
.arrow{width:30px;height:30px;border-radius:50%;background:#050505;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:400;line-height:1}
.popular{font-size:12px;color:#3769c8;background:#eaf2ff;border-radius:20px;padding:8px 12px;margin-left:auto;margin-right:13px;font-weight:600}

/* Desktop service-card refinements */
@media(min-width:821px){
  .filters{margin-bottom:42px;}
  .filter{height:48px;font-size:15px;padding:0 23px;}
  .card-top{padding:23px 25px 20px;}
  .meta{font-size:13px;}
  .title{font-size:18px;}
  .card-bottom{height:64px;padding:0 25px;}
  .price{font-size:14px;}
  .popular{font-size:11px;padding:7px 10px;}
 .arrow{width:32px;height:32px;}
 .arrow i{font-size:13px;}
}

@media(max-width:1250px){
 .sidebar{width:360px;padding-left:30px;padding-right:30px}
 .main{padding-left:28px;padding-right:28px}
 .grid{grid-template-columns:1fr;gap:20px}
 .service-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@media(max-width:1100px){
 .sidebar{width:350px;padding:32px 28px}
 .main{padding-left:28px;padding-right:28px}
 .bio{font-size:17px}
 .name{font-size:30px}
 .grid{gap:20px}
 .service-columns{gap:20px}
 .service-column{gap:20px}
 .filter{padding:0 21px}
}
@media(max-width:820px){
 .page{height:auto;min-height:100vh;display:block;overflow:visible}
 .site-shell{height:auto;min-height:100vh}
 .sidebar{width:100%;height:auto;min-height:auto;padding:30px 24px 25px}
 .avatar{width:96px;height:96px;flex-basis:96px}
 .profile{width:100%;height:100%}
 .name{margin-top:18px;font-size:27px}
 .business-name{font-size:17px;margin-bottom:10px}
 .social-links{margin-top:16px;gap:8px}
 .social-links a{width:36px;height:36px}
 .social-links i{font-size:16px}
 .bio{max-width:650px;font-size:16px}
 .main{height:auto;min-height:0;overflow:visible;padding:22px 18px 40px}
 .filters{gap:10px;margin-bottom:28px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}
 .filter{height:54px;font-size:16px;padding:0 20px;border-radius:13px}
 .grid{grid-template-columns:1fr;gap:16px}
 .service-columns{grid-template-columns:1fr;gap:16px}
 .service-column{gap:16px}
 .card{min-height:190px;border-radius:14px}
 .card-top{padding:23px 23px 20px}
 .meta{font-size:15px}
 .title{font-size:20px}
 .card-bottom{height:70px;padding:0 23px}
}
@media(max-width:480px){
 .sidebar{padding:22px 18px 22px}
 .avatar{width:88px;height:88px;flex-basis:88px}
 .profile{width:100%;height:100%}
 .name{font-size:30px}
 .bio{font-size:15.5px;line-height:1.48}
 .main{height:auto;min-height:0;overflow:visible;padding:18px 12px 30px}
 .filter{font-size:15px;padding:0 17px;height:50px}
 .card{border-radius:12px}
 .title{font-size:20px}
 .arrow{width:30px;height:30px}
}

.icon-outline-phone{
  color:transparent !important;
  -webkit-text-stroke:1.35px #f5f5f5;
  font-size:18px !important;
}
.icon-outline-facebook{
  color:transparent !important;
  -webkit-text-stroke:1.15px #f5f5f5;
  font-size:18px !important;
}
.icon-outline-map{
  color:transparent !important;
  -webkit-text-stroke:1.2px #f5f5f5;
  font-size:18px !important;
}

.social-links .icon-outline-phone,
.social-links .icon-outline-facebook,
.social-links .icon-outline-map{
  font-size:15px !important;
}

.avatar{
  width:132px;
  height:132px;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 132px;
  background:#303030;
}
.avatar .profile{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

@media(max-width:820px){
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
  .page{height:auto;min-height:100vh;display:block;overflow:visible}
  .sidebar{height:auto;min-height:auto}
  .main{height:auto;min-height:0;overflow:visible}
  .avatar{width:96px;height:96px;flex-basis:96px}
  .profile{width:100%;height:100%}
}

/* EASY EDIT COLOR MAP — visual layout remains unchanged. */
html,body{background:var(--page-bg);color:var(--card-primary)}
.sidebar{background:var(--sidebar-bg) !important;color:var(--sidebar-primary)}
.name{color:var(--sidebar-primary)}
.business-name{color:var(--sidebar-primary)}
.bio{color:var(--sidebar-secondary)}

.social-links a{
  color:var(--social-icon) !important;
  background:var(--social-bg) !important;
  border-color:var(--social-border) !important;
}
.social-links a:hover{
  background:var(--social-hover-bg) !important;
  border-color:var(--social-hover-border) !important;
}
.main{background:var(--main-bg) !important}

.filters .filter{
  background:var(--tab-bg);
  color:var(--tab-inactive-text);
  border-color:var(--tab-border);
}
.filters .filter:hover{background:var(--tab-hover-bg)}
.filters .filter.active{
  background:var(--tab-active-bg) !important;
  color:var(--tab-active-text) !important;
  border-color:var(--tab-active-border) !important;
}

.grid .card{
  background:var(--card-bg);
  border-color:var(--card-border);
  transition:background .18s ease,border-color .18s ease;
}
.grid .card:hover{
  background:var(--card-hover-bg);
  border-color:var(--card-hover-border);
}
.grid .card .card-bottom{border-top-color:var(--card-divider)}
.grid .service-card .meta{color:var(--card-secondary)}
.grid .service-card .title{color:var(--card-primary)}
.grid .service-card .price{color:var(--card-price)}
.grid .service-card .arrow{
  background:var(--card-arrow-bg) !important;
  color:var(--card-arrow-icon) !important;
}
.grid .service-card .popular{
  background:var(--popular-bg);
  color:var(--popular-text);
}
.grid .visual-card{background:var(--visual-bg)}
.grid .visual-shape1{background:linear-gradient(135deg,var(--visual-shape-1),#ffb016)}
.grid .visual-shape2{background:linear-gradient(135deg,var(--visual-shape-2),#f01b27)}
.grid .visual-shape3{background:linear-gradient(135deg,var(--visual-shape-3),#9e0022)}

@media(max-width:820px){
  html,body{
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }
}

@media(max-width:820px){
  .filters{
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .filters::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
  }
}

.grid .service-card{
  align-self:initial;
  height:auto;
}
.service-columns{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  align-items:start;
}
.service-column{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:stretch;
}
.service-column .service-card{
  width:100%;
}

@media(max-width:820px){
  .service-columns{
    grid-template-columns:1fr;
  }
}

.service-image-wrap{
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  flex:0 0 auto;
  background:#f2f2f2;
}
.service-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

@media(min-width:821px){
  .site-shell{height:100vh;overflow:hidden}
  .site-shell > .page{flex:1;height:auto;min-height:0}
  .site-shell .sidebar,.site-shell .main{height:100%}
  .sidebar{padding-bottom:18px}
}

/* --------------------------------------------------------- why choose us */
.why{
  position:relative;
  display:none;
  width:100%;
  max-width:1110px;
  margin:48px auto 0;
  padding:34px 34px 30px;
  border-radius:18px;
  overflow:hidden;
  background:var(--card-arrow-bg);
  background-image:radial-gradient(130% 100% at 92% -15%,rgba(255,255,255,.1),rgba(255,255,255,0) 62%);
  box-shadow:0 14px 34px rgba(0,0,0,.1);
}
.why.visible{display:block}
.why-head{position:relative;margin-bottom:28px}
.why-head h2{margin:0;font-size:24px;letter-spacing:-.5px;color:var(--card-arrow-icon)}
.why-sub{margin:6px 0 0;font-size:14px;color:var(--sidebar-muted)}
.why-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:24px 0;
}
.why-card{
  position:relative;
  min-width:0;
  padding:2px 26px 4px;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease;
}
.why-card:first-child{padding-left:0}
.why-card:last-child{padding-right:0}
.why-card + .why-card{border-left:1px solid rgba(255,255,255,.16)}
.why-card:hover{transform:translateY(-3px)}
.why-num{
  font-size:46px;
  font-weight:800;
  letter-spacing:-2px;
  line-height:1;
  margin:0 0 14px;
  color:transparent;
  -webkit-text-stroke:1.5px var(--card-bg);
  opacity:.5;
  user-select:none;
  transition:color .2s ease;
}
.why-card:hover .why-num{color:color-mix(in srgb,var(--card-bg) 55%,transparent)}
.why-card-title{margin:0;font-size:16.5px;letter-spacing:-.2px;color:var(--card-arrow-icon)}
.why-card-text{margin:0;font-size:13.5px;line-height:1.6;color:var(--sidebar-muted)}

@media(max-width:820px){
  .why{margin-top:36px;padding:26px 20px 24px}
  .why-head h2{font-size:21px}
  .why-grid{grid-template-columns:1fr;gap:0}
  .why-card{padding:0 0 20px}
  .why-card:last-child{padding-bottom:0}
  .why-card + .why-card{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.16);
    padding-top:20px;
  }
  .why-num{font-size:38px;margin-bottom:10px}
}

/* --------------------------------------------------------- reviews & feedback */
.reviews{display:none;width:100%;max-width:1110px;margin:48px auto 0}
.reviews.visible{display:block}
.reviews-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.reviews-heading h2{margin:0;font-size:24px;letter-spacing:-.5px;color:var(--card-primary)}
.reviews-sub{margin:6px 0 0;font-size:14px;color:var(--card-secondary)}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:18px;
}
.review-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:20px 20px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.review-card:hover{
  border-color:var(--card-hover-border);
  box-shadow:0 10px 24px rgba(0,0,0,.05);
  transform:translateY(-2px);
}
.review-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.review-card-top time{font-size:12px;color:var(--card-secondary);white-space:nowrap}
.review-text{margin:0;flex:1;font-size:14.5px;line-height:1.6;color:var(--card-primary)}
.review-foot{
  display:flex;
  align-items:center;
  gap:10px;
  border-top:1px solid var(--card-divider);
  padding-top:12px;
  min-width:0;
}
.review-avatar{
  width:36px;
  height:36px;
  flex-shrink:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  background:var(--card-arrow-bg);
  color:var(--card-arrow-icon);
}
.review-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.review-author{font-size:14px;font-weight:700;color:var(--card-primary)}
.review-service{
  font-size:12px;
  color:var(--card-secondary);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.review-stars{font-size:12px;color:var(--popular-text);letter-spacing:1px}

@media(max-width:820px){
  .reviews{margin-top:36px}
  .reviews-heading h2{font-size:21px}
  .reviews-grid{grid-template-columns:1fr}
}

/* --------------------------------------------------------- faq accordion */
.faq{display:none;width:100%;max-width:1110px;margin:48px auto 0}
.faq.visible{display:block}
.faq-head{margin-bottom:20px}
.faq-head h2{margin:0;font-size:24px;letter-spacing:-.5px;color:var(--card-primary)}
.faq-sub{margin:6px 0 0;font-size:14px;color:var(--card-secondary)}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:0 20px;
  min-width:0;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.faq-item:hover{
  border-color:var(--card-hover-border);
  box-shadow:0 10px 24px rgba(0,0,0,.05);
}
.faq-item[open]{border-color:var(--card-hover-border)}
.faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:17px 0;
  cursor:pointer;
  list-style:none;
  font-size:15.5px;
  font-weight:700;
  letter-spacing:-.1px;
  color:var(--card-primary);
}
.faq-q::-webkit-details-marker{display:none}
.faq-q:focus-visible{outline:2px solid var(--card-primary);outline-offset:-2px}
.faq-q-text{min-width:0}
.faq-toggle{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  font-size:22px;
  line-height:1;
  font-weight:400;
  color:var(--card-primary);
  user-select:none;
}
.faq-toggle::before{content:"+"}
.faq-item[open] .faq-toggle::before{content:"\2212"}
.faq-answer{
  padding:0 0 18px;
  font-size:14.5px;
  line-height:1.65;
  color:color-mix(in srgb,var(--card-primary) 80%,var(--card-bg));
}
.faq-answer p{margin:0;white-space:pre-line}

@media(max-width:820px){
  .faq{margin-top:36px}
  .faq-head h2{font-size:21px}
  .faq-q{font-size:15px;padding:15px 0}
  .faq-answer{font-size:14px;padding-bottom:16px}
}

/* --------------------------------------------------------- client reviews + rating */
.sidebar-trust{
  margin-top:auto;
  padding-top:20px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
  align-items:center;
  width:100%;
}
.sidebar-trust.single{grid-template-columns:1fr}
.trust-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  min-width:0;
  width:100%;
}
.trust-item:first-child{padding-right:24px}
.trust-item:last-child{padding-left:24px}
.sidebar-trust.single .trust-item{padding-left:0;padding-right:0}
.trust-stat{
  color:var(--sidebar-primary);
  font-size:15px;
  line-height:1.15;
  font-weight:400;
  white-space:nowrap;
}
.trust-label{
  color:var(--sidebar-muted);
  font-size:13px;
  line-height:1.2;
  white-space:nowrap;
}
.trust-divider{
  width:1px;
  height:42px;
  background:rgba(255,255,255,.20);
  align-self:center;
}
.sidebar-trust.single .trust-divider{display:none}
@media(max-width:820px){
  .sidebar-trust{display:none}
}

/* ------------------------------------------------------------------ */
/* Service details drawer                                              */
/* ------------------------------------------------------------------ */

.service-drawer-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(15,15,15,.55);
  display:none;
  justify-content:flex-end;
  animation:drawer-fade .16s ease;
}
.service-drawer-overlay.visible{display:flex}
.service-drawer{
  display:flex;
  flex-direction:column;
  width:min(560px,100%);
  height:100%;
  background:var(--card-bg,#fff);
  color:var(--card-primary,#111);
  border-left:1px solid var(--card-border,#e5e5e5);
  box-shadow:-24px 0 70px rgba(0,0,0,.3);
  animation:drawer-in .22s ease;
}
.drawer-header{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 24px;
  border-bottom:1px solid var(--card-divider,#ddd);
}
.drawer-heading{flex:1;min-width:0}
.drawer-title{
  margin:0;
  font-size:19px;
  line-height:1.3;
  font-weight:700;
  letter-spacing:-.3px;
  color:var(--card-primary,#111);
  overflow-wrap:anywhere;
}
.drawer-close{
  flex-shrink:0;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--card-border,#e5e5e5);
  background:var(--card-bg,#fff);
  color:var(--card-secondary,#666);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.drawer-close:hover{
  background:var(--card-hover-bg,#fafafa);
  border-color:var(--card-hover-border,#ccc);
  color:var(--card-primary,#111);
}
@media(max-width:820px){
  .drawer-close{width:44px;height:44px}
}
.drawer-body{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:20px 24px 26px;
}
.drawer-body > :first-child{margin-top:0}
.drawer-image{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:center;
  border-radius:16px;
  background:#f2f2f2;
}
.drawer-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.drawer-fact{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:700;
  color:var(--card-price,#111);
  border:1px solid var(--card-border,#e5e5e5);
  border-radius:12px;
  padding:8px 12px;
}
.drawer-fact i{font-size:12px;color:var(--card-secondary,#666)}
.drawer-details{
  margin-top:15px;
  font-size:15px;
  line-height:1.65;
  color:var(--card-secondary,#666);
  white-space:pre-line;
}
.drawer-docs{margin-top:22px;border-top:1px solid var(--card-divider,#ddd);padding-top:16px}
.drawer-docs h3{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:var(--card-secondary,#666);
  margin:0 0 11px;
}
.doc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.doc-list li{display:flex;gap:10px;font-size:14px;line-height:1.45;color:var(--card-primary,#111)}
.doc-list li i{font-size:12px;margin-top:4px;color:var(--popular-text,#3769c8)}
.drawer-footer{
  flex-shrink:0;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:16px 24px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
}
.drawer-btn{
  flex:1 1 auto;
  min-width:130px;
  height:48px;
  padding:0 20px;
  border-radius:14px;
  border:1.5px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:14.5px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.drawer-btn:hover{transform:translateY(-1px)}
.drawer-btn.primary{background:var(--card-arrow-bg,#111);color:var(--card-arrow-icon,#fff)}
.drawer-btn.secondary{
  background:transparent;
  border-color:var(--card-border,#e5e5e5);
  color:var(--card-primary,#111);
}
.drawer-btn.secondary:hover{border-color:var(--card-hover-border,#ccc);background:var(--card-hover-bg,#fafafa)}
@keyframes drawer-fade{from{opacity:0}to{opacity:1}}
@keyframes drawer-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes drawer-up{from{transform:translateY(100%)}to{transform:none}}
@media(max-width:640px){
  .service-drawer-overlay{align-items:flex-end;justify-content:stretch}
  .service-drawer{
    width:100%;
    height:min(92vh,100%);
    border-left:0;
    border-top:1px solid var(--card-border,#e5e5e5);
    border-radius:20px 20px 0 0;
    animation:drawer-up .22s ease;
  }
  .drawer-header{padding:18px 18px 14px}
  .drawer-title{font-size:19px}
  .drawer-body{padding:16px 18px 20px}
  .drawer-footer{padding:14px 18px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .drawer-btn{min-width:0}
}
@media(prefers-reduced-motion:reduce){
  .service-drawer-overlay,.service-drawer{animation:none}
  .drawer-btn{transition:none}
}
</style>
</head>
<body>
<div class="site-shell">
  <div class="page">
  <aside class="sidebar">
    <div class="avatar">
      <img class="profile" id="profileImage"
           src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
           alt="">
    </div>
    <div class="name"></div>
    <div class="business-name"></div>
    <p class="bio"></p>

    <div class="social-links" aria-label="Contact and social links">
      <a href="#" aria-label="Call" title="Call"><i class="fa-solid fa-phone icon-outline-phone"></i></a>
      <a href="#" aria-label="WhatsApp" title="WhatsApp"><i class="fa-brands fa-whatsapp"></i></a>
      <a href="#" aria-label="Instagram" title="Instagram"><i class="fa-brands fa-instagram"></i></a>
      <a href="#" aria-label="Facebook" title="Facebook"><i class="fa-brands fa-facebook-f icon-outline-facebook"></i></a>
      <a href="#" aria-label="Email" title="Email"><i class="fa-regular fa-envelope"></i></a>
      <a href="#" aria-label="Maps" title="Maps"><i class="fa-solid fa-location-dot icon-outline-map"></i></a>
    </div>

    <section class="sidebar-trust" id="sidebarTrust" aria-label="Client reviews and rating">
      <div class="trust-item" id="trustReviewItem">
        <span class="trust-stat" id="trustReviews"></span>
        <span class="trust-label">Reviews</span>
      </div>
      <div class="trust-divider" id="trustDivider" aria-hidden="true"></div>
      <div class="trust-item" id="trustRatingItem">
        <span class="trust-stat" id="trustRating"></span>
        <span class="trust-label">Client Rating</span>
      </div>
    </section>

  </aside>

  <main class="main">
    <div class="filters"></div>
    <section class="grid"></section>

    <section class="why" id="whySection" aria-labelledby="why-title">
      <div class="why-head">
        <h2 id="why-title"></h2>
        <p class="why-sub" id="whySub"></p>
      </div>
      <div class="why-grid" id="whyGrid"></div>
    </section>

    <section class="reviews" id="reviewsSection" aria-labelledby="reviews-title">
      <div class="reviews-head">
        <div class="reviews-heading">
          <h2 id="reviews-title"></h2>
          <p class="reviews-sub" id="reviewsSub"></p>
        </div>
      </div>
      <div class="reviews-grid" id="reviewsGrid"></div>
    </section>

    <section class="faq" id="faqSection" aria-labelledby="faq-title">
      <div class="faq-head">
        <h2 id="faq-title"></h2>
        <p class="faq-sub" id="faqSub"></p>
      </div>
      <div class="faq-list" id="faqList"></div>
    </section>
  </main>
  </div>
</div>

<div class="service-drawer-overlay" id="drawerOverlay">
  <aside class="service-drawer" role="dialog" aria-modal="true" id="drawer">
    <header class="drawer-header">
      <div class="drawer-heading">
        <h2 class="drawer-title" id="drawerTitle"></h2>
      </div>
      <button type="button" class="drawer-close" id="drawerClose" aria-label="Close service details">
        <i class="fa-solid fa-xmark"></i>
      </button>
    </header>
    <div class="drawer-body" id="drawerBody"></div>
    <footer class="drawer-footer" id="drawerFooter"></footer>
  </aside>
</div>

<script>
(function () {
  "use strict";

  function getEasyEditText() {
    const walker = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT);
    while (walker.nextNode()) {
      const text = walker.currentNode.nodeValue || "";
      if (text.includes("EASY EDIT") && text.includes("END EASY EDIT")) return text;
    }
    return "";
  }

  const MULTI_LINE_FIELDS = new Set([
    "Description", "Meta Description", "Text", "Answer",
    "Details", "Documents", "Why Subtitle", "Reviews Subtitle", "FAQ Subtitle"
  ]);

  const SCALAR_LABELS = {
    "Meta Description": "metaDescription",
    "Title": "title",
    "Display Name": "displayName",
    "Business Name": "businessName",
    "Description": "description",
    "Profile Picture URL": "profile",
    "Call Link": "call",
    "WhatsApp Link": "whatsapp",
    "Instagram Link": "instagram",
    "Facebook Link": "facebook",
    "Email Link": "email",
    "Maps Link": "maps",
    "Client Rating": "rating",
    "Client Reviews": "reviewCount",
    "Why Title": "whyTitle",
    "Why Subtitle": "whySubtitle",
    "Reviews Title": "reviewsTitle",
    "Reviews Subtitle": "reviewsSubtitle",
    "FAQ Title": "faqTitle",
    "FAQ Subtitle": "faqSub"
  };

  const SERVICE_LABELS = {
    "Category": "category",
    "Title": "title",
    "Price": "price",
    "Popular": "popular",
    "Link": "link",
    "Service Image URL": "image",
    "Details": "details",
    "Processing Time": "processingTime",
    "Documents": "documents"
  };

  const WHY_LABELS = { "Title": "title", "Text": "text" };
  const REVIEW_LABELS = { "Author": "author", "Text": "text", "Rating": "rating", "Date": "date", "Service": "service" };

  const colorLabels = [
    "Sidebar Background","Right Section Background","Service Card Background",
    "Active Tab Background","Service Card Arrow Background",
    "Sidebar Primary Text","Sidebar Secondary Text","Sidebar Muted Text",
    "Social Icon Color","Social Button Background","Social Button Border",
    "Social Button Hover Background","Social Button Hover Border",
    "Tab Inactive Background","Tab Border Color","Tab Active Border Color",
    "Tab Inactive Text Color","Tab Active Text Color","Tab Hover Background",
    "Service Card Border","Service Card Divider","Service Card Primary Color",
    "Service Card Secondary Color","Service Card Price Color",
    "Service Card Arrow Icon Color","Service Card Hover Background",
    "Service Card Hover Border","Popular Badge Background","Popular Badge Text",
    "Visual Card Background","Visual Shape 1 Color","Visual Shape 2 Color",
    "Visual Shape 3 Color","Project Tile Background"
  ];

  function parseData(text) {
    const lines = text.split(/\r?\n/);

    const data = {
      metaDescription: "", title: "", displayName: "", businessName: "",
      description: "", profile: "",
      call: "", whatsapp: "", instagram: "", facebook: "", email: "", maps: "",
      rating: "", reviewCount: "",
      whyTitle: "", whySubtitle: "", reviewsTitle: "", reviewsSubtitle: "",
      faqTitle: "", faqSub: "",
      colors: {},
      categories: [],
      services: [],
      whyItems: [],
      reviews: [],
      faqItems: []
    };

    let mode = "";            // "" | "categories"
    let block = null;         // { kind, obj }
    let lastSet = null;       // () => { obj, key }
    let currentLabel = "";

    for (const rawLine of lines) {
      // Continuation: line starts with a space or tab.
      if (/^[ \t]/.test(rawLine)) {
        const trimmed = rawLine.trim();
        if (lastSet) {
          const t = lastSet();
          t.obj[t.key] = (t.obj[t.key] || "") + "\n" + trimmed;
        }
        continue;
      }

      const line = rawLine.trim();

      // Empty line: paragraph break inside a multi-line field.
      if (!line) {
        if (lastSet && currentLabel && MULTI_LINE_FIELDS.has(currentLabel)) {
          const t = lastSet();
          t.obj[t.key] = (t.obj[t.key] || "") + "\n";
        }
        continue;
      }

      // Block starters.
      let m = line.match(/^Service\s+\d+\s*$/i);
      if (m) {
        const service = { category: "", title: "", price: "", popular: false, link: "", image: "", details: "", documents: "", processingTime: "" };
        data.services.push(service);
        block = { kind: "service", obj: service };
        lastSet = null; currentLabel = "";
        continue;
      }
      m = line.match(/^Why Item\s+\d+\s*$/i);
      if (m) {
        const item = { title: "", text: "" };
        data.whyItems.push(item);
        block = { kind: "why", obj: item };
        lastSet = null; currentLabel = "";
        continue;
      }
      m = line.match(/^Review\s+\d+\s*$/i);
      if (m) {
        const review = { author: "", text: "", rating: "", date: "", service: "" };
        data.reviews.push(review);
        block = { kind: "review", obj: review };
        lastSet = null; currentLabel = "";
        continue;
      }
      m = line.match(/^Question\s*(\d+)?\s*:/i);
      if (m) {
        const value = line.slice(line.indexOf(":") + 1).trim();
        const item = { question: value, answer: "" };
        data.faqItems.push(item);
        block = { kind: "faq", obj: item };
        currentLabel = "Question";
        lastSet = value ? null : () => ({ obj: item, key: "question" });
        if (value) lastSet = null;
        continue;
      }
      if (line === "Categories:") { mode = "categories"; block = null; lastSet = null; continue; }
      if (line === "Services:" || /^HOW TO\b/.test(line) || /^END EASY EDIT/.test(line)) { mode = ""; block = null; lastSet = null; continue; }

      // Numbered category lines.
      if (mode === "categories") {
        const cat = line.match(/^\d+\.\s*(.+)$/);
        if (cat) { data.categories.push(cat[1].trim()); continue; }
      }

      // Label: value
      const colon = line.indexOf(":");
      if (colon > 0) {
        const label = line.slice(0, colon);
        const value = line.slice(colon + 1).trim();

        if (block) {
          const map = block.kind === "service" ? SERVICE_LABELS : block.kind === "why" ? WHY_LABELS : block.kind === "review" ? REVIEW_LABELS : null;
          if (block.kind === "faq" && label === "Answer") {
            block.obj.answer = value;
            currentLabel = "Answer";
            lastSet = () => ({ obj: block.obj, key: "answer" });
            continue;
          }
          if (map && Object.prototype.hasOwnProperty.call(map, label)) {
            const key = map[label];
            if (label === "Popular") {
              block.obj.popular = value.toLowerCase() === "yes";
              lastSet = null;
            } else {
              block.obj[key] = value;
              currentLabel = label;
              lastSet = MULTI_LINE_FIELDS.has(label) ? () => ({ obj: block.obj, key }) : null;
            }
            continue;
          }
          // A label that does not belong to this block (for example an old
          // "Description:" line) is ignored — it must never fall through to
          // the global fields.
          if (map) continue;
        }

        if (Object.prototype.hasOwnProperty.call(SCALAR_LABELS, label)) {
          const key = SCALAR_LABELS[label];
          data[key] = value;
          currentLabel = label;
          lastSet = MULTI_LINE_FIELDS.has(label) ? () => ({ obj: data, key }) : null;
          continue;
        }

        if (colorLabels.indexOf(label) !== -1) {
          data.colors[label] = value;
          currentLabel = ""; lastSet = null;
          continue;
        }
      }
    }

    const trimDeep = (obj) => {
      for (const key in obj) {
        const v = obj[key];
        if (typeof v === "string") {
          obj[key] = v.replace(/^\s+|\s+$/g, "");
        } else if (Array.isArray(v)) {
          v.forEach((x) => { if (x && typeof x === "object") trimDeep(x); });
        } else if (v && typeof v === "object") {
          trimDeep(v);
        }
      }
    };
    trimDeep(data);

    return data;
  }

  function normalizeImageUrl(value) {
    let url = String(value || "").trim();
    if (!url) return "";

    let match = url.match(/^https?:\/\/drive\.google\.com\/file\/d\/([^/]+)\/view(?:\?.*)?$/i);
    if (match) return "https://drive.google.com/uc?export=view&id=" + match[1];

    match = url.match(/^https?:\/\/drive\.google\.com\/open\?id=([^&]+)/i);
    if (match) return "https://drive.google.com/uc?export=view&id=" + match[1];

    if (/^https?:\/\/(?:www\.)?dropbox\.com\//i.test(url)) {
      url = url.replace(/[?&]dl=0\b/i, "");
      url += (url.includes("?") ? "&" : "?") + "raw=1";
    }

    return url;
  }

  function escapeHtml(value) {
    return String(value || "").replace(/[&<>"']/g, char => ({
      "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"
    }[char]));
  }

  function resolveColor(value, fallback) {
    const v = String(value || "").trim();
    if (!v || v.toLowerCase() === "auto") return fallback;
    return v;
  }

  function applyColors(data) {
    const page = document.querySelector(".page");
    if (!page) return;

    const sidebar = resolveColor(data.colors["Sidebar Background"], "#202020");
    const c = data.colors;

    const vars = {
      "--page-bg": resolveColor(c["Right Section Background"], "#f0eee6"),
      "--sidebar-bg": sidebar,
      "--sidebar-primary": resolveColor(c["Sidebar Primary Text"], "#ffffff"),
      "--sidebar-secondary": resolveColor(c["Sidebar Secondary Text"], "#f5f5f5"),
      "--sidebar-muted": resolveColor(c["Sidebar Muted Text"], "#a9a9a9"),

      "--social-icon": resolveColor(c["Social Icon Color"], "#f5f5f5"),
      "--social-bg": (c["Social Button Background"] || "").toLowerCase() === "auto"
        ? "rgba(255,255,255,.08)"
        : resolveColor(c["Social Button Background"], "rgba(255,255,255,.08)"),
      "--social-border": resolveColor(c["Social Button Border"], "rgba(255,255,255,.14)"),
      "--social-hover-bg": resolveColor(c["Social Button Hover Background"], "rgba(255,255,255,.14)"),
      "--social-hover-border": resolveColor(c["Social Button Hover Border"], "rgba(255,255,255,.22)"),

      "--main-bg": resolveColor(c["Right Section Background"], "#f0eee6"),

      "--tab-bg": resolveColor(c["Tab Inactive Background"], "transparent"),
      "--tab-active-bg": (c["Active Tab Background"] || "").toLowerCase() === "auto"
        ? "var(--sidebar-bg)"
        : resolveColor(c["Active Tab Background"], "var(--sidebar-bg)"),
      "--tab-border": resolveColor(c["Tab Border Color"], "#222222"),
      "--tab-active-border": (c["Tab Active Border Color"] || "").toLowerCase() === "auto"
        ? "var(--sidebar-bg)"
        : resolveColor(c["Tab Active Border Color"], "var(--sidebar-bg)"),
      "--tab-inactive-text": resolveColor(c["Tab Inactive Text Color"], "#666666"),
      "--tab-active-text": resolveColor(c["Tab Active Text Color"], "#ffffff"),
      "--tab-hover-bg": resolveColor(c["Tab Hover Background"], "#e8e6df"),

      "--card-bg": resolveColor(c["Service Card Background"], "#ffffff"),
      "--card-border": resolveColor(c["Service Card Border"], "#e5e5e5"),
      "--card-divider": resolveColor(c["Service Card Divider"], "#dddddd"),
      "--card-primary": resolveColor(c["Service Card Primary Color"], "#111111"),
      "--card-secondary": resolveColor(c["Service Card Secondary Color"], "#666666"),
      "--card-price": resolveColor(c["Service Card Price Color"], "#111111"),
      "--card-arrow-bg": (c["Service Card Arrow Background"] || "").toLowerCase() === "auto"
        ? "var(--sidebar-bg)"
        : resolveColor(c["Service Card Arrow Background"], "var(--sidebar-bg)"),
      "--card-arrow-icon": resolveColor(c["Service Card Arrow Icon Color"], "#ffffff"),
      "--card-hover-bg": resolveColor(c["Service Card Hover Background"], "#ffffff"),
      "--card-hover-border": resolveColor(c["Service Card Hover Border"], "#cccccc"),

      "--popular-bg": resolveColor(c["Popular Badge Background"], "#eaf2ff"),
      "--popular-text": resolveColor(c["Popular Badge Text"], "#3769c8"),

      "--visual-bg": resolveColor(c["Visual Card Background"], "#ffffff"),
      "--visual-shape-1": resolveColor(c["Visual Shape 1 Color"], "#ff7721"),
      "--visual-shape-2": resolveColor(c["Visual Shape 2 Color"], "#b60025"),
      "--visual-shape-3": resolveColor(c["Visual Shape 3 Color"], "#ef1a2b"),
      "--project-bg": resolveColor(c["Project Tile Background"], "#111111")
    };

    Object.entries(vars).forEach(([name, value]) => page.style.setProperty(name, value));
  }

  function renderTabs(categories) {
    const wrap = document.querySelector(".filters");
    if (!wrap) return;

    const list = categories && categories.length ? categories.slice() : [];
    if (list.indexOf("All") === -1) list.unshift("All");
    wrap.innerHTML = "";

    list.forEach((label, index) => {
      const button = document.createElement("button");
      button.type = "button";
      button.className = "filter" + (index === 0 ? " active" : "");
      button.dataset.filter = label;
      button.textContent = label;
      wrap.appendChild(button);
    });
  }

  let latestServices = [];
  let lastMobileLayout = null;

  function renderServices(services) {
    const grid = document.querySelector(".grid");
    if (!grid) return;

    latestServices = services || [];

    const visual = grid.querySelector(".visual-card");
    grid.querySelectorAll(".service-columns").forEach(columns => columns.remove());
    grid.querySelectorAll(".service-card").forEach(card => card.remove());

    const columnsWrap = document.createElement("div");
    columnsWrap.className = "service-columns";

    const leftColumn = document.createElement("div");
    leftColumn.className = "service-column";

    const rightColumn = document.createElement("div");
    rightColumn.className = "service-column";

    columnsWrap.appendChild(leftColumn);
    columnsWrap.appendChild(rightColumn);

    const isMobile = window.matchMedia("(max-width: 820px)").matches;
    lastMobileLayout = isMobile;
    if (isMobile) rightColumn.style.display = "none";

    services.forEach((service, index) => {
      const card = document.createElement("article");
      card.className = "card item service-card";
      card.dataset.type = service.category || "All";
      card.tabIndex = 0;
      card.setAttribute("role", "button");
      card.setAttribute("aria-label", "View details for " + (service.title || "service"));

      const serviceImage = normalizeImageUrl(service.image);

      card.innerHTML =
        (serviceImage
          ? '<div class="service-image-wrap"><img class="service-image" src="' +
            escapeHtml(serviceImage) + '" alt="" loading="lazy"></div>'
          : '') +
        '<div class="card-top">' +
          '<div class="title">' + escapeHtml(service.title) + '</div>' +
          '<div class="meta">' + escapeHtml(service.details) + '</div>' +
        '</div>' +
        '<div class="card-bottom">' +
          '<div class="price">' + escapeHtml(service.price) + '</div>' +
          (service.popular ? '<span class="popular">Popular</span>' : '') +
          '<div class="arrow" aria-hidden="true"><i class="fa-solid fa-arrow-right"></i></div>' +
        '</div>';

      const serviceImageElement = card.querySelector(".service-image");
      if (serviceImageElement) {
        serviceImageElement.alt = service.title || "Service";
        serviceImageElement.addEventListener("error", function () {
          const wrap = serviceImageElement.closest(".service-image-wrap");
          if (wrap) wrap.remove();
        }, { once: true });
      }

      if (isMobile) {
        leftColumn.appendChild(card);
      } else {
        (index % 2 === 0 ? leftColumn : rightColumn).appendChild(card);
      }

      const open = () => openDrawer(service);
      card.addEventListener("click", open);
      card.addEventListener("keydown", (event) => {
        if (event.key === "Enter" || event.key === " ") {
          event.preventDefault();
          open();
        }
      });
    });

    grid.insertBefore(columnsWrap, visual || null);

    if (visual) {
      visual.dataset.type = "Digital Product";
    }
  }

  function wireFilters() {
    const wrap = document.querySelector(".filters");
    if (!wrap) return;

    wrap.onclick = event => {
      const button = event.target.closest(".filter");
      if (!button) return;

      wrap.querySelectorAll(".filter").forEach(item => {
        item.classList.toggle("active", item === button);
      });

      const selected = button.dataset.filter;

      document.querySelectorAll(".grid .service-card").forEach(card => {
        card.style.display =
          selected === "All" || card.dataset.type === selected ? "flex" : "none";
      });

      document.querySelectorAll(".grid .service-column").forEach(column => {
        const hasVisibleCard = Array.from(column.querySelectorAll(".service-card"))
          .some(card => card.style.display !== "none");
        column.style.display = hasVisibleCard ? "flex" : "none";
      });

      const visual = document.querySelector(".grid .visual-card");
      if (visual) {
        visual.style.display =
          selected === "All" || visual.dataset.type === selected ? "flex" : "none";
      }
    };
  }

  /* ------------------------------------------------ service details drawer */

  let drawerScrollY = 0;

  function openDrawer(service) {
    const overlay = document.getElementById("drawerOverlay");
    if (!overlay) return;

    const title = document.getElementById("drawerTitle");
    const body = document.getElementById("drawerBody");
    const footer = document.getElementById("drawerFooter");

    title.textContent = service.title || "";

    const image = normalizeImageUrl(service.image);
    const details = String(service.details || "").trim();
    const docs = String(service.documents || "")
      .split("\n").map(line => line.trim()).filter(Boolean);
    const price = String(service.price || "").trim();
    const time = String(service.processingTime || "").trim();
    const link = String(service.link || "").trim();
    const hasLink = link && link !== "#";

    let html = "";
    if (image) {
      html += '<img class="drawer-image" src="' + escapeHtml(image) + '" alt="' + escapeHtml(service.title) + '" loading="lazy">';
    }
    if (price || time) {
      html += '<div class="drawer-facts">';
      if (price) html += '<span class="drawer-fact"><i class="fa-solid fa-tag" aria-hidden="true"></i>' + escapeHtml(price) + "</span>";
      if (time) html += '<span class="drawer-fact"><i class="fa-regular fa-clock" aria-hidden="true"></i>' + escapeHtml(time) + "</span>";
      html += "</div>";
    }
    if (details) html += '<p class="drawer-details">' + escapeHtml(details) + "</p>";
    if (docs.length) {
      html += '<section class="drawer-docs"><h3>Required documents</h3><ul class="doc-list">';
      docs.forEach(doc => {
        html += '<li><i class="fa-solid fa-check" aria-hidden="true"></i><span>' + escapeHtml(doc) + "</span></li>";
      });
      html += "</ul></section>";
    }
    body.innerHTML = html;

    const whatsapp = String(currentData.whatsapp || "").trim();
    const call = String(currentData.call || "").trim();
    const business = String(currentData.businessName || "").trim() || String(currentData.displayName || "").trim();

    let footerHtml = "";
    if (hasLink) {
      footerHtml += '<a class="drawer-btn primary" href="' + escapeHtml(link) + '" target="_blank" rel="noreferrer">Apply online<i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>';
    }
    if (whatsapp) {
      const message = 'Hi, I\'d like to enquire about the "' + (service.title || "") + '" service' +
        (business ? " at " + business : "") +
        ". Please share the details, the required documents and the fee.";
      footerHtml += '<a class="drawer-btn ' + (hasLink ? "secondary" : "primary") + '" href="' +
        escapeHtml(whatsapp + (whatsapp.includes("?") ? "&" : "?") + "text=" + encodeURIComponent(message)) +
        '" target="_blank" rel="noreferrer" aria-label="Send an inquiry about ' + escapeHtml(service.title) + ' on WhatsApp"><i class="fa-brands fa-whatsapp" aria-hidden="true"></i>Inquiry</a>';
    }
    if (call) {
      footerHtml += '<a class="drawer-btn secondary" href="' + escapeHtml(call) + '"><i class="fa-solid fa-phone" aria-hidden="true"></i>Call</a>';
    }
    footer.innerHTML = footerHtml;
    footer.style.display = footerHtml ? "flex" : "none";

    overlay.classList.add("visible");

    // iOS-friendly scroll lock (only matters when the page itself scrolls).
    if (window.matchMedia("(max-width: 820px)").matches) {
      drawerScrollY = window.scrollY;
      document.body.style.position = "fixed";
      document.body.style.top = "-" + drawerScrollY + "px";
      document.body.style.width = "100%";
    }

    document.getElementById("drawerClose").focus();
  }

  function closeDrawer() {
    const overlay = document.getElementById("drawerOverlay");
    if (!overlay || !overlay.classList.contains("visible")) return;
    overlay.classList.remove("visible");

    if (document.body.style.position === "fixed") {
      document.body.style.position = "";
      document.body.style.top = "";
      document.body.style.width = "";
      window.scrollTo(0, drawerScrollY);
    }
  }

  /* --------------------------------------------------- why / reviews / faq */

  function renderWhy(data) {
    const section = document.getElementById("whySection");
    if (!section) return;
    const items = data.whyItems.filter(item => (item.title || "").trim() || (item.text || "").trim());
    if (!items.length) return;

    document.getElementById("why-title").textContent = data.whyTitle || "Why Choose Us";
    const sub = document.getElementById("whySub");
    sub.textContent = (data.whySubtitle || "").trim();
    sub.style.display = (data.whySubtitle || "").trim() ? "" : "none";

    const grid = document.getElementById("whyGrid");
    grid.innerHTML = items.map((item, index) =>
      '<article class="why-card">' +
        '<span class="why-num" aria-hidden="true">' + String(index + 1).padStart(2, "0") + "</span>" +
        '<h3 class="why-card-title">' + escapeHtml(item.title) + "</h3>" +
        '<p class="why-card-text">' + escapeHtml(item.text) + "</p>" +
      "</article>"
    ).join("");

    section.classList.add("visible");
  }

  function reviewInitials(author) {
    const parts = String(author || "").trim().split(/\s+/).filter(Boolean);
    if (!parts.length) return "•";
    return parts.slice(0, 2).map(part => part[0].toUpperCase()).join("");
  }

  function formatReviewDate(iso) {
    const time = Date.parse(iso);
    if (Number.isNaN(time)) return "";
    try {
      return new Date(time).toLocaleDateString("en-IN", {
        day: "numeric", month: "short", year: "numeric", timeZone: "UTC"
      });
    } catch (e) {
      return "";
    }
  }

  function renderReviews(data) {
    const section = document.getElementById("reviewsSection");
    if (!section) return;
    const reviews = data.reviews.filter(review => (review.text || "").trim() || (review.author || "").trim());
    if (!reviews.length) return;

    document.getElementById("reviews-title").textContent = data.reviewsTitle || "Reviews & feedback";
    const sub = document.getElementById("reviewsSub");
    sub.textContent = (data.reviewsSubtitle || "").trim();
    sub.style.display = (data.reviewsSubtitle || "").trim() ? "" : "none";

    const grid = document.getElementById("reviewsGrid");
    grid.innerHTML = reviews.map(review => {
      const date = String(review.date || "").trim();
      const rating = parseInt(review.rating, 10);
      const stars = rating >= 1 && rating <= 5 ? "★".repeat(rating) + "☆".repeat(5 - rating) : "";
      return '<article class="review-card">' +
        (date || stars
          ? '<div class="review-card-top">' +
              (date ? '<time datetime="' + escapeHtml(date) + '">' + escapeHtml(formatReviewDate(date)) + "</time>" : "<span></span>") +
              (stars ? '<span class="review-stars" aria-label="' + rating + ' out of 5">' + stars + "</span>" : "") +
            "</div>"
          : "") +
        ((review.text || "").trim() ? '<p class="review-text">&ldquo;' + escapeHtml(review.text.trim()) + "&rdquo;</p>" : "") +
        '<footer class="review-foot">' +
          '<span class="review-avatar" aria-hidden="true">' + escapeHtml(reviewInitials(review.author || "Guest")) + "</span>" +
          '<span class="review-meta">' +
            '<span class="review-author">' + escapeHtml(review.author || "Guest") + "</span>" +
            ((review.service || "").trim() ? '<span class="review-service">' + escapeHtml(review.service.trim()) + "</span>" : "") +
          "</span>" +
        "</footer>" +
      "</article>";
    }).join("");

    section.classList.add("visible");
  }

  function renderFaq(data) {
    const section = document.getElementById("faqSection");
    if (!section) return;
    const items = data.faqItems.filter(item => (item.question || "").trim());
    if (!items.length) return;

    document.getElementById("faq-title").textContent = data.faqTitle || "Frequently asked questions";
    const sub = document.getElementById("faqSub");
    sub.textContent = (data.faqSub || "").trim();
    sub.style.display = (data.faqSub || "").trim() ? "" : "none";

    const list = document.getElementById("faqList");
    list.innerHTML = items.map(item =>
      '<details class="faq-item">' +
        '<summary class="faq-q">' +
          '<span class="faq-q-text">' + escapeHtml(item.question) + "</span>" +
          '<span class="faq-toggle" aria-hidden="true"></span>' +
        "</summary>" +
        ((item.answer || "").trim()
          ? '<div class="faq-answer"><p>' + escapeHtml(item.answer.trim()) + "</p></div>"
          : "") +
      "</details>"
    ).join("");

    section.classList.add("visible");
  }

  /* ----------------------------------------------------------------- main */

  let currentData = null;

  function render() {
    const text = getEasyEditText();
    if (!text) return;

    const data = parseData(text);
    currentData = data;

    if (data.title) document.title = data.title;
    const meta = document.getElementById("metaDescription");
    if (meta && data.metaDescription) meta.setAttribute("content", data.metaDescription);

    const name = document.querySelector(".name");
    const business = document.querySelector(".business-name");
    const bio = document.querySelector(".bio");

    if (name) name.textContent = data.displayName;
    if (business) {
      business.textContent = data.businessName;
      business.style.display = data.businessName ? "" : "none";
    }
    if (bio) bio.textContent = data.description;

    const sidebarTrust = document.getElementById("sidebarTrust");
    const trustRating = document.getElementById("trustRating");
    const trustReviews = document.getElementById("trustReviews");
    const trustRatingItem = document.getElementById("trustRatingItem");
    const trustReviewItem = document.getElementById("trustReviewItem");
    const trustDivider = document.getElementById("trustDivider");

    const ratingValue = String(data.rating || "").trim();
    const reviewValue = String(data.reviewCount || "").trim();
    const hasRating = Boolean(ratingValue);
    const hasReviews = Boolean(reviewValue);

    if (trustRating) trustRating.textContent = ratingValue;
    if (trustReviews) trustReviews.textContent = reviewValue;
    if (trustRatingItem) trustRatingItem.style.display = hasRating ? "flex" : "none";
    if (trustReviewItem) trustReviewItem.style.display = hasReviews ? "flex" : "none";
    if (trustDivider) trustDivider.style.display = (hasRating && hasReviews) ? "block" : "none";

    if (sidebarTrust) {
      sidebarTrust.style.display = (hasRating || hasReviews) ? "grid" : "none";
      sidebarTrust.classList.toggle("single", !(hasRating && hasReviews));
      sidebarTrust.setAttribute("aria-hidden", (hasRating || hasReviews) ? "false" : "true");
    }

    const profile = document.getElementById("profileImage");
    const url = normalizeImageUrl(data.profile);

    if (profile) {
      const fallback = "https://placehold.co/600x600/png?text=Profile";
      profile.alt = data.displayName || "Profile";
      profile.onerror = function () {
        this.onerror = null;
        if (this.src.indexOf(fallback) === -1) {
          this.src = fallback;
        } else {
          this.style.display = "none";
        }
      };
      profile.src = url || fallback;
    }

    const links = [data.call, data.whatsapp, data.instagram, data.facebook, data.email, data.maps];
    document.querySelectorAll(".social-links a").forEach((anchor, index) => {
      const value = String(links[index] || "").trim();
      anchor.href = value || "#";
      anchor.style.display = value ? "flex" : "none";
      anchor.setAttribute("aria-hidden", value ? "false" : "true");
    });

    applyColors(data);
    renderTabs(data.categories);
    renderServices(data.services);
    renderWhy(data);
    renderReviews(data);
    renderFaq(data);

    const first = document.querySelector(".filters .filter");
    if (first) first.click();

    wireFilters();
  }

  document.getElementById("drawerClose").addEventListener("click", closeDrawer);
  document.getElementById("drawerOverlay").addEventListener("click", (event) => {
    if (event.target === event.currentTarget) closeDrawer();
  });
  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape") closeDrawer();
  });

  window.addEventListener("resize", () => {
    const isMobile = window.matchMedia("(max-width: 820px)").matches;
    if (isMobile !== lastMobileLayout && latestServices.length) {
      renderServices(latestServices);

      const active = document.querySelector(".filters .filter.active");
      if (active) active.click();
    }
  });

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", render, { once: true });
  } else {
    render();
  }
})();
</script>

</body>
</html>