{"id":6984,"date":"2026-04-22T16:07:12","date_gmt":"2026-04-22T15:07:12","guid":{"rendered":"https:\/\/mohamedchami.com\/microsoft-365\/"},"modified":"2026-04-22T17:33:18","modified_gmt":"2026-04-22T16:33:18","slug":"microsoft-365","status":"publish","type":"page","link":"https:\/\/mohamedchami.com\/en\/microsoft-365\/","title":{"rendered":"Microsoft 365"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6984\" class=\"elementor elementor-6984\">\n\t\t\t\t<div class=\"elementor-element elementor-element-m365c_f04af6 e-con-full e-flex e-con e-parent\" data-id=\"m365c_f04af6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-m365w_33afd8 elementor-widget elementor-widget-noxfolio-pricing-hero\" data-id=\"m365w_33afd8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"noxfolio-pricing-hero.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style id=\"noxfolio-m365-styles\">\n\/* \u2500\u2500 Design Tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n:root {\n  --font-primary: 'Segoe UI', system-ui, -apple-system, sans-serif;\n  --font-size-xs:  12px;\n  --font-size-sm:  13px;\n  --font-size-md:  13.33px;\n  --font-size-lg:  14px;\n  --font-size-xl:  16px;\n  --font-size-2xl: 22px;\n  --font-size-3xl: 24px;\n  --font-size-4xl: 28px;\n  --font-weight-base: 400;\n  --line-height-base: 20px;\n\n  --color-text-primary:   #e8e6e3;\n  --color-text-secondary: #d3cfc9;\n  --color-text-tertiary:  #0078d4;\n  --color-text-inverse:   #bcb6ae;\n  --color-surface-base:   #000000;\n  --color-surface-muted:  #005a9e;\n  --color-surface-raised: #181a1b;\n  --color-surface-strong: #107c10;\n\n  --color-accent:      #0078d4;\n  --color-accent-deep: #005a9e;\n  --color-accent-glow: rgba(0,120,212,0.18);\n  --color-success:     #4ade80;\n  --color-success-bg:  rgba(16,124,16,0.2);\n  --color-muted-fg:    #4b5563;\n  --color-muted-bg:    rgba(30,20,20,0.6);\n\n  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 14px;\n  --space-5: 15px; --space-6: 16px; --space-7: 20px; --space-8: 24px;\n\n  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 13px;\n  --radius-xl: 20px; --radius-2xl: 50px; --radius-full: 9999px;\n\n  --shadow-card:     0 0 0 1px rgba(232,230,227,0.08), 0 8px 32px rgba(0,0,0,0.5);\n  --shadow-featured: 0 0 0 1px rgba(0,120,212,0.4),   0 8px 40px rgba(0,90,158,0.35);\n\n  --duration-instant: 150ms;\n  --duration-fast:    300ms;\n  --duration-normal:  350ms;\n}\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\nhtml { scroll-behavior: smooth; }\nbody {\n  font-family: var(--font-primary);\n  font-size: var(--font-size-lg);\n  font-weight: var(--font-weight-base);\n  line-height: var(--line-height-base);\n  color: var(--color-text-primary);\n  background: var(--color-surface-base);\n  -webkit-font-smoothing: antialiased;\n}\na { color: inherit; text-decoration: none; }\nbutton { font: inherit; cursor: pointer; border: none; background: none; }\n:focus-visible {\n  outline: 2px solid var(--color-accent);\n  outline-offset: 2px;\n  border-radius: var(--radius-sm);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   \u00a7 1 \u00b7 HERO HEADER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.hero {\n  text-align: center;\n  padding: 72px var(--space-8) 56px;\n  position: relative;\n  overflow: hidden;\n}\n.hero::before {\n  content: '';\n  position: absolute;\n  top: -120px; left: 50%; transform: translateX(-50%);\n  width: 700px; height: 400px;\n  background: radial-gradient(ellipse, rgba(0,120,212,0.07) 0%, transparent 70%);\n  pointer-events: none;\n}\n.eyebrow {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  font-size: var(--font-size-xs);\n  font-weight: 500;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--color-accent);\n  border: 1px solid rgba(0,120,212,0.3);\n  border-radius: var(--radius-full);\n  padding: var(--space-1) var(--space-4);\n  margin-bottom: var(--space-7);\n  background: rgba(0,120,212,0.06);\n  animation: fadeDown var(--duration-fast) ease both;\n}\n.eyebrow::before {\n  content: '';\n  width: 6px; height: 6px;\n  border-radius: 50%;\n  background: var(--color-accent);\n  box-shadow: 0 0 8px var(--color-accent);\n  animation: pulse 2s ease infinite;\n}\n.hero-title {\n  font-size: clamp(28px, 4.5vw, 48px);\n  font-weight: 300;\n  letter-spacing: -0.025em;\n  line-height: 1.12;\n  color: var(--color-text-primary);\n  margin-bottom: var(--space-4);\n  animation: fadeDown var(--duration-fast) 60ms ease both;\n}\n.hero-title strong {\n  font-weight: 700;\n  background: linear-gradient(135deg, #e8e6e3 0%, #0078d4 55%, #005a9e 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n.hero-subtitle {\n  font-size: var(--font-size-xl);\n  color: var(--color-text-secondary);\n  max-width: 520px;\n  margin: 0 auto var(--space-8);\n  line-height: 1.6;\n  animation: fadeDown var(--duration-fast) 100ms ease both;\n}\n.toggle-wrap {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-4);\n  background: var(--color-surface-raised);\n  border: 1px solid rgba(232,230,227,0.12);\n  border-radius: var(--radius-full);\n  padding: var(--space-1);\n  animation: fadeDown var(--duration-fast) 140ms ease both;\n}\n.toggle-lbl {\n  font-size: var(--font-size-sm);\n  font-weight: 500;\n  color: rgba(188,182,174,0.8);\n  padding: var(--space-2) var(--space-4);\n  border-radius: var(--radius-full);\n  cursor: pointer;\n  transition: all var(--duration-instant) ease;\n  user-select: none;\n}\n.toggle-lbl.on { color: var(--color-text-primary); background: rgba(0,120,212,0.15); }\n.toggle-lbl:hover:not(.on) { color: var(--color-text-secondary); }\n.toggle-switch {\n  position: relative; width: 40px; height: 22px;\n  cursor: pointer; flex-shrink: 0;\n}\n.toggle-switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; z-index: 1; }\n.toggle-track {\n  position: absolute; inset: 0;\n  background: var(--color-accent-deep);\n  border-radius: var(--radius-full);\n  transition: background var(--duration-fast);\n}\n.toggle-thumb {\n  position: absolute; top: 3px; left: 3px;\n  width: 16px; height: 16px;\n  border-radius: 50%;\n  background: #fff;\n  transition: transform var(--duration-fast);\n  box-shadow: 0 1px 4px rgba(0,0,0,0.4);\n}\n.toggle-switch input:checked ~ .toggle-track { background: var(--color-accent); }\n.toggle-switch input:checked ~ .toggle-thumb { transform: translateX(18px); }\n.toggle-switch input:focus-visible ~ .toggle-track { outline: 2px solid var(--color-accent); outline-offset: 2px; }\n.savings-badge {\n  font-size: var(--font-size-xs);\n  font-weight: 500;\n  color: var(--color-success);\n  background: var(--color-success-bg);\n  border: 1px solid rgba(74,222,128,0.25);\n  border-radius: var(--radius-full);\n  padding: 2px 10px;\n  opacity: 0;\n  transition: opacity var(--duration-instant);\n}\n.savings-badge.vis { opacity: 1; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   \u00a7 2 \u00b7 PLAN CARDS\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.cards-row {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--space-4);\n  padding: 0 var(--space-8) 56px;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n@media (max-width: 960px) { .cards-row { grid-template-columns: repeat(2, 1fr); } }\n@media (max-width: 560px) { .cards-row { grid-template-columns: 1fr; padding: 0 var(--space-6) 40px; } }\n\n.plan-card {\n  position: relative;\n  background: var(--color-surface-raised);\n  border: 1px solid rgba(232,230,227,0.08);\n  border-radius: var(--radius-lg);\n  padding: 28px var(--space-8);\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n  transition: border-color var(--duration-instant), box-shadow var(--duration-fast);\n  animation: fadeUp var(--duration-fast) calc(var(--i, 0) * 60ms + 200ms) ease both;\n}\n.plan-card:hover { border-color: rgba(232,230,227,0.18); box-shadow: var(--shadow-card); }\n.plan-card.featured {\n  border-color: rgba(0,120,212,0.4);\n  background: linear-gradient(160deg, rgba(0,90,158,0.22) 0%, rgba(24,26,27,0.95) 60%);\n  box-shadow: var(--shadow-featured);\n}\n.plan-card.featured:hover {\n  box-shadow: 0 0 0 1px rgba(0,120,212,0.6), 0 12px 48px rgba(0,90,158,0.45);\n}\n.plan-badge {\n  position: absolute;\n  top: -12px; left: 50%; transform: translateX(-50%);\n  font-size: var(--font-size-xs);\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: #fff;\n  background: linear-gradient(90deg, var(--color-accent-deep), var(--color-accent));\n  border-radius: var(--radius-full);\n  padding: 3px 14px;\n  white-space: nowrap;\n}\n.plan-name {\n  font-size: var(--font-size-xl);\n  font-weight: 600;\n  color: var(--color-text-primary);\n  margin-bottom: 2px;\n}\n.plan-tagline { font-size: var(--font-size-sm); color: var(--color-text-inverse); }\n.plan-price { display: flex; align-items: baseline; gap: var(--space-1); }\n.plan-currency {\n  font-size: var(--font-size-xl);\n  font-weight: 500;\n  color: var(--color-text-secondary);\n  align-self: flex-start;\n  margin-top: 6px;\n}\n.plan-amount {\n  font-size: 38px;\n  font-weight: 700;\n  letter-spacing: -0.03em;\n  color: var(--color-text-primary);\n  line-height: 1;\n}\n.plan-amount.custom { font-size: var(--font-size-2xl); letter-spacing: 0; }\n.plan-period {\n  font-size: var(--font-size-xs);\n  color: var(--color-text-inverse);\n  line-height: 1.4;\n  max-width: 72px;\n}\n.plan-features { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }\n.plan-feature {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-2);\n  font-size: var(--font-size-sm);\n  color: var(--color-text-secondary);\n  line-height: 1.5;\n}\n.feat-icon-wrap {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px; height: 22px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  margin-top: 1px;\n}\n.feat-icon-wrap i { font-size: 10px; }\n.plan-cta {\n  display: block;\n  width: 100%;\n  padding: 10px var(--space-6);\n  font-size: var(--font-size-sm);\n  font-weight: 500;\n  text-align: center;\n  border-radius: var(--radius-full);\n  border: 1px solid rgba(232,230,227,0.2);\n  color: var(--color-text-primary);\n  background: rgba(232,230,227,0.06);\n  transition: all var(--duration-instant) ease;\n  cursor: pointer;\n}\n.plan-cta:hover { background: rgba(232,230,227,0.12); border-color: rgba(232,230,227,0.35); }\n.plan-cta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }\n.plan-card.featured .plan-cta { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }\n.plan-card.featured .plan-cta:hover { background: #005a9e; border-color: #005a9e; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   \u00a7 3 \u00b7 COMPARISON TABLE\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.compare-section {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 var(--space-8) 72px;\n}\n.section-eyebrow {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  font-size: var(--font-size-xs);\n  font-weight: 500;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--color-text-inverse);\n  margin-bottom: 32px;\n}\n.section-eyebrow::after { content: ''; flex: 1; height: 1px; background: rgba(232,230,227,0.07); }\n\n.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }\n.compare-scroll:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }\n\n.compare-table {\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  font-size: var(--font-size-sm);\n  color: var(--color-text-primary);\n  min-width: 680px;\n}\n.compare-table thead th {\n  position: sticky; top: 0; z-index: 10;\n  padding: var(--space-4) var(--space-7);\n  text-align: center;\n  font-size: var(--font-size-xs);\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--color-text-inverse);\n  background: var(--color-surface-base);\n  border-bottom: 1px solid rgba(232,230,227,0.1);\n}\n.compare-table thead th:first-child {\n  text-align: left; padding-left: 0;\n  font-size: var(--font-size-sm);\n  text-transform: none; letter-spacing: 0;\n  color: var(--color-text-primary);\n}\n.compare-table thead th.ft { color: var(--color-accent); position: relative; }\n.compare-table thead th.ft::after {\n  content: '';\n  position: absolute; bottom: -1px; left: 0; right: 0;\n  height: 2px;\n  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);\n}\n.compare-table tr.grp td {\n  padding: 24px 0 var(--space-2);\n  font-size: var(--font-size-xs);\n  font-weight: 700;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--color-accent);\n  border-bottom: 1px solid rgba(232,230,227,0.07);\n}\n.compare-table tbody tr.dr td {\n  padding: 12px var(--space-7);\n  border-bottom: 1px solid rgba(232,230,227,0.055);\n  vertical-align: middle;\n  transition: background var(--duration-instant) ease;\n}\n.compare-table tbody tr.dr:hover td { background: rgba(232,230,227,0.025); }\n.compare-table tbody tr.dr td:first-child { padding-left: 0; color: var(--color-text-secondary); }\n.compare-table tbody tr.dr td:not(:first-child) { text-align: center; }\n.compare-table tbody tr.dr td.ft { background: rgba(0,90,158,0.055); }\n.compare-table tbody tr.dr:hover td.ft { background: rgba(0,90,158,0.1); }\n.feat-cell { display: flex; align-items: center; gap: 10px; }\n.row-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px; height: 28px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n.row-icon i { font-size: 12px; }\n.ck, .cx {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px; height: 22px;\n  border-radius: 50%;\n}\n.ck { background: var(--color-success-bg); color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }\n.cx { background: var(--color-muted-bg); color: var(--color-muted-fg); border: 1px solid rgba(75,85,99,0.2); }\n.ck svg, .cx svg { width: 11px; height: 11px; }\n.vh { color: var(--color-accent); font-weight: 500; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   \u00a7 4 \u00b7 FOOTER NOTE\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.compare-footer {\n  text-align: center;\n  padding-top: 36px;\n  border-top: 1px solid rgba(232,230,227,0.07);\n  font-size: var(--font-size-sm);\n  color: var(--color-text-inverse);\n  line-height: 1.6;\n}\n.compare-footer p { margin-bottom: var(--space-2); }\n.compare-footer a { color: var(--color-accent); font-weight: 500; transition: color var(--duration-instant); }\n.compare-footer a:hover { color: #6db0ff; text-decoration: underline; }\n.compare-footer a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-xs); }\n\n\/* \u2500\u2500 Keyframes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@keyframes fadeDown {\n  from { opacity: 0; transform: translateY(-12px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n@keyframes fadeUp {\n  from { opacity: 0; transform: translateY(16px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n@keyframes pulse {\n  0%, 100% { opacity: 1; }\n  50%       { opacity: 0.45; }\n}\n@media (max-width: 768px) {\n  .hero { padding: 48px var(--space-6) 40px; }\n  .compare-section { padding: 0 var(--space-6) 48px; }\n}\n<\/style>        <div class=\"noxfolio-pricing-hero-widget\" style=\"\n            --color-accent:      #0078d4;\n            --color-accent-deep: #005a9e;\n            background: #000;\n        \">\n          <header class=\"hero\" role=\"banner\">\n            <div class=\"eyebrow\" aria-hidden=\"true\">Microsoft 365 Business<\/div>\n            <h1 class=\"hero-title\">\n              Empower your business with<br>\n              <strong>Microsoft 365<\/strong>\n            <\/h1>\n            <p class=\"hero-subtitle\">Get the productivity apps and security features you need to run and grow your business.<\/p>\n            <div class=\"toggle-wrap\" role=\"group\" aria-label=\"Billing frequency\">\n              <span class=\"toggle-lbl on\"\n                    id=\"tog-m-m365w_33afd8\"\n                    data-p=\"m\"\n                    tabindex=\"0\"\n                    role=\"button\"\n                    aria-pressed=\"true\">\n                Monthly              <\/span>\n              <label class=\"toggle-switch\" aria-label=\"Switch to annual billing\">\n                <input type=\"checkbox\" id=\"tog-chk-m365w_33afd8\" role=\"switch\" aria-checked=\"false\">\n                <span class=\"toggle-track\"><\/span>\n                <span class=\"toggle-thumb\"><\/span>\n              <\/label>\n              <span class=\"toggle-lbl\"\n                    id=\"tog-a-m365w_33afd8\"\n                    data-p=\"a\"\n                    tabindex=\"0\"\n                    role=\"button\"\n                    aria-pressed=\"false\">\n                Annual              <\/span>\n              <span class=\"savings-badge\" id=\"savings-badge-m365w_33afd8\" aria-live=\"polite\">\n                Save up to 17%              <\/span>\n            <\/div>\n          <\/header>\n        <\/div>\n        <script>\n        (function () {\n          'use strict';\n          var chk   = document.getElementById('tog-chk-m365w_33afd8');\n          var lblM  = document.getElementById('tog-m-m365w_33afd8');\n          var lblA  = document.getElementById('tog-a-m365w_33afd8');\n          var badge = document.getElementById('savings-badge-m365w_33afd8');\n\n          \/\/ Query amounts lazily so the Plans widget (rendered below) is included.\n          function getAmounts() {\n            return document.querySelectorAll('.plan-amount[data-monthly]');\n          }\n\n          function set(annual) {\n            lblM.classList.toggle('on', !annual);\n            lblA.classList.toggle('on',  annual);\n            lblM.setAttribute('aria-pressed', String(!annual));\n            lblA.setAttribute('aria-pressed', String(annual));\n            badge.classList.toggle('vis', annual);\n            chk.checked = annual;\n            chk.setAttribute('aria-checked', String(annual));\n            getAmounts().forEach(function (el) {\n              el.textContent = annual ? el.dataset.annual : el.dataset.monthly;\n            });\n          }\n\n          if (chk) {\n            chk.addEventListener('change', function () { set(chk.checked); });\n            [lblM, lblA].forEach(function (lbl) {\n              if (!lbl) return;\n              lbl.addEventListener('click', function () { set(lbl.dataset.p === 'a'); });\n              lbl.addEventListener('keydown', function (e) {\n                if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); set(lbl.dataset.p === 'a'); }\n              });\n            });\n          }\n        })();\n        <\/script>\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-m365w_7d5291 elementor-widget elementor-widget-noxfolio-pricing-plans\" data-id=\"m365w_7d5291\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"noxfolio-pricing-plans.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"noxfolio-pricing-plans-widget\" style=\"\n            --color-accent:      #0078d4;\n            --color-accent-deep: #005a9e;\n            background: #000;\n        \">\n          <section aria-label=\"Pricing plans\" class=\"cards-row\">\n                    <article class=\"plan-card\" style=\"--i:0; \"\n                 aria-label=\"Business Basic plan\">\n                    <div>\n            <div class=\"plan-name\">Business Basic<\/div>\n            <div class=\"plan-tagline\">Web and mobile apps only<\/div>\n          <\/div>\n          <div class=\"plan-price\" aria-label=\"60 MAD per user per month\">\n            <span class=\"plan-currency\">MAD<\/span>\n            <span class=\"plan-amount\" data-monthly=\"60\" data-annual=\"50\">\n              60            <\/span>\n            <span class=\"plan-period\">\/ user<br>\/ month<\/span>\n          <\/div>\n          <ul class=\"plan-features\" aria-label=\"Included features\">\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(16,124,16,.13);color:#107c10\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-globe\"><\/i>\n                  <\/span>\n                                Web and mobile versions of apps              <\/li>\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(0,120,212,.13);color:#0078d4\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-envelope\"><\/i>\n                  <\/span>\n                                Custom business email (Outlook)              <\/li>\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(98,100,167,.13);color:#6264a7\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-users\"><\/i>\n                  <\/span>\n                                Chat and meetings with Teams              <\/li>\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(0,120,212,.13);color:#0078d4\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-cloud\"><\/i>\n                  <\/span>\n                                1 TB OneDrive storage per user              <\/li>\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(0,120,212,.13);color:#0078d4\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-robot\"><\/i>\n                  <\/span>\n                                Copilot Chat (web grounded)              <\/li>\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(16,124,16,.13);color:#107c10\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-shield-alt\"><\/i>\n                  <\/span>\n                                Standard security controls              <\/li>\n                      <\/ul>\n          <a href=\"#\" class=\"plan-cta\">Order Now<\/a>\n        <\/article>\n                <article class=\"plan-card featured\" style=\"--i:1; --color-accent:#0078d4; --color-accent-deep:#005a9e;\"\n                 aria-label=\"Business Standard plan, most popular\">\n                      <div class=\"plan-badge\">Most popular<\/div>\n                    <div>\n            <div class=\"plan-name\">Business Standard<\/div>\n            <div class=\"plan-tagline\">Desktop apps + webinars<\/div>\n          <\/div>\n          <div class=\"plan-price\" aria-label=\"125 MAD per user per month\">\n            <span class=\"plan-currency\">MAD<\/span>\n            <span class=\"plan-amount\" data-monthly=\"125\" data-annual=\"104\">\n              125            <\/span>\n            <span class=\"plan-period\">\/ user<br>\/ month<\/span>\n          <\/div>\n          <ul class=\"plan-features\" aria-label=\"Included features\">\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(0,120,212,.13);color:#0078d4\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-desktop\"><\/i>\n                  <\/span>\n                                Desktop versions of all Office apps              <\/li>\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(98,100,167,.13);color:#6264a7\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-microphone-alt\"><\/i>\n                  <\/span>\n                                Host webinars with Teams              <\/li>\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(16,124,16,.13);color:#107c10\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-video\"><\/i>\n                  <\/span>\n                                Clipchamp video editor              <\/li>\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(0,120,212,.13);color:#0078d4\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-robot\"><\/i>\n                  <\/span>\n                                AI-powered Copilot Chat              <\/li>\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(16,124,16,.13);color:#107c10\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-calendar-check\"><\/i>\n                  <\/span>\n                                Appointment booking pages              <\/li>\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(0,120,212,.13);color:#0078d4\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-dot-circle\"><\/i>\n                  <\/span>\n                                Meeting recordings &amp; transcripts              <\/li>\n                      <\/ul>\n          <a href=\"#\" class=\"plan-cta\">Order Now<\/a>\n        <\/article>\n                <article class=\"plan-card\" style=\"--i:2; \"\n                 aria-label=\"Business Premium plan\">\n                    <div>\n            <div class=\"plan-name\">Business Premium<\/div>\n            <div class=\"plan-tagline\">Advanced security &amp; compliance<\/div>\n          <\/div>\n          <div class=\"plan-price\" aria-label=\"220 MAD per user per month\">\n            <span class=\"plan-currency\">MAD<\/span>\n            <span class=\"plan-amount\" data-monthly=\"220\" data-annual=\"183\">\n              220            <\/span>\n            <span class=\"plan-period\">\/ user<br>\/ month<\/span>\n          <\/div>\n          <ul class=\"plan-features\" aria-label=\"Included features\">\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(0,120,212,.13);color:#0078d4\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-user-shield\"><\/i>\n                  <\/span>\n                                Advanced identity (Entra ID P1)              <\/li>\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(16,124,16,.13);color:#107c10\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-shield-virus\"><\/i>\n                  <\/span>\n                                Defender for Business (EDR)              <\/li>\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(0,120,212,.13);color:#0078d4\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-mobile-alt\"><\/i>\n                  <\/span>\n                                Intune device management              <\/li>\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(16,124,16,.13);color:#107c10\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-lock\"><\/i>\n                  <\/span>\n                                Data Loss Prevention (DLP)              <\/li>\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(0,120,212,.13);color:#0078d4\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-laptop-code\"><\/i>\n                  <\/span>\n                                Windows 11 Pro upgrade              <\/li>\n                          <li class=\"plan-feature\">\n                                  <span class=\"feat-icon-wrap\"\n                        style=\"background:rgba(16,124,16,.13);color:#107c10\"\n                        aria-hidden=\"true\">\n                    <i class=\"fas fa-archive\"><\/i>\n                  <\/span>\n                                Azure Information Protection              <\/li>\n                      <\/ul>\n          <a href=\"#\" class=\"plan-cta\">Order Now<\/a>\n        <\/article>\n                  <\/section>\n        <\/div>\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"<p>Microsoft 365 Business Empower your business with Microsoft 365 Get the productivity apps and security features you need to run and grow your business. Monthly Annual Save up to 17% Business Basic Web and mobile apps only MAD 60 \/ user\/ month Web and mobile versions of apps Custom business email (Outlook) Chat and meetings [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-pricing-compare.php","meta":{"inline_featured_image":false,"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"footnotes":""},"class_list":["post-6984","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"amp_enabled":false,"_links":{"self":[{"href":"https:\/\/mohamedchami.com\/en\/wp-json\/wp\/v2\/pages\/6984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mohamedchami.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mohamedchami.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mohamedchami.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mohamedchami.com\/en\/wp-json\/wp\/v2\/comments?post=6984"}],"version-history":[{"count":3,"href":"https:\/\/mohamedchami.com\/en\/wp-json\/wp\/v2\/pages\/6984\/revisions"}],"predecessor-version":[{"id":6990,"href":"https:\/\/mohamedchami.com\/en\/wp-json\/wp\/v2\/pages\/6984\/revisions\/6990"}],"wp:attachment":[{"href":"https:\/\/mohamedchami.com\/en\/wp-json\/wp\/v2\/media?parent=6984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}