/* ══════════════════════════════════════════════════════════════════
   رؤية الفخامة للدهانات والديكورات — style.css
   Primary: #1D3557  |  Secondary: #C9A96E  |  Font: Cairo
   ══════════════════════════════════════════════════════════════════ */

/* ─── Variables ─────────────────────────────────────────────────── */
:root {
    --primary:       #1D3557;
    --primary-dark:  #152742;
    --primary-light: #2a4a7a;
    --secondary:     #C9A96E;
    --secondary-dark:#b08a50;
    --secondary-light:#dfc090;
    --white:         #ffffff;
    --off-white:     #f8f6f2;
    --light-gray:    #e8e4dc;
    --medium-gray:   #9a9087;
    --dark-gray:     #3d3530;
    --black:         #1a1512;
    --success:       #22c55e;
    --error:         #ef4444;

    --shadow-sm:  0 2px 8px rgba(29,53,87,.10);
    --shadow-md:  0 4px 20px rgba(29,53,87,.14);
    --shadow-lg:  0 8px 40px rgba(29,53,87,.18);
    --shadow-xl:  0 16px 60px rgba(29,53,87,.22);

    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --radius-xl:  32px;

    --transition: 0.28s cubic-bezier(.4,0,.2,1);

    --navbar-h:   72px;
    --topbar-h:   38px;
    --total-nav:  110px;
}

/* ─── Reset & Base ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; font-size:16px; }

body {
    font-family:'Cairo',sans-serif;
    direction:rtl;
    text-align:right;
    color:var(--dark-gray);
    background:var(--white);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}

img { max-width:100%; height:auto; display:block; }
a  { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input,textarea,select { font-family:inherit; }

.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* ─── Reveal Animation ──────────────────────────────────────────── */
.rv {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .6s var(--transition), transform .6s var(--transition);
}
.rv.in { opacity:1; transform:none; }
.d1 { transition-delay:.1s; }
.d2 { transition-delay:.2s; }
.d3 { transition-delay:.3s; }
.d4 { transition-delay:.4s; }
.d5 { transition-delay:.5s; }

/* ─── Buttons ───────────────────────────────────────────────────── */
.btn-primary,
.btn-outline,
.btn-secondary,
.btn-white,
.btn-outline-light,
.btn-whatsapp,
.btn-primary-sm,
.btn-outline-sm,
.btn-large {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.75rem 1.6rem;
    border-radius:var(--radius-md);
    font-weight:700;
    font-size:.9rem;
    transition:all var(--transition);
    cursor:pointer;
    white-space:nowrap;
}

.btn-primary {
    background:var(--secondary);
    color:var(--primary-dark);
    box-shadow:0 4px 16px rgba(201,169,110,.35);
}
.btn-primary:hover {
    background:var(--secondary-dark);
    transform:translateY(-2px);
    box-shadow:0 6px 22px rgba(201,169,110,.45);
}

.btn-outline {
    border:2px solid var(--primary);
    color:var(--primary);
    background:transparent;
}
.btn-outline:hover {
    background:var(--primary);
    color:var(--white);
    transform:translateY(-2px);
}

.btn-secondary {
    background:rgba(255,255,255,.15);
    color:var(--white);
    border:2px solid rgba(255,255,255,.5);
    backdrop-filter:blur(8px);
}
.btn-secondary:hover {
    background:rgba(255,255,255,.25);
    border-color:var(--white);
}

.btn-white {
    background:var(--white);
    color:var(--primary);
    font-weight:700;
}
.btn-white:hover {
    background:var(--off-white);
    transform:translateY(-2px);
}

.btn-outline-light {
    border:2px solid rgba(255,255,255,.6);
    color:var(--white);
    background:transparent;
}
.btn-outline-light:hover {
    background:rgba(255,255,255,.1);
}

.btn-whatsapp {
    background:#25D366;
    color:var(--white);
}
.btn-whatsapp:hover {
    background:#1ebe5c;
    transform:translateY(-2px);
}

.btn-primary-sm {
    background:var(--secondary);
    color:var(--primary-dark);
    padding:.5rem 1rem;
    font-size:.82rem;
    border-radius:var(--radius-sm);
}
.btn-primary-sm:hover { background:var(--secondary-dark); }

.btn-outline-sm {
    border:1.5px solid var(--primary);
    color:var(--primary);
    padding:.5rem 1rem;
    font-size:.82rem;
    border-radius:var(--radius-sm);
    background:transparent;
}
.btn-outline-sm:hover { background:var(--primary); color:var(--white); }

.btn-large { padding:1rem 2.2rem; font-size:1rem; }

.text-center { text-align:center; }

/* ─── TOP BAR ───────────────────────────────────────────────────── */
.top-bar {
    background:var(--primary-dark);
    height:var(--topbar-h);
    display:flex;
    align-items:center;
}
.top-bar-inner {
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:1rem;
}
.top-bar-contacts { display:flex; align-items:center; gap:1.2rem; }
.top-bar-link,
.top-bar-info {
    display:flex;
    align-items:center;
    gap:.35rem;
    font-size:.78rem;
    color:rgba(255,255,255,.85);
    transition:color var(--transition);
}
.top-bar-link:hover { color:var(--secondary); }
.top-bar-cta {
    background:var(--secondary);
    color:var(--primary-dark);
    padding:.3rem .9rem;
    border-radius:var(--radius-sm);
    font-size:.78rem;
    font-weight:700;
    transition:all var(--transition);
    white-space:nowrap;
}
.top-bar-cta:hover { background:var(--secondary-dark); }

/* ─── NAVBAR ────────────────────────────────────────────────────── */
.navbar {
    position:sticky;
    top:0;
    z-index:1000;
    background:var(--primary);
    box-shadow:var(--shadow-md);
    transition:all var(--transition);
}
.navbar.scrolled {
    box-shadow:var(--shadow-lg);
}

.nav-inner {
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    display:flex;
    align-items:center;
    gap:1.5rem;
    height:var(--navbar-h);
}

/* Logo */
.logo {
    display:flex;
    align-items:center;
    gap:.6rem;
    flex-shrink:0;
    text-decoration:none;
}
.logo-img-wrap,
.sb-logo-img-wrap {
    width:48px;
    height:48px;
    border-radius:50%;
    overflow:hidden;
    background:rgba(255,255,255,.1);
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid var(--secondary);
    flex-shrink:0;
}
.logo-img { width:100%; height:100%; object-fit:cover; }
.logo-fallback,
.sb-logo-fallback,
.footer-logo-fallback {
    font-size:1.4rem;
    font-weight:900;
    color:var(--secondary);
}
.logo-text-wrap { display:flex; flex-direction:column; }
.logo-name-main,.logo-name {
    font-size:.95rem;
    font-weight:800;
    color:var(--white);
    line-height:1.2;
}
.logo-sub {
    font-size:.7rem;
    color:var(--secondary);
    font-weight:600;
}

/* Nav Links */
.nav-links {
    display:flex;
    align-items:center;
    gap:.25rem;
    flex:1;
}
.nav-links li a {
    color:rgba(255,255,255,.88);
    font-size:.82rem;
    font-weight:600;
    padding:.4rem .65rem;
    border-radius:var(--radius-sm);
    transition:all var(--transition);
    white-space:nowrap;
}
.nav-links li a:hover,
.nav-links li a.active {
    color:var(--secondary);
    background:rgba(255,255,255,.08);
}

