/* CSS for slider animation */
.dc-slider {
  overflow: visible;
  background: #fff;
}

.dc-slider .dcs-slider-wrapper {
  position: relative;
}

.dc-slider h5 {
  font-size: 22px;
  line-height: 33px;
}

.dc-slider .bullets,
.dc-slider li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.dc-slider .bullets {
  position: relative;
  bottom: -36px;
 
}


.dc-slider .bullets li {
  width: 16px;
  height: 16px;
  background-color:  #44C8F4;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

.dc-slider .bullets li:not(:last-child) {
  margin-right: 12px;
}

.dc-slider .bullets .dcs-image {
  background-color: #42c7f3;
  border-radius: 24px 125px 24px 125px;
  height: 400px;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
}



.dc-slider ul::after {
  content: "";
  display: block;
  clear: both;
}

.dc-slider .bullets li.active {
  background-color:  #E0922F;
}

.dc-slider .slider-message-v2 h2,
.slider-message-v2 p {
  display: inline-block;
  vertical-align: middle;
}

.dc-slider .slider-message-v2 p {
  max-width: 192px;
  margin-left: 24px;
}

#progress {
  position: absolute;
  left: 60px;
  top: 168px;
  transform: rotate(30deg);
}

.dc-slider svg {
  height: 200px;
  margin: auto;
  display: block;
}

.dc-slider path {
  stroke-linecap: round;
  stroke-width: 16;
}

.dc-slider path.grey {
  stroke: #e7e7e8;
}

.leaving-span {
  animation: moveRightThenLeftImage 1.5s ease forwards;
  animation-delay: .2s;
}

.leaving-image {
  animation: moveRightThenLeftImage 1.5s ease forwards;
  animation-delay: .1s;
}

.leaving-svg {
  animation: leavingSvg 1.5s ease forwards;
}

.incoming-span {
  animation: incomingImage 1.5s ease forwards;
  animation-delay: .2s;
}

.incoming-image {
  animation: incomingImage 1.5s ease forwards;
  animation-delay: .1s;
}

.incoming-svg {
  animation: incomingSvg 1.5s ease forwards;
}

.animation-section .huge-div {
  height: 100vh;
  background: black;
}

/* Slider animation part starts*/
.animation-section .slider-container .slider .slider-wrapper .slides {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
}
.animation-section .slider-container .slider .slider-wrapper .slide.active{
    z-index: 0;
    opacity: 1;
}


.animation-section .slider-container .slider .slider-wrapper .slide {
  z-index: -1;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  transition: 0.7s;
  opacity:0 ;
}

.animation-section .slides {
  padding-left: 0px;
}
@media (min-width: 992px) {
.dc-slider .bullets {

  float: left;
}

}
@media (min-width: 1200px) {
 .animation-section .slides {
  padding-left:72px;
}
}


.animation-section .slider-container .slider .slider-dots {
  display: inline-block;
  gap: 20px;  
}

.animation-section .slider-container .slider .slider-dots div {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px solid white;
  cursor: pointer;
}
.animation-section .slider-container .slider .slider-wrapper .slide.active{
    z-index: 0;
}



/* Slider animation part ends*/

.animation-section .scroll-div {
  position: relative;
  overflow: hidden;
}


/* animations */
@keyframes moveRightThenLeftImage {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  25% {
    transform: translateX(50px);
  }

  50% {
    opacity: 1;
  }

  90% {
    opacity: 0;
  }

  100% {
    transform: translateX(-400px);
    opacity: 0;
  }
}

@keyframes leavingSvg {
  0% {
    transform: translateX(0) rotate(30deg);
    /* Keep the initial rotate value here */
    opacity: 1;
  }

  25% {
    transform: translateX(50px) rotate(30deg);
  }

  60% {
    opacity: 1;
  }

  100% {
    transform: translateX(-400px) rotate(30deg);
    /* Final rotate value here */
    opacity: 0;
  }
}

@keyframes incomingImage {
  0% {
    transform: translateX(500px);
    opacity: 0;
  }

  60% {
    transform: translateX(-50px);
    opacity: .5;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes incomingSvg {
  0% {
    transform: translateX(500px) rotate(30deg);
    /* Keep the initial rotate value here */
    opacity: .85;
  }

  60% {
    transform: translateX(-50px) rotate(30deg);
    /* Update the rotate value here */
  }

  100% {
    transform: translateX(0) rotate(30deg);
    /* Final rotate value here */
    opacity: 1;
  }
}

@media (max-width: 991px) {
  .dc-slider div.center-dots-what-we-do {
        transform: translateX(330px) !important;
    }  
}
@media (max-width: 767px) {
  .dc-slider div.center-dots-what-we-do {
        transform: translateX(150px) !important;
    }  
}

@media (min-width: 991px) {
  .dc-slider div.center-dots-what-we-do {
        transform: translateX(240px) !important;
    }  
}

@media (min-width: 1200px) {
  .dc-slider div.center-dots-what-we-do {
        transform: translateX(380px) !important;
    }  
}