/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

:root {
  --blue: #00aeef;
  --lime: #00cc33;
  --dark-gray: #3a3a3c;
  --light-gray: #d1d2d4;
  --bg: #0b1018;
  --panel: #111927;
  --panel-2: #172233;
  --ink: #e9f1f7;
  --muted: #9cb0c2;
  --line: rgba(255, 255, 255, 0.1);
  --brand: #0ea5e9;
  --brand-2: #38bdf8;
  --brand-soft: rgba(14, 165, 233, 0.18);
  --dark: #2f3137;
  --white: #ffffff;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --radius-xl: 28px;
  --radius-lg: 18px;
  --max: 1220px;
  --q-bg: #06080b;
  --q-bg-2: #0b1118;
  --q-panel: rgba(255, 255, 255, 0.06);
  --q-panel-2: rgba(255, 255, 255, 0.08);
  --q-line: rgba(255, 255, 255, 0.14);
  --q-text: #f5f7fb;
  --q-muted: rgba(245, 247, 251, 0.78);
  --q-blue: #11a8ef;
  --q-blue-dark: #0c4f76;
  --q-green: #1dd146;
  --q-green-dark: #0f962f;
  --q-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --q-radius: 18px;
  --q-max: 1200px;
}

html,
button,
input,
select,
textarea {
  color: #222;
}

h5 {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
}
h6 {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
}

html {
  font-size: 1em;
  line-height: 1.4;
}

::-moz-selection {
  /*background: #b3d4fc;*/
  text-shadow: none;
}

::selection {
  background: #333;
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
img,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}

textarea {
  resize: vertical;
}

.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

body {
  font-size: 12px/26px;
  font-family: "Nunito", sans-serif;
  background-color: #333;
  background: -webkit-linear-gradient(
    left,
    #000,
    #333,
    #000
  ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(
    left,
    #000,
    #333,
    #000
  ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(
    left,
    #000,
    #333,
    #000
  ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #000, #333, #000); /* Standard syntax */
  margin-top: 71px;
  color: var(--text);
  line-height: 1.45;
}

.wrapper {
  width: 96%;
  margin: 2% auto 0;
}

.containerRow {
  float: left;
  clear: both;
  width: 100%;
  text-align: center;
  z-index: 0;
  padding: 0;
}

section {
  border-bottom: 1px solid #999;
  text-align: center;
  padding: 20px 0 0;
  width: 100%;
}

.body-copy {
  background-color: #ccc;
  background: -webkit-linear-gradient(
    left,
    #fff,
    #ccc,
    #fff
  ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(
    left,
    #fff,
    #ccc,
    #fff
  ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(
    left,
    #fff,
    #ccc,
    #fff
  ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #fff, #ccc, #fff); /* Standard syntax */
}

/* h1 {
  margin: 0 10%;
  margin-bottom: 0.5em;
  font-family: "Nunito", sans-serif;
  padding: 25px 5px 0;
} */

p {
  width: 85%;
  font-size: 0.8em;
  margin: 0 auto;
  padding: 0 0 20px 0;
  color: #000;
}

.desktop_breakpoint {
  display: none;
}

.slanted-bottom {
  padding: 50px 0;
  clip-path: polygon(
    100% 100%,
    100% 100%,
    0% 100%,
    0 80%
  ); /* Creates a diagonal bottom edge */
  background-color: #fff; /* Color of the slanted area */
}

.hero-section {
  /* Use linear-gradient for better text readability and a responsive background image */
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.3),
      rgb(0, 174, 239, 1)
    ),
    url("../img/hero-bg-temp.jpg");
  /* background-image: url("../img/hero-bg-temp.jpg"); */
  height: 80vh; /* Desired height */
  width: 100%; /* Full width */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* Ensures the image covers the entire area and is responsive */
  position: relative; /* Required to position the text absolute to the container */
  display: flex; /* Use flexbox to center content */
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  margin: 60px 0 0 0px;

  /* box-shadow: inset #000 60px -60px 100px; */
}
.hero-text-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  animation: fadeIn 4s ease-out;
  margin: 40vh 20px -80px 20px;
}

#hero .title {
  font-size: clamp(16px, 14vw, 52px);
  font-family: "Archivo Black", sans-serif;
  font-weight: 700;
  margin: 0 0 -20px 0;
  text-shadow: 4px 4px 4px #333;
}
#hero .sub {
  font-size: clamp(16px, 6.3vw, 32px);
  font-family: "Archivo Black", sans-serif;
  font-weight: 700;
  margin: 0 0 20px 0;
  text-shadow: 4px 4px 4px #333;
}
#hero .normal {
  font-size: 16px;
  font-family: "Archivo Black", sans-serif;
}

.hero-text p {
  font-size: 1em;
  text-align: left;
  margin-bottom: 0.5em;
  /* Animation properties */
  animation: fadeIn 4s ease-out;
}

#hero .btn {
  display: inline-block;
  padding: 10px 10px;
  background: linear-gradient(135deg, var(--brand-2), Lime);
  box-shadow: 0px 0px 20px var(--dark-gray);
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  /* Animation properties */
  animation: slideUp 1.5s ease-out;
  margin: 20px auto 0px;
  font-size: 1.2em;
  font-style: italic;
  font-family: "Archivo Black", sans-serif;
  width: 90%;
  text-align: center;
}

.btn,
#btnSubmit {
  display: inline-block;
  padding: 10px 10px;
  box-shadow: 0px 0px 20px var(--dark-gray);
  color: #fff;
  font-size: 1em;
  font-style: italic;
  font-family: "Archivo Black", sans-serif;
  text-decoration: none;
  border-radius: 5px;
  /* Animation properties */
  animation: slideUp 1.5s ease-out;
  background: linear-gradient(135deg, var(--brand-2), Lime);
  width: 90%;
}

#btnSubmit {
  display: block;
  padding: 10px 10px;
  box-shadow: 0px 0px 20px var(--dark-gray);
  color: #fff;
  font-size: 1em;
  font-style: italic;
  font-family: "Archivo Black", sans-serif;
  text-decoration: none;
  border-radius: 5px;
  /* Animation properties */
  animation: slideUp 1.5s ease-out;
  background: linear-gradient(135deg, var(--brand-2), Lime);
  width: 80%;
  margin: 0 auto;
}

/* ====== BOTTOM CTA ====== */
.second-cta {
  margin: 20px 0 0 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.65)),
    radial-gradient(
      900px 240px at 50% 30%,
      rgba(255, 255, 255, 0.12),
      transparent 60%
    ),
    #141416;
  padding: 26px 10px 30px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.second-cta h3 {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 22px;
  font-weight: 1000;
}
.second-cta p {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
}

