.connections-section-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column-reverse;
  
  padding: 0 24px;
}

.orbit-container, .carousel-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.orbit-container {
  min-height: 335px;
}

.carousel-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.icon--1 {
  animation: rotateCounterClockwise 25s linear infinite;
}

.icon--1-counter-rotate {
  animation: rotateClockwise 25s linear infinite;
}

.icon--2 {
  animation: rotateClockwise 20s linear infinite;
}

.icon--2-counter-rotate {
  animation: rotateCounterClockwise 20s linear infinite;
}

.icon--3 {
  animation: rotateCounterClockwise 21s linear infinite;
}

.icon--3-counter-rotate {
  animation: rotateClockwise 21s linear infinite;
}

#carousel-items {
  opacity: 1;
  transition: opacity 0.5s;
  width: 100%;
  
  text-align: center;
}

.item h5 {
  color: #49AFEF;
  text-transform: uppercase;
  font-weight: 700;
  
  font-size: 16px;
  line-height: 21px;
  
  margin-bottom: 12px;
}

.item h1 {
  font-size: 28px;
  line-height: 34px;
  
  margin-bottom: 24px;
}

.item p {
  font-size: 16px;
  line-height: 21px;
}

.hideText {
    opacity: 0 !important;
}

.carousel-container button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 10px;
  border: none;
  
  position: absolute;
}

.carousel-container button img {
  height: 12px;
  width: 8px;
}

.carousel-container button:hover {
  background: #40a6ee !important;
  background-color: #40a6ee !important;
}

.carousel-container button:focus {
  background: #40a6ee !important;
  background-color: #40a6ee !important;
}

.connection-carousel-nav-left {
  transform: rotate(180deg);
  left: 0;
  top: 30px;
}

.connection-carousel-nav-right {
  right: 0;
  top: 30px
}

.middle-icon {
  position: absolute;
  z-index: 4;
  padding: 12px 16px;
  background: white;
  border: 1px solid #93CFF4;
  box-shadow: 0px 100px 80px rgba(139, 197, 255, 0.07), 0px 64.8148px 46.8519px rgba(139, 197, 255, 0.0531481), 0px 38.5185px 25.4815px rgba(139, 197, 255, 0.0425185), 0px 20px 13px rgba(139, 197, 255, 0.035), 0px 8.14815px 6.51852px rgba(139, 197, 255, 0.0274815), 0px 3px 11px rgba(139, 197, 255, 0.29);
}

.middle-icon img {
  height: 36px;
  width: 36px;
}
  
.ring-1 {
  position: absolute;
  z-index: 3  ;
  height: 150px;
  width: 150px;
  background: #E9F7FF;
  box-shadow: 0px 4px 37px rgba(73, 175, 239, 0.36);
}

.ring-2 {
  position: absolute;
  z-index: 2;
  height: 230px;
  width: 230px;
  background: #E9F7FF;
  box-shadow: 0px 0px 50px rgba(147, 207, 244, 0.66);
}

.ring-3 {
  position: absolute;
  z-index: 1;
  height: 300px;
  width: 300px;
  background: #F4FBFF;
  box-shadow: 0px 0px 75px rgba(73, 175, 239, 0.19);
}

.middle-icon, .ring-1, .ring-2, .ring-3 {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 50%;
}

.icon-container-1 {
  position: absolute;
  height: 190px;
  width: 40px;
  top: -15px;
  left: 50%;
  margin-left: -20px;
}

.icon-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: white;
  border: 1px solid #93CFF4;
  box-shadow: 0px 100px 80px rgba(139, 197, 255, 0.07), 0px 64.8148px 46.8519px rgba(139, 197, 255, 0.0531481), 0px 38.5185px 25.4815px rgba(139, 197, 255, 0.0425185), 0px 20px 13px rgba(139, 197, 255, 0.035), 0px 8.14815px 6.51852px rgba(139, 197, 255, 0.0274815), 0px 3px 11px rgba(139, 197, 255, 0.29);
}

.icon-content img {
  height: 24px;
  width: 24px;
}

.icon-container-2 {
  position: absolute;
  height: 270px;
  width: 40px;
  top: -25px;
  left: 50%;
  margin-left: -20px;
}

.icon-container-2:before {
  display: block;
  height: 64px;
  width: 64px;
  border-radius: 50%;
  background: white;
  border: 1px solid #93CFF4;
  box-shadow: 0px 100px 80px rgba(139, 197, 255, 0.07), 0px 64.8148px 46.8519px rgba(139, 197, 255, 0.0531481), 0px 38.5185px 25.4815px rgba(139, 197, 255, 0.0425185), 0px 20px 13px rgba(139, 197, 255, 0.035), 0px 8.14815px 6.51852px rgba(139, 197, 255, 0.0274815), 0px 3px 11px rgba(139, 197, 255, 0.29);
}

@media screen and (min-width: 992px) {
  .connections-section-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  
  .orbit-container {
    min-height: 516px;
  }
  
  .ring-1 {
    height: 205px;
    width: 205px;
  }
  
  .ring-2 {
    height: 315px;
    width: 315px;
  }
  
  .ring-3 {
    height: 425px;
    width: 425px;
  }
  
  #carousel-items {
    width: 70%;
    text-align: left;
  }
  
  .middle-icon {
    padding: 15px;
  }
  
  .middle-icon img {
    height: auto;
    width: auto;
  }
  
  .icon-content {
    width: 64px;
    height: 64px;
  }
  
  .icon-content img {
    height: auto;
    width: auto;
  }
  
  .icon-container-1 {
    position: absolute;
    height: 250px;
    width: 40px;
    top: -25px;
    left: 50%;
    margin-left: -20px;
  }
  
  .icon-container-2 {
    height: 365px;
  }
  
  .connection-carousel-nav-left,
  .connection-carousel-nav-right {
    top: auto;
  }
  
  .carousel-container button {
    padding: 16px 21px;
  }
  
  .carousel-container button img {
    height: auto;
    width: auto;
  }
  
  .item h5 {
    font-size: 18px;
    line-height: 22px;
  }
  
  .item h1 {
    font-size: 36px;
    line-height: 44px;
    
    margin-bottom: 12px;
  }

}



/* Animations */

@keyframes rotateClockwise {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotateCounterClockwise {
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes fadeIn {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes fadeOut {
  100% {
    opacity: rotate(360deg);
  }
}