/* ═══════════════════════════════════════════════════
   ورشة لؤلؤة الشمال — الهوية البصرية
   ألوان: كحلي #1a2332 | برتقالي #f97316 | رمادي #f9fafb
   ═══════════════════════════════════════════════════ */

:root {
    --navy: #1a2332;
    --navy-light: #2d3e50;
    --orange: #f97316;
    --orange-dark: #ea580c;
    --orange-light: #fed7aa;
    --green: #10b981;
    --green-light: #d1fae5;
    --blue: #3b82f6;
    --blue-light: #dbeafe;
    --purple: #8b5cf6;
    --purple-light: #e9d5ff;
    --danger: #ef4444;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --white: #ffffff;
    --gold: #f97316;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,.1);
    --shadow-lg: 0 10px 25px rgba(0,0,0,.15);
    --shadow-xl: 0 20px 25px rgba(0,0,0,.15);
    --radius-sm: .375rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    --transition: all .3s ease;
}

/* ═══ Reset ═══ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif;
    direction: rtl;
    text-align: right;
    background: var(--gray-50);
    color: var(--navy);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block; }
ul,ol { list-style:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ═══ Container ═══ */
.container { max-width:1200px; margin:0 auto; padding:0 1rem; }

/* ═══════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════ */
.navbar {
    position: fixed; top:0; right:0; left:0; z-index:1000;
    background: var(--navy);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}
