{"id":6,"date":"2026-09-08T12:49:04","date_gmt":"2026-09-08T12:49:04","guid":{"rendered":"https:\/\/web-e7ac88dd.nodeveracloud.site\/?page_id=6"},"modified":"2026-09-08T15:15:33","modified_gmt":"2026-09-08T15:15:33","slug":"home","status":"publish","type":"page","link":"https:\/\/malikdevstudio.com\/","title":{"rendered":"Home"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n:root {\n  --mds-bg: #06080d;\n  --mds-bg-soft: #0b0f17;\n  --mds-hero: #0b1a31;\n\n  --mds-card: rgba(255,255,255,.045);\n  --mds-card-hover: rgba(255,255,255,.07);\n  --mds-border: rgba(255,255,255,.10);\n\n  --mds-text: #f5f7fb;\n  --mds-muted: #9ba6b7;\n\n  --mds-blue: #2f80ff;\n  --mds-blue-light: #67a7ff;\n\n  --mds-max-width: 1380px;\n}\n\n\n\/* =====================================================\n   WORDPRESS \/ TWENTY TWENTY-FIVE RESET\n===================================================== *\/\n\nhtml,\nbody {\n  margin: 0 !important;\n  padding: 0 !important;\n  width: 100% !important;\n  max-width: 100% !important;\n  overflow-x: hidden !important;\n  background: #06080d !important;\n}\n\n\n\/* Theme header *\/\n\nbody:has(.malik-dev-studio) .wp-site-blocks > header,\nbody:has(.malik-dev-studio) header.wp-block-template-part {\n  display: none !important;\n}\n\n\n\/* Theme footer *\/\n\nbody:has(.malik-dev-studio) .wp-site-blocks > footer,\nbody:has(.malik-dev-studio) footer.wp-block-template-part {\n  display: none !important;\n}\n\n\n\/* WordPress page title *\/\n\nbody:has(.malik-dev-studio) .wp-block-post-title,\nbody:has(.malik-dev-studio) .entry-title,\nbody:has(.malik-dev-studio) .page-title,\nbody:has(.malik-dev-studio) .entry-header {\n  display: none !important;\n}\n\n\n\/* Full-width WordPress content *\/\n\nbody:has(.malik-dev-studio) .wp-site-blocks,\nbody:has(.malik-dev-studio) .wp-site-blocks > main,\nbody:has(.malik-dev-studio) .wp-block-post-content,\nbody:has(.malik-dev-studio) .entry-content,\nbody:has(.malik-dev-studio) .wp-block-html {\n  width: 100% !important;\n  max-width: none !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  gap: 0 !important;\n}\n\n\nbody:has(.malik-dev-studio) .wp-site-blocks > *,\nbody:has(.malik-dev-studio) .wp-block-post-content > *,\nbody:has(.malik-dev-studio) .entry-content > * {\n  max-width: none !important;\n\n  margin-block-start: 0 !important;\n  margin-block-end: 0 !important;\n}\n\n\nbody:has(.malik-dev-studio) .is-layout-constrained,\nbody:has(.malik-dev-studio) .is-layout-flow {\n  max-width: none !important;\n}\n\n\n\/* =====================================================\n   MALIK DEV STUDIO ROOT\n===================================================== *\/\n\n.malik-dev-studio,\n.malik-dev-studio * {\n  box-sizing: border-box;\n}\n\n\n.malik-dev-studio {\n  width: 100% !important;\n  max-width: none !important;\n\n  min-height: 100vh;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  overflow-x: hidden;\n\n  background:\n    radial-gradient(\n      circle at 20% 0%,\n      rgba(47,128,255,.12),\n      transparent 30%\n    ),\n    var(--mds-bg);\n\n  color: var(--mds-text);\n\n  font-family:\n    Inter,\n    ui-sans-serif,\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    sans-serif;\n\n  line-height: 1.6;\n}\n\n\n.malik-dev-studio .container {\n  width: min(calc(100% - 80px), var(--mds-max-width)) !important;\n  max-width: var(--mds-max-width) !important;\n\n  margin-left: auto !important;\n  margin-right: auto !important;\n\n  padding: 0 !important;\n}\n\n\n.malik-dev-studio h1,\n.malik-dev-studio h2,\n.malik-dev-studio h3,\n.malik-dev-studio h4,\n.malik-dev-studio p,\n.malik-dev-studio ul {\n  margin-top: 0;\n}\n\n\n.malik-dev-studio a {\n  color: inherit;\n  text-decoration: none !important;\n}\n\n\n.malik-dev-studio img {\n  display: block;\n  max-width: 100%;\n}\n\n\n\/* =====================================================\n   NAVIGATION\n===================================================== *\/\n\n.malik-dev-studio .navbar {\n  position: sticky !important;\n  top: 0 !important;\n\n  z-index: 9999 !important;\n\n  width: 100% !important;\n\n  margin: 0 !important;\n\n  background:\n    rgba(6,8,13,.95) !important;\n\n  border-bottom:\n    1px solid var(--mds-border) !important;\n\n  backdrop-filter: blur(18px);\n  -webkit-backdrop-filter: blur(18px);\n}\n\n\n.malik-dev-studio .nav-inner {\n  min-height: 76px;\n\n  display: flex !important;\n\n  align-items: center !important;\n  justify-content: space-between !important;\n\n  gap: 30px;\n}\n\n\n.malik-dev-studio .brand {\n  display: inline-flex !important;\n  align-items: center !important;\n\n  gap: 5px;\n\n  white-space: nowrap;\n\n  color: var(--mds-text) !important;\n\n  font-size: 20px !important;\n  font-weight: 800 !important;\n\n  letter-spacing: -.5px;\n}\n\n\n.malik-dev-studio .brand span {\n  color:\n    var(--mds-blue-light) !important;\n}\n\n\n.malik-dev-studio .nav-links {\n  display: flex !important;\n\n  align-items: center !important;\n\n  gap: 30px;\n\n  color:\n    var(--mds-muted);\n\n  font-size: 14px;\n  font-weight: 600;\n}\n\n\n.malik-dev-studio .nav-links a {\n  color:\n    var(--mds-muted) !important;\n}\n\n\n.malik-dev-studio .nav-links a:hover {\n  color: #ffffff !important;\n}\n\n\n.malik-dev-studio .nav-links .nav-btn {\n  padding: 11px 18px !important;\n\n  border-radius: 999px !important;\n\n  background:\n    var(--mds-blue) !important;\n\n  color:\n    #ffffff !important;\n\n  box-shadow:\n    0 10px 30px\n    rgba(47,128,255,.20);\n}\n\n\n\/* =====================================================\n   HERO\n===================================================== *\/\n\n.malik-dev-studio .hero {\n  width: 100% !important;\n\n  min-height:\n    calc(100vh - 76px);\n\n  display: flex !important;\n\n  align-items: center !important;\n\n  margin: 0 !important;\n\n  padding:\n    100px 0 !important;\n\n  background:\n    radial-gradient(\n      circle at 10% 24%,\n      rgba(47,128,255,.11),\n      transparent 34%\n    ),\n    linear-gradient(\n      135deg,\n      #0b1b33,\n      #091425\n    ) !important;\n}\n\n\n.malik-dev-studio .hero-grid {\n  display: grid !important;\n\n  grid-template-columns:\n    minmax(0,1.1fr)\n    minmax(400px,.9fr) !important;\n\n  align-items: center !important;\n\n  gap: 64px !important;\n}\n\n\n.malik-dev-studio .hero-content {\n  min-width: 0;\n}\n\n\n\/* Eyebrow *\/\n\n.malik-dev-studio .eyebrow {\n  width: fit-content !important;\n\n  display: inline-flex !important;\n\n  align-items: center !important;\n\n  gap: 9px !important;\n\n  padding: 9px 14px !important;\n\n  margin:\n    0 0 28px !important;\n\n  border:\n    1px solid\n    rgba(103,167,255,.20) !important;\n\n  border-radius:\n    999px !important;\n\n  background:\n    rgba(255,255,255,.035) !important;\n\n  color:\n    var(--mds-blue-light) !important;\n\n  font-size:\n    13px !important;\n\n  line-height: 1 !important;\n\n  font-weight:\n    700 !important;\n}\n\n\n.malik-dev-studio .eyebrow-dot {\n  width: 7px !important;\n  height: 7px !important;\n\n  flex:\n    0 0 7px;\n\n  border-radius:\n    50%;\n\n  background:\n    var(--mds-blue-light) !important;\n\n  box-shadow:\n    0 0 16px\n    rgba(103,167,255,.75);\n}\n\n\n\/* Hero title *\/\n\n.malik-dev-studio .hero h1 {\n  width: 100% !important;\n\n  max-width: 850px !important;\n\n  margin:\n    0 0 28px !important;\n\n  padding: 0 !important;\n\n  color:\n    var(--mds-text) !important;\n\n  font-size:\n    clamp(\n      58px,\n      5.5vw,\n      94px\n    ) !important;\n\n  font-weight:\n    400 !important;\n\n  line-height:\n    1 !important;\n\n  letter-spacing:\n    -4px !important;\n}\n\n\n.malik-dev-studio .hero-highlight {\n  display: block;\n\n  color: transparent !important;\n\n  background:\n    linear-gradient(\n      90deg,\n      #f5f7fb 0%,\n      #a9cfff 45%,\n      #67a7ff 100%\n    );\n\n  background-clip: text;\n  -webkit-background-clip: text;\n\n  -webkit-text-fill-color:\n    transparent;\n}\n\n\n.malik-dev-studio .hero-copy {\n  width: 100% !important;\n\n  max-width:\n    720px !important;\n\n  margin:\n    0 0 32px !important;\n\n  color:\n    #91a9c9 !important;\n\n  font-size:\n    18px !important;\n\n  line-height:\n    1.75 !important;\n}\n\n\n\/* Buttons *\/\n\n.malik-dev-studio .hero-actions {\n  display: flex !important;\n\n  flex-direction:\n    row !important;\n\n  flex-wrap:\n    wrap !important;\n\n  align-items:\n    center !important;\n\n  gap:\n    14px !important;\n\n  margin:\n    0 !important;\n}\n\n\n.malik-dev-studio .btn {\n  min-height:\n    52px;\n\n  display:\n    inline-flex !important;\n\n  align-items:\n    center !important;\n\n  justify-content:\n    center !important;\n\n  padding:\n    0 24px !important;\n\n  border-radius:\n    999px !important;\n\n  font-size:\n    16px !important;\n\n  font-weight:\n    750 !important;\n\n  line-height:\n    1 !important;\n\n  transition:\n    transform .2s ease,\n    background .2s ease,\n    border-color .2s ease;\n}\n\n\n.malik-dev-studio .btn-primary {\n  border:\n    1px solid\n    #3385ff !important;\n\n  background:\n    var(--mds-blue) !important;\n\n  color:\n    #ffffff !important;\n\n  box-shadow:\n    0 12px 35px\n    rgba(47,128,255,.27);\n}\n\n\n.malik-dev-studio .btn-primary:hover {\n  transform:\n    translateY(-2px);\n\n  background:\n    #428cff !important;\n}\n\n\n.malik-dev-studio .btn-secondary {\n  border:\n    1px solid\n    rgba(255,255,255,.12) !important;\n\n  background:\n    rgba(255,255,255,.035) !important;\n\n  color:\n    #ffffff !important;\n}\n\n\n.malik-dev-studio .btn-secondary:hover {\n  background:\n    rgba(255,255,255,.07) !important;\n}\n\n\n\/* Hero card *\/\n\n.malik-dev-studio .hero-card {\n  width: 100% !important;\n\n  max-width:\n    540px !important;\n\n  min-height:\n    450px;\n\n  justify-self:\n    end !important;\n\n  margin:\n    0 !important;\n\n  padding:\n    34px 30px !important;\n\n  border:\n    1px solid\n    rgba(255,255,255,.11) !important;\n\n  border-radius:\n    30px !important;\n\n  background:\n    linear-gradient(\n      145deg,\n      rgba(27,37,54,.98),\n      rgba(17,26,40,.98)\n    ) !important;\n\n  box-shadow:\n    0 30px 90px\n    rgba(0,0,0,.32);\n}\n\n\n.malik-dev-studio .mini-label {\n  margin:\n    0 0 26px !important;\n\n  color:\n    #7892b5 !important;\n\n  font-size:\n    10px !important;\n\n  font-weight:\n    600;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    3px;\n\n  text-transform:\n    uppercase;\n}\n\n\n.malik-dev-studio .skill-list {\n  width:\n    100%;\n\n  margin:\n    0;\n\n  padding:\n    0;\n}\n\n\n.malik-dev-studio .skill-item {\n  width:\n    100%;\n\n  min-height:\n    74px;\n\n  display:\n    flex !important;\n\n  align-items:\n    center !important;\n\n  justify-content:\n    space-between !important;\n\n  gap:\n    20px;\n\n  margin:\n    0 !important;\n\n  padding:\n    18px 0 !important;\n\n  color:\n    #ffffff !important;\n\n  border-bottom:\n    1px solid\n    rgba(255,255,255,.10) !important;\n}\n\n\n.malik-dev-studio .skill-item:last-child {\n  border-bottom:\n    0 !important;\n}\n\n\n.malik-dev-studio .skill-item > span:first-child {\n  color:\n    #ffffff !important;\n\n  font-size:\n    17px !important;\n\n  font-weight:\n    400;\n}\n\n\n.malik-dev-studio .skill-number {\n  color:\n    var(--mds-blue-light) !important;\n\n  font-size:\n    11px !important;\n\n  font-weight:\n    700;\n}\n\n\n\/* =====================================================\n   GENERAL\n===================================================== *\/\n\n.malik-dev-studio section {\n  width:\n    100%;\n\n  margin:\n    0;\n\n  padding:\n    110px 0;\n}\n\n\n.malik-dev-studio .section-label {\n  margin-bottom:\n    16px;\n\n  color:\n    var(--mds-blue-light);\n\n  font-size:\n    13px;\n\n  font-weight:\n    800;\n\n  text-transform:\n    uppercase;\n\n  letter-spacing:\n    2px;\n}\n\n\n.malik-dev-studio .section-title {\n  max-width:\n    780px;\n\n  margin-bottom:\n    20px;\n\n  color:\n    var(--mds-text);\n\n  font-size:\n    clamp(\n      36px,\n      5vw,\n      58px\n    );\n\n  line-height:\n    1.05;\n\n  letter-spacing:\n    -2px;\n}\n\n\n.malik-dev-studio .section-copy {\n  max-width:\n    700px;\n\n  margin-bottom:\n    55px;\n\n  color:\n    var(--mds-muted);\n\n  font-size:\n    18px;\n}\n\n\n\/* =====================================================\n   SERVICES\n===================================================== *\/\n\n.malik-dev-studio #services {\n  background:\n    var(--mds-bg);\n}\n\n\n.malik-dev-studio .services-grid {\n  display:\n    grid;\n\n  grid-template-columns:\n    repeat(3,minmax(0,1fr));\n\n  gap:\n    20px;\n}\n\n\n.malik-dev-studio .service-card {\n  position:\n    relative;\n\n  overflow:\n    hidden;\n\n  min-width:\n    0;\n\n  min-height:\n    430px;\n\n  display:\n    flex;\n\n  flex-direction:\n    column;\n\n  padding:\n    28px;\n\n  border:\n    1px solid\n    var(--mds-border);\n\n  border-radius:\n    26px;\n\n  background:\n    linear-gradient(\n      180deg,\n      rgba(18,22,32,.96),\n      rgba(8,12,19,.98)\n    );\n\n  box-shadow:\n    0 18px 50px\n    rgba(0,0,0,.25);\n\n  transition:\n    transform .25s ease,\n    border-color .25s ease,\n    box-shadow .25s ease;\n}\n\n\n.malik-dev-studio .service-card:hover {\n  transform:\n    translateY(-5px);\n\n  border-color:\n    rgba(103,167,255,.35);\n\n  box-shadow:\n    0 25px 70px\n    rgba(0,0,0,.35);\n}\n\n\n.malik-dev-studio .service-card::before {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  inset:\n    0;\n\n  background:\n    radial-gradient(\n      circle at top right,\n      rgba(47,128,255,.15),\n      transparent 36%\n    );\n\n  pointer-events:\n    none;\n}\n\n\n.malik-dev-studio .service-card > * {\n  position:\n    relative;\n\n  z-index:\n    1;\n}\n\n\n.malik-dev-studio .service-head {\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    space-between;\n\n  margin-bottom:\n    25px;\n}\n\n\n.malik-dev-studio .service-num {\n  color:\n    var(--mds-blue-light);\n\n  font-size:\n    12px;\n\n  font-weight:\n    700;\n\n  letter-spacing:\n    1px;\n}\n\n\n.malik-dev-studio .service-icon {\n  width:\n    58px;\n\n  height:\n    58px;\n\n  flex:\n    0 0 58px;\n\n  display:\n    grid;\n\n  place-items:\n    center;\n\n  border:\n    1px solid\n    rgba(255,255,255,.10);\n\n  border-radius:\n    18px;\n\n  background:\n    linear-gradient(\n      145deg,\n      rgba(47,128,255,.18),\n      rgba(255,255,255,.04)\n    );\n}\n\n\n.malik-dev-studio .service-icon svg {\n  width:\n    27px;\n\n  height:\n    27px;\n\n  fill:\n    none;\n\n  stroke:\n    #ffffff;\n\n  stroke-width:\n    1.8;\n\n  stroke-linecap:\n    round;\n\n  stroke-linejoin:\n    round;\n}\n\n\n.malik-dev-studio .service-icon img {\n  width:\n    30px;\n\n  height:\n    30px;\n\n  object-fit:\n    contain;\n}\n\n\n.malik-dev-studio .service-card h3 {\n  margin-bottom:\n    11px;\n\n  color:\n    var(--mds-text);\n\n  font-size:\n    22px;\n\n  line-height:\n    1.25;\n}\n\n\n.malik-dev-studio .service-card > p {\n  min-height:\n    76px;\n\n  margin-bottom:\n    0;\n\n  color:\n    var(--mds-muted);\n\n  font-size:\n    15px;\n\n  line-height:\n    1.7;\n}\n\n\n.malik-dev-studio .logo-row {\n  display:\n    flex;\n\n  flex-wrap:\n    wrap;\n\n  gap:\n    9px;\n\n  margin-top:\n    20px;\n}\n\n\n.malik-dev-studio .logo-pill {\n  min-height:\n    34px;\n\n  display:\n    inline-flex;\n\n  align-items:\n    center;\n\n  gap:\n    7px;\n\n  padding:\n    7px 10px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.09);\n\n  border-radius:\n    10px;\n\n  background:\n    rgba(255,255,255,.035);\n\n  color:\n    #d7deeb;\n\n  font-size:\n    11px;\n\n  font-weight:\n    650;\n}\n\n\n.malik-dev-studio .logo-pill img {\n  width:\n    17px;\n\n  height:\n    17px;\n\n  object-fit:\n    contain;\n}\n\n\n.malik-dev-studio .mini-plugin-logo {\n  width:\n    19px;\n\n  height:\n    19px;\n\n  display:\n    inline-grid;\n\n  place-items:\n    center;\n\n  border-radius:\n    5px;\n\n  background:\n    linear-gradient(\n      145deg,\n      #2f80ff,\n      #65a7ff\n    );\n\n  color:\n    #ffffff;\n\n  font-size:\n    9px;\n\n  font-weight:\n    800;\n}\n\n\n.malik-dev-studio .plugin-amelia {\n  background:\n    linear-gradient(\n      135deg,\n      #6f5cff,\n      #9e79ff\n    );\n}\n\n\n.malik-dev-studio .plugin-bookly {\n  background:\n    linear-gradient(\n      135deg,\n      #30a774,\n      #54d49b\n    );\n}\n\n\n.malik-dev-studio .plugin-ssa {\n  background:\n    linear-gradient(\n      135deg,\n      #e85757,\n      #ff8585\n    );\n}\n\n\n.malik-dev-studio .service-visual {\n  margin-top:\n    auto;\n\n  padding-top:\n    24px;\n}\n\n\n\/* Website design mockup *\/\n\n.malik-dev-studio .browser-window {\n  overflow:\n    hidden;\n\n  border:\n    1px solid\n    rgba(255,255,255,.09);\n\n  border-radius:\n    16px;\n\n  background:\n    rgba(0,0,0,.23);\n}\n\n\n.malik-dev-studio .browser-bar {\n  height:\n    31px;\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  gap:\n    6px;\n\n  padding:\n    0 12px;\n\n  border-bottom:\n    1px solid\n    rgba(255,255,255,.07);\n}\n\n\n.malik-dev-studio .browser-bar span {\n  width:\n    6px;\n\n  height:\n    6px;\n\n  border-radius:\n    50%;\n\n  background:\n    rgba(255,255,255,.28);\n}\n\n\n.malik-dev-studio .browser-page {\n  padding:\n    16px;\n}\n\n\n.malik-dev-studio .mock-nav {\n  width:\n    100%;\n\n  height:\n    8px;\n\n  margin-bottom:\n    14px;\n\n  border-radius:\n    20px;\n\n  background:\n    rgba(255,255,255,.08);\n}\n\n\n.malik-dev-studio .mock-heading {\n  width:\n    68%;\n\n  height:\n    12px;\n\n  margin-bottom:\n    8px;\n\n  border-radius:\n    20px;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(47,128,255,.8),\n      rgba(103,167,255,.25)\n    );\n}\n\n\n.malik-dev-studio .mock-copy {\n  width:\n    46%;\n\n  height:\n    7px;\n\n  margin-bottom:\n    15px;\n\n  border-radius:\n    20px;\n\n  background:\n    rgba(255,255,255,.10);\n}\n\n\n.malik-dev-studio .mock-cards {\n  display:\n    grid;\n\n  grid-template-columns:\n    repeat(3,1fr);\n\n  gap:\n    7px;\n}\n\n\n.malik-dev-studio .mock-card {\n  height:\n    42px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.06);\n\n  border-radius:\n    8px;\n\n  background:\n    rgba(255,255,255,.04);\n}\n\n\n\/* WordPress *\/\n\n.malik-dev-studio .wp-visual {\n  min-height:\n    112px;\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  border:\n    1px solid\n    rgba(255,255,255,.08);\n\n  border-radius:\n    16px;\n\n  background:\n    rgba(255,255,255,.025);\n}\n\n\n.malik-dev-studio .wp-main-logo {\n  width:\n    62px;\n\n  height:\n    62px;\n\n  display:\n    grid;\n\n  place-items:\n    center;\n\n  padding:\n    12px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.10);\n\n  border-radius:\n    17px;\n\n  background:\n    rgba(255,255,255,.05);\n}\n\n\n\/* Ecommerce *\/\n\n.malik-dev-studio .commerce-strip {\n  display:\n    grid;\n\n  grid-template-columns:\n    repeat(4,1fr);\n\n  gap:\n    8px;\n}\n\n\n.malik-dev-studio .commerce-logo {\n  min-height:\n    62px;\n\n  display:\n    grid;\n\n  place-items:\n    center;\n\n  padding:\n    13px 8px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.08);\n\n  border-radius:\n    13px;\n\n  background:\n    rgba(255,255,255,.035);\n}\n\n\n.malik-dev-studio .commerce-logo img {\n  max-width:\n    31px;\n\n  max-height:\n    31px;\n}\n\n\n\/* Booking *\/\n\n.malik-dev-studio .booking-ui {\n  padding:\n    14px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.08);\n\n  border-radius:\n    16px;\n\n  background:\n    rgba(255,255,255,.025);\n}\n\n\n.malik-dev-studio .booking-top {\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    space-between;\n\n  margin-bottom:\n    12px;\n}\n\n\n.malik-dev-studio .booking-title {\n  width:\n    42%;\n\n  height:\n    8px;\n\n  border-radius:\n    20px;\n\n  background:\n    rgba(255,255,255,.15);\n}\n\n\n.malik-dev-studio .booking-arrow {\n  color:\n    var(--mds-blue-light);\n\n  font-size:\n    13px;\n}\n\n\n.malik-dev-studio .calendar-days {\n  display:\n    grid;\n\n  grid-template-columns:\n    repeat(7,1fr);\n\n  gap:\n    5px;\n}\n\n\n.malik-dev-studio .calendar-day {\n  min-height:\n    20px;\n\n  aspect-ratio:\n    1;\n\n  display:\n    grid;\n\n  place-items:\n    center;\n\n  border-radius:\n    6px;\n\n  background:\n    rgba(255,255,255,.04);\n\n  color:\n    #7e8999;\n\n  font-size:\n    8px;\n}\n\n\n.malik-dev-studio .calendar-day.active {\n  background:\n    var(--mds-blue);\n\n  color:\n    #ffffff;\n}\n\n\n\/* Code *\/\n\n.malik-dev-studio .code-window {\n  padding:\n    14px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.08);\n\n  border-radius:\n    16px;\n\n  background:\n    #070a0f;\n\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n}\n\n\n.malik-dev-studio .code-line {\n  min-height:\n    17px;\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  gap:\n    8px;\n\n  color:\n    #8290a4;\n\n  font-size:\n    9px;\n}\n\n\n.malik-dev-studio .code-number {\n  width:\n    15px;\n\n  color:\n    #465164;\n}\n\n\n.malik-dev-studio .code-blue {\n  color:\n    #67a7ff;\n}\n\n\n.malik-dev-studio .code-green {\n  color:\n    #6ed6a5;\n}\n\n\n.malik-dev-studio .code-orange {\n  color:\n    #efa873;\n}\n\n\n.malik-dev-studio .code-purple {\n  color:\n    #b89cff;\n}\n\n\n\/* Maintenance *\/\n\n.malik-dev-studio .maintenance-grid {\n  display:\n    grid;\n\n  grid-template-columns:\n    repeat(3,1fr);\n\n  gap:\n    8px;\n}\n\n\n.malik-dev-studio .maintenance-item {\n  min-height:\n    77px;\n\n  display:\n    flex;\n\n  flex-direction:\n    column;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  gap:\n    7px;\n\n  padding:\n    8px;\n\n  border:\n    1px solid\n    rgba(255,255,255,.08);\n\n  border-radius:\n    13px;\n\n  background:\n    rgba(255,255,255,.03);\n\n  color:\n    #aeb8c7;\n\n  text-align:\n    center;\n\n  font-size:\n    9px;\n}\n\n\n.malik-dev-studio .maintenance-item svg {\n  width:\n    22px;\n\n  height:\n    22px;\n\n  fill:\n    none;\n\n  stroke:\n    var(--mds-blue-light);\n\n  stroke-width:\n    1.7;\n\n  stroke-linecap:\n    round;\n\n  stroke-linejoin:\n    round;\n}\n\n\n\/* =====================================================\n   PROJECTS\n===================================================== *\/\n\n.malik-dev-studio #work {\n  background:\n    #070a10;\n}\n\n\n.malik-dev-studio .projects-grid {\n  display:\n    grid;\n\n  grid-template-columns:\n    repeat(2,minmax(0,1fr));\n\n  gap:\n    24px;\n}\n\n\n.malik-dev-studio .project {\n  overflow:\n    hidden;\n\n  border:\n    1px solid\n    var(--mds-border);\n\n  border-radius:\n    28px;\n\n  background:\n    var(--mds-card);\n\n  transition:\n    transform .25s ease,\n    border-color .25s ease;\n}\n\n\n.malik-dev-studio .project:hover {\n  transform:\n    translateY(-4px);\n\n  border-color:\n    rgba(103,167,255,.28);\n}\n\n\n.malik-dev-studio .project-visual {\n  width:\n    100%;\n\n  min-height:\n    0;\n\n  display:\n    block;\n\n  padding:\n    0;\n\n  background:\n    #0b1018;\n}\n\n\n.malik-dev-studio .project-image {\n  position:\n    relative;\n\n  overflow:\n    hidden;\n\n  width:\n    100%;\n\n  height:\n    320px;\n\n  padding:\n    0;\n\n  display:\n    block;\n\n  background:\n    #0b1018;\n}\n\n\n.malik-dev-studio .project-image img {\n  width:\n    100% !important;\n\n  height:\n    100% !important;\n\n  display:\n    block;\n\n  object-fit:\n    cover;\n\n  object-position:\n    top center;\n\n  transition:\n    transform .35s ease;\n}\n\n\n.malik-dev-studio .project:hover .project-image img {\n  transform:\n    scale(1.025);\n}\n\n\n.malik-dev-studio .project-info {\n  padding:\n    28px;\n}\n\n\n.malik-dev-studio .project-info p {\n  margin:\n    0 0 18px;\n\n  color:\n    var(--mds-muted);\n\n  font-size:\n    16px;\n\n  line-height:\n    1.7;\n}\n\n\n.malik-dev-studio .tags {\n  display:\n    flex;\n\n  flex-wrap:\n    wrap;\n\n  gap:\n    8px;\n}\n\n\n.malik-dev-studio .tag {\n  padding:\n    6px 10px;\n\n  border:\n    1px solid\n    var(--mds-border);\n\n  border-radius:\n    999px;\n\n  color:\n    var(--mds-muted);\n\n  font-size:\n    12px;\n}\n\n\n\/* =====================================================\n   PROCESS\n===================================================== *\/\n\n.malik-dev-studio .process-grid {\n  display:\n    grid;\n\n  grid-template-columns:\n    repeat(3,minmax(0,1fr));\n\n  gap:\n    18px;\n}\n\n\n.malik-dev-studio .process-step {\n  padding:\n    28px;\n\n  border-top:\n    1px solid\n    var(--mds-border);\n}\n\n\n.malik-dev-studio .process-number {\n  margin-bottom:\n    25px;\n\n  color:\n    var(--mds-blue-light);\n\n  font-size:\n    13px;\n}\n\n\n.malik-dev-studio .process-step h3 {\n  margin-bottom:\n    10px;\n\n  color:\n    var(--mds-text);\n\n  font-size:\n    22px;\n}\n\n\n.malik-dev-studio .process-step p {\n  color:\n    var(--mds-muted);\n}\n\n\n\/* =====================================================\n   PRICING\n===================================================== *\/\n\n.malik-dev-studio #pricing {\n  background:\n    #070a10;\n}\n\n\n.malik-dev-studio .pricing-grid {\n  display:\n    grid;\n\n  grid-template-columns:\n    repeat(2,minmax(0,1fr));\n\n  gap:\n    24px;\n}\n\n\n.malik-dev-studio .pricing-card {\n  padding:\n    38px;\n\n  border:\n    1px solid\n    var(--mds-border);\n\n  border-radius:\n    28px;\n\n  background:\n    var(--mds-card);\n}\n\n\n.malik-dev-studio .pricing-card.featured {\n  border-color:\n    rgba(47,128,255,.5);\n\n  background:\n    linear-gradient(\n      145deg,\n      rgba(47,128,255,.12),\n      rgba(255,255,255,.035)\n    );\n}\n\n\n.malik-dev-studio .pricing-card h3 {\n  margin-bottom:\n    10px;\n\n  color:\n    var(--mds-text);\n\n  font-size:\n    25px;\n}\n\n\n.malik-dev-studio .pricing-card p {\n  color:\n    var(--mds-muted);\n}\n\n\n.malik-dev-studio .price {\n  margin:\n    25px 0;\n\n  color:\n    var(--mds-text);\n\n  font-size:\n    46px;\n\n  font-weight:\n    800;\n\n  letter-spacing:\n    -2px;\n}\n\n\n.malik-dev-studio .price small {\n  color:\n    var(--mds-muted);\n\n  font-size:\n    15px;\n\n  letter-spacing:\n    0;\n}\n\n\n.malik-dev-studio .price-list {\n  list-style:\n    none;\n\n  display:\n    grid;\n\n  gap:\n    11px;\n\n  margin-bottom:\n    30px;\n\n  padding-left:\n    0;\n\n  color:\n    var(--mds-muted);\n}\n\n\n.malik-dev-studio .price-list li::before {\n  content:\n    \"\u2713\";\n\n  margin-right:\n    10px;\n\n  color:\n    var(--mds-blue-light);\n}\n\n\n\/* =====================================================\n   ABOUT\n===================================================== *\/\n\n.malik-dev-studio .about-grid {\n  display:\n    grid;\n\n  grid-template-columns:\n    minmax(300px,.7fr)\n    minmax(0,1.3fr);\n\n  align-items:\n    center;\n\n  gap:\n    70px;\n}\n\n\n.malik-dev-studio .about-image {\n  aspect-ratio:\n    4 \/ 5;\n\n  display:\n    grid;\n\n  place-items:\n    center;\n\n  overflow:\n    hidden;\n\n  border:\n    1px solid\n    var(--mds-border);\n\n  border-radius:\n    28px;\n\n  background:\n    linear-gradient(\n      145deg,\n      rgba(47,128,255,.16),\n      rgba(255,255,255,.025)\n    );\n\n  color:\n    var(--mds-muted);\n}\n\n\n.malik-dev-studio .about-text p {\n  margin-bottom:\n    18px;\n\n  color:\n    var(--mds-muted);\n\n  font-size:\n    18px;\n}\n\n\n\/* =====================================================\n   CTA\n===================================================== *\/\n\n.malik-dev-studio .cta {\n  padding:\n    80px 0 120px !important;\n}\n\n\n.malik-dev-studio .cta-box {\n  padding:\n    80px 30px;\n\n  text-align:\n    center;\n\n  border:\n    1px solid\n    rgba(47,128,255,.28);\n\n  border-radius:\n    36px;\n\n  background:\n    radial-gradient(\n      circle at 50% 0%,\n      rgba(47,128,255,.22),\n      transparent 40%\n    ),\n    var(--mds-card);\n}\n\n\n.malik-dev-studio .cta-box h2 {\n  max-width:\n    800px;\n\n  margin:\n    0 auto 18px;\n\n  color:\n    var(--mds-text);\n\n  font-size:\n    clamp(\n      40px,\n      6vw,\n      66px\n    );\n\n  line-height:\n    1;\n\n  letter-spacing:\n    -2px;\n}\n\n\n.malik-dev-studio .cta-box p {\n  max-width:\n    590px;\n\n  margin:\n    0 auto 30px;\n\n  color:\n    var(--mds-muted);\n\n  font-size:\n    18px;\n}\n\n\n.malik-dev-studio .cta-actions {\n  justify-content:\n    center !important;\n}\n\n\n\/* =====================================================\n   FOOTER\n===================================================== *\/\n\n.malik-dev-studio .malik-footer {\n  width:\n    100% !important;\n\n  margin:\n    0 !important;\n\n  padding:\n    30px 0 !important;\n\n  border-top:\n    1px solid\n    var(--mds-border) !important;\n\n  background:\n    var(--mds-bg) !important;\n}\n\n\n.malik-dev-studio .footer-inner {\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    space-between;\n\n  gap:\n    25px;\n\n  color:\n    var(--mds-muted);\n\n  font-size:\n    13px;\n}\n\n\n\/* =====================================================\n   LARGE DESKTOP\n===================================================== *\/\n\n@media (min-width: 1500px) {\n\n  .malik-dev-studio .container {\n    width:\n      min(\n        calc(100% - 120px),\n        1440px\n      ) !important;\n\n    max-width:\n      1440px !important;\n  }\n\n\n  .malik-dev-studio .hero-grid {\n    grid-template-columns:\n      minmax(0,1.12fr)\n      minmax(430px,.88fr) !important;\n\n    gap:\n      90px !important;\n  }\n\n\n  .malik-dev-studio .hero-card {\n    max-width:\n      580px !important;\n  }\n\n}\n\n\n\/* =====================================================\n   SMALL DESKTOP\n===================================================== *\/\n\n@media (max-width: 1100px) {\n\n  .malik-dev-studio .container {\n    width:\n      calc(100% - 48px) !important;\n  }\n\n\n  .malik-dev-studio .hero-grid {\n    grid-template-columns:\n      minmax(0,1fr)\n      minmax(340px,.8fr) !important;\n\n    gap:\n      42px !important;\n  }\n\n\n  .malik-dev-studio .hero-card {\n    max-width:\n      500px !important;\n  }\n\n\n  .malik-dev-studio .services-grid {\n    grid-template-columns:\n      repeat(2,minmax(0,1fr));\n  }\n\n}\n\n\n\/* =====================================================\n   TABLET\n===================================================== *\/\n\n@media (max-width: 900px) {\n\n  .malik-dev-studio .nav-links {\n    display:\n      none !important;\n  }\n\n\n  .malik-dev-studio .hero {\n    min-height:\n      auto;\n\n    padding:\n      85px 0 !important;\n  }\n\n\n  .malik-dev-studio .hero-grid,\n  .malik-dev-studio .about-grid {\n    grid-template-columns:\n      1fr !important;\n\n    gap:\n      48px !important;\n  }\n\n\n  .malik-dev-studio .hero-card {\n    width:\n      100% !important;\n\n    max-width:\n      none !important;\n\n    min-height:\n      auto;\n\n    justify-self:\n      stretch !important;\n  }\n\n\n  .malik-dev-studio .hero h1 {\n    max-width:\n      760px !important;\n\n    font-size:\n      clamp(\n        52px,\n        8vw,\n        72px\n      ) !important;\n  }\n\n\n  .malik-dev-studio .process-grid {\n    grid-template-columns:\n      repeat(2,1fr);\n  }\n\n}\n\n\n\/* =====================================================\n   MOBILE\n===================================================== *\/\n\n@media (max-width: 650px) {\n\n  .malik-dev-studio .container {\n    width:\n      calc(100% - 28px) !important;\n\n    max-width:\n      none !important;\n  }\n\n\n  .malik-dev-studio section {\n    padding:\n      80px 0;\n  }\n\n\n  .malik-dev-studio .nav-inner {\n    min-height:\n      70px;\n  }\n\n\n  .malik-dev-studio .brand {\n    font-size:\n      18px !important;\n  }\n\n\n  .malik-dev-studio .hero {\n    padding:\n      70px 0 !important;\n  }\n\n\n  .malik-dev-studio .hero h1 {\n    font-size:\n      clamp(\n        44px,\n        12vw,\n        60px\n      ) !important;\n\n    line-height:\n      1.02 !important;\n\n    letter-spacing:\n      -2.5px !important;\n  }\n\n\n  .malik-dev-studio .hero-copy {\n    font-size:\n      16px !important;\n\n    line-height:\n      1.7 !important;\n  }\n\n\n  .malik-dev-studio .hero-actions {\n    flex-direction:\n      column !important;\n\n    align-items:\n      stretch !important;\n  }\n\n\n  .malik-dev-studio .btn {\n    width:\n      100% !important;\n  }\n\n\n  .malik-dev-studio .hero-card {\n    padding:\n      26px 22px !important;\n\n    border-radius:\n      24px !important;\n  }\n\n\n  .malik-dev-studio .skill-item {\n    min-height:\n      68px;\n\n    padding:\n      15px 0 !important;\n  }\n\n\n  .malik-dev-studio .skill-item > span:first-child {\n    font-size:\n      15px !important;\n  }\n\n\n  .malik-dev-studio .services-grid,\n  .malik-dev-studio .projects-grid,\n  .malik-dev-studio .process-grid,\n  .malik-dev-studio .pricing-grid {\n    grid-template-columns:\n      1fr;\n  }\n\n\n  .malik-dev-studio .service-card {\n    min-height:\n      auto;\n\n    padding:\n      24px;\n  }\n\n\n  .malik-dev-studio .service-card > p {\n    min-height:\n      auto;\n  }\n\n\n  .malik-dev-studio .project-image {\n    height:\n      230px;\n  }\n\n\n  .malik-dev-studio .footer-inner {\n    flex-direction:\n      column;\n\n    align-items:\n      flex-start;\n\n    gap:\n      8px;\n  }\n\n}\n<\/style>\n\n<div class=\"malik-dev-studio\">\n\n  <header class=\"navbar\">\n    <div class=\"container nav-inner\">\n\n      <a href=\"#\" class=\"brand\">\n        Malik <span>Dev Studio<\/span>\n      <\/a>\n\n      <nav class=\"nav-links\">\n        <a href=\"#work\">Work<\/a>\n        <a href=\"#services\">Services<\/a>\n        <a href=\"#process\">Process<\/a>\n        <a href=\"#about\">About<\/a>\n        <a href=\"#contact\" class=\"nav-btn\">Start a Project<\/a>\n      <\/nav>\n\n    <\/div>\n  <\/header>\n\n\n  <main>\n\n    <!-- HERO -->\n    <section class=\"hero\">\n\n      <div class=\"container hero-grid\">\n\n        <div class=\"hero-content\">\n\n          <div class=\"eyebrow\">\n            <span class=\"eyebrow-dot\"><\/span>\n            Web Design + Custom Development\n          <\/div>\n\n          <h1>\n            I build websites\n            <span class=\"hero-highlight\">built to work.<\/span>\n          <\/h1>\n\n          <p class=\"hero-copy\">\n            Modern websites, e-commerce stores, booking systems and custom web\n            experiences for businesses that want more than a basic template.\n          <\/p>\n\n          <div class=\"hero-actions\">\n\n           <a href=\"https:\/\/form.jotform.com\/262503963357058\" class=\"btn btn-primary\" target=\"_blank\" rel=\"noopener\">\n  Start Your Website\n<\/a>\n\n            <a href=\"#work\" class=\"btn btn-secondary\">\n              View My Work\n            <\/a>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"hero-card\">\n\n          <div class=\"mini-label\">\n            What I Build\n          <\/div>\n\n          <div class=\"skill-list\">\n\n            <div class=\"skill-item\">\n              <span>Business Websites<\/span>\n              <span class=\"skill-number\">01<\/span>\n            <\/div>\n\n            <div class=\"skill-item\">\n              <span>E-Commerce<\/span>\n              <span class=\"skill-number\">02<\/span>\n            <\/div>\n\n            <div class=\"skill-item\">\n              <span>Booking Websites<\/span>\n              <span class=\"skill-number\">03<\/span>\n            <\/div>\n\n            <div class=\"skill-item\">\n              <span>Custom Web Apps<\/span>\n              <span class=\"skill-number\">04<\/span>\n            <\/div>\n\n            <div class=\"skill-item\">\n              <span>Hosting &amp; Maintenance<\/span>\n              <span class=\"skill-number\">05<\/span>\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- SERVICES -->\n    <section id=\"services\">\n\n      <div class=\"container\">\n\n        <div class=\"section-label\">\n          Services\n        <\/div>\n\n        <h2 class=\"section-title\">\n          From an idea to a website that&#8217;s ready for business.\n        <\/h2>\n\n        <p class=\"section-copy\">\n          Whether you need a simple landing page, an online store or a custom\n          platform, I can handle the design, development, launch and ongoing support.\n        <\/p>\n\n\n        <div class=\"services-grid\">\n\n\n          <!-- WEBSITE DESIGN -->\n          <article class=\"service-card\">\n\n            <div class=\"service-head\">\n\n              <div class=\"service-num\">01<\/div>\n\n              <div class=\"service-icon\">\n                <svg viewBox=\"0 0 24 24\">\n                  <rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"2\"><\/rect>\n                  <path d=\"M8 21h8\"><\/path>\n                  <path d=\"M12 18v3\"><\/path>\n                <\/svg>\n              <\/div>\n\n            <\/div>\n\n            <h3>Website Design<\/h3>\n\n            <p>\n              Clean, responsive business websites designed around your brand,\n              goals and customer experience.\n            <\/p>\n\n            <div class=\"logo-row\">\n              <span class=\"logo-pill\">Responsive<\/span>\n              <span class=\"logo-pill\">UI \/ UX<\/span>\n              <span class=\"logo-pill\">Mobile First<\/span>\n            <\/div>\n\n            <div class=\"service-visual\">\n\n              <div class=\"browser-window\">\n\n                <div class=\"browser-bar\">\n                  <span><\/span>\n                  <span><\/span>\n                  <span><\/span>\n                <\/div>\n\n                <div class=\"browser-page\">\n\n                  <div class=\"mock-nav\"><\/div>\n                  <div class=\"mock-heading\"><\/div>\n                  <div class=\"mock-copy\"><\/div>\n\n                  <div class=\"mock-cards\">\n                    <div class=\"mock-card\"><\/div>\n                    <div class=\"mock-card\"><\/div>\n                    <div class=\"mock-card\"><\/div>\n                  <\/div>\n\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n          <\/article>\n\n\n          <!-- WORDPRESS -->\n          <article class=\"service-card\">\n\n            <div class=\"service-head\">\n\n              <div class=\"service-num\">02<\/div>\n\n              <div class=\"service-icon\">\n                <img decoding=\"async\" src=\"https:\/\/cdn.simpleicons.org\/wordpress\/ffffff\" alt=\"WordPress\">\n              <\/div>\n\n            <\/div>\n\n            <h3>WordPress<\/h3>\n\n            <p>\n              Custom WordPress websites that are flexible, scalable and\n              easy to manage after launch.\n            <\/p>\n\n            <div class=\"logo-row\">\n\n              <span class=\"logo-pill\">\n                <img decoding=\"async\" src=\"https:\/\/cdn.simpleicons.org\/wordpress\/ffffff\" alt=\"\">\n                WordPress\n              <\/span>\n\n              <span class=\"logo-pill\">\n                <img decoding=\"async\" src=\"https:\/\/cdn.simpleicons.org\/elementor\/92003B\" alt=\"\">\n                Elementor\n              <\/span>\n\n              <span class=\"logo-pill\">\n                <span class=\"mini-plugin-logo\">A<\/span>\n                Astra\n              <\/span>\n\n              <span class=\"logo-pill\">\n                <span class=\"mini-plugin-logo\">WP<\/span>\n                WPForms\n              <\/span>\n\n            <\/div>\n\n            <div class=\"service-visual\">\n\n              <div class=\"wp-visual\">\n                <div class=\"wp-main-logo\">\n                  <img decoding=\"async\" src=\"https:\/\/cdn.simpleicons.org\/wordpress\/ffffff\" alt=\"WordPress\">\n                <\/div>\n              <\/div>\n\n            <\/div>\n\n          <\/article>\n\n\n          <!-- E-COMMERCE -->\n          <article class=\"service-card\">\n\n            <div class=\"service-head\">\n\n              <div class=\"service-num\">03<\/div>\n\n              <div class=\"service-icon\">\n                <img decoding=\"async\" src=\"https:\/\/cdn.simpleicons.org\/woocommerce\/96588A\" alt=\"WooCommerce\">\n              <\/div>\n\n            <\/div>\n\n            <h3>E-Commerce<\/h3>\n\n            <p>\n              Online stores with products, payments, checkout and\n              customer management built to sell smoothly.\n            <\/p>\n\n            <div class=\"logo-row\">\n\n              <span class=\"logo-pill\">\n                <img decoding=\"async\" src=\"https:\/\/cdn.simpleicons.org\/woocommerce\/96588A\" alt=\"\">\n                WooCommerce\n              <\/span>\n\n              <span class=\"logo-pill\">\n                <img decoding=\"async\" src=\"https:\/\/cdn.simpleicons.org\/stripe\/635BFF\" alt=\"\">\n                Stripe\n              <\/span>\n\n              <span class=\"logo-pill\">\n                <img decoding=\"async\" src=\"https:\/\/cdn.simpleicons.org\/paypal\/ffffff\" alt=\"\">\n                PayPal\n              <\/span>\n\n            <\/div>\n\n            <div class=\"service-visual\">\n\n              <div class=\"commerce-strip\">\n\n                <div class=\"commerce-logo\">\n                  <img decoding=\"async\" src=\"https:\/\/cdn.simpleicons.org\/woocommerce\/96588A\" alt=\"WooCommerce\">\n                <\/div>\n\n                <div class=\"commerce-logo\">\n                  <img decoding=\"async\" src=\"https:\/\/cdn.simpleicons.org\/stripe\/635BFF\" alt=\"Stripe\">\n                <\/div>\n\n                <div class=\"commerce-logo\">\n                  <img decoding=\"async\" src=\"https:\/\/cdn.simpleicons.org\/paypal\/ffffff\" alt=\"PayPal\">\n                <\/div>\n\n                <div class=\"commerce-logo\">\n                  <img decoding=\"async\" src=\"https:\/\/cdn.simpleicons.org\/square\/ffffff\" alt=\"Square\">\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n          <\/article>\n\n\n          <!-- BOOKING -->\n          <article class=\"service-card\">\n\n            <div class=\"service-head\">\n\n              <div class=\"service-num\">04<\/div>\n\n              <div class=\"service-icon\">\n                <svg viewBox=\"0 0 24 24\">\n                  <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\"><\/rect>\n                  <path d=\"M16 3v4\"><\/path>\n                  <path d=\"M8 3v4\"><\/path>\n                  <path d=\"M3 11h18\"><\/path>\n                  <path d=\"M8 15h2\"><\/path>\n                  <path d=\"M14 15h2\"><\/path>\n                <\/svg>\n              <\/div>\n\n            <\/div>\n\n            <h3>Booking Websites<\/h3>\n\n            <p>\n              Appointment and service booking for salons, professionals\n              and local service businesses.\n            <\/p>\n\n            <div class=\"logo-row\">\n\n              <span class=\"logo-pill\">\n                <span class=\"mini-plugin-logo plugin-amelia\">A<\/span>\n                Amelia\n              <\/span>\n\n              <span class=\"logo-pill\">\n                <span class=\"mini-plugin-logo plugin-bookly\">B<\/span>\n                Bookly\n              <\/span>\n\n              <span class=\"logo-pill\">\n                <img decoding=\"async\" src=\"https:\/\/cdn.simpleicons.org\/woocommerce\/96588A\" alt=\"\">\n                Woo Bookings\n              <\/span>\n\n              <span class=\"logo-pill\">\n                <span class=\"mini-plugin-logo plugin-ssa\">SSA<\/span>\n                Appointments\n              <\/span>\n\n            <\/div>\n\n            <div class=\"service-visual\">\n\n              <div class=\"booking-ui\">\n\n                <div class=\"booking-top\">\n                  <div class=\"booking-title\"><\/div>\n                  <span class=\"booking-arrow\">September \u203a<\/span>\n                <\/div>\n\n                <div class=\"calendar-days\">\n\n                  <div class=\"calendar-day\">1<\/div>\n                  <div class=\"calendar-day\">2<\/div>\n                  <div class=\"calendar-day\">3<\/div>\n                  <div class=\"calendar-day active\">4<\/div>\n                  <div class=\"calendar-day\">5<\/div>\n                  <div class=\"calendar-day\">6<\/div>\n                  <div class=\"calendar-day\">7<\/div>\n\n                  <div class=\"calendar-day\">8<\/div>\n                  <div class=\"calendar-day\">9<\/div>\n                  <div class=\"calendar-day\">10<\/div>\n                  <div class=\"calendar-day\">11<\/div>\n                  <div class=\"calendar-day active\">12<\/div>\n                  <div class=\"calendar-day\">13<\/div>\n                  <div class=\"calendar-day\">14<\/div>\n\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n          <\/article>\n\n\n          <!-- CUSTOM DEVELOPMENT -->\n          <article class=\"service-card\">\n\n            <div class=\"service-head\">\n\n              <div class=\"service-num\">05<\/div>\n\n              <div class=\"service-icon\">\n                <svg viewBox=\"0 0 24 24\">\n                  <path d=\"M8 9l-4 3 4 3\"><\/path>\n                  <path d=\"M16 9l4 3-4 3\"><\/path>\n                  <path d=\"M14 5l-4 14\"><\/path>\n                <\/svg>\n              <\/div>\n\n            <\/div>\n\n            <h3>Custom Development<\/h3>\n\n            <p>\n              Dashboards, APIs, automation, integrations and custom\n              workflows when a standard website isn&#8217;t enough.\n            <\/p>\n\n            <div class=\"logo-row\">\n              <span class=\"logo-pill\">APIs<\/span>\n              <span class=\"logo-pill\">Dashboards<\/span>\n              <span class=\"logo-pill\">Automation<\/span>\n            <\/div>\n\n            <div class=\"service-visual\">\n\n              <div class=\"code-window\">\n\n                <div class=\"code-line\">\n                  <span class=\"code-number\">1<\/span>\n                  <span>\n                    <span class=\"code-purple\">const<\/span>\n                    platform =\n                    <span class=\"code-green\">&#8220;custom&#8221;<\/span>;\n                  <\/span>\n                <\/div>\n\n                <div class=\"code-line\">\n                  <span class=\"code-number\">2<\/span>\n                  <span>\n                    <span class=\"code-blue\">api<\/span>.connect();\n                  <\/span>\n                <\/div>\n\n                <div class=\"code-line\">\n                  <span class=\"code-number\">3<\/span>\n                  <span>\n                    dashboard.<span class=\"code-orange\">build<\/span>();\n                  <\/span>\n                <\/div>\n\n                <div class=\"code-line\">\n                  <span class=\"code-number\">4<\/span>\n                  <span>\n                    workflow.<span class=\"code-blue\">automate<\/span>();\n                  <\/span>\n                <\/div>\n\n                <div class=\"code-line\">\n                  <span class=\"code-number\">5<\/span>\n                  <span>\n                    launch(<span class=\"code-green\">&#8220;production&#8221;<\/span>);\n                  <\/span>\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n          <\/article>\n\n\n          <!-- MAINTENANCE -->\n          <article class=\"service-card\">\n\n            <div class=\"service-head\">\n\n              <div class=\"service-num\">06<\/div>\n\n              <div class=\"service-icon\">\n                <svg viewBox=\"0 0 24 24\">\n                  <path d=\"M12 2l3 2 3.5-.5.5 3.5 2 3-2 3 .5 3.5-3.5.5-3 2-3-2-3.5.5-.5-3.5-2-3 2-3-.5-3.5L9 4z\"><\/path>\n                  <circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle>\n                <\/svg>\n              <\/div>\n\n            <\/div>\n\n            <h3>Maintenance<\/h3>\n\n            <p>\n              Hosting, updates, backups, security and continued development\n              to keep your website running properly.\n            <\/p>\n\n            <div class=\"logo-row\">\n              <span class=\"logo-pill\">Updates<\/span>\n              <span class=\"logo-pill\">Backups<\/span>\n              <span class=\"logo-pill\">Security<\/span>\n              <span class=\"logo-pill\">Uptime<\/span>\n            <\/div>\n\n            <div class=\"service-visual\">\n\n              <div class=\"maintenance-grid\">\n\n                <div class=\"maintenance-item\">\n                  <svg viewBox=\"0 0 24 24\">\n                    <path d=\"M20 6v6h-6\"><\/path>\n                    <path d=\"M20 12a8 8 0 10-2.3 5.7\"><\/path>\n                  <\/svg>\n                  Updates\n                <\/div>\n\n                <div class=\"maintenance-item\">\n                  <svg viewBox=\"0 0 24 24\">\n                    <path d=\"M4 7h16v12H4z\"><\/path>\n                    <path d=\"M8 7V4h8v3\"><\/path>\n                    <path d=\"M9 13h6\"><\/path>\n                  <\/svg>\n                  Backups\n                <\/div>\n\n                <div class=\"maintenance-item\">\n                  <svg viewBox=\"0 0 24 24\">\n                    <path d=\"M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z\"><\/path>\n                    <path d=\"M9 12l2 2 4-4\"><\/path>\n                  <\/svg>\n                  Security\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n          <\/article>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- SELECTED WORK -->\n    <section id=\"work\">\n\n      <div class=\"container\">\n\n        <div class=\"section-label\">\n          Selected Work\n        <\/div>\n\n        <h2 class=\"section-title\">\n          A look at some of my recent work.\n        <\/h2>\n\n        <p class=\"section-copy\">\n          Website design, e-commerce, gaming, business platforms\n          and custom development.\n        <\/p>\n\n\n        <div class=\"projects-grid\">\n\n\n          <!-- PROJECT 1 -->\n          <article class=\"project\">\n\n            <div class=\"project-visual\">\n              <div class=\"project-image\">\n\n                <img decoding=\"async\" src=\"https:\/\/malikdevstudio.com\/wp-content\/uploads\/2026\/09\/billboard-site-e1788876031632.png\" alt=\"Digital advertising website project by Malik Dev Studio\">\n\n              <\/div>\n            <\/div>\n\n            <div class=\"project-info\">\n\n              <p>\n                A modern lead-generation website created for a digital\n                advertising business with a strong service-focused layout.\n              <\/p>\n\n              <div class=\"tags\">\n                <span class=\"tag\">Web Design<\/span>\n                <span class=\"tag\">Lead Generation<\/span>\n                <span class=\"tag\">Advertising<\/span>\n              <\/div>\n\n            <\/div>\n\n          <\/article>\n\n\n          <!-- PROJECT 2 -->\n          <article class=\"project\">\n\n            <div class=\"project-visual\">\n              <div class=\"project-image\">\n\n                <img decoding=\"async\" src=\"https:\/\/malikdevstudio.com\/wp-content\/uploads\/2026\/09\/squid-site.png\" alt=\"Gaming community website project by Malik Dev Studio\">\n\n              <\/div>\n            <\/div>\n\n            <div class=\"project-info\">\n\n              <p>\n                A gaming community website designed around a roleplay\n                server, community growth and player engagement.\n              <\/p>\n\n              <div class=\"tags\">\n                <span class=\"tag\">Gaming<\/span>\n                <span class=\"tag\">Community<\/span>\n                <span class=\"tag\">FiveM<\/span>\n              <\/div>\n\n            <\/div>\n\n          <\/article>\n\n\n          <!-- PROJECT 3 -->\n          <article class=\"project\">\n\n            <div class=\"project-visual\">\n              <div class=\"project-image\">\n\n                <img decoding=\"async\" src=\"https:\/\/malikdevstudio.com\/wp-content\/uploads\/2026\/09\/Shebundledup.png\" alt=\"Beauty e-commerce website project by Malik Dev Studio\">\n\n              <\/div>\n            <\/div>\n\n            <div class=\"project-info\">\n\n              <p>\n                An e-commerce website designed for a beauty brand with\n                product presentation, shopping and conversion in mind.\n              <\/p>\n\n              <div class=\"tags\">\n                <span class=\"tag\">WordPress<\/span>\n                <span class=\"tag\">E-Commerce<\/span>\n                <span class=\"tag\">Beauty<\/span>\n              <\/div>\n\n            <\/div>\n\n          <\/article>\n\n\n          <!-- PROJECT 4 -->\n          <article class=\"project\">\n\n            <div class=\"project-visual\">\n              <div class=\"project-image\">\n\n                <img decoding=\"async\" src=\"https:\/\/malikdevstudio.com\/wp-content\/uploads\/2026\/09\/BnMventures.png\" alt=\"Business website project by Malik Dev Studio\">\n\n              <\/div>\n            <\/div>\n\n            <div class=\"project-info\">\n\n              <p>\n                A clean business-focused website developed to organize\n                company information and present multiple ventures professionally.\n              <\/p>\n\n              <div class=\"tags\">\n                <span class=\"tag\">Business<\/span>\n                <span class=\"tag\">Web Design<\/span>\n                <span class=\"tag\">Branding<\/span>\n              <\/div>\n\n            <\/div>\n\n          <\/article>\n\n\n          <!-- PROJECT 5 -->\n          <article class=\"project\">\n\n            <div class=\"project-visual\">\n              <div class=\"project-image\">\n\n                <img decoding=\"async\" src=\"https:\/\/malikdevstudio.com\/wp-content\/uploads\/2026\/09\/nodeveracloud_gaming_platform.png\" alt=\"Hosting dashboard interface project by Malik Dev Studio\">\n\n              <\/div>\n            <\/div>\n\n            <div class=\"project-info\">\n\n              <p>\n                A custom hosting platform interface supporting website,\n                domain and gaming-server management from one dashboard.\n              <\/p>\n\n              <div class=\"tags\">\n                <span class=\"tag\">Dashboard<\/span>\n                <span class=\"tag\">API<\/span>\n                <span class=\"tag\">Automation<\/span>\n                <span class=\"tag\">Hosting<\/span>\n              <\/div>\n\n            <\/div>\n\n          <\/article>\n\n\n          <!-- PROJECT 6 -->\n          <article class=\"project\">\n\n            <div class=\"project-visual\">\n              <div class=\"project-image\">\n\n                <img decoding=\"async\" src=\"https:\/\/malikdevstudio.com\/wp-content\/uploads\/2026\/09\/coding-script-for-gaming.png\" alt=\"Custom development project by Malik Dev Studio\">\n\n              <\/div>\n            <\/div>\n\n            <div class=\"project-info\">\n\n              <p>\n                Custom development involving application logic,\n                integrations, automation and gaming-related systems.\n              <\/p>\n\n              <div class=\"tags\">\n                <span class=\"tag\">Development<\/span>\n                <span class=\"tag\">Automation<\/span>\n                <span class=\"tag\">Integrations<\/span>\n              <\/div>\n\n            <\/div>\n\n          <\/article>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- PROCESS -->\n    <section id=\"process\">\n\n      <div class=\"container\">\n\n        <div class=\"section-label\">\n          Process\n        <\/div>\n\n        <h2 class=\"section-title\">\n          Simple from start to launch.\n        <\/h2>\n\n\n        <div class=\"process-grid\">\n\n          <div class=\"process-step\">\n\n            <div class=\"process-number\">01<\/div>\n\n            <h3>Tell Me What You Need<\/h3>\n\n            <p>\n              We go over your business, goals, pages,\n              features and deadline.\n            <\/p>\n\n          <\/div>\n\n\n          <div class=\"process-step\">\n\n            <div class=\"process-number\">02<\/div>\n\n            <h3>I Design &amp; Build<\/h3>\n\n            <p>\n              I create the website and keep you updated\n              throughout the build.\n            <\/p>\n\n          <\/div>\n\n\n          <div class=\"process-step\">\n\n            <div class=\"process-number\">03<\/div>\n\n            <h3>Launch<\/h3>\n\n            <p>\n              Your domain, hosting and website are connected\n              and ready for customers.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- PRICING -->\n    <section id=\"pricing\">\n\n      <div class=\"container\">\n\n        <div class=\"section-label\">\n          Pricing\n        <\/div>\n\n        <h2 class=\"section-title\">\n          Start small or build something custom.\n        <\/h2>\n\n        <p class=\"section-copy\">\n          Every project is different, but these options\n          give you a starting point.\n        <\/p>\n\n\n        <div class=\"pricing-grid\">\n\n          <div class=\"pricing-card\">\n\n            <h3>Landing Page<\/h3>\n\n            <p>\n              Perfect for a business, promotion or new idea.\n            <\/p>\n\n            <div class=\"price\">\n              $150\n              <small>starting at<\/small>\n            <\/div>\n\n            <ul class=\"price-list\">\n              <li>1 custom page<\/li>\n              <li>Mobile responsive<\/li>\n              <li>Contact or CTA section<\/li>\n              <li>Domain connection<\/li>\n              <li>Basic launch setup<\/li>\n            <\/ul>\n\n            <a href=\"#contact\" class=\"btn btn-secondary\">\n              Get Started\n            <\/a>\n\n          <\/div>\n\n\n          <div class=\"pricing-card featured\">\n\n            <h3>Custom Website<\/h3>\n\n            <p>\n              For businesses needing multiple pages or custom features.\n            <\/p>\n\n            <div class=\"price\">\n              Quote\n              <small>based on project<\/small>\n            <\/div>\n\n            <ul class=\"price-list\">\n              <li>Custom page structure<\/li>\n              <li>WordPress or custom build<\/li>\n              <li>E-commerce available<\/li>\n              <li>Booking systems available<\/li>\n              <li>Custom integrations available<\/li>\n            <\/ul>\n\n           <a href=\"https:\/\/form.jotform.com\/262503963357058\" class=\"btn btn-primary\" target=\"_blank\" rel=\"noopener\">\n  Request a Quote\n<\/a>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- ABOUT -->\n    <section id=\"about\">\n\n      <div class=\"container about-grid\">\n\n        <div class=\"about-image\">\n  <img decoding=\"async\"\n    src=\"https:\/\/malikdevstudio.com\/wp-content\/uploads\/2026\/09\/Malik-scaled.png\"\n    alt=\"Malik - Malik Dev Studio\"\n  >\n<\/div>\n\n\n        <div class=\"about-text\">\n\n          <div class=\"section-label\">\n            About\n          <\/div>\n\n          <h2 class=\"section-title\">\n            I&#8217;m Malik. I build digital experiences that businesses can actually use.\n          <\/h2>\n\n          <p>\n            I work with entrepreneurs and businesses to turn ideas into\n            functional websites, stores and web platforms.\n          <\/p>\n\n          <p>\n            My work goes beyond visual design. I also work with hosting\n            infrastructure, WordPress, APIs, automation, dashboards and backend systems.\n          <\/p>\n\n          <p>\n            That means I can help take a project from the first idea\n            through development, launch and ongoing support.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- CONTACT -->\n    <section id=\"contact\" class=\"cta\">\n\n      <div class=\"container\">\n\n        <div class=\"cta-box\">\n\n          <div class=\"section-label\">\n            Let&#8217;s Build\n          <\/div>\n\n          <h2>\n            Need a website? Let&#8217;s talk.\n          <\/h2>\n\n          <p>\n            Tell me what you&#8217;re trying to build, what features you need\n            and when you&#8217;re looking to launch.\n          <\/p>\n\n          <div class=\"hero-actions cta-actions\">\n\n            <a href=\"https:\/\/form.jotform.com\/262503963357058\" class=\"nav-btn\" target=\"_blank\" rel=\"noopener\">\n  Start a Project\n<\/a>\n\n            <a href=\"#contact\" class=\"btn btn-secondary\">\n              Message Me\n            <\/a>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n  <\/main>\n\n\n  <footer class=\"malik-footer\">\n\n    <div class=\"container footer-inner\">\n\n      <div>\n        \u00a9 2026 Malik Dev Studio.\n      <\/div>\n\n      <div>\n        Web Design \u2022 Development \u2022 Digital Experiences\n      <\/div>\n\n    <\/div>\n\n  <\/footer>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Malik Dev Studio Work Services Process About Start a Project Web Design + Custom Development I build websites built to work. Modern websites, e-commerce stores, booking systems and custom web experiences for businesses that want more than a basic template. Start Your Website View My Work What I Build Business Websites 01 E-Commerce 02 Booking [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/malikdevstudio.com\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/malikdevstudio.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/malikdevstudio.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/malikdevstudio.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/malikdevstudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":11,"href":"https:\/\/malikdevstudio.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":35,"href":"https:\/\/malikdevstudio.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/35"}],"wp:attachment":[{"href":"https:\/\/malikdevstudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}