@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css");

purp {
  color: #f6a4ff;
}

#gradient-end{
  padding-top: 25px;
  background: linear-gradient(0deg, rgba(35, 22, 64, 0.05) 0%, rgba(46, 43, 64, 0.5) 23%, rgba(46, 43, 64, 0.8) 53%,  #2e2b40 80%);
  position: relative;
}

#hero-button{
  background-color: rgba(255, 255, 255, 0);
  text-decoration:none;
  border-style: solid;
  width: 15%;
  padding-top: 23px;
  padding-right: 30px;
  padding-bottom: 23px;
  padding-left: 30px;
  background-color: rgba(0, 0, 0, 0.62);
  background-size: 86px;
  border-style: solid;
  border-width: 2px;
  border-color: rgba(246, 164, 255, 1);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;border-width: 2px;
  transition: width 1s height 1s;
}

#hero-button:hover{
    transform: scale(1.05);
}

.hero-btn-text{
  color:#fcfcfc;
  text-decoration:none;
}

.bubbly-button:hover{
    transform: scale(1.02);
}

.bubbly-button {
  display: inline-block;
  font-size: 1em;
  padding: 1em 2em;
  -webkit-appearance: none;
  appearance: none;
  background-color: #b200ab;
  color: #fff;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  position: absolute;
  bottom: 25px;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}
.bubbly-button:focus {
  outline: 0;
}
.bubbly-button:before, .bubbly-button:after {
  content: "";
  display: block;
  width: 140%;
  height: 100%;
  left: -20%;
  z-index: -1000;
  transition: all ease-in-out 0.5s;
  background-repeat: no-repeat;
}
.bubbly-button:before {
  display: none;
  top: -75%;
  background-image: radial-gradient(circle, #b200ab 20%, transparent 20%), radial-gradient(circle, transparent 20%, #b200ab 20%, transparent 30%), radial-gradient(circle, #b200ab 20%, transparent 20%), radial-gradient(circle, #b200ab 20%, transparent 20%), radial-gradient(circle, transparent 10%, #b200ab 15%, transparent 20%), radial-gradient(circle, #b200ab 20%, transparent 20%), radial-gradient(circle, #b200ab 20%, transparent 20%), radial-gradient(circle, #b200ab 20%, transparent 20%), radial-gradient(circle, #b200ab 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
.bubbly-button:after {
  display: none;
  bottom: -75%;
  background-image: radial-gradient(circle, #b200ab 20%, transparent 20%), radial-gradient(circle, #b200ab 20%, transparent 20%), radial-gradient(circle, transparent 10%, #b200ab 15%, transparent 20%), radial-gradient(circle, #b200ab 20%, transparent 20%), radial-gradient(circle, #b200ab 20%, transparent 20%), radial-gradient(circle, #b200ab 20%, transparent 20%), radial-gradient(circle, #b200ab 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.bubbly-button:active {
  transform: scale(0.9);
  background-color: #990093;
  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
.bubbly-button.animate:before {
  display: block;
  animation: topBubbles ease-in-out 0.75s forwards;
}
.bubbly-button.animate:after {
  display: block;
  animation: bottomBubbles ease-in-out 0.75s forwards;
}

@keyframes topBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
@keyframes bottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
  }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
  }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
body {
    width:100vw;
  overflow-x: hidden;
}

.bg-dark {
  background-color: #0e0e0e !important;
}

.nav-item a {
  color: white;
  font-size: 18px;
  font-weight: bold;
}

main {
  width: 100vw;
  color: white;
  z-index: 99;
  position: absolute;
  width: 100%;
  margin: 0px auto;
  padding: 120px 0px;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
}

html, body {
  margin: 0;
  background: #231640;
  font-family: "Raleway", sans-serif !important;
}

#hero-text {
  position: relative;
  height: 70vh;
  top:10vh;
  left: 5%;
  color: white;
  width: 90vw;
}

#hero-text h1 {
  font-weight: 800;
}

#hero-text h3 {
  font-weight: 500;
}

#hero-text p {
  font-weight: 200;
}

#one-stop-shop {
  position: relative;
  top: 0%;
  border-radius: 20px;
}
#one-stop-shop h1 {
  font-weight: bold;
}
#one-stop-shop .text-container h1 {
  font-size: 26px;
}
#one-stop-shop .text-container2 h1 {
  font-size: 23px;
}
#one-stop-shop .main-card {
  border: solid #970097;
  background: linear-gradient(45deg, rgba(178, 0, 171, 0.27) 0%, rgba(41, 0, 39, 0.5) 45%, rgba(0, 0, 0, 0.8) 100%);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(116, 24, 115, 0.3);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding-top: 6px;
  color: white;
  /*transition: width 1s height 1s;*/
  justify-content: space-around;
  height: 290px;
}