.navbar.scrolled { background: rgba(26,35,50,.97); backdrop-filter:blur(12px); }
.nav-inner {
    max-width:1200px; margin:0 auto; padding:0 1rem;
    display:flex; align-items:center; justify-content:space-between; height:76px;
}
.logo { display:flex; align-items:center; gap:.7rem; }
.logo-img { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--orange-dark)); padding:6px; }
.logo-text { font-size:1.15rem; font-weight:800; color:#fff; }
.nav-links { display:flex; gap:1.6rem; align-items:center; }
.nav-links a { color:rgba(255,255,255,.85); font-size:.92rem; font-weight:500; transition:var(--transition); position:relative; padding:.25rem 0; }
.nav-links a::after { content:''; position:absolute; bottom:0; right:0; width:0; height:2px; background:var(--orange); transition:width .3s; }
.nav-links a:hover, .nav-links a.active { color:var(--orange); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-cta {
    background:var(--orange); color:#fff; padding:.55rem 1.3rem; border-radius:var(--radius-md);
    font-weight:700; font-size:.88rem; transition:var(--transition);
}
.nav-cta:hover { background:var(--orange-dark); transform:translateY(-1px); }

/* Hamburger */
.menu-toggle { display:none; background:none; border:none; cursor:pointer; padding:.5rem; flex-direction:column; gap:5px; }
.hb { width:24px; height:2.5px; background:#fff; border-radius:2px; transition:var(--transition); }

/* ═══ Sidebar Mobile ═══ */
.sb-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1100; opacity:0; pointer-events:none; transition:opacity .35s; }
.sb-overlay.open { opacity:1; pointer-events:auto; }
.sidebar {
    position:fixed; top:0; right:-300px; width:280px; height:100vh; z-index:1200;
    background:var(--navy); transition:right .35s ease; overflow-y:auto; display:flex; flex-direction:column;
}
.sidebar.open { right:0; }
.sb-close { position:absolute; top:1rem; left:1rem; background:none; border:none; color:rgba(255,255,255,.6); cursor:pointer; }
.sb-head { padding:2rem 1.5rem 1rem; text-align:center; border-bottom:1px solid rgba(255,255,255,.08); }
.sb-head img { width:60px; height:60px; margin:0 auto; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--orange-dark)); padding:6px; }
.sb-tagline { color:var(--gray-400); font-size:.78rem; margin-top:.5rem; }
.sb-nav { padding:1rem 0; flex:1; }
.sb-link { display:flex; align-items:center; gap:.8rem; padding:.75rem 1.5rem; color:rgba(255,255,255,.8); font-size:.9rem; transition:var(--transition); }
.sb-link svg { width:20px; height:20px; }
.sb-link:hover, .sb-link.active { background:rgba(249,115,22,.1); color:var(--orange); }
.sb-foot { padding:1rem 1.5rem 2rem; border-top:1px solid rgba(255,255,255,.08); }
.sb-cta { display:block; background:var(--orange); color:#fff; text-align:center; padding:.75rem; border-radius:var(--radius-md); font-weight:700; font-size:.9rem; margin-bottom:.8rem; }
.sb-phone { display:flex; align-items:center; justify-content:center; gap:.4rem; color:var(--gray-400); font-size:.85rem; }

@media(max-width:1024px) {
    .nav-links, .nav-cta { display:none; }
    .menu-toggle { display:flex; }
}

/* ═══════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════ */
.hero {
    position:relative; min-height:600px; display:flex; align-items:center; justify-content:center;
    overflow:hidden; padding-top:76px;
}
.hero-bg { position:absolute; inset:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(26,35,50,.92), rgba(45,62,80,.85)); }
.hero-content { position:relative; z-index:10; text-align:center; padding:3rem 1rem; max-width:900px; }
.hero-content h1 { font-size:clamp(1.8rem,5vw,3.2rem); color:#fff; font-weight:800; line-height:1.3; margin-bottom:1.2rem; }
.hero-content h1 .highlight { color:var(--orange); }
.hero-content p { font-size:clamp(1rem,2.5vw,1.25rem); color:var(--gray-300); margin-bottom:2rem; line-height:1.8; }
.hero-badge {
    display:inline-flex; align-items:center; gap:.5rem;
    background:rgba(249,115,22,.2); border:1px solid rgba(249,115,22,.5);
    border-radius:var(--radius-full); padding:.45rem 1.2rem; margin-bottom:1.5rem;
    color:#fb923c; font-size:.9rem; font-weight:600;
}
.hero-features { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:2rem; }
.hero-feature { display:flex; align-items:center; gap:.5rem; color:var(--gray-300); font-size:.92rem; }
.hero-feature svg { color:var(--orange); flex-shrink:0; }
.hero-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* Scroll Indicator */
.scroll-indicator { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:10; }
.scroll-indicator-inner { width:24px; height:40px; border:2px solid rgba(255,255,255,.3); border-radius:12px; display:flex; justify-content:center; padding-top:6px; }
.scroll-indicator-dot { width:4px; height:8px; background:var(--orange); border-radius:2px; animation:scrollDot 2s infinite; }
@keyframes scrollDot { 0%,100%{ transform:translateY(0); opacity:1; } 50%{ transform:translateY(12px); opacity:0; } }

/* ═══ Buttons ═══ */
.btn-primary {
    display:inline-flex; align-items:center; gap:.5rem;
    background:var(--orange); color:#fff; padding:.7rem 1.6rem;
    border-radius:var(--radius-md); font-weight:700; font-size:.92rem;
    transition:var(--transition); border:none; cursor:pointer;
}
.btn-primary:hover { background:var(--orange-dark); transform:translateY(-2px); box-shadow:0 4px 12px rgba(249,115,22,.35); }
.btn-secondary {
    display:inline-flex; align-items:center; gap:.5rem;
    background:transparent; color:#fff; padding:.65rem 1.5rem;
    border-radius:var(--radius-md); font-weight:600; font-size:.92rem;
    border:2px solid rgba(255,255,255,.3); transition:var(--transition); cursor:pointer;
}
.btn-secondary:hover { border-color:#fff; background:rgba(255,255,255,.1); }
.btn-white {
    display:inline-flex; align-items:center; gap:.5rem;
    background:#fff; color:var(--orange); padding:.7rem 1.6rem;
    border-radius:var(--radius-md); font-weight:700; font-size:.92rem;
    transition:var(--transition); border:none; cursor:pointer;
}
.btn-white:hover { background:var(--gray-100); transform:translateY(-2px); }
.btn-outline {
    display:inline-flex; align-items:center; gap:.5rem;
    background:transparent; color:var(--orange); padding:.65rem 1.5rem;
    border:2px solid var(--orange); border-radius:var(--radius-md);
    font-weight:600; font-size:.92rem; transition:var(--transition); cursor:pointer;
}
.btn-outline:hover { background:var(--orange); color:#fff; }
.btn-success { background:var(--green); color:#fff; padding:.5rem 1rem; border-radius:var(--radius-md); font-weight:600; transition:var(--transition); border:none; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; }
.btn-success:hover { background:#059669; }
.btn-large { padding:1rem 2rem; font-size:1rem; }

/* ═══════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════ */
.section { padding:4.5rem 0; }
.section-gray { background:var(--gray-50); }
.section-white { background:var(--white); }
.section-dark { background:linear-gradient(135deg, var(--navy), var(--navy-light)); color:#fff; }
.section-orange { background:linear-gradient(135deg, var(--orange), var(--orange-dark)); color:#fff; }
.section-py { padding:4.5rem 0; }
.section-header { text-align:center; margin-bottom:3rem; }
.section-header h2 { font-size:clamp(1.5rem,4vw,2.2rem); font-weight:800; margin-bottom:.5rem; }
.divider { width:60px; height:4px; background:var(--orange); border-radius:2px; margin:.8rem auto; }
.subtitle { color:var(--gray-500); font-size:1.05rem; max-width:600px; margin:0 auto; }
.text-center { text-align:center; }

/* ═══════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════ */
.page-header {
    position:relative; padding:140px 0 60px; text-align:center; overflow:hidden;
    background:linear-gradient(135deg, var(--navy), var(--navy-light));
}
.page-header-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.15; }
.page-header-overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(26,35,50,.9), rgba(45,62,80,.85)); }
.page-header h1 { position:relative; z-index:2; font-size:clamp(1.8rem,5vw,3rem); color:#fff; font-weight:800; margin-bottom:.8rem; }
.page-header p { position:relative; z-index:2; color:var(--gray-300); font-size:1.15rem; }
.breadcrumb {
    position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:.5rem;
    margin-top:1.2rem; font-size:.88rem; color:var(--gray-400);
}
.breadcrumb a { color:var(--orange); transition:var(--transition); }
.breadcrumb a:hover { color:var(--orange-dark); }

/* ═══════════════════════════════════════════════════
   SERVICES GRID
   ═══════════════════════════════════════════════════ */
.services-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.5rem; }
.service-card {
    background:#fff; padding:2rem 1.5rem; border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm); border:1px solid var(--gray-200);
    transition:var(--transition); text-align:center;
}
.service-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-6px); border-color:var(--orange-light); }
.service-icon {
    width:64px; height:64px; margin:0 auto 1rem;
    background:linear-gradient(135deg, rgba(249,115,22,.1), rgba(249,115,22,.05));
    border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center;
}
.service-icon svg { width:28px; height:28px; stroke:var(--orange); }
.service-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:.5rem; color:var(--navy); }
.service-card p { color:var(--gray-500); font-size:.9rem; line-height:1.7; }
.service-card .price { color:var(--orange); font-weight:700; margin-top:.8rem; font-size:1rem; }
.card-link { color:var(--orange); font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:.25rem; margin-top:.8rem; transition:var(--transition); }
.card-link:hover { color:var(--orange-dark); gap:.5rem; }

/* Service Category (services page) */
.service-category { margin-bottom:3.5rem; }
.service-category h2 {
    font-size:1.6rem; font-weight:800; margin-bottom:1.5rem;
    padding-right:1rem; border-right:4px solid var(--orange); color:var(--navy);
}

/* ═══════════════════════════════════════════════════
   BRANDS
   ═══════════════════════════════════════════════════ */
.brands-logos-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:1.5rem; }
.brand-logo-card {
    background:#fff; padding:1.5rem; border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm); border:2px solid transparent;
    text-align:center; transition:var(--transition); cursor:default;
}
.brand-logo-card:hover { border-color:var(--orange-light); background:rgba(249,115,22,.03); transform:translateY(-4px); }
.brand-logo-card img { height:50px; margin:0 auto; object-fit:contain; }

