/*
Theme Name: The Motive Media - Multi-Page SEO, AEO & GEO Agency Theme
Theme URI: https://themotivemedia.com/
Author: The Motive Media
Author URI: https://themotivemedia.com/
Description: Multi-page, SEO-ready WordPress Digital Marketing Agency Theme for The Motive Media (Jaipur, India). Features dedicated separate pages for all 12 services (AEO, GEO, SEO, Performance Marketing, Google Ads PPC, Social Media Marketing, Web Design & App Development, E-Commerce Solutions, ASO, Content Marketing, Influencer & Email Marketing, Branding & Analytics), separate About Us, Process, FAQ, Blog, and Contact Us pages, automatic JSON-LD Schema (LocalBusiness, Service, FAQPage, BreadcrumbList), dynamic SEO meta tags, and WordPress Customizer support.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-motive-media
Tags: digital-marketing, seo, aeo, geo, multi-page, agency, business, custom-colors, custom-logo, custom-menu, theme-options, full-width-template
*/

:root {
  --mm-blue: #1b4596;
  --mm-blue-dark: #0f295e;
  --mm-teal: #11a896;
  --mm-teal-light: #e6f8f6;
  --mm-orange: #f58220;
  --mm-gold: #fbbf24;
  --mm-dark: #0f172a;
  --mm-slate: #334155;
  --mm-muted: #64748b;
  --mm-bg-soft: #f8fafc;
  --mm-white: #ffffff;
  --mm-radius: 16px;
  --mm-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.08);
  --mm-shadow-hover: 0 20px 40px -10px rgba(27, 69, 150, 0.16);
}

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

html {
  scroll-behavior: smooth;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--mm-dark);
  background: var(--mm-white);
  line-height: 1.65;
}

body {
  overflow-x: hidden;
  background-color: var(--mm-white);
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.25s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.mm-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Top Announcement & Contact Bar */
.mm-topbar {
  background: linear-gradient(90deg, var(--mm-dark) 0%, var(--mm-blue-dark) 100%);
  color: #e2e8f0;
  font-size: 13px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mm-topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.mm-topbar-left, .mm-topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.mm-topbar a:hover {
  color: var(--mm-gold);
}
.mm-badge-pill-sm {
  background: linear-gradient(90deg, var(--mm-teal), var(--mm-orange));
  color: #fff;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.4px;
}

/* Header & Navigation */
.mm-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}
.mm-nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  gap: 20px;
}
.mm-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mm-brand-icon {
  height: 54px;
  width: auto;
  object-fit: contain;
}
.mm-brand-text {
  display: flex;
  flex-direction: column;
}
.mm-brand-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg, var(--mm-blue) 0%, var(--mm-teal) 55%, var(--mm-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.15;
}
.mm-brand-tagline {
  font-size: 11px;
  font-weight: 600;
  color: var(--mm-muted);
  letter-spacing: 1.4px;
  text-transform: lowercase;
}

.mm-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 24px;
}
.mm-menu > li {
  position: relative;
}
.mm-menu > li > a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--mm-dark);
  padding: 8px 2px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mm-menu > li > a:hover,
.mm-menu > li.current-menu-item > a {
  color: var(--mm-teal);
}

/* Mega / Dropdown Menu for 12 Separate Service Pages */
.mm-dropdown {
  position: absolute;
  top: 100%;
  left: -40px;
  width: 620px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.16);
  border: 1px solid #e2e8f0;
  padding: 14px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.22s ease;
  z-index: 100;
}
.mm-menu > li:hover .mm-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mm-dropdown li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mm-slate);
}
.mm-dropdown li a:hover {
  background: var(--mm-teal-light);
  color: var(--mm-blue);
}