/* Nav End */
.nav-end { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.nav-phone {
    display:flex;
    align-items:center;
    gap:.35rem;
    color:rgba(255,255,255,.85);
    font-size:.8rem;
    font-weight:600;
    transition:color var(--transition);
    white-space:nowrap;
}
.nav-phone:hover { color:var(--secondary); }
.nav-cta {
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    background:var(--secondary);
    color:var(--primary-dark);
    padding:.45rem 1rem;
    border-radius:var(--radius-md);
    font-size:.8rem;
    font-weight:700;
    transition:all var(--transition);
    white-space:nowrap;
}
.nav-cta:hover { background:var(--secondary-dark); transform:translateY(-1px); }

/* Hamburger */
.menu-toggle {
    display:none;
    flex-direction:column;
    gap:5px;
    padding:8px;
    border-radius:var(--radius-sm);
    transition:background var(--transition);
    flex-shrink:0;
    margin-right:auto;
}
.menu-toggle:hover { background:rgba(255,255,255,.1); }
.hb {
    width:22px;
    height:2px;
    background:var(--white);
    border-radius:2px;
    transition:all var(--transition);
    display:block;
}

/* ─── SIDEBAR ───────────────────────────────────────────────────── */
.sb-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:1099;
    opacity:0;
    pointer-events:none;
    transition:opacity var(--transition);
    backdrop-filter:blur(2px);
}
.sb-overlay.open { opacity:1; pointer-events:all; }

.sidebar {
    position:fixed;
    top:0;
    right:-310px;
    width:300px;
    height:100vh;
    background:var(--white);
    z-index:1100;
    transition:right .35s cubic-bezier(.4,0,.2,1);
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    box-shadow:var(--shadow-xl);
}
.sidebar.open { right:0; }

.sb-close {
    position:absolute;
    top:14px;
    left:14px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--off-white);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background var(--transition);
}
.sb-close:hover { background:var(--light-gray); }

.sb-head {
    background:var(--primary);
    padding:1.8rem 1.25rem 1.25rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:.4rem;
}
.sb-logo-wrap {
    width:58px;
    height:58px;
    border-radius:50%;
    border:3px solid var(--secondary);
    overflow:hidden;
    background:rgba(255,255,255,.1);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:.2rem;
}
.sb-logo-img { width:100%; height:100%; object-fit:cover; }
.sb-tagline { font-weight:800; color:var(--white); font-size:.95rem; }
.sb-sub { font-size:.72rem; color:var(--secondary); font-weight:600; }

.sb-nav { flex:1; padding:.75rem .75rem 0; }
.sb-link {
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.7rem .9rem;
    border-radius:var(--radius-md);
    font-size:.88rem;
    font-weight:600;
    color:var(--dark-gray);
    transition:all var(--transition);
    margin-bottom:.2rem;
}
.sb-link:hover,
.sb-link.active {
    background:var(--off-white);
    color:var(--primary);
}
.sb-link.active { color:var(--secondary); }
.sb-link svg { color:var(--secondary); flex-shrink:0; }

.sb-foot {
    padding:1rem .75rem 1.5rem;
    border-top:1px solid var(--light-gray);
    display:flex;
    flex-direction:column;
    gap:.5rem;
}
.sb-cta {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    background:var(--secondary);
    color:var(--primary-dark);
    padding:.7rem 1rem;
    border-radius:var(--radius-md);
    font-weight:700;
    font-size:.85rem;
}
.sb-phone {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    color:var(--primary);
    font-weight:700;
    font-size:.85rem;
    padding:.5rem;
    border:1.5px solid var(--light-gray);
    border-radius:var(--radius-md);
    transition:all var(--transition);
}
.sb-phone:hover { border-color:var(--primary); background:var(--off-white); }

/* ─── PAGE HEADER ───────────────────────────────────────────────── */
.page-header {
    position:relative;
    background:var(--primary);
    padding:5rem 0 3rem;
    overflow:hidden;
    margin-top:0;
}
.page-header-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(29,53,87,.95) 0%, rgba(21,39,66,.85) 100%);
}
.page-header-bg {
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    filter:blur(2px) brightness(.4);
}
.page-header-content {
    position:relative;
    z-index:1;
}
.page-header-content h1 {
    font-size:clamp(1.6rem,4vw,2.6rem);
    color:var(--white);
    font-weight:900;
    margin-bottom:.75rem;
}
.page-header-content p {
    color:rgba(255,255,255,.82);
    max-width:600px;
    margin-bottom:1rem;
}
.page-header-badge {
    display:inline-block;
    background:var(--secondary);
    color:var(--primary-dark);
    padding:.25rem .85rem;
    border-radius:var(--radius-xl);
    font-size:.78rem;
    font-weight:700;
    margin-bottom:.75rem;
}

/* Breadcrumb */
.breadcrumb {
    display:flex;
    align-items:center;
    gap:.5rem;
    flex-wrap:wrap;
}
.breadcrumb a {
    color:rgba(255,255,255,.7);
    font-size:.8rem;
    transition:color var(--transition);
}
.breadcrumb a:hover { color:var(--secondary); }
.breadcrumb span { color:rgba(255,255,255,.5); font-size:.8rem; }
.breadcrumb [aria-current="page"] { color:var(--secondary); font-weight:600; }

/* ─── SECTION BASE ──────────────────────────────────────────────── */
.section { padding:5rem 0; }
.section-gray { background:var(--off-white); }
.section-dark { background:var(--primary); }

.section-header {
    text-align:center;
    margin-bottom:3.5rem;
}
.section-header h2 {
    font-size:clamp(1.5rem,3.5vw,2.2rem);
    font-weight:900;
    color:var(--primary);
    margin-bottom:.75rem;
}
.section-header h2 span { color:var(--secondary); }
.section-dark .section-header h2 { color:var(--white); }
.divider {
    width:60px;
    height:3px;
    background:linear-gradient(90deg,var(--secondary),transparent);
    border-radius:2px;
    margin:0 auto .75rem;
}
.subtitle {
    color:var(--medium-gray);
    max-width:580px;
    margin:0 auto;
    font-size:.95rem;
}
.section-dark .subtitle { color:rgba(255,255,255,.7); }

/* ─── HERO ──────────────────────────────────────────────────────── */
.hero {
    position:relative;
    min-height:88vh;
    display:flex;
    align-items:center;
    overflow:hidden;
}
.hero-bg {
    position:absolute;
    inset:0;
    z-index:0;
}
.hero-bg img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.hero-bg-gradient {
    width:100%;
    height:100%;
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
}
.hero-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(29,53,87,.88) 0%, rgba(21,39,66,.75) 100%);
    z-index:1;
}
.hero-content {
    position:relative;
    z-index:2;
    max-width:1200px;
    margin:0 auto;
    padding:6rem 20px 4rem;
    max-width:720px;
}
.hero-badge {
    display:inline-block;
    background:var(--secondary);
    color:var(--primary-dark);
    padding:.3rem 1rem;
    border-radius:var(--radius-xl);
    font-size:.78rem;
    font-weight:700;
    margin-bottom:1.25rem;
    letter-spacing:.05em;
}
.hero-content h1 {
    font-size:clamp(1.8rem,5vw,3rem);
    font-weight:900;
    color:var(--white);
    line-height:1.25;
    margin-bottom:1rem;
}
.hero-subtitle {
    font-size:clamp(.95rem,2.5vw,1.15rem);
    color:rgba(255,255,255,.85);
    margin-bottom:1.5rem;
    line-height:1.8;
}
.hero-features {
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    margin-bottom:2rem;
}
.hero-feature {
    display:flex;
    align-items:center;
    gap:.3rem;
    color:rgba(255,255,255,.9);
    font-size:.82rem;
    font-weight:600;
}
.hero-feature svg { color:var(--secondary); flex-shrink:0; }
.hero-buttons { display:flex; flex-wrap:wrap; gap:1rem; }

/* ─── STATS ─────────────────────────────────────────────────────── */
.stats-section {
    background:var(--primary);
    padding:3.5rem 0;
}
.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2rem;
}
.stat-item { text-align:center; }
.stat-number {
    font-size:clamp(2rem,5vw,2.8rem);
    font-weight:900;
    color:var(--secondary);
    line-height:1;
    margin-bottom:.3rem;
}
.stat-label {
    font-size:.85rem;
    color:rgba(255,255,255,.8);
    font-weight:600;
}

/* ─── FEATURES ──────────────────────────────────────────────────── */
.features-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}
.feature-card {
    background:var(--white);
    padding:2rem 1.5rem;
    border-radius:var(--radius-lg);
    text-align:center;
    box-shadow:var(--shadow-sm);
    transition:all var(--transition);
    border:1px solid var(--light-gray);
}
.feature-card:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
    border-color:var(--secondary);
}
.feature-icon {
    font-size:2.5rem;
    margin-bottom:1rem;
}
.feature-card h3 {
    font-size:1rem;
    font-weight:800;
    color:var(--primary);
    margin-bottom:.5rem;
}
.feature-card p {
    font-size:.85rem;
    color:var(--medium-gray);
    line-height:1.7;
}