/* ═══════════════════════════════════════════════════
   FEATURES / WHY US
   ═══════════════════════════════════════════════════ */
.features-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.5rem; }
.feature-card {
    background:#fff; padding:1.8rem; border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm); border:1px solid var(--gray-200); transition:var(--transition);
}
.feature-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.feature-icon {
    width:48px; height:48px; background:linear-gradient(135deg, rgba(249,115,22,.1), rgba(249,115,22,.05));
    border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.feature-icon svg { width:22px; height:22px; stroke:var(--orange); }
.feature-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:.4rem; color:var(--navy); }
.feature-card p { color:var(--gray-500); font-size:.88rem; }

/* Stats */
.stats-section { margin-top:3rem; padding:2.5rem; background:linear-gradient(135deg, var(--navy), var(--navy-light)); border-radius:var(--radius-xl); }
.stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem; text-align:center; }
.stat-number { font-size:2rem; font-weight:800; color:var(--orange); margin-bottom:.3rem; }
.stat-label { color:var(--gray-300); font-size:.9rem; }
@media(max-width:768px) { .stats-grid { grid-template-columns:repeat(2,1fr); } }

/* ═══════════════════════════════════════════════════
   GALLERY
   ═══════════════════════════════════════════════════ */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1rem; }
.gallery-item {
    position:relative; border-radius:var(--radius-lg); overflow:hidden; height:220px;
    cursor:pointer; display:block;
}
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.gallery-item:hover img { transform:scale(1.08); }
.gallery-overlay {
    position:absolute; inset:0; background:linear-gradient(to top, rgba(26,35,50,.8), transparent);
    display:flex; align-items:flex-end; padding:1.2rem; opacity:0; transition:opacity .3s;
}
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-title { color:#fff; font-weight:700; font-size:.95rem; }

/* ═══════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════ */
.testimonials-section { padding:4.5rem 0; background:var(--gray-50); }
.testimonial-slider { max-width:700px; margin:0 auto; position:relative; min-height:200px; }
.testimonial-slide { display:none; text-align:center; animation:fadeIn .5s; }
.testimonial-slide.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
.testimonial-stars { font-size:1.2rem; color:var(--orange); margin-bottom:1rem; letter-spacing:2px; }
.testimonial-text { font-size:1.1rem; color:var(--gray-700); line-height:1.9; margin-bottom:1.5rem; font-style:italic; }
.testimonial-author { display:flex; align-items:center; justify-content:center; gap:.8rem; }
.testimonial-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--orange-light); }
.testimonial-name { font-weight:700; color:var(--navy); }
.testimonial-title { color:var(--gray-500); font-size:.85rem; }
.testimonial-controls { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.5rem; }
.testimonial-btn { background:none; border:2px solid var(--gray-300); width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:1.2rem; color:var(--navy); transition:var(--transition); }
.testimonial-btn:hover { border-color:var(--orange); color:var(--orange); }
.testimonial-dots { display:flex; gap:.4rem; }
.testimonial-dot { width:10px; height:10px; border-radius:50%; background:var(--gray-300); border:none; cursor:pointer; transition:var(--transition); }
.testimonial-dot.active { background:var(--orange); transform:scale(1.3); }

