{"id":2271,"date":"2026-06-18T20:46:31","date_gmt":"2026-06-19T03:46:31","guid":{"rendered":"https:\/\/outoftheboxmd.com\/?page_id=2271"},"modified":"2026-09-28T17:09:41","modified_gmt":"2026-09-29T00:09:41","slug":"websites-weve-worked-on","status":"publish","type":"page","link":"https:\/\/outoftheboxmd.com\/es\/websites-weve-worked-on\/","title":{"rendered":"Sitios web en los que hemos trabajado"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2271\" class=\"elementor elementor-2271\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-04af755 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"04af755\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-120375c\" data-id=\"120375c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0b4f410 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"0b4f410\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"otb-portfolio-pro\">\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   OUT OF THE BOX MARKETING DIGITAL\r\n   WEBSITE DESIGN + PORTFOLIO\r\n   FULL RESPONSIVE VERSION\r\n   DESKTOP + MOBILE PREVIEWS\r\n   ========================================================= *\/\r\n\r\n.otb-portfolio-pro {\r\n\r\n  --otb-blue: #0ea5ff;\r\n  --otb-blue-dark: #0057d8;\r\n  --otb-purple: #7c3aed;\r\n  --otb-navy: #07162f;\r\n  --otb-navy-2: #10284b;\r\n  --otb-text: #334155;\r\n  --otb-muted: #64748b;\r\n  --otb-soft: #f5faff;\r\n  --otb-white: #ffffff;\r\n  --otb-green: #10b981;\r\n\r\n  --otb-border:\r\n    rgba(15,23,42,.10);\r\n\r\n  --otb-shadow:\r\n    0 24px 60px rgba(2,8,23,.14);\r\n\r\n  font-family:\r\n    Arial,\r\n    Helvetica,\r\n    sans-serif;\r\n\r\n  color:\r\n    var(--otb-text);\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at top left,\r\n      rgba(14,165,255,.17),\r\n      transparent 31%\r\n    ),\r\n    radial-gradient(\r\n      circle at bottom right,\r\n      rgba(124,58,237,.13),\r\n      transparent 34%\r\n    ),\r\n    linear-gradient(\r\n      180deg,\r\n      #ffffff 0%,\r\n      #f5faff 100%\r\n    );\r\n\r\n  overflow:\r\n    hidden;\r\n\r\n  padding:\r\n    0 0 80px;\r\n\r\n}\r\n\r\n\r\n.otb-portfolio-pro * {\r\n\r\n  box-sizing:\r\n    border-box;\r\n\r\n}\r\n\r\n\r\n.otb-wrap {\r\n\r\n  width:\r\n    min(1240px,94%);\r\n\r\n  margin:\r\n    0 auto;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HERO\r\n   ========================================================= *\/\r\n\r\n.otb-hero {\r\n\r\n  position:\r\n    relative;\r\n\r\n  padding:\r\n    82px 0 58px;\r\n\r\n  display:\r\n    grid;\r\n\r\n  grid-template-columns:\r\n    1.03fr .97fr;\r\n\r\n  gap:\r\n    42px;\r\n\r\n  align-items:\r\n    center;\r\n\r\n}\r\n\r\n\r\n.otb-brand-logo-row {\r\n\r\n  display:\r\n    flex;\r\n\r\n  align-items:\r\n    center;\r\n\r\n  gap:\r\n    16px;\r\n\r\n  margin-bottom:\r\n    21px;\r\n\r\n}\r\n\r\n\r\n.otb-brand-logo {\r\n\r\n  width:\r\n    165px;\r\n\r\n  max-width:\r\n    100%;\r\n\r\n  height:\r\n    auto;\r\n\r\n  display:\r\n    block;\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0 10px 18px\r\n      rgba(2,8,23,.12)\r\n    );\r\n\r\n}\r\n\r\n\r\n.otb-brand-text {\r\n\r\n  color:\r\n    var(--otb-muted);\r\n\r\n  font-size:\r\n    14px;\r\n\r\n  font-weight:\r\n    800;\r\n\r\n  letter-spacing:\r\n    .02em;\r\n\r\n}\r\n\r\n\r\n.otb-kicker {\r\n\r\n  display:\r\n    inline-flex;\r\n\r\n  align-items:\r\n    center;\r\n\r\n  gap:\r\n    8px;\r\n\r\n  padding:\r\n    9px 15px;\r\n\r\n  margin-bottom:\r\n    18px;\r\n\r\n  border-radius:\r\n    999px;\r\n\r\n  background:\r\n    rgba(14,165,255,.12);\r\n\r\n  color:\r\n    var(--otb-blue-dark);\r\n\r\n  font-size:\r\n    14px;\r\n\r\n  font-weight:\r\n    900;\r\n\r\n}\r\n\r\n\r\n.otb-hero h1 {\r\n\r\n  margin:\r\n    0 0 19px;\r\n\r\n  color:\r\n    var(--otb-navy);\r\n\r\n  font-size:\r\n    clamp(38px,5vw,68px);\r\n\r\n  line-height:\r\n    .97;\r\n\r\n  letter-spacing:\r\n    -.045em;\r\n\r\n  font-weight:\r\n    900;\r\n\r\n}\r\n\r\n\r\n.otb-hero p {\r\n\r\n  margin:\r\n    0;\r\n\r\n  max-width:\r\n    720px;\r\n\r\n  color:\r\n    var(--otb-muted);\r\n\r\n  font-size:\r\n    18px;\r\n\r\n  line-height:\r\n    1.72;\r\n\r\n}\r\n\r\n\r\n.otb-hero-pills {\r\n\r\n  display:\r\n    flex;\r\n\r\n  flex-wrap:\r\n    wrap;\r\n\r\n  gap:\r\n    10px;\r\n\r\n  margin:\r\n    27px 0 31px;\r\n\r\n}\r\n\r\n\r\n.otb-hero-pills span {\r\n\r\n  padding:\r\n    10px 14px;\r\n\r\n  border-radius:\r\n    999px;\r\n\r\n  background:\r\n    #ffffff;\r\n\r\n  border:\r\n    1px solid var(--otb-border);\r\n\r\n  color:\r\n    var(--otb-navy);\r\n\r\n  font-weight:\r\n    800;\r\n\r\n  font-size:\r\n    14px;\r\n\r\n  box-shadow:\r\n    0 10px 24px\r\n    rgba(2,8,23,.05);\r\n\r\n}\r\n\r\n\r\n.otb-actions {\r\n\r\n  display:\r\n    flex;\r\n\r\n  flex-wrap:\r\n    wrap;\r\n\r\n  gap:\r\n    14px;\r\n\r\n}\r\n\r\n\r\n.otb-btn {\r\n\r\n  display:\r\n    inline-flex;\r\n\r\n  justify-content:\r\n    center;\r\n\r\n  align-items:\r\n    center;\r\n\r\n  gap:\r\n    8px;\r\n\r\n  min-height:\r\n    50px;\r\n\r\n  padding:\r\n    14px 23px;\r\n\r\n  border-radius:\r\n    15px;\r\n\r\n  font-weight:\r\n    900;\r\n\r\n  text-decoration:\r\n    none !important;\r\n\r\n  transition:\r\n    transform .3s ease,\r\n    box-shadow .3s ease;\r\n\r\n}\r\n\r\n\r\n.otb-btn-primary {\r\n\r\n  color:\r\n    #ffffff !important;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--otb-blue),\r\n      var(--otb-purple)\r\n    );\r\n\r\n  box-shadow:\r\n    0 18px 38px\r\n    rgba(14,165,255,.30);\r\n\r\n}\r\n\r\n\r\n.otb-btn-light {\r\n\r\n  color:\r\n    var(--otb-navy) !important;\r\n\r\n  background:\r\n    #ffffff;\r\n\r\n  border:\r\n    1px solid\r\n    var(--otb-border);\r\n\r\n  box-shadow:\r\n    0 12px 28px\r\n    rgba(2,8,23,.07);\r\n\r\n}\r\n\r\n\r\n.otb-btn:hover {\r\n\r\n  transform:\r\n    translateY(-4px);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HERO 3D PREVIEW\r\n   DESKTOP + PHONE\r\n   ========================================================= *\/\r\n\r\n.otb-hero-showcase {\r\n\r\n  position:\r\n    relative;\r\n\r\n  min-height:\r\n    450px;\r\n\r\n  padding:\r\n    30px;\r\n\r\n  overflow:\r\n    hidden;\r\n\r\n  border-radius:\r\n    36px;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.75);\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      rgba(255,255,255,.92),\r\n      rgba(231,245,255,.95)\r\n    );\r\n\r\n  box-shadow:\r\n    0 35px 80px\r\n    rgba(2,8,23,.17);\r\n\r\n  perspective:\r\n    1500px;\r\n\r\n}\r\n\r\n\r\n.otb-hero-showcase::before {\r\n\r\n  content:\r\n    \"\";\r\n\r\n  position:\r\n    absolute;\r\n\r\n  width:\r\n    340px;\r\n\r\n  height:\r\n    340px;\r\n\r\n  border-radius:\r\n    50%;\r\n\r\n  top:\r\n    -110px;\r\n\r\n  right:\r\n    -100px;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle,\r\n      rgba(14,165,255,.28),\r\n      transparent 70%\r\n    );\r\n\r\n}\r\n\r\n\r\n.otb-hero-showcase::after {\r\n\r\n  content:\r\n    \"\";\r\n\r\n  position:\r\n    absolute;\r\n\r\n  width:\r\n    240px;\r\n\r\n  height:\r\n    240px;\r\n\r\n  bottom:\r\n    -80px;\r\n\r\n  left:\r\n    -85px;\r\n\r\n  border-radius:\r\n    50%;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle,\r\n      rgba(124,58,237,.20),\r\n      transparent 70%\r\n    );\r\n\r\n}\r\n\r\n\r\n.otb-floating-preview {\r\n\r\n  position:\r\n    relative;\r\n\r\n  z-index:\r\n    2;\r\n\r\n  min-height:\r\n    390px;\r\n\r\n  perspective:\r\n    1500px;\r\n\r\n}\r\n\r\n\r\n.otb-big-device {\r\n\r\n  position:\r\n    absolute;\r\n\r\n  left:\r\n    1%;\r\n\r\n  top:\r\n    45px;\r\n\r\n  width:\r\n    86%;\r\n\r\n  transform:\r\n    rotateX(5deg)\r\n    rotateY(-8deg)\r\n    rotateZ(-1deg);\r\n\r\n  animation:\r\n    otbHeroFloat\r\n    5.5s ease-in-out infinite;\r\n\r\n}\r\n\r\n\r\n.otb-browser-top {\r\n\r\n  height:\r\n    29px;\r\n\r\n  display:\r\n    flex;\r\n\r\n  align-items:\r\n    center;\r\n\r\n  gap:\r\n    7px;\r\n\r\n  padding-left:\r\n    15px;\r\n\r\n  border-radius:\r\n    18px 18px 0 0;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      #122348,\r\n      #07162f\r\n    );\r\n\r\n  box-shadow:\r\n    0 15px 30px\r\n    rgba(2,8,23,.22);\r\n\r\n}\r\n\r\n\r\n.otb-browser-top span {\r\n\r\n  width:\r\n    9px;\r\n\r\n  height:\r\n    9px;\r\n\r\n  border-radius:\r\n    50%;\r\n\r\n}\r\n\r\n\r\n.otb-browser-top span:nth-child(1) {\r\n\r\n  background:\r\n    #ff6b6b;\r\n\r\n}\r\n\r\n\r\n.otb-browser-top span:nth-child(2) {\r\n\r\n  background:\r\n    #ffd166;\r\n\r\n}\r\n\r\n\r\n.otb-browser-top span:nth-child(3) {\r\n\r\n  background:\r\n    #06d6a0;\r\n\r\n}\r\n\r\n\r\n.otb-big-screen {\r\n\r\n  height:\r\n    285px;\r\n\r\n  overflow:\r\n    hidden;\r\n\r\n  background:\r\n    #eef6ff;\r\n\r\n  border:\r\n    12px solid\r\n    #07162f;\r\n\r\n  border-top:\r\n    0;\r\n\r\n  border-radius:\r\n    0 0 18px 18px;\r\n\r\n  box-shadow:\r\n    0 28px 55px\r\n    rgba(2,8,23,.25);\r\n\r\n}\r\n\r\n\r\n.otb-big-screen img {\r\n\r\n  width:\r\n    100%;\r\n\r\n  height:\r\n    100%;\r\n\r\n  display:\r\n    block;\r\n\r\n  object-fit:\r\n    cover;\r\n\r\n}\r\n\r\n\r\n.otb-laptop-base {\r\n\r\n  width:\r\n    68%;\r\n\r\n  height:\r\n    20px;\r\n\r\n  margin:\r\n    0 auto;\r\n\r\n  border-radius:\r\n    0 0 28px 28px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      #dce9f8,\r\n      #7f99b8\r\n    );\r\n\r\n  box-shadow:\r\n    0 18px 30px\r\n    rgba(2,8,23,.18);\r\n\r\n}\r\n\r\n\r\n.otb-mini-phone {\r\n\r\n  position:\r\n    absolute;\r\n\r\n  z-index:\r\n    5;\r\n\r\n  right:\r\n    0;\r\n\r\n  top:\r\n    110px;\r\n\r\n  width:\r\n    112px;\r\n\r\n  height:\r\n    222px;\r\n\r\n  padding:\r\n    10px;\r\n\r\n  border-radius:\r\n    29px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      #07162f,\r\n      #172d51\r\n    );\r\n\r\n  box-shadow:\r\n    0 28px 55px\r\n    rgba(2,8,23,.30);\r\n\r\n  transform:\r\n    rotateX(4deg)\r\n    rotateY(12deg)\r\n    rotateZ(3deg);\r\n\r\n  animation:\r\n    otbHeroPhoneFloat\r\n    5.1s ease-in-out infinite;\r\n\r\n}\r\n\r\n\r\n.otb-mini-phone::before {\r\n\r\n  content:\r\n    \"\";\r\n\r\n  display:\r\n    block;\r\n\r\n  width:\r\n    38px;\r\n\r\n  height:\r\n    5px;\r\n\r\n  margin:\r\n    0 auto 8px;\r\n\r\n  border-radius:\r\n    999px;\r\n\r\n  background:\r\n    rgba(255,255,255,.75);\r\n\r\n}\r\n\r\n\r\n.otb-mini-phone-screen {\r\n\r\n  height:\r\n    184px;\r\n\r\n  border-radius:\r\n    18px;\r\n\r\n  overflow:\r\n    hidden;\r\n\r\n}\r\n\r\n\r\n.otb-mini-phone-screen img {\r\n\r\n  width:\r\n    100%;\r\n\r\n  height:\r\n    100%;\r\n\r\n  object-fit:\r\n    cover;\r\n\r\n  display:\r\n    block;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SECTION HEAD\r\n   ========================================================= *\/\r\n\r\n.otb-section-head {\r\n\r\n  max-width:\r\n    930px;\r\n\r\n  margin:\r\n    70px auto 32px;\r\n\r\n  text-align:\r\n    center;\r\n\r\n}\r\n\r\n\r\n.otb-section-head h2 {\r\n\r\n  margin:\r\n    0 0 13px;\r\n\r\n  color:\r\n    var(--otb-navy);\r\n\r\n  font-size:\r\n    clamp(31px,4vw,49px);\r\n\r\n  line-height:\r\n    1.08;\r\n\r\n  letter-spacing:\r\n    -.035em;\r\n\r\n  font-weight:\r\n    900;\r\n\r\n}\r\n\r\n\r\n.otb-section-head p {\r\n\r\n  max-width:\r\n    825px;\r\n\r\n  margin:\r\n    0 auto;\r\n\r\n  color:\r\n    var(--otb-muted);\r\n\r\n  font-size:\r\n    17px;\r\n\r\n  line-height:\r\n    1.72;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WHY US\r\n   ========================================================= *\/\r\n\r\n.otb-why-grid {\r\n\r\n  display:\r\n    grid;\r\n\r\n  grid-template-columns:\r\n    repeat(4,1fr);\r\n\r\n  gap:\r\n    18px;\r\n\r\n  margin-top:\r\n    28px;\r\n\r\n}\r\n\r\n\r\n.otb-why-card {\r\n\r\n  position:\r\n    relative;\r\n\r\n  overflow:\r\n    hidden;\r\n\r\n  padding:\r\n    25px;\r\n\r\n  border-radius:\r\n    25px;\r\n\r\n  background:\r\n    #ffffff;\r\n\r\n  border:\r\n    1px solid\r\n    var(--otb-border);\r\n\r\n  box-shadow:\r\n    0 16px 38px\r\n    rgba(2,8,23,.07);\r\n\r\n  transition:\r\n    transform .3s ease,\r\n    box-shadow .3s ease;\r\n\r\n}\r\n\r\n\r\n.otb-why-card:hover {\r\n\r\n  transform:\r\n    translateY(-6px);\r\n\r\n  box-shadow:\r\n    0 26px 55px\r\n    rgba(2,8,23,.12);\r\n\r\n}\r\n\r\n\r\n.otb-why-icon {\r\n\r\n  width:\r\n    60px;\r\n\r\n  height:\r\n    60px;\r\n\r\n  display:\r\n    flex;\r\n\r\n  align-items:\r\n    center;\r\n\r\n  justify-content:\r\n    center;\r\n\r\n  margin-bottom:\r\n    16px;\r\n\r\n  border-radius:\r\n    19px;\r\n\r\n  font-size:\r\n    28px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(14,165,255,.16),\r\n      rgba(124,58,237,.15)\r\n    );\r\n\r\n}\r\n\r\n\r\n.otb-why-card h3 {\r\n\r\n  margin:\r\n    0 0 9px;\r\n\r\n  color:\r\n    var(--otb-navy);\r\n\r\n  font-size:\r\n    20px;\r\n\r\n  line-height:\r\n    1.2;\r\n\r\n}\r\n\r\n\r\n.otb-why-card p {\r\n\r\n  margin:\r\n    0;\r\n\r\n  color:\r\n    var(--otb-muted);\r\n\r\n  line-height:\r\n    1.65;\r\n\r\n  font-size:\r\n    15px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PACKAGES\r\n   ========================================================= *\/\r\n\r\n.otb-package-grid {\r\n\r\n  display:\r\n    grid;\r\n\r\n  grid-template-columns:\r\n    repeat(2,1fr);\r\n\r\n  gap:\r\n    24px;\r\n\r\n  margin-top:\r\n    31px;\r\n\r\n}\r\n\r\n\r\n.otb-package {\r\n\r\n  position:\r\n    relative;\r\n\r\n  overflow:\r\n    hidden;\r\n\r\n  padding:\r\n    33px;\r\n\r\n  border-radius:\r\n    29px;\r\n\r\n  background:\r\n    #ffffff;\r\n\r\n  border:\r\n    1px solid\r\n    var(--otb-border);\r\n\r\n  box-shadow:\r\n    var(--otb-shadow);\r\n\r\n}\r\n\r\n\r\n.otb-package::after {\r\n\r\n  content:\r\n    \"\";\r\n\r\n  position:\r\n    absolute;\r\n\r\n  width:\r\n    220px;\r\n\r\n  height:\r\n    220px;\r\n\r\n  top:\r\n    -90px;\r\n\r\n  right:\r\n    -90px;\r\n\r\n  border-radius:\r\n    50%;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle,\r\n      rgba(14,165,255,.17),\r\n      transparent 70%\r\n    );\r\n\r\n  pointer-events:\r\n    none;\r\n\r\n}\r\n\r\n\r\n.otb-package h3 {\r\n\r\n  position:\r\n    relative;\r\n\r\n  z-index:\r\n    2;\r\n\r\n  margin:\r\n    0 0 11px;\r\n\r\n  color:\r\n    var(--otb-navy);\r\n\r\n  font-size:\r\n    30px;\r\n\r\n  line-height:\r\n    1.1;\r\n\r\n}\r\n\r\n\r\n.otb-price {\r\n\r\n  position:\r\n    relative;\r\n\r\n  z-index:\r\n    2;\r\n\r\n  margin:\r\n    0 0 10px;\r\n\r\n  color:\r\n    var(--otb-blue-dark);\r\n\r\n  font-size:\r\n    39px;\r\n\r\n  line-height:\r\n    1;\r\n\r\n  font-weight:\r\n    900;\r\n\r\n}\r\n\r\n\r\n.otb-price small {\r\n\r\n  display:\r\n    inline-block;\r\n\r\n  color:\r\n    var(--otb-muted);\r\n\r\n  font-size:\r\n    14px;\r\n\r\n  font-weight:\r\n    800;\r\n\r\n}\r\n\r\n\r\n.otb-package p {\r\n\r\n  position:\r\n    relative;\r\n\r\n  z-index:\r\n    2;\r\n\r\n  margin:\r\n    13px 0 0;\r\n\r\n  color:\r\n    var(--otb-muted);\r\n\r\n  line-height:\r\n    1.72;\r\n\r\n}\r\n\r\n\r\n.otb-package ul {\r\n\r\n  position:\r\n    relative;\r\n\r\n  z-index:\r\n    2;\r\n\r\n  margin:\r\n    21px 0 0;\r\n\r\n  padding:\r\n    0;\r\n\r\n  list-style:\r\n    none;\r\n\r\n}\r\n\r\n\r\n.otb-package li {\r\n\r\n  position:\r\n    relative;\r\n\r\n  padding-left:\r\n    29px;\r\n\r\n  margin:\r\n    11px 0;\r\n\r\n  color:\r\n    var(--otb-text);\r\n\r\n  line-height:\r\n    1.5;\r\n\r\n}\r\n\r\n\r\n.otb-package li::before {\r\n\r\n  content:\r\n    \"\u2713\";\r\n\r\n  position:\r\n    absolute;\r\n\r\n  left:\r\n    0;\r\n\r\n  top:\r\n    0;\r\n\r\n  color:\r\n    var(--otb-blue-dark);\r\n\r\n  font-weight:\r\n    900;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PORTFOLIO BACKGROUND\r\n   ========================================================= *\/\r\n\r\n.otb-portfolio-bg {\r\n\r\n  position:\r\n    relative;\r\n\r\n  isolation:\r\n    isolate;\r\n\r\n  overflow:\r\n    hidden;\r\n\r\n  margin-top:\r\n    75px;\r\n\r\n  padding:\r\n    72px 27px 78px;\r\n\r\n  border-radius:\r\n    40px;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 10% 5%,\r\n      rgba(14,165,255,.30),\r\n      transparent 27%\r\n    ),\r\n    radial-gradient(\r\n      circle at 91% 9%,\r\n      rgba(124,58,237,.24),\r\n      transparent 28%\r\n    ),\r\n    radial-gradient(\r\n      circle at 50% 100%,\r\n      rgba(56,189,248,.16),\r\n      transparent 40%\r\n    ),\r\n    linear-gradient(\r\n      145deg,\r\n      #06142b 0%,\r\n      #092b52 38%,\r\n      #f1f8ff 38.2%,\r\n      #ffffff 100%\r\n    );\r\n\r\n  box-shadow:\r\n    0 40px 100px\r\n    rgba(2,8,23,.18);\r\n\r\n}\r\n\r\n\r\n.otb-portfolio-bg::before {\r\n\r\n  content:\r\n    \"\";\r\n\r\n  position:\r\n    absolute;\r\n\r\n  inset:\r\n    0;\r\n\r\n  background-image:\r\n    linear-gradient(\r\n      rgba(255,255,255,.04) 1px,\r\n      transparent 1px\r\n    ),\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(255,255,255,.04) 1px,\r\n      transparent 1px\r\n    );\r\n\r\n  background-size:\r\n    34px 34px;\r\n\r\n  pointer-events:\r\n    none;\r\n\r\n}\r\n\r\n\r\n.otb-portfolio-bg::after {\r\n\r\n  content:\r\n    \"\";\r\n\r\n  position:\r\n    absolute;\r\n\r\n  width:\r\n    420px;\r\n\r\n  height:\r\n    420px;\r\n\r\n  top:\r\n    -190px;\r\n\r\n  right:\r\n    -120px;\r\n\r\n  border-radius:\r\n    50%;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle,\r\n      rgba(14,165,255,.28),\r\n      transparent 68%\r\n    );\r\n\r\n  filter:\r\n    blur(6px);\r\n\r\n  pointer-events:\r\n    none;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PORTFOLIO TITLE\r\n   ========================================================= *\/\r\n\r\n.otb-portfolio-title {\r\n\r\n  position:\r\n    relative;\r\n\r\n  z-index:\r\n    3;\r\n\r\n  max-width:\r\n    900px;\r\n\r\n  margin:\r\n    0 auto 49px;\r\n\r\n  text-align:\r\n    center;\r\n\r\n}\r\n\r\n\r\n.otb-portfolio-title span {\r\n\r\n  display:\r\n    inline-flex;\r\n\r\n  align-items:\r\n    center;\r\n\r\n  justify-content:\r\n    center;\r\n\r\n  padding:\r\n    9px 17px;\r\n\r\n  margin-bottom:\r\n    16px;\r\n\r\n  border-radius:\r\n    999px;\r\n\r\n  color:\r\n    #ffffff;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(14,165,255,.96),\r\n      rgba(124,58,237,.94)\r\n    );\r\n\r\n  box-shadow:\r\n    0 14px 30px\r\n    rgba(14,165,255,.25);\r\n\r\n  font-size:\r\n    13px;\r\n\r\n  font-weight:\r\n    900;\r\n\r\n  letter-spacing:\r\n    .04em;\r\n\r\n  text-transform:\r\n    uppercase;\r\n\r\n}\r\n\r\n\r\n.otb-portfolio-title h2 {\r\n\r\n  margin:\r\n    0 0 15px;\r\n\r\n  color:\r\n    #ffffff;\r\n\r\n  font-size:\r\n    clamp(34px,5vw,58px);\r\n\r\n  line-height:\r\n    1.04;\r\n\r\n  letter-spacing:\r\n    -.045em;\r\n\r\n  font-weight:\r\n    900;\r\n\r\n  text-shadow:\r\n    0 12px 30px\r\n    rgba(0,0,0,.18);\r\n\r\n}\r\n\r\n\r\n.otb-portfolio-title p {\r\n\r\n  max-width:\r\n    800px;\r\n\r\n  margin:\r\n    0 auto;\r\n\r\n  color:\r\n    rgba(255,255,255,.84);\r\n\r\n  font-size:\r\n    17px;\r\n\r\n  line-height:\r\n    1.75;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PORTFOLIO GRID\r\n   ========================================================= *\/\r\n\r\n.otb-grid {\r\n\r\n  position:\r\n    relative;\r\n\r\n  z-index:\r\n    3;\r\n\r\n  display:\r\n    grid;\r\n\r\n  grid-template-columns:\r\n    repeat(2,minmax(0,1fr));\r\n\r\n  gap:\r\n    30px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PORTFOLIO CARD\r\n   ========================================================= *\/\r\n\r\n.otb-site-card {\r\n\r\n  position:\r\n    relative;\r\n\r\n  overflow:\r\n    hidden;\r\n\r\n  padding:\r\n    24px;\r\n\r\n  border-radius:\r\n    30px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      rgba(255,255,255,.99),\r\n      rgba(244,249,255,.96)\r\n    );\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.90);\r\n\r\n  box-shadow:\r\n    0 24px 60px\r\n    rgba(2,8,23,.18),\r\n    inset 0 1px 0\r\n    rgba(255,255,255,.95);\r\n\r\n  transform-style:\r\n    preserve-3d;\r\n\r\n  transition:\r\n    transform .45s\r\n    cubic-bezier(.2,.8,.2,1),\r\n    box-shadow .45s ease;\r\n\r\n  animation:\r\n    otbCardEnter\r\n    .75s\r\n    cubic-bezier(.2,.8,.2,1)\r\n    both;\r\n\r\n  animation-delay:\r\n    var(--delay,0s);\r\n\r\n}\r\n\r\n\r\n.otb-site-card::before {\r\n\r\n  content:\r\n    \"\";\r\n\r\n  position:\r\n    absolute;\r\n\r\n  z-index:\r\n    6;\r\n\r\n  width:\r\n    150px;\r\n\r\n  height:\r\n    160%;\r\n\r\n  top:\r\n    -30%;\r\n\r\n  left:\r\n    -190px;\r\n\r\n  transform:\r\n    rotate(18deg);\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      transparent,\r\n      rgba(255,255,255,.58),\r\n      transparent\r\n    );\r\n\r\n  pointer-events:\r\n    none;\r\n\r\n  transition:\r\n    left .75s ease;\r\n\r\n}\r\n\r\n\r\n.otb-site-card:hover {\r\n\r\n  transform:\r\n    perspective(1200px)\r\n    rotateX(2deg)\r\n    translateY(-10px);\r\n\r\n  box-shadow:\r\n    0 40px 90px\r\n    rgba(2,8,23,.26),\r\n    0 10px 35px\r\n    rgba(14,165,255,.15);\r\n\r\n}\r\n\r\n\r\n.otb-site-card:hover::before {\r\n\r\n  left:\r\n    115%;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PORTFOLIO 3D DEVICES\r\n   DESKTOP + PHONE ONLY\r\n   ========================================================= *\/\r\n\r\n.otb-devices {\r\n\r\n  position:\r\n    relative;\r\n\r\n  min-height:\r\n    300px;\r\n\r\n  margin-bottom:\r\n    24px;\r\n\r\n  perspective:\r\n    1600px;\r\n\r\n  transform-style:\r\n    preserve-3d;\r\n\r\n}\r\n\r\n\r\n.otb-card-desktop {\r\n\r\n  position:\r\n    absolute;\r\n\r\n  left:\r\n    2%;\r\n\r\n  top:\r\n    30px;\r\n\r\n  width:\r\n    86%;\r\n\r\n  transform:\r\n    rotateX(6deg)\r\n    rotateY(-8deg)\r\n    rotateZ(-1deg)\r\n    translateZ(20px);\r\n\r\n  transform-style:\r\n    preserve-3d;\r\n\r\n  transition:\r\n    transform .55s\r\n    cubic-bezier(.2,.8,.2,1);\r\n\r\n  animation:\r\n    otbDesktopFloat\r\n    6s ease-in-out infinite;\r\n\r\n}\r\n\r\n\r\n.otb-site-card:hover\r\n.otb-card-desktop {\r\n\r\n  transform:\r\n    rotateX(3deg)\r\n    rotateY(-4deg)\r\n    rotateZ(-.5deg)\r\n    translateY(-5px)\r\n    translateZ(26px);\r\n\r\n}\r\n\r\n\r\n.otb-card-screen {\r\n\r\n  height:\r\n    220px;\r\n\r\n  overflow:\r\n    hidden;\r\n\r\n  border:\r\n    10px solid\r\n    #07162f;\r\n\r\n  border-top:\r\n    0;\r\n\r\n  border-radius:\r\n    0 0 17px 17px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      #eef7ff,\r\n      #ffffff\r\n    );\r\n\r\n  box-shadow:\r\n    0 25px 55px\r\n    rgba(2,8,23,.25);\r\n\r\n}\r\n\r\n\r\n.otb-card-screen img {\r\n\r\n  width:\r\n    100%;\r\n\r\n  height:\r\n    100%;\r\n\r\n  object-fit:\r\n    cover;\r\n\r\n  object-position:\r\n    top center;\r\n\r\n  display:\r\n    block;\r\n\r\n  transition:\r\n    transform 1.1s\r\n    cubic-bezier(.2,.8,.2,1);\r\n\r\n}\r\n\r\n\r\n.otb-site-card:hover\r\n.otb-card-screen img {\r\n\r\n  transform:\r\n    scale(1.04);\r\n\r\n}\r\n\r\n\r\n.otb-card-base {\r\n\r\n  width:\r\n    65%;\r\n\r\n  height:\r\n    18px;\r\n\r\n  margin:\r\n    0 auto;\r\n\r\n  border-radius:\r\n    0 0 28px 28px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      #e6edf7,\r\n      #8aa1bb\r\n    );\r\n\r\n  box-shadow:\r\n    0 18px 28px\r\n    rgba(2,8,23,.20);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PHONE\r\n   ========================================================= *\/\r\n\r\n.otb-card-phone {\r\n\r\n  position:\r\n    absolute;\r\n\r\n  z-index:\r\n    5;\r\n\r\n  right:\r\n    0;\r\n\r\n  top:\r\n    76px;\r\n\r\n  width:\r\n    94px;\r\n\r\n  height:\r\n    187px;\r\n\r\n  padding:\r\n    8px;\r\n\r\n  border-radius:\r\n    27px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      #07162f,\r\n      #15294b\r\n    );\r\n\r\n  box-shadow:\r\n    0 28px 55px\r\n    rgba(2,8,23,.35);\r\n\r\n  transform:\r\n    rotateX(4deg)\r\n    rotateY(12deg)\r\n    rotateZ(3deg)\r\n    translateZ(50px);\r\n\r\n  animation:\r\n    otbPhoneFloat\r\n    5.2s ease-in-out infinite;\r\n\r\n}\r\n\r\n\r\n.otb-card-phone::before {\r\n\r\n  content:\r\n    \"\";\r\n\r\n  display:\r\n    block;\r\n\r\n  width:\r\n    32px;\r\n\r\n  height:\r\n    4px;\r\n\r\n  margin:\r\n    0 auto 7px;\r\n\r\n  border-radius:\r\n    999px;\r\n\r\n  background:\r\n    rgba(255,255,255,.75);\r\n\r\n}\r\n\r\n\r\n.otb-card-phone-screen {\r\n\r\n  height:\r\n    156px;\r\n\r\n  overflow:\r\n    hidden;\r\n\r\n  border-radius:\r\n    18px;\r\n\r\n  background:\r\n    #eef6ff;\r\n\r\n}\r\n\r\n\r\n.otb-card-phone-screen img {\r\n\r\n  width:\r\n    100%;\r\n\r\n  height:\r\n    100%;\r\n\r\n  object-fit:\r\n    cover;\r\n\r\n  object-position:\r\n    top center;\r\n\r\n  display:\r\n    block;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PORTFOLIO CONTENT\r\n   ========================================================= *\/\r\n\r\n.otb-live {\r\n\r\n  display:\r\n    inline-flex;\r\n\r\n  align-items:\r\n    center;\r\n\r\n  gap:\r\n    8px;\r\n\r\n  margin-bottom:\r\n    13px;\r\n\r\n  padding:\r\n    8px 13px;\r\n\r\n  border-radius:\r\n    999px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(16,185,129,.10),\r\n      rgba(14,165,255,.10)\r\n    );\r\n\r\n  color:\r\n    #047857;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(16,185,129,.20);\r\n\r\n  font-size:\r\n    12px;\r\n\r\n  font-weight:\r\n    900;\r\n\r\n  letter-spacing:\r\n    .025em;\r\n\r\n}\r\n\r\n\r\n.otb-live::before {\r\n\r\n  content:\r\n    \"\";\r\n\r\n  width:\r\n    9px;\r\n\r\n  height:\r\n    9px;\r\n\r\n  border-radius:\r\n    50%;\r\n\r\n  background:\r\n    var(--otb-green);\r\n\r\n  animation:\r\n    otbPulse\r\n    2s infinite;\r\n\r\n}\r\n\r\n\r\n.otb-site-card h3 {\r\n\r\n  margin:\r\n    0 0 9px;\r\n\r\n  color:\r\n    var(--otb-navy);\r\n\r\n  font-size:\r\n    25px;\r\n\r\n  line-height:\r\n    1.14;\r\n\r\n  font-weight:\r\n    900;\r\n\r\n  letter-spacing:\r\n    -.025em;\r\n\r\n}\r\n\r\n\r\n.otb-site-card p {\r\n\r\n  margin:\r\n    0 0 20px;\r\n\r\n  color:\r\n    var(--otb-muted);\r\n\r\n  line-height:\r\n    1.68;\r\n\r\n  font-size:\r\n    15px;\r\n\r\n}\r\n\r\n\r\n.otb-card-footer {\r\n\r\n  display:\r\n    flex;\r\n\r\n  align-items:\r\n    center;\r\n\r\n  justify-content:\r\n    space-between;\r\n\r\n  gap:\r\n    14px;\r\n\r\n  flex-wrap:\r\n    wrap;\r\n\r\n}\r\n\r\n\r\n.otb-view {\r\n\r\n  display:\r\n    inline-flex;\r\n\r\n  align-items:\r\n    center;\r\n\r\n  justify-content:\r\n    center;\r\n\r\n  gap:\r\n    8px;\r\n\r\n  padding:\r\n    12px 19px;\r\n\r\n  border-radius:\r\n    999px;\r\n\r\n  color:\r\n    #ffffff !important;\r\n\r\n  text-decoration:\r\n    none !important;\r\n\r\n  font-weight:\r\n    900;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      #07162f,\r\n      #17416e\r\n    );\r\n\r\n  box-shadow:\r\n    0 12px 28px\r\n    rgba(2,8,23,.18);\r\n\r\n  transition:\r\n    .3s ease;\r\n\r\n}\r\n\r\n\r\n.otb-view:hover {\r\n\r\n  transform:\r\n    translateY(-3px);\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      #0ea5ff,\r\n      #7c3aed\r\n    );\r\n\r\n  box-shadow:\r\n    0 18px 34px\r\n    rgba(14,165,255,.28);\r\n\r\n}\r\n\r\n\r\n.otb-device-labels {\r\n\r\n  color:\r\n    var(--otb-muted);\r\n\r\n  font-size:\r\n    12px;\r\n\r\n  font-weight:\r\n    800;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LOAD MORE\r\n   ========================================================= *\/\r\n\r\n.otb-load-wrap {\r\n\r\n  position:\r\n    relative;\r\n\r\n  z-index:\r\n    3;\r\n\r\n  display:\r\n    flex;\r\n\r\n  justify-content:\r\n    center;\r\n\r\n  margin-top:\r\n    38px;\r\n\r\n}\r\n\r\n\r\n.otb-load-more {\r\n\r\n  border:\r\n    0;\r\n\r\n  cursor:\r\n    pointer;\r\n\r\n  min-height:\r\n    52px;\r\n\r\n  padding:\r\n    14px 27px;\r\n\r\n  border-radius:\r\n    999px;\r\n\r\n  color:\r\n    #ffffff;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--otb-blue),\r\n      var(--otb-purple)\r\n    );\r\n\r\n  box-shadow:\r\n    0 18px 38px\r\n    rgba(14,165,255,.28);\r\n\r\n  font-weight:\r\n    900;\r\n\r\n  font-size:\r\n    15px;\r\n\r\n  transition:\r\n    .3s ease;\r\n\r\n}\r\n\r\n\r\n.otb-load-more:hover {\r\n\r\n  transform:\r\n    translateY(-3px);\r\n\r\n}\r\n\r\n\r\n.otb-load-more[hidden] {\r\n\r\n  display:\r\n    none;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FAQ\r\n   ========================================================= *\/\r\n\r\n.otb-faq {\r\n\r\n  display:\r\n    grid;\r\n\r\n  grid-template-columns:\r\n    1fr 1fr;\r\n\r\n  gap:\r\n    20px;\r\n\r\n  margin-top:\r\n    31px;\r\n\r\n}\r\n\r\n\r\n.otb-faq-item {\r\n\r\n  overflow:\r\n    hidden;\r\n\r\n  border-radius:\r\n    23px;\r\n\r\n  background:\r\n    #ffffff;\r\n\r\n  border:\r\n    1px solid\r\n    var(--otb-border);\r\n\r\n  box-shadow:\r\n    0 14px 32px\r\n    rgba(2,8,23,.06);\r\n\r\n}\r\n\r\n\r\n.otb-faq-q {\r\n\r\n  width:\r\n    100%;\r\n\r\n  border:\r\n    0;\r\n\r\n  cursor:\r\n    pointer;\r\n\r\n  padding:\r\n    20px 22px;\r\n\r\n  text-align:\r\n    left;\r\n\r\n  display:\r\n    flex;\r\n\r\n  align-items:\r\n    center;\r\n\r\n  justify-content:\r\n    space-between;\r\n\r\n  gap:\r\n    18px;\r\n\r\n  color:\r\n    var(--otb-navy);\r\n\r\n  background:\r\n    #ffffff;\r\n\r\n  font-size:\r\n    17px;\r\n\r\n  font-weight:\r\n    900;\r\n\r\n}\r\n\r\n\r\n.otb-faq-q span {\r\n\r\n  color:\r\n    var(--otb-blue-dark);\r\n\r\n  font-size:\r\n    26px;\r\n\r\n  line-height:\r\n    1;\r\n\r\n  transition:\r\n    transform .25s ease;\r\n\r\n}\r\n\r\n\r\n.otb-faq-item.active\r\n.otb-faq-q span {\r\n\r\n  transform:\r\n    rotate(45deg);\r\n\r\n}\r\n\r\n\r\n.otb-faq-a {\r\n\r\n  display:\r\n    none;\r\n\r\n  padding:\r\n    0 22px 22px;\r\n\r\n  color:\r\n    var(--otb-muted);\r\n\r\n  line-height:\r\n    1.72;\r\n\r\n}\r\n\r\n\r\n.otb-faq-item.active\r\n.otb-faq-a {\r\n\r\n  display:\r\n    block;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FINAL CTA\r\n   ========================================================= *\/\r\n\r\n.otb-final-cta {\r\n\r\n  margin-top:\r\n    65px;\r\n\r\n  padding:\r\n    43px;\r\n\r\n  border-radius:\r\n    33px;\r\n\r\n  color:\r\n    #ffffff;\r\n\r\n  display:\r\n    grid;\r\n\r\n  grid-template-columns:\r\n    1.25fr .75fr;\r\n\r\n  gap:\r\n    27px;\r\n\r\n  align-items:\r\n    center;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at top right,\r\n      rgba(14,165,255,.28),\r\n      transparent 32%\r\n    ),\r\n    linear-gradient(\r\n      135deg,\r\n      #07162f,\r\n      #13294b\r\n    );\r\n\r\n  box-shadow:\r\n    0 30px 70px\r\n    rgba(2,8,23,.23);\r\n\r\n}\r\n\r\n\r\n.otb-final-cta h2 {\r\n\r\n  margin:\r\n    0 0 12px;\r\n\r\n  color:\r\n    #ffffff;\r\n\r\n  font-size:\r\n    clamp(30px,4vw,46px);\r\n\r\n  line-height:\r\n    1.08;\r\n\r\n  font-weight:\r\n    900;\r\n\r\n  letter-spacing:\r\n    -.03em;\r\n\r\n}\r\n\r\n\r\n.otb-final-cta p {\r\n\r\n  margin:\r\n    0;\r\n\r\n  color:\r\n    rgba(255,255,255,.82);\r\n\r\n  line-height:\r\n    1.72;\r\n\r\n  font-size:\r\n    17px;\r\n\r\n}\r\n\r\n\r\n.otb-contact-card {\r\n\r\n  padding:\r\n    25px;\r\n\r\n  border-radius:\r\n    25px;\r\n\r\n  background:\r\n    rgba(255,255,255,.08);\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255,255,255,.14);\r\n\r\n}\r\n\r\n\r\n.otb-contact-card strong {\r\n\r\n  display:\r\n    block;\r\n\r\n  margin-bottom:\r\n    13px;\r\n\r\n  color:\r\n    #ffffff;\r\n\r\n  font-size:\r\n    19px;\r\n\r\n}\r\n\r\n\r\n.otb-contact-card a {\r\n\r\n  display:\r\n    block;\r\n\r\n  margin:\r\n    9px 0;\r\n\r\n  color:\r\n    #ffffff !important;\r\n\r\n  text-decoration:\r\n    none !important;\r\n\r\n  font-weight:\r\n    800;\r\n\r\n  word-break:\r\n    break-word;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANIMATIONS\r\n   ========================================================= *\/\r\n\r\n@keyframes otbHeroFloat {\r\n\r\n  0%,\r\n  100% {\r\n\r\n    transform:\r\n      rotateX(5deg)\r\n      rotateY(-8deg)\r\n      rotateZ(-1deg)\r\n      translateY(0);\r\n\r\n  }\r\n\r\n  50% {\r\n\r\n    transform:\r\n      rotateX(5deg)\r\n      rotateY(-8deg)\r\n      rotateZ(-1deg)\r\n      translateY(-10px);\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n@keyframes otbHeroPhoneFloat {\r\n\r\n  0%,\r\n  100% {\r\n\r\n    translate:\r\n      0 0;\r\n\r\n  }\r\n\r\n  50% {\r\n\r\n    translate:\r\n      0 -9px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n@keyframes otbCardEnter {\r\n\r\n  from {\r\n\r\n    opacity:\r\n      0;\r\n\r\n    transform:\r\n      translateY(32px)\r\n      scale(.97);\r\n\r\n  }\r\n\r\n  to {\r\n\r\n    opacity:\r\n      1;\r\n\r\n    transform:\r\n      translateY(0)\r\n      scale(1);\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n@keyframes otbDesktopFloat {\r\n\r\n  0%,\r\n  100% {\r\n\r\n    translate:\r\n      0 0;\r\n\r\n  }\r\n\r\n  50% {\r\n\r\n    translate:\r\n      0 -7px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n@keyframes otbPhoneFloat {\r\n\r\n  0%,\r\n  100% {\r\n\r\n    translate:\r\n      0 0;\r\n\r\n  }\r\n\r\n  50% {\r\n\r\n    translate:\r\n      0 -10px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n@keyframes otbPulse {\r\n\r\n  0%,\r\n  100% {\r\n\r\n    box-shadow:\r\n      0 0 0 4px\r\n      rgba(16,185,129,.12);\r\n\r\n  }\r\n\r\n  50% {\r\n\r\n    box-shadow:\r\n      0 0 0 9px\r\n      rgba(16,185,129,.03);\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET RESPONSIVE\r\n   ========================================================= *\/\r\n\r\n@media\r\n(max-width:1050px) {\r\n\r\n  .otb-hero,\r\n  .otb-final-cta {\r\n\r\n    grid-template-columns:\r\n      1fr;\r\n\r\n  }\r\n\r\n\r\n  .otb-why-grid {\r\n\r\n    grid-template-columns:\r\n      repeat(2,1fr);\r\n\r\n  }\r\n\r\n\r\n  .otb-grid {\r\n\r\n    grid-template-columns:\r\n      1fr;\r\n\r\n  }\r\n\r\n\r\n  .otb-site-card {\r\n\r\n    max-width:\r\n      760px;\r\n\r\n    width:\r\n      100%;\r\n\r\n    margin-left:\r\n      auto;\r\n\r\n    margin-right:\r\n      auto;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE RESPONSIVE\r\n   ========================================================= *\/\r\n\r\n@media\r\n(max-width:760px) {\r\n\r\n  .otb-hero {\r\n\r\n    padding-top:\r\n      52px;\r\n\r\n  }\r\n\r\n\r\n  .otb-package-grid,\r\n  .otb-faq {\r\n\r\n    grid-template-columns:\r\n      1fr;\r\n\r\n  }\r\n\r\n\r\n  .otb-hero-showcase {\r\n\r\n    min-height:\r\n      365px;\r\n\r\n  }\r\n\r\n\r\n  .otb-big-screen {\r\n\r\n    height:\r\n      215px;\r\n\r\n  }\r\n\r\n\r\n  .otb-mini-phone {\r\n\r\n    width:\r\n      86px;\r\n\r\n    height:\r\n      174px;\r\n\r\n    top:\r\n      112px;\r\n\r\n  }\r\n\r\n\r\n  .otb-mini-phone-screen {\r\n\r\n    height:\r\n      144px;\r\n\r\n  }\r\n\r\n\r\n  .otb-portfolio-bg {\r\n\r\n    margin-top:\r\n      50px;\r\n\r\n    padding:\r\n      50px 14px 55px;\r\n\r\n    border-radius:\r\n      29px;\r\n\r\n    background:\r\n      radial-gradient(\r\n        circle at top,\r\n        rgba(14,165,255,.28),\r\n        transparent 28%\r\n      ),\r\n      linear-gradient(\r\n        165deg,\r\n        #06142b 0%,\r\n        #0c315d 22%,\r\n        #f4f9ff 22.2%,\r\n        #ffffff 100%\r\n      );\r\n\r\n  }\r\n\r\n\r\n  .otb-portfolio-title {\r\n\r\n    margin-bottom:\r\n      31px;\r\n\r\n  }\r\n\r\n\r\n  .otb-portfolio-title h2 {\r\n\r\n    font-size:\r\n      clamp(30px,10vw,43px);\r\n\r\n  }\r\n\r\n\r\n  .otb-portfolio-title p {\r\n\r\n    font-size:\r\n      15px;\r\n\r\n  }\r\n\r\n\r\n  .otb-site-card {\r\n\r\n    padding:\r\n      18px;\r\n\r\n    border-radius:\r\n      25px;\r\n\r\n  }\r\n\r\n\r\n  .otb-devices {\r\n\r\n    min-height:\r\n      220px;\r\n\r\n  }\r\n\r\n\r\n  .otb-card-desktop {\r\n\r\n    width:\r\n      92%;\r\n\r\n    left:\r\n      0;\r\n\r\n    top:\r\n      22px;\r\n\r\n  }\r\n\r\n\r\n  .otb-card-screen {\r\n\r\n    height:\r\n      150px;\r\n\r\n    border-width:\r\n      7px;\r\n\r\n  }\r\n\r\n\r\n  .otb-card-phone {\r\n\r\n    width:\r\n      68px;\r\n\r\n    height:\r\n      136px;\r\n\r\n    right:\r\n      0;\r\n\r\n    top:\r\n      60px;\r\n\r\n    padding:\r\n      6px;\r\n\r\n    border-radius:\r\n      20px;\r\n\r\n  }\r\n\r\n\r\n  .otb-card-phone-screen {\r\n\r\n    height:\r\n      111px;\r\n\r\n    border-radius:\r\n      14px;\r\n\r\n  }\r\n\r\n\r\n  .otb-site-card h3 {\r\n\r\n    font-size:\r\n      22px;\r\n\r\n  }\r\n\r\n\r\n  .otb-card-footer {\r\n\r\n    align-items:\r\n      stretch;\r\n\r\n    flex-direction:\r\n      column;\r\n\r\n  }\r\n\r\n\r\n  .otb-view {\r\n\r\n    width:\r\n      100%;\r\n\r\n  }\r\n\r\n\r\n  .otb-device-labels {\r\n\r\n    text-align:\r\n      center;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL PHONE\r\n   ========================================================= *\/\r\n\r\n@media\r\n(max-width:520px) {\r\n\r\n  .otb-brand-logo-row {\r\n\r\n    flex-direction:\r\n      column;\r\n\r\n    align-items:\r\n      flex-start;\r\n\r\n    gap:\r\n      8px;\r\n\r\n  }\r\n\r\n\r\n  .otb-brand-logo {\r\n\r\n    width:\r\n      140px;\r\n\r\n  }\r\n\r\n\r\n  .otb-why-grid {\r\n\r\n    grid-template-columns:\r\n      1fr;\r\n\r\n  }\r\n\r\n\r\n  .otb-actions {\r\n\r\n    flex-direction:\r\n      column;\r\n\r\n  }\r\n\r\n\r\n  .otb-btn {\r\n\r\n    width:\r\n      100%;\r\n\r\n  }\r\n\r\n\r\n  .otb-hero-showcase {\r\n\r\n    padding:\r\n      20px;\r\n\r\n    min-height:\r\n      320px;\r\n\r\n  }\r\n\r\n\r\n  .otb-big-device {\r\n\r\n    width:\r\n      92%;\r\n\r\n    left:\r\n      0;\r\n\r\n  }\r\n\r\n\r\n  .otb-big-screen {\r\n\r\n    height:\r\n      168px;\r\n\r\n  }\r\n\r\n\r\n  .otb-mini-phone {\r\n\r\n    width:\r\n      70px;\r\n\r\n    height:\r\n      143px;\r\n\r\n    top:\r\n      105px;\r\n\r\n  }\r\n\r\n\r\n  .otb-mini-phone-screen {\r\n\r\n    height:\r\n      115px;\r\n\r\n  }\r\n\r\n\r\n  .otb-final-cta {\r\n\r\n    padding:\r\n      29px 20px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n   ========================================================= *\/\r\n\r\n@media\r\n(prefers-reduced-motion:reduce) {\r\n\r\n  .otb-big-device,\r\n  .otb-mini-phone,\r\n  .otb-site-card,\r\n  .otb-card-desktop,\r\n  .otb-card-phone,\r\n  .otb-live::before {\r\n\r\n    animation:\r\n      none !important;\r\n\r\n  }\r\n\r\n\r\n  .otb-site-card,\r\n  .otb-card-desktop,\r\n  .otb-view,\r\n  .otb-btn {\r\n\r\n    transition:\r\n      none !important;\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<div class=\"otb-wrap\">\r\n\r\n\r\n<!-- ======================================================\r\n     HERO\r\n     ====================================================== -->\r\n\r\n<div class=\"otb-hero\">\r\n\r\n\r\n  <div>\r\n\r\n\r\n    <div class=\"otb-brand-logo-row\">\r\n\r\n\r\n      <img decoding=\"async\"\r\n        class=\"otb-brand-logo\"\r\n        src=\"https:\/\/outoftheboxmd.com\/wp-content\/uploads\/2024\/09\/logo-1024x1024.webp\"\r\n        alt=\"Out of the Box Marketing Digital logo\"\r\n      >\r\n\r\n\r\n      <div class=\"otb-brand-text\">\r\n\r\n        Out of the Box Marketing Digital\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"otb-kicker\">\r\n\r\n      Website Design \u2022 SEO Ready \u2022 Business Growth\r\n\r\n    <\/div>\r\n\r\n\r\n    <h1>\r\n\r\n      Professional Websites Built for Real Businesses\r\n\r\n    <\/h1>\r\n\r\n\r\n    <p>\r\n\r\n      We create modern, responsive websites designed to help\r\n      businesses look professional, explain their services clearly,\r\n      build trust, and make it easier for potential customers to\r\n      call, message, or request information.\r\n\r\n    <\/p>\r\n\r\n\r\n    <div class=\"otb-hero-pills\">\r\n\r\n      <span>\r\n        Desktop Ready\r\n      <\/span>\r\n\r\n      <span>\r\n        Mobile Optimized\r\n      <\/span>\r\n\r\n      <span>\r\n        SEO Foundation\r\n      <\/span>\r\n\r\n      <span>\r\n        Professional Design\r\n      <\/span>\r\n\r\n      <span>\r\n        Live Chat Compatible\r\n      <\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"otb-actions\">\r\n\r\n\r\n      <a\r\n        class=\"otb-btn otb-btn-primary\"\r\n        href=\"https:\/\/outoftheboxmd.com\/get-in-touch\/\"\r\n        target=\"_blank\"\r\n        rel=\"noopener\"\r\n      >\r\n\r\n        Get Your Website\r\n\r\n      <\/a>\r\n\r\n\r\n      <a\r\n        class=\"otb-btn otb-btn-light\"\r\n        href=\"tel:6262447009\"\r\n      >\r\n\r\n        Call (626) 244-7009\r\n\r\n      <\/a>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- HERO PREVIEW -->\r\n\r\n  <div class=\"otb-hero-showcase\">\r\n\r\n\r\n    <div class=\"otb-floating-preview\">\r\n\r\n\r\n      <div class=\"otb-big-device\">\r\n\r\n\r\n        <div class=\"otb-browser-top\">\r\n\r\n          <span><\/span>\r\n          <span><\/span>\r\n          <span><\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"otb-big-screen\">\r\n\r\n          <img decoding=\"async\"\r\n            src=\"https:\/\/s.wordpress.com\/mshots\/v1\/https%3A%2F%2Fwww.threadingstudio.com%2F?w=1200\"\r\n            alt=\"Professional website desktop preview\"\r\n          >\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"otb-laptop-base\"><\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <div class=\"otb-mini-phone\">\r\n\r\n\r\n        <div class=\"otb-mini-phone-screen\">\r\n\r\n          <img decoding=\"async\"\r\n            src=\"https:\/\/s.wordpress.com\/mshots\/v1\/https%3A%2F%2Fwww.threadingstudio.com%2F?w=430\"\r\n            alt=\"Professional website mobile preview\"\r\n          >\r\n\r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- ======================================================\r\n     WHY US\r\n     ====================================================== -->\r\n\r\n<div class=\"otb-section-head\">\r\n\r\n\r\n  <div class=\"otb-kicker\">\r\n\r\n    Why Businesses Choose Us\r\n\r\n  <\/div>\r\n\r\n\r\n  <h2>\r\n\r\n    More Than Just a Good-Looking Website\r\n\r\n  <\/h2>\r\n\r\n\r\n  <p>\r\n\r\n    Your website should represent the quality of your business,\r\n    explain what you offer, build customer confidence, and make\r\n    contacting you simple from any device.\r\n\r\n  <\/p>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"otb-why-grid\">\r\n\r\n\r\n  <div class=\"otb-why-card\">\r\n\r\n    <div class=\"otb-why-icon\">\r\n      \ud83c\udfaf\r\n    <\/div>\r\n\r\n    <h3>\r\n      Contact-Focused\r\n    <\/h3>\r\n\r\n    <p>\r\n      We organize your website with clear calls to action so visitors\r\n      can easily call, message, or request information.\r\n    <\/p>\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <div class=\"otb-why-card\">\r\n\r\n    <div class=\"otb-why-icon\">\r\n      \ud83d\udcf1\r\n    <\/div>\r\n\r\n    <h3>\r\n      Responsive Design\r\n    <\/h3>\r\n\r\n    <p>\r\n      Your website is designed to provide a professional experience\r\n      across desktop and mobile devices.\r\n    <\/p>\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <div class=\"otb-why-card\">\r\n\r\n    <div class=\"otb-why-icon\">\r\n      \ud83d\udd0e\r\n    <\/div>\r\n\r\n    <h3>\r\n      SEO Foundation\r\n    <\/h3>\r\n\r\n    <p>\r\n      We build a clean structure with titles, descriptions, and\r\n      organized content that helps search engines understand your business.\r\n    <\/p>\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <div class=\"otb-why-card\">\r\n\r\n    <div class=\"otb-why-icon\">\r\n      \ud83d\udcac\r\n    <\/div>\r\n\r\n    <h3>\r\n      Live Chat\r\n    <\/h3>\r\n\r\n    <p>\r\n      When the platform is compatible, your website can include\r\n      Live Chat and basic real-time visitor notifications.\r\n    <\/p>\r\n\r\n  <\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- ======================================================\r\n     WEBSITE PACKAGES\r\n     ====================================================== -->\r\n\r\n<div class=\"otb-section-head\">\r\n\r\n\r\n  <div class=\"otb-kicker\">\r\n\r\n    Website Services\r\n\r\n  <\/div>\r\n\r\n\r\n  <h2>\r\n\r\n    Website Creation and Ongoing Support\r\n\r\n  <\/h2>\r\n\r\n\r\n  <p>\r\n\r\n    Start with a professional website and continue building your\r\n    digital presence with maintenance, SEO support, Google Ads,\r\n    and other tools designed for businesses.\r\n\r\n  <\/p>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"otb-package-grid\">\r\n\r\n\r\n  <div class=\"otb-package\">\r\n\r\n\r\n    <h3>\r\n\r\n      Website Creation\r\n\r\n    <\/h3>\r\n\r\n\r\n    <div class=\"otb-price\">\r\n\r\n      $400\r\n\r\n      <small>\r\n\r\n        total \u2022 2 payments of $200\r\n\r\n      <\/small>\r\n\r\n    <\/div>\r\n\r\n\r\n    <p>\r\n\r\n      A professional website designed to present your business,\r\n      services, brand, and contact information in a clear and\r\n      professional way.\r\n\r\n    <\/p>\r\n\r\n\r\n    <ul>\r\n\r\n      <li>\r\n        Professional personalized website design\r\n      <\/li>\r\n\r\n      <li>\r\n        Responsive desktop and mobile layout\r\n      <\/li>\r\n\r\n      <li>\r\n        Business and service sections\r\n      <\/li>\r\n\r\n      <li>\r\n        Call, message, and contact buttons\r\n      <\/li>\r\n\r\n      <li>\r\n        Contact form\r\n      <\/li>\r\n\r\n      <li>\r\n        Social media integration\r\n      <\/li>\r\n\r\n      <li>\r\n        Map or service area when applicable\r\n      <\/li>\r\n\r\n      <li>\r\n        Photo gallery\r\n      <\/li>\r\n\r\n      <li>\r\n        Basic organization of client-provided content\r\n      <\/li>\r\n\r\n      <li>\r\n        Initial basic SEO setup\r\n      <\/li>\r\n\r\n      <li>\r\n        Google page titles and meta descriptions\r\n      <\/li>\r\n\r\n      <li>\r\n        Button, link, and form review\r\n      <\/li>\r\n\r\n      <li>\r\n        Logo design included\r\n      <\/li>\r\n\r\n      <li>\r\n        Live Chat and basic visitor notifications when compatible\r\n      <\/li>\r\n\r\n    <\/ul>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <div class=\"otb-package\">\r\n\r\n\r\n    <h3>\r\n\r\n      Website Maintenance\r\n\r\n    <\/h3>\r\n\r\n\r\n    <div class=\"otb-price\">\r\n\r\n      $140\r\n\r\n      <small>\r\n\r\n        per month\r\n\r\n      <\/small>\r\n\r\n    <\/div>\r\n\r\n\r\n    <p>\r\n\r\n      Designed for businesses that want their website to remain\r\n      updated, professional, supported, and better prepared to\r\n      complement their presence on Google.\r\n\r\n    <\/p>\r\n\r\n\r\n    <ul>\r\n\r\n      <li>\r\n        Basic website updates\r\n      <\/li>\r\n\r\n      <li>\r\n        Text and photo changes\r\n      <\/li>\r\n\r\n      <li>\r\n        Service and business information updates\r\n      <\/li>\r\n\r\n      <li>\r\n        Button, link, and form review\r\n      <\/li>\r\n\r\n      <li>\r\n        Mobile website review\r\n      <\/li>\r\n\r\n      <li>\r\n        Basic ongoing SEO support\r\n      <\/li>\r\n\r\n      <li>\r\n        Titles and meta description updates\r\n      <\/li>\r\n\r\n      <li>\r\n        Local SEO elements\r\n      <\/li>\r\n\r\n      <li>\r\n        Google Ads setup and basic support\r\n      <\/li>\r\n\r\n      <li>\r\n        Google Reviews integration when technically possible\r\n      <\/li>\r\n\r\n      <li>\r\n        General website follow-up and care\r\n      <\/li>\r\n\r\n    <\/ul>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- ======================================================\r\n     PORTFOLIO\r\n     ====================================================== -->\r\n\r\n<div class=\"otb-portfolio-bg\">\r\n\r\n\r\n  <div class=\"otb-portfolio-title\">\r\n\r\n\r\n    <span>\r\n\r\n      Website Design Portfolio\r\n\r\n    <\/span>\r\n\r\n\r\n    <h2>\r\n\r\n      Websites We\u2019ve Worked On\r\n\r\n    <\/h2>\r\n\r\n\r\n    <p>\r\n\r\n      Explore website projects we\u2019ve worked on for businesses\r\n      across different industries. Each project is displayed\r\n      in a modern desktop and mobile preview so you can see\r\n      how the website adapts across devices.\r\n\r\n    <\/p>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <div\r\n    class=\"otb-grid\"\r\n    id=\"otbPortfolioGrid\"\r\n  ><\/div>\r\n\r\n\r\n\r\n  <div class=\"otb-load-wrap\">\r\n\r\n\r\n    <button\r\n      class=\"otb-load-more\"\r\n      id=\"otbLoadMore\"\r\n      type=\"button\"\r\n    >\r\n\r\n      View More Projects\r\n\r\n    <\/button>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- ======================================================\r\n     FAQ\r\n     ====================================================== -->\r\n\r\n<div class=\"otb-section-head\">\r\n\r\n\r\n  <div class=\"otb-kicker\">\r\n\r\n    Website Questions\r\n\r\n  <\/div>\r\n\r\n\r\n  <h2>\r\n\r\n    Frequently Asked Questions\r\n\r\n  <\/h2>\r\n\r\n\r\n  <p>\r\n\r\n    Learn more about how a professional website can support\r\n    your business and your overall digital presence.\r\n\r\n  <\/p>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"otb-faq\">\r\n\r\n\r\n  <div class=\"otb-faq-item active\">\r\n\r\n\r\n    <button class=\"otb-faq-q\">\r\n\r\n      Why is it important for my business to have a website?\r\n\r\n      <span>+<\/span>\r\n\r\n    <\/button>\r\n\r\n\r\n    <div class=\"otb-faq-a\">\r\n\r\n      A professional website gives customers a place to understand\r\n      your services, learn about your business, view your work,\r\n      and easily find ways to contact you.\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <div class=\"otb-faq-item\">\r\n\r\n\r\n    <button class=\"otb-faq-q\">\r\n\r\n      Can a website help generate customer inquiries?\r\n\r\n      <span>+<\/span>\r\n\r\n    <\/button>\r\n\r\n\r\n    <div class=\"otb-faq-a\">\r\n\r\n      A properly organized website can create more opportunities\r\n      for contact by clearly explaining your services and providing\r\n      calls to action such as phone, messaging, forms, or Live Chat.\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <div class=\"otb-faq-item\">\r\n\r\n\r\n    <button class=\"otb-faq-q\">\r\n\r\n      Why does my website need to work on mobile?\r\n\r\n      <span>+<\/span>\r\n\r\n    <\/button>\r\n\r\n\r\n    <div class=\"otb-faq-a\">\r\n\r\n      Customers use many different devices. A responsive website\r\n      helps provide a professional experience whether a visitor\r\n      arrives from a computer or smartphone.\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <div class=\"otb-faq-item\">\r\n\r\n\r\n    <button class=\"otb-faq-q\">\r\n\r\n      What is basic SEO?\r\n\r\n      <span>+<\/span>\r\n\r\n    <\/button>\r\n\r\n\r\n    <div class=\"otb-faq-a\">\r\n\r\n      Basic SEO includes organizing page titles, descriptions,\r\n      services, locations, and website content so search engines\r\n      can better understand what your business does. SEO does not\r\n      guarantee a specific search position.\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <div class=\"otb-faq-item\">\r\n\r\n\r\n    <button class=\"otb-faq-q\">\r\n\r\n      Why maintain a website after it is created?\r\n\r\n      <span>+<\/span>\r\n\r\n    <\/button>\r\n\r\n\r\n    <div class=\"otb-faq-a\">\r\n\r\n      Business information changes over time. Maintenance helps\r\n      keep services, photos, contact information, links, forms,\r\n      mobile presentation, and other important website elements updated.\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <div class=\"otb-faq-item\">\r\n\r\n\r\n    <button class=\"otb-faq-q\">\r\n\r\n      Can Google Ads be used with my website?\r\n\r\n      <span>+<\/span>\r\n\r\n    <\/button>\r\n\r\n\r\n    <div class=\"otb-faq-a\">\r\n\r\n      Yes. Google Ads can direct people searching for relevant\r\n      services to your website. Advertising budget is controlled\r\n      and paid directly to Google by the client.\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <div class=\"otb-faq-item\">\r\n\r\n\r\n    <button class=\"otb-faq-q\">\r\n\r\n      What is Live Chat?\r\n\r\n      <span>+<\/span>\r\n\r\n    <\/button>\r\n\r\n\r\n    <div class=\"otb-faq-a\">\r\n\r\n      When your website is built using a compatible platform,\r\n      Live Chat can allow visitors to send messages directly\r\n      from the website and may provide basic real-time visitor\r\n      information. Location information, when available, is approximate.\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <div class=\"otb-faq-item\">\r\n\r\n\r\n    <button class=\"otb-faq-q\">\r\n\r\n      Can my Google Reviews appear on my website?\r\n\r\n      <span>+<\/span>\r\n\r\n    <\/button>\r\n\r\n\r\n    <div class=\"otb-faq-a\">\r\n\r\n      When technically possible, real reviews from your Google\r\n      Business Profile can be integrated into your website while\r\n      the applicable maintenance service remains active.\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- ======================================================\r\n     FINAL CTA\r\n     ====================================================== -->\r\n\r\n<div class=\"otb-final-cta\">\r\n\r\n\r\n  <div>\r\n\r\n\r\n    <h2>\r\n\r\n      Ready for a Website That Represents Your Business Professionally?\r\n\r\n    <\/h2>\r\n\r\n\r\n    <p>\r\n\r\n      Let\u2019s create a professional online presence designed to\r\n      explain your services, build confidence, work across different\r\n      devices, and make it easy for potential customers to contact\r\n      your business.\r\n\r\n    <\/p>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <div class=\"otb-contact-card\">\r\n\r\n\r\n    <strong>\r\n\r\n      Out of the Box Marketing Digital\r\n\r\n    <\/strong>\r\n\r\n\r\n    <a\r\n      href=\"https:\/\/outoftheboxmd.com\/\"\r\n      target=\"_blank\"\r\n      rel=\"noopener\"\r\n    >\r\n\r\n      outoftheboxmd.com\r\n\r\n    <\/a>\r\n\r\n\r\n    <a\r\n      href=\"tel:6262447009\"\r\n    >\r\n\r\n      (626) 244-7009\r\n\r\n    <\/a>\r\n\r\n\r\n    <a\r\n      href=\"https:\/\/outoftheboxmd.com\/get-in-touch\/\"\r\n      target=\"_blank\"\r\n      rel=\"noopener\"\r\n    >\r\n\r\n      Request Information \u2192\r\n\r\n    <\/a>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<script>\r\n\r\n(function () {\r\n\r\n\r\n\/* =========================================================\r\n   WEBSITE PORTFOLIO\r\n   ========================================================= *\/\r\n\r\nconst sites = [\r\n\r\n\r\n\/* =========================================================\r\n   FEATURED \/ CURRENT PROJECTS\r\n   ========================================================= *\/\r\n\r\n{\r\n  name:\r\n    \"Vinita\u2019s Beauty & Threading Studio\",\r\n\r\n  url:\r\n    \"https:\/\/www.threadingstudio.com\/\",\r\n\r\n  desc:\r\n    \"A multi-location beauty website created to organize services, locations, booking options, and customer information in a polished digital experience.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Floor Work\u2019s Pressure Washing\",\r\n\r\n  url:\r\n    \"https:\/\/www.floorworkspressurewash.com\/\",\r\n\r\n  desc:\r\n    \"A professional pressure washing website designed to showcase residential and commercial services and make customer inquiries easier.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"The Shine Stone\",\r\n\r\n  url:\r\n    \"https:\/\/www.theshinestone.net\/\",\r\n\r\n  desc:\r\n    \"A stone and countertop website created to present materials, fabrication, installation, services, products, and consultation options.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"La Voz Latina SoCal\",\r\n\r\n  url:\r\n    \"https:\/\/www.lavozlatinasocal.com\/\",\r\n\r\n  desc:\r\n    \"A digital media and community platform designed to organize articles, resources, information, and opportunities for its audience.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Elevated Clean by Liss\",\r\n\r\n  url:\r\n    \"https:\/\/www.elevatedcleanbyliss.com\/\",\r\n\r\n  desc:\r\n    \"A professional cleaning website designed to explain services, build customer confidence, and make requesting information simple.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Falcon Tires\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixsite.com\/falcon-tires\",\r\n\r\n  desc:\r\n    \"An automotive website designed to showcase tire and vehicle services while creating a clear path for customer contact.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"M Metal Building\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixsite.com\/m-metal-building\",\r\n\r\n  desc:\r\n    \"A construction-focused website created to showcase metal building services, project information, and customer inquiry options.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Elva Salon\",\r\n\r\n  url:\r\n    \"https:\/\/www.elvasalon.com\/\",\r\n\r\n  desc:\r\n    \"A beauty salon website created to present services, business information, branding, and a polished customer experience.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Tarot Silvia PR\",\r\n\r\n  url:\r\n    \"https:\/\/www.tarotsilviapr.com\/\",\r\n\r\n  desc:\r\n    \"A service-focused website designed to organize information, strengthen the brand presentation, and make customer contact simple.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"New Life Roof Cleaning\",\r\n\r\n  url:\r\n    \"https:\/\/www.roofcleaningwa.net\/\",\r\n\r\n  desc:\r\n    \"A roof and exterior cleaning website designed to explain services clearly and encourage potential customers to request information.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Maya Grill\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixsite.com\/maya-grill\",\r\n\r\n  desc:\r\n    \"A restaurant website created to present food, business information, visual branding, and customer contact options.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"CY Cleaning Service\",\r\n\r\n  url:\r\n    \"https:\/\/www.cycleaningservice.net\/\",\r\n\r\n  desc:\r\n    \"A cleaning business website designed to showcase services, create confidence, and simplify communication with customers.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Genesis Taxi Amarillo\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixsite.com\/genesis-taxi-amarill\",\r\n\r\n  desc:\r\n    \"A transportation website designed to promote taxi services, service areas, and convenient customer contact options.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"La Peque Bestia\",\r\n\r\n  url:\r\n    \"https:\/\/www.lapequebestia.net\/\",\r\n\r\n  desc:\r\n    \"A branded website project created with a professional visual structure and an easy-to-navigate digital experience.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"DACE Locksmith LLC\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixsite.com\/ace-locksmith\",\r\n\r\n  desc:\r\n    \"A locksmith website designed to present services clearly and make urgent customer contact simple and direct.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Oso Decks California\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixsite.com\/oso-decks-anaheim-2\",\r\n\r\n  desc:\r\n    \"A construction website created to showcase decks, outdoor improvement services, and customer project inquiries.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"F.H. Auto TX\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixsite.com\/auto-tx-1\",\r\n\r\n  desc:\r\n    \"An automotive website created to present services, business information, and customer contact options.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"ANG Roofing Company\",\r\n\r\n  url:\r\n    \"https:\/\/www.angroofingcompany.com\/\",\r\n\r\n  desc:\r\n    \"A roofing company website created to present services, strengthen trust, and encourage estimate requests.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"ProStart Painting\",\r\n\r\n  url:\r\n    \"https:\/\/www.prostartpainting.com\/\",\r\n\r\n  desc:\r\n    \"A painting service website designed to showcase professional services, completed work, and customer inquiry opportunities.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"J7 Prime Construction\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixsite.com\/jl-elite-constructio\",\r\n\r\n  desc:\r\n    \"A construction and remodeling website designed to showcase services and provide a clear path for project inquiries.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"3B Brothers HVAC\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixsite.com\/3b-brothers-hvac\",\r\n\r\n  desc:\r\n    \"An HVAC website created to present heating and cooling services with organized information and clear contact options.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"E Tech Refrigeration\",\r\n\r\n  url:\r\n    \"https:\/\/www.etechrefrigerations.com\/\",\r\n\r\n  desc:\r\n    \"A refrigeration service website created to organize technical services and provide customers with clear contact options.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Dr Electronics\",\r\n\r\n  url:\r\n    \"https:\/\/www.dreletronicspr.com\/\",\r\n\r\n  desc:\r\n    \"An electronics service website designed to explain available services and create a professional online presence.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Marroquin Grease Cleaning\",\r\n\r\n  url:\r\n    \"https:\/\/www.marroquingc.com\/\",\r\n\r\n  desc:\r\n    \"A commercial cleaning website created to present specialized grease cleaning services and encourage business inquiries.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Pro Budget Carpet Cleaning\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixsite.com\/pro-budget-carpet-cl\",\r\n\r\n  desc:\r\n    \"A carpet cleaning website created to showcase professional cleaning services and simplify customer inquiries.\"\r\n},\r\n\r\n\r\n\r\n\/* =========================================================\r\n   ADDITIONAL PROJECTS\r\n   ========================================================= *\/\r\n\r\n{\r\n  name:\r\n    \"Attics Express\",\r\n\r\n  url:\r\n    \"https:\/\/atticsexpress.com\/\",\r\n\r\n  desc:\r\n    \"A professional home-service website created to present attic, insulation, air duct, and home-performance services.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Kava Lounge LA\",\r\n\r\n  url:\r\n    \"https:\/\/kavaloungela.com\/\",\r\n\r\n  desc:\r\n    \"A modern hospitality website created to present the lounge experience, atmosphere, location information, and brand identity.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Apa\u2019s Kitchen\",\r\n\r\n  url:\r\n    \"https:\/\/www.apaskitchen.net\/\",\r\n\r\n  desc:\r\n    \"A restaurant and catering website created to promote food, catering services, events, and customer ordering options.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Handyman Services CALA\",\r\n\r\n  url:\r\n    \"https:\/\/handymanservicescala.com\/\",\r\n\r\n  desc:\r\n    \"A local handyman website designed to clearly present renovation, repair, and home improvement services.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"URideLA\",\r\n\r\n  url:\r\n    \"https:\/\/uridela.com\/\",\r\n\r\n  desc:\r\n    \"A transportation website created to promote private rides, airport transportation, event transportation, and booking opportunities.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Luzzyta Shop\",\r\n\r\n  url:\r\n    \"https:\/\/luzzytashop.com\/\",\r\n\r\n  desc:\r\n    \"An online shopping website designed to present products professionally and create a clean, customer-friendly shopping experience.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Merry Spa\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixsite.com\/merry-spa\",\r\n\r\n  desc:\r\n    \"A spa website project created with a relaxing visual presentation and organized service information.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Yatxy Upholstery Services\",\r\n\r\n  url:\r\n    \"https:\/\/yatxyupholsteryser.wixsite.com\/yatxy-upholstery-ser\",\r\n\r\n  desc:\r\n    \"An upholstery service website designed to showcase craftsmanship, services, and customer contact options.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"MysticAura Tarot\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixstudio.com\/mysticauratarot\",\r\n\r\n  desc:\r\n    \"A service website created with a distinctive visual identity, organized information, and an easy customer journey.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Vidente Martina\",\r\n\r\n  url:\r\n    \"https:\/\/www.videntesmartina.com\/\",\r\n\r\n  desc:\r\n    \"A service-focused website created to organize information and make it easier for visitors to connect with the business.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"JE Round Rock Cleaning\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixsite.com\/jereoundrockcleaning\",\r\n\r\n  desc:\r\n    \"A cleaning service website designed to present residential services and make customer inquiries easier.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Glitz Janitorial Service\",\r\n\r\n  url:\r\n    \"https:\/\/www.glitzjanitorialservice.com\/\",\r\n\r\n  desc:\r\n    \"A commercial janitorial website created to showcase professional cleaning services and customer inquiry options.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Angel House Cleaning\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixsite.com\/angel-house-cleaning\",\r\n\r\n  desc:\r\n    \"A residential cleaning website designed to present services professionally and build customer confidence.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Luna Air Condition\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixsite.com\/luna-air-condition-1\",\r\n\r\n  desc:\r\n    \"An air conditioning website designed to present HVAC services and make business contact information easy to find.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"EcoPure Clean\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixstudio.com\/ecopureclean\",\r\n\r\n  desc:\r\n    \"A cleaning service website created with a modern presentation focused on services, professionalism, and customer inquiries.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Cheaper Electricity TX\",\r\n\r\n  url:\r\n    \"https:\/\/cheaperelectricitytx.com\/en\/\",\r\n\r\n  desc:\r\n    \"A service-based website designed to explain electricity options, provide useful information, and guide potential customers.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"SNAP! Rodent & Pest Control\",\r\n\r\n  url:\r\n    \"https:\/\/snaprodentandpestcontrol.com\/\",\r\n\r\n  desc:\r\n    \"A pest control website designed to explain services, strengthen customer confidence, and make contacting the business easy.\"\r\n},\r\n\r\n\r\n{\r\n  name:\r\n    \"Out of the Box Marketing Digital\",\r\n\r\n  url:\r\n    \"https:\/\/outoftheboxmd.wixsite.com\/outofthebox\",\r\n\r\n  desc:\r\n    \"An earlier digital marketing website project created to present agency services, branding, and online business support.\"\r\n}\r\n\r\n\r\n];\r\n\r\n\r\n\r\n\/* =========================================================\r\n   PORTFOLIO SETTINGS\r\n   ========================================================= *\/\r\n\r\nconst grid =\r\n  document.getElementById(\r\n    \"otbPortfolioGrid\"\r\n  );\r\n\r\n\r\nconst loadButton =\r\n  document.getElementById(\r\n    \"otbLoadMore\"\r\n  );\r\n\r\n\r\nconst initialAmount =\r\n  12;\r\n\r\n\r\nconst loadAmount =\r\n  8;\r\n\r\n\r\nlet visibleAmount =\r\n  initialAmount;\r\n\r\n\r\n\r\n\/* =========================================================\r\n   SCREENSHOT FUNCTION\r\n   ========================================================= *\/\r\n\r\nfunction shot(\r\n  url,\r\n  width\r\n) {\r\n\r\n  return (\r\n    \"https:\/\/s.wordpress.com\/mshots\/v1\/\" +\r\n    encodeURIComponent(url) +\r\n    \"?w=\" +\r\n    width\r\n  );\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   FALLBACK PREVIEW\r\n   ========================================================= *\/\r\n\r\nfunction fallbackSVG(\r\n  name\r\n) {\r\n\r\n  return (\r\n    \"data:image\/svg+xml;charset=UTF-8,\" +\r\n    encodeURIComponent(`\r\n\r\n    <svg\r\n      xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n      width=\"1200\"\r\n      height=\"800\"\r\n      viewBox=\"0 0 1200 800\"\r\n    >\r\n\r\n      <defs>\r\n\r\n        <linearGradient\r\n          id=\"background\"\r\n          x1=\"0\"\r\n          y1=\"0\"\r\n          x2=\"1\"\r\n          y2=\"1\"\r\n        >\r\n\r\n          <stop\r\n            offset=\"0%\"\r\n            stop-color=\"#eaf7ff\"\r\n          \/>\r\n\r\n          <stop\r\n            offset=\"52%\"\r\n            stop-color=\"#f4f0ff\"\r\n          \/>\r\n\r\n          <stop\r\n            offset=\"100%\"\r\n            stop-color=\"#ffffff\"\r\n          \/>\r\n\r\n        <\/linearGradient>\r\n\r\n      <\/defs>\r\n\r\n\r\n      <rect\r\n        width=\"1200\"\r\n        height=\"800\"\r\n        fill=\"url(#background)\"\r\n      \/>\r\n\r\n\r\n      <circle\r\n        cx=\"1030\"\r\n        cy=\"110\"\r\n        r=\"190\"\r\n        fill=\"#8bdcff\"\r\n        opacity=\".28\"\r\n      \/>\r\n\r\n\r\n      <circle\r\n        cx=\"150\"\r\n        cy=\"700\"\r\n        r=\"180\"\r\n        fill=\"#a78bfa\"\r\n        opacity=\".22\"\r\n      \/>\r\n\r\n\r\n      <text\r\n        x=\"50%\"\r\n        y=\"44%\"\r\n        text-anchor=\"middle\"\r\n        font-family=\"Arial\"\r\n        font-size=\"44\"\r\n        font-weight=\"700\"\r\n        fill=\"#07162f\"\r\n      >\r\n\r\n        ${name}\r\n\r\n      <\/text>\r\n\r\n\r\n      <text\r\n        x=\"50%\"\r\n        y=\"54%\"\r\n        text-anchor=\"middle\"\r\n        font-family=\"Arial\"\r\n        font-size=\"24\"\r\n        fill=\"#64748b\"\r\n      >\r\n\r\n        Website Preview\r\n\r\n      <\/text>\r\n\r\n\r\n    <\/svg>\r\n\r\n    `)\r\n  );\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   CREATE PORTFOLIO CARD\r\n   ========================================================= *\/\r\n\r\nfunction createCard(\r\n  site,\r\n  index\r\n) {\r\n\r\n\r\n  const desktop =\r\n    shot(\r\n      site.url,\r\n      1200\r\n    );\r\n\r\n\r\n  const mobile =\r\n    shot(\r\n      site.url,\r\n      430\r\n    );\r\n\r\n\r\n  const card =\r\n    document.createElement(\r\n      \"article\"\r\n    );\r\n\r\n\r\n  card.className =\r\n    \"otb-site-card\";\r\n\r\n\r\n  card.style.setProperty(\r\n    \"--delay\",\r\n    `${(index % 8) * .08}s`\r\n  );\r\n\r\n\r\n  card.innerHTML = `\r\n\r\n\r\n    <div class=\"otb-devices\">\r\n\r\n\r\n      <!-- DESKTOP -->\r\n\r\n      <div class=\"otb-card-desktop\">\r\n\r\n\r\n        <div class=\"otb-browser-top\">\r\n\r\n          <span><\/span>\r\n\r\n          <span><\/span>\r\n\r\n          <span><\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"otb-card-screen\">\r\n\r\n          <img decoding=\"async\"\r\n            src=\"${desktop}\"\r\n            alt=\"${site.name} desktop website preview\"\r\n            loading=\"lazy\"\r\n          >\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"otb-card-base\"><\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- MOBILE -->\r\n\r\n      <div class=\"otb-card-phone\">\r\n\r\n\r\n        <div class=\"otb-card-phone-screen\">\r\n\r\n          <img decoding=\"async\"\r\n            src=\"${mobile}\"\r\n            alt=\"${site.name} mobile website preview\"\r\n            loading=\"lazy\"\r\n          >\r\n\r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <span class=\"otb-live\">\r\n\r\n      Website Preview\r\n\r\n    <\/span>\r\n\r\n\r\n\r\n    <h3>\r\n\r\n      ${site.name}\r\n\r\n    <\/h3>\r\n\r\n\r\n\r\n    <p>\r\n\r\n      ${site.desc}\r\n\r\n    <\/p>\r\n\r\n\r\n\r\n    <div class=\"otb-card-footer\">\r\n\r\n\r\n      <a\r\n        class=\"otb-view\"\r\n        href=\"${site.url}\"\r\n        target=\"_blank\"\r\n        rel=\"noopener nofollow\"\r\n      >\r\n\r\n        View Website\r\n\r\n        <span aria-hidden=\"true\">\r\n          \u2197\r\n        <\/span>\r\n\r\n      <\/a>\r\n\r\n\r\n      <span class=\"otb-device-labels\">\r\n\r\n        Desktop \u2022 Mobile\r\n\r\n      <\/span>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n  `;\r\n\r\n\r\n\r\n  card\r\n    .querySelectorAll(\r\n      \"img\"\r\n    )\r\n    .forEach(\r\n      img => {\r\n\r\n\r\n        img.addEventListener(\r\n          \"error\",\r\n          function () {\r\n\r\n\r\n            this.onerror =\r\n              null;\r\n\r\n\r\n            this.src =\r\n              fallbackSVG(\r\n                site.name\r\n              );\r\n\r\n\r\n          }\r\n        );\r\n\r\n\r\n      }\r\n    );\r\n\r\n\r\n  return card;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   RENDER PORTFOLIO\r\n   ========================================================= *\/\r\n\r\nfunction renderPortfolio() {\r\n\r\n\r\n  grid.innerHTML =\r\n    \"\";\r\n\r\n\r\n  sites\r\n    .slice(\r\n      0,\r\n      visibleAmount\r\n    )\r\n    .forEach(\r\n      (site,index) => {\r\n\r\n\r\n        grid.appendChild(\r\n          createCard(\r\n            site,\r\n            index\r\n          )\r\n        );\r\n\r\n\r\n      }\r\n    );\r\n\r\n\r\n  if (\r\n    visibleAmount >=\r\n    sites.length\r\n  ) {\r\n\r\n\r\n    loadButton.hidden =\r\n      true;\r\n\r\n\r\n  }\r\n\r\n  else {\r\n\r\n\r\n    loadButton.hidden =\r\n      false;\r\n\r\n\r\n  }\r\n\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   LOAD MORE PROJECTS\r\n   ========================================================= *\/\r\n\r\nloadButton.addEventListener(\r\n  \"click\",\r\n  function () {\r\n\r\n\r\n    visibleAmount =\r\n      Math.min(\r\n        visibleAmount +\r\n        loadAmount,\r\n        sites.length\r\n      );\r\n\r\n\r\n    renderPortfolio();\r\n\r\n\r\n  }\r\n);\r\n\r\n\r\n\r\n\/* =========================================================\r\n   FAQ ACCORDION\r\n   ========================================================= *\/\r\n\r\ndocument\r\n  .querySelectorAll(\r\n    \".otb-faq-q\"\r\n  )\r\n  .forEach(\r\n    button => {\r\n\r\n\r\n      button.addEventListener(\r\n        \"click\",\r\n        function () {\r\n\r\n\r\n          const item =\r\n            this.closest(\r\n              \".otb-faq-item\"\r\n            );\r\n\r\n\r\n          const parent =\r\n            item.parentElement;\r\n\r\n\r\n          parent\r\n            .querySelectorAll(\r\n              \".otb-faq-item\"\r\n            )\r\n            .forEach(\r\n              faq => {\r\n\r\n\r\n                if (\r\n                  faq !== item\r\n                ) {\r\n\r\n\r\n                  faq.classList.remove(\r\n                    \"active\"\r\n                  );\r\n\r\n\r\n                }\r\n\r\n\r\n              }\r\n            );\r\n\r\n\r\n          item.classList.toggle(\r\n            \"active\"\r\n          );\r\n\r\n\r\n        }\r\n      );\r\n\r\n\r\n    }\r\n  );\r\n\r\n\r\n\r\n\/* =========================================================\r\n   INITIALIZE\r\n   ========================================================= *\/\r\n\r\nrenderPortfolio();\r\n\r\n\r\n})();\r\n\r\n<\/script>\r\n\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Explore client website projects by Out of the Box Marketing Digital. We create professional, mobile-friendly websites for businesses that want to build trust, improve their online presence, and attract more customers.<\/p>","protected":false},"author":3,"featured_media":2275,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2271","page","type-page","status-publish","has-post-thumbnail"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6.1 (Yoast SEO v28.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Business Website Portfolio | Out of the Box MD<\/title>\n<meta name=\"description\" content=\"Browse business websites we&#039;ve worked on in different industries. See examples of our web design and contact us about your own project.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/outoftheboxmd.com\/es\/websites-weve-worked-on\/\" \/>\n<meta property=\"og:locale\" content=\"es_MX\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Websites We\u2019ve Worked On\" \/>\n<meta property=\"og:description\" content=\"Browse business websites we&#039;ve worked on in different industries. See examples of our web design and contact us about your own project.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/outoftheboxmd.com\/es\/websites-weve-worked-on\/\" \/>\n<meta property=\"og:site_name\" content=\"Out of the Box Marketing Digital\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/outoftheboxmd\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-29T00:09:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/outoftheboxmd.com\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-18-2026-08_45_22-PM.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1731\" \/>\n\t<meta property=\"og:image:height\" content=\"909\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"27 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/outoftheboxmd.com\\\/websites-weve-worked-on\\\/\",\"url\":\"https:\\\/\\\/outoftheboxmd.com\\\/websites-weve-worked-on\\\/\",\"name\":\"Business Website Portfolio | Out of the Box MD\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/outoftheboxmd.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/outoftheboxmd.com\\\/websites-weve-worked-on\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/outoftheboxmd.com\\\/websites-weve-worked-on\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/outoftheboxmd.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/ChatGPT-Image-Jun-18-2026-08_45_22-PM.webp\",\"datePublished\":\"2026-06-19T03:46:31+00:00\",\"dateModified\":\"2026-09-29T00:09:41+00:00\",\"description\":\"Browse business websites we've worked on in different industries. See examples of our web design and contact us about your own project.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/outoftheboxmd.com\\\/websites-weve-worked-on\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/outoftheboxmd.com\\\/websites-weve-worked-on\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/outoftheboxmd.com\\\/websites-weve-worked-on\\\/#primaryimage\",\"url\":\"https:\\\/\\\/outoftheboxmd.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/ChatGPT-Image-Jun-18-2026-08_45_22-PM.webp\",\"contentUrl\":\"https:\\\/\\\/outoftheboxmd.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/ChatGPT-Image-Jun-18-2026-08_45_22-PM.webp\",\"width\":1731,\"height\":909},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/outoftheboxmd.com\\\/websites-weve-worked-on\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/outoftheboxmd.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Websites We\u2019ve Worked On\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/outoftheboxmd.com\\\/#website\",\"url\":\"https:\\\/\\\/outoftheboxmd.com\\\/\",\"name\":\"Out of the Box Marketing Digital\",\"description\":\"Digital Marketing for Business\",\"publisher\":{\"@id\":\"https:\\\/\\\/outoftheboxmd.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/outoftheboxmd.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/outoftheboxmd.com\\\/#organization\",\"name\":\"Out of the Box Marketing Digital\",\"alternateName\":\"Out of the Box MD\",\"url\":\"https:\\\/\\\/outoftheboxmd.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/outoftheboxmd.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/outoftheboxmd.com\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/cropped-logo.webp\",\"contentUrl\":\"https:\\\/\\\/outoftheboxmd.com\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/cropped-logo.webp\",\"width\":512,\"height\":512,\"caption\":\"Out of the Box Marketing Digital\"},\"image\":{\"@id\":\"https:\\\/\\\/outoftheboxmd.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/outoftheboxmd\",\"https:\\\/\\\/www.tiktok.com\\\/@outoftheboxmd\",\"https:\\\/\\\/www.instagram.com\\\/outoftheboxdm\",\"https:\\\/\\\/www.youtube.com\\\/@outofthebox2065\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/out-of-the-box-md\\\/\"],\"description\":\"Out of the Box Marketing Digital es una agencia de marketing digital en California que atiende principalmente en espa\u00f1ol a emprendedores y negocios de Estados Unidos. Servicios: dise\u00f1o de p\u00e1ginas web y tiendas en l\u00ednea, SEO y SEO local, Google Ads, Meta Ads, gesti\u00f3n de redes sociales, identidad de marca y logotipos, im\u00e1genes, reels, videos publicitarios y automatizaciones para negocios. Atenci\u00f3n remota en espa\u00f1ol y tambi\u00e9n en ingl\u00e9s. M\u00e1s informaci\u00f3n: https:\\\/\\\/outoftheboxmd.com\\\/es\\\/.\",\"email\":\"edrojo@outoftheboxmd.com\",\"telephone\":\"6262447009\",\"legalName\":\"Out of the Box Marketing Digital\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Business Website Portfolio | Out of the Box MD","description":"Browse business websites we've worked on in different industries. See examples of our web design and contact us about your own project.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/outoftheboxmd.com\/es\/websites-weve-worked-on\/","og_locale":"es_MX","og_type":"article","og_title":"Websites We\u2019ve Worked On","og_description":"Browse business websites we've worked on in different industries. See examples of our web design and contact us about your own project.","og_url":"https:\/\/outoftheboxmd.com\/es\/websites-weve-worked-on\/","og_site_name":"Out of the Box Marketing Digital","article_publisher":"https:\/\/www.facebook.com\/outoftheboxmd","article_modified_time":"2026-09-29T00:09:41+00:00","og_image":[{"width":1731,"height":909,"url":"https:\/\/outoftheboxmd.com\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-18-2026-08_45_22-PM.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"27 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/outoftheboxmd.com\/websites-weve-worked-on\/","url":"https:\/\/outoftheboxmd.com\/websites-weve-worked-on\/","name":"Business Website Portfolio | Out of the Box MD","isPartOf":{"@id":"https:\/\/outoftheboxmd.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/outoftheboxmd.com\/websites-weve-worked-on\/#primaryimage"},"image":{"@id":"https:\/\/outoftheboxmd.com\/websites-weve-worked-on\/#primaryimage"},"thumbnailUrl":"https:\/\/outoftheboxmd.com\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-18-2026-08_45_22-PM.webp","datePublished":"2026-06-19T03:46:31+00:00","dateModified":"2026-09-29T00:09:41+00:00","description":"Browse business websites we've worked on in different industries. See examples of our web design and contact us about your own project.","breadcrumb":{"@id":"https:\/\/outoftheboxmd.com\/websites-weve-worked-on\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/outoftheboxmd.com\/websites-weve-worked-on\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/outoftheboxmd.com\/websites-weve-worked-on\/#primaryimage","url":"https:\/\/outoftheboxmd.com\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-18-2026-08_45_22-PM.webp","contentUrl":"https:\/\/outoftheboxmd.com\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-18-2026-08_45_22-PM.webp","width":1731,"height":909},{"@type":"BreadcrumbList","@id":"https:\/\/outoftheboxmd.com\/websites-weve-worked-on\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/outoftheboxmd.com\/"},{"@type":"ListItem","position":2,"name":"Websites We\u2019ve Worked On"}]},{"@type":"WebSite","@id":"https:\/\/outoftheboxmd.com\/#website","url":"https:\/\/outoftheboxmd.com\/","name":"Out of the Box Marketing Digital","description":"Marketing Digital para Negocios","publisher":{"@id":"https:\/\/outoftheboxmd.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/outoftheboxmd.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/outoftheboxmd.com\/#organization","name":"Out of the Box Marketing Digital","alternateName":"Out of the Box MD","url":"https:\/\/outoftheboxmd.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/outoftheboxmd.com\/#\/schema\/logo\/image\/","url":"https:\/\/outoftheboxmd.com\/wp-content\/uploads\/2024\/06\/cropped-logo.webp","contentUrl":"https:\/\/outoftheboxmd.com\/wp-content\/uploads\/2024\/06\/cropped-logo.webp","width":512,"height":512,"caption":"Out of the Box Marketing Digital"},"image":{"@id":"https:\/\/outoftheboxmd.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/outoftheboxmd","https:\/\/www.tiktok.com\/@outoftheboxmd","https:\/\/www.instagram.com\/outoftheboxdm","https:\/\/www.youtube.com\/@outofthebox2065","https:\/\/www.linkedin.com\/company\/out-of-the-box-md\/"],"description":"Out of the Box Marketing Digital es una agencia de marketing digital en California que atiende principalmente en espa\u00f1ol a emprendedores y negocios de Estados Unidos. Servicios: dise\u00f1o de p\u00e1ginas web y tiendas en l\u00ednea, SEO y SEO local, Google Ads, Meta Ads, gesti\u00f3n de redes sociales, identidad de marca y logotipos, im\u00e1genes, reels, videos publicitarios y automatizaciones para negocios. Atenci\u00f3n remota en espa\u00f1ol y tambi\u00e9n en ingl\u00e9s. M\u00e1s informaci\u00f3n: https:\/\/outoftheboxmd.com\/es\/.","email":"edrojo@outoftheboxmd.com","telephone":"6262447009","legalName":"Out of the Box Marketing Digital"}]}},"_links":{"self":[{"href":"https:\/\/outoftheboxmd.com\/es\/wp-json\/wp\/v2\/pages\/2271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/outoftheboxmd.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/outoftheboxmd.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/outoftheboxmd.com\/es\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/outoftheboxmd.com\/es\/wp-json\/wp\/v2\/comments?post=2271"}],"version-history":[{"count":13,"href":"https:\/\/outoftheboxmd.com\/es\/wp-json\/wp\/v2\/pages\/2271\/revisions"}],"predecessor-version":[{"id":2623,"href":"https:\/\/outoftheboxmd.com\/es\/wp-json\/wp\/v2\/pages\/2271\/revisions\/2623"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/outoftheboxmd.com\/es\/wp-json\/wp\/v2\/media\/2275"}],"wp:attachment":[{"href":"https:\/\/outoftheboxmd.com\/es\/wp-json\/wp\/v2\/media?parent=2271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}