.hero-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #121212;
}

.whyKonekcia-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #272727;
  height: 2100px;
}

.ourServices-section,
.aboutUs-section {
  position: relative;
  background-color: transparent;
  z-index: 10;
}

.contact-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #121212;
  scroll-margin-top: 100px;
}

.container {
  max-width: 2000px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.bg-element {
  position: absolute;
}

.gray-shape-1 {
  width: 200vw;
  height: 450px;
  top: 200px;
  left: 0;
  transform: translateX(-50%) rotate(-5deg);
  background-color: #272727;
  z-index: 1;
}


/*circulo cinza da esquerda*/

.gray-shape-5 {
  width: 100vh;
  height: 500px;
  border-radius: 1000px;
  background-color: #272727;
  top: 0px;
  left: -680px;
  z-index: 2;
}

/*circulos da direita*/

.gray-shape-6 {
  width: 500px;
  height: 500px;
  border-radius: 1000px;
  background-color: #6e17a8;
  top: -250px;
  right: -250px;
  z-index: 2;
}

.gray-shape-7 {
  width: 1846.08px;
  height: 1846.08px;
  border-radius: 1000px;
  background-color: transparent;
  border: 480px solid #6e17a8;
  top: -922.5px;
  right: -922.5px;
  z-index: 2;
}

.gray-shape-8 {
  width: 1859.08px;
  height: 1859.08px;
  border-radius: 1000px;
  background-color: transparent;
  border: 3px solid #6e17a8;
  top: -922.5px;
  right: -922.5px;
  z-index: 2;
}

.gray-shape-9 {
  width: 1876.08px;
  height: 1876.08px;
  border-radius: 1000px;
  background-color: transparent;
  border: 3px solid #6e17a8;
  top: -922.5px;
  right: -922.5px;
  z-index: 2;
}

/*whyKonekcia-section*/

.gray-shape-2-1 {
  width: 200vw;
  height: 490px;
  top: 150px;
  left: 100px;
  transform: translateX(-50%) rotate(12deg);
  background-color: #1b1b1b;
  z-index: 1;
}

.gray-shape-2-2 {
  width: 200vw;
  height: 70px;
  top: 784px;
  left: 100px;
  transform: translateX(-50%) rotate(12deg);
  background-color: #1b1b1b;
  z-index: 1;
}

.gray-shape-2-3 {
  width: 200vw;
  height: 70px;
  top: 680px;
  left: 100px;
  transform: translateX(-50%) rotate(12deg);
  background-color: #1b1b1b;
  z-index: 1;
}

.bg-line {
  position: absolute;
  background-color: transparent;
  top: 1000px;
  z-index: 1;
  pointer-events: none;
  transform: skewX(50deg);
}

.line-1 {
  width: 200vh;
  height: 400px;
  left: 150px;
  top: 1400px;
  border-left: 80px solid #7a30ff;
  border-bottom: 50px solid #7a30ff;
}

.line-2 {
  width: 200vh;
  height: 550px;
  left: 27px;
  top: 1328px;
  border-left: 80px solid #7a30ff;
  border-bottom: 50px solid #7a30ff;
}

.line-3 {
  width: 200vh;
  height: 540px;
  left: -1px;
  top: 1417px;
  border-left: 80px solid #7a30ff;
  border-bottom: 50px solid #7a30ff;
}

/*====================================*/

.bolha1 {
  position: absolute;
  width: 120px;
  height: 0;
  top: 70%;
  right: 250px;
  z-index: 1;
}

.purple-shape-2-1 {
  width: 700px;
  height: 700px;
  border-radius: 1000px;
  background-color: #6e17a8;
  z-index: 2;
}
.purple-shape-2-2 {
  width: 680px;
  height: 680px;
  right: -580px;
  border-radius: 1000px;
  background-color: #904dbd;
  z-index: 2;
}

/*====================================*/

.bolha2 {
  position: absolute;
  width: 120px;
  height: 0;
  top: 90%;
  right: 500px;
  z-index: 1;
}

.purple-shape-2-3 {
  width: 150px;
  height: 150px;
  border-radius: 1000px;
  background-color: #6e17a8;
  z-index: 2;
}
.purple-shape-2-4 {
  width: 145px;
  height: 145px;
  border-radius: 1000px;
  background-color: #904dbd;
  z-index: 2;
}

/*====================================*/

.bolha3 {
  position: absolute;
  width: 120px;
  height: 0;
  top: 80%;
  right: 580px;
  z-index: 1;
}

.purple-shape-2-5 {
  width: 100px;
  height: 100px;
  border-radius: 1000px;
  background-color: #6e17a8;
  z-index: 2;
}
.purple-shape-2-6 {
  width: 97px;
  height: 97px;
  border-radius: 1000px;
  background-color: #904dbd;
  z-index: 2;
}

/*====================================*/

.bolha4 {
  position: absolute;
  width: 120px;
  height: 0;
  top: 82%;
  right: 380px;
  z-index: 1;
}

.purple-shape-2-7 {
  width: 80px;
  height: 80px;
  border-radius: 1000px;
  background-color: #6e17a8;
  z-index: 2;
}
.purple-shape-2-8 {
  width: 77px;
  height: 77px;
  border-radius: 1000px;
  background-color: #904dbd;
  z-index: 2;
}

/*====================================*/

.bolha5 {
  position: absolute;
  width: 120px;
  height: 0;
  top: 60%;
  right: 100px;
  z-index: 1;
}

.purple-shape-2-9 {
  width: 70px;
  height: 70px;
  border-radius: 1000px;
  background-color: #6e17a8;
  z-index: 2;
}
.purple-shape-2-10 {
  width: 68px;
  height: 68px;
  border-radius: 1000px;
  background-color: #904dbd;
  z-index: 2;
}

/*====================================*/

.bolha6 {
  position: absolute;
  width: 120px;
  height: 0;
  top: 65%;
  right: -8px;
  z-index: 1;
}

.purple-shape-2-11 {
  width: 65px;
  height: 65px;
  border-radius: 1000px;
  background-color: #6e17a8;
  z-index: 2;
}
.purple-shape-2-12 {
  width: 63px;
  height: 63px;
  border-radius: 1000px;
  background-color: #904dbd;
  z-index: 2;
}

/*====================================*/

.gray-circle-1 {
  width: 700px;
  height: 700px;
  border-radius: 1000px;
  background-color: #272727;
  top: -7.8%;
  left: -200px;
  z-index: 2;
}

.gray-circle-2 {
  width: 350px;
  height: 350px;
  border-radius: 1000px;
  background-color: #272727;
  top: -3%;
  left: 320px;
  z-index: 2;
}

.gray-shape3-1 {
  width: 130vw;
  height: 1100px;
  top: 684px;
  left: 50%;
  transform: translateX(-50%) rotate(-12deg);
  background-color: #1b1b1b;
  z-index: 1;
}

.services-about-wrapper {
    position: relative;
    overflow: visible;
    width: 100%;
    background: linear-gradient(
        to bottom, 
        #121212 0%, 
        #121212 35%, 
        #272727 55%, 
        #272727 100%
    );
}

.bolha2-1 {
  position: absolute;
  width: 120px;
  height: 0;
  top: 31%;
  left: -130px;
  z-index: 12;
}
/*OS CIRCULOS QUE FICAM ENCIMA DA ABOUTUS ESTAO AQUIII*/

.purple-shape-3-1 {
  width: 800px;
  height: 800px;
  border-radius: 1000px;
  background-color: #6e17a8;
  z-index: 2;
}
.purple-shape-3-2 {
  width: 777px;
  height: 777px;
  right: -680px;
  border-radius: 1000px;
  background-color: #904dbd;
  z-index: 2;
}

.bolha2-2 {
  position: absolute;
  width: 120px;
  height: 0;
  top: 36%;
  right: 790px;
  z-index: 13;
}

.purple-shape-3-3 {
  width: 500px;
  height: 500px;
  border-radius: 1000px;
  background-color: #6e17a8;
  z-index: 2;
}
.purple-shape-3-4 {
  width: 485px;
  height: 485px;
  right: -380px;
  top: 10px;
  border-radius: 1000px;
  background-color: #904dbd;
  z-index: 2;
}

.bolha2-3 {
  position: absolute;
  width: 120px;
  height: 0;
  top: 31%;
  right: 450px;
  z-index: 11;
}

.purple-shape-3-5 {
  width: 690px;
  height: 690px;
  border-radius: 1000px;
  background-color: #6e17a8;
  z-index: 2;
}
.purple-shape-3-6 {
  width: 670px;
  height: 670px;
  left: 0px;
  top: 10px;
  border-radius: 1000px;
  background-color: #904dbd;
  z-index: 2;
}

/*OS CIRCULOS QUE FICAM ENCIMA DA ABOUTUS TERMINAM AQUIII*/

.gray-shape4-1 {
  width: 100vw;
  left: 50%;
  height: 60px;
  top: 60%;
  transform: translateX(-50%) rotate(6deg);
  background-color: #1b1b1b;
  z-index: 1;
}
.gray-shape4-2 {
  width: 100vw;
  left: 50%;
  height: 60px;
  top: 63%;
  transform: translateX(-50%) rotate(6deg);
  background-color: #1b1b1b;
  z-index: 1;
}
.gray-shape4-3 {
  width: 100vw;
  left: 50%;
  height: 60px;
  top: 69%;
  transform: translateX(-50%) rotate(6deg);
  background-color: #1b1b1b;
  z-index: 1;
}
.gray-shape4-4 {
  width: 100vw;
  left: 50%;
  height: 60px;
  top: 66%  ;
  transform: translateX(-50%) rotate(6deg);
  background-color: #1b1b1b;
  z-index: 1;
}

.gray-shape4-5 {
  width: 110Vw;
  height: 350px;
  top: 84%;
  left: 50%;
  transform: translateX(-50%) rotate(-12deg);
  background-color: #1b1b1b;
  z-index: 1;
}

.gray-circle-3 {
  width: 850px;
  height: 850px;
  border-radius: 1000px;
  background-color: #272727;
  bottom: 390px;
  left: -190px;
  z-index: 2;
}
.gray-circle-4 {
  width: 190px;
  height: 190px;
  border-radius: 1000px;
  background-color: #272727;
  bottom: 190px;
  left: 220px;
  z-index: 2;
}
.gray-circle-5 {
  width: 120px;
  height: 120px;
  border-radius: 1000px;
  background-color: #272727;
  bottom: 260px;
  left: 51px;
  z-index: 2;
}
.gray-circle-6 {
  width: 150px;
  height: 150px;
  border-radius: 1000px;
  background-color: #272727;
  bottom: 820px;
  left: 700px;
  z-index: 2;
}
.gray-circle-7 {
  width: 90px;
  height: 90px;
  border-radius: 1000px;
  background-color: #272727;
  bottom: 690px;
  left: 750px;
  z-index: 2;
}