body {
  background-color: #fff; }

.nav-socialmedia {
  color: #413e66;
  font-size: 12px;
  text-decoration: none;
  transition: 1s; }

.nav-socialmedia:hover {
  color: #17a2b8; }

.scrolled {
  background: #fff !important;
  transition: background-color 200ms linear; }

#intro {
  width: 100%;
  height: 100vh;
  position: relative;
  background: url(../img/intro-bg.jpg) top left fixed no-repeat; }

#whyChooseus {
  background: url(../img/whyus.jpg) top left fixed no-repeat;
  background-size: cover; }

.header-text {
  color: #413e66;
  font-family: "Open Sans", sans-serif !important; }

.highlight-span {
  color: #17a2b8;
  font-family: "Open Sans", sans-serif !important;
  text-transform: uppercase;
  font-weight: 300; }

#services .card,
.mobile-cards .card {
  height: 500px;
  border-radius: 5px; }

.mobile-cards .card {
  min-width: 270px;
  margin: 5px; }

.display-3 {
  font-size: 3.5rem;
  font-family: "Open Sans", sans-serif; }

.contactbtn {
  position: fixed;
  top: 50%;
  display: block;
  width: 200px;
  left: -150px;
  transition: 0.5s; }

.contactbtn:hover {
  left: -10px; }

#page-header-aboutus, #page-header-webapps, #page-header-mobileapp, #page-header-softwareapp {
  height: 400px;
  background: url("../img/bokeh.jpg");
  background-position: fixed;
  background-repeat: no-repeat;
  color: #fff;
  border-bottom: 1px #eee solid; }

#page-header-webapps {
  background: url(../img/web-banner.jpg); }

#page-header-mobileapp {
  background: url(../img/mobile-app-banner.jpg); }

#page-header-softwareapp {
  background: url(../img/software-apps.jpg); }

.about-img {
  margin-top: -100px; }

#btnContact {
  border-style: solid;
  border-color: black;
  color: white;
  padding: 50px;
  background-size: 200% 200%;
  background-image: linear-gradient(to top, #ffffff 50%, transparent 50%);
  -webkit-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
  -moz-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
  -ms-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
  -o-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
  transition: background-position 300ms, color 300ms ease, border-color 300ms ease; }

#btnContact:hover:hover {
  color: black;
  border-color: #000000;
  background-image: linear-gradient(to top, #fff 51%, transparent 50%);
  background-position: 0 100%;
  -webkit-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
  -moz-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
  -ms-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
  -o-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
  transition: background-position 300ms, color 300ms ease, border-color 300ms ease; }

@media (max-width: 996px) {
  #main-nav {
    background: #fff; }

  #intro {
    height: auto;
    padding: 80px 0 60px 0; }

  #imgslider {
    display: none; }

  .display-3 {
    font-size: 3rem; } }