/* ─── SERVICES GRID (home) ──────────────────────────────────────── */
.services-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}
.service-card {
    background:var(--white);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--light-gray);
    transition:all var(--transition);
}
.service-card:hover {
    transform:translateY(-5px);
    box-shadow:var(--shadow-md);
    border-color:var(--secondary);
}
.service-card-link,
.service-card > a {
    display:block;
    padding:2rem 1.5rem;
    text-decoration:none;
    color:inherit;
}
.service-icon {
    font-size:2.5rem;
    margin-bottom:1rem;
}
.service-icon svg { width:40px; height:40px; color:var(--secondary); }
.service-card h3 {
    font-size:1rem;
    font-weight:800;
    color:var(--primary);
    margin-bottom:.5rem;
}
.service-card p {
    font-size:.85rem;
    color:var(--medium-gray);
    margin-bottom:1.2rem;
    line-height:1.7;
}
.service-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
}
.price-badge {
    background:var(--off-white);
    color:var(--primary);
    padding:.25rem .7rem;
    border-radius:var(--radius-sm);
    font-size:.75rem;
    font-weight:700;
    border:1px solid var(--light-gray);
    white-space:nowrap;
}
.more-link {
    color:var(--secondary);
    font-size:.8rem;
    font-weight:700;
    transition:color var(--transition);
}
.service-card:hover .more-link { color:var(--secondary-dark); }

/* Services list (services page) */
.services-list-grid {
    display:grid;
    gap:1.5rem;
}
.service-list-card {
    background:var(--white);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--light-gray);
    display:grid;
    grid-template-columns:280px 1fr;
    transition:all var(--transition);
}
.service-list-card:hover {
    box-shadow:var(--shadow-md);
    border-color:var(--secondary);
}
.service-list-img {
    height:220px;
    overflow:hidden;
    background:var(--off-white);
}
.service-list-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.service-list-card:hover .service-list-img img { transform:scale(1.04); }
.service-img-placeholder {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--off-white),var(--light-gray));
}
.service-list-body { padding:1.75rem; }
.service-list-body h3 {
    font-size:1.15rem;
    font-weight:800;
    color:var(--primary);
    margin-bottom:.5rem;
}
.service-list-body p { color:var(--medium-gray); font-size:.88rem; margin-bottom:1rem; }
.service-features-list { display:flex; flex-wrap:wrap; gap:.3rem .5rem; margin-bottom:1rem; }
.service-features-list li {
    display:flex;
    align-items:center;
    gap:.3rem;
    font-size:.78rem;
    color:var(--dark-gray);
}
.service-features-list svg { color:var(--secondary); flex-shrink:0; }
.service-list-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top:1rem;
    padding-top:1rem;
    border-top:1px solid var(--light-gray);
}
.service-list-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ─── PROJECTS ──────────────────────────────────────────────────── */
.projects-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}
.project-card {
    background:var(--white);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--light-gray);
    transition:all var(--transition);
}
.project-card:hover {
    transform:translateY(-5px);
    box-shadow:var(--shadow-md);
}
.project-card > a { display:block; text-decoration:none; color:inherit; }
.project-image {
    position:relative;
    height:200px;
    overflow:hidden;
    background:var(--off-white);
}
.project-image img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.project-card:hover .project-image img { transform:scale(1.06); }
.project-placeholder {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:3rem;
    background:linear-gradient(135deg,var(--off-white),var(--light-gray));
}
.project-badge {
    position:absolute;
    top:.75rem;
    right:.75rem;
    background:var(--secondary);
    color:var(--primary-dark);
    padding:.2rem .65rem;
    border-radius:var(--radius-xl);
    font-size:.7rem;
    font-weight:700;
}
.project-overlay {
    position:absolute;
    inset:0;
    background:rgba(29,53,87,.7);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity var(--transition);
}
.project-overlay span { color:var(--white); font-weight:700; }
.project-card:hover .project-overlay { opacity:1; }
.project-content { padding:1.25rem; }
.project-content h3 {
    font-size:.95rem;
    font-weight:800;
    color:var(--primary);
    margin-bottom:.4rem;
}
.project-content p { font-size:.82rem; color:var(--medium-gray); }
.project-meta { font-size:.75rem; color:var(--medium-gray); margin-top:.4rem; }

/* Project Detail */
.project-detail-layout { display:grid; grid-template-columns:1fr 300px; gap:2.5rem; align-items:start; }
.project-detail-img img { width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.project-detail-body { margin-top:2rem; font-size:.92rem; line-height:1.9; }
.project-detail-body h2,h3,h4 { color:var(--primary); margin:1.5rem 0 .5rem; }
.project-detail-sidebar { position:sticky; top:100px; }
.project-info-list { display:flex; flex-direction:column; gap:.7rem; margin:.75rem 0 1.25rem; }
.project-info-list li {
    display:flex;
    align-items:center;
    gap:.75rem;
    font-size:.85rem;
}
.info-label { color:var(--medium-gray); font-size:.78rem; min-width:85px; }
.related-project-item {
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.6rem 0;
    border-bottom:1px solid var(--light-gray);
    transition:color var(--transition);
    font-size:.85rem;
    color:var(--dark-gray);
}
.related-project-item:last-child { border-bottom:none; }
.related-project-item img { width:50px; height:40px; object-fit:cover; border-radius:var(--radius-sm); }
.related-project-item:hover { color:var(--secondary); }

/* ─── PACKAGES ──────────────────────────────────────────────────── */
.packages-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}
.package-card {
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    border-radius:var(--radius-lg);
    padding:2rem 1.5rem;
    text-align:center;
    position:relative;
    transition:all var(--transition);
    color:var(--white);
}
.package-card.popular {
    background:rgba(201,169,110,.12);
    border-color:var(--secondary);
}
.package-card h3 {
    font-size:1.1rem;
    font-weight:800;
    margin-bottom:.5rem;
}
.package-card p {
    font-size:.85rem;
    color:rgba(255,255,255,.75);
    margin-bottom:1rem;
}
.package-card .price {
    font-size:2rem;
    font-weight:900;
    color:var(--secondary);
    margin-bottom:.5rem;
}
.package-card .price span { font-size:.9rem; }
.package-card .original-price {
    text-decoration:line-through;
    font-size:.85rem;
    color:rgba(255,255,255,.5);
    margin-bottom:.75rem;
}
.package-card .items {
    text-align:right;
    margin:.75rem 0;
}
.package-card .items li {
    display:flex;
    align-items:center;
    gap:.5rem;
    font-size:.82rem;
    padding:.25rem 0;
    color:rgba(255,255,255,.85);
}
.package-card .items svg { color:var(--secondary); flex-shrink:0; }
.badge {
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:var(--secondary);
    color:var(--primary-dark);
    padding:.2rem .9rem;
    border-radius:var(--radius-xl);
    font-size:.72rem;
    font-weight:700;
    white-space:nowrap;
}

/* Packages full page */
.packages-full-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}
.package-full-card {
    background:var(--white);
    border:2px solid var(--light-gray);
    border-radius:var(--radius-lg);
    padding:2rem 1.5rem;
    text-align:center;
    position:relative;
    transition:all var(--transition);
}
.package-full-card.popular {
    border-color:var(--secondary);
    box-shadow:0 0 0 4px rgba(201,169,110,.15);
}
.package-full-card:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
}
.package-full-card h3 { font-size:1.2rem; font-weight:800; color:var(--primary); margin-bottom:.4rem; }
.package-full-card .package-header p { color:var(--medium-gray); font-size:.85rem; margin-bottom:1.5rem; }
.package-full-card .package-price .price { font-size:2.2rem; font-weight:900; color:var(--secondary); }
.package-full-card .savings { font-size:.78rem; color:var(--success); font-weight:600; margin-top:.25rem; }
.package-items { text-align:right; margin:1.25rem 0; }
.package-items li {
    display:flex;
    align-items:center;
    gap:.5rem;
    font-size:.83rem;
    padding:.3rem 0;
    border-bottom:1px solid var(--light-gray);
    color:var(--dark-gray);
}
.package-items li:last-child { border-bottom:none; }
.package-items svg { color:var(--secondary); flex-shrink:0; }

