@import url("https://fonts.googleapis.com/css2?family=Koulen&family=Averia+Libre&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

*,
*::after,
*::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	overflow: auto;
	overflow-x: hidden;
}

body {
	font-family: "Poppins", sans-serif;
	color: #6e6e6e;
	min-width: 320px;
	scrollbar-gutter: auto;
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

::-webkit-scrollbar {
	position: absolute;
	width: 8px;
	background: #6e6e6e;
	transition: border-radius 1s;
	margin-top: 40px;
}

::-webkit-scrollbar-thumb {
	background: #3c97ff;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:active {
	border-radius: 4px;
}

::-webkit-scrollbar-track {
	background-color: #ffffff00;
}

/* SVG Animation */
.path-0 {
	animation: pathAnim-0 4s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes pathAnim-0 {
	0% {
		d: path(
			"M 0,400 C 0,400 0,200 0,200 C 62.43333333333334,168.3025641025641 124.86666666666667,136.6051282051282 219,129 C 313.1333333333333,121.3948717948718 438.9666666666666,137.88205128205126 522,143 C 605.0333333333334,148.11794871794874 645.2666666666668,141.86666666666665 718,158 C 790.7333333333332,174.13333333333335 895.9666666666667,212.65128205128207 974,232 C 1052.0333333333333,251.34871794871793 1102.8666666666666,251.52820512820512 1176,243 C 1249.1333333333334,234.47179487179488 1344.5666666666666,217.23589743589744 1440,200 C 1440,200 1440,400 1440,400 Z"
		);
	}
	25% {
		d: path(
			"M 0,400 C 0,400 0,200 0,200 C 70.93846153846152,195.9897435897436 141.87692307692305,191.9794871794872 233,204 C 324.12307692307695,216.0205128205128 435.4307692307692,244.07179487179485 515,256 C 594.5692307692308,267.92820512820515 642.4,263.73333333333335 713,261 C 783.6,258.26666666666665 876.9692307692308,256.99487179487176 956,252 C 1035.0307692307692,247.00512820512822 1099.7230769230769,238.2871794871795 1178,229 C 1256.2769230769231,219.7128205128205 1348.1384615384616,209.85641025641024 1440,200 C 1440,200 1440,400 1440,400 Z"
		);
	}
	50% {
		d: path(
			"M 0,400 C 0,400 0,200 0,200 C 79.91025641025641,201.23076923076923 159.82051282051282,202.46153846153848 249,214 C 338.1794871794872,225.53846153846152 436.6282051282052,247.38461538461536 516,262 C 595.3717948717948,276.61538461538464 655.6666666666667,284 722,263 C 788.3333333333333,242.00000000000003 860.7051282051282,192.6153846153846 948,171 C 1035.2948717948718,149.3846153846154 1137.5128205128203,155.53846153846152 1222,165 C 1306.4871794871797,174.46153846153848 1373.2435897435898,187.23076923076923 1440,200 C 1440,200 1440,400 1440,400 Z"
		);
	}
	75% {
		d: path(
			"M 0,400 C 0,400 0,200 0,200 C 60.45384615384617,191.85897435897436 120.90769230769234,183.71794871794873 202,180 C 283.09230769230766,176.28205128205127 384.8230769230769,176.9871794871795 481,186 C 577.1769230769231,195.0128205128205 667.8,212.33333333333331 757,221 C 846.2,229.66666666666669 933.9769230769232,229.67948717948718 997,234 C 1060.0230769230768,238.32051282051282 1098.2923076923075,246.94871794871796 1168,242 C 1237.7076923076925,237.05128205128204 1338.8538461538462,218.52564102564102 1440,200 C 1440,200 1440,400 1440,400 Z"
		);
	}
	100% {
		d: path(
			"M 0,400 C 0,400 0,200 0,200 C 62.43333333333334,168.3025641025641 124.86666666666667,136.6051282051282 219,129 C 313.1333333333333,121.3948717948718 438.9666666666666,137.88205128205126 522,143 C 605.0333333333334,148.11794871794874 645.2666666666668,141.86666666666665 718,158 C 790.7333333333332,174.13333333333335 895.9666666666667,212.65128205128207 974,232 C 1052.0333333333333,251.34871794871793 1102.8666666666666,251.52820512820512 1176,243 C 1249.1333333333334,234.47179487179488 1344.5666666666666,217.23589743589744 1440,200 C 1440,200 1440,400 1440,400 Z"
		);
	}
}

a {
	text-decoration: none;
}

a:hover {
	color: #3c97ff;
}

nav .cv-download {
	color: #ffffff;
	border: none;
	background-color: #3c97ff;
	padding: 15px 20px;
	/* padding: 15px auto; */
}

.fa-cloud-arrow-down {
	margin-right: 10px;
}

input,
textarea {
	border-radius: 0px;
	padding-left: 0px !important;
	color: #b1b1b1 !important;
}

input:focus,
textarea:focus {
	outline: 0px !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

.btn-outline-success {
	border-radius: 0px;
	color: white;
	font-weight: 600;
}

.btn-outline-success img {
	width: 10px;
}

.btn-outline-success:hover {
	background-color: #4e6ba1;
}

h1 {
	font-weight: 900;
}

h2 {
	font-weight: 800;
	color: #222222;
}

h3,
h4,
h5,
h6 {
	color: #222222;
	font-weight: 600;
}

.blue {
	color: #3c97ff;
	font-size: 30px;
	font-weight: 900;
}

.white {
	color: rgba(177, 177, 177, 0.878);
}

.navbar {
	position: fixed;
	z-index: 20;
	margin: 0 auto;
	padding: 30px 0;
	height: 85px;
	background-color: #222222;
	box-shadow: 0 0px 4px 0px rgba(0, 0, 0, 0.8);
}

.navbar .nav-brand {
	position: absolute;
	top: 0;
	background-color: #3c97ff;
	display: inline-block;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	padding: 20px 10px 0px 10px;
	font-size: 2em;
	box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1);
	color: white;
	font-weight: 900;
}

.navbar li .nav-link {
	position: relative;
	display: inline-block;
	color: white;
	padding: 0px 30px !important;
	cursor: pointer;
	margin: 5px auto;
}

.nav-card-item {
	position: relative;
	list-style: none;
	left: -1rem;
}

.navbar li .nav-link:hover {
	color: #3c97ff;
}

.navbar li .active {
	color: #3c97ff;
}

.navbar .button {
	position: relative;
	float: right;
	color: white;
	background-color: #3c97ff;
	width: max-content;
	cursor: pointer;
}

.navbar .button:active,
.btn-send-message:active {
	transform: scale(98%);
}

.navbar .btn:hover {
	color: white;
}

.navbar .navbar-toggler {
	margin-left: auto;
}

#nav-icon {
	margin-top: -4px;
	width: 25px;
	height: 30px;
	position: relative;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
	cursor: pointer;
}

#nav-icon span {
	display: inline-block;
	position: absolute;
	border-radius: 2px;
	height: 4px;
	width: 25px;
	background: #ffffff;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}

#nav-icon span:nth-child(1) {
	top: 0px;
}

