/* CSS Document */
body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f8f9fa;
  color: #483939;
  scroll-behavior: smooth;
}

body.dark-mode {
  background-color: #111;
  color: #d6d6d6;
}

h1 {
  color: #d6d6d6;
}

h1.article {
  color: #483939;
}

h2, h3, h4, h5, h6 {
  color: #506882;
}

.negative-margin-bottom-1 {
  margin-bottom: -1rem;
}

.negative-margin-bottom-2 {
  margin-bottom: -2rem;
}

.negative-margin-top-1 {
  margin-top: -1rem;
}

.negative-margin-top-2 {
  margin-top: -2rem;
}

/* CSS Document */
footer {
  background-color: #111;
  color: #d6d6d6;
}

.footer-links {
  font-size: 0.85rem;
  color: #6c757d;
}

.footer-links a {
  color: #6c757d !important;
  text-decoration: none;
  margin-right: 1rem;
}

.footer-links a:hover {
  color: #2d3e50;
  text-decoration: underline;
}

.footer-links a:last-child {
  margin-right: 0;
}

section {
  padding: 4rem 0;
  background-color: white;
}

body.dark-mode section {
  background-color: #111;
}

.product-page section[id] {
  scroll-margin-top: 72px;
}

#hero-index {
  background: url("/z-images/hero/which-home-lift-lady-hero.webp") no-repeat center center;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 100vh;
}

#hero-index::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

#hero-index .container {
  position: relative;
  z-index: 2;
}

#hero-index .hero-text-background-color {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.5rem;
  padding: 2rem;
}

#hero-index h1 {
  font-size: 2.5rem;
  color: #06ff45;
}

#hero-index h2 {
  font-size: 1.75rem;
  color: #f2f2f2;
}

#hero-index p {
  font-size: 1.125rem;
  color: #f2f2f2;
}

#hero-index .btn-cta {
  font-size: 1rem;
  padding: 0.5rem 1.25rem;
}

@media (max-width: 767.98px) {
  #hero-index {
    background-position: calc(50% - 35%) center;
  }
}

.btn-primary {
  background-color: #12b31d;
  border: none;
}

.btn-primary:hover {
  background-color: #0d8515;
}

.btn-cta {
  background-color: #0e83ff;
  color: #fff;
  border: none;
}

.btn-cta:hover {
  background-color: #607d8b;
  color: #fff;
}

.btn-cta-2 {
  background-color: #12b31d;
  border: none;
  color: #fff;
}

.btn-cta-2:hover {
  background-color: #0d8515;
}

/* Form Section Styles */
#form-section {
  background-color: #111;
  color: #fff;
}

#form-section h2.form-title {
  font-weight: 500;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  color: #06ff45 !important;
}

#form-section .form-label {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

#form-section .form-control,
#form-section .form-select {
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  background-color: #fff;
  color: #2f2c2c;
}

#form-section .form-control:focus,
#form-section .form-select:focus {
  border-color: #12b31d;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(61, 196, 133, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(61, 196, 133, 0.25);
}

#form-section .form-check-label {
  font-size: 0.875rem;
}

#form-section .btn-cta {
  background-color: #12b31d;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

#form-section .btn-cta:hover {
  background-color: #0d8515;
  color: #fff;
}

#form-section input[type="checkbox"] {
  accent-color: #12b31d;
}

/* Sticky Desktop Form Styles */
.desktop-form {
  position: absolute;
  top: calc(6%);
  right: calc(5%);
  width: 340px;
  z-index: 10;
}

.desktop-form-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

.desktop-form-body form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.desktop-form-body input,
.desktop-form-body select {
  margin-bottom: 0.75rem;
}

.desktop-form-body .form-check-label {
  color: #2f2c2c;
}

.desktop-form-body .form-check {
  margin-bottom: 1rem;
}

.desktop-form-body .btn-primary {
  background-color: #12b31d;
  border: none;
  font-weight: 600;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.desktop-form-body .btn-primary:hover {
  background-color: #0d8515;
}

@media (max-width: 767.98px) {
  #form-section h2 {
    font-size: 1.5rem;
  }
  #form-section .btn-cta {
    font-size: 0.95rem;
  }
}

.form-select, input::-webkit-input-placeholder {
  color: #2f2c2c !important;
}

.form-select, input:-ms-input-placeholder {
  color: #2f2c2c !important;
}

.form-select, input::-ms-input-placeholder {
  color: #2f2c2c !important;
}

