/* Start custom CSS for html, class: .elementor-element-d07aafa *//* =====================================================================
   NEW VISION COMMERCIAL
   HEADER + NAVIGATION CSS
   ===================================================================== */


/* =====================================================================
   ROOT VARIABLES
   ===================================================================== */

:root{

  --ink:#0a0a0b;
  --charcoal:#151517;
  --panel:#1c1c1f;
  --panel-2:#232326;

  --line:#2a2a2e;
  --line-soft:#232327;

  --volt:#c6ff3d;
  --volt-dim:#9fd92e;
  --volt-soft:rgba(198,255,61,.10);

  --paper:#f5f5f2;

  --grey:#9a9a9f;
  --grey-dim:#6b6b70;

  --radius:2px;

  --ease:cubic-bezier(.2,.7,.2,1);
}


/* =====================================================================
   GLOBAL RESET
   ===================================================================== */

*,
*::before,
*::after{

  box-sizing:border-box;

}


html{

  margin:0 !important;
  padding:0 !important;

  width:100%;

  scroll-behavior:smooth;

}


body{

  margin:0 !important;
  padding:0 !important;

  width:100%;
  min-height:100%;

  background:var(--ink);

  color:var(--paper);

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

  overflow-x:hidden;

}


::selection{

  background:var(--volt);
  color:var(--ink);

}


img{

  max-width:100%;

}


a{

  color:inherit;

  text-decoration:none;

}


button{

  font-family:inherit;

}


/* =====================================================================
   WORDPRESS / PAGE BUILDER RESET
   ===================================================================== */

#page,
.site,
.site-content,
.site-main,
main,
.wp-site-blocks,
.wp-block-group,
.entry-content{

  margin-top:0 !important;

}


#page,
.site,
.site-content,
.site-main,
main,
.wp-site-blocks{

  padding-top:0 !important;

}


.wp-site-blocks > :first-child{

  margin-top:0 !important;

}


.wp-site-blocks > :last-child{

  margin-bottom:0 !important;

}


/* =====================================================================
   CONTAINER
   ===================================================================== */

.container-xl{

  width:100%;

  max-width:1320px;

  margin-left:auto !important;
  margin-right:auto !important;

  padding-left:clamp(20px,4vw,56px);
  padding-right:clamp(20px,4vw,56px);

}


/* =====================================================================
   FOCUS ACCESSIBILITY
   ===================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

  outline:2px solid var(--volt);

  outline-offset:3px;

}


/* =====================================================================
   SCROLLBAR
   ===================================================================== */

::-webkit-scrollbar{

  width:10px;

}


::-webkit-scrollbar-track{

  background:var(--ink);

}


::-webkit-scrollbar-thumb{

  background:var(--line);

}


::-webkit-scrollbar-thumb:hover{

  background:var(--grey-dim);

}


/* =====================================================================
   LOADER
   ===================================================================== */

#loader{

  position:fixed;

  inset:0;

  background:var(--ink);

  z-index:99999;

  display:flex;

  align-items:center;

  justify-content:center;

  opacity:1;

  visibility:visible;

  transition:
    opacity .6s ease,
    visibility .6s ease;

}


#loader.hide{

  opacity:0;

  visibility:hidden;

}


.loader-mark{

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:16px;

}


.loader-mark img{

  display:block;

  width:auto;

  height:34px;

  max-width:220px;

  animation:loaderFade 1.4s ease-in-out infinite;

}


.loader-bar{

  width:120px;

  height:1px;

  background:var(--line);

  position:relative;

  overflow:hidden;

}


.loader-bar::after{

  content:"";

  position:absolute;

  top:0;
  left:-40%;

  width:40%;
  height:100%;

  background:var(--volt);

  animation:loaderSweep 1.1s ease-in-out infinite;

}


@keyframes loaderFade{

  0%,
  100%{

    opacity:.55;

  }

  50%{

    opacity:1;

  }

}


@keyframes loaderSweep{

  0%{

    left:-40%;

  }

  100%{

    left:100%;

  }

}


/* =====================================================================
   MAIN NAVIGATION
   ===================================================================== */

.nvc-nav{

  position:fixed !important;

  top:0 !important;
  left:0 !important;
  right:0 !important;

  width:100% !important;

  margin:0 !important;
  padding:0 !important;

  z-index:10000;

  min-height:84px;

  display:flex;

  align-items:center;

  background:rgba(10,10,11,.97);

  border-bottom:1px solid var(--line);

  transition:
    min-height .35s var(--ease),
    background .35s ease,
    box-shadow .35s ease,
    backdrop-filter .35s ease;

}


.nvc-nav.scrolled{

  min-height:68px;

  background:rgba(10,10,11,.94);

  backdrop-filter:blur(14px);

  -webkit-backdrop-filter:blur(14px);

  box-shadow:

    0 8px 30px rgba(0,0,0,.38);

}