#one-stop-shop .main-card:hover {
   transform: scale(1.03);
}

#one-stop-shop .main-card p {
  font-size: 12;
}

.gradient-start {
  background: #231640;
  background: linear-gradient(183deg, rgba(35, 22, 64, 0.05) 0%, rgba(46, 43, 64, 0.5) 23%, rgba(46, 43, 64, 0.6) 25%, rgba(46, 43, 64, 0.7) 30%, rgba(46, 43, 64, 0.8) 50%, rgba(46, 43, 64, 0.85) 55%, rgba(46, 43, 64, 0.9) 60%, rgba(46, 43, 64, 0.9) 60%, rgba(46, 43, 64, 0.95) 65%, #2e2b40 75%);
}

#clientele {
  padding-top: 50px;
  background: #231640;
  background: linear-gradient(180deg, rgba(35, 22, 64, 0.05) 0%, rgba(46, 43, 64, 0.5) 20%, rgba(46, 43, 64, 0.6) 25%, rgba(46, 43, 64, 0.7) 30%, rgba(46, 43, 64, 0.8) 50%, rgba(46, 43, 64, 0.85) 55%, rgba(46, 43, 64, 0.9) 60%, rgba(46, 43, 64, 0.9) 60%, rgba(46, 43, 64, 0.95) 65%, #2e2b40 75%);
  border-radius: 15px;
  position: relative;
}

.scrolled-down {
  transform: translateY(-100%);
  transition: all 0.3s ease-in-out;
}

.scrolled-up {
  transform: translateY(0);
  transition: all 0.3s ease-in-out;
}

.portfolio-video{
  max-width:100%;
  border-radius:10px
}

.in-action .full-carousel{
    box-shadow: inset 0px 0px 65px -5px rgba(204, 2, 207, 1);
    background: rgba(0,2,0,0.67)
}

.carousel1{
    // box-shadow: inset 0px 0px 65px -5px rgba(204, 2, 207, 1);
    padding: 5px;
    padding-left: 0px ;
    padding-right: 0px;
}

.carousel2{
    // box-shadow: inset 0px 0px 65px -5px rgba(204, 2, 207, 1);
    padding: 5px;
    padding-left: 0px ;
    padding-right: 0px;
}
.carousel1 img{
    object-fit: cover;
    height: 245px;
    max-width: 100%;
}


.carousel2 img{
    object-fit: cover;
    width: 100%;
    height: 400px;
}

.carousel10 img{
    object-fit: cover;
    width: 100%;
    height: 400px;
}
.carousel22{
    // box-shadow: inset 0px 0px 65px -5px rgba(204, 2, 207, 1);
    padding: 5px;
    padding-left: 0px ;
    padding-right: 0px;
}
.carousel22 img{
    object-fit: cover;
    margin-bottom:2px;
    width: 100%;
    height: 122px;
}

.carousel10{
    // box-shadow: inset 0px 0px 65px -5px rgba(204, 2, 207, 1);
    padding: 5px;
    padding-left: 0px ;
    padding-right: 0px;
}


#clients{
  padding-top: 25px;
  padding-bottom: 25px;
  background: #2e2b40;
  position: relative;
}

.item{
  height:75px;
}

.item img{
  height:100%;
  object-fit:cover;
}


.purple-btn{
  background-color: #f6a4ff !important;
  color:black !important;
  font-weight:bold !important;
  transition: width 1s height 1s;
}

.purple-btn{
    transform: scale(1.03);
}

.fab{
  color:white;
}


.main-card {
  border: solid #970097;
  background: linear-gradient(45deg, rgba(178, 0, 171, 0.27) 0%, rgba(41, 0, 39, 0.5) 45%, rgba(0, 0, 0, 0.8) 100%);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(116, 24, 115, 0.3);
  padding-top: 6px;
  color: white;
  text-decoration:none;
  transition: width 1s height 1s;
}

.main-card:hover {
   transform: scale(1.03);
   color:white;
}


.main-card p {
  font-size: 12;
}

.text-container h1 {
  font-size: 26px;
}

.text-container2 h1 {
  font-size: 23px;
}