@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-SemiBold.eot');
	src: local('☺'), url('../fonts/Montserrat-SemiBold.woff') format('woff'), url('../fonts/Montserrat-SemiBold.ttf') format('truetype'), url('../fonts/Montserrat-SemiBold.svg') format('svg');
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'Nexa Bold';
	src: url('../fonts/Nexa Bold.eot');
	src: local('☺'), url('../fonts/Nexa Bold.woff') format('woff'), url('../fonts/Nexa Bold.ttf') format('truetype'), url('../fonts/Nexa Bold.svg') format('svg');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Nexa Light';
	src: url('../fonts/Nexa Light.eot');
	src: local('☺'), url('../fonts/Nexa Light.woff') format('woff'), url('../fonts/Nexa Light.ttf') format('truetype'), url('../fonts/Nexa Light.svg') format('svg');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'SF Pro Display';
	src: url('../fonts/SFPRODISPLAYBOLD.eot');
	src: local('☺'), url('../fonts/SFPRODISPLAYBOLD.woff') format('woff'), url('../fonts/SFPRODISPLAYBOLD.ttf') format('truetype'), url('../fonts/SFPRODISPLAYBOLD.svg') format('svg');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'SF Pro Display';
	src: url('../fonts/SFPRODISPLAYMEDIUM.eot');
	src: local('☺'), url('../fonts/SFPRODISPLAYMEDIUM.woff') format('woff'), url('../fonts/SFPRODISPLAYMEDIUM.ttf') format('truetype'), url('../fonts/SFPRODISPLAYMEDIUM.svg') format('svg');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'SF Pro Display';
	src: url('../fonts/SFPRODISPLAYREGULAR.eot');
	src: local('☺'),
	 url('../fonts/SFPRODISPLAYREGULAR.woff') format('woff'),
	 url('../fonts/SFPRODISPLAYREGULAR.ttf') format('truetype'),
	 url('../fonts/SFPRODISPLAYREGULAR.svg') format('svg');
	font-weight: 500;
	font-style: normal;
}