/* Keyframe animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.container {
  margin: 0 auto;
}

.hero-container {
  position: relative;
  width: 100%;
  height: 70vh; /* Set height to 70% of the viewport height */
  overflow: hidden;
}

/* ------------------------------------------
  NAVIGATION STYLES - HEADER
--------------------------------------------- */

.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 99999;
}

header {
  position: fixed;
  display: flex;
  flex-direction: row;
  height: 66px;
  z-index: 100;
  width: 100%;
  left: 0;
  top: 0;
  background: #fff;
  box-shadow: #000 0px 2px 15px;
}

#logo-box {
  width: 80%;
}

#logo-box img {
  width: 100%;
  padding: 5px;
  max-width: 400px;
}

#nav-box {
  width: 20%;
}

nav {
  display: none;
}

#hamburger {
  display: block;
  margin: 0 auto;
  position: relative;
  align-content: center;
}

#slider_home,
#slider_education,
#slider_healthcare,
#slider_landmark,
#slider_office,
#slider_interior,
#slider_other {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  background: url("../img/hero_office_cliffside_600_1.jpg") no-repeat center
    center;
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 50%; /* (img-height / img-width * container-width) */
}

#slider_education,
#slider_healthcare,
#slider_landmark,
#slider_office,
#slider_interior,
#slider_other {
  border-top: 3px solid #ff9900;
  border-bottom: 3px solid #ff9900;
}

#projectTitle {
  color: #ccc;
  font-size: 0.7em;
}

/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */

.nav-toggle {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  text-indent: -300px;
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 55px;
  float: right;
}

.nav-toggle:before {
  color: var(--dark-gray); /* Edit this to change the icon color */
  font: normal 38px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
  text-transform: none;
  text-align: center;
  float: right;
  content: "\2261"; /* Hamburger icon */
  text-indent: 0;
  margin: 7px 10% 0 0;
  width: 100%;
  left: 0;
  top: 0;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

.nav-toggle.active:before {
  color: var(--dark-gray); /* Edit this to change the icon color */
  font: normal 38px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
  text-transform: none;
  text-align: center;
  float: right;
  text-indent: 0;
  margin: 7px 10% 0 0;
  width: 100%;
  left: 0;
  top: 0;
  font-weight: bold;
  content: "\78"; /* Close icon */
  font-family: "Nunito", sans-serif;
}

.nav-collapse ul {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 140px 0 0 0;
  display: block;
  list-style: none;
  overflow-y: scroll;
  opacity: 1;
  filter: alpha(opacity=100); /*For IE8 and earlier */
  z-index: -1;
}

.nav-collapse li {
  width: 100%;
  display: block;
  padding: 2%;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 100%;
}
.disable-pointer-events {
  pointer-events: none !important;
}
.nav-toggle {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.nav-collapse li {
  float: left;
  width: 100%;
}

.nav-collapse,
.nav-collapse * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
  margin: -60px 0 0 0;
}

.nav-collapse a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-decoration: none;
  text-align: center;
  padding: 0.5em;
  color: #90c5e8;
  font-family: "SPACE";
  font-size: 1em;
  font-weight: 900;
  width: 100%;
  float: left;
}

.nav-collapse a:hover {
  color: #fff;
}

.nav-collapse ul ul a {
  background: #ca3716;
  padding-left: 2em;
  color: #fff200;
}

.nav-collapse ul li.nav-link a {
  margin: 0;
  text-transform: uppercase;
  font-family: "Nunito", sans-serif;
  letter-spacing: 0.1em;
  font-size: 16px;
  font-weight: 1000;
  color: #fff;
  text-align: left;
  border-left: var(--blue) 4px solid;
  width: 60%;
}
.nav-collapse ul li.nav-link a:hover {
  margin: 0;
  text-transform: uppercase;
  font-family: "Nunito", sans-serif;
  letter-spacing: 0.1em;
  font-size: 16px;
  font-weight: 1000;
  color: var(--blue);
  text-align: left;
  border-left: #fff 4px solid;
  width: 60%;
}

#social-bar {
  display: flex;
  flex-direction: row;
  background: Lime;
}
.mask {
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  transition: opacity 300ms;
  /*background: rgba(0,0,0, 0.5);*/
  visibility: hidden;
  position: fixed;
  opacity: 0;
  z-index: 2;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.android .mask {
  -webkit-transition: none;
  transition: none;
}

.js-nav-active .mask {
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  transition: opacity 300ms;
  visibility: visible;
  opacity: 1;

  /* fallback color */
  background-color: #000;

  /* gradient overlay + image */
  background-image:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.85) 25%,
      rgba(0, 0, 0, 0.65) 40%,
      rgba(0, 0, 0, 0.35) 65%,
      rgba(0, 0, 0, 0.15) 100%
    ),
    url("/img/m4a-eye-blue-helmet.png");

  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  /* optional: keeps crop centered on wide layouts */
  background-attachment: scroll;
}

#mobile-menu-social {
  display: flex;
  flex-direction: row;
}