/* Buttons */
.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  border: none;
  transition: all 0.25s ease;
}
.mm-btn-primary {
  background: linear-gradient(135deg, var(--mm-blue) 0%, var(--mm-teal) 100%);
  color: #fff;
  box-shadow: 0 8px 22px -4px rgba(17, 168, 150, 0.45);
}
.mm-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px rgba(27, 69, 150, 0.55);
  color: #fff;
}
.mm-btn-orange {
  background: linear-gradient(135deg, var(--mm-orange) 0%, #ea580c 100%);
  color: #fff;
  box-shadow: 0 8px 22px -4px rgba(245, 130, 32, 0.45);
}
.mm-btn-orange:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  color: #fff;
}
.mm-btn-outline {
  background: #fff;
  color: var(--mm-blue);
  border: 2px solid var(--mm-blue);
}
.mm-btn-outline:hover {
  background: var(--mm-blue);
  color: #fff;
}

/* Breadcrumbs */
.mm-breadcrumbs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 16px;
}
.mm-breadcrumbs a {
  color: #38bdf8;
}
.mm-breadcrumbs a:hover {
  text-decoration: underline;
}

/* Hero Section */
.mm-hero {
  position: relative;
  padding: 72px 0 84px;
  background: radial-gradient(circle at 85% 20%, rgba(17, 168, 150, 0.10), transparent 45%),
              radial-gradient(circle at 15% 80%, rgba(245, 130, 32, 0.10), transparent 40%),
              linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  overflow: hidden;
}
.mm-hero-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 48px;
  align-items: center;
}
.mm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(17, 168, 150, 0.12);
  color: var(--mm-teal);
  border: 1px solid rgba(17, 168, 150, 0.28);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mm-hero h1 {
  font-size: clamp(32px, 4.3vw, 52px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -1px;
  color: var(--mm-dark);
  margin-bottom: 20px;
}
.mm-gradient-text {
  background: linear-gradient(90deg, var(--mm-blue) 0%, var(--mm-teal) 50%, var(--mm-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mm-hero p.mm-lead {
  font-size: 17.5px;
  color: var(--mm-slate);
  margin-bottom: 28px;
  max-width: 600px;
}
.mm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 32px;
}
.mm-partner-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}
.mm-partner-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid #e2e8f0;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mm-slate);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.mm-hero-visual {
  position: relative;
}
.mm-hero-card {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(27, 69, 150, 0.16);
  border: 3px solid #fff;
  background: #fff;
}
.mm-float-badge {
  position: absolute;
  background: #fff;
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13.5px;
}
.mm-float-top {
  top: -16px;
  left: -18px;
}
.mm-float-bottom {
  bottom: -18px;
  right: -12px;
}

/* Section Scaffolding */
.mm-section {
  padding: 80px 0;
}
.mm-section-alt {
  background-color: var(--mm-bg-soft);
}
.mm-section-dark {
  background: linear-gradient(135deg, var(--mm-dark) 0%, var(--mm-blue-dark) 100%);
  color: #fff;
}
.mm-section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 52px;
}
.mm-section-header h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.2;
  margin-bottom: 14px;
}
.mm-section-header p {
  font-size: 16.5px;
  color: var(--mm-muted);
}
.mm-section-dark .mm-section-header p {
  color: #cbd5e1;
}

/* Capabilities Bar */
.mm-capabilities-bar {
  padding: 28px 0;
  background: #fff;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}
.mm-capabilities-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.mm-capability-pill {
  padding: 9px 18px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-weight: 700;
  font-size: 13px;
  color: var(--mm-slate);
}
.mm-capability-pill:hover {
  border-color: var(--mm-teal);
  color: var(--mm-blue);
  background: var(--mm-teal-light);
}

/* Services 12-Card Grid */
.mm-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.mm-service-card {
  background: #fff;
  border-radius: var(--mm-radius);
  padding: 30px 26px;
  border: 1px solid #e2e8f0;
  box-shadow: var(--mm-shadow);
  transition: all 0.28s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mm-service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mm-shadow-hover);
  border-color: var(--mm-teal);
}
.mm-service-card.mm-featured-ai {
  background: linear-gradient(180deg, rgba(17, 168, 150, 0.06) 0%, #ffffff 100%);
  border: 2px solid var(--mm-teal);
}
.mm-service-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(27,69,150,0.1), rgba(17,168,150,0.15));
  color: var(--mm-blue);
}
.mm-service-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(90deg, var(--mm-orange), #f97316);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 999px;
  text-transform: uppercase;
}
.mm-service-card h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--mm-dark);
}
.mm-service-card h3 a:hover {
  color: var(--mm-teal);
}
.mm-service-card p {
  font-size: 14.5px;
  color: var(--mm-slate);
  margin-bottom: 18px;
}
.mm-service-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--mm-blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mm-service-link:hover {
  color: var(--mm-orange);
}

