/*
Theme Name: MR Appliance Pro
Theme URI: https://meetdigitalmarketing.com
Author: Meet Digital Marketing
Author URI: https://meetdigitalmarketing.com
Description: Lightweight home appliance repair WordPress theme for Dubai & UAE.
Version: 3.2
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: mr-appliance-pro
Domain Path: /languages
*/

/* ============================================================================
   ROOT VARIABLES & RESET
   ============================================================================ */

:root {
	--primary-color: #0066cc;
	--secondary-color: #ff6b35;
	--accent-color: #25a724;
	--text-dark: #1a1a1a;
	--text-light: #666666;
	--border-color: #e0e0e0;
	--bg-light: #f9f9f9;
	--bg-white: #ffffff;
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-2xl: 3rem;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
	--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
	--shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
	--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	--transition: all 0.3s ease;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
	font-family: var(--font-family);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--text-dark);
	background: var(--bg-white);
	overflow-x: hidden;
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

h1,h2,h3,h4,h5,h6 {
	font-weight: 700;
	line-height: 1.2;
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	color: var(--text-dark);
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }
p { margin-bottom: var(--spacing-md); }
a { color: var(--primary-color); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--secondary-color); }
ul, ol { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

/* ============================================================================
   LAYOUT
   ============================================================================ */

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); }
.site-main { min-height: 50vh; }
section { padding: var(--spacing-2xl) 0; }
.section-header { text-align: center; margin-bottom: var(--spacing-2xl); }
.section-header h2 { color: var(--primary-color); margin-top: 0; }
.section-header p { font-size: 1.1rem; color: var(--text-light); margin-bottom: 0; }
.section-cta { text-align: center; margin-top: var(--spacing-2xl); }

/* ============================================================================
   SKIP LINK
   ============================================================================ */

.skip-to-main {
	position: absolute; top: -40px; left: 0;
	background: var(--primary-color); color: white;
	padding: var(--spacing-md); z-index: 100; text-decoration: none;
}
.skip-to-main:focus { top: 0; }

/* ============================================================================
   HEADER TOP BAR
   ============================================================================ */

.site-header { background: var(--bg-white); box-shadow: var(--shadow-sm); position: relative; z-index: 100; }

.header-top {
	background: var(--primary-color);
	color: white;
	padding: 0.6rem 0;
	font-size: 0.88rem;
}

.header-contact-info { display: flex; gap: var(--spacing-xl); flex-wrap: wrap; align-items: center; }

.contact-item { display: flex; align-items: center; gap: 0.4rem; }
.contact-item a { color: white; }
.contact-item a:hover { text-decoration: underline; }

/* ============================================================================
   NAVBAR
   ============================================================================ */

.navbar { padding: var(--spacing-lg) 0; transition: var(--transition); }
.navbar.sticky-active { box-shadow: var(--shadow-md); padding: var(--spacing-md) 0; }

.navbar-container { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-lg); }

.site-branding { flex-shrink: 0; }
.site-branding .site-title { margin: 0; font-size: 1.4rem; }
.site-branding a { color: var(--primary-color); }
.site-branding img { max-height: 50px; width: auto; }

/* Nav Menu */
.primary-menu-wrapper {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: center;
}
.primary-menu-wrapper ul {
	display: flex;
	list-style: none;
	gap: var(--spacing-xl);
	margin: 0;
	padding: 0;
}
.primary-menu-wrapper a {
	font-weight: 600;
	color: var(--text-dark);
	padding: 0.5rem 0;
	border-bottom: 2px solid transparent;
	transition: var(--transition);
	white-space: nowrap;
}
.primary-menu-wrapper a:hover,
.primary-menu-wrapper .current-menu-item > a {
	color: var(--primary-color);
	border-bottom-color: var(--primary-color);
}

.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	flex-shrink: 0;
}
.menu-toggle span { width: 25px; height: 3px; background: var(--text-dark); border-radius: 2px; transition: var(--transition); }

.header-cta { flex-shrink: 0; }