#nav-icon span:nth-child(2) {
	top: 10px;
	background-color: #3c97ff;
}

#nav-icon span:nth-child(3) {
	top: 20px;
}

#nav-icon.open span:nth-child(1) {
	top: 10px;
	width: 30px;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
}

#nav-icon.open span:nth-child(2) {
	opacity: 0;
	left: -60px;
}

#nav-icon.open span:nth-child(3) {
	top: 10px;
	width: 30px;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

.navbar .navbar-toggler,
.navbar .navbar-toggler {
	border: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	outline: none;
}

.navbar-collapse {
	background-color: #222222;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 40px 0px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	margin-top: 21px;
	text-align: center;
	line-height: 32px;
	overflow: hidden;
}

.cv-download {
	display: none;
}

.scroll-progress-track {
	position: fixed;
	top: 80px;
	width: 100%;
	height: 5px;
	background-color: transparent;
}

#progress-bar {
	height: 5px;
	background-color: #3c97ff;
	width: 0%;
}

.navbar-links {
	height: 218px;
}

.navbar-collapse .nav-link {
	font-size: 20px;
	font-family: "Koulen";
	letter-spacing: 1px;
	color: #3c97ff !important;
	border: 2px solid #3c97ff;
	border-radius: 20px;
	box-shadow: 10px 10px 30px #1d1d1d50, -10px -10px 30px #27272750;
}

.loader {
	position: fixed;
	display: grid;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100%;
	cursor: default;
	z-index: 10;
	opacity: 1;
	background-color: #222222;
}

.loading-text {
	color: rgb(255, 255, 255);
	position: absolute;
	font-weight: 100;
	font-family: "Courier New", Courier, monospace;
	font-size: 15px;
	width: 100%;
	text-align: center;
}

.section-title {
	color: #3c97ff;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	margin: 10px auto;
}

#intro {
	background-color: #222222;
	box-shadow: 0px 0px 10px 10px rgba(34, 34, 34, 1);
	padding: 150px 0px 50px;
}

.typing-text {
	color: #ffffff;
	position: relative;
	display: inline;
}

.typing {
	position: relative;
	width: 100%;
}

#intro h1 {
	color: white;
	margin-bottom: 0px;
}

#intro h1 .my-name {
	font-size: 1.7em;
}

#intro-p {
	font-weight: bold;
}

#intro-p:hover {
	color: #3c97ff;
	display: inline-block;
	animation: rubberBand;
	animation-duration: 1s;
	transition: color 0.4s ease-in-out;
}

#intro .button {
	width: 45%;
	margin-bottom: 20px;
	border-radius: 4px;
}

#intro .button .fa-cloud-arrow-down,
.fa-envelope {
	margin-right: 10px;
}

