@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&family=Signika+Negative:wght@300;400;500;600;700&display=swap);
/*
 * theme.css — the only custom stylesheet.
 *
 * The UI is built with Bootstrap 5 (CDN). This file holds just:
 *   1. Light/dark theme variables + the .bg classes that consume them
 *      (the theme reducers set the variables at runtime).
 *   2. A minimal grid/helper shim so existing pages keep their positioning
 *      without rewriting every Materialize class to Bootstrap.
 */

:root {
  --brand: #009a96;
  --brand-dark: #00827f;
  --bs-primary: #009a96;
  --bs-primary-rgb: 0, 154, 150;

  --background-colour: #ffffff;
  --background-font-colour: #1a1b1f;
  --background-heading-colour: #000000;
  --primary-background: #ffffff;
  --primary-font-colour: #4a4a4a;
  --primary-heading-colour: #000000;
  --primary-link-colour: #1a1b1f;
  --secondary-background: #002531;
  --secondary-font-colour: #ffffff;
  --secondary-heading-colour: #ffffff;
  --secondary-link-colour: #ffffff;
  --border-colour: #e9e9e9;
}

/* ---- theme (light/dark) ---- */
body {
  background: var(--background-colour);
  color: var(--background-font-colour);
  font-family: "Signika Negative", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* !important so the themed backgrounds beat Bootstrap's .bg-secondary/.bg-* utilities (which are !important) */
.bg {
  color: var(--primary-font-colour) !important;
  background-color: var(--primary-background) !important;
}
.bg.bg-secondary {
  color: var(--secondary-font-colour) !important;
  background-color: var(--secondary-background) !important;
}
.bg a {
  color: var(--primary-link-colour);
}
.bg.bg-secondary a {
  color: var(--secondary-link-colour);
}
.bg.bg-secondary h1,
.bg.bg-secondary h2,
.bg.bg-secondary h3,
.bg.bg-secondary h4,
.bg.bg-secondary h5,
.bg.bg-secondary h6 {
  color: var(--secondary-heading-colour);
}

/* brand the Bootstrap primary as teal */
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark);
}
.text-primary { color: var(--brand) !important; }
a { text-decoration: none; }
ul { list-style: none; padding-left: 0; }

