@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');



*{

	margin: 0;

	padding: 0;

	box-sizing: border-box;

	outline: none;

	border: none;

	text-decoration: none;

	font-family: 'Poppins', sans-serif;

}

:root{

	--bg-color:#081b29;

	--main-color:#00abf0;

	--text-color:#333;

	--second-color:#555;

	--white-color:#fff;

	--cover-color:linear-gradient(45deg, #00abf0, #006e9a);

	--page-color:linear-gradient(90deg, #fff, #ddd);

	--border: .120rem solid #00abf0;

	--box-shadow: 0 0 .6rem rgba(0, 0, 0, .2);

}

body{

	display: flex;

	justify-content: center;

	align-items: center;

	min-height: 100vh;

	background: var(--bg-color);

	color: var(--text-color);

	overflow: hidden;

}

.wrapper{

	position: relative;

	width: 66rem;

	height: 38rem;

	padding: 1rem;

	perspective: 250rem;

	animation: show-animate 2s forwards;

}



@keyframes show-animate{

	0%, 30%{

		opacity: 0;

		transform: rotate(-20deg);

	}

	100%{

		opacity: 1;

		transform: rotate(0deg);

	}

}

.cover {

	position: absolute;

	width: 50%;

	height: 100%;

	background: var(--cover-color);

	box-shadow: var(--box-shadow);

	border-top-left-radius: .6rem;

	border-bottom-left-radius: .6rem;

	transform-origin: right;

	top: 0;

	left: 0;

}

.cover.cover-left{

	z-index: -1;

}

.cover.cover-right.turn{

	transform: rotateY(180deg);

}

.cover.cover-right{

	z-index: 100;

	transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);

}

.book{

	position: relative;

	width: 100%;

	height: 100%;

	display: flex;

	perspective: 250rem;

}



.book .book-page{

	position: absolute;

	width: 50%;

	height: 100%;

	background: var(--page-color);

	box-shadow: 0 0 .6rem rgba(0, 0, 0, .1);

	display: flex;

	padding: 1rem;

}

.profile-page{

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

}

.profile-page img{

	max-width: 120px;

	border-radius: 50%;

	border: .25rem solid var(--main-color);

	margin-bottom: .8rem; 

}

.profile-page h1{

	font-size: 1.7rem;

	line-height: 1;

}

.profile-page h3{

	font-size: .7rem;

	color: var(--main-color);

}

.profile-page .social-media{

	margin: .6rem 0 .8rem;

}

.profile-page .social-media a{

	display: inline-flex;

	justify-content: center;

	align-items: center;

	width: 1.7rem;

	height: 1.7rem;

	background: transparent;

	border: var(--border);

	border-radius: 50%;

	font-size: 1.1rem;

	color: var(--main-color);

	margin: 0 .2rem;

	transition: .5s;

}

.profile-page .social-media a:hover{

	background: var(--main-color);

	color: var(--white-color);

}

.profile-page p{

	text-align: justify;

}

.profile-page .btn-box{

	margin-top: 1.2rem;

}

.btn{

	display: inline-flex;

	justify-content: center;

	align-items: center;

	width: 9.5rem;

	height: 3rem;

	background: var(--main-color);

	border: var(--border);

	border-radius: .3rem;

	color: var(--white-color);

	font-size: 1rem;

	font-weight: 500;

	margin: 0 1rem;

	transition: .5s;

}

.btn:hover{

	background: transparent;

	color: var(--main-color);

}

.btn-box .btn:nth-child(2){

	background: transparent;

	color: var(--main-color);

}

.btn-box .btn:nth-child(2):hover{

	background: var(--main-color);

	color: var(--white-color);

}

.book-page.page-right {

	position: absolute;

	right: 0;

	transform-style: preserve-3d;

	transform-origin: left;

	transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);

}

.book-page.page-right.turn{

	transform:rotateY(180deg);

}

.book-page .page-front, .book-page .page-back {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: var(--page-color);

	padding: 1.5rem 2rem;

}

.book-page .page-front {

	transform: rotateY(0deg) translateZ(1px);

}

.book-page .page-back {

	transform: rotateY(180deg) translateZ(1px);

}

.title{

	text-align: center;

	margin-bottom: .8rem;

}

.workeduc-box{

	border-left: var(--border);

}

.workeduc-box .workeduc-content {

	position: relative;

	padding-left: 1.4rem;

	margin-bottom: 1rem;

}

.workeduc-box .workeduc-content::before {

	position: absolute;

	content: '';

	top: 0;

	width: 1rem;

	height: 1rem;

	border-radius: 50%;

	background: var(--main-color);

	left: -0.55rem;

}

.workeduc-content .year{

	color: var(--main-color);

}

.workeduc-content p {

	font-size: 14px;

	line-height: 1.4;

}

.workeduc-content .year i{

	margin-right: .4rem;

}

.number-page{

	position: absolute;

	bottom: .8rem;

	left: 50%;

	transform: translateY(-50%);

}