#intro .button:active {
	transform: scale(98%);
}

.btn-contact {
	background-color: #3c97ff00 !important;
	border: 2px solid #3c97ff;
	transition: background-color 0.2s ease-in-out;
	cursor: pointer;
}

.btn-contact:hover {
	background-color: #3c97ff !important;
}

.intro-btns {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

#intro p {
	font-size: large;
	margin-top: 10px;
	margin-bottom: 20px;
}

.intro-p-url {
	text-decoration: underline;
	display: inline-block !important;
	color: #6e6e6e;
}

.intro-p-url:hover {
	cursor: pointer;
	color: #3c97ff !important;
	text-decoration: underline;
	animation: rubberBand;
	animation-duration: 1s;
	transition: color 0.4s ease-in-out;
}

#intro a {
	display: flex;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: center;
	text-align: left;
	margin: auto;
}

.my-name {
	font-weight: 750;
}

#intro a:hover {
	color: white;
}

#intro .scroll {
	position: relative;
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	color: #6e6e6e;
	font-weight: 600;
	margin: 10px auto;
	margin-bottom: 25px;
}

#intro .scroll:hover {
	color: #3c97ff;
	transition: color 0.5s ease-in-out;
	animation: flash;
	animation-duration: 1s;
}

#intro .scroll::before {
	content: "\f103";
	position: relative;
	margin-right: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

#intro .scroll::after {
	content: "\f103";
	position: relative;
	margin-left: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

#intro .img img {
	width: 100%;
	position: relative;
	-webkit-mask: url(../assets/images/clip.webp);
	mask: url(../assets/images/clip.webp);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	border-radius: 4px;
	cursor: grab;
}

#about {
	padding-top: 50px;
	top: -60px;
	position: relative;
}

.about-wrapper .left h2 {
	font-size: 30px;
}

.about-wrapper .right h2 {
	font-size: 30px;
}

#about .left,
#about .right {
	padding: 40px 10px;
}

#about .left div {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 40px;
	padding-bottom: 30px;
}

#about .left img {
	width: 50px;
}

#bio .bio {
	padding: 0px;
}

#bio h2 {
	margin-top: 25px;
	font-size: 30px;
}

#bio .img {
	position: relative;
	top: 20px;
	padding: 0 50px;
}

#bio .img .bio-img {
	position: relative;
	width: 100%;
	cursor: grab;
	margin-bottom: 25px;
	border-left: 5px solid #3c97ff;
	border-radius: 8px;
}

.js-tilt-glare {
	border-radius: 8px;
}

#bio .text {
	padding: 20px;
}

#skills {
	background-color: #222222;
	box-shadow: 0px 0px 10px 10px rgba(34, 34, 34, 1);
	padding: 80px 0px;
}

#skills .skill-cards-container {
	padding: 10px 0px;
	display: flex;
	gap: 50px;
	margin-bottom: 80px;
	margin-top: 30px;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.skill-label {
	color: rgb(200, 200, 200);
	font-weight: 600;
	text-align: left;
	margin-top: 30px;
	margin-left: 2.5%;
}

#skills .container .div-card {
	position: relative;
	width: 80px;
	height: 80px;
	margin-bottom: 15px;
	background-color: #222222;
	box-shadow: 5px 5px 15px #181818, -5px -5px 15px #2c2c2c;
	transition: background-color 0.2s ease, border-radius 0.2s ease;
}

#skills .container .div-card:hover {
	border-radius: 50%;
	background-color: rgb(200, 200, 200);
}

#skills .container .div-card-item {
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 4px;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	background-repeat: no-repeat;
	background-size: contain;
}

#skills .container .div-card-item:hover #skills .container .div-card span {
	color: #3c97ff;
}

#skills .container .div-card .skill-level {
	position: absolute;
	display: table;
	transition: opacity 0.4s;
	opacity: 0%;
	font-size: 15px;
	z-index: 2;
	color: #ffffff;
	backdrop-filter: blur(2px);
	padding-top: 25px;
	padding-bottom: 25px;
	padding-left: 10px;
	padding-right: 10px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#skills .container .div-card span {
	position: relative;
	display: table;
	color: #6e6e6e;
	font-size: 15px;
	margin-top: 90px;
	margin-left: auto;
	margin-right: auto;
}

.skill-cards-container {
	padding: 10px 0px;
	display: flex;
	gap: 50px;
	margin: 30px 0 30px 0;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
}

.skill-cards-container a img {
	height: 200px;
	width: 200px;
}

.mlsa img {
	width: 220px !important;
}

/*Icons - Programming Languages & Frameworks */

