body {
  font-family: "Lexend", sans-serif;
  color: #fff !important;
  background-color: #000 !important;
  /* background: url("../images/freepik__assistant__44363.png") no-repeat center center / cover; */
}

header {
  position: absolute;
  z-index: 100;
  width: 100%;
}

nav{
  margin-right: 150px;
}

.banner {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
 
  overflow: hidden;
}

a.nav-link {
    font-family: "Manrope";
    color: white !important;
    letter-spacing: -1px;
}


.banner img{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      animation: colorShift 6s ease-in-out infinite;
   
}



h1.title {
    display: inline;
    font-family: "Manrope";
    font-size: 100px !important;
    text-transform: capitalize;
    font-weight: 700 !important;
    letter-spacing: -7.8px;
    position: absolute;
    left: 50%; 
    top: 33%; 
    transform: translate(-50%, -33%); 
    color: white !important;
    white-space: nowrap;
    overflow: hidden;
    border-right: 4px solid #d616ff;
    width: 0;
    animation: typing 6s steps(12, end) infinite,
             blink 0.7s step-end infinite;
}

.stay-tune{
  border: 1px solid #D600FF;
  padding: 5px 20px;
  border-radius: 50px;
}

p.future {
    width: max-content;
    margin: 0 auto;
    font-size:20px;
    border: 1px solid #F700FF;
    border-radius: 50px;
    padding-left: 40px;
    padding-bottom: 12px;
    padding-top: 12px;
    
}

p.future span{
   background: #D600FF;
   padding: 15px 30px;
   border-radius: 50px;
   margin-left: 10px;
}

.banner .col-12{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  gap: 20px;
  padding-bottom: 50px;
}

.banner p,
.banner span{
 position: relative;
 z-index: 10;
}

@keyframes colorShift {
  0% {
    filter: brightness(1) hue-rotate(0deg);
  }
  25% {
    filter: brightness(1.1) hue-rotate(10deg);
  }
  50% {
    filter: brightness(1.2) hue-rotate(20deg);
  }
  75% {
    filter: brightness(1.1) hue-rotate(10deg);
  }
  100% {
    filter: brightness(1) hue-rotate(0deg);
  }
}


@keyframes typing {
  0%   { width: 0ch }
  40%  { width: 9ch } 
  60%  { width: 9ch }
  100% { width: 0ch }
}

@keyframes blink {
  50% { border-color: transparent }
}


@media(max-width: 767px){

    .navbar-brand img{
        height: 80px !important;
    }
  
    
    
    
  h1.title {

font-size: 60px !important;

position: unset;

left: unset;

top: unset;

transform: translate(0, 0);
}

nav{
  display: none;
}




.banner,
.banner .col-12{
  min-height: 90vh;

}




p.future {
   
    font-size:16px;
 
    padding-left: 0px;
     width: 100%;
       padding-bottom: 0px;
       border: none;
    
  
  
    
}


p.future span{padding: 10px 20px;margin-left: 5px;margin: 0 auto;margin-top: 15px;display:block;width: max-content;}


}