.guarantees-grid {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.75rem;
    margin-top:1.5rem;
}
.guarantee-item {
    display:flex;
    align-items:center;
    gap:.4rem;
    background:var(--off-white);
    padding:.5rem 1rem;
    border-radius:var(--radius-xl);
    font-size:.83rem;
    font-weight:600;
    border:1px solid var(--light-gray);
}

/* ─── TESTIMONIALS ──────────────────────────────────────────────── */
.testimonials-section {
    background:var(--primary);
    padding:5rem 0;
}
.testimonials-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}
.testimonial-card {
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--radius-lg);
    padding:1.75rem;
    transition:all var(--transition);
}
.testimonial-card:hover {
    background:rgba(255,255,255,.11);
    transform:translateY(-3px);
}
.stars { display:flex; gap:2px; margin-bottom:.75rem; }
.star { color:var(--secondary); font-size:1rem; }
.testimonial-text {
    color:rgba(255,255,255,.9);
    font-size:.88rem;
    line-height:1.85;
    margin-bottom:1.25rem;
    font-style:italic;
}
.testimonial-author {
    display:flex;
    align-items:center;
    gap:.75rem;
}
.testimonial-avatar {
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--secondary);
    color:var(--primary-dark);
    font-weight:800;
    font-size:1.1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    overflow:hidden;
}
.testimonial-avatar img { width:100%; height:100%; object-fit:cover; }
.testimonial-author .name { color:var(--white); font-weight:700; font-size:.88rem; }
.testimonial-author .role { color:rgba(255,255,255,.6); font-size:.75rem; }
.testimonial-author .service-tag {
    font-size:.72rem;
    background:rgba(201,169,110,.2);
    color:var(--secondary);
    padding:.1rem .5rem;
    border-radius:var(--radius-sm);
    margin-top:.2rem;
    display:inline-block;
}

/* ─── FAQ ───────────────────────────────────────────────────────── */
.faq-list { max-width:800px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--light-gray); }
.faq-question {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.1rem 0;
    text-align:right;
    font-size:.92rem;
    font-weight:700;
    color:var(--primary);
    gap:1rem;
    cursor:pointer;
    background:none;
    border:none;
    transition:color var(--transition);
}
.faq-question:hover { color:var(--secondary); }
.faq-question.open { color:var(--secondary); }
.faq-icon {
    flex-shrink:0;
    font-size:1.2rem;
    font-weight:400;
    color:var(--secondary);
    transition:transform var(--transition);
}
.faq-question.open .faq-icon { transform:rotate(45deg); }
.faq-answer {
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease, padding var(--transition);
}
.faq-answer.open { max-height:500px; padding-bottom:1rem; }
.faq-answer p { color:var(--medium-gray); font-size:.88rem; line-height:1.85; }

.faq-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin-bottom:2.5rem;
    justify-content:center;
}
.faq-tab {
    padding:.45rem 1.1rem;
    border-radius:var(--radius-xl);
    font-size:.82rem;
    font-weight:600;
    border:1.5px solid var(--light-gray);
    color:var(--medium-gray);
    background:var(--white);
    cursor:pointer;
    transition:all var(--transition);
}
.faq-tab:hover { border-color:var(--secondary); color:var(--secondary); }
.faq-tab.active {
    background:var(--secondary);
    color:var(--primary-dark);
    border-color:var(--secondary);
}
.faq-group { margin-bottom:2.5rem; }
.faq-group-title {
    font-size:1.05rem;
    font-weight:800;
    color:var(--primary);
    margin-bottom:1rem;
    padding-bottom:.5rem;
    border-bottom:2px solid var(--secondary);
}
.faq-cta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1.5rem;
    background:var(--off-white);
    border-radius:var(--radius-lg);
    padding:2rem;
    border:1px solid var(--light-gray);
    margin-top:3rem;
}
.faq-cta h3 { color:var(--primary); font-size:1.1rem; margin-bottom:.3rem; }
.faq-cta p { color:var(--medium-gray); font-size:.88rem; }
.faq-cta-actions { display:flex; gap:.75rem; flex-wrap:wrap; }

/* ─── BLOG ──────────────────────────────────────────────────────── */
.blog-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}
.blog-card {
    background:var(--white);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--light-gray);
    transition:all var(--transition);
}
.blog-card:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
    border-color:var(--secondary);
}
.blog-card > a { display:block; text-decoration:none; color:inherit; }
.blog-img {
    position:relative;
    height:190px;
    overflow:hidden;
    background:var(--off-white);
}
.blog-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.blog-card:hover .blog-img img { transform:scale(1.05); }
.blog-img-placeholder {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:3rem;
}
.blog-category {
    position:absolute;
    top:.75rem;
    right:.75rem;
    background:var(--secondary);
    color:var(--primary-dark);
    padding:.2rem .65rem;
    border-radius:var(--radius-xl);
    font-size:.7rem;
    font-weight:700;
}
.blog-content { padding:1.25rem; }
.blog-meta {
    display:flex;
    align-items:center;
    gap:1rem;
    font-size:.75rem;
    color:var(--medium-gray);
    margin-bottom:.6rem;
    flex-wrap:wrap;
}
.blog-card h2,
.blog-card h3 {
    font-size:.95rem;
    font-weight:800;
    color:var(--primary);
    margin-bottom:.5rem;
    line-height:1.4;
}
.blog-card p { font-size:.82rem; color:var(--medium-gray); margin-bottom:.75rem; }
.blog-link {
    color:var(--secondary);
    font-size:.8rem;
    font-weight:700;
    display:inline-block;
}

/* Blog layout */
.blog-layout { display:grid; grid-template-columns:1fr 300px; gap:2.5rem; align-items:start; }
.blog-main {}
.blog-sidebar { position:sticky; top:100px; }

