:root {
    --primary-color: #6b43fa;
    --secondary-color: #000;
    --light-font: #ffff;
    --dark-font: #000B24;
    --light-background: #ffff;
    --dark-background: #000B24;
    --font-family: "Open Sans", sans-serif;
    --narrow-font-family: "Open Sans Condensed", sans-serif;
    --primary-gradient: linear-gradient(-225deg, #AC32E4 0%, #7918F2 48%, #4801FF 100%);
    --secondary-gradient: linear-gradient(109.6deg, rgb(193, 98, 253) 11.2%, rgb(0, 49, 165) 91.1%);
}
*,:after,:before {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-family: sans-serif;
    line-height: 1.15;
    height: 100% !important;
}

article,aside,figcaption,figure,footer,header,hgroup,main,nav,section {
    display: block;
}
body{
    font-family: var(--font-family);
    background-color: var(--dark-background);
    overflow-x: hidden;
    height: 100% !important;
}

strong {
    font-weight: 900 !important;
}
.navbar{
    background-color:transparent !important;
    text-transform: uppercase;
    transition: ease-in-out 300ms;
}
.scrolled{
    background-color: var(--light-background) !important;
    transition: ease-in-out 300ms;
}
.nav-link {
    color: var(--light-background) !important;
}
.nav-link-scrolled{
    color: var(--dark-background) !important;
}
.active {
    font-weight: 800;
    text-decoration: underline;
}
.nav-link:hover {
    color: var(--primary-color) !important;
}
.dropdown-menu{
    border-radius: 2px !important;
}
.dropdown-header{
    color: var(--primary-color) !important;
    font-size: 18px;
    font-weight: 900;
    text-transform: none;
}
.logo{
    height: auto;
    width: 50px;
}
#nav-logo img {
    opacity: 0;
}
#nav-logo{
    background-image: url(/images/logo-white.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 10;
}
.logo-scrolled img {
    opacity: 100 !important 
}
.nav-button{
    position: relative;
    color: var(--light-font);
    border: var(--light-font) 1px solid;
    border-radius: 2px;
    overflow:hidden;
    background: none;
    z-index: 1;
    cursor: pointer;
    transition:         0.08s ease-in;
    -o-transition:      0.08s ease-in;
    -ms-transition:     0.08s ease-in;
    -moz-transition:    0.08s ease-in;
    -webkit-transition: 0.08s ease-in;
}

.nav-button-scrolled{
    color: var(--dark-font);
    border: var(--dark-font) 1px solid;
  }
.offcanvas-header {
    color: var(--light-font);
  }
.offcanvas{
    background-color: var(--dark-background) !important;
    padding-left: 50px;

    }   
.offcanvas-scrolled{
    background-color: var(--light-background) !important;
  }
  .scrolled .offcanvas-header {
    color: var(--dark-font);
  }
  .scrolled .navbar-toggler {
    filter: invert(0.5) sepia(0) saturate(0) !important;

  }
  .scrolled .btn-close {
    filter: invert(0.5) sepia(0) saturate(0) !important;

  }
.hero{
    background-image: url(/images/background.png);
    background-position: center;
    background-size: cover;
    padding-top: 10vh;
    width: 100%;
    height: 75vh;
    min-height: fit-content;
    
}
.hero h1{
color: var(--primary-color);
font-size: clamp(24px, 5vw, 96px);
font-family: var(--narrow-font-family);

}
.hero h1 strong{
    color: var(--light-font);
    background: var(--light-font);
    background-clip: text;        
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
}

.hero h2{
    font-size: clamp(16px, 4vw, 62px);
    color: var(--light-font);   
    font-weight: 900;
}
.hero h2 strong{
    color: var(--light-font);
}

