/*
    Proto Development Limited — protodev.app
    Mobile-portrait balance overrides (loaded after style.css)
    Centers and evens out content blocks on phone-width screens.
    Also sets the professional dark header + teal accent palette.
*/

/* ===== Accent palette ===== */
:root {
  --proto-ink: #221C34;      /* deep plum header */
  --proto-ink-2: #191426;    /* darker top strip */
  --proto-teal: #17BEBB;     /* professional accent, easy to tell from purple */
  --secondary-color: #17BEBB;/* replaces the template's clashing orange */
}

/* ===== Header: dark & professional (fixes "too much white") ===== */
.header-section .infobar {
  background: var(--proto-ink-2);
  border-radius: 10px;
  padding: 8px 24px;
  margin-bottom: 6px;
}
.header-section .infobar-content a,
.header-section .infobar-content p,
.header-section .info-social a { color: #EDEBF5 !important; }
.header-section .info-social a:hover { color: var(--proto-teal) !important; }

.proto-navbar { background: var(--proto-ink) !important; }

.proto-navmenu > ul li a { color: #D7D2E6 !important; }
.proto-navmenu > ul li a:hover,
.proto-navmenu > ul li.active > a { color: #ffffff !important; }
.proto-navmenu > ul > li > a::before { background: var(--proto-teal) !important; height: 3px; }
.proto-navmenu > ul > li.active > a::before { width: calc(100% - 32px) !important; }
.proto-navmenu > ul li.has-submenu::after { color: #D7D2E6 !important; }

/* hamburger / off-canvas toggler bars visible on dark */
.header-right .header-toggle span { background: #ffffff !important; }

/* keep the header dark when it sticks on scroll */
.header-sticky.sticky-on { background: var(--proto-ink) !important; }
.header-sticky.sticky-on .proto-navbar { background: var(--proto-ink) !important; }

/* contact-card icons (Font Awesome, sized to match the old SVGs) */
.ct-contact-card-content .icon { display: inline-flex; align-items: center; }
.ct-contact-card-content .icon i { font-size: 46px; line-height: 1; color: var(--primary-color); }

/* on tablet/phone the template paints the header white — keep it dark & tidy */
@media (max-width: 991.98px) {
  .header-section { background-color: transparent !important; }
  .proto-navbar { padding: 12px 18px; border-radius: 12px; }
}

@media (max-width: 767.98px) {

  /* keep all media inside the viewport */
  img { max-width: 100%; height: auto; }

  /* ---------- Hero ---------- */
  .hm2-hero-section .hm2-hero-content { text-align: center; }
  .hm2-hero-section .hm2-hero-content .d-flex { justify-content: center; }
  .hm2-hero-section .hero-image { text-align: center; }
  .hm2-hero-section .hero-image img { margin-left: auto; margin-right: auto; }

  /* ---------- Section titles ---------- */
  .section-title { text-align: center; }

  /* ---------- Local-business strip ---------- */
  .cr2-brand-slider .brand-image { text-align: center; }
  .cr2-brand-slider .brand-image span { justify-content: center; }

  /* ---------- Service cards ---------- */
  .hm2-service-box { text-align: center; padding: 34px 26px; }

  /* ---------- About tabs ---------- */
  .cr-about-tab-control { -ms-flex-pack: center; justify-content: center; }
  .cr-about-section .img-left { text-align: center; }
  .tab-content-right { text-align: center; }
  .tab-content-right .d-flex { -ms-flex-pack: center; justify-content: center; }
  .tab-content-right .cr-tab-counter { -ms-flex-pack: center; justify-content: center; }

  /* ---------- Call-to-action block ---------- */
  .hm2-cta-content { text-align: center; padding-left: 0 !important; }
  .hm2-cta-content .d-flex { -ms-flex-pack: center; justify-content: center; }

  /* ---------- Team / "how we work" ---------- */
  .cr-service-box .cr-content-right { text-align: center; padding-left: 0 !important; }
  .cr-service-box .cr-content-right .cr-icon-box { -ms-flex-pack: center; justify-content: center; text-align: left; }

  /* ---------- Video / CTA banner ---------- */
  .hm2-video-box { text-align: center; -ms-flex-pack: center !important; justify-content: center !important; }
  .hm2-video-box .content-left { -ms-flex-pack: center; justify-content: center; }

  /* ---------- Testimonials ---------- */
  .cr2-feedback-left { text-align: center; }
  .cr2-feedback-left .cr2-feedback-counter { -ms-flex-pack: center; justify-content: center; }
  .cr2-feedback-single .d-flex { -ms-flex-pack: center; justify-content: center; }
  .cr2-feedback-single .clients_info { -ms-flex-pack: center; justify-content: center; text-align: center; }

  /* ---------- Contact page ---------- */
  .contact-info, .ct-left { text-align: center; }
  .contact-info-list li { -ms-flex-pack: center; justify-content: center; text-align: left; }
  .cp-contact-card { text-align: center; }
  .ct-contact-card-content { -ms-flex-pack: center; justify-content: center; text-align: left; }

  /* ---------- Breadcrumb headers ---------- */
  .breadcrumb-content { text-align: center; }
  .breadcrumb-content ul { -ms-flex-pack: center; justify-content: center; }

  /* ---------- Footer ---------- */
  .footer-bottom .footer-widget { text-align: center; }
  .footer-bottom .footer-social { -ms-flex-pack: center; justify-content: center; }
  .footer-bottom .newsletter-form { -ms-flex-pack: center; justify-content: center; }
  .footer-bottom .footer-newsletter label { text-align: left; }
  .footer-copyright .copyright-text,
  .footer-copyright .copyright-links { text-align: center; }
  .footer-copyright .copyright-links { margin-top: 10px; }
}

/* ---------- Small phones: tighten headings & stack hero buttons ---------- */
@media (max-width: 575.98px) {
  h1.display-2 { font-size: 2.15rem; line-height: 1.2; }
  .hm2-hero-section h1.display-2 { font-size: 2.15rem; }

  .hm2-hero-section .hm2-hero-content .d-flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
  }
  .hm2-hero-section .hm2-hero-content .d-flex .template-btn { width: 100%; max-width: 320px; text-align: center; }

  /* even spacing for stacked service/pricing/counter cards */
  .cr-tab-counter .cr-tab-counter-single { margin-bottom: 20px; }
}