#skills .container .div-card .mysql {
	background-image: url("../assets/images/icon/mysql.png");
}
#skills .container .div-card .mongodb {
	background-image: url("../assets/images/icon/mongodb.png");
}
#skills .container .div-card .express-js {
	background-image: url("../assets/images/icon/express-js.png");
}
#skills .container .div-card .react-js {
	background-image: url("../assets/images/icon/react-js.png");
}
#skills .container .div-card .node-js {
	background-image: url("../assets/images/icon/node-js.png");
}
#skills .container .div-card .next-js {
	background-image: url("../assets/images/icon/next-js.png");
}
#skills .container .div-card .html {
	background-image: url("../assets/images/icon/html-5.png");
}
#skills .container .div-card .css {
	background-image: url("../assets/images/icon/css-3.png");
}
#skills .container .div-card .js {
	background-image: url("../assets/images/icon/js.png");
}
#skills .container .div-card .python {
	background-image: url("../assets/images/icon/python.png");
}
#skills .container .div-card .flask {
	background-image: url("../assets/images/icon/flask.png");
}
#skills .container .div-card .java {
	background-image: url("../assets/images/icon/java.png");
}
#skills .container .div-card .cp {
	background-image: url("../assets/images/icon/cp.png");
}
#skills .container .div-card .cpp {
	background-image: url("../assets/images/icon/cpp.png");
}
#skills .container .div-card .csharp {
	background-image: url("../assets/images/icon/c-sharp.png");
}
#skills .container .div-card .flutter {
	background-image: url("../assets/images/icon/flutter.svg");
}

/*Icons - Tools & Other Skills */

#skills .container .div-card .git {
	background-image: url("../assets/images/icon/git.png");
}
#skills .container .div-card .azure {
	background-image: url("../assets/images/icon/azure.png");
}
#skills .container .div-card .gcp {
	background-image: url("../assets/images/icon/gcp.png");
}
#skills .container .div-card .aws {
	background-image: url("../assets/images/icon/aws.png");
}
#skills .container .div-card .docker {
	background-image: url("../assets/images/icon/docker.png");
}
#skills .container .div-card .kubernetes {
	background-image: url("../assets/images/icon/kubernetes.svg");
}
#skills .container .div-card .ansible {
	background-image: url("../assets/images/icon/ansible.svg");
}
#skills .container .div-card .jenkins {
	background-image: url("../assets/images/icon/jenkins.svg");
}
#skills .container .div-card .redhat {
	background-image: url("../assets/images/icon/redhat.svg");
}
#skills .container .div-card .firebase {
	background-image: url("../assets/images/icon/firebase.svg");
}
#skills .container .div-card .jupyter {
	background-image: url("../assets/images/icon/jupyter.png");
}
#skills .container .div-card .colab {
	background-image: url("../assets/images/icon/colab.png");
}
#skills .container .div-card .postman {
	background-image: url("../assets/images/icon/postman.png");
}
#skills .container .div-card .android-studio {
	background-image: url("../assets/images/icon/android-studio.png");
}
#skills .container .div-card .jmeter {
	background-image: url("../assets/images/icon/jmeter.png");
}

#skills .container .div-card .chatgpt {
	background-image: url("../assets/images/icon/chatgpt.png");
}

.card-buttons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.fa-file-code,
.fa-display {
	position: relative;
	top: 2px;
}

#milestones {
	padding: 50px 0px;
	background-color: #222222;
}

.milestones {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 50px 0;
}

.timeline {
	width: 100%;
	height: auto;
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
}

.timeline ul {
	list-style: none;
	padding-left: 0px;
}

.timeline ul li {
	padding: 10px;
	background-color: #222222;
	border: 2px solid #3c97ff;
	box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.5);
	text-align: left;
	color: white;
	border-radius: 10px;
	margin-bottom: 20px;
}

.timeline ul li:last-child {
	margin-bottom: 0;
}

.timeline-content .title {
	font-weight: 500;
	color: #b1b1b1;
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 5px;
}

.timeline-content .birth::before {
	content: "\f1fd";
	position: relative;
	color: #222222;
	margin-right: 5px;
	-webkit-text-stroke: 1px #3c97ff;
	font-family: "Font Awesome 5 Free";
	font-weight: 800;
}

.timeline-content .education::before {
	content: "\f19d";
	position: relative;
	color: #222222;
	margin-right: 5px;
	-webkit-text-stroke: 1px #3c97ff;
	font-family: "Font Awesome 5 Free";
	font-weight: 800;
}

.timeline-content .school::before {
	content: "\e56b";
	position: relative;
	color: #222222;
	-webkit-text-stroke: 1px #3c97ff;
	margin-right: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 800;
}

.timeline-content .job::before {
	content: "\f0b1";
	position: relative;
	color: #222222;
	margin-right: 5px;
	-webkit-text-stroke: 1px #3c97ff;
	font-family: "Font Awesome 5 Free";
	font-weight: 800;
}
.timeline-content .company::before {
	content: "\f1ad";
	position: relative;
	color: #222222;
	-webkit-text-stroke: 1px #3c97ff;
	margin-right: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 800;
}

.timeline-content .sub-title {
	font-size: 16px;
	font-weight: normal;
	color: #b1b1b1;
	margin-bottom: 10px;
}

