/*------------------------- GENERAL -------------------------*/
body {
	font-family: "Muli", sans-serif;
	font-weight: 300;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
}
.full-screen {
	height: 100vh;
}
h1,h2,h3,h4,h5,h6 {
	font-family: "Poppins", sans-serif;
	line-height: 1.618;
}
a,a:hover {
	text-decoration: none !important;
}
a,a:hover,button {
	outline: none !important;
}
.my-6 {
	margin-top: 80px;
	margin-bottom: 80px;
}
.mt-6 {
	margin-top: 80px;
}
.mb-6 {
	margin-bottom: 80px;
}
.t-green {
	color: #3cb371;
}
.t-purple {
	color: #9370db;
}
.t-red {
	color: #cd5c5c;
}
.max-width-d {
	max-width: 1440px;
}
.secondary-button {
	transition: all .5s ease;
	display: inline-block;
	border-radius: 32px;
	padding: 12px 24px ;
}
.primary-button {
	border-radius: 20px;
	padding: 10px 30px;
	font-size: 16px;
	display: inline-block;
}
.subtitle {
	position: relative;
	margin-bottom: 24px;
	padding-bottom: 16px;
	font-size: 28px;
	font-weight: 400;
}
.subtitle::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 5px;
	width: 55px;
	border-radius: 8px;
}
.subtitle::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 2px;
	height: 1px;
	width: 100%;
	max-width: 255px;
}
.heading-meta-container {
	text-align: center;
	position: relative;
}
.heading-meta-container .heading-title {
	font-size: 24px;
	font-weight: 400;
	text-transform: uppercase;
	margin-bottom: 0;
}
.heading-meta-container .description {
	font-weight: 300;
	margin-bottom: 48px;
}
.heading-meta-container .description::before {
	width: 26px;
	height: 5px;
	display: block;
	content: "";
	position: absolute;
	bottom: -2px;
	left: calc(50% - 13px);
}
.heading-meta-container .description::after {
	width: 100px;
	height: 1px;
	display: block;
	content: "";
	position: relative;
	margin-top: 12px;
	left: calc(50% - 50px);
}
.vertical-line {
	position: relative;
}
.vertical-line::after {
	content: '';
	position: absolute;
	left: 50%;
	top: -5%;
	width: 1px;
	height: 115%;
}
#main {
	width: 76%;
	height: 80%;
	position: absolute;
	top: 10%;
	left: 12%;
	overflow: hidden;
	border-radius: 1.25rem;
}
#main>section:not(:first-child):not(:last-child) {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(90vw - 190px);
	bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 0;
	opacity: 0;
	animation-duration: 1s;
	border-radius: 1.25rem;
	padding: 2rem 1.5rem;
}
#main>section:first-child , #main>section:last-child {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 0;
	opacity: 0;
	animation-duration: 1s;
	border-radius: 1.25rem;
	padding: 3rem 1.5rem;
}
#main>section.active {
	z-index: 2 !important;
	opacity: 1 !important;
}
.mCSB_inside>.mCSB_container {
	margin-right: 2rem;
}
/*------------------------- Preloader -------------------------*/
#line-loader {
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	width: 100%;
	z-index: 99999;
	display: flex;
}
#line-loader:before, #line-loader:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
	z-index: -1;
	transition: all 0.3s ease 0s;
}
#line-loader:after {
	left: auto;
	right: 0;
}
#line-loader .middle-line {
	margin: auto;
	width: 0;
	height: 250px;

	position: absolute;
	overflow: hidden;
	transition: all 0.8s ease 0s;
}
.middle-line:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 0%;
	transform: translateY(-50%);
	animation: lineheight 1000ms ease-in-out 0s forwards;
}
.middle-line:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	transform: translateY(-100%);
	animation: lineround 1200ms linear 0s infinite;
	animation-delay: 2000ms;
}
@keyframes lineheight {
	0%{
		height: 0%;
	}
	100%{
		height: 100%;
	}
}
@keyframes lineround {
	0%{
		transform: translateY(-100%);
	}
	100%{
		transform: translateY(200%);
	}
}
.preloaded .middle-line:after {
	opacity: 0;
}
.preloaded .middle-line {
	opacity: 0;
	height: 100%!important;
}
.preloaded:before, .preloaded:after {
	animation: hide 300ms ease-in-out 500ms forwards;
}
@keyframes hide {
	0% {
		width: 50%;
	}
	100% {
		width: 0%;
	}
}
/*------------------------- OVERLAY MENU -------------------------*/
.menu-toggler {
	display: none;
}
.menu {
	position: relative;
	width: 100%;
	height: 150px;
}
.menu .list-group-item {
	border: none;
	padding: 0.5rem;
}
.menu li a {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 1rem;
	transition: all 0.3s ease;
}
.menu li a i {
	display: block;
	font-size: 1.25rem;
	transform: translateY(0);
	transition: all 0.3s ease;
}
.menu li a:hover i,.menu li a.active i {
	transform: translateY(-20%);
}
.menu span {
	font-size: 12px;
	font-weight: 500;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	display: block;
	transform: translateY(-100%);
}
.menu a:hover span, .menu a.active span {
	opacity: 1;
	visibility: visible;
	transform: translateY(-20%);
}
header, .right-side {
	width: 80px;
	border-radius: 1.25rem;
	position: fixed;
	z-index: 1030;
	top: 10%;
	height: 80%;
}
header .navbar-brand {
	display: block;
	margin-right: 0;
	text-align: center;
}
header .navbar-brand span {
	display: block;
	text-align: center;
	width: 100%;
	font-weight: 700;
	font-size: 12px;
	margin-top: -1rem;
}
header .navbar-brand b {
	display: block;
	text-align: center;
	font-weight: 700;
	font-size: 3rem;
}
/*------------------------- RIGHT SIDE -------------------------*/
.right-side {
	right:5%;
	text-align: center;
}
.right-side .next-prev-page {
	position: absolute;
	right: 50%;
	transform: translateX(50%);
	bottom: 15px;
}
#date {
	margin-top: 15px;
	font-size: 15px;
	font-weight: 600;
}
#date span {
	display: block;
	font-size: 14px;
}
#date b {
	font-size: 24px;
	font-weight: 700;
}
.social-box {
	position: relative;
	left: 50%;
	top: 47%;
	transform: translate(-50%,-50%);
	width: 1.5rem;
}
.follow-label {
	padding-right: 5rem;
	position: absolute;
	bottom: 85%;
	right: 0;
	line-height: 1.5rem;
	height: 1.5rem;
	white-space: nowrap;
	transform-origin: 100% 0;
	text-align: right;
	transform: rotate(90deg);
}
.follow-label::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 60px;
	height: 2px;
}
.social i {
	display: block;
	margin-bottom: 1rem;
	text-align: center;
}
.social img {
	display: block;
	margin-bottom: 1rem;
	width: 24px !important;
	border-radius: 0 !important;
}
/*------------------------- LEFT SIDE -------------------------*/
#main {
	left: calc(5% + 95px);
}
.left-side {
	width: 80px;
	border-radius: 1.25rem;
	left: 5%;
	position: fixed;
	height: 80%;
	top: 10%;
	z-index: 10;
	text-align: center;
	padding-top: 16px;
}
.left-side img {
	width: 60px;
	height: auto;
	border-radius: 50%;
}
.left-side h1 {
	font-size: 12px;
	padding: 5px 0;
}
.left-side .menu {
	position: relative;
	display: block;
	overflow: hidden;
}
.left-side .menu .list-group-item {
	width: 100px;
	position: absolute;
}
.left-side .menu-align {
	height:160px;
	width: 100%;
	position: absolute;
	bottom: 0;
	overflow: hidden;
}
.menu-footer {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 100%;
	transform: translateX(-50%);
}
/*------------------------- Next & Prev Page -------------------------*/
.next-prev-page {
	position: fixed;
	right: 25px;
	bottom: 25px;
	z-index: 1031;
}
.next-prev-page button {
	display: block;
	width: 35px;
	height: 35px;
	border: none;
	border-radius: 12px;
	text-align: center;
	position: relative;
}
.next-prev-page button i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
}
/*------------------------- Hero -------------------------*/
.hero {
	position: relative;
	z-index: 1;
	overflow: none;
}
.hero .hero-center {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
}
.hero-content {
	max-width: 450px;
	line-height: 1.618;
}
.hero .mCSB_container {
	overflow: initial;
}
.hero-image img {
	display: inline-block;
	width: 250px;
	height: auto;
	border-radius: 50%;
}
.hero-footer {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 100%;
	height: auto;
	text-align: center;
	transform: translateX(-50%);
}
.hero-footer .primary-button {
	border-radius: 20px;
	display: inline-block;
	font-size: 16px;
	padding: 10px 30px; 
}
.extend-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right:2rem;
	height: 300px;
	width: 300px;
}
/*------------------------- About -------------------------*/
.about-img {
	position: relative;
}
.about-img img {
	width: 90%;
	border-radius: 32px 32px 0;
	z-index: 2;
	position: relative;
	top: 16px;
}
.about-description h3 {
	text-transform: capitalize;
}
.border-img {
	width: 75%;
	height: 100%;
	position: absolute;
	top: 0;
	border-radius: 32px 32px 0;
	right: 1rem;
}
.personal-info li {
	margin-bottom: 16px;
}
.count-up {
	margin-top: 58px;
	position: relative;
}
.count-up::before, .count-up::after {
	content: "";
	width: 100%;
	height: 1px;
	margin: auto;
	position: absolute;
	left: 0;
}
.count-icon {
	font-size: 26px;
	margin-bottom: 16px;
}
.count-icon img {
	width: 45px;
}
/*------------------------- Skills -------------------------*/
#skills {
	margin-top: 28px;
}
.skills .skillbar {
	display: block;
	border-radius: 8px;
	height: 10px;
	margin-bottom: 8px;
	width: 100%;
}
.skills .skill-box:not(:last-child) .skillbar {
	margin-bottom: 40px;
}
.skills .skillbar-title {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 4px;
}
.skills .skillbar-bar {
	border-radius: 6px;
	height: 8px;
	padding: 0;
	width: 0;
}
.skill-bar-percent {
	font-size: 13px;
	margin-left: auto;
}
.chart-box .chart {
	position: relative;
}
.chart-box .percent {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-20px) translateY(-20px);
	font-size: 24px;
}
.chart-box .percent::after {
	content: "%";
	font-size: 24px;
}
.knowledge-item {
	padding-left: 0;
	margin-top: 10px;
}
.knowledge-item li {
	margin-bottom: 24px;
	list-style: none;
}
.knowledge-item li:last-child {
	margin-bottom: 0;
}
.knowledge-item li::before {
	content: "\25C9";
	margin-right: 8px;
	font-size: 16px;
}
.skill-text {
	margin-bottom: 5px;
	display: flex;
}
/*------------------------- Language Skill -------------------------*/
.language-skill:not(:last-child) {
	margin-bottom: 30px;
}
.language-skill h4 {
	font-size: 16px;
}
.language-skill h6 span {
	font-size: 14px;
	font-weight: normal;
}
.language-skill ul {
	display: flex;
}
.language-skill ul li {
	margin-bottom: 0;
	flex: auto;
	margin-right: auto !important;
}
.language-skill ul li i {
	font-size: 12px;
}
/*------------------------- Services -------------------------*/
.services-box {
	margin: 16px 0;
}
.services .box {
	padding: 1rem 0;
	text-align: left;
	position: relative;
}
.boxes [class^="col-"] {
	position: relative;
}
.boxes [class^="col-"]::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
}
.boxes [class^="col-"]:nth-last-child(-n+2)::after {
	display: none;
}
.services .services-icon {
	font-size: 36px;
	display: inline-block;
}
.services .services-box img {
	width: 45px;
	margin-bottom: 12px;
}
/*------------------------- RESUME -------------------------*/
.resume h3 i {
	padding-right: 0.75rem;
}
.resume .timeline-box {
	padding: 1rem 0;
}
.timeline-content p {
	margin-bottom: 0 !important;
}
.resume .timeline-year {
	font-size: 15px;
	font-weight: 400;
	margin-bottom: 0.25rem;
}
/*------------------------- Testimonial -------------------------*/
.testimonial-item {
	display: flex;
	justify-content: center;
}
.testimonial .testimonial-image img {
	width: 60px;
	border-radius: 50%;
}
.testimonial .testimonial-box {
	cursor: grab;
}
.testimonial .testimonial-comment {
	font-size: 22px;
	font-weight: 300;
	font-style: italic;
	text-align: center;
	margin-bottom: 24px;
}
.testimonial-info {
	margin-left: 12px;
	text-align: left;
}
.testimonial .owl-dots {
	text-align: center;
	margin-top: 24px;
}
.testimonial .owl-dot span {
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 6px;
	border-radius: 50%;
	transition: all 0.5s ease;
}
.testimonial .owl-dot.active span {
	transform: scale(1.5);
}
/*------------------------- Portfolio -------------------------*/
.portfolio-item {
	margin-bottom: 30px;
}
.portfolio .portfolio-filter {
	margin-bottom: 32px;
}
.portfolio .portfolio-image {
	overflow: hidden;
	position: relative;
	border-radius: 8px;
	cursor: pointer;
}
.portfolio .portfolio-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-15px) translateY(-15px);
	line-height: 44px;
	font-size: 30px;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease-out;
	z-index: 1000000;
}
.portfolio .portfolio-image:hover .portfolio-icon {
	opacity: 1;
	visibility: visible;
}
.portfolio .portfolio-image::before {
	content: "";
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
}
.portfolio .portfolio-image:hover::before {
	opacity: 1;
	visibility: visible;
}
.portfolio .portfolio-image:hover img {
	transform: scale(1.05);
}
.portfolio .portfolio-image img {
	width: 100%;
	transition: .5s ease-in-out;
}
.portfolio .portfolio-content {
	margin-top: 16px;
}
.portfolio .portfolio-content h6 {
	margin-bottom: 0;
	font-weight: 300;
}
.portfolio .portfolio-content p {
	margin-bottom: 0;
}
.portfolio-filter .list-inline-item:not(:last-child) {
	margin-right: 1rem;
}
/*--------------------------- Contact ---------------------------*/
.contact-box {
	margin-top: 40px;
}
.contact-form {
	margin-top: -12px;
}
.form-group {
	margin-bottom: 24px;
}
.form-control {
	border-radius: 0;
	height: 32px;
	border: none;
	font-size: 14px;
	font-weight: 300;
	padding-left: 0;
	padding-bottom: 16px;
}
.form-control:focus {
	border-radius: 0;
	border: none;
	box-shadow: none;
	outline: 0;
}
.info-box {
	margin-top: 24px;
	padding-bottom: 24px;
	position: relative;
}
.item-icon {
	float: left;
}
.item-icon i {
	font-size: 36px;
	position: relative;
}
.item-icon img {
	width: 48px;
}
.info-text {
	margin-left: 3.75rem;
}
.info-text a {
    color: #fff;
}
.info-text h5 {
	font-size: 16px;
	margin-bottom: 0;
}
textarea.form-control {
	min-height: 128px;
}
#my-map {
	width: 100%;
	height: 350px;
	border-radius: 1rem;
}
textarea:-moz-placeholder {
	bottom: 0;
	position: relative;
	line-height: 1.5em;
}
/*------------------------- Portfolio Single -------------------------*/
.ajax-page-content {
	height: 100%;
	overflow: auto;
}
.single-portfolio-wrapper {
	padding: 2rem 0;
}
.ajax-page-nav {
	text-align: right;
}
.ajax-page-nav div.nav-item {
	position: relative;
	display: inline-block;
	margin-right: 8px;
}
.ajax-page-nav div.nav-item a {
	display: inline-block;
	height: 40px;
	width: 40px;
	text-align: center;
	border-radius: 4px;
	transition: .3s all ease;
}
.ajax-page-nav div.nav-item a i {
	line-height: 40px;
	font-size: 22px;
}
.closed {
	display: none;
}
.single-portfolio-wrapper {
	position: relative;
}
.single-portfolio-wrapper .portfolio-page-title {
	margin: 32px 0 16px;
}
.single-portfolio-wrapper .portfolio-page-title h1 {
	margin-bottom: 0;
}
.single-portfolio-wrapper .entry-image img {
	width: 100%;
	border-radius: 8px;
}
.single-portfolio-wrapper .entry-content h2 {
	margin: 30px 0 16px;
}
.portfolio-page-carousel {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
	overflow: hidden;
}
.portfolio-page-carousel .owl-nav {
	position: absolute;
	top: calc(50% - 32px);
	width: 100%;
	text-align: center;
}
.portfolio-page-carousel .owl-nav [class*="owl-"]::before {
	display: block;
}
.portfolio-page-carousel .owl-nav [class*="owl-"] {
	display: inline-block;
	cursor: pointer;
	transition: all .3s ease-in-out;
	position: absolute;
	width: 35px;
	height: 35px;
}
.portfolio-page-carousel .owl-nav [class*="owl-"] span {
	font-size: 32px;
	line-height: 30px;
}
.portfolio-page-carousel .owl-nav .owl-prev {
	margin-left: -32px;
	left: 0;
	border-radius: 0 4px 4px 0;
}
.portfolio-page-carousel .owl-nav .owl-next {
	margin-right: -32px;
	right: 0;
	border-radius: 4px 0 0 4px;
}
.portfolio-page-carousel:hover .owl-nav .owl-prev {
	margin-left: 0;
}
.portfolio-page-carousel:hover .owl-nav .owl-next {
	margin-right: 0;
}
.portfolio-page-carousel .owl-dots {
	display: inline-block;
	position: absolute;
	bottom: 0;
	right: 0;
	margin:0 8px 8px;
}
.portfolio-page-carousel .owl-dot span {
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 6px;
	border-radius: 50%;
	transition: all 0.5s ease;
}
.aside-item-portfolio ul li {
	font-size: 14px;
}
.aside-item-portfolio ul li:not(:last-child) {
	padding-bottom: 12px;
	margin-bottom: 12px;
}
.aside-item-portfolio ul li a {
	margin-right: 4px;
}
.single-portfolio .aside-title {
	position: relative;
	overflow: hidden;
	margin-bottom: 24px;
}
.aside-title h6 {
	font-weight: 400;
	font-size: 24px;
	margin-bottom: 16px;
}
.aside-title h6::after {
	content: " ";
	display: block;
	height: 1px;
	margin-top: 8px;
}

