:root {
  --navyblue: #3700edf1;
  --logoblue: #002D95;
  --orange: #fe8502;
  --softorange: #e6741d;
  --purple: #9c388d;
  --darkpink: #d4549f;
  --white: #ffffff;
  --black: #000000;

  --blue_to_purple_grad:linear-gradient(100deg, rgb(156 56 141 / 1) 0%,  50%, rgb(69 168 255 / 1) 100%) 0px 0px / 100% 100% no-repeat no-repeat; /* New Background */
  --orange_to_pink_grad: linear-gradient(100deg, rgb(230 116 29) 0%,  50%, rgb(212 84 159) 100%) 0px 0px / 100% 100% no-repeat no-repeat;

  --pink_to_blue_grad: linear-gradient(60deg, #dd04ff 0%,  50%, #2620f6 100%) 0px 0px / 100% 100% no-repeat no-repeat;
  --max-rotation: 15deg;
  --charcaol : #252222;
}


a {
  all: unset;
}


body {
  font-family: Questrial;
  overflow-x: hidden;
  /* cursor: none; */
}


/* -- nav  */
nav {
  display: flex;
  justify-content: space-between;
  height: 74px;
  padding: 0 1em;
  /* background-image: linear-gradient(-45deg, #ffffff 0 40%, transparent 40% 100%); */
  background: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  border-bottom: 1px solid #ae648f;
}

nav div {
  height: 100%;
  align-items: center;
  display: flex;
  /* mix-blend-mode: difference; */
}

.topnav {
  transition: all .1s ease-in-out;
}

.active_nav {
  height: 40px;
  padding: 0 3em;
}

section {
  /* mix-blend-mode: difference; */
}

nav div img  {
  /* height: 50%; */
  height: 100%;
}

.nav-mail {
  right: 1em;
  z-index: 99;
  top: 0;
  height: 100%;
  /* display: grid; */
  flex-direction: row;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: 1fr;
  gap: 1em;
}

.active_nav .fa.fa-envelope {
  border: 1px solid var(--purple);

  border-radius: 75%;
  padding: 0.4em;

  color: #000;
  font-size: 0.8rem;
  cursor: pointer;
} 
nav .fa.fa-envelope {
  /* border: 1px solid black; */
  border: 1px solid var(--purple);

  border-radius: 75%;
  padding: 0.4em;

  color: #000;

  font-size: 1.5em;
  cursor: pointer;
}

.active_nav i.fa-brands.fa-linkedin-in {
  border: 1px solid var(--purple);
  color: #000;
  border-radius: 75%;
  padding: 0.4em;
  font-size: 0.8rem;
}

i.fa-brands.fa-linkedin-in {
  /* color: #022D88; */
  columns: #000;
  font-size: 1.5em;
  cursor: pointer;
  /* border: 1px solid black; */
  border: 1px solid var(--purple);

  border-radius: 75%;
  padding: 0.4em;
}

/* end nav */
.page-wrapper {
  /* padding: 0 2em; */
}

.section {
   padding: 4em 3em 3em 3em; 
  position: relative;
  min-height: 100vh;
  /* min-height: calc(100vh - 40px); */
  overflow: hidden;
}

.section-50 {
  padding: 3em 3em; 
 position: relative;
 min-height: 100vh;
 overflow: hidden;
}

.section-center {
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.hide-mb {
  display: none;
}

/*  
button {
  border: 1px solid;
  background: none;
  padding: 1em;
  height: 100px;
  width: 100px;
  border-radius: 0%;
  transition: all .3s ease-in-out;
  background-color: var(--charcaol);
  border-radius: 16px;
  cursor: none;
 }
 */

button {
  border: 1px solid;
  background: none;
  padding: 1em;
  height: 70px;
  width: 180px;
  border-radius: 0%;
  transition: all .3s ease-in-out;
  border-radius: 49px;
  cursor: none;
  /* color: var(--purple); */
  
  border: 1px solid var(--purple);
}

button:hover {
  /* border-radius: 50%; */
  cursor: pointer;
  /* border: 2px solid var(--purple); */
  /* background-color: transparent; */
  color: var(--white);
  /* background-color: var(--charcaol); */
  /* background-color: #5D47F2; */
  background: #5542CE;
  /* border: 1px solid var(--black); */
} 

/* button:hover {
  border-radius: 50%;
  cursor: pointer;
  color: var(--purple);
  border: 2px solid var(--purple);
  background-color: transparent;
  cursor: none;
}  */

h1, h2, h3 {
  padding: 0;
  margin: 0;
}

h2,h3, h4 {
  padding-bottom: 1em;
}

.row-gap2 {
  grid-row-gap: 2em !important;
}

.vertical-txt {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.padding-1 {
  padding: 1em;
}

.padding-2 {
  padding: 2em;
}

.padding-2 {
  padding: 2em;
}

.lightgrey-bg {
  background: #fbfbfb;
}

.black-bg {
  background-color: var(--black)
}

.white-bg {
  background-color: #fff;
}
.orange-txt {
  color: var(--orange);
}

.orange-bg {
  background: var(--orange)
}

.navyblue-bg {
  background: var(--navyblue);
}

.pinktobluegrag-bg {
  background: var(--pink_to_blue_grad);
}

.bluetopurplegrad-bg {
  background: var(--blue_to_purple_grad);
}

.orangetopinkgrad-bg {
  background: var(--orange_to_pink_grad);
}

.get-started {
  transition: transform .2s; /* Animation */

  cursor: pointer;
}



.get-started:hover {
  transform: scale(1.5);
  background-color: pink;
  color: orange;
}
.orangetopinkgrad-txt {
  background: var(--orange_to_pink_grad);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.get-started {
  background: var(--blue_to_purple_grad);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

/* #welcome-text {
  position: relative;
 --ball1-top: 0px; 
 --ball2-top: 100px; 

} */


#welcome-text {
  position: relative;
  --ball1-top: 100px; 
  --ball2-top: 150px; 
}


#welcome-text .ogo-container {
  display: none;
  position: absolute;
  width: 22vw;
  right: 3vw;
  top: 2vw;
}
/* #welcome-text:before {
 background: url(/images/horizontal.png);
 position: absolute;
 content: "";
 width: 80px;
 height: 80px;
 background: url(/images/horizontal.png);
 background-repeat: no-repeat;
 background-position: 75% 40%;
} */
/* #welcome-text:before {
  position: absolute;
  z-index: 10000;
  content: "";
  height: 220px;
  width: 220px;
  top: var(--ball1-top);
  right: -5em;
  border-radius: 50%;
  background: linear-gradient(100deg,  #002D95 0%,  50%, rgb(212 84 159) 100%) 0px 0px / 100% 100% no-repeat no-repeat;;
}

#welcome-text:after {
  position: absolute;
  z-index: 10000;
  content: "";
  height: 110px;
  width: 110px;
  top: var(--ball2-top);
  right: 1em;
  border-radius: 50%;
  background: linear-gradient(100deg,  #e6741d 0%,  50%, rgb(212 84 159) 100%) 0px 0px / 100% 100% no-repeat no-repeat;;
} */

.getting-started {
  position: relative;
}

.grid-1-col.positions-we-fill-stagger {
  /* border: 10px solid black;
  border-radius: 50%;
  height: 400px;
  width: 400px; */
  justify-content: center;
  align-items: center;
  position: relative;
}

.border-bottom {
  position: relative;
}

.border-bottom:before {
  width: 60%;
  content: "";
  height: 1px;
  /* background-color: black; */
  background-color: #fff;
  position: absolute;
  bottom: 0.7em;
  /* transform: translateX(-50%);
  left: 50%; */
}

.white-txt {
  color: #fff;
}



.charcoal-text-shadow {
  text-shadow: 2px 3px 5px #1f1f1f;
}

.text-gradient {
  background-image: linear-gradient(40deg,#ff0092, var(--logoblue));
  color: #ba01ff;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.black-txt {
  color: #090707;
}

.logoblue-txt {
  color: var(--logoblue);
}

.blue-grid-box {
  background-color: rgb(98 106 161 / 32%);
  background-image: linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
  /* border-radius: 1.5rem; */
  color: white;
  border-radius: 16px 16px 16px 16px;
}

.box-shadow {
  box-shadow: 0 3px 16px rgba(16,16,16,.05);
  padding: 2em;
  border-radius: 0.5rem;
}

/* .box-shadow {
  box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.16);
  border-radius: 16px 16px 16px 16px;
} */


.padding-tb3 {
  padding: 3em 0;
}

.padding-t1 {
  padding-top: 1em;
}

.padding-b1 {
  padding-bottom: 1em;
}

.padding-b1-mb {
  padding-bottom: 1em;
}

.padding-b2-mb {
  padding-bottom: 2em;
}

.padding-b6-mb {
  padding-bottom: 3em;
}

.margin-b2-mb {
  margin-bottom: 2em;
}

.padding-b2 {
  padding-bottom: 2em;
}

.padding-b3 {
  padding-bottom: 3em;
}

.hero {
  min-height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* background: rgb(28,21,67);
  background: linear-gradient(90deg, rgba(28,21,67,1) 0%, rgba(9,9,121,1) 35%, rgba(0,0,0,1) 100%); */
  background: linear-gradient(90deg, rgb(242 240 250) 0%, rgb(251 251 251) 35%, rgb(255 255 255) 100%);
}

.grid-1-col {
  margin: 0 auto;
  display: block;
  gap: 1rem;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: 1fr;
  /* border: 1px solid black; */
  height: 100%;
  width: 100%;
}

.grid-2-col {
  max-width: 1200px;
  margin: 0 auto;
  display: block;
  gap: 7rem;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: 1fr;
  /* border: 1px solid black; */
}

.grid-3-col {
  max-width: 1200px;
  margin: 0 auto;
  display: block;
  gap: 1rem;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: 1fr;
  /* border: 1px solid black; */
}

.grid-4-col {
  max-width: 1200px;
  margin: 0 auto;
  display: block;
  gap: 1rem;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: 1fr;
}

.grid {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  /* border: 1px solid green; */
}

.align-flex-start {
  align-items: flex-start;
}

.justify-flex-start {
  justify-content: flex-start;
}

.justify-flex-center {
  justify-content: center;
}

.flex-end {
  align-items: flex-end;
}

.align-flex-center {
  align-items: center;
}
.gap-2 {
  gap: 2rem;
}
.gap-3 {
  gap: 3rem;
}
.col {
  flex-direction: column;
}

.row {
  flex-direction: row;
}

.row-dt {
  flex-direction: column;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.font-medium {
  font-size: 18px;
  line-height: 16px;
}

.font-xlarge {
  font-size: 52px;
  line-height: 45px;
}

p {
  font-size: 15px;
  line-height: 20px;
  padding: 0;
  margin: 0;
}

.image-wrapper {
  /* display: grid;
  align-items: center;
  justify-content: center; */
  /* min-width: 250px; */
  /* grid-auto-rows: 1fr; */
  position: relative;
  padding: 1em;
  text-align: left;
}

/* img {
  object-fit: cover;
  min-height: 100%;
  width: 100%;
} */

.width-50 {
  width: 50%;
  margin: 0 auto;
  /* border: 1px solid pink; */
}

.flip-tile {
  min-height: 400px;
}



.flip-tile {
  /* background-color: transparent; */
  border: 1px solid var(--purple);
  border-radius: 16px;
  perspective: 1000px;
  transition: background-color 0.5s ease;

}

.flip-tile:hover {
  /* border: 10px solid var(--purple);; */
}

.flip-tile-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-tile:hover .flip-tile-inner {
  transform: rotateY(180deg);
}

.flip-tile-front, .flip-tile-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-tile-front {
  /* background-color: #bbb; */
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flip-tile-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 4em;
}


.dots-white {
  position: absolute;
  /* bottom: 0; */
  padding: 0;
  margin: 0;
  bottom: -2.3em;
  right: 4em;
}
.white-dots {
    height: 10px;
    width: 10px;
    background: white;
    margin: 2em 0;
    border-radius: 50%;
    list-style: none;
}

.dots-black {
  position: absolute;
  /* top: 0; */
  top: -2.3em;

  padding: 0;
  margin: 0;
  right: 4em;

}

.black-dots {
  height: 10px;
  width: 10px;
  background: black;
  margin: 2em 0;
  border-radius: 50%;
  list-style: none;

}

/* .fa-3x {
  height: 50px;
  font-size: 29px;
} */



@media only screen and (min-width: 500px) {
  #welcome-text .ogo-container {
    display: inline;
    width: 50px;
    right: 2em;
    top: 2em;
  }
}
@media only screen and (min-width: 700px) {

  nav {
    padding: 0 3em;
  }
}


@media only screen and (min-width: 900px) {
  #welcome-text .ogo-container {
    width: 124px;
    right: 2em;
    top: 2em;
  }


}

@media only screen and (min-width: 1200px) {
  #welcome-text .ogo-container {
    /* width: 240px; */
    width: 200px;
    right: 2em;
    top: 5em;
  }
}


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

  .image-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2em;
  }

  .flip-tile {
    min-height: 400px;
  }

}