.form-select, input::placeholder {
  color: #2f2c2c !important;
}

/* CSS Document */
.icon-luma {
  font-size: 2rem;
  color: #12b31d;
  position: relative;
  display: inline-block;
  margin-bottom: 0.75rem;
}

/* CSS Document */
.step-number {
  position: absolute;
  top: -0.25rem;
  right: -0.6rem;
  background: #3094e9;
  color: #fff;
  font-size: 0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 600;
}

.purchase-step {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  height: 100%;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-animation: fadeInUp 0.6s ease forwards;
          animation: fadeInUp 0.6s ease forwards;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.purchase-step:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
}

.purchase-step:nth-of-type(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.purchase-step:nth-of-type(2) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.purchase-step:nth-of-type(3) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.purchase-step:nth-of-type(4) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.purchase-step:nth-of-type(5) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.purchase-step:nth-of-type(6) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

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

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

.purchase-step .step-icon {
  font-size: 2rem;
  color: #0057A0;
  margin-bottom: 0.75rem;
}

.purchase-step h5 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.purchase-step p {
  font-size: 0.95rem;
  color: #555;
}

.feature-box {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 1rem;
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  height: 100%;
  text-align: center;
}

.feature-box:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
}

.feature-img {
  width: 240px;
  height: 125px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.5rem;
  border: solid 1px #b6b0b0;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  -webkit-transition: -webkit-box-shadow 0.3s ease;
  transition: -webkit-box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease;
}

.feature-img:hover {
  -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.feature-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #003366;
  margin-bottom: 0.5rem;
}

.feature-desc {
  font-size: 0.95rem;
  color: #2d3e50;
  line-height: 1.6;
}

.collapse {
  -webkit-transition: height 0.035s ease, opacity 0.35s ease;
  transition: height 0.035s ease, opacity 0.35s ease;
}

#more-features.collapsing {
  opacity: 0;
}

#more-features.collapse.show {
  opacity: 1;
}

.accordion-button {
  background-color: #f8f9fa;
  color: #212529;
  font-weight: 500;
  -webkit-transition: background-color 0.3s ease, color 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.accordion-button:not(.collapsed) {
  background-color: #e7ecef;
  color: #0d3b66;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

.accordion-button:focus {
  -webkit-box-shadow: 0 0 0 0.25rem rgba(109, 111, 112, 0.25);
          box-shadow: 0 0 0 0.25rem rgba(109, 111, 112, 0.25);
  border: 0.25px;
}

.accordion-body {
  background-color: #ffffff;
  color: #333;
  border-top: 1px solid #dee2e6;
  -webkit-animation: fadeSlide 0.3s ease-in-out;
          animation: fadeSlide 0.3s ease-in-out;
}

.accordion-item {
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}

@-webkit-keyframes fadeSlide {
  from {
    opacity: 0;
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.spec-table {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  overflow: hidden;
  -webkit-box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.03);
          box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.03);
}

.navbar {
  background-color: #111;
}

.navbar .navbar-brand {
  color: #fff;
  font-weight: 300;
  font-size: 1.25rem;
}

.navbar .nav-link {
  /* color: #fff;*/
  font-size: 0.9rem;
  text-transform: uppercase;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
  /*&:hover,
      &:focus {
        color: $green-primary; // Luma green
      }*/
}

.navbar .dropdown-menu {
  background-color: #fff;
  border: none;
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}

.navbar .dropdown-item {
  color: #483939;
  font-size: 0.9rem;
  font-weight: 500;
}

.navbar .dropdown-item:hover {
  /*color: $green-primary;*/
  background-color: #f8f9fa;
}

.navbar .btn-cta {
  background-color: #12b31d;
  color: #fff;
  padding: 0.25rem 0.75rem;
  border: none;
}

.navbar .btn-cta:hover {
  background-color: #0d8515;
  color: #fff;
}

@media (min-width: 992px) {
  .hover-dropdown:hover > .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    margin-top: 0;
  }
  .dropdown-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.2s ease, visibility 0.2s ease;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
}

@media (min-width: 992px) {
  .hover-dropdown:hover > .nav-link::after {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}

.top-cta {
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.top-cta.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* CSS Document */
#hero-article {
  background: url("../../z-images/hero/luma-home-lift.jpg") no-repeat center center;
  background-size: cover;
  min-height: 75vh;
  color: white;
}

@media (max-width: 991.98px) {
  #hero-article .hero-text {
    background: rgba(0, 0, 0, 0.25);
    padding: 2.5rem;
  }
}