/* ========== NEXUS CSS ========== */
/*:root {
  --nectar-accent-color: #c10230;
  --nectar-extra-color-1: #582c83;
  --nectar-extra-color-2: #385e9d;
  --nectar-extra-color-3: #d72c34;
  --nectar-black: #000000;
  --nectar-white: #ffffff;
  --nectar-grey: #f5f5f5;
  --gradient-color-1: #613F86;
  --gradient-color-2: #1B7DAF;
  --gradient-color-3: #64C592;
  --gradient-color-4: #F8D026;
  --gradient-color-5: #DB6435;
  --gradient-color-6: #EF3F42;
  --gradient-color-7: #ED66A3;
  --filter-col: 14%;
  --type-heading: aeromaticsbold;
  --type-sub-heading: aeromaticsregular;
  --type-light: Supremelight;
  --type-reg: Supremeregular;
  --type-medium: Suprememedium;
}*/
:root {
  --nexus-font: 'Blurpro', sans-serif;
}
/* ===== Text Styling ===== */
body .container-wrap .main-content .nexus-h2-style,
body .container-wrap .main-content .nexus-h2-style * {
  color: var(--nectar-white);
  font-family: var(--nexus-font);
  font-size: 48px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25; 
  text-transform: uppercase;
}
body .container-wrap .main-content .nexus-h3-style,
body .container-wrap .main-content .nexus-h3-style * {
  color: var(--nectar-white);
  font-family: var(--nexus-font);
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
}
body .container-wrap .main-content .nexus-light-h3-style,
body .container-wrap .main-content .nexus-light-h3-style * {
  color: var(--nectar-white);
  font-family: var(--nexus-font);
  font-size: 36px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.25;
  text-transform: uppercase;
}
body .container-wrap .main-content .nexus-light-h3-style strong,
body .container-wrap .main-content .nexus-light-h3-style * strong {
  font-weight: 500;
}
body .container-wrap .main-content .alternate-h5 * {
  font-family: var(--type-reg);
  text-transform: none;
}
body .container-wrap .main-content .alternate-h5 * strong {
  font-family: var(--type-sub-heading);
  text-transform: uppercase;
}
h6 strong, 
body .row .col h6 strong, 
body .row .col .h6-style * strong, 
body .h6-style strong {
  font-weight: 700;
}
body .container-wrap .main-content .opacity-sixty-six-text {
  color: rgba(255, 255, 255, 0.66) !important;
}
body .container-wrap .main-content .rgb,
body .container-wrap .main-content .rgb * {
  background: linear-gradient(
    90deg,
    var(--gradient-color-1),
    var(--gradient-color-2),
    var(--gradient-color-3),
    var(--gradient-color-4),
    var(--gradient-color-5),
    var(--gradient-color-6),
    var(--gradient-color-7)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: 500;
}
/* ===== Hero Layout Styling ===== */
body .container-wrap .main-content .fill-height .wpb_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: stretch;

  * {
    background-size: auto 100% !important;
    background-size: auto 65% !important;
    background-repeat: no-repeat !important;
  }

  .inner_row.three-x-row {
    flex: 3;

    .col {
      height: 100%;

      .vc_column_container > .vc_column-inner {
        height: 100%;

        .wpb_wrapper {
          height: 100%;
          justify-content: flex-end;
          align-items: center;
        }
      }
    }
  }
}
body .container-wrap .main-content .nexus-logo img {
  width: 100%;
  height: auto;
  max-width: min(300px, 100%);
}
/* ===== Button Styling ===== */
body .container-wrap .main-content .nexus-btn-group {
  display: inline-flex;
  margin: 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 16px;
  border-radius: 16px;
  max-width: max-content;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(3px);
  border: 1px solid rgb(255 255 255 / 20%);

  .nectar-button {
    margin-bottom: 0 !important;
  }
}
body .container-wrap .main-content .pre-order-btn,
body .container-wrap .main-content .trailer-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  * {
    transform: none !important;
    flex: auto;
    left: auto;
    right: auto !important;
    position: relative;
    top: auto;
    bottom: auto;
  }

  > span {
    font-family: var(--type-sub-heading);
    font-size: 24px;
    line-height: 1;
    font-weight: 400;
    text-transform: uppercase;
  }
}

