/*------------------------------------------------------------------
  Dark theme overrides (loaded after layout.min.css)
  Accent colour (#17bed2) is unchanged.
------------------------------------------------------------------*/

html {
  background: #111;
}

/* The parallax hero image sits behind the body, so the body must stay transparent. */
body {
  color: #fff;
  background: transparent;
}

p,
em,
li,
li a,
span,
h1, h2, h3, h4, h5, h6,
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
  color: #fff;
}

a {
  color: #fff;
}

a:focus, a:hover, a:active,
h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover {
  color: #17bed2;
}

.color-heading,
.color-subtitle,
.color-link {
  color: #fff !important;
}

.color-link-hover {
  color: #17bed2 !important;
}

.bg-color-sky-light {
  background: #1a1a1a !important;
}

.bg-color-white {
  background: #111 !important;
}

/* Sections / cards */
.service {
  background: #1f1f1f;
}

.service .service-icon {
  color: #fff;
}

.progress {
  background-color: #2b2b2b;
  box-shadow: none;
}

.work .work-popup-overlay {
  background: rgba(0, 0, 0, 0.7);
}

.work .work-popup-content {
  background: #1a1a1a;
}

.work .work-popup-content-divider {
  border-right-color: #333;
}

/* Header */
.header .navbar-toggle .toggle-icon,
.header .navbar-toggle .toggle-icon:before,
.header .navbar-toggle .toggle-icon:after {
  background: #fff;
}

.header .navbar-toggle:hover .toggle-icon,
.header .navbar-toggle:hover .toggle-icon:before,
.header .navbar-toggle:hover .toggle-icon:after {
  background: #17bed2;
}

/* Translucent bar so nav text stays readable over the hero photo. */
.header .navbar {
  background: rgba(17, 17, 17, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.page-on-scroll .header .navbar {
  background: #111;
  border-bottom-color: #2b2b2b;
}

.page-on-scroll .header .nav-item-child {
  color: #fff;
}

.header .nav-item-child:hover,
.header .nav-item-child:focus {
  color: #17bed2;
}

/* Keeps nav links legible over bright areas of the hero photo. */
.header .nav-item-child {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

@media (max-width: 991px) {
  .header {
    background: #111;
  }

  .header .nav-item-child {
    color: #fff;
  }
}

/* Forms */
.form-control {
  color: #fff;
  background: #1f1f1f;
  border: 1px solid #333;
}

.form-control:focus {
  color: #fff;
  background: #262626;
  border-color: #17bed2;
}

.form-control::-moz-placeholder { color: #8a8a8a; }
.form-control:-ms-input-placeholder { color: #8a8a8a; }
.form-control::-webkit-input-placeholder { color: #8a8a8a; }

.form-control:focus::-moz-placeholder { color: #aaa; }
.form-control:focus:-ms-input-placeholder { color: #aaa; }
.form-control:focus::-webkit-input-placeholder { color: #aaa; }

/* Sub-page template */
.page-banner {
  padding: 150px 0 60px;
  background: #1a1a1a;
  border-bottom: 1px solid #2b2b2b;
}

.page-banner h1 {
  margin-bottom: 10px;
}

.page-banner p {
  font-size: 20px;
  margin-bottom: 0;
}

.card-dark {
  background: #1f1f1f;
  border: 1px solid #2b2b2b;
}

.video-card {
  display: block;
  margin-bottom: 30px;
}

.video-card .video-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 56.25%;
  background: #262626 center / cover no-repeat;
}

.video-card .video-thumb:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  color: #fff;
  font-size: 22px;
  line-height: 56px;
  text-align: center;
  background: rgba(23, 190, 210, 0.9);
  border-radius: 50%;
  content: "\25B6";
  padding-left: 4px;
}

.video-card .video-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-card .video-info {
  padding: 20px;
}

.video-card .video-info h3 {
  margin-bottom: 5px;
}

.video-card:hover .video-info h3 {
  color: #17bed2;
}

.page-button {
  padding: 12px 30px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}

.contact-form .form-group {
  margin-bottom: 20px;
}

.contact-form label {
  color: #fff;
  font-family: Hind, sans-serif;
  font-weight: 600;
}

.contact-form textarea.form-control {
  height: auto;
  padding-top: 12px;
}

.contact-form .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  display: none;
  padding: 15px 20px;
  margin-bottom: 25px;
  border-left: 4px solid #17bed2;
  background: #1f1f1f;
}

.form-status.is-visible {
  display: block;
}

.form-status.is-error {
  border-left-color: #e5484d;
}