/* WhatsApp header button */
.btn-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: #25d366;
	color: white !important;
	padding: 0.5rem 1.2rem;
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: 0.95rem;
	transition: var(--transition);
	text-decoration: none;
}
.btn-whatsapp:hover { background: #1fb558; transform: translateY(-2px); }

/* ============================================================================
   FLOATING WHATSAPP
   ============================================================================ */

.floating-whatsapp {
	position: fixed;
	bottom: var(--spacing-lg);
	right: var(--spacing-lg);
	width: 58px;
	height: 58px;
	background: #25d366;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	text-decoration: none;
	box-shadow: var(--shadow-lg);
	z-index: 999;
	transition: var(--transition);
	animation: wapulse 2.5s infinite;
}
.floating-whatsapp:hover { color: white; transform: scale(1.1); }

@keyframes wapulse {
	0%, 100% { box-shadow: 0 8px 24px rgba(37,211,102,0.3); }
	50% { box-shadow: 0 8px 32px rgba(37,211,102,0.55); }
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.85rem 1.75rem;
	border: none;
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: var(--transition);
	background: var(--primary-color);
	color: white;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: white; }
.btn-primary { background: var(--primary-color); }
.btn-primary:hover { background: #0052a3; }
.btn-secondary { background: var(--secondary-color); }
.btn-secondary:hover { background: #e54920; }
.btn-outline { background: transparent; border: 2px solid var(--primary-color); color: var(--primary-color); }
.btn-outline:hover { background: var(--primary-color); color: white; }
.btn-lg { padding: 1.1rem 2.5rem; font-size: 1.1rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.9rem; }
.btn-block { display: flex; width: 100%; margin-bottom: var(--spacing-md); }

/* ============================================================================
   HERO SECTION
   ============================================================================ */

.hero-section {
	background: linear-gradient(135deg, #0066cc 0%, #0047a3 100%);
	color: white;
	padding: 4rem 0 3rem;
	text-align: center;
}
.hero-content { max-width: 800px; margin: 0 auto; padding: 0 var(--spacing-md); }
.hero-title { font-size: 3rem; font-weight: 800; margin-top: 0; margin-bottom: var(--spacing-lg); color: white; }
.hero-subtitle { font-size: 1.25rem; margin-bottom: var(--spacing-2xl); opacity: 0.95; }
.hero-cta-buttons { display: flex; gap: var(--spacing-md); justify-content: center; margin-bottom: var(--spacing-xl); flex-wrap: wrap; }
.hero-subtext { font-size: 0.95rem; opacity: 0.85; margin: 0; }

.hero-features { background: var(--bg-light); padding: var(--spacing-2xl) 0; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-xl); }
.feature-item { background: white; padding: var(--spacing-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; }
.feature-icon { font-size: 2.5rem; margin-bottom: var(--spacing-md); display: block; }
.feature-item h4 { margin-top: 0; color: var(--primary-color); }
.feature-item p { margin: 0; color: var(--text-light); font-size: 0.95rem; }

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

.page-header {
	background: linear-gradient(135deg, #0066cc 0%, #0047a3 100%);
	color: white;
	padding: var(--spacing-2xl) 0;
	text-align: center;
}
.page-header h1 { margin-top: 0; color: white; font-size: 2.5rem; }
.page-header p { font-size: 1.1rem; opacity: 0.95; margin-bottom: 0; }

/* ============================================================================
   GRIDS & CARDS
   ============================================================================ */

.services-grid,
.blog-grid,
.services-list-grid,
.blog-posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--spacing-xl);
	margin-bottom: var(--spacing-2xl);
}

.service-card,
.blog-card,
.blog-post-card {
	background: white;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	display: flex;
	flex-direction: column;
}
.service-card:hover,
.blog-card:hover,
.blog-post-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.service-image,
.blog-image,
.blog-featured-image { width: 100%; height: 220px; overflow: hidden; background: var(--bg-light); position: relative; }
.service-image img,
.blog-image img,
.blog-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.service-card:hover .service-image img,
.blog-card:hover .blog-image img { transform: scale(1.05); }

.service-content,
.blog-content { padding: var(--spacing-lg); flex: 1; display: flex; flex-direction: column; }

.service-title,
.blog-title,
.blog-post-title { margin-top: 0; margin-bottom: var(--spacing-md); font-size: 1.2rem; }
.service-title a,
.blog-title a,
.blog-post-title a { color: var(--text-dark); }
.service-title a:hover,
.blog-title a:hover,
.blog-post-title a:hover { color: var(--primary-color); }

.service-excerpt,
.blog-excerpt,
.blog-post-excerpt { color: var(--text-light); font-size: 0.95rem; flex: 1; margin-bottom: var(--spacing-md); }

.service-meta,
.blog-meta,
.blog-post-meta { display: flex; gap: var(--spacing-md); flex-wrap: wrap; font-size: 0.88rem; color: var(--text-light); margin-bottom: var(--spacing-md); }

.service-badge,
.cat-badge,
.post-category {
	display: inline-block;
	background: var(--bg-light);
	color: var(--primary-color);
	padding: 0.2rem 0.7rem;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 0.82rem;
}

.service-link,
.blog-link,
.read-more,
.read-more-link {
	color: var(--primary-color);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	transition: var(--transition);
	margin-top: auto;
}
.service-link:hover,
.blog-link:hover,
.read-more:hover,
.read-more-link:hover { color: var(--secondary-color); gap: 0.6rem; }

.post-date { font-weight: 500; }

/* ============================================================================
   SIDEBAR LAYOUT
   ============================================================================ */

.blog-archive,
.service-detail-content,
.blog-post-container {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: var(--spacing-2xl);
	align-items: start;
}

.sidebar-widget {
	background: var(--bg-light);
	padding: var(--spacing-lg);
	border-radius: var(--radius-lg);
	margin-bottom: var(--spacing-xl);
}
.sidebar-widget h4 { margin-top: 0; color: var(--primary-color); }
.sidebar-widget ul { list-style: none; }
.sidebar-widget li { padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); }
.sidebar-widget li:last-child { border-bottom: none; }
.sidebar-widget a { color: var(--text-dark); font-size: 0.95rem; }
.sidebar-widget a:hover { color: var(--primary-color); }

.sidebar-cta {
	background: linear-gradient(135deg, var(--primary-color), #0047a3);
	color: white;
	padding: var(--spacing-lg);
	border-radius: var(--radius-lg);
	margin-bottom: var(--spacing-xl);
	text-align: center;
}
.sidebar-cta h4 { color: white; margin-top: 0; }
.sidebar-cta p { font-size: 0.95rem; opacity: 0.95; margin-bottom: var(--spacing-md); }

/* ============================================================================
   CONTACT SECTION
   ============================================================================ */

.contact-section { background: var(--bg-light); }
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2xl); align-items: start; }
.contact-info h2 { margin-top: 0; color: var(--primary-color); }

.contact-methods { display: flex; flex-direction: column; gap: var(--spacing-lg); margin-top: var(--spacing-xl); }
.contact-method { background: white; padding: var(--spacing-lg); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.contact-method h4 { margin-top: 0; color: var(--primary-color); margin-bottom: 0.4rem; }
.contact-method p { margin: 0 0 0.3rem; font-weight: 600; }
.contact-method small { color: var(--text-light); font-size: 0.88rem; }

.contact-form { width: 100%; }
.form-group { margin-bottom: var(--spacing-lg); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }

label { display: block; margin-bottom: 0.4rem; font-weight: 600; font-size: 0.95rem; }

.form-control {
	width: 100%;
	padding: 0.85rem var(--spacing-md);
	border: 2px solid var(--border-color);
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: 1rem;
	color: var(--text-dark);
	background: white;
	transition: var(--transition);
}
.form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0,102,204,0.1); }
.form-control.invalid { border-color: #d32f2f; }
textarea.form-control { resize: vertical; min-height: 130px; }

.form-note { font-size: 0.88rem; color: var(--text-light); margin-top: var(--spacing-md); }

.form-response { padding: var(--spacing-md); border-radius: var(--radius-md); margin-top: var(--spacing-md); }
.form-response.hidden { display: none; }
.form-response.success { background: #e8f5e9; border-left: 4px solid var(--accent-color); color: #2e7d32; }
.form-response.error { background: #ffebee; border-left: 4px solid #d32f2f; color: #c62828; }
.form-response p { margin: 0; }

/* ============================================================================
   FAQ
   ============================================================================ */

.faq-section { background: var(--bg-light); }
.faq-accordion { max-width: 800px; margin: 0 auto var(--spacing-2xl); }
.faq-item { margin-bottom: var(--spacing-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }

.faq-question {
	width: 100%;
	padding: var(--spacing-lg);
	background: white;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-dark);
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
	transition: var(--transition);
}
.faq-question:hover { background: var(--bg-light); }
.faq-question[aria-expanded="true"] { background: var(--primary-color); color: white; }

.faq-icon { width: 22px; height: 22px; flex-shrink: 0; position: relative; }
.faq-icon::before,
.faq-icon::after { content: ''; position: absolute; background: currentColor; border-radius: 2px; transition: var(--transition); }
.faq-icon::before { width: 14px; height: 2px; top: 10px; left: 4px; }
.faq-icon::after { width: 2px; height: 14px; top: 4px; left: 10px; }
.faq-question[aria-expanded="true"] .faq-icon::after { transform: rotate(90deg); opacity: 0; }

.faq-answer { padding: var(--spacing-lg); background: white; line-height: 1.8; }
.faq-answer p { margin: 0; }

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

/* ============================================================================
   TESTIMONIALS
   ============================================================================ */

.testimonials-home,
.testimonials-section { background: var(--bg-light); }

.testimonials-carousel,
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-xl); }

.testimonial-item,
.testimonial-card {
	background: white;
	padding: var(--spacing-xl);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
}
.stars { color: #ffc107; font-size: 1.1rem; letter-spacing: 2px; display: block; margin-bottom: var(--spacing-md); }
.testimonial-text { font-style: italic; color: var(--text-light); line-height: 1.8; flex: 1; margin-bottom: var(--spacing-lg); }
.testimonial-author { display: flex; align-items: center; gap: var(--spacing-md); margin-top: auto; }
.testimonial-avatar { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg-light); }
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-rating { margin-top: var(--spacing-md); }

/* ============================================================================
   TRUST / STATS
   ============================================================================ */

.trust-section,
.company-stats { background: var(--bg-light); }

.trust-grid,
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--spacing-xl);
	text-align: center;
}