hr {
    color: transparent;
    background: linear-gradient(to right, var(--light-background), var(--dark-background), var(--light-background));
    height: 5px;
}
.home-products{
    background-color: var(--light-background);
    background-size: cover;
    color: var(--dark-font);
    width: 100%;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 60px;
}
.img-container{
    height: 75px;
    padding: 5px 10px;
    margin-bottom: 55px;
}
.img-container img{
    max-height: fit-content;
}
.home-products h3 {
    height: clamp(50px, 6vw, 120px);
    font-size: clamp(18px, 3vw, 24px);
    
}
.product-button, .contact-button{
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--light-font);
    border: var(--light-font) 1px solid;
    background-color: var(--secondary-color);
    padding: 10px;
    border-radius: 3px;
    overflow:hidden;
    z-index: 1;
    cursor: pointer;
    transition:         0.08s ease-in;
    -o-transition:      0.08s ease-in;
    -ms-transition:     0.08s ease-in;
    -moz-transition:    0.08s ease-in;
    -webkit-transition: 0.08s ease-in;
    font-size: clamp(18px, 1vw, 32px);
}
.home-services{
    background-color: var(--dark-background);
    color: var(--light-font);
    font-size: clamp(14px, 2vw, 20px);
}
.home-services h4 {
    font-size: clamp(24px, 3vw, 64px);
    font-family: var(--narrow-font-family);
}
.home-services .row {
    width: 90%;
    margin: 0 auto;
    
}
.home-services img{
    height: 300px;
    display: block;
   margin: 0 auto;
}
.home-services i{
    font-size: 60px;
}

.service-container{
    padding: 40px 40px;
}


.home-benefits{
    padding: 100px 20px;
    color: var(--light-font);
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(/images/services.jpg);
    background-size: cover;
    background-position: top;
}
.home-benefits i {
    font-size: 78px;
}
.home-contact{
    background-color: var(--light-background);
    font-size: clamp(16px, 2vw, 32px);
}
.home-contact h2 {
    font-weight: 900;
    font-size: clamp(32px, 3vw, 64px);
}
.contact-container{
    width: 60%;
    margin: 0 auto;
}
footer{
    padding: 60px 0px;
    background-color: var(--dark-background);
    color: var(--light-font);
}

footer h1{
    font-size: 22px;
}
footer ul{
    list-style: none;
    color: var(--light-font);
    text-transform: uppercase;
    font-size: 18px;
    
}
footer a{
    text-decoration: none;
    text-transform: none;
    color: var(--light-font);
    font-size: 14px;
}
footer a:hover{
color: var(--primary-color);
transition: ease-in-out 300ms;
}
.footer-logo {
    aspect-ratio: 1 / 1;
    max-width: 200px;
}

.page-header{
    color: white;
    padding-top: 180px;
    padding-bottom: 60px;
    width: 100%;
    min-height: fit-content;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/images/header.png);
    background-position: center;
    background-size: cover;
}
.page-header h1{
    font-weight: 800;
    font-family: var(--narrow-font-family);
    font-size: clamp(32px, 4vw, 60px);
}
.page-header h2{
    font-weight: 900;
    font-size: clamp(16px, 2vw, 32px);
}
.page-header p {
    margin: 0 auto;
    width: 60%;
    font-size: clamp(14px, 2vw, 20px);
}
.content {
background-color: var(--light-background);
padding: 60px 20px;
}
.content h3 {
    text-transform: uppercase;
    font-weight: 800;
    font-family: var(--narrow-font-family);
}
.about-content h3 {
    font-size: clamp(32px, 5vw, 60px);
    padding-bottom: 20px;
    font-family: var(--narrow-font-family);
    font-weight: 900;
    text-transform: uppercase;
}
.about-content .beginning, .inspire{
    padding: 100px 60px;
    background-color: var(--light-background);
}
.about-content .eureka{
    padding: 60px 60px;
    background-color: var(--dark-background);
    color: var(--light-font);
    font-size: 20px;
}
.about-content .eureka-image{
    background-image: url(/images/eureka.jpg);
    background-size: cover;
    opacity: 50%;
    background-position: center;
    padding: 40px 40px;
    color: var(--light-font);
   
}
.about-contact{
    background: var(--primary-color);
    font-size: clamp(16px, 2vw, 32px);
    color: var(--light-font);
}

.about-contact h2 {
    font-weight: 900;
    font-size: clamp(32px, 3vw, 64px);
}
.service-images i {
    position: relative;
    color: var(--dark-font);
    transition: .5s;
    z-index: 3;
}
.service-images{
    width: 300px;
    height: 300px;
    background-color: var(--light-background);
    text-align: center;
    line-height: 300px;
    font-size: 150px;
    margin: 0 10px;
    display: block;
    border-radius: 50%;
    border: solid 10px var(--dark-background);
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
#qb-online, #qb-desktop-s50{
    scroll-margin-top: 100px;

}
/*icon hover/fill animation*/