/* Blog post */
.blog-post-layout { display:grid; grid-template-columns:1fr 300px; gap:2.5rem; align-items:start; }
.post-featured-img img { width:100%; border-radius:var(--radius-lg); margin-bottom:2rem; }
.post-excerpt {
    background:var(--off-white);
    border-right:4px solid var(--secondary);
    padding:1rem 1.25rem;
    border-radius:0 var(--radius-md) var(--radius-md) 0;
    margin-bottom:1.5rem;
}
.post-excerpt p { font-size:.95rem; color:var(--dark-gray); font-weight:500; }
.post-content { font-size:.92rem; line-height:1.9; color:var(--dark-gray); }
.post-content h2,h3,h4 { color:var(--primary); margin:1.5rem 0 .5rem; }
.post-content p { margin-bottom:1rem; }
.post-meta-header {
    display:flex;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
    font-size:.8rem;
    color:rgba(255,255,255,.7);
}
.post-tags {
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
    margin-top:2rem;
    padding-top:1.5rem;
    border-top:1px solid var(--light-gray);
}
.tag-link {
    background:var(--off-white);
    color:var(--primary);
    padding:.25rem .7rem;
    border-radius:var(--radius-xl);
    font-size:.75rem;
    font-weight:600;
    border:1px solid var(--light-gray);
    transition:all var(--transition);
}
.tag-link:hover { background:var(--primary); color:var(--white); border-color:var(--primary); }
.post-share { margin-top:2rem; }
.post-share h4 { font-size:.88rem; color:var(--medium-gray); margin-bottom:.75rem; }
.share-buttons { display:flex; gap:.5rem; flex-wrap:wrap; }
.share-btn {
    padding:.45rem .9rem;
    border-radius:var(--radius-sm);
    font-size:.8rem;
    font-weight:600;
    cursor:pointer;
    transition:all var(--transition);
    border:none;
    font-family:inherit;
}
.share-btn.whatsapp { background:#dcfce7; color:#166534; }
.share-btn.twitter { background:#dbeafe; color:#1e40af; }
.share-btn.copy { background:var(--off-white); color:var(--primary); }
.share-btn:hover { opacity:.85; transform:translateY(-1px); }

/* popular post item */
.popular-post-item {
    display:flex;
    align-items:center;
    gap:.65rem;
    padding:.6rem 0;
    border-bottom:1px solid var(--light-gray);
    font-size:.82rem;
    color:var(--dark-gray);
    transition:color var(--transition);
}
.popular-post-item:last-child { border-bottom:none; }
.popular-post-item img { width:54px; height:40px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; }
.popular-post-item:hover { color:var(--secondary); }
.popular-post-item small { display:block; color:var(--medium-gray); font-size:.72rem; }

/* Tags cloud */
.tags-cloud { display:flex; flex-wrap:wrap; gap:.4rem; }

/* ─── SIDEBAR CARD ──────────────────────────────────────────────── */
.sidebar-card {
    background:var(--white);
    border:1px solid var(--light-gray);
    border-radius:var(--radius-lg);
    padding:1.5rem;
    margin-bottom:1.5rem;
    box-shadow:var(--shadow-sm);
}
.sidebar-card h3 {
    font-size:1rem;
    font-weight:800;
    color:var(--primary);
    margin-bottom:1rem;
    padding-bottom:.6rem;
    border-bottom:2px solid var(--secondary);
}
.price-card { border-top:4px solid var(--secondary); }
.service-price {
    font-size:1.5rem;
    font-weight:900;
    color:var(--secondary);
    margin-bottom:1rem;
}
.sidebar-phone {
    display:flex;
    align-items:center;
    gap:.35rem;
    color:var(--primary);
    font-weight:600;
    font-size:.85rem;
    margin-top:.75rem;
    padding:.5rem;
    background:var(--off-white);
    border-radius:var(--radius-sm);
    justify-content:center;
    transition:background var(--transition);
}
.sidebar-phone:hover { background:var(--light-gray); }

.features-list li,
.other-services-list li a {
    display:flex;
    align-items:center;
    gap:.5rem;
    font-size:.83rem;
    padding:.3rem 0;
    border-bottom:1px solid var(--light-gray);
}
.features-list svg { color:var(--secondary); flex-shrink:0; }
.other-services-list li a {
    color:var(--dark-gray);
    justify-content:space-between;
    border-bottom:1px solid var(--light-gray);
    transition:color var(--transition);
}
.other-services-list li a:hover { color:var(--secondary); }
.other-services-list li:last-child a { border-bottom:none; }

.sidebar-cta h3 { color:var(--primary); }
.sidebar-cta p { font-size:.82rem; color:var(--medium-gray); margin-bottom:1rem; }

.sidebar-categories li,
.sidebar-sort li { border-bottom:1px solid var(--light-gray); }
.sidebar-categories li:last-child,
.sidebar-sort li:last-child { border-bottom:none; }
.sidebar-categories a,
.sidebar-sort a {
    display:block;
    padding:.5rem 0;
    font-size:.83rem;
    color:var(--dark-gray);
    transition:color var(--transition);
}
.sidebar-categories a:hover,
.sidebar-sort a:hover { color:var(--secondary); }
.sidebar-categories a.active,
.sidebar-sort a.active { color:var(--secondary); font-weight:700; }

.sidebar-package-item {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:.5rem 0;
    border-bottom:1px solid var(--light-gray);
    font-size:.83rem;
}
.sidebar-package-item:last-child { border-bottom:none; }
.sidebar-package-item .package-price { color:var(--secondary); font-weight:700; }

.why-list li {
    font-size:.83rem;
    padding:.35rem 0;
    border-bottom:1px solid var(--light-gray);
}
.why-list li:last-child { border-bottom:none; }

/* ─── SERVICE DETAIL ─────────────────────────────────────────────── */
.service-detail-layout {
    display:grid;
    grid-template-columns:1fr 300px;
    gap:2.5rem;
    align-items:start;
}
.service-detail-img { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.service-detail-img img { width:100%; border-radius:var(--radius-lg); }
.service-detail-body { margin-top:2rem; font-size:.92rem; line-height:1.9; }
.service-detail-body h2,h3,h4 { color:var(--primary); margin:1.5rem 0 .5rem; }
.service-detail-sidebar { position:sticky; top:100px; }

.service-includes {
    margin-top:2rem;
    background:var(--off-white);
    border-radius:var(--radius-lg);
    padding:1.5rem;
    border:1px solid var(--light-gray);
}
.service-includes h3 { font-size:1rem; font-weight:800; color:var(--primary); margin-bottom:1rem; }
.service-includes ul { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.service-includes li {
    display:flex;
    align-items:center;
    gap:.5rem;
    font-size:.83rem;
}
.service-includes svg { color:var(--secondary); flex-shrink:0; }

.service-gallery { margin-top:2rem; }
.service-gallery h3 { font-size:1rem; font-weight:800; color:var(--primary); margin-bottom:1rem; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.gallery-item { border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/3; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.gallery-item:hover img { transform:scale(1.06); }

/* ─── BOOKING PAGE ───────────────────────────────────────────────── */
.booking-layout { display:grid; grid-template-columns:1fr 300px; gap:2.5rem; align-items:start; }
.booking-form-wrap {
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:2.5rem;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--light-gray);
}
.booking-form-header { margin-bottom:2rem; }
.booking-form-header h2 { font-size:1.3rem; font-weight:800; color:var(--primary); }
.booking-form-header p { color:var(--medium-gray); font-size:.85rem; margin-top:.25rem; }
.booking-sidebar { position:sticky; top:100px; }

/* Forms */
.form-section { margin-bottom:2rem; }
.form-section-title {
    font-size:.92rem;
    font-weight:700;
    color:var(--primary);
    margin-bottom:1rem;
    padding-bottom:.5rem;
    border-bottom:2px solid var(--secondary);
}
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:.35rem; }
.form-group-full { grid-column:1/-1; }
.form-group label { font-size:.82rem; font-weight:700; color:var(--dark-gray); }
.required { color:var(--error); }
.form-input,
.form-select,
.form-textarea {
    width:100%;
    padding:.7rem .9rem;
    border:1.5px solid var(--light-gray);
    border-radius:var(--radius-md);
    font-family:'Cairo',sans-serif;
    font-size:.88rem;
    color:var(--dark-gray);
    background:var(--white);
    transition:border-color var(--transition), box-shadow var(--transition);
    direction:rtl;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline:none;
    border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(201,169,110,.15);
}
.form-textarea { resize:vertical; min-height:100px; }
.form-select { -webkit-appearance:none; cursor:pointer; }
.field-error { font-size:.75rem; color:var(--error); }
.form-note {
    display:flex;
    align-items:center;
    gap:.4rem;
    font-size:.75rem;
    color:var(--medium-gray);
    margin-top:.5rem;
}
.form-submit { display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; }

/* Services checkboxes */
.services-checkboxes { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.service-checkbox-label {
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:.65rem .9rem;
    border:1.5px solid var(--light-gray);
    border-radius:var(--radius-md);
    cursor:pointer;
    transition:all var(--transition);
    font-size:.83rem;
}
.service-checkbox-label:hover { border-color:var(--secondary); background:var(--off-white); }
.service-checkbox { display:none; }
.service-checkbox:checked ~ .checkbox-name { color:var(--secondary); font-weight:700; }
.service-checkbox-label:has(.service-checkbox:checked) {
    border-color:var(--secondary);
    background:rgba(201,169,110,.08);
}
.checkbox-custom {
    width:16px;
    height:16px;
    border:2px solid var(--light-gray);
    border-radius:4px;
    flex-shrink:0;
    transition:all var(--transition);
}
.service-checkbox:checked + .checkbox-custom {
    background:var(--secondary);
    border-color:var(--secondary);
}
.checkbox-name { flex:1; }
.checkbox-price { font-size:.72rem; color:var(--medium-gray); white-space:nowrap; }

/* Contact info */
.contact-info-item {
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.8rem 0;
    border-bottom:1px solid var(--light-gray);
    transition:color var(--transition);
}
.contact-info-item:last-child { border-bottom:none; }
.contact-info-item:hover { color:var(--secondary); }
.contact-info-icon { font-size:1.25rem; flex-shrink:0; }
.contact-info-label { font-size:.72rem; color:var(--medium-gray); display:block; }
.contact-info-value { font-size:.85rem; font-weight:700; display:block; }

/* ─── CONTACT PAGE ───────────────────────────────────────────────── */
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; }
.contact-info-section h2 { font-size:1.3rem; font-weight:800; color:var(--primary); margin-bottom:.5rem; }
.contact-info-section > p { color:var(--medium-gray); font-size:.88rem; margin-bottom:2rem; }
.contact-cards { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; }
.contact-card {
    background:var(--white);
    border:1px solid var(--light-gray);
    border-radius:var(--radius-lg);
    padding:1.25rem;
    box-shadow:var(--shadow-sm);
    text-align:center;
}
.contact-card-icon { font-size:2rem; margin-bottom:.5rem; }
.contact-card h3 { font-size:.85rem; font-weight:700; color:var(--primary); margin-bottom:.3rem; }
.contact-card a,
.contact-card p { font-size:.85rem; color:var(--medium-gray); }
.contact-card a:hover { color:var(--secondary); }
.branch-mini-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding:.75rem 1rem;
    background:var(--off-white);
    border-radius:var(--radius-md);
    margin-bottom:.5rem;
    border:1px solid var(--light-gray);
}
.branch-mini-info { display:flex; flex-direction:column; gap:.15rem; font-size:.8rem; }
.branch-main-badge {
    font-size:.68rem;
    background:var(--secondary);
    color:var(--primary-dark);
    padding:.1rem .5rem;
    border-radius:var(--radius-xl);
    font-weight:700;
    width:fit-content;
}
.branch-map-link {
    font-size:.78rem;
    color:var(--secondary);
    font-weight:600;
    white-space:nowrap;
}

.contact-form-wrap {
    background:var(--white);
    border:1px solid var(--light-gray);
    border-radius:var(--radius-lg);
    padding:2rem;
    box-shadow:var(--shadow-sm);
}
.contact-form-wrap h2 { font-size:1.2rem; font-weight:800; color:var(--primary); margin-bottom:.25rem; }
.contact-form-wrap > p { color:var(--medium-gray); font-size:.85rem; margin-bottom:1.5rem; }
.map-wrap iframe { width:100%; height:400px; border-radius:var(--radius-lg); border:none; }

/* ─── PRODUCTS ───────────────────────────────────────────────────── */
.products-layout { display:grid; grid-template-columns:250px 1fr; gap:2rem; align-items:start; }
.products-sidebar { position:sticky; top:100px; }
.products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.product-card {
    background:var(--white);
    border:1px solid var(--light-gray);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:all var(--transition);
    display:flex;
    flex-direction:column;
}
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--secondary); }
.product-card > a { display:block; flex:1; text-decoration:none; color:inherit; }
.product-img {
    height:180px;
    overflow:hidden;
    background:var(--off-white);
    position:relative;
}
.product-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.product-card:hover .product-img img { transform:scale(1.05); }
.product-placeholder {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2.5rem;
}
.product-badge-featured {
    position:absolute;
    top:.6rem;
    right:.6rem;
    background:var(--secondary);
    color:var(--primary-dark);
    padding:.15rem .55rem;
    border-radius:var(--radius-xl);
    font-size:.68rem;
    font-weight:700;
}
.product-badge-discount {
    position:absolute;
    top:.6rem;
    left:.6rem;
    background:var(--error);
    color:var(--white);
    padding:.15rem .55rem;
    border-radius:var(--radius-xl);
    font-size:.68rem;
    font-weight:700;
}
.product-info { padding:1rem; }
.product-category {
    font-size:.7rem;
    color:var(--secondary);
    font-weight:700;
    margin-bottom:.25rem;
    display:block;
}
.product-info h3 { font-size:.88rem; font-weight:700; color:var(--primary); margin-bottom:.25rem; line-height:1.3; }
.product-info p { font-size:.78rem; color:var(--medium-gray); margin-bottom:.5rem; }
.product-price { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.price { font-size:1rem; font-weight:800; color:var(--secondary); }
.original-price { text-decoration:line-through; color:var(--medium-gray); font-size:.82rem; }
.price-on-request { font-size:.8rem; color:var(--medium-gray); font-style:italic; }
.product-actions { display:flex; gap:.4rem; padding:.75rem 1rem; border-top:1px solid var(--light-gray); }

/* Product Detail */
.product-detail-layout { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.product-main-img { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); margin-bottom:.75rem; }
.product-main-img img { width:100%; border-radius:var(--radius-lg); }
.product-thumbnails { display:flex; gap:.5rem; flex-wrap:wrap; }
.thumb-btn {
    width:70px;
    height:55px;
    border-radius:var(--radius-sm);
    overflow:hidden;
    border:2px solid var(--light-gray);
    cursor:pointer;
    transition:border-color var(--transition);
}
.thumb-btn.active,
.thumb-btn:hover { border-color:var(--secondary); }
.thumb-btn img { width:100%; height:100%; object-fit:cover; }
.product-category-badge {
    display:inline-block;
    background:var(--off-white);
    color:var(--secondary);
    padding:.25rem .75rem;
    border-radius:var(--radius-xl);
    font-size:.75rem;
    font-weight:700;
    border:1px solid var(--light-gray);
    margin-bottom:.75rem;
}
.product-detail-info h2 { font-size:1.5rem; font-weight:900; color:var(--primary); margin-bottom:.75rem; }
.product-short-desc { font-size:.92rem; color:var(--medium-gray); margin-bottom:1.25rem; line-height:1.8; }
.product-price-section { margin-bottom:1.5rem; }
.product-price-main { font-size:2rem; font-weight:900; color:var(--secondary); }
.product-price-main span { font-size:1rem; }
.product-price-old { text-decoration:line-through; color:var(--medium-gray); font-size:.9rem; }
.product-discount-badge {
    display:inline-block;
    background:var(--error);
    color:var(--white);
    padding:.2rem .6rem;
    border-radius:var(--radius-sm);
    font-size:.72rem;
    font-weight:700;
    margin-top:.25rem;
}
.product-price-request { font-size:1.1rem; font-weight:600; color:var(--medium-gray); }
.product-features { margin-bottom:1.5rem; }
.product-features h3 { font-size:.92rem; font-weight:700; color:var(--primary); margin-bottom:.75rem; }
.product-features ul { display:grid; grid-template-columns:1fr 1fr; gap:.3rem; }
.product-features li {
    display:flex;
    align-items:center;
    gap:.4rem;
    font-size:.82rem;
}
.product-features svg { color:var(--secondary); flex-shrink:0; }
.product-cta-buttons { display:flex; flex-direction:column; gap:.6rem; }
.product-full-desc { font-size:.92rem; line-height:1.9; }
.product-full-desc h3 { font-size:1.05rem; font-weight:800; color:var(--primary); margin-bottom:1rem; }

/* ─── ABOUT PAGE ─────────────────────────────────────────────────── */
.about-intro-layout { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.about-text h2 { font-size:1.5rem; font-weight:900; color:var(--primary); margin-bottom:.5rem; }
.about-text h2 span { color:var(--secondary); }
.about-text p { color:var(--medium-gray); font-size:.9rem; line-height:1.85; margin-bottom:1rem; }
.about-features { margin-top:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.about-feature {
    display:flex;
    align-items:flex-start;
    gap:.75rem;
}
.about-feature-icon { font-size:1.4rem; flex-shrink:0; }
.about-feature strong { display:block; font-size:.88rem; font-weight:700; color:var(--primary); margin-bottom:.15rem; }
.about-feature p { font-size:.82rem; color:var(--medium-gray); margin:0; }

.about-img-placeholder {
    width:100%;
    min-height:350px;
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);
    border-radius:var(--radius-xl);
    display:flex;
    align-items:center;
    justify-content:center;
}
.placeholder-content { text-align:center; }
.placeholder-icon { font-size:4rem; margin-bottom:.75rem; }
.placeholder-text { font-size:1.25rem; font-weight:800; color:var(--white); }
.placeholder-sub { font-size:.85rem; color:var(--secondary); margin-top:.25rem; }

.vision-mission-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.vision-card {
    background:var(--white);
    border:1px solid var(--light-gray);
    border-radius:var(--radius-lg);
    padding:2rem 1.5rem;
    text-align:center;
    box-shadow:var(--shadow-sm);
    transition:all var(--transition);
}
.vision-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--secondary); }
.vision-icon { font-size:2.5rem; margin-bottom:1rem; }
.vision-card h3 { font-size:1.05rem; font-weight:800; color:var(--primary); margin-bottom:.75rem; }
.vision-card p { font-size:.85rem; color:var(--medium-gray); line-height:1.8; }

/* Steps */
.steps-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:1rem;
    position:relative;
}
.step-card {
    background:var(--white);
    border:1px solid var(--light-gray);
    border-radius:var(--radius-lg);
    padding:1.5rem 1rem;
    text-align:center;
    box-shadow:var(--shadow-sm);
    position:relative;
    transition:all var(--transition);
}
.step-card:hover { transform:translateY(-4px); border-color:var(--secondary); box-shadow:var(--shadow-md); }
.step-number {
    position:absolute;
    top:-12px;
    right:50%;
    transform:translateX(50%);
    width:28px;
    height:28px;
    background:var(--secondary);
    color:var(--primary-dark);
    border-radius:50%;
    font-size:.78rem;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
}
.step-icon { font-size:2rem; margin-bottom:.75rem; }
.step-card h3 { font-size:.88rem; font-weight:800; color:var(--primary); margin-bottom:.4rem; }
.step-card p { font-size:.78rem; color:var(--medium-gray); line-height:1.6; }