@media only screen and (min-width: 900px) {
  .fa-3x {
    /* font-size: initial; */
  }
  .row-dt {
    flex-direction: row;
  }

  .hide-mb {
    display: inline;
  }


  p {
    line-height: 27px;
    font-size: 21px;
  }


  .border-bottom:before {
    height: 3px;
  }

  .font-xmedium {
    font-size: 2vw;
    line-height: 2.3vw;
  }
  
  .font-medium {
    font-size: 2.5vw;
    line-height: 2.8vw;
  }
  
  .font-large {
    font-size: 6vw;
    line-height: 5.8vw;
  }

  .font-body {
    font-size: 19px;
    line-height: 26px;
  }
  
  .font-xlarge {
    font-size: 7vw;
    line-height: 6vw;
  } 

  h2, h3, h4 {
    padding-bottom: .7em;
  }
  
  .padding-b1-mb {
    padding-bottom: 0;
  }

  .padding-b2-mb {
    padding-bottom: 0;
  }

  .padding-b6-mb {
    padding-bottom: 0;
  }

  .margin-b2-mb {
    margin-bottom: 0;
  }

  .grid-1-col {
    grid-template-columns: repeat(1, 1fr);
    display: grid;

  }

  .grid-2-col {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }

  .grid-3-col {
    grid-template-columns: repeat(3, 1fr);
    display: grid;

  }

  .grid-4-col {
    grid-template-columns: repeat(4, 1fr);
    display: grid;
  }

  .width-50 {
    width:50%;
    margin: 0 auto;
  }

  .page-wrapper {
    padding: 80px 0 0 0;
    
  }
}