.innerRow-fullWidthTag {
  position: relative;
  width: 100%;
  clear: both;
  border-top: 1px solid #0f51a0;
  border-bottom: 1px solid #0f51a0;
  margin: -1% auto;
  background: #333;
  background: -webkit-linear-gradient(
    left,
    #000,
    #666,
    #000
  ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(
    left,
    #000,
    #666,
    #000
  ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(
    left,
    #000,
    #666,
    #000
  ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #000, #666, #000); /* Standard syntax */
}

.innerRow-fullWidth {
  position: relative;
  width: 94%;
  clear: both;
  border: 1px solid #0f51a0;
  margin: 3% auto 0;
  background: #333;
  background: -webkit-linear-gradient(
    left,
    #000,
    #666,
    #000
  ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(
    left,
    #000,
    #666,
    #000
  ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(
    left,
    #000,
    #666,
    #000
  ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #000, #666, #000); /* Standard syntax */
}

.innerRowStackTwo {
  position: relative;
  display: block;
  overflow: hidden;
  clear: both;
  width: 100%;
}

.innerRowStackTwo .halfLeft,
.innerRowStackTwo .halfRight {
  float: relative;
  width: 94%;
  display: block;
  clear: both;
  border: 1px solid #0f51a0;
  margin: 3% auto;
}

.innerRowStackTwo .halfLeft,
.innerRowStackTwo .halfRight {
  background: #333;
  background: -webkit-linear-gradient(
    left,
    #000,
    #666,
    #000
  ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(
    left,
    #000,
    #666,
    #000
  ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(
    left,
    #000,
    #666,
    #000
  ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #000, #666, #000); /* Standard syntax */
}

.innerRowStackTwo .half img {
  display: block;
  width: 100%;
}

.innerRowStackTwo .half a.cta {
  position: absolute;
  display: block;
  width: 30%;
  padding: 10px 10px;
  margin: -20% 35%;
  background: #fff;
  color: #000;
  font-family: "Nunito", sans-serif;
  line-height: 1.9;
  font-size: 1em;
  text-decoration: none;
}

.innerRowStackTwo .halfTitle,
.innerRow-fullWidth .halfTitle {
  margin: 20px auto 0;
  font-family: "SPACE";
  font-size: 1.4em;
  color: #fff;
  text-transform: uppercase;
}

.innerRowStackTwo .halfIcon,
.innerRow-fullWidth .halfIcon {
  margin: 0 auto 25px;
  font-family: "SPACE";
  font-size: 1.6em;
  color: #fff;
}

.innerRowStackTwo .halfBody,
.innerRow-fullWidth .halfBody {
  font-family: "Nunito", sans-serif;
  line-height: 1.9;
  font-weight: 100;
  font-size: 0.9em;
  text-align: left;
  color: #fff;
}

ul.halfBodyList {
  font-family: "Nunito", sans-serif;
  line-height: 1.9;
  font-weight: 100;
  font-size: 0.9em;
  text-align: left;
  color: #fff;
  list-style-image: url(../img/bullet.png);
  padding: 0 30px 0 45px;
  margin-left: 55px;
}

ul.halfBodyList li {
  padding: 0 0 0 20px;
}

.halfBody a {
  color: #90c5e8;
}

#map {
  width: 90%;
  border: 3px solid #0f51a0;
  margin: 0 auto;
  height: 400px;
}

.innerRow-fullWidth a.cta {
  position: relative;
  display: block;
  width: 30%;
  padding: 10px 10px;
  margin: 0 auto 50px;
  background: #fff;
  color: #000;
  font-family: "Nunito", sans-serif;
  font-size: 1em;
  text-decoration: none;
}

.innerRowStackTwo,
.innerRow-stackFour {
  float: left;
  clear: both;
  position: relative;
  width: 100%;
}

.innerRow-stackFour .qtr {
  float: left;
  width: 100%;
  position: relative;
  display: block;
  padding-bottom: 30px;
}

.innerRow-trips {
  position: relative;
  float: left;
  clear: both;
  width: 100%;
}

.innerRow-trips .trip {
  float: left;
  width: 100%;
}

#categories {
  position: relative;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}

#categories ul {
  float: left;
  display: block;
  width: 100%;
  text-indent: none;
  margin: 0 auto;
  padding: 0;
}

#categories li {
  position: relative;
  display: inline-block;
  width: 48%;
  list-style: none;
  margin: 2% auto;
  border: 1px solid #0f51a0;
}
#categories a {
  text-decoration: none;
}

#categories li p {
  position: relative;
  width: 100%;
  color: #90c5e8;
  padding: 10px 0;
  text-decoration: none;
  font-family: "SPACE";
  background: #000;
}

#categories li img {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#projectCategories li p {
  position: relative;
  width: 100%;
  color: #90c5e8;
  padding: 10px 0;
  text-decoration: none;
  font-family: "SPACE";
  background: #000;
}

#projectCategories li p.active {
  position: relative;
  width: 100%;
  color: #ff9900;
  padding: 10px 0;
  text-decoration: none;
  font-family: "SPACE";
  background: #000;
}

#projectCategories li img {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#projectCategories li img.indicator-cat-desktop {
  display: block;
  position: absolute;
  margin: 0 auto;
  width: 32px;
  height: 24px;
  bottom: -25px;
  left: 44%;
}

/* Style The Dropdown Button */
#projectSelectorMobileOnly {
  display: block;
}

/* Dropdown Button */
.dropbtn {
  background-color: #ff9900;
  color: white;
  padding: 16px;
  font-size: 1em;
  border: none;
  cursor: pointer;
  width: 100%;
  text-transform: uppercase;
  font-family: "SPACE";
}

/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
  background-color: #ff9900;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #0f51a0;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 100;
  width: 100%;
  text-align: center;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #ff9900;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-family: "SPACE";
  font-size: 1.2em;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
  display: block;
}

#activeCategory {
  width: 100%;
}

#activeCategory p {
  color: #ff9900;
  font-family: "SPACE";
  font-size: 1.2em;
  text-align: center;
  margin-top: 20px;
  text-transform: uppercase;
}

.projectTitle {
  color: #fff;
  font-family: "mono";
  font-size: 1em;
  text-align: center;
  margin-top: 10px;
}

.indicator-cat {
  display: block;
  position: relative;
  margin: 0 auto;
}

.manuLink {
  display: inline-block;
  border: 3px solid #90c5e8;
  margin: 3px;
}

H1.tagline {
  color: #ff9900;
  font-weight: 300;
  font-style: italic;
  font-size: 1.3em;
}

#taglineCTA {
  position: relative;
  display: block;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover; /* Ensures the background image covers the entire area */
  background-position: center; /* Centers the image */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: 0; /* Hidden by default */
  transition: opacity 1s ease-in-out; /* Smooth transition for fading */
}

/* Specific background images */
#slide1 {
  background-image: url("../img/hero_office_cliffside_600_2.jpg"); /* Replace with your image URL */
  opacity: 1; /* Initially visible */
}

#slide2 {
  background-image: url("../img/hero_office_cliffside_600_1.jpg"); /* Replace with your image URL */
}

.hero-text {
  text-align: left;
  /* padding: 0px; */
  /* background-color: rgba(0, 0, 0, 0.6); */
  margin: 340px 0px 0 0;
}

/* Text animation */
.fade-in {
  animation: fadeIn 2s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===============
    ALL: IE Fixes
   =============== */

h4 {
  text-align: center;
  font-size: 0.8em;
  text-decoration: underline;
  font-weight: normal;
  margin: 0;
}

h3.quad {
  margin: 25px auto 0;
  font-size: 0.9em;
  color: #fff;
}

p.staff {
  margin: 25px;
}

.dark-footer-wrap,
.dark-footer-wrap * {
  box-sizing: border-box;
}

.dark-footer-wrap {
  width: 100%;
  margin: 0 auto;
}

.dark-footer-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 32px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.02)
    ),
    linear-gradient(180deg, rgba(17, 25, 39, 0.96), rgba(9, 14, 22, 0.98));
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.dark-footer-shell::before,
.dark-footer-shell::after {
  content: "";
  position: absolute;
  inset: auto;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(10px);
}