/* ─── BRANCHES ───────────────────────────────────────────────────── */
.branches-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}
.branch-card {
    background:var(--white);
    border:1px solid var(--light-gray);
    border-radius:var(--radius-lg);
    padding:2rem 1.5rem;
    text-align:center;
    box-shadow:var(--shadow-sm);
    position:relative;
    transition:all var(--transition);
}
.branch-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--secondary); }
.branch-icon { font-size:2.5rem; margin-bottom:1rem; }
.branch-card h3 { font-size:1.05rem; font-weight:800; color:var(--primary); margin-bottom:1rem; }
.branch-info-row {
    display:flex;
    align-items:center;
    gap:.5rem;
    justify-content:center;
    font-size:.83rem;
    color:var(--medium-gray);
    margin-bottom:.5rem;
    flex-wrap:wrap;
}
.branch-info-row a { color:var(--secondary); }
.branch-info-row svg { color:var(--secondary); flex-shrink:0; }
.branch-actions {
    display:flex;
    gap:.5rem;
    justify-content:center;
    margin-top:1.25rem;
    flex-wrap:wrap;
}
.branch-main-badge {
    position:absolute;
    top:-10px;
    left:50%;
    transform:translateX(-50%);
    background:var(--secondary);
    color:var(--primary-dark);
    padding:.15rem .8rem;
    border-radius:var(--radius-xl);
    font-size:.7rem;
    font-weight:700;
    white-space:nowrap;
}
.areas-grid {
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    justify-content:center;
    margin-top:1rem;
}
.area-tag {
    background:var(--off-white);
    color:var(--primary);
    padding:.3rem .85rem;
    border-radius:var(--radius-xl);
    font-size:.78rem;
    font-weight:600;
    border:1px solid var(--light-gray);
}

