html {
	scroll-behavior: smooth;
 }

body {
	background-color: #0D0821;
	color: #fff;
	overflow-x: hidden;
	padding: 0px;
	margin: 0px;
}
.italic-text {
	font-style: italic;
}
.bold-text {
	font-weight: bold;
}
.text-uppercase{
	text-transform: uppercase;
}
.not-for-mobile {
	display: none;
}
.full-width{
	min-width: 100%;
}
.full-height{
	min-height: 100%;
}
.full-view-width{
	min-width: 100%;
}
.full-view-height{
	min-height: 100%;
}


h1,
h2,
h3,
h4,
h5,
h6 {
	color: #fff;
}

a {
	color: #1e1e1e;
	transition: all 0.5s ease-in-out;
}

a:hover {
	color: #0078ff;
	text-decoration: none;
	transition: all 0.5s ease-in-out;
}


/*--/ Title A /--*/

.title-box {
	margin-bottom: 4rem;
}
.section-title {
	font-size: 3rem;
	font-weight: bold;
	text-transform: uppercase;
}
.section-subtitle {
	font-size: 1.2rem;
}
.line-mf {
	width: 40px;
	height: 5px;
	background-color: #19142C;
	margin: 0 auto;
}

.p-r {
	position: relative;
}

.color-a {
	color: #0078ff;
}

.color-d {
	color: #f5f5f5;
}

.color-text-a {
	color: #4e4e4e;
}

.box-shadow,
.paralax-mf,
.service-box,
.work-box,
.card-blog {
	box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
}

.box-shadow-a,
.button:hover {
	box-shadow: 0 0 0 4px #cde1f8;
}

.display-5 {
	font-size: 2.5rem;
	font-weight: 300;
	line-height: 1.1;
}

.display-6 {
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.1;
}

.avatar {
	width: 32px;
	height: 32px;
	margin-right: 4px;
	overflow: hidden;
}

.bg-image {
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
}

.overlay-mf {
	background-color: #ff0000;
}

.overlay-mf {
	position: absolute;
	top: 0;
	left: 0px;
	padding: 0;
	height: 100%;
	width: 100%;
	opacity: 0.7;
}

.paralax-mf {
	position: relative;
	padding: 8rem 0;
}

.display-table {
	width: 100%;
	height: 100%;
	display: table;
}

.table-cell {
	display: table-cell;
	vertical-align: middle;
   text-align: center;
}



/*------/ Socials /------*/

.socials {
	padding: 1.5rem 0;
}

.socials ul li {
	display: inline-block;
}

.socials .ico-circle {
	height: 40px;
	width: 40px;
	font-size: 1.7rem;
	border-radius: 50%;
	line-height: 1.4;
	margin: 0 15px 0 0;
	box-shadow: 0 0 0 3px #0078ff;
	transition: all 500ms ease;
}

.socials .ico-circle:hover {
	background-color: #0078ff;
	color: #fff;
	box-shadow: 0 0 0 3px #cde1f8;
	transition: all 500ms ease;
}

/*------/ Ul resect /------*/

.ul-resect,
.socials ul,
.list-ico,
.blog-wrapper .post-meta ul,
.box-comments .list-comments,
.widget-sidebar .list-sidebar,
.widget-tags ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

.list-ico {
	line-height: 2;
}

.list-ico span {
	color: #0078ff;
	margin-right: 10px;
}

/*------/ Owl Carousel /------*/

.owl-theme .owl-dots {
	text-align: center;
	margin-top: 18px;
}

.owl-theme .owl-dots .owl-dot {
	display: inline-block;
}

.owl-theme .owl-dots .owl-dot span {
	width: 18px;
	height: 7px;
	margin: 5px 5px;
	background: #cde1f8;
	border: 0px solid #cde1f8;
	display: block;
	transition: all 0.6s ease-in-out;
	cursor: pointer;
}

.owl-theme .owl-dots .owl-dot:hover span {
	background-color: #cde1f8;
}

.owl-theme .owl-dots .owl-dot.active span {
	background-color: #1b1b1b;
	width: 25px;
}



