/* Responsive public website, loaded after the original theme. */
img, video, iframe { max-width: 100%; }
img { height: auto; }
.row > [class*="col-"] { min-width: 0; }
[id="home"], [id="about-us"], [id="services"], [id="features"],
[id="pricing"], [id="media-servers"], [id="contact-us"] { scroll-margin-top: 100px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline: 3px solid #24769b !important; outline-offset: 3px; }
@media (max-width: 1199.98px) {
  #navbar.main, #navbar.main.sticky { padding: 10px 0; border-bottom-width: 3px; background: #f5cf87; }
  #navbar > .container > .row { align-items: center; flex-wrap: nowrap; }
  #navbar > .container > .row > .col-md-2 { flex: 0 0 140px; max-width: 140px; }
  #navbar > .container > .row > .col-md-10 { flex: 1 1 0; max-width: none; position: static; }
  #navbar .container { position: relative; }
  #navbar .logoWrap, #navbar.sticky .logoWrap { width: 115px; margin: 0; }
  #navbar .logoWrap a, #navbar.sticky .logoWrap a { position: static; display: block; width: 115px; }
  #mainNav.navbar, .main.sticky #mainNav.navbar { min-height: 48px; margin: 0; padding: 0; justify-content: flex-end; position: static; }
  #mainNav .navbar-toggler, .main.sticky #mainNav .navbar-toggler { position: static; min-width: 48px; min-height: 48px; padding: 10px; color: #3a4557; border: 1px solid #8c744d; border-radius: 6px; font-size: 24px; }
  #mainNav .navbar-collapse { position: absolute; top: 100%; left: 15px; right: 15px; z-index: 1000; background: #fff; border-radius: 0 0 10px 10px; box-shadow: 0 8px 20px #25304126; max-height: 70vh; overflow-y: auto; }
  #mainNav .navbar-collapse.show { padding: 8px; }
  #mainNav .navbarNav ul { float: none; width: 100%; }
  #mainNav .navbarNav ul li, .main.sticky #mainNav .navbarNav ul li { display: block; float: none; width: 100%; }
  #mainNav .navbarNav ul li a, #mainNav .navbar-collapse.show ul li a, .main.sticky #mainNav .navbarNav ul li a { color: #3a4557; text-align: left; padding: 11px 16px; min-height: 46px; font-size: 18px; line-height: 24px; border: 0; border-radius: 5px; }
  #mainNav .navbarNav ul li a:before, #mainNav .navbarNav ul li a:after { display: none; }
  #mainNav .navbarNav ul li a.active { background: #f7ece5; color: #ab0905; }
  .mainContentWrap { padding: 40px 15px; }
  #pricingSectioon .row.text-center > .col-md-3 { flex: 0 0 50%; max-width: 50%; margin-bottom: 24px; }
  #pricingSectioon .priceWrap { height: 100%; margin-bottom: 0; display: flex; flex-direction: column; }
  #pricingSectioon .priceWrap footer { margin-top: auto; }
}
@media (max-width: 767.98px) {
  body { font-size: 17px; line-height: 1.6; }
  .headerTopWrap .topSocials { height: auto; min-height: 40px; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; }
  .topSocials:before, .ribbon { display: none; }
  .topSocials li, .topSocials li.phone { font-size: 16px; padding: 6px; }
  .mainContentWrap { padding: 32px 0; }
  .titleRow { padding-bottom: 24px; }
  .sectionTitle { font-size: 26px; line-height: 1.3; overflow-wrap: anywhere; }
  .sectionTitle span { font-size: 20px; margin-bottom: 8px; }
  .AnimatedBg { height: auto; min-height: 420px; }
  .home-container-front { min-height: 420px; padding: 50px 18px 180px; background-size: auto 180px; }
  .AnimatedBg h1 { font-size: clamp(28px, 7vw, 42px); line-height: 1.2; text-shadow: 2px 2px 0 #538f9e; }
  .home-container-front h4 { font-size: 20px; line-height: 1.45; margin: 16px auto; max-width: 400px; }
  .btn, button { min-height: 44px; }
  .modal-dialog { margin: 12px; max-width: calc(100% - 24px); }
  .modal-content { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
  .modal-body { padding: 16px; }
  .modal form, .modal form label { display: block; width: 100% !important; max-width: 100%; margin-left: 0; margin-right: 0; }
  .modal input, .modal select, .modal textarea { box-sizing: border-box; width: 100% !important; max-width: 100%; font-size: 16px !important; min-height: 44px; }
  .modal textarea { height: auto; min-height: 88px; }
  .featuresBoxLeft .featurTxt, .featuresBoxRight .featurTxt { float: none; width: auto; max-width: 100%; overflow-wrap: anywhere; }
  .featuresBoxLeft, .featuresBoxRight { padding-left: 0; padding-right: 0; }
  .footerWids { padding: 30px 0; }
  .footerWids .col-md-3 { margin-bottom: 24px; }
  .footerWrap { padding: 20px 0; text-align: center; overflow-wrap: anywhere; }
  .footerWrap .policy_nav { float: none !important; margin-top: 14px; }
  .footerWrap .policy_nav ul { display: flex; flex-wrap: wrap; justify-content: center; padding: 0; }
  .footerWrap .policy_nav li a { display: inline-block; padding: 8px; }
  .goTop { right: 8px; bottom: 8px; font-size: 26px; padding: 8px; }
}
@media (max-width: 575.98px) {
  #pricingSectioon .row.text-center > .col-md-3 { flex: 0 0 100%; max-width: 100%; }
  #pricingSectioon .priceWrap { max-width: 380px; margin: 0 auto; }
  .priceWrap h3 { padding: 10px; margin-bottom: 12px; }
  .priceWrap .priceBox { padding: 22px 0; margin-bottom: 12px; }
  .priceWrap ul li { padding: 7px 6px; }
  .priceWrap footer { padding: 16px 0; }
  .priceWrap footer .btn { min-width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
}