.dark-footer-shell::before {
  width: 260px;
  height: 260px;
  top: -90px;
  right: -60px;
  background: radial-gradient(
    circle,
    rgba(14, 165, 233, 0.22),
    transparent 62%
  );
}

.dark-footer-shell::after {
  width: 220px;
  height: 220px;
  bottom: -90px;
  left: -40px;
  background: radial-gradient(
    circle,
    rgba(56, 189, 248, 0.16),
    transparent 62%
  );
}

.dark-footer-top {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 0.9fr 0.9fr;
  gap: 24px;
  padding: 34px;
  position: relative;
  z-index: 1;
}

.dark-footer-brand-card,
.dark-footer-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: 24px;
}

.dark-footer-brand-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

.dark-footer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  width: fit-content;
  color: var(--brand-2);
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.22);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dark-footer-logo-lockup {
  margin: 18px 0 16px;
  line-height: 0.95;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dark-footer-logo-lockup .big {
  display: block;
  font-size: clamp(32px, 5vw, 56px);
  color: var(--brand-2);
  text-shadow: 0 0 24px rgba(56, 189, 248, 0.16);
}

.dark-footer-logo-lockup .small {
  display: block;
  margin-top: 4px;
  font-size: clamp(18px, 2vw, 26px);
  color: #dce8f2;
  letter-spacing: 0.2em;
}

.dark-footer-brand-copy {
  max-width: 34ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.dark-footer-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
  justify-content: center;
}

.dark-footer-btn {
  appearance: none;
  border: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.dark-footer-btn:hover {
  transform: translateY(-2px);
}

.dark-footer-btn-primary {
  color: #03131d;
  background: linear-gradient(135deg, var(--brand-2), #7dd3fc);
  box-shadow: 0 12px 30px rgba(14, 165, 233, 0.26);
}

.dark-footer-btn-secondary {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.dark-footer-card h3 {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--white);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.dark-footer-nav-list,
.dark-footer-meta-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  justify-content: center;
}

.dark-footer-nav-list a,
.dark-footer-meta-link,
.dark-footer-contact-item a {
  color: var(--muted);
  text-decoration: none;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.dark-footer-nav-list a:hover,
.dark-footer-meta-link:hover,
.dark-footer-contact-item a:hover {
  color: var(--brand-2);
}

.dark-footer-contact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--muted);
  line-height: 1.55;
}

.dark-footer-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  background: linear-gradient(
    180deg,
    rgba(14, 165, 233, 0.18),
    rgba(255, 255, 255, 0.04)
  );
  border: 1px solid rgba(56, 189, 248, 0.18);
  color: var(--brand-2);
  font-size: 15px;
  font-weight: 800;
}

.dark-footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.dark-footer-social {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
  margin: auto;
}

.dark-footer-social:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(14, 165, 233, 0.12);
}

.dark-footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 34px 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 14px;
}

.dark-footer-bottom-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.dark-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #c7d6e4;
  font-weight: 600;
}

.dark-footer-accent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-2);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.85);
}

/* ====== SECTION TITLES ====== */
.section-title {
  text-align: center;
  padding: 18px 0 10px;
  position: relative;
}
.section-title h2 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 16px;
  font-weight: 1000;
  color: var(--blue);
}
.section-title .rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.22);
  font-weight: 900;
}
.section-title .rule::before,
.section-title .rule::after {
  content: "";
  height: 1px;
  width: min(240px, 26vw);
  background: rgba(255, 255, 255, 0.16);
  display: block;
}

/*. ======= COPY HEROS ========*/
#copy-hero-1 {
  box-sizing: border-box;
  width: 100%;
  padding: 24px 16px;
}

#copy-hero-1 *,
#copy-hero-1 *::before,
#copy-hero-1 *::after {
  box-sizing: border-box;
  color: #fff;
}

#copy-hero-1-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
}

#copy-hero-1-media {
  width: 100%;
}

#copy-hero-1-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
}

#copy-hero-1-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

#copy-hero-1-eyebrow {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666666;
}

#copy-hero-1-title {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
  color: #111111;
}

#copy-hero-1-text {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
}

#copy-hero-1-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 46px;
  padding: 12px 20px;
  margin-top: 8px;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: opacity 0.2s ease;
}

#copy-hero-1-button:hover {
  opacity: 0.9;
}

@media (min-width: 768px) {
  #copy-hero-1 {
    padding: 40px 24px;
  }

  #copy-hero-1-wrap {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }

  #copy-hero-1-media,
  #copy-hero-1-content {
    flex: 1 1 50%;
  }

  #copy-hero-1-title {
    font-size: 44px;
  }

  #copy-hero-1-text {
    font-size: 17px;
  }
}

@media (min-width: 1024px) {
  #copy-hero-1-wrap {
    gap: 56px;
  }

  #copy-hero-1-title {
    font-size: 52px;
  }
}