/* ─── PRICING PAGE ───────────────────────────────────────────────── */
.pricing-note {
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    background:rgba(201,169,110,.1);
    border:1px solid var(--secondary);
    border-radius:var(--radius-md);
    padding:1rem 1.25rem;
    margin-bottom:3rem;
    color:var(--dark-gray);
    font-size:.85rem;
}
.pricing-note svg { color:var(--secondary); flex-shrink:0; margin-top:.1rem; }
.pricing-table-wrap { margin-bottom:3rem; }
.pricing-table-wrap h2 { font-size:1.2rem; font-weight:800; color:var(--primary); margin-bottom:1.25rem; }
.pricing-table-responsive { overflow-x:auto; }
.pricing-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.pricing-table th {
    background:var(--primary);
    color:var(--white);
    padding:.85rem 1rem;
    text-align:right;
    font-weight:700;
}
.pricing-table td { padding:.75rem 1rem; border-bottom:1px solid var(--light-gray); }
.pricing-table tr:hover td { background:var(--off-white); }
.pricing-table tr:last-child td { border-bottom:none; }
.price-cell { color:var(--secondary); font-weight:700; }

/* ─── CTA SECTION ────────────────────────────────────────────────── */
.cta-section {
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding:5rem 0;
    text-align:center;
}
.cta-section h2 {
    font-size:clamp(1.3rem,3vw,2rem);
    font-weight:900;
    color:var(--white);
    margin-bottom:.75rem;
}
.cta-section p {
    color:rgba(255,255,255,.8);
    max-width:560px;
    margin:0 auto 2rem;
    font-size:.95rem;
}
.cta-buttons { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }

