.tutorial-item {
  padding: 20px;
  border-radius: 15px;
  -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
}
.tutorial-item .img-wrap {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 250px;
  flex: 1 0 250px;
  margin-right: 30px;
}
.tutorial-item h3 {
  margin-bottom: 20px;
  font-size: 19px;
}
.tutorial-item h3 a {
  color: #000;
}
.tutorial-item *:last-child {
  margin-bottom: 0;
}

.search-form .form-control {
  border: none;
  background: #f3f3f3 !important;
}
.search-form .form-control:focus {
  background: #e2e2e2 !important;
}

.custom-btn {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1rem !important;
  padding: 8px 18px !important;
}

.heading .caption {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.2rem;
}

.heading h2 {
  font-size: 30px;
  font-weight: 700;
  color: var(--primary-color);
}

.custom-pagination ul li {
  display: inline-block;
}
.custom-pagination ul li a,
.custom-pagination ul li span {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  border-radius: 50%;
  background: #fff;
  text-align: center;
  filter: drop-shadow( 0px 0px 5px #d3d3d3);
  margin-right: 12px;
  margin-bottom: 12px;
}
.custom-pagination ul li > span,
.custom-pagination ul li > .current {
  background: var(--primary-color);
  color: #fff;
}

.box-side {
  padding: 20px;
  border-radius: 4px;
  -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
}
.box-side img {
  margin-bottom: 20px;
}
.box-side h3 {
  margin-bottom: 0;
  font-size: 20px;
}
.box-side h3 a {
  color: #000;
}

.social-item {
  position: relative;
  width: 40px;
  height: 40px;
  background: #fff;
  display: inline-block;
}
.social-item span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.social-item:hover {
  background: var(--primary-color);
  color: #fff;
}

.social-item:hover .icon svg {
  fill: #fff;
}