.timeline-content .description {
	color: #6e6e6e;
}

.timeline-content .globe::before {
	content: "\f57e";
	position: relative;
	color: #222222;
	-webkit-text-stroke: 1px #3c97ff;
	margin-right: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 800;
}

.timeline-content p {
	font-size: 16px;
	font-family: "Lato", sans-serif;
	font-weight: 300;
}

.timeline-content .date {
	font-size: 12px;
	color: #6e6e6e;
	font-weight: 600;
	margin-bottom: 10px;
	letter-spacing: 2px;
}

.timeline-content .date::before {
	content: "\f783";
	position: relative;
	color: #3c97ff50;
	-webkit-text-stroke: 1px #3c97ff;
	margin-right: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 800;
}

#contact {
	padding-top: 50px;
}

.contact-title {
	font-size: 30px;
}

#contact #contact-form {
	text-align: right;
	padding: 50px 0px;
}

#contact #contact-form .form-group {
	text-align: left;
	margin-top: 20px;
}

#contact #contact-form button {
	margin-top: 40px;
	border-radius: 4px;
}

.btn-send-message {
	color: #ffffff;
	background-color: #3c97ff;
	pointer-events: auto !important;
	padding: 8px 20px;
	cursor: pointer !important;
	border: none;
}

.btn-send-message:active {
	transform: scale(98%);
}

#contact #contact-form input,
#contact #contact-form textarea {
	background-color: transparent;
	border-radius: 0px;
	border: 0px;
	border-bottom: 1px solid #6e6e6e;
}

.contact-bg {
	width: 100%;
	position: relative;
}

.contact-img {
	position: relative;
	display: block;
	top: 50%;
	left: 50%;
	padding-bottom: 50px;
	transform: translate(-50%, -50%);
	max-width: 500px;
	height: auto;
}

#contact h1 {
	color: white;
	font-weight: 900;
}

#contact .email,
#contact .phone {
	margin-top: 30px;
}

#contact .email p,
#contact .phone p {
	margin-bottom: 0.5rem !important;
}

#contact .fa-paper-plane {
	margin-right: 10px;
}

.contacts {
	margin-top: 50px;
}

.social-media-set {
	position: relative;
	align-items: center;
	height: 65px;
	justify-content: space-evenly;
	display: flex;
	flex-direction: row;
}

.col3 .img {
	margin-left: auto;
	margin-right: auto;
	display: block;
	color: #3c97ff;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	background-size: cover;
}

.social-icon {
	margin-left: auto;
	margin-right: auto;
	display: block;
	overflow: hidden;
	max-width: 30px;
	height: 30px;
	transition: all 0.2s ease;
	scale: 100%;
	border-radius: 30px;
	margin-bottom: 10px;
}

.col3 .github {
	background-image: url("/assets/images/icon/github.svg");
}
.col3 .linkedin {
	background-image: url("/assets/images/icon/linkedin.svg");
}
.col3 .twitter {
	background-image: url("/assets/images/icon/twitter.svg");
}
.col3 .instagram {
	background-image: url("/assets/images/icon/instagram.svg");
}

#intro .button {
	color: white;
	background-color: #3c97ff;
	border: 2px solid #3c97ff;
	padding: 8px 20px;
}

.swal-modal {
	background-color: #ffffffde;
	backdrop-filter: blur(2px);
}

.swal-icon--success__ring {
	border: 4px solid #3c97ff;
}

.swal-icon--success__line--long,
.swal-icon--success__line--tip {
	background-color: #3c97ff;
}

.swal-icon--success::before,
.swal-icon--success::after,
.swal-icon--success__hide-corners {
	background-color: #ffffff00;
}

.swal-button {
	padding: 8px;
	width: 80px;
	background-color: #3c97ff;
}

.swal-button:hover,
.swal-button:active {
	background-color: #3c97ff !important;
}

footer {
	width: 100%;
}

footer ul {
	padding: 0;
}

.col1 ul,
.col2 ul {
	list-style: none;
}

footer ul li,
.footer-nav ul li a,
footer .support ul li a {
	color: #6e6e6e;
}

footer ul li:hover,
.footer-nav ul li a:hover,
footer .support ul li a:hover {
	color: #222222;
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
}

.main {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-around;
	flex-wrap: wrap;
}

.col1,
.col2,
.col3 {
	margin: 10px;
}

.heading {
	margin-bottom: 15px;
	text-align: left;
	font-size: 18px;
}

.col1 .footer-nav {
	text-align: left;
	list-style: none;
	width: fit-content;
	display: flex;
	flex-direction: column;
}

.col2 .support {
	text-align: left;
	list-style: none;
	width: fit-content;
	display: flex;
	flex-direction: column;
}

.col1 a {
	display: inline-block;
	padding: 2px 0;
	margin: 2px 0px;
	color: #7783a0;
	cursor: pointer;
	font-size: 14px;
}

.col2 .support {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 14px;
}