/*------------------------- Background Animation -------------------------*/
.circles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1;
}
.circles li {
	position: absolute;
	display: block;
	list-style: none;
	width: 20px;
	height: 20px;
	animation: animate 25s linear infinite;
	bottom: -150px;
}
.circles li:nth-child(1) {
	left: 25%;
	width: 80px;
	height: 80px;
	animation-delay: 0s;
}
.circles li:nth-child(2) {
	left: 10%;
	width: 20px;
	height: 20px;
	animation-delay: 2s;
	animation-duration: 12s;
}
.circles li:nth-child(3) {
	left: 70%;
	width: 20px;
	height: 20px;
	animation-delay: 4s;
}
.circles li:nth-child(4) {
	left: 40%;
	width: 60px;
	height: 60px;
	animation-delay: 0s;
	animation-duration: 18s;
}
.circles li:nth-child(5) {
	left: 65%;
	width: 20px;
	height: 20px;
	animation-delay: 0s;
}
.circles li:nth-child(6) {
	left: 75%;
	width: 110px;
	height: 110px;
	animation-delay: 3s;
}
.circles li:nth-child(7) {
	left: 35%;
	width: 150px;
	height: 150px;
	animation-delay: 7s;
}
.circles li:nth-child(8) {
	left: 50%;
	width: 25px;
	height: 25px;
	animation-delay: 15s;
	animation-duration: 45s;
}
.circles li:nth-child(9) {
	left: 20%;
	width: 15px;
	height: 15px;
	animation-delay: 2s;
	animation-duration: 35s;
}
.circles li:nth-child(10) {
	left: 85%;
	width: 150px;
	height: 150px;
	animation-delay: 0s;
	animation-duration: 11s;
}
@keyframes animate {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
		border-radius: 0;
	}
	100% {
		transform: translateY(-1000px) rotate(720deg);
		opacity: 0.3;
		border-radius: 50%;
	}
}
/*------------------------- Mouse Magic Cursor -------------------------*/
.m-magic-cursor {
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	border-radius: 50%;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	visibility: hidden;
}
.mmc-inner {
	margin-left: -3px;
	margin-top: -3px;
	width: 6px;
	height: 6px;
	z-index: 1031;
	background-color: #ff451b;
	transition: width .3s ease-in-out, height .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out;
}
.mmc-inner.mmc-hover {
	margin-left: -40px;
	margin-top: -40px;
	width: 80px;
	height: 80px;
	background-color: #ff451b;
	opacity: .3;
}
.mmc-outer {
	margin-left: -15px;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	border: 2px solid #ff451b;
	box-sizing: border-box;
	z-index: 1031;
	opacity: .5;
	transition: all .08s ease-out;
}
.mmc-outer.mmc-hover {
	opacity: 0;
}
.scroll-button {
	display: none;
	background-color: white;
	box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
	bottom: 15px;
	z-index: 1000;
	position: fixed;
	transition: all 0.3s ease;
	height: 100px;
	right: 15px;
	width: 40px;
	border-radius: 0.75rem;
}

