@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins/Poppins-Regular.ttf');
  font-weight: 400;
}

* {
  font-family: 'Poppins';
}


html,
body {
  margin: 0;
  padding: 0;
  height: 100vh; /* needed for container min-height */
}

a,
a:hover,
a:visited {
	text-decoration: none !important;
	color: black;
}

/* width */
::-webkit-scrollbar {
  width: 2px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #7D61AB; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #7D61AB; 
}

  /*
    Flaticon icon font: Flaticon
    Creation date: 26/11/2019 04:02
    */

@font-face {
  font-family: "Flaticon";
  src: url("fonts/Flaticon/Flaticon.eot");
  src: url("fonts/Flaticon/Flaticon.eot?#iefix") format("embedded-opentype"),
       url("fonts/Flaticon/Flaticon.woff2") format("woff2"),
       url("fonts/Flaticon/Flaticon.woff") format("woff"),
       url("fonts/Flaticon/Flaticon.ttf") format("truetype"),
       url("fonts/Flaticon/Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("fonts/Flaticon/Flaticon.svg#Flaticon") format("svg");
  }
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
  font-family: Flaticon;
        font-size: 20px;
font-style: normal;
margin-left: 20px;
}

.flaticon-android:before { content: "\f100"; }
.flaticon-web-programming:before { content: "\f101"; }
.flaticon-paint-palette:before { content: "\f102"; }


.h-400 {
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contain {
  background: url('../../mookaps_bg_2.png'); 
  background-size:contain; 
  position: relative;
  height: auto !important;
  min-height: 100vh;
  padding: 40px 10%; 
}

.contain img {
  margin-top: 15%;
}

.contact {
  z-index: 999;
  position: absolute;
  right: 10px;
  top: 10px;
  font-style: bold;
  background-color: rgba(0, 0, 0, .6);
  padding: 5px 10px;
  border-radius: 20px;
  color: #FFFFFF;
  cursor: pointer;
}

.pointer {
  cursor: pointer;
}

.img-profile {
  width: 80%;
  object-fit: cover;
  margin-top: 0px !important;
}

.lh-15 {
  line-height: 10px;
}

.font-14 {
  font-size: 14px;
}

.font-28 {
  font-size: 28px;
}

.font-44 {
  font-size: 44px;
}

.rd-5 {
  border-radius: 10px;
}


.linear-bg {
  background-image: linear-gradient(to right, #F0F0F0, #EEECEC);
}

.timeline {
  border-left: 2px solid #F0F0F0;
  padding-left: 10px;
  position: relative;
}

.timeline .timeline-item {
  position: relative;
  margin-left: 5px;
  margin-bottom: 10px;
  font-size: 14px;
}

.timeline .circle {
  border-radius: 150px;
  border: 2px solid #7D61AB;
  background-color: #FFFFFF;
  height: 8px;
  width: 8px;
  position: absolute;
  left: -20px;
  top: 6px;
}

.timeline .timeline-header {
  display: flex;
  flex-direction: row;
}

.timeline .timeline-header .timeline-icon {
  height: 40px !important;
  width: 40px !important;
  background-color: #7D61AB;
  border-radius: 150px;
  margin-left: -30px;
  margin-top: -10px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.timeline .timeline-header .timeline-icon img {
  height: 25px;
  width: 25px;
  object-fit: contain;
  margin-top: -3px;
}

.timeline .timeline-header .icon-desc {
  padding-left: 15px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.timeline-list {
  margin-left: -25px;
  font-size: 12px;
  text-align: justify;
}

.timeline-title {
  display: flex;
  justify-content: space-between;
}

.bg-white {
  background-color: #FFFFFF !important;
  border-radius: 10px;
  border: 1px solid #CCCCCC;
}

a.bg-white:hover, a.bg-white:focus,
button.bg-white:hover,
button.bg-white:focus {
  background-color: #dae0e5 !important;
}

.nav-home {
  background-color: #7D61AB;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.5rem 1rem;
  height: 100%;
  max-height: 61px;
  border-radius: 10px 0px 0px 10px;
  justify-content: center;
  display: flex;
  align-items: center;
}

.nav-home i {
  font-size: 28px;
  color: #FFFFFF;
}

.btn-mookaps,
.btn-mookaps:focus,
.btn-mookaps:visited,
.btn-mookaps:active {
  background-color: #7D61AB;
  border: 1px solid #7D61AB;
  border-radius: 20px;
  color: #FFFFFF;
  padding: 5px 25px;
  position: relative;
}

.btn-mookaps:hover {
  color: #7D61AB;
  background-color: #FFFFFF;
}

.btn-hire {
  margin-left: auto !important;
  margin-right: -20px !important;
}

.btn-hire i {
  width: 30px;
  height: 30px;
  border-radius: 100px;
  background-color: #FFFFFF;
  color: #7D61AB;
  position: absolute;
  right: 2px;
  top: 2px;
  padding: 7px;
}

.nav-link {
  cursor: pointer !important;
}

.nav-item {
  border-bottom: 1px solid transparent !important;
}

.nav-item.active {
  font-weight: bold;
  color: #7D61AB;
  border-bottom: 1px solid #7D61AB !important;
}

.hide {
  display: none;
} 

.animate {
  display: block;
  animation: bounce 1s ease;
}

.r-title {
  border-bottom: 0.2rem solid #7D61AB;
}

@keyframes bounce {
/*  0%, 20%, 50%, 80%, 100% {transform: translateY(-100px);}
*//*  40% {transform: translateY(-30px);}*/
  0% {transform: translateY(-100px);}
  100% {transform: translateY(0);}
}


.service .icon i:before {
  font-size: 44px;
  margin-left: 0;
}

.service .title {
  font-size: 16px;
  font-weight: bold;
}

.service .desc {
  margin-top: 10px;
  font-size: 12px;
  line-height: 17px;
}

.client {
  background: #fff;
  border-radius: 8px;
  width: 100%;    
  padding: 5px 16px 26px 16px;
}

.client img {
  width: 100%;
}

#filter-menu {
  margin-top: 20px;
  list-style: none;
  margin-left: -25px;
}

#filter-menu li {
  font-size: 14px;
  color: #787878;
  cursor: pointer;
  float: left;
  margin-right: 15px;
}

#filter-menu li.active {
  color: #7D61AB;
  font-weight: bold;
}

.portfolio-item {
  cursor: pointer;
}

.portfolio-item .title{
  font-size: 14px;
  color: #000;
}

.portfolio-item .info{
  font-size: 13px;
  color: #989898;
  line-height: 18px;
  display: block;
} 

.no-border {
  border: none;
}

@media screen and (max-width: 600px) {

  .contain {
    background: url('../../mookaps_bg_2.png'); 
    background-size: cover; 
    position: relative;
    height: auto !important;
    min-height: 100vh;
    padding: 40px 0px; 
  }

  .navbar .container .nav-center,
  .navbar .container ul {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
  }

  .navbar .container ul li {
    border-bottom: 1px solid #CCCCCC;
    width: 100%;
    text-align: center;
  }

  .nav-center .ml-auto {
    margin-top: 10px;
    margin-left: 0px !important;
    text-align: center;
  }

  .btn-hire {
    justify-content: center;
    display: flex;
  }

}