/* ====== 3 BUCKETS ====== */
.buckets-wrap {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.02)
  );
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0 0 0 0;
}
.buckets {
  padding: 16px 0 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.bucket {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  padding: 16px 14px;
  text-align: center;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.bucket .icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}
.bucket strong {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 1000;
  font-size: 20px;
  margin-bottom: 6px;
  color: var(--blue);
}
.bucket em {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-style: normal;
  font-weight: 650;
  font-size: 12.5px;
  max-width: 30ch;
  margin: 0 auto;
}

/* ====== RED CTA STRIP ====== */
.cta-strip {
  background:
    radial-gradient(
      1200px 300px at 50% 40%,
      rgba(255, 255, 255, 0.14),
      transparent 65%
    ),
    linear-gradient(180deg, #00aeef, #3a3a3c);
  border-top: 1px solid rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  padding: 18px 0 20px;
}
.cta-strip h3 {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: 1000;
  letter-spacing: 0.08em;
  font-size: 18px;
}
.cta-strip p {
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ====== PROCESS ====== */
.process {
  background: linear-gradient(180deg, #d8d8d8, #bdbdbd);
  color: #101014;
  padding: 18px 0 26px;
}
.process .section-title h2 {
  color: rgba(16, 16, 20, 0.92);
}
.process .section-title .rule {
  color: rgba(0, 0, 0, 0.25);
}
.process .section-title .rule::before,
.process .section-title .rule::after {
  background: rgba(0, 0, 0, 0.18);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-top: 10px;
}
.step {
  background: #eeeeee;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  padding: 16px 14px 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  position: relative;
  min-height: 140px;
  overflow: hidden;
}
.blue {
  color: #00aeef;
}

#section_process h2 {
  color: #00aeef;
}
.step .num {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  /* background: linear-gradient(#00aeef, #666); */
  color: #00aeef;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 1000;
  border: 4px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
  margin: -34px auto 8px;
}
.step strong {
  display: block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  font-weight: 1000;
  margin-top: 6px;
}
.step p {
  text-align: center;
  color: rgba(16, 16, 20, 0.75);
  font-weight: 650;
  font-size: 13px;
}

#contact h3 {
  color: #00aeef;
}

body.q-forms-page {
  margin: 0;
  font-family: Arial, sans-serif;
  background:
    radial-gradient(
      1200px 500px at 50% 0%,
      rgba(17, 168, 239, 0.08),
      transparent 60%
    ),
    linear-gradient(180deg, var(--q-bg), var(--q-bg-2));
  color: var(--q-text);
}

.q-container {
  width: min(var(--q-max), 92vw);
  margin: 0 auto;
}

.q-hero {
  padding: 72px 0 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.q-hero-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  align-items: stretch;
}

.q-hero-left,
.q-hero-right {
  border: 1px solid var(--q-line);
  border-radius: calc(var(--q-radius) + 4px);
  box-shadow: var(--q-shadow);
  overflow: hidden;
}

.q-hero-left {
  background:
    linear-gradient(110deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.22)),
    linear-gradient(180deg, rgba(17, 168, 239, 0.18), rgba(0, 0, 0, 0.12));
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 320px;
}

.q-eyebrow {
  color: var(--q-green);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.q-hero-title {
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.q-accent {
  color: var(--q-blue);
}

.q-hero-copy {
  margin: 0 0 18px;
  color: var(--q-muted);
  max-width: 58ch;
  font-size: 15px;
}

.q-hero-right {
  background:
    radial-gradient(
      700px 320px at 30% 0%,
      rgba(17, 168, 239, 0.16),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.03)
    );
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.q-hero-right-img-only {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.q-hero-subtitle {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.5vw, 34px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.05;
}

.q-forms-grid {
  padding: 28px 0 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.q-form-module {
  border: 1px solid var(--q-line);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.03)
  );
  border-radius: 24px;
  box-shadow: var(--q-shadow);
  overflow: hidden;
}

.q-form-head {
  padding: 18px 18px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}

.q-form-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.q-form-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.q-form-title {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 900;
}

.q-form-subtitle {
  color: var(--q-muted);
  font-size: 13px;
}

.q-step-counter {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.q-progress-wrap {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.q-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--q-green), var(--q-blue));
  transition: width 0.25s ease;
}

.q-form-body {
  padding: 22px 18px 18px;
}

.q-question {
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 18px;
  padding: 18px;
}

.q-question.q-is-active {
  display: block;
}

.q-question-title {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.15;
}

.q-intro {
  margin: 0 0 16px;
  color: var(--q-muted);
  font-size: 14px;
}

.q-field {
  margin-top: 16px;
}

.q-prompt,
.q-matrix-title {
  display: block;
  font-weight: 900;
  margin-bottom: 10px;
  font-size: 16px;
}

.q-options {
  display: grid;
  gap: 10px;
}

.q-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 12px;
}

.q-option input {
  margin-top: 2px;
  accent-color: var(--q-blue);
}

.q-option label {
  flex: 1;
  cursor: pointer;
}

.q-other-input,
.q-input,
.q-textarea,
.q-select {
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  font-size: 14px;
  outline: none;
}

.q-textarea {
  min-height: 100px;
  resize: vertical;
}

.q-nav-buttons {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.q-submit-note {
  margin-top: 12px;
  color: var(--q-muted);
  font-size: 13px;
}

.q-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}

.q-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.q-btn-green {
  background: linear-gradient(180deg, var(--q-green), var(--q-green-dark));
  color: #fff;
  box-shadow: 0 12px 28px rgba(29, 209, 70, 0.22);
}

.q-btn-blue {
  background: linear-gradient(180deg, var(--q-blue), var(--q-blue-dark));
  color: #fff;
  box-shadow: 0 12px 28px rgba(17, 168, 239, 0.22);
}

.q-success {
  display: none;
  text-align: center;
  padding: 30px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 18px;
}

.q-success.q-is-active {
  display: block;
}

.q-success h3 {
  margin: 0 0 10px;
  font-size: 28px;
  text-transform: uppercase;
}

.q-success p {
  margin: 0 0 10px;
  color: var(--q-muted);
}

@media (max-width: 900px) {
  .q-hero-card,
  .q-forms-grid {
    grid-template-columns: 1fr;
  }
}

/* ====== RESPONSIVE BREAKPOINTS ======
       Collapsing menu at 900px (your request)
    */
@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
  .nav-actions {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 44px 0 32px;
  }
  .buckets {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: 1fr;
  }
}

/*

Q U E S TI O N AN A R E

*/

.q-page {
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(
      1200px 500px at 50% 0%,
      rgba(17, 168, 239, 0.08),
      transparent 60%
    ),
    linear-gradient(180deg, var(--q-bg), var(--q-bg-2));
  color: var(--q-text);
}

.q-container {
  width: min(var(--q-max), 92vw);
  margin: 0 auto;
}

.q-hero {
  padding: 72px 0 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.q-hero-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  align-items: stretch;
}

.q-hero-left,
.q-hero-right {
  border: 1px solid var(--q-line);
  border-radius: calc(var(--q-radius) + 4px);
  box-shadow: var(--q-shadow);
  overflow: hidden;
}

.q-hero-left {
  background:
    linear-gradient(110deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.22)),
    linear-gradient(180deg, rgba(17, 168, 239, 0.18), rgba(0, 0, 0, 0.12));
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 320px;
}