.service-images:hover i {
    color: var(--dark-font);
    transform: rotateY(360deg);
  }
  
  .service-images:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--secondary-gradient);
    transition: .5s;
    z-index: 2;
  }
  
  .service-images:hover:before {
    top: 0;
  }
  .consulting-images{
    width: 300px;
    height: 300px;
    background-color: var(--light-background);
    text-align: center;
    line-height: 300px;
    font-size: 150px;
    margin: 0 10px;
    display: block;
  }
  .consulting-links {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
  }
  .consulting-links:hover {
    color: var(--secondary-color);
    text-decoration: none;
    transition: ease-in-out 200ms;
  }

  .easy-ach-images, .netsuite-images, .ez-images {
    font-size: 200px;
    aspect-ratio: 1 / 1;
    color: var(--dark-font);
    background-color: var(--primary-color);
    border-radius: 50%;
  }

  .description{
    padding: 0px 20px;
    font-size: clamp(14px, 3vw, 24px);
  }
  .description h3 {
    font-size: clamp(32px, 3vw, 50px);
  }
  .description a{
    font-size: clamp(16px, 3vw, 24px);
    margin: 0 auto;
    width: 75%;
  }
  .easy-ach-content, .netsuite-content {
    background-color: var(--light-background);
    color: var(--dark-font);
    
  }
  .pricing-container{
    background: var(--primary-gradient);
    color: var(--light-font);
    padding: 40px 0px;
  }
  .pricing-header{
    width: 60%;
    margin: 0 auto;
    font-size: clamp(14px, 2vw, 24px)
  }
  .pricing-container h4{
    font-size: clamp(30px, 4vw, 64px);
    text-transform: uppercase;
    font-weight: 800;
    font-family: var(--narrow-font-family);
    text-align: center;
  }
  .light-hr{
    background: var(--light-background);
  }
  .accordion{
    width: 80% !important;
  }
  .accordion-item{
    background-color: var(--primary-gradient) !important;
    color: var(--light-font) !important;
    border: none !important;
    box-shadow: none !important;
  }
  .accordion-button{
    background-color: var(--primary-gradient) !important;
    border: none !important;
    box-shadow: none !important;
    filter: invert(1) sepia(1) saturate(0) !important;
    font-size: clamp(24px, 2vw, 28px) !important;
    font-weight: 900 !important;
    font-family: var(--narrow-font-family);
  }
  .accordion-body{
    background-color: var(--dark-background) !important;
    border-radius: 10px !important;
  }

    form{
        background-color: var(--dark-background);
        margin: 0 auto;
    }
    .contact-info{
        background: var(--primary-gradient) !important;
        color: var(--light-font);
    }

   .success i{
      background-color: var(--primary-color);
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      color: var(--dark-font);
      font-size: 250px;
  }
  .success h1{
    font-weight: 900;
  }
  .thank-you a {
    text-decoration: none;
    color: var(--primary-color);
  }
  .thank-you a:hover {
    text-decoration: none;
    color: var(--light-font);
    transition: ease-in-out 300ms;
  }

/*button fill animation*/

.fill:hover {
    color: var(--light-background);
  }
  
.fill:before {
    content: "";
    position: absolute;
    background: var(--secondary-gradient);
    bottom: 0;
    left: 0;
    right: 100%;
    top: 0;
    z-index: -1;
    -webkit-transition: right 0.20s ease-in;
    transition: right 0.20s ease-in;
  }
  
.fill:hover:before {
    border: none;
    right: 0;
  }


@keyframes blockRevealAnimation {
    0% {
        left: -100%;
    }
    40% {
        left: 0;
    }
    60% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}
@keyframes revealTextAnimation {
    0% {
        color: transparent;
    }
    40% {
        color: transparent;
    }
    60% {
        color: #333;
    }
}
@keyframes revealImgAnimation {
    0% {
        opacity: 0;
    }
    60% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}

@media (max-width: 1199.98px) { 
    .home-products hr {
        display: none;
    }
    .home-products img {
       height: 100%;
    }
    .img-container
    {
        margin-bottom: auto;
    }
    .hero{
        height: 50vh;
    }
}