/*--------------------------------------------------------
........................   INTRO   .......................
----------------------------------------------------------*/
@font-face {
	font-family: Roboto;
	src: url(../fonts/Roboto/Roboto-Regular.ttf) format('truetype');
 }
 #particlesJS {
	position: static;
	width: 100vw;
	height: 100vh;
	min-height: 500px;
	background: #0D0821;
	background-image: url(../img/intro-bg10-1920x1080.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: middle bottom;
 }
 canvas{
	display: block;
}
.intro-title-wrapper{
	position: absolute;
	text-align: center;
	min-width: 100vw;
	top: 43vh;
	left: 50%;
   transform: translate(-50%, -50%);
}
.intro-title {
	position: relative;
	font-family: Roboto;
	letter-spacing: 7px;
	color: #fff;
	font-weight: 900;
	font-size: 2.4rem;
	text-shadow: -2px -2px 0px #000, 2px -2px 0px #000, -2px 2px 0px #000, 2px 2px 0px #000, 0px 0px 70px #ccc;
	padding: 0px 25px;
}
.intro-typed-wrapper{
	height: 5rem;
	padding: 0px 15px;
}
.intro-typed-content{
	color: #ffffff;
	font-size: 1.4rem;
	font-weight: 200;
	height: 200px;
	text-align: center;
	min-width: 100vh;
}
.typed-cursor{
	font-size: 1.5rem;
	color: white;
	padding-left: 3px;
	position: relative;
	bottom: 2px;
}
.intro-caret-div{
	position: absolute;
	text-align: center;
	min-width: 100vw;
	top: 93vh;
	left: 50%;
   transform: translate(-50%, -50%);
}
.intro-down-caret{
	font-size: 2.5rem;
	color: #b4adea52;
	animation-name: introCaretBounce;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes introCaretBounce {
	0% {
		translate: 0px 0px;
	}
	25%{
		translate: 0px 5px;
	}
	50% {
		translate: 0px 0px;
	}
	75% {
		translate: 0px -5px;
	}
	100% {
		translate: 0px 0px;
	}
}

/*------Responsive Styles------*/
@media (min-width: 576px) {
	.not-for-mobile {
		display: inline-block;
	}
	.intro-title {
		font-size: 2.4rem;
	}
	.intro-typed-content {
		font-size: 1.6rem;
	}
	.typed-cursor{
		font-size: 1.4rem;
		bottom: 3px;
	}
	.intro-caret-div{
		top: 95vh;
	}
}
@media (min-width: 768px) {
	.intro-title {
		font-size: 3rem;
	}
	.intro-typed-content {
		font-size: 2rem;
	}
	.typed-cursor{
		font-size: 1.8rem;
		bottom: 4px;
	}
}
@media (min-width: 992px) {
	#particlesJS {
		background-position: right bottom;
	}
	.intro-title {
		font-size: 4.3rem;
	}
	.intro-typed-content {
		font-size: 2.3rem;
	}
	.typed-cursor{
		font-size: 2rem;
		bottom: 5px;
	}
}
@media (min-width: 1200px) {
	.intro-title-wrapper{
		min-width: 1100px;
	}
	.intro-title {
		font-size: 5rem;
	}
	.intro-typed-content {
		font-size: 2.5rem;
	}
	.typed-cursor{
		font-size: 2.3rem;
		bottom: 5px;
	}
}
@media (min-width: 1921px) {
	#particlesJS {
		background-image: url(../img/intro-bg10-2560x1080.png);
	}
}



/*--------------------------------------------------------
.......................   SECTIONS  ......................
----------------------------------------------------------*/
@font-face {
	font-family: Poppins;
	src: url(../fonts/Poppins/Poppins-Light.ttf) format('truetype');
 }

section.content-section{
	padding-top: 75px;
	padding-bottom: 10px;
}

/*----- Responsive Styles -----*/
@media (min-width: 768px) {
	section.content-section{
		padding-top: 100px;
	}
}



/*--------------------------------------------------------
........................   ABOUT   .......................
----------------------------------------------------------*/
section#about {
	background: rgb(21,17,41);
	background: linear-gradient(180deg, rgba(21,17,41,1) 15%, rgba(37,30,73,1) 57%, rgba(67,47,99,1) 100%);
	color: #fff;
	min-width: 100vw;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
div.box-shadow-full {
	padding-top: 2.5rem;
	padding-right: 1.25rem;
	padding-left: 1.25rem;
	padding-bottom: 1.7rem;
	position: relative;
	background-color: rgba(35, 30, 54, 0.63);
	box-shadow: -1px -1px 2px 0px rgba(0, 0, 0, 0.521), 5px 5px 10px 0px rgba(0, 0, 0, 0.534);
	z-index: 2;
	border-radius: 5px;
}