.q-eyebrow {
  color: var(--q-green);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.q-hero-title {
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.q-accent {
  color: var(--q-blue);
}

.q-hero-copy {
  margin: 0 0 18px;
  color: var(--q-muted);
  max-width: 58ch;
  font-size: 15px;
}

.q-hero-right {
  background:
    radial-gradient(
      700px 320px at 30% 0%,
      rgba(17, 168, 239, 0.16),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.03)
    );
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.q-hero-subtitle {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.5vw, 34px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.05;
}

.q-btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.q-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
  text-decoration: none;
}

.q-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.q-btn-green {
  background: linear-gradient(180deg, var(--q-green), var(--q-green-dark));
  color: #fff;
  box-shadow: 0 12px 28px rgba(29, 209, 70, 0.22);
}

.q-btn-blue {
  background: linear-gradient(180deg, var(--q-blue), var(--q-blue-dark));
  color: #fff;
  box-shadow: 0 12px 28px rgba(17, 168, 239, 0.22);
}

.q-modules {
  padding: 28px 0 50px;
}

.q-modules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.q-form-unit {
  border: 1px solid var(--q-line);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.03)
  );
  border-radius: 24px;
  box-shadow: var(--q-shadow);
  overflow: hidden;
}

.q-form-head {
  padding: 18px 18px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}

.q-form-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.q-form-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.q-form-title {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 900;
}

.q-form-subtitle {
  color: var(--q-muted);
  font-size: 13px;
}

.q-step-counter {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.q-progress-wrap {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.q-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--q-green), var(--q-blue));
  transition: width 0.25s ease;
}

.q-form-body {
  padding: 22px 18px 18px;
}

.q-question {
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 18px;
  padding: 18px;
}

.q-question.q-is-active {
  display: block;
}

.q-question-title {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.15;
}

.q-intro {
  margin: 0 0 16px;
  color: var(--q-muted);
  font-size: 14px;
}

.q-field {
  margin-top: 16px;
}

.q-prompt,
.q-matrix-title {
  display: block;
  font-weight: 900;
  margin-bottom: 10px;
  font-size: 16px;
}

.q-options {
  display: grid;
  gap: 10px;
}

.q-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 12px;
}

.q-option input {
  margin-top: 2px;
  accent-color: var(--q-blue);
}

.q-option label {
  flex: 1;
  cursor: pointer;
}

.q-other-input,
.q-input,
.q-textarea,
.q-select {
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  font-size: 14px;
  outline: none;
}

.q-textarea {
  min-height: 100px;
  resize: vertical;
}

.q-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.q-matrix {
  display: grid;
  gap: 14px;
}

.q-matrix-row {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.q-matrix-row strong {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
}

.q-matrix-options {
  display: grid;
  gap: 8px;
}

.q-nav-buttons {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.q-helper {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.q-submit-note {
  margin-top: 12px;
  color: var(--q-muted);
  font-size: 13px;
}

.q-success {
  display: none;
  text-align: center;
  padding: 30px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 18px;
}

.q-success.q-is-active {
  display: block;
}

.q-success h3 {
  margin: 0 0 10px;
  font-size: 28px;
  text-transform: uppercase;
}

.q-success p {
  margin: 0 0 10px;
  color: var(--q-muted);
}

.q-scroll-anchor {
  scroll-margin-top: 20px;
}

#contact-form {
  margin-top: 25px;
  border-width: 5px 0;
  border-style: solid;
  border-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.8),
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.8),
      rgba(0, 0, 0, 0.8)
    )
    1;
}
#contact-form .instructions {
  margin: 20px;
  text-align: center;
  color: #fff;
  font-size: 1.1em;
}
#contact-form .instructions span {
  text-align: center;
  color: var(--blue);
  font-size: 1.3em;
}
#ajax-contact {
  position: relative;
  width: 80%;
  max-width: 500px;
  display: block;
  margin: 0 auto;
}

#ajax-contact .field {
  margin: 1em 0;
}

#ajax-contact label {
  color: #fff;
  position: absolute;
  margin: 2px 0 0 7px;
  font-size: 0.5em;
}

#ajax-contact input {
  padding: 5px 0 0 4px;
  border: 2px solid #333;
  position: relative;
  width: 100%;
}

#ajax-contact input::placeholder {
  color: var(--blue);
  opacity: 1; /* Ensures color isn't faded in Firefox */
}

#ajax-contact input::-webkit-input-placeholder,
#ajax-contact textarea::-webkit-input-placeholder {
  color: #333;
  font-weight: bold;
  font-size: 0.9em;
}
#ajax-contact input::-moz-placeholder,
#ajax-contact textarea::-moz-placeholder {
  color: #333;
  font-weight: bold;
  font-size: 0.9em;
}
#ajax-contact input input:-moz-placeholder,
#ajax-contact textarea textarea:-moz-placeholder {
  color: #333;
  font-weight: bold;
  font-size: 0.9em;
}
#ajax-contact input input:-ms-input-placeholder,
#ajax-contact textarea textarea:-ms-input-placeholder {
  color: #333;
  font-weight: bold;
  font-size: 0.9em;
}

#ajax-contact select {
  padding: 4px 25px 0 0px;
  border: 2px solid #333;
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  color: #666;
  font-weight: bold;
  width: 100%;
}
#ajax-contact textarea {
  border: 2px solid #333;
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  color: #666;
  width: 100%;
}

/* #ajax-contact textarea {
  width: 100%;
  height: 200px;
  padding: 0.5em 0.5em;
  font-size: 1.2em;
  border-radius: 3px;
  border: 1px solid #d9d9d9;
} */

#ajax-contact .success {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

#ajax-contact .error {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #b94a48;
  background-color: #f2dede;
  border: 1px solid rgba(185, 74, 72, 0.3);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