/* AEO & GEO Spotlight Section */
.mm-ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
.mm-ai-box {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  padding: 30px;
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mm-ai-box h3 {
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--mm-gold);
}
.mm-ai-list {
  list-style: none;
  margin-top: 16px;
  margin-bottom: 20px;
}
.mm-ai-list li {
  margin-bottom: 10px;
  font-size: 14.5px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #e2e8f0;
}

/* 5-Step Process */
.mm-process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}
.mm-step-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 26px 22px;
  position: relative;
  box-shadow: var(--mm-shadow);
}
.mm-step-num {
  font-size: 34px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--mm-blue), var(--mm-teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 12px;
}

/* Single Service Detail Page Styles */
.mm-service-hero {
  background: linear-gradient(135deg, var(--mm-dark) 0%, var(--mm-blue-dark) 60%, #0d4a4e 100%);
  color: #fff;
  padding: 68px 0 76px;
}
.mm-service-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 44px;
  align-items: center;
}
.mm-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.mm-kpi-box {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}
.mm-kpi-box strong {
  display: block;
  font-size: 24px;
  font-weight: 900;
  color: var(--mm-gold);
}
.mm-kpi-box span {
  font-size: 12px;
  color: #cbd5e1;
}
.mm-subservice-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 26px;
  box-shadow: var(--mm-shadow);
  transition: all 0.25s ease;
}
.mm-subservice-card:hover {
  border-color: var(--mm-teal);
  transform: translateY(-4px);
}
.mm-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: var(--mm-shadow);
  font-weight: 600;
  color: var(--mm-dark);
}

/* FAQ Accordion */
.mm-faq-list {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mm-faq-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
}
.mm-faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--mm-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.mm-faq-a {
  padding: 0 24px 20px;
  font-size: 15px;
  color: var(--mm-slate);
  display: none;
}
.mm-faq-item.active .mm-faq-a {
  display: block;
}

/* Contact & Quote Box */
.mm-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 36px;
  align-items: start;
}
.mm-form-card {
  background: #fff;
  padding: 34px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: var(--mm-shadow);
  color: var(--mm-dark);
}
.mm-input, .mm-select, .mm-textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 14.5px;
  margin-bottom: 14px;
  font-family: inherit;
  color: var(--mm-dark);
  background: #fff;
}
.mm-input:focus, .mm-select:focus, .mm-textarea:focus {
  outline: none;
  border-color: var(--mm-teal);
  box-shadow: 0 0 0 3px rgba(17, 168, 150, 0.15);
}

/* Footer */
.mm-footer {
  background: #0b1120;
  color: #cbd5e1;
  padding: 72px 0 28px;
}
.mm-footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.75fr 1.1fr 1.15fr;
  gap: 34px;
  margin-bottom: 48px;
}
.mm-footer h4 {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 18px;
}
.mm-footer-links {
  list-style: none;
}
.mm-footer-links li {
  margin-bottom: 9px;
  font-size: 14px;
}
.mm-footer-links a:hover {
  color: var(--mm-gold);
}
.mm-footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13.5px;
}

/* Floating WhatsApp CTA */
.mm-wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  background: #25d366;
  color: #fff;
  padding: 13px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mm-wa-float:hover {
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 960px) {
  .mm-hero-grid, .mm-service-hero-grid, .mm-contact-grid, .mm-footer-grid {
    grid-template-columns: 1fr;
  }
  .mm-menu {
    display: none;
  }
  .mm-menu.mm-menu-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 82px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20px;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  }
  .mm-dropdown {
    position: static;
    width: 100%;
    grid-template-columns: 1fr;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 8px 0 8px 12px;
  }
}