@import url('https://fonts.googleapis.com/css?family=Poppins|Ubuntu&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

.servicesfatma {
  background: #eee;
  padding-top:30px;
  padding-bottom:30px;
}

.box {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px
}

.our-services {
  margin-top: 75px;
  padding-bottom: 30px;
  padding: 0 60px;
  min-height: 198px;
  text-align: center;
  border-radius: 10px;
  background-color: #fff;
  transition: all .4s ease-in-out;
  box-shadow: 0 0 25px 0 rgba(20, 27, 202, .17)
}

.our-services .icon {
  margin-bottom: -21px;
  transform: translateY(-50%);
  text-align: center
}

.our-services:hover h4,
.our-services:hover p {
  color: #fff
}

.speedup:hover {
  box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
  cursor: pointer;
  /* background-image: linear-gradient(-45deg, #fb0054 0%, #f55b2a 100%) */
  background-color:#add8e6;
}

.settings:hover {
  box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
  cursor: pointer;
  /* background-image: linear-gradient(-45deg, #34b5bf 0%, #210c59 100%) */
  background-color: #d1e8ff;
}

.privacy:hover {
  box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
  cursor: pointer;
  /* background-image: linear-gradient(-45deg, #3615e7 0%, #44a2f6 100%) */
  background-color: 	#87cefa;
}

.backups:hover {
  box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
  cursor: pointer;
  /* background-image: linear-gradient(-45deg, #fc6a0e 0%, #fdb642 100%) */
  background-color: #87cefa;
}

.ssl:hover {
  box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
  cursor: pointer;
  /* background-image: linear-gradient(-45deg, #8d40fb 0%, #5a57fb 100%) */
  background-color: #d1e8ff;
}

.database:hover {
  box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
  cursor: pointer;
  /* background-image: linear-gradient(-45deg, #27b88d 0%, #22dd73 100%) */
  background-color: #add8e6;
}

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
#team {

}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #108d6f;
  border-color: #108d6f;
  box-shadow: none;
  outline: none;
}

.btn-primary {
  color: #fff;
  background-color: #0c00ff;
  border-color: #007b5e;
}

section {
  /* padding: 60px 0; */
}

section .section-title {
  text-align: center;
  color: #0c00ff;
  margin-bottom: 50px;
  text-transform: uppercase;
}

#team .card {
  border: none;
  background: #d1e8ff;
}

.image-flip:hover .backside,
.image-flip.hover .backside {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  border-radius: .25rem;
}

.image-flip:hover .frontside,
.image-flip.hover .frontside {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.mainflip {
  -webkit-transition: 1s;
  -webkit-transform-style: preserve-3d;
  -ms-transition: 1s;
  -moz-transition: 1s;
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transition: 1s;
  transform-style: preserve-3d;
  position: relative;
}

.frontside {
  position: relative;
  -webkit-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  z-index: 2;
  margin-bottom: 30px;
}

.backside {
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

.frontside,
.backside {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 1s;
  -moz-transform-style: preserve-3d;
  -o-transition: 1s;
  -o-transform-style: preserve-3d;
  -ms-transition: 1s;
  -ms-transform-style: preserve-3d;
  transition: 1s;
  transform-style: preserve-3d;
}

.frontside .card,
.backside .card {
  min-height: 312px;
}

.backside .card a {
  font-size: 18px;
  color: #ffffff !important;
}

.frontside .card .card-title,
.backside .card .card-title {
  color: #0c00ff !important;
}

.frontside .card .card-body img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}