/* ═══════════════════════════════════════════════════
   BLOG
   ═══════════════════════════════════════════════════ */
.blog-layout { display:grid; grid-template-columns:1fr 320px; gap:2.5rem; }
@media(max-width:900px) { .blog-layout { grid-template-columns:1fr; } }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.5rem; margin-bottom:2rem; }
.blog-card { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; transition:var(--transition); }
.blog-card:hover { box-shadow:var(--shadow-lg); }
.blog-card a { display:block; text-decoration:none; color:inherit; }
.blog-image { height:200px; overflow:hidden; position:relative; background:linear-gradient(135deg, var(--orange-light), #fdba74); }
.blog-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.blog-card:hover .blog-image img { transform:scale(1.05); }
.blog-category { position:absolute; top:1rem; right:1rem; background:var(--orange); color:#fff; font-size:.75rem; font-weight:700; padding:.25rem .75rem; border-radius:var(--radius-full); }
.blog-content { padding:1.3rem; }
.blog-meta { display:flex; align-items:center; gap:.8rem; margin-bottom:.6rem; font-size:.82rem; color:var(--gray-500); }
.blog-meta-item { display:flex; align-items:center; gap:.25rem; }
.blog-excerpt { color:var(--gray-500); font-size:.88rem; margin-bottom:.8rem; line-height:1.7; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.blog-link { color:var(--orange); font-weight:600; font-size:.88rem; transition:var(--transition); }
.blog-link:hover { color:var(--orange-dark); }

/* Sidebar */
.blog-sidebar { display:flex; flex-direction:column; gap:1.5rem; }
.sidebar-widget { background:#fff; padding:1.5rem; border-radius:var(--radius-lg); border:1px solid var(--gray-200); }
.sidebar-widget h3 { font-size:1.1rem; font-weight:700; margin-bottom:1rem; padding-bottom:.5rem; border-bottom:2px solid var(--orange); color:var(--navy); }
.sidebar-post { display:flex; gap:.8rem; padding:.6rem 0; border-bottom:1px solid var(--gray-100); transition:var(--transition); }
.sidebar-post:hover { padding-right:.3rem; }
.sidebar-post:last-child { border-bottom:none; }
.sidebar-post img { width:60px; height:45px; border-radius:var(--radius-sm); object-fit:cover; flex-shrink:0; }
.sidebar-post-info h4 { font-size:.85rem; font-weight:600; color:var(--navy); line-height:1.5; }
.sidebar-post-info span { font-size:.75rem; color:var(--gray-400); }

/* Post Detail */
.post-detail { max-width:800px; margin:0 auto; }
.post-detail h1 { font-size:clamp(1.5rem,4vw,2.2rem); font-weight:800; color:var(--navy); margin-bottom:1rem; line-height:1.5; }
.post-meta-detail { display:flex; flex-wrap:wrap; gap:1rem; color:var(--gray-500); font-size:.88rem; margin-bottom:1.5rem; }
.post-featured-image { border-radius:var(--radius-xl); overflow:hidden; margin-bottom:2rem; }
.post-featured-image img { width:100%; height:auto; }
.post-body { font-size:1.05rem; line-height:2; color:var(--gray-700); }
.post-body h2 { font-size:1.4rem; font-weight:700; color:var(--navy); margin:2rem 0 .8rem; }
.post-body h3 { font-size:1.2rem; font-weight:700; color:var(--navy); margin:1.5rem 0 .6rem; }
.post-body p { margin-bottom:1rem; }
.post-body img { border-radius:var(--radius-md); margin:1.5rem 0; }
.post-body ul, .post-body ol { padding-right:1.5rem; margin-bottom:1rem; }
.post-body li { margin-bottom:.4rem; }
.post-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin:2rem 0 1.5rem; }
.post-tag { background:var(--gray-100); color:var(--gray-700); font-size:.82rem; padding:.3rem .8rem; border-radius:var(--radius-full); transition:var(--transition); }
.post-tag:hover { background:var(--orange-light); color:var(--orange-dark); }

/* Share Buttons */
.share-buttons { display:flex; align-items:center; gap:.6rem; margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--gray-200); }
.share-buttons span { font-weight:600; color:var(--navy); font-size:.9rem; }
.share-btn { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:var(--transition); border:none; cursor:pointer; }
.share-btn.twitter { background:#1da1f2; color:#fff; }
.share-btn.facebook { background:#1877f2; color:#fff; }
.share-btn.whatsapp { background:#25d366; color:#fff; }
.share-btn.linkedin { background:#0077b5; color:#fff; }
.share-btn.copy { background:var(--gray-200); color:var(--navy); }
.share-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }

.related-posts { margin-top:3rem; }
.related-posts h3 { font-size:1.3rem; font-weight:700; margin-bottom:1.5rem; color:var(--navy); }

/* ═══════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════ */
.faq-container { max-width:800px; margin:0 auto; }
.faq-item { background:#fff; border-radius:var(--radius-lg); margin-bottom:.8rem; border:1px solid var(--gray-200); overflow:hidden; }
.faq-question {
    display:flex; justify-content:space-between; align-items:center;
    padding:1.2rem 1.5rem; width:100%; background:none; border:none;
    cursor:pointer; font-size:1rem; font-weight:600; color:var(--navy);
    text-align:right; transition:var(--transition); font-family:inherit;
}
.faq-question:hover { background:var(--gray-50); }
.faq-icon { color:var(--orange); font-size:1.3rem; font-weight:700; transition:transform .3s; }
.faq-question.open .faq-icon { transform:rotate(45deg); }
.faq-answer {
    max-height:0; overflow:hidden; transition:max-height .4s ease, padding .3s;
    padding:0 1.5rem; color:var(--gray-500); line-height:1.8; font-size:.95rem;
}
.faq-answer.open { max-height:500px; padding:0 1.5rem 1.5rem; }

/* ═══════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════ */
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; margin-bottom:.4rem; color:rgba(255,255,255,.8); font-weight:500; font-size:.9rem; }
.form-control {
    width:100%; padding:.75rem 1rem; border:2px solid var(--gray-300); border-radius:var(--radius-md);
    font-size:.95rem; transition:var(--transition); font-family:inherit; background:#fff; color:var(--navy);
}
.form-control:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,.15); }
.form-textarea { resize:vertical; min-height:120px; }
.quick-form { display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem; }
@media(max-width:600px) { .quick-form { grid-template-columns:1fr; } }

/* Quick Booking Bar */
.quick-booking {
    background:#fff; padding:2rem 0;
    box-shadow:var(--shadow-lg); margin-top:-2.5rem;
    position:relative; z-index:20; border-radius:var(--radius-xl);
    max-width:1100px; margin-left:auto; margin-right:auto;
}
.quick-booking h3 { text-align:center; font-size:1.2rem; font-weight:700; margin-bottom:1.5rem; color:var(--navy); }
.quick-booking-form {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:1rem; padding:0 2rem;
}
@media(max-width:768px) { .quick-booking-form { grid-template-columns:1fr; } }

/* Contact Info */
.contact-info {
    display:flex; align-items:flex-start; gap:1rem;
    background:#fff; padding:1.3rem; border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm); margin-bottom:1.2rem; transition:var(--transition);
}
.contact-info:hover { box-shadow:var(--shadow-md); }
.contact-icon {
    width:48px; height:48px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-icon.orange { background:var(--orange-light); }
.contact-icon.green { background:var(--green-light); }
.contact-icon.blue { background:var(--blue-light); }
.contact-icon.purple { background:var(--purple-light); }

/* ═══════════════════════════════════════════════════
   CTA SECTION
   ═══════════════════════════════════════════════════ */
.cta-section {
    padding:4.5rem 1rem; text-align:center;
    background:linear-gradient(135deg, var(--orange), var(--orange-dark)); color:#fff;
}
.cta-section h2 { font-size:clamp(1.5rem,4vw,2.5rem); font-weight:800; margin-bottom:.8rem; }
.cta-section p { font-size:1.15rem; color:rgba(255,255,255,.9); margin-bottom:2rem; }
.cta-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
.footer { background:var(--navy); color:rgba(255,255,255,.8); }
.footer-content { padding:4rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:2.5rem; }
.footer-section h4 { color:#fff; font-size:1.1rem; font-weight:700; margin-bottom:1.2rem; position:relative; padding-bottom:.6rem; }
.footer-section h4::after { content:''; position:absolute; bottom:0; right:0; width:40px; height:3px; background:var(--orange); border-radius:2px; }
.footer-logo img { width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--orange-dark)); padding:5px; margin-bottom:1rem; }
.footer-section p { font-size:.9rem; line-height:1.8; color:rgba(255,255,255,.65); margin-bottom:1rem; }
.footer-links { display:flex; flex-direction:column; gap:.5rem; }
.footer-links li a { color:rgba(255,255,255,.65); font-size:.9rem; transition:var(--transition); display:flex; align-items:center; gap:.3rem; }
.footer-links li a::before { content:'←'; font-size:.75rem; color:var(--orange); opacity:0; transition:var(--transition); }
.footer-links li a:hover { color:var(--orange); padding-right:.5rem; }
.footer-links li a:hover::before { opacity:1; }
.social-links { display:flex; gap:.6rem; }
.social-link {
    width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center; transition:var(--transition);
    color:rgba(255,255,255,.7);
}
.social-link:hover { background:var(--orange); color:#fff; transform:translateY(-2px); }
.contact-item { display:flex; align-items:flex-start; gap:.6rem; margin-bottom:.8rem; font-size:.88rem; color:rgba(255,255,255,.65); }
.contact-item svg { flex-shrink:0; margin-top:2px; color:var(--orange); }
.contact-item a { color:rgba(255,255,255,.65); transition:var(--transition); }
.contact-item a:hover { color:var(--orange); }

/* Newsletter */
.newsletter { text-align:center; padding:2.5rem 0; border-top:1px solid rgba(255,255,255,.08); margin-top:2rem; }
.newsletter h4 { color:#fff; font-size:1.15rem; font-weight:700; margin-bottom:.4rem; }
.newsletter p { color:rgba(255,255,255,.6); font-size:.9rem; margin-bottom:1.2rem; }
.newsletter-form { display:flex; max-width:450px; margin:0 auto; gap:.5rem; }
.newsletter-input {
    flex:1; padding:.7rem 1rem; border:2px solid rgba(255,255,255,.15); border-radius:var(--radius-md);
    background:rgba(255,255,255,.05); color:#fff; font-size:.9rem; font-family:inherit;
}
.newsletter-input::placeholder { color:rgba(255,255,255,.4); }
.newsletter-input:focus { outline:none; border-color:var(--orange); }
.newsletter-btn {
    background:var(--orange); color:#fff; padding:.7rem 1.5rem; border:none;
    border-radius:var(--radius-md); font-weight:700; cursor:pointer; transition:var(--transition); font-family:inherit;
}
.newsletter-btn:hover { background:var(--orange-dark); }

/* Footer Bottom */
.footer-bottom { padding:1.2rem 0; border-top:1px solid rgba(255,255,255,.08); }
.footer-bottom-content { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.footer-bottom p { font-size:.82rem; color:rgba(255,255,255,.45); }
.footer-bottom-links { display:flex; gap:1.5rem; }
.footer-bottom-links a { color:rgba(255,255,255,.45); font-size:.82rem; transition:var(--transition); }
.footer-bottom-links a:hover { color:var(--orange); }

/* ═══════════════════════════════════════════════════
   FLOATING BUTTONS
   ═══════════════════════════════════════════════════ */
.floating-btns { position:fixed; bottom:2rem; left:2rem; z-index:999; display:flex; flex-direction:column; gap:.8rem; }
.float-btn {
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,.2); transition:var(--transition);
    text-decoration:none; border:none; cursor:pointer;
}
.float-btn:hover { transform:scale(1.12); }
.float-btn.whatsapp { background:#25d366; color:#fff; }
.float-btn.phone-call { background:var(--orange); color:#fff; }
.float-btn.scroll-top { background:#fff; color:var(--navy); border:1px solid var(--gray-200); }

/* ═══════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════ */
.toast-overlay { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; }
.toast-overlay.show { opacity:1; pointer-events:auto; }
.toast-box { background:#fff; border-radius:var(--radius-xl); padding:2.5rem; text-align:center; max-width:400px; width:90%; box-shadow:var(--shadow-xl); }
.toast-icon { margin-bottom:1rem; }
.toast-icon.success { color:var(--green); }
.toast-icon.error { color:var(--danger); }
.toast-box h3 { font-size:1.2rem; font-weight:700; margin-bottom:.5rem; color:var(--navy); }
.toast-box p { color:var(--gray-500); font-size:.92rem; margin-bottom:1.5rem; }
.toast-close { background:var(--orange); color:#fff; border:none; padding:.6rem 2rem; border-radius:var(--radius-md); font-weight:700; cursor:pointer; font-family:inherit; transition:var(--transition); }
.toast-close:hover { background:var(--orange-dark); }

/* ═══════════════════════════════════════════════════
   BOOKING PAGE (Stepper)
   ═══════════════════════════════════════════════════ */
.booking-card { background:#fff; padding:2.5rem; border-radius:var(--radius-xl); box-shadow:var(--shadow-md); max-width:900px; margin:0 auto; }
.progress-bar { display:flex; justify-content:space-between; margin-bottom:2rem; position:relative; }
.progress-step { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; }
.step-circle {
    width:40px; height:40px; border-radius:50%; border:2px solid var(--gray-300); background:var(--gray-100);
    color:var(--gray-400); display:flex; align-items:center; justify-content:center;
    font-weight:700; transition:var(--transition); z-index:2; font-size:.9rem;
}
.step-circle.active { background:var(--orange); border-color:var(--orange); color:#fff; }
.step-circle.completed { background:var(--green); border-color:var(--green); color:#fff; }
.selection-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:1rem; }
.selection-item {
    padding:1.2rem; border:2px solid var(--gray-200); border-radius:var(--radius-md);
    cursor:pointer; transition:var(--transition); text-align:center; font-weight:600;
}
.selection-item:hover { border-color:var(--orange); background:rgba(249,115,22,.03); }
.selection-item.selected { border-color:var(--orange); background:rgba(249,115,22,.06); }
.time-slots { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:.6rem; }
.confirmation-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; background:var(--gray-50); padding:1.5rem; border-radius:var(--radius-lg); }
.confirmation-label { font-size:.85rem; color:var(--gray-500); margin-bottom:.2rem; }
.confirmation-value { font-size:1.05rem; color:var(--navy); font-weight:700; }

/* ═══════════════════════════════════════════════════
   CATEGORY TABS
   ═══════════════════════════════════════════════════ */
.category-tabs { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.5rem; }
.category-tab {
    padding:.45rem 1.3rem; border-radius:var(--radius-full);
    border:1px solid var(--gray-200); background:#fff; color:var(--gray-700);
    cursor:pointer; font-size:.9rem; transition:var(--transition); font-family:inherit;
}
.category-tab:hover, .category-tab.active { background:var(--orange); color:#fff; border-color:var(--orange); }

/* ═══════════════════════════════════════════════════
   VALUES GRID (About page)
   ═══════════════════════════════════════════════════ */
.values-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1.5rem; }
.value-card { background:#fff; padding:1.8rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); text-align:center; transition:var(--transition); }
.value-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.value-icon { font-size:2.5rem; margin-bottom:1rem; }
.value-card h3 { font-size:1.15rem; font-weight:700; margin-bottom:.4rem; color:var(--navy); }
.value-card p { color:var(--gray-500); font-size:.9rem; }

/* Stat Icon */
.stat-icon-box { width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }
.stat-icon-box.orange { background:var(--orange-light); }
.stat-icon-box.blue { background:var(--blue-light); }
.stat-icon-box.green { background:var(--green-light); }
.stat-icon-box.purple { background:var(--purple-light); }

/* ═══════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════ */
.rv { opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease; }
.rv.d1 { transition-delay:.15s; }
.rv.d2 { transition-delay:.3s; }
.rv.d3 { transition-delay:.45s; }
.rv.in { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════ */
.empty-state { text-align:center; padding:4rem 1rem; }
.empty-state h3 { font-size:1.3rem; font-weight:700; color:var(--navy); margin-bottom:.5rem; }
.empty-state p { color:var(--gray-500); }

/* ═══════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════ */
.pagination { display:flex; justify-content:center; gap:.3rem; margin-top:2rem; }
.pagination a, .pagination span { padding:.5rem 1rem; border-radius:var(--radius-md); font-size:.9rem; transition:var(--transition); }
.pagination a { background:#fff; color:var(--navy); border:1px solid var(--gray-200); }
.pagination a:hover { background:var(--orange); color:#fff; border-color:var(--orange); }
.pagination .active span { background:var(--orange); color:#fff; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media(max-width:768px) {
    .hero { min-height:500px; }
    .services-grid { grid-template-columns:1fr; }
    .features-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; }
    .footer-bottom-content { flex-direction:column; text-align:center; }
    .hero-features { flex-direction:column; align-items:center; }
    .newsletter-form { flex-direction:column; }
    .floating-btns { left:1rem; bottom:1rem; }
    .float-btn { width:50px; height:50px; }
    .quick-booking { margin-top:0; border-radius:0; }
    .confirmation-grid { grid-template-columns:1fr; }
}