/* Your own tweaks go here. Loaded after the template's style.css. */

/* Real <h1> in the page banner, styled exactly like the template's h2 */
.sub-header .sub-header-content h1 {
  margin-top: 0;
  font-weight: 300;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: 2px;
}

/* Link colour inside the contact info list */
.right-contact .address a { color: inherit; }
.right-contact .address a:hover { color: #ebcd1e; }

/* City/service pages: keep the content headings and lists tidy in the narrow columns */
.main-services h2 { font-size: 26px; margin-top: 0; }
.main-services h4 { margin-top: 25px; }
.main-services ul { padding-left: 20px; margin-bottom: 15px; }
.sidebar-services h4 { margin: 30px 0 15px; }

/* ------------------------------------------------------------------
   HOME HERO (static and responsive; replaces the Revolution slider)
   To use a photo: add /public/images/hero-bg.jpg and change the
   background line below to:
   background: linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)), url('/images/hero-bg.jpg') center / cover no-repeat;
------------------------------------------------------------------ */
.hero-arc {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px 0 70px;
  text-align: center;
  background: radial-gradient(ellipse at 70% 15%, #2e2e2e 0%, #141414 60%, #0d0d0d 100%);
}
.hero-arc .container { width: 100%; }
.hero-arc h1 {
  margin: 0 0 20px;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 72px;
  line-height: 1.15;
  letter-spacing: 3px;
  overflow-wrap: break-word;
}
.hero-arc .hero-sub {
  margin: 0 auto 35px;
  max-width: 720px;
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: 3px;
}
.hero-arc .hero-buttons .ot-btn { margin: 0 8px 15px; min-width: 190px; }
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  margin: 35px 0 0;
  padding: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
}
.hero-trust li { margin: 0; }
.hero-trust .fa { color: #ebcd1e; margin-right: 6px; }

@media (max-width: 991px) {
  .hero-arc h1 { font-size: 52px; letter-spacing: 2px; }
  .hero-arc .hero-sub { font-size: 20px; letter-spacing: 2px; }
}
@media (max-width: 767px) {
  .hero-arc { min-height: 0; padding: 120px 0 50px; }
  .hero-arc h1 { font-size: 34px; letter-spacing: 1px; }
  .hero-arc .hero-sub { font-size: 16px; letter-spacing: 1px; margin-bottom: 28px; }
  .hero-arc .hero-buttons .ot-btn { display: block; margin: 0 auto 12px; max-width: 280px; }
  .hero-trust { flex-direction: column; align-items: center; gap: 8px; margin-top: 25px; }
}

/* Technologies grid */
.tech-item {
  margin-bottom: 30px;
  padding: 28px 10px 22px;
  text-align: center;
  border: 1px solid #e5e5e5;
  background: #fff;
  transition: border-color .3s, transform .3s;
}
.tech-item:hover { border-color: #ebcd1e; transform: translateY(-3px); }
.tech-item .fa { display: block; margin-bottom: 14px; font-size: 38px; color: #333; }
.tech-item h5 { margin: 0; font-size: 12px; line-height: 1.5; }

/* "Where I work" columns */
.where-col { margin-bottom: 30px; }
.where-col ul li { padding: 3px 0; }

/* Keep long buttons inside their box on phones */
@media (max-width: 480px) {
  .ot-btn { white-space: normal; }
}

/* Equal-height technology tiles */
.tech-item { min-height: 170px; display: flex; flex-direction: column; justify-content: center; }

/* FAQ accordion: use the full column width and centre it */
.faq-wrap .accordion-style-light { padding-left: 0; }
.faq-wrap .accordion-style-light .panel-group { max-width: none; width: 100%; }
.faq-wrap .accordion-content p { font-size: 15px; line-height: 1.8; }

/* Call-to-action banner text on phones */
@media (max-width: 767px) {
  .box-content-overlay-3 { height: auto; padding: 0 15px; }
  .box-content-overlay-3 h2 { font-size: 24px; line-height: 1.4; letter-spacing: 1px; }
}