@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap");
 * {
	 box-sizing: border-box;
}

 body {
	 color: #2b2c48;
	 font-family: "Jost", sans-serif;
	 background-image: url("bg.jpg");
	 background-repeat: no-repeat;
	 background-size: cover;
	 background-position: center;
	 background-attachment: fixed;
	 min-height: 100vh;
	 display: flex;
	 flex-wrap: wrap;
	 padding: 20px;
   overflow: hidden;
}



 .card {
	 max-width: 340px;
	 margin: auto;
	 overflow-y: auto;
	 position: relative;
	 z-index: 1;
	 overflow-x: hidden;
	 background-color: rgba(255, 255, 255, 1);
	 display: flex;
	 transition: 0.3s;
	 flex-direction: column;
	 border-radius: 10px;
	 box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
}
 .card[data-state="#about"] {
	 height: 450px;
}
 .card[data-state="#about"] .card-main {
	 padding-top: 0;
}
 .card[data-state="#contact"] {
	 height: 430px;
}
 .card[data-state="#experience"] {
	 height: 550px;
}
 .card.is-active .card-header {
	 height: 80px;
}
 .card.is-active .card-cover {
	 height: 100px;
	 top: -50px;
}
 .card.is-active .card-avatar {
	 transform: none;
	 left: 20px;
	 width: 50px;
	 height: 50px;
	 bottom: 10px;
}
 .card.is-active .card-fullname, .card.is-active .card-jobtitle {
	 left: 86px;
	 transform: none;
}
 .card.is-active .card-fullname {
	 bottom: 18px;
	 font-size: 19px;
}
 .card.is-active .card-jobtitle {
	 bottom: 16px;
	 letter-spacing: 1px;
	 font-size: 10px;
}
 .card-header {
	 position: relative;
	 display: flex;
	 height: 200px;
	 flex-shrink: 0;
	 width: 100%;
	 transition: 0.3s;
}
 .card-header * {
	 transition: 0.3s;
}
 .card-cover {
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 height: 160px;
	 top: -20%;
	 left: 0;
	 will-change: top;
	 background-size: cover;
	 background-position: center;
	 filter: blur(30px);
	 transform: scale(1.2);
	 transition: 0.5s;
}
 .card-avatar {
	 width: 100px;
	 height: 100px;
	 box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
	 border-radius: 50%;
	 object-position: center;
	 object-fit: cover;
	 position: absolute;
	 bottom: 0;
	 left: 50%;
	 transform: translateX(-50%) translateY(-64px);
}
 .card-fullname {
	 position: absolute;
	 bottom: 0;
	 font-size: 22px;
	 font-weight: 700;
	 line-height: 15px;
	 text-align: center;
	 white-space: nowrap;
	 transform: translateY(-10px) translateX(-50%);
	 left: 50%;
	 color: #000000;
} .card-fullname span {
	color: #f45be9;
}
 .card-fullname a {
	font-size: 9px;
}
 .card-jobtitle {
	 position: absolute;
   color: #000;
	 bottom: 0;
	 font-size: 11px;
	 white-space: nowrap;
	 font-weight: 500;
	 opacity: 0.7;
	 text-transform: uppercase;
	 letter-spacing: 1.5px;
	 margin: 0;
	 left: 50%;
	 transform: translateX(-50%) translateY(-7px);
}
 .card-main {
	 position: relative;
	 flex: 1;
	 display: flex;
	 padding-top: 10px;
	 flex-direction: column;
}
 .card-subtitle {
	 font-weight: 700;
	 font-size: 13px;
	 margin-bottom: 8px;
	 color: #f45be9;
}
 .card-content {
	 padding: 20px;
}
 .card-desc {
	 line-height: 1.6;
	 color: #636b6f;
	 font-size: 14px;
	 margin: 0;
	 font-weight: 400;
	 font-family: "DM Sans", sans-serif;
}
 .card-social {
	 display: flex;
	 align-items: center;
	 padding: 0 20px;
	 margin-bottom: 30px;
}
 .card-social svg {
	 fill: #f45be9;
	 width: 16px;
	 display: block;
	 transition: 0.3s;
}
 .card-social a {
	 color: #a5a5a5;
	 height: 32px;
	 width: 32px;
	 border-radius: 50%;
	 display: inline-flex;
	 align-items: center;
	 justify-content: center;
	 transition: 0.3s;
	 background-color: rgba(173, 194, 225, 0.05);
	 border-radius: 50%;
	 margin-right: 10px;
}
 .card-social a:hover svg {
	 fill: #a9a9a9;
}
 .card-social a:last-child {
	 margin-right: 0;
}
 .card-buttons {
	 display: flex;
	 background-color: #fff;
	 margin-top: auto;
	 position: sticky;
	 bottom: 0;
	 left: 0;
}
 .card-buttons button {
	 flex: 1 1 auto;
	 user-select: none;
	 background: 0;
	 font-size: 13px;
	 border: 0;
	 padding: 15px 5px;
	 cursor: pointer;
	 color: #f45be9;
	 transition: 0.3s;
	 font-family: "Jost", sans-serif;
	 font-weight: 500;
	 outline: 0;
	 border-bottom: 3px solid transparent;
}
 .card-buttons button.is-active, .card-buttons button:hover {
	 color: #000000;
	 border-bottom: 3px solid #f45be9;
	 background: linear-gradient(to bottom, #f45bea00 0%, #f45bea6a 44%, #f45be9 100%);
}
 .card-section {
	 display: none;
}
 .card-section.is-active {
	 display: block;
	 animation: fadeIn 0.6s both;
}
 @keyframes fadeIn {
	 0% {
		 opacity: 0;
		 transform: translatey(40px);
	}
	 100% {
		 opacity: 1;
	}
}
 .card-timeline {
	 margin-top: 30px;
	 position: relative;
}
 .card-timeline:after {
	 background: linear-gradient(to top, #f45bea00 0%, #f45be9 100%);
	 content: "";
	 left: 42px;
	 width: 2px;
	 top: 0;
	 height: 100%;
	 position: absolute;
	 content: "";
}
 .card-item {
	 position: relative;
	 padding-left: 60px;
	 padding-right: 20px;
	 padding-bottom: 30px;
	 z-index: 1;
}
 .card-item:last-child {
	 padding-bottom: 5px;
}
 .card-item:after {
	 content: attr(data-year);
	 width: 10px;
	 position: absolute;
	 top: 0;
	 left: 37px;
	 width: 8px;
	 height: 8px;
	 line-height: 0.6;
	 border: 2px solid #fff;
	 font-size: 11px;
	 text-indent: -35px;
	 border-radius: 50%;
	 color: rgba(134, 134, 134, 0.7);
	 background: linear-gradient(to bottom, #f45bea00 0%, #f45be9 100%);
}
 .card-item-title {
	 font-weight: 500;
	 font-size: 14px;
	 margin-bottom: 5px;
}



.card-item-title span{
  font-weight: 500;
  font-size: 12px;
  margin-bottom: 5px;
  font-style: italic;
}
 .card-item-desc {
	 font-size: 13px;
	 color: #6f6f7b;
	 line-height: 1.5;
	 font-family: "DM Sans", sans-serif;
}
 .card-contact-wrapper {
	 margin-top: 20px;
}
 .card-contact {
	 display: flex;
	 align-items: center;
	 font-size: 13px;
	 color: #6f6f7b;
	 font-family: "DM Sans", sans-serif;
	 line-height: 1.6;
	 cursor: pointer;
}
 .card-contact + .card-contact {
	 margin-top: 16px;
}
 .card-contact svg {
	 flex-shrink: 0;
	 width: 30px;
	 min-height: 34px;
	 margin-right: 12px;
	 transition: 0.3s;
	 padding-right: 12px;
	 border-right: 1px solid #dfe2ec;
}
 .savebtn {
	 border: 0;
	 outline: none;
	 background: #f45be9;
	 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
	 color: #fff;
	 padding: 12px 16px;
	 width: 100%;
	 border-radius: 5px;
	 margin-top: 25px;
	 cursor: pointer;
	 font-size: 14px;
	 font-weight: 500;
	 font-family: "Jost", sans-serif;
	 transition: 0.3s;
}

.container2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
	place-self: center;
}

.container3 {
	display: grid;
	place-self: center;
}

.avatar {
	position: relative;
	display: grid;
	align-items: center;
	justify-content: center;

	width: 100px;
	height: 100px;

	border-radius: 10%;
	overflow: hidden;

	/* Subtle inner border */
	box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}

.avatar img {
	height: 70%;
	width: 70%;
	z-index: 2;
	place-self: center;

	/* Optionally add a drop shadow to the main image	 */
	/* to make it feel "lifted"	 */
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}

.avatar .background {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	top: 0;
	left: 0;
	width: 50%;
	height: 50%;

	transform: scale(2);
	filter: blur(13px) opacity(0.2);
}

.avatar-2 {
	position: relative;
	display: grid;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	width: 300px;
	height: 300px;

	border-radius: 10%;
	overflow: hidden;

	/* Subtle inner border */
	box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}

.avatar-2 img {
	height: 100%;
	width: 100%;
	z-index: 2;
	place-self: center;

	/* Optionally add a drop shadow to the main image	 */
	/* to make it feel "lifted"	 */
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}

.avatar-2 .background {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	top: 0;
	left: 0;
	width: 50%;
	height: 50%;

	transform: scale(2);
	filter: blur(13px) opacity(0.2);
}