/* =====================================================================
   NAV CONTAINER
   ===================================================================== */

.nvc-nav .container-xl{

  display:flex;

  align-items:center;

  min-height:inherit;

  width:100%;

  margin-top:0 !important;
  margin-bottom:0 !important;

  padding-top:14px;
  padding-bottom:14px;

}


/* =====================================================================
   LOGO
   ===================================================================== */

.nvc-nav .brand-mark{

  display:flex;

  align-items:center;

  justify-content:flex-start;

  min-height:36px;

  flex-shrink:0;

  margin:0;

  padding:0;

  position:relative;

  z-index:2;

  transition:
    transform .3s ease,
    filter .3s ease;

}


.nvc-nav .brand-mark:hover{

  transform:translateY(-1px);

  filter:

    drop-shadow(
      0 0 10px
      rgba(198,255,61,.30)
    );

}


.nvc-nav .brand-mark img{

  display:block;

  height:clamp(27px,2.6vw,34px);

  width:auto;

  max-width:205px;

  object-fit:contain;

  transition:

    height .35s var(--ease),
    max-width .35s var(--ease);

}


.nvc-nav.scrolled .brand-mark img{

  height:30px;

}


/* =====================================================================
   NAVIGATION WRAPPER
   ===================================================================== */

.nvc-nav .navbar-collapse{

  display:flex;

  align-items:center;

  justify-content:flex-end;

}


.nvc-nav .navbar-nav{

  display:flex;

  align-items:center;

  gap:0;

}


/* =====================================================================
   NAVIGATION LINKS
   ===================================================================== */

.nvc-nav .nav-link{

  position:relative;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:36px;

  padding:8px 0 !important;

  margin:0 11px;

  color:var(--grey);

  font-family:'JetBrains Mono',monospace;

  font-size:.69rem;

  font-weight:500;

  letter-spacing:.095em;

  line-height:1.2;

  text-transform:uppercase;

  white-space:nowrap;

  transition:

    color .25s ease,
    transform .25s ease;

}


/* =====================================================================
   NAV LINK UNDERLINE
   ===================================================================== */

.nvc-nav .nav-link::after{

  content:"";

  position:absolute;

  left:0;

  bottom:2px;

  width:0;

  height:1px;

  background:var(--volt);

  transition:

    width .28s var(--ease);

}


/* =====================================================================
   NAV LINK HOVER
   ===================================================================== */

.nvc-nav .nav-link:hover{

  color:var(--paper);

}


.nvc-nav .nav-link:hover::after{

  width:100%;

}


/* =====================================================================
   ACTIVE PAGE
   ===================================================================== */

.nvc-nav .nav-link.active{

  color:var(--volt);

}


.nvc-nav .nav-link.active::after{

  width:100%;

}


/* =====================================================================
   CTA
   ===================================================================== */

.nvc-nav .nav-cta-item{

  margin-left:10px;

}


.nvc-nav .btn-volt{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:.55rem;

  padding:13px 20px;

  min-height:42px;

  border:1px solid var(--volt);

  border-radius:var(--radius);

  background:var(--volt);

  color:var(--ink) !important;

  font-family:'JetBrains Mono',monospace;

  font-size:.69rem;

  font-weight:600;

  letter-spacing:.08em;

  line-height:1;

  text-transform:uppercase;

  white-space:nowrap;

  transition:

    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;

}


.nvc-nav .btn-volt i{

  font-size:.7rem;

  transition:

    transform .25s ease;

}


.nvc-nav .btn-volt:hover{

  background:transparent;

  color:var(--volt) !important;

  border-color:var(--volt);

  transform:translateY(-2px);

  box-shadow:

    0 8px 22px rgba(198,255,61,.10);

}


.nvc-nav .btn-volt:hover i{

  transform:translateX(3px);

}


/* =====================================================================
   MOBILE TOGGLER
   ===================================================================== */

.nvc-nav .navbar-toggler{

  width:46px;

  height:42px;

  margin-left:auto;

  padding:5px 7px;

  border:1px solid transparent;

  border-radius:var(--radius);

  background:transparent;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:5px;

  flex-shrink:0;

  transition:

    border-color .25s ease,
    background .25s ease;

}


.nvc-nav .navbar-toggler:hover{

  border-color:var(--line);

  background:var(--charcoal);

}


.nvc-nav .navbar-toggler:focus{

  box-shadow:none;

}


.nvc-nav .navbar-toggler .bar{

  display:block;

  width:25px;

  height:2px;

  background:var(--paper);

  margin:0;

  transform-origin:center;

  transition:

    transform .3s var(--ease),
    opacity .2s ease,
    width .3s ease;

}


/* =====================================================================
   HAMBURGER → X
   ===================================================================== */

.nvc-nav .navbar-toggler[aria-expanded="true"]
.bar:nth-child(1){

  transform:
    translateY(7px)
    rotate(45deg);

}