/*------------------ Left Column ---------------------*/
section#about div.about-img {
	object-fit: contain;
}
section#about .about-img img {
	max-width: 100%;
}
section#about .about-info .about-info-title {
	font-weight: 600;
	color: #fff;
	font-size: 1.1rem;
	margin-bottom: 1.3rem;
}
section#about .about-info span {
	font-size: 1rem;
}

/*----- Hard skills -----*/
section#about .hard-skills h3 {
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
}
section#about .hard-skill {
	position: relative;
}
section#about .hard-skill span {
	color: #fff;
	font-size: 1.05rem;
}
section#about .hard-skill i {
	padding-right: 5px;
	font-size: 1.3rem;
}
section#about .hard-skill .skill-java-icon, 
section#about .hard-skill .skill-php-icon {
	font-size: 1.5rem;
}
section#about .hard-skill .skill-php-icon {
	position: relative;
	bottom: -2px;
}
section#about .hard-skill .skill-mysql-icon {
	object-fit: contain;
	position: relative;
	height: 35px;
	bottom: 9px;
	margin-left: 2px;
}
section#about .hard-skill .skill-git-icon {
	object-fit: contain;
	position: relative;
	height: 23px;
	bottom: 7px;
	margin-right: 3px;
}
section#about .hard-skill .pull-right {
	position: absolute;
	right: 12px;
}
section#about .hard-skill .progress {
	background-color: #e1eefd;
	margin: 0.5rem 0 1.2rem 0;
	border-radius: 0;
	height: 0.7rem;
}
section#about .hard-skill .progress .progress-bar {
	height: 0.7rem;
	background-color: #6A78E1;
}

/*------------------ Right Column ---------------------*/
section#about .about-title-main {
	color: #fff;
	font-size: 2rem;
	position: relative;
	margin-bottom: 2rem;
}
section#about .about-title-main:before {
	content: "";
	position: absolute;
	height: 3px;
	background-color: #fff;
	width: 100px;
	bottom: -12px;
}
section#about .about-description {
	font-size: 1.0rem;
}

/*----- Soft Skills [Popovers] -----*/
section#about .soft-skill {
	font-size: 1rem;
	font-weight: 400;
	margin: 5px;
	padding: 3px 10px;
}
.custom-popover-primary {
	--bs-popover-max-width: 200px;
	--bs-popover-border-color: var(--bs-primary);
	--bs-popover-header-bg: var(--bs-primary);
	--bs-popover-header-color: var(--bs-white);
	--bs-popover-body-padding-x: 1rem;
	--bs-popover-body-padding-y: .5rem;
}
 .custom-popover-success {
	--bs-popover-max-width: 200px;
	--bs-popover-border-color: var(--bs-success);
	--bs-popover-header-bg: var(--bs-success);
	--bs-popover-header-color: var(--bs-white);
	--bs-popover-body-padding-x: 1rem;
	--bs-popover-body-padding-y: .5rem;
 }
 .custom-popover-info {
	--bs-popover-max-width: 200px;
	--bs-popover-border-color: var(--bs-info);
	--bs-popover-header-bg: var(--bs-info);
	--bs-popover-header-color: var(--bs-white);
	--bs-popover-body-padding-x: 1rem;
	--bs-popover-body-padding-y: .5rem;
 }
 .custom-popover-warning {
	--bs-popover-max-width: 200px;
	--bs-popover-border-color: var(--bs-warning);
	--bs-popover-header-bg: var(--bs-warning);
	--bs-popover-header-color: var(--bs-white);
	--bs-popover-body-padding-x: 1rem;
	--bs-popover-body-padding-y: .5rem;
 }
 .custom-popover-danger {
	--bs-popover-max-width: 200px;
	--bs-popover-border-color: var(--bs-danger);
	--bs-popover-header-bg: var(--bs-danger);
	--bs-popover-header-color: var(--bs-white);
	--bs-popover-body-padding-x: 1rem;
	--bs-popover-body-padding-y: .5rem;
 }

/*----- Download CV -----*/
section#about .download-cv {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
}
section#about .download-cv p {
	font-size: 1.05rem;
	text-align: center;
}
section#about .download-cv button {
	font-weight: 500;
	min-width: 150px;
}


