/*
Theme Name: Houston Sleep Health
Theme URI: https://www.stardigitalmarketing.org/
Description: The Houston Sleep Health Theme for WordPress is simple and beautiful with lots of customization options that can tweaked by Theme Options Panel like logos, intro texts and background. BlackBird Theme supports five widgetized areas (two in the sidebar, three in the footer) and featured images (thumbnails for gallery images and posts). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the "Fullwidth" and "Gallery" categories, and has an optional one-column page template that removes the sidebar.
Author: Stardigitalmarketing
Author URI: https://www.stardigitalmarketing.org/
Version: 1.0.0
License: GNU General Public License
License URI: license.txt
Tags:two-columns, fixed-layout, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu
*/


:root {
  /* --mediplace-font: "Manrope", sans-serif;
  --mediplace-font-two: "Space Grotesk", sans-serif; */
  --mediplace-font: "Inter", sans-serif;
  --mediplace-font-two: "Inter", sans-serif;
  --mediplace-gray: #66696b;
  --mediplace-gray-rgb: 135, 140, 143;
  --mediplace-base: #234d95;
  --mediplace-base-rgb: 28, 88, 213;
  --mediplace-black: #03246B;
  --mediplace-black-rgb: 3, 36, 107;
  --mediplace-white: #ffffff;
  --mediplace-white-rgb: 255, 255, 255;
  --mediplace-bdr-radius: 20px;
  /* Brand colors */
    --hsh-navy: var(--mediplace-black, #03246b);
    --hsh-blue: var(--mediplace-base, #234d95);

    /* Content colors */
    --hsh-ink: #0a2854;
    --hsh-text: #556479;
    --hsh-pale: #f0f5fb;
    --hsh-line: #dbe4f0;
    --hsh-accent: #a9c7f4;

    /* Typography */
    --hsh-font-family: "Inter", sans-serif;

    /* Animation */
    --hsh-ease: cubic-bezier(0.2, 0.75, 0.25, 1);

    /* Default offset; JavaScript may update this per page */
    --hsh-sticky-top: 0px;

      --hsh-cta-radius: 30px;
  --hsh-cta-font-size: 15px;
  --hsh-cta-font-size-mobile: 13px;
  --hsh-cta-icon-size: 18px;
  --hsh-cta-icon-circle: 50px;
  --hsh-cta-gap: 10px;
  --hsh-cta-height: 60px;
  --hsh-cta-fill-duration: 800ms;
  --hsh-cta-fill-delay: 200ms;
  --hsh-cta-transition: 500ms;
  --hsh-cta-light-hover: var(--hsh-on-dark-accent, #b4cef8);
}




/* Shared styling for our custom pages */
.hsh-page {
    font-family: var(--hsh-font-family);
    color: var(--hsh-text);
}
.row {
  --bs-gutter-x: 24px;
}

.gutter-y-30 {
  --bs-gutter-y: 24px;
}

body {
  font-family: var(--mediplace-font);
  color: var(--mediplace-gray);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

body.locked {
  overflow: hidden;
}

a {
  color: var(--mediplace-base);
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

a,
a:hover,
a:focus,
a:visited {
  text-decoration: none;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 1;
}

:-ms-input-placeholder {
  color: inherit;
  opacity: 1;
}

::-ms-input-placeholder {
  color: inherit;
  opacity: 1;
}

::placeholder {
  color: inherit;
  opacity: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--mediplace-font-two);
  color: var(--mediplace-black);
  margin: 0;
}

p {
  margin: 0;
}

dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 1;
}

:-ms-input-placeholder {
  color: inherit;
  opacity: 1;
}

::-ms-input-placeholder {
  color: inherit;
  opacity: 1;
}

::placeholder {
  color: inherit;
  opacity: 1;
}

.page-wrapper {
  position: relative;
  margin: 0 auto;
  width: 100%;
  min-width: 300px;
  /* overflow: hidden; */
}

.container {
  padding-left: 12px;
  padding-right: 12px;
}

.list-unstyled {
  padding-left: 0;
}

.thm-btn.hsh-cta {
  --hsh-cta-background: var(--hsh-navy, #03246b);
  --hsh-cta-color: var(--hsh-white, #ffffff);
  --hsh-cta-hover-color: var(--hsh-white, #ffffff);
  --hsh-cta-fill: var(--hsh-blue, #234d95);
  --hsh-cta-wave: color-mix(in srgb, var(--hsh-blue, #234d95) 40%, transparent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  appearance: none;
  box-sizing: border-box;
  border: none;
  max-width: 100%;
  min-height: var(--hsh-cta-height);
  margin-top: 25px;
  padding: 5px 30px 5px 7px;
  gap: var(--hsh-cta-gap);
  border-radius: var(--hsh-cta-radius);
  font-family: var(--hsh-font-family, "Inter", sans-serif);
  font-weight: 700;
  font-size: var(--hsh-cta-font-size);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--hsh-cta-color);
  background: var(--hsh-cta-background);
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
  cursor: pointer;
  transition: color var(--hsh-cta-transition) linear,
    background-color var(--hsh-cta-transition) linear;
}

.thm-btn.hsh-cta::before,
.thm-btn.hsh-cta::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: 110%;
  left: 50%;
  right: auto;
  bottom: auto;
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
  transition: top var(--hsh-cta-fill-duration) ease;
}

.thm-btn.hsh-cta::before {
  background-color: var(--hsh-cta-wave);
}

.thm-btn.hsh-cta::after {
  background-color: var(--hsh-cta-fill);
}

.thm-btn.hsh-cta:is(:hover, :focus-visible)::before,
.thm-btn.hsh-cta:is(:hover, :focus-visible)::after {
  top: -40%;
}

.thm-btn.hsh-cta:is(:hover, :focus-visible)::after {
  transition-delay: var(--hsh-cta-fill-delay);
}

.thm-btn.hsh-cta:is(:hover, :focus-visible) {
  color: var(--hsh-cta-hover-color);
  text-decoration: none;
}

.thm-btn.hsh-cta > span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--hsh-cta-icon-circle);
  width: var(--hsh-cta-icon-circle);
  height: var(--hsh-cta-icon-circle);
  border-radius: 50%;
  font-size: var(--hsh-cta-icon-size);
  color: var(--hsh-white, #ffffff);
  background-color: var(--hsh-blue, #234d95);
  transition: color var(--hsh-cta-transition) ease,
    background-color var(--hsh-cta-transition) ease;
}

/* Font Awesome supplies the glyph: arrow and phone keep their own icons. */
.thm-btn.hsh-cta > span::before {
  font-family: inherit;
  font-weight: 900;
  display: block;
  font-size: var(--hsh-cta-icon-size);
}

.thm-btn.hsh-cta:is(:hover, :focus-visible) > span {
  color: var(--hsh-white, #ffffff);
  background-color: var(--hsh-navy, #03246b);
}

.thm-btn.hsh-cta:where(.hsh-cta--light) {
  --hsh-cta-background: var(--hsh-white, #ffffff);
  --hsh-cta-color: var(--hsh-navy, #03246b);
  --hsh-cta-hover-color: var(--hsh-navy, #03246b);
  --hsh-cta-wave: var(--hsh-accent, #a9c7f4);
  --hsh-cta-fill: var(--hsh-cta-light-hover);
  margin-top: 0;
}

.thm-btn.hsh-cta:focus-visible {
  outline: 3px solid var(--hsh-accent, #a9c7f4) !important;
  outline-offset: 5px;
}

@media (max-width: 767px) {
  .thm-btn.hsh-cta {
    font-size: var(--hsh-cta-font-size-mobile);
    padding-right: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thm-btn.hsh-cta,
  .thm-btn.hsh-cta::before,
  .thm-btn.hsh-cta::after,
  .thm-btn.hsh-cta > span {
    transition: none !important;
    animation: none !important;
  }
}


@media (min-width: 1344px) {
  .container {
    max-width: 1344px;
  }
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 1;
}

:-ms-input-placeholder {
  color: inherit;
  opacity: 1;
}

::-ms-input-placeholder {
  color: inherit;
  opacity: 1;
}

::placeholder {
  color: inherit;
  opacity: 1;
}

#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  opacity: 0.2;
  z-index: -1;
}

#particles-js-two {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  opacity: 0.2;
  z-index: -1;
}



/*** chat popup ***/

.chat-popup {
  position: fixed;
  left: 0;
  bottom: 0px;
  width: 350px;
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  background: var(--mediplace-black);
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  transform: translateX(-100%);
  transition: background-color 0.7s ease;
  transition: all 0.7s ease;
}

.chat-popup.popup-visible {
  transform: translateX(0%);
  visibility: visible;
  opacity: 1;
}

.chat-popup .popup-inner {
  position: relative;
  display: block;
  padding: 40px 35px;
  padding-top: 32px;
}

.chat-popup .close-chat {
  position: absolute;
  display: flex;
  left: 0px;
  top: -55px;
  width: 60px;
  height: 55px;
  line-height: 44px;
  text-align: center;
  border-radius: 5px;
  font-size: 16px;
  color: #fff;
  background: var(--mediplace-base);
  cursor: pointer;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.chat-popup .popup-inner p {
  position: relative;
  display: block;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  margin-bottom: 40px;
  color: rgba(255, 255, 255, .70);
}

.chat-popup .chat-form .form-group {
  position: relative;
  display: block;
  margin-bottom: 20px;
}

.chat-popup .chat-form .form-group:last-child {
  margin-bottom: 0px;
}

.chat-popup .chat-form .form-group input[type='text'],
.chat-popup .chat-form .form-group input[type='email'],
.chat-popup .chat-form .form-group textarea {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 5px;
  font-size: 13px;
  color: rgba(255, 255, 255, .70);
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, .10);
  transition: all 500ms ease;
}

.chat-popup .chat-form .form-group textarea {
  height: 120px;
  resize: none;
}

.chat-popup .chat-form .form-group input:focus,
.chat-popup .chat-form .form-group textarea:focus {
  outline: none;
}

.chat-popup .chat-form .form-group button {
  border: none;
  background-color: var(--mediplace-base);
}

.chat-popup .chat-form .form-group .thm-btn::before {
  background-color: rgba(var(--mediplace-white-rgb), .40);
}

.chat-popup .chat-form .form-group .thm-btn::after {
  background-color: var(--mediplace-white);
}

.chat-popup .chat-form .form-group .thm-btn span {
  background-color: var(--mediplace-black);
  color: var(--mediplace-white);
}

.chat-popup .chat-form .form-group .thm-btn:hover {
  color: var(--mediplace-base);
}

.chat-icon {
  position: fixed;
  display: inline-block;
  left: 30px;
  bottom: 45px;
  z-index: 99;
}

.chat-icon button {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 45px;
  line-height: 47px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-radius: 5px;
  background: var(--mediplace-base);
  z-index: 1;
  border: none;
}

.chat-icon button:before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background-color: rgba(var(--mediplace-base-rgb), .20);
  border-radius: 5px;
  z-index: -1;
}