/* ─── FOOTER ─────────────────────────────────────────────────────── */
.footer-content {
    background:var(--primary-dark);
    padding:4rem 0 2rem;
}
.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:2.5rem;
}
.footer-about { max-width:280px; }
.footer-logo {
    display:flex;
    align-items:center;
    gap:.6rem;
    margin-bottom:1rem;
}
.footer-logo-img-wrap {
    width:44px;
    height:44px;
    border-radius:50%;
    border:2px solid var(--secondary);
    overflow:hidden;
    background:rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.footer-logo-img { width:100%; height:100%; object-fit:cover; }
.footer-about p { font-size:.82rem; color:rgba(255,255,255,.65); line-height:1.8; margin-bottom:1.25rem; }

.footer-content h3 {
    font-size:.9rem;
    font-weight:800;
    color:var(--white);
    margin-bottom:1rem;
    padding-bottom:.5rem;
    border-bottom:2px solid var(--secondary);
}
.footer-links { display:flex; flex-direction:column; gap:.4rem; }
.footer-links li a {
    font-size:.8rem;
    color:rgba(255,255,255,.65);
    transition:color var(--transition);
    display:flex;
    align-items:center;
    gap:.3rem;
}
.footer-links li a:hover { color:var(--secondary); }

.footer-contact-item {
    display:flex;
    align-items:flex-start;
    gap:.6rem;
    font-size:.82rem;
    color:rgba(255,255,255,.7);
    margin-bottom:.75rem;
    line-height:1.5;
}
.footer-contact-item svg { color:var(--secondary); flex-shrink:0; margin-top:.1rem; }
.footer-contact-item a { color:rgba(255,255,255,.7); transition:color var(--transition); }
.footer-contact-item a:hover { color:var(--secondary); }

.footer-cta-btn {
    display:block;
    background:var(--secondary);
    color:var(--primary-dark);
    padding:.7rem 1rem;
    border-radius:var(--radius-md);
    text-align:center;
    font-weight:700;
    font-size:.82rem;
    margin-top:1rem;
    transition:all var(--transition);
}
.footer-cta-btn:hover { background:var(--secondary-dark); transform:translateY(-1px); }

/* Social Links */
.social-links { display:flex; gap:.6rem; flex-wrap:wrap; }
.social-link {
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    color:rgba(255,255,255,.7);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all var(--transition);
}
.social-link:hover {
    background:var(--secondary);
    color:var(--primary-dark);
    transform:translateY(-2px);
}
.social-link svg { width:16px; height:16px; }

/* Newsletter */
.newsletter {
    background:rgba(255,255,255,.06);
    border-radius:var(--radius-lg);
    padding:1.75rem;
    margin-top:2.5rem;
    border:1px solid rgba(255,255,255,.1);
}
.newsletter-inner { display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.newsletter-text { flex:1; }
.newsletter-text h4 { font-size:.95rem; font-weight:800; color:var(--white); margin-bottom:.25rem; }
.newsletter-text p { font-size:.78rem; color:rgba(255,255,255,.65); }
.newsletter-form { display:flex; gap:.5rem; min-width:280px; }
.newsletter-input {
    flex:1;
    padding:.6rem .9rem;
    border-radius:var(--radius-md);
    border:1.5px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.08);
    color:var(--white);
    font-family:'Cairo',sans-serif;
    font-size:.82rem;
    direction:rtl;
}
.newsletter-input::placeholder { color:rgba(255,255,255,.4); }
.newsletter-input:focus { outline:none; border-color:var(--secondary); }
.newsletter-btn {
    background:var(--secondary);
    color:var(--primary-dark);
    padding:.6rem 1rem;
    border-radius:var(--radius-md);
    font-weight:700;
    font-size:.82rem;
    display:flex;
    align-items:center;
    gap:.4rem;
    transition:all var(--transition);
    white-space:nowrap;
    cursor:pointer;
    border:none;
    font-family:inherit;
}
.newsletter-btn:hover { background:var(--secondary-dark); }

/* Footer Bottom */
.footer-bottom {
    background:rgba(0,0,0,.25);
    padding:1rem 0;
}
.footer-bottom-inner {
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:.75rem;
}
.footer-bottom p { font-size:.75rem; color:rgba(255,255,255,.5); }
.footer-bottom-links { display:flex; gap:1rem; flex-wrap:wrap; }
.footer-bottom-links a { font-size:.72rem; color:rgba(255,255,255,.45); transition:color var(--transition); }
.footer-bottom-links a:hover { color:var(--secondary); }

/* ─── FLOATING BUTTONS ───────────────────────────────────────────── */
.floating-btns {
    position:fixed;
    bottom:24px;
    left:24px;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    z-index:900;
}
.float-btn {
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-lg);
    transition:all var(--transition);
    text-decoration:none;
    border:none;
    cursor:pointer;
}
.float-btn:hover { transform:scale(1.12); }
.float-btn.whatsapp { background:#25D366; color:var(--white); }
.float-btn.phone-call { background:var(--secondary); color:var(--primary-dark); }
.float-btn.scroll-top { background:var(--primary); color:var(--white); }

/* ─── TOAST ──────────────────────────────────────────────────────── */
.toast-overlay {
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s;
}
.toast-overlay.show { opacity:1; pointer-events:all; }
.toast-box {
    background:var(--white);
    border-radius:var(--radius-xl);
    padding:2.5rem 2rem;
    text-align:center;
    max-width:360px;
    width:90%;
    box-shadow:var(--shadow-xl);
    transform:scale(.85);
    transition:transform .3s;
}
.toast-overlay.show .toast-box { transform:scale(1); }
.toast-icon {
    width:64px;
    height:64px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 1rem;
}
.toast-icon.success { background:rgba(34,197,94,.12); color:var(--success); }
.toast-icon.error { background:rgba(239,68,68,.12); color:var(--error); }
.toast-box h3 { font-size:1.1rem; font-weight:800; color:var(--primary); margin-bottom:.5rem; }
.toast-box p { font-size:.88rem; color:var(--medium-gray); margin-bottom:1.5rem; line-height:1.7; }
.toast-close {
    background:var(--secondary);
    color:var(--primary-dark);
    padding:.6rem 2rem;
    border-radius:var(--radius-md);
    font-weight:700;
    cursor:pointer;
    border:none;
    font-family:inherit;
    font-size:.88rem;
    transition:background var(--transition);
}
.toast-close:hover { background:var(--secondary-dark); }

/* ─── MISC ───────────────────────────────────────────────────────── */
.empty-state { text-align:center; padding:5rem 2rem; }
.empty-icon { font-size:4rem; margin-bottom:1rem; }
.empty-state h3 { font-size:1.1rem; font-weight:700; color:var(--primary); margin-bottom:.5rem; }
.empty-state p { color:var(--medium-gray); }

.filter-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin-bottom:2.5rem;
    justify-content:center;
}
.filter-tab {
    padding:.45rem 1.1rem;
    border-radius:var(--radius-xl);
    font-size:.82rem;
    font-weight:600;
    border:1.5px solid var(--light-gray);
    color:var(--medium-gray);
    background:var(--white);
    cursor:pointer;
    transition:all var(--transition);
    text-decoration:none;
    display:inline-block;
}
.filter-tab:hover,
.filter-tab.active {
    background:var(--secondary);
    color:var(--primary-dark);
    border-color:var(--secondary);
}

.pagination-wrap {
    display:flex;
    justify-content:center;
    margin-top:2.5rem;
}

/* Pricing FAQ */
.pricing-faq { max-width:700px; margin:0 auto; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width:1100px) {
    .features-grid,
    .services-grid { grid-template-columns:repeat(2,1fr); }
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    .products-grid { grid-template-columns:repeat(2,1fr); }
    .packages-full-grid { grid-template-columns:repeat(2,1fr); }
    .steps-grid { grid-template-columns:repeat(3,1fr); }
    .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
}

@media (max-width:900px) {
    .nav-links { display:none; }
    .nav-phone { display:none; }
    .nav-cta { display:none; }
    .menu-toggle { display:flex; }
    .top-bar { display:none; }
    :root { --total-nav: var(--navbar-h); }

    .projects-grid { grid-template-columns:repeat(2,1fr); }
    .testimonials-grid { grid-template-columns:1fr 1fr; }
    .packages-grid { grid-template-columns:1fr 1fr; }
    .blog-grid { grid-template-columns:repeat(2,1fr); }
    .branches-grid { grid-template-columns:1fr 1fr; }
    .vision-mission-grid { grid-template-columns:1fr; }
    .about-intro-layout { grid-template-columns:1fr; }

    .service-detail-layout,
    .project-detail-layout,
    .booking-layout,
    .blog-layout,
    .blog-post-layout,
    .contact-layout,
    .products-layout { grid-template-columns:1fr; }
    .service-detail-sidebar,
    .project-detail-sidebar,
    .booking-sidebar,
    .blog-sidebar,
    .products-sidebar { position:static; }

    .service-list-card { grid-template-columns:1fr; }
    .service-list-img { height:180px; }
    .product-detail-layout { grid-template-columns:1fr; }
    .contact-cards { grid-template-columns:1fr 1fr; }
}

@media (max-width:640px) {
    .section { padding:3.5rem 0; }
    .features-grid { grid-template-columns:1fr; }
    .services-grid { grid-template-columns:1fr; }
    .projects-grid { grid-template-columns:1fr; }
    .testimonials-grid { grid-template-columns:1fr; }
    .packages-grid { grid-template-columns:1fr; }
    .packages-full-grid { grid-template-columns:1fr; }
    .blog-grid { grid-template-columns:1fr; }
    .branches-grid { grid-template-columns:1fr; }
    .steps-grid { grid-template-columns:1fr 1fr; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .products-grid { grid-template-columns:1fr 1fr; }
    .contact-cards { grid-template-columns:1fr; }
    .services-checkboxes { grid-template-columns:1fr; }
    .form-grid { grid-template-columns:1fr; }
    .service-includes ul { grid-template-columns:1fr; }
    .product-features ul { grid-template-columns:1fr; }
    .gallery-grid { grid-template-columns:1fr 1fr; }
    .footer-grid { grid-template-columns:1fr; }
    .newsletter-form { flex-direction:column; }
    .newsletter-inner { flex-direction:column; }
    .hero-content { padding:4rem 20px 3rem; }
    .hero-buttons { flex-direction:column; align-items:flex-start; }
    .cta-buttons { flex-direction:column; align-items:center; }
    .filter-tabs { justify-content:flex-start; }
    .page-header { padding:3.5rem 0 2.5rem; }
    .floating-btns { bottom:16px; left:16px; }
    .footer-bottom-inner { flex-direction:column; text-align:center; }
    .footer-bottom-links { justify-content:center; }
}

@media (max-width:400px) {
    .products-grid { grid-template-columns:1fr; }
    .steps-grid { grid-template-columns:1fr; }
}