/*--------------------------------------------------------
........................ MARQUEE .........................
----------------------------------------------------------*/
div.technologies-marquee {
	position: static;
	overflow: hidden;
	padding: 0px;
	width: 100vw;
	min-height: 3rem;
	margin-top: 40px;
	margin-bottom: 20px;
	border: 0px solid white;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.technologies-marquee .marquee-item {
	padding: 0px;
	margin: 0px;
	position: relative;
}
.technologies-marquee i {
	font-size: 2.7rem;
	color: #fff;
}
.technologies-marquee img.marquee-mongodb-icon,
.technologies-marquee img.marquee-wordpress-icon,
.technologies-marquee img.marquee-springboot-icon {
	width: 2.7rem;
}
.technologies-marquee img.marquee-mysql-icon {
	width: 4.1rem;
}
.technologies-marquee i,
.technologies-marquee img {
	margin: 0px 30px;
}



/*--------------------------------------------------------
......................   SERVICES ........................
----------------------------------------------------------*/
section#services {
	background: rgb(106,120,225);
	background: linear-gradient(45deg, rgba(106,120,225,1) 0%, rgba(111,100,197,1) 25%, rgba(117,83,172,1) 50%, rgba(84,49,142,1) 75%);
	background-size: 400% 400%;
	animation: bg-gradient 10s ease infinite;
	height: 100%;
}
@keyframes bg-gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
section#services .service-card {
	background-color: #31234d;
	padding: 2.5rem 3rem;
	border-radius: 1rem;
	margin-bottom: 3rem;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.493);
}
section#services .service-card .service-description {
	padding-right: 5rem;
}
section#services .service-card h3 {
	font-size: 4rem;
	margin-top: 1rem;
	margin-bottom: 2rem;
}
section#services .service-card p {
	font-size: 1.2rem;
	margin-top: 1rem;
	margin-bottom: 2rem;
}
section#services .service-card .service-image {
	object-fit: contain;
}
section#services .service-card .service-image img {
	width: 100%;
	height: 100%;
}


section#services .service-box .service-icon-circle {
	display: block;
	height: 100px;
	width: 100px;
	border-radius: 50%;
	line-height: 1.55;
	margin: 0 auto;
	text-align: center;
	font-size: 3.8rem;
	margin-bottom: 1rem;
	color: #fff;
	box-shadow: 0 0 0 10px #474f8f;
	transition: all 500ms ease;
}
section#services .service-box:hover .service-icon-circle {
	transition: all 500ms ease;
	color: #19142C;
	background-color: #5762b9;
	box-shadow: 0 0 0 10px #cde1f8;
}

section#services .service-title {
	font-size: 1.4rem;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	padding: 0.4rem 0;
}



/*--------------------------------------------------------
........................   BLOG   ........................
----------------------------------------------------------*/
.card-blog .card-body {
	position: relative;
}

.card-blog .card-category-box {
	position: absolute;
	text-align: center;
	top: -16px;
	left: 15px;
	right: 15px;
	line-height: 25px;
	overflow: hidden;
}

.card-blog .card-category {
	display: inline-block;
	color: #fff;
	padding: 0 15px 5px;
	overflow: hidden;
	background-color: #0078ff;
	border-radius: 4px;
}

.card-blog .card-category .category {
	color: #fff;
	display: inline-block;
	text-transform: uppercase;
	font-size: 0.7rem;
	letter-spacing: 0.1px;
	margin-bottom: 0;
}

.card-blog .card-title {
	font-size: 1.3rem;
	margin-top: 0.6rem;
}

.card-blog .card-description {
	color: #4e4e4e;
}

.card-blog .post-author {
	display: inline-block;
}

.card-blog .post-date {
	color: #4e4e4e;
	float: right;
}



/*--------------------------------------------------------
......................   CONTACT   .......................
----------------------------------------------------------*/

.footer-paralax {
	padding: 4rem 0 0 0;
}

.contact-mf {
	margin-top: 4rem;
}

/*------------------- CONTACT FORM ----------------------*/
#sendmessage {
	color: #0078ff;
	border: 1px solid #0078ff;
	display: none;
	text-align: center;
	padding: 15px;
	font-weight: 600;
	margin-bottom: 15px;
}

#errormessage {
	color: red;
	display: none;
	border: 1px solid red;
	text-align: center;
	padding: 15px;
	font-weight: 600;
	margin-bottom: 15px;
}

#sendmessage.show,
#errormessage.show,
.show {
	display: block;
}

.validation {
	color: red;
	display: none;
	margin: 0 0 20px;
	font-weight: 400;
	font-size: 13px;
}



/*--------------------------------------------------------
.......................   FOOTER   .......................
----------------------------------------------------------*/
footer {
	text-align: center;
	color: #fff;
	padding-bottom: 4rem;
	height: 300px;
}