.scroll-button a {
	width: 40px;
	height: 50px;
	line-height: 55px;
	display: inline-block;
	transition: all 0.3s ease;
	display: block;
}

.scroll-button a i {
	font-size: 24px;
}

/*------------------------- Media -------------------------*/
/*@media (min-width: 1440px) {*/
/*	#main>section:not(:first-child):not(:last-child) {*/
/*		width: calc(1296px - 190px);*/
/*	}*/
/*	.left-side {*/
/*		padding-top: 40px;*/
/*	}*/
/*}*/
/*@media (max-width: 1230px) {*/
/*	.extend-icon {*/
/*		display: none;*/
/*	}*/
/*}*/
@media (max-width: 991px) {
	.color-switcher .pallet-button{
		right: 20px;
		top: 65px;
	}
	.mCSB_scrollTools {
		top: 3%;
		bottom: 11%;
		right: 10px;
	}
	#main {
		border-radius: 16px !important;
		left: 50%;
		transform: translateX(-50%);
		width: 92% !important;
		height: 94%;
		top: 3%;
		z-index: 2;
	}
	#main>section {
		padding: 2rem 0 !important;
		border-radius: 16px !important;
	}
	.next-prev-page button {
		width: 40px;
		height: 40px;
		backdrop-filter: blur(35px);
		-webkit-backdrop-filter: blur(35px);
		border: none !important;
	}
	#main>section:not(:first-child):not(:last-child) {
		width: 100%;
	}
	.menu-align {
		left: 50%;
		transform: translateX(-50%);
	}
	.left-side-image {
		width: inherit;
		height: 63%;
	}
	.menu li a i {
		transform: translateY(-15%);
	}
	.menu a span {
		opacity: 1;
		visibility: visible;
		transform: translateY(-25%);
	}
	.menu a.active span {
		font-weight: 700 !important;
		letter-spacing: 1px;
		transform: translateY(-20%) scale(1.15) !important;
	}
	.menu a.active i {
		transform: translateY(-20%) scale(1.25) !important;
	}
	.services-boxes .row [class^="col-"]::after {
		display: none;
	}
	.services-boxes .row [class^="col-"]::before {
		display: initial !important;
	}
	.blog-single .entry-content {
		padding: 12px 0 !important;
	}
	.left-side {
		left: 200%;
		width: auto !important;
		z-index: 102;
		right: 15px;
		height: auto;
		bottom: 15px;
		top: 15px;
		overflow-y: hidden;
		border-radius: 16px;
	}
	.hero .hero-center {
		top: 3%;
		transform: translateY(0);
	}
	.about-img {
		margin-bottom: 2rem;
	}
	#main>section {
		padding-right:0.75rem;
		border-radius: 16px;
	}
	.vertical-line::after {
		display: none;
	}
	.next-prev-page {
		position: absolute;
		right: 20px;
		bottom: 20px;
		z-index: 100;
	}
	.nav-btn {
		position: fixed;
		top: 10px;
		right: 5px;
		display: block;
		width: 35px;
		height: 35px;
		border: none;
		border-radius: 50%;
	}
	.nav-btn i {
		position: absolute;
		left: 50%;
		top: 50%;
		font-size: 2rem;
		transform: translate(-50%,-50%);
	}
	.menu-toggle {
		position: absolute;
		display: block;
		width: 40px;
		height: 40px;
		line-height: 46px;
		text-align: center;
		right: 20px;
		font-size: 19px;
		top: 20px;
		transform: rotate(0deg);
		transition: .5s ease-in-out;
		cursor: pointer;
		z-index: 900;
		border-radius:12px;
	}
	.menu-toggle span {
		display: block;
		position: absolute;
		height: 2px;
		width: 50%;
		border-radius: 5px;
		opacity: 1;
		right: 24%;
		transform: rotate(0deg);
		transition: .25s ease-in-out;
	}
	.menu-toggle span:nth-child(1) {
		top: 13px;
		transform-origin: left center;
	}
	.menu-toggle span:nth-child(2) {
		top: 19px;
		transform-origin: left center;
	}
	.menu-toggle span:nth-child(3) {
		top: 25px;
		transform-origin: left center;
	}
	.menu-overlay {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 101;
	}
	.menu-toggle.menu-open span:nth-child(1) {
		transform: rotate(45deg);
		top: 12px;
		left: 13px;
	}
	.menu-toggle.menu-open span:nth-child(2) {
		width: 0%;
		opacity: 0;
	}
	.menu-toggle.menu-open span:nth-child(3) {
		transform: rotate(-45deg);
		top: 26px;
		left: 13px;
	}
	.left-side.hide h1 {
		font-size: 1.75rem;
		padding: 15px 0 0 0;
		margin-bottom: 0.15rem;
		letter-spacing: 2px;
	}
	#date {
		margin-top: 0;
	}
	#date :first-child {
		font-size: 1.5rem;
		position: relative;
		top: 1px;
		display: inline-block;
	}
	.mobile-menu {
		margin: 25px 0;
	}
	.mobile-menu .list-group-item {
		border:none;
		margin-bottom: 0.25rem 
	}
	.mobile-menu .list-group-item a {
		border:none;
	}
	.mobile-menu .list-group-item a.active {
		font-weight: bold;
	}
	#main {
		border-radius: 16px !important;
		top: 15px;
		left: 15px;
		right: 15px;
		bottom: 15px;
		width: inherit !important;
		height: inherit !important;
		transform: inherit !important;
		position: inherit;
	}

	@media (max-height: 620px) {
		.hero-image img {
			width: 200px;
		}
		.hero-content h2 {
			font-size: 24px;
		}
		.hero-footer .download-cv {
			margin-bottom: 1rem !important;
		}
		.hero-footer .social {
			margin-bottom: 0.5rem !important;
		}
	}
	@media (max-height: 600px) {
		.left-side {
			overflow-y: auto;
		}
		.left-side .menu-align {
			position: relative !important;
			height: auto !important;
			margin-top: 20px !important;
		}
		.menu-footer {
			position: relative !important;
			transform: inherit !important;
		}
	}
	@media (max-height: 560px) {
		#main>section#hero {
			padding-bottom: 0 !important;
		}
		.hero-footer {
			position: unset !important;
			transform: inherit !important;
			margin-top:0.5rem;
		}
	}
}
@media (max-width: 767px) {
	.mCSB_scrollTools {
		right: 5px;
	}
	.boxes [class^="col-"]::after {
		display: initial !important;
	}
	.boxes [class^="col-"]:last-child::after {
		display: none !important;
	}
}
@media (max-width: 575px) {
	.blog-single .comments ul {
		margin-left: 30px;
	}
	.blog-single .children {
		margin-left: 0 !important;
	}
	.testimonial .testimonial-comment {
		font-size: 20px;
		font-weight: 400;
		text-align: justify;
		hyphens: auto;
		padding: 0;
	}
}
/*------------------------- Dark -------------------------*/
body.dark-khushi , .dark-khushi .ajax-page-content {
	background-color: #232324;
	color: #fff;
}
.dark-khushi .left-side , .dark-khushi #main>section , .dark-khushi .right-side {
	background-color: #343539;
	color: #fff;
}
.dark-khushi .personal-info li small , .dark-khushi .services-description  ,
.dark-khushi .portfolio .portfolio-filter li a , .dark-khushi .blog-header ~ p , 
.dark-khushi .follow-label , .dark-khushi .social a , .dark-khushi .count-icon ~ p, 
.dark-khushi .language-skill h6 span , .dark-khushi .timeline-content p ,
.dark-khushi .aside-item-portfolio ul li ,.dark-khushi .blog-single .entry-meta ul li a ,
.dark-khushi .blog-single .comment-author p a , .dark-khushi .menu li a span ,
.dark-khushi .testimonial .testimonial-jub {
	color: #cbccce;
}
.dark-khushi .text-muted {
	color: #cbccce !important;  
}
.dark-khushi .portfolio .portfolio-content h6 ,.dark-khushi .blog-header , .dark-khushi .primary-button ,
.dark-khushi .primary-button:hover {
	color: #fff;
}
.dark-khushi .mCSB_scrollTools .mCSB_draggerRail {
	background-color: #818181;
}
.dark-khushi .menu a:hover span, .dark-khushi .menu a.active span {
	color: #fff !important;
}
.dark-khushi input , .dark-khushi textarea {
	background-color: transparent;
	border-bottom: 1px solid #cbccce;
	color: #fff;
}
.dark-khushi .skills .skillbar {
	background-color: #535455 !important;
}
.dark-khushi .skills .skillbar-bar {
	border: 2px solid #535455 !important;
}
@media (max-width: 991px) {
	.dark-khushi .menu-toggle, .dark-khushi .next-prev-page button , .dark-khushi .mobile-blog-nav.blog-next-prev-page a {
		background-color: #535455  !important;
	}
}
.dark-khushi .circles li {
	background: rgba(255, 255, 255, 0.01);
}
.dark-khushi .aside-item-portfolio ul li:not(:last-child) {
	border-bottom: 1px solid #535353;
}
.dark-khushi #line-loader:before, .dark-khushi #line-loader:after {
	background-color: #343539;
}
.dark-khushi .middle-line:before {
	background-color: #fff;
}
.dark-khushi .middle-line:after {
	background-color: #818181;
}
.dark-khushi .contact-01 .form-control {
	background-color: transparent;
	border-bottom: 1px solid #cbccce;
	border-radius: 0;
}
@media (prefers-color-scheme: dark) {
	body, .ajax-page-content{
		background-color: #232324 !important;
		color: #fff !important;
	}
	.left-side, #main>section, .right-side {
		background-color: #343539 !important;
		color: #fff !important;
	}
	.personal-info li small, .services-description,
	.portfolio .portfolio-filter li a , .blog-header ~ p ,
	.follow-label, .social a, .count-icon ~ p,
	.language-skill h6 span, .timeline-content p ,
	.aside-item-portfolio ul li, .blog-single .entry-meta ul li a,
	.blog-single .comment-author p a, .menu li a span,
	.testimonial .testimonial-jub {
		color: #cbccce !important;
	}
	.text-muted {
		color: #cbccce !important;  
	}
	.portfolio .portfolio-content h6, .blog-header, .primary-button, .primary-button:hover {
		color: #fff !important;
	}
	.mCSB_scrollTools .mCSB_draggerRail {
		background-color: #818181 !important;
	}
	.menu a:hover span, .menu a.active span {
		color: #fff !important;
	}
	input, textarea {
		background-color: transparent !important;
		border-bottom: 1px solid #cbccce !important;
		color: #fff !important;
	}
	.skills .skillbar {
		background-color: #535455 !important;
	}
	.skills .skillbar-bar {
		border: 2px solid #535455 !important;
	}
	.circles li {
		background: rgba(255, 255, 255, 0.01) !important;
	}
	.aside-item-portfolio ul li:not(:last-child) {
		border-bottom: 1px solid #535353 !important;
	}
	#line-loader:before, #line-loader:after {
		background-color: #343539 !important;
	}
	.middle-line:before {
		background-color: #fff !important;
	}
	.middle-line:after {
		background-color: #818181 !important;
	}
	.contact-01 .form-control {
		background-color: transparent !important;
		border-bottom: 1px solid #cbccce !important;
		border-radius: 0;
	}
}
@media (prefers-color-scheme: dark) and (max-width: 991px) {
	.menu-toggle, .next-prev-page button, .mobile-blog-nav.blog-next-prev-page a {
		background-color: #535455  !important;
	}
}