.sponsor {
  border-radius: 20px;
  box-shadow: 0px 1px 15px 1px #00000029;
  margin: 20px;
}
.spon-img {
  width: auto;
  height: 87px;
}
.sponsor-bg {
  margin-top: 20px;
}
.sliders {
  width: 100%;
}
.sliders input {
  display: none;
}
.spon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 20px !important;
  margin: auto -20px !important;
}
.myCarousel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 250px;
  perspective: 1000px;
  overflow: hidden;
}
.myCarousel .item {
  width: 450px;
  height: 250px;
  padding: 30px;
  border-radius: 5px;
  background-color: #003b74;
  position: absolute;
  top: 0;
  box-sizing: border-box;
  text-align: center;
  transition: transform 0.4s;
  box-shadow: 0 0 10px rgba(109, 109, 109, 0.3);
  user-select: none;
  cursor: pointer;
}
.myCarousel .item img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #fff;
}
.item h3 {
  padding-top: 10px;
  color: #fff;
}
.dots {
  display: flex;
  justify-content: center;
  align-items: center;
}
.dots label {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #174f97;
  margin: 7px;
  transition-duration: 0.2s;
}
#t-1:checked ~ .dots label[for="t-1"],
#t-2:checked ~ .dots label[for="t-2"],
#t-3:checked ~ .dots label[for="t-3"],
#t-4:checked ~ .dots label[for="t-4"],
#t-5:checked ~ .dots label[for="t-5"] {
  transform: scale(2);
  background-color: #003b74;
}
#t-1:checked ~ .dots label[for="t-2"],
#t-2:checked ~ .dots label[for="t-1"],
#t-2:checked ~ .dots label[for="t-3"],
#t-3:checked ~ .dots label[for="t-2"],
#t-3:checked ~ .dots label[for="t-4"],
#t-4:checked ~ .dots label[for="t-3"],
#t-4:checked ~ .dots label[for="t-5"],
#t-5:checked ~ .dots label[for="t-4"] {
  transform: scale(1.5);
}
#t-1:checked ~ .myCarousel label[for="t-3"],
#t-2:checked ~ .myCarousel label[for="t-4"],
#t-3:checked ~ .myCarousel label[for="t-5"],
#t-4:checked ~ .myCarousel label[for="t-1"],
#t-5:checked ~ .myCarousel label[for="t-2"] {
  transform: translate3d(600px, 0, -180px) rotateY(-25deg);
  z-index: 2;
}
#t-1:checked ~ .myCarousel label[for="t-2"],
#t-2:checked ~ .myCarousel label[for="t-3"],
#t-3:checked ~ .myCarousel label[for="t-4"],
#t-4:checked ~ .myCarousel label[for="t-5"],
#t-5:checked ~ .myCarousel label[for="t-1"] {
  transform: translate3d(300px, 0, -90px) rotateY(-15deg);
  z-index: 3;
}
#t-2:checked ~ .myCarousel label[for="t-1"],
#t-3:checked ~ .myCarousel label[for="t-2"],
#t-4:checked ~ .myCarousel label[for="t-3"],
#t-5:checked ~ .myCarousel label[for="t-4"],
#t-1:checked ~ .myCarousel label[for="t-5"] {
  transform: translate3d(-300px, 0, -90px) rotateY(15deg);
  z-index: 3;
}
#t-3:checked ~ .myCarousel label[for="t-1"],
#t-4:checked ~ .myCarousel label[for="t-2"],
#t-5:checked ~ .myCarousel label[for="t-3"],
#t-2:checked ~ .myCarousel label[for="t-5"],
#t-1:checked ~ .myCarousel label[for="t-4"] {
  transform: translate3d(-600px, 0, -180px) rotateY(25deg);
}
#t-1:checked ~ .myCarousel label[for="t-1"],
#t-2:checked ~ .myCarousel label[for="t-2"],
#t-3:checked ~ .myCarousel label[for="t-3"],
#t-4:checked ~ .myCarousel label[for="t-4"],
#t-5:checked ~ .myCarousel label[for="t-4"],
#t-5:checked ~ .myCarousel label[for="t-5"] {
  z-index: 4;
}