body{
}

.bg-darkblue{	
	background-color: #141d73;

}
.bg-gradient1{
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(45,117,5,1) 0%, rgba(34,143,166,1) 100%);
}


.bg-gradient2{
background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
}

li a{
font-weight: bold;

}

li a:hover{
   color: red;
   border-bottom: 3px solid red;
   
   }


.borderhov {
  width:30%;
  margin-left: 40%;
  margin-right: 40%;
  border-bottom: 3px solid white;
}



.hover-fold {
  background: #e8c63d;
  border: 5px white solid;
  height: 400px;
  margin: 10px auto;
  -moz-perspective: 1500;
  -webkit-perspective: 1500;
  perspective: 1500;
  position: relative;
  width: 300px;
}
.hover-fold h2 {
  border-bottom: 1px solid #333;
  margin: 0 40px;
  padding: 20px 0 2px;
}
.hover-fold .top {
  height: 50%;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 10;
}
.hover-fold .top .face {
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}
.hover-fold:hover .top {
  -moz-transform: rotateX(-180deg);
  -ms-transform: rotateX(-180deg);
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}
.hover-fold .front {
 background-image: url(Assets/Images/webdesign-card-1.jpg);
  height: 100%;
  /*has to be 100% of .top */
  width: 100%;
}
.hover-fold .back {
  background: #e8c63d;
  height: 100%;
  /*has to be 100% of .top */
  padding: 0 40px;
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
  width: 100%;
}
.hover-fold .back p {
  margin: 0;
}
.hover-fold .bottom {
  background-color: white ; bottom;
  height: 50%;
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  z-index: 0;
}
.borderhov {
  width:30%;
  margin-left: 40%;
  margin-right: 40%;
  border-bottom: 3px solid white;
}

.borderhov2 {
  width:30%;
  margin-left: 40%;
  margin-right: 40%;
  border-bottom: 3px solid red;
}

.borderhov3 {
  border-left: 5px solid white;
  height: 200px;
  left: 50%;
  top: 50px;
}

/*----------------------------------------*/

.hover-fold1 {
  background: #e8c63d;
  border: 5px white solid;
  height: 400px;
  margin: 10px auto;
  -moz-perspective: 1500;
  -webkit-perspective: 1500;
  perspective: 1500;
  position: relative;
  width: 300px;
}
.hover-fold1 h2 {
  border-bottom: 1px solid #333;
  margin: 0 40px;
  padding: 20px 0 2px;
}
.hover-fold1 .top1 {
  height: 50%;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 10;
}
.hover-fold1 .top1 .face1 {
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}
.hover-fold1:hover .top1 {
  -moz-transform: rotateX(-180deg);
  -ms-transform: rotateX(-180deg);
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}
.hover-fold1 .front1 {
 background-image: url(Assets/Images/web-hosting-poster.png);
  height: 100%;
  /*has to be 100% of .top */
  width: 100%;
}
.hover-fold1 .back1 {
  background: #e8c63d;
  height: 100%;
  /*has to be 100% of .top */
  padding: 0 40px;
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
  width: 100%;
}
.hover-fold1 .back1 p {
  margin: 0;
}
.hover-fold1 .bottom1 {
  background-color: white ; bottom;
  height: 50%;
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  z-index: 0;
}
/*----------------------------------------*/
.hover-fold2 {
  background: #e8c63d;
  border: 5px white solid;
  height: 400px;
  margin: 10px auto;
  -moz-perspective: 1500;
  -webkit-perspective: 1500;
  perspective: 1500;
  position: relative;
  width: 300px;
}
.hover-fold2 h2 {
  border-bottom: 1px solid #333;
  margin: 0 40px;
  padding: 20px 0 2px;
}
.hover-fold2 .top2 {
  height: 50%;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 10;
}
.hover-fold2 .top2 .face2 {
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}
.hover-fold2:hover .top2 {
  -moz-transform: rotateX(-180deg);
  -ms-transform: rotateX(-180deg);
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}
.hover-fold2 .front2 {
 background-image: url(Assets/Images/paymentgateway.png);
  height: 100%;
  /*has to be 100% of .top */
  width: 100%;
}
.hover-fold2 .back2 {
  background: #e8c63d;
  height: 100%;
  /*has to be 100% of .top */
  padding: 0 40px;
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
  width: 100%;
}
.hover-fold2 .back2 p {
  margin: 0;
}
.hover-fold2 .bottom2 {
  background-color: white ; bottom;
  height: 50%;
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  z-index: 0;
}

/*----------------------------------------*/
.hover-fold3 {
  background: #e8c63d;
  border: 5px white solid;
  height: 400px;
  margin: 10px auto;
  -moz-perspective: 1500;
  -webkit-perspective: 1500;
  perspective: 1500;
  position: relative;
  width: 300px;
}
.hover-fold3 h2 {
  border-bottom: 1px solid #333;
  margin: 0 40px;
  padding: 20px 0 2px;
}
.hover-fold3 .top3 {
  height: 50%;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 10;
}
.hover-fold3 .top3 .face3 {
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}
.hover-fold3:hover .top3 {
  -moz-transform: rotateX(-180deg);
  -ms-transform: rotateX(-180deg);
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}
.hover-fold3 .front3 {
 background-image: url(Assets/Images/mobile-app-development.jpg);
  height: 100%;
  /*has to be 100% of .top */
  width: 100%;
}
.hover-fold3 .back3 {
  background: #e8c63d;
  height: 100%;
  /*has to be 100% of .top */
  padding: 0 40px;
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
  width: 100%;
}
.hover-fold3 .back3 p {
  margin: 0;
}
.hover-fold3 .bottom3 {
  background-color: white ; bottom;
  height: 50%;
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  z-index: 0;
}
/*-------------------*/
.fa-icon{
margin-left: 5px;
transition:  1s;

}
.fa-icon:hover{
transform: translateX(15px);
}


 .shadow-sm {
  box-shadow: 0 0.125rem 0.25rem 0 rgba(58, 59, 69, 0.2) !important;
}

.shadow {
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.shadow-none {
  box-shadow: none !important;
}
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 50px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 20px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */

}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/* Style all font awesome icons */
.fasocial {
  padding: 5px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  margin-left: 10px;
}

/* Add a hover effect if you want */
.fasocial:hover {
  opacity: 1;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: white;
  color:#3B5998 ;
  transition:  1s;
}

.fa-facebook:hover {
  transform: translateY(-5px);
  background: #3B5998;
  color: white;
}

/* Twitter */
.fa-twitter {
  background:white ;
  color:#55ACEE ;
  transition:  1s;
}
.fa-twitter:hover {
  transform: translateY(-5px);
  background: #55ACEE;
  color: white;
}