/* Smart Tech Property Solutions — brand overrides on top of Bootstrap 5 */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Coda&family=Rajdhani:wght@400;500;600;700&family=Rubik:wght@400;500&display=swap');

/* ── Brand tokens ── */
:root {
  --gold:      #F5BF23;
  --blue:        #1d91acff;
  /* --dark-card: #343434; */
  --dark-card: #1a1a1a;
  --body-bg:   #F6F6F6;
  --header-h:  130px; /* fallback; JS sets exact value */
}

/* ── Base ── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Rubik', sans-serif;
  background-color: #F6F6F6;
  color: #4C4C4C;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
}

/* ── Gold CTA button ── */
.btn-blue {
  background-color: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-family: 'Coda', cursive;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
}
.btn-blue:hover {
  background-color: transparent;
  border-color: var(--blue);
  color: var(--blue);
}


/* ── Gold CTA button ── */
.btn-gold {
  background-color: var(--gold);
  border-color: var(--gold);
  color: #333;
  font-family: 'Coda', cursive;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}
.btn-gold:hover {
  background-color: transparent;
  border-color: var(--gold);
  color: var(--gold);
}

/* ── Fixed header ── */
#main-header {
  background: var(--body-bg);
  background: var(--dark-card);
  /* background: #4a4a4a; */
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: box-shadow 0.3s;
}

/* ── Top bar: logo left, CTA bottom-right — flex row ── */
.scroll-hide {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  max-height: 200px;
  opacity: 1;
  padding: 16px 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.scroll-hide.hidden,
#main-header.scroll-css .scroll-hide {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
}
/* Below lg, keep the top bar visible at all times — no compact nav to replace it */
@media (max-width: 991.98px) {
  #main-header.scroll-css .scroll-hide {
    overflow: visible;
    max-height: 200px;
    opacity: 1;
    padding: 16px 0;
    pointer-events: auto;
  }
}
/* Logo takes remaining space, never wider than its natural size */
.logo-center {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  max-height: 150px;
  width: 100%;
}
/* Button always visible, never shrinks, sits at bottom of row */
.top-cta { flex-shrink: 0; }
@media (max-width: 400px) {
  .top-cta { display: none; }
}

/* ── Compact navbar — desktop only, hidden at top, appears on scroll ── */
.compact-nav {
  display: none;
}
@media (min-width: 992px) {
  .compact-nav {
    display: flex;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }
  #main-header.scroll-css .compact-nav {
    max-height: 120px;
    opacity: 1;
  }
}
/* Logo constrained so it never pushes the button off-screen */
.logo-nav { height: 85px; max-width: calc(100% - 140px); width: auto; }

/* ── Space helpers (thin <hr> spacers) ── */
hr.space         { border: none; margin: 0; display: block; }
hr.space.s       { height: 20px; }
hr.space.m       { height: 30px; }
hr.space.l       { height: 60px; }
hr.space-30      { border: none; margin: 0; display: block; height: 30px; }

/* ── Hero ── */
.header-title {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 500px;
  margin-top: var(--header-h);
  background-color: #222;
}

/* Parallax layer — JS injects this div and animates its translateY */
.header-title__parallax {
  position: absolute;
  inset: -60px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: ken-burns 20s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes ken-burns {
  0%   { transform: scale(1)    translateY(0); }
  100% { transform: scale(1.08) translateY(-20px); }
}

/* Dark overlay */
.header-title::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}

.header-title .container { position: relative; z-index: 1; }

