.heading .heading--desc {
  text-align: justify;
}

.bg-dark {
	/* background-color: #3c4146 !important; */
  background: linear-gradient(250deg, #303335 75%, #81a0ad 75%);
  
  /* #caaeaf #3c4146  */
}

/*

.hero {
	height        : 800px;
	padding-top   : 0;
	padding-bottom: 0;
}

.hero .hero-content {
	height: 800px;
}
*/
.hero .row-content {
	padding-top: 30px;
}

body {
  font-family   : "Jost", serif;
}

p {
	color      : #494949;
	font-size  : 13px;
	font-weight: 400;
	line-height: 22px;
  font-family   : "Jost", serif;
}

.hltext {
  color: #ec4043;
}

.hero .hero-holder img {
  border: 5px solid #ffffff; 
  box-shadow: 1.8px 3.5px 3.5px hsl(0deg 0% 0% / 0.45);
}

.hero .hero-bio {
	color        : #ffffff;
	opacity      : 1;
	font-family  : "Jost", serif;
	font-size    : 30px;
	font-weight  : 400;
	line-height  : 32px;
	margin-bottom: 47px;
}

.hero .hero-headline {
	color         : #ffffff;
	font-family   : "Jost", serif;
	font-size     : 50px;
	font-weight   : 550;
	line-height   : 60px;
	margin-bottom : 20px;
	text-transform: none;

  text-shadow: 1px 4px 4px rgba(0, 0, 0, 0.75);
  font-variant: small-caps;

}

.typewriter {
	overflow: hidden;
	border-right: .15em solid #c69f67; /* The typwriter cursor */
	margin: 0 auto; /* Gives that scrolling effect as the typing happens */
	white-space: nowrap; /* Keeps the content on a single line */
	animation: 
	typing 3.5s steps(40, end),
	blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
	from { width: 0 }
	to { width: 100% }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
	from, to { border-color: transparent }
	50% { border-color: #c69f67; }
  }

.smaller {
  font-size: 48px;
}

.bigger {
  line-height: 80px;
  font-size: 60px;
}

.demo a {
	font-variant: small-caps;
	font-weight: 600;
	color: #579edd;
}

.heading .heading--title {
	font-family   : "Jost", serif;
	color         : #222222;
	font-size     : 36px;
	font-weight   : 450;
	line-height   : 1;
	margin-bottom : 30px;
	text-transform: none;
}

.heading .heading--desc {
  font-family   : "Jost", serif;
	font-size    : 18px;
	font-weight  : 400;
	line-height  : 24px;
	margin-bottom: 0;
	padding      : 0 30px;
}

.heading--desc a {
	color: #000;
	text-decoration: underline;
	font-variant: small-caps;
}

.heading--desc a:hover {
	color: #579edd;
}

.feature-panel .feature--content h3 {
  font-family   : "Jost", serif;
  text-transform: none;
}

.feature-panel .feature--content {
	font-size: 16px;
	color: #000000;
}

.feature-panel .feature--content p {
	margin-bottom: 10px;
}

.hero .btn {
  width: 240px;
}
.cta .btn {
	width: 240px;
  }

.btn {
	font-size     : 14px;
}

.btn--primary {
	background-color: #c69f67;
	color           : #ffffff;
	border          : none;
}

#banner p {
	text-align: justify;
}

.btn--primary:active,
.btn--primary:focus,
.btn--primary:hover {
	background-color: #579edd;
	color           : #ffffff;
}

.bg-dark .btn--primary:active,
.bg-dark .btn--primary:focus,
.bg-dark .btn--primary:hover {
	background-color: #579edd;
	color           : #ffffff;
}


/*
.hero .hero-holder img {
  max-width: 350px;
  position : relative;
  right    : 0;
  bottom   : 0;
}
*/


::selection {
	background-color: #000000;
	color           : #ffffff;
	text-shadow     : none;
}

.feature .feature--icon {
	color: #2897c3;
}

.banner .feature--icon a {
	color        : #c69f67;
	font-size: 40px;
	line-height  : 1;

}

.banner h3 {
	font-family   : "Jost", serif;
}
.banner p {
	color: #818181;
	font-family   : "Jost", serif;
}


.banner .feature--icon i {
	-webkit-transition: all 0.3s linear;
	-o-transition     : all 0.3s linear;
	transition        : all 0.3s linear;
	display           : inline-block;
}

.banner .feature--icon:hover i {
	-webkit-animation: pulse 0.9s infinite;
	animation        : pulse 0.9s infinite;
}

.cta h3  {
	font-family   : "Jost", serif;
}
.cta .container .wow p  {
	font-family   : "Jost", serif;
	color: #fff;
	opacity: 1;
	font-size: 20px;
}

#avatar {
    /* This image is 687 wide by 1024 tall, similar to your aspect ratio */
    background-image: url('../../assets/images/moh.jpg');
    
    /* make a square container */
    width: 150px;
    height: 150px;

    /* fill the container, preserving aspect ratio, and cropping to fit */
    background-size: cover;

    /* center the image vertically and horizontally */
    background-position: top center;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;
}

.feature {
	padding: 60px 0px;;
}