/* vars */
:root {
	--main-color: #fff;
	--main-color-white: #4F4F4F;
	--dark-bg-color: linear-gradient(90deg, #2A2D32 5.15%, #131313 89.49%);
	--white-bg-color: #fff;
	--border-dark: rgb(73, 67, 67);
	--border-white: linear-gradient(153.43deg, #D9DAE3 17.71%, #F4F5F8 83.33%);
	--tecnologi-bg: #202122;
	--tecnologi-bg-white: #E9EAF0;
	--tecnologi-logo-border: #252628;
	--tecnologi-logo-border-white: #dedfe3;
	--certificate-link-bg: rgba(255, 255, 255, 0.08);
	--certificate-link-bg-white: rgba(255, 255, 255, 0.65);
	--about-bg: rgba(255, 255, 255, 0.13);

}

.carousel-item img{
	border-radius: 30px;
	height: 280px;
}


body {
	font-family: 'SF Pro Display';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: .7px;
	line-height: 18px;
	color: #FFFFFF;
}

.container {
	background: var(--dark-bg-color);
	max-width: 1020px;
	margin: 0 auto;
	padding: 0 20px;
}
@media (max-width:1440px){
	.container{max-width: 900px;}
}
@media (max-width:970px){
	.container{max-width: 550px;}
}
@media (max-wi950:414px){
	.container{max-width: 100%;}
}

.header {
	min-height: 300px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #696969;
	border-radius: 30px 30px 0 0;
	padding-top: 20px;
}

.avatar__bg {
	width: 14.5em;
	height: 14.5em;
	background-color: #353434;
	border-radius: 50%;
	position: relative;
	border: 1px solid var(--border-dark);
	box-shadow: 5px 7px 12px rgba(0,0,0, .25), -5px -7px 12px rgba(255,255,255, .1), 1.5px 1px 2px rgba(255,255,255, .1), 0 -2px 2px rgba(0, 0, 0, .13) inset, 0 1px 2px rgba(0,0,0, .25) inset;
}
@media (max-width:950px){
	.avatar__bg{
		width: 165px;
		height: 165px;
	}
}
.avatar {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200px;
	height: 200px;
	border-radius: 50%;

}

@media (max-width:950px){
	.avatar{
		width: 150px;
		height: 150px;
	}
}
.header_content {
	margin-left: 25px;
}
@media (max-width:1440px){
	.header_content{
		max-width: 60%;
	}
}
@media (max-width:950px){
	.header_content{
		margin-left: 20px;
		width: 50%;
	}
}
.preview {
	display: inline-block;
}
@media (max-width:1440px){
	.preview{
		margin-left: 20px;
		font-size: 12px;
	}
}
@media (max-width:970px){
	.preview{
		font-size: 25px;
	}
}
@media (max-width:950px){
	.preview{
		width: 100%;
	}
}
.name {
	font-family: 'Nexa Bold';
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 17px;
	letter-spacing: 1.3px;

	color: #F2F2F2;
	margin-bottom: 50px;
}
@media (max-width:950px){
	.name{
	margin-bottom: 15px;

	}
}
.prof {
	font-family: 'Nexa Bold';
	font-style: normal;
	font-weight: 700;
	font-size: 35px;
	line-height: 35px;
	text-transform: uppercase;

	background: linear-gradient(90deg, #70c6f8 0.54%, #005696 145.61%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-emphasis-color: transparent;

	margin-bottom: 20px;
}
@media (max-width:970px){
	.prof{
		font-size: 25px;
	}
}
@media (max-width:950px){
	.prof{
		line-height: 28px;
		font-size: 22px;
	}
}
.from {
	font-style: normal;
	font-size: 18px;
	font-weight: 500;
	line-height: 21px;
	color: #F2F2F2;
	letter-spacing: 1.4px;
	margin-bottom: 30px;
}
.social {
	display: flex;
}
@media (max-width:1440px){
	.social{
		/* position: relative; */
		left: -100px;
		flex-wrap: wrap;
    	justify-content: space-around;
	}
}
.social a {
	margin-bottom: 10px;
}
.contacts {
	visibility: hidden;
}
@media (max-width:950px){
	.social{
		position: absolute;
		width: 300px;
		left: -100%;
		flex-direction: column;
		background: #000;
		border-radius: 10px;
		transition: .5s ease-in-out;
		padding: 20px;
		z-index: 5;
	}
	.contacts {
		visibility: visible;
		border: none;
	}
}
.social a {
	text-decoration: none;
	color: #F2F2F2;
	font-family: 'SF Pro Display';
	font-weight: 500;

	margin-right: 30px;
	padding: 10px 20px 10px 50px;
	transition: background-size .3s;


	box-shadow: 5px 7px 12px rgba(0,0,0, .25),
				-3px -6px 33px rgba(255,255,255, 0),
				0 -6px 38px rgba(116, 179, 181, .12),
				0 2px 5px rgba(255,255,255, .25) inset;
	border-radius: 10px;
	transition:  .1s linear;
}
@media (max-width:950px){
	.social a{
		margin-bottom: 10px;
		font-size: 12px;
	}
}


.social a:hover {
	box-shadow: 5px 7px 12px rgba(255,255,255, .08),
	-3px -6px 33px rgba(0,0,0, .25),
	0 -6px 38px rgba(116, 179, 181, .12),
	0 2px 5px rgba(0,0,0, .25) inset;
	color:antiquewhite;

}
.close {
	visibility: hidden;
	display: block;
	width: 20px;
	height: 20px;
	margin-left: auto;
	font-size: 30px;
	font-weight: 200;

}
@media (max-width:950px){
	.close{
		visibility: visible;

	}
}

.tel {
	background-image: url(../img/svg/telephone-call.png);
}
.skype {
	background-image: url(../img/svg/skype.png);
}
.telegram {
	background-image: url(../img/svg/telegram.png);
}
.linkedin {
	background-image: url(../img/svg/linkedin.png);
}
.tel, .skype, .telegram, .linkedin {
	background-repeat: no-repeat;
	background-position: 15px center;
	background-size: 20px 20px;
	z-index: 2;
}
/* header end */
.about {
	padding-top: 100px;
	display: flex;
	border-radius: 0 0 30px 30px ;

}
@media (max-width:950px){
	.about{
		flex-direction: column;
		padding-top: 70px;
	}
}
aside {
	float: left;
	width: 37%;
	position: relative;
	margin-bottom: 30px;
}
@media (max-width:950px){
	aside{
		width: 100%;
		float:none;
		margin-bottom: 20px;
	}
}
aside h3 {
	margin-bottom: 30px;
	font-weight: 700;
	font-size: 20px;
	line-height: 16px;
	text-transform: uppercase;
	position: absolute;
	top: -50px;

}
@media (max-width:950px){
	aside h3{
		left: 50%;
		transform: translateX(-50%);
	}
}

.about__description {
	background: var(--about-bg);
	padding: 20px;
	border-radius: 25px;
	font-weight: 500;
	font-size: 16px;
	line-height: 19px;

}

/* btns */
.btns {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 50px;
}
.btn-bg {
	display: inline-block;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: linear-gradient(320.66deg, #005EA3 14.75%, #11A8FD 84.81%);
	border: 7px solid #0081C9;

	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
}
.btn-color {
	width: 100px;
	height: 100px;
	background: #32363B;
	box-shadow: inset 2px 1px 1px rgba(255, 255, 255, 0.05),
				inset -20px -20px 47px rgba(59, 68, 81, 0.5),
				inset 20px 20px 58px rgba(0, 0, 0, 0.55);
	border-radius: 50%;
	border: 7px solid #2B2F33;
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
}
.btn-bg:hover {
	box-shadow: 3px 5px 10px rgba(255, 255, 255, 0.15);

}
.btn-bg:hover .btn-color {
	box-shadow: inset 2px 1px 1px rgba(255, 255, 255, 0.05),
				 5px 5px 47px rgba(59, 68, 81, 0.5),
				inset 20px 20px 58px rgba(0, 0, 0, 0.55);
}


/* skills */
.skills-title {
	font-family: 'Nexa Bold';
	font-weight: 700;
	font-size: 18px;
	line-height: 16px;
	text-transform: uppercase;

	background: linear-gradient(45deg, #11A8FD 24.17%, #005696 74.59%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-emphasis-color: transparent;
	margin-bottom: 20px;
}


.skills-item {
	width: 90%;
	border-radius: 10px;
	background-color: var(--about-bg);
	box-shadow: 0 -1px 7px rgba(255, 255, 255, 0.6);
	padding: 10px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 30px;
}

.skill-name {
	color: #F2F2F2;
}
.circles {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.circle {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: rgb(15, 15, 15);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 5px;
}
.circle-check {
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: linear-gradient(45deg, #11A8FD 24.17%, #005696 74.59%);
	box-shadow: 0 0 15px #11A8FD;
}


/* software */

.software {
	background: linear-gradient(90deg, #E65C00 0%, #F9D423 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-emphasis-color: transparent;
	margin-top: 70px;
}
.yellow {
	background: linear-gradient(90deg, #E65C00 0%, #F9D423 100%);
	box-shadow: 0 0 15px #F9D423;
}
.software-logo {
	position: relative;
	padding-left: 35px;
}
.software-logo::before {
	content: '';
	display: block;
	width: 30px;
	height: 30px;

	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: -2px;
	top: -3px;
}
.figma::before {
	background-image: url(../img/svg/Figma-logo.png);
}
.vscode::before {
	background-image: url(../img/svg/vscode.png);
}
.photoshop::before {
	background-image: url(../img/svg/photoshop.png);
}

/* aside and */


/* tecnologi */

.tecnologi {
	width: 60%;
	margin: 0 5px 0 25px;
	float: right;
}
@media (max-width:950px){
	.tecnologi{
		width: 100%;
		margin: 0 0 20px 0;
		float: none;
	}
}
.tecnologi ul {
	margin-top: 80px;
	margin-bottom: 200px;
	/* min-height: 70%; */
	width: 100%;
}

.tecnologi-item {
	display: flex;
	justify-content: space-around;
	align-items: center;
	/* width: 600px; */
	/* width: 100%; */
	min-height: 220px;
	background-color: var(--tecnologi-bg);
	border-radius: 25px;
	box-shadow: -5px -7px 12px rgba(255, 255, 255, 0.02),
				4px 4px 8px rgba(0,0,0, .25) inset;

	float:left;
	margin: 0  0 30px 10px;

}
@media (max-width:950px){
	.tecnologi-item{
		flex-direction: column;
		padding: 20px;
		margin: 0 auto 30px;
	}
}
.courses-title {
	text-transform: uppercase;
	font-size: 24px;
	text-align: center;
	margin-bottom: 20px;
}
.courses {
	box-shadow: none;
	background: none;
}
@media (max-width:950px){
	.courses{
		margin-left: 20px;
	}
}
.cbs-image {
	width: 150px;
	height: 150px;
	border-radius: 50%;
}
.about-cbs {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.name-cbs {
	font-size: 24px;
	background: linear-gradient(90deg, #70c6f8 0.54%, #005696 145.61%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-emphasis-color: transparent;
}
@media (max-width:950px){
	.name-cbs{
		font-size: 22px;
		margin-top: 20px;

	}
}
.period {
	font-weight: 500;
	font-size: 22px;
}
@media (max-width:950px){
	.name-cbs{
		font-size: 20px;

	}
}


.tecnologi-logo {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 10px solid var(--tecnologi-logo-border);
	box-shadow: 5px 7px 12px rgba(0, 0, 0, 0.25),
				 -2px -4px 10px rgba(255, 255, 255, 0.1),
				 3px 3px 6px rgba(255, 255, 255, 0.09),
				 inset 0px -2px 2px rgba(0, 0, 0, 0.13),
				 inset 0px 1px 2px rgba(0, 0, 0, 0.25);
	background: linear-gradient(-45deg, #153ee1 5.15%, #e064d6 89.49%);
	position: relative;
	margin-left: 15px;

}
@media (max-width:950px){
	.tecnologi-logo{
		margin: 0 0 20px 0;
	}
}
.tecnologi-logo img {
	width: 60px;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.tecnologi-name,
.tecnologi-year {
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 20px;
	text-align: center;
}
.certificate {
	width: 105px;
	display: block;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
	padding: 7px;
	text-align: center;
	text-decoration: none;
	margin: 0 auto;
	color: #fff;
	font-size: 12px;
	box-shadow: -5px -7px 12px rgba(255, 255, 255, 0.02),
				-1px -2px 3px rgba(255, 255, 255, 0.1),
				4px 4px 8px rgba(0,0,0, .45) inset;
	transition: .1s linear;
}
.certificate:hover {
	box-shadow: 5px 7px 12px rgba(255, 255, 255, 0.02),
				1px 2px 3px rgba(255, 255, 255, 0.1),
				-4px -4px 8px rgba(0,0,0, .45) inset;
	font-size: 11.5px;
}



.tecnologi-text {
	width: 45%;
	padding: 0 20px;
	font-size: 18px;
    line-height: 1.15;
}
@media (max-width:950px){
	.tecnologi-text{
		width: 100%;
		margin-top: 20px;
	}
}