@media (max-width: 900px) {
  .q-hero-card,
  .q-modules-grid,
  .q-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ====================================================================
																   Media Queries
													========================================================================== */
@media only screen and (min-width: 550px) {
  .glassImageContainer {
    width: 500px;
    height: 250px;
    overflow: hidden;
    margin: 0 auto;
  }

  .glassImageContainer img {
    position: relative;
    width: 500px;
    margin: 0 0 0 0;
  }

  .glassImageContainer img:hover {
    margin: -250px 0 0 0;
  }

  .frameFrameContainer {
    width: 400px;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
  }

  .frameFrameContainer img {
    position: relative;
    width: 400px;
    margin: 0 0 0 0;
  }

  .frameFrameContainer img:hover {
    margin: -200px 0 0 0;
  }

  .topFrameRow H1 {
    display: block;
    margin: 25px 0 0 0;
    font-size: 1.7em;
  }

  span.specOut {
    display: inline-block;
    color: #666;
  }

  .pipe {
    margin: 0 30px;
    display: inline;
  }
}
@media only screen and (min-width: 900px) {
  body {
    margin-top: 120px;
  }

  .dark-footer-top,
  .dark-footer-bottom {
    padding-left: 18px;
    padding-right: 18px;
  }

  .dark-footer-top {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 18px;
  }

  .dark-footer-brand-card,
  .dark-footer-card {
    padding: 20px;
    border-radius: 22px;
  }

  .dark-footer-bottom {
    flex-direction: column;
    align-items: center;
    padding-top: 18px;
    padding-bottom: 22px;
  }

  .dark-footer-bottom-links {
    gap: 14px;
  }

  header {
    position: fixed;
    display: flex;
    flex-direction: row;
    height: 60px;
    z-index: 100;
    width: 100%;
    left: 0;
    top: 0;
    background: #fff;
    box-shadow: #000 0px 2px 15px;
  }

  #logo-box {
    width: 40%;
  }

  #logo-box img {
    width: 100%;
    padding: 5px;
  }

  #nav-box {
    width: 60%;
    text-align: center;
  }

  nav {
    display: inline-block;
  }

  nav ul {
    display: flex;
    width: 100%;
    flex-direction: row;
    font-family:
      "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
      "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    color: #ca3716;
    font-size: 11px;
    justify-content: space-between;
  }

  #hamburger {
    display: none;
    margin: 0 auto;
    position: relative;
    align-content: center;
  }

  .nav-collapse {
    float: right;
    position: absolute;
    right: 0;
  }

  .nav-collapse ul {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 10px 0 0 0;
    display: block;
    list-style: none;
    overflow-y: scroll;
    opacity: 1;
    filter: alpha(opacity=100); /*For IE8 and earlier */
    background: #333;
    background: -webkit-linear-gradient(left, #000, #333, #000);
    background: -o-linear-gradient(left, #000, #333, #000);
    background: -moz-linear-gradient(left, #000, #333, #000);
    background: linear-gradient(to right, #000, #333, #000);
  }

  .nav-collapse ul li.menu-item {
    width: 18%;
    height: 100%;
    text-align: center;
  }

  /* .nav-collapse ul li a {
    position: relative;
    display: inline-block;
    text-align: center;
    padding: 0px;
    font-size: 1em;
    color: #90c5e8;
    padding-left: 0;
  } */

  .nav-collapse ul {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: none;
    background-color: #fff;
    z-index: 9999;
  }

  .navIndicator {
    position: fixed;
    display: block;
    /* margin: 0 auto; */
    /* margin-top: 20px; */
    /* margin: 0; */
    width: 100%;
    margin: 22px auto 0;
  }

  .navIndicator-Home {
    left: 2px;
  }

  .nav-collapse li img.indicator-main-desktop {
    display: block;
    position: absolute;
    margin: 0 auto;
    width: 32px;
    height: 24px;
    bottom: -25px;
    left: 44%;
    z-index: 200;
  }

  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }

  .mask {
    display: none !important;
    opacity: 0 !important;
  }

  .nav-collapse li {
    /*SPACE BETWEEN MENU ITEMS*/
    padding: 5px;
  }

  .nav-collapse li a {
    display: inline-block;
    font-size: 1em;
    color: #fff;
    z-index: 9999;
  }

  .nav-collapse li a:hover {
    color: Lime;
  }

  .nav-collapse ul ul a {
    display: none;
  }

  .nav-collapse ul li.nav-link a {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 16px;
    font-weight: 1000;
    color: var(--blue);
  }

  .fullyInsert,
  .fullyLogo {
    display: block;
  }

  .innerRow-fullWidth {
    position: relative;
    width: 96%;
    clear: both;
    border: 1px solid #0f51a0;
    margin: 3% auto 0;
    background: #333;
    background: -webkit-linear-gradient(
      left,
      #000,
      #666,
      #000
    ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(
      left,
      #000,
      #666,
      #000
    ); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(
      left,
      #000,
      #666,
      #000
    ); /* For Firefox 3.6 to 15 */
    background: linear-gradient(
      to right,
      #000,
      #666,
      #000
    ); /* Standard syntax */
  }

  .innerRowStackTwo {
    position: relative;
    display: block;
    overflow: hidden;
    clear: both;
    width: 100%;
  }

  .innerRowStackTwo .halfLeft,
  .innerRowStackTwo .halfRight {
    width: 46%;
    display: inline-block;
    border: 1px solid #0f51a0;
  }

  .innerRowStackTwo .halfLeft {
    margin-left: 0px;
    background: #333;
    background: -webkit-linear-gradient(
      left,
      #000,
      #666
    ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(
      left,
      #000,
      #666
    ); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(
      left,
      #000,
      #666
    ); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #000, #666); /* Standard syntax */
  }

  .innerRowStackTwo .halfRight {
    margin-left: 30px;
    background: #333;
    background: -webkit-linear-gradient(
      left,
      #666,
      #000
    ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(
      left,
      #666,
      #000
    ); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(
      left,
      #666,
      #000
    ); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #666, #000); /* Standard syntax */
    vertical-align: top;
  }

  .innerRowStackTwo .halfTitle {
    margin: 20px auto 0;
    font-family: "SPACE";
    font-size: 1.6em;
    color: #fff;
  }

  .innerRowStackTwo .halfIcon {
    margin: 0 auto 25px;
    font-family: "SPACE";
    font-size: 1.6em;
    color: #fff;
  }

  .innerRowStackTwo .halfBody {
    font-family: "Nunito", sans-serif;
    line-height: 1.9;
    font-weight: 100;
    font-size: 0.9em;
    text-align: left;
    color: #fff;
  }

  .innerRow-stackFour .qtr {
    float: left;
    width: 25%;
    position: relative;
    display: block;
  }

  .innerRowStackTwo .half a.cta {
    position: relative;
  }

  .innerRow-trips {
    width: 96%;
    margin: 0 auto;
    padding: 2%;
  }

  .innerRow-trips .trip {
    width: 32%;
    margin: 0 auto;
    padding: 0.5%;
  }

  .manuLink {
    margin: 10px;
  }

  #map {
    width: 80%;
    border: 3px solid #0f51a0;
    margin: 0 auto;
    height: 400px;
  }

  H1.tagline {
    position: absolute;
    left: -70px;
    top: -6px;
    display: inline-block;
    color: #ff9900;
    font-weight: 300;
    font-style: italic;
    font-size: 1.3em;
  }

  #taglineCTA {
    position: relative;
    display: inline-block;
    padding-left: 70%;
  }

  #projectCategories {
    position: relative;
    display: block;
    margin: -20px auto 0;
    overflow: hidden;
    text-align: center;
    padding: 0 0 10px 0;
  }

  #projectCategories li {
    width: 16%;
  }

  #projectCategories li p {
    background: #000;
  }

  .desktop_breakpoint {
    display: block;
  }

  /* Style The Dropdown Button */
  #projectSelectorMobileOnly {
    display: none;
  }

  #categories li {
    width: 32%;
  }

  #categories li p {
    background: #000;
  }

  span.listHalf {
    display: table-cell;
    position: relative;
    /* width: 30%; */
    margin: 0 auto;
  }

  #mission {
    padding: 5% 10%;
    width: 80%;
    font-size: 1.6em;
    font-weight: bolder;
    margin: 3% auto;
    border: none;
    /* text-shadow: 5px 5px 5px#000; */
    /* border-left: 3px solid #90c5e8; */
    /* border-right: 3px solid #90c5e8; */
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    background: #000;
    background: -o-linear-gradient(left, #000, #333, #000);
    background: -moz-linear-gradient(left, #000, #333, #000);
    /* background: linear-gradient(to right, #000, #000, #000); */
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    line-height: 40px;
  }

  #home_instagram {
    background: #fff;
  }

  .topFrameRow H1 {
    display: block;
    margin: 25px 0 0 0;
    font-size: 2em;
  }

  span.label {
    display: inline-block;
    margin: 15px 0 0 0;
    height: 38px;
    vertical-align: center;
  }

  .formContainer {
    margin: 10% 7% 0 0;
  }

  #contact label {
    display: block;
    margin: 15px 0 0 0;
    text-align: left;
    font-size: 0.9em;
  }
  #contact input[type="text"],
  textarea {
    width: 90%;
    color: #000;
    font-family: "Nunito", sans-serif;
    font-size: 1.3em;
  }

  H1.tagline {
    color: #ff9900;
    font-weight: 300;
    font-style: italic;
    font-size: 1.3em;
  }

  #taglineCTA {
    position: relative;
    display: block;
  }

  .socialRow {
    position: relative;
    width: 100%;
    height: 46px;
    margin: 0 auto;
    padding: 0;
    display: inline-block;
  }

  .iconSocial {
    display: inline-block;
    width: 46px;
    height: 46px;
  }

  H1.tagline {
    color: #ff9900;
    font-weight: 300;
    font-style: italic;
    font-size: 1.3em;
    margin-top: -17px;
  }

  #taglineCTA {
    position: relative;
    display: block;
    height: 40px;
  }

  #taglineCTA img {
    margin-top: -11px;
  }

  .socialRow {
    position: relative;
    width: 100%;
    height: 46px;
    margin: 0 auto;
    padding: 0;
    display: inline-block;
  }

  .iconSocial {
    display: inline-block;
    width: 46px;
    height: 46px;
    margin: 5px;
  }

  #copyright {
    display: inline-block;
    color: #666;
    font-family: "Nunito", sans-serif;
    font-weight: 100;
    font-size: 0.7em;
    width: 90%;
    margin: -50px 0 0 70px;
  }

  p.small {
    margin: 0;
    padding: 0;
    text-align: center;
  }

  #address {
    font-family: "SPACE";
    color: #fff;
    font-size: 0.8em;
    text-transform: uppercase;
    float: right;
    text-align: center;
  }

  p.address {
    width: 100%;
    font-size: 0.8em;
    margin: 7px auto 0;
    padding: 0 0 20px 0;
    line-height: 1.4;
  }

  #social_facebook {
    left: 44px;
    width: 44px;
    background: url("../img/icons-social.png") 3px 0;
  }

  #social_facebook:hover {
    left: 44px;
    width: 42px;
    background: url("../img/icons-social.png") 0px 46px;
  }

  #social_linkedin {
    left: 38px;
    width: 39px;
    background: url("../img/icons-social.png") 44px 0;
  }

  #social_linkedin:hover {
    left: 44px;
    width: 39px;
    background: url("../img/icons-social.png") 44px 46px;
  }

  #social_twitter {
    left: 46px;
    width: 40px;
    background: url("../img/icons-social.png") 92px 0px;
  }

  #social_twitter:hover {
    left: 46px;
    width: 40px;
    background: url("../img/icons-social.png") 92px 46px;
  }

  .hero-section {
    /* Use linear-gradient for better text readability and a responsive background image */
    /* background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../img/hero-bg-temp.jpg"); */
    background-image: url("../img/hero-bg-temp.jpg");
    height: 70vh; /* Desired height */
    width: 100%; /* Full width */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* Ensures the image covers the entire area and is responsive */
    position: relative; /* Required to position the text absolute to the container */
    display: flex; /* Use flexbox to center content */
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    margin: -60px 0 0 0px;
  }

  .hero-text h1 {
    font-size: 3em;
    margin-bottom: 0.5em;
    /* Animation properties */
    animation: fadeIn 4s ease-out;
  }

  .hero-text p {
    font-size: 1.5em;
    margin-bottom: 1em;
    /* Animation properties */
    animation: fadeIn 4.5s ease-out;
    color: #fff;
  }

  .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: Lime;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    /* Animation properties */
    animation: slideUp 1.5s ease-out;
  }

  /* Keyframe animations */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 720px) {
  .dark-footer-top,
  .dark-footer-bottom {
    padding-left: 18px;
    padding-right: 18px;
  }

  .dark-footer-top {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 18px;
  }

  .dark-footer-brand-card,
  .dark-footer-card {
    padding: 5px;
    border-radius: 22px;
  }

  .dark-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 18px;
    padding-bottom: 22px;
  }

  .dark-footer-bottom-links {
    gap: 14px;
  }
}

@media only screen and (min-width: 1200px) {
  #slider_home {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    background: url("../img/hero_office_cliffside_600_1.jpg") no-repeat center
      center;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 50%; /* (img-height / img-width * container-width) */
    margin-top: -11%;
  }
  .dark-footer-top {
    grid-template-columns: 2fr 1fr;
  }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

.noBorder {
  border: none;
}

.noBG {
  background: none;
}

@font-face {
  font-family: "responsivenav";
  src: url("responsivenav.eot");
  src:
    url("responsivenav.eot?#iefix") format("embedded-opentype"),
    url("responsivenav.ttf") format("truetype"),
    url("responsivenav.woff") format("woff"),
    url("responsivenav.svg#responsivenav") format("svg");
  font-weight: normal;
  font-style: normal;
}

.bebas {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.archivo {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.bebas-strong {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 800;
  font-style: normal;
}
.archivo-strong {
  font-family: "Archivo Black", sans-serif;
  font-weight: 800;
  font-style: normal;
}

/* GOOGLE FONT USED

font-family: 'Nunito', sans-serif;

*/