<style id="elementor-post-2271">.elementor-2271 .elementor-element.elementor-element-0b4f410{width:var( --container-widget-width, 106.339% );max-width:106.339%;--container-widget-width:106.339%;--container-widget-flex-grow:0;}</style>{"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.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Website Creation for Businesses | Out of the Box MD<\/title>\n<meta name=\"description\" content=\"See website creation projects by Out of the Box MD. We build mobile-friendly websites for businesses that need trust, visibility, and leads.\" \/>\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=\"See website creation projects by Out of the Box MD. We build mobile-friendly websites for businesses that need trust, visibility, and leads.\" \/>\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\":\"Website Creation for Businesses | 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\":\"See website creation projects by Out of the Box MD. We build mobile-friendly websites for businesses that need trust, visibility, and leads.\",\"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 Marketing Digital\",\"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 is a results-driven digital marketing agency dedicated to helping businesses establish and grow their online presence. We specialize in social media marketing, content creation (logos, posts, videos), custom website development, SEO optimization, and Google Ads management. Our tailored strategies ensure businesses stand out in a competitive digital landscape, attract more customers, and increase their revenue. We provide personalized solutions that include social media profile optimization, paid advertising campaigns, strategic content creation, and search engine optimization to improve visibility and engagement. Whether you're a small business looking to expand or an established brand aiming to enhance digital performance, we create customized marketing plans to meet your needs. \ud83d\udce2 Our Services: \u2714 Social Media Marketing & Paid Ads \u2714 Logo & Branding Design \u2714 Website Creation & SEO Optimization \u2714 Google Ads & Digital Advertising \u2714 Content Marketing & Strategy \u2714 Social Media Monetization We pride ourselves on data-driven strategies, creative innovation, and measurable results, helping businesses maximize their marketing investment. Hablamos espa\u00f1ol. Let\u2019s take your business to the next level!\",\"email\":\"edrojo@outoftheboxmd.com\",\"telephone\":\"6262447009\",\"legalName\":\"Out of the Box Marketing Digital\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Website Creation for Businesses | Out of the Box MD","description":"See website creation projects by Out of the Box MD. We build mobile-friendly websites for businesses that need trust, visibility, and leads.","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":"See website creation projects by Out of the Box MD. We build mobile-friendly websites for businesses that need trust, visibility, and leads.","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":"Website Creation for Businesses | 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":"See website creation projects by Out of the Box MD. We build mobile-friendly websites for businesses that need trust, visibility, and leads.","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 Marketing Digital","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 is a results-driven digital marketing agency dedicated to helping businesses establish and grow their online presence. We specialize in social media marketing, content creation (logos, posts, videos), custom website development, SEO optimization, and Google Ads management. Our tailored strategies ensure businesses stand out in a competitive digital landscape, attract more customers, and increase their revenue. We provide personalized solutions that include social media profile optimization, paid advertising campaigns, strategic content creation, and search engine optimization to improve visibility and engagement. Whether you're a small business looking to expand or an established brand aiming to enhance digital performance, we create customized marketing plans to meet your needs. \ud83d\udce2 Our Services: \u2714 Social Media Marketing & Paid Ads \u2714 Logo & Branding Design \u2714 Website Creation & SEO Optimization \u2714 Google Ads & Digital Advertising \u2714 Content Marketing & Strategy \u2714 Social Media Monetization We pride ourselves on data-driven strategies, creative innovation, and measurable results, helping businesses maximize their marketing investment. Hablamos espa\u00f1ol. Let\u2019s take your business to the next level!","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}]}}