.col2 a {
	display: inline-block;
	padding: 2px 0;
	margin: 2px 0px;
	color: #7783a0;
	cursor: pointer;
	font-size: 14px;
}

.social {
	display: flex;
	gap: 20px;
}

.footer-rights {
	padding-top: 50px;
	text-align: center;
	font-size: 0.9em;
}

.footer-rights .container {
	padding: 0px;
}

.footer-rights .copyright p {
	position: relative;
	font-size: 15px;
	width: 100%;
}

.footer-rights .copyright p a {
	color: #222222;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.4s ease;
}

.footer-rights .copyright p a:hover {
	color: #3c97ff;
	text-decoration-line: underline;
	text-decoration-color: #3c97ff;
	text-decoration-style: wavy;
}

#heart-icon {
	color: red;
}

.to-top {
	position: fixed;
	display: inline-block;
	bottom: 10px;
	opacity: 0;
	pointer-events: none;
	right: 10px;
	transition: opacity 400ms;
	font-size: 30px;
	z-index: 20;
}

.active-top {
	pointer-events: all;
	opacity: 0.5;
}

.active-top:hover {
	opacity: 1;
}

.active-top:active {
	transform: scale(95%);
	animation: none;
}

.to-top i {
	color: #3c97ff;
}

@media (max-width: 450px) {
	.navbar-collapse .nav-link {
		background-color: transparent;
		width: 70%;
	}

	#intro p {
		margin-bottom: 20px;
	}

	#intro .button {
		width: 100%;
		margin-bottom: 20px;
		border-radius: 4px;
	}

	.intro-btns {
		position: relative;
		display: inline;
		align-items: center;
		justify-content: center;
	}

	#bio .img {
		padding: 0 20px;
	}

	#bio .img .bio-img {
		position: relative;
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
	}

	#skills .skill-cards-container {
		padding: 10px 0px;
		display: flex;
		gap: 40px;
		margin-top: 20px;
		align-items: center;
		justify-content: space-evenly;
		flex-wrap: wrap;
	}

	.card-buttons {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}

	.card-buttons .card-btn {
		width: 100%;
	}

	.btn-send-message {
		width: 100%;
	}

	.mlsa img {
		width: 160px !important;
	}

	.skill-cards-container a img {
		height: 140px;
		width: 140px;
	}
}
@media (min-width: 768px) {
	h1,
	.typing-text {
		font-size: 3rem;
	}

	.typing {
		position: relative;
		width: 100%;
		height: 120px;
	}

	.section-title::before {
		content: "";
		width: 2px;
		height: 120px;
		display: block;
		background-color: #3c97ff;
		position: absolute;
		top: 0;
		left: 50%;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	#bio .section-title::before {
		display: none;
	}

	#intro .container {
		padding: 0px 40px;
	}

	#intro p {
		margin-top: 30px;
		margin-bottom: 20px;
	}

	#intro .img {
		width: 100%;
		height: fit-content;
		margin: 0 auto;
	}

	#bio .img .bio-img {
		position: relative;
		width: 100%;
		margin: 0px auto;
		border-radius: 8px;
	}

	#about .section-title::before {
		width: 100px;
		height: 2px;
		top: 35px;
		left: -40px;
	}

	.about-wrapper {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 80px;
	}

	.about-wrapper .left {
		width: 40%;
	}

	.about-wrapper .right {
		width: 60%;
		position: relative;
	}

	.about-wrapper .right::before {
		content: "";
		width: 2px;
		height: 100px;
		display: block;
		background-color: #3c97ff;
		position: absolute;
		top: 150px;
		left: 0;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	#bio .section-title::before {
		width: 200px;
		height: 2px;
		left: -230px;
		top: 75%;
	}

	#bio .text {
		padding-left: 50px;
	}

	#skills .container .div-card {
		position: relative;
		width: 100px;
		height: 100px;
		border-radius: 4px;
	}

	#skills .container .div-card-item {
		position: absolute;
		width: 60px;
		height: 60px;
		border-radius: 4px;
		top: 50%;
		left: 50%;
		background-position: center;
		transform: translateX(-50%) translateY(-50%);
		background-repeat: no-repeat;
		background-size: contain;
	}

	#skills .container .div-card span {
		position: relative;
		display: table;
		margin-top: 110px;
		margin-left: auto;
		margin-right: auto;
		text-align: center !important;
	}

	#milestones {
		padding-bottom: 0px;
	}

	.timeline:before {
		content: "";
		position: absolute;
		top: -4%;
		left: 50%;
		transform: translateX(-50%);
		width: 2px;
		height: 104%;
		background-color: #3c97ff;
	}

	.timeline ul li {
		width: 50%;
		position: relative;
		margin-bottom: 50px;
	}

	.timeline ul li:nth-child(odd) {
		float: left;
		clear: right;
		margin-left: 20px;
		transform: translateX(-38px);
		border-radius: 8px 0px 8px 8px;
	}

	.timeline ul li:nth-child(even) {
		float: right;
		clear: left;
		margin-right: 20px;
		transform: translateX(38px);
		border-radius: 0px 8px 8px 8px;
	}

	.timeline ul li::before {
		content: "";
		position: absolute;
		height: 20px;
		width: 20px;
		margin: 0px 10px;
		border-radius: 50%;
		border: 2px solid #3c97ff;
		background-color: #222222;
		top: 0px;
		transition: background-color 0.4s;
	}

	.timeline ul .start::after {
		content: "";
		position: absolute;
		height: 20px;
		width: 20px;
		margin: 0px 10px;
		border-radius: 50%;
		border: 2px solid #3c97ff;
		background-color: #3c97ff;
		bottom: -20px;
		right: -40px;
		transition: background-color 0.4s;
	}

	.timeline ul li:nth-child(odd)::before {
		transform: translate(50%, -50%);
		right: -30px;
	}

	.timeline ul li:nth-child(odd):hover::before {
		top: 2px;
		right: -28px;
	}

	.timeline ul li:nth-child(even)::before {
		transform: translate(-50%, -50%);
		left: -30px;
	}

	.timeline ul li:nth-child(even):hover::before {
		top: 2px;
		left: -28px;
	}

	.timeline-content .date {
		position: absolute;
		color: #6e6e6e;
		top: -30px;
		left: 0px;
	}

	.timeline-content .date::before {
		-webkit-text-stroke: transparent;
	}

	.timeline ul li:hover::before {
		background-color: #3c97ff;
		scale: 120%;
	}

	.timeline ul .start:not(:hover)::after {
		pointer-events: none;
		background-color: #3c97ff;
	}

	#contact {
		margin-top: 0px;
		padding-top: 80px;
		padding-bottom: 0px;
	}

	#contact .row {
		position: relative;
	}

	#contact .form {
		padding-right: 80px;
	}

	#contact .contacts {
		text-align: left;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	#contact .contacts div {
		margin-top: 0;
	}

	.col3 p {
		margin-bottom: 0.5rem;
	}

	.social-media-set {
		position: relative;
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: row;
		padding-left: 0px;
	}
}

