@import url('https://fonts.googleapis.com/css?family=Roboto%3A100%2C100i%2C300%2C300i%2C400%2C400i%2C500%2C500i%2C700%2C700i%7CMontserrat%3A300%2C400%2C500%2C600%2C700');
                
    :root {
         --primary-font-template: "Roboto";
         --primary-font-style: "sans-serif";
         --secondary-font-template: "Georgia";
         --secondary-font-style: "sans-serif";
         --tertiary-font-template: "$tertiaryFont";
         --tertiary-font-style: "$tertiaryStyle";
         --body-bg-template: #ffffff;
         --body-bg-relative-template: oklch(from var(--body-bg-template) calc(l * .95) c h);
         --body-text-template: #000000;
         --primary-template: #00539b;
         --primary-relative-template: oklch(from var(--primary-template) calc(l * .75) c h);
         --secondary-template: #f5f5f5;
         --secondary-relative-template: oklch(from var(--secondary-template) calc(l * 1.25) c h);
         --accent-template: #98002E;
         --footer-template: #f5f5f5;
         --image-overlay-template: #000;
                           --header-bg-image: url("../_images/_demo/MECC_SteppingStonePattern_BlueRidge_Screen.jpg");
                      }
    
       html .header-section .navbar.sticky .navbar-header .navbar-brand img,
html .header-section .navbar .navbar-header .navbar-brand img {
    padding: 1.5rem 0;
}

/* ── Slider: fill viewport height, cap at original 850px max ── */
.tp-fullwidth-forcer {
  height: calc(100vh - 173px) !important;
  max-height: 850px !important;
}

/* Use .tp-banner (class-based) NOT #revslider-11 — the ID is dynamically
   generated and will be different on every install */
.slider-section .tp-banner {
  height: calc(100vh - 173px) !important;
  max-height: 850px !important;
}

.tp-bgimg,
.slotholder {
  height: calc(100vh - 173px) !important;
  max-height: 850px !important;
}

/* ── Reposition captions proportionally (only when slider is
   shorter than its 850px design height) ── */
@media (max-height: 1022px) {

  /* --- existing position fixes --- */
  .slider-section .tp-caption.medium-text { top: 29.41% !important; }
  .slider-section .tp-caption.large-text  { top: 35.29% !important; }
  .slider-section .tp-caption.small-text  { top: 55.29% !important; }
  .slider-section .tp-caption.link-button { top: 70.59% !important; }

  /* --- font size: scale with viewport height instead of width --- */
  .slider-section .tp-caption.medium-text {
    font-size: 2.8vh !important;   /* was 24px at 850px hero */
    line-height: 1.3 !important;
  }
  .slider-section .tp-caption.large-text {
    font-size: 7vh !important;     /* was 60px at 850px hero */
    line-height: 1.2 !important;
  }
  .slider-section .tp-caption.small-text {
    font-size: 2.1vh !important;   /* was 18px at 850px hero */
    line-height: 1.5 !important;
  }
  .slider-section .tp-caption.link-button .btn {
    font-size: 2.1vh !important;
  }
}