*{
  margin: 0;
  padding: 0;
  font-family: "Montserrat";
  box-sizing: border-box;
  text-decoration: none;
}

body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
	background: url("bg.jpg");
	background-position: center;
	background-size: cover;
}

.profile-card{
  width: 400px;
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.225);
  text-align: center;
  border-radius: 12px;
  overflow: hidden;
z-index: 1;
}

.card-header{
    background: url("cardbg.jpg");
	background-position: center;
	background-size: cover;
    padding: 25px 20px;
	
}

.card-footer{
  background: #a01915;
padding: 2px 0px;

}

.pic{
  display: inline-block;
  padding: 8px;
  background: linear-gradient(130deg, #a01915, #000);
  margin: auto;
  border-radius: 50%;
  background-size: 200% 200%;
  animation: animated-gradient 2s linear infinite;
}

@keyframes animated-gradient{
  25%{
    background-position: left bottom;
  }
  50%{
    background-position: right bottom;
  }
  75%{
    background-position: right top;
  }
  100%{
    background-position: left top;
  }
}


.name{
  color: #262626;
  font-size: 28px;
  font-weight:550;
  margin: 80px 0 10px 0;
}

.name2{
  color: #262626;
  font-size: 18px;
  font-weight: 400;
  margin: 0px 0 20px 0;
}
.desc{
  flex-direction: column;
	display: flex;
  justify-content: center;
  margin: -45px 0 0 0;
}

.sm{
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.sm a{
  color: #fff;
  width: 56px;
  font-size: 27px;
  transition: .2s linear;
}

.sm a:hover{
  color: #232323;
}

.contact-btn{
  display: inline-block;
  padding: 12px 20px;
  color: #262626;
  border: 2px solid #A01915;
  border-radius: 6px;
  margin: 12px 0 0 0;
  transition: .3s linear;
	  font-size: 18px;
	font-weight: 400

}

.contact-btn:hover{
  background: #a01915;
  color: #fff;
}

@media all and (max-width: 500px) {
 .profile-card{
  width: 300px;
}
	.desc img{
		width: 14pc;
	}
	.name2{
  font-size: 15px;
}