.nextprev-btn {

	position: absolute;

	width: 1.2rem;

	height: 1.2rem;

	bottom: .9rem;

	right: 1.5rem;

	display: inline-flex;

	justify-content: center;

	align-items: center;

	color: var(--second-color);

	cursor: pointer;

	font-size: 2rem;

	transition: .5s;

}

.nextprev-btn:hover{

	color: var(--main-color);

}

.nextprev-btn.back{

	left: 1.5rem;

}

.service-box {

	display: flex;

	flex-wrap: wrap;

	gap: 1.1rem;

}

.service-box .service-content {

	flex: 1 1 10rem;

	border: var(--border);

	border-radius: .5rem;

	text-align: center;

	padding: .6rem .4rem 2rem;

	transition: .3s ease;

}

.service-box .service-content:hover{

	box-shadow: var(--box-shadow);

}

.service-content i{

	font-size: 2.5rem;

	color: var(--main-color);

}

.service-content h3{

	font-size: 1.1rem;

}

.service-content p{

	margin: .2rem 0 .8rem;

	font-size: .9rem;

	line-height: .9rem;

}

.service-content .btn {

	width: 6.5rem;

	height: 1.9rem;

}

.skills-box{

	display: flex;

	flex-wrap: wrap;

	gap:1.5rem;

}

.skills-box .skills-content{

	flex: 1 1 20rem;

}

.skills-content h3{

	font-size: 1.3rem;

	line-height: 1;

	margin-bottom: .6rem;

}

.skills-content .content{

	display: flex;

	flex-wrap: wrap;

	gap:.8rem;

}

.skills-content .content span{

	display: inline-flex;

	width: 5rem;

	height: 4rem;

	border: var(--border);

	border-radius: .3rem;

	font-weight: 600;

	flex-direction: column;

	justify-content: center;

	align-items: center;

	font-size: .7rem;

	transition: .3s	ease;

}

.skills-content .content span:hover{

	box-shadow: var(--box-shadow);

}

.skills-content .content span i{

	font-size: 2rem;

	color: var(--main-color);

}

.portfolio-box .img-box{

	display: flex;

	width: 100%;

	height: 10rem;

	border: var(--border);

	border-radius: .5rem;

	overflow: hidden;

}

.portfolio-box .img-box img{

	width: 100%;

	object-fit: cover;

	transition: .3s;

}

.portfolio-box .img-box:hover img{

	transform: scale(1.5);

}

.portfolio-box .info-box{

	margin: 1rem 0 1.5rem;

}

.portfolio-box .info-box .info-title{

	display: flex;

	justify-content: space-between;

	align-items: center;

	margin-bottom: 1rem;

}

.portfolio-box .info-box .info-title h3{

	font-size: 1.3rem;

}

.portfolio-box .info-box .info-title a{

	display: flex;

	align-items: center;

	color: var(--main-color);

}

.portfolio-box .info-box .info-title a i{

	margin-left: .3rem;

}

.portfolio-box .info-box p:nth-of-type(1){

	font-weight: 600;

}

.portfolio-box .btn-box{

	display: flex;

	justify-content: center;

}

.portfolio-box .btn-box .btn{

	margin: 0 1.15rem;

}

.contact-box .field{

	width: 100%;

	background: transparent;

	border: var(--border);

	border-radius: .3rem;

	padding: .6rem;

	font-size: 1rem;

	color: var(--text-color);

	margin-bottom: .9rem;

}

.contact-box{

	text-align: center;

}

.contact-box .field::placeholder{

	color: var(--text-color);

}

.contact-box textarea{

	resize: none;

	height: 12rem;

}

.contact-box .btn{

	cursor: pointer;

}

.back-profile{

	position: absolute;

	bottom: 1.2rem;

	right: 2rem;

	width: 2rem;

	height: 2rem;

	background: transparent;

	border-radius: .3rem;

	border: var(--border);

	font-size: 1.1rem;

	color: var(--main-color);

	display: inline-flex;

	justify-content: center;

	align-items: center;

	transition: .5s;

}

.back-profile:hover{

	background: var(--main-color);

	color: var(--white-color);

}

.back-profile p{

	position: absolute;

	top: 0;

	left: 50%;

	transform: translateX(-50%)scale(.5);

	font-size: 1rem;

	opacity: 0;

	transition: .5s;

	color: var(--main-color);

}

.back-profile:hover p{

	transform: translateX(-50%)scale(1);

	opacity: 1;

	top: -1.8rem;

}

.profile-page h1::after {

	position: absolute;

	content: "TM";

	width: 23px;

	height: 23px;

	background: var(--main-color);

	top: 214px;

	left: 78%;

	font-size: 7px;

	color: #fff;

	display: flex;

	justify-content: center;

	align-items: center;

	border-radius: 50%;

	text-align: center;

	cursor: pointer;

	font-weight: normal;

	border: 2px solid #fff;

}