html,

body,


/* ----------------------------------------------INTRO  SCREEN------------------------------------------------- */
.syncopate-regular {
  font-family: "Be Vietnam Pro", sans-serif;
  /* font-weight: 400;
  font-style: normal; */
}
    .intro-screen {
      height: 100vh;
       color: white;
 background: #0a0000;
background: linear-gradient(186deg, rgba(10, 0, 0, 1) 0%, rgba(14, 41, 37, 1) 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      animation: bounce 1s infinite;
      position: relative;
    }
    .intro-screen h1 {
      font-size: 3rem;
      animation: fadeIn 1s ease-in-out;
    }
    .bottom-indicator {
      position: absolute;
      bottom: 10%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .bounce-arrow {
      font-size: 2rem;
    }
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
      40% {transform: translateY(-10px);}
      60% {transform: translateY(-5px);}
    }
    @keyframes fadeIn {
      from {opacity: 0; transform: scale(0.9);}
      to {opacity: 1; transform: scale(1);}
    }
    .main-content {
      display: none;
    }

/* ----------------------------------------------HOMEPAGE------------------------------------------------- */

.btn{
    border-radius: 25px;
}



.sectionload{
  /* width: 330px; */
  height: auto;
  /* border-radius: 8px; */
  /* margin-top: 50px; */
}

@keyframes enter-animation {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .section-animation {
    animation: enter-animation 0.8s 1;
  }
}


.animation-element {
  position: relative;
/*   width: 30%;
  border: 1px solid red; */
  margin-top: 50px;
}

.bounce-up .box {
  opacity: 0;
  -moz-transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  -o-transition: all 700ms ease-out;
  transition: all 700ms ease-out;
  -moz-transform: translate3d(0px, 200px, 0px);
  -webkit-transform: translate3d(0px, 200px, 0px);
  -o-transform: translate(0px, 200px);
  -ms-transform: translate(0px, 200px);
  transform: translate3d(0px, 200, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}


.bounce-up.in-view .box {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

/* ----------------------------------------------HERO SECTION -------------------------------------------------- */

/* HOME BUTTONS */
.d-button {
  color: white;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
    border-radius: 25px;  

}
.d-button--gooey {
  color: black;
  background-color: white;
  /* border: solid white; */
  border-radius: 25px;  
  position: relative;
  transition: all 700ms ease;
  .d-button__blobs {
    height: 100%;
    filter: url(#goo);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: -3px;
    right: -1px;
    z-index: -1;
    div {
      background-color: white;
      width: 34%;
      height: 100%;
      border-radius: 100%;
      position: absolute;
      transform: scale(1.4) translateY(125%) translateZ(0);
      transition: all 700ms ease;
      &:nth-child(1) {
        left: -5%;
      }
      &:nth-child(2) {
        left: 30%;
        transition-delay: 60ms;
      }
      &:nth-child(3) {
        left: 66%;
        transition-delay: 25ms;
      }
    }
  }
  &:hover {
    color: black;
    .d-button__blobs {
        border-radius: 25px;;
      div {
        transform: scale(1.4) translateY(0) translateZ(0);
      }
    }
  }
};
.c-button {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
    border-radius: 25px;  

}
.c-button--gooey {
  color: white;
  border: 0.5px solid white;
  border-radius: 25px;  
  position: relative;
  transition: all 700ms ease;
  .c-button__blobs {
    height: 100%;
    filter: url(#goo);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: -3px;
    right: -1px;
    z-index: -1;
    div {
      background-color: white;
      width: 34%;
      height: 100%;
      border-radius: 100%;
      position: absolute;
      transform: scale(1.4) translateY(125%) translateZ(0);
      transition: all 700ms ease;
      &:nth-child(1) {
        left: -5%;
      }
      &:nth-child(2) {
        left: 30%;
        transition-delay: 60ms;
      }
      &:nth-child(3) {
        left: 66%;
        transition-delay: 25ms;
      }
    }
  }
  &:hover {
    color: black;
    .c-button__blobs {
        border-radius: 25px;;
      div {
        transform: scale(1.4) translateY(0) translateZ(0);
      }
    }
  }
};

/* VIDEO BACKGROUND */

.hero {
  position: relative;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
 
}

.background-video {
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* min-width: auto;
  min-height: 100%; */
  object-fit:cover;
  z-index: 0;
  opacity: 0.2; 
}

.hero-content {
  position: relative;
  z-index: 1;
 /* padding:10% 20% 10% 20%; */
  /* padding: 2rem; */
}


@keyframes fadeInUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.fadeInUp-animation {
  animation: 1.5s fadeInUp;
}


/* ----------------------------------------------DASHBOARD PREVIEW SECTION------------------------------------------------- */

/* BOOTSTRAP CARROUSEL APPROACH */
    .carousel-inner img {
  object-fit: cover;
  max-height: 500px;
  transition: transform 0.4s ease-in-out;
}

.carousel-inner {
  overflow: hidden;
  border-radius: 1.5rem;
}

.carousel-item img:hover {
  transform: scale(1.01);
}

.thumb-img {
  width: 100px;
  height: auto;
  cursor: pointer;
  border-radius: 8px;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.thumb-img:hover,
.thumb-img.active {
  opacity: 1;
  border: 2px solid #0d6efd;
}

/* ----------------------------------------------TAX PREP SECTION -------------------------------------------------- */

@media screen and (min-width: 1020px) {

.sm-screen{
display: none;
}
}

@media screen and (max-width: 1020px) {

.lg-screen{
display: none;
}
}

/* ----------------------------------------------PRICING SECTION -------------------------------------------------- */

.pricecard1{
    padding:0% 5%;
}

.pricecard{
    color: white;
 background: #0a0000;
background: linear-gradient(186deg, rgba(10, 0, 0, 1) 0%, rgba(14, 41, 37, 1) 100%);
}


.fade-in-section {
  opacity: 0;
  transform: translateY(20vh);
  visibility: hidden;
  transition: opacity 0.6s ease-out, transform 1.2s ease-out;
  will-change: opacity, visibility;
}
.fade-in-section.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
}

    /* Bounce animation for Most Popular badge */
    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-5px);
      }
    }
    .badge-bounce {
      animation: bounce 2s infinite;
    }


    /* effect button */
:root {
  --transparent: oklch(0 0 0 / 0%);
  --purple-100: oklch(0.86 0.08 166.27);
  --purple-200: oklch(0.82 0.06 153.05);
  --purple-300: oklch(0.71 0.12 148.74);
  --purple-400: oklch(0.61 0.18 155.5);
  --purple-500: oklch(0.5 0.21 144.53);
  --purple-600: oklch(0.3555 0.0714 145.59);
  --purple-800: oklch(0.2274 0.026 152.85);
  --purple-900: oklch(0.1229 0 159.88);
  --purple-900: oklch(0.1229 0 159.88);
}


.center {
  display: grid;
  height: inherit;
  place-items: center;
}

.button {
  position: relative;
  z-index: 1;
  background: var(--purple-900);
  border: 2px solid;
  border-color: var(--purple-400);
  color: var(--purple-300);
  padding: 0.75rem 1rem;
  text-decoration: none;
  transition: 250ms ease-in-out;
  transition-property: all;
  border-radius: 25px;
}

.button:hover,
.button:focus {
  color: var(--purple-200);
  background-color: var(--purple-800);
  transform: scale(1.1);
}

.text {
  filter: drop-shadow(0 0 1px currentcolor);
}

.button:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.6;
  border-radius: inherit;
  box-shadow: 0 0 1em 0.5em var(--purple-300);
  transition: 250ms ease-in-out;
  transition-property: opacity;
}

.button:hover::after,
.button:focus::after {
  opacity: 0.6;
}

/* ----------------------------------------------HEADER SECTION------------------------------------------------- */

/* NAVIGATION BAR */

  /* Override Bootstrap dark navbar to force white text */
  /* .navbar-dark .navbar-nav .nav-link,
  .navbar-dark .navbar-nav .dropdown-toggle,
  .navbar-dark .dropdown-menu a.dropdown-item {
    color: white !important;
  } */

  /* Hover effect: lighten text on hover */
  /* .navbar-dark .navbar-nav .nav-link:hover,
  .navbar-dark .navbar-nav .dropdown-toggle:hover,
  .navbar-dark .dropdown-menu a.dropdown-item:hover {
    color: #ddd !important;
    background-color: transparent !important;} 
   */


/* ----------------------------------------------signup SECTION------------------------------------------------- */

.formbg{
  background: #092014;
background: linear-gradient(305deg, rgba(9, 32, 20, 1) 15%, rgba(4, 9, 7, 1) 100%);
}

.formbg2{
background: #092014;
background: radial-gradient(circle, rgba(9, 32, 20, 1) 4%, rgba(4, 9, 7, 1) 100%);
}

.forminput{
background: #dbdbdb;
background: linear-gradient(55deg, rgba(219, 219, 219, 1) 48%, rgba(39, 46, 44, 1) 100%);
/* background: #848a85;
background: linear-gradient(55deg, rgba(132, 138, 133, 1) 4%, rgba(39, 46, 44, 1) 100%); */
color: white;
}

.form-label{
  color: gainsboro;
}






/* ------------------------------------------------------------------------------------------------------------ */
/* ----------------------------------------------USER INTERFACE SECTION------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------ */