.trust-item,
.stat-item {
	background: white;
	padding: var(--spacing-xl);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.trust-number,
.stat-number { font-size: 2.5rem; font-weight: 800; color: var(--primary-color); display: block; margin-bottom: 0.5rem; }
.trust-item p,
.stat-label { margin: 0; font-weight: 600; }

/* ============================================================================
   SERVICE AREAS
   ============================================================================ */

.service-areas-home,
.service-areas-section { background: white; text-align: center; }

.service-areas-list-home { display: flex; gap: var(--spacing-md); flex-wrap: wrap; justify-content: center; margin: var(--spacing-2xl) 0; }

.area-badge {
	background: linear-gradient(135deg, var(--primary-color), #0047a3);
	color: white;
	padding: 0.7rem 1.4rem;
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: 0.95rem;
}

.areas-note { color: var(--text-light); font-size: 0.9rem; margin: 0; }

/* ============================================================================
   CONTACT INFO CARDS
   ============================================================================ */

.contact-info-section { background: var(--bg-light); }
.contact-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-xl); }

.contact-card {
	background: white;
	padding: var(--spacing-xl);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	text-align: center;
	transition: var(--transition);
}
.contact-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.card-icon { font-size: 2.5rem; margin-bottom: var(--spacing-md); display: block; }
.contact-card h3 { color: var(--primary-color); margin-top: 0; }
.contact-card small { color: var(--text-light); font-size: 0.88rem; display: block; margin-top: 0.5rem; }

/* ============================================================================
   CTA SECTION
   ============================================================================ */

.cta-section {
	background: linear-gradient(135deg, #0066cc, #0047a3);
	color: white;
	text-align: center;
}
.cta-section h2 { color: white; margin-top: 0; }
.cta-section p { font-size: 1.1rem; opacity: 0.95; margin-bottom: var(--spacing-xl); }
.cta-buttons { display: flex; gap: var(--spacing-lg); justify-content: center; flex-wrap: wrap; }

/* ============================================================================
   ABOUT PAGE
   ============================================================================ */

.company-values { background: white; }
.values-grid,
.reasons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--spacing-xl); }
.value-card,
.reason { background: var(--bg-light); padding: var(--spacing-xl); border-radius: var(--radius-lg); }
.value-card h3,
.reason h4 { margin-top: var(--spacing-md); color: var(--primary-color); }
.value-icon { font-size: 2rem; display: block; }

.why-choose-us { background: var(--bg-light); }

/* ============================================================================
   BLOG POST DETAIL
   ============================================================================ */

.post-featured-image { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--spacing-2xl); }
.post-featured-image img { width: 100%; height: auto; }

.post-header { margin-bottom: var(--spacing-xl); }
.post-meta { display: flex; gap: var(--spacing-lg); flex-wrap: wrap; font-size: 0.9rem; color: var(--text-light); margin: var(--spacing-md) 0; }
.post-categories { display: flex; gap: var(--spacing-md); flex-wrap: wrap; margin-bottom: var(--spacing-lg); }

.post-content { line-height: 1.9; margin-bottom: var(--spacing-2xl); }
.post-content p { margin-bottom: var(--spacing-lg); }
.post-content h2 { font-size: 1.8rem; margin-top: var(--spacing-2xl); }
.post-content h3 { font-size: 1.4rem; margin-top: var(--spacing-xl); }

.post-tags { display: flex; gap: var(--spacing-md); flex-wrap: wrap; padding: var(--spacing-lg) 0; border-top: 1px solid var(--border-color); }
.post-tag { background: var(--bg-light); color: var(--primary-color); padding: 0.3rem 0.8rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.88rem; transition: var(--transition); }
.post-tag:hover { background: var(--primary-color); color: white; }

.author-box { display: flex; gap: var(--spacing-lg); background: var(--bg-light); padding: var(--spacing-xl); border-radius: var(--radius-lg); margin: var(--spacing-2xl) 0; }
.author-avatar img { width: 80px; height: 80px; border-radius: 50%; }
.author-info h4 { margin-top: 0; color: var(--primary-color); }

.related-posts,
.related-services { padding-top: var(--spacing-2xl); border-top: 1px solid var(--border-color); margin-top: var(--spacing-2xl); }
.related-posts h3,
.related-services h3 { margin-top: 0; color: var(--primary-color); }
.related-posts-grid,
.services-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--spacing-lg); }

.related-post-card,
.service-mini-card { background: white; border: 1px solid var(--border-color); padding: var(--spacing-lg); border-radius: var(--radius-lg); transition: var(--transition); }
.related-post-card:hover,
.service-mini-card:hover { box-shadow: var(--shadow-md); }
.related-image { display: block; height: 180px; overflow: hidden; border-radius: var(--radius-md); margin-bottom: var(--spacing-md); }
.related-image img { width: 100%; height: 100%; object-fit: cover; }
.related-excerpt { color: var(--text-light); font-size: 0.9rem; margin-bottom: var(--spacing-md); }
.mini-link { color: var(--primary-color); font-weight: 600; }
.mini-link:hover { color: var(--secondary-color); }

/* ============================================================================
   SERVICE DETAIL PAGE
   ============================================================================ */

.service-hero-image { width: 100%; max-height: 400px; overflow: hidden; }
.service-hero-image img { width: 100%; height: 100%; object-fit: cover; }