/* hide the Google Translate injected top banner and keep the page in place */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; }
body { top: 0 !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* homepage hero height (taller on mobile) */
.br-hero { min-height: 60vh; }
@media (max-width: 768px) { .br-hero { min-height: 80vh; } }

/* scroll-reveal (fade in up) */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.show { opacity: 1; transform: none; }

/* ---- minimal grid shim (Materialize col l#/s#/m#) ---- */
.container { width: 92%; max-width: 1200px; margin: 0 auto; }
.row { display: flex; flex-wrap: wrap; margin: 0 -0.75rem 1rem; }
/* when an element is BOTH container + row, keep it centered (row's negative
   side margins would otherwise override the container's auto-centering) */
.container.row { margin-left: auto; margin-right: auto; }
/* inner-page hero banner (Tour container) — uses the theme secondary colour and
   clears the fixed nav so the solid nav sits on the banner, not on white */
.page-hero { padding: 130px 0 60px; text-align: center; }
.page-hero h1 { margin-bottom: 10px; }
.row > .col, .col { padding: 0 0.75rem; box-sizing: border-box; width: 100%; }
.col.s1 { width: 8.3333%; } .col.s2 { width: 16.6666%; } .col.s3 { width: 25%; }
.col.s4 { width: 33.3333%; } .col.s5 { width: 41.6666%; } .col.s6 { width: 50%; }
.col.s7 { width: 58.3333%; } .col.s8 { width: 66.6666%; } .col.s9 { width: 75%; }
.col.s10 { width: 83.3333%; } .col.s11 { width: 91.6666%; } .col.s12 { width: 100%; }
@media (min-width: 601px) {
  .col.m4 { width: 33.3333%; } .col.m6 { width: 50%; } .col.m12 { width: 100%; }
}
@media (min-width: 993px) {
  .col.l1 { width: 8.3333%; } .col.l2 { width: 16.6666%; } .col.l3 { width: 25%; }
  .col.l4 { width: 33.3333%; } .col.l5 { width: 41.6666%; } .col.l6 { width: 50%; }
  .col.l7 { width: 58.3333%; } .col.l8 { width: 66.6666%; } .col.l9 { width: 75%; }
  .col.l10 { width: 83.3333%; } .col.l11 { width: 91.6666%; } .col.l12 { width: 100%; }
  .col.offset-l2 { margin-left: 16.6666%; } .col.offset-l3 { margin-left: 25%; }
}

/* ---- minimal legacy component styling ---- */
.card-panel {
  background: var(--primary-background);
  color: var(--primary-font-colour);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin: 0.5rem 0 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
/* form fields: responsive auto-fit columns that never collapse to tiny boxes */
/* form fields stack one per row by default; col-classed fields keep their width */
form .row > div { flex: 1 1 100%; padding: 0 0.5rem; }
form .row > div.col { flex: 0 0 auto; }
.input-field { position: relative; margin-bottom: 1.25rem; }
.input-field > label { display: block; margin-bottom: 0.35rem; color: #6b6b6b; font-size: 0.85rem; }
.input-field input, .input-field textarea, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="search"], input[type="tel"],
input[type="date"], textarea, select {
  display: block; width: 100%; padding: 0.5rem 0.75rem; font-size: 1rem;
  border: 1px solid var(--border-colour); border-radius: 0.375rem; box-sizing: border-box;
  background: var(--primary-background); color: var(--background-font-colour);
}
.collection { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.collection .collection-item {
  background: var(--primary-background);
  color: var(--primary-font-colour);
  border: 1px solid var(--border-colour);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  position: relative;
  transition: box-shadow 0.15s ease;
}
.collection .collection-item:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
.secondary-content { position: absolute; top: 1rem; right: 1.2rem; }
/* Bootstrap list-group / card / table themed so the admin pages follow light/dark */
.list-group-item {
  background-color: var(--primary-background);
  color: var(--background-font-colour);
  border-color: var(--border-colour);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--hover);
  color: var(--background-font-colour);
}
.card {
  background-color: var(--primary-background);
  color: var(--background-font-colour);
}
.table {
  --bs-table-bg: var(--primary-background);
  --bs-table-color: var(--background-font-colour);
  color: var(--background-font-colour);
  border-color: var(--border-colour);
}
/* admin data tables (TableComponent) — left aligned + striped */
table.data-table { width: 100%; border-collapse: collapse; }
table.data-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 1rem;
}
table.data-table .table-key { width: 35%; white-space: nowrap; }
table.data-table.striped tbody tr:nth-child(odd) { background-color: var(--hover); }
/* Bootstrap accordion (FAQ pages) themed for light/dark */
.accordion {
  --bs-accordion-bg: var(--primary-background);
  --bs-accordion-color: var(--background-font-colour);
  --bs-accordion-border-color: var(--border-colour);
  --bs-accordion-btn-color: var(--background-font-colour);
  --bs-accordion-btn-bg: var(--primary-background);
  --bs-accordion-active-bg: var(--hover);
  --bs-accordion-active-color: var(--background-font-colour);
  --bs-accordion-btn-focus-box-shadow: none;
  /* grey chevron — readable on both light and dark backgrounds */
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23888888%27%3e%3cpath fill-rule=%27evenodd%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23888888%27%3e%3cpath fill-rule=%27evenodd%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e");
}
.btn, .btn-large, .btn-small {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  background: var(--brand); color: #fff; border: none; border-radius: 0.375rem;
  padding: 0.5rem 1.25rem; cursor: pointer; text-decoration: none;
}
/* no hover effect on buttons */
.btn:hover, .btn-large:hover, .btn:focus, .btn-large:focus { color: #fff; background: var(--brand); border-color: var(--brand); filter: none; }
.btn-full { width: 100%; }
/* admin header title ("CONTROL PANEL"): no colour change on hover (match base) */
.bg .navbar-brand:hover, .bg .navbar-brand:focus { color: var(--primary-link-colour); }
/* larger textareas (consistent with the send-email body box) */
.auto-grow-textarea { min-height: 250px; }
/* floating "create" action button on admin list pages (Materialize FAB shim) */
.fixed-action-btn { position: fixed; right: 24px; bottom: 24px; z-index: 1030; margin: 0; }
.btn-floating {
  padding: 0; border-radius: 50%; width: 47px; height: 47px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.btn-floating.btn-large { width: 56px; height: 56px; font-size: 1.4rem; }
.navbar-toggler { border: none; box-shadow: none; color: inherit; }
/* expanded burger menu — slightly different shade from the nav bar */
.navbar .navbar-collapse {
  background: rgba(128, 128, 128, 0.12);
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
}
.preloader-wrapper { display: inline-block; width: 40px; height: 40px; position: relative; }
.preloader-wrapper.active::after {
  content: ""; position: absolute; inset: 0; border: 4px solid #e3e3e3;
  border-top-color: var(--brand); border-radius: 50%; animation: app-spin 0.8s linear infinite;
}
.preloader-wrapper .spinner-layer { display: none; }
@keyframes app-spin { to { transform: rotate(360deg); } }
.progress { position: relative; height: 4px; background: #b2dfdb; border-radius: 2px; overflow: hidden; margin: 0.5rem 0; }
.progress .indeterminate { position: absolute; height: 100%; background: var(--brand); animation: app-indet 1.6s ease-in-out infinite; }
@keyframes app-indet { 0% { left: -35%; width: 35%; } 100% { left: 100%; width: 35%; } }

/* ---- helpers still used in markup ---- */
.center, .center-align { text-align: center; }
.left { float: left; } .right { float: right; }
.responsive-img { max-width: 100%; height: auto; }
.valign-wrapper { display: flex; align-items: center; }
.white-text { color: #fff !important; }
.grey-text { color: #9e9e9e !important; }
.section { padding: 1rem 0; }
.divider { height: 1px; background: var(--border-colour); margin: 0.75rem 0; }
.app-py-1 { padding: 1rem 0 !important; }
.app-py-2 { padding: 2rem 0 !important; }
.app-py-3 { padding: 3rem 0 !important; }
.app-px-1 { padding-left: 1rem !important; padding-right: 1rem !important; }
.no-padding { padding: 0 !important; }
@media (max-width: 600px) { .hide-on-small-only { display: none !important; } .mobile-center { text-align: center; } }
@media (max-width: 992px) { .hide-on-med-and-down { display: none !important; } }

/* gr.css — GR home design. Self-contained (no external template CSS).
 * Section backgrounds (teal #01646D / white) come from the GR theme reducer via
 * the .bg / .bg.bg-secondary classes in theme.css. This file adds the GR
 * component styling (nav, hero carousel, service cards, stats, etc.). */

body {
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", sans-serif;
}

h1 { font-size: 60px; }
h2 {
  font-size: 35px;
  line-height: 50px;
  position: relative;
  padding: 10px 0 20px 0;
}
h3 { font-size: 50px; }
h4 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 15px;
}
p { margin-bottom: 10px; }

/* centered section title with the orange underline */
h2.center:after {
  content: "";
  width: 70px;
  height: 3px;
  background-color: #f8a555;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
}
/* left-aligned section title (Experience) — underline on the left */
h2:not(.center):after {
  content: "";
  width: 70px;
  height: 3px;
  background-color: #f8a555;
  position: absolute;
  left: 0;
  bottom: 0;
}

/* accent helpers */
.btn-color { color: #01646d; }
.bg.bg-secondary .btn-color { color: rgba(255, 255, 255, 0.7); }
.alt-color { color: #1f6fc4; font-weight: 600; }

/* ===================== NAV ===================== */
.navbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
.navbar-fixed nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  min-height: 64px;
  box-shadow: none;
  transition: background-color 0.3s ease;
}
.navbar-fixed nav.transparent { background-color: transparent; }
.navbar-fixed nav ul {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.navbar-fixed nav ul.left { gap: 1rem; }
.navbar-fixed nav ul li { display: flex; align-items: center; }
.navbar-fixed nav ul li a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
.navbar-fixed nav ul li a:hover { opacity: 0.8; }
/* mobile dropdown menu (replaces the old Materialize sidenav), toggled by the
   burger via Bootstrap collapse */
.gr-nav-menu { background-color: #01646d; }
.gr-nav-menu .gr-nav-menu-inner { padding: 0.5rem 1.5rem 1rem; }
.gr-nav-menu a {
  display: block;
  color: #fff;
  padding: 0.6rem 0;
  text-decoration: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 992px) {
  .hide-on-med-and-down { display: none !important; }
  .navbar-fixed nav { padding: 0 1rem; }
}

/* inner-page hero banner (Contact / FAQ / dynamic pages) — teal, clears the
   fixed nav so the transparent-at-top changing nav sits on the teal banner */
.gr-page-hero {
  padding: 130px 0 60px;
  text-align: center;
}
.gr-page-hero h1 { color: #fff; font-size: 42px; margin-bottom: 10px; }
.gr-page-hero p { color: rgba(255, 255, 255, 0.85); }

/* ===================== HERO ===================== */
.gr-slider-overlay {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.85;
  position: absolute;
  z-index: 1;
  background-color: #0c4d52;
}
.gr-slider-1,
.gr-slider-2,
.gr-slider-3 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gr-slider-1 { background-image: url(/assets/images/site/GRSlider1.jpg); }
.gr-slider-2 { background-image: url(/assets/images/site/GRSlider2.jpg); }
.gr-slider-3 { background-image: url(/assets/images/site/GRSlider3.jpg); }

.gr-hero {
  position: relative;
  min-height: 620px;
  padding: 170px 0 110px;
}
.gr-hero .row { position: relative; z-index: 2; width: 100%; }
.gr-hero h1 {
  color: #fff;
  font-size: 56px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0;
}
.gr-hero p { color: #fff; font-size: 17px; }
.gr-hero .btn,
.gr-hero .btn-secondary {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  padding: 0.6rem 2.2rem;
  border-radius: 4px;
  letter-spacing: 1px;
}
.gr-hero .btn:hover { background: #fff; color: #01646d; filter: none; }
.carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; }

/* ===================== SERVICE CARDS ===================== */
/* self-contained 3-up services grid (no Materialize grid dependency) */
.gr-services-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.gr-services-grid > div {
  width: 33.333%;
  padding: 0 15px 30px;
  box-sizing: border-box;
}
@media (max-width: 992px) {
  .gr-services-grid > div { width: 50%; }
}
@media (max-width: 600px) {
  .gr-services-grid > div { width: 100%; }
}

.card {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
  margin-bottom: 0;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14); }
.card .card-image img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}
.card .card-content { padding: 24px 24px 28px; }
.card .card-content h3 {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 6px;
}
.card .card-content h4 { color: #111; font-weight: 600; margin-bottom: 12px; }
.card .card-content p { color: #777; margin: 0; }

/* ===================== EXPERIENCE ===================== */
.responsive-img { max-width: 100%; height: auto; display: block; }

/* ===================== STATS ===================== */
/* keep the number (and its inline + / .6) at h3 size; only the label is small */
.gr-stats h3 { color: #fff; font-weight: 700; margin: 0; }
.gr-stats h3 span { font-size: inherit; }
.gr-stats .btn-color { font-size: 16px; }

/* ===================== STRATEGY / VISION / MISSION ===================== */
.gr-pillars img { height: 70px; width: auto; margin: 0 auto 14px; }
.gr-pillars .alt-color { display: block; font-size: 20px; margin-bottom: 10px; }

/* ===================== CLIENTS ===================== */
.gr-clients img {
  max-height: 42px;
  width: auto;
  margin: 0 auto;
  filter: grayscale(1);
  opacity: 0.7;
}

/* ===================== TRACK ===================== */
.gr-track-form {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.gr-track-form input {
  flex: 1;
  border: none;
  border-bottom: 1px solid #c9c9c9;
  background: transparent;
  padding: 14px 4px;
  font-size: 16px;
  outline: none;
}
.gr-track-form input:focus { border-bottom-color: #01646d; }
.gr-track-form .btn { height: 46px; padding: 0 1.6rem; }

@media (max-width: 768px) {
  h1 { font-size: 40px; }
  .gr-hero h1 { font-size: 38px; }
  .gr-hero { min-height: 520px; padding: 140px 0 80px; }
}