@media (min-width: 992px) {
	.navbar-collapse .nav-link {
		border: none;
	}

	.navbar {
		position: fixed;
		z-index: 20;
		margin: 0 auto;
		padding: 30px 0;

		box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.8);
	}

	.navbar-links {
		display: flex;
		align-items: center;
		margin: 0 auto;
		height: 85px;
		justify-content: space-around;
	}

	.navbar-links li {
		display: inline-block;
	}

	.collapse button {
		display: inline-block;
		font-size: 17px;
		border-radius: 4px;
	}

	.scroll-progress-track {
		display: none;
	}

	.navbar-collapse {
		backdrop-filter: none;
		box-shadow: none;
		border-radius: none;
		margin-top: 0px;
		text-align: center;
		line-height: 10px;
		overflow: hidden;
	}

	.collapse-bg {
		background-color: #222222;
		background-image: none;
	}

	.navbar-collapse .nav-link {
		font-size: 18px;
		color: white !important;
		text-shadow: none;
		border-radius: 0px;
		box-shadow: none;
	}

	.navbar .nav-brand {
		position: relative;
		top: -10px;
		background-color: #3c97ff;
		display: inline-block;
		padding: 20px 10px 0px 10px;
		font-size: 2em;
		color: white;
		font-weight: 900;
	}

	.navbar li .nav-link {
		position: relative;
		display: inline-block;
		color: white;
		padding: 15px 30px !important;
		margin: 0px;
	}

	.navbar li .nav-link:hover {
		color: #3c97ff !important;
	}

	.js-scroll-trigger:hover {
		background-color: #3c97ff10 !important;
		border-radius: 4px;
	}

	.js-scroll-trigger {
		animation: rubberBand;
		animation-delay: 0.2s;
		animation-duration: 1s;
	}

	.js-scroll-trigger:active {
		transform: scale(95%);
		animation-delay: 0s !important;
		animation: none !important;
		animation-duration: 1s !important;
	}

	.navbar li .active {
		color: #3c97ff;
	}

	.navbar .navbar-toggler {
		margin-right: -110px;
		margin-left: auto;
	}

	h1,
	.typing-text {
		font-size: 3rem;
	}

	.typing {
		position: relative;
		width: 100%;
		height: 160px;
	}

	#intro {
		padding-bottom: 0;
	}

	#intro .container {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	#intro .text {
		width: 45%;
	}

	.my-name {
		font-weight: 750;
	}

	#intro .img {
		margin-bottom: 0px;
		margin-top: 40px;
		margin-left: 140px;
		width: 60%;
	}

	#intro h1 {
		position: relative;
	}

	#intro p {
		margin-top: 40px;
		margin-bottom: 20px;
	}

	.btn-contact:hover {
		background-color: #3c97ff00 !important;
	}

	.contact-btn {
		position: relative;
	}

	.hb-fill-right-bg::before {
		position: absolute;
		content: "";
		left: -1.5px !important;
		top: -1px !important;
		background: #3c97ff;
		transition-duration: 0.3s;
		z-index: -1;
		inset: 0px auto auto 0px;
		border-radius: 2px;
		width: 0px;
		height: 104%;
		opacity: 1;
	}

	.hb-fill-right-bg:hover::before {
		width: 101%;
		opacity: 1;
	}

	.hb-fill-right-bg:hover {
		background: #3c97ff;
		transition: all 0.3s ease 0s;
	}

	#intro .my-name::before {
		content: "";
		width: 122px;
		height: 2px;
		display: block;
		background-color: #3c97ff;
		position: absolute;
		top: 115px;
		left: -140px;
	}

	#bio .img .bio-img {
		margin-top: 20px;
	}

	#bio h2 {
		margin-top: 0px;
		font-size: 30px;
	}

	#about .section-title::before {
		width: 100px;
		height: 2px;
		position: absolute;
		top: 35px;
		float: left;
		left: -5%;
	}

	.about-wrapper {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 80px;
	}

	.about-wrapper .left {
		width: 50%;
		margin-left: 40px !important;
	}

	.about-wrapper .right {
		width: 50%;
		position: relative;
	}

	.about-wrapper .right::before {
		content: "";
		width: 2px;
		height: 100px;
		display: block;
		background-color: #3c97ff;
		position: absolute;
		top: 150px;
		left: -50px !important;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	.about-wrapper .left img {
		width: 70px !important;
	}

	#bio {
		padding-bottom: 0;
	}

	.bio {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.bio .img {
		width: 50%;
		margin-bottom: 50px;
	}

	#bio .img .bio-img {
		position: relative;
		width: 100%;
		border-radius: 8px;
	}

	.bio .text {
		z-index: 5;
		width: 50%;
	}

	.bio .text .section-title {
		margin-bottom: 30px;
	}

	#skills .section-title::before {
		height: 150px;
	}

	#skills .skill-cards-container {
		padding: 10px 0px;
		display: flex;
		gap: 50px;
		margin-top: 30px;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.card-img-top {
		transition: transform 0.4s ease;
	}

	.card-img-top:hover {
		transform: scale(1.1);
		overflow: hidden;
	}

	#contact {
		padding-bottom: 0px;
		padding-top: 30px;
	}

	.contacts {
		max-width: 750px;
		margin-top: 50px;
		margin-bottom: 50px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
	}

	.social-icon:hover {
		scale: 110%;
		box-shadow: 0 0 16px 8px rgba(0, 0, 0, 0.08);
	}

	.footer-rights {
		text-align: center;
		font-size: 1rem;
	}
}