/* animation 1 */
.main-text {
  font-size: 7vw;
  letter-spacing: -.01em;
  line-height: 100%;
  margin: 0;
  
  width: 100%;
  color: rgb(182, 182, 182, 0.2);
  /* background: linear-gradient(to right, #3700edf1, #b6b6b6) no-repeat; */
  background: linear-gradient(to right, #3700edf1, #b86892) no-repeat;

  
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 0%;
  transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s;
  

  /* border-bottom: 1px solid #2F2B28; */
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

.secondary-text {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #5542CE;
  color: #0D0D0D;
  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  transform-origin: center;
  transition: all cubic-bezier(.1,.5,.5,1) 0.4s;
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0.25em;
}

.main-text:hover > .secondary-text {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

/* end animation 1 */


/* mouse move color */




.hotspot {
  color: transparent;
  background: radial-gradient(circle at calc((var(--mouse-x) + .5) * 100%), var(--orange), var(--navyblue));
  -webkit-background-clip: text;
  /* transform-style: preserve-3d;
  transform: rotateY(calc(var(--mouse-x) * var(--max-rotation))) rotateX(calc(var(--mouse-y) * var(--max-rotation))); */
  /* font-size: 6vw; */
}


.continue-text {
  position: absolute;
  bottom: 0;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  bottom: 3em;
  left: 0;
}

.what-makes-text-small {
  /* padding-top: 1em; */
}

/*mouse cursor*/
/*
#trailer{
  display: flex;
  justify-content: center;
  align-items: center;
  
  box-sizing: border-box;
  width:30px;
  height: 30px;
  border-radius: 100%;
  border: 2px solid #ffffff;
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  transition: .5s;
  opacity: .5;

  background-size: cover;
  background-color: rgba(245, 153, 6, 0.9);
  background-blend-mode: multiply;

}


.hover{
  width: 60px !important;
  height: 60px !important;
  border: 5px solid #ffffff;

  background-blend-mode: multiply;

}

*/