.title-base { color: #fff; }
.title-base h1 {
  font-size: 2.6em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.title-base p { opacity: 0.9; }

/* Gold rule above hero heading */
.title-base hr.anima {
  width: 60px;
  height: 3px;
  background: var(--gold);
  border: none;
  margin: 0 0 16px;
  opacity: 1;
}

/* ── Full-width photo break (no text, purely atmospheric) ── */
.section-banner {
  height: 320px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.section-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

/* ── Photo-background section (Who We Work With) ── */
.section-bg-photo {
  background-size: cover;
  background-position: center;
  position: relative;
}
.section-bg-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15,8,28,0.50);
}
.section-bg-photo .container      { position: relative; z-index: 1; }
.section-bg-photo .section-heading { color: #fff; }
.section-bg-photo .who-card {
  background: rgba(255,255,255,0.08);
  border-left-color: var(--gold);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.section-bg-photo .who-card h3 { color: #fff; }
.section-bg-photo .who-card p  { color: rgba(255,255,255,0.85); }

/* ── Service image panels (sit flush beside dark cards) ── */
.service-img {
  min-height: 280px;
  background-size: cover;
  background-position: center;
}

/* ── Section headings ── */
.section-heading {
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #343434;
  margin-bottom: 0;
}
.section-heading::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: var(--gold);
  margin: 10px auto 0;
}

/* ── Content sections ── */
/* Original skin.css: body, .section-empty both use #F6F6F6 — sections blend
   with the page background; visual separation comes from the dark cards. */
.section-empty {
  background: #F6F6F6;
  padding: 80px 0;
}
.section-empty.no-padding-bottom { padding-bottom: 0; }

/* ── White section variant (alternates with grey for rhythm) ── */
.section-empty.section-white { background: #fff; }

/* ── Highlight sections (brand colours, darkened via overlay) ── */
.section-highlight-primary,
.section-highlight-secondary {
  color: #fff;
  position: relative;
}
.section-highlight-primary  { background: #18a4b3; }
.section-highlight-secondary { background: #6A4D8F; }
/*.section-highlight-secondary { background: #18b375; }*/


.section-highlight-primary::before,
.section-highlight-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  pointer-events: none;
}
.section-highlight-primary .container,
.section-highlight-secondary .container       { position: relative; z-index: 1; }
.section-highlight-primary .section-heading,
.section-highlight-secondary .section-heading { color: #fff; }
.section-highlight-primary .section-heading::after,
.section-highlight-secondary .section-heading::after { background: var(--gold); }
.section-highlight-primary h3,
.section-highlight-secondary h3               { color: #fff; }
.section-highlight-primary p,
.section-highlight-secondary p                { color: rgba(255,255,255,0.85); }

/* ── Dark service cards ── */
/* .col-md-4.boxed.white is a flex item of .row — Bootstrap stretches it to
   the full row height automatically. No height:100% needed (it creates a
   circular dependency when the row height is itself auto-calculated). */
.boxed.white {
  background: var(--dark-card);
  color: #fff;
  padding: 36px 30px;
}
.boxed.white p { opacity: 0.85; margin-bottom: 0; }
.text-color    { color: var(--gold) !important; }

/* ── Service card headings (h3 inside dark cards) ── */
.boxed.white h3 { font-size: 1.4em; margin-bottom: 0.5em; }

/* ── Who we work with cards ── */
.who-card {
  border-left: 3px solid var(--gold);
  padding: 20px 20px 20px 24px;
  background: #F6F6F6;
}
.who-card h3 {
  font-size: 1.25em;
  color: #343434;
  margin-bottom: 0.4em;
}
.who-card p { margin-bottom: 0; font-size: 0.95em; }

/* ── How it works — step numbers ── */
.step-number {
  font-family: 'Rajdhani', sans-serif;
  font-size: 3.5em;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.15em;
}

/* ── Image box (service row middle column) ── */
/* height:100% fills the flex-item column so the image sits flush with the
   adjacent cards. The image itself keeps its natural aspect ratio (no crop). */
.img-box          { overflow: hidden; display: flex; align-items: center; height: 100%; }
.img-box img      { width: 100%; height: auto; display: block; transition: transform 0.4s ease; }
.img-box:hover img { transform: scale(1.04); }

/* ── Decorative / intro image (speed.png column) ── */
/* Constrain so a tall illustration never dominates the row height. */
.intro-image { max-height: 280px; width: auto; max-width: 100%; }

/* ── Footer ── */
footer           { background: var(--dark-card); padding-top: 60px; color: #fff; }
footer .logo     { height: 150px; }
footer a         { color: var(--gold); }
footer p, footer li, footer h3 { color: rgba(255,255,255,0.85); }
.copy-row        { border-top: 1px solid rgba(255,255,255,0.15); padding: 16px 0; margin-top: 20px; }
.copy-text       { font-size: 0.8em; color: rgba(255,255,255,0.5); text-align: center; }

/* ── Mobile ── */
@media (max-width: 767.98px) {
  .header-title {
    min-height: 340px;
    background-attachment: scroll !important;
  }
  .header-title__parallax { animation: none; }
}