.nvc-nav .navbar-toggler[aria-expanded="true"]
.bar:nth-child(2){

  opacity:0;

  width:0;

}


.nvc-nav .navbar-toggler[aria-expanded="true"]
.bar:nth-child(3){

  transform:
    translateY(-7px)
    rotate(-45deg);

}


/* =====================================================================
   DESKTOP — LARGE
   ===================================================================== */

@media (min-width:1201px){

  .nvc-nav .navbar-nav{

    gap:2px;

  }


  .nvc-nav .nav-link{

    margin-left:10px;
    margin-right:10px;

  }

}


/* =====================================================================
   DESKTOP / LAPTOP
   ===================================================================== */

@media (max-width:1200px) and (min-width:992px){

  .nvc-nav .nav-link{

    margin-left:7px;
    margin-right:7px;

    font-size:.64rem;

    letter-spacing:.07em;

  }


  .nvc-nav .btn-volt{

    padding-left:15px;
    padding-right:15px;

    font-size:.62rem;

  }


  .nvc-nav .nav-cta-item{

    margin-left:5px;

  }


  .nvc-nav .brand-mark img{

    max-width:185px;

  }

}


/* =====================================================================
   TABLET / MOBILE
   ===================================================================== */

@media (max-width:991.98px){

  .nvc-nav{

    min-height:72px;

  }


  .nvc-nav.scrolled{

    min-height:68px;

  }


  .nvc-nav .container-xl{

    padding-top:11px;
    padding-bottom:11px;

    flex-wrap:wrap;

  }


  .nvc-nav .brand-mark img{

    height:30px;

    max-width:185px;

  }


  /* --------------------------------------------------------------
     MOBILE MENU
  -------------------------------------------------------------- */

  .nvc-nav .navbar-collapse{

    width:100%;

    flex-basis:100%;

    margin-top:12px;

    padding:4px 0 18px;

    border-top:1px solid var(--line);

  }


  .nvc-nav .navbar-nav{

    width:100%;

    display:flex;

    align-items:stretch;

    gap:0;

  }


  .nvc-nav .nav-item{

    width:100%;

  }


  .nvc-nav .nav-link{

    width:100%;

    justify-content:flex-start;

    margin:0;

    padding:15px 4px !important;

    min-height:50px;

    border-bottom:1px solid var(--line);

    font-size:.72rem;

    letter-spacing:.10em;

  }


  .nvc-nav .nav-link::after{

    bottom:0;

  }


  .nvc-nav .nav-link.active{

    color:var(--volt);

  }


  /* --------------------------------------------------------------
     MOBILE CTA
  -------------------------------------------------------------- */

  .nvc-nav .nav-cta-item{

    margin:18px 0 0;

  }


  .nvc-nav .btn-volt{

    width:100%;

    min-height:48px;

    padding:15px 20px;

    justify-content:center;

  }

}


/* =====================================================================
   SMALL MOBILE
   ===================================================================== */

@media (max-width:575.98px){

  .container-xl{

    padding-left:18px;
    padding-right:18px;

  }


  .nvc-nav .container-xl{

    padding-top:10px;
    padding-bottom:10px;

  }


  .nvc-nav .brand-mark img{

    height:28px;

    max-width:175px;

  }


  .nvc-nav .navbar-toggler{

    width:44px;

    height:40px;

  }


  .nvc-nav .nav-link{

    padding-top:14px !important;
    padding-bottom:14px !important;

  }

}


/* =====================================================================
   EXTRA SMALL MOBILE
   ===================================================================== */

@media (max-width:380px){

  .nvc-nav .brand-mark img{

    max-width:155px;

  }


  .nvc-nav .navbar-toggler{

    width:40px;

  }


  .nvc-nav .navbar-toggler .bar{

    width:22px;

  }

}


/* =====================================================================
   WORDPRESS ADMIN BAR
   ===================================================================== */

body.admin-bar .nvc-nav{

  top:0 !important;

}


/* =====================================================================
   FINAL NAVBAR RESET
   ===================================================================== */

.nvc-nav,
.nvc-nav *,
.nvc-nav::before,
.nvc-nav::after{

  box-sizing:border-box;

}


.nvc-nav + *{

  margin-top:0;

}


/* =====================================================================
   PREVENT THEME / BUILDER GAP
   ===================================================================== */

.nvc-nav + #page,
.nvc-nav + .site,
.nvc-nav + .site-content,
.nvc-nav + main,
.nvc-nav + .wp-site-blocks{

  margin-top:0 !important;

  padding-top:0 !important;

}


/* =====================================================================
   REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion:reduce){

  html{

    scroll-behavior:auto;

  }


  .nvc-nav,
  .nvc-nav *,
  #loader,
  #loader *{

    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;

  }

}/* End custom CSS */