.cta-box { background: linear-gradient(135deg, var(--primary-color), #0047a3); color: white; padding: var(--spacing-xl); border-radius: var(--radius-lg); margin-bottom: var(--spacing-xl); }
.cta-box h3 { color: white; margin-top: 0; text-align: center; }
.cta-buttons-wrap { display: flex; flex-direction: column; gap: var(--spacing-md); }

.service-info-box { background: rgba(255,255,255,0.15); border-radius: var(--radius-md); padding: var(--spacing-md); margin-top: var(--spacing-lg); font-size: 0.9rem; }
.service-info-box p { margin-bottom: 0.5rem; }
.service-info-box p:last-child { margin-bottom: 0; }

.service-categories ul,
.service-brands ul { list-style: none; margin-top: var(--spacing-md); }
.service-categories li,
.service-brands li { padding: 0.4rem 0; border-bottom: 1px solid var(--border-color); font-size: 0.95rem; }
.service-categories a,
.service-brands a { color: var(--text-dark); }
.service-categories a:hover,
.service-brands a:hover { color: var(--primary-color); }

/* ============================================================================
   FOOTER — COMPLETE FIX
   ============================================================================ */

.site-footer {
	background: #111827;
	color: #d1d5db;
	margin-top: 0;
}

.footer-top {
	padding: var(--spacing-2xl) 0;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: var(--spacing-xl);
}

.footer-col h3,
.footer-col h4 {
	color: #ffffff;
	margin-top: 0;
	margin-bottom: var(--spacing-lg);
	font-size: 1rem;
	letter-spacing: 0.02em;
}

.footer-col p {
	font-size: 0.92rem;
	line-height: 1.75;
	color: #9ca3af;
	margin-bottom: var(--spacing-lg);
}

.footer-menu,
.service-areas-list,
.contact-list,
.footer-legal { list-style: none; margin: 0; padding: 0; }

.footer-menu li,
.service-areas-list li { margin-bottom: 0.7rem; }

.footer-menu a,
.service-areas-list a {
	color: #9ca3af;
	font-size: 0.92rem;
	transition: var(--transition);
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}
.footer-menu a:hover,
.service-areas-list a:hover { color: white; padding-left: 4px; }

.contact-list li {
	margin-bottom: var(--spacing-md);
	font-size: 0.92rem;
	line-height: 1.6;
}
.contact-list strong { color: #e5e7eb; display: block; margin-bottom: 0.2rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
.contact-list a { color: #9ca3af; }
.contact-list a:hover { color: white; }
.hours-text { color: #9ca3af; }

/* Social Links */
.footer-social { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-md); }
.social-link {
	width: 38px;
	height: 38px;
	background: rgba(255,255,255,0.08);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #d1d5db;
	font-size: 1rem;
	transition: var(--transition);
	text-decoration: none;
}
.social-link:hover { background: var(--primary-color); color: white; transform: translateY(-2px); }

/* Footer Bottom */
.footer-bottom {
	padding: var(--spacing-lg) 0;
	background: rgba(0,0,0,0.2);
}

.footer-bottom-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-md);
}

.copyright { margin: 0; font-size: 0.88rem; color: #6b7280; }

.footer-legal { display: flex; gap: var(--spacing-lg); }
.footer-legal li { margin: 0; }
.footer-legal a { color: #6b7280; font-size: 0.88rem; transition: var(--transition); }
.footer-legal a:hover { color: white; }

/* ============================================================================
   SCROLL TO TOP
   ============================================================================ */

.scroll-to-top {
	position: fixed;
	bottom: -60px;
	right: var(--spacing-lg);
	width: 46px;
	height: 46px;
	background: var(--primary-color);
	color: white;
	border: none;
	border-radius: 50%;
	font-size: 1.3rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
	z-index: 99;
	box-shadow: var(--shadow-lg);
}
.scroll-to-top.visible { bottom: 5.5rem; }
.scroll-to-top:hover { background: var(--secondary-color); transform: translateY(-3px); }

/* ============================================================================
   PAGINATION
   ============================================================================ */

.pagination,
.nav-links { display: flex; gap: var(--spacing-md); justify-content: center; margin: var(--spacing-2xl) 0; flex-wrap: wrap; }
.page-numbers,
.nav-links a,
.nav-links span {
	padding: 0.65rem 1rem;
	border-radius: var(--radius-md);
	background: var(--bg-light);
	color: var(--text-dark);
	text-decoration: none;
	transition: var(--transition);
	border: 1px solid var(--border-color);
	font-size: 0.95rem;
}
.page-numbers:hover,
.nav-links a:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); }
.page-numbers.current { background: var(--primary-color); color: white; border-color: var(--primary-color); }

/* ============================================================================
   RESPONSIVE — MOBILE FIRST
   ============================================================================ */

@media (max-width: 1024px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.blog-archive,
	.service-detail-content,
	.blog-post-container { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	:root { font-size: 15px; }

	h1 { font-size: 2rem; }
	h2 { font-size: 1.6rem; }
	h3 { font-size: 1.3rem; }

	.hero-title { font-size: 2rem; }
	.hero-cta-buttons { flex-direction: column; }
	.hero-cta-buttons .btn { width: 100%; }

	.menu-toggle { display: flex; }

	.primary-menu-wrapper {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: white;
		box-shadow: var(--shadow-md);
		overflow: hidden;
		max-height: 0;
		transition: max-height 0.35s ease;
		z-index: 99;
		flex-direction: column;
	}
	.primary-menu-wrapper.active { max-height: 500px; }
	.primary-menu-wrapper ul { flex-direction: column; gap: 0; }
	.primary-menu-wrapper a { display: block; padding: var(--spacing-md); border-bottom: 1px solid var(--border-color); }

	.services-grid,
	.blog-grid,
	.services-list-grid,
	.blog-posts-grid,
	.contact-wrapper { grid-template-columns: 1fr; }

	.footer-grid { grid-template-columns: 1fr; gap: var(--spacing-xl); }
	.footer-bottom-content { flex-direction: column; text-align: center; }
	.footer-legal { justify-content: center; }

	.header-contact-info { flex-direction: column; gap: var(--spacing-sm); }
	.cta-buttons { flex-direction: column; }
	.cta-buttons .btn { width: 100%; }

	.form-row { grid-template-columns: 1fr; }
	.author-box { flex-direction: column; }

	.page-header h1 { font-size: 1.8rem; }
}

@media (max-width: 480px) {
	:root { font-size: 14px; }

	.hero-title { font-size: 1.6rem; }
	.hero-subtitle { font-size: 1rem; }
	.floating-whatsapp { width: 50px; height: 50px; font-size: 1.5rem; }
	.service-areas-list-home { flex-direction: column; }
	.area-badge { width: 100%; text-align: center; }
	.testimonials-carousel,
	.testimonials-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   PRINT
   ============================================================================ */

@media print {
	.site-header, .site-footer, .floating-whatsapp,
	.scroll-to-top, .sidebar-cta, .contact-form { display: none; }
	body { color: black; line-height: 1.5; }
	a { text-decoration: underline; }
}

/* ============================================================================
   SERVICES ARCHIVE — PROFESSIONAL
   ============================================================================ */

.services-page-header {
	background: linear-gradient(135deg, #003d82 0%, #0066cc 50%, #0080ff 100%);
	padding: 4rem 0 3rem;
}
.services-header-content { text-align: center; }
.services-header-content h1 { font-size: 2.8rem; color: white; margin-top: 0; }
.services-header-content > p { font-size: 1.2rem; color: rgba(255,255,255,0.9); margin-bottom: 2rem; }

.header-badges { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.header-badge {
	background: rgba(255,255,255,0.15);
	border: 1px solid rgba(255,255,255,0.3);
	color: white;
	padding: 0.4rem 1rem;
	border-radius: 50px;
	font-size: 0.9rem;
	font-weight: 600;
}

.services-archive-section { padding: 3rem 0; background: #f4f6f9; }

.services-pro-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.service-pro-card {
	background: white;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
}
.service-pro-card:hover { box-shadow: 0 12px 32px rgba(0,102,204,0.15); transform: translateY(-5px); }

.service-pro-image { position: relative; height: 220px; overflow: hidden; background: #e8f0fe; }
.service-pro-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.service-pro-card:hover .service-pro-image img { transform: scale(1.07); }
.service-no-image { display: flex; align-items: center; justify-content: center; height: 100%; text-decoration: none; background: linear-gradient(135deg, #e8f0fe, #c7d9f8); }
.service-icon-placeholder { font-size: 4rem; }

.service-pro-overlay {
	position: absolute; bottom: 0; left: 0; right: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
	padding: 1.5rem 1rem 1rem;
	opacity: 0; transition: opacity 0.3s ease;
	display: flex; justify-content: center;
}
.service-pro-card:hover .service-pro-overlay { opacity: 1; }

.service-pro-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.75rem; }
.service-cat-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.service-pro-title { font-size: 1.2rem; margin: 0; }
.service-pro-title a { color: #1a1a1a; }
.service-pro-title a:hover { color: #0066cc; }

.service-pro-excerpt { color: #666; font-size: 0.95rem; line-height: 1.6; margin: 0; flex: 1; }

.service-pro-features {
	display: flex; gap: 1rem;
	font-size: 0.85rem; color: #0066cc; font-weight: 600;
}

.service-pro-actions { display: flex; gap: 0.75rem; margin-top: auto; flex-wrap: wrap; }

.btn-whatsapp-sm {
	display: inline-flex; align-items: center; gap: 0.3rem;
	background: #25d366; color: white;
	padding: 0.5rem 1rem; border-radius: 8px;
	font-weight: 600; font-size: 0.9rem;
	text-decoration: none; transition: all 0.3s ease;
}
.btn-whatsapp-sm:hover { background: #1fb558; color: white; }

/* Why Strip */
.services-why-strip { background: #0066cc; padding: 2.5rem 0; }
.why-strip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.why-strip-item { display: flex; align-items: center; gap: 1rem; color: white; }
.why-icon { font-size: 2rem; flex-shrink: 0; }
.why-strip-item h4 { margin: 0 0 0.2rem; color: white; font-size: 1rem; }
.why-strip-item p { margin: 0; opacity: 0.85; font-size: 0.9rem; }

/* Brands */
.brands-section { background: white; padding: 3rem 0; }
.brands-grid { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }
.brand-chip {
	background: #f0f4ff;
	border: 1px solid #d0deff;
	color: #0066cc;
	padding: 0.5rem 1.2rem;
	border-radius: 50px;
	font-weight: 600;
	font-size: 0.9rem;
	transition: all 0.3s ease;
}
.brand-chip:hover { background: #0066cc; color: white; border-color: #0066cc; }

/* ============================================================================
   SERVICE POST — PROFESSIONAL
   ============================================================================ */

/* Hero */
.service-post-hero {
	position: relative;
	background: linear-gradient(135deg, #003d82, #0066cc);
	min-height: 380px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.service-post-hero-image { position: absolute; inset: 0; }
.service-post-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.service-post-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,20,60,0.5) 0%, rgba(0,20,60,0.85) 100%); }

.service-post-hero-content {
	position: relative;
	z-index: 2;
	padding: 3rem 1rem 2.5rem;
	color: white;
}

.breadcrumb { font-size: 0.88rem; color: rgba(255,255,255,0.75); margin-bottom: 1rem; }
.breadcrumb a { color: rgba(255,255,255,0.75); text-decoration: none; }
.breadcrumb a:hover { color: white; }
.breadcrumb span { margin: 0 0.4rem; }

.service-post-hero-content h1 { color: white; font-size: 2.5rem; margin: 0.5rem 0 1rem; }

.hero-badge {
	display: inline-block;
	background: rgba(255,255,255,0.2);
	border: 1px solid rgba(255,255,255,0.4);
	color: white;
	padding: 0.3rem 0.8rem;
	border-radius: 50px;
	font-size: 0.85rem;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
}

.service-post-hero-ctas { display: flex; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }

.btn-whatsapp-hero {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: #25d366; color: white;
	padding: 0.9rem 1.8rem; border-radius: 10px;
	font-weight: 700; font-size: 1rem;
	text-decoration: none; transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(37,211,102,0.3);
}
.btn-whatsapp-hero:hover { background: #1fb558; color: white; transform: translateY(-2px); }

.btn-call-hero {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: rgba(255,255,255,0.15);
	border: 2px solid rgba(255,255,255,0.6);
	color: white;
	padding: 0.9rem 1.8rem; border-radius: 10px;
	font-weight: 700; font-size: 1rem;
	text-decoration: none; transition: all 0.3s ease;
}
.btn-call-hero:hover { background: white; color: #0066cc; }

/* Trust Bar */
.service-trust-bar {
	background: #f0f4ff;
	border-bottom: 1px solid #d0deff;
	padding: 1rem 0;
}
.trust-bar-items { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.trust-bar-item {
	display: flex; align-items: center; gap: 0.4rem;
	font-size: 0.9rem; font-weight: 600; color: #0066cc;
}
.trust-bar-item span { font-size: 1.1rem; }

/* Layout */
.service-post-body { padding: 3rem 0; background: #f8f9fb; }
.service-post-layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 2rem;
	align-items: start;
}

/* Main Content */
.service-post-main { display: flex; flex-direction: column; gap: 2rem; }

.service-post-content {
	background: white;
	border-radius: 16px;
	padding: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	line-height: 1.9;
}
.service-post-content h2 { color: #0066cc; margin-top: 1.5rem; font-size: 1.5rem; }
.service-post-content h3 { color: #1a1a1a; margin-top: 1.2rem; }
.service-post-content ul { padding-left: 1.5rem; list-style: disc; }
.service-post-content li { margin-bottom: 0.5rem; }

/* What's Included */
.service-includes-box {
	background: linear-gradient(135deg, #e8f4fd, #f0f8ff);
	border: 1px solid #b8ddf8;
	border-radius: 16px;
	padding: 2rem;
}
.service-includes-box h3 { margin-top: 0; color: #0066cc; font-size: 1.2rem; }
.includes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem; }
.include-item {
	display: flex; align-items: center; gap: 0.5rem;
	background: white; padding: 0.75rem 1rem;
	border-radius: 8px; font-size: 0.9rem; font-weight: 500;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.include-item span { font-size: 1.2rem; }

/* How It Works */
.how-it-works {
	background: white;
	border-radius: 16px;
	padding: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.how-it-works h3 { margin-top: 0; color: #1a1a1a; }
.steps-row { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 1.5rem; flex-wrap: wrap; }
.step-item { flex: 1; text-align: center; min-width: 120px; }
.step-num {
	width: 48px; height: 48px;
	background: #0066cc; color: white;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.3rem; font-weight: 800;
	margin: 0 auto 0.75rem;
}
.step-item h4 { margin: 0 0 0.3rem; font-size: 0.95rem; color: #1a1a1a; }
.step-item p { margin: 0; font-size: 0.85rem; color: #666; }
.step-arrow { font-size: 1.5rem; color: #0066cc; margin-top: 0.75rem; font-weight: 700; flex-shrink: 0; }

/* Brands & Areas */
.service-brands-box,
.service-areas-box {
	background: white;
	border-radius: 16px;
	padding: 1.5rem 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.service-brands-box h3,
.service-areas-box h3 { margin-top: 0; color: #1a1a1a; font-size: 1.1rem; }
.brands-chips,
.areas-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.75rem; }
.area-chip {
	background: linear-gradient(135deg, #0066cc, #0047a3);
	color: white; padding: 0.4rem 1rem;
	border-radius: 50px; font-size: 0.88rem; font-weight: 600;
}

/* Related Services */
.related-services {
	background: white; border-radius: 16px;
	padding: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.related-services h3 { margin-top: 0; color: #1a1a1a; }
.related-services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.related-service-card { border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; transition: all 0.3s ease; }
.related-service-card:hover { box-shadow: 0 6px 20px rgba(0,102,204,0.12); transform: translateY(-3px); }
.related-service-img { display: block; height: 140px; overflow: hidden; }
.related-service-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.related-service-card:hover .related-service-img img { transform: scale(1.05); }
.related-service-body { padding: 1rem; }
.related-service-body h4 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.related-service-body h4 a { color: #1a1a1a; }
.related-service-body h4 a:hover { color: #0066cc; }
.related-service-body p { font-size: 0.85rem; color: #666; margin-bottom: 0.5rem; }

/* Sticky Sidebar */
.service-post-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1.5rem; }

/* Book Now Box */
.book-now-box {
	background: white;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,102,204,0.12);
	border: 1px solid #d0deff;
}
.book-now-header {
	background: linear-gradient(135deg, #0066cc, #0047a3);
	padding: 1.5rem;
	text-align: center;
	color: white;
}
.book-now-header h3 { margin: 0 0 0.3rem; color: white; font-size: 1.2rem; }
.book-now-header p { margin: 0; opacity: 0.9; font-size: 0.9rem; }

.book-now-actions { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }

.btn-book-whatsapp,
.btn-book-call {
	display: flex; align-items: center; gap: 0.75rem;
	padding: 0.9rem 1rem;
	border-radius: 10px;
	text-decoration: none;
	transition: all 0.3s ease;
	font-size: 0.95rem;
}
.btn-book-whatsapp { background: #25d366; color: white; }
.btn-book-whatsapp:hover { background: #1fb558; color: white; transform: translateY(-2px); }
.btn-book-call { background: #0066cc; color: white; }
.btn-book-call:hover { background: #0052a3; color: white; transform: translateY(-2px); }
.btn-book-whatsapp span,
.btn-book-call span { font-size: 1.5rem; flex-shrink: 0; }
.btn-book-whatsapp strong,
.btn-book-call strong { display: block; font-size: 0.95rem; }
.btn-book-whatsapp small,
.btn-book-call small { font-size: 0.8rem; opacity: 0.85; }

.book-now-info {
	padding: 0 1.25rem 1.25rem;
	display: flex; flex-direction: column; gap: 0.6rem;
	border-top: 1px solid #f0f0f0;
	padding-top: 1rem;
}
.info-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: #444; }
.info-row > span:first-child { font-size: 1.1rem; flex-shrink: 0; }

/* Sidebar Services List */
.sidebar-services-list { list-style: none; }
.sidebar-services-list li { border-bottom: 1px solid #f0f0f0; }
.sidebar-services-list li:last-child { border-bottom: none; }
.sidebar-services-list a {
	display: flex; align-items: center; gap: 0.5rem;
	padding: 0.65rem 0;
	color: #1a1a1a; font-size: 0.92rem;
	text-decoration: none; transition: all 0.3s ease;
}
.sidebar-services-list a:hover { color: #0066cc; padding-left: 4px; }

/* Sidebar Reviews */
.sidebar-reviews {
	background: white;
	border-radius: 16px;
	padding: 1.5rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.sidebar-reviews h4 { margin-top: 0; color: #1a1a1a; margin-bottom: 1rem; }
.review-item { background: #f9f9f9; border-radius: 10px; padding: 1rem; margin-bottom: 0.75rem; }
.review-item:last-child { margin-bottom: 0; }
.review-stars { color: #ffc107; font-size: 0.9rem; margin-bottom: 0.4rem; }
.review-item p { font-size: 0.85rem; color: #555; font-style: italic; margin: 0 0 0.4rem; line-height: 1.6; }
.review-item small { font-size: 0.8rem; color: #888; font-weight: 600; }

/* ============================================================================
   RESPONSIVE — SERVICES & SERVICE POST
   ============================================================================ */

@media (max-width: 1024px) {
	.service-post-layout { grid-template-columns: 1fr; }
	.service-post-sidebar { position: static; }
	.steps-row { justify-content: center; }
	.step-arrow { display: none; }
}

@media (max-width: 768px) {
	.services-header-content h1 { font-size: 1.8rem; }
	.service-post-hero-content h1 { font-size: 1.8rem; }
	.service-post-hero-ctas { flex-direction: column; }
	.btn-whatsapp-hero, .btn-call-hero { width: 100%; justify-content: center; }
	.trust-bar-items { gap: 1rem; }
	.includes-grid { grid-template-columns: 1fr; }
	.services-pro-grid { grid-template-columns: 1fr; }
	.service-pro-overlay { opacity: 1; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); }
	.why-strip-grid { grid-template-columns: 1fr 1fr; }
	.steps-row { flex-direction: column; align-items: center; gap: 1rem; }
}

@media (max-width: 480px) {
	.header-badges { flex-direction: column; align-items: center; }
	.why-strip-grid { grid-template-columns: 1fr; }
	.service-post-hero { min-height: 280px; }
}

/* ============================================================================
   BLOG INDEX — PROFESSIONAL
   ============================================================================ */

.blog-page-header {
	background: linear-gradient(135deg, #003d82 0%, #0066cc 60%, #1a8cff 100%);
	padding: 4rem 0 3rem;
	text-align: center;
}
.blog-page-header h1 { color: white; font-size: 2.8rem; margin-top: 0; }
.blog-page-header p  { color: rgba(255,255,255,0.9); font-size: 1.15rem; margin-bottom: 1.5rem; }

.blog-main-section { background: #f4f6f9; padding: 3rem 0; }

.blog-layout {
	display: grid;
	grid-template-columns: 1fr 310px;
	gap: 2rem;
	align-items: start;
}

/* Featured Card (first post) */
.blog-featured-card {
	background: white;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	margin-bottom: 1.5rem;
	transition: all 0.3s ease;
}
.blog-featured-card:hover { box-shadow: 0 8px 32px rgba(0,102,204,0.15); transform: translateY(-3px); }

.blog-featured-img { position: relative; height: 380px; overflow: hidden; }
.blog-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-featured-card:hover .blog-featured-img img { transform: scale(1.04); }
.blog-featured-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.3), transparent 60%); }
.blog-featured-meta { position: absolute; top: 1rem; left: 1rem; }

.blog-featured-body { padding: 2rem; }

.blog-featured-title { font-size: 1.7rem; margin: 0.75rem 0; line-height: 1.3; }
.blog-featured-title a { color: #1a1a1a; }
.blog-featured-title a:hover { color: #0066cc; }
.blog-featured-excerpt { color: #555; font-size: 1rem; line-height: 1.7; margin-bottom: 1.5rem; }

/* Regular grid */
.blog-pro-grid { display: flex; flex-direction: column; gap: 1rem; }

.blog-pro-card {
	background: white;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.07);
	display: flex;
	flex-direction: row;
	transition: all 0.3s ease;
}
.blog-pro-card:hover { box-shadow: 0 8px 24px rgba(0,102,204,0.12); transform: translateY(-2px); }

.blog-pro-img { width: 220px; flex-shrink: 0; position: relative; overflow: hidden; background: #e8f0fe; }
.blog-pro-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-pro-card:hover .blog-pro-img img { transform: scale(1.06); }
.blog-no-img { display: flex; align-items: center; justify-content: center; font-size: 3rem; min-height: 160px; }

.blog-pro-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }

.post-info-row { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; color: #888; }

.blog-pro-title { font-size: 1.15rem; margin: 0; line-height: 1.4; }
.blog-pro-title a { color: #1a1a1a; }
.blog-pro-title a:hover { color: #0066cc; }
.blog-pro-excerpt { color: #666; font-size: 0.92rem; line-height: 1.6; flex: 1; margin: 0; }

.blog-pro-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid #f0f0f0; }
.blog-author-chip { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #555; font-weight: 500; }
.blog-author-chip img { width: 28px; height: 28px; border-radius: 50%; }

/* Category Badge */
.post-cat-badge {
	display: inline-block;
	background: #0066cc;
	color: white;
	padding: 0.25rem 0.75rem;
	border-radius: 50px;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
}
.post-cat-badge:hover { background: #0052a3; color: white; }

/* Pagination */
.blog-pagination { margin-top: 2rem; }
.blog-pagination .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.blog-pagination .page-numbers {
	padding: 0.6rem 1rem; border-radius: 8px;
	background: white; border: 1px solid #e0e0e0;
	color: #333; font-weight: 600; font-size: 0.9rem;
	text-decoration: none; transition: all 0.3s ease;
}
.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current { background: #0066cc; color: white; border-color: #0066cc; }

/* No posts */
.no-posts-msg { text-align: center; padding: 4rem 2rem; background: white; border-radius: 16px; }
.no-posts-msg span { font-size: 3rem; display: block; margin-bottom: 1rem; }
.no-posts-msg h3 { color: #1a1a1a; margin: 0 0 0.5rem; }
.no-posts-msg p  { color: #666; margin: 0; }

/* ============================================================================
   BLOG SIDEBAR — PROFESSIONAL
   ============================================================================ */

.blog-pro-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1.5rem; }

/* CTA Box */
.sidebar-cta-box {
	background: linear-gradient(135deg, #003d82, #0066cc);
	border-radius: 16px;
	padding: 1.75rem;
	text-align: center;
	color: white;
}
.sidebar-cta-icon { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; }
.sidebar-cta-box h4 { color: white; margin: 0 0 0.5rem; font-size: 1.1rem; }
.sidebar-cta-box p  { color: rgba(255,255,255,0.85); font-size: 0.9rem; margin-bottom: 1.25rem; }

.btn-sidebar-wa {
	display: flex; align-items: center; justify-content: center; gap: 0.5rem;
	background: #25d366; color: white;
	padding: 0.85rem; border-radius: 10px;
	font-weight: 700; font-size: 0.95rem;
	text-decoration: none; margin-bottom: 0.75rem;
	transition: all 0.3s ease;
}
.btn-sidebar-wa:hover { background: #1fb558; color: white; }
.btn-sidebar-call {
	display: flex; align-items: center; justify-content: center; gap: 0.5rem;
	background: rgba(255,255,255,0.15); color: white;
	border: 1px solid rgba(255,255,255,0.4);
	padding: 0.85rem; border-radius: 10px;
	font-weight: 700; font-size: 0.88rem;
	text-decoration: none; transition: all 0.3s ease;
}
.btn-sidebar-call:hover { background: white; color: #0066cc; }

/* Widgets */
.sidebar-widget {
	background: white; border-radius: 14px;
	padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.sidebar-widget h4 { margin: 0 0 1rem; font-size: 1rem; color: #1a1a1a; padding-bottom: 0.75rem; border-bottom: 2px solid #f0f0f0; }

/* Sidebar Search */
.sidebar-widget .search-form { display: flex; gap: 0.5rem; }
.sidebar-widget .search-field {
	flex: 1; padding: 0.65rem 1rem;
	border: 2px solid #e0e0e0; border-radius: 8px;
	font-family: inherit; font-size: 0.9rem;
	transition: border-color 0.3s ease;
}
.sidebar-widget .search-field:focus { outline: none; border-color: #0066cc; }
.sidebar-widget .search-submit {
	padding: 0.65rem 1rem; background: #0066cc; color: white;
	border: none; border-radius: 8px; cursor: pointer;
	font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease;
}
.sidebar-widget .search-submit:hover { background: #0052a3; }

/* Sidebar Categories */
.sidebar-cats { list-style: none; }
.sidebar-cats li { border-bottom: 1px solid #f5f5f5; }
.sidebar-cats li:last-child { border-bottom: none; }
.sidebar-cats a {
	display: flex; justify-content: space-between;
	padding: 0.6rem 0; color: #444; font-size: 0.92rem;
	text-decoration: none; transition: all 0.3s ease;
}
.sidebar-cats a:hover { color: #0066cc; padding-left: 4px; }

/* Sidebar Recent Posts */
.sidebar-recent { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.sidebar-recent li { display: flex; gap: 0.75rem; align-items: flex-start; }
.recent-thumb { width: 60px; height: 60px; flex-shrink: 0; border-radius: 8px; overflow: hidden; display: block; }
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.recent-info { flex: 1; }
.recent-info a { display: block; font-size: 0.88rem; font-weight: 600; color: #1a1a1a; line-height: 1.4; margin-bottom: 0.25rem; text-decoration: none; }
.recent-info a:hover { color: #0066cc; }
.recent-info small { color: #999; font-size: 0.8rem; }

/* Sidebar Services */
.sidebar-services { list-style: none; display: flex; flex-direction: column; gap: 0.25rem; }
.sidebar-services li { border-bottom: 1px solid #f5f5f5; }
.sidebar-services li:last-child { border-bottom: none; }
.sidebar-services a { display: block; padding: 0.55rem 0; color: #444; font-size: 0.9rem; text-decoration: none; transition: all 0.3s ease; }
.sidebar-services a:hover { color: #0066cc; padding-left: 6px; }

/* ============================================================================
   SINGLE BLOG POST — PROFESSIONAL
   ============================================================================ */

/* Post Hero */
.post-hero { position: relative; background: linear-gradient(135deg, #003d82, #0066cc); min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; }
.post-hero-image { position: absolute; inset: 0; }
.post-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.post-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,20,60,0.4) 0%, rgba(0,20,60,0.88) 100%); }

.post-hero-content { position: relative; z-index: 2; padding: 3rem 1rem 2.5rem; color: white; }
.post-cats-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.post-hero-title { color: white; font-size: 2.5rem; margin: 0.5rem 0 1.25rem; line-height: 1.25; }
.post-hero-meta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; font-size: 0.9rem; color: rgba(255,255,255,0.85); }
.post-hero-meta img { border-radius: 50%; border: 2px solid white; }
.post-hero-meta span { display: flex; align-items: center; gap: 0.4rem; }

/* Post Body Layout */
.post-body-section { background: #f4f6f9; padding: 3rem 0; }
.post-layout {
	display: grid;
	grid-template-columns: 1fr 310px;
	gap: 2rem;
	align-items: start;
}

/* Share Bar */
.post-share-bar {
	display: flex; align-items: center; gap: 0.75rem;
	padding: 1rem 1.5rem; background: #f8f9ff;
	border: 1px solid #e0e8ff; border-radius: 10px;
	margin-bottom: 1.5rem; flex-wrap: wrap;
	font-size: 0.9rem; font-weight: 600; color: #666;
}
.share-btn {
	padding: 0.4rem 1rem; border-radius: 6px;
	font-size: 0.85rem; font-weight: 600;
	text-decoration: none; transition: all 0.3s ease;
}
.share-fb  { background: #1877f2; color: white; }
.share-fb:hover  { background: #166fe5; color: white; }
.share-wa  { background: #25d366; color: white; }
.share-wa:hover  { background: #1fb558; color: white; }
.share-tw  { background: #1da1f2; color: white; }
.share-tw:hover  { background: #0d8ecf; color: white; }

/* Article Body */
.post-main-content {
	background: white; border-radius: 16px;
	padding: 2.5rem; box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.post-article-body { font-size: 1.05rem; line-height: 1.9; color: #333; margin-bottom: 2rem; }
.post-article-body h2 { font-size: 1.6rem; color: #0066cc; margin-top: 2rem; padding-top: 1rem; border-top: 2px solid #f0f4ff; }
.post-article-body h3 { font-size: 1.3rem; color: #1a1a1a; margin-top: 1.5rem; }
.post-article-body p  { margin-bottom: 1.25rem; }
.post-article-body ul, .post-article-body ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.post-article-body li { margin-bottom: 0.5rem; }
.post-article-body img { border-radius: 10px; margin: 1.5rem 0; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.post-article-body blockquote {
	border-left: 4px solid #0066cc; background: #f0f7ff;
	padding: 1.25rem 1.5rem; margin: 1.5rem 0;
	border-radius: 0 10px 10px 0; font-style: italic; color: #444;
}

/* Tags */
.post-tags-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 1.25rem 0; border-top: 1px solid #f0f0f0; margin-bottom: 1.5rem; font-size: 0.9rem; color: #666; font-weight: 600; }
.post-tag {
	background: #f0f4ff; color: #0066cc;
	padding: 0.3rem 0.8rem; border-radius: 50px;
	font-size: 0.85rem; font-weight: 600;
	text-decoration: none; transition: all 0.3s ease; border: 1px solid #d0deff;
}
.post-tag:hover { background: #0066cc; color: white; }

/* Post Navigation */
.post-nav-row {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
	margin-bottom: 2rem;
}
.post-nav-prev, .post-nav-next {
	background: #f8f9ff; border: 1px solid #e0e8ff;
	padding: 1rem 1.25rem; border-radius: 10px;
	transition: all 0.3s ease;
}
.post-nav-prev:hover, .post-nav-next:hover { background: #f0f4ff; border-color: #0066cc; }
.post-nav-next { text-align: right; }
.post-nav-prev a, .post-nav-next a { color: #1a1a1a; text-decoration: none; font-weight: 600; font-size: 0.9rem; line-height: 1.5; }
.post-nav-prev span, .post-nav-next span { display: block; font-size: 0.8rem; color: #0066cc; font-weight: 700; margin-bottom: 0.25rem; }
.post-nav-prev a:hover, .post-nav-next a:hover { color: #0066cc; }

/* Author Box */
.post-author-box {
	display: flex; gap: 1.5rem; align-items: flex-start;
	background: linear-gradient(135deg, #f0f7ff, #e8f0fe);
	border: 1px solid #c7d9f8; border-radius: 14px;
	padding: 1.75rem; margin-bottom: 2rem;
}
.author-avatar-lg img { width: 90px; height: 90px; border-radius: 50%; border: 3px solid white; box-shadow: 0 4px 12px rgba(0,0,0,0.1); flex-shrink: 0; }
.author-box-info small { color: #0066cc; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.author-box-info h4 { margin: 0.25rem 0 0.5rem; font-size: 1.1rem; }
.author-box-info p { margin: 0; color: #555; font-size: 0.92rem; line-height: 1.6; }

/* Related Posts */
.related-posts-section { border-top: 2px solid #f0f0f0; padding-top: 2rem; }
.related-posts-section h3 { margin-top: 0; color: #1a1a1a; margin-bottom: 1.5rem; }
.related-posts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.related-post-item { border: 1px solid #e8e8e8; border-radius: 12px; overflow: hidden; transition: all 0.3s ease; }
.related-post-item:hover { box-shadow: 0 6px 20px rgba(0,102,204,0.1); transform: translateY(-2px); }
.related-post-img { display: block; height: 140px; overflow: hidden; }
.related-post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.related-post-item:hover .related-post-img img { transform: scale(1.05); }
.related-post-info { padding: 1rem; }
.related-post-info small { color: #999; font-size: 0.8rem; }
.related-post-info h4 { font-size: 0.9rem; margin: 0.3rem 0 0.5rem; line-height: 1.4; }
.related-post-info h4 a { color: #1a1a1a; text-decoration: none; }
.related-post-info h4 a:hover { color: #0066cc; }

/* ============================================================================
   RESPONSIVE — BLOG
   ============================================================================ */

@media (max-width: 1024px) {
	.blog-layout, .post-layout { grid-template-columns: 1fr; }
	.blog-pro-sidebar { position: static; }
}
@media (max-width: 768px) {
	.blog-page-header h1 { font-size: 2rem; }
	.post-hero-title { font-size: 1.75rem; }
	.blog-featured-img { height: 240px; }
	.blog-pro-card { flex-direction: column; }
	.blog-pro-img { width: 100%; height: 200px; }
	.related-posts-row { grid-template-columns: 1fr; }
	.post-nav-row { grid-template-columns: 1fr; }
	.post-hero { min-height: 300px; }
	.post-main-content { padding: 1.5rem; }
	.post-author-box { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
	.blog-page-header h1 { font-size: 1.6rem; }
	.post-hero-title { font-size: 1.4rem; }
	.post-share-bar { justify-content: center; }
}

/* ============================================================================
   CALLBACK SECTION
   ============================================================================ */

.callback-section {
	background: var(--bg-light, #f9f9f9);
	padding: var(--spacing-xl, 40px) 0;
}

.callback-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-2xl, 50px);
	align-items: start;
}

/* LEFT: CONTENT ONLY */
.callback-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md, 20px);
}

.callback-subtitle {
	font-size: 0.95rem;
	color: var(--primary-color, #0066cc);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
}

.callback-content h2 {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text-dark, #222);
	margin: 0 0 10px 0;
}

.callback-content p {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--text-secondary, #555);
	margin: 0;
}

.callback-benefits {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md, 15px);
	margin: var(--spacing-lg, 25px) 0;
}

.benefit-item {
	display: flex;
	gap: var(--spacing-md, 15px);
	align-items: flex-start;
}

.benefit-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-width: 28px;
	background: rgba(0, 102, 204, 0.1);
	border-radius: 50%;
	color: var(--primary-color, #0066cc);
	font-weight: bold;
	font-size: 1.2rem;
	flex-shrink: 0;
}

.benefit-item strong {
	display: block;
	font-size: 1rem;
	color: var(--text-dark, #222);
	margin-bottom: 4px;
}

.benefit-item p {
	font-size: 0.95rem;
	color: var(--text-secondary, #555);
	line-height: 1.5;
	margin: 0;
}

/* RIGHT: FORM ONLY */
.callback-form-box {
	display: flex;
	align-items: flex-start;
}

.callback-form {
	width: 100%;
	background: white;
	border: 1px solid var(--border-color, #e0e0e0);
	border-radius: var(--radius-lg, 8px);
	padding: var(--spacing-xl, 30px);
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.05));
}

.callback-form h3 {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 5px 0;
	color: var(--text-dark, #222);
}

.callback-form .form-subtitle {
	font-size: 0.85rem;
	color: var(--text-light, #999);
	margin: 0 0 var(--spacing-lg, 20px) 0;
}

.callback-form .form-group {
	margin-bottom: var(--spacing-lg, 18px);
}

.callback-form .form-note {
	font-size: 0.85rem;
	color: var(--text-light, #999);
	margin-top: var(--spacing-md, 15px);
	text-align: center;
	margin-bottom: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.callback-wrapper {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl, 30px);
	}

	.callback-content h2 {
		font-size: 1.6rem;
	}

	.callback-form {
		padding: var(--spacing-lg, 24px);
	}

	.callback-form h3 {
		font-size: 1.3rem;
	}
}

@media (max-width: 480px) {
	.callback-section {
		padding: var(--spacing-lg, 20px) 0;
	}

	.callback-content h2 {
		font-size: 1.4rem;
	}

	.callback-content p {
		font-size: 0.95rem;
	}

	.callback-form {
		padding: var(--spacing-md, 20px);
	}

	.callback-form h3 {
		font-size: 1.2rem;
	}

	.callback-form .form-control {
		font-size: 16px;
		padding: var(--spacing-md, 12px);
	}
}