@media (min-width: 1200px) {
	.navbar-nav {
		padding-left: 20% !important;
	}

	.navbar-links {
		position: relative;
		left: 30px;
		display: flex;
		align-items: center;
		margin: 0 auto;
		height: 85px;
		justify-content: space-around;
		background-color: #222222;
	}

	#intro p {
		margin-top: 30px !important;
		margin-bottom: 20px;
	}

	.typing {
		position: relative;
		width: 100%;
		height: 150px;
	}

	h1,
	.typing-text {
		font-size: 3.5rem;
	}

	#about .section-title::before {
		width: 120px;
		height: 2px;
		position: absolute;
		top: 35px;
		left: -100px;
	}

	.about-wrapper .left {
		width: 50%;
		padding-left: 0px !important;
	}

	.about-wrapper .left h2 {
		font-size: 3rem;
	}

	.about-wrapper .right h2 {
		font-size: 3rem;
	}

	.about-wrapper .right {
		width: 50%;
		padding-left: 50px !important;
	}

	.about-wrapper .right::before {
		left: -40px;
	}

	.blue {
		color: #3c97ff;
		font-size: 3rem;
		font-weight: 900;
	}

	#bio h2 {
		font-size: 3rem;
	}

	.contact-title {
		font-size: 3rem;
	}

	#contact {
		padding-bottom: 0px;
		padding-top: 40px;
	}

	#contact .contacts {
		text-align: left;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		padding-right: 80px;
		position: relative;
		bottom: 100px;
	}

	#skills .container .div-card {
		margin-left: 20px;
		margin-right: 20px;
	}

	.contacts {
		padding-top: 80px;
	}

	.to-top {
		position: fixed;
		display: inline-block;
		bottom: 10px;
		opacity: 0;
		pointer-events: none;
		right: 20px;
		transition: opacity 400ms;
		font-size: 30px;
	}

	.active-top {
		pointer-events: all;
		opacity: 0.5;
	}

	.active-top:hover {
		animation: scrollbtn 1s infinite;
	}

	.active-top:active {
		transform: scale(95%);
		animation: none;
	}

	.to-top i {
		color: #3c97ff;
	}
}