/* ==========================================================================
   Bolt IoT Website - Static Clone Stylesheet
   ========================================================================== */

/* Font Faces */
@font-face {
  font-family: "nexa_boldregular";
  font-style: normal;
  font-weight: normal;
  src: url("//cdn2.hubspot.net/hubfs/4801849/Bolt%20October2018%20Theme/Fonts/nexa_bold.woff2") format("woff2"),
    url("//cdn2.hubspot.net/hubfs/4801849/Bolt%20October2018%20Theme/Fonts/nexa_bold.woff") format("woff");
}
@font-face {
  font-family: "open_sansregular";
  font-style: normal;
  font-weight: normal;
  src: url("//cdn2.hubspot.net/hubfs/4801849/Bolt%20October2018%20Theme/Fonts/opensans-regular.woff2") format("woff2"),
    url("//cdn2.hubspot.net/hubfs/4801849/Bolt%20October2018%20Theme/Fonts/opensans-regular.woff") format("woff");
}
@font-face {
  font-family: "robotoregular";
  font-style: normal;
  font-weight: normal;
  src: url("//cdn2.hubspot.net/hubfs/4801849/Bolt%20October2018%20Theme/Fonts/roboto-regular.woff2") format("woff2"),
    url("//cdn2.hubspot.net/hubfs/4801849/Bolt%20October2018%20Theme/Fonts/roboto-regular.woff") format("woff");
}
@font-face {
  font-family: "montserratregular";
  font-style: normal;
  font-weight: normal;
  src: url("//cdn2.hubspot.net/hubfs/4801849/Bolt%20October2018%20Theme/Fonts/montserrat-regular.woff2") format("woff2"),
    url("//cdn2.hubspot.net/hubfs/4801849/Bolt%20October2018%20Theme/Fonts/montserrat-regular.woff") format("woff");
}

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  font-family: 'open_sansregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: bottom;
}
a {
  text-decoration: none;
  color: inherit;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: 'nexa_boldregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
p { margin: 0 0 10px; }
ul { list-style: none; margin: 0; padding: 0; }
button { cursor: pointer; }
.clearfix::after { content: ""; display: block; clear: both; }
.page-center {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ==========================================================================
   2. NAVIGATION
   ========================================================================== */
.topnav {
  background-color: #fff;
  font-family: 'open_sansregular', sans-serif;
  overflow: visible;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.topnav::after {
  content: "";
  display: table;
  clear: both;
}
.topnav a {
  color: #616161;
  display: block;
  float: left;
  font-size: 14px;
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
}
.topnav a.logo img {
  height: 35px;
  width: auto;
}
.loginnav {
  font-family: 'nexa_boldregular', sans-serif;
  text-align: center !important;
  width: 140px;
}
.loginspan {
  border: 2px solid #9bdf46;
  border-radius: 4px;
  color: grey;
  line-height: 2;
  padding: 6px 16px;
}
.loginspan:hover { color: #333; }
.dropdown {
  float: left;
  overflow: hidden;
}
.dropdown .dropbtn {
  background-color: inherit;
  border: none;
  color: #616161;
  font-family: inherit;
  font-size: 14px;
  margin: 0;
  outline: none;
  padding: 18px 16px;
  cursor: pointer;
}
.dropdown-content {
  background-color: #f9f9f9;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  display: none;
  min-width: 160px;
  position: absolute;
  z-index: 1;
}
.dropdown-content a {
  color: #616161;
  display: block;
  float: none;
  padding: 12px 16px;
  text-align: left;
  text-decoration: none;
}
.dropdown:hover .dropbtn,
.topnav a:hover:not(.nohover) {
  background-color: #25a55f;
  color: #fff;
}
.dropdown-content a:hover {
  background-color: #eaefc4;
  color: #000;
}
.dropdown:hover .dropdown-content { display: block; }
.topnav .icon { display: none; }
.close_hamburger {
  text-align: center !important;
  width: 75px !important;
}

/* Mobile nav */
@media screen and (max-width: 600px) {
  .dropdown .dropbtn,
  .topnav a:not(:first-child) { display: none; }
  .topnav a.icon {
    display: block;
    float: right;
    text-decoration: none;
  }
  .topnav.responsive { position: relative; }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    display: block;
    float: none !important;
    text-align: left;
  }
  .topnav.responsive .dropdown { float: none; }
  .topnav.responsive .dropdown-content { position: relative; }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    text-align: left;
    width: 100%;
  }
}

/* ==========================================================================
   3. HERO SECTION
   ========================================================================== */
.hero-section {
  position: relative;
  width: 100%;
  height: calc(100vh - 55px);
  overflow: hidden;
  background: #000;
}
.hero-bg-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
.hero-bg-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-video-bg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: auto;
  min-height: 100%;
  z-index: 1;
}
.hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2;
}
.hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #fff;
  padding: 0 20px;
}
.hero-slider h2 {
  font-family: 'nexa_boldregular', sans-serif;
  font-size: 40px;
  letter-spacing: 1.2px;
  line-height: 68px;
  color: #fff;
  margin: 0;
  text-align: center;
}
.hero-slide { display: none; }
.hero-slide.active { display: block; }
.play-btn {
  display: inline-block;
  cursor: pointer;
  width: 50px;
  height: 50px;
  padding: 10px;
  text-align: center;
  font-size: 16px;
  line-height: 2em;
  border-radius: 27px;
  background-color: rgba(128,128,128,0.6);
  color: #fff !important;
  text-decoration: none;
  margin-bottom: 10px;
}
.play-btn:hover { background-color: rgba(128,128,128,0.8); }
.see-video { color: #fff; display: block; margin-top: 5px; }
.abt-video { color: #fff; display: block; opacity: 0.7; font-size: 14px; }
.buy-now-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 40px;
  background-color: #9bdf46;
  color: #fff;
  font-family: 'nexa_boldregular', sans-serif;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background-color 0.3s;
}
.buy-now-btn:hover { background-color: #7cbf2e; }

/* Scroll indicator */
.scroller {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -15px;
  cursor: pointer;
  z-index: 3;
}
.scroll-icon {
  display: block;
  position: relative;
  height: 3.5em;
  width: 2.3em;
  border: 0.25em solid #fff;
  border-radius: 1em;
}
@keyframes scroll_2 {
  0% { transform: translateY(0); opacity: 1; }
  25% { opacity: 1; }
  75% { transform: translateY(0.75em); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
.scroll-icon__dot {
  display: block;
  position: absolute;
  left: 50%;
  background: #fff;
  height: 0.5em;
  width: 0.5em;
  top: 0.6em;
  margin-left: -0.25em;
  border-radius: 50%;
  animation: scroll_2 2s ease-out infinite;
}

/* Video Modal */
.video-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.video-modal-overlay.active { display: flex; }
.video-modal {
  position: relative;
  width: 80%;
  max-width: 900px;
}
.video-modal video { width: 100%; border-radius: 4px; }
.video-modal-close {
  position: absolute;
  top: -30px; right: 0;
  color: #fff;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

/* ==========================================================================
   4. SECTION COMMON STYLES
   ========================================================================== */
.section {
  padding: 60px 0;
}
.section-dark {
  background: linear-gradient(135deg, #1a3a4a 0%, #0d2633 100%);
  color: #fff;
}
.section-light {
  background: #fff;
}
.section-gray {
  background: #eceef0;
}
.section-header {
  text-align: center;
  padding: 20px 0;
}
.section-header h1 {
  font-family: 'nexa_boldregular', sans-serif;
  font-size: 32px;
  font-weight: 100;
  line-height: 1.6;
  color: inherit;
}
.section-dark .section-header h1 { color: #fff; }
.section-light .section-header h1 { color: #000; }
.section-gray .section-header h1 { color: #333; }
.section-header .secondary-header {
  font-family: 'open_sansregular', sans-serif;
  font-size: 18px;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.8);
  max-width: 800px;
  margin: 10px auto 0;
}

/* ==========================================================================
   5. CUSTOMERS SECTION
   ========================================================================== */
.customers-section {
  background: #fff;
  padding: 40px 0;
}
.customers-section .section-header h1 {
  color: #000;
}
.clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: center;
  justify-items: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 15px;
}
.clients-grid img {
  max-height: 80px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  padding: 10px;
}
@media (max-width: 768px) {
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   6. HOW IT WORKS SECTION
   ========================================================================== */
.how-it-works {
  background: linear-gradient(135deg, #1a3a4a 0%, #0d2633 100%);
  background-size: cover;
  position: relative;
  padding: 60px 0;
  color: #fff;
}
.how-it-works .section-header h1 { color: #fff; }
.how-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.how-step {
  text-align: center;
  flex: 0 0 18%;
  padding: 0 10px;
}
.how-step img {
  max-width: 150px;
  width: 100%;
}
.how-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 5%;
  padding-top: 50px;
}
.how-arrow img { width: 40px; }
.how-arrow-down { display: none; }
.how-labels {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}
.how-label {
  flex: 0 0 24%;
  text-align: center;
  padding: 10px 15px;
}
.how-label .label-title {
  font-family: 'montserratregular', sans-serif;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.25;
  color: #fff;
  display: block;
  padding: 10px 0;
}
.how-label .label-desc {
  opacity: 0.8;
  font-family: 'open_sansregular', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
  display: block;
}
.how-buttons {
  text-align: center;
  margin-top: 30px;
}
.btn-outline-white {
  display: inline-block;
  max-width: 202px;
  font-size: 17px;
  color: #fff;
  padding: 10px 30px;
  border: 2px solid #fff;
  border-radius: 4px;
  background: transparent;
  margin: 5px 15px;
  font-family: 'open_sansregular', sans-serif;
  transition: all 0.3s;
  text-decoration: none;
}
.btn-outline-white:hover {
  background: #fff;
  color: #333;
}
@media (max-width: 768px) {
  .how-step { flex: 0 0 45%; margin-bottom: 20px; }
  .how-arrow { display: none; }
  .how-arrow-down { display: block; }
  .how-label { flex: 0 0 50%; }
}
@media (max-width: 480px) {
  .how-step { flex: 0 0 100%; }
  .how-label { flex: 0 0 100%; }
}

/* ==========================================================================
   7. INDUSTRIES SECTION
   ========================================================================== */
.industries-section {
  background: #fff;
  padding: 60px 0;
}
.industries-section .section-header h1 {
  color: #000;
  font-weight: bold;
}
.industries-section .section-header p {
  color: #333;
  font-weight: bold;
  max-width: 700px;
  margin: 10px auto;
  font-size: 15px;
}
.industries-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 20px;
  align-items: start;
  justify-items: center;
  max-width: 1000px;
  margin: 30px auto 0;
  padding: 0 15px;
}
.industry-item {
  text-align: center;
}
.industry-item img {
  width: 90px;
  height: 90px;
  display: block;
  margin: 0 auto;
}
.industry-item h4 {
  font-family: 'open_sansregular', sans-serif;
  font-size: 13px;
  font-weight: normal;
  margin-top: 10px;
  color: #333;
}
@media (max-width: 768px) {
  .industries-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   8. CLOUD LOGIN SECTION
   ========================================================================== */
.cloud-login-section {
  background-image: url('assets/images/bolt_cloud_bg_image.png');
  background-size: cover;
  background-position: center;
  background-color: #1a1a2e;
  padding: 60px 0;
  color: #fff;
}
.cloud-login-section .section-header h1 { color: #fff; }
.cloud-login-box {
  width: 400px;
  max-width: 100%;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f3f3f3;
  margin: 0 auto;
  padding: 30px 40px 50px;
}
.cloud-login-box input[type="email"],
.cloud-login-box input[type="password"] {
  width: 100%;
  padding: 15px 12px;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  font-size: 16px;
  font-family: Helvetica, Arial, sans-serif;
  margin-bottom: 10px;
}
.cloud-login-box .keep-signed {
  text-align: left;
  margin: 10px 0;
  font-size: 14px;
  color: #333;
}
.cloud-login-box .keep-signed input { margin-right: 5px; }
.signin-btn {
  width: 100%;
  height: 45px;
  background: #9bdf46;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'robotoregular', Roboto, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  margin-top: 15px;
  transition: background 0.3s;
}
.signin-btn:hover { background: #81aa3d; }
.or-divider {
  text-align: center;
  padding: 10px 0;
  font-family: 'montserratregular', Montserrat, sans-serif;
  font-size: 14px;
  color: #333;
}
.google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border: none;
  background: #fff;
  color: #737373;
  border-radius: 5px;
  box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.05);
  padding: 0 16px;
  margin: 0 auto;
  transition: box-shadow 0.15s;
  cursor: pointer;
}
.google-button:hover { box-shadow: 1px 4px 5px 1px rgba(0,0,0,0.1); }
.google-button__icon {
  width: 18px; height: 18px;
  margin-right: 10px;
}
.google-button__text {
  font-size: 14px;
  font-weight: bold;
  font-family: 'robotoregular', Roboto, Arial, sans-serif;
}
.forgot-link {
  text-align: center;
  margin-top: 10px;
}
.forgot-link a {
  color: #999;
  text-decoration: underline;
  font-size: 14px;
  font-family: 'robotoregular', Roboto, sans-serif;
}
.signup-link {
  text-align: center;
  padding-top: 10px;
  color: #ededed;
  font-size: 14px;
}
.signup-link a { color: #fff; text-decoration: underline; }

@media (max-width: 480px) {
  .cloud-login-box { width: 100%; padding: 30px 25px 40px; }
}

/* ==========================================================================
   9. STORE / VIDEO TRAINING SECTION
   ========================================================================== */
.store-section {
  background: #fff;
  padding: 0;
}
.store-grid {
  display: flex;
  flex-wrap: wrap;
}
.store-card-left {
  flex: 0 0 50%;
  background-color: #94C94B;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 30px;
  text-align: center;
}
.store-card-left img { max-width: 400px; margin-bottom: 20px; }
.store-card-right {
  flex: 0 0 50%;
  background-color: #F9F9F9;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 30px;
  text-align: center;
  font-family: 'open_sansregular', sans-serif;
}
.store-card-right .green-title {
  color: #9bdf46;
  font-size: 30px;
  font-weight: bold;
  font-family: 'montserratregular', sans-serif;
  line-height: 1.3;
  margin-bottom: 20px;
}
.store-card-right p {
  font-size: 16px;
  line-height: 1.75;
  color: #333;
  max-width: 400px;
}
.btn-green {
  display: inline-block;
  padding: 12px 35px;
  background: #9bdf46;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-family: 'nexa_boldregular', sans-serif;
  text-transform: uppercase;
  margin-top: 20px;
  transition: background 0.3s;
  text-decoration: none;
}
.btn-green:hover { background: #7cbf2e; }
@media (max-width: 768px) {
  .store-card-left, .store-card-right { flex: 0 0 100%; min-height: auto; }
}

/* ==========================================================================
   10. PARTNER SECTION
   ========================================================================== */
.partner-section {
  background: #fff;
  padding: 20px 0 40px;
}
.partner-section .section-header h1 {
  color: #94c94b !important;
}
.partner-grid {
  display: flex;
  flex-wrap: wrap;
  max-width: 1170px;
  margin: 0 auto;
}
.partner-card {
  flex: 0 0 50%;
  background-color: #f1f1f1;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 30px;
  text-align: center;
}
.partner-card:last-child {
  background-color: rgba(241,241,241,0.7);
}
.partner-card img { max-width: 300px; margin-bottom: 20px; }
.partner-card h3 {
  font-family: 'montserratregular', sans-serif;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}
.partner-card p {
  font-family: 'open_sansregular', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  max-width: 350px;
}
.btn-contact {
  display: inline-block;
  padding: 10px 30px;
  background: #9bdf46;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-family: 'nexa_boldregular', sans-serif;
  text-transform: uppercase;
  margin-top: 20px;
  transition: background 0.3s;
  text-decoration: none;
}
.btn-contact:hover { background: #7cbf2e; }
@media (max-width: 768px) {
  .partner-card { flex: 0 0 100%; min-height: auto; }
}

/* ==========================================================================
   11. FEATURES SECTION
   ========================================================================== */
.features-section {
  background: #eceef0;
  padding: 60px 0;
}
.features-section .section-header h1 {
  color: #333;
}
.features-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 1100px;
  margin: 30px auto 0;
  padding: 0 35px;
}
.features-block .feature-image {
  flex: 0 0 42%;
  text-align: center;
  padding: 0 15px;
}
.features-block .feature-image img {
  max-width: 100%;
  height: auto;
}
.features-block .feature-list {
  flex: 0 0 58%;
  padding: 0 15px;
}
.feature-item {
  display: flex;
  margin-bottom: 25px;
}
.feature-item-icon {
  flex: 0 0 16.66%;
  text-align: center;
  padding: 0 10px;
}
.feature-item-icon img {
  max-width: 60px;
  height: auto;
}
.feature-item-content {
  flex: 1;
  padding: 0 10px;
}
.feature-item-content .top-heading {
  font-family: 'nexa_boldregular', sans-serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.71;
  color: #4d4d4d;
  display: block;
  text-transform: uppercase;
}
.feature-item-content .sub-heading {
  opacity: 0.7;
  font-family: 'open_sansregular', sans-serif;
  font-size: 13px;
  line-height: 2;
  color: rgba(77,77,77,0.7);
  display: block;
}
@media (max-width: 768px) {
  .features-block .feature-image { flex: 0 0 100%; margin-bottom: 30px; }
  .features-block .feature-list { flex: 0 0 100%; }
}

/* ==========================================================================
   12. PROJECTS / BLOG SECTION
   ========================================================================== */
.projects-section {
  background: #fff;
  padding: 60px 0;
}
.projects-section .section-header h1 { color: #94c94b; }

/* Master-Detail Showcase */
.projects-showcase {
  display: flex;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  min-height: 420px;
}
.showcase-left {
  flex: 7;
  position: relative;
  overflow: hidden;
  background: #1a1a2e;
}
.showcase-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s;
}
.showcase-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: #fff;
}
.showcase-overlay h2 {
  font-family: 'nexa_boldregular', sans-serif;
  font-size: 24px;
  margin: 0 0 10px;
  line-height: 1.3;
}
.showcase-overlay p {
  font-family: 'open_sansregular', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
  opacity: 0.9;
}
.showcase-overlay .btn-green {
  display: inline-block;
  padding: 10px 24px;
  font-size: 14px;
}
.showcase-right {
  flex: 3;
  background: #f9f9f9;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.showcase-right h3 {
  font-family: 'nexa_boldregular', sans-serif;
  font-size: 18px;
  color: #333;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #94c94b;
}
#showcase-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.showcase-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid #e8e8e8;
}
.showcase-item:last-child {
  border-bottom: none;
}
.showcase-item:hover {
  background: #eef6e0;
}
.showcase-item.active {
  background: #e4f2d1;
}
.showcase-item-num {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: #ddd;
  color: #555;
  font-family: 'nexa_boldregular', sans-serif;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.showcase-item.active .showcase-item-num {
  background: #94c94b;
  color: #fff;
}
.showcase-item-text {
  flex: 1;
  min-width: 0;
}
.showcase-item-text strong {
  display: block;
  font-family: 'nexa_boldregular', sans-serif;
  font-size: 13px;
  color: #333;
  line-height: 1.3;
  margin-bottom: 3px;
}
.showcase-item-text span {
  display: block;
  font-family: 'open_sansregular', sans-serif;
  font-size: 11px;
  color: #888;
  line-height: 1.4;
}
.showcase-view-all {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-family: 'open_sansregular', sans-serif;
  font-size: 13px;
  color: #25a55f;
  text-decoration: none;
  padding-top: 12px;
  border-top: 1px solid #e0e0e0;
}
.showcase-view-all:hover {
  text-decoration: underline;
}

/* Showcase Responsive */
@media (max-width: 768px) {
  .projects-showcase {
    flex-direction: column;
    min-height: auto;
  }
  .showcase-left {
    min-height: 280px;
  }
  .showcase-right {
    padding: 20px;
  }
  .showcase-overlay h2 {
    font-size: 20px;
  }
}

/* ==========================================================================
   13. CONTACT SECTION
   ========================================================================== */
.contact-section {
  position: relative;
  background-image: url('assets/images/bg-map.jpg');
  background-size: cover;
  background-position: center;
  padding: 80px 0;
  color: #fff;
}
.contact-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(45,80,100,0.85);
}
.contact-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}
.contact-info {
  flex: 0 0 50%;
  padding: 0 15px;
}
.contact-info h3 {
  font-size: 28px;
  margin-bottom: 20px;
  font-family: 'nexa_boldregular', sans-serif;
}
.contact-info p {
  font-family: 'open_sansregular', sans-serif;
  font-size: 15px;
  line-height: 1.8;
  opacity: 0.9;
}
.contact-info .fa { margin-right: 8px; }
.contact-form-wrapper {
  flex: 0 0 50%;
  padding: 0 15px;
}
.contact-form-wrapper h3 {
  font-size: 24px;
  margin-bottom: 20px;
  font-family: 'nexa_boldregular', sans-serif;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 14px;
  font-family: 'open_sansregular', sans-serif;
  margin-bottom: 12px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255,255,255,0.6);
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form .submit-btn {
  padding: 12px 35px;
  background: #9bdf46;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-family: 'nexa_boldregular', sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s;
}
.contact-form .submit-btn:hover { background: #7cbf2e; }

/* HubSpot embedded form overrides for dark contact section */
#hubspot-contact-form .hs-form label {
  color: #fff;
  font-family: 'open_sansregular', sans-serif;
  font-size: 14px;
}
#hubspot-contact-form .hs-form .hs-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 14px;
  font-family: 'open_sansregular', sans-serif;
}
#hubspot-contact-form .hs-form .hs-input::placeholder {
  color: rgba(255,255,255,0.6);
}
#hubspot-contact-form .hs-form .hs-button {
  padding: 12px 35px;
  background: #9bdf46;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-family: 'nexa_boldregular', sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s;
}
#hubspot-contact-form .hs-form .hs-button:hover {
  background: #7cbf2e;
}
#hubspot-contact-form .hs-form .hs-error-msgs label {
  color: #ff6b6b;
}

@media (max-width: 768px) {
  .contact-info, .contact-form-wrapper { flex: 0 0 100%; margin-bottom: 30px; }
}

/* ==========================================================================
   14a. SUBSCRIBE SECTION (Blog & Projects)
   ========================================================================== */
.subscribe-section {
  background: #2d5064;
  padding: 50px 20px;
  text-align: center;
  color: #fff;
}
.subscribe-inner {
  max-width: 600px;
  margin: 0 auto;
}
.subscribe-inner h3 {
  font-size: 24px;
  font-family: 'nexa_boldregular', sans-serif;
  margin-bottom: 10px;
}
.subscribe-inner p {
  font-size: 15px;
  font-family: 'open_sansregular', sans-serif;
  color: rgba(255,255,255,0.8);
  margin-bottom: 20px;
}
#hubspot-subscribe-form .hs-form label {
  color: #fff;
  font-family: 'open_sansregular', sans-serif;
  font-size: 14px;
}
#hubspot-subscribe-form .hs-form .hs-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 14px;
  font-family: 'open_sansregular', sans-serif;
}
#hubspot-subscribe-form .hs-form .hs-input::placeholder {
  color: rgba(255,255,255,0.6);
}
#hubspot-subscribe-form .hs-form .hs-button {
  padding: 12px 35px;
  background: #9bdf46;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-family: 'nexa_boldregular', sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s;
}
#hubspot-subscribe-form .hs-form .hs-button:hover {
  background: #7cbf2e;
}
#hubspot-subscribe-form .hs-form .hs-error-msgs label {
  color: #ff6b6b;
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.footer {
  background: #2d2d2d;
  color: #aaa;
  padding: 25px 0;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}
.footer-legal {
  font-size: 13px;
  text-align: center;
}
.footer-legal a {
  color: #aaa;
  margin: 0 5px;
  transition: color 0.3s;
}
.footer-legal a:hover { color: #fff; }
.footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-social a {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.footer-social a:hover { opacity: 1; }
.footer-social img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}
@media (max-width: 768px) {
  .footer-inner { flex-direction: column; text-align: center; gap: 15px; }
  .footer-legal { text-align: center; }
  .footer-social { justify-content: center; }
}