.cStudy_sec {
  width: 100%;
  padding-top: 100px; 
  position: relative;
  overflow: hidden;
}
.case_study-template-default.single table {
    background: linear-gradient(to left, #0055b8 0%, #26cad3 100%);
    color: #fff;
}
.cs_slidescontainer {
  height: 700px;
  position: relative;
  transition: all 1s ease-in;
}
.case_study-template-default.single table td{
	padding: 20px;
}
.cStuty_container {
  background-color: #0d0d0d;
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*flex-direction: column;*/
  margin-top: 160px;
  position: relative;
  transition: transform 1s;
}

.cs_slidecontent {
  position: absolute;
  height: 700px;
}
.cStuty_container img {
  position: relative;
  top: -36%;
  /*width: 100%;*/
}


.cs_title {
  position: absolute;
  top: -130px;
  left: 18%;
  color: #ddd;
  font-size: 16px;
  font-family: sans-serif;
}

.cs_content {
  position: absolute;
  width: 800px;
  top: 220px;
  color: #ddd;
}

.cs_content h3 {
  font-size: 23px;
  font-weight: 400;
}


.cs_Arrcontainer {
  display: flex;
  justify-content: center;
   position: relative; 
   top: -120px;
}
.cs_arrow {
  display: flex;
  justify-content: space-between;
  width: 200px;
  /* position: absolute; */
  /* top: -12px; */
}
.cs_arr1 {
  filter: invert(50%);
  cursor: pointer;
  width: 50px;
  height: 50px;
}
.cs_arr2 {
  transform: rotate(180deg);
  filter: invert(50%);
  cursor: pointer;
   width: 50px;
  height: 50px;
}
.cs_arr1:hover,
.cs_arr2:hover {
  filter: invert(70%);
}

/* hover on description */
.csSpan1,
.csSpan2,
.csSpan3 {
  transition: all 0.3s ease-in;
}
.csSpan1:hover,
.csSpan2:hover,
.csSpan3:hover {
  transform: translateY(-1rem);
  color: #ffff;
}

#cs_desc,
#cs_desc2,
#cs_desc3 {
  display: none;
  font-size: 18px;
  width: 800px;
}

/* navigation dots */
.csnavigation_dots {
  display: flex;
  align-items: center;
  height: 32px;
  justify-content: center;
  margin: 10px 0;
}

.cssingle_dot {
  height: 10px;
  width: 10px;
  margin: 0 6px;
  border: 2px solid #000;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: 400ms;
  z-index: 1;
}

.cssingle_dot.active {
  background: #fff;
  height: 18px;
  width: 18px;
}

.csactive {
   width: 1100px; 
  animation-name: zoomout;
  animation-duration: 1.6s;
}

@keyframes zoomout {
  0% {
    width: 100%;
  }

  100% {
    width: 1100px;
  }
}
.csactivereverse {
  animation-name: zoomoutreverse;
  animation-duration: 1.6s;
}

@keyframes zoomoutreverse {
  0% {
    width: 1100px;
  }

  100% {
    width: 100%;
  }
}