footer .copyright {
	margin-bottom: 0.3rem;
}

footer .credits {
	margin-bottom: 0;
}

footer .credits a {
	color: #fff;
}



/*--------------------------------------------------------
.................   BACK TO TOP BUTTON  ..................
----------------------------------------------------------*/
.back-to-top {
	position: fixed;
	background-color: #1e1e1e;
	background: #0078ff;
	color: #fff;
	width: 44px;
	height: 44px;
	text-align: center;
	line-height: 1;
	font-size: 16px;
	border-radius: 50%;
	right: 20px;
	bottom: 20px;
	transition: visibility 0.3s, opacity 0.4s linear;
	z-index: 11;
}
.back-to-top:hover {
	opacity: 1;
}
.back-to-top i {
	padding-top: 13px;
	color: #fff;
}
.visibility-hidden {
	visibility: hidden;
	opacity: 0;
}
.visibility-visible {
	visibility: visible;
	opacity: 0.4;
}


















/*--------------------------------------------------------
......................   BUTTON   ........................
----------------------------------------------------------*/
.button {
	display: inline-block;
	padding: 0.6rem 0.9rem;
	text-align: center;
	vertical-align: middle;
	font-size: 1.1rem;
	border-radius: 0.3rem;
	border: 1px solid transparent;
	transition: all 500ms ease;
	cursor: pointer;
}
.button:focus {
	outline: 0;
}
.button:hover {
	background-color: #0062d3;
	color: #fff;
	transition: all 500ms ease;
}


/*------------ Call to Action Buttons --------------*/
.intro-button-wrapper{
	position: absolute;
	top: 75vh;
	left: 50%;
   transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 212px;
}
.intro-button-wrapper button{
	padding: 0.6rem 0.9rem;
	text-transform: uppercase;
	text-align: center;
	color: #0D0821;
	font-size: 1.1rem;
	font-weight: 500;
	vertical-align: middle;
	border: 1px solid transparent;
	border-radius: 0.3rem;
	transition: all 500ms ease-out;
}
/*------------ Call to Action [main] --------------*/
.intro-button-wrapper button.call-to-action{
	background-color: #6F64C5;
	border-color: #5c4088;
	margin: 0px 0px 15px 0px;
	min-width: 212px;
}
.intro-button-wrapper button.call-to-action:hover{
	background-color: #8679e9;
}
/*------------ Call to Action [inverted] --------------*/
.intro-button-wrapper button.call-to-action-invert{
	background-color: transparent;
	border-color: #6F64C5;
	color: #6F64C5;
	min-width: 212px;
}
.intro-button-wrapper button.call-to-action-invert:hover{
	background-color: #6f64c521;
	border-color: #887be7;
	box-shadow: 0px 0px 2px #6F64C5, 0px 0px 8px #7e76c0;
}


.button-a {
	background-color: #0078ff;
	color: #fff;
	border-color: #cde1f8;
}

.button-big {
	padding: 0.9rem 2.3rem;
	font-size: 1.2rem;
}

.button-rouded {
	border-radius: 5rem;
}

.btn-lg {
	padding: 0.5rem 1rem;
	font-size: 1.25rem;
	line-height: 1.5;
	border-radius: 0.3rem;
}

@media (min-width: 768px) {
	.intro-button-wrapper{
		flex-direction: row;
	}
	.intro-button-wrapper button.call-to-action{
		margin: 0px 15px 0px 0px;
	}
}








@media (min-width: 767px) {
	.card-blog {
		margin-bottom: 3rem;
	}

	.contact-mf .box-pl2 {
		margin-top: 3rem;
		padding-left: 0rem;
	}
}

@media (min-width: 768px) {
	.box-shadow-full {
		padding: 3rem;
	}

	.intro .intro-subtitle {
		font-size: 2.5rem;
	}

	.testimonial-box .description {
		padding: 0 5rem;
	}

	.post-box,
	.form-comments,
	.box-comments,
	.widget-sidebar {
		padding: 3rem;
	}

	.blog-wrapper .article-title {
		font-size: 1.9rem;
	}

	.box-comments .list-comments .comment-author {
		font-size: 1.5rem;
	}
}

@media (min-width: 992px) {
	.testimonial-box .description {
		padding: 0 8rem;
	}
}

@media (min-width: 1200px) {
	.testimonial-box .description {
		padding: 0 13rem;
	}
}

@media (max-width: 768px) {
	.back-to-top {
		bottom: 15px;
	}
}