body .container-wrap .main-content .trailer-btn {
  &:before {
    content: '';  
    position: relative;
    background-image: url('/wp-content/uploads/2024/05/Video-Icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    transition: all 0.3s ease-in-out;
  }
  &:hover {
    &:before {
      filter: invert(100%) !important;
      -webkit-filter: invert(100%) !important;
    }
  }
}
body .container-wrap .main-content .pre-order-btn:before {
  content: '';  
  position: relative;
  background-image: url('/wp-content/uploads/2024/05/Cart-Icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}
/* ===== Layout Adjustments ===== */
body .container-wrap .main-content img.nexus-bottom-graphic {
  width: 150%;
  margin-left: -25%;
  max-width: none;
}
body .container-wrap .main-content .nexus-bg-border {
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 20px;
  background-color: rgba(41, 41, 41, 20%);
  padding: 0 !important;
}
body .container-wrap .geek-video-container {
  display: flex;
}
body .container-wrap .main-content .flex-one .wpb_wrapper {
  flex: 1;
}
body .container-wrap .hide-select .select-wrapper {
  display: none;
}
/* ===== Tables ===== */
body .container-wrap .main-content .nexus-spec-table table {
  width: 100%;
  border-collapse: collapse;

  * {
    border: none !important;
  }
  tr {
    th {
      text-align: right;
      padding: 0;
      font-family: var(--type-sub-heading);
      font-size: 24px;
      line-height: 1.5;
      font-weight: 400;
      text-transform: uppercase;
    }
    td {
      text-align: left;
      padding: 0 0 0 25px;
      line-height: 2;
    }
  }

}
body .container-wrap .main-content .custom-retailer-link {
  transition: all 0.3s ease-in-out;
  &:hover {
    transform: scale(1.05);
  }
}
/* ===== Fixed Elements ===== */
.fixed-group {
  position: fixed;
  width: 100%;
  height: max-content !important;
  left: 0;
  bottom: 3%;
  z-index: 15;

  .wpb_wrapper {
    display: flex;
    justify-content: center;
  }
}
.nectar-global-section.before-footer {
  z-index: 20;
}
/* ===== Nexus Desktop ===== */
@media only screen and (min-width:1000px) {
  
  body .container-wrap .main-content .nexus-bg-alt-border {
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 20px;
    background-color: rgba(41, 41, 41, 50%);
    backdrop-filter: blur(10px);
    padding: 0 !important;
  }
}
/* ===== Nexus Mobile ===== */
@media only screen and (max-width: 999px) {
  /* == Typography == */
  body .container-wrap .main-content .nexus-h2-style,
  body .container-wrap .main-content .nexus-h2-style * {
    font-size: 36px;
  }
  body .container-wrap .main-content .nexus-h3-style,
  body .container-wrap .main-content .nexus-h3-style *,
  body .container-wrap .main-content .nexus-light-h3-style,
  body .container-wrap .main-content .nexus-light-h3-style * {
    font-size: 25px;
  }
  body .container-wrap .main-content .nexus-spec-table table tr th {
    font-size: 18px;
  }
  body .container-wrap .main-content .nexus-spec-table table tr td {
    line-height: 1.5;
  }
  /* ===== Layout Adjustments ===== */
  body .container-wrap .main-content .fill-height .wpb_wrapper {
    * {
      background-size: auto 85% !important;
      background-position: center bottom !important;
      /* Temporary fix */
      background-size: auto 50% !important;
      background-position: center center !important;
    }
    
    & .inner_row.three-x-row {
      & .col {
        & .vc_column_container > .vc_column-inner {
          .wpb_wrapper {
            justify-content: flex-start;
          }
        }
      }
    }
  }

  body .container-wrap .main-content img.nexus-bottom-graphic {
    width: 260%;
    margin-left: -80%;
  }
  body .container-wrap .main-content .nexus-logo img {
    max-width: min(200px, 100%);
  }
}