/*Font Awesome Free Icon*/
 @import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Rubik:500,700,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Clicker+Script&family=Poppins:wght@300;400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Tagesschrift&display=swap');


 /*general style */
 body {
     line-height: 1.5;
     font-size: 16px;
     font-family: 'Monstserrat', sans-serif;
     margin: 0;
     font-weight: 400;
 }

 * {
     margin: 0;
     padding: 0;
     outline: none;
     text-decoration: none;
     box-sizing: border-box;
 }

 ::before,
 ::after {
     box-sizing: border-box;
 }

 input,
 textarea,
 select {
     font-family: 'Monstserrat', sans-serif;
 }

 .section {
     background-color: #f2f2fc;
     min-height: 100vh;
     display: block;
     padding: 0 30px;
     position: fixed;
     left: 270px;
     top: 0;
     right: 0;
     bottom: 0;
     z-index: 0;
     overflow-x: hidden;
     overflow-y: auto;
     opacity: 1;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
 }

 .section.back-section {
     z-index: 1;
 }

 .section.active {
     opacity: 1;
     z-index: 2;
     -webkit-animation: slideSection 1s ease;
     animation: slideSection 1s ease;
 }


 @-webkit-keyframes slideSection {
     0% {
         -webkit-transform: translateX(100%);
         transform: translateX(100%);
     }

     100% {
         -webkit-transform: translateX(0%);
         transform: translateX(0%);
     }
 }

 @keyframes slideSection {
     0% {
         -webkit-transform: translateX(100%);
         transform: translateX(100%);
     }

     100% {
         -webkit-transform: translateX(0%);
         transform: translateX(0%);
     }
 }

 .hidden {
     display: none !important;
 }


 .row {
     display: -ms-flexbox;
     display: flex;
     font-family: 'Montserrat', sans-serif;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     margin-right: -15px;
     margin-left: -15px;
     position: relative;

 }

 .padd-15 {
     padding-left: 15px;
     padding-right: 15px;
 }

 /* .main-content{
    padding-left: 270px;
} */
 .container {
     max-width: 1100px;
     width: 100%;
     margin: auto;
 }

 .section .container {
     padding-top: 60px;
     padding-bottom: 70px;
 }

 .section-title {
     -ms-flex: 0 0 100%;
     flex: 0 0 100%;
     max-width: 100%;
     margin-bottom: 60px;
 }

 .section-title h2 {
     font-size: 40px;
     color: #302e4d;
     font-family: 'Rubik', sans-serif;
     font-weight: 700;
     position: relative;

 }

 .section-title h2::before {
     content: '';
     height: 4px;
     width: 50px;
     position: absolute;
     top: 100%;
     left: 0;
 }

 .section-title h2::after {
     content: '';
     height: 4px;
     width: 25px;
     position: absolute;
     top: 100%;
     left: 0;
     margin-top: 8px;
 }

 .btn {
     font-family: 'Rubik', sans-serif;
     font-size: 16px;
     font-weight: 500;
     padding: 12px 35px;
     color: white;
     border-radius: 40px;
     display: inline-block;
     white-space: nowrap;
     border: none;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .btn:hover {
     -webkit-transform: scale(1.05);
     transform: scale(1.05);

 }

 .shadow-dark {
     -webkit-box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
     box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
 }

 /* preloader  */
 .preloader {
     background-color: #222222;
     position: fixed;
     left: 0;
     top: 0;
     height: 100%;
     width: 100%;
     z-index: 150;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-align: center;
     align-items: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-transition: all 1s ease;
     transition: all 1s ease;
 }

 .preloader.opacity-0 {
     opacity: 0;
 }

 .preloader .loader {
     height: 40px;
     width: 40px;
     border: 4px solid #e3e3e3;
     border-radius: 50%;
     border-top: 4px solid transparent;
     border-bottom: 4px solid transparent;
     -webkit-animation: spin 2s linear infinite;
     animation: spin 2s linear infinite;
 }

 @-webkit-keyframes spin {
     0% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }

     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }

 @keyframes spin {
     0% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }

     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }


 /*=================== Aside=====================*/
 .aside {
     width: 270px;
     background-color: #fdf9ff;
     position: fixed;
     height: 100%;
     left: 0;
     top: 0;
     z-index: 11;
     border-right: 1px solid #e8dfec;
     padding: 30px;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
 }

 .aside .aside-inner {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     padding: 30px;
     overflow-y: auto;
 }

 .aside .logo {
     padding: 30px 0;
     padding-left: 20px;
 }

 .aside .logo img {
     width: 150px;
     height: auto;
     border-radius: 50%;
     transition: all 0.3s ease-in-out;
 }

 .aside .logo img:hover {
     transform: scale(1.1);
 }

 .aside .logo a {
     font-size: 40px;
     color: #302e4d;
     font-family: 'Montserrat', sans-serif;
     font-weight: 700;
     text-decoration: none;
     display: inline-block;
     position: relative;
     padding: 0 10px;
     line-height: 50px;
 }

 .aside .logo a::before {
     content: "";
     position: absolute;
     width: 20px;
     height: 20px;
     top: -10px;
     left: 0;
 }

 .aside .logo a::after {
     content: "";
     position: absolute;
     width: 20px;
     height: 20px;
     bottom: 0;
     right: 0;
 }

 .aside .nav-toggler {
     height: 40px;
     width: 45px;
     border: 1px solid #d4d4e3;
     cursor: pointer;
     position: fixed;
     left: 300px;
     top: 20px;
     z-index: 11;
     border-radius: 5px;
     background-color: #fdf9ff;
     /* display: -ms-flexbox;
    display: flex; */
     display: none;
     -ms-flex-align: center;
     align-items: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
 }

 .aside .nav-toggler span {
     height: 2px;
     width: 18px;
     display: inline-block;
     position: relative;
 }

 .aside .nav-toggler.open span {
     background-color: transparent;
 }

 .aside .nav-toggler span::before {
     content: '';
     height: 2px;
     width: 18px;
     position: absolute;
     top: -6px;
     left: 0;
 }

 .aside .nav-toggler.open span::before {
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
     top: 0px;
 }

 .aside .nav-toggler span::after {
     content: '';
     height: 2px;
     width: 18px;
     position: absolute;
     top: 6px;
     left: 0;
 }

 .aside .nav-toggler.open span::after {
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
     top: 0px;
 }

 .aside .nav {
     list-style: none;
     margin: 80px 0;
     padding: 0;
 }

 .aside .nav li {
     display: block;
 }

 .aside .nav li a {
     font-size: 16px;
     font-weight: 600;
     font-family: 'Montserrat', sans-serif;
     color: #302e4d;
     text-decoration: none;
     line-height: 45px;
     display: block;
     border-bottom: 1px solid #e8dfec;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
     text-transform: capitalize;
 }

 .aside .nav li a:not(.active):hover {
     padding-left: 5px;
 }

 .aside .nav li a .fa {
     margin-right: 5px;
 }

 .aside .copyright-text {
     font-size: 13px;
     font-family: 'Montserrat', sans-serif;
     color: #646464;
 }


 /*================ home ======================*/

 .home {
     min-height: 100vh;
     display: -ms-flexbox;
     display: flex;
 }

 .home .intro {
     text-align: center;
 }

 .home .intro img {
     height: 300px;
     width: 300px;
     object-fit: cover;
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
 }

 .home .intro img:hover {
     transform: scale(1.1);
 }

 .home .intro h1 {
     font-size: 30px;
     color: #302e4d;
     font-family: 'Tagesschrift', sans-serif;
     text-transform: uppercase;
     font-weight: 700;
     margin: 20px 0 5px;
 }

 .home .intro p {
     font-size: 18px;
     font-family: 'Montserrat', sans-serif;
     font-weight: 500;
     margin: 0;
     line-height: 22px;
     color: #504e70;
 }

 .home .intro p span {
     font-weight: 600;
 }


 .home .intro .social-links {
     margin-top: 25px;
 }

 .home .intro .social-links a {
     height: 35px;
     width: 35px;
     display: inline-block;
     text-align: center;
     line-height: 35px;
     color: #ffffff;
     margin: 0 4px;
     border-radius: 50%;
     text-decoration: none;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
 }

 .home .intro .social-links a:hover {
     -webkit-transform: scale(1.1);
     transform: scale(1.1);
 }


 /*About Section*/
 .about .about-content {
     -ms-flex: 0 0 100%;
     flex: 0 0 100%;
     max-width: 100%;

 }

 .about .about-content .about-text {
     -ms-flex: 0 0 100%;
     flex: 0 0 100%;
     max-width: 100%;
     text-align: justify;
 }

 .about .about-content .about-text h3 {
     font-size: 24px;
     margin-bottom: 15px;
     font-weight: 700;
     color: #302e4d;
 }

 .about .about-content .about-text p {
     font-size: 16px;
     line-height: 25px;
     color: #504e70;
 }

 .about .about-content .personal-info {
     -ms-flex: 0 0 60%;
     flex: 0 0 60%;
     max-width: 60%;
     margin-top: 40px;
 }

 .about .about-content .personal-info .info-item {
     -ms-flex: 0 0 50%;
     flex: 0 0 50%;
     min-width: 50%;
 }

 .about .about-content .personal-info .info-item p {
     font-weight: 600;
     padding: 10px 0;
     font-size: 16px;
     color: #302e4d;
     margin: 0;
     border-bottom: 1px solid #e8dfec;
 }

 .about .about-content .personal-info .info-item p span {
     font-weight: 400;
     color: #504e70;
     margin-left: 4px;
     display: inline-block;
 }

 .about .about-content .personal-info .buttons {
     margin-top: 30px;

 }

 .about .about-content .personal-info .buttons .btn {
     margin-right: 15px;
     margin-top: 10px;

 }

 /* about skill */
 .about .about-content .skills {
     -ms-flex: 0 0 40%;
     flex: 0 0 40%;
     min-width: 40%;
     margin-top: 40px;
 }

 .about .about-content .skills .skill-item {
     -ms-flex: 0 0 100%;
     flex: 0 0 100%;
     max-width: 100%;
 }

 .about .about-content .skills .skill-item h5 {
     line-height: 40px;
     font-weight: 600;
     font-size: 16px;
     color: #302e4d;
     text-transform: capitalize;
     margin: 0;
 }

 .about .about-content .skills .skill-item .progress {
     background-color: #e3e3e3;
     ;
     height: 7px;
     border-radius: 4px;
     width: 100%;
     position: relative;
 }

 .about .about-content .skills .skill-item .progress .progress-in {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     border-radius: 4px;
 }

 .about .about-content .skills .skill-item {
     margin-bottom: 25px;
 }


 .about .about-content .skills .skill-item .skill-percent {
     position: absolute;
     right: 0;
     color: #302e4d;
     top: -40px;
     font-weight: 400;
     line-height: 40px;
 }

 /* Education detail and experiences */

 .about .about-content .education,
 .about .about-content .experience {
     -ms-flex: 0 0 50%;
     flex: 0 0 50%;
     max-width: 50%;
     margin-top: 30px;
 }

 .about .about-content h3.title {
     font-size: 24px;
     margin-bottom: 30px;
     font-weight: 700;
     color: #302e4d;
 }

 .about .about-content .timeline-box {
     -ms-flex: 0 0 100%;
     flex: 0 0 100%;
     max-width: 100%;
 }

 .about .about-content .timeline {
     background-color: #fdf9ff;
     padding: 30px 15px;
     border: 1px solid #d4d4e3;
     border-radius: 10px;
     width: 100%;
     position: relative;
 }

 .about .about-content .timeline .timeline-item {
     position: relative;
     padding-left: 37px;
     padding-bottom: 50px;
 }

 .about .about-content .timeline .timeline-item:last-child {
     padding-bottom: 0;
 }

 .about .about-content .timeline .timeline-item::before {
     content: '';
     width: 1px;
     position: absolute;
     height: 100%;
     left: 7px;
     top: 0;
 }

 .about .about-content .timeline .circle-dot {
     position: absolute;
     left: 0;
     top: 0;
     height: 15px;
     width: 15px;
     border-radius: 50%;
 }

 .about .about-content .timeline .timeline-date {
     font-weight: 400;
     font-size: 14px;
     margin-bottom: 12px;
     color: #504e70;
 }

 .about .about-content .timeline .timeline-date .fa {
     margin-right: 5px;
 }

 .about .about-content .timeline .timeline-title {
     font-weight: 700;
     font-size: 18px;
     margin-bottom: 15px;
     text-transform: capitalize;
     color: #302e4d;
 }

 .about .about-content .timeline .timeline-text {
     line-height: 25px;
     font-size: 16px;
     text-align: justify;
     color: #504e70;

 }

 /* services */
 .service .container {
     padding-bottom: 40px;
 }

 .service .service-item {
     margin-bottom: 30px;
     -ms-flex: 0 0 33.33%;
     flex: 0 0 33.33%;
     max-width: 33.33%;
     display: -ms-flexbox;
     display: flex;
 }

 .service .service-item .service-item-inner {
     background-color: #fdf9ff;
     border: 1px solid #d4d4e3;
     border-radius: 10px;
     padding: 30px 15px;
     text-align: center;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
     width: 100%;
 }

 .service .service-item .service-item-inner:hover {
     box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
 }

 .service .service-item .service-item-inner .icon {
     height: 60px;
     width: 60px;
     border-radius: 50%;
     display: block;
     margin: 0 auto 30px;
     text-align: center;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
 }

 .service .service-item .service-item-inner .icon .fa {
     font-size: 40px;
     line-height: 60px;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
 }

 .service .service-item .service-item-inner:hover .icon .fa {
     font-size: 25px;
     color: #ffffff;
 }

 .service .service-item .service-item-inner h4 {
     font-size: 18px;
     margin-bottom: 15px;
     color: #302e4d;
     font-weight: 700;
     text-transform: capitalize;
 }

 .service .service-item .service-item-inner p {
     font-size: 16px;
     color: #504e70;
     line-height: 25px;
     text-align: center;
 }

 /* portfolio section */
 .portfolio .container {
     padding-bottom: 40px;
 }

 .portfolio .portfolio-filter {
     -ms-flex: 0 0 100%;
     flex: 0 0 100%;
     max-width: 100%;
     text-align: center;
     margin-bottom: 40px;
 }

 .portfolio .portfolio-filter button {
     border: none;
     background-color: transparent;
     font-size: 18px;
     font-weight: 700;
     text-transform: capitalize;
     margin: 0px 10px;
     color: #302e4d;
     cursor: pointer;
     border-bottom: 2px solid transparent;
     white-space: nowarp;
     padding-bottom: 2px;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
 }

 .portfolio .portfolio-item {
     -ms-flex: 0 0 33.33%;
     flex: 0 0 33.33%;
     max-width: 33.33%;
     margin-bottom: 30px;
 }

 .portfolio .portfolio-item.hide {
     display: none;
 }

 .portfolio .portfolio-item.show {
     display: block;
     animation: showItem 0.5s ease;
 }

 @-webkit-keyframes showItem {
     0% {
         -webkit-transform: scale(0.8);
         transform: scale(0.8);
         opacity: 0;
     }

     100% {
         -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 1;
     }
 }

 @keyframes showItem {
     0% {
         -webkit-transform: scale(0.8);
         transform: scale(0.8);
         opacity: 0;
     }

     100% {
         -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 1;
     }
 }

 .portfolio .portfolio-item-inner {
     border: 8px solid #fdf9ff;
     border-radius: 10px;
     overflow: hidden;
     cursor: pointer;
     position: relative;
 }

 .portfolio .portfolio-item-inner .portfolio-img img {
     width: 100%;
     display: block;
     height: 250px;
 }

 .portfolio .portfolio-item .portfolio-info {
     position: absolute;
     left: 0;
     top: 0;
     background-color: rgba(0, 0, 0, 0.8);
     height: 100%;
     width: 100%;
     z-index: 1;
     padding: 30px;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
     opacity: 0;
 }

 .portfolio .portfolio-item-inner:hover .portfolio-info {
     opacity: 1;
 }

 .portfolio .portfolio-item .portfolio-info h4 {
     font-size: 18px;
     font-weight: 700;
     color: #ffffff;
     text-transform: capitalize;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
     -webkit-transform: translateX(-20px);
     transform: translateX(-20px);
     opacity: 0;
 }

 .portfolio .portfolio-item-inner:hover .portfolio-info h4 {
     -webkit-transform: translateX(0px);
     transform: translateX(0px);
     opacity: 1;
 }

 .portfolio .portfolio-item .portfolio-info .icon {
     height: 40px;
     width: 40px;
     background-color: #ffffff;
     text-align: center;
     border-radius: 50%;
     position: absolute;
     right: 30px;
     bottom: 30px;
     opacity: 0;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
     -webkit-transform: translateX(20px);
     transform: translateX(20px);
 }

 .portfolio .portfolio-item-inner:hover .portfolio-info .icon {
     -webkit-transform: translateX(0px);
     transform: translateX(0px);
     opacity: 1;
 }

 .portfolio .portfolio-item .portfolio-info .icon .fa {
     line-height: 40px;
 }




 /* blog section */

 .blog .container {
     padding-bottom: 40px;

 }

 .blog .blog-item {
     -ms-flex: 0 0 33.33%;
     flex: 0 0 33.33%;
     max-width: 33.33%;
     margin-bottom: 30px;
     display: flex;
 }

 .blog .blog-item-inner {
     border-radius: 10px;
     overflow: hidden;
     border: 1px solid #d4d4e3;
     width: 100%;
 }

 .blog .blog-item-inner .blog-img {
     position: relative;
     overflow: hidden;
 }

 .blog .blog-item-inner .blog-img img {
     display: block;
     width: 100%;
     -webkit-transition: all 0.5s ease;
     transition: all 0.5s ease;
     height: 200px;
 }

 .blog .blog-item-inner:hover .blog-img img {
     -webkit-transform: scale(1.1);
     transform: scale(1.1);
 }

 .blog .blog-item-inner .blog-img .blog-date {
     position: absolute;
     padding: 4px 10px;
     border-radius: 5px;
     color: #ffffff;
     font-weight: 600;
     font-size: 14px;
     left: 15px;
     bottom: 15px;
 }

 .blog .blog-item-inner .blog-info {
     padding: 30px 15px;
     background-color: #fdf9ff;
 }

 .blog .blog-item-inner .blog-info .blog-title {
     font-size: 18px;
     font-weight: 700;
     color: #302e4d;
     text-transform: capitalize;
     margin-bottom: 10px;
 }

 .blog .blog-item-inner .blog-info .blog-description {
     font-size: 16px;
     line-height: 25px;
     color: #504e70;
     font-weight: 400;
     margin-bottom: 15px;
 }

 .blog .blog-item-inner .blog-info .blog-tags {
     font-size: 16px;
     line-height: 25px;
     color: #504e70;
     font-weight: 700;
     text-transform: capitalize;
 }

 .blog .blog-item-inner .blog-info .blog-tags a {
     text-decoration: none;
     font-weight: 600;

 }

 /*contact section*/


 .contact .contact-info-item {
     -ms-flex: 0 0 33.33%;
     flex: 0 0 33.33%;
     max-width: 33.33%;
     text-align: center;
     margin-bottom: 40px;

 }

 .contact .contact-info-item .icon {
     display: inline-block;

 }

 .contact .contact-info-item .icon .fa {
     font-size: 40px;
 }

 .contact .contact-info-item h4 {
     font-size: 18px;
     font-weight: 700;
     color: #302e4d;
     text-transform: capitalize;
     margin: 15px 0px 5px;
 }

 .contact .contact-info-item p {
     font-size: 16px;
     line-height: 25px;
     color: #504e70;
     margin: 0;
     font-weight: 400;

 }

 .contact .contact-form {
     -ms-flex: 0 0 100%;
     flex: 0 0 100%;
     max-width: 100%;

 }

 .contact .contact-form .col-6 {
     -ms-flex: 0 0 50%;
     flex: 0 0 50%;
     max-width: 50%;
 }

 .contact .contact-form .col-12 {
     -ms-flex: 0 0 100%;
     flex: 0 0 100%;
     max-width: 100%;
 }

 .contact .contact-form .form-item {
     margin-bottom: 30px;
 }

 .contact .contact-form .form-item .form-control {
     width: 100%;
     height: 50px;
     border-radius: 25px;
     border: 1px solid #d4d4e3;
     padding: 10px 25px;
     font-size: 16px;
     color: #504e70;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
 }

 .contact .contact-form .form-item .form-control:focus {
     -webkit-box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
     box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
 }

 .contact .contact-form .form-item textarea.form-control {
     height: 140px;
 }

 .contact .contact-form .btn {
     height: 50px;
     padding: 0px 50px;
 }


 /* dark theme */

 body.dark .section {
     background-color: #151515;
 }

 body.dark .contact .contact-form .form-item .form-control,
 body.dark .blog .blog-item-inner .blog-info,
 body.dark .service .service-item .service-item-inner,
 body.dark .about .about-content .timeline,
 body.dark .aside {
     background-color: #222222;
 }

 body.dark .contact .contact-info-item h4,
 body.dark .blog .blog-item-inner .blog-info .blog-title,
 body.dark .portfolio .portfolio-filter button,
 body.dark .service .service-item .service-item-inner h4,
 body.dark .about .about-content .timeline .timeline-title,
 body.dark .about .about-content h3.title,
 body.dark .about .about-content .skills .skill-item h5,
 body.dark .about .about-content .personal-info .info-item p,
 body.dark .about .about-content .about-text h3,
 body.dark .section-title h2,
 body.dark .home .intro h1,
 body.dark .aside .logo a,
 body.dark .aside .nav li a {
     color: #ffffff;
 }

 body.dark .contact .contact-form .form-item .form-control,
 body.dark .contact .contact-info-item p,
 body.dark .blog .blog-item-inner .blog-info .blog-tags,
 body.dark .blog .blog-item-inner .blog-info .blog-description,
 body.dark .service .service-item .service-item-inner p,
 body.dark .about .about-content .timeline .timeline-text,
 body.dark .about .about-content .timeline .timeline-date,
 body.dark .about .about-content .skills .skill-item .skill-percent,
 body.dark .about .about-content .personal-info .info-item p span,
 body.dark .about .about-content .about-text p,
 body.dark .home .intro p {
     color: #e9e9e9;
 }

 body.dark .aside,
 body.dark .contact .contact-form .form-item .form-control,
 body.dark .blog .blog-item-inner,
 body.dark .portfolio .portfolio-item-inner,
 body.dark .service .service-item .service-item-inner,
 body.dark .about .about-content .timeline,
 body.dark .about .about-content .personal-info .info-item p,
 body.dark .aside .nav li a {
     border-color: #393939;
 }

 body.dark .shadow-dark {
     -webkit-box-shadow: none;
     box-shadow: none;
 }


 /* responsive */

 @media(max-width:1199px) {

     .section .container {
         padding-top: 70px;
     }

     .aside .nav-toggler {
         display: -ms-flexbox;
         display: flex;
         left: 30px;
     }

     .aside .nav-toggler.open {
         left: 200px;
     }

     .aside {
         left: -270px;
     }

     .aside.open {
         left: 0px;
     }

     .section {
         left: 0;
     }

     .section.open {
         left: 270px;
     }

     .about .about-content .personal-info .info-item p span {
         display: block;
         margin-left: 0;
     }
 }

 @media(max-width: 911px) {

     .blog .blog-item,
     .portfolio .portfolio-item,
     .service .service-item {
         -ms-flex: 0 0 50%;
         flex: 0 0 50%;
         max-width: 50%;
     }
 }

 @media(max-width:768px) {

     .contact .contact-form .col-6,
     .blog .blog-item,
     .service .service-item,
     .about .about-content .experience,
     .about .about-content .education,
     .about .about-content .skills,
     .about .about-content .personal-info {
         -ms-flex: 0 0 100%;
         flex: 0 0 100%;
         max-width: 100%;
     }

     .portfolio .portfolio-filter button {
         margin-bottom: 10px;
     }
 }


 @media(max-width:575px) {

     .contact .contact-info-item,
     .portfolio .portfolio-item {
         -ms-flex: 0 0 100%;
         flex: 0